Ejercicio: Introducción a AppInventor

De Edutec Wiki
Saltar a: navegación, buscar

Introducción a AppInventor

¿Que aprenderemos?

Se introducirá al usuario en los primeros pasos en el uso de esta plataforma.

Un poco de historia

AppInventor es una plataforma creada por Google Labs para crear aplicaciones móviles para el sistema operativo Android. Se empezó a desarrollar en el 2009 en el MIT’s Center for Mobile Learning. Actualmente la comunidad consta de más de 3 millones de usuarios procedentes de más de 200 países.

Acceso a la plataforma

Podemos acceder directamente a AppInventor desde éste enlace. Nos pedirá que introduzcamos nuestro correo electrónico y contraseña de nuestra cuenta de Google (es el único requisito necesario para poder utilizarlo). Una vez lo introducimos todo y aceptamos los términos de uso, nos aparecerá la siguiente pantalla:


IntroAI2 Changelog.png


Opcional: por defecto el idioma está en inglés, si queremos cambiarlo tenemos el selector de idioma arriba a la derecha, justo a la izquierda de nuestra cuenta de correo.


IntroAI2 Language.png


Creación de proyectos

La primera vez que entremos aparecerá un mensaje diciéndonos que no tenemos ningún proyecto aún, así que nos invitará a crear uno nuevo. También tenemos la opción de crearlo si clickamos en el botón de “Nuevo proyecto”.


IntroAI2 NewProject.png


Inmediatamente nos pedirá el nombre para el proyecto, así que sólo queda introducir un nombre (sin espacios).


IntroAI2 NewProject2.png

El entorno

AppInventor está dividido principalmente en dos secciones: el diseñador y el editor de bloques. En el primero se construye la aplicación añadiendo los componentes que necesitemos y opcionalmente, configurando los valores iniciales de sus propiedades. En el segundo es donde se le da “comportamiento” a la aplicación, mediante el uso de instrucciones representadas en bloques (similar a Scratch)

Diseñador

IntroAI2 Designer.png

El diseñador está dividido en 5 secciones, de izquierda a derecha: la paleta de componentes, el visor, la lista de componentes añadidos, el gestor de medios y el cuadro de las propiedades. Veremos las funcionalidades de cada uno creando un proyecto de ejemplo.

Empezaremos añadiendo el elemento más básico con el que se puede interactuar, el botón. Lo añadimos a nuestro proyecto clicando encima de él y arrastrándolo al visor. Veremos como aparece en éste último y en la lista de componentes, a la derecha.

Ahora vamos a ver las propiedades. Como el botón es un componente visual, podemos editar tanto el color de fondo como el del texto, el tipo de letra de éste, el tamaño, la posición, la forma… todo lo que especifiquemos en éstas es como se verá el componente cuando aparezca en pantalla al iniciar la aplicación, y son permanentes durante la ejecución de la aplicación, a menos de que las cambiemos mediante la programación por bloques.

Editor de bloques

IntroAI2 Blocks.png

Empecemos a programar la aplicación cambiando al editor de bloques. Como se puede ver, esta sección está dividida en 3 partes: Bloques, Medios (presente también en el diseñador) y Visor (de bloques, no de componentes). Vamos a hacer una aplicación muy sencilla que cambie el color del fondo de pantalla cada vez que le demos al botón. Para ello clicamos en el Botón1, en el cuadro Bloques, y arrastramos al Visor el primer bloque.

[CAPTURA DE BOTON.CLIC]

Este tipo de bloque es capaz de detectar un evento y en consecuencia ejecutarse, junto con los bloques que contenga. Éste en concreto, hará que la aplicación pueda hacer algo cuando clickemos en el botón.

Si queremos cambiar el color de fondo de la pantalla, al ser éste una propiedad de la pantalla, tenemos que clickar al elemento que la representa (Screen1) y buscar un bloque que cambie dicha propiedad. En concreto tenemos que buscar el que pone “poner Screen1.ColorDeFondo como”. Arrastramos este bloque dentro del que ya habíamos metido en el visor.

[CAPTURA DE PROGRAMA]

Ahora solo queda decirle a que color queremos que cambie cuando pulsemos el botón. Como podemos ver, el bloque que acabamos de colocar necesita que le conectemos otro bloque, en concreto uno que sea de tipo color. Para ello usaremos bloques integrados, que son bloques que no pertenecen a ningún elemento pero que son comunes para todos los elementos de nuestra aplicación. Como necesitamos especificarle un color, cogeremos cualquier bloque que queramos dentro de la categoría Colores, arrastrándolo luego y enganchándolo al hueco que quedaba libre.

[CAPTURA DE PROGRAMA]

Si disponemos de un dispositivo móvil Android (ya sea smartphone o tablet) podemos probar la aplicación al mismo tiempo que la construimos, sin necesidad de instalarla antes. Para probar esta funcionalidad, existen 2 opciones:

Conexión con dispositivo vía Wi-Fi Conexión con dispositivo vía USB

Aunque si no tenemos un dispositivo existe una tercera opción, usando el Emulador.

Conexión con el dispositivo

Vía Wi-Fi (Companion)

Ésta es la opción mas recomendada, principalmente porque no se necesita instalar nada en el equipo donde se va a usar AppInventor. Lo que sí se requiere es instalar la siguiente aplicación en el dispositivo donde vamos a probar la aplicación:

[ CAPTURA DE QR PLAY STORE] Descarga en la Play Store

[ CAPTURA DE QR DECARGA DIRECTA ]

Descarga directa

Después de instalarla en el dispositivo, ejecutamos la aplicación y nos aparecerá la siguiente pantalla:

[ CAPTURA DE AI2 COMPANION ]

Como se puede ver en la captura, la aplicación nos pedirá que introduzcamos un código de 6 letras o bien que escaneemos un código QR. Ambos códigos nos aparecerán si vamos a AppInventor y seleccionamos la opción AI Companion en el menú Conectar:

[ CAPTURA DE CODIGO EN APPINVENTOR ]

Si no se ha sincronizado pasados unos pocos minutos, AppInventor mostrará un mensaje diciendo que ha expirado el tiempo de sincronización:

[ CAPTURA DE ERROR DE SINCRONIZACIÓN ]

Vía USB

En caso de no poder usar una conexión Wi-Fi, también es posible conectar el dispositivo a un puerto USB del equipo donde vayamos a usar la plataforma. En este caso no se necesita instalar la aplicación AI2 Companion, pero sí activar una característica (por defecto oculta) en el dispositivo. Además, se requiere instalar un programa en el equipo. Las instrucciones para instalar dicho software en cada sistema operativo están disponibles en los correspondientes enlaces:

Instalación en Mac OS X Instalación en Windows Instalación en GNU/Linux

Una vez instalado, es necesario ejecutarlo (en Windows y Linux, no así en Mac OS X) de la siguiente manera:

En Windows, haciendo doble click en uno de los atajos disponibles tanto en el Escritorio como en el Menú de inicio.

[ CAPTURA ICONO AISTARTER ]

En Linux, ejecutando la siguiente línea de comando desde un terminal: $/usr/google/appinventor/commands-for-appinventor/aiStarter &

[ CAPTURA AISTARTER EN TERMINAL ]

Seguidamente en nuestro dispositivo vamos a Ajustes > Opciones de desarrollo y activamos la opción Depuración USB. Si no está visible dicha opción, necesitamos ir a Ajustes > Acerca del dispositivo y pulsar varias veces donde se muestre la versión de Android instalada.

[ CAPTURA DE OPCIONES DE DESARROLLO / ACERCA DEL DISPOSITIVO ]

Emulador

En caso de no tener un dispositivo donde probar la aplicación, es posible ejecutar un emulador si ya teníamos instalado el software de configuración ya explicado anteriormente. Una vez instalado vamos a Conectar > Emulador y en poco tiempo debería aparecer en pantalla.