programação de aplicativos

mobile I
Aula 03
 Tema da aula:
O que vamos aprender hoje?

01 – Conhecendo a História do ambiente Kodular;

02 – Se familiarizando com o ambiente Kodular;

03 – Criando seu primeiro App “Alô Mundo!”;

2
 1.
Introdução ao Kodular:
O que é Kodular?

- Ferramenta de programação (IDE)

orientada a blocos e eventos;

- A ideia de programar com blocos não

é nova, o Scratch criado pelo MIT (Instituto
de Tecnologia de Massachusetts) criou em
2007 essa ferramenta para ensinar
programação e lógica, a jovens dos 8 ao 16
anos.

3
 2.
Introdução ao Kodular:
- No início dos anos 2000 a Google
desenvolveu uma aplicação on-line, chamado
AppInventor.

A motivação era perder mais tempo na

concepção e idealização do aplicativo do que
com a codificando.

4
 3.
Introdução ao Kodular:
- Com o tempo o projeto foi perdendo força e ficou parado por falta de membros da equipe que
foram remanejados para outros projetos da empresa Google, então o projeto foi abandonado e
disponibilizado para a comunidade de software livre, para quem tivesse interesse em dar continuidade.

- Uma equipe da universidade MIT, no início de 2005, decidiu dar continuidade a este ambiente, que
foi batizado de “MIT App Inventor 2”.

- Novamente o projeto foi paralisado no final de 2008.

- Algumas empresas e comunidades decidiram dar continuidade ao projeto, por ser Open Source,
criando vários forks.

5
 4.
Introdução ao Kodular:
- Surgiram quase na mesma época vários projetos desenvolvido por comunidades diferentes,
Makeroid / AppsBuilder / Thunkable (Cross-Plataform).

- Inicialmente o Thunkable além de melhor em relação aos demais era gratuito, mas depois de
estável e bem evoluído, passou a ser comercializado (pago).

- O Makeroid foi assumido por uma comunidade, a favor de Open Source, e criaram a partir dele um
projeto batizado de Kodular (Código + Modular).

- Como o projeto se sustenta, e difere dos outros que foram abandonados por falta de investimento?

6
 5.
Introdução ao Kodular:
- A politica da comunidade é Free Forever (Livre para sempre). No entanto, para estudo e criação de
outros aplicativos Open Source, não se paga nada.

- Existe duas formas para a comunidade arrecadar fundos:

- Por doações espontâneas (Donate) ou se a pessoa decidir publicar o aplicativo no Google Play com
a intenção de comercializar, neste caso são cobrados uma porcentagem do valor do app ( mais ou menos
20%).

7
 6.
Introdução ao Kodular:
-Free. Forever.

-Sem custo;

8
 7.
Introdução ao Kodular:
Acesse a página inicial
em:

https://www.kodular.io/

Em seguida clique no
botão superior a direita
“Create Apps!”;

9
 8.
Introdução ao Kodular:
Se é a primeira vez que
você acessa, cadastre
gratuitamente clicando no
link “Create Account”.

Se não, basta logar com

seu cadastro, previamente
criado.

10
 9.
Introdução ao Kodular:
Para criarmos nossa
primeira aplicação, clique no
link “Create Project” no canto
esquerdo inferior.

11
 10.
Introdução ao Kodular:
Na caixa de diálogo
escreva “AloMundo”.

- Sem aspas “ ”;
- Sem espaços;
- Sem acento;

12
 11.
Introdução ao Kodular:
Nesta tela podemos
selecionar a versão mínima
do Android para rodar nosso
App, por padrão é o Kitkat
4.4.

Não é necessário mudar

nada.

Clique em “Next”.

13
 12.
Introdução ao Kodular:
Finalmente nossa tela
inicial.

Vamos fazer um tour e

conhecer o ambiente.

14
 13.
Introdução ao Kodular:
Vamos dedicar um tempo para conhecer o ambiente Kodular com o professor...

15
 14.
Introdução ao Kodular:
Tudo certo? Então vamos criar nosso primeiro aplicativo Mobile, chamado Alô Mundo!

Mãos a obra!

16
 15.
Introdução ao Kodular:
1º Na tela inicial do Kodular
temos nossa tela em branco
do aplicativo.

É nela que vamos adicionar

os componentes para montar
o layout de nossa aplicação.

17
 16.
Introdução ao Kodular:
2º Adicione o componente:
Layout >> General >>
Vertical Arrangement

Altere as propriedades:
Align Horizontal: Center
Width: Fill parent

18
 17.
Introdução ao Kodular:
3º Adicione o componente: User
Interface >> Button

Altere as propriedades:
-Background Color: #3F51B5FF
(Azul)
-Font Bold: True (Marque a
caixa)
-Fonte Size: 18
-Shape: Rounded
-Text: Tela 2
-Text Color: #FEEA3BFF
(Amarelo)
Altere o nome do componente
para btnAbreTela2
19
 18.
Introdução ao Kodular:
4º No componente Screen1

Altere as propriedades:

Title: Você está na Tela 1

20
 19.
Introdução ao Kodular:
5º A Tela 1 está pronta agora
vamos definir o layout da
Tela 2.

Clique em Add Screen

21
 20.
Introdução ao Kodular:
6º Adicione o componente:
Layout >> General >>
Vertical Arrangement

Altere as propriedades:
Align Horizontal: Center
Width: Fill parent

22
 21.
Introdução ao Kodular:
7º Adicione o componente:

User Interface >> Label

Altere as propriedades:

Font Bold: True (Marque a

caixa)

Fonte Size: 18

Text: Olá Mundo!

23
 22.
Introdução ao Kodular:
8º No componente Screen2

Altere as propriedades:

Title: Você está na Tela 2

Pronto, nosso layout da

aplicação está finalizado.

Vamos para os blocos de

ação. (Equivalente ao
código).

24
 23.
Introdução ao Kodular:
9º No componente
"btnAbreTela2" selecione o
bloco "when
btnAbreTela2.Click"

25
 24.
Introdução ao Kodular:
10º Em "Control" selecione o
bloco "open another screen
screenName" e encaixe
dentro do bloco "when
btnAbreTela2.Click".

26
 25.
Introdução ao Kodular:
10º Em "Text" selecione o
bloco " " e encaixe ao lado do
bloco "open another screen
screenName".

27
 26.
Introdução ao Kodular:
11º Clique dentro das aspas "
" do bloco de texto e edite
escrevendo o nome da Tela 2,
"Screen2" (sem aspas).

28
 27.
Introdução ao Kodular:
12º Conforme orientações na sala de aula.

Então vamos testar nossa aplicação...

29
 28.
Lição de Casa:
- Tarefa:

Adicionar na segunda tela um botão que volte a primeira tela. Explorar as funcionalidades do
ambiente.

- Objetivo:

Reforçar os conhecimentos aprendidos e mensurar quanto do assunto foi entendido e quais

temas deverão ser revisados, para que o conhecimento seja consolidado.

30
 29.
Lição de Casa:
- Formato de entrega:

Print das duas telas e dos blocos de código (4 prints).

Zipar a pasta com nome completo, exemplo wagner_lucca.zip, contendo os prints.

- Prazo de entrega:

XX/XX/2021

31
 30.
Referências:
Site Oficial do Kodular (acesso em 31/01/2021)

https://www.kodular.io/

Canal do Professor Reginaldo Cândido

https://www.youtube.com/channel/UCYfMj_p-7fRPIEIhSFb6JKQ

32
Obrigado!
Dúvidas?

33