Construa um Clone do Postman: Adicionando PUT, PATCH, e DELETE

No vídeo "PUT, PATCH, and DELETE: Building a Postman Clone Course" de Tim Corey, continuamos construindo um clone do Postman aprendendo a lidar com os verbos HTTP restantes. Na lição anterior, implementamos comandos POST junto com solicitações GET. Esta lição enfoca PUT, PATCH e DELETE, completando a funcionalidade básica do nosso próprio cliente de API no estilo Postman. Seguir as orientações de Tim nos proporciona uma compreensão mais profunda de como as APIs funcionam e como os desenvolvedores interagem com elas de maneira programática.

Tim inicia a lição com uma introdução à nova funcionalidade, explicando que esta é a aula número oito no curso completo. Ele ressalta que, embora este projeto seja de fácil acesso para iniciantes e possa servir como um exemplo para um portfólio, é importante tornar seu trabalho único em vez de apenas copiar o código diretamente.

Atualizando o Menu Suspenso e Opções no Aplicativo

Tim começa mostrando a configuração do aplicativo. Atualmente, o menu suspenso permite selecionar GET e POST. Para construir um clone completo do Postman, precisamos adicionar PUT, PATCH e DELETE à lista de opções.

Nas propriedades, Tim atualiza os itens do menu suspenso para que os cinco verbos HTTP apareçam como opções: GET, POST, PUT, PATCH, DELETE. Ele enfatiza que a seleção no menu suspenso deve corresponder ao Enum usado no back-end, que define ações HTTP válidas para o cliente de API. Isso garante que, quando um usuário seleciona uma opção no menu suspenso, o processo a mapeie corretamente para a lógica do código subjacente.

Mapeando a Seleção do Usuário para Ações HTTP

Tim explica como o aplicativo converte a seleção do usuário no menu suspenso em um método de solicitação HTTP específico. O sistema primeiro valida o URL inserido no formulário HTML, depois analisa a escolha selecionada como uma ação HTTP em puro JavaScript.

Esta configuração permite que o aplicativo passe três informações principais para o método CallApiAsync:

1. O URL do formulário HTML.

2. O conteúdo do corpo, geralmente em JSON, inserido por meio de uma área de formulário JavaScript ou editor de texto JSON.

3. A ação selecionada correspondente ao verbo HTTP.

Isso garante que o clone do Postman possa processar diferentes tipos de solicitações e retornar o JavaScript de resposta correto para exibir na seção de resposta HTML.

Implementando Métodos PUT, PATCH e DELETE

Tim demonstra o código necessário para lidar com PUT, PATCH e DELETE:

• PUT: Atualiza um registro completo. O cliente de API envia um objeto JSON completo, sobrescrevendo todos os campos para o ID fornecido.

• PATCH: Atualiza apenas campos específicos. Isso é útil quando você deseja modificar parte de um registro sem afetar outros dados.

• DELETE: Remove um registro inteiramente. Requer apenas o URL e o ID; nenhum conteúdo é enviado.

Tim observa que o DELETE é ligeiramente diferente porque ele não retorna conteúdo - apenas uma confirmação de sucesso. Essas alterações são implementadas inteiramente em puro JavaScript, modificando o método CallApiAsync para lidar com todas as opções e ações.

Testando os Recursos

Tim enfatiza a importância de verificar se cada método HTTP funciona conforme esperado.

1. GET: Tim seleciona GET no menu suspenso e busca postagens. O cliente de API retorna o JavaScript de resposta correto, exibindo dados na seção de resposta HTML.

2. PUT (5:01): Para PUT, Tim atualiza um registro completo com ID, título, corpo e ID do usuário. Ele mostra que o JSON retornado corresponde aos dados submetidos, confirmando que o processo funciona corretamente.

3. PATCH (6:10): Tim demonstra PATCH atualizando apenas o título de um registro. O clone do Postman deixa outros campos intactos, provando que pode lidar com atualizações parciais com eficácia.

4. DELETE (7:32): DELETE requer apenas o ID do registro. Tim executa a solicitação e confirma o sucesso via colchetes vazios, indicando que o registro foi removido sem retornar dados desnecessários.

Através deste processo, Tim ilustra como um clone do Postman pode realizar todas as operações CRUD: Criação (POST), Leitura (GET), Atualização (PUT/PATCH) e Exclusão (DELETE).

Resumo das Alterações e Configuração

Tim resume as principais etapas e alterações de código necessárias para aprimorar o cliente de API:

• Atualizar o menu suspenso para incluir todos os verbos HTTP (opções).

• Garantir que o Enum no back-end corresponda a cada verbo para que a seleção mapeie corretamente para um método.

• Modificar o método CallApiAsync em JavaScript para lidar com os verbos adicionais e processar os dados adequadamente.

Ele nota um aprimoramento opcional: para DELETE, você poderia retornar uma mensagem de sucesso simples em vez de uma saída serializada, simplificando a experiência do usuário.

Status Atual e Recursos do Clone do Postman

Neste ponto, o clone do Postman está totalmente funcional com todos os cinco verbos HTTP. Os usuários podem inserir um URL, enviar dados JSON através de um editor JavaScript do formulário e receber respostas na exibição HTML de resposta.

No entanto, Tim aponta alguns recursos adicionais que poderiam melhorar o aplicativo:

• Suporte para solicitações XML.

• Manipulação de autenticação.

• Adição de cabeçalhos personalizados.

Estas são oportunidades para os desenvolvedores expandirem o clone e torná-lo mais versátil.

Conselhos de Tim para Aprimorar Seu Próprio Postman

Tim desafia os espectadores a continuarem construindo e melhorando seu clone do Postman:

• Adicionar interfaces de usuário da web usando frameworks como WPF, Blazor ou puro HTML/JavaScript.

• Incluir APIs adicionais e lidar com diferentes formatos de dados.

• Testar diferentes opções no menu suspenso e expandir os recursos para maior funcionalidade.

• Compartilhar seu projeto no GitHub para exibir o repositório, código e processo a potenciais empregadores.

Ele ressalta que a prática é fundamental: construir, testar e iterar em seu projeto ajuda a compreender profundamente conceitos de APIs e programação.

Conclusão

Tim encerra o vídeo encorajando a experimentação. Ele gosta de mexer em aplicativos de teste e enfatiza que os desenvolvedores melhoram por meio de iterações repetidas.

Embora o código do GitHub para a série não seja fornecido imediatamente, ele pode se tornar disponível no Dev Pass no futuro. Por enquanto, o objetivo é permitir que os alunos construam seu próprio clone do Postman do zero, praticando configuração, processo e implementação de código enquanto tornam o projeto exclusivamente seu.

Seguindo a abordagem de Tim, os desenvolvedores podem criar um cliente de API funcional, entender métodos HTTP e produzir um projeto pronto para portfólio que demonstra habilidades práticas com formulários HTML, resposta JavaScript e processamento JSON.