Creación de Aplicación Móvil con AppInventor - JacquiVA02/IoT GitHub Wiki
MIT App Inventor es una herramienta en línea que originalmente fue creada por el MIT (Instituto Tecnológico de Massachusetts). Es un entorno de programación que permite crear aplicaciones móviles de forma muy sencilla, por lo que es accesible a todo el mundo.
App inventor está diseñado para programar aplicaciones sencillas pero totalmente funcionales para dispositivos Android.
Link a AppInventor -> https://appinventor.mit.edu
Al ingresar al link de acceso, nos llevará a la página principal de ésta herramienta en línea que utilizaremos para lograr escribir y leer la información que se encuentra en la base de datos por medio de la aplicación que realizaremos.
AppInventor permite iniciar sesión con Google, por lo que en primer lugar daremos clic en Create Apps! para que nos pida ingresar a nuestra cuenta y así comenzar con el desarrollo de nuestra nueva aplicación.
Antes que nada, debemos en primer lugar crear un nuevo proyecto dentro de AppInventor, para ello daremos clic en la pestaña Proyectos, y posteriormente en el apartado que dice Comenzar un proyecto nuevo...
Posteriormente colocaremos un nombre a nuestro proyecto y daremos clic en Aceptar.
Diseño de Interfaz
Ahora que ya contamos con nuestro proyecto, lo primero que realizaremos en éste proceso es la creación de la interfaz que verá el usuario cuando tenga la aplicación en la pantalla de su celular.
Para ello, debemos agregar algunos elementos tal como se muestra en el siguiente video:
TUTORIAL PARA CREACIÓN DE INTERFAZ EN APPINVENTOR:
"Código": Bloques de la aplicación
IMPORTANTE: Para editar los bloques de nuestra aplicación y que de ésta forma realice el enlace necesario para comunicarse con Firebase, debemos agregar un elemento más dentro de la Interfaz:
Dentro del apartado de "Experimental", arrastraremos hacia la pantalla de nuestra aplicación el único elemento que se encuentra, FirebaseDB:
Una vez añadido, cambiaremos algunos datos dentro de la configuración, tal como se muestra en la imagen:
¿Cómo obtener la URL de mi base de datos en Firebase?
Para realizar nuestra codificación, ingresaremos al apartado de Bloques , en donde encontraremos una pantalla en blanco y a la izquierda diferentes opciones de los tipos de bloques que podemos implementar.
El siguiente conjunto de de bloques es el que nos permitirá obtener la información desde la base de datos para mostrarla dentro de las etiquetas realizadas dentro de la interfaz de nuestra aplicación. Lo que realizan es básicamente una especie de if que recorre las variables dentro del apartado de la base de datos correspondiente, y cuando una de las etiquetas de ésta coincide con el nombre que añadimos dentro de los bloques morados en AppInventor, tomará el valor directamente de la base y la mostrará en la etiqueta destinada en AppInventor.
Aspectos importantes:
- Las palabras dentro de los bloques rosados deben estar igual escritas a cómo se encuentran las variables que se desean leer dentro de Firebasse.
- Dentro de los bloques verde oscuro, se debe seleccionar la etiqueta destinada que fue colocada dentro de la Interfaz para mostrarse los datos de la base de datos correspondientes; es por ello que a las etiquetas que colocamos en la interfaz les cambiamos el nombre para poder distinguirlas (justo como en el tutorial); procura que tus etiquetas coincidan con la variables que tomas.
El segundo conjunto de bloques se centra en enviar el "numero" y "usuario" que ingresará el cibernauta desde la aplicación que tendrá en su teléfono hacia la base de datos.
Aspectos importantes:
- En el bloque grande café, después de la palabra cuando, se debe colocar el nombre de la etiqueta que se le fue colocado al **Botón ** de "Enviar" dentro de la interfaz.
- Después de los bloques morados, dentro de los bloque rosados, se debe asegurar que el nombre de las variables colocado sea igual a cómo se encuentren dentro de la base de datos.
Enlazar la aplicación con mi teléfono móvil
NOTA: La aplicación funcionará si el teléfono posee Android. En caso de usar iOS, la conexión marcará error.
Para poder hacer uso de la app, es necesario descargar en tu teléfono móvil la aplicación MIT App Inventor que se encuentra en la Play Store:
El código QR del proyecto realizado en App Inventor se obtiene de la siguiente manera:
Una vez descargada la aplicación en el celular y obtenido el código QR, podremos escanear el código QR de nuestra aplicación al seleccionar el botón azul o entrar por medio del código por medio del botón naranja:
