Mapas e Rotas com React Native - #9 Backend

Hoje iniciamos o a trabalhar com o lado servidor, ou seja, com o backend do nosso sistema que fará a interligação das nossas requisições do frontend.

Backend no React Native

Antes de mais nada precisaremos instalar alguns módulos no nosso terminal de comandos (CMD):

cd c:/Project
npm install express --save
npm install body-parser
npm install -g nodemon
npm install cors
npm install --save mercadopago

Controller.js

Para trabalhar no backend criaremos o arquivo Controller.js que receberá as requisições vindas do frontend e devolverá respostas do servidor:

//Constantes
const express=require('express');
const bodyParser=require('body-parser');
const mercadopago=require('mercadopago');
const cors=require('cors');

let app=express();
app.use(cors());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

//Routes
app.post('/',(req,res)=>{
    res.send(JSON.stringify(`Com o valor de ${req.body.price} você consegue comprar várias coisas`));
});

//Start server
let port=process.env.PORT || 3000;
app.listen(port,(req,res)=>{
    console.log('Servidor Rodando');
});

Para rodar os códigos no servidor, basta rodar o comando abaixo no terminal:

nodemon Controller.js

views/Checkout.js

Para testar a integração do lado frontend com o backend vamos fazer uma função no Checkout.js

useEffect(()=>{
    async function sendServer(){
        let response=await fetch('http://192.168.0.102:3000/',{
           method: 'POST',
           headers:{
               Accept: 'application/json',
               'Content-Type':'application/json'
           },
            body: JSON.stringify({
              price: 100
            })
        });
        let json=await response.json();
        console.log(json);
    }
    sendServer();
},[]);

Não esqueça de trocar no código acima o ip pelo ip da sua máquina, conforme explicado no vídeo.

Repare também que pra trabalhar com backend, agora vamos manter dois terminais abertos.

Por hoje é só turma. Sucesso nos códigos e na vida!

Precisando de assessoria? webdesignemfoco@gmail.com