Desenvolvimento mobile
Por: danielvillarinho • 11/6/2015 • Trabalho acadêmico • 4.278 Palavras (18 Páginas) • 560 Visualizações
DESENVOLVIMENTO MOBILE[pic 1]
com MIT APP INVENTOR 2
por Regis Alvim Junot (regisaj@hotmail.com)
Introdução
O desenvolvimento de aplicativos para smartphones e tablets é uma atividade complexa que exige conhecimentos avançados em linguagens de programação. No entanto, esta atividade desperta o interesse de muitas pessoas que não possuem tais conhecimentos, principalmente, dos estudantes de comunicação.
Pensando nisso, em 2010 o Google desenvolveu o App Inventor, uma ferramenta online gratuita de desenvolvimento de aplicativos para o sistema operacional Android, que não requer qualquer conhecimento em linguagens de programação. Em 2011, o App Inventor passou a ser desenvolvido pelo MIT - Massachussets Institute of Technology, que o renomeou para MIT App Inventor. Em 2013, o instituto lançou uma nova versão da ferramenta, o MIT App Inventor 2.
Instalando suporte para o MIT App Inventor 2
Antes de utilizar o MIT App Inventor 2, é necessário realizar os seguintes procedimentos:
1) Instalar o App Inventor 2 Setup no computador. O instalador está disponível para download gratuitamente em http://appinventor.mit.edu/explore/ai2/windows.html.
2) Instalar o aplicativo MIT AI2 Companion no dispositivo Android. Este aplicativo está disponível para download gratuitamente na loja de aplicativos Google Play.
3) Executar o software aiStarter no computador. O aiStarter é instalado junto com o App Inventor 2 Setup.
Acessando o MIT App Inventor 2
O MIT App Inventor 2 pode ser acessado no endereço http://ai2.appinventor.mit.edu em qualquer navegador web e qualquer computador com os sistemas operacionais Windows, Macintosh e Linux. O acesso e se dá através de login e senha com um endereço de e-mail válido no Google Contas.
Obs.: O App Inventor também possui algumas versões offline, desenvolvidas por terceiros. Uma delas é o App Inventor 2 Ultimate, que pode ser instalado em computadores com sistema operacional Windows. O instalador está disponível para download gratuitamente em http://sourceforge.net/projects/ai2u/files.
Apresentando a Interface do MIT App Inventor 2
A ilustração abaixo mostra a seção inicial Projects, onde são gerenciados os projetos.
[pic 2][pic 3][pic 4][pic 5][pic 6][pic 7][pic 8]
1. Barra de Menus - Contem várias opções de recursos e controles para os projetos.
2. Botão 'New Project' - Cria um novo projeto.
3. Botão 'Delete Project' - Exclui um projeto existente.
4. Janela 'Projects' - Lista os projetos existentes.
A ilustração abaixo mostra a Barra de Menus em detalhes.[pic 9][pic 10][pic 11][pic 12][pic 13][pic 14][pic 15][pic 16]
[pic 17]
1. Menu 'Project' - Contem opções de recursos e controles para um projeto em desenvolvimento.
2. Menu 'Connect' - Contem opções para testar um projeto em desenvolvimento.
3. Menu 'Build' - Contem opções para a compilação do aplicativo para um projeto em desenvolvimento.
4. Menu 'Help' - Contem opções de ajuda, tutoriais, fóruns e outras.
5. Botão 'My Projects' - Volta para a seção inicial Projects.
6. Botão 'Guide' - Dá acesso à área de documentação e suporte do MIT App Inventor 2.
7. Botão 'Report an Issue' - Dá acesso à área para o usuário relatar problemas ao MIT.
8. Menu 'E-mail do usuário atual' - Permite sair da ferramenta.
A ilustração abaixo mostra a seção Designer, onde é realizada a diagramação das telas do aplicativo.
[pic 18][pic 19][pic 20][pic 21][pic 22][pic 23][pic 24][pic 25][pic 26][pic 27][pic 28][pic 29][pic 30]
A. Barra de Opções do Projeto - Contem botões de recursos e controle para o projeto atual.
B. Janela 'Palette' - Contem elementos de interface, conteúdo, recursos e funcionalidades para o projeto atual.
C. Janela 'Viewer' - Visualizador das telas do projeto atual.
D. Janela 'Components' - Gerenciador dos componentes inseridos em uma tela do projeto atual.
E. Janela 'Media' - Gerenciador dos arquivos de mídia (imagem, vídeo e áudio) importados no projeto atual.
F. Janela 'Properties' - Editor de propriedades de um componente selecionado na tela do projeto atual.
A ilustração abaixo mostra a Barra de Opções do Projeto em detalhes.
1 2 3 4 5
[pic 31]
1. Menu 'Screen' - Permite alternar entre as telas do projeto atual.
2. Botão 'Add Screen' - Permite adicionar uma tela ao projeto atual.
3. Botão 'Remove Screen' - Permite excluir uma tela do projeto atual.
4. Botão 'Designer' - Dá acesso à seção Designer, onde as telas são diagramadas.
5. Botão 'Blocks' - Dá acesso à seção Blocks, onde as funcionalidades das telas são programadas.
A ilustração abaixo mostra a seção Blocks, onde são programadas as funcionalidades do aplicativo.
[pic 32][pic 33][pic 34][pic 35][pic 36][pic 37][pic 38][pic 39]
...