CAPITULO MARCO TEORICO - repositorio.upsin.edu.mx
14
18 CAPITULO 2 MARCO TEORICO
Transcript of CAPITULO MARCO TEORICO - repositorio.upsin.edu.mx
18
CAPITULO 2
MARCO TEORICO
19
Definición de aplicación MVVM
El 8 de Octubre de 2005, Jhon Gossman, uno de los ingenieros
responsables del desarrollo de WPF, daba a conocer un nuevo patrón de diseño
de la capa de presentación, con las siglas MVVM, Model/View/ViewModel.
MVVM es una evolución del patrón MVC (Model/View/Controller), intenta
facilitar el trabajo en paralelo entre alguien encargado en diseñar la interfaz de
usuario y otra persona encargada de generar el código que la sustentará. [1]
Este patrón consta de 3 partes bien diferenciadas:
La View (la interfaz de usuario).
La ViewModel contendrá el lenguaje que usaremos para desarrollar la lógica
de presentación.
El Model será el encargado del acceso a datos y la lógica de negocio.
Algo que debemos tener presente es que las diferentes capas no se
comunican todas con todas, la View y la ViewModel tienen una comunicación
bidireccional, mientras que el Model sólo recibe órdenes de la ViewModel. [1]
Imagen 7. Flujo de una aplicación MVVM
20
¿Porque una aplicación web?
Una aplicación web es un conjunto de páginas que interactúan unas con
otras y con diversos recursos en un servidor web, incluidas bases de datos. Esta
interacción permite implementar características en su sitio como catálogos de
productos virtuales y administradores de noticias y contenidos. [2]
Es innegable el crecimiento que ha tenido la web hoy en día entre los
usuarios. Bastaría con solo ver el sin fin de aplicaciones online que podemos
encontrar hoy en día y que son usadas por millones de usuarios para darnos
cuenta de la magnitud que las aplicaciones web han alcanzado hoy en día.
Aquí se presentas 5 ventajas de utilizar aplicaciones basadas en la web:
1. Las aplicaciones web son sencillas para los usuarios.
Y es que todos las utilizamos cada día: manejar el correo, acceder a las
cuentas del banco, cualquier red social como Facebook o Twitter, las tiendas
de internet.
2. Las aplicaciones web son sencillas y baratas de desarrollar.
Con este tipo de aplicaciones una empresa puede ahorrarse muchos
costes de su departamento de informática ya que no hace falta instalar nada
en los ordenadores de los usuarios, solamente deben tener un navegador
web como Chrome, Internet Explorer, Firefox, y conexión a internet. Para el
desarrollo hay infinidad de recursos muy baratos e incluidos los gratuitos que
hacen que los costes bajen considerablemente.
3. Las aplicaciones web son sencillas de actualizar.
El coste de mantenimiento de los programas de escritorio es elevado, hay
que realizar la actualización en todas las maquinas que se desee trabajar y
casi siempre implican planificaciones costosas. En el caso de aplicaciones
web basta con actualizar la aplicación en el servidor e inmediatamente todo
el mundo trabaja con la nueva versión.
21
4. Las necesidades de los ordenadores de los usuarios son menores.
Da lo mismo que sea un Mac, un Linux o cualquier versión de Windows
en un ordenador que no sea el último modelo, es suficiente para utilizarlas.
5. Las aplicaciones web facilitan la centralización de datos.
El acceso a los datos desde distintos lugares, ya sea empresas que tienen
varias sedes o bien particulares accediendo desde distintos sitios, este tipo
de aplicaciones hacen que no sea necesario sincronizar o copiar datos de un
lugar a otro, sencillamente la aplicación accede siempre a los mismos datos.
Descripción y análisis de investigaciones relacionadas
En un principio la empresa MPI no cuenta con ninguna clase de sistema
ni aplicación que pudiera ayudarles a gestionar temas de organización dentro
de la misma. Todos los reportes y controles eran generados por hojas de
trabajo realizadas en Excel bajo el formato xls. Todo esto era archivado dentro
de una computadora con el riesgo de presentarse algún problema con la misma
y perder dicha información.
La manera en que MPI procesaba sus operaciones ya sea financiera o
de cualquier otra índole era mediante la utilización de funciones Excel que
calculaba los datos ingresados y proporcionaba los mismos datos en la misma
hoja.
No obstante la empresa no cuenta con ninguna clase de seguridad para
resguardar todos sus datos y archivos.
Base de Datos
Para la gestión de la base de datos será utilizado MySQL, esto debido a su
simplicidad y al conocimiento previo que se tiene al haber trabajado con la
misma. El diseño de base datos se hizo en base a las necesidades con las que
cuenta la empresa y se desarrollaron las debidas entidades necesarias para
poder guardar todos los datos requeridos dentro de nuestro sistema. Más
adelante mostraremos nuestro diseño de base de datos en un modelo de
22
entidad relación el cuál es un método del que disponemos para diseñar estos
esquemas que posteriormente debemos de implementar en un gestor
de BBDD (bases de datos).
Requerimientos para el desarrollo
Debido a la poca o nula seguridad con la que cuenta MPI en materia de
protección a sus datos, y la ineficiente manera de lleva a cabo sus procesos
internos se decidió realizar una aplicación web que cuente con todas las
especificaciones que se requieren utilizando herramientas gratuitas o de muy
bajo coste para la misma.
Durante el desarrollo de este proyecto se utilizaran las siguientes
herramientas de desarrollo con el fin de lograr nuestro propósito, cada una de
las cuales serán explicadas brevemente.
Front-End.
- HTML 5
- JavaScript
- CSS3
Back-End
- PHP
- MySQL
Frameworks Front-End
- AngularJS
- Angular Material
- JQuery
Frameworks Back-End
- Laravel
23
HTML 5
Es importante explicar qué es exactamente HTML 5, ya que no es
simplemente una nueva versión del lenguaje de marcación HTML, sino una
agrupación de diversas especificaciones concernientes a el desarrollo web. Es
decir, HTML 5 no se limita sólo a crear nuevas etiquetas, atributos y eliminar
aquellas marcas que están en desuso o se utilizan inadecuadamente, sino que
va mucho más allá. [3]
Estas características permiten incluir y controlar contenido multimedia en
la web sin tener que recurrir a plugins ni APIs propietarias.
HTML5 es un candidato potencial para ser usado en
aplicaciones multiplataforma móviles, incluso muchas de las características de
este lenguaje fueron pensadas para ser ejecutadas en dispositivos de bajo
consumo como tabletas y teléfonos inteligentes.
Imagen 8. Logo HTML 5
JavaScript
JavaScript (a veces abreviado como JS) es un lenguaje ligero e
interpretado, orientado a objetos con funciones de primera clase, más conocido
como el lenguaje de script para páginas web, pero también usado en muchos
entornos sin navegador, tales como node.js o Apache CouchDB. Es un
lenguaje script multi-paradigma, basado en prototipos, dinámico, soporta estilos
de programación funcional, orientada a objetos e imperativa. Leer más sobre
JavaScript. [4]
24
El estándar de JavaScript es ECMAScript. Desde el 2012, todos los
navegadores modernos soportan completamente ECMAScript 5.1. Los
navegadores más antiguos soportan por lo menos ECMAScript 3. La sexta
edición se liberó en Julio. Se puede seguir el progreso actual de las diferentes,
nuevas y mejoradas características en la correspondiente wiki.
Imagen 9. Logo JavaScript
CSS3
CSS (Cascading Style Sheets, u Hojas de Estilo en Cascada) es la
tecnología desarrollada por el World Wide Web Consortium (W3C) con el fin de
separar la estructura de la presentación. aún así se podía asegurar una
visualización correcta de la misma hoja de estilos. [5]
Mientras que HTML nos permite definir la estructura una página web, las
hojas de estilo en cascada son las que nos ofrecen la posibilidad de definir las
reglas y estilos de representación en diferentes dispositivos, ya sean pantallas
de equipos de escritorio, portátiles, móviles, impresoras u otros dispositivos
capaces de mostrar contenidos web. [6]
Las hojas de estilo nos permiten definir de manera eficiente la
representación de nuestras páginas y es uno de los conocimientos
fundamentales que todo diseñador web debe manejar a la perfección para
realizar su trabajo. [6]
25
Imagen 10. Logo CSS3
PHP
PHP está enfocado principalmente a la programación 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 páginas con
contenidos dinámicos, o enviar y recibir cookies. Aunque PHP puede hacer
mucho más. [7]
Imagen 11. Logo PHP
MySQL
MySQL es el servidor de bases de datos relacionales más popular,
desarrollado y proporcionado por MySQL AB. MySQL AB es una empresa cuyo
negocio consiste en proporcionar servicios en torno al servidor de bases de datos
MySQL.
MySQL se ejecuta en prácticamente todas las plataformas, incluyendo
Linux, UNIX y Windows. A pesar de que se puede utilizar en una amplia gama
de aplicaciones, MySQL se asocia más con las aplicaciones basadas en la web
y la publicación en línea y es un componente importante de una pila empresarial
de código abierto llamado LAMP. LAMP es una plataforma de desarrollo web que
26
utiliza Linux como sistema operativo, Apache como servidor web, MySQL como
sistema de gestión de base de datos relacional y PHP como lenguaje de
programación orientado a objetos (a veces, Perl o Python se utiliza en lugar de
PHP). [8]
Imagen 12. Logo MySQL
AngularJS
AngularJS es un impresionante framework
javascript opensource desarrollado por Google. Un framework para crear
Webapps en lenguaje cliente con Javascript ejecutándose con el
conocido single-page applications (aplicación de una sóla página) que extiende
el tradicional HTML con etiquetas propias (directivas) como pueden ser ng-app,
ng-controller, ng-model, ng-view entre otras. [9]
Un framework basado en MVC (Modelo-Vista-
Controlador) increíblemente flexible, de muy fácil lectura y desarrollo rápido
(puedes empezar en minutos). [9]
Permite extender HTML con tags personalizados, definir y vincular (data-
binding) variables vista/controllador, consultas ajax con peticiones HTTP,
sistema óptimo de templating, manipulación de datos en JSON, inyección de
dependencias, deep linking, formularios de validación, desacoplamiento del
DOM de Javascript, internacionalización i18n y l10n, filtros, unit testing entre
otros. [9]
AngularJS es compatible con los navegadores de última generación
(Chrome, Firefox, Safari, Opera, Webkits, IE9+) y se puede hacer compatible
para Internet Explorer 8 o anterior mediante varios hacks. [9]
27
Imagen 13. Logo AngularJS
JQuery
jQuery es un framework de JavaScript para facilitar, entre otros, el acceso
a los elementos del DOM, los efectos, interactuar con los documentos HTML,
desarrollar animaciones y agregar interacción con la tecnología AJAX a páginas
web. jQuery podría ser otro framework más como script.aculo.us, MooTools, YUI
pero en cambio disponemos una gran potencia con una facilidad mucho mayor
que sus competidores. [10]
jQuery consiste en un único fichero JavaScript que contiene las
funcionalidades comunes de DOM, eventos, efectos y AJAX. La característica
principal de la biblioteca es que permite cambiar el contenido de una página web
sin necesidad de recargarla, mediante la manipulación del árbol DOM y
peticiones AJAX. Para ello utiliza las funciones $() o jQuery(). [10]
Imagen 14. Logo JQuery
Laravel
Laravel es un nuevo y poderoso Framework PHP desarrollado por Taylor
Otwell, que promete llevar al lenguaje PHP a un nuevo nivel. [11]
28
Desarrollar aplicaciones usando Laravel es muy sencillo,
fundamentalmente debido a su expresiva sintaxis, sus generadores de código, y
su ORM incluido de paquete llamado Eloquent ORM. [11]
.
Imagen 15. Logo Laravel
Diseño responsivo
La importancia radica en que hace posible que un sitio web se pueda
visualizar de manera correcta y cómoda para el internauta en cualquier tipo de
dispositivo móvil. [12]
Es un mismo diseño que se adapta a los diferentes tamaños de pantallas,
tu sitio web se va a poder visualizar en smartphones, tablets, notebook,
ordenadores, etc. [12]
El uso de los dispositivos móviles para navegar por Internet se encuentra
en constante aumento. Hay que tener en cuenta que en el último año los usuarios
de smartphones y tablets ha sobrepasado a los que tienen una laptop. Es por
ello que siempre se recomienda el desarrollo de sitios web empleando
responsive web design. [12]
Metodología de trabajo
29
Metodología Scrum
En Scrum se realizan entregas parciales y regulares del producto final,
priorizadas por el beneficio que aportan al receptor del proyecto. Por ello, Scrum
está especialmente indicado para proyectos en entornos complejos, donde se
necesita obtener resultados pronto, donde los requisitos son cambiantes o poco
definidos, donde la innovación, la competitividad, la flexibilidad y
la productividad son fundamentales. [13]
El proceso
En Scrum un proyecto se ejecuta en bloques temporales cortos y
fijos (iteraciones de un mes natural y hasta de dos semanas, si así se necesita).
Cada iteración tiene que proporcionar un resultado completo, un incremento de
producto final que sea susceptible de ser entregado con el mínimo esfuerzo al
cliente cuando lo solicite.
Planificación de la iteración
El primer día de la iteración se realiza la reunión de planificación de la
iteración. Tiene dos partes:
-Selección de requisitos (4 horas máximo).
El cliente presenta al equipo la lista de requisitos priorizada del producto
o proyecto. El equipo pregunta al cliente las dudas que surgen y selecciona los
requisitos más prioritarios que se compromete a completar en la iteración, de
manera que puedan ser entregados si el cliente lo solicita.
-Planificación de la iteración (4 horas máximo).
El equipo elabora la lista de tareas de la iteraciónnecesarias para
desarrollar los requisitos a que se ha comprometido. La estimación de esfuerzo
se hace de manera conjunta y los miembros del equipo se autoasignan las
tareas.
Ejecución de la iteración
30
Cada día el equipo realiza una reunión de sincronización (15 minutos
máximo). Cada miembro del equipo inspecciona el trabajo que el resto está
realizando (dependencias entre tareas, progreso hacia el objetivo de la iteración,
obstáculos que pueden impedir este objetivo) para poder hacer las adaptaciones
necesarias que permitan cumplir con el compromiso adquirido. En la reunión
cada miembro del equipo responde a tres preguntas:
-¿Qué he hecho desde la última reunión de sincronización?
-¿Qué voy a hacer a partir de este momento?
-¿Qué impedimentos tengo o voy a tener?
Durante la iteración el Facilitador (Scrum Master) se encarga de que el
equipo pueda cumplir con su compromiso y de que no se merme su
productividad.
-Elimina los obstáculos que el equipo no puede resolver por sí mismo.
-Protege al equipo de interrupciones externas que puedan afectar su
compromiso o su productividad.
Durante la iteración, el cliente junto con el equipo definan la lista de
requisitos (para prepararlos para las siguientes iteraciones) y, si es necesario,
cambiar o replanificar los objetivos del proyecto para maximizar la utilidad de lo
que se desarrolla y el retorno de inversión.
Inspección y adaptación
El último día de la iteración se realiza la reunión de revisión de la iteración.
Tiene dos partes:
-Demostración (4 horas máximo).
El equipo presenta al cliente los requisitos completados en la iteración, en
forma de incremento de producto preparado para ser entregado con el mínimo
esfuerzo. En función de los resultados mostrados y de los cambios que haya
habido en el contexto del proyecto, el cliente realiza las adaptaciones necesarias
de manera objetiva, ya desde la primera iteración, replanificando el proyecto.
-Retrospectiva (4 horas máximo).
31
El equipo analiza cómo ha sido su manera de trabajar y cuáles son los
problemas que podrían impedirle progresar adecuadamente, mejorando de
manera continua su productividad. El Facilitador se encargará de ir eliminando
los obstáculos identificados.
Imagen 16. Metodología Scrum
