WordPress ist ein beliebtes Content Management System, das Millionen von Websites im Internet betreibt. Es bietet eine benutzerfreundliche Oberfläche und eine breite Palette an Anpassungsmöglichkeiten.
Die Erstellung von WordPress-Websites kann zeitaufwändig sein, vor allem, wenn sich wiederholende Aufgaben manuell ausgeführt werden. Kinsta hat diesen Prozess mit dem MyKinsta-Dashboard vereinfacht und beschleunigt, und stellt auch eine temporäre Domain zum sofortigen Testen bereit. Außerdem bedeutet die Einführung der Kinsta-API, dass Entwickler/innen den Arbeitsablauf bei der Website-Erstellung verbessern und benutzerdefinierte Schnittstellen entwickeln können, um spezielle Anforderungen zu erfüllen.
In diesem Lernprogramm lernen wir, wie wir die Kinsta-API für die Erstellung von WordPress-Websites nutzen können. Und wir nutzen die React JavaScript-Bibliothek, um zu zeigen, wie man eine Anwendung erstellt, die WordPress-Seiten ohne MyKinsta erstellt.
Hier ist eine Live-Demo der Site-Builder-Anwendung.
Die Kinsta-API verstehen
Die Kinsta-API ist ein leistungsstarkes Tool, mit dem du programmatisch mit der Managed WordPress Hosting-Plattform von Kinsta interagieren kannst. Sie kann dir helfen, verschiedene Aufgaben im Zusammenhang mit den von Kinsta angebotenen Diensten zu automatisieren, z. B. das Erstellen von Websites, das Abrufen von Website-Informationen, das Abrufen des Status einer Website und vieles mehr.
Diese API vereinfacht die Einrichtung von WordPress-Sites und ist damit ein unschätzbares Werkzeug für Entwickler. Um die API von Kinsta nutzen zu können, musst du ein Konto mit mindestens einer WordPress-Site, -Anwendung oder -Datenbank in MyKinsta haben. Außerdem musst du einen API-Schlüssel erstellen, um dich zu authentifizieren und über die API auf dein Konto zuzugreifen.
So generierst du einen API-Schlüssel:
- Gehe zu deinem MyKinsta-Dashboard.
- Navigiere zur Seite mit den API-Schlüsseln (Dein Name > Unternehmenseinstellungen > API-Schlüssel).
- Klicke auf API-Schlüssel erstellen.
- Wähle ein Ablaufdatum oder lege ein benutzerdefiniertes Startdatum und die Anzahl der Stunden fest, nach denen der Schlüssel abläuft.
- Gib dem Schlüssel einen eindeutigen Namen.
- Klicke auf Erzeugen.
Nachdem du einen API-Schlüssel erstellt hast, kopiere ihn und speichere ihn an einem sicheren Ort (wir empfehlen die Verwendung eines Passwortmanagers), da er nur dann innerhalb von MyKinsta sichtbar ist. Du kannst mehrere API-Schlüssel erstellen – sie sind auf der Seite API-Schlüssel aufgeführt. Wenn du einen API-Schlüssel widerrufen musst, klicke auf Widerruf neben dem Schlüssel, den du widerrufen möchtest.
Erstellen einer WordPress-Site mit der Kinsta-API
Jetzt, wo du deinen API-Schlüssel hast, kannst du eine WordPress-Site mit der Kinsta-API erstellen. Dazu verwendest du den /sites endpunkt, der einen Payload mit den folgenden Daten erwartet:
- company: Dieser Parameter erwartet eine eindeutige Unternehmens-ID, die du in den Einstellungen von MyKinsta finden kannst. Sie hilft dabei, das Unternehmen zu identifizieren, das mit der WordPress-Website verbunden ist.
- display_name: Der Anzeigename, der mit dem Namen der Website auf MyKinsta identisch ist, hilft dir, deine Website zu identifizieren. Wird nur in MyKinsta verwendet. Er wird für die temporäre Domain deiner WordPress-Site und deines WordPress-Admin verwendet (für die Kinsta-API lautet er display_name.kinsta.cloud und display_name.kinsta.cloud/wp-admin).
- region: Mit diesem Parameter kannst du unter 37 den Standort des Rechenzentrums für deine Website auswählen. Wenn du eine Region auswählst, die deiner Zielgruppe am nächsten liegt, kannst du die Leistung und Geschwindigkeit deiner Website verbessern (siehe die Liste der verfügbaren Regionen).
- install_mode: Dieser Parameter bestimmt die Art der WordPress-Installation. Der Standardwert ist „plain“, mit dem eine normale WordPress-Website eingerichtet wird. Andere Optionen sind „new“ für eine Neuinstallation und weitere Modi je nach den spezifischen Anforderungen.
- is_subdomain_multisite: Dieser boolesche Parameter (true/false) gibt an, ob die WordPress-Website als Multisite mit Subdomains konfiguriert werden soll.
- admin_email: Dieser Parameter erwartet die E-Mail-Adresse des WordPress-Administrators. Sie wird für administrative Zwecke und den Empfang wichtiger Benachrichtigungen verwendet.
- admin_password: Mit diesem Parameter legst du das Passwort für das WordPress-Admin-Benutzerkonto fest. Wähle ein sicheres Passwort, um deine Seite zu schützen.
- admin_user: Mit diesem Parameter wird der Benutzername für das WordPress-Admin-Benutzerkonto festgelegt. Er wird verwendet, um sich im WordPress-Dashboard anzumelden und die Website zu verwalten.
- is_multisite: Ähnlich wie bei
is_subdomain_multisitelegt dieser boolesche Parameter fest, ob die WordPress-Site als Multisite konfiguriert werden soll. - site_title: Dieser Parameter steht für den Titel deiner WordPress-Site. Er erscheint oben auf jeder Seite der Website. Du kannst ihn später jederzeit ändern.
- woocommerce: Dieser boolesche Parameter gibt an, ob du das WooCommerce-Plugin während der Erstellung der WordPress-Site installieren möchtest.
- wordpressseo: Dieser Parameter steuert die Installation des Yoast SEO-Plugins während der Website-Erstellung.
- wp_language: Dieser Parameter erwartet einen String-Wert, der die Sprache/Locale deiner WordPress-Website angibt (hier kannst du dein WordPress-Locale herausfinden).
Jetzt, wo du jeden Parameter verstehst. Hier ist ein Beispiel dafür, wie der Payload aussieht, den du an die Kinsta-API sendest:
{
"company": "54fb80af-576c-4fdc-ba4f-b596c83f15a1",
"display_name": "First site",
"region": "us-central1",
"install_mode": "new",
"is_subdomain_multisite": false,
"admin_email": "[email protected]",
"admin_password": "vJnFnN-~v)PxF[6k",
"admin_user": "admin",
"is_multisite": false,
"site_title": "My First Site",
"woocommerce": false,
"wordpressseo": false,
"wp_language": "en_US"
}Mit deinem bevorzugten Modus kannst du eine POST-Anfrage an die Kinsta-API senden; du musst nur deinen API-Schlüssel festlegen, um eine WordPress-Site zu erstellen. Für dieses Beispiel verwenden wir die JavaScript Fetch API:
const createWPSite = async () => {
const resp = await fetch(
`https://api.kinsta.com/v2/sites`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: 'Bearer <YOUR_KEY_HERE>'
},
body: JSON.stringify({
company: '54fb80af-576c-4fdc-ba4f-b596c83f15a1',
display_name: 'First site',
region: 'us-central1',
install_mode: 'new',
is_subdomain_multisite: false,
admin_email: '[email protected]',
admin_password: 'vJnFnN-~v)PxF[6k',
admin_user: 'admin',
is_multisite: false,
site_title: 'My First Site',
woocommerce: false,
wordpressseo: false,
wp_language: 'en_US'
})
}
);
const data = await resp.json();
console.log(data);
}Der obige Code verwendet die JavaScript Fetch API, um eine POST-Anfrage an die Kinsta-API zu senden und eine WordPress-Site zu erstellen. Die Funktion createWPSite wickelt diesen Vorgang ab. Innerhalb der Funktion wird eine Fetch-Anfrage an die Kinsta-API gestellt, die /sites endpoint with the necessary data.
Die Antwort wird mit resp.json() als JSON geparst und das Ergebnis wird in der Konsole protokolliert. Ersetze <YOUR_KEY_HERE> durch deinen API-Schlüssel, passe die Payload-Werte an und rufe createWPSite() auf, um eine WordPress-Site mit der Kinsta-API zu erstellen.
So sieht die Antwort aus:
{
"operation_id": "sites:add-54fb80af-576c-4fdc-ba4f-b596c83f15a1",
"message": "Adding site in progress",
"status": 202
}Überwachung der Vorgänge mit der Kinsta-API
Sobald du eine Website mit der Kinsta-API erstellt hast, ist es wichtig, den Fortschritt des Vorgangs zu verfolgen. Dies kann programmatisch geschehen, ohne dass du MyKinsta mit dem Kinsta-API /operations endpunkt überprüfen musst.
Um Vorgänge zu überwachen, verwende die operation_id, die du erhältst, wenn du einen Vorgang wie das Erstellen einer WordPress-Site initiierst. Übergib die operation_id als Parameter an den /operations Endpunkt.
const operationId = 'YOUR_operation_id_PARAMETER';
const resp = await fetch(
`https://api.kinsta.com/v2/operations/${operationId}`,
{
method: 'GET',
headers: {
Authorization: 'Bearer <YOUR_TOKEN_HERE>'
}
}
);
const data = await resp.json();
console.log(data);Der obige Code ruft Informationen über einen Vorgang ab, indem er eine GET-Anfrage an den Endpunkt /operations mit dem entsprechenden operation_id sendet. Die Anfrage enthält den API-Schlüssel für die Authentifizierung.
Wenn die Antwortdaten von der API empfangen werden, werden sie in der Konsole protokolliert. Die Antwort liefert wertvolle Informationen über den Status und den Fortschritt des Vorgangs. Wenn zum Beispiel die Erstellung der WordPress-Website noch nicht abgeschlossen ist, sieht die Antwort wie folgt aus:
{
"status": 202,
"message": "Operation in progress",
"data": null
}Ähnlich sieht die Antwort aus, wenn der Vorgang erfolgreich abgeschlossen ist:
{
"message": "Successfully finished request",
"status": 200,
"data": null
}An dieser Stelle kannst du eine WordPress-Website programmatisch erstellen und ihren Betrieb mit der Kinsta-API überprüfen. Um diese Funktionalität zu verbessern, gehen wir noch einen Schritt weiter und entwickeln eine angepasste Benutzeroberfläche (UI), die diese Vorgänge verarbeiten kann. Auf diese Weise können auch Personen ohne technisches Fachwissen die Möglichkeiten der API nutzen.
Erstellen einer React-Anwendung zur Erstellung einer WordPress-Website mit der Kinsta-API
Richte zunächst eine React-Projektstruktur ein und installiere die notwendigen Abhängigkeiten. Integriere die Kinsta-API in deine React-Anwendung mit der Fetch-API oder anderen HTTP-Request-Bibliotheken, wie z. B. Axios.
Voraussetzung
Um an diesem Projekt mitzuarbeiten, solltest du ein grundlegendes Verständnis von HTML, CSS und JavaScript und eine gewisse Vertrautheit mit React haben. Der Schwerpunkt dieses Projekts liegt darauf, die Nutzung der Kinsta-API zu demonstrieren. Daher wird in diesem Artikel nicht näher auf die Gestaltung der Benutzeroberfläche eingegangen.
Erste Schritte
Um den Prozess der Projekteinrichtung zu vereinfachen, haben wir ein Starterprojekt für dich vorbereitet. Befolge diese Schritte, um loszulegen:
1. Erstelle ein Git-Repository mit dieser Vorlage auf GitHub. Wähle Diese Vorlage verwenden > Neues Repository erstellen, um den Startcode in ein neues Repository in deinem GitHub-Konto zu kopieren, und achte darauf, dass du alle Zweige einschließt.
2. Ziehe das Repository auf deinen lokalen Computer und wechsle zu dem starter-files-Zweig mit dem folgenden Befehl:
git checkout starter-files3. Installiere die notwendigen Abhängigkeiten, indem du den Befehl npm install ausführst. Sobald die Installation abgeschlossen ist, kannst du das Projekt auf deinem lokalen Computer mit npm run start starten. Dies öffnet das Projekt unter http://localhost:3000/.
Die Projektdateien verstehen
Im src-Ordner dieses Projekts gibt es zwei Hauptunterordner: components und pages. Der Ordner components enthält wiederverwendbare Komponenten, wie z. B. die Kopf- und Fußzeile, die sowohl auf der Startseite als auch auf der Detailseite verwendet werden.
In diesem Projekt geht es in erster Linie darum, die Logik der Home- und Detailseiten zu implementieren, da das Styling und das Routing bereits fertig sind.
Auf der Startseite gibt es ein Formular, das verschiedene Datenfelder erfasst, die an die Kinsta-API weitergeleitet werden. Die Antwort dieser Seite wird im localStorage gespeichert (du kannst alternative Methoden für die Speicherung der Vorgangs-ID ausprobieren, die für die Überprüfung des Vorgangsstatus wichtig ist).
Auf der Detailseite wird die Vorgangs-ID von loaclStoage abgerufen und als Parameter an den /operation Endpunkt der Kinsta API übergeben, um den Status des Vorgangs zu überprüfen. In diesem Projekt fügen wir eine Schaltfläche ein, mit der die Benutzer den Status in regelmäßigen Abständen überprüfen können (du kannst die Methode setInterval verwenden, um diesen Prozess zu automatisieren).
Interaktion mit der Kinsta-API in React
Nachdem du die Benutzeroberfläche (UI) erstellt hast, musst du als Nächstes das Formular auf der Startseite bearbeiten und eine POST-Anfrage an den Endpunkt /sites der Kinsta-API senden. Diese Anfrage enthält die gesammelten Formulardaten als Nutzdaten und ermöglicht es uns, eine WordPress-Seite zu erstellen.
Um mit der Kinsta-API zu interagieren, brauchst du deine Unternehmens-ID und deinen API-Schlüssel. Sobald du diese Zugangsdaten hast, speicherst du sie am besten sicher als Umgebungsvariablen in deiner React-Anwendung.
Um die Umgebungsvariablen einzurichten, erstellst du eine .env-Datei im Stammverzeichnis deines Projekts. Füge in diese Datei die folgenden Zeilen ein:
REACT_APP_KINSTA_COMPANY_ID = 'YOUR_COMPANY_ID'
REACT_APP_KINSTA_API_KEY = 'YOUR_API_KEY'Um innerhalb deines Projekts auf diese Umgebungsvariablen zuzugreifen, kannst du die Syntax process.env.THE_VARIABLE verwenden. Um zum Beispiel auf die REACT_APP_KINSTA_COMPANY_ID zuzugreifen, verwendest du process.env.REACT_APP_KINSTA_COMPANY_ID.
Abrufen von Formulardaten in React
In der Datei Home.jsx gibt es ein Formular. Du musst dem Formular eine Logik hinzufügen, um Daten abzurufen und sie zu validieren, wenn sie übermittelt werden. Um die Formulardaten in deiner React-Anwendung abzurufen, verwendest du den Ansatz der kontrollierten Komponenten von React zusammen mit dem useState hook. Mit diesem Ansatz kannst du für jedes Formularfeld einen Status erstellen und ihn aktualisieren, wenn der Nutzer Daten eingibt.
Importiere zunächst den useState Hook am Anfang deiner Datei:
import React, { useState } from 'react';Als Nächstes richtest du eine Statusvariable für jedes Formularfeld innerhalb deiner funktionalen Komponente ein. Wenn du zum Beispiel ein Eingabefeld für den „Titel der Website“ hast, kannst du eine Zustandsvariable namens siteTitle erstellen:
const [siteTitle, setSiteTitle] = useState('');Hier ist siteTitle die Statusvariable, die den Wert des Eingabefeldes „Titel der Website“ enthält, und setSiteTitle ist die entsprechende Aktualisierungsfunktion.
Um die Formularfelder an ihre jeweiligen Statuswerte zu binden, füge die Attribute value und onChange zu jedem Eingabeelement hinzu. Zum Beispiel das Eingabefeld „Titel der Website“:
<input
type="text"
className="form-control"
value={siteTitle}
onChange={(event) => setSiteTitle(event.target.value)}
/>In diesem Beispiel wird das Attribut value auf die Zustandsvariable siteTitle gesetzt, um sicherzustellen, dass das Eingabefeld den aktuellen Wert siteTitle anzeigt. Der Event-Handler onChange wird auf die Funktion setSiteTitle gesetzt, die den Zustand siteTitle mit dem neuen Wert aktualisiert, sobald der Benutzer das Eingabefeld eingibt.
Wenn du diesen Ansatz für jedes Formularfeld anwendest, kannst du die notwendigen Statusvariablen erstellen und sie aktualisieren, wenn der Benutzer mit dem Formular interagiert. So kannst du ganz einfach auf die eingegebenen Werte zugreifen, wenn das Formular abgeschickt wird, und weitere Aktionen oder Validierungen mit den Formulardaten durchführen.
Wenn du dies für alle Formularfelder tust, sieht deine Home.jsx-Datei wie folgt aus:
import Header from '../components/Header';
import Footer from '../components/Footer';
const Home = () => {
return (
<div className="app-container">
<Header />
<div className="container">
<div className="container-title">
<h1> className="title">Site Builder with Kinsta API</h1>
<p> className="description">
This is a React app that uses the Kinsta API to create WordPress sites, without needing to access MyKinsta dashboard.
</p>
</div>
<form>
<div className="form-container">
<div className="input-div">
<label>Display name</label>
<span>Helps you identify your site. Only used in MyKinsta and temporary domain</span>
<input type="text" className="form-control" />
<span> className='error-message'>Ensure this has more than 4 characters</span>
</div>
<div className="input-div">
<label> WordPress site title</label>
<span>Appears across the top of every page of the site. You can always change it later.</span>
<input type="text" className="form-control" />
<span> className='error-message'>Ensure this has more than 4 characters</span>
</div>
<div className="input-flex">
<div className="input-div">
<label>WordPress admin username</label>
<input type="text" className="form-control" />
</div>
<div className="input-div">
<label>WordPress admin email</label>
<input type="email" className="form-control" />
<span> className='error-message'>Ensure this is a valid email</span>
</div>
</div>
<div className="input-div">
<label>WordPress admin password</label>
<span>Ensure you remember this password as it is what you'll use to log into WP-admin</span>
<input type="text" className="form-control" />
</div>
<div className="input-div">
<label>Data center location</label>
<span>Allows you to place your website in a geographical location closest to your visitors.</span>
<select className="form-control">
<option> value=""></option>
{/* add options */}
</select>
</div>
<div className="checkbox-flex">
<div className="checkbox-input">
<input type="checkbox" />
<label>Install WooCommerce</label>
</div>
<div className="checkbox-input">
<input type="checkbox" />
<label>Install Yoast SEO</label>
</div>
</div>
<button> className='btn'>Create Site</button>
</div>
</form>
</div>
<Footer />
</div >
)
}
export default Home;Implementierung der Formularfeldvalidierung mit dem useRef-Hook
Um die Validierung von Formularfeldern in React zu implementieren, können wir diese Schritte befolgen. Wir konzentrieren uns auf die Validierung der Felder „Display name“ und „WordPress admin email“.
Als Erstes müssen wir Referenzen mit dem useRef hook erstellen, um die Anzeige der Fehlermeldungen zu steuern. Importiere den useRef Hook und erstelle die notwendigen Referenzen für jedes Feld:
import { useRef } from 'react';
const displayNameRef = useRef(null);
const wpEmailRef = useRef(null);Als Nächstes fügen wir die Verweise an die entsprechenden Elemente der Fehlermeldungen in den Formularfeldern an. Zum Beispiel fügst du für das Feld „Anzeigename“ den ref zum Tag span hinzu, der die Fehlermeldung enthält:
<div className="input-div">
<label>Display name</label>
<span>Helps you identify your site. Only used in MyKinsta and temporary domain</span>
<input type="text" className="form-control" value={displayName} onChange={(e) => setDisplayName(e.target.value)} />
<span className='error-message' ref={displayNameRef}>Ensure this has more than 4 characters</span>
</div>Ähnlich verhält es sich mit dem Feld „WordPress admin email“:
<div className="input-div">
<label>WordPress admin email</label>
<input
type="email"
className="form-control"
value={wpAdminEmail}
onChange={(e) => setWpAdminEmail(e.target.value)}
/>
<span> className='error-message' ref={wpEmailRef}>Ensure this is a valid email</span>
</div>Jetzt können wir die Validierungsfunktionen erstellen, die die Eingabewerte prüfen und entscheiden, ob die Fehlermeldungen angezeigt werden sollen. Hier sind die Funktionen für „Anzeigename“ und „WordPress-Admin-E-Mail“:
const checkDisplayName = () => {
if (displayName.length < 4) {
displayNameRef.current.style.display = 'block';
} else {
displayNameRef.current.style.display = 'none';
}
}
const checkWpAdminEmail = () => {
let regex = /^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$/;
if (!wpAdminEmail.match(regex)) {
wpEmailRef.current.style.display = 'block';
} else {
wpEmailRef.current.style.display = 'none';
}
}Diese Funktionen werden immer dann aufgerufen, wenn die entsprechenden Eingabefelder geändert werden. Sie vergleichen die Eingabewerte mit den Überprüfungskriterien und aktualisieren die Anzeige der Fehlermeldungen, indem sie die style.display Eigenschaft der Fehlermeldungselemente manipulieren.
Es steht dir frei, zusätzliche Validierungen zu implementieren oder die Validierungslogik nach deinen Anforderungen anzupassen.
Handhabung der Formularübermittlung in React
Bei der Verarbeitung des Formularübermittlungsereignisses für die Erstellung einer Website müssen wir mehrere Aufgaben erfüllen. Zunächst fügen wir einen onSubmit Event-Handler an das <form> Element an. Innerhalb der Funktion createSite verhindern wir das Standardverhalten bei der Formularübermittlung, indem wir event.preventDefault() aufrufen. So können wir die Übermittlung programmatisch bearbeiten.
Um sicherzustellen, dass die Formulardaten gültig sind, bevor wir mit der Übermittlung fortfahren, rufen wir die Validierungsmethoden checkDisplayName und checkWpAdminEmail auf. Diese Methoden überprüfen, ob die erforderlichen Felder die angegebenen Kriterien erfüllen.
const createSite = (e) => {
e.preventDefault();
checkDisplayName();
checkWpAdminEmail();
// Additional logic
};Wenn alle Überprüfungen erfolgreich waren und die erforderlichen Felder gültige Daten enthalten, löschen wir den localStorage, um einen sauberen Zustand für die Speicherung der API-Antwort und des Anzeigenamens zu gewährleisten.
Als Nächstes stellst du mit der Fetch-Funktion eine API-Anfrage an die Kinsta-API. Die Anfrage ist eine POST-Methode an den Endpunkt https://api.kinsta.com/v2/sites. Achte darauf, dass du die notwendigen Header und die Nutzdaten als JSON mitschickst.
const createSiteWithKinstaAPI = async () => {
const resp = await fetch(
`${KinstaAPIUrl}/sites`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`
},
body: JSON.stringify({
company: `${process.env.REACT_APP_KINSTA_COMPANY_ID}`,
display_name: displayName,
region: centerLocation,
install_mode: 'new',
is_subdomain_multisite: false,
admin_email: wpAdminEmail,
admin_password: wpAdminPassword,
admin_user: wpAdminUsername,
is_multisite: false,
site_title: siteTitle,
woocommerce: false,
wordpressseo: false,
wp_language: 'en_US'
})
}
);
// Handle the response data
};Der Payload enthält verschiedene Datenfelder, die die Kinsta-API benötigt, z. B. Unternehmens-ID, Anzeigename, Region, Installationsmodus, Admin-E-Mail, Admin-Passwort usw. Diese Werte werden aus den entsprechenden Statusvariablen abgeleitet.
Nachdem wir die API-Anfrage gestellt haben, warten wir mit await resp.json() auf die Antwort und extrahieren die relevanten Daten. Wir erstellen ein neues Objekt newData mit der Betriebs-ID und dem Anzeigenamen, das dann mit localStorage.setItem im localStorage gespeichert wird.
const createSiteWithKinstaAPI = async () => {
const resp = await fetch(
// Fetch request here
);
const data = await resp.json();
let newData = { operationId: data.operation_id, display_name: displayName };
localStorage.setItem('state', JSON.stringify(newData));
navigate('/details');
}Schließlich rufen wir die Funktion createSiteWithKinstaAPI auf, damit eine WordPress-Site über die Kinsta-API erstellt wird, wenn ein Nutzer das Formular ausfüllt und auf die Schaltfläche klickt. Außerdem wird im Code erwähnt, dass der Nutzer auf die Seite details.jsx weitergeleitet wird, um den Vorgang mit der Kinsta-API zu verfolgen. Um die Navigationsfunktion zu aktivieren, importiere useNavigate von react-router-dom und initialisiere es.
Zur Erinnerung: Den vollständigen Code für diese Seite findest du im GitHub-Repository.
Implementierung der Überprüfung des Vorgangsstatus mit der Kinsta-API
Um den Status des Vorgangs mit der Kinsta-API zu überprüfen, verwenden wir die Vorgangsnummer, die im localStorage gespeichert wurde. Diese Vorgangs-ID wird mit JSON.parse(localStorage.getItem('state')) aus dem localStorage abgerufen und einer Variablen zugewiesen.
Um den Status des Vorgangs zu überprüfen, stellst du eine weitere API-Anfrage an die Kinsta-API, indem du eine GET-Anfrage an den Endpunkt /operations/{operationId} sendest. Diese Anfrage enthält die notwendigen Header, wie z. B. den Authorization-Header, der den API-Schlüssel enthält.
const [operationData, setOperationData] = useState({ message: "Operation in progress" });
const KinstaAPIUrl = 'https://api.kinsta.com/v2';
const stateData = JSON.parse(localStorage.getItem('state'));
const checkOperation = async () => {
const operationId = stateData.operationId;
const resp = await fetch(
`${KinstaAPIUrl}/operations/${operationId}`,
{
method: 'GET',
headers: {
Authorization: `Bearer ${process.env.REACT_APP_KINSTA_API_KEY}`
}
}
);
const data = await resp.json();
setOperationData(data);
}Sobald wir die Antwort erhalten haben, extrahieren wir die relevanten Daten mit await resp.json() aus der Antwort. Die Vorgangsdaten werden dann mit setOperationData(data) im Status aktualisiert.
In der Rückgabeanweisung der Komponente zeigen wir die Vorgangsmeldung mit operationData.message an. Außerdem stellen wir eine Schaltfläche zur Verfügung, mit der der Benutzer die Prüfung des Vorgangsstatus manuell auslösen kann, indem er die checkOperation aufruft.
Wenn der Status des Vorgangs anzeigt, dass er erfolgreich abgeschlossen wurde, kann der Nutzer die hinzugefügten Links nutzen, um auf den WordPress-Admin und die Website selbst zuzugreifen. Die Links werden mit Hilfe der stateData.display_name aus localStorage erstellt.
<a href={`http://${stateData.display_name}.kinsta.cloud/wp-admin/`} target="_blank" rel="noreferrer" className='detail-link'>
<p>Open WordPress admin</p>
<FiExternalLink />
</a>
<a href={`http://${stateData.display_name}.kinsta.cloud/`} target="_blank" rel="noreferrer" className='detail-link'>
<p>Open URL</p>
<FiExternalLink />
</a>Wenn du auf diese Links klickst, werden der WordPress-Admin und die Website-URL in einem neuen Tab geöffnet, so dass der Nutzer darauf zugreifen kann, ohne zu MyKinsta navigieren zu müssen.
Jetzt kannst du eine WordPress-Website ganz einfach über deine selbst erstellte Anwendung erstellen.
Wie du deine React-Anwendung mit Kinsta bereitstellst
Um dein React-Projekt auf dem Anwendungs-Hosting von Kinsta bereitzustellen, musst du das Projekt zu deinem bevorzugten Git-Anbieter pushen. Wenn dein Projekt entweder auf GitHub, GitLab oder Bitbucket gehostet wird, kannst du mit der Bereitstellung bei Kinsta beginnen.
Befolge diese Schritte, um dein Repository bei Kinsta bereitzustellen:
- Melde dich auf dem MyKinsta-Dashboard an oder erstelle dein Kinsta-Konto.
- Klicke in der linken Seitenleiste auf „Anwendungen“ und dann auf „Dienst hinzufügen“.
- Wähle „Anwendung“ aus dem Dropdown-Menü, um eine React-Anwendung auf Kinsta bereitzustellen.
- Wähle in dem erscheinenden Modal das Repository aus, das du bereitstellen möchtest. Wenn du mehrere Zweige hast, kannst du den gewünschten Zweig auswählen und einen Namen für deine Anwendung vergeben.
- Wähle einen der verfügbaren Rechenzentrumsstandorte aus der Liste der 25 Optionen aus. Kinsta erkennt automatisch den Startbefehl für deine Anwendung.
Schließlich ist es nicht sicher, API-Schlüssel an öffentliche Hoster wie deinen Git-Provider weiterzugeben. Beim Hosten kannst du sie als Umgebungsvariablen hinzufügen, indem du denselben Variablennamen und Wert wie in der .env-Datei angibst.
Sobald du die Bereitstellung deiner Anwendung initiierst, beginnt der Prozess und ist normalerweise innerhalb weniger Minuten abgeschlossen. Eine erfolgreiche Bereitstellung erzeugt einen Link zu deiner Anwendung, wie https://site-builder-ndg9i.kinsta.app/.
Zusammenfassung
In diesem Artikel hast du gelernt, wie du die Kinsta-API programmatisch nutzen kannst, um eine WordPress-Seite zu erstellen und die API in eine React-Anwendung zu integrieren. Denke immer daran, deinen API-Schlüssel sicher aufzubewahren. Wenn du das Gefühl hast, dass du ihn öffentlich weitergegeben hast, widerrufe ihn und erstelle einen neuen.
Mit der Kinsta-API kannst du nicht nur eine WordPress-Site erstellen, sondern auch Informationen über deine WordPress-Sites, Domains und vieles mehr abrufen. Sie kann auch auf Kinsta-Dienste wie Datenbanken und Anwendungen zugreifen.
Welchen Endpunkt würdest du gerne als Nächstes zur Kinsta-API hinzugefügt sehen und was würdest du gerne als Nächstes mit der Kinsta-API bauen? Lass es uns in den Kommentaren wissen.
Joel ist Frontend-Entwickler und arbeitet bei Kinsta als Technical Editor. Er ist ein leidenschaftlicher Lehrer mit einer Vorliebe für Open Source und hat über 200 technische Artikel geschrieben, die sich hauptsächlich um JavaScript und seine Frameworks drehen.
Schreibe einen Kommentar