Guía 11

Guía 11

DAWM / Proyecto03

Objetivo general

Desarrollar un dashboard interactivo y visualmente intuitivo utilizando tecnologías web modernas, como React, que permita a los usuarios monitorear en tiempo real métricas clave del clima.

Actividades previas

Actividades en clases

Github

  1. Crea un repositorio en GitHub con el nombre dashboard.
    • Incluya el archivo README.md.
    • Agregue .gitignore con la plantilla Node.
  2. Clone su repositorio localmente.

Proyecto Base

  1. Desde la línea de comandos,

    • Acceda a la carpeta de su proyecto.
     cd dashboard
    • Cree un nuevo sitio con Vite:
     npm create vite@latest .
    • En caso de ser necesario, ingrese y a la instalación del paquete create-vite:
     Need to install the following packages:  
 create-vite@5.5.5
 Ok to proceed? (y) y
    • En caso de ser necesario, seleccione Ignore files and continue a crear la estructura de archivos en un repositorio con README.md:
     Current directory is not empty. 
 Please choose how to proceed: » Ignore files and continue
    • Seleccione React como framework:
     √ Select a framework: » React
    • Seleccione Typescript como variante:
     √ Select a variant: » Typescript

  2. Instale las dependencias

     npm install

  3. Inicie el servidor.

     npm run dev
  4. (STOP 1) Compruebe el resultado en el navegador.
  5. Revise el resultado en http://localhost:5173/
  1. Versiona local y remotamente el repositorio.

Estructura de archivos del proyecto en Vite - React.

React MUI: Instalación

  1. Desde la línea de comandos, instale React MUI con:

     npm install @mui/material @emotion/react @emotion/styled

React MUI: Componente Grid version 2

  1. En el componente App.tsx, agregue la referencia al componente Grid 2.

     import { ... } from 'react'

 // Grid version 2
 import Grid from '@mui/material/Grid2'

  2. En App.tsx, reemplace el contenido a renderizar en el return por:

     ...

 function App() {
     ...

     return (
       <Grid>

       	  {/* Indicadores */}
           <Grid>Elemento: Indicador 1</Grid>
           <Grid>Elemento: Indicador 2</Grid>
           <Grid>Elemento: Indicador 3</Grid>
           <Grid>Elemento: Indicador 4</Grid>
		      
           {/* Tabla */}
           <Grid>Elemento: Tabla</Grid>
		      
           {/* Gráfico */}
           <Grid>Elemento: Gráfico 1</Grid>
		  
       </Grid>
     )
 }

 export default App
  3. Versiona local y remotamente el repositorio.
  4. (STOP 2) Compruebe el resultado en el navegador.

React MUI: Propiedades (Props)

  1. En App.tsx, aplique al elemento Grid contenedor:

     return (
   <Grid container spacing={5}>

   	{/* Indicadores */}
     <Grid>Elemento: Indicador 1</Grid>
      	
   	...

   	{/* Gráfico */}
     <Grid>Elemento: Gráfico 1</Grid>

   </Grid>
 )
  2. Versiona local y remotamente el repositorio.
  3. (STOP 3) Compruebe el resultado en el navegador.

React MUI: Layout

  1. En App.tsx, aplique a todos los elementos Grid descendientes (con los textos del 1 al 6) los puntos de interrupción (atributo size) con las claves predeterminadas y valores de acuerdo con la siguiente tabla:

    Diseño con puntos de interrupción
    Clave (Tamaño) Cantidad de columnas Elemento
    xs (extra-small) 12 Indicadores, Tabla y Gráficos
    xl (extra-large) 3 Indicadores
    8 Tabla
    4 Gráfico
    Haga click aquí para ver la solución
     
    
   	return (
         <Grid container spacing={5}>

             {/* Indicadores */}
             <Grid size={{ xs: 12, xl: 3 }}>Elemento: Indicador 1</Grid>
             <Grid size={{ xs: 12, xl: 3 }}>Elemento: Indicador 2</Grid>
             <Grid size={{ xs: 12, xl: 3 }}>Elemento: Indicador 3</Grid>
             <Grid size={{ xs: 12, xl: 3 }}>Elemento: Indicador 4</Grid>

             {/* Tabla */}
             <Grid size={{ xs: 12, xl: 8 }}>Elemento: Tabla</Grid>

             {/* Gráfico */}
             <Grid size={{ xs: 12, xl: 4 }}>Elemento: Gráfico 1</Grid>
		        
         </Grid>
     )
  2. Versiona local y remotamente el repositorio.
  3. (STOP 4) Compruebe el resultado para los diferentes tamaños del navegador.

Configuración para el despliegue

  1. Desde la línea de comandos, acceda a la ruta del proyecto.

  2. Instale el paquete gh-pages

     npm install gh-pages --save-dev

  3. En el archivo package.json

    • Agregue la entrada homepage en el formato: https://{username}.github.io/dashboard:
     {
     ...
     "homepage": "https://{username}.github.io/dashboard",
     "type": "...",
     "scripts": { ... }
 }
    • Agregue los comandos predeploy y deploy a la entrada scripts:
     {
     ...
     "type": "...",
     "scripts": {
         ...
         "predeploy": "npm run build",
         "deploy": "gh-pages -d dist",
         ...
     }
 }

  4. En el archivo vite.config.js agregue la ruta al repositorio remoto /dashboard:

     export default defineConfig({
   base: "/dashboard",
   plugins: [react()],
 })
  5. Versiona local y remotamente el repositorio.
  6. Desde la línea de comandos, ejecute el comando de transpilación y despliegue del sitio web, con: npm run deploy
    • De ser necesario, elimine, corrija o comente las secciones de código identificadas por el transpilador.
    • Vuelva a ejecutar el comando de transpilación y despliegue.

Documentación

Fundamental

Términos

librería, ui, ui material

Referencias