Dans cette série de didacticiels en trois parties, nous allons nous plonger dans le processus de création d'une application de gestion de liste de tâches dans Node.js et Geddy à partir de zéro. Dans cet article d'introduction, nous verrons comment installer Node.js sous Windows et OS X, comment installer Geddy et générer notre première application. Prêt?
Si vous développez des applications Web depuis quelques années, vous connaissez probablement déjà Node.js, mais revenons au-dessus - au cas où vous découvririez la scène.
Node.js est une plate-forme basée sur le moteur d'exécution JavaScript de Chrome permettant de créer facilement des applications en JavaScript s'exécutant sur le serveur. Node.js utilise un modèle d'E / S non bloquant et basé sur les événements, ce qui le rend parfait pour la création d'applications en temps réel..
Geddy devrait te sentir très familier.
Geddy est un framework MVC (modèle, vue, contrôleur) simple et structuré pour Node.js. Vous pouvez l'utiliser pour créer rapidement des applications Web et des API JSON. Si vous avez déjà travaillé avec Ruby on Rails ou avec CodeIgniter, Geddy devrait vous être très familier. il possède un routeur reposant, un rendu de modèle, des contrôleurs et des modèles.
Node.js fonctionne sous Windows, OS X et Linux. Je vais vous montrer comment configurer Windows et OS X. Si vous êtes sous Linux, je présume que Node est installé, que vous savez le faire installer ou que vous connaissez quelqu'un qui peut vous aider. le processus.
Tout d’abord, allez sur http://nodejs.org et cliquez sur le bouton de téléchargement. Recherchez le lien du programme d'installation correspondant à votre système d'exploitation et téléchargez-le. Suivez l'invite d'installation pour vous installer. Si vous utilisez Windows, vous devrez peut-être redémarrer votre ordinateur pour que la commande 'node' soit sur votre chemin..
Vous devriez maintenant avoir à la fois Node et npm (Node Package Manager) installés.
Node a un excellent gestionnaire de paquets intégré. Il s'appelle, npm, et, au moment d'écrire ces lignes, près de 8 000 paquets sont disponibles. Consultez http://toolbox.no.de pour les parcourir si vous le souhaitez. Pour ce tutoriel, cependant, nous utiliserons npm pour installer Geddy (notre framework) et Jake (l’outil de compilation utilisé par Geddy):
Jake est un programme de construction JavaScript pour Node.js..
npm installer -g geddy jake
C'est tout! Maintenant que Geddy est installé, voyons comment générer votre première application..
Geddy utilise un exécutable global pour générer des applications / ressources et pour démarrer votre serveur d'applications. Tout cela se fera sur la ligne de commande, alors ouvrez à nouveau votre terminal. Avant de générer notre application, CD
à un bon emplacement pour stocker votre application. Cela peut être n'importe où sur votre machine, cependant, je préfère faire mon développement dans mon ~ / dev /
annuaire.
cd path / to / the / place / you / code
Ensuite, nous allons utiliser geddy
pour générer notre structure d'application. Nous allons créer une application à faire, nous allons donc appeler la nôtre, todo_app
geddy app todo_app
Terminé. Maintenant qu'est-ce que cela fait pour nous?
Si vous regardez dans la nouvelle création todo_app
répertoire, vous verrez que Geddy a généré pas mal de code pour vous. Votre structure de répertoire devrait ressembler à ceci:
Passons en revue ces éléments un par un:
app: Voici où la plupart de la magie se produit. La majeure partie de la logique de votre application sera située dans l'un des trois répertoires contenus dans celui-ci..
app / contrôleurs: Tous les contrôleurs de votre application (la partie qui relie vos modèles à vos vues) sont affichés ici. Vous remarquerez également qu'il y a déjà deux fichiers de contrôleur dans celui-ci: application.js
(dont tous les contrôleurs héritent) et main.js
(le contrôleur qui lie votre /
route vers votre app / views / main / index.html.ejs
modèle).
app / modèles: Voici où vous allez stocker vos modèles - il n’y a encore rien, mais nous en ajouterons un lors du prochain tutoriel.
app / vues: Tous les modèles de votre application sont stockés ici. Pour l'instant, vous verrez que vous avez un application.html.ejs
déposer dans le mises en page
directory - ce fichier est le modèle principal de votre application, tout votre code d'encapsuleur frontal devrait être inséré ici. Vous devriez aussi avoir un index.html.ejs
déposer dans le principale
annuaire. C’est ce qui est rendu par le contrôleur principal indice
action lorsque vous frappez la /
route.
config: Les fichiers de configuration de votre application vont ici. Vous devriez avoir le développement.js
, production.js
, environment.js
, routeur.js
et init.js
fichiers dedans. le init.js
fichier est un fichier qui s'exécute juste après le démarrage de l'application, avant toute requête. Cela peut être utilisé pour ajouter des fonctions et des propriétés devant être appliquées à l'ensemble de l'application.. Le routeur.js
Le fichier est utilisé pour créer des itinéraires pour votre application. Les itinéraires relient les URL aux actions du contrôleur. Pour les paramètres globaux, vous voudrez éditer le environment.js
fichier. Pour les paramètres de production et de développement, éditez les fichiers de configuration correspondants.
lib: C'est l'endroit où vous pouvez placer tous les fichiers que vous souhaitez utiliser dans votre application..
bûche: Tous vos journaux seront stockés ici. Vous devriez avoir un access.log
, une stdout.log
, et un stderr.log
après avoir exécuté votre application.
node_modules: C'est ici que seront stockés les modules que vous installez. Pensez-y comme une librairie pour le code des autres.
Publique: Enfin, voici où tous vos contenus spécifiques se trouveront. Tous vos fichiers css, images et fichiers js frontaux seront présents ici. Vous remarquerez que le bootstrap et le jQuery de Twitter sont pré-emballés avec toutes les applications Geddy..
Maintenant qu'une application est générée, je vais vous montrer comment la démarrer. Tout d'abord, ouvrez à nouveau le terminal et accédez au répertoire de votre application:
cd ~ / chemin / vers / code / todo_app
Une fois que vous êtes là, démarrez l'application en utilisant le geddy
commander:
geddy
Vous devriez voir une sortie qui ressemble un peu à ceci:
Maintenant que nous avons démarré le serveur, allez-y et vérifiez-le dans le navigateur. Visite http: // localhost: 4000
, et jeter un coup d'oeil!
Prime: Parce que Geddy utilise Bootstrap prêt à l'emploi, avec sa mise en page réactive activée, notre application s'affichera immédiatement dans un navigateur mobile. Redimensionnez la fenêtre de votre navigateur pour vérifier cela.
Ceci conclut la première partie de notre série de tutoriels sur Node.js et Geddy. Dans le prochain, je montrerai comment générer un faire
ressource (qui nous donnera une meilleure base pour construire notre application), et entrer dans les détails de la construction d’une application réelle avec Geddy. Si vous avez des questions, n'hésitez pas à laisser un commentaire ici ou à ouvrir un numéro sur GitHub. Restez à l'écoute!