Skip to content

GitLab

Modulo 4 · Changes

Page history
merge authored by imunnic's avatar imunnic
Hide whitespace changes
Inline Side-by-side
Showing with 21 additions and 17 deletions
Modulo-4.md
View page @ 1d1312b2
......@@ -52,31 +52,34 @@ Las API REST intercambian datos en **formato JSON**, fácilmente mapeables a **i
---
## 3. Métodos HTTP más comunes
| Método | Acción | Ejemplo en la aplicación |
|--------|--------|--------------------------|
| GET | Obtener información | Consultar recursos |
| POST | Crear un recurso | Añadir personal |
| PUT | Actualizar completo | Editar recurso |
| PATCH | Actualizar parcial | Cambiar estado |
| DELETE | Eliminar | Dar de baja |
Los métodos HTTP son las herramientas que se disponen desde la API para poder realizar el CRUD(Create, Read, Update, Delete) en la base de datos desde un *frontal web*. Dependiendo de cómo se haya creado la API, estos métodos estarán permitidos o no, requerirán autenticación o no o incluso podrán no existir. Cada uno de estos métodos se puede realizar sobre una ruta concreta o **endpoint** como `http://localhost:8080/panacea/rest/recursos`.
Los más comunes son:
| Método | Acción | Ejemplo en la aplicación |
| ------ | ------------------- | ------------------------ |
| GET | Obtener información | Consultar recursos |
| POST | Crear un recurso | Añadir personal |
| PUT | Actualizar completo | Editar recurso |
| PATCH | Actualizar parcial | Cambiar estado |
| DELETE | Eliminar | Dar de baja |
---
## 4. Qué es JSON
JSON es el formato estándar de intercambio de datos. En TypeScript, el JSON recibido se transforma en **objetos tipados**.
JSON es el formato estándar de intercambio de datos. En TypeScript, el JSON recibido se transforma en **objetos tipados**. Es el formato por defecto en el que las **API REST** devuelven los objetos de la **base de datos**.
```typescript
interface RecursoDTO {
id: string;
unidad: string;
tipoRecurso: 'HUMANO' | 'MATERIAL';
uco: string;
}
const recurso: RecursoDTO = {
id: '1hd72h3kw8fhs7dh34',
unidad: 'JMAPER',
tipoRecurso: 'HUMANO',
uco: 'JMAPER'
};
const json: string = JSON.stringify(recurso);
......@@ -87,7 +90,7 @@ const obj: RecursoDTO = JSON.parse(json);
## 5. Peticiones HTTP con `fetch`
`fetch` devuelve una `Promise<Response>`. En TypeScript se tipa explícitamente la respuesta esperada.
El método `fetch` es la forma de solicitar datos a una **API REST** desde el *frontal web*. El método devuelve una `Promise<Response>`. En TypeScript se tipa explícitamente la respuesta esperada. Esta `Promise` es un *promesa* de que en algún momento, tenga o no tenga éxito, va a llegar una respuesta.
```typescript
async function obtenerRecursos(): Promise<RecursoDTO[]> {
......@@ -101,7 +104,7 @@ async function obtenerRecursos(): Promise<RecursoDTO[]> {
}
obtenerRecursos()
.then((recursos: RecursoDTO[]) => {
.then((recursos) => {
console.log('Recursos disponibles:', recursos);
})
.catch((error: Error) => {
......@@ -135,6 +138,7 @@ cargarRecursos();
```typescript
async function agregarRecurso(nuevo: RecursoDTO): Promise<RecursoDTO> {
//En el caso de la API, el método POST no se permite sobre recursos, debe hacerse sobre recursosHumanos o recursosMateriales
const respuesta = await fetch('http://localhost:8080/panacea/rest/recursos', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
......@@ -150,7 +154,7 @@ async function agregarRecurso(nuevo: RecursoDTO): Promise<RecursoDTO> {
agregarRecurso({
id: '17d263hf84j6sh3h9sjd',
unidad: 'JMAPER',
uco: 'JMAPER',
tipoRecurso: 'HUMANO',
}).then((resultado: RecursoDTO) => {
console.log('Recurso agregado:', resultado);
......@@ -188,7 +192,7 @@ async function eliminarRecurso(id: string): Promise<void> {
## 9. CORS (Cross-Origin Resource Sharing)
CORS es un mecanismo de seguridad del navegador. El servidor debe permitir explícitamente el origen del frontend.
CORS es un mecanismo de seguridad del navegador. El servidor debe permitir explícitamente el origen del frontend para no tener problemas. Esto quiere decir que si, por ejemplo, el puerto desde el que se realizan las peticiones del *frontal web* (véase 5000, como es por defecto el de LiveServer), no se podrá tener acceso a la **API REST** y por tanto tampoco a los datos.
```plaintext
Access-Control-Allow-Origin: http://localhost:4200
......@@ -217,7 +221,7 @@ btn.addEventListener('click', async (): Promise<void> => {
recursos.forEach((r: RecursoDTO) => {
const li = document.createElement('li');
li.textContent = `${r.tipoRecurso}: ${r.unidad}`;
li.textContent = `${r.tipoRecurso}: ${r.uco}`;
lista.appendChild(li);
});
} catch {
......