React com Typescript: desenvolva um sistema de cadastro e autenticação

Preparando o projeto - Apresentação

Olá, estudante! Boas-vindas a mais um curso de React com TypeScript. Meu nome é Monica Hillman, mas você pode me chamar de Moni Hillman. Serei sua instrutora nessa jornada!

Moni é uma mulher branca de cabelos longos, castanhos, com mechas roxas e franja curta. Ela usa óculos de armação oval, prata e grande, e tem olhos castanhos. Está de camiseta azul-marinho com uma estampa amarela. Ao fundo, o estúdio da Alura: uma parede lisa com uma iluminação degradê do roxo para o azul e uma estante com decorações.

Projeto do curso: o que aprenderemos?

Trabalharemos na Voll, uma plataforma de gestão de consultas médicas de algumas clínicas.

Temos uma tela inicial com algumas informações, e nosso foco será o botão de "Entrar" no canto superior direito, no cabeçalho da página.

Ao clicar nele, acessamos um formulário de login. Para cadastrar uma conta, clicamos em "Faça seu cadastro!" abaixo dele.

Com isso, acessamos o formulário de cadastro. Esse formulário requer os seguintes dados básicos (já simuladamente preenchidos abaixo):

• Nome: Monica
• CNPJ: 312312
• E-mail: teste3@gmail.com
• Senha: 1234
• Confirme a senha: 1234

Ao preencher os campos e clicar em "Avançar" ao final, seguimos para uma segunda etapa do formulário. Falaremos sobre essa funcionalidade bacana durante o curso, chamada stepper — um componente da biblioteca Material UI.

Nessa segunda etapa, é pedido o preenchimento dos dados técnicos:

• Telefone: 32131312
• CEP: 12312312
• Rua: Rua do Gato Bonifácio
• Número: 210
• Complemento: 2 piso
• Estado: SP

Agora, clicamos no botão "Cadastrar". Conseguimos construir uma clínica! Fizemos uma requisição do tipo POST através de um Hook personalizado.

Podemos testar se esse cadastro foi feito com sucesso, fazendo o login nessa conta:

• Email: teste3@gmail.com
• Senha: 1234

Ao clicar em "Entrar", a página é redirecionada para a Dashboard da Voll.

Antes, quando o Voll começou a ser construído, essa tela de Dashboard era a tela inicial. Agora, somente consegue acessar essa tela a pessoa usuária logada. Fazemos essa verificação por meio de um token.

Temos a funcionalidade "Cadastrar especialista" no canto superior esquerdo da Dashboard, que também possui um formulário bem grande, com várias opções que conheceremos com o MUI — como o botão Switch e as checkboxes personalizadas.

Esse cadastro, por sua vez, utilizará token de autenticação. Ou seja: somente consegue cadastrar especialistas quem estiver logado na página.

Para isso, implementaremos um fluxo de login e algumas funcionalidades relacionadas a isso.

Por que aprender tudo isso?

É cada vez mais comum encontrar no mercado de trabalho projetos que usam essas tecnologias. Dessa forma, é importante nos preparar para o que podemos encontrar por aí!

Pré-requisitos

Para acompanhar o curso, você precisa ter noções de:

• HTML
• CSS
• TypeScript
• React

Muitas partes que são componentes visuais nós faremos como desafios. Teremos, claro, a resolução de cada um e uma comunidade aberta para pedir ajuda. Mas, a resolução não será em vídeo; ou seja, o componente não será codado com a instrutora.

Se você gostou e quer aprender sobre todos esses assuntos, não deixe de se matricular!

Nos encontramos no próximo vídeo. Até lá!

Preparando o projeto - Documentação da API

Estávamos construindo a nossa aplicação da Voll seguindo a nossa API simulada, aquela API que nós fizemos manualmente para conseguir acessar os dados. Agora, a nossa equipe de back-end terminou o desenvolvimento dela e nos passou. Então, precisamos abrir um projeto novo, com o servidor lá dentro, no nosso VSCode.

A primeira coisa que nós vamos fazer para poder usar esse back-end é acessar a pasta "server", que tem um arquivo chamado example.env. Removemos a palavra example, e ele vai ficar com o nome de somente .env.

Esse arquivo possui as configurações do banco de dados e também do servidor:

.env

DB_HOST="localhost"
DB_PORT=3306
DB_USER=root
DB_PASSWORD=suasenha
DB_DATABASE=testemed
SERVER_PORT=8080
SECRET qualquer coisa
SECRET_KEY="qualquertextoaqui"

O banco de dados tem o login, a senha e em qual porta local ele precisa subir, e o mesmo se aplica ao servidor. Então, para o usarmos, vamos usar a porta 8080.

Mas, por que precisamos trocar esse nome? Porque quando enviamos o servidor para o GitHub, ele ignora o que tiver o nome de .env ("ponto env" ou "dot env"). Então, trocamos o nome só para conseguir fazer esse compartilhamento.

Rodando o servidor

Podemos abrir um terminal no VSCode, clicando nos menu de três pontos no menu superior e em "Terminal > New Terminal". Nele, rodaremos um cd server e depois um npm install. Ele pode demorar um pouco para processar, o que é normal. Depois disso, rodamos npm start.

Ao fazer isso, ele acabou me dando um erro:

Found 17 errors. Watching for file changes.

Eu já tinha visto que esse erro ia acontecer, então sinalizei o pessoal do back-end e perguntei como podemos resolver isso. Precisaremos acessar o arquivo tsconfig.json e, na linha 5, onde informa "ES6", nós vamos colocar uma vírgula, depois dar "Enter" colocar entre aspas "dom":

tsconfig.json

{
    "compilerOptions": {
        "module": "ES2022",
        "lib": [
            "ES6",
            "dom"
        ],
// código omitido

Ao salvar, ele já vai compilar novamente — agora sem erros.

É muito importante ter esse contato com outras equipes do mesmo projeto para o caso de algo do tipo contecer. Eu não sabia como arrumar o problema, então questionei as pessoas do back-end e elas me mostraram como arrumar.

Testando o servidor: Insomnia

Já temos o nosso servidor rodando, e agora nós precisamos testar, entender como podemos usá-lo, conferir sua documentação.

Para isso, vamos usar o programa Insomnia, que você pode instalar no seu computador pelo site http://insonia.rest/download. As versões mais atualizadas, a partir da 2023.2.0, estão com um pequeno problema para aceitar documentações no formato JSON.

Então, na seção Preparando Ambiente desta aula, deixamos o link para você baixar uma versão um pouco mais antiga, mas não tanto, em que você conseguirá carregar essa documentação.

Com o programa aberto, clicamos no botão "Create" no canto superior direito. Ele tem a opção "Import From > File", para importar de um arquivo; nós clicamos nela.

No explorador de arquivos, vamos até a pasta "voll-parte-2 > server", selecionamos o arquivo insomnia-dados.json e damos um "Ok" para confirmar.

Agora, o programa exibe uma coleção chamada "Vollmed API" no centro da tela. Ela possui várias pastas que informam os nossos endpoints: de Autenticação, de Pacientes, de Especialista, de Consulta, de Avaliações e Clínica.

Vamos testar retornar todas as clínicas. Para isso, clicamos na pasta "Clínica" e na requisição do tipo "GET", que retorna todas as clínicas. Podemos notar que, na barra superior da tela, ele já informa qual é a URL: localhost:8080/clinica. Vamos apertar o botão "Send" ao final dessa barra.

Ele não retornou nada na parte direita da tela, porque não temos nenhuma clínica cadastrada. Então clicamos na terceira opção dentro de "Clínica" para criar uma requisição do tipo "POST" e enviar o cadastro de uma clínica. O seguinte objeto JSON aparece na metade esquerda da tela:

POST localhost:8080/clinica

{
  "planoDeSaudeAceitos": [1, 2, 3, 4],
  "email": "clinica@gmail.com",
  "nome": "Clinica de Todos",
  "senha": "4321",
  "endereco": {
    "cep": 76541321,
    "rua": "Rua 45",
    "numero": 2,
    "complemento": "casa",
    "estado": "Amapá"
  }
}

Clicamos em "Send" novamente.

Agora ele cadastrou, informando o status "200 OK", e enviou todos os dados da clínica. À direita, na terceira coluna da tela, conseguimos verificar tudo o que está sendo retornado daquela API, ou, como nesse caso, tudo que estamos enviando:

{
  "nome": "Clinica de Todos",
  "email": "clinica@gmail.com",
  "senha": "a106df1b76513a5615dd6b8218ded588:99fa6c3071d6d5a6e56a72d924",
  "endereco": {
    "cep": 76541321,
    "rua": "Rua 45",
    "estado": "Amapá",
    "numero": 2,
    "complemento": "casa",
    "id": "86662222-3b1c-4fb5-bc35-2305dde3ce2d"
  },
  "planoDeSaudeAceitos": [
    "Unimed",
    "Bradesco",
    "Amil",
    "Biosaude"
  ],
  "id": "fa87f49d-256c-4e87-91f5-ff854fc4b532",
  "role": "CLINICA"
}

A partir dessa documentação dentro do Insomnia, nós vamos conseguir visualizar o que é possível enviar, o que é possível deletar, o que é possível atualizar, etc.

Tendo isso como base, nós vamos conseguir fazer as requisições do front-end, e é o que nós vamos começar a fazer a partir do próximo vídeo.

Até lá!

Preparando o projeto - Erro 404

Nós já conseguimos conferir que o nosso back-end está funcionando. Então, precisamos rodar o front agora.

No VSCode, vamos abrir mais um terminal. No menu superior, clique no menu de três pontos e em "Terminal > New Terminal". Nele, nós vamos digitar cd web, depois npm install, que também pode demorar um pouco. Isso é, basicamente, o que fizemos no servidor também. Digitamos cd server para entrar na pasta do servidor, em seguida npm install, que instalou todas as bibliotecas e todas as dependências. E, por último, digitamos npm start, que é o que vamos fazer quando terminar a instalação atual.

Então, ao terminar, executamos npm start. Após inicializar o servidor, ele vai iniciar nosso projeto React na porta localhost:3000. Vamos abrir o Console no menu Inspecionar para verificar se algum erro ocorreu, pois agora estamos iniciando um servidor novo, não é mais o mocado. Após carregar, ele mostra o seguinte erro: 404, not found para 8080/consultas.

O que significa esse erro 404? Literalmente, a tradução é que ele não encontrou a nossa API no localhost:8080/consultas, que era o que estávamos utilizando antes.

Vamos abrir novamente o VSCode, diminuir o terminal e fechar a pasta server. Acessamos a pasta "web > src" e vamos ao arquivo que está usando esse fetch (useFetch), que é useDadosConsulta.ts:

useDadosConsulta.ts

const useDadosConsulta = () => {
  return useFetch<IConsulta[]>({ url: 'consultas' });
};

Precisamos visualizar qual é o endpoint dele na realidade. É consultas? Então vamos ao Insomnia, na pasta Consulta, e clicamos em "GET Lista todas consultas". Podemos ver que a URL tem a palavra consulta no singular, e não no plural como vemos no arquivo:

GET localhost:8080/consulta

Então precisamos trocar esse valor. Onde antes tinha o url: 'consultas', vai se tornar url: 'consulta':

useDadosConsulta.ts

const useDadosConsulta = () => {
  return useFetch<IConsulta[]>({ url: 'consulta' });
};

Tem outro lugar que usa o fetch, que é o arquivo useDadosProfissional.ts. E lá, a mesma coisa: estávamos usando profissionais no plural, e agora vamos usar no singular. Mas, antes, vamos verificar no Insonia se é isso mesmo. Clicmaos em "Especialista > POST Cria um especialista":

GET localhost:8080/especialista

Não temos profissional, mas especialista. Então não vamos precisar só trocar o singular, precisamos trocar a palavra. Então, url: 'especialista':

useDadosProfissional.ts

const useDadosProfissional = () => {
  return useFetch<IProfissional[]>({ url: 'especialista' });
};

Salvamos e vamos conferir no servidor se continua dando erro. Ao atualizar a página no navegador, não temos mais o erro 404 indicado no console.

Ele está agora informando outro erro: "profissionais.map não é uma função em useDadosGrafico". Para resolver isso, vamos no Visual Studio Code e clicamos em useDadosGrafico.ts, que está em "src > components > Grafico".

Ele terá na linha 17: if (profissionais && consultas). Vamos colocar um mais um && depois de profissionais, e profissionais.length. Resultando em: if (profissionais && profissionais.length && consultas). Ou seja, tivemos que adicionar uma verificação de tamanho:

useDadosGrafico.ts

if (profissionais && profissionais.length && consultas) {
    dados = profissionais.map((profissional) => ({
// código omitido

O que era aquele erro? O profissionais não tinha nada dentro dele, não tinha um array cheio de elementos, então não podíamos realizar uma ação para cada item daquela lista. Por isso, antes de começar a percorrer aquela lista, vamos verificar se ela tem algum tamanho, se tem algo lá dentro. E é só isso que vamos colocar aqui, adicionamos uma condicional a mais para não cairmos naquele erro.

Provavelmente há outro lugar que precisamos arrumar, mas vamos visualizar o Console no navegador novamente para saber onde precisamos consertar. Então, atualizamos a página de novo para atualizar o Console.

Agora ele está dando o mesmo erro em Avaliacao. Então acessamos a pasta "src > components > componente Avaliação > arquivoindex.tsx". Qual é o erro?

Novamente, ele está tentando pegar profissionais na linha 17 e estamos recebendo uma lista vazia. Então, antes de ele tentar fazer esse map, vamos colocar uma condicional: profissionais && profissionais.length.

Aí, vamos colocar uma interrogação (?) e dar um "Enter" para a linha de baixo para facilitar a visualização. Depois da interrogação, vai ter o map, profissionais.map, e a arrow function lá dentro. No fechamento do map, após os parênteses, vamos colocar dois pontos : e, entre aspas, "Não há avaliações para mostrar":

Avaliação > index.tsx

  <SecaoCard>
    {profissionais && profissionais.length
      ? profissionais.map((profissional) => {
          return <Card profissional={profissional} />;
        })
      : 
            "Não há avaliações para mostrar"}
  </SecaoCard>

Salvamos. Vamos conferir se está dando erro. Você pode ver que nossa tela está carregando, então não está mais dando esses erros para renderizar a página.

O que fizemos aqui? Além da verificação de se existia aquela lista, se tinha alguma coisa dentro, colocamos uma condicional. Se tem a lista, ele vai imprimir. Se não tiver, ele vai avisar para nós: "Não há avaliações disponíveis para mostrar". Isso é bacana, porque é bom ter esse feedback para a pessoa usuária. Se não tem nada ali, é porque não há avaliações.

Podemos ver no terminal do navegador que está dando um erro 400 bad request na página de Especialista. Só que não era para dar, você se lembra que nós colocamos o endpoint correto, de acordo com o Insomnia?

Vamos mandar uma requisição no Insomnia, do tipo GET para especialista, clicando em "Send", para verificar o que retorna:

{
    "status": 400
    "message": "Não encontramos especialistas"
}

Ele está retornando um erro 400 de dentro da API porque não foi encontrado um especialista. Então, não é um erro de conexão, é um erro interno do back-end.

Refinamentos

Nesse caso, o que mais poderíamos fazer de verificações sobre profissionais para melhorar ainda mais o visual da nossa página?

O botão "Ver mais" não faz sentido aparecer na Dashboard, na seção "Avaliações de profissionais", se não tiver mais do que quatro profissionais. No nosso caso não temos nenhum profissional, então veríamos o que a mais?

Então, vamos retornar ao nosso index.txt de Avaliação. Na criação do botão (linhas 15-27), nós vamos fazer uma verificação como a que fizemos no map. Ou seja, se profissionais existir, e o tamanho de profissionais (profissionais.length) for maior do que quatro (> 4), adicionamos uma interrogação ? para motrar o botão se essas condições forem satisfeitas.

Vamos fechar nossas chaves, depois o botão. Antes do fechamento, colocaremos dois pontos e duas aspas duplas para ficar vazio:

Avaliação > index.tsx

<>
  <SecaoCard>
    {profissionais && profissionais.length
      ? profissionais?.map((profissional) => {
          return <Card profissional={profissional} />;
        })
      : 
            "Não há avaliações para mostrar"}
  </SecaoCard>
{profissionais && profissionais.length > 4 ? 
    <Botao>Ver mais</Botao>

    }
</>

Agora salvamos e testamos lá no servidor local no navegador. Se não tiver profissionais, ou seu número não for maior do que quatro (nosso caso), não vai aparecer aquele botão.

Já conseguimos arrumar as nossas conexões, que antes era para o mock, agora para o servidor de verdade. Nós já podemos fazer algumas coisas a mais no projeto.

Continuaremos esse desenvolvimento no próximo vídeo. Até lá!

Sobre o curso React com Typescript: desenvolva um sistema de cadastro e autenticação

O curso React com Typescript: desenvolva um sistema de cadastro e autenticação possui 127 minutos de vídeos, em um total de 48 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Preparando o projeto
• Construindo formulários
• Interagindo com a API
• Autenticando clinica
• Cadastrando especialista