TUTORIAL: CREA UNA APP JUNTO A TUS HIJOS UTILIZANDO APP INVENTOR

Hoy os traemos un tutorial muy sencillo para que vuestros hijos no sólo juegen con aplicaciones móviles si no que además puedan crear las suyas propias. Con APP INVENTOR es posible. Echadles una mano si tienen menos de 8 años. Si no, ellos solos siguiendo este post, podrán crear su primera app sin problemas y en menos de media hora.

0
757

Appinventor

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.

1-captura todo en blanco por primera vez

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.

3-captura idiomas

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.

2-captura crear nuevo proyecto1

4-captura crear nuevo proyecto2

App Inventor se compone de dos partes muy diferenciadas y que podemos cambiar arriba a la derecha: el Diseñador y los Bloques.

5-captura diseñador y 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.

6-captura diseñador

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.

7-captura bloques

 

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.

8-captura con botón

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.

9-captura con botón = Hablar

Haremos lo mismo pero en lugar de añadir un botón de la paleta, arrastraremos una imagen.

 

11-captura con imagen2

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:

12-captura con imagen + robot

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.

13-captura con imagen + robot + textoavoz

 

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.

14-captura acciones botón

 

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:

15-captura con dos bloquesFinalmente 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”.16-captura bloques final

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.

17-captura app ai2 companion

 

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.

18-captura conectar ai2 companion

 

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.

19-captura guardar archivo apk

 

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.

Compartir

No hay comentarios

Dejar respuesta