Taller de aplicaciones Android

Presentación del tema: "Taller de aplicaciones Android"— Transcripción de la presentación:

1 Taller de aplicaciones Android
Creando una botonera de sonidos

2 Receta #1: Una botonera de sonidos divertidos

3 Objetivo: Crear una aplicación que muestra una serie de botones que podemos presionar para escuchar distintos sonidos divertidos RISA GORILA CARTOON

4 Descargar sonidos

5 Paso 1: Descargando los sonidos
Ingresa a Elige una categoría en el lado derecho:

6 Elige sonidos de tu gusto.
Para reproducirlos haz click en el cuadrado con tres puntos. Presiona “Descargar” si te gusta.

7 Descargas Recuerda que lo que descargas en tu PC queda en la carpeta «Descargas». Luego debemos ir ahí para buscar los archivos de sonido MP3.

8 Conectando el computador

9 Paso 2: Conectando el PC Ir a Google y buscar «App inventor» / Hacer click en el primer resultado

10 Hacer click en «Create apps»

11 Inicia sesión con tu cuenta de Gmail

12 Presiona el botón «Start new project»
Luego ingresa el nombre de tu proyecto y presiona «Ok»

13 Ahora verás la ventana de trabajo y podrás comenzar 

14 Conectando el teléfono

15 Paso 3: Conectando el teléfono
Instala «MIT AI2 Companion» en tu teléfono

16 Presiona el botón «Connect» y luego «AI Companion»
En el PC Presiona el botón «Connect» y luego «AI Companion»

17 Aparecerá un código QR en la pantalla
En el PC Aparecerá un código QR en la pantalla

18 En el teléfono Abre la aplicación y presiona el botón «scan QR code»

19 Apunta al código y podrás ir viendo como avanza tu app
En el teléfono Apunta al código y podrás ir viendo como avanza tu app

20 No te olvides del wifi! Para que la conexión entre el PC y el teléfono funcione el celular debe estar conectado a la misma red wifi que el computador! También funcionará si el PC esta conectado por cable de red al equipo que emite la señal wifi.

21 Manos a la obra! Introducción a MIT APP Inventor

22 Inserta un botón (Desde «User Interface»)

23 Mira tu celular! El botón que acabas de insertar debería aparecer en la pantalla de tu teléfono. Cada vez que hagas cambios podrás visualizarlos en tu movil.

24 Inserta un sonido (Desde «Media»)

25 Atención: Algunos elementos como los sonidos no aparecerán en la «Pantalla» (Viewer), pero si en la lista de «Componentes»

26 En «Componentes» presiona «Sound1»
Luego presiona «Source» y selecciona el archivo de sonido en tu PC

27 Haz click en «Blocks» (Arriba a la derecha)

28 Luego arrastra el siguiente elemento:
Haz click en «Button1» Luego arrastra el siguiente elemento:

29 Luego arrastra y encaja el siguiente elemento:
Haz click en «Sound1» Luego arrastra y encaja el siguiente elemento:

30 Pruébalo! Al presionar el botón en tu teléfono deberías oír el sonido

31 App #2: El teléfono me habla
Utilizando «Texto a voz»

32 Entra en http://bit.ly/tallercompu1 para ver el video que explica el procedimiento

33 Receta #2: Botón que lee texto ingresado en el código

34 Receta #3: Botón que lee lo que ingresemos en un cuadro de texto

35 Hagamos nuestro propio “Pictionary”
Receta #4: Hagamos nuestro propio “Pictionary”

36 Paso 1: Agreguemos 1 botón y 1 etiqueta (“label”)

37 Paso 2: Creamos una lista vacía
00

38 Paso 2: Agregamos elementos a la lista
La instrucción significa: “Cuando la pantalla (“Screen”) se abra por primera vez añadir los elementos (animales) a la lista vacía creada anteriormente”.

39 ¿Se te acabó el espacio en la lista?
Para añadir más elementos a la lista presiona el botón con forma de engranaje

40 Paso 2: Hacemos que el botón muestre un elemento al azar
La instrucción significa: “Al hacer click en ‘Botón 1’ poner como texto de la etiqueta 1 un elemento al azar de la lista creada anteriormente”.

41 Jorge.molina@somosinformaticos.com /+56 981817242
Jorge Molina Núñez /