MInicurso Thunkable apostila PDF

Preview

Summary

Download MInicurso Thunkable apostila PDF

Description

MINI-CURSO Desenvolvimento de aplicativos simples através do Thunkable

SOBRE O AUTOR Diego Lopes atualmente é aluno de doutorado no programa de pósgraducação em Engenharia Elétrica da UFPE. Mestre em engenharia elétrica em sistemas de processamento de energia pela UFPE (2016) e graduado em Engenharia Elétrica com ênfase em eletrônica e controle e automação pela UFCG (2011). Atualmente realiza pesquisas na área de avaliação do desempenho de dispositivos isolantes submetidos à ambientes poluídos através da aplicação de métodos computacionais. Possui experiência com atividades de projeto e comissionamento na área de MPCCS de sistemas elétricos, bem como a participação em projetos em sistemas embarcados. Além de professor do IFPE desde 2018.

ÍNDICE 4

Sobre o Thunkable

9

Usando o Thunkable

12 Primeiros Aplicativos 29 Outras Ferramentas Úteis 31 Conclusões

SOBRE O THUNKABLE

O QUE É O THUNKABLE?

O thunkable consiste em uma plataforma na qual qualquer pessoa pode desenvolver seu próprio aplicativo de celular, seja para Android ou iOS, de maneira fácil, simples e rápida. Em geral, quando o assunto é desenvolvimento de aplicativos móveis, é necessário que o desenvolvedor tenha conhecimentos mais aprofundados sobre como desenvolver códigos em uma determinada linguagem, bem como lógica de programação. Com o objetivo de facilitar o processo de concepção de um aplicativo, o thunkable foi criado. Fornecendo uma linguagem simples de blocos, ou seja Low Code (baixo código), e um conjunto de ferramentas já incorporadas para uso do desenvolvedor, como acesso ao maps, banco de dados, adsense, sensores, dentre outros.

COMO O THUNKABLE SURGIU? O thunkable é derivado de uma iniciativa chamada de App Inventor for Android. Tal iniciativa foi criada pela Google e atualmente é mantida pelo Massachusetts Institute of Technology (MIT), com objetivo de facilitar o desenvolvimento de apps. O AppInventor foi disponibilizado em 12 de julho de 2010, e lançado publicamente em 15 de dezembro de 2010. O App Inventor Team foi liderado por Hal Abelson e Mark Friedman. No segundo semestre de 2011, a Google lançou o código fonte, rescindiu o seu servidor e forneceu o financiamento para a criação do MIT Center for Mobile Learning. Em seguida a versão do MIT foi lançada em março de 2012.

4

Então Arun Saigal e WeiHua Li, integrantes do time de desenvolvedores do AppInventor, perceberam que a ferramenta estava sendo bastante utilizada em diversas aplicações devido ao potencial que a ferramenta apresenta. Não apenas para o desenvolvimento de aplicativos no ambiente acadêmico, e sim para as mais diferentes soluções. Visando a maior qualidade dos aplicativos resolveram tornar a ferramenta mais profissional. Dessa maneira nasce o Thunkable, com suporte a desenvolvimento não só de aplicativos Android, mas também em iOS, e fornecendo acesso a diversas funções não incorporadas pelo MIT App Inventor. O Thunkable possui uma versão gratuita, com algumas limitações, e uma versão paga que custa 25 dólares por mês, mas com mais funções, mais espaço de armazenamento, possibilidade de deixar os projetos privados e sem a marca d'agua do Thunkable no aplicativo ao qual a pessoa está desenvolvendo.

KODULAR Na mesma linha de desenvolvimento, baseado no MIT AppInventor, existe também o Kodular. Possui um modo de funcionamento similar ao Thunkable, ou seja Low Code e desenvolvimento de aplicativos nativos. Essa ferramenta não será abordada durante o minicurso. Mas ela possui algumas vantagens interessantes quando comparado ao Thunkable. Uma delas é que a versão é totalmente de graça e com acesso a todas as funcionalidades. O Kodular só cobra caso o aplicativo possua monetização, e o pagamento é sobre uma porcentagem das receitas advindas do app. Uma das principais desvantagens é que o Kodular só fornece a possibilidade de desenvolvimento de apps Android.

5

Dada a similaridade, os conhecimentos apresentados aqui, com relação do Thunkable, podem ser facilmente aplicados ao Kodular e ao MIT App Inventor.

COMPARATIVO ENTRE AS PLATAFORMAS A seguir temos um resumo comparativo, referente as principais características, entre as ferramentas citadas anteriormente:

App Inventor Apenas Android. Gratuito. Não permite monetização. Menos componentes que os outros.

Thunkable Android/ iOS. Gratuito / Pago. Permite monetização. Menos componentes que Kodular.

Kodular Apenas Android. Gratuito / Pago. Permite monetização. Mais completo das opções.

Apesar de algumas diferenças, todas essas plataformas possuem em comum a facilidade de desenvolver aplicativos para dispositivos móveis. Sendo necessário apenas um computador com acesso a internet, algum conhecimento sobre lógica de programação, mas sem a necessidade de conhecer os por menores de uma linguagem específica, e um celular para ver o aplicativo em funcionamento. Outro ponto a ser ressaltado, é que essas ferramentas são para desenvolvimento de aplicativos nativos, ou seja, que funcionam offline, sem a necessidade de conexão com a internet para seu funcionamento. Caso queira outras ferramentas, porém com o objetivo de aplicações web sugiro olhar o .bubble, o glide e o appsheet. Essas ferramentas são totalmente No Code, ou seja, diferente do invetor, são o desenvolvimento é 100% visual, sem a necessidade de programação em blocos.

6

Mesmo com as vantagens apresentadas, só é recomendado o uso de tais plataformas para aplicativos mais simples e sem a necessidade de aumento de escala, preocupação com segurança e que não necessitem de alto desempenho. Visto que o desenvolvedor fica dependente da plataforma, e caso esta plataforma venha a fechar, ou retire alguma das funcionalidades que você utiliza, acaba não tendo como atualizar mais seu aplicativo. Por isso para aplicativos mais complexos é interessante o uso de outras ferramentas, porém tais ferramentas necessitam de um conhecimento maior de determinadas linguagens de programação. Se realmente gosta, e quer, dedique um tempo estudando mais sobre o assunto, vai valer a pena. Algumas das tecnologias utilizadas no desenvolvimento de aplicativos móveis são:

Dentre muitas outras. Tais ferramentas exigem um conhecimento maior sobre desenvolvimento de softwares. Entretanto, o desenvolvedor pode ter tudo armazenado no seu computador, ou em caso de projetos mais complexos, compartilhado no github com os outros membros dos projeto. É possível encontrar muita informação sobre o desenvolvimento de aplicativos na internet. Surgiro que dê uma olhada geral nas tecnologias atuais assim como na documentação do projeto que mais te interessar.

7

Porém, o objetivo deste minicurso é o desenvolvimento de aplicativos simples, para quem está apredendo, ou não quer dificultar muito o processo, essas ferramentas de desenvolvimento mais visuais, Inventor, Thunkable e Kodular, são excelentes. O Thunkable oferece duas plataformas para criar seus próprios aplicativos sem precisar programar, apenas definindo a interface e arrastando os blocos para construir a lógica. As duas plataformas oferecidas pelo Thunkable são o Thunkable Cross-Platform X e o Thunkable Classic Android. O Cross-Platform possibilita o desenvolvimento de aplicativos para iOS e Android, já o Thunkable Classic apenas para Android. Ambos são bem semelhantes, mas nesse minicurso será utilizado o Thunkable Classic. Provavelmente existe o equivalente dos blocos para o Cross-Platform X sem grandes problemas.

MAIS INFORMAÇÕES SOBRE O THUNKABLE Além do site oficial (https://thunkable.com/), a iniciativa Thunkable está presente em diversas redes sociais.

@thunkable

@thunkable

@thunkable

@thunkable

O Thunkable também possui uma comunidade (https://community.thunkable.com/), em que seus membros trocam experiências e tiram dúvidas.

8

USANDO O THUNKABLE

CRIANDO CONTA

Primeiramente é necessário fazer login no Thunkable, para isso é necessário possuir uma conta no google. Após criar uma conta google basta acessar o site do Thunkable Classic for Android realizar o login. Também é possível desenvolver utilizando a Thunkable cross platform x, caso prefira, ou caso seu dispositivo móvel seja iOS. Infelizmente só é possível utilizar o Thunkable com uma conta no google, caso não tenha, é bem simples. Entre no site do www.google.com e crie uma conta, é de graça.

Para criar um novo aplicativo basta clicar em "Create New App". É possível mudar o idioma para português, caso ache mais prático pode fazer isso. Recomendo que use em inglês, pois tem mais exemplos prontos nesse idioma e é mais fácil replicá-los.

9

CRIANDO APLICATIVOS Para criar aplicativos é necessário clicar em "Create New App". Existem dois ambientes de desenvolvimento do Thunkable. Um para o desenvolvimento da interface, ou seja, das telas de iteração com o usuário, chamado de Thunkable Designer. É nele em que serão criados os botões, inserido as figuras, os sensores e todos os elementos que serão utilizados pelo aplicativo.

O outro ambiente é Thunkable Blocks Editor, ou, editor de blocos Thunkable, em português. É neste ambiente que a lógica será desenvolvida através da programação em blocos. Nele são definidos como os elementos da interface se comunicam, entre eles e entre os outros elementos não-visuais, como sensores. Os elementos presentes no editor de blocos são apresentados na imagem apresentada a seguir.

10

Para verificar o programa feito na plataforma online do thunkable é necessário instalar em seu dispositivo móvel o aplicativo Thunkable Live.Com este aplicativo é possível rodar as aplicações em desenvolvimento sem a necessidade de instala-las em seu dispositivo.

Basta instalar algum dos dois em seu dispositivo móvel. Neste minicurso, utilizaremos a versão classic.

11

Também existe a possiblidade de gerar o .apk, caso seja Android, ou .ipa no universo Apple, e ter os aplicativos criados de forma mais definitiva. Para realização do teste basta gerar um QR code referente ao aplicativo, no ambiente de desenvolvimento do Thunkable, e ler o mesmo com a câmera do celular através doThunkable live. Neste minicurso serão apresentados sete aplicativos simples, com o objetivo de introduzir a forma de utilização da ferramenta. É importante salientar que existem outros componentes presentes no Thunkable, e que não serão abordados neste minicurso. Para aprender como utilizar estes componentes, sugiro procurar exemplos prontos nos links apresentandos na subseção "Mais informações sobre o Thunkable". Se for o caso até procurar tirar dúvidas com outros desenvolvedores mais experientes, presentes na comunidade da plataforma.

12

PRIMEIROS APLICATIVOS

Como dito anteriormente, serão apresentados sete exemplos de aplicativos que podem ser feitos com o Thunkable. Cada um deles com o objetivo de introduzir um componente, ou funcionalidade, específica.

APLICATIVO 01: USO DE BOTÕES O primeiro aplicativo é bastante simples, consistindo em mudar o que está escrito em um botão, assim como sua cor. O objetivo principal com esse aplicativo é entender a mecânica de desenvolvimento ao usar o Thunkable. Este aplicativo é apenas um botão que, quando pressionado, muda de estado, mudando a mensagem a ser exibida e a cor de fundo do botão.

Como apresentado anteriormente, existem dois ambientes dentro do Thunkable. Um para o desenvolvimento da interface e o outro da lógica, através dos blocos. Primeiramente desenvolveremos a intereface, para isso vamos no lado esquerdo da tela, selecionamos e arrastamos o Button para a telinha do celular.

13

Arraste para cá

Após a inserção do botão na interface, o mesmo pode ser customizado utilizando as propriedades no lado direito do ambiente do Thunkable.

Customize seu botão através destas propriedades.

Primeiramente, mudaremos a posição do botão dentro na tela. Isso pode ser feito acessando as propriedades da tela e mudando o campo Align Vertical deTop para Center e mudamos o título da tela. Em seguida são alterados as propriedades referentes ao botão em si, e não mais a tela. Pode-se customizar da maneira que você quiser, neste caso colocamos o botão para ocupar toda tela horizontalmente e 30% da tela verticalmente, com o fundo preto e a fonte 14.0 em negrito na cor branca. A fonte utilizada foi a fonte "padrão" (default).

14

Alteração do título Alterando o alinhamento move o botão

Abaixo é possível modificar o título da tela Após as alterações nas propriedades do botão, chegamos ao seguinte resultado:

Com a interface pronta é possível fazer a lógica referente ao aplicativo, ou seja, como o mesmo funciona ao longo da interação com o usuário. Para isso é utilizada o ambiente de blocos. Para este aplicativo é necessário apenas arrastar um bloco referente ao que acontece quando o botão é pressionado. É nada mais é que a substituição do texto apresentado por outro texto, bem como a mudança de cor do fundo de preto para vermelho.

15

mundança do ambiente design para blocks

arrasta e solta pra cá funções do botão

Agora é necessário colocar o que acontece ao pressionar (clicar) o botão.

As funções de modificação e atributos do botão estão em Button1

O texto a ser inserido e a cor estão em Built-in -> Text e Built-in -> Colors

Após terminar de desenvolver o aplicativo, é necessário testar o mesmo. Isso é possível gerando o fazendo o download do .apk, no caso Android, ou através da geração de um QR-Code lido pelo aplicativo do Thunkable em seu smartphone. Para gerar o QR-Code clique em Test -> Thubkable Live, nesse momento o QR-Code irá surgie na tela, escaneie com o celular e veja o aplicativo rodando em seu celular. Caso queira gera um arquivo do aplicativo em si, basta ir emExport save .apk to my computer ou provide QR-Code for .apk.

16

Em seguida o QR-Code é gerado.

É possível usar o aplicativo lendo o QR-Code ou escrevendo o código fornecido. Divirta-se com o aplicativo no seu celular! Visando a economia de espaço, bem como a redução da repetição de vários passos, os aplicativos a seguir serão apresentados como gabaritos. Em outras palavras, apresentaremos a interface pronta e a lógica da programação. Serão realizados alguns comentários, com o objetivo de esclarecer alguns pontos, mas não será apresentado um passo-a-passo.

17

APLICATIVO 02: USANDO IMAGENS E SONS O próximo aplicativo consiste, simplesmente, na inserção de um botão com uma imagem. Ao pressionar o botão o aplicativo emite um som. Neste exemplos colocamos um Bode, e ao pressionar ele emite um berro. Toda edição da interface deve ser feito no ambiente de designer. Para inserir a imagem desejada no botão, basta ir nas propriedades do mesmo, em image, fazer upload da imagem desejada e substituir. Da mesma forma para inserção do som a ser emitido, é necessário ir em Media -> Sound arrastar e soltar tal elemento no ambiente de desenvolvimento. O som é um nonvisible component, ficando exposto abaixo da figura do celular. Para inserir o som é semalhante a inserção da imagem no botão. No lado direito podem ser acessadas as propriedades do audio. Bastando assim realizar o upload e slecionar o arquivo de som em source. A lógica do aplicativo é super simples de ser feita. Basta ir nos blocos referentes ao botão e escolher a função de quando o botão for clicado. Em seguida chamar o objeto do som e tocar o audio. Conforme apresenta a figura ao lado. Como forma de exercício, faça um aplicativo que a cada vez que o botão é pressionado uma nova imagem é exibida e um novo som é apresentado.

18

APLICATIVO 03: FALA E ACELERÔMETRO No próximo aplicativo serão utilizados os componentes não-visuais de acelerômetro, que identifica a variação de aceleração nos eixos do dispositivo, bem como o text-to-speech que converte um texto em audio, semelhante o google translate. A interface é bem simples, desta vez não será utilizado um botão, e sim o label que apresenta o texto "Não mexa este celular". Justamente indicando para que o usuário não mexa o celular. Ao mexer o celular é emitido uma mensagem, "Para com isso", como se o dispositivo estivesse reclamando por ser balançado. A lógica é bem simples. Novamente no lado esquerdo, na aba Blocks, estão todas as funções dos componentes utilizados, bem como as funções padrão já disponíveis pelo thunkable. Basicamente serão utilizados a função shaking que reconhece quando o celular está sendo chacoalhado, e quando isso acontece, é necessário chamar a função Speak. Essa função faz com que o celular "fale" a mensagem selecionada, neste caso "Para com isso".

Como forma de exercício, faça um "guru do gugu" . É um brinquedo dos anos 90, em que quando balançado fala "sim", "não" ou "talvez" de maneira aleatório. Coloque uma figura na tela do Guru e ao chacoalhar emita a mensagem.

19

APLICATIVO 04: DESENHAR EM TELA Este aplicativo é, nada mais nada menos, que um aplicativo para desenhar na tela com o dedo. No Thunkable é possível facilmente utilizar o canvas, que consiste numa tela na qual coisas podem ser desenhadas e redesenhadas, será utilizado o acelerômetro para apagar o desenho atual. Novamente a interface é bem simples, consistindo apenas no canvas ocupando toda a tela. O canvas é o local no qual é possível realizar desenhos e animações. Caso queira que apenas uma parte da tela seja desenhável, é possível dimensionar o tamanho do canvas. Para finalizar, queremos que ao chacoalhar o celular a tela seja apagada. Isto é feito de maneira semelhante aquela executada no exemplo anterior, só que ao invés de emitir uma fala, apagará a tela. Os blocos referentes a lógica para este programa são apresentados a seguir. É necessário escolher como o canvas irá se comportar a depender de um evento. Neste exemplo escolheremos o evento de arrastar o canvas, ou seja, quando arrastamos o dedo na tela e ele realiza um desenho utilizando a funçãoDraw Line. Para desenhar uma linha é necessário definir os pontos inicial e final nos quais o dedo foi arrastado, delimitando assim a linha a ser desenhada. Para apagar basta perceber que o celular foi chacoalhado e chamar a função Clear do canvas. Como exercício faça um aplicativo de forma que tenha 3 botões para escolher a cor que será utilizada.

20

APLICATIVO 05: ANIMAÇÃO DA BOLINHA Diversos jogos são baseados em física utilizando bolinhas. O Thunkable possui, já próprio, uma maneira de usar o canvas juntamente com bolinhas para fazer alguns jogos, tais como: sinuca, tênis, pong, golfe, dentre outros. Para este aplicativo é necessário utilizar o canvas, a bola (ball) e oacelerômetro, para decidir qual direção a bola deve seguir. A interface é simplesmente uma bolinha. No lado direito, podem ser definidas as propriedades da bolinha, tamanho, posição inicial, cor, etc. Ao mover o celular a bolinha terá sua posição alterada e será redesenhada pelo canvas no próximo instante. O diagrama de blocos necessário para executar essa lógica é bem simples:

O acelerômetro reconhece que a aceleração mudou, neste mommento é necessário calcular a nova posição da bola, subtraindo o deslocamento do eixo X a posição X atual da bola e adicionando o deslocamento do eixo Y a posição Y atual da bola. Perceba que nesse aplicativo a bolinha gruda na parede ao cair. Como exercício faça com que a bolinha quique nos cantos das paredes. O Thunkable já possui funções que reconhecem as bordas do canvas, bem como simulam a física do quicar da bola. Não "reinvente a roda", utilize essas funções prontas.

21

APLICATIVO 06: MULTIPLAS TELAS Em vários aplicativos são utilizadas diversas telas, nais quais podem ser navegadas livremente e com diferentes f...