capitulo ii. marco teÓrico 2.1 tecnologías para modelado
TRANSCRIPT
23
CAPITULO II. MARCO TEÓRICO
2.1 Tecnologías para modelado de diagramas UML.
Desde los inicios de la informática se han estado utilizando distintas formas de
representar los diseños de una manera más bien personal o con algún modelo
gráfico. La falta de estandarización en la representación gráfica de un modelo
impedía que los diseños gráficos realizados se pudieran compartir fácilmente entre
distintos diseñadores, con este objetivo se creó el Lenguaje Unificado de
Modelado.
Es por eso que se creó la generación de diagramas con el Lenguaje
Unificado de Modelado (UML): para forjar un lenguaje visual común en el complejo
mundo del desarrollo de software que también fuera comprensible por los usuarios.
2.1.1 ¿Qué es UML?
Figura 1. Logo de UML
https://upload.wik imedia.org/wik ipedia/commons/2/2d/UML_logo.gif
El Lenguaje de Modelado Unificado (UML - Unified Modeling Language) es un
lenguaje con un alcance muy grande y que cubre diversos conjuntos de dominios
arquitectónicos en el diseño de aplicaciones (Ver Figura 4). UML es un lenguaje
gráfico de propósito general, estándar de la industria para visualizar, especificar y
documentar cada una de las partes que comprende el desarrollo de sistemas a
través del uso de diagramas y texto de soporte [1].
24
UML no es un lenguaje de programación, pero existen herramientas
que se pueden usar para generar código en diversos lenguajes usando los
diagramas UML. UML guarda una relación directa con el análisis y el diseño
orientados a objetos.
Este lenguaje de modelado sirve para:
Visualizar como es un sistema o como queremos que sea.
Especificar la estructura y/o comportamiento de un sistema.
Hacer una plantilla que guíe la construcción de los sistemas.
Documentar las decisiones que hemos tomado [2].
Los principios básicos del modelado son:
Seleccionar el modelo adecuado para cada momento, y dependiendo de
qué modelo se elija se obtendrán diferentes beneficios y diferentes costes.
El modelado orientado a objetos proporciona sistemas más flexibles y
readaptables.
Todo modelo puede ser expresado en base a diferentes niveles de
precisión.
Obtener modelos que representen la realidad lo más claramente posible.
Un único modelo no es suficiente.
2.1.2 Diagramas UML
En UML, los diagramas están divididos en diagramas de estructura y
comportamiento. Los diagramas de estructura representan los elementos de un
sistema y sus relaciones, mientras que los de comportamiento representan las
relaciones de los elementos del sistema a través de acciones específicas. (Ver
Figura 5)
25
Figura 2. Diagramas UML
http://jeanmazuelos.com/sites/default/files/diagramas_uml_0.png
Los diagramas de casos de uso son una técnica para capturar
información de cómo un sistema o negocio trabaja actualmente, o de cómo se desea
que trabaje. Aquí aún no hay orientación a objetos, más bien es una técnica para el
modelado de escenarios. Los diagramas de casos de uso no forman parte de la
llamada fase de diseño, sino forman parte de la fase de análisis, y a su vez responde
el interrogante ¿Qué?, de esta forma al ser parte del análisis ayuda a describir que
es lo que el sistema debe hacer [3].
Estos diagramas muestran operaciones que se esperan de una
aplicación o sistema y como se relaciona con su entorno, es por ello que se ve desde
el punto de vista del usuario. Describen un uso del sistema y como interactúa con el
usuario (Ver Figura 6).
26
Figura 3. Ejemplo de diagrama de Caso de Uso
http://planificacionyevaluacion5.blogspot.mx/2015/11/diagramas-de-uml.html
En el Lenguaje de Modelado Unificado, un diagrama de casos de uso
es una forma de diagrama de comportamiento UML mejorado. Estos tipos de
diagramas o modelos pueden ser utilizados para describir la funcionalidad de un
sistema. Para poder modelar un diagrama de caso de uso es necesario saber
utilizar los elementos tales como: actor, caso de uso, relaciones y la interacción
con el sistema.
Los diagramas de casos de uso sirven para especificar la
comunicación y el comportamiento de un sistema mediante su interacción con los
usuarios y/u otros sistemas. O lo que es igual, un diagrama que muestra la relación
entre los actores y los casos de uso en un sistema. Una relación es una conexión
entre los elementos del modelo, por ejemplo la especialización y la generalización
son relaciones [4].
Los diagramas de casos de uso se utilizan para ilustrar los requisitos
del sistema al mostrar cómo reacciona a eventos que se producen en su ámbito o
en él mismo.
27
2.1.3 Comparación entre herramientas para diagramas UML
En la siguiente tabla se muestra una tabla comparativa de las
ventajas/características y desventajas de tres software y aplicaciones más
populares para realizar diagramas UML (Ver Tabla 1).
Tabla 1. Tabla comparativa de herramientas para diagramas UML
Nombre Ventajas Desventajas
StartUML Es una herramienta de
diagramación en línea, que
permite a los usuarios
colaborar y trabajar juntos en
tiempo real, creando diseños
UML, diagramas de flujo,
organigramas, mapas
mentales y muchos otros tipos
de diagrama.
Solo funciona en Windows.
El código generado sobre-
escribe el código anterior
generado.
Dificultad del manejo del
software.
LucidChart Es una herramienta de
diagramación en línea, que
permite a los usuarios
colaborar y trabajar juntos en
tiempo real, creando diseños
UML, diagramas de flujo, y
muchos otros tipos de
diagrama.
Funciona en navegadores
web como: Google Chrome,
Firefox, Safari e Internet
Explorer 8+.
Utiliza una interfaz de
arrastrar-y-soltar y
Utiliza internet ya que es
Online.
La página principal está en
inglés.
28
Si bien estas son solo algunas de las características de cada
herramienta para el diseño de diagramas UML, existen algunas que son, la
herramienta que más destacó fue LucidChart.
capacidades de
colaboración en tiempo real.
Funciona en Windows, Mac
OS X y Linux.
No necesita descargar
software.
Guardado automático en la
nube.
Draw.io Es una aplicación web para
la realización de diagramas
tales como: UML,
diagramas de flujo, entre
otros.
Interfaz es sencilla y fácil de
utilizar.
Posee una gran cantidad de
iconos para los distintos
diagramas.
Puedes almacenar tus
diagramas en la nube
utilizando una cuenta de
Google y después editar.
Funciona en cualquier
navegador con HTML5
Es gratuito.
Utiliza cuenta para poder
guardar diagramas.
Utiliza internet ya que es
Online.
29
2.1.4 LucidChart
Figura 4. Logo de Lucidchart
https://www.lucidchart.com/persona-pages/img/lucidchart-logo.svg
Para poder llevar a cabo el diseño de los diagramas de caso de uso fue necesario
buscar una herramienta que cumpliera con las características de estos tipos de
diagramas, es por ello que se tomó LucidChart como herramienta principal para
cumplir con este requisito (Ver Figura 7).
Lucidchart es una herramienta de diagramación basada en la web,
que permite a los usuarios colaborar y trabajar juntos en tiempo real, creando
diagramas de flujo, organigramas, esquemas de sitios web, diseños UML, mapas
mentales, prototipos de software y muchos otros tipos de diagrama. Construida con
estándares web, como HTML5 y JavaScript, Lucidchart funciona en todos los
navegadores web, como Google Chrome, Firefox, Safari e Internet Explorer 8+ [5].
Esta herramienta es muy utilizada por muchas personas ya que no
solo se enfoca en el diseño de diagramas UML sino que también se enfoca en otros
tipos como diagramas de flujo, organigramas, entre muchos otros más. Además de
que su interfaz es muy fácil de utilizar ya que es un entorno parecido a los de
Microsoft Word y en ella se puede configurar los elementos u objetos que se
desean utilizar para crear los diagramas (Ver Figura 8).
30
Figura 5. Configuración de diagramas UML
También algo muy interesante y que está muy presente es el entorno
colaborativo, esto facilita el trabajo en equipo ya que en un mismo proyecto o
archivo pueden trabajar varias personas a la vez, esto es posible porque
LucidChart no es un software sino una aplicación en la que se puede trabajar en
línea a través de una conexión a Internet (Ver Figura 9).
Figura 6. Interfaz de Lucidchart
31
2.2 Patrón MVC (Modelo – Vista - Controlado)
MVC es un patrón de arquitectura de software que utiliza tres componentes:
Modelos, Vistas y Componentes, por ello el origen de su nombre. Este patrón busca
facilitar el desarrollo de aplicaciones y su posterior mantenimiento tomando las ideas
de reutilización de código y la separación de conceptos.
El modelo es la representación de la información, es el que permite
acceder a dicha información, ya sea a través de consultas o actualizaciones. Por
otro lado, el controlador es el que se encarga de dar respuesta a las acciones que
surgen de los usuarios e invoca peticiones al modelo cuando se pide alguna
solicitud, por ejemplo, hacer un registro en una base de datos. Las vistas muestran
el modelo de modo que el usuario pueda interactuar en la interfaz (Ver Figura 10).
La ventaja principal de MVC es que dado a su estructura, permite
separar los componentes de la aplicación por lo que cuando se desee hacer alguna
modificación en cierta parte del código ya sea actualizar o eliminar, esta acción no
afectará otra parte que dependa del mismo. Actualmente, la mayoría de los
frameworks utilizan MVC o algún tipo de adaptación de MVC para la arquitectura,
tales como Django, AngularJS, Laravel, CakePHP, entre otros más porque es una
arquitectura muy importante porque se utiliza tanto en componentes gráficos hasta
en sistemas complejos empresariales.
Figura 7. Funcionamiento MVC
32
https://codigofacilito.com/photo_generales_store/29.jpg
2.3 Cake PHP
Figura 8. Logo de CakePHP
https://cakephp.org/img/trademarks/logo-3.jpg
CakePHP (Ver Figura 11) es un framework libre, de código abierto, para el
desarrollo rápido de aplicaciones para PHP. Es una estructura fundamental para
ayudar a los programadores a crear aplicaciones web. El objetivo principal de
CakePHP es permitirte trabajar de forma estructurada y rápida y sin pérdida de
flexibilidad [6].
CakePHP sigue el patrón diseño de software llamado MVC. La
programación en CakePHP separa la aplicación en tres partes principalmente
utilizando MVC (Modelo Vista Controlador). El modelo representa los datos de la
aplicación, la vista hace una presentación del modelo de datos, y el controlador
maneja y enruta las peticiones hechas por los usuarios [7].
En la siguiente figura se muestra un ejemplo de una petición
utilizando el MVC en CakePHP (Ver Figura 12).
Figura 9. Ejemplo MVC en CakePHP
https://book.cakephp.org/1.3/en/_images/basic_mvc.png
33
2.4 PHP
Figura 10. Logo de PHP
https://upload.wik imedia.org/wik ipedia/commons/2/27/PHP-logo.svg
El lenguaje de programación PHP, fue desarrollado puntualmente para diseñar
páginas web dinámicas programando scripts del lado del servidor [8]. PHP es un
acrónimo recursivo que significa PHP Hypertext Preprocessor (Ver Figura 13).
Fue uno de los primeros lenguajes de programación del lado del
servidor que se podían incorporar directamente en el documento HTML en lugar
de llamar a un archivo externo que procese los datos. El código es interpretado por
un servidor web con un módulo de procesador de PHP que genera la página web
resultante. Fue creado originalmente por Rasmus Lerdorf en el año 1995.
Actualmente el lenguaje sigue siendo desarrollado con nuevas
funciones por el grupo PHP. PHP es la solución para la construcción de sitios web
con independencia de la base de datos y del servidor Web, válido para cualquier
plataforma. Maneja sintaxis limpias y entendibles, por ejemplo, el inicio y fin de
código PHP (Ver Figura 14).
Figura 11. Ejemplo de sintaxis PHP
El objetivo final es conseguir la integración de las páginas HTML con
aplicaciones que corran en el servidor como procesos integrados en el mismo, y
no como un proceso separado, como ocurría con los CGIs (Common Gateway
Interface) (Ver Figura 15).
34
Figura 12. Proceso PHP
http://redgrafica.com/El-lenguaje-de-programacion-PHP
Características:
1. Velocidad.- PHP se integra muy bien a otras aplicaciones, especialmente
bajo ambientes Unix.
2. Estabilidad.- PHP utiliza su propio sistema de administración de recursos y
posee de un sofisticado método de manejo de variables.
3. Seguridad.- PHP maneja distintos niveles de seguridad, estos pueden ser
configurados desde el archivo .ini.
4. Simplicidad.- PHP dispone de una amplia gama de librerías, y permite la
posibilidad de agregarle extensiones.
Ventajas:
Es un lenguaje multiplataforma.
PHP es Open Source.
El código fuente es invisible al navegador y al cliente ya que el servidor se
encarga de ejecutar el código y enviar su resultado HTML al navegador.
Capacidad de conexión con la mayoría de los motores de base de datos
actuales, destaca su conectividad con MySQL y PostgreSQL.
Posee una amplia documentación en su página oficial.
Es libre.
Permite aplicar técnicas de programación orientada a objetos.
No requiere definición de tipos de variables aunque sus variables se pueden
evaluar también por el tipo que estén manejando en tiempo de ejecución.
35
2.5 Sistema Manejador de Base de Datos (SGBD)
Las bases de datos son elementos tecnológicos fundamentales para el desarrollo
empresarial en el mundo moderno, encontrándose en el mercado muchas
herramientas comerciales y gratuitas que cada día mejoran su rendimiento. Los
sistemas manejadores de base de datos facilitan el trabajo de los ingenieros de
soporte y administradores de sistemas, permitiendo que existan controles más
estrictos y mejores consultas que sirvan para la toma de decisiones de las empresas
hoy en día (Ver Figura 16).
Un sistema manejador de base de datos es un software que tiene
como objetivo facilitar la construcción y manipulación de bases de datos sirviendo
como interfaz entre éstas, los usuarios y los distintos tipos de aplicaciones que las
utilizan. Lo hace mediante una serie de rutinas de software para permitir su uso de
una manera segura, sencilla y ordenada. Se trata, de un conjunto de programas que
realizan tareas de forma interrelacionada para facilitar la construcción y
manipulación de bases de datos, adoptando la forma de interfaz entre éstas, las
aplicaciones y los mismos usuarios.
Su uso permite realizar un mejor control a los administradores de
sistemas y, por otro lado, también obtener mejores resultados a la hora de realizar
consultas que ayuden a la gestión empresarial mediante la generación de la tan
perseguida ventaja competitiva.
Figura 13. Logos de Sistemas Manejadores de Base de Datos
http://4.bp.blogspot.com/-T3fGxfaVcKM/UBnFtdjovnI/AAAAAAAAAAk/Fs-
J84zE6mA/s1600/bases_de_datos_img.jpg
36
2.5.1 MySQL
Figura 14. Logo de MySQL
https://www.mysql.com/common/logos/logo-mysql-170x115.png
MySQL es un sistema de administración de bases de datos (Database Management
System, DBMS) para bases de datos relacionales. MySQL, como base de datos
relacional, utiliza múltiples tablas para almacenar y organizar la información. MySQL
fue escrito en C y C++, por lo que destaca por su gran adaptación a diferentes
entornos de desarrollo, permitiendo su interactuación con los lenguajes de
programación más utilizados como PHP, Perl y Java y su integración en distintos
sistemas operativos (Ver Figura 17).
Ventajas:
Velocidad al realizar las operaciones.
Bajo costo en requerimientos para la elaboración de bases de datos.
Facilidad de configuración e instalación.
Desventajas:
Un gran porcentaje de las utilidades de MySQL no se encuentran
documentadas.
No es intuitivo, como otros programas.
En la siguiente figura se muestra una comparación entre MySQL y
Oracle comprobando la compatibilidad de estos en distintos sistemas operativos.
(Ver Figura 18).
37
Figura 15. Compatibilidad de MySQL y Oracle con algunos sistemas
operativos
https://itxdesign-itxdesign.netdna-ssl.com/wp-content/uploads/2014/02/mysql-os-compatibility.png
2.5.2 SQLyog Community
Figura 16. Logos de SQLyog
https://i.ytimg.com/vi/9dyEPgiUxtM/maxresdefault.jpg
SQLyog Community Edition (Ver Figura 19) es una interfaz gráfica de las bases de
datos de MySQL, orientada especialmente para las personas que tienen algún
conocimiento en este tipo de bases de datos. El programa está orientado a usuarios
que ya tienen ciertos conocimientos de SQL y necesitan un intérprete gráfico, ágil y
funcional.
38
SQLyog te permite administrar usuarios y permisos, y realizar
múltiples peticiones a base de datos. También insertar fácilmente, mediante
plantillas, peticiones que realice con frecuencia, como por ejemplo creación de
tablas. Además, su interfaz es sencilla y amigable. (Ver Figura 20).
Figura 17. Interfaz de SQLyog
Características:
Esquema y sincronización de datos: Aplica los cambios de esquema y datos
visualmente mientras pasa de la prueba a la producción. Replica datos
periódicamente a intervalos programados.
Túneles SSH y HTTP.
Copias de seguridad programadas: Potente asistente de copia de seguridad
con una opción de copia de seguridad de un clic y capacidad para programar
copias de seguridad con facilidad.
Importar datos externos: Agiliza la transferencia/migración de datos desde
cualquier fuente de datos compatible con ODBC a MySQL.
39
2.6 XAMPP
Figura 18. Logo de XAMPP
https://i1.wp.com/delanomaloney.com/wp-content/uploads/2013/07/xampp-logo.png?ssl=1
XAMPP es un servidor web de plataforma, software libre, que consiste
principalmente en el sistema de gestión de bases de datos MySQL, el servidor web
Apache y los intérpretes para lenguajes de script PHP y Perl. El nombre es en
realidad un acrónimo: X (para cualquiera de los diferentes sistemas operativos),
Apache, MariaDB, PHP, Perl (Ver Figura 21). El programa se distribuye con la
licencia GNU y actúa como un servidor web libre, fácil de usar y capaz de interpretar
páginas dinámicas.
XAMPP es una herramienta de desarrollo en la cual se puede probar
el proyecto creado, por ejemplo un proyecto web (página web) de forma local sin la
necesidad de tener que acceder a Internet.
Ventajas:
Fácil instalación.
Configuración por defecto con todas las opciones activadas.
Instalador para Windows (dos versiones: instalador y portable), Linux y OS
X.
Compilación de software libre, licencia GNU.
Desventajas:
No se pueden actualizar las versiones de los programas instalados de forma
individual.
No soporta MySQL desde consola.
40
XAMPP cuenta con cuatro componentes principales (Ver Figura 22):
1. Apache: Aplicación de servidor web que procesa y entrega el contenido
web a un ordenador.
2. MySQL: Es el sistema gestor de base de datos más popular.
3. PHP: Lenguaje de script del lado del servidor que hace funcionar las
páginas web.
4. Perl: Se usa en la programación de redes, la administración de sistemas,
etc.
Figura 19. Interfaz de XAMPP
41
2.7 Servidores
Un servidor web es un programa que utiliza el protocolo de transferencia de híper
texto, HTTP (Hypertext Transfer Protocol), para servir los archivos que forman
páginas Web a los usuarios, en respuesta a sus solicitudes, que son reenviados por
los clientes HTTP de sus computadoras. Fue diseñado para transferir datos de
hipertexto, es decir, páginas web con todos sus elementos (textos, widgets,
banners, etc.).
2.7.1 Apache
Figura 20. Logo de Apache
http://www.difesoft.com/wp-content/uploads/2014/04/apache-logo-300x245.png
Apache es un servidor web HTTP de código abierto, que implementa el protocolo
HTTP/1.1 y la noción de sitio virtual. Es utilizado principalmente para enviar páginas
web estáticas y dinámicas en la World Wide Web. Muchas aplicaciones web están
diseñadas para implementar Apache, o bien utilizarán características propias de
este servidor web.
42
2.8 Herramienta Cliente – Servidor
La arquitectura cliente-servidor es un modelo de diseño de software en el que tareas
se reparten entre los proveedores de recursos o servicios, llamados servidores, y
los demandantes, llamados clientes. Un cliente realiza peticiones a otro programa,
el servidor, quien le da respuesta. Algunos ejemplos de aplicaciones
computacionales que usen el modelo cliente-servidor son: correo electrónico,
servidor de impresión.
Ventajas:
Centralización del control de los recursos, datos y accesos.
Facilidad de mantenimiento y actualización del lado del servidor:
Toda la información es almacenada en el lado del servidor, que suele tener
mayor seguridad que los clientes.
Hay muchas herramientas cliente-servidor para usar.
Desventajas:
Si el número de clientes simultáneos es elevado, el servidor puede
saturarse. Esto sucede con menor frecuencia en las redes P2P.
Frente a fallas del lado del servidor, el servicio queda paralizado para los
clientes. Algo que no sucede en una red P2P.
La mayoría de los servicios de Internet son tipo de cliente-servidor.
La acción de visitar un sitio web requiere una arquitectura cliente-servidor, ya que
el servidor web sirve las páginas web al navegador (al cliente).
Figura 21. Diagrama cliente-servidor vía Internet
https://upload.wik imedia.org/wik ipedia/commons/thumb/c/c9/Client-server-model.svg/250px-Client-
server-model.svg.png
43
2.8.1 Bitvise SSH
Figura 22. Logo de Bitvise
Bitvise SSH (Ver Figura 25) es un cliente y servidor SSH y SFTP gratuito para
entornos Windows [9]. Al igual que para cualquier otro tipo de conexión remota, para
poder establecer conexiones seguras necesitamos tanto un servidor como un
cliente (Ver Figura 26).
Figura 23. Login de Bitvise SSH Client
http://www.firedaemon.com/blog/bitvise-tunnelier-an-easy-to-use-ssh-client
Bitvise SSH cuenta con ambas aplicaciones:
Bitvise SSH Server es el servidor, quien debe aceptar las conexiones del
cliente. Este servidor está configurado para funcionar durante largos periodos
de tiempo, a la espera de recibir una petición de conexión. El servidor debe
instalarse en la máquina remota que queremos controlar.
44
Bitvise SSH Client es el cliente, quien se utiliza para establecer las
conexiones remotas al protocolo SSH. Este cliente es el que se utiliza para
establecer una conexión remota al terminal del servidor para controlarlo, para
configurar y monitorizar el reenvío de puertos y para transferir archivos de
forma segura a través de Secure-FTP. Este cliente es el que debe instalarse
en la máquina desde la que vamos a conectarnos al servidor.
En las siguiente figura se muestra la interfaz de este programa (Ver
Figura 27).
Figura 24. Interfaz de pantalla principal de Bitvise
45
2.9 Advanced REST Client (ARC)
Figura 25. Logo Advanced REST client (ARC)
http://fcorti.com/wp-content/uploads/2015/10/restClientLogo-300x276.png
Advanced Rest Client (Ver Figura 28) es una extensión de Chrome que permite
lanzar peticiones a servicios o APIs RestFul. Puedes hacer cualquier tipo de petición
además de las habituales GET, POST, PUT y DELETE. Permite pasar parámetros
a las peticiones y muestra el resultado devuelto por el servicio.
Características:
Integración con Google Drive.
Visor de HTML, JSON y XML.
Solicitud única.
Historial de solicitudes.
Importación y exportación de datos.
Figura 26. Interfaz ARC