Tema 1
TEMA 1: PROGRAMACIÓN DE MÓVILES CON MIT APP INVENTOR
1. INTRODUCCIÓN
Los españoles pasamos unas 6 horas de media al día en Internet. Casi un 90% utilizamos WhatsApp. Y es que, en nuestro país, hay más móviles que personas… en concreto, 54’34 millones de móviles, un 116’2 por ciento de la población (informe Digital 2021 de Hootsuite).
Los smartphones nos permiten hacer todo tipo de acciones: Pedir comida a domicilio, comunicarnos con otras personas, ser nuestra agenda o calendario, conducirnos a cualquier lugar o simplemente, jugar para no aburrirnos…
Conscientes de esto, las empresas cada vez apuestan más por crear sus propias APPs ya que es una forma de llegar a muchos clientes. (3,14 millones de APPs para Android y 2,09 millones de APPs para IOS).
Como hemos dicho, existen aplicaciones móviles (APPs) diseñadas para todo tipo de utilidades, pero ¿Sabes cómo han sido creadas esas aplicaciones?, ¿Crees que tu podrías crear una propia?
1.1. Lenguajes de programación de APPs para móviles
Para crear aplicaciones para teléfonos móviles se utilizan lenguajes de programación desde un ordenador, los más usados actualmente son los siguientes:
Java: Es el principal lenguaje de programación de de aplicaciones para dispositivos móviles, por su rapidez, sencillez y versatilidad, por ejemplo, Android, Twitter, Netflix o Uber fueron creados con este lenguaje.
Kotlin: Es uno de los lenguajes de programación para dispositivos móviles Android más empleados; dispone de un código muy intuitivo, sencillo y eficaz.
Python: Las aplicaciones móviles con Python destacan por su código, ya que facilita el trabajo a los programadores o ingenieros informáticos, pues se utilizan menos líneas de código que en el caso de Java, por ejemplo.
JavaScript: Para crear una app multiplataforma, JavaScript es el más adecuado. Es rápido, versátil, sencillo y destaca por su funcionalidad.
Swift: Es un lenguaje de programación para Iphone. Este lenguaje, creado por Apple ya no solo opera con apps para iOS, sino también sirve para Windows, Linux o macOS. Además es un lenguaje de código abierto.
Todos estos lenguajes de programación son lenguajes de texto, en los que hay que aprender una serie de palabras clave y una sintaxis. Su aprendizaje no es sencillo y requiere de mucho tiempo, por eso se enseña en estudios superiores de programación.
Existen otra clase de lenguajes de programación gráficos cuyo aprendizaje es más sencillo y por lo tanto son más adecuados para la enseñanza secundaria, como son: Tu-App, Infinite Monkeys, Mobapp Creator, Upplicación, Good Barber y MIT App Inventor.
En este curso vamos a emplear Mit App Inventor por ser un lenguaje por bloques, fácil de aprender y gratuito.
2. ¿Qué es mit app inventor?
App Inventor es un entrono de desarrollo de aplicaciones para dispositivos móviles especialmente utilizado en educación ya que presenta una interfaz de programación que recuerda a Scratch, basado en bloques secuenciales que se ensamblan como los bloques físicos de LEGO. Además utiliza un editor de diseño “drag and drop” (arrastrar y soltar)
App Inventor fue creado por Google en 2010 junto con el MIT (Instituto Tecnológico de Massachusetts), por eso como requisito se debe disponer de una cuenta de Google para acceder a la web de MIT App Inventor (Nos sirve la cuenta de correo del Instituto). Es un servicio que se ofrece a través del modelo “cloud computing” (computación en la nube), lo que significa poder acceder y gestionar nuestro trabajo desde cualquier ordenador y lugar.
Para crear una APP con MIT App inventor hay que realizar tres pasos, en el Gestor de Proyectos (ya veremos qué es):
El editor de diseño de la aplicación o diseñador, en la que se seleccionan los componentes para su aplicación (botones, cajas de texto ,imágenes, etc).
El editor de bloques, donde se escogen los bloques lógicos que sean necesarios según la aplicación que queramos hacer.
Instalación de la APP en un dispositivo o en un emulador, para probarla.
Fuente: https://sites.google.com/site/migueltecnologia
Si nos registramos en Google como desarrollador, podemos subir nuestras APPs a Google Play y obtener dinero por ellas (Pagando 25 € por cada APP que publiques).
2.1. primeros pasos en app inventor
1) Entrar en la página de MIT App Inventor para registrarnos con nuestro correo del instituto.
2) Pulsamos en el botón naranja que pone "Create Apps!"
3) Aceptamos los términos de servicio, cerramos las ventanas de bienvenida y cambiamos el idioma a Español (No nos lo traduce todo).
4) Esta es la pantalla del Gestor de Proyectos, donde tendremos todos los proyectos (APPs) que creemos (Al principio está vacía). Para crear nuestro primer proyecto, pulsamos en el botón "Comenzar un nuevo proyecto". Nos pide el nombre de nuestro nuevo proyecto (Por ejemplo "Primer proyecto") y pulsamos en "Aceptar" 👉
1) y 2)
3)
4)
PANTALLA DISEÑADOR
Entramos en la pantalla Diseñador de App inventor, en la que podemos distinguir la siguientes zonas:
Barra de menús: Desde esta barra podemos acceder al gestor de proyectos, conectar con el emulador o dispositivo, generar archivos .apk (para instalar la aplicación en el dispositivo Android), acceder a ayuda y tutoriales, etc.
Gestor de pantallas: Con estos botones podemos crear o eliminar pantallas en caso de APPs con varias pantallas.
Diseñador/Bloques: Mediante estos botones podemos alternar entre los entornos del Diseñador y el Editor de bloques.
Paleta de componentes: Estos son los componentes ordenados por categorías, que se pueden añadir a la pantalla de la aplicación arrastrándolas. Se pueden añadir más componentes mediante extensiones. Los diferentes componentes disponibles, pueden ser visibles (botones, etiquetas, deslizadores, etc.) o no-visibles (notificadores, traductor, sensores, etc.). Ayuda integrada: si hacemos clic sobre la interrogación que aparece a la derecha de cada componente se nos mostrará información sobre el mismo.
Visor: Muestra una vista previa de la aplicación en la pantalla del dispositivo (Podemos elegir el tipo de dispositivo). Desde la Paleta iremos arrastrando y soltando aquí los componentes que conformarán nuestra aplicación. Los componentes no visibles se mostrarán en la parte inferior.
Componentes: Mediante una estructura de árbol cuyo nodo principal es el componente Screen1 (Pantalla) permite acceder a los distintos elementos que hemos situado en esa pantalla. Si pulsamos sobre cualquier componente, podremos configurarlo en el panel de propiedades.
Medios: Desde este botón podemos subir archivos para nuestra APP, como imágenes, sonidos, etc.
Propiedades: Permite definir los valores de los distintos parámetros del componente seleccionado en el panel de Componentes. Si seleccionamos el parámetro Screen1, podemos configurar aspectos generales de la APP como su nombre, icono, etc.
PANTALLA BLOQUES
Si pulsamos el botón Bloques, entramos en el entorno de programación mediante bloques o Editor de bloques de MIT App inventor.
Barra de menús: (izquierda): Nos permite crear o borrar proyectos, descargar la App y probarla, y también dispone de un menú de ayuda, donde podemos encontrar tutoriales, foros…
Barra de menús (derecha): Desde ella podemos ver todos nuestros proyectos, cambiar o cerrar nuestra sesión, ver nuestra galería…
Gestor de pantalla: Nos sirve para administrar nuestras ventanas y trabajar con ellas
Diseñador/ Bloques: Botones que nos permite cambiar a Diseñador o a Bloques según nuestras necesidades.
Bloques: Nos permite elegir las funciones que queremos usar. Nos podemos encontrar con bloques de: Control, Lógica, Matemáticas, Texto, Listas, Colores, Variables y Procedimientos. También nos encontramos con los componentes de la pestaña Diseñador, y esos componentes también tendrán sus propias funciones.
Visor: Aquí podemos ver nuestros bloques y unirlos según nuestro criterio.
Mochila: Nos permite guardar un conjunto de bloques para usarlo en algún otro proyecto.
Mostrar avisos: Sirve para saber cuando hay un error o incompatibilidad entre bloques, para poder cambiarlo.
Aumentar / Disminuir: Con estos botones podemos hacer zoom en la pantalla del visor.
Papelera: Permite borrar los bloques que no usemos.
2.2. gestión de proyectos
Podemos Guardar nuestro proyecto en los servidores de App Inventor o en nuestro ordenador en el formato .aia desde el menú Proyectos.
En Mis proyectos se nos muestra la lista de proyectos que hemos desarrollado y nos ofrece la posibilidad de compartirlos (código y diseño) con otros usuarios de App Inventor a través de la opción “Publicar en la Galería”.
También es posible firmar el archivo de instalación .apk con una contraseña para su cifrado (Keystore)
2.3. Conectar con el Emulador o CON un móvil
Para poder ir comprobando tanto el diseño como el funcionamiento del código de nuestra aplicación, podemos instalar un Emulador en el ordenador o, conectar nuestro teléfono móvil o tableta mediante Wifi o un cable USB.
La opción más recomendable es utilizar nuestro dispositivo móvil como banco de pruebas a través de la conexión Wifi. Para ello se requiere que tanto el ordenador en el que estamos trabajando como nuestro dispositivo móvil se encuentren en la misma red.
Para conectar nuestro móvil necesitamos instalar en nuestro dispositivo Android la aplicación “MIT AI2 Companion” disponible en Google Play Store.” También hay disponible una App para iOS que podemos descargar desde App Store: "MIT App Inventor".
Ahora, para conectar App Inventor con el móvil haremos clic en Conectar, y elegiremos la opción AI Companion. Desde el móvil abrimos la aplicación y podemos conectar con el código de 6 letras o con el código QR.
2.4. instalar nuestra app
Una vez que hayamos terminado nuestra aplicación tenemos que generar el archivo de instalación para el dispositivo móvil. Estos archivos tienen la extensión .apk.
Dentro de Generar hacemos clic en Android (.apk) y tendremos dos opciones:
App (generar código QR para el archivo .apk). Usando cualquier lector de códigos QR en nuestro móvil, obtenemos el enlace de descarga de nuestra aplicación. Hay que recordar que debemos modificar los Ajustes en nuestro dispositivo para permitir la instalación de Apps que no preceden de Play Store (Configuración por defecto)
App (guardar archivo .apk en mi ordenador). Ahora podemos publicar nuestra App en Play Store o enviarlo a nuestro dispositivo para su instalación.
2.5. programación orientada a eventos
MIT App inventor funciona mediante la programación orientada a eventos. En este tipo de programación, el dispositivo no lleva a cabo una serie de operaciones en orden, sino que está esperando a que se active un evento (que ocurra algo), en cuyo caso ejecuta la respuesta programada para ese evento, por ejemplo, si el usuario hace clic en un botón, la aplicación hace una foto con la cámara del dispositivo.
El trabajo del programador consiste en diseñar las respuestas a los distintos tipos de eventos para que la aplicación haga lo que queremos.
En el ejemplo de la derecha, el bloque marrón es el controlador de eventos y el bloque morado es la respuesta al evento:
Cuando el Botón1 sea pulsado -> Toma una foto con la Cámara1
Los eventos pueden ser divididos en 2 tipos diferentes: automáticos e iniciados por el usuario. Hacer clic en un botón, tocar o arrastrar en la pantalla, inclinar el teléfono son eventos iniciados por el usuario (interactuando con los componentes visibles). Cuando en un juego choca una bola contra el borde, un temporizador, cuando llega un mensaje, son eventos no iniciados por el usuario (varían los componentes no visibles).
ACTIVIDADES
1) Realiza la tarea de Classroom "Cuestionario de preguntas sobre App Inventor".
2) MIS PRIMERAS APPS: Realiza las actividades en App Inventor que encontrarás a continuación: Actividad guiada 1 (sonido gato), Actividad guiada 2 (botones colores). Debes subir los archivos .apk a la tarea de Classroom "Entrega tus primeras Apps"
3) ACTIVIDAD 3 (No guiada) - App para escuchar el himno de tu equipo de fútbol
4) ACTIVIDAD 4 (Guiada) - App para dibujar
5) ACTIVIDAD 5 (Guiada) - App juego del frontón
6) ACTIVIDAD 6 (Guiada) - Ejemplo para aprender sobre variables
7) ACTIVIDAD 7 (Guiada) - Traductor con reconocimiento de voz