Pular para conteúdo

Exercícios de Fixação – Aula 14 ☁️

Exercício 01: Configuração do Projeto Cloud

Acesse o console do Firebase ou do Supabase. 1. Crie um novo projeto chamado "MeuProjetoReact". 2. Ative o Banco de Dados (Firestore ou PostreSQL). 3. Copie as chaves de configuração.

Exercício 02: Inserção de Dados

No seu componente React: 1. Instale o SDK (ex: npm install firebase). 2. Crie uma função que salve um objeto { nome: 'Teste', data: new Date() } no banco ao clicar em um botão. 3. Verifique no console da nuvem se o dado apareceu.

🟡 Nível: Intermediário

Exercício 03: Listagem em Tempo Real

  1. Use a função de escuta (ex: onSnapshot no Firebase ou subscribe no Supabase).
  2. Exiba uma lista de itens vinda do banco.
  3. Peça para um colega adicionar um item no banco e veja se ele aparece na sua tela sem você dar Recarregar.

Exercício 04: Upload de Imagem (Storage)

Configure o Storage na sua plataforma cloud. 1. Crie um campo de input do tipo file. 2. Implemente a lógica para subir o arquivo e exibir a URL da imagem na tela após o sucesso.

📚 Gabarito e Soluções Comentadas

Gabarito Explicado ### Questão 1: Crie um novo projeto chamado "MeuProjetoReact". **Resolução e Implementação:** 
// Solução de referência para: Crie um novo projeto chamado "MeuProjetoReact".
function solucaoExercicio() {
    console.log("Executando validação de: Integração com Backend: Firebase e Supabase ☁️");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Integração com Backend: Firebase e Supabase ☁️**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 2: Ative o Banco de Dados (Firestore ou PostreSQL). **Resposta Comentada:** - **Fundamentação:** No contexto de **Integração com Backend: Firebase e Supabase ☁️**, o conceito abordado (Ative o Banco de Dados (Firestore ou PostreSQL).) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Copie as chaves de configuração. **Resposta Comentada:** - **Fundamentação:** No contexto de **Integração com Backend: Firebase e Supabase ☁️**, o conceito abordado (Copie as chaves de configuração.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 1: Instale o SDK (ex **Resposta Comentada:** - **Fundamentação:** No contexto de **Integração com Backend: Firebase e Supabase ☁️**, o conceito abordado (Instale o SDK (ex) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 2: Crie uma função que salve um objeto `{ nome **Resolução e Implementação:** 
// Solução de referência para: Crie uma função que salve um objeto `{ nome
function solucaoExercicio() {
    console.log("Executando validação de: Integração com Backend: Firebase e Supabase ☁️");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Integração com Backend: Firebase e Supabase ☁️**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 3: Verifique no console da nuvem se o dado apareceu. **Resposta Comentada:** - **Fundamentação:** No contexto de **Integração com Backend: Firebase e Supabase ☁️**, o conceito abordado (Verifique no console da nuvem se o dado apareceu.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 1: Use a função de escuta (ex **Resolução e Implementação:** 
// Solução de referência para: Use a função de escuta (ex
function solucaoExercicio() {
    console.log("Executando validação de: Integração com Backend: Firebase e Supabase ☁️");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Integração com Backend: Firebase e Supabase ☁️**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 2: Exiba uma lista de itens vinda do banco. **Resposta Comentada:** - **Fundamentação:** No contexto de **Integração com Backend: Firebase e Supabase ☁️**, o conceito abordado (Exiba uma lista de itens vinda do banco.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 3: Peça para um colega adicionar um item no banco e veja se ele aparece na sua tela sem você dar Recarregar. **Resposta Comentada:** - **Fundamentação:** No contexto de **Integração com Backend: Firebase e Supabase ☁️**, o conceito abordado (Peça para um colega adicionar um item no banco e veja se ele aparece na sua tela sem você dar Recarregar.) é essencial para assegurar que os requisitos do sistema sejam estruturados de forma padronizada e escalável. - **Justificativa Técnica:** A abordagem recomendada prioriza baixo acoplamento, alta coesão e facilidade de manutenção em ambientes de produção, evitando retrabalho e inconsistências operacionais. ### Questão 1: Crie um campo de input do tipo `file`. **Resolução e Implementação:** 
// Solução de referência para: Crie um campo de input do tipo `file`.
function solucaoExercicio() {
    console.log("Executando validação de: Integração com Backend: Firebase e Supabase ☁️");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Integração com Backend: Firebase e Supabase ☁️**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda. ### Questão 2: Implemente a lógica para subir o arquivo e exibir a URL da imagem na tela após o sucesso. **Resolução e Implementação:** 
// Solução de referência para: Implemente a lógica para subir o arquivo e exibir a URL da imagem na tela após o sucesso.
function solucaoExercicio() {
    console.log("Executando validação de: Integração com Backend: Firebase e Supabase ☁️");
    return true;
}

solucaoExercicio();
- **Explicação:** A solução atende diretamente aos requisitos de **Integração com Backend: Firebase e Supabase ☁️**, garantindo tipagem consistente, legibilidade e tratamento de casos de borda.