Mon application « Clouder! » sur le Windows 8 Store!

Aucun tutorial sur html5-tutorial.fr depuis 2 semaines et pour cause, j’étais bien occupé à travailler sur mon application « Clouder! ». Clouder est l’application que j’ai utilisé dans le fil rouge sur le développement HTML5 que vous avez peut-être suivi:

Clouder! pour Windows 8 : le tutorial fil rouge de html5-tutorial.fr

Bien sûr, l’application réalisée à l’issue du fil rouge était un peu basique, j’ai donc ajouté pas mal de contenu avant de tenter de la publier sur le Windows 8 Store. Mais c’est chose faite, si vous avez installé la version RTM de Windows 8, allez donc dans la catégorie « Music & Video » du store pour trouver l’application Clouder! finale:

Clouder sur le Windows 8 Store

Un mot sur les UX Guidelines

Avant de pouvoir soumettre son application sur le store, j’ai du récupérer un « token » développeur du côté de Microsoft. Pour cela, il fallait passer un « excellence lab » de 2h, soit sur place à Paris ou à distance.

A noter que le store est depuis le 12 Septembre ouvert à tous pour la soumission d’application. Pour les détenteurs de comptes MSDN, membres de DreamSpark ou de BizSpark, le compte est gratuit.

Pendant ces labs, vous êtes aidé par un expert MS qui va s’assurer que votre application respecte bien les règles du store. Les règles du store ont été rassemblées dans un document de 316 pages (oui, 316!) que vous pouvez trouver au format PDF ici:

http://t.co/FpwrqZC2

Assez sympa puisque vous pouvez réservez un créneau gratuitement pour vous éviter d’attendre un verdict négatif du store.

Si vous me suivez sur Twitter (@fnicollet), vous m’avez entendu râler sur ces fameuses guidelines, qui sont à mon avis vraiment strictes. Mais quand on fouille le store, on trouve ensuite une bonne homogénéité au niveau des applications.

Quelques points par exemple que j’ai du modifier dans mon application, pour vous donner une idée:

  • Pas de dégradés de couleur, préférer les aplats de couleur.
  • Pas de coins arrondis, l’interface métro préfère les coins carrés
  • Pas de boutons de navigation directement dans l’interface. Par exemple, ne pas avoir de bouton « Share » directement dans son application. Même si ce bouton ne fait qu’ouvrir l’interface de partage de Windows 8, ils veulent habituer l’utilisateur à utiliser l’interface native de W8. Idem pour la recherche même si des applications comme Allociné ont un bouton rechercher dans l’interface… Les boutons de navigation doivent éventuellement se trouver dans l’AppBar Windows 8
  • Faire attention à la gestion du mode portrait. Mieux vaut désactiver le mode portrait (possible depuis le manifest) que de mal le gérer
  • Utiliser une hiérarchie de taille de fonts. Si par exemple vous avez un titre de taille h1 en tête de page, à l’intérieur de la page vous devrez avoir au moins du h2. Idem pour les commentaires, il m’a fallu mettre le nom d’utilisateur en gras pour qu’il soit différent du corps du commentaire
  • Limiter le nombre d’éléments à l’écran. Ne pas afficher une liste de 100 éléments qui serait trop longue à scroller
  • S’il on a plusieurs listes / catégories, utiliser le Semantic Zoom de Windows 8
  • Avoir des paddings cohérents dans les différents écrans
  • Bien gérer la vue « snap » pour qu’elle soit un minimum utilisable. Elle ne doit pas forcement contenir tout ce qu’il y a dans la page pleine mais elle ne doit pas ressembler à n’importe quoi.
Autant Apple est très lourd avec ses restrictions sur le déploiement, certificats & co. mais ils vous laissent plutôt tranquille quant au contenu de l’application. Du côte de Windows, c’est beaucoup plus strict au niveau de l’apparence générale et de la navigation au sein de l’application. Vous serez prévenu :).
Bref, pas mal de changements et à la suite d’une 2ème session, j’ai enfin pu avoir mon token pour publier sur le store :)

Publication sur le store

Pour vous aider à publier sur le store Windows 8, voici un tutorial qui détaille toutes les étapes et les éléments nécessaires:

http://blogs.msdn.com/b/eternalcoding/archive/2012/09/10/pas-224-pas-comment-d-233-ployer-une-application-sur-le-store-windows-8.aspx

Le processus est assez guidé et suffisamment clair. Comme d’habitude, vous devrez encore préparer pas mal d’images en plusieurs tailles mais vous avez l’habitude si vous développez pour iOS et Android :).

Ship fast they said. It will be fun they said

Pour éviter de passer trop de temps sur la première version, j’ai décidé de faire par « itération » en sortant une V1 uniquement en consultation puis de rajouter le reste par la suite.

Pas loupé, au bout de 2 jours, voici ma première review, 2* sur 5:

Pas très utile puisqu’on ne peut pas se connecter à son compte et voir son Dashboard, ni suivre ou commenter des morceaux, etc.

Toujours rageant quand on a passé pas mal de temps sur le développement d’une app de se prendre un 2* direct. Bref, après une dizaine d’heures de développement (dont 6 à pester après les iframes dans IE10 pour faire un OAuth correct), le développement de la version 1.1 était terminé.

Il est donc désormais possible de se connecter, de suivre des artistes, de « like » un morceau et de laisser des commentaires. En plus de cela, un petit dashboard perso avec ses favoris / followers / followings. En espérant que cet utilisateur n’ait pas encore désinstallé l’application :).

La suite

Une v1.2 est en préparation avec notamment :

  • la gestion correcte du mode portrait
  • Des « section pages » dans lesquelles ont peut consulter une données complète (ex. tous les followers d’un artiste) avec pagination et pas seulement un extrait de 50 comme actuellement.

Si vous passez par le Store Windows 8, n’hésitez pas à me laisser une petite review, cela fait toujours plaisir! :)

20 réflexions au sujet de « Mon application « Clouder! » sur le Windows 8 Store! »

  1. Pierre-Antoine

    Bonjour, merci beaucoup pour ton tutoriel.
    J’aimerais l’appliquer a mon site de musique en ligne mais je ne vois pas comment faire.
    Par quoi dois-je remplacer ID utilisateur au début du tutoriel.
    Merci d’avance

    Répondre
  2. Pierre-antoine

    Oui je parle bien de ce message . Mais en fait j’essaie de créer une application comme la tienne mais pour mon site qui requière une identification. Donc je voulais savoir que dois je mettre à la place de ça : WinJS.xhr({ url: « https://api.soundcloud.com/tracks.json?client_id=2e601fddcc4a07954c3da7077f81a1e1 » }).done(
    pour que cela puisse s’appliquer à mon site.

    Répondre
  3. admin Auteur de l’article

    Par votre site, vous voulez dire votre compte SoundCloud?
    Si vous voulez faire des appels XHR vers votre site perso qui n’a rien à voir avec SoundCloud, c’est à vous de définir les URLs à appeler, impossible de vous dire, c’est vous qui connaissez votre site

    Fabien

    Répondre
  4. admin Auteur de l’article

    Oui, il faut que vous puissiez appeler votre site pour récupérer des informations (API) mais cela est complètement en dehors du spectre de ces articles

    Répondre
  5. admin Auteur de l’article

    Bonjour,
    En fait, je ne sais pas vraiment quoi vous donner ^^. Vous allez devoir apprendre à faire un service web qui va interroger votre base de données de votre site music.me. C’est comment dire, large comme sujet !

    Fabien

    Répondre
  6. admin Auteur de l’article

    Salut,
    Bizarre, si tu vas dans la catégorie Music & Vidéo, tu ne la vois pas? Quelle version de Windows 8 tu as installé (CP? RTM? Finale?) ? et en quelle langue?
    J’ai une autre personne qui a le même problème, j’espère que les applications qui sont indiquées en langue anglaise apparaissent aussi sur les install FR

    Fabien

    Répondre
  7. aztazt

    Pour préciser un peu, (désolé pour le triple post, mais si ça peut t’aider à comprendre d’où vient le problème…) , lorsqu’on me donne le lien Windows Store de ton appli, j’arrive bien sur la page qui permet normalement de l’installer, mais il manque des éléments dans la page : il manque notamment le bouton « Installer » (plutôt gênant ;-)… Si tu veux une capture, je peux t’en faire une.

    Répondre
  8. admin Auteur de l’article

    Je veux bien, oui :). Si tu peux m’envoyer des captures de ton store, genre une capture de la catégorie « Tools » ou  » Music and Vidéos » (quand tu cliques sur le titre de catégorie, qui t’emmennes sur la page de listing de la catégorie)
    mon mail : fnicollet gmail.com

    Merci !
    Fab

    Répondre
  9. admin Auteur de l’article

    Ok, j’ai demandé à un mec de MS et on dirait que la version FR filtre les applications selon leur langue par défaut. Clouder comme LastPass n’ont que de l’anglais, du coup, elles n’apparaissent pas. Je corrige ça de suite !

    Fab

    Répondre
  10. aztazt

    Ok, désolé pour l’attente, j’étais parti faire un footing. J’ai appliqué la méthode de ghacks.com, je reboote et je te tiens au courant.

    Répondre

Répondre à admin Annuler la réponse.

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *