Obs. Se quiser ir direto para o código final, procure o link do JsFiddle no final do post.

Adicionar Dependentes

Capturar Dados

HTML

Para iniciarmos, basta criar um container no HTML onde você quer que os elementos sejam exibidos, além do botão simples de adição e um botão de captura de dados, para que, desta forma, possamos enviar o JSON resultante para o back-end.

A organização dos containers é sempre muito importante quando trabalhamos com Javascript e nos dedicamos ao uso correto da web semântica.

<div class="dependentes">
  <button id="btnAdicionarDependentes">
  📝Adicionar Dependentes
  </button>
  <div class="container" id="dependentesContainer">
  </div>
  <button class="green" id="btnCapturarDados">
  ✅ Capturar Dados
  </button>
</div>
<pre id="containerDados"></pre>

Javascript

Como de praxe, usaremos o Javascript puro para realizar essa tarefa, dessa forma você poderá usar em qualquer lugar o que aprender aqui.

Para poder capturar e devolver os dados, usaremos um objeto JSON, dessa forma fica fácil remontar, tanto no back-end, quando no front-end, os dados nas formatações e/ou elementos que precisamos.

Vamos criar, como exemplo, o JSON abaixo, e vamos declará-lo em uma variável global chamada dependentes, seguindo a ideia de um cadastro de lista de dependentes, então temos:

var dependentes = [{
  identificador: 13,
  nome: "Joana da Silva",
  idade: 12,
}];

Agora vamos nos focar nas funções. A primeira coisa que vamos fazer é criar um método que pegue os dados do JSON e o converta para elementos HTML renderizados na tela. Dessa forma, usaremos um laço para ler o JSON e aplicamos seus dados em uma template string e o adicionamos no container específico:

function carregarDependentes() {
  let dependentes_container = document.querySelector("#dependentesContainer");
  dependentes_container.innerHTML = "";
  dependentes.forEach((el) => {
    let identificador = el.identificador;
    let nome = el.nome;
    let idade = el.idade;
    let dependente_container = `<div class="dependente" data-id="${identificador}">
    								<input class="nome" placeholder="Digite o nome" type="text" value="${nome}">
                                    <input class="idade" placeholder="Digite a idade" type="number" value="${idade}">
                                    <div class="action">
                                        <a href="#" class="salvar">salvar 💾</a>
                                        <a href="#" class="remover">❌</a>
									</div>
                                </div>`;
    dependentes_container.innerHTML += dependente_container;
  });
}

Agora vem o segredo que facilita o processo e o deixa mais organizado. Ao invés de remover e adicionar os elementos na tela, iremos nos focar em remover e adicionar do JSON e, em seguida, regenerar os elementos a partir desse objeto. Ficando, assim, com um código mais limpo. Outro motivo pelo qual usamos a regeneração dos elementos é para evitar criarmos IDs únicos temporários. Ao regenerar, podemos usar os índices do próprio array como identificador.

Para adicionar um novo item, basta incluirmos um dado vazio no JSON, porém, seguindo nosso modelo, e mandamos gerar novamente os elementos:

function adicionarDependentes() {
  dependentes.push({ identificador: "", nome: "", idade: "" });
  carregarDependentes();
}

Para remover, similar a criação de um novo, vamos usar um laço, porém para adicionar o evento aos botões de excluir. Usaremos então o método splice para remover o array. Depois, obviamente, vamos regenerar os elementos a partir da função carregarDependentes():

function removerDependentes() {
  document
    .querySelectorAll("#dependentesContainer .remover")
    .forEach((el, i) => {
      el.addEventListener("click", () => {
        dependentes.splice(i, 1); // O splice vai remover um item do array no JSON
        carregarDependentes(); // E chamamos o método para regenerar os elementos
      });
    });
}

Uma vez que adicionamos uma nova linha em branco precisamos salvar seu preenchimento e aí iremos usar a mesma lógica de remoção, mas usaremos o splice para substituir e não para remover um dado do JSON. Porém, adicionaremos uma pequena validação para evitar entrar dados incompletos:

function salvarDependentes() {
  document
    .querySelectorAll("#dependentesContainer .salvar")
    .forEach((el, i) => {
      el.addEventListener("click", () => {
        let identificador = el.parentElement.parentElement.getAttribute(
          "data-id"
        );
        let nome = el.parentElement.parentElement.querySelector(".nome").value;
        let idade = el.parentElement.parentElement.querySelector(".idade")
          .value;

        if (!nome.length || !idade.length) { // Verifica se nome e idade foram preenchidos
          alert("Nome e idade precisam ser preenchidos para salvar.");
          return false;
        }
        dependentes.splice(i, 1, {
          identificador: identificador,
          nome: nome,
          idade: idade,
        }); // Substitui o dado no JSON
        carregarDependentes(); //  E chamamos o método para regenerar os elementos
      });
    });
}

Um outro método que precisamos adicionar é uma forma de bloquear para que um usuário consiga clicar em outros elementos ao redor, sem antes finalizar a edição do item. Para isso, iremos fazer um laço que adiciona uma classe de CSS, que vamos chamar de disabled, em todos os elementos, exceto o que está sendo editado. Essa classe possui um point-events: 0 e um opacity: 0.5. Para demonstrar que está desativado, você pode ainda adicionar outros efeitos, como filtros de baixo contraste ou escala de cinza.

function travarOutros(element) {
  if (element == false) { // Passar false como parâmetro para que todos os elementos fiquem habilitados novamente, ao invés de apenas o elemento que queremos liberar
    document
      .querySelectorAll(".dependentes button, .dependentes .container > div")
      .forEach((el) => {
        el.classList.remove("disabled");
      });
    document.querySelector("#containerDados").innerHTML = "";
    return false;
  }
  document
    .querySelectorAll(".dependentes button, .dependentes .container > div")
    .forEach((el) => {
      if (el != element) {  // Verifica se o elemento no laço é o que está sendo editado
        el.classList.add("disabled");
      }
    });
}

Agora, antes de continuarmos, vamos revisitar as funções acima para chamar, quando necessário, uma função dentro da outra (leia os comentários no código para entender), ficando assim:

function carregarDependentes() {
  let dependentes_container = document.querySelector("#dependentesContainer");
  dependentes_container.innerHTML = "";
  dependentes.forEach((el) => {
    let identificador = el.identificador;
    let nome = el.nome;
    let idade = el.idade;
    let dependente_container = `<div class="dependente" data-id="${identificador}">
    															<input class="nome" placeholder="Digite o nome" type="text" value="${nome}">
                                  <input class="idade" placeholder="Digite a idade" type="number" value="${idade}">
                                  <div class="action">
                                  	<a href="#" class="salvar">salvar 💾</a>
                                    <a href="#" class="remover">❌</a>
																	</div>
															  </div>`;
    dependentes_container.innerHTML += dependente_container;
  });
  salvarDependentes(); // Adicionamos o método aqui para que o laço seja aplicado nos novos items adicionados
  removerDependentes(); // Adicionamos o método aqui para que o laço seja aplicado nos novos items adicionados
  travarOutros(false); // Adicionamos para destravar tudo
}

function removerDependentes() {
  document
    .querySelectorAll("#dependentesContainer .remover")
    .forEach((el, i) => {
      el.addEventListener("click", () => {
        dependentes.splice(i, 1);
        carregarDependentes(); // Regenerar os elementos HTML após remover do JSON
      });
    });
}

function adicionarDependentes() {
  dependentes.push({ identificador: "", nome: "", idade: "" });
  carregarDependentes(); // Regenerar os elementos HTML após remover do JSON
  travarOutros(
    document.querySelector("#dependentesContainer > div:last-child")
  ); // Desabilitar todos os outros elementos, exceto o que acabou de ser adicionado
}

function salvarDependentes() {
  document
    .querySelectorAll("#dependentesContainer .salvar")
    .forEach((el, i) => {
      el.addEventListener("click", () => {
        let identificador = el.parentElement.parentElement.getAttribute(
          "data-id"
        );
        let nome = el.parentElement.parentElement.querySelector(".nome").value;
        let idade = el.parentElement.parentElement.querySelector(".idade")
          .value;

        if (!nome.length || !idade.length) {
          alert("Nome e idade precisam ser preenchidos para salvar.");
          return false;
        }
        dependentes.splice(i, 1, {
          identificador: identificador,
          nome: nome,
          idade: idade,
        });
        carregarDependentes(); // Regenerar os elementos HTML após remover do JSON
        travarOutros(false); // Liberar todos os elementos novamente
      });
    });
}

function travarOutros(element) {
  if (element == false) {
    document
      .querySelectorAll(".dependentes button, .dependentes .container > div")
      .forEach((el) => {
        el.classList.remove("disabled");
      });
    document.querySelector("#containerDados").innerHTML = "";
    return false;
  }
  document
    .querySelectorAll(".dependentes button, .dependentes .container > div")
    .forEach((el) => {
      if (el != element) {
        el.classList.add("disabled");
      }
    });
}

Agora, tudo o que precisamos fazer é incluir os comandos de inicialização, onde aplicamos o método de adição ao evento de clique do botão e carregamos os dados iniciais do JSON:

//init
document.querySelector("#btnAdicionarDependentes").addEventListener("click", adicionarDependentes);
carregarDependentes();

Por fim, vamos criar uma função para o botão de capturar dados apenas para extrair e mostrar os dados em JSON. Você pode, eventualmente, usar esses dados e enviar via POST, por AJAX ou via campo oculto, e pegar no back-end para guardar ou processar os dados (como com um json_decoder, do PHP):

//capturarDados
document.querySelector("#btnCapturarDados").addEventListener("click", ()=>{
	document.querySelector("#containerDados").innerHTML = JSON.stringify(dependentes, undefined, 4);
});

CSS

O único CSS que precisaremos usar é para aplicar a classe disabled. Se por acaso você está usando algum framework CSS, recomendo que você use o relativo a esta classe deste. Consulte a documentação, onde geralmente está relacionado aos helpers:

.disabled{
  pointer-events: none;
  opacity: .5;
}

Se você quer usar o CSS mais elaborado que usei aqui, veja abaixo o link do JsFiddle.

Finalizando

Criar formulários dinâmicos auxilia a usabilidade à medida que permite que o usuário adicione dados de forma mais rápida e com respostas visuais imediatas. O uso aqui do Javascript puro visa a facilidade para que você possa implementar em quaisquer projetos, incluindo os com Typescript. Trabalhe um pouco no código para adequá-lo à sua necessidade. E, como sempre, você poderá puxar o código e testar direto do JsFiddle.

Aproveite e entre para nosso grupo de discussão no Telegram.

O que fazer com meu sistema?

Como você, caro leitor, deve saber, o Flash foi descontinuado de forma pesada e forte em 2021. E não adianta xingar, ficar irritado, ou gritar com a Adobe. O fato é que o ambiente ficou insustentável para a plataforma e correções foram abandonadas já a alguns anos e o suporte oficial também. Como o Flex foi uma plataforma extremamente forte em meados dos anos 2000, muitas aplicações, algumas nem tão antigas assim, e extremamente robustas, foram construídas em cima dele. Isso fez com que, mesmo diante de tanto aviso, muitas desenvolvedoras e desenvolvedores acabaram por não ter condições de desenvolver novas soluções completas que compensassem o fim da tecnologia. Por isso, para ajudar, vou sugerir duas soluções, uma de médio e outra de curto prazo, que pode auxiliar a você resolver seus problemas e continuar mantendo um suporte até ter condições de desenvolver uma solução definitiva.

Solução 1 – Médio Prazo

Em 2011, a Adobe doou o Flex para o Apache, então, desde 2014-2016, eles trabalharam em uma forma de portar o Flex para JS, através do FlexJS. Porém, o projeto do Flex não morreu, ele foi convertido para o Apache Royale. Essa pode ser uma solução a médio prazo para a maioria de vocês que estão tendo essa dificuldade. Pode ser uma solução em curto prazo também, se seu projeto foi bem desenvolvido. Ele usa MXML e AS3 e transpila para Javascript e HTML5 ao invés de Flash.

A página do Apache Royale, junto com seus links, pode ser encontrada aqui:

Solução 2 – CurtoPrazo

O Adobe AIR permite executar Flash em plataforma desktop. Ele teve seus esforços transferidos para o HARMAN, em 2019, uma empresa da SAMSUNG. Você pode simplesmente compilar sua aplicação Flex baixando o SDK do AIR através do link abaixo:

Basta aceitar os termos e baixar. A plataforma continuará sendo mantida pela empresa. Porém, é necessário ficar atento a licença. Em geral, para a maioria dos usuários, a licença gratuita resolverá e sua dependência é por valor de receita.

Update – Solução 3 – Ruffle

Uma solução que tem tudo para ser permanente e até, quem sabe, dar uma sobrevida ao Flash, é o Ruffle. O Ruffle é um emulador de flash player construído em Rust, que pode ser usado para animações e aplicações. O mais legal é que ele pode ser usado não apenas em seu servidor, mas como extensão do navegador ou para quem possui aplicações desktop e não queiram usar o Adobe AIR da HARMAN.

OBS: Eu não tenho NADA a ver com a Adobe, nem a Harman, mas trabalhei por muitos anos com a plataforma Flex e compreendo sua enorme importância e contribuição para o que temos hoje em termos de front-end e UX. Estou postando isso apenas para ajudar.

Caso eu saiba de mais alguma solução, eu vou atualizar este poste. Fica de olho no Facebook / Instagram ou no grupo, que eu sempre atualizo as coisas por lá.

DISCLAIMER: Para preservar você, o blog e a mim, o upload.php do exemplo não está fazendo upload de verdade, então você não vai ter acesso ao arquivo no final, porém, no link do github está o código funcional.

HTML

Antes de prosseguir, vou alertar que estou usando o font-awesome no exemplo, apenas para não ter que fazer nenhum upload de imagens por hora, mas ele não é obrigado para o que vamos fazer.

Iniciaremos com um HTML bem simples. Vamos definir apenas a área de upload, da lista e uma área onde ficará o input. Esse input deve ser do tipo file e deve estar com o atributo mutiple definido. Nada muito especial por enquanto, pois nosso trunfo está mais no CSS e Javascript.

<div class="area-upload">
			<label for="upload-file" class="label-upload">
				<i class="fas fa-cloud-upload-alt"></i>
				<div class="texto">Clique ou arraste o arquivo</div>
			</label>
			<input type="file" accept="image/jpg,image/png" id="upload-file" multiple/>
			
			<div class="lista-uploads">
			</div>
		</div>

CSS3

O CSS que usaremos tem pontos específicos aos quais devemos prestar atenção. Por isso, vamos ver por trechos:

.area-upload{
	box-shadow: 0 5px 20px rgba(0,0,0,.2);
	margin: 20px auto;
	padding: 20px;
	box-sizing: border-box;
	
	width: 100%;
	max-width: 700px;
	position: relative;
}

.area-upload label.label-upload{
	border: 2px dashed #0d8acd;
	min-height: 200px;
	text-align: center;
	width: 100%;
	
	display: flex;
	justify-content: center;
	flex-direction: column;
	color: #0d8acd;
	position: relative;
	
	-webkit-transition: .3s all;
	-moz-transition: .3s all;
	-o-transition: .3s all;
	transition: .3s all;
}

.area-upload label.label-upload.highlight{
	background-color: #fffdaa;
}

.area-upload label.label-upload *{
	pointer-events: none;
}

A área de upload é definida pelo CSS a partir de um espaço abrangente. O label, vai ser a referência que vamos usar para atingir toda a área pré-determinada e é o que vai também receber o estilo que indicará onde e quando pode soltar o objeto. Dessa forma, deve estar com um position: absolute, pegando toda a área do upload. Um detalhe importante é que esse label não pode possuir filhos com eventos do mouse, pois isso pode acarretar em funcionamento inadequado ao fazer um hover em uma área não indicada.

A área marcada como hightlight é justamente para demonstrar ao usuário que ele já pode soltar o arquivo.

.area-upload input{
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	-webkit-appearance: none;
	opacity: 0;
}

O input vai nos servir de área de drop. Isso já é um padrão tanto para Windows, MacOS e Linux – de receber um (ou mais arquivos) arrastando os dados para o botão. Retirando a aparência padrão, podemos nos aproveitar dessa função e economizar várias linhas de código do Javascript. Não havendo a necessidade de configurarmos eventos de arquivos.

.area-upload .lista-uploads .barra{
	background-color: #e6e6e6;
	margin: 10px 0;
	width: 100%;
	position: relative;
}

.area-upload .lista-uploads .barra .fill{
	background-color: #a1f7ff;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	min-width: 0;
	
	-webkit-transition: .2s all;
	-moz-transition: .2s all;
	-o-transition: .2s all;
	transition: .2s all;
}

.area-upload .lista-uploads .barra.complete .fill{
	background-color: #bcffdf;
}

.area-upload .lista-uploads .barra .text{
	z-index: 10;
	text-align: center;
	padding: 3px 5px;
	box-sizing: border-box;
	position: relative;
	width: 100%;
	color: black;
	font-size: 12px;
}
.area-upload .lista-uploads .barra .text a{
	color: black;
	font-weight: bold;
}

.area-upload .lista-uploads .barra.error .fill{	
	background-color: #c02929;
	color: white;
	min-width: 100%;
}

.area-upload .lista-uploads .barra.error .text{
	color: white;
}

Talvez a área que possa confundir um pouco mais, principalmente os mais novatos, seja o CSS referente as barras de loading. As barras são definidas como relative e seu conteúdo como absolute. Dessa forma, podemos herdar a porcentagem do upload e usá-la diretamente no min-width do elemento. Usamos min-width, ao invés de width para utilizar o transition, dando uma leveza no upload ao invés de pequenos estalos.

Javascript

Inicialmente iremos definir os efeitos de drag and drop. Utilizaremos os eventos específicos para adicionar ou retirar o css de hightlight. Aquele que falamos acima ao montar o CSS.

let drop_ = document.querySelector('.area-upload #upload-file');
drop_.addEventListener('dragenter', function(){
	document.querySelector('.area-upload .label-upload').classList.add('highlight');
});
drop_.addEventListener('dragleave', function(){
	document.querySelector('.area-upload .label-upload').classList.remove('highlight');
});
drop_.addEventListener('drop', function(){
	document.querySelector('.area-upload .label-upload').classList.remove('highlight');
});

Agora precisamos validar os dados antes de colocar em nosso servidor. Compusemos uma validação que verifica o tipo de arquivo e a quantidade máxima de 2MB. Essa validação é totalmente no front-end. É recomendado que você também faça uma validação posterior no back-end para evitar fraudes. Essa função receberá como parâmetro um arquivo, o qual faremos a validação.

function validarArquivo(file){
	console.log(file);
	// Tipos permitidos
	var mime_types = [ 'image/jpeg', 'image/png' ];
	
	// Validar os tipos
	if(mime_types.indexOf(file.type) == -1) {
		return {"error" : "O arquivo " + file.name + " não permitido"};
	}

	// Apenas 2MB é permitido
	if(file.size > 2*1024*1024) {
		return {"error" : file.name + " ultrapassou limite de 2MB"};
	}

	// Se der tudo certo
	return {"success": "Enviando: " + file.name};
}

Para enviar os arquivos, usaremos uma função AJAX simples. Fazemos um request no método POST. Nesta função, iremos capturar também a porcentagem do upload e atualizaremos a barra a partir desta, através do evento progress. Essa nossa função receberá o índice, para identificar o arquivo que está sendo enviado e a barra que será modificada.

function enviarArquivo(indice, barra){
	var data = new FormData();
	var request = new XMLHttpRequest();
	
	//Adicionar arquivo
	data.append('file', document.querySelector('#upload-file').files[indice]);
	
	// AJAX request finished
	request.addEventListener('load', function(e) {
		// Resposta
		if(request.response.status == "success"){
			barra.querySelector(".text").innerHTML = "<a href=\"" + request.response.path + "\" target=\"_blank\">" + request.response.name + "</a> <i class=\"fas fa-check\"></i>";
			barra.classList.add("complete");
		}else{
			barra.querySelector(".text").innerHTML = "Erro ao enviar: " + request.response.name;
			barra.classList.add("error");
		}
	});
	
	// Calcular e mostrar o progresso
	request.upload.addEventListener('progress', function(e) {
		var percent_complete = (e.loaded / e.total)*100;
		
		barra.querySelector(".fill").style.minWidth = percent_complete + "%"; 
	});
	
	//Resposta em JSON
	request.responseType = 'json';
	
	// Caminho
	request.open('post', 'upload.php'); 
	request.send(data);
}

Por fim, iremos juntar um pouco de cada coisa que fizemos, adicionando uma função em um evento change do input do upload. Neste momento, também é feito o laço dentre o(s) arquivo(s) selecionado(s) para validar e, se for válido, fazer o upload, utilizando os outros métodos acima mencionados. É neste momento também que serão criadas dinamicamente as barras: uma para cada arquivo.

document.querySelector('#upload-file').addEventListener('change', function() {
var files = this.files;
for(var i = 0; i < files.length; i++){
var info = validarArquivo(files[i]);
    //Criar barra
    var barra = document.createElement("div");
    var fill = document.createElement("div");
    var text = document.createElement("div");
    barra.appendChild(fill);
    barra.appendChild(text);

    barra.classList.add("barra");
    fill.classList.add("fill");
    text.classList.add("text");

    if(info.error == undefined){
        text.innerHTML = info.success;
        enviarArquivo(i, barra); //Enviar
    }else{
        text.innerHTML = info.error;
        barra.classList.add("error");
    }

    //Adicionar barra
    document.querySelector('.lista-uploads').appendChild(barra);
};
});

PHP

E pra terminar com chave de ouro, um PHPzinho que receberá esses arquivos e retornará um json com a confirmação de sucesso ou erro. Não aplicamos muitas validações nesse PHP pois nosso foco era neste exemplo está no front-end, mas é suficiente para que você compreenda sua funcionalidade.

<?php
ini_set('upload_max_filesize', '2M');
header('Content-Type: application/json');
$file = $_FILES['file'];

$ret = [];

if(move_uploaded_file($file['tmp_name'],'uploads/'.$file['name'])){
    $ret["status"] = "success";
    $ret["path"] = 'uploads/'. $file['name'];
    $ret["name"] = $file['name'];
}else{
    $ret["status"] = "error";
    $ret["name"] = $file['name'];
}

echo json_encode($ret, JSON_PRETTY_PRINT);
?>

E, como sempre, você pode baixar o código inteiro no Github e usar direto na sua aplicação.

Gostou? Se sim, compartilha com seus amiguinhos interessados na área e curte a página no Facebook. O exemplo acima está levemente modificado para que funcione melhor aqui no site. Entre também no grupo de Design e Desenvolvimento. O link está abaixo do post.

Exemplo

HTML

Para começar, vamos criar o form e a tabela. Nada complicado e semanticamente correto.

<form id="search" onsubmit="highlightColumn();return false">
  <input type="text" id="word"/>
  <button>
  Buscar Palavra
  </button>
</form>


<div id="areaTabela" class="area-tabela">
  <table>
    <thead>
      <tr>
        <th>Coluna A</th>
        <th>Coluna B</th>
        <th>Coluna C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>abacaxi</td>
        <td>manga</td>
        <td>limão</td>
      </tr>
      <tr>
        <td>coelho</td>
        <td>espinafre</td>
        <td>jerimum</td>
      </tr>
      <tr>
        <td>tomate</td>
        <td>cebola</td>
        <td>rapadura</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

Precisamos fazer o CSS. De forma geral, não precisamos criar tantas opções. O importante é você criar as classes referentes ao highlight e ao highlight da coluna. Tem um charminho de escala e sombra, mas você faz como achar melhor.

.area-tabela table{
  margin-top:20px;
  border-spacing: 0;
  border: 1px solid grey;
  width: 100%;
}

.area-tabela table td, .area-tabela table th{
  width:80px;
  padding: 5px 10px;
  font-size: 14px;
  
  transition: all .3s linear;
  -moz-transition: all .3s linear;
  -webkit-transition: all .3s linear;
}

.area-tabela table th{
  background-color: grey;
  color: white;
  font-weight: normal;
}

.area-tabela table tr:nth-child(even) td{
  background-color: #efefef;
}

.area-tabela table tr td.high_col{
  background-color: #e5f7f8;
}
.area-tabela table tr:nth-child(even) td.high_col{
  background-color: #d1eff0;
}

.area-tabela table tr th.high_col{
  background-color: #063b5a;
}

.area-tabela table tr td.high_col.high{
  background-color: #93fffc;
  font-weight: bold;
  transform: scale(1.05);
  box-shadow: 0 3px 5px rgba(0,0,0,.5);
}

Javascript

Agora vem a parte que pode complicar um pouco. A primeira coisa que precisamos fazer é certificar-se, em um laço, que limparemos as classes high_col e high dos outros elementos. Em seguida, iremos usar a função evaluate para verificar se o texto digitado está contido em uma das células. Para capturar os td’s da coluna ativa, iremos verificar o índice da célula encontrada e usaremos isso para colocar a classe nas outras células e cabeçalho dessa coluna.

function highlightColumn(){
	//Clear
  document.querySelectorAll("#areaTabela table tr td").forEach((item)=>{
	item.classList.remove("high");
  item.classList.remove("high_col");
});
  document.querySelectorAll("#areaTabela table tr th").forEach((item)=>{
	item.classList.remove("high_col");
});
  
	var word = document.querySelector("#word").value;
 	
  if(word == ""){
  	return false;
  }
  
  //pegar o elemento
  var el = document.evaluate("//td[contains(.,'" + word + "')]", document.querySelector("#areaTabela"), null, XPathResult.ANY_TYPE, null ).iterateNext();
 
  //Se quiser a palavra completa e não trecho dela, troque a linha acima por:
  //var el = document.querySelector("td[text()='"+word+"']");
  
  //Check if el exists
  if(el == undefined){
    return false;
  }
  
  //Highlight column
  var index = (Array.prototype.slice.call(el.parentNode.children).indexOf(el));
  
  document.querySelectorAll("#areaTabela table tr td:nth-child("+(index+1)+"), #areaTabela table tr th:nth-child("+(index+1)+")").forEach((item)=>{
    item.classList.add("high_col");
  });
  
  //Highlight Element
  el.classList.add("high");
  
  return false;
}

Obs. Se você quiser buscar pelo valor específico, substitua o evaluate por document.querySelector(“td[text()='”+word+”‘]”). Dessa forma não será selecionado nenhuma célula a menos que o valor seja exato.

Simples não é?

Como sempre, o exemplo e código completo está disponível abaixo, desta vez no jsFiddle. Basta copiar o código se quiser usar diretamente em seu projeto.

Se gostou, compartilhe e curta a página no Facebook. Entre também no grupo através do link abaixo.

O HTML5 nos trouxe diversas opções interessantes para desenvolvimento de RIAs (Rich Internet Applications). Em diversos sistemas online, precisamos de uma foto da pessoa que está sendo cadastrada. Para sistemas de hotéis, saúde, academias, dentre outros, que precisam de maior identificação, podemos usar a webcam para fazer a foto na hora que poderá ser usada em posterior conferência. Recurso esse que também está disponível em dispositivos móveis.

A ideia é transformar a imagem corrente da webcam em uma imagem base64. Após isso, converter essa codificação em uma imagem JPG e devolver o caminho – quase como se fosse um upload. Dessa forma você poderá salvar apenas o caminho da imagem no seu banco de dados, sem ficar um campo muito extenso ou que possa falhar em dispositivos móveis. Neste exemplo, será usado Javascript puro, a fim de universalizar para quem quiser utilizar em sua aplicação web.

Exemplo:

Clique aqui para visualizar a Webcam

Tirar foto e salvar

HTML5

Vamos começar criando nosso exemplo com os elementos HTML. Tudo o que realmente precisamos é de uma tag button e uma tag video, mas para poder visualizar o exemplo, vamos colocar o retorno em um img, link da imagem gerada e um textarea para vermos o base64.

<div class="area">
			<video autoplay="true" id="webCamera">
			</video>
	
			<input type="text" id="base_img" name="base_img">
			<button type="button" onclick="takeSnapShot()">Tirar foto e salvar</button>
	
			<img id="imagemConvertida">
			<p id="caminhoImagem" class="caminho-imagem"><a href="" target="_blank" rel="noopener"></a></p>
			<script src="script.js"></script>
</div>

Não precisamos necessariamente de um CSS para poder funcionar, mas, apenas para exemplo, vamos colocar um CSSzinho…

body{
	font-family: sans-serif;
	margin: 0;
}

.area{
	margin: 10px auto;
	box-shadow: 0 10px 100px #ccc;
	padding: 20px;
	box-sizing: border-box;
	max-width: 500px;
}

.area video{
	width: 100%;
	height: auto;
	background-color: whitesmoke;
}

.area textarea{
	width: 100%;
	margin-top: 10px;
	height: 80px;
	box-sizing: border-box;
}

.area button{
	-webkit-appearance: none;
	width: 100%;
	box-sizing: border-box;
	padding: 10px;
	text-align: center;
	background-color: #068c84;
	color: white;
	text-transform: uppercase;
	border: 1px solid white;
	box-shadow: 0 1px 5px #666;
}

.area button:focus{
	outline: none;
	background-color: #0989b0;
}

.area img{
	max-width: 100%;
	height: auto;
}

.area .caminho-imagem{
	padding: 5px 10px;
	border-radius: 3px;
	background-color: #068c84;
	text-align: center;
}

.area .caminho-imagem a{
	color: white;
	text-decoration: none;
}

.area .caminho-imagem a:hover{
	color: yellow;
}

Javascript

Agora vamos para a parte divertida. Basicamente vamos dividir nosso código em 3 partes: Chamar a webcam, tirar o instantâneo, e enviar/receber os dados do PHP. Criaremos o arquivo script.js.

A função LoadCamera, irá transformar a webcam em uma espécie de streamming local. Para isso, é necessário que o navegador tenha suporte a isso, logo, precisamos de um navegador moderno com total compatibilidade a HTML5. Basicamente, todos os navegadores modernos, então não pense em compatibilidade com Internet Explorer.

function loadCamera(){
	//Captura elemento de vídeo
	var video = document.querySelector("#webCamera");
		//As opções abaixo são necessárias para o funcionamento correto no iOS
		video.setAttribute('autoplay', '');
	    video.setAttribute('muted', '');
	    video.setAttribute('playsinline', '');
	    //--
	
	//Verifica se o navegador pode capturar mídia
	if (navigator.mediaDevices.getUserMedia) {
		navigator.mediaDevices.getUserMedia({audio: false, video: {facingMode: 'user'}})
		.then( function(stream) {
			//Definir o elemento vídeo a carregar o capturado pela webcam
			video.srcObject = stream;
		})
		.catch(function(error) {
			alert("Oooopps... Falhou :'(");
		});
	}
}

Você deve ter notado que a função acima tem um comentário com alguns parâmetros adicionais. Esses parâmetros são necessários para o funcionamento no iOS.

Já a função takeSnapShot irá justamente tirar o instantâneo. Essa função irá criar um elemento canvas e desenhar em seu conteúdo uma imagem matricial, baseada no vídeo (um ctrl+c / ctrl+v automático, digamos assim). A partir daí podemos obter o base64 desse canvas e utilizá-lo para enviar posteriormente.

function takeSnapShot(){
	//Captura elemento de vídeo
	var video = document.querySelector("#webCamera");
	
	//Criando um canvas que vai guardar a imagem temporariamente
	var canvas = document.createElement('canvas');
	canvas.width = video.videoWidth;
	canvas.height = video.videoHeight;
	var ctx = canvas.getContext('2d');
	
	//Desenhando e convertendo as dimensões
	ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
	
	//Criando o JPG
	var dataURI = canvas.toDataURL('image/jpeg'); //O resultado é um BASE64 de uma imagem.
	document.querySelector("#base_img").value = dataURI;
	
	sendSnapShot(dataURI); //Gerar Imagem e Salvar Caminho no Banco
}

Você pode, inclusive, se quiser, já adicionar essa base64 em no src de um elemento img.

Agora, precisamos enviar essa base64 para o PHP. Usaremos o PHP para salvar a imagem em um arquivo jpg (você pode optar por png também). O PHP irá retornar, posteriormente, um json com o caminho completo da imagem, que iremos carregar no objeto img descrito no HTML supracitado. Faremos isso dinamicamente, por técnica de Ajax, sem formulário, pois o submit de um form poderá ser usado futuramente para a conclusão de um determinado cadastro:

function sendSnapShot(base64){
var request = new XMLHttpRequest();
request.open('POST', 'save_photos.php', true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
<pre><code>    request.onload = function() {
        console.log(request);
        if (request.status >= 200 && request.status < 400) {
            //Colocar o caminho da imagem no SRC
            var data = JSON.parse(request.responseText);

            //verificar se houve erro
            if(data.error){
                alert(data.error);
                return false;
            }

            //Mostrar informações
            document.querySelector("#imagemConvertida").setAttribute("src", data.img);
            document.querySelector("#caminhoImagem a").setAttribute("href", data.img);
            document.querySelector("#caminhoImagem a").innerHTML = data.img.split("/")[1];
        } else {
            alert( "Erro ao salvar. Tipo:" + request.status );
        }
    };

    request.onerror = function() {
        alert("Erro ao salvar. Back-End inacessível.");
    }

    request.send("base_img="+base64); // Enviar dados</code></pre>
<p>}

PHP

No lado do PHP, basicamente, usaremos um $_POST para capturar o dado enviado via Ajax pelo Javascript. Criaremos então o arquivo salvar_photos.php.

Não há muitos segredos, mas é importante se atentar a dois detalhes:

1. Os dados chegam com o + transformado em espaço, então precisamos converter novamente para + com um replace.
2. Precisamos salvar apenas os dados mime, sem os cabeçalhos, logo precisamos dar um explode para coletar apenas os dados.

Fora isso, basicamente colocamos os dados em um arquivo JPG e retornamos a URL em json para ser lido pelo Javascript novamente.

<?php
	if(!isset($_POST['base_img'])){
		die("{\"error\": \" Flopou. Cadê o base_img?\"}");
	}

	$result = [];
	$data = str_replace(" ","+",$_POST['base_img']); //O envio do dado pelo XMLHttpRequest tende a trocar o + por espaço, por isso a necessidade de substituir. 
	$name = md5(time().uniqid()); 
	$path = "snaps/{$name}.jpg";

	//data
	$data = explode(',', $data);
	
	//Save data
	file_put_contents($path, base64_decode(trim($data[1])));
	
	//Print Data
	$result['img'] = $path;
	echo json_encode($result, JSON_PRETTY_PRINT);
?>

Uma vez tudo pronto, basta chamar a função loadCamera() no evento que você quer que ele seja disparado.

Como sempre, deixamos o código disponível para quem quiser utilizar. Desta vez, o código está no GitHub.

ATENÇÃO: O navegador não vai liberar o uso das ferramentas em um ambiente http. Você precisa necessariamente estar com seu site ou sistema em conexão segura (https).

Se gostou, compartilha com seus amiguinhos interessados na área e curte a página no Facebook. O exemplo acima está levemente modificado para que funcione melhor aqui no site. Entre também no grupo de Design e Desenvolvimento. O link está abaixo do post.

Detecção por Geolocalização

A forma mais simples e rápida de fazer isso, é através de uma API open-source online chamada Nekudo (https://geoip.nekudo.com/). O Nekudo não está mais disponível e virou IPI. Você precisa fazer um cadastro gratuito em https://ipapi.com/product e pegar sua chave e cadastrar o IP. Na dúvida de saber qual o IP do seu server, abra o seu prompt de comando (windows) ou terminal (Unix/Mac/Linux) e digite ping seusite.com.br.

A forma ideal de fazer isso é a partir da sugestão, ao invés do redirecionamento direto, como é feito no site da Apple e Adobe. Isso porque o usuário pode estar em viagem ou simplesmente preferir usar o conteúdo em outro idioma.

Vamos para a prática.

Javascript

Para facilitar, vamos usar um jQuery básico, que está presente em quase todos os sites e sistemas. Basta um “ajaxizinho” apenas para chamarmos a API do Geoplugin.

A URL https://api.ipapi.com/, seguido da chave e IP já devolve os dados em formato JSON. Como ele vai pegar o IP atual do usuário, não é necessário passar o IP:

var ip = "check";
var access_key = "minhachavedeacesso";
jQuery.ajax({
url:'https://api.ipapi.com/' + ip + '?access_key=' + access_key
dataType: "json",
success: function(data){
console.log(data);
}
});

O retorno então será:

Agora basta tratarmos o código para que execute uma ação e depois redirecione. Ficando assim:

var ip = "check";

var access_key = "minhachavedeacesso";
jQuery.ajax({
url: 'https://api.ipapi.com/' + ip + '?access_key=' + access_key,
dataType: "json",
success: function(data){
if(data.country.code != "BR"){
var redirecionar = confirm("Hi, visitor! We checked you are in " + data.country.name + ". Would you like to visit english version?");
}
if(redirecionar){
window.location = "https://meusite.com/en/";//outra url
}
}
});

Nesse ponto, apenas verificamos se não está no Brasil e ele vai redirecionar a página em questão.

Todavia, ele não vai guardar essa preferência. Logo, toda vez que a pessoa entrar no site, ela vai ter que responder a pergunta novamente. Mas para evitar que isso ocorra, podemos usar o localStorage. Garantindo assim que seja memorizada a opção e evitando que a API seja requerida desnecessariamente. O código final ficaria assim:

var ip = "check";

var access_key = "minhachavedeacesso";

//Verifica primeiro se já tem o country code salvo
if(localStorage.sel_country_code == undefined){
jQuery.ajax({
url: 'https://api.ipapi.com/' + ip + '?access_key=' + access_key
dataType: "json",
success: function(data){
if(data.country.code != "BR"){
var redirecionar = confirm("Hi, visitor! We checked you are in " + data.country.name + ". Would you like to visit english version?");
}
if(redirecionar){
//Gravar o country_code
localStorage.sel_country_code = data.country.code
window.location = "https://meusite.com/en/";//outra url
}
}
});
}else{
//Caso já esteja definido
window.location = "https://meusite.com/en/";//outra url
//Obs. Use o valor armazenado em localStorage.sel_country_code, caso você tenha mais de um outro idioma
}

Como saber se está funcionando?

Para testar, basta você usar um serviço de VPN. Você pode fazer isso através de algum site, programa ou simplesmente rodando pelo Opera, que já possui uma VPN própria e é ótimo mantê-lo instalado para testes. Recomendamos que você use o Opera, pois, além de ser um bom navegador, ele é mais seguro para evitar usar sites duvidosos ou serviços de terceiros. O Opera Developer é uma boa opção e possui VPN integrado. Clique na imagem para ser direcionado a página de download oficial.

Após instalar o Ópera, para habilitar o VPN, basta ir nas configurações, a partir do símbolo do O, no canto superior esquerdo.

Indo na guia Avançados > Recursos, ele vai retornar a primeira opção como VPN. Simplesmente a habilite.

Feito isso, a opção de VPN vai ficar visível e você poderá testar o funcionamento em diversos locais.

Ah, mas eu não quero redirecionar assim, quero que seja pelo servidor

Muito bem, digamos que você queira que o redirecionamento seja feito direto pelo servidor porque você é mal que nem um pica-pau. Sem problemas.

Para isso, você pode usar o cURL da sua linguagem de preferência e fazer o redirecionamento através dela. Aqui vai um exemplo mais comum, em PHP:

<?php

// IP e chave
$ip = $_SERVER['REMOTE_ADDR'];
$access_key = 'SUA CHAVE DE ACESSO';

// Inicializar CURL:
$ch = curl_init('http://api.ipapi.com/'.$ip.'?access_key='.$access_key.'');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

// Capturar dados
$json = curl_exec($ch);
curl_close($ch);

// Decode JSON:
$retorno = json_decode($json, true);

if($retorno['country_code'] != "BR"){
header("location: https://seusite.com/idioma");
die();
}
?>

Lembrando que isso precisa ser inserido antes mesmo do doctype, pois se não pode retornar o erro de Headers Already Sent.

Concluindo

É bem simples testar o IP quanto a localização. Há diversos serviços, alguns pagos e outros gratuitos, que fazem esse tipo de redirecionamento. Também há plugins e extensões que você pode instalar em seu servidor, mas certamente a demonstrada aqui vai servir para a grande maioria dos projetos.

Curta e compartilhe

Se você digitar apenas console, no Console, você poderá ver a gama de Métodos que o Objeto tem disponível.

Neste tutorial, mostraremos alguns métodos e como utilizá-los de forma a permitir uma finalização que ajude o designer e desenvolvedor a obter respostas mais ideais para o problema. Você pode testar os comandos aqui mesmo, basta pressionar CTRL+SHIFT+I, ou simplesmente clicar com o botão direito e inspecionar elemento. Ao clicar na aba console, você poderá digitar os comandos e visualizar os resultados.

O método log é o mais básico e permite que você adicione uma

console.log("Oi Mundo");

Porém o simples log de texto não necessariamente pode ser o ideal. Você pode, se assim precisar, adicionar alguma informação visual para que o log seja lido de forma mais intuitiva. Para isso, basta usar uma string de formato %c e instruções CSS. O exemplo abaixo, colocará o texto branco, negrito e com sombra:

console.log('%c Oi mundo', 'color:white; font-weight:bold; text-shadow: 0 0 1em black;font-size: 72px');

Com isso é possível até mesmo adicionar imagens, através do background-image:

console.log('%c       ', 'font-size: 100px; background: url(http://cdn.nyanit.com/nyan2.gif) no-repeat;');

Passando para um ponto mais sério, você também pode visualizar no console objetos diferentes de Strings. É possível, por exemplo, visualizar um objeto JSON, o que é algo muito funcional para visualizar o resultado de métodos AJAX.

console.log({teste: 'texto de teste', valor: 22})

No caso de você colocar um JSON ou um array, você poderá estender e visualizar os detalhes desse objeto.

Erros e Alertas

Além do log, o Console também tem objetos que servem como point-breaks para testes e validações. Os métodos error() e warn() permite que você adicione informações de forma mais relevante e alertiva. Esses dois métodos também permitem usar a  string de formato %c .

console.error("Problema Sério");
console.warn("Problema Leve");

Você deve notar que, ao lado da linha onde é demonstrada o alerta/erro, há uma palavra anonymous, entre parênteses. Essa informação define qual o método relacionado com a origem do erro. Por exemplo, se o erro ou alerta ocorrer dentro de um método, será mostrado o método onde ocorreu o erro.

var teste = function(){console.error("Oi")};
teste();

Essa informação é extremamente útil para auxiliar o desenvolvedor a saber qual a origem do problema.

Identação

Outra opção muito útil para definir detalhes no log é a identação. Na verdade, é uma organização em grupo e subgrupos das informações. Dessa forma, o desenvolvedor pode apresentar dados mais organizados para o testador.

console.group("Frases");
console.group("Saudações");
console.log("Oi!");
console.log("Olá!");
console.groupEnd();
console.group("Despedidas");
console.log("Tchau!");
console.log("Até mais.");
console.groupEnd();

Tabelas

O método table() permite você mostrar informações de dados em uma tabela. Ele é um método muito útil para ler objetos, JSON e vetores. De forma automática, esse método irá reconhecer os dados e organizá-los nessa tabela. Se por acaso você passar um array, as chaves mostradas serão apenas os índices numéricos.

console.table({'Dia': '10:00', 'Noite': '22:00'});

Calcular Tempo

O cálculo de tempo é fundamental para medir performance.  O método time() permite usar uma etiqueta para poder iniciar e finalizar uma contagem de tempo. Para isso, basta seguir o exemplo abaixo:

console.time("calcularTempo");
for(var i; i < 100; i++){

}
console.timeEnd("calcularTempo");

Esse tempo será calculado baseado no tempo que a máquina cliente demora para realizar determinada ação, por isso, esse valor pode variar de computador para computador.

Strings de Substituição

Além do %c, usado para CSS, você pode usar outras Strings com objetivos específicos.

Dependendo do navegador (como o Firefox), você pode ter opções adicionais de máscara quanto aos valores. Para saber os detalhes, você precisa verificar na documentação do navegador, mas são muito similares as Strings usadas no console em C e no Java.

Por exemplo:

console.log("O valor da compra de %d %s é de %f, com os dados %o", 3,'carros',38500.30,{'carro':'fusca'});

Concluindo

O uso apropriado do console do navegador pode ajudar os desenvolvedores a fazerem testes e obterem resultados mais fiéis destes. Além disso, pode exibir mensagens importantes para alertar um usuário leigo a não mexer nessas opções (como faz o Facebook). De qualquer forma, o conhecimento das opções do console são fundamentais para qualquer profissional web que trabalha com front-end.

BitMail é um aplicativo desktop para envio de e-mails em lotes, criado com a tecnologia Electron / NodeJS. Este projeto é de código aberto e ainda está em beta e diversas funcionalidades não funcionam direito e apresentam falhas com o uso em alguns servidores de e-mail.

Star

Sobre o Projeto

Há duas semanas comecei a estudar NodeJS (em Dez de 2017) e, por consequência de interesse de criação de aplicativos para desktop, estudar um pouco de Electron. Apesar de já ter experiência com Javascript, estava interessado em entender a manipulação de arquivos locais.

Como quando estudo algo prefiro criar um projeto minimamente útil, resolvi criar uma variação de um projeto que criei anos atrás para um cliente e que também é de código aberto, o PortilloMail (eu sei, não é um nome muito criativo), criado em PHP e compatível com a maioria dos servidores compartilhados.

Como ainda estou novo em NodeJS, ainda preciso resolver alguns problemas, que vou citar abaixo, mas o aplicativo já é utilizável em diversas circunstâncias.

• COMO PREPARAR O ARQUIVO CSV?
• COMO CRIAR MEU PRÓPRIO TEMPLATE?
• FAQ (PERGUNTAS FREQUENTES)

Como Enviar E-mails?

O BitMail foi feito para ser extremamente simples. Sua tela inicial possui todas as informações básicas necessárias para enviar um e-mail.

A primeira coluna (da esquerda para a direita) refere-se ao remetente da mensagem. Basta colocar o nome de quem está enviando, a senha e o host.

Por enquanto, estamos listando apenas o host Gmail e Outlook, porém, você pode optar por personalizar para configurar o SMTP da sua própria hospedagem. Com o tempo iremos atualizar com outros padrões de hospedagens mais famosas.

A coluna do meio é referente a mensagem. Nela você coloca as informações básicas como Assunto e Mensagem (pode usar emojis) e deverá selecionar um arquivo CSV previamente configurado, que consta os e-mails e senhas dos destinatários.

A última coluna é a coluna de envio. Nela você deverá digitar um e-mail para teste. Apenas após você confirmar o teste, o botão ENVIAR vai ficar funcional.

A barra inferior é a barra de templates. O aplicativo permite que você crie arquivos HTML e os use como templates. Como a ideia é servir de mailmarketing, você mesmo pode criar o seu template. Leia aqui sobre como incluir seu próprio template. Se o quadrado preto estiver selecionado, isso quer dizer que você não irá utilizar nenhum template e irá enviar a mensagem do jeito que estiver dentro da caixa mensagem (inclusive com tags HTML).

Para poder garantir que seu e-mail não fique preso em uma caixa de SPAM ou que você seja interrompido pelo limite da sua hospedagem ou servidor de e-mails, o aplicativo é limitado a 200 e-mails por hora. Você pode editar isso, tal como preencher as configurações da sua hospedagem, no PAINEL AVANÇADO.

Antes de usar, é extremamente aconselhável que você leia o FAQ e saiba como preparar o arquivo CSV.

Se você tiver interesse em como criar o seu próprio template, você também pode ler sobre isso aqui.

Requerimentos

Após a instalação do NodeJS, você vai precisar de uma série de bibliotecas para poder fazer compilar.

Você pode baixar o NodeJS para Windows diretamente pelo site oficial ou pode usar o seguinte comando para distribuições baseadas em Debian (instalando também seu gerenciador de pacotes):

sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm

Após a instalação do NodeJS, acesse o console e instale o Electron:

npm install electron --save-dev --save-exact

Para o envio dos e-mails, o pacote nodemailer se faz necessário. Para instala-lo, acesse o console e use:

npm install nodemailer

Por fim, para diminuir o código de leitura de arquivo, pois precisava que ele fosse síncrono e mais simples, resolvi usar o n-readlines. Provavelmente, em atualizações futuras não irei usar, mas por enquanto:

npm install n-readlines

Para poder compilar, acesse o console e na pasta onde você salvou o projeto, execute:

npx electron .

Pronto. Você agora já pode utilizar.

Obs. A única biblioteca front-end utilizada, para facilitar o desenvolvimento, foi o jQuery. Além do jQuery e das bibliotecas node utilizadas, o resto foi programado por mim. Então peguem leve nas críticas.

Follow @velhobit

Dentro da área da computação cognitiva, uma das empresas que está em muita evidência no mercado é a IBM, com sua tecnologia Watson.

A tecnologia Watson é uma amálgama de serviços de inteligência artificial que permite ao desenvolvedor criar plataformas de comunicação automatas com seus usuários. Para isso, a IBM disponibiliza diversas APIs de comunicação com determinados serviços. Para nosso exemplo de chatbot usaremos o serviço de Conversação do Watson.

Criar um chatbot com o Watson é bem mais simples do que parece. Porém, devemos deixar claro que a proposta deste tutorial é ser básico, ser um ambiente de entrada, simplificado porém funcional para o desenvolvedor ou designer interessado nesse tipo de tecnologia.

Atenção, você precisa de um servidor que possa ser autenticado na internet. Ou seja, não adianta testar de Xampp ou Wampp, você precisa testar ao menos de uma hospedagem compartilhada.

Preparando o Ambiente

Primeiramente você vai precisar de uma conta na Bluemix. A Bluemix é uma plataforma em nuvem de projetos da Big Blue (apelido dado a IBM pelo mercado). Para isso, basta entrar no site da empresa e clicar em Teste Gratuito 30 Dias.

Depois disso, siga as instruções para você preencher os seus dados básicos.

Após o preenchimento de seus dados, será pedido para você criar uma organização. Por algum motivo, você não verá a opção de América do Sul referente ao local, todavia você pode continuar selecionando SUL DOS EUA que não vai impedir o funcionamento do chatbot. Simplesmente siga as demais opções até chegar ao final.

Assim que você finalizar, é possível ver uma área para criar Apps. Por hora você pode ignorar completamente isso. À primeira vista, o Bluemix parece ser um pouco difícil de navegar e encontrar algo por conta da diversidade de opções e APIs disponíveis.

No canto superior esquerdo você vai ver um menu hambúrguer. Clique nesse menu e selecione a opção Serviços. Lá, você vai ver a opção Watson.

Como nosso tutorial é sobre chatbot, devemos criar um serviço do tipo Conversação. Clique no botão Criar serviço Watson e, na página que se abrirá, selecione a opção Conversation. A configuração do serviço é bem similar ao cadastro do próprio Bluemix.

Esse serviço possui versões Lite (que é gratuita), Padrão e Premium (que precisa de consulta). Na versão Lite, que estamos usando para este tutorial, você possui até 10 mil requisições por mês e não poderá salvar os logs dos chats. Porém a versão padrão não é cara, cada requisição é uma fração inferior a metade de um centavo, o que é um valor aceitável para um sistema corporativo.

Agora é necessário “ensinar” ao Watson o que você quer que ele responda. Apesar dele já possuir uma inteligência base interna, que reconhece erros e contextos, você precisa treina-lo para que ele dê as respostas corretas para determinadas perguntas.

Para iniciar, você precisa criar um novo Workspace (por enquanto, pode ignorar o espaço de trabalho de exemplo).

Atenção ao idioma do espaço de trabalho que você está criando.

Treinando o Watson

Uma vez criado o espaço de trabalho (Workspace), iniciaremos o processo de treinamento do Watson. Para isso, você deve primeiro criar um intent. Um intent é uma intenção de comunicação, ou seja, é um conjunto de interações padronizadas que o usuário poderá fazer com o chatbot.

Cada intenção que for criada precisa ter pelo menos 5 exemplos de interações para poder funcionar. A partir daí o Watson também irá entender perguntas similares. Não é necessário se preocupar com muitas variações. A tecnologia é inteligente o suficiente para trabalhar com diferenças básicas, erros de digitação e compreender contextos. Em nosso exemplo, vamos criar uma intenção com o nome de #Saudações e preencher com algumas interações básicas de saudações.

Uma vez criada as intenções desejadas (em nosso exemplo criamos apenas uma), você deverá criar as possíveis respostas para essas intenções e suas variações. Para isso, você deve ir na área de Dialog.

Um diálogo (Dialog), como o nome já diz, consiste em um conjunto de interações e condições dessas interações, com uma resposta, que pode ou não resultar em um feedback para encerrar um processo de comunicação.

No Watson, o diálogo é organizado em um sistema de árvores, que possui uma lógica de nós e subnós. Para nosso exemplo, vamos criar um novo nó para responder a intenção de saudação que criamos anteriormente. Clique em Add node.

Após dar um nome ao nó, você deve colocar o que o bot irá reconhecer. A intenção é representada pelo símbolo de hash (#). Então, basicamente diz: Se o bot reconhecer a intenção #Saudação, então responda com:

Você pode colocar quantas respostas você quiser. Quanto mais respostas você colocar, maior a quantidade de diálogo possível, deixando o ambiente de comunicação mais natural e otimizando o aprendizado.

Como opções adicionais você pode colocar as respostas em forma sequencial ou aleatória. Ainda é possível criar condições específicas de contextos ou aguardar por respostas específicas à retóricas do chatbot.

Com tudo isso preenchido, você já pode testar o chatbot. O próprio ambiente do bluemix possui uma área para testes. Clique no ícone com o balãozinho no canto superior direito e experimente o diálogo que você acabou de criar.

Implementando o Back-end

A API do Bluemix funciona através de comunicação cURL Essa comunicação é feita a partir de envios de informações via método POST e mediante autorização de acesso. Por isso, vamos precisar de algumas informações básicas do serviço de comunicação que criamos.

Caso você queira ver outros exemplos que usam cURL, acesse nosso tutorial sobre preenchimento automático de formulário com o CNPJ ou o tutorial sobre preenchimento automático de endereço a partir do CEP.

Então, antes de criamos o código, você vai precisar das seguintes informações:

• Workspace ID
• Username
• Password

O Workspace ID pode ser adquirido lá naquela tela de criação/seleção de ambientes de trabalho (Workspaces). Basta clicar no botão de menu, no canto superior direito do cartão referente ao workspace que criamos, em seguida clicando em View Details.

Para conseguir o login e senha do serviço de conversação, volte a tela onde você cria os serviços e vá na opção Credenciais de Serviço. Nessa área você pode visualizar ou criar novas credenciais, conseguindo assim o username e password que vamos precisar mais adiante.

ATENÇÃO
A IBM mudou a forma de autenticação. Agora, ao invés de você ter acesso ao username e password, as novas conexões usarão a autenticação AIM e não mais a autenticação por username  password. Mais detalhes, veja a documentação: https://console.bluemix.net/apidocs/assistant.

Agora vamos ao código.

A API REST do Watson, como dito acima, funciona a partir de comunicação cURL e vai retornar um json completo com todas as informações para a comunicação. Para criarmos uma conversa simples, precisamos definir o código. Fique atento ao que precisa ser preenchido.

Exemplo usando PHP

conversa.php

Como o retorno é json, precisamos definir a página como text/plain, para evitar qualquer renderização incorreta.

header("Content-Type: text/plain");

Iremos definir então as informações que pegamos acima através das configurações do serviço de conversação. Lembre-se de substituir o código abaixo por seus dados.

$workspace = "d5b7e381-xxxx-xxxx-xxxx-xxxxxxxxxxxx";

$apikey = "xxxxxxxxxxxxxxxxx";

/*Antiga autenticação
$username = "cd27b34f-xxxx-xxxx-xxxx-xxxxxxxxxxxx";
$password = "Klxxxxxxxx";
*/

Precisamos agora capturar o texto que será enviado para o servidor do Watson. Para testes usaremos o $_REQUEST, do PHP. Por segurança, quando for trabalhar em modo de produção, troque para $_POST.

$texto = $_REQUEST["texto"];

Agora é necessário definir um identificador. Para manter o contexto de conversa, e o Watson saber que está conversando ainda com a mesma pessoa, é necessário passar um identificador. Esse identificador deverá ser único por conversa. Caso você esteja implementando em um sistema de gestão, por exemplo, você pode usar o nome de usuário, id, e-mail, ou algum outro tipo de identificação única.

No nosso teste criaremos uma hash única md5 e a armazenaremos em uma sessão. Dessa forma, garantimos a criação temporária de um identificador único funcional. Nosso bloco então ficará:

if (session_status() == PHP_SESSION_NONE) {
    session_start();
}
if(isset($_SESSION["identificador"])){
	$identificador = $_SESSION["identificador"];
}else{
	$identificador = md5(uniqid(rand(), true));
	$_SESSION["identificador"] = $identificador;
}

A URL da API REST deverá ser concatenada com o Workspace e o método que você está chamando. Dentro do gateway de conversação há vários métodos, desde status a tratamento de workspaces e diálogos. Através da documentação, você poderá explorar todos os métodos acessíveis para o Watson: https://www.ibm.com/watson/developercloud/conversation/api/v1/.

Em nosso exemplo básico, entretanto, iremos utilizar apenas o método message. É importante lembrar que é necessário adicionar a data da versão da API como parâmetro para que possa funcionar.

$url = "https://gateway.watsonplatform.net/conversation/api/v1/workspaces/" . $workspace;
$urlMessage = $url . "/message?version=2017-05-26";

Para enviar os dados para o Watson, precisamos criar uma pequena string json. Como em nosso exemplo só precisamos enviar o texto e o identificador, podemos simplesmente concatenar o texto, deixando-o pronto para envio.

$dados  = "{";
$dados .= "\"input\": ";
$dados .= "{\"text\": \"" . $texto . "\"},";
$dados .= "\"context\": {\"conversation_id\": \"" . $identificador . "\",";
$dados .= "\"system\": {\"dialog_stack\":[{\"dialog_node\":\"root\"}], \"dialog_turn_counter\": 1, \"dialog_request_counter\": 1}}";
$dados .= "}";

Como estamos tratando de json, devemos especificar o cabeçalho do tipo de dados que estamos enviando.

$headers = array('Content-Type:application/json');

Agora começa a comunicação. Para acessar a API, algumas exigências são feitas. É necessário ser enviado em método POST um json e ser uma comunicação segura, com identificação de usuário e senha. O bloco referente a comunicação ficará então:

$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $urlMessage);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $dados);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
//curl_setopt($ch, CURLOPT_USERPWD, "$username:$password"); Autenticação antiga
curl_setopt($ch, CURLOPT_USERPWD, "apikey:$apikey")
curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
$retorno = curl_exec($ch);
curl_close($ch);

Por fim, para facilitar a leitura, vamos imprimir o json na tela com uma organização mais legível para um ser-humano.

$retorno = json_decode($retorno);
echo json_encode($retorno, JSON_PRETTY_PRINT);

Com isso já poderemos ter uma resposta json, que, ao passar o texto, retornará algo similar como na imagem abaixo:

O código back-end completo fica (com comentários para ajudar a compreensão):

<?php
//Garantir que seja lido sem problemas
header("Content-Type: text/plain");

//Worskspace
$workspace = "d5b7e381-XXXX-XXXX-XXXX-XXXXXXXXXXXX";

/**
Antiga Autenticação
//Dados de Login
$username = "cd27b34f-XXXX-XXXX-XXXX-XXXXXXXXXXXX";
$password = "Kl8XXXXXXXXX";
**/
$apikey = "xxxxxxxxxxxxxxxxx";
//Capturar Texto
//Use $_POST em produção, por segurança
$texto = $_REQUEST["texto"];

//Verifica se existe identificador
//Caso não haja, crie um
if (session_status() == PHP_SESSION_NONE) {
    session_start();
}
if(isset($_SESSION["identificador"])){
	$identificador = $_SESSION["identificador"];
}else{
	//Você pode usar qualquer identificador
	//Você pode usar ID do usuário ou similar
	$identificador = md5(uniqid(rand(), true));
	$_SESSION["identificador"] = $identificador;
}

//URL da API
//(deve ser passado o método e a versão da API em GET)
$url = "https://gateway.watsonplatform.net/conversation/api/v1/workspaces/" . $workspace;
$urlMessage = $url . "/message?version=2017-05-26";

//Dados
$dados  = "{";
$dados .= "\"input\": ";
$dados .= "{\"text\": \"" . $texto . "\"},";
$dados .= "\"context\": {\"conversation_id\": \"" . $identificador . "\",";
$dados .= "\"system\": {\"dialog_stack\":[{\"dialog_node\":\"root\"}], \"dialog_turn_counter\": 1, \"dialog_request_counter\": 1}}";
$dados .= "}";

//Cabeçalho que leva tipo de Dados
$headers = array('Content-Type:application/json');

//Iniciando Comunicação cURL
$ch = curl_init();
//Selecionando URL
curl_setopt($ch, CURLOPT_URL, $urlMessage);
//O cabeçalho é importante para definir tipo de arquivo enviado
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
//Habilitar método POST
curl_setopt($ch, CURLOPT_POST, 1);
//Enviar os dados
curl_setopt($ch, CURLOPT_POSTFIELDS, $dados);
//Capturar Retorno
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
//Autenticação
//curl_setopt($ch, CURLOPT_USERPWD, "$username:$password"); Autenticação antiga
curl_setopt($ch, CURLOPT_USERPWD, "apikey:$apikey")
curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
//Executar
$retorno = curl_exec($ch);
//Fechar Conexão
curl_close($ch);

//Imprimir com leitura fácil para humanos
$retorno = json_decode($retorno);
echo json_encode($retorno, JSON_PRETTY_PRINT);

?>

Código do Front-End

Agora precisamos fazer a interação do usuário com o chatbot. Para isso, precisamos criar uma área do chat e o formulário que enviará os dados.

<div id="watson" class="watson">
	<div class="mensagens">
		<div class="area" id="chat">
		</div>
	</div>
	<form id="mensagem" class="mensagem">
		<input type="text" id="texto" name="texto" placeholder="Digite sua mensagem"/>
		<button type="submit">Enviar</button>
	</form>
</div>

Com a área de chat criada, está na hora de adicionarmos os scripts necessários para fazer a comunicação com o back-end. Para facilitar, usaremos o método ajax do jQuery. Atenção aos comentários no código abaixo, pois eles explicam para quê serve cada linha.

<!--Importar jQuery. Retire caso sua página já faça a importação. -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//Submeter Formulário
$("#mensagem").submit(function(){
	//Caso o usuário envie uma mensagem vazia
	if($("#mensagem #texto").val() === ""){
		//Adiciona na área de Chat a mensagem enviada pelo usuário
		$("#chat").append("<div class=\"texto usuario\">...</div>");
		
		//Faz um scroll para a mensagem mais recente, caso necessário
		$(".mensagens").animate({scrollTop: $("#chat").height()});
		setTimeout(function(){
			//Adiciona uma resposta padrão afirmando que o usuário deixou o campo vazio
			$("#chat").append("<div class=\"texto chatbot\">Você precisa digitar alguma coisa para prosseguir.</div>");
			//Faz um scroll para a mensagem mais recente, caso necessário
			$(".mensagens").animate({scrollTop: $("#chat").height()});
		},1000);
		return false;
	}
	
	//Inicia método AJAX
	$.ajax({
		//Substitua o caminho da URL pelo que você salvou o arquivo de backend
		url: "/pasta/conversa.php?texto=" + $("#mensagem #texto").val(),
		dataType: 'json', // Determina o tipo de retorno
		beforeSend: function(){
			//Adiciona a mensagem de usuário à lista de mensagens.
			$("#chat").append("<div class=\"texto usuario\">" + $("#mensagem #texto").val() + "</div>");	
		},
		success: function(resposta){
			//Limpa o que o usuário digitou e foca no input para próxima interação.
			$("#mensagem #texto").val("");
			$("#mensagem #texto").focus();
			
			//Caso haja um erro, o Watson retornará a mensagem de erro ao usuário
			//Basta ler o objeto error para o usuário.
			if(resposta.error){
				$("#chat").append("<div class=\"texto chatbot\">" + resposta.error + "</div>");
				return false;
			}
			
			//Colocar a resposta do Watson para o usuário ler
			//A mensagem de texto pode ser lida a partir da lógica
			//do json de exemplo da imagem no post
			var mensagemChatbot  = "<div class=\"texto chatbot\">";
			mensagemChatbot		+= resposta.output.text[0];
			mensagemChatbot		+= "</div>";
			setTimeout(function(){
				$("#chat").append(mensagemChatbot);
				$(".mensagens").animate({scrollTop: $("#chat").height()});
			},1000);
		}
	});

	return false;
});
</script>

Observe que no código acima existe um método setTimeOut que ocorre sempre antes de adicionar a resposta do Watson. Isso é feito por uma decisão de experiência do usuário.

Uma resposta muito rápida pode causar uma confusão de interpretação e estranhamento.

Quando você está conversando com alguém, a tendência é, ao enviar uma mensagem, esperar que a pessoa ao menos pense na resposta e digite antes de responder. Um pequeno atraso de um segundo na resposta é um tempo mínimo esperado para dar uma maior naturalidade a conversa e ainda permitir que o usuário se prepare para receber uma mensagem. Essa é uma decisão puramente de UX. Caso queira, você pode retirar o setTimeout e irá funcionar normalmente, mas ao testar você poderá sentir que esse tempo de resposta faz falta.

Para finalizar, vamos colocar um estilo CSS para ficar mais agradável ao usuário.

<style>
	.watson{
		border: 1px solid #B0BEC5;
		border-radius: 3px;
		height: 50em;
		max-height: 500px;
		padding: 1em;
		
		max-width: 500px;
		margin: 0 auto;
		
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.watson .mensagens{
		box-sizing: border-box;
		overflow: hidden;
		overflow-y: auto;
		height: 100%;
	}
	
	.watson .mensagens .area{
		display: flex;
		justify-content: flex-end;
		flex-direction: column;
		min-height: 100%;
	}
	
	.watson .mensagens .texto{
		border-radius: 2px;
		box-sizing: border-box;
		padding: .65em;
		margin-top: .5em;
		
		animation: popupmensagem linear .2s;
		animation-iteration-count: 1;
		-webkit-animation: popupmensagem linear .2s;
		-webkit-animation-iteration-count: 1;
		-moz-animation: popupmensagem linear .2s;
		-moz-animation-iteration-count: 1;
		-o-animation: popupmensagem linear .2s;
		-o-animation-iteration-count: 1;
		-ms-animation: popupmensagem linear .2s;
		-ms-animation-iteration-count: 1;
	}
	
	.watson .mensagens .texto:first-child{
		margin-top: 0;
	}
	
	.watson .mensagens .texto.usuario{
		background-color: #ECEFF1;
		color: #1A237E;
		margin-right: 30%;
		
		transform-origin: 0% 100%;
		-webkit-transform-origin: 0% 100%;
		-moz-transform-origin: 0% 100%;
		-o-transform-origin: 0% 100%;
		-ms-transform-origin: 0% 100%;
	}
	
	.watson .mensagens .texto.chatbot{
		background-color: #FF5722;
		color: white;
		font-weight: bold;
		margin-left: 30%;
		
		transform-origin: 100% 100%;
		-webkit-transform-origin: 100% 100%;
		-moz-transform-origin: 100% 100%;
		-o-transform-origin: 100% 100%;
		-ms-transform-origin: 100% 100%;
	}
	
	.watson form.mensagem{
		padding: 0;
		margin-top: 1em;
	}
	
	.watson form.mensagem input{
		border: 2px solid #476A7B;
		border-radius: 3px;
		padding: .5em .8em;
		font-size: 16px;
		display: block;
		box-sizing: border-box;
		width: 100%;
	}
	
	.watson form.mensagem input:focus{
		border: 2px solid #1A237E;
		outline: none;
	}
	
	.watson form.mensagem button{
		background-color: #3F51B5;
		border: none;
		border-radius: 3px;
		display: block;
		padding: .5em 1em;
		width: 100%;
		font-size: 16px;
		color: white;
		margin-top: .5em;
	}
	
	
	/**Animação de Mensagem**/
	
	@keyframes popupmensagem{
	  0% {
		transform:  scaleX(0.30) scaleY(0.30) ;
	  }
	  100% {
		transform:  scaleX(1.00) scaleY(1.00) ;
	  }
	}

	@-moz-keyframes popupmensagem{
	  0% {
		-moz-transform:  scaleX(0.30) scaleY(0.30) ;
	  }
	  100% {
		-moz-transform:  scaleX(1.00) scaleY(1.00) ;
	  }
	}

	@-webkit-keyframes popupmensagem {
	  0% {
		-webkit-transform:  scaleX(0.30) scaleY(0.30) ;
	  }
	  100% {
		-webkit-transform:  scaleX(1.00) scaleY(1.00) ;
	  }
	}

	@-o-keyframes popupmensagem {
	  0% {
		-o-transform:  scaleX(0.30) scaleY(0.30) ;
	  }
	  100% {
		-o-transform:  scaleX(1.00) scaleY(1.00) ;
	  }
	}

	@-ms-keyframes popupmensagem {
	  0% {
		-ms-transform:  scaleX(0.30) scaleY(0.30) ;
	  }
	  100% {
		-ms-transform:  scaleX(1.00) scaleY(1.00) ;
	  }
	}
</style>

E agora? Funciona mesmo?

Veja o exemplo abaixo, utilizamos exatamente o mesmo código. Lembre-se que há apenas poucas interações e respostas criadas para este tutorial, então não espere ter uma conversa muito avançada com este chatbot.

Obs. Está sendo utilizada no exemplo uma conta Lite, então é possível que quando você testar já tenha acabado o limite mensal.

Caso você deseje um pouco mais de segurança, recomendamos que você utilize um arquivo .htdocs na pasta em que está o conversa.php, com o conteúdo abaixo. Evitando, assim, acesso externo.

#Evitar Acesso Externo
Order Deny,Allow
Deny from all
Allow from 127.           # localhost

Faça o Download do Código no Github, se preferir:

Caso tenha apreciado este conteúdo, dê uma passada lá na página da VelhoBit no Facebook e deixe seu like. Compartilhe este post com colegas e interessados na área de tecnologia e não deixe de conferir o restante dos artigos no blog.

Até o próximo tutorial.

Uma das formas mais utilizadas é o preenchimento automático de endereço a partir do CEP (clique aqui, caso queira saber como fazer). Porém, uma outra alternativa muito interessante, e sempre procurada, é o preenchimento dinâmico dos dados de uma empresa a partir do CNPJ.

Para isso, há uma API pública bem interessante de uma organização chamada ReceitaWS, que é uma empresa destinada a fornecer dados de pessoas jurídicas a partir da Receita Federal. Sua API pública é bem funcional e garante uma quantidade enorme de CNPJs atualizados. O ReceitaWS também possui uma API comercial para quem precisa de dados mais refinados e precisos.

Obs. Só deixando claro que isto NÃO é um anúncio.

Conectando com o ReceitaWS

A API do ReceitaWS aconselha o acesso via cURL. Falando de forma simples, é como se o servidor fizesse o acesso a um site como se fosse um navegador. Por questões de segurança e para impedir o acúmulo de processos, muitas APIs bloqueiam o acesso direto. Por isso a comunicação não pode ser feita apenas com a URL.

Apesar de ser possível fazer acesso cURL em praticamente qualquer linguagem, vamos usar PHP (atualização: ou Java) no nosso exemplo, por você poder usar em praticamente qualquer hospedagem.

Esse acesso deverá ser feito para a URL: https://www.receitaws.com.br/v1/cnpj/[cnpj], onde [cnpj] corresponde ao número do CNPJ que você irá consultar.

Para iniciar, devemos criar um arquivo onde vai ser carregado os dados e impresso o retorno.

cnpj.php

É extremamente importante que o nosso arquivo possua um cabeçalho que imprima como text/plain. Isso porque teremos uma resposta em jSon e passar este cabeçalho irá garantir a leitura correta dos dados.

header("Content-Type: text/plain");

Em seguida, devemos capturar o CNPJ enviado pela requisição e guardar em uma variável.

$cnpj = $_REQUEST["cnpj"];

Agora começa a parte interessante. Iremos usar o método cURL do PHP para poder acessar a URL e passar o CNPJ. Leias os comentários para entender seu funcionamento.

$ch = curl_init(); //Inicializa
curl_setopt($ch, CURLOPT_URL, "https://www.receitaws.com.br/v1/cnpj/".$cnpj); //Acessa a URL
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); //Permite a captura do Retorno
$retorno = curl_exec($ch); //Executa o cURL e guarda o Retorno em uma variável
curl_close($ch); //Encerra a conexão

Por fim, devemos terminar com a impressão do retorno.
Para o retorno poder ser lido de forma simples, mesmo que por um humano, iremos usar o JSON_PRETTY_PRINT. Para isso, temos que converter a String de retorno usando o método Json Decode, em seguida imprimindo o resultado com o JSON_PRETTY_PRINT.

$retorno = json_decode($retorno); //Ajuda a ser lido mais rapidamente
echo json_encode($retorno, JSON_PRETTY_PRINT);

O código completo ficará:

<?php
//Garantir que seja lido sem problemas
header("Content-Type: text/plain");

//Capturar CNPJ
$cnpj = $_REQUEST["cnpj"];

//Criando Comunicação cURL
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "https://www.receitaws.com.br/v1/cnpj/".$cnpj);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
//curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); //Descomente esta linha apenas se você não usar HTTPS, ou se estiver testando localmente
$retorno = curl_exec($ch);
curl_close($ch);

$retorno = json_decode($retorno); //Ajuda a ser lido mais rapidamente
echo json_encode($retorno, JSON_PRETTY_PRINT);

?>

Se quiser testar, basta acessar o seu arquivo php pelo navegador, por exemplo:
seusite.com/pasta/cnpj.php?cnpj=XXXXXXXXXXXXX

Atualização (Java):

Você também pode fazer com Java. O exemplo abaixo é uma forma bem simples de fazer.

<%@ page contentType="text/plain; charset=utf-8" language="java" errorPage="" %>
<%@page import="java.io.*"%>
<%@page import="java.net.URL"%>
<%
URL url = new URL("https://www.receitaws.com.br/v1/cnpj/"+request.getParameter("cnpj"));
try (BufferedReader reader = new BufferedReader(new InputStreamReader(url.openStream(), "UTF-8"))) {
 for (String line; (line = reader.readLine()) != null;) {
 out.println(line);
 }
}
%>

Evitando acessos externos

Por segurança, precisamos evitar que outros sites acessem o nosso json. Isso para evitar que o servidor caia devido a diversas requisições de fontes desconhecidas. A forma mais simples de fazer isso, e compatível com praticamente qualquer hospedagem / servidor, é através do arquivo .htaccess.

Na mesma pasta onde foi criado o arquiv cnpj.php deve ser criado um arquivo chamado:

.htaccess

Nesse arquivo deve conter as seguintes informações:

#Evitar Acesso Externo
Order Deny,Allow
Deny from all
Allow from 127. #localhost

Basicamente, o que está sendo dito é que nenhum servidor pode acessar o conteúdo desta pasta, exceto o localhost (127.0.0.1). Caso você queira adicionar mais algum IP autorizado, basta adicionar o IP ou domínio do endereço que deseja.

ATENÇÃO: Caso você seja usuário Cloudflare, adicone os seguintes IPs em sua lista de permissões do .htaccess:

Allow from 199.27.128.0/21
Allow from 173.245.48.0/20
Allow from 103.21.244.0/22
Allow from 103.22.200.0/22
Allow from 103.31.4.0/22
Allow from 141.101.64.0/18
Allow from 108.162.192.0/18
Allow from 190.93.240.0/20
Allow from 188.114.96.0/20
Allow from 197.234.240.0/22
Allow from 198.41.128.0/17
Allow from 162.158.0.0/15
Allow from 104.16.0.0/12
Allow from 172.64.0.0/13

Atualização (Java):

Caso você use o Java, a forma de configurar as permissões de acesso irá variar de acordo com o servidor que você utilizar.

Caso você utilize o Tomcat, você deve utilizar o CORS para fazer esse controle de permissão.

Para isso, edite o arquivo web.xml, e procure pelo filtro do CORS. O bloco deverá ficar algo semelhante ao código abaixo, segundo a mesma lógica do exemplo acima, do PHP:

<filter>
    <filter-name>CORS</filter-name>
    <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
    <init-param>
     <param-name>cors.allowOrigin</param-name>
        <param-value>127.0.0.1</param-value>
    </init-param>
    <init-param>
     <param-name>cors.supportedMethods</param-name>
        <param-value>GET, POST, HEAD, PUT, DELETE</param-value>
    </init-param>
    <init-param>
       <param-name>cors.supportedHeaders</param-name>
       <param-value>Accept, Origin, X-Requested-With, Content-Type, Last-Modified</param-value>
    </init-param>
    <init-param>
        <param-name>cors.exposedHeaders</param-name>
        <param-value>Set-Cookie</param-value>
    </init-param>
    <init-param>
        <param-name>cors.supportsCredentials</param-name>
        <param-value>true</param-value>
    </init-param>
</filter>

OBS. O uso do CORS pode dar problemas com clientes que façam acesso por cliente sem DNS, ou seja, com acesso que não é feito por conexão http ou https, como por exemplo,
o Cordova/Phonegap. Nesse caso, aconselha-se simplesmente não usar o CORS, ou editar a bibliotca.

Enviando o CNPJ e Imprimindo os Dados da Empresa

Já para imprimir os dados e ler o json de retorno, precisamos usar um formulário HTML e um pouco de Javascript. Para poder facilitar a compreensão, usaremos o bom e velho jQuery, já explicado em conteúdos anteriores.

A primeira coisa é criar o formulário que devemos usar.

form.html

<!--Importando Script Jquery-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<!--Formulário-->
<form id="post">
  <label for="cnpj">CNPJ</label>
  <input id="cnpj" required type="text">
  <br/>
  <label for="nome">Razão Social</label>
  <input id="nome" type="text">
  <br/>
  <label for="fantasia">Nome Fantasia</label>
  <input id="fantasia" type="text">
  <br/>
  <label for="atividade">Atividade Principal</label>
  <input id="atividade" type="text">
  <br/>
  <label for="telefone">Telefone</label>
  <input id="telefone" required type="text">
  <br/>
  <label for="email">E-mail</label>
  <input id="email" type="text">
  <br/>
  <label for="cep">CEP</label>
  <input id="cep" type="text">
  <br/>
  <label for="logradouro">Logradouro</label>
  <input id="logradouro" type="text">
  <br/>
  <label for="numero">Número</label>
  <input id="numero" type="text">
  <br/>
  <label for="complemento">Complemento</label>
  <input id="complemento" type="text">
  <br/>
  <label for="bairro">Bairro</label>
  <input id="bairro" type="text">
  <br/>
  <label for="uf">Estado</label>
  <select id="uf">
    <option value="AC">Acre</option>
    <option value="AL">Alagoas</option>
    <option value="AP">Amapá</option>
    <option value="AM">Amazonas</option>
    <option value="BA">Bahia</option>
    <option value="CE">Ceará</option>
    <option value="DF">Distrito Federal</option>
    <option value="ES">Espírito Santo</option>
    <option value="GO">Goiás</option>
    <option value="MA">Maranhão</option>
    <option value="MT">Mato Grosso</option>
    <option value="MS">Mato Grosso do Sul</option>
    <option value="MG">Minas Gerais</option>
    <option value="PA">Pará</option>
    <option value="PB">Paraíba</option>
    <option value="PR">Paraná</option>
    <option value="PE">Pernambuco</option>
    <option value="PI">Piauí</option>
    <option value="RJ">Rio de Janeiro</option>
    <option value="RN">Rio Grande do Norte</option>
    <option value="RS">Rio Grande do Sul</option>
    <option value="RO">Rondônia</option>
    <option value="RR">Roraima</option>
    <option value="SC">Santa Catarina</option>
    <option value="SP">São Paulo</option>
    <option value="SE">Sergipe</option>
    <option value="TO">Tocantins</option>
  </select>
</form>

Como iremos aplicar a consulta após o usuário deixar o campo CNPJ, deveremos adicionar a chamada no focusout do CNPJ, ficando

<script type="text/javascript">
	$("#cnpj").focusout(function(){
	//Aqui vai o código		
	});
</script>

Agora é bem simples. Basta usarmos o método Ajax, que já utilizamos em tutoriais anteriores para fazermos conexões. O código abaixo possui diversos comentários para facilitar o entendimento de cada bloco.

<script type="text/javascript">
	$("#cnpj").focusout(function(){
		//Início do Comando AJAX
		$.ajax({
			//O campo URL diz o caminho de onde virá os dados
			//É importante concatenar o valor digitado no CNPJ
			url: '/pasta/cnpj.php?cnpj='+$("#cnpj").val(),
//Atualização: caso use java, use cnpj.jsp, usando o outro exemplo.
			//Aqui você deve preencher o tipo de dados que será lido,
			//no caso, estamos lendo JSON.
			dataType: 'json',
			//SUCESS é referente a função que será executada caso
			//ele consiga ler a fonte de dados com sucesso.
			//O parâmetro dentro da função se refere ao nome da variável
			//que você vai dar para ler esse objeto.
			success: function(resposta){
				//Confere se houve erro e o imprime
				if(resposta.status == "ERROR"){
					alert(resposta.message + "\nPor favor, digite os dados manualmente.");
					$("#post #nome").focus().select();
					return false;
				}
				//Agora basta definir os valores que você deseja preencher
				//automaticamente nos campos acima.
				$("#post #nome").val(resposta.nome);
				$("#post #fantasia").val(resposta.fantasia);
				$("#post #atividade").val(resposta.atividade_principal[0].text + " (" + resposta.atividade_principal[0].code + ")");
				$("#post #telefone").val(resposta.telefone);
				$("#post #email").val(resposta.email);
				$("#post #logradouro").val(resposta.logradouro);
				$("#post #complemento").val(resposta.complemento);
				$("#post #bairro").val(resposta.bairro);
				$("#post #cidade").val(resposta.municipio);
				$("#post #uf").val(resposta.uf);
				$("#post #cep").val(resposta.cep);
				$("#post #numero").val(resposta.numero);
			}
		});
	});
</script>

Que tal agora testarmos o funcionamento?

Digite um CNPJ (apenas números) no campo CNPJ abaixo e depois saia dele (focusout), clicando em outro campo ou pressionando a tecla TAB de seu teclado.

Para este exemplo/tutorial, iremos usar jQuery e HTML.

Carregando o Endereço Dinamicamente pelo CEP

Talvez o mais famoso repositório público para preenchimento de CEP (sem a necessidade de uma integração com os Correios), deve ser o ViaCEP.

A API do ViaCEP possui uma integração com json, que é o que usaremos aqui.

O ViaCEP nos retorno os seguintes dados, com as respectivas chaves:

• “cep”,
• “logradouro”,
• “complemento”,
• “bairro”,
• “localidade”,
• “uf”,
• “unidade”,
• “ibge”,
• “gia”

Para exemplificarmos, vamos usar um formulário HTML simples: (Usaremos a base de estados capturado a partir do GitHub de Cassio Cardoso)

<!--Importando Script Jquery-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<!--Formulário-->
<form>
<label for="cep">CEP</label>
		<input id="cep" type="text" required/>
<label for="logradouro">Logradouro</label>
		<input id="logradouro" type="text" required/>
<label for="numero">Número</label>
		<input id="numero" type="text" />
<label for="complemento">Complemento</label>
		<input id="complemento" type="text"/>
<label for="bairro">Bairro</label>
		<input id="bairro" type="text" required/>
<label for="uf">Estado</label>
		<select id="uf">
			<option value="AC">Acre</option>
			<option value="AL">Alagoas</option>
			<option value="AP">Amapá</option>
			<option value="AM">Amazonas</option>
			<option value="BA">Bahia</option>
			<option value="CE">Ceará</option>
			<option value="DF">Distrito Federal</option>
			<option value="ES">Espírito Santo</option>
			<option value="GO">Goiás</option>
			<option value="MA">Maranhão</option>
			<option value="MT">Mato Grosso</option>
			<option value="MS">Mato Grosso do Sul</option>
			<option value="MG">Minas Gerais</option>
			<option value="PA">Pará</option>
			<option value="PB">Paraíba</option>
			<option value="PR">Paraná</option>
			<option value="PE">Pernambuco</option>
			<option value="PI">Piauí</option>
			<option value="RJ">Rio de Janeiro</option>
			<option value="RN">Rio Grande do Norte</option>
			<option value="RS">Rio Grande do Sul</option>
			<option value="RO">Rondônia</option>
			<option value="RR">Roraima</option>
			<option value="SC">Santa Catarina</option>
			<option value="SP">São Paulo</option>
			<option value="SE">Sergipe</option>
			<option value="TO">Tocantins</option>
		</select>
</form>

Agora vamos executar uma função para que no momento após sair do campo CEP, ele faça a busca e preencha os demais campos. Como é no momento após deixar o campo, iremos vincular ao evento focusout.

<script type="text/javascript">
	$("#cep").focusout(function(){
	//Aqui vai o código		
	});
</script>

Agora temos que chamar a API json dentro da nossa função. Para isso, vamos utilizar o comando $.ajax, do jQuery.

Obs. Acompanhe os comentários no código para entender cada linha.

<script type="text/javascript">
	$("#cep").focusout(function(){
		//Início do Comando AJAX
		$.ajax({
			//O campo URL diz o caminho de onde virá os dados
			//É importante concatenar o valor digitado no CEP
			url: 'https://viacep.com.br/ws/'+$(this).val()+'/json/unicode/',
			//Aqui você deve preencher o tipo de dados que será lido,
			//no caso, estamos lendo JSON.
			dataType: 'json',
			//SUCESS é referente a função que será executada caso
			//ele consiga ler a fonte de dados com sucesso.
			//O parâmetro dentro da função se refere ao nome da variável
			//que você vai dar para ler esse objeto.
			success: function(resposta){
				//Agora basta definir os valores que você deseja preencher
				//automaticamente nos campos acima.
				$("#logradouro").val(resposta.logradouro);
				$("#complemento").val(resposta.complemento);
				$("#bairro").val(resposta.bairro);
				$("#cidade").val(resposta.localidade);
				$("#uf").val(resposta.uf);
				//Vamos incluir para que o Número seja focado automaticamente
				//melhorando a experiência do usuário
				$("#numero").focus();
			}
		});
	});
</script>

Simples, não é?

Essa mesma lógica você pode usar para poder dinamicamente diversos outros tipos de dados, inclusive alguns vindo do banco. Se quiser saber mais como usar o Json com PHP e jQuery, assista nosso vídeo tutorial sobre o assunto.

Vamos testar e ver como fica:

Abaixo, você pode ver o código completo:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Teste</title>
</head>

<body>
	<!--Importando Script Jquery-->
	<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

	<!--Formulário-->
	<form>
		<label for="cep">CEP</label>
		<input id="cep" type="text" required/>
		<label for="logradouro">Logradouro</label>
		<input id="logradouro" type="text" required/>
		<label for="numero">Número</label>
		<input id="numero" type="text" />
		<label for="complemento">Complemento</label>
		<input id="complemento" type="text"/>
		<label for="bairro">Bairro</label>
		<input id="bairro" type="text" required/>
		<label for="uf">Estado</label>
		<select id="uf">
			<option value="AC">Acre</option>
			<option value="AL">Alagoas</option>
			<option value="AP">Amapá</option>
			<option value="AM">Amazonas</option>
			<option value="BA">Bahia</option>
			<option value="CE">Ceará</option>
			<option value="DF">Distrito Federal</option>
			<option value="ES">Espírito Santo</option>
			<option value="GO">Goiás</option>
			<option value="MA">Maranhão</option>
			<option value="MT">Mato Grosso</option>
			<option value="MS">Mato Grosso do Sul</option>
			<option value="MG">Minas Gerais</option>
			<option value="PA">Pará</option>
			<option value="PB">Paraíba</option>
			<option value="PR">Paraná</option>
			<option value="PE">Pernambuco</option>
			<option value="PI">Piauí</option>
			<option value="RJ">Rio de Janeiro</option>
			<option value="RN">Rio Grande do Norte</option>
			<option value="RS">Rio Grande do Sul</option>
			<option value="RO">Rondônia</option>
			<option value="RR">Roraima</option>
			<option value="SC">Santa Catarina</option>
			<option value="SP">São Paulo</option>
			<option value="SE">Sergipe</option>
			<option value="TO">Tocantins</option>
		</select>
	</form>
	
	<script type="text/javascript">
		$("#cep").focusout(function(){
			//Início do Comando AJAX
			$.ajax({
				//O campo URL diz o caminho de onde virá os dados
				//É importante concatenar o valor digitado no CEP
				url: 'https://viacep.com.br/ws/'+$(this).val()+'/json/unicode/',
				//Aqui você deve preencher o tipo de dados que será lido,
				//no caso, estamos lendo JSON.
				dataType: 'json',
				//SUCESS é referente a função que será executada caso
				//ele consiga ler a fonte de dados com sucesso.
				//O parâmetro dentro da função se refere ao nome da variável
				//que você vai dar para ler esse objeto.
				success: function(resposta){
					//Agora basta definir os valores que você deseja preencher
					//automaticamente nos campos acima.
					$("#logradouro").val(resposta.logradouro);
					$("#complemento").val(resposta.complemento);
					$("#bairro").val(resposta.bairro);
					$("#cidade").val(resposta.localidade);
					$("#uf").val(resposta.uf);
					//Vamos incluir para que o Número seja focado automaticamente
					//melhorando a experiência do usuário
					$("#numero").focus();
				}
			});
		});
	</script>
</body>
</html>

Esta postagem é um complemento ao entendimento bem básico de C e programação.

C é uma linguagem de programação que precisa ser compilada, isto é, ela precisa ser transformada em um conjunto de códigos que a máquina interpretará para, então, criar um executável. Para fazer isso, a linguagem precisa de um compilador, que é um software que faz esse processado.

Obs. C é considerada uma linguagem auto-hospedada, pois com ela é possível criar o próprio compilador. Essa característica também é conhecida como linguagem completa.

Primeiramente, você vai precisar do seu código. Porém, antes de começar, precisamos passar por um pequeno glossário para que não haja confusões acerca de termos:

• I/O – Denomina-se I/O sistemas que fazem uso intensivo de entrada e saída de dados. I = input, O = output. Dentro da área de computação, a terminação I/O também é usada muito para expressar tecnologias novas de implementação.
• Editor de Texto – Na área de desenvolvimento é chamado de editor de texto qualquer programa onde você possa programar um código. Geralmente, editores de texto possuem auto-complete, que são dicas que ajudam a programar. Como exemplos temos o Notepad++, o Brackets, o Atom, etc.
• IDE – Ambiente de Desenvolvimento Integrado. Trata-se de uma ferramenta para desenvolvimento mais ampla do que um editor de texto. Além de inserir um contexto de projeto e não só de arquivos de texto editáveis, a IDE cuida da comunicação interna entre os elementos do código. Ou seja, é um ambiente completo para o desenvolvimento. Como exemplos temos o Eclipse, o JetBrains, o Visual Studio, o Coda, etc.
• Compilador – O compilador é um programa que transforma o seu código em algo que possa ser interpretado pela máquina. Os microcontroladores compreendem apenas bytecodes, ou outras linguagens de baixo nível indicadas em seus firmwares, de modo que se faz necessário converter o seu código para algo que a máquina entenda.
• Variável – Trata-se de um lugar que você reserva em sua memória para poder armazenar um dado, como um número, um caractere, etc.
• Função – É simplesmente um trecho de código com o propósito de executar um procedimento e, geralmente, retornar uma informação.

Outros termos poderemos ver em artigos futuros.

Para quem ainda está começando com programação, vamos deixar aqui abaixo um código, onde cada ponto de explicação está incluído como comentário.

#include <stdio.h>
// ^ Isto é uma diretiva. Ela serve para poder importar uma biblioteca externa
// (no caso, uma nativa do C conhecida como Standard I/O).
// As importações de bibliotecas devem ser a primeira coisa a ser declarada.
// O # simboliza que isso acontecerá antes de qualquer coisa ser executada pelo programa.

// Isto é um comentário. Você pode colocar duas barras
// no meio de um código e o compilador irá pular essa linha ou trecho
/* Você também pode usar /*, caso você queira
fazer um comentário com mais de uma linha.
Todavia, você precisa fechar com */

/**
 * Toda a aplicação em C deve ter uma função main() (principal).
 * Você deve ter reparado que este comentário está com uma cor diferente.
 * Convencionou-se que os comentários, antes de funções, devem ser feitos
 * com /** (Isso se chama Comentário de Cabeçalho). Isso indica a IDE que este
 * comentário descreve para quê serve
 * esta função. Isso acaba sendo incorporado a documentação do projeto
 * ou a dica de código mostrado por uma IDE. Você ainda pode usar
 * alguns parâmetros para indicar.
 * Colocar comentários, como este, não é obrigatório, mas faz parte de boas práticas,
 * pois você precisa lembrar o que esta função faz (e certamente, no futuro, você esquecerá),
 * ou indicar a um colega, como usar a função.
 * Por exemplo, esta função (também chamada de método), retorna um inteiro.
 * Logo, eu posso digitar:
 * RETURN :
 *            Type:   int   Resulta zero
 * Isso indicará a IDE e a documentação que a função retornará um inteiro.
 * Essa indicação de comentário de cabeçalho pode variar entre IDEs e linguagens.
 * */
int main() //A primeira palavra indica o que a função retorna, ou seja, a função,
// deve retornar um inteiro. Em seguida, coloca-se o nome da função, seguido de ().
{//Inicia a função (também conhecido como begin)

    int aInt = calcular(88,32); // uma variável do tipo inteiro
                                //(o nome aInt fui eu quem dei), que vai ser preenchido com o
                                //retorno da função calcular (veja abaixo)
    
    char str[15]; //uma variável do tipo caractere que eu chamei de str.
                  //O [15] significa que ela poderá ter até 15 caracteres.
                  //Vocês ainda vão entender o conceito de vetores.
    
    sprintf (str, "%d", aInt); //sprintf é uma função nativa do C que serve
                               //para transformar inteiros em caracteres,
                               //pois só posso imprimir caracteres no console (ou no dispositivo de saída).
    
    str[15] = strcat(str,"\n");//strcat é uma função nativa do C que serve para concatenar.
                               //Ou seja, juntar uma String (conjunto de caracteres) com outra.
                               //A String (que significa amarra em tradução livre, ou seja, uma amarra de caracteres)
                               //"\n" é um modo de dizer ao compilador que ele deve colocar uma quebra de linha
                               // Usar \n é algo padronizado como quebra de linha em qualquer tipo de texto plano.
                               // Lembrando que quebra de linha seria o equivalente a dar um CTRL+ENTER, em um texto comum.
    printf(str); //printf é uma função nativa do C que serve para mostrar (imprimir)
                 //algo no dispositivo de saída, no caso, no console abaixo.

    return 0; //O retorno da função.
              //Como a função diz que retorna um inteiro (lá no começo da função),
              //ela DEVE retornar um inteiro.
              //Caso você não retorne o inteiro, ela NÃO irá compilar, pois você prometeu que ela retornaria isso.
}//Finaliza a função (também conhecido como end)

/**
 * Você vai notar que esta função que eu criei, tem uma peculiaridade.
 * Repare que dentro dos parênteses há duas variáveis inteiras.
 * Essas variáveis se chamam parâmetros. Elas servem para que a função possa ser reaproveitada
 * a partir de outros termos que serão chamados acima.
 * Repare, em main(), que eu chamo calcular(88,32), mas você pode mudar para qualquer outro número inteiro.
 * O que o método (ou função), fará é calcular os dois valores que você colocar nos parâmetros.
 * No caso de C, se você não colocar os dois valores, ao chamar a função, o compilador falhará.
 * 
 * * INPUTS :
 *       PARAMETERS:
 *           int     valor                Primeiro somando
 *           int     valor2               Segundo somando
 */
int calcular(int valor, int valor2)
{
    int total = valor + valor2; //uma variável inteiro, chamada total, que retorna a soma dos parâmetros valor e valor 2;
    return total; //O retorno do método será um inteiro (como foi descrito no começo do mesmo).
    //Em main(), você pode ver que o retorno deste método retorna uma variável. 
}

Você pode simplesmente copiar e colar o código acima em um editor de texto qualquer (como os citados acima). Você pode usar até mesmo o bloco de notas do Windows, ou o Gedit, no Linux. Em, seguida, salve o arquivo com o nome que você quiser, porém, com a extensão .c, por exemplo: meucodigo.c.

Compilando C, no Windows

Para poder compilar em C, no Windows, usaremos uma ferramenta de código aberto chamada MinGW (caso deseje testar, pode usar a versão 64 bits do MinGW, porém a versão 32 é compatível com ambos os sistemas). Ao instalar você pode escolher algumas especificações e se quer ou não que ela opere em modo visual (em janela), além da integração com o Explorer.

Uma vez instalado o MinGW, você precisará selecionar o mingw32-base e mingw32-gcc-g++, pois ele é o compilador C / C++ para podermos trabalhar. Depois disso, basta ir no menu Installation e clicar em Apply Changes e, em seguida, no botão Apply. Ele irá instalar todos os arquivos do compilador que serão necessários para nosso teste.

Após concluída a instalação, já podemos usar o compilador.

Para poder compilar o seu arquivo, simplesmente abra o prompt de comando (cmd.exe), do Windows e vá na pasta do MinGW, localizada geralmente em C:\ (ou onde você preferiu instalar). Na dúvida basta digitar o código abaixo:

cd C:\MinGW\bin

Em seguida, vamos chamar o compilador e o arquivo que queremos que ele compile. Para isso, basta digitar o nome do compilador, o arquivo a ser compilado, o parâmetro do comando, e o nome final do programa.

No caso, teremos:

gcc meucodigo.c -o meuprograma.exe

Onde gcc é o processo (o compilador), meucodigo.c é o código fonte, o parâmetro -o significa que eu estou indicando qual é a saída e o meuprograma.exe indica o nome final do programa compilado.

No meu caso, como criei meu código fonte e o salvei dentro de Documentos, eu coloquei:

gcc C:\Users\rodri\Documents\meucodigo.c -o C:\Users\rodri\Documents\meuprograma.exe

Como é um pouco chato lembrar e até digitar todo o caminho, uma dica é arrastar o arquivo para dentro do prompt de comando, isso fará com que ele cole o caminho do arquivo.

Devido a quantidade enorme de comentários e observações no código, é bem provável que ele retorne alguns Warnings (alertas), ao compilar, mas não dará erro. Você poderá testar o resultado do seu programa simplesmente digitando o nome do executável no prompt de comando.

Compilando C, no Linux

Para compilar C, no Linux, é ainda mais simples do que no Windows. Dependendo da distribuição do Linux que você utilizar é possível até que já haja um compilador instalado. Vamos utilizar, no exemplo, a compilação de C em uma distribuição Debian, como o Ubuntu ou CentOS, por se tratar de distribuições muito usadas.

Abra o terminal do Linux e digite:

sudo apt-get update

Para quem é novo no Linux, o sudo é um comando que afirma que você vai executar como super usuário, ou seja, com acesso completo ao sistema operacional, e, por isso, ele deverá te pedir a senha. Já o apt-get update serve para atualizar o repositório (fonte de sistemas), de sua distribuição Linux.

Em seguida, basta digitar o comando:

sudo apt-get install build-essential

Esse comando serve para pedir para que seja instalado os elementos principais para compilação de diversas linguagens usadas pelo Linux, inclusive C, assim como todas os seus pacotes de dependências (bibliotecas necessárias para o funcionamento).

Agora vá até a pasta onde você salvou o arquivo do código, no meu caso está em /mnt/c/Users/rodri/Documents/.

Para compilar basta colocarmos:

gcc meucodigo.c -o meuprograma.out

Onde gcc é o processo (o compilador), meucodigo.c é o código fonte, o parâmetro -o significa que eu estou indicando qual é a saída e o meuprograma.exe indica o nome final do programa compilado.

Já para executarmos o programa, dentro do terminal, digitaremos:

./meuprograma.out

… e voilà

Concluindo

C é uma linguagem muito boa para quem está começando a programar ou está ainda entrando no mundo da tecnologia. Compilar por linha de comando te ajuda a ter uma base ainda melhor para compreender como funciona a compilação de uma linguagem e te dá mais liberdade para usar qualquer compilador, IDE ou editor de texto que você prefira e se adapte.

Para dar o exemplo no Ubuntu foi usado o Bash do Ubuntu disponível para Windows 10, todavia vai funcionar sem problemas em qualquer distribuição Linux, baseada em Debian, seja em máquina virtual ou em instalação normal. Se você quer saber como instalar o Bash do Ubuntu no Windows 10, acesse nosso artigo a respeito.

Programador é o profissional responsável por resolver, replicar ou adequar soluções de software a fim de que um computador ou equipamento eletrônico com micro-controladores, execute uma tarefa.

O principal custo do programador é, sem dúvida, em educação. Porém, ainda sim, é bem variável, pois baseia-se nas tecnologias que este deseja se especializar.

O lado positivo é que muitas ferramentas para programadores são gratuitas, como o Brackets, Notepad++, assim como muitas linguagens, como o PHP, Java, C e outras.

Educação

Desenvolvedores precisam investir muito, muito mesmo, em livros e livros de tecnologia não são nada baratos. Dificilmente é possível encontrar um livro intermediário por menos de 200 reais 250 reais.

Faculdades são um problema à parte. Apesar de várias faculdades de tecnologia aparecerem no país, a maioria focada em desenvolvimento não estão preparadas para preparar um aluno ao mercado de trabalho. Na própria faculdade, muitas vezes, possuem definições distorcidas de lógica e metodologias que não se adequam àqueles que já possuem intimidade com o computador, além de simplesmente ignorar assuntos como história e sociedade. Isso obriga a, mesmo os formados, procurarem especializações mais específicas para suas áreas, o que não é um negócio muito barato. Como é muito comum professores darem preferência a uma linguagem específica ao invés da lógica como um todo, muitos alunos, para conhecerem outras tecnologias, alternativas e métodos, precisam investir em cursos de especialização.

Boas faculdades particulares de tecnologia tem seu custo médio variável entre 300 a 1500 reais 750 a 2000 reais por mês. Sendo que cursos de especialização ou específicos, tem seu custo em média de 900 a 3 mil reais por curso, podendo ter alguns mais baratos se vinculados a cursos de extensão de faculdades (principalmente as públicas). Algumas palestras e workshops, com pessoas importantes na área, podem também chegar ao valor equivalente a um curso.

Certificação

A certificação é uma prova, muitas vezes mais importante do que um diploma, de que o desenvolvedor tem domínio em uma determinada área ou ferramenta. Geralmente atrelado a uma tecnologia/linguagem específica, a certificação é bem aceita no mercado de trabalho e envolve testes realmente difíceis para passar. As certificações podem variar de 800 a 30 mil reais 1500 a 40 mil reais, dependendo da área escolhida e se esta virá ou não acompanhada de um curso. Geralmente, quando se falha na prova, é necessário pagar novamente para uma segunda tentativa.

Máquina

A potência da máquina do programador varia da linguagem em que ele desenvolve e o objetivo de sua aplicação. Se ele optar por se especializar em PHP ou ASP, certamente ele não precisará de um computador que seja tão rápido. Entretanto, se ele trabalhar com Java, por exemplo, ele precisará ter um computador com pelo menos 4GB 8GB de RAM (pois é… Java tá pesado). Já aqueles que trabalham com desenvolvimento de jogos ou de aplicativos pesados que exijam opções gráficas, simulação ou alta precisão, precisarão de um computador realmente caro, na faixa dos 8 a 15 mil reais 10 a 21 mil, que possui uma configuração mais robusta. Se ele trabalhar com servidores, além de ter que ter mais de um, ele gastará uma quantia considerável para estudos e testes destes.

Comunicação

Grande parte de soluções e pesquisas podem ser encontradas na internet. O que exige que o programador tenha uma conexão realmente rápida. Hoje em dia, um profissional de TI precisa de uma conexão de pelo menos 20Mbps, o que gera um custo bem maior em comparação a quem tem uma internet comum em casa, e isso pode variar de região do país. Os que trabalham com gerenciamento de servidores a distância gastam muito mais, pois precisam de uma conexão ainda mais rápida para configurar e operar os mesmos sem perda de tempo ou informação. Ligações constantes para dar assistência a programadores e operadores também é comum, o que faz ter um alto custo com telefonia celular e fixa.

É difícil prever os custos exatos para comunicação. Os preços mudam muito de uma região do país para outras. Até mesmo de bairro para bairro o preço e velocidade máxima de conexão é absurdamente diferente.

Eventos

Como todo o profissional, o programador precisa estar atualizado com as últimas novidades de sua área. Precisa participar de eventos e promover encontros com outros desenvolvedores para criar melhores ações e estratégias para resolver seus problemas.

Porém eventos custam dinheiro principalmente para quem não mora no eixo sul do país, onde estão concentrados a maioria dos encontros. O problema é que, muitas vezes, não são as empresas que enviam os funcionários. Os programadores precisam pedir licença e custear do próprio bolso.

Na melhor das hipóteses, o custo para uma viagem não é menor que 2 mil reais (caso você seja alguém bem econômico e não se importe em dormir em albergues ou Airbnb), se for para uma cidade próxima. Caso seja internacional, prepare-se para um custo na faixa dos 12 mil reais.

E quanto ganha um programador?

Isso varia muito, de acordo com a região do país e de empresa para empresa. A média é que um desenvolvedor ganhe entre 3 mil e 30 mil reais, dependendo de sua função, para mais. Estudantes e programadores Jr, ganham em média de 1500 a 2500 reais (isso não mudou muito de 2013 pra cá).

O problema é que as empresas não estão dispostas a pagar corretamente por seus programadores ou ainda dão condições de trabalho que não correspondem com a área, como computadores ruins ou obrigatoriedade de uniformes e falta de flexibilidade no horário.

Por outro lado, alguns profissionais trabalham como autônomos dando consultorias para empresas. Entretanto, esses profissionais precisam ter uma certa “fama” em seu seguimento. Alguns cobram até 60 mil reais por consultoria de 15 dias. Mas isso não quer dizer que são bons. Muitos programadores famosos são péssimos profissionais, mas vivem de sua fama, cobrando valores absurdos e apresentando soluções não eficientes (ou nenhuma) e mal se entrosam no projeto. Porém essa é uma questão mais ética.

Concluindo

O Programador, ao contrário do que possa parecer, não é um profissional de glória. Diferente do que fez parecer, a partir dos anos 90, raramente pessoas de talento e estudo conseguem receber um valor justo por seu trabalho. Geralmente, os “mestres de cerimônia”, que só tem fama e fazem parecer trabalhar, acabam sendo mais valorizados por causa de seu carisma.

Programador de verdade está sempre trabalhando, sempre estudando, sempre se esforçando. Sempre interessado em evoluir e melhorar os seus projetos. Para um programador legítimo, um projeto quase nunca está perfeito. Mas é sempre incrivelmente gratificante depois de passar horas tentando fazer algo complicado, finalmente conseguir. É uma sensação extasiante e inexplicável.

Por muitas vezes, perguntei a alguns amigos designers qual era a configuração da máquina em que eles trabalhavam. Alguns me respondiam “Windows 7”, outros me respondiam, “ah é um Mac”. Mas, na realidade, o que eu queria saber era quanto de RAM, quanto de HD, qual o processador, placa de vídeo e, para minha surpresa, sempre me deparava com um “o quê?”, “como é?”, “sou designer. Não tem nada a ver eu saber disso”. Isso é decepcionante.

As vezes é necessário criar grandes formatos ou editar vídeos, talvez um pouco de 3D, então precisa de um computador que possa dar suporte as suas necessidades. Mas como saber se o que precisa é de mais RAM ou mais processamento? Ou se na verdade você simplesmente já tinha tudo certo, mas nem sabia que existiam Sistemas Operacionais 64 bits? Aliás, nem sequer sabia o que era 64 bits?

Existem muitos designers que enchem um site de estruturas complexas e somente camadas de PNG, ou gigantescas manobras de canvas, para poder montar algo vistoso. O designer necessita se preocupar com a tecnologia que o seu usuário usa e qual a configuração média do dispositivo, de acordo com a proposta do aplicativo, site ou artefato. Essa é outra razão para compreender como funciona computadores e dispositivos móveis.

Devo comprar um laptop ou um desktop

Laptops são computadores portáteis, conhecidos no Brasil como notebooks. Já os Desktops são computadores de mesa. A vantagem do primeiro é a mobilidade, porém, essa mobilidade tem um custo mais elevado, que pode ser refletido tanto em preço, quanto em performance. Independente do que você precisar comprar, fique atento as questões abaixo para que você possa escolher melhor a sua máquina. Para tanto, vamos listar por componentes mais comuns.

Processadores

O processador, ou a CPU (Unidade Central de Processamento), é o elemento que mais gera dúvidas a respeito de performance. Para quem trabalha com vídeos ou edição de som, o processador é fundamental para garantir uma renderização mais rápida. Já para quem trabalha com imagens estáticas, como o Photoshop ou Illustrator, ele vai acelerar o tempo de adição de efeitos e filtros. Para quem trabalha com web e desenvolvimento, a performance do processador é mais importante para virtualização, seja para dispositivos móveis ou máquinas virtuais.

Basicamente, há duas empresas quando o assunto é processadores: Intel e AMD. Com isso, vale a atenção a algumas características que podem enganar o consumidor mais desatento: As marcas i3, i5 e i7 são nomenclaturas puramente comerciais. A grande maioria dos laptops i7, por exemplo, são da linha U, que correspondem a um menor custo de energia, porém com uma performance inferior. A linha i7 XXX U, da Intel, por exemplo, apresenta menor clock e menor quantidade de núcleos, sendo comparado a um i3 para Desktops ou a um i5 da linha HQ, para laptops. Por isso, antes de se pensar em nomes comerciais, é necessário ficar atento a algumas características, como:

Clock → Digamos que seja a velocidade do processador. Ele é determinado a partir de métrica de frequência. Um processador mínimo, para quem trabalha com programas gráficos, é de 2,6GHz. Esse clock deve ser mais poderoso, caso o objetivo seja trabalhar com renderização de vídeo e 3D, onde é aconselhado pelo menos 3,2GHz. A tendência é que quantos mais GHz, mais rápido será a renderização.

Núcleos (Core) → Esse é um assunto polêmico. A necessidade de uma quantidade maior ou menor de núcleos depende da disponibilidade do aplicativo de usar ou não esses núcleos. Uma quantidade maior de núcleos significa que o processamento será dividido e executado simultaneamente entre eles, aumentando, por consequência, a performance. Os núcleos podem ser físicos ou lógicos (geralmente representado como Número de Threads). A diferença é que o núcleo físico realmente o número de núcleos no processador, enquanto o virtual emula núcleos dentro da CPU, com o objetivo de dividir as tarefas. Os núcleos físicos possuem performance superior, porém, mesmo processadores com 4 ou mais núcleos, tendem a possuir núcleos virtuais para somatizar a performance. Muitos núcleos são recomendados para quem trabalha com bastante 3D ou precise trabalhar com máquinas virtuais. Vale lembrar que a quantidade de vários núcleos significa que o computador irá dividir mais processos simultaneamente, ficando assim mais rápido, caso o programa usado dê esse suporte. A grande maioria dos programas profissionais modernos (programas da Adobe, AutoDesk, alguns compiladores, etc.) usam bem as várias threads do processador.

Cache → A memória cache representa o tamanho da informação que o processador poderá processar por vez. Quanto mais memória cache, mais tarefas o processador poderá executar em um curto espaço de tempo e, por consequência, maior performance. Muitos consideram a memória cache mais importante do que o Clock. É importante salientar que a quantidade de memória varia de núcleo para núcleo. Desse modo, segue a mesma lógica do clock, quanto mais você tiver, melhor vai ser sua performance para renderização. No entanto, atenção, a Intel mostra o cache POR NÚCLEO, enquanto a AMD tem o costume de mostrar a SOMA do cache. Então fique atento e observe sempre, nas configurações, o cache por núcleo. A partir de 4MB de cache L3 é interessante para quem trabalha com impressos, web e aplicativos. Para quem trabalha intensamente com vídeo e 3D, 8MB, ou mais, de cache L3 é mais recomendado.

O site CPU BOSS vai ajudar você a ter uma ideia de comparação na hora de escolher um processador.

Memória RAM

Até o começo dos anos 2000, muita memória RAM era sinônimo de altíssima performance. Isso porque a memória RAM, ou Memória de Acesso Aleatório, é responsável por guardar as informações que estão sendo executadas naquele momento. Em resumo, quanto mais memória RAM, mais programas abertos e mais pesados podem ficar abertos simultaneamente. O fato é que, hoje, os aplicativos são mais otimizados para consumir menos memória. Porém, para quem trabalha com projetos muito pesados, como revistas, livros e grandes formatos, uma quantidade razoável de memória RAM é muito importante. Já para quem trabalha com web, nem tanto. Já para virtualização, memória RAM é muito importante para dividir entre as máquinas virtuais. 8GB é o mínimo para quem trabalha com revistas e livros. Já para quem trabalha com web, 6GB é suficiente. Virtualização e vídeo, a partir de 16GB.

Placa de Vídeo

Nem todo computador tem uma placa de vídeo, mas todo ele tem um chipset ou um processador de vídeo. Hoje, existem duas opções no mercado: APU e GPU.

A APU é um tipo de processamento de vídeo que é compartilhado com o processador. Praticamente todos os processadores hoje possuem um processamento de vídeo incorporado. Mas esse vídeo incorporado não possui tanta performance quanto um processador de vídeo dedicado e também precisa usar parte da memória RAM.

Já a GPU é um processador dedicado de vídeo. As principais fabricantes são a nVIDIA e a AMD/Radeon. Por possuir um processamento próprio de vídeo e memória dedica, possui uma performance muito superior. Por isso elas são mais caras e exigem também mais energia e esquentam mais, o que pode ser algo que pese na opinião de alguém que queira comprar um computador, já que a fan (ventoinha) pode fazer muito barulho na hora que requer alto processaemnto.

Quem trabalha apenas com impressos, publicações e elementos institucionais, ou com desenvolvimento e web, não tem a necessidade de uma GPU. Uma APU o atenderá sem problemas. Porém para usar recursos mais avançados do Photoshop, como o 3D, uma GPU simples, dedicada, será o suficiente. Agora, se o intuito é trabalhar com 3D ou vídeo, então uma GPU mais parruda se faz necessário. Vale lembrar que é importante ver se o software que você usa, para edição de vídeo, usa mais a GPU ou a CPU para renderização. Esse último detalhe pode ser fundamental para uma escolha ideal.

Apesar do que pode parecer, a memória dedicada da GPU não é o ponto mais importante no que diz respeito a qualidade. Também a questão de núcleos não é tão importante assim, visto que processadores gráficos possuem uma quantidade absurda de núcleos em comparação a CPUs. A arquitetura da GPU quanto ao seu clock e a sua quantidade de memória é algo fundamental para analisar. Por exemplo, a GPU Geforce 930M (para laptops), da nVidia, é suficiente para quem quer trabalhar com impressos, web e vídeos esporádicos. Já a GTX 780, também da nVidia, apesar de mais antiga, é melhor, porém apenas para desktops. No caso da nVidia, o que difere a qualidade está mais relacionada aos seus dois últimos dígitos, sendo que o primeiro especifica o quão recente é a arquitetura. Pessoas que trabalham com 3D de forma mais assídua, e as que usam a GPU para renderizar vídeos, precisam de GPUs mais potentes. Alguns podem juntar várias GPUs em uma única, somando o processamento (mas não a memória dedicada) e deixando a renderização mais rápida.

Usuários do Ubuntu, cuidado ao comprar uma placa de vídeo Radeon. Muitas não receberão mais atualizações para o sistema operacional, ficando inutilizável o OpenGL nas distribuições mais recentes. Fique atento ao modelo que for adquirir.

Para verificar e comparar GPUs, o site GPU BOSS vai te ajudar a escolher qual a melhor.

Displays e Monitores

Um assunto deveras delicado, mas bem simples. Designers precisam sempre de qualidade de resolução e brilho, além de fidelidade de cores. O foco é sempre na relação de taxa de atualização x polegadas x resolução x tecnologia. O ideal ainda é uma tela IPS ou OLED. A resolução FULLHD deve ser usada no máximo em um monitor de 21.5 polegadas, para não ficar incômoda a densidade de pixels. Recomenda-se uma resolução maior também para manter uma boa área de utilização em relação as ferramentas. Qualquer coisa maior que 21.5 polegadas deverá ser 2K ou 4K, para manter uma boa qualidade de imagem. Já no que diz respeito a frequência, praticamente todos os monitores hoje apresentam boa frequência, porém para quem trabalha com vídeos, pode tentar conseguir um monitor na faixa dos 100hz. Mas cuidado, fuja totalmente das telas TFTs.

HDD e SSD

Espaço de armazenamento nunca é demais, mas as vezes velocidade é mais necessário. Os HDs eletromecânicos (HDD) possuem a vantagem de serem mais baratos e, graças a tecnologia SMART, saber quando vão dar problemas e o usuário pode tomar uma previdência quanto a um backup. Além disso, por ser mais barato, a quantidade de espaço disponível é muito maior a um preço menor. O problema é que por serem mecânicos são mais lentos. O mais rápido que é possível encontrar no mercado é o de 7200RPM.

Já o SSD, é extramamente rápido, por não possuir componentes mecânicos, o tempo de abertura de um arquivo ou programa é até 90% mais rápido do que em HDD. Porém, no caso de queimarem ou ter um problema sério, eles simplesmente irão parar de funcionar. Não há uma forma prática de diagnosticar que o SSD vai dar problemas. O custo também é muito alto. SSDs podem chegar a preços até 10x mais caro que um HD de mesma quantidade de memória. Vale salientar que a velocidade do SSD varia entre marcas e modelos, mas sempre é mais rápido que os HDDs comuns.

Periféricos

Mouses e teclados são detalhes pouco discutidos, mas são importantes. Para começar, quem trabalha muito com programação, ou digita muito, pode preferir um teclado mecânico. Porém teclados mecânicos são bem mais caros que o convencionais e fazem mais barulho, em contra partida possuem resposta muito mais rápida e eficiênte, o pressionar é mais confiável. Já no que diz respeito a mouses e touchpads, isso é uma questão realmente de adaptação, você precisa experimentar qual é o mais ideal para a sua mão. Procure mouses com DPIs mais altos, pois possuem maior precisão. No que diz respeito as Pen Tablets (erroneamente chamado de Mesa Digitalizadora), pouquíssimas pessoas realmente precisam deles e vão utilizar. A maioria das pessoas que as tem, compram por questão de status ou de uma ideia errada da atualização. O uso das PenTablets é maior para pessoas que realmente trabalham com ilustração matricial ou que precisem retocar imagens com frequência.

Obs. este artigo é de 2015. Então fiquem de olho nas atualizações dos hardwares.

Por fim, desktop ou laptop

Laptops costumam ser mais caros e ter uma performance inferior aos desktops de preços equivalentes. Além disso, você está à mercê das opções disponíveis no mercado, não vai ter a liberdade para montar uma máquina que julgar ideal. Mas os laptops possuem a vantagem da mobilidade e de ocupar um menor espaço físico, pode-se trabalhar em qualquer local e se deslocar a escritórios diferentes. Muitas pessoas preferem usar laptops com monitores separados, quando em estações de trabalho. Quando comprar um laptop deve-se ficar muito atento ao processador e a GPU, que, na maioria das vezes, possuem baixa qualidade para poder baratear os custos e melhorar a performance da bateria. Se comprar um laptop, opte primeiro por adquirir nas lojas oficiais, físicas ou online, salvo promoções pontuais, na loja da marca costuma ser mais barato e ter melhores condições.

Desktops possuem a vantagem de serem flexíveis, mais baratos e ter melhor performance. Porém exige muito espaço físico e você não há boa mobilidade. Consomem mais energia e é necessário um pouco mais de experiência para montar um equipamento que realmente agrade. Na grande maioria das vezes, ainda é possível fazer atualizações, aumentando o tempo de vida útil do computador, adicionando com o tempo uma placa de vídeo melhor ou mais RAM, trocar o processador ou adicionar periféricos. Tudo de acordo com as necessidades que forem surgindo. O ideal é comprar as peças e montar, pois a maioria das empresas que entregam o PC pronto tendem a escolher componentes de mais baixa qualidade para diminuir os custos.

Atenção: No momento em que receber o computador, seja ele um laptop, desktop ou até mesmo montado por você, faça todos os testes possíveis. Processamento, GPU, APU, etc. Use ferramentas de Benchmark de terceiros para isso. Não utilize as ferramentas da própria empresa da marca do computador que você comprou. Muitas vezes, elas não fazem os testes necessários para averiguar realmente todos os elementos do hardware.

Conhecer a sua própria máquina é mais que um luxo, é uma obrigação. Entender qual a nova tecnologia que entrará no mercado, e se adaptar a elas, é importante para se manter em um mercado cheio de concorrência, algumas até desleiais. Não estou falando de entender o que é um transistor, ou de fazer um curso de montagem e manutenção em algum “cursinho” por aí, mas sim, de entender o porquê de você comprar um processador de 4 núcleos, entender a diferença de uma GTX 930 para uma GTX 970, saber porque está comprando 16GB de RAM e não somente 8GB. Só assim você terá como tirar o maior proveito possível de seu computador e não fazê-lo tornar somente um elefante branco.

Comecei a trabalhar com essa parte fiscal há mais ou menos 1,5 ano. Para quem já trabalhou com NFe, CTe e, mais recentemente, NFSe, deve saber que a Sefaz parece que faz de tudo para você cometer erros. O suporte é quase nulo e eles poderiam realmente fazer uma forma de facilitar a comunicação e dar melhores retornos. Mas a verdade é que parece que o governo usa multa como fonte de renda, então para quê facilitar que o empresário pague ao próprio governo, né?

Supostamente, a NFe / CTe foi criada para reduzir o esforço e facilitar a emissão de documentos fiscais. Não há duvidas de que o controle do governo para o pagamento desses impostos aumentou e a dificuldade para sonegar impostos é maior. Entretanto, a dificuldade para emissão da nota também aumentou. Atualmente as empresas são obrigadas a emitir NF e do antigo CTRC (na maioria dos estados) de forma eletrônica. Futuramente a Nota Fiscal de Serviço também será eletrônica.

Obs. NFe = Nota Fiscal Eletrônica, NFSe = Nota Fiscal de Serviço Eletrônica, CTe = Conhecimento de Transporte Eletrônico. O leiaute 3.0 da NFe, referente ao Cupom Fiscal Eletrônico ainda não está em fases de testes e não explorarei neste artigo por não possuir ainda conhecimento necessário para descrever, no entanto, o 3.0 deverá seguir a mesma lógica.

Os Manuais da Sefaz

Muitos podem dizer que todas as respostas estão nos manuais e basta lê-los (hahahaha!). Mas muitos programadores só precisam dar suporte a um sistema já implementado ou simplesmente não entendeu determinados processos descritos nos manuais.

Primeiramente, devo lembrar que todos os manuais estão disponíveis através dos respectivos sites das fazendas:

• Documentos NFe
• Documentos CTe

Já para as notas fiscais de serviço (NFSe) há um problema a parte. Apesar de existir um padrão para NFSe, cabe a cada município a responsabilidade de disponibilizar os servidores e padrões para os webservices das mesmas, dificultando e MUITO a vida do programador. Consulte o site da Sefaz de seu município para obter o link com o manual.

Não somente os manuais são importantes como também as notas técnicas. As notas técnicas são mudanças que acontecem com certa frequência sobre os servidores da Sefaz e atualizações nas regras de validação e legislação. Infelizmente não tem como você receber atualizações em seu email. Então você deve estar sempre de olho nessas páginas e prestar atenção em fóruns relativos a Sefaz que concordem com a linguagem que você está trabalhando.

Sem dúvida a parte mais importante do manual e o que deve ser seguido na maioria dos erros (os erros mais comuns são os de preenchimento), são as Tabelas de Leiaute.  Ela não é complicada, mas pode causar algumas confusões em profissionais menos experientes. Abaixo, listarei a importância e descrição de cada campo da tabela leiaute:

• # : Código de referência único para cada linha da tabela de leiaute;
• Campo : Descreve o nome da tag XML para aquele valor;
• Ele : Indica o tipo do campo(A – atributo, E – Elemento, CE – Elemento que deriva de uma Escolha, G – Grupo, CG – Elemento de Grupo que deriva de uma Escolha, ID – ID da XML 1.0, RC – Restrição de Chave);
• Pai : Referência da tag pai daquela linha, baseado no código único;
• Tipo: Descreve o tipo básico do valor que deve ser passado para aquele campo (N = Número, C = Caractere, D = Data, xml = XML).
• Ocor. (Ocorrência) : Mostra o número mínimo e máximo de vezes que a tag deve aparecer na XML. Exemplo: 0-1 quer dizer que ela não é obrigatória, mas só pode aparecer uma vez, 1-1 quer dizer que é obrigatória e aparecer somente uma vez, 1-3 quer dizer que ela é obrigatória, mas só precisa aparecer uma vez e pode aparecer até 3 vezes. Ou seja, o primeiro número corresponde a ocorrência mínima e o segundo número a ocorrência máxima;
• Tam. (Tamanho) : Quantidade de caracteres que deve ter a tag. Pode ser referenciado através de número mínimo e máximo, como na ocorrência (ex: 1-4, entre um e quatro caracteres) ou através de apenas um número, especificando que deve ter aquela quantidade exata de caracteres.
• Dec. (Decimais) : Em caso de número, descreve a quantidade de casas decimais obrigatórias daquele número;
• Descrição / Obsevações : Explica alguma regra específica que deve ser aplicada àquele valor da XML

Vale lembrar que nenhuma tag pode ficar vazia. Se a tag não for obrigatória, ela simplesmente não deve ser impressa na XML.

Fique muito atento que as vezes, no banco, pode aparecer caracteres especiais (como tabulação) e deixar uma tag vazia, mesmo quando você fizer um < if (campo.valor == “” || campo.valor == null): break;>, para impedir que a tag não seja impressa.

Os Webservices

A Sefaz trabalha com Webservices XML. Há webservices específicos para homologação, produção e contingência (casos em que webservices principais estejam fora do ar). A maioria dos estados possuem os próprios webservices, outros usam os de outros estados.

Você pode verificar os links nos sites da Sefaz Nacional do NFe e do CTe. Os links para os serviços das NFEs são disponibilizados por seus municípios.

Quando você vai enviar uma XML de nota ou conhecimento para a Sefaz, você não envia somente a XML da nota, como também para verificar o status do serviço, consulta, cancelamento, etc. Essas XMLs possuem as informações necessárias para o servidor da Sefaz saber qual função o sistema deverá executar e os parâmetros necessários para uma resposta correta.

Validação da XML e Schemas

Schemas são arquivos XML que servem como base para validação de um outro XML. Os schemas descrevem as regras de validação baseadas, principalmente, em expressões regulares. Você deve passar pelo schema para validar a XML antes de ir enviar para a Sefaz. No entanto, quando a XML passar pelo webservice, ela passará pelo mesmo schema e dará uma resposta, porém essa resposta as vezes não vem completa e é necessário validar “no olho”.

Para facilitar, você pode colar a XML da sua nota pelo validador da Sefaz Virtual do Rio Grande do Sul. Irá funcionar para qualquer estado.

• Validador online NFe;
• Validador online CTe;

Obs. As vezes o validados do RS fica dando problema e não consegue validar. Basta recarregar a página que o problema tende a desaparecer.

Você pode baixar os schemas diretamente no site da Sefaz. Para NFSe, você vai ter que consultar, novamente, a Sefaz do município.

Comunicação

Por padrão, a comunicação ao Sefaz é feita através do protocolo SOAP 2. Ao montar a comunicação você deverá passar a URL do webservice, o caminho do certificado digital, a senha do certificado, a url de status e as XMLs necessárias para executar a tarefa que deseja. Erros durante a comunicação são comuns, principalmente quando há algum problema com o certificado digital ou quando o webservice da Sefaz encontra-se fora do ar.

Sempre verifique se o webservice o qual esteja tentando comunicação está no ar através dos sites da SEFAZ nacional no menu “Verificar Disponibilidade”.

Obs. Lembre-se de sempre colocar ?WSDL no final das URLs dos webservices (sim, a Sefaz usa servidores Windows).

Certificado Digital

O certificado digital é um documento criptografado que possui a assinatura da empresa. O certificado serve para autenticar a XML enviada como sendo realmente pertencente a empresa emissora da nota. Toda XML deve ser assinada através do certificado digital.

O certificado usado na Nota Fiscal Eletrônica e no Conhecimento de Transporte Eletrônico é o do tipo A1 e pode ser adquirido através de autoridades certificadoras autorizadas pela Sefaz, como por exemplo o Serasa. Os certificados são comprados pelas empresas emissoras de nota e podem ser utilizados para várias filiais da mesma empresa.

Vale salientar que os certificados são emitidos no padrão PKCS#12 (.pfx) e quem usa servidores Linux/Unix/Mac devem converter os certificados para PEM (.pem). Para isso há conversores online ou você pode fazer diretamente pelo Terminal através do openssl.

Obs. Sempre abra os arquivos PEM em um editor de texto e verifique os Bag Attributes e todas as Keys estão preenchidas, pois as vezes elas não estão com esses valores e isso causa erros sem resposta.

Homologação, Produção e Contingência

Após o possuir o certificado, o contador da empresa emissora do NFe/CTe deve, junto a Sefaz de seu estado, autorizar a empresa para ambiente de homologação (ou seja, ambiente de testes), a autorização sai em torno de 24 horas depois do pedido feito pelo contador. Cada filial deverá ter autorizada e homologada individualmente, porém o certificado, como dito antes, pode ser o mesmo.

No ambiente de homologação, o sistema deve estar configurado com os webservices de homologação do estado da empresa (homologação NFe, homologação CTe). A XML deve estar preenchida com os dados de homologação. Verifique a parte de homologação no manual para entender como devem ser esses dados.

Após a autorização de homologação, você deve fazer a emissão e autorização de no mínimo 10 notas/conhecimentos, 5 cancelamentos e 5 inutilizações (falaremos disso abaixo). Somente após fazer isso, você pode pedir para o contador autorizar a empresa a emitir nota em ambiente de produção. Faça quantos testes forem necessários até sentir-se seguro. Erros em Notas podem causar problemas muito sérios para as empresas, principalmente quanto a sonegação de impostos.

Lembre-se de, quando passar a nota para o ambiente de produção, mudar os webservices para o ambiente de produção. O tempo para autorizar a empresa para o ambiente de produção é de mais 24 horas.

Obs. Se a empresa estiver com dívidas muito altas de impostos ou algum problema de cadastro e atualização de dados na Sefaz, você pode ter problemas durante a emissão da nota/conhecimento. Nesse caso, consulte o contador ou administrador da empresa para que ele tome as devidas providências. Como é um erro sem retorno, no caso de suspeitar desse problema, consulte o e-CAC.

No caso dos webservices estarem fora do ar ou a empresa não disponibilizar de internet naquele momento, é necessário emitir a Nota Fiscal em contingência. Há ao todo 3 formas de continência. Os servidores de contingência estão disponíveis no site da Sefaz Nacional. Exceto no caso do emitente estar sem internet, o próprio servidor de continência envia os dados da NFe/CTe para a Sefaz Nacional. Isso pode demorar cerca de 2 horas depois que o servidor do estado voltar ao normal.

Emissão da Nota/Conhecimento Eletrônico

Para poder emitir uma Nota ou Conhecimento, você precisará gerar uma chave única para esta. A chave é gerada a partir da seguinte lógica:

O dígito verificador é um número que é gerado por um algoritmo específico a partir do número restante. Basicamente, multiplica-se o número da base pelos decimais equivalentes de 2 a 9, soma o resultado e pega o resto da divisão do resultado pro 11, por fim, pega o 11 e subtrai o resto. Se o resultado for 10, deve-se pássaro 0. É fácil encontrar o algoritmo para a linguagem que você trabalha no Google. Abaixo o código em PHP.

function calculadDigitoVerificador($chave43) {

   $multiplicadores = array(2,3,4,5,6,7,8,9);

   $i = 42;

   while ($i >= 0) {

       for ($m=0; $m<count($multiplicadores) && $i>=0; $m++) {

           $soma_ponderada+= $chave43[$i] * $multiplicadores[$m];
           $i--;

       }

   }

   $resto = $soma_ponderada % 11;

   if ($resto == '0' || $resto == '1') {

       return 0;

   } else {

       return (11 - $resto);

  }

}

Com a chave de 44 caracteres pronta e a XML preenchida corretamente, você já pode emitir a Nota Fiscal / Conhecimento Transporte. Você receberá como resposta a XML validada e o retorno  da Sefaz avisando se a nota foi autorizada, denegada (quando há algum problema com o emitente)  ou rejeitada e precisa ser corrigida.

Lembre-se que esses documentos fiscais devem seguir uma seqüência numérica que deve ser usada dentro de cada série.

Obs. Os CTe’s não são emitidos por agências, mas sim por filiais, por isso fique atento a sequência numérica.

Consulta

Você pode consultar a nota / conhecimento através do site da Sefaz Nacional ou diretamente na Sefaz de seu estado. Para isso, basta você entrar com o número da chave.

Há um webservice específico para consulta para permitir que o seu sistema mostre para o usuário a situação daquele documento.

Vale lembrar que se você for consultar na Sefaz Nacional pode ser que a nota não apareça em até cerca de duas horas após a emissão. A consulta feita na Sefaz estadual tende a ser na hora.

Carta de Correção

A carta de correção é um documento fiscal que faz adendos a uma nota fiscal/cte emitida. Esse documento anexa informações ao documento dentro da Sefaz. Para o sistema, será emitido um novo XML de resposta contendo as informações da correção.

Alguns estados não permitem a emissão da correção. No caso, o usuário deverá cancelar o documento e emitir outro.

Cancelamento

Se uma compra for cancelada ou houver um erro que não pode ser resolvido através da carta de correção, você pode fazer o cancelamento da Nota/Conhecimento através do webservice de EVENTO, passando a função de cancelamento.

Geralmente, você tem até 24 horas para cancelar uma Nota Fiscal Eletrônica a partir da hora de emissão da mesma. Porém, alguns estados só permitem o cancelamento em até 3 horas. Para o CTe há uma semana de prazo de cancelamento.

Em caso de necessitar cancelar a nota ou cte após o prazo terminado, avise ao contador da empresa emissora. Este deverá enviar um documento a Sefaz do estado para resolver o problema e uma pequena taxa deverá ser cobrada.

Inutilização

Se por algum motivo você precisar pular o número de uma nota, seja por esquecimento, erro no sistema, etc., você deverá inutilizar aquele número.

A Nota/CTe segue um número contínuo dentro de cada série. Por isso, utilize o webservice de inutilização para pular algum número da sequência. Alguns estados não possuem servidor de inutilização (consulte o site da Sefaz Nacional), nesse caso, consulte o contador da empresa emitente e ele deverá enviar um documento para a Sefaz, em papel, para inutilizar esses números.

DANFE/DACTE

O Danfe / Dacte são os documentos impressos NÃO FISCAIS contendo a informação das Notas/Conhecimento. Descrevo o não fiscal porque o que tem realmente valor fiscal são as XMLs que devem ser salvas por 5 anos. No entanto o Danfe é necessário para o emissor da nfe passar os dados da nota impressos para o cliente. Já o Dacte é OBRIGATÓRIO que o motorista/piloto/ferroviário ande junto com os Danfes dos produtos que estão sendo transportados.

Nos manuais da Sefaz há descrições de que como deve ser o leiaute do Danfe/Dacte. Estes nada mais são do que uma apresentação impressa e legível dos dados da XML. Você pode usar o DOM Document sem problema para ler a XML e gerar o seu arquivo PDF.

Bibliotecas Prontas

Como as comunidades de programadores são enormes, há bibliotecas para as principais linguagens que possibilitam a rápida implementação de NFe, NFs e CTe no seu sistema. Porém mesmo com essas bibliotecas, diversas modificações são necessárias, principalmente quando sai uma nova nota técnica.

• PHP;
• Python;
• Java;
• Delphi;

Se você conhecer outras bibliotecas, por favor deixe nos comentários para que eu possa atualizar o post.

Erros Freqüentes

Abaixo uma lista com algumas soluções dos erros mais freqüentes duvidosos, ou seja, que a resposta da Sefaz não deixa clara. Se você encontrar um erro que conseguiu solucionar, por favor deixe nos comentários para que possamos atualizar o post:

• Validação de XML – São os erros mais comuns. Geralmente possuem uma resposta com o nome da tag e a descrição que leva a expressão regular pelo esquema. A grande maioria das vezes são causadas por caracteres especiais ou problemas de validação no sistema para o preenchimento de dados ou por tags vazias. Solução: converta todas as suas strings para UTF8 e faça um “trim” para retirar espaçamentos em branco. Uma boa dica é retirar qualquer acento, til, caracteres especiais para evitar erros. Verifique também se o valor do campo da XML condiz com o descrito na tabela de laioute;
• Servidor da Sefaz Não Responde – Esse erro acontece normalmente quando o servidor da Sefaz está instável ou fora do ar. Verifique no Site da Sefaz Nacional a disponibilidade do servidor. Pode acontecer caso você tenha preenchido errado a URL do Webservice;
• Emissor não autorizado para emitir em ambiente de (…) – Acontece caso a empresa não esteja autorizada no ambiente que está tentando emitir ou quando você erra a URL do webservice de seu estado.
• Sem resposta – Os erros sem resposta costumam acontecer quando há um problema antes da comunicação. É mais comum acontecer quando há algum erro no certificado ou quando a URL do Webservice está preenchida errado. Verifique o certificado e o webservice de acordo com o descrito acima neste artigo. Instale o certificado na sua máquina e verifique pela URL do webservice se ela está acessível;
• Erros de comunicação / Não consegue acessar – Erro comum quando a senha do certificado está errada ou há um problema no certificado, como o descrito acima neste artigo. Verifique também se a XML está com o ambiente correto. Esse erro também pode acontecer quando a empresa está com algum problema junto a Sefaz;
• Hora de cancelamento anterior a hora de emissão – Esse erro é muito comum em servidores com os horários mal configurados. Por padrão, um servidor deve ter a sua hora configurada pelo GMT – 3 horas (ou 4 horas, dependendo da região do Brasil) mais o horário de verão (se  houver na região). Você pode até forçar isso via código, entretanto, alguns servidores mal configurados, ao invés de especificar a região (América do Sul/Brasil) podem estar com o horário do GMT errado contando já com menos 3 horas. Para resolver o problema (quando não tens acesso ao servidor), force, via código, a configurar o GMT correto e marcar como America do Sul Brasil. Em último caso, use o horário a partir da internet.

Vale lembrar que em breve todos os estados terão que usar também o NFCe, a Nota Fiscal de Consumidor Final Eletrônica. Essa nota substitui os cupons fiscais e apenas deverá ser impresso a descrição, o link e o QRCode para acesso do contribuinte. Os estados estão adotando o NFCe aos poucos no ano de 2016.

Claro que por se tratar de um vídeo não é tão fácil ficar acompanhando o código. Por isso mesmo, estamos disponibilizando aqui o código para que você possa entender.

Aproveite e deixe um comentário aqui em baixo, ou no YouTube e assine o nosso canal!

Script para criar a tabela no postgres:

CREATE TABLE jogos
(
id serial NOT NULL,
nome text,
console text,
preco numeric(10,2)
)

dados.php:

/**
 * Tutorial jSON
 */

//Definir formato de arquivo
 header('Content-Type:' . "text/plain");

$host = "localhost"; // IP do Banco
 $user = "postgres"; // Usuário
 $pswd = "postgres"; // Senha
 $dbname = "tutoriais"; // Banco
 $con = null; // Conexão

$con = @pg_connect("host=$host user=$user password=$pswd dbname=$dbname") or die (pg_last_error($con));

//@pg_close($con); //Encerrrar Conexão

if(!$con) {
 echo '[{"erro": "Não foi possível conectar ao banco"';
 echo '}]';
 }else {
 //SQL de BUSCA LISTAGEM
 $sql = "SELECT * FROM jogos ORDER BY console";
 $result = pg_query($sql); //Executar a SQL
 $n = pg_num_rows($result); //Número de Linhas retornadas

if (!$result) {
 //Caso não haja retorno
 echo '[{"erro": "Há algum erro com a busca. Não retorna resultados"';
 echo '}]';
 }else if($n<1) {
 //Caso não tenha nenhum item
 echo '[{"erro": "Não há nenhum dado cadastrado"';
 echo '}]';
 }else {
 //Mesclar resultados em um array
 for($i = 0; $i<$n; $i++) { $dados[] = pg_fetch_assoc($result, $i); } echo json_encode($dados, JSON_PRETTY_PRINT); } } ?>

index.html:

<!DOCTYPE HTML>
<html lang="pt-br">
	<head>
		<meta charset="UTF-8">
		<link rel="icon" type="favicon.png" />
		<link rel="stylesheet" type="text/css" href="estilo.css">
		
		<!--jQuery-->
		<script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script>
		<!--Script-->
		<script src="script.js" type="text/javascript"></script>
		
		
	</head>
	<body onload="carregarItens()">
		<section>
			<h1>PortilloDesign Tutorial JSON + PHP</h1>
			<!--Área que mostrará carregando-->
			<h2></h2>
			<!--Tabela-->
			<table id="minhaTabela">
				<caption>Cadastro de Jogos</caption>
				<thead>
					<th>ID</th>
					<th>Jogo</th>
					<th>Console</th>
					<th>Valor</th>
				</thead>
				<tbody>
				</tbody>
			</table>
		</section>
	</body>
</html>

script.js:

/**
* Capturar itens do banco de dados
*/
function carregarItens(){
	//variáveis
	var itens = "", url = "dados/dados.php";

    //Capturar Dados Usando Método AJAX do jQuery
    $.ajax({
	    url: url,
	    cache: false,
	    dataType: "json",
	    beforeSend: function() {
		    $("h2").html("Carregando..."); //Carregando
	    },
	    error: function() {
		    $("h2").html("Há algum problema com a fonte de dados");
	    },
	    success: function(retorno) {
		    if(retorno[0].erro){
			    $("h2").html(retorno[0].erro);
		    }
		    else{
			    //Laço para criar linhas da tabela
			    for(var i = 0; i<retorno.length; i++){
				    itens += "<tr>";
				    itens += "<td>" + retorno[i].id + "</td>";
				    itens += "<td>" + retorno[i].nome + "</td>";
				    itens += "<td>" + retorno[i].console + "</td>";
				    itens += "<td>" + retorno[i].preco + "</td>";
				    itens += "</tr>";
			    }
			    //Preencher a Tabela
			    $("#minhaTabela tbody").html(itens);
			    
			    //Limpar Status de Carregando
			    $("h2").html("Carregado");
		    }
	    }
    });
}