# Miau!

## 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:

1. 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.
2. Visor: A pantalla do centro, o visor, representa a pantalla do móbil, e serve para deseñar o aspecto da aplicación.
3. 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.
4. 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.
5. 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

- Imaxe dun gato: kitty.png
- Son de miañar: meow.mp3

## Crear unha Etiqueta

O primeiro compoñente que imos engadir é unha Etiqueta para mostrar un texto.

1. 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”.
2. 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.
3. 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.

1. 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.
2. 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.
3. 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í.
4. 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.

1. 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.
2. 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.

1. 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).
2. 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.
3. 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:

- wikimedia commons
- creativecommons
- pixabay
- archive.org

### App Inventor

### Prácticas

### Apps para Arduíno

### Licenza