Integrações com React Native - #9 RN + Python + MySql

Nesse tutorial continuaremos a integração entre o React Native e o Python com Django, realizando uma listagem de dados vindos do banco de dados.

Listagem de dados no app com Python

Vamos criar a screen pokedex. Não esqueça de adicionar essa screen no views/index.js e no entry point App.js, conforme mostrado nas últimas aulas.

config/config.json

Vamos adicionar a url do Python:

"urlRootPython": "http://192.168.0.103:8000/"

views/Pokedex.js

A screen pokedex listará os pokemons cadastrados no banco:

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

export default function Pokedex({navigation}) {

    [pokemons,setPokemons]=useState(null);

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

    async function listPokemons() {
        let reqs = await fetch(config.urlRootPython+'pokedex/',{
            method: 'GET',
            headers:{
                'Accept':'application/json',
                'Content-Type':'application/json'
            }
        });
        let ress = await reqs.json();
        setPokemons(ress.data);
    }


    return (
        <View style={css.container}>
            <View style={css.header}>
                <Image style={css.header__img} source={require('../assets/img/logo.png')} />
            </View>

            <ScrollView style={css.footer__dex}>
                {pokemons && (
                    pokemons.map((elem,ind)=>{
                        return (
                            <View key={ind}>
                                <Text>{elem.name}</Text>
                                <Image style={{width: 100, height:100}} source={{uri:elem.image}} />
                            </View>
                        )
                    })
                )}
            </ScrollView>
        </View>
    );
}

Bora agora partir pras configurações do backend python.

project/urls.py

Neste arquivo criaremos a rota pokedex:

from app.views import pokedex

urlpatterns = [
    path('admin/', admin.site.urls),
    path('pokedex/', pokedex),
]

app/views.py

No arquivo views criaremos a lógica do backend Python:

from django.shortcuts import render
from django.http import HttpResponse
from sqlalchemy import create_engine
import pandas as pd

# Create your views here.
def pokedex(request):
    con = create_engine('mysql://root:@localhost/app')
    df = pd.read_sql_table('pokemons',con)
    print(df)
    return HttpResponse(df.to_json(index=False,orient='table'))

Baixando a lib para MySql

Para baixar o pacote MySql do Python vamos acessar este site e baixar o pacote de acordo com a versão do seu Python. Para verificar a versão do seu Python, basta acessar o seu terminal de comando e rodar o comando:

python

Após baixar o arquivo acima, cole-o na pasta raiz do seu projeto. Em seguida rode o comando:

pip install NOME_DO_ARQUIVO (Ex: mysqlclientâ??1.4.6â??cp38â??cp38â??win_amd64.whl)

pip install sqlalchemy
pip install pandas

Para rodar o nosso servidor em Python digitamos o seguinte comando:

python manage.py runserver 192.168.0.103:8000

Lembrando que o ip setado acima deve ser o ip da sua máquina.

Sucesso nos códigos e na vida!

Precisa de aulas particulares? webdesignemfoco@gmail.com