Wie man ein Backend für React Native erstellt?

einführung in diesem tutorial lernen sie wie man ein backend für react native mit back4app erstellt wir werden uns auf die plattformübergreifende kompatibilität konzentrieren und zeigen, wie sie wichtige back4app funktionen für datenmanagement, benutzerauthentifizierung und echtzeitdaten integrieren können durch die nutzung von rest und graphql apis können sie ihr react native projekt so entwickeln, dass es sowohl auf ios als auch auf android plattformen läuft, und so ein nahtloses erlebnis über native komponenten und mobile anwendungen hinweg gewährleisten die implementierung sicherer benutzeranmeldungen, die planung von aufgaben und die nutzung von echtzeitanwendungen werden ihre reise als full stack entwickler erleichtern sie werden auch sehen, wie die umgebung von back4app die zeit reduzieren kann, die benötigt wird, um dienste wie hosting, datenbank und sicherheitslayer einzurichten am ende werden sie eine robuste backend struktur haben, die ihre react native app unterstützt und den weg für den aufbau mobiler lösungen in großem maßstab ebnet nach abschluss dieses leitfadens sind sie bereit, ihre app mit erweiterten funktionen zu erweitern, drittanbieterdienste zu integrieren oder ihr projekt in eine produktionsbereite plattform zu verwandeln lass uns in die moderne mobile app entwicklung mit back4app und react native eintauchen! voraussetzungen um dieses tutorial abzuschließen, benötigen sie 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, melden sie sich kostenlos an folgen sie dann der anleitung, um ihr projekt vorzubereiten grundlegende react native entwicklungsumgebung sie können die react native cli quickstart https //reactnative dev/docs/environment setup oder expo cli https //docs expo dev/get started/installation/ stellen sie sicher, dass sie node js installiert haben node js (version 14 oder höher) installiert sie benötigen node js, um npm pakete zu installieren und lokale entwicklungsserver auszuführen node js installieren https //nodejs org/en/download/ vertrautheit mit javascript und grundlegenden react native konzepten offizielle react native dokumentation https //reactnative dev/ wenn sie neu in der react native entwicklung sind, lesen sie zuerst die dokumentation oder ein tutorial für anfänger stellen sie sicher, dass sie diese voraussetzungen erfüllt haben, bevor sie beginnen wenn ihr back4app projekt erstellt und ihre lokale react native umgebung konfiguriert ist, wird der prozess reibungslos verlaufen schritt 1 – erstellen eines neuen projekts auf back4app und verbindung herstellen ein neues projekt erstellen der erste schritt beim erstellen mobiler backends für ihre react native app besteht darin, ein neues projekt auf back4app zu erstellen befolgen sie diese schritte melden sie sich bei ihrem back4app konto an klicken sie auf die schaltfläche „neue app“ in ihrem back4app dashboard geben sie ihrer app einen namen (z b „reactnative backend tutorial“) sobald das projekt erstellt ist, wird es in ihrem back4app dashboard angezeigt sie werden dieses neue projekt verwenden, um daten zu verwalten und die sicherheit für ihre react native app zu konfigurieren erhalten ihrer anwendungs schlüssel im gegensatz zu webbasierten react apps erfordert die entwicklung von react native häufig direkte http anfragen zum abrufen und manipulieren von daten da wir uns auf rest apis (oder graphql apis ) anstelle des parse sdk konzentrieren, benötigen sie dennoch ihre back4app schlüssel, um authentifizierte anfragen zu senden holen sie sich ihre parse schlüssel öffnen sie im back4app dashboard die app einstellungen oder den sicherheits & schlüssel bereich, um ihre anwendungs id , rest api schlüssel , und graphql endpunkt zu finden (normalerweise https //parseapi back4app com/graphql ) notieren sie ihren rest api schlüssel sie werden ihn in ihren react native fetch oder axios header einfügen, um jede anfrage zu authentifizieren dieser schritt stellt sicher, dass ihre mobilen anwendungen sicher mit back4app kommunizieren können schritt 2 – einrichten der datenbank back4app bietet eine vielzahl von backend optionen für react native apps, einschließlich robuster datenverwaltungsfunktionen sie können klassen erstellen, felder hinzufügen und beziehungen über das dashboard definieren egal, ob sie echtzeitanwendungen oder einfachere crud apps erstellen, das back4app dashboard hilft ihnen, daten einfach zu speichern und zu organisieren erstellen eines datenmodells navigieren sie zum abschnitt „datenbank“ in ihrem back4app dashboard erstellen sie eine neue klasse (z b „todo“) und fügen sie relevante spalten wie titel (string) und iscompleted (boolean) hinzu back4app unterstützt verschiedene datentypen string , zahl , boolean , objekt , datum , datei , zeiger , array , beziehung , geopoint , und polygon sie können auch parse erlauben, felder automatisch zu erstellen, wenn sie neue daten senden erstellen eines datenmodells mit ai agent wenn sie möchten, können sie den back4app ai agenten verwenden öffnen sie den ki agenten von ihrem app dashboard beschreiben sie ihr datenmodell in einfacher sprache (z b „erstellen sie eine todo klasse mit einem titel und einem iscompleted feld “) lassen sie den ki agenten das schema erstellen für sie dies kann zeit in den frühen phasen ihres react native projekts sparen daten lesen und schreiben mit rest api für die typische react native entwicklung können sie die native fetch api oder eine drittanbieterbibliothek wie axios verwenden, um rest apis zu verwalten unten finden sie ein beispiel mit curl, das sie für fetch post (todo erstellen) curl x post \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"title" "buy groceries", "iscompleted" false}' \\ https //parseapi back4app com/classes/todo get (todos abrufen) curl x get \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ https //parseapi back4app com/classes/todo in ihrer react native app können sie dasselbe mit fetch async function gettodos() { try { const response = await fetch('https //parseapi back4app com/classes/todo', { method 'get', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json', }, }); const data = await response json(); console log('fetched todos ', data results); return data results; } catch (error) { console error('error fetching todos ', error); } } daten lesen und schreiben mit der graphql api wenn sie graphql bevorzugen, bietet back4app einen graphql endpunkt unten finden sie ein beispiel für eine mutation, um einen neuen datensatz zu erstellen mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } sie können graphql abfragen mit einer bibliothek wie apollo client oder sogar einem einfachen fetch aufruf ausführen async function createtodographql() { const query = ` mutation { createtodo(input { fields { title "study react native" iscompleted false } }) { todo { objectid title } } } `; try { const response = await fetch('https //parseapi back4app com/graphql', { method 'post', headers { 'x parse application id' 'your application id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json', }, body json stringify({ query }), }); const result = await response json(); console log('graphql response ', result); } catch (error) { console error('error creating todo with graphql ', error); } } arbeiten mit live abfragen (optional) für echtzeitdaten bietet back4app live abfragen, obwohl dies normalerweise das parse sdk erfordert da wir uns in diesem tutorial auf rest aufrufe konzentrieren, können sie live abfragen in den servereinstellungen ihrer app aktivieren, wenn sie planen, sie später zu verwenden echtzeitdaten können ihnen helfen, benutzer in einer react native app sofort auf dem laufenden zu halten für einen einfacheren ansatz könnten sie den server in ihren eigenen intervallen abfragen oder auf drittanbieter tools zurückgreifen schritt 3 – anwendung von sicherheit mit acls und clps kurze übersicht back4app sichert ihr backend mit acls (zugriffskontrolllisten) und clps (klassenebene berechtigungen) diese ermöglichen es ihnen, daten sowohl auf objekt als auch auf klassenebene zu schützen sie sind entscheidend für die implementierung sicherer benutzerberechtigungen in der entwicklung mobiler apps in produktionsqualität schritt für schritt klassenebene berechtigungen (clps) gehen sie zum abschnitt datenbank ihrer app, öffnen sie eine beliebige klasse und wechseln sie zu „sicherheit & berechtigungen “ passen sie die lese /schreibberechtigungen für verschiedene benutzerrollen oder den öffentlichen zugriff an acls sie können die zugriffskontrolle pro objekt anwenden, indem sie acl felder in ihren rest anfragen einfügen zum beispiel für weitere details, schauen sie sich die app sicherheitsrichtlinien https //www back4app com/docs/security/parse security an schritt 4 – schreiben von cloud code funktionen warum cloud code cloud code ermöglicht es ihnen, serverseitige skripte auf back4app für aufgaben wie validierungen, trigger und die verarbeitung externer api aufrufe auszuführen es hilft ihnen, logik zu steuern, die vor dem client verborgen bleiben sollte, und bietet eine bessere sicherheit für ihr react native projekt beispiel funktion unten finden sie ein beispiel, das sie in ihrer main js auf der serverseite schreiben würden sie können es von ihrer react native app über rest aufrufen // main js parse cloud define('generategreeting', async (request) => { const { name } = request params; if (!name) { throw 'name parameter is missing!'; } return `hello, ${name}! welcome to our react native app `; }); bereitstellung back4app cli installieren sie die cli, konfigurieren sie ihren kontoschlüssel und führen sie b4a deploy aus dashboard sie können auch zu cloud code > funktionen , fügen sie ihren code in main js , ein und klicken sie auf bereitstellen aufrufen ihrer funktion (über rest) verwenden sie rest apis direkt aus ihrer react native app async function callcloudfunction(name) { try { const response = await fetch('https //parseapi back4app com/functions/generategreeting', { method 'post', headers { 'x parse application id' 'your app id', 'x parse rest api key' 'your rest api key', 'content type' 'application/json', }, body json stringify({ name }), }); const data = await response json(); console log('greeting ', data result); } catch (err) { console error('error calling cloud function ', err); } } diese flexibilität macht sie zu einem effizienteren full stack entwickler, da sie geschäftslogik integrieren können, ohne sensible details auf dem client offenzulegen schritt 5 – konfigurieren der authentifizierung benutzerauthentifizierung aktivieren oder einrichten back4app verwendet die parse user klasse zur verwaltung der benutzerauthentifizierung selbst wenn sie das parse sdk in react native nicht verwenden, können sie sich registrieren, einloggen oder ausloggen, indem sie direkte http anfragen verwenden benutzer registrieren (rest) curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{ "username" "alice", "password" "secretpassword", "email" "alice\@example com" }' \\ https //parseapi back4app com/users einloggen (rest) curl x get \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ g \\ \ data urlencode 'username=alice' \\ \ data urlencode 'password=secretpassword' \\ https //parseapi back4app com/login diese anfragen geben ein sitzungstoken zurück, das sie in ihrer react native app speichern können, um benutzersitzungen zu verwalten dies stellt sicher, dass jede anfrage, die sie stellen, autorisiert werden kann, und schafft mobile erlebnisse, die sicher bleiben soziale anmeldung back4app unterstützt soziale logins (google, facebook, apple) über spezialisierte abläufe sie müssen die dokumentation zu sozialen logins https //www back4app com/docs/platform/sign in with apple befolgen, um oauth apps zu konfigurieren, und dann die entsprechenden tokens an back4app senden schritt 6 – umgang mit dateispeicher einrichten des dateispeichers back4app kann dateien für ihre react native app speichern sie können sie objekten anhängen oder direkt hochladen da wir rest verwenden, finden sie hier ein beispiel für das hochladen einer datei (base64 kodiert) curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type image/png" \\ \ data binary '@path to your file png' \\ https //parseapi back4app com/files/image png die antwort gibt eine url zurück, die sie in ihrer datenbank speichern können von ihrer react native app aus können sie dies mit fetch tun, indem sie die datei als blob oder formulardaten senden sicherheitsüberlegungen um unbefugte uploads zu verhindern, konfigurieren sie die fileupload optionen in ihren parse server einstellungen zum beispiel könnten sie uploads nur von authentifizierten benutzern zulassen dies stellt sicher, dass dienste wie der dateispeicher geschützt bleiben schritt 7 – e mail verifizierung und passwortzurücksetzung übersicht die bestätigung des e mail besitzes ist entscheidend für die implementierung sicherer benutzerabläufe back4app bietet integrierte tools für die e mail verifizierung und passwortzurücksetzungen back4app dashboard konfiguration öffnen sie ihre app einstellungen aktivieren sie die e mail verifizierung unter den e mail einstellungen passen sie die vorlagen an für passwortzurücksetzungen und verifizierungsnachrichten code/implementierung ein benutzer, der sein passwort vergessen hat, kann eine zurücksetzanforderung auslösen curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"email" "alice\@example com"}' \\ https //parseapi back4app com/requestpasswordreset back4app sendet eine e mail zur passwortzurücksetzung an den benutzer dieser komfort erspart ihnen die einrichtung separater mail server in ihrer react native app schritt 8 – aufgaben mit cloud jobs planen was cloud jobs tun cloud jobs helfen ihnen, wiederkehrende aufgaben wie datenbereinigung oder das versenden täglicher berichte zu automatisieren unten finden sie ein beispiel für einen job in main js // 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); } }); stellen sie diesen code bereit, und gehen sie dann zu servereinstellungen > hintergrundjobs um ihn zu planen dies hält ihre daten auf ihren ios und android plattformen ohne manuelles eingreifen aktuell schritt 9 – integration von webhooks definition webhooks ermöglichen es ihrem backend, externe dienste zu benachrichtigen, wann immer ein ereignis eintritt zum beispiel könnten sie slack oder ein zahlungs gateway benachrichtigen, wenn ein neues todo erstellt wird konfiguration gehen sie zu mehr > webhooks in ihrem back4app dashboard fügen sie einen neuen webhook hinzu der auf einen gewünschten externen endpunkt zeigt setzen sie trigger, um zu definieren, wann änderungen an den daten ihrer react native app den webhook auslösen sollten sie können webhooks auch innerhalb von cloud code triggern codieren, die es ihnen ermöglichen, http anfragen zu senden oder mit drittanbieter apis zu integrieren dies erweitert die fähigkeiten ihres backends auf eine vielzahl externer dienste schritt 10 – erkundung des back4app admin panels wo man es findet das back4app admin panel ist eine benutzerfreundliche oberfläche für nicht technische personen zur verwaltung von daten es ist besonders nützlich für produktinhaber, kundenvertreter oder supportmitarbeiter, die direkten zugang zu ihrem datenmodell benötigen funktionen admin app aktivieren in ihrem app dashboard > mehr > admin app einen admin benutzer erstellen (benutzername/passwort) wählen sie eine subdomain für schnellen, codefreien datenbankzugriff sobald sie angemeldet sind, können ihre benutzer oder ihr team datensätze anzeigen, bearbeiten oder löschen, ohne code schreiben zu müssen dieser ansatz unterstützt eine schnellere datenverwaltung und zusammenarbeit fazit in diesem leitfaden haben sie gelernt wie man ein backend für react native anwendungen mit back4app erstellt dazu gehörte ein sicheres backend zu erstellen und plattformübergreifende kompatibilität für ihre react native app zu implementieren datenmanagement mit rest und graphql apis einzurichten acls und clps zu konfigurieren, um sensible daten zu schützen cloud code für serverseitige logik zu schreiben benutzerauthentifizierung und e mail verifizierung zu handhaben dateispeicherung mit direkten uploads zu verwalten hintergrundaufgaben mit cloud jobs zu planen webhooks zu verwenden, um externe dienste zu integrieren das back4app admin panel zu erkunden, um die datenbankverwaltung zu erleichtern mit diesen tools und funktionen kann ihr react native projekt zu einer zuverlässigen und skalierbaren full stack lösung wachsen sie sind jetzt in der lage, echtzeitdaten, benutzersicherheit und andere wichtige aspekte mobiler anwendungen zu handhaben erkunden sie weiterhin die back4app dokumentation https //www back4app com/docs/ um ihre fähigkeiten zu verfeinern und leistungsstarke mobile erlebnisse auf ios und android plattformen zu schaffen nächste schritte härten sie ihre react native app mit fortschrittlicher sicherheit und rollenbasierter zugriffskontrolle experimentieren sie mit echtzeit updates mithilfe von live abfragen für echtzeitanwendungen (falls erforderlich) integrieren sie externe apis und dienste, einschließlich zahlungs gateways oder sozialer logins verbessern sie die leistung durch caching oder optimierung von cloud funktionen tauchen sie tiefer ein in die offiziellen dokumente von back4app https //www back4app com/docs/ um zusätzliche funktionen freizuschalten