DecolaMaria - Mentoria da Turma de Backend da Progra{m}aria

Refatoração do projeto feito no curso de Backend da Progra{m}aria

Transcript

1. /Entre PrograMarias DecolaMaria - Backend Monica Craveiro de Menezes Boas Práticas de Mercado em Backend
2. Monica Craveiro de Menezes /Entre PrograMarias • CARIOCA • Desenvolvedora Back-end • Bacharel em Sistemas de Informação e Matemática • Ex-aluna do [des]programe, {reprograma} e DigitalHouse> • Professora de Programação • Palestrante, Apresentadora/Mestre de Cerimônias e Participante de Diversos Eventos na área de Tecnologia • Coordenadora e Voluntária em Diversas Comunidades de TI • Embaixadora da Programaria • Host do Canal do da NodeBR do YouTube • Criadora de Conteúdo para as Redes Sociais @MOCRAVEIRODEV
3. Recapitulando… /Entre PrograMarias - Preparamos o ambiente - Instalamos o Express - Criamos o server.js - Criamos a porta - Criamos a função mostraPorta - Importamos o pacote Express - Criamos o mulheres.js - Copiamos o conteúdo do server.js - Criamos o objeto mulheres - Criamos as funções: - mostraMulheres - criaMulher, - corrigeMulher - deletaMulher - Configuramos a rota /mulheres para os verbos HTTP - Criamos o .gitignore - Informa quais arquivos não devem ser enviados para o Github - Configuramos o repositório no Github - Enviamos os arquivos para o repositório - Configuramos o Render - Configuramos o Banco de Dados - Configuramos o MongoDB - Alteramos nossas funções para usar o Banco de Dados
4. Estrutura atual do Projeto /Entre PrograMarias . ├── node_modules/ # Contém os arquivos dos pacotes que instalamos. ├── .gitignore # Arquivo usado pelo Git para determinar quais arquivos e │ diretórios ignorar ao fazer commit. ├── bancoDeDados.js # Contém as configurações do banco de Dados ├── mulher.js # Contém a rota /mulher do nosso projeto ├── mulheres.js # Contém a rota /mulheres do nosso projeto ├── oi.js # Contém o console.log("Olá, mundo!") ├── ola.js # Contém a rota /ola do nosso projeto ├── package.json # Arquivo com as informações importantes do Projeto. ├── package-lock.json # Contém as versões exatas de cada pacote utilizado no Projeto. └── server.js # Arquivo principal que inicia o servidor.
5. Vamos pensar na programação como se fosse cozinhar. Quando você cozinha, existem certas “boas práticas” que você segue para garantir que tudo corra bem. Por exemplo, você pode lavar as mãos antes de começar, limpar enquanto cozinha e seguir a receita passo a passo. Essas são todas “boas práticas” na cozinha. Na programação, “boas práticas” são semelhantes. São “regrinhas” que os programadores seguem para garantir que seu código seja limpo, eficiente e fácil de entender. Isso inclui coisas como dar nomes descritivos às variáveis, comentar o código e organizar o código de maneira lógica. Introdução às Boas Práticas /Entre PrograMarias
6. Imagine que você está cozinhando uma refeição grande e tem muitos ingredientes diferentes. Se você jogar todos os ingredientes em uma grande pilha, será difícil encontrar o que precisa. Mas se você organizar seus ingredientes, separando-os por tipo ou por qual parte da refeição eles pertencem, será muito mais fácil encontrar o que precisa. Na programação, é a mesma coisa. Se você jogar todo o seu código em um grande arquivo, pode ser difícil encontrar o que precisa. Mas se você organizar seu código em diferentes arquivos e pastas, cada um com seu próprio propósito, será muito mais fácil encontrar o que precisa. Isso é chamado de “modularização”. Estrutura do projeto /Entre PrograMarias
7. Voltando à analogia da cozinha, imagine que você fez uma bagunça enquanto cozinhava. Se você limpar enquanto cozinha, será muito mais fácil manter tudo organizado e limpo. Na programação, “manutenção” é semelhante. Se você escrever código limpo e organizado desde o início, será muito mais fácil fazer alterações ou corrigir problemas mais tarde. Manutenção do código /Entre PrograMarias
8. Projeto refatorado /Entre PrograMarias . ├── config/ # Arquivos de configuração geral da aplicação (banco de dados, │ autenticação etc). ├── node_modules/ # Contém os arquivos dos pacotes que instalamos. ├── src/ # Pasta onde fica o código fonte do nosso projeto. │ ├── controllers/ # Arquivos responsáveis por receber as requisições, chamar os │ │ serviços e enviar uma resposta. │ ├── repositories/ # Arquivos que fazem a comunicação com o banco de dados. │ ├── models/ # Define as entidades e suas características dentro do sistema. │ ├── routes/ # Armazena as rotas da aplicação, direcionando cada rota para │ │ seu respectivo controller. │ ├── app.js # Armazena as rotas da aplicação, direcionando cada rota para │ └── server.js # Arquivo principal que inicia o servidor. ├── .env # Arquivo para armazenar as variáveis de ambiente. ├── .env.example # Versão do arquivo .env segura para compartilhamento público. ├── .gitignore # Arquivo usado pelo Git para determinar quais arquivos e │ diretórios ignorar ao fazer commit. ├── package.json # Arquivo com as informações importantes do Projeto. ├── package-lock.json # Contém as versões exatas de cada pacote utilizado no Projeto. └── README.md # Arquivo de documentação que contém informações do Projeto
9. Vamos pensar no JavaScript como uma linguagem que o computador entende, assim como nós humanos entendemos português, inglês, espanhol, etc. Agora, imagine que você está escrevendo uma carta. No final de cada frase, você coloca um ponto final, certo? Isso ajuda a deixar claro onde uma frase termina e a próxima começa. No JavaScript, o ponto e vírgula (;) tem uma função semelhante ao ponto final em uma frase. Ele indica ao computador onde uma instrução (ou “frase”) termina. Embora o JavaScript possa muitas vezes entender onde as instruções terminam mesmo sem o ponto e vírgula, é uma boa prática incluí-lo. Isso torna o código mais fácil de ler para os humanos e ajuda a evitar possíveis confusões para o computador. Uso do ponto e vírgula (;) /Entre PrograMarias
10. package.json Vamos adicionar a linha "type": "module", com ela mudamos a maneira como usamos as bibliotecas de Javascript utilizando o ES6, uma forma mais “moderna” de chamada que nos permite usar 'import' e 'export' no lugar de require() e module.exports Começando as melhorias no Projeto… /Entre PrograMarias .env Incluímos a variável APP_PORT para colocar a porta da aplicação .env.example Outra forma de escrever o nome do arquivo adotada no mercado. README.md Arquivo de documentação que contém informações do Projeto server.js Vamos começar a separar as responsabilidades e deixaremos esse arquivo apenas com a responsabilidade de iniciar nosso servidor, assim podemos reutilizar a estrutura do servidor para todas as rotas que criamos. Nele vamos chamar o arquivo ‘app.js’ que está com a nossa aplicação iniciada. app.js Vamos criar esse novo arquivo que vai ficar responsável por iniciar nossa aplicação com o Express que instalamos anteriormente. Nele chamaremos o arquivo ‘index.js’ que contém a configuração de todas as rotas.
11. src A pasta src (abreviação de “source”, que significa “fonte” em inglês) é onde fica o código-fonte do seu aplicativo. É aqui que a maior parte do seu trabalho de desenvolvimento acontecerá. src/routes/index.js Vamos configurar o Router para definir as rotas da aplicação web, dizendo ao nosso aplicativo o que fazer quando alguém visita a página inicial ou uma página específica da nossa aplicação. Nesse arquivo, vamos concentrar todos os arquivos de rotas específicos para cadas parte da nossa aplicação. src/routes/mulheresRoutes.js Nesse arquivo vamos configurar as rotas específicas para nossa rota ‘/mulheres, vamos configurar o Router para chamar o 'OlaController' quando visitamos a página inicial dessa rota. src/controllers/MulheresController.js Nesse arquivo vamos encontrar a funções do nosso CRUD que recebem uma 'request' e uma 'response' e realizam a ações esperadas. Continuando as melhorias no Projeto… /Entre PrograMarias
12. config/bancoDeDados.js Contém a configuração de conexão ao Banco de Dados. src/models/mulherModel.js Nesse arquivo estará o esquema de modelo dos dados que serão inseridos no Banco de Dados. src/repositories/MulherRepository.js Nesse arquivo vamos encontrar a funções conectam com nosso banco de dados e realizam a ações esperadas. Continuando as melhorias no Projeto… /Entre PrograMarias
13. Extensão REST Client /Entre PrograMarias Link para extensão: https://marketplace.visualstudio.com/items?itemName=humao.rest-client A extensão REST Client do Visual Studio Code é uma ferramenta poderosa que facilita o teste de APIs diretamente no ambiente do editor. Ela permite que você envie solicitações HTTP e veja as respostas diretamente no Visual Studio Code, eliminando a necessidade de uma ferramenta separada para testar APIs. Com ela, você pode facilmente testar suas solicitações HTTP e até mesmo salvar suas configurações para uso posterior
14. Extensão REST Client /Entre PrograMarias
15. /Entre PrograMarias Extensão REST Client - Guia de Uso 1. Instale a extensão: Primeiro, você precisa instalar a extensão REST Client no Visual Studio Code. Você pode fazer isso procurando por “REST Client” na seção de extensões do Visual Studio Code e clicando em “Instalar”. 2. Crie um arquivo .http ou .rest: Em seguida, você precisa criar um novo arquivo com a extensão .http ou .rest. Este arquivo é onde você vai escrever suas solicitações HTTP. 3. Escreva suas solicitações HTTP: Agora você pode começar a escrever suas solicitações HTTP no arquivo .http ou .rest. Por exemplo, você pode escrever GET https://api.github.com/users para fazer uma solicitação GET para a API do GitHub. 4. Envie a solicitação: Depois de escrever sua solicitação, você pode enviá-la clicando no link “Send Request” que aparece acima da solicitação no editor de código. Isso enviará a solicitação para a API e mostrará a resposta no editor. 5. Veja a resposta: A resposta da API será exibida em uma nova aba no editor de código. Você pode ver o status da resposta, os cabeçalhos e o corpo da resposta.