Organiza tu Contenido con Colecciones Anidadas — Usando la API: Un ejemplo sencillo con Vanilla TypeScript

00:00 / 00:00

03. Usando la API: un ejemplo sencillo con TypeScript

Introducción

Ya tenemos en Content Island los cursos enlazados con su lista de lecciones ¿Cómo explotamos esto desde código?

En este video vamos a crear un proyecto mínimo en Vanilla TypeScript que nos permita entender como interactuar con la API de Content Island sin meter ruido adicional.

Creando el proyecto

Vamos a crear un proyecto en blanco con Vanilla TypeScript, sin crear subcarpetas, para ello ejecutamos el comando:

npm create vite@latest .

Hacemos limpia del proyecto, quitamos counter y vaciamos el fichero main.ts.

Instalamos las dependencias del proyecto:

npm install

Ahora instalamos el cliente de Content Island:

npm install @content-island/api-client

Definir el modelo de datos

Vamos a crear un fichero debajo de src que se va a llamar model.ts

Este código lo extraemos del propio proyecto de Content Island.

./src/model.ts

import type { Media } from "@content-island/api-client";

export interface Training {
  id: string;
  language: "en";
  title: string;
  slug: string;
  thumbnail: Media;
  overview: string;
  lessons?: string[]; // Stores the ID of the related entity
}

export interface Lesson {
  id: string;
  language: "en";
  title: string;
  slug: string;
  content: string;
  video: string;
}

Si te fijas el campo lessons:

Por un lado está como opcional (fijate en el interrogante al final del nombre de la propiedad), esto es así porque no lo hemos puesto como obligatorio en el modelo de datos de Content Island.
Por otro nos da un array de strings, esto es porque en Content Island te traes el listado de ids de las lecciones, no el objeto completo de la lección, cuando lo necesites puedes hacer una petición para extraer el listado de lecciones.

Inicializando content Island y api curso

Vamos a crear un fichero que se llame api.ts y vamos a inicializar el cliente de Content Island.

./src/api.ts

import { createClient } from "@content-island/api-client";

// Por simplicidad está el token hardcodeado, pero en un proyecto real deberías
// usar variables de entorno o un sistema de gestión de secretos.
// Y llamar a este código desde servidor
const client = createClient({
  accessToken: "a2bb1def2090a842ab3e331e33693e2c", // Reemplaza con tu token real
});

Y empezamos por traernos los datos de un curso en concreto, para ello creamos una función que se llame getTraining y le pasamos el id del curso.

añadir esto al final del fichero api.ts

import { ContentIsland } from '@content-island/api-client';
+ import type { Training } from './model';

// Por simplicidad harcodeamos el token de acceso, pero en un proyecto real deberías usar variables de entorno y llamarlo desde servidor.
const contentIsland = new ContentIsland({
 accessToken: "a2bb1def2090a842ab3e331e33693e2c",
});

+ export async function getTraining(id: string): Promise<Training> {
+  const training = await client.getContent<Training>({id});
+  return training;
+ }

Y vamos a por main.ts

./src/main.ts

import "./style.css";
import { getTraining } from "./api";

async function main() {
  const training = await getTraining("6882199268fb58095585e4be");

  const appContainer = document.getElementById("app");

  if (appContainer) {
    appContainer.innerHTML = `<h1>${training.title}</h1>`;
  } else {
    console.error("App container not found");
  }
}

main();

Ahora quiero sacar el listado de lecciones del curso, para ello vamos a crear una función que se llame getLessons y le pasamos la lista de ids de las lecciones que queremos obtener:

añadir esto al final del fichero api.ts

./src/api.ts

export async function getLessons(ids: string[]): Promise<Lesson[]> {
  const lessons = await client.getContentList<Lesson>({
    contentType: 'lesson',
    id: { in: ids} });
  return lessons;
}

Volvemos a modificar el fichero main.ts para que muestre el listado de lecciones del curso:

./src/main.ts

- import { getTraining } from "./api";
+ import { getTraining, getLessons } from "./api";

+ const showLessons = (lessons: Lesson[]) => {
+  const appContainer = document.getElementById("app");
+  if (appContainer) {
+    const lessonsList = lessons.map(lesson => `<li>${lesson.title}</li>`).join('');
+    appContainer.innerHTML += `<h2>Lessons:</h2><ul>${lessonsList}</ul>`;
+  } else {
+    console.error("App container not found");
+  }
+ }

async function main() {
  const training = await getTraining("b3d8c1f2-4e5a-4c6b-9f0e-7a8b9c0d1e2f");
+ const lessons = training.lessons ? await getLessons(training.lessons) : [];

  const appContainer = document.getElementById("app");

  if (appContainer) {
    appContainer.innerHTML = `<h1>${training.title}</h1>`;
+     showLessons(lessons);
  } else {
    console.error("App container not found");
  }
}

Y ahora tenemos los datos del curso y el detalle de las lecciones.

En este proyecto hemos hecho lo básico para poder entender el concepto, en el siguiente video vamos a ver un implementación más completa.