[Música] seja muito bem-vindo ao curso de flut Flow 100% gratuito nesse curso aqui a gente vai fazer um aplicativo do zero a app pronto tudo passo a passo a gente vai criar um aplicativo de finanças pessoais seguindo aí toda a metodologia de desenvolvimento de um aplicativo [Música] Real a gente vai lá do Zero Onde a gente vai planejar o nosso app planejar todas As telas do nosso aplicativo depois a gente vai fazer o design das Telas elas o layout lá dentro do flutterflow passo a passo e por fim a gente vai conectar o nosso front
end de tudo que a gente fez do layout com a inteligência que vai ser o banco de dados do supa base e esse aplicativo de finanças pessoais tá muito completo o app vai funcionar tanto pra web pro desktop tanto pro celular tá então a gente vai fazer um aplicativo responsivel pro usuário conseguir Utilizar em ambas plataformas Então vem comigo que esse curso de flutterflow tá absurdo demais e melhor de tudo 100% gratuito e olha só esse conteúdo aqui é nível pago eu demorei semanas para deixar bem organizado estruturado com a melhor didática possível e a
única coisa que eu peço em troca é que você comente aqui se gostou ou não E se inscreva no nosso canal se você não me conhece meu nome é Mateus Castelo eu sou da no code Startup aqui a gente ensina como criar SAS e aplicativos robustos sem utilizar código então bora comigo e vamos iniciar esse projeto que tá insano demais Bora lá [Música] e olha só que irado o que você vai aprender dentro desse curso aqui tá você vai entender tudo sobre o poder do flut Flow e vai conseguir dar os seus primeiros passos nessa
ferramenta que é uma ferramenta poderosíssima pra gente criar qualquer tipo de aplicativo ou Software além disso a gente vai criar um SAS do zero Então você vai aprender os fundamentos desde do zero a gente vai criar todo o desenho das Telas previamente fazer todo o layout lá dentro do flut Flow passo a passo e depois colocar inteligência e conexão com o banco de dados e o nosso App ele vai funcionar tanto ali no desktop quanto no celular vai ser um aplicativo de Finanças bem bonito que a gente vai conseguir ter os totais aqui de quanto
a Gente gastou vai conseguir ter as nossas entradas as nossas saídas também e aqui o registro de todos os nossos gastos financeiros esse App ó tá aado demais e deixando claro para quem qu é o curso tá é para qualquer um e é iniciante na ferramenta e g d os seus primeiros passos então Esso daqui é o melhor curso não só do Brasil mas é melhor curso para iniciantes do mundo e totalmente gratuito também é importante para quem quer tirar a sua ideia do papel e criar Uma aplicativo inovador criar um software um SAS que
também a gente vai falar um pouco mais sobre como ganhar dinheiro com nocode mais pro final desse curso tá ass até o final e no final eu mostro como é que você pode monetizar é um curso ideal para quem quer virar um Dev no code fazer uma transição de carreira para começar a construir aplicativos muito robustos de uma forma muito ágil com no code e depois dessas aulas aqui você vai ter conhecimento Sobre os fundamentos para você conseguir ter o passo a passo para criar seu app vai ter o app completo aí desde o frontend
com o backend que a gente vai conversar bastante que vai ser onde o usuário vai interagir e todo o seu banco de dados e também criar aplicativos aí multiusuários ou seja de uma vez só você vai criar um app que vai ser acessado tanto por seu usuário quanto por outros usuários e cada usuário só vai ver seus próprios dados tá eles não vão conseguir Ver os dados um do outro então isso é bem importante pra gente criar aí qualquer tipo de app se você não me conhece eu sou Mateus Castelo sou engenheiro já trabalhei por
muito tempo como cientista de dados Já criei Startup 100% com no code que foi o que G Experience e também sou o criador aqui da no code Startup que é maior ecossistema de Educação no code do Brasil estamos alguns anos 100% focados em ferramentas no cach eu Especialmente Na que eu mais gosto e é o Flot Flow que ó é a ferramenta que mais evolui na atualidade e em 2023 fui escolhido como um dos educadores do ano do Flot Flow além de ser um Embaixador oficial aqui no Brasil então sem mais enrolação bora pra próxima
aula que a gente tem muito conteúdo irado para aprender e para você queem ainda não conhece o poder do flo Flow Bora entender um pouco mais sobre essa ferramenta o Flot Flow é uma das melhor melhores ferramentas no Cult do Mercado e a gente consegue criar aplicativos muito robustos e um dos grandes diferenciais dele é que a gente consegue criar aplicativos nativos multiplataforma ou seja com o mesmo projeto a gente faz aplicativos para publicar nas lojas oficiais da Apple e da Google Play e também conseguimos utilizar aqueles mesmos aplicativos para fazer aplicativos web ou seja
aplicativos que vão rodar na web né que a gente consegue usar tanto no desktop No celular mas vai est rodando na web E além disso com Flot Flow a gente tem muita liberdade para construir praticamente qualquer design lá dentro da plataforma e depois a gente unei o design com a inteligência do aplicativo então a gente consegue criar todas as partes de lógicas e ações de negócio lá dentro do nosso app e você vai aprender aqui nessa aula como fazer essas ações passo a passo E além disso a gente consegue conectar o flutterflow com Qualquer tipo
de banco de dados ele tem conexão Nativa com firebase e com suabase mas a gente também consegue conectar com qualquer outro banco de dados ou outro serviço de inteligência por meio de Apis o que faz do Flot Flow uma das melhores ferramentas e mais completas do mercado então como eu falei no Flot Flow a gente consegue criar Web Apps então aplicativos que vão ser utilizados tanto aqui pro desktop né que a gente consegue fazer na web mas também Aplicativos nativos para a gente publicar lá nas lojas oficiais e esse acaba sendo um dos grandes diferenciais
do Flot Flow esse daqui por exemplo é um dos apps que a gente faz na formação de CRM então isso daqui eu fiz tudo com flotter Flow e a gente consegue tanto usar na web quanto no aplicativo na ativo e além disso um dos maiores pontos aí do flutterflow é que o flutterflow é baseado no flutter então a gente consegue ter acesso ao código completo Nosso aplicativo e com plano pro você consegue baixar esse código E aí ter a liberdade para fazer o que quiser com o seu projeto isso é muito importante porque caso a
gente queira escalar nosso aplicativo e ter autonomia 100% do nosso projeto do nosso código fonte a gente pode baixar e continuar desenvolvendo por conta própria com o nosso time de desenvolvimento então acaba sendo perfeito porque você vai testar o seu MVP e depois quando o seu aplicativo Tiver muito grande também você tem essa possibilidade de baixar o código e continuar por conta própria e muitos me perguntam quando utilizar o flo Flow o bom do flo Flow é que a gente consegue utilizar basicamente para qualquer tipo de projeto aplicativo software ou SAS então se você quer
criar um SAS robusto multiplataforma você pode e deve utilizar flotter Flow porque é uma ferramenta muito completa além disso a gente pode utilizar PL Flow para Projetos que precisam recursos nativos do celular como por exemplo usar câmera usar áudio ou também geolocalização então se você precisa algum recurso nativo do celular É bem interessante que você utilize flat Flow para construir o seu projeto e também se você quer um projeto com autonomia sobre o código fonte o flat Flow é uma ótima ferramenta por ISO assim você tem a liberdade e o código é teu mas muito
importante deixar claro que todo esse poder vem com uma Responsabilidade pra gente aprender flutterflow a curva de aprendizado é um pouco maior e pode ser uma ferramenta mais técnica Então a gente tem tem algumas outras ferramentas no code no mercado que são mais fáceis de aprender mas elas são limitadas e o flf ele acaba sendo mais difícil mas a gente consegue fazer uma gama aí de projetos a gente tem possibilidade de personalização do nosso design e também das funcionalidades então a gente consegue Criar SAS muito robustos mas você tem que ficar ciente que o Flot
FL não é tão fácil aprender e pode demorar aí algumas semanas e meses para você criar seu primeiro projeto Eu também gosto de deixar claro alguns projetos que o Flot flow não é muito recomendável por exemplo paraa site ou l pages o flutter FL ele acaba tendo um tempo de carregamento um pouco mais lento principalmente na primeira página então não seria melhor ferramenta para você Utilizar para um site também ele não é tão bom ainda não é otimizado para seo é legal que você utilize outras ferramentas se você quer criar só um site uma L
page opte por outras ferramentas mas se você quer criar um SAS realmente robustos aí você pode ir pro lado do floter Flow se você quer criar automações individuais também não precisa utilizar o flutter flow você pode usar out as ferramentas e também se você quer criar um projeto muito rápido Com planilha com banco de dados também tem outras ferramentas quais são elas por exemplo para sites landpages projetos que dependem de so é legal você fazer aí no framer tá o framer é uma ferramenta muito rápida e robusta para criar esse tipo de projetos a também
tem outras possibilidades como por exemplo webflow ou o WordPress a gente tem vídeos completos essas ferramentas aqui no canal para automações individuais é legal você utilizar make mas muitas Vezes aqui nos projetos a gente vai utilizar flat Flow junto com make que vai ser uma combinação poderosa e caso você queira criar um projeto bem rápido utilizando planilha com banco de dados a gente recomenda que você vá pro lado do software que é uma ferramenta que você consegue criar projetos mais rápidos no code e também ela não é tão difícil ela é bem fácil de aprender
mas ela vai ser bem mais limitada então agora vamos entrar no Flot Flow pra gente começar a Mexer na prática se você ainda não tem conta vai no site do Flot Flow e pode fazer aqui ó a sua conta tá no start for free Então é só logar e fazer a sua conta aí sem segredo nenhum depois se quiser dar uma olhada no site ó é bem legal mostra aí todas as funcionalidades que o flutterflow faz né de conseguir codar de conseguir fazer as a parte integrada com lógica construir aplicativos também responsivos então É bem
interessante dar uma olhadinha lá Que você vai entender sobre o flutterflow aqui já estou dentro da minha conta tá já estou nos meus projetos e Aqui é onde você vai controlar os seus projetos eu tenho alguns aqui aqui você conseguiria gerenciar a sua organização se você tem o plano em equipe aqui a gente tem o Marketplace do flutterflow para você conseguir é baixar cites prontos ou baixar projetos prontos aqui você consegue ver detalhes da sua conta e Também fazer o upgrade tá não tem muito segredo aqui que a gente tem que fazer é criar um
novo projeto pra gente começar a utilizar tá o flf Ele é bem interessante que ele tem Unos projetos prontos depois pode dar uma olhada tem alguns bem legais já vem com todas as telas ações prontas tá é legal mas se você é iniciante não pega um projeto pronto senão você vai f ficar perdido com tanta coisa que tem pronto aqui e não vai saber mexer então toma cuidado Com isso a gente vai criar um do zero Beleza vai ser um app de Finanças tá app de Finanças e vou clicar aqui ó Create Blank tá que
é criar do zero aqui a gente vai pular tá o app de Finanças você consegue colocar o nome né o nome do seu pacote não precisa colocar o tema aqui vamos deixar o padrão que tá Não precisa também mexer em nada aqui e o firebase eu vou tirar tá vou tirar aqui pra gente não conectar com o firebase agora é só o design e vou clicar aqui ó Em start building quer começar a construir tá E aí o Flot Flow nos dá essa telinha aqui que é uma tela que a gente vai ficar muito tempo
nela construind nossos aplicativos mas para você ter um overview geral vamos lá vamos conhecer primeiro os menus aqui da esquerda tá aqui eu vou conseguir ter acesso aos widgets então eu consigo ver aqueles widgets principais de texto coluna linha É bem interessante que a gente vai conseguir utilizar esses wis Aqui vamos ter elementos de layout como eu falei container também a gente vai conseguir organizar nosso layout Tem vários tipos prontos aqui é muito completo tem elementos de base né pra gente conseguir criar textos imagens imagens circular botões YouTube Player então tem variados e variados elementos
aqui para você conseguir utilizar dentro do seu app tem elementos de página aqui seri menus de página aqui o app bar essa parte de do aplicativo itivo um FAB aqui Que é um botãozinho que vai ter nosso app tem elementos de formulário que a gente consegue aqui utilizar os elementos pro usuário inserir dados tá a gente sempre vai estar utilizando bastante esses elementos de formulário e basicamente é isso depois pode dar uma olhada com calma aqui a gente vai mais direto ao ponto tá aqui a gente consegue criar esses componentes Conseguimos ver alguns templates e
também usar alguns widgets do tema tá Depois a gente vai Usar essa parte importante aqui também ó aqui a gente consegue adicionar novas páginas novos componentes então se eu clicar aqui eu adiciono páginas prontas tá tem alguns padrões prontos já de autenticação de conteúdo de listas então é bem legal Alguns podem ser bem úteis aqui pra gente ter páginas prontas para acelerar o nosso desenvolvimento e aqui tem componentes prontos tá tem componentes de ui componentes aqui ó de botom sheet que seriam um popups tem Headers que seram cabeçalhos tem cards aqui ó prontos pode ser
bem útil pra gente no nosso caso a gente vai criar tudo do zero Beleza deixa eu continuar aqui aqui nessa parte a gente vai ter a nossa árvore de elementos então eu vou conseguir ver nossas páginas e conseguir ver o nossos elementos aqui como eles estão organizados ó então aqui por exemplo eu tenho a minha hom page uma coluna com APP bar depois a gente vai até excluir fazer alguns testes aqui a Gente consegue ver qual que vai ser o fluxo de usuário no nosso aplicativo então ó vai ter a home page mas depois da
home page pode ter outra página aqui e ele conseguiria fazer a seta tá qualquer o fluxo de usuário do seu app bem interessante uma funcionalidade bem legal temos aqui o Fire Store que é para conectar nosso banco de dados de uma forma integrada aí com firebase que é o banco de dados do firebase primeiro a gente vai focar em design e depois a Gente vai ir pra parte de backend tá aqui nós temos os nossos tipos de dados que a gente consegue criar data types que são Dados aí novos tipos de dados personalizados isso daqui
a gente vai fazer depois também aqui embaixo temos o app States que são nada mais que variáveis globais aqui que a gente vai utilizar nosso aplicativo daqui também a gente utiliza í alguns projetos que é bem bem útil tá E aqui nós temos a parte de apis que vamos fazer toda a conexão De apis com outros sistemas ou bancos de dados tá isso daqui também é uma parte bem importante inclusive ensino aí de uma forma completa no projeto de Inteligência Artificial Ou seja a gente conecta o Flot Flow por meio de api lá com a
openi aqui a gente consegue colocar nossas mídias então a gente pode colocar mídias aqui fotos e vídeos vão ser utilizadas apenas no flo Flow se a gente quer guardar realmente as mídias do nosso projeto aí é lá no nosso banco De dados tá nosso backend beleza aqui a gente consegue criar Custom code então no FL fo interessante porque a gente tem essa liberdade de colocar a mão na massa em códigos personalizados para criar aí basicamente qualquer tipo de um elemento novo ou uma Action nova a gente consegue fazer isso por meio de códigos não precisa
saber programar tá pode ficar tranquilo a gente precisa saber só o básico para conseguir criar os códigos a gente vai usar bastante também Inteligência Artificial então fica bem fácil nessa nossa jornada legal aqui embaixo a gente tem as Cloud functions que é mais para quem tá usando o firebase tá é uma parte um pouco mais técnica para rodar funções no Cloud functions do firebase também temos testes automatizados para fazer o nosso app isso daqui seria só pra parte paga aqui a gente consegue mudar toda a paleta de cores o nosso design Light mode Qual que
É o Dark mode aqui também a nossa tipog fia o nosso design System então a gente consegue criar esse design completo para não ficar precisando mexer toda hora lá no nosso app tá a gente vai criar aqui de uma forma padronizada e depois essa paret de cores já vai ser respeitada pro projeto inteiro então é bem útil aqui mas a gente não vai mexer muito porque não é necessário nesse projeto em configurações aqui a gente consegue ver detalhes do nosso app aqui a gente Consegue ver aqui algumas mídias para colocar nosso app né quando o
app abre aqui são as configurações da nave bar aqui é um elemento novo para conseguir fazer um passo a passo pro usuário ó um guia pro seu usuário vai ali conseguir seguir o passo a passo um colaboração a gente consegue chamar usuários pro nosso projeto aqui a gente tem as configurações do firebase com o banco de dados conseguimos aí colocar outras linguagens o nosso app definir Quais as Plataformas Lembra que eu falei que são multiplataformas então a gente consegue aqui ó fazer o mesmo código para Android o mesmo para IOS e também fazer aqui paraa
web e vai ter também para outros também macos Windows Linux permissões aqui ó do nosso app também quando a gente tá trabalhando com recursos nativos do celular temos também autenticação nosso app bem importante para deixar seguro notificações push que isso daqui fica mais paraa frente pra Gente aprender a gente fazer aqui a publicação nas lojas oficiais então flf tem uma forma aqui bem padronizada e rápida a gente conseguir publicar nosso app mas isso daqui seria pro plano pro tá publicação web que é bem interessante a gente vai mexer depois E aí tem muitas outras integrações
por exemplo integração com stripe integração com revenue Cat integração com supabase com aelite para construir aplicativos nativos que vão funcionar offline e tem Outras integrações aqui bem interessantes tá tem muita coisa aqui tô fazendo resumo para você se achar mas fica tranquilo que a gente vai fazer aqui aos poucos tá então a gente já Entendeu essa parte aqui na parte do meio a gente consegue dar o zoom tá no nosso app é importante que você não dê o zoom no seu navegador de o Zoom por aqui tá o zoom out ou Zoom in porque senão
o FF pode dar uma bugada aqui se eu dar o zoom out né Por exemplo aqui ó ele pode Travar No caso aqui deu tudo certo mas pode acontecer no seu app aqui eu consigo ver em modo celular em modo tablet ou em modo computador então a gente vai construir aplicativos aí multiplataformas então é importante ter isso E aí Além disso aqui a gente tem um botãozinho para criar telas prontas com inteligência artificial tá meio interessante você pode clicar por exemplo aqui ó crie um app de delivery para mim e ele vai criar uma tela
de Delivery para você aí pronta tá com ia eu tenho um vídeo no canal só sobre isso então depois d uma olhada a gente não vai ver isso agora aqui a gente consegue ver como que o app tá ficando em Dark mode tá então eu posso mudar aqui aqui a gente pode ver o device o dispositivo e aqui é pra gente saber como é que tá a responsividade do nosso app Então a gente vai mexendo nas telas para ver como que ele vai se comportar tá aqui a gente pode mostrar a parte do escala do
Texto A gente não vai usar muito e aqui tem algumas configurações do canva que a gente não vai usar muito também aqui em cima é importante tá a gente tem comentários que a gente pode fazer no nosso projeto então se você tá desenvolvendo com outras pessoas e faz comentários aqui são algumas dicas de otimização pode ficar tranquilo Se aparecer algo aqui ele não vai quebrar seu app são apenas dicas tá para você deixar o seu app otimizado e aqui são Bugs então quando tiver algum MG vai aparecer aqui você tem que resolver senão você não
vai consir testar o seu app tá então Esso daqui é obrigatório resolver aqui a gente consegue ter acesso ao código fonte então eu posso clicar aqui ó para ver o nosso código fonte da nossa tela tá bem interessante E aí se você quiser baixar o seu código você consegue baixar por aqui ó download code mas precisa ser no plano pago perfeito aqui seria pra gente Compartilhar nosso projeto então Toda vez que você quer compartilhar com alguém ó você clica aqui ó make Public E aí compartilha URL o seu usuário vai conseguir inclusive até clonar o
seu projeto se ele tiver compartilhado aqui a gente consegue testar nosso aplicativo em relação ao design apenas tá sem contar inteligência e aqui no raiozinho a gente vai testar a inteligência tá tem opção também de testar local aí você vai ter que baixar o seu app por enquanto Apenas disponível o flutterflow no Mac e logo vai est saindo a versão de Windows então aqui por exemplo ó eu ten essa coluna né Tem um appb aqui eu vou por exemplo deitar appb lembra na coluna posso colocar aqui os elementos então coloquei o contêiner E aí a
partir desse contêiner eu consigo organizar em coluna tá ó eu ten esse contêiner tendo esse coner por exemplo vai ter uma outra linha aqui e nessa outra linha aqui vai ter por exemplo uma imagem deixa eu Pegar uma imagem aqui uma imagem vai ter uma imagem dentro desse contêiner e vai ter também um texto né nessa linha aqui ó vai ter um texto do lado da imagem tá como esse contêiner tá muito pequeno eu ten que expandir ele aqui ó eu vou expandir ele aí como ele tá organizado em coluna ele expande aí de cima
para baixo tá se tivesse linha seria pra da esquerda pra direita tá E aqui ele tá com uma largura fixa ó então Aqui a gente sempre vai conseguir detalhar funcionalidades do nosso widget tá então por exemplo a gente tem aqui visibilidade condicional tá então a gente fala se a gente quer que ele apareça aqui no celular no iPad ou só no computador então poderia tirar aqui né se eu tiro esse ó ele vai sumir não vai aparecer no celular tá então a gente vai utilizar isso depois passo a passo tá aqui vai ser se você
quer que o seu contêiner ele se expanda ou se ele fique Fixo de acordo com a estrutura que ele está então ele tá aqui na coluna né aqui a gente consegue colocar pading que seri espaçamentos né Por exemplo Ah vou colocar um espaçamento 16 aqui ó na esquerda então ele vai rodar 16 pra esquerda tá aqui a gente tem alinhamentos do nosso contêiner dentro da nossa a coluna aqui a gente consegue definir a largura tá daqui a largura então a largura tá 100 a gente consegue aumentar a largura a gente consegue Aumentar a altura tá
então se eu vi aqui eu posso deixar porcentagem e vou deixar porcentagem 100% da tela tá ó contêiner ele vai expandir do tamanho da tela então quando eu aumentar aqui ó ele vai est sempre 100% tá a minha imagem o meu contêiner aqui então vou clicar aqui no meu contêiner de novo então aqui do meu contêiner sempre a gente vai ter muitas opções aqui na direita pra gente conseguir mexer Beleza então como eu tinha falado vai ter a largura aqui ó Largura sem e altura também pode ser tanto altura Fixa aqui ó em Pixel como
altura em porcentagem vai ter o preenchimento do fundo contêiner da borda se o contêiner é a borda arredondada ou não tem várias e várias opções que toda vez que eu clicar um elemento eu vou conseguir mexer aqui do lado nessas opções do elemento Beleza então a gente não vai ver todos os detalhes agora eu quero ensinar aí a medida que a gente fori construind nosso Layout porque a gente tem bastante coisa para fazer tá não vamos perder muito tempo aqui agora senão vai ficar muito grande esse tutorial Então agora você já conseguir ter um overview
completo do flo Flow lá dentro da plataforma então onde que tá cada coisa onde tá cada elemento Fica tranquilo que eu sei que é muita informação mas aos poucos quando a gente for construindo vai ficar cada vez mais fácil para você se achar e conseguir construir suas telas tá então Depois de alguns dias você vai estar muito familiarizado e vai ser muito fácil para você mas agora bora entender como tirar a ideia do papel para Criar o seu sistema o seu aplicativo comou o seu SAS vamos lá mas vamos lá antes de começar com a
mão na massa a gente tem que conversar um pouco sobre fundamentos e como você pode construir um aplicativo do zero aqui n no C de Startup a gente recebe todo dia alunos com as mesmas dúvidas e com o mesmo problema tem uma Ideia de um aplicativo inovador por onde eu começo a galera fica muito perdida e eu queria trazer um conceito muito importante que vai te ajudar a criar produtos inovadores e esse conceito bem importante que você tem que entender é sobre mvps a ca da MVP é Minimal viable product Ou seja é um produto
mínimo viável que a gente vai ter que lançar para testar o nosso aplicativo e o ideal é que esse produto ele desde o começo da sua criação ele resolva algum problema Aí principal do seu usuário e você pode começar ele com uma versão bem simples e depois você vai melhorando aqui por exemplo no gráfico a gente tem né vamos supor que o nosso cliente ele quer se transportar essa que é a dor real do cliente então o meu MVP não é sobre primeiro eu entregar a roda depois eu entregar Duas Rodas entregar aqui a parte
do carro e depois entregar o carro completo dessa forma o cliente ele só consegue ficar feliz aqui ó resolvendo a Dor do cliente lá no final Então a gente vai demorar muito para conseguir atingir assim entregar o valor pro cliente o que você tem que fazer se ele quer transporte entrega um skate depois entrega um patinete depois entrega uma bicicleta entrega uma moto e aí entrega um carro então desde o começo eu tô focando em entregar algo que resolva a doid do cliente é claro que o skate não é o que realmente o cliente quer
mas pelo menos eu já tô testando o meu Produto e tô vendo se eu consigo resolver a dor dele se eu for entregar o carro aqui vai demorar muito e eu vou ter muito tempo para ter o feedback do cliente isso é um dos conceitos mais importantes quando você tá criando um sistema um software um aplicativo você tem que focar 100% na criação do seu MVP e como validar a sua ideia então não precisa fazer algo perfeito foca na do do cliente e o que que você vai resolver E aí faz uma versão Inicial por
mais que Ela não esteja tão boa O que mais você precisa agora é o feedback do cliente Ficou claro aqui ó a gente tem o exemplo do airbnb a gente conhece já o site né Muito bonito uma das maiores empresas de Tecnologia do mundo e olha como que era o primeiro site deles ó era airbed and breakfast então era um site feião bem ruim né mas eles foram lá e testaram e conseguiram o o feedback do usuário e aí foram melhorando o projeto tá então eles foram lá testaram o MVP deles para Conseguir feedback do
usuário e aí sim Ir melhorando a plataforma o produto deles com base nesse feedback então por isso que é muito importante você seguir essa mesma linha lógica de testar ter o feedback do seu cliente pegar dados melhorar seu produto e testar novamente Então vai ser um ciclo Então esse ciclo vai ser mais ou menos assim você vai ter a sua ideia você vai construir o seu MVP você vai medir os seus dados Vai testar com seus usuários vai aprender com esses Dados e vai melhorar a ideia vai melhorar o MVP vai testar E aí um
ciclo infinito e sempre tá melhorando o seu produto como base nos feedbacks do usuário e aí quando você vai desenvolver seu projeto a gente tem uma metodologia aqui no code Startup para você criar o seu projeto passo a passo e aí quando você vai desenvolver seu MVP é muito importante que você também tenha uma metodologia de desenvolvimento você não tem que sair e abrir aqui o flut flow e Sair construindo respira calma planeja seu projeto passo a passo com a nossa metodologia e depois você vai construir eu vou te falar como que você vai fazer
isso então na metodologia Primeiramente você vai entender muito M bem o problema existente no mercado e vai ser apaixonado por resolver aquele problema e a partir daí que você tá identificando aquele problema você vai conceitualizar uma solução para aquele problema então você vai fazer um desenho geral que a Gente vai fazer aqui passo a passo nesse vídeo para entender como que a sua solução vai resolver aquele problema então vai ser um desenho geral aí do seu projeto né do seu software e depois a partir daí você vai ir pra parte de fazer o design das
Telas já pensando também do que que vai ter no seu app das funcionalidades e do fluxo do usuário mas interessante que você tenha o design das Telas prontos E aí fazer também A modelagem do banco de dados a partir Dessas funcionalidades que você decidiu que o seu app vai ter Então a partir dos tipos de usuários dos dados você vai conseguir modelar o seu banco de dados para conseguir trazer aquelas funcionalidades da forma mais organizada possível ess daqui é uma das etapas muito importante que a galera pula e depois tem muitos problemas lá na frente
e por fim aí você vai pro desenvolvimento onde vai conectar toda a parte design do banco de dados e todas As funcionalidades do seu app Então a gente vai passar aqui nesse vídeo por cada uma dessas etapas para você simular como é que seria tirar a sua ideia do papel lá no flutterflow então espero que tenha ficado claro essa parte de MVP que é muito importante e agora vamos começar o planejamento do app Seguindo aqui a metodologia da nooc Startup Bora lá então aqui nesse projeto a gente vai criar um aplicativo de finanças pessoais tá
vai ser bem erado e o problema do Nosso usuário é que tá muito desorganizado Então a gente vai trazer essa solução para ele conseguir se organizar e ter a sua vida financeira ó com muito sucesso é claro que aqui o objetivo é mais didático no caso o seu projeto você tem que analisar muito bem e também fazer várias pesquisas em relação ao mercado em relação aos concorrentes para ter certeza que você tá resolvendo aquele problema de uma forma aí bem interessante para você ter Certeza que você tá resolvendo o problema do usuário e não vai
perder seu tempo criando aí um SAS que ninguém vai usar e a partir daí a gente pode ir pra parte de conceitualizar a solução e na conceitualização da solução você vai fazer um desenho Geral do seu aplicativo do seu projeto que usuários que ele vai ter o problema que ele tá resolvendo as telas faz um desenho geral para conseguir se achar em relação ao seu projeto então aqui na no de Startup a Gente ensina fazer esse desenho aqui ou seja primeiro você vai ter o seu conceito né vai ser um app para o usuário controlar
as finanças pessoais de maneira prática os tipos de usuário vai ser só um usuário mesmo às vezes a gente tem tipo de usuário que eles conseguem mexer na parte administrativa não é o caso aqui desse projeto mas a gente tem outros projetos na formação no cod Startup sobre isso tá tem uma parte administrativa pro usuário controlar o Seu projeto e quais são as funcionalidades então ele consegue visualizar editar Criar e deletar entradas e gastos então se ele gasta algo ele vai lá e vai registrar esse gasto ele adiciona aqui um novo gasto a nova entrada
ele vai conseguir adicionar uma foto no caso do nosso aplicativo a gente vai fazer só adicionar foto de perfil tá E vai ter algumas funcionalidades futuras como por exemplo ó integrar Inteligência Artificial então A gente vai deixar aí pro futuro para conseguir integrar o nosso app com EA Beleza vai ter a parte também de páginas e telas Então quais telas vão ter no noso app nosso app só vai ter duas telas ele vai ser bem simples e direto a ponto ele vai ter a tela de login e cadastro e a tela da home né que
ele vai controlar as finanças pessoais Então vai ter o bloco aqui ó de boas-vindas um total por categoria né o total quanto que ele gastou o total do registro dos gastos Também a tabela de dos gastos e alguns componentes ele vai clicar vai abrir um componente para a gente consegir conseguir adicionar o nosso registro de entrada e saída ele vai conseguir editar e deletar o registro e vai conseguir aqui ó ter acesso à minha conta então os dados usuário e o logout Então olha que legal dessa forma eu já consigo ter uma visão geral e
eu acabo me achando no planejamento do meu App já sei para quem que é meu App já sei as telas que vai Ter então fica mais fácil eu conseguir me organizar para estruturar seu projeto não pule essa etapa que é muito importante hein e agora a gente já pode avançar pra parte de design e antes de pensar no planejamento do Design no nosso App a gente tem que entender alguns fundamentos essenciais do flutterflow em relação à criação de telas que daqui a pouco a gente vai pra prática hein pode ficar tranquilo que já vamos pra
prática e vamos abrir o floter Flow para criar nossas telas então no flo Flow a gente vai ter alguns elementos principais por exemplo vamos ter os elementos de Base a gente vai pegar o texto vai arrastar pra tela a gente tem elementos de imagem de botão de contêiner que a gente vai organizar também os nossos elementos lá dentro e vamos ter muitos outros que a gente vai usar durante o projeto também vamos ter elementos de layout tá que são para organizar os nossos componentes na tela Por exemplo elementos de Row que é uma linha Então
a gente vai conseguir colocar os elementos aí um do lado do outro elementos de coluna né colocar os elementos um embaixo do outro stack é um em cima do outro Grid View seria essa forma aí de grade então tem vários elementos que a gente vai ver na prática Tá mas principalmente a gente vai usar bastante esses três para estruturar nosso aplicativo que a coluna a linha e o stack tá a gente sempre vai pensar em Como Nossos elementos estão organizados para deixar o nosso aplicativo aí ó bem estruturado em relação ao design então aqui por
exemplo na nossa tela se a gente colocar os elementos aqui um embaixo do outro a gente vai primeiro colocar uma coluna tá a gente coloca uma coluna e depois vai inserindo os elementos um embaixo do outro se eles estão um do lado do outro a gente vai colocar uma linha Então coloca a linha e coloca os elementos aqui se a gente quer Colocar eles um pouco em cima do outro assim ó Nesse estilo aqui de sobreposição a gente vai usar o elemento stack mas aqui ó esse aplicativo por exemplo a gente tem uma coluna né
ó a coluna inteira ela tem primeiro uma imagem aí depois tem esse contêiner aqui e depois tem esse contêiner Então a gente tem uma coluna com três contêiners e aqui por exemplo dentro desse contêiner a gente tem aqui três elementos um do lado do outro tá ó e Aqui é uma coluna que também vai ter um ícone e um texto aqui embaixo então a gente consegue fazer esse entrelaçamento entre linhas e colunas na prática vai ficar mais fácil isso e um exemplo de um projeto aqui ó só para ficar fic mais visível para você é
nosso assistente financeiro a gente tem um vídeo completo aqui tá depois se quiser aprender sobre como integrar o seu projeto flutter Flow com inteligência artificial tá bem erado mas aqui ó a gente sempre vai organizar Tudo dentro de contêiners tá então pra gente conseguir ter mais domínio do nosso design a gente sempre vai deixar tudo dentro de contêiners tá então eu coloquei esse contêiner aqui seria o contêiner geral esse contêiner completo tá E aqui tem uma coluna ó a coluna Luna é composta por três contes principais o cabeçalho as mensagens do chat e o enviar
pergunta então ó cabeçalho um Quadradão esse contêiner é um Quadradão é chat mensagens então tá aqui as Mensagens do chat e aqui tem um terceiro que é eu enviar Pergunta a gente tem três contes principais aqui por exemplo eu nem abri né esses dois mas abri o cabeçalho O que que tem no cabeçalho ó meus elementos Eles estão numa linha ão estão um do lado do outro esse tá do lado desse aqui tá do lado desse então eu tenho a imagem circular aqui e aqui eu tenho um outro contêiner vai ter uma coluna ou seja
tem um texto em cima do outro ó a coluna aqui um texto em cima Do outro e depois eu coloquei meu ícone lá no contêiner aqui na direita Então dessa forma a gente consegue já visualizar como é que a gente vai organizar o nosso aplicativo tá e a gente vai fazer isso na prática e vai ficar mais fácil para você entender e agora que a gente já entender os fundamentos de design no flutterflow a gente pode ir pra próxima etapa da metodologia de desenvolvimento que a gente tá seguindo Então já fizemos a Parte do problema
da conceitualização da solução agora podemos pensar no design do nosso app como que a gente vai fazer isso bom seguindo o passo a passo da metodologia estamos agora no design das Telas e pra gente elaborar nossas telas a gente tem que seguir um processo de desenvolvimento design é interessante que você contrate um profissional apenas focado em design para criar as telas do seu aplicativo Mas também se você não puder você pode colocar a mão na massa Eu vou te explicar um passo a passo simplificado para você fazer os design das suas telas de uma forma
bem interessante primeiro como que a gente tem que começar a gente tem que pensar aqui lá na nossa geração da ideia fazer um esboço geral no papel mesmo o que que vai ter em cada tela quantas telas vão ter e daí a gente vai pros designes de baixa fidelidade até chegar nos designes de alta fidelidade isso daqui seria Todo modelo de concepção então que a gente Vai pensar em algumas ideias vamos olhar aplicativos que a gente quer se basear no mercado Vamos fazer rabiscos depois a gente pode faz Moc Caps wireframes se nem só os
desenhos das Telas vamos melhorando Até chegar na tela final que a gente vai fazer tá esse processo é muito interessante ter o feedback do cliente ou ter o feedback do usuário enquanto você tá construindo esse processo aqui de design das Telas tá paraa geração de ideias criativas a Gente indica aqui o dribble e o behance para você utilizar sites que são sites que você consegue ver alguns Maps telas prontas aplicativos já prontos muito muito bonitos para você conseguir se basear e criar o seu próprio projeto tá então eu sempre uso esses dois aqui para me
basear no meus projetos PR prototipar Geralmente eu utilizo Miro que eu gosto de usar o Miro aí para várias coisas além disso né e eu gosto porque ele tem alguns mockups prontos pra gente Conseguir pensar no desenho das telas para fazer protótipos de alta filidade a gente pode usar o figma ou inclusive o flutterflow e aqui por exemplo na parte de pegar novas ideias eu peguei alguns projetos né então eu tava olhando lá e eu achei esse projeto aqui de um aplicativo financeiro eu vi as cores eu vi como que organiza todos os processos eu
vi também um aplicativo que é o coin app é um app feito aí 100% em Flot flow do match points depois você pode até Baixar mas um aplicativ virado demais super completo para fazer a gestão das Finanças tá então aqui tem uns blocos bem bonitos aplicativo cara muito massa e feito aí 100% FL Flow depois dá uma olhada mas peguei algumas referências para me basear no meu design depois que eu peguei essas referências agora a gente precisa criar os frames das telas que nada mais é do que esboços de baixa fidelidade para ver qual bloco
que vai ter em cada tela e quantas telas vão ter E olha só como é que ficou Então esse daqui foram os Wi frames que eu fiz diretamente no Miro então aqui o objetivo foi entender o que que estaria em cada tela tá então como a gente só tem as telas aqui da homepage eu fiz uma opção pra web né para o desktop que teria um menu principal aqui a minha conta uma logo a home vai ter um bem-vindo vai ter o saldo Total eu vou ter da minha conta total entradas e total de Saída
tá e vou ter aqui meus registros financeiros aqui eu vou conseguir clicar no botão para adicionar uma nova entrada uma nova saída nesse registro financeiro show demais também fiz aqui pro celular então eu tenho aqui meu celular modelo celular só vai sumir esse menu aqui ele vai sumir E aí vai ficar o menu Hamburger vai aparecer para o celular o resto vai ficar bem parecido tá ó vai ficar aqui os totais Tá eu vou conseguir arrastar com dedo e min min a tabela Também vou conseguir arrastar com o dedo aqui vai ter o registro dos
meus gastos E por que que eu decidi fazer esse modelo porque é um modelo muito Coringa a gente consegue utilizar para projetos tanto para projetos desktop tanto para projetos no celular então vai ser muito bom que nesse tutorial você vai aprender como fazer esse aplicativo aí já multiplataforma em relação ao design e vai ser base para você construir qualquer outro aplicativo aí pro seu Projeto e a partir desse wireframe aqui ó de baixa fidelidade tá eu fui pensando como é que seria fazer o meu projeto final de alta afinidade Então eu fui lá e fiz
diretamente no flutterflow com base aqui nesses modelos e também com base nas referências que eu peguei e ficou assim ficou meu projeto aqui ó bem bonito irado demais que eu tenho aqui os meus totais né meus financeiros tenho minhas tabelas aqui financeira também consigo adicionar novos gastos tem o meu Menu que ele vai sumir quando for pro celular então quando for pro celular vai vir aqui esse menu e eu consigo aqui utilizar o menu Hambúrger pro celular tá vai ter minha tabela aqui mas caraa ó ficou bonito demais Fala aí e eu fiz direto no
Flot Flow mas também poderia fazer no figm tá eu gosto de fazer no floter flow porque a gente consegue já colocar a mão na massa então agora vamos pra prática e vamos colocar a mão na massa para fazer o design completo das Nossas telas lá no flutterflow depois a gente vai voltar e conectar a inteligência e vamos falar um pouquinho mais sobre banco de dados e backends Mas agora vamos focar lá no design Então estou aqui no meu projeto do flutterflow vou deletar aqui essa coluna e vamos começar a pensar como é que vai ficar
o nosso projeto Tá bom vou deixar aqui no modo computador no modo desktop tá pra gente conseguir organizar então a gente já entendeu que a gente vai ter Aqui o nosso menu beleza e aqui o nosso outro conteúdo e nos projetos eu sempre organizo tudo dentro de contêiners porque facilita muito a organização e eficiência do nosso layout Então vamos pensar como é que vai ficar aqui na nossa dela aqui na tela a gente vai ter em linha né vai ter um dado do outro o menu e o nosso conteúdo principal Beleza então que que a
gente vai fazer vamos vir aqui e tudo vou colocar dentro de um contêiner esse contêiner eu posso até Renomear para ficar mais organizado tá E vai ser tela completa tá tela completa só para ficar mais organizado e agora a gente já entendeu o que vai ter aqui as colunas vai ter uma linha na verdade né e menu e o conteúdo antes eu vou deixar esse contêiner aqui expandido ao máximo Tá para isso vou vir aqui embaixo e aqui embaixo vou vir aqui na largura e altura e vou colocar aqui em porcentagem tá porcentagem e Vou
colocar 100% ó ele vai expandir a largura no máximo que a tela Puder e também a altura vou colocar 100% tá para não é em Pixel é em porcentagem vou colocar 100% tá então a gente tem um contêiner aqui expandido 100% se você quiser por exemplo ter uma margem aqui aqui né para aquelas telas muito grandes a gente pode colocar menos né e a o contêiner ele vai ficar só aqui no meio tá E para isso você poderia colocar uma porcentagem aqui Menor da tela mas vou deixar completo mesmo beleza então aqui como vai ter
o menu e depois o conteúdo Vou vir aqui ó vou colocar uma linha tá que eles vão estar organizados em linha e aí vai ter o contêiner do menu e o contêiner do conteúdo Tá o que que eu vou fazer aqui ó primeiro eu vou renomear tá posso clicar do duas vezes para renomear Ou posso vir aqui no cantinho nesse lapizinho e escrever aqui ó menu e aqui vai ser o conteúdo tá conteúdo em si tá vou colocar outra cor do contêiner só Pra gente conseguir se achar eu vou vir aqui ó em F color
pode clicar em F color Vamos colocar esse texto secundário tá só pra gente conseguir se achar esse menu aqui ele vai ter uma largura Então vou vir aqui para baixo mexer na largura del em pixxel tá de 250 e a altura dele vai ser a máxima da tela tá então vai ser 100 ó lá então o nosso menu tomando forma show demais vou colocar também um espaçamento tá ó Então vou colocar aqui um espaçamento hum de 16 16 e 16 nesses Três cantos ó o nosso meno tomando forma e também vamos deixar arredondado para ficar
mais organizado ó tem um aqui embaixo em Border vos a gente pode vir aqui ó e vou colocar uma borda uniforme E aí vou escrever aqui a borda de 12 ó olha que legal fica organizado Então já temos o contêiner principal do menu que está organizado um do lado do outro em linha show demais Castelo Bora pro próximo contêiner aqui do conteúdo contêiner do conteúdo vai ter uma altura Também de 100% tem altura de 100% e aqui na largura que eu vou fazer eu vou vir aqui nessa opção ó que é expansion então eu falo
pro meu contêiner filho que tá embaixo né da no caso da minha linha ele vai se expandir aqui ele não tá se expandindo né eu posso expandir ele que ele vai tentar alcançar a máxima largura possível já que ele está em linha quando eu clico aqui ele vai até o final que ele tá se expandindo Então essa uma opção bem interessante pra gente Utilizar deixa eu colocar aqui na outra cor só pra gente conseguir enxergar Então vai ser essa cor secundária aqui de texto e aí vamos colocar uns paddings 16 sempre é bom utilizar pads
e aqui é interessante que você sempre use pading de oito em oito tá se comece com 8 vai 16 24 Essa daí é uma boa prática a gente costuma utilizar no design para deixar nossos aplicativos bonitos e também vou deixar aqui as bordas arredondadas passa Junto comigo aí para aprender senão não vai aprender não passa tudo junto comigo depois Faça o seu próprio app Então olha aqui irado temos aqui o nosso container geral tela com completa e numa linha um do lado do outro ah Castelo mas eu quero que isso daqui como que vai ficar
em celular eu posso fazer para celular ó esse menu aqui eu posso vir aqui já ó não tem aqui ó responsivo eu vou tirar ele e não vai aparecer para celular ele não vai aparecer pra tablet e nem vai Aparecer PR tablet de lado aqui ó vai aparecer só paraa desktop Então o que acontece se eu vi aqui ó Nessa opção display resize eu posso ir diminuindo para ver o que que vai acontecer tá então Quando eu for diminuindo quando ele alcançar um tamanho padrão de tablet ele vai sumir então vou vir aqui diminuindo ó
sumiu e vai aparecer só o nosso conteúdo em si Ô irado demais hein Já temos um app responsivo Então agora que tinha fez os blocos Gerais a gente Pode começar a estruturar os blocos dentro de cada contêiner principal certo aqui o que que a gente vai fazer nesse daqui a gente vai ter uma coluna agora né que vamos ter um contêiner embaixo do outro certo eu vou vir aqui ó e vou adicionar uma coluna tá uma coluna e vou colocar um contêiner embaixo do outro tá vai ter um contêiner Aqui é onde vai ter a
logo e a nossa imagem tá E vai ter mais um contêiner que ele vai ficar lá para baixo vai ser onde o usuário vai Conseguir colocar aqui vai ter o o usuário logado né vai clicar para abrir o perfil do usuário logado esse conteiner aqui que a gente pode fazer vamos deixar ele vamos vir aqui para baixo daí aí na largura a gente pode deixar aqui 100% que ele vai tentar atingir máxima largura e a altura aqui vai ser não sei pode ser um 150 150 que vai ter nossa imagem né E daí a gente
consegue também colocar um arredondamento padrão Vamos colocar o Arredondamento padrão aqui que nem a gente fez com os outros de 12 e também um pad né Vamos colocar um pading aqui de oito como é que fica oito oit e oito certo cer então aqui vai ter o nosso logo e nosso menu e aqui para baixo eu quero que ele remova e vá para baixo né ao invés de usar esse deixa eu deletar esse daqui e eu vou copiar esse tá vou dar o cont contrl C nele posso vir aqui ó clicar cont contrl C E
aí vou Em coluna e clico contrl v e aqui na coluna A gente tem várias e várias propriedades né a gente consegue colocar pad na coluna a gente consegue expandir de acordo com seu eixo a gente consegue também organizar os conteúdos tá tá os conteúdos eles podem ser organizados tanto lá em cima tanto no meio tanto para baixo e também aqui as outras opções eu vou deixar aqui ó um em cima e um aqui embaixo tá então como tá o nosso design a gente consegue também organizar Eles de um lado pro outro no caso aqui
não vai fazer sentido né que não precisa também conseguimos deixar ele scrollable ou seja a gente conseguir scrollar conseguir rodar com um dedo também podemos deixar um espaçamento padrão e tem algumas outras opções aqui mas vou de deixar assim as configurações da minha coluna tá um lá em cima um lá embaixo e também alinhado ao meio só pra gente entender mais ou menos estrutura é muito importante que você entenda a Estrutura e organização dos contêiners em linhas e colunas porque isso vai ser padrão e os fundamentos essenciais para você fazer o seu próprio app beleza
vamos continuar aqui então aqui vamos ter uma parte Inicial né que vai ser o boas vendas depois a gente vai ter os resultados aqui embaixo e a tabela principal tá então a gente pode até copiar esse daqui vou vir aqui no conteúdo colocar também uma coluna que vai est um embaixo do outro e aí eu vou Clicar na coluna e vou dar o cont CRL V então ó já colei aqui o meu contêiner geral altura desse daqui vou deixar 120 não sei aqui só vai tá escrito o nome da pessoa né Acho que até menos
né Vamos deixar uma altura aí 80 desse contêiner esse contêiner é altura vou clicar aqui na coluna vou colar o outro tá aqui onde vai ter os nossos cards Então dentro desse contêiner Vai ter outras linhas que tem nossos cards um do lado do outro e aí beleza nossos cards Então vou vir Aqui no contêiner polar mais um aqui vai ter nossa tabela de registros né aí a altura Pode ser 500 aqui no contêiner altura vou vir aqui e deixar um pouco menor né pode ser 120 altura vou deixar 130 então aqui seja bem-vindo e
os resultados e a tabelinha aí eu vou deixar um a mais aqui também só pra gente ganhar um espaço tá então vou vir aqui e colar um a mais e aí ó se a gente for ver como eu colei a altura at 150 algo bem importante ó se você clicar Aqui ó show overflows vai mostrar um erro de layout tá quer dizer que esse layout ele tá estourando o tamanho da tela então sempre fica ligado Quando acontecer isso você tem que ajeitar tá E aqui ao invés de altura eu vou vir aqui e deixar ele
expandido que que acontece ele vai expandir o máximo que der e no caso o máximo que ele consegue é só até aqui tá eu vou deixar um pouquinho maior na verdade esse daqui vamos deixar um pouquinho maior deixar 550 pra nossa Tabela ficar grande Pode ser na verdade ó 530 beleza Olha que legal agora a gente já entendeu qual que é a estrutura geral nossos containers as nossas linhas o que que vai ter em cada estrutura e a gente pode começar a detalhar essa estrutura agora então bora lá pra gente começar a detalhar o que
que vai terem cada contêiner pra gente finalizar a nossa homepage show demais e aí tá curtindo então agora bora detalhar o nosso menu Bora lá vou dar um zoom e vou Detalhar aqui o nosso menu tá Antes de tudo eu vou deixar as cores organizadas tá aqui no meu componente que tá lá atrás eu vou tirar a cor dele para isso Ó eu posso vir aqui nos detalhes E aí em F color eu vou clicar em F color vou clicar aqui ó no conta gotas e vou pegar e arrastar daqui pra esquerda tá ó aí
ele vai ficar totalmente transparente aqui é a transparência da nossa cor Beleza então esse daqui é o nosso fundo geral esse daqui vamos colocar antes as Imagens para mudar as cores tá aqui vai ter o quê vai ter uma coluna né uma coluna e nessa coluna o que que vai ter vamos lá vai ter uma logo né vai ser uma imagem eu vou colocar logo da no code por exemplo você pode colocar logo que você quiser essa imagem ó tá vendo que já tá mostrando que ela estourou aqui o tamanho do contêiner então ó overflow
tá mostrando já que eu preciso fazer aqui em configurações da imagem de novo vai ter várias e várias informações que a Gente pode fazer na imagem no caso aqui eu vou deixar uma altura de 100 uma imagem menor uma altura de 80 vamos deixar aqui ó 70 beleza e aí depois eu vou colocar a nossa logo tá já vou colocar aqui daqui a pouco em coluna também vou colocar o menu menu aqui a gente vai fazer algo assim mais focado pro design tá depois você pode dar uma melhorada Mas vai ser como a pessoa poder
clicar no menu para isso vou fazer um contêiner nesse Contêiner aqui primeiro eu vou aumentar né na verdade vou aumentar essa altura do meu contêiner ali maior deixa eu aumentar um pouco a altura vou vir aqui ó na altura na altura 150 deixa eu colocar 200 certo vou vir aqui nesse meu contêiner vamos deixar também a largura em 100% a largura em 100 e aqui a altura dá para deixar o quê 80 beleza Além disso vamos deixar também arredondado seguindo o padrão Aí sempre que você arredonda as bordas fica algo bem bonito No seu app
deixar arredondado a cor pera aí vamos colocar antes um pading tá um pading aqui de oito Será oito em cima oito embaixo do lado não sei se precisa porque já tem esse pading aqui não sei se vai precisar qualer coisa gente coloca depois tá e dentro desse contêiner eu vou querer ter o quê eu vou querer ter um logo aqui de uma casinha né e aqui eu vou escrever home page algo assim para isso eu ten que colocar uma linha tá que vai ter uma coisa do lado Da outra uma linha dentro dessa linha vou
colocar um logo ah nosso logo colocar aqui ó escrever icon na linha tem aqui ó um elemento do tipo ícone pode clicar aí e aí também vai ter um texto aqui né nosso app ainda tá meio feião mas fica tranquilo que vai ficar bonito hein no ícone Vamos definir qual que vai ser o ícone que vai ter aqui vou clicar no ícone vi aqui à direita e clicar aqui nessa parte tá e vou escrever home pegar o símbolo de uma Casinha vamos deixar o tamanho 30 tamanho do ícone 30 tá coloco aqui embaixo e aqui
vai ser a homepage o que que eu posso escrever painel Finanças tá painel Finanças aqui são os elementos do texto Lembrando que para texto també vai ter várias e várias aqui opções para editar o texto tá no caso aqui vou deixar o o tamanho da fonte em 16 aqui a gente consegue deixar mais né ó por exemplo consigo deixar semibold E aí aqui pro nosso contêiner Consigo já deixar nas cores que eu quero esse contêiner aqui do menu a cor que eu vou querer vai ser vamos vir aqui ó cliquei no cont do menu vou
vir aqui em fio color a gente tem uma cores padrões aqui a gente poderia ter alterado né no nosso design System lá para utilizar suas cores no caso eu deixei esse padrão aqui para a gente não precisar mexer muito lá mas depois tem algumas outras aulas na formação que eu explico como fazer vou deixar aqui ó o background Secundário tá que vai ser um branco então vai ter um menu aqui e atrás lá no fundo é background primário e esse menu vai ficar numa cor legal aqui no meu contêiner de novo vamos voltar lá esse
coner aqui primeiro vou diminuir um pouco ele a altura tá ele tá muito grande vou deixar 50 beleza também vou colocar uma cor dele e a cor dele vou vir aqui ó e vou colocar cor secundária ó olha como é que vai ficar vai ficar dessa forma aqui meio escurinho né em Relação à linha eu posso colocar um espaçamento aqui ó vou clicar na linha tá do contêiner vou colocar um espaçamento que ele tá muito grudado colocar um espaçamento de oito a coisa eu mudo depois tá a gente vai se ajeitando aqui o contêiner sumiu
né porque ficou a mesma cor o ícone sumiu vou lá embaixo clicar aqui na cor do ícone ó e vamos colocar agora a cor pode ser a cor primária Na verdade vou deixar a cor secundária que é o branco cor Secundária e o meu texto também vai ser cor secundária text color pode clicar lá e mudar pra cor secundária aqui ficou muito grande né as coisas vou deixar meu texto aqui num Na verdade vou deixar 12 deixar 14 vou deixar semibold não vou deixar medium e também vou colocar um pad para ele não ficar muito
grudado né pode ser um pad de oito aí meu ícone aqui achei que ficou muito grande também vou deixar 25 tá para ficar menorzinho mais Sutil então ficaria nosso ícone Aqui beleza vou dar um zoom aqui ó para ver como é que tá ficando legal vou mudar essa imagem para isso vou vir aqui em media assets vou subir o meu logo da no code start tá vou vir aqui upload media e subir o meu logo aqui tá vou voltar L na nossa tela vou clicar aqui na imagem e vou lá para baixo a gente pode
colocar uma imagem de uma uma url né quanto aqui ó se eu clicar aqui image Type aset tá então aqui eu vou colocar aset E aí eu Vou colocar a imagem vai ser o próprio logo aqui da no code tá que eu peguei agora eu não quero quee históri aqui então vou colocar boxfit ó contém que aí ele vai deixar o meu tamanho certinho beleza se eu quiser eu posso até diminuir um pouco o meu logo aqui né deixar ele menorzinho e eu também posso diminuir o espaçamento no caso do contêiner acho que dá para
espaçar mais aqui ó esse contêiner ao invés de oito vou colocar 16 acho que vai ficar mais legal 16 e 16 tá Para realmente ter um espaço Bacana aqui legal e olha que irado se eu clicar aqui ó no Switch to Dark mode ele já vai mostrar como é que vai ficar em Dark mode ó ele já mostra em Dark mode ah Castelo mas a imagem ficou ruim no Dark mode que a gente pode fazer é subir a imagem No Light mode e aqui vai ter uma opção ó set Dark mode vou fazer isso rapidinho
vou vir aqui vou subir o aqui também em branco tá para ele ser Mostrado no Dark mode então subi o logo Branco vou vir aqui vou lá para baixo clicar aqui em set Dark mode E aí qual que vai ser a mídia Ele pergunta a mídia vai ser o logo Branco Então olha que legal quando ir pro Dark mode fica assim o meu menu painel Finanças aqui você poderia ter outros botões né Inclusive eu ensino em aulas da formação como fazer isso né de ter um menu aqui com outros botões o menu responsivel também no
caso a gente vai deixar assim Senão o Tutorial vai ficar gigantesco A tá fazendo coisa a mais já e a gente vai seguir assim tá deixar só um tipo de menu e agora o que falta é a nossa parte aqui embaixo né então vamos fazer aqui ó um logo do usuário né uma fotinha de logo o e-mail dele aqui e um iconz aqui se ele quiser sair então esse contêiner aqui primeiro eu vou deixar ele do tamanho muito alto vou deixar ele 80 80 tá E aí eu vou adicionar uma linha nele tá então acho
que você já entendeu agora Que a gente tem que colocar nossos conteúdos aí em linha aqui na linha vou vir aqui na imagem vou escrever image e vou pegar esse Circle image tá a imagem circular beleza aqui ele vai colocar uma imagem circular inclusive vou deixar assim por enquanto ele pegou uma imagem padrão depois eu coloco vou vir aqui vou subir uma imagem só pra gente ter na nossa tabela lá então subir minha imagem aqui ó só para ficar bonito depois essa imagem vai ser dinâmica tá ela vai dar De acordo com o usuário que
tiver logado e aqui em Circle image vou vir aqui image Type vou colocar também aet e vou colocar a minha imagem tá ó minha imagem Vou colocar aqui ó cont tem também para encaixar certinho fica certinho minha imagem né o diâmetro podemos mudar aqui para 70 muito grande ainda né Vamos deixar 45 pequenininho Beleza vai ter imagem aí aqui eu vou colocar um texto na minha linha além do meu texto deixa dar um Zoom aqui ó vai ficar mais legal pra gente fazer além do meu texto vou colocar que mais um ícone tá um ícone
icon aqui no meu texto vai est escrito é configurações deixar assim configurações conta tá E pode ser tamanho 12 Vamos colocar também aqui um espaçamento né Sempre coloca espaçamento não faça não faça elementos grudados um no outro por favor e aqui nesse ícone vou colocar um espaçamento V colocar o espaçamento Maior até quee ficou meio grudado 16 e no tipo de ícone vamos deixar o Ah vou escrever aqui logout logout vou deixar aqui esse daqui de sair show deais eu posso vir aqui na linha e na linha também tem aquelas propriedades né eu posso deixar
os elementos no meio eu vou deixar eles o mais afastados possíveis aqui ó mais afastado possíveis um do outro tá inclusive aqui até posso aumentar um pouco o tamanho da fonte tá deixar 14 Então finalizamos o nosso menu Olha só o nosso menu aqui dá um zoom out mas já está pronto acho que já deu para pegar o nosso padrão aqui de como fazer se eu clicar em Dark mode também já vou ter aqui ó em Dark mode Olha que legal show demais né Beleza agora vamos fazer a parte do conteúdo em si que vai
ser mostrado tanto no web App no desktop quanto lá no celular Bora lá então aqui nesse coner aqui o que que a gente pode fazer vamos Lá vamos vir aqui no contêiner o ideal aqui ó até vou fechar mas se quiser renomear os seus contêiner certinho vai ser bom tá para ser não se perder mas tem o nosso de menu e tem o nosso de conteúdo que tem essa coluna aqui tá então primeiro o contêiner aquele que tem boas vindas e também tem um iconeinstagram show então tem o contêiner e o ícone dentro desse contêiner
aqui eu vou colocar uma coluna tá que vai ser um texto embaixo do outro Vir aqui ó colocar a coluna E aí dois textos show demais Castelo dois textos aqui pode colocar dois textos e aí nessa linha aqui ó até dar um deixa diminuir porque aqui tá muito ruim né Desse tipo aqui Vamos diminuir aqui só para ficar mais organizado vou até diminuir tudo só pra gente conseguir trabalhar aqui e daí a gente não se perde né com tanta coisa essa linha aqui vou deixar as coisas separadas tá uma de um lado outra pro outro
então a gente já aprendeu isso Vamos lá para baixo separar aqui de um lado pro outro já vou aproveitar aqui e dar um espaçamento tá vou dar um espaçamento nessa linha ó de 16 e 16 E além disso vou alinhar as coisas ao meio já tá alinhado tem que alinhar aqui o contêiner vamos começar aqui no nosso contêiner vai ser no texto Primeiro vai ser um seja bem-vindo seja bem-vindo certo e aqui nesse texto aqui vai ser à Mateus Castelo Mateus Castelo vou aumentar o contêiner que ele tá muito curtinho vou deixar aqui a altura
dele eu vou deixar expandida tá vou expandir aqui a altura dele beleza aqui na coluna vou vir aqui na coluna Vou deixar alinhado pra esquerda meu conteúdo e vou deixar também alinhado ao meio Então seja bem-vindo Mateus Castelo Vamos aumentar esse texto aqui ó do Mateus Castelo Mateus Castelo Vamos colocar uns 20 e eu vou colocar também uma mãozinha Aqui que eu deixei no mocap e ficou legal então vou vir aqui no Google e pegar o emoji da mãozinha tá copiei o Emoji da mãozinha vou colar aqui ó vamos ver se vai algumas vezes não
funciona muito bem mas ó funcionou certinho tá show demais aqui nesse texto vou deixar também test color vou deixar aqui o texto secundário tá só para ficar uma cor diferente Talvez um pouco mais ó vou deixar medium vamos ver como é que fica Beleza acho que tá Ficando legal você tá achando se colocar aqui no modo celular é bom a gente ver para ver se tá cabendo tudo certinho ó Então vai caber tudo certinho que falta aqui é o nosso ícone vamos lá para baixo e vai ser aquele menu Hambúrguer né vamos vir aqui no
ícone e escrever menu vamos ver o que ele acha nesse menu hambúrguer aqui vamos deixar um pouco maior será que 30 fica bom 30 cara eu gostei gostei dessa forma aqui acho que eu acho que tá legal aqui no celular o Que a gente pode fazer se eu for lá na parte de cima em home page ó clicar a gente tem aqui uma área de segurança é uma área aqui que ele coloca né para contor realmente não ficar grudado lá em cima eu vou tirar essa área de segurança daí a gente ajeita a área geralmente
com o espaçamento aqui tá beleza tirar área de segurança aqui acho que tá show demais Nosso aplicativo também aqui ó Tá legal isso daqui eu posso sumir né eu vou sumir com ele quando eu tiver no Desktop Então vou vir aqui em responsivo e vou sumir quando tiver desktop ó sumiu Então se vem aqui em display Range size posso ir diminuindo indo aqui ó e ele só vai aparecer realmente no celular ó no celular ou no iPad né boa tá legal demais bom agora o que eu vou fazer é colocar aqui os contêiners tá os
contêiners dos totais então eu vou vir aqui no contêiner então agora vamos ver onde que estamos aqui o conteúdo até vou renomear Para ficar mais organizado né ó aqui vai ser o nosso header tá o nosso cabeçalho header aí aqui vai ser os totais tá vou mostrar Total gasto por categoria né o total de entrada total de saída aqui vai ser a parte da tabela de gastos tabela gastos perfeito e o último Vai ser apenas um espaçamento final né Vou deixar só área baixo tá a gente precisar mexer aqui Depois ver se a gente precisa
mexer ó que ela ficou muito curtinha né show vamos ver aqui então os totais agora a gente vai fazer a parte dos totais para isso começa com uma linha né uma linha para eu colocar meus contêiners então vou vir aqui na linha daí eu vou colocar um contêiner vi aqui colocar o contêiner esse contêiner ele vai ter aqui uma altura qual que pode ser a altura deixar a altura máxima né altura máxima que ele Conseguir atingir e a largura vai ser a largura de 150 tá então vai ser o nosso contêiner aqui aqui dentro vou
vir no contêiner aqui principal eu vou tirar também a cor de fundo tá vou tirar a cor de fundo depois a gente vai tirar de todos mas vou vir aqui e vou deixar ela transparente tá Depois a gente vai tirar de todos para ficar certinho eu deixo essas cores para a gente conseguir visualizar os contêiners show demais esse contêiner aqui eu acho que ele tá Bonito né falta só um arredondamento padrão aqui vamos seguir o padrão do nosso app deixar um arredondamento de 12 todos os cantos E aí eu vou vou colocar um iconz inho
o título e o gasto tá então as coisas vão estar organizadas em uma coluna Cadê meu contêiner aqui ó vi aqui e colocar uma coluna show demais dentro dessa coluna vai ter o quê vai ter primeiro uma linha tá e depois dentro da coluna Vai ter o que mais um texto um texto Dentro da linha vai ter o Aqui ó tem que selecionar certo hein não vai se perder aqui dentro da linha vai ter primeiro um ícone E aí dentro do ícone também vai ter um texto tá um text Calma que já vai ficar legal
hein aqui vai ser por exemplo que que a gente vai escrever saldo total né vai ter quanto que a pessoa gastou quanto que a pessoa Dev de entrada e aí também ah o salado total que seria o a entrada menos a saída Então pode vir aqui vamos Colocar um test color vai ser o secondary text tá E aqui esse ícone qual que pode ser o ícone acho que eu vou colocar um uma carinha não sei pode colocar o que você quiser vou colocar essa carinha aqui ó feliz tá show demais na coluna ó cliquei na
coluna vou deixar as coisas alinhadas ao meio e também alinhadas à esquerda e o que faltou aqui é um espaçamento né espaçamento de 16 16 é muito será pode ser de oito então Oo 8 e o dos lados tá Nunca faça designers grudados por favor e aqui vai ter um valor né sei lá é 1000 1560 o valor que a pessoa gastou esse texto vai ser bem grande vi aqui ó Font size colocar uns 32 será que é muito grande Ah ficou legal Vamos mudar a cor do texto eu vou deixar também esse texto aqui
também secondary text tá um saldo Total esse texto aqui ó faltou também um espaçamento para não ficar muito grudado no ícone tá oito oito aqui no Espaçamento cara Acho que ficou legal ficou bonitão hein bonitão vamos copiar esse contêiner e colar outros aqui só vou dar um espaçamento aqui ó de oito oito ou 16 pass 16 e vamos copiar um do lado do outro então vou colar aqui ó clicar no Meu Container primeiro control c clicar na minha linha contrl V tá Vou clicar de novo control V ó e aí deu um problema aqui de
overflow né porque tá estourando essa parte aqui né como que eu resolvo isso eu posso deixar a linha Rodá Vel pro lado com o dedo então se eu passar pro dedo eu quero que Rode pro lado na minha linha tô selecionado vou lá para baixo e Ó tem essa parte aqui ó scrollable como é uma linha vou deixar aqui ó que sim pode dar o scroll rodar pro lado quando eu rodo pro lado olha que irado eu consigo aqui rodar pro lado meu App cara bonito demais Fala aí show demais agora vou vir aqui no
texto aqui vai ser Total entradas Tá quanto que entrou pra pessoa Total entradas o meu Icone vou mudar vou colocar aqui um ícone escreve money money money money colocar money e esse símbolo aqui de cãozinho Total entradas né E aí vamos supor que a pessoa aqui ela ganhou sei lá ah 3.000 3.000 s tá esbanjando as cores aqui text color vamos deixar se eu for lá para baixo Ó tem algumas cores padrões vou usar essas daqui ó Foi de sucesso e aí aqui vai ser o total saídas quanto que a Pessoa gastou Total saídas lembrando
aí que esse App né pode ser utilizado para qualquer outro tipo de projeto também que envolva dinheiro cálculos financeiros is aí vai dar sua criatividade Ah vou escrever aqui credit card E aí vou usar esse daqui ó Total saídas e a pessoa aqui 1560 Então ela gastou tem a bom de matemática aí 10000 1400 40 Então ela ganhou 3.000 gastou 1440 sobrou 1560 e vamos deixar um vermelhinho né porque ela gastou tax color vamos vir aqui aqui deixar vermelhinho show então tá ficando legal aqui esse contêiner aqui eu acho que eu vou diminuir um pouco
tá o contêiner do He que eu acho que ele tá muito grande vou vir aqui e diminuir a altura Vamos diminuir a altura vou deixar de 60 60 vamos ver no desktop como é que tá ão certinho hein Tá ficando legal eu posso já tirar o meu fundo tá vou tirar meu fundo vou vir Aqui tirar meu fundo do conteúdo vou clicar no contener do conteúdo e vou vir aqui embaixo e tirar o fundo tá fio color clica aqui e deixar transparente tá vou deixar transparente já para nosso app ficar mais bonito aí ó ó
ah agora sim ó tá ficando bonitão aqui não tem também né aqui também não tem cor vamos vir aqui e tirar essa cor F color deixar branco não se quiser pode deixar branco eu não vou deixar não ainda falta aqui o meu contêiner deixa clicar aqui e tirar A cor do meu contêiner Então vou achar o meu contêiner aqui no header esse contêiner aqui tira a cor dele também que tá branco vou vir aqui em fio color certo e vou vir aqui e vou tirar aqui para deixar transparente tá aqui essa coluna acho que não
precisa né de um espaçamento acho eu coloquei um espaçamento do contêiner pá aqui em cima Esse header nesse contêiner acho que que tá o espaçamento na linha né na linha aqui ó Não precisa tá espaçamento porque não vai ter nada dentro então vou tirar o espaçamento aqui e agora sim olha o nosso projeto tomando forma olha bonitão aqui ó bonitão pessoa vai rodar pro lado se eu colocar aqui Dark mode ó também que da hora então tá ficando legal E aí no aqui dentro do desktop ó também legal ficando bem bonito aí então estamos quase
finalizando o layout hein Agora só falta a tabela de gastos e um botão final aqui hein para depois fazer Os componentes o layout realmente dá um pouco mais de trabalho mas com esse layout geral que a gente tem de fazer é uma parte de desktop você já vai ter habilidade essencial para fazer qualquer tipo de layout tá então tá bem legal então agora bora finalizar a hom page que que a gente vai fazer aqui vamos colocar agora um título né da tabela de gastos e aqui a própria tabela beleza vamos lá então vai ser organizado
em uma coluna tá então vou clicar aqui colocar Uma coluna show e dentro da coluna A gente vai colocar um texto que vai ser o título E aí eu já posso organizar esse título aqui né dentro da minha coluna primeiro eu vou deixar tudo alinhado pra esquerda E aí o texto aqui né qual que vai ser o texto vai ser meus registros financeiros show demais E aí vamos colocar um pading aqui né um texto mesmo que aí esse daqui eu vou deixar dentro do quadrado branco né pode ser oito Será oito oito em cima oito
Embaixo e oito oito na esquerda e oito embaixo né vou aumentar aqui para 18 será tá um pouquinho maior meus registros financeiros e eu vou pegar um emoji de dinheiro tá colocar aqui só para ficar legal também então já peguei vou vir aqui e vou copiar tá mo de dinheiro vamos ver se vai ó ficou legal show demais e aqui embaixo a gente vai usar o Data table que é um componente bem interessante aqui do Flot Flow nativo para organizar nossos dados tá Como que eles vão estar em tabelas eu vou deixar em data table
vou escrever aqui data e vai aparecer aqui o data table tá vou colocar esse meu componente aqui e ele coloca uma tabela aqui bem estruturada aqui pra gente tá então a gente pode editar essa tabela já para ficar mas o bom é que já vem paginação vem algumas coisas prontas um componente bem interessante deixa colocar aqui um espaçamento né um espaçamento aqui de Oito espaçamento de oito nos cantos E aí vou editar aqui o meu table vou clicar aqui nele se eu for lá para baixo eu tenho aqui a parte do cabeçalho né tá nessa
cor primária vamos mudar vamos deixar aqui talvez essa cor secundária de texto e aí os cabeços aqui ó tem aqui né Tem um aqui tem um aqui tem um aqui eu vou deixar tudo branco né vou selecionar com shift e vou deixar aqui branco né ah o branco é o cor secundária aqui do Background beleza e aqui vamos ter os gastos né Por exemplo a descrição do gasto na verdade vai ser só descrição né senão a coluna vai ficar muito grande descrição que mais categoria né até categoria do gasto a gente vai ter também o
valor do gasto o valor eu até posso colocar outra coluna aqui né se eu for no dat table ou clicar nele Tem várias configurações né deixar aqui ó colunas quatro aqui também faltou nesse texto pode deixar Branco aqui no texto pode deixar branco e vai ser o valor tipo né para saber se vai ser entrada ou saída né então por exemplo aqui eu vou escrever também descrição a descrição tudo que conectar nosso banco de dados ele vai repetir aqui paraas linhas né a categoria E aqui também no valor né vai ser o valor aqui sei
lá o valor aqui que eu vou gastar e o tipo né vai ser se ele vai ser entrada ou saída então tô colocando aqui para ver como é que vai Ficar certo e no dat table Dá para colocar várias e várias aqui funções a gente consegue colocar ah número de linhas depois a gente testa eu posso colocar as linhas que vai ter tem no ui builder aqui ó para ficar mais interessante de conseguir Enxergar se tá paginado se é selecionável aqui o gasto ou não Ó gente vai deixar não selecionado se você quer esconder o
o paginação né eu vou deixar porque eu acho bem legal tem alguns layouts a Gente consegue deixar os layouts prontos aqui o tamanho do header vou deixar esse padrão aqui que eu gostei o espaçamento das colunas até posso diminuir aqui colocar uns 10 ó as colunas carinhas passadas aqui não vai mudar muita coisa porque ele tá expandindo de acordo com o desktop mas o celular a gente vai precisar disso tá e aqui a gente consegue até colocar ordenação a gente consegue também colocar filtro né que não vai fazer isso agora mas são outras Possibilidades aí
do nosso data table que a gente vai deixar mais pra frente para ver eu quero ver só se a nossa responsividade tá certa tá por qu se eu for diminuindo aqui a tela a gente tem que conseguir visualizar as informações né então vou diminuir para ver o que acontece com o nosso dat table eu vou diminuir aqui tá tudo certo vou diminuindo os tamanho da tela e pro celular geralmente é 390 ó 390 então aqui já começa a ficar um pouco Desconfigurado o nosso modelo de dados tá então se tiver poucas colunas até colocar o
celular aqui ó pra gente ver clicar no celular vai ficar mais ou menos assim né se a gente tivesse só duas três colunas Acho que daria para deixar tudo aqui né mas eu quero que eu consiga arrastar pro lado tá esse dat table porque senão vai ficar desconfigurado né a descrição vai ser grande aqui descrição do gasto né ela vai ser grande então vai ficar meio ruim Que eu posso fazer é clicar tá no meu Delta table e daí eu posso vir aqui ó em largura mínima tá que se eu colocar uma largura mínima vai
dar certo vou colocar aqui 500 Então quer dizer que ele nunca vai diminuir de 500 e agora quer dizer o qu consigo arrastar o lado ó vou conseguir arrastar pro lado para ver as outras informações né como por exemplo de do valor do tipo né eu vou conseguir visualizar aqui no meu dat table Então dessa forma aqui fica bem organizado tá Se quiser editar mais algo aqui dá para editar por aqui também ó as células tá Por enquanto eu vou deixar assim e dessa forma que ele fica é responsivo Tá e fica bem bonito aqui
no nosso desktop Beleza depois a gente vai colocar inteligência nisso o que a gente pode fazer agora Faltou só é colocar aqui um botão né um botão pra gente adicionar o gasto então para isso eu vou usar esse botão aqui ó vou lá na home page clicar aqui no meu na home page E aí vou Adicionar um elemento de tela tá um elemento que só funciona pra tela se for lá para baixo Ó tem uns elementos que eles são apenas ó de página eu vou colocar esse FAB que é um botão que fica no cantinho
aqui pra gente adicionar tá um novo gasto a cor dele ã vou deixar em verde tá vou deixar esse Verde aqui de sucesso deixa eu ver vou dar aqui um zoom out então ó vai ficar ficar o nosso verdinho aqui para adicionar o novo gasto tá E no celular também fica bem Legal ó no celular fica o botãozinho verde eu vou até vou tirar agora essa área abaixo eu só vou tirar o fundo aí a gente finaliza a nossa hom page tá vou vir aqui em F color vou tirar o fundo tá vou deixar transparente
que vai ser mais um espaçamento pra gente ter ali embaixo tá E agora sim a gente finaliza aqui o layout do nosso app Olha que irado tem aqui o bem-vindo tem as telas aqui tem também a descrições aqui dos gastos tá E aqui tem o botão pra gente conseguir Adicionar novos gastos Então tá meem completinho funcionando também para desktop aqui ó certinho para desktop fica legal se quiser até posso diminuir aqui um pouco esse área cabeçalho ó Na verdade eu preciso aumentar aqui Preciso aumentar o coner dat table né mas acho que tá legal assim
53 vou deixar aqui a altura 550 tá só para ficar um pouquinho maior altura fixa e beleza aí acho que assim fica bem legal lembrando também que o Dark mode funciona a gente só Teria que colocar um botãozinho para isso tá um botãozinho no nosso app para mudar de Dark mode para Light mode Tá mas ó nosso app aqui bonitão também Funcionando aqui ó at colocar mostrar dispositivo ó funcionando aqui no Dark mode tá bem bonito tanto Dark mode quanto Light mode então a gente tá quase finalizando o nosso app agora a gente pode fazer
os componentes para finalizar toda a parte de design Estamos quase lá hein Bora lá bom e agora para finalizar A gente vai fazer os componentes ou seja para adicionar novos registros e também para editar registros e um outro componente importante também vai ser o componente do meu perfil Bora lá então pra gente criar um componente a gente pode vir aqui e clicar no adicionar página componente of Flow tá vamos colocar aqui novo componente criar do zero e o nome vai ser adicionar registro tá adicionar registro financeiro show demais então Lembrando a gente vai seguir os
padrões de boas práticas né E a gente vai colocar um contêiner aqui e nesse contêiner a gente vai organizar nosso projeto beleza esse contêiner aqui vamos vir aqui ó vamos primeiro colocar um espaçamento para ele vou colocar aqui um espaçamento de 16 16 16 tá 16 e também eu vou deixar ele arredondado também tá padrãozinho nosso aqui um arredondamento de 12 show demais 12 a altura pode ser o quê quer Dizer a largura né largura pode ser uns 400 e altura uns 550 vamos ver como é que vai ficar ó ele vai ficar bem grandinho
né Vamos deixar ele no meio também se eu vir aqui em alinhamento aqui ó vou deixar no meio tá então agora a gente tá alinhando o contêiner ao meio no celular como é que fica ó Celular vai aparecer um contêiner assim computador aparecia um coner assim eu acho que tá legal né funciona tanto para celular quanto para Computador show Vamos Construir então aqui em cima desse coner vou colocar uma coluna e eu vou seguir os mesmos padrões que a gente vem fazendo né Acho que já ficou Claro vou deixar um contêiner aqui ó pro header
Tá eu vou mudar a cor desse contêiner principal só pra gente conseguir visualizar os contêiners dessa forma aí fica bem didático então a cor aqui do meu contêiner do fundo vai ser esse cor secundária tá Depois eu mudo aqui então tem esse contêiner aqui vamos Vir para baixo vamos deixar ele espaçado né acho que a gente pode deixar sempre um espaçamento aqui de 16 não é muita coisa deixar espaçamento de oito todos os lados então 8 8 8 8 beleza a largura dele pode ser a largura Total aqui ó vou deixar a largura 100% tá
largura Total vou deixar também ele com borda arredondada a gente seguir os padrões aí que a gente vem fazendo borda arredondada que mais esse daqui vai ser o header tá vai ser o cabeçário então a Altura dele vamos vir aqui a altura dele a altura dele pode ser menor né pode ser tipo 70 Opa a Pode ser na verdade um 70 ten teu cabeçalho aí eu tenho aqui onde eu vou colocar os registros né as informações do meu registro financeiro e aqui vai ter o botão de adicionar vou pegar esse coner vou reaproveitar É lógico
vou dar o ctrl C aqui vou vir aqui na coluna e dar o cont control V Vou dar mais um cont control V aqui para ter3 né então esse daqui ó dá até para Renomear né vamos renomear para ficar organizadinho header que mais aqui vai ser o formulário né formulário e aqui vai ser botões beleza esse formulário aqui eu vou querer que na verdade ele se expanda tá o máximo que ele conseguir então vou clicar nesse botão aqui expansion o que que vai acontecer ele vai se expandir o máximo que ele conseguir porque ele tá
organizado numa coluna então a altura Dele vai ser expandida tá E daí agora sim a gente consegue aqui ó fazer o nosso popup para adicionar tá então vamos lá então no header vai ter um título aqui né adicionar registro e tem que ter um X aqui de fechar né então vai ter que ser uma linha uma linha e essa linha vai ter um texto e essa linha vai ter também um ícone tá vão vir aqui ó escrever ícone vai ter que ter o ícone de fechar ícone de Fechar vou vir aqui nessa linha vou vir
aqui para baixo e eu vou separar os elementos um cada um de um canto né vou separar aqui também acho que eu vou dar um um espaçamento aqui nessa um espaçamento de oito tá E aqui vai ser adicionar registro tá adicionar registro financeiro hum Vamos aumentar um pouco essa fonte aqui colocar 16 certo e vou colocar aqui a cor do texto secundário beleza esse logoz aqui ó vai ser um X né Pode escrever Close pegar o X tá pode ser até maior né pode ser uns 30 o tamanho do ícone Beleza vou vir no meu
coner principal vou clicar aqui e vai ser o background secundário tá é o mesmo background lá do meu menu e do meu conteúdo aqui vai ser adicionar registro formulário e os botões então aqui a gente pode fazer o formulário no formulário tem um elemento bem legal aqui pra gente validar formulários depois vai ser útil pra gente gente que Chama formulário form validation tá Vou colocar aqui dentro e aí a partir daí eu vou colocar uma coluna tá eu vou colocar tudo das minhas perguntas no form validation ele vai funcionar para qu ele vai mostrar se
a pessoa tá preenchendo corretamente então se tiver algum Campo obrigatório vai mostrar e aqui nós vamos ter os campos né Vamos lá então ó texto beleza texto aqui por exemplo vai ser ó título do registro né Dar um zoom aqui né para ficar mais claro organizar na minha coluna Vou deixar tudo alinhado pra esquerda E aí além do título vai ter um lugar pra gente colocar o texto tá se eu for aqui para baixo ó no formulário lá para baixo um elemento que a gente vai usar muito é o text Field que é um campo
pra gente colocar textos tá o usuário vai digitar esse texto e vai salvar lá então vai ser esse text Field beleza esse text Field vamos ver ele já veio Com o espaçamento aqui vou tirar esse passamento vou tirar esse passamento aqui dos dois lados aí tem várias opções aqui do Tex Field a gente vai direto ao ponto tem aqui ó o que tá escrito né antes da pessoa digitar vai ser descrição do gasto beleza que mais lá embaixo acho que tem uma opção Bacana aqui ó F que é deixar ele preenchido Tá eu vou dar
ok aqui ó para colocar uma cor de preenchimento tá aqui no border quando tiver focado não vai ser esse Roxo não tá eu vou deixar o nosso verde o nosso Verde aqui ele já fic mais legal tá eu não vou mudar muito você consegue personalizar bastante só vou colocar um espaçamento aqui e aí já vai ficando um pouco melhor né a gente consegue deem deixar na coluna inteira um espaçamento de oito em oito são vários detalhezinhos que você pode ir melhorando tá Por enquanto esse cinza aqui deixa eu ver como é que tá esse cinza
Vamos colocar uma outra a cor de Fundo aqui ó vamos colocar a cor primária vamos ver como é que fica Ah ficou legal gostei em cima no texto vou colocar um espaçamento também tá de Oito na verdade 16 é muito e aqui que eu vou fazer eu vou copiar o texto ó e vou colar na minha coluna embaixo vou copiar o text Field e vou colar também na minha coluna abaixo vou copiar o text Field control c e vou colar na minha coluna abaixo tá aí aqui vai ser o quê aqui vai Ser o valor
tá o valor valor em reais e aqui vai ser descrição do gasto vai ser aqui embaixo ó descrição do gasto vai ser Eu até vou colocar assim ó o valor aqui ó deixar assim a gente vai ter que usar pontos quando a gente for registrar o nosso banco de dados depois eu vou explicar por por enquanto vou deixar assim Beleza vou vir aqui copiar de novo na Coluna que que vai ter aqui aqui vai ter a categoria certo categoria no caso da categoria A gente vai usar um outro elemento aqui tá a gente for lá
em formulário Ó tem vários elementos interessantes de formulário a vai usar esse daqui ó drop Down aí o pessoal vai clicar vai aparecer algumas opções e daí ela vai salvar tá drop Down esse drop Down vamos ver aqui as configurações do nosso drop Down quero deixar preenchimento dele da mesma cor que a Gente colocou ali tá você for lá para baixo a gente tem aqui ó cor de preenchimento tá vamos ver aqui ó color vamos usar ess daqui tá F1 F4 18 tá vou tirar também a parte da das bordas tá border color aqui ó
vou vir aqui vou clicar aqui e vou tirar tá vou tirar deixar transparente e aí aqui eu vou colocar as categorias tá categorias que a pessoa vai colocar o gasto dela tá então aqui ó na no texto de dica Selecione a categoria esse texto de dica também eu vou deixar um pouco aqui ó text color vou deixar o texto secundário né vai ficar cinzinha beleza Quais são as categorias aqui das opções né essas opções aqui e depois a gente vai fazer na parte do banco de dados tá o que falta agora é pegar esse texto
aqui vou copiar aqui na coluna também texto essa categoria aqui ó eu vou copiar também antes antes eu vou dar um um espaçamento Aqui de oito que tá muito grudado vou pegar esse drop Down e colar na minha coluna aqui ó selecione a coluna e cola tá aqui vai ser o tipo né que vai ser entrada ou saída né então vir aqui ó tipo E aí aqui embaixo eu já vou escrever aqui ó as opções entrada e saída e aqui eu vou escrever assim ó entrada barra saída entrada barra saída Então a gente tem que
falar se aquele registro é um Registro que tá entrando ou tá Sao aqui em botões Vamos colocar nosso botão para isso lá embaixo vou colocar no meu contêiner uma linha e aí dentro dessa linha vou colocar o meu botão aqui ó bão Opa coloquei no lugar errado né tem que ser dentro da linha aqui ó dentro da linha botão essa linha aqui vai ter um espaçamento 16 tá para ficar aí alinhado com as outras coisas esse botão aqui vai ser um botão de adicionar adicionar adicionar registro tá Adicionar registro a cor dele Eu vou deixar
ele Verde aqui ó esse verde de sucesso e esse botão eu posso deixar ele pra direita ou eu posso deixar expandindo né tamanho Total aqui né Eu tô achando que aqui fica muito grande o espaamento né Vou colocar aqui ó espaçamento de oito e de oito né para ficar alinhado vou deixar assim gostei o que falta aqui esse header aqui uhum esse header vou mudar a cor dele Eu vou tirar aqui os Espaçamentos vou tirar o espaçamento porque eu vou deixar ele grudado ali ó já vai ver porquê eu eu acho que vai ficar mais
bonito tá fio color vou vir aqui fil color e colocar o nosso cor primária de fundo tá E aí na Row agora eu posso voltar aqui na Row vai ser 16 tá 16 16 aqui 16 aqui ó assim achei ficar mais bonito só uma coisa aqui nesse header ó eu vou ter que mudar o arredondamento dele tá arredondamento dele não vai ser em todos os cantos vai Ser quadrado em cima vai ser 12 em cima aqui vai ser T12 Ó ficou bem legal né Beleza eu acho que cara ficou bem legal bem bom no nosso
popup aqui para adicionar uma coisa que a gente pode mudar aqui é colocar os nomes tá então aqui ó a invés de text Field vai ser add descrição tá descrição do gasto que é o título do gasto esse daqui ao invés desse nome vai ser add valor tá E aqui vai ser Add categoria e o tipo vai ser add tipo perfeito Então acho que tá bem legal peguei a coluna aqui vou colocar no meio só perfeito agora tudo certo vou duplicar esse contêiner aqui esse componente para fazer o editar registro tá para te ganhar tempo
então bora lá fazer os outros componentes vamos lá então aqui eu já tenho o adicionar registro eu vou vir aqui e criar um novo componente tá ó vou vir aqui e vou criar O novo novo componente Create Blank e vai ser o editar registro tá Castelo mas não dá para copiar e colar dá como a gente vai fazer aqui ó Vi em adicionar registro vou vir nesse coner principal aqui né vou dar o control c vou voltar lá em editar o registro e vou dar selecionar aqui e dar o cont control V então a gente
acaba de copiar inteiramente o nosso contêiner aqui ó certinho hein ó que legal então aqui vai ser vamos clicar aqui pegar meu texto Aqui ó e vai ser editar registro tá editar registro então quando a pessoa ela clicar para editar o registro financeiro eu quero que V carregar a mesma página n componente parecido com adicionar registro só que aqui já vai vir pré preenchido pessoa vai poder editar E aí atualizar o registro né então aqui vai tá tudo igual tá que eu posso mudar aqui é só o botão se eu for lá no botão fechar
aqui né dechar esse vou lá no meu botão vou pegar esse botão Aqui vou dar o contrl c e copiar um botão vamos ter dois botões agora vai ter o botão de deletar e de editar Beleza então se a gente quiser deletar o registro também vai dar vou vir aqui lá no meu botão lá no nome do meu botão vamos escrever aqui deletar certo e o tamanho dele aqui ó eu vou deixar no tamanho ã 70 será importante que eu ter que vir aqui ó colocar a expansão desligada tá esse daqui também né esse meu
botão Aqui expansão desligada e posso vir aqui e escrever deletar tá que vai ser o editar editar aqui eu acho que eu fiz alguma coisa errada tá muito pequeno né Vamos colocar um 120 120 aqui essa cor aqui do deletar vai ser a cor vermelhinha né porque esse pessoal pod deletar tomar cuidado e o editar vamos deixar hum deixar o tamanho aqui em 120 também e essa minha linha eu quero que as coisas ficam separadas então vai Ficar aqui ó um do lado do outro é acho que fica legal assim vamos ver o Dark mode
que a gente tinha visto ó o Dark mode também tá ó bonitão show então ISO aqui pronto já fizemos uma vez é conseguimos duplicar aqui o que a gente pode fazer agora é a página do meu perfil tá eu vou utilizar esse padrão parecido vou vir aqui e vou dar o cont control c tá vou criar um novo componente novo componente que vai ser meu Perfil meu perfil aqui eu vou colar tá vai seguir o padrãozinho colocar em modo celular e aqui vai ser escrito meu perfil então no meu perfil não vai ter nada disso
né não vai ter esse não vai ter esse não vai ter esse esse botão Então também não vai ter vai ter um botão aqui de logout logout o usuário conseguir se desconectar do app tá logout aqui vai ser assim ó vai ter primeiro nome né da pessoa nome e aí Aqui também vai ter o o E-mail colocar aqui ó e-mail vai ter na verdade aqui o nome né Mateus Castelo vai puxar do banco de dados o nome da pessoa Vamos aumentar esse texto aqui vou deixar ele no 18 18 e a cor do texto vou
deixar secundário tá cor secundária de texto e aqui por exemplo vai ter meu e-mail né Por aqui um e-mail exemplo Castelo @gmail.com beleza fonte 18 e a cor do texto cor secundária tá E aí vai ter mais um lugar paraa pessoa conseguir Adicionar foto olha aqui completo aqui com coluna vou vir aqui foto de perfil tá E daí a gente vai ter a foto de perfil da pessoa e deixa eu colocar aqui um espaçamento que tá muito grudadinho né Não gostei 16 aqui 16 show aqui pode até ficar Ah vou deixar assim eu vou colocar
aqui agora uma imagem né que vai mostrar a imagem da foto de perfil da pessoa pessa vou deixar essa imagem quadrada até Vou colocar aqui ó aquela imagem que eu Coloquei minha show e aqui vai ser quadrada tá vamos deixar será que fica legal 200 por 200 Pode ser né a borda aqui arredondada em 12 então tá legal ficando bonito o nosso app hein um espaçamento aqui ó de oito para não ficar grudado né embaixo Só faltou um botão a gente tem que falar pra pessoa se ela quiser adicionar né um uma foto Ó aqui
tá estourando vamos vir aqui diminuir um pouco a imagem tá deixar a imagem Menorzinha mesmo deixar 150 e Aqui 150 e esse botão vai est escrito upload foto upload foto Vamos colocar um espaçamento esse botão ponte vou deixar menor também 12 ah o preenchimento vai ser esse preenchimento de segundo texto texto secundário e vou colocar também um ícone tá vamos vir aqui embaixo a gente consegue colocar um ícone no botão que legal vamos ver escrever aqui ó upload upload cons fazer upload da foto tá Ah Deixa aumentar aqui a fonte Tamanho 14 Então acho que
é isso ó pessoa entra no meu perfil e aí vai mostrar o nome dela o e-mail a foto de perfil e ela vai conseguir fazer o logout e também subir imagens lá dentro do nosso banco de dados ó super completinho a gente finaliza aqui os componentes agora vamos testar como é que ficou o design nosso app Vamos colocar algumas ações aqui bem legais para o nosso app ficar dinâmico Bora lá aqui tem nossos componentes toda vez que A pessoa clicar aqui eu quero que feche o nosso aplicativo certo então vou vir aqui em Actions Ó
você colocar ações nosso aplicativo e vou adicionar uma nova Action A Action vai ser ó se eu escrever borum sheet tá esse componente eu posso ou mostrar ou fechar que eu dismiss então eu vou clicar nesse botão aqui toda vez que ele clicar no X Ele vai fechar o pop-up vou vir aqui nos três pontinhos da minha Action e vou vir aqui ó copy Action vou vir editar Registro clicar no meu ícone clicar aqui na minha Action e vim aqui em paste Action vou vir em adicionar registro vou vir nas minhas actions e vou dar
o paste Action tá para fechar o meu próprio pop-up beleza aqui na nossa página Vamos voltar lá pras páginas em homepage tá legal aqui o que a gente precisa fazer de aumentar aqui né ficando bonitão o nosso app hein cara virado demais aqui apareceu um erro né ó ah data table config data table rows must be generated Dynamically ou seja a gente precisa gerar essas linhas aqui senão vai aparecer esse erro aqui pro dat table tá então vou vir aqui ó e aí tem uma forma da gente gerar linhas aleatórias depois a gente vai pegar
e conectar o dat table lá com o nosso banco de dados aí ele vai adicionar exatamente o que tiver lá no nosso banco de dados tá Por enquanto fazer só uma forma aqui pra gente conseguir ter uns valores aleatórios lista aleatória tá uma lista aleatória e Eu vou ter que gerar uma lista aqui nesse botãozinho aqui generate Children from variable isso daqui é sempre pra gente puxar uma lista de um banco de dados aqui tem algumas opções que a gente consegue fazer né pelos parâmetros de página pelas propriedades globais pelo id state tem várias opções
aqui vou vir aqui nesse Random data que é dados aleatórios tá ó eu vou clicar nesse ó consigo gerar uma lista de e números inteiros aleatórios só pra gente ter Mais ou menos o número de linhas que vai ter essa tabela tá E aí aqui ó eu posso colocar sei lá tamanho da lista de 1 a 10 com valores né que são os valores aqui é o tamanho da lista valores vão variar de 1 a 10 é só pra gente ter uma lista aleatória para ele conseguir duplicar a nossa linha tá então quando eu faço
isso eu tô gerando essa lista e eu vou salvar que aí ele vai virar essa lista aqui ó aleatória e já dá o cheque de Ok não tem mais bugs pra gente testar A gente pode vir aqui ó preview app quando eu venho no meu preview app Ele não carrega o meu flat Flow em conexão com o meu banco de dados tá ele não vai carregar inteligência ele vai carregar apenas o design a gente consegue carregar por aqui antes disso o que eu quero fazer é vir aqui nessa Row então toda vez que o usuário
clicar nessa Row aqui eu vou vir lá em Action e vou vir em adicionar Action e vou colocar também o bonus sheet borom sheet e agora eu vou Vir aqui em show show botom sheet então quando eu clicar ali nas configurações eu quero que apareça Qual componente componente do meu perfil beleza e também vou copiar aqui né copiar copy Action vou vir aqui no modo celular então quando ele clicar aqui ó no meu hamburguinho a gente pode vir aqui nas Actions E aí te dá o paste Action então quando ele clicar no hamburguinho vai mostrar
o pop-up do meu perfil tá que é isso daqui Ah legal a gente colocar aqui Ó a a transparência a cor de fundo do meu popup né ao invés de ser transparente vou deixar mais ou menos transparente ó vou deixar aqui 50% use color vou voltar lá no meu vou vir aqui na minha linha né eu coloquei minha Action ao invés de transparente vou vir aqui e vou deixar 50% tá E aí vai ficar legal ó e no meu botão quando eu clicar nesse botão eu quero que eu consiga adicionar no registro Então vou vir
aqui em Actions vou clicar em Adicionar Action e também borom sheet E aí dá um show Qual componente componente de adicionar registro e aqui a cor Vai ser 50% da Transparência tá um preto 50% tá agora eu posso vir aqui ó consigo testar deixa eu recarregar aqui aqui seria para testar só o design tá não tem nada a ver com banco de dados Então vou recarregar aí fica mais fácil de testar Então já tenho aqui o meu App pronto bonitão ó Formato desktop Fala aí tá irado demais não tá se eu clicar aqui ó para
adicionar ó consigo adicionar o registro hein consigo aqui adicionar categoria o tipo posso fechar aqui aqui não tá funcionando deixa eu ver se foi vamos vir aqui nos meus componentes algumas ações podem não funcionar ali naquele modo vamos vir aqui em adicionar registro Action Acho que não foi a Action né vou adicionar uma Action botom sheet Dismiss só para fechar tá agora vai funcionar Mas fala aí nosso app tá ficando pô bonito demais hein Olha só que irado deu um trabalhinho design mas tá ficando irado demais vamos lá então aqui vai carregar o pervie Vamos
dar um zoom out aqui Opa muito clicar aqui ó consigo fechar aqui agora fechei consigo ver minhas informações da conta ó bonitão Legal tem o Dark mode ó Dark mode do nosso app e o light mode E aí em modo celular tem aqui né também Dark mode o light mode conseguimos também adicionar registros e eu consigo aqui ó p o meu perfil tá no Dark mode e No Light mode cara pô irado demais hein ó Conseguimos ver os totais tá bonitão finalizamos essa parte do Design e já podemos prosseguir pro próximo bloco aqui pra gente
falar sobre inteligência e backend bora lá e apenas um recado se você quiser aprender mais sobre design de aplicativos depois dá uma olhada na nossa formação completa que ela tá irada Demais deixa eu mostrar rapidamente então aqui dentro no cod flix que a nossa plataforma de curso vou deixar o link aqui embaixo a gente passa pelos fundamentos Gerais tá como construir aplicativos a gente ensina bastante sobre apis que é um dos assuntos mais importantes para você criar seus apps e aqui também tem aulas sobre fundamentos né de modelagem de dados de no skell também caso
você esteja usando firebase também tem aqui um curso de Dart focado Para flut Flow que é super importante para você conseguir criar seus apps a gente tem uma sessão aqui do firebase onde cria um app do zero ao app completo Até as publicações nas lojas e aqui também é mais completo A gente faz aquele menu retrátil tá pois pode dar uma olhada e aqui tem outras e outras cursos né Tem de pagamentos tem aplicativo de agendamento e aqui tem a sessão só do supabase onde a gente vai lá do avançado explora bastante a parte Do
supabase também tem a parte de pagamentos focados do supabase e alguns outros projetos aqui para também você aprender sobre como por exemplo fazer pdfs out trabalhar com arquivos offline e sempre vai ter novos e novos conteúdos aqui na formação depois dá uma olhada que tá irado demais agora que a gente já passou por toda a parte de design vamos pra parte inteligência e backend e pra gente começar é importante Fi claro para você o que é uma arquitetura de sistemas E a diferença entre um front end e um backend então quando a gente tá construindo
um software um SAS a gente geralmente tem duas partes uma é o front end E também o backend o frontend vai ser toda a parte design das Telas tudo aonde uso usuário vai interagir tá o fluxo do usuário as lógicas de negócio também e no backend vai ser todo o banco de dados a segurança e autenticação armazenamento de mídias né para guardar fotos ou pdfs e também ações aí do Servidor que vão acontecer sem alguma interação do frontend então é muito importante você entender que os dois vão andar juntos quando a gente tá criando aplicativos
ou softwares e o Flot Flow é uma ótima ferramenta e é focado paraa front-end tá ele não tem a parte do backend em conjunto A gente tem que conectar com um serviço de backend que vai fazer Todas aquelas funções e o flf tem conexão Nativa com firebase e com supabase e conexão via api com o Zeno tá O Far Bas para Bas são backs muito completos Mas eles são mais hard code então eles podem ser um pouco mais técnicos e o zenio é no code então ficar um pouco mais fácil a gente usar e para
você entender um pouco melhor como é que funciona nos Zen no suabase vão ser bancos relacionais são bancos parecidos com a gente vê no Excel né são aquelas tabelas e a gente consegue fazer conexão entre as tabelas a gente tem esquemas definidos eles são focados em fazer Relações e é bom para fazer queries complexas e joins tá E no firebase vai usar um esquema mais flexível de documentos e coleções e ele não é muito bom para queries muito complexas consultas complexas e joins só que o Fire base ele é muito bom porque ele consegue escalar
e tem grandes empresas usando isso tanto far base quanto supabase e o zenos são ótimos backends para você escalar o seu aplicativo eles aguentam bastante volume de dados e são Muito bons para você estruturar pro seu app e quais são as principais diferenciais e aplicações bom pro firebase é um banco no esql flexível então ele vai utilizar documentos e relações é um backend mais técnico muitas funcionalidades integrações aí com o Google que o flf nasceu já junto integrado com o Google e tem uma relação muito próxima com a Google e o firebase é do Google
então ele tem muitas integrações prontas fáceis de usar entre O flutterflow e o Far base por isso que ele tem maiores integrações para aplicações projetos que que tem maiores flexibilidade no skl integrações com o serviço Google né então a gente consegue ter acesso a muitos serviços da Google unindo aí o f base com o flutterflow E aí a gente tem o supabase que é um banco relacional postgre então a gente consegue fazer essa conexão dos bancos de dados é um backend de tcnico também a gente consegue fazer apis via esql que é Bem interessante é
nativo pro Flot Flow então a gente não precisa fazer conexão via api a gente consegue fazer diretamente e também o diferencial dele é que é open source ou seja tem código aberto para também a gente quiser tirar o sup base da onde tá rodando e conseguimos hospedar em nossa máquina local para aplicações projetos com bancos relacionais tem um bom custo benefício também temos o banco Zeno que é um banco post back 100% no code APS no Code conexão via api com flf tá não é uma conexão Nativa o diferencial do Zeno é que ele é
no code e ele é muito bom para escalar o único problema dele é que ele é um pouquinho mais caro que deixa projetos iniciantes mais difíceis de começar com o Flot Flow e com o Zeno mas ele é uma Tima esca também por ele ser low code e aqui nesse curso a gente vai focar 100% em supabase o objetivo aqui vai ser explorar da melhor forma a conexão entre o flo Flow e o supabase Caso você queira aprender o Fire base a gente tem outro curso especial apenas para isso Aliás a gente recomenda Até que
a pessoa aprenda firebase no começo porque é o que tem mais integrações com floter Flow e é o que acaba sendo mais fácil para se entender o Flot Flow mas aqui no caso a gente vai usar PM que é um excelente backend posters com os bancos ionais e também facilita bastante o aprendizado da modelagem de dados e caso você não conheça o supabase Bora Trocar uma ideia sobre ele então bora conhecer um pouquinho mais sobre o supabase o supabase se autointitula como uma alternativa ao firebase então ele é muito bom porque ele também oferece vários
serviços de backends todos aqueles serviços que a gente falou e também muito mais e tem o banco de dados aqui ó relacional né que é o banco de dados que a gente tá acostumado com linhas e colunas legal e quais são as funcionalidades do supabase né ele é um Banco de dados flexível Com base no postgre SQL ele tem um Construtor facilitado de APS para quem não conhece o que que é api é quando a gente conecta entre um sistema e outro tá então é muito fácil a gente fazer apis com a skell no supabase
tem uma alta performance V um beade muito rápido e escalável então com ele gente consegue criar projetos que vão escalar pode ficar tranquilo aqui que o supabase vai dar conta do recado e também ele é muito Seguro ele está de acordo com as principais leis de dados e compliance então é um backend ó excelente para você utilizar E além disso tem outras funcionalidades né tem o banco de dados skl Tem a parte inteira de autenticação e segurança também Storage pra gente guardar mídias tem as funções aqui já é um pouquinho mais técnico né mas a
gente consegue fazer funções com código tem o banco de dados Real Time Então se a gente quer criar um aplicativo precisa Ser real time o suabase consegue e também tem toda a comunicação via api que ó é excelente e aí a gente pode ir pra próxima etapa da nossa metodologia que a gente fez o problema a conceitualização da solução o design das Telas e podemos ir pra banco de dados Então a gente vai fazer a modelagem do banco de dados do nosso app e eu já trouxe aqui A modelagem pronta para você a gente tem
vídeos apenas sobre modelagem tem um curso no canal que eu Vou deixar aqui no card também a gente tem vídeos apenas sobre modelagens a gente tem um curso completo de modelagem SQL e também no SQL pode dar uma olhada depois mas aqui a gente já veio direto ao ponto tá então tem as tabelas usuários e tabelas registros basicamente essas vão ser as duas tabelas do nosso banco de dados em usuários aqui tem as colunas né e os tipos das colunas então a gente sempre vai ter uma chave primária que a gente consegue deixar Cada registro
único com essa chave primária né que vai ser user ID a gente tem o nome da pessoa o e-mail e uma foto de perfil aqui que é uma url da pessoa também a gente tem os registros financeiros né então cada registro vai ter um ID que é o registros ID também a gente tem o título a descrição né o categoria do registro se ele é um registro financeiro de supermercado se ele é por exemplo uma conta da casa enfim tem a data de criação do registro Tem o tipo se entrada ou saída e também tem
o valor desse registro beleza e também aqui a gente vai ter uma chave estrangeira que vai ser user ID ou seja essa relação entre usuários e registros é um para muitos porque um usuário pode ter muitos registros mas um registros pode ter um usuário tá Então essa é uma relação um para muitos daí por isso que a gente tem que colocar a chave estrangeira aqui se você não entendeu depois dar uma olhada no nosso curso de Modelagem de dados que eu explico ó passo a passo Além disso é importante explicar aqui no suabase tem uma
outra tabelinha aqui ó que chama user do supabase é uma tabela padrão do suabase para conseguir guardar as senhas usuários e fazer algumas outras configurações a gente não vai mexer nessa tabela mas a gente tem que fazer a relação dessa tabela com a gente que vai criar de usuários tá que vai ser uma relação um para um mas sem mexer nessa Tabela aqui você já vai entender na prática então agora a gente já pode ir lá pro supabase e criar uma conta e conhecer o supabase aí todas as funcionalidades Bora lá então agora bora conhecer
o supabase e fazer nossa conta do nosso projeto já estou aqui no site do supabase depois você pode dar uma olhada para estudar um pouco mais como funciona Tá mas ó ele mostra aqui todas as funcionalidades explica certinho aqui a comunidade como é que funciona você Pode dar uma olhada aqui também nos preços mas é preço bem conto custo benefício bem interessante e eu vou criar uma conta tá no caso já tenho uma conta criada então eu vou no meu dashboard e criar um novo projeto sem muo enrolação Bora lá vou vir aqui já tenho
um projeto criado e vou criar um novo projeto tá Vou colocar aqui a organização o nome do projeto que vai ser o app de Finanças certo uma senha aqui pro meu banco de Dados e vou colocar a região do meu banco de dados no meu backend no caso a gente tem aqui ó que legal Brasil South America vou colocar Brasil porque quanto mais próximo o seu backend estiver do seu cliente vai ser mais rápido as requisições tá então muito bom porque o super base ele tem aqui um servidor em São Paulo e vou criar um
novo projeto aqui pode demorar alguns minutinhos para ele Criar e fazer o setup do nosso projeto tá ó vai entrar nessa tela aqui E vai ficar aqui ó setting up a Project então vamos esperar um pouco para ele Conseguir configurar adequadamente o nosso projeto o nosso projeto já está configurado pode dar uma olhada aqui né ele passa algumas introduções que a gente vai conseguir explorar agora mas bora conhecer o supabase sem mais enrolação tá aqui a gente vai ter nossas tabelas Então a gente vai conseguir criar as novas tabelas que daqui a pouco a gente
vai fazer isso para você Entender como fazer temos aqui a parte do SQL então SQL é muito importante no supabase o SQL é uma linguagem para fazer consultas e tabelas também a gente consegue construir tabelas por meio do skl é uma linguagem bem tranquila e depois você vai ver que é bem fácil e quando aí tiver dificuldade a gente pode testar aqui ó Inteligência Artificial do suabase para fazer as nossas consultas tá Depois a gente vai ver essa parte também com calma e você vai ficar Impressionado como é fácil criar aqui nossos registros em SQL
aqui em banco de dados a gente consegue ver as nossas tabelas Então a gente tem alguns esquemas aqui ó você vai entender melhor que a gente tá no esquema Public que onde a gente vai criar as nossas tabelas mas o suabase ele já vem com algumas tabelas configuradas ó por exemplo se eu for no esquema autorização al ele já vem várias tabelas pré-admissionais dados do usuário aqui Então quando alguém fizer autenticação esse dado vai tá nessa tabela E olha que legal aqui ó por exemplo vai ter a senha en criptografada então você não vai ter
acesso à senha dos seus usuários tá porque que vai estar em criptografada e dessa forma ele consegue manter a segurança aqui então toda essa parte da modelagem de dados dessas tabelas já vem uma estrutura pronta para conseguir fazer o serviço suabase tá aqui a gente vai ter outros serviços como triggers Que são gatilhos que a gente consegue fazer a gente consegue fazer funções tem extensões tem aqui quem que vai est utilizando o sup base tem aqui o Web hooks tem várias e várias outras funcionalidades que eu não vou entrar aqui no momento sen não o
vídeo vai ficar muito extenso mas ao longo aí dos vídeos dentro lá da for ação a gente consegue ir conversando sobre outras funcionalidades do supabase mais importante aqui a autenticação ó aqui a Gente vai ter nossos usuários então consigo aqui criar um novo usuário tá ó Create a new user consigo criar um novo usuário posso vir aqui ó em policies que são as políticas de segurança então aqui é uma das partes mais importantes do subbase que vai definir Quais são as políticas de segurança da sua tabela ou seja quem que vai poder acessar quem que
vai poder editar visualizar isso é obrigatório fazer senão não vai funcionar Tá uma das partes mais Importantes aqui a gente consegue habilitar outros tipos de login de autenticação né então a gente consegue fazer por exemplo com Google com Facebook no caso aqui ó vamos usar só e-mail e também a gente vai tirar essas opções tá bem importante pode tirar esse confirmar e-mail e tirar isso daqui pra gente conseguir testar aqui da forma mais fluída depois depois quando o seu app tiver mais avançado você pode configurar aqui essa parte confirmação De e-mail e deixar mais seguro
tá Por enquanto a gente vai deixar a autenticação apenas por e-mail e e senha certo aqui tem mais algumas outras opções que a gente não vai ver no momento aqui a gente tem o Storage Então a gente vai guardar os nossos arquivos Então os arquivos PDF os arquivos de mídia a gente vai guardar aqui no Storage temos também AD functions são funções que a gente consegue rodar dentro do sua base aqui é uma partezinha Um pouco mais técnica tá realmente a gente ter que fazer códigos para rodar funções Poderosas temos também a parte de Real
Time que é o banco especial aqui do supabase temos aqui o reports pra gente conseguir analisar como está sendo os resultados aqui do nosso banco aqui os logs pra gente conseguir ver o que foi feito de uma forma aí de um histórico temos a documentação api que é bem importante também a gente tem aulas a formação apenas sobre supabase api é Uma das coisas mais importantes aqui e toda uma autenticação é sobre como fazer autenticação explica aqui ó como fazer as as chamadas apis então aqui ó se a gente colocar em best vai ter aqui
uma url que a gente faz uma chamada api e passa uma chave não tem muito segredo eu ensino isso certinho aqui nas aulas da formação também tem pra gente interagir com as tabelas também tem toda a parte de api aqui em configurações mostra algumas configurações gerais do projeto Tá do seu banco de dados da sua api autenticação depois a gente vai mexendo aqui aos poucos Então esse daqui é o overview geral do supabase e agora que você já entendeu um pouco mais sobre o supabase a gente pode fazer nossas primeiras tabelas Bora lá então agora
Bora criar nossas primeiras tabelas lá dentro do base para você aprender na prática Então vem junto comigo então aqui no supabase vou vir em table editor e seguindo a nossa modelagem de dados a Gente vai ter apenas duas tabelas usuários e registros financeiros Tá então vamos lá vamos criar a nossa primeira tabela usuários antes de criar a tabela de usuários muito importante eu tinha explicado já mas a gente vai ter duas tabelas de usuários tá a gente vai ter uma tabela de usuários que a gente vai poder editar mexer visualizar e também tem aquela tabela
de usuários ó lembra vir aqui em cima posso vir em al tem essa tabela aqui ó se eu for para Baixo de users porque é uma tabela já padronizada do supabase tá a gente não consegue mexer nela tá ela por enquanto ela tá vazia Ó mas ela vai ter o ID vai ter isso daqui uma uma Instância um e-mail a senha criptografada Então essa tabela que vai gerenciar a parte segurança da autenticação Então a gente vai ter que ter duas uma que a gente pode mexer e uma que já vem pronta do supabase tá antes
de tudo ó por exemplo eu vou criar a aqui em autenticação um Novo usuário tá vou criar um novo usuário que vai ser castelo @gmail.com tá aqui pode ser qualquer e-mail colocar uma senha aqui colocar uma senha e esse autoc confirme user creates the user do Sending then confirmation e-mail então eu vou criar o usuário sem precisar mandar um e-mail para ele tá deixa essa caixinha selecionada porque a gente não quer trabalhar agora com confirmações por meio de e-mail tá isso daí seria a aula Futura Vamos criar um novo usuário Então beleza criei o novo
usuário aqui já tem o novo usuário se eu voltar lá na minha tabela ó eu for de novo lá na tabela al o esquema al tem todas essas tabelas aqui vou lá em usuário Então vai ter aqui meu usuário Castel ó Então vai ter um usuário que tá autenticado Ó tem o password aqui a senha criptografada então a gente não consegue ter acesso a essa senha Tá e agora a gente consegue criar a nossa tabela usuários tá então o Usuário Mateus Castelo ele vai tá em dois lugares tanto lá nessa tabela padrão do suabase quanto
na tabela que a gente cria aqui vamos lá então criar usuários aqui não precisa de descrição vamos deixar habilitado A rls que é o r level Security que é pra gente conseguir colocar segurança na nossa tabela depois a gente vai fazer isso tá então o ID vai ser o que vai deixar a nossa tabela única tá ela é muito importante e aqui vai ser o nome user ID esse valor sempre Vai ser único não pode ser repetido e vai seguir aqui esse esse padrão né aqui no tipo ao invés de int que é um número
inteiro a gente tem vários outros tipos aqui tem numérico tem tipo json tem tipo texto a gente vai escolher esse daqui ó que é um tipo de ID Universal tá esse daqui vai ser um padrãozinho legal pra gente utilizar para usuários selecion é esse aqui ó bem importante show demais então quando ele for criar ele vai definir um padrão aqui ó que é um valor Aleatório Random vai pegar uma função inha que a gente pode colocar aqui tá E aqui ó tá perguntando acha chave primária eu falar é a chave primária chave primária nada mais
é que a chave única daquela tabela o suabase também tem uma coluna aqui ó que é Create at ele cria automaticamente a data que aquele registro tá sendo criado tá bom E aí ele coloca a função Now vai retornar o dia e a hora do registro sendo criado isso daqui eu não vou mexer vou deixar o Padrão e o que mais que a gente vai precisar colocar na nossa tabela Vamos colocar também o nome né da pessoa nome esse nome aqui o tipo vai ser do tipo texto Tá bom pode ser o tipo texto qu
mais vamos colocar também o e-mail e-mail da pessoa vai ser aqui do tipo texto e vamos colocar também uma foto de perfil tá que vai ser uma url que a gente vai ter a foto de perfil da pessoa show demais Castelo então aqui a gente já criou todos os nossos Campos Então é Assim que a gente cria os Campos no supabase Bom e a única coisa que vai faltar na nossa tabela é fazer a das tabelas porque agora eu já criei os campos mas eu tenho que dizer pro suabase Qual que é a relação que
uma tabela vai ter com a outra e aqui a gente está trabalhando com bancos de dados relacionais por isso que é tão importante você desenhar o seu banco de dados e depois fazer as relações se você quer saber mais sobre o assunto veja o Nosso curso de modelagem SQL que eu explico certinho tá ess é um dos assuntos mais importantes então aqui eu vou estabelecer uma relação como que eu estabeleço essa relação aqui ó bem aqui embaixo tá escrito fory relation então a gente consegue estab Ester uma relação da chave primária com a chave estrangeira
e agora eu quero estabelecer uma relação um para um ou seja esse usuário aqui ó eu criar ele vai ter uma relação lá com a tabela user do supabase Tá que é a tabela que a gente precisa fazer para utilizar a os padrões ali de segurança do super base vou clicar aqui e agora ele pergunta para selecionar o esquema né a gente tá no esquema Public eu vou lá no esquema Alf vou selecionar a tabela agora ó users tá então eu tô selecion and o esquema que é o esquema né off tabela users e ele
pergunta aqui qual que é a relação que você quer fazer bom eu quero fazer a relação do user ID tá o usuário ID ele tem que ser o mesmo Do ID do usuário aqui da tabela users Então tô falando que essa relação é um para um tá esse usuário aqui é o mesmo que esse Então vai ser o mesmo ID beleza e por enquanto é só isso O que mais que eu tenho que fazer ó ele Pergunta assim ó se uma linha For removida o que que vai acontecer Eu Vou estabelecer uma relação em cascada
Cascade quer dizer o quê se eu excluir um usuário lá ele vai excluir um usuário aqui tá então isso é importante porque a relação está um para Um então eu vou salvar e é isso e vou salvar para criar a nossa primeira tabela tabela já foi criada vamos inserir um novo valor aqui para usar de exemplo Beleza então insert Row consigo adicionar uma coluna também ou importar de ssv eu vou inserir uma nova linha e user ID ó ele já fala ó ele tem uma relação de chave estrangeira com a tabela user ID então não
posso inventar número aqui eu ten que selecionar um registro tá select Record E aí vamos vir Aqui ó e só tem um usuário que foi o que eu criei lá o castelo então eu quero criar o castelo aqui também nessa tabela então na nossa aplicação a gente sempre vai criar usuário em duas tabelas na tabela user e na tabela usuário show demais então Já criei aqui ó esse daqui é o nosso ID tá um ID grandão Create at vai ser a ático pode ficar tranquilo e aqui eu vou colocar o nome Ó Mateus castelo e-mail
castelo @gmail.com foto de perfil por enquanto Não tem tá vou deixar vazio e vou salvar e a partir daí a gente tem o nosso primeiro usuário com a relação já certinha de um para um irado demais né Vamos criar nossa segunda tabela que é a tabela de registros financeiros vamos vir aqui e vai ser a tabela de registros depois a gente vai abilitar as segurança aqui e aí o ID vai ser registro ID tá registro ID vou deixar int8 mesmo tá a gente pode usar aquele Campo mais pra parte do usuário aqui eu vou deixar
um Int que é um número inteiro e vou adicionar novas colunas então aqui vai ter descrição tá que vai ser o nome do registro vai ser texto falá o que eu gastei né que mais vai ter a categoria A categoria Por enquanto vou deixar texto depois a gente vai falar sobre categoria né tipo ah vou deixar também texto categoria E tipo a gente vai criar uma seleção que o usuário vai ter que colocar um dos tipos tá El não vai poder sair aqui desse padrão vai ter também o Valor valor é o número né aqui
ele não é o número inteiro e o ideal é gente colocar o numeric tá aqui na tabela registros de acordo com o nosso desenho do nosso banco de dados a gente tem que fazer uma relação um para muitos e quando a gente tem uma relação um para muitos a gente tem que puxar o ID lá do nosso user ID para cá tá a gente tem que colocar o id do usuário aqui dentro como que eu vou fazer isso vou vir aqui e colocar o user ID tá por cada usuário Vai ter o seu ID vai
ter o seu registro a gente não quer que alum outras pessoas vejam o registro das outras tá o usuário vai ver os seus próprios registros financeiros Então vou vir aqui e vou criar o registro financeiro dele V vir aqui e criar um user ID tá esse user ID também vai e o ID para eu saber qual que é e agora eu ten que estabelecer a relação tá então vou vir aqui o esquema pode ser o Public mesmo usuários e vou falar que o user ID é o mesmo do user ID Aqui do usuário tá ó
Beleza então toda vez que eu criar um novo registro eu tenho que falar qual registro é esse tá beleza aqui eu não vou mudar as relações tá se um usuário for deletado no outro sistema eu quero que continue os registros desse usuário aqui tá eu não vou deletar então eu não vou tomar nenhuma ação tá Vou salvar e aqui vou salvar e vamos criar nossa tabela de registros financeiros tabela criada vamos criar Uma linha aqui para entender como é que ficou eu vou vir aqui ó registro aqui é automático tá você não preenche nada a
criação também então eu vou aqui vou falar que comprar Supermercado bananas e maçãs né fui no supermercado categoria vai ser Supermercado o tipo vai ser saída e o valor aqui é bem importante o banco de dados o supabase postl ele só aceita em ponto tá o valor ele não usa vírgula que nem a gente usa aqui no Brasil a gente tem que colocar ponto vamos supor que eu gastei 45,90 tá E aqui é importante também você tem que falar qual usuário que gastou Então vou selecionar o usuário e é o Mateus castelo que gastou esse
dinheiro beleza e vou salvar aqui embaixo então Criou já um registro financeiro e é isso que a gente vai querer mas o que faltou aqui na verdade ó essa categoria E o tipo eu quero que sejam sempre uma lista tá vão ser opções E se o usuário colocar alguma dessas opções certo então para isso eu vou vir aqui em banco de dados deir base e tem que vir aqui no último esquema aqui nos tipos de dados enumerados e eu vou criar um novo tipo tá Para que que serve isso pra gente criar uma opção uma
lista de opções então aqui vai ser o dado categoria tá categoria E aí aqui eu vou colocar os valores então por exemplo vai ter Supermercado vai ter sei lá academia hum Farmácia vai ter delivery vai ter capacitação estudos né vai ter por exemplo bar aluguel vou colocar aqui também e vou colocar um do tipo realmente sei lá a entrada né que vai ser um salário então eu vou criar aqui esse tipo de dado então criei aqui certinho e vou criar um novo tipo também que vai ser o tipo e aqui vai ser só apenas entrada
e saída tá opa deu algum bug Aqui vou criar tipo e aqui vai ser entrada e saída criar então agora eu tenho os dados numerados vou voltar lá na minha tabela aqui em registros vou clicar aqui nos três pontinhos na minha tabela vou vir aqui ó Edit table Beleza então na verdade ó categoria agora vai ser outro tipo de dado tá vai ser o tipo que a gente acabou de criar vai ser aqui ó tipo categoria já viu aqui certinho show e aqui o tipo vai ser O próprio tipo e vou salvar então ele vai
salvar vamos ver se vai dar certinho tem que ver se o nosso campo aqui ele deu Mat né ó como eu coloquei mercado ele tinha dado certo se eu inserir novo dado agora ó e for aqui para baixo eu vou ter que que selecionar uma dessas categorias tá Ah aqui na câmera não aparece mas quando eu clicar aqui vai aparecer os tipos das categorias não tá aparecendo na gravação mas aí no seu vai aparecer pessoal agora um ponto muito Importante é sobre as pces lá no sup base que nada mais é que são as políticas
de segurança que você define para quem que vai conseguir acessar editar visualizar as suas tabelas lá no supabase Bora comigo para entender como é que funciona então aqui no supabase ó eu vou vir aqui em autenticação e eu vou aqui em policies tá aqui que eu vou definir as políticas de segurança das minhas tabelas isso daqui é bem importante se você não deixar definido Ela não vai funcionar Tá então lembra que a gente deixou ativado as nossas tabelas as políticas de segurança e agora a gente vai definir quais Realmente são essas políticas né ó aqui
te deixou ativado que é Row level Security que é o LS né que a gente chama das políticas de segurança está habilitada mas não tem políticas ainda né as regras estão habilitadas mas sem políticas Então o que a gente vai fazer vamos criar uma nova política aqui vou Vir aqui em Create New policy posso vir tanto aqui quanto lá na parte da minha tabela E aí ó ele já entendeu aqui ó que é o esquema Public P registros tá na tabela registros e o nome da minha política e o nome da minha política vai ser
liberar tudo tá aqui te defin o nome para você entender um pouco mais sobre o que que tá acontecendo aqui a gente vai definir os detalhes da política aqui e aqui tem alguns templates tá ó por exemplo vamos supor que você quer Habilitar acesso de leitura para todos os usuários Então você conseguiria vir aqui ó e ele já cria uma função inha em SQL ó isso daqui SQL pra sua política então por exemplo eu quero abitar inserir dados apenas para usuários autenticados mais paraa frente a gente tem que colocar aqui só quem pode visualizar as
tabelas editar são usuários autenticados tá isso aqui é muito importante para segurança do seu app então aqui eu poderia vir aqui e Colocar esse exemplo né então tem vários outros exemplos de adicionar nov dados de atualizar as tabelas de deletar as tabelas também tem aqui também outras e outras formas que alguns templates prontos tá do supabase ele atualizou recentemente aí eu tô refazendo aqui essa parte o nome da minha política vai ser liberar tudo tá aqui a gente consegue colocar tanto permissiva ou restritiva né que aqui seguiria a lógica do or Então se a gente
colocar várias Tipo de política a gente consegue colocar se atender essa ou essa ou essa o usuário conseguirá mexer aqui é um n né que é o E então as regras tem que seguir todas as regras que a gente colocar no nosso caso vai ser permissiva tá aqui você coloca o que que o usuário vai poder fazer e aqui como a gente tá criando o nosso projeto eu vou deixar All só para realmente a gente conseguir testar aqui tudo com calma tá então o usuário vai conseguir selecionar inserir Atualizar e deletar dados da tabela aqui
ele tá perguntando quem é que vai conseguir fazer isso então eu vou deixar vazio porque a gente quer que sejam todos tá E aqui é basicamente o nosso SQL pronto tá não vem um SQL pronto aqui com codigo Zinho pronto a gente vai colocar lá vai ser sempre por meio de SQL e aqui a única coisa que a gente tem que fazer ó é escrever true tá para ele conseguir habilitar aqui para todo mundo fazer o crude completo O nosso Aplicativo tá e vou salvar aqui a política então Salvei a política pra tabela registros e
agora falta pra tabela usuários tá Create New policy e agora eu vou vir aqui ó e vou trocar pra tabela usuários tá E vai ser liberar tudo permissiva ou todos e aqui também true tá então vou salvar aqui as políticas para ficar certinho e a gente conseguir ter as nossas políticas de segurança aqui bem ajustadas e agora a gente já pode seguir atenção ó se você Não fizer isso não vai funcionar a conexão do Flot Flow com o suab depois então bora continuar Então bora entrar no flo Flow conectar o nosso projeto do flo Flow
com o do suabase e fazer a primeira parte que vai ser ó autenticação de usuários base tudo certo e aqui estou com o meu projeto do Flow vou aqui embaixo em settings and integrations e vou vir em supabase ó integration base e vou habilitar aqui a nossa conexão tá ó e aí vai ter uma url Que ele tá pedindo e uma chave ó a aqui isso daqui eu vou lá no meu suase vou aqui embaixo Project settings E aí eu posso vir em API vou pegar essa URL aqui ó e vou lá na URL vou
colar e vou ter a minha chave aqui ó a non Public aqui show demais e vou colar aqui e vou dar um get schema dei meu get schema aqui ele já atualiza certinho ó ele trouxe minha tabela usuários e minha tabela registros com os campos certinhos ó o campo que é Uma chave primária aqui certinho aqui também é uma campo do user ID tá tudo aqui bem organizado tem até aqui ó a estrangeira do user ID Então tudo certo tem aqui o sup base Storage que já também tá conectado E a autenticação vamos fazer agora
para fazer autenticação vamos vir aqui em cima ó em autenticação e vamos habilitar a autenticação de usuários como a gente quer que cada registro seja estrelado um usuário é básico a gente fazer a parte De autenticação por agora tá e o tipo de autenticação Vamos colocar aqui ó supa base página inicial Opa falta uma página inicial né tem que ter uma página de autenticação para ele ir pra homepage depois então vamos criar agora a página inicial de autenticação rapidamente vou vir aqui na nossa páginas Tá eu vou criar uma página padrão de autenticação agora no
momento eu não vou fazer do zero tá porque a gente já viu toda a parte de design então não tem muito mais O que aprender aqui você já sabe fazer toda a parte design já exploramos bastante então eu vou vir aqui e pegar um padrãozinho algum padrão de página para autenticação tá E aqui no flutterflow tem vários vários templates de autenticação você pode pegar o que você quiser se não tiver o que eu escolhi aqui no momento que você está vendo esse vídeo tudo bem Tá todos os templates fazem a mesma coisa não tem muito
segredo a gente só quer que o Usuário consiga cadastrar criar conta e logar tá só pega um que tem os dois vou pegar esse daqui mesmo ó vou vir aqui e colocar meu tema e vai ser login e cadastro criar a página então quando eu crio a página já vem algumas coisas padronizadas aqui tá eu só vou tirar tudo que tá aqui em relação a inglês tá vou deixar em português vou tirar algumas partes aqui também e também remover as ações tá pra gente fazer junto então primeiro eu vou traduzir Aqui rapidamente tá então vou
colocar aqui ó criar conta rapidamente vou traduzir crie sua nova conta e-mail password vou deixar assim tá get started vou deixar ao invés de get started vai ser um criar conta tá esse azul roxo acho que não tá legal não né vou vir aqui colocar aquele botão verdinho aqui do nosso sucesso vou ir mais rápido aqui porque não é tão importante tá vou apagar essa parte aqui de login com redes sociais no momento a gente não vai Fazer aqui em criar conta vou escrever criar conta criar conta e aqui tá tudo certo em login vou
tirar aqui também esse botão vou tirar aqui esse botão também esse também e esse também aqui é para usuário logar né invés de sain vai estar entrar e-mail password vou deixar igual S vou mudar a cor vai ser aquele verde né o verde de sucesso e aqui vai tá escrito o qu bem-vindo de volta bem-vindo de volta bem-vindo de volta Meu caro acesse sua conta aqui em cima que mais se eu clicar no tab bar Tab bar é um elemento eu consigo trocar consigo colocar várias Abas tá vou vir aqui embaixo Tab bar quando eu
selecionar não vai ser esse roxinho não tá vai ser o nosso Verde lá verde de sucesso tá cara acho que é isso Ficou legal aqui ao invés desse texto vou colocar uma imagem né colocar uma imagem cons colocar meu logo p vou apagar o texto antes porque eu não quero colocar as coisas em coluna Nem nada vou vir aqui e vou colocar uma imagem show demais o tipo de imagem vai ser a imagem aqui do A7 né que eu já coloquei aqui meu logoz inho tá show demais meu logo aqui ó logo vai ficar contido
set Dark mode mesma coisa que eu já tinha feito e colocar o White mode aqui ó Tá legal né Se eu colocar aqui o Dark mode ó bonitão hein criar conta login vamos ver pro celular como é que tá eu acho que tá legal padrãozinho tá sem Muita enrolação por isso que é bom Usar templates às vezes para ganhar tempo tá beleza vamos começar aqui então vamos fazer deixa colocar no celular que dá para enxergar melhor né Aí eu dou um zoom aqui então para começar vamos primeiro fazer a parte login para ver se já
tá funcionando depois a gente faz a parte de cadastro aqui no botão criar conta ó pode clicar no botão esse botão aqui deixa eu ver se tem alguma Action que às vezes impr pronta né ó eu vou deletar essa Action Pra gente fazer do zero tá pode deletar aqui e pode deletar aqui a Action do entrar também tá vamos deletar vamos voltar lá nas configurações e aqui ó em intial page Vamos colocar agora login cadastro então a pessoa entra e o login cadastro e ela só consegue acessar a página se ela fizer o login tudo
certo aqui tem apenas uma autenticação aqui ó primary SC aqui eu acho que é porque se eu for aqui para baixo ele tá scrollable eu vou tirar Esse daqui tá no momento sem scrollable deixa certinho e padrãozinho vou vir aqui agora em login e vamos criar nossa ação aqui de login tá clica no botão vamos agora definindo uma ação uma Action tá vou clicar aqui em Open Action na verdade não precisa né vou vir aqui em add Action e vou escrever aqui ó nas ações e vou escrever aqui ó al tá que é de autenticação
E aí ó você consegue criar conta login criar conta logout Resetar senha e atualizar e-mail vou vir Aqui dar o login tá que é o que a gente quer login beleza e ele pergunta aqui ó qual que vai ser o provedor e-mail qual Qual que é o campo e-mail address é esse daqui ó e-mail address perfeito password aqui ó que é a senha password beleza e Navegar automaticamente vou clicar no raiozinho aqui ó PR a gente testar nosso aplicativo funcionando para ver se a gente consegue logar com a minha conta que eu acabei de criar
lá no supabase Bora lá aqui vai carregar Vai demorar um Pouquinho então vou avançar nessa parte então Aqui já carregou Posso ver aqui no celular e também no nosso desktop tá bem legal vou deixar no C para ficar mais encaixadinho aqui vou vir aqui em login então tá e vou escrever castelo @gmail.com e vou colocar a minha senha aqui vou entrar e ó tá funcionando certinho nosso app aqui certinho ah Castelo Por que que aqui tá Dark mode né eu não consigo mudar porque ele vai Pegar qual sistema que a pessoa tá usando tá isso
aqui até eu posso mudar se eu for lá em home page aqui em home page vou lá para cima tá em home page vou clicar aqui em home page e vou vir aqui em Action vou adicionar uma ação e vou escrever aqui ó Dark mode tem essa ação ó set Dark mode settings Beleza então eu vou colocar aqui select setting E aí ó ele não vai pegar do sistema né Às vezes a pessoa coloca Dark mode ou Light mode no sistema dela né Eu quero Que ele sempre abra Light mode tá se quiser pode deixar
já Dark mode deixa eu recarregar aqui e agora o legal que o login Tá funcionando então a gente consegue já utilizar função de login e agora a gente já vai fazer a de cadastro carregou meu App ó agora ele tá realmente em Light mode bonitão aqui ó certinho show já tô logado com o Mateus Castelo eu preciso também um botãozinho de deslogar né para testar Então bora fazer agora a parte de cadastro e já vou Aproveitar e fazer o logout Bora lá agora bora fazer a parte de cadastro vamos lá então aqui no flo Flow
primeiramente eu vou vir aqui em meu perfil no botãozinho de logout antes de tudo tá vou clicar nele vou vir em Action vou adicionar uma nova ação e vou clicar aqui ó logout logout então ele vai fazer o logout da minha aplicação apenas isso feito se a gente for lá também em login cadastro Vou colocar até na pastinha aqui ó a tela em login Cadastro vou em criar conta vou vir aqui em criar conta e vou vir em Open tá agora vou abrir uma ação aqui vai ser uma ação um pouquinho diferente porque além de
fazer o cadastro eu vou ter que criar uma nova linha na minha tabela de usuários tá porque ela não se conversa com a tabela user do supabase e o flo Flow ele vai se conversar diretamente com a tabela user vou vir aqui então e aí vou fazer aqui ó o al beleza Create account tá criar conta provider e-mail Tá o e-mail Field vai ser ó esse mail address Create tá que é o que tá no ladinho lá do Criar e a senha vai ser senha Create tá aqui não vai ter confirmação de senha tá ali
ó aqui ele explica exatamente o que eu falei ó quando você criar o suabase não vai criar uma nova linha lá para você tem que fazer isso manualmente Então pode ficar tranquilo Faz junto comigo uma coisa só que faltou que é bom a gente ter aqui ó vou pegar esse vou dar o ctrl C aqui tá vou vir aqui na minha coluna e dá um cont CRL V eu vou colocar o novo campo de nome tá Ó esse daqui ó vai ser o nome nome Create tá V seguir o padrão aqui ó nome Create vou
dar o check e aqui vai ser ó nome pessoa colocar o nome dela também né que vai ser o nome Label text Beleza vou arrastar ISO aquii ó pro meio na verdade para cima né pessoa colocar nome e-mail e 100ha show vamos voltar lá então vamos vir aqui em Action Vamos abrir o editor E aí beleza Tá só vou precisar do e-mail e da senha que já tá certinho aqui para eu criar conta lá no sup base tá E além disso além de criar conta eu tenho que criar uma nova linha lá na minha tabela
de usuários tá e como que eu faço isso eu posso vir aqui escrever super base ó e a gente vai ter várias opções a gente pode inserir linha a gente pode consultar linha atualizar linha e deletar linha show vou vir aqui e vou inserir uma nova linha tá inserir uma nova linha em Usuários tá que que eu vou fazer agora além de inserir lá na tabela user que já vai ser automaticamente ó por essa ação eu tenho que inserir lá na tabela usuários tá e quais são os campos ó vou colocar os campos que tem
aqui todos os campos que tem aqui na minha tabela tá o user ID bom o user ID eu tenho que pegar exatamente o usuário criado só que ele acabou de ser criado por essa ação então ele já tá autenticado e tem uma ação aqui que a Gente vai usar muito eu vir aqui ó vou falar assim o user Ed vai ser igualo dinâmico né Tem uma opção que a gente vai usar muito que é essa daqui ó usuário autenticado então como eu já me autentiquei na ação anterior eu consigo acessar dados do usuário que tá
autenticado isso daqui é super importante você entender porque a você vai conseguir utilizar os dados do usuário autenticado no caso eu vou usar os dados do usuário e vou passar o user ID ó então ele vai pegar o mesmo user ID do usuário que está logado Create at não preciso porque é automático nome o nome eu já sei né então se eu clicar aqui no laranjinha que é dinâmico eu posso vir aqui ó widget State então ele vai pegar exatamente o que o usuário digitou então o usuário digitou o nome aqui ó nome Create nome
e aí vai associar certinho show demais e-mail posso vir aqui e-mail vou lá pegar também o widget state vou vir aqui ó e-mail address Create tá o E-mail beleza foto de perfil por enquanto vai estar vazio tá porque o usuário não tem foto de perfil vou remover agora a gente precisa vir aqui e vamos colocar uma caixinha só para falar que deu tudo certo né porque se passar por essas duas eu sei queu tudo certo daí eu posso escrever aqui ó dialog que é um alerta tá um alerta um diálogo de alerta um alerta informacional
vou usar esse daqui e daí vou falar assim ó sucesso seja bem-vindo ao app ao app de Finanças sucesso conta criada Tá ok e é isso então primeiro faz autenticação de cadastro cria uma nova linha na tabela de usuários E aí manda uma mensagem que deu certo o cadastro vou fechar e vou lá testar tá vamos vir aqui e vou testar Vamos abrir uma nova sessão para ver se deu certo carregou o meu teste mod aqui perfeito então o nosso apzão aqui ó bonitão vou clicar aqui e vou dar o logout vamos ver se funciona
Estou deslogado vamos criar uma nova conta Então vou criar a conta aqui ó com Bob ess daqui é o Bob para quem não conhece o Bob Ele é famoso hein Bob @gmail.com e aqui a senha do Bob vamos ver se vai dar certo criar conta certo vamos aqui criar a conta do Bob então carregou sucesso conta criada com sucesso seja bem-vindo ao de Finanças vou dar ok entrei boa eu acho que deu boa hein vamos lá checar no nosso spase Bora lá vou vir aqui primeiro em autenticação Autenticação então ele tem que ter criado a
conta aqui ó olha que legal já criou o Bob aqui ó com toda a parte de segurança criptografada tá aqui o Bob perfeito Se eu vir aqui na minha tabela editor e o tabela usuários temos aqui vamos ver se o Bob vai est lá tá aqui o Bob também ó criou certinho com user ID certinho tá do usuário ticado pô show demais hein deu boa o que a gente pode fazer agora que a gente já tem o cadastro e o login corretamente Configurados a gente pode deixar configurado aqui né para aparecer o nome do Bob
para aparecer aqui a a fotinha do Bob aqui né do usuário logado aparece aqui o nome do usuário logado e-mail do usuário logado e a foto do usuário logado Então bora fazer isso para deixar isso pronto já que a gente já fez autenticação e daí a aplicação já começa a ficar dinâmica Bora lá então agora bora deixar o nosso app com a imagem o e-mail o nome do usuário dinâmicos para Quando o usuário logar ele consiga ver suas próprias informações Bora lá então aqui no meu App vamos deixar primeiro a home page dinâmica né ó
deixa eu colocar aqui no modelo do comp então quando o usuário logar eu quero que aqui apareça por exemplo a fotinha do Bob né para isso que que eu posso fazer eu posso vir aqui ó hum no menu no meu contêiner do menu vou clicar nele e aí quando carregar meu aplicativo eu vou fazer uma backend query ou seja uma Consulta no banco de dados para puxar essa informação Olha que legal fazer assim aqui tem várias opções né a gente já vi as Actions e agora a gente pode ver as queries tá então vou fazer
fazer uma consulta no meu banco de dados vou adicionar aqui uma nova consulta E aí pergunta qual que é o tipo de consulta que você quer fazer bom eu quero fazer uma consulta no supa base tal a gente pode fazer consultas no firebase consultas em apis no algolia que é para Fazer um sistema de buscas e no supabase show e aqui na tabela qual que eu vou querer pegar a tabela eu quero pegar informação de um usuário tá aí ele Pergunta assim você quer pegar uma lista de linhas ou só uma linha só cara eu
quero só uma linha tá eu quero dados do usuário a tem que ter um filtro né para conseguir achar esse dado do usuário Qual que é o filtro eu vou falar assim ó que o user ID lá da minha tabela usuários ele tem que ser igual equal to Ao usuário o ID do usuário que está ticado então ele vai lá vai fazer assim fazer uma busca se for o Bob autenticado ele vai procurar o Bob se for o Mateus Castelo autenticado ele vai procurar o Mateus tela tá então vai ser user ID essa que é
a relação ó user ID tem que ser igual ao usuário autenticado tá o ID do usuário autenticado vou confirmar confirmei E agora que a gente fez a nossa chamada Aqui a gente vai ter acesso às informações do usuário e a Partir daí a gente consegue por exemplo ó colocar uma imagem aqui de acesso as informações do usuário então se eu for aqui embaixo ó eu posso vir aqui e colocar ao invés de asset vou colocar Network para mostrar um uma uma uma url tá E aqui eu posso colocar a URL da foto tá vou pegar
uma foto do Bobinho e para quem não conhece o Bob ele ele é o meu cachorro eu sempre uso ele aqui nos exemplos então eu vou colocar aqui ó pegar uma url da foto dele só para ficar Legal e esse daqui é o bobinho Olha que bonitinho vou lá no supa base pegar aqui essa URL tá que é onde tá guardada a foto vou em usuários e vou aqui no Bob e eu vou dar um ctrl v tá você poderia também pegar qualquer outro tipo de URL tá é do Google no caso aqui eu peguei
do Bobinho mas é sempre bom a gente ter uma uma ur quando o usuário ainda não tem foto já até Vou colocar aqui ó vou procurar sim user profile picture tá E vou pegar uma imagem aqui legal para Ficar lá no nosso app Tá vou pegar aqui ó e vou dar um cont control c botão direito na verdade vou copiar o endereço da imagem tá ó copiar o endereço da imagem por que que eu vou usar isso aqui no nosso app vou deixar dinâmico né então vou colocar aqui ó dinâmico então vou clicar aqui e
agora a gente tem acesso a os dados do usuário tá ó os dados do usuário porque a gente fez uma backend query E aí eu vou pegar aqui ó foto de perfil a nossa foto de perfil do Nosso URL tá então ele vai puxar de uma forma dinâmica tá se eu clicar de novo aqui ó tem o valor padrão isso daqui é sempre bom de preencher se não pode dar erro tá então o valor padrão vai ser a URL que eu acabei de pegar tá essa ur RL aqui ó tá então se eu copiar a
o endereço da imagem copiar aqui ó vai ser essa foto aqui tá Quando o usuário não tiver foto vai aparecer aquela lá então vou vir aqui e vou confirmar tá então aqui já ficou dinâmico ó já até apareceu A fotinha aqui voltar no perfil e vou repetir o mesmo processo tá então vou vir aqui no mesmo processo vou lá em cima aqui ó nesse contêiner daqui lá de cima tá vou vir aqui em backend query agora a gente consegue fazer mais rápido vou adicionar uma nova consulta uma consulta no supabase a tabela usuários e aqui
uma linha única tá o filtro vai ser esse daqui o filtro de user ID igual ao usuário logado tá ó usuário que está autenticado o ID do usuário logado tá Show demais então vai fazer essa consulta a foto já posso deixar dinâmica aqui né Ó vou vir aqui ao invés de asset vou tirar aqui vou colocar Network clicar no laranjinha para deixar de dinâmico e vou vir aqui em usuário foto de perfil Vou clicar de novo também e vou deixar um padrão aqui né que é aquele mesma foto que eu peguei ali tá então quando
não tiver foto ele vai ter que colocar agora aqui o nome a gente também consegue acessar o nome né Usuários Row e eu consigo fazer aqui ó nome se não tiver o nome vou deixar aqui sempre um valor escrito nul n quer dizer vazio tá sempre B se colocar um padrão aqui caso dê problema vai aparecer isso você vai saber que está vazio e aqui no e-mail posso tanto pegar do usuário autenticado ó eu tenho e-mail aqui do usuário autenticado tenho o Number e aqui eu também tenho e-mail tá tanto faz vou pegar do e-mail
aqui mesmo tá e se não tiver nada escrever no tá Agora sim bora testar para ver como é que tá então Aqui já carregou e olha só que legal já tem a imagem do Bobinho aqui ó aparecendo porque é ele que tá logado né O que faltou também é colocar aqui ó bem-vindo Bob tá bem-vindo o nome tá então pode vir aqui e antes de mudar a gente vai ter que fazer uma backend query Aqui também tá então eu posso vir aqui no header e fazer uma backend cre como esses daqui estão em contêiner separados
eu não consigo ter acesso aos Dados tá então ou eu faço na minha tela inteira né para conseguir ou eu faço em um lugar só eu vou deixar aqui separado mas aí mais para frente a gente pode pensar nessas formma de fazer menos consultas né quanto menos consultas é melhor para não exigir o nosso banco de dados deixa fazer aqui rapidinho vou fazer a consulta do sup base seguir aquele mesmo padrão de usuários uma linha só filtro vai ser user ID que é igual ao ID do usuário logado tá tecate User pode vir aqui e
colocar user ID confirmar agora eu vou clicar aqui no meu texto vou clicar em deixar dinâmico Opa copia aqui tá a mãozinha na verdade copia a mãozinha volto aqui e a gente pode vir aqui ó combine text tá aí pode vir aqui deixar dinâmico e agora a gente tem acesso aos dados do usuário tá pode colocar aqui ó nome nome e aí vai somar com a mãozinha tá então vai mostrar o nome da pessoa e a mãozinha Então é isso vou atualizar Aqui só para ficar atualizado que eu tinha esquecido essa parte e Aqui já
carregou olha que legal vai mostrar seja bem-vindo Bob e aqui tá a imagem do Bob se eu clicar vai mostrar ó nome Bob e-mail Bob é a fotinha do Bob vamos testar aqui se eu sair vou sair aqui vou dar logout antes eu vou pegar uma imagem minha pegar no Google aqui Castelo acho que tem alguma coisa aqui pegar essa imagem aqui ó Mateus castelos e vou vi copiar endereço da imagem esse cara aí ó Bonitão também E aí vou vir no meu suabase e foto de perfil vou criar aqui a URL tá do Mateus
Castelo vi no mode vou vir em login e vou logar lá com a minha conta tá então castelo @gmail.com castelo 1 2 3 minha senha Vou acessar e já veio tudo certinho olha que irado meu nome que tá no banco de dados a minha imagem também ó certinho se eu clico aqui ó minha imagem certinha meu nome e meu e-mail então o nosso app já está dinâmico e funcionando depois a Gente vai fazer essa parte de p de foto tá vamos deixar um pouco mais para frente Agora eu quero fazer o crude que é da
gente adicionar deletar visualizar dados aqui do nosso banco de dados mas já começamos aqui com APP já tá ficando lado demais Bora lá então agora vamos fazer toda a parte inteligência pra gente conseguir visualizar os registros financeiros do usuário que tá logado para isso você tem que entender um conceito muito importante que é o Conceito de crude que é a gente conseguir interagir no nosso frontend com o nosso backend em operações crud a gente vai poder fazer quatro interações muito importantes a gente vai poder criar novos dados no nosso banco de dados a gente vai
poder reach visualizar nossos dados update de atualizar nossos dados e deletar os nossos dados Então a partir do momento que você tem um aplicativo um sistema um SAS você tem que conseguir estabelecer essa conexão Entre o frontend e o backend então o front e o back toda hora vão estar interagindo tá esse que é o grande diferencial da arquitetura de um SAS agora que você já entendeu isso Bora pro floter Flow pra gente fazer o crud completo na nossa tabela de registros financeiros lá no app Bora lá e aqui dentro do meu App a gente
vai fazer o quê Primeiro vamos vir aqui ó em adicionar registro então eu vou começar pela parte do Create eu quero que na Hora que a pessoa preenche aqui o registro eu quero que adicione lá no nossos bancos de dados tá no registro tá aqui no banco de dados do supabase vai adicionar o registro então a gente não vai precisar inserir por aqui aqui né a gente vai inserir lá pelo nosso frontend show demais então aqui a gente já tem a descrição do gasto o valor tá o valor aqui tem um ponto importante o usuário
ele vai ter que digitar dessa forma que tá aqui tá ele vai ter que usar o ponto Porque o flat flow não tem uma forma Nativa que o usuário consiga digitar como se fosse a moeda brasileira né com as vírgulas e tal e para gravar no banco de dados aqui como ponto tá porque se você gravar com vírgula ele não vai entender tem que ser ponto tem uma forma aqui que é por código a gente ensina numa aula na formação só para isso para fazer um codigo Zinho bem simples para quando o usuário escrever já
aparece aqui o valor em moeda então depois dá Uma olhada na aula de informação e a gente explica como fazer esse código tá é bem tranquilo mas no momento a gente vai fazer aqui só os montinhos tá aqui no categoria A gente tem que colocar as mesmas categorias que a gente colocou lá tá tem que parer certinho então eu vou clicar aqui em categoria E vamos colocar aqui as opções que o usuário POD selecionar exatamente as mesmas tá que a gente veio e coloque em Database e vai ser essas categorias aqui tá vamos Colocar aqui
certinho eu vou colocar aqui só para não perder muito tempo já volto com tudo preenchido Pronto já preenchi aqui certinho aqui também na entrada também está certinho o que eu posso fazer aqui ó lembra que a gente colocou um formulário de validação vou clicar nesse formulário E aí você consegue fazer várias coisas aqui nesse formulário tá é só vou falar que todos os formulários aqui são obrigatórios tá ó parte do valor categoria tudo que eu Coloquei de input aqui a pessoal tem que preencher senão não vai deixar ele acessar tá então é isso e vou
deixar aqui para ele automaticamente validar aqui no formulário é legal depois você pode dar uma olhada melhor mas você consegue colocar por exemplo ó se o usuário ele tá colocando e-mail ou se um website aqui você pode colocar um codigo Zinho personalizado ou Quantos caracteres mínimos Qual que é o máximo de caracteres a gente consegue definir Isso no formulário vamos vir aqui em adicionar registro e agora eu vou fazer uma Action né pra gente conseguir Salvar esse registro lá no nosso banco de dados vou abrir aqui o nosso workflow e vou adicionar aqui a nossa
Action tá Primeiro de tudo eu vou validar o formulário tá se escrever form eu consigo aqui ó validate form tá só para validar o formulário show demais form um tá E aí agora que o usuário ele preencheu a gente vai escrever aqui ó Supabase e aí ó a gente pode inserir linhas consultar linhas atualizar e deletar vou inserir linhas tá a tabela vai ser a tabela de registros tá que eu vou Inserir a linha e quais são os campos ó vou aqui adicionar todos os campos para a gente conseguir Preencher esses campos aí de uma
forma dinâmica né então a gente tem que Preencher esses campos aqui quando for adicionar registro ID é gerado automaticamente não precisa remove Create at também é gerado Automaticamente descrição vamos vamos vir aqui em descrição ah em descrição a gente consegue aqui vir aqui ó em wid state e a gente consegue aqui ó colocar o que a pessoa escreveu de descrição tá ó é descrição show categoria também né vamos vir aqui ó widget state add categoria que é o nome do nosso campo lá que a gente preencheu certinho tipo vou vir aqui widget state add tipo
eu demais valor vem aqui no dinâmico w State add valor cara legal demais user ID também Então toda vez que a gente preencher o nosso registro a gente tem que falar pro supabase Quem é que tá preenchendo né porque cada registro tá atrelado a um usuário user ID eu já entendi que eu vou usar esse authenticate user vai pegar o usuário que tá autenticado e vai pegar o ID do usuário autenticado Caraca Castelo fácil demais né E vamos colocar aqui uma informação um dialog vou falar assim ó registro adicionado com sucesso sucesso registro adicionado só
pra gente Ter algum feedback do sistema né Beleza e aí eu vou colocar uma outra Action aqui de fechar aquele popup né Close ó aqui ó dismiss botom sheet tá dismiss botom sheet eu acho que é isso tá tudo certo clicar aqui ó vamos ver se ele vai atualizar lá no nosso backend tá nosso P base Beleza Aqui já carregou e agora o que eu vou fazer vou testar aqui vou clicar no meu botãozinho abriu adicionar registro Vou colocar aqui um novo registro né Vamos colocar por exemplo Cerveja com amigos e aqui eu gastei R
15 e aqui foi um bar né tipo bar e a categoria saída Beleza vou adicionar esse registro sucesso registro adicionado então voltou aqui né para minha tela vou lá no supabase deixo lá nas minhas tabelas e aqui no registro vamos ver se ele adicionou ó serveja com amigos agora certinho já colocou também qual o usuário que adicionou esse registro né que no caso foi Mateus né que eu tô logado Então tá funcionando a Nossa parte de criar dados só vou fazer a correção aqui ó ao invés do Label text tá Vou colocar aqui na dica
tá eu tinha colocado errado é na dica tá então vai ficar aqui a dica E aí o Label não tem nada senão vai ficar daquela forma meio ruim ali para adicionar tá aqui descrição do gasto também ao invés do é uma etiqueta Vou colocar aqui na dica tá ó dica aí fica bem melhor já vou corrigir pros outros também aqui tá editar registro ao invés de Label Vou colocar aqui em texto de dica tá E aqui também Lab Test pode tirar aqui podemos prosseguir e agora o que a gente pode fazer é mostrar esses dados
aqui então vamos fazer a parte de visualizar os dados aqui nessa tabela e agora vamos visualizar os dados lá na nossa tabela Bora lá então aqui no meu projeto vou lá na home page e aqui tinha feito né alguns dados aleatórios né o que eu vou fazer antes de tudo eu vi aqui que tem Uma observação de otimização né eu tô fazendo a mesma consulta duas vezes então a consulta aqui ó tá sendo feita aqui e tá sendo feita aqui tá aquela consulta para puxar os dados usuário então quanto mais consultas a gente faz no
nosso bano de dados pior eu vou fazer essa consulta aqui ó na tela completa porque ela vai abranger tudo tá e eu vou apagar as outras Depois deixa eu só atualizar isso pra gente ter essa melhor performance no nosso app tá então era a Tabela de usuários e aqui é a tabela uma linha só né Igual que a tinha feito user ID tem que ser igual ao user ID tá atic usuário autenticado a ID do usuário autenticado Beleza então eu fiz uma consulta agora no meu contêiner maior então eu consigo ter acesso aos dados sem
precisar usar aqui né sem precisar fazer duas consultas diferentes vou vir aqui ó então ó em menu vou tirar essa consulta tá vou tirar essa consulta aqui e também aqui no header vou tirar a Consulta só para atualizar tá aqui seria uma melhor forma e aí aqui ó vamos atualizar o texto texto lá né que a gente tem que atualizar rapidamente então agora a gente tem acesso aos usuários a gente quer o nome beleza e a imagem aqui podemos ir lá para baixo só para atualizar rapidamente a imagem acesso aos usuários a gente quer a
foto de perfil tá beleza agora tudo certo a gente pode fazer a nossa próxima consulta agora a gente tem que consultar Os registros né eu vou consultar os registros aqui no meu contêiner Acima tá aqui no meu contêiner de conteúdo tá que esse contêiner completo aqui então vou vir aqui fazer uma nova consulta que nem a gente já aprendeu e vou fazer a consulta aqui ó do supabase e a tabela vai ser agora a tabela de registros tá E vai ser uma lista de rols que é uma lista de linhas certo o filtro eu quero
que puxe só os registros do usuário que está logado tá eu não quero Que fique puxando registros de outros usuários então vou seguir o mesmo padrão ó eu quero que o user ID seja igual a usuário autenticado ID certo confirmar beleza agora que eu puxei também uma nova consulta uma nova backend query desse usuário a gente pode vir aqui no data table e agora atualizar aqui essa lista tá então esse daqui sempre gera uma lista a partir de uma consulta que você faz seja no banco de dados ou seja de um Api geralmente a gente
usa para apis tá mas aqui eu vou usar para puxar os dados lista registro tá você quiser aprender sobre apis a gente tem aulas completas na formação sobre isso tá faz vários apps muito interessantes e aqui vai ter essa lista né vou tirar então agora ó eu consigo fazer o quê eu consigo ir na tabela de usuários para gerar a minha lista tá registros rows então vou clicar aqui não vou mudar nada vou confirmar e vou salvar então quer dizer o quê agora A minha tabela ela tá conectada ao meu backend query beleza e aqui
no meu minha data table eu posso vir aqui e agora deixar dinâmico né o Vamos dar um zoom aqui ó então aqui onde tá descrição não vai ser descrição né vai ser um valor dinâmico tá um valor que ele vai variar e aí a gente tem aqui agora ó lista registros itens quem tirou uma lista pode vir nesse Campo aqui ó certinho quais suas opções possíveis eu quero pegar um campo da linha tá get R bu Qual Campo Você quer ah eu quero a descrição só isso se tiver vazio é legal você sempre colocar aqui
ó no tá para mostrar que tá vazio e não dá erro categoria vamos vir aqui né categoria lista registros itens get R Field categoria se tiver vazio no valor qual que vai ser o valor lista registr os itens aqui get R Field vai ser o valor aqui no valor legal que a gente consegue mudar tá o formato que ele Aparece agora então por mais que na hora de escrever o valor ele tem que aparecer com aqueles pont aqui eu vou colocar que é um formato número certo e ele é decimal tá e o tipo eu
quero que seja primeiro ponto e depois vírgula tá esse valor aqui e é uma moeda currency eu vou colocar aqui ó RS confirmar beleza e agora a gente já pode testar vamos lá e já carregou aqui ó minha tabela E olha que legal el tá dinâmica tá mostrando exatamente o que Tá lá no nosso banco de dados né ó a gente consegue ver os nossos dados estão aqui estão os mesmos dados dos registros né dos nossos registros E aí eu posso até testar aqui né Vamos testar Adicionar novo registro vamos ver como é que fica
vou adicionar um novo registro aqui né E vai ser curso no code Por que você queira fazer o curso no code aqui da no code Startup Vou colocar aqui ó 697 categoria capacitação para você realmente aprender bem e o tipo aqui é Saída tá E vamos adicionar o registro sucesso registro adicionado Então vou dar ok aqui e ó já atualizou então o nosso sistema ó tá dinâmico já atualiza o sup base aqui atualizou sup base e a gente volta já atualiza Nossa tabela aí de uma forma automática cara olha que irado demais o nosso sisteminha
tá ficando pronto e irado demais hein Já podemos prosseguir e agora o que eu quero fazer né a gente já fez a parte do Create e do read agora eu quero também Editar então quando eu clicar aqui num categoria eu quero que abra aquele pop-up lá de editar a gente consiga editar o item né editar ou excluir então bora lá que a gente já tá fazendo a crude completo e nosso aplicativo tá ficando irado demais vamos lá então agora vamos fazer as ações de editar e deletar um registro Bora lá então vou vir aqui no
nosso componente de editar e deletar tá E aqui importante que vai vir carregado tá as informações aqui e como É que eu faço isso eu tenho que passar dados do Flot Flow de uma página para outra tá bom e para fazer isso primeiramente ó eu preciso ir lá na home page tá vou até dar um zoom aqui aqui na minha data table ainda não tem uma forma de conseguir clicar nas linhas Tá eu vou ter que fazer ação quando ele clicar aqui em uma das dos textos tá bom Ó esse daqui não ficou dinâmico né
deixa arrumar ele é lista registros get R Field e tipo aí aqui é no show demais Beleza como que eu vou fazer ó quando p p a clicar aqui no texto né vou abrir aquele pop-up Como que eu faço isso vou vir aqui em Action E aí eu vou adicionar uma nova Action aqui e aí ó vou vir aqui e vou escrever o botom sheet tá que nem a gente vem fazendo show botom sheet beleza que vai ser o Bottle sheet de editar beleza ó editar registro background pode ser aquele preto meio transparente aqui ó
deixar aqui no meio use color e aqui é importante ó a gente Vai ter que passar um parâmetro por qu quando eu clicar na linha por exemplo do registro que é de comprar banana ele tem que abrir registro de comprar banana quando eu clicar na linha do registro de bar tem que abrir o registro de bar tá então vou vir aqui e aí eu cliquei para adicionar novo parâmetro Então essa página tem que passar um parâmetro tá como que ele vai saber qual é o parâmetro vou vir aqui ó adicionar parâmetro e aqui ó vai
ser supabase Row Aqui vai ser registro Row tá melhor E aí o tipo se eu for aqui embaixo Ó tem aqui ó sup base Row então toda vez que eu clicar numa numa linha ali ele vai passar exatamente qual que é o número daquela linha Qual que é o ID né pra gente conseguir abrir as informações do meu produto aqui tá é assim que a gente vai fazer a tabela registros vou confirmar então agora a gente tem um parâmetro de página a gente tem que passar esse parâmetro né então vou aqui Para baixo e vou
passar o parâmetro agora que eu defini já então eu vou passar o parâmetro que é o registro Row tá então eu vou clicar aqui beleza para passar vou vir aqui na minha lista de registros E se eu passar apenas qual que é o item da lista ele já vai entender Beleza então vou dar o confirmar aqui parae entender vou voltar lá na nosso editar registro e agora que eu vou ter passado um parâmetro de página aqui para essa tela eu consigo fazer um backend Query uma consulta para puxar informações daquele registro tá então vou vir
aqui lá na parte mais de cima tá aqui na parte de cima com container E aí vou fazer um backend query aqui uma consulta Tá qual que vai ser a consulta eu vou pegar uma base query da tabela de registros agora eu vou pegar uma apenas tá uma single Row Qual que é o filtro o filtro tem que ser o registro ID vai ter que ser igual a aqui ó um componente um parâmetro de componente registro Row tá Então certinho só isso e é o registro ID tá vou confirmar dessa forma aqui ó vai dar
certo a gente vai conseguir carregar informações do nosso registro pré-carregar aqui né então agora eu vou pré-carregar ó vou vir aqui e vou pré-carregar em descrição ó em valor inicial já vou deixar carregado ó vou colocar aqui em dinâmico e agora eu tenho acesso àquela linha Então vou vir aqui a linha do registro e vou colocar aqui a descrição então quando a pessoa Clicar lá já vai carregar aqui isso que é o mais legal tá registro Row E aí o valor né valor vou deixar como está mesmo aqui em categoria também vamos achar um initial
value categoria categoria E aqui o tipo né initial value do tipo registro R valor tipo tá eu vou também renomear aqui ó só para eu ficar nas os nomes certos tá aqui não é descrição é só realmente a a Descrição tá PR gente não se perder e ficar igual ao outro né de adicionar aqui não é de valor vai ser só valor e aqui também categoria E aqui o tipo tá e agora sim a gente vai conseguir fazer ação de editar tá por a pessoa vai clicar vai carregar aqui agora a gente pode vir aqui
no botão para fazer a Action de editar tá vou vir aqui add Action e vou selecionar aqui ó na verdade deixa eu abrir para ficar mais fácil e vou escrever aqui ó Update tá que a gente vai fazer ó supabase update Roll tá vai atualizar uma linha da tabela registros certo aí ele pergunta qual linha tem que falar qual linha que é a linha vai ser que o registro o ID é igual equal to a o qu a componente aqui o parâmetro de componente registro R tá que é o registro ID de mais para ele
conseguir achar né qual registro que ele tem que editar e os campos vou abrir todos os campos aqui pra gente ver o que Que tem vai ter que atualizar né todos caso a pessoa não mexa em nada vai atualizar lá também Ah vamos ver aqui o registro id não vai atualizar Nada também não atualiza nem o user ID que já tá certo né ter que autorizar descrição categoria E tipo E valor se a pessoa muda algo Então vou vir aqui ó descrição então eu vou autualizar com o valor que ela colocar lá no meu componente
tá que tá aqui ó Wi state então descrição se ela mudar algo Vai atualizar porque ela mudou senão vai continuar o mesmo categoria aqui também categoria vamos ver categoria wid state categoria beleza tipo valor aqui um state certo agora o tipo valor wid state valor então aqui tá tudo certo tipo tipo beleza que eu posso fazer colocar uma mensagem que deu certo um diálogo informacional falando né ó registro AD sei lá escrever aqui ó Mandou bem e aí vou fechar o popup né vou fechar o meu Bottom sheet B sheet Pode fechar dismiss certo e
para deletar ó vou clicar aqui em deletar a gente poderia fazer um uma mensagem né mensagem perguntando se ele quer deletar realmente ou não né a gente consegue fazer essa mensagem aqui ó com um diálogo de confirmação então ele fala que sim quer deletar vai lá deletar Tá mas é só usar a confirmação que vai Aparecer aqui a dois caminhos a seguir se sim e se não no caso aqui eu vou deletar direto vou vir aqui escrever supabase supabase e aqui ó delete Roll show D tabela usuários E aí eu tenho que dar um matching
Roll aqui que é o que a gente já entendeu né vai deletar qual Opa tabela usuários não a tabela registros e aqui vai ser o registro ID vai ter que ser igual a O componente aqui o parâmetro de componente tá E é o registro aí de aí eu Vou dar uma informação que foi deletado né dialog e vou falar assim registro deletado ação não pode ser desfeita e pronto vamos testar vou abrir aqui para testar e ver como é que tá o nosso app aqui se tá dando certo a parte de update e de delete
então Aqui já carregou vamos aqui ó testar agora se vai dar certo né a gente colocou apenas aqui né Depois eu vou colocar nos outros textos então vou Clicar aqui e ó legal abriu certinho categoria aqui não abriu deixa ver se não tem categoria barana e maçã mercado Então deixa eu ver se eu coloquei certo aqui categoria aqui o que faltou eu colocar as opções tá eu coloquei lá pra parte de adicionar registro e não coloquei aqui então vou colocar aqui rapid e já volto tá já atualizei tá coloquei as opções certinho eu copiei e
Colei o mesmo widget E como eu copiei colei eu tenho que atualizar aqui minha Action tá vamos vir aqui e vou atualizar aqui a Action né de categoria aqui ó a de categoria pode por aqui o nome veio categoria né é eu copiei Coli outro elemento beleza faça essa correção aí também não sei se já tinha feito e vamos atualizar o teste então Aqui já carregou vou clicar agora em banana e maçã e agora sim ó viio categoria certinho tudo certinho aqui ó como a gente precisava né Beleza então se eu quiser atualizar na verdade
ISO Daqui sei lá foi a categoria farmácia certo e foi saída e foi na verdade R 90 90.9 vamos ver agora se dá certo vou editar aqui Mandou bem registro atualizado Então tem que ir pra farmácia e pra 90.9 banana e maçã farmácia 90.9 certinho então tá funcionando já essa parte aqui bem importante atualizar e deletar vamos testar o deletar na verdade né Agora vamos testar aqui e vou deletar tá se eu clicar ele não vai perguntar eu poderia fazer uma Action Para perguntar vai deletar automaticamente vamos ver faltou fechar o bit faltou E aí
já deleta né então aqui deixa colocar aqui essa opção de fechar o botom sheet E aí eu posso colocar aqui né ó bor ti dismiss beleza e lá na minha home page eu vou dar um zoom aqui vamos ver vamos dar um zoom aqui e eu vou copiar a Action que tá aqui ó copiar essa Action pros outros parâmetros né então vou Clicar aqui ó nos três pontinhos e vou copy Action vou clicar aqui agora em categoria vou em Actions vou vir aqui ó paste Action tá d o p Action Então já foi tudo certinho
aqui deixa eu ver se está certo também tá certo vou vir agora no valor tá pra pessoa conseguir clicar em qualquer lugar e abrir aí fica bem melhor né o o fluxo do usuário cara se o nosso aplicativo aqui ó pô tá bonito demais hein para vender ele aí ganhar uma grana aí vai da sua criatividade que A parte técnica aqui ó Sem Limites dá o paste Action e pronto então agora a gente consegue aí finalizar o crude né a gente consegue adicionar deletar editar e visualizar os dados dentro do nosso aplicativo a gente fez
o crude completo A nossa interface completinha e aqui ó já tá funcionando eu clico no bar vai abrir aqui ó cerveja com os amigos posso clicar aqui em saída também ele vai abrir no celular também tá bonitão né ó bonitão posso clicar aqui no que eu Quiser e aí já abre os detalhes daquele registro né deu demais e se você quiser se aprofundar no supabase depois também dá uma olhada na nossa formação que a gente tem aulas mais avançadas tá eu explico lá do zero sobre KL e a gente faz todo um aplicativo que é
uma plataforma EAD e lá no cod flix depois pode dar uma olhada tem aqui ó os fundamentos do SQL que a gente vai lá desde o zero a gente passa pela parte também de apis dentro dos pabis que é Uma das coisas mais importantes para se aprender fazemos a modelagem de dados de um projeto mais avançado que esse da aqui tá tem várias tabelas a gente faz toda a relação das tabelas do zero e aí a gente constrói aqui o nosso projeto de uma plataforma EAD então a gente faz aqui o aplicativo uma plataforma EAD
com várias lógicas e pontos mais avançados dentro do suabase unindo lá com FL Flow depois dá uma olhada que tá irado demais então bora continuar Então bora Continuar esse curso aqui ó super completo e vamos ver como que a gente consegue adicionar mídias lá no nosso banco de dados Então vem comigo aqui no supabase a Tem uma parte aqui de Storage pra guardar mídias tá vou explicar rapidamente como a gente usa isso tá a gente consegue criar um New Bucket esse aqui ó medias tá nome do Bucket vou deixar ele público tá PR as pessoas
conseguirem acessar depois a gente pode deixar ele privado Vou salvar para ele Criar esse novo Bucket também vou adicionar uma configuração de política tá em mídias novas políticas vou vir aqui em for full customization e vou fazer aquele mesmo processo liberar tudo select insert update e delete tá então tô liberando tudo e só dar overview aqui tá vamos salvar essa política a gente configurou Já o nosso Bucket para que que serve consegue aqui adicionar mídias tá ó posso vir aqui e adicionar novas mídias que eu quero Fazer é quando o usuário quiser adicionar novas mídias
lá no meu we vai vir para cá então vamos lá como é que eu faço isso Ó vou vir aqui em meu perfil tá e vou usar esse exemplo aqui tá para upload foto vou clicar aqui no botão de upload foto e vou vir aqui em Action tá vou abrir essa Action beleza vamos adicionar uma nova Action E aí eu vou fazer o upload de uma foto né upload Dea upload mídia certo o tipo de mídia no supabase ó ele já integra aqui e é tudo Muito bem integrado com supabase isso que é ótimo tanto
com firebase quanto supabase né Bucket name que a gente acabou de colocar lá mídias tá mídias coloca o nome que você quiser ali também né a pasta eu vou criar uma pasta chamada fotos perfil beleza aqui só pode dar galeria tá vai abrir a galeria aqui V nas foto aqui tem algumas outras configurações o tamanho largura da foto aqui você pode mudar depois né se você quiser upload data vou até mudar o nome Aqui foto perfil Beleza então eu vou conseguir fazer upload no Flot Flow ele já vai entender que é para ir base Quando
eu fizer esse upload Se eu colocar um arquivo aqui ele vai ter uma URL para eu acessar esse arquivo então aqui no nosso banco de dados eu tenho que colocar uma url na fot de perfil tá já vai ter aqui a fot de perfil tá então essa que eu tenho que substitu log eu preciso fazer um update então aqui comude a gente já vai entendendo né Update su base update R tabela usuários certo E aí qual usuário tem que dar um Mat na linha né usuário vai ser o user ID aqui você já ficou fera
né é igual a authenticate user user ID demais e vou colocar certinho e aqui eu só vou atualizar um campo né que é o campo foto perfil a ele pergunta Tá qual que é o valor se eu clicar aqui eu posso vir aqui procurar escrever upload Então se escrever upload vai aparecer você po pode colocar o upload file URL então ele Já entende ó que já criou um arquivo e eu posso atualizar ele demais eu acho que é isso vamos colocar um aviso que deu certo então eu escrever aqui dialog informational foto atualizada sucesso beleza
pessoal e antes de testar deixa eu pegar essa imagem aqui eu vou um pouco para baixo tem uma coisa que eu acho que sem querer eu deletei Tá vou pegar esse link aqui da minha imagem e vou lá na home page e essa imagem aqui ficou sem o link tá vou clicar nela Faltou aqui o link se não tiver algo e tiver vazio vai dar erro tá Vou confirmar e agora eu vou lá testar Bora testar aí para ver se deu certo upload foto então Aqui já carregou para testar vou criar uma conta nova tá
pra gente associar foto uma conta nova aqui vai ser Mateus Mateus @gmail.com e a senha e vou criar minha conta tá conta criada com sucesso então ele já mostra aqui né O olá Mateus minha outra conta configurações não tem Imagem tá se você não deixar a imagem padrão vai dar erro e agora eu posso vir aqui e dar um upload de foto vamos ver ele vai abrir as minhas mídias do meu PC vou selecionar uma nova foto aqui ó e vou colocar Abrir foto atualizada Então vou dar ok para ele atualizar a foto e aqui
ó vai atualizar de acordo com a minha nova URL né às vezes demora um pouquinho para carregar mas Inclusive eu tava fazendo alguns testes se a gente vi aqui ó em mídias a gente tem aqui ó a Nossa foto a minha né que ela acaba vindo um pouco pesada dá para diminuir um pouco mas também se eu for lá na minha tabela registros usuários eu tenho aqui o Mateus o último aqui que eu fiz ó e a fotinha certinho aqui né lá no meu teste mode se eu fechar aqui ó ele já vai atualizar aqui
a minha fotinha tá Às vezes pode demorar um pouco para para atualizar Mas normalmente é é automático porque isso daqui vai est puxando a URL lá do meu App tá E aí a gente já tem a Nossa foto atualizada olha aqui irado Se quiser que seja atualizado mais rápido ainda dá para fazer uma nova consulta no banco de dados para puxar esse dado tá então só faz uma nova consulta logo depois que a gente rodou a nossa Action e dessa forma você aprende Como utilizar mídias no su base e você pode usar mídias não só
para foto de perfil mas também para colocar por exemplo mídias dentro de cada registro vamos supor que nosso we Financeiro a gente quisesse colocar as notas a gente poderia colocar as mídias também por aí E agora já podemos ir pra parte final do nosso projeto vamos entender como que a gente coloca os somatórios totais e é bom que também a gente vai conversar um pouco sobre o supabase e como fazer views Olha só então aqui no supabase a última coisa que falta do nosso app e no flutterflow é a gente conseguir ter os totais né
E para ter os totais tem várias e várias Formas de fazer a gente consegue fazer o totais por código então a gente consegue puxar esses campos aqui e fazer aqui códigos personalizados tá tem algumas formas de fazer códigos personalizados aqui você pode criar um codigo Zinho apenas para ele somar quando o usuário for aquele usuário quando for aquele tipo tá e também se fosse só Contagem a gente conseguiria fazer aqui de uma forma fácil mas como a gente tem que somar não é tão fácil Tá a gente vai ter Que no supabase e trabalhar com
views aqui no skl editor e aqui a gente vai falar um pouquinho de SQL vai ser coisa rápida mais introdução eu vou usar bastante aia também do SQL pra gente fazer esse projeto se você quiser aprender Aí passo a passo tem um módulo na formação da nooc Startup completo que eu falo só sobre a skell pro supabase e daí você aprende muito bem então depois dá uma olhada lá nesse curso que tá muito completo aqui a gente vai mais Direto ao ponto tá E aí só para você entender né Para que que serve Essa parte
a gente consegue ter vários e vários comandos de SQL tá ó por exemplo aqui tem algum templates a gente consegue criar uma tabela a gente consegue criar uma View uma View nada mais é que vai ser uma tabela que a gente só consegue visualizar a não vai conseguir editar tá você já vai entender para que que é útil a gente consegue criar colunas criar comentários tem Várias várias coisas aqui no SQL tá então por exemplo vou clicar aqui em new query e vou fazer um select tá vou fazer um select que é para selecionar Campos
de alguma tabela at ver que é fácil ó eu vou escrever select quando eu escrevo select eu tô selecionando colunas de uma determinada tabela tá ó vamos supor que eu queira os nomes tá nomes do todos os meus usuários do banco de dados usuários tem a nome quero puxar esses nomes aqui eu vou vir aqui vou escrever nome vou Selecionar o nome e vou escrever from PR quer dizer da onde que você tá selecionando né então vou selecionar minha tabela usuários e vamos dar o Run aqui ó clicar em R E olha que legal e
ele trouxe aqui todos os meus usuários então é uma forma mais dinâmica da gente conseguir conseguir uma lista dos usuários tá legal por exemplo eu poderia pegar também os select de descrição né aqui na minha tabela registros a gente tem campo de inscrição certo só que eu Quero só os de inscrição que seja categoria bar por exemplo então quero descrição da tabela registros tá pronto da tabela registros E aí para fazer um filtro eu posso usar esse Where qu categoria igual a bar vou dar o Run aqui ó deu um erro aqui é quando é
erro é bem importante que você consegue debugar qu Você tem algum erro ele fala certinho Como que você tem que escrever ó se eu vi aqui para baixo quando a gente vai escrever um texto primeiro que são um Igual só tá eu coloquei errado aqui o igual é um igual e é entre essas aspas simples tá não é aspas duplas então ó por exemplo Errei vou vir aqui e corrigir tá categoria igual a bar qu a coisa ele corrige Para você Então olha que legal acho que esse ponto e vírgula não precisa Eu não sei
por que ele colocou então aqui tá dando erro fui ver porque que é né vamos ver aqui mas é porque tem que ser maiúsculo tá esqueci disso vou vir aqui e vou colocar Maiúsculo tá então eu tô colocando uma consulta e agora sim ó ele puxou só os registros que tem categoria igual a bar Ó errado demais para isso que vai servir o SQL tá E aí tem várias outras formas de a gente conseguir utilizar e também se quiser de novo tem lá no curso de skl para supabase E aí a gente precisa agora fazer
um total né Vamos fazer um por vez primeiro Total entradas e depois o total de saídas tá e como é que a gente faz isso tem várias e várias formas tá da Gente fazer isso aqui na skl se a gente for entrar e fazer uma coisa por vezes aqui talvez a aula fique muito muito extensa né já tá ficando bem grande e não vou fazer a direto aos pontos não vamos fazer aqui passo a passo o que eu vou fazer é utilizar essa I supabase vamos ver se ela me ajuda a criar minhas próprias tabelas
e vou escrever aqui em português tá me dê um comando SQL para selecionar o somatório da coluna valor da tabela registros onde Tipo é igual a saída vou dar o enter aqui para ver se vai dar certo vou dar o enter ele vai pensar e vai me sugerir aqui ó um novo comando então ele vai somar ele selecionou aqui a soma tá dos registros e aqui do tipo saída né então vou aceitar aqui a forma vamos dar Run para ver se funciona e ele somou aqui 712 né então aqui se for nos registros registros vai
dar 712 né mas só tem dois saídas deixa eu colocar um de entrada né insert Row Descrição salário mensal vamos supor aqui salário mensal categoria salário tipo entrada valor R 2000 vamos supor aqui e vai ser do Castelo tá vai ser do Mateus castelo e vou salvar então coloquei a entrada Vamos lá ver como é que fica ele vai somar certinho continua somando 712 tá só que assim eu vou precisar desse valor agrupado por usuário tá então vou falar assim adapte Esse comando e agrupe por user ID tá por assim cada usuário vai ter seu
total né Então um usuário vai ter um total de saída o outro vai ser Tero total de saída então eu vou agrupar né então vamos agrupar vou agrupar colocar aqui para ele rodar o nosso ia E aí eu vou aceitar a forma como ele fez e se a gente pode ver aqui ó ele colocou mais um campo user id e também agrupou então é um comando aqui do do skl que é group byy se eu rodar vamos rodar agora e ele já fala que esse usuário AD aqui ó ele tem 712 total né o que
eu posso fazer Aqui também é pegar esse valor aqui S valor e eu posso colocar o novo nome para ele tá que vai ser o total da ida Tá userid eu vou escrever assim S usuário tá então se eu der o Run aqui ele vai mostrar o usuário e quanto que ele gastou show demais só que aqui eu coloquei registro só de um usuário né Vamos colocar um outro para testar colocar um outro registro aqui que vai ser o ah sabonete sabonete shampoo shampoo um Sabonete e escova de dentes escova de dentes categoria Supermercado tipo
saída o valor aqui ó r$ 50 e quem gastou agora foi o Bob tá quem gastou foi o Bob Vou salvar mirado vamos vir aqui então no skl deixa eu mudar essa quy aqui colocar Total gasto por usuário né vou rodar aqui e ó ele já falou que cada usuário gasta quanto que gastou então é exatamente essa tabela que a gente precisa olha como é útil para isso A gente pode criar uma viw uma viw vai ser uma tabela que a gente vai conseguir visualizar mas não vai conseguir editar tá E para criar View vou
escrever assim ó Create View E aí eu vou colocar o nome da vi né vi vi gasto por usuário tá viu gasto por usuário vamos rodar faltou aqui um s vamos rodar e ele criou uma nova View tá Ele criou uma View que que é View ó se eu vir aqui na minha tabela vai aparecer uma nova visualização gasto por usuário Viu então essa tabela aqui ela é muito útil ela vai ficar sempre se atualizando tá sempre a gente vai ter o usuário e quanto que ele gastou ah Castelo mas não tem o nome do
usuário aqui não precisa a gente precisa do id dele táa do ID para conseguir fazer que a gente quer fazer lá no nosso tabela vamos fazer umaid total de entrada também entrada por usuário Ah vou copiar aqui tá vou copiar aqui criar uma nova View Create View que Vai ser o entrada por usuário certo e vai somar o valor total entrada Tá total entrada onde o registro tem que ser igual a entrada certo então vou dar o Run aqui criou a minha View tá então se eu for ver aqui minha View entrada por usuário tem
usuário em entrada né no caso esse usuário aqui é o Bob ele ganhou R 2000 o Castela não ganhou nada mas o que eu vou fazer agora primeiro é colocar alguns Registros aqui de variadas pessoas tá para ficar mais robusto e aí depois agora que a gente já fez essa a gente pode seguir e fazer um valor total ou seja Quanto que vai ser a entrada menos a saída né Quanto vai ser o valor final que ele tem en caixa pra gente conseguir finalmente fazer as nossas continhas lá no nosso dashboard e vai ficar erado
demais Bora lá e antes de passar lá pro flutterflow vamos fazer a nossa View final do saldo total que o usuário vai Ter Bora lá então aqui vou criar uma nova consulta que vai ser o saldo final por usuário saldo final por usuário e aí vou perguntar aqui pra nossa ia né para ajudar a gente a ia tá aí para isso para ajudar nós aliás aqui a gente tem uma ia avançada supabase e lá dentro da formação da nossa comunidade a gente tem uma a avançada além de suabase de flut Flow de Bubble tem várias
outros tipos de a lá de todas as ferramentas no code que são especializadas naquela Ferramenta no code depois dá uma olhada lá que tá irado demais então vamos lá crie uma consulta que junte as views View Total entrada por usuário usuário e View Total saída por usuário e mostre com uma coluna a mais que será o saldo final essa coluna é resultado do total entrada menos o total saída vamos ver se lin vai entender o que eu escrevi né não escrevi exatamente o nome dos Campos vamos ver como é que vai ficar vou dar um
enter então ó ele fez Aqui um avio vamos ver como é que ficou eu vou aceitar vamos ver ele fez um select do usuário ID Total entrada Total saída e o total entrada menos Total saída que é o saldo final pô ele entendeu exatamente que eu queria pegou a view do total de entrada e fez um join um join nada mais é quando a gente junta as tabelas para ter as mesmas informações em um lugar só e ele juntou pelo usuário ID ó ele já foi muito inteligente cara ele já juntou nem falei Eh qual
que seria como que ele juntaria já entendeu tudo então muito fácil Olha para você ver né que como hoje em dia a gente nem precisa saber programar a gente só precisa saber entender o que tá acontecendo né vou dar Run vamos ver aqui de alguma coisa errada eu acho que ele só não pegou o nome exato né que nem eu pedi ver aqui ó o nome exato É esse daqui ó viw entrada por usuário tá entrada por usuário pode vir aqui na nomear aqui Saldo final viu aqui ó entrada por usuário é esse nome aqui
tá entrada por usuário da minha View e o gasto por usuário é esse nome aqui tá ele só não pegou realmente os nomes idênticos vamos ver se vai dar certo se eu corrigir isso daqui gasto por usuário tá ele até renomeou né Ó esse daqui virou ate ele pegou esses campos at e depois teve ats vamos ver se vai vamos dar Run Aqui Também tá errado né ó user ID user ID na verdade o nome é só usuário né usuário usuário tá então aqui vai ser usuário tá usuário e usuário Total entrada Total saída e
aqui também pode ser só usuário né então eu vou fazer essas correções V da Run e deu certo ele pegou o total entrada total saída e o saldo final vamos fazer agora O que eu vou fazer eu vou popular um pouco meus Campos ali que eles estão bem sem dados e vou testar novamente tá vou Popular aqui coloquei aqui uns registros a mais tá mais pro Bob vim aqui e rodei também ó Então a gente vai ter total entrada saída e o saldo final por usuário e vou criar uma View aqui ó Create View Create
View View né View saldo final saldo final Então vou dar Run aqui e daí a gente vai ter a nossa View tá saldo Final aqui então toda vez que eu for atualizando registros os meus usuários eles forem colocando novos registros financeiros essa vi ela já vai pegar todos os registros financeiros e vai agrupar pro usuário então a gente sempre vai ter essa tabela pronta aqui pra gente tá isso que é cara legal demais tem por exemplo aqui acho que é o bobinho ele ganhou 7300 gastou 7 12 e aqui o saldo final dele tá então
agora o que a gente pode fazer é colocar lá no Flat Flow Bora lá então vamos colocar os saldos finais e os totais aqui no flo Flow primeiramente como eu mudei minha estrutura de dados eu vou vir aqui embaixo tá as configurações em supabase e vou colocar aqui get schema beleza para atualizar ó e a vai aparecer as nossas views tá certinho beleza vamos vir aqui então e agora a gente consegue colocar o saldo final né para isso vou vir aqui nos totais tá no container de totais e vou fazer uma backend query Qual vai
ser a backend query vai ser um sup base na tabela aqui ó saldo final eu poderia fazer separado mas como eu tenho tudo resumido aqui vou fazer aqui vai pegar uma linha só e eu quero que pegue apenas do usuário que está logado tá então usuário tem que ser igual ao user ID né authenticate user user ID vou confirmar confirmei então eu já tenho acesso a esses dados E aí aqui que eu posso fazer posso deixar dinâmico né e agora eu consigo ver ao saldo final Daquele usuário então eu vou pegar aqui ó saldo final
Number Format e decimal para mostrar em número né decimal Type vírgula depois ponto e o cifrão aqui para mostrar em dinheiro tá vou pegar esse daqui ó se eu clicar nesses dois pontinhos Eu consigo copiar copiei vim aqui vou vir aqui em saldo final saldo final e agora vai ser o total entrada deixa colar aqui para ver Se ele vai autorizar aqui para Total entrada Tá total entrada colei confirmar e o saí vamos vir aqui ó saldo final Total saída vou vir aqui colar e vou no total saída tá é legal que coloque aqui se
não tiver nada Vamos colocar um zero né se não tiver nada se não tiver nada a gente coloca um zero bom vir aqui também se der erro a gente coloca um zero e aqui também tá Se tiver vazio Vamos colocar o zero e vamos testar vamos ver se tá Funcionando tá vou vir aqui para testar e a gente vai finalizando o nosso app Depois dessa longa jornada aí então Aqui já carregou e olha que legal já tá mostrando que como não veio nada tá zer zer né mas vou entrar com outra conta aqui eu tô
com a conta do Mateus Vou dar o logout deixa eu entrar com a conta do Bobinho login vou entrar com a conta do Bob aqui e a conta do Bob aqui ó certinha acho que eu configurei errado eu Coloquei vírgula Inés de ponto né aqui dá para depois arrumar deixar ponto mas quanto que o Bob tem de saldo Total quanto que entrou pro Bob e quanto que ele gastou ó aqui ele gastou bastante ó aqui inclusive dá para aumentar o tamanho dessa coluna tá se a gente for ver aqui no desktop ó certinho que as
coisas que o Bob gastou e aqui o que ele ganhou aqui de salário né o bônus emprego salário dele e daí ele ganhou esse valor de entrada o resto de saída e Ele já tem aqui o app completo do Bob funcionando calculando o total as entradas as saídas e o saldo final aqui cara irado demais muito massa esse App hein pra gente finalizar esse nosso projeto aí que ficou irado demais vamos publicar na web e também publicar pra gente usar lá no nosso aplicativo no celular vamos ver como é que fica então estou aqui no
meu projeto Beleza vou vir aqui para baixo primeiro de tudo aqui ó em app assets eu vou vir aqui nesse Launch econ e vou colocar um ícone para ficar bonito o meu App tá para quando a gente ter o app lá publicado a gente conseguir ver ele vou vir aqui na verdade vou carregar uma nova imagem eu subi uma imagem e tá carregando vai ficar assim tá o logo do meu App aqui também se quiser colocar uma imagem de carregamento do app também uma imagem de erro Dá para colocar aqui só vou fazer o Bas
vou vir agora em web publishing e ele pede aqui ó para liberar antes tá Pra gente conseguir publicar eu vou clicar aqui ó liberar web tá então a gente consegue publicar Android IOS e web e agora nesse tutorial aqui a gente só vai publicar na web tá se quiser publicar nas lojas oficiais depois dá uma olhada a gente tem várias aulas curso sobre como fazer isso dentro da formação agora eu posso vir aqui ó em web publish tá se você quiser tava publicar nas lojas oficiais mas precisa estar no plano pago tá em web publish
eu Posso vir aqui e colocar qual que vai ser o nome do meu App tá app Finanças no code tá vai ser esse meu App a gente consegue ter um domínio do Flot Flow de graça tá você quisesse colocar um domínio próprio tem que tá aqui ó no plano pago tá Custom Dom Main Dá para colocar aqui você consegue colocar um título se pro seu app né no code app Finanças app de Finanças aqui é descrição e o título vai ser app de Finanças tá a gente consegue também Colocar um favc né que é o
quadradinho que vai aparecer lá no nosso app mas é parte do plano pago tá e aqui a c da Barra aqui eu vou deixar como está aqui tem algumas opções tá a gente pode tirar a marca d'água do Flot Flow no plano pro tá como não no plano pro vou deixar aqui se você deixar quiser que o FL Flow divulgue seu app aqui se você quer que os mecanismos de buscas eles consigam visualizar o seu App app habilitar pwa aqui é pra gente conseguir fazer um um App que ele vai funcionar ele é um we
app Mas ele também vai ser instalável tanto pelo computador né tanto pelo celular ó por exemplo esse botãozinho aqui ó que a gente tem aqui em cima quer dizer que o flo Flow é um pwa a gente consegue baixar o o app do flutterflow e ele vai rodar na web tá isso daqui é muito bom porque a gente consegue ter alguns recursos bem interessantes que depois eu vou baixar ele lá no celular para você ver como é que fica e fica bem Legal e é super prático não precisa ficar baix o aplicativo nas lojas aqui
eu vou colocar também essa opção para aumentar a velocidade de carregamento tá tá em testes Às vezes o primeiro carregamento pode ser um pouquinho mais lento do Flot Flow vou deixar ok aqui e vou publicar tá vou publicar para ver como é que vai ficar o nosso app em domínio próprio tá vamos esperar um pouquinho às vezes demora uns minutinhos para ele ser Publicado bom aqui publicou já então a gente pode olhar como é que ficou nosso web publicado na web daqui é o a URL ial eu vou abrir aqui o meu App então ó
um app Zão bonitão consigo já criar conta tá vou logar aqui com o meu e-mail ver como é que tá meu Zoom vou logar com o e-mail do Bob e vamos ver como é que ficou o meu App ó lembrei que a parte ali do Dark mode tá carregando no login tá então aqui eu coloquei para setar Light mode o Que eu teria que fazer lá é colocar também para setar o light mode no login tá e o nosso app tá funcionando aqui eu já vi que tenho que fazer depois algumas configurações de layout a
minha tela aqui eu tô usando uma tela muito grande e aqui fica algumas coisinhas desconfiguradas tá então depois eu tenho que deixar arrumado isso para ir adaptando para telas tá minha tela que é bem grande mas tem aqui a nossa adicionar aqui o registro financeiro né A gente consegue adicionar os registros financeiros e eu consigo também adicionar aqui a minhas informações de perfil e ver os meus totais aqui aqui então a gente tem um app bem legal publicado na web aqui no meu depois eu tenho que fazer alguns retoques e agora eu quero testar lá
no celular para ver como é que vai ficar o app no celular eu vou pegar esse link e abrir no meu celular vamos ver aqui eu só vou fazer alguns ajustes antes de testar no Celular tá primeiro eu vou vir aqui nessa opção ó colocar aqui ó precisa de autenticação tá na nossa página para exigir autenticação pra pessoa chegar na homepage tá bom e também aqui ó na na ação que a gente fez de deixar Dark mode vou copiar ela aqui ó copy Action E aí eu vou lá no meu login cadastro vou vir aqui
na minha Action aqui na minha parte mais acima e vou colocar aqui para baixo paste Action tá para setar o light mode tá tanto no Login no cadastro aqui eu vi que na minha tela em específico ficou meio estourado né acho que a minha tela é mais fica maiorzão então você tem que fazer alguns ajustes aqui tá eu até posso diminuir um pouco por exemplo esse contêiner aqui que dá para fazer vários e vários ajustes tá aqui por exemplo no conteúdo nesse header aqui os totais eu posso depois dar uma ajustada e aqui na tabela
de gastos eu posso vir aqui e diminuir um pouco o tamanho desse coner Também ó tá no caso da minha tela aqui vai ficar um pouco menor daí acho que vai ficar melhor também mas beleza agora eu posso Se toda vez que quizer mudança você vem aqui na no seu aplicativo aqui na web e publica de novo tá pública de novo para essas mudanças serem realizadas e agora que eu fiz esses minis ajustes eu vou testar lá no celular para ver como é que ficou Vamos lá ver Então olha que legal abri aqui no meu
celular tá na página web no caso eu Estô usando iPhone tô aqui no caso no Safari então eu consigo criar a conta e fazer o login e eu vou vir aqui nesse botãozinho do Meio lá embaixo ó esse quadradinho no caso do iPhone depois você pode ver como é que funciona para Android mas no iPhone aqui é bem tranquilo vou clicar no botão do meio vou vir aqui para baixo e tem aqui ó adicionar a tela de início tá no caso do iPhone e aí eu vou clicar aqui em adicionar a tela de início ó
e vai Aparecer app Finanças com o nosso logoz inho lá legal isso porque ele é um pwa então a gente consegue baixar no nosso aplicativo a gente não vai conseguir usar todas as funcionalidades do celular mas já fica mais prático tá ele vai rodar na web ele não vai rodar como se fosse realmente um app nativo tá ele tá rodando na web e vou adicionar esse App Finanças Então olha que bonitão aqui o nosso app já já tá mostrando aqui no celular vou abrir Ele e aqui abriu ó o interessante que ele fica tela cheia
usabilidade Fica muito melhor e vou logar aqui na minha conta né vou entrar e olha só que legal o nosso app aqui ó bonitão a gente já consegue fazer tudo ó nossa tabela aqui funcionando também tem os totais aqui consigo passar o dedo mexer consigo clicar aqui ó nos registros posso até deletar vou deletar esse registro aqui ó deletei e eu tenho meus registros Prontos ó cara ficou bonito demais Fala aí consigo ver aqui o nome também adicionar novos registros tá então ficou um app bem legal completo funciona tanto aqui dentro do celular quanto na
web é claro né sempre vai precisar de mini ajustes aqui de design mas já certinho e a gente consegue usar no celular e na web E aí curtiu depois comenta aqui embaixo se gostou desse app E chegamos no final desse curso super completo de flut Flow com su base Onde você fez o seu primeiro aplicativo aí do zero até o app pronto eu espero que você tenha curtido muito mas também fica algumas dúvidas né Depois de você ver que você consegue basicamente ter um super poder para criar qualquer aplicativo fica aquela dúvida que é beleza
eu entendi como criar o aplicativo Achei bem fluído muito mais fácil do que eu imaginava já consigo criar o app Mas e aí como que eu posso ganhar dinheiro com isso eu quero te Apresentar aqui três formas de você monetizar com seu conhecimento desenvolvimento de aplicativos no cod para conseguir ganhar uma grana com isso e a forma onde o in cod mais se encaixa é para você tirar a sua ideia do papel e criar um aplicativo inovador Então você já viu que consegue criar aí o seu aplicativo de uma forma muito rápida para tirar sua
ideia do papel e fazer o seu primeiro MVP para testar o app no mercado e ter o feedback dos seus Clientes isso até mesmo pode ser a própria tecnologia da sua Startup ou se você estiver fazendo alguma inovação lá dentro da empresa aonde que você trabalha e uma outra excelente forma é você criar um SAS que é um software as a service nada mais é que você criar uma tecnologia que vai resolver o problema de algumas pessoas ou um grupo de pessoas e vai cobrar uma assinatura por isso e essa seria outra forma que você
criar o sas pode criar o sas completo Mas se você também pode criar aí um micr SAS que seria um serviço de tecnologia focado por um nicho específico alguma dor específica no mercado dessa forma você consegue focar os seus esforços exatamente naquele problema e atender muito melhor seu usuário e não ficar competindo aí com grandes players do mercado e além de criar seu primeiro projeto um SAS você também pode trabalhar como desenvolvedor no code freelancer Ou seja criar tecnologia Criar aplicativos para negócios locais da sua cidade ou qualquer outro tipo de negócio afinal Final Todo
mundo precisa de tecnologia para sobreviver se você preferir você também pode trabalhar em agência software House que são agências focadas para desenvolvimento de apps utilizando ferramentas no code então você pode ser um desenvolvedor e trabalhar aí tanto no Brasil onde tem várias agências no code tanto lá fora na gringa melhor de tudo elas vão pagar em Dólar e se você preferir você pode criar sua própria agência software houses ou seja começar a desenvolver aplicativos para outros tipo de negócio e conseguir escalando com isso que é uma das maiores oportunidades Hoje em Dia com essa agilidade
e o baixo custo de ferramentas low code dessa forma você pode criar produtos escaláveis e também por exemplo automações ou chatbots ou produtos com inteligência artificial que estão muito no Hype do momento beleza Castelo mais Além de aplicativo de Finanças o que mais que eu consigo construir com flutterflow o que que é possível fazer com flutterflow basicamente você consegue criar qualquer tipo de aplicativo ou qualquer tipo de SAS pro seu negócio é uma ferramenta muito poderosa porque a gente consegue criar aplicativos robustos complexos que também vão escalar apenas com flat Flow e com o nosso
backend de escolha então por exemplo a gente consegue criar Aplicativos de e-commerce aplicativos de agendamento consegue criar SAS com inteligência artificial conseguimos criar aplicativos conectados com qualquer tipo de Api para conseguir utilizar tecnologia de outras plataformas do mercado também aplicativos de delivery apps para empresas e aplicativos com WhatsApp e o melhor de tudo a gente consegue criar plataformas multiempresas que é uma grande oportunidade de negócio e aí você Me pergunta beleza Castelo Mas por que que é tão interessante essas plataformas multiempresas Vem comigo que eu vou te explicar para empresas tradicionais à medida que a
gente vai aumentando o faturamento a gente precisa de mais recursos ou seja mais matériaprima mais custos com produtos mais custos contratando as pessoas mais em tecnologia e software isso é um pouco diferente os seus projetos podem ser escaláveis e o seu fatur pode subir de Uma forma muito mais rápida que os seus custos isso que é o mais interessante de projetos com tecnologia ou de sast de software as a service então aqui nesse gráfico vamos supor que eu tenho uma agência que crie automações para outras empresas né então à medida que meu faturamento vai aumentando
e eu vou conseguindo mais clientes na minha agência eu tenho que gerenciar toda a minha mão de obra que no caso vai ser os meus maiores custos né então eu tenho Que contratar aí mais pessoas o que às vezes meus custos acabam subindo de de uma forma aí proporcional ao meu faturamento É claro que eu vou ter um faturamento maior um lucro maior lá na frente mas os meus custos Podem subir de uma forma proporcional e quando a gente tem projetos escaláveis principalmente SAS multiempresas a gente consegue criar uma plataforma SAS apenas uma vez e
depois ir só melhorando ela eu vou conseguir ter várias e várias empresas Usando a minha plataforma Então o meu faturamento nesse caso à medida que eu vou conseguindo mais clientes ele vai subir de uma forma mais rápida do que os meus os custos Afinal eu precisei fazer aquele projeto apenas uma vez Então olha que interessante Olha como fica muito vantajoso você criar uma plataforma multiempresa Ou seja que você vai ter o trabalho apenas uma vez de que aplicativo e depois vai melhorando o seu SAS aí ao longo do tempo mas todas as Empresas vão estar
usando o seu app e criar um SAS multiempresa vou te falar que é uma das maiores oportunidades do mercado hoje para você conseguir faturar alta e aí você pode me perguntar pô Curti Demais heem Castelo Mas como que eu posso aprender o flotter flow mais rápido possível para construir esses projetos mais completos e bem robustos bom a jornada de aprendizado geralmente ela vai seguir uma linha bem constante coloquei um exemplo aqui que geralmente Vai ser o padrão de aprendizado das pessoas para aprender qualquer ferramenta ou qualquer nova habilidade no começo a gente começa a ter
mais experiência né a gente fala pô legal tô aprendendo muito bom e aí a gente vai pro agora eu se mexer você vai ter algumas dificuldades e vai começar a mexer no floter flow e vai ter a falsa sensação que sabe mexer porque a ferramenta é relativamente tranquila mas se você não aprende os fundamentos você Vê que na verdade não sabia de nada Você precisa aprender bem esses fundamentos para construir aplicativos aí SAS robustos pro seu projeto Então a partir daí é muito importante que você entenda os fundamentos você entenda com projetos práticos você consiga
ir aprendendo fazendo projetos práticos e também projetos do mundo real tá vai ser só nessa fase que realmente você vai aprender de uma forma aí muito robusta então seguindo todas essas etapas você Vai seguir essa jornada de aprendizado e no final você vai falar pô eu finalmente entendi e você vai ter o conhecimento aí prático Para construir qualquer tipo de SAS Ou pelo menos vai saber onde buscar essas informações mas a jornada já vai estar muito clara para você e para te ajudar nessa jornada eu quero te fazer um convite especial para você conhecer a
nossa formação completa da no cod Startup focada em Flow dentro da formação completa você aprender todos os Fundamentos necessários e todos os conteúdos práticos do zero ao avançado para dominar a ferramenta floter Flow eu vou deixar depois o link aqui embaixo Mas deixa te mostrar um pouco como é que funciona dentro da formação a gente segue muito pelo aprendizado ativo que é a hora que você tá mais aprendendo né quando você tá discutindo produzindo ensinando então todos os projetos dentro da formação são práticos a gente sempre tá construindo projetos do mundo real Para você ir
aprendendo a Med medida que vai construindo algum projeto de um aplicativo ou de algum SAS do zero ao app e olha só criado algum dos projetos que a gente tem lá na formação são mais de 70 horas de conteúdo e a formação tá sempre evoluindo de mês a mês deixa mostrar aqui alguns exemplos de projetos que você vai aprender um dos grandes projetos é um web app CRM SAS multiempresa então a gente faz do zero um software aí multiempresa para você Conseguir tanto ali saber como fazer a parte design lado do zero parte inteligência e
modelar seu bancos para o seu app atingir aí um projeto multiempresa a gente também faz uma plataforma completa geradora de texto e geradora de imagem com o chat ept então aqui você aprende tudo sobre apis tem também a parte toda de pagamentos como é que você coloca pagamentos do seu app como você coloca assinaturas tem todas as aulas bem completinhos lá dentro da Formação tem um app de agendamento para você conseguir criar um app que você consiga trabalhar com Slots de times com slot de agendamento e fazer cálculos pra agenda que muita gente quer fazer
então você consegue aprender esse App a do zero lá além disso a gente tem uma plataforma aí de cursos e você consegue fazer toda a estrutura para ter uma plataforma de cursos online então a gente faz todas as relações entre tabelas de professores de alunos já é um Aplicativo aí bem mais avançado E aí para quem quer aprender os fundamentos de Dart a gente tem algumas aulas aí focadas para você desenvolver alguns códigos personalizados e conseguir deixar o os seus aplicativos do flutterflow muito mais robustos asas aulas já são um pouquinho mais avançadas e lá
dentro da formação você também aprende como gerar pdfs a partir aí de códigos prontos na biblioteca pubdev Então você consegue criar vários e Vários tipos de PDF com essa estrutura pronta de código também são aulas mais avançadas e também aprende como criar projetos aplicativos aí que funcionem offline esses daqui São só alguns exemplos de aulas algumas estão em gravação para finalizar E no momento que você está vendo esse vídeo talvez já tenham aí muito mais aulas interessantes e mais modos porque a gente sempre tá melhorando e além da jornada completa para você conseguir ter o
curso de Conseguir ver as aulas a gente tem toda uma comunidade para te dar o maior suporte possível depois se quiser dar uma olhada na no cod flix vou deixar o link aqui embaixo Mas você vai conseguir ter acesso a formação completa do flut Flow que a gente consegue ter os fundamentos aqui ó mais importantes para você dar os primeiros passos Então a gente vai mais a fundo porque essa aula aqui depois a gente fala muito sobre apis que é um dos conceitos mais Importantes e cria alguns projetos aqui com apis inclusive projeto do chat
GPT fazendo texto e imagem Depois tem toda a parte fundamentos tá modelagem de dados design que é super importante tem aula aqui avançada sobre Dart a gente tem projetos prontos tanto no Far base quanto de supabase Então a gente tem o projeto aqui do SAS temos projetos de pagamentos temos projetos avançados como por exemplo app de link Tree o app de agendamento app de busca aqui o app de Chat também e vários e vários projetos aqui ó do zero avançado de supabase também pagamentos com supabase e projetos aí mais avançados que a gente tá começando
a colocar mais e mais projetos aqui né a gente tem de PDF E tem alguns mais sendo construídos então depois eu recomendo dar uma olhada no link abaixo que tá bem irado essa formação e super completo na comunidade você vai conseguir ter todo o suporte para suas dúvidas sobre as aulas então a Gente tá lá sempre Tod todos os dias respondendo nossos alunos além disso a gente tem um momento ali para discutir sobre nocode negócio consegue ter acesso para vagas toda semana tem novas postagens de vagas para você conseguir aí trabalhar como desenvolvedor ou conseguir
monetizar com as ferramentas no code Além disso de forma recorrente nós temos as nossas lives que a gente se reúne para fazer lives tir dúvidas ou lives com assuntos sobre negócios lives Com entrevistas de pessoas que já estão faturando alto com no code e também muitas oportunidades de mercado isso acaba sendo uma excelente oportunidade para você fazer Network e tá ali mais próximo da gente e além de tudo isso nós temos as nossas inteligências artificiais nós temos robozinhos de várias ferramentas onde a gente treinou as nossas ias com toda a documentação da ferramenta para elas
ficarem especialistas naquela ferramenta e Conseguirem te responder aí ó qualquer tipo de dúvida Afinal a gente treinou com 100% da documentação daquela ferramenta então se você tiver alguma dúvida de flutterflow você pode acessar a i do flutterflow e tirar qualquer tipo de dúvida técnica também temos aí a do supabase e além também de tirar as dúvidas e escrevem código para você e te ajudam nos seus projetos então a gente não só tem a do flf supa base mas de várias e várias outras ferramentas no Code E aí se ainda fica alguma dúvida sobre a qualidade
da formação eu quero também te mostrar alguns de nossos feedbacks que a gente recebe aqui diariamente então aqui por exemplo a gente teve o Samuel que criou um painel aí ó super bonitão já colocando nas ruas temos o Cleiton falou que como ele tá conseguindo monetizar com no code e aqui olha criado as primeiras assinaturas do SAS que ele criou do zero e não para por aí a gente tem muitos e muitos feedbacks No YouTube a galera sempre dando feedbacks muito positivos sobre a nossa didática sobre Nossa estrutura a gente tem o Christopher aqui que
falou Quem tá na dúvida adquirir a formação FL Flow tô no começo mas vale cada centavo a didática do professor é excelente a plataforma é bem intuitiva e organizada então a gente pensou em toda estrutura para Realmente você aprender da melhor forma possível né E além disso das aulas aqui tem o Mateus por exemplo que ele Falou que tava curtindo e ele falou curtindo eu tô fazendo grana com esse conhecimento aplicado então sim você consegue fazer dinheiro criando aplicativos exas com as ferramentas no code E aí a gente tem vários e vários feedbacks tanto da
formação dos nossos vídeos do YouTube mas que comprovam a nossa qualidade Nossa estrutura didática e eu vou deixar o link aqui embaixo e eu te convido fazer parte da formação e entrar pra família no code Startup Lembrando que além de tudo isso você também tem a garantia de 7 dias ou seja você pode testar vê se você vai curtir didático e toda a estrutura do curso e se não curtir é só entrar em contato com a gente que a gente devolve 100% do valor que você pagou então sem risco nenhum e ficamos por aqui te
agradecer imensamente por ter acompanhado até o momento não se esquece de comentar aqui embaixo e deixar qualquer dúvida que a gente responde todas as dúvidas e te Vejo nos próximos vídeos foi um prazer estar contigo durante esse curso inteiro e bora aprender no code Bora lá valeu
