Codificando, renderizando e fazendo download de uma imagem em base64 com javascript

Fala pessoal, esta semana tive de desenvolver uma funcionalidade bem bacana no projeto que estou atuando, como achei interessante gostaria de compartilhar este conhecimento.
Então vou ensinar vocês:
– Converter uma imagem para base64
– Renderizar a imagem na sua página
– Fazer o download

Mas o que é base64?

Base64 é um método para codificação de dados para transferência na Internet (codificação MIME para transferência de conteúdo). É utilizado frequentemente para transmitir dados binários por meios de transmissão que lidam apenas com texto. Por exemplo os envios de anexos por e-mail utilizam este método.

Convertendo arquivo de imagem em base64

Primeiramente vamos escrever o código html para fazer o upload do arquivo:

<div>
   <label>Selecione uma imagem</label>
</div>
<div>
   <input type="file" accept="image/*" (change)="processar($event)">
</div>

O método processar é responsável por interpretar o arquivo de imagem que fizemos upload, então é onde iremos aproveitar para converter nosso arquivo e recuperar as informações para podermos renderizar/fazer download do mesmo:

arquivoSelecionado: string; // guardará o src da imagem para renderizar
arquivoFormatado: string; // guardará o valor codificado em base64
arquivoNome: string;
arquivoExtensao: string;

processar(event) {
    // Recuperando a imagem, por padrão vem em uma lista
    const file = event.target.files[0];

    // Recuperando o nome do arquivo e extensão
    const arquivo: string = event.target.value;

    // Removendo o path C:\fakepath\ do nome da imagem
    this.arquivoNome = arquivo.split('.')[0].slice(0, 12);
    this.arquivoExtensao = arquivo.split('.')[1];

    // Objeto responsável por interpretar um arquivo
    const reader = new FileReader();

    // Este evento é chamado cada vez que a operação de leitura é completada com sucesso
    reader.onload = this._handleReaderLoaded.bind(this);

    // Inicia a leitura do conteúdo do Blob(objeto do tipo arquivo) especificado, uma vez finalizado, o atributo result conterá os dados raw binários do arquivo como string
    reader.readAsBinaryString(file);
  }

  _handleReaderLoaded(readerEvt) {
   // o método btoa codifica em base64
   const base64 = btoa(readerEvt.target.result);
   this.arquivoFormatado = base64;

   // src para renderizar a imagem
   this.arquivoSelecionado = "data:image/jpeg;base64," + base64;
  }

Exemplo de arquivo convertido em base64:

Renderizando a imagem

Agora que já temos nosso arquivo codificado em base64, conseguimos renderizar a imagem na nossa página, utilizando a variável arquivoSelecionado.

<div class="d-flex justify-content-center">
   <img [src]="arquivoSelecionado" alt="Selected Image"/>
</div>

Fazendo download do arquivo

Primeiro vamos criar o HTML do botão:

<button type="button" class="btn m-btn--air btn-outline-primary btn-sm mr-2" (click)="download()">
   <span>Download</span>
</button>

Agora vamos para o código responsável pelo download:

download() {
    // o metodo atob decodifica base64
    const binaryString = atob(this.arquivoFormatado);
    const bytes = new Uint8Array(binaryString.length);
    // convertendo em array buffer do tipo Uint8Array
    const arrayBuffer = bytes.map((byte, i) => binaryString.charCodeAt(i));

    this.criarArquivoParaDownload(arrayBuffer);
  }

  criarArquivoParaDownload(body) {
    // A partir do array buffer criamos o arquivo para download
    const blob = new Blob([body]);
    const fileName = `${this.arquivoNome}.${this.arquivoExtensao}`;

    // Validação para navegadores
    if (navigator.msSaveBlob) {
      // IE 10+
      navigator.msSaveBlob(blob, fileName);
    } else {
      const link = document.createElement('a');
      // Navegadores que suporta atributo de download do HTML5
      if (link.download !== undefined) {
        // criando um atributo hidden, para simular o click e disparar o download
        const url = URL.createObjectURL(blob);
        link.setAttribute('href', url);
        link.setAttribute('download', fileName);
        link.style.visibility = 'hidden';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }
    }

Clicando agora no botão de Download, o arquivo será baixado pelo seu navegador!
Com isso terminamos o nosso post de hoje!
Espero que este material sirva de apoio para vocês algum dia 🙂

A riqueza de um status review

O que é um status review? Ou revisão de status? Ou task report? O nome pode variar conforme o locutor, mas a definição é o propósito é o mesmo.

Status Review é um resumo daquilo que você ou sua equipe estão fazendo, pretendem fazer ou já fizeram. Mas com tantas ferramentas, métricas e metodologias por que eu tenho que saber ou fazer isto? Não precisa! Ninguém vai colocar uma arma na sua cabeça enquanto toma o seu cafezinho e te obrigar a falar como está a situação do seu projeto/tarefa. Porém caso o seu diretor/cliente te encontre no elevador e te pergunte meio que pretensiosamente como está o andamento do seu projeto, como seria sua resposta?

Está bom, estamos indo bem!

Acho que vamos conseguir entregar!

A minha parte está feita!

Para um gestor ou alguém de negócios a qualidade da informação tem um peso muito grande, independentemente de qual metodologia de projeto utiliza. Como por exemplo:

Segundo as nossas reuniões de equipe, posso dizer que temos um volume considerável de funcionalidades entregues e já homologadas pelo cliente, na qual tivemos um feedback bem positivo. Inclusive do que foi entregue tivemos poucos problemas e já estamos trabalhando em paralelo nas melhorias de algumas coisas. Quanto ao prazo não sei dizer, já que quem coordena a entrega é o meu Gestor, mas garanto que estamos indo bem.

Consegue perceber o mesmo “Estamos indo bem” com diferentes pesos? No exemplo acima você fala que está tudo bem dando um embasamento o porque acha que está tudo bem, não se compromete com prazos, direciona o questionamento para o seu Gestor, mas mostra o quão envolvido com o projeto está. Neste exemplo obviamente estamos trabalhando com o mundo perfeito onde tudo está OKAY, mas a ideia é esta.

Caso encontre dificuldades, questione o seu líder sobre status das tarefas, andamento do projeto e se ele perguntar o por que, diga que quer saber o como está o andamento e quer se sentir envolvido. Nada melhor do que trabalhar com objetivos, saber o que fez, o que está fazendo, quando terminar tarefa atual qual será o próximo e obviamente o porque está fazendo aquilo. Dentre toda minha experiência profissional não me vi fazendo algo simplesmente porque alguém pediu, aquilo precisava me fazer sentido, eu tinha a necessidade de saber o propósito por trás para poder me dedicar, propor melhorias e ter uma melhor noção de tempo baseado na dificuldade e complexidade do negócio.

Fica a dica, não espere que alguém faça isso por você. Se organize, crie suas prioridades e sempre se mantenha informado. Um bom líder não é aquele que tem um cronograma que diz o que cada um deveria estar fazendo ou não. Um bom líder faz o time dele saber o propósito pelo qual lutam, deixam todos a par do que está acontecendo, treina e capacita todos para serem os próximos líderes.

Espero ter ajudado! Dúvidas, críticas e sugestões são muito bem vindas!!

Entendendo um pouco do conceito de REST e protocolo HTTP

Sabe-se que atualmente (2019) boa parte das aplicações, empresas e serviços se comunicam através de APIs, que não nada mais são que serviços expostos na internet para consumo de terceiros. Permitindo facilmente que o mesmo serviço possa ser consumido por um aplicativo móvel, um site de internet ou um aplicativo em seu desktop, desde que tenha acesso à internet.

Futuramente iremos debater sobre outros meios de comunicação e integração como SOAP e GraphQL, mas vamos do princípio mais básico.

O que é REST?

REST é um acrônimo para REpresentational State Transfer, ou seja, Transferência de Representação de Estado. Que nada mais é do que troca de informações utilizando o protocolo HTTP.

Um pouco de HTTP

As requisições feitas por uma RESTful API são através do protocolo HTTP onde temos:
– Endpoint: endereço do serviço
– Verbo HTTP: ação a ser tomada a partir do endpoint
– Payload: corpo da requisição podendo ser JSON ou XML

Dentre os verbos / métodos possíveis: Referência

  • GETO método GET solicita a representação de um recurso específico. Requisições utilizando o método GET devem retornar apenas dados.
  • HEAD O método HEAD solicita uma resposta de forma idêntica ao método GET, porém sem conter o corpo da resposta.
  • POST O método POST é utilizado para submeter uma entidade a um recurso específico, frequentemente causando uma mudança no estado do recurso ou efeitos colaterais no servidor.
  • PUT O método PUT substitui todas as atuais representações do recurso de destino pela carga de dados da requisição.
  • DELETEO método DELETE remove um recurso específico.
  • CONNECT O método CONNECT estabelece um túnel para o servidor identificado pelo recurso de destino.
  • OPTIONSO método OPTIONS é usado para descrever as opções de comunicação com o recurso de destino.
  • TRACE O método TRACE executa um teste de chamada loop-back junto com o caminho para o recurso de destino.
  • PATCHO método PATCH é utilizado para aplicar modificações parciais em um recurso.

HTTP Status, toda requisição HTTP retorna seu código de status nos avisando se a requisição foi processada com sucesso, se teve retorno, se deu algum tipo de erro e etc. Estes códigos apesar de programáveis (seu backend pode definir que tipo de HTTP Code retornar), são ótimos indícios de como sua API se comporta.

Exemplo:
> 1xx Informativo
> 2xx Sucesso
> 3xx Redirecionamento
> 4xx Erro lado do cliente
> 5xx Erro lado do servidor

Referência completa: Link

JSON x XML

É possível utilizar tanto XML quando JSON para requisições ou respostas em serviços REST. Porém comumente o uso de JSON por ser muito mais leve e de fácil entendimento, leitura e menos verboso que XML. Mas não há uma regra e sim varia conforme a necessidade de sua aplicação ou cliente.

//JSON de Cliente
{
  name: 'John',
  age: 33,
  gender: 'M'
  children: [
    {
      name: 'Mike',
      age: 5,
      gender: 'M'
    }
  ]
};
//XML de Cliente (Forma Representativa)
<client>
  <name>John</name>
  <age>33</age>
  <gender>M</gender>
  <children>
    <child>
      <name>Mike</name>
      <age>5</age>
      <gender>M</gender>
    </child>
  </children>
</client>

REST x RESTful

De uma forma bem resumida, podemos dizer que REST é o conceito arquitetural e RESTful é forma de aplicar este conceito de forma prática.

RESTful API

Uma vez definido nosso endpoint lá no backend, utilizaremos (tese) este mesmo endpoint para operações diferentes dentro da nossa aplicação e a melhor forma de exemplificar é utilizando serviço de CRUD.

http://{my-app.com}/api/{domain}

Seguindo o exemplo acima digamos que seu domínio seja de Cliente e partir dai queremos executar determinada operação através dos verbos disponíveis, olha que prático:

GET: http://{my-app.com}/api/client //listar todos
GET: http://{my-app.com}/api/client/{id} // recuperar por id
DELETE: http://{my-app.com}/api/client/{id} // remove client por id
PUT: http://{my-app.com}/api/client //atualizar, porém é necessário body com os dados cliente
POST: http://{my-app.com}/api/client //salvar, porém é necessário body com os dados cliente

Exemplo de payload em JSON:

const client: Client = {
  name: 'John',
  age: 33,
  role: 'user',
  gender: 'M'
};

Resumo

Espero ter ajudado em dar um overview sobre conceitos básicos e práticos de REST, HTTP com REST, RESTful, JSON. Em um futuro próximo faremos alguns tutorias para consolidar o conceito com a prática real. Mas antes de fazer tutoriais é necessário saber o porque está usando aquela abordagem, se realmente se aplica ao cenário que está enfrentando e por ai. Até a próxima!

O que é Node.js?

Fala pessoal, hoje iremos falar um pouco sobre Node.js, já ouviram falar?
Acredito que sim! Pois a tecnologia vem dominando cada dia mais o mercado. Então vamos lá!

O que é Node.js?
Resumidamente falando, é uma plataforma utilizada para construir aplicações web escaláveis de alta performance com JavaScript.
A tecnologia foi construída com base no interpretador V8 JavaScript Engine feita nada mais, nada menos do que pela Google. A sua arquitetura é orientada a eventos ou seja, uma rotina fica monitorando até que o evento programado seja acionado assim retornando uma resposta.

Mas qual a vantagem de utilizar o Node.js?
O Node.js trabalha de forma assíncrona e sem bloqueios, o que significa que não é necessário esperar uma requisição terminar para iniciar outra. Isso é uma arma muito poderosa, pois consegue lidar com um grande volume de requisições e garante rapidez nas respostas .
A sua leveza também é um destaque, pois não é necessário grandes recursos de utilização do computador .

Node.js X NPM
NPM ( Node Package Manager ) é um repositório online para publicação de código aberto para o Node.js, e também através dele é possível instalar os pacotes contidos neste repositório.
Então por possuir um grande repositório que fornece pacotes de códigos reusáveis gratuitamente via NPM é uma outra grande vantagem do Node.js, ou seja, caso precise fazer integrações com outros sistemas e/ou banco de dados é possível que já exista a solução implementada.

Tudo isso é muito bom, mas e as desvantagens?
Por trabalhar de forma assíncrona, é preciso tomar cuidado com o famoso callback hell, que significa ter várias camadas de retorno, uma dependendo da outra, assim deixando muito complexo o entendimento para outros programadores e para manutenções de código.
Não é recomendado a utilização do Node.js, para sistemas que tem lógicas muito complexas e necessitam de uma utilização maior da CPU.

Espero que algumas dúvidas em relação a tecnologia tenha sido esclarecida!
Em breve faremos alguns tutoriais desde a instalação até a utilização da tecnologia 😉

Para mais informações: https://nodejs.org/en/



Aprender sem esquecer: utilizando técnicas de fixação e memorização

Como assim? Qual a mágica por trás de não esquecer o que aprendeu mesmo sem praticar? Seja no trabalho, idioma, um curso ou até uma receita de bolo.
Pois é, pode parecer estranho no início, mas tudo fará sentido no final. Pouco tempo atrás estava nesta exata situação onde tinha dificuldades de fixar coisas que acabei de aprender / estudar, mas devido o não exercício ou prática dentro da minha rotina eu acabava esquecendo.
Então após um insight comecei pesquisar se havia técnicas para ter um aprendizado melhor e fixar o conteúdo. E não é que existia?!

É muito normal aprendermos muitas coisas visando nossa carreira profissional, porém nem sempre conseguimos aplicar no nosso dia a dia de trabalho e acabamos esquecendo o conhecimento adquirido.

Vou fazer um breve overview sobre um curso que fiz e colocarei o link no final do post para os interessados (não ganharei comissão por isso, só estou compartilhando por ser um conteúdo muito foda!).

Então vamos lá!
Neste curso eu aprendi a forma correta de fazer anotações, saindo do tradicional com a folha na vertical e indo para horizontal, não focando em anotar palavra por palavra, mas apenas palavras chaves que funcionam como gatilho para trazer o que foi aprendido novamente. Os períodos em que devemos fazer revisões para armazena-las na memória de curto e longo prazo. E técnicas de redução de informação e memorização, algumas delas sendo: a mnemotécnica, mapas mentais e entre outras.

Vou deixar aqui um exemplo que eu achei muito legal, tente decorar a seguinte lista de palavras:
– Praia
– Mar
– Peixes
– Avião
– Nuvem
– Vendedor
– Gaivotas
– Carrinho
– Milho

Para ficar mais fácil imagine a seguinte cena em sua mente, você está na praia, olha para o mar azul, cheio de peixes pulando, quando de repente um avião surge de dentro de uma nuvem e do nada você escuta um vendedor gritando para afastar as gaivotas de seu carrinho de milho.

Não foi mais fácil se lembrar desta maneira, recordando esta cena? Pois é, a mnemotécnica é responsável por isto!

Caso tenha o interesse de fazer este curso, segue o link:
https://www.udemy.com/hiper-memoria-hiper-aprendizagem/

Espero que esse post tenha servido de alguma ajuda 🙂

Como montar um plano de estudos?

Hoje iremos abordar um tema importante para você (assim como eu) que está em constante aprendizado, como se organizar e montar um plano de estudos de forma que consigamos seguir a risca?! Para isso vamos dividir o assunto em 3 pontos:
– Interesse;
– Objetivo;
– Comprometimento.

Qual o seu interesse no tema escolhido para estudo?

Ao escolher o tema de estudo, seja técnico, didático, financeiro ou qualquer outro do seu interesse. É interessante qualificar o seu nível de interesse, não necessariamente motivação, as vezes pode estar relacionado à uma necessidade momentânea, mas nem sempre é o que gostaria de estar estudando naquele momento.

Como qualificar seu nível de interesse? Normalmente a resposta desta pergunta está alinhada como objetivo a ser atingido, quais benefícios palpáveis a conclusão deste estudo te trará a curto prazo?

Isto é importante saber, pois quando maior o nível de interesse, maior vai ser sua dedicação / comprometimento, vai ter maior nível de absorção do tema e terá menos chances de interrupção. Pense nisso!

Defina seu objetivo inicial (META)!

Uma vez que o tema foi escolhido, preciso definir metas para que seja possível concretizar o conhecimento ainda recente em sua mente. Ao definir uma meta/objetivo ao concluir seu cérebro gera uma sensação de recompensa fazendo com que aquilo seja ainda mais prazeroso para você.

Digamos que está estudando sobre finanças / economia básica e seu objetivo é conseguir organizar seus gastos mensais para provisionar férias futuras. Ou está estudando uma linguagem de programação para fazer um sistema de cadastro / estoque ou app de celular. Ou quero terminar este curso de 40 horas em 2 dias. Por ai vai e o importante é que se aplica a quase tudo.

Quando definimos um objetivo é interessante que ele seja alcançável ou isto te deixará com uma sensação de frustração, fazendo com que perca vontade e animo de continuar estudando.

Quão comprometido está?

É lindo dizer que vai começar estudar algo, mas quando realmente vai? Hoje? Agora? Próxima semana? Com quem? Sozinho? Já pesquisou o conteúdo? E depois vai fazer o que?

Imagina se ao dizer que está afim de aprender algo novo, um colega te rebate fazendo este monte de perguntas, saberia responder de imediato? Talvez sim, ou não quem sabe… Cada um tem seu “Q” de genialidade, mas vamos supor que a resposta seja não.

Bom, partindo desde princípio precisamos nos organizar e definir o nosso comprometimento com o estudo em questão e como fazer isso? Para facilitar a abstração vou dividir novamente em tópicos:
– Em quanto tempo quero terminar os meus estudos?
– Qual o tempo que disponho para estudar?
– Definido tempo de término e tempo dedicado (frequência), assinar um compromisso de seguir este planejamento.

Por exemplo, pegou um curso online com carga horária de 40 horas. Se tiver 8 horas diárias para se dedicar ao curso, em uma semana terminaria os estudos, correto? Em tese sim, mas na prática não dispomos de tal tempo livre. Uma técnica que uso é quantificar meu tempo na semana, pois desta forma caso não consiga cumprir minha carga horária de estudos em dia posso compensar em outro. Como isto funciona? Eu separo 10 horas de estudo por semana, algo em torno de 2 horas por dia de segunda a sexta. Porém caso eu tenha algum imprevisto familiar ou trabalho, posso compensar as horas no final de semana, contanto que o Mindset deve ser claro: “Devo cumprir as 10 horas de estudo semana, na qual me comprometi em fazer”.

Seguindo o exemplo acima, se eu tenho 10 horas de compromisso estudo e curso que escolhi tem carga horária de 40 horas, posso dizer que devo terminar no máximo em 1 mês. Logicamente o meu próximo curso só estarei disponível para estudar daqui 1 mês. Ou caso tenha maturidade suficiente para fazer estudar dois assuntos paralelos e dividir seu tempo em temas distintos fica a seu critério.

Por hora é isso pessoal, espero ter ajudado, nos vemos no próximo post!