Wie man ein Backend für NativeScript erstellt?

einführung in diesem tutorial lernen sie wie man ein backend für nativescript erstellt mit back4app, einer open source plattform, die die backend entwicklung für mobile apps vereinfacht wir werden die integration wesentlicher back4app funktionen durchgehen – wie datenbankverwaltung, cloud code funktionen, rest und graphql api endpunkte, benutzerauthentifizierung und echtzeitanfragen (live queries) – um ein sicheres und skalierbares backend für ihre nativescript apps zu erstellen sie werden auch entdecken, wie back4app die einrichtungszeit im vergleich zu manuellen server und datenbankkonfigurationen drastisch reduziert wir werden fortschrittliche sicherheitsmechanismen, das planen von aufgaben mit cloud jobs und die verwendung von webhooks zur verbindung mit drittanbieterdiensten erkunden am ende dieses leitfadens haben sie ein flexibles backend, das die vorteile von nativescript core nutzt, das die plattformübergreifenden mobilen lösungen von nativescript antreibt mit dieser grundlage sind sie bereit, ihre eigene benutzerdefinierte logik oder externe apis nach bedarf zu integrieren dies wird ein großer schritt in richtung der entwicklung produktionsbereiter nativescript apps sein 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 befolgen sie den obigen leitfaden, um ihr projekt vorzubereiten grundlegende nativescript entwicklungsumgebung sie können dies mit der nativescript cli oder einem anderen bevorzugten workflow einrichten nativescript erste schritte anleitung https //docs nativescript org/environment setup node js (version 14 oder höher) installiert sie benötigen node js, um npm pakete zu installieren und die nativescript cli auszuführen node js installieren https //nodejs org/en/download/ vertrautheit mit javascript und nativescript core offizielle dokumentation von nativescript https //docs nativescript org/ wenn sie neu bei nativescript sind, lesen sie die offiziellen dokumente oder ein tutorial für anfänger, bevor sie beginnen stellen sie sicher, dass sie alle diese voraussetzungen erfüllt haben, bevor sie beginnen ihr back4app projekt eingerichtet und ihre lokale nativescript umgebung bereit zu haben, wird ihnen helfen, leichter mitzukommen schritt 1 – einrichten des back4app projekts ein neues projekt erstellen der erste schritt beim erstellen ihres nativescript backends auf back4app besteht darin, ein neues projekt zu erstellen wenn sie dies noch nicht getan haben, folgen sie diesen schritten 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 „nativescript backend tutorial“) nachdem sie das projekt erstellt haben, wird es in ihrem back4app dashboard aufgeführt dieses projekt dient als grundlage für alle backend konfigurationen, die in diesem tutorial behandelt werden verbinden sie das parse sdk back4app verwendet die parse plattform, um ihre daten, echtzeitfunktionen, benutzerauthentifizierung und mehr zu verwalten um ihre nativescript app mit back4app zu verbinden, installieren sie das parse npm paket und initialisieren sie es mit den anmeldeinformationen, die sie von ihrem back4app dashboard erhalten holen sie sich ihre parse schlüssel gehen sie in ihrem back4app dashboard zum abschnitt „app einstellungen“ oder „sicherheit & schlüssel“ ihrer app suchen sie nach ihrer anwendungs id , javascript schlüssel , und parse server url (im format https //parseapi back4app com ) installieren sie das parse sdk npm install parse dann, initialisieren sie parse in einer konfigurationsdatei oder ihrer hauptdatei (z b app js ) zum beispiel könnten sie eine datei namens parseconfig js in einem nativescript basierten projekt erstellen 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 in ihrer nativescript app auf parse zugreifen müssen, importieren sie einfach diese datei durch diesen schritt haben sie eine sichere verbindung zwischen ihrem nativescript frontend und dem back4app backend hergestellt, was die datenoperationen vereinfacht schritt 2 – datenbank einrichten daten speichern und abfragen mit ihrem back4app projekt bereit und dem parse sdk integriert, können sie daten aus ihrer nativescript app speichern und abfragen unten finden sie ein beispiel, das die parse object klasse verwendet, um eine liste von elementen zu speichern und abzurufen // example create a task item import parse from ' /parseconfig'; async function createtaskitem(title, iscompleted) { const task = parse object extend('task'); const task = new task(); task set('title', title); task set('iscompleted', iscompleted); try { const savedtask = await task save(); console log('task saved successfully ', savedtask); return savedtask; } catch (error) { console error('error saving task ', error); } } // example query all task items async function fetchtasks() { const task = parse object extend('task'); const query = new parse query(task); try { const results = await query find(); console log('fetched task items ', results); return results; } catch (error) { console error('error fetching tasks ', error); } } sie können auch die rest api von back4app verwenden, wenn sie direkte http anfragen bevorzugen 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 supplies", "iscompleted" false}' \\ https //parseapi back4app com/classes/task oder verwende graphql mutation { createtask(input { fields { title "clean the house" iscompleted false } }) { task { objectid title iscompleted } } } diese flexibilität macht es bequem, backend funktionen für deine nativescript apps über die parse sdk, rest oder graphql api endpunkte zu erstellen schema design und datentypen standardmäßig kann parse automatisch schema on the fly erstellen, oder du kannst deine klassen und datentypen im back4app dashboard definieren gehe zum abschnitt “datenbank” in deinem back4app dashboard erstelle eine neue klasse (z b “task”) und füge spalten wie titel (string) und iscompleted (boolean) hinzu back4app unterstützt datentypen wie string , number , boolean , object , date , file , pointer , array , relation , geopoint , und polygon du kannst entweder parse diese spalten erstellen lassen, wenn du ein objekt zum ersten mal speicherst, oder sie für mehr kontrolle definieren die verwendung des ai agenten von back4app kann ihnen auch helfen, schemas automatisch zu generieren öffnen sie den ai agenten in ihrem app dashboard beschreiben sie ihr gewünschtes datenmodell (z b „bitte erstellen sie eine neue aufgabenklasse für mobile apps mit den feldern iscompleted und duedate “) lassen sie den agenten das schema automatisch erstellen relationale daten wenn sie relationale daten möchten—wie ein kategorie objekt, das auf mehrere aufgaben verweist—verwenden sie zeiger oder beziehungen in parse // linking a task to a category with a pointer async function createtaskforcategory(categoryobjectid, title) { const task = new parse object('task'); const categorypointer = new parse object('category'); categorypointer id = categoryobjectid; task set('title', title); task set('category', categorypointer); try { return await task save(); } catch (err) { console error('error creating task with category relationship ', err); } } // including the pointer data in a query const query = new parse query('task'); query include('category'); const taskswithcategory = await query find(); dieser ansatz hilft ihnen, vollständige daten für eine aufgabe und ihre zugehörige kategorie in einer einzigen abfrage abzurufen echtzeitabfragen für echtzeit updates aktivieren sie echtzeitabfragen unter servereinstellungen im back4app dashboard nativescript entwickler können änderungen in einer bestimmten klasse abonnieren aktualisieren sie ihre parse konfiguration, um eine url für den echtzeitabfrageserver einzuschließen 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'; parse livequeryserverurl = 'wss\ //your subdomain here b4a io'; export default parse; und dann abonnieren sie echtzeitereignisse import parse from ' /parseconfig'; async function subscribetotasks(callback) { const query = new parse query('task'); const subscription = await query subscribe(); subscription on('create', (newtask) => { console log('new task created ', newtask); callback('create', newtask); }); subscription on('update', (updatedtask) => { console log('task updated ', updatedtask); callback('update', updatedtask); }); subscription on('delete', (deletedtask) => { console log('task deleted ', deletedtask); callback('delete', deletedtask); }); return subscription; } dieses abonnement aktualisiert automatisch ihre benutzeroberfläche, wann immer eine task hinzugefügt, geändert oder entfernt wird – perfekt für live zusammenarbeit in nativescript apps schritt 3 – anwendung von sicherheit mit acls und clps back4app sicherheitsmechanismus back4app integriert zugriffskontrolllisten (acls) und klassenebene berechtigungen (clps) zum schutz ihrer daten diese sicherheitsmodelle ermöglichen es ihnen, den lese /schreibzugriff sowohl auf klassen als auch auf objektebene zu steuern zugriffskontrolllisten (acls) eine acl legt berechtigungen für jedes objekt fest zum beispiel, um nur dem eigentümer lese und schreibzugriff zu gewähren async function createprivatetask(title, owneruser) { const task = parse object extend('task'); const task = new task(); task set('title', title); const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); task setacl(acl); try { return await task save(); } catch (err) { console error('error saving private task ', err); } } dies stellt sicher, dass nur der angegebene benutzer das objekt ändern oder lesen kann klassenebene berechtigungen (clps) clps legen die standardberechtigungen für eine gesamte klasse fest öffnen sie die datenbank in back4app und wählen sie die relevante klasse aus zugriff auf die klassenebene berechtigungen registerkarte passen sie die berechtigungen für die öffentlichkeit, authentifizierte benutzer oder spezifische rollen nach bedarf an die kombination von acls und clps bietet ein starkes sicherheitsmodell für nativescript apps für weitere informationen siehe app sicherheitsrichtlinien https //www back4app com/docs/security/parse security schritt 4 – schreiben und bereitstellen von cloud funktionen cloud code ermöglicht es ihnen, benutzerdefinierten javascript code auf der serverseite auszuführen, sodass sie die infrastruktur nicht selbst warten müssen dies ist ideal, um erweiterte logik oder serverseitige integrationen in ihrem nativescript backend hinzuzufügen wie es funktioniert sie platzieren typischerweise ihren cloud code (javascript funktionen, trigger und alle erforderlichen npm module) in einer main js datei dann stellen sie es bei back4app bereit, und es läuft in der parse server umgebung ohne zusätzliche serverkonfiguration beispiel für die struktur von main js const axios = require('axios'); parse cloud define('fetchexternaldata', async (request) => { const url = request params url; if (!url) { throw new error('url parameter is required'); } const response = await axios get(url); return response data; }); parse cloud beforesave('task', (request) => { const task = request object; if (!task get('title')) { throw new error('task must have a title'); } }); sie können npm pakete wie axios für http anfragen installieren und verwenden dieser ansatz ermöglicht eine vielzahl von integrationen, von zahlungs gateways bis hin zu externen apis, alles hinter der sicherheit ihrer back4app app typische anwendungsfälle geschäftslogik automatische berechnungen, datenumwandlungen oder statusaktualisierungen datenvalidierungen sicherstellen, dass erforderliche felder vor dem speichern vorhanden sind trigger code ausführen, wenn daten erstellt, aktualisiert oder gelöscht werden integrationen verbindung zu externen diensten für zahlungen, analysen oder messaging sicherheitsdurchsetzung eingehende daten oder benutzerrollen validieren, bevor sie fortfahren ihre funktion bereitstellen hier ist eine einfache funktion, die die textlänge berechnet 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 über https //www back4app com/docs/local development/parse cli installieren sie die cli curl https //raw\ githubusercontent com/back4app/parse cli/back4app/installer sh | sudo /bin/bash für windows laden sie die b4a exe https //github com/back4app/parse cli/releases/download/release 3 3 1/b4a exe datei von der release seite https //github com/back4app/parse cli/releases herunter konfigurieren sie ihren kontoschlüssel b4a configure accountkey bereitstellen sie ihren cloud code b4a deploy bereitstellung über das dashboard gehe zu cloud code > funktionen in deinem dashboard füge deinen funktionscode in main js ein klicke auf bereitstellen rufe deine funktion auf von deiner nativescript app aus mit dem 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); } } du kannst es auch mit rest oder graphql aufrufen 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 '{"text" "hello back4app"}' \\ https //parseapi back4app com/functions/calculatetextlength mutation { calculatetextlength(input { text "hello graphql" }) { result } } dies gibt dir eine flexible möglichkeit, serverseitige logik in deine auf nativescript basierenden mobilen apps zu integrieren schritt 5 – konfiguration der benutzerauthentifizierung benutzerauthentifizierung in back4app back4app verwendet die parse user klasse zur handhabung der authentifizierung, die passwort hashing, sitzungstoken und mehr umfasst dies beseitigt einen großteil der komplexität, die mit der verwaltung von benutzerkonten verbunden ist einrichten der benutzerauthentifizierung in ihrer nativescript app können sie einen neuen benutzer erstellen import parse from ' /parseconfig'; 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); } } 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); } } ein rest beispiel könnte so aussehen 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=secret123' \\ https //parseapi back4app com/login sitzungsverwaltung nach dem einloggen weist parse dem benutzer ein sitzungstoken zu um den aktuell eingeloggenen benutzer zu überprüfen const currentuser = parse user current(); if (currentuser) { console log('logged in user ', currentuser getusername()); } else { console log('no user is logged in'); } const currentuser = parse user current(); if (currentuser) { console log('logged in user ', currentuser getusername()); } else { console log('no user is logged in'); } const currentuser = parse user current(); if (currentuser) { console log('logged in user ', currentuser getusername()); } else { console log('no user is logged in'); } const currentuser = parse user current(); if (currentuser) { console log('logged in user ', currentuser getusername()); } else { console log('no user is logged in'); } const currentuser = parse user current(); if (currentuser) { console log('logged in user ', currentuser getusername()); } else { console log('no user is logged in'); } const currentuser = parse user current(); if (currentuser) { console log('logged in user ', currentuser getusername()); } else { console log('no user is logged in'); } const currentuser = parse user current(); if (currentuser) { console log('logged in user ', currentuser getusername()); } else { console log('no user is logged in'); } const currentuser = parse user current(); if (currentuser) { console log('logged in user ', currentuser getusername()); } else { console log('no user is logged in'); } const currentuser = parse user current(); if (currentuser) { console log('logged in user ', currentuser getusername()); } else { console log('no user is logged in'); } const currentuser = parse user current(); if (currentuser) { console log('logged in user ', currentuser getusername()); } else { console log('no user is logged in'); } das abmelden ist einfach await parse user logout(); integration von sozialem login parse integriert sich auch mit oauth anbietern wie google oder facebook die einrichtung variiert je nach anbieter, siehe anmelden mit apple und anderen https //www back4app com/docs/platform/sign in with apple für details zum beispiel mit facebook const facebooklogin = async () => { try { const user = await parse facebookutils login('email'); console log(user existed() ? 'user logged in' 'user signed up and logged in'); } catch (error) { console error('error logging in with facebook ', error); } }; e mail verifizierung und passwortzurücksetzung aktivieren sie diese funktionen in ihrem back4app dashboard navigieren sie zu den e mail einstellungen in ihrer back4app app e mail verifizierung aktivieren und passwortzurücksetzung aktivieren konfigurieren sie ihre e mail vorlagen und die „von“ adresse schritt 6 – umgang mit dateispeicher hochladen und abrufen von dateien back4app unterstützt die dateiverwaltung über die parse file klasse in nativescript können sie bilder oder dokumente ähnlich hochladen import parse from ' /parseconfig'; 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); } } async function createphotoobject(file) { const photo = parse object extend('photo'); const photo = new photo(); const parsefile = new parse file(file name, file); photo set('imagefile', parsefile); return await photo save(); } sie können die url der datei aus dem gespeicherten objekt abrufen const imagefile = photo get('imagefile'); const imageurl = imagefile url(); // use imageurl in your nativescript ui components dateisicherheit parse server ermöglicht es ihnen, die sicherheit beim hochladen von dateien zu konfigurieren { "fileupload" { "enableforpublic" true, "enableforanonymoususer" true, "enableforauthenticateduser" true } } dies stellt sicher, dass sie datei uploads basierend auf ihren sicherheitspräferenzen einschränken oder zulassen können schritt 7 – aufgaben mit cloud jobs planen cloud jobs cloud jobs helfen ihnen, routineaufgaben zu automatisieren, wie das entfernen veralteter datensätze oder das senden von benachrichtigungen zum beispiel // main js parse cloud job('cleanupoldtasks', async (request) => { const task = parse object extend('task'); const query = new parse query(task); 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 oldtasks = await query find({ usemasterkey true }); await parse object destroyall(oldtasks, { usemasterkey true }); return `deleted ${oldtasks length} old tasks `; } catch (err) { throw new error('cleanup error ' + err message); } }); bereitstellen dieses jobs über die cli oder das dashboard im back4app dashboard > servereinstellungen > hintergrundjobs , planen sie es, täglich oder in einem von ihnen gewählten intervall auszuführen schritt 8 – integration von webhooks webhooks ermöglichen es ihnen, http anfragen an externe dienste zu senden, wenn bestimmte ereignisse in ihrer app auftreten – wie neue datensätze oder benutzeranmeldungen dies kann verwendet werden, um mit slack, zahlungs gateways oder analyseplattformen zu integrieren gehen sie zur webhook konfiguration in ihrem back4app dashboard und wählen sie webhook hinzufügen fügen sie ihre endpunkt url hinzu (z b https //your service com/webhook ) konfigurieren sie trigger für bestimmte klassen oder ereignisse sie können auch webhooks im cloud code definieren oder externe apis direkt in triggern wie beforesave oder aftersave aufrufen schritt 9 – erkundung des back4app admin panels die back4app admin app ist eine modellzentrierte, benutzerfreundliche schnittstelle für das datenmanagement sie hilft teams oder nicht technischen benutzern, crud operationen durchzuführen, benutzerdefinierte dashboards zu erstellen und unternehmensweite aufgaben ohne programmierung zu verwalten aktivierung der admin app in ihrem app dashboard , klicken sie auf mehr > admin app admin app aktivieren erstellen sie einen ersten admin benutzer (benutzername/passwort) diese einrichtung fügt die b4aadminuser rolle und die zugehörigen klassen ( b4asetting , b4amenuitem , usw ) zu ihrem schema hinzu wählen sie eine subdomain und melden sie sich dann mit ihren neuen admin anmeldeinformationen an dieses portal ermöglicht eine schnelle datenmanipulation, ohne die grafische benutzeroberfläche zu verlassen – eine großartige lösung für die zusammenarbeit mit teammitgliedern, die möglicherweise nicht mit programmierung vertraut sind fazit indem sie diesem leitfaden folgen, haben sie gelernt wie man ein backend für nativescript erstellt mit back4app und ein sicheres backend erstellt für ihre nativescript apps eine datenbank konfiguriert mit klassen, schemata und beziehungen echtzeitabfragen implementiert für live updates ihre daten gesichert mit acls und clps die funktionalität mit cloud code erweitert die authentifizierung eingerichtet für benutzeranmeldung, login und sitzungstoken datei uploads verwaltet und abruf über parse file cloud jobs geplant für automatisierte, regelmäßige aufgaben webhooks erstellt für integrationen von drittanbietern das back4app admin panel verwendet für codefreie datenverwaltung diese schritte bilden eine robuste grundlage für den aufbau von open source, plattformübergreifenden mobilen apps mit nativescript core setzen sie die erkundung fort, integrieren sie erweiterte funktionen, fügen sie weitere api endpunkte hinzu oder integrieren sie ihre eigene benutzerdefinierte logik, um das backend genau auf die bedürfnisse ihrer app abzustimmen nächste schritte skalieren sie ihre nativescript apps durch optimierung der leistung, caching und sicherheitsregeln erforschen sie das erweiterte benutzermanagement wie rollenbasierte berechtigungen sehen sie sich die offizielle back4app dokumentation an für umfassende anleitungen zu sicherheit, protokollen und leistung experimentieren sie mit realen integrationen wie zahlungen oder analysetools viel spaß beim programmieren und genießen sie den optimierten entwicklungsworkflow, den back4app bietet!