Criando um aplicativo em React Native para agendamentos com o Google Sheets

APP React Native para agendamentos com o Google Sheets

Vou te mostrar um tutorial passo a passo de como criar um aplicativo em React Native conectado a uma planilha do Google para agendamentos.

1. Configurando a planilha do Google

Antes de começar, você precisa criar uma planilha do Google para armazenar os dados dos agendamentos. Para fazer isso, siga estes passos:

1. Faça login em sua conta do Google e abra o Google Drive.
2. Clique no botão “Novo” e selecione “Planilha Google”.
3. Na planilha, crie uma tabela com as seguintes colunas: “Nome”, “Data” e “Hora”. Essas colunas representam os dados dos agendamentos.

2. Criando um projeto React Native

Para criar um projeto React Native, você precisa ter o Node.js e o npm instalados em seu computador. Se você ainda não os tem, instale-os primeiro.

1. Abra o terminal ou prompt de comando em seu computador.
2.  Digite o seguinte comando para instalar o React Native CLI: npm install -g react-native-cli
3. Crie um novo projeto React Native digitando o seguinte comando: react-native init NomeDoProjeto (substitua “NomeDoProjeto” pelo nome que você deseja dar ao seu projeto.)

3. Instalando dependências

Para se conectar à planilha do Google, precisamos instalar algumas dependências. No terminal, navegue até a pasta do seu projeto e execute os seguintes comandos:npm install google-spreadsheetnpm install dotenv

A dependência “google-spreadsheet” nos permitirá se comunicar com a API do Google Sheets, enquanto a dependência “dotenv” nos permitirá armazenar informações de autenticação em um arquivo “.env”.

4. Configurando a autenticação

Crie um novo projeto no Console de APIs do Google: https://console.developers.google.com/

Crie uma credencial OAuth2 para o projeto com as seguintes informações:

Tipo de aplicativo: Aplicativo da Web

Nome: NomeDoProjeto

URLs autorizados de JavaScript: http://localhost:3000

URI de redirecionamento autorizados: http://localhost:3000/oauth2callback

Após criar a credencial, você receberá um ID do cliente e uma chave secreta. Anote essas informações para usar posteriormente.

Acesse a planilha do Google que você criou anteriormente e compartilhe-a com o e-mail do cliente criado na credencial.

5. Configurando as variáveis de ambiente

Crie um arquivo .env na raiz do projeto e adicione as seguintes linhas:

GOOGLE_CLIENT_EMAIL=sua_conta_de_email_do_google

GOOGLE_PRIVATE_KEY=chave_privada_do_cliente_do_google

Substitua sua_conta_de_email_do_google pela sua conta de e-mail do Google e chave_privada_do_cliente_do_google pela chave secreta que você recebeu ao criar a credencial do Google.

Observe que a chave secreta tem várias quebras de linha. Certifique-se de que você copie todas as linhas e as cole no arquivo .env, incluindo as quebras de linha.

6. Conectando-se à planilha do Google

Agora podemos conectar o nosso aplicativo React Native à planilha do Google. Abra o arquivo App.js em seu projeto e adicione o seguinte código:

import { GoogleSpreadsheet } from ‘google-spreadsheet’;

import { useEffect } from ‘react’;

import { GOOGLE_CLIENT_EMAIL, GOOGLE_PRIVATE_KEY } from ‘@env’;

const doc = new GoogleSpreadsheet(‘ID_da_sua_planilha’);

async function connectToSpreadsheet() {

    await doc.useServiceAccountAuth({

        client_email: GOOGLE_CLIENT_EMAIL,

        private_key: GOOGLE_PRIVATE_KEY.replace(/\n/g, ‘\n’),

    });

    await doc.loadInfo();

    console.log(Connected to ${doc.title});

    }

export default function App() {

    useEffect(() => {

    connectToSpreadsheet();

}, []);

    return (

    // Seu código de interface do usuário aqui

    );

}

Observe que substituímos “ID_da_sua_planilha” pelo ID da planilha do Google que você criou anteriormente. Você pode encontrar o ID da planilha no URL da planilha (por exemplo, https://docs.google.com/spreadsheets/d/ID_da_sua_planilha/edit#gid=0).

O código acima se conectará à planilha do Google usando as credenciais que armazenamos no arquivo .env e carregará as informações da planilha. Quando o aplicativo é iniciado, ele chama a função connectToSpreadsheet() usando o hook useEffect() do React.

7. Adicionando agendamentos à planilha do Google

Agora podemos adicionar agendamentos à planilha do Google usando a API do Google Sheets. Adicione o seguinte código abaixo da função connectToSpreadsheet():

async function addAppointment(name, date, time) {

    const sheet = doc.sheetsByIndex[0];

    await sheet.addRow({ Nome: name, Data: date, Hora: time });

    console.log(Agendamento adicionado: ${name} em ${date} às ${time});

}

A função addAppointment() adicionará uma nova linha à planilha do Google com as informações do agendamento. Ele recebe três parâmetros: o nome do cliente, a data do agendamento e a hora do agendamento.

Agora podemos chamar essa função em qualquer lugar do nosso código para adicionar novos agendamentos à planilha do Google.

8. Exibindo agendamentos na interface do usuário

Agora que podemos adicionar agendamentos à planilha do Google, vamos exibir os agendamentos na interface do usuário do nosso aplicativo React Native. Para fazer isso, precisamos buscar as informações da planilha do Google e renderizá-las na tela.

Vamos começar adicionando o seguinte código abaixo da função addAppointment() no arquivo App.js:const [appointments, setAppointments] = useState([]);
async function getAppointments() {    const sheet = doc.sheetsByIndex[0];    const rows = await sheet.getRows();    const data = rows.map((row) => ({        id: row._rowNumber,        name: row.Nome,        date: row.Data,        time: row.Hora,    }));        setAppointments(data);}

O código acima busca as informações da planilha do Google e converte cada linha em um objeto com as propriedades id, name, date e time. Ele armazena esses objetos em um estado appointments usando o hook useState() do React.

Em seguida, adicionaremos o seguinte código ao corpo da função App() para chamar a função getAppointments() usando o hook useEffect() do React e renderizar os agendamentos na tela:

useEffect(() => {

    connectToSpreadsheet();

    getAppointments();

}, []);

return (

<View>

    <Text>Agendamentos:</Text>

    {appointments.map((appointment) => (

    <View key={appointment.id}>

        <Text>Nome: {appointment.name}</Text>

        <Text>Data: {appointment.date}</Text>

        <Text>Hora: {appointment.time}</Text>

    </View>

    ))}

</View>

);

O código acima renderiza o título “Agendamentos” na tela, seguido por uma lista de agendamentos. Ele usa o método map() do JavaScript para renderizar cada objeto de agendamento em uma View com três Texts para exibir o nome, data e hora do agendamento.

9. Testando o aplicativo

Agora podemos testar nosso aplicativo React Native e verificar se ele se conecta à planilha do Google e exibe os agendamentos corretamente.

No terminal, navegue até a pasta do seu projeto e execute o seguinte comando para iniciar o aplicativo:

npx react-native run-android

Certifique-se de ter um dispositivo Android conectado ou um emulador Android em execução no seu computador.

Quando o aplicativo é iniciado, ele deve se conectar à planilha do Google e exibir os agendamentos na tela.

Para adicionar um novo agendamento, você pode chamar a função addAppointment() em qualquer lugar do seu código com os parâmetros apropriados. Depois de adicionar um agendamento, você deve ver o novo agendamento na lista quando a página é atualizada.

Parabéns, você criou com sucesso um aplicativo React Native conectado a uma planilha do Google para agendamentos!