Node.js-Tutorium: Hello World: Webapp: Unterschied zwischen den Versionen
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Kowa (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
| (2 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 12: | Zeile 12: | ||
==Realsierung mit <code>yeoman/generator-webapp</code>== | ==Realsierung mit <code>yeoman/generator-webapp</code>== | ||
Stellen Sie zunächst sicher, dass [[Node.js#Installation|Yeoman installiert worden ist]]. | Stellen Sie zunächst sicher, dass [[Node.js#Installation|Yeoman einschließlich Bower und Grund installiert worden ist]]. | ||
Erstellen Sie ein neues Projektverzeichnis und wechseln Sie in der Konsole in dieses Verzeichnis: | Erstellen Sie ein neues Projektverzeichnis und wechseln Sie in der Konsole in dieses Verzeichnis: | ||
| Zeile 24: | Zeile 24: | ||
:<code>yo webapp</code> | :<code>yo webapp</code> | ||
Die erste | Die erste Frage, ob Sie anonyme Daten am Yeoman schicken wollen, | ||
können Sie beantworten, wie es Ihnen beliebt. | können Sie beantworten, wie es Ihnen beliebt. | ||
| Zeile 42: | Zeile 42: | ||
:<code>grunt serve</code> | :<code>grunt serve</code> | ||
starten. | starten. Es sollte sich Ihr Default-Browser öffnen. Dieser sollte die [[URL]] http://localhost:9000/ öffnen und | ||
Sie auf diese Weise mit den Worten „'Allo, 'Allo! Always a pleasure scaffolding your apps.“ begrüßen. | |||
{{TBD}} | |||
==Quellen== | ==Quellen== | ||
Aktuelle Version vom 18. November 2014, 16:13 Uhr
Dieser Artikel erfüllt die GlossarWiki-Qualitätsanforderungen nur teilweise:
| Korrektheit: 4 (großteils überprüft) |
Umfang: 1 (zu gering) |
Quellenangaben: 5 (vollständig vorhanden) |
Quellenarten: 5 (ausgezeichnet) |
Konformität: 5 (ausgezeichnet) |
Node.js-Tutorium Hello World
Übersicht: Teil 1: Konsole | Teil 2: HTTP | Teil 3: TCP
Use Cases
Es soll ein einfacher Node.js-Web-Server erstellt werden, der
unter der URL http://localhost:7777/ eine HTML-Seite mit dem
Inhalt Hallo, Welt! als Ergebnis liefert.
Auf der Seite soll sich außerdem ein Eingabefeld und ein Butoon befinden.
Wenn der Benutzer seinen Namen eingibt und auf den Button klickt, wird
er zusätzlich mit seinem Namen begrüßt: Hallo, <BENUTZERNAME>!.
Realsierung mit yeoman/generator-webapp
Stellen Sie zunächst sicher, dass Yeoman einschließlich Bower und Grund installiert worden ist.
Erstellen Sie ein neues Projektverzeichnis und wechseln Sie in der Konsole in dieses Verzeichnis:
mkdir -p <Projektverzeichnis>cd <Projektverzeichnis>
Installieren Sie nun die webapp-Verzeichnisstruktur:
npm install -g generator-webappyo webapp
Die erste Frage, ob Sie anonyme Daten am Yeoman schicken wollen, können Sie beantworten, wie es Ihnen beliebt.
Danach sollten Sie zumindest die beiden Optionen Bootstrap und
Sass auswählen. Modernizr benötigen Sie nur, wenn sie
browserspezifischen Code erstellen möchten.
Die folgende Frage nach Sass beantworten Sie mit y, die Frage nach dem Versand
anonymer Daten beantworten Sie wieder nach Gutdünken.
Zum Schluss können Sie die Webanwendung mittels
grunt
erstellen und mittels
grunt serve
starten. Es sollte sich Ihr Default-Browser öffnen. Dieser sollte die URL http://localhost:9000/ öffnen und Sie auf diese Weise mit den Worten „'Allo, 'Allo! Always a pleasure scaffolding your apps.“ begrüßen.
TO BE DONE
Quellen
- Kowarschick (MMProg): Wolfgang Kowarschick; Vorlesung „Multimedia-Programmierung“; Hochschule: Hochschule Augsburg; Adresse: Augsburg; Web-Link; 2018; Quellengüte: 3 (Vorlesung)
