Integrações com React Native - #4 RN + NodeJS + MySql

Hoje iniciamos a trabalhar com o lado servidor, ou seja, com o backend em NodeJS 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

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('/create',async(req,res)=>{
    let reqs = await model.User.create({
        'name':req.body.nameUser,
        'password':req.body.passwordUser,
        'email':req.body.emailUser,
        'balance':1000,
        'createdAt':new Date(),
        'updatedAt':new Date()
    });
    if(reqs){
        res.send(JSON.stringify('O usuário foi cadastrado com sucesso!'));
    }
});

//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/Cadastro.js

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

//Envia os dados do formulário para o backend
async function registerUser()
{
    let reqs = await fetch(config.urlRootNode+'create',{
        method: 'POST',
        headers:{
            'Accept':'application/json',
            'Content-Type':'application/json'
        },
        body: JSON.stringify({
            nameUser: user,
            passwordUser: password,
            emailUser: email
        })
    });
    let ress=await reqs.json();
    setMessage(ress);
}

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