MallaDocs
InicioInicio rápidoAbrir Malla

Muestra datos de una API

Conecta una API REST, ejecuta una consulta y enlaza los resultados a una lista de colección.

Guía de usuario
Intermedio20 min

Vas a construir: Una página que muestra publicaciones de una API REST pública en una cuadrícula de tarjetas, con un estado vacío

Lee primero: Inicio rápidoConstruye una landing page

En este tutorial conectas una API REST, escribes una consulta que trae una lista de publicaciones y muestras cada publicación como una tarjeta en la página. El ejemplo usa JSONPlaceholder, una API de prueba gratuita que no necesita clave, así que puedes seguirlo con solo tener un sitio.

Muestra datos de una APIEl video llegará pronto. Los pasos escritos a continuación cubren todo.
Muestra datos de una API· 7 min

Conecta la API

  1. Abre el espacio de trabajo Data

    Abre la página en la que quieres trabajar y presiona Data en la parte inferior de la barra lateral izquierda. El espacio de trabajo Data muestra las variables, las consultas y las fórmulas de la página y las integraciones del sitio. Presiona Data otra vez, o su ícono de cerrar, para volver al lienzo.

  2. Agrega una integración REST

    Junto a Integrations, presiona + (Add integration) y elige REST API. Llámala Placeholder API.

    En la tarjeta Connection, pon Base url en https://jsonplaceholder.typicode.com. Deja Auth type en none: esta API es pública.

  3. Créala y prueba la conexión

    Presiona Create integration. Aparece una tarjeta Test connection: presiona Run test y espera a que diga Connected. La prueba usa los ajustes guardados, así que guarda otra vez antes de probar un cambio.

Escribe la consulta

  1. Agrega una consulta

    Junto a Queries, presiona + (Add query). Cámbiale el nombre a la consulta de query a posts en el campo de arriba. Su resultado ahora está disponible como queries.posts.data.

  2. Apúntala a la API

    En la tarjeta Source, pon Integration en Placeholder API. La Operation cambia a Request.

  3. Completa la solicitud

    En la tarjeta Input, deja Method en GET y pon Path en /posts?_limit=6. La ruta se agrega a la URL base, así que la consulta pide las primeras seis publicaciones.

  4. Elige cuándo se ejecuta

    En When it runs, elige Static. La consulta se ejecuta al publicar y las publicaciones se escriben en el HTML, lo que es rápido y bueno para los buscadores. Elige Server cuando los datos deban estar actualizados en cada solicitud, o Client cuando dependan de lo que hace el visitante en el navegador.

  5. Pruébala

    En la tarjeta Result, presiona Run. La respuesta aparece como un árbol: un array de seis objetos con userId, id, title y body.

Punto de control

El espacio de trabajo Data muestra la consulta posts con static · Placeholder API, y su tarjeta Result muestra seis publicaciones.

Muestra las publicaciones en la página

  1. Inserta una lista de colección

    Vuelve al lienzo y selecciona el frame de la página o una sección. Presiona + en la pestaña Layers y elige Collection list. Es una cuadrícula de tres columnas con un hijo, Item, que se repite una vez por publicación.

  2. Usa la consulta como fuente

    Con la lista seleccionada, abre Collection list en el inspector. Pon Source en Expression si no lo está ya. Items se completa con queries.posts.data; si no, presiona su botón de enlazar y escríbelo.

  3. Agrega texto al ítem

    Presiona T y arrastra dentro de Item para agregar un texto para el título; luego agrega un segundo texto para el cuerpo. Cada repetición del ítem recibe las mismas capas.

  4. Enlaza los textos

    Selecciona el texto del título. En Typography, presiona el botón de enlazar junto al texto y escribe item.title. Enlaza el segundo texto a item.body de la misma forma. Ahora cada tarjeta muestra su propia publicación.

  5. Dale estilo a una tarjeta

    Selecciona Item y dale padding, un relleno y un radio de borde. El estilo se aplica a todas las tarjetas, porque todas son repeticiones del mismo ítem.

Punto de control

El lienzo muestra seis tarjetas en una cuadrícula, cada una con un título y un cuerpo diferentes.

Maneja un resultado vacío

  1. Escribe el estado vacío

    Selecciona la lista de colección y pon Empty text en Todavía no hay publicaciones. Este texto se muestra en lugar de las tarjetas cuando la lista no tiene ítems.

  2. Pruébalo

    En el espacio de trabajo Data, cambia el Path de la consulta a /posts?userId=999. Ningún usuario tiene ese id, así que la API devuelve un array vacío y el lienzo muestra tu texto de estado vacío. Vuelve a poner la ruta en /posts?_limit=6 cuando termines.

  3. Mira la vista previa y publica

    Presiona ⌘↵ para ver la página y luego presiona Publish. Una consulta estática se ejecuta durante la publicación, así que la página publicada tiene las publicaciones en su HTML.

Listo

Tu página muestra publicaciones de la API, enseña un mensaje cuando no hay ninguna y está en línea en staging.

Lo que aprendiste

  • Una integración guarda la URL base, los encabezados y los secretos; las consultas la reutilizan.
  • Una consulta elige una operación, completa su entrada y se ejecuta en modo estático, servidor o cliente.
  • Una lista de colección con una fuente Expression repite su ítem por cada elemento del resultado de una consulta, y item.* lee el elemento actual.

Lee las guías en las que se basa este tutorial:

Consultas e integracionesConecta REST, GraphQL y el CMS, mantén los secretos en el servidor y elige el modo estático, servidor o cliente.Listas de colecciónRepite una plantilla una vez por cada ítem de una consulta o un array, con estado vacío y paginación.Enlaces de datos y expresionesEnlaza cualquier texto, atributo, estilo o visibilidad a una expresión que lee datos en vivo.Referencia de expresionesOperadores, variables de ámbito, funciones fn integradas y métodos disponibles en las expresiones.