Einsatz von Polymer unter Linux: Unterschied zwischen den Versionen

Aus Byte-Welt Wiki
Zur Navigation springenZur Suche springen
K (Polymer Starter-Kit)
 
(10 dazwischenliegende Versionen von einem anderen Benutzer werden nicht angezeigt)
Zeile 1: Zeile 1:
 
[[Kategorie:Linux]]
 
[[Kategorie:Linux]]
 
[[Kategorie:Software]]
 
[[Kategorie:Software]]
 +
[[Kategorie:HTML]]
 +
[[Kategorie:JavaScript]]
  
Im vorliegenden Artikel wird kurz und knapp beschrieben, wie man auf einem Rechner mit einem Debian/Ubuntu-Derivat das von Google entwickelte Framework Polymer zur Erstellung von Web Components und Web-Applikationen installiert und in Betrieb nimmt.
+
Im vorliegenden Artikel wird kurz und knapp beschrieben, wie man auf einem Rechner mit einem Debian/Ubuntu-Derivat das von [https://www.google.de Google] entwickelte Framework [https://www.polymer-project.org/ Polymer] zur Erstellung von Web Components und Web-Applikationen installiert und in Betrieb nimmt.
  
 
=Installation von Node.js=
 
=Installation von Node.js=
Grundlage für alle weiteren Installationen ist die Javascript-Console Node.js. Die Installation wird folgendermaßen durchgeführt:
+
Grundlage für alle weiteren Installationen ist die serverseitige Plattform für Netzwerkanwendungen [https://nodejs.org Node.js], mit der insbesondere [[Webserver]] realisiert werden können. Die Installation wird folgendermaßen durchgeführt:
  
 
  sudo apt-get install nodejs nodejs-legacy
 
  sudo apt-get install nodejs nodejs-legacy
  
 +
==Node.js testen==
 
Um zu testen, ob Node.js nun auch funktioniert wird ''node'' auf der Console gestartet:
 
Um zu testen, ob Node.js nun auch funktioniert wird ''node'' auf der Console gestartet:
  
Zeile 35: Zeile 38:
 
Die Installation von Polymer wird mittels ''Node Package Manager'' durchgeführt. Dieser wurde bereits im ersten Schritt auf dem System installiert.  
 
Die Installation von Polymer wird mittels ''Node Package Manager'' durchgeführt. Dieser wurde bereits im ersten Schritt auf dem System installiert.  
  
In einem ersten Teilschritt wird nun ''Bower'' installiert:
+
In einem ersten Teilschritt wird nun [https://bower.io/ Bower], ein Paketverwaltungstool für clientseitige Webentwicklung, installiert:
  
  npm install -g bower
+
  sudo npm install -g bower
  
 
Anschließend installieren wir das Polymer Framework. Folgender Befehl auf der Console wird nun zur Installation von Polymer eingegeben:
 
Anschließend installieren wir das Polymer Framework. Folgender Befehl auf der Console wird nun zur Installation von Polymer eingegeben:
Zeile 44: Zeile 47:
  
 
=Polymer Starter-Kit=
 
=Polymer Starter-Kit=
Auf der Webseite von [https://www.polymer-project.org/1.0/ Polymer] wird ein Starter-Kit bereit gestellt, mit dem sich einen ersten Eindruck von den Möglichkeiten von Polymer verschaffen kann.
+
Auf der Webseite von [https://www.polymer-project.org/1.0/ Polymer] wird ein Starter-Kit bereit gestellt, mit dem man sich einen ersten Eindruck von den Möglichkeiten von Polymer verschaffen kann.
  
 +
==Projekt-Verzeichnis vorbereiten==
 
Für das von Polymer zu erzeugende Starter-Kit erzeugen wir auf der Console in einem passenden Verzeichnis ein neues Projekt-Verzeichnis namens ''my-app'' In diesem Verzeichnis lassen wir uns anschließend das Projekt des Starter-Kits erzeugen.
 
Für das von Polymer zu erzeugende Starter-Kit erzeugen wir auf der Console in einem passenden Verzeichnis ein neues Projekt-Verzeichnis namens ''my-app'' In diesem Verzeichnis lassen wir uns anschließend das Projekt des Starter-Kits erzeugen.
  
Zeile 51: Zeile 55:
 
  cd my-app
 
  cd my-app
  
Damit haben wir das Verzeichnis erzeugt und sind in dieses gewechselt. Nun lassen wir uns das Projekt erzeugen:
+
Damit haben wir das Verzeichnis erzeugt und sind in dieses gewechselt.
 +
 
 +
==Projekt erzeugen==
 +
Nun lassen wir uns das Projekt erzeugen:
  
 
  polymer init starter-kit
 
  polymer init starter-kit
  
 +
==Projekt testen==
 
Nach wenigen Sekunden ist das Projekt fertig erzeugt und wir können es nun zum Testen ausführen:
 
Nach wenigen Sekunden ist das Projekt fertig erzeugt und wir können es nun zum Testen ausführen:
  
 
  polymer serve --open
 
  polymer serve --open
  
Mit diesem Befehl wird der Standard-Browser gestartet und das Projekt geladen.
+
Mit diesem Befehl wird zunächst der mitgelieferte Webserver gestartet. Anschließend wird automatisch der Standard-Browser geöffnet und das Projekt geladen.
  
 
So lange die Console noch geöffnet ist, ist auch der Webserver, der mit Polymer ausgeliefert wurde aktiv.
 
So lange die Console noch geöffnet ist, ist auch der Webserver, der mit Polymer ausgeliefert wurde aktiv.
Das Projekt kann nun editiert werden und jederzeit erneut im Browser ausgeführt werden. Dazu muss die lokale URL des Rechners mit dem Port des Webservers in die Browserzeile getippt werden:
+
Das Projekt kann nun editiert werden und jederzeit erneut im Browser ausgeführt werden. Dazu muss die lokale URL des Rechners mit dem Port des Webservers in die Adresszeile des Browsers getippt werden:
  
 
  http://localhost:8080
 
  http://localhost:8080

Aktuelle Version vom 11. Oktober 2017, 17:47 Uhr


Im vorliegenden Artikel wird kurz und knapp beschrieben, wie man auf einem Rechner mit einem Debian/Ubuntu-Derivat das von Google entwickelte Framework Polymer zur Erstellung von Web Components und Web-Applikationen installiert und in Betrieb nimmt.

Installation von Node.js

Grundlage für alle weiteren Installationen ist die serverseitige Plattform für Netzwerkanwendungen Node.js, mit der insbesondere Webserver realisiert werden können. Die Installation wird folgendermaßen durchgeführt:

sudo apt-get install nodejs nodejs-legacy

Node.js testen

Um zu testen, ob Node.js nun auch funktioniert wird node auf der Console gestartet:

node

Daraufhin wird eine Javascript-Console gestartet, in die wir Javascript-Code eingeben, der uns ein einfaches Hello World ausgibt.

console.log("Hallo Welt")

Die Ausgabe wird bei korrketer Funktionalität lauten:

Hallo Welt

Um die Javascript-Console wieder zu schließen, drücken wir 2x nacheinander die Tastenkombination [STRG]+[C]

Installation von Git

Im nun folgenden Schritt ist die Installation der Versionsverwaltung Git notwendig. Sollte diese bereits auf dem System installiert sein (Test durch Eingabe von git auf der Console), kann gleich zum nächsten Schritt gesprungen werden.

Wenn Git noch nicht installiert ist, holen wir das gleich nach. In unsere Console geben wir nun ein:

sudo apt-get install git

Damit sind alle Voraussetzungen geschaffen um nun die das Kommandozeilen-Interface (CLI) von Polymer zu installieren.

Installation des Polymer-CLI

Die Installation von Polymer wird mittels Node Package Manager durchgeführt. Dieser wurde bereits im ersten Schritt auf dem System installiert.

In einem ersten Teilschritt wird nun Bower, ein Paketverwaltungstool für clientseitige Webentwicklung, installiert:

sudo npm install -g bower

Anschließend installieren wir das Polymer Framework. Folgender Befehl auf der Console wird nun zur Installation von Polymer eingegeben:

sudo npm install -g polymer-cli

Polymer Starter-Kit

Auf der Webseite von Polymer wird ein Starter-Kit bereit gestellt, mit dem man sich einen ersten Eindruck von den Möglichkeiten von Polymer verschaffen kann.

Projekt-Verzeichnis vorbereiten

Für das von Polymer zu erzeugende Starter-Kit erzeugen wir auf der Console in einem passenden Verzeichnis ein neues Projekt-Verzeichnis namens my-app In diesem Verzeichnis lassen wir uns anschließend das Projekt des Starter-Kits erzeugen.

mkdir my-app
cd my-app

Damit haben wir das Verzeichnis erzeugt und sind in dieses gewechselt.

Projekt erzeugen

Nun lassen wir uns das Projekt erzeugen:

polymer init starter-kit

Projekt testen

Nach wenigen Sekunden ist das Projekt fertig erzeugt und wir können es nun zum Testen ausführen:

polymer serve --open

Mit diesem Befehl wird zunächst der mitgelieferte Webserver gestartet. Anschließend wird automatisch der Standard-Browser geöffnet und das Projekt geladen.

So lange die Console noch geöffnet ist, ist auch der Webserver, der mit Polymer ausgeliefert wurde aktiv. Das Projekt kann nun editiert werden und jederzeit erneut im Browser ausgeführt werden. Dazu muss die lokale URL des Rechners mit dem Port des Webservers in die Adresszeile des Browsers getippt werden:

http://localhost:8080

Webserver beenden

Der Webserver kann mit der Tastenkombination [STRG]+[C] oder einfach durch Schließen der Console beendet werden