Categoria: Programação

Como adicionar e remover dinamicamente campos HTML em um Formulário? (Javascript puro)

O Javascript nos permite criar conteúdos dinâmicos e podemos usar isso para adicionar remover e adicionar elementos de acordo com as opções do usuário. Dados como informações sobre dependentes, links de mídias sociais, e-mails adicionais, etc. são curtos e não fazem sentido criarmos um formulário separado apenas para estes. Por isso, é interessante incluirmos a opção de adicionar diretamente esses campos em um subformulário dinâmico.

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

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.

14 de fevereiro de 2021

Fim do Flash – O que fazer com minha aplicação Flash?

Vou entrar neste assunto apenas uma vez porque eu vi muitos coleguinhas stressados com isso. Contantemente eu tenho visto perguntas como: “Qual navegador ainda vai rodar Flash?”, “Como faço com a minha aplicação Flex?”, “Tem como converter Flex ou Flash para Javascript”?

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á.

18 de janeiro de 2021

Como criar um uploader drag & drop, AJAX com porcentagem e Javascript puro?

Eu sei, o título é grande, mas trata-se de uma tecnologia muito útil quanto a usabilidade. A ideia é criar, da forma mais simples possível um uploader que mostre a porcentagem do que está sendo enviado, com múltiplos arquivos. Porém, não apenas isso, mas da forma mais pura possível, sem a necessidade de frameworks, bibliotecas de terceiros ou pre-processadores. Em nosso tutorial, usaremos PHP no back-end, mas você pode usar a linguagem que melhor lhe adequar. Abaixo você pode testar um exemplo:

Clique ou arraste o arquivo

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.

Download

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.

Download

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.

1 de fevereiro de 2019

Como destacar (hightlight) uma célula de uma Tabela HTML após uma busca

Melhorar a experiência do usuário é sempre importante. E, muitas vezes, resultados de pesquisas tendem a ser muito grandes, principalmente em pesquisas semânticas. Por que então não destacar o elemento buscado para facilitar que o usuário saiba a linha e/ou coluna correta? E, como sempre, Javascript puro.

Exemplo

Coluna A	Coluna B	Coluna C
abacaxi	manga	limão
coelho	espinafre	jerimum
tomate	cebola	rapadura

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.

20 de janeiro de 2019

Como tirar uma foto usando a Webcam (Javascript + HTML)?
Disclaimer: Provavelmente a funcionalidade de webcam não está acessível via navegador interno de aplicativo (como o navegador interno do app do Facebook ou outro app mobile). Experimente direto em um navegador (mobile ou desktop).

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:

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.
Follow @velhobit
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.
19 de janeiro de 2019
Como redirecionar seu site / página por localização
As vezes você precisa trabalhar com sites ou projetos multi-idiomas. Alguns desses projetos carregam dinamicamente a tradução ou possui páginas específicas em outro idioma. Redirecionar automaticamente para o conteúdo específico da região é um comportamento fundamental para uma boa experiência do usuário.

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 😀
25 de agosto de 2018

Dicas para Otimizar o Console Javascript do Navegador

Designers e desenvolvedores constantemente precisam debugar seus sistemas para encontrar erros ou relatar informações para outros desenvolvedores da equipe. Para otimizar o trabalho do profissional web, o Console do navegador de sua preferência permite adicionar diversas opções e comandos.

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.

String	Descrição
%o or %O	Exibe o objeto e permite você visualizar o objeto ao clicar nele.
%d or %i	Exibe um inteiro.
%s	Apenas uma string.
%f	Exibe um ponto flutuante

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.

16 de fevereiro de 2018

BitMail – Projeto de Envio de Mailmarketing em Lote
Download

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 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
2 de janeiro de 2018

Categoria: Programação

HTML

Javascript

CSS

Finalizando

O que fazer com meu sistema?

Solução 1 – Médio Prazo

Solução 2 – CurtoPrazo

Update – Solução 3 – Ruffle

HTML

CSS3

Javascript

PHP

Exemplo

HTML

CSS

Javascript

Exemplo:

HTML5

Javascript

PHP

Detecção por Geolocalização

Javascript

Como saber se está funcionando?

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

Concluindo

Erros e Alertas

Identação

Tabelas

Calcular Tempo

Strings de Substituição

Concluindo

Sobre o Projeto

Como Enviar E-mails?

Requerimentos