API

Manche Teile deiner Website beantworten Anfragen, statt eine Seite anzuzeigen: ein Kontaktformular, das eine Nachricht speichert, ein Checkout, der eine Zahlung bei Stripe anfordert, oder ein Job, der die Erinnerungen für morgen verschickt. Jeder dieser Teile ist eine Route im Code deiner Website. In der API-Ansicht kannst du sie alle ausprobieren, ohne den Editor zu verlassen.

API-Ansicht öffnen

Wenn deine Website Routen hat, erscheint oben im Seitenbereich ein Umschalter Seiten | API. Klicke auf API, um sie anzuzeigen.

Die Liste ist wie deine Seiten aufgebaut, mit einer Ebene pro Teil der Adresse:

• Eine Route, die auf eine Art antwortet, zeigt ihre Methode direkt in ihrer Zeile, zum Beispiel GET neben health. Klicke auf die Zeile, um sie zu öffnen.
• Eine Route, die auf mehrere Arten antwortet, lässt sich aufklappen und zeigt dann eine Zeile pro Methode, etwa GET, POST und DELETE.
• Ordner gruppieren Routen mit demselben Anfang in der Adresse.
• Auch deine Sitemap, robots.txt, dein App-Manifest und deine Social-Media-Bilder werden aufgelistet, da dein Code sie erzeugt.

Bei einer Website mit vielen Routen erscheint oben das Feld Endpunkte filtern.

Du kannst auch eine Adresse, die mit /api/ beginnt, in die Adressleiste oben im Editor eingeben oder eine Route aus der Liste darunter auswählen. Wenn du eine vollständige Adresse wie /api/tools/figma eingibst, wird die Route geöffnet und figma für dich eingetragen.

Öffne auf dem Smartphone das Website-Menü oben und wähle API aus. Du kannst auch eine Route aus der Seitenliste auswählen.

Eine Anfrage senden

Wähle eine Methode aus. Die Arbeitsfläche wechselt dann zur API-Ansicht. Die Adresse oben zeigt genau, was gesendet wird, und aktualisiert sich bei deinen Eingaben.

• Vorschau sendet an den Entwurf, an dem du gerade arbeitest. Live sendet an deine veröffentlichte Website.
• Senden sendet die Anfrage. ⌘↵ / Ctrl+Enter funktioniert auch.

Parameter

Das sind die Werte, die die Route aus ihrer Adresse liest. Pfad-Werte sind die Teile in eckigen Klammern, etwa [id], und als Erforderlich markiert. Abfrage-Werte stehen nach ? und werden von der Route ausgewertet. Klicke auf Parameter hinzufügen, um einen nicht aufgeführten Parameter zu senden.

Body

Für POST, PUT, PATCH und DELETE. Die Felder, die die Route liest, sind bereits aufgelistet. Fülle sie wie ein Formular aus. Wechsle zu JSON, um den Body selbst zu schreiben. Bei einer Route, die ein Formular liest, werden Formularfelder angezeigt und so gesendet, wie ein Browser ein Formular sendet.

Header

Zusätzliche Informationen, die mitgesendet werden, etwa ein Anmelde-Token. Klicke auf Header hinzufügen, um einen hinzuzufügen.

Die Antwort lesen

Zuerst siehst du den Status, die Dauer und die Größe der Antwort. Darunter findest du:

• Body zeigt die Antwort in einer gut lesbaren Form: farbiges JSON, formatiertes XML und HTML (mit einer Seite-Ansicht für HTML), eine Tabelle für CSV und Bilder für Bilddateien.
• Header listet die Header auf, die die Route zurückgesendet hat.
• Konsole zeigt, was der Server deiner Website beim Beantworten ausgegeben hat. Das funktioniert für Anfragen an die Vorschau.

Bei einer Route, die eine Datei sendet, etwa einen CSV-Export oder ein erzeugtes Bild, erscheint die Schaltfläche Herunterladen. Bei einer Route, die Besucher weiterleitet, siehst du das Ziel. Ist es eine Seite auf deiner Website, erscheint Seite öffnen.

Klicke auf die Uhr, um die Anfragen aus dieser Sitzung zu sehen und erneut zu öffnen.

Wenn etwas schiefgeht

Wenn dein Code beim Beantworten fehlschlägt, zeigt die API-Ansicht den Fehler und die Codezeile, in der er aufgetreten ist.

• Code öffnen öffnet die Datei im Code-Editor.
• Mit KI beheben startet einen Chat mit dem Fehler und der Serverausgabe, damit die KI das Problem beheben kann.

Anfragen mit Anmeldung

Manche Routen antworten nur angemeldeten Personen. Sende zuerst eine Anfrage an die Anmelderoute deiner Website, mit einer E-Mail-Adresse und einem Passwort aus deiner Website. Die API-Ansicht speichert die Cookies, die deine Website setzt, und sendet sie bei den nächsten Anfragen mit, genau wie ein Browser. Sie erscheinen unter Header als Cookie. Mit Aufheben meldest du dich ab.

Du kannst auch selbst einen Authorization-Header hinzufügen, wenn deine Routen Tokens verwenden.

Geplante Jobs und Zahlungen

Zum Testen musst du keine Secrets kopieren:

• Routen, die nach einem Zeitplan ausgeführt werden, prüfen ein Secret, das deine Website speichert. Die API-Ansicht sendet es für dich mit.
• Stripe-Webhooks prüfen eine Signatur. Die API-Ansicht füllt den Body mit einem Stripe-Testereignis vor und signiert es mit dem eigenen Secret deiner Website. Signierte Testereignisse werden nur an die Vorschau gesendet. So wirkt sich ein Test nie auf echte Bestellungen auf deiner Live-Website aus.

Eine Route hinzufügen

Klicke oben im Seitenbereich auf +, während API ausgewählt ist. Wenn Seiten ausgewählt ist, wähle Neuer Endpunkt aus dem Menü.

• Pfad ist die Adresse der Route nach /api/. Verwende [id] für einen variablen Teil, etwa tools/[id]/reviews.
• Methoden sind die Arten, auf die die Route antwortet. Wähle so viele aus, wie du brauchst.
• Mit Beschreibung lässt du die KI die Route in einem neuen Chat schreiben. Leere Datei erstellt eine leere Route, die du selbst schreibst.

Die neue Route öffnet sich in der API-Ansicht, sobald sie erstellt ist. So kannst du sie direkt ausprobieren.

Gut zu wissen

• Für eine Anfrage stehen 12 Sekunden zur Verfügung. Sendet eine Route danach noch weiter, wird angezeigt, was bisher angekommen ist.
• Die API-Ansicht zeigt bis zu 512 KB einer Antwort an. Dateien bis zu 5 MB können heruntergeladen werden.
• Du kannst 3 Anfragen gleichzeitig ausführen und bis zu 30 pro Minute senden.
• Deine Anfragen, dein Verlauf und deine Cookies bleiben erhalten, bis du den Editor neu lädst.
• Um an Live zu senden, muss deine Website veröffentlicht sein.