React Native + Firebase: Criando um APP Completo

React Native + FireBase(CRUD Completo) – Tasks

 

Passo 1

Você precisará de um conta Gmail para poder acessar o firebase e criar seu primeiro projeto.

 

Passo 2

Criar um banco no Firebase. Ao criar o banco devemos acessar: FireStore Database/Coud FireStore/Regras e em editar regras configurar nosso allow como true.

 

Depois vamos em dados para criar um coleção. Vamos chamar essa coleção de Tasks e adicionar um objeto em nossa collection Tasks.

 

Em visão geral do projeto podemos acessar nossas credenciais para acesso ao banco, vamos selecionar WEB e copiar nossas credenciais.

 

Criando nosso projeto

 

Vamos fazer algumas instalações que iremos utilizar durante o desenvolvimento do nosso projeto.
Vamos utilizar react navigation dentro do nosso app, então rode em seu terminal dentro da pasta do projeto:

 

Vamos precisar também fazer a instalação do firebase no nosso projeto.
Para isso vamos rodar no terminal o seguinte comando:

 

Com tudo configurado vamos agora iniciar a configuração dos arquivos dentro do nosso projeto.
Para iniciar nosso projeto vamos montar nossa estrutura de pastas:

 

Configurando nosso firebase.js dentro de src/config/

Configurando as Rotas

Agora, vamos trabalhar dentro do nosso arquivo principal.
No App.js, abra seu arquivo, vamos editá-lo:

Page Task

Construindo o index.js da Page Task:

1 – Vamos realizar os imports necessários para nossa page Task onde todas as tasks serão carregadas:

 

2 – Vamos criar nosso componente que irá retornar a page Task e criar a parte lógica do nosso componente, onde teremos o state task, o useEfect e a função deleteTask para deletar uma task criada:

 

3 – Vamos prepara nosso return onde iremos renderizar a lista de tasks que vamos trazer do Firebase:

 

Para finalizar, vamos adicionar algum estilo para deixar nosso app mais bonito:

Page NewTask

Constuindo o index.js da Page New Task:

1- Vamos realizar os imports necessários para nossa page New Task onde iremos criar uma nova task:

 

2 – Vamos criar nosso componente que irá retornar a page New Task e criar a parte lógica do nosso componente, onde teremos o state description e a função addTask para adicionar uma nova task:

 

3 – Vamos preparar nosso return onde iremos ter nosso textinput para adicionarmos uma nova task:

 

Para finalizar, vamos adicionar algum estilo para deixar nosso app mais bonito:

Page Details

Constuindo o index.js da Page Details:

1- Vamos realizar os imports necessários para nossa page Details onde poderemos ver uma task e editá-la:

 

2 – Vamos criar nosso componente que irá retornar a page Details e criar a parte lógica do nosso componente, onde teremos o state descriptioEdit, teremos uma const idTask e a função editTask:

 

3 – Vamos preparar nosso return, que irá permitir a visualização e a edição da nossa task:

 

Para finalizar, vamos adicionar algum estilo para deixar nosso app mais bonito:

Resolvendo Warnings

Se tiver warnings ao adicionar uma nova task, siga os seguintes passos:

  • Acesse node_modules / react-native / Libraries / Core / Timer / JSTimers.js
  • Procure a variável MAX_TIMER_DURATION_MS
  • Altere 60 * 1000 para 10000 * 1000
  • Salve as alterações e reconstrua seu aplicativo.
0 0 votes
Article Rating
julho 2, 2021
Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
Feito com s2 por OneBitCode
0
Would love your thoughts, please comment.x
()
x
%d blogueiros gostam disto: