Echtzeit-Dashboards sind in verschiedenen Anwendungen unglaublich nützlich, von der Verfolgung von Website-Analysen über die Überwachung von Live-Finanzdaten bis hin zur Überwachung von IoT-Geräten.
? In diesem Tutorial zeigen wir Ihnen, wie Sie eines mit React und Encore.ts erstellen. Sie lernen, ein dynamisches Dashboard zu erstellen, das Aktualisierungen sofort streamt und es Ihnen ermöglicht, schnelle, fundierte Entscheidungen zu treffen.
Um einen Einblick in das zu bekommen, was wir bauen werden, sehen Sie sich dieses GIF des fertigen Produkts und den Quellcode hier an. Lass uns eintauchen!
Bevor wir beginnen, stellen Sie sicher, dass diese Dinge auf Ihrem Computer installiert sind
Encore.ts ist ein Open-Source-Framework, das Sie beim Erstellen von Backends mit TypeScript unterstützt und so die Typsicherheit gewährleistet. Es ist leichtgewichtig und schnell, da es keine NPM-Abhängigkeiten aufweist.
Bei der Entwicklung verteilter Backend-Systeme ist es oft schwierig, die Produktionsumgebung lokal zu replizieren, was zu einer schlechten Entwicklererfahrung führt. Es kann sein, dass Sie am Ende mit viel Komplexität zu kämpfen haben, nur um die Dinge auf vernünftige Weise lokal zum Laufen zu bringen, was Zeit in Anspruch nimmt, da Sie sich nicht auf die Erstellung der eigentlichen Anwendung konzentrieren müssen. Encore.ts begegnet diesem Problem, indem es ein vollständiges Toolset zum Aufbau verteilter Systeme bereitstellt, einschließlich:
Okay, wir haben darüber gesprochen, was Encore ist und wie es uns beim Aufbau von Backend-Diensten hilft. Im nächsten Abschnitt installieren wir Encore lokal und beginnen mit der Erstellung.
Um mit Encore arbeiten zu können, müssen wir die CLI installieren, was das Erstellen und Verwalten lokaler Umgebungen sehr einfach macht.
# macOS brew install encoredev/tap/encore # Windows iwr https://encore.dev/install.ps1 | iex # Linux curl -L https://encore.dev/install.sh | bash
Das Erstellen einer Encore-Anwendung ist sehr einfach, Sie müssen nur den Befehl ausführen.
encore app create
Ihnen werden die folgenden Fragen gestellt, wählen Sie Ihre Antworten entsprechend aus.
Select language for your applicatio : TypeScript Template: Empty app App Name : real-time-dashboard
Sobald die App erstellt ist, können Sie die Anwendungskonfiguration in encore.app überprüfen
{
"id": "real-time-dashboard-<random-id>",
"lang": "typescript"
}
In Ordnung, wir haben die Encore-Anwendung erstellt. Lassen Sie uns im nächsten Abschnitt über Streaming-APIs in Encore sprechen.
Bevor wir über Streaming-APIs sprechen, sprechen wir über APIs in Encore. Das Erstellen eines API-Endpunkts in Encore ist sehr einfach, da es die API-Funktion aus dem Modul encore.dev/api bereitstellt, um den API-Endpunkt mit Typsicherheit zu definieren. Encore verfügt außerdem über eine integrierte Validierung für eingehende Anfragen. Im Kern sind APIs einfache asynchrone Funktionen mit einer Anforderungs- und Antwortschemastruktur. Encore analysiert den Code und generiert das Boilerplate zur Kompilierungszeit, sodass Sie sich nur auf die Definition der APIs konzentrieren müssen.
Streaming-APIs sind APIs, mit denen Sie Daten an und von Ihrer Anwendung senden und empfangen können und so eine bidirektionale Kommunikation ermöglichen.
Encore bietet drei Arten von Streams, jeweils für eine andere Datenflussrichtung:
Wenn Sie eine Verbindung zu einem Streaming-API-Endpunkt herstellen, führen Client und Server einen Handshake mithilfe einer HTTP-Anfrage durch. Wenn der Server diese Anfrage akzeptiert, wird ein Stream sowohl für den Client als auch für den API-Handler erstellt. Dieser Stream ist eigentlich ein WebSocket, der das Senden und Empfangen von Nachrichten ermöglicht.
Okay, da wir nun wissen, was APIs und Streaming-APIs in Encore sind, erstellen wir im nächsten Abschnitt unseren Dashboard-Service mit Streaming-API-Endpunkten zum Speichern und Abrufen von Daten in Echtzeit.
Lassen Sie uns einen Dashboard-Dienst erstellen, in dem wir unsere Vertriebs-API definieren, um Daten zu und von unserem Vertriebs-Dashboard zu streamen.
Erstellen Sie auf der Stammebene einen Ordner namens „dashboard“ und fügen Sie dann eine Datei „encore.service.ts“ hinzu. Diese Datei weist Encore an, den Dashboard-Ordner und seine Unterordner als Teil des Dienstes zu behandeln.
# macOS brew install encoredev/tap/encore # Windows iwr https://encore.dev/install.ps1 | iex # Linux curl -L https://encore.dev/install.sh | bash
Fügen Sie dann den folgenden Code zur Datei encore.service.ts hinzu. Wir importieren die Service-Klasse aus encore.dev/service und erstellen eine Instanz davon, indem wir „dashboard“ als Servicenamen verwenden.
encore app create
Jetzt erstellen wir eine Dashboard.ts-Datei und richten die Verkaufs-API ein.
Select language for your applicatio : TypeScript Template: Empty app App Name : real-time-dashboard
Bevor wir die API einrichten, richten wir zunächst die Datenbank zum Speichern der Verkaufsdaten ein. Wir werden SQLDatabase aus dem Modul encore.dev/storage/sqldb verwenden, um eine von Encore unterstützte PostgreSQL-Datenbank zu erstellen.
Wir müssen SQL als Migration definieren, die Encore übernimmt, wenn wir den Befehl encore run ausführen.
Erstellen Sie einen Ordner mit dem Namen migrations im Dashboard-Ordner und erstellen Sie dann eine Datei mit dem Namen 1_first_migration.up.sql. Achten Sie darauf, die Namenskonvention einzuhalten, beginnend mit number_ und endend mit up.sql.
# macOS brew install encoredev/tap/encore # Windows iwr https://encore.dev/install.ps1 | iex # Linux curl -L https://encore.dev/install.sh | bash
Hier erstellen wir eine Tabelle namens „Umsätze“ mit vier Spalten:
Fügen Sie als Nächstes den folgenden Code zur Datei „dashboard.ts“ hinzu.
encore app create
Hier erstellen wir eine Instanz von SQLDatabase, indem wir ihr den Namen Dashboard geben und den Pfad zum Migrationsordner angeben.
Wir verwenden das Postgres-Paket, um auf Änderungen in der Datenbank zu warten und diese zu benachrichtigen.
?
Als nächstes fügen Sie diese Typen und eine In-Memory-Map hinzu, um die verbundenen Streams (Websocket-Verbindungen) zu speichern.
Select language for your applicatio : TypeScript Template: Empty app App Name : real-time-dashboard
Als nächstes richten wir einen Verkaufs-Streaming-Endpunkt ein, um Updates zu senden, wenn ein neuer Verkauf stattfindet.
{
"id": "real-time-dashboard-<random-id>",
"lang": "typescript"
}
Hier verwenden wir die Funktion api.streamOut, um die API zu definieren, die zwei Argumente benötigt:
Wir halten Verbindungen in der connectedStreams-Karte aufrecht und hören uns den new_sale-Kanal mithilfe eines Postgres-Clients an. Wenn ein neuer Verkauf stattfindet, senden wir Updates an alle verbundenen Streams.
Als nächstes definieren wir den Add-Sale-API-Endpunkt, wo wir die Verkaufsdaten aus dem Anfragetext abrufen und die Datenbankinstanz verwenden, um den neuen Verkaufsdatensatz einzufügen.
# create dashboard folder mkdir dashboard # switch to dashboard folder cd dashboard # create encore.service.ts file inside dashboard folder touch encore.service.ts
Hier verwenden wir nach dem Hinzufügen des neuen Verkaufsdatensatzes zur Datenbank den Postgres-Client, um eine Benachrichtigung mit den Verkaufsdaten an den Kanal new_sale zu senden. Auf diese Weise wird der Zuhörer des Kanals new_sale benachrichtigt und kann Maßnahmen ergreifen.
Zuletzt richten wir den API-Endpunkt ein, um die Liste der Verkaufsdatensätze zurückzugeben.
import { Service } from 'encore.dev/service';
export default new Service('dashboard');
Hier verwenden wir die Datenbankinstanzmethodenabfrage, um die Daten abzurufen und sie dann zu verarbeiten, um sie als Liste zurückzugeben.
Großartig, wir haben jetzt alle API-Endpunkte definiert. Lassen Sie uns im nächsten Abschnitt das Encore-Entwicklungs-Dashboard erkunden.
Wir haben API-Endpunkte mit Datenbank-Setup, aber wie testen und debuggen wir die Dienste? Machen Sie sich keine Sorgen, denn Encore bietet ein Dashboard für die lokale Entwicklung, um Entwicklern das Leben zu erleichtern und die Produktivität zu steigern.
Es enthält mehrere Funktionen, die Ihnen beim Entwerfen, Entwickeln und Debuggen Ihrer Anwendung helfen:
Alle diese Funktionen werden in Echtzeit aktualisiert, wenn Sie Ihre Anwendung ändern.
Um auf das Dashboard zuzugreifen, starten Sie Ihre Encore-Anwendung mit „encore run“ und sie öffnet sich automatisch.
# macOS brew install encoredev/tap/encore # Windows iwr https://encore.dev/install.ps1 | iex # Linux curl -L https://encore.dev/install.sh | bash
So sieht das Dashboard aus und Sie können alles lokal testen, bevor Sie mit der Produktion beginnen. Dies macht es viel einfacher, Microservices-Architekturen zu testen, ohne dass externe Tools erforderlich sind.
Hier ist ein Beispiel für das Hinzufügen eines neuen Verkaufs mithilfe des API-Explorers. Wenn Sie auf die Schaltfläche „API aufrufen“ klicken, erhalten Sie eine Antwort und ein Protokoll. Auf der rechten Seite sehen Sie den Trace der Anfrage.
Wenn Sie auf den Trace-Link klicken, erhalten Sie Details wie Datenbankabfragen, Antworten und Protokolle.
Okay, das ist alles über das lokale Entwicklungs-Dashboard. Sie können andere Optionen wie den Servicekatalog, den Flow und mehr erkunden. Im nächsten Abschnitt generieren wir den Client mit TypeScript-Typsicherheit zur Verwendung im Frontend-Dienst (React Application) zur Kommunikation mit Dashboard-Dienst-APIs.
Encore kann Frontend-Anfrage-Clients in TypeScript oder JavaScript generieren, wodurch die Anfrage-/Antworttypen synchron bleiben und Sie die APIs ohne manuellen Aufwand aufrufen können.
Erstellen Sie einen Ordner mit dem Namen „frontend“ im Stammverzeichnis und führen Sie den folgenden Befehl aus, um das React-Projekt mit Vite einzurichten.
encore app create
Als nächstes erstellen Sie einen lib-Ordner im src-Verzeichnis, fügen eine neue Datei namens client.ts hinzu und lassen diese leer.
Select language for your applicatio : TypeScript Template: Empty app App Name : real-time-dashboard
Dann fügen Sie in der Datei package.json ein neues Skript namens gen-client hinzu.
{
"id": "real-time-dashboard-<random-id>",
"lang": "typescript"
}
Als nächstes führen Sie das Skript aus, um den Client in src/lib/client.ts zu erstellen.
# create dashboard folder mkdir dashboard # switch to dashboard folder cd dashboard # create encore.service.ts file inside dashboard folder touch encore.service.ts
Die Datei src/lib/client.ts sollte den generierten Code enthalten.
import { Service } from 'encore.dev/service';
export default new Service('dashboard');
Als nächstes erstellen Sie eine Datei mit dem Namen getRequestClient.ts im lib-Verzeichnis und fügen Sie den folgenden Code hinzu. Dadurch wird die Client-Instanz basierend auf der Umgebung zurückgegeben.
# make sure you are in dashboard folder touch dashboard.ts
Okay, jetzt haben wir den Client, den wir in einer React-Anwendung verwenden können, um die Dashboard-APIs aufzurufen. Im nächsten Abschnitt erstellen wir den Frontend-Service und die Benutzeroberfläche für das Echtzeit-Verkaufs-Dashboard.
Im vorherigen Abschnitt haben wir einen Frontend-Ordner mit einer React-Anwendung eingerichtet und möchten ihn nun zu einem Dienst machen. Erstellen wir eine encore.service.ts-Datei und fügen Sie den folgenden Code hinzu, um Encore anzuweisen, den Frontend-Ordner als „Frontend“-Dienst zu behandeln.
# macOS brew install encoredev/tap/encore # Windows iwr https://encore.dev/install.ps1 | iex # Linux curl -L https://encore.dev/install.sh | bash
Wir haben zwei Möglichkeiten:
Um die React-Anwendung bereitzustellen, müssen wir sie als statische Assets in Encore erstellen und bereitstellen. Lassen Sie uns die Datei static.ts im Frontend-Ordner einrichten.
Das Bereitstellen statischer Dateien in Encore.ts ähnelt regulären API-Endpunkten, wir verwenden jedoch stattdessen die Funktion api.static.
encore app create
Hier sind zwei wichtige Dinge zu beachten: Wir übergeben die Pfad- und Verzeichnisoptionen.
Super, der statische Endpunkt ist eingerichtet. Lassen Sie uns nun einige Abhängigkeiten für unsere React-Anwendung installieren
Select language for your applicatio : TypeScript Template: Empty app App Name : real-time-dashboard
Aktualisieren Sie dann die main.tsx mit dem folgenden Code.
{
"id": "real-time-dashboard-<random-id>",
"lang": "typescript"
}
Als nächstes richten wir Tailwind CSS ein und aktualisieren ein paar Dateien.
# create dashboard folder mkdir dashboard # switch to dashboard folder cd dashboard # create encore.service.ts file inside dashboard folder touch encore.service.ts
Ändern Sie den Inhaltsbereich in tailwind.config.js
import { Service } from 'encore.dev/service';
export default new Service('dashboard');
Und index.css mit dem folgenden Code.
# make sure you are in dashboard folder touch dashboard.ts
Jetzt erstellen wir ein paar Komponenten für das Vertriebs-Dashboard.
# 1_first_migration.up.sql
CREATE TABLE sales (
id BIGSERIAL PRIMARY KEY,
sale VARCHAR(255) NOT NULL,
total INTEGER NOT NULL,
date DATE NOT NULL
);
Hier importieren wir die Typen aus dem generierten Client, um sie an den Dashboard-Diensttyp anzupassen und die Typsicherheit zu gewährleisten.
# dashboard.ts
import { SQLDatabase } from 'encore.dev/storage/sqldb';
import postgres from 'postgres';
const db = new SQLDatabase('dashboard', {
migrations: './migrations',
});
const client = postgres(db.connectionString);
# dashboard.ts
...
// Map to hold all connected streams
const connectedStreams: Map<string, StreamOut<Sale>> = new Map();
interface HandshakeRequest {
id: string;
}
interface Sale {
sale: string;
total: number;
date: string;
}
interface ListResponse {
sales: Sale[];
}
Um Verkäufe zu generieren, benötigen wir einige Scheindaten, also erstellen wir eine src/constant.ts-Datei und fügen die Scheindaten hinzu
# dashboard.ts
...
import { api, StreamOut } from 'encore.dev/api';
import log from 'encore.dev/log';
...
export const sale = api.streamOut<HandshakeRequest, Sale>(
{ expose: true, auth: false, path: '/sale' },
async (handshake, stream) => {
connectedStreams.set(handshake.id, stream);
try {
await client.listen('new_sale', async function (data) {
const payload: Sale = JSON.parse(data ?? '');
for (const [key, val] of connectedStreams) {
try {
// Send the users message to all connected clients.
await val.send({ ...payload });
} catch (err) {
// If there is an error sending the message, remove the client from the map.
connectedStreams.delete(key);
log.error('error sending', err);
}
}
});
} catch (err) {
// If there is an error reading from the stream, remove the client from the map.
connectedStreams.delete(handshake.id);
log.error('stream error', err);
}
}
);
# dashboard.ts
...
...
export const addSale = api(
{ expose: true, method: 'POST', path: '/sale/add' },
async (body: Sale & { id: string }): Promise<void> => {
await db.exec`
INSERT INTO sales (sale, total, date)
VALUES (${body.sale}, ${body.total}, ${body.date})`;
await client.notify(
'new_sale',
JSON.stringify({ sale: body.sale, total: body.total, date: body.date })
);
}
);
Hier importieren wir den getRequestClient und rufen dann den addSale-Endpunkt über den Dashboard-Dienst auf. Es ist sehr einfach und addSale ist typsicher. Wenn Sie also versuchen, unzulässige Attribute zu übergeben, erhalten Sie eine Fehlermeldung.
Als nächstes erstellen wir eine SalesDashboard-Komponente, um die Dashboard-Ansicht mit Verkaufskennzahlen, aktuellen Verkäufen und Allzeitverkäufen anzuzeigen.
# macOS brew install encoredev/tap/encore # Windows iwr https://encore.dev/install.ps1 | iex # Linux curl -L https://encore.dev/install.sh | bash
SalesDashboard übernimmt eine Requisiten namens Rolle, die bestimmt, ob die GenerateSales-Komponente angezeigt wird.
saleStream enthält die aktive Stream-Referenz und ist stark typisiert.
encore app create
Wenn die Komponente bereitgestellt wird, erstellen wir die Stream-Verbindung mithilfe des Verkaufsendpunkts des Dashboard-Dienstes. Wir warten dann auf die Ereignisse zum Öffnen und Schließen des Sockets und führen die entsprechende Logik basierend auf diesen Ereignissen aus.
Wir lesen die Verkaufsdaten aus saleStream.current und speichern sie im aktuellenSalesData-Status.
Wenn die Bereitstellung der Komponente aufgehoben wird, bereinigen und schließen wir den aktuellen Stream.
Select language for your applicatio : TypeScript Template: Empty app App Name : real-time-dashboard
Dieser Code ruft die gespeicherten Verkäufe über den listSales-Endpunkt vom Dashboard-Dienst ab und speichert sie im salesData-Status.
{
"id": "real-time-dashboard-<random-id>",
"lang": "typescript"
}
Dieser Code berechnet die aktuellen Verkaufs- und Allzeit-Verkaufsdaten.
# create dashboard folder mkdir dashboard # switch to dashboard folder cd dashboard # create encore.service.ts file inside dashboard folder touch encore.service.ts
Aktualisieren Sie abschließend die App.tsx-Datei mit diesem Code.
import { Service } from 'encore.dev/service';
export default new Service('dashboard');
Hier zeigen wir die Komponenten SalesDashboard und RoleSelector basierend darauf, ob der Rollenabfrageparameter verfügbar ist oder nicht.
Jetzt erstellen wir die React-Anwendung, indem wir den folgenden Befehl im Frontend-Stammverzeichnis ausführen.
# make sure you are in dashboard folder touch dashboard.ts
Sobald Sie den Befehl erfolgreich ausführen, wird der Ordner dist im Frontend-Verzeichnis erstellt.
Großartig, jetzt führen wir im nächsten Abschnitt die Anwendung aus und testen sie von Anfang bis Ende.
Das Ausführen der Encore-Anwendung ist einfach; Verwenden Sie einfach den folgenden Befehl.
# 1_first_migration.up.sql
CREATE TABLE sales (
id BIGSERIAL PRIMARY KEY,
sale VARCHAR(255) NOT NULL,
total INTEGER NOT NULL,
date DATE NOT NULL
);
Sobald Sie den Befehl erfolgreich ausgeführt haben, werden im Terminal Protokolle wie diese angezeigt:
# dashboard.ts
import { SQLDatabase } from 'encore.dev/storage/sqldb';
import postgres from 'postgres';
const db = new SQLDatabase('dashboard', {
migrations: './migrations',
});
const client = postgres(db.connectionString);
Besuchen Sie http://127.0.0.1:4000 in Ihrem Browser und Sie sehen einen Bildschirm wie den folgenden.
Als nächstes wählen Sie „Viewer“ auf einer Registerkarte und „Manager“ auf einer anderen Registerkarte.
Beim Überprüfen des Entwicklungs-Dashboards haben wir einen Verkaufsdatensatz erstellt und dieser wurde in der Datenbank gespeichert, sodass er auch in der Benutzeroberfläche sichtbar ist.
Klicken Sie nun in der Manageransicht auf die Schaltfläche „Umsätze generieren“ und beobachten Sie, wie beide Registerkarten im Dashboard in Echtzeit aktualisiert werden.
In diesem Tutorial haben wir mit React und Encore.ts ein Echtzeit-Verkaufs-Dashboard erstellt. Die App wird sofort mit neuen Verkaufs- und Lagerartikeln aktualisiert und hilft so bei schnellen Entscheidungen. Wir haben Encore.ts, ein Open-Source-Framework, verwendet, um das Backend mit TypeScript für sicheres und reibungsloses Codieren zu erstellen. Hauptmerkmale von Encore sind:
Diese Funktionen zusammen erleichtern das Erstellen und Verwalten komplexer Apps und bieten ein großartiges Entwicklererlebnis.
Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein Echtzeit-Dashboard mit Encore.ts und React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Wort zu ppt
So erstellen Sie einen neuen Ordner in Pycharm
So exportieren Sie Apipost offline
Der Unterschied zwischen ++a und a++ in der C-Sprache
So verwenden Sie die Sortierfunktion
Was soll ich tun, wenn das Webvideo nicht geöffnet werden kann?
So löschen Sie leere Seiten in Word
Der Unterschied zwischen xdata und data
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
