Tabla contenido
Requisitos.
- Internet
- Equipo de computo
- Tener instalado React Js v18.2.0
- Tener instalado Node JS v19.6.1
- Tener instalado Visual Studio Code v1.77.3
El proyecto consiste en la creación de un sitio web sobre Optimen, el sitio web proporcionará información detallada sobre los últimos avances y noticias respecto a la empresa, así como servicios de consultoría y soporte de configuración sobre el desarrollo de soluciones de software de TI, la página tardara menos de 5 segundos en renderizarse y contara con un editor de noticias y eventos que una serie de usuarios (administrador y creador de contenido) podrán acceder, el administrador podrá manipular los permisos de los usuarios que accedan a esta herramienta, mientras que los creadores de contenido podrán generar, editar, eliminar y consultar noticias y eventos, las noticias y eventos generados se reflejaran en el apartado de noticias de la página principal.
- Financieros : $7000
- Tiempos: 3 meses y 21 días (25 de Enero - 14 de Abril)
Objetivo general. Mejorar la página web de la empresa "Optimen", haciéndola más rápida, dinámica y fácil de usar para los usuarios. Además, se busca agregar una sección de edición de noticias y eventos para el administrador y el editor, con el fin de permitirles actualizar el contenido de la página de manera eficiente y efectiva. El objetivo es crear una experiencia de usuario atractiva y útil para los visitantes de la página, mientras se ofrece una plataforma fácil de usar para la gestión y actualización del contenido de la página por parte del equipo de administración.
Objetivos específicos de este proyecto:
-Mejorar el rendimiento de la página web, optimizando el tiempo de carga y aumentando la velocidad de navegación.
-Diseñar una sección de noticias y eventos en la que el administrador y el editor puedan agregar y actualizar contenido de manera sencilla y eficiente.
-Implementar un sistema de autenticación y control de acceso para garantizar que solo el administrador y el editor tengan permiso para editar y publicar contenido en la sección de noticias y eventos.
-Diseñar una interfaz de usuario atractiva y fácil de usar que permita a los visitantes de la página acceder al contenido de noticias y eventos de manera rápida y sencilla.
-Realizar pruebas exhaustivas en la página web y la sección de noticias y eventos para garantizar que todo funcione correctamente y se detecten y corrijan errores antes del lanzamiento.
En ésta sección se indicará los artefactos generados en base a la solución.
Funcionales:
No Funcionales:
Creador de contenido
Administrador
Usuario Visitante
En ésta sección se indicará los artefactos generados en base a la solución.
Esquema de la base de datos (nombre de campo, tipo de datos, restricciones, etc)
Colección de usuarios
Colección noticias
Colección eventos
Editar Evento El Creador de contenido quiere editar un evento que sera visible dentro de la pagina web, para ello entra a la pagina, inicia sesión y despues entra al apartado de edicion de eventos.
Editar Noticia El Creador de contenido accede al sitio web e inicia sesión. Se dirige a el apartado de edicion de noticias para editar una noticia.
Editar Usuario El Administrador accede al sitio web e inicia sesión. En la vista adminitrador busca el apartado de edicion de permisos de usuarios.
En ésta sección se describe los artefactos generados en base a la solución.
Estándares empleados en la codificación
Definir los patrones empleados y de seguridad.
Código Fuente de la solución
En ésta sección se describe los artefactos generados en base a la solución.
Indicar los casos de prueba
Evidencia de Ejecución de Casos de prueba.
Iniciando.
Antes de utilizar las nuevas funcionalidades de administración de contenido del sitio web, se deben cumplir los siguientes requisitos previos:
- Navegador web
- Dispositivo electrónico
- Permisos de usuario
- Conexión a internet
- Edición de contenido
Proceso de instalación Para realizar la instalación debe ingresar al link de nuestro repositorio https://github.com/OsmarVillegas/Integradora-Optimen Descarga Una vez ingresado deberemos descargar el contenido, tenemos dos opciones para realizarlo.
###Instalación opción A En la página de nuestro repositorio copiaremos el link.
Ilustración 1 Link repositorio Una vez copiado el link nos dirigiremos a una carpeta de nuestra preferencia que se encuentre vacía. Abrimos un CMD con la ubicación de nuestra carpeta, el CMD podemos abrirlo desde nuestra barra de búsquedas de Windows o desde nuestro administrador de archivos colocando CMD, de esta última forma se nos abrirá el CMD directamente en la ubicación del administrador de archivos.
Una vez copiado el link nos dirigiremos a una carpeta de nuestra preferencia que se encuentre vacía. Abrimos un CMD con la ubicación de nuestra carpeta, el CMD podemos abrirlo desde nuestra barra de búsquedas de Windows o desde nuestro administrador de archivos colocando CMD, de esta última forma se nos abrirá el CMD directamente en la ubicación del administrador de archivos.
Ilustración 2 CMD en el administrador de archivos.
En el cmd abierto colocaremos el siguiente comando: git clone url Esto comenzara el proceso de instalación de nuestro proyecto. Finalmente obtenemos el siguiente resultado.
###Instalación opción B
La segunda forma de instalar el archivo es presionando el botón Code y seleccionando Download ZIP.
Esto nos permitirá descargar nuestro archivo en formato zip, ahora solo deberemos cortarlo y pegarlo en nuestra carpeta para descomprimirlo.
Ilustración 4 Descomprimir archivo zip
Finalmente obtendremos el mismo resultado.
Ilustración 5 Resultado proceso de instalación B
Instalación de dependencias
Para instalar las dependencias debemos abrir Visual Studio Code en la ubicación de nuestro archivo, para ello podemos abrirlo y entrar a la ubicación de nuestra carpeta o también podemos utilizar nuestro CMD, Abrimos un CMD directamente en la carpeta como lo hemos hecho anteriormente (instalación opción A) y colocamos:
code .
Ilustración 6 CMD comando code .
Esto abrirá una ventana de Visual Studio Code directamente en la ubicación de nuestro archivo, ahora solo instalaremos las dependencias.
Ilustración 7 Pantalla Visual Studio Code.
###Backend
Instalación de dependencias Para instalar las dependencias de backend ingresaremos a nuestra carpeta Backend desde nuestra terminal, para ello abriremos una termina nueva con el comando Ctrl + j.
Ilustración 8 Abrir CMD Visual Studio Code.
En la terminal nueva ingresaremos a la carpeta Backend, con el comando cd Backend.
Ilustración 9 Comando cd Backend
Una vez ingresado instalaremos las dependencias con el siguiente comando: npm i
El comando comenzara el proceso de instalación, tendremos que esperar hasta que termine para continuar con su ejecución. Ejecución del backend
Una vez terminada la instalación de dependencias colocaremos en el mismo CMD el siguiente comando:
npm start
Ilustración 11 Comando npm start
Este comando comenzara la ejecución de nuestro backend. Finalmente nos arrojara el siguiente resultado.
Ilustración 12 Resultado ejecución Backend
Es muy importante que mantengamos este archivo ejecutándose en todo el tiempo que utilicemos nuestra aplicación pues de él depende nuestra base de datos.
Problemas con nodemon Es muy probable que nos arroje un error si no tenemos configurado nodemon en nuestra computadora, la solución es sencilla y el problema se debe a una configuración especial que tiene nuestra computadora, para solucionarlo deberemos abrir un PowerShell como administrador
En nuestro PowerShell colocaremos el siguiente comando:
Set-ExecutionPolicy RemoteSigned
Presionamos enter y contestamos con una S para aprobar las modificaciones,
Con esto ya hemos permitido el acceso a nodemon, solo deberemos volver a ejecutar nuestro servidor con npm start.
###Frontend
Instalación de dependencias Para ejecutar nuestro archivo frontend abrimos otra pestaña CMD, ingresaremos a la carpeta de nuestra aplicación con el comando cd Frontend.
Ilustración 13 Comando cd Frontend.
Una vez adentro colocaremos el siguiente comando: npm i
Ilustración 14 Comando npm i
Este comando comenzara la descarga de las dependencias, esperaremos a que la instalación finalice. Ejecución del Frontend
Una vez finalizada colocaremos el siguiente comando: npm start
Ilustración 15 Comando npm start
Después de esperar un momento se abrirá una pantalla con nuestro proyecto. ¡Eso es todo! Si ha seguido estos pasos, debería tener una instancia del proyecto Optimen Web Site ejecutándose en su computadora.
Guias de Uso.
Visitante El rol de visitante es para todos aquellos usuarios que accedan a la página, ellos pueden acceder a los contenidos que se encuentran en las pantallas principales.
Navegación El usuario puede utilizar la barra de navegación de la parte superior de la pantalla para navegar entre las diferentes vistas que presenta la página web.
Ilustración 17 Barra de navegación
Presionando en cada una de las opciones lo envía a la pantalla correspondiente. Vista El usuario puede visualizar las pantallas que se presentan:
Home
Ilustración 18 Vista Home
Customers
Ilustración 19 Vista Customers
About Us
Ilustración 20 Vista About Us
News
Ilustración 21 Vista News
Contact Us
Ilustración 22 Vista Contact Us
Contact Us En la pantalla Contact Us el usuario puede rellenar un formulario para comunicarse con la empresa, para ello debe hacer lo siguiente: Ingresa a la pantalla Contact Us a través de la barra de navegación.
La página presenta un formulario, este debe rellenarse con la información que solicita.
Ilustración 23 Formulario sin rellenar
Ilustración 24 Formulario relleno
Visualización de noticias y eventos En la vista News se presentan todas las noticias generadas, el usuario puede seleccionar una y se le despliega el contenido en una pantalla nueva.
Ilustración 25 Noticias página News
Para ello el usuario deberá acceder a la vista News y seleccionar la noticia de su interés. Traducción El usuario tiene acceso a un botón de traducción que se encuentra en la esquina inferior derecha de forma estática (siempre se va a encontrar en el mismo lugar), que permite traducir los contenidos.
Ilustración 26 Botón de traducción.
Para utilizarlo debemos presionar sobre él, esto desplegara las opciones de traducción.
Ilustración 27 Opciones de traducción.
Dependiendo de la opción seleccionada el idioma de la página cambiara entre español (es) o inglés (en). Admin El rol de admin es para el encargado de administrar los contenidos y a los usuarios que puedan generar contenido (rol creador de contenido), para acceder a sus funciones deberá autenticarse con una cuenta. Logueo El administrador debe acceder al siguiente URL: http://localhost:3000/login Esta URL les desplegará una pantalla de logueo que dará acceso a sus funcionalidades. Administración de usuarios Una vez que el administrador acceda puede escoger entre administrar las noticias y eventos o a sus usuarios, para administrar a sus usuarios se desplegara la siguiente pantalla.
Ilustración 28 Vista administrar usuarios
En ella puede visualizar, agregar, eliminar y editar a los usuarios. Para agregar un nuevo usuario deberá presionar el botón agregar que se encuentra en la parte inferior derecha de la tabla, esto desplegara un modal que le permitirá rellenar un formulario que agregue al nuevo usuario a la base de datos.
Para editar debe presionar el botón de la fila columna Edit, seleccionando la final de aquel usuario que desea modificar, esto desplegara un formulario que presenta la información del usuario seleccionado y permita editarlos datos del usuario.
Para eliminar deberá presionar el botón de la columna Delete seleccionando el elemento de la fila que desea eliminar. Administración de noticias y eventos
Si el administrador escoge la administración de noticias y eventos le aparecerá la siguiente pantalla.
Ilustración 29 Pantalla administrar noticias y eventos
En ella puede visualizar, agregar, eliminar y editar noticias o eventos. Para agregar un nuevo evento o noticia deberá presionar el botón agregar que se encuentra en la parte inferior derecha de la tabla de cada tabla, esto desplegara un modal que le permitirá rellenar un formulario que agregue a la nueva noticia o a un nuevo evento a la base de datos.
Para editar debe presionar el botón de la fila columna Edit, seleccionando la final de aquel evento o noticia que desea modificar, esto desplegara un formulario que presenta la información de la noticia o evento seleccionado y permita editarlos datos del elemento seleccionado.
Para eliminar deberá presionar el botón de la columna Delete seleccionando el elemento de la fila que desea eliminar.
Creador de contenido El rol de creador de contenido es para los encargados de generar contenido que se visualizará en la pantalla News, para acceder a sus funciones deberá autenticarse con una cuenta. Logueo El creador de contenido debe acceder al siguiente URL: http://localhost:3000/login Esta URL les desplegará una pantalla de logueo que dará acceso a sus funcionalidades. Administración de noticias y eventos Si el administrador escoge la administración de noticias y eventos le aparecerá la siguiente pantalla.
Ilustración 30 Pantalla administrar noticias y eventos
En ella puede visualizar, agregar, eliminar y editar noticias o eventos.
Para agregar un nuevo evento o noticia deberá presionar el botón agregar que se encuentra en la parte inferior derecha de la tabla de cada tabla, esto desplegara un modal que le permitirá rellenar un formulario que agregue a la nueva noticia o a un nuevo evento a la base de datos.
Para editar debe presionar el botón de la fila columna Edit, seleccionando la final de aquel evento o noticia que desea modificar, esto desplegara un formulario que presenta la información de la noticia o evento seleccionado y permita editarlos datos del elemento seleccionado.
Para eliminar deberá presionar el botón de la columna Delete seleccionando el elemento de la fila que desea eliminar.
Contribucion.
Licencia.
Contacto.