Obxectivo
Na nosa primeira app aparecerá a imaxe dun gatiño na pantalla que miañará cando o toques e vibrará cando axites o teu dispositivo.
A contorna e traballo
Abrimos o menú <<Proyectos>>, <<Comenzar un proyecto nuevo…>> e dámoslle o nome “Miau”. Isto lévanos á fiestra principal de App Inventor.
OLLO: O nome dos proxectos non pode conter espazos en branco. Se queres, no seu lugar utiliza o símbolo de guión ou guión baixo.
A pantalla que aparece é a de deseño que se divide en 5 partes:
- Paleta: Á esquerda, na paleta, están os obxectos que imos usar para deseñar a pantalla da nosa aplicación. Botóns, imaxes, debuxos, etc. É coma a paleta dun pintor.
- Visor: A pantalla do centro, o visor, representa a pantalla do móbil, e serve para deseñar o aspecto da aplicación.
- Componentes: Á dereita do Visor está a parte de compoñentes, que é onde se mostra a lista de compoñentes que estamos usando na nosa app. Inicialmente o único compoñente dispoñible é Screen1 que simboliza a pantalla do dispositivo Android.
- Medios: Debaixo da lista de compoñentes temos un espazo máis chamado medios que mostrará os ficheiros de imaxe e son que imos utilizar na nosa app.
- Propiedades: Á dereita se atopa a sección de propiedades, que mostra as propiedades dos compoñentes. Así, despois de seleccionar un compoñente poderemos ver e modificar as súas propiedades (tamaño, posición, texto, etc).
Preparamos os recursos
Antes de nada, para este exercicio necesitamos dous recursos que temos que descargar no noso ordenador. Estes arquivos pódelos atopar na web de appinventor.mit.edu – CC By SA
Crear unha Etiqueta
O primeiro compoñente que imos engadir é unha Etiqueta para mostrar un texto.
- Na Paleta, na categoría Interface de usuario, fai clic en Etiqueta e arrástrao ata a área do Visor. Alí aparece un rectángulo co texto: “Texto para etiqueta”.
- Na xanela de Propiedades, na propiedade chamada Texto, cambia o texto que aparece alí por “Acariña ao gatiño” e pulsa intro. Verás como o texto se modifica tamén na sección do Visor.
- Cambia a cor de fondo da etiqueta facendo clic no cadro Color de Fondo, selecciona, por exemplo, a cor azul. Cambia tamén a cor do texto da etiqueta usando a propiedade Color de Texto, por exemplo usa a cor turquesa. Para terminar, cambia dende a propiedade Tamaño de Letra o tamaño da fonte a 30 puntos.
Engadir un botón
Imos engadir un botón á nosa app e faremos que este compoñente mostre a imaxe do gato.
- Desde a Paleta, selecciona o compoñente Botón e arrástrao ata o Visor, colocándoo xusto debaixo da etiqueta anterior. Verás que aparece un botón cun aspecto clásico.
- Agora que temos o botón faremos que apareza nel a imaxe do gato.
Asegúrate de que tes seleccionado o Botón na lista de Componentes, así, na xanela de Propiedades, fai clic en Imagen (que actualmente ten o valor Ninguno…) e pulsa o botón Subir archivo… Selecciona a imaxe do gato, kitty.png, que descargaches previamente ao teu computador e logo OK.
A imaxe do gato mostrarase inmediatamente na pantalla.
Observa que a imaxe tamén estará dispoñible na sección Media. - Como comprobarás, sobre a imaxe do gato aínda aparece o texto do botón. Busca a propiedade Texto do botón e borra o texto “Texto para el Botón1” que hai alí.
- Se non ves a cara do gato enteira na pantalla do dispositivo deberás cambiar os valores das Propiedades Ancho e Alto do Botón por “Ajustar al contenedor“, para que se axusten ao tamaño máximo dispoñible na pantalla do dispositivo.
NOTA: Lembra ir gardando os cambios da túa App, no menú Proyectos > Guardar proyecto, aínda que App Inventor vai gardando automaticamente, non estará demais.
Engadir o miañar do gato
Cando o usuario toque o botón, queremos que se escoite o miañar do gato. Para iso necesitamos o son meow.mp3 e un compoñente que se encargue da súa reprodución.
- Dende a Paleta fai clic na categoría Medios e arrastra o compoñente Sonido ata o Visor. Independente de onde o soltes, o compoñente de son situarase na parte inferior; nun apartado chamado Componentes no visibles.
- Na sección de Componentes, selecciona Sonido1 para poder visualizar as súas propiedades. Usa a propiedade Origen para seleccionar meow.mp3 que podes subir co botón Subir archivo…
Con isto terminamos de deseñar o aspecto da nosa aplicación. Agora vén a maxia: temos que programar como se comportará a aplicación.
A programar en bloques!
Fai clic no botón Bloques situado na esquina superior dereita.
Isto abre a xanela de programación con Bloques. A parte máis ampla, agora en branco, é o Editor, onde colocaremos os bloques dos nosos programas.
Imos facer que soe o son do gato cada vez que fagamos clic sobre a imaxe do gato (botón).
Facemos clic en Botón1 para que se mostren os bloques de cores dispoñibles para escribir o noso código, o programa. Ábrese un caixón de ferramentas con todos os bloques que podemos utilizar. Arrastramos ata o editor o que di Cuando Botón1.Click .
Os bloques cor mostaza son os xestores de sucesos, indican que hai que facer cando sucede algo na aplicación. Neste caso, indícalle ao computador que debe facer cando fagamos clic sobre o gato.
Agora facemos clic sobre o noso compoñente Sonido1 para abrir o seu caixón. Arrastramos a instrución Llamar.Sonido1.Reproducir ata encaixala dentro do outro bloque que creamos para o Botón1.
Xa podemos probala!
Probas en vivo
Se tocas a imaxe do gato no teu dispositivo (ou fas clic se estás a usar o emulador), deberás escoitar como o gato miaña.
Lembra que tes 3 opcións para probar a túa App en vivo, no menú Conectar.
AI Companion
Utiliza este modo se tes un dispositivo Android conectado e configurado que se atope na mesma Wi-Fi que o computador.
No teu dispositivo, lanza a aplicación MIT AI2 Companion (Inventor Companion App) e selecciona Scan QR Code. Despois, escanea o código QR que aparece na pantalla de teu computador.
Para as outras dúas opcións, tes que ter instalado a aplicación aiStarter no teu computador, e execútala:
- Para Windows: Descarga o instalador aiStarter. Fai clic na icona de aiStarter, abrirase unha xanela negra.
- Para Linux: Descarga Appinventor Setup installer Debian package. Para executar aiStarter, localiza en /usr/google/appinventor/commands-for-Appinventor/aiStarter &, botón dereito e executar.
Emulador
Se non tes dispositivo Android debes usar o emulador. Fai clic no menú Conectar > Emulador, agarda a que cargue a aplicación e próbaa (aínda tarda un pouco en cargar).
USB
Elixe USB se non tes unha conexión sen fíos a Internet pero tes un dispositivo Android conectado mediante USB ao teu computador. A opción de conexión USB pode ser complicada en Windows, xa que non recoñece automáticamente tódolos dispositivos, pero en Linux funciona millor.
Se todo funciona como é debido, poderás ver a app no teu dispositivo ou no emulador e a medida que fagas cambios nela irás véndoos tamén.
Agora a vibrar
Podemos mellorar a aplicación facendo que o teléfono vibre á vez que o gato miaña.
Hai que buscar dentro do caixón de bloques do obxecto Sonido1 .
O bloque que fai que o móbil vibre é Llamar.Sonido1.Vibrar. Este bloque ten unha caixa polo lado dereito que serve para indicar canto tempo ten que vibrar o dispositivo en milisegundos.
Para poñer aquí un valor de tempo hai que abrir o caixón Matemáticas e arrastrar o bloque de arriba ata a caixa libre á dereita do bloque LLamar.Sonido1.Vibrar, onde indica milisegundos .
Agora cambiamos o valor 0 polo valor 500, para que vibre durante medio segundo.
Os bloques quedarán así:
Axitar o dispositivo
Imos engadir un último elemento para que ao axitar o noso dispositivo tamén se reproduza o son do gato. Para conseguilo necesitaremos un compoñente máis chamado Acelerómetro.
Agora volveremos ao Diseñador.
Fai clic no botón Diseñador da esquina superior dereita, e na Paleta, dentro do caixón Sensores engadiremos o obxecto Acelerómetro, quedará baixo a xanela do Visor, xunto co obxecto de Sonido1, porque é un obxecto invisible na nosa interface de usuario.
Agora, volvemos ao editor de Bloques.
Elixiremos na xanela de bloques o obxecto Acelerómetro1. Do seu caixón elixiremos o bloque mostaza cuando.Acelerómetro1.Agitar.
Agora copiamos o bloque Llamar.Sonido1.Reproducir de arriba, facendo clic co botón dereito sobre el e seleccionando Duplicar.
Unha vez duplicado encaixarémolo co bloque mostaza que creamos. O editor de código aparecerá como na seguinte figura.
Que vai ocorrer? O gato tamén miañará cada vez que axitemos o móbil. O acelerómetro é o sistema que detecta que o móbil se move, ou cambia de orientación vertical a horizontal.
Descarga a app ao teu dispositivo
A proba en vivo permíteche comprobar facilmente a app mentres traballas nela. O único problema é que unha vez rematado o traballo, cando desconectes o teu dispositivo, a app deixará de funcionar. Para conseguir a app de forma definitiva no dispositivo necesitaremos instalala.
- O primeiro que debemos facer é asignar unha imaxe para a icona que representará a nosa app no dispositivo. Desde a vista de Diseñador, selecciona o compoñente Screen1 e asígnalle en Propiedades unha imaxe en Icono (por exemplo kitty.png).
- Agora asegúrate de que o teu dispositivo Android pode executar apps que non proveñan da tenda oficial de Google, a Play Store.
Para a maioría de dispositivos terás que ir a Axustes / Aplicacións e marcar o recadro Permitir apps de fontes descoñecidas. - De novo na xanela de Diseñador de App Inventor, fai clic no menú Generar. Aparecerán dúas opcións:
Opcións de exportación
- Selecciona App (generar código QR para el archivo .apk). Despois duns segundos, aparecerá o código QR; escanéalo cunha app adecuada. O teu dispositivo pedirache que introduzas a túa contrasinal da túa conta de Google. Despois de introducila, comezará a descarga da túa app e poderalo comprobar na área de notificacións do teu dispositivo. Cando a descarga finalice, xa podes proceder á súa instalación.
- Selecciona App (guardar archivo .apk en mi ordenador) para crear un ficheiro coa extensión .apk e gardalo no teu computador. Podes compartir a túa app enviando o ficheiro por correo electrónico.
Instalación
Lembra que para instalar a túa app debes ter activada no dispositivo Android a opción que permite instalar apps de fontes descoñecidas, é dicir, apps que non proveñen da tenda oficial de Google (Play Store).
Ao terminar a instalación, bota unha ollada ás apps dispoñibles no teu dispositivo e verás que a túa app Miau xa está dispoñible. Podes tocar sobre a súa icona para comezar a súa execución tal e como farías con calquera outra app.
Compartir o código fonte (os bloques)
Tamén podes, se o desexas, compartir o código fonte (os bloques) da túa app. Para facelo, fai clic no menú <<Proyectos > Exportar a mi ordenador el proyecto (.aia) seleccionado>>. Este proceso creará un ficheiro no teu computador coa extensión .aia.
Podes enviar por email o arquivo a outras persoas que tamén queiran aprender a usar apps con App Inventor. Os destinatarios poderán facer clic no menú <<Proyectos > Importar proyecto (.aia) desde mi ordenador…>> para ver a túa aplicación, editala, ampliala, etc.
Reto
Con todo o que aprendiches nesta páxina, crea unha App onde fagas unha invitación a túa festa de aniversario!
Webs onde podes descargar imaxes, sons e demais libremente: