Tutorial: Cómo estructurar contenido anidado en Content Island

00:00 / 00:00

1x

0.25x 0.5x 0.75x 1x 1.25x 1.5x 1.75x 2x

• Definiendo el modelo de datos
• Introduciendo datos
• Usando la API: Un ejemplo sencillo con Vanilla TypeScript
• Cómo usar colecciones anidadas en un proyecto real con Astro

Definiendo el modelo de datos

Cuando definimos estructuras de datos en Content Island, tenemos disponibles una serie de tipos básicos: texto, número, booleano, fecha, etc. Pero hay ocasiones en las que es interesante poder enlazar un objeto o listas de objetos que hayamos creado previamente.

Vamos a imaginar que queremos crear un portal para mostrar cursos online, un mock en baja fidelidad podría ser el siguiente:

¿Qué entidades vamos a necesitar crear?

• Una entidad para los cursos.
• Una entidad para las lecciones de los cursos.

¿Qué casuística tenemos aquí? Pues que un curso va a contener una o más lecciones.

Nos ponemos manos a la obra, voy a crear un proyecto que se va a llamar

Puedes probarlo en linea aquí: Open in StackBlitz.

Te puedes clonar el proyecto de demo aquí: Clone full demo repository

collection-example

• Generamos api token.

• Elegimos inglés como idioma del proyecto.

Y vamos a modelar esto en Content Island.

• Primero voy a crear la colección de lecciones para ello voy a añadir lo campos:

  • title (short text): Título de la lección.

  • slug (short text): El segmento de url que va a identificar al curso de forma amistosa.

  • content (long text): La descripción de la lección.

  • video (short text): URL de youtube del video de la lección (Content Island también te permite subir directamente el video y publicarlo en una CDN, pero por simplicidad hemos optado por un video de youtube).

• Ahora voy a crear la entidad de cursos (training), para ello voy a añadir los campos:

  • title (short text): Título del curso.

  • slug (short text): El segmento de url que va a identificar al curso de forma amistosa.

  • thumbnail (media): Imagen que representa al curso.

  • overview (long text): La descripción del curso.

  • lessons (collection): Las lecciones que pertenecen a este curso <-- ojo si ponemos esto como required primero tendremos que crear la colección de lecciones.

Ya tenemos el modelo de datos creado, ahora vamos a crear un curso y algunas lecciones.