Unknown

fala pessoal beleza como é que vocês estão Vamos iniciar aqui mais uma live aqui no YouTube eu tô aqui com o pessoal do zoom pessoal do e do start flow do curso né do acelerador acelerador low code Ah vocês que estão no YouTube eu quero que vocês me digam se o áudio se o áudio tá bom se a imagem tá boa Tá escrevam aí para mim a gente vai começar a Live sempre depois que vocês garantirem aí der o sinal verde que tá tudo certo beleza pessoal vamos começar então Eh como já falei aqui pro

pessoal do zoom essa Live aqui é uma live do start Flow pessoal do start Flow tá participando comigo aqui eu sempre eh tiro dúvidas depois da aula tá com o pessoal que é no acelerador também pode entrar eu coloquei o link lá na comunidade Inclusive eu sempre eu sempre mando o link na comunidade e também no grupo do WhatsApp do do start Flow para vocês entrarem aqui tá hum eh Lembrando que a gente encerrou as vagas pro acelerador low code eu não sei se vocês viram na no site tá vagas esgotadas a gente encerrou as

vagas quem quiser ter acesso agora ao curso só pelo WhatsApp tem que entrar no WhatsApp conversar com a equipe para ver se tem vaga disponível tá a gente não tá mais vendendo o curso eu falei para vocês desde no mês passado que a gente ia fazer isso e a gente tá fazendo a partir da semana que vem nós iremos fazer uma nova formatação do acelerador low code na terça-feira iremos fazer aqui uma live um evento onde iremos apresentar para vocês é um um super sistema de agendamento que nós estamos criando conectados com inteligência artificial que

vai atender no WhatsApp vai marcar o agendamento de forma automática vai verificar o agendamento tá ficando realmente incrível Beleza o sistema não vou falar sobre isso aqui semana que vem vocês vão ver e vamos também eh a anunciar a nova formatação né do acelerador pessoal aqui embaixo na descrição do vídeo do YouTube você vai ter acesso ao link do start Flow 12 vezes de 9,67 para você iniciar nesse universo e também vai ter o link do evento da semana que vem chamado A bússola a bússola porque a gente vai mostrar para vocês o caminho tá

é só clicar aqui embaixo e se inscrever bom que que a gente vai fazer hoje nessa aula aqui deixa eu compartilhar minha tela com vocês para vocês verem tá vocês estão vendo minha tela que tela que vocês estão vendo o estão vendo o flat Flow né Deixa eu tomar uma água aqui ok desculpem muito bem pessoal então eu vou mostrar para vocês aqui o flutterflow aqui ó isso aqui que vocês estão vendo é um sistema de agendamento a gente vai aprender a criar nessa aula na verdade não é um sistema de agendamento isso daqui isso

daqui é uma lógica de agendamento assim como eu falei para vocês aí no vídeo inclusive né no título do vídeo a gente vai entender Qual que é a lógica para criar esse tipo de coisa aqui é bem simples vou escolher aqui por exemplo ó dia 9 de não de Maio que é amanhã se eu marcar por exemplo 17 horas clicar nesse botão aqui ele vai agendar esse horário e aqui repare que ele já ficou marcado em alaranjado indicando que tá indisponível então quando eu clico aqui novamente repare que o botão de agendar nem fica mais

clicável né se eu clicar em outro eu posso clicar se eu clicar nesses que for aqui e pré-selecionados pré-agendados a gente não consegue mais clicar nele tá Então é isso aqui que a gente vai aprender nessa aula beleza Alguém tem alguma dúvida alguém quer perguntar alguma coisa Aproveite agora o ces para sempre inclusive esse projeto que eu acabei de criar eu vou deletar vai fazer do zero então lógica agendamento vou clicar aqui ok delete o projeto vou criar um projeto novo com o mesmo nome lógica agendamento vou colocar dois não sei se o FL flou

ele salve em algum lugar esses nomes aí OK vou clicar em Skipe muito bem aqui está então o nosso projeto do flutterflow totalmente em branco Eh vamos lá deixa eu ver aqui nenhuma pergunta Ok áudio tá bom tudo certo o David também tá ali hoje não vai poder participar mas já deixou o like né pessoal que tá no YouTube Deixa o like no vídeo tá deixa o like no vídeo isso ajuda bastante aqui o nosso canal publicar expandir para outras pessoas que também querem eh que também precisam aprender flutterflow beleza pessoal gente então aqui é

o seguinte aqui vocês estão vendo a minha tela temos aqui uma página chamada homepage eh inclusive vou até nomear isso daqui como ã agendamento agendamento e a primeira coisa que eu coloco aqui vai ser é um calendário então vou clicar aqui nessa coluna e vou inserir o calendário Calendar widget Calendar aqui está ele ficou aqui ele tá grande eu vou clicar sobre esse calendário e na janela de propriedades do lado direito eu vou marcar essa opção aqui ó Week View no lado direito para marcar que ele apareça Justamente a semana tá para não ficar o

mês inteiro a gente consegue ter aqui somente o que a gente precisa aqui a semana essa coluna aqui eu vou colocar um p aqui 12 pixels para não ficar grudado perfeito aqui está o calendário e aqui embaixo desse calendário eu vou colocar uma Grid View essa Grid View é um um um elemento né que se repete da mesma forma que uma list View você já Vocês já conhecem né a Grid View e aqui dentro da Grid View eu vou colocar um wied um contêiner eu vou só pintar esse contêiner com uma corzinha diferente pra gente

poder enxergar OK tá meio verdinho laranja meio cinza e aí eu vou formatar aqui uma borda arredondamento de borda raio de borda né tô fazendo um pouco rápido essa parte porque isso aqui é é é de prá né padrão você sabe fazer perfeito dentro desse contêiner eu vou colocar eh uma coluna Aqui está a coluna e um texto aqui dentro esse Tex eh tá dentro da coluna vou inclusive centralizar Isso aqui vai exibir somente a hora que vai tá aqui agora vou clicar sobre a list View a grd view aliás e aqui ó tem uma

propriedade chamada Cross aess count essa propriedade mostra eh a quantidade de elementos que vão ficar no eo cruzado que seria a horizontal o eixo principal é a vertical né aqui ó Axis Então vou colocar quatro porque daí aqui eu consigo colocar quatro elementos tá aí Diminui um pouquinho o tamanho deles perfeito como que eu faço para preencher essa list viw aqui com horários que vão por exemplo das 8 horas da manhã até às 22 horas eu preciso preencher de alguma forma geralmente a gente conecta isso com banco de dados ou através de uma variável que

tem uma lista o que eu preciso aqui é ter uma lista de horários Só que essa lista de horários é uma lista de horários sempre do dia então se eu clicar por exemplo em quarta-feira eu quero que ele me traga uma lista de horários de quarta-feira se eu clicar na quinta-feira assim por diante eu quero que ele Coloque aqui como que eu consigo gerar uma lista de horários através de uma função nós iremos criar essa função eu vou clicar aqui no chat GPT aqui no dataset Apps Então esse aqui é o nosso chat GPT quem

não acessou sou É só você ir lá no GPT 4 e pesquisar ele dataset apps EA ele é treinadinha para responder perguntas sobre floter Flow principalmente eh principalmente funções Dart para floter Flow tá eu treinei ele ele sempre faz bem certinho e também ele entende um pouquinho de eh AD functions também tá mas treinei só H pouco e também funções s k bom aqui vou falar para ele o seguinte ó preciso preciso de uma função Dart que receba uma data de referência e retorne uma lista com horários das 8 às 22 horas com intervalo de

1 hora é sempre bom você bem claro para ele e fornecer exemplos de como que você quer que a função se comporte eh exemplo será passada a data 805 2024 224 então a função retorna o seguinte ó então se eu passar por exemplo a data 8 de Maio eu quero que a função retorne o seguinte 8 de Maio 2024 8 horas da manhã depois 8 de Maio 2024 9 horas da manhã vírgula aí reticências até às 22 horas control ctrl v aqui 22 horas tá para entender como que tem que ser o formato E aí

eu vou falar para ele que o argumento passado será no formato time stamp beleza vamos deixar ele trabalhar aqui agora ele vai criar a função pra gente ó e aí que você o que você pode observar é que ele ele traz a resposta exatamente como que o floter flow exige Como que o floter flow trabalha então por exemplo ó Passos um nome da função Então você vai copiar o nome da função você vem aqui e cola ó clica aqui esse é o primeiro passo ok passo dois Ó tipo de retorno é uma lista do tipo

date time então aqui você vai colocar que o retorno ó é uma lista do tipo date time então date time e é uma lista tá porque foi o que eu pedi para ele eu quero que você me retorne uma lista de horas do tipo dat time e list Fica marcado e nullable fica desmarcado então muito bem então is list marcado e nullable desmarcado seguindo argumento de entrada reference date então ele criou aqui um argumento que a gente vai passar para ele então esse argumento vamos clicar aqui ó esse é o nome do argumento e é

do tipo date time também ó desmarcado como ele tinha falado pra gente e aí el fala agora aqui tá o código Beleza então eu vou copiar esse código aqui ó até esse return aqui daí eu colo aqui pronto vou clicar em save salvou se você fizer exatamente como ele tá falando para você fazer pessoal ó aqui vou testar a função vou clicar aqui ó em Run e ele trouxe uma lista de horas tá ó começando lá no dia 5 do 8 de Maio né às 8 horas da manhã até às 22 horas Ok então quando

você usa o nosso Nossa ia aqui que funciona de verdade tem um monte de a por aí que não funciona a nossa funciona é só seguir o passo a passo que você não vai ter problema ela vai funcionar Beleza vou clicar em save aqui Eh vamos testar isso daqui na prática agora como que eu testo na prática eu vou clicar nessa Grid View aqui vou clicar aqui em generate dynamic Children aqui vou colocar itens pode ser e aqui ó eu vou pegar a função ó Custom function vou clicar aqui ó em generate our our times

a data de referência é a data que tá no calendário tá ó widget state Calendar select Day start o start é meia-noite o end é 2359 para quem não sabe perfeito vou clicar aqui em save E aí Isso aqui ele vai gerar pra gente muito bem nesse elemento de texto eu quero colocar a hora que está aqui vou clicar então em it item e vou formatar date time Format para que apareça desse jeito aqui ó hora minuto vou colocar um valor padrão aqui vou colocar a hora confirmar Vamos colocar aqui para ele compilar e a

gente vai testar Beleza beleza então ele testou eh esse aqui eu acho que era o aquele outro que eu deletei inclusive né Vamos clicar aqui ó para ele compilar aí pra gente vamos esperar agora então ele carregar deixa eu ver aqui o chat no Zoom como é que tá Ricardo Ricardo Cardoso Valério Ana Evandro Adriano Vittor Mauro Miguel Rodrigo Priscila Sebastião bastante gente no Zoom hein mangas Silvio também tá aí Maravilha pessoal Maravilha Priscila minha primeira vez aqui Alguém poderia me dizer como ativar o som Priscila o som ele fica desabilitado tá bom o som

de todo mundo fica desabilitado no zoom para não no começo a gente deixava obgado mas aí tinha muito problema de pessoas falando no fundo cachorro latindo a a gente parou com isso eh quem quiser quem tiver uma dúvida é só você levantar a mão tá então aprc L acho que é nova eh tem dúvida você vai ali embaixo no Zoom você clica na reação e levanta a mãozinha que daí o Vitor ele libera o som para você se pergunta fechou excelente tá pessoal T respondendo o zoom aqui inclusive vou deixar aqui o Meu Whats ligado

aí se caso o Vittor queira falar alguma coisa que a gente tá o vctor lá na outra sala agora vou deixar ele ligado aqui o fato é o seguinte pessoal estão vendo aqui a tela ele acabou de gerar pra gente o a os horários tá Então olha só das 8 horas da manhã até às 22 horas então embora então embora apareça apenas 8 9 10 esses horários aqui são 8 horas da manhã do dia 8 9 horas do dia 9 e assim por diante são horários com dia né Sempre date time hora e data sempre

tem que ser assim poss trabalhar com data essa é uma dica que eu dou com vocês sempre que for trabalhar com data e hora sempre você vai trabalhar com data e hora juntos mesmo que só vai aparecer 10 da manhã 13 na verdade isso é uma data que uma hora aí quando obviamente quando eu clico aqui ele atualiza tá tá perfeito então aparentemente inicialmente eh é isso daqui que a gente precisa vou colocar um botão agora aqui que vai ser para salvar lá no banco de dados então vou clicar aqui ó Nessa coluna vou clicar

aqui ó nesse botão aqui está o botãozinho deixa eu aumentar o tamanho dele agenda agendar ótimo quando eu clicar no botão agendar eu preciso agendar esse horário que eu salvei para isso eu preciso saber qual o horário que eu agendei tá bom para eu saber qual que horário que eu agendei eu vou criar uma variável aqui [Música] emate Management aqui ó clicar em Field vou criar uma variável chamado hora clicada que vai ser do tipo date time também ok E aí sempre que eu clicar no contêiner por exemplo eu vou clicar aqui nesse contêiner eu

vou colocar o valor que tá no contêiner nessa variável então vou clicar aqui Open add Action eu vou atualizar a variável update page state a variável hora clicada Qual que é o valor da variável hora clicada é o valor que está no no é aqui ó ir item que é o lugar que eu cliquei que já é do tipo date time também perfeito ótimo né então agora eu já posso clicar Então sempre que eu clicar aqui ele vai trazer pra gente ele vai salvar na variável a hora que eu cliquei vi uma pergunta do Silvio

como passar o horário dinamicamente sendo horário Inicial e final eh ah entendi isso aí a gente vai aprender no Mega sistema que eu tô desenvolvendo para vocês beleza Silvio que vai est no acelerador low code a partir da semana que vem talvez ali sim você vai poder escolher horário de início e de fim da Clínica os profissionais horários de folga também vai ter tudo isso aí tá então Não se preocupem aqui eu vou ensinar para vocês a lógica para você fazer isso Entendendo entendendo aí a lógica eh você consegue depois fazer o que você quiser

se você entender a lógica isso que é mais importante Então olha só eu posso clicar agora então sempre que eu clico né ele vai colocar o valor clicado na variável uma coisa que o pessoal sempre pergunta como que eu faço para quando eu clicar ele ficar pintado hã ou pintado não ou de uma cor né diferente vou clicar nesse contêiner aqui e aqui ó em border color eu posso colocar uma borda uma cor de uma borda por exemplo pode ser essa aqui ó ó azul repar que a borda tá azul eu vou até inclusive aumentar

um pouco o tamanho dessa borda a grossura da borda aliás Cadê a grossura da borda aqui ó border dois agora tá bem destacada mas eu não quero que fique todos pintados né Eu quero só quando eu clicar então é o seguinte ó esse Vou tirar e na verdade eu vou colocar aqui ó uma uma condicional vou clicar bem aqui em conditional value qual que é a condição para que a borda fique Azul hã Alguém sabe pessoal que tá no YouTube aí pessoal que tá no Zoom Com base no que foi feito aqui até agora qual

que é a lógica que eu utilizo aqui para quando eu quando eu clico ele fica com a borda Azul vamos ver pego pego o Silvio falou pego e comparo com a appstate show de bola Adriano se o item tiver o mesmo valor da variável armazenada exatamente Robson hora selecionada igual hora do item perfeito Pessoal vocês estão muito bom hein Se o state set n Augusto aqui você deu uma vilad Mas é por aí também tá certo já vou falar por que essa essa essa tua resposta não tá perfeitamente correta Fernando se o o valor da

variável for set not emp é você respond a mesma coisa que o Augusto em alguns casos funcionam então basicamente vocês acertaram tá todos vocês acertaram eh A lógica é a seguinte você lembra que eu tenho uma variável chamado hora clicada quando eu clico no contêiner ele coloca nessa variável a hora que tá no container então aqui eu simplesmente vou verificar eh se o valor que tá no container é igual ao que tá na hora clicada né então vou clicar aqui ó conditions primeiro valor é o que tá no contêiner é Esso aqui ó sempre né

itens Iron se isso é igual ao que está na hora clicada na variável ó page state hora clicada então muito bem então se for igual aí vai pintar a borda de azul ó aí se não for eu posso deixar ass sem cor mesmo perfeito vamos testar então Augusto eh verdade se fizer como falei Pode deixar todas as outras horas marcar Exatamente é isso mesmo Augusto ia falar mas você já acabou de falar se você se você faz daquela forma Todas as Horas iriam ficar clicadas eh aliás pintadas tá eh é o seguinte pessoal então vocês

estão vendo aqui ó ó eu clico ele consegue pintar né Eu não sei se vocês conseguem ver pelo YouTube ou pelo zoom esse efeito acontecendo Então essa aqui é uma forma bem simples né de a gente fazer esse tipo de coisa eu sempre vejo o pessoal com dúvida como é que faz como é que faz é bem simples pessoal você coloca uma condicional ali cria uma variável e ótimo E agora para agendar Hã eu já sei a hora clicada Cliquei no botão eu salvo essa hora clicada no banco de dados vamos lá então vamos acessar

o SP base eh vou entrar aqui ah eu até tinha uma tabela aqui mas eu vou criar uma nova vou chamar de reserva reservas e vou colocar apenas um campo tá vocês podem colocar mais obviamente Vou Colocar assim ó data data reserva esse campo vai ser o tipo time stamp time stamp time stamp TZ que é o time Zone eu já ve pessoal colocando time stamp ou time TZ ou time sempre ponha time temp TZ hora e data esse TZ inclui a zona a zona local no caso Brasil 3 horas a mais menos né do

que horário universal é claro que você pode colocar muito mais campos aqui por exemplo quem está agendando para quem Qual a descrição do agendamento Ah é para isso é para aquilo outro eh não é o caso agora que a gente vai trabalhar apenas com a questão da lógica como eu falei para vocês vou clicar em salvar aí aqui vocês vão precisar prestar bastante atenção no que a gente vai fazer porque tem um problema de fuso horário aí o pessoal se Bate bastante Então a primeira coisa que eu quero fazer aqui é habilitar a política de

segurança clicar aqui e Create policies aqui vou colocar o nome qualquer aqui all aqui a gente vai colocar verdadeiro true e marcar muito bem criamos a nossa política de segurança Vamos conectar esse [Música] aqui base inclusive vamos clicar aqui api conectar com Flow né isso aqui vocês sabem fazer aqui ó su base ah Israel tá indo muito rápido pessoal Essa não é uma aula para iniciantes por ISO que indo um pouquinho mais rápido que o normal aqui é o RL e aqui a nossa chave pública chave anônima cola aqui ó get skima beleza trouxe as

tabelas aqui está a tabela horários ó aliás tabela reservas muito bem Ah agora quando eu clicar no botão agendar eu quero salvar no banco de dados a hora clicada então vou clicar aqui vamos clicar em add Action insert Row aqui ó vai clicar em insert Row aqui qual tabela tabela e reservas Quais quais Campos agora o campo ID ele é automático creade at também iremos nos preocupar apenas com a hora da reserva né Obviamente você poderia ter outras informações aqui como eu já falei para vocês é quem agendou para e quem agendou é descrição do

agendamento etc qual que é a hora reserva pessoal que eu tenho que colocar aqui hum é a hora clicada né então vamos clicar aqui e a hora de agendamento é a hora clicada vamos clicar aqui em page state hora clicada tá confirmar já vou avisando vocês que que a gente vai ter que voltar aqui para alterar isso aqui então eu vou clicar aqui eh vamos botar uma Snack Bar dizendo que a foi agendado agendado com sucesso então perfeito vamos compilar mais uma vez e testada aí tá da Instant Reloaded Vamos esperar né pessoal enquanto ele

tá compilando aí podem fazer perguntas aqui no Whats tá no what não no no Zoom quem tá no YouTube pessoal tá no YouTube Deixa o like aí ó tem 37 likes tá quem não deu like ainda deixa senta o dedo no like para Compartilhar esse vídeo compartilhar o nosso canal para mais pessoas que querem aprender preciso aprender de verdade não sei porque que tá demorando tanto também isso aqui para carregar agora Beleza então eu vou clicar por exemplo aqui ó T 8 horas da manhã beleza vou clicar no botão agendar ó agendado com sucesso apareceu

agendado com sucesso e aí vamos voltar para cá editor vamos clicar aqui em reservas e aqui está o nosso horário agendado beleza eu acho que até aqui pessoal todo mundo consegue fazer tranquilamente qualquer pessoa que pegar para fazer eh sozinho vai conseguir fazer ok muito bem qual que é o problema aqui agora o problema é isso daqui ó eu não consigo dar zoom aqui a a até tentar dar um zoom aqui para vocês verem bem que que eu tô fazendo aqui vocês estão vendo isso aqui que tá aparecendo aqui isso aqui eu acho que é

o máo que eu cheguei de zoom Isso aqui é uma uma hora eh num formato ISO 8609 se eu não me engano é um horário universal é um é um formato universal de horas quando você faz uma chamada via api por exemplo sempre vai vir nesse formato aqui eh 24 Maio Aqui nós temos 8 dia 8 8 de Maio 8 horas da manhã tá mais esse mais aqui é o quê alguém sabe mais Zero Isso aqui é o fuso horário fuso horário esse mais zero quer dizer que esse horário 8 horas da manhã é o

horário UTC aquele horário universal que é o horário zero o Brasil é os3 então esse horário 8 horas da manhã que está aqui não é o horário que nós selecionamos aqui isso é um problema quando eu seleciono 8 horas da manhã aqui no floter flow e salvo no banco de dados ele está enviando 8 horas da manhã como se fosse horário universal só que não é horário universal a gente não quer horário universal esse horário aqui é horário de Brasília então quando eu clico aqui ó duplo clique repare que tá 5 horas aqui ó tá

então quando você dá um duplo clique ele vai mostrar para você o horário local então Brasil 5 aqui seria 5 horas da manhã tá aqui tá 8 horas então quando eu lanço um horário para cá eh eu tenho que converter lá no flutterflow esse horário para horário UTC porque daí ele vem para cá como 11 horas da manhã que seria o horário universal 11 horas da manhã e horário do Brasília 8 horas da noite aliás da manhã também então sempre o suab sempre trabalha com horário UTC sempre você vai jogar uma data no supabase sempre

tem em mente disso você vai eh salvar um resultado de data no supabase o supabase sempre vai entender isso como horário UTC que é 3 horas a mais do que o horário brasileiro isso gera muito problemas Ah vamos fazer vamos criar uma função aqui para ele converter esse horário na hora de salvar pro horri vcar aqui em codear aqui function escrever ass ess é nome da função essa função vai retornar uma datae eé momento que também é uma data né que é a data que eu quero converter essa data também é um date time ótimo

aí aqui dentro eu vou colocar assim ó return eu vou pegar essa data que tá aqui ponto tu UTC aí abre e fecha parênteses e ponto e vírgula aí salva né Isso aqui é bem simples tá por isso que eu eu Nem usei o já GPT depois eu vou colocar Essas funções aqui na descrição do vídeo tá para vocês é só o que tá dentro da função né isso aqui vocês olham o vídeo e fazem sozinho muito bem então essa função aqui ela ela converte uma uma hora uma data uma hora para horário UTC Isso

significa que quando eu for clicar em agendar para salvar no banco de dados ó estou salvando a hora clicada certo ao invés de salvar a hora clicada eu vou pegar a função que eu criei que é essa aqui ó H otc E aí eu passo como referência nessa função a hora clicada que daí ele vai pegar a hora clicada vai converter pro horário UTC que é o que o supabase trabalha e vai jogar lá clicar em confirmar pronto aí vamos testar agora descompilar de novo aqui ó eu vou clicar 8 horas da manhã vou clicar

em agendar ag agendado com sucesso Você viu que agora ele veio como 11 horas ó então o que que aconteceu na prática lá no supas no flutter flow quando eu selecionei 8 horas 8 horas da manhã eu estou selecionando 8 horas da manhã no Brasil eu quero horário brasileiro Então na hora que eu vou salvar isso no banco de dados ele converte para horário horário UTC por qu porque quando é 8 horas da manhã no Brasil é 11 horas no horário Inter Nacional então aqui sempre tem que chegar o horário internacional agora se eu der

um duplo clique aqui ó ó 8 horas da 8 horas né que seria o Brasil Beleza tem que ter isso aqui beleza galera tem que ter isso aqui essa primeira eu vou deletar então isso aqui é o tipo de coisa assim que faz total diferença que faz total diferença na hora de você criar um um sistema um aplicativo que trabalha com horas e não tem como passar o horário já com o menos tr no final ah não entendi você no caso é não daria certo na verdade não é com menos TR seria mais TR né

mais TR porque é assim ó aqui no no floter flow no spase ele vai trabalhar sempre com esse horário mais zero aqui aí quando você dá um duplo clique é que ele aparece o horário eh local né que é o Brasil é essa é a forma que o super base trabalho você diz né colocar aqui ó mais bem aqui ó colocar mais três né dá para fazer um teste dá para fazer um teste nunca testei isso eu sempre prefiro converter lá e trazer convertível vamos fazer mais alguns cadastros agora pessoal pra gente só poder pintar

os que já estão cadastrados então eu vou pegar 11 horas vou clicar em agendar também eh 16 horas eu vou clicar também em agendar e 19 horas também perfeito e aí ele vai salvar aqui esses três horários tá eh então 8 da manhã aqui 11 horas da manhã 16 horas e 19 horas tá agora Como que eu faço para pintar os valores que já estão no banco de dados para que eu não não possa agendar mais uma vez porque eu posso clicar aqui em 8 horas da manhã clicar em agendar mas já foi agendado para

esse essa pessoa para esse estabelecimento em questão Essa é a próxima fase do projeto alguém tem alguma eh vocês estão me vendo aqui né que é isso aqui de só arrumar uma configuração aqui que apareceu aqui que tá em espanhol tá beleza pessoal vocês estão vendo eu ou minha tela est vendo eu né estão vendo eu tá me digam aí vocês eh como que eu faço agora para eh pintar os horários que já estão agendados para que eu não possa agendar um horário duplicado Qual que é a lógica que eu tenho que utilizar aqui é

uma lógica parecida com essa que a gente acabou de utilizar para pintar a borda hã Cadê o deixa eu ver as perguntas aqui thas como passa o app para o vs code e pessoal e não entendi a pergunta do Thomas não sei se tá conversando com alguém mas a pergunta nada não tem a ver com a aula né Thomas você baixa o o baixa o código fonte e abre oiv code É assim que você passa pro pro V code você vem aqui baixa o código fonte e abre oiv code tá deixa eu ver aqui as

perguntas no e deixa eu ver aqui no Zoom Como que eu faço galera para pintar os horários que já estão agendados hã ninguém respondeu né Vamos lá então vamos fazer isso daqui agora vou compartilhar minha tela com vocês mais uma vez e e aqui é o seguinte eu preciso fazer um filtro fazer uma busca no banco de dados e trazer as horas os horários que foram agendados E aí eu faço essa comparação aqui então eu vou criar uma variável aqui ó chamada horas agendadas eu vou clicar essa variável é do tipo date time é uma

lista também porque é uma lista de horas agendados que vai trazer banco de dados perfeito agora eu preciso preencher essa lista e eu vou preencher essa lista em três situações distintas quais são elas a primeira situação em que eu vou preencher a lista de horas agendadas é no carregamento da página essa é a primeira situação carregou a página eu já tenho que saber quais são os horários que já foram agendados para aquele dia A segunda situação em que eu vou ter que preencher essa lista é quando eu clicar no no calendário então troquei de data

ele tem que buscar essa os horários daquela data e preencher mais uma vez a lista Já são duas e a terceira situação é quando eu clicar no botão agendar então quando ele agenda no no banco de dados uma data nova eu preciso atualizar essa lista de horários agendados então como eu vou preencher essa lista três vezes em situações distintas a gente vai criar um Action Block clicando aqui em Actions Action Block o Action Block é uma ação que eu deixo Salva para que eu possa utilizar ela em momentos oportunos no meu projeto essa Action Block

é do tipo do escopo de página page level porque vou utilizar variáveis que são page States vou clicar aqui em Create Action Block e vou chamar isso aqui de buscar horas vou clicar em Create Ok buscar horas E aí qual que é a ação que eu vou executar aqui ó é uma ação de busca no banco de dados Carry Rose ó Carry Rose eu vou buscar lá na tabela reservas então lá na tabela reservas eu vou buscar as horas que já foram agendadas só que eu vou buscar todas as horas que foram agendadas não se

eu tiver 50 000 agendamentos vou buscar todos não eu vou buscar os agendamentos da da data que tá no calendário Então se no calendário tá o dia 10 eu quero os agendamentos do dia 10 tá dia 20 quero do dia 20 então para isso eu vou aplicar um filtro aqui ó e nesse filtro eu vou utilizar como critério a data da reserva tá só que é o seguinte ó Qual que é a data da reserva no meu banco de dados eu não tenho uma data da reserva eu tenho horários de reservas então aqui eu preciso

aplicar um um filtro que seja um filtro de intervalo então se eu quero buscar os agendamentos por exemplo do dia 8 que é o caso que está aqui eu tenho que falar para ele o seguinte busque os horários agendados do dia 8 a partir da meia-noite até às 23:59 é um intervalo de tempo então tudo que for nesse período ele vai trazer ele vai buscar no banco de dados eh só que aí tem o problema do fus ário também se eu clicar aqui ó em a a data da reserva tem que ser maior ou igual

ó greater than or equal to tem que ser maior ou igual a data que está no calendário ó widget state Calendar select Day start lembra-se que esse start é meia-noite só que aqui esse start meia-noite é o horário universal ele vai chegar lá como horá Universal Então eu preciso já converter vou clicar aqui e vou converter aqui ó que a nossa função Custom function or UTC agora que eu pego o horário do calendário widget state Calendar select Day start então pegue os horários do banco de dados que são maiores ou igual a hora de início

do que tá no calendário Então se tá no calendário dia 10 ou dia 8 vai pegar do dia 8 meia-noite aqui você põe no further Changes adiciona o filtro e aqui coloca mais uma vez data reserva e aqui ó é less than or equal to menor ou igual menor ou igual a mesma coisa a data que tá no calendário vamos vamos converter essa data aqui a data que tá no calendário então Eh widget state Calendar select Day só que agora é o final do dia aqui também bom então isso daqui vai no banco de dados

vai buscar o filtro com as horas agendadas daquele dia aí eu vou nomear ISO aqui como horas vez que el busca estas informaões agora eu possar aess query e no nos vari então aqui update P state vamos clicar aqui horas agendadas eu quero colocar nessa lista o valor que veio da consulta então aqui ó Action outputs out horas clica aqui e v pegar a linha data Aliás a coluna né data reserva pronto beleza aí isso vai fazer a busca no banco de dados e vai atualizar variável agora em que situação é que eu vou utilizar

isso daqui né que eu falei para vocês no carregamento da página então no carregamento da página Vamos clicar aqui agora em Actions então aqui no one page load Vamos colocar o nosso aqui embaixo ó Action Blocks põe essa função e marca aqui ó update page After para atualizar a página quando eu clicar no calendário a mesma coisa vou clicar no calendário Vamos colocar também a mesma buscar horas ó update page After acanha aqui e a mesma coisa no botão de agendar então no botão de agendar Quando eu fizer um agendamento eu já vou clicar aqui

em add Action Block aqui embaixo buscar horas update page After Beleza então isso que a gente fez eh busca no banco de dados daí as horas agendadas para aquele período do dia e salva na lista enquanto ele carrega Como que eu faço agora para pintar esses esses ah contêiner com as horas que já foram agendadas basta que eu faça uma verificação para saber se essa hora aqui está dentro da lista que eu busquei então aqui ó em fio color ó fio color Vamos colocar aqui ó em conditional value a primeira condição é sinala então aqui

em page state horas agendadas está contido então list contains está a hora que tá no contêiner então se a hora que está no contêiner tá contida na lista que eu busquei do banco de dados esse cara vai ficar alaranjado perfeito caso contrário ele vai ficar verde que é o que tá aí digamos disponível beleza dá um Instant Reloaded beleza galera então todos os horários que a gente agendou Ele pintou de vermelho tá gostaram se eu clicar 22 horas e clicar para agendar ele pinta de vermelho legal gostaram da nossa lógica de agendamento simples né em

50 minutos a gente fez legal alguma dúvida perguntem agora oou cálice para sempre Adriano me homens tá com uma dúvida beleza Eh eu não sei quem que tá no Mateus libera o microfone do Adriano por favor quer dizer não sei se ele queria fazer uma pergunta se quiser levanta a mão de novo a Adriano né Não sei se era uma pergunta ou se não era é ele tá com a mão levantada Mateus vai liberar o teu microfone Então aproveita Boa noite a todos boa noite a todos aproveitar a oportunidade eu tava só aplaudindo tô ouvindo

me ouve bem [Música] pouquinho cara Ok os colegas no chat ouvem eu preciso configurar aqui o meu eu vou ter eu vou ter que descompartilhar a minha tela não eu não tô ouvindo eu não tô ouvindo porque eu tô com meu meu som tá saindo do computador espera um pouco aí deixa eu clicar aqui no altofalante [Música] altofalante Agora sim beleza agora sim pode pode falar agora sim agora tô ouvindo Boa noite a todos B Boa antes Eu tava só aplaudindo mesmo mas já que me deu oportunidade eu vou a tava para falar Eh eu

pontuei duas coisas ali Poxa enche o saco esse negócio do flute Flow tem que ficar pedindo o tempo todo para você recompilar uma uma Custom function lá que você já salvou e sequer fez alteração nela né Um Dos comentários que eu coloquei ali agora voltando para para uma observação sobre isso é o seguinte eu vi ali que na curs na na na no Action Block você faz a consulta Então se esse Action Block for usado em em nes ocasiões em n ocasiões ela faz uma requisição no banco de dados né Um pouquinho de um pouquinho

de de amadurecimento no código a gente conseguiria por exemplo ao salvar Ao invés dele ir lá e fazer outra requisição a gente já aproveitar a requisição de salvamento para trazer os dados do que já tá lá no banco de dados o supabase não tem essa funcionalidade por exemplo eu quero saber o último registro que eu acabei de inserir então é possível a gente através de uma requisição enviar dados pro supabase e salvar e no retorno dessa né dessa requisição ele já trazer a lista atualizada a gente economizaria aí uma requisição né junto a supabase aham

não excelente cara excelente pergunta aqui no agendar ó quando você aqui ó no a essa você tá vendo minha tela né perfeitamente aqui no backend Call aqui ó insert Row aqui ó a gente tem o Action output variable name tá vendo aqui sim isso aqui é o que retorna então out agendado agendado isso aqui é exatamente o que está voltando do banco de dados aí você pode pegar inclusive esse retorno aqui e eh ao invés de colocar essa Action block para buscar as horas eu vou testar isso que você acabou de falar cara eh tem

uma propriedade Extra que tem que colocar lá né na requisição é um detalhe bobo mas é uma possibilidade que já economiza bastante meso T inserindo aqui inserindo E aí aqui eu vou clicar aqui ó em Action eu vou atualizar daí a variável P state que é essa aqui horas agendadas só que daí eu vou inserir um valor nessa variável que é o que voltou do banco que é o que ele agendou clicando aqui ó Cadê o Action outputs ó out agendado data reserva entendeu então aqui eu não preciso consultar na hora que eu clico no

botão agendar eu não vou precisar consultar mais uma vez o banco de dados porque ele agendou e já retornou eu pego essa data e coloco aqui isso aí vamos testar Eu só não vou eu só não sei se o que volta é o fuso horário comp né aí eu não sei aí eu também complica pergunta difícil também né É mas aí a gente tem aquela a gente tem aquela função Zinha ali vou dar um inst Reload mais uma vez aqui eu passei por isso recentemente inclusive foi a foi a equipe de vocês que que que

me ajudou com isso eu tava com uma dúvida eu falei cara como que eu faço isso E aí uma vez que absorveu já era cara funcionou perfeitamente perfeitamente Cara essa tua dúvida já leu Valeu como ensinamento já porque olha a velocidade que acontece aqui ó eu vou clicar no botão agendar vai ficar instantâneo ó instantâneo ele ficou is aí perfeito cara show de bola pergunta hein dá para fazer isso dá chamada api também eu passei aquele dia no grupo lá para vocês né quando você faz uma chamada api noab no su Bas para você mostrar

o retorno você coloca aquela aquele isso exatamente foi ali que que eu peguei essa sacada falei rapaz isso aqui me ajuda demais com as requisições min show de bola cara perfeito valeu valeu Adriano tiver mais alguma dúvida pessoal podem aproveitar Levanta a mãozinha aí aí o Mateus libera microfone de vocês que F fazer aqui agora pessoal é o seguinte fazer agora é a gente de indisponível Binho agendar sempre que eu selecionar o horário que já foi agendado E como que eu posso fazer isso vou clicar no botão agendar aqui embaixo tem essa opção chamado ó

Button disable options quando eu marco aqui ó eu posso colocar aqui ó uma condicional para que esse botão fique inabilitado qual que é condicional vou clicar aqui ó em page state horas agendadas list Iron eu quero saber se na lista de horas agendadas eu tenho a hora clicada que foi o que eu cliquei no negócio ali então page state hora clicada Ok se essa se isso aqui for verdadeiro então o botão fica desabilitado Vamos colocar uma cor para esse botão aqui ó vamos clicar aqui o botão desabilitado vai ser cinza perfeito e aí aqui eu

posso visualizar ó aqui só visualizo né ele vai ficar assim ó aí eu não consigo nem agendar novamente então vou clicar aqui em Instant reloader ó agora foi viu então quando eu clico no que já foi agendado ó ele não deixa nenhum agendar de novo tá vendo cliquei no verdinho funciona cliquei no vermelhinho ele desabilita aí a gente tem aqui o outro dia Ó então 11 horas da manhã de dia 9 agora Clica lá agendou clicou no meio-dia só snackbar demorando para sair agendou de novo cliquei nas 19 horas agendou de novo cliquei aqui ó

el Ficou ele ficou é inabilitado né Beleza aí sim a gente Vai reservando horários e claro né aí Ah eu quero agendar esse horário aqui com fulano de tal a Mariazinha lá no banco de dados você simplesmente coloca uma coluna com o nome do profissional e na hora de fazer o filtro na hora de buscar a as horas agendadas coloca o filtro da Mariazinha aí você pode ter várias pessoas cada um com seus horários vários profissionais cada um com seus horários e aí se pode obviamente aar para horários iguais desde que para pessoas ou para

profissionais diferentes tudo vai ser com base nesse filtro aqui ok pessoal então era isso pra aula de hoje era isso eu vou encerrar a aula aqui só quero ver aqui o YouTube como é que tá se tem alguma pergunta pessoal do YouTube eh deixa eu ver aqui as perguntas não tem nenhuma pergunta no YouTube né Onde eu posso ver as lives de quarta-feira tá aí no YouTube Gustavo só procurar no YouTube na parte de lives a gente tem bastante lives a gente vai deixando aí show de bola então Maravilha pessoal vou encerrar essa aula Lembrando

que semana que vem nós iros fazer o nosso evento A Bússola Smart Smart Flow on mostrar para vocês apresentar para vocês né as novas oportunidades o nosso novo aplicativo do curso a gente vai colocar lá o aplicativo com sistema de agendamento integração com a inteligência artificial com WhatsApp que ele marca sozinho na agenda verifica sozinho nós iremos apresentar para vocês isso na terça-feira dia 14 para quem é do acelerador vai est disponível para vocês também obviamente passo a passo como sempre a gente faz Lembrando que para se inscrever aqui embaixo no descrição do vídeo você

vem aqui clica se inscreve Ahã as vagas os aceleradores estão encerradas quem quiser ter acesso tem que chamar no WhatsApp a nossa equipe pra gente verificar ali se existe para vocês eh se existe vaga disponível beleza pessoal vou encerrar essa Live então dúvidas põe aqui embaixo na descrição do vídeo quem não é start Flow entra no start Flow 12 vezes de r$ 77 é o melhor é o melhor investimento que vocês podem fazer eh quem quiser aprender a trabalhar com flutter Flow Beleza vou responder aqui as eu tô vendo aqui umas perguntas no Zoom vou

responder o zoom aqui agora pessoal do zoom Então vou encerrar aqui no YouTube beleza pessoal forte abraço e até eh terça-feira então às 19 horas