Jamdesk Documentation logo

Playground API

Testa gli endpoint API dalla documentazione con il playground interattivo: compila i parametri, visualizza esempi di codice e invia richieste reali.

Il playground API aggiunge un pulsante interattivo "Try it" alle pagine degli endpoint API. Gli sviluppatori compilano i parametri, vedono gli esempi di codice aggiornarsi in tempo reale e inviano richieste HTTP reali dalla pagina della documentazione.

Gli screenshot mostrano l'interfaccia in inglese.

Finestra del playground API con il modulo dei parametri a sinistra e gli esempi di codice in tempo reale a destra

Avvio rapido

Il playground è abilitato per impostazione predefinita. Ogni pagina con un campo frontmatter openapi: o api: riceve automaticamente un pulsante "Try it". La gestione di CORS è automatica.

Non è necessaria alcuna configurazione docs.json. Aggiungi un campo openapi: o api: al frontmatter della pagina per visualizzare il playground.

Modalità di visualizzazione

Il campo display controlla le funzionalità disponibili nel playground:

ModalitàPulsante "Try it"Compila parametriCodice in tempo realeInvia richiesta
"interactive" (predefinita)
"simple"
"none"

Esperienza completa del playground. Gli sviluppatori compilano i parametri, vedono gli esempi di codice aggiornarsi in tempo reale e inviano richieste HTTP reali. Le risposte vengono visualizzate inline con codici di stato, durata e body formattati.

docs.json
{
  "api": {
    "playground": {
      "display": "interactive"
    }
  }
}

Autenticazione

Se l'API richiede l'autenticazione (configurata tramite api.mdx.auth.method in docs.json), il playground mostra un campo di autenticazione nella parte superiore del modulo dei parametri. Gli sviluppatori inseriscono la chiave API o il token direttamente nella finestra.

Le credenziali vengono conservate solo in memoria per la sessione corrente. Non vengono mai salvate in localStorage né mantenute tra una visita e l'altra.

Precompilazione dei valori di esempio

Quando la specifica OpenAPI include valori example per i parametri e i body delle richieste, il playground può precompilarli:

docs.json
{
  "api": {
    "examples": {
      "prefill": true
    }
  }
}

In questo modo gli sviluppatori risparmiano tempo, visualizzando valori realistici che possono modificare invece di partire da campi vuoti.

Override per pagina

Sostituisci la modalità di visualizzazione globale nelle singole pagine utilizzando il campo frontmatter playground:

---
title: Create Ticket
openapi: POST /tickets
playground: interactive
---

È utile quando vuoi disabilitare globalmente il playground ma abilitarlo su endpoint demo specifici, o viceversa.

FrontmatterComportamento
playground: interactivePlayground completo in questa pagina
playground: simplePlayground con solo il codice in questa pagina
playground: noneNessun playground in questa pagina

Come funziona

1
Fai clic su 'Try it'

Il playground si apre come overlay modale a schermo intero. La pagina della documentazione resta intatta sotto la finestra.

2
Compila i parametri

I parametri del percorso, della query, dell'header e del body vengono mostrati come campi del modulo. I campi obbligatori sono contrassegnati. L'URL di base viene recuperato dal campo servers della specifica OpenAPI.

3
Osserva l'aggiornamento del codice

Mentre digiti, gli esempi di codice vengono rigenerati in tempo reale in tutti i linguaggi configurati. Copia qualsiasi esempio con un solo clic.

4
Invia la richiesta

In modalità interattiva, fai clic su Send (oppure premi Ctrl/Cmd+Enter) per eseguire la richiesta. La risposta viene visualizzata sotto con il codice di stato, la durata e il body formattato.

Gli screenshot mostrano l'interfaccia in inglese.

Playground API che mostra una risposta 201 Created con body JSON dopo l'invio di una richiesta

Quando il playground è aperto, l'URL viene aggiornato includendo ?playground=open. Condividi questo URL per collegare direttamente qualcuno alla vista del playground di un endpoint.

Più server

Quando la specifica di un endpoint elenca più di una voce in servers, ad esempio produzione e sandbox, accanto all'URL dell'endpoint compare un selettore di server. La scelta del lettore determina l'URL di base, il pulsante per copiare l'URL, gli esempi di codice nella pagina e la richiesta effettivamente inviata dal playground, evitando così di copiare un curl di produzione mentre si consulta la documentazione sandbox.

Gli endpoint con un solo server non cambiano: nessun selettore e nessun peso aggiuntivo per la pagina.

Scorciatoie da tastiera

ScorciatoiaAzione
Ctrl/Cmd + EnterInvia richiesta
EscapeChiudi playground

Funziona con entrambi i tipi di pagina API

Il playground funziona sulle pagine che utilizzano il formato frontmatter openapi: o api::

I parametri e gli schemi vengono recuperati automaticamente dalla specifica OpenAPI. Non è necessaria alcuna configurazione aggiuntiva.

---
openapi: POST /tickets
---

Sviluppo locale

Quando esegui jamdesk dev, i pulsanti "Try it" sono visibili, ma il playground è una funzionalità disponibile solo in produzione. Facendo clic su "Try it" nello sviluppo locale viene mostrata una breve notifica invece di aprire la finestra. Esegui il deploy della documentazione per utilizzare il playground completo.

Provalo dal vivo

Questo sito di documentazione ha il playground abilitato. Visita la pagina Esempio OpenAPI e fai clic su "Try it" per provarlo con l'API demo.

Qual è il prossimo passo?

Esempio OpenAPI

Guarda un playground dal vivo su una pagina di endpoint generata automaticamente

Riferimento docs.json

Riferimento completo alla configurazione, incluso api.playground

Esempi di richieste e risposte

Pagine di endpoint API create manualmente con componenti MDX

Esempi di codice

Configura i linguaggi da visualizzare negli esempi di codice