Développez avec la plate forme Polymer de Google – TUTO 1 Votre environnement de travail

Polymer est la plate forme de développement de Google basée sur des Web components. Pour faire simple Polymer ajoute sur le HTML5 une nouvelle couche de balises qui permettent de développer rapidement en intégrant très facilement les API de Google et le Matériel Design.

J’ai décidé de me lancer dans le développement avec cette plate forme surtout que celle-ci offrira la possibilité de migrer facilement ses Web app polymer vers des applications Android. Je vas faire une série de tuto autour de mon expérience sur ce framework.

Dans ce premier tuto je vais mettre en place mon environnement de travail. le système d’exploitation sur lequel je vais travailler est Windows 7.

Il vous faudra tout d’abord installer sur votre ordinateur un serveur Apache, moi j’ai choisi la version WampServer que vous pouvez télécharger ici.Je vous mets ci dessous un tuto en vidéo “comment installer Wampserver”.

.

Je vous conseille de créer un répertoire par exemple (PlateformPolymer) dans lequel vous allez mettre tous les fichiers.

Pour installer et utiliser le Framework Polymer j’ai choisi d’utiliser la solution avec un gestionnaire de dépendance Bower. Bower est un outil mis à disposition par les développeurs de twitter qui permet d’automatiser des taches répétitifs. il assure également la mise à jour des fichiers de vos différentes librairies.

Deux pré-requis sont nécessaires au bon fonctionnement de Bower :

• Node.js (et son manager NPM, Node Packaged Modules)
• Git

Vous trouverez sur le site alsacreations.com un excellent tutoriel pour installer l’environnement Bower. Attention sous Window 7 assurez que la console est lancée avec l’utilisateur administrateur sinon vous risquez d’avoir quelques bugs.

Quand vous avez fini l’installation de Bower vous devez vérifier deux choses.

• Il faut que les chemins des répertoires ou sont installée Node.js et Git sont bien enregistrés dans la variable d’environnement PATH. Un video ci dessous pour illlustrer comment on trouve le PATH sous windows 7.
• [jwplayer mediaid=”129645″]
• Ensuite dans votre fenêtre DOS les deux commandes ‘Git –version‘ et ‘node –version‘  doivent vous renvoyer leur version installée.

Votre gestionnaire de dépendance en place nous allons maintenant créer notre premier projet avec Polymer.

• Créer un répertoire projet_I dans le répertoire principal PlateformPolymer
• Lancer la console DOS et positionnez vous dans ce nouveau répertoire “cd C:\PlateformPolymer\projet_I”
• Toujours dans la console lancer la commande “bower init” est suivez les instructions
• 
• Dans votre répertoire projet_I vous devez avoir un fichier bower.json qui s’est crée.

Ensuite c’est la puissance de Bower qui va nous permettre de mettre en place l’ensemble des fichiers pour le bon fonctionnement de Polymer. Toujours en ligne de commande nous allons rappatrier les différentes librairies donc nous aurons besoin avec les commandes suivantes.

• bower install –save Polymer/polymer
• bower install —save Polymer/core-elements
• bower install –save Polymer/paper-elements

Vous devez retrouver dans votre répertoire projet_I un nouveau répertoire qui s’est créé tout seul bower_compoments avec plusieurs sous répertoires. 

Nous sommes maintenant prêt pour développer notre première application avec Polymer. Vous pouvez retrouver la série de ces tutos ici.