En esta sesión se introduce a los estudiantes en el manejo de la herramienta para conseguir crear nuestra primera app, realizando un estudio de los componentes y sus propiedades y trabajando con un botón y una etiqueta.

1. 1
Desarrollo de apps para móviles:
Mi primera app: los componentes
Programamos Videojuegos y Apps
Flor Palomares, Patricia
Huertas Fernández, José Ignacio
Moreno León, Jesús
Moriana Coronel, María
Septiembre 2012

2. Licencia
Estas diapositivas son una obra derivada del tutorial
“Hello Purr”
disponible en http://appinventor.mit.edu/explore/content/hellopurr.html
©Programamos, Septiembre de 2013
Algunos derechos reservados.
Este artículo se distribuye bajo la licencia“ReconocimientoCompartirIgual 3.0 España" de CreativeCommons, disponible en
http://creativecommons.org/licenses/by-sa/3.0/es/deed.es
Este documento (o uno muy similar)
está disponible en (o enlazado desde)
http://programamos.es

3. Nuestra primera app: HolaRonroneo
●
●
●
En informática la primera aplicación que se desarrolla
con un lenguaje suele llamarse HolaMundo.
En este caso le daremos otro enfoque y la llamaremos
Hola Ronroneo
El objetivo de esta app será sencillo: al presionar sobre
un gatito escucharemos cómo maulla.

4. Conceptos básicos: los componentes
●
●
●
●
Los componentes son los
elementos básicos que forman
las apps en Android
Son como los ingredientes de
una receta
Algunos son muy sencillos,
como un botón o una etiqueta
de texto
Otros más complejos, como un
tapiz o un acelerómetro

5. Conceptos básicos: las propiedades
●
●
Los componentes tienen propiedades que pueden ajustarse para
modificar su comportamiento o apariencia.
Seleccionando un componente se pueden ver y cambiar sus
propiedades.

6. HolaRonroneo: paso 1
●
●
●
¡Vamos a crear nuestra app HolaRonroneo!
Desde la paleta arrastramos el componente 'Botón' a la pantalla1.
Como queremos que el botón tenga la imagen de un gato, en el panel de
propiedades, en 'Imagen' subiremos nuestra foto.

7. HolaRonroneo: paso 2
●
●
En la propiedad 'Texto' del botón, borramos el texto para que solo
se vea la cara de nuestro gato.
Si no se muestra tu foto entera puedes modificar las propiedades
alto y ancho con el valor “Fill Parent”

8. HolaRonroneo: paso 3
●
●
●
Arrastramos el elemento label de la paleta al visor de la pantalla
En las propiedades de la etiqueta modificamos el texto para
escribir el mensaje: “Acaricia al gatito” (Pet the kitty)
Personaliza el color de fondo la etiqueta

9. HolaRonroneo: paso 4
●
●
En la paleta, en la pestaña Media, arrastramos el componente
Sonido al visor de la pantalla. Aparecerá en la parte de abajo del
visor marcado como “componente no visible”
En la propiedad Source del sonido debemos cargar el audio de un
maullido

10. HolaRonroneo: ¡ya tenemos los componentes!
●
●
●
¡Buen trabajo!
Ya tenemos colocados los componentes de nuestra app y su
apariencia bien definida.
En la siguiente sesión aprenderemos a programar su
comportamiento.