fbpx

Haciendo una aplicación de dibujo para mi dispositivo móvil con App Inventor

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:

Aplicación móvil con AppInventor

¿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):

Recursos que necesitamos


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.

Diseño de la aplicación

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.

Comprobando cómo se ve el diseño en mi dispositivo

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

3 comentarios en “Haciendo una aplicación de dibujo para mi dispositivo móvil con App Inventor”

  1. Pingback: Videojuego 'Recargando la batería de mi robot' con MIT App Inventor - MomandGeek®

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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ir arriba