- Explique como os aplicativos da web enviam dados para o armazenamento em nuvem.
- Diferencie entre armazenamento de arquivos na nuvem e armazenamento de banco de dados na nuvem
- Entenda o que é o Supabase e como configurar seu próprio armazenamento em nuvem
- Um projeto Supabase com um banco de dados para armazenar o feedback das partes interessadas
- Kit de ferramentas do fundador atualizado onde o feedback das partes interessadas é armazenado no banco de dados Supabase, com a possibilidade de adicionar/editar/excluir registros
- estudantes unidades técnicas anteriores trabalhando no Kit de Ferramentas do Fundador.
Do armazenamento local para o armazenamento em nuvem
Seu Kit de Ferramentas do Fundador tem crescido a cada unidade. Você criou módulos para coleta de feedback, acompanhamento das partes interessadas e análise baseada em IA. Essas ferramentas estão ajudando você a desenvolver sua ideia de negócio e, ao mesmo tempo, a entender como se adaptar à sua ideia.
Todos os seus dados estão atualmente armazenados no localStorage.
Mas há uma limitação que se torna um problema assim que você tenta trabalhar com outras pessoas ou usar o app do seu espaço de código GitHub atual.
Os aplicativos de sucesso que atendem usuários reais precisam de dados que:
Os dados persistem
Os usuários podem confiar suas informações a você.
Funciona em todos os dispositivos
As pessoas alternam entre navegadores, computadores, telefones, etc.
Permite a colaboração
Equipes comerciais e de desenvolvimento como a sua precisam compartilhar informações.
Pode crescer e expandir
O que funciona para um usuário deve funcionar para mil
Esta unidade é o seu primeiro passo no armazenamento em nuvem. Você atualizará o seu Kit de Ferramentas do Fundador para que os dados armazenados no localStorage agora sejam armazenados com segurança na nuvem e acessíveis de qualquer lugar. Mais importante ainda, você aprenderá padrões que se aplicam a outras situações para armazenar dados na nuvem.
Armazenamento em nuvem
O armazenamento em nuvem pode ser considerado de duas maneiras principais, e compreender a diferença ajuda você a fazer a escolha certa para diferentes tipos de dados.
- O armazenamento de arquivos é ótimo para arquivos que os usuários enviam ou baixam. Todas o projeto são exemplos perfeitos, pois são documentos que você deseja armazenar e recuperar para poder colaborar com outras pessoas de qualquer lugar. No momento, você provavelmente está usando o Google Drive como método de armazenamento de arquivos.
- O armazenamento em banco de dados é usado quando você tem informações estruturadas, como registros de partes interessadas com nomes, tipos e campos de feedback.
Por enquanto, vamos nos concentrar no armazenamento em banco de dados.
Escolhendo um serviço de armazenamento em nuvem
Existem muitas opções de armazenamento em nuvem disponíveis. Aqui está uma comparação das mais populares para quem está começando a construir seu MVP.
Serviço
Complexidade da configuração
Nível gratuito
Preços após o nível gratuito
Ideal para
Supabase
Simples
- 500 MB de armazenamento de banco de dados
- 1 GB de armazenamento de arquivos
- Limites generosos da API
- Solicitações de API ilimitadas*
R$ 25/mês
- Startups criando MVPs
- Aprendendo SQL
- Aplicativos que requerem autenticação + banco de dados
Firebase
Simples
- 1 GB de armazenamento de arquivos
- 1 GB de armazenamento de banco de dados
- Limites generosos da API
- Sincronização em tempo real incluída
Pagamento conforme o uso (US$ 0,18/GB de armazenamento, $0,06/GB de downloads)
- Ecossistema Google
- Aplicativos em tempo real
- aplicativos
- Iniciantes (mais simples que SQL)
MongoDB Atlas
Médio
- 512 MB de armazenamento de banco de dados
- Cluster compartilhado
- Conexões limitadas
US$ 9/mês (cluster dedicado)
- Bancos de dados NoSQL
- Esquemas de dados flexíveis
- Armazenamento baseado em documentos
- Dimensionamento de grandes conjuntos de dados
Amazon Web Services/ Google Cloud Platform
Complexo
- Limitado (varia de acordo com o serviço)
- Testes de 12 meses disponíveis
- Frequentemente requer cartão de crédito
Variável (depende muito do uso)
- Aplicações empresariais
- Precisa de controle total da infraestrutura
- Requisitos avançados de dimensionamento
- Equipes com experiência em DevOps
Para esta lição, estamos usando o armazenamento Supabase .
Por que Supabase?
- Sem configurações complexas ou necessidade de cartão de crédito
- Um plano gratuito generoso que realmente funciona para MVPs. Alguns “planos gratuitos” são tão limitados que são essencialmente apenas versões de teste. A partir de 22 de janeiro de 2026, o Supabase oferece 1 GB de armazenamento e solicitações de API ilimitadas por mês gratuitamente. Isso é suficiente para criar, testar e até mesmo lançar seu MVP sem se preocupar com contas inesperadas. À medida que sua startup cresce, o Supabase oferece opções que se adaptam às suas necessidades.
- Uma plataforma para todo o seu armazenamento backend
- O Supabase não é apenas para MVPs. Atualmente, empresas com milhões de usuários utilizam o Supabase, portanto, suas habilidades aqui serão diretamente transferíveis para outras áreas.
Você precisará criar uma conta e um projeto Supabase e obter uma chave API, semelhante ao Google AI Studio e ao Hugging Face. Os conceitos são os mesmos: você está configurando o acesso a um serviço externo com o qual o app .
A diferença é que o Supabase se tornará uma parte mais central da sua infraestrutura. Enquanto o Gemini lida com uma tarefa específica, que é a análise aII, o Supabase pode lidar com seu armazenamento, banco de dados e, potencialmente, autenticação de usuários. Basicamente, ele estabelece toda a base para o app.
Segurança
É importante considerar a segurança ao criar e usar o armazenamento em nuvem. O Supabase permite que você configure níveis de segurança para diferentes funções em o app. Em um nível básico, ativar o RLS (Segurança em Nível de Linha) é como trancar a porta da frente. Sem isso, seu banco de dados é um livro aberto. Uma vez trancado, temos que criar “chaves digitais” específicas para diferentes grupos. Para o nosso Kit de Ferramentas do Fundador, queremos permitir que as partes interessadas insiram seus próprios comentários diretamente. Mas não queremos dar a elas (e a qualquer pessoa que abra nosso aplicativo) a capacidade de visualizar, editar ou excluir registros no banco de dados. No entanto, precisamos que os membros da equipe tenham acesso total. Portanto, configuraremos dois níveis de permissões para nosso banco de dados.
Estamos implementando duas funções distintas:
- Partes interessadas (Anônimo): Acesso público a Inserir registros. Eles podem contribuir, mas não podem alterar o histórico.
- A equipe (autenticada): Acesso seguro por e-mail e senha. Este nível "Admin" concede poderes totais para criar, ler, atualizar e excluir (CRUD) registros para manter o kit de ferramentas organizado.
ATIVIDADE 1
Crie sua conta e projeto Supabase
Tempo estimado: 15 minutos
Você criará uma conta e um projeto Supabase, configurará sua tabela Stakeholders e obterá uma chave API para acessar a tabela a partir o app.
1. Crie sua conta Supabase
- Acesse supabase.com para criar uma conta
- Clique para se inscrever. Recomendamos que você se inscreva com sua conta do GitHub para manter tudo organizado.
2. Criar um novo projeto
- Após se inscrever, clique para criar um Novo Projeto.
- Insira o projeto .
- Crie uma senha forte ou clique em “gerar uma senha para criá-la automaticamente”.
- Guarde essa senha em um local seguro, pois você precisará dela para acessar diretamente o banco de dados.
- Selecione sua organização (a versão gratuita pode permitir apenas uma organização e mostrará uma organização padrão).
- Selecione a região mais próxima de você e dos seus usuários. Isso afeta o desempenho, pois os dados armazenados mais perto deles serão carregados mais rapidamente.
- Em Opções de Segurança:
- Mantenha a configuração padrão “API de dados + cadeia de conexão”, pois ela oferece mais flexibilidade e simplicidade ao usar a API ou conectar-se diretamente ao banco de dados.
- Mantenha a configuração padrão “Usar esquema público para API de dados”. Essa é uma configuração padrão que funciona para a maioria dos aplicativos. A opção “esquema de API dedicado” é para necessidades avançadas de segurança que você não precisa no momento.
- Clique para criar um novo projeto e aguarde até que ele seja concluído (1 a 2 minutos).
3. Criar uma tabela de banco de dados
Vamos criar uma tabela em nosso banco de dados para os comentários das partes interessadas.
- Em “Crie seu banco de dados”, clique no botão “Editor de tabelas ”.
- Clique em Criar uma tabela.
- Nomeie a tabela como “Partes interessadas” e forneça uma descrição.
- O Supabase inicia a tabela com um id e um timestamp, chamado created_at. Mantenha essas colunas, pois é útil ter um id para cada linha da tabela e pode ser útil saber quando essas linhas são adicionadas à tabela.
- O que mais precisamos adicionar? Consulte a guia Rastreador de partes interessadas no Kit de ferramentas do fundador. O formulário inclui nome, tipo e feedback principal. Adicione essas três colunas e defina o tipo como texto.
- Clique para salvar a tabela.
4. Configure a política de segurança para acesso ao banco de dados
- No Editor de tabelas, clique nos três pontos ao lado da tabela Stakeholder e clique em Exibir políticas.
- O RLS deve estar ativado. Se não estiver, ative o RLS (Segurança em nível de linha). Isso permite que você defina exatamente quem tem acesso às tabelas em seu banco de dados e aplicativo.
- Clique em Criar política para configurar uma política RLS para sua equipe.
- Na próxima janela,
- Digite Acesso à equipe para Nome da política.
- Selecione TODOS para Comando de Política.
- Para Funções de destino, no menu suspenso, selecione autenticado.
- Após o uso, digite true.
- Após a verificação, digite true.
- Clique em Salvar política.
Isso permite que usuários autenticados (a equipe) tenham acesso total de leitura/gravação/exclusão à tabela.
- Adicione outra política (clique em“Criar política” novamente), desta vez para as partes interessadas.
Isso permitirá que as partes interessadas enviem comentários diretamente pelo aplicativo. Desta vez: - Digite o acesso das partes interessadas para o nome da política.
- Selecione INSERIR para Comando de Política.
- Para Funções-alvo, no menu suspenso, selecione anon.
- Após o uso, digite true
- Após a verificação, digite true.
- Clique em Salvar política.
5. Adicionar usuários
Agora você precisa adicionar usuários autenticados ao seu banco de dados. Podem ser todos os membros da sua equipe, mas, por enquanto, basta adicionar a si mesmo como usuário para poder executar e testar o aplicativo.
- No lado esquerdo da tela, em Autenticação, clique em Usuários.
- Clique em Adicionar usuário.
- Digite seu endereço de e-mail, uma senha que você vai lembrar (ou salve em algum lugar), deixe a opção Confirmação automática marcada e clique em Criar usuário.
Atualmente, nosso Kit de Ferramentas do Fundador armazena tudo em um armazenamento local. Poderíamos começar do zero com nosso banco de dados Supabase, mas como já temos um feedback significativo das partes interessadas sobre execuções anteriores do Kit de Ferramentas, vamos transferir os dados que já temos para nossa tabela de Partes Interessadas no Supabase. Poderíamos fazer isso manualmente, copiando e colando, e poderíamos até pedir a um LLM para fazer o trabalho por nós.
Mas, como nossos dados estão em JSON, podemos usar o editor SQL do Supabase para inserir os registros na tabela, usando SQL. SQL, ou Linguagem de Consulta Estruturada, é uma linguagem específica de domínio usada para gerenciar dados, especialmente em um sistema de gerenciamento de banco de dados relacional.
ATIVIDADE 2
Mover o armazenamento local para o armazenamento em nuvem
Tempo estimado: 15 minutos
Você extrairá as informações das partes interessadas do armazenamento local no navegador e, em seguida, as importará para sua tabela Supabase.
1. Extrair JSON do LocalStorage
- Volte ao seu Codespace e inicie o seu Kit de Ferramentas do Fundador.
- Abra as Ferramentas do Desenvolvedor no navegador e clique em Aplicativo na janela das ferramentas do desenvolvedor para visualizar o localStorage.
- Encontre as informações de feedback das partes interessadas no localStorage e clique com o botão direito do mouse na primeira linha JSON. Você verá um menu pop-up onde poderá copiar o valor.
- Abra um editor de texto (TextEdit ou Notepad) e cole o JSON em um documento em branco.
- Visualize o arquivo e observe que os nomes de cada chave estão no JSON, pois podem diferir ligeiramente das colunas na tabela Supabase.
Este é o nosso exemplo JSON abaixo
[
{
"name": "Jill Stein",
"type": "interview",
"feedback": "She is a teacher and knows many students this is a problem for. She thinks bringing in the parents and family to give them some education on the issue is helpful. Also bringing in the school admin to see how they can support. Also, many students do not have good internet access, especially in rural areas.",
"timestamp": "2026-01-14T03:47:10.531Z"
},
{
"name": "Phil Green",
"type": "email",
"feedback": "He is a student and has this issue. He does not have good internet access and he does not have transportation to get to a library either. He would need a way to get access during the school day or a means to access it otherwise. ",
"timestamp": "2026-01-14T03:48:13.193Z"
},
{
"name": "Billy Bob",
"type": "interview",
"feedback": "I absolutely love this idea. We need it!",
"timestamp": "2026-01-16T01:43:12.027Z"
},
{
"name": "Anna Banana",
"type": "email",
"feedback": "This is really a bad idea. I don't like it.",
"timestamp": "2026-01-16T01:46:33.361Z"
},
{
"name": "Millicent Penny",
"type": "interview",
"feedback": "I Love it! Best idea ever.",
"timestamp": "2026-01-16T01:50:46.785Z"
},
{
"name": "Fred Flintston",
"type": "interview",
"feedback": "This is probably the worst idea I have ever heard. Do not like it.",
"timestamp": "2026-01-16T01:52:06.319Z"
},
{
"name": "Betty White",
"type": "email",
"feedback": "Do not do it. It is a bad idea.",
"timestamp": "2026-01-16T01:53:19.377Z"
},
{
"name": "Mary Contrary",
"type": "email",
"feedback": "This is absolutely the most amazing idea I have ever heard. I absolutely love it.",
"sentiment": "positive",
"timestamp": "2026-01-16T02:05:42.541Z"
}
]
2. Transferir os dados para o Supabase
- Abra seu projeto Supabase e, no menu de ícones à esquerda, clique em Editor SQL.
- Cole o seguinte código no Editor SQL.
INSERT INTO "Stakeholders" (name, type, feedback, created_at)
SELECT
value->>'name',
value->>'type',
value->>'feedback',
(value->>'timestamp')::timestamp
FROM json_array_elements('YOUR JSON HERE'::json) AS value;
- Veja o código para entender como funciona.
A primeira linha INSERT INTO especifica que você deseja inserir dados na tabela Stakeholders, especificamente nessas 4 colunas.
Edite esta linha para corresponder aos nomes da tabela e das colunas da sua tabela Supabase exatamente. - A linha SELECT especifica quais campos/chaves você deseja extrair do seu JSON.
Edite para alterar qualquer um dos campos listados para corresponder exatamente as chaves no seu JSON.- valor->>'nome' significa “obter o campo ‘nome’ do JSON”
- ::timestamp significa “converter a string para um formato de carimbo de data/hora”
- A linha FROM especifica que a matriz JSON é um conjunto de linhas que você deseja percorrer. Cada registro ou linha é chamado de valor. Cole seu JSON entre as aspas ‘ ‘ na linha FROM.
- Clique no botão Executar para executar o comando SQL.
- Se você receber algum erro, tente depurar o problema ou peça ajuda a um LLM. Caso contrário, você deverá ver uma mensagem de sucesso.
- Volte ao Editor de Tabelas. Você deverá ver seus registros adicionados à tabela.
ATIVIDADE 3
Atualizar o Kit de Ferramentas do Fundador para armazenar na nuvem
Tempo estimado: 15 minutos
Agora você adicionará recursos de inserção para que as partes interessadas possam adicionar seus próprios comentários, além de acesso de leitura/gravação/exclusão ao banco de dados das partes interessadas para os membros da equipe.
1. Abra seu repositório GitHub e o espaço de código
Como faremos muitas alterações no código, sugerimos seguir todo o fluxo de trabalho do Git das unidades anteriores.
- Acesse o GitHub e abra o repositório do Kit de Ferramentas do Fundador.
- Crie uma nova ramificação a partir da principal e nomeie-a supabase-cloud-storage
- Abra seu Codespace anterior e faça o checkout do novo branch lá.
- Aguarde o carregamento do ambiente.
2. Adicione credenciais ao seu arquivo “.env”
Você precisará da URL do seu projeto Supabase e da chave publicável, que é essencialmente a sua API para o seu banco de dados.
- No Supabase, clique no ícone da engrenagem na esquerda para acessar as configurações do projeto.
- Clique em API de dados para encontrar a URL do projeto.
- Clique em Chaves API à esquerda e você encontrará sua chave publicável lá.
- No Codespaces, abra seu arquivo “.env” e adicione estas duas linhas:
SUPABASE_URL=SUA_URL_DO_PROJETO_SUPABASE
SUPABASE_ANON_KEY=SUA_CHAVE_PUBLICÁVEL_SUPABASE
- Copie/cole o texto acima e substitua pelo o projeto e pela chave publicável do Supabase.
3. Instrua o Copilot para adicionar o recurso de armazenamento Supabase
Faremos isso em algumas etapas, pois há muitos detalhes envolvidos, portanto, adicionar um pouco de cada vez ajuda na depuração e na resolução de problemas que possam surgir.
Comece com uma solicitação como a seguinte:
Atualize a guia Rastreador de partes interessadas para fazer o seguinte.
- Remova a exibição da tabela de partes interessadas e deixe apenas o formulário.
- Em vez de salvar as informações no armazenamento local, elas agora serão salvas no Supabase. O nome da tabela é Stakeholders. Use a função anônima.
- O arquivo .env já inclui SUPABASE_URL e SUPABASE_ANON_KEY.
- Certifique-se de atualizar a Política de Segurança de Conteúdo para permitir os endpoints do Supabase.
- A inserção para usuários anônimos deve não tentar ler os dados após a inserção, pois isso falhará porque eles têm apenas permissões de INSERT.
- Exiba uma mensagem de sucesso quando o registro for adicionado ao Supabase.
4. Execute e teste o aplicativo
Siga todas as instruções de instalação fornecidas pelo Copilot para instalar os pacotes.
- Execute o aplicativo e tente adicionar um novo participante com algum feedback. Você deverá receber uma mensagem de confirmação informando que a operação foi bem-sucedida.
- Acesse o Editor de tabelas no Supabase e veja se a tabela foi atualizada com o novo registro. Talvez seja necessário atualizar o navegador para ver o novo registro.
- Solucione problemas com a ajuda de LLMs para garantir que o aplicativo funcione corretamente.
5. Adicionar login de administrador
- Peça à Copilot para adicionar a funcionalidade de fazer login como administrador, a fim de poder visualizar todos os registros das partes interessadas.
Este é um exemplo de prompt:
- Adicione o botão “Login de administrador” à tela Rastreador de partes interessadas.
- Mostrar formulário de e-mail/senha.
- Use Supabase auth.signIn() para autenticar o usuário.
- Se estiver conectado, exiba a tabela de partes interessadas na tela, abaixo do formulário.
- Exiba também um botão de logout para usuários conectados.
- Se não estiver conectado, mostre apenas o formulário, não a tabela.
- Execute o app e faça login como administrador, usando o e-mail/senha que você configurou no Supabase. Após o login, você poderá ver a tabela Stakeholder na guia Stakeholder Tracker.
- Saia da sua conta. A tabela não deve aparecer.
- Solucione problemas com a ajuda de LLMs para garantir que o aplicativo funcione corretamente.
6. Adicionar recursos de edição e exclusão
- Peça ao Copilot para adicionar recursos de edição e exclusão para usuários administradores que estiverem conectados.
Este é um exemplo de prompt:
Apenas para usuários administradores, adicione botões para editar e excluir cada linha da tabela de partes interessadas.
Esses botões devem funcionar para editar e excluir essas linhas na tabela Supabase.
- Execute o aplicativo novamente. Tente adicionar, editar e excluir um registro e verifique se a tabela no Supabase é atualizada corretamente.
- Saia da sua conta e verifique se ainda consegue adicionar um registro, mas nada mais.
- Solucione problemas com a ajuda de LLMs para garantir que o aplicativo funcione corretamente.
7. Teste em vários dispositivos
Além de os dados das partes interessadas estarem seguros e protegidos, armazená-los na nuvem significa que eles ficam acessíveis o app , onde quer que eles estejam. Isso pode abrir novas possibilidades, como permitir que as partes interessadas adicionem seus próprios comentários diretamente e que vários membros da equipe acessem os dados a partir de seus celulares.
Este é o verdadeiro poder do armazenamento em nuvem. Para testá-lo enquanto o app ainda o app em desenvolvimento no Codespaces, faça o seguinte.
- Inicie o app Codespaces digitando npm start.
- Encontre a guia Portas no painel inferior, ao lado de Terminal.
- Você deve ver sua porta em execução (por exemplo, 3000).
- Clique com o botão direito do mouse na porta, vá para Visibilidade da porta e selecione Pública. A visibilidade mudará para Pública na janela.
- Clique com o botão direito do mouse novamente na porta e clique em Copiar endereço local. Esse é o URL do aplicativo.
- Cole o URL em algum lugar onde você possa acessá-lo pelo seu celular. Você deverá ver o app nesse local. Teste adicionar um novo participante, fazer login como administrador, etc.
- Depois de testar corretamente, certifique-se de definir a visibilidade da porta de volta para Privada ou simplesmente encerre o app. Caso contrário, o app totalmente aberto e desprotegido.
8. Verifique se o arquivo ENV está sendo ignorado.
Quando estiver satisfeito com o funcionamento do seu Stakeholder Tracker para armazenar, atualizar e excluir registros no Supabase, e ele funcionar em mais de um dispositivo, é hora de fazer o commit e o push.
Mas primeiro, abra seu arquivo .gitignore e certifique-se de que ele contenha o arquivo .env, pois, como você aprendeu anteriormente, isso evita que suas credenciais Supabase sejam enviadas para o GitHub, mantendo-as seguras e protegidas.
9. Confirme e envie as alterações para o Github
- Quando estiver satisfeito e tiver verificado que tudo funciona, confirme e envie suas alterações para o Github, usando o recurso Controle de código-fonte no Codespaces ou digitando os comandos git em uma janela do terminal.
- Acesse o GitHub, mescle a solicitação pull e exclua o branch.
Reflexão
Você transferiu os comentários das partes interessadas armazenados localmente para a nuvem, onde agora estão disponíveis para os usuários do aplicativo. O armazenamento em nuvem é um recurso comum na maioria dos aplicativos, e é importante saber como implementá-lo.
Termos-chave
- Armazenamento de arquivos na nuvem: Armazenamento de arquivos (PDFs, imagens, documentos) em servidores remotos que podem ser acessados pela Internet a partir de qualquer dispositivo.
- Banco de dados em nuvem: Armazenamento de dados estruturados (linhas e colunas) em servidores remotos
- Supabase: Uma plataforma que fornece serviços de armazenamento, banco de dados e autenticação com um generoso nível gratuito, projetada para startups e MVPs.
- Persistência:dados que permanecem salvos mesmo após fechar o navegador, reiniciar o dispositivo ou trocar de dispositivo.
Operações CRUD:As quatro funções básicas do armazenamento de dados:
- Criar – Adicionar novos registros (INSERT)
- Ler – Recuperar e exibir dados (SELECT)
- Atualização – Modificar registros existentes (UPDATE)
- Excluir – Remover registros (DELETE)
- SQL (Structured Query Language):Linguagem de programação usada para gerenciar e consultar bancos de dados relacionais.
- Segurança em nível de linha (RLS) – Recurso de segurança que controla quais usuários podem acessar quais linhas em uma tabela de banco de dados.
Recursos adicionais
- Documentação Javascript do Supabase – Guia oficial de integração do Supabase usando Javascript
- Tutorial SQL da W3Schools
