Schnellstarter

Wie man ein Backend für jQuery erstellt?

39min

Einführung

In diesem Tutorial lernen Sie wie man ein Backend für jQuery mit Back4app erstellt.

Wir werden die wesentlichen Funktionen von Back4app integrieren—Datenbankverwaltung, Cloud Code, REST- und GraphQL-APIs, Benutzerauthentifizierung und Echtzeitanfragen—um ein sicheres und skalierbares Backend zu erstellen.

Dieses Backend wird über AJAX-Aufrufe und andere gängige jQuery-Methoden mit Ihrem jQuery-basierten Frontend kommunizieren.

Die intuitive Umgebung von Back4app reduziert die Zeit, die benötigt wird, um Server oder Datenbanken einzurichten.

Durch das Befolgen einiger einfacher Schritte werden Sie praktische Erfahrungen mit ACLs, Klassenberechtigungen, Datenmodellierung, Datei-Uploads und mehr sammeln.

Am Ende dieses Tutorials werden Sie eine solide Grundlage für eine voll funktionsfähige jQuery-basierte App haben, die mit einem Back4app-Backend verbunden ist.

Sie werden bereit sein, benutzerdefinierte Logik hinzuzufügen, externe APIs zu integrieren und Ihre Daten mit feingranularer Kontrolle zu sichern.

Voraussetzungen

Um dieses Tutorial abzuschließen, benötigen Sie:

  • Ein Back4app-Konto und ein neues Back4app-Projekt Erste Schritte mit Back4app. Wenn Sie kein Konto haben, können Sie eines kostenlos erstellen. Folgen Sie der obigen Anleitung, um Ihr Projekt vorzubereiten.
  • Grundlegende jQuery-Umgebung Sie können jQuery von der offiziellen Website herunterladen.
  • Node.js (Version 14 oder höher) installiert (Optional) Während Node.js für jQuery im Browser nicht unbedingt erforderlich ist, benötigen Sie es möglicherweise, um lokale Testserver auszuführen oder npm-Pakete zu installieren, wenn Sie lokale Tests durchführen möchten. Node.js installieren
  • Vertrautheit mit JavaScript und den Grundlagen von jQuery Offizielle jQuery-Dokumentation.

Stellen Sie sicher, dass Sie alle diese Voraussetzungen erfüllt haben, bevor Sie beginnen, damit Sie beim Erstellen Ihres jQuery-basierten Frontends und der Verbindung zu Back4app reibungslos folgen können.

Schritt 1 – Einrichten des Back4app-Projekts

Ein neues Projekt erstellen

Um Ihr jQuery-Backend-Projekt zu beginnen, erstellen Sie ein neues Back4app-Projekt:

  1. Melden Sie sich bei Ihrem Back4app-Konto an.
  2. Klicken Sie auf die Schaltfläche „Neue App“ in Ihrem Back4app-Dashboard.
  3. Geben Sie Ihrer App einen Namen (z. B. „jQuery-Backend-Tutorial“).
Document image


Wenn das Projekt erstellt wird, sehen Sie es in Ihrem Back4app-Dashboard. Dies wird die Grundlage Ihrer Backend-Konfigurationen für jQuery sein.

Verbinden Sie das Parse SDK

Back4app verwendet die Parse-Plattform für Daten und Echtzeitfunktionen. Wenn Sie das Parse SDK direkt mit jQuery verwenden möchten, können Sie es als Skript in Ihr HTML laden.

Rufen Sie Ihre Parse-Schlüssel ab: Im Back4app-Dashboard öffnen Sie die „App-Einstellungen“ oder „Sicherheit & Schlüssel“ Ihrer App, um Folgendes zu finden:

  • Anwendungs-ID
  • JavaScript-Schlüssel
  • Parse-Server-URL (normalerweise https://parseapi.back4app.com)
Document image


Fügen Sie das Parse SDK ein in Ihre HTML-Datei ein:

HTML


In einer jQuery-Umgebung können Sie zuerst jQuery laden, dann Parse, und mit Parse-Objekten in Ihren Skripten interagieren. Diese Verbindung stellt sicher, dass alle Datenaufrufe an Ihr Back4app-Backend über die Parse-Plattform erfolgen.

Schritt 2 – Datenbank einrichten

Daten speichern und abfragen

Nach der Integration des Parse SDK können Sie Daten aus der Back4app-Datenbank speichern und abrufen. Hier ist ein einfaches Beispiel zum Erstellen und Abrufen von „Todo“-Objekten mit jQuery und Parse:

HTML


Sie können auch REST-APIs mit cURL aufrufen:

Bash


Oder verwenden Sie GraphQL:

GraphQL


Schema-Design und Datentypen

Im Back4app-Dashboard:

  1. Gehe zu „Datenbank.“
  2. Erstelle eine neue Klasse (z.B. „Todo“) und füge Spalten wie Titel (String) und isCompleted (Boolean) hinzu.
Neue Klasse erstellen
Neue Klasse erstellen


Du kannst auch Parse automatisch Spalten erstellen lassen, wenn du das erste Mal ein Objekt speicherst.

Spalte erstellen
Spalte erstellen


Verwendung des KI-Agenten

Back4app hat einen KI-Agenten für Datenmodellierung:

  1. Öffne den KI-Agenten im Dashboard oder Menü deiner App.
  2. Beschreibe dein Datenmodell (z.B. „Erstelle eine ToDo-App mit einem Klassenschema.“).
  3. Lass den KI-Agenten das Schema generieren.
Document image


Relationale Daten

Wenn Sie eine Kategorie Klasse haben, die mit vielen Todo Elementen verknüpft ist, können Sie Zeiger oder Beziehungen verwenden:

HTML


Echtzeitabfragen

Für Echtzeit-Updates in Ihrer jQuery-App:

  1. Aktivieren Sie Echtzeitabfragen in Ihrem Back4app-Dashboard unter Servereinstellungen.
  2. Initialisieren Sie ein Echtzeitabonnement:
HTML


Dieses Abonnement benachrichtigt Sie in Echtzeit, wann immer ein „Todo“-Objekt erstellt, aktualisiert oder gelöscht wird.

Schritt 3 – Anwendung von Sicherheit mit ACLs und CLPs

Back4app Sicherheitsmechanismus

ACLs (Zugriffskontrolllisten) und CLPs (Klassenebene Berechtigungen) ermöglichen es Ihnen, zu steuern, wer Daten auf Objekt- oder Klassenebene lesen und schreiben kann.

Document image


Zugriffskontrolllisten (ACLs)

Eine ACL wird auf einzelnen Objekten festgelegt, um den Zugriff zu beschränken:

HTML

ACL bearbeiten
ACL bearbeiten


Klassenebene Berechtigungen (CLPs)

CLPs steuern die Standardberechtigungen für eine gesamte Klasse:

  1. In deinem Back4app Dashboard, öffne den Datenbank Abschnitt.
  2. Wähle deine Klasse (z.B. „Todo“).
  3. Gehe zum Tab für Klassenebene Berechtigungen, um öffentlichen, authentifizierten oder rollenbasierten Zugriff zu konfigurieren.
Document image


Kombiniere ACLs für objektspezifische Sicherheit mit CLPs für umfassendere Einschränkungen. Für mehr Informationen siehe App-Sicherheitsrichtlinien.

Schritt 4 – Schreiben und Bereitstellen von Cloud-Funktionen

Cloud Code führt benutzerdefiniertes JavaScript auf der Serverseite aus, sodass du Geschäftslogik, Datenvalidierungen oder externe API-Aufrufe hinzufügen kannst.

Wie es funktioniert

Sie platzieren Ihren Code in main.js (oder einer ähnlichen Datei), stellen ihn auf Back4app bereit und lassen den Parse Server die Ausführung übernehmen. Sie können auch NPM-Module für komplexere Logik verwenden.

JS


Stellen Sie Ihre Funktion bereit

Bash

  • Über das Dashboard:
    1. Gehen Sie im Dashboard Ihrer App zu Cloud Code > Funktionen.
    2. Kopieren/Einfügen der Funktion in main.js.
    3. Klicken Sie auf Bereitstellen.
Document image


Rufen Sie Ihre Funktion auf

Von jQuery aus können Sie eine Cloud-Funktion wie folgt aufrufen:

HTML


Schritt 5 – Benutzer-Authentifizierung konfigurieren

Benutzer-Authentifizierung in Back4app

Back4app verwendet die Parse.User Klasse zur Authentifizierung. Passwort-Hashing, Sitzungstoken und sichere Speicherung werden automatisch behandelt.

Einrichten der Benutzer-Authentifizierung

HTML


Sitzungsverwaltung

Sie können den aktuellen Benutzer abrufen:

Text


Abmelden:

Text


Integration von sozialem Login

Back4app unterstützt Google, Facebook, Apple und andere OAuth-Anbieter. Für mehr Informationen siehe die Dokumentation zum sozialen Login.

Schritt 6 – Umgang mit Dateispeicherung

Hochladen und Abrufen von Dateien

Verwenden Sie Parse.File zum Hochladen:

HTML


Sie können die Datei in einer Klasse speichern, indem Sie sie einem Feld zuweisen:

Text


Abrufen der Datei-URL:

Text


Dateisicherheit

Sie können verwalten, wer Dateien hochladen kann, indem Sie die Einstellungen für den Datei-Upload im Parse Server ändern:

JSON


Schritt 7 – Aufgaben mit Cloud-Jobs planen

Cloud-Jobs

Sie können Routineaufgaben ausführen, wie das Löschen alter Daten:

JS


Gehen Sie im Dashboard zu App-Einstellungen > Servereinstellungen > Hintergrundjobs um es zu planen.

Planung eines Cloud-Jobs
Planung eines Cloud-Jobs


Schritt 8 – Webhooks integrieren

Webhooks ermöglichen es Ihrer App, HTTP-Anfragen an einen externen Dienst zu senden, wann immer bestimmte Ereignisse eintreten:

  1. Gehen Sie zu Mehr > WebHooks in Ihrem Back4app-Dashboard.
  2. Fügen Sie einen neuen Webhook hinzu mit Ihrem externen Endpunkt.
  3. Konfigurieren Sie Trigger für Ereignisse wie „neuer Datensatz in der Todo-Klasse.“
Einen Webhook hinzufügen
Einen Webhook hinzufügen


Sie können Slack oder ein Zahlungs-Gateway wie Stripe integrieren, indem Sie Ereignisdaten über Webhooks senden.

BeforeSave WebHook
BeforeSave WebHook


Schritt 9 – Erkundung des Back4app Admin Panels

Die Back4app Admin App bietet eine nicht-technische, webbasierte Schnittstelle für CRUD-Operationen.

Aktivierung der Admin App

Gehe zu App-Dashboard > Mehr > Admin-App und klicke auf „Admin-App aktivieren“:

Admin-App aktivieren
Admin-App aktivieren


Erstelle einen ersten Admin-Benutzer, der automatisch eine neue Rolle (B4aAdminUser) und Klassen in deinem Schema erstellt:

Document image


Wähle eine Subdomain für den Zugriff auf die Admin-App:

Document image


Einloggen mit deinen neuen Admin-Anmeldeinformationen:

Document image


Sobald aktiviert, ermöglicht diese Admin-App Ihnen, Daten zu verwalten oder Teammitgliedern ohne Programmierung Zugriff zu gewähren.

Fazit

In diesem Leitfaden haben Sie gelernt, wie man ein Backend für jQuery mit Back4app erstellt. Sie:

  • Ein neues Back4app-Projekt als Ihre Backend-Grundlage erstellt.
  • Eine Datenbank eingerichtet, einschließlich Schema-Design und Datenbeziehungen.
  • ACLs und CLPs für feingranulare Sicherheit verwendet.
  • Cloud-Code für benutzerdefinierte serverseitige Logik bereitgestellt.
  • Benutzerauthentifizierung, Dateispeicherung und Echtzeit-Updates konfiguriert.
  • Hintergrundjobs geplant und Webhooks für externe Dienste integriert.
  • Das Back4app Admin-Panel erkundet, um die Datenverwaltung zu vereinfachen.

Sie sind jetzt in der Lage, dieses grundlegende jQuery + Back4app-Setup in eine vollständige Produktionslösung zu erweitern. Fahren Sie fort, fortschrittliche Funktionen wie soziale Anmeldungen oder detailliertere Sicherheitsregeln zu integrieren. Viel Spaß beim Erstellen Ihrer skalierbaren, datengestützten Anwendungen!

Nächste Schritte

  • Produktionsbereit machen: Fügen Sie fortschrittliche rollenbasierte Berechtigungen, Caching-Strategien und Leistungsoptimierung hinzu.
  • Drittanbieter-APIs integrieren: Für Zahlungen, Messaging oder Analytik.
  • Back4app-Dokumentation erkunden: Tauchen Sie tiefer in fortschrittliche Sicherheit, Protokolle oder Analytik ein.
  • Echte Anwendungen erstellen: Nutzen Sie die Einfachheit von jQuery in Kombination mit den leistungsstarken Backend-Diensten von Back4app.