Embed Size (px)
Citation preview
ZILICIO 2.0 FRAMEWORK WEB PARA
GENERACIÓN DE APLICACIONES MÓVILES
Desarrollo de aplicaciones móviles
Bogotá D.C, Colombia, diciembre 2019 Versión: 1.0
Juan Pablo Sanmiguel Mateus
1
2
Departamento de Ingeniería de Sistemas y Computación
Facultad de Ingeniería
Universidad de los Andes
Proyecto de grado
ZILICIO 2.0
FRAMEWORK WEB PARA GENERACIÓN DE
APLICACIONES MÓVILES Desarrollo de aplicaciones móviles
Juan Pablo Sanmiguel Mateus
Asesor
PhD. Mario Linares Vásquez
Departamento de Ingeniería de Sistemas y Computación
Universidad de los Andes
Bogotá D.C, Colombia
Diciembre, 2019
3
Juan Pablo Sanmiguel Mateus
Zilicio 2.0
Framework web para la generación de aplicaciones móviles
Proyecto de grado, Diciembre, 2019
Asesor: PhD. Mario Linares Vásquez
Universidad de los Andes
Bogotá, Colombia
Facultad de ingeniería
Departamento de Ingeniería de Sistemas y Computación
Cra 1 # 18A - 12
111711, Bogotá, Colombia
4
Resumen Zilicio 2.0 es la nueva versión de Zilicio, una aplicación web que permite la creación
de aplicaciones móviles hibridas a través de una interfaz gráfica agradable e intuitiva
para el usuario. Su finalidad es abstraer la creación de aplicaciones móviles de tal
manera que cualquier persona pueda crear aplicaciones sin tener conocimientos ni
experiencia en desarrollo móvil. Usando un editor se podrá diseñar y descargar el
instalador y código generado de la aplicación. Permite la definición de acciones a
través de flujos y conexión con tu proyecto de firebase.
Abstract Zilicio 2.0 is the new version of Zilicio, a web application that allows the creation of hybrid mobile applications through a pleasant and intuitive graphical user interface. Its purpose is to abstract the creation of mobile applications in such way that anyone can create applications without having knowledge or experience in mobile development. Using an editor, you can design and download the installer and the generated code of the application. It allows the definition of actions through flows and connection with your firebase project.
5
6
Tabla de contenido
Resumen ................................................................................................................................................. 4
Abstract ................................................................................................................................................... 4
1. Introducción ..................................................................................................................................... 7
1.1 Motivación y relevancia ........................................................................................................... 7
1.2 Objetivos ................................................................................................................................. 7
1.3 Resultados esperados ............................................................................................................ 8
1.4 Resultados alcanzados ........................................................................................................... 9
2. Estado del arte .............................................................................................................................. 10
2.1 Herramientas existentes ................................................................................................... 10
2.1.1 MIT AppInventor ............................................................................................................ 10
2.1.2 IonicCreator ................................................................................................................... 11
3. Descripción funciones implementadas ......................................................................................... 11
3.1 Flujos ................................................................................................................................. 11
3.2 Plantillas de vistas ............................................................................................................. 16
3.3 Autenticación Firebase ...................................................................................................... 20
3.4 Bluetooth ........................................................................................................................... 21
3.4.1 Bluetooth central ........................................................................................................... 21
3.4.2 Bluetooth periferia ......................................................................................................... 24
3.5 Estado de la vista .............................................................................................................. 26
4. Desarrollo de la solución ............................................................................................................... 26
4.1 Arquitectura ....................................................................................................................... 26
4.1.1 Aplicación web .............................................................................................................. 27
5. Conclusiones ................................................................................................................................. 31
5.1 Trabajo futuro .................................................................................................................... 32
7
1. Introducción
1.1 Motivación y relevancia
La creación de aplicaciones móviles se ha vuelto en una de las principales
maneras de llegar a la gente. En febrero de este año, se estimó que más de 5
billones de personas cuentan con un dispositivo móvil, y, alrededor de la mitad de
estos dispositivos, son smartphones. Teniendo esto en cuenta, las aplicaciones
móviles se han convertido en una gran opción para mostrar, ofrecer o vender
servicios. En enero de 2017, en la App Store existían 2.2 millones de aplicaciones
publicadas y disponibles para la descarga de los usuarios de dispositivos iOS. Por
su parte, la Play Store contaba con 2.7 millones de aplicaciones para los
dispositivos Android. Adicionalmente, en el año 2016, en la Play Store se
registraron 75 billones de descargas, generando 3.3 billones de ganancias. Sin
embargo, en la App Store se registraron 25 billones, pero 5.4 billones de
ganancias.
En la actualidad, existen herramientas que permiten la creación de aplicaciones
móviles, sin la necesidad de ser desarrollador, ni tener muchos conocimientos en
programación. Entre esta, nos encontramos con herramientas como AppInventor
o IonicCreator, que permiten la creación de aplicaciones móviles, pero con
limitaciones particulares. Por su parte, AppInventor permite la creación de
aplicaciones únicamente para dispositivos de sistema operativo Android, limitando
las posibilidades de alcance de la aplicación. Adicionalmente, requiere de
conocimientos básicos de programación por su método de bloques para la
creación de la lógica de la aplicación. Por otra parte, IonicCreator permite la
creación de aplicaciones móviles para dispositivos Android y iOS. Sin embargo, la
creación de lógica, al menos en su mayoría, se debe realizar escribiendo el código
en algún lenguaje de programación. Adicionalmente, para acceder a gran parte de
las funcionalidades se debe pagar una suscripción.
Por esta razón, se busca construir una herramienta que permita a los usuarios
crear una aplicación con funcionalidades principales, sin conocimientos de
programación ni técnicos. De esta manera nace Zilicio. Posteriormente, con Zilicio
2.0 se busca aumentar el alcance de las aplicaciones móviles generadas,
permitiendo comunicación a través de bluetooth, conexión con el componente de
autenticación de firebase y componente de base de datos de firebase, todo a
través de flujos.
1.2 Objetivos
El objetivo principal de este proyecto de grado es Integrar a Zilicio una lista de
funcionalidades que le permitan al usuario definir interacciones sobre los
componentes de la aplicación que está desarrollando.
8
Para esto, se cumplirán los siguientes objetivos específicos:
• Implementar acciones de desencadenamiento como onClick y onLoad que
permitan al usuario implementar flujos funcionales sobre la aplicación.
• Implementar acciones como navegar, modal, etc, para usar en flujos
funcionales sobre la ejecución de la aplicación.
• Implementar métodos de autenticación con el componente de autenticación
de firebase, mediante la definición de los parámetros principales por el
usuario para realizar la conexión.
• Agregar componente de conexión a un dispositivo bluetooth para la
transferencia de datos.
• Permitir al usuario definir las variables de su aplicación a través del estado
de la vista, para que estas variables puedan ser usadas en el resto de la
aplicación.
1.3 Resultados esperados
Se espera que, al finalizar el proyecto, en Zilicio se encuentre implementadas las
siguientes operaciones y funciones:
• Flujos con desencadenadores: En primer lugar, se describen los posibles
desencadenadores de un flujo que puede crear el usuario. Estos
desencadenadores, son las únicas acciones que pueden iniciar un flujo y
por tanto no reciben entradas, y sólo pueden aparecer en la primera
posición del flujo.
o OnClick: Se puede llamar desde un botón, label, imagen, etc. y se
ejecutará en el momento que el usuario de un tap sobre el elemento
que se definió.
o OnChange: Se utilizaría principalmente en los CheckBox, Switch y
cualquier elemento que permita un cambio de estado (como
onDataChange sobre una base de datos, por ejemplo).
• Firebase (Firebase Token, Firebase URL, ProjectBucket): Conexión con
Firebase. Estos son los parámetros requeridos por AppInventor para
realizar la conexión.
9
o Firebase (Firebase Token, Firebase URL, ProjectBucket):
Componente de configuración para usar firebase en el proyecto y la
aplicación desarrollada.
o Auth: Componente que permitirá al usuario definir qué opciones de
inicio de sesión con firebase desea incluir en su aplicación.
• Sensor bluetooth: Consultar datos. El usuario podría conectarse a un
dispositivo bluetooth y comunicarse con este (enviar y recibir datos a través
de la conexión establecida), para que posteriormente el usuario seleccione
lo que desea hacer con estos datos (mediante un flujo).
• Plantillas para creación de vistas comunes más rápido: Se quiere definir
plantillas que tengan integrado funcionalidades principales y comunes que
pueden ayudar a los usuarios y el tiempo que necesitan invertir en la
creación de su aplicación.
• Implementación estado de la vista: Se busca que el usuario pueda definir
las variables que tendrá su aplicación para poder usarlas posteriormente
en los flujos u otras interacciones.
1.4 Resultados alcanzados
A lo largo de este documento se presentarán los resultados alcanzados tras el
desarrollo del proyecto. En esta sección se presenta el resumen de los resultados
obtenidos:
• Se implementaron los flujos con los desencadenadores OnClick y OnLoad.
Posteriormente, en el flujo se pueden definir acciones como iniciar sesión,
navegar, modal y funciones bluetooth.
• Se implementó la conexión con el componente de autenticación de firebase,
permitiendo que los usuarios de una aplicación generada queden
autenticados en el proyecto de firebase del usuario.
• Se implementó el uso del sensor bluetooth dentro de las aplicaciones
generadas. Se encuentra la posibilidad de crear aplicaciones centrales y
periferias, según el tipo de uso que se quiere dar del bluetooth del
dispositivo.
• Se implementan dos plantillas, inicio de sesión y registro, con toda la lógica
para conectarse al componente de autenticación de firebase.
10
• Se implementa el estado de la vista, permitiéndole al usuario definir las
variables que tendrá su aplicación.
2. Estado del arte
2.1 Herramientas existentes
Actualmente existen algunas aplicaciones web que permiten obtener resultados similares a los esperados por Zilicio, estas aplicaciones son MIT App Inventor 2 y IonicCreator. Ambas aplicaciones permiten la creación de una interfaz gráfica a través de arrastrar componentes a un lienzo que representa la pantalla del dispositivo.
2.1.1 MIT AppInventor
http://appinventor.mit.edu/
App Inventor permite únicamente la creación de aplicaciones para el sistema
operativo Android, mientras con Zilicio buscamos generar la aplicación para los
dos sistemas operativos más comunes en dispositivos móviles, Android y iOS.
Adicionalmente, App Inventor permite la definición de funcionalidades mediante
bloques de flujo. Esta funcionalidad se espera implementar en Zilicio de una
manera más agradable a usuarios sin conocimientos en programación. Se espera
lograr esto, a través de la implementación de una interfaz gráfica que permita la
creación de un flujo de ejecución desencadenado por un trigger (onClick, onLoad,
onChange, etc), de manera que permita al usuario reconocer las operaciones que
está realizando, y entender las entradas y salidas entre cada elemento del flujo.
App Inventor permite exportar el proyecto únicamente como .APK (instalador para
Android) y .AIA (para exportar e importar proyectos en AppInventor).
Ventajas:
• Editor visual de componentes basado en bloques.
• No requiere muchos conocimientos técnicos.
• Creación de aplicaciones en poco tiempo.
Desventajas:
• Sólo genera aplicaciones Android, no genera aplicaciones iOS.
11
2.1.2 IonicCreator
IonicCreator (en su versión gratis), permite la creación de interfaces gráficas, con
la funcionalidad de conectar botones a otras vistas, es decir, al momento de hacer
click sobre este, se vaya a la pantalla seleccionada. Esta funcionalidad, ya se
encuentra implementada actualmente en Zilicio, y se busca complementar. Por su
parte, IonicCreator permite le exportación de un proyecto que contiene los archivos
HTML/CSS/JS del proyecto que se creó, para posteriormente poder agregar o
crear un proyecto local en Ionic v1 o v3.x para continuar su desarrollo. Mientras
que, con Zilicio, se busca que el usuario pueda exportar los instaladores de la
aplicación para cada plataforma (.IPA para iOS y .APK para Android) junto con el
código fuente del proyecto. Adicionalmente, Ionic permite en su versión de pago,
la implementación de funciones lógicas en la aplicación, desarrollando el código
fuente en lenguajes como HTML, CSS, JS o TS. De esta manera, se limita que
personas sin conocimientos en programación, puedan realizar una aplicación con
esta herramienta.
Ventajas:
• Editor gráfico de arrastre de componentes.
• Permite descargar el código generado del proyecto.
•
Desventajas:
• Su versión gratis es muy limitada.
3. Descripción funciones implementadas
3.1 Flujos
Se implementó un editor completo que permite la creación de diagramas de flujo
que definen la interacción y ejecución de la aplicación. De esta manera, el usuario
puede definir las funcionalidades que se ejecutarán al presionar un componente
de la vista (un botón, un input, etc.).
Para crear un flujo, se debe tener seleccionado un componente de la aplicación.
Posteriormente, se debe ir al tab Función. Una vez en este tab y con un
componente seleccionado, nos saldrá un grupo llamado Flujos componente de la
siguiente manera:
12
Imagen 1 Grupo flujos componente
Podemos observar que ya se encuentra creado el desencadenador OnClick, y que
este se puede editar por parte del usuario, para que este defina el flujo que se
ejecutará.
Posteriormente, cuando se hace click sobre el botón de editar del flujo, se nos
abrirá el siguiente flujo:
Imagen 2 Flujo inicial OnClick
Inicialmente el flujo tiene únicamente el desencadenador, que no se puede editar
ni borrar. Se puede observar que en la parte superior nos dice en qué vista
estamos y posteriormente nos muestra el componente sobre el que estamos
creando el flujo. Debajo de cada nodo podemos encontrar un botón que nos
permite agregar un nodo hijo para ese nodo. Las opciones de nodo hijo se
13
encuentran filtradas según el nodo padre, o nodo dónde se está poniendo el nuevo
nodo. A continuación, se presentarán todas las opciones de nodos que se pueden
crear:
En primer lugar, tenemos las acciones que podemos realizar después de un
desencadenador:
Imagen 3 Acciones posteriores a desencadenador
Las acciones son:
• Login: Esta acción representa la acción de login. Para esta acción se define
como entrada el método y las variables que representaran al usuario/correo
y la contraseña. Su modal de configuración se ve de la siguiente manera:
14
Imagen 4 Modal configuración login
• Navegar: Esta acción permite la navegación de una vista a otra. Se debe
definir como entrada la vista a la que se desea navegar desde la actual. Su
modal de configuración se ve de la siguiente manera:
15
Imagen 5 Modal de configuración navegar
• Modal: Esta acción permite mostrar un modal al usuario con un mensaje.
El usuario debe ingresar el mensaje que se desea mostrar. Su modal de
configuración se ve de la siguiente manera:
16
Imagen 6 Modal de configuración modal
• Bluetooth escanear: Esta acción permite definir que la aplicación será de
tipo bluetooth central. De este se definen otros nodos nuevos que no están
explicados en esta sección. Esto se explicará con más detalle más
adelante.
• Bluetooth mostrar dispositivo: Esta acción permite definir que la
aplicación será de tipo bluetooth periferia. De este se definen otros nodos
nuevos que no están explicados en esta sección. Esto se explicará con más
detalle más adelante.
3.2 Plantillas de vistas
Se implementan plantillas de vistas, de tal manera que el usuario ahorre tiempo al momento de crear una vista de inicio de sesión o registro. Se definen estas dos plantillas pues son dos de las vistas más comunes en una aplicación. Adicionalmente, al crear una vista desde la plantilla, en esta se incluye todo el flujo de lógica que permite iniciar sesión a un usuario con su correo y contraseña o registrarlo de la misma manera. Para esto, se usa la información suministrada por el usuario en el tab Fuentes de datos, que contiene la información de un proyecto de firebase del usuario, con el fin de conectar el componente de autenticación de firebase de este proyecto con la aplicación móvil que el usuario está desarrollando.
Para crear una vista desde una plantilla, se debe acceder al tab Vistas, desde este seleccionar agregar vista +, y el siguiente modal se nos mostrará:
17
Imagen 7 Interfaz agregar vista con plantillas
Como podemos observar, nos pide que seleccionemos la plantilla de vista que deseamos agregar (existe la opción de vista vacía pero no se alcanza a visualizar en la imagen), posteriormente el nombre y finalmente la siguiente vista. Esta última quiere decir la vista a la que navegará el usuario una vez se haya autenticado en la aplicación.
Inicialmente, se había definido que los métodos de inicio de sesión y registro serían correo y contraseña, inicio de sesión con Facebook, con Google y con Github. Se muestra a continuación la plantilla inicial.
18
Imagen 8 Plantilla de inicio de sesión y registro inicial
Sin embargo, finalmente se implementó únicamente el método de correo y contraseña. Esto debido a que el método de inicio de sesión con Facebook requería de bastantes pasos adicionales para los usuarios, como que desde Facebook developers (https://developers.facebook.com) se debía configurar una nueva aplicación, activar authO, obtener un API key, etc. por lo que suponía muchos pasos, en alguna medida, técnicos para los usuarios y reducía la efectividad del proyecto. Por su parte, el método de inicio de sesión con Google terminó siendo no compatible con cordova, al menos desde los métodos actuales e intentados, pero puede ser una implementación futura; por lo que finalmente funcionaba en el momento en que se ejecutaba la aplicación angular generada, pero no en la aplicación móvil en cordova. El método de Github se dejó fuera debido a que sin los dos mencionados anteriormente no era tan representativo para el proyecto.
Finalmente, la plantilla quedó de la siguiente manera:
19
Imagen 9 Plantilla de inicio de sesión y registro final
Podemos observar que finalmente se incluye el título de la vista, una imagen para que el usuario pueda insertar el logo de su aplicación, dos campos de texto que representan al usuario o correo y la contraseña y, finalmente, el botón de inicio de sesión sobre el que está definida la lógica de inicio de sesión. A continuación, se presenta el flujo:
Imagen 10 Flujo de inicio de sesión
Al observar el flujo, podemos observar que la acción de desencadenamiento (primera acción y que define cuando se ejecuta el flujo) es la de OnClick sobre el botón. Posteriormente, podemos observar que se intenta hacer log in con el
20
método email y contraseña. En este paso tenemos dos opciones, que el usuario esté registrado y sus datos sean correctos o que el usuario no esté registrado o sus datos sean incorrectos. Para el primer caso, entonces, se define que el inicio de sesión ha sido exitoso y por lo tanto se navega a la siguiente vista (definida anteriormente por el usuario al momento de la creación desde la plantilla). En el segundo caso, se llega a un error, pues el inicio de sesión no fue exitoso. A este le llega el mensaje de error y después se muestra un modal con un mensaje de error al usuario.
A continuación, se presenta el flujo de registro:
Imagen 11 Flujo de registro
Se puede observar que el flujo es idéntico, con la única diferencia de que la segunda operación (después del desencadenador) es la acción de Registro y no de Login.
3.3 Autenticación Firebase
Se habló anteriormente de que la autenticación se realiza con firebase, sin embargo, no se ha mostrado como se logra ni qué pasos debe seguir el usuario para implementarlo en su aplicación. En primer lugar, la configuración de firebase requiere que el usuario cree un proyecto en firebase desde la consola de firebase. Posteriormente, se requiere que el usuario identifique Firebase Token, Firebase URL y Project Bucket (este último con el fin de poder usar en el futuro la base de datos del proyecto de firebase). Estos datos se pueden encontrar en la configuración del proyecto desde la consola de firebase.
Estos datos se deben ingresar en el tab Fuentes de Datos como se muestra a continuación:
21
Imagen 12 Datos firebase
Posteriormente, se deben guardar los datos, de tal manera que la próxima vez que se edite la aplicación estos queden guardados. Adicionalmente, de esta manera al momento de generarse la aplicación se podrá utilizar estos datos y se tendrá acceso al proyecto de firebase desde la aplicación.
3.4 Bluetooth
Ahora desde Zilicio se pueden generar aplicaciones que se comuniquen a través de bluetooth. Desde Zilicio se pueden crear dos tipos de aplicaciones bluetooth, según el objetivo de la aplicación se debe escoger entre estas. En el momento de la generación depende de la función principal que se escoja en el flujo. A continuación, se explicarán en qué consiste cada aplicación y como crear una aplicación de este tipo desde Zilicio
3.4.1 Bluetooth central
Este tipo de aplicaciones es la encargada de escanear dispositivos, conectarse a ellos e interactuar activamente con ellos. En este orden de ideas, al crear una aplicación de tipo central, se debe tener en cuenta que esta aplicación es la que debe encargarse de el escaneo de dispositivos cercanos. Posteriormente, dada la lista de dispositivos que encontró, debe ser el encargado de iniciar la conexión a algún dispositivo (el que hay seleccionado el usuario). Finalmente, esta aplicación es la encargada de escribir, suscribirse, etc. Actualmente, desde Zilicio se puede únicamente escribir sobre otro dispositivo, dónde el usuario puede definir el mensaje que se envía, ya sea un texto o el valor de una variable.
A continuación, se presenta un flujo de una aplicación central:
22
Imagen 13 Flujo aplicación bluetooth central
En primer lugar, como siempre, encontramos nuestro desencadenador. En este caso, es OnClick, pues este flujo se ejecuta después de presionar el botón ESCANEAR.
En segundo lugar, encontramos el nodo Bluetooth escanear. Este nodo es el que define que el tipo de aplicación bluetooth es central, pues esta es la que tiene la funcionalidad y capacidad de escanear dispositivos bluetooth cercanos. Esta función nos da como salida la lista de dispositivos bluetooth low energy cercanos, que se muestran al final de la vista en una lista.
Imagen 14 Modal configuración bluetooth escanear
23
En tercer lugar, se tiene la función conectar a dispositivo. El usuario final de la aplicación escogerá un dispositivo de la lista de dispositivos bluetooth cercanos, de esta manera, nuestra aplicación intentará conectarse al dispositivo que hay seleccionado el usuario. Finalmente, mostrará un mensaje diciendo si se logró o no la conexión con el dispositivo seleccionado.
Imagen 15 Modal configuración conectar a dispositivo
Finalmente, después de conectarse a un dispositivo se intentará escribir sobre este un mensaje que el usuario puede definir desde el flujo a través del siguiente modal:
24
Imagen 16 Modal configuración escribir bluetooth
En este modal podemos definir como entrada el mensaje que queremos que nuestra aplicación le envíe al dispositivo al que nos conectamos.
3.4.2 Bluetooth periferia
Este tipo de aplicación se encarga de escuchar conexiones, mensajes, suscripciones, etc. Esta aplicación se encarga principalmente de recibir información, pero también puede transmitir información como respuesta o leyendo del dispositivo que se conecta a él. Esta aplicación funciona a través de callbacks, que le permiten estar escuchando cualquier interacción que se haga sobre ella.
A continuación, se presenta un flujo de una aplicación periferia:
25
Imagen 17 Flujo aplicación bluetooth periferia
En este ejemplo, únicamente se muestra el dispositivo para que la aplicación central pueda encontrar el dispositivo durante el escaneo. De nuevo, el flujo se ejecuta después de hacer click sobre un botón.
Imagen 18 Modal configuración bluetooth mostrar dispositivo
26
3.5 Estado de la vista
Se implementa el estado de la vista, que permite la definición de variables de tipo
texto, número y byte con multiplicidad única o múltiple. De esta manera, los
usuarios pueden crear sus propias variables y posteriormente utilizarlas en los
flujos o funciones que implementan en la aplicación. Para definir una variable se
debe dirigirse al tab Fuentes de datos, donde se encontrará la sección de Estado
de vista y se puede agregar una nueva.
A continuación, se muestra el modal para agregar una nueva variable:
Imagen 19 Modal creación nueva variable estado de la vista
Para crear una variable, se debe ingresar el nombre, el tipo y la multiplicidad de la variable. Finalmente, de esta manera se ve la sección de Estado de la vista con variables creadas:
Imagen 20 Estado de la vista con variables
4. Desarrollo de la solución
4.1 Arquitectura
27
Imagen 21 Arquitectura de componentes
Zilicio se divide en 2 componentes principales que conforman el editor web (frontend) y el generador de aplicaciones móviles (backend), ambos de estos componentes se comunican con firebase usando el SDK que provee para consumir de la base de datos no relacional en tiempo real y del componente de autenticación. El primer componente, editor y frontend, se encuentra desplegado en firebase hosting y usa AngularJS como framework web. El segundo componente, generador y backend, se encuentra desplegado en una máquina virtual escuchando peticiones que se publiquen a través del editor web.
4.1.1 Aplicación web
La aplicación web y editor, es una aplicación angular MVVM en donde se tiene el conjunto de vistas, unos servicios y unos controladores organizados de la siguiente manera:
28
Dentro de la carpeta app podemos encontrar distintos componentes de la
aplicación web como:
• Headers
• Login
• Proyectos
• Recover-password
• Register
• Services
Dentro de la carpeta ui.editor, encontramos todos los componentes y tabs del
editor web.
ui.assets:
Este componente contiene el tab de assets del editor. En este se cargan los
archivos multimedia, como imágenes, que pueden ser guardados en el proyecto y
utilizados en los distintos componentes que admiten una imagen. Este tab se ve
así:
|---html | |---app | | |---headers | | |---login | | |---proyectos | | |---recover-password | | |---register | | |---services | | |---ui.editor | | |---app.js | |---client | |---css | |---fonts | |---images | |---js | |---index.html |---scss
|---ui.editor | |---ui.assets | |---ui.components | |---ui.data | |---ui.function | |---ui.style | |---ui.views
29
Imagen 22 Tab assets
ui.components:
Este componente contiene el tab de componentes del editor. Desde este tab se
encuentran todos los componentes que se pueden integrar a una aplicación. Para
agregar un componente, se debe arrastrar a la vista en que si quiere poner y la
posición. Este tab se ve así:
Imagen 23 Tab componentes
ui.data:
Este componente contiene el tab de fuentes de datos del editor. Desde este tab
podemos configurar la conexión a un proyecto de firebase y la creación de
variables de la vista y de la aplicación desde el Estado de la vista. Este tab se ve
así:
30
Imagen 24 Tab fuentes de datos
ui.function:
Este componente contiene el tab de funciones del editor. Desde este tab se crean
y editan los flujos de una vista. Este tab se ve así:
Imagen 25 Tab función
ui.style:
Este componente contiene el tab de estilo del editor. En este tab se edita todo el
estilo visual de un componente, como fondo, display, textos, imagen, etc. Este tab
se ve así:
Imagen 26 Tab estilo
ui.views:
31
Este componente contiene el tab de componentes del editor. En este tab se
administran las vistas de la aplicación. Desde este se puede crear, copiar, eliminar
o cambiar el tipo de vista. Este tab se ve así:
Imagen 27 Tab vistas
5. Conclusiones
Para este proyecto se lograron cumplir lo objetivos planteados inicialmente.
En primer lugar, se implementa en el tab de Función la posibilidad de que el
usuario describa el comportamiento de su aplicación a través de flujos. Esto le
permite al usuario aumentar la capacidad de funcionamiento de su aplicación a
través de una interfaz agradable que le permite al usuario iniciar sesión y
registrarse a través de correo y contraseña, navegar de una vista a otra, mostrar
un modal con un mensaje y definir aplicaciones bluetooth central o periferia.
En segundo lugar, la creación de vistas ‘comunes’ entre aplicaciones a través de
plantillas. En esta primera versión de esta funcionalidad se incluyen plantillas para
la vista de inicio de sesión y registro, ambas incluyen todo el flujo necesario para
su funcionamiento con firebase.
En tercer lugar, se implementa la autenticación con firebase a través de un flujo
(creado automáticamente desde la plantilla o creado manualmente desde el editor
de flujos). El usuario únicamente debe tener un proyecto en firebase con la opción
de autenticación activada y debe ingresar su información en el tab de Fuentes de
datos con el fin de poder acceder al proyecto desde la aplicación generada.
En cuarto lugar, ahora se pueden crear aplicaciones que hagan uso del bluetooth
de los dispositivos móviles para enviar y compartir información entre estos.
Permite la creación de aplicaciones que usan bluetooth low energy, dando la
32
posibilidad de crear una aplicación central o perifieria, según las necesidades del
usuario.
Finalmente, se implementa el estado de la vista. Este permite la creación de
variables que se implementarán y podrán ser usadas en la aplicación, definiendo
el nombre, el tipo, su multiplicidad y su alcance.
5.1 Trabajo futuro
En este momento, Zilicio tiene muchas oportunidades para realizar trabajo futuro,
desde integración de nuevas funcionalidades hasta la perfección de
funcionalidades existentes:
• Agregar nuevos métodos de inicio de sesión y registro (autenticación).
Actualmente, y como se menciono en este documento, Zilicio permite
únicamente autenticación a través de correo y contraseña a través del
modulo de autenticación de firebase. Este mismo modulo permite la
autenticación de muchos modos (teléfono, Twitter, etc.) que pueden
representar un atractivo para un usuario final. Es por esto, que, aunque las
aplicaciones generadas a través de Zilicio permitan a sus usuarios
autenticarse, se podría aumentar el número de métodos para esto.
• Implementación completa de vistas que requieren autenticación. Con lo
desarrollado en este proyecto, se logró implementar en el editor gráfico un
flag sobre las vistas que representan que estas sólo pueden ser accedidas
por usuarios autenticados. Sin embargo, esta no fue una prioridad durante
el proyecto ni un objetivo inicial, por lo que no se implementó su
funcionamiento en las aplicaciones generadas.
• Corrección de bugs. Actualmente Zilicio presenta algunos bugs, sobre todo
en Firefox, que no permiten que se pueda usar correctamente desde este
navegador. Muchos de estos bugs vienen anteriores a este proyecto y sólo
durante la ejecución se pudieron percatar, pero nunca se intentaron
solucionar.
• Integración completa del estado de la vista a los flujos y demás
funcionalidades de Zilicio para el usuario. Debido a la altura del proyecto en
la que se integra el estado de la vista al proyecto, se implementa una
primera versión muy limitada que permite el uso de estas variables en los
flujos. Sin embargo, esta no logra el alcance esperado o necesario para ser
completamente satisfactorio.
• Integración de nuevas funcionalidades a través de los flujos. Esta es la
primera versión de Zilicio que permite la definición de la ejecución de la
aplicación a través de flujos. Esta funcionalidad se puede considerar una
funcionalidad que siempre podrá ser mejorada, pues siempre se buscará
integrar el mayor número de posibilidades de acciones que los usuarios
33
pueden implementar a través de estos flujos para que cada vez las
aplicaciones generadas por Zilicio sean más funcionales.
• Integración de nuevos sensores. Al inicio del proyecto, antes de definir los
objetivos, se habló de la integración de varios sensores propios de los
dispositivos móviles a las aplicaciones. Finalmente, en este proyecto se
optó e implementó la utilización del sensor bluetooth, sin embargo, se abre
la posibilidad a implementar más sensores dentro de las aplicaciones.
