Metainformationen zur Seite

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

entwickler:node_js_plugin_entwicklung [2022/09/10 12:18] – angelegt - Externe Bearbeitung 127.0.0.1entwickler:node_js_plugin_entwicklung [2022/10/07 11:54] (aktuell) – Michael Schlenstedt
Zeile 1: Zeile 1:
 ====== Node JS Plugin Entwicklung  ====== ====== Node JS Plugin Entwicklung  ======
- 
- 
- 
  
 Voraussetzung für diese Anleitung ist das [[plugins:express_server:start|Express Server]] Plugin ab Version 0.0.3. Sei dir bitte darüber bewusst dass Dein Plugin von dem Express Plugin abhängig ist und dementsprechend bei dem Anwender installiert werden muss. Ein Prüfung auf das Vorhanden sein des plugins ist daher notwendig. Voraussetzung für diese Anleitung ist das [[plugins:express_server:start|Express Server]] Plugin ab Version 0.0.3. Sei dir bitte darüber bewusst dass Dein Plugin von dem Express Plugin abhängig ist und dementsprechend bei dem Anwender installiert werden muss. Ein Prüfung auf das Vorhanden sein des plugins ist daher notwendig.
- 
- 
- 
  
 Der Port vom Express Server hat sich ab v0.0.3 geändert. Der Port vom Express Server hat sich ab v0.0.3 geändert.
- 
- 
  
 ===== Plugin Generator benutzen ===== ===== Plugin Generator benutzen =====
Zeile 23: Zeile 15:
 Die Idee des Plugins ist es einen [[https://expressjs.com/|ExpressJs Server]] bereitzustellen in dem du dich einbinden kannst. Um dies zu tun braucht dein Plugin eine ''%%express.js%%'' Datei im Ordner ''%%webfrontend/htmlauth%%'' oder ''%%webfrontend/htmlauth/express%%''. Diese Datei wird automatisch vom Express Server gelesen und ausgeführt wenn eine Anfrage an den Express Server mit der entsprechenden url ''%%/plugins/<pluginname>%%'' ankommt. Da normalerweise Apache alle Anfragen bearbeitet muss dem Apache mitgeteilt werden, dass sich der Express Server darum kümmern soll. Dafür können wir die ''%%mod_rewrite%%'' Funktion des Apache Servers nutzen.\\ Die Idee des Plugins ist es einen [[https://expressjs.com/|ExpressJs Server]] bereitzustellen in dem du dich einbinden kannst. Um dies zu tun braucht dein Plugin eine ''%%express.js%%'' Datei im Ordner ''%%webfrontend/htmlauth%%'' oder ''%%webfrontend/htmlauth/express%%''. Diese Datei wird automatisch vom Express Server gelesen und ausgeführt wenn eine Anfrage an den Express Server mit der entsprechenden url ''%%/plugins/<pluginname>%%'' ankommt. Da normalerweise Apache alle Anfragen bearbeitet muss dem Apache mitgeteilt werden, dass sich der Express Server darum kümmern soll. Dafür können wir die ''%%mod_rewrite%%'' Funktion des Apache Servers nutzen.\\
 Der Express Server läuft auf Port 3300 und reagiert auf den Pfad ''%%/plugins/<plugin name>%%'' Der Name des Plugins ist der Ordnername der in der ''%%plugin.cfg%%'' Datei deines Plugins hinterlegt ist. Apache kann übergangen werden wenn der Request direkt an ''%%http://<loxberry ip>:3300/plugin/<plugin name>%%'' geschickt wird. Der Express Server läuft auf Port 3300 und reagiert auf den Pfad ''%%/plugins/<plugin name>%%'' Der Name des Plugins ist der Ordnername der in der ''%%plugin.cfg%%'' Datei deines Plugins hinterlegt ist. Apache kann übergangen werden wenn der Request direkt an ''%%http://<loxberry ip>:3300/plugin/<plugin name>%%'' geschickt wird.
- 
  
 Die ''%%express.js%%'' Datei ist während der Laufzeit des Servers gecached. Jeder Server Neustart löscht den Cache. Ab v0.0.2 Werden Dateiänderungen nicht mehr automatisch erkannt. Das invalidieren des Caches kann per Post request ausgelöst werden. Dies sollte in der ''%%postupgrade.sh%%'' hinterlegt sein, dass die neuen Änderungen Anwendung finden.\\ Die ''%%express.js%%'' Datei ist während der Laufzeit des Servers gecached. Jeder Server Neustart löscht den Cache. Ab v0.0.2 Werden Dateiänderungen nicht mehr automatisch erkannt. Das invalidieren des Caches kann per Post request ausgelöst werden. Dies sollte in der ''%%postupgrade.sh%%'' hinterlegt sein, dass die neuen Änderungen Anwendung finden.\\
 ''%%curl -X POST http://localhost:3300/system/express/plugin/<plugin_name>%%'' ''%%curl -X POST http://localhost:3300/system/express/plugin/<plugin_name>%%''
- 
- 
  
 Das Plugin bietet auch die Möglichkeit den Express Server zu stoppen oder neu zu starten. Ausserdem können Logs gelesen werden und es werden Metriken angezeigt. Das Plugin bietet auch die Möglichkeit den Express Server zu stoppen oder neu zu starten. Ausserdem können Logs gelesen werden und es werden Metriken angezeigt.
Zeile 38: Zeile 27:
 Um sich in den Express Server einzuklinken muss dein Plugin eine ''%%express.js%%'' Datei im Ordner ''%%webfrontend/htmlauth%%'' oder ''%%webfrontend/htmlauth/express%%'' bereitstellen und eine Funktion exportieren. Um sich in den Express Server einzuklinken muss dein Plugin eine ''%%express.js%%'' Datei im Ordner ''%%webfrontend/htmlauth%%'' oder ''%%webfrontend/htmlauth/express%%'' bereitstellen und eine Funktion exportieren.
  
-<code syntaxhighlighter-pre>+<code javascript>
 module.exports = ({router, static, logger, _, translate}) => { module.exports = ({router, static, logger, _, translate}) => {
   return router;   return router;
 }; };
 </code> </code>
- 
- 
  
 **Parameters:** **Parameters:**
Zeile 62: Zeile 49:
 Wichtig ist, dass der ''%%router%%'' am Ende der Funktion zurückgegeben wird. Wichtig ist, dass der ''%%router%%'' am Ende der Funktion zurückgegeben wird.
  
- +<code javascript>
- +
-<code syntaxhighlighter-pre>+
 module.exports = ({router}) => { module.exports = ({router}) => {
   router.get('/', (req, res) => {   router.get('/', (req, res) => {
Zeile 74: Zeile 59:
 }; };
 </code> </code>
- 
- 
  
 Es können natürlich auch mehrere Routen zurückgegeben werden Es können natürlich auch mehrere Routen zurückgegeben werden
  
-<code syntaxhighlighter-pre>+<code javascript>
 module.exports = ({router}) => { module.exports = ({router}) => {
   router.get('/', (req, res) => {   router.get('/', (req, res) => {
Zeile 90: Zeile 73:
 }; };
 </code> </code>
- 
- 
  
 Alles was man auf Router Ebene mit Express gemacht werden kann, kannst du auch in dem Plugin machen. Alles was man auf Router Ebene mit Express gemacht werden kann, kannst du auch in dem Plugin machen.
Zeile 103: Zeile 84:
   * next: die Standard Next Funktion von Express   * next: die Standard Next Funktion von Express
  
-<code syntaxhighlighter-pre>+<code javascript>
 const clients = []; const clients = [];
 module.exports = ({router, logger}) => { module.exports = ({router, logger}) => {
Zeile 117: Zeile 98:
 }; };
 </code> </code>
- 
- 
  
 Anhand der Url können auch mehrere WebSockets pro Plugin benutzt werden. Anhand der Url können auch mehrere WebSockets pro Plugin benutzt werden.
Zeile 131: Zeile 110:
 ''%%cp webfrontend/htmlauth/express/.htaccess $ARGV5/webfrontend/htmlauth/plugins/$ARGV3/express/.htaccess%%'' ''%%cp webfrontend/htmlauth/express/.htaccess $ARGV5/webfrontend/htmlauth/plugins/$ARGV3/express/.htaccess%%''
  
- +<code apache>
- +
-<code syntaxhighlighter-pre>+
 RewriteEngine On # this is required RewriteEngine On # this is required
 RewriteRule ^index.cgi http://localhost:3300/plugins/express [P,L] #the redirect RewriteRule ^index.cgi http://localhost:3300/plugins/express [P,L] #the redirect
 </code> </code>
- 
- 
  
 Wenn jegliche Anfrage umgeleitet werden soll Wenn jegliche Anfrage umgeleitet werden soll
  
-<code syntaxhighlighter-pre>+<code apache>
 RewriteEngine On RewriteEngine On
 RewriteRule ^index.cgi http://localhost:3300/plugins/express [P,L] RewriteRule ^index.cgi http://localhost:3300/plugins/express [P,L]
 RewriteRule ^(.\*) http://localhost:3300/plugins/express/$1 [P,L] RewriteRule ^(.\*) http://localhost:3300/plugins/express/$1 [P,L]
 </code> </code>
- 
- 
  
 Wenn ausschließlich ''%%/admin/plugins/foobar/my-express-routes%%'' umgeleitet werden soll. Wenn ausschließlich ''%%/admin/plugins/foobar/my-express-routes%%'' umgeleitet werden soll.
  
-<code syntaxhighlighter-pre>+<code apache>
 RewriteEngine On RewriteEngine On
 RewriteRule ^my-express-routes/(.\*) http://localhost:3300/plugins/express/$1 [P,L] RewriteRule ^my-express-routes/(.\*) http://localhost:3300/plugins/express/$1 [P,L]
 </code> </code>
- 
- 
  
 ==== Fehlerhinweis, wenn Express-Server nicht installiert ist ==== ==== Fehlerhinweis, wenn Express-Server nicht installiert ist ====
Zeile 167: Zeile 138:
 ''%%webfrontend/htmlauth/index.cgi%%'' ''%%webfrontend/htmlauth/index.cgi%%''
  
-<code syntaxhighlighter-pre>+<code perl>
 #!/usr/bin/perl #!/usr/bin/perl
  
Zeile 200: Zeile 171:
 LoxBerry::Web::lbfooter(); LoxBerry::Web::lbfooter();
 </code> </code>
- 
- 
  
 ''%%template/error.html%%'' ''%%template/error.html%%''
  
-<code syntaxhighlighter-pre>+<code html>
 <h3><TMPL_VAR COMMON.MISSING_PLUGIN></h3> <h3><TMPL_VAR COMMON.MISSING_PLUGIN></h3>
 <p style="color: red"> <p style="color: red">
Zeile 214: Zeile 183:
 <p> <p>
 </code> </code>
- 
- 
  
 ''%%template/lang/language_(de|en).ini%%'' ''%%template/lang/language_(de|en).ini%%''
  
-<code syntaxhighlighter-pre>+<code ini>
 [COMMON] [COMMON]
 MISSING_PLUGIN="Fehlendes Plugin" MISSING_PLUGIN="Fehlendes Plugin"
Zeile 233: Zeile 200:
 EXPRESS_PLUGIN="Express Server" EXPRESS_PLUGIN="Express Server"
 </code> </code>
- 
- 
  
 ===== Handlebars Template Engine ===== ===== Handlebars Template Engine =====
Zeile 242: Zeile 207:
 //index.hbs// //index.hbs//
  
-<code syntaxhighlighter-pre>+<code html>
 <h1>This is my First Template</h1> <h1>This is my First Template</h1>
 </code> </code>
- 
- 
  
 Um die Datei zu rendern muss in der ''%%express.js%%'' Datei die Funktion ''%%res.render('index', {title: ‘Test'})%%'' benutz werden. Das Template wird dann im Loxberry Laut gerendert. Wenn du das Default Layout benutz solltest du mindestens den Titel definieren. Du kannst auch deine Eigene Seite definieren. Dazu muss ''%%{layout: false}%%'' angegeben werden. ''%%res.render('index', {layout: false})%%'' Um die Datei zu rendern muss in der ''%%express.js%%'' Datei die Funktion ''%%res.render('index', {title: ‘Test'})%%'' benutz werden. Das Template wird dann im Loxberry Laut gerendert. Wenn du das Default Layout benutz solltest du mindestens den Titel definieren. Du kannst auch deine Eigene Seite definieren. Dazu muss ''%%{layout: false}%%'' angegeben werden. ''%%res.render('index', {layout: false})%%''
Zeile 264: Zeile 227:
 Hier ist ein kleines Beispiel Hier ist ein kleines Beispiel
  
-<code syntaxhighlighter-pre>+<code html>
 // templates/index.hbs // templates/index.hbs
 <h1>{{myTitle}}</h1> <h1>{{myTitle}}</h1>
Zeile 276: Zeile 239:
 <div>Hello Foobar</div> <div>Hello Foobar</div>
 </code> </code>
- 
- 
  
 Das verinfachte Layout würde folgendesmaßen ausshen: Der Titel wird ersetzt mit “My Page Title” und der Body wird ersetzt mit dem ''%%index.hbs%%'' Template Das verinfachte Layout würde folgendesmaßen ausshen: Der Titel wird ersetzt mit “My Page Title” und der Body wird ersetzt mit dem ''%%index.hbs%%'' Template
  
-<code syntaxhighlighter-pre>+<code html>
 <!DOCTYPE html> <!DOCTYPE html>
 <html> <html>
Zeile 293: Zeile 254:
 </html> </html>
 </code> </code>
- 
  
  
 ===== Übersetzungen ===== ===== Übersetzungen =====
  
-Mit dem Express Server haben wir auch die Möglichkeit Übersetzungsdateien zu benutzen. Diese Müssen wie bei jedem Plugin in ''%%templates/lang%%'' hinterlegt werden. Anders als bei normalen plugins sind es hier ''%%*.js%%'' Dateien. Der Name der Datei ist gleichzeitig die Sprache also “de” für Deutsch, “en” für Englisch und so weiter. In der Datei definieren wir ein JavaScript Objekt mit Key Value Paaren und exportieren dieses. Der Key wird dann benutzt um die Übersetzung zu laden. Dazu steht in der ''%%express.js%%'' Datei die ''%%translate%%'' Funktion zur Verfügung.\\ +Mit dem Express Server haben wir auch die Möglichkeit Übersetzungsdateien zu benutzen. Diese Müssen wie bei jedem Plugin in ''%%templates/lang%%'' hinterlegt werden. Anders als bei normalen plugins sind es hier ''%%*.js%%'' Dateien. Der Name der Datei ist gleichzeitig die Sprache also “de” für Deutsch, “en” für Englisch und so weiter. In der Datei definieren wir ein JavaScript Objekt mit Key Value Paaren und exportieren dieses. Der Key wird dann benutzt um die Übersetzung zu laden. Dazu steht in der ''%%express.js%%'' Datei die ''%%translate%%'' Funktion zur Verfügung. 
-\\+
 Die Übersetzungen sind mit [[https://www.i18next.com/|I18next]] realisiert und deren Dokumentation kann für Spezialfälle herbeigezogen werden. Die Übersetzungen sind mit [[https://www.i18next.com/|I18next]] realisiert und deren Dokumentation kann für Spezialfälle herbeigezogen werden.
  
-<code syntaxhighlighter-pre>+<code javascript>
 module.exports = { module.exports = {
   key: 'value'   key: 'value'
Zeile 308: Zeile 268:
 } }
 </code> </code>
- 
- 
  
 **Benutzung im Express Handler** **Benutzung im Express Handler**
  
-<code syntaxhighlighter-pre>+<code javascript>
 module.exports = ({router, logger, translate}) => { module.exports = ({router, logger, translate}) => {
   router.get('/', (request, response) => {   router.get('/', (request, response) => {
Zeile 324: Zeile 282:
 }; };
 </code> </code>
- 
- 
  
 **Handlebars mit Übersetzungen** **Handlebars mit Übersetzungen**
Zeile 331: Zeile 287:
 Um die Übersetzungen in einem Template zu nutzen steht der Helper ''%%t%%'' bereit. Mit diesem können wir wie oben Übersetzungen anfragen. Um die Übersetzungen in einem Template zu nutzen steht der Helper ''%%t%%'' bereit. Mit diesem können wir wie oben Übersetzungen anfragen.
  
-<code syntaxhighlighter-pre>+<code javascript>
 module.exports = { module.exports = {
   helloWorld: 'Hello World'   helloWorld: 'Hello World'
Zeile 337: Zeile 293:
 } }
 </code> </code>
- 
- 
  
 <code syntaxhighlighter-pre> <code syntaxhighlighter-pre>
Zeile 344: Zeile 298:
 <h2>{{t 'hello' name='Foo'}}</h2> <h2>{{t 'hello' name='Foo'}}</h2>
 </code> </code>
- 
- 
  
 ===== Logger ===== ===== Logger =====
Zeile 363: Zeile 315:
 * error(message: String, error: Exception) * error(message: String, error: Exception)
 </code> </code>
- 
- 
- 
- 
- 
- 
- 
- 
- 
-