Construire un système de gestion de contenu d'affichage numérique?: un défi et un parcours

Récemment, j'ai relevé un défi de code passionnant pour une entreprise de médias spécialisée dans les kiosques numériques. La tache ? Créer un Système de gestion de contenu d'affichage numérique qui connecte une application Web à une application d'affichage de bureau en utilisant WebSockets pour la communication.

L'aper?u du projet

Le défi consistait à créer un système avec les fonctionnalités de base suivantes?:

Fonctionnalités du tableau de bord Web

• Une interface de création de contenu simple utilisant Fabric.js pour ajouter du texte, des images et des mises en page de base.
• Fonctionnalité d'aper?u du contenu.
• Capacités facultatives de planification de contenu.
• Une liste de contenu avec des indicateurs d'état (par exemple, brouillon, publié).
• Organisation de base du contenu à l'aide de dossiers ou de catégories.
• Surveillance de l'état de l'appareil pour l'application d'affichage connectée.

Application d'affichage électronique

• Affichage du contenu en plein écran avec prise en charge du texte et des images.
• Bouton de synchronisation manuelle avec indicateur d'état.
• Une option de basculement de synchronisation automatique pour des mises à jour transparentes.
• Lecture de contenu hors ligne pour plus de fiabilité.
• Commandes de la barre d'état système pour gérer l'application.
• Un indicateur d'état de connexion pour le serveur WebSocket.
• Notifications d'erreur de base.

Capacités hors ligne

• Stockage de contenu local pour une lecture hors ligne.
• Mise en cache du contenu pour garantir un fonctionnement fluide sans connexion Internet.
• Synchronisation automatique du contenu lorsque la connexion est rétablie.
• Indicateurs d'état hors ligne pour la visibilité.

S'attaquer à la mise en ?uvre

Le premier défi majeur auquel j'ai été confronté a été de concevoir la mise en ?uvre. J'ai redémarré le projet plusieurs fois, en me concentrant d'abord sur l'application Electron. Cependant, après de nombreuses recherches et expérimentations, j'ai réalisé que commencer par l'application Web puis la connecter à l'application d'affichage Electron était un meilleur choix. Cela m'a permis d'établir les fonctionnalités de base de la gestion de contenu avant d'aborder la couche de communication avec WebSockets.

Pour ce projet, j'ai choisi Next.js en raison de sa meilleure intégration avec Vercel, ce qui rend incroyablement facile le déploiement et la mise à l'échelle de l'application.

Apprendre Fabric.js et Electron à partir de zéro

L'un des plus gros obstacles a été d'apprendre Fabric.js et Electron, deux outils que je n'avais jamais utilisés auparavant?:

• Fabric.js?: cette puissante bibliothèque de canevas a permis la création de contenu interactif comme du texte, des images et des formes. Cependant, sa documentation n'était pas très conviviale pour les débutants, j'ai donc passé beaucoup de temps à regarder des tutoriels et à expérimenter des exemples.
• Electron?: J'ai apprécié le guide "Quick Start" bien documenté d'Electron, qui m'a permis de construire rapidement l'application de bureau. Cela m'a aidé à comprendre comment intégrer une application Web dans un environnement de bureau et implémenter des fonctionnalités hors ligne.

Le défi WebSocket

La fonctionnalité WebSocket était particulièrement délicate. J'ai réussi à créer un serveur WebSocket qui a permis à l'application Electron de répliquer le contenu de l'application Web. Cependant, les mises à jour en temps réel entre les deux applications se sont avérées difficiles. Même si je n'ai pas réussi à le faire fonctionner parfaitement pour cette version, je prévois de le revoir et de l'améliorer pour obtenir une synchronisation complète en temps réel.

Le?ons apprises

Ce projet était à la fois stimulant et enrichissant. J'ai acquis une expérience précieuse dans?:

• Création de tableaux de bord Web avec des interactions de canevas complexes à l'aide de Fabric.js.
• Création d'une application de bureau multiplateforme avec Electron.
• Mise en ?uvre de fonctionnalités hors ligne et gestion de la synchronisation du contenu.
• Utilisation de WebSockets pour la communication entre une application Web et une application de bureau.
• Déploiement d'applications modernes à l'aide de Next.js et Vercel.

Pendant que j'ai soumis le projet, je suis ravi de l'améliorer encore, d'ajouter les fonctionnalités manquantes et d'optimiser les capacités en temps réel.

Découvrez le projet

Si vous êtes curieux, voici où vous pouvez voir le projet en direct ou contribuer à son développement?:

• Application Web déployée?: https://signage-content-web-app.vercel.app/
• Référentiel GitHub?: https://github.com/HTSagara/signage-content-app

Je réalise ce projet open-source et j'aimerais que les développeurs collaborent, l'explorent et l'améliorent. Que vous souhaitiez améliorer les fonctionnalités en temps réel, optimiser l'application Electron ou ajouter de nouvelles fonctionnalités, vos contributions sont les bienvenues?!

Pensées finales

Ce projet m'a mis au défi de sortir de ma zone de confort et d'explorer de nouveaux outils, cadres et approches de conception. Cela m'a rappelé que le développement est un processus itératif rempli d'opportunités d'apprentissage. J'ai hate de poursuivre ce projet, de l'améliorer au fil du temps et de partager des mises à jour en cours de route. ?

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!