Schnellstarter
Wie man ein Backend für Ionic erstellt?

34min
Einführung
In diesem Tutorial lernen Sie, wie Sie ein vollständiges Backend für eine Ionic-App mit Back4App erstellen.
Wir werden die Datenbankverwaltung, Cloud Code-Funktionen, REST- und GraphQL-APIs, Benutzerauthentifizierung, Dateiverwaltung und mehr behandeln.
Unser Ziel ist es, Ihnen zu zeigen, wie man ein Backend für Ionic erstellt, das sicher, skalierbar und einfach zu warten ist.
Wir werden die intuitive Umgebung von Back4App nutzen, um die serverseitige Einrichtung zu vereinfachen, sodass Sie sich nicht um die manuelle Konfiguration von Servern oder Datenbanken kümmern müssen.
Sie werden wichtige Werkzeuge kennenlernen, wie das Planen von Aufgaben mit Cloud-Jobs, das Anwenden fortgeschrittener Sicherheitsregeln und die Integration von Webhooks mit anderen Diensten.
Am Ende werden Sie bereit sein, dieses grundlegende Backend in ein produktionsbereites System für Ihre Ionic-App zu erweitern.
Voraussetzungen
Ein Back4App-Konto und ein neues Back4App-Projekt
Erste Schritte mit Back4App.
Wenn Sie kein Konto haben, erstellen Sie eines kostenlos und folgen Sie dem obigen Leitfaden, um Ihr Projekt einzurichten.
Grundlegende Ionic-Entwicklungsumgebung
Stellen Sie sicher, dass Sie die Ionic CLI installiert haben und eine Ionic-App erstellen und ausführen können.
Node.js (Version 14 oder höher) installiert
Node.js herunterladen um Abhängigkeiten zu verwalten und Ihr Projekt zu erstellen.
Vertrautheit mit JavaScript/TypeScript und Ionic-Konzepten
Offizielle Ionic-Dokumentation.
Ein gutes Verständnis der Ionic-Strukturen, Komponenten und Lebenszyklus-Hooks wird hilfreich sein.
Schritt 1 – Erstellen eines neuen Projekts auf Back4App und Verbinden
Melden Sie sich bei Ihrem Back4App-Konto an.
Erstellen Sie eine neue App mit der Schaltfläche „Neue App“ in Ihrem Back4App-Dashboard.
Benennen Sie Ihre App (z. B. „Ionic-Backend-Tutorial“).
﻿
Dieses Back4App-Projekt ist die Basis für Ihr Backend. Im Gegensatz zur Verwendung eines clientseitigen Parse SDK wird dieses Tutorial zeigen, wie man über REST und GraphQL von Ihrer Ionic-App aus aufruft.
Abrufen Ihrer Anmeldeinformationen
Gehe im Back4App-Dashboard zu App-Einstellungen oder Sicherheit & Schlüssel.
Notiere dir deine Anwendungs-ID, REST-API-Schlüssel, und GraphQL-Endpunkt. Du wirst diese benötigen, um Anfragen von deiner Ionic-App zu senden.
Schritt 2 – Datenbank einrichten
Eine gut strukturierte Datenbank ist das Rückgrat jeder App. Das Dashboard von Back4App erleichtert das Entwerfen von Datenmodellen und das Verwalten von Beziehungen.
1. Erstellen eines Datenmodells
Gehe zum Datenbank-Bereich in deinem Back4App-Dashboard.
Erstelle eine neue Klasse (zum Beispiel „Todo“) und füge Spalten hinzu (z. B. Titel als String, isCompleted als Boolean).
Neue Klasse erstellen
﻿
2. Erstellen eines Datenmodells mit dem KI-Agenten
Öffnen Sie den AI Agent von Ihrem Back4App-Dashboard.
Beschreiben Sie Ihr gewünschtes Schema, wie zum Beispiel „Erstellen Sie eine Todo-Klasse mit Feldern für Titel (String) und isCompleted (Boolean).“
Der AI Agent wird das Schema automatisch generieren.
﻿
3. Daten lesen und schreiben mit der REST API
Von Ihrem Ionic-Code aus können Sie HTTP-Anfragen ausführen. Zum Beispiel, um zu erstellen eine Todo:
Bash
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
﻿
Um alle Todos abzurufen:
Bash
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
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
﻿
Sie können diese Aufrufe mit fetch, Axios, oder einer beliebigen HTTP-Client-Bibliothek innerhalb der Dienst- oder Komponenten-Dateien Ihrer Ionic-App integrieren.
4. Daten lesen und schreiben mit der GraphQL-API
Ähnlich können Sie GraphQL-Änderungen und -Abfragen von Ihrer Ionic-App aus senden. Zum Beispiel, um ein neues Todo zu erstellen:
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
    }
  }
}
﻿
Beispiel REST- oder GraphQL-Aufrufe können in einer Provider-/Service-Datei in Ihrer Ionic-Struktur platziert und dann von Ihren Seiten aufgerufen werden.
5. Arbeiten mit Live-Abfragen (Optional)
Live-Abfragen bieten Echtzeit-Updates für die Daten Ihrer App, erfordern jedoch das Parse SDK oder einen spezialisierten Abonnementansatz. Wenn Sie Echtzeitdaten benötigen, können Sie Live-Abfragen in den Einstellungen Ihres Back4App-Servers aktivieren. Normalerweise würden Sie eine WebSocket-Verbindung verwenden, um Änderungen in Ihren Klassen zu überwachen. Für standardmäßige HTTP-basierte Aufrufe können Sie jedoch regelmäßig die REST- oder GraphQL-Endpunkte abfragen.
Schritt 3 – Sicherheit mit ACLs und CLPs anwenden
Kurze Übersicht
ACLs (Zugriffskontrolllisten) ermöglichen es Ihnen, Lese-/Schreibberechtigungen für einzelne Objekte festzulegen. CLPs (Klassenebene Berechtigungen) ermöglichen es Ihnen, breitere Zugriffe auf Klassenebene zu verwalten. Diese Funktionen sind entscheidend, um private Daten zu schützen und sicherzustellen, dass nur autorisierte Benutzer Informationen ändern können.
Einrichten von Klassenebene Berechtigungen
Gehen Sie in Ihrem Back4App-Dashboard zu Datenbank > Klassenebene Berechtigungen.
Konfigurieren Sie Ihre Klassendefaults (z. B. nur authentifizierte Benutzer können neue Todos erstellen).
Konfigurieren von ACLs
Beim Erstellen oder Aktualisieren von Datensätzen können Sie ACL-Felder über REST übergeben:
Bash
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 '{
    "title": "Private Task",
    "ACL": {
      "USER_OBJECT_ID_HERE": {
        "read": true,
        "write": true
      }
    }
  }' \
  https://parseapi.back4app.com/classes/Todo
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 '{
    "title": "Private Task",
    "ACL": {
      "USER_OBJECT_ID_HERE": {
        "read": true,
        "write": true
      }
    }
  }' \
  https://parseapi.back4app.com/classes/Todo
﻿
Für weitere Informationen siehe die App-Sicherheitsrichtlinien.
Schritt 4 – Schreiben von Cloud-Code-Funktionen
Warum Cloud-Code
Cloud-Code ermöglicht es Ihnen, serverseitiges JavaScript für Aufgaben wie Datenvalidierung, Trigger oder Integrationen auszuführen. Sie können benutzerdefinierte Endpunkte erstellen, um Logik zu zentralisieren, was besonders nützlich ist, wenn Sie Code vom Client fernhalten möchten.
Beispiel für Funktionen und Trigger
In Ihrer main.js auf der Serverseite (Back4App) könnten Sie schreiben:
JS
// main.js
Parse.Cloud.define('validateTodo', (request) => {
  const { title } = request.params;
  if (!title) {
    throw 'A title is required.';
  }
  return `Title "${title}" looks good.`;
});

Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw 'Todos must have a title.';
  }
});
// main.js
Parse.Cloud.define('validateTodo', (request) => {
  const { title } = request.params;
  if (!title) {
    throw 'A title is required.';
  }
  return `Title "${title}" looks good.`;
});

Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw 'Todos must have a title.';
  }
});
﻿
Bereitstellen Sie dies über die Back4App CLI oder im Cloud-Code-Bereich des Dashboards.
Cloud-Code von Ionic aufrufen
Sie können eine POST-Anfrage senden:
Bash
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 '{"title": "Check this out"}' \
  https://parseapi.back4app.com/functions/validateTodo
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 '{"title": "Check this out"}' \
  https://parseapi.back4app.com/functions/validateTodo
﻿
Sie erhalten eine JSON-Antwort, die alle zurückgegebenen Daten oder eine Fehlermeldung enthält.
NPM-Module
Sie können Pakete wie axios in Ihrer Cloud-Code-Umgebung installieren, um Drittanbieterdienste zu integrieren. Fügen Sie sie in main.js:
JS
const axios = require('axios');
Parse.Cloud.define('fetchData', async (request) => {
  const url = request.params.url;
  const response = await axios.get(url);
  return response.data;
});
const axios = require('axios');
Parse.Cloud.define('fetchData', async (request) => {
  const url = request.params.url;
  const response = await axios.get(url);
  return response.data;
});
﻿
Bereitstellen und aufrufen, wie Sie es mit jeder Cloud-Code-Funktion tun würden.
Schritt 5 – Authentifizierung konfigurieren
Benutzerauthentifizierung aktivieren
Die Benutzeranmeldung und -registrierung kann mit REST-Aufrufen zur User-Klasse erfolgen. Zum Beispiel, um sich anzumelden:
Bash
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": "jon",
    "password": "somePassword",
    "email": "[email protected]"
  }' \
  https://parseapi.back4app.com/users
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": "jon",
    "password": "somePassword",
    "email": "jon@example.com"
  }' \
  https://parseapi.back4app.com/users
﻿
Anmeldung
Bash
curl -X GET \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_API_KEY" \
  --data-urlencode 'username=jon' \
  --data-urlencode 'password=somePassword' \
  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" \
  --data-urlencode 'username=jon' \
  --data-urlencode 'password=somePassword' \
  https://parseapi.back4app.com/login
﻿
Im Erfolgsfall erhalten Sie ein sessionToken. Bewahren Sie es sicher auf und fügen Sie es in die Header zukünftiger Anfragen für authentifizierte Vorgänge ein.
Soziale Logins
Sie können soziale Logins (wie Google oder Facebook) konfigurieren, indem Sie den OAuth-Flow über Back4App einrichten oder externe Anbieter verwenden. Siehe die Dokumentation zu sozialen Logins für detaillierte Schritte.
Schritt 6 – Umgang mit Dateispeicher
Einrichten des Dateispeichers
Back4App bietet sicheren Dateispeicher. Sie können Dateien an Objekte anhängen oder sie unabhängig speichern. Zum Beispiel:
Bash
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/image.png" \
  https://parseapi.back4app.com/files/myImage.png
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/image.png" \
  https://parseapi.back4app.com/files/myImage.png
﻿
Die Antwort enthält eine Datei-URL, die Sie in einer Klasse speichern können:
Bash
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 '{
    "imageFile": {
      "__type": "File",
      "name": "myImage.png",
      "url": "RESPONSE_URL_HERE"
    }
  }' \
  https://parseapi.back4app.com/classes/Photo
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 '{
    "imageFile": {
      "__type": "File",
      "name": "myImage.png",
      "url": "RESPONSE_URL_HERE"
    }
  }' \
  https://parseapi.back4app.com/classes/Photo
﻿
Sicherheitsüberlegungen
Sie können Dateisicherheitsregeln in den Servereinstellungen von Back4App aktivieren, um eine Authentifizierung zu verlangen oder Datei-Uploads auf bestimmte Rollen zu beschränken.
Schritt 7 – E-Mail-Verifizierung und Passwortzurücksetzung
Warum Verifizierung wichtig ist
Die E-Mail-Verifizierung stellt die Legitimität der Benutzer-E-Mails sicher. Die Passwortzurücksetzung bietet eine sichere Möglichkeit, verlorene Anmeldeinformationen wiederherzustellen. Dies hilft, Vertrauen und eine ordnungsgemäße Benutzerverwaltung in Ihrer Ionic-App aufrechtzuerhalten.
Back4App Dashboard-Konfiguration
Gehen Sie zu App-Einstellungen > E-Mail-Einstellungen.
Aktivieren Sie die E-Mail-Verifizierung.
Passen Sie die Vorlagen für die Verifizierungs- und Passwortzurücksetzungs-E-Mails an.
Schritt 8 – Aufgaben mit Cloud-Jobs planen
Was Cloud-Jobs tun
Cloud-Jobs ermöglichen es Ihnen, wiederkehrende Aufgaben wie Datenbereinigung oder das Versenden von Zusammenfassungs-E-Mails zu planen. Sie schreiben sie in Ihre main.js:
JS
Parse.Cloud.job('cleanupOldTodos', async (request) => {
  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);
  const oldTodos = await query.find({ useMasterKey: true });
  await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
  return `Deleted ${oldTodos.length} old Todos.`;
});
Parse.Cloud.job('cleanupOldTodos', async (request) => {
  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);
  const oldTodos = await query.find({ useMasterKey: true });
  await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
  return `Deleted ${oldTodos.length} old Todos.`;
});
﻿
Nach der Bereitstellung:
Gehe zu App-Einstellungen > Servereinstellungen > Hintergrundjobs.
Plane cleanupOldTodos täglich auszuführen.
Planung eines Cloud-Jobs
﻿
Schritt 9 – Integration von Webhooks
Webhooks ermöglichen es Ihnen, Daten an externe Dienste zu senden, wenn bestimmte Ereignisse in Ihrem Back4App-Projekt auftreten. Wenn Ihre Ionic-App eine Aktion in Stripe oder Slack auslösen muss, nachdem ein neuer Datensatz erstellt wurde, können Sie Webhooks verwenden, um dies zu automatisieren.
Gehen Sie zu Mehr > WebHooks in Ihrem Back4App-Dashboard.
Fügen Sie einen neuen Webhook hinzu und legen Sie seinen Endpunkt fest (z. B. https://your-service.com/webhook-endpoint).
Wählen Sie das Ereignis (z. B. „Nach dem Speichern“ in der Todo-Klasse).
Hinzufügen eines Webhooks
﻿
Sie können auch ausgehende Anfragen von Cloud-Code-Triggern in main.js mit Standard-HTTP-Bibliotheken initiieren.
Schritt 10 – Erkundung des Back4App-Admin-Panels
Die Back4App Admin App ist eine einfachere Schnittstelle für nicht-technische Stakeholder. Sie bietet eine einfache Möglichkeit, CRUD-Operationen an Ihren Klassen durchzuführen, ohne in das Haupt-Parse-Dashboard zu gehen.
Aktivierung der Admin App
Gehen Sie im Dashboard zu Mehr > Admin App.
Klicken Sie auf Admin App aktivieren und erstellen Sie einen Admin-Benutzer.
Wählen Sie eine Subdomain für den Zugriff auf Ihre Admin-Schnittstelle.
Admin App aktivieren
﻿
﻿
Dieses Panel hilft Ihnen, Daten zu verwalten, ohne Abfragen schreiben zu müssen, was es ideal für Kunden oder Teammitglieder macht, die eine grafische Schnittstelle bevorzugen.
Fazit
Indem Sie diesen Leitfaden über wie man ein Backend für Ionic erstellt, haben Sie:
Ein sicheres Backend erstellt auf Back4App mit robusten Datenmodellen und Beziehungen.
Integriert mit REST- und GraphQL-APIs um Daten von Ihrer Ionic-App zu lesen und zu schreiben.
Sicherheit implementiert mit ACLs und CLPs.
Cloud-Code bereitgestellt für benutzerdefinierte Logik und Trigger.
Benutzerauthentifizierung konfiguriert und Dateispeicherung.
Cloud-Jobs eingerichtet zur Planung von Aufgaben.
Webhooks genutzt für externe Integrationen.
Das Admin-Panel erkundet um die Datenverwaltung zu vereinfachen.
Mit diesem Fundament kann Ihre Ionic-App zu einer produktionsbereiten Plattform weiterentwickelt werden. Fügen Sie mehr Logik hinzu, verbinden Sie Drittanbieter-APIs oder optimieren Sie Sicherheitsregeln, um Ihrem Anwendungsfall gerecht zu werden.
Nächste Schritte
Verbessern Sie Ihren Produktionsbuild durch Implementierung von Caching, rollenbasiertem Zugriff und Leistungsüberwachung.
Integrieren Sie erweiterte Funktionen wie Echtzeit-Live-Abfragen oder Multi-Faktor-Authentifizierung.
Konsultieren Sie die offiziellen Dokumente von Back4App für eine eingehende Erkundung von Analysen, Protokollen und Leistungsoptimierung.
Erforschen Sie andere Tutorials die Chat-Anwendungen, IoT-Integrationen oder standortbasierte Funktionen demonstrieren, kombiniert mit den robusten Backend-Diensten von Back4App.
﻿
Aktualisiert 23 Jan 2025
Hat Ihnen diese Seite geholfen?
Wie man ein Backend für Symfony erstellt?
ALS NÄCHSTES
Wie man ein Backend für Dart erstellt?