Passos para criar a conta e link do projeto no Flutterflow.

1. Entre na sua conta do [Link];

2. Vamos utilizar a conta Google para logar no Flutterflow, desta forma entre no gmail e faça o login com seu e-

mail, caso não tenha cria a conta na plataforma google;

3. Para logar clique em login;

4. Para efetuar o cadastro ou login clique no botão Sign in with Google;

5. Nessa janela escolha o seu e-mail clicando nele;

6. Essa é a tela onde você visualiza seus projetos;

7. Vamos clonar o projeto: Abra o link do projeto e clique no botão clonar.

Clique no link: [Link]

8. Depois do projeto clonado, duplique ele para alterar o nome, para duplicar o projeto clique no ícone do
flutterflow ao lado esquerdo do painel, esse ícone o transporta para a tela dos projetos;
9. Para duplicar o nome do projeto clique no Project Options;

10. Escolha a opção Duplicate Project;

11. Altere nome do projeto escolha de sua preferência no meu caso vou chamar de AppListaMercado;

12. Para finalizar clique no botão azul Duplicate, note o nome ao lado esquerdo acima da janela;
13. Vamos configurar o Firebase;
14.

Agora vamos acessar o [Link];

Vamos criar a conta com as credencias do google para isso necessita logar no [Link];

Feito isso clique em ir para console;

Crie um novo projeto;

 Depois de criar o nome de sua escolha;

Desativar o Google Analytics, pois ele retorna estatísticas e agora você está criando, mais para frente
configuramos;

15. Criação do Firestore database

Depois do Projeto criado clique em continuar;
Agora vamos criar o FireStore, clique na barra ao lado esquerdo no botão Criação;
Opção Firestore Database;
Clique em criar banco de dados;
Escolha o local onde seu será hospedado southamerica-east1 (São Paulo);
Com essa configuração de local você diminui o gargalho e lentidão ao acesso as informações do banco de
dados. Depois clique em próximo.
Vamos iniciar banco o modo teste, pois ainda não precisamos nos preocupar com o nível de segurança e
acesso aos dados;
Depois clique em criar;
16. Conceder as permissões aos aplicativos que acessam esse banco de dados:
Na visão geral do projeto clique na engrenagem;
E escolha a opção usuários e permissões;
Clique em adicionar um membro, assim vamos adicionar o futterflow para ter o acesso a este banco de dados.
Clique no botão adicionar membro e digitar firebase@[Link];
E configure como Editor e clique em concluir;
Depois de digitado clique novamente no botão adicionar membro;
Clicar logo abaixo em configurações avançadas de permissões, agora escolha o firebase@[Link] e clique
no lápis a direita que se chama Editar Principal.
Escolha a Opção Adicionar Outro Papel;
No lado Esquerdo da Lista Escolha a Opção Cloud Functions e do lado direito Administrador do Cloud
Functions, digite no filtro Usuário da Conta e escolha abaixo a opção Usuário da Conta de Serviço;
Desta forma atualizamos a política de segurança.
17. Ativar a autenticação do Firebase:
Criação Autentication;
Clique em vamos começar;
Escolher Email e senha padrão, escolha ativar e salvar;
18. Pegar o ID do Projeto:
Clique na Engrenagem que fica na Visão Geral do Projeto, escolha a configuração do projeto, código do
projeto;
Copie o ID do projeto.
19. Configurar o projeto no Flutterflow:
Abra o projeto que vai linkar com o banco no caso app mercado,
Vamos até a engrenagem das configurações, escolhemos a opção firebase, na opção Connect your Own
Firebase Project, no campo firebase Project ID e vamos colar o código do projeto do Firebase no Flutterflow;
Depois clique no botão Connect, tem que aparecer a tag Sucess!
20. Clique no Botão Generate Config Files:
E clique no botão Generate Files que serve para gerar automaticamente os arquivos de configuração se estiver
correto vai aparecer a mensagem Firebase Setup Complete! E os ícones do firebase e do Flutterflow com um
tag de Visto no meio deles!
21. Vamos configurar a autenticação de usuários (criação de conta, Login, Logout)
22. Voltamos para o projeto Build Widget Pallete, onde vamos visualizar a tela de cadastro do projeto senão
estiver visualizando a tela de cadastro clique no botão Page Selector e escolha a opção cadastro;
Volte para o botão Widget Pallete e note que você tem os campos email, senha e confirmar senha, também o
botão Criar conta onde vamos inserir uma ação a este botão.
Ao lado esquerdo temos as opções da seção Page Parameters Ficará marcado o Button, pois você o selecionou
com 1 clique, agora escolha o botão Actions é um botão com uma linha entre 2 pontos com uma seta ao lado,
assim você vai configurar as ações que vão ocorrer através do clique deste botão.
23. No Action Flow Editor Clique no botão Open;
 Escolha a opção on tap que quer dizer um toque;
Depois escolha a opção Navigation, a escolha a opção Backend/Database, e vamos configurar o Firebase
Authentication;
No Firebase Authentication escolha a opção Create Account, pois é uma ação para criar uma conta;
24. Na seção Define Action, vai aparecer na caixa de combinação a opção “Auth Create Account”;
O provedor que vamos escolher é o E-mail, pois foi está configuração que escolhemos no Firebase,
Vamos altera o nome para emailcad, para isso clique na opção do lado esquerdo Widget Tree e clique no
textfield email, no lado esquerdo vai aparecer as configurações do textField e embaixo você completa email
com a “meia palavra cad” ficando emailcad;
No campo email Field escolha o campo “emailcad”;
No campo Password Field escolha o campo “senha”;
No campo Confirm Password Field escolha o campo “senhaConfirmar”;
Para testar o visual clique no botão do Olho assim teremos um preview da visualização;
25. Vamos testar o App Mercado clicando do lado Direito do olho na seta ao lado direito do Raio, irá abrir um
Menu e Escolha o Botão Test com um Raio;
26. Se caso der algum erro veja se a autenticação foi liberada, para isso clique no Debub que é o inseto na barra
acima ele vai mostrar o erro e o local para acertar o erro;
27. Cada Alteração feita no App clique no Instant Reload, para isso ir mais rápido as alterações;
28. Vamos conferir o Firebase clique em Authenticacion, irá mostra a Aba Usuário e a autenticação feita no seu
banco de dados;
Portanto com isso meu login já fica registrado e sempre poderá efetuar o login no App Mercado;
29. Vamos agora configurar a próxima ação:
Vamos escolher a tela produtos, Clique no Page Selector e escolha a tela produtos;
Vamos configurar o Botão de Logout, note acima da tela ao lado direito;
30. Vamos clicar no lado esquerdo em Actions escolha o botão Add New Trigger;
Clique no Botão Add Action, escolha a opção Backend/Database, FireBase Authentication, escolha a opção
logout. Note que ele volta para a tela de Login e não para a de cadastro;
31. Vamos criar a página de Login de Usuário:
Vamos escolher o botão entrar, ao lado esquerdo clique em Actions, Botão Add Action, Opção
Backend/Database, Firebase Authentication, Escolho a opção Login;
32. Vai dar um erro clique na baratinha e depois, clique na primeira opção de erro na janela a esquerda marque
no campo Auth Provider como E-mail,
Email Field como email,
password Field como senha;
33. Vamos testar a página de Login, entre com o login de cadastro que você fez com a sua senha e depois clique
no botão Entrar;
34. Se der certo caíra na tela do produto;
35. Com isso finalizamos a parte de autenticação de usuários. Tudo que está em vermelho já está configurado.
36. Vamos Criar o CRUD
37. Antes teste o seu projeto clicando no Raio na seta ao lado esquerdo do raio;
a. Criação dos itens do banco de dados
b. Read/ Leitura dos itens no banco de dados
c. Update/ Modificação de itens no banco de dados
d. Delete/ Deletar itens no banco de dados
38. Criar o CRUD
a. Vamos criar o banco de dados no Flutterflow
b. Para isso vamos voltar no Flutterflow e acessar o firestore na barra ao lado esquerdo abaixo da palavra
“Connect”
c. Escolha a opção Create Collection
d. Vamos criar as tabelas:
e. No “Collection Nane e vamos digitar Produtos depois clico no botão Create;
f. Vamos clicar no Start From Scratch para criar seu modelo de tabela;
g. Vamos agora No Field Name Criar os campos do nosso banco de dados;
 h. Na frente do sinal de + digite o nome produto o tipo desse campo é texto então type de arquivo
escolhemos string e para criar o campo clique no botão do visto verde no Actions;
i. O ls List exibe os campos em formato de lista;
j. Vamos criar o campo Status, data type boolean e para criar o campo clique no botão do visto verde no
Actions;
k. Com isso criamos uma coleção ou tabela produtos, um campo produto do tipo string e um campo
Status do tipo Boolean, assim o banco de dados está criado;
l. Vamos voltar no construtor lá no Build no camto esquerdo, vamos escolher o page selector;
m. No Page selector vamos escolher a page produtos;
n. Vamos abrir a pasta componentes e clicar no diamante “Criar Produto”
o. Clique no botão criar produto para começara a configurar o banco de dados;
p. Depois de clicar no botão criar produto clique em Actions na barra ao lado direito;
q. Escolha a opção Add Action, escolha a opção Backend/Database;
r. Escolha a opçãp FireStore clique na opção Create Document, onde nesta opção você vai criar um novo
registro no seu banco de dados, e assim você vai escolher a tabela produtos;
s. Vamos trocar o Unset que é não definido na tradução, para a tabela produto;
t. Vamos escolher o campo produto para isso clique no botão Add Field, escolho o campo produto e
vamos trocar o Specific Value que é valor específico na tradução, para From Variable onde esse valor
virá de uma variável;
u. Vamos agora trocar o UNSET que é não definido, por Widget State onde na tradução é outro valor que
tem na tela;
v. Escolho a opção Textfield (Nome do Produto) assim ele irá trazer o registro que foi registrado no
Campo nome do produto;
w. Vamos configurar o campo Status, com isso clique no campo Status para escolher e não precisa alterar
nenhuma configuração desta forma o status será o ítem para comprar;
x. Vamos clicar no test para abrir a tela de teste e testar o projeto;
y. Vamos fazer a janela adicionar produto fechar para inserir um novo produto;
z. Vamos clicar no botão Criar produto para configurar o fechamento da janela;
aa. Escolha o Botão Open na barra ao lado esquerdo, clique no + no fluxo de ações botão add Action;
bb. Na Select Action Digite “dialog” que é o nome do Popup utilizado no projeto, que fica na barra ao lado
esquerdo;
cc. Escolha a opção Dismiss Custom Dialog dispensar o popup customizado, assim sai a tela do cadastro
de produto;
dd. Com isso, terminamos a aula de hoje;

32. Criando a operação de ler o banco de dados Ler e Visualizar os produtos:

a. Vamos voltar na tela do aplicativo na página dos produtos;
b. Na barra ao lado esquerdo clique na opção Widget Tree e escolha a opção listwiewnãocomprados,
repare que o container da tela produtos a primeira opção produto muda o nome para opção
listwiewnãocomprados;
c. É uma lista preparada dos produtos que não tem comprado ainda;
d. Agora vamos puxar alista do banco de dados na barra ao lado direito veja logo abaixo da joaninha dos
erros fica a opção ListView, ao lado do botão Action vamos escolher a opção BackendQuery clicando
nela, sempre vamos utilizar quando queremos trazer dados externos;
e. Vamos clicar no botão AddQuery como vamos trazer uma coleção escolhemos o Query collection,
clicando nele;
f. E vamos clicar no Unset da opção collection para escolher a seleção produtos que é a única que temos;
g. Vamos trazer uma lista de documentos veja que na janela ele marca no campo Query type a opção List
of Documents, escolhido vamos clicar no botão confirm, irá aparecer um pop-up com o nome de
Create Backend Query, clique novamente no botão confirm para aceitar a criação da lista “note que a
tela do App fica com uma lista com campos de nome produto”;
h. Vamos alterar a nossa lista onde o campo é produto clique na primeira opção com o campo “Text
produto” para selecionar, veja será marcado a caixa text apenas;
i. Agora vamos para a barra ao lado direito veja que o campo Text está selecionado na caixa nome em
baixo da joaninha, mais um pouco abaixo veja que você tem uma opção Text com uma bolinha e um
risquinho em laranja e a debaixo está invertido primeiro vem o risquinho e depois a bolinha é ai que os
senhores e senhoras deverão clicar;
j. Vamos clicar no Produtos Document e clique no campo produtos para trazer a lista de produtos para
o APPMercado;
k. Vamos testar no Instant Reload, note que a lista do seu banco de dados, é inserida na lista de
compras, se fizer o teste inserindo mais produtos vai notar que a lista é atualizada automaticamente e
em ordem alfabética;
l. Vamos fazer um teste onde vamos criar um produto no banco de dados direto, para isso vá até o
Firebase e escolha a opção FireStore, vamos escolher a opção adicionar documento;
m. Na janela Adicionar documento vou clicar no link código automático para inserir um código para essa
entrada de dados;
n. No campo escolhemos produto, pois é a tag de campo que criamos, e no campo string digito o
produto que quero em minha lista no meu caso digitei presunto, adiciono o campo comprar veja se o
seu não é “Status ok”com o tipo booleano, veja que você acaba de manipular o banco de dados com a
inserção do produto presunto, vamos atualizar o instant reload para ver se o presunto foi para a lista
Lembre-se que as vezes pode não aparecer pois é uma simulação ou você digitou no nome do campo
diferente de como está na coleção do banco de dados;
o. Vamos fazer a lista dos produtos que não foram comprados:
p. Vamos na barra ao lado esquerdo selecionar o listwiewnãocomprados, e na barra ao lado direito
vamos clicar no botão Edit, vai abrir uma janela com o nome de Query type, vamos descer um pouco
na janela e clicar no botão +Filter para criar o filtro necessário, assim na opção do botão +filter, clico
na seta do Filter1 e na Collection Field Name na seta do Unset escolho o campo comprar, na Relation
escolho a opção Equal to, que é relação igual a, e no campo Value deixo como false, vamos confirmar
no botão confirm;
q. Assim só o itens não comprados aparecem na lista acima, e como não temos a lista dos comprados
eles somem da tela de produtos;
r. Vamos criar os itens comprados agora:
s. No lado esquerdo da barra de ferramentas no Widget Tree escolhemos o listwiewComprados;
t. Vamos clicar no botão AddQuery como vamos trazer uma coleção escolhemos o Query collection,
clicando nele;
u. E vamos clicar no Unset da opção collection para escolher a seleção produtos que é a única que temos;
v. Vamos trazer uma lista de documentos veja que na janela ele marca no campo Query type a opção List
of Documents, vamos na opção Fiters, clicar no botão + Filter, assim vamos criar o filtro da lista dos
comprados;
w. Clique na Seta do Filter 1 vamos escolher na opção Collection Field Name o campo Comprar “Veja se o
seu não é Status”, na seta do Unset, vamos escolher na opção Relation escolho a opção Equal to, que é
relação igual a, e no campo Value deixo como true, vamos confirmar no botão confirm;
x. Irá aparecer novamente um pop-up com o nome de Create Backend Query, clique novamente no
botão confirm para aceitar a criação da lista “note que a tela do App fica com a segunda lista com
campos de nome produto”;
y. Vamos alterar a nossa lista onde o campo é produto clique na primeira opção com o campo “text
produto” para selecionar, veja será marcado a caixa text apenas;
z. Agora vamos para a barra ao lado direito veja que o campo Text está selecionado na caixa nome em
baixo da joaninha, mais um pouco abaixo veja que você tem uma opção Text com uma bolinha e um
risquinho em laranja e a debaixo está invertido primeiro vem o risquinho e depois a bolinha é ai que os
senhores e senhoras deverão clicar;
aa. Vamos clicar no Produtos Document e clique no campo produtos para trazer a lista de produtos para o
APPMercado, veja que os itens selecionados com True estão com a bolinha marcadas e os false com as
bolinhas sem marcar;
 33. Vamos modificar as listas no APPMercado agora para ficar os itens comprados e não comprados sendo
alterados pelo APP e não via Banco de dados.
a. No AppMercado no primeiro campo produto, vamos escolher a opção iconButton que é a bolinha de
marcar;
b. Na barra ao lado direito logo abaixo da Joaninha, veja que a opção que estamos configurando é o
IconButton, vamos escolher o botão da Seta com a Linha que é o Actions, clicamos no botão +ADD
Action escolhemos a opção Backend/Database na opção Firestore;
c. Essa ação será de atualização então vamos escolher a opção Update Document;
d. Vamos clicar no Unset, escolha a opção Produto Document, e clique na reference (Produto ref) que é o
código do produto cadastrado no Firebase, onde é uma marcação do produto digitado e a ligação
entre firebase e flutterflow, depois de escolher a reference do produto na última janela não altere
nada e clique em confirm;
e. Depois de confirmar clicando no botão Confirm, ainda na barra ao lado direito na opção Define Action,
na opção SetFields, clique no botão +AddField, vamos modificar o campo para Comprar “Veja se o seu
não Status, estamos mudando o campo Boolean”, onde está produto vamos alterar para o Campo
Comprar ou Status vamos alterar o Value para TRUE, repare que ele está configurado como false.
f. No campo produto que está marcado clico no Iconbutton dele e vamos alterar também;
g. Na barra ao lado direito logo abaixo da Joaninha, veja que a opção que estamos configurando é o
IconButton, vamos escolher o botão da Seta com a Linha que é o Actions, clicamos no botão +ADD
Action escolhemos a opção Backend/Database na opção Firestore;
h. Essa ação será de atualização então vamos escolher a opção Update Document;
i. Vamos clicar no Unset, escolha a opção Produto Document, e clique na reference (Produto ref) que é o
código do produto cadastrado no Firebase, onde é uma marcação do produto digitado e a ligação
entre firebase e flutterflow, depois de escolher a reference do produto na última janela não altere
nada e clique em confirm;
j. Depois de confirmar clicando no botão Confirm, ainda na barra ao lado direito na opção Define Action,
na opção SetFields, clique no botão +AddField, vamos modificar o campo para Comprar “Veja se o seu
não Status, estamos mudando o campo Boolean”, onde está produto vamos alterar para o Campo
Comprar ou Status vamos alterar o Value para FALSE, repare que ele está configurado como false e
permanece assim.
k. OBS note que cada campo e botão que foi configurado fica com os ícones das galerias de sua
configuração os de banco de dados ficaram com os ícones de bando de dados e os de botões de ação
com o ícone do Action.

34. Vamos publicar nosso APPListaMercado na WEB:

a. Na barra do Lado Esquerdo vamos clicar na Engrenagem para irmos para área de configurações:
b. Clicamos no botão Web Deployment que é a implantação WEB;
c. Vamos habilitar o suporte para a WEB clicando no Botão Open platform settings;
d. Veja que a barra ao lado esquerdo estamos na opção Platforms e vamos habilitar a terceira opção WEB
(enables deep linking) e volto para Web Deployment;
e. Vamos criar um nome para o APP;
f. Na General Information escolha a opção Site URL e configure o nome;
g. Vou Colocar no meu applistamercadoyt e clico no botão PUBLISH;
h. Assim ele verifica se o nome está correto e só existe ele espere uns 5 minutes e clique no olho ao lado
direito do botão PUBLISH, para visualizar na WEB;
i. Com isso finalizamos o Applistamercado.