Simples Calculadora Full Stack

Visão geral sobre APIs

Comunicação cliente - servidor

Protocolo HTTP

APIs Restful

Linguagens de programação no back-end

Conceito de função como serviço

Conceito de End-points rotas

Visão geral sobre a plataforma do Atlas MongoDB

Diferença entre Data Services e App Services do Atlas

Onde criar e gerenciar as funções dentro do Atlas

Onde criar e gerenciar os end-points dentro do Atlas

Uma visão geral sobre o Insomnia como cliente HTTP

Criando sua primeira conta no mongoDB atlas

Configuração inicial de um cluster para banco de dados (DataService)

Criando uma aplicação no App Services

Entendendo a conexão entre uma aplicação do App Services e o cluster

Definindo um Provedor de serviços em nuvem como AWS, Azure ou Google Cloud.

Planejando as rotas dos end-points: /somar , /dividir, /multiplicar e /subtrair

Entendendo o cabeçalho HTTP request e HTTP response

Criação e configuração do end-point da rota /somar

Fazendo requisição HTTP pelo método POST pelo terminal utilizando o comando curl

Vinculando o end-point a uma função

Tratando o retorno da função como JSON

Fazendo o deploy do primeiro end-point no servidor

Configuração de segurança da função para deixa-la de forma pública

Criação das funções e configuração dos end-point das rota /multiplicar , /dividir e subtrair

Vinculando os end-point para cada função

Fazendo o deploy dos end-points no servidor

Configuração de segurança das funções para deixa-las de forma pública

Fazendo requisição HTTP pelo método POST pelo terminal utilizando o comando curl de todas as rotas

Instalando o Insomnia

Criando um nova collection de requests no Insomnia

Criando e configurando requests para as rotas /somar, /multiplicar, /dividir e subtrair

Apresentação do cliente http POSTMAN como uma alternativa ao Insomnia.

Criando uma função principal para identificar o operador desejado

Passagem de parâmetros para função

Invocando funções de dentro de outra função

Fazendo com que a função retorne resultados por meio do comando return

Obtendo o retorno de função e exibindo na tela

Como a passagens de parâmetros acontece na memória

O fluxo da passagem de dados como parâmetros desde o input até a o return da função

Ajustando todas as demais functions para receber dados lidos dos inputs como parâmetro.

Ajustando os botões da calculadora para chamar a mesma function passando string como parâmetro.

Exemplo do fluxo das tomadas de decisão

como funciona o If-else-else-if

Analogia com o semáforo vermelho, amarelo e verde

Os dados do tipo booleano nas estruturas condicionais

Visão geral do operadores +, -,* e / dentro da estrutura condicional

Raciocínio das tomadas de decisões e desvios de fluxo para a função principal de calculo

Implementando a estrutura de decisão na calculadora

Montando as condições de acordo com o parâmetro contendo o operador selecionado

Invocando as funções corretas de dentro do escopo da estrutura condicional

Lendo dados de inputs para dentro de objetos javascript

Entendo o conceito de key/value (chave/valor) dos objetos javascript

Passando objetos de dados como parâmetro

Acessando dados dos objetos por meios do operador ponto (.) e o nome da key (chave)

Lendo dados de objetos  com Object destructuring 

Parâmetros de função  com Object destructuring 

Lendo dados do corpo (body) do HTTP request

Convertendo JSON de formato texto para objeto javascript

Lendo dados o Payload e realizando a soma

Testando no Insomnia

Para as demais functions

• Lendo dados de objetos  com Object destructuring 

• Parâmetros de função  com Object destructuring 

• Lendo dados do corpo (body) do HTTP request

• Convertendo JSON de formato texto para objeto javascript

• Lendo dados o Payload e realizando a multiplicação, divisão e subtração

• Testando no Insomnia

Utilizando o comando fetch e o URl do end-point, no console

Passando objeto contendo dados do header, body e method do HTTP request no fetch

Convertendo o objeto javascript em String com JSON.stringfy

Recendo uma promise como retorno, e utilizando o comando await

Obtendo a leitura da response HTTP com response.json()

Para todos os demais end-points

• Utilizando o comando fetch e o URl do end-point, no console

• Passando objeto contendo dados do header, body e method do HTTP request no fetch

• Convertendo o objeto javascript em String com JSON.stringfy

• Recendo uma promise como retorno, e utilizando o comando await

• Obtendo a leitura da response HTTP com response.json()

Trazendo o exemplos de fetch no console para dentro do javascript no front para soma

Ajuste no Mongo Atlas para a função somar converter parâmetro para float

Implementando os demais fetch, para as demais functions

Utilizando comando async await para as funções que possuem promises como return