En este tutorial quiero enseñar una aplicación muy chula, y que permite pasar muy buenos ratos de creatividad con nuestros hijos: AppInventor.
MIT App Inventor es una aplicación web muy similar a Scratch, pensada para desarrollar Apps para móvil. Es muy útil para aprender a programar y para crear aplicaciones simples en poco tiempo.
Para empezar, vamos a ver cómo se diseña y se programa una aplicación móvil con AppInventor, que me permita capturar una imagen con un dispositivo Android, dibujar sobre ella, y después compartirla en una red social, o por WhatsApp, o email…
A continuación, te muestro el resultado:
¿Qué recursos necesitamos para empezar?
Para diseñar la aplicación necesitaremos una cuenta de Gmail, conexión a internet y algunos recursos, imágenes y fotos. Para este tutorial ya te los he preparado algunos recursos (pero puedes usar imágenes tuyas si quieres, claro). Aquí te dejo el enlace donde te los puedes descargar (es una carpeta comprimida con todos los recursos, recuerda descomprimirla):
Estos recursos debes ponerlos en una carpeta del escritorio, llamada ‘Recursos’. Luego la utilizaremos.
Empezamos con AppInventor
1.- Abrimos el navegador Google Chrome, y accedemos a la aplicación web AppInventor, en http://appinventor.mit.edu, o escribimos app inventor 2 en la barra de dirección del navegador.
2.- En la página de la aplicación, hacemos click en Create Apps, situado en la parte superior derecha de la ventana.
3.- Accedemos con nuestra cuenta de Gmail.
Nada más entrar, nos piden que aceptemos la autorización y los términos de uso. Además, nos aparece el mensaje de bienvenida, invitándonos a que realicemos una encuesta, y nos indica que no tenemos ningún proyecto en la plataforma ;-). Pero bueno, ya tenemos cuenta vinculada a nuestra cuenta de Gmail.
NOTA: Por defecto, la aplicación está en inglés, pero podemos cambiar el idioma en el menú de la parte superior derecha de la ventana. Recuerda que este cambio de idioma no se guarda, y cada vez que inicies sesión tendrás que modificar el idioma.
4.- Hacemos click en Proyectos > Comenzar un proyecto nuevo. Le ponemos nombre al proyecto, recordando que AppInventor no permite espacios, caracteres especiales (%&*..) ni tildes.
Ya estamos dentro de AppInventor.
5.- Accedemos a crear nuestra aplicación. Debemos tener en cuenta que, siempre que empezamos a crear un proyecto, tenemos que tener claro dos puntos:
- ¿Qué queremos que haga nuestra aplicación? En nuestro caso, queremos pintar una imagen que capturemos con la cámara de nuestro dispositivo.
- Definir el aspecto visual de nuestra aplicación. Es decir, lo que vamos a ver cuando ejecutemos nuestra aplicación en nuestro smartphone con Android.
Los componentes de AppInventor que vamos a utilizar
Para diseñar la interfaz de usuario, es decir, lo que se ve en el dispositivo cuando abrimos (o ejecutamos) nuestra aplicación, construiremos tres áreas bien definidas, con una serie de componentes que iremos trabajando.
Lienzo: Es el espacio sobre el cual pondremos nuestra foto como fondo, y nos permitirá pintar encima de ella.
Paletas de colores: Una serie de botones de colores que se usaremos para pintar.
Botones: Los hay para capturar una imagen, para pintar, borrar, compartir una foto, salir de la aplicación…
Diseño de la Aplicación móvil
Nos ponemos, pues, manos a la obra. En el siguiente video te explico todos los pasos para comenzar a diseñar esta sencilla aplicación para tu smartphone con Android.
Puedes ir viendo y mejorando tu diseño tu aplicación con AI2Companion, esta app te permite conectar tu dispositivo a la plataforma.
Programación de la Aplicación móvil
Bien, Ya tenemos diseñada nuestra aplicación. Ahora, no toca programar los elementos (botones, paleta de colores…) para que funcionen correctamente, y hagan lo que les pidamos.
A continuación, te indico la programación de todos los elementos.
Y en este enlace tienes el archivo aia 😉
Si tienes cualquier duda, puedes dejar un comentario en este post. Y si quieres compartir con nosotros tu diseño, también nos darías una gran alegría.
Nota: Aquí la versión 2020 publicado en la Galería de proyectos de la comunidad de APP Inventor https://gallery.appinventor.mit.edu/?galleryid=5753075468206080
Buenas tardes:
Un trabajo muy bien explicado.
Puedes continuar con la programación?
Gracias
Buenas tardes, Antonio:
En primer lugar agradecerte tus palabras. Hoy mismo actualizo este post y comparto la programación y el archivo aia. Cualquier duda me dices.
P.D.: Si escribes en el buscador de ‘Gallery’ de MIT APP Inventor ‘App dibujo’ te aparece la última versión de esta aplicación.
Un saludo, Remedios
Hola no entiendo de donde sale el bloque compartir1 ,como se obtiene?
Hola Luis,
Para compartir tienes que arrastrar la componente ‘Compartir’ de los bloques sociales, en la vista de diseño para luego utilizarla en la vista de bloques. ¿Te refieres a eso?
Te adjunto una imagen por si te ayuda https://momandgeek.com/wp-content/uploads/componente-compartir.png.
Cualquier cosa me dices.
GRACIAS
Por qué cuando la foto tomada aparece en el lienzo pero con orientación cambiada. La tomo en vertical y en el lienzo aparece en horizontal. Saludos
Buenas Hugo,
El problema de la foto torcida en el canva, es debido a un error de lectura de los metadatos de la foto por parte de App Inventor.
Como solución, instala la extensión ‘Taifun’s extension’, para rotar la imagen en el canva.
Enlace de la librería: https://puravidaapps.com/image.php en la aplicación.
GRACIAS.
Hola! Me gusta mucho la explicación, pero al hacerlo yo, cuando clico sobre el botón salir aparece en la pantalla «closing forms is not currently supported during development» y no cierra el programa.
Buenas, la acción salir de la aplicación solo funciona cuando se genera el archivo apk y se instala en el dispositivo con Android. Como has comprobado, en la fase de desarrollo te sale ese mensaje… Muchas gracias por tu comentario.