1

U-MOBILE: PLATAFORMA DE APOYO A LOS SISTEMAS DE INFORMACIÓN Y

COMUNICACIÓN DE LA UNIVERSIDAD SAN BUENAVENTURA CALI.

Grisales Prieto, Luis David.

Hurtado Zapata, Camilo Andrés.

Salcedo Mejía, Raquel.

Universidad San Buenaventura – Cali

Facultad de Ingeniería

Programa de Ingeniería Multimedia

Cali

2016

2

U-MOBILE: PLATAFORMA DE APOYO A LOS SISTEMAS DE INFORMACIÓN Y

COMUNICACIÓN DE LA UNIVERSIDAD SAN BUENAVENTURA CALI.

Grisales Prieto, Luis David.

Hurtado Zapata, Camilo Andrés.

Salcedo Mejía, Raquel.

Manual de Instalación

Universidad San Buenaventura – Cali

Facultad de Ingeniería

Programa de Ingeniería Multimedia

Cali

2016

3

Tabla de contenido Tabla de Ilustraciones ..................................................................................................................... 4

INTRODUCCIÓN ............................................................................................................................... 6

CONOCIMIENTOS PREVIOS ............................................................................................................. 7

ESTRUCTURA DEL PROYECTO ......................................................................................................... 8

Aplicación Desktop ...................................................................................................................... 8

Aplicación Móvil .......................................................................................................................... 9

INSTALACIÓN ................................................................................................................................ 10

Aplicación desktop .................................................................................................................... 10

XAMPP ................................................................................................................................... 10

Aplicación Móvil ........................................................................................................................ 21

APLICACIÓN DESKTOP ................................................................................................................... 31

Panel Administrativo ................................................................................................................. 31

Ámbito Externo o General – Business Logic ............................................................................. 32

APLICACIÓN MÓVIL ....................................................................................................................... 33

css, js y lib .................................................................................................................................. 33

Directives .................................................................................................................................. 34

Templates .................................................................................................................................. 34

IMPLEMENTACIÓN ........................................................................................................................ 36

Aplicación Desktop .................................................................................................................... 36

Aplicación Móvil ........................................................................................................................ 43

ASPECTOS A TENER EN CUENTA ................................................................................................... 46

4

Tabla de Ilustraciones Ilustración 1. Página web de Apache friends. ............................................................................... 10

Ilustración 2. Menú de navegación. .............................................................................................. 11

Ilustración 3. Versiones de XAMPP para Windows....................................................................... 11

Ilustración 4. Confirmación de inicio de descarga. ....................................................................... 12

Ilustración 5. Mensaje de bienvenida del instalador de XAMPP .................................................. 12

Ilustración 6. Componentes disponibles para instalación de XAMPP. ......................................... 13

Ilustración 7. Selección de Carpeta para almacenar XAMPP. ....................................................... 13

Ilustración 8. Error en selección de Carpeta. ................................................................................ 14

Ilustración 9. Bitnami por XAMPP. ................................................................................................ 14

Ilustración 10. Estado del proceso de instalación de XAMPP. ...................................................... 15

Ilustración 11. Proceso de instalación de XAMPP. ....................................................................... 15

Ilustración 12. Aviso de Firewall en Windows. ............................................................................. 16

Ilustración 13. Mensaje de finalización del proceso de instalación de XAMPP. .......................... 17

Ilustración 14. Opciones de lenguaje del Panel de Control de XAMPP. ....................................... 17

Ilustración 15. Configuraciones para el Panel de Control de XAMPP. .......................................... 18

Ilustración 16. Panel de Control de XAMPP inactivo. ................................................................... 19

Ilustración 17. Panel de Control de XAMPP con Apache y Mysql activo. ..................................... 19

Ilustración 18. Dashboard de XAMPP. .......................................................................................... 20

Ilustración 19. phpMyAdmin de XAMPP. ...................................................................................... 20

Ilustración 20. Página de inicio de NodeJS ................................................................................... 21

Ilustración 21. Menú de navegación de NodeJS ........................................................................... 21

Ilustración 22. Versiones y sistemas operativos soportados por NodeJS. ................................... 22

Ilustración 23. Ventana de solicitud de permiso de Windows para instalación. ......................... 22

Ilustración 24. Vista inicial del instalador de NodeJS. .................................................................. 23

Ilustración 25. Términos de licencia de NodeJS. .......................................................................... 24

Ilustración 26. Selección de carpeta destino para NodeJS. .......................................................... 24

Ilustración 27. Configuraciones de instalación de NodeJS. .......................................................... 25

Ilustración 28. Ventana previa a la instalación de NodeJS. .......................................................... 26

Ilustración 29. Ventana de instalación de NodeJS. ....................................................................... 26

Ilustración 30. Ventana de finalización de instalación de NodeJS. ............................................... 27

Ilustración 31. Instalación de Cordova. ........................................................................................ 27

Ilustración 32. Resultado instalación Cordova. ............................................................................ 28

Ilustración 33. Comando para la instalación de Ionic. .................................................................. 28

Ilustración 34. Resultado instalación Ionic – parte 1. ................................................................... 29

Ilustración 35. Resultado instalación Ionic – parte 2. ................................................................... 29

Ilustración 36. Estructura Aplicación Desktop. ............................................................................. 31

Ilustración 37. Carpeta www - Aplicación Móvil........................................................................... 33

Ilustración 38. Panel de Control de XAMPP. ................................................................................. 36

Ilustración 39. Carpeta htdocs - XAMPP. ...................................................................................... 37

5

Ilustración 40. Interfaz principal phpMyAdmin. ........................................................................... 38

Ilustración 41. Menu superior phpMyAdmin. .............................................................................. 39

Ilustración 42. Vista principal para la importación de una base de datos.................................... 39

Ilustración 43. Selección de archivo .sql. ...................................................................................... 40

Ilustración 44. Base de datos para importar seleccionada. .......................................................... 40

Ilustración 45. Boton de "Continuar"............................................................................................ 41

Ilustración 46. Mensaje de proceso de importación. ................................................................... 41

Ilustración 47. Base de datos importada. ..................................................................................... 42

Ilustración 48. Inicio Panel Administrativo. .................................................................................. 42

Ilustración 49. Información consultada de la Tabla Rol. ............................................................... 43

Ilustración 50. CMD - Ubicación de la carpeta con el código de la Aplicación Móvil. .................. 44

Ilustración 51. Ionic serve - resultado comando. ......................................................................... 44

Ilustración 52. Aplicación Móvil simulada por el navegador web. ............................................... 45

6

INTRODUCCIÓN

A continuación se presenta la documentación correspondiente a los requisitos, conocimientos y

demás aspectos necesarios para el desarrollo e implementación óptima del proyecto U-Mobile.

En el documento se encontraran secciones dedicadas a cada uno de los componentes que

hacen parte de este; un panel administrativo que trabaja en conjunto con un Business Logic y

un sistema de servicios REST, y una App móvil desarrollada bajo el framework Ionic.

El objetivo de este documento es ilustrar y orientar a futuros desarrolladores en los procesos y

conocimientos con que se deben contar para la instalación, manipulación y estructuración

optima de las actuales funcionalidades dentro del proyecto.

Es importante resaltar que el documento está orientado a usuarios avanzados, los cuales deben

tener cierto grado de conocimiento en las tecnologías que abarca el proyecto, tecnologías web

y móviles.

7

CONOCIMIENTOS PREVIOS

A pesar de que el proyecto se encuentra dividido en dos partes igual de importantes, una

aplicación móvil y una desktop, los conocimientos para el desarrollo en estos convergen a los

lenguajes de programación web, es decir JavaScript y PHP, y por supuesto HTML5 y CSS3,

además se requiere tener conocimientos en el uso de la librería jQuery y el framework

AngularJS.

Antes de proceder a realizar alguna modificación y/o agregar nuevas funcionalidades al

producto se recomienda leer la documentación correspondiente a la ingeniería de requisitos y

‘análisis robusto’ realizada para el proyecto, la cual comprende el proceso de elicitación,

análisis y validación de los requisitos identificados. Además se recomienda documentar de la

misma forma como es presentado en los documentos proporcionados los cambios o nuevas

funcionalidades propuestas para el crecimiento de la aplicación móvil y/o desktop.

En cuanto al desarrollo backend se implementó el patrón de arquitectura Modelo Vista

Controlador o MVC y se realizó además un Mapeo Objeto Relacional (ORM) respecto a la capa

de persistencia o base de datos; ambos definen la manera en que el proyecto es estructurado y

desarrollado, además del método para abstraer y representar la información consultada de la

base de datos, respectivamente. Entender o al menos conocer en que consiste MVC y ORM y

sobretodo tener alguna experiencia con ambos es crítico para poder trabajar toda el área de

Backend que comprende el proyecto. Adicional a esto se deben tener conocimientos en el

manejo y estructuración de modelos de datos y SQL.

Para finalizar, respecto al frontend es importante resaltar que Ionic es un framework para el

desarrollo de aplicaciones hibridas que dispone de AngularJS para la definición de su estructura

y lógica, para esto es necesario tener conocimientos en el mismo, JavaScript, html5 y css3. Por

otro lado, el panel administrativo requiere de los lenguajes anteriormente mencionados y

adicionalmente la librería jQuery.

Cada uno de los aspectos mencionados fueron implementando en el desarrollo del proyecto

por lo tanto el no conocimiento de alguno de estos puede afectar la interpretación de los

códigos proporcionados, se recomienda se estudien cada uno de estos. Cabe aclarar que se

usaron software open source para la construcción de este y se sugiere mantener este

comportamiento.

8

ESTRUCTURA DEL PROYECTO

Aplicación Desktop

Se entiende por aplicación desktop a los componentes que representan la lógica del proyecto,

Panel Administrativo, Business Logic y Servicios. Se decidió realizar esta desambiguación por

fines prácticos y poder de manera más detallada definir y explicar cada uno de estos dentro del

documento, sin embargo este comportamiento puede ser identificado en la estructura del

mismo.

Con el objetivo de identificar y explicar los componentes que conforman la aplicación desktop,

se

El Panel Administrativo es la herramienta en la que diferentes usuarios, con diferentes roles

podrán acceder para crear, actualizar o eliminar contenido que se despliega en la aplicación

móvil. Dentro de este se pueden encontrar formularios para la creación y actualización de datos,

tablas con cada uno de los datos ingresado en la base de datos… Su función principal no es solo

administrar el contenido de la aplicación móvil, también es una herramienta para el estudio de

la información centralizada correspondiente al proyecto. Este se encuentra dirigido a todo el

apartado grafico que compone la aplicación desktop y la lógica que compone esta, el panel fue

adquirido de manera gratuita a través de la página web https://almsaeedstudio.com/ la cual

tiene puesta a disposición de la comunidad este y otros paneles administrativos para la

implementación en cualquier proyecto.

La Lógica de Negocio engrosa el componente más robusto del backend, dentro de este se

encuentra una serie de controladores encargados de la obtención, creación, actualización y

eliminación de datos dentro de la base de datos. Si bien es cierto que el Panel Administrativo

por su arquitectura MVC cuenta con sus propios controladores, estos se encargan de

seleccionar, preparar y cargar el contenido correspondiente a la vista seleccionada; no están en

posición de realizar alguna acción del CRUD con la base de datos pues no hace parte de sus

responsabilidades. El objetivo de la Lógica de Negocio es centralizar estas funciones de tal

forma que solo él pueda solicitar información de la base de datos y tanto los Servicios como el

Panel Administrativo deban recurrir a este cuando lo requieran.

El ultimo componente define la manera en que se realiza la comunicación entre dispositivos o

terminales, los Servicios se encargan de proveer la información que requiere la aplicación móvil

y consumir además de la universidad los datos requeridos que no pueden ser almacenados en

la base de datos de U-Mobile.

9

Aplicación Móvil

Como aplicación hibrida, esta se encuentra construida a partir de HTML5, CSS3 y JavaScript, sin

embargo incorpora en su estructura el framework AngularJS. Existen componentes propios de

AngularJS que no solo definen la manera en que la aplicación se comporta, sino además su

estructura y semántica. Los cuatro elementos a resaltar son los controllers, directives, routes y

services; o en español, controladores, directivos, rutas y servicios.

Dentro de los controllers o controladores se define el comportamiento de una o muchas vistas,

esto significa que dentro de este se manipula la información que es visualizada en la interfaz. Su

objetivo principal es el de definir la lógica y las respuestas que deben ser dadas a diferentes

acciones dentro de la aplicación y si lo necesita, requerir otros controladores o servicios.

Los directives o directivos declaran lógicamente la existencia de snippets o porciones de código

que pueden pertenecer a una o muchas vistas y por lo tanto fueron creadas en un archivo

independiente. Su función principal es permitir que estos snippets puedan ser re-utilizados en

cualquier parte del código HTML con solo declararlos dentro de este.

Las routes o rutas definen como su nombre lo dice las rutas en las cuales se encuentras las

vistas dentro de la aplicación, además asignan a cada una de estas un controlador si lo

requieren.

Por último, los services o servicios se encargan de solicitar información de servidores en la web,

su trabajo se basa en realizar las peticiones requeridas por el usuario y retornar la información

obtenida.

10

INSTALACIÓN

Aplicación desktop

Si se desea realizar una depuración o prueba del código proporcionado se recomienda recurrir

al localhost; esto con el objetivo de afectar la aplicación alojada en el servidor. Para que esto

sea posible se debe instalar XAMPP y se recomienda además usar Mysql Workbench para la

manipulación de la base de datos si se es requerido. A continuación se mostrara el proceso para

instalar ambos programas.

XAMPP Es un entorno de desarrollo con PHP distribuido por Apache gratuito que incorpora MariaDB,

PHP y Perl. Los pasos para la instalación de este son los siguientes:

1. Ir a la página web de Apache friends: https://www.apachefriends.org/es/index.html

Ilustración 1. Página web de Apache friends.

2. Seleccionar la opción “Descargar” en el menú de navegación superior.

11

Ilustración 2. Menú de navegación.

3. Dentro de esta vista se pueden encontrar los link de descarga para Windows, Linux y OS X,

estos están además organizados por las versiones de PHP soportadas. Se debe proceder a

seleccionar la versión 5.6.21.

Ilustración 3. Versiones de XAMPP para Windows.

4. Tan pronto como se seleccione una opción empezara el proceso de descarga, sin embargo si

no lo hace se debe presionar en “pulsa aquí” para forzar la descarga.

12

Ilustración 4. Confirmación de inicio de descarga.

5. Una vez haya descargado el instalador se debe ejecutar. La interfaz de instalación debe ser

como la siguiente. Para continuar el proceso se presionar el botón “Next”.

Ilustración 5. Mensaje de bienvenida del instalador de XAMPP

6. Se recomienda dejar seleccionado todos los componentes a instalar. Presione “Next”.

13

Ilustración 6. Componentes disponibles para instalación de XAMPP.

7. Es importante seleccionar el folder o carpeta correcta; en Windows

Ilustración 7. Selección de Carpeta para almacenar XAMPP.

14

7.1. Si al presionar en siguiente el instalador muestra un mensaje en el que especifica que la

carpeta no está vacía y que selecciones una nueva, significa que ya existe una carpeta con ese

mismo nombre en la dirección seleccionada, en ese caso se debe o eliminar la actual carpeta o

elegir una nueva dirección.

Ilustración 8. Error en selección de Carpeta.

8. Si se desea se puede dejar la opción de conocer más acerca de Bitnami por XAMPP. Para

continuar se debe presionar “Next”.

Ilustración 9. Bitnami por XAMPP.

9. Si todo se realizó de manera correcta el instalador dará un mensaje de que este está

preparado para instalar XAMPP. Para continuar se debe presionar “Next”.

15

Ilustración 10. Estado del proceso de instalación de XAMPP.

10. El instalador iniciara el proceso de descarga e instalación.

Ilustración 11. Proceso de instalación de XAMPP.

16

11. Si se muestra un mensaje solicitando permiso para permitir configuraciones de Apache

HTTP se debe “Permitir acceso”.

Ilustración 12. Aviso de Firewall en Windows.

12. Una vez el proceso haya terminado, el instalador mostrara un mensaje corroborando que la

instalación se ha realizado de manera correcta. Para finalizar se debe presionar el botón

“Finish”.

17

Ilustración 13. Mensaje de finalización del proceso de instalación de XAMPP.

13. Si se dejó activa la opción de empezar el Panel de Control de XAMPP cuando acabe el

proceso de instalación, se abrirá un cuadro de dialogo preguntando el idioma de preferencia.

Debido a que solo hay dos opciones se recomienda seleccionar Ingles.

Ilustración 14. Opciones de lenguaje del Panel de Control de XAMPP.

14. Una vez el Panel de Control de XAMPP cargue, se abrirá un cuadro con las opciones de

configuración de este. No es necesario modificar alguna de estas opciones para poder empezar

a trabajar en el localhost; sin embargo se recomienda prestar atención a estas. Presionar el

botón “Save”.

18

Ilustración 15. Configuraciones para el Panel de Control de XAMPP.

15. Una vez se configura el Panel de Control, es posible activar las diferentes opciones que

ofrece, para este caso se activaran Apache y Mysql presionando el botón “Start” en cada uno.

19

Ilustración 16. Panel de Control de XAMPP inactivo.

Ilustración 17. Panel de Control de XAMPP con Apache y Mysql activo.

20

16. Así termina el proceso de instalación de XAMPP, al estar activo Apache y Mysql se puede

proceder al navegador y colocar en este http://localhost/dashboard/ y

http://localhost/phpmyadmin/

Ilustración 18. Dashboard de XAMPP.

Ilustración 19. phpMyAdmin de XAMPP.

21

Aplicación Móvil

Para realizar cambios, correcciones o actualizaciones a la aplicación móvil, primero es necesario

instalar Ionic en el computador, pero primero debe ser instalado NodeJS y Cordova. A

continuación se muestran los pasos a seguir para poder trabajar con Ionic.

1. Ionic requiere como condición previa el instalar NodeJS y Cordova. Para instalar NodeJS se

debe proceder a ir a la página web https://nodejs.org/en/ y seleccionar en el menú de

navegación “DOWNLOADS”

Ilustración 20. Página de inicio de NodeJS

Ilustración 21. Menú de navegación de NodeJS

2. Dentro de las opciones de descarga se encuentra “LTS” y “Current” además de los diferentes

sistemas operativos soportados. Se recomienda instalar la versión “LTS” de NodeJS.

22

Ilustración 22. Versiones y sistemas operativos soportados por NodeJS.

3. Una vez descargado el instalador y ejecutado, este pedirá permiso para ejecutarse si se

realiza desde Windows. Presionar en “Ejecutar”.

Ilustración 23. Ventana de solicitud de permiso de Windows para instalación.

23

4. Tan pronto como el instalador inicie, este realizara los cálculos pertinentes para juzgar si es

posible o no instalar NodeJS. Cuando este proceso termine estará listo para continuar el

proceso, presionar “Next”.

Ilustración 24. Vista inicial del instalador de NodeJS.

5. NodeJS expone la licencia y permiso para el uso de este, tan pronto como se lea este se debe

proceder a aceptar estos y presionar “Next”.

24

Ilustración 25. Términos de licencia de NodeJS.

6. Acto seguido se selecciona la carpeta destino para NodeJS y se presiona “Next”.

Ilustración 26. Selección de carpeta destino para NodeJS.

25

7. El siguiente paso es realizar, si así se desea, configuraciones acerca de lo que será instalado.

Se recomienda no cambiar la configuración por defecto a menos que se tenga algún tipo de

experiencia en el tema. Presionar “Next”.

Ilustración 27. Configuraciones de instalación de NodeJS.

8. Una vez terminado las configuraciones, NodeJS avisara de que se encuentra listo para ser

instalado, para esto se debe presionar el botón “Install”.

26

Ilustración 28. Ventana previa a la instalación de NodeJS.

10. NodeJS empezara a descargarse e instalarse. Si se requiere permisos de administrador para

este proceso se deben conceder.

Ilustración 29. Ventana de instalación de NodeJS.

27

11. Una vez el proceso haya finalizado, NodeJS habrá instalado correctamente y se mostrara

una ventana avisando de esto. Para finalizar la instalación presionar en “Finish”.

Ilustración 30. Ventana de finalización de instalación de NodeJS.

12. Habiendo instalado NodeJS se debe proceder a instalar Cordova. Para esto se debe abrir el

command prompt o CMD en Windows, o la Terminal en Mac y escribir npm install -g cordova

Ilustración 31. Instalación de Cordova.

28

13. Una vez terminado el proceso, el resultado de la instalación será parecido al siguiente.

Ilustración 32. Resultado instalación Cordova.

14. Habiendo instalado NodeJS y Cordova, se puede proceder a instalar Ionic. Para esto se debe

abrir el CMD o la Terminal y colocar el siguiente comando npm install -g cordova ionic.

Ilustración 33. Comando para la instalación de Ionic.

15. El resultado de la instalación debe ser parecido al siguiente.

29

Ilustración 34. Resultado instalación Ionic – parte 1.

Ilustración 35. Resultado instalación Ionic – parte 2.

16. Con esto culmina el proceso de instalación de Ionic.

30

31

APLICACIÓN DESKTOP

En capítulos pasados se mencionó a grandes rasgos la estructura de la Aplicación Desktop,

existe un Panel Administrativo, una Business Logic y Servicios que se encargaran de

comunicarse con la base de datos de la Universidad de San Buenaventura y la Aplicación Móvil.

Dentro de esta sección se retomara esta estructura, definiendo los aspectos a tener en cuenta y

las funciones de los componentes más relevantes de la Aplicación Desktop.

Ilustración 36. Estructura Aplicación Desktop.

Panel Administrativo

Anteriormente se mencionó que el Panel Administrativo estaba construido a partir del patrón

de arquitectura MVC, sin embargo se desarticulo los Modelos o models de su estructura para

ubicarlo en el ámbito más general del proyecto con el objetivo de que sea un eje central para el

Panel Administrativo, el Business Logic y los Servicios. Los Modelos mapean cada una de las

tablas requeridas del proyecto para de esta forma manipular la información de manera óptima,

por esta razón debe ser accesible por cualquiera de los componentes.

En el Panel Administrativo se pueden identificar cuatro carpetas, las views o vistas, los

controllers o controladores, el public y las libs o librerías; adicional a estas se encuentra

32

el .htacces e index.php. Cada una de estas carpetas, o archivos que las componen, y archivos

cumplen una serie de funciones o tareas en la arquitectura propuesta.

Las views albergan todas las vistas visualizadas dentro del Panel Administrativo, estas se

encuentran organizadas dentro de carpetas internas que se encargan de categorizar a estas.

Dentro de las views hay dos componentes a resaltar; la carpeta modules tiene en su interior

partes de la interfaz separadas de la vista principal, esto significa que en esta es posible

encontrar el código correspondiente a el menú desplegable izquierdo, el footer, header, etc. De

esta manera se puede manipular y re-usar estos componentes en otras vistas sin tener que

repetir el código y las modificaciones o actualizaciones a estos se realizaran en todas las vistas.

El segundo componente es el index, actualmente la Aplicación actualiza su contenido a partir de

AJAX, por esto motivo no ha sido necesario implementar vistas separadas para cada uno de los

Controladores; la vista de index tiene un carácter de medio o contenedor para la información

que es constantemente manipulada por el usuario.

Los controllers por su parte están enfocados en desplegar de manera correcta la información

solicitada por el usuario haciendo uso del Business Logic para la creación, lectura, actualización

o eliminación de los datos en la interfaz. Su carácter es meramente de intermediario entre el

usuario y la información, sin embargo sin su existencia no sería posible la creación dinámica de

las vistas pues son estos quienes son referenciados para realizar este trabajo.

Public contiene todos los archivos correspondientes a la estructura del Panel Administrativo,

dentro de este se encuentra los estilos, tipografías, iconos, plugins y librerías requeridas por el

Panel Administrativo.

Por último, las libs o librerías tienen en su interior librerías enfocadas a la lógica el proyecto, a

diferencias de las que se encuentran en el Public, estas son archivos en php que no se enfocan

en la interacción del usuario con la aplicación, su función es la de establecer la base lógica del

Panel Administrativo para que pueda ser usada por los controladores.

Ámbito Externo o General – Business Logic

La Ilustración 33 muestra la manera en que el proyecto se encuentra organizado en la

Aplicación Desktop; existe una carpeta que corresponde al Panel Administrativo y otra para los

Servicios, sin embargo, en el Ámbito Externo o General se encuentran dos carpetas y un archivo.

La carpeta principal dentro de este Ámbito es el Business Logic, el cual tiene consigo todo el

contenido robusto lógico de la Aplicación, en su interior se puede encontrar una serie de

controladores encargados de solicitar, crear, actualizar o eliminar información de la base de

datos trabajando en conjunto con los Modelos. Su objetivo principal es el de manipular la

información o las peticiones entregadas por los controladores del Panel Administrativo o

Servicios y devolverles a estos los datos o respuestas solicitadas, el Business Logic por ningún

33

motivo debe manipular la interfaz gráfica del Panel Administrativo pues esta función le

corresponde a los controladores de este.

APLICACIÓN MÓVIL

Resulta complicado explicar a fondo cada uno de los componentes estructurales de la

Aplicación Móvil, en gran medida debido a que una buena porción de las carpetas y archivos

dentro de esta son generadas automáticamente por Ionic una vez que el proyecto se crea, por

tal motivo se explicara la carpeta que alberga tanto las vistas como la lógica de la Aplicación.

Ilustración 37. Carpeta www - Aplicación Móvil.

La Ilustración 34 muestra cada una de las carpetas que se encuentran dentro de www, tanto css,

como lib y js son referencias directas al desarrollo web; sin embargo tanto templates como

directives son dos conceptos nuevos que se encuentran implementados dentro de esta

arquitectura.

css, js y lib

La carpeta css al igual que el cualquier página web, tiene en su interior todos los archivos que

define el estilo de la Aplicación, estos son de tipo .css (cascade sytlesheet) y tienen como

34

objetivo definir la manera en que se ve cada componente de la interfaz, parte de las animación

e interacciones que estos pueden tener.

Lib por su parte contiene cada una de las librerías externas que están siendo usadas en el

proyecto. Si se desea implementar una nueva librería para el proyecto, esta debe ser ubicada

en esta carpeta y direccionada en el index.html

Por último, la carpeta js alberga en su interior la lógica de la aplicación en archivos de tipo .js o

JavaScript. Contrario a la Aplicación Desktop donde la lógica se encontraba en archivos de

tipo .php, Ionic hace uso de JavaScript, junto con AngularJS, para establecer los

comportamientos, acciones y demás aspectos que son realizados por el usuario. Dentro de esta

carpeta se encuentran los controllers, directives, routes y services.

Cada una de las vistas dentro de la aplicación tiene asignado un controlador; aquellas que

requieren comunicarse con un servidor para crear, leer, actualizar o eliminar datos que se

encuentra en la base de datos hacen uso de los servicios ubicados en el archivo services. Las

vistas que incorporan directives pueden hacerlo gracias a la correcta definición de estos en el

archivo directives y por ultima la correcta navegación a través de la aplicación es posible debido

a la correcta definición de las rutas en el archivo routes. Cada uno de estos archivos tienen

objetivos específicos, los cuales independientemente de la situación trabajan en conjunto, por

esta razón se afirma que son estos los que define la lógica de la Aplicación Móvil.

Directives

Extraído de la página web oficial de AngularJS, los directives son marcadores en un elemento

del DOM (como atributos, nombres de un elemento, comentarios o clases de CSS) que le

indican al compilador HTML de AngularJS ($compile) que a ese elemento del DOM se le debe

fijar cierto comportamiento o inclusive transformar este elemento y sus hijos.1

Dentro de la aplicación se ha recurrido a crear directives de tipo elemento “E” sin embargo las

opciones disponibles son: atributo “A”, clase “C”, comentario “M” y el ya mencionado elemento

“E”. Dentro de la carpeta que comparte el nombre de estos marcadores, directives, se

encuentran todos los archivos HTML que contienen los elementos creados con los cuales ha

sido posible reusar algunos de estos en diferentes vistas sin mayores complicaciones.

Templates

La carpeta templates tiene consigo todas las vistas comprendidas en la Aplicación Móvil las

cuales son archivo de tipo .html o HTML. No se debe confundir esta carpeta con directives, en

templates se encuentra la construcción de toda una vista mientras que en directives solo una

porción de código que representa un objeto o un conjunto de estos que han sido separados de

su vista de origen.

1 AngularJS, «AngularJS,» [En línea]. Available: https://docs.angularjs.org/guide/directive. [Último acceso: 17

Mayo 2016].

35

36

IMPLEMENTACIÓN Para implementar el proyecto, es decir, poder modificarlo desde un computador es necesario

contar con XAMPP, si se desea hacer desde el localhost pruebas preliminares, o Ionic si se

planea trabajar en la Aplicación Móvil. En capítulos anteriores se mostró el proceso de

instalación de tanto XAMPP como Ionic, por este motivo se asumirá que ya se cuentan con

estos.

Aplicación Desktop

Para realizar cambios en la Aplicación Desktop haciendo uso de XAMPP se debe contar con el

programa y además con la base de datos que se proporciona junto con el proyecto; de esta

forma se puede realizar las pruebas necesarias sin poner en riesgo tanto la Aplicación Móvil

como la Desktop. A continuación se muestran los pasos a seguir.

1. Abrir el Panel de Control de XAMPP e iniciar Apache y MySql.

Ilustración 38. Panel de Control de XAMPP.

37

2. Abrir la carpeta htdocs que se encuentra en la ruta de instalación de XAMPP. Ejemplo:

D:\xampp.

3. Pegar htdocs la carpeta con la Aplicación Desktop; esta incluye el Panel Administrativo, los

Servicios, etc. El nombre de la carpeta con estos archivos es UMobile.

Ilustración 39. Carpeta htdocs - XAMPP.

4. Dentro de la carpeta UMobile, en el AdminPanel se encuentra una carpeta llamada db, en

esta se encuentra el archivo UMobile.sql, este archivo contiene el código de creación de la base

de datos.

38

5. Antes de empezar a probar el Panel Administrativo es necesario instalar la base de datos en

el localhost, para esto se debe ir a la dirección http://localhost/phpmyadmin.

Ilustración 40. Interfaz principal phpMyAdmin.

39

5. En el menú superior se selecciona la opción “Importar”, a la izquierda de “Configuración” y

derecha de “Exportar”.

Ilustración 41. Menu superior phpMyAdmin.

6. Una vez la vista de importar haya cargado, se deben tener en cuenta un detalle antes de

realizar este proceso. La opción de “Conjunto de caracteres del archivo” debe ser utf-8; de otra

forma habrá conflictos con la base de datos. Una vez este seleccionado el conjunto de

caracteres se debe proceder a “Seleccionar el archivo”.

Ilustración 42. Vista principal para la importación de una base de datos.

7. Al presionar el botón “Seleccionar archivo” se abrirá un cuadro de dialogo en el cual se debe

buscar el archivo .sql y seleccionarlo.

40

Ilustración 43. Selección de archivo .sql.

8. Una vez el archivo es seleccionado, este se mostrara en phpMyAdmin. Para terminar el

proceso se deberá presionar el botón “Continuar” que se encuentra en la parte inferior.

Ilustración 44. Base de datos para importar seleccionada.

41

Ilustración 45. Botón de "Continuar"

9. Una vez terminado el proceso, la interfaz mostrara un mensaje en el que se avisa de los

resultados del proceso y la base de datos aparecerá en el menú derecho.

Ilustración 46. Mensaje de proceso de importación.

42

Ilustración 47. Base de datos importada.

10. Una vez se haya importado de manera correcta la base de datos, se recomienda probar que

el Panel Administrativo este conectándose con esta correctamente. Para esto se debe ir a la

dirección http://localhost/umobile/adminpanel/ sin apagar Apache y MySql.

Ilustración 48. Inicio Panel Administrativo.

11. A través del menú izquierdo es posible explorar las opciones disponibles, presiona una

opción y asegúrese de que no haya errores.

43

Ilustración 49. Información consultada de la Tabla Rol.

Aplicación Móvil

Partiendo del hecho de que Ionic ya debe estar instalado, el proceso para realizar pruebas,

cambios o demás acciones sobre el código y la aplicación es relativamente sencillo. A

continuación se muestra una serie de pasos a seguir para iniciar la emulación del proyecto

haciendo uso del buscador web de preferencia.

1. Se debe localizar la carpeta en la cual se encuentra el código de la aplicación móvil, una vez

se conoce su ubicación se debe abrir el CMD o la Terminal y ubicarse en la carpeta.

44

Ilustración 50. CMD - Ubicación de la carpeta con el código de la Aplicación Móvil.

2. Una vez se encuentre dentro de la carpeta se debe escribir el comando ionic serve; este se

encarga de iniciar la emulación del proyecto en el navegador web. El resultado debe ser como

el siguiente.

Ilustración 51. Ionic serve - resultado comando.

45

3. Si se realizó de manera correcta todo se debería haber abierto una pestaña en el navegador

web con la aplicación móvil siendo emulada.

Ilustración 52. Aplicación Móvil simulada por el navegador web.

46

ASPECTOS A TENER EN CUENTA Ya sea que se desee trabajar en la Aplicación Desktop o Móvil, hay ciertos aspectos que se

deben tener en cuenta antes de proceder a agregar, modificar o eliminar funcionalidades del

proyecto. A continuación se mencionan algunas de estas.

1. Para la creación de nuevas tablas para la base de datos, procurar llamar las tablas en singular,

haciendo uso de mayúsculas en cada inicio de palabra y sin recurrir a “_” para nombres

compuestos.

2. Los atributos de las tablas deben ser llamados en minúscula, si la tabla tiene una llave

foránea, esta debe llamarse “id_NombreTabla”

3. El tipo de cotejamiento debe ser utf8_unicode_ci.

4. Se debe ser extremadamente cuidadoso cuando se defina el modelo de una nueva tabla, los

datos deben corresponder en ambas partes y las relaciones deben ser especificadas, de otra

forma habrá conflictos para realizar el CRUD.

5. La clase Module se encarga de crear automáticamente las vistas solicitadas haciendo uso de

la base de datos y el modelo de la tabla consultada, si no se define de manera correcta ambos

aspectos la clase no podrá realizar su trabajo.

6. Para definir qué tipo de vista debe ser cargada al ser presionado un botón del menú

desplegable izquierdo es necesario darle un “data-action” y un “data-class”.

7. Los posibles “data-action” son: “GET” si se desea traer todos los datos de una tabla, “CREATE”

si se busca crear el formulario de creación de una tabla, “UPDATE” si se requiere actualizar un

dato en específico y “DELETE” si se desea eliminar un campo de una tabla.

8. El “data-class” debe corresponder al nombre de la tabla que se desea consultar, que a su vez

debe ser igual al nombre del modelo dentro de la carpeta models.

9. Los controladores tiene dos variables que definen la visualización de las llaves foráneas en los

formularios, “$relationshipView” activa o desactiva la aparición de las llaves foráneas entre las

opciones para ingresar o actualizar un campo, “$manyView” permite ocultar las relaciones de

muchos a muchos en los formularios.

10. No se debe confundir las funciones de los controladores del Business Logic con los

controladores de los Servicios o Panel Administrativo.

11. Se recomienda hacer uso de los directives en la Aplicación Móvil si se considera que ciertos

elementos pueden ser reusados en diferentes vistas.

12. Si se requiere de servicios diferentes a los existentes, es importante que estos se ubiquen

en el archivo destinado para esto.