Curso Supabase Backend com FlutterFlow | Tutorial Completo

Seja muito bem-vindo ao curso de supabase supabase é um famoso back indas a service open source ou seja além de prover um banco de dados para o seu projeto também oferece serviços completos como autenticação segurança armazenamento de Mídias e funções via api supabase utiliza postgres um famoso sistema de gerenciamento de banco de dados relacional com consultas via SQL e nesse tutorial você aprenderá tudo sobre O supabase e dará seus primeiros passos na ferr Vamos explorar a plataforma por dentro e criaremos um aplicativo de cursos online EAD com flutterflow e supa base faremos as principais interações

entre o front end e o backend no nosso web e no final como incrível bônus vamos publicar nosso aplicativo para usar direto no celular e pode aproveitar que esse curso aqui é 100% gratuito e ideal para você dar os primeiros passos nesse backend e se você não me conhece meu Nome é Mateus Castelo mas pode me chamar de castelo eu faço parte da no code Startup aqui ensinamos como criar negócios lucrativos ensinando a criar aplicativos sem saber programar se você tem interesse em conteúdo de alta qualidade do mundo no code já se inscreve no canal

e deixa seu like e bora pro conteúdo que esse curso ó tá incrível você vai curtir muito e vai aprender bastante Bora lá bora começar e vamos entender o que que a gente vai ver Passo a passo nesse curso de sup base primeiro a gente vai começar explorando um pouco a ferramenta entendendo todas as funcionalidades do sup base a gente vai entrar lá vai fazer o login vai criar uma conta criar tabela mexer um pouco na ferramenta para aí sim a gente conseguir criar o nosso aplicativo de cursos EAD do flutterflow com o superbase a

gente vai ver também toda a parte planejamento aplicativo do Design e o banco de dados vamos fazer a Integração com autenticação entre o superbase e o flo Flow vamos fazer o crude que é toda a nossa interação entre o front end e o backend no nosso web e por fim como bônus vamos publicar nosso aplicativo na web e também pwa vai ser um pra gente usar direto no celular e se você quiser baixar essa apresentação em PDF e acessar os dados que a gente vai usar o nosso aplicativo eu vou deixar o link abaixo aqui

na descrição desse vídeo Tá bom mas também não é Obrigatório se você quiser você pode criar os seus dados por conta própria Mas vai ficar mais fácil para você seguir junto aqui comigo e certo Castelo o que que eu vou aprender nesse curso a gente vai entender o poder da ferramenta do supabase a gente vai ver ele na prática então Vamos explorar lá dentro da plataforma do supabase junto com o flutterflow E aí a gente vai criar um aplicativo EAD de cursos como a gente tá vendo aqui na tela um aplicativo bem Bonito bem legal

que a gente vai conseguir adicionar e fazer a gestão de cursos que a gente tá fazendo ou de videoaulas ou também se você quiser pode colocar clips no seu app E aí vai dar sua criatividade e a partir daí vamos fazer todo o crud a interação do frontend com o backend do banco de dados como eu já havia mencionado a gente vai publicar nosso aplicativo para usar ele direto no celular então tá bem legal vem Vem comigo que você vai aprender Bastante então vamos começar vamos falar um pouquinho do Poder do supabase o que que

é essa ferramenta e antes de mais nada a gente tem que falar do flutterflow então para quem não conhece a plataforma flutterflow é uma ferramenta no code para criar aplicativos robustos então a gente consegue criar apps multiplataformas quando a gente fala de multiplataforma quer dizer que funciona tanto pra web tanto PR iOS como para Android então com O mesmo código o mesmo projeto a gente consegue publicar multiplataforma por isso que o flutterflow que vem do flutter ele é muito interessante E tá tendo bastante crescimento hoje em dia na plataforma flutter flo também consegue criar projetos

com design de alto nível a gente faz todas lógicas complexas consegue ter uma conectividade de apis com outros bancos de dados externos né então a gente pode não só conectar com supabase mas com qualquer Outro banco de dados o objetivo desse curso aqui de supabase não vai ter como foco o flo Flow se você quiser aprender do zero eu vou deixar um curso gratuito que a gente tem aqui de quase 2 horas e bem completinho para você dar os primeiros passos mas quando a gente fala do flat Flow algo importante a se falar é que

a ferramenta no code ela é focada apenas no front end Ou seja a gente vai conseguir construir todas as telas a lógica parte da Inteligência mas a gente Precisa conectar a um banco de dados externo para fazer toda a nossa interação do banco de dados então tem alguns famosos bancos de dados do mercado né Por exemplo o postgres o mais KL o mongo de b e cada banco de dado vai ser diferente ele pode ser relacional né como esses dois ou ele pode ser não relacional como mongo DB então esses daqui são sistemas de gerenciamento

de bancos de dados tradicionais que a gente tem no mercado e aqui no co Startup a Gente tem um curso completo de modelagem de dados se você não viu eu recomendo eu vou deixar o link aqui no card tá bem legal eu explico passo a passo como é que funciona o banco de dados e como fazer A modelagem de um banco com o flutterflow para conectar do front end a backend a gente também pode usar backend low code né Como por exemplo o Far base e o supa base então eles não são apenas bancos de

dados eles são todo um serviço de backend então tem autenticação a Gente consegue guardar mídias a gente consegue ter vários aspectos aí de segurança e o melhor de tudo é que o flf tem uma integração Nativa com esses dois aqui com far base e com supabase ou seja ela funciona aí de uma forma bem mais fluida mais rápida não precisa fazer integração via pi que teria que fazer a aí para conectar com esses outros bancos então funciona de uma forma mais fluída porque já é nativo o flo Flow com far base e sup base se

você quiser também Tem outros backends no Coach tem o air table e o Zeno que o Zeno é uma ferramenta aí que eu recomendo bastante por é uma ferramenta bem poderosa e no momento desse vídeo ainda não tem uma integração Nativa mas eu tenho certeza que eles estão produzindo para ter uma conexão entre o flutterflow e o Zeno a diferença em resumo para esses para esses backends é que o Far B Su bage é mais low code então algumas vezes a gente vai ter que mexer um pouco em Código não vai ser tão fácil O

Zeno já é uma ferramenta no code paraa backend então é bem legal que funciona bem a gente consegue ter uma curva de aprendizado acelerada se você quer um vídeo comparativo entre essas ferramentas com comenta aqui embaixo para eu saber e para estar produzindo aí para vocês um comparativo entre o firebase o supabase Qual backend escolher pro seu projeto mas certo vamos falar então de supabase que é o foco Desse curso o que que é o supabase então o sup base ele surgiu como sendo uma alternativa ao firebase pra gente fazer todos os serviços que um

backend faz mas com modelo relacional e com modelo relacional é com tabelas que vão se conectar se você não conhece o firebase ou M DB eles utilizam modelo não relacional que a gente usa coleções de documentos e você não sabe o que é isso eu recomendo também estudar a gente tem outro curso completo de modelagem em no SQL vou deixar o Card aqui tá bem legal e bem detalhado certo Castelo Mas quais são as diferenças Quais são as funcionalidades que a gente pode ter aí do supabase vamos ver aqui ó supabase a gente tem o

banco de dados então no formato relacional que a gente vai utilizar o SQL aquela famosa linguagem para consultar nossos dados e também para criar gerir nossos dados no banco é o que a gente usa também no My KL no postgis inclusive o supabase ele utiliza O postgis como parte da sua inteligência então é um banco de dados que tá usando postes mas tem toda essa plataforma de serviços de backend isso que é bem interessante o supabase também oferece o serviço de autenticação então é um serviço que é bem completo bem seguro da gente autenticar noss

novos usuários fazer login logout cadastro esquecer a senha autenticação também com outros serviços então é bem legal suabase oferece isso também a gente tem o Serviço de Storage que a gente consegue fazer armazenamento em mías de um fotos PDF a gente consegue usar o supabase a gente também tem as funções o Ed functions e com essas funções a gente consegue fazer automações fazer o Web Hop É bem interessante mas aqui já envolve um pouquinho mais a parte de código e o supabase tem uma opção também do Banco Real Time então a gente consegue criar aplicativos

onde a gente precisa que a interação do banco seja no Mesmo momento alguns aplicativos como por exemplo de chat ou por exemplo Miro não sei se todo mundo conhece mas onde tem um board e todo mundo vai ficar mexendo lá no board Aí teria que usar um Banco Real Time Então esse banco de dados em tempo real o suabase com consegue oferecer esse serviço que é bem interessante dependendo do tipo de projeto que você tá desenvolvendo e muito legal também que o supabase tem toda a função por meio de apis então a Gente consegue criar

funções consegue criar formma de consultar tabelas e criar um api a partir disso então o Api a gente faz um endp que nada mais é que um link e quando a gente apontar para esse link ele vai retornar algum valor então a gente consegue fazer várias outras funções e consultas do banco de dados mais complexas por meio de api E aí fica bem interessante a gente trabalhar com os dados e continuando aqui os super Bas então ele é um banco De dados relacional e mostrando alguns detalhes de banco de dados relacionais é que a gente

geralmente tem os esquemas mais rígidos a gente tem uma estrutura bem organizada do banco de dados ele é mais focado para relações então eu explico bem isso daí no nosso curso de modelagem de dados esql e é muito bom para queries queries nada mais é que consultas consultas mais complexas fazer joins que gente juntar tabelas então ele é bem bom quando a gente tá falando de Banco relacional e é menos indicado para performance mas ISO daqui também para projetos aí de pequeno médio porte grande também ele pode ser muito rápido e veloz aqui nesse caso

é mais comparativo com o banco de dados não relacional que ele pode ser muito rápido pra escala mas ele também é um banco de dados aí muito veloz tá Pode ficar tranquilo em comparação com firebase né que usa o banco de dados não relacional que é um esquema dinâmico um esquema aí Flexível por meio de documentos coleções um mongo DB também é assim també permite relações também no banco de dados no nacional mas não é o foco a gente agrega vários dados para conseguir trabalhar com os aplicativo ele não é nada bom para fazer consultas

aí complexas ou fazer joins aí ele começa a ficar um pouquinho ruim então a gente tem que pensar de uma outra forma para fazer modelagem de dados e ele é muito bom para performance né a grande escala Essa É apenas uma das comparações entre o supabase e o Far base se você quiser um vídeo completo Se tá na dúvida em qual utilizar comenta aqui baixo que a gente vai fazer um vídeo sobre isso e algumas notícias aí bem interessantes aqui em 2022 o super Bas está crescendo assim bem rápido ele tem um investimento de 80

milhões de dólares né foi o series b e tá crescendo bem rápido por tá tendo bastante adesão aí dos projetos de vários movedores porque ele facilita Bastante na hora de criar um backend aí todo integrado e o custo benefício também que a gente vai falar daqui a pouco é excelente e além de disso uma outra notícia interessante que saiu esses dias o supabase ele tá de acordo com a Ipa e com a soc 2 não sei se é exatamente assim que fala mas são regras e leis boas práticas de proteção dos dados da informação e

de segurança do banco de dados então não são todos os backends que oferecem isso vai depender Aí qual continente você tá de qual país por exemplo a Ipa paraos Estados Unidos então é algo muito importante para você pensar pro seu projeto Ah no seu projeto tá no Brasil ele tem que seguir quais regras de segurança e proteção do dados lgpd o que mais que vai ter É bem interessante você pesquisar isso na hora que você for Criar o seu próprio aplicativo com o seu backend ver se ele está de acordo com todas as regras de

segurança e dados mas Bom agora vamos Ali pro site do supabase e Vamos explorar mais um pouco a ferramenta para fazer a nossa conta eu já tô aqui no site do suabase tá se você quiser tem bastante informação aqui explicando ó tudo que eu já tinha explicado banco de dados a autenticação o Storage as funções pode dar uma olhadinha aqui né o os feedbacks que vem sendo construído como eu falei o super Bas é um pouquinho mais low code então às vezes a gente vai mexer um pouco mais de código tá então a Gente que

tá falando que a gente consegue fazer parte de apis aí de uma forma facilitada aqui tem toda a parte da edição né no nosso dashboard e a consegue ter todo isso aí via SQL tá todas as consultas são SQL e é bem interessante que o SQL é uma linguagem mais fácil pra gente aprender e além disso a gente tem as regras né as regras de autenticação que são as políticas as polies do su is a gente vai ver com calma também nesse curso aqui e são pra Gente controlar toda a parte aí de segurança das

nossas tabelas e aqui mostra toda a estrutura e agora eu vim aqui pra parte do banco de dados só para mostrar né para você é o post Grid consegue ter autenticação aqui tem toda a parte das tabelas que é bem parecido com o Excel né a gente consegue ver as tabelas então fica mais fácil quando a gente tá usando por exemplo firebase é um pouco mais difícil né os documentos as coleções criar nossas tabelas fazer Relações entre as tabelas a gente não vai ver nesse curso mas um curso lá da formação completa de Flot Flow

eu vou colocar lá projeto bem mais avançado de super base e aqui a gente consegue também criar apis e bem interessante que a gente faz apis por meio do SQL então fica bem fácil a gente fazer essas integrações e construir as nossas apis nossas chamadas e Aqui tem bastante informação depois pode explorar um pouco mais vamos pro pricing para comentar Rapidamente então aqui a gente tem o pricing do supabase a gente consegue trabalhar aí na versão gratuita para dois projetos estão bem interessante tá começando a gente explorar aqui e depois a gente tem a versão

aí paga de $5 por mês por projeto e a versão de team aí que é um pouco mais cara mas o que é legal aqui da versão gratuita é que a gente consegue ter as consultas apis aí e limitadas ão bem interessante consegue ter as integrações sociais como por Exemplo integração com autenticação do Google do Facebook a pessoa conseguir logar ali com Google e a parte 500 m aqui do banco de dados que também não é pouca coisa a gente consegue já brincar bastante aí com 1 GB também de Storage 2 GB de banda então

aqui em geral a gente vai conseguir explorar bem o nosso projeto se você quiser algo aí um pouco mais avançado você consegue aí pagar os $5 para dar uns passos mais à frente eu acho bem barato 25 pelo que oferece e Também é muito bom porque El não vai crescendo muito de acordo com o que você tá usando tá aqui a gente já consegue usar 8 GB 100 GB de Storage então tem limites aí bem interessantes pro seu projeto pro seu aplicativo acho que é bem válido aí para você escalar e conseguir mais usuários pro

seu projeto pagando apenas ó e lembrando também que o supabase ele é open source então se você quiser baixar o código ele é todo seu você consegue instalar ele na sua Máquina já fica bem mais técnico é um pouquinho mais complicado mas você consegue fazer tudo isso sem pagar nada rodando aí com puxando o código para você e estabelecendo o seu próprio ambiente de desenvolvimento tá então a gente consegue fazer isso também se quiser um vídeo depois sobre comparação do Far base com super base também em relação ao pricing qual que é mais caro qual

que é mais barato mas de uma forma resumida o super base ele acaba tendo Custo benefício aí mas de uma forma resumida o super base ele acaba sendo um pouco mais barato sim e o Fire base É lógico que vai depender do projeto Mas é uma ótima alternativa aí com banco de dados relacional que bastante gente gosta e tem mais facilidade então eu vou vir aqui em start your Project então eu vou iniciar meu projeto se você não tiver com conta pode fazer rapidinho e pode clicar pra gente começar o nosso primeiro projeto então Já

criei a minha Conta aqui no supabase tá a gente pode criar um novo projeto aqui tem minhas organizações preferências e vou clicar aqui em novo projeto tá então o projeto vai ser o nosso app de cursos EAD eu vou colocar aqui uma senha pro meu projeto então a região que eu vou usar não vai ser Estados Unidos tá vamos ver se tem aqui no Brasil porque deve ser em relação ao banco de dados Ó tem em São Paulo então É bem interessante você escolher o data center que estiver mais Próximo dos usuários e aqui eu

vou no plano gratuito mesmo que vai ser mais que o suficiente Criar novo projeto Vamos criar um novo aqui então já criou o projeto ó ele tá fazendo toda a configuração do nosso projeto e às vezes tem que esperar um pouquinho para terminar toda essa atualização Tá eu vou esperar um pouquinho e aí daqui a pouco eu já volto aqui já carregou meu projeto e olha que legal aqui vai ser um dashboard né onde a gente vai conseguir Ver as chamadas de api Quantas autenticações tem como tá nosso uso do storage que é o nosso

armazenamento de mídia e aqui o Real Time beleza aqui a gente consegue conectar com algumas bibliotecas né JavaScript do flutter então é tudo bem integrado e aqui tem alguns exemplos de projeto para você ver a gente tem a home aqui e aqui nós temos o nosso editor de tabelas a gente já vai criar uma tabela aqui ver se a parte a gente mais vai Conseguir explorar temos o SQL editor então aqui a gente vai fazer consultas no nosso banco de dados para puxar dados das tabelas Tá pois a gente pode fazer um exemplo aqui também

aqui os bancos de dados é toda aqui é todo o formato da modelagem do banco conectado pra gente conseguir visualizar Aí fazer integrações tem toda a parte de segurança depois a gente pode explorar aqui também mas aqui tem os esquemas tá que ainda não tem nenhum aqui tem Gatilhos que a gente pode também criar novos gatilhos para fazer por exemplo AB hooks a gente tem funções a gente consegue criar como eu já tinha mencionado podemos criar novas funções tá ó e elas são de acordo com a interface SQL também interessante que o SQL assim é

uma forma de programar né mas mais facilitada e mais e com cura de aprendizado maior pra gente conseguir escrever e aí consegue criar funções só com skl então muito bom aqui tem Diversas outras funcionalidades temos também aqui do lado autenticação temos a nossa parte de políticas e são as regras de segurança tá então a gente já vai criar uma tabela para definir as nossas políticas os providers que é para fazer autenticação então a conta as formas tem aqui ó tem a gente pode fazer autenticação do telefone pela Apple pelo Facebook figma Google né que geralmente

tem bastante conectar via Google Então tá tudo aqui também tem templates aqui De e-mails que a gente pode personalizar temos a nossa parte de Storage no armazenamento para colocar por exemplo as fotos do usuário ou mías de usuário Então é bom que é um backend né Tem tudo no mesmo lugar não precisa ficar usando várias ferramentas juntas tem as funções AD functions tá aqui tem algumas partes da gente fazer relatórios os logs né para ver o que que tá acontecendo no nosso aplicativo configurações enfim depois é legal dar uma explorada aí com Mais calma mas

de uma forma gerar isso vamos lá pra table editor vamos criar uma nova tabela Create a new table Então a gente vai criar uma nova tabela tá uma tabela que a gente vai usar nesse curso aqui a gente vai criar um aplicativo EAD um aplicativo de cursos né vai ser algo mais simples só pra gente conseguir fazer uma listagem dos cursos que você tá fazendo e conseguir ter acesso ao vídeo deles dentro do nosso app depois na formação a gente vai fazer algo mais Robusto um projeto bem mais complexo aí com professores e alunos curso

Ah vai ser cursos tá o nome da nossa tabela vai ser app de cursos certo aqui ó enable Rad level Security aqui é pra gente colocar a segurança do nosso app tá se a gente tirar aqui ele fala que é indicado a gente deixar tá então aqui a gente vai definir depois quais como que o usuário quem vai conseguir ver editar deletar dados aqui dessa tabela então fazendo uma relação a com firebase tem as nossas Regras lá que a gente tem no firebase aqui vai ser as políticas que a gente vai ver depois eu vou

deixar o cheque aqui se eu quisesse o Real Time que é o banco de dados que funciona tudo aí de forma muito rápida automático poderia dar o cheque aqui sen não pode tirar Deixa eu tirar um pouco aqui ó só deixa eu afastar aqui ó só para conseguir ver tudo beleza e aqui vou até dar um zoom né pra gente definir as nossas colunas Então as colunas do supabase elas sempre Vão ter com padrão ID a gente sempre tem que ter um ID único para nossas tabelas então para qualquer tipo de dado Você sempre tem

um campo ID que é um campo único para identificar qual dado aí não importa qual que é o banco de dados que a gente tá falando a gente sempre tem que ter um ID tá no caso ele já define aqui um ID como integer que é o int né a gente consegue por exemplo ah de 1 2 3 e assim por diante e aqui sempre vai criar um dado com Create at create nada mais é Que quando o dado foi criado ele já vai definir que o dado vai ser criado aqui numa modelo que é

o tipo né do dado no modelo de data time stamp e qual função vai ser o Now essa função aqui é bem padrão né ele pega o horário atual a data atual aquele dado tá sendo criado e você pode clicar aqui tem algumas outras expressões aí de que a gente pode usar em default value a gente consegue colocar valores padrões tá para ter ainda não dá para colocar um outro mas a Gente poderia vamos supor que tem alguma coluna que sempre começa com valor um depois ela mudando a gente consegue colocar aqui perfeito é que

ah primário ele tá perguntando se é a chave primária então nosso ID é Nossa chave primária que é a nossa chave aí única né se você não sabe sobre chave primária chave estrangeira modelagem vê o nosso curso de modelagem que ele tá bem interessante aqui na engrenagem a gente pode clicar e vai ter algumas outras opções né ó e se É se é único e se é uma identidade que é o que é a nossa chave né a nossa chave aí ela ela é única pode exclui aqui também e a gente pode importar dados aqui

ó de uma planilha Olha que legal então um arquivo aí XLS um arquivo csv a gente consegue importar pro nosso banco de dados e visualizar ele aqui nos bancos de dados acho que é uma das principais aí benefícios do suabase que a gente consegue ver os dados realmente em tabelas né no firebase ou no mong db É tudo documento e coleções Pode às vezes dar um um nó na cabeça de quem tá começando perfeito Vamos colocar umas colunas aqui só pra gente começar qual coisa a gente adiciona mais depois vamos colocar o nome né nome

do curso e o nome do curso ele vai ser o quê ele vai ser ó o tipo a gente tem os tipos in que são inteiros fult né que são números quebrados numéricos tem tipos Jon que é aquele formato Jon que a gente tem tipos de texto varchar data e bole anos né Então aqui tem diversos aí formas opções pra gente escolher nosso tipo do dado o nome vai ser do tipo text tá E aqui por exemplo vai ser o nome dos cursos né curso tarará nome do curso enfim é esqueci de falar essa parte

aqui ó do meio é pra gente conectar com outras tabelas e fazer aí o formato relacional a gente consegue relacionar aí outras tabelas com chaves de outras tabelas então isso daqui a gente vai ver lá no projeto completo na formação flutterflow Tá vai ter um projeto aí mais completo de supabase um pouco mais avançado a gente consegue adicionar colunas né vou colocar o nome do curso vou colocar por exemplo uma nota que a gente vai dar pro curso aí a nota aqui vai ser int tá então vai ser uma nota inteiro a gente vai conseguir

dar pro nosso curso e aqui também vai ter descrição do curso vou colocar aqui assim ó descrição curta tá que vai ser um um texto também tá Vai ter outras características do curso mas Eu vou criar aqui só pra gente fazer um exemplo para você começar a se ambientar com suabase e depois a gente volta aqui a gente for fazer realmente nossos aplicativos de curso eu vou enriquecer um pouco mais os campos da nossa tabela Então vou salvar aqui ó olha que legal vai criar a nossa tabela cursos e está criando a nossa tabela cursos

e tá feita aqui ó nossa tabela cursos ela tem a nossa ID Create at nome nota e descrição curta Vamos colocar um exemplo aqui ó a Gente pode inserir uma Row que é uma linha a gente pode inserir uma nova coluna A gente pode importar dados de csv Então você tem aí um sistema uma planilha né cara você tem um alguma planilha que faça alguma coisa muito difícil você pode criar um um aplicativo parte disso então só importar suas tabelas aqui pro banco de dados certo vamos colocar uma um dado certo Row aqui eu não

vou colocar nada que ele vai girar automático tá o ID Create acho que Ele vai girar automático também e o nome daqui vou colocar por exemplo curso de inglês quem sabe inglês aí trabalha na área de tecnologia tem muito a ganhar nin grande grande dica e você for resolvedor no code sabe falar em inglês cara tem muita oportunidade muito mesmo se meses você consegue assim um trabalho bem legal vamos vai voltando aqui vamos falar um curso de inglês avançado vamos supor que eu tô fazendo um curso de inglês e vou ter uma videoaula sobre Isso

né ah nota desse curso eu gostei né de um a cinco nota cinco desão curta é vai ser aulas avançadas para inglês para conversação vamos supor aqui é só um exemplo né e vou salvar Vou salvar aqui o meu dado então ele já cria ó ele já cria automático Audi tá eu não preciso colocar nada cria um ed1 foi criado aqui ó em agosto dia 15 tal o horário então ele já aqui o o nosso Create at pra gente saber quando foi criado e aí tem o nome né curso de inglês nota e aulas Avançadas

para a conversação então depois que a gente vai fazer no nosso aplicativo a gente vai fazer todas as telas as telas já vão estar prontas no nosso app e daí a gente vai conectar com o nosso banco de dados Então dessa forma a gente vai integrar o flat Flow com supabase então a gente consegue aqui tanto editar o nosso dado tá ó conversação e e Listen e ouvir né e entendimento aqui o nome do curso avançado an nota né a gente pode Adicionar aqui ó novas colunas então é bem flexível bem legal Inclusive a gente

pode deletar vou deletar essa linha aqui ó confirmar e deletada Já deletei aqui a minha tabela a minha meu dado na tabela curso e olha que legal Aqui também tem ó a parte de api isso aqui é um pouco mais avançado né A gente vai ver só mais pra frente mas a gente consegue criar chamadas apis para puxar algum dado na nossa tabela então aqui ó a gente pode por exemplo puxar ID Campo Create at ou Campo nome vamos supor que eu quero puxar uma lista dos nomes por meio de uma chamada api Então eu

tenho de dados tem um aplicativo que ele quer fazer uma chamada Api para conversar com o meu banco de dados aqui eu vou conseguir usar essa função aqui ó que legal é É bem parecido com o skl tá vai ter o from cursos que é a tabela de cursos eu vou querer selecionar apenas nome daí eu posso copiar Essa função para criar minha chamada api é bem versátil a gente Consegue fazer ó aqui ó por exemplo tem ler as linhas a gente consegue ler todas as linhas ler as linhas específicas né puxar todos os dados

ou ler é tabelas é com for Keys né com as chaves aí Chaves estrangeiras então e até outra tabela que tá conectado por exemplo vamos supor que o professor tá conectado com curso eu posso ir até outra tabela e fazer a leitura disso tá um legal que sup base apesar de ser low code né ele já deixa tudo bem organizado pra gente conseguir Avançar e criar aí sones robustas Aqui também se a gente clica em definition aqui no canto ó ele já mostra em relação qual que seria a sintaxe SQL para criar essa tabela né

ó aqui a gente criou uma tabela Create table Ela tá no esquema Public cursos que é a nossa tabela cursos e aqui são os campos ol que legal ID Create AD nome e aí eu falo qual que são os tipos os campos né o nome é um tipo texto tá E aí ele não tem o valor padrão tipo texto isso daqui a gente Consegue explorar bastante para criar tabelas e entender então se você aprender skad te ajudar muito nessa jornada aí para criar aplicativos robustos com sup base e aqui que a gente consegue fazer as

opções das consultas tá depois posso fazer um exemplo mais para frente aqui na aula e aqui banco de dados única coisa que eu queria mostrar ó esquema visualizer então a gente consegue ver as nossas tabelas aqui em formato do esquema a gente consegue Conectar as tabelas com outras né quando a gente tiver Ultras chaves para quem viu o nosso curso de modelagem vai entender e daí a gente consegue fazer um desenho aí da modelagem muito aí organizado estruturado e fica bem bonito aqui da gente conseguir enxergar então quando tiver algo mais completo vai ficar bem

legal essa parte Espero que você tenha aprendido bastante o poder do supabase as funcionalidades e já tenha se ambientado com a ferramenta por Dentro que a gente foi mexendo agora vamos pra parte mais interessante que é criar o nosso aplicativo lá no flutterflow e começar a fazer a conexão para depois fazer toda a interação com banco de dados Bora lá antes de gente fazer a integração do flutterflow com sup base vamos entender o planejamento do nosso projeto aqui no co Startup a gente gosta muito de passar uma metodologia pra gente não sair fazendo então assim

como o mundo real é sempre Interessante você planejar o seu projeto toda a parte de layout design banco de dados antes de air fazendo tá E aqui na noc Startup a gente tem uma metodologia onde antes de você começar seu projeto você tem que entender muito bem o problema que você tá resolvendo Qual que é a solução que você vai tá propondo né conceitualização da solução geralmente tem MVP só para isso E aí você faz um design das Telas né pode ser um esboço um wireframe que a gente consegue fazer As telas que vão ter

para saber o fluxo do usuário e a partir disso que a gente consegue entender o fluxo do usuário né os requisitos também do sistema pode entrar por aqui a gente consegue pensar aí no nosso banco de dados quais vão ser as tabelas que vão est envolvidas como a gente vai fazer essa modelagem e aí só depois que tá bem claro para você a conceitualização do seu aplicativo parte das Telas e o banco de dados você tem que ir para prática de fazer execução lá Na sua plataforma a gente gosta de trazer essa metodologia porque muita

gente sai fazendo e depois aí tem muitos problemas de ter retrabalho E gasta dinheiro gasta tempo Então comece certo siga o metodologia faça o passo a passo e aí você vai ter um resultado bem legal mas aqui no nosso projeto do flo Flow vamos fazer o design de telas Então já eu já pensei aqui trouxe para você quais vão ser as telas do nosso app tá eu fiz um wireframe que é um esboço das Telas PT Então vai ter a tela de login os meus cursos né que a gente vai conseguir ver alguns cursos aqui

vamos poder adicionar novos cursos e vamos ter aqui também os detalhes do curso curso Então quando eu clicar eu venho aqui pro detalhe do curso esse aplicativo de cursos Ele também é um exemplo lá do curso de modelagem de dados Então vai ter algumas coisas bem parecidas e Inclusive eu recomendo você ver para entender 100% como funciona a Model de dados seja skl Ou no skl Mas enfim temos as nossas telas aqui temos nosso fluxo de usuário é um aplicativo bem simples tá um aplicativo EAD de cursos online e depois a gente vai deixando ele

cada vez mais complexo É lógico sempre respeitando a sua forma de aprendizado Mas a partir daí eu já fiz as telas prontas então para facilitar aqui para você o objetivo desse curso é aprender sup base e não design de telas aí mais paraa frente a gente pode fazer uma videoaula bem Completa só de design e de como fazer designs bonitos ali na prática do F Flow se você quiser comenta aqui embaixo pra gente saber quando tem bastante comentário bastantes likes a gente consegue entender o que o pessoal tá pedindo para trazer mais conteúdo de valor

aqui para você mas eu já trouxe o projeto Pronto já deixei o design pronto que vai ser nosso app de cursos e ad então a já tem a nossa tela aqui de login vai ter a nossa opção da lista dos Nossos cursos eu vou adicionar aqui cursos no botão e daí a gente consegue ver os detalhes aqui do curso também e consegue se a gente quiser integrar o curso com a vídeoaula né seja do YouTube ou seja de algum outro e serviço de hospedagem que você tem tá o link aqui tá a gente vai fazer

o clone do nosso projeto no fot Flow Então as telas vão estar prontas pra gente conseguir trabalhar diretamente com o supabase e fazer o projeto a partir de lá então Lembrando essa apresentação tá aqui embaixo no link abaixo em PDF mas se quiser também é só ver qual que é o formato do link aqui e copiar pro seu navegador então telas feitas Vamos pensar agora no banco de dados então de forma simplificada de forma bem didática a gente vai ter só uma tabela vai ser a tabela cursos que a gente já criou né Depois a

gente vai melhorar um pouquinho ela a gente vai ter aqui ó curso ID que vai ser uma chave primária a gente Também pode conectar com o usuário então o usuário vai ser uma chave estrangeira para eu saber qual curso é de qual usuário eu tenho que conectar a tabela cursos com a tabela usuários Olha que fácil então a gente vai ter também uma for aqui para saber qual conexão vai fazer temos aí o nome do curso uma descrição curta do curso descrição longa uma capa pra gente conseguir mostrar a imagem de capa né então vai

ser uma url da capa uma URL do vídeo no caso do YouTube e uma nota inteira e a partir daí a gente vai fazer nosso crud Então quem não viu aí nosso curso de flut flow do curso básico é onde a gente faz toda par parte do Create criar novos dados read visualizar dados update atualizar dados e delete deletar dados então o crude é forma básica para você começar a trabalhar com aplicativos e conseguir fazer interação entre o front e o backend do seu app a gente sempre começa com crude porque é uma forma muito

Didática a gente conseguir fazer o entendimento então agora sem mais enrolação vamos lá pro flotter Flow eu vou abrir o link do projeto aqui então já abre aí junto comigo eu recomendo que você faça junto comigo ou Assista e depois faça por conta é importante é ir fazendo para aprender vou abrir o link aqui para clonar o nosso projeto e entender um pouco mais desse projeto Então já abri o link que eu passei para você para clonar e Antes de mostrar aqui O aplicativo eu vou clicar nesse botão laranja ó Clone tá pode clicar aí

Vou Clonar porque assim o projeto ele vai pro meu dashboard eu consigo editar se eu sei editar lá no meu outro projeto n não vai salvar nada tá não indico então aqui a gente já tem o nosso projeto mostrando pouc das Telas eu tenho a minha tela aqui dos meus cursos tá a gente vai conseguir ver uma listagem dos cursos que a gente cadastrar no banco de dados vai ter imagem de perfil meus Cursos o e-mail do usuário logado aqui o o usuário vai conseguir e visualizar as características aí de perfil tá E os cursos

ativos tá beleza E daí eu vou clicar aqui para ver as telas além da tela de listagem do meus cursos eu tenho a tela de detalhes do curso então ó vai ter uma imagem aqui que a gente vai deixar ela dinâmica tá ela vai variar de acordo com o curso que eu ccar Então a gente vai conseguir ver a imagem dela tá vou deixar ela quadrada aqui também tudo Dinâmico então quando a gente conectar com o banco de dados isso vai mudar tá não vai ser esse nome a o título a descrição curta a descrição

longa e também aqui o vídeo tá esse daqui ó é um Edit do próprio floter Flow que chama YouTube Player tá tem várias formas de você colocar vídeo no seu app pode colocar com uma outro tipo de hospedagem também tem que ver só o que que o Flot Flow é compatível ou não E aí eu coloquei aqui o YouTube Player tá pra Gente atualizar o nosso curso Então esse daqui é o nosso app interessante também que ele tá aí de certa forma responsivo tá ele vai eu vou abrindo aqui ó dependendo da tela ele vai

crescendo Então as telas já estão aí de certa forma responsivas e temos também a parte de login dos cursos então tem aqui a gente vai fazer o login a autenticação completa entre fot Flow e o suabase Então vai ter o login e também a parte aqui de cadastro que já tá pronto aqui é Bem simples só e-ma sem cadastro tá então essas telas já estão prontas aqui em Componentes eu posso vir aqui ó em meu perfil então quando clicar em meu perfil a pessoa vai entrar para ela conseguir fazer upload da foto dela ou fazer

o logout do Web Tá parte de mídias Storage só vai ver lá na formação flutter Flow completa tá bom não vai ver agora porque senão o vídeo vai ficar muito longo aqui mais seria o básico pra gente fazer integração entre o Flot Flow E Su base para ficar bem claro para você temos aqui também o popup de novo curso Então quando clicar em Adicionar novo vai ver o novo curso tudo certinho aqui tá definido a gente vai deixar dinâmico e também editar o curso Olha que legal a gente vai editar o curso Então vai carregar

as informações aqui do curso e a gente vai conseguir editar se você não conhece o flut flow Eu recomendo você ver o nosso curso gratuito tá bom porque lá eu explico melhor sobre como usar Esse ambiente tá mas aqui a gente não vai explorar outras funcionalidades Mas aqui tem o firebase aqui a gente tem os datatypes temos o appstate a partir de api a parte aí de colocar mídias pro flutterflow temos aqui Custom code os temas e a configuração onde a gente vai integrar o nosso supabase por aqui tá bom então agora vamos entender né

como que a gente pode fazer a integração do supabase para dar os primeiros passos e começar essa integração do front end com O nosso backend do flutter Flow com o super base e antes de continuar eu só queria mostrar um benefício aí muito grande para você que é aluno da formação flutterflow se você for na comunidade aí Open no code a gente já liberou a nossa supa base EA o nosso chat especializado em supa base Então nada mais é que o nosso robozinho que ele é especialista em tudo que é do supabase tá você pode

perguntar qualquer coisa do supabase e aqui do Flot Flow que ele vai entender Aqui nós temos as nossas ias tá do flutterflow que também sabe tudo de flutterflow tem a nossa ia do firebase também E agora tem a sup base eu queria fazer umas perguntas aqui só para a gente testar a nossa ia então por exemplo supabase supabase é melhor que o firebase se tiver qualquer dúvida pode perguntar então perguntei ISO daqui ó e ele vai dar algumas algumas respostas em relação a isso ó ah comparação parecida mas o base tem um banco de dados

a gente Pode ver aqui com calma né ó é muito rápido não dá nem para ler então ele fala assim a escalabilidade Tem banco de dados que utiliza postgres é bem escalável Tem bastante flexível né por usar consultas SQL o código aberto então aquilo que eu falei do open source aí é bem importante que o firebase não é né Ele tá preso no ambiente do Google e o preço tem modelos diferentes ó osab oferecem um plano gratuito Generoso então bem legal que ele já sai bastante Diferenciar Mas eu posso fazer perguntas mais técnicas como por

exemplo que eu vou fazer agora né ah su Bas como integrar Flow Flow com supa base e aí ele vai explicar também como pode fazer essa integração ó tudo passo a passo ele já explica então se tiver qualquer dúvida pode vir aqui mas ele explica certinho os passos que tem que seguir eu posso fazer perguntas ainda mais tá né como é é como criar um api com supabase como criar um api então né Já sei ele já Sabe que a gente tá falando de sup base então ele vai falar Ah assim você pode criar um

api ele dá os passo a Passos aqui acesso painel no painel supabase no menu lateral daí eu posso falar assim me dê um exemplo de um exemplo de api ele dá um exemplo aqui de api com supa base e aí ele já começa a mostrar aqui as partes mais técnicas né de como fazer ó get post delete já dá vai mostrando né aqui é uma ótima ferramenta se se você tinha pedido pode vir aqui no ia dosab e Perguntar qualquer coisa que ele vai saber responder tá desde coisas mais simples Até coisas mais complexas Mas

agora vamos lá e voltar e fazer a nossa integração do sup base com o flutter flow então para isso eu vou vir aqui tá ó em app as configurações nas minhas settings e pode vir aqui em supabase tá e você vai colocar ó enable supabase eu vou habilitar o supabase e vou precisar do API URL e o en Key né não sei como é que fala isso então vamos voltar lá para Spase então aqui eu vou vir em configurações do projeto Project settings E aí pode vir aqui em API tá aqui é Nossa temos a

nossa api URL pode copiar vou copiar lá no meu dashboard e vou colocar aqui copiar e a chave a não aqui ó a Public chave da sua do seu projeto vou copiar ela aqui e vou colar e vou colocar get Skema Então olha que interessante ele Já puxou os meus Campos aqui do sup base Então já tá integrado então por isso que eu falo com Integração Nativa do Flot Flow com o super base FL base é muito bom e já tá tudo que integrado que a gente pode fazer aqui também em relação a out que

é autenticação vamos vir aqui na verdade não é aqui né aqui ó em authentication vamos vir aqui em providers tá e aqui a única forma que tá integrado é a parte de e-mail né do usuário consegu fazer autenticação com e-mail e senha que gente quer e aqui tem ó enable e-mail tá certo é confirmação de e-mail você pode Deixar o seu projeto no caso como aqui é meu mais didático não vai ter confirmação por e-mail tá E aqui também não vai ter a parte de do e-mail mudanças do e-mail tá vai ficar só o padrão

beleza aqui tudo certo aqui integrado o que a gente pode fazer agora é deixar nosso banco de dados aqui certinho que falta alguns Campos e daí a gente já consegue trabalhar na inteligência do nosso web certinho vamos lá para pro supabase então aqui tá tudo Cer certo vamos pra nossa tabela C A nossa tabela cursos Vamos colocar novas colunas aqui para finalizar a nossa nosso banco de dados certo então aqui tá tudo certo ah Opa o nome da coluna vai ser descrição longa tá deixa eu ver qual mais que falta já tem o nome descrição

curta descrição longa tá só falta mais três Campos vamos aqui a descrição longa sem descrição e não tem nenhuma relação com nenhuma chave estrangeira aqui data tipo da descrição longa vai ser tipo t Tá bom é uma chave primária não aceita valores nulos Tá aceita é a única Não e aqui não precisa se preocupar vamos salvar Vamos criar nossa nova coluna e faltam mais dois Campos tá descrição curta descrição longa e aí vai faltar agora só vamos inserir aqui uma nova coluna o ideal é realmente criar no começo né E aí vai ser a coluna

da foto né Cap URL aqui também pode deixar text que depois o f flou entender que é uma imagem que também igualzinho Ah não Aceita tá nulo e tem que ter uma imagem pro curso né para ficar bonito na suap senão no suap vai ficar estranho vamos adicionar mais um vamos adicionar mais um aqui e vai ser o vídeo url tá E vai ser do tipo text também tá uma url da minha do meu vídeo caso vai ser do YouTube e aqui vai precisar do não vai poder ser nula também perfeito Olha como tá fácil

hein então já criamos o nosso banco de dados já fizemos a nossa integração com cter Flow o que a gente a Gente precisa agora é vir aqui ó vamos lá em autenticação voltou em policies que são as políticas regras de segurança né E aqui ó tem uma política tá que a gente tem que definir uma regra de segurança para cada tabela Vamos colocar aqui nova política aqui tem as formas que a gente consegue fazer essas políticas de segurança a gente pode pegar políticas prontas tá ó então aqui ó enable reach assess To Everyone habilitar a

leitura para todos do banco Ó que legal é um skq que é um Create policy a gente cria uma política e aí vai ser no esquema Public e nossa tabela cursos tá E vai poder e fazer tudo que a gente vai fazer com o true tá bom Aqui tem alguns exemplos ó tudo de SQL a gente pode colocar ó enb update access ó habilitar atualização habilitar edição e atualização né para os usuários de acordo com o e-mail deles então vamos sup eu quero habilitar para só um determinado usuário vai ser esse codigo Zinho que eu

vou colocar tá Daí a gente pode fazer coisas mais simples Até as coisas mais complexas vai depender das suas segas E no caso vamos criar uma do zero tá vai ser bem fácil e vai ser o nome dela vai ser crud para todos tá aberto para todos ele pode fazer o crude Né que é o visualizar inserir atualizar ou deletar então eu vou querer fazer tudo todo o crud tá aqui não vai precisar do target Rolls aqui seriam quais pés são aplicado a quais tipo de Usuário seria aplicado essas essas regras né e aqui a

gente vai poder umas expressões que são aquelas expressões que l só que por que no momento a gente pode colocar apenas assim ó true a gente colocar só true que é verdadeiro ele já vai permitir o crude para todos tá PR Nossa tabela então aqui a gente deixa assim bem bem fácil pois quando o nosso app a gente for colocar em produção a gente dá uma revisada nessas regras para deixar aí da forma correta porque assim O banco de dados tá aberto para todos mas eu quero que o banco de dados ele esteja por exemplo

fechado né e aberto só para quem está logado e tem por exemplo o curso a pessoa que for editar só quem é o criador vai poder editar né não é poder só qualquer um vai poder editar enfim vamos deixar assim e aí ó ele já cria automaticamente pra gente ó a nossa política crud para todos tá na nossa tabela cursos perfeito e a gente tá dando a permissão para todo mundo Como true tá tudo certo vamos salvar Nossa política e agora tudo certo a gente já pode ir lá pro flutter Flow para fazer o nosso

começar nosso crud e fazer autenticação né O bobinho veio dar um oi aqui também antes da gente continuar tá com a gravatinha dele né acabou de tomar o banho então tá bem cheiroso né seu bobinho dá um oi pessoal bobinho fic todo mole Olha a linguinha dele ó F assim o tempo todo Então vamos continuar agora né vamos lá pro nosso Campo Nossa tela de autenticação tá aqui ó login cursos Então já tem uma tela pronta vamos est estabelecer a conexão tá então para cadastro vou clicar aqui em criar conta e agora a gente precisa

fazer uma de autenticação mas não é com Fire base é com super base eu vou vir aqui em Nova Action então aqui em Nova Action Vamos abrir aqui para ficar mais claro abrir aqui minhas ações certo e aí vou vir em Action e vou escrever suabase ó supabase ó tem o super base o crude tá Que a gente já vai usar temos o supabase autenticação e agora a gente quer criar uma conta né estamos em cadastro Create account certo provider qual que vai ser e-mail tá é o único que tem e-mail Field vai ser ó

o e-mail address tá deixa dear aqui ó só para ficar mais claro ó e-mail address é esse campo aqui tá vou até mudar o nome Ó e-mail address é cadastro em cima tá só para ficar mais claro cadastro aí o password cadastro também pra gente não se confundir e colocar Fazer alguma besteira cadastro confirmar senha colocar aqui cadastro no final cadastro tá então é sempre bom você renomear seus componentes tá vamos abrir aqui de novo vamos voltar lá ó e-mail Field e-mail cadastro legal né password Field senha né vai ser password cadastro e aí a

senha de confirmação vai ser a senha de confirmação cadastro Agora fica mais fácil a gente achar perfeito e aqui o supabase ele fala né ele olha esse essa ação ela não cria uma linha de novo Usuário tá depois né no curso completo de Flot Flow a nossa formação completa eu vou explicar um pouco mais como que funciona a tabela de usuários quando a gente tá falando de suabase porque são coisas separadas a tabela de usuários que a gente tem aqui no supabase ó se eu for aqui banco de dados Ahã na verdade Database tá na

verdade é autenticação e aqui ó tem a tabela usuários tá tem uma tabela aqui que a gente consegue ter o acesso dos usuários Mas é uma tabela Única que a gente não consegue mudar táa mais por questões de segurança ela só serve para autenticação pra gente trabalhar com dados de usuário a gente tem que criar uma tabela depois separada tá Por enquanto é assim vamos deixar tudo certo e daí depois que fizer o autorização aqui autenticação vamos paraa página de meus cursos navegate to ah meus cursos acho que é isso né então fez aqui a

autenticação foi pra página de acesso dos cursos tá login vou vir Aqui no login também em ações tá cliquei aqui em ações e vou adicionar uma nova Action tá add Action então Ó eu posso escrever por aqui né também um Tap né quando clica Vamos fazer um supabase suabase aqui para baixo né E vamos colocar agora um login então a gente já criou a conta agora a gente pode fazer um login e-mail e-mail Field vai ser o e-mail address login ó já tinha escrito certinho aqui password Field password login certo perfeito que fácil hein Agora

a gente até já vê que já tá certo aqui o nosso App sem nenhum erro a gente pode testar e fazer um novo usuário para ver o que acontece Então vamos testar para ver se tudo certo vou clicar aqui no raiozinho pra gente testar então Aqui já carregou tá o meu aplicativo vou na página de login tá E aí agora eu vou ah vir aqui mail não tem meil né Fazer um cadastro vamos ver se dá certo então o cadastro vai ser colocar aqui ó castelo castelo @gmail.com vou colocar uma senha aqui secreta Top Secret

Castelo op pronto vou criar minha conta vamos ver se dá certo criando a conta e vou criar a minha conta e parece que na verdade ele tá tentando mandar um e-mail eu acho aquela confirmação que eu fiz aqui do e-mail eação eu acho que eu tenho que apertar o botão lá no FF de novo fiz depois providers e-mail ó não salvou Então vamos tirar aqui o confirmar e-mail agora acho que tá certo né agora acho Que tá certo tinha esquecido de salvar Vou salvar aqui e aí eu tirei tá então aqui tudo certo Deixa eu

voltar aqui e aqui ó voltando no inser que eu vou fazer também é pegar o novo esquema tá que eu atualizei o nosso banco de dados colocar get schema então aqui ele já atualizou certinho beleza vamos voltar aqui agora e vou dar um instante Reload então eu acabei deletando acho que ele até criou ali um novo usuário vir aqui no suabase em users Ah tá Carregando aqui ó meu e-mail castelo @ Gmail waiting for verification então ele tá esperando verificar por e-mail mas no caso aqui eu não quero tá vamos vir aqui então deixa carregar

já recarregou vou vir em cadastro vou criar um meio diferente agora pro Bob Bob @gmailcom uma senha aqui pro Bob vamos ver se vaiar conta ó agora deu certo agora já conectei no meu App Então já tá funcionando Fiz o cadastro e aqui ó se eu for ver em board em sup base vamos Recarregar aqui aqui no meus usuários já tenho o Bob ó Bob E aí se eu clicar aqui nos três pontinhos ó o que eu posso fazer é mandar e-mail né para recuperar o usuário né o a senha isso daqui é bom você

tem um serviço de smtp de e-mail Tá eu vou deletar o usuário deletar o castelo bye byar então perfeito a autenticação aqui já está funcionando o nosso app o que a gente pode fazer ó quando clicar nesse botão ó eu já tinha colocado ação certinha já tá abrindo pop De novo curso Então quando clicar nesse botão eu quero preencher né as informações aqui meu novo curso e aí eu quero que essas informações elas sejam jogadas lá pro sup base aqui no meu banco de dados min a parte aqui da tabela curso vamos fazer primeiro o

Create vamos começar para isso vou vir aqui então vamos lá em meus componentes pode ir em novo curso tá vamos ver se os nomes estão certos aqui ó vou deixar os nomes certos para ficar mais organizado Tá V colocar aqui ó vou editar e vou escrever curso nome tá não gostei do jeito que tá escrito vou deixar assim ó curso nome Opa temos então o curso nome é aqui eu vou colocar aqui ó é novo descrição curso tá só para mostrar porque eu tô criando novo descrição curso longo nome na verdade colocar ah novo curso

nome tá PR gente saber aqui aqui eu vou colocar já tá certo aí vai ter o URL da capa né Vou colocar aqui ó novo URL L da capa perfeito e Aqui vai ter o novo URL do vídeo novo URL vídeo então isso sempre bom a gente estar com os nomes certinhos e a nova nota nova nota então aqui a gente vai conseguir adicionar delit tá deixar os cursos prontos tá tudo certinho aqui perfeito eu vou abrir agora a planilha lá só pra gente colocar alguns exemplos então aqui eu vou abrir uma nova aba então

abrir a planilha aqui só pra gente ter alguns exemplos tá então beleza agora a gente vai vir adicionar e vamos Criar uma nova Action tá pode deletar se tiver algo aí vou deletar aqui e vamos em Open vamos adicionar uma Action agora de criar os dados vamos Create Então vou vir aqui e vou escrever supabase supabase insert Row então Row é uma linha a gente consegue adicionar linhas atualizar linhas ou deletar linhas insert Row tá a tabela que vai ser vai ser a tabela de cursos qual vai ser os campos Vamos colocar os campos aqui

ó Lembrando que o id e o data de criação Não precisa que é automático Tá bom então vamos colocar aqui aid não né V colocar o nome tá colocar todos os antes Aqui nome descrição curta descrição longa descrição longa e também a nota certo aqui eu tô colocando todos os campos que a gente quer adicionar na nossa tabela Cap URL tá E aqui vai ser capa URL vídeo url perfeito aqui se a gente quisesse o nome da nossa Action né né tudo certo vamos vir aqui então nome vamos adicionar um curso né dinâmico Vamos vir

aqui ó wid state novo curso nome aí fica fácil né Beleza então esse vai ser o curso vamos lá em wid state que é um campo né do nosso popup wiit state nova descrição curso tá perfeito descrição longa ah cadê a descrição longa nova descrição curso longo feito nota Vamos colocar a nota do nosso curso ah Cadê o w state nota do curso a a nota ó ele tá entendendo ela como string como texto quer dizer né então a gente tem que entender ela como numérico tá para Isso Ó eu fechei aqui isso aquii é

maor peculiaridade aqui da nova nota tá vou clicar aqui no meu no meu Edit é um Edit que eu clico eu consigo selecionar aí vários várias opções vou vir aqui para baixo tem uma opção aqui ó add option labels eu acho que é isso vou clicar aqui fal um pouco aqui tá meio ruim né diminui aqui que tá ruim coloquei as novas opções tá 1 2 3 deixa colocar igual is ser um para outras opções Mas o mais importante daqui tá 1 2 3 4 5 Tá Certo e aqui também vai ser 1 2 3

4 5 tá vou ficar na ordem Vou atualizar aqui mas o mais importante vai ser essa opção aqui ó option value data Type tá tá string string é texto não é texto tá é numérico tá é inte integer é o número inteiro perfeito corrig isso vou lá no botão adicionar vamos de novo em aqui tava tudo certo né ó nome ão curta nota né nota então V vir aqui clicar em nota vai ser do meu Edit state e agora sim tá aqui ó nova nota perfeito bom demais tá Fácil hein vídeo url vamos lá clicar

e vamos colocar o vídeo url vídeo url vídeo e faltou da capa né Vamos colocar aqui e vamos selecionar a capa capa URL perfeito muito fácil hein fala aí muito fácil cara realmente assim nível easy fácil fácil perfeito cara eu acho que tá tudo certo vamos testar ó tem um erro aqui vamos ver ó aqui tem um erro vou clicar nele e fala assim ó o valor inicial não dá um match com o o campo Data Type especificado Então deixa eu clicar aqui no valor inicial eu acho que inicial Val inicial vai ser C então

eu coloquei CCO né que é um numérico é o valor inicial que aparece aqui perfeito ó tudo verdinho Já podemos testar vou lá no meu test mode ainda tem 11 minutos aqui no meu teste vou dar Instant Reload então Aqui já carregou vou dar o zoom out tá no meu App o gordo esse App né Deixa eu colocar aqui ó iPhone 13 pro Max tá tá o meu App aqui vamos adicionar Apareceu o meu popup vou colocar o nome do curso agora ficou longe demais então eu vou cadastrar agora a formação flutter Flow formação flutter

Flow que se você não viu se você não está lá dentro tá perdendo aí muito conhecimento prático de alta qualidade de flutterflow São curta vou pegar aqui na minha tabelinha ó curso de flutterflow eu vou copiar aqui que eu já tenho pronto e não precisar pensar aqui ó descrição curta você pode colocar o curso que você Quiser tá a gente só vai testar e descrição longa colocar a descrição completa URL da capa Então essa vai ser a imagem que vai aparecer na capa ah curso rflow capa ó clicar aqui nessa capa então ó ó URL

no code Startup Essa vai ser o URL da capa vou copiar essa URL e vou clicar aqui tá o RL do vídeo nosso App ele mostra vídeos né Ó vou pegar o vídeo do YouTube temos aqui o vídeo da formação flutter Flow tá pegar o vídeo aqui tá é o nosso vídeo da Formação fechar aqui e vou colar certo Qual que é a nota desse curso cara com certeza de uma a CCO é a nota cinco cinco estrelas vamos adicionar acabei de lembrar que não coloquei nenhuma confirmação né não coloquei para fechar coloquei para fazer

nada faltou aí nossas Actions mas eu vou adicionar aqui para testar vou clicar para adicionar então acho que adicionou vamos lá no nosso Dupa base aqui em cursos e vamos dar um refresh aqui e olha que irado já Tá aqui ó ID ID do né Create at um horário que criou formação floter Flow a nota 5 aprende a FL flow do zero descrição longa Então cara tudo funcionando já a nossa integração conseguimos fazer o Create a gente tem que melhorar aqui né a nossa ação em adicionar vou clicar aqui em abrir a nossa Action e

vamos adicionar aqui uma Action e vai ser ã Vamos mostrar a mensagem né que deu certo faltou isso tem que sempre falar pro seu aplicativo Que vai fazer ó vou colocar a informational dialog então é um diálogo informacional então é sucesso aqui a mensagem vai ser curso Curso adicionado aqui vai ser um ok ok e daí vamos navegar pra página de curso eu vou vir aqui ó navegate to meus cursos tá então ele vai adicionar e depois vai voltar pros meus cursos eu acho que tá tudo certo agora Beleza deixa eu conferir o cancelar se

ele tá certo aqui ó vamos ver a Action do cancelar então ele tá Fechando o o bom sheet tá que vai ser esse esse pop-up aqui aqui fecha e aqui no x ver se tá fechando tá fechando também então tudo certo já Beleza deixa eu testar de novo então vamos fechar aqui vamos dar um Instant Reload então aqui já carregou tá lembrando que isso daqui ó não tá dinâmico então tão cards qualqueres aqui depois tem que mudar para deixar dinâmico a gente vai fazer isso vamos adicionar um outro curso agora vai adcionar a formação Bubble

Melhor curso aí do Brasil cara pois dá uma olhada que tá bem completo também bubo Curso muito bom aprender Bubble com o Neto tá descrição cur colocar aqui passo a passo realmente do zero avançado vamos copiar aqui completa o al da capa vamos ver aqui a capa do Bubble tá tá aqui ó a capa do Bubble que é um dos aplicativos que é construído na formação de Bubble e o RL do vídeo vamos ver aqui ó é nosso vídeo aqui do YouTube certo vamos voltar aqui o l do vídeo e também Ele é nota 5

tá nota cinco Então vou adicionar vamos ver o que que acontece adicionei sucesso curso adicionado Ok vai voltar para lá tá então parece Tá tudo certo dá uma olhada aqui acho que adicionou então aqui ó já tá aqui o do Bubble ó vamos tá adicionado e agora o que eu quero fazer é fazer a parte do read do Word né a gente conseguir visualizar esses dados ali dinâmicos tá Então como que a gente vai fazer eu posso fechar minha sessão que daqui a Pouco ela vai inspirar mesmo mas é isso fechar aqui vamos lá na

nossa sessão vamos lá em meus cursos agora eu quero que os meus cursos apareçam aqui tá então aqui é tá realmente estático quero que seja algo dinâmico e varie de acordo com as informações que eu tiver no banco de dados vou deletar tudo que tá aqui dentro vou clicar aqui vou deletar ó vou elar esse contêiner aqui e vou deixar só esse mesmo tá aqui ó podde vir na esquerda lá embaixo realmente na minha List viw Vamos fazer uma consulta ó vamos ali no canto que é um backend query uma consulta desse banco Tá bom

eu vou clicar aqui e vou adicionar uma consulta add a backend query qual vai ser o tipo de consulta a gente pode fazer coleções né que é o banco de dados do firebase documentos uma chamada iepi e a gente tem aqui ó su base query já que tem integrado o suabase com flutterflow fazer o suabase query e qual que é a tabela tabela curso e o tipo de De consulta vai ser uma lista de linhas Ou você quer uma linha só eu quero uma lista de linhas tá quero todas as linhas que vai ter naela

minha tabela vai ter alum filtro Não alguma ordenação Não por enquanto não né Se quiser colocar pode ordenar aí do os mais recentes ou ordenar aí o dos mais em ordem alfabética É só escolher o campo aqui e escolher a forma que você quer ordenar tá não vou ordenar por nada confirmar aí ele fala assim ó agora que você vai Criar a quer dizer que vai ter várias é vários Campos aqui dos dados eles vão ser duplicados ali pra nossa tela Então vou colocar aqui ó confirmar e daí ó já deu certo aqui ele vai

pegar isso e vai duplicar aqui para dependendo qual for o número de linhas lá na minha tabela tá bom tá tudo certo agora a gente conseguiu puxar os dados o que a gente precisa fazer agora é deixar dinâmico D um zoom aqui que tá muito pequeno né D um zoom aqui no meus cursos então eu não Quero que esteja escrito curso Flow eu quero que esteja escrito o nome do curso que tiver lá no meu banco de dados eu vou clicar aqui e aqui ó a gente vai conseguir deixar el dinâmico tá vendo esseo aqui

vai clicar para deixar dinâmico porque agora a gente tem acesso a nossa tabela lá no supabase ó cursos Row que é a linha do curso legal aqui já então quando eu clico o que que eu vou querer mostrar ali Ah aqui eu quero mostrar mostrar o nome o nome Ó aí vai Ficar dinâmico então se tiver 10 listas aí 10 itens de cursos vai mostrar o nome de cada um separado aqui também vou fazer a mesma coisa de já dinâmico Então vou vir aqui ó clicar em cursos Row e vou deixar a descrição curta tá

para mostrar a descrição curta dos meus cursos e aqui imagem mesma coisa vamos ver aqui imagem ã imagem vou tirar o que tá aqui tá que tá conectado a uma mídia aqui vou colocar Network E aí eu vou colocar aqui ó no Laninha lá no curso Roll vai ser a minha capa URL tá é aquela capa que eu tenho aqui né ó vou clicar aqui no exemplo é a nossa capa que temos aqui até vou copiar ela vou voltar lá se eu clicar aqui nela tem aqui ó um valor padrão vou deixar aqui embaixo tá

para não ficar em nada sen não fic feio vou copiar o RL aqui D só para ela aparecer aqui tá mas agora tá dinâmica então quando eu carregar meu App tem que aparecer todos os cursos tem o cadastrado lá no supabase certo vamos Testar e ver se deu certo vou aqui abrir um novo ambite de testes então Aqui já carregou e olha que legal já tá dando certo tá mostrando os cursos que eu tenho lá no meu sup tá são dois formação FL Flow e Bubble fechar aqui e aqui tá certinho realmente o nome como

tava tá então se a gente cadastrar mais um novo curso é para aparecer aqui vamos testar Então vou dar o zoom out cadastrar um novo curso tá E vai ser formação Zen daí eu vou Preencher tudo que tá ali na planilha para cá tá mas se quiser colocar qualquer exemplo Então já preenchi tudo e vou colocar adicionar curso adicionado com sucesso vamos lá e ó já tá aqui legal ó cursos ativos a gente enche já consegue cadastrar ele já vem para cá agora que a gente consegue já criar novos cursos e visualizar a lista de

cursos vamos agora ver os detalhes do curso e depois a gente vai conseguir fazer edição e também deletar o nosso Cursos na nossa tabela e daí a gente finaliza o crude Então bora pra tela Então agora eu quero visualizar os detalhes do curso quando eu clicar em um desses né ó aqui é a tela de detalhes deixa eu dar um zoom out eu quero que ela fique dinâmica se eu clicar no curso do Flot Flow quero que apareça os dados do flut Flow se eu clicar no curso do Bubble eu quero que apareça os dados

do Bubble Tá bom vamos vir aqui e lá no nosso contêiner deixa eu ver se já tem Aqui uma ação né Ó vou selecionar o meu contêiner que eu vou clicar tá E aí eu quero colocar uma ação de ir pra página do detalhe vamos lá então Ó vou colocar aqui ó Actions vamos vir em add Action daí eu vou colocar naveguei Navegar para detalhes curso embaixo certinho então vamos selecionar essa detalhes curso certo só que agora sempre que a gente entra numa página de detalhes a gente tem que passar um parâmetro de página lembra

que lá na página de detalhe eu Vou ter que fazer a busca desse curso lá no supabase e mostrar os detalhes desse curso vamos vir aqui ó e Vamos definir um parâmetro de página definir daí ele foi pra página detalhes e agora a gente vai criar um parâmetro de página tá e o parâmetro vai ser curso vou deixar curso Row tá que é a linha do curso em questão então se eu cliquei Na Linha Do flf tem que mostrar aquela linha eu cliquei na linha do Bubble tem que mostrar a linha do bub e o

tipo dele qual que vai ser o Tipo dele vai ser Olha que legal aqui ó aqui embaixo ó supa base Row que é uma linha do sup base eu vou clicar de qual tabela urso é uma lista não ele é necessário sim confirmar perfeito agora que eu criei o parâmetro de página da linha né o curso Row eu posso passar Então vou vir aqui ó clicar pass para passar vou clicar aqui e aí eu vou definir qual que é esse parâmetro né vou clicar nele agora ele vai perguntar assim cara qual linha do supabase você

Quer passar eu preciso falar para ele que eu quero passar a linha que eu estou clicando ó curso Row aí ele já mostra aqui ó base aí eu vou clicar aqui E lembra que a gente já tem acesso à tabela aqui do do curso e eu vou pegar exatamente a informação ó supa base Roll já tá aqui certinho então ele já vai entender que quando eu clicar no flo Flow ele vai passar a linha do flo Flow né ó e vou vou confirmar então aqui tudo certo e só para explicar Então vamos Supor que eu

clique aqui na primeira linha que é do curso do Flot Flow Qual que é o parâmetro de página que ele vai passar se eu vi aqui ó ele vai passar a linha do flat Flow ele vai passar essa linha aqui pra gente carregar lá então agora é tudo certo que a gente tem que fazer agora lá em detalhes curso é conseguir carregar as informações dessa linha como que eu vou fazer isso eu vou vir aqui à esquerda tá na minha parte principal aqui ó na minha tela principal Esse daqui ó esse componente é onde estão

todos os componentes dentro dele tá ó ele tá na maior hierarquia possível então tem tem uma coluna aqui né e dentro dessa coluna tem mais componentes o stack tem esse componente tem essa coluna dessa então no flutter flow no flutter a gente organiza componentes dentro de componentes tá então eu vou no componente que tá mais acima para fazer uma consulta tá vou clicar aqui vou vir aqui à direita backend query e agora eu Vou puxar uma consulta só de uma linha do supabase tá para eu conseguir ter acesso aos dados do supabase então eu vou

vir aqui e vou colocar supabase query qual que vai ser a tabela cursos eu quero uma lista eu quero single Row que é uma linha única Ah eu quero uma linha única perfeito certo vamos vir aqui também vamos colocar um filtro agora né para mostrar para ele qual que é de todas as linhas que tem qual que ele tem que selecionar l tem que colocar Um filtro Você tá buscando uma som Então o que a gente vai falar assim ó eu quero que o ID tá pode selecionar o ID seja igual então o ID lá

do supabase tem que ser igual ao ID aqui ó do meu parâmetro de página curso Row certo então esse essa linha de curso vai ser nada mais do que o ID então curso Row eu já tô na na minha linha e eu posso selecionar aqui o ID então em resumo tô falando que o ID lá do supabase ele tem que ser igual ao ID da da minha linha curso Row que eu Acabei de clicar então se eu cliquei do flutterflow o ID dele eu acho que é dois né ele vai procurar exatamente o curso dois

para TR informações daqui então tudo certo vou confirmar aqui ID tem que ser igual a o id e agora vou confirmar perfeito agora que eu confirmei eu posso já deixar as informações dinâmicas dessa página porque agora eu tenho acesso aos dados do curso tá vamos vir aqui ó primeiro aqui vai ser o nome vim aqui ó aqui é o parâmetro de página né não é Isso que eu quero eu quero aqui ó curso Row agora eu quero o nome então vou deixar dinâmico virado aqui embaixo vai ser a descrição curta Então vou vir aqui no

dinâmico cursos Row e vou colocar a descrição curta perfeito aqui eu vou colocar a descrição longa vem aqui cursos Row descrição longa perfeito virado demais agora falta colocar o vídeo né então esse vídeo aqui vai ser dinâmico vou clicar aqui ó na WL dinâmico não vai ser sempre essa vou Colocar a URL que eu cadastrei tá versus Row vamos lá em vídeo url tudo certo ah e falta imagem aqui atrás né Imagem aqui atrás e vai ser ã aqui não vai ser exet a ser Network E aí vamos colocar lá dinâmica curso Row k URL

tá para não ficar vazio eu posso pegar o link lá da minha imagem aqui e abrir aqui de volta deixa eu colocar uma capa aqui só de exemplo né vou pegar essa daqui e vou copiar e colocar lá só para não ficar vazio tá então a gente vem aqui ó coloca Um padrão aqui nesse campo para não ficar vazio aqui no nosso editor eu acho que tá tudo certo agora deixa eu ver aqui na minha flechinha se tá funcionando o botão voltar vamos ver aqui o botão voltar navegate pack Aqui tá tudo certo e é

isso que eu quero Ah faltou a nota né uhum hum Vamos colocar curso Row e a nota perfeito colocar um valor padrão aqui ó confirmar e agora sim a gente pode testar vamos rodar o teste então Aqui já carregou vamos Testar nosso we quando eu clicar aqui no curso tem que mostrar os detalhes do curso então vou clicar aqui ó ó virado mostrou os detalhes aqui aqui do curso a capa do flo Flow o vídeo do curso do flo Flow então eu posso ver o vídeo aqui direto no meu App tudo certinho vamos voltar aqui

agora vamos ver o curso de Bubble clicar aqui de Bubble ó já abre a capa do Bubble o título do Bubble aqui tem o vídeo do Bubble Então se fosse uma videoaula a gente poderia colocar aqui Né a videoaula PR a gente tornar um aplicativo EAD perfeito agora aqui ó também só para testar o Zeno também tudo funcionando temos a nossa videoaula aqui completa do Zeno irado demais o que a gente pode fazer agora é prosseguir pra finalização do nosso crude fazer toda a parte de editar os dados e então aqui quando eu clicar em

atualizar o curso quero que abra aquele popup deixa eu ver se já está aqui ó clicar aqui não tá abrindo nada então vou vir aqui Open as Actions Vamos colocar uma nova ação e eu posso escrever aqui botom sheet bom sheet tá ele vai abrir aquele pop-up e o meu popup qual que vai ser selecionar componente vai ser editar curso então beleza vou abrir o popup agora vamos lá componentes pra gente ver como é que tá esse componente em editar curso quando eu abri o popup o que eu quero é que já seja carregad as

informações aqui em cada Campo tá daquele curso para eu conseguir editar daí se eu quiser Atualizar clico aqui se eu quiser deletar o curso clico aqui se eu quiser voltar aqui como a gente vai fazer ó vamos clicar aqui e vamos Aqui para baixo text Field vem aqui ó valor inicial que é o initial value Vamos colocar o próprio valor que a gente teve lá do nosso detalhe curso Então como que eu carrego esse valor Lembrando que aqui é como se fosse outra página então a gente pode ir levando aquele componente de página tá bom

para carregar aqui Então é como se fosse tivesse abrindo outra página com os detalhes do curso Então a gente tem que fazer algo parecido com que a gente acabou de fazer ao clicar vamos voltar lá a gente já vai entender detalhes curso e a gente abriu o pop-up aqui né com nossa ação de abrir o pop-up editar curso perfeito a gente tem que definir um parâmetro daquele componente Vamos definir um parâmetro aqui vai ser igual tá vai ser o ah curso row row que é a linha do curso esse Daqui vai ser um supa base

Roll perfeito da tabela cursos confirmar então criei já o meu parâmetro de página tá esse parâmetro e eu vou lá embaixo e vou passar esse parâmetro tá Ah o curso Row eu já tenho aqui né ele vai ser exatamente o parâmetro dessa página que é o curso Row Na verdade eu vou colocar um um nome diferente pra gente não se perder aqui né curso Row ó ó eu vim aqui no canto vim à direita e cliquei PR editar o parâmetro curso Row é editar tá Pra gente não ficar perdido com o nome tá vou voltar

lá vamos voltar lá agora detalhes curso vou clicar no meu botão vou aqui para baixo e aí vou passar o parâmetro passar o parâmetro então curso Row editar ele vai ser igual a meu próprio parâmetro de página dessa página aqui então a gente precisa daquela referência né de qual linha que é tá tudo aqui já então o curso Row tá aqui já aqui ó então curso Row editar que é o novo parâmetro de página do popup é Igual ao parâmetro de página dessa tela aqui ele tá aqui em cima né é ele tá aqui em

cima calma aí clicar aqui ó ele tá aqui em cima que é o parâmetro de página perfeito Agora sim eu consigo ter acesso à página a gente tem que fazer um processo parecido lá vamos lá em editar curso aqui nesse contêiner tá que é o mais acima que a gente consegue ir a gente vai fazer o mesmo processo Olha que fáil back ag query add a back ag query e vamos colocar um super base Query e mesma coisa ó vamos pegar curso também de novo a gente tem que fazer uma busca de uma linha única

perfeito filtros então o ID tem que dar um Mat com ID então o ID lá do sup base ele tem que ser exatamente igual ao ID do meu parâmetro de página ó curso Row editar tá bom É exatamente o que a gente acabou de fazer e aí a gente vai passar o ID dessa linha perfeito e vamos confirmar então agora sim a gente tem acesso aos Dados novamente na linha daquele cur a gente pode encher aqui como os valores iniciais porque quando eu abrir isso eu quero que ele já venha preenchido Olha que irado vamos

vir aqui nome do curso certo nome do curso vamos vir aqui embaixo ó e vamos no initial value agora a gente já tem acesso ó aqui ó a linha curs curso Row perfeito Então vamos colocar aqui ó é o nome certo descrição curta valor inicial Vamos colocar aqui curso Row des curta perfeito descrição Completa valor inicial cara curso Row Desk longa descrição longa perfeito URL da capa vamos clicar aqui mesma coisa URL da capa e URL do vídeo Ola aí é como é fácil mexer né D os primeiros passos claro que a gente pode complicar

aqui né mas para começar cara tá tranquilo demais víde URL e faltou a nota né a nota ó valor inicial colocar o valor inicial cursus r e nota virado perfeito então agora conseguimos fazer uma grande parte aí que quando carregar os dados já Vai carregar aqui tudo preenchido agora se eu quiser editar algum eu quero que Edite atualize aqui e Atualize o dado lá no ST base Então essa seria ação de update do nosso cru vamos vir aqui em atualizar e vamos nas Actions as ações essa Action aqui eu vou ter que deletar Tá bom

vamos abrir as ações add Action e eu vou fazer agora um update document update tem que ser o sup base a não vai colocar errado F Store é o sup pa Bas perfeito vamos atualizar uma linha Tabela cursos mas ele fala assim tá mas qual linha que é cara a gente já tá mestre nisso né a gente tem que dar um matching Rolls ó Qual que é o nosso filtro pra gente achar a linha que é quem é que sabe F name o ID tem que dar o match igual a o ID do nosso parâmetro

de página curso Row editar Beleza então tá bom E aqui eu vou pegar o nosso ID então ele já vai ter achado o ID que é para ele atualizar né ele vai falar assim ah tem várias linhas no meu banco De dados qual delas você quer que eu atualize eu quero que você atualiza aquela que o ID seja igual ao ID do nosso parâmetro de página perfeito vamos lá então aqui não tem mais filtros Vamos colocar um atzar os campos não ID a gente não atualiza né a gente nunca mexe no ID Vou atualizar o

nome pode colocar todos os campos aqui tá nome nota ou mais coloca os campos descrição curta descrição longa capo RL vídeo RL perfeito Faltou algum P faltou nenhum né Id não precisa e nem Create at tá a gente não vai mexer nisso Agora você tem que atualizar cada um então o que que a gente vai atualizar deixa eu mudar os nomes aqui deixa eu ver se tá certo aqui ó os nomes Eles não estão e legais né vou mudar os nomes de cada componente então aqui ó vai ser o nome editar tá nome editar só

pra gente não se perder descrição curta editar á descrição curta editar Vou atualizar os outros também a capa a URL do vídeo também também a nota Né nota tá perfeito vamos voltar lá clicar no botão atualizar vamos lá n nossas Actions vamos vir aqui então vamos atualizar o nome e ó vai ter que ser igual a nosso widget state tá aqui ó nome editar nome editar ai droga nota vamos lá em curso Edi Vamos colocar a nota e a nota tá em texto tá eu tenho que fazer aquela mudança também na nota que a gente

fez no outro clica aqui nota editar vamos vir aqui embaixo add option labels e vai ser Tá aí tem que corrigir os valores mas tudo certo vamos voltar lá agora de novo uma nota vai lá em WI state Vamos colocar a nota vai ser nota editar perfeitoo a descrição curta tudo widget state tá descrição curta Pronto já atualizei todos aqui tá o vídeo ele vai atualizar todos quando eu editar e vamos abrir aqui a a nossa Action pode editar quia fazer vamos colocar uma ação aqui e vamos colocar um dialog um alerta né informacional falar

Eh deu boa ficou em capslock Mas tudo bem curso atualizado e daí eu vou navegar navegar para meus cursos perfeito é isso né Aí fica certinho tem algum erro aqui vamos ver Ah aqui não dá o Mat com o valor inicial que arrumar aqui colocar aqui o valor inicial valor inicial valor inicial vai ser do curso Row né curso Row anota perfeito irada demais certo agora tudo certo e vamos testar para ver como é que ficou abrir meu text mode aqui e Vou dar um Instant Reload então aqui tudo certo no meu aplicativo né Vamos

lá na formação é flutter Flow e eu vou atualizar meu curso aqui tá então vou clicar aqui agora para atualizar o curso vamos lá ó abrir o popup do curso e olha que legal abriu preenchido como a gente queria Então eu vou colocar aqui na verdade eu vou atualizar o nome curso Butter Flow mais supa Base Olha que daí eu vou atualizar vamos ver se ele vaiar o nome deu boa curso atualizado Ok vamos Lá ver aqui ó pertinho já a curso FL mais sup base lá no nosso banco de dados como é que tá

maçã flo Flow ó atualizou agora bem agora atualizou curs flo Flow mais super base então a gente já consegue fazer o de atualizar dado o último que falta que é bem fácil é de deletar o dado vamos deletar algum dado então certo agora vamos fazer a parte do botão remover a tarefa remover o curso Então aqui vamos ir nas Actions vamos adicionar pode ser por aqui mesmo add Action Na verdade vou adicionar por aqui vamos em su base base e vamos em deletar Row tá deletar a linha a tabela é a cursos você tem que

falar para ele qual linha você quer tá qual linha que eu quero eu quero aquela aqui o ID D um match com o parâmetro de página que a gente já tem aqui tá bom beleza aqui vai ser o ID também ID tem que dar um Mat com um ID perfeito e aí eu vou deletar né daí na verdade eu preciso fazer uma pergunta para ele fazer uma pergunta Para ele vamos vir aqui ó Alerta vamos confirme um diálogo pra gente confirmar Então vai ser assim deletar a você falar cancelar ou vai falar confirmar certo e

na verdade vou colocar assim ó sim deletar então eu vou antes perguntar para ele se ele quer deletar ou não tá para não dar não dar ruim e aqui embaixo vou colocar adicionar uma condicional tá E daí aqui se ele colocar cancelar a gente pode para baixo a gente pode adicionar um Ah Um fim né então não acontece nada beleza se ele deletar se ele quiser deletar a gente tem que jogar isso daqui para baixo tentar jogar para baixo aqui mas não dá ele passa né é condicional deixa eu clicar nos três pontinhos aqui ó

vou copiar Action vou clicar aqui e vou em paste Action tá para colar e vou vir nessa outra aqui e vou deletar Pronto agora sim então ele fala assim tá você que realmente quer deletar aí você fala sim ou não se você falar que quer Deletar ele vai deletar e vamos dar uma Ah uma nova ação a ação pode cair di dial vai ser informational vamos informar Pronto seu urso Foi removido colocar um pouco de drama sim deletado Ok E aí aqui a gente vai colocar um mais Action né Vamos navegar para a minha página

de cursos olha aqui irado e é isso então a gente pergunta se ele quer deletar se sim fá e deleta dá uma um alerta né deletou E aí a gente fecha perfeito vamos testar lá Vamos ver se ainda tô com inspirou New session pra gente testar novamente então Aqui já carregou o que a gente vai fazer vamos deletar um deletado Zeno dá um out aqui que tá muito próximo né Vamos atualizar aqui o curso e aí eu vou clicar aqui em remover tá atenção você deseja deletar cancelar é cancelar não acontece nada certinho então agora

eu vou deletar mesmo deletar sim deletar vamos ver se vai dar certo e o curso Foi removido para sempre Ok pronto não tem Mais o curso e lá nosso backend ó vai sumir olhando que vai sumir formação Zeno vai atualizar sumiu pronto a gente já fez o crude completo conseguimos fazer aí o crud dados editar dados deletar atualizar e a já consegue ter toda a interação com o supa base show demais o nosso app já tá funcionando ele já tá conectado aí o flo Flow com o sup base a gente conseguiu fazer um app completinho

Espero que você tenha aprendido bastante mas eu quero deixar Esse projeto aí bem completinho Então vamos fazer mais alguns detalhes bem importantes no noso app PR gente deixar ele mais robusto ainda sabe o que a gente pode fazer a gente pode mostrar o e-mail do usuário que tiver logado né o que eu posso fazer vou vir aqui em dinâmico vou vir aqui em usuário autenticado e vou mostrar o e-mail v mostrar o e-mail do usuário autenticado pode colocar o e-mail aí então perfeito que faltou também ó quando eu clico aqui Eu tenho que ir pra

página do perfil e está aqui em Componentes meu perfil vamos colocar também o logout aqui ó no botão pode clicar no botão adicionar ação vamos aqui ó em supabase supabase vamos Aqui para baixo e vamos colocar o logout tá logout pra gente conseguir deslogar da nossa conta perfeito a gente vai conseguir deslogar pra gente testar ah Castelo Como que coloca foto de perfil como que eu subo uma mídia Cara isso daqui eu vou fazer lá no curso de Flot Flow na formação completa tá bom pois a gente vai criar uma aplicativo aí bem mais robusto

um aplicativo completo um app realmente EAD que temha professores e alunos a gente tem a relação entre tabelas se gente fazer algo mais elaborado aqui seria primeira aula então se tiver interesse dá uma olhada na formação Flot FL cara tem conteúdo demais mas vamos testar aqui vou vir aqui para testar abrir o meu ambiente de testes para ver se tá Funcionando essa parte então Aqui já carregou e olha só que legal agora aparece o e-mail do usuário que está logado tá vamos fazer um teste agora eu vou clicar aqui né ó no nosso profile picture

E aí eu consigo poderia conseguir alterar a foto mas isso a gente não vai ver agora eu vou dar o logout para sair aqui do aplicativo vou dar o logout sair do we vou fazer um novo cadastro aqui né Vamos colocar estel agora né de de novo Castelo Gmail Minha senha Castelo 1 2 3 e vou logar Já loguei criei meu novo usuário ó e pode ver que tá Castelo @gmail Mas aí você me pergunta Castelo como que eu faço para cada curso aqui ser associado apenas um usuário né então se eu criar meus cursos

só eu quero ver meus cursos se o castelo se o Bob criar os cursos dele só o Bob quer ver os cursos dele né e aqui eu tô vendo tudo então a gente pode mudar isso a gente pode colocar um filtro para fazer isso a gente pode vir aqui ó na Nossa tabela lá na nossa tabela cursos a gente vai ter que fazer uma uma pequena finalização aqui vamos colocar mais uma coluna e essa coluna vai ser uma chave estrangeira que vai conectar lá com a nossa tabela usuários então se você não entende essa parte

chave estrangeira chave primária depois você pode ver no nosso curso de modelage que eu explico certinho lá tá bom então eu vou inserir uma nova coluna né um novo Campo nessa tabela que vai ser user ID então aqui eu Vou conseguir falar de qual usuário é cada curso então se eu criar o curso tal vai ser o meu curso o Bob que é o curso dele vai ser o curso dele então a gente começa a criar um aplicativo aí multiusuário É bem interessante aí ele fala assim cara tem alguma relação de chave estrangeira da foreign

Key sim tem Vamos fazer uma relação com a foreign Key então userid é uma chave estrangeira da chave da tabela usuários então eu vou clicar aqui e eu vou para procurar a Tabela usuários então aqui ó é o esquema né do do supabase eu tenho que achar S esquemas padrões que ele já aca pro seu projeto se a gente for aqui em out é autenticação Tem uma tabela aqui ó se a gente for para baixo que é aquela tabela que eu tinha falado e já tinha mostrado ó tabela usuários essa tabela aqui é uma que

a gente não consegue mudar porque ela tem intenção mais de ser uma parte de segurança de garantir autenticação então a gente não vai conseguir mudar Mas eu posso relacionar o meu user ID com o ID lá da tabela Us então ele fala assim selecione uma coluna para fazer referência com a tabela usuários né out.on users né então vai ser o prio di porque a gente vai conseguir fazer com as tabelas se Conversem né então ele pergunta também e a se o usuário ele for removido por exemplo se editar usário castelo que que você quer que

faça com a os cursos do Castelo eu posso fazer deletar em cascada né que é deletar um Atrás do outro deletar Tem vários tipos aqui de deletar definir vazio o campo ou não fazer nada eu vou deletar em cascada quer dizer o quê quando Eu deleto o usuário vai deletar os cursos dele então é isso aí eu consigo fazer a conexão da tabela usuários com a tabela dos cursos ó user ID ele tá conectado com o esquema al tabela users coluna ID Olha que irado muito massa né falea aí muito legal o tipo é user

ID então ele já colocou o tipo certo aqui não precisamos mexer Mais nada e podemos salvar tudo certo vamos salvar então vamos fazer um teste lá né vou vir aqui pra direita ó Então a gente tem nosso curso formação Bubble e Curso flat Flow sup base eu vou tentar associar o curso sup base com o Bob e aqui eu vou associar o curso com o castelo eu vou clicar aqui e ele já carrega meu a minha tabela usuários para eu conseguir associar Então esse curso aqui vai ser do bob ó vou clicar aqui Bob Na

verdade o ID né aqui id o id do Bob esse curso aqui vai ser do Castelo hum op esar salvar e aqui vai ser do Castelo Então deixa eu procurar aqui ó Castelo B Esse é o ID do Castelo eu vou clicar e foi tá salvando agora ó carregando então eu já associei uma eu já associei um curso a um usuário tá então beleza banco de dados Ok vou voltar aqui no supa base vamos aqui em list viw perfeito que eu vou fazer agora vou fazer um filtro para eu mostrar só os meus cursos Como

que eu posso fazer Isso nist View lá na minha consulta que eu faço aqui no backend query vamos editar vou fazer mais um filtro ó colocar um filtro Então eu quero que mostre ah na verdade eu vou ter que atualizar meu esquema né Vamos lá e configurações su base vamos atualizar o schema get schema uhum user ID apareceu aqui perfeito vamos voltar lá agora vamos clicar na list View perfeito editar o meu backend vamos colocar um filtro agora qual vai ser o filtro eu Quero que o user ID né ele vai falar Qual campo que

é ele vai ter que ser igual a o ID do do usuário logado ó authenticate user user ID que que eu tô falando aqui eu tô falando que nos cursos esse ID aqui que tá pros cursos tem que ser igual ao ID do usuário que tá logado então só é mostrar os meus cursos perfeito é user ID né o novo campo é igual a ID do usuário logado perfeito muito fácil Vamos ver se funciona né então aqui em test mode Vamos dar um instante Reload Castelo eu acho que ele tá na formação FL Flow né

vamos ver se some aqui a ação Bubble vamos ver se vai dar certo boa deu boa sim ó agora tá filtrado então o curso do castelo é só esse para mim to tá ativo esse né vamos supor que eu tô cadastrado né tô matriculado nesse curso só consigo ter acesso a esse é o curso que eu criei eu vim aqui dar o logout vamos lá no do Pera aí o meu é do flo Flow o do Bob e é o do Bubble vou dar o logout aqui e vou Lá agora no do bob bob @gmail.com

bob a senha logar aqui e tá certo ó agora cada usuário só vê os seus próprios cursos mas a gente tá esquecendo de algo né quando a gente cria usuário a gente precisa atualizar isso vamos lá para criar vamos lá no nosso Create novo curso meu perfil novo curso a gente precisa atualizar essa Action aqui lembra vamos atualizar ela aqui eu vou vir na Action tá vou aqui na nossa Action eu vou atualizar porque eu Não defini isso back Call update e Create a document criar inserir uma nova linha Vamos colocar um novo campo e

vai ser hum o user ID tá toda vez que a gente for criar a gente tem que falar que o criador daquele campo é o usuário logado Então cara olha nosso aplicativo que robusto authenticate user perfeito user ID então quando eu criar se eu for o castelo tiver criando o curso vai criar com ed Castelo Ô irado demais né e aplicativo aqui tá muito legal muito Massa então aqui tudo certo eu acho que eu tenho que atualizar a parte editar curso também né atualizar aqui ó ah na verdade não precisa mexer em nada Então beleza

vamos fazer o último teste lá e aí gente já estamos nas finalizações Finalmente hein cara que curso de sup Bas eu duvido se encontrar um conteúdo que ensine tanto s a passo aí Espero que você tenha gostado que deu trabalho aqui fazer algo bem robusto bem organizado aí para você vamos criar um novo curso Criar um novo curso aqui ah vou criar um novo curso colocar curso base basea Complet descrição completa teste teste descrição completa Tá eu vou pegar aqui uma uma imagem de capa do supabase tá achei uma imagem aqui do supabase vou copiar

ela colocar aqui também abrir aqui um link do YouTube para pegar esse link aqui tá bom do canal do supabase deixa eu fechar aqui não atrapalhar então beleza vou criar aqui mudar a nota um pouco nota 4 adicionar curso Adicionado ó curso supabase já foi adicionado tá se eu clico aqui eu tenho acesso ao meu curso também a nossa videoaula aqui do curso perfeito tudo certo aqui né Vamos lá ver no banco de dados vai carregar aqui ó vai aparecer o novo curso tá carregando apareceu e já aparece aqui ó o curso ID do usuário

é o mesmo do id então tá certo já já deu certo a gente consegue criar um curso com relacionado ao usuário criado e aí a gente tem um aplicativo multiusuário com Autenticação né Muito completo e aí a gente finaliza essa parte e agora para finalizar e deixar nosso aplicativo ó bem robusto bem organizado pra gente poder usar vamos publicar ele na web e pwa pra gente conseguir usar no celular Vem comigo que vai ficar bem legal Bora lá então vou vir aqui embaixo ó nas minhas configurações tá aqui ó em app aets eu já tinha

colocado aqui ó uma imagem de Splash tá vou colocar um ícone você colocar um ícone também vamos vir Aqui para baixo dar um zoom out colocar um ícone aqui né Ó tem esse vou colocar um ícone aqui do nosso we bem legal tá colocar isso daqui ó que vai ser a imagem que vai aparecer quando a gente publicar ele tá bom beleza perfeito vamos lá web publishing ele fala assim ó libere a parte web para liberar Ah pra gente conseguir publicar na web então vou liberar aqui web tá vamos voltar lá daí a minha URL

vai ser app de cursos no code tá a gente vai definir aqui uma url Tá se você quiser uma url personalizada tem que pagar o plano pro tá pflow e a favc eu posso selecionar Tá qual que vai ser minha favc e minha imagens a minha imagem aqui para compartilhamento para você deve estar bloqueado aqui a minha conta é pro tá mas aqui vai ficar o do flat Flow mesmo e aí a gente vai liberar o importante ó é esse daqui ó enable pwa tá vou habilitar E é só isso que a gente precisa fazer

se você quiser saber mais detalhes sobre Como publicar na web pwa Ou publicar na Apple Store e também na Google Play só acessa a nossa formação que eu explico certinho por lá tá bom e eu vou dar um publish de se eu não esqueci Nada vamos dar um publish aqui ele vai checar se o domínio tá disponível e vai publicar na web pra gente usar o nosso aplicativo aí na web tá então vou aguardar um pouquinho já vai ser publicado então Aqui já carregou eu vou abrir agora meu link tá que eu publiquei na web

e daí a gente já tem um App publicado na web funcional tá vamos ver aqui como é que vai funcionar fazer um teste nele então já estou aqui na minha página login do cadastro tá legal que o we Tá responsivo eu vou adicionar aqui a minha conta e vou entrar na minha conta então aqui tá os meus apps né eu já tinha cadastrado eu quiser adicionar um aqui ó posso clicar aqui e vou adicionar eu até poderia deixar um pouco menor tá essa parte realmente não foi pensado para para ser web mas tá de Certa

forma responsivo eu clico aqui consigo ver os os meus vídeos né Eu posso até colocar aqui na tela cheia certinho para ver esses vídeos minha tela aqui é um pouco grande também mas legal eu vou pegar esse link aqui e vou acessar do meu celular agora que a gente publicou na web então já acessei aqui no meu celular abri então funciona aí para qualquer tipo de celular tá se eu for aqui no iPhone nesse botão aqui do meio lá embaixo que tem um quadrado com uma Flechinha clicar eu posso arrastar aqui um pouco para baixo

e colocar adicionar a tela de início ó ele vai adicionar um aplicativo lá na nossa tela de início ó supabase app de cursos e adicionar eu já adicionei aqui e olha que legal ele fica como se fosse um aplicativo mesmo mas ele tá rodando na web Mas ele tem o formato de um app isso seria um pwa é um aplicativo web que é instalável a gente pode instalar ele tanto pro celular quanto pro computador então perfeito eu Clico aqui ó olha que irado ele fica com tela cheia a usabilidade muito melhor né a gente consegue

aqui ó ter o login ter o cadastro at vou entrar na conta do Bob aqui ó Bob @gmail.com e Bob 1 2 3 vou logar Então já entrei aqui na conta do Bob olha aqui irado eu quiser aqui ver o meu curso de sup base pelo celular né posso ver meu curso de celular eu consigo ver perito posso voltar aqui também e ver o meu curso aqui Doé também ó tudo pelo fazendo realmente Mudando mudando rapidamente poder detivo a né consigo também adicionar aqui novos cursos e também editar aqui os cursos né atualizar curso a

gente consegue editar um aplicativo aí super bonito funcional e muito legal na formação a gente vai pegar ess app e fazer algo mais robusto como se fosse EAD mesmo com cadastro de professor cadastro de aluno o aluno vai deixar o professor vai deixar o aluno fazer a Matrícula Então vai ser cara irado Vamos fazer uma Vamos fazer um aplicativo bem robusto uso base e deixar o projeto ainda melhor se você quiser fazer o mesmo processo para Android é só pesquisar ali é como adicionar aplicativo a tela de início como adicionar uma página da web a

tela de início Android no Google tem vários prints ali como fazer isso mas é só um botãozinho que você clica do lado ali nos três pontinhos e coloca lá adicionar Na tela principal tá sem segredo nenhum E chegamos ao fim do curso de super base Espero que você tenha aprendido demais esse curso Ele deu bastante trabalho para deixar ele bem organizado bem didático para você e muita gente tá pedindo algum conteúdo aí sobre o supabase então a gente acabou trazendo que a gente viu aí que era algo de muito valor e tem a integração aí

com o flutter flow enfim é uma ferramenta fantástica um backend aí com muitas Possibilidades e tem muito aí a conseguir fazer dentro dos projetos com flutterflow e se você quiser uma comparação entre o flutterflow com firebase o flutterflow com Zeno comenta aqui embaixo que a gente pode trazer mais vídeos sobre conteúdo e se quiser aplicativos mais com complexo sobre o tema só falar pra gente espero que você tenha aprendido bastante e até a próxima