Universidad Técnica Federico Santa María. Proyecto de fin de estudios. Tlemcani Nadia

Transcripción

1 Universidad Técnica Federico Santa María Proyecto de fin de estudios Tlemcani Nadia

2 «Implementación de sistema de noticias de la carrera de Técnico Universitario en Informática para móviles» Tlemcani Nadia Abril - Junio 2015 Profesores referentes: Don Ricardo Cahe Mr. Patrick Lebegue

3

4 Agradecimientos En primer lugar, me gustaría dar las gracias a la Universidad Federico Santa María por aceptarme en su establecimiento durante esos tres meses y que me permitió realizar el trabajo final de mis estudios. Entonces quiero dar las gracias a los profesores Ricardo, Lais, Catherine, Cristian, Rodrigo, Dagoberto y el alumno Marco por hacerme sentir tan bienvenida, por su amabilidad, generosidad y atención a mí. También quiero agradecer a la profesora de español por integrarme a su curso y lo que me enseñó. Por último, doy las gracias al personal de la cocina, que hizo todo lo posible para desarrollar un menú especial para mí y para hacer los almuerzos agradables.

5 Índice Introducción I. Primera parte: Descripción del Proyecto 1. Contexto actual 2. Las tecnologías existentes 3. Ambiente de trabajo y herramientas de desarrollo elegidas 4. Framework y lenguajes utilizados 5. Emulador e IDE para compilar 6. Objetivos y problemas del proyecto II. Segunda parte: La aplicación 1. Modelo inicial 2. Diseño de la aplicación 3. Interfaz y funcionamiento 4. Logo para diferentes plataformas III. Tercera parte: Balance 1. Habilidades Adquiridas 2. Contribuciones culturales 3. Conclusión Bibliografía

6 Introducción Hoy, más que nunca, las tecnologías de comunicación están en auge. Los teléfonos inteligentes y las tabletas se han convertido en herramientas esenciales y fueron capaces de conseguir un lugar en la vida cotidiana de todos. La aparición de las aplicaciones móviles ha facilitado a los usuarios, el acceso a un servicio. Además, el aspecto y el tacto son más adecuados y naturales a los seres humanos. Es por eso que en el presente trabajo nos centramos en una aplicación móvil consistente en un sistema de información de noticias para los estudiantes. De hecho, es importante para que el estudiante se mantenga al corriente de las últimas noticias en su universidad, simplemente. 5

7 I. Primera parte: Descripción del Proyecto 1. Contexto actual: La Universidad Técnica Federico Santa María es una universidad chilena cuya Casa Central está ubicada en Valparaíso. Tiene además campus y sedes ubicados en Viña del Mar, Concepción, Santiago-San Joaquín, Santiago-Vitacura y Rancagua. Misión USM: Crear y difundir nuevo conocimiento, y formar integralmente profesionales idóneos en el ámbito científico - tecnológico, para liderar el desarrollo del país y la humanidad. Realizamos esta misión siendo una comunidad universitaria de excelencia, que se vitaliza con la diversidad e independencia de los procesos de descubrimiento y aprendizaje y que, de acuerdo con la voluntad testamentaria de don Federico Santa María Carrera, pone especial énfasis en la integración de aquellos que, reuniendo las condiciones exigidas por el quehacer académico, no poseen suficientes medios materiales. Visión USM: Ser un referente científico-tecnológico nacional e internacional, que convocando a una comunidad universitaria de excelencia, estimule la difusión del conocimiento y la creación de valor, en todas sus áreas de trabajo, siendo reconocida como UNIVERSIDAD LIDER EN INGENIERÍA, CIENCIA Y TECNOLOGÍA. 6

8 Toda la información de la Universidad Federico Santa María está disponibles en la página oficial en la siguiente dirección: « Para acceder a las noticias específicas de la Sede Viña del Mar, sólo tienes que seleccionar «Viña del Mar» en la pestaña «Noticias por Campus o Sedes». La carrera de Técnico Universitario en Informática dispone de una página propia y también hay una página de facebook. Además, en la entrada del edificio Informática pude ver las noticias desplazadas en una pantalla. Los estudiantes pueden acceder fácilmente a la información más reciente. Tenga en cuenta que se está creando un nuevo sitio web, para implementar una aplicación que permita a los alumnos poder ver las noticias en sus dispositivos móviles. 7

9 I.2. Las tecnologías existentes: En la actualidad hay una gran cantidad de proveedores de plataformas móviles y cada uno tiene su propio sistema operativo. Para nuestro proyecto, es necesario que cada estudiante pueda acceder con su solicitud a un sitio, sea cual sea el móvil que dispone. Por lo tanto, nos enfrentamos a un problema que es el desarrollo de una aplicación compatible con cualquier sistema operativo. Para ello existen varias soluciones: - La primera es desarrollar para cada plataforma, una aplicación diseñada en la lengua nativa de dicha plataforma y con diferentes herramientas de desarrollo. La carga de trabajo sería significativa y requeriría conocimientos en varios lenguajes distintos. - La segunda solución está basada en el navegador web, por lo que no habría más problemas de compatibilidad debido a que la mayoría de los dispositivos móviles ahora utilizan el mismo navegador Web Kit y todos tienen el mismo estándar que es, por tanto, HTML 5. - La tercera solución es desarrollar una aplicación híbrida, consistente en una aplicación nativa que para ciertos servicios se ejecuta en un navegador web incrustado en la aplicación (se incrustan llamadas a páginas web). 8

10 Hay más de una docena de maneras de lograrlo. Consideramos aquí las principales: Soluciones Plataformas Lenguajes IDE PhoneGap IOS HTML 5 Cualquier IDE, Android CSS 3 tecnologías de desarrollo Web Blackberry Os JavaScript (HTML, CSS y Symbian JavaScript) Titanium Bada IOS Android Blackberry Os JavaScript Titanium Studio (basado en Eclipse) Rhomobile IOS Android Blackberry Os Windows mobile Flex IOS Android Blackberry Os Ruby HTML CSS JavaScript ActionScript 3 MXML El plugin de Eclipse «RhoStudio» o cualquier editor que soporte el desarrollo web y Ruby Adobe Flash Builder Anexo 1: Las soluciones dominantes. 9

11 I.3. Ambiente de trabajo y herramientas de desarrollo elegidas: Para nuestra aplicación, vamos a optar por la tercera solución presentada. Ahora estamos estableciendo las ventajas y desventajas de las diferentes soluciones propuestas. Soluciones Beneficios Desventajas PhoneGap Titanium Rhomobile Flex Posee una pequeña biblioteca, permite acceder a muchos recursos de hardware, permite generar una solución escalable, cuenta con una comunidad activa, que desarrolla sin costo (soluciones gratuitas). La aplicación nativa, permite acceder a los recursos materiales, la velocidad de desarrollo, y la escalabilidad. Algunos «widgets» nativos, la similitud con «Ruby On Rails», el entorno de prueba y desarrollo eficiente y gratuito. El entorno de desarrollo integral, buena documentación y muchos tutoriales, el acceso a muchos recursos nativos, y libre. El uso de métodos de callback que puede ser complejo, y la portabilidad presenta problemas con plugins específicos PhoneGap. La mala documentación, la falta de recursos para el aprendizaje, la conexión permanente a Internet para el IDE. El aprendizaje difícil y poco acceso a los «widgets» nativos. El rendimiento, sin aspecto predeterminado nativo, y el pago de entorno de desarrollo. Anexo 2: Ventajas y desventajas comparativas. Al parecer, ahora, teniendo las opciones sobre la mesa PhoneGap emerge como la mejor solución para nuestra aplicación, por lo que la elegimos. 10

12 En cuanto al entorno de desarrollo, vamos a utilizar Sublime Text 2, para facilitar la navegación a través de los archivos, comandos y métodos. Con este IDE, podemos codificar en cualquier lenguaje de programación que necesitamos. Además, la herramienta de indentación seguirá la indentación correcta requerida para cada idioma. También contamos con resaltado de sintaxis que hace el código más legible. Sublime Text 2 tiene muchas opciones como la posibilidad de editar múltiples ubicaciones de un archivo a la vez, la sintaxis válida destacando para SCSS, o una ayuda de entrada. Anexo 3: Sublime Text 2 interfaz, durante una búsqueda. Anexo 4: Interfaz de Sublime Text 2, la sangría y resaltado de sintaxis SCSS. 11

13 I.4. Framework y lenguajes utilizados: Node.js permite utilizar el código JavaScript en un entorno de servidor. Permite hacer código JavaScript fuera del navegador, y generar páginas web. Node.js es rápido y eficiente, gracias a que utiliza el motor JavaScript V8, de código abierto y desarrollado por Google para el Proyecto Chromium. La ventaja de V8 sobre otros motores de JavaScript radica en su forma de interpretar el código de forma no bloqueante al momento de su ejecución, convirtiendo rápidamente el código JavaScript a código máquina, optimizando su funcionamiento considerablemente al momento de ejecutarse. Esto, junto con las ventajas que presenta el lenguaje JavaScript con los métodos de callback y el sistema de eventos nativo, hacen de Node.js una excelente alternativa. Por estas razones, elegimos este entorno para el lado del servidor de nuestra aplicación. La instalación es simple, y hay plugins de fácil acceso a través de un gestor de paquetes: NPM (Node Package Manager). Angular.js es un Framework de JavaScript que está disponible en GitHub desde junio de Se basa en conceptos como el MVC (Modelo - Vista- Controlador) patrón de arquitectura de software que establece que debe haber una separación entre los datos (modelo), la presentación de datos (ver), y las acciones que puede realizar en estos datos (Controlador). Del mismo modo, se basa en el concepto de enlace de datos o en el concepto de manejo del DOM a través de directivas. Debido a que recibí conocimientos de este lenguaje (JavaScript) durante mis estudios y que, además, por mi investigación en la web, Angular.js parece ser una herramienta muy poderosa, he optado por utilizarla en mi trabajo 12

14 I.5. Emulador e IDE para compilar: Ripple es un emulador en línea. Vamos a utilizar Google Chrome para probar nuestra aplicación sin tener que compilar. Para compilar nuestra aplicación para Android finalmente tenemos dos posibilidades: utilizar el Android Studio IDE o utilizar Eclipse con el plugin ADT (Android Development Tools). Facilidad de instalación ADT (Eclipse) Medio Android Studio Simple Idiomas Muchos Inglés Rendimiento Puede ser pesado Rápido Compilador Ant Gradle Editor gráfico sí sí Anexo 5: ADT y Android Studio. Para nuestro proyecto vamos a utilizar el IDE Android Studio. 13

15 I.6. Objetivos y problemas del proyecto: El objetivo principal de este proyecto es el desarrollo de una aplicación que permita a los estudiantes de la carrera de Informática Sede Viña del Mar para acceder a las últimas noticias sobre el campus, mediante tecnología móvil. Durante el desarrollo de esta aplicación, se produjeron algunos problemas. En primer lugar, las combinaciones posibles entre las numerosas tecnologías disponibles, lo que hace que nuestra elección difícil. En segundo lugar, la interacción Angular.js, Node.js y MySQL puede llegar a ser bastante difícil. No hay muchos recursos informativos sobre el uso de otros motores de Bases de Datos en este tipo de aplicaciones, ya que el motor más utilizado en este tipo de entorno de desarrollo es MongoDB en lugar de algún motor SQL. Por último, las peticiones entre dominios (Cross Origin Resource Sharing) impiden que la aplicación se ejecute correctamente en la tableta. 14

16 II. Segunda parte: La aplicación: 1. Modelo inicial: Anexo 6: Aplicación del modelo. 15

17 II.2. Diseño de la aplicación: Hay dos tipos de Framework que podemos utilizar para nuestro proyecto. Uno es Sencha Touch, que utiliza jquery Mobile como punto principal de desarrollo, el cual incluye varios elementos visuales disponibles, como grillas (grids) para disposición de contenido, soporte nativo para menús y botones, y detección de eventos táctiles, propios de un teléfono móvil actual. Por otro lado tenemos como alternativa los Frameworks Backbone.js, Ember.js y Angular.js, que permiten una mejor organización del código además de una mejor interacción con HTML. La implementación de la aplicación es relativamente simple, por lo que elegimos, en relación con el diseño de la interfaz para escribir nuestro código CSS. El Framework Angular.js no requiere mayor aprendizaje de CSS, es por eso que utilizamos para nuestro proyecto. Compass es un Framework que permite compilar CSS usando SCSS o SASS. Proporciona una API para la integración HTML y CSS3 limpia y productiva. Se requiere la instalación de un pre intérprete de Ruby en nuestra máquina. La instalación es sencilla y se realiza desde la línea de comandos ($ gem install compass). Para compilar nuestro proyecto, introduzca la línea de comandos en una terminal: $ compass compile. Por razones prácticas, estamos creando una «css.bat» archivo del sistema de Windows para compilar automáticamente nuestro archivo SCSS después de la edición. 16

18 II.3. Interfaz y funcionamiento: Utilizamos el emulador Ripple que está representado por un pequeño icono en esta barra de herramientas, sólo tiene que elegir «enable» para activar y «disable» de otro modo: Anexo 7: Interfaz Ripple. 17

19 Nuestra aplicación tiene que presentar una interfaz lo más similar posible al sitio oficial de la Universidad, adoptaremos los mismos colores y formas. Para ayudarlos, vamos a utilizar las herramientas de desarrollo de Mozilla Firefox, y sobre todo de elementos de tipo inspector. Así que nuestra página principal será tal como se presenta a continuación si: Un simple clic en el logotipo en la parte inferior izquierda de la interfaz permite el acceso a la página de inicio en cualquier momento. Anexo 8: Inspector Mozilla Firefox página de inicio. 18

20 En cuanto a las últimas noticias, el clic se hará sobre el logotipo en la parte inferior derecha de la interfaz. Ahora viene la representación visual de la aplicación a la noticia: Para mostrar los titulares de noticias vamos a utilizar las directrices «ng-repeat» de Angular.js. Esta directiva muestra todos los elementos de una matriz. A un clic en uno de los títulos, el usuario debe enviar el contenido de la noticia de que se trate. Anexo 9: Representación Visual últimas noticias. 19

21 Llegamos a esto a través de la directiva «ng-show», que en un clic, en el DOM hace visible el contenido de la noticia. Luego añadimos un efecto «en gris» cuando el usuario haga clic en un nuevo título. También se puede llegar a la página de noticias siguiente o anterior con los botones habilitados al efecto. El usuario también tiene una barra de búsqueda en la parte superior de la interfaz. Permite la selección de nuevos títulos que contienen los caracteres introducidos en el espacio para la búsqueda. Anexo 10: Contenido de un nuevo. Anexo 11: Efecto CSS "en gris" en una nueva ya visitada. Anexo 12: Demostración de la barra de búsqueda. 20

22 Los datos de nuestra aplicación se recogen en una base de datos disponible para nosotros. Estos datos son utilizados con el lenguaje SQL. WampServer es una plataforma de desarrollo web para aplicaciones web dinámicas de Windows utilizando el servidor Apache 2, lenguaje de scripting PHP y una base de datos MySQL. También posee PHPMyAdmin para administrar fácilmente las bases de datos. Así que vamos a tomar ventaja de esta plataforma. Nuestro proyecto está estructurado de la siguiente manera: Anexo 13: Estructura funcional del proyecto. 21

23 Sabemos que la carga de datos a veces puede requerir más o menos tiempo. Sin embargo, es importante que se informe al usuario y que la interfaz sea intuitiva. También, estamos implementando un cargador es un icono que aparecerá en la aplicación durante el tiempo de carga de datos. Con la Directiva «ng-route» de Angular.js, también podemos redirigir al usuario a la página de inicio si hay error en la ruta URL. Por último, durante un problema de carga de datos, aparece un mensaje de error. Anexo 14: Descripción Cargador. Anexo 15: Vista previa de un error de carga de datos. 22

24 Para comunicarse e intercambiar datos con nuestra base de datos, podemos crear un archivo «serveur.js». Su código establecerá la conexión con la base de datos y va a extraer los datos necesarios de consultas SQL incluyen dentro. Entonces volverá el resultado de estas peticiones al formato JSON, pasándolos al lado del cliente como una tabla de datos. Estamos lanzando nuestro servidor Node.js con símbolo del sistema: Anexo 16: Command Prompt Node.js. Para adaptar nuestro proyecto a la página web de la Universidad, tenemos que revisar nuestro diagrama anterior de la siguiente manera: Anexo 17: Nueva estructura. 23

25 La estructura JSON se ve así: - (Object) : o Array : «id» equivalente a «codigo_noticia». «title» equivalente a «not_titulo». «content» equivalente a «not_descripcion». «date» equivalente a «not_fecha_grabacion». La interfaz y el funcionamiento sigue siendo el mismo: Anexo 18: Visualización de los nuevos datos. 24

26 II.4. Logo para diferentes plataformas: Para crear el logo de la aplicación, vamos a utilizar la herramienta en línea Launcher Icon Generator Android Asset Studio. Tenemos un archivo Zip que necesitamos para mover al directorio «res» de la aplicación. Esta es una forma sencilla de obtener los logotipos de diferentes tamaños dependiendo de la plataforma utilizada: Anexo 19: Launcher Icon Generator. 25

27 III. Tercera parte : Balance 1. Habilidades Adquiridas : A lo largo de este proyecto, tuve la oportunidad de aprender nuevas habilidades. De hecho, he mejorado mis conocimientos de HTML, CSS3 y JavaScript. Además, mediante el estudio del funcionamiento de aplicaciones multiplataforma, pude ver entre las distintas soluciones existentes. Además, conocí varios Frameworks, lo que me ayudará en el futuro. A través de mi investigación efectuada en tutoriales en línea, pude observar que Angular.js, es, en mi opinión, una herramienta excelente para el desarrollo de aplicaciones multiplataforma. III.2. Contribuciones culturales: Creo que he mejorado mucho mi español, a través de la educación que recibí aquí, pero también a través de intercambios con la gente que conocí. A pesar de la barrera del idioma, pude ver, a través del conocimiento que he hecho aquí, otra cultura y otra forma de vida. Del mismo modo, tuve la oportunidad de presentar mi cultura. Todos los intercambios me han dado una visión más amplia de la vida. Quisiera, por último, confirmar la hospitalidad y la generosidad de la población chilena. 26

28 III.3. Conclusión: Pudimos ver, a través de nuestro proyecto, que fue posible desarrollar una aplicación para Smartphones y Tabletas de manera sencilla. No es imprescindible tener conocimientos en cada uno de los lenguajes nativos de todas las plataformas disponibles. Sólo se requieren conocimientos de HTML, CSS3 y JavaScript. Para hacer fácil de implementar una aplicación funcional, hay Frameworks como jquery Mobile, que están disponibles en código abierto. Por último, la forma más sencilla, rápida y eficaz para desarrollar una aplicación multiplataforma es recurrir a las tecnologías web. 27

29 Anexo Anexo 1: Las soluciones dominantes Anexo 2: Ventajas y desventajas comparativas Anexo 3: Sublime Text 2 interfaz, durante una búsqueda...11 Anexo 4: Interfaz de Sublime Text 2, la sangría y resaltado de sintaxis SCSS...11 Anexo 5: ADT y Android studio...13 Anexo 6: Aplicación del modelo...14 Anexo 7: Interfaz Ripple...14 Anexo 8: Inspector Mozilla Firefox página de inicio...14 Anexo 9: Representación Visual últimas noticias...14 Anexo 10: Contenido de un nuevo...14 Anexo 11: Demostración de la barra de búsqueda...14 Anexo 12: Efecto CSS «en gris» en una nueva ya visitada...14 Anexo 13: Estructura funcional del proyecto...14 Anexo 14: Descripción Cargador...14 Anexo 15: Vista previa de un error de carga de datos...14 Anexo 16: Command Prompt Node.js...14 Anexo 17: Nueva estructura...14 Anexo 18: Visualización de los nuevos datos...14 Anexo 19: Launcher Icon Generator

30 Fuentes

31 Soluciones Plataformas Idiomas IDE PhoneGap IOS HTML 5 Cualquier IDE, Android CSS 3 tecnologías de desarrollo Web Blackberry Os JavaScript (HTML, CSS y Symbian JavaScript) Titanium Bada IOS Android Rhomobile IOS Flex Blackberry Os Android Blackberry Os Windows mobile IOS Android Blackberry Os JavaScript Ruby HTML CSS JavaScript ActionScript 3 MXML Anexo 1: Las soluciones dominantes. Titanium Studio (basado en Eclipse) El plug-in de Eclipse «RhoStudio» o cualquier editor que soporte el desarrollo web y Ruby Adobe Flash Builder 30

32 Soluciones Beneficios Desventaja PhoneGap Titanium Rhomobile Flex Posee una pequeña biblioteca, permite acceder a muchos recursos de hardware,permite generar una solución escalable, cuenta con una comunidad activa, que desarrolla sin costo(soluciones gratuitas). La aplicación nativa, permite acceder a los recursos materiales, la velocidad de desarrollo, y la escalabilidad. Algunos «widgets» nativa, la similitud con «Ruby On Rails», el entorno de prueba y desarrollo eficiente y gratuita. El entorno de desarrollo integral, buena documentación y muchos tutoriales, el acceso a muchos recursos nativos, y libre. El uso de métodos de devolución de llamada que puede ser difícil, y la portabilidad presenta problemas con plugins específicos PhoneGap. La mala documentación, la falta de recursos para el aprendizaje, la conexión permanente a Internet para el IDE. El aprendizaje difícil y poco acceso a los «widgets» nativa. El rendimiento, sin aspecto predeterminado nativo, y el pago de entorno de desarrollo. Anexo 2: Ventajas y desventajas comparativas. 31

33 Anexo 3: Sublime Text 2 interfaz, durante una búsqueda. Anexo 4: Interfaz de Sublime Text 2, la sangría y resaltado de sintaxis SCSS. 32

34 Facilidad de instalación ADT (Eclipse) Medio Android Studio Simple Idiomas Muchos Inglés Rendimiento Puede ser pesado Rápido Compilador Ant Gradle GUI Editor sí sí Anexo 5: ADT y Android Studio. Anexo 6: Aplicación del modelo. 33

35 Anexo 7: Interfaz Ripple. 34

36 Anexo 8: Inspector Mozilla Firefox página de inicio. 35

37 Anexo 9: Representación Visual últimas noticias. 36

38 Anexo 10: Contenido de un nuevo. Anexo 11: Efecto CSS «en gris» en una nueva ya visitada. Anexo 12: Demostración de la barra de búsqueda. 37

39 Anexo 13: Estructura funcional del proyecto. 38

40 Anexo 14: Descripción Cargador. Anexo 15: Vista previa de un error de carga de datos. Anexo 16: Command Prompt Node.js. 39

41 Anexo 17: Nueva estructura. Anexo 18: Visualización de los nuevos datos. 40

42 Anexo 19: Launcher Icon Generator. 41