Sitemap

API Take Away

Autoria de Afonso Antunes e Carolina Rei

5 min readMay 20, 2021

--

Neste tutorial, iremos mostrar como foi implementada a nossa API que é sobre o registo de Take Away. A mesma foi desenvolvida em JavaScript complementando ainda com mongoDB Atlas e o SwaggerUI.

Press enter or click to view image in full size

Vamos então indicar todos os passos precisos para a criação desta API

1º Passo: Criação do Projeto

2º Passo: Criação da Base de Dados

3º Passo: Desenvolvimento da API

4º Passo: Disponibilizar a API online

1º passo: Criação do Projeto

Usando a linha de comandos, criámos os diretórios precisos juntamente com os ficheiros necessários

  • Criação do projeto juntamente com a respetiva instalação:
mkdir api-TakeAway
cd api-TakeAway
npm init
  • Preencher a description e o author (opcional):
Press enter or click to view image in full size
  • Instalar as dependências necessárias para o projeto:
npm install --save express mongoose
npm install swagger-ui-express --save
  • Criar as pastas como forma de organização para o padrão do projeto MVC (Model-View-Controller) e os respetivos ficheiros (opcional, podendo também criarem diretamente no Visual Studio Code):
touch index.js
touch package-lock.json
mkdir api
mkdir controllers
mkdir models
mkdir service
mkdir utils
cd api
touch openapi.yaml
cd ..
cd controllers
touch PedidoController.js
touch PratoController.js
touch RestauranteController.js
touch UtilizadorController.js
cd ..
cd models
touch PedidoModel.js
touch PratoModel.js
touch RestaurantesModel.js
touch UtilizadorModel.js
cd ..
cd service
touch PedidoService.js
touch PratoService.js
touch RestauranteService.js
touch UtilizadorService.js
cd ..
cd utils
touch writer.js
cd..

2º passo: Criação da Base de Dados

Passando para o mongoDB Atlas

  • Criação da organização e selecionar a opção MongoDB Atlas:
  • Criação do projeto:
  • Criação do Cluster escolhendo a opção gratuita:
  • Escolher o Cloud Provider e a região do nosso servidor:

Como podem ver na seguinte figura, a Base de Dados foi criado com sucesso

Press enter or click to view image in full size
  • A seguir, fizemos a criação de um utilizador para a Base de Dados e escolher o método de Autenticação “Password”:
  • Depois, adicionámos o IP de acesso e escolher a opção “Allow acess from anywhere”:
  • Para finalizar este passo, iremos obter um link que serve para fazer a conexão entre a nossa base de dados e o nosso projeto:
Press enter or click to view image in full size

3º passo: Desenvolvimento da API

  • Criação do index.js

Neste ficheiro, fizemos os imports necessários para o nosso projeto, a configuração do Swagger e a conexão com a nossa base de dados.

  • Criação dos models

Nesta parte, criámos 4 modelos essenciais para este projeto:

  • Pedido
  • Prato
  • Restaurante
  • Utilizador
  • Criação das funções usando o service, controller e o Swagger

Esta é a parte mais importante do projeto porque é onde vamos fazer as funções nos Services e nos Controllers e os respetivos Swagger’s para mostrar o output final.

1ª Função: Criar pedido

2ª Função: Obter pedido

3ª Função: Atualizar pedido

Press enter or click to view image in full size

4ª Função: Apagar pedido

Press enter or click to view image in full size

5ª Função: Criar prato

6ª Função: Obter prato

7ª Função: Atualizar prato

Press enter or click to view image in full size

8ª Função: Apagar prato

Press enter or click to view image in full size

9ª Função: Criar restaurante

Press enter or click to view image in full size
Press enter or click to view image in full size

10ª Função: Obter restaurante

Press enter or click to view image in full size

11ª Função: Atualizar restaurante

Press enter or click to view image in full size

12ª Função: Apagar restaurante

Press enter or click to view image in full size

13ª Função: Criar utilizador

Press enter or click to view image in full size
Press enter or click to view image in full size

14ª Função: Obter utilizador

Press enter or click to view image in full size

15ª Função: Atualizar utilizador

Press enter or click to view image in full size
Press enter or click to view image in full size

16ª Função: Apagar utilizador

Press enter or click to view image in full size

4º passo: Disponibilizar a API online

Para realizar este passo, é crucial criar uma conta através do Microsoft Azure.

Após a criação da conta, é necessário fazer a instalação da extensão do Azure App Service no Visual Studio Code.

Press enter or click to view image in full size

Após a instalação e fazer o login no Azure, irá aparecer algo semelhante como na seguinte figura:

Para colocarmos a API online, vamos selecionar a opção “Deploy to Web App” (ícone da seta azul).

Irá aparecer uma caixa onde vamos dar um nome para a nossa API.

Press enter or click to view image in full size

Escolhemos a versão Swagger.

Por fim, irá aparecer uma janela no qual vai disponibilizar o link público da nossa API. Neste caso, o nosso link é o seguinte:

https://takeawayapi.azurewebsites.net/docs/#/

Espero que tenham gostado deste tutorial!

--

--

Afonso Antunes
Afonso Antunes

Written by Afonso Antunes

Degree in Computer Engineering, Master in Cybersecurity

No responses yet