junior es más fácil De 9 a 14 años

Con
a a programar como un profesional
Empiez

¿Has deseado alguna vez crear tu propia aplicación para móvil? ¡Ahora
puedes hacerlo! Los cuatro proyectos de este libro te enseñarán a
crear aplicaciones con imágenes, sonido y dibujos y también juegos
para Android. Lo único que necesitas para empezar es un ordenador,

Crea una
Internet y una cuenta gratuita en AppInventor.

• Mi primera aplicación: crea una app con tu perfil

• Demuestra tus habilidades artísticas: construye un editor

app para

Crea una app para móvil

de imágenes que te permita dibujar sobre fotos tomadas con tu
teléfono

• Conviértete en diseñador de juegos: programa un divertido juego

móvil
interactivo que podrás enviar a tus amigos
215 mm

Requisitos tecnológicos:
Hardware: PC con conexión a Internet y Windows 7 o superior, o Mac
con conexión a Internet y Mac OS X 10.7 o superior, o
un smartphone o tableta basados en Android
Software: AppInventor
Regístrate de forma gratuita en appinventor.mit.edu

Sarah Guthals

dadora
ra en Ingenier ía Informática y cofun
Sarah Guthals es docto . Su pasión es hacer
que la
un a co mp añ ía de educación tecnológica la en una
de o y conver tir
ac ión se a ac ce sib le para todo el mund
program
parte básica de nues
tras competencias.
Diseña y programa
www.dummies.es PVP: 11,95 € 10228415
tu propia app
www.planetadelibros.com
@ParaDummies
#CreaUnaAppParaMóvil Sarah Guthals

140 mm 9,5 mm 140 mm

MOBILE APPS.indd 1 26/9/18 11:20
 Edición publicada mediante acuerdo con Wiley Publishing, Inc.
...For Dummies, el señor Dummy y los logos de Wiley Publishing, Inc. son marcas
registradas utilizadas con licencia exclusiva de Wiley Publishing, Inc.

Título original: Building a Mobile App

© 2017 by John Wiley & Sons, Inc.

© de la traducción, Joan Andreano, 2018
Revisión técnica: CreaTIC Academy, S.L.

© Centro Libros PAPF, SLU, 2018

Grupo Planeta
Avda. Diagonal, 662-664
08034 – Barcelona

No se permite la reproducción total o parcial de este libro, ni su incorporación a un sistema

informático, ni su transmisión en cualquier forma o por cualquier medio, sea éste electrónico,
mecánico, por fotocopia, por grabación u otros métodos, sin el permiso previo y por escrito
del editor. La infracción de los derechos mencionados puede ser constitutiva de delito
contra la propiedad intelectual (Art. 270 y siguientes del Código Penal).
Diríjase a CEDRO (Centro Español de Derechos Reprográficos) si necesita fotocopiar
o escanear algún fragmento de esta obra. Puede contactar con CEDRO a través de la web
www.conlicencia.com o por teléfono en el 91 702 19 70 / 93 272 04 47.

ISBN: 978-84-329-0500-1
Depósito legal: B. 23.621-2018

Primera edición: noviembre de 2018

Preimpresión: deleatur, s.l.
Impresión: T. G. Soler

Impreso en España - Printed in Spain

www.dummies.es
www.planetadelibros.com

MOBILE APPS.indd 2 26/9/18 11:20

 III

ÍNDICE

Introducción: Comenzar con apps

para móviles
Acerca de App Inventor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Acerca de este libro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Acerca de ti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Acerca de los iconos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Proyecto 1: Herramientas básicas para apps

El software: App Inventor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Comienza con App Inventor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Comienza tu primera app para móviles Android . . . . . . . . . . . 9
Conecta tu emulador de Android . . . . . . . . . . . . . . . . . . . . . . . . . 10
Programar en App Inventor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Añade un botón con sonido . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Renombra tus componentes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Añade un reproductor de música . . . . . . . . . . . . . . . . . . . . . . . . . 24
Prueba tu aplicación de música . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

Proyecto 2: Haz una app sobre ti

Diseña tu app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Haz tu primer prototipo de papel . . . . . . . . . . . . . . . . . . . . . . . . . 37
Crea teléfonos de papel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Rellena tus teléfonos de papel . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

MOBILE APPS.indd 3 26/9/18 11:20

 IV

Crea el esqueleto de tu aplicación . . . . . . . . . . . . . . . . . . . . . . . . 40

Crea una nueva app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Crea la página principal . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Crea las demás pantallas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Programa tu aplicación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Programa los botones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Haz cambios simples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Programa todos tus botones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62

Proyecto 3: Crea un editor de imagen

Prepara tu app de edición de imagen . . . . . . . . . . . . . . . . . . . . . 63
Comenzar con una nueva app . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
Comenzar con una app About Me preparada . . . . . . . . . . . . . . 67
Comenzar con tu app sobre ti . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Prueba tu app . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Programa tu editor de imágenes . . . . . . . . . . . . . . . . . . . . . . . . . 75
Prepara una imagen de fondo . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Adapta tu diseño a tu función . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Dibuja sobre tus fotos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
Programa la capacidad de dibujar sobre las fotos . . . . . . . . . . 85

Proyecto 4: Crea un juego para móviles

Elige un juego . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
Prepara tu aplicación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Crea un nuevo proyecto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Prepara tu pantalla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Crea un juego sencillo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Programa a Winston para que se mueva . . . . . . . . . . . . . . . . . . . 92
¡Que Winston no se detenga! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Haz que Winston escuche . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Alimenta a Winston . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97

MOBILE APPS.indd 4 26/9/18 11:20

 V

Haz que se pueda volver a jugar . . . . . . . . . . . . . . . . . . . . . . . . . . 101

Haz que Winston se sacie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Programa la comida de Winston . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Prueba tu juego . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Haz que el juego sea aleatorio . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
Añade botones de comienzo y reinicio . . . . . . . . . . . . . . . . . . . . 112
Prueba tus botones de comienzo y reinicio . . . . . . . . . . . . . . . . 115
Pon tu comida en lugares aleatorios . . . . . . . . . . . . . . . . . . . . . . 116
Sigue construyendo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

Sobre la autora . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121

Dedicatoria . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
Agradecimientos de la autora . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
Agradecimientos de los editores . . . . . . . . . . . . . . . . . . . . . . . . . . . 124

MOBILE APPS.indd 5 26/9/18 11:20

 PROYECTO 1
Herramientas básicas para apps

En este proyecto aprenderás a crear una cuenta en App Inventor

y hacer tu primera aplicación de móvil. También aprenderás todas
las herramientas básicas que usarás para crear apps: herramientas
como botones, texto y pantallas múltiples.

EL SOFTWARE: APP INVENTOR

Hay muchas maneras de crear aplicaciones para móvil. En
este libro crearás aplicaciones para teléfonos con Android.

Para el funcionamiento de muchos móviles, Google

creó un programa llamado sistema operativo Android.
Lo mejor es que Android funciona en muchos tipos
diferentes de móviles, como Nexus, Samsung Galaxy
RE

CU
E R DA
o Google Pixel. Todas las aplicaciones que construyas
con este libro podrán instalarse en teléfonos Android.

MOBILE APPS.indd 6 26/9/18 11:20

 Para construir apps para móviles Android puede usarse toda una
gama de software y de lenguajes de programación diferentes. Tú
usarás App Inventor, creado por el MIT (Instituto de Tecnología de
Massachusetts). App Inventor es un lenguaje por bloques, lo que
facilita y hace que sea más rápido construir aplicaciones para móvil.

Comienza con App Inventor

Para comenzar con App Inventor, pide a tus padres que
te acompañen frente al ordenador y sigue estos pasos:
1 Ve a appinventor.mit.edu.

2 Haz clic en el botón Create Apps.

3 Ingresa con tu cuenta de Google, o pide a tus padres
que ingresen con su cuenta de Google.

MOBILE APPS.indd 7 26/9/18 11:20

 8
PROYECTO 1 Herramientas básicas…

4 Escoge Permitir para que App Inventor pueda usar

tu cuenta (o la cuenta de tus padres) de Google.
5 Léete bien las condiciones de servicio con tus padres y
escoge «Estoy de acuerdo con los Términos de Servicio».
6 Decide si quieres tomar parte en una encuesta.
No es obligatorio participar en la encuesta para construir
apps para móvil.
7 Escoge una opción para usar tu dispositivo Android
o el emulador Android.
Los ejemplos de este libro usan el emulador de Android.

8 Sigue las instrucciones para preparar el emulador

de Android.
Puedes hallar las instrucciones en inglés aquí:
http://appinventor.mit.edu/explore/ai2/setup-emulator.

Pregunta siempre a tus padres antes de instalar cualquier

software o acceder a cualquier página web.
RE

CU
E R DA

9 Cuando ya hayas instalado el software App Inventor,

haz clic en el botón Setup Emulator.
Luego sigue las instrucciones para establecer tu emulador.

MOBILE APPS.indd 8 26/9/18 11:20

 9

Puede que necesites ayuda de tus padres para instalar el

E N CIA emulador. Puedes necesitar acceso de administrador a tu
ordenador, lo que significa que tus padres probablemente
RT

E
ADV tengan que introducir su contraseña.

10 Regresa a App Inventor y haz clic en Continuar.

Puedes escoger que esta ventana no aparezca nuevamente
marcando la casilla junto al botón Continuar.
11 ¡Felicidades! Has completado el registro en App Inventor.

Comienza tu primera app para

móviles Android
Ahora que tienes el emulador instalado, puedes empezar a crear
tu primera app para móviles Android.
1 Ve a ai2.appinventor.mit.edu.
2 Haz clic en el botón Comenzar un proyecto nuevo, en la
esquina superior izquierda de la ventana.

MOBILE APPS.indd 9 26/9/18 11:20

 10
PROYECTO 1 Herramientas básicas…

3 Pon un nombre a tu proyecto, como «MiPrimeraAplicación»,

y haz clic en Aceptar.

Ahora deberías ver la pantalla de desarrollo de la app.

También puedes cambiar el idioma del programa.

Conecta tu emulador de Android

Antes de comenzar a crear tu aplicación para móviles Android,
asegúrate de que puedes conectar tu emulador.
1 Abre el menú Conectar y escoge Emulador.

MOBILE APPS.indd 10 26/9/18 11:20

 11

Una ventana emergente te avisa de que el emulador

se está iniciando, y en tu pantalla comienza a cargarse
un teléfono virtual.

No pulses ningún botón de tu teléfono virtual hasta

JO

que aparezca la pantalla final.

SE

N
CO

MOBILE APPS.indd 11 26/9/18 11:20

 12
PROYECTO 1 Herramientas básicas…

2 En tu navegador de Internet, App Inventor te pregunta

si quieres actualizar tu aplicación en tu teléfono virtual.
Haz clic en OK.

3 Autoriza la instalación de la aplicación en tu teléfono virtual.

Cuando la aplicación se haya actualizado, podrás abrirla haciendo

clic en la app del MIT AI2 Companion. No mostrará nada aún,
puesto que no has comenzado a construir la aplicación.

Si alguna vez te pierdes en tu teléfono virtual, haz

clic en el botón Casa y luego en la aplicación MIT AI2
JO
SE

CO
N Companion, y tu aplicación se abrirá.

MOBILE APPS.indd 12 26/9/18 11:20

 13

¡Felicidades! Ya tienes todo el software preparado. Ahora puedes

comenzar a programar tu primera aplicación para móvil.

PROGRAMAR EN APP INVENTOR

Si no lo has hecho antes, asegúrate de volver al principio de este
proyecto para preparar tu entorno de programación AppInventor
y tu emulador de Android (el tepléfono virtual de tu ordenador).

Ahora tienes el entorno preparado. Deberías tener un emulador

de Android abierto como este.
Ahora añadirás algunos componentes a tu aplicación.

MOBILE APPS.indd 13 26/9/18 11:20

 14
PROYECTO 1 Herramientas básicas…

Añade un botón con sonido

1 Desde la sección Interfaz de usuario, en la columna Paleta,
haz clic en Botón y arrástralo a tu visualizador de aplicación.

2 En la columna Componentes, asegúrate de que Botón1 está

seleccionado.

MOBILE APPS.indd 14 26/9/18 11:20

 15

3 En la columna Propiedades, cambia el texto de Botón1

a «Hacer sonido».

MOBILE APPS.indd 15 26/9/18 11:20

 16
PROYECTO 1 Herramientas básicas…

4 Desde la sección Medios, en la columna Paleta, haz clic

en Sonido y arrástralo a tu visualizador de aplicación.

5 Descarga el archivo de sonido «Car.wav» de www.thewecan.

zone/mobile-apps que encontrarás en CAR SOUNDS.
6 En la columna Componentes, asegúrate de que Sonido está
seleccionado, y en la columna Propiedades, busca Origen y
haz clic en él.

MOBILE APPS.indd 16 26/9/18 11:20

 17

7 Haz clic en el botón Subir archivo y, mediante la ventana

emergente, busca el archivo que te bajaste en el paso 5.

Tu visualizador debería verse así:

MOBILE APPS.indd 17 26/9/18 11:20

 18
PROYECTO 1 Herramientas básicas…

8 Abre tu emulador de app; ahora deberías ver el botón

que has añadido.

9 Regresa a tu navegador y haz clic en el botón Bloques.

MOBILE APPS.indd 18 26/9/18 11:20

 19

10 En la columna Bloques, haz clic en Botón1 y arrastra un

bloque CUANDO BOTÓN 1.CLIC a tu visualizador.

11 En la columna Bloques, haz clic en Sonido1 y arrastra un

bloque LLAMAR SONIDO1.REPRODUCIR a tu visualizador.
Colócalo dentro del bloque CUANDO BOTÓN 1.CLIC .

MOBILE APPS.indd 19 26/9/18 11:20

 20
PROYECTO 1 Herramientas básicas…

¡Acabas de programar el botón que creaste para que

reproduzca el sonido del coche cuando se pulse!

12 ¡Abre el emulador de aplicación y haz clic en el botón.

¡Deberías oír el sonido de un coche!

MOBILE APPS.indd 20 26/9/18 11:20

 21

Renombra tus componentes

Antes de añadir nada más a tu aplicación, tienes que renombrar tus
componentes. «Botón1» y «Sonido1» funcionan bien de momento,
porque solo tienes un botón y un sonido. Pero en la próxima
sección añadirás tres botones y un sonido más, y querrás poder
identificar para qué botón y para qué sonido estás programando.
1 En tu navegador, haz clic en el botón Diseñador.

2 En la columna Componentes, haz clic en Botón1 y en el botón

Cambiar nombre.

MOBILE APPS.indd 21 26/9/18 11:20

 22
PROYECTO 1 Herramientas básicas…

3 Cambia el nombre del botón a «BotónCoche».

4 En la columna Propiedades, cambia el texto del botón

a «Hacer sonido de coche».

MOBILE APPS.indd 22 26/9/18 11:20

 23

5 En la columna Componentes, selecciona Sonido1.

Haz clic en el botón Cambiar nombre y ponle el de
«SonidoCoche».

6 Ahora tu sección Componentes debería mostrar los

nuevos nombres.

7 Para asegurarte de que tu programa está diciendo

a «BotónCoche» que reproduzca «SonidoCoche»
cuando se pulse (antes decía a «Botón» que reprodujera
«Sonido», pero esos términos ya no existen), haz clic en
el botón Bloques.

MOBILE APPS.indd 23 26/9/18 11:20

 24
PROYECTO 1 Herramientas básicas…

Añade un reproductor de música

Ahora que ya sabes cómo añadir botones que reproducen sonidos,
puedes crear un sencillo reproductor musical.
1 Desde la columna Paleta, arrastra un DisposiciónHorizontal
a tu visualizador.

2 A continuación, renombra el DisposiciónHorizontal como

«ReproductorMúsica».

MOBILE APPS.indd 24 26/9/18 11:20

 25

3 Añade tres botones a tu diseño de «ReproductorMúsica».

4 Nombra los tres botones como «Grabar», «Reproducir» y

«Detener».

MOBILE APPS.indd 25 26/9/18 11:20

 26
PROYECTO 1 Herramientas básicas…

5 Cambia el texto de los tres botones a «Grabar», «Reproducir»

y «Detener».

Asegúrate de que el texto del botón Reproducir

es «Reproducir». Si el texto del botón Detener fuera
E N CIA

«Reproducir»… ¡sería muy confuso!

RT

E
ADV

MOBILE APPS.indd 26 26/9/18 11:20