Les
Les tableaux de bord en temps réel sont incroyablement utiles dans diverses applications, du suivi des analyses de sites Web à la surveillance des données financières en direct ou même au suivi des appareils IoT.
? Dans ce tutoriel, nous allons vous montrer comment en créer un en utilisant React et Encore.ts. Vous apprendrez à créer un tableau de bord dynamique qui diffuse instantanément les mises à jour, vous permettant ainsi de prendre des décisions rapides et éclairées.
Pour avoir un aperçu de ce que nous allons construire, consultez ce GIF du produit fini et le code source ici. Allons-y !
Avant de commencer, assurez-vous que ces éléments sont installés sur votre ordinateur
Encore.ts est un framework open source qui vous aide à créer des backends avec TypeScript, garantissant ainsi la sécurité des types. Il est léger et rapide car il n'a aucune dépendance NPM.
Lors du développement de systèmes backend distribués, il est souvent difficile de répliquer l'environnement de production localement, ce qui entraîne une mauvaise expérience pour les développeurs. Vous risquez de devoir faire face à beaucoup de complexité simplement pour faire fonctionner les choses localement de manière raisonnable, ce qui prend du temps avant de vous concentrer sur la création de l'application proprement dite. Encore.ts résout ce problème en fournissant un ensemble d'outils complet pour créer des systèmes distribués, notamment :
Très bien, nous avons parlé de ce qu'est Encore et de la façon dont il nous aide à créer des services backend. Dans la section suivante, installons Encore localement et commençons à créer.
Pour travailler avec Encore, nous devons installer la CLI, ce qui facilite grandement la création et la gestion d'environnements locaux.
# macOS brew install encoredev/tap/encore # Windows iwr https://encore.dev/install.ps1 | iex # Linux curl -L https://encore.dev/install.sh | bash
Créer une application Encore est très simple, il vous suffit d'exécuter la commande.
encore app create
Les questions suivantes vous seront posées, alors choisissez vos réponses en conséquence.
Select language for your applicatio : TypeScript Template: Empty app App Name : real-time-dashboard
Une fois l'application créée, vous pouvez vérifier la configuration de l'application dans encore.app
{
"id": "real-time-dashboard-<random-id>",
"lang": "typescript"
}
Très bien, nous avons créé l'application Encore. Parlons des API de streaming dans Encore dans la section suivante.
Avant de parler des API de streaming, parlons des API dans Encore. Créer un point de terminaison API dans Encore est très simple car il fournit la fonction api du module encore.dev/api pour définir le point de terminaison API avec sécurité de type. Encore dispose également d'une validation intégrée pour les demandes entrantes. À la base, les API sont de simples fonctions asynchrones avec une structure de schéma de requête et de réponse. Encore analyse le code et génère le passe-partout au moment de la compilation, vous n'avez donc qu'à vous concentrer sur la définition des API.
Les API de streaming sont des API qui vous permettent d'envoyer et de recevoir des données vers et depuis votre application, permettant ainsi une communication bidirectionnelle.
Encore propose trois types de flux, chacun pour une direction de flux de données différente :
Lorsque vous vous connectez à un point de terminaison d'API de streaming, le client et le serveur effectuent une négociation à l'aide d'une requête HTTP. Si le serveur accepte cette demande, un flux est créé pour le client et le gestionnaire d'API. Ce flux est en fait un WebSocket qui permet d'envoyer et de recevoir des messages.
Très bien, maintenant que nous savons ce que sont les API et les API de streaming dans Encore, créons notre service de tableau de bord dans la section suivante avec les points de terminaison de l'API de streaming pour stocker et récupérer des données en temps réel.
Créons un service de tableau de bord dans lequel nous définirons notre API de vente pour diffuser des données vers et depuis notre tableau de bord de vente.
Créez un dossier au niveau racine appelé tableau de bord puis ajoutez un fichier encore.service.ts. Ce fichier indiquera à Encore de traiter le dossier du tableau de bord et ses sous-dossiers comme faisant partie du service.
# macOS brew install encoredev/tap/encore # Windows iwr https://encore.dev/install.ps1 | iex # Linux curl -L https://encore.dev/install.sh | bash
Ajoutez ensuite le code suivant au fichier encore.service.ts. Nous importons la classe Service depuis encore.dev/service et en créons une instance en utilisant "dashboard" comme nom de service.
encore app create
Créons maintenant un fichier Dashboard.ts et configurons l'API de vente.
Select language for your applicatio : TypeScript Template: Empty app App Name : real-time-dashboard
Avant de configurer l'API, nous allons d'abord configurer la base de données pour stocker les données de vente. Nous utiliserons SQLDatabase du module encore.dev/storage/sqldb pour créer une base de données PostgreSQL supportée par Encore.
Nous devons définir SQL comme une migration, qu'Encore récupérera lorsque nous exécuterons la commande encore run.
Créez un dossier nommé migrations dans le dossier du tableau de bord, puis créez un fichier appelé 1_first_migration.up.sql. Assurez-vous de suivre la convention de dénomination, commençant par number_ et se terminant par 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
Ici, nous créons un tableau appelé ventes avec quatre colonnes :
Ensuite, ajoutez le code suivant au fichier Dashboard.ts.
encore app create
Ici, nous créons une instance de SQLDatabase en lui donnant le nom tableau de bord et en spécifiant le chemin d'accès au dossier migrations.
Nous utilisons le package postgres pour écouter et notifier les modifications dans la base de données.
?
Ensuite, ajoutez ces types et une carte en mémoire pour contenir les flux connectés (connexions websocket).
Select language for your applicatio : TypeScript Template: Empty app App Name : real-time-dashboard
Ensuite, configurons un point de terminaison de streaming de vente pour envoyer des mises à jour lorsqu'une nouvelle vente a lieu.
{
"id": "real-time-dashboard-<random-id>",
"lang": "typescript"
}
Ici, nous utilisons la fonction api.streamOut pour définir l'API, qui prend deux arguments :
Nous conservons les connexions dans la carteconnectedStreams et écoutons le canal new_sale à l'aide d'un client Postgres. Lorsqu'une nouvelle vente a lieu, nous envoyons des mises à jour à tous les flux connectés.
Ensuite, nous définirons le point de terminaison de l'API d'ajout de vente, où nous obtiendrons les données de vente du corps de la demande et utiliserons l'instance de base de données pour insérer le nouvel enregistrement de vente.
# create dashboard folder mkdir dashboard # switch to dashboard folder cd dashboard # create encore.service.ts file inside dashboard folder touch encore.service.ts
Ici, après avoir ajouté le nouvel enregistrement de vente à la base de données, nous utilisons le client Postgres pour envoyer une notification au canal new_sale avec les données de vente. De cette façon, l'auditeur de la chaîne new_sale est averti et peut agir.
Enfin, configurons le point de terminaison de l'API pour renvoyer la liste des enregistrements de ventes.
import { Service } from 'encore.dev/service';
export default new Service('dashboard');
Ici, nous utilisons la requête de méthode d'instance de base de données pour obtenir les données, puis les traitons pour les renvoyer sous forme de liste.
Super, nous avons maintenant tous les points de terminaison de l'API définis. Explorons le tableau de bord de développement Encore dans la section suivante.
Nous avons des points de terminaison d'API avec une configuration de base de données, mais comment tester et déboguer les services ? Ne vous inquiétez pas, car Encore fournit un tableau de bord de développement local pour faciliter la vie des développeurs et augmenter la productivité.
Il comprend plusieurs fonctionnalités pour vous aider à concevoir, développer et déboguer votre application :
Toutes ces fonctionnalités sont mises à jour en temps réel au fur et à mesure que vous modifiez votre application.
Pour accéder au tableau de bord, démarrez votre application Encore avec encore run, et elle s'ouvre automatiquement.
# macOS brew install encoredev/tap/encore # Windows iwr https://encore.dev/install.ps1 | iex # Linux curl -L https://encore.dev/install.sh | bash
Voici à quoi ressemble le tableau de bord, et vous pouvez tout tester localement avant de passer en production. Cela facilite grandement le test de l'architecture des microservices sans avoir besoin d'outils externes.
Voici un exemple d'ajout d'une nouvelle vente à l'aide de l'explorateur API. Lorsque vous cliquez sur le bouton Appeler l'API, vous obtiendrez une réponse et un journal. Sur le côté droit, vous pouvez voir la trace de la demande.
Lorsque vous cliquez sur le lien de trace, vous obtenez des détails tels que les requêtes de base de données, les réponses et les journaux.
Très bien, tout tourne autour du tableau de bord du développement local. Vous pouvez explorer d'autres options telles que le catalogue de services, le flux, etc. Dans la section suivante, nous générerons le client avec la sécurité de type TypeScript à utiliser dans le service Frontend (application React) pour communiquer avec les API du service de tableau de bord.
Encore peut générer des clients de requête frontend en TypeScript ou JavaScript, en gardant les types de requête/réponse synchronisés et en vous aidant à appeler les API sans effort manuel.
Créez un dossier nommé frontend dans le répertoire racine et exécutez la commande suivante pour configurer le projet React à l'aide de Vite.
encore app create
Ensuite, créez un dossier lib dans le répertoire src, ajoutez un nouveau fichier appelé client.ts et laissez-le vide.
Select language for your applicatio : TypeScript Template: Empty app App Name : real-time-dashboard
Ensuite, dans le fichier package.json, ajoutez un nouveau script appelé gen-client.
{
"id": "real-time-dashboard-<random-id>",
"lang": "typescript"
}
Ensuite, exécutez le script pour créer le client dans src/lib/client.ts.
# create dashboard folder mkdir dashboard # switch to dashboard folder cd dashboard # create encore.service.ts file inside dashboard folder touch encore.service.ts
Le fichier src/lib/client.ts doit contenir le code généré.
import { Service } from 'encore.dev/service';
export default new Service('dashboard');
Ensuite, créez un fichier nommé getRequestClient.ts dans le répertoire lib et ajoutez le code suivant. Cela renverra l'instance client en fonction de l'environnement.
# make sure you are in dashboard folder touch dashboard.ts
Très bien, nous avons maintenant le client à utiliser dans une application React pour appeler les API du tableau de bord. Dans la section suivante, créons le service frontend et construisons l'interface utilisateur pour le tableau de bord des ventes en temps réel.
Dans la section précédente, nous avons mis en place un dossier frontend avec une application React, et maintenant nous voulons en faire un service. Créons un fichier encore.service.ts et ajoutons le code suivant pour indiquer à Encore de traiter le dossier frontend comme un service "frontend".
# macOS brew install encoredev/tap/encore # Windows iwr https://encore.dev/install.ps1 | iex # Linux curl -L https://encore.dev/install.sh | bash
Nous avons deux options :
Pour servir l'application React, nous devons la créer et la servir en tant qu'actifs statiques dans Encore. Configurons le fichier static.ts dans le dossier frontend.
Le service de fichiers statiques dans Encore.ts est similaire aux points de terminaison d'API classiques, mais nous utilisons la fonction api.static à la place.
encore app create
Voici deux choses importantes à noter : nous passons les options path et dir.
Super, le point de terminaison statique est configuré. Maintenant, installons quelques dépendances pour notre application React
Select language for your applicatio : TypeScript Template: Empty app App Name : real-time-dashboard
Ensuite, mettez à jour le main.tsx avec le code ci-dessous.
{
"id": "real-time-dashboard-<random-id>",
"lang": "typescript"
}
Ensuite, configurons Tailwind CSS et mettons à jour quelques fichiers.
# create dashboard folder mkdir dashboard # switch to dashboard folder cd dashboard # create encore.service.ts file inside dashboard folder touch encore.service.ts
Modifiez la section de contenu dans tailwind.config.js
import { Service } from 'encore.dev/service';
export default new Service('dashboard');
Et index.css avec le code suivant.
# make sure you are in dashboard folder touch dashboard.ts
Créons maintenant quelques composants pour le tableau de bord des ventes.
# 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
);
Ici, nous importons les types du client généré pour correspondre au type de service du tableau de bord et garantir la sécurité des types.
# 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[];
}
Pour générer des ventes, nous aurons besoin de données fictives, créons donc un fichier src/constant.ts et ajoutons les données fictives
# 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 })
);
}
);
Ici, nous importons le getRequestClient puis appelons le point de terminaison addSale à partir du service de tableau de bord. C'est très simple et addSale est de type sécurisé, donc si vous essayez de transmettre des attributs qui ne sont pas autorisés, vous obtiendrez une erreur.
Ensuite, créons un composant SalesDashboard pour afficher la vue du tableau de bord avec les mesures de ventes, les ventes récentes et les ventes de tous les temps.
# macOS brew install encoredev/tap/encore # Windows iwr https://encore.dev/install.ps1 | iex # Linux curl -L https://encore.dev/install.sh | bash
SalesDashboard prend un accessoire appelé rôle, qui détermine s'il affichera le composant GenerateSales.
saleStream contiendra la référence du flux actif et est fortement typé.
encore app create
Lorsque le composant est monté, nous créons la connexion au flux à l'aide du point de terminaison de vente du service de tableau de bord. Nous écoutons ensuite les événements d'ouverture et de fermeture du socket et exécutons la logique appropriée en fonction de ces événements.
Nous lisons les données de vente de saleStream.current et les stockons dans l'état recentSalesData.
Lorsque le composant se démonte, nous nettoyons et fermons le flux actuel.
Select language for your applicatio : TypeScript Template: Empty app App Name : real-time-dashboard
Ce code récupère les ventes stockées à l'aide du point de terminaison listSales du service de tableau de bord et les enregistre dans l'état salesData.
{
"id": "real-time-dashboard-<random-id>",
"lang": "typescript"
}
Ce code calcule les ventes récentes et les données de ventes de tous les temps.
# create dashboard folder mkdir dashboard # switch to dashboard folder cd dashboard # create encore.service.ts file inside dashboard folder touch encore.service.ts
Enfin, mettez à jour le fichier App.tsx avec ce code.
import { Service } from 'encore.dev/service';
export default new Service('dashboard');
Ici, nous affichons les composants SalesDashboard et RoleSelector selon que le paramètre de requête de rôle est disponible ou non.
Maintenant, créons l'application React en exécutant la commande ci-dessous à la racine du frontend.
# make sure you are in dashboard folder touch dashboard.ts
Une fois la commande exécutée avec succès, le dossier dist sera créé dans le répertoire frontend.
Super, maintenant dans la section suivante, exécutons l'application et testons-la du début à la fin.
Exécuter l'application encore est simple ; utilisez simplement la commande ci-dessous.
# 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
);
Une fois la commande exécutée avec succès, vous verrez les journaux dans le terminal comme ceci :
# 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);
Visitez http://127.0.0.1:4000 dans votre navigateur et vous verrez un écran comme celui ci-dessous.
Ensuite, choisissez Visionneuse dans un onglet et Gestionnaire dans un autre onglet.
Lors de la vérification du tableau de bord de développement, nous avons créé un enregistrement de vente, et il a été enregistré dans la base de données, il est donc également visible dans l'interface utilisateur.
Maintenant, depuis la vue gestionnaire, cliquez sur le bouton Générer des ventes et regardez les deux onglets du tableau de bord se mettre à jour en temps réel.
Dans ce tutoriel, nous avons créé un tableau de bord des ventes en temps réel à l'aide de React et Encore.ts. L'application se met à jour instantanément avec les nouvelles ventes et les articles en stock, ce qui facilite la prise de décisions rapides. Nous avons utilisé Encore.ts, un framework open source, pour créer le backend avec TypeScript pour un codage sûr et fluide. Les principales fonctionnalités d'Encore sont :
Ensemble, ces fonctionnalités facilitent la création et la gestion d'applications complexes, offrant ainsi une expérience de développement exceptionnelle.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
