Integrações com React Native - #5 RN + PHP + MySql

Nesse tutorial realizaremos a integração do React Native com o PHP e com o banco de dados MySql.

React Native e PHP

views/index.js

Vamos adicionar uma rota fictícia de login:

import Home from './Home';
import Cadastro from './Cadastro';
import Login from './Login';

export {Home,Cadastro,Login};

views/Login.js

Essa será a screen para testarmos a integração com PHP (backend).

import React,{useState,useEffect} from 'react';
import config from "../config/config.json";
import {Image, Button, ImageBackground, ScrollView, Keyboard, Text, TextInput, TouchableOpacity, TouchableWithoutFeedback, View} from "react-native";
import {css} from "../assets/css/Css";
import AsyncStorage from '@react-native-async-storage/async-storage';

export default function Login({navigation}) {

    const [user,setUser]=useState(null);
    const [password,setPassword]=useState(null);
    const [message,setMessage]=useState(null);

    //Fazer Login
    async function doLogin()
    {
        let reqs = await fetch(config.urlRootPhp+'Controller.php',{
            method: 'POST',
            headers:{
                'Accept':'application/json',
                'Content-Type':'application/json'
            },
            body: JSON.stringify({
                nameUser: user,
                passwordUser: password
            })
        });
        let ress = await reqs.json();
        Keyboard.dismiss();
       if(ress){
           navigation.navigate('Home');
       }else{
            setMessage('Usuário ou senha inválidos');
            setTimeout(()=>{
                setMessage(null);
            },3000);
       }
    }

    return (
        <View style={[css.container,css.container__center]}>
            <ImageBackground source={require('../assets/img/login.png')} style={css.login}>
                <View style={css.login__logo}>
                    <Image style={css.login__logoimg} source={require('../assets/img/logo.png')} />
                </View>

                <View style={css.login__form}>
                    {message &&(
                        <Text style={css.login__message}>{message}</Text>
                    )}
                    <TextInput
                            style={css.login__input}
                            placeholder="Usuário:"
                            placeholderTextColor="#ccc"
                            onChangeText={(text)=>setUser(text)}
                    />
                    <TextInput
                            style={css.login__input}
                            placeholder="Senha:"
                            placeholderTextColor="#ccc"
                            secureTextEntry={true}
                            onChangeText={(text)=>setPassword(text)}
                    />
                    <TouchableOpacity onPress={doLogin} style={css.login__button}>
                        <Text style={css.login__buttonText}>Entrar</Text>
                    </TouchableOpacity>
                </View>

                <View style={css.login__footer}>
                    <TouchableOpacity
                            style={css.login__footerButton}
                            onPress={()=>navigation.navigate('Cadastro')}
                    >
                        <Text style={css.login__footerButtonText}>Não tem conta? Cadastre-se</Text>
                    </TouchableOpacity>
                </View>

            </ImageBackground>
        </View>
    );
}

App.js

No nosso entry point App.js precisamos adicionar essa screen também:

<Stack.Screen name="Login" component={Login} options={{headerShown:false}} />

config/config.json

Vamos setar a url padrão para PHP:

"urlRootPhp": "http://192.168.0.103:80/"

Controller.php

Arquivo responsável por recepcionar os dados do javascript e devolver uma resposta:

<?php
include "ClassDB.php";
$json = json_decode(file_get_contents('php://input'));
$objDB = new ClassDB();
echo json_encode($objDB->verifyLogin($json->nameUser,$json->passwordUser));

ClassDB.php

Arquivo responsável pela conexão ao banco MySql.

<?php
class ClassDB
{
    #Conexão ao banco
    private function conectDB()
    {
        try{
            return $con = new \PDO("mysql:host=localhost;dbname=app","root","");
        }catch (PDOException $erro){
            return $erro->getMessage();
        }
    }

    #Verificar o login
    public function verifyLogin($user,$pass)
    {
        $b = $this->conectDB()->prepare("select * from users where name=? and password=?");
        $b->bindParam(1,$user,\PDO::PARAM_STR);
        $b->bindParam(2,$pass,\PDO::PARAM_STR);
        $b->execute();
        return($b->rowCount() > 0)?true:false;
    }
}

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

Precisando de assessoria? webdesignemfoco@gmail.com