Creating an Ember app

« Précédent Suivant »

Il y a plusieurs manières de structurer une application construite sur les technologies web, et décider de cette organisation peut prendre du temps. Heureusement, quand on travaille avec un outil comme Ember CLI, la structure de l'application est déterminée pour vous. Cela permet de rendre très simple l'intégration de nouvelles ressources ou de modèles de vue (templates) et d'automatiser les tâches répétitives, en laissant plus de temps pour se concentrer sur l'amélioration de l'application. Cet article décrit l'installation du client Ember-CLI et son utilisation pour générer un squelette de l'application sur lequel nous allons dévélopper.

Qu'est-ce que nous allons créer ?

Nous allons créer une application MVC simple apellée world-clock, qui affichera l'heure locale, se mettra à jour chaque seconde, et permettra de choisir d'afficher d'autres fuseaux horaires. Vous pouvez voir une démo de l'application, et récupèrer le code-source complet sur Github.

Installation des outils

Pour installer Ember/Ember CLI, il est nécessaire de suivre les instructions de cette section.

Note: Nous allons beaucoup utiliser la ligne de commande pour cet article. Si vous n'êtes pas sûr de comment utiliser la ligne de commande, ne vous inquietez pas — ces instructions l'expliquent. Chaque système d'exploitation possède un outil de ligne de commande.

Nous allons aussi utiliser des bibliothèques JavaScript qui permettrons de simplifier l'implémentations de fonctionnalités complexes de notre application, et nous aiderons à écrire un code plus clair et plus lisible :

Handlebars pour écrire des modèles de vue (templates). Ember l'inclut automatiquement.
LocalForage pour stocker et gèrer les données en mode hors-ligne. Nous verrons comment l'installer par la suite.
Moment Timezone pour fournir une liste des fuseaux horaires disponibles, et nous permettre de l'afficher de manière lisible. Nous verrons aussi comment l'installer par la suite.

Pour démarrez, suivez ces étapes:

Il est nécessaire d'avoir Git d'installé pour utiliser certaines fonctionnalités d'Ember. Installez-le maintenant.
Ember CLI nécessite Node.js. Allez sur le site pour télécharger et installer Node avant de passer aux étapes suivantes.
Ouvrez votre terminal ou votre console.
Installer Ember CLI en utilisant le gestionnaire de package de Node (NPM):
```
npm install -g ember-cli
```
Pour vérifier que l'installation a bien fonctionné, saisissez:
```
ember -v
```

Note: Si vous avez une erreur de droits, ou EACCESS si vous êtes sous Linux, Mac OS X, ou tout autre dérivé d'Unix, il y a peut être un problème avec le propriétaire du dossier .npm . Une solution est d'utiliser la commande chown de votre terminal, like so, afin de remplacer le chemin vers le dossier .npm : sudo chown -R $USER /Users/[VOTRE NOM UTILISATEUR]/.npm.

Créer la structure de base

Même si nous avons reporté une bonne part de responsabilité sur Ember CLI, il est toujours important d'être familiarisé avec la manière dont ces projets sont initiés. Démarrons en créant un nouveau projet. Nous allons générer la structure de base de l'application et la mettre à disposition en local pour la voir dans le navigateur web.

La première étape est de penser à un nom court, mémorisable, pour votre projet — dans ce cas nous allons choisir world-clock.
Depuis le terminal ou l'invite de commande, déplacez vous vers le repertoire sur votre disque dur où vous souhaitez créer votre application:
```
cd chemin-du-repertoire
```
Créer votre nouveau projet avec la commande suivante:
```
ember new world-clock
```
Ember va générer un nouveau dossier contenant votre projet dans le répertoire actuel. Ce dossier va contenir tous les outils et ressources nécessaires pour une application Ember basique. Bien que cela puisse sembler un peu trop pour garder un suivi, vous trouverez que cette structure founit une grande flexibilité quand vous souhaiterez ajouter plus de fonctionnalités dans votre application.
Déplacez vous dans ce nouveau dossier, à la racine de votre projet, pour regarder:
```
cd world-clock
ls      # utiliser la commande dir sous Windows
```

Démarrer l'application

Pendant que vous modifiez les fichiers de votre application, Ember CLI va automatiquement compiler et concatèner les fichiers pour vous. Ember CLI fournit aussi un serveur de développement qui vous permet de voir et rechercher les défaillances de vos modifications pendant que vous les faites. Pour démarrer votre application:

A partir du dossier racine de votre projet, lancer la commande suivante:
```
ember serve
```
Si vous avez le message Run 'bower install' to install missing dependencies, lancez la commande : bower install dans votre terminal/invite de commande puis retentez ember serve .
Un autre message qui peut apparaître est 'ENOGIT git is not installed or not in the PATH' — ce qui signifit que Git n'est pas disponible; installez Git et ré-essayez.
Ouvrez votre navigateur sur la page https://localhost:4200/. Vous devriez voir une page avec le simple titre "Welcome to Ember.js"

Structure d'une appplication Ember

Vous en apprendrez plus sur la structure d'une application Ember au fur et à mesure des sections de ce guide, mais voici quelques fichiers et repertoires importants à mettre en avant dès à présent.

Regardez à nouveau dans le repertoire de votre projet, en utilisant ls/dir (ou regardez le via l'explorateur de fichier si vous préférez).

Vous remarquerez, dans cette structure, un répertoire dist. A chaque fois qu'Ember CLI va construire votre application, il va placer les fichiers finaux, prêts pour la production, de votre application dans ce dossier. Vous ne devez jamais éditer un des fichiers de ce répertoire directement, vu qu'ils seront ré-écrits et écrasés à chaque fois qu'Ember CLI va construire l'application.
Vous voyez aussi un répertoire app: c'est ici que vous allez faire les modifications du code de votre application. Le contenu de ce repertoire est construit puis copié dans le répertoire dist quand vous lancez ember serve.
Il y a aussi un répertoire public, où vous pouvez déposer vos ressources qui ne nécessitent aucun traitement pour construction, commes les polices de caractère où les images. Elles sont copiées telles-quelles dans le répertoire dist quand vous lancez ember serve.
Il y a un fichier package.json à la racine de votre projet, qui contients certaines informations de configuration, comme le nom de l'application, et quelles dépendances il a.
A la racine de votre projet vous allez aussi trouver ember-cli-build.js, qui contients les détails de toute les bibliothèques externes, ressources, etc. qu'il faut inclure pour la construction de votre application. La compilation des ressources Ember CLI est basée sur l'outil de pipeline broccoli.

Note: Une explication plus détaillé de la structure de l'application peut être trouvée dans la documentation Ember.

Suite

Désormais nous avons une nouvelle application toute neuve qui tourne en local et avec laquelle nous pouvons travailler. Pour la suite nous allons voir comment ajouter une route dans notre application qui va afficher le contenu d'un modèle de vue associé.