Meu Primeiro App com React Native - #19 Cadastro

Nesse tutorial realizaremos o cadastro da encomenda no nosso banco de dados MySql utilizando o React Native.

Cadastro de dados no MySql com React Native

Nessa videoaula trabalharemos na screen cadastro.

views/arearestrita/Cadastro.js

import React, {useState,useEffect} from 'react';
import {Text, View, TextInput, TouchableOpacity} from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';
import MenuAreaRestrita from "../../assets/components/MenuAreaRestrita";
import config from '../../config/config';
import {css} from '../../assets/css/Css';

export default function Cadastro({navigation}) {

    const address=config.origin;
    const [code,setCode]=useState(null);
    const [user,setUser]=useState(null);
    const [product,setProduct]=useState(null);
    const [response,setResponse]=useState(null);

    useEffect(()=>{
        getUser();
    },[]);

    useEffect(()=>{
        randomCode();
    },[]);

    //Pegar o id do usuário
    async function getUser()
    {
        let response=await AsyncStorage.getItem('userData');
        let json=JSON.parse(response);
        setUser(json.id);
    }

    //Gerar um código randômico
    async function randomCode()
    {
        let result = '';
        let length=20;
        let chars='0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
        for (let i = length; i > 0; --i) result += chars[Math.floor(Math.random() * chars.length)];
        setCode(result);
    }

    //Envio do formulário
    async function sendForm()
    {
        let response=await fetch(config.urlRoot+'create',{
            method: 'POST',
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                userId: user,
                code: code,
                product: product,
                local: address
            })
        });
    }

    return (
        <View>
            <MenuAreaRestrita title='Cadastro' navigation={navigation} />

            <View style={css.login__input}>
                <TextInput
                        placeholder='Nome do Produto:'
                        onChangeText={text=>setProduct(text)}
                />
            </View>

            <TouchableOpacity style={css.login__button} onPress={()=>sendForm()}>
                <Text>Cadastrar</Text>
            </TouchableOpacity>
        </View>
    );
}

config/config.json

Vamos colocar o nosso endereço de origem com uma propriedade global no nosso arquivo config.json

"origin": "Av. Paulista, 200 - São Paulo / SP"

Controller.js

No Controller faremos a inserção dos dados no banco através da rota create.

//Criação do produto no banco
app.post('/create',async (req,res)=>{
    let trackingId='';
   await tracking.create({
     userId: req.body.userId,
       code: req.body.code,
       local: req.body.local
   }).then((response)=>{
       trackingId+=response.id;
   });

   await product.create({
       trackingId: trackingId,
       name: req.body.product
   });
});

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

Precisa de aulas particulares? webdesignemfoco@gmail.com