/rankings-cemas

Proyecto educativo CEMAS crear Ranking de estudiantes meritorios.

Primary LanguageJavaScript

Ranking Cemas

Introducción.

Este es un proyecto escolar, consiste en crear una App con React, Bootstrap y Firebase. Se requiere ordenar el listado de estudiantes según su calificación y promedio. Estos datos son obtenidos de un JSON desde un reporte de los estudiantes del centro.

Link de los Reportes del proyecto: (https://drive.google.com/drive/folders/1sJdno7Qg00N_rRsHNCbQpDaTjWBCEIAA).

Función.

Obtener el promedio a las calificaciones, calcula los índices académicos, las calificaciones generales y las técnicas de los estudiantes del centro, mostrara una lista de los estudiantes por el Bom ordenado según las calificaciónes con un estilo simple. Busca obtener el promedio de las calificaciones, esta calcula los índices académicos , también las calificaciones generales y las técnicas ordenadas según las calificación con un estilo simple.

Objetivos:

  • Ordena en un listado a los estudiantes según su número.
  • ordena en un listado a los estudiantes según su índice académico.
  • Ordena en un listado a los estudiantes según su índice técnico.
  • Ordena en un listado a los estudiantes según su índice general.

Capturas de pantalla.

cpt

Lo hacemos.

Nuestra app RANKING CEMAS esta realizada de una manera fácil, buscamos la forma de programar cada cosa, los códigos y programas necesarios para hacerla funcionar de forma eficiente y manejarnos de forma eficaz al trabajar en equipo.

Contiene:

  • Inicio de sesión.
  • Lista de estudiantes.
  • Listado de estudiantes con su índice académico.
  • Listado de estudiantes con su índice técnico.
  • Barra de búsqueda para filtrar los estudiantes por curso.
  • Barra de búsqueda para filtrar los estudiantes por periodo.
  • Barra de búsqueda para filtrar los estudiantes por índice.
  • Indice general.
  • Información desde base de datos del centro educativo.
  • Evita que personas externas al centro accedan a la información.

Ventajas:

  • Facilidad a los maestros.
  • Buenos resultados.
  • Rapidez al obtener una calificación o un promedio.
  • Acto para todos los centros educativos.
  • Solo los del centro podrán tomar información de la app.
  • Buena elaboración.

Desventajas:

  • Existe la posibilidad de que algún usuario no autorizado acceda a la información que ofrece.
  • El sistema puede llegar a sufrir cambios y desarrollar defectos con el paso del tiempo.

Beneficios.

Esta es una app que todos los estudiantes y maestros podrán utilizar con el beneficio de adquirir las calificaciones de forma mas sencilla, con esta no habrá que realizar todo el complicado proceso manual que se estuvo haciendo a día de hoy, si no mas bien solo acceder a la app y ver cual es tu calificación, es una forma de simplificar las formas manuales de hacer las cosas.

Informaciones de los reportes y las metodologias utilizadas.

Se realizan para documentar todo lo que se realizado en las reuniones, las tareas u otras actividades relacionadas con el proyecto.

Estructura de los reportes:

  • Nombre y número del reporte.
  • Descripción del reporte.
  • Detalles de la reunión.
  • Logros y observaciones.
  • Participación de los estudiantes (Evidencias).
  • Evidencias de todo el proceso del dia.

Links de los reportes:

Scripts.

En este proyecto puedes correr los siguientes Scripts:

yarn install o npm install

Para instalar los módulos necesarios de Node.

yarn start o npm start

Ejecuta la aplicación en el modo de desarrollo.
Abra http://localhost:3000 para visualizarlo en el navegador.

La página se recargará si realiza modificaciones.
También verá cualquier error por la consola.

yarn run predeploy o npm run predeploy

Construye la aplicación para producción en la carpeta build.
Agrupa correctamente React en el modo de producción y optimiza la compilación para obtener el mejor rendimiento.

La compilación se minimiza y los nombres de archivo incluyen los hash.
¡Tu aplicación está lista para salir a producción!

Para mas información visita la sección deployment.

yarn run deploy o npm run deploy

Publica la aplicación usando GH Pages.

Contribución:

  1. Crea un Fork del repositorio.
  2. Clonar en tu maquina mediante git clone url_del_repositorio_fork.
  3. Crear una nueva rama con el nombre de tu feature.
  4. Realiza tus cambios.
  5. Manda tu pull request a la rama pre-production.

Mantener actualizado tu Fork.

Una vez tenga clonado el repositorio Fork en tu PC, lo primero que tienes que hacer es crear un remoto al repositorio principal usando: git remote add upstream https://github.com/adonyssantos/rankings-cemas.git. (Esto solo lo tienes que hacer una vez).

Luego cada vez que se haga un cambio en el repositorio principal y lo quieras traer a tu fork usa los siguientes comandos:

  1. git pull upstream main
  2. git push origin main

Nota: recuerda estar ubicado dentro de la rama que quieres actualizar.

Aquí unos enlaces con información que podria serte util:

  1. https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/configuring-a-remote-for-a-fork#platform-linux
  2. https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/syncing-a-fork#platform-linux

El primer paso del algoritmo es obtener los reportes por curso y periodo:

4A:2020-2021

Para llevar acabo la peticion de los reportes debemos usar:

La funcion para crear la URL que solicita los reportes al API:

La siguiente funcion nos sirve para formar la URL para el pedido de reportes:

const getReportsURL = (curso, periodo) => {

   /**
    * @description: Obtener todos los reportes por curso y periodo. 
    * @param	{String}	curso Ejemplo: "4A"
    * @param	{String}	Periodo Ejemplo: "2020-2021"
    * @URL https://cemasapi.herokuapp.com/reportes/boletin/4A:2020-2021:
    * @return  {String}	URL	 String URL .
    */
...
};

El hook para gestionar los fecth al API es:

useFetch

import { useState, useEffect, useRef } from 'react';


export const useFetch = (url) => {
...
}

El componente que hace la peticion y usa el useFetch:

import { useFetch } from "../hooks/useFetch";
import ItemBoletin from "./ItemBoletin";


export default function ListaBoletines({ url }) {
...
}

Colaboradores de este proyecto