DÚVIDAS

MAIS FREQUENTES
DE INICIANTES

Acompanhe todos os conteúdos

@programacao_em_blocos
https://juoliveira.com.br/
 DÚVIDAS
MAIS FREQUENTES
DE INICIANTES

Decidi reunir as 5 principais dúvidas entre os iniciantes, espero

que esse guia te ajude de alguma forma. Vamos lá!

1. Gerar ícones através de uma label

2. Como pegar uma informação através do clique
3. Como que é o funcionamento do aplicativo cliente e
administrador
4. Como enviar uma imagem para o BD e o link para o airtable
5. Trabalhar com vários layouts em uma única tela
GERAR ÍCONES ATRAVÉS DE UMA LABEL

Acesse o site do material design e escolha o ícone da sua preferência. Lembrando que
não precisa baixar, apenas será necessário pegar o nome. Após o clique ele aparecerá
por completo no seu canto esquerdo. Veja a imagem exemplo abaixo.

https://material.io/resources/icons/?style=baseline

Agora basta arrastar uma label para o seu projeto e mudar o tipo de fonte dela para
Material Icons. As únicas coisas que você poderá mudar é o tamanho, cor e tipo de
ícone.
Veja que após inserir o nome do meu ícone no campo de texto, ele automaticamente
apareceu na minha tela do celular. Agora basta configurar a cor ou o tamanho na
propriedade de Font size.
COMO PEGAR UMA INFORMAÇÃO ATRAVÉS DO CLIQUE

O intuito do tutorial abaixo é apenas mostrar uma forma de pegar as informações de

uma lista e enviar esses dados para outra tela. Então já adianto que não faz parte
ensinar a pegar esses dados do banco, caso você não saiba, segue abaixo alguns
vídeos que poderão ajudar.

COMO DIRECIONAR O CLIQUE PARA UM ITEM ESPECÍFICO [ KODULAR ]

https://www.youtube.com/watch?v=xgX_6VlpaAA&t=1s

LISTVIEW ESPECIAL COM DADOS DO AIRTABLE [ KODULAR ]

https://www.youtube.com/watch?v=VgUmuvNNsAk&t=1s

OBTER DADOS DO AIRTABLE E FILTRAR POR ITEM ESPECÍFICO [ KODULAR ]

https://www.youtube.com/watch?v=T9rx-OvKs_E&t=2s

Exemplo 1: Nele eu consigo pegar nome e a posição do item clicado na lista.

Exemplo 2: Aqui estamos trabalhando com URL, então após o clique o componente
Web_Viewer pega a posição e url clicada no item da lista.

Exemplo 3: Nos blocos abaixo é listado todos os imóveis lá do airtable, a imagem, o

nome e o valor. Após o clique em qualquer item da lista, todas as informações são
jogadas em outra tela especificando cada item de forma organizada.

Ao clicar em algum item da lista, setamos o vertical da lista para falso, e o vertical da
descrição fica verdadeiro já que queremos que esse layout fique visível com as
informações clicadas.
Observe que foi necessário criar uma variável global chamada “index” no qual ela se
inicia com zero. Isso é necessário pois há uma variação entre listas, por exemplo, na
extensão ColinTreeListView a posição dos itens se inicia em 1, então não há
necessidade de utilizar outra variável para ajustar isso, diferente desse componente
mostrado na imagem acima, pois a lista se inicia em zero, logo apresenta erro se você
clicar no primeiro item da lista. Ele diz que não como retornar o componente zero.

A Estrutura do Design é essa, trabalhamos com dois layouts de forma simultânea.

Caso você tenha dificuldade no uso das transições de telas como deixar
invisível uma tela enquanto outra está em execução, nas próximas
páginas desse guia você encontrará respostas para a sua dúvida.
COMO QUE É O FUNCIONAMENTO DO APLICATIVO CLIENTE E
ADMINISTRADOR

Essa é uma das dúvidas mais recorrentes no meu canal, ou até mesmo por contatos
diretamente comigo.
A dúvida geralmente é por que não faz sentido ter dois aplicativos no qual se eu inserir
uma imagem através do aplicativo de administrador, essa mesma imagem ficar
disponível de forma automática no aplicativo cliente.
Bom, abaixo está uma ilustração de como funciona isso.

É aqui que os seus dados

ficarão armazenados

Aplicativo Administrador:

Manda as informações
para o banco de dados
Aplicativo dos clientes:

Recebe a atualização das

informações adicionadas
pelo administrador
COMO ENVIAR UMA IMAGEM PARA O BD E O LINK PARA O
AIRTABLE
Outra dúvida frequente que recebo muito é em relação a inserir imagens no Airtable já
que não dá para inserir a imagem diretamente lá, para isso é necessário subir a
imagem para outro banco de dados e só depois jogar o link dentro do airtable, veja
abaixo.

No exemplo acima temos uma coluna chama “img” e ela possui 3 linhas com os links
de imagens hospedadas em um outro lugar. Nesse caso no Cloudinary, mas há
inúmeros lugares possíveis para fazer isso.
Vamos lá!
Antes de tudo, arraste o componente Cloudinary para o seu projeto

Preencha com suas credenciais, caso ainda não possui uma conta, acesse o site e crie
uma. As informações necessárias aparecerão dessa forma:

https://cloudinary.com/
A parte do design será essa, 3 campos: Nome, Whatsapp, Endereço e a Imagem
escolhida na galeria do celular.
Lembrando que “Sua logo” é um componente de imagem normal, logo após o
usuário inserir ela ocupará esse espaço.

Esse componente Image_Picker está na tela,

porém invisível, só então na parte de blocos
iremos aciona-lo. Para quem não conhece, é
através dele que obtemos acesso a galeria do
celular.

Agora vamos para a parte dos blocos, veja a explicação e as imagens na próxima
página!
 O primeiro bloco aciona o botão para
acessarmos a galeria, lembra que
deixamos invisível na tela?
O segundo bloco é após o usuário
escolher a imagem da galeria, ela irá
ficar no lugar daquela “Sua Logo” e
também enviaremos para o
Cloudinary.
O terceiro o bloco é após a imagem
subir para o nosso banco de dados
iremos obter a URL para
trabalharmos com ela no Airtable.

Crie uma variável global chamada

E dessa forma enviamos a URL da

Imagem para o Airtable.
Então não esqueça de colocar o
componente “spreadsheet” para o
procedimento dar certo.
No meu caso eu possuo todas essas
colunas no meu Airtable, faça de acordo
com as suas.
TRABALHAR COM VÁRIOS LAYOUTS EM UMA ÚNICA TELA

Essa é a última dúvida, porém não menos importante e que talvez até te ajude
futuramente.
Existem várias formas de se trabalhar com telas. Uma delas é você ir inserindo novas
screens e para cada uma criada você vai renomeando e adicionando novos
componentes.

A outra maneira é trabalhar com uma tela e dentro dela inserir vários layouts e usá-los
como se fossem novas telas.
Eu inseri 2 verticais e quando eu estiver utilizando um, o outro ficará invisível, vou te
mostrar agora nos blocos.

Vamos supor que o usuário acabou de inserir os

seus dados para fazer cadastro, então o bloco ao
lado diz “quando usuário clicar no botão de
cadastrar, a tela de login ficará visível (true) e a de
cadastro invisível (Falso).

Basicamente é isso, no design você escolhe a tela que iniciará visível e nos blocos você
vai determinando de acordo com as funcionalidades.