Forem: Neilton Seguins

Criando um Chatbot com JavaScript e Gemini AI: criando o backend

Neilton Seguins — Mon, 23 Dec 2024 18:05:41 +0000

Salve! \o

Dando continuidade a criação do nosso chatbot com Javascript e Gemini AI, vamos adicionar o "backend" do projeto. Da vez passada criamos o frontend, com HTML, CSS e Javascript, onde garantimos que a interface do usuário irá refletir uma conversa entre o usuário e o chatbot.

Agora precisamos criar um servidor, configurando uma rota com express.js para nos comunicar com a API do Gemini. Vamos lá!

Instalando as dependências do projeto

Bom, vamos precisar do express.js, o sdk do google gemini e para proteger nossa chave de API vou instalar o dotenv para trabalharmos com variáveis de ambiente.

npm install @google/generative-ai express dotenv

Agora estamos prontos para criar nosso servidor adotando melhores práticas como usar variáveis de ambiente locais para proteger dados particulares.

Para isso, vamos criar um arquivo na pasta raiz do projeto chamado de server.js. Neste arquivo vamos começar importando as dependências e configurando os recursos necessários.

const express = require("express");
require("dotenv").config();
const { GoogleGenerativeAI } = require("@google/generative-ai");

const app = express();
const port = 3000;

const genAI = new GoogleGenerativeAI(process.env.GOOGLE_GEMINI_API_KEY);

app.use(express.static("public"));

app.use(express.json());

Este código configura o express para servir arquivos estáticos da pasta "public" e aceita requisições com payload em JSON. Por isso colocamos os arquivos index.html, styles.css e script.js nesta pasta. Também configuramos a aplicação para rodar na porta 3000.

Utilizamos a biblioteca @google/generative-ai para integrar a API do Gemini, autenticando-a com uma chave armazenada em uma variável de ambiente chamada GOOGLE_GEMINI_API_KEY.

Mas onde conseguimos essa API Key? É o que vamos descobrir agora.

Chave de API do Gemini

Obtendo a chave

Para conseguir uma chave de API do Gemini, recomendo que você esteja logado em uma conta "@gmail.com". Após isso, acesse este link e você verá uma tela como esta:

Clique no botão de "Criar chave de API", indique um projeto no qual você usará esta chave e prontinho. Logo abaixo aparecerá sua chave e você poderá visualizá-la e até copiá-la para fazer o próximo passo.

Protegendo sua chave de API

Agora no seu projeto, crie um arquivo com o nome .env.local ou só .env na pasta raiz do seu projeto. Neste arquivo coloque sua chave de API da seguinte maneira:

GOOGLE_GEMINI_API_KEY="sua-chave-vai-aqui"

Agora salve o seu arquivo e pronto. Se você fez o passo anterior corretamente, sua chave de API estará funcionando.

PS: atente-se ao plano que aparece na sua chave de API. O gemini oferece um plano gratuito com uma quantidade limitada de tokens que sua chave pode retornar. Se quiser maior quantidade de tokens, avalie assinar um plano pago. Vamos utilizar o plano gratuito, que mesmo limitado vai nos permitir trocar algumas mensagens com o chatbot.

Criando a rota /chat

Agora com as dependências configuradas e chave de API em mãos, vamos abrir as portas de possibilidades do que podemos fazer com a inteligência artificial.

No arquivo server.js vamos criar a rota /chat:

app.post("/chat", async (req, res) => {
  const { message } = req.body;

  if (!message) {
    return res.status(400).json({ error: "Mensagem não pode estar vazia." });
  }

  //...
});

Nossa rota é do tipo POST, pois irá receber uma mensagem no corpo, justamente a mensagem do usuário que irá interagir com o chat. Então, com essa mensagem nós utilizamos um pouco de programação defensiva (não faz mal pra ninguém um pouco de cuidado rs) e verificamos se não temos uma mensagem. Se não tivermos, um erro é devolvido como resposta e uma mensagem é lançada.

Se tivermos a mensagem, aí sim iremos enviar ela como prompt para o modelo que escolhermos, da seguinte forma:

try {
    const model = genAI.getGenerativeModel({
      model: "gemini-1.5-flash",
    });

    const chat = model.startChat({
      history: [],
      generationConfig: { maxOutputTokens: 100 },
    });

    const result = await chat.sendMessage(message);
    res.json({ response: result.response.text() });
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: "Erro ao processar mensagem." });
  }

Como essa comunicação é um processo assíncrono, vamos usar try/catch para lidar com a resposta. Primeiro eu defino o modelo do Gemini que será usado (você pode conferir uma lista de modelos neste link). Neste caso optei pelo gemini-1.5-flash.

O segundo passo é iniciar o chat. Então com o model.startChat() eu posso iniciar a comunicação com o Gemini, configurando a quantidade máxima de tokens que quero na resposta (neste caso 100 tokens por resposta).

Agora nós aguardamos esta resposta depois de enviar a mensagem para o modelo com chat.sendMessage(message). Quando tivermos a resposta, iremos devolver ela para quem fez a requisição, convertendo o formato de texto devolvido pelo modelo para JSON.

E por fim mas não menos importante, se tivermos um erro podemos usá-lo dentro do catch para lançar este erro no console, e também devolvendo um status 500, facilitando a vida do cliente que está consumindo esta "mini api". Beleza?

Agora só falta indicar onde a nossa "mini api" irá rodar com o trecho de código abaixo:

app.listen(port, () => {
  console.log(`Servidor rodando em http://localhost:${port}`);
});

Nossa api irá rodar na porta que especificamos lá no início. O código completo do server.js é mostrado abaixo:

const express = require("express");
require("dotenv").config();
const { GoogleGenerativeAI } = require("@google/generative-ai");

const app = express();
const port = 3000;

const genAI = new GoogleGenerativeAI(process.env.GOOGLE_GEMINI_API_KEY);

app.use(express.static("public"));

app.use(express.json());

app.post("/chat", async (req, res) => {
  const { message } = req.body;

  if (!message) {
    return res.status(400).json({ error: "Mensagem não pode estar vazia." });
  }

  try {
    const model = genAI.getGenerativeModel({
      model: "gemini-1.5-flash",
    });

    const chat = model.startChat({
      history: [],
      generationConfig: { maxOutputTokens: 100 },
    });

    const result = await chat.sendMessage(message);
    res.json({ response: result.response.text() });
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: "Erro ao processar mensagem." });
  }
});

app.listen(port, () => {
  console.log(`Servidor rodando em http://localhost:${port}`);
});

Testando o chatbot

Agora chegou o momento mais aguardado, o de testar nosso chatbot. Para isso, vamos abrir um terminal e digitar o seguinte comando:

node server.js

Você deve receber a seguinte mensagem no terminal depois de rodar este comando:

Servidor rodando em http://localhost:3000

Agora acessando a url http://localhost:3000 e escrevendo uma mensagem no input e pressionando o botão de enviar, a IA responde sua mensagem e ela é mostrada na tela.

Muito legal, né?

Conclusão

Com isso a gente finaliza a criação de um chatbot usando JavaScript e a API do Google Gemini. Vimos como criar o frontend do zero, aplicar estilos, fazer manipulação do DOM. Criamos um servidor com express.js, usamos a api do gemini, configuramos uma rota POST para nos comunicarmos com o cliente da aplicação e conseguimos conversar com a IA de uma interface própria, desenvolvida por nós mesmos.

Mas não é só isso que dá para fazer. Podemos personalizar e configurar este chatbot para diversas tarefas, desde ser um assistente de idiomas, até um professor virtual que tira suas dúvidas sobre matemática ou programação, vai depender de sua criatividade.

Transformar uma IA em um assistente personalizado envolve treinamento do modelo, mais sobre como a forma que você quer que ele responda e se comporte do que sobre código propriamente dito.

Vamos explorar um pouco disso em um próximo artigo.

Até lá!

Criando um Chatbot com JavaScript e Gemini AI: criando o frontend

Neilton Seguins — Wed, 11 Dec 2024 14:09:33 +0000

E aí, tudo bom?

Eu estava olhando alguns projetos no meu github e me deparei com um chatbot que criei recentemente usando o Google Gemini. A ideia era criar um assistente de idiomas, onde você conseguisse conversar com a IA para aprimorar suas habilidades no idioma que quisesse.

Então pensei: " Porque não compartilhar como eu fiz este projeto com todo mundo? ". E é por isso que estou escrevendo aqui, para te mostrar como fiz cada parte. Então vamos começar pelo front-end da aplicação.

Iniciando um novo projeto

Bom, para justificar algumas ações que vou tomar no projeto vou logo adiantando que iremos criar um "servidor" com express.js, onde forneceremos uma rota de api '/chat' que servirá para a comunicação entre o front-end e a API do Gemini.

Então, precisaremos iniciar nosso projeto com o comando npm init -y. O resultado é um arquivo package.json mais ou menos com essa cara:

{
  "name": "chatbot-ia",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

E também, vamos precisar organizar nossos arquivos da seguinte forma:

public
  |__ index.html
  |__ style.css
  |__ script.js
package.json

Feito isso, vamos criar a parte visual do nosso chatbot. Vamos lá!

Criando o visual do Chat

Como a ideia era fazer um projeto para um live coding de 1h, resolvi criar uma interface bem simples usando HTML, CSS e JavaScript para o Chatbot. Sou bem ruim com design, então a fonte e as cores eu escolhi as que mais gosto. Então vamos lá, começando pelo HTML.

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Chatbot Assistente de Idiomas</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="chat-container">
      <div id="chat-window" class="chat-box">
        <!-- As mensagens vão aparecer aqui -->
      </div>
      <div class="input-container">
        <form id="chat-form" class="chat-form">
          <input
            type="text"
            id="user-input"
            placeholder="Digite sua mensagem..."
            autocomplete="off"
            required
          />
          <button id="send-button" type="submit">Enviar</button>
        </form>
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

E agora o CSS da página

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f2f2f2;
}

.chat-container {
  width: 100%;
  max-width: 400px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.chat-box {
  height: 300px;
  max-height: 500px;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.chat-form {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.message {
  padding: 10px;
  margin-bottom: 8px;
  border-radius: 20px;
  width: auto;
  display: inline-flex;
  max-width: 50%;
  word-wrap: break-word;
}

.model {
  background-color: #e0e0e0;
  color: #333;
  align-self: flex-start;
  justify-content: flex-start;
}

.user {
  background-color: #4caf50;
  color: white;
  align-self: flex-end;
  justify-content: flex-end;
  margin-left: auto;
}

.input-container {
  display: flex;
  padding: 10px;
  border-top: 1px solid #ddd;
}

#user-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 20px;
  outline: none;
}

#send-button {
  margin-left: 10px;
  padding: 10px 15px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
}

#send-button:hover {
  background-color: #45a049;
}

O resultado disso deve ser uma tela parecida com a mostrada abaixo:

Criando a lógica do cliente

Nossa aplicação é um chatbot que irá se comunicar com a API do Gemini. Então, precisamos criar a lógica que irá fazer essa comunicação. Para ficar claro o que devemos fazer, vou listar abaixo:

Pegar o que for digitado pelo usuário
Fazer uma requisição POST para a rota '/chat' que iremos criar
Exibir a mensagem do usuário e do modelo (a IA) na tela do chat

Então vamos lá, primeiro vamos adicionar um ouvinte de eventos para executar nossa lógica apenas depois que o conteúdo do DOM for totalmente carregado:

// script.js
document.addEventListener("DOMContentLoaded", () => {
  const chatForm = document.getElementById("chat-form");
  const chatWindow = document.getElementById("chat-window");
  const userInput = document.getElementById("user-input");

  // ...
});

Criamos constantes para pegar os elementos que nos interessam, como o input onde o usuário digita, a janela onde irão aparecer as mensagens e o campo do formulário, pois vamos escutar quando ele for submetido e aí sim executar nossa lógica.

Continuando, vamos para o segundo passo que é fazer a requisição para a rota que criaremos enviando a mensagem do usuário.

chatForm.addEventListener("submit", async (e) => {
    e.preventDefault();

    const userMessage = userInput.value.trim();
    if (!userMessage) return;

    addMessage("user", userMessage);

    try {
      const modelResponse = await fetch("/chat", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ message: userMessage }),
      });

      const data = await modelResponse.json();
      if (data && data.response) {
        addMessage("model", data.response);
      } else {
        addMessage("model", "Erro: Resposta inválida do modelo.");
      }
    } catch (err) {
      console.error(err);
      addMessage("model", "Erro: Não foi possível processar sua mensagem.");
    }

    userInput.value = "";
});

Neste código, estamos escutando o evento de submit no elemento de formulário. Então, de início usamos o preventDefault para evitar que a página faça reload sempre que enviarmos uma mensagem. Depois pegamos o que o usuário digitou, removendo os espaços em branco da mensagem, do início e fim com o trim() e verificamos se a mensagem não é vazia, em branco. Se a mensagem for vazia a gente para nosso processo aí mesmo.

Agora, se tivermos a mensagem do usuário, exibimos ela na tela usando a função addMessage(). Esta função é definida da seguinte forma:

  function addMessage(role, text) {
    const messageDiv = document.createElement("div");
    messageDiv.className = `message ${role}`;
    messageDiv.textContent = text;
    chatWindow.appendChild(messageDiv);
    chatWindow.scrollTop = chatWindow.scrollHeight; 
  }

Basicamente ela recebe quem enviou a mensagem e o texto da mensagem e exibe essa informação no chat, adicionando os estilos corretos do usuário e do model, o modelo de IA.

Beleza, agora voltando para a lógica da nossa requisição se tivermos uma mensagem do usuário precisamos fazer uma requisição POST usando o fetch API, e o corpo dessa requisição é a mensagem do usuário.

Por fim, se tivermos uma resposta dessa requisição iremos exibir a mensagem do modelo no chat. Caso contrário, pegamos o erro e exibimos no console, com o console.error() ou exibimos uma mensagem no próprio chat de forma customizada. E para melhorar a usabilidade do chat, limpamos o input de mensagem do usuário com o userInput.value = "";.

O arquivo script.js fica com essa cara:

// script.js
document.addEventListener("DOMContentLoaded", () => {
  const chatForm = document.getElementById("chat-form");
  const chatWindow = document.getElementById("chat-window");
  const userInput = document.getElementById("user-input");

  chatForm.addEventListener("submit", async (e) => {
    e.preventDefault();

    const userMessage = userInput.value.trim();
    if (!userMessage) return;

    addMessage("user", userMessage);

    try {
      const modelResponse = await fetch("/chat", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ message: userMessage }),
      });

      const data = await modelResponse.json();
      if (data && data.response) {
        addMessage("model", data.response);
      } else {
        addMessage("model", "Erro: Resposta inválida do modelo.");
      }
    } catch (err) {
      console.error(err);
      addMessage("model", "Erro: Não foi possível processar sua mensagem.");
    }

    userInput.value = "";
  });

  function addMessage(role, text) {
    const messageDiv = document.createElement("div");
    messageDiv.className = `message ${role}`;
    messageDiv.textContent = text;
    chatWindow.appendChild(messageDiv);
    chatWindow.scrollTop = chatWindow.scrollHeight;
  }
});

E com isso a gente finaliza a parte do front-end do chatbot. O próximo passo será criar o nosso "servidor", realizar a comunicação com a API do Gemini e conversar com ele sobre a vida, o universo e tudo mais!

Até uma próxima!

Onde eu colaborei no 11 Hacktoberfest

Neilton Seguins — Mon, 28 Oct 2024 16:12:19 +0000

This is a submission for the 2024 Hacktoberfest Writing challenge: Contributor Experience

E aí, pessoal! Tudo bom?

Todos os anos no mês de outubro rola uma competição muito legal e saudável no mundo tech: o Hacktoberfest. Este evento celebra a colaboração em projetos open source pelo mundo inteiro. Então se você gosta de colaborar em projetos no github é uma ótima oportunidade para encontrar repositórios onde você possa deixar uma pull request de qualidade.

Aproveitando que o mês está acabando, vou deixar aqui minha experiência e onde eu consegui colaborar na edição deste ano. Vamos lá!

TechGuide.sh

Minhas duas primeiras contribuições foram no repositório do techguide.sh que é um projeto muito bacana criado pela Alura e desenvolvido pensando na comunidade. O tech guide ajuda pessoas a descobrirem que área desejam seguir, dá sugestões de conteúdos da comunidade e destaca em cada área de conhecimento um "T" do que é chamado de "Dev em T".

O Dev em T é a ideia de que você precisa ser um profissional especialista em uma área (a barra vertical do T), mas que conhece bem áreas correlatas a sua (a barra horizontal do T). Por exemplo, uma pessoa que é dev frontend deve conhecer um pouco da área de UX designer e de DevOps e backend. Não de forma profunda, mas o suficiente para se comunicar e entender bem o projeto como um todo, poder participar e dar sugestões, feedbacks, etc.

Já sou colaborador no tech guide então foi fácil fazer minhas PR's e fiquei muito feliz de contribuir sabendo que estou ajudando outras pessoas a seguirem o seu próprio caminho na área tech.

Eventos Tech Brasil

Minha terceira contribuição foi no repositório agenda-tech-brasil da @pachicodes que reúne eventos tech de todo o Brasil que ainda vão acontecer. A Pachi ainda tem uma newsletter semanal no Linkedin onde compartilha os principais eventos que vão acontecer durante a semana.

Repositórios assim são de muita importância e utilidade, pois é difícil acompanhar os mais diversos eventos tech que acontecem no país, e centralizar isto em um lugar só facilita a vida de quem tá procurando eventos para participar e se engajar na comunidade.

Fiquei contente que consegui contribuir neste repositório com um evento importante da minha cidade, e vou ficar atento para adicionar os próximos que surgirem.

Diciotech

Minha quarta contribuição foi no repositório da Diciotech. Este projeto é realmente necessário. Sabe aquele monte de termos técnicos que você ouve por aí na tecnologia, como framework, LLM, Code Smells, Deploy, etc? Pois bem, este projeto tem o objetivo de desmistificar e esclarecer o significado destes termos.

É o segundo ano que deixo um PR neste repositório e sempre adicionando termos relacionados ao Frontend, que é o que sou atualmente. O projeto Diciotech é coordenado pela @levxyca, tem um designer muito bonito, simples, tema dark e filtro para facilitar a busca por termos específicos. Usa somente HTML, CSS e JavaScript, então é ótimo para iniciantes que desejam contribuir também.

Menção honrosa

Também colaborei no repositório Algorithms-js que apesar de não ser participante no Hacktoberfest contém uma ideia interessante: um banco de algoritmos importantes na linguagem JavaScript.

Neste repositório deixei duas PR's, as duas focadas em algoritmos de ordenação. A primeira eu inseri o algoritmo de Selection Sort e sua análise de desempenho em notação BigO. E na segunda PR eu adicionei o algoritmo de Quick Sort que é um dos meus preferidos por sua lógica simples, porém complexa, e seu ótimo desempenho.

Essas duas contribuições foram importantes pra mim, pois demonstraram minha evolução ao implementar algoritmos de busca e ordenação. Além de escrever um código limpo e bem documentado, aprovado sem quase nenhuma alteração.

Conclusão

Esse foi meu mês de outubro como participante do 11° Hacktoberfest. Foi desafiador colaborar em repositórios diferentes, escrever algoritmos complexos, simplificar a linguagem tech para todas as pessoas e compartilhar eventos do meu estado com o Brasil todo.

É satisfatório contribuir com projetos open source. Sou muito fã de quem não privatiza o conhecimento e se empenha em disponibilizar suas ideias e projetos com a comunidade sem cobrar nada. Em muitas situações da minha vida fui salvo pro projetos open source, na graduação e no trabalho principalmente. Por isso sempre que posso colaboro com projetos que fazem sentido pra mim.

E foi isso! Já espero ansioso pelo próximo ano. Quero conhecer cada vez mais projetos incríveis.

Rick and Morty e Closures: o que essas coisas tem em comum?

Neilton Seguins — Wed, 23 Oct 2024 14:31:22 +0000

E aí, tudo bom? Espero que sim!

Eu estava tentando resolver alguns problemas de programação no Leetcode e em um dos desafios eu me deparei com um conceito muito importante em programação que muitas pessoas tem dificuldade em entender.

Então resolvi escrever aqui tentando explicar da melhor forma possível como closures funcionam no JavaScript. Vem comigo!

O Problema

Eu estava trabalhando em um desafio chamado "Counter" onde eu precisava criar uma função counter que retornasse inicialmente o número inteiro n e, a cada chamada subsequente, retornasse 1 unidade a mais do que o valor anterior. Por exemplo:

counter(10) retorna 10
counter() (chamado novamente) retorna 11
counter() (chamado novamente) retorna 12

O problema dá algumas dicas, entre elas que podemos usar funções que retornam outras funções.

Este é o conceito de closures. Então segui a dica e fui por este caminho. Aqui está a solução que cheguei:

var createCounter = function (n) {
    let contador = n;
    return function () {
        resultado = contador;
        contador++
        return resultado;
    };
};

Esse código define uma função chamada createCounter que retorna uma outra função (closure), capaz de armazenar e manipular uma variável local (no caso, o contador).

O contador começa com o valor de n passado quando você chama createCounter().
Cada vez que você executa a função, a função interna (retornada) acessa o valor atual de contador, o retorna, e então o incrementa.
Isso permite que o contador "lembre" de onde parou, graças ao closure.

Neste último passo é onde percebemos o verdadeiro poder de uma closure. Uma closure é quando uma função retorna outra função que tem acesso a variáveis externas e mantém seu estado entre chamadas. É como ter um pequeno "esconderijo" dentro da minha função onde eu posso armazenar informações e acessá-las posteriormente.

E onde o Rick e Morty entra nessa história?

A série Rick and Morty brinca com viagens interdimensionais, outras civilizações e faz críticas e propõe reflexões sobre muitas questões existenciais para o ser humano.

Se você não conhece a série aqui vai um breve resumo: O Rick Sanchez, personagem principal da obra, é um cientista que desenvolve todas as maluquices tecnológicas e costuma levar em suas aventuras seu neto Morty. Uma das invenções mais famosas do velho é o portal interdimensional, que permite que ele viaje entre realidades e dimensões. Para saber mais, você vai ter que assistir a série (risos).

Onde você quer chegar, Neilton?

Bom, imagina que o Rick desenvolve uma mochila interdimensional para o Morty, que dá acesso a uma dimensão específica. Nessa dimensão, o Rick coloca algumas ferramentas importantes. Morty pode carregar a mochila para qualquer lugar — seja para a escola, para passear, ou até para uma viagem intergaláctica — e, mesmo longe de Rick, ele ainda terá acesso a tudo o que foi guardado lá.

A melhor parte? Morty pode abrir a mochila e pegar as ferramentas sempre que quiser usar ou até modificar o que está lá dentro. E não importa onde ele esteja, o que foi guardado continua acessível.

E como esse exemplo se conecta com as closures?

Rick é a função externa, que cria o escopo (dimensão) e as variáveis (ferramentas) que podem ser acessadas depois.
O Morty com a mochila representa a função interna, que pode acessar e modificar as variáveis da função externa.
A dimensão representa o escopo léxico da função externa, ou seja, as variáveis que foram criadas dentro da função externa e são acessadas pela função interna, mesmo após a função externa ser executada.
O fato de Morty poder acessar as coisas da dimensão de qualquer lugar reflete a persistência do escopo: mesmo após a função externa ser finalizada, a função interna mantém o acesso às variáveis do escopo original.

Closures são poderosos recursos em programação. Entre as principais vantagens de usar closures, eu destaco o encapsulamento e a memoização. O encapsulamento porque o valor só pode ser acessado através da closure (função interna) e a memoização pela capacidade de preservar o valor das variáveis entre chamadas.

Imagem gerada por IA: https://designer.microsoft.com/image-creator?scenario=texttoimage

Prompt: Generate an image where Rick from Rick and Morty is handing Morty a glowing dimensional pocket device. Morty is pulling objects out of the pocket, like tools and gadgets, while Rick casually explains the mechanics of it in a lab. The pocket represents a closure, containing floating items that Morty can keep accessing, even after Rick steps away.

Conclusão

E aí, deu para entender o que são closures e como elas são importantes em programação? As vezes eu queria ter uma mochila como essa do Morty para guardar coisas úteis ou simplesmente para me teleportar para uma outra dimensão (risos).

Se gostou do conteúdo, comenta e compartilha aí, vai! Dá essa força se você acha que este artigo irá ajudar outras pessoas.

Até a próxima!

Onde contribuir no #Hacktoberfest 2024

Neilton Seguins — Thu, 03 Oct 2024 17:06:16 +0000

Se você é uma pessoa desenvolvedora, já deve ter ouvido falar do Hacktoberfest, né? Um evento que rola todo mês de outubro e nos convida a fazer algo que, além de gratificante, ajuda o mundo da tecnologia a crescer: contribuir com projetos open source!

Mas se você está se perguntando por onde começar ou em quais repositórios mandar aquela pull request (PR) caprichada, eu tô aqui pra te ajudar. Vamos nessa?

O que é o Hacktoberfest?

Se você não sabe, o Hacktoberfest é um evento organizado pela DigitalOcean e GitHub, que incentiva desenvolvedores do mundo todo a colaborar com projetos de código aberto.

Para participar é muito simples, é só se inscrever no site do Hacktoberfest, você pode usar suas contas do Github e Gitlab para issso, e fazer pelo menos 4 contribuições válidas em repositórios que possuem a #hacktoberfest, repositórios de código aberto.

O que você ganha com isso? Além de conhecimento e experiência, este ano de 2024 você pode ganhar uma camiseta incrível! Ano passado eu consegui plantar uma árvore na Tanzânia em um projeto de conservação e biodiversidade e achei isso muito legal, pois nunca pensei que escrever código poderia me fazer salvar espécies nativas de outros países!!

E para te ajudar a contribuir este ano vou te mostrar alguns repositórios para você deixar sua PR. Vem comigo!

1. TypeScript cheatsheets for React

Você curte React e está aprendendo TypeScript? Este repositório é ótimo para você! Ele reúne cheatsheets (guias rápidos) de TypeScript aplicados ao React. Se você já passou pelo dilema de "como tipar isso aqui no React?", esses cheatsheets são uma mão na roda.

Agora, se você já manja dos "paranauês" de TypeScript e quer contribuir, este repositório é uma excelente oportunidade para testar seus conhecimentos e compartilhar o que você sabe.

2. Developer roadmap (roadmap.sh)

Este repositório é bem popular, pois dá uma visão do caminho a seguir na sua carreira de pessoa desenvolvedora. Este projeto traça mapas de aprendizado que guiam desenvolvedores em várias áreas (frontend, backend, DevOps, etc.).

Se você curte criar conteúdos visuais ou quer ajudar a estruturar esse roadmap para outros devs, esse é o lugar certo! Aqui dá pra contribuir com melhorias no roadmap ou sugerir novas skills que podem ser importantes.

3. Tech Guide by Alura

O Tech Guide é inspirado no roadmap.sh e reúne conteúdos valiosos sobre várias áreas da tecnologia, ajudando a galera a se situar no mundão do desenvolvimento. A principal diferença é que o Tech Guide apresenta os mapas de aprendizado usando a filosofia do Dev em T, que diz que você deve ser especialista em uma tecnologia mas conhecer o suficiente outras que estão relacionadas (pense no T, a barra vertical é sua especialidade, as "pontinhas" do T são as áreas relacionadas).

Quer melhorar a documentação, sugerir novos conteúdos ou revisar algo? As oportunidades de contribuição aqui são ótimas, e você ainda fortalece a comunidade tech no Brasil. Tá esperando o que? Clique aqui neste link se quiser contribuir.

4. Algorithms in JavaScript

Se você curte desafios de algoritmos e adora resolver problemas com JavaScript, esse repositório é pra você! Ele contém implementações de algoritmos e estruturas de dados em JavaScript, o que é perfeito para quem está estudando e quer praticar ou ensinar outras pessoas.

Ainda é um projeto com poucos algoritmos disponíveis, então se você conhece um algoritmo que ainda não está lá, é sua chance de brilhar!

5. DicioTech

Aqui está uma contribuição super divertida e inclusiva! O DicioTech é um dicionário de termos técnicos de tecnologia, mas com uma pegada leve e acessível para todos.

Se você já se perdeu entre siglas, tecnologias, nomes técnicos demais, frameworks e gírias tech, este projeto ajuda a desmistificar tudo isso. Quer adicionar um termo novo ou melhorar as definições? Vai fundo, a comunidade agradece! O link para este repositório se encontra aqui!

Estes são apenas alguns dos repositórios legais que encontrei e que já contribuí anos antes que podem te ajudar no desafio de cumprir as 4 PR no mês de outubro. E se você não é pessoa desenvolvedora e quer participar o evento é bastante inclusivo e você consegue contribuir com documentação, tradução de documentação, revisão de textos e muito mais. As possibilidades são muitas então fique a vontade.

Conhece outros repositórios abertos que aceitam a colaboração? Já deixa aí nos comentários que você estará ajudando outras pessoas nesse desafio super legal.

Grande abraço e até a próxima!

Imagem de capa gerada por IA: https://designer.microsoft.com/image-creator
Prompt:

"Ilustração em bloco de cores simples de um panda usando um moletom verde, sentado em um quarto escuro com luzes neon verdes e pretas, cercado por vários monitores com telas de código. O fundo tem uma vibe digital, estilo cyberpunk, com referências sutis a hacking e programação, com o código exibido em tons suaves de verde e preto."

Conhecendo objetos em JavaScript

Neilton Seguins — Mon, 16 Sep 2024 16:32:36 +0000

Você já se deparou com a necessidade de guardar um conjunto de informações complexas em seu código JavaScript? Por exemplo, você precisa armazenar dados de um usuário em um banco de dados, como nome, idade e endereço. Que estrutura do JavaScript você usaria para esta missão?

Neste artigo, vamos conhecer como os objetos podem ser úteis em tarefas como essa e entender o que é essa importante coleção de dados no JavaScript.

Vem comigo!

Um "armário" para seus dados

Pensa no armário da sua casa. Se você for organizado, cada gaveta vai servir para guardar algum tipo de item da sua casa, como chaves, ferramentas, remédios, etc. Se pensarmos em objetos no JavaScript, cada gaveta representa uma propriedade (chave) e o conteúdo dentro dela, o valor associado a essa propriedade. Na gaveta de chaves você terá as chaves do seu carro, casa, moto. E na gaveta de ferramentas você poderá guardar uma chave inglesa, martelo, furadeira, etc.

Os objetos armazenam informações organizadas em pares chave-valor. Exemplo:

const usuario = {
  nome: "Ana",
  idade: 25,
  cidade: "São Paulo"
};

Nesse exemplo, usuario é um objeto que guarda informações sobre um usuário. As chaves são nome, idade e cidade, e os valores correspondentes são "Ana", 25 e "São Paulo".

Acessando as informações do objeto

Para acessar uma propriedade do objeto, você utiliza a notação de ponto (.) ou colchetes ([]):

console.log(usuario.nome); // Saída: Ana
console.log(usuario["idade"]); // Saída: 25

A notação de colchetes é útil quando você precisa acessar uma propriedade cujo nome é armazenado em uma variável:

const propriedade = "cidade";
console.log(usuario[propriedade]); // Saída: São Paulo

Adicionando e modificando propriedades

Você pode adicionar novas propriedades a um objeto ou modificar o valor de uma propriedade existente:

usuario.profissao = "Desenvolvedora"; // Adiciona uma nova propriedade
usuario.idade = 26; // Modifica o valor da propriedade 'idade'

Objetos e arrays: trabalhando em conjunto

Objetos podem conter arrays como valores de suas propriedades, permitindo que você organize dados relacionados de forma eficiente:

const usuario = {
  nome: "João",
  idades: [20, 21, 22, 23] // Armazena as idades do João ao longo dos anos
};

console.log(usuario.idades[1]); // Saída: 21

Agora que você já conhece objetos no JavaScript, tenho certeza que conseguirá trabalhar melhor com as coleções de dados em suas aplicações. Por exemplo, se você precisa de informações de um usuário que preenche um formulário, objetos podem armazenar esses dados em uma única coleção.

Explore a documentação oficial do JavaScript para aprofundar seus conhecimentos sobre objetos e descobrir suas infinitas possibilidades.

Já sabia que era possível fazer isso com objetos? Este artigo te ajudou de alguma forma, deixe seu comentário para que eu possa saber o que você achou.

Imagem gerada por IA: https://designer.microsoft.com/image-creator
Prompt:

Uma ilustração plana de uma mulher negra com um um moletom azul e uma xícara de café em uma quarto escuros com luzes de led neon na cor rosa com um computador gamer, programando algum código em cores macias e pastel.

Testes no Front-end: métodos de consulta do RTL

Neilton Seguins — Mon, 06 Mar 2023 15:30:00 +0000

Neste artigo, vamos explorar os principais métodos de consulta disponíveis na biblioteca React testing Library e entender a diferença entre eles.

React Testing Library (RTL)

O React Testing Library é uma biblioteca popular para escrever testes automatizados em aplicações React. Uma das principais funcionalidades dessa biblioteca é a capacidade de consultar elementos na tela e realizar interações com eles, como clique de botões e preenchimento de formulários.

Existem vários métodos de consulta disponíveis no React Testing Library, e cada um deles tem sua finalidade específica.

`getBy`

O método getBy é usado para obter um elemento com base em um seletor. Ele retorna o primeiro elemento que corresponde ao seletor especificado. Se nenhum elemento corresponder ao seletor, o getBy irá lançar um erro.

Podemos fazer essas consultas usando um método que começa com um prefixo indicando o tipo de consulta e um sufixo que indica qual o tipo de seletor estaremos usando para esta consulta.

Exemplo:

import { render, screen } from '@testing-library/react';

test('deve exibir o título da página', () => {
  render(<App />);
  const titulo = screen.getByText('Meu Título');
  expect(titulo).toBeInTheDocument();
});

Neste exemplo, estamos buscando o elemento que contém o texto "Meu Título" na tela usando o getByText. Se o elemento não for encontrado, o teste irá falhar.

`queryBy`

O método queryBy é semelhante ao getBy, mas não lança um erro se o elemento não for encontrado. Em vez disso, ele retorna null.

Exemplo:

import { render,screen } from '@testing-library/react';

test('deve exibir o título da página', () => {
  render(<App />);
  const titulo = screen.queryByText('Meu Título');
  expect(titulo).toBeInTheDocument();
});

Neste exemplo, estamos buscando o elemento que contém o texto "Meu Título" na tela usando o queryByText. Se o elemento for encontrado, o teste irá passar, pois estamos verificando se o título está presente na tela usando o método toBeInTheDocument().

Esse tipo de consulta é muito útil quando queremos verificar se um elemento não está presente, pois ele retorna null e não um erro imediatamente. Então você consegue utilizar o retornado com utilitários do jest, como o not.toBeInTheDocument() para verificar se elementos não estão presentes.

`findBy`

O método findBy é usado para obter um elemento assíncrono com base em um seletor. Ele aguarda até que o elemento seja encontrado ou até que expire o tempo limite especificado. Se o elemento não for encontrado, o findBy irá lançar um erro.

Exemplo:

import { render, screen } from '@testing-library/react';

test('deve exibir o título da página', async () => {
  render(<App />);
  const titulo = await screen.findByText('Meu Título');
  expect(titulo).toBeInTheDocument();
});

Neste exemplo, estamos buscando o elemento que contém o texto "Meu Título" na tela usando o findByText. O teste irá aguardar até que o elemento seja encontrado ou até que o tempo limite especificado seja atingido.

Note que tivemos que usar async await para aguardar que a promise fosse resolvida, e só assim continuar o nosso teste. Essa query é muito útil quando você precisar testar componentes que renderizam dados provenientes de API's, ou elementos que carregam em uma outra página ao você visitá-los.

`getAllBy`, `queryAllBy` e `findAllBy`

Os métodos getAllBy e queryAllBy são usados para obter uma lista de elementos com base em um seletor. O getAllBy irá lançar um erro se nenhum elemento corresponder ao seletor, enquanto o queryAllBy retorna uma lista vazia se nenhum elemento for encontrado.

Da mesma forma, temos o findAllBy que aguarda uma promisse ser resolvida, ou seja, ao menos um elemento aparecer em tela e se ele existir o método retorna uma lista desses elementos encontrados.

Exemplo:

import { render, screen } from '@testing-library/react';

test('deve exibir todos os itens da lista', () => {
  render(<ItemList />);
  const items = screen.getAllByTestId('item');
  expect(items.length).toBe(3);
});

Neste teste estamos fazendo uma consulta a vários elementos que possuem um test-id de item. Se encontrados, eles serão retornados e armazenados na variável items como um array desses itens. Se não encontrados o teste irá falhar.

Tranquilo!? Estes são os métodos de consulta disponíveis na API do React Testing Library. O conhecimento sobre cada método, o que cada um retorna nos dá uma visão muito boa sobre quais situações eles seriam adequados ao testar nossas aplicações.

Por exemplo, se você quiser que um teste falhe caso nenhum elemento seja encontrado é bom usar o getBy. Se for o caso em que você precisa aguardar o elemento aparecer na tela depois de um tempo, você pode usar o findBy, ou se quiser uma lista desses elementos pode usar findAllBy.

Deu para notar que cada um desses métodos de consulta utilizam um seletor, que identifica o que estamos consultando, por exemplo, o getByText ou queryByText vai buscar um elemento pelo seu texto. O getByTestId busca um elemento pelo seu data-test, e por aí vai. Se você quiser conhecer mais sobre cada um desses métodos pode clicar aqui e acessar a documentação do React Testing Library.

Grande abraço e até a próxima!

Testes no Front-end: Escrevendo seu primeiro teste

Neilton Seguins — Thu, 02 Mar 2023 15:30:00 +0000

No último artigo eu falei um pouco sobre testes no front-end, os motivos de testar suas aplicações, tipos de testes e principais ferramentas para isso.

Neste artigo iremos escrever nosso primeiro teste para um componente de uma aplicação React. Vamos lá!

Criando o componente

Suponha que precisamos testar o seguinte componente React chamado "Counter", que exibe um contador que é incrementado sempre que um botão é clicado:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  function incrementCount() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Contador: {count}</h1>
      <button onClick={incrementCount}>Incrementar</button>
    </div>
  );
}

export default Counter;

Esse componente não recebe nenhuma prop, ele tem apenas um estado, o contador (count) que é incrementado sempre que o botão "Incrementar" é clicado.

Perfeito! Então vamos criar um teste para este componente.

Testando o componente `<Counter />`

Para testar componentes React eu vou usar o Jest e o Testing Library. O Jest é bem fácil de usar e servirá para fazermos asserções sobre nosso código, enquanto que o Testing Library serve para para facilitar a renderização dos componentes e a interação com eles.

Se você criou sua aplicação React com o Create React App (CRA) é provável quee já tenha tanto o jest como os recursos do React Testing Library no seu projeto. Se não, se você usou o Vite por exemplo, pode ser que precise instalar essas dependências. Para instalar é bem simples, é só digitar no seu terminal

npm install --save-dev jest @testing-library/react @testing-library/jest-dom

Ambiente preparado, então vamos ao teste.

Vamos criar um arquivo de teste para o componente Counter, com o nome Counter.test.js:

import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom/extend-expect';
import Counter from './Counter';

describe('Counter', () => {
  it('Deve renderizar o contador sem erros', () => {
    render(<Counter />);
    const textoContador = screen.getByText('Contador: 0');
    expect(textoContador).toBeInTheDocument();
  });

  it('Deve incrementar o contador quando o botão é clicado', () => {
    render(<Counter />);
    const botaoIncrementar = screen.getByText('Incrementar');
    const novoTextoContador = screen.getByText('Contador: 1');
    userEvent.click(botaoIncrementar);
    expect(novoTextoContador).toBeInTheDocument();
  });
});

Tá, mas o que significa cada linha deste teste? Vou explicar.

Primeiro precisamos fazer as importações dos utilitários que iremos precisar. Para renderizar nosso componente importamos o render, para observar o que foi renderizado utilizamos screen e para fazer consultas aos elementos desse componente utilizamos o getByText(). Não se preocupe com essas funções e utilitários agora, irei trazer explicações mais detalhadas sobre cada um em outros artigos.

Para agrupar e organizar melhor os testes deste componente, eu utilizo o describe e dou uma descrição que nada mais é que o nome do componente, mas você pode fazer descrições mais detalhadas.

O teste em si mesmo, só começa quando declaramos ele, com o it(). O it recebe dois parâmetros, que é a descrição do cenário de teste e uma função que executará o teste.

Como boa prática, eu gosto de seguir uma ordem ao escrever um cenário de teste.

Renderizo o componente que estou testando com o render;
Faço uma consulta a um elemento usando o screen e uma query de consulta, neste caso o getByText();
Faço uma asserção, que é a comparação entre o que eu espero e o que eu recebo no meu teste;

Neste primeiro teste eu tenho dois cenários:

O primeiro verifica se o componente <Counter /> é renderizado sem erros e se o contador é iniciado com o valor 0.
O segundo simula um clique no botão "Incrementar" e verifica se o contador é incrementado corretamente.

O clique no botão é realizado utilzando o utilitário userEvent, que possui uma grande quantidade de eventos que simulam interações com a página, como digitar em campos de texto, selecionar opções em um select, etc.

Como outra boa prática eu gosto de salvar o que é retornado das consultas em variáveis e dar nome à elas que sejam significativos. Por exemplo, eu usei o textoContador para receber o que foi retornado de resultado da minha consulta a este elemento. E chamei de botaoIncrementar o botão que obtemos ao fazer a consulta pelo seu texto também.

Você pode perceber que ao fazer isso, fica bem mais simples de ler o teste, por exemplo, nesta asserção:

expect(textoContador).toBeInTheDocument();

Ao ler eu claramente sei o que esse teste faz, que é: "Espero que o texto do contador esteja no documento".

Executando os testes

Para executar os testes de sua aplicação é bem simples, é só digitar em um terminal

npm test

Este script vem como padrão ao iniciar a aplicação com o CRA.

E prontinho! Em menos de cinco minutos você escreveu o que chamamos de testes de unidade para um componente React. Este tipo de teste é simples, onde estamos testando uma unidade, no caso um componente, que é uma função, e como esse componente tem sua própria responsabilidade, que é renderizar o contador e incrementá-lo ao clicar em um botão, ele pode ser facilmente testado com testes esse.

Dependendo do projeto, pode ser necessário escrever testes mais complexos e abrangentes para garantir a qualidade do código.

Maneiro né? Se está gostando dessa série de artigos sobre testes no Front-end comenta aí o que tem achado e se esse conteúdo tem te ajudade de alguma forma!

Até a próxima!

Testes no Front-end: por que, como e quais tipos usar

Neilton Seguins — Wed, 01 Mar 2023 15:15:35 +0000

Testes são fundamentais em qualquer tipo de aplicação, e com o front-end não é diferente. Afinal, testar as funcionalidades e a usabilidade da sua aplicação web ajuda a garantir que ela esteja funcionando corretamente, sem bugs, e que a experiência do usuário esteja satisfatória.

Tipos de testes no Front-end

Existem diversos tipos de testes que podem ser utilizados em aplicações front-end. Entre os mais comuns, podemos destacar:

Testes Unitários: São testes que avaliam pequenas partes do código, como funções e métodos. Esses testes garantem que essas partes do código funcionem corretamente. O Jest é uma das ferramentas mais comuns para testes unitários.
Testes de Integração: São testes que avaliam a integração entre as partes da aplicação. Eles garantem que os diferentes componentes se comuniquem corretamente e que a aplicação como um todo funcione corretamente.
Testes End-to-End: São testes que simulam a interação de um usuário com a aplicação. Eles garantem que a aplicação funcione corretamente do ponto de vista do usuário final. O Cypress é uma das ferramentas mais comuns para testes end-to-end.

Ferramentas de Testes

Existem muitas ferramentas de testes para aplicações de Front-end. Algumas das mais comuns são:

Jest: É um framework de testes criado pelo Facebook. Ele é rápido e fácil de usar e tem uma boa documentação. É comumente usado para testes unitários e de integração em aplicações React.
Testing Library: É uma biblioteca que ajuda a testar as interações do usuário com a aplicação. É fácil de usar e tem uma abordagem mais voltada para o usuário final.
Cypress: É uma ferramenta de teste de integração que simula a interação do usuário com a aplicação. É útil para testes de ponta a ponta, onde você deseja testar a aplicação como um todo.
Puppeteer: É uma biblioteca que controla um navegador Chrome para testar a aplicação. É útil para testes de aceitação, onde você deseja testar a aplicação como um usuário final faria.
Enzyme: É uma biblioteca de testes que fornece utilitários para interagir com componentes React e verificar o seu estado. Ele é amplamente utilizado para testes unitários e de integração em aplicações React, e oferece uma sintaxe simples e fácil de entender para testar componentes.
Mocha: É um framework de teste de JavaScript que suporta testes assíncronos e síncronos, bem como testes de unidade e integração. Ele também oferece uma ampla variedade de recursos, incluindo hooks para configurar testes, relatórios detalhados e suporte a múltiplos ambientes de execução.

Cada ferramenta possui vantagens e desvantagens ao testar suas aplicações. Independentemente da ferramenta escolhida, o importante é que as aplicações sejam testadas regularmente e com cuidado. Testes bem escritos podem ajudar a detectar bugs antes que eles se tornem um problema sério, melhorar a qualidade do código e facilitar a manutenção da aplicação.

Mas por que testar as aplicações Front-end?

Testar aplicações front-end é importante porque elas são a interface principal entre os usuários e o sistema. É fundamental garantir que a interface do usuário funcione conforme o esperado.

Além disso, as aplicações front-end estão sujeitas a uma grande variedade de dispositivos, navegadores e sistemas operacionais. Testes podem ajudar a garantir que a aplicação funcione corretamente em todos os ambientes possíveis.

Bom, essa foi apenas uma breve introdução sobre testes no Front-end, espero que em breve eu possa trazer mais assuntos sobre este tema tão rico e importante no desenvolvimento de software!

Espero que vocês tenham curtido a leitura e até a próxima!!

Forem: Neilton Seguins

Criando um Chatbot com JavaScript e Gemini AI: criando o backend

Instalando as dependências do projeto

Chave de API do Gemini

Obtendo a chave

Protegendo sua chave de API

Criando a rota /chat

Testando o chatbot

Conclusão

Criando um Chatbot com JavaScript e Gemini AI: criando o frontend

Iniciando um novo projeto

Criando o visual do Chat

Criando a lógica do cliente

Onde eu colaborei no 11 Hacktoberfest

TechGuide.sh

Eventos Tech Brasil

Diciotech

Menção honrosa

Conclusão

Rick and Morty e Closures: o que essas coisas tem em comum?

O Problema

E onde o Rick e Morty entra nessa história?

Conclusão

Onde contribuir no #Hacktoberfest 2024

O que é o Hacktoberfest?

1. TypeScript cheatsheets for React

2. Developer roadmap (roadmap.sh)

3. Tech Guide by Alura

4. Algorithms in JavaScript

5. DicioTech

Conhecendo objetos em JavaScript

Um "armário" para seus dados

Acessando as informações do objeto

Adicionando e modificando propriedades

Objetos e arrays: trabalhando em conjunto

Testes no Front-end: métodos de consulta do RTL

React Testing Library (RTL)

getBy

queryBy

findBy

getAllBy, queryAllBy e findAllBy

Testes no Front-end: Escrevendo seu primeiro teste

Criando o componente

Testando o componente <Counter />

Executando os testes

Testes no Front-end: por que, como e quais tipos usar

Tipos de testes no Front-end

Ferramentas de Testes

Mas por que testar as aplicações Front-end?

`getBy`

`queryBy`

`findBy`

`getAllBy`, `queryAllBy` e `findAllBy`

Testando o componente `<Counter />`