Meu Primeiro App com React Native - #27 Rastreio do Usuário Final

Nesse tutorial vamos fazer a tela de rastreio do usuário final, exibindo pra ele a localização exata do seu produto no banco de dados.

Passando a localização da encomenda - React JS

views/Rastreio.js

Nessa vídeoaula trabalharemos no arquivo Rastreio.js. Como é uma screen que ficará disponível para qualquer usuário, ela não ficará armazenada dentro da pasta área restrita.

import React, {useState,useEffect} from 'react';
import {Text, View, Button, Image, TextInput, TouchableOpacity} from 'react-native';
import {css} from '../assets/css/Css';
import config from '../config/config';

export default function Rastreio({navigation}) {

    const [code, setCode] = useState(null);
    const [response, setResponse] = useState(null);

    //Envia os dados do formulário
    async function sendForm()
    {
        let response=await fetch(config.urlRoot+'rastreio',{
            method: 'POST',
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                code: code
            })
        });
        let json=await response.json();
        setResponse(json);
    }

    return (
        <View style={css.container}>
            <Image source={require('../assets/img/rastreio-icon.png')} />

            <TextInput
                    placeholder='Digite o código de rastreio:'
                    onChangeText={text=>setCode(text)}
                style={[css.login__input, css.rastreio__inputMargin]}
            />

            <TouchableOpacity style={css.login__button} onPress={()=>sendForm()}>
                <Text style={css.login__buttonText}>Rastrear</Text>
            </TouchableOpacity>

            <Text>{response}</Text>
        </View>
    );
}

Controller.js

No nosso backende (Controller.js) faremos o recebimento dos dados e busca no nosso banco através da rota rastreio:

//Exibir o local do rastreio
app.post('/rastreio', async (req,res)=>{
    let response=await tracking.findOne({
        where:{code:req.body.code},
        include:[{all:true}]
    });
    if(response === null){
        res.send(JSON.stringify(`Nenhum produto encontrado`));
    }else{
        res.send(JSON.stringify(`Sua encomenda ${response.Products[0].name} já está a caminho ${response.local}.`))
    }
});

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

Precisa de aulas particulares? webdesignemfoco@gmail.com