INTRODUCCIÓN Comenzar con apps para móviles

¿Así que quieres crear tus propias apps para móvil en Android? ¡Es una idea maravillosa!

Crear aplicaciones para móvil puede ser muy divertido. Puedes hacer sencillas apps que proporcionen información; aplicaciones divertidas que permitan jugar con imágenes, sonidos y dibujos, e incluso crear juegos. El mundo de las apps para móvil es enorme, y el único límite es tu imaginación. Este libro te guía por el proceso de creación de aplicaciones para móvil con un software del MIT llamado App Inventor; es gratis y lo pueden usar personas de cualquier edad. Con solo hacer clic y arrastrar puedes construir una aplicación para móvil y, al mismo tiempo, ¡aprender a programar!

ACERCA DE APP INVENTOR

App Inventor es una página web que hace que crear aplicaciones para móvil sea fácil y divertido. Se divide en dos partes: el diseño y los bloques. La parte de diseño es aquella en la que creas el aspecto visual: dónde irán los botones, de qué color será, qué fotos añadirás o qué dibujos y sonidos crearás. La parte de los bloques es aquella en la que programas el código para que la aplicación haga cosas; por ejemplo, has de decirle a tu aplicación que reproduzca el sonido de un ladrido cada vez que alguien haga clic en el botón del perro. Aunque la parte de los bloques es auténtica programación, App Inventor hace que sea fácil poner el código en «bloques de programación» que puedes arrastrar para crear tu aplicación. ¡Esto hace que todo el proceso sea fácil y divertido!

ACERCA DE ESTE LIBRO

Crea una app para móvil te presenta cuatro proyectos que te guían por el proceso de construcción de cuatro aplicaciones para móvil diferentes. Primero crearás una sencilla aplicación que reproduce un sonido cuando aprietas un botón. De ahí pasarás a crear una app que sea un perfil tuyo. En el tercer proyecto añadirás funciones a tu aplicación de perfil, de modo que los demás puedan dibujar sobre tus imágenes favoritas, haciéndolas aún más divertidas. Finalmente crearás un auténtico juego para móviles llamado «Alimenta a Winston».

En la página web www.thewecan.zone encontrarás los elementos que he creado para desarrollar estos proyectos.

Aunque App Inventor cuenta con una versión en español, hoy por hoy algunas instrucciones secundarias todavía no se han traducido. Si necesitas ayuda, consulta a un adulto.

Si estás leyendo esto en formato electrónico, puedes hacer clic en cualquier dirección web que aparezca en el texto, como www.dummies.es, para visitar las páginas web.

ACERCA DE TI

Todo el mundo ha de comenzar por algún lado, ¿no? Yo tuve que comenzar a escribir este libro dando por sentado que puedes hacer lo siguiente con comodidad:

Escribir en un ordenador y usar un ratón o un dispositivo móvil. Windows o Mac: ambos sistemas irán bien. Este libro muestra ejemplos en un Mac y en una tableta con Android.

Seguir instrucciones. La programación es una tarea muy precisa. Es muy importante que sepas seguir instrucciones meticulosamente, y que compares las imágenes del libro con las que tú mismo crees.

ACERCA DE LOS ICONOS

A medida que leas los diferentes proyectos del libro verás algunos iconos. Significan cosas diferentes:

¡Cuidado! El icono Advertencia acompaña información importante que puede ahorrarte problemas que se les presentan a veces a los creadores profesionales.

El icono Recuerda acompaña ideas que deberías tener en cuenta.

El icono Consejo te ofrece consejos y atajos para que crear sea más fácil.

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 o Google Pixel. Todas las aplicaciones que construyas con este libro podrán instalarse en teléfonos Android.

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:

Ve a appinventor.mit.edu.

Haz clic en el botón Create Apps.

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

Escoge Permitir para que App Inventor pueda usar tu cuenta (o la cuenta de tus padres) de Google.

Léete bien las condiciones de servicio con tus padres y escoge «Estoy de acuerdo con los Términos de Servicio».

Decide si quieres tomar parte en una encuesta.

No es obligatorio participar en la encuesta para construir apps para móvil.

Escoge una opción para usar tu dispositivo Android o el emulador Android.

Los ejemplos de este libro usan el emulador de Android.

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.

Cuando ya hayas instalado el software App Inventor, haz clic en el botón Setup Emulator.

Luego sigue las instrucciones para establecer tu emulador.

Puede que necesites ayuda de tus padres para instalar el emulador. Puedes necesitar acceso de administrador a tu ordenador, lo que significa que tus padres probablemente tengan que introducir su contraseña.

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.

¡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.

Ve a ai2.appinventor.mit.edu.

Haz clic en el botón Comenzar un proyecto nuevo, en la esquina superior izquierda de la ventana.

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.

Abre el menú Conectar y escoge Emulador.

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 que aparezca la pantalla final.

En tu navegador de Internet, App Inventor te pregunta si quieres actualizar tu aplicación en tu teléfono virtual. Haz clic en OK.

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 Companion, y tu aplicación se abrirá.

¡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.

Añade un botón con sonido

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.

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

En la columna Propiedades, cambia el texto de Botón1 a «Hacer sonido».

Desde la sección Medios, en la columna Paleta, haz clic en Sonido y arrástralo a tu visualizador de aplicación.

Descarga el archivo de sonido «Car.wav» de www.thewecan.zone/mobile-apps que encontrarás en CAR SOUNDS.

En la columna Componentes, asegúrate de que Sonido está seleccionado, y en la columna Propiedades, busca Origen y haz clic en él.

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

Abre tu emulador de app; ahora deberías ver el botón que has añadido.

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

En la columna Bloques, haz clic en Botón1 y arrastra un bloque CUANDO BOTÓN 1.CLIC a tu visualizador.

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 .

¡Acabas de programar el botón que creaste para que reproduzca el sonido del coche cuando se pulse!

¡Abre el emulador de aplicación y haz clic en el botón. ¡Deberías oír el sonido de un coche!

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.

En tu navegador, haz clic en el botón Diseñador.

En la columna Componentes, haz clic en Botón1 y en el botón Cambiar nombre.

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

En la columna Propiedades, cambia el texto del botón a «Hacer sonido de coche».

En la columna Componentes, selecciona Sonido1. Haz clic en el botón Cambiar nombre y ponle el de «SonidoCoche».

Ahora tu sección Componentes debería mostrar los nuevos nombres.

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.

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.

Desde la columna Paleta, arrastra un DisposiciónHorizontal a tu visualizador.

A continuación, renombra el DisposiciónHorizontal como «ReproductorMúsica».

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

Nombra los tres botones como «Grabar», «Reproducir» y «Detener».

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 «Reproducir»… ¡sería muy confuso!

Añade un nuevo sonido a tu visualizador.

Renómbralo como «Grabación».

Desde la sección Medios de la columna Paleta, arrastra a tu visualizador un GrabadorDeSonidos.

Renombra GrabadorDeSonidos1 como «MiGrabador».

Haz clic en el botón Bloques para obtener el visualizador de programación de tu app.

En la columna Bloques, selecciona Grabar. Arrastra un bloque CUANDO GRABAR.PRESIONAR a tu visualizador.

En la columna Bloques, selecciona MiGrabador y arrastra LLAMAR MIGRABADOR.INICIAR al bloque CUANDO GRABAR.PRESIONAR.

En la columna Bloques, selecciona Grabar y arrastra CUANDO GRABAR.PRESIONAR a tu visualizador.

En la columna Bloques, selecciona MiGrabador y arrastra un bloque LLAMAR MIGRABADOR.DETENER dentro del bloque CUANDO GRABAR.PRESIONAR.

Selecciona MiGrabador y arrastra CUANDO MIGRABADOR.DESPUÉSDESONIDOGRABADO a tu visualizador.

Selecciona Grabación y arrastra PONER GRABACIÓN.ORIGEN dentro del bloque CUANDO MIGRABADOR.DESPUÉSDESONIDOGRABADO.

En la sección Integrados de la columna Bloques, selecciona Variables y arrastra un bloque TOMAR a tu visualizador, conectándolo con tu bloque PONER GRABACIÓN.ORIGEN.

Haz clic en el menú desplegable de tu bloque TOMAR y selecciona Sonido.

En la columna Bloques, selecciona Reproducir y arrastra un bloque CUANDO REPRODUCIR.CLIC a tu visualizador.

Selecciona Grabación y arrastra un bloque LLAMAR GRABACIÓN.REPRODUCIR a tu bloque CUANDO REPRODUCIR.CLIC.

En la columna Bloques, selecciona Detener y arrastra un bloque CUANDO DETENER.CLIC a tu visualizador. Luego selecciona Grabación y arrastra un bloque LLAMAR GRABACIÓN.DETENER a tu bloque CUANDO DETENER.CLIC.

Abre tu emulador de aplicación. Deberías ver los botones renombrados y los tres nuevos botones.

Si tu emulador de aplicaciones no se actualiza adecuadamente, retrocede en tu navegador y escoge Reiniciar conexión, en el menú Conectar. Luego abre de nuevo el menú Conectar y escoge Emulador para reiniciarlo.

Prueba tu aplicación de música

Ahora que has acabado de construir tu aplicación, ¡puedes probarla!

Primero haz clic en el botón Hacer sonido de coche. Deberías oír el sonido del coche.

Luego pulsa y mantén apretado el botón Grabar y canta algo ante tu ordenador. Suelta el botón Grabar y presiona el botón Reproducir. Deberías oír la canción que acabas de cantar. Si pulsas el botón Detener mientras escuchas la canción, se detendrá.

Juega con la aplicación que acabas de hacer y muéstrasela a tu familia o tus amigos.

Programar no siempre es seguir instrucciones y hacer solo lo que te digan. También implica ser creativo e intentar cosas nuevas. Si tienes una idea, ¡pruébala, incluso si aún no has aprendido cómo realizarla!

PROYECTO 2 Haz una app sobre ti

En este proyecto aprenderás a crear una aplicación con múltiples pantallas, así como muchas de las propiedades más divertidas de App Inventor. Primero diseñarás tu app sobre papel, luego construirás una aplicación-esqueleto y la llenarás de contenido, ¡y aprenderás todo el proceso de creación de apps que usan los profesionales!

DISEÑA TU APP

Los creadores profesionales de aplicaciones siempre las diseñan antes de empezar a construirlas. Tener un buen diseño facilita el desarrollo de una buena aplicación, pues ya sabes qué quieres construir.

El diseño de una app también se llama «prototipo de papel». Un prototipo es una versión primeriza de algo que estás fabricando. Hacer un prototipo te permite enseñárselo a otros y que te den nuevas ideas, antes de abordar la realización definitiva. Los prototipos se usan en muchos otros campos, no solo en la informática. Así, por ejemplo, antes de construir un puente, un arquitecto puede construir un prototipo del puente para asegurarse de que soporta el peso de los coches y comprobar que resulta tan bello como imaginaba.

Los prototipos de papel son versiones tempranas de la aplicación que tienes pensado construir, pero sobre papel. Otros tipos de prototipo pueden ser dibujos hechos en el ordenador o incluso mini-versiones de tu proyecto completo (como las maquetas de los arquitectos).

Haz tu primer prototipo de papel

Ahora deberías hacer tu primer prototipo de papel. Para empezar, has de preparar el papel para realizar el prototipo. Luego puedes rellenar los teléfonos de papel con lo que quieres que se vea en tu aplicación. Al final decidirás qué hacen los botones en la aplicación.

Crea teléfonos de papel

Sigue estos pasos para crear teléfonos de papel:

Toma un papel y algo con lo que escribir. Yo uso papel cuadriculado y bolígrafos rojo, azul y negro.

Dibuja rectángulos para los esbozos de tu aplicación.

Estos rectángulos serán como tu app. Puedes hacer que parezcan un teléfono, como los míos, o dibujar sencillos rectángulos.

Puede que necesites más de lo que cabe en una hoja de papel. Puedes hacer fotocopias de los rectángulos que has dibujado o dibujar más.

Imprime teléfonos inteligentes, si quieres.

Si no quieres dibujar los rectángulos, puedes imprimirlos. Ve a www.thewecan.zone/mobile-apps y, en PHONE TEMPLATE, descarga la versión en PDF para imprimirla.

Rellena tus teléfonos de papel

Sigue estos pasos para decidir qué debería figurar en cada pantalla. Cada teléfono de papel debería considerarse una pantalla diferente.

Diseña tu página principal.

Cuando tus usuarios abran la aplicación, la primera pantalla que verán será la página principal. Dibuja qué van a ver.

Planifica las demás páginas.

Tras decidir las categorías que quieres en tu aplicación, comienza a diseñar cada una de esas pantallas.

CREA EL ESQUELETO DE TU APLICACIÓN

Acabas de diseñar tu aplicación sobre papel. Ahora construye tu diseño con App Inventor.

Crea una nueva app

Primero crea tu nueva aplicación. Sigue estos pasos:

Ve a http://ai2.appinventor.mit.edu.

A veces, al regresar a App Inventor, te lleva a una aplicación que has creado previamente. Si esto ocurre, abre el menú Proyectos y escoge Mis proyectos para regresar a tu página principal.

Haz clic en el botón Comenzar un proyecto nuevo.

Ponle un nombre como «AsiSoyYo».

¡Felicidades! Ya estás preparado para empezar a diseñar tus pantallas.

A veces App Inventor se actualiza. Si te sale este mensaje, haz clic en Reload.

Crea la página principal

La primera página que has de crear es la principal. Sigue estos pasos:

Arrastra un DisposiciónVerticalconScroll a tu pantalla. Lo hallarás en la categoría Disposición en la sección Paleta, en el lado izquierdo de tu pantalla.

DisposiciónVerticalconScroll significa que si añades demasiados objetos a la pantalla, esta se moverá hacia abajo, para que los usuarios puedan verlos todos.

En la sección Interfaz de usuario, busca Imagen. Arrastra un elemento Imagen al DisposiciónVerticalconScroll.

En la sección Interfaz de usuario, busca Etiqueta. Arrastra el elemento Etiqueta al DisposiciónVerticalconScroll, bajo la imagen del paso 2.

En la sección Disposición, busca DisposiciónHorizontal y arrastra uno al DisposiciónVerticalconScroll, bajo la etiqueta del paso 3.

Luego arrastra un segundo DisposiciónHorizontal al DisposiciónVerticalconScroll.

Deberías colocarlo bajo el DisposiciónHorizontal del paso 4.

En la sección Interfaz de usuario, busca Botón y arrastra uno al DisposiciónHorizontal del paso 4.

Arrastra un segundo Botón al DisposiciónHorizontal del paso 4.

Debería quedar a la derecha del Botón del paso 6; para ello, déjalo caer sobre él.

Añade dos botones más al DisposiciónHorizontal del paso 5.

¡Felicidades! Has creado el esqueleto de tu página principal.

Antes de pasar a una nueva pantalla, es importante nombrar todos los elementos para que sepas qué es qué. Para hacerlo, sigue estos pasos:

Para renombrar cada elemento, haz clic en un elemento de la columna Componentes y, a continuación, en el botón Cambiar nombre.

Renombra el elemento como te apetezca y haz clic en Aceptar.

Haz lo mismo con todos los elementos; tu sección Componentes debería verse así:

Por último, has de cambiar las propiedades de cada elemento. Sigue estos pasos:

En primer lugar, arregla el DisposiciónVerticalconScroll. Selecciona DisposiciónVerticalconScroll en la columna Componentes, y la columna Propiedades mostrará las propiedades para este elemento. Cambia la propiedad DispHorizontal a Centro:3.

Cambia el Ancho a Ajustar al contenedor.

Esto significa que este elemento llenará la pantalla.

Selecciona ImagenPerfil y, en la columna Propiedades, escoge Foto y Subir archivo.

Haz clic en Examinar y escoge una imagen que quieras usar para tu perfil.

Haz clic en Aceptar.

¡La imagen puede ser demasiado grande!

Cambia las propiedades Alto y Ancho a 50 píxeles, para que la imagen quepa en la pantalla.

Cambia las propiedades de Nombre: selecciona Nombre en la columna Componentes. Cambia el «Texto» por tu nombre.

Cambia las propiedades de Aficiones. Cambia el «Texto» a «Mis aficiones». Para ello, selecciona Aficiones en la columna Componentes y luego cambia el «Texto» como hiciste en el paso 7.

Cambia las propiedades de los otros tres botones: Fotos, Sonidos y Dibujos. Cambia el «Texto» de cada una de ellas por «Mis fotos», «Mis sonidos» y «Mis dibujos».

Cambia las propiedades de los dos DisposiciónHorizontal de modo que ambos tengan Centro:3 en DispHorizontal y Ajustar al contenedor en Ancho.

¡Enhorabuena! ¡Acabas de planificar tu primera aplicación!

Crea las demás pantallas

Ahora que has completado tu página principal, puedes crear las otras ocho pantallas del mismo modo. Aquí tienes las reglas generales para crear cada pantalla. Consulta la sección anterior para saber cómo añadir cada componente.

Haz clic en el botón Añadir ventana.

Pon un nombre útil a la pantalla, como «Aficiones».

¡Comienza a construir en ella!

A veces, mientras construyes la aplicación definitiva, tienes ideas para mejorar el diseño. ¡De acuerdo! Siempre estás a tiempo de modificar el diseño. Por ejemplo, yo decidí que en lugar de incluir una pantalla separada para añadir una nueva afición, podía añadirla directamente en la pantalla de aficiones.

A continuación se muestran las tres pantallas que diseñé para mi aplicación About Me.

Ahora deberías tener un total de cinco pantallas:

PROGRAMA TU APLICACIÓN

¡Es hora de añadir programación a tu aplicación! Ahora viene lo divertido. Primero programarás todos los botones para poder ver todas las pantallas. Luego, en el siguiente proyecto, programarás nuevos elementos para cada pantalla.

Programa los botones

Para entrar en los bloques de programación, haz clic en el botón Bloques. Luego sigue estos pasos:

Asegúrate de que te encuentras en la primera pantalla (Screen1) a fin de programar primero los botones de la página principal. Así podrás llegar a las demás pantallas cuando pruebes tu aplicación.

Selecciona Aficiones, en la columna Bloques, y arrastra un bloque CUANDO AFICIONES.CLIC al visualizador.

Selecciona Control en la columna Bloques y arrastra un bloque ABRIR OTRA PANTALLA NOMBRE DE LA PANTALLA al bloque que has añadido en el paso 1.

Selecciona Texto en la columna Bloques y arrastra un bloque de texto vacío al extremo del bloque del paso 2.

Tu programa debería verse así:

Abre el menú Conectar y escoge Emulador. Deja que el emulador se inicie en tu ordenador.

A veces el emulador no funciona a la primera. Si es así, ciérralo y vuelve a intentarlo.

En cuanto se cargue tu aplicación, verás la página principal.

Haz clic en Aficiones: debería abrirse tu página de aficiones.

Haz cambios simples

A la hora de probar el botón Aficiones, te habrás dado cuenta de que no tienes modo de regresar a tu página principal. ¡No te preocupes! Puedes añadir un botón Página principal a cada página.

Y puedes programarlos todos igual.

Programa todos tus botones

Ahora puedes programar todos tus botones. No olvides hacer una prueba cada vez que hagas un cambio en la programación.

En el próximo proyecto aprenderás a añadir nuevas características, como la de poder dibujar sobre fotografías.

PROYECTO 3 Crea un editor de imagen

En este proyecto aprenderás a añadir imágenes a tu aplicación y a editarlas dibujando sobre ellas. Primero aprenderás cómo añadir más imágenes a tu aplicación; luego, a dibujar sobre un lienzo y, finalmente, a dibujar sobre tus propias imágenes.

PREPARA TU APP DE EDICIÓN DE IMAGEN

Tienes dos opciones para tu editor de imagen: puedes continuar con la app sobre ti que creaste en el Proyecto 2 o comenzar una nueva aplicación.

Comenzar con una nueva app

Si decides crear una aplicación que solo sea un editor de imágenes, y no continuar con tu app del Proyecto 2, sigue estos pasos:

Ve a appinventor.mit.edu y accede. Haz clic en Proyectos ➪ Comenzar un nuevo proyecto. Llámalo «FotoEditor».

Añade un DisposiciónHorizontal de la categoría Disposición, y coloca tres botones de la categoría Interfaz de usuario dentro del DisposiciónHorizontal.

Selecciona DisposiciónHorizontal en Componentes y cambia la propiedad DispHorizontal a Centro:3 y la propiedad Ancho a Ajustar al contenedor.

Busca tres fotos que hayas guardado en tu ordenador, o bien descarga las que podrás encontrar en www.thewecan.zone/mobile-apps, dentro de SAMPLE PICTURES.

Prepara los componentes de tus botones para que tengan una imagen y dales el nombre adecuado. Asegúrate de quitar el texto de los botones, para que no quede texto sobre la imagen.

Cambia el Alto y el Ancho de todas las imágenes a 100 píxeles.

En la columna Paleta, busca Dibujo y animación y, desde allí, arrastra un Lienzo hasta situarlo bajo tus imágenes.

Cambia el Ancho y el Alto de tu Lienzo a Ajustar al contenedor.

¡Enhorabuena! Ya puedes probar y programar tu aplicación. Puedes saltarte las dos secciones siguientes, «Comenzar con una app About Me preparada» y «Comenzar con tu app sobre ti», e ir directamente a «Prueba tu app».

Comenzar con una app About Me preparada

Si no creaste la app sobre ti del Proyecto 2, y no querías comenzar con una aplicación de edición de imagen independiente como la descrita en la sección anterior («Comenzar con una nueva app»), ¡has venido al lugar correcto!

Puedes utilizar la aplicación About Me que hice cuando escribía el Proyecto 2.

Ve a www.thewecan.zone/mobile-apps y bájate el archivo «AboutMe.aia» que encontrarás en ABOUT ME.

Ve a appinventor.mit.edu y haz clic en el botón Proyectos; a continuación, selecciona Importar proyecto (.aia) desde Mi ordenador.

Haz clic en Examinar, busca el archivo «AboutMe.aia» que te bajaste en el paso 1 y haz clic en OK.

¡Deberías ver mi app About Me!

Si ya has creado una app llamada «About Me», en inglés, no podrás importar mi app, porque tiene el mismo nombre. Esto se soluciona fácilmente: cámbiale el nombre a mi app (por ejemplo, «SarahAboutMe», o cualquier nombre que se te ocurra).

Ahora que tienes mi aplicación About Me, ya puedes seguir las instrucciones que encontrarás en la siguiente sección.

Comenzar con tu app sobre ti

En esta sección aprenderás cómo añadir un editor de imagen a tu app sobre ti.

Ve a appinventor.mit.edu y abre tu app sobre ti. Luego ve a tu pantalla Dibujos.

En Componentes, cambia el Alto de DisposiciónVertical, de DisposiciónHorizontal y de LienzoDibujos a Ajustar al contenedor.

Añade un segundo DisposiciónHorizontal sobre el DisposiciónHorizontal que contiene tu Lienzo y tu botón Guardar.

Regresa a la sección «Comenzar con una nueva app», un poco más arriba, y sigue los pasos 3 a 7. Sobre tu Lienzo deberías tener tres imágenes para escoger.

¡Enhorabuena! Ya estás preparado para probar y programar tu editor de imagen.

PRUEBA TU APP

Antes de comenzar a programar, asegúrate de que tu aplicación aún funciona. En los Proyectos 1 y 2 probamos las aplicaciones con el emulador. Este proyecto prueba la app con un dispositivo Android.

Si no tienes a mano un dispositivo Android, puedes utilizar el emulador. Consulta cómo se hace en los Proyectos 1 y 2.

Ve a http://appinventor.mit.edu/explore/ai2/setup.html y verás que hay tres opciones para probar tu app. Los Proyectos 1 y 2 siguieron la opción 2 (usando el emulador). Esta vez seguirás la opción 1: empleando un dispositivo Android y vía Wi-Fi.

Bájate la app MIT AI2 Companion desde la Play Store de Google y sigue las instrucciones de esta página: http://appinventor.mit.edu/explore/ai2/setup-device-wifi.html.

Pide siempre permiso a tus padres antes de bajar o instalar cualquier software.

Asegúrate de que tu dispositivo Android y tu ordenador están conectados a la misma red Wi-Fi.

Regresa a tu app en http://ai2.appinventor.mit.edu/ y haz clic en AI Companion.

Abre AI2 Companion en tu dispositivo Android y teclea el código que te aparece en la pantalla.

Haz clic en Connect with Code: ¡tu aplicación debería abrirse!

Tu código será diferente del que se muestra en este libro, y cambiará cada vez que pruebes tu app.

Cuando pruebes tu app, puedes cambiar la pantalla desde tu ordenador: cambia a una pantalla diferente y el cambio se efectuará también en tu app.

PROGRAMA TU EDITOR DE IMÁGENES

El resto de este proyecto prosigue con el editor de imágenes que has añadido a la aplicación sobre ti. Si decidiste crear una nueva app para el editor de imágenes, puede que haya algunas pequeñas diferencias entre lo que tienes y lo que se ve en el libro. Busca los apartados «atención», que te servirán de ayuda.

Prepara una imagen de fondo

Obviamente, antes de comenzar a editar una foto, has de tener una. Esta sección te explica cómo conseguir una imagen de fondo para tu Lienzo.

Haz clic en Bloques, situado en la parte superior derecha de la pantalla.

Deberías estar en la pantalla Dibujos.

En la columna Bloques, haz clic en Perro y arrastra el bloque CUANDO PERRO.CLIC a tu área de programación.

Desde Bloques, selecciona LienzoDibujos y arrastra un bloque PONER LIENZODIBUJOS.IMAGENDEFONDO al bloque del paso 2.

Desde Bloques, selecciona Perro y conecta un bloque PERRO.IMAGEN al bloque del paso 3.

¡Enhorabuena! Ahora, cuando hagas clic en el botón Perro, la imagen del Lienzo cambiará y aparecerá el perro.

¡Asegúrate de probar tu aplicación en tu dispositivo!

Ahora añade el mismo tipo de código para los otros dos botones, Arcoíris y Beisbol.

¡Asegúrate de probar tu aplicación en tu dispositivo!

Adapta tu diseño a tu función

A veces, cuando comienzas a construir tu aplicación, te das cuenta de que lo que pensabas que harías y lo que realmente has hecho son cosas distintas. Esto, sin embargo, no es un problema: ocurre constantemente, incluso a los programadores profesionales. Lo único que has de hacer es tomarte el tiempo necesario para que lo que estás construyendo fluya correctamente. Por ejemplo, fluiría mejor si los usuarios pudieran borrar su dibujo y volver a empezar de cero. De esa manera podrían hacer un montón de dibujos, y si quieren guardar alguno de ellos, pueden hacer una captura de pantalla. Los próximos pasos te enseñan cómo cambiar el botón Guardar por un botón Borrar.

Puedes adaptar tu app a la nueva función cambiando el botón Guardar por un botón Borrar. Primero, cambia el nombre del botón.

Luego, en tu programación, añade un bloque CUANDO BORRARDIBUJO.CLIC y coloca dentro de él un bloque LLAMAR LIENZODIBUJOS.LIMPIAR.

Después añade una nueva imagen, totalmente blanca, a tu pantalla de Dibujos, y deselecciona la casilla Visible.

Puedes conseguir la imagen blanca en www.thewecan.zone/mobile-apps, dentro de SAMPLE PICTURES.

Por último, en tu programación, añade un bloque PONER LIENZODIBUJOS.IMAGENDEFONDO y únele un bloque BLANCO.FOTO.

Pon a prueba tu aplicación y asegúrate de que, al pulsar en una foto, el Lienzo muestra esa misma foto, y de que al hacer clic en el botón Borrar, el Lienzo se queda en blanco.

Puede que tengas que cambiar el Alto del LienzoDibujo para tener un poco más de espacio. Si es así, regresa a Diseñador (arriba a la derecha en tu pantalla) y cámbialo a 300 píxeles.

Dibuja sobre tus fotos

Finalmente ha llegado el momento de que edites tus fotos. Para ello, sigue estos pasos:

Deselecciona la casilla Visible de tu LienzoDibujo para tener más espacio mientras diseñas tu pantalla.

Añade un DisposiciónVertical junto al botón Borrar.

Pon el botón Borrar dentro del DisposiciónVertical.

Añade tres botones más bajo el botón Borrar.

Renombra los tres botones como «Rojo», «Azul» y «Verde». Elimina el texto de cada botón, cambia su Alto a 50 píxeles y su Ancho a Ajustar al contenedor. Cambia el color de fondo en función del nombre del botón.

Haz visible nuevamente el LienzoDibujo.

Programa la capacidad de dibujar sobre las fotos

Ahora que tus colores están listos, tienes que programarlos para que dibujen sobre tus fotos. Sigue estos pasos:

De nuevo en la pantalla Bloques (haz clic en el botón Bloques, arriba a la derecha), añade tres bloques de programación: CUANDO ROJO.CLIC, CUANDO AZUL.CLIC y CUANDO VERDE.CLIC.

Añade un bloque PONER LIENZODIBUJO.COLORDEPINTURA a cada uno de los bloques del paso 1, y coloca el color correcto en cada uno.

Encontrarás los bloques de colores dentro de la categoría Integrados.

Desde LienzoDibujos, arrastra los bloques CUANDO LIENZODIBUJOS.ARRASTRADO y LLAMAR LIENZODIBUJOS.DIBUJARLÍNEA a tu área de programación.

Ponte encima de XPrevio y arrastra un bloque TOMAR XPREVIO a la ranura x1. Haz esto con XPrevio, YPrevio, XActual e YActual.

Último paso, similar a los pasos 3 y 4: añade los bloques CUANDO LIENZODIBUJOS.TOCAR y LLAMAR LIENZODIBUJOS.DIBUJARPUNTO de modo que también puedas dibujar puntos en el Lienzo.

Prueba tu app. Asegúrate de que puedes dibujar sobre las fotos y borrar la pantalla.

PROYECTO 4 Crea un juego para móviles

¡En este proyecto aprenderás a crear un juego! Primero aprenderás a hacer que una imagen se mueva por la pantalla. Luego aprenderás a hacer que la imagen «recoja» puntos. Finalmente aprenderás a añadir más características al juego, como que aparezcan elementos en lugares aleatorios.

ELIGE UN JUEGO

Antes de comenzar a construir, tienes que decidir qué tipo de juego quieres. Este libro te enseña a crear un juego que consiste en dar a un perrito toda la comida posible en un corto periodo de tiempo. Se parece un poco a Pac-Man comiendo los puntos amarillos, a Flappy Bird recogiendo monedas o incluso a Mario o Sonic. Pero esta versión es un poco más sencilla.

PREPARA TU APLICACIÓN

Para comenzar a trabajar en tu app, tendrás que crear un nuevo proyecto en tu App Inventor. Luego podrás preparar la versión básica del juego.

Crea un nuevo proyecto

Si has estado siguiendo el libro, este será el tercer proyecto que crees, de modo que debería ser algo a lo que ya estás acostumbrado; pero si necesitas ayuda, consulta los proyectos previos para obtener más detalles.

Ve a appinventor.mit.edu. Haz clic en el botón Create Apps e ingresa.

Crea un nuevo proyecto: abre el menú desplegable Proyectos y selecciona Comenzar un proyecto nuevo.

Llama a tu proyecto «AlimentaAWinston».

¡Ya estás listo! ¡Puedes comenzar a diseñar tu pantalla y programar tu juego!

Prepara tu pantalla

Antes de empezar a programar tendrás que crear la pantalla. Para la primera versión de este juego, es algo sencillo: basta con que sigas los pasos siguientes.

Arrastra un Lienzo a tu pantalla.

Lo hallarás en la sección Dibujo y animación de la columna Paleta.

Haz que el Lienzo llene la pantalla. Pon el Alto y el Ancho a Ajustar a contenedor. Luego haz que el color de fondo sea turquesa.

Arrastra un SpriteImagen a tu Lienzo.

Lo encontrarás dentro de la sección Dibujo y animación de la columna Paleta.

Convierte el SpriteImagen en Winston siguiendo estos pasos:

Descárgate la imagen «Winston.png» que encontrarás en www.thewecan.zone/mobile-apps, dentro de SAMPLE PICTURES, y cárgala en App Inventor.

Pon a Winston como imagen del SpriteImagen y cambia el nombre a «Winston».

Cambia el Alto y el Ancho a 50 píxeles.

¡Enhorabuena! Ahora puedes programar a Winston para que se mueva por la pantalla.

CREA UN JUEGO SENCILLO

Dar con una idea novedosa para un juego puede resultar un poco difícil; cuando comienzas es recomendable construir a partir de cosas que ya conoces. Para esta aplicación necesitas un juego que quepa en una sola pantalla, con un personaje que puedas mover y algo que este pueda recoger. Piensa en otros juegos a los que hayas jugado y que sean parecidos. (SUGERENCIA: Pregunta a tus padres a qué juegos les gustaba jugar cuando eran más jóvenes.) Sigue los pasos de las dos secciones siguientes para construir el juego.

Programa a Winston para que se mueva

Ahora que Winston está en la pantalla, puedes programarlo para que se mueva. Haz clic en el botón Bloques, en la esquina superior derecha, para acceder al área de programación.

Luego sigue estos pasos:

Haz que Winston se mueva cuando hagas clic en él: en la columna Bloques, selecciona Winston y arrastra un bloque CUANDO WINSTON.TOCAR a tu visualizador.

Fija la velocidad de Winston: bajo Winston, en la columna Bloques, arrastra un bloque PONER WINSTON.VELOCIDAD al bloque CUANDO WINSTON.TOCAR que añadiste en el último paso. Luego haz clic en Matemáticas, en la columna Bloques, y busca un bloque numérico para conectarlo.

La programación de la versión sencilla está casi completa. Pruébala en tu emulador o en tu dispositivo Android.

Para probar tu programación, haz clic sobre Winston: debería comenzar a moverse.

Si no recuerdas cómo probar tu programación, vuelve a leer la sección «Prueba tu app» en el Proyecto 3.

¡Que Winston no se detenga!

Si pruebas tu app y haces clic sobre Winston, verás que deja de moverse cuando llega al borde.

Para arreglar esto, añadamos algo al programa.

Desde Winston, en la columna Bloques, arrastra un bloque CUANDO WINSTON.TOCARBORDE a tu visualizador. Luego añade un bloque LLAMAR WINSTON.BOTARBORDE al bloque CUANDO WINSTON.TOCARBORDE que acabas de arrastrar.

Desde Variables, en la columna Bloques, arrastra un bloque TOMAR y conéctalo al bloque LLAMAR WINSTON.BOTARBORDE. Escoge Borde en el menú desplegable.

Vuelve a probar tu app.

Regresa a tu app y verás que Winston avanza y retrocede por toda la pantalla, y rebota al tocar un borde.

Haz que Winston escuche

Ahora que Winston ya se puede mover, deberías hacer que vaya donde tú quieras que vaya.

Desde el Lienzo, en la columna Bloques, arrastra un bloque CUANDO LIENZO1.PRESIONAR a tu visualizador.

Desde Winston, en la columna Bloques, arrastra un bloque LLAMAR WINSTON.APUNTARENLADIRECCIÓN a tu bloque PRESIONAR.

Desde Variables, arrastra dos bloques TOMAR para conectarlos a tu bloque APUNTARENLADIRECCIÓN, y en sus menús desplegables, ponle a uno x y al otro y.

Vuelve a probar tu app y observa qué ocurre cuando tocas cualquier parte de la pantalla.

Alimenta a Winston

Ahora que Winston ya es capaz de moverse por la pantalla, ¡dale algo de comida!

Descarga comida de perro: ve a www.thewecan.zone/mobile-apps y, en SAMPLE PICTURES, descarga la imagen «food.png».

Añade la comida a tu aplicación: regresa a la pantalla Diseñador y añade otro SpriteImagen a tu app.

Prepara tu sprite de comida: cambia la imagen de tu nuevo SpriteImagen y renómbralo como «Comida1». Luego redimensiona el Alto y el Ancho de Comida1 a 25 píxeles.

Establece qué ocurre cuando Winston colisiona con la comida: desde Winston, en la columna Bloques, arrastra un bloque CUANDO WINSTON.ENCOLISIÓNCON a tu visualizador.

«Colisionar» significa chocar, de modo que si por accidente chocas con un poste, es que has colisionado con él.

Desde Control, arrastra un bloque SI… ENTONCES a tu bloque ENCOLISIÓNCON.

Desde Lógica, arrastra un bloque = a tu bloque SI… ENTONCES.

Desde Variables, arrastra un bloque TOMAR a tu bloque =, y en el menú desplegable, selecciona otro.

«Otro» es tan solo el nombre de todo aquello que Winston toque. Más tarde, cuando añadas más bloques de comida, «otro» se referirá a cualquier bloque de comida con el que colisione, no solo a Comida1.

Desde Comida1, al final de la lista, arrastra un bloque COMIDA1 a tu bloque =.

Desde Comida1, arrastra un bloque PONER COMIDA1.VISIBLE a tu bloque SI… ENTONCES.

Desde Lógica, arrastra un bloque FALSO a tu bloque VISIBLE.

Vuelve a probar tu app. Cuando Winston colisione con Comida1, esta debería desaparecer.

¡Enhorabuena! ¡Ya tienes la versión sencilla de «Alimenta a Winston»! Las próximas secciones te enseñarán cómo hacerlo aún más entretenido.

HAZ QUE SE PUEDA VOLVER A JUGAR

Como habrás comprobado, una vez Winston se come su alimento, lo único que hace es ir de un lado a otro de la pantalla hasta que sales de la app. Para que el juego resulte un poco más divertido, añade más comida y la capacidad de volver a comenzar el juego.

Haz que Winston se sacie

Esta sección te enseña cómo dar más comida a Winston: ¡nada menos que diez cuencos!

Ve a Diseñador y añade nueve SpriteImágenes más a tu Lienzo.

Renombra los sprites «Comida2» a «Comida10»; cambia sus imágenes por «food.png», y su Alto y su Ancho a 25 píxeles.

Programa la comida de Winston

Ahora que Winston tiene un montón de comida en la pantalla, has de asegurarte de que si tropieza con cualquiera de los cuencos de comida, este desaparecerá.

Regresa a Bloques (el área de programación). Busca el bloque CUANDO WINSTON.ENCOLISIÓNCON que ya has hecho, y haz clic en el botón azul del bloque SI… ENTONCES que se halla dentro. Luego arrastra un bloque SI NO, SI al bloque SI que se despliega.

Haz cambios en este nuevo bloque para que sea igual que el código para Comida1. Sin embargo, el nuevo bloque debería llamarse «Comida2» en lugar de «Comida1».

¡ESPERA! ¡Esto nos va a llevar una vida! Tomemos un atajo: en lugar de hacer esto para cada cuenco, pongamos toda la comida en una lista y luego usemos una iteración con ella.

«Iterar» significa hacer algo repetidamente. En términos informáticos, suele significar repetir una acción mediante una secuencia de números o valores: el ordenador realiza la acción para el primer valor, luego la repite para el segundo valor, luego para el tercero, etcétera. En este caso tenemos una lista de cuencos de comida, e iteraremos con esa lista para que todos se hagan invisibles cuando Winston colisione con ellos.

Sigue los siguientes pasos para iterar con todos los cuencos de comida:

Crea una lista: desde Variables, en la columna Bloques, arrastra un bloque INICIALIZAR GLOBAL a tu visualizador y renómbralo como «laComida». Luego, desde Listas, en la columna Bloques, conecta un bloque CREAR UNA LISTA VACÍA al bloque INICIALIZAR GLOBAL.

Añade elementos a la lista: desde Listas, arrastra un bloque AÑADIR ELEMENTOS A LA LISTA al bloque CUANDO WINSTON.TOCAR, dado que es el que inicia el juego. Haz clic en el botón azul del bloque AÑADIR ELEMENTOS A LA LISTA y asegúrate de que hay diez elementos en la lista.

Escoge la lista: desde Variables, arrastra un bloque TOMAR y únelo al bloque AÑADIR ELEMENTOS que encabeza la lista. Asegúrate de que la selección del desplegable es global laComida.

Añade los elementos: bajo cada elemento de la sección Componentes, a la izquierda, verás un bloque verde con el nombre del elemento, como «Comida1», al final de la lista de bloques que puedes usar. Arrastra y une esos bloques de comida (COMIDA1 a COMIDA10) a las ranuras de los bloques ITEM de tu bloque AÑADIR ELEMENTOS.

Cambia tu bloque de colisión: quita los bloques = y PONER VISIBLE de tu bloque SI… ENTONCES. Luego, retira la parte SI NO, SI haciendo clic en el botón azul del bloque SI… ENTONCES y arrastrando el SI NO, SI hacia fuera. Luego, desde Listas, arrastra un bloque ¿ESTÁ EN LA LISTA? y únelo a tu bloque SI… ENTONCES.

Añade la lista a iterar: desde Variables, arrastra dos bloques TOMAR hasta tu bloque ¿ESTÁ EN LA LISTA? Pon en uno «otro» y en el otro «global laComida».

El bloque ¿ESTÁ EN LA LISTA? comprueba si cierto elemento (como otro, que se refiere a todo aquello con lo que Winston colisione) está en una determinada lista. De modo que este bloque comprueba si Winston ha colisionado con un cuenco de comida, dado que la comida es el único elemento de la lista «laComida».

En tu sección Bloques, ve hasta el final a buscar Cualquier componente y haz clic en Cualquier SpriteImagen. Añade un bloque PONER SPRITEIMAGEN.VISIBLE a tu bloque SI… ENTONCES.

Desde Variables, arrastra un bloque TOMAR a la sección DEL COMPONENTE de tu bloque VISIBLE.

Desde Lógica, arrastra un bloque FALSO a la sección COMO de tu bloque VISIBLE.

Desde Control, arrastra un bloque POR CADA ELEMENTO EN LA LISTA hasta tu bloque CUANDO WINSTON.TOCAR.

Pon la lista a «global laComida» y cambia la propiedad Visible de cada item a cierto.

¡Uf! ¡Han sido muchos pasos complicados! Deberías dedicar un tiempo a repasar estos pasos cuidadosamente, hasta que estés seguro de saber todo lo que había que hacer.

Prueba tu juego

Es hora de poner a prueba tu app. Tu programación debería verse así:

Cuando ejecutes tu app, deberías poder hacer que Winston pasee por la pantalla y recoja toda la comida.

Tienes que hacer clic sobre Winston para que empiece a moverse y para que toda la comida vuelva a verse.

Dado que la app se está complicando, tardará un poco más en cargarse en el emulador o en tu dispositivo Android. ¡Ten paciencia!

HAZ QUE EL JUEGO SEA ALEATORIO

Por último, para que el juego sea un poco más difícil, puedes hacer que la comida aparezca en lugares diferentes cada vez.

Añade botones de comienzo y reinicio

Antes de introducir la aleatoriedad, tienes que añadir los botones de comienzo y reinicio para asegurarte de que todo sucede cuando debe. Sigue estos pasos:

Ve a Diseñador y añade un DisposiciónHorizontal a la sección Disposición. Añádelo por encima de tu Lienzo. Asegúrate de que el Ancho es Ajustar al contenedor y el Alto es Automático.

Añade dos botones a la DisposiciónHorizontal, uno llamado «Comienzo» y con la palabra Comienzo en él, y el otro llamado «Reinicio» y con la palabra Reinicio en él.

Ve a Bloques y programa tu botón Comienzo: desde Comienzo, arrastra un bloque CUANDO COMIENZO.CLIC a tu visualizador.

Mueve el bloque PONER WINSTON.VELOCIDAD desde CUANDO WINSTON.TOCAR hasta CUANDO COMIENZO.CLIC.

Desde Reinicio, arrastra un bloque CUANDO REINICIO.CLIC a tu visualizador.

Mueve los demás bloques que hay bajo CUANDO WINSTON.TOCAR a CUANDO REINICIO.CLIC.

Tu bloque CUANDO WINSTON.TOCAR debería estar vacío. Bórralo.

Por último, arrastra un bloque PONER WINSTON.VELOCIDAD a tu bloque CUANDO REINICIO.CLIC. Desde Matemáticas, añade un bloque para poner la velocidad a 0.

Prueba tus botones de comienzo y reinicio

Ahora que ya tienes tus dos botones, ¡pruébalos!

Cuando ejecutes tu app en el emulador o en tu dispositivo Android, deberías hacer clic primero en el botón Reinicio, y luego en Comienzo. Hacer clic primero en Reinicio asegura que toda la comida entre en la lista que has realizado.

Asegúrate de que al hacer clic en Reinicio, Winston se detiene y la comida reaparece, y de que al hacer clic en Comienzo, Winston empieza a moverse.

Pon tu comida en lugares aleatorios

Ahora que eres un experto en iterar listas (aplicar una misma acción a todos los elementos de una lista), la siguiente sección te resultará sencilla.

Desde Control, arrastra otro bloque PARA CADA ELEMENTO EN LA LISTA a tu bloque CUANDO COMIENZO.CLIC. Debes colocar este nuevo bloque después de haber añadido los elementos a la lista, pero antes de hacerlos visibles.

Añade un bloque TOMAR GLOBAL LACOMIDA al bloque PARA CADA ELEMENTO DE LA LISTA. En Cualquier componente, haz clic en Cualquier SpriteImagen y arrastra un bloque LLAMAR SPRITEIMAGEN.MOVERA al bloque PARA CADA ELEMENTO DE LA LISTA.

Añade un bloque TOMAR, de Variables, al componente de tu bloque MOVERA, y colócalo en Elemento.

Desde Matemáticas, arrastra dos bloques ENTERO ALEATORIO ENTRE y sitúalos en las ranuras x e y de tu bloque MOVERA.

Borra los bloques 100 de ambos ENTERO ALEATORIO ENTRE y sustitúyelos por LIENZO1.ANCHO y LIENZO1.ALTO.

Hallarás Ancho y Alto haciendo clic en Lienzo1.

Ahora, cada vez que hagas clic en Reinicio, tus diez cuencos de comida aparecerán en diferentes lugares del Lienzo.

¡Uau! ¡Enhorabuena! ¡Has construido una aplicación genial para móviles! A partir de aquí puedes añadirle más elementos, como un cronómetro u obstáculos aleatorios que hagan que Winston se mueva más lento o más rápido. ¡Haz pruebas!

Aquí está toda la programación de tu juego «Alimenta a Winston»:

También puedes jugar con mi versión, que tiene diferentes niveles de dificultad. Puedes bajártela de www.thewecan.zone/mobile-apps. Descárgala en tu dispositivo Android, ábrela e instálala. ¡Deberías poder jugar con ella!

SIGUE CONSTRUYENDO

Ahora que ya has construido cuatro apps distintas, es hora de poner tus habilidades a prueba. ¡Sigue construyendo y probando cosas! Usa nuevos componentes que no hemos tocado en este libro, como TextToSpeech, VideoPlayers o incluso sensores como el podómetro (que cuenta los pasos que das).

Programar puede ser difícil, y a veces el software no funciona. Si te quedas atascado, date un descanso, déjalo un rato y vuelve cuando sientas que puedes concentrarte mejor. Siempre es buena idea pedir ayuda, o simplemente explicar a alguien tu problema: a veces, explicar tu problema en voz alta te ayuda a ver la solución por ti mismo.

¡Feliz programación!

SOBRE LA AUTORA

Sarah Guthals se doctoró en 2014 en Ingeniería informática, con especialidad en Educación informática, por la Universidad de California en San Diego. Durante el doctorado construyó la versión beta de CodeSpells, un videojuego de inmersión en 3D diseñado para enseñar a programar a los niños mediante un hechicero y sus encantamientos.

Guthals cofundó ThoughtSTEM, compañía que diseña software (por ejemplo, LearnToMod), itinerarios y métodos para enseñar a los niños a programar, así como para ayudar a los profesores de primaria y secundaria a enseñar programación a sus alumnos. Ha escrito tres libros acerca de trucos de Minecraft, ha impulsado un curso Coursera para profesores interesados en enseñar programación, y ha fundado We Can, una compañía dedicada a animar a todos los niños a hacer lo que deseen. Recientemente entró en la lista de los «30 de menos de 30» de Forbes en la sección Ciencia.

Su pasión es hacer que la programación sea accesible para todo el mundo y convertirla en una parte básica de nuestras competencias.

DEDICATORIA

Deseo dedicar este libro a mi familia y a mis amigos, quienes me han dado todo su apoyo no solo para escribir este libro, sino también para convertirme en quien soy hoy. Quisiera dedicar este libro específicamente a Adrian Guthals, quien siempre me ha ayudado a ver que, con pasión y dedicación, puedo hacer cualquier cosa.

AGRADECIMIENTOS DE LA AUTORA

Quisiera agradecer el duro trabajo invertido en crear Android y App Inventor; sin ellos, crear aplicaciones para móvil sería muchísimo más difícil. También quiero agradecer a los profesores y padres de todo el mundo que han reconocido la importancia de la informática en la enseñanza y han dado tantas y tan valiosas lecciones a nuestra próxima generación de creadores.

AGRADECIMIENTOS DE LOS EDITORES

Responsable de adquisiciones: Amy Fandrei

Edición de proyecto: Christopher Morris

Revisión: Christopher Morris

Asistencia editorial: Serena Novosel

Edición: Cherie Case

Revisión técnica: Connor Morris

Producción editorial: Selvakumaran Rajendiran

Crea una app para móvil

Sarah Guthals

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).

Título original: Making YouTube Videos

© 2017 by John Wiley & Sons, Inc.

Revisión técnica: CreaTIC Academy, S.L.

Edición publicada mediante acuerdo con Wiley Publishing, Inc.

…For Dummies y los logos de Wiley Publishing, Inc. son marcas registradas utilizadas bajo licencia exclusiva de Wiley Publishing, Inc.

© Centro Libros PAPF, S. L. U., 2018

Grupo Planeta

Avda. Diagonal, 662-664

08034 – Barcelona

www.planetadelibros.com

Primera edición en libro electrónico (epub): noviembre de 2018

ISBN: 978-84-329-0503-2 (epub)

Conversión a libro electrónico: Pablo Barrio