Share
In diesem dreiteiligen Lernprogramm werden wir uns eingehend mit der Erstellung einer To-Do-Listenverwaltungs-App in Node.js und Geddy von Grund auf beschäftigen. In diesem einleitenden Artikel erfahren Sie, wie Sie Node.js unter Windows und OS X installieren, Geddy installieren und unsere erste App generieren. Bereit?
Wenn Sie bereits seit einigen Jahren Web-Apps entwickeln, sind Sie wahrscheinlich bereits mit Node.js vertraut, aber lassen Sie uns noch einmal darüber nachdenken - nur für den Fall, dass Sie neu in der Szene sind.
Node.js ist eine Plattform, die auf der JavaScript-Laufzeitumgebung von Chrome basiert, um auf einfache Weise Anwendungen in JavaScript zu erstellen, die auf dem Server ausgeführt werden. Node.js verwendet ein ereignisgesteuertes, nicht blockierendes E / A-Modell, das es ideal für die Erstellung von Echtzeit-Apps macht.
Geddy sollte dir sehr vertraut vorkommen.
Geddy ist ein einfaches und strukturiertes MVC-Framework (Model, View, Controller) für Node.js. Sie können damit schnell Web-Apps und JSON-APIs erstellen. Wenn Sie mit Ruby on Rails oder dem CodeIgniter von PHP gearbeitet haben, sollte Geddy Ihnen sehr vertraut sein. Es verfügt über einen unruhigen Router, ein Template-Rendering, Controller und Modelle.
Node.js läuft unter Windows, OS X und Linux. Ich zeige Ihnen, wie Sie sich sowohl unter Windows als auch unter OS X einrichten. Wenn Sie Linux verwenden, gehe ich davon aus, dass Sie Node installiert haben, wissen, wie er installiert wird, oder jemanden kennen, der Ihnen helfen kann der Prozess.
Gehen Sie zuerst zu http://nodejs.org und klicken Sie auf die Schaltfläche "Herunterladen". Suchen Sie den Installer-Link für Ihr Betriebssystem und laden Sie ihn herunter. Folgen Sie der Installationsaufforderung, um installiert zu werden. Wenn Sie Windows verwenden, müssen Sie möglicherweise Ihren Computer neu starten, damit der Befehl 'node' auf Ihrem Pfad angezeigt wird.
Sie sollten jetzt sowohl Node als auch npm (Node Package Manager) installiert haben.
Node hat einen großartigen Paketmanager eingebaut. Er heißt "npm" und zum jetzigen Zeitpunkt sind fast 8.000 Pakete verfügbar. Besuchen Sie http://toolbox.no.de, um sie zu durchsuchen, wenn Sie möchten. Für dieses Tutorial verwenden wir jedoch npm, um Geddy (unser Framework) und Jake (das von Geddy verwendete Build-Tool) zu installieren:
Jake ist ein JavaScript-Build-Programm für Node.js.
Accentsconagua
npm install -g geddy jake Das ist es! Nachdem Geddy installiert ist, können Sie nun die erste App generieren.
Geddy verwendet eine globale ausführbare Datei, um Apps / Ressourcen zu generieren und Ihren App-Server zu starten. Dies erfolgt alles in der Befehlszeile, also öffnen Sie Ihr Terminal wieder. Bevor wir unsere App generieren, wollen wir CD an einem guten Ort, um Ihre App zu speichern. Dies kann sich überall auf Ihrem Computer befinden, ich bevorzuge jedoch meine Entwicklung in meinem Computer ~ / dev / Verzeichnis.
CD-Pfad / zu / dem / Ort / Ihnen / Code
Als nächstes verwenden wir geddy um unsere App-Struktur zu generieren. Wir werden eine To-Do-Anwendung erstellen, also rufen wir unsere an, todo_app
geddy app todo_app
Alles erledigt. Nun, was hat das für uns getan??
Wenn Sie einen Blick in das neu erstellte werfen todo_app Verzeichnis, werden Sie sehen, dass Geddy für Sie ziemlich viel Code generiert hat. Ihre Verzeichnisstruktur sollte so aussehen:
Lass uns Schritt für Schritt durchgehen:
App: Hier passiert die meiste Magie. Die Logik Ihrer App befindet sich größtenteils in einem der drei Verzeichnisse dieses Verzeichnisses.
App / Controller: Alle Controller Ihrer App (der Teil, der Ihre Modelle mit Ihren Ansichten verbindet) werden hier angezeigt. Sie werden auch feststellen, dass sich dort bereits zwei Controller-Dateien befinden: application.js (von denen alle Controller erben) und main.js (der Controller, der Ihre bindet / Weg zu Ihrem app / views / main / index.html.ejs Vorlage).
App / Modelle: Hier werden Sie Ihre Modelle speichern - es ist noch nichts dabei, aber wir werden eines im nächsten Tutorial hinzufügen.
App / Ansichten: Hier werden alle Vorlagen Ihrer App gespeichert. Für jetzt werden Sie sehen, dass Sie eine haben application.html.ejs Datei in der Layouts Verzeichnis - Diese Datei ist die Hauptvorlage für Ihre App. Der gesamte Front-End-Wrapper-Code sollte hier eingegeben werden. Sie sollten auch eine haben index.html.ejs Datei in der Main Verzeichnis. Dies wird von der Hauptsteuerung gerendert Index Aktion, wenn Sie auf die / Route.
Konfig: Die Konfigurationsdateien für Ihre App finden Sie hier. Du solltest die haben entwicklung.js, production.js, environment.js, router.js und init.js Dateien dort. Das init.js Datei ist eine Datei, die unmittelbar nach dem Start der App ausgeführt wird, bevor Anforderungen eingehen. Mit dieser Funktion können Sie Funktionen und Eigenschaften hinzufügen, die app-weit sein müssen. Die router.js Datei wird verwendet, um Routen für Ihre Anwendung zu erstellen. Routen verknüpfen URLs mit Controller-Aktionen. Für globale Einstellungen möchten Sie das bearbeiten environment.js Datei. Bearbeiten Sie für Produktions- und Entwicklungseinstellungen die entsprechenden Konfigurationsdateien.
lib: Hier können Sie alle Dateien, die Sie verwenden möchten, überall in Ihrer App ablegen.
Log: Alle Ihre Protokolle werden hier gespeichert. Du solltest eine bekommen access.log, ein stdout.log, und ein stderr.log Nachdem Sie Ihre App ausgeführt haben.
Knotenmodule: Hier werden die von Ihnen installierten Module gespeichert. Betrachten Sie es als eine Bibliothek für den Code anderer.
Öffentlichkeit: Zum Schluß werden hier alle Ihre Frontend-spezifischen Dinge leben. Alle Ihre CSS-Dateien, Bilder und Front-End-JS-Dateien befinden sich hier. Sie werden feststellen, dass Twitter Bootstrap und jQuery alle Geddy-Apps enthalten.
Nachdem wir jetzt eine App erstellt haben, werde ich Ihnen zeigen, wie Sie die App starten können. Öffnen Sie zunächst das Terminal erneut und navigieren Sie zum Verzeichnis Ihrer App:
cd ~ / pfad / zu / code / todo_app
Sobald Sie dort sind, starten Sie die App mit der geddy Befehl:
geddy
Sie sollten einige Ausgaben sehen, die ein bisschen so aussehen:
Nun, da wir den Server hochgefahren haben, checken Sie es im Browser aus. Besuch http: // localhost: 4000, und schau es dir an!
Bonus: Da Geddy Bootstrap standardmäßig verwendet und das responsive Layout aktiviert ist, wird unsere App sofort in einem mobilen Browser angezeigt. Ändern Sie die Größe Ihres Browserfensters, um dies zu überprüfen.
Damit ist der erste Teil unserer Tutorialserie zu Node.js und Geddy abgeschlossen. Im nächsten werde ich zeigen, wie man eine machen Ressourcen (die uns eine bessere Basis geben, auf der wir unsere App aufbauen können), und gehen Sie auf die Details des Erstellens einer echten App mit Geddy ein. Wenn Sie Fragen haben, können Sie hier einen Kommentar hinterlassen oder eine Ausgabe auf GitHub öffnen. Bleib dran!
