Wie baut man ein Astro.js-Backend?

Astro.js ist ein statischer Website-Generator (SSG) und ein Frontend-Framework zur Erstellung schneller, moderner Webanwendungen.

Es ermöglicht Ihnen, schnelle und schlanke Websites zu erstellen, indem statische HTML-, CSS- und JavaScript-Dateien bei der Erstellung vorgerendert werden.

Im Gegensatz zu herkömmlichen SSGs können Sie mit Astro.js auch Ihre statischen Seiten zur Laufzeit mit JavaScript anreichern, was Ihnen die Flexibilität gibt, dynamische und interaktive Websites zu erstellen.

Dieser Artikel bietet ein umfassendes Tutorial, wie man eine Astro.js-Anwendung mit Back4app als Backend as a Service (BaaS) erstellt.

Er bietet einen Überblick über Astro.js, seine Vorteile und Einschränkungen und eine Schritt-für-Schritt-Anleitung, wie man eine Astro.js-Anwendung erstellt und hostet.

Vorteile von Astro.js

Astro.js verfügt über mehrere wichtige Funktionen, die es zu einer guten Wahl für die Erstellung moderner Websites machen, darunter:

Insel-Architektur

Die Inselarchitektur ist ein Muster der Webarchitektur, bei dem eine Webseite in gekapselte und unabhängige Funktionsinseln unterteilt wird.

Jede Insel kann durch eine einzelne Komponente, eine Gruppe von Komponenten oder sogar eine ganze Seite dargestellt werden.

Astro.js zerlegt Ihre Benutzeroberfläche (UI) in kleinere, isolierte Komponenten, die als “Astro Islands” bekannt sind. Sie können diese Inseln auf jeder Seite verwenden und so ungenutztes JavaScript durch schlankes HTML ersetzen.

Die Inselarchitektur hat mehrere Vorteile, darunter verbesserte Leistung, höhere Flexibilität und vereinfachte Entwicklung.

Minimales JavaScript

Astro verfolgt den Ansatz “weniger JavaScript”. Es sendet nur dann JavaScript an den Client, wenn es für die Interaktivität erforderlich ist. Dies trägt dazu bei, die Größe des JavaScript-Pakets zu verringern und die Ladezeiten zu verbessern.

Das minimale JavaScript in Astro.js bietet mehrere greifbare Vorteile, darunter eine verbesserte Website-Performance, eine bessere Suchmaschinenoptimierung, einen geringeren Ressourcenverbrauch, eine höhere Sicherheit und ein reaktionsschnelleres Benutzererlebnis.

Dieser Ansatz ist darauf ausgerichtet, effiziente und leistungsfähige Webanwendungen zu liefern, was Astro.js zu einer überzeugenden Wahl für die moderne Webentwicklung macht.

Integration mit gängigen Frameworks

Sie können Astro.js mit verschiedenen gängigen JavaScript-Frameworks verwenden, darunter React, Svelte, Vue und Lit.

So können Sie Ihre bevorzugten Tools auswählen, vorhandene Komponenten und Kenntnisse wiederverwenden, auf etablierte Ökosysteme zurückgreifen und einen reibungslosen Entwicklungsprozess aufrechterhalten.

Diese Flexibilität und Kompatibilität machen Astro.js zu einer attraktiven Wahl für verschiedene Projekte.

Optimiertes Laden

Optimiertes Laden ist ein zentraler Vorteil von Astro.js. Es verändert die Art und Weise, wie Webseiten gestaltet und bereitgestellt werden, grundlegend und konzentriert sich auf die Verbesserung des Benutzererlebnisses und der Website-Leistung.

Astro optimiert das Laden und Rendering für verschiedene Geräte, auch für Geräte mit geringer Leistung wie Smartphones. Es zielt darauf ab, ein reibungsloses Erlebnis zu bieten, unabhängig vom Gerät des Nutzers oder den Netzwerkbedingungen.

Beschränkungen von Astro.js

Astro.js hat einige Einschränkungen, die Sie kennen sollten. Hier sind einige von ihnen:

Ökosystem-Kompatibilität

Astro.js wurde für die Zusammenarbeit mit gängigen Frontend-Frameworks wie React, Svelte und Vue.js entwickelt. Allerdings ist sein Ökosystem weniger ausgereift als Frameworks wie React oder Vue, sodass Sie möglicherweise weniger Bibliotheken und Komponenten von Drittanbietern finden, die explizit für Astro entwickelt wurden.

Anforderung an die Vertrautheit mit dem Framework

Astro.js erlaubt die Verwendung verschiedener Frontend-Frameworks, was eine Vertrautheit mit dem jeweils gewählten Framework voraussetzt.

Diese Bandbreite an Wissen kann für Entwickler, die sich auf ein Framework spezialisiert haben oder neu in der Webentwicklung sind, überwältigend sein.

Bei der Arbeit an einem Projekt, das mehrere Frameworks erfordert, muss die Konsistenz zwischen den verschiedenen Frameworks gewahrt werden.

Dies kann eine große Herausforderung sein, da verschiedene Frameworks ihre eigenen Konventionen und Best Practices haben und die Harmonisierung dieser innerhalb eines einzigen Projekts zu einer fragmentierten Codestruktur führen kann.

Optimierung Lernen

Optimierungslernen bezieht sich auf das Verständnis und die Implementierung spezifischer Strategien zur Maximierung der Leistung von Webanwendungen, die mit einem Framework erstellt wurden.

Astro.js ist zwar auf Effizienz und Geschwindigkeit ausgelegt, aber um seine Möglichkeiten voll auszuschöpfen, müssen Sie die Optimierungstechniken genau verstehen und im Entwicklungsprozess implementieren. Dies kann komplex sein und fortgeschrittene Kenntnisse erfordern.

Aufbau der Journal-Anwendung

In diesem Tutorial werden Sie eine einfache Journal-Anwendung mit dem Astro.js-Framework und React.js erstellen.

Die Journalanwendung wird CRUD-Funktionen (Erstellen, Lesen, Aktualisieren, Löschen) bieten und Back4app für die Datenspeicherung und -abfrage nutzen.

Sie können ein Astro.js-Projekt erstellen, indem Sie diesen Befehl in Ihrem Terminal ausführen:

npm create astro@latest

Der obige Befehl generiert ein grundlegendes Astro.js-Projekt und führt Sie durch die Konfiguration der Anwendung, einschließlich Aspekten wie TypeScript-Nutzung und Strictness-Level.

Um React.js zu Ihrem Astro.js-Projekt hinzuzufügen, führen Sie diesen Befehl in Ihrem Terminal aus:

npx astro add react

Jetzt ist Ihr Projekt fertig. Sie können mit der Entwicklung der Anwendung mit Ihrer bevorzugten IDE beginnen. Zunächst definieren Sie Ihre globalen Stile und das Layout der Anwendung.

Um Ihre globalen Stile zu definieren, erstellen Sie einen Ordner ” styles" im Verzeichnis ” src". Erstellen Sie innerhalb des Ordners styles eine Datei namens global.css und definieren Sie dort Ihre globalen Stile.

Etwa so:

Nachdem Sie die globalen Stile festgelegt haben, ist es an der Zeit, Ihr Layout zu definieren. Sie finden eine Datei Layout.astro im Ordner layouts im Verzeichnis src.

Ersetzen Sie den vorhandenen Code in der Datei Layout.astro durch den folgenden Codeblock:

Der obige Codeblock stellt die Layoutkomponente dar. Er importiert die globalen Stile, richtet Metadaten ein und bietet einen Platzhalter für dynamische Inhalte unter Verwendung des Slot-Elements.

Der Hauptinhalt der Komponente ist eine h1-Überschrift mit einem bestimmten, im style-Tag definierten Styling.

Um das Layout und die globalen Stile auf Ihre Seiten anzuwenden, importieren Sie die Layoutkomponente in die Seitendatei und schließen den HTML-Abschnitt in die Layoutkomponente ein.

Um das Layout auf Ihre Homepage anzuwenden, folgen Sie denselben Schritten in der Datei index.astro, die sich im Verzeichnis src/pages befindet.

Etwa so:

Dieser Codeblock definiert die Homepage Ihrer Anwendung. Er definiert ein Navigationsmenü mit einem Link zur Seite “/journal” und wendet bestimmte Stile an, um das Navigationselement zu zentrieren und zu platzieren.

Um die Journalseite zu erstellen, erstellen Sie eine Datei namens journal.astro im Verzeichnis src/pages und fügen Sie den folgenden Codeblock in die Datei ein.

Der obige Codeblock stellt die Journalseite für Ihre Anwendung dar. Er importiert die Layoutkomponente und umschließt den HTML-Abschnitt, um eine einheitliche Seitenstruktur zu gewährleisten.

Der Code definiert auch ein Formular zur Erfassung von Tagebucheinträgen, das mit Eingabefeldern für den Titel und den Text sowie einer Schaltfläche “Log” ausgestattet ist. Die im style-Tag definierten CSS-Stile steuern das Aussehen des Formulars und seiner Elemente.

Um Ihre Anwendung in Ihrem Webbrowser zu starten, starten Sie den Entwicklungsserver der Anwendung. Navigieren Sie in Ihrem Terminal zum Verzeichnis des Projekts und führen Sie den folgenden Befehl aus, um den Entwicklungsserver zu starten.

npm run dev

Mit dem obigen Befehl erhalten Sie den Link http://localhost:4321/. Rufen Sie diesen Link in Ihrem Webbrowser auf, um Ihre Anwendung anzuzeigen.

Die Startseite sollte wie folgt aussehen:

Klicken Sie auf den Navigationslink “Protokollieren Sie Ihre Erfahrungen”, um die Journal-Seite anzuzeigen .

Integration von Back4app mit Ihrer Anwendung

Back4App ist eine Cloud-basierte Backend-Service-Plattform, die die Entwicklung und das Management von Anwendungen vereinfachen soll, und wird Back4app als Astro.js-Backend nutzen.

Durch die Nutzung des Open-Source-Frameworks Parse Server bietet es eine robuste Suite von Tools, die es Entwicklern ermöglichen, sich auf die Front-End-Entwicklung zu konzentrieren und gleichzeitig die Komplexität des Back-Ends zu vereinfachen.

Im Kern bietet Back4App Funktionen, die für die moderne App-Entwicklung entscheidend sind, wie Datenspeicherung, Benutzerauthentifizierung und eine Echtzeit-Datenbank.

Das macht sie für die Erstellung interaktiver und dynamischer Benutzererfahrungen so wertvoll. Die Plattform unterstützt verschiedene Programmiersprachen und Frameworks und wird so den unterschiedlichen Entwicklungsanforderungen gerecht.

Erstellen eines Back4app-Kontos

Um die von Back4app angebotenen Funktionen in Ihre Anwendungen zu integrieren, benötigen Sie ein Back4app-Konto. Sie können einen erstellen, indem Sie diese einfachen Schritte befolgen:

1. Besuchen Sie die Website von Back4app.
2. Klicken Sie auf die Schaltfläche “Anmelden”.
3. Füllen Sie das Anmeldeformular aus und schicken Sie es ab.

Einführung in das Back4app ChatGPT Plugin

Back4app hat kürzlich sein ChatGPT-Plugin vorgestellt, das Entwicklern und technisch nicht versierten Enthusiasten die Erstellung und Interaktion mit Back4app-Anwendungen erleichtert.

Mit dem Back4app ChatGPT Plugin können Sie Ihre Unterhaltungen in echte Anwendungen umwandeln. Das bedeutet, dass Sie keine Erfahrung mit der Back4app-Plattform benötigen, bevor Sie interagieren.

Um auf ChatGPT-Plugins zugreifen zu können, müssen Sie sich bei ChatGPT Plus anmelden. Sobald Sie das Abonnement abgeschlossen haben, klicken Sie auf die Schaltfläche “GPT-4”, um ein Pop-over-Menü zu öffnen. Wählen Sie die Option “Plugins”, um fortzufahren.

Eine Liste der verfügbaren Plugins wird auf Ihrem Bildschirm angezeigt. Suchen Sie das Back4app-Plugin und wählen Sie es aus (geben Sie “Back4app” in die Suchleiste ein).

Erstellen Sie eine Back4app-Anwendung mit dem Plugin

Das Erstellen einer Back4app-Anwendung mit dem Back4app-Plugin auf ChatGPT ist eine einfache Aufgabe. Informieren Sie ChatGPT über die Art der Anwendung, die Sie erstellen möchten, und es wird den Rest erledigen.

Zum Beispiel:

Wie in der Abbildung oben zu sehen, erstellt das Back4app ChatGPT-Plugin eine Back4app-Anwendung mit dem Namen “Journal-Anwendung”.

Um zu überprüfen, ob das Back4app ChatGPT-Plugin die Anwendung erfolgreich erstellt hat, navigieren Sie zur Back4app-Website, melden Sie sich bei Ihrem Konto an und überprüfen Sie Ihre Anwendungen. Sie sollten eine Anwendung namens “Journalanwendung” unter Ihren Anwendungen finden.

Erstellen Sie mit Hilfe des Plugins eine Journalklasse in der Journalanwendung.

Wie in der Abbildung oben zu sehen ist, erstellt das Back4app ChatGPT-Plugin die Journal-Klasse und fügt einen Titel, einen Inhalt und ein Datumsfeld hinzu.

Hinzufügen von Daten zur Back4app-Anwendung

Mit dem Back4app ChatGPT-Plugin können Sie der Anwendung auch benutzerdefinierte Daten hinzufügen. Zum Beispiel können Sie benutzerdefinierten Text in die Titel- und Inhaltsfelder einfügen.

Nachdem Sie die Texte hinzugefügt haben, navigieren Sie zum Anwendungs-Dashboard, klicken Sie auf die Zeitschriftenklasse und bestätigen Sie, dass der Text hinzugefügt wurde.

Verbinden mit Back4app

Um Ihre Journal-App mit der Back4app-Anwendung zu verbinden, müssen Sie das Parse JavaScript SDK in Ihrer Anwendung installieren.

Führen Sie dazu den folgenden Befehl in Ihrem Terminal aus:

npm install parse 

Nach der Installation des Parse JavaScript SDK benötigen Sie die Anwendungs-ID und die Javascript KEY-Anmeldedaten.

Sie finden diese Anmeldedaten im Bereich Sicherheit & Schlüssel auf dem Dashboard Ihrer Back4app-App. Speichern Sie die Anwendungs-ID und den Javascript-Schlüssel sicher in Ihrer Anwendung.

Hinzufügen von Daten zu Back4app aus der Anwendung

In diesem Artikel haben Sie bereits gelernt, wie Sie mit dem Back4app ChatGPT-Plugin Daten zu Back4app hinzufügen können. Um dies mit Ihrer Journalanwendung zu tun, werden Sie das Parse Javascript SDK verwenden.

Fügen Sie in der Datei journal.astro den folgenden Codeblock ein:

Dieser Codeblock stellt ein JavaScript-Skript dar, das mit Parse integriert wird, um Journaleinträge zu erstellen und zu speichern. Es importiert die verkleinerte Version von Parse aus parse/dist/parse.min.js und ruft die Methode initialize auf.

Diese Methode nimmt die Anmeldeinformationen Application_ID und Javascript_KEY als Argumente entgegen. Nach dem Aufruf der Initialisierungsmethode von Parse setzen Sie die Eigenschaft serverURL von Parse auf https://parseapi.back4app.com/.

Der Code wählt die Elemente input, textarea und button aus dem DOM aus und weist sie den Variablen title, body und button zu.

Das Eingabefeld nimmt den Titel des Tagebucheintrags auf, und das Textfeld nimmt den Text des Tagebucheintrags auf.

Die Funktion addJournal enthält die Logik, die erforderlich ist, um Daten zu Ihrer Back4app-Datenbank hinzuzufügen. Sie erstellt eine neue Instanz eines Journal-Objekts, setzt dessen Titel- und Inhaltseigenschaften auf die Werte der Input- und Textarea-Elemente und speichert es in Back4app.

Mit der Methode addEventListener fügt der Code der Schaltfläche einen Ereignis-Listener hinzu, der sicherstellt, dass das Anklicken der Schaltfläche die Funktion addJournal auslöst.

Abrufen von Daten aus Back4app

Um Daten von Back4app abzurufen und in Ihrer Anwendung anzuzeigen, werden Sie eine React-Komponente verwenden. Erstellen Sie eine Journal.tsx-Datei im Verzeichnis src/components. Importieren und initialisieren Sie in dieser Datei die Parse-Bibliothek.

Etwa so:

Definieren Sie dann die JSX-Elemente der Komponente:

Als Nächstes erstellen Sie einen Journalstatus und definieren eine Funktion, die die Logik zum Abrufen von Daten aus Back4app enthält.

Etwa so:

Mit der Methode Parse.Query verwendet die Funktion fetchJournal das Parse SDK, um eine Abfrage zu erstellen, die Daten aus der Klasse Journal abruft.

Die find-Methode des query-Objekts gibt ein Array mit den Abfrageergebnissen zurück, und die setJournal-Funktion aktualisiert den Journalstatus mit den abgerufenen Daten.

Dieser Code verwendet den useEffect-Hook, um Seiteneffekte in der Komponente auszuführen. Er ruft fetchJournal auf, um Daten abzurufen, wenn die Komponente aktiviert wird. Zeigen Sie nun in der Komponente den Inhalt des Journalstatus an.

Etwa so:

Der obige Codeblock stellt die Liste der Tagebucheinträge als eine Sammlung von div-Elementen dar, jedes mit einem bestimmten Inhalt und einer speziellen Schaltfläche “Löschen”.

Es zeigt den Titel und den Inhalt jedes Tagebucheintrags innerhalb des h3- und p-Tags an und verfügt über eine Schaltfläche “Löschen”, mit der die Benutzer die Einträge leicht entfernen können.

Um die in Ihrer Journal-Komponente definierten JSX-Elemente zu gestalten, fügen Sie die folgenden Stile zu Ihrer global.css-Datei hinzu:

Zeigen Sie nun die Journal-Komponente auf Ihrer Homepage an. Ersetzen Sie dazu den vorhandenen Code in der Datei index.astro durch den unten stehenden Codeblock:

Dieser Codeblock importiert die Journal-Komponente und rendert sie. Die client:load-Direktive stellt sicher, dass die Journal-Komponente sofort beim Laden der Seite geladen wird, um eine reibungslose und reaktionsschnelle Benutzererfahrung zu gewährleisten.

Löschung von Daten aus Back4app

Um sicherzustellen, dass die Löschtaste Ihrer Anwendung neben jedem Eintrag funktioniert, müssen Sie eine Funktion definieren, die einen Eintrag Ihrer Wahl löscht. Mit Hilfe des Klick-Ereignisses binden Sie diese Funktion dann an die Schaltfläche “Löschen”.

Etwa so:

Die Funktion deleteJournal erstellt eine neue Instanz eines Journal-Objekts mithilfe der Methode Parse.Object.extend. Nach der Erstellung des Objekts setzt sie die id-Eigenschaft des Objekts auf den id-Parameter, der an die Funktion übergeben wird.

Anschließend ruft die Funktion die asynchrone Destroy-Methode des “Journal”-Objekts auf, um den Journaleintrag mit der angegebenen ID aus Back4app zu löschen.

Mit der Filtermethode filtert die Funktion den Journaleintrag mit der angegebenen ID aus dem Journalstatus heraus und erstellt ein neues Array, das den gelöschten Eintrag ausschließt.

Schließlich aktualisiert die Funktion mit der Methode setJournal den Journalstatus mit diesem neuen Array.

Binden Sie nun die Funktion deleteJournal über den Click-Event-Handler an die Schaltfläche "Löschen". Dies führt dazu, dass Ihre JSX-Elemente in der Datei Journal.tsx wie folgt aussehen:

Testen der Anwendung

Nachdem Sie die Anwendung erstellt haben, müssen Sie sie unbedingt testen. Navigieren Sie dazu zu Ihrem Terminal, starten Sie den Entwicklungsserver und zeigen Sie die Anwendung in Ihrem Webbrowser an.

Die Anwendung sollte wie folgt aussehen:

Klicken Sie auf “Log your experience”, um die Journalseite der Anwendung aufzurufen und die Eingabefelder auszufüllen.

Nachdem Sie die Eingabefelder ausgefüllt haben, klicken Sie auf log, um die Daten zu Ihrer Back4app-Datenbank hinzuzufügen. Kehren Sie zu Ihrer Startseite zurück.

Um zu testen, ob Sie einen Eintrag löschen können, klicken Sie auf die Schaltfläche “Löschen” des Eintrags “My First Day Journaling”. Ihre Startseite sollte nun wie das untenstehende Bild aussehen.

Schlussfolgerung

In diesem Artikel haben Sie sich mit dem Astro.js-Framework befasst und seine Vorteile und potenziellen Nachteile kennengelernt. Sie haben gelernt, wie Sie eine Astro-Anwendung erstellen, die nahtlos in die React-Bibliothek integriert ist.

Astro.js ist eine ausgezeichnete Wahl für die Erstellung verschiedener Websites, von einfachen Landing Pages bis hin zu komplexen Webanwendungen. Es eignet sich besonders gut für Websites, die schnell, leichtgewichtig und skalierbar sein müssen.

Um mehr zu erfahren, lesen Sie bitte das Tutorial Wie man ein Backend für Astro erstellt?.