domingo, 15 de mayo de 2016

Prototipo de aplicación

INSTITUTO POLITECNICO NACIONAL
Unidad Profesional Interdisciplinaria de Ingeniería y Ciencias Sociales y Administrativas



PROTOTIPO DE APLICACIÓN
(MODELO INCREMENTAL – LARAVEL)



Integrantes:
Álvarez Hernández Ma. Isabel
García Ayala Martín
Hernández Figueroa Luis Javier
López Jiménez Viridiana Nayeli
Muñoz Valencia Raziel Kuauhtzin

Coordinador:
Álvarez Hernández Ma. Isabel


05/05/2016




INTRODUCCIÓN

El modelo incremental divide un respectivo proyecto en incrementos, cada uno de los cuales conformado por su análisis, diseño, codificación y pruebas, para finalmente integrarlo al sistema.
El prototipo creado utilizando esta metodología fue el de una página web; NutriKeyDx el cual permite a estudiantes o profesionistas de Nutrición crear una cuenta, en la que se puedan dar de alta sus respectivos pacientes, para posteriormente generar un diagnostico nutricional de ellos. Asimismo el sitio les permite a los nutriólogos visualizar noticias nutricionales, las cuales son redactadas por editores previamente registrados en el sitio.
La herramienta automatizada a utilizar fue Laravel, un framework para desarrollar aplicaciones y servicios PHP permitiendo el uso de más herramientas que se mencionaran posteriormente.
El objetivo de este proyecto es el mostrar el desarrollo de dicho prototipo incrementalmente, con la ayuda de Laravel.


 ÍNDICE



ACERCA DEL PROTOTIPO

NutriKeyDx es un sitio web en donde existen dos tipos de usuarios, los nutriólogos y los editores. Para el caso de ambos en necesario un registro para posteriormente iniciar sesión con la cuenta generada.
Los nutriólogos pueden generar una lista de pacientes (en donde se genera altas, bajas, cambios y consultas) en donde es necesario registrarlos con sus respectivos datos nutricionales, y al hacerlo se generará un diagnostico nutricional.
De igual modo los nutriólogos podrán tener acceso a una sección de noticias nutricionales, escritas por editores registrados en dicho sitio.
Los editores podrán visualizar noticias, y subir nuevas (con la capacidad de modificarlas o borrarlas posteriormente)
Como requisitos el sitio cumple con información general de esta, y su contacto por medio de un buzón.

EMPLEO DE LA METODOLOGÍA

Debido a que el modelo incremental divide todo el sistema en incrementos estratégicos con sus respectivas fechas de entrega. 

a)Se determinaron en un diagrama de incrementos
 




b) Asignación de fechas a los incrementos establecidos por medio de un Diagrama de Gantt en donde se establece el periodo de una semana para desarrollar cada uno de los incrementos, del mismo modo se muestran los vínculos de un incremento a otro tal es el caso del registro de usuario, vinculado al incremento de Vista de usuario (Nutriólogo) así como el vínculo de todos los incrementos a la validación de formularios puesto que cada incremento lleva consigo una interacción con la base de datos.

Así mismo cada incremento cuenta con su respectivo análisis, diseño implementación y pruebas, mencionados a continuación





 PRIMER INCREMENTO

En el primer incremento se desea contemplar tres aspectos importantes:

  • Características principales
  • Registro de usuario
  • Buzón de contacto

Características principales

Análisis: Establecimiento del contenido del sitio web, donde se convence a los visitantes de ¿Por qué es practico e innovador hacer uso de esta herramienta?, así como dar a conocer su objetivo principal

Objetivo: “Somos una empresa emergente, multidisciplinaria y comprometida para alcanzar y lograr sueños”.
·         La herramienta del nutriólogo y del personal de la salud especialista en nutrición, creada para facilitar la consulta nutricional de una forma clara, rápida e intuitiva.
·         El nutriólogo debe de estar actualizado. Te brindamos noticias y artículos recientes que te permitirán estar al día y no quedarte atrás en tus conocimientos.
·         ¿Cálculo? No necesitas comprar herramientas que te permitan hacerlo, Nutrikey te brinda las herramientas para hacer el cálculo de una forma eficaz, actualizada constantemente.


Implementación: Mediante la herramienta laravel fue posible realizar el código en HTML de la siguiente manera.

Pruebas: Se aseguró que al estar codificando, apareciera la información deseada en la página, la cual sería la bienvenida a todos los usuarios.

Registro de usuario

Análisis: Se desea contar con una estructura en donde al proporcionar datos personales, se pueda tener acceso a la interfaz.

  • Nombre
  • País
  • Delegación o municipio
  • Especialidad
  • Correo
  • Contraseña


Diseño: Para un mejor manejo usuario/ interfaz, debe de ser intuitivo para que no se tenga ningún problema al llenar el formulario.

Implementación: Mediante la herramienta laravel fue posible realizar el código en HTML de la siguiente manera.

Pruebas: Se corroboro que al ser llenado cada uno de los campos del formulario, se guardará la información y al querer llenarlos con datos erróneos, marcará erro, al igual que dejar campos vacíos

Buzón de contacto


Análisis: Se quiere contar con un apartado en donde se puedan agregar y/o enviar comentarios al administrador de la página.
  • Nombre
  • Asunto
  • Correo
  • Mensaje  

     
Diseño: La estructura debe de ser lo más amigable posible para que el usuario no tenga ningún problema al estar llenando el formulario.

Implementación: Mediante la herramienta laravel fue posible realizar el código en HTML de la siguiente manera.


Pruebas: Se corroboro que al ser llenado cada uno de los campos del formulario, se guardará la información para poder ser enviada exitosamente.

SEGUNDO INCREMENTO.

Vista del editor

Se desea tener una sección de noticias dentro del sitio web, donde el que tenga el rol de editor pueda realizar las siguientes acciones:
  • Crear noticia
  • Ver noticias existentes
  • Editar noticias
  • Eliminar noticia

La página le pedirá al editor un correo y una contraseña para poder ingresar a la sección de edición de noticias, una vez que haya ingresado el editor se tendrá una página de inicio con tres posibles opciones:

  • Nuevo
  • Ver
  • Editar / Borra
Para la sección de “Nuevo”, se necesita que lleve los siguientes campos:
  • Título de la noticia.
  • Descripción de la noticia
  • Imagen (link).
  • Etiquetas.
  • Desarrollo de la noticia.
Para las secciones de “Ver” y “Editar / Borrar”, se requiere que se desplieguen todas las noticias que se han realizado mostrando solamente el título, poniendo debajo de cada una de ellas las siguientes opciones:
  •  Ver
  • Editar
  • Borrar

Se requiere tener un menú por cada una de las secciones donde los pueda comunicar con las demás secciones directamente y no regresarse a la página principal.

Página de validación para entrar al sitio como Editor.

Código de validación para entrar al sitio como Editor.

 Al realizar la publicación de una noticia, nos aparece el mensaje:
“Noticia publicada correctamente”

Para verificar si se realizó la publicación, que tiene por nombre “Deslindan relación de edulcorantes con el cáncer”,  vamos a la sección “Ver” y comprobamos  que la noticias si fue realizada con éxito.



TERCER INCREMENTO

Vista del Usuario.

Se requiere que existan dos secciones para el rol de Especialista, “Cálculo” y “Noticias”.
La sección “Calculo” será para que el especialista tenga un control de los pacientes que tiene a su cargo, además pueda realizar en esta misma sección el cálculo para la distribución de equivalentes de cada uno de sus pacientes.
En sección “Noticias”, el especialista podrá tener acceso a noticias que fueron creadas por el editor y comentar en ellas si así lo desea.
Se pedirá al Especialista un correo y una contraseña para poder ingresar

Para la sección “Cálculo” se necesita que nos muestre los pacientes que ya se tienen registrados y al dar clic en ellos, tengamos acceso a su expediente. Además que nos dé la opción de ‘Agregar un Nuevo Paciente’.
Para la opción ‘Agregar un Nuevo Paciente’ se necesitan los siguientes campos:
Ø  Nombre.
Ø  Peso.
Ø  Talla.
Ø  Sexo.
Ø  Edad.
Ø  Actividad Física (Porcentaje).
Ø  Estrés Metabólico (Porcentaje).
Ø  Proteínas por Peso(Kg).
Ø  Carbohidratos (Porcentaje).
Ø  Lípidos (Porcentaje).
Y un botón para que se procese la información y nos dé los valores de IMC, G.E.R, G.E.T; así como la distribución de equivalentes.
Para la sección de Noticias, nos desplegará las noticias más recientes mostrándonos el título solamente y dándonos la opción para ‘leer la noticia completa’; también tendrá un buscador para ubicar rápidamente alguna noticia en especial.
En la opción de ‘leer la noticia completa’, al dar clic en ella, además de dejarnos visualizar la nota completa, podremos hacer algún comentario

Página de validación para entrar al sitio como Especialista.

Código para la validación y entrar al sitio como Especialista.

Aparece la lista con los pacientes ya registrados al accionar el botón ‘Cálculo’.

 Al accionar el botón ‘Procesar’, arroja los valores de IMC, G.E.R, G.E.T.


CUARTO INCREMENTO

Validaciones de formularios

Establecimiento de parámetros para el llenado de cada uno de los formularios que componen el sistema.  Con la finalidad de facilitar y optimizar tanto el llenado de datos para el cliente como las búsquedas o consultas del administrador.
Para el registro de un nutriólogo es necesario:
·         Empleo único de caracteres alfabéticos para los campos como nombre, apellido paterno, apellido materno, país, estado, delegación y municipio.
·         Empleo del uso de un calendario con la intención de agilizar el llenado del formato del campo de la fecha de nacimiento.
·         Empleo de una lista de opciones predeterminadas por el administrador para el campo de ocupación.
·         Empleo del carácter “@” para considerar valido el campo de correo electrónico
·         Para el campo de contraseña, es necesario, cumplir con mínimo 6 caracteres, sin importar si son numéricos o alfanuméricos.
Para la opción de cálculos del paciente de la vista de nutriólogo es necesario:
·         Empleo de caracteres alfabéticos para el campo de nombre
·         Empleo de datos numéricos para campos como peso, talla, edad, % de activación física y % de estrés muscular
Para la opción de publicar noticias de la vista del editor es necesario:
·         Empleo de caracteres alfanuméricos para los campos como título de la noticia, descripción de la noticia, etiquetas y desarrollo de la noticia.
·         Empleo de una dirección URL correcta para el campo de imagen, ya que el sistema recurrirá a dicha dirección para importar la imagen a la publicación de la noticia
·         Empleo de separadores (en este caso “;”) para el empleo de más de una etiqueta, que servirá de búsqueda para la sección de noticias.

En cuanto al diseño se desea contar con una interfaz amigable, en donde el usuario no se pierda al llenar cada uno de los campos, o le parezca complicado el llenado

Por medio de nuestra herramienta Laravel fue posible conjuntar de una manera sencilla la parte del código en HTML y el código de PHP en interacción con la base de datos para las correctas funciones de altas, bajas y modificaciones de los formularios
Se corroboró que cada registro generado por medio de un formulario fuera guardado en la base de datos con su tabla correspondiente.
Finalmente al no generar errores, el incremento fue agregado al sistema.

Arreglos visuales

Implementación de una interfaz simple pero atractiva para el usuario, con colores, imágenes, efectos y distribuciones de la página generados con la implementación de bootstrap por medio de Laravel.


Bootstrap es un framework que permite por medio de la herramienta Laravel una generación de carpetas (un paquete de estilos para el diseño de una página completa) de archivos .js .css y .html los cuales están abiertos a modificaciones y cambios dependiendo la complejidad del diseño con la que se quiera trabajar.

La organización y simpleza del manejo de la información fue el enfoque principal, en donde se fueron corrigiendo errores estructurales para evitar confusiones del usuario y botones de accesos directos al inicio de la página o bien a las opciones principales de cada tipo de usuario (nutriólogo o editor)



REFERENCIAS FOTOGRÁFICAS

Figura 1. Diagrama de Incrementos, Equipo 1 (2016).
Figura 2. Diagrama de Gantt, Equipo 1 (216)
Figura 3. Vista página principal:  Muñoz, Raziel. (2015). Nutrikey (página web). Recuperado de: http://nutri-key.com/index.html



No hay comentarios.:

Publicar un comentario