Desarrollo de Aplicaciones móviles Android con App Inventor

El alumno aprenderá a crear una cuenta de correo electrónico de Gmail para poder hacer uso del servicio de App Inventor.

El objetivo del vídeo es mostrar el acceso a la plataforma así como las principales pantallas:

• Gestión de proyectos
• Diseño de la interfaz
• Bloques

Encontrar imágenes y sonidos que podamos utilizar para nuestra aplicación.

Creación de la pantalla de una aplicación de ejemplo que contendrá una imagen, un componente sonido y un par de botones. Explicación de la utilidad de las disposiciones para alinear otros componentes en la interfaz de usuario.

Gestionar el comportamiento de la aplicación de ejemplo a través de la programación dirigida por eventos. Explicación de la interacción de un usuario con los botones utilizando los eventos clic.

Conocer las posibilidades de App Inventor a la hora de probar aplicaciones desarrolladas en la plataforma. Entender la diferencia entre probar e instalar la aplicación así como los métodos de que disponemos para ello.

En esta clase probaremos la aplicación de ejemplo utilizando un móvil real con Android y la aplicación de emparejamiento de App Inventor llamada MIT AI2 Companion.

Pequeños aspectos sobre las propiedades de componentes que mejoran la aplicación de ejemplo: propiedades de Screen, icono de aplicación, propiedades de los botones, etc.

Utilizar el emulador de terminal android proporcionado por App Inventor para ordenadores Mac.

Utilizar el emulador de terminal android proporcionado por App Inventor para ordenadores con sistema operativo Windows.

Utilizar el emulador de terminal android proporcionado por App Inventor para ordenadores con sistema operativo Linux.

Crear un empaquetado que permita tener nuestra aplicación de manera permanente en nuestro dispositivo móvil o bien distribuirla a través de la generación de un fichero APK.

Propuesta de aplicación que utilizando los conceptos aprendidos en las clases anteriores permita al alumno entrenar sus capacidades de desarrollo con la plataforma.

En esta clase veremos una posible solución al diseño de la interfaz gráfica de la propuesta de aplicación Zoológico.

Aprenderemos como una correcta nomenclatura puede ayudarnos a comprender más fácilmente la vista de bloques de cualquier aplicación.

En esta clase terminaremos de implementar la aplicación Zoológico.

Revisamos algunos de los conceptos aprendidos en esta sección del curso.

Presentación de la aplicación de ejemplo que ilustrará el funcionamiento básico de un componente de tipo lienzo para dibujar líneas de colores y posteriormente guardar la creación en un fichero.

Creación de la interfaz básica de nuestra aplicación de dibujo de líneas: disposiciones, lienzo y botones.

• Explicación del funcionamiento del lienzo(canvas)
• Manejo del evento arrastrado para el dibujo de una línea
• Comportamiento de los botones ante el evento clic

Uso de la aplicación MIT AI2 Companion para la prueba en vivo de nuestra aplicación.

Introducción al elemento notificador como componente necesario para presentar información en pantalla mediante ventanas o cuadro de diálogos así como la capacidad de estos para recoger datos de entrada por parte del usuario.

Utiliza un notificador para solicitar una entrada de texto al usuario y así poder darle un nombre de fichero al lienzo a guardar. Actualización de esta clase(mirar adjunto).

Finalización de la aplicación de ejemplo mediante la generación de su fichero APK para su posterior instalación en el terminal.

Presentación de la aplicación de ejemplo que ilustra el funcionamiento de un sprite animado que podemos mover en la pantalla y rebotarlo contra los bordes de la misma.

Diseño de la apariencia de la aplicación BotarPelota. Introducción de componentes:

• Lienzo
• Sprite

Practicar conceptos relativos a la gestión de sprites: posicionamiento en pantalla, dirección, velocidad, evento de botar contra los bordes, etc.

Comprobar mediante MIT AI2 Companion la aplicación BotarPelota y estudiar ligeras variaciones en el comportamiento de la misma.

Exposición de la app que vamos a desarrollar en los posteriores vídeos del curso para ilustrar conceptos tales como: procedimientos, animación de sprites, colisiones, etiquetado, estructuras selectivas, etc.

Establecer un punto de control a partir de BotarPelota para construir una app, LanzaPenalties, que toma como base la aplicación anterior.

Diseñar la interfaz de nuestra app utilizando:

• Disposición tabular con etiquetas
• Lienzo con sprites
• Disposición horizontal con botones

Conocer el concepto de procedimiento/función, su utilidad en cualquier lenguaje de programación y cómo puede servirnos en nuestro código para evitar duplicidad de bloques y aumentar la legibilidad de nuestro programa.

Gestionar correctamente los eventos que se producen cuando el usuario lanza la pelota y qué ocurre cuando esta toca alguno de los bordes de la pantalla.

• Conocer el concepto de colisión asociado a la programación de videojuegos
• Determinar y gestionar las colisiones significativas que debe manejar nuestra app

Entender qué es, para que sirve y como añadir a nuestra aplicación un sensor de tipo Reloj

• Añadir movimiento al sprite del portero cuando se produzca el evento temporizador en nuestro programa
• Utilizar una variable global para especificar el número de pixeles que avanzará el portero

• Utilizar MIT AI2 Companion para probar nuestra aplicación
• Realizar cambios y ver cómo éstos afectan a la aplicación

• Exposición de la aplicación de ejemplo MonoLoco que vamos a desarrollar en las siguientes clases.
• Explicación de cómo funciona una interfaz multipantalla.
• Componente base de datos para almacenar información de manera persistente en nuestros dispositivos.
• Relojes que permiten animar los sprites.
• Reproductor de sonido para la banda sonora.

• Consideración sobre la pantalla principal de cualquier aplicación.
• Creación de las distintas pantallas.

En esta clase diseñaremos la pantalla que mostrará las puntuaciones de los jugadores.

Realizamos el diseño de la pantalla donde se desarrollará el juego. Establecemos las propiedades de los principales componentes: etiquetas, lienzo, sprites, reproductor, tinybd, relojes, etc.

Codificamos el comportamiento del evento Clic para los distintos botones que componen la pantalla principal.

• incrementarPuntos
• pintarVidas
• GameOver
• origenMono y origenPlatano
• moverPlatano

Utilizando los procedimientos definidos en la clase anterior implementaremos los bloques necesarios para gestionar los eventos:

• Arrastrado
• EnColisiónCon
• TocarBorde
• Temporizadores asociados a las animaciones de los distintos sprites

Programación de la inicialización de la pantalla de juego así como el almacenamiento de datos mediante los componentes notificador y base de datos.

• Prueba de la aplicación con MIT AI2 Companion
• Detección de fallos en la lógica de nuestra app
• Corrección del código

En esta clase implementaremos el acceso a los datos almacenados en nuestra aplicación a través del componente TinyBD. Aprenderemos a recorrer la lista de etiquetas y obtener los valores previamente almacenados en la pantalla del juego.

Verificación de la aplicación y generación del empaquetado final. Propuesta sobre posibles mejoras a la aplicación.

Revisamos algunos de los conceptos aprendidos en esta sección del curso.

Presentamos la aplicación de streaming que vamos a realizar en las siguientes clases como prueba de concepto del componente reproductor.

En esta lección configuraremos la apariencia de nuestra aplicación Top Radios. Como novedad introduciremos el componente Selector de Lista y Reproductor.

Enseñamos a obtener las URL necesarias para poder reproducir el streaming de las distintas radios online. Codificamos el comportamiento de los bloques haciendo uso, entre otras cosas, de lista de elementos, reproductor multimedia, deslizador, etc.

Probamos la aplicación TopRadios con AI Companion y corregimos un par de cosas del diseño de la misma. Finalmente obtendremos el empaquetado APK para instalar la aplicación en nuestro dispositivo.

Los dispositivos móviles cuentan con una serie de sensores que nos posibilitan, entre otras cosas, orientarnos. En esta clase veremos una aplicación de ejemplo que ilustra el funcionamiento de una brújula utilizando para ello el sensor de orientación del teléfono.

Explicamos qué es y cómo funciona el sensor de orientación de un dispositivo móvil.

En esta clase desarrollamos la interfaz de la aplicación Brújula incorporando el sensor de orientación, un sprite y un lienzo.

Implementamos el comportamiento de la aplicación Brújula teniendo en cuenta el sensor de orientación y sus cambios.

Probamos la aplicación Brújula y generamos el fichero APK necesario para poder instalarla en el dispositivo.

La aplicación Gallo os mostrará cómo utilizando el sensor Reloj podemos crear un magnífico reloj con funciones de despertador.

Diseñamos la interfaz que tendrá nuestra aplicación despertador Gallo. Hacemos uso del sensor reloj así como de etiquetas y un selector de hora.

En esta clase veremos cómo podemos mostrar la hora en nuestra aplicación y cómo gestionar el evento correspondiente para reproducir el sonido del gallo cuando proceda.

Probamos la app Gallo, comentamos algunos aspectos mejorables y generamos el empaquetado para instalarla.

¿ Has visto ya el componente Lector de Códigos de Barra de App Inventor? En esta clase vamos a ver una aplicación que permite llevar de una manera rápida y el control del aforo de una sala.

En esta clase diseñaremos la interfaz de la app Aforo.

Codificamos los bloques para la aplicación Aforo. Hay que tener en cuenta el formato de las etiquetas que será leídas por el Lector de Códigos de Barra para marcar los distintos asientos como ocupados.

Probamos la aplicación y sugerimos algunas mejoras que pudiéramos considerar.

Combina los componentes Cámara y Grabador que nos permiten tomar fotos/vídeos en App Inventor respectivamente para crear una aplicación que añada las coordenadas GPS(componente Sensor de Ubicación) a un mensaje compartido mediante una de nuestras apps del móvil (Correo, WhatsApp, Telegram, ...etc).

Diseñamos la interfaz de la app FotoVideoGPS. Componentes importantes a considerar:

• Cámara
• Grabador
• Sensor de localización

Codificamos la app para que sea capaz de capturar la foto o el vídeo añadiendo la localización mediante un mensaje de texto que podrá ser compartido utilizando el componente correspondiente.

Probamos la aplicación tomando una foto y enviándola mediante WhatsApp adjuntando nuestra ubicación geográfica.

Descubre las posibilidades que App Inventor ofrece para convertir nuestra voz a texto y a su vez utilizar un componente que traduzca a otro idioma...presentamos la aplicación TraduVoz.

En esta clase dispondremos los componentes necesarios para la interfaz de nuestra app:

• Botones
• Traductor Yandex
• Reconocimiento de voz
• Texto a Voz

Programamos mediante los bloques los eventos correspondientes para el reconocer la voz, texto a voz, traductor, etc.

Probamos la aplicación y generamos el fichero APK correspondiente.

Explicación de las bases del componente ActivityStarter:

• Utilidad
• Intenciones y actividades en Android

En este vídeo aprenderás cómo está formado un proyecto de App Inventor desde el punto de vista del código fuente: organización de carpetas, activos, propiedades del proyecto, etc.

Prueba de concepto del componente ActivityStarter para mostrar el lanzamiento de distintas aplicaciones hechas con App Inventor.

Realizamos la interfaz de nuestro lanzador de aplicaciones basado en apps de terceros no creadas con App Inventor.

Utilizaremos la aplicación CatLog en un móvil rooteado para interceptar los registros de nuestro sistema operativo Android y localizar el nombre completo del paquete y clase de una app de tercero que queremos lanzar desde nuestra aplicación.

En esta clase aprenderemos como explorar un empaquetado APK con la utilidad Dexplorer y de que manera nos puede servir para establecer los parámetros necesarios en el componente ActivityStarter.

Desarrollo de la lógica de la aplicación a través de los bloques:

• Gestión de disposiciones ocultas
• Establecimiento de las propiedades principales de ActivityStarter: acción, paquete, clase, etc.

Prueba de la aplicación lanzadora de aplicaciones.

QRAforo es una aplicación que genera códigos QR con información sobre fila y asiento que ocupa una persona para la aplicación Aforo. La app hace uso del componente ActivityStarter para "enviar" dicha imagen generada por los medios que el usuario estime oportuno: whatsapp, correo, etc.

Elaboración de la interfaz gráfica de la aplicación QRAforo.

Uso de selectores de lista, operaciones sobre cadenas, sprites, etc. para generar un código QR y posteriormente compartirlo.

Prueba mediante MIT AI2 Companion de QRAforo y generación del fichero APK para su instalación en el dispositivo.

En esta clase presentamos una aplicación de ejemplo sobre el manejo de ficheros de texto en App Inventor.

Implementación de la aplicación de ejemplo ArchivoDeTexto.

Codificamos los bloques necesarios para poder escribir y leer de un archivo de texto en nuestra aplicación de ejemplo.

Probamos la aplicación archivo de texto.

¿Te has planteado la cantidad de usuarios y contraseñas que manejamos habitualmente? En esta clase te mostramos la aplicación IdentidadesDigitales que pretender servir de prueba de concepto de cómo podemos almacenar una serie de datos de manera persistente en nuestro dispositivo.

Observación: Desde el punto de vista de la seguridad informática no se recomienda el uso de esta app. Tómese como ejemplo de una aplicación de notas.

Creamos las pantallas necesarias así como los componentes que tendrá nuestra app IdentidadesDigitales.