• Introdução
• Relevância profissional
• Pré-requisitos
• Meta de tempo de estudos
• Projetos
• Sugestão de recursos para estudo
• Aprofundamento

Os projetos #1 e #2 são pré-requisitos deste projeto.

*Este projeto é pré-requisito do projeto #5.

• Invista até 6 horas estudando os conteúdos
• Realize o projeto 1 (Interação com CrudCrud usando Thunder Client) em cerca de 2 horas.
• Realize o projeto 2 (Interação com CrudCrud usando Javascript) em cerca de 4 horas.
• Realize o projeto 3 (Página web interagindo com CrudCrud) em até 70 horas.
• Realize o projeto 4 (Testando com Playwright) em até 15 horas.

Em todas as atividades desta etapa você usará o serviço gratuito CrudCrud, que é uma API conveniente na criação de aplicações de teste ou protótipos.

1. Interação com CrudCrud usando Thunder Client

   O objetivo da primeira atividade é ambientar com o uso de uma API Client, um software especializado em interagir com APIs. O uso do Thunder Client é indicado por ser uma extensão do VSCode, nosso ambiente de desenvolvimento escolhido.

   Pegue o link disponibilizado em crudcrud.com e faça um total de 6 requisições HTTP, sempre na rota "/pessoas":

   • Liste todos os registros;
   • Adicione um registro contendo o nome de uma pessoa;
   • Exiba exclusivamente o registro alterado;
   • Altere o nome do registro;
   • Liste todos os registros;
   • Delete o registro.
2. Interação com CrudCrud usando Javascript

   Nesta atividade, você realizará exatamente as mesmas requisições HTTP. Portanto, ao listar todos os registros, também na rota "/pessoas", a resposta deve conter nenhum registro.

   Utilize o método "fetch" para realizar essas requisições individualmente. Você pode fazer de qualquer forma no Javascript: em uma página, no playground ou mesmo diretamente no console do DevTools.

3. Página web interagindo com CrudCrud
   

   Agora finalmente crie uma página completa, contendo:

   • um campo para colocar o link do CrudCrud que:
     • ao perder o foco (blur) envia uma requisição de listar todas as pessoas e:
       • caso registros existam, criar a tabela descrita a baixo;
       • caso nenhum registro exista, exibir a mensagem: "Nenhuma pessoa cadastrada.";
   • um botão para adicionar pessoas;
   • uma modal que aparece ao clicar nesse botão;
   • um formulário para inserir a pessoa dentro da modal contendo:
     • text para o Nome e Email;
     • radio button para o Tipo: Cliente, Fornecedor ou Empregado, que:
       • deve mapear estes tipos para 1, 2 e 3;
     • botão para cancelar que fecha a modal;
     • botão para inserir a pessoa que faz:
       • valida se todos os campos estão preenchidos;
       • valida se é um email válido;
       • envia a requisição para criar a pessoa;
       • exibe a mensagem de sucesso ou erro;
   • uma tabela que lista todas as pessoas cadastradas e que contém:
     • o nome de cada coluna (Nome, Email e Tipo);
     • os dados de cada pessoa em cada linha, onde:
       • tipo deve ser exibido por extenso, em vez de 1, 2 e 3
     • um botão de deletar que abre um diálogo de confirmação que faz ao confirmar:
       • envia a requisição de deletar;
       • exibe a mensagem de sucesso ou erro;
     • um botão de editar que abre uma modal que:
       • conteḿ um formulário de edição, similar ao inserir;
       • os campos devem estarem preenchidos com os valores da pessoa correspondente;
       • um botão de cancelar que fecha a modal
       • um botão de confirmar a edição que:
         • realiza as mesmas verificações que a inserção;
         • enviar a requisição de editar;
         • exibe mensagem de sucesso ou erro.

   Como os dados são salvos no CrudCrud, recarregar a página ou fechar e abrir novamente deve exibir os dados atuais.

   Atenção! Você possui apenas 100 requisições diárias. Sua aplicação ficará indisponível ao atingir este limite.

   Confira como é essa página.

4. Testando com Playwright

   Agora que temos a página finalizada, você deve criar testes automatizados para ela usando o Playwright.

   O Playwright é uma ferramenta que simula o uso real de uma página web utilizando um navegador. Com ela, você acessa páginas, clica em botões, lê textos e valores e mais.

   Faça um código para o Playwright interagir com a sua página criada no projeto anterior. Ela deve pegar um link do CrudCrud, preencher no seu site e garantir o sucesso de cada operações possíveis e também garantir que operações inválidas não funcionem.

   Exemplos de casos de testes:

   • adicionar uma pessoa e verificar se os dados da pessoa estão sendo apresentados corretamente na tabela;
   • remover a pessoa criada e verificar que não aparece mais na tabela;
   • tentar adicionar uma pessoa sem seus dados e garantir que seja exibido um erro.

• O que são endpoints e rotas de uma api;
• O que é uma API REST? Entenda tudo sobre API, HTTP e RESTful;
• Como usar o Postman para testar API pública/aberta;
• Callback, Promises e Async/Await: Tudo o que você precisa saber;
• Como usar Async/Await? Promises no JavaScript? Você nunca mais vai errar;
• Async / Await e Promises — Qual é o melhor? Quando usar?;
• Entendendo JavaScript Promises;
• Fetch API - como fazer solicitações GET e POST em JavaScript;
• Aprenda fetch API de JavaScript com projeto.

• Testar outras aplicações de API Client;
• Melhorar o projeto 3, adicionando novas funcionalidades como:
  • poder enviar o endereço da API pelo queryParams
    (exemplo: 127.0.0.1:5501/?api=https://crudcrud.com/api/df7cfe3c5af24d8782814ed8d5beb6d5);
  • ordenar (o nome da coluna ao ser clicado, as linhas devem ser reordenadas de acordo com a coluna);
  • buscar pessoa por nome/email (adicionar um novo input para fazer a busca);
  • adicionar data de nascimento e exibir total de dias de vida e quantos dias falta para aniversário;
  • integrar com um serviço de previsão do tempo (exibir no rodapé informações sobre o clima);
  • cadastro de telefones e/ou endereços para cada pessoa;
  • internacionalização (possibilitar alterar o idioma da página);
  • relacionar pessoas entre si (cadastro de amigos);
  • relatório número de amigos por pessoa;
• Criar uma nova aplicação usando uma API pública:
  • Conheça 6 APIs públicas ESSENCIAIS para utilizar nos seus projetos FRONT-END | Desenvolvimento Web;
  • Public APIs: lista coletiva no GitHub com APIs grátis para software e desenvolvimento web.