C’est parti pour ce premier fil rouge sur Windows 8 Metro qui va vous guider lors de la création de votre première application. Cette série de tutoriaux va s’articuler autour de la conception de l’application « Clouder! » que j’ai réalisé.
Clouder! est une application permettant de parcourir le site SoundCloud.com et ses milliers de titres.
Pour plus d’informations sur l’application finale, un screencast, des screenshots et un descriptif du fonctionnel, je vous invite à lire cet article:
Installation de l’environnement de développement
Au jour d’aujourd’hui (fin juillet), Windows 8 n’est pas encore sorti en version finale. Vous pouvez cependant télécharger la version « Release Preview » sous forme d’ISO et l’installer dans machine virtuelle avec VMWare. Travailler dans une VM n’est pas idéal (lag) mais pour l’instant, vous n’avez pas vraiment le choix.
Je vous conseille de prendre un ISO anglais, sinon vous aurez tous les logiciels en français (assez mal traduits).
Voici les instructions vous permettant d’installer Windows 8 RP:
Installation de Windows 8 Consumer Preview sur VMware Workstation 8
Une fois installé, vous devrez installer les outils de développement pour Windows 8, c’est-à-dire Visual Studio et MS Blend. Pour cela, suivez le guide:
Introduction au développement HTML / JavaScript / CSS pour Windows 8
Pour être plus à l’aise et surtout pour pouvoir coller du code facilement, n’oubliez pas d’installer les « VMWare Tools » qui vous permettrons d’avoir accès au copier-coller entre votre machine et la VM: VM > Install VMWare Tools puis lancez le lecteur DVD monté automatiquement sur votre VM.
Si vous avez une erreur « VMware Tools installation cannot be started manually while the easy install is in progress. », la solution est dans cet article:
Création du projet
La première étape est de créer un projet dans Visual Studio. Lancez donc la bête et si vous avez l’interface en français, je vous conseille de la passer en anglais comme ceci:
Windows Metro – Modifier la langue de Visual Studio et de l’OS
File > New Project puis choisissez le template « Navigation App » dans la catégorie « JavaScript »:
Nommez votre application « ClouderTutorial » puis cliquez « ok » et Visual Studio va se charger de créer le squelette du projet qui va bien (une « Solution » dans le langage MS).
Vous devriez arriver sur le fichier « default.js » en édition, avec déjà quelques fichiers dans votre projet:
Conclusion
C’est tout pour la première partie, vous êtes prêt à travailler sur le projet du tutorial. Rendez-vous à l’étape 2 !
Ping : Windows Metro – Clouder! (2) – Effectuer un appel XHR vers l’API SoundCloud | HTML5 Tutorial