Skip to content

GitLab

Modulo 2 · Changes

Page history
actualizacion de ejemplos panacea authored by imunnic's avatar imunnic
Hide whitespace changes
Inline Side-by-side
Showing with 141 additions and 87 deletions
Modulo-2.md
View page @ cd31b939
# Módulo 2 — Importación de elementos en JavaScript # Módulo 2 — Importación de elementos en JavaScript (Adaptado a tu API)
## 1. Importación de datos ## 1. Importación de datos
En JavaScript es posible importar datos (constantes, variables, objetos o listas) definidos en otros archivos, o bien cargarlos desde archivos JSON externos. En JavaScript es posible importar datos (constantes, variables, objetos o listas) definidos en otros archivos, o bien cargarlos desde archivos JSON externos.
Esto permite mantener la información organizada y separada de la lógica del programa. Esto permite mantener la información organizada y separada de la lógica del programa.
En este módulo, los ejemplos se adaptan a la estructura real de tu API: recursos humanos, recursos materiales y activaciones.
---
### Ejemplo: Importación desde otro archivo JavaScript ### Ejemplo: Importación desde otro archivo JavaScript
Archivo `data/recursos.js`: Archivo `data/recursos.js`:
```js ```js
// data/recursos.js // data/recursos.js
export const personalSanitario = [ export const recursosHumanos = [
{ id: 1, nombre: "Laura Gómez", puesto: "Enfermera" }, {
{ id: 2, nombre: "Javier Ruiz", puesto: "Médico general" }, id: 1,
{ id: 3, nombre: "María Pérez", puesto: "Técnico de laboratorio" } nombreRecurso: 'Laura Gómez',
tipoRecurso: 'Humano',
unidad: 'AGRUSAN',
comunidadAutonoma: 'Madrid',
provincia: 'Madrid',
localidad: 'Pozuelo de Alarcón',
base: 'General Cavalcanti',
servicioMedicoReferencia: 'Hospital La Paz',
},
{
id: 2,
nombreRecurso: 'Javier Ruiz',
tipoRecurso: 'Humano',
unidad: 'NAS 11',
comunidadAutonoma: 'Madrid',
provincia: 'Madrid',
localidad: 'Pozuelo de Alarcón',
base: 'General Cavalcanti.',
servicioMedicoReferencia: 'Hospital Infanta Sofía',
},
]; ];
export const equiposMedicos = [ export const recursosMateriales = [
{ id: "E001", tipo: "Monitor cardíaco", estado: "Operativo" }, {
{ id: "E002", tipo: "Respirador", estado: "En mantenimiento" } id: 10,
nombreRecurso: 'ET 117928',
tipoRecurso: 'Material',
unidad: 'AGRUSAN',
comunidadAutonoma: 'Madrid',
provincia: 'Madrid',
localidad: 'Pozuelo de Alarcón',
base: 'General Cavalcanti',
},
{
id: 11,
nombreRecurso: 'ET 117929',
tipoRecurso: 'Material',
unidad: 'AGRUSAN',
comunidadAutonoma: 'Madrid',
provincia: 'Madrid',
localidad: 'Pozuelo de Alarcón',
base: 'General Cavalcanti',
},
]; ];
``` ```
...@@ -27,152 +68,166 @@ Archivo `gestion/mostrarRecursos.js`: ...@@ -27,152 +68,166 @@ Archivo `gestion/mostrarRecursos.js`:
```js ```js
// gestion/mostrarRecursos.js // gestion/mostrarRecursos.js
import { personalSanitario, equiposMedicos } from '../data/recursos.js'; import { recursosHumanos, recursosMateriales } from '../data/recursos.js';
console.log("Listado de personal sanitario:"); console.log('Listado de recursos humanos:');
personalSanitario.forEach(p => { recursosHumanos.forEach((r) => {
console.log(`- ${p.nombre} (${p.puesto})`); console.log(`- ${r.nombreRecurso} (${r.unidad})`);
}); });
console.log("\nListado de equipos médicos:"); console.log('\nListado de recursos materiales:');
equiposMedicos.forEach(e => { recursosMateriales.forEach((r) => {
console.log(`- ${e.tipo} [${e.estado}]`); console.log(`- ${r.nombreRecurso} [${r.base}]`);
}); });
``` ```
**Salida esperada:** **Salida esperada:**
``` ```
Listado de personal sanitario: Listado de recursos humanos:
- Laura Gómez (Enfermera) - Laura Gómez (AGRUSAN)
- Javier Ruiz (Médico general) - Javier Ruiz (NAS 11)
- María Pérez (Técnico de laboratorio)
Listado de equipos médicos: Listado de recursos materiales:
- Monitor cardíaco [Operativo] - ET 117928 [General Cavalcanti]
- Respirador [En mantenimiento] - ET 117929 [General Cavalcanti]
``` ```
--- ---
### Ejemplo: Importación desde un archivo JSON usando fetch() ### Ejemplo: Importación desde un archivo JSON usando fetch()
Cuando los datos están en formato **JSON**, se pueden cargar de manera dinámica mediante **`fetch()`**, lo cual resulta útil para trabajar con información almacenada en servidores o ficheros externos. Archivo `data/activaciones.json`:
Archivo `data/materiales.json`:
```json ```json
[ [
{ "id": "M001", "nombre": "Guantes de nitrilo", "stock": 500 }, {
{ "id": "M002", "nombre": "Mascarillas FFP2", "stock": 1200 }, "id": 100,
{ "id": "M003", "nombre": "Batas desechables", "stock": 300 } "recursoId": 1,
"fechaHoraInicio": "2025-01-05T08:00:00",
"fechaHoraFin": "2025-01-05T15:00:00",
"tipoJornada": "COMPLETA",
"tipoSituacion": "ACTIVIDAD",
"observaciones": "Servicio programado"
},
{
"id": 101,
"recursoId": 10,
"fechaHoraInicio": "2025-01-05T09:30:00",
"fechaHoraFin": "2025-01-05T12:00:00",
"tipoJornada": "PARCIAL",
"tipoSituacion": "NO_OPERATIVO",
"observaciones": "Revisión mecánica"
}
] ]
``` ```
Archivo `gestion/materiales.js`: Archivo `gestion/activaciones.js`:
```js ```js
// gestion/materiales.js // gestion/activaciones.js
async function cargarMateriales() { async function cargarActivaciones() {
try { try {
const respuesta = await fetch('../data/materiales.json'); const respuesta = await fetch('../data/activaciones.json');
if (!respuesta.ok) { if (!respuesta.ok) {
throw new Error(`Error al cargar los datos: ${respuesta.status}`); throw new Error(`Error al cargar los datos: ${respuesta.status}`);
} }
const materiales = await respuesta.json(); const activaciones = await respuesta.json();
console.log("Materiales disponibles:"); console.log('Activaciones registradas:');
materiales.forEach(m => { activaciones.forEach((a) => {
console.log(`- ${m.nombre}: ${m.stock} unidades`); console.log(
`- Activación #${a.id}: recurso ${a.recursoId} ` + `(${a.tipoSituacion}, ${a.tipoJornada})`
);
}); });
} catch (error) { } catch (error) {
console.error("No se pudieron cargar los materiales:", error.message); console.error('No se pudieron cargar las activaciones:', error.message);
} }
} }
cargarMateriales(); cargarActivaciones();
``` ```
**Salida esperada:** **Salida esperada:**
``` ```
Materiales disponibles: Activaciones registradas:
- Guantes de nitrilo: 500 unidades - Activación #100: recurso 1 (ACTIVIDAD, COMPLETA)
- Mascarillas FFP2: 1200 unidades - Activación #101: recurso 10 (NO_OPERATIVO, PARCIAL)
- Batas desechables: 300 unidades
``` ```
**Nota:**
El uso de `fetch()` requiere ejecutar el código desde un servidor local o remoto. Si el archivo se abre directamente desde el sistema de archivos, el navegador puede bloquear la lectura por motivos de seguridad.
--- ---
## 2. Importación de funciones ## 2. Importación de funciones
Las funciones reutilizables pueden definirse en un módulo y compartirse entre distintos archivos mediante `export` e `import`. Ejemplo adaptado a métricas reales: porcentaje de recursos en situación de actividad.
Esto permite mantener el código organizado y evitar duplicaciones.
### Ejemplo: Funciones de cálculo y formato
Archivo `utils/calculos.js`: Archivo `utils/calculos.js`:
```js ```js
// utils/calculos.js // utils/calculos.js
export function calcularPorcentajeUso(total, enUso) { export function calcularPorcentajeActividad(total, enActividad) {
return ((enUso / total) * 100).toFixed(1); return ((enActividad / total) * 100).toFixed(1);
} }
export function capitalizarTexto(texto) { export function formatearSituacion(situacion) {
return texto.charAt(0).toUpperCase() + texto.slice(1); return situacion
.toLowerCase()
.replace('_', ' ')
.replace(/^\w/, (c) => c.toUpperCase());
} }
``` ```
Archivo `reportes/usoRecursos.js`: Archivo `reportes/actividadRecursos.js`:
```js ```js
// reportes/usoRecursos.js // reportes/actividadRecursos.js
import { calcularPorcentajeUso, capitalizarTexto } from '../utils/calculos.js'; import { calcularPorcentajeActividad, formatearSituacion } from '../utils/calculos.js';
const totalRecursos = 20;
const recursosActivos = 15;
const totalEquipos = 50; console.log(
const equiposEnUso = 38; `Porcentaje de recursos en ACTIVIDAD: ` +
`${calcularPorcentajeActividad(totalRecursos, recursosActivos)}%`
);
console.log(`Porcentaje de uso de equipos: ${calcularPorcentajeUso(totalEquipos, equiposEnUso)}%`); console.log(`Situación formateada: ${formatearSituacion('BAJA_MEDICA')}`);
console.log(`Tipo de recurso: ${capitalizarTexto("equipo médico")}`);
``` ```
**Salida esperada:** **Salida esperada:**
``` ```
Porcentaje de uso de equipos: 76.0% Porcentaje de recursos en ACTIVIDAD: 75.0%
Tipo de recurso: Equipo médico Situación formateada: Baja medica
``` ```
--- ---
## 3. Importación de clases ## 3. Importación de clases
Las clases permiten representar entidades del sistema, como empleados, recursos o departamentos. Aquí adaptamos el ejemplo a tu modelo real: `Recurso` es abstracto, así que podemos crear una clase `RecursoHumanoJS` que emula la estructura de tu API en front.
Cada clase puede definirse en su propio archivo y luego importarse donde sea necesario.
### Ejemplo: Clase RecursoHumano
Archivo `models/RecursoHumano.js`: Archivo `models/RecursoHumano.js`:
```js ```js
// models/RecursoHumano.js // models/RecursoHumano.js
export class RecursoHumano { export class RecursoHumano {
constructor(id, nombre, puesto, turno) { constructor(id, nombreRecurso, unidad, tipoSituacion) {
this.id = id; this.id = id;
this.nombre = nombre; this.nombreRecurso = nombreRecurso;
this.puesto = puesto; this.unidad = unidad;
this.turno = turno; this.tipoRecurso = 'Humano';
this.tipoSituacion = tipoSituacion;
} }
mostrarFicha() { mostrarFicha() {
console.log(`RecursoHumano #${this.id}: ${this.nombre} - ${this.puesto} (${this.turno})`); console.log(
`Recurso Humano #${this.id}: ${this.nombreRecurso} ` +
`- Unidad: ${this.unidad} (${this.tipoSituacion})`
);
} }
} }
``` ```
...@@ -183,42 +238,41 @@ Archivo `gestion/personal.js`: ...@@ -183,42 +238,41 @@ Archivo `gestion/personal.js`:
// gestion/personal.js // gestion/personal.js
import { RecursoHumano } from '../models/RecursoHumano.js'; import { RecursoHumano } from '../models/RecursoHumano.js';
const recursoHumano1 = new RecursoHumano(1, "Laura Gómez", "Enfermera", "Turno mañana"); const tecnico = new RecursoHumano(1, 'Laura Gómez', 'AGRUSAN', 'ACTIVIDAD');
const recursoHumano2 = new RecursoHumano(2, "Javier Ruiz", "Médico general", "Turno noche"); const medico = new RecursoHumano(2, 'Javier Ruiz', 'NAS 11', 'COMISION_SERVICIO');
recursoHumano1.mostrarFicha(); tecnico.mostrarFicha();
recursoHumano2.mostrarFicha(); medico.mostrarFicha();
``` ```
**Salida esperada:** **Salida esperada:**
``` ```
Recurso #1: Laura Gómez - Enfermera (Turno mañana) Recurso Humano #1: Laura Gómez - Unidad: AGRUSAN (ACTIVIDAD)
Recurso #2: Javier Ruiz - Médico general (Turno noche) Recurso Humano #2: Javier Ruiz - Unidad: NAS 11 (COMISION_SERVICIO)
``` ```
--- ---
## 4. Buenas prácticas ## 4. Buenas prácticas
* Usar rutas relativas (`./` o `../`) para importar módulos locales. - Usar rutas relativas (`./` o `../`) para importar módulos locales.
* Incluir la extensión `.js` en las rutas de los módulos. - Incluir siempre la extensión `.js` en los módulos.
* Centralizar los datos, funciones y clases en carpetas específicas (`/data`, `/utils`, `/models`). - Organizar el proyecto en carpetas como `/data`, `/utils` y `/models`.
* Usar `export default` cuando el módulo exporta un único elemento principal. - Usar `export default` cuando el módulo exporta un único elemento.
Ejemplo de exportación por defecto: Ejemplo adaptado al dominio:
```js ```js
// utils/logger.js // utils/logger.js
export default function log(mensaje) { export default function log(mensaje) {
console.log(`[LOG]: ${mensaje}`); console.log(`[Sistema Recursos]: ${mensaje}`);
} }
``` ```
```js ```js
// main.js // main.js
import log from './utils/logger.js'; import log from './utils/logger.js';
log("Aplicación iniciada correctamente.");
```
log('Sistema de activaciones inicializado.');
```