Para comenzar a trabajar con App Inventor, en primer lugar, tenemos que acceder a su página web. Una vez ahí, nos darán instrucciones de como configurar un dispositivo Android conectado a la misma red wifi o un emulador. Considero que la mejor forma de realizar este curso, y utilizar App Inventor, es mediante un dispositivo Android conectado mediante Wifi, por lo que se va a explicar este proceso.
Instalación y registro
En primer lugar tenemos que instalar la App Companion, es decir, la aplicación que App Inventor utilizará como soporte para mostrar nuestros proyectos. Para ello hay dos formas, instalando manualmente un apk o a través de Google Play Store. Conviene instalar a través de Play Store, ya que cada vez que se produzca una actualización en la App Companion se descargará automáticamente, por lo que siempre estará actualizado.
Para instalar la aplicación, puedes escanear el código QR de la imagen, o pulsar sobre este link.
A continuación, desde la interfaz web de App Inventor, tendremos que iniciar sesión con nuestra cuenta de Google (Gmail) y aceptar los términos de servicio. Una vez aceptados, entraremos en la interfaz de App Inventor, donde en primer lugar configuramos el idioma para que la interfaz se muestre en Español. Para ello, en el menú situado en la esquina superior derecha, pulsa sobre English y, dentro del menú desplegable, escoge Español. Puedes ver una imagen de dicho menú a continuación:
Creando un nuevo proyecto y conectado con nuestro terminal
Después crearemos nuestro primer proyecto para comenzar con el proceso de conexión. Para ello, pulsamos sobre “Comenzar un proyecto nuevo…” o bien sobre “Proyectos/ Comenzar un proyecto nuevo…” donde nos pedirán introducir el nombre de nuestro proyecto, que en este caso sera: hola_mundo.
Si se ha creado correctamente el proyecto, aparecerá la interfaz de desarrollo de aplicación de App Inventor, que se divide en Diseñador y bloques. En diseñador realizaremos la interfaz gráfica de usuario, o UI, y en bloques programaremos las acciones que realizará nuestra aplicación.
Una vez que tengas la App companion instalada en tu terminal, abre dicha aplicación y en la página web de App Inventor pulsa sobre conectar y después en AI Companion. Aparecerá un código QR y un código alfanumérico. Dentro de la App puedes escribir el código alfanumérico dentro del cuadro de texto o bien escanear el código QR. Si se produce correctamente la conexión, aparecerá la pantalla de nuestro proyecto que irá actualizándose automáticamente cada vez que incluyamos un nuevo elemento en la interfaz gráfica.
Creando el Hola Mundo
Para crear el Hola mundo, un programa típico en los inicios de todo curso de programación en el que se muestra un mensaje, utilizaremos una etiqueta.
App Inventor se basa en dos “modos” de trabajo, el modo “diseñador” y el modo “bloques”. En el modo diseñador crearemos la interfaz gráfica, donde podremos cambiar nombres, textos, etc. Por el contrario, en el modo “bloques” utilizaremos la interfaz gráfica que hemos generado en el modo “diseñador” para realizar acciones.
Para incluir dicha etiqueta en nuestra interfaz gráfica, busca Etiqueta en el menú Interfaz de Usuario, que se encuentra dentro de Paleta, un “contenedor” donde se almacenan todos los elementos que podemos utilizar.
Cuando hayas localizado Etiqueta, pulsa sobre Etiqueta y arrastralo hasta la interfaz gráfica. Ya estará lista para modificar.
Verás que el menú Componentes ahora muestra Etiqueta1, que es el elemento que acabamos de crear. Según vayamos creando elementos se irán agrupando en este menú. Dentro del menú Propiedades podremos modificar diferentes aspectos relativos a cada elemento creado. En este caso, vamos a modificar el texto por “hola mundo” y la posición del texto la modificamos a centro.
Exportando la aplicación a nuestro terminal
El último paso es exportar la aplicación a nuestro terminal, para ello, en el menú superior pulsamos sobre Generar y después sobre App (Generar código QR para el archivo apk). Después se compilará nuestra aplicación y podremos instalarlo a través de nuestro terminal. Dentro de la App Companion pulsamos sobre scan QR code, o escanear código QR, y automáticamente nos aparecerá un dialogo para instalar la aplicación.
En caso de que no hayas instalado un apk con anterioridad, aparecerá un mensaje indicando que no se pueden instalar aplicaciones obtenidas de fuentes desconocidas. Para solucionar este problema hay que activar dentro de los ajustes del terminal la opción “Permitir la instalación de aplicaciones de origen desconocido”. Una vez activado, podemos repetir el proceso e instalar la aplicación.
¡Hasta la próxima!