Apostila De Kodular

Prévia do material em texto

Criação De App’s via Kodular 
 
A programação do Kodular é baseada em blocos que originou em 2007 com a iniciativa Scratch 
pelo MIT (Massachusetts Institute of Technology). 
 
Figura 1: Scratch 
A programação em blocos é baseada em blocos coloridos que substituem comandos em linha, é 
uma alternativa a programação normal. 
 
Figura 3: código em Python 
 
O AppInventor: 
MIT App Inventor, também conhecido como App Inventor for Android, é uma 
aplicação código aberto originalmente criada pela Google, e atualmente mantida pelo 
Massachusetts Institute of Technology (MIT). 
Figura 2: Blocos do Scratch 
 
Figura 4: A interface do app inventor 
Ele permite que os recém-chegados à programação de computador criem aplicativos 
de software para o sistema operacional Android. Ele usa uma interface gráfica, 
semelhante ao Scratch que permite aos usuários arrastar e soltar objetos visuais para 
criar um aplicativo que pode ser executado em dispositivos Android. Ao criar o App 
Inventor, o Google se valeu de pesquisas significativas prévia em informática 
educativa, bem como o trabalho feito dentro do Google em ambientes de 
desenvolvimento on-line. 
 
A plataforma App Inventor ainda é muito instável e amadora, focada e desenvolver 
apenas aplicativos para pesquisas escolares, impossibilitando o desenvolvimento de 
qualquer aplicativo profissional. 
 
O Kodular 
A Kodular foi fundada em 6 de julho de 2017 por Conor Shipp, Diego Barreiro, Mika, 
Pavitra Golchha, Sander Jochems, Sivagiri Visakan e Vishwas Adiga. A primeira versão 
beta pública foi disponibilizada no mês seguinte. Naquela época, os recursos do 
Kodular eram quase iguais aos do MIT App Inventor, e a interface não mudou muito. 
 
Figura 5: A interface do kodular 
A Kodular foi apresentada na Galicia Maker Faire em setembro de 2017, que recebeu o 
prêmio Makers of Merit . Além disso, foi convidado para a InnovAmes, onde a 
plataforma foi apresentada ao público. 
No entanto, em fevereiro, o Kodular foi desligado ao público devido a um grande 
aumento de pedidos. Durante esse tempo, a Kodular tornou-se uma empresa na 
Holanda e foi apresentada na Galiciencia 2017, onde foi amplamente divulgada pela 
imprensa. 
Em 22 de junho de 2018, o Kodular Creator ficou online novamente, o que trouxe 
muitos novos componentes e recursos para a plataforma. Além disso, a Kodular Store 
foi lançada, com Kodular Extensions IDE e Kodular Account . 
Em janeiro de 2019, o Kodular Creator atingiu 100.000 usuários ativos e um total de 
700.000 usuários únicos por dia em aplicativos feitos com sua plataforma. Meio ano 
depois, em agosto de 2019, esse número aumentou para 200.000 usuários ativos na 
plataforma e mais de 1.500.000 usuários únicos diários em aplicativos. Isso torna o 
Kodular Creator uma das maiores plataformas de desenvolvimento Android, com mais 
de 500.000 aplicativos hospedados na plataforma. 
 
 
 
 
 
 
 
Criando App’s 
O primeiro passo é criar uma conta no site https://www.kodular.io/ 
 Clique no botão “Create apps!” 
 
 Logo após aperte em “Create Account” preencha os dados e salve seu registro 
 
 
 
https://www.kodular.io/
 Aperte em “Create Project” 
 
 Preencha com o nome do projeto e clique em NEXT 
 
 
 
 
 
 Theme: Escolha O tema do seu app 
 Min SDK (Min Android Version): A versão mínima disponível para seu app, 
é recomendável deixar a padrão 
 Package Name: Todos os aplicativos Android têm um nome de pacote . O 
nome do pacote identifica exclusivamente o aplicativo no dispositivo; 
também é único na loja Google Play. 
 Primary Color/Title Bar: Defina a cor da barra de titulo 
 
 
Figura 6:Barra De Titulo 
 
 Primary Color Dark/ Status Bar: Defina a cor da barra de Status 
 
 
Figura 7:Status Bar 
Com as configurações definidas a tela aberta é a seguinte 
A tela é dividida em 4 partes sendo elas paleta, visualizador, componentes e 
propriedades 
 Paleta: 
É onde todos os componentes ficam localizados. 
 Visualizador: 
Onde os componentes são lançados para o posicionamento e organização. 
 Componentes: 
Onde os componentes são arranjados para configuração 
 Propriedades: 
Onde definimos as especificações de cada componente 
Para adicionar um componente novo basta arrastar para o centro da tela e usando a 
aba propriedades basta configurar as informações referentes a cada componente 
especifico. 
Ao adicionar um novo componente, ele é adicionado na tela e na aba blocos que fica 
localizada no canto superior direito, ao apertar no botão “blocos” a seguinte tela é 
exibida: 
 
Figura 8:tela de blocos 
Na tela de blocos podemos ver alguns itens coloridos do lado esquerdo cada 
componente desse é uma categoria de blocos diferentes: 
Control: aqui são localizados os blocos de controle, os blocos que controlarão a tela 
em si. 
Logic: aqui são localizados os blocos com valores booleanos (verdadeiro e falso). 
Math: aqui são localizados os blocos com valores e operações matemáticas. 
Text: aqui são localizados os blocos com as alterações de texto. 
Lists: aqui são localizados os blocos com listas 
Dicionários: aqui são localizados os blocos de dicionários 
Colors: aqui são localizados os blocos de cores 
Variables: aqui são localizados os blocos com gerenciamento de variáveis 
Procedures: aqui são localizados os blocos de gerenciamento de procedimentos 
 
 
 
 
 
 
 
Ao clicar em um componente uma barra com cada categoria de blocos é exibida 
 
 
Atividade 1: fazer um aplicativo para alterar a cor de um texto pré-
definido 
Dica: use um botão e uma legenda. 
 
Resposta: 
Passo 1: Adicione o botão e a legenda 
 
Figura 9: Resposta da atividade 1 
 
Passo 2: Acesse os blocos e adicione os seguintes blocos 
 
Figura 10: inserir legenda 
Explicação: 
 
Quando o botão for apertado, então 
 
Mudar a cor do texto para vermelho