So erstellen Sie ein Echtzeit-Dashboard mit Encore.ts und React

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!

Voraussetzungen

Bevor wir beginnen, stellen Sie sicher, dass diese Dinge auf Ihrem Computer installiert sind

• Node.js (v18 oder höher)
• Npm (v10 oder höher)

Was und Warum Zugabe

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:

• Die lokale Umgebung entspricht der Cloud
• Dienstübergreifende Typensicherheit
• Typbewusste Infrastruktur
• Automatische API-Dokumente und -Clients
• Lokale Testverfolgung
• Und mehr

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.

Encore installieren

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

Encore-Anwendung erstellen

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"
}
</random-id>

In Ordnung, wir haben die Encore-Anwendung erstellt. Lassen Sie uns im nächsten Abschnitt über Streaming-APIs in Encore sprechen.

Was sind Streaming-APIs in Encore?

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:

• StreamIn: Verwenden Sie dies, um Daten in Ihren Dienst zu streamen.
• StreamOut: Verwenden Sie dies, um Daten aus Ihrem Dienst zu streamen.
• StreamInOut: Verwenden Sie dies, um Daten sowohl in Ihren als auch aus Ihrem Dienst zu streamen.

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.

Erstellen eines Dashboard-Dienstes

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:

• ID: wird automatisch inkrementiert und dient als Primärschlüssel
• Verkauf: Titel des Verkaufs
• Gesamt: Gesamtbetrag des Verkaufs
• Datum: Datum des Verkaufs

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"
}
</random-id>

Hier verwenden wir die Funktion api.streamOut, um die API zu definieren, die zwei Argumente benötigt:

• StreamOptions:
  • expose: Auf „true“ setzen, um den Endpunkt öffentlich zu machen, andernfalls auf „false“
  • auth: Auf true setzen, um den Endpunkt durch Authentifizierung zu schützen, andernfalls false
  • Pfad: /sale
• Funktion: Es werden zwei Argumente benötigt
  • Handshake: Wird zum Herstellen der Stream-Verbindung verwendet
  • Stream: Das Stream-Objekt

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.

Erkundung des Entwicklungs-Dashboards

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:

• Servicekatalog und API Explorer für einfache API-Aufrufe an Ihr lokales Backend
• Verteiltes Tracing für einfaches und leistungsstarkes Debuggen
• Automatische API-Dokumentation zum Teilen von Wissen und Beantworten von Fragen
• Encore Flow zur Visualisierung Ihrer Microservices-Architektur

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.

Generieren des Clients

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"
}
</random-id>

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.

Erstellen eines Frontend-Dienstes

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:

• Stellen Sie die Dashboard- und Frontend-Dienste separat bereit
• Bereitstellen Sie alles als ein einziges Bündel (wir werden diesen Ansatz für dieses Tutorial verwenden)

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.

• Pfad: /!Pfad stellt sicher, dass es als Fallback-Route fungiert und nicht mit anderen Endpunkten in Konflikt gerät.
• dir: ./dist ist das Verzeichnis der Build-Version der React-Anwendung.

Super, der statische Endpunkt ist eingerichtet. Lassen Sie uns nun einige Abhängigkeiten für unsere React-Anwendung installieren

• react-router-dom
• uuid
• Rückenwind-CSS

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"
}
</random-id>

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.

• SalesTable: um die Verkaufsdaten in einem Tabellenformat anzuzeigen.

# 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.

• SalesMetrics: um einige Verkaufszahlen wie den Gesamtverkauf, den niedrigsten und den durchschnittlichen Verkauf anzuzeigen.

# 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);

• RoleSelector: Damit Benutzer eine Rolle für das Dashboard auswählen können, zeigen wir zwei Optionen:
  • Betrachter: Kann das Verkaufs-Dashboard anzeigen
  • Manager: Kann neue Verkäufe anzeigen und erstellen

# dashboard.ts

...

// Map to hold all connected streams
const connectedStreams: Map<string streamout>> = new Map();

interface HandshakeRequest {
  id: string;
}

interface Sale {
  sale: string;
  total: number;
  date: string;
}

interface ListResponse {
  sales: Sale[];
}

</string>

• Verkäufe generieren: um die Schaltfläche „Verkauf generieren“ anzuzeigen und die Logik zum Generieren von Verkäufen zu enthalten.

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);
    }
  }
);
</handshakerequest>

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

</void>

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"
}
</random-id>

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.

Ausführen der Anwendung

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.

• Betrachter

• Manager

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.

Zusammenfassung

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:

1. Typsicherheit: Stellt sicher, dass alle API-Endpunkte und Datenstrukturen sicher sind, wodurch Fehler reduziert und der Code zuverlässiger wird.
2. Streaming-APIs: Ermöglicht Echtzeit-Datenstreaming mit StreamIn, StreamOut und StreamInOut und ermöglicht so eine bidirektionale Kommunikation zwischen Client und Server.
3. Lokales Entwicklungs-Dashboard: Bietet Tools zum Testen und Debuggen, wie einen Servicekatalog, API Explorer und verteiltes Tracing, und steigert so die Produktivität.
4. Automatische Client-Generierung: Erstellt Frontend-Anfrage-Clients in TypeScript oder JavaScript, wobei die Anfrage-/Antworttypen aufeinander abgestimmt bleiben.
5. Vereinfachte Microservices: Ermöglicht das Erstellen von Apps mit mehreren Diensten ohne die übliche Komplexität und bietet so eine einfachere Möglichkeit, mit Microservices umzugehen.

Diese Funktionen zusammen erleichtern das Erstellen und Verwalten komplexer Apps und bieten ein großartiges Entwicklererlebnis.

Relevante Links

• Star Encore auf GitHub
• Finden Sie den Quellcode für dieses Beispiel
• Treten Sie unserer Discord-Community bei

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!