Schnellstarter
Wie man ein Backend für Remix aufbaut?

52min
Einführung
In diesem Tutorial lernen Sie, wie Sie ein vollständiges Backend für eine Remix-Anwendung mit Back4app erstellen.
Wir werden die Integration wesentlicher Back4app-Funktionen durchgehen - wie z.B. Datenbankverwaltung, Cloud-Code-Funktionen, REST- und GraphQL-APIs, Benutzerauthentifizierung und Echtzeitanfragen (Live Queries) - um ein sicheres, skalierbares und robustes Backend zu erstellen, das nahtlos mit Ihrem Remix-Frontend kommuniziert.
Sie werden auch sehen, wie die schnelle Einrichtung und die intuitive Umgebung von Back4app die Zeit und den Aufwand im Vergleich zur manuellen Konfiguration von Servern und Datenbanken drastisch reduzieren können.
Unterwegs werden Sie praktische Erfahrungen mit wichtigen Funktionen sammeln, einschließlich fortschrittlicher Sicherheitsfunktionen, der Planung von Aufgaben mit Cloud-Jobs und der Einrichtung von Webhooks für externe Integrationen.
Am Ende dieses Tutorials sind Sie gut vorbereitet, um dieses grundlegende Setup in eine produktionsbereite Anwendung zu erweitern oder bei Bedarf benutzerdefinierte Logik und Drittanbieter-APIs einfach zu integrieren.
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. Befolgen Sie die obige Anleitung, um Ihr Projekt vorzubereiten.
Grundlegende Remix-Entwicklungsumgebung
Sie können dies mit npx create-remix@latest oder einem ähnlichen Tool einrichten. Stellen Sie sicher, dass Node.js auf Ihrem Computer installiert ist.
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﻿
Vertrautheit mit JavaScript und grundlegenden Remix-Konzepten
 Offizielle Remix-Dokumentation.
Wenn Sie neu bei Remix 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 Remix-Umgebung bereit zu haben, wird Ihnen helfen, leichter folgen zu können.
Schritt 1 – Einrichten des Back4app-Projekts
Ein neues Projekt erstellen
Der erste Schritt beim Erstellen Ihres Remix-Backends auf Back4app besteht darin, ein neues Projekt zu erstellen. Wenn Sie noch keines erstellt 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. „Remix-Backend-Tutorial“).
﻿
Sobald das Projekt erstellt ist, sehen Sie es in Ihrem Back4app-Dashboard aufgelistet. Dieses Projekt wird die Grundlage für alle Backend-Konfigurationen sein, die in diesem Tutorial besprochen werden.
Verbinden Sie das Parse SDK
Back4app basiert auf der Parse-Plattform, um Ihre Daten zu verwalten, Echtzeitfunktionen bereitzustellen, die Benutzerauthentifizierung zu handhaben und mehr. Die Verbindung Ihrer Remix-Anwendung mit Back4app umfasst die Installation des parse npm-Pakets und die Initialisierung mit den Anmeldeinformationen aus Ihrem Back4app-Dashboard.
Rufen Sie Ihre Parse-Schlüssel ab:
Navigieren Sie in Ihrem Back4app-Dashboard zum Abschnitt „App-Einstellungen“ oder „Sicherheit & Schlüssel“ Ihrer App, um Ihre Anwendungs-ID und JavaScript-Schlüssel. Sie finden auch die Parse-Server-URL (oft im Format https://parseapi.back4app.com).
﻿
Installieren Sie das Parse SDK in Ihrem Remix-Projekt:
Bash
npm install parse
npm install parse
﻿
Wenn Sie Yarn verwenden, können Sie es mit folgendem Befehl installieren:
Bash
yarn add parse
yarn add parse
﻿
Initialisieren Sie Parse in Ihrer Remix-Anwendung:
Typischerweise würden Sie eine Datei erstellen (z. B. app/utils/parseConfig.js) in Ihrer Remix-Anwendungsstruktur:
app/utils/parseConfig.js
// app/utils/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;
// app/utils/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;
﻿
Diese Datei stellt sicher, dass jedes Mal, wenn Sie Parse an anderer Stelle in Ihrer Remix-App importieren, es vorkonfiguriert ist, um sich mit Ihrer spezifischen Back4app-Instanz zu verbinden. Zum Beispiel könnten Sie es in Ihren Loaders, Aktionen oder serverseitigen Routen innerhalb von Remix importieren.
Durch das Abschließen dieses Schrittes haben Sie eine sichere Verbindung zwischen Ihrem Remix-Frontend/Server-Code und dem Back4app-Backend hergestellt. Alle Anfragen und Datenübertragungen werden sicher über dieses SDK geleitet, wodurch die Komplexität manueller REST- oder GraphQL-Aufrufe verringert wird (obwohl Sie sie bei Bedarf weiterhin verwenden können).
Schritt 2 – Datenbank einrichten
Daten speichern und abfragen
Mit Ihrem Back4app-Projekt, das eingerichtet und das Parse SDK in Ihre Remix-App integriert ist, können Sie jetzt mit dem Speichern und Abrufen von Daten beginnen. Der einfachste Weg, einen Datensatz zu erstellen, besteht darin, die Parse.Object-Klasse zu verwenden:
JS
// Example: Create a Todo item

import Parse from '~/utils/parseConfig';

export 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);
  }
}

// Example: Query all Todo items
export 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);
  }
}
// Example: Create a Todo item

import Parse from '~/utils/parseConfig';

export 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);
  }
}

// Example: Query all Todo items
export 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);
  }
}
﻿
Alternativ können Sie die REST-API-Endpunkte von Back4app verwenden:
Curl
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
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
﻿
Back4app bietet auch eine GraphQL-Schnittstelle an:
GraphQL
mutation {
  createTodo(input: {
    fields: {
      title: "Clean the house"
      isCompleted: false
    }
  }) {
    todo {
      objectId
      title
      isCompleted
    }
  }
}
mutation {
  createTodo(input: {
    fields: {
      title: "Clean the house"
      isCompleted: false
    }
  }) {
    todo {
      objectId
      title
      isCompleted
    }
  }
}
﻿
Diese vielfältigen Optionen ermöglichen es Ihnen, Datenoperationen auf die Weise zu integrieren, die am besten zu Ihrem Entwicklungsprozess passt - sei es über das Parse SDK, REST oder GraphQL.
Schema-Design und Datentypen
Standardmäßig erlaubt Parse Schemaerstellung zur Laufzeit, aber Sie können auch Ihre Klassen und Datentypen im Back4app-Dashboard definieren, um mehr Kontrolle zu haben.
Navigieren Sie zum Abschnitt „Datenbank“ in Ihrem Back4app-Dashboard.
Erstellen Sie eine neue Klasse (z. B. „Todo“) und fügen Sie relevante Spalten hinzu, wie Titel (String) und isCompleted (Boolean). 
Neue Klasse erstellen
﻿
Back4app unterstützt auch verschiedene Datentypen: String, Number, Boolean, Object, Date, File, Pointer, Array, Relation, GeoPoint, und Polygon. Sie können den geeigneten Typ für jedes Feld auswählen. Wenn Sie möchten, können Sie auch Parse automatisch diese Spalten erstellen lassen, wenn Sie ein Objekt aus Ihrer Remix-App zum ersten Mal speichern.
Spalte erstellen
﻿
Back4app bietet einen KI-Agenten, der Ihnen helfen kann, Ihr Datenmodell zu entwerfen:
Öffnen Sie den KI-Agenten in Ihrem App-Dashboard oder im Menü.
Beschreiben Sie Ihr Datenmodell in einfacher Sprache (z.B. „Bitte erstellen Sie eine neue ToDo-App bei back4app mit einem vollständigen Klassenschema.“).
Lassen Sie den KI-Agenten das Schema für Sie erstellen. 
﻿
Die Verwendung des KI-Agenten kann Ihnen Zeit sparen, wenn Sie Ihre Datenarchitektur einrichten, und sorgt für Konsistenz in Ihrer Anwendung.
Relationale Daten
Wenn Sie relationale Daten haben - sagen wir, ein Kategorie-Objekt, das auf mehrere Todo-Elemente verweist - können Sie Zeiger oder Beziehungen in Parse verwenden. Zum Beispiel, um einen Zeiger auf eine Kategorie:
JS
// Linking a Task to a Category with a pointer
import Parse from '~/utils/parseConfig';

export async function createTaskForCategory(categoryObjectId, title) {
  const todo = new Parse.Object('Todo');

  // Construct a pointer to the category
  const categoryPointer = new Parse.Object('Category');
  categoryPointer.id = categoryObjectId;

  // Set fields
  todo.set('title', title);
  todo.set('category', categoryPointer);

  try {
    return await todo.save();
  } catch (err) {
    console.error('Error creating Task with category relationship:', err);
  }
}
// Linking a Task to a Category with a pointer
import Parse from '~/utils/parseConfig';

export async function createTaskForCategory(categoryObjectId, title) {
  const todo = new Parse.Object('Todo');

  // Construct a pointer to the category
  const categoryPointer = new Parse.Object('Category');
  categoryPointer.id = categoryObjectId;

  // Set fields
  todo.set('title', title);
  todo.set('category', categoryPointer);

  try {
    return await todo.save();
  } catch (err) {
    console.error('Error creating Task with category relationship:', err);
  }
}
﻿
Wenn Sie abfragen, können Sie auch Zeiger-Daten einbeziehen:
JS
const query = new Parse.Query('Todo');
query.include('category');
const todosWithCategory = await query.find();
const query = new Parse.Query('Todo');
query.include('category');
const todosWithCategory = await query.find();
﻿
Dieser include('category')-Aufruf ruft die Kategoriedetails zusammen mit jedem Todo ab, wodurch Ihre relationalen Daten nahtlos zugänglich werden.
Echtzeitabfragen
Für Echtzeit-Updates bietet Back4app Echtzeitabfragen. In Ihrer Remix-App können Sie Änderungen in einer bestimmten Klasse abonnieren:
Aktivieren Sie Live-Abfragen in Ihrem Back4app-Dashboard unter den Servereinstellungen. Stellen Sie sicher, dass „Live-Abfragen“ aktiviert ist.
Initialisieren Sie ein Live-Abonnement für Abfragen in Ihrem Code:
app/utils/parseConfig.js
// app/utils/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';

// Live Query's subdomain:
Parse.liveQueryServerURL = 'wss://YOUR_SUBDOMAIN_HERE.b4a.io'; 

export default Parse;
// app/utils/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';

// Live Query's subdomain:
Parse.liveQueryServerURL = 'wss://YOUR_SUBDOMAIN_HERE.b4a.io'; 

export default Parse;
﻿
JS
import Parse from '~/utils/parseConfig';

export async function subscribeToTodos(callback) {
  const query = new Parse.Query('Todo');
  const subscription = await query.subscribe();

  subscription.on('create', (newTodo) => {
    console.log('New Todo created:', newTodo);
    callback('create', newTodo);
  });

  subscription.on('update', (updatedTodo) => {
    console.log('Todo updated:', updatedTodo);
    callback('update', updatedTodo);
  });

  subscription.on('delete', (deletedTodo) => {
    console.log('Todo deleted:', deletedTodo);
    callback('delete', deletedTodo);
  });

  return subscription;
}
import Parse from '~/utils/parseConfig';

export async function subscribeToTodos(callback) {
  const query = new Parse.Query('Todo');
  const subscription = await query.subscribe();

  subscription.on('create', (newTodo) => {
    console.log('New Todo created:', newTodo);
    callback('create', newTodo);
  });

  subscription.on('update', (updatedTodo) => {
    console.log('Todo updated:', updatedTodo);
    callback('update', updatedTodo);
  });

  subscription.on('delete', (deletedTodo) => {
    console.log('Todo deleted:', deletedTodo);
    callback('delete', deletedTodo);
  });

  return subscription;
}
﻿
Durch das Abonnieren erhalten Sie Echtzeitbenachrichtigungen, wann immer ein neues Todo erstellt, aktualisiert oder gelöscht wird. Diese Funktion ist besonders wertvoll für kollaborative oder dynamische Apps, in denen mehrere Benutzer die neuesten Daten sehen müssen, ohne die Seite zu aktualisieren.
Schritt 3 – Anwendung von Sicherheit mit ACLs und CLPs
Back4app Sicherheitsmechanismus
Back4app nimmt Sicherheit ernst, indem es Access Control Lists (ACLs) und Class-Level Permissions (CLPs). Diese Funktionen ermöglichen es Ihnen, einzuschränken, wer Daten auf Objekt- oder Klassenbasis lesen oder schreiben kann, sodass nur autorisierte Benutzer Ihre Daten ändern können.
﻿
Access Control Lists (ACLs)
Ein ACL wird auf einzelne Objekte angewendet, um zu bestimmen, welche Benutzer, Rollen oder die Öffentlichkeit Lese-/Schreiboperationen durchführen können. Zum Beispiel:
JS
import Parse from '~/utils/parseConfig';

export async function createPrivateTodo(title, ownerUser) {
  const Todo = Parse.Object.extend('Todo');
  const todo = new Todo();
  todo.set('title', title);

  // Create an ACL granting read/write access only to the owner
  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);
  }
}
import Parse from '~/utils/parseConfig';

export async function createPrivateTodo(title, ownerUser) {
  const Todo = Parse.Object.extend('Todo');
  const todo = new Todo();
  todo.set('title', title);

  // Create an ACL granting read/write access only to the owner
  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);
  }
}
﻿
Wenn Sie das Objekt speichern, hat es eine ACL, die verhindert, dass jemand außer dem angegebenen Benutzer es liest oder ändert.
ACL bearbeiten
﻿
Klassenebene Berechtigungen (CLPs)
CLPs regeln die Standardberechtigungen einer gesamten Klasse, wie ob die Klasse öffentlich lesbar oder schreibbar ist oder ob nur bestimmte Rollen darauf zugreifen können.
Gehen Sie zu Ihrem Back4app-Dashboard, wählen Sie Ihre App aus und öffnen Sie den Datenbank-Bereich.
Wählen Sie eine Klasse aus (z.B. „Todo“).
Öffnen Sie die Klassenebene Berechtigungen-Registerkarte. 
Konfigurieren Sie Ihre Standardwerte, wie „Erfordert Authentifizierung“ für Lesen oder Schreiben oder „Kein Zugriff“ für die Öffentlichkeit.
﻿
Diese Berechtigungen setzen die Basislinie, während ACLs die Berechtigungen für einzelne Objekte verfeinern. Ein robustes Sicherheitsmodell kombiniert typischerweise sowohl CLPs (breite Einschränkungen) als auch ACLs (fein abgestufte Einschränkungen pro Objekt). Für weitere Informationen gehen Sie zu App-Sicherheitsrichtlinien.﻿
Schritt 4 – Schreiben und Bereitstellen von Cloud-Funktionen
Cloud Code ist eine Funktion der Parse Server-Umgebung, die es Ihnen ermöglicht, benutzerdefinierten JavaScript-Code auf der Serverseite auszuführen - ohne Ihre Server oder Infrastruktur verwalten zu müssen. Durch das Schreiben von Cloud Code können Sie Ihr Back4app-Backend mit zusätzlicher Geschäftslogik, Validierungen, Triggern und Integrationen erweitern, die sicher und effizient auf dem Parse Server ausgeführt werden.
Wie es funktioniert
Wenn Sie Cloud Code schreiben, platzieren Sie typischerweise Ihre JavaScript-Funktionen, Trigger und alle erforderlichen NPM-Module in einer main.js (oder app.js) Datei. Diese Datei wird dann in Ihr Back4app-Projekt bereitgestellt, das innerhalb der Parse Server-Umgebung ausgeführt wird. Da diese Funktionen und Trigger auf dem Server ausgeführt werden, können Sie darauf vertrauen, dass sie vertrauliche Logik verarbeiten, sensible Daten verarbeiten oder nur Backend-API-Aufrufe tätigen - Prozesse, die Sie möglicherweise nicht direkt dem Client aussetzen möchten.
All Cloud Code für Ihre Back4app-App läuft innerhalb des von Back4app verwalteten Parse Servers, sodass Sie sich keine Gedanken über Serverwartung, Skalierung oder Bereitstellung machen müssen. Jedes Mal, wenn Sie Ihre main.js-Datei aktualisieren und bereitstellen, wird der laufende Parse Server mit Ihrem neuesten Code aktualisiert.
main.js Dateistruktur
Eine typische main.js könnte Folgendes enthalten:
Require-Anweisungen für alle benötigten Module (NPM-Pakete, integrierte Node-Module oder andere Cloud-Code-Dateien).
Definitionen von Cloud-Funktionen mit Parse.Cloud.define().
Trigger wie Parse.Cloud.beforeSave(), Parse.Cloud.afterSave(), usw.
NPM-Module die Sie installiert haben (falls erforderlich). Zum Beispiel könnten Sie ein Paket wie axios installieren, um HTTP-Anfragen zu stellen. Sie können es dann oben in Ihrer Datei require (oder importieren).
JS
// main.js

// 1. Import necessary modules and other cloud code files
const axios = require('axios');
const report = require('./reports');

// 2. Define a custom Cloud Function
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;
});

// 3. Example of a beforeSave trigger
Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw new Error('Todo must have a title');
  }
});
// main.js

// 1. Import necessary modules and other cloud code files
const axios = require('axios');
const report = require('./reports');

// 2. Define a custom Cloud Function
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;
});

// 3. Example of a beforeSave trigger
Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw new Error('Todo must have a title');
  }
});
﻿
Mit der Möglichkeit, NPM-Module zu installieren und zu verwenden, wird Cloud Code unglaublich flexibel, sodass Sie mit externen APIs integrieren, Datenumwandlungen durchführen oder komplexe serverseitige Logik ausführen können.
Typische Anwendungsfälle
Geschäftslogik: Zum Beispiel können Sie die Punktzahl eines Benutzers in einem Spiel berechnen, indem Sie mehrere Objektattribute aggregieren und diese Daten dann automatisch speichern.
Datenvalidierungen: Stellen Sie sicher, dass bestimmte Felder vorhanden sind oder dass ein Benutzer über die richtigen Berechtigungen verfügt, bevor Sie einen Datensatz speichern oder löschen.
Trigger: Führen Sie Aktionen aus, wenn sich Daten ändern (z. B. senden Sie eine Benachrichtigung, wenn ein Benutzer sein Profil aktualisiert).
Integrationen: Verbinden Sie sich mit APIs oder Diensten von Drittanbietern. Zum Beispiel könnten Sie direkt von Cloud Code aus mit Zahlungs-Gateways, Slack-Benachrichtigungen oder E-Mail-Marketing-Plattformen integrieren.
Sicherheitsdurchsetzung: Fügen Sie eine zusätzliche Sicherheitsebene hinzu, indem Sie Eingabeparameter in Ihren Cloud Code-Funktionen validieren und bereinigen. Zum Beispiel können Sie sicherstellen, dass eingehende Daten bestimmten Formaten entsprechen, ungültige oder bösartige Eingaben ablehnen und Zugriffsregeln basierend auf Benutzerrollen oder Berechtigungen durchsetzen, bevor Sie sensible Operationen durchführen.
Bereitstellen Ihrer Funktion
Unten finden Sie eine einfache Cloud Code-Funktion, die die Länge eines vom Client gesendeten Textstrings berechnet:
main.js
// main.js

Parse.Cloud.define('calculateTextLength', async (request) => {
  const { text } = request.params;
  if (!text) {
    throw new Error('No text provided');
  }
  return { length: text.length };
});
// 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 die Back4app CLI:
1 - Installieren Sie die CLI:
Für Linux/MacOS:
Bash
curl https://raw.githubusercontent.com/back4app/parse-cli/back4app/installer.sh | sudo /bin/bash
curl https://raw.githubusercontent.com/back4app/parse-cli/back4app/installer.sh | sudo /bin/bash
﻿
Für Windows:
Laden Sie die b4a.exe Datei von der Release-Seite.
2 - Konfigurieren Sie Ihren Kontoschlüssel:﻿
Bash
b4a configure accountkey
b4a configure accountkey
﻿
3 - Bereitstellen Sie Ihren Cloud-Code:
Bash
b4a deploy
b4a deploy
﻿
Bereitstellung über das Dashboard:
Gehen Sie im Dashboard Ihrer App zu Cloud Code > Funktionen.
Kopieren/Einfügen Sie die Funktion in den main.js Editor.
Klicken Sie auf Bereitstellen.
﻿
Aufruf Ihrer Funktion
Von Remix aus mit dem Parse SDK (zum Beispiel in einer serverseitigen Aktion oder einem Loader):
JS
import Parse from '~/utils/parseConfig';

export async function getTextLength(text) {
  try {
    const result = await Parse.Cloud.run('calculateTextLength', { text });
    console.log('Text length:', result.length);
    return result.length;
  } catch (err) {
    console.error('Error calling cloud function:', err);
  }
}
import Parse from '~/utils/parseConfig';

export async function getTextLength(text) {
  try {
    const result = await Parse.Cloud.run('calculateTextLength', { text });
    console.log('Text length:', result.length);
    return result.length;
  } catch (err) {
    console.error('Error calling cloud function:', err);
  }
}
﻿
Sie können es auch über REST aufrufen:
Curl
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
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
﻿
Oder über GraphQL:
GraphQL
mutation {
  calculateTextLength(input: {
    text: "Hello GraphQL"
  }) {
    result
  }
}
mutation {
  calculateTextLength(input: {
    text: "Hello GraphQL"
  }) {
    result
  }
}
﻿
Diese Flexibilität ermöglicht es Ihnen, Ihre benutzerdefinierte Logik in Ihr Remix-Frontend oder jeden anderen Client zu integrieren, der REST oder GraphQL unterstützt.
Schritt 5 – Konfiguration der Benutzerauthentifizierung
Benutzerauthentifizierung in Back4app
Back4app nutzt die Parse User Klasse als Grundlage für die Authentifizierung. Standardmäßig kümmert sich Parse um die Passwort-Hashing, Sitzungstoken und sichere Speicherung. Das bedeutet, dass Sie keine komplexen Sicherheitsabläufe manuell einrichten müssen.
Benutzerauthentifizierung einrichten
In einer Remix-Anwendung können Sie einen neuen Benutzer erstellen (zum Beispiel innerhalb einer Aktionsfunktion):
JS
import Parse from '~/utils/parseConfig';

export 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);
  }
}
import Parse from '~/utils/parseConfig';

export 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);
  }
}
﻿
Melden Sie einen bestehenden Benutzer an:
JS
export 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);
  }
}
export 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);
  }
}
﻿
Über REST könnte eine Anmeldung so aussehen:
JS
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
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 einer erfolgreichen Anmeldung erstellt Parse ein Sitzungstoken , das im Benutzerobjekt gespeichert wird. In Ihrer Remix-App können Sie auf den aktuell angemeldeten Benutzer zugreifen (zum Beispiel, indem Sie Parse.User.current() im Server- oder Client-Code überprüfen, obwohl SSR zusätzliche Strategien erfordern könnte):
JS
const currentUser = Parse.User.current();
if (currentUser) {
  console.log('Currently logged-in user:', currentUser.getUsername());
} else {
  console.log('No user is logged in');
}
const currentUser = Parse.User.current();
if (currentUser) {
  console.log('Currently logged-in user:', currentUser.getUsername());
} else {
  console.log('No user is logged in');
}
﻿
Parse verwaltet automatisch tokenbasierte Sitzungen im Hintergrund, aber Sie können sie auch manuell verwalten oder widerrufen. Dies ist nützlich, wenn Sie sich abmelden müssen:
JS
await Parse.User.logOut();
await Parse.User.logOut();
﻿
Integration von sozialem Login
Back4app und Parse können mit beliebten OAuth-Anbietern wie Google oder Facebook, durch die Installation zusätzlicher Pakete oder die Verwendung vorhandener Adapter integriert werden. Zum Beispiel können Sie ein Facebook-Login einrichten, indem Sie Ihre Facebook App-ID konfigurieren und Parse.FacebookUtils.logIn() verwenden. Detaillierte Anweisungen variieren, daher beziehen Sie sich auf die Dokumentation zum sozialen Login.﻿
JS
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);
  }
};
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
Um die E-Mail-Verifizierung und Passwortzurücksetzung zu aktivieren:
Navigieren Sie zu den E-Mail-Einstellungen in Ihrem Back4app-Dashboard.
Aktivieren Sie die E-Mail-Verifizierung um sicherzustellen, dass neue Benutzer den Besitz ihrer E-Mail-Adressen verifizieren.
Konfigurieren Sie die Absenderadresse, E-Mail-Vorlagen und Ihre benutzerdefinierte Domain, falls gewünscht.
Diese Funktionen verbessern die Kontosicherheit und Benutzererfahrung, indem sie den Benutzerbesitz von E-Mails validieren und eine sichere Methode zur Passwortwiederherstellung bereitstellen.
Schritt 6 – Umgang mit Dateispeicher
Hochladen und Abrufen von Dateien
Parse enthält die Parse.File Klasse zum Verarbeiten von Datei-Uploads, die Back4app sicher speichert:
JS
import Parse from '~/utils/parseConfig';

export async function uploadImage(file) {
  // file is typically from a <input type="file" ...> in a Remix form
  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);
  }
}
import Parse from '~/utils/parseConfig';

export async function uploadImage(file) {
  // file is typically from a <input type="file" ...> in a Remix form
  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);
  }
}
﻿
Um die Datei einem Objekt in der Datenbank anzuhängen, können Sie Folgendes tun:
JS
export 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();
}
export 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();
}
﻿
Das Abrufen der Datei-URL ist unkompliziert:
JS
const imageFile = photo.get('imageFile');
const imageUrl = imageFile.url();
const imageFile = photo.get('imageFile');
const imageUrl = imageFile.url();
﻿
Sie können diese imageUrl in Ihrer Remix-Benutzeroberfläche anzeigen, indem Sie ein <img src={imageUrl} /> rendern.
Dateisicherheit
Parse Server bietet flexible Konfigurationen zur Verwaltung der Sicherheit beim Datei-Upload. Das folgende Beispiel zeigt, wie Sie Berechtigungen festlegen können, um zu steuern, wer Dateien auf den Server hochladen kann:
{
"fileUpload": {
"enableForPublic": true,
"enableForAnonymousUser": true,
"enableForAuthenticatedUser": true
}
}
enableForPublic: Wenn auf true gesetzt, erlaubt es jedem, unabhängig vom Authentifizierungsstatus, Dateien hochzuladen.
enableForAnonymousUser: Steuert, ob anonyme Benutzer (nicht registriert) Dateien hochladen können. Wenn aktiviert, können temporäre oder Gastbenutzer Dateien hochladen.
enableForAuthenticatedUser: Gibt an, ob nur authentifizierte Benutzer Dateien hochladen können. Dies ist ideal, um sicherzustellen, dass nur vertrauenswürdige Benutzer Zugriff auf diese Funktionalität haben.
Schritt 7 – Aufgaben mit Cloud-Jobs planen
Cloud Jobs
Cloud Jobs in Back4app ermöglichen es Ihnen, Routineaufgaben in Ihrem Backend zu planen und auszuführen - wie das Bereinigen alter Daten oder das Versenden einer täglichen Zusammenfassungs-E-Mail. Ein typischer Cloud Job könnte so aussehen:
JS
// main.js

Parse.Cloud.job('cleanupOldTodos', async (request) => {
  // This runs in the background, not triggered by a direct user request
  const Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);

  // For example, remove todos older than 30 days
  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);
  }
});
// main.js

Parse.Cloud.job('cleanupOldTodos', async (request) => {
  // This runs in the background, not triggered by a direct user request
  const Todo = Parse.Object.extend('Todo');
  const query = new Parse.Query(Todo);

  // For example, remove todos older than 30 days
  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 Ihren Cloud-Code bereit mit dem neuen Job (über CLI oder das Dashboard).
Gehen Sie zum Back4app-Dashboard > App-Einstellungen > Servereinstellungen > Hintergrundjobs. 
Planen Sie den Job, um täglich oder in einem anderen Intervall, das Ihren Bedürfnissen entspricht, ausgeführt zu werden.
Planung eines Cloud-Jobs
﻿
Cloud Jobs ermöglichen es Ihnen, die Wartung im Hintergrund oder andere regelmäßige Prozesse zu automatisieren - ohne manuelle Eingriffe.
Schritt 8 – Integration von Webhooks
Webhooks ermöglichen es Ihrer Back4app-App, HTTP-Anfragen an einen externen Dienst zu senden, wann immer bestimmte Ereignisse auftreten. Dies ist leistungsstark für die Integration mit Drittanbietersystemen wie Zahlungs-Gateways (z. B. Stripe), E-Mail-Marketing-Tools oder Analyseplattformen.
Navigieren Sie zur Webhook-Konfiguration in Ihrem Back4app-Dashboard > Mehr > WebHooks und klicken Sie dann auf Webhook hinzufügen.
Richten Sie einen Endpunkt ein (z. B. https://your-external-service.com/webhook-endpoint).
Konfigurieren Sie Trigger um festzulegen, welche Ereignisse in Ihren Back4app-Klassen oder Cloud-Code-Funktionen den Webhook auslösen.
Hinzufügen eines Webhooks
﻿
Wenn Sie beispielsweise einen Slack-Kanal benachrichtigen möchten, wann immer ein neues Todo erstellt wird:
Erstellen Sie eine Slack-App, die eingehende Webhooks akzeptiert.
Kopieren Sie die Slack-Webhook-URL.
In Ihrem Back4app-Dashboard setzen Sie den Endpunkt auf diese Slack-URL für das Ereignis „Neuer Datensatz in der Todo-Klasse.“
Sie können auch benutzerdefinierte HTTP-Header oder Payloads hinzufügen, wenn nötig.
Sie können auch Webhooks im Cloud-Code definieren, indem Sie benutzerdefinierte HTTP-Anfragen in Triggern wie beforeSave, afterSave machen:
BeforeSave WebHook
﻿
Schritt 9 – Erkundung des Back4app-Admin-Panels
Die Back4app Admin App ist eine webbasierte Verwaltungsoberfläche, die für nicht-technische Benutzer entwickelt wurde, um CRUD-Operationen durchzuführen und routinemäßige Datenaufgaben ohne Programmierung zu erledigen. Sie bietet eine modellzentrierte, benutzerfreundliche Oberfläche, die die Datenbankverwaltung, das benutzerdefinierte Datenmanagement und unternehmensweite Operationen optimiert.
Aktivierung der Admin-App
Aktivieren Sie es, indem Sie zu App-Dashboard > Mehr > Admin-App gehen und auf die Schaltfläche „Admin-App aktivieren“ klicken. 
Admin-App aktivieren
﻿
Erstellen Sie einen ersten Admin-Benutzer (Benutzername/Passwort), der automatisch eine neue Rolle (B4aAdminUser) und Klassen (B4aSetting, B4aMenuItem und B4aCustomField) im Schema Ihrer App generiert.
﻿
Wählen Sie eine Subdomain für den Zugriff auf die Admin-Oberfläche und schließen Sie die Einrichtung ab.
﻿
Anmelden mit den Admin-Anmeldeinformationen, die Sie erstellt haben, um auf Ihr neues Admin-App-Dashboard zuzugreifen.
﻿
Sobald aktiviert, macht die Back4app Admin App es einfach, Datensätze aus Ihrer Datenbank anzuzeigen, zu bearbeiten oder zu entfernen - ohne direkte Nutzung des Parse Dashboards oder Backend-Codes. Mit konfigurierbaren Zugriffskontrollen können Sie diese Schnittstelle sicher mit Teammitgliedern oder Kunden teilen, die eine klare, klickbare Möglichkeit benötigen, um Daten zu verwalten.
Fazit
Indem Sie dieses umfassende Tutorial befolgt haben, haben Sie:
Erstellte ein sicheres Backend für eine Remix-App auf Back4app.
Konfigurierte eine Datenbank mit Klassenschemas, Datentypen und Beziehungen.
Integrierte Echtzeitanfragen (Live Queries) für sofortige Datenaktualisierungen.
Wendete Sicherheitsmaßnahmen an unter Verwendung von ACLs und CLPs an, um den Datenzugriff zu schützen und zu verwalten.
Implementierte Cloud-Code Funktionen, um benutzerdefinierte Geschäftslogik auf der Serverseite auszuführen.
Richtete die Benutzerauthentifizierung ein mit Unterstützung für E-Mail-Verifizierung und Passwortzurücksetzungen.
Verwaltete Datei-Uploads und -abrufe, mit optionalen Datei-Sicherheitskontrollen.
Planete Cloud-Jobs für automatisierte Hintergrundaufgaben.
Verwendete Webhooks um mit externen Diensten zu integrieren.
Erforschte das Back4app Admin-Panel für die Datenverwaltung.
Mit einem soliden Remix-Frontend und einem robusten Back4app-Backend sind Sie nun gut gerüstet, um funktionsreiche, skalierbare und sichere Anwendungen zu entwickeln. Setzen Sie Ihre Erkundung fort, integrieren Sie Ihre Geschäftslogik und nutzen Sie die Leistungsfähigkeit von Back4app, um Ihnen unzählige Stunden in der Server- und Datenbankverwaltung zu sparen. Viel Spaß beim Programmieren!
Nächste Schritte
Erstellen Sie eine produktionsbereite Remix-App durch die Erweiterung dieses Backends, um komplexere Datenmodelle, Caching-Strategien und Leistungsoptimierungen zu handhaben.
Integrieren Sie erweiterte Funktionen wie spezialisierte Authentifizierungsabläufe, rollenbasierte Zugriffskontrolle oder externe APIs (wie Zahlungs-Gateways).
Sehen Sie sich die offizielle Dokumentation von Back4app an für tiefere Einblicke in erweiterte Sicherheit, Leistungsoptimierung und Protokollanalyse.
Entdecken Sie weitere Tutorials zu Echtzeit-Chat-Anwendungen, IoT-Dashboards oder standortbasierten Diensten. Sie können die hier erlernten Techniken mit Drittanbieter-APIs kombinieren, um komplexe, reale Anwendungen zu erstellen.
﻿
Aktualisiert 20 Jan 2025
Hat Ihnen diese Seite geholfen?
Wie man ein Backend für Android erstellt?
ALS NÄCHSTES
Wie man ein Backend für JavaScript erstellt?