EJERCICIO 1 – Instalación y la Interfaz
MIT App Inventor es una herramienta web de programación visual y con ella vas a poder crear tus propias Apps para dispositivos Android.
App Inventor es un producto desarrollado por el Instituto Tecnológico de Massachusetts (MIT) junto con Google, de manera que como requisito se debe disponer de una cuenta de Google para acceder a la web de MIT App Inventor.
Accede a la web oficial mediante este enlace: http://appinventor.mit.edu/
Una vez tengas abierta la web, ¡verás en la barra superior un icono de color naranja donde dice Create apps!, haz clic en él y asocia tu cuenta de Google para acceder a la plataforma y comenzar a programar. Si no tienes una cuenta de Google, puedes crearla en: https://accounts.google.com/SignUp?hl=es
Una vez hayas introducido tu cuenta de Google, te aparecerá un texto con el Acuerdo de Licencia de Uso, y al pulsar aceptar ya tendrás acceso a la interfaz de programación como se muestra en la siguiente imagen,
La primera vez que abres la web aparece un cuadro de texto en el centro informándote de que no tienes proyectos, animándote a crear nuevos.
La web de App Inventor de manera predeterminada se muestra en inglés, pero en la barra de herramientas superior podrás ver una opción desplegable con todos los idiomas disponibles.
Haz clic en la pestaña y selecciona español.
App Inventor es un entorno de programación visual, que permite crear Apps usando objetos e instrucciones en forma de bloques.
Estas instrucciones proporcionarán un comportamiento a los objetos o componentes de la App para que hagan una u otra cosa.
En las siguientes imágenes podrás ver las diferentes partes de la interfaz del programa.
1. Barra de herramientas
2. Barra de la App abierta
3. Paleta
4. Visor
5. Componentes
6. Media
7. Propiedades
Tiene diferentes opciones que te permitirán acceder a la creación y edición de Apps.
1. Proyectos: crear, editar, guardar, exportar, importar nuestros proyectos.
2. Conectar: probar el funcionamiento de nuestra App, ya sea en el emulador propio de MIT App Inventor o bien en un dispositivo móvil. Con esta opción podrás ir haciendo pruebas a medida que vas programando la App.
3. Generar: una vez tengas la App definitiva, vas a poder exportarla al PC o bien al móvil directamente mediante la tecnología QR, para de este modo hacer un uso real de lo que has creado.
4. Ayuda: acceso a todo tipo de información propia de App Inventor, desde tutoriales hasta foros de la comunidad.
5. Mis proyectos: acceso a la librería en la que se almacenan todos los proyectos que tienes guardados en tu perfil.
6. Galería: acceso a las aplicaciones compartidas en la comunidad, tutoriales y demás documentos compartidos por otros usuarios de la comunidad de MIT App Inventor.
7. Guía: acceso a documentación de soporte oficial que te ayudará con dudas que se puedan plantear.
8. Idioma: podrás cambiar el idioma de la interfaz web tal y como has visto anteriormente.
Esta Barra de la App abierta es la que ofrece las opciones que hacen referencia a la app que actualmente se encuentra abierta.
Ventanas: permite cambiar la ventana del programa con la cual quieres trabajar en un momento concreto, ya que una app puede disponer de varias ventanas.
Añadir ventanas: permite añadir nuevas ventanas a la app que estás desarrollando.
Eliminar ventanas: permite eliminar las ventanas del proyecto en el que trabajamos
Ventanas – Esta pestaña da la opción de cambiar la ventana del programa con la cual quieres trabajar en un omento concreto, ya que una app puede disponer de varias ventanas.
Añadir ventanas – Esta opción permite añadir nuevas ventanas a la app que estas desarrollando.
Eliminar ventanas – Esta opción permite eliminar las ventanas del proyecto.
Diseñador: permite acceder a la ventana de diseño para colocar los objetos que forman la interfaz de nuestra App y hacer la composición del aspecto, los botones y el resto de los elementos que tendrá.
Bloques: permite añadir instrucciones en forma de bloques a los elementos que se han agregado en el apartado de Diseñador. Desde aquí programaremos el funcionamiento de nuestra App, añadiendo funcionalidades a los objetos que hemos colocado.
Esta sección del entorno situada en el lateral izquierdo de la interfaz de App Inventor, contiene todos los elementos visuales o de otro tipo, que pueden ser agregados y tratados en una App.
Al pulsar en cada una de las opciones se despliega, abajo, el menú de elementos correspondientes a esa categoría
Todos los elementos interactivos que se pueden agregar a una App, como por ejemplo botones, checkboxes (cuadros de selección), barras de desplazamiento, imágenes, listas, desplegables, campos de texto…
Permite añadir capas “no visibles” con el fin de organizar los elementos dentro de la pantalla. Pueden ser dispuestos de manera vertical, horizontal, dentro de tablas…
Para añadir reproductores de música y video hasta galerías de imágenes. Este apartado contiene “Funciones interactivas predeterminadas”, es decir, listas para ser agregadas y utilizadas.
Dibujo y animación: una serie de objetos visuales e interactivos con los cuales podrás dibujar, interactuar entre objetos…
Este apartado es bastante relevante, ya que es con el que podrás agregar a tu app
funcionalidades que un dispositivo móvil incorpora hoy en día de manera habitual, tales como; acelerómetro, giroscopio, podómetro, brújula…
Una app también puede incorporar herramientas clásicas como; SMS, e-mail, navegador web y redes sociales, agenda de contactos…
Como en todo tipo de programación, el hecho de reutilizar datos que obtenemos o que se encuentran almacenados es muy habitual y necesario. Con este apartado vas a poder generar tu base de datos para incluirla en tu app y utilizar archivos con información necesaria para el buen funcionamiento de tu App.
Otra gran característica de las app móvil es la capacidad de comunicarse con otros dispositivos del entorno mediante tecnologías inalámbricas como Bluetooth ya incorporadas en los terminales
Desde aquí podemos programar una serie de comandos que utilizaremos para programar robots de este modelo de Lego.
La app de programación gratuita LEGO® MINDSTORMS® para niños incluye una interfaz basada en Scratch, instrucciones de construcción digitales, más de 50 actividades y compatibilidad con Python para programadores más avanzados.
En esta pestaña podremos realizar programación de por libre o para desarrollar dentro de tu aplicación. Es una herramienta avanzada que no utilizaremos dada su complejidad.
Una extensión es como una librería, un código que hace algo y que podemos insertar en nuestra aplicación.
+ Una extensión es un código que un programador que sepa programar en JAVA realiza de manera que crea un nuevo componente que podemos insertar y utilizar en nuestro App inventor 2.
+ Una extensión es un nuevo componente creado por un programador que tenga conocimientos de JAVA y de código fuente de App inventor, ese componente tendrá sus bloques y podremos utilizarlo como los demás componentes de App inventor 2. Por ahora los componentes son invisibles en la ventana, es decir no se ven, más adelante la MIT eliminará esta restricción. Los archivos de extensiones terminan en .aix
Cada vez que se anada un componente al visor de tu App, se ira generando una lista de estos, de manera que podras identificar rapidamente con que objetos estas trabajando en todo momento. Para renombrar o eliminar un elemento no deseado, lo tienes que hacer mediante esta seccion del interfaz
Como ya hemos visto anteriormente, por un lado, deberás desarrollar visualmente tu App agregando y distribuyendo los componentes dentro de la pantalla, es decir trabajaras en la vista Diseñador.
También deberás programar con bloques el comportamiento de estos componentes.
Para ello seleccionaremos la vista Bloques donde podremos trabajar el lenguaje de programación del App Inventor
Cada objeto o componente tiene una serie de instrucciones organizadas por secciones de manera predeterminada.
En la siguiente imagen podrás ver el aspecto de la sección de Bloques.
En el apartado de instrucciones genéricas (Integrados), si haces clic en la sección de control verás que hay bloques tales como (Si -Entonces) que es del tipo control de condiciones y puede ser aplicado a la gran mayoría de bloques.
En el apartado de instrucciones especificas (Screen) encontrarás bloques como el siguiente que te permitirá cambiar el tamaño de letra de un determinado componente como un botón, por ejemplo, a un determinado tamaño.
