Na Prática: Construindo um App 100% com Google + Supabase + Vercel

Como Construir um Sistema Completo com Banco de Dados?

Introdução ao Vídeo

• O vídeo ensina a construir um sistema completo com banco de dados, desde a concepção até a implementação.

• O apresentador, Nate, destaca que muitos inscritos pediram esse conteúdo após o último vídeo sobre banco de dados.

Conceitos Básicos

• Explicação sobre o Local Storage: armazena informações no navegador e é resetado ao apagar o histórico.

• Importância da segurança na conexão do banco de dados; conectar diretamente no Google Studio é considerado amador.

Estrutura do Projeto

• O vídeo faz parte de uma série maior, onde este é o segundo projeto. Uma playlist será disponibilizada para acompanhamento.

• A construção do sistema será mais completa que a anterior, preparando a base para futuras evoluções.

Desenvolvimento no Google Studio

• O apresentador menciona que usará um prompt completo para iniciar o projeto no Google Studio.

• A ideia inicial não inclui um banco de dados; primeiro se constrói a interface e depois se leva para outra plataforma (Ancraft).

Criação do Sistema

• O objetivo é criar um sistema de assinatura que controle clientes, planos e pagamentos.

• Demonstração do sistema chamado "subcontrol", que já possui uma estrutura básica pronta para uso sem necessidade imediata de credenciais reais.

Próximos Passos

• Embora o sistema esteja estruturado, ainda não está funcional; foco atual é conectar ao banco de dados posteriormente.

• No próximo vídeo, será abordado como desenhar o design do sistema antes da implementação no Google Studio.

Conexão do Banco de Dados e Preparação do Sistema

Preparação Inicial

• O vídeo aborda a preparação e o onboard do sistema antes de implementá-lo no Google Studio, destacando a importância de diferenciar o aplicativo de outros já existentes.

• O apresentador menciona que prefere transferir o código para o Craft antes de salvá-lo no GitHub, buscando controle total sobre o sistema.

Segurança das Chaves do Banco de Dados

• É enfatizado que não se deve expor as chaves do banco de dados no front-end, pois isso pode permitir acesso indesejado por hackers.

• A abordagem recomendada é construir todo o design e funcionalidades do sistema primeiro, antes de integrar com o banco de dados.

Download e Transferência para Antigraft

• Após finalizar a construção inicial, o próximo passo é baixar o código desenvolvido. O apresentador orienta como fazer isso através da opção "download app".

• O processo inclui descompactar a pasta baixada para garantir que os arquivos estejam prontos para uso no Antigraft.

Uso do Antigraft

• Ao abrir o Antigraft, é importante selecionar a pasta correta onde está localizado o projeto baixado.

• Com todos os arquivos carregados no Antigraft, agora há total controle sobre as conexões do sistema sem depender mais do Google Studio.

Conexão com Banco de Dados via MCP Servers

• O Antigraft facilita a conexão com servidores MCP, permitindo integrações rápidas com serviços como Supabase.

• A interface oferece opções para escolher modelos de linguagem e planejar implementações antes da execução real dos códigos.

Como Conectar o Supabase ao Antigraft?

Criando uma Conta no Supabase

• Após a seleção inicial, o primeiro passo é conectar-se ao banco de dados usando o Supabase. É necessário criar uma conta em supabase.com.

• Ao criar a conta, escolha um nome para sua organização, que funcionará como o nome da empresa controladora dos projetos.

• O projeto deve ser nomeado (ex: "sub control") e uma senha deve ser criada e salva em local seguro.

Configurando o Projeto no Supabase

• Após a criação do projeto, ele será construído automaticamente. A região padrão pode ser mantida como "Américas".

• Para estabelecer a conexão com o Antigraft, acesse as preferências e gere um novo token de segurança chamado "sub control YouTube".

Conectando ao Antigraft

• O token gerado deve ser copiado e utilizado no Antigraft para configurar a conexão com o MCP Server do Supabase.

• No Antigraft, busque por "Super Base" nas opções adicionais para iniciar a instalação da conexão.

Estabelecendo a Conexão

• Insira o token de segurança na configuração do MCP Server e salve as alterações. A conexão levará alguns momentos para ser estabelecida.

• Uma vez conectado, todas as ferramentas disponíveis no Supabase estarão acessíveis para uso no projeto.

Finalizando a Integração

• Solicite ao agente do Antigraft que conecte seu projeto ao banco de dados MCP Server. Isso facilitará todo o processo de integração.

• O sistema fará uma análise e criará um plano para conectar os serviços necessários sem intervenção manual adicional.

• Após confirmar que tudo está correto, prossiga com a implementação das integrações necessárias como pagamentos e registro de novos usuários.

Integração com o Banco de Dados e Testes do Sistema

Navegação Inicial no Projeto

• O usuário é orientado a voltar à tela inicial do projeto, clicando em "projects" para acessar as configurações necessárias.

• É importante desabilitar a confirmação de e-mail para facilitar a criação de contas de teste, permitindo um desenvolvimento mais ágil.

Conclusão da Integração

• A integração com o banco de dados foi concluída com sucesso, indicando que o sistema está funcional.

• Um documento é enviado ao usuário detalhando as 14 funções testadas e funcionando corretamente após a integração.

Avisos de Segurança e Configurações

• O sistema apresenta avisos de segurança que devem ser lidos, mas não interferem na operação atual do sistema.

• Para utilizar o banco de dados, é necessário iniciar o servidor local usando npm dev, permitindo acesso às páginas do projeto.

Testes Práticos no Sistema

• Após iniciar o servidor, o sistema se torna funcional e acessível. Os dados demo criados anteriormente são carregados corretamente.

• O usuário verifica as tabelas no banco de dados, incluindo clientes e planos disponíveis. Realiza testes adicionando novos clientes e registrando pagamentos.

Verificação Final dos Dados

• O registro dos pagamentos é confirmado como funcional; no entanto, há uma discrepância na visualização dos novos clientes cadastrados.

• O usuário questiona se os dados mock estão prontos para garantir que tudo esteja integrado corretamente antes da finalização do processo.

Como Preparar e Hospedar um Sistema no GitHub e Versel

Preparação do Sistema

• O processo de verificação de erros é crucial antes de rodar o sistema. Após a correção, o sistema será salvo no GitHub e hospedado no Versel para funcionalidade completa.

• Um teste ao vivo é realizado utilizando um navegador específico (Antigraft), que pode ser instalado automaticamente se necessário. Isso garante que todas as funcionalidades estejam operacionais.

• A criação de clientes é demonstrada, onde um cliente fictício chamado "fulano" é adicionado ao sistema, incluindo a configuração de uma assinatura e plano.

Verificação do Banco de Dados

• O pagamento do cliente "fulano" pelo plano Enterprise é registrado, confirmando que o banco de dados está funcionando corretamente com todos os dados atualizados.

• A funcionalidade do banco de dados é validada, mostrando que o sistema está operacional e pronto para uso.

Conexão com GitHub

• Após a validação do sistema, o próximo passo envolve conectar tudo ao GitHub para facilitar atualizações e backups. O repositório servirá como uma "caixinha preta" para armazenar o código.

• É enfatizado que ter o projeto no GitHub permite transferir códigos facilmente entre diferentes plataformas ou sistemas conforme necessário.

Criando um Repositório no GitHub

• Para criar um repositório, deve-se acessar o site do GitHub e seguir os passos para criar um novo repositório público ou privado.

• O repositório funciona como um banco seguro para armazenar códigos, permitindo acesso fácil quando necessário.

Enviando Código Manualmente

• Duas formas são apresentadas para enviar código ao GitHub: através do MCP Server ou manualmente. A preferência pessoal é por fazer isso manualmente devido à maior confiabilidade.

• Instruções detalhadas são fornecidas sobre como criar um novo repositório no GitHub, incluindo nomeação e descrição opcional.

Finalizando a Configuração

• Após criar o repositório, os próximos passos envolvem copiar o link do repositório criado e retornar ao Antigraft para prosseguir com a integração dos códigos.

Como Enviar Código para o GitHub e Configurar Versel?

Preparação do Ambiente

• O apresentador inicia o processo de configuração do ambiente, fechando terminais abertos e preparando um novo terminal para executar comandos.

• Ele menciona que não há pastas existentes no diretório atual, apenas a pasta principal chamada "subcontrol". A intenção é clonar um repositório do GitHub.

Clonagem do Repositório

• O apresentador explica que ao clonar o repositório, uma nova pasta chamada "subcontrol" será criada. Recomenda-se usar um nome diferente para evitar confusões.

• Após executar o comando git clone, ele confirma que a nova pasta foi criada com sucesso e está visível no diretório.

Transferência de Arquivos

• O próximo passo é copiar todos os arquivos da pasta original para a nova pasta "subcontrol", utilizando a função de mover arquivos.

• Uma vez que todos os arquivos estão na nova pasta, ele abre um novo terminal dentro dela e executa git status para verificar o estado dos arquivos.

Commit e Push para GitHub

• O apresentador realiza um commit inicial usando git commit -m '01', explicando que esse é o primeiro registro das alterações feitas.

• Após realizar o commit, ele utiliza git push para enviar as alterações ao repositório no GitHub, confirmando que tudo foi transferido corretamente.

Atualizações Futuras

• Ele destaca que qualquer atualização futura feita localmente será sincronizada automaticamente com o GitHub após novos commits.

• Ao fazer uma alteração em um arquivo específico (ex: pages/login), ele demonstra como essa mudança aparece como uma atualização pronta para ser enviada ao GitHub.

Configuração do Versel

• O apresentador introduz a plataforma Versel como uma solução para hospedar projetos online gratuitamente.

• Ele orienta sobre como criar uma conta na Versel conectando-a diretamente ao GitHub, facilitando a importação de projetos já existentes.

Conectando o GitHub ao Vercel

Criando uma Conta e Conectando Repositórios

• O processo começa com a criação de uma conta no Vercel usando um número de telefone, seguido pela conexão direta com o repositório do GitHub.

• Após a conexão, é importante garantir que a conta do Vercel esteja vinculada ao GitHub, onde o projeto está hospedado.

Preparação do Projeto para Deploy

• Antes de importar o projeto para o Vercel, é necessário preparar o ambiente. Isso envolve solicitar ao Antigraft que construa todo o deploy necessário.

• O plano de implementação é criado automaticamente, configurando arquivos essenciais como routers e templates.

Configuração das Variáveis de Ambiente

• É crucial configurar manualmente as variáveis de ambiente no painel do Vercel, especialmente a URL do Super Base.

• As variáveis podem ser obtidas através do Antigraft, que facilita a montagem das credenciais necessárias para integração.

Realizando o Deploy

• Após coletar as variáveis necessárias e configurá-las corretamente no sistema, realiza-se o deploy aguardando sua atualização.

• A preparação prévia do projeto é fundamental para evitar erros durante a importação e implementação no Vercel.

Verificação Final e Funcionamento do Sistema

• Após concluir todas as etapas, recomenda-se verificar as configurações nas "environment variables" para assegurar que tudo está correto.

• Com tudo funcionando adequadamente, os dados são sincronizados entre o sistema e o GitHub através dos commits realizados.

• O projeto já está hospedado na plataforma Vercel com um domínio próprio, permitindo acesso imediato às funcionalidades implementadas.

Como Criar e Integrar um Sistema com Antigraft e Versel?

Introdução ao Sistema

• O sistema foi construído de forma simples, permitindo futuras implementações, como a criação de contas no login.

• A integração com o GitHub é fundamental para o funcionamento do sistema, facilitando atualizações.

Atualizações e Integração com GitHub

• Após realizar uma atualização no Antigraft, é necessário fazer um commit para salvar as mudanças.

• As atualizações feitas são automaticamente enviadas para o GitHub, onde ficam registradas.

Conexão Automática com Versel

• A Versel integra-se automaticamente ao seu repositório no GitHub, refletindo as alterações realizadas.

• Essa automação permite que as mudanças sejam visíveis diretamente no sistema sem necessidade de intervenções manuais.

Preparação do Ambiente

• O vídeo aborda a configuração do ambiente dentro do MCP Server e ajustes necessários antes da publicação final.

• Uma vez configurado corretamente, todas as atualizações feitas no Antigraft são sincronizadas diretamente na Versel.

Considerações Finais

• O apresentador encoraja os espectadores a se inscreverem e deixarem feedback positivo para apoiar a produção de conteúdo.

• Ele destaca a complexidade dos detalhes envolvidos na criação desse tipo de conteúdo educativo.