Estudo dirigido - Banco de dados Firebase com React Native

Objetivo

Aprender os conceitos de leitura e gravação de dados em um servidor usando a função fetch.
Aplicar esses conceitos em um projeto React Native com Firebase.
Aprender a configurar o Firebase em um projeto React Native.
Implementar funções para ler e salvar dados no Firebase usando fetch.

Conceitos importantes

O que é fetch?

Explicação sobre a função fetch e como ela é usada para fazer requisições HTTP.

Métodos HTTP: GET, POST, PUT, DELETE.

Exemplo básico de uso do fetch para buscar dados de uma API pública.

Ver aula

O que é o Firebase e suas funcionalidades

O Firebase é uma plataforma de desenvolvimento de aplicativos criada pelo Google. Ele é especialmente popular para o desenvolvimento de aplicativos móveis (iOS e Android).

O Firebase é dividido em várias categorias de funcionalidades, que podem ser usadas de forma combinada ou individual, dependendo das necessidades do projeto. As principais são:

Authentication: autenticação com suporte a métodos como e-mail/senha, autenticação por telefone, Google, Facebook, Twitter, GitHub e outros provedores de identidade.
Firestore: banco de dados NoSQL mais flexível e escalável, com consultas avançadas e suporte a estruturas de dados hierárquicas.
Hosting: Hospedagem para aplicativos web.
Functions: Permite executar código back-end em resposta a eventos do Firebase ou solicitações HTTP, sem a necessidade de gerenciar servidores. O código pode ser escrito em JavaScript, TypeScript ou Python. É necessário configurar plano de faturamento.
Storage: Permite armazenar e recuperar arquivos como imagens, áudio e vídeos. É necessário configurar plano de faturamento.

Firestore

Banco de dados NoSQL orientado a documentos, onde os dados são armazenados em documentos (semelhantes a objetos JSON) que são organizados em coleções. Isso permite uma estrutura hierárquica e flexível para armazenar dados.

Estrutura de dados no Firestore

O Firestore organiza os dados em uma estrutura hierárquica composta por:

Coleções: São contêineres para documentos. Por exemplo, uma coleção chamada users pode armazenar documentos que representam usuários individuais.
Documentos: São unidades básicas de armazenamento, semelhantes a objetos JSON. Cada documento contém pares de chave-valor e pode referenciar subcoleções.
Subcoleções: Coleções aninhadas dentro de documentos. Por exemplo, um documento na coleção users pode ter uma subcoleção chamada posts para armazenar as postagens de um usuário.

Exemplo de estrutura

Acesse o Firebase Console e crie um projeto.

Informe o nome do projeto e selecione o recurso pai e clique em

Desative o Google Analytics e clique em

No Firebase Console, clique no ícone de engrenagem (⚙️) ao lado de "Visão geral do projeto" e selecione "Configurações do projeto".

Rolar a página até aparecer ‘Seus aplicativos' e clique no ícone destacado em vermelho

Forneça o nome do aplicativo e clique no botão e na tela seguinte pressione

Obter a URL base

A URL base para acessar os documentos será: https://firestore.googleapis.com/v1/projects//databases/(default)/documents/

Para ativar o Firestore Database, expanda o menu Criação e selecione a opção

clique no botão e depois clique em

→

↓

Escolha o modo de teste para simplificar o desenvolvimento

Abra o Snack e cole o código abaixo. Copie a URL construída no final da parte 3. O nome da coleção será pessoas. Insira a URL no local indicado no código.

import React, { useState } from 'react';
import { View, Text, TextInput, Button, StyleSheet } from 'react-native';

export default function App() {
  const [nome, setNome] = useState('');
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');

  const saveData = async () => {
    try {
      const newData = { 
        fields: { 
          nome: { stringValue: nome }, 
          email: { stringValue: email } 
        } 
      };
      const response = await fetch('insira a URL aqui', // <-----
        {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(newData),
        }
      );

      if (response.ok) {
        setMessage('Usuário salvo com sucesso!');
        setNome('');
        setEmail('');
      } else {
        setMessage('Erro ao salvar usuário.');
      }
    } catch (err) {
      setMessage('Erro ao salvar usuário.');
      console.error(err);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Adicionar Usuário</Text>
      <TextInput
        style={styles.input}
        placeholder="Nome"
        value={nome}
        onChangeText={setNome}
      />
      <TextInput
        style={styles.input}
        placeholder="Email"
        value={email}
        onChangeText={setEmail}
      />
      <Button title="Salvar" onPress={saveData} />
      {message && <Text>{message}</Text>}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 16 },
  title: { fontSize: 18, fontWeight: 'bold', marginBottom: 16 },
  input: { borderWidth: 1, padding: 8, marginBottom: 8, width: '80%' },
});

Copie a URL construída no final da parte 3. O nome da coleção será pessoas. Insira a URL no local indicado no código.

import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';

export default function App() {
  const [usuarios, setUsuarios] = useState([]);
  const [error, setError] = useState(null);
  
  const fetchData = async () => {
    try {
      const response = await fetch('insira a URL aqui'); // <-----
      const data = await response.json();
      if (data.documents) {
        const usuariosFormatados = data.documents.map((doc) => {
          const fields = doc.fields;
          return {
            id: doc.name.split('/').pop(),
            nome: fields.nome.stringValue,
            email: fields.email.stringValue,
          };
        });
        setUsuarios(usuariosFormatados);
      } else {
        setUsuarios([]);
      }
    } catch (err) {
      setError('Erro ao buscar dados do servidor.');
      console.error(err);
    }
  };

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

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Lista de Usuários</Text>
      {error && <Text style={styles.error}>{error}</Text>}
      {usuarios.length > 0 ? (
        usuarios.map((usuario) => (
          <Text key={usuario.id}>
            {usuario.nome} - {usuario.email}
          </Text>
        ))
      ) : (
        <Text>Nenhum usuário encontrado.</Text>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center',
               padding: 16 },
  title: { fontSize: 18, fontWeight: 'bold', marginBottom: 16 },
  error: { color: 'red', marginBottom: 16 },
});

import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, Button, TextInput } from 'react-native';

export default function App() {
  const [usuarios, setUsuarios] = useState([]);
  const [error, setError] = useState(null);
  const [nome, setNome] = useState('');
  const [email, setEmail] = useState('');
  const [message, setMessage] = useState('');
  const firestoreURL = 'https://firestore.googleapis.com/v1/projects/teste-6ef30/databases/(default)/documents/pessoas'

  const fetchData = async () => {
    try {
      const response = await fetch(firestoreURL);
      const data = await response.json();

      if (data.documents) {
        const usuariosFormatados = data.documents.map((doc) => {
          const fields = doc.fields;
          return {
            id: doc.name.split('/').pop(),
            nome: fields.nome.stringValue,
            email: fields.email.stringValue,
          };
        });
        setUsuarios(usuariosFormatados);
      } else {
        setUsuarios([]);
      }
    } catch (err) {
      setError('Erro ao buscar dados do servidor.');
      console.error(err);
    }
  };

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

  const saveData = async () => {
    try {
      const newData = {
        fields: {
          nome: { stringValue: nome },
          email: { stringValue: email },
        },
      };
      const response = await fetch(firestoreURL,
        {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(newData),
        }
      );

      if (response.ok) {
        setMessage('Usuário salvo com sucesso!');
        setNome('');
        setEmail('');
      } else {
        setMessage('Erro ao salvar usuário.');
      }
    } catch (err) {
      setMessage('Erro ao salvar usuário.');
      console.error(err);
    }
    fetchData()
  };

  return (
    <View style={styles.container}>
    <Text style={styles.title}>Adicionar Usuário</Text>
      <TextInput
        style={styles.input}
        placeholder="Nome"
        value={nome}
        onChangeText={setNome}
      />
      <TextInput
        style={styles.input}
        placeholder="Email"
        value={email}
        onChangeText={setEmail}
      />
      <Button title="Salvar" onPress={saveData} />
      {message && <Text style={styles.message}>{message}</Text>}

      <Text style={styles.title}>Lista de Usuários</Text>
      {error && <Text style={styles.error}>{error}</Text>}
      {usuarios.length > 0 ? (
        usuarios.map((usuario) => (
          <Text key={usuario.id}>
            {usuario.nome} - {usuario.email}
          </Text>
        ))
      ) : (
        <Text>Nenhum usuário encontrado.</Text>
      )}
      
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    marginTop:40,
    flex: 1,
    padding: 16,
  },
  title: { fontSize: 18, fontWeight: 'bold', marginBottom: 16 },
  error: { color: 'red', marginBottom: 16 },
  input:{ borderWidth:1, padding:4, marginBottom:8, borderRadius:4},
  message:{ color:'red', fontSize: 8, textAlign:'center',  padding:4, marginBottom:8}
});

Acesse o link do Github Classroom.
Siga as instruções para aceitar a tarefa.
Um repositório será criado automaticamente para você no GitHub, onde os códigos das tarefas serão hospedados.
Ao terminar cada tarefa, você deve realizar o commit e push para o repositório criado quando você acessou o link da tarefa.

Tarefa 1 (3 pontos) - código inicial

criar o projeto inicial a partir do código fornecido neste estudo dirigido

git init
git add .
git commit -m "código inicial"
git branch -M main
git remote add origin <repositório criado pelo github classroom>
git push -u origin main

Tarefa 2 (6 pontos) - excluir documento

crie um botão de exclusão ao lado de cada pessoa na lista
Implemente a função `deleteUser` para excluir o documento do banco de dados

git add .
git commit -m "funcionalidade de exclusão de documento implementada"
git push

Tarefa 3 (6 pontos) - alterar documento

crie um botão de edição ao lado de cada pessoa na lista
implemente a função `editUser` para permitir a alteração dos dados do documento

git add .
git commit -m "funcionalidade de alteração de documento implementada"
git push

Tarefa 4 (6 pontos) - adicionar campos ao documento

adicione os campos: ‘endereço', ‘telefone' e ‘observações' ao formulário de cadastro e edição de usuários.
atualize o banco de dados para incluir esses novos campos

git add .
git commit -m "novos campos adicionados ao documento"
git push

Tarefa 5 (10 pontos) - tela de detalhes

crie uma nova tela (`DetailsScreen`) para exibir todos os detalhes do documento
adicione um botão para navegar até a tela de detalhes
use o `react-navigation` para configurar a navegação entre as telas

git add .
git commit -m "funcionalidade de alteração de documento implementada"
git push origin main

Bom trabalho! 🚀