Tesis de Angular

UNIVERSIDAD POLITCNICA DE CARTAGENA

Escuela Tcnica Superior de Ingeniera Industrial

Desarrollo de una aplicacin web para compartir medio de transporte

con AngularJS

TRABAJO FIN DE GRADO

GRADO EN INGENIERA ELECTRNICA INDUSTRIAL Y AUTOMTICA

Autor: Fco Javier Avils Lpez Directores: Diego Alonso Cceres

Francisco Snchez Ledesma

Cartagena, 8 de Octubre de 2014

DESARROLLO DE UNA APLICACIN WEB CON ANGULARJS PARA COMPARTIR TRANSPORTE - CONTENIDO

CONTENIDO 1 Introduccin ............................................................................................................................. 4

1.1 Motivaciones ................................................................................................................... 4

1.2 Objetivos .......................................................................................................................... 5

1.3 Estructura del documento ............................................................................................... 5

2 Estado de la tcnica ................................................................................................................. 6

2.1 LADO SERVIDOR ............................................................................................................... 6

2.1.1 PHP .............................................................................................................................. 6

2.1.2 JAVA JSF ....................................................................................................................... 8

2.2 LADO CLIENTE ................................................................................................................ 10

2.2.1 EmbedJS ..................................................................................................................... 10

2.2.2 BackboneJS ................................................................................................................ 10

2.2.3 jQuery Mobile ............................................................................................................ 11

3 Tecnologas utilizadas ............................................................................................................ 12

3.1 HTML ............................................................................................................................. 12

3.2 CSS ................................................................................................................................. 14

3.2.1 Bootstrap ................................................................................................................... 17

3.3 Javacript ......................................................................................................................... 18

3.3.1 Uso en pginas web ................................................................................................... 18

3.3.2 Dnde puedo ver funcionando Javascript? ............................................................. 20

3.4 AngularJS ....................................................................................................................... 21

3.4.1 Data Binding en AngularJS ......................................................................................... 22

3.4.2 Modulos ..................................................................................................................... 22

3.4.3 Scopes ........................................................................................................................ 23

3.4.4 Controladores ............................................................................................................ 23

3.4.5 Directivas ................................................................................................................... 24

3.4.6 Directivas y Scopes .................................................................................................... 26

3.4.7 Filtros ......................................................................................................................... 26

3.4.8 Services ...................................................................................................................... 28

3.4.9 Eventos ...................................................................................................................... 31

3.4.10 Promesas ............................................................................................................... 32

1


3.4.11 Multiple Views and Routing .................................................................................. 33

3.5 FireBase ......................................................................................................................... 35

3.5.1 Bases de datos NoSQL ............................................................................................... 35

3.5.2 Crear una cuenta ....................................................................................................... 37

3.5.3 Instalar Firebase ........................................................................................................ 38

3.5.4 Leer y escribir desde Firebase ................................................................................... 38

3.5.5 Aadiendo autenticacin .......................................................................................... 39

3.5.6 Seguridad en Firebase ............................................................................................... 39

3.5.7 Bindings ..................................................................................................................... 40

3.5.8 FirebaseSimpleLogin .................................................................................................. 40

3.5.9 FireBase y AngularJS: AngularFire ............................................................................. 41

4 Casos de Uso .......................................................................................................................... 46

4.1 Registro .......................................................................................................................... 47

4.2 Login .............................................................................................................................. 48

4.3 Mis coches ..................................................................................................................... 49

4.4 Nuevo coche .................................................................................................................. 50

4.5 Buscar coche .................................................................................................................. 51

4.6 Administrar coches seleccionados ................................................................................ 52

4.7 Perfil del usuario ............................................................................................................ 53

4.8 Logout ............................................................................................................................ 54

5 Implementacin de la aplicacin ........................................................................................... 55

5.1 Index.html ...................................................................................................................... 55

5.2 app.js ............................................................................................................................. 59

5.3 controllers.js .................................................................................................................. 61

5.3.1 'profileController' ...................................................................................................... 61

5.3.2 'loginController' ......................................................................................................... 63

5.3.3 'myCarsController' ..................................................................................................... 64

5.3.4 'chosenCarsController' .............................................................................................. 66

5.3.5 'carController' ............................................................................................................ 68

5.3.6 'lookingController' ..................................................................................................... 70

5.4 services.js ....................................................................................................................... 73

5.5 rootScope ...................................................................................................................... 77

5.6 Directivas ms utilizadas ............................................................................................... 79 2


5.6.1 Ng-view ...................................................................................................................... 79

5.6.2 Ng-controller ............................................................................................................. 79

5.6.3 ng-show/ng-hide ....................................................................................................... 79

5.6.4 ng-if ............................................................................................................................ 80

5.6.5 ng-repeat ................................................................................................................... 80

5.6.6 ng-click ....................................................................................................................... 81

5.6.7 ng-model.................................................................................................................... 81

5.7 Filtros utilizados ............................................................................................................. 83

5.8 Bootstrap en la aplicacin ............................................................................................. 84

5.8.1 Container ................................................................................................................... 84

5.8.2 Col y row .................................................................................................................... 85

5.8.3 Hidden/visible ............................................................................................................ 86

5.8.4 Btn ............................................................................................................................. 86

5.8.5 Panel .......................................................................................................................... 86

5.8.6 Text-center, pull-left y pull-right ............................................................................... 87

5.8.7 Icons ........................................................................................................................... 87

5.8.8 Img-responsive .......................................................................................................... 87

5.8.9 Alert ........................................................................................................................... 90

5.8.10 Form ...................................................................................................................... 90

5.8.11 Table ...................................................................................................................... 91

5.9 Capturas ......................................................................................................................... 92

6 Base de datos ....................................................................................................................... 101

6.1 Login ............................................................................................................................ 102

6.2 Apartado coches .......................................................................................................... 106

6.3 Apartado usuarios ....................................................................................................... 109

7 Conclusiones ........................................................................................................................ 111

8 Bibliografa ........................................................................................................................... 113

3

DESARROLLO DE UNA APLICACIN WEB CON ANGULARJS PARA COMPARTIR TRANSPORTE - INTRODUCCIN

1 INTRODUCCIN

En este primer captulo se proporciona una visin general del proyecto, explicando las motivaciones y objetivos que me han llevado a la realizacin del mismo. Adems, se revisar la estructura general del documento.

1.1 MOTIVACIONES A medida que la tecnologa evoluciona, la sociedad la va adaptando en su da a da; actualmente, el dispositivo mvil es la tecnologa que ms cambio est experimentando (smartphones, tablets, laptops), pero los diferentes sistemas operativos que utilizan obligan a los programadores a crear una aplicacin para cada sistema operativo (IOS, Android, Windows phone, Windows, Linux). Por este motivo, las aplicaciones web tienen una gran ventaja, y es que cualquier dispositivo con cualquier sistema operativo que posea un navegador web (todos hoy en da), es capaz de hacer uso de una aplicacin web, en la cual el programador solo debe preocuparse de realizar un buen responsive design para adaptarse lo mejor posible al tamao de pantalla del dispositivo que la est utilizando. Esto, sumado a la creciente demanda de JavaScript como sustitucin de PHP y otros lenguajes del lado servidor en aplicaciones web debido a su liberacin de trabajo en el servidor, hace la idea de la creacin de una aplicacin web basada en JavaScript muy atractiva. La aplicacin har uso de un patrn de desarrollo MVC (modelo-vista-controlador) implementado en JavaScript llamado AngularJS desarrollado por Google, muy ligero y potente, hacindolo ideal para dispositivos mviles. Tambin har uso de CSS y HTML como es lgico ya que al fin y al cabo lo que se muestra en el navegador es una web. En cuanto a la base de datos, la aplicacin funcionar sobre FireBase, una potente API de almacenamiento y sincronizacin de datos con un sistema de data binding, que combinado con el two-way-data-binding de Angular el usuario es capaz de ver lo que las variables contienen en directo, sin tener que actualizar la pgina, algo muy til en aplicaciones web.

4

DESARROLLO DE UNA APLICACIN WEB CON ANGULARJS PARA COMPARTIR TRANSPORTE - INTRODUCCIN

1.2 OBJETIVOS Este proyecto de fin de grado se centra en el previo estudio de los principales lenguajes de programacin web, as como la adquisicin de un conocimiento ms profundo en el framework AngularJS y la API FireBase, adems, tiene como objetivo crear una aplicacin Web donde los usuarios podrn encontrar a otras personas dispuestas a compartir coche a la hora de realizar un mismo trayecto, haciendo uso de las tecnologas ya mencionadas, con los beneficios que eso reporta: menos contaminacin, gastos compartidos y un trayecto ms ameno entre estudiantes. La aplicacin web deber contar con un diseo totalmente adaptable a todo tipo de dispositivos y pantallas, as como ser compatible con los diferentes navegadores web del mercado: Safari, Mozilla Firefox, Internet Explorer y Google Chrome.

1.3 ESTRUCTURA DEL DOCUMENTO En el captulo Estado de la tcnica realizar una comparacin de lenguajes del lado servidor como PHP o Java con lenguajes del lado cliente, como JavaScript con frameworks similares a AngularJS para aplicaciones web que se podran haber usado para el proyecto, como son EmbedJS o BackboneJS. Posteriormente se realizar un repaso a las diferentes tecnologas que se necesitan conocer para el desarrollo de esta aplicacin en el captulo Tecnologas utilizadas, con un profundo anlisis de AngularJS y FireBase. Una vez realizado este anlisis previo, se continuar el documento con un estudio de los posibles casos de uso de la aplicacin, as como sus respectivos diagramas de secuencia para entender cmo trabajar la aplicacin. Una vez puestos en escena los posibles casos de uso, se dar pie al anlisis de la aplicacin web en el apartado Implementacin de la aplicacin, el cual consistir en una explicacin de las diferentes partes de las que se compone la aplicacin, as como las tcnicas de programacin utilizadas, seguida de todo el contenido relativo a la Base de datos y su estructura. Para finalizar se expondrn los resultados conseguidos, seguidos de una conclusin final y por ltimo las referencias bibliogrficas.

5

DESARROLLO DE UNA APLICACIN WEB CON ANGULARJS PARA COMPARTIR TRANSPORTE ESTADO DE LA TCNICA

2 ESTADO DE LA TCNICA Actualmente podemos distinguir entre dos tipos de tecnologas a la hora de desarrollar aplicaciones web, las que trabajan en el lado del servidor y las que trabajan en el lado del cliente. Actualmente, cada da son ms usadas las del lado cliente debido a la liberacin de carga de trabajo en los servidores, pudiendo crear aplicaciones muy ligeras del lado cliente. Para este proyecto, se ha seleccionado una tecnologa del lado cliente, un framework basado en JavaScript llamado AngularJS. No obstante, en este captulo se van a mostrar algunas de las principales tecnologas que son utilizadas hoy da tanto en el lado servidor como en el lado cliente.

2.1 LADO SERVIDOR

2.1.1 PHP PHP [15] (acrnimo recursivo de PHP: Hypertext Preprocessor) es un lenguaje de cdigo abierto muy popular especialmente adecuado para el desarrollo web y que puede ser incrustado en HTML. En lugar de usar muchos comandos para mostrar HTML (como en C o en Perl), las pginas de PHP contienen HTML con cdigo incrustado que hace "algo". El cdigo de PHP est encerrado entre las etiquetas especiales de comienzo y final que permiten entrar y salir del "modo PHP". Lo que distingue a PHP de algo como Javascript del lado del cliente, es que el cdigo es ejecutado en el servidor, generando HTML y envindolo al cliente. El cliente recibir el resultado de ejecutar el script, aunque no se sabra el cdigo subyacente que era. El servidor web puede ser incluso configurado para que procese todos los ficheros HTML con PHP, por lo que no hay manera de que los usuarios puedan saber qu contienen los ficheros originales. PHP est enfocado principalmente a la programacin de scripts del lado del servidor, por lo que se puede hacer cualquier cosa que pueda hacer otro programa CGI, como recopilar datos de formularios, generar pginas con contenidos dinmicos, o enviar y recibir cookies. Aunque PHP puede hacer mucho ms. Existen principalmente tres campos principales donde se usan scripts de PHP.

6


Scripts del lado del servidor. Este es el campo ms tradicional y el foco principal. Se necesitan tres cosas para que esto funcione. El analizador de PHP (mdulo CGI o servidor), un servidor web y un navegador web. Es necesario ejecutar el servidor, con una instalacin de PHP conectada. Se puede acceder al resultado del programa PHP con un navegador, viendo la pgina de PHP a travs del servidor. Scripts desde la lnea de comandos. Se puede crear un script de PHP y ejecutarlo sin necesidad de un servidor o navegador. Solamente es necesario el analizador de PHP para utilizarlo de esta manera. Este tipo de uso es ideal para scripts ejecutados regularmente usando cron (en *nix o Linux) o el Planificador de tareas (en Windows). Estos scripts tambin pueden usarse para tareas simples de procesamiento de texto. Escribir aplicaciones de escritorio. Probablemente PHP no sea el lenguaje ms apropiado para crear aplicaciones de escritorio con una interfaz grfica de usuario, pero si se conoce bien PHP, y se quisiera utilizar algunas caractersticas avanzadas de PHP en aplicaciones del lado del cliente, se puede utilizar PHP-GTK para escribir dichos programas. Tambin es posible de esta manera escribir aplicaciones independientes de una plataforma. PHP-GTK es una extensin de PHP, no disponible en la distribucin principal. De modo que con PHP se tiene la libertad de elegir el sistema operativo, ya que puede usarse en todos los principales. Adems, se tiene la posibilidad de utilizar programacin por procedimientos o programacin orientada a objetos (POO), o una mezcla de ambas. Con PHP no se est limitado a generar HTML. Entre las capacidades de PHP se incluyen la creacin de imgenes, ficheros PDF e incluso pelculas Flash (usando libswf y Ming). Tambin se puede generar fcilmente cualquier tipo de texto, como XHTML y cualquier otro tipo de fichero XML. PHP puede autogenerar estos ficheros y guardarlos en el sistema de ficheros en vez de imprimirlos en pantalla, creando una cach en el lado del servidor para contenido dinmico. Una de las caractersticas ms potentes y destacables de PHP es su soporte para un amplio abanico de bases de datos. Escribir una pgina web con acceso a una base de datos es increblemente simple utilizando una de las extensiones especficas de bases de datos (p.ej., para mysql), o utilizar una capa de abstraccin como PDO, o conectarse a cualquier base de datos que admita el estndar de Conexin Abierta a Bases de Datos por medio de la extensin ODBC.

7


PHP tambin cuenta con soporte para comunicarse con otros servicios usando protocolos tales como LDAP, IMAP, SNMP, NNTP, POP3, HTTP, COM (en Windows) y muchos otros. Tambin se pueden crear sockets de red puros e interactuar usando cualquier otro protocolo. PHP tiene soporte para el intercambio de datos complejos de WDDX entre virtualmente todos los lenguajes de programacin web. Y hablando de interconexin, PHP posee soporte para la instalacin de objetos Java y usarlos de forma transparente como objetos de PHP. PHP tiene tiles caractersticas de procesamiento de texto, las cuales incluyen las expresiones regulares compatibles con Perl (PCRE), y muchas extensiones y herramientas para el acceso y anlisis de documentos XML. PHP estandariza todas las extensiones XML sobre el fundamento slido de libxml2, y ampla este conjunto de caractersticas aadiendo soporte para SimpleXML, XMLReader y XMLWriter.

2.1.2 JAVA JSF JSF o JavaServer Faces [18], es una especificacin de Java [16] para construir interfaces de usuario en aplicaciones web. JSF 2 hace uso de Facelets como sistema de plantillas por defecto, aunque otras tecnologas pueden ser empleadas para tal fin como por ejemplo XUL. Sin embargo, JSF 1.x hace uso de JavaServer Pages (JSP) como su sistema de plantillas por defecto. Basndose en el diseo del modelo de un componente UI, JavaServer Faces usa archivos XML llamados vistas de plantilla o Facelets views. El proceso FacesServlet procesa las peticiones, carga las correspondientes vistas, construye un rbol de componentes, procesa los eventos y renderiza el DOM para el cliente. El estado de los componentes UI y otros objetos del scope son guardados al final de cada peticin en un proceso llamado stateSaving, y recuperados en la siguiente creacin de esa vista. Tanto el lado del cliente como el del servidor pueden guardar objetos y estados. JSF se suele usar conjuntamente con Ajax, una importante tecnologa. Ajax es una combinacin de tecnologas que hacen posible crear interfaces web muy completas. Debido a que JSF soporta mltiples formatos de salida, los componentes de Ajax pueden ser fcilmente aadidos para enriquecer la interfaz web basada en JSF. La especificacin de JSF 2.0 provee soporte built-in para Ajax, estandarizando el ciclo de vida de las peticiones de Ajax y permitiendo as el desarrollo de interfaces simples para manejar los eventos de Ajax, permitiendo a

8


cualquier evento disparado por el cliente tener una apropiada validacin, conversin y finalmente invocacin mediante un mtodo antes de retornar el resultado al navegador via la actualizacin del DOM por parte de XML. JSF 2 incluye soporte para minimizar la degradacin de la aplicacin cuando JavaScript se encuentra deshabilitado en el navegador.

9


2.2 LADO CLIENTE

2.2.1 EmbedJS EmbedJS [21] es un framework JavaScript para dispositivos embebidos (mviles, televisiones, etc.) La gran ventaja que distingue a EmbedJS respecto a otros framework del lado cliente es que EmbedJS simplemente utiliza el cdigo que necesita para cada dispositivo. Esto significa que habr menos cdigo que se debe cargar en el dispositivo y por tanto habr menos cdigo viajando en la ejecucin de la aplicacin y menos uso de memoria. Embed es un proyecto de Dojo Fundation. Es un software OpenSource y se encuentra disponible bajo las licencias BSD y MIT. Ambas garantizan el derecho al uso y construccin de aplicaciones con EmbedJS tanto para desarrollo como para la comercializacin de la aplicacin. EmbedJS hace uso de un plugin para decidir que implementacin debe ser usada a la hora de ejecutar las caractersticas que se requieren en cada proyecto; por tanto, a la hora de realizar un proyecto, simplemente se har uso de las caractersticas que se requieran sin necesidad de hacer uso de cdigo que nunca ser utilizado.

2.2.2 BackboneJS BackboneJS [22] es una librera JavaScript basada en model-view-presenter (MVP). Backbone conforma la estructura de las aplicaciones web abastecindolas de eventos personalizables, colecciones de APIs con numerosas funciones, vistas mediante el manejo de eventos, y todo lo conecta con la API existente mediante una interfaz RESTful JSON. Se trata de ser una librera muy ligera, ya que su nica dependencia es la librera JavaScript Underscore.js. El proyecto se encuentra en GitHub, y el cdigo fuente se encuentra disponible, as como una suit test online, un ejemplo de aplicacin, numerosos tutoriales y una larga lista de proyectos reales que usan Backbone. Backbone se encuentra disponible para su uso bajo licencia MIT. Cuando se trabaja en aplicaciones web que contemplan mucho JavaScript, se termina teniendo una aplicacin llena de selectores jQuery y peticiones para mantener los datos sincronizados entre el HTML y la UI. Aqu nace la ventaja de Backbone, representando los datos como modelos, que pueden ser creados,

10


validados, destruidos y guardados en el servidor; siempre que una accin UI cause el cambio de un modelo, dicho modelo disparar un evento de cambio, y todas las vistas en las que se visualiza dicho modelo sern notificadas del cambio, siendo capaces de responder re-renderizndose ellas mismas con la nueva informacin.

2.2.3 jQuery Mobile jQuery Mobile [19][20] es un framework JavaScript basado en HTML5 para el diseo de la interfaz de usuario, diseado para hacer aplicaciones web responsive accesibles desde cualquier Smartphone, Tablet o dispositivo de escritorio. Se encuentra en continuo desarrollo por el equipo de jQuery. Es compatible con otros frameworks y plataformas como PhoneGap o Worklight. Basa su ventaja sobre los dems framework en esta adaptabilidad a cualquier tipo de dispositivo as como plataformas mviles. Se construye sobre un ncleo jQuery por lo que es de fcil aprendizaje para los programadores familiarizados con la sintaxis jQuery. Adems, cuenta con la herramienta builder para generar un archivo JavaScript personalizado as como hojas de estilos tambin personalizadas para no usar ms cdigo del necesario.

11

DESARROLLO DE UNA APLICACIN WEB CON ANGULARJS PARA COMPARTIR TRANSPORTE TECNOLOGAS UTILIZADAS

3 TECNOLOGAS UTILIZADAS

3.1 HTML El HTML [17], acrnimo ingls de HyperText Markup Language, es el cdigo que posibilita la creacin y edicin de documentos web. HTML, es un metalenguaje heredado del SGML basado en etiquetas (tags) que tiene como virtud entre otras, la de poder ser implementado por cdigo de otros lenguajes como JavaScript o Visual Basic Script que amplan y mejoran su capacidad original. El cdigo HTML utiliza el cdigo ASCII puro que puede teclearse en cualquier editor bsico para posteriormente ser interpretado secuencialmente por un objeto cliente denominado navegador (browser) que visualiza el resultado en pantalla. La sintaxis de HTML est estructurada segn el siguiente protocolo o sintaxis:

Una etiqueta inicial que seala el comienzo de un elemento Un nmero determinado de atributos (y sus valores asociados) Una cierta cantidad de contenido (caracteres y otros elementos) Una etiqueta que marca el final.

Muchos componentes o elementos de HTML incluyen atributos especficos en las etiquetas de comienzo, que definen el comportamiento, o indican propiedades adicionales de dichos elementos. La etiqueta que delimita el final es opcional para algunos elementos. En muy pocos casos, un elemento vaco puede no contener o requerir la etiqueta de final. De este modo, la pgina web contiene slo texto mientras que recae en el navegador web (interpretador del cdigo) la tarea de unir todos los elementos y visualizar la pgina final. Al ser un estndar, HTML busca ser un lenguaje que permita que cualquier pgina web escrita en una determinada versin, pueda ser interpretada de la misma forma (estndar) por cualquier navegador web actualizado. Sin embargo, a lo largo de sus diferentes versiones, se han incorporado y suprimido diversas caractersticas, con el fin de hacerlo ms eficiente y facilitar el desarrollo de pginas web compatibles con distintos navegadores y plataformas (PC de escritorio, porttiles, telfonos inteligentes, tabletas, etc.). Sin embargo, para interpretar correctamente una nueva versin de HTML, los desarrolladores

12


de navegadores web deben incorporar estos cambios y el usuario debe ser capaz de usar la nueva versin del navegador con los cambios incorporados. Usualmente los cambios son aplicados mediante parches de actualizacin automtica (Firefox, Chrome) u ofreciendo una nueva versin del navegador con todos los cambios incorporados, en un sitio web de descarga oficial (Internet Explorer). Un navegador no actualizado no ser capaz de interpretar correctamente una pgina web escrita en una versin de HTML superior a la que pueda interpretar, lo que obliga muchas veces a los desarrolladores a aplicar tcnicas y cambios que permitan corregir problemas de visualizacin e incluso de interpretacin de cdigo HTML. As mismo, las pginas escritas en una versin anterior de HTML deberan ser actualizadas o reescritas, lo que no siempre se cumple. Es por ello que ciertos navegadores an mantienen la capacidad de interpretar pginas web de versiones HTML anteriores. Por estas razones, an existen diferencias entre distintos navegadores y versiones al interpretar una misma pgina web.

13


3.2 CSS Hojas de Estilo en Cascada [17] (Cascading Style Sheets) es el lenguaje de hojas de estilo utilizado para describir el aspecto y el formato de un documento escrito en un lenguaje de marcas, esto incluye varios lenguajes basados en XML como son XHTML o SVG. La informacin de estilo puede ser adjuntada como un documento separado o en el mismo documento HTML. En este ltimo caso podran definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo "". La filosofa de CSS se basa en intentar separar lo que es la estructura del documento HTML, de su presentacin. Algunas opciones bsicas del lenguaje CSS por ejemplo pueden ser el poder cambiar el color de algunas tpicas etiquetas HTML como (h1 es una etiqueta en el lenguaje HTML destinada a mostrar un texto como encabezado, en tamao grande). Pero tambin hay funciones algo ms complejas, como introducir elementos propios con propiedades definidas por el programador (div es una etiqueta HTML para identificar una determinada regin o divisin de contenido dentro de una pgina web) o establecer imgenes de fondo. El organismo encargado de la estandarizacin al respecto es el llamado W3C que defini la primera versin CSS1 en 1996. Posteriormente se han desarrollado las revisiones 2, 2.1 y 3 que es la ms actual. El lenguaje CSS seguir evolucionando, pero hoy da puede decirse que ha sido un xito al simplificar el mantenimiento de pginas web. Antes, los contenidos y los estilos de presentacin estaban mezclados. Con CSS, quedan separados y se hace ms fcil el diseo y mantenimiento de pginas web. El trabajo del diseador web siempre est limitado por las posibilidades de los navegadores que utilizan los usuarios para acceder a sus pginas. Por este motivo es imprescindible conocer el soporte de CSS en cada uno de los navegadores ms utilizados del mercado. Internamente los navegadores estn divididos en varios componentes. La parte del navegador que se encarga de interpretar el cdigo HTML y CSS para mostrar las pginas se denomina motor. Desde el punto de vista del diseador CSS, la versin de un motor es mucho ms importante que la versin del propio navegador.

14


La siguiente tabla muestra el soporte de CSS 1, CSS 2.1 y CSS 3 de los cinco navegadores ms utilizados por los usuarios:

Navegador Motor CSS 1 CSS 2.1 CSS 3

Google Chrome WebKit

Completo desde la versin 85 del motor

Completo Todos los selectores, pseudo-clases y muchas propiedades

Internet Explorer Trident

Completo desde la versin 7.0 del navegador

Completo

Todos los selectores, pseudo-clases y muchas propiedades a partir de la versin 10.0 del navegador

Firefox Gecko Completo desde la versin 1.0 del navegador


Safari WebKit Completo desde la versin 85 del motor


Opera Presto Completo desde la versin 1.0 del navegador


Tabla 1 - Soporte de los navegadores web ms usados actualmente para CSS

Como se puede observar, los navegadores Firefox, Chrome, Safari y Opera son los ms avanzados en el soporte de CSS.

15


CSS define una serie de trminos que permiten describir cada una de las partes que componen los estilos CSS. El siguiente esquema muestra las partes que forman un estilo CSS muy bsico:

Ilustracin 1 - Componentes de un estilo CSS bsico

Los diferentes trminos se definen a continuacin:

Regla: cada uno de los estilos que componen una hoja de estilos CSS. Cada regla est compuesta de una parte de "selectores", un smbolo de "llave de apertura" ({), otra parte denominada "declaracin" y por ltimo, un smbolo de "llave de cierre" (}). Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS. Declaracin: especifica los estilos que se aplican a los elementos. Est compuesta por una o ms propiedades CSS. Propiedad: caracterstica que se modifica en el elemento seleccionado, como por ejemplo su tamao de letra, su color de fondo, etc. Valor: establece el nuevo valor de la caracterstica modificada en el elemento.

Un archivo CSS puede contener un nmero ilimitado de reglas CSS, cada regla se puede aplicar a varios selectores diferentes y cada declaracin puede incluir tantos pares propiedad/valor como se desee.

16


3.2.1 Bootstrap

Hoy en da se habla mucho acerca del Responsive design. El Responsive design hace referencia al diseo que se realiza de una web mediante CSS el cual es capaz de adaptarse a todo tipo de dispositivos o resoluciones de pantalla. Bootstrap es una herramienta que proporciona de forma gratuita una librera de CSS para que directamente se aada en los proyectos web y se haga uso de las diferentes clases que tiene definidas en el cdigo, un framework CSS especializado en diseos web para dispositivos mviles. Aunque algo compleja para usuarios recientemente iniciados en la programacin de CSS, adems de un enorme mundo de posibilidades en cuanto al formato se refiere, posee un potente sistema de grids o columnas. Dicho sistema divide la pantalla en doce partes, y las posibilidades de tamao de pantalla en cuatro rangos de resoluciones, y de esta forma, si a cada elemento web de la aplicacin se le asignan cuntas partes de esas doce partes se quiere que ocupe en cada uno de los posibles rangos de resoluciones, se podr modelar a la perfeccin la forma en que la aplicacin web se visualiza aunque tenga una considerable carga de trabajo.

17


3.3 JAVACRIPT JavaScript [10] es un lenguaje de programacin interpretado, dialecto del estndar ECMAScript. Se define como orientado a objetos, basado en prototipos, imperativo, dbilmente tipado y dinmico. Se utiliza principalmente en su forma del lado del cliente, implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y pginas web dinmicas. Se dise con una sintaxis similar al C, aunque adopta nombres y convenciones del lenguaje de programacin Java. Sin embargo Java y JavaScript no estn relacionados y tienen semnticas y propsitos diferentes. Todos los navegadores modernos interpretan el cdigo JavaScript integrado en las pginas web. Para interactuar con una pgina web se provee al lenguaje JavaScript de una implementacin del Document Object Model (DOM). Tradicionalmente se vena utilizando en pginas web HTML para realizar operaciones y nicamente en el marco de la aplicacin cliente, sin acceso a funciones del servidor, pero poco a poco est adquiriendo ms responsabilidades.

3.3.1 Uso en pginas web El uso ms comn de JavaScript es escribir funciones embebidas o incluidas en pginas HTML y que interactan con el Document Object Model (DOM o Modelo de Objetos del Documento) de la pgina. Algunos ejemplos sencillos de este uso son:

- Cargar nuevo contenido para la pgina o enviar datos al servidor a travs de AJAX sin necesidad de recargar la pgina (por ejemplo, una red social puede permitir al usuario enviar actualizaciones de estado sin salir de la pgina).

- Animacin de los elementos de pgina, hacerlos desaparecer, cambiar su tamao, moverlos, etc.

- Contenido interactivo, por ejemplo, juegos y reproduccin de audio y vdeo.

- Validacin de los valores de entrada de un formulario web para asegurarse de que son aceptables antes de ser enviado al servidor.

18


- Transmisin de informacin sobre los hbitos de lectura de los usuarios y

las actividades de navegacin a varios sitios web. Las pginas Web con frecuencia lo hacen para hacer anlisis web, seguimiento de anuncios, la personalizacin o para otros fines.

Dado que el cdigo JavaScript puede ejecutarse localmente en el navegador del usuario (en lugar de en un servidor remoto), el navegador puede responder a las acciones del usuario con rapidez, haciendo una aplicacin ms sensible. Por otra parte, el cdigo JavaScript puede detectar acciones de los usuarios que HTML por s sola no puede, como pulsaciones de teclado. Las aplicaciones como Gmail se aprovechan de esto: la mayor parte de la lgica de la interfaz de usuario est escrita en JavaScript, enviando peticiones al servidor (por ejemplo, el contenido de un mensaje de correo electrnico). La tendencia cada vez mayor por el uso de la programacin Ajax explota de manera similar esta tcnica. Un motor de JavaScript (tambin conocido como intrprete de JavaScript o implementacin JavaScript) es un intrprete que interpreta el cdigo fuente de JavaScript y ejecuta la secuencia de comandos en consecuencia. El primer motor de JavaScript fue creado por Brendan Eich en Netscape Communications Corporation, para el navegador web Netscape Navigator. El motor, denominado SpiderMonkey, est implementado en C. Desde entonces, ha sido actualizado (en JavaScript 1.5) para cumplir con el ECMA-262 edicin 3. El motor Rhino, creado principalmente por Norris Boyd (antes de Netscape, ahora en Google) es una implementacin de JavaScript en Java. Rhino, como SpiderMonkey, es compatible con el ECMA-262 edicin 3. Un navegador web es, con mucho, el entorno de acogida ms comn para JavaScript. Los navegadores web suelen crear objetos no nativos, dependientes del entorno de ejecucin, para representar el Document Object Model (DOM) en JavaScript. El servidor web es otro entorno comn de servicios. Un servidor web JavaScript suele exponer sus propios objetos para representar objetos de peticin y respuesta HTTP, que un programa JavaScript podra entonces interrogar y manipular para generar dinmicamente pginas web. Debido a que JavaScript es el nico lenguaje por el que los ms populares navegadores comparten su apoyo, se ha convertido en un lenguaje al que muchos frameworks en otros lenguajes compilan, a pesar de que JavaScript no fue diseado para tales propsitos. A pesar de las limitaciones de rendimiento inherentes a su naturaleza dinmica, el aumento de la velocidad de los motores

19


de JavaScript ha hecho de este lenguaje un entorno para la compilacin sorprendentemente factible.

3.3.2 Dnde puedo ver funcionando Javascript? Entre los diferentes servicios que se encuentran realizados con Javascript en Internet se encuentran:

- Correo - Chat - Buscadores de Informacin

Tambin se pueden encontrar o crear cdigos para insertarlos en las pginas como:

- Reloj - Contadores de visitas - Fechas - Calculadoras - Validadores de formularios - Detectores de navegadores e idiomas

20


3.4 ANGULARJS

AngularJS [1][2] es una tecnologa del lado del cliente, un framework JavaScript opensource desarrollado por Google utilizado principalmente para crear aplicaciones web de una sola pgina; funciona con las tecnologas web ms asentadas a lo largo del tiempo (HTML, CSS y JavaScript) para hacer el desarrollo de aplicaciones web ms fcil y rpido que nunca. El cdigo fuente de Angular est disponible gratuitamente en Github bajo la licencia MIT. Esto significa que cualquier persona puede contribuir y ayudar en su desarrollo. Angular permite construir aplicaciones web modernas e interactivas mediante el aumento del nivel de abstraccin entre el desarrollador y las tareas de desarrollo de aplicaciones web ms comunes. Extendiendo el tradicional HTML con etiquetas propias (directivas), se podra decir que utiliza el patrn MVC (Model-View-Controller), aunque ellos mismos lo definen como un MVW (Model-View-Whatever (whatever works for you)). Adems, Angular es compatible con todos los navegadores de ltima generacin (Chrome, Firefox, Safari, Opera, Webkits, IE9+) y se puede hacer compatible para Internet Explorer 8 o anterior mediante varios hacks. Tambin se encarga de las funciones avanzadas a las cuales los usuarios se han acostumbrado a tener en aplicaciones web modernas, tales como:

Separacin de la lgica de la aplicacin, los modelos de datos y las vistas Servicios de Ajax Inyeccin de Dependencias Historial del navegador (botones atrs / adelante para la navegacin en la

aplicacin) Testing Etc

21


En este ejemplo se pueden apreciar elementos nuevos como ng-app, ng-model y el nombre de una variable rodeada de dobles corchetes. Las dos primeras son lo que en Angular se llaman directivas, y la tercera es el modo de mostrar el valor de una variable del $Scope (algo as como el contexto de la aplicacin) en pantalla, como si de un template se tratara.

Esto es lo que ests escribiendo: {{miTexto}}

3.4.1 Data Binding en AngularJS Angular crea plantillas que se actualizan en todo momento, dando lugar a vistas dinmicas. Los componentes individuales de las vistas son dinmicamente actualizados en vivo. Esta caracterstica de interpolacin es sin duda uno de las caractersticas ms importantes de Angular. Esta caracterstica funciona con solo incluir Angular.js en el HTML y establecer la ng app como atributo en un elemento en el DOM. El atributo ng app declara que todo dentro de la misma pertenece a esta aplicacin Angular; de esta forma se puede anidar una aplicacin Angular dentro de una aplicacin web. Hello {{name}}

3.4.2 Modulos La API module de Angular permite declarar un mdulo usando el mtodo Angular.module(). Cuando se declara un mdulo, se necesitarn pasar dos parmetros al mtodo; el primero es el nombre del mdulo que se quiere crear, y el segundo es una lista de dependencias.

Angular.module('myApp', []); Cuando se escriben aplicaciones extensas, se crearn bastantes mdulos para hacer funcionar la lgica de la aplicacin. Esta manera de llevar a cabo cada

22


funcionalidad por medio de un mdulo distinto, proporciona la ventaja de aislar bloques funcionales para testear.

3.4.3 Scopes Los Scopes son un ncleo fundamental de cualquier aplicacin de Angular. Se utilizan en todo el framework, por lo que es importante conocerlos y saber cmo funcionan. El objeto $Scope es donde se define la funcionabilidad de la aplicacin, los mtodos en los controladores, y las propiedades en las vistas. Los Scope sirven de nexo de unin entre el controlador y la vista. Justo antes de que la aplicacin represente la vista para ser visualizada por el usuario, sta se une al Scope, y la aplicacin configura el DOM. Debido a esta unin en directo, se puede confiar en la modificacin del $Scope cuando la vista cambia, y de igual forma se puede confiar en la actualizacin de la vista cuando el $Scope sufre un cambio. Por lo tanto, en los scopes se guarda la informacin de los modelos que se representan en la vista y tambin atributos que se utilizan para manejar la lgica de la misma. Los scopes se manejan principalmente desde los controladores y desde las directivas. Cuando Angular arranca y genera una vista, crear la unin entre la directiva ng-app que se encuentra en el elemento del DOM que engloba la app, y el $rootScope. Este Scope, es una especie de padre de todos los $Scope de la aplicacin, ser lo ms parecido que tiene Angular a una variable global, en este caso, un contexto global, existiendo en toda la aplicacin, y pudiendo ser visualizado en cualquier vista.

3.4.4 Controladores Es el cdigo con la lgica que comunica el modelo con la vista. Los controladores son los encargados de inicializar y modificar la informacin que contienen los Scopes en funcin de las necesidades de la aplicacin. Cuando se crea un nuevo controlador en una pgina, Angular le une un nuevo Scope, por lo que solo se tendr que realizar la funcin del constructor.

23


Para crear acciones personalizadas que se puedan llamar desde las vistas, se puede crear funciones en el $Scope del controlador. Angular permite llamar a funciones del $Scope como si se estuviese referenciando una variable de datos. Para unir un link o un botn a estas acciones que se han creado, se har uso de una directiva denominada ng-click; esta directiva une el evento click del ratn (en su flanco ascendente), al method handler, el cual llama al mtodo especificado en el link, cuyo cdigo se encuentra en los controladores.

Ilustracin 2 - Interaccin entre el Controlador, la vista y el Scope en AngularJS

3.4.5 Directivas Las directivas son el plato fuerte de Angular. Mediante el uso de las mismas se podr extender la sintaxis de HTML y darle el comportamiento que se desee. Se pueden crear directivas a nivel de elemento, de atributo, de clase y de comentario. Un ejemplo sera el siguiente, mediante la directiva focusable (una directiva a nivel de atributo) pudiendo modificar el comportamiento de los elementos input. En este caso cada vez que el input obtiene o pierde el foco cambia su color de fondo.

24


Una de las cosas ms interesantes de las directivas es la posibilidad de declararlas a nivel de elemento, lo que permite crear nuevas etiquetas de HTML que facilitan la creacin de componentes reutilizables. Por ejemplo, una nueva etiqueta HTML llamada Hello que ser reemplazada por un botn que al hacer clic sobre l mostrar una alerta.

Se podra distinguir entre dos tipos de directivas, las que incluye Angular, y las de creacin propia. Las primeras, ya incluidas en Angular, algunas sustituyen elementos del HTML como las etiquetas y , mejorando su funcionabilidad, como por ejemplo el comportamiento de ante validaciones. Otras, inconfundibles debido a su prefijo ng-, como por ejemplo ng-href, tambin son de gran utilidad. sta por ejemplo, no dispondr del link disponible para el usuario hasta que la expresin que se ha puesto en ella sea evaluada y retorne un valor. Por ltimo, otras no sustituirn o tendrn que ver con partes del HTML, como por ejemplo ng-controller; esta directiva puede usarse como atributo en cualquier etiqueta del HTML, para definir que en ella y todas las etiquetas anidadas, la aplicacin trabajar con el controlador que se haya puesto en dicha directiva. En cuanto a las directivas de creacin propia, se definen usando el mtodo directive() en uno de los mdulos de Angular.

Angular.application('myApp', []) .directive('myDirective', function() { // A directive definition object return { // directive definition is defined via options // which we'll override here };

25


});

Como se puede observar en el ejemplo, el mtodo directive() tiene dos argumentos:

name (string) El nombre de la directiva, un string.

factory_function (function) La funcin que retornar un objeto que definir el comportamiento de la directiva.

Tambin se podr retornar una funcin en lugar de un objeto, pero ser mejor prctica retornar un objeto. Cuando Angular arranca la aplicacin, registrar los objetos que retornan como el nombre que se ha insertado en el primer argumento como string, por tanto el compilador de Angular buscar por el DOM elementos, atributos, comentarios o clases que usen el nombre de la directiva. Si encontrase alguno, utilizar la definicin de la directiva para sustituir dicho elemento en el DOM.

Es buena prctica comenzar las directivas con my- para no tener ninguna coincidencia con las tags de html.

3.4.6 Directivas y Scopes Las directivas, las cuales se usan frecuentemente a lo largo del desarrollo de la aplicacin, no crean $Scopes propios generalmente, pero hay casos en los que lo hacen. Por ejemplo, la directiva ng-controller o ng-repeat crean su propio Scope y lo unen al elemento del DOM correspondiente.

3.4.7 Filtros Los filtros permiten modificar el modo en el que se va a presentar la informacin al usuario. Angular cuenta con una gran cantidad de filtros ya creados para su uso directamente y una facilidad increble para crear filtros propios.

26


La utilizacin de los mismos es similar a los Pipeline de Unix:

{{ expresion | filtro }} Donde expresin puede ser cualquier tipo de expresin de Angular, como una variable del $Scope, y filtro el nombre del filtro que se quiera aplicar a la expresin. En el siguiente ejemplo se hace uso de un filtro llamado uppercase, el cual transforma todo el texto recibido de la expresin en maysculas.

{{ name | uppercase }} Tambin se puede hacer uso de filtros desde Javascript con el servicio $filter; por ejemplo si se quiere hacer uso del filtro para transformar todo el texto en minsculas:

myApp.controller('DemoController', ['$scope', '$filter', function($scope, $filter) { $scope.name = $filter('lowercase')('Ari');

}]);

Se puede pasar un argumento o varios al filtro en el HTML, aadiendo dos puntos despus de cada argumento. Por ejemplo, el filtro number permite limitar el nmero de decimales que un nmero muestra:

{{ 123.456789 | number:2 }}

Tambin se podrn usar dos o ms filtros a la misma vez aadiendo ms pipes. Angular trae varios filtros para monedas, fecha, hora, bsquedas, formato del texto, JSON, ordenar

3.4.7.1 Crear filtros propios: Para crear un filtro, la mejor prctica es crear un mdulo propio para ello e incluirlo en la aplicacin. Se va a crear un filtro que haga mayscula la primera letra de un string.

27


Angular.module('myApp.filters', []).filter('capitalize', function() { return function(input) { // input ser el string que se pasa a la funcin if (input)

return input[0].toUpperCase() + input.slice(1); }

});

Si se quisiese hacer mayscula la primera letra de una frase, se puede primero convertir todo el string a minsculas y aplicar el nuevo filtro:

{{ 'JAVIER VIVE EN EL EXTRANJERO' | lowercase | capitalize }}

3.4.8 Services Los services son los encargados de comunicarse con el servidor para enviar y obtener informacin que despus ser tratada por los controllers para mostrarla en las vistas. Hasta este momento, solo se ha mostrado cmo la vista se relaciona al $scope y como los controladores manejan los datos. Por motivos de rendimiento, los controladores son iniciados solo cuando se les necesita y el resto del tiempo son finalizados. Debido a esto, cada vez que se cambia de ruta o se recarga una vista, el controlador que est trabajando se limpia. Con el fin de mantener datos permanentemente durante todo el ciclo de vida de la aplicacin, como por ejemplo los datos de un usuario que inicia sesin, Angular hace uso de los servicios. Son iniciados solo una vez por aplicacin (por $injector), y son lazyloaded (solo se crean cuando se les necesita). $http, es un ejemplo de un servicio de Angular. Provee acceso a bajo nivel al objeto XMLHttpReqest del navegador, en vez de ensuciar la aplicacin con

28


llamadas continuas al objeto XMLHttpRequest, se podr simplemente interactuar con la API $http.

// Ejemplo de un servicio que mantiene al usuario durante el tiempo de vida de la aplicacin Angular.module('myApp', []).factory('UserService', function($http) {

var current_user; return {

getCurrentUser: function() { return current_user;

}, setCurrentUser: function(user) {

current_user = user; }

} }); Angular viene con muchos servicios con los que se suele interactuar constantemente a lo largo de una aplicacin, adems, es muy fcil crear servicios propios como se ha visto en el ejemplo. Una vez creado, se podr referenciar y cargar como dependencia en todo el resto de la aplicacin para tener acceso a los datos del mismo.

3.4.8.1 Como usar un servicio Para usar un servicio, es necesario identificarlo como una dependencia en el componente donde se va a usar, bien sea un controlador, una directiva, un filtro u otro servicio. En el momento de correr la aplicacin, Angular se har cargo de iniciarlo y resolver las dependencias como normalmente. Para inyectar el servicio en el controlador, se pasa el nombre como un argumento en la funcin del controlador. Con la dependencia en el controlador, se podr ejecutar cualquiera de los mtodos que se han definido en el servicio.

29


Angular.module('myApp', ['myApp.services']) .controller('ServiceController',function($scope, githubService) {

$scope.events = githubService.events('auser'); });

3.4.8.2 Opciones al crear servicios Aunque el mtodo ms comn a la hora de crear servicios en la aplicacin de Angular ser a travs del mtodo factory(), hay otras APIs de las cuales se puede hacer uso en ciertas situaciones y de esta manera, escribir menos cdigo. Hay cinco mtodos diferentes a la hora de crear servicios:

factory() service() constant() value() provider()

3.4.8.2.1 factory() Como se ha visto, este mtodo es una manera rpida de crear y configurar un servicio. Necesita dos argumentos, name(string), el cual contiene el nombre del servicio que se quiere registrar, y getFn (function), la cual es iniciada cuando Angular crea el servicio.

3.4.8.2.2 service() Si se quiere registrar el servicio desde un constructor, se podr usar service(), ya que permite registrar una funcin constructora para el servicio. Recibe tambin dos argumentos, name(string), con el nombre del servicio, y constructor(function), donde se llama a la funcin para iniciar el servicio.

3.4.8.2.3 Provider() Todos los servicios se crean a travs del servicio $provide, los cuales son todos objetos con un mtodo $get(). El $injector llama al mtodo $get para crear el servicio. La base de todos los mtodos para crear un servicio es el provider(),

30


responsable de registrar servicios en la $providerCache. Tcnicamente, la funcin factory() es un mtodo rpido de crear un servicio a travs de provider(), donde se asume que el mtodo $get() es la funcin que se pasa. Los dos mtodos son funcionalmente equivalentes y crearn el mismo servicio.

3.4.8.2.4 constant() Es posible registrar un valor existente como un servicio, el cual se podr inyectar posteriormente en otras partes de la aplicacin como un servicio. Por ejemplo, en el caso de que se quiera guardar una Key para un servicio del back-end; se podr almacenar como un valor constarte usando constant(). Necesitar dos argumentos, name(string) como anteriormente se ha mencionado, en este caso para le nombre de la constante, y un value(constant value), donde se pasa el valor con el que se registra la constante.

3.4.8.2.5 value() Si el valor que retorna el mtodo $get en el servicio es una constante, no se necesita definir el servicio con un mtodo ms complejo; se puede simplemente usar la funcin value() para registrar el servicio. Esta funcin tambin aceptar dos mtodos, name(string) y value(value) al igual que constant().

3.4.8.2.6 Value o constant La mayor diferencia entre estos mtodos es que puedes inyectar una constante en una funcin de configuracin, mientras que no puedes inyectar un value. Sin embargo, con constant no se podr registrar objetos en el servicio o funciones como en value. Bsicamente, se usar value() para registrar un objeto o funcin como servicio, mientras que se har uso de constant para los datos de configuracin.

3.4.9 Eventos As como el navegador responde a ciertos eventos, como el click del ratn o el desplazamiento vertical, la aplicacin de Angular responde a eventos de Angular. Esto permite comunicar ciertos elementos de la aplicacin que no estn diseados para trabajar juntos.

31


Ya que el sistema de eventos de Angular no se comparte con el del navegador, solo se podrn recibir eventos de Angular, no del DOM.

3.4.10 Promesas Una promesa es un mtodo para resolver el valor de una variable de forma asncrona. Las promesas son objetos que representan el valor de retorno o la excepcin que retorna finalmente una funcin; son de gran utilidad cuando se trata con objetos remotos. Se podra ver desde el punto de vista de que fuesen la proxy de estos objetos remotos. Tradicionalmente, Javascript hace uso de las llamadas callbacks, pero no solo dificultan el debugging, si no que con las promesas, se podrn tratar con los datos de manera que ya hayan sido retornados, sin tener que depender de que el callback se dispare. Adems de no disponer de una garanta a la hora de esperar la llamada. Las promesas retornan un objeto:

User.get(fromId) .then(function(user) {

return user.friends.find(toId); }, function(err) {

// No existe el usuario }) .then(function(friend) {

return user.sendMessage(friend, message); }, function(err) {

// El amigo del usuario devuelve error }) .then(function(success) {

// El mensaje se envi al usuario }, function(err) {

// Ocurri un error }); Este cdigo no slo es mucho ms comprensivo, sino que es ms fcil de escribir que el de las callbacks. Adems se garantiza el retorno de un solo valor, en lugar de tener que tratar con la interfaz de los callbacks.

32


Salir del callback hell es solo uno de los motivos por los que usar promesas. Realmente, el uso de promesas asegura poder hacer parecer funciones asncronas a sncronas; pudiendo as obtener los valores de retorno y excepciones esperados.

3.4.11 Multiple Views and Routing Un una aplicacin de una sola pgina, navegar de una vista a otra es algo muy importante. Cuando la aplicacin va creciendo y al a vez hacindose ms compleja, se necesitar una manera de manejar las vistas que el usuario ver conforme navega por la aplicacin. Se pueden manejar este tipo de aplicaciones incluyendo plantillas de cdigo, pero esto no solo har el cdigo tedioso e inmanejable a largo plazo, si no que limitar la manera en que otros desarrolladores se unen al proyecto. En vez de incluir plantillas de cdigo en cada vista, se pueden incluir las vistas en un layout, e ir cambiando las vistas dentro de dicho layout(con la directiva ng-include) en base a la URL que acceda el usuario. Angular permite hacer esto declarando rutas en el $routeProvider, mediante el cual se puede hacer uso del historial del navegador y permitir al usuario marcar e incluso compartir vistas especficas usando las URLs de acceso a las mismas. Se necesitar referenciar Angular-route en el HTML tras referenciar a Angular.

La directiva ng-view en cuyo elemento del DOM se crearn las vistas dentro del HTML, sigue los siguientes pasos:

En cualquier momento que el evento $routeChangeSuccess se dispare, la vista se actualizar en el elemento del DOM en el que se encuentre la directiva ng-view.

Si hay alguna vista asociada a la actual ruta:

- Crea un nuevo Scope

33


- Elimina la ltima vista, limpiando el anterior Scope - Une el nuevo Scope y la nueva vista - Une el controlador al Scope, si hay alguno especificado para dicha ruta - Dispara el evento $viewContentLoaded

Para crear rutas en un mdulo especfico de la aplicacin, usando la funcin de configuracin config, y con el mtodo when, el cual tendr dos parmetros (url y la ruta de la vista), se podr hacer el mapa de rutas:

Angular.module('myApp', []). config(['$routeProvider', function($routeProvider) { $routeProvider .when('/', {

templateUrl: 'views/home.html', controller: 'HomeController'

}) .when('/login', {

templateUrl: 'views/login.html', controller: 'LoginController'

}) .when('/dashboard', {

templateUrl: 'views/dashboard.html', controller: 'DashboardController',

resolve: { user: function(SessionService) { return SessionService.getCurrentUser();

} } }) .otherwise({

redirectTo: '/' }); }]);

34


3.5 FIREBASE

Firebase se presenta como una poderosa API para almacenar y sincronizar datos en tiempo real, una base de datos de tipo NoSQL. Pero Firebase es un servicio diferente a una simple base de datos NoSQL, un servicio dirigido tanto a aplicaciones web como aplicaciones mviles, el cual permite realizar, adems del almacenamiento de datos, una sincronizacin en directo de los mismos en cada uno de los dispositivos que se encuentran conectados a la aplicacin. Adems, permite el funcionamiento offline y una posterior sincronizacin de los datos cuando el dispositivo vuelve a tener conexin a internet. Adems, cuenta con libreras para la mayora de las plataformas web y mviles, y bindings para la mayora de frameworks, entre los que se encuentra Angular, haciendo de Firebase un candidato ideal para este proyecto. En cuanto a la seguridad de los datos, Firebase requiere encriptado SSL 2048-bit para toda la transferencia de datos.

3.5.1 Bases de datos NoSQL Cuando se habla de bases de datos NoSQL [23][24], se incluye un variado rango de tecnologas, las cuales han sido desarrolladas para responder a la alta demanda de almacenamiento de informacin de usuarios, objetos y productos; as como la frecuencia en que estos datos son accedidos, dando stas un mejor resultado en cuanto al rendimiento requerido. Las bases de datos relacionales, sin embargo, no fueron diseadas para la alta demanda que requiere una aplicacin moderna, ya que su rendimiento es peor en trminos de precio de almacenamiento y poder de procesamiento del servidor. En una base de datos NoSQL, se puede decir que todo es ms flexible, ya que al contrario que las bases de datos SQL no se tiene que declarar todo el esquema de tablas antes de insertar los datos.

35


La clave a la hora de disear modelos de datos en estas bases de datos, se basa en la estructura de los documentos y en cmo la aplicacin representa las relaciones de los datos.

3.5.1.1 Tipos de bases de datos NoSQL Por un lado estn las bases de datos basadas en documentos, que consisten en keys con una compleja estructura de datos asociada. Por otro lado las bases de datos de almacenamiento de graphs, las cuales son utilizadas para almacenar informacin sobre redes, como Neo4J o HyperGraphDB. Adems, se deben tener en cuenta las del tipo key-value, las ms simples, en las que cada objeto que se almacena en ellas se almacenar como un key junto a un valor. Un ejemplo de estas bases de datos es Riak o Voldemort. Por ltimo, se encuentran las bases de datos como Cassandra o HBase, optimizadas para responder ante peticiones en grandes cantidades de datos, almacenados en forma de columnas de datos.

3.5.1.2 Comparativa bases de datos SQL y NoSQL

SQL DATABASES NOSQL DATABASES

Types One type (SQL database) with minor variations

Many different types including key-value stores,document databases, wide-column stores, and graph databases

Examples MySQL, Postgres, Oracle Database MongoDB, Cassandra, HBase, Neo4j

Data Storage Model

Individual records (e.g., "employees") are stored as rows in tables, with each column storing a specific piece of data about that record (e.g., "manager," "date hired," etc.), much like a spreadsheet. Separate data types are stored in separate tables, and then

Varies based on database type. For example, key-value stores function similarly to SQL databases, but have only two columns ("key" and "value"), with more complex information sometimes stored within the "value" columns. Document databases do away with the table-and-row model altogether, storing all relevant data

36
http://www.mongodb.com/document-database


3.5.2 Crear una cuenta La primera cosa que necesitas hacer para comenzar a usar Firebase es crear una cuenta gratuita; una URL se asignar a tu base de datos con la direccin nombreDeCuenta.firebaseio.com.

joined together when more complex queries are executed.

together in single "document" in JSON, XML, or another format.

Schemas

Structure and data types are fixed in advance. To store information about a new data item, the entire database must be altered, during which time the database must be taken offline.

Typically dynamic. Records can add new information on the fly, and unlike SQL table rows, dissimilar data can be stored together as necessary. For some databases (e.g., wide-column stores), it is somewhat more challenging to add new fields dynamically.

Scaling

Vertically, meaning a single server must be made increasingly powerful in order to deal with increased demand. It is possible to spread SQL databases over many servers, but significant additional requirements.

Horizontally, meaning that to add capacity, a database administrator can simply add more commodity servers or cloud instances. The database automatically spreads data across servers as necessary

Development Model

Mix of open-source (e.g., Postgres, MySQL) and closed source (e.g., Oracle Database)

Open-source

Data Manipulation

Specific language using Select, Insert, and Update statements. Through object-oriented APIs

Consistency Can be configured for strong consistency

Depends on product. Some provide strong consistency (e.g., MongoDB) whereas others offer eventual consistency (e.g., Cassandra)

Tabla 2 - Comparativa bases de datos SQL y NoSQL

37


Esta URL es la que se usar para almacenar y sincronizar datos. Tambin se podr acceder a dicha URL para ver la base de datos va web y poder configurar algunas opciones de seguridad y login.

3.5.3 Instalar Firebase Para incluir la librera de Firebase en la aplicacin web, habr que aadir una etiqueta de script en la seccin del HTML. Es recomendable usar el propio CDN de Firebase de la siguiente manera:

3.5.4 Leer y escribir desde Firebase Para leer y escribir datos desde Firebase, lo primero que habr que hacer es crear una referencia. Para crearla, habr que pasar la URL de firebase como argumento en el constructor de Firebase:

var myFirebaseRef = new Firebase("https://.firebaseio.com/");

3.5.4.1 Escribiendo datos Una vez que se ha creado una variable con la referencia, se podr escribir cualquier objeto con la nomenclatura JSON en la base de datos usando la instruccin set().

myFirebaseRef.set({ title: "Hello World!", author: "Firebase", location: {

city: "San Francisco", state: "California", zip: 94103

} }); Con la API especfica para Angular que se ver a continuacin, ser algo diferente la manera en que se escriben los datos; una forma optimizada para Angular con muchas ventajas.

38


3.5.4.2 Leyendo datos Leer datos desde la base de datos consistir en realizar llamadas y resolver los eventos consecuentes. De igual forma que para escribir, se har uso de la referencia creada; si por ejemplo se quisiera obtener el valor de city en la escritura anterior, haciendo uso del mtodo on(), se hara de la siguiente manera:

myFirebaseRef.child("location/city").on("value", function(snapshot) { alert(snapshot.val()); //La alerta contendr "San Francisco"

}); Con la API especfica para Angular que se ver a continuacin, ser algo diferente la manera en que se escriben los datos; una forma optimizada para Angular con muchas ventajas.

3.5.5 Aadiendo autenticacin Una de las grandes ventajas de Firebase es la facilidad con que se pueden manejar la autenticacin de usuarios. Firebase brinda diversas opciones de login como son los tradicionales usuario y contrasea, la posibilidad de realizar el login con una cuenta de Facebook o Twitter, etc Ms adelante se ver el servicio SimpleLogin de Firebase para realizar el login en una aplicacin web con usuario y contrasea. Esta es la forma que se usar para la aplicacin web de este proyecto.

3.5.6 Seguridad en Firebase En cuanto al control de acceso a los datos de la base de datos, se podrn establecer reglas de seguridad para los usuarios; por ejemplo permitir lectura a todos los usuarios, pero la escritura solo al admin:

{

".read": true, ".write": "auth.id === 'admin'"

}

39


3.5.7 Bindings Firebase cuenta con APIs especficas para AngularJS, Backbone, Ember y ReactJS, haciendo ms fcil y mejorando el uso de Firebase en estos frameworks. Por supuesto se har uso de la API para Angular, la cual se expondr a continuacin.

3.5.8 FirebaseSimpleLogin Con este servicio de Firebase, se puede realizar un servicio de registro y autenticacin de usuarios muy completo y sencillo en la aplicacin mediante el uso del tradicional login con usuario/contrasea. Lo nico que se debe hacer antes de proceder a hacer uso de todos los mtodos es activar en la base de datos el uso de login mediante password provider.

3.5.8.1 Mtodos new FirebaseSimpleLogin() Crea un nuevo objeto de login para una referencia de Firebase dada.

new FirebaseSimpleLogin(ref, callback, [context]) login() Realiza el login del usuario para el proveedor especificado (Usuario-contrasea, Facebook, Twitter)

login(provider, [options]) logout() Realiza el logout del usuario.

logout() createUser() Con este mtodo se crear una nueva cuenta para la direccin email especificada. Es importante tener en cuenta que esta funcin NO realizar el login del usuario posteriormente de su creacin; si se quisiese hacer funcionar de esa forma la aplicacin, se deber llamar posteriormente a la funcin de login() una vez el usuario haya sido creado.

40
https://www.firebase.com/docs/web/api/firebasesimplelogin/constructor.htmlhttps://www.firebase.com/docs/web/api/firebasesimplelogin/login.htmlhttps://www.firebase.com/docs/web/api/firebasesimplelogin/logout.htmlhttps://www.firebase.com/docs/web/api/firebasesimplelogin/createuser.html


createUser(email, password, [callback]) changePassword() Este mtodo sirve para cambiar la contrasea del usuario cuyo email se especifica como argumento.

changePassword(email, oldPassword, newPassword, [callback]) sendPasswordResetEmail() Este mtodo enva un email al usuario especificado para realizar el reset de la contrasea de su cuenta. Dicho email contendr una contrasea temporal que el usuario deber usar para autenticarse en la aplicacin y una vez dentro poder cambiar la contrasea.

sendPasswordResetEmail(email, [callback]) removeUser() Por ltimo, este mtodo se utilizar a la hora de eliminar una cuenta.

removeUser(email, password, [callback]) Si se quisiese hacer el login por medio de Facebook, para que los usuarios pudiesen entrar en la aplicacin con su cuenta de Facebook, simplemente se debe activar en la base de datos el sistema de login por Facebook; a continuacin, se debe crear una aplicacin de Facebook, y en la configuracin de la misma, en la seccin de seguridad, habr que aadir la URL: https://auth.firebase.com/v2//auth/facebook/callback En el apartado Valid OAuth redirect URIs y guardar los cambios. A continuacin, habr que introducir los credenciales de la aplicacin App ID y App Secret en la configuracin del login por mtodo Facebook de Firebase. Una vez hecho esto, simplemente se deben usar los mtodos correspondientes para realizar el login de los usuarios en la app por medio de Facebook.

3.5.9 FireBase y AngularJS: AngularFire Citando el texto de la propia web de firebase:

ANGULARFIRE IS THE OFFICIALLY SUPPORTED ANGULARJS BINDING FOR FIREBASE. THE COMBINATION OF ANGULAR AND FIREBASE PROVIDES A THREE-WAY DATA BINDING BETWEEN HTML, JAVASCRIPT, AND YOUR FIREBASE BACKEND.

41
https://www.firebase.com/docs/web/api/firebasesimplelogin/changepassword.htmlhttps://www.firebase.com/docs/web/api/firebasesimplelogin/sendpasswordresetemail.htmlhttps://www.firebase.com/docs/web/api/firebasesimplelogin/removeuser.htmlhttps://auth.firebase.com/v2/%3cYOUR-FIREBASE%3e/auth/facebook/callback


Como se puede observar, AngularFire proporciona grandes ventajas para las aplicaciones realizadas con Angular

3.5.9.1 El papel de AngularFire AngularFire es una librera de cdigo abierto cuyo soporte corre a cuenta del equipo de Firebase y su comunidad de desarrolladores. Algo a tener en cuenta, es que no por usar Angular en la aplicacin, se tiene la obligacin de hacer uso de AngularFire.

3.5.9.2 Comenzando con AngularFire Tal y como se ha descrito en la seccin anterior, se debe aadir los CDN en la seccin , pero con la diferencia de que para hacer uso de AngularFire tambin se debe aadir su correspondiente librera:

Una vez se han instalado las libreras, se puede proceder a incluir AngularFire en la aplicacin de Angular, declarando firebase como dependencia en el modulo de la app:

var app = angular.module("sampleApp", ["firebase"]); Por ltimo, para finalizar la instalacin de AngularFire en la app se debe inyectar el servicio $firebase en los controladores o servicios en los cuales se va a hacer uso de Firebase:

app.controller("SampleController", function($scope, $firebase) { //Ya se puede usar $firebase para sincronizar datos entre los clientes y el servidor

var ref = new Firebase("https://.firebaseio.com/"); var sync = $firebase(ref);

});

3.5.9.3 Resumen de la API En la tabla se resumen las funciones ms comunes para hablar con la base de

42


datos en AngularFire. Aqu podrs encontrar una lista completa y detallada de los todas las funciones.

Tabla 3 - Funciones ms comunes de AngularFire

$id The key for each record (its path in Firebase as it would be returned

by ref.name())

$priority

The priority of each child node is stored here for reference. Changing this

value and then calling$save() on the record will also change the priority on

the server and move the record in the array.

$value

If the data in Firebase is a primitive (number, string, or

boolean), $asObject() will still return an object. The primitive value will

be stored under $value and can be changed and saved like any other child

node.

$save() Pushes local changes back to the Firebase server

$remove() Removes this object from the Firebase server

$loaded() Returns a promise which is resolved when the initial server data has been

downloaded.

$bindTo() Creates a 3-way data binding. Covered below under Three-Way data bindings

43
https://www.firebase.com/docs/web/libraries/angular/api.html%23firebaseobjecthttps://www.firebase.com/docs/web/guide/retrieving-data.html%23section-ordered-datahttps://www.firebase.com/docs/web/libraries/angular/guide.html%23section-three-way-bindings


3.5.9.4 3-way Data Bindings Trabajar con objetos implicar estar haciendo uso continuamente de $save() cada vez que se realiza un cambio a nivel local en la aplicacin y se quiera sincronizar en la base de datos. Para solventar dicho problema, AngularFire cuenta con el sistema three-way-data-binding; con esta herramienta se podrn sincronizar objetos de forma que cualquier cambio en ellos a nivel local en el DOM ser automticamente sincronizado a Angular y de Angular a Firebase. Inversamente cualquier cambio en el servidor ser realizado en Angular y en el DOM. Para hacer uso del sistema three-way-data-binding, simplemente se debe llamar a $bindTo() en el objeto que se quiera que permanezca sincronizado. De esta forma no se necesitar seguir haciendo uso de $save(), ya que este sistema mantendr el objeto sincronizado mediante el uso de $watch().

3.5.9.5 Sincronizar arrays con $asArray() Este sistema deber ser usado para cualquier lista de objetos con ids nicos que sea mostrada en la aplicacin y se quiera mantener sincronizada. Simplemente se crearn arrays sincronizados con el mtodo $asArray().

var messagesArray = sync.$asArray(); // place it in the scope for use in the DOM $scope.messages = messagesArray; Una vez realizada la sincronizacin, se podr usar el array de forma normal en la aplicacin:

{{message.user}}:

{{message.text}}

3.5.9.5.1 Summary of the API En esta tabla se muestran los mtodos ms comunes para trabajar con los arrays sincronizados. Aqu puedes encontrar una lista completa de todos los mtodos.

44
https://www.firebase.com/docs/web/libraries/angular/api.html%23firebasearray


$add(data) Creates a new record in the array. Should be

used in place of push() or splice()

$save(itemOrIndex) Saves an existing item in the array

$remove(itemOrIndex)

Removes an existing item from the array.

Should be used in place

of pop() orsplice()

$getRecord(key)

Given the Firebase key, returns the item from

the array. It is also possible to find the index

with $indexFor()

$loaded()

Returns a promise which resolves after the

initial records have been downloaded from

Firebase.

3.5.9.5.2 Modificando los Arrays sincronizados El contenido de stos arrays se encontrar sincronizado con el servidor remoto, y por tanto AngularFire controlar las operaciones de adicin, eliminacin y ordenacin de los elementos. Debido a esto, AngularFire utilizar los mtodos $add(), $remove() y $save() para modificar los elementos de estos arrays.

45

DESARROLLO DE UNA APLICACIN WEB CON ANGULARJS PARA COMPARTIR TRANSPORTE CASOS DE USO

4 CASOS DE USO A continuacin se exponen los diferentes casos de uso en los que consiste la aplicacin que se ha realizado mediante el uso de diagramas UML [9]. Un diagrama de funcionamiento de la aplicacin sera el siguiente:

Por tanto se tendrn ocho diferentes casos de uso: Registro, Inicio/Login, Mis coches, Nuevo Coche, Buscar coche, Coches seleccionados, Perfil y Logout.

Login / Registro

Nuevo coche

Buscar coche

Mis coches

Coches seleccionado

Perfil

Cliente

Logout

46


4.1 REGISTRO En el primer acceso del usuario a la aplicacin, se presenta el registro como la manera en que dicho usuario pretende conseguir acceso a la aplicacin. En una misma vista de la aplicacin, se contempla tanto el Login como el Registro, con la diferencia de que una vez el usuario inserte su correo y contrasea y haga click en registro, aparecern otros campos a rellenar en la misma vista, en los que el usuario deber seleccionar un nombre y un nmero de telfono as como repetir de nuevo la contrasea para asegurarse de que la ha escrito correctamente. Una vez presentado el formulario de registro, el usuario enva la informacin al servidor de la base de datos, pero antes de que esto se produzca, la aplicacin comprobar de forma local si ambas contraseas son iguales; si no lo son, arrojar un error explicando el motivo, pero si son iguales, se procede finalmente al envo de la informacin a la base de datos, la cual crear una nueva entrada en el listado privado de Firebase de usuarios registrados con email y contrasea, as como otra entrada en el listado de la aplicacin de usuarios donde incluir todos sus datos. Tras el registro, la aplicacin realizar el login automticamente del usuario recientemente registrado, accediendo al men principal de la aplicacin. Al realizar el login, la aplicacin carga en rootScope todos los datos del usuario desde un servicio; de esta forma, los datos del usuario que se ha autenticado se mantendrn todo el tiempo durante la aplicacin hasta que el usuario realice el logout.

:User :App.js :LoginController :Services.js :Firebase

Request /login

/login.html

createUser() loginService.createAccount()

loginObj.$createUser()

loginObj.$login ()

$location.path('/profile')

/user-

$Scope

47


4.2 LOGIN Los usuarios que ya se han registrado anteriormente, tendrn que autenticarse para acceder a la aplicacin. Para ello, se presenta el formulario anteriormente descrito, pero en este caso solo aparecern los campos login y contrasea. Una vez el usuario haya rellenado los datos y pulse el botn de login, la aplicacin comprobar en la base de datos si el usuario y contrasea introducidos son correctos, concediendo acceso al men principal de la aplicacin en caso de serlo, y en caso contrario, denegando el acceso y arrojando un mensaje de error dependiendo el tipo de fallo en login, bien sea por usuario inexistente, o por contrasea no vlida. Al realizar el login, la aplicacin carga en rootScope todos los datos del usuario desde un servicio; de esta forma, los datos del usuario que se ha autenticado en la aplicacin se mantendrn todo el tiempo durante la aplicacin hasta que el usuario realice el logout.

:User :App.js :LoginController :Services.js :Firebase

Request /login /login.html

login() loginService.login() loginObj.$login()

/user-profile.html $location.path('/profile')

$Scope

48


4.3 MIS COCHES El usuario podr seleccionar en el men principal la opcin de visualizar los coches que l mismo ha creado; al pulsar el botn correspondiente en el men Ver mis coches, la aplicacin cargar la vista correspondiente, en la cual su controlador buscar entre todos los coches de la base de datos aquellos en los que el usuario que se encuentra autenticado en la aplicacin sea el dueo, y los mostrar, as como los usuarios que se han interesado en cada uno de sus coches y sus nmeros de telfono correspondientes para poder contactar con ellos. En esta misma pgina, por motivos de comodidad, se mostrar la opcin de borrado de coche, la cual tras ser pulsado su botn correspondiente, proceder a la eliminacin de dicho coche en la base de datos, as como de la eliminacin de ese mismo coche como coche seleccionado en la base de datos en cada uno de los usuarios que haban mostrado inters por dicho coche.

:User :App.js :myCarsController :Firebase

Request /my-cars

/my-cars.html $Scope Cars owned by user?

userCars

removeCar() Remove interested passengers

Remove Car

49


4.4 NUEVO COCHE Cuando el usuario se dispone a crear un coche, tras pu

Tesis de Angular

Documents

Transcript of Tesis de Angular