Escolha uma Página
Salvando informações com o Session e o Local Storage no React Js.

Salvando informações com o Session e o Local Storage no React Js.

O Local Storage e o Session Storage são espaços reservados pelos navegadores para o salvamento de informações.

Essas são alternativas interessantes para quando você precisa que as informações permaneçam salvas mesmo após o usuário recarregar a página.

A principal diferença entre o Local Storage e o Session Storage é que o Local Storage salva as informações de forma permanente, até que a aplicação as remova ou o usuário limpe os dados do seu navegador.

O Session Storage salva os dados apenas enquanto a sessão do usuário estiver ativa, ou seja, enquanto a página da sua aplicação estiver aberta.

Caso você abra sua página em uma nova janela, uma nova sessão será criada e os dados antigos não serão acessíveis.

Como utilizar

Tanto o Local Storage, como o Session Storage, possuem 3 funções principais, são elas:

setItem(‘@nome-do-app/chave’, value): Responsável por guardar um novo valor, nessa função você deve passar 2 valores, o nome do seu item e valor que será guardado.

Como qualquer aplicação pode salvar informações no Local Storage, para não ter seus dados sobrescritos, é uma boa prática salvar seus dados com um nome único. Geralmente é utilizada a seguinte sintaxe: @nome-do-app/chave

getItem(‘@nome-do-app/chave’): Responsável por recuperar um dado que foi salvo no localStorage, nessa função você precisa passar a chave do item que você está querendo recuperar. Caso não exista um valor salvo, será retornado null.

removeItem(‘@nome-do-app/chave’): Responsável por remover um dado que foi salvo no localStorage, nessa função, assim como na de cima, você precisa passar a chave do item que você está querendo remover.

Todas as funções acima valem tanto para o Local Storage, como para o Session Storage. Você pode utiliza-los da seguinte maneira:

// Local Storage
localStorage.setItem('@nome-do-app/chave', valor);
localStorage.getItem('@nome-do-app/chave');
localStorage.removeItem('@nome-do-app/chave');
// Session Storage
sessionStorage.setItem('@nome-do-app/chave', valor);
sessionStorage.getItem('@nome-do-app/chave');
sessionStorage.removeItem('@nome-do-app/chave');

Para estes exemplos, foi utilizado o Local Storage, para utilizar o Session Storage, basta trocar localStorage por sessionStorage.

Cuidado! O Local Storage e o Session Storage são locais onde todas as aplicações/sites têm acesso, então uma aplicação mal-intencionada pode facilmente ter acesso aos seus dados, por isso, você não deve salvar informações sensíveis.

Aplicação prática

Para vermos tudo isso em prática, criaremos um projeto de boas vindas aos usuários logados.

Para isso, seguiremos alguns passos importantes para a construção da nossa aplicação

Passo #1: Criação do projeto

Para começamos, criaremos um projeto através do Create React App.

Você pode criar seu projeto através do comando abaixo:

create-react-app welcome

Com o processo finalizado, você pode entrar na pasta app que você criou e rodar o comando:

yarn start

Após alguns segundos, uma nova janela no seu navegador se abrirá, semelhante a essa:

Tela padrão de projetos criados através do CRA.

Passo #2: Instalação das bibliotecas

Agora, instalaremos as bibliotecas que usaremos no nosso projeto.

Para isso, dentro da pasta do seu projeto, rode o comando abaixo:

yarn add styled-components

O styled-components é a biblioteca que vai nos ajudar a estilizar nossa aplicação.


Passo #3: Configurações gerais

Em todos os projetos que eu crio utilizando Create React App, eu sempre gosto de fazer algumas configurações para deixar o projeto mais organizado.

Começaremos apagando alguns arquivos na pasta src, são eles:

  • App.css
  • App.test.js
  • index.css
  • logo.svg
  • serviceWorker.js

Apague também o arquivo manifest.json, que está na pasta public.

Precisamos também remover a importação desses arquivos.

O seu index.js deve ficar da seguinte forma:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

E o seu arquivo App.js, deve ficar da seguinte forma:

import React from 'react';

function App() {
  return <div />;
}

export default App;

Para finalizar a parte de configuração, criaremos um arquivo de estilos globais para nossa aplicação.

Para isso, crie uma pasta chamada styles, dentro da pasta src, e nela, crie um arquivo index.js.

Adicione a esse arquivo o seguinte código:

import { createGlobalStyle } from 'styled-components';

export default createGlobalStyle`
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: 0;
  }

  html,
  body {
    height: 100%;
  }

  body {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #009587;
      
    text-rendering: optimizeLegibility !important;
    font-family: sans-serif;
    -webkit-font-smoothing: antialiased;
  }
`;

Essas configurações nos ajudarão a trabalhar melhor com tamanhos nos nossos componentes.

Nesse momento, sua estrutura deve estar semelhante a essa:

Estrutura de pastas após as configurações iniciais do projeto.

Passo #4: Criação da página

Após terminar as configurações iniciais, criaremos uma página de boas vindas, para podermos ver o Local Storage em funcionamento.

Para isso, dentro da pasta src, criaremos uma pasta chamada pages.

Dentro da pasta pages criaremos uma pasta Welcome e nela, criaremos dois arquivos, um arquivo index.js e um styles.js

Adicione o seguinte conteúdo ao index.js:

import React from 'react';

import {
  Container, LoginForm, UsernameInput, SubmitButton,
} from './styles';

function Welcome() {
  const username = localStorage.getItem('@welcome-app/username');

  function handleSubmit(event) {
    event.preventDefault();

    const newUsername = event.target.elements.username.value;
    localStorage.setItem('@welcome-app/username', newUsername);

    window.location.reload();
  }

  function handleLogout() {
    localStorage.removeItem('@welcome-app/username');

    window.location.reload();
  }

  if (username !== null) {
    return (
      <Container>
        <p>{`Bem vindo ${username}`}</p>
        <SubmitButton onClick={handleLogout}>Sair</SubmitButton>
      </Container>
    );
  }
  return (
    <LoginForm onSubmit={handleSubmit}>
      <UsernameInput type="text" name="username" placeholder="Nome de usuário" required />
      <SubmitButton type="submit">Entrar</SubmitButton>
    </LoginForm>
  );
}

export default Welcome;

A função handleSubmit é responsável por pegar o username digitado e salvar essa informação no Local Storage com a palavra-chave @welcome-app/username, através da função setItem.

A função handleLogout exclui esse token, através da função removeItem.

Nesse componente, nós fazemos um simples verificação para sabermos se o usuário está logado ou não.

Agora, criaremos os estilos que utilizamos nessa página.

Para isso, no arquivo styles.js que criamos, adicione o seguinte código:

import styled from 'styled-components';

export const Container = styled.div`
  display: flex;
  text-align: center;
  flex-direction: column;
  min-width: 300px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 20px;
  background-color: rgb(255, 255, 255);
  border-radius: 4px;
  padding: 30px 20px;
`;

export const LoginForm = styled.form`
  display: flex;
  text-align: center;
  flex-direction: column;
  min-width: 280px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 20px;
  background-color: rgb(255, 255, 255);
  border-radius: 4px;
  padding: 30px 20px;
`;

export const SubmitButton = styled.button`
  height: 40px;
  text-align: center;
  align-items: center;
  border-radius: 4px;
  font-weight: bold;
  font-size: 14px;
  border: 0;
  color: #fff;
  background-color: #009587;
  margin-top: 5px;
  cursor: pointer;
`;

export const UsernameInput = styled.input`
  height: 40px;
  padding: 0 15px;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-bottom: 10px;
  color: #444;
  font-size: 16px;

  ::placeholder {
    color: #666;
    font-size: 16px;
  }
`;

Passo #5: Finalizando a aplicação

Agora, precisamos importar todas as modificações que fizemos até agora.

Para isso, deixe seu App.js da seguinte maneira:

import React from 'react';

import GlobalStyles from './styles';

import Welcome from './pages/Welcome';

function App() {
  return (
    <>
      <GlobalStyles />
      <Welcome />
    </>
  );
}

export default App;

Nesse arquivo, nós importamos GlobalStyles que criamos no Passo #3 e a página Welcome que acabamos de criar.

Com a aplicação concluída, sua estrutura de pastas deve estar mais ou menos assim:

Demonstração

Ver código no github ↗

Forte Abraço,

Carlos Levir

Como utilizar o ES6 no Node Js, de forma simples, com o Sucrase.

Como utilizar o ES6 no Node Js, de forma simples, com o Sucrase.

Desde que foi lançado, o ES6 trouxe uma série de vantagens no desenvolvimento Javascript.

Hoje, vamos aprender como utilizar, de forma simples, todas as funcionalidades oferecidas pelo ES6, no Node Js.


Instalação do Sucrase

O sucrase é um transpiler de código, assim como o babel, mas que traz a vantagem de ter um setup extremamente simples e fácil de usar.

Você pode instalar o sucrase através do seguinte comando:

yarn add sucrase -D

Agora, precisamos criar um script que start o nosso servidor através do sucrase.

Para isso, adicione ao seu package.json o seguinte código:

"scripts": {
  "dev": "sucrase-node src/server.js"
}

Lembre-se que src/index.js deve ser o caminho do arquivo de entrada da sua aplicação.

Ao rodar o comando yarn dev, já é possível utilizar toda a sintaxe do ES6 com o Node JS.


Nodemon

O nodemon é uma dependência muito utilizada em ambientes de desenvolvimento com Node JS.

Para utilizar o sucrase junto ao nodemon, crie um arquivo, na raiz do seu projeto, chamado nodemon.json

Esse arquivo precisa conter o seguinte código:

{
  "execMap": {
    "js": "sucrase-node"
  }
}

Esse arquivo informará ao nodemon que, na hora da execução, ele deve utilizar o sucrase em vez de node.

Nesse momento, você pode já pode utilizar o nodemon normalmente.


Debugger

Podemos também utilizar o sucrase em conjunto do debugger do Visual Studio Code.

Para isso, deixe o lauch.json do seu projeto da seguinte maneira:

"configurations": [
  {
    "type": "node",
    "request": "attach",
    "name": "Launch Program",
    "protocol": "inspector"
  }
]

É necessário também criar um script que deve ser executado antes de iniciar o debugger.

Para isso, adicione o seguinte código, logo abaixo do script dev que criamos anteriormente.

"debug": "node --inspect-brk -r sucrase/register src/server.js"

Você deve rodar yarn debug, e, em seguida iniciar o debug do Visual Studio Code.


Testes

Os scripts de testes podem ser integrados ao sucrase de forma bem simples.

Jest

Para utilizar o jest com o sucrase, é necessário instalar o plugin @sucrase/jest-plugin.

Você pode instala-lo através do comando abaixo:

yarn add @sucrase/jest-plugin -D

No seu package.json, adicione também a seguinte configuração:

"jest": {
  "transform": {
    ".(js|jsx|ts|tsx)": "@sucrase/jest-plugin"
  },
  ...
}

Com isso feito, você pode rodar seu script de testes com o Jest normalmente.

Mocha

Para utilizar o sucrase com o mocha é ainda mais simples, basta passar a flag –require sucrase/register junto ao seu script de testes.

Ficaria mais ou menos assim:

mocha --require sucrase/register ./test/**/*.js

Concluindo

Como podemos ver, o sucrase é uma ferramenta extramamente fácil de configurar e pode ser integrada com as principais ferramentas que você utiliza no seu desenvolvimento com Node JS.

Forte Abraço,

Carlos Levir

Como resolver o erro Client does not support authentication protocol requested by server no MySQL.

Como resolver o erro Client does not support authentication protocol requested by server no MySQL.

Você já se deparou com esse erro antes? Teve dificuldades em resolve-lo?

Vejo abaixo como resolver esse problema de forma definitiva.

Origem do erro

Isso acontece devido à uma mudança no padrão do hash de senha de usuários no MySQL.

Essa mudança ocorreu na versão 4.1 do MySQL.

Com resolver esse problema

A solução ideal é que você faça o upgrade dos seus clients para a versão mais recentes.

Caso isso não senha possível, você pode mudar o tipo de hash da senha do seu usuário para o padrão antigo.

Para isso, basta rodar o comando abaixo:

ALTER USER root IDENTIFIED WITH mysql_native_password BY 'suaSenha';

Lembre-se de definir a senha desejada, podendo também deixar o valor vazio, caso não queira que o usuário possua uma senha.

Resolução do problema utilizando Docker

Para resolver esse problema utilizando docker, você precisa acessar o bash do seu container. Para isso, rode os comandos abaixo:

docker exec -it <seu_container> bash

Dentro do seu container, faça login no mysql, através do comando abaixo:

mysql -u root -p

Após isso, será necessário digitar a senha do usuário root.

Em seguida, altere o padrão do hash de senha de usuários do mysql, através do comando abaixo:

ALTER USER root IDENTIFIED WITH mysql_native_password BY 'suaSenha';

Pronto! Nesse momento você já deve parar de ver o erro.

Forte abraço,

Carlos Levir

Como conseguir uma chave de API do Google.

Como conseguir uma chave de API do Google.

Uma chave de API é algo essencial caso você precise utilizar algum dos serviços oferecidos pelo Google.

Você pode conferir o passo a passo completo logo abaixo.

Criação da chave de API

Para isso, comece acessado o link abaixo

https://console.developers.google.com/cloud-resource-manager

Em seguida, clique em “CRIAR PROJETO”

Após isso, escolha um nome para seu projeto e clique em “CRIAR”.

Uma notificação no canto direito, informando que seu projeto foi criado.

Agora, clique em APIs e serviços -> Credenciais.

Em seguida, clique em “Criar credenciais” e selecione “Chave de API”.

Se você chegou até aqui, sua chave de API do Google foi criada com sucesso.

Agora, você precisa ativar os serviços que você utilizará.

Para isso, basta clicar em Biblioteca.

Em seguida, busque pelo serviço que desejado.

Agora, basta ativar o serviço clicando em Ativar.

Nesse momento, você já pode aproveitar todas as funcionalidades que o google oferece.

Verificação dos limites

O Google limita a quantidade de requisições no plano gratuito.

Para ver o seu limite, basta acessar IAM e Admin -> Cotas

Com essas informações, você já pode usufruir todas as funcionalidades sem maiores preocupações.

Forte Abraço,

Carlos Levir