Bem-vindo a uma nova lição do curso de Programação para Makers com o Arduino e Protocoder!. Nesta entrada vamos instalar o Protocoder no nosso terminal, seja um telefone ou um tablet, e vamos dar os primeiros passos. Protocoder é um ambiente de desenvolvimento para prototipagem rápida de aplicações para Android. Inclui um IDE web completo e inúmeros exemplos. E tudo isto…no nosso bolso!
Descarregar a aplicação móvel
O primeiro passo é descarregar a aplicação. Para isso temos que ir à página do Protocoder e aceder à secção de downloads. Convém descarregar a aplicação do Protocoder, no terminal que vamos utilizar.
Podes descarregar qualquer uma das duas versões existentes. A única diferença entre ambas é que a versão normal não inclui permissões para mensagens de texto e chamadas, e por isso, não poderemos utilizar estas características. Quando pressionamos sobre a versão que escolhemos, vai ser descarregado um arquivo .apk (ou Application Package File, em portugês Ficheiro do Pacote da Aplicação). Se descarregarmos a aplicação do nosso dispositivo Android, basta pressionar sobre a notificação de download, e será instalada. Em caso contrário, temos de copiar a aplicação para o vosso terminal e a partir de um explorador de arquivos, instalar a aplicação do Protocoder. Se nunca instalaste nenhuma aplicação utilizando um arquivo .apk, irá aparecer uma mensagem de aviso. Para que não apareça e possas instalar a aplicação, tens de seleccionar a opção Permitir origens desconhecidas dentro do menu Segurança, nas Definições do Android. A seguir podes ver um vídeo com a instalação do Protocoder:
Aceder ao IDE do Protocoder
Para programar em Protocoder, podemos utilizar um ponto de acesso Wi-Fi, em que estejam conectados tanto o dispositivo Android, como o computador que estejamos a utilizar (este é o método recomendado para utilizar) ou ambos estejam conectados através de um cabo USB (método explicado na página web a seguir aos downloads). Para aceder ao ambiente de desenvolvimento ou IDE do Protocoder, é necessário utilizar um navegador web e introduzir o endereço IP que aparece na parte de baixo da interface do Protocoder. Podes ver um exemplo na imagem seguinte:
Quando tivermos acedido, podemos começar a criar os nossos próprios programas.
Criar um novo projecto
Para criar um novo projecto, temos que pressionar sobre o botão New Project na interface do Protocoder, ou na aplicação do Protocoder para Android, pressionamos sobre o ícone Menu (canto superior direito) e depois em New. Depois, só falta atribuir um nome a este novo projecto e estamos prontos para começar a criar. A este projecto chamaremos “Ola_mundo” e vamos utilizá-lo para começar a entender como funciona o Protocoder e dar os nossos primeiros passos. Uma vez que o projecto esteja criado, começaremos a editá-lo.
Editar o projecto
Para editar o projecto temos que aceder ao endereço IP, como explicámos anteriormente em Aceder ao IDE do Protocoder, e pressionar sobre o projecto que acabámos de criar, se o criámos a partir da interface móvel. No caso de termos criado o projecto a partir da interface web, já estaremos dentro do editor.
Na parte superior do ecrã, encontramos as opções relativas ao projecto: Save, que nos permitirá guardar o projecto; Projects, que vai mostrar no ecrã, uma a lista dos nossos projectos e exemplos; e Run, que executará o código no nosso terminal. Na parte direita, encontramos Quick Reference ou referência rápida, onde podemos encontrar os diferentes “comandos” que poderemos incluir no nosso projecto. Mesmo por baixo da referência rápida, encontramos uma caixa onde podemos inserir qualquer tipo de arquivo (como imagens ou audio), para podermos utilizar no nosso equipamento. Para eliminar os arquivos inseridos no nosso projecto, a partir de um explorador de arquivos no nosso terminal móvel, temos que abrir a pasta do Protocoder, e procurar a pasta do projecto, para desta forma podermos eliminar assim os arquivos que quisermos. Existe também uma consola na parte inferior do ecrã, onde podemos imprimir informação e ver as mensagens de aviso, se existir algum erro na programação.
Criar o “Olá mundo!
O Protocoder utiliza o Javascript para facilitar a escrita de aplicações Android, por isso, utilizaremos a sintaxe própria desta linguagem. Para além disso, poderemos utilizar funções próprias do Javascript nos nossos programas. Para este projecto, vamos criar uma caixa de texto que ocupe praticamente a largura do ecrã. Existem algumas opções que se costumam colocar como “cabeçalho” de todos os programas. Estas são:
|
1 2 3 4 5 |
ui.toolbar.title("¡Hola mundo!"); // Modificamos o título ui.toolbar.bgColor(55, 155, 155, 255); // Modificamos a cor da barra de título ui.toolbar.show(true); // Forçamos a que mostre a barra de título //ui.screenMode("fullscreen"); // É possível fazer com que a aplicação apareça maximizada ou <em>fullscreen</em> ui.screenOrientation("portrait"); // Forçamos a que a aplicação apareça em modo retrato |
Não é obrigatoriamente necessário incluir estas opções, mas se o fizermos, poderemos ter um maior controlo sobre como se mostrará a nossa aplicação. A seguir, vamos declarar variáveis que ajudarão a que os elementos visuais que criarmos, se ajustem a qualquer tamanho do ecrã, tornando mais fácil a partilha da nossa aplicação, sem necessidade de modificações ou ajustes. Para declarar uma variável, utilizamos a sintaxe:
|
1 |
var nome_variavel = dado; |
Em contraste com outras linguagens de programação, as variáveis em Javascript “adaptam-se” ao tipo de dados que atribuirmos, e por isso, na declaração de variáveis, não é necessário definir o tipo de variável.
|
1 2 3 |
var margin = 10; // tamanho da margem que utilizaremos var w = ui.screenWidth - 2*margin; // utilizaremos a variable <em>w</em> como largura para os elementos var h = 150; // utilizaremos a variable <em>h</em> como altura para os elementos |
Ao incluir a linha de código var w = ui.screenWidth – 2*margin, estamos a garantir que qualquer elemento que possamos incluir dentro da interface do utilizador, ocupará praticamente o tamanho completo do ecrã em qualquer terminal. Uma vez configurado o “cabeçalho” da nossa aplicação (que podemos guardar à parte e utilizar como “modelo” para cada vez que criarmos uma nova aplicação. Vamos agora declarar e “configurar” o elemento que formará a nossa primeira aplicação. Para isso, utilizamos o seguinte código:
|
1 2 3 |
var olaMundo = ui.addText("Olá Mundo!",margin,margin,w,h); // os parâmetros são <em>texto, posição X, posição Y, largura, altura </em> |
Tal como em qualquer variável, devemos em primeiro lugar atribuir um nome. Depois utilizamos ui.addText() que indica ao Protocoder, em primeiro lugar, que a variável que vamos criar está dentro da API da UI (do inglês User Interface, ou interface do utilizador) e em segundo lugar, que queremos adicionar texto. Dentro do parêntesis enviamos os parâmetros necessários para gerar o texto, que são:
|
1 |
ui.addText(texto_a_mostrar,posição_X,posição_Y,largura,altura); |
Os diferentes elementos que podemos incluir, possuem diferentes parâmetros. Para saber o que é cada parâmetro, utilizaremos os exemplos e a referência. Uma vez terminado o desenvolvimento da aplicação, pressionamos em Run … e veremos como se executa a aplicação no nosso terminal. Também podemos aceder às aplicações que criámos, a qualquer momento, a partir do nosso terminal, clicando no ícone de cada aplicação, no menu Projects.
Partilhar o nosso projecto
A partir da lista de projectos do Protocoder no terminal móvel, pressionamos sobre o ícone do menu contextual (três pontos) no canto superior direito do nome do projecto. Depois, pressionamos em Share project as .proto file e por último, escolhemos o serviço através do qual queremos partilhá-lo. Já podes começar a criar os teus projectos e a partilhá-los!
