Home
Button Mobile Webdesign em Foco
Newsletter Webdesign em Foco
Support Webdesign em Foco
Contribuition Webdesign em Foco
Doe para a Webdesign em Foco
Suporte da Webdesign em Foco
Fechar

Integrações com React Native - #2 Banco de Dados

29/07/2021

Na aula de hoje vamos trabalhar com banco de dados MySql integrado ao app desenvolvido com React Native.

MySql e React Native

Como falado na primeira aula, o primeiro passo é instalar o servidor de MySql, no caso eu indico o WampServer.

Para acessar o gerenciador de MySql do Wamp podemos digitar no navegador a url http://localhost/phpmyadmin

O usuário de acesso é root e não é necessário colocar senha.

Dentro do phpmyadmin vamos criar o banco de dados app que será a base do nosso app. Já vamos instalar o nosso ORM também. Neste curso, utilizaremos o Sequelize. Para instalá-lo vamos rodar o seguinte comando:

cd c:/Project
npm install --save sequelize
npm install --save-dev sequelize-cli
npx sequelize-cli init

config/config.json

O arquivo config.json traz as configurações de acesso ao banco de dados. Nesse arquivo, vamos setar os dados do banco recém criado:

"development": {
    "username": "root",
    "password": null,
    "database": "app",
    "host": "127.0.0.1",
    "dialect": "mysql"
}

Para criar as nossas migrations vamos rodar os seguintes comandos:

npx sequelize-cli model:generate --name User --attributes name:string,password:string,email:string,balance:float
npx sequelize-cli model:generate --name Pokemon --attributes name:string,price:float,image:string,userId:integer

migrations/pokemon

Na migration de pokemons vamos implementar a foreign key relacionada a tabela de usuários:

userId: {
    type: Sequelize.INTEGER,
    references:{
      model:'users',
      key:'id'
    },
    onUpdate:'cascade',
    onDelete:'cascade'
},

Ao fim você pode rodar o seguinte comando:

npx sequelize-cli db:migrate

models/pokemon.js

Vamos setar os relacionamentos também no model:

Pokemon.belongsTo(models.User);

models/user.js

Vamos setar os relacionamentos também no model:

User.hasMany(models.Pokemon);

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

Precisa de um professor? webdesignemfoco@gmail.com

Receba as aulas da Webdesign em Foco em Seu Email
Suporte Webdesign em Foco

Posts Relacionados

Integrações com React Native - #1 Introdução
Hoje iniciaremos o curso de integrações do React Native com outras linguagens e plataformas, demonstrando como integrar os apps com Node, PHP, Python, etc.
Saiba mais!
Integrações com React Native - #3 Frontend
Nesse tutorial iniciaremos o frontend da screen de cadastro e iniciaremos a integração com o banco de dados MySql.
Saiba mais!
React JS
Nessa seção aprenderemos sobre essa importante biblioteca Javascript desenvolvida pelo Facebook para facilitar a construção backend dos nossos websites.
Saiba mais!