DISEÑO DE LA ARQUITECTURA DEL SOFTWARE (DAS) filediagramas facilita la compresión de problemas...

REPÚBLICA BOLIVARIANA DE VENEZUELA

MINISTERIO DEL PODER POPULAR PARA LA EDUCACIÓN

COLEGIO UNIVERSITARIO DE CARACAS

PROYECTO SOCIO TECNOLÓGICO

TRAYECTO 3 TRIMESTRE II

DISEÑO DE LA ARQUITECTURA DEL SOFTWARE (DAS)

Cedula Apellidos y Nombres Correo Electrónico

V-17207074 Silva R. Ángel A. [email protected]

V-16591329 González Edgar [email protected]

V-20303540 Jansasoy Yaribeth [email protected]

V-18009481 Prada R. Alejandro J. [email protected]

Profesor(es)

Marcos Gómez

Proyecto Socio Tecnológico - Trayecto 3 - Trimestre II

Sección: 1430232

Índice de contenidoINTRODUCCIÓN..................................................................................................................5

Propósito del Documento....................................................................................................6

Definiciones Siglas y Abreviaturas.....................................................................................7

I.DIAGRAMAS DE ESTRUCTURA.....................................................................................9

1.Diagrama de Clases..........................................................................................................9

1.2. Descripción de Diagrama de Clases ..........................................................................10

.........................................................................................................................................10

2.Diagrama de Objetos......................................................................................................11

2.1.Descripción de Diagrama de Objetos .........................................................................11

3.Diagrama de Paquetes....................................................................................................12

3.1.Descripción de Diagrama de Objetos .........................................................................12

4.Diagrama de Componentes............................................................................................13

4.1. Descripción del Diagramas de Componentes.............................................................14

5.Diagrama de Despliegue................................................................................................16

5.1.Descripción del Diagrama de Despliegues..................................................................17

I.DIAGRAMAS DE COMPORTAMIENTO.......................................................................18

1.Diagrama de Estado.......................................................................................................18

I.Descripción del Diagramas Estado.................................................................................18

II.DIAGRAMAS DE INTERACCIÓN................................................................................19

1.Diagrama de Secuencia..................................................................................................19

1.1.Descripción del Diagrama de Secuencia.....................................................................20

1- TDR y ERS Página 2


III.MODELO VISTA CONTROLADOR.............................................................................21

1.Diagrama de MVC.........................................................................................................21

1.1.Descripción Modelo Vista Controlador......................................................................21

IV.INTERFAZ USUARIO...................................................................................................24

V.REPORTES.......................................................................................................................25

PDF de Generación de Tarjeta QR.........................................................................25



INTRODUCCIÓN

El presente trabajo está diseñado de forma práctica y sencilla para comenzar a

conocer un poco más del diseño de arquitectura del sistema a implementar para la

comunidad del Colegio Universitario de Caracas (CUC), a través de una serie de diagramas

y su respectiva descripción representaremos la secuencia de las operaciones que se

realizarán para obtener la ejecución del proyecto propuesto. Aplicando el uso de los

diagramas facilita la compresión de problemas complicados y usualmente muy largos.

Para la realización de los diagramas se utilizó una herramienta para moldeamiento en

los estándares UML.

Brevemente facilitaremos una explicación del proyecto a ejecutarse, el Estudiante del

CUC necesitara obtener una Tarjeta de código de respuesta rápida (Quick Response, QR),

el cual se generara desde el portal web de la institución. Este diseñó para ser decodificado a

alta velocidad, a través del escaneo con un dispositivo móvil inteligente, así el estudiante

podrá tener fácil acceso a su información académica mediante un portal de consultas

intuitivo y adaptable a cualquier dispositivo, logrando de esta manera una automatización

del proceso de consultas académicas.



Propósito del Documento

Siguiendo las mejores prácticas de un compendio de metodologías, los profesores y

Especialistas de área del Colegio Universitario de Caracas (CUC) coincidieron en solicitar

los diferentes diagramas que en este documento se realizaran, con el fin de mantener un

estándar de documentación, sin importar que ciertos criterios no apliquen para todos los

proyectos.

En cumplimiento con esta solicitud de la institución, que para nosotros también pasa

a ser la comunidad, se desarrollan todos los diagramas solicitados, a fin de cumplir con los

estándares.



Definiciones Siglas y Abreviaturas

Código QR

(Quick Response Code, «Código de Respuesta Rápida») es un módulo paraalmacenar información en una matriz de puntos o en un código de barras bidimensional. Elobjetivo del código fue que su contenido se leyera a alta velocidad.

PHP

(Acrónimo recursivo de PHP: Hypertext Preprocessor) es un lenguaje de códigoabierto muy popular especialmente adecuado para el desarrollo web y que puede serincrustado en HTML.

MySql

Es un sistema de gestión de bases de datos relacionales (RDBMS) basado en SQL(Lenguaje de Consultas Estructuradas).

PDF (Portable Document Format,)

Formato de documento portátil, es un formato de almacenamiento para documentosdigitales independiente de plataformas de software o hardware. Este formato es de tipocompuesto (imagen vectorial, mapa de bits y texto).

HTML5 (HyperText Markup Language, version 5)

Es un estándar que sirve de referencia para la elaboración de páginas web en susdiferentes versiones, define una estructura básica y un código (denominado código HTML)para la definición de contenido de una página web, como texto, imágenes, videos, entreotros.

JQuery

Permite simplificar la manera de interactuar con los documentos HTML, manipularel árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con latécnica AJAX a páginas web.

CSS3 (cascading style sheets)

Hoja de estilo en cascada, es un lenguaje usado para definir y crear la presentaciónde un documento estructurado escrito en HTML o XML2 (y por extensión en XHTML).



DATACUC

Es el departamento de desarrollo del Colegio Universitario de Caracas, se encargadel Diseño, Desarrollo y Mantenimiento de la plataforma tecnológica de esta comunidad ypertenece a la Coordinación de Desarrollo Tecnológico.

BOOTSTRAP

Es un framework o conjunto de herramientas de software libre para diseño de sitiosy aplicaciones web. Contiene plantillas de diseño con tipografía, formularios, botones,cuadros, menús de navegación y otros elementos de diseño basado en HTML y CSS, asícomo, extensiones de JavaScript opcionales adicionales.



I. DIAGRAMAS DE ESTRUCTURA

1. Diagrama de Clases



1.2. Descripción de Diagrama de Clases

En el recuadro principal se representan las clases pertenecientes al sistema DATACUC,

del cual se generararn varios de los repostes disponibles en el sistema QR, en la cual solo se

necesita el acceso a la Base de datos para obtener la informacion de los usuarios en sesion.



2. Diagrama de Objetos

2.1.Descripción de Diagrama de Objetos

El estudiante representa el principal usuario del sistema, este debe crear un reporte

con el código QR desde el actual sistema que se encuentra en www.cuc.edu.ve. Este reporte

tendrá la información para ingresar al sistema de consulta de datos de una forma más

simple.

Las consulta realizadas por los estudiantes, se generaran en un archivo PDF, el cual

podrán guardar en sus dispositivos móviles o imprimir directamente.



3. Diagrama de Paquetes

3.1.Descripción de Diagrama de Objetos

El paquete de interfaz de usuario (GUI), el cual contiene el código QR y el acceso al

sistema. Cada uno de los elementos pertenecientes al paquete Alumno, corresponde a las

consultas que este puede realizar desde el sistema.



4. Diagrama de Componentes

4.1. Descripción del Diagramas de Componentes

Diagrama de Componentes del Sistema (Generar Código QR)

Para Generar el Código QR lo estudiantes deben acceder a la página

www.cuc.edu.ve, una vez que cargue la página debes iniciar sesión dando clic en el botón

donde indica Estudiante / Trabajador, en el recuadro siguiente se solicita datos de acceso

(Usuario y contraseña), al colocar los datos correctamente se ingresa a la página principal

del aplicativo (Homecuc.html), una vez allí se debe seleccionar la Opción GenerarQR, al

dar clic llamara a la clase GeneraReporteQR.php donde utilizara la librería FPDF.php para

generar el PDF y la ChartAPI para generar la imagen del Código QR con los Datos de la

sesión (La cedula del estudiante).

Diagrama de Componentes del Sistema (Consulta de Datos y generar PDF)

Para Ingresar se debe escanear el Código QR con un dispositivo Inteligente (Tener

Instalado un APP que escanee el Código QR), una vez es escaneado el Código QR

accederá a la página en Login.php donde se debe introducir la contraseña (la misma



contraseña que se usa para acceder al portal desde la página web del CUC), allí dispara la

acción ValidaAcceso.php, donde consultara la contraseña en la Base de Datos, de ser

incorrecta la contraseña volverá a pedir la misma (entra en LoginError.php) hasta ser la

correcta, al Tercer Intento entra en Logut.php; de ser correcta la contraseña abrirá la página

Index.html donde mostrara las opciones segun el alcance definido.

Al seleccionar Inscripción Actual llamara a la acción Constancia de Inscripcion.php

donde retornara los datos de la Base de Datos (UPC) y generará el PDF con FPDF.

Al seleccionar Notas del Período llamara a la acción Constancia de Notas Simples.php

donde retornara los datos de la Base de Datos (UPC) y generará el PDF con el FPDF.

Al seleccionar Notas Definitivas por Trayecto llamara a la acción

ConstanciaNotasLapsoImpreso.php donde se retornara los datos de la Base de Datos (UPC)

y generará el PDF con el FPDF.



5. Diagrama de Despliegue

5.1.Descripción del Diagrama de Despliegues

Diagrama de Despliegues del Sistema (Generar Código QR)

En el Servidor 01 Se encuentra el HTML y los PHP donde se comunicara con el

Servidor 02 donde se encuentra la Base de datos.

Diagrama de Despliegues del Sistema (Consulta de Datos y generar PDF)

En el Servidor 01 Se encuentra el HTML y los PHP donde se comunicara con el

Servidor 02 donde se encuentra la Base de datos.



I. DIAGRAMAS DE COMPORTAMIENTO

1. Diagrama de Estado

I. Descripción del Diagramas Estado

Se identifica cada una de las fases de ejecución del proyecto, mediante un tiempo de

espera se obtendrán resultados de cada uno de los estados presentados en el diagrama de

estado.

Se presenta cuatro (4) estados definidos en: tiempo de Espera, Aceptado, Espera de

Respuesta y Creado para la ejecución y el fin de cada uno de los proceso del Proyecto.



II. DIAGRAMAS DE INTERACCIÓN

1. Diagrama de Secuencia



1.1.Descripción del Diagrama de Secuencia

En el Diagrama presentado observamos la ejecución del proceso en forma secuencial.

El Estudiante al obtener la Tarjeta QR y escanear el código accederá al sistema mediante

una validación. El sistema proporcionará la opción al estudiante de elegir la información

que desee obtener, que a su vez será de su elección imprimir o guardar el reporte generado.

III. MODELO VISTA CONTROLADOR

1. Diagrama de MVC



1.1.Descripción Modelo Vista Controlador

Implementación Modelo Vista Controlador: Generación Tarjeta QR

Modelo: La base de datos es en Mysql, se trabajara bajo la estructura del esquema

UDTDATACUC suministrada por la comunidad, ya que la única función de la

aplicación es consultar información.

Vista: Codifica y mantiene la presentación final de la aplicación de cara al usuario,

la misma será elaborada código HTML5 con CSS3 y Jquery, Mantiene el home que

conserva la comunidad actualmente, y se agrega una nueva Opción que se denomina

"Generar Tarjeta QR”. Se utilizara Framework de Bootstrap para obtener un diseño

ajustable a cualquier resolución.

Controlador: Es la parte más importante del sistema, ya que es el enlace entre el

modelo y la vista. El sistema a implementar será elaborado y mostrado con un

Generar.PHP, generando un archivo PDF el cual tendrá anexa un código QR para el

escaneo del mismo. Esta es la parte lógica de la aplicación.



Implementación Modelo Vista Controlador: Código QR

Modelo: La base de datos es en Mysql, se trabajará con la estructura del esquema

UDTDATACUC suministrada por la comunidad, ya que la única función de la

aplicación es consultar información.

Vista: Codifica y mantiene la presentación final de la aplicación de cara al usuario,

para esta el código es en HTML5 con CSS3 y Jquery, se utilizara Framework de

Bootstrap para obtener un diseño ajustable a cualquier resolución.

Controlador: Es la parte más importante, ya que es el enlace entre el modelo

y la vista. El sistema a implementar será elaborado con PHP. Mostrando una serie

de opciones con las que trabaja actualmente la comunidad.



Entre los controladores se encuentra:

ValidaAcceso.php: Permite la validación y acceso del estudiante al sistema.

ConstanciaNotasLapsoImpreso.php: Genera un Archivo PDF con las notas de lapso,

el archivo puede ser impreso o guardado dependiente del complacencia del

estudiante

ConstanciadeInscripcion.php: Genera un Archivo PDF constando que el estudiante

está Inscrito en la Institución, el archivo puede ser impreso o guardado dependiente

del complacencia del estudiante

ConstanciadeNotassimpleInscripcion.php: Genera un Archivo PDF mostrando un

constancia simple de las notas del estudiante, el archivo puede ser impreso o

guardado dependiente del complacencia del estudiante.



IV. INTERFAZ USUARIO



V. REPORTES

PDF de Generación de Tarjeta QR


DISEÑO DE LA ARQUITECTURA DEL SOFTWARE (DAS) filediagramas facilita la compresión de problemas...

Documents

Transcript of DISEÑO DE LA ARQUITECTURA DEL SOFTWARE (DAS) filediagramas facilita la compresión de problemas...