Integrações com React Native - #7 RN + PHP + MySQL [Cadastro]

No tutorial de hoje aprenderemos como realizar a integração do React Native com o backend em PHP através de um cadastro no banco.

React Native com PHP

Não se esqueça que para trabalharmos com PHP precisamos do servidor de PHP (Wamp ou Xampp). Os arquivos do PHP no Windows usando Wamp ficam em c:/wamp64/www ou no Xampp ficam em c:/Xampp/htdocs

c:/wamp64/www/Controller2.php

Nesse arquivo vamos manipular os dados do banco e devolver uma resposta json para o React Native.

<?php
include "ClassDB.php";
$json = json_decode(file_get_contents('php://input'));
$objDB = new ClassDB();
$dataAtual = new \DateTime('now');
echo json_encode($objDB->insertPokemon(
    0,
    $json->name,
    $json->image,
    $json->price,
    $json->idUser,
    $dataAtual->format('Y-m-d H:i:s'),
    $dataAtual->format('Y-m-d H:i:s')
));

c:/wamp64/www/ClassDB.php

Na classe do banco de dados vamos criar uma nova função para realizar o cadastro no banco:

#Inserir pokemons no banco
public function insertPokemon($id=0,$name,$image,$price,$idUser,$createdAt,$updatedAt)
{
    $b = $this->conectDB()->prepare("insert into pokemons values (?,?,?,?,?,?,?)");
    $b->bindParam(1,$id,\PDO::PARAM_INT);
    $b->bindParam(2,$name,\PDO::PARAM_STR);
    $b->bindParam(3,$price,\PDO::PARAM_INT);
    $b->bindParam(4,$image,\PDO::PARAM_STR);
    $b->bindParam(5,$idUser,\PDO::PARAM_INT);
    $b->bindParam(6,$createdAt,\PDO::PARAM_STR);
    $b->bindParam(7,$updatedAt,\PDO::PARAM_STR);
    $b->execute();
    return($b)?true:false;
}

views/Busca.js

No arquivo de busca vamos enviar os dados para o backend em PHP e receber a resposta em json:

//Função de registro de captura de pokemons
async function catchPokemons()
{
    let reqs = await fetch(config.urlRootPhp+'Controller2.php',{
        method:'POST',
        headers:{
            'Accept':'application/json',
            'Content-Type':'application/json'
        },
        body: JSON.stringify({
            name: pokemon,
            image: image,
            price: price,
            idUser:1,
            createdAt: new Date(),
            updatedAt: new Date()
        })
    });
    let ress = await reqs.json();
    if(ress){
        setMsg('Pokemon capturado com sucesso!');
        setPokemon(null);
        setImage(null);
        setPrice(null);

    }
}

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

Precisando de assessoria? webdesignemfoco@gmail.com