Echte WordPress-Workflows mithilfe der Kinsta-API vibe-coden

Der Schlüssel zum Wettbewerbsvorteil für moderne WordPress-Agenturen liegt nicht mehr darin, großartigen Code zu schreiben. Wachstumsorientierte Agenturen automatisieren sich wiederholende Aufgaben, senken die Betriebskosten und verkürzen die Markteinführungszeit und bieten ihren Kunden maßgeschneiderte Dienstleistungen an.

Die Integration von KI-Tools in Produktionsprozesse ist entscheidend für Agenturen, die ihre Arbeitsabläufe automatisieren wollen. In diesem Zusammenhang gewinnt „Vibe Coding“ – das neue KI-gesteuerte Entwicklungsparadigma – von Tag zu Tag an Bedeutung.

Vibe Coding ist jedoch kein einfacher Weg, Code zu schreiben. Zwar braucht man keine jahrelange Erfahrung, um vom Vibe-Coding-Ansatz zu profitieren, doch ein fundiertes Verständnis der Programmierung und der von dir verwendeten Sprachen ist entscheidend. Und das ist noch nicht alles. Neben traditionellen Programmierkenntnissen ist es mittlerweile unerlässlich, ein breiteres Spektrum an Fähigkeiten zu entwickeln. Zu wissen, wie man die leistungsstärksten KI-gestützten Tools einsetzt, gehört definitiv dazu.

Bist du bereit, die WordPress-Workflows deiner Agentur mit Vibe Coding zu optimieren? Dann lies weiter.

Vibe Coding für WordPress-Workflows

Falls du es noch nicht kennst: Vibe Coding ist eine Entwicklungsmethodik, die auf Effizienz und Ressourcenoptimierung ausgerichtet ist. Mit Vibe Coding hörst du auf, selbst Codezeilen zu schreiben, und bewegst dich auf eine höhere Abstraktionsebene: die Ebene der Absicht. Du als Entwickler definierst die Architektur, die Logik sowie die technischen und geschäftlichen Anforderungen eines Webprojekts und delegierst das eigentliche Codieren an den KI-Agenten.

Die Einführung des Vibe-Ansatzes zur Prozessautomatisierung bringt erhebliche Vorteile mit sich: verkürzte Markteinführungszeit, Demokratisierung der Automatisierung sowie Flexibilität und Anpassungsfähigkeit der Prozesse. Diese Vorteile führen zu mehr Effizienz und Skalierbarkeit. Dank Workflow-Automatisierung und der Einführung von Vibe Coding können WordPress-Agenturen leichter skalieren, da die Einbindung neuer Kunden weder die Arbeitslast noch die Gemeinkosten erhöht.

Bevor du dich jedoch zu früh freust, musst du dir bewusst sein, dass „Vibe Coding“ kein Allheilmittel ist, das auf magische Weise gut strukturierten, wartbaren Code liefert, der immer wie erwartet funktioniert. Die Einführung dieses neuen Paradigmas erfordert ein Verständnis dafür, wie KI-Agenten funktionieren, und muss nach Prinzipien und Best Practices gestaltet werden, die es zu einem zuverlässigen Ansatz für eine WordPress-Agentur machen.

In den nächsten Abschnitten werden wir uns eingehend mit der Erstellung eines Automatisierungs-Workflows für die Einbindung eines neuen WordPress-Projekts befassen und dabei einen praktischen Ansatz verfolgen, der auf einem realen Anwendungsfall basiert: Wir werden uns ansehen, wie man eine vorkonfigurierte WordPress-Website-Vorlage, die bei Kinsta gehostet wird, mithilfe von GitHub Copilot und der Kinsta-API klont.

Hoffentlich hilft dir dieser Artikel dabei, die Vorteile der Automatisierung zu verstehen und zu lernen, wie du Vibe Coding effektiv in den Entwicklungs-Workflow deiner Agentur integrieren kannst.

Dein Automatisierungstoolkit

Zunächst benötigst du eine auf Kinsta gehostete Blueprint-Website. Für dieses Beispiel haben wir eine neue Website erstellt und die Themes Astra, GeneratePress und Neve installiert. Außerdem haben wir Yoast SEO, Starter Templates und weitere Plugins zur Unterstützung des Astra-Themes installiert.

Um einen Klon deiner Website zu erstellen, musst du über die Kinsta-API auf deine Kinsta-Hosting-Umgebung zugreifen. Du benötigst einen Kinsta-API-Schlüssel, deine Unternehmens-ID und die ID der Umgebung, die du klonen möchtest.

Deine Unternehmens-ID findest du in der URL deines MyKinsta-Dashboards (im Parameter idCompany) sowie im Bereich Website-Informationen in MyKinsta, indem du zu Websites > Websitename > Info navigierst. Im selben Abschnitt findest du auch deine Umgebungs-ID.

Zu guter Letzt brauchst du eine IDE, in der du arbeiten kannst. Zu den vielen verfügbaren Optionen gehören weit verbreitete Entwicklungsumgebungen wie Visual Studio Code oder Cursor sowie AI-first-Entwicklungsumgebungen wie Lovable. Du könntest auch eine webbasierte Prototyping-Plattform wie Google AI Studio nutzen, die sich ideal eignet, um Prompts in einer isolierten Testumgebung zu testen, bevor du mit der eigentlichen Entwicklung beginnst.

Für diesen Artikel haben wir Google AI Studio zum Erstellen der Prompts und GitHub Copilot in Visual Studio Code zum Erstellen der Anwendung verwendet. Hier sind die Gründe, warum diese Konfiguration so gut funktioniert:

• Weit verbreitete Nutzung: GitHub Copilot ist unglaublich beliebt und bereits ein zentraler Bestandteil des Tech-Stacks vieler WordPress-Agenturen. Wenn du es für ein Projekt zur Workflow-Automatisierung nutzt, muss sich dein Team nicht erst mit neuen Entwicklungstools vertraut machen.
• Direkter Zugriff auf das Dateisystem: Copilot hat Zugriff auf das Dateisystem deines Projekts. Dadurch kann es die erforderlichen Dateien, einschließlich Konfigurationsdateien, direkt erstellen und Code basierend auf deinen Anforderungen schreiben.
• Agent-Anweisungen: Du kannst mithilfe einer Konfigurationsdatei unter .github/copilot-instructions.md globale Regeln auf Projektebene festlegen. Der Agent hält sich strikt an diese Systemanweisungen und stellt so sicher, dass jede Datei deinen Projektstandards entspricht.

Vor dem Hintergrund dieser Funktionen wollen wir nun erkunden, wie GitHub Copilot funktioniert.

Coding mit GitHub Copilot: Modi, Kontextfenster und Agent-Anweisungen

Um das volle Potenzial von GitHub Copilot auszuschöpfen, ist es entscheidend, seine Funktionsweise zu verstehen. In diesem Abschnitt lernst du die grundlegenden Konzepte von Copilot kennen.

Copilot-Modi

Es gibt drei verschiedene Modi, in denen du mit GitHub Copilot interagieren kannst; jeder bestimmt die Art der Unterhaltung, die du mit dem Chatbot führst.

Plan: Im Plan-Modus erstellt Copilot einen strukturierten Plan, der in einzelne Aufgaben unterteilt ist. Dieser wird dann zur Ausführung an den Agent-Modus übergeben (mehr dazu weiter unten). So bleibt der Agent stets auf die übergeordneten Projektziele fokussiert und kann den Fortschritt effektiv verfolgen.

Im Plan-Modus stellt Copilot einen detaillierten Fahrplan bereit, einschließlich der Schritte zur Umsetzung und Überprüfung. Nachdem du den Vorschlag geprüft hast, kannst du dein Feedback einreichen, um notwendige Anpassungen vorzunehmen. Wenn der Plan deinen Anforderungen entspricht, kannst du mit der Umsetzung fortfahren.

Der Plan-Modus bietet eine umfassende Auswahl an Tools, die unter Tools konfigurieren direkt im Chat-Fenster verfügbar sind.

Agent: Im Agent-Modus analysiert Copilot deine Anfrage, konsultiert ein KI-Modell zur Lösung der Aufgabe und macht sich an die Arbeit. Sobald die erste Iteration abgeschlossen ist, führt Copilot eine Überprüfung durch, um mögliche Fehler zu erkennen, und ermittelt, welche Korrekturen erforderlich sind – sei es durch Codeänderungen, Terminalbefehle oder Tool-Aufrufe.

Standardmäßig sind im Agent-Modus alle verfügbaren Tools vorausgewählt.

Weitere Informationen zu Agenten findest du in der offiziellen VS Code-Dokumentation.

Ask: Der Ask-Modus dient dazu, Fragen über das Chat-Fenster zu stellen. Dieser Modus wird für Hilfe und allgemeine Fragen zum Programmieren empfohlen.

Diese drei GitHub-Copilot-Modi folgen einer präzisen chronologischen und logischen Abfolge innerhalb des Entwicklungszyklus einer Anwendung.

Während der anfänglichen Projektarchitekturphase hilft dir der Plan-Modus dabei, die logischen Schritte deiner Roadmap zu skizzieren – dabei werden die zu erstellenden Dateien, die zu installierenden Abhängigkeiten und die zugrunde liegende Architektur ermittelt.

In der eigentlichen Programmierphase übernimmt der Agent-Modus die Dateierstellung und Codegenerierung. In dieser Phase arbeitet der Agent autonom. Deine Rolle wechselt zur des Supervisors – du gibst das nötige Feedback, um Blockaden zu beseitigen oder bestimmte Teile des Codes zu verfeinern.

Der Ask-Modus erweist sich in der Debugging-Phase erneut als nützlich. In diesem Modus hilft Copilot dir, Unklarheiten zu beseitigen, Ausnahmen zu behandeln und deinen Code zu dokumentieren.

Kontextfenster

Der Kontext umfasst alles, was das Modell bei der Verarbeitung einer Antwort sehen kann. Dazu gehören beispielsweise dein Chat-Verlauf, die Dateien in deinem lokalen oder Remote-Arbeitsbereich, System- und benutzerdefinierte Anweisungen, Tool-Ausgaben sowie alle Verweise, die du explizit zum Chat hinzufügst.

Die Qualität der Antworten hängt vom Kontext ab, daher ist es entscheidend, dem Modell die richtigen, relevanten Informationen zur Verfügung zu stellen.

Das Modell verfügt nicht über unbegrenzten Speicherplatz. Das Kontextfenster ist die maximale Datenmenge – gemessen in Tokens (Teile von Wörtern oder Code) –, die ein LLM während eines einzelnen Anfrage-Antwort-Zyklus gleichzeitig verarbeiten und „im Gedächtnis behalten“ kann. In VS Code kannst du sehen, wie viele Token in deinem Kontextfenster verfügbar sind, indem du auf das Symbol in der unteren rechten Ecke neben dem Chat-Fenster klickst.

Das Kontextfenster stellt das Kurzzeitgedächtnis des Modells dar. Wenn es überlastet ist, gibt der Agent möglicherweise falsche oder inkonsistente Daten zurück. Ein noch größeres Risiko ist die Context Pollution, das auftritt, wenn das Kontextfenster mit irrelevanten Informationen überfüllt wird. In beiden Fällen – sei es durch Überlastung oder durch „Context Pollution“ – kann Copilot Fehler erzeugen, „halluzinieren“ oder nicht optimierten Code produzieren.

Um zu vermeiden, dass du Stunden damit verbringst, um sauberen, fehlerfreien Code zu erhalten, ist es unerlässlich, strenge „Chat-Hygiene“ zu wahren. Das kannst du erreichen, indem du Tabs schließt, die du nicht unbedingt brauchst, explizite Dateiverweise verwendest, um den Kontext zu ergänzen, deinen Chat-Verlauf mit /compact komprimierst oder einfach ein brandneues Chat-Fenster öffnest, um mit einem sauberen Kontext von vorne zu beginnen.

Agent-Anweisungen

Agent-Anweisungen legen die Verhaltensregeln fest, die direkt beeinflussen, wie der Agent Code generiert und verschiedene Entwicklungsaufgaben bewältigt. So stellst du sicher, dass du Code erhältst, der deinen Unternehmensstandards entspricht, ausschließlich autorisierte Bibliotheken verwendet oder strategische Daten wie API-Schlüssel vollständig schützt.

Anstatt diese Anweisungen manuell in jede einzelne Eingabeaufforderung einzufügen, kannst du deine benutzerdefinierten Anweisungen in einer Markdown-Datei festlegen, um sicherzustellen, dass die Antworten stets mit deinen Geschäfts- und Projektanforderungen übereinstimmen. Wenn du mehrere Anweisungsdateien hast, kombiniert VS Code diese automatisch und fügt sie dem Chat-Kontext hinzu.

Durch die Bereitstellung präziser Anweisungen verwechselt Copilot keine Parameternamen in API-Anfragen und macht keine Fehler bei der Verarbeitung von Antworten eines externen Dienstes.

Aber mach dir keine allzu großen Sorgen, wenn dir das kompliziert erscheint. GitHub Copilot kann tatsächlich eine Anweisungsdatei für dich erstellen. Folge einfach den Schritten in der offiziellen Dokumentation.

Nachdem wir nun die Grundlagen behandelt haben, lernst du im nächsten Abschnitt, wie du mit GitHub Copilot in VS Code eine Anwendung zur Automatisierung von WordPress-Workflows auf Basis der Kinsta-API „Vibe-Coding“ entwickelst. Es ist Zeit, die Ärmel hochzukrempeln und loszulegen.

Vibe-Coding eines realen WordPress-Automatisierungs-Workflows

Genau wie beim herkömmlichen Programmieren umfasst das „Vibe-Coding“ eines fortgeschrittenen Projekts wie einer WordPress-Workflow-Automatisierung eine Abfolge logischer Phasen über den gesamten Softwareentwicklungszyklus hinweg.

Deshalb haben wir den Prozess des Vibe-Codings eines WordPress-Workflow-Automatisierungsprojekts in eine Reihe logischer Schritte unterteilt. Tauchen wir in jede Phase ein und finden wir heraus, was sich beim Vibe-Coding-Ansatz ändert:

Regeldefinition

In dieser Phase musst du die allgemeinen Richtlinien definieren, die die Rahmenbedingungen festlegen, innerhalb derer der Agent agieren wird. Dazu gehört das Erstellen von Kontextdateien, die den Tech-Stack, Sicherheitsrichtlinien und strukturierte Protokollierungsmuster festlegen.

Nachdem du in VS Code einen neuen Projektordner angelegt hast, ist dein erster Schritt, den Copilot-Chat zu öffnen und ein Gespräch mit dem Agenten zu beginnen, um den Projektentwurf festzulegen. In dieser Anfangsphase arbeitest du hauptsächlich im „Ask“-Modus, um die für dein Projekt am besten geeignete Sprache zu ermitteln und deine Anweisungen für den Agenten zu entwerfen.

Wähle die Sprache für das Projekt

Falls du dich noch nicht für einen Tech-Stack entschieden hast, sollte deine erste Frage darauf abzielen, die für dein Projekt am besten geeignete Sprache zu ermitteln. Für unseren Automatisierungs-Workflow haben wir Copilot gebeten, die Vor- und Nachteile von Node.js im Vergleich zu Python aufzulisten:

Copilot antwortete mit einer detaillierten Aufschlüsselung der Vor- und Nachteile beider Sprachen und empfahl letztendlich Node.js:

Anweisungen für den Agent entwerfen

Als Nächstes fragten wir Copilot, wie man benutzerdefinierte Anweisungen für den Agenten richtig strukturiert, um „Halluzinationen“ zu minimieren und Kontextverlust zu vermeiden:

Copilot empfahl, unsere Anweisungen für den Agenten auf mehrere Dateien aufzuteilen. Das würde eine „Kontextverschmutzung“ verhindern.

Nachdem wir die Empfehlung von Copilot komplett verstanden hatten, machten wir uns daran, die Architektur unserer Anweisungen für den Agenten zu planen.

Wir schalteten Copilot vom Ask-Modus in den Plan-Modus um und baten es, die Dateistruktur für unser modulares Anweisungssystem mit separaten .md-Dateien zu skizzieren:

Copilot begann, die Schritte zu skizzieren, lieferte klare Begründungen und stellte dabei eine Reihe von Fragen, um die Regeln an unsere Projektkonfiguration anzupassen.

Wir haben Copilot die folgenden Links übermittelt:

https://api-docs.kinsta.com/api-reference/wordpress-sites/get-list-of-company-sites
https://api-docs.kinsta.com/api-reference/wordpress-sites/get-site-by-id
https://api-docs.kinsta.com/api-reference/wordpress-sites/clone-existing-site

Copilot hat die Ausführungsphasen aufgeschlüsselt, die technischen Gründe für seine Entscheidungen erläutert und gefragt, ob wir bereit sind, die Änderungen anzuwenden.

Durch die Genehmigung des vorgeschlagenen Plans wechselt Copilot automatisch vom Modus „Plan“ in den Modus „Agent“. Der KI-Agent arbeitet dann direkt in deinem lokalen Dateisystem, um deine Agent-Anweisungsdateien zu erstellen.

Das Bild unten zeigt eine Vorschau der Datei copilot-instructions.md:

Iterative Entwicklung

Dies ist die Phase der Code-Erstellung. Der KI-Agent generiert die Projektdateien und Skripte, während der Entwickler als Architekt und Leiter des Prozesses fungiert. Mit anderen Worten: In dieser Phase wirst du Copilot bitten, die Anwendungsstruktur und den Code zu erstellen, die erforderlichen Eingaben und Rückmeldungen zu liefern, die verfügbaren Optionen zu bewerten und strategische Entscheidungen zu treffen.

Der nächste Schritt in unserem Projekt zur Automatisierung des WordPress-Workflows besteht darin, das Node.js-Projekt zu initialisieren und die Dateistruktur zu definieren. Wir sind zurück in den Plan-Modus gewechselt und haben Copilot gebeten, die nächsten Schritte zu planen:

Copilot erstellte einen detaillierten Plan sowie zusätzliche Informationen zu relevanten Dateien, durchzuführenden Prüfungen und zu treffenden Entscheidungen. Nachdem wir die Antwort sorgfältig geprüft hatten, begannen wir mit der Umsetzung.

Wenn dir das nach viel Arbeit klingt, mach dir keine allzu großen Sorgen. Du wirst Copilot bitten, alle notwendigen Schritte für dich durchzuführen.

Während der Erstellung der Dateien wird Copilot dich wahrscheinlich um dein Feedback zu Punkten bitten, die geklärt werden müssen, oder um deine Zustimmung, bevor bestimmte Vorgänge fortgesetzt werden. Überprüfe die Anfragen und gehe entsprechend vor.

Sobald ein Vorgang abgeschlossen ist, teilt dir Copilot mit, was als Nächstes zu tun ist:

Die Unterhaltung geht mit Fragen und Antworten weiter, bis Copilot alle Dateien und den Code für deine Anwendung erstellt hat. In der folgenden Eingabeaufforderung haben wir Copilot im Plan-Modus gebeten, eine Vorlage für die Datei .env zu erstellen und die entsprechenden Sicherheitsprüfungen (Fail-Fast) einzurichten.

Das folgende Bild zeigt die von Copilot generierte Datei .env.example:

Anschließend haben wir darum gebeten, eine index.js-Datei zu erstellen, die die gesamte Logik der Anwendung enthält. Bei einer komplexeren Anwendung wäre es besser gewesen, das Skript auf mehrere Dateien aufzuteilen; für diese Anwendung haben wir es jedoch vorgezogen, die gesamte Logik in einem einzigen Skript zu belassen.

Zeit, unser Skript auszuführen. Bevor wir mit dem Klonen der Website begannen, haben wir eine .env-Datei basierend auf .env.example erstellt und die Platzhalter durch die tatsächlichen Werte für KINSTA_API_KEY, KINSTA_COMPANY_ID und SOURCE_ENVIRONMENT_ID ersetzt.

Sobald du mit dem Skript und den Umgebungsvariablen fertig bist, öffne das VS Code-Terminal und gib npm start ein.

Wenn alles wie erwartet funktioniert, erscheint in MyKinsta eine neue Website mit einem generischen Namen. Falls die Eingabeaufforderung eine Fehlermeldung ausgibt, kopiere den Fehler einfach aus dem Terminal und füge ihn in den Copilot-Chat ein, damit der Mitarbeiter ihn auswerten, die Ursache ermitteln und geeignete Lösungen vorschlagen kann. Möglicherweise wird er dich um weiteres Feedback bitten.

An dieser Stelle möchtest du vielleicht Verbesserungen oder neue Funktionen zu deiner Anwendung hinzufügen. In unserem Anwendungsfall war der vom Skript generierte generische Name der Website nicht ideal. Also sind wir zur zweiten Iteration übergegangen.

Feinabstimmung deiner Anwendung

Nachdem wir unseren ersten Meilenstein erreicht hatten – das automatische Klonen einer auf Kinsta gehosteten WordPress-Website –, haben wir Copilot gebeten, eine Funktion hinzuzufügen, mit der Nutzer bei der Ausführung einen benutzerdefinierten Seitennamen angeben können.

Der Endpunkt /sites/clone der Kinsta-API erfordert drei Parameter: company, source_env_id und display_name. Während die ersten beiden Parameter als Umgebungsvariablen in unserer Datei .env festgelegt sind, wird der Parameter display_name automatisch vom Skript generiert.

Hätten wir den Nutzern der Anwendung eine Fallback-Umgebungsvariable zur Verfügung gestellt, hätten sie mehr Flexibilität gehabt, während sie weiterhin die Möglichkeit gehabt hätten, einen zusätzlichen Parameter direkt über den Befehl npm run zu übergeben.

Wir haben diese Anfrage an Copilot weitergeleitet. Der Agent hat die erforderlichen Änderungen umgesetzt, indem er sowohl index.js als auch .env angepasst hat, und folgende Antwort geliefert:

Schließlich haben wir unsere Anwendung unter verschiedenen Bedingungen gemäß den Anweisungen von Copilot einem Praxistest unterzogen:

• Wir haben npm run ohne Parameter ausgeführt.
• Wir haben einen Standardwert für die Konstante SITE_NAME in der Datei .env festgelegt und npm run erneut ausgeführt.
• Wir haben den Parameter SITE_NAME=your-site-name manuell an den Befehl npm run angehängt.
• Wir haben das Skript sowohl mit der Syntax npm start -- --site-name your-site-name als auch mit der Syntax npm start -- --site-name=your-site-name ausgeführt.

Angetrieben von diesem Zyklus der kontinuierlichen Verbesserung haben wir außerdem eine Funktion integriert, die manuelle Eingaben in einen lesbaren Anzeigenamen normalisiert, während Werte im Slug-Stil wie my-awesome-wordpress-website weiterhin nahtlos akzeptiert werden.

Daher werden beide der folgenden Befehle unterstützt:

npm start -- --site-name="My Awesome WordPress Website"
npm start -- --site-name=my-awesome-wordpress-website

Wenn du es bis hierher geschafft hast, herzlichen Glückwunsch – du hast gerade deine allererste Anwendung zur Workflow-Automatisierung mit Vibe-Code programmiert. Überprüfe nun die Plugins, Themes und die Frontend-Darstellung. Wenn dir weitere Funktionen einfallen, mit denen du dein Skript verbessern kannst, arbeite einfach nach dem oben beschriebenen iterativen Ansatz weiter.

Schnelle Sicherheitsprüfungen

Bei einer kritischen Anwendung, die sensible Daten wie deine API-Schlüssel verwendet, ist es unerlässlich, dass das Skript an wichtigen Punkten der Ausführung strenge Prüfungen durchführt und im Falle eines Fehlers klare Meldungen zur Art des Fehlers ausgibt sowie die Ausführung sofort abbricht (siehe die Eingabeaufforderung oben).

GitHub Copilot hat „Fail-Fast“ auf drei kritischen Ebenen implementiert:

Umgebungsvalidierung: Auf dieser Ebene überprüft das Skript, ob die Umgebungsvariablen vorhanden sind, bevor API-Aufrufe getätigt oder Aufgaben ausgeführt werden. Das folgende Bild zeigt Copilots Erklärung dieser Prüfung im Chat:

Natürlich kann dein Code anders aussehen als im Bild gezeigt, aber hier kommt es auf den Ansatz an.

API-Antwortvalidierung: Unmittelbar nach Beginn des Klonvorgangs überprüft das Skript sofort, ob eine Operations-ID vorhanden ist. Erhält das Skript eine ungültige ID, bricht es die Ausführung sofort ab und vermeidet so, eine halbe Stunde lang nach ihr abzufragen. Nachfolgend findest du die Erklärung von Copilot:

Graceful Error Propagation: Jeder Fehler an irgendeiner Stelle in der Kette (Validierung, API, Abfrage) wird nach oben weitergeleitet, in den Logs protokolliert und stoppt die Ausführung des Skripts sauber.

Der „Fail-Fast“-Ansatz bringt mehrere Vorteile mit sich, darunter:

• Keine verschwendeten API-Aufrufe
• Klare Fehlermeldungen
• Du weißt sofort, was nicht stimmt

Für WordPress-Agenturen, die eine solche Anwendung möglicherweise skalieren und Dutzende von Websites im Massenverfahren klonen müssen, ermöglicht dieser Ansatz die sofortige Erkennung von Skriptfehlern auf jeder Ebene und verhindert so, dass diese zu einer Kettenreaktion mit mehreren fehlgeschlagenen Vorgängen führen.

Wenn deine Anwendung jedoch skalierbar sein soll, solltest du ein System für Unit-Tests implementieren.

Unit-Tests mit Jest

Während der Entwicklungsphase führte Copilot autonom mehrere lokale Tests durch, darunter:

• npm run check — nach jeder Bearbeitung, um Syntaxfehler zu erkennen.
• npm start — werden mehrfach ausgeführt, um API-Antworten zu beobachten und Fehler zu identifizieren.
• npm start 2>&1 | head -30 — in Echtzeit, um strukturierte Protokollausgaben zu erfassen und auszulesen.

Diese Tests halfen Copilot zwar dabei, eine ganze Reihe von Fehlern zu finden, sind aber ziemlich einfach und funktionieren eigentlich nur bei einer einfachen Anwendung. Außerdem haben sie einen großen Nachteil: Jedes Mal, wenn du npm start ausführst, löst du einen Website-Klon aus. Das kann schnell an die Kapazitätsgrenze deines Tarifs stoßen, wie du auf dem Bild unten sehen kannst:

Darüber hinaus können diese Tests nicht in einer CI/CD-Pipeline ausgeführt werden, ohne deine Anmeldedaten preiszugeben.

Um deine Anwendung wirklich skalieren zu können, ist es unerlässlich, ein robustes Framework für Unit-Tests wie Jest einzusetzen.

Anstatt die Server von Kinsta jedes Mal mit echten Anfragen zu belasten, ermöglicht Jest dir, API-Antworten abzufangen und zu simulieren (Mocking). So kannst du das Verhalten deiner Software völlig isoliert testen.

Da die API-Aufrufe simuliert werden, kannst du mit Jest außerdem deine gesamte Testsuite in Automatisierungspipelines wie GitHub Actions ausführen, ohne deine Produktions-Anmeldedaten preisgeben zu müssen.

Um Jest in deinem Automatisierungsprojekt zum Laufen zu bringen, kannst du Copilot um eine Schritt-für-Schritt-Anleitung bitten oder es die Arbeit für dich erledigen lassen.

Sobald Jest konfiguriert ist, kannst du alle deine Tests auf einmal mit npm test ausführen. Du kannst auch eine bestimmte Datei auswählen oder Tests im Watch-Modus ausführen:

Erwähnenswert ist auch, dass Copilot über integrierte Chat-Befehle verfügt, die dir beim Unit-Testing mit Jest helfen:

• /tests Erzeugt eine Testdatei für die aktuell geöffnete Datei. Wenn du /tests in den Chat eingibst, generiert Copilot Jest-Tests für die Funktionen, die es in dieser Datei findet.
• @workspace /tests macht dasselbe wie der vorherige Befehl, jedoch im gesamten Projektkontext.

Während du im Ask-Modus mit Copilot chattest, erhältst du Empfehlungen und Tipps, die dich durch deine Unit-Tests führen:

Öffne einen neuen Chat für diesen Test und stelle sicher, dass er auf Agent-Modus eingestellt ist. Füge dann den zuvor von Copilot bereitgestellten Befehl direkt in den Chat ein:

@workspace /tests for pollUntilComplete and KinstaClient using fetch mocks

Drücke die Eingabetaste, und du siehst, wie Copilots Begründung und die Schritt-für-Schritt-Anweisungen im Chat angezeigt werden. Es wird dich jedes Mal, wenn ein Test ausgeführt wird, bitten, die Befehlsausführung zu bestätigen – so lange, bis jeder einzelne Fehler behoben ist.

Dokumentation und Bereitstellung

Gut dokumentierter Code ist entscheidend für die Wartbarkeit der Codebasis. Deshalb haben wir Copilot gebeten, eine README.md-Datei im Projektstammverzeichnis zu erstellen. Wir haben es gebeten, die Anwendung zu beschreiben, die Anforderungen zu spezifizieren, die Konfiguration der .env-Datei zu erklären, die verschiedenen Möglichkeiten zum Starten der Anwendung aufzulisten und zu zeigen, wie die Tests ausgeführt werden.

Wir haben einen neuen Chat im Ask-Modus gestartet, die Dateien index.js und package.json zum Kontext hinzugefügt (siehe Copilots Shortcut #filename) und Copilot die folgende Eingabe übermittelt:

Copilot hat eine Vorschau der Datei README.md bereitgestellt. Wir haben sie sorgfältig geprüft und sind dann in den Agent-Modus gewechselt, um die Datei zu erstellen.

Der nächste Schritt war die Dokumentation des Codes selbst. Mit der geöffneten Datei index.js haben wir den gesamten Code markiert, um ihn dem Chat-Kontext hinzuzufügen, und im Ask-Modus folgende Eingabe gesendet:

Copilot hat die Datei index.js mit Inline-Dokumentation aktualisiert, ohne den Code zu verändern.

Da wir uns im Ask-Modus befanden, hatte Copilot erneut keine Berechtigung, unsere Dateien zu ändern. Also sind wir in den Agent-Modus gewechselt und haben Copilot gebeten, die Datei index.js mit den vorgeschlagenen Änderungen zu aktualisieren.

Der letzte Schritt ist die Bereitstellung der Anwendung. Hier gibt es zwei Hauptoptionen:

• Behalte die Anwendung auf einem lokalen Rechner. Diese Lösung ist ideal, wenn du die Erstellung der Website manuell auslösen möchtest, zum Beispiel direkt nachdem ein neuer Kunde einen Vertrag unterzeichnet hat.
• Das Skript in eine CI/CD-Pipeline integrieren, indem du den Code in ein GitHub-Repository hochlädst. Die Website-Erstellung kann dann manuell oder automatisch als Reaktion auf ein bestimmtes Ereignis ausgelöst werden. Diese Lösung ist perfekt, wenn du mit strukturierteren und skalierbareren Workflows arbeitest.

Wenn du dich für die Einrichtung auf einem lokalen Rechner oder einem Utility-Server entscheidest, bist du fertig. Wenn du den Weg über eine strukturiertere CI/CD-Pipeline wählst, kann dir Copilot dabei helfen, die perfekte Eingabeaufforderung zu schreiben.

Unsere Anwendung ist fertig. Jetzt ist das Einrichten eines neuen WordPress-Projekts so einfach wie das Ausführen des folgenden Befehls:

npm start -- --site-name="My Awesome WordPress Website"

Vibe Coding und Automatisierung: Die Zukunft zukunftsorientierter WordPress-Agenturen

Vibe Coding ist nicht nur ein simpler Ansatz zum Schreiben von Code. Vielmehr handelt es sich um eine neue Entwicklungsmethodik, die die Rolle des Entwicklers völlig neu definiert – er ist nicht mehr nur ein Programmierer im herkömmlichen Sinne, sondern der Leiter eines iterativen Prozesses, der Erkundung, Planung, Programmierung, Verbesserung, Testen, Debugging, Dokumentation und Bereitstellung umfasst.

Wenn dies die Zukunft der Softwareentwicklung und der Skalierbarkeit von Agenturen ist, dann ist die Partnerschaft mit einer zukunftsorientierten Hosting-Plattform entscheidend, um im Zeitalter der KI wettbewerbsfähig zu bleiben. Indem du die Leistungsfähigkeit der Kinsta-API nutzt und KI-Agenten mit klaren Regeln, strengen Tests und solider Dokumentation steuerst, wird deine Agentur nicht mehr ständig nur Brände löschen müssen, sondern effizienter, vorhersehbarer und skalierbarer arbeiten.

Bist du bereit, deine WordPress-Workflows weiterzuentwickeln und deine Entwicklungszeiten drastisch zu verkürzen? Schau dir unsere Tarife an oder wende dich an unser Vertriebsteam und fang noch heute damit an, deine Automatisierungspipeline aufzubauen.