Ing. Gabriel H. Fuentes AmorochoIng. Juan Pablo Rodríguez Montoya

Software Design Descripti

onS.D.D

Historial de CambiosSección Fecha Versión de la sección

7.4 27/4/2016 0.1

7.2 27/4/2016 0.1

6.2 27/4/2016 0.1

6.3 27/4/2016 0.1

5 27/4/2016 0.1

introducción 27/4/2016 0.1

6.1 16/5/2016 0.1

7.1 16/5/2016 0.1

7.3 16/5/2016 0.1

Actualización interfaz 24/5/2016 0.1

2. Tabla de contenido

Historial de Cambios.......................................................................................................2

2. Tabla de contenido......................................................................................................3

3. Lista de figuras............................................................................................................4

4. Lista de tablas..............................................................................................................5

5. Introducción................................................................................................................6

6. Arquitectura................................................................................................................76.1. Vista lógica del sistema.....................................................................................................76.2. Vista física del sistema......................................................................................................86.3. Vista de procesos del sistema...........................................................................................9

6.3.1. CRUD Usuario..................................................................................................................96.3.2. Jugar...............................................................................................................................106.3.3. Módulo Seguimiento.....................................................................................................116.3.4. Módulo Adaptación.......................................................................................................11

7. Diseño Detallado....................................................................................................137.1. Estructura del sistema.....................................................................................................137.2. Comportamiento del sistema..........................................................................................137.3. Persistencia................................................................................................................147.4. Interfaz de usuario..........................................................................................................16Actualización de la Interfaz....................................................................................................22

8. Referencias................................................................................................................28

3. Lista de figurasIlustración 1 Vista Lógica del Sistema, Diagrama de componentes [8]..............................................7Ilustración 2 Ilustración 2 Vista física del sistema, diagrama de despliegue [9].................................8Ilustración 3 Proceso CRUD usuario...................................................................................................9Ilustración 4 Proceso Jugar...............................................................................................................10Ilustración 5 Proceso Módulo de Seguimiento.................................................................................11Ilustración 6 Proceso Modulo de Adaptación...................................................................................12Ilustración 7 Modelo Entidad-Relación MDP....................................................................................15Ilustración 8 Árbol de Navegabilidad................................................................................................16

4. Lista de tablasTabla 1 Descripción Proceso CRUD usuario........................................................................................9Tabla 2 Descripción Proceso Jugar...................................................................................................10Tabla 3 Descripción Proceso Módulo de Seguimiento.....................................................................11Tabla 4 Descripción Proceso Módulo de Adaptación.......................................................................12Tabla 5 Descripción Modelo Entidad Relación MDP.........................................................................15Tabla 6 Descripción Árbol de Navegabilidad....................................................................................16Tabla 7 Nueva Interfaz de MDP........................................................................................................22

5. Introducción

Este documento SDD (Software Design Description) contiene la especificación general del diseño de software de la aplicación La magia de las Palabras. Por consiguiente ilustra todas las relaciones entre cada uno de estos diseños y componentes que componen el sistema de la aplicación. Esta aplicación esta diseñada sobre una plataforma cliente servidor orientada hacia aplicaciones móviles, utilizando como lenguaje de programación el lenguaje nativo Android [1]. Así mismo está diseñado buscando la simplicidad, sea fácil de usar y manejar, de esta manera no es necesario ningún tipo de manual de usuario siempre y cuando se cumpla con todas las especificaciones requeridas por el cliente. [2] [3]

6. ArquitecturaEn esta sección se describirá la arquitectura del sistema, basado en el modelo Cliente-Servidor. Elección realizada debido al entorno de programación Android para la aplicación La Magia de las Palabras. Además se describirán las vistas lógica, física y de procesos del sistema a desarrollar. [4][5] [6] [7] [8] [9] [10]

6.1. Vista lógica del sistemaEl siguiente es la vista lógica de la aplicación la magia de las palabras. Para la lógica del sistema se aplicó el patrón arquitectónico de Capas.

Ilustración 1 Vista Lógica del Sistema, Diagrama de componentes [8]

1. Capa Presentación

La primera capa viene siendo la capa de presentación. Esta capa presenta la aplicación la Magia de las Palabras; es decir, la interfaz gráfica, la captura de información. En otras palabras todo lo relacionado con la interacción que el usuario tiene con la aplicación.

2. Capa Negocio

La siguiente capa, es la de negocio. Donde residen los programas que se ejecutan, se reciben las peticiones del usuario y se envían las respuestas tras el proceso. Esta capa se comunica con la capa de presentación, para recibir las solicitudes y peticiones por parte del usuario. Es el encargado de realizar el llamado de los métodos correspondientes de la aplicación y de presentar los resultados. Además es la que se comunica con las demás capas que posee el sistema, para solicitar o recuperar datos relevantes de las otras capas.

3. Capa PersistenciaEsta capa es donde residen los datos y es la encargada de acceder a los mismos. Está formada por 2 gestores de bases de datos, uno el cual se encarga de almacenar de manera local en el dispositivo móvil los datos de la aplicación y la otra se encarga de hacer las peticiones a la base de datos (backendless).

4. Capa Seguridad

Esta capa es como un controlador, su única función es la de generar permisos a la aplicación según el perfil de usuario que se maneja; es decir, es la encargada de permitir los accesos de la aplicación según el tipo de usuario.

6.2. Vista física del sistema

Ilustración 2 Ilustración 2 Vista física del sistema, diagrama de despliegue [9]

El sistema a nivel físico trabaja bajo una arquitectura cliente/servidor, a nivel lógico se busca separar la lógica de negocio, la interfaz de usuario y el modulo encargado de gestionar las peticiones de datos.

Dentro del dispositivo del cliente se implementa una base de datos interna que realiza las peticiones a la base de datos del servidor Backendless. Así mismo se realiza la interfaz del usuario como tal la aplicación que manipula el usuario desde su dispositivo. A través del cual hace las peticiones a la base de datos para la tener en todo momento acceso a la información de este. Para asegurar esto, adicionalmente se añade dicha información a la base de datos local implementada para la aplicación.

El servidor se encarga de alojar la base de datos Backendless. La conexión al servidor desde el dispositivo se realiza mediante json y el Media Service API.

Configuración del Cliente

El dispositivo que cumple la función de cliente debe tener soporte de al menos Android 4.2, para un funcionamiento correcto de la aplicación.

Configuración del Servidor

El servidor utilizado en el cual es alojada en la aplicación y la base de datos es un servidor gratuito compartido suministrado por Backendless.com.

6.3. Vista de procesos del sistemaLos procesos relacionados a la aplicación La Magia de las Palabras se muestran a continuación [5]:

6.3.1. CRUD UsuarioIlustración 3 Proceso CRUD usuario

Tabla 1 Descripción Proceso CRUD usuario

Proceso Descripción

CRUD Usuario

Ingreso a la aplicación El usuario ingresa a la magia de las palabras a través de la aplicación en su dispositivo móvil

Iniciar Sesión El usuario debe ingresar correo y contraseñaEstado Cuenta Usuario El sistema verifica la existencia del usuario

Crear Cuenta El usuario crea una cuenta con nombre, correo y contraseña

Correo Confirmación El usuario recibirá un correo confirmando su vinculación con la aplicación

Ingresar Correo y Contraseña

El usuario ingresa a la URL de autenticación y da como resultado un error.

Fallo Inicio Sesión El usuario al ingresar mal el correo o la contraseña recibe un mensaje

6.3.2. Jugar

Ilustración 4 Proceso Jugar

Tabla 2 Descripción Proceso Jugar

Proceso Descripción

Jugar

Iniciar Sesión El usuario debe ingresar correo y contraseñaEntrar Sección Jugar El usuario entra al mapa principal de actividades

Seleccionar Mundo El usuario puede elegir entre las actividades del mapa

Condicionales

El usuario puede en primera instancia elegir una actividad que puede o no estar realizada previamente, a lo cual puede decidir entre si volverla a realizar o pasar a realizar una actividad Nueva. Una vez termine de realizar una actividad el usuario esta en libertad de elegir si continua jugando o no

Realizar Actividad El usuario juega la actividad seleccionada

Calificar Estado Emocional

El usuario una vez finalizada una actividad se le muestra una pequeña evaluación sobre el impacto emocional de la actividad

Fin de sesión El usuario decide no seguir jugando

6.3.3. Módulo Seguimiento

Ilustración 5 Proceso Módulo de Seguimiento

Tabla 3 Descripción Proceso Módulo de Seguimiento

Proceso Descripción

Módulo de Seguimiento

Iniciar Sesión El Tutor debe ingresar correo y contraseñaEntrar Modulo Familiar El Tutor introduce contraseña para entrar en el módulo

Contraseña correcta

El tutor al introducir la contraseña en caso de ser errónea se le notifica y no le permite entrar en el módulo

Estadísticas Sección de este módulo que le permite al tutor ver los puntajes de las actividades que el usuario ha realizado

Estado Emocional

Sección de este módulo que le permite al tutor ver estado emocional en cada una de las actividades que el usuario ha realizado

Actividad en la Aplicación

Sección de este módulo que le permite al tutor ver que actividades el usuario ha realizado y cuantas veces en el tiempo

Fin de sesión El tutor cierra la sesión

6.3.4. Módulo Adaptación

Ilustración 6 Proceso Modulo de Adaptación

Tabla 4 Descripción Proceso Módulo de Adaptación

Proceso Descripción

Módulo de Adaptación

Ingreso Sección Familiar El tutor debe ingresar contraseñaSeleccionar sección de Adaptación El tutor selecciona la opción de adaptar contenido

Buscar Frase El tutor puede buscar una frase

Ver Catálogo Frases El Tutor puede ver las frases existentes en la aplicación

Agregar Frase El Tutor agrega frases ya sea escritas o la que buscó

Fin de sesión El Tutor da por finalizada la adaptación y cierra sesión

7. Diseño DetalladoA lo largo de esta sección se ilustra toda la interacción visual de MDP1 junto con toda la extensión de interacciones del sistema.

7.1. Estructura del sistema

La Magia de las Palabras está desarrollada sobre una plataforma cliente servidor orientado a aplicaciones móviles. Utilizando como lenguaje de programación Android nativo, bajo el marco de trabajo Android Studio.

Utiliza el patrón de arquitectura Modelo-Vista-Controlador donde se separa los datos y la lógica de negocio de la interfaz de usuario y la gestión del sistema, para mayor información remítase a la “Sección 6.2 Vista física del Sistema”.

Este patrón de arquitectura esta se encuentra desglosado en componentes para su mayor manejo y control, donde cada uno de estos están relacionados por medio de un Súper Controlador para de esta manera coordinar la lógica general del sistema, y por medio de cada uno de los controladores que despliegan los modelos que determinan la estructura que los define, para mayor información remítase a la “Sección 6.1 Vista Lógica del Sistema”.

7.2. Comportamiento del sistema

En esta sección el arquitecto determino a través de análisis y la especificación realizada en la sección 6.3 Vista de procesos del sistema, cada uno de los procesos del sistema y se identificaron que las principales funcionalidades con las cuales el usuario interactúa directamente.

Posterior a este análisis, se determina el flujo de datos de cada uno de los procesos identificados y se llega a la conclusión que todos los procesos no poseen una complejidad muy alta por lo cual no tiene sentido realizar un diagrama de secuencia a dichos procesos.

Para la aplicación de la Magia de las Palabras, tiene sentido identificar cómo se realiza cada acción, con ánimo de establecer la complejidad máxima de cada proceso (sin decir, que dicha dificultad es alta), para usar esto como crixterio para priorizar la implementación de los requerimientos asociados a cada proceso descrito en la sección 6.3 Vista de procesos del sistema .

A continuación se presentan las características de los casos de uso en cuanto a su proceso en el sistema:

CRUD Usuario (CU-001): El sistema se encarga de crear cuentas de usuario, verificar cuenta y cerrar sesión. Para la creación de la cuenta se recibe los datos de usuario

1 La Magia de las Palabras

(Nombre de usuario (niño 5-6 años), Contraseña y correo). Se realiza en una consulta (query) que crea la cuenta. Para la verificación toma los datos de contraseña y correo y realiza una consulta en la base de datos, por lo cual no es lo suficientemente complejo para justificar mediante un diagrama de secuencia.

Jugar (CU-002): El sistema carga un mapa con los niveles. Estos niveles las actividades asociadas al mapa de actividades cargan frases e imágenes. Las actividades son muy sencillas debido a constan de validaciones (si corresponde o no a la frase a la original). Estas son simples consultas de la base de datos.

Ver Seguimiento (CU-003): El sistema carga módulos que realizan el seguimiento emocional, de actividad y puntaje de la aplicación. Estos modulos son gráficas elementos como puntajes, imágenes y texto. Los cuales al igual que en el caso de uso anterior se realizan por consultas en la base de datos. Procesadas por una librería llamada MPChart

Ver Reportes (CU-004): El sistema carga las gráficas que han sido procesadas por la librería MPChart.

Ver Notificaciones (CU-005): El sistema en caso de ocurrir un evento no estipulado en la lógica del sistema, envía a manera de pop-up un mensaje. Otro caso de mensajes es en el momento de creación de una cuenta o un elemento de la aplicación.

Adaptar Contenido (CU-006): El sistema carga este módulo el cual permite conocer la información que se guarda en la aplicación, así como el de agregarla. Esto se realiza a través de consultas en la base de datos muy elementales.

Agregar Frase (CU-007): El sistema carga frases en esta sección para que el usuario pueda crear una frase y añadirla. Esto se realiza a través de una query que crea un espacio en la base de datos.

Buscar Frase (CU-008): El sistema carga todo el contenido de la aplicación. Esto se realiza a través de una query que trae toda la información de la base de datos local de la aplicación.

7.3. PersistenciaEn esta sección se explicara de forma detallada la capa de persistencia de datos. Esta capa se encarga de acceder a una fuente de datos o base de datos; en este caso para la persistencia de la aplicación móvil La Magia de las Palabras usaremos la base de datos que nos proporciona el sistema backendless. El cual es un sistema integrado para aplicaciones back-end con su propia plataforma cloud, hosting y sistema de base de datos exclusivo para aplicaciones móviles. Para que el programador entienda como se almacenarán los datos, se modeló la base de datos usando un

modelo entidad relación (MER). Este representa las entidades relevantes de para la persistencia de datos de la aplicación La Magia de las Palabras; a continuación mostraremos el modelo ER:

Ilustración 7 Modelo Entidad-Relación MDP

Tabla 5 Descripción Modelo Entidad Relación MDP

Nombre de la tabla

Descripción

Puntajes Los puntajes que posee el usuario según actividadUsers Estudiante o tutor que se encuentre registrado en la base de datos de MDPActividadesTiempo Número de veces que un usuario realiza una actividadFrasesNivel1 Información de frases, cantidad de palabras e imágenes de la actividad para el

nivel 1

FrasesNivel2 Información de frases, cantidad de palabras e imágenes de la actividad para el nivel 2

Homónimas Palabras, imágenes relacionadas a las palabras y la relación entre ellos. Bajo el concepto de palabras homónimas y homófonas

SecuenciaNivel1 Información de frases, cantidad de palabras e imágenes de la actividad para el nivel 1 y la validación del orden de la frase

SecuenciaNivel2 Información de frases, cantidad de palabras e imágenes de la actividad para el nivel 2 y la validación del orden de la frase

7.4. Interfaz de usuario

En esta sección se detalla mediante un árbol de navegación las diferentes vistas o pantallas de la interfaz gráfica con su respectiva relación (navegación) entre ellas. Esto con fin de que tanto el usuario como el desarrollador entiendan y utilicen la aplicación La magia de las Palabras. Y para el caso del desarrollador pueda implementar la Interfaz gráfica.

Ilustración 8 Árbol de Navegabilidad

Tabla 6 Descripción Árbol de Navegabilidad

Navegabilidad en la Magia de las Palabras DESCRIPCION

Inicio

menú principal

Mapa de actividades

Selección mundo

Juego

Evaluación emocional

entrar modulo tutores

Modulo Tutor

Puntajes por mundo

Estados emocionales

Gráfico de estado emocional

Actividad en la aplicación

inicio sesión

crear cuenta

(1) Pantalla principal de La magia de las palabras. Se muestran la pantalla principal de la aplicación. En esta el usuario puede iniciar sesión en la aplicación y conocer que debe pedir asistencia a un adulto responsable.

(2) Pantalla en la cual se muestra que el usuario puede ingresar sus datos y proceder a presionar el botón Iniciar sesión que le permitirá ingresar como usuario. En caso de no tener cuenta la puede crear.

(3) En esta pantalla, el tutor podrá registrar al niño que usará la aplicación indicando: Nombre, correo, y una contraseña. Posteriormente, el tutor presiona crear cuenta y este queda registrado en nuestra base de datos. Notificándole al correo que registro que es parte de los usuarios de la aplicación

(4) En la pantalla se muestran 2 pestañas una para que el niño pueda jugar, en la cual deberá seleccionar el botón Jugar.El otro botón está restringido para el tutor con una contraseña, para evitar que el niño vea la información pertinente a los tutores.

(5) En esta pantalla se muestra como el usuario una vez iniciada su sesión puede proceder al mapa de actividades, en donde debe seleccionar una poder jugar.Cada nivel posee un color, Naranja es un nivel que esta disponible para realizar pero no se ha hecho.Rojo es un nivel al cual aún no puede acceder, sin antes realizar el mundo anterior.Verde representa un mundo terminado el cual habilita al siguiente mundo.

(6)En esta imagen se puede ver que el usuario para acceder a esta sección debe colocar la contraseña que creó.

(7) En esta imagen se muestra el primer paso para comenzar la primera actividad de nivel 1 seleccionado. El usuario debe seleccionar empezar para realizar la actividad.

(8) Esta pantalla le permite al usuario calificar su experiencia después de haber terminado una actividad. La calificación se realiza sobre su estado de ánimo con la actividad del mundo elegido.

(9) En esta imagen se puede ver el menú de tutores donde pueden visualizar el seguimiento de las actividades realizadas por el niño.

En la primera pestaña puede acceder a las estadísticas sobre el desempeño del niño por actividad.En la segunda pestaña puede acceder a las estadísticas del estado emocional del niño en cada actividad.En la tercera pestaña puede acceder a las estadísticas sobre el tiempo de uso del sistema.

(10) En esta pantalla se visualiza las estadísticas sobre el desempeño del niño por actividad, el cual se accede desde el menú de tutores en la pestaña estadísticas.

(11) En esta pantalla el usuario puede elegir uno de los mundos para conocer el porcentaje de estado emocional del niño en ese mundo. Este se accede desde el menú de tutores en la pestaña estado de ánimo.

En la siguiente pantalla se puede visualizar en el mundo escogido, el porcentaje de veces que una emoción se ha elegido por la actividad. Esta pantalla se ve cuando se selecciona un mundo en la sección estado de ánimo del menú tutores.

En la siguiente pantalla se puede visualizar el tiempo de uso de la aplicación. Para acceder a esta es desde el menú de tutores en la pestaña estadísticas.

Actualización de la Interfaz.

En esta sección se muestra lo que se alcanzó a mejorar de la interfaz gráfica mostrando su funcionalidad y explicación así como en la sección anterior. Con la diferencia de mostrar los cambios finales que se lograron cambiar de la interfaz gráfica.

Tabla 7 Nueva Interfaz de MDP

Navegabilidad en la Magia de las Palabras DESCRIPCIÓN0 Esta pantalla es la pantalla de

bienvenida de la aplicación, la cual se ve a la hora de cargar la

aplicación.

(1) Pantalla principal de La magia de las palabras. Se muestran la pantalla principal de la aplicación. En esta el usuario puede iniciar sesión en la aplicación y conocer que debe pedir asistencia a un adulto responsable.

(2) Pantalla en la cual se muestra que el usuario puede ingresar sus datos y proceder a presionar el botón Iniciar sesión que le permitirá ingresar como usuario. En caso de no tener cuenta la puede crear.

(3) En esta pantalla, el tutor podrá registrar al niño que usará la

aplicación indicando: Nombre, correo, y una contraseña. Posteriormente, el tutor presiona crear cuenta y este queda registrado en nuestra base de datos. Notificándole al correo que registro que es parte de los usuarios de la aplicación

(4) Esta es la nueva pantalla del menú principal, en donde ahora las pestañas han sido cambiadas por un sombrero y una pócima. En donde el sombrero es para que el niño pueda entrar a jugar.Ahora en vez de un botón de ingreso a tutores se dejó una pócima que igualmente solo el tutor puede entrar.

(5) En esta pantalla se muestra como el usuario una vez iniciada su sesión puede proceder al mapa de actividades, en donde debe seleccionar una poder jugar.Cada nivel posee un color, Naranja es un nivel que esta disponible para realizar pero no se ha hecho.Rojo es un nivel al cual aún no puede acceder, sin antes realizar el mundo anterior.Verde representa un mundo terminado el cual habilita al siguiente mundo.

(6)En esta imagen se puede ver que el usuario para acceder a esta

sección debe colocar la contraseña que creó.

(7) Esta es ahora la imagen que aparece al seleccionar un mundo. Específicamente el mundo A, la nueva característica de la pantalla de selección de mundo será que por cada mundo muestre una imagen única. El niño al oprimir empezar puede comenzar a jugar.

Esta es la imagen de una de las actividades al azar que puede comenzar a hacer el niño una vez le dé al botón comenzar. En esta pantalla se visualiza que la actividad es de organizar la frase. El niño debe oprimir los botones para generar el orden de la oración.

(8) Esta pantalla le permite al usuario calificar su experiencia después de haber terminado una actividad. La calificación se realiza sobre su estado de ánimo con la actividad del mundo elegido.

Una vez el niño haya finalizado de calificar la experiencia de la actividad, le aparecerá esta pantalla si la actividad que realizó estuvo correcta. Al oprimir continuar lo llevará a la siguiente actividad del mundo.

Una vez el niño haya finalizado de calificar la experiencia de la actividad, le aparecerá esta pantalla si la actividad que realizó estuvo incorrecta. Al oprimir continuar lo llevará a la siguiente actividad del mundo.

(9) En esta imagen se puede ver el menú de tutores donde pueden visualizar el seguimiento de las actividades realizadas por el niño.En la primera pestaña puede acceder a las estadísticas sobre el desempeño del niño por actividad.En la segunda pestaña puede acceder a las estadísticas del estado emocional del niño en cada actividad.

En la tercera pestaña puede acceder a las estadísticas sobre el tiempo de uso del sistema.

(10) En esta pantalla se visualiza las estadísticas sobre el desempeño del niño por actividad, el cual se accede desde el menú de tutores en la pestaña estadísticas.

(11) En esta pantalla el usuario puede elegir uno de los mundos para conocer el porcentaje de estado emocional del niño en ese mundo. Este se accede desde el menú de tutores en la pestaña estado de ánimo.

En la siguiente pantalla se puede visualizar en el mundo escogido, el porcentaje de veces que una emoción se ha elegido por la actividad. Esta pantalla se ve cuando se selecciona un mundo en la sección estado de ánimo del menú tutores.

En la siguiente pantalla se puede visualizar el tiempo de uso de la aplicación. Para acceder a esta es desde el menú de tutores en la pestaña estadísticas.

8. Referencias

[1] Android, «Android Developer,» [En línea]. Available: http://developer.android.com/develop/index.html.

[2] O. d. B. F. C. T. D. J. D. M. G. M. L. C. M. J. M. P. N. E. T. H. W. A. S. Ryan Bigg, «RailsGuides,» 2015. [En línea]. Available: guides.rubyonrails.org. [Último acceso: Mayo 2015].

[3] «Software Engineering Body of Knowledge,» 24 abril 2014. [En línea]. Available: http://www.computer.org/portal/web/swebok.

[4] C. Larman, Applying UML and Patterns: An introduction to Object-Oriented Analysis and Desing and Iterative Development, Addison Wesley Professional, 2014.

[5] I. Sommerville, Ingeniería de Software, Madrid: Pearson Education, 2005.

[6] «Class-Diagrams,» uml-diagrams.org, 2014. [En línea]. Available: http://www.uml-diagrams.org/class-diagrams-overview.html.

[7] «Use-Case-Diagrams,» uml-diagrams.org, 2014. [En línea]. Available: http://www.uml-diagrams.org/use-case-diagrams.html.

[8] «Component-Diagrams,» uml-diagrams.org, 2014. [En línea]. Available: http://www.uml-diagrams.org/component-diagrams.html.

[9] «Deployment-Diagrams,» uml-diagrams.org, 2014. [En línea]. Available: http://www.uml-diagrams.org/deployment-diagrams-overview.html.

[10] «Sequence-Diagrams,» uml-diagrams.org, 2014. [En línea]. Available: http://www.uml-diagrams.org/sequence-diagrams.html.