Aufbau eines Digital Signage Content Management Systems: Eine Herausforderung und eine Reise

Kürzlich habe ich eine spannende Code-Challenge für ein auf digitale Kioske spezialisiertes Medienunternehmen abgeschlossen. Die Aufgabe? So erstellen Sie ein Digital Signage Content Management System, das eine Webanwendung mit einer Desktop-Display-App unter Verwendung von WebSockets für die Kommunikation verbindet.

Die Projektübersicht

Die Herausforderung bestand darin, ein System mit den folgenden Kernfunktionen aufzubauen:

Web-Dashboard-Funktionen

• Eine einfache Benutzeroberfl?che zur Inhaltserstellung mit Fabric.js zum Hinzufügen von Text, Bildern und grundlegenden Layouts.
• Funktion zur Inhaltsvorschau.
• Optionale Funktionen zur Inhaltsplanung.
• Eine Inhaltsliste mit Statusindikatoren (z. B. Entwurf, gepostet).
• Grundlegende Inhaltsorganisation mithilfe von Ordnern oder Kategorien.
• Ger?testatusüberwachung für die verbundene Display-App.

Elektronenanzeigeanwendung

• Inhaltsanzeige im Vollbildmodus mit Unterstützung für Text und Bilder.
• Manuelle Synchronisierungstaste mit Statusanzeige.
• Eine Option zum Umschalten der automatischen Synchronisierung für nahtlose Updates.
• Offline-Inhaltswiedergabe für Zuverl?ssigkeit.
• Steuerelemente in der Taskleiste zur Verwaltung der App.
• Eine Verbindungsstatusanzeige für den WebSocket-Server.
• Grundlegende Fehlerbenachrichtigungen.

Offline-Funktionen

• Lokaler Inhaltsspeicher für die Offline-Wiedergabe.
• Content-Caching, um einen reibungslosen Betrieb ohne Internetverbindung zu gew?hrleisten.
• Automatische Inhaltssynchronisierung, wenn die Verbindung wiederhergestellt wird.
• Offline-Statusanzeigen für Sichtbarkeit.

Die Umsetzung in Angriff nehmen

Die erste gro?e Herausforderung, der ich gegenüberstand, war die Gestaltung der Umsetzung. Ich habe das Projekt mehrmals neu gestartet und mich zun?chst auf die Electron-App konzentriert. Nach vielen Recherchen und Experimenten wurde mir jedoch klar, dass es eine bessere Wahl war, mit der Web-App zu beginnen und sie dann mit der Electron-Display-App zu verbinden. Dies erm?glichte es mir, die Kernfunktionalit?t des Content-Managements zu etablieren, bevor ich mich mit WebSockets an die Kommunikationsschicht machte.

Für dieses Projekt habe ich mich für Next.js entschieden, da es eine bessere Integration mit Vercel bietet und es dadurch unglaublich einfach ist, die App bereitzustellen und zu skalieren.

Fabric.js und Electron von Grund auf lernen

Eine der gr??ten Hürden war das Erlernen von Fabric.js und Electron, zwei Tools, die ich noch nie zuvor verwendet hatte:

• Fabric.js: Diese leistungsstarke Canvas-Bibliothek erm?glichte die Erstellung interaktiver Inhalte wie Text, Bilder und Formen. Allerdings war die Dokumentation nicht sehr anf?ngerfreundlich, daher habe ich viel Zeit damit verbracht, mir Tutorials anzusehen und mit Beispielen zu experimentieren.
• Electron: Ich sch?tzte Electrons gut dokumentierte ?Quick Start“-Anleitung, die es mir erm?glichte, die Desktop-Anwendung schnell zu erstellen. Es hat mir geholfen zu verstehen, wie man eine Web-App in eine Desktop-Umgebung einbettet und Offline-Funktionen implementiert.

Die WebSocket-Challenge

Die WebSocket-Funktion war besonders knifflig. Ich habe erfolgreich einen WebSocket-Server erstellt, der es der Electron-App erm?glichte, den Inhalt der Web-App zu replizieren. Allerdings erwiesen sich Echtzeit-Updates zwischen den beiden Apps als Herausforderung. Obwohl ich es für diese Version nicht perfekt zum Laufen bringen konnte, habe ich vor, es noch einmal zu überdenken und zu verbessern, um eine vollst?ndige Echtzeitsynchronisierung zu erreichen.

Gelernte Lektionen

Dieses Projekt war sowohl herausfordernd als auch lohnend. Ich habe wertvolle Erfahrungen gesammelt in:

• Erstellen von Web-Dashboards mit komplexen Canvas-Interaktionen mithilfe von Fabric.js.
• Erstellen einer plattformübergreifenden Desktop-App mit Electron.
• Implementierung von Offline-First-Funktionen und Verwaltung der Inhaltssynchronisierung.
• Verwendung von WebSockets für die Kommunikation zwischen einer Web-App und einer Desktop-App.
• Bereitstellung moderner Anwendungen mit Next.js und Vercel.

W?hrend ich das Projekt eingereicht habe, freue ich mich darauf, es weiter zu verbessern, die fehlenden Funktionen hinzuzufügen und die Echtzeitfunktionen zu optimieren.

Schauen Sie sich das Projekt an

Wenn Sie neugierig sind, k?nnen Sie hier das Projekt live sehen oder zu seiner Entwicklung beitragen:

• Bereitgestellte Web-App: https://signage-content-web-app.vercel.app/
• GitHub-Repository: https://github.com/HTSagara/signage-content-app

Ich mache dieses Projekt Open-Source und würde mich freuen, wenn Entwickler zusammenarbeiten, es erforschen und verbessern. Egal, ob Sie daran interessiert sind, die Echtzeitfunktionen zu verbessern, die Electron-App zu optimieren oder neue Funktionen hinzuzufügen, Ihre Beitr?ge sind willkommen!

Letzte Gedanken

Dieses Projekt hat mich herausgefordert, meine Komfortzone zu verlassen und neue Tools, Frameworks und Designans?tze zu erkunden. Es erinnerte mich daran, dass Entwicklung ein iterativer Prozess voller Lernm?glichkeiten ist. Ich freue mich darauf, dieses Projekt fortzusetzen, es im Laufe der Zeit zu verbessern und dabei Updates zu teilen. ?

Das obige ist der detaillierte Inhalt vonAufbau eines Digital Signage Content Management Systems: Eine Herausforderung und eine Reise. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!