Existen muchas herramientas para que nuestros hijos aprendan a programar. Una de las más conocidas es Scratch, pero hoy nos gustaría enseñaros una, que siendo muy parecida, permite enseñarles cómo funcionan esos aparatos por los que se vuelven locos, los móviles.
Para ello usaremos una herramienta que se llama App Inventor, desarrollada inicialmente por Google pero ahora mantenida por el MIT. Y lo único que necesitaremos es un ordenador con conexión a internet, una cuenta de Gmail, y un móvil android.
QUÉ ES UNA APPLICACIÓN Y CÓMO FUNCIONA APP INVENTOR
App Inventor permite crear aplicaciones para móviles. Mientras que una aplicación está formada por una serie de instrucciones donde tú indicas qué tiene que suceder en base a unos eventos. Por ejemplo, cuando pulse sobre un botón (evento) mueve la pelota que se muestra hacia la derecha (instrucción).
Definir estos eventos es instrucciones es lo que permite hacer de una manera muy intuitiva App Inventor. Mediante un sistema de bloques (muy parecido a Scratch) y sin escribir ninguna línea de código, puedes crear desde una aplicación que cambie el color de la pantalla, hasta utilizar los sensores del móvil o incluso conseguir que tu móvil interactúe con LEGO MINDSTORM.
NUESTRA PRIMERA APLICACIÓN
Para comenzar a usar App Inventor, debemos ir al siguiente link. Necesitas conectarte con una cuenta de gmail para acceder, y todos los proyectos que hagas quedarán asociados a esta cuenta.
Comentar también que podemos configurar App Inventor en español, pulsando arriba a la derecha como se muestra en la imagen a continuación.
Como nuestro primer proyecto, haremos una aplicación muy sencilla con un sólo botón que al pulsarlo nos dirá la frase que queramos.
Comenzamos creando un nuevo un nuevo proyecto que se llame RobotParlanchin.
App Inventor se compone de dos partes muy diferenciadas y que podemos cambiar arriba a la derecha: el Diseñador y los Bloques.
La primera que vemos es el Diseñador y se compone de:
- En el centro, el visor. Que representa lo que veremos en la pantalla de nuestro móvil
- A la izquierda, la paleta. Contiene la lista de elementos que podemos necesitar para componer nuestra aplicación. Desde elementos visuales como textos, botones, imágenes… hasta los sensores del móvil, acceso a la agenda y mucho más. Estos elementos los podemos arrastrar sobre el visor para poder utilizarlos.
- A la derecha del visor, los componentes. Muestran los elementos de la paleta que usa nuestra aplicación.
- A la derecha de los componentes, las propiedades. Indica los diferentes parámetros que podemos modificar del elemento que tenemos seleccionado en la vista de componentes.
Si pulsamos sobre los Bloques, encontraremos:
- A la izquierda, bloques. todas las instrucciones con la que definiremos nuestro programa
- En el centro, el visor. Arrastraremos los bloques de la izquierda sobre esta área para definir las instrucciones de nuestro programa.
PRIMERA PARTE DE NUESTRA APP: EL DISEÑO
Volvemos a la vista Diseñador para montar en nuestro visor los componentes de nuestra primera aplicación. Buscamos en la paleta el Botón y lo arrastramos sobre el visor. Veremos como en la pantalla dentro del visor aparece un botón “Texto para Botón1”. También se ha añadido a la lista de componentes como el primer elemento que está dentro de la pantalla.
Ahora vamos a las Propiedades para cambiar el texto del botón, buscamos abajo del todo la propiedad Texto y cambiamos “Texto para Botón1” por “Hablar”, y veremos como en el visor el texto del botón se ha cambiado.
Haremos lo mismo pero en lugar de añadir un botón de la paleta, arrastraremos una imagen.
Volvemos a la lista de propiedades, esta vez de la imagen, pulsaremos en Foto, luego en Subir un archivo, para añadir una imagen. Podéis utilizar esta imagen que hemos preparado para usar como nuestro Robot Parlanchin: https://www.dropbox.com/s/qlfd9xseb8wkzf0/robot.png?dl=1. En el visor debe aparecer un botón y nuestro robot como se muestra a continuación:
Por último, añadiremos un tercer componente que nos permitirá hacer hablar a nuestro robot. En la paleta, abrimos el grupo Medios, y arrastramos sobre la pantalla el componente TextoAVoz. Veremos que este componente se muestra abajo en el visor, como un Componente no visible.
SEGUNDA PARTE: LOS BLOQUES
Pasamos a la parte de los bloques, donde definiremos nuestras instrucciones. Si os fijáis, en la columna de Bloques, han aparecido varios componentes dentro de Screen1, que son los elementos que hemos añadido en la vista de diseño.
Lo primera será definir un bloque que se accione al pulsar sobre el botón. Para ello pulsamos en Bloques, sobre Botón1, y se muestra una lista de las diferentes acciones que podemos programar relacionadas con este componente.
Elegiremos la primera, que representa el evento de cuando se hace Clic sobre un botón. Nuestro objetivo es que se oiga una voz al pulsar sobre el botón. Por ello, la acción que queremos desencadenar cuando se pulse sobre el botón, es una instrucción del otro componente que añadimos en la parte de diseño, el TextoAVoz.
Seleccionamos ahora el componente TextoAVoz1 de la columna de los bloques, y arrastramos sobre el visor el bloque morado que dice “llamar TextoAVoz1. Hablar”, el cual se encargará de pronunciar un texto. Como esta acción será provocada cuando se pulse el botón, debemos colocarla dentro del bloque que pusimos antes, al lado de la palabra: ejecutar. Fijaros las muescas que tienen cada bloque para indicaros cómo encajan unas con otras como si fueran piezas de Lego. A continuación veréis cómo deberían estar quedando hasta ahora los bloques:
Finalmente añadiremos el texto que nuestro Robot Parlanchín pronunciará. De la columna de Bloques, seleccionamos Texto, y arrastramos el primero al lado de la palabra mensaje del bloque de Hablar que acabamos de colocar. Este bloque rojo nos permite escribir el texto que queramos. Por ejemplo: “Hola amigo mío”.
PROBAMOS LA APLICACIÓN
Ya tenemos el diseño y los bloques. Solo nos falta instalar la aplicación en nuestro móvil y android. Una de las maneras más sencillas es ir previamente a la tienda de aplicaciones Google Play en nuestro móvil, y descargar la aplicación MIT AI2 Companion desarrollada por la misma gente de App Inventor.
Una vez que tengáis la aplicación instalada en vuestro móvil. Arriba en la web de App Inventor, pulsad sobre Conectar y luego la opción AI Companion. Aparecerá un cartelito con un código QR.
Ahora en vuestro móvil, en la aplicación MIT AI2 Companion que acabáis de instalar, podéis escribir el código que os aparece, o leer el código QR pulsando el botón azul “scan QR code”. De cualquier manera, veréis como en vuestro móvil aparece la aplicación que acabamos de crear y si pulsáis sobre el botón Hablar, escucharéis la frase que habéis introducido anteriormente.
MIT AI2 Companion, permite que vayáis probando lo que hacéis en App Inventor de una manera sencilla. Si queréis instalar la aplicación definitivamente en vuestro móvil android, tenéis que ir a App Inventor y pulsar en Generar y luego guardar archivo .apk en mi ordenador. Este fichero .apk es la aplicación, y deberéis instalarlo en vuestro móvil. La manera más fácil es enviároslo por correo y abrirlo en vuestro móvil.
CONCLUSIONES
Hoy hemos aprendido a usar App Inventor para crear nuestras propias aplicaciones para móviles con nuestros hijos e hijas. Es una herramienta muy intuitiva y que tiene infinitas posibilidades. En su web hay infinidad de recursos para continuar explorando. Unos tutoriales muy sencillos son las Concept Cards, que representan de manera muy visual pequeños ejemplos con muchas de las posibilidades que ofrece App Inventor.
¡Compartid con nosotros vuestras creaciones! Y si os ha resultado interesante contad con nosotros para conocer más detalles de esta y otras herramientas para desarrollar la creatividad de los más pequeños.
