In der Tech-Branche habe ich einen unerwarteten Anstieg beobachtet. Jedes coole neue Startup oder jede große Veröffentlichung der großen Player scheint eines im Sinn zu haben: Front-End-Ermächtigung.
Das ist ein ziemlich allgemeiner Begriff, also lassen Sie mich es erklären.
Es scheint, dass wir mehr Aufmerksamkeit darauf lenken, den Prozess der Erstellung von Full-Stack-Anwendungen aus der Perspektive eines UI/UX-Entwicklers zu beschleunigen und zu vereinfachen. Obwohl mir das als hauptsächlich im Backend tätiger Entwickler zunächst etwas Bedenken bereitet (Backend-Dienste müssen weiterhin sorgfältig geplant und entworfen werden), gefällt mir die Idee immer mehr.
Backend-Dienste sind zwar aus meiner Sicht die wichtigsten Komponenten einer Anwendung, aber die Realität sieht anders aus. Backend-Dienste werden erwartet und es wird erwartet, dass sie funktionieren. Benutzeroberflächen hingegen sind das, was jeder zur Beurteilung Ihrer Anwendung heranzieht. Sie könnten die besten Dienste der Welt haben, aber wenn Ihre Benutzeroberfläche schlecht ist, wird sie niemand nutzen.
Daher ist Front-End-Ermächtigung wichtig. Je schneller Sie sich auf Ihre Benutzeroberfläche konzentrieren können, desto besser können Sie sicherstellen, dass sie Ihr Geschäftsproblem löst und dies auf eine einzigartige Weise tut.
Oftmals folgen wir jedoch einer Entwicklungsmethodik, die einen rückwärtsgerichteten Ansatz zum Front-End-Design verfolgt. Wir schreiben unsere Benutzergeschichten so, dass die Backend-Entwicklung Vorrang vor der Benutzeroberfläche hat. Das mag zwar Sinn ergeben, da Sie APIs benötigen, die Sie über Ihr Front-End aufrufen können, aber letztendlich verlangsamt es Ihre Zeit bis zur ersten Iteration.
Ich wollte das ändern. Ich wollte etwas, das den gesamten Prozess in Gang setzt. Also habe ich es gemacht.
Beginnen Sie mit einem Objekt
In fast jedem Software-Designprozess beginnen Sie mit einem JSON-Objekt. Dieses Objekt stellt die Datenfelder dar, die Sie sammeln oder generieren werden, sowie alle untergeordneten Ressourcen, die damit verbunden sind. Lassen Sie uns als Beispiel eine Blogbeitragsentität für Ready, Set, Cloud betrachten.
{
"slug": "json-to-working-api-in-seconds",
"title": "Using AI to Go From JSON To API In Seconds",
"date": "2023-11-15",
"categories": [ "ai"],
"tags": [ "api", "dx" ],
"socialPosts": [
{
"type": "Twitter",
"message": "Did you know you can use AI to build your API spec AND create a mock for you in seconds? Find out how!",
"scheduledDate": "2023-11-20T14:30:00"
}
]
}Das obige Objekt scheint ziemlich grundlegend zu sein und ein Front-End-Entwickler könnte sicherlich damit arbeiten. Aber das reicht nicht aus. Wenn Sie eine Anwendung erstellen, benötigen Sie wahrscheinlich einen Dienst, der mit einer API kommuniziert, um Ressourcen hinzuzufügen, zu aktualisieren, zu löschen, zu lesen und aufzulisten. Darüber hinaus benötigen in einer typischen REST-API die untergeordneten Ressourcen ihren eigenen Satz von Endpunkten. In unserem obigen Beispiel benötigen wir eine Möglichkeit, soziale Beiträge hinzuzufügen, zu aktualisieren, zu löschen und aufzulisten, die mit unserem Artikel verbunden sind. *Übrigens, ich habe gerade die Erstellung und Planung von Social-Media-Beiträgen automatisiert, meine Website ist jetzt vollständig ohne manuellen Aufwand!**.
Es klingt nach einer Menge Arbeit, nur um an den Punkt zu gelangen, an dem Sie mit der Erstellung Ihrer Benutzeroberfläche beginnen können.
Ich bin ein Befürworter der API-First-Entwicklung und denke, dass Sie Ihre API-Spezifikation schreiben sollten, bevor Sie Geschichten erstellen oder Code schreiben. Aber ich weiß auch, dass das nicht so oft passiert, wie ich es mir wünschen würde.
Mit diesem Gedanken im Hinterkopf habe ich einen Endpunkt erstellt, der unser obiges Objekt nimmt, es rekursiv auf untergeordnete Entitäten überprüft, potenzielle Endpunkte identifiziert und es dann an Amazon Bedrock übergibt, um eine API-Spezifikation zu generieren.
Das Konzept selbst ist ziemlich einfach, aber nur dank künstlicher Intelligenz, die die harte Arbeit erledigt, möglich. Mit einfacher Logik zur Identifizierung von Endpunkten und einem Beispielmodell können Sie eine gute Vorstellung davon bekommen, wie eine API aussehen könnte, um eine bestimmte Entität zu verwalten.
Wenn Sie es in Aktion sehen und selbst ausprobieren möchten, können Sie den Quellcode in GitHub anzeigen.
Einen Schritt weiter gehen
Der von mir erstellte Endpunkt generiert eine API-Spezifikation, was zwar cool ist, aber ich würde es nicht als Front-End-Ermächtigung bezeichnen. Die Generierung der Spezifikation ist ein großartiger erster Schritt für die API-First-Entwicklung. Sie können es als Grundlage verwenden und sich durch die Entwicklererfahrung arbeiten, indem Sie Endpunkte und Modelle nach Bedarf ändern. Aber wir wollen etwas, das Front-End-Entwickler verwenden können. Etwas, das sie aufrufen und „echte“ Daten im gewünschten Format zurückerhalten können.
Ich habe versucht, künstliche Intelligenz dazu zu bringen, Code zu schreiben. Es funktioniert nicht. Zumindest nicht in dem Maßstab, den wir benötigen, um eine API auf der Grundlage einer Spezifikation zu erstellen. Es fehlen viele Geschäftsanforderungen und spezifische Implementierungsdetails, um etwas Sinnvolles zu erhalten. Mindestens benötigen Sie für jeden Endpunkt Unit-Tests, um Ihre Implementierung erfolgreich zu erstellen.
Was wir wirklich wollen, ist etwas, das Daten im gewünschten Format zurückgibt. Endpunkte, die eingehende Daten akzeptieren und die erwarteten Daten zurückgeben, wenn sie aufgerufen werden. Ähnlich wie ein Mock. Moment mal, genau wie ein Mock!
Ich bin seit Jahren ein begeisterter Postman Benutzer. Ich weiß, dass sie Fähigkeiten zur Mockserver-Erstellung haben. Diese Mocks werden auf der Grundlage einer Sammlung erstellt und akzeptieren Anforderungsdaten in einem bestimmten Format und geben Antworten zurück, die mit einem bereitgestellten Schema übereinstimmen. Genau das, was wir wollten!
Daher haben wir eine API-Spezifikation und wir möchten einen Mockserver daraus erstellen. Mithilfe der Postman-API können wir Ressourcen innerhalb von Postman selbst hinzufügen, aktualisieren und abrufen, was bedeutet, dass wir den gesamten Prozess automatisieren können!
Bei der Durchsicht der Dokumentation der Postman-API stellte ich jedoch fest, dass dies nicht so einfach war, wie ich dachte. Es gab einige Umwege, die ich nehmen musste, aber es war immer noch möglich, das zu tun, was ich wollte. Im Folgenden ist der Workflow zur Erstellung eines Mockservers dargestellt.
Diese Sammlung beginnt mit dem Aufruf des API-Spezifikationsgenerators, den wir erstellt haben, und verwendet dann die Postman-API, um eine API, eine Sammlung und einen Mockserver daraus zu erstellen. Sie aktualisiert sogar die API-Spezifikation, um die URL des Mockservers einzuschließen, damit Sie sie griffbereit haben.
Verwendung der Sammlung
Dies ist eine öffentliche Postman-Sammlung in meinem Arbeitsbereich. Jeder kann sie kostenlos forken und auf seinem eigenen System ausführen. Hier sind die Schritte, um von einem JSON-Objekt zu einer funktionierenden Mock-API zu gelangen.
Einmalige Einrichtung
- Bereitstellen des Spezifikationsgenerierungsstapels in Ihrem AWS-Konto
- Kopieren des Werts der Ausgabe
GenerateSpecEndpointaus Ihrer Bereitstellung - Forken der API-Schnellstartsammlung in Ihren Arbeitsbereich
- Erstellen eines Postman-API-Schlüssels
- Erstellen einer Umgebung in Postman und Hinzufügen einer Variablen mit dem Namen
POSTMAN_API_KEY, Markieren Sie sie als geheim und fügen Sie den generierten Schlüssel ein - Aktualisieren der Variablen
GENERATOR_BASE_URLauf der Sammlung, um den in Schritt 2 kopierten Wert zu verwenden - Aktualisieren der Variablen
workspaceIdauf der Sammlung, um die Kennung des Arbeitsbereichs zu verwenden, in dem Sie Ihren Mockserver erstellen möchten
Generieren einer neuen API
Nachdem Sie die initiale Einrichtung durchgeführt haben, ist das Erstellen von APIs ein Kinderspiel! Jedes Mal, wenn Sie eine neue API erstellen möchten, führen Sie die folgenden Aktionen aus.
- Erstellen oder Kopieren Sie Ihr JSON-Objekt, aus dem Sie eine API erstellen möchten
- Ersetzen Sie den Wert in der Eigenschaft
exampleauf der Registerkarte Body der Anfrage Generate Spec - Ersetzen Sie den Wert in der Eigenschaft
resourceNamemit dem Namen, den Sie Ihrer API geben möchten - Klicken Sie auf die Sammlung und dann auf die Schaltfläche Run
- Ändern Sie keine der Werte auf dem Run-Bildschirm und klicken Sie auf die Schaltfläche Run API Quickstart
Das war’s! Die Sammlung wird ausgeführt, eine API-Spezifikation auf der Grundlage des JSON-Objekts, das Sie in der Eigenschaft example bereitgestellt haben, generiert und einen Mockserver daraus erstellen. Sie können dann auf die Registerkarte API in Postman klicken, um die generierte Spezifikation anzuzeigen und die URL des Mockservers zu erhalten. Die Server-URL befindet sich im Abschnitt servers der API-Spezifikation.
Beispielausführung
Verwenden wir das Beispiel eines Blogbeitrags von zuvor, um zu sehen, was tatsächlich passiert, wenn wir diese Sammlung ausführen.
Nachdem die Sammlung ausgeführt wurde, kann ich die API-Spezifikation sehen, die erstellt wurde, und den Mockserver-Endpunkt, um ihn zu testen. Wenn wir uns die gerenderte Version in Swaggers OAS-Editor ansehen, können wir deutlich sehen, dass dies eine vollständige API ist, die uns genau das gibt, was wir brauchen.
Von hier aus kann ein Front-End-Ingenieur die Mock-Endpunkt nehmen und mit der Entwicklung beginnen! Alles, was benötigt wurde, war ein JSON-Objekt!
Wohin geht es von hier aus
Dies war ein Proof of Concept, den ich erstellt habe, um die Machbarkeit der Verwendung von künstlicher Intelligenz zu testen, um Sie so schnell wie möglich auf den Weg zu bringen. Nun, da ich weiß, dass dies möglich ist, gibt es einige Dinge, die ich ändern würde, um es robuster, schneller und leistungsfähiger zu machen.
**Wechseln Sie von Claude instant zu GPT4-turbo
Ich wollte beweisen, dass Sie dies mit Amazon Bedrock tun können. Es ist zwar möglich, aber weniger als ideal. Ich habe zunächst Claude-v2 als AI-Modell verwendet, um die Spezifikation zu generieren, überschritt aber routinemäßig die Timeout-Grenze von 30 Sekunden bei API Gateway. Daher wechselte ich zu dem weniger leistungsfähigen, aber schnelleren Modell Claude-v1 instant. In einer idealen Welt würde ich das neue GPT4-turbo-Modell verwenden, um die Spezifikation zu erstellen, aber zum Zeitpunkt des Schreibens ist dieses Modell noch nicht ganz bereit für den produktiven Einsatz.
Generieren von SDKs
Nun, da ich eine solide Methode habe, um eine OpenAPI-Spezifikation zu erstellen und einen funktionierenden Mockserver zu erhalten, möchte ich einen Schritt weiter gehen und ein SDK generieren, um ihn aufzurufen. Viele Entwickler verwenden SDKs, um mit ihren Backend-Diensten zu kommunizieren, und Tools wie OpenAPI Generator ermöglichen es ihnen, dies zu tun, ohne sie manuell erstellen zu müssen. OpenAPI Generator nimmt eine API-Spezifikation und kompiliert sie in ein SDK in der von Ihnen gewählten Sprache, einschließlich für das Front-End geeigneter Sprachen wie typescript-fetch.
Webseite und asynchrone Workflow
Nicht jeder mag es, zwischen verschiedenen Tools hin und her zu springen (die meisten tun es nicht, wie sich herausstellt). Wenn ich dies zu einer „echten Sache“ machen würde, würde ich eine Webseite erstellen und den gesamten Generierungsprozess asynchron durchführen. Sie hätten eine Seite, auf der Sie Ihr Schema eingeben und eine E-Mail mit Ihrer API-Spezifikation und der URL des Mockservers erhalten, wenn sie fertig ist, oder einfach eine Benachrichtigung in der App und eine Neuaufladung des Bildschirms. Auf diese Weise können Sie alles von einem einzigen Ort aus steuern. Die Backend müsste sich auch etwas ändern. Ich würde wahrscheinlich immer noch dieselbe Sammlung verwenden, aber sie über Newman in einer Lambda-Funktion als Teil eines Step-Function-Workflows aufrufen.
Probieren Sie es aus
Ich hoffe, dass Sie dies hilfreich finden und es ausprobieren. Vielleicht nutzen Sie es, um zu einer API-First-Entwicklungsmethode zu wechseln. Vielleicht nutzen Sie es für die Front-End-Ermächtigung. Egal, wie Sie sich entscheiden, es zu verwenden, es ist ein Fortschritt.
Wir alle konzentrieren uns auf Zeitersparnis und Produktivitätssteigerung. Die Flut von generativen AI-Funktionen, -Mustern und -Paradigmen hat die Art und Weise, wie wir Software angehen, grundlegend verändert. Die Dinge werden schneller, so ist es nun einmal. Daher nutzen Sie dies als Möglichkeit, der Kurve voraus zu sein und Ihre API-Praktiken mit künstlicher Intelligenz voranzutreiben.
Eine Erinnerung – Sie können den Code für dieses Projekt an zwei Stellen finden: der Generator in GitHub und die Postman-Sammlung in meinem öffentlichen Arbeitsbereich. Wenn Sie Hilfe bei der Einrichtung benötigen, lassen Sie es mich wissen – ich bin immer bereit zu helfen!
Viel Spaß beim Coden!
