Como criar um aplicativo que funciona OFFLINE com FLUTTERFLOW

provavelmente a última vez que você ficou sem internet foi naquele voo da Gol em que você teve que ler aquele livro que tava pegando poeira na sua prateleira desde 2015 Mas acredite ou não tem muita gente que passa boa parte do dia sem internet pessoal que trabalha no setor agrícola tá o tempo todo no campo pessoal de cidades afastadas que não podem confiar muito em dados móveis porque não necessariamente pega na cidade quando ele tá fora de casa sem wi-fi ou representantes comerciais então o tempo todo na estrada Então nem sempre eles conseguem ter internet

e se você quer criar um aplicativo para esse público pro público que possa usar o teu aplicativo sem internet ou seja estando offline eu tenho uma notícia muito boa para você o flutterflow acabou de lançar um recurso muito bacana que te permite criar um banco de dados offline ou seja ao invés de você ter que conectar na internet para ir num banco de dados lá na nuvem buscar informações gravar informações sempre na internet com esse recurso do fla-flu que eu vou te mostrar a aula você consegue usar o próprio banco de dados do teu celular

você consegue usar a capacidade de armazenamento do teu celular para gravar informações para buscar informações para modificar informações Vamos ver isso na prática Então pessoal primeiro passo a avisos a gente vai usar como base o super tutorial flutterflow que a gente tem aqui no YouTube já vou deixar o link vou deixar o link na descrição e vou marcar aqui em cima onde a gente criou uma lista de mercado lembra-se disso se você já fez esse tutorial plataforma você vai se lembrar a gente criou o aplicativo henna marketing só que nele a gente usava o Fire

base que é um banco de dados na nuvem para gravar informações e para buscar informações e para modificar informações também quando ele era comprado ou não né Agora vamos fazer a mesma coisa uma lista de mercado só que offline galera então isso aqui vai dar uma dinâmica muito legal para nossa porque você vai conseguir entender realmente os fundamentos de fazer uma conexão com banco de dados na nuvem e de fazer uma conexão com banco de dados local no dispositivo do teu usuário então não necessariamente você precisa já parar esse vídeo e lá fazer o super

tutorial flutterflorista de mercado online pode fazer esse primeiro não tem problema mas depois vá lá assista o super tutorial flutterflow e faça a lista de mercado online pode ser antes ou pode ser depois mas vai te ajudar muito realmente entender as diferenças tá Então pessoal vamos lá passo a passo para criar um aplicativo offline no flutterflow o primeiro passo é o seguinte você vai pegar o link na descrição desse vídeo e clonar o projeto porque isso eu já criei o mesmo aplicativo que a gente criou lá no super tutorial que é o Renan Market só

que aqui é a versão galera offline Então já estão criadas as telas os designs e as navegações tudo para facilitar a gente poder focar mais na parte lógica de banco de dados aqui tá Então você vai pegar esse link que eu vou aqui ó transformar em público make Public e eu vou pegar o link vou colocar aqui na descrição você vai acessar esse projeto vai aparecer um botão para você chamado Cloud Project clonar projeto E aí você vai lá e acessa o clone Project aí pronto você vai ter uma cópia sua do projeto já com

design pronto o segundo passo é já com a sua cópia do aplicativo que agora você vai poder fazer o que você quiser então vamos lá vamos pegar o nosso tutorial FF offline eu vou duplicar aqui que é a mesma coisa que você vai fazer aí eu vou chamar de tutorial offline YouTube aqui dupliquei estou criando uma cópia para mim então e pronto então a gente tá começando o mesmo ponto de partida tá que que a gente tem aqui pessoal a gente tem uma tela produtos onde a gente tem uma lista de produtos vamos ter né

uma lista de produtos que ainda não foram comprados uma lista de produtos que já foram comprados e aqui um botãozinho pra gente adicionar novos produtos que abre essa caixinha aqui ó aí você digita o nome do produto e quer do produto isso é o nosso projeto repare que se você já fez aquele tutorial do flaterflow você vai perceber que a gente deletou as telas de autenticação ou seja de cadastro e login de usuários por quê porque se a gente está trabalhando com o armazenamento offline do dispositivo os dados só estão aqui galera você não precisa

autenticar você não precisa se cadastrar você não precisa ser legal dados já estão no teu celular entendeu não vai estar na nuvem né então por isso que eu deletei fica até mais simples do tutorial dessa forma então agora vamos lá já com a sua cópia do aplicativo o primeiro passo aqui vai ser criar um deita Type chamado produtos galera deita Type é a base do nosso banco de dados offline tá esse foi o recurso que o flutterflow recentemente lançou Então o que acontece deita Type é uma estrutura de dados de banco de dados e antes

era necessariamente atrelado ao Fire base ou seja ele só existia na nuvem agora o flutterflow nos permite a quem deita times do lado esquerdo da tela você consegue criar essas estruturas de banco de dados de forma não mais conectado ao firebase ou seja ela existe no próprio aplicativo mesmo então a gente vai vir aqui criar Adicionar novo deita Type e a gente vai adicionar um data Type chamado produtos criei dentro de produtos aqui galera entendam como se a gente tivesse querendo qualquer outra tabela de banco de dados E aí eu vou adicionar dois Campos aqui

que a gente já sabe Quais são nome do produto que vai ser uma string pessoal que é mais informações sobre isso ah que que esse tipo de produto eu não vou entrar muito nisso porque lá no tutorial do flutterflow a gente já falou bastante sobre isso tá então se você começar a ficar perdido vale a pena você ir lá assistir aquele tutorial depois você volta para cá então vou criar o nome do produto do tipo string e eu vou criar um campo aqui para dizer se o produto está comprado do tipo buliano sim ou não

o item está comprado ou não tá ou Preciso comprar né criar então criei aqui a minha estrutura de banco de dados com os campos nome do tipo string e comprado do tipo buliano o terceiro passo agora galera é o seguinte vamos melhorar a estética Desse nosso bloquinho de notas né o terceiro passo é o seguinte agora a gente vai criar um app state chamado lista de produtos lá em app States up States galera está aqui do lado esquerdo logo abaixo do data typton que que são app States são variáveis locais que você grava no dispositivo

do usuário então Ó que que ele fala que começa adicionando variáveis para armazenar dados no dispositivo vou adicionar uma nova variável O Grande Lance aqui galera é isso vou criar aqui lista de produtos por exemplo do tipo deita Type ele vai estar aqui no final e olha só que legal o data que a gente criou ele é a estrutura de banco de dados que que é estrutura a tabela produtos com um campo nome e o campo comprado a variável mesmo que a gente vai gravar no dispositivo é o app state do tipo ou seja Qual

estrutura de dados que ele vai seguir esse daí tá Type produtos que é o único que a gente criou é isso que a gente consegue fazer agora com esse novo recurso do fla-flu é uma lista sim é uma lista produtos né vai ser mais de um produto Então posso marcar a lista e o segredo tá nesse carinha persista de aqui ó se você botar o mousezinho noir Olha a descrição indique se esse App Station ou seja se essa variável local vai ser salva no disco para Que ela possa ser carregada quando o aplicativo for reinicializado

se você não marcar essa caixinha o campo vai ser resetado quando o usuário fechar e abrir o aplicativo de novo então pensa assim é uma variável que ela vai ser gravada no dispositivo beleza mas ela vai ficar gravada realmente no armazenamento do dispositivo ou só lá num cachezinho temporário porque se você não marcar isso aqui se a pessoa fechar e abrir de novo não tem mais nada recertou tudo se você marcar isso aqui como a gente vai marcar aí realmente vai ficar gravado no armazenamento do dispositivo vai ficar lá para sempre até que o usuário

vá manualmente limpe os dados do do aplicativo ou delete o aplicativo alguma coisa assim né Então galera Já conseguimos criar aqui o nosso web state chamado lista de produtos cujo tipo foi deita type e marcamos o persistente uma pequena observação aqui pode ser que não apareça o deita Type aqui bugzinho galera aí que que você vai fazer Vai ali em configurações no canto esquerdo e dá uma mexida em alguma coisa assim por exemplo vai em plataformas habilita e desabilita de novo web ou deixa habilitado tanto faz só para dar uma mexidinha assim porque eu já

encarei alguns bugzinhos desse aí eu fiz isso tipo apareceu Type entendeu ai que fica só aqueles bugs com certeza vai corrigindo com o tempo né então beleza criamos o data Type que a estrutura de dados criamos a variável local agora galera que que a gente vai fazer com essa informação no componente criar produto que aquela caixinha onde a gente insere o produto vai no botão adicionar produto e faça o seguinte ó Então vamos lá na nossa nosso componente criar produto aqui eu vou inserir o nome do produto e aqui quando eu clicar em criar produto

eu quero executar uma ação Qual ação eu quero executar vou clicar aqui em opinião adicionar primeira ação galera lembra que lá no nosso super tutorial Plata a gente fazia essas ações aqui ó de banco de dados né Criar documento lá no Fire Store não é nada disso que a gente vai fazer agora o que a gente vai fazer agora é ligado aos app States que são as variáveis locais então no nosso caso a gente vai atualizar um app state update up state então update up state eu vou clicar em Eddie Field e você selecionar a

nossa lista de produtos que é webstate que a gente já criou beleza aí dentro dele aqui ó selecione o tipo de atualização que você quer fazer nessa variável Qual é a atualização que é definir um valor limpar o valor eu quero adicionar galera a lista Você concorda comigo se eu tô criando um produto é porque eu quero adicionar um novo produto a minha lista de produtos então vou clicar em Edition qual é o valor que você quer adicionar sempre que tá como 17 aqui é porque algo que você precisa definir não definido e aí logo

a primeira opção é Create date Ou seja eu quero criar um novo deita Type aqui ó do tipo produtos que é o único que do tipo produtos e aí aqui defina os campos que você quer modificar eu quero adicionar um campo clique em adfield ele Já puxou o nome automaticamente aqui de onde eu quero puxar o nome dele eu quero puxar o nome dele lá do widget texxfield a gente não tem um campinho de texto chamado o nome do produto é desse cara que eu quero puxar o nome vou adicionar mais um campo aqui ó

comprado que vai ser falso aqui tem um bugzinho galera você vê que se você só tentar confirmar que ele não vai ó só vem aqui embora já esteja selecionado falso só seleciona de novo plataforma vai corrigir com tempo tá tudo certo então eu quero criar um novo produto com esse nome cujo comprado seja igual não Ou seja um item que eu preciso comprar né confirmei fazendo isso aqui eu já vou criar um novo produto com aquele nome comprado falso e vou adicionar lá na lista e logo depois eu quero fazer uma ação aqui ó adicionar

ação que vai ser o quê procura por Custom Essas são desmist ou seja feche essa telinha de criar produto que a gente tá numa telinha ali né num Custom Daya logo que é uma janela customizada só para fechar a janela então criou o produto fechou a janela beleza com isso galera a gente já tem o nosso fluxo de criação feito então Type produtos defina nome e comprado ou seja os campos ali né E logo depois uma ação para fechar a janelinha show de bola a gente ainda não tem como testar isso galera que a gente

não tá visualizando em nenhum lugar ainda essa listagem né então agora que que a gente vai fazer Vai na coluna itens não comprados lá no nosso aplicativo vamos lá então de volta para tela produtos eu vou selecionar essa coluna aqui ó itens não comprados E aí eu vou selecionar essa opção janelate significa gerar filhos de forma dinâmica automática enfim para cada item que tiver na lista ele vai reproduzir um componente então quando eu vier aqui ó escolho um nome selecione aqui né escolha o nome de uma variável como por exemplo itens não comprados digita qualquer

valor E aí qual vai ser essa lista de itens que eu quero puxar eu vou vir aqui em app state lista de produtos Ok e aqui ele faz para cada item que tiver na lista ele vai pegar um container aqui então para cada item que tiver no meu App Station eu já vou puxando um containerzinho aqui mostrando aqui a gente já quase consegue testar só o que falta fazer aqui ó é o seguinte então a gente puxou ali o app state lista de comprados agora a gente precisa puxar o nome do produto Olha só vem

aqui no nome que tá dentro desse container seleciono esse íconezinho laranja para falar o seguinte deixa eu pegar esse item dessa célula aqui ó vou pegar um campo dentro dessa estrutura de dados ou seja um deita Strike nome então pega dentro desse daí para o nome desse item e reproduz aqui agora galera eu já consigo testar Então vamos dar um teste aqui ó enquanto ele carrega pode já testar porque você já vai ver funcionando essa dinâmica e carregou Já adicionei dois itens aqui para testar pão queijo vamos adicionar mais um então tabela clique em criar

produto ele adicionou mais um item alface clique em criar produto ele adicionou show de bola galera então a gente já vê funcionando a nossa criação de produtos inclusive galera Se quiserem ver uma curiosidade aperta f12 no teu navegador para abrir as ferramentas do desenvolvedor clica em application aqui em cima e seleciona aqui em local armazenamento local se o teu Chrome tiver em português seleciona aqui ó ffdbug service que é o testezinho do flutterflow que a gente está utilizando né aqui você vai ver um cookie do navegador só que é por plena curiosidade tá galera Mas

aqui tem um cookie do navegador já exatamente com a estrutura dos itens que a gente está criando entendeu Onde estão armazenados esses dados num cookie do navegador então aqui tá o pão queijo mortadela alface tá vendo as informações gravadas aqui no meu dispositivo no meu navegador então agora a gente continua galera fazendo o seguinte primeiro passo vou pegar o itens não comprados aqui ó e vou mudar essa listagem para fazer um filtro nela Então quero filtrar os itens da lista aqui no gerar filhos dinâmicos né qual filtro eu quero fazer eu quero filtrar para que

condição uma única condição quer verificar se o item na lista deita structorfield comprado seja igual a valor específico falso Olha só me traga somente aqueles itens que estão lá dentro do meu deita times mas somente aqueles cujo comprados seja igual ao falso então na listagem de cima aqui ó confirmei tudo ele só vai me trazer os itens não comprados ainda então filtrar somente pelos itens não comprados E aí galera Faça o mesmo na coluna e itens comprados aí o teu desafio agora reproduz a mesma coisa aí ó eu vou fazer aqui junto com vocês vai

lá na coluna itens comprados aqui do lado E aí fazemos a mesma coisa agora generate vou chamar de itens comprados Qual é a lista de produtos que eu quero trazer clico aqui trago um app state lista produtos já vou fazer o meu filtro né filterlist itens E aí aqui eu vou puxar somente aqueles itens cujo símbolo condition eu quero verificar se o item aqui da lista Campo comprado é igual a valor específico true então na lista de cima aí eu vou dar um ok aqui porque ele já define aqueles filhos dinâmicos né então na lista

de cima ele vai trazer Só aqueles itens cujo comprado igual a falsi na lista de baixo comprada igual a two E aí aqui no textinho eu vou da mesma forma puxar o nome do produto não Então pega o itens comprados Campo da estrutura de dados nome confirmei E agora eu já tenho funcionando e para a última etapa do nosso tutorial que que a gente vai fazer modificar o campo comprado quando o usuário clicar no container do produto Ou seja que que eu quero fazer se produto está comprado marcar como não comprado esse produto está não

comprado marcar como comprado Isso é o que a gente quer fazer então quando eu clicar nesse container aqui ó eu quero marcar esse produto como comprado igual assim true e quando eu clicar nesse container aqui marcar o comp como falso ou seja não aqui no entanto pessoal que que acontece o teu primeiro instinto vai ser o seguinte ó então o item não está comprado aqui eu preciso marcar o comprado como Truck o teu primeiro instinto vai ser o seguinte adicionar uma ação nesse container para app state atualizar app state no qual eu vou adicionar dentro

da lista de produtos aí você vai olhar as opções aqui você vai vou nesse atualizar item no índice Ou seja que que é o índice é a posição da lista onde o item tá numa posição zero um dois três Enfim eu posso até puxar aqui itens não comprado indexlist Dependendo pode ser que isso funcione mas no nosso caso aqui não funciona porque porque quando você puxa o índice da lista ali Nossa não necessariamente Vai representar o mesmo índice lá na lista de como ele tá vo lá nos nossos cookies lembra que a gente tava olhando

lá os nossos cookies como que estão então aqui ó tá o índice zero um dois e três então eu já Prefiro te ensinar uma forma melhor de fazer na minha opinião que assim Pode ser que funciona no teu caso se você tiver certeza que esse índice aqui vai ser o mesmo que esse tá mas se não eu te Sugiro fazer de uma forma melhor que é o seguinte primeiro passo que que você vai fazer você vai duplicar esse produto só que aí você já muda o status do comprado Então vou adicionar a lista vamos de

novo adicionar um novo produto cliquei lá no container aqui mortadela né eu vou adicionar uma nova mortadela na lista de compras então Edition a gente fez antes pessoal cujo nome é igual ao nome desse item aqui ó deita Strike eu vou pegar o mesmo nome do meu item atual show Só que aí o comprado vai ser igual a porque se ele é falso hoje eu vou criar um novo item mortadela por exemplo cujo comprado E aí logo depois pessoal que que eu vou fazer uma nova ação no qual vou dar um update aqui ó na

lista de produtos eu vou remover da lista a mortadela atual entendeu Então se essa mortadela não tá comprada eu vou criar uma nova mortadela comprada e deletar que não está comprada valor a remover e tem não comprado item confirmei É isso aí galera e agora que que eu vou fazer vou copiar essa cadeia de ações aqui ó e vou reproduzir a mesma coisa nesse container de baixo coleções colei ações Então vou criar um novo produto A única diferença Então vou puxar aqui do o nome né item comprado nome só que agora vou criar um item

cujo comprado seja igual a falsi E aí deleto o atual ficou alguma coisinha corrigir aqui ó ele perde a referência né corrigido e agora a gente já pode testar Então vou dar um instante Reload E aí vamos lá então cliquei na mortadela Opa foi comprada queijo pão alface e voltando mesma coisa também galera bom E aqui eu vou fazer agora agora eu vou baixar o apk e testar num celular Android que eu tenho aqui então galera vim aqui em publicar download APK vou gerar o apk mandar para o meu dispositivo Android já te vejo lá

ó Galera tô aqui com meu APK então hein aplicativos em Android bonitinho Dark mode show eu vou me inserir então o nome de um produto você vê que ele vem Branco inclusive ele tá sem nenhum produto cadastrado vamos inserir aqui pão sei meu Como eu escrevo mal nesse negócio pão francês criar produto e carne pronto marquei foi desmarquei foi funcionando perfeito hein galera como vocês podem ver né E aí se eu vier aqui e fechar esse negócio e abrir ele de novo é não definir nome nada dele aqui não tá aqui ainda hein galera É

isso aí então funcionando redondinho galera show de bola então agora que funcionou tudo direitinho provavelmente a dúvida que você deve ficar é mas Renato consigo sincronizar dados online e offline ou seja vamos dizer que você queira fazer o seguinte tá usuário tá lá usando offline aí pousou pegou a internet que que você quer fazer já mandar todos os dados que ele gravou offline para o banco de dados na nuvem pegar os dados que já estava na nuvem e trazer de volta pro dele por exemplo caso outra pessoa tivesse adicionando coisa ao mesmo tempo enfim consegue

Com certeza galera sim você consegue fazer isso mas não vai ser nessa aula que eu vou te ensinar te ensina numa próxima aqui no YouTube ou na se você ainda não conhece comunidade sem koday que deixa o convite para conhecer um curso completo de aulas flutterflow Bubble e as melhores ferramentas no code e locode espero que tenha ficado Claro grande abraço nos vemos semana que vem [Música] [Música]