I. Introduction▲
Pour vous présenter le meilleur des services DevOps de Bluemix, j'ai écrit un tutoriel en une série de quatre parties. Dans la première partie, vous allez apprendre comment déployer et effectuer des modifications pour une simple application. Dans la deuxième partie, vous allez apprendre comment déployer une application qui utilise un service de Bluemix. Dans la troisième partie, vous allez apprendre comment utiliser les capacités de planification des services DevOps de Bluemix pour planifier et traquer votre application, vous allez aussi apprendre comment ajouter un nouveau service Bluemix à votre application, et comment écrire du code pouvant utiliser un service Bluemix. Dans la partie IV, vous allez apprendre comment utiliser le service Delivery Pipeline pour déployer votre application dans Bluemix automatiquement chaque fois que vous ou quelqu'un de votre équipe mettez un code dans le repository de votre projet.
Comme un bonus à toute la connaissance que vous allez acquérir en travaillant avec les exemples de cette série, vous aurez une application qui vous vérifie les prix des produits dans des magasins en ligne ; donc vous n'avez plus à surfer sur le web pour voir si vos produits favoris sont en vente ou non ! (Pouvez-vous dire, j'aime faire les boutiques ?)
II. Que couvre cette première partie ?▲
Dans cette première partie, vous allez apprendre à :
- faire un fork d'une application existante ;
- déployer une application sur Bluemix à partir de services DevOps de Bluemix ;
- effectuer des modifications sur une application dans l'environnement de développement intégré (EDI) des services DevOps de Bluemix.
III. À propos de l'application▲
Dans cet atelier, vous allez travailler avec un exemple de magasin en ligne appelé « Lauren's Lovely Landscapes ». Le magasin vend présentement trois gravures ; sur la page de chacune des gravures, on a le nom, l'image et le prix de la gravure.
Liens utiles :
IV. Ce dont vous avez besoin pour démarrer▲
Avant de démarrer, vous avez besoin d'être connecté sur Bluemix et les services DevOps de Bluemix. Vous aurez aussi besoin d'un des navigateurs suivants :
- Firefox 15 ou version supérieure ;
- Chrome 21 ou version supérieure ;
- Internet Explorer 10 ou version supérieure ;
- Safari 7 ou version supérieure.
V. Charger le magasin en ligne▲
Comme vous allez travailler et tester le « Fabulous Price Finder », que vous utiliserez dans les ateliers 2 et 3, avoir un magasin en ligne où vous pourrez manipuler les prix serait nécessaire. Pour avoir un magasin en ligne, faites un fork de l'application « Lauren's Lovely Landscapes » et déployez-le sur Bluemix.
Dans les services DevOps de Bluemix, faire le fork d'un projet signifie copier le code d'un projet existant et le copier dans un nouveau projet.
V-A. Étape 1 : Faire le fork de l'application « Lauren's Lovely Landscapes »▲
- Allez sur la page d'accueil du projet « Laurens Lovely Landscapes ».
- Cliquez sur « Edit Code » dans le coin supérieur droit. Vous serez invité à vous authentifier si cela n'est pas encore fait. L'IDE Web s'ouvre.
- Sélectionnez « Tools » puis « Fork ».
- Saisissez le nom de votre projet ; laissez cochées les cases « Add features for Scrum development » et « Make this a Bluemix Project » et cliquez sur le bouton « Create ».
- Remarquez qu'une fois que le fork du projet est terminé, votre nouveau projet est affiché dans le coin supérieur droit.
Maintenant, vous avez une copie du code dans votre propre projet. La prochaine étape va consister à le déployer.
V-B. Étape 2 : Déployer l'application « Lauren's Lovely Landscapes »▲
Déployer une application signifie assembler les artefacts du projet, créer une application dans Bluemix, transférer le projet assemblé sur Bluemix et lancer l'application. Les noms et les URL de l'application Bluemix sont créés à partir des propriétés qui sont définies dans le fichier manifest.yml du projet. Le projet « Lauren's Lovely Landscapes » a déjà un manifest créé pour vous.
- Dans la zone de navigation à gauche de l'éditeur Web, sélectionnez manifest.yml.
-
Cliquez sur le bouton « Deploy », (
) dans la barre grise au-dessus de l'éditeur Web :
- Remarque : quand vous déployez à partir de l'éditeur Web, vous déployez en même temps les modifications effectuées dans votre espace de travail de l'éditeur Web. Par exemple, si vous êtes en train d'effectuer des modifications, que vous n'avez pas encore copiées dans le repository de votre projet, ces modifications seront déployées.
V-C. Étape 3 : Visualiser l'exécution de l'application « Lauren's Lovely Landscapes »▲
Après avoir déployé votre application dans Bluemix, un point vert s'affiche dans la zone du statut, au niveau de la barre grise au-dessus.
- Cliquez sur le bouton « Open URL » (
), dans la barre grise au-dessus. - Parcourez votre application déployée sur Bluemix, et cliquez sur la page « Antartica ». Vérifiez que le prix de ce produit est 100 $.
V-D. Étape 4 : Mettre à jour le prix d'un produit▲
Effectuez une modification dans l'application en faisant une mise à jour du prix d'un produit.
- Dans la zone à gauche de l'éditeur Web, déroulez les vues et sélectionnez « antartica.tpl ».
- Défilez vers le bas jusqu'à ce que vous voyiez la ligne <div
id="price">100.00</div>. - Remplacez « 100.00 » par « 99.99 » (Wow ! C'est une grosse affaire ! ;-) ).
- Cliquez sur « File » puis sur « Save ».
- Cliquez sur le bouton « Deploy » ().
- Si un message vous demande d'arrêter l'application et de le redéployer, cliquez sur « OK ».
- Une fois votre application déployée, cliquez sur le bouton « Open URL » () dans la barre grise au-dessus.
- Dans l'application, cliquez sur « Antartica ».
Remarquez que le prix du produit a été mis à jour. Succès !
VI. Que faire ensuite ?▲
Premièrement, prenez un moment pour admirer l'extraordinaire travail que vous venez d'accomplir. Vous êtes capable d'utiliser Bluemix et ses services DevOps pour faire rapidement un fork (une copie) d'une application, la mettre à jour sans aucune configuration manuelle dans l'éditeur, et la déployer en visualisant en direct, les modifications que vous effectuez.
Deuxièmement, soyez créatif avec l'application. « Lauren's Lovely Landscapes » est maintenant à vous. Modifiez le nom, changez les couleurs, modifiez les images ou soyez fou : créez un panier d'articles ! Personnalisez le site comme vous voulez, et redéployez-le.
Troisièmement, continuez sur la deuxième partie de cette série, où vous apprendrez comment déployer une application qui utilise un service Bluemix.