BlogGM

Repositório contendo a API e o Front End do Blog para a aula de Dev Web Protótipo inicial disponível no Figma

Desenvolvedores

• Gustavo Pazeto - Front-End
• Matheus Ferreira - Back-End

Instalação do projeto

• Dentro da pasta server: yarn install
• Dentro da pasta server: yarn seed
• Dentro da pasta frontend: yarn install
• Em ambas as pastas: yarn start
(Necessário rodar comando em ambos simultaneamente)

Front-end

O projeto foi desenvolvido utilizando Angular

Back-end

Iremos começar o nosso projeto com o back-end, abaixo irei explicar tudo que é necessário para começar o projeto e finalizar o back-end. Aproveitem.

Instalação

• Node.js: versão >= 12.16
• Yarn: versão >= 1.22
• Visual Studio Code: versão >= 1.42
• MongoDB: versão >= 4.2.3

Tenha certeza que o mongo está ativo no seus serviços.

Crie uma pasta raiz do projeto, sem espaços em seu caminho e em seu nome, também tenha certeza de que seu usuário esteja sem caracteres especiais e espaço.

Crie uma pasta dentro da pasta raiz, agora já podemos usar o terminal do visual studio code para podermos passar nossos comandos. A pasta pode ser um nome que lembre o backend de um projeto, no meu caso, usei server. Não se esqueça de entrar dentro da pasta criada, pois apartir de agora tudo será feito dentro dela. Use cd "nome" para poder acessar a pasta no terminal.

Instalação de Pacotes

Iremos instalar alguns pacotes necessários para o servidor ficar operacional, para isso iremos usar o express. Execute os comandos na ordem.

• npx express-generator . --no-view
• yarn set version berry
• yarn install
• yarn start

Apartir daqui seu projeto estara no ar, para finalizá-lo aperte ctrl + c em seu terminal e em seguida S, ele será finalizado.

Configurando a conexão com o Banco

Agora precisamos instalar um pacote para gerenciar o banco de dados, ele é o mongoose.

• yarn add mongoose

Após isso iremos criar uma pasta config e criar um database.js dentro dela, para podermos criar a conexão do projeto com o banco de dados. Verifiquem o código dentro desse arquivo para mais informações.

Após isso iremos ter que iniciar a conexão com o banco de dados no app.js (vejam o código para mais informações).

Estruturação de Dados

Agora que criamos a nossa conexão está na hora de estruturarmos nossos dados. Eu estruturei o meu banco levando em consideração um projeto de blog para um trabalho da faculdade, eles estão guardados na pasta models, onde devem ficar. Dê uma olhada nos códigos dessa pasta para ver um exemplo de como ficaram seus dados.

Criação dos Controladores

Partiremos agora para as engrenagens do back-end, aqui criaremos todos os métodos para manusear os dados no banco, como criar, apagar, listar e atualizar, o famoso CRUD. Cheque a pasta controllers para ver os códigos.

Criação das Rotas

E por fim a criação das rotas, essas rotas deverão ser criadas na pasta routes e inicialisadas no app.js. Verifique os exemplos para mais informações.

Execução de Testes

Agora devemos testar, baixe qualquer programa de API REST para fazer seus testes, no meu caso estou usando o Insomnia Crie suas rotas como o localhost e o prefixo da rota, por exemplo: http://locahost:3000/usuario Agora é só fazer os testes, não se esqueça de que os métodos, post, put e delete estão com corpo json, não se esqueça de adicionar corpo a sua requisição. Com isso finalizamos o back-end.

Adicionei um Arquivo JSON Especial nesse repositório, que só é necessário importar no Insomnia e usar os requests. Boa Sorte!

Special Thanks to Fausto Cintra que forneceu seu conhecimento para nós.