Quickstarters
Wie man ein Backend für Blazor erstellt?

38min
Einführung
In diesem Tutorial lernen Sie, wie Sie ein vollständiges Backend für eine Blazor-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 Blazor-Frontend kommuniziert.
Die Nutzung der robusten Backend-Dienste von Back4app mit Blazor, einem ASP.NET Core-Framework zum Erstellen interaktiver Web-UIs mit C#, ermöglicht es Entwicklern, die Backend-Entwicklung zu beschleunigen.
Egal, ob Sie eine Blazor-Server-App oder eine Blazor-WebAssembly-App erstellen, die nahtlose Integration mit Back4app kann die Entwicklungszeit drastisch verkürzen und gleichzeitig eine hochwertige serverseitige Geschäftslogik gewährleisten.
Am Ende dieses Tutorials haben Sie eine sichere Backend-Struktur erstellt, die auf eine Full-Stack-Webanwendung mit Blazor zugeschnitten ist.
Sie werden Einblicke erhalten, wie Sie Datenoperationen durchführen, Sicherheitskontrollen anwenden und Cloud-Funktionen implementieren, um Ihre Blazor-Webanwendung robust und skalierbar zu machen.
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 Blazor-Entwicklungsumgebung
Sie können dies einrichten, indem Sie das neueste .NET SDK von Microsoft installieren und ein neues Blazor-Projekt mit Vorlagen wie dotnet new blazorserver oder dotnet new blazorwasm erstellen.
.NET SDK (Version 6 oder höher) installiert
Stellen Sie sicher, dass Sie das .NET SDK zum Erstellen und Ausführen von Blazor-Apps haben.
Vertrautheit mit C# und Blazor-Konzepten
Offizielle Blazor-Dokumentation.
Wenn Sie neu bei Blazor sind, lesen Sie die offiziellen Dokumente oder ein Anfänger-Tutorial, bevor Sie beginnen.
Stellen Sie sicher, dass Sie diese Voraussetzungen haben, bevor Sie beginnen, um ein reibungsloses Tutorial-Erlebnis zu gewährleisten.
Schritt 1 – Einrichten des Back4app-Projekts
Ein neues Projekt erstellen
Der erste Schritt beim Erstellen Ihres Blazor-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. „Blazor-Backend-Tutorial“).
﻿
Diese Konfiguration stellt sicher, dass jedes Mal, wenn Sie Parse in Ihrer Blazor-Anwendung verwenden, es vorkonfiguriert ist, um sich mit Ihrer spezifischen Back4app-Instanz zu verbinden.
Durch den Abschluss dieses Schrittes haben Sie eine sichere Verbindung zwischen Ihrem Blazor-Frontend und dem Back4app-Backend hergestellt, die den Weg für Datenbankoperationen, Benutzerverwaltung und mehr ebnet.
Schritt 2 – Datenbank einrichten
Daten speichern und abfragen
Mit Ihrem Back4app-Projekt, das eingerichtet und das Parse SDK in Ihre Blazor-App integriert ist, können Sie nun beginnen, Daten zu speichern und abzurufen. Der einfachste Weg, einen Datensatz zu erstellen, ist die Verwendung der ParseObject-Klasse:
SomeDataService.cs
using Parse;
using System.Threading.Tasks;

public class SomeDataService {
    public async Task<ParseObject> CreateTodoItemAsync(string title, bool isCompleted) {
        var todo = new ParseObject("Todo");
        todo["title"] = title;
        todo["isCompleted"] = isCompleted;

        try {
            await todo.SaveAsync();
            Console.WriteLine("Todo saved successfully: " + todo.ObjectId);
            return todo;
        } catch (Exception ex) {
            Console.WriteLine("Error saving Todo: " + ex.Message);
            return null;
        }
    }

    public async Task<IList<ParseObject>> FetchTodosAsync() {
        var query = new ParseQuery<ParseObject>("Todo");
        try {
            var results = await query.FindAsync();
            Console.WriteLine("Fetched Todo items: " + results.Count);
            return results;
        } catch (Exception ex) {
            Console.WriteLine("Error fetching Todos: " + ex.Message);
            return null;
        }
    }
}
using Parse;
using System.Threading.Tasks;

public class SomeDataService {
    public async Task<ParseObject> CreateTodoItemAsync(string title, bool isCompleted) {
        var todo = new ParseObject("Todo");
        todo["title"] = title;
        todo["isCompleted"] = isCompleted;

        try {
            await todo.SaveAsync();
            Console.WriteLine("Todo saved successfully: " + todo.ObjectId);
            return todo;
        } catch (Exception ex) {
            Console.WriteLine("Error saving Todo: " + ex.Message);
            return null;
        }
    }

    public async Task<IList<ParseObject>> FetchTodosAsync() {
        var query = new ParseQuery<ParseObject>("Todo");
        try {
            var results = await query.FindAsync();
            Console.WriteLine("Fetched Todo items: " + results.Count);
            return results;
        } catch (Exception ex) {
            Console.WriteLine("Error fetching Todos: " + ex.Message);
            return null;
        }
    }
}
﻿
Alternativ können Sie die REST-API-Endpunkte von Back4app für Operationen verwenden.
Schema-Design und Datentypen
Standardmäßig erlaubt Parse die Erstellung von Schemas 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
﻿
Beim Abfragen, fügen Sie Zeiger-Daten ein:
SomeDataService.cs (continuation)
public async Task<IList<ParseObject>> FetchTodosWithCategoryAsync() {
    var query = new ParseQuery<ParseObject>("Todo").Include("category");
    try {
        var todosWithCategory = await query.FindAsync();
        return todosWithCategory;
    } catch (Exception ex) {
        Console.WriteLine("Error fetching todos with category: " + ex.Message);
        return null;
    }
}
public async Task<IList<ParseObject>> FetchTodosWithCategoryAsync() {
    var query = new ParseQuery<ParseObject>("Todo").Include("category");
    try {
        var todosWithCategory = await query.FindAsync();
        return todosWithCategory;
    } catch (Exception ex) {
        Console.WriteLine("Error fetching todos with category: " + ex.Message);
        return null;
    }
}
﻿
Live-Abfragen
Für Echtzeit-Updates in einer Blazor-Server-App sollten Sie eine SignalR-Verbindung für Live-Abfragen in Betracht ziehen. Obwohl das Parse .NET SDK Live-Abfragen unterstützt, kann die direkte Integration in eine Blazor-Anwendung zusätzliche Konfigurationen mit SignalR für die Echtzeitkommunikation erfordern.
Aktivieren Sie Live-Abfragen in Ihrem Back4app-Dashboard unter den Servereinstellungen. Stellen Sie sicher, dass „Live-Abfragen“ aktiviert ist.
Konfigurieren Sie den Live-Query-Client in .NET, falls erforderlich. Für Blazor-Apps kann es jedoch idiomatischer sein, SignalR für serverseitige Verbindungen zu nutzen.
Aufgrund der Komplexität der Einrichtung von Live-Abfragen in Blazor und der potenziellen Einschränkungen des Parse .NET SDK in Blazor WebAssembly müssen Sie möglicherweise einen serverseitigen Dienst implementieren, der Parse Live-Abfragen mit SignalR-Clients verbindet.
Schritt 3 – Anwendung von Sicherheit mit ACLs und CLPs
Back4app-Sicherheitsmechanismus
Back4app nimmt Sicherheit ernst, indem es Zugriffskontrolllisten (ACLs) und Klassenebene-Berechtigungen (CLPs). Diese Funktionen ermöglichen es Ihnen, einzuschränken, wer Daten auf Objekt- oder Klassenbasis lesen oder schreiben kann, und stellen sicher, dass nur autorisierte Benutzer Ihre Daten ändern können.
﻿
Zugriffskontrolllisten (ACLs)
Eine ACL wird auf einzelne Objekte angewendet, um zu bestimmen, welche Benutzer, Rollen oder die Öffentlichkeit Lese-/Schreiboperationen durchführen können. Zum Beispiel:
SomeDataService.cs (ACL example)
public async Task<ParseObject> CreatePrivateTodoAsync(string title, ParseUser ownerUser) {
    var todo = new ParseObject("Todo");
    todo["title"] = title;

    // Create an ACL granting read/write access only to the owner
    var acl = new ParseACL(ownerUser);
    acl.PublicReadAccess = false;
    acl.PublicWriteAccess = false;
    todo.ACL = acl;

    try {
        await todo.SaveAsync();
        return todo;
    } catch (Exception ex) {
        Console.WriteLine("Error saving private todo: " + ex.Message);
        return null;
    }
}
public async Task<ParseObject> CreatePrivateTodoAsync(string title, ParseUser ownerUser) {
    var todo = new ParseObject("Todo");
    todo["title"] = title;

    // Create an ACL granting read/write access only to the owner
    var acl = new ParseACL(ownerUser);
    acl.PublicReadAccess = false;
    acl.PublicWriteAccess = false;
    todo.ACL = acl;

    try {
        await todo.SaveAsync();
        return todo;
    } catch (Exception ex) {
        Console.WriteLine("Error saving private todo: " + ex.Message);
        return null;
    }
}
﻿
Wenn Sie das Objekt speichern, hat es eine ACL, die verhindert, dass jemand außer dem angegebenen Benutzer es liest oder ändert.
Klassenebene Berechtigungen (CLPs)
CLPs regeln die Standardberechtigungen einer gesamten Klasse, wie z. B. 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 legen die Grundlage fest, 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 besuchen Sie 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 dass Sie Ihre Server oder Infrastruktur verwalten 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.
Alle Cloud Code für Ihre Back4app-App wird innerhalb des Parse Servers ausgeführt, der von Back4app verwaltet wird, sodass Sie sich keine Sorgen um Serverwartung, Skalierung oder Bereitstellung machen müssen. 
Wann immer 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 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).
main.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, aggregierte Daten für Analysen oder Berechnungen durchführen, bevor sie in der Datenbank gespeichert werden.
Datenvalidierungen: Sicherstellen, dass bestimmte Felder vorhanden sind oder dass ein Benutzer die richtigen Berechtigungen hat, bevor ein Datensatz gespeichert oder gelöscht wird.
Trigger: Aktionen ausführen, wenn sich Daten ändern (z. B. eine Benachrichtigung senden, wenn ein Benutzer sein Profil aktualisiert).
Integrationen: Mit Drittanbieter-APIs oder -Diensten verbinden.
Sicherheitsdurchsetzung: Eingaben validieren und bereinigen, um die Sicherheit vor sensiblen Operationen zu gewährleisten.
Setzen Sie Ihre Funktion ein
Unten ist eine einfache Cloud-Code-Funktion, die die Länge eines von der Clientseite 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 Veröffentlichungsseite herunter.
2 - Konfigurieren Sie Ihren Kontoschlüssel:
Bash
b4a configure accountkey
b4a configure accountkey
﻿
3 - Stellen Sie Ihren Cloud-Code bereit:
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.
Aufrufen Ihrer Funktion
Von Blazor aus mit dem Parse .NET SDK:
SomeDataService.cs (calling function)
public async Task<int?> GetTextLengthAsync(string text) {
    try {
        var result = await ParseCloud.CallFunctionAsync<Dictionary<string, object>>("calculateTextLength", 
            new Dictionary<string, object> { { "text", text } });
        if(result != null && result.ContainsKey("length"))
            return Convert.ToInt32(result["length"]);
        return null;
    } catch(Exception ex) {
        Console.WriteLine("Error calling cloud function: " + ex.Message);
        return null;
    }
}
public async Task<int?> GetTextLengthAsync(string text) {
    try {
        var result = await ParseCloud.CallFunctionAsync<Dictionary<string, object>>("calculateTextLength", 
            new Dictionary<string, object> { { "text", text } });
        if(result != null && result.ContainsKey("length"))
            return Convert.ToInt32(result["length"]);
        return null;
    } catch(Exception ex) {
        Console.WriteLine("Error calling cloud function: " + ex.Message);
        return null;
    }
}
﻿
Sie können es auch über REST oder GraphQL aufrufen, wie im ReactJS-Tutorial gezeigt.
Schritt 5 – Konfigurieren 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.
Einrichten der Benutzerauthentifizierung
In einer Blazor-Anwendung können Sie einen neuen Benutzer mit folgendem erstellen:
AuthService.cs
using Parse;
using System.Threading.Tasks;

public class AuthService {
    public async Task SignUpUserAsync(string username, string password, string email) {
        var user = new ParseUser() {
            Username = username,
            Password = password,
            Email = email
        };

        try {
            await user.SignUpAsync();
            Console.WriteLine("User signed up successfully!");
        } catch (Exception ex) {
            Console.WriteLine("Error signing up user: " + ex.Message);
        }
    }

    public async Task LogInUserAsync(string username, string password) {
        try {
            var user = await ParseUser.LogInAsync(username, password);
            Console.WriteLine("User logged in: " + user.Username);
        } catch (Exception ex) {
            Console.WriteLine("Error logging in user: " + ex.Message);
        }
    }
}
using Parse;
using System.Threading.Tasks;

public class AuthService {
    public async Task SignUpUserAsync(string username, string password, string email) {
        var user = new ParseUser() {
            Username = username,
            Password = password,
            Email = email
        };

        try {
            await user.SignUpAsync();
            Console.WriteLine("User signed up successfully!");
        } catch (Exception ex) {
            Console.WriteLine("Error signing up user: " + ex.Message);
        }
    }

    public async Task LogInUserAsync(string username, string password) {
        try {
            var user = await ParseUser.LogInAsync(username, password);
            Console.WriteLine("User logged in: " + user.Username);
        } catch (Exception ex) {
            Console.WriteLine("Error logging in user: " + ex.Message);
        }
    }
}
﻿
Sitzungsverwaltung
Nach einem erfolgreichen Login erstellt Parse ein Sitzungstoken , das im Benutzerobjekt gespeichert wird. In Ihrer Blazor-App können Sie auf den aktuell angemeldeten Benutzer zugreifen:
SomeComponent.razor.cs
var currentUser = ParseUser.CurrentUser;
if (currentUser != null) {
    Console.WriteLine("Currently logged-in user: " + currentUser.Username);
} else {
    Console.WriteLine("No user is logged in");
}
var currentUser = ParseUser.CurrentUser;
if (currentUser != null) {
    Console.WriteLine("Currently logged-in user: " + currentUser.Username);
} else {
    Console.WriteLine("No user is logged in");
}
﻿
Parse verwaltet automatisch tokenbasierte Sitzungen im Hintergrund, aber Sie können sie auch manuell verwalten oder widerrufen. Zum Ausloggen:
AuthService.cs (logout)
public async Task LogOutAsync() {
    await ParseUser.LogOutAsync();
    Console.WriteLine("User logged out");
}
public async Task LogOutAsync() {
    await ParseUser.LogOutAsync();
    Console.WriteLine("User logged out");
}
﻿
Integration von sozialem Login
Back4app und Parse können mit beliebten OAuth-Anbietern wie Google oder Facebook integriert werden. 
Die Konfiguration kann variieren und umfasst oft serverseitige Einstellungen oder zusätzliche Pakete. Siehe die Dokumentation zum sozialen Login für detaillierte Anweisungen.
Da Blazor Server-Apps auf ASP.NET Core laufen, können Sie sozialen Login mithilfe von ASP.NET Core Identity-Anbietern zusammen mit Parse für nahtlose Authentifizierung integrieren.
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 ParseFile Klasse zum Verarbeiten von Datei-Uploads, die Back4app sicher speichert:
FileService.cs
using Parse;
using System;
using System.Threading.Tasks;

public class FileService {
    public async Task<string> UploadImageAsync(byte[] fileData, string fileName) {
        var parseFile = new ParseFile(fileName, fileData);
        try {
            await parseFile.SaveAsync();
            Console.WriteLine("File saved: " + parseFile.Url);
            return parseFile.Url;
        } catch (Exception ex) {
            Console.WriteLine("Error uploading file: " + ex.Message);
            return null;
        }
    }
}
using Parse;
using System;
using System.Threading.Tasks;

public class FileService {
    public async Task<string> UploadImageAsync(byte[] fileData, string fileName) {
        var parseFile = new ParseFile(fileName, fileData);
        try {
            await parseFile.SaveAsync();
            Console.WriteLine("File saved: " + parseFile.Url);
            return parseFile.Url;
        } catch (Exception ex) {
            Console.WriteLine("Error uploading file: " + ex.Message);
            return null;
        }
    }
}
﻿
Um die Datei an ein Objekt anzuhängen:
FileService.cs (continued)
public async Task<ParseObject> CreatePhotoObjectAsync(byte[] fileData, string fileName) {
    var photo = new ParseObject("Photo");
    var parseFile = new ParseFile(fileName, fileData);
    photo["imageFile"] = parseFile;

    try {
        await photo.SaveAsync();
        return photo;
    } catch (Exception ex) {
        Console.WriteLine("Error creating photo object: " + ex.Message);
        return null;
    }
}
public async Task<ParseObject> CreatePhotoObjectAsync(byte[] fileData, string fileName) {
    var photo = new ParseObject("Photo");
    var parseFile = new ParseFile(fileName, fileData);
    photo["imageFile"] = parseFile;

    try {
        await photo.SaveAsync();
        return photo;
    } catch (Exception ex) {
        Console.WriteLine("Error creating photo object: " + ex.Message);
        return null;
    }
}
﻿
Abrufen der Datei-URL:
SomeComponent.razor.cs
var imageFile = photo.Get<ParseFile>("imageFile");
var imageUrl = imageFile.Url;
var imageFile = photo.Get<ParseFile>("imageFile");
var imageUrl = imageFile.Url;
﻿
Sie können diese imageUrl in Ihren Blazor-Komponenten anzeigen, indem Sie sie als Quelle eines <img> Tags festlegen.
Dateisicherheit
Parse Server bietet flexible Konfigurationen zur Verwaltung der Dateiuploadsicherheit. Verwenden Sie ACLs auf ParseFiles oder setzen Sie serverseitige Konfigurationen nach Bedarf.
Schritt 7 – Aufgaben mit Cloud-Jobs planen
Cloud-Jobs
Cloud-Jobs in Back4app ermöglichen es Ihnen, routinemäßige Aufgaben 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:
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);
  }
});
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 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.
﻿
Cloud-Jobs ermöglichen es Ihnen, Hintergrundwartung oder andere regelmäßige Prozesse zu automatisieren, ohne manuelle Eingriffe zu benötigen.
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, E-Mail-Marketing-Tools oder Analyseplattformen.
Navigieren Sie zur Webhooks-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.
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 erstellen.
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 sie, indem Sie zu App-Dashboard > Mehr > Admin App gehen und auf die Schaltfläche „Admin App aktivieren“ klicken.
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.
Melden Sie sich an mit den Admin-Anmeldeinformationen, die Sie erstellt haben, um auf Ihr neues Admin App-Dashboard zuzugreifen.
Sobald die Back4app Admin App aktiviert ist, können Sie ganz einfach Datensätze aus Ihrer Datenbank anzeigen, bearbeiten oder entfernen, ohne direkt das Parse Dashboard oder Backend-Code verwenden zu müssen.
Fazit
Durch das Befolgen dieses umfassenden Tutorials haben Sie:
Ein sicheres Backend für eine Blazor-App auf Back4app erstellt.
Eine Datenbank mit Klassenschemas, Datentypen und Beziehungen konfiguriert.
Echtzeitabfragen wo anwendbar für sofortige Datenaktualisierungen integriert.
Sicherheitsmaßnahmen unter Verwendung von ACLs und CLPs angewendet, um den Datenzugriff zu schützen und zu verwalten.
Cloud-Code Funktionen implementiert, um benutzerdefinierte Geschäftslogik auf der Serverseite auszuführen.
Benutzerauthentifizierung mit Unterstützung für E-Mail-Verifizierung und Passwortzurücksetzungen eingerichtet.
Datei-Uploads und -abrufe verwaltet, mit optionalen Sicherheitskontrollen für Dateien.
Cloud-Jobs für automatisierte Hintergrundaufgaben geplant.
Webhooks verwendet, um mit externen Diensten zu integrieren.
Das Back4app Admin-Panel für die Datenverwaltung erkundet.
Mit einem soliden Blazor-Frontend und einem robusten Back4app-Backend sind Sie nun gut gerüstet, um funktionsreiche, skalierbare und sichere Webanwendungen zu entwickeln. 
Setzen Sie die Erkundung fort, um fortgeschrittenere Funktionen zu entdecken, 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 Blazor-App indem Sie dieses Backend erweitern, um komplexere Datenmodelle, Caching-Strategien und Leistungsoptimierungen zu handhaben.
Integrieren Sie fortgeschrittene Funktionen wie spezialisierte Authentifizierungsabläufe, rollenbasierte Zugriffskontrolle oder externe APIs.
Überprüfen Sie die offizielle Dokumentation von Back4app für tiefere Einblicke in erweiterte Sicherheit, Leistungsoptimierung und Protokollanalyse.
Erforschen Sie andere Tutorials zu Echtzeit-Chat-Anwendungen, IoT-Dashboards oder standortbasierten Diensten. Kombinieren Sie die hier erlernten Techniken mit Drittanbieter-APIs, um komplexe, reale Anwendungen zu erstellen.
﻿
Aktualisiert 11 Feb 2025
Hat Ihnen diese Seite geholfen?
Wie man eine CRUD-App mit ReactJS erstellt?
ALS NÄCHSTES
Wie man ein Backend für htmx erstellt?