Wie man ein Backend für Gatsby erstellt?

einführung in diesem tutorial lernen sie wie man ein backend für gatsby mit back4app erstellt wir zeigen ihnen, wie sie die funktionen von back4app integrieren können – wie z b datenbankverwaltung, cloud code funktionen, rest api und graphql abfrage funktionen, benutzerauthentifizierung und echtzeitanfragen (live queries) – um ein sicheres, skalierbares und robustes backend zu erstellen, das von ihrer gatsby seite aus zugänglich ist sie werden auch sehen, wie die schnelle einrichtung und die intuitive umgebung von back4app die zeit und den aufwand, die für backend aufgaben erforderlich sind, drastisch reduzieren können am ende wissen sie genau wie man ein backend für gatsby erstellt, das daten speichert und abruft, die authentifizierung verwaltet, cloud funktionen integriert und mehr dies bereitet sie darauf vor, benutzerdefinierte logik einfach zu integrieren, drittanbieter apis hinzuzufügen oder ihr datenmodell zu erweitern, ohne sich um die traditionelle serverwartung kümmern zu müssen was sie bauen werden und warum es wertvoll ist vollständige backend integration sie erstellen eine skalierbare backend struktur für ihre gatsby seite, die das parse sdk integriert, das perfekt für dynamische datenbedürfnisse ist zeitersparnis back4app bietet tools wie den ki agenten, echtzeitanfragen und cloud jobs, die die backend erstellung beschleunigen erweiterbare fähigkeiten nach abschluss werden sie in der lage sein, diese konzepte für fortgeschrittenere gatsby funktionen anzupassen, wie z b seiten erstellen zur build zeit oder das anbinden an serverlose funktionen für dynamische operationen voraussetzungen ein back4app konto und ein neues back4app projekt erste schritte mit back4app https //www back4app com/docs/get started/new parse app wenn sie kein konto haben, können sie eines kostenlos erstellen folgen sie dem obigen leitfaden, um ihr projekt vorzubereiten grundlegende gatsby entwicklungsumgebung sie können dies einrichten, indem sie die gatsby cli https //www gatsbyjs com/docs/tutorial/part 0/#install gatsby cli installieren und folgendes ausführen node js (version 14 oder höher) installiert node js installieren https //nodejs org/en/download/ vertrautheit mit javascript und den konzepten von gatsby offizielle gatsby dokumentation https //www gatsbyjs com/docs/ lesen sie die dokumentation oder ein tutorial für anfänger, wenn sie neu bei gatsby sind stellen sie sicher, dass sie diese anforderungen erfüllt haben dies gewährleistet ein reibungsloses erlebnis, während sie eine neue datei erstellen für die konfiguration oder graphql abfragen in ihrer gatsby umgebung ausführen schritt 1 – einrichten des back4app projekts ein neues projekt erstellen der erste schritt in wie man ein backend für gatsby auf back4app erstellt, besteht darin, ein neues projekt zu erstellen wenn sie dies noch nicht getan haben melden sie sich bei ihrem back4app konto an klicken sie auf die schaltfläche „neue app“ auf ihrem dashboard geben sie ihrer app einen namen (z b „gatsby backend tutorial“) nachdem sie das projekt erstellt haben, wird es in ihrem back4app dashboard angezeigt wir werden dieses projekt als kern unseres backends verwenden verbinden sie das parse sdk back4app verwendet die parse plattform, um ihre daten zu verwalten, echtzeitfunktionen anzubieten, die benutzerauthentifizierung zu handhaben und mehr für gatsby können sie immer noch npm install parse und es dann in ihre quelldateien integrieren holen sie sich ihre parse schlüssel in ihrem back4app dashboard finden sie ihre anwendungs id und javascript schlüssel , typischerweise unter „app einstellungen“ oder „sicherheit & schlüssel “ sie finden auch die parse server url (oft etwas wie https //parseapi back4app com ) installieren sie das parse sdk in ihrer gatsby website npm install parse erstellen sie eine parseconfig js im stammverzeichnis ihres gatsby projekts oder innerhalb von src/ src/parseconfig js // src/parseconfig js import parse from 'parse'; // replace the placeholders with your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; wann immer sie parse von parseconfig js in ihren gatsby dateien importieren (z b in gatsby node js , gatsby browser js , oder seiten/komponenten), haben sie eine vorkonfigurierte instanz, die bereit ist, abfragen an ihr back4app backend zu stellen schritt 2 – datenbank einrichten erstellen eines datenmodells in back4app werden daten als „klassen“ (ähnlich wie tabellen) mit feldern für ihre daten verwaltet lassen sie uns eine „todo“ klasse zur demonstration erstellen wir zeigen ihnen einige möglichkeiten, wie sie daten speichern und abrufen können in gatsby mit parse navigieren sie zum abschnitt „datenbank“ in ihrem back4app dashboard erstellen sie eine neue klasse (z b „todo“) und fügen sie spalten wie titel (string) und iscompleted (boolean) hinzu oder sie können parse automatisch spalten erstellen lassen, wenn objekte zum ersten mal aus ihrem code gespeichert werden erstellen eines datenmodells mit dem ki agenten back4app bietet einen ki agenten, um ihnen bei der definition ihrer datenstruktur zu helfen öffnen sie den ki agenten von ihrem app dashboard oder menü beschreiben sie ihr datenmodell (z b „bitte erstellen sie ein neues todo app schema mit einem titel und einem abschlussstatus “) lassen sie den ki agenten das schema für sie generieren daten lesen und schreiben mit sdk ein beispielausschnitt in gatsby könnte so aussehen (zum beispiel auf einer auf react basierenden seite oder in gatsby browser js ) import parse from ' /parseconfig'; async function createtodoitem(title, iscompleted) { const todo = parse object extend('todo'); const todo = new todo(); todo set('title', title); todo set('iscompleted', iscompleted); try { const savedtodo = await todo save(); console log('todo saved successfully ', savedtodo); return savedtodo; } catch (error) { console error('error saving todo ', error); } } async function fetchtodos() { const todo = parse object extend('todo'); const query = new parse query(todo); try { const results = await query find(); console log('fetched todo items ', results); return results; } catch (error) { console error('error fetching todos ', error); } } daten lesen und schreiben mit der rest api alternativ können sie über die rest api mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } dies ist besonders praktisch, wenn sie möchten, dass ihre gatsby website daten über graphql abfragen zur build zeit abruft arbeiten mit live abfragen gatsby ist ein statischer site generator, aber sie können dennoch dynamische echtzeitverbindungen mit parse live abfragen dies kann nützlich sein in browserseitigem code oder in ihren eigenen serverlosen hooks aktivieren sie live abfragen in ihrem back4app dashboard (unter servereinstellungen) fügen sie die live query server url zu parseconfig js parse livequeryserverurl = 'wss\ //your subdomain here b4a io'; abonnieren sie eine klasse für echtzeitbenachrichtigungen async function subscribetotodos(callback) { const query = new parse query('todo'); const subscription = await query subscribe(); subscription on('create', (newtodo) => { callback('create', newtodo); }); subscription on('update', (updatedtodo) => { callback('update', updatedtodo); }); subscription on('delete', (deletedtodo) => { callback('delete', deletedtodo); }); return subscription; } dies wird echtzeitdatenaktualisierungen an das frontend ihres gatsby projekts senden schritt 3 – anwendung von sicherheit mit acls und clps was sind acls und clps? acls (zugriffskontrolllisten) ermöglichen es ihnen, berechtigungen für einzelne objekte zu definieren, während clps (klassenebene berechtigungen) für gesamte klassen in ihrer back4app datenbank gelten einrichten von klassenebene berechtigungen gehe zu datenbank in deinem back4app dashboard wähle die klasse (z b todo ) klicke auf den klassenebene berechtigungen tab konfiguriere, ob die klasse öffentlich lesbar, eine authentifizierung erfordert oder auf bestimmte rollen beschränkt ist verwendung von acls im code in deinem gatsby code kannst du acls für jedes neue objekt definieren async function createprivatetodo(title, owneruser) { const todo = parse object extend('todo'); const todo = new todo(); todo set('title', title); const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); todo setacl(acl); try { return await todo save(); } catch (err) { console error('error saving private todo ', err); } } schritt 4 – schreiben von cloud code funktionen warum cloud code? mit cloud code kannst du benutzerdefinierte serverseitige logik zu deinem back4app backend hinzufügen dies ist großartig für geschäftsregeln, rest api transformationen, trigger oder datenvalidierungen, die du sicher und außerhalb der client seite halten möchtest beispiel für eine cloud funktion // main js parse cloud define('calculatetextlength', async (request) => { const { text } = request params; if (!text) { throw new error('no text provided'); } return { length text length }; }); bereitstellung von cloud code über back4app cli installieren und konfigurieren sie die cli, und führen sie dann b4a deploy aus über dashboard gehen sie zu cloud code > funktionen in ihrem dashboard, fügen sie ihren code in main js , und klicken sie auf bereitstellen aufrufen ihrer funktion von gatsby/parse sdk import parse from ' /parseconfig'; async function gettextlength(text) { try { const result = await parse cloud run('calculatetextlength', { text }); console log('text length ', result length); } catch (err) { console error('error calling cloud function ', err); } } schritt 5 – authentifizierung konfigurieren parse benutzerklasse back4app verwendet die parse user klasse zur authentifizierung standardmäßig kümmert sie sich um passwort hashing, sitzungen und sichere speicherung registrierung und anmeldung in gatsby import parse from ' /parseconfig'; // signup async function signupuser(username, password, email) { const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); console log('user signed up successfully!'); } catch (error) { console error('error signing up user ', error); } } // login async function loginuser(username, password) { try { const user = await parse user login(username, password); console log('user logged in ', user); } catch (error) { console error('error logging in user ', error); } } nach der anmeldung können sie parse user current() aufrufen, um zu überprüfen, ob ein benutzer angemeldet ist soziale anmeldung sie können google , facebook , apple , und andere anbieter mit zusätzlichen einstellungen integrieren lesen sie mehr in den dokumentationen zur sozialen anmeldung https //www back4app com/docs/platform/sign in with apple schritt 6 – dateispeicherung verwalten dateien hochladen verwenden sie parse file , um bilder oder andere dateien hochzuladen zum beispiel in einer gatsby komponente async function uploadimage(file) { const name = file name; const parsefile = new parse file(name, file); try { const savedfile = await parsefile save(); console log('file saved ', savedfile url()); return savedfile url(); } catch (err) { console error('error uploading file ', err); } } sie können diese datei dann an ein parse objekt anhängen, speichern und später die datei url abrufen, um sie auf ihrer gatsby website anzuzeigen schritt 7 – e mail verifizierung und passwortzurücksetzung warum es wichtig ist die e mail verifizierung bestätigt die e mail adresse des benutzers, und die passwortzurücksetzungsabläufe verbessern die benutzererfahrung beide können einfach in back4app konfiguriert werden navigieren sie zu den e mail einstellungen ihrer app im dashboard aktivieren sie die e mail verifizierung und richten sie die e mail vorlage für die passwortzurücksetzung ein verwenden sie die parse sdk methoden (z b parse user requestpasswordreset(email) ) um rücksetz e mails auszulösen schritt 8 – aufgaben mit cloud jobs planen übersicht über cloud jobs verwenden sie cloud jobs zur automatisierung wiederkehrender aufgaben, wie das entfernen veralteter daten oder das senden täglicher zusammenfassungen zum beispiel // main js parse cloud job('cleanupoldtodos', async (request) => { const todo = parse object extend('todo'); const query = new parse query(todo); const now = new date(); const thirty days = 30 24 60 60 1000; const cutoff = new date(now thirty days); query lessthan('createdat', cutoff); try { const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; } catch (err) { throw new error('error during cleanup ' + err message); } }); planen sie es dann unter app einstellungen > servereinstellungen > hintergrundjobs schritt 9 – integration von webhooks webhooks ermöglichen es ihrer back4app app, http anfragen an externe dienste zu senden, wenn bestimmte ereignisse eintreten – wie z b die erstellung eines neuen datensatzes gehen sie zu ihrem back4app dashboard > mehr > webhooks fügen sie einen neuen webhook hinzu , indem sie die endpunkt url für einen externen dienst angeben wählen sie aus, was den webhook auslöst (z b aftersave in der todo klasse) sie können auch mit slack oder zahlungsanbietern integrieren, indem sie den entsprechenden endpunkt hinzufügen schritt 10 – erkundung des back4app admin panels back4app’s admin app ist eine modellzentrierte schnittstelle zur datenverwaltung sie können nicht technischen benutzern sicheren zugriff gewähren, um crud operationen an ihren klassen durchzuführen aktivierung der admin app gehen sie zu app dashboard > mehr > admin app und klicken sie auf „admin app aktivieren “ dann erstellen sie einen admin benutzer und wählen sie eine subdomain für die admin schnittstelle sie können sich jetzt in ihre admin app einloggen, um daten anzuzeigen und zu ändern, ohne code zu schreiben fazit in diesem tutorial haben sie erfahren, wie man ein backend für gatsby mit back4app erstellt sie haben gelernt eine sichere datenbank konfigurieren mit klassen, benutzerdefinierten feldern und beziehungen das parse sdk verwenden , zusammen mit rest api und graphql abfragen für daten transaktionen acls und clps einrichten für datensicherheit cloud code schreiben und bereitstellen um geschäftslogik und trigger zu erweitern benutzerauthentifizierung verwalten mit registrierung, anmeldung, passwort zurücksetzen und e mail bestätigung dateispeicherung verwalten für bilder und dokumente automatisierte aufgaben planen mit cloud jobs externe dienste integrieren über webhooks die admin app nutzen für eine einfache datenverwaltung mit diesen fähigkeiten kann ihre gatsby website leistungsstarke dynamische funktionen nutzen und gleichzeitig von der statischen rendering funktion von gatsby profitieren von hier aus können sie ihr datenmodell erweitern und erweiterte geschäftslogik hinzufügen weitere externe apis integrieren für eine wirklich umfassende plattform folgen sie den offiziellen dokumenten von back4app für tiefere einblicke in sicherheit, leistung und analytik experimentieren sie mit den build zeit funktionen von gatsby —zum beispiel, “ seiten erstellen ” aus dynamischen daten oder richten sie ein “ gatsby source ” plugin für ihr back4app backend ein jetzt haben sie eine solide grundlage für den aufbau zukunftssicherer, datengestützter apps mit gatsby und back4app