Buscar

Kodular O Guia Quase Completo

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 3, do total de 73 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 6, do total de 73 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Você viu 9, do total de 73 páginas

Faça como milhares de estudantes: teste grátis o Passei Direto

Esse e outros conteúdos desbloqueados

16 milhões de materiais de várias disciplinas

Impressão de materiais

Agora você pode testar o

Passei Direto grátis

Prévia do material em texto

KODULAR: 
O GUIA
QUASE
COMPLETO
A F E R R A M E N T A Q U E V A I
R E V O L U C I O N A R S U A S I D E I A S
O G U I A P A R A A P R E N D E R A
D E S E N V O L V E R A P L I C A T I V O S D O Z E R O
KODULAR EAGLE
Autora Juliana Oliveira
Fundadora do Programação em
Blocos
A autora não possui nenhum vínculo com as
instituições e produtos citados, utilizando-os
apenas para ilustrações.
Kodular: O Guia Quase
Completo 
E-mail - programacaoemblocos@juoliveira.com.br
Site https://juoliveira.com.br/
Design e aprimoramento Vitória Gonçalves
Sumário
Introdução
1 O que é o Kodular
1.1 Primeiro Acesso
1.2 Criando Projeto
2 Dicas Especiais
3 Visão Geral dos Blocos
4 Dicas de Design
5 Dicas de Performance
6 Criando um Aplicativo
7 Como Importar Projetos
8 Criando Aplicativos Nível II
9 Material Icons
10 Utilizando Procedimentos
11 Utilizando Diversos Layouts
12 Banco de Dados
12.1 Firebase
12.2 Cloudinary
12.3 Airtable
12.3.1 Notas sobre o Airtable
13 Meu Curso
14 Extensões
15 Api's
16 Importar/Exportar Blocos
17 Java Bridge
18 Publicar Aplicativos
19 Links Úteis
 
 
Antes de ler esse e-book, me responda uma coisa. Quantas vezes
você realmente conseguiu concluir um tutorial aleatório que
encontrou pelo Google sem perder a cabeça por conta de algum
erro misterioso ou ambiguidade na explicação?
 
O processo de aprendizagem é lento, não tem como ser rápido,
além de que é infinito. E o pior de tudo é quando você percebe
que ainda tem muito para aprender, pois como eu disse logo
acima, o aprendizado é infinito. Sempre tem algo de novo para se
aprender. Mas uma das piores coisas durante todo esse processo,
é quando autores dos tutoriais os rodeiam inconscientemente
distorcendo sua mente com palavras tipo, “simples assim”, “muito
fácil”, ”obviamente”.
 
Mas vamos lá, se alguma vez você já pesquisou por “como
aprender lógica de programação”, claramente você possui algum
interesse ou está começando a estudar na área de TI,
precisamente no ramo de desenvolvimento de aplicações, então
presumo que você tenha pesquisado também por algo similar a
isso: “Por onde devo começar”, “É difícil programar?”, “Dicas para
aprender a programar de forma rápida”, ”Quais atalhos para
aprender a programar”.
Para algumas pessoas aprender a programar no início pode ser
um tanto que confuso, afinal de contas aprender linguagem de
programação totalmente nova nem sempre é fácil, porém é a
essência para desenvolver um aplicativo. Mas o que significa
para você essa palavra, programar?
 
Programar é assim, você tem um problema começa a estudar
maneiras de solucionar, então (começa) a resolver por partes, até
conseguir resolver tudo, tornando aquele (problema) pequeno.
Tudo isso se torna um ciclo, onde todos os dias aparecerão
problemas precisando de resoluções.
A maior dificuldade para
quem quer desenvolver
aplicativo é saber todos
aqueles códigos. E aí, já
pensou em desenvolver
seu aplicativo sem
precisar se preocupar com
isso?
E é por isso que
apresento o
KODULAR
Sim...
ISSO É POSSÍVEL!
Mas, o que é o Kodular?
O Kodular é uma
plataforma online que
permite a criação de
aplicativos android. Seu
funcionamento consiste em
apenas "arrastar" e "soltar"
componentes a partir de
uma tela em branco. Além
disso, a plataforma permite
testar em tempo real o que
está sendo desenvolvido.
“É um modelo de
programação diferente,
imagine aí você desenvolver
um aplicativo apenas
encaixando blocos sem a
necessidade de digitar
nenhuma linha de código”
Primeiro acesso
Clique no botão para acessar o site oficial 
Vamos então entrar no site oficial do Kodular para termos o
nosso primeiro contato com a plataforma.
FIQUE ATENTO!
Aproveite para ler os termos da plataforma.
E
CHEGOU A HORA!
VAMOS COMEÇAR...
Criando projeto
Essa é a área inicial onde ficam todos os seus aplicativos já
criados.
Clique em "create new project" para iniciarmos o nosso
primeiro aplicativo. Coloque o nome que desejar, clique em
"next" e uma nova tela de configuração aparecerá.
SEJA CURIOSO, EXPLORE A
FERRAMENTA!
Essa tela de configuração fica ao seu critério as mudanças,
nela você pode alterar o tema, versão do android, cores, mas
tudo isso você pode modificar posteriormente. Vamos para o
próximo passo.
Todos os componentes ficam
aqui.
Aqui é a área de trabalho. Você 
poderá organizar os componentes 
como desejar.
Aqui estão todas as configurações
disponíveis para os componentes.
Os componentes inseridos na área
de trabalho são expostos aqui.
Nosso primeiro aplicativo mudará a cor da tela
quando clicarmos no botão. Acompanhe o passo a
passo.
Clique na em "Layout" >> "General >>
"Vertical Arrangement" 
e arraste com o mouse até a área de trabalho.
Agora vamos alterar algumas propriedades, o
tamanho, alinhamento e cor.
Esses Layouts servem para organizar os objetos
dentro deles. Como a própria ilustração indica, o
layout vertical organizar os elementos um abaixo do
outro, já no horizontal, um ao lado do outro, já esses
que possuem o nome "Scroll" eles inserem uma barra
de rolagem, possibilitando a visualização de mais
componentes inseridos.
Coloque o alinhamento para
"center", 
tanto no horizontal como no
vertical.
"Caso você sinta dificuldade em entender o que
está escrito, ou você traduz a página caso esteja
utilizando o navegador Chrome ou clica no canto
superior direito em "Account" >> "Settings" e
muda a linguagem para português."
Esse símbolo marcado em azul se chama "fill
parent", ou seja ele ocupa todo o espaço da tela,
preenchendo o espaço total na tela do celular. Deixe
as duas opções marcadas.
Clique lá no canto direito em
"background color" e esse
"color picker" será aberto,
escolha uma cor e clique em
"set".
Vamos inserir um botão para quando
clicarmos a nossa tela mudar de cor. "User
Interface" >> "Button", clique e arraste para
a área de trabalho.
.
Mude o texto do botão e aperte enter. Observe que esse
componente possui diversas propriedades que podem ser
mudadas, caso queira, mude sua cor, tamanho, alinhamento,
formato, sinta-se à vontade, Koder.
Tentei passar o maior detalhe possível, mas se esforce
ai também, você vai longe, esse é apenas o ponta pé
inicial!
Vamos agora aos blocos. No seu canto superior direito,
clique em "blocks". Todos os elementos inseridos ficam
na parte esquerda da sua tela.
Clique no componente botão e escolha a opção do
"clique", observe que temos diversas opções, mas
iremos arrastar a primeira "when button click"
Agora é com você, monte os blocos como demonstrado abaixo.
Deixe eu te explicar a lógica, preste atenção:
 
Quando o botão for clicado, a nossa horizontal mudará de cor,
como definimos abaixo "Azul". 
Sempre que você for encaixar os blocos, fale baixinho para si
mesmo, explicando o passo a passo de cada objeto encaixado,
pode ter certeza que o seu raciocínio irá se desenvolver muito
rápido.
Antes de qualquer coisa você terá que baixar o
aplicativo do Kodular no seu celular.
Com o aplicativo já aberto, vá na aba de "test" e
clique em "companion" e escaneie o QR code ou digite
manualmente o código.
Aguarde até que o aplicativo seja carregado e após isso
fique a vontade para testar.
Muitas vezes eu irei me referir a esse teste com a
palavra "emular", que nada mais é do que uma maneira
de reproduzir as funções de uma determinada
aplicação, então, acostume-se com esse termo.
Vamos testar nosso mini projeto?
VAMOS APRIMORAR!
Não desanime, essa aplicação foi para termos o
primeiro contato juntos com a ferramenta! Continue a
explorar e...
Vamos começar o nosso primeiro contato com a
variável global e o componente "pick a random item
list" pois ele irá escolher nossas cores aleatoriamente.
Veja o exemplo abaixo, mude suas cores e teste o
aplicativo.
* Variável Global: É uma variável acessíveil em qualquer parte
do programa e podem ser utilizadas e modificadas a qualquer
momento.
Não há segredos no kodular, tudo é arrastar e soltar.
A nossa variável global está armazenando as cores
que desejamos ser mostrado no aplicativo, e para usar
essascores basta você passar o mouse sobre o nome
"cores" que duas opções aparecerão, escolha o "get" e
insira no nosso pick a random.
Essa serve para você adicionar mais espaços
para colocar outras cores na sua lista, como
demonstrado na imagem. Clique no item do lado
esquerdo e arraste para o direito, colocando um
abaixo do outro.
Aqui vão 5 dicas rápidas para você seguir e obter um
bom desempenho no desenvolvimento dos seus futuros
projetos. Vejam:
DICAS ESPECIAIS
1 – Faça tutoriais
 
Após a leitura dessa e-book, assista vídeos, tutoriais
que te ensine a aprender o básico.
Lá no meu site existem diversos conteúdos para te
guiar, inclusive tutoriais.
Acessem: https://juoliveira.com.br
2 – Seja curioso
 
Clique e arraste os blocos, monte sua lógica, testes e
experimente componentes, emule o seu aplicativo e
veja se está funcionando corretamente. Leia a
documentação, não tenha medo de mergulhar de
cabeça em algo novo.
3 – Pesquise na comunidade
 
A comunidade do kodular é incrível, são centenas de
conteúdo, dúvidas, ajudas, dicas.. 
Então, SEJA CURIOSO, e acesse agora mesmo
https://community.kodular.io/
4 - Leia os detalhes de cada componente
 
Basta clicar na interrogação para aparecer uma breve
descrição do componente, se for necessário, traduza.
5 – Teste aplicativos de terceiros
 
Existem diversos arquivos para testes espalhados por
ai, então SEJA CURIOSO, pesquise! Geralmente há
tutoriais de terceiros que mostram exatamente aquilo
que você procura, ou precisa saber. Lembrando que o
seu formato tem que ser em .AIA para que você
importe e teste os componentes, funcionalidades.
Quem sabe algo possa acrescentar no seu projeto?!
Ao final deste e-book eu disponibilizo alguns arquivos
para futuros testes, basta apenas clicar.
Cada componente tem uma breve
explicação, clique na exclamação e a
informação ficará disponível logo abaixo.
VISÃO GERAL DOS BLOCOS
PALETT
E
·  Ao controle
·  Lógica
·  Matemática
·  Texto
·  Listas
·  Cores
·  Variáveis
·  Procedimentos
·  Qualquer componente
AO
CONTROLE
if & if
else
Testa uma determinada condição.  Se a condição
for verdadeira, executa as ações em uma
determinada sequência de blocos;  caso contrário,
os blocos serão ignorados.
Testa uma determinada condição.  Se o resultado
for verdadeiro, executa as ações na seqüência -do
dos blocos;  caso contrário, executa as ações na
seqüência -else de blocos.
Testa uma determinada condição.  Se o resultado
for verdadeiro, executa as ações na seqüência -do
dos blocos;  Caso contrário, testa a declaração na
seção -else if.  Se o resultado for verdadeiro,
executa as ações na seqüência -do dos blocos; caso
contrário, executa as ações na seqüência -else de
blocos.
A imagem ao lado mostra como usar o bloco se
else mutator.
for each from
to
Executa os blocos na seção do para cada valor numérico no
intervalo, começando em_de_e terminando em_a_,
incrementando_número_de_o valor de_por_cada vez.  Use o
nome da variável fornecida, _number_ para se referir ao valor
atual. Você pode alterar o nome_nome_ para outra coisa, se
desejar.
for each in
list
Executa os blocos na seção do para cada item na lista. Use o
nome da variável,  item  , para se referir ao item da lista
atual.  Você pode mudar o name_item_ para outra coisa, se
desejar.
while
Testa a condição de teste. Se true, executa a ação dada em -
do e, em seguida, testa novamente. Quando o teste é falso, o
bloco termina e a ação dada em -do não é mais executada.
if then
else Testa uma determinada condição.  Se a instrução
for verdadeira, executa as ações na sequência de
retorno de blocos e retorna o valor de retorno; caso
contrário, executa as ações na seqüência else-
return de blocos e retorna o valor else-return.
do
Às vezes, em um procedimento ou outro bloco de
código, você pode precisar fazer algo e retornar
algo, mas, por várias razões, você pode optar por
usar esse bloco em vez de criar um novo
procedimento.
evaluate but ignore
result
Fornece um "soquete fictício" para encaixar um bloco que
tenha um plugue à esquerda em um local onde não há
soquete, como uma das seqüências de blocos na parte do
procedimento ou um bloco if. O bloco em que você se encaixa
será executado, mas o resultado retornado será ignorado. Isso
pode ser útil se você definir um procedimento que retorna um
resultado, mas deseja chamá-lo em um contexto que não
aceita um resultado.
open another screen
Abre a tela com o nome fornecido.
open another screen with start
value
Abre outra tela e passa um valor para ela.
get start
value
Retorna o valor inicial dado à tela atual.
Esse valor é fornecido por meio da utilização de outra tela
com valor inicial ou tela fechada com valor.
close
screen
Fecha a tela atual.
close screen with
value
Fecha a tela atual e retorna um valor para a tela que abriu
este.
close
application
Fecha o aplicativo.
get plain start
text
Retorna o texto simples que foi passado para essa tela
quando foi iniciado por outro aplicativo. Se nenhum valor foi
passado, ele retorna o texto vazio. Para vários aplicativos de
tela, use get start value em vez de obter um texto inicial
simples.
close screen with plain
text
Fecha a tela atual e passa o texto para o aplicativo que abriu
este. Este comando é para retornar o texto às atividades que
não são do App Inventor, não às telas do App Inventor. Para
as telas do App Inventor, como em vários aplicativos de tela,
use Fechar Tela com Valor, e não Fechar Tela com Texto
Simples.
break
Sair do loop contendo
LÓGICA
true
Representa o valor constante true. Use-o para definir valores
de propriedade booleana de componentes ou como o valor de
uma variável que representa uma condição.
false
Representa o valor constante false. Use-o para definir valores
de propriedade booleana de componentes ou como o valor de
uma variável que representa uma condição.
no
t
Executa negação lógica, retornando false se a entrada for
verdadeira e true se a entrada for falsa.
=
Testa se seus argumentos são iguais.
·  Dois números são iguais se forem numericamente iguais, por
exemplo, 1 é igual a 1,0.
·  Dois blocos de texto são iguais se tiverem os mesmos
caracteres na mesma ordem, com o mesmo caso. Por exemplo,
" banana" _ ** _ não é igual a " Banana".
· Números e texto são iguais se o número for numericamente
igual a um número que seria impresso com esse texto.  Por
exemplo, 12.0 é igual ao resultado da junção do primeiro
caractere " 1A" ao último caractere de " Teafor2".
·  Duas listas são iguais se tiverem o mesmo número de
elementos e os elementos correspondentes forem iguais.
Ele age exatamente da mesma forma que o  bloco  = 
encontrado no Math
≠
Testa para ver se dois argumentos não são iguais.
and
Esta se todas as condições lógicas são verdadeiras.  O
resultado é verdadeiro se e somente se todas as condições
testadas forem verdadeiras.  Quando você conecta uma
condição ao testsoquete, outro soquete aparece para que você
possa adicionar outra condição. As condições são testadas da
esquerda para a direita e o teste é interrompido assim que
uma das condições é falsa.  Se não houver condições para
testar, o resultado será verdadeiro. Você pode considerar isso
como uma brincadeira de lógico.
or
Testa se algum conjunto de condições lógicas é verdadeiro. O
resultado é verdadeiro se uma ou mais das condições testadas
forem verdadeiras.  Quando você conecta uma condição
ao  test soquete, outro soquete aparece para que você possa
adicionar outra condição.  As condições são testadas da
esquerda para a direita e o teste é interrompido assim que
uma das condições é verdadeira.  Se não houver condições
para testar, o resultado será falso.
O site do Kodular disponibiliza a documentação dos seus
componentes. Veja o restante no site abaixo: 
https://docs.kodular.io/blocks/control/#if
DICAS DE DESIGN
Segue aqui alguns sites que te auxiliará a criar layouts robustos
e agradáveis.
Para combinar cores e escolher layouts degrade:
Basta clicar em qualquer imagem para acessar o site.
O formato da fonte para importarno seu projeto é .ttf.
Insira nos Assets e adicione ao
componente desejado.
https://www.netfontes.com.br/
https://www.urbanfonts.com/
https://www.dafont.com/pt/
http://www.abstractfonts.com/
Abaixo estão alguns sites que você poderá visitar e
escolher fontes agradáveis para o seu aplicativo.
Copie também esses links no seu
navegador favorito para acessar:
É dessa forma que você
fará para importar a
fonte desejada. Primeiro
clica em "assets" depois
em "upload asset".
Para adicionar a fonte desejada, clique na label
inserida e logo após clique em propriedades
avançadas. Pronto, a fonte inserida estará disponível
como na imagem ilustrada acima.
DICAS DE DESIGN
Algo que você precisa estar bastante atento é quanto
aos conceitos de experiência de usuário (UX é a sua
sigla em inglês). 
 
Estes princípios são de grande importância durante a
produção de um projeto, já que são criados inúmeros
aplicativos o tempo todo, então não basta apenas
criar, é preciso haver a conversão do usuário. 
 
Segundo uma pesquisa do Google, um em cada cinco
apps instalados é esquecido pelos usuários do Reino
Unido em diferentes categorias como compras,
restaurantes, delivery's e viagens.
 
Confira algumas dicas abaixo:
Dicas de design
#1
A medida for sendo desenvolvido o aplicativo,
teste-o em tempo real. Veja o tamanho dos
textos, botões, cores e contrastes.
#2
É necessário criar a tela principal funcional,
caso o seu aplicativo tenha funcionalidades
complexas, faça um breve tutorial explicando.
Lembre-se em facilitar a vida do usuário e
nunca o contrário.
#3
Segundo alguns estudos da Google,
aplicativos que possuem a ferramenta de
busca tem a conversão maior de usuários.
#4
Tente apenas avisar ao usuário o que
realmente for importante através de
notificações push. É importante que você
analise bem a mensagem que será enviada.
A mochila é um recurso de copiar e colar que funciona
entre projetos e telas, sendo possível acessar por meio
de qualquer projeto.  O seu ícone está localizado no
canto superior direito do espaço de trabalho.
 
Note que na parte dos blocos tem uma mochila no
seu canto superior direito. Ela serve para copiar e
colar os blocos para diferentes telas e projetos, aquilo
que você acha que é relevante ou reutilizável em outro
aplicativo, então basta guardar dentro da mochila.
Uma vez guardado, o seu código é transportado
durante qualquer projeto, basta fazer o login para ter
o acesso.
 
DICAS DE PERFORMANCE
Vou passar agora algumas dicas essenciais que
poderão te ajudar ao longo da sua trajetória. Então
para isso abra o kodular e vamos a prática.
Mochila (Backpack)
Como funciona o BackPack?
DICA 1.
DICAS DE PERFORMANCE
Existe duas maneiras de armazenar os blocos na mochila.
A primeira é clicando e arrastando o bloco desejado até
ela, perceba que ao aproximar o bloco da mochila, ela
muda a sua animação passando a ficar aberta.
 
A segunda opção é clicando com o botão direito do
mouse em cima do bloco desejado, veja abaixo:
 
O procedimento de limpar a mochila é bem simples, basta
você clicar com o botão direito em cima dela e selecionar a
segunda opção como no exemplo:
 
Limpando a Mochila
Lembrando que a primeira opção permite você visualizar a
documentação da Backpack. 
 
Como organizar os blocos
Para manter a organização dos blocos enquanto
programamos, aqui vão algumas dicas valiosas:
 
Clicando na área de trabalho com
o botão direito do mouse, algumas
opções são dadas. É possível
organizar os blocos de forma
horizontal, vertical e por
categorias.
 
“Arrange Blocks Horizontally”
“Arrange Blocks Vertically”
“Sort Blocks by Category”
 
Essas dicas servem muito quando
se tem uma quantidade generosa
de blocos sendo utilizados.
 
DICAS DE PERFORMANCE
Escondendo blocos
Uma forma de você ganhar velocidade e um maior
desempenho no seu projeto, eu aconselho a utilizar o “colapse
blocks”, o resultado é o mesmo da imagem abaixo:
Adicionar comentários aos seus blocos é de grande
importância, pois mais na frente você pode esquecer o
funcionamento daqueles blocos, sua importância, ou até
mesmo uma implementação futura que passou na mente,
enfim, são inúmeros questionamentos que se passam na
cabeça do desenvolvedor. Toda ajuda é bem-vinda, não é
mesmo?
Adicionando comentários
DICA 2
Clique com o botão direito no
bloco desejado e "add coment"
no meu caso escrito em inglês.
Renomei os componentes
DICA 3.
Essa dica é essencial, pois ao renomear um componente você
consegue trabalhar melhor com ele na área do blocos,
utilizando o bloco correto, evitando erros, e longas procura.
 
Alguns desenvolvedores costumam manter padrões para
renomear os componentes, eu por exemplo costumo chamar
uma label de lbl e acrescento sua função logo depois, exemplo:
lbl_nome. Aprenda a definir padrões e notará uma melhora
nos seus grandes projetos.
DICA 4.
Para encontrar um bloco de maneira rápida, basta digitar seu
nome e diversas opções ficarão disponíveis para que você
escolha o bloco desejado. Veja:
Fazer cópias dos seus projetos para evitar perdas de
alguma programação importante, isso é viável
principalmente quando estamos fazendo testes com os
blocos.
DICA 5.
Depois basta renomear o projeto. Ele vem com o nome copy
predefinido, mas você pode alterar sem problemas.
Utilizando componentes básicos I
Criando um aplicativo
Insira esses componentes abaixo na mesma ordem. Não
esqueça de renomear os componentes, lembrem-se das dicas
de performance. 
Neste tópico aprenderemos a utilizar diversos componentes
em um só projeto. Para isso acontecer, criaremos diversas
telas para que possamos interligar uma na outra e assim
criar diversas funcionalidades. Siga o passo a passo e mãos a
obra.
Passo 1. 
Basta arrastar e soltar os componentes. O botão fica na
Interface do Usuário (User Interface) e o Vertical em Layout.
Na parte dos blocos iremos dar funcionalidade para o nosso
botão e texto.
Repita o procedimento e tente entender.
Passo 2. 
Para que tenha efeito a parte do clique de mudança de tela,
será necessário a criação da tela 2.
Prontinho, agora é só testar o seu projeto. 
Passo 3. 
Agora vamos inserir os componentes da tela 2. São quatro
botões, eles implicarão na mudança de cor do layout de
acordo com a cor selecionada. Lembre-se de renomear os
componentes.
Passo 4. 
A configuração dos blocos é bem básica, leia comigo. Ao clicar
no botão roxo o vertical acionará o background color roxo. Ao
clicar no botão verde o vertical acionará o background color
verde, e assim para as demais cores.
Você está pronto para a
próxima etapa? Se sim, vamos
para a página dois, estou te
esperando ansiosamente lá :)
Ah, vale lembrar que todos os tutoriais estarão em um
link disponível no final deste e-book.
COMO IMPORTAR PROJETOS
Após entrar na sua conta do kodular, clique na opção
"IMPORT PROJECT", ele está posicionado no lado esquerdo da
sua tela. Siga o passo a passo abaixo:
TUDO PRONTO, agora basta acessar o projeto
e ver todas as funcionalidades do aplicativo
importado. Emule, modifique, seja curioso(a),
sempre.
Agora basta escolher a pasta que o projeto se encontra e
clique em "import".
SEJA BEM-VINDO(A) AO NÍVEL II
Utilizando componentes básicos II
O componente que iremos utilizar agora, será o "Web_View".
Ele serve para exibir conteúdos da Web. 
 
No exemplo abaixo foi inserido:
 
Dois Layouts um Vertical contendo o componente Web_View
(ele se encontra na aba de "Connectivity" e no Layout
Horizontal algumas imagens clicáveis com espaçamentos entre
elas. Lembre-se de alterar o tamanho, coloque o vertical para
ocupar a tela completa, "fill parent".
 
Repita o procedimento abaixo e prossiga para o passo 2.
Passo 1.
Agora é só testar o seu projeto. 
Agora nos blocos, para cada "Go To URL" iremos direcionar
para uma URL diferente. Como dito no passo 1, o componente
Web View reproduz a página da internet dentro do aplicativo.
 
Veja no exemplo abaixo como os seus blocos devem ficar. O
primeiro link direcionará o usuário para a página da Globo, o
segundo link parao meu site juoliveira.com.br e terceiro para o
site do Material Icons.
Passo 2.
Feito isso basta testar o aplicativo no seu celular, caso
não lembre como emular, volte para o início deste e-book.
Material Icons
Algo bem interessante no kodular, é a possibilidade de
inserir ícones no projeto sem a necessidade de
importar as imagens para o assets. 
Acesse o site 
 
https://material.io/resources/icons
Com o seu projeto aberto, insira uma label e nas suas
propriedades modifique sua fonte para Material Icons.
Agora para o ícone aparecer visite o site que citei
acima e escolha o desejado, copie e cole o nome do
ícone no texto da label.
Modifique seu
tamanho e cor nas
propriedades da
label.
A instrução abaixo é para que uma tela seja chamada
ao mesmo tempo que a tela atual é fechada. 
Em resumo, é a forma correta de se fechar uma tela
ao abrir outra.
Está será a tela final, mas vou te explicar o passo a
passo de como chegar até aqui.
Utilizando Procedimentos
Um procedimento é criado para que possamos utiliza-
lo diversas vezes em qualquer parte da tela. Criamos
ele e posteriormente o chamamos dentro de outro
bloco de forma simples.
Então...
No canto esquerdo clique e arraste o componente de
"procedimento" para criarmos a nossa estrutura. Lembrando
que um procedimento é criado para que não seja necessário
fazer repetições de código sempre que precisar daquela
estrutura. Criado uma vez, este procedimento poderá ser
utilizado em qualquer parte dos seu blocos na tela.
Arraste o componente para a
área dos blocos, e adicione um
"input" clicando na 
Lembrando que eu também
renomeei o procedimento para
"Prox_tela"
Você vai renomear o "x" do
"input", no meu caso coloquei
Screen. É ai que iremos definir a
tela para qual direcionaremos o
usuário.
O procedimento que criamos ele irá verificar se o que foi
clicado é verdadeiro, caso seja, o usuário será direcionado
para outra tela, e a tela atual será fechada.
Um botão foi inserido no design
apenas para testarmos a função.
Então quando o botão for
clicado, chamaremos o nosso
procedimento e colocaremos no
"text" o nome da Tela que
queremos ser direcionados após
o clique.
Lembra daquele "input" do
procedimento? Olha ele ai, agora
para utilizar basta pegar um text
vazio e digitar o nome da screen
que deseja ir.
Agora é só testar o seu projeto. 
Vamos aprender a trabalhar com
múltiplas telas?
Primeiro eu gostaria de salientar que nem sempre é
preciso
criar diversas telas. Você pode também trabalhar com
diversos Layouts Verticais no seu aplicativo definindo
sua visibilidade como True/Verdadeiro quando estiver
utilizando o layout e Falso/False quando não.
O layout auxilia na organização dos componentes do
aplicativo, o kodular oferece 5 tipos de layouts, veja
abaixo:
Horizontal Arrangement;
Horizontal Scroll Arrangement;
Vertical Arrangement;
Vertical Scroll Arrangement; e
Table Arrangement.
 
Utilizando Diversos Layouts
Quando for necessário inserir diversos componentes, o
aconselhável é inserir um Layout com Scroll, pois ele
contém uma barra de rolagem que auxilia na
visualização dos componentes abaixo.
 
Uma excelente forma de manter seu aplicativo mais
leve é utilizando vários layouts numa mesma tela, por
exemplo. 
O grande segredo de trabalhar com diversos layouts
é em relação a sua visibilidade. Quando estiver
utilizando o Layout de Contato, as demais precisam
estar com a checkbox visible desmarcada, como no
exemplo acima.
Todos os
layouts foram
renomeados.
O layout que estiver sendo utilizado
deverá estar marcado a sua visibilidade.
Ao final desse e-book um link estará
disponível com alguns projetos para
você se exercitar e continuar seu
aprendizado. Então lembre-se de
procurar através do nome do
arquivo de acordo com as suas
necessidades. 
 
Vamos continuar!
BANCO DE DADOS
Você sabe como funciona o armazenamento de
dados em um aplicativo?
O que é um Banco de Dados?
É um ambiente no qual é possível armazenar dados de
forma sistemática gerando uma coleção de dados. As
informações armazenadas podem, posteriormente,
serem extraídas para outras funções.
Banco de dados disponíveis na plataforma
- Firebase Database
- Tiny DB
- Tiny Web DB
- SQlite
* Utilizando o componente Web, podemos integrar o
banco de dados MySQL. O que é comum, a integração
do BD MySQL com PHP.
 
Em paralelo tem o serviço de armazenamento através
de planilhas com o componente Spreadsheet
(Airtable). Esse serviço de armazenamento lembra
muito o Excel, porém com muitas funcionalidades
inovadoras, com um visual bem
estruturado e moderno. Lá é possível armazenar
diversos dados, além de possuir integrações com
outras plataformas. Lembrando que o Airtable é
gratuito, porém oferece também serviços pagos.
Ao longo deste e-book nós iremos ver diversos
exemplos do uso do Airtable. Fique ligado(a), que
temos muita coisa para aprender :)
Para armazenamento de imagens, vídeos e áudios:
Mas afinal, você sabe a diferença do BD Firebase para
os demais?
Antes de começar a te explicar, vamos há alguns
questionamentos:
 
1.   Sou novo nesse mundo da programação.
2.   Há, sou apenas um curioso.
3.   Acabei caindo de paraquedas nessas plataformas de blocos.
4.   Não entendo nada, apenas vejo tutoriais e copio. 
 
Se a soma desse questionamento for igual a 10 então comece a
ler a partir do texto em negrito.
 
Se a soma for inferior a 7 então comece a ler a partir do texto
em itálico.
Quando você curte o processo de aprendizado as coisas
começam a fluir, o que vai fazer você conseguir
aprender a programar nessa plataforma ou em outra
qualquer não será apenas o fato de gostar, por paixão
ou encantamento. O processo é longo e tudo isso vai
exigir que você seja disciplinado, contínuo e muito
paciente. 
 
 
Fico feliz que não tenha pulado etapas. E então vamos
lá!
- Cloudinary
BANCO DE DADOS
O Firebase é um banco de dados NOsql, onde promove soluções de
armazenamentos de dados não relacional. Uma das suas principais
vantagens em relação a isso é por não possuir schema, ou seja, não é
necessário criar tabelas, definir chaves primárias e estrangeiras.
 
Outra diferença em relação a outros bancos de dados, são os seus
dados armazenados na cloud no formato JSON (Javascript Object
Notation).
 
 
Estrutura do Firebase
 
Os dados do Firebase Realtime Database são armazenados como
objetos JSON. Tente imaginar essa estrutura como uma árvore, onde
esses dados são hospedados na nuvem e ao contrário de um banco
de dados SQL, no firebase não há registros e nem tabelas.
 
Na imagem abaixo estão alguns testes que eu utilizei em alguns
projetos que foram lançados no meu curso da Udemy. Acesse o link 
na próxima página e conheça o curso, lá tem muito conteúdo legal!
 
 
 
 
 
 
 
 
 
 
 
 
 
*Schema: É uma coleção de objetos de um banco de dados que serve
para agrupar objetos, ou para realizar divisões departamentais.
BANCO DE DADOS
Algumas coisas só passam a fazer sentido quando são
colocados em prática. Pensando nisso que eu reuni alguns
vídeo para testes utilizando o Firebase.
O vídeo abaixo é do Desenvolvedor Deivid Rothen, ele ensina
você a fazer o CRUD, que na programação é conhecido como
Create, Read, Update e Delete. São as quatro operações
básicas que podem ser feitas num banco de dados.
Inserir os dados e fazer a leitura deles. 
Editar e excluir os dados já existentes. Fique bem atento
ao conteúdo, aprender a utilizar banco de dados será de
suma importância para alcançar grandes objetivos.
Firebase
O  Firebase possui diversas funcionalidades, o mesmo
vem crescendo a cada dia. Então dito isso,
dependendo do seu projeto vale a pena ver se é viável
ou não.
 
Bom, nosso próximo passo será desenvolver uma tela
de login utilizando o firebase para autenticar usuários
através de uma confirmação por sms.
Firebase
Aqui estão os preços que o
Firebase oferece por seus
serviços. 
Como citado anteriormente de forma breve, o
componente  CLOUDINARY  permite fazer upload e
armazenar mídias como imagens, vídeos e áudio.
Cloudinary
Então para isso, entre no site do Cloudinary,crie a sua
conta e todas as credenciais estarão disponíveis desta
forma.
Depois de arrastar o componente para o projeto, é
necessário inserir suas credenciais. 
Suas credenciais estarão aparecendo no
cabeçalho do site na aba Dashboard, então
basta copiar e colar todas as informações na
propriedade do componente.
Use este bloco para fazer upload
do arquivo de mídia especificado
para sua biblioteca de mídia
Cloudinary. Este bloco é quando a mídia
estiver carregada, ele informará
se foi sucesso ou não o envio.
Que tal construirmos uma aplicação
utilizando o Airtable?
Airtable para armazenar nossos dados
Extensão do cardview
Bom, a proposta deste tutorial é te ensinar a obter dados
do airtable e colocar em vários cardviews, vamos lá para a
prática?
 
O que utilizaremos:
 
Primeiro acesso
Clique no link e abra o
AIRTABLE para criar uma
conta.
Clique no botão + e escolha a opção "Import a
spreadsheet" e adicione o nome da tabela, aqui eu
coloque o nome cardview.
Airtable
Esta é a visão incial da nossa tabela pós criação.
Com dois cliques você pode alterar nome da tabela,
nome da coluna, sinta-se à vontade.
Nossa planilha ficou assim, coluna id, título, hora,
data, obs e imagem. Mãos a obra, preencha tudo ai
no seu baseado na imagem abaixo, com as
informações que você desejar.
 
Quanto a coluna de imagem, esses links estão vindo
do banco de dados do cloudinary. Crie uma conta lá e
coloque as imagens que desejar, depois disso basta
copiar o link para o airtable.
1
2
...Vamos para os blocos agora.
Sua tela precisa estar exatamente
assim, procure os componentes e arraste
para a sua tela. Depois disso, importe a
extensão do cardview. Lembrando que
para fazer o download você precisa
acessar o final deste guia.
Você precisa configurar suas
spreadsheets, para isso, vá para o
próximo passo observando esta
imagem aqui, ok?
2
3
4
Repita isso para todas as
spreadsheets.
Clique em "Regenerate
API key" e volte para a
aba anterior. Esse
procedimento precisa
ser feito para que a
chave seja gerada.
Volte para a aba do seu airtable
e clique em "Account" como na
imagem ao lado.
Com a aba anterior em
aberto, clique em <> API
Documentation.
Após os cliques como ilustrado na imagem, agora basta
pegar suas credenciais e retornar para a imagem 4 para
preencher, o nome da tabela precisa estar corretamente
também
5
6
7
8
Agora inicializamos a tela com a obtenção da primeira coluna
de dados, acredito que você já esteja familiarizado o
suficiente para acompanhar a imagem abaixo, correto?
Não esqueça de criar as variáveis globais para cada
spreadsheet que utilizaremos.
Agora iremos obter os dados da nossa coluna. O bloco usado
para a obtenção é o .Got Column.
Para cada coluna atribuimos os seus valores - "values" onde
ficará armazenado nas variáveis globais criadas lá em cima.
Ao chegar na última coluna, colocaremos os dados em
uma variável que posteriormente usaremos nos nossos
CardViews.
Criei um procedimento para criar listas vazias, para
que toda vez que seja obtido os dados, primeiro
verifique que eles não contenha informações.
É ruim para você assimilar tudo na base da
leitura e observação? 
 
Eu também tenho conteúdo em vídeo, assista agora
mesmo essa aula gratuita, lá eu também mostro o
resultado de como ficará o app. Não esquece de testar
em!
Bom, para você que possui dúvidas sobre o uso do
airtable, leia com atenção.
O seu uso é gratuito com algumas limitações, veja a
abaixo pequenas diferenças:
Notas sobre o AIRTABLE
Gratuito: 
Registros na base: 1.200
Criação de base ilimitada
Armazenar anexos: 2GB
Plus $10/mês no plano anual:
Registros na base: 5.000
Criação de base ilimitada
Armazenar anexos: 5GB
Pro $20/mês no plano anual:
Registros na base: 50.000
Criação de base ilimitada
Armazenar anexos: 20GB
Todas essas informações estão contidas no site do
airtable. Dependendo do seu projeto, vale muito a
pena utilizar essa plataforma.
MEU CURSO
Clique no na imagem abaixo para entrar na página do meu
curso. Acesse a grade curricular, veja a página inicial, lá tem
toda a descrição e algumas aulas em aberto para você
degustar. 
O curso passou por diversas atualizações desde o seu início.
Vale a pena dar uma passadinha aqui para
apreciar.
Ah Juliana, eu nunca programei, esse é o meu primeiro contato.
Ok! vou te explicar de forma simples e de fácil compreensão.
Uma extensão é um recurso a mais que você tem para inserir
nos seus projetos, exemplo, se você deseja inserir algum
componente, mas o kodular não fornece, então uma extensão
serve de alternativa. Existem diversos sites e desenvolvedores
que nos fornecem esse tipo de ajuda, alguns pagos, outros
gratuitos.
 
Segue abaixo algumas extensões juntamente com o seu uso.
EXTENSÕES
Você já precisou usar extensões nos seus projetos?
Extensão: Gradiente em um Layout. 
 
Essa extensão oferece cores degradê no layout horizontal ou
vertical. Você pode inserir diversas cores na sua tela. No
exemplo abaixo o criador da extensão utilizou 4 cores.
*Lembrando que o formato das extensões é .aix
EXTENSÕES
Chegou a hora de testar outra extensão, desta vez
em vídeo. Bom, é uma extensão de terceiros no qual é
possível inserir um menu com submenu. Confira:
Para adquiri a extensão mostrada no vídeo é
necessário você baixar o aplicativo abaixo. Basta
clicar na imagem para ser direcionado.
Não limite a sua mente, há uma
infinidade de ideias para serem
colocadas em prática, você vai ficar
esperando até quando?
Vou te mostrar um site incrível com mais de
3.000 mil ideias de aplicativos. Vem comigo!
O nome do site é "Ideas Watch" . Inúmeras ideias são
postadas neste local, onde é possível ver a interação
entre usuários, confesso que algumas ideias são sem
nexo algum, porém é compensado com outras que são
muito boas, então vale a pena conferir.
Clique aqui no link e confira o site.
Visão do site
API'S
Você sabe o que é e para que serve uma
API?
Application Programming 
Interface?
Isso mesmo, a API é a interface ideal para que um
sistema se comunique com outro sistema,
compartilhando suas ações, ferramentas, padrões e
protocolos, gerando uma conversa de sistema para
sistema.
 
As Api's possibilitam ter serviços como, reservas de
hotéis, compras de passagens áreas ou até mesmo
realizar cálculos de fretes. Tudo isso é realizado
através de requisições de dados de sites web.
 
Eu separei um vídeo sobre como integrar  uma API
simples do Mercado de Bitcoins.
Nele é utilizado um componente web para obter os
dados através do método Get, acionando a Url em
questão.
API'S
Assista o vídeo abaixo para entender melhor sobre
solicitações de dados via API.
E ai, curtiu? Essa é uma das diversas
formas de se fazer requisições de
dados. 
Após  a atualização do kodular novas implementações
surgiram, como por exemplo a de importar e exportar
blocos no formato png. Quando você exporta os blocos
como imagem PNG, um arquivo XML também é
adicionado à imagem. Portanto, quando você importa de
volta para o Criador, ele analisa o arquivo XML e cria os
blocos a partir dos metadados que estão dentro da
imagem. Vamos entender como funciona.
 
EXPORTANDO BLOCOS
 
Selecione seu bloco desejado e clique com o botão direito
do mouse. Depois clique na opção  "Download de blocos
como PNG" .
Importar/Exportar Blocos
Note que o download é do bloco selecionado e não de
todos os blocos.
IMPORTANDO BLOCOS
 
Basta arrastar o bloco baixado para a tela de
programação como mostrado na imagem abaixo.
Importar/Exportar Blocos
Esse recurso possui algumas limitações como por exemplo, 
o compartilhamento de blocos com terceiros e se caso você
edite a imagem após o download.
 
Caso precise compartilhar os seus blocos com alguém opte
por fazer isso através do Google Drive, Dropbox e caso
necessite enviar pelo Whatsapp, escolha a opção
documento, pois caso envie diretamente da galeria, as
propriedades da imagem é modificada. Lembre-se que o
XML precisa ser mantido.
Segundo a App Inventor Java Bridge é uma versão
exploratória (alfa) do App Inventor quepermite gerar um
equivalente em Java dos aplicativos que você criou.
Java Bridge
Curiosidade!
Se você possui algum aplicativo pronto na plataforma do
App Inventor, vale a pena testar transformando os seus
blocos em linhas de código.
Saiba mais:
http://www.appinventortojava.com/
http://www.appinventor.org/jbridge 
Publicar aplicativos
Você já se imaginou tendo um aplicativo publicado na
playstore?
Se a sua resposta for sim, logo abaixo tem o passo a
passo para você publicar o seu primeiro app. Veja:
Caso não saiba como exportar o seu projeto para
transformar em apk, veja o procedimento abaixo.
Publicar aplicativos
Com o projeto finalizado, clique em "Export" e escolha
se prefere escanear o QR Code para baixar o
aplicativo direto no seu celular, ou se prefere apenas
salvar no seu computador.
Alguma dúvida sobre o procedimento? 
 
Entre em contato comigo:
 
� Meu site https://juoliveira.com.br/ 
� Instagram: https://www.instagram.com/programacao_em_blocos/
�E-mail: programacaoemblocos@juoliveira.com.br
 
Links úteis
Acesse o link abaixo para fazer o download dos
arquivos .aia para testes.
Meu Canal | YouTube
Arquivos .aia fornecido na comunidade do thunkable,
aproveite!
Canal Parceiro | YouTube

Outros materiais