Programación de Aplicaciones Distribuidas

Transcripción

1 Programación de Aplicaciones Distribuidas F AC U L T AD R E G I O N A L T U C U M ÁN Proyecto integrador Integración de AngularJS en aplicaciones web con Visual Studio 2013 Autor: Castro Lucas Martin - Leg: URL: /sh/bv3viovgl9v11fc/ AACzOuq4UvRG7mYHaocFA4KWa?dl=0

2 Tabla de contenido Introducción... 3 Que es AngularJS... 4 Ejemplo práctico: WebAppPresup... 5 Objetivo:... 5 Requisitos previos:... 6 Actividades:... 6 Crear la webapi - nuestro Backend... 6 Crear la Interfaz de usuario usando AngularJS nuestro frontend Página 2 de 18

3 Introducción El propósito de este documento es describir de manera clara y comprensible las funcionalidades y características básicas de tecnologías Frontend para el desarrollo web tales como AngularJs, todas ellas integradas en el entorno de desarrollo visual studio Para realizar el ejemplo práctico que acompaña el presente trabajo, se utilizo una arquitectura cliente-servidor. En la mencionada arquitectura, dos procesos o dos aplicaciones que se comunican entre sí para intercambiar información. De los dos procesos uno actúa como un proceso cliente y el otro proceso actúa como un proceso servidor. En las aplicaciones web tradicionales, el cliente (navegador) que por lo general hace una solicitud de página al servidor para inicia la comunicación. A continuación, el servidor procesa la solicitud y envía el código HTML de la página al cliente (navegador). Página 3 de 18

4 En la actualidad, se usa una variante de dicho modelo denominada SPA (por sus siglas en ingles) o aplicación de una sola página, en las cuales, en un primer momento toda la página se carga en el cliente de la solicitud inicial, después de lo cual, las posteriores acciones de actualización se realizan vía peticiones Ajax sin necesidad de recargar la página entera. El SPA reduce el tiempo para responder a las acciones del usuario y el resultado es la experiencia más fluida. Los frameworks javascripts como angularjs son las tecnologías que dan soporte a tales aplicaciones SPA. Que es AngularJS HTML es ideal para declarar documentos estáticos, pero se tambalea cuando tratamos de utilizarlo para declarar vistas dinámicas en aplicaciones web. AngularJS le permite ampliar el vocabulario HTML para su aplicación. El medio ambiente resultante es extraordinariamente expresivo, legible y rápido de desarrollar. Otros marcos se ocupan de las deficiencias de HTML por cualquiera de abstraerse de HTML, CSS y/o JavaScript o proporcionando una manera imprescindible para manipular el DOM. Ninguno de estos aborda el problema de raíz que HTML no fue diseñado para las vistas dinámicas. AngularJS es un conjunto de herramientas para la construcción del marco más adecuado para el desarrollo de aplicaciones. Es totalmente extensible y funciona bien con otras bibliotecas. Cada función puede ser modificado o reemplazado para satisfacer sus necesidades de flujo de trabajo de desarrollo y de características únicas. Siga leyendo para averiguar cómo hacerlo. Página 4 de 18

5 Ejemplo práctico: WebAppPresup WebAppPresup es una pequeña aplicación desarrollada a modo de ejemplo que permite realizar un presupuesto para un servicio de reparación de teléfonos celulares. A tal fin, vamos a describir como fue desarrollada usando las tecnologías ya mencionadas. Objetivo: Crear una interfaz de usuarios soportada por el framework AngularJS, que muestre básicamente sus bondades. Mostrar la interacción frontend-backend usando AngularJS. Página 5 de 18

6 Requisitos previos: Este ejemplo fue desarrollado contemplando los siguientes requisitos: Windows 10 o superior con 4gb de ram. Visual Studio 2013 Express o superior. SQL Server 2014 Express o superior. ASP.net MVC 5. Framework AngularJS en su última versión. Entity frameworks 6. Actividades: Crear la webapi - nuestro Backend. Crear la Interfaz de usuario usando AngularJS nuestro frontend. Crear la webapi - nuestro Backend Para comenzar creamos un nuevo proyecto llamado WebApiPresup y seleccionamos que se de tipo WebAPI. (a efectos prácticos, se creó un proyecto paralelo llamado WebApiPresup2) Página 6 de 18

7 A continuación, usando el gestor de paquetes NuGet de Visual Studio 2013 vamos a instalar las librerías que vamos a necesitar (Entity Frameworks y AngularJS). Ahora vamos a necesitar las siguientes entidades de datos para dar vida a nuestro proyecto con angularjs y visual studio. Las entidades serán: Marcas: entidad que contiene todas las marcas de teléfonos celulares Modelos: entidad que contiene los modelos para cada marca. Servicios: entidad que contiene todos los servicios que se le puede prestar a un equipo. Gamas: entidad que contiene la descripción de un tipo de gama de equipo y los costos de mano de obra. Fallas genéricas: entidad que contiene las fallas más comunes que presentan los equipos. Para lo cual creamos los modelos y configuramos la conexión a la base de datos Página 7 de 18

8 Diagrama de modelos Diagrama creado para satisfacer las mencionadas necesidades de información, a travez de Entity Framework y su enfoque model-first. Página 8 de 18

9 y su correspondencia con la BD creada en SQL Server 2014 Ya que estamos listos, vamos a crear el controlador para manejar nuestra lógica de negocios. Página 9 de 18

10 El controlador presupcontroller fue agregado la la carpeta de controllers en el directorio del proyecto y contendrá las librerías q se muestran y el siguiente código El código insertado en el controlador recupera datos de la BD para enviar a la vista. Página 10 de 18

11 Crear la Interfaz de usuario usando AngularJS nuestro frontend Seguidamente en el explorador de soluciones creamos la estructura de carpetas que contendrá nuestra aplicación en angular. Creamos el directorio /js que contendrá toda la aplicación, también las carpetas controllers y views que contienen los controladores y las vistas respectivamente. Como se observa, en el mencionado directorio esta el archivo app.js que contiene la definición del modulo como así las definición de las rutas a las diferentes vistas de la aplicación. En el ejemplo se observan 3 rutas, sus vistas y sus respectivos controladores. Página 11 de 18

12 Ahora insertamos el código que definirá y ejecutara el controlador, en este caso es el presupctrl, en la captura se observa la definición del controlador y la de algunas variables a usar. En la definición de los métodos del controlador tenemos los q recuperan datos desde el backend vía peticiones ajax Página 12 de 18

13 El método mostrarmodelos ejecuta una petición ajax para recuperar un modelo según la marca seleccionada en la vista y muestra la imagen de la marca seleccionada. El método mostraringmodelo muestra el modelo seleccionado en la vista La función search() es una subrutina para encontrar elementos un elemento namekey repetido en un array myarray que se le pase como parámetro. Esta función es usada para evitar cargar repuestos ya seleccionados. El método agragartablarep agrega repuestos seleccionados en la vista a una tabla, evitando agregar repetidos entre otra cosas. Página 13 de 18

14 El método elimfilarep elimina ina fila de la tabla de repuestos y actualiza los valores calculados. El método updateselectionserv captura los check s seleccionados en la vista y actualiza los costos del servicio. Jhg Página 14 de 18

15 Este último método mostrarcostosmanoobra corresponde al evento change del select que contiene las gamas, este método actualiza los valores según la gama seleccionada. Por lado de la vista, observamos que en la 1ra línea se encuentra la directiva de angular que indica que todo lo que esta dentro de la etiqueta div será controlado por presupctrl, se observa también las etiquetas que definen los select s de gama, marca y modelo. También sus imágenes. Página 15 de 18

16 En la siguiente captura se observa las definiciones que corresponden con las fallas y los servicios. En la captura siguiente se observa la definicion de los repuestos y su respectiva tabla Página 16 de 18

17 En la captura siguiente se observa la definicion de una estructura swich propia de angulajs, la cual muestra un mensaje según la gama seleccionada. En la captura siguiente se observa la definicion de la etiqueta que muestra fecha estimanda Página 17 de 18

18 Y finalmente, en la captura siguiente se observa las etiquetas que muestran los valores propios dela reparacion. Página 18 de 18