Software Architecture Document OCLING - Organic Chemistry Learning Aplicación Para Apoyar La Enseñanza De Química Orgánica En Universidades FACULTAD DE INGENIERIA CARRERA DE INGENIERIA DE SISTEMAS BOGOTÁ, D.C. 2016
Página de Firmas Directora del Trabajo de Grado: Ing. Luisa Fernanda Barrera León Estudiante de Ingeniería de Sistemas: Daniel Oswaldo Melo Romero
Historial de Cambios Versión Fecha Sección del documento Descripción del cambio Responsable 0.1 03/02/2016 Todo documento el Creación del documento y especificación del contenido que debe tener cada sección. Se agregaron los encabezados de cada sección, la tabla de historial de cambios, tabla de contenido, lista de ilustraciones y lista de tablas. Daniel Melo 0.2 09/02/2016 Todo documento el Versión inicial de cada una de las secciones junto con sus respectivas referencias. Daniel Melo
Prefacio En la continuación de buenas prácticas de desarrollo y con el documento Software Requirements Specification donde se establecio los métodos para la buena funcionalidad de la aplicación, se realiza el documento Software Architecture Document (Documento de Arquitectura de Software) o por sus siglas SAD contiene la arquitectura del proyecto OCLING, que será desarrollado, así mismo se mostrará cada una de las vistas y los elementos que la componen, para modelar las funcionalidades de la aplicación.
Tabla de Contenido Prefacio... 4 Lista de Ilustraciones... 6 1. Introducción... 7 1.1 Propósito... 7 1.2 Alcance... 7 2. Arquitectura... 8 2.1 Vista de Escenarios... 8 2.2 Vista Lógica... 10 2.3 Entidades... 11 2.4 Vista Física... 14 2.5 Vista de Procesos... 15 2.5.1 Consultar teoría... 15 2.5.2 Realizar juego... 16 2.5.3 Proceso realizar quiz... 16 2.5.4 Iniciar Sesión... 17 2.5.5 Registrar Usuario... 18 3. Diseño de Interfaz de Usuario... 18 4. Glosario... 22 5. Referencias... 22
Lista de Ilustraciones Ilustración 1 Modelo 4+1 vistas de Kruchten. [1]... 7 Ilustración 2 Diagrama Casos de Uso... 9 Ilustración 3. Vista física... 14 Ilustración 4. Proceso consultar teoría... 15 Ilustración 5. Proceso realizar juego... 16 Ilustración 6. Proceso realizar quiz... 17 Ilustración 7 Inicio de Sesión... 17 Ilustración 8 Registro de Usuario... 18 Ilustración 9 Pantalla Menú... 19 Ilustración 10 Sección Teoría... 19 Ilustración 11 Sección de Juego... 20 Ilustración 12 Sección Evaluativa... 21 Ilustración 13 Sección Administración... 21
1. Introducción 1.1 Propósito En el presente documento se hablará del proyecto OCLING, desarrollado por el estudiante Daniel Melo Romero y presentado como trabajo de grado, con de fin de presentar un número de vistas arquitecturalmente significantes para representar diferentes aspectos del sistema, cuya intención es documentar y transmitir a los stakeholders, las decisiones arquitecturalmente significantes así mismo los intereses que sean referentes al sistema basado en los requerimientos especificados para el aplicativo (Ver Especificación de Requerimientos.xlxs). Para representar las vistas arquitecturales, la estructura del documento está basado en el modelo de vistas 4+1 de Kruchten. [1] Ilustración 1 Modelo 4+1 vistas de Kruchten. [1] 1.2 Alcance El alcance de este SAD, consiste en describir la arquitectura del proyecto OCLING, que será desarrollado, así mismo se mostrará cada una de las vistas y los elementos que la componen, para modelar las funcionalidades de la aplicación.
2. Arquitectura El modelo de vistas arquitecturales 4+1, que fue desarrollado por Philippe Kruchten, fue el utilizado para describir la arquitectura de la aplicación; este modelo se adapta al estándar IEEE 1471-20000. Este modelo describe la arquitectura mediante cinco vistas, las cuales se describen a continuación para un mejor entendimiento del lector [2]. Vista lógica: Esta vista define lo que el sistema debería proveer a los usuarios finales en términos de servicios. Vista física: El sistema funciona en una red de computadores, o nodos de procesamiento. Todos estos elementos deben estar mapeados en diferentes nodos según los componentes del sistema. Vista de procesos: Esta vista puede describir el sistema en muchos niveles de abstracción en cuanto a procesos se refiere. Vista de despliegue: Se enfoca en la distribución del sistema basándose en el software; es decir que se hace una división de sub-sistemas y cada uno de estos es organizado en una jerarquía de capas donde cada una tiene una interfaz bien definida que permite la comunicación con las demás. Vista de escenarios: Esta vista muestra cómo están unidas las otras cuatro vistas en escenarios o usualmente casos de uso, con lo que se tiene una trazabilidad de componentes. 2.1 Vista de Escenarios De manera conjunta con el levantamiento de requerimientos se realizó la definición de los casos de uso de la aplicación donde se puede observar los servicios ofrecidos y tener una perspectiva general de las funcionalidades que se desarrollaron en la aplicación:
Ilustración 2 Diagrama Casos de Uso En el diagrama podemos ver las relaciones que tienen con los actores que hacen parte del mismo, con los componentes y servicios que hacen parte del sistema. Estos actores son Estudiante: Representa el usuario que utiliza los servicios adaptados por el profesor como lo son visualizar información teórica de un átomo, realizar un quiz o jugar en la aplicación. Profesor: Representa el administrador de la aplicación quien modifica el contenido según las necesidades que presente el ambiente. Los casos de uso con los que interactúan los estudiantes y a los cuales también se encuentran asociados el profesor son: el inicio de sesión, la visualización de realidad aumentada, el desarrollo de quices y juegos, la consulta de teoría y la consulta de ubicación. Inicio de sesión: Permite al usuario el acceso a las opciones que presenta la aplicación.
Visualización de realidad aumentada: Permite al usuario la visualización de una imagen de un átomo en realizada aumentada basado en una imagen precargada en la aplicación. Desarrollo de quices: Permite al usuario realizar evaluaciones cortas previamente cargadas y modificadas por el profesor de la clase según las necesidades. Jugar: Permite al usuario dibujar átomos y enlaces para realizar diagramas semejantes a los que el profesor ha cargado previamente. Consulta de teoría: Permite ver la información básica teórica de átomos. Consulta de ubicación: Permite a la aplicación obtener la ubicación del usuario con el fin de validar si le es permitido o no la presentación de quices. Cabe aclarar que el profesor tiene adicionalmente casos de uso asociados como lo son la administración de quiz, juego y teoría. Esto se presenta debido a que es necesario de una persona que actualice constantemente la aplicación y pueda tener conocimiento del avance de los estudiantes. 2.2 Vista Lógica La vista lógica muestra una abstracción modelado en clases y sus relaciones. Para este proyecto, la vista lógica se muestra a continuación mediante el diagrama de clases.
2.3 Entidades En las siguientes tablas se describe cada entidad que está en la Ilustración Modelo de Dominio. Cada campo se refiere a: Entidad: nombre de la entidad a describir. Descripción: se detalla en que influye esa entidad en el diagrama. Atributos: explicación de los atributos. Entidad Usuario Descripción Atributos Es una abstracción del usuario físico, este tendrá contacto directo con la aplicación por medio de la pantalla táctil. Contraseña: Palabra clave para poder generar acceso a la aplicación. Email: Dirección electrónica donde se puede contactar al usuario. ID Usuario: Identificador único e irrepetible. Nombre: Nombre del Usuario dado en el momento del registro. Rol: Numero que identifica si el usuario es un profesor (1) o un estudiante (2). Semestre: Número del semestre en curso del estudiante. Teléfono: Número donde se puede contactar al usuario. Universidad: Nombre de la institución educativa donde se encuentra el usuario. Tabla 1 Entidad Usuario Entidad Descripción Atributos Teoría Componente que contiene la información teórica para ser mostrada en la aplicación. Átomos: Listado de átomos asociados. Tabla 2 Entidad Teoría Entidad Átomo
Descripción Atributos Componente que será mostrado en la pantalla según la selección realizada en la pantalla de teoría. Electrones por nivel Estructura cristalina Nombre Número Serie Química Símbolo Tabla 3 Entidad Átomo Entidad Descripción Atributos Juego Componente que presenta los diferentes niveles que se encuentran en la aplicación. ID_Juego: Identificador único e irrepetible. Niveles: Lista de los niveles asociados al juego. Tabla 4 Entidad Juego Entidad Descripción Nivel Componente que presenta la relación de los enlaces y los átomos. Atributos ID_Nivel: Identificador único e irrepetible. Enlaces: Lista de los enlaces que se encuentran en el nivel. Tabla 5 Entidad Nivel Entidad Descripción Atributos Enlace Componente que presenta los componentes de un enlace dibujado sobre la aplicación. Atomo A: Identificador del átomo que se encuentra en un extremo del enlace. Atomo B: Identificador del átomo que se encuentra al otro extremo del enlace.
Eje X Final: Posición en el eje x del átomo A. Eje X Inicial: Posición en el eje x del átomo B. Eje Y Final: Posición en el eje y del átomo A. Eje Y Inicial: Posición en el eje y del átomo B. Tabla 6 Entidad Enlace Entidad Descripción Quiz Componente que presenta la sección evaluativa de la aplicación. Atributos ID_Quiz: Identificador único e irrepetible. Preguntas: Lista de preguntas y respuestas contenidas para el quiz. Respuesta: Lista de la cantidad de preguntas correctas por cada pregunta. Tabla 7 Entidad Quiz Entidad Descripción Pregunta Componente que presenta la información básica de la pregunta. Atributos ID_Pregunta: Identificador único e irrepetible. Respuesta Falsa A: Cadena de caracteres con una respuesta errónea de la pregunta. Respuesta Falsa B: Cadena de caracteres con una respuesta errónea de la pregunta. Respuesta Falsa C: Cadena de caracteres con una respuesta errónea de la pregunta. Respuesta Verdadera: Cadena de caracteres con una respuesta correcta de la pregunta. Tabla 8 Entidad Pregunta Entidad Descripción Respuesta Componente que presenta un contador de respuestas correctas por cada pregunta.
Atributos ID_Pregunta: Identificador único e irrepetible. Correctas: Cantidad de preguntas correctas contestadas. Tabla 9 Entidad Respuesta 2.4 Vista Física La vista física muestra la organización del software y hardware desde la perspectiva del programador: Ilustración 3. Vista física El dispositivo del usuario se conecta con el servidor para acceder a la base de datos únicamente. El dispositivo de usuario ejecuta la aplicación en formato JAVA. En la imagen anterior se puede observar el uso de las diferentes librerías utilizadas dentro del desarrollo de la aplicación OCLING:
ARToolKit: es un software que permite el desarrollo de aplicaciones de realidad aumentada; es multi-plataforma y se ejecuta en Windows, Mac OS X, Linux, ios y sistemas operativos Android. La funcionalidad de cada versión es el misma, pero el rendimiento puede variar dependiendo de las diferentes configuraciones de hardware [42]. MPAndroidChart: es una librería que permite la representación y el manejo de información por medio de gráficos [43]. 2.5 Vista de Procesos Para la vista de procesos se realizaron los diagramas de flujo para así poder ver los procesos más importantes del sistema. Para esta sección se tomaron dos casos de uso que conforman tres diagramas de secuencia que se consideran los primordiales para el funcionamiento del sistema, estos son: Consultar Teoría Realizar Juego Realizar Quiz El lector puede detallar cada proceso nombrado anteriormente a continuación. 2.5.1 Consultar teoría En la siguiente imagen se puede observar el flujo de lo proceso para la realización de una consulta teórica sobre el aplicativo: Ilustración 4. Proceso consultar teoría
El proceso inicia cuando el usuario ha accedido a la aplicación e iniciado sesión. Allí el usuario puede elegir si desea realidad aumentada. En caso de que lo desee, el sistema accede a la realidad aumentada, activa la cámara y digitaliza la imagen; allí es posible volver a seleccionar un átomo o volver al menú principal. En caso de que el usuario no desee ver la realidad aumentada puede ver la teoría del átomo y luego volver al menú principal. Si el usuario vuelve al menú principal finaliza el proceso. 2.5.2 Realizar juego En la siguiente imagen se puede observar el flujo de lo proceso para jugar sobre el aplicativo: Ilustración 5. Proceso realizar juego El proceso inicia cuando el usuario accede a la aplicación e inicia sesión. Allí el usuario selecciona el modo juego y realiza el ejercicio propuesto por la aplicación. Si el usuario realiza el ejercicio correctamente puede pasar al siguiente o ver el puntaje. En caso de que la solución propuesta sea incorrecta, el sistema notifica que el usuario debe corregir el ejercicio. 2.5.3 Proceso realizar quiz En la siguiente imagen se puede observar el flujo de lo proceso para realizar un quiz sobre el aplicativo:
Ilustración 6. Proceso realizar quiz El proceso inicia cuando el usuario accede a la aplicación e inicia sesión. Allí, el usuario inicia el proceso de evaluación y el sistema actualiza la ubicación del profesor para luego validar que el usuario está a 200 metros o menos de distancia del profesor; si esta condición es válida, el usuario puede desarrollar la evaluación, la aplicación le mostrará los resultados y actualizará la información. Si el estudiante es más lejos de 200 metros del profesor el sistema le enviará un mensaje de error. 2.5.4 Iniciar Sesión Ilustración 7 Inicio de Sesión
2.5.5 Registrar Usuario 3. Diseño de Interfaz de Usuario Ilustración 8 Registro de Usuario Menus Están basados en el modelo de selección el cual dice que el usuario selecciona entre distintas alternativas presentadas por la interfaz. Los títulos contienen la información de la acción que se realizará al seleccionarlo o el contenido a encontrar con esta opción [5].Los menús también cumplen con el atributo de la manipulación directa el cual dice que el usuario conoce a donde llegará con leer el título de la selección de tal manera que el usuario pueda usar la aplicación de manera más intuitiv
Ilustración 9 Pantalla Menú Secciones Presentará una sección de teoría donde se mostrará información relacionada con los átomos. Ilustración 10 Sección Teoría
Continuando, seguirá una sección que permite el juego de crear enlaces adicionando átomos a elección del usuario. Ilustración 11 Sección de Juego Finalmente se presenta una sección evaluativa
Ilustración 12 Sección Evaluativa Para el rol de profesor, se presenta una sección de administración. Ilustración 13 Sección Administración
4. Glosario ANDROID ARQUITECTURA ÁTOMO CASO DE USO HARDWARE JAVA SAD SISTEMA SOFTWARE SRS Sistema operativo propio de Google Inc. para dispositivos móviles principalmente. En la ingeniería de sistemas, la arquitectura se refiere a la estructura base de un software y la interacción entre todas las partes que componen esa estructura. Unidad más pequeña de la materia que a su vez contiene las propiedades de un elemento químico Diagrama que describe la interacción típica entre un usuario y un sistema de información. Colección física de componentes electrónicos que conforman un dispositivo. Lenguaje de programación concurrente, orientado a objetos, que se ejecuta sobre una plataforma independiente de las características del dispositivo que se esté usando. Documento de Arquitectura del Software. Para efectos prácticos de este documento, sistema se considera a la aplicación OCLING Conjunto de componentes lógicos que permiten la realización de tareas usando como base hardware. Especificación de Requerimientos del Software 5. Referencias [1] N. Philippe Kruchten, «The 4+1 view model of software architecture,» Noviembre 1995. [En línea]. Available: http://www3.software.ibm.com/ibmdl/pub/software/rational/web/whitepapers/2 003/Pbkp1.pdf. [2] P. Kruchten, «Architectural Blueprints The 4+1 View Model of Software Architecture,» 1995.
[3] G. Inc., «Managing Projects Overview,» [En línea]. Available: http://developer.android.com/intl/es/tools/projects/index.html.