Quasiment un mois sans article sur html5-tutorial.fr et pour cause, la sortie de mes 2 premières applications pour Windows 8. Si vous suivez mes articles, vous vous souvenez sûrement de « Clouder! » que j’ai déjà évoqué sur ce blog:

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

Et sur cette application, je vous proposais un tutorial de A à Z pour apprendre la conception d’une application HTML / JS / CSS pour Windows 8:

Développement d’application pour Windows 8 Metro en HTML5 (JavaScript / HTML / CSS)

Depuis de l’eau a coulé sous les ponts et surtout, les utilisateurs de l’application ont commencé à laisser leurs reviews sur le Windows Store. Avec plus de 2000 downloads (avant la sortie officielle de Windows 8) et une trentaine de reviews, cela représente un bon feedback.

Téléchargement

L’application est maintenant disponible pour toutes les versions de Windows 8 : x86, x64 et WinRT. Maintenant que Windows 8 a été annoncé, vous pouvez donc aller télécharger Clouder! sur le Windows 8 Store, si vous avez installé Windows 8 bien sûr:

Clouder! pour Windows 8

Si vous passez à la Fnac, n’hésitez pas à l’installer / l’essayer pour vous donner une idée :)

Quelques images

Changelog

De nombreuses améliorations donc depuis la V1, la plupart du temps basé sur le feedback utilisateur. Même si ceux qui mettent une mauvaise review à cause d’un bug ou d’une fonctionnalité manquante changent rarement leur note, c’est toujours bon à prendre.

Un petit changelog:

Version 2

• Log in avec son propre compte SoundCloud
• Accès à son dashboard perso
• Possibilité de « like » un morceau et de suivre d’autres utilisateurs

Version 3

• Ajout de pages « section », accessibles en tapant sur les titres de chaque catégorie (les « hubs » Windows 8) pour les hubs tracks / playlists / favorites / followers / followings
• Support du mode portrait

Version 4

• Possibilité de se connecter avec son compte Facebook aussi bien qu’avec son compte SoundCloud
• Bug fix sur la taille du lecteur audio

Version 5

• L’application joue automatiquement le prochain de la playlist ou du groupe de chansons depuis lequel vous l’avez choisie
• Ajout des notifications Toast
• Bug fix sur un bug qui pouvait faire crasher une application (Windows 8 – [Résolu] « The parameter is incorrect » à l’assignation de MediaControls.trackName)

Version 6

• Ajout d’un bouton dans l’AppBar pour voir les informations du titre courant
• Activation des Playlist Media Control pour utilisation des boutons hardware des tablettes
• Les sons non-streamable de SoundCloud ne sont plus joués
• Bug fix sur la liste des résultats de recherche
• Compilation pour toutes les architectures, y compris x86, x64 et WinRT

Version 7

• Clouder! permet de découvrir des groupes SoundCloud directement depuis la homepage et permet d’accéder aux groupes dont vous faîtes déjà partie depuis votre profil.

Lorsque vous installez le SDK Windows 8, vous installez pas mal d’outils dont Visual Studio Express 2012 ou Blend. Vous avez aussi un autre outil, le « Windows App Certification Kit ». Celui permet de tester votre application avant soumission pour le store. C’est une étape qui est faite automatiquement lorsque votre application est vérifiée avant la mise sur le store, donc autant vous assurer que cela fonctionne en local avant.

Le « Windows App Certification Kit » (alias WACK) va vérifier pas mal de choses, notamment si votre application s’ouvre bien dans le temps imparti (5 secondes) et se ferme bien en moins de 2 secondes par exemple.

Utiliser le Windows App Certification Kit (WACK)

Pour le lancer, rendez-vous sur le menu démarrer et lancez la tuile WACK:

Choisissez ensuite « Windows Store App » si vous développez en HTML / JS / CSS.

Puis choisissez votre l’application dans la liste des applications installées:

Laissez ensuite le WACK faire, votre application va s’ouvrir et se fermer plusieurs fois. Surtout ne pas interagir avec l’application pendant les tests. Une fois les tests effectués, le WACK va générer un rapport au format XML que vous allez pouvoir ouvrir par la suite. Ce XML est en fait une page HTML quand vous l’ouvrez dans IE (merci XSL-T).

Le résultat est soit « PASSED » soit « FAILED ». Si c’est FAILED, ouvrez donc le rapport dans IE pour aller voir le détail.

Performance test : FAILED Bytecode generation

La première fois, vous allez sûrement avoir un FAILED (et oui). L’erreur n’est pas évidente, voici le détail:

Bytecode generation
•  Error Found: The bytecode generation test detected the following errors:◦This package was deployed for development or authoring mode. Uninstall the package and re-install it normally.

• Impact if not fixed: As a performance optimization to accelerate JavaScript execution time, JavaScript files ending in the « .js » extension generate bytecode when the app is deployed. This optimization significantly improves start-up and ongoing execution times for JavaScript.

• How to fix: You may need consider one or more of these steps to fix the issue:
– Ensure that event logging is enabled
– All JavaScript files are syntactically valid; otherwise exclude the respective files from the package
– Please note that you should uninstall all previous versions of the app before deploying
Otherwise exclude the respective files from the package.

WACK vous indique « This package was deployed for development or authoring mode. Uninstall the package and re-install it normally » mais pas vraiment comment procéder. Il faut en fait faire un package « release » à partir de VS 2012 et tester ce package et pas l’application en mode debug lancée depuis VS 2012.

Réaliser un package « release » pour Windows 8 avec Visual Studio 2012

Retournez donc dans Visual Studio Express 2012. Puis Store > Create App Packages…

Lire la suite →

Un petit article sur une erreur pas commune mais au moins vous serez prévenu.

Si vous avez une application comme la mienne qui utilise la fonctionnalité « Background Audio » de Windows 8, vous devrez implémenter le mécanisme des MediaControls, pour intégrer la lecture au hardware sur laquelle tourne votre application. Les boutons volume +/- de votre tablette Windows 8 par exemple.

Plus d’information sur la mise en place dans un de mes articles:

Windows Metro – Jouer de l’audio en arrière-plan (background) avec MediaControl et les Media Transport Controls

Tout se passait bien jusqu’au jour où Windows claque une exception:

0x80070057 - JavaScript runtime error: The parameter is incorrect

Le tout à l’assignation de la ligne suivante:

MediaControls.trackName = someString;

Erreur étrange puisque cela fonctionne bien pour beaucoup de valeur passées mais par pour certaines.

Après quelques recherches, il se trouve qu’il y a en fait une limite de taille à la chaîne passée. C’est indiquée dans le document

System Transport Controls Developer Guide

Je cite:

Setting the trackName and artistName on the MediaControl object sets the text in the UI. Note that metadata should be less than 127 characters.

Vous devrez donc faire un substring sur la chaîne pour la tronquer avant d’assigner la valeur de MediaControls.trackName.

Bien sûr, Windows aurait pu éviter de faire exploser l’application pour une restriction connue et pas évidente. Mais non, alors vous devrez le faire à la main :).