Utilisation des extensions natives (2ème partie) : illustration sur un exemple
nov.
15
Par :
Tangane Labs
15/11/2011 16:25
Intéressons nous à un petit exemple utilisant les fonctionnalités de vibration et les accéléromètres des terminaux mobiles. Un mini jeu (type minigolf) s'appuyant sur les accéléromètres du téléphone pour le déplacement de la balle et déclenchant une vibration lorsque que la balle tombe dans le trou.
Prérequis
Note : Il n’y aura pas dans cet article de développement en code natif, nous utiliserons uniquement l’une des extensions natives proposées par Adobe (Vibration). Si vous souhaitez plus d’information sur le sujet rendez vous dans la documentation Adobe et sur les portails de développement iOS et Android
1ere étape : Configuration du projet flex mobile
Je recommande d’utiliser Flash Builder afin de profiter de l’environnement de développement même si la compilation/packaging de l’application se fera en ligne de commande (4e partie)
1- Commençons donc par créer un nouveau projet (Fichier>nouveau>projet flex mobile)
2- Configurer le projet comme vous le souhaitez (mobiles ciblés, orientation …)
3- Copier les fichiers .swc et .ane présents dans vibration.zip (dans le sous-dossier “ReadyToUseExtension”) dans le dossier libs de votre projet
4- Editer les propriétés du projet comme ceci:
La librairie .swc permet d’utiliser “normalement” l’API de notre extension (pas de warning, autocompletion du code)
L’extension vibration.ane n’apparait pas automatiquement dans cette liste, il faut donc cliquer sur ajouter un un fichier SWC puis parcourir en affichant toutes les extensions (*.*). Il faut ensuite configurer le type de lien sur 'externe'.
2ème étape : Modification du fichier de configuration de l’application
Un fichier monApplication-app.xml a été généré à la création du projet, l’utilisation des extensions natives nécessite quelques modifications dans ce fichier.
1- Changement du namespace du fichier :
2- Ajout de la balise
3- Ainsi que, dans le cas spécifique de l’extension vibration, ajouter une autorisation sous android
3ème étape : Développement de l’application (enfin du code...)
L’extension vibration est très simple, le code qui la concerne l’est donc tout autant. Il suffit de vérifier que la fonctionnalité est bien supportée par l’appareil puis d’appeler la fonction souhaitée si c’est le cas.
Voilà pour la partie vibration, ce mini projet est également l’occasion pour moi de tester l’utilisation de l’accéléromètre.
Là encore, ce n’est guère compliqué :
On demande un rafraîchissement des mesures toutes les 100 ms. On recevra à chaque fois un évènement contenant l’accélération selon les 3 axes de l’espace. A partir de ces 3 valeurs on peut calculer un déplacement à appliquer à la balle de golf.
Reste à ajouter des tests pour éviter que la balle sorte de l’écran et pour tester si elle n’est pas dans le trou. Un petit tween pour fluidifier le mouvement et le tour est joué.
Je vous laisse ajouter quelques obstacles à votre guise afin de rendre plus "fun" cet “embryon” de mini-jeu.
4ème étape : Compilation/packaging
Note : Le packaging d’application mobile en flex nécessite l’utilisation de certificats (keystore).
Pour Android, rien de bien compliqué, il s’agit juste de générer un certificat .p12 (on peut le faire directement dans Flash builder). Pour iOS, c’est un peu plus complexe, en plus d’un compte développeur iOS, ils vous faudra faire faire un certain nombre de manipulation avant d’obtenir les 2 fichiers nécessaire à la compilation : le fichier certificat et le fichier .mobileprovision (nécessaire pour pouvoir tester l’application sur un device sans passer par l’AppStore d’Apple). Tout le processus est bien détaillé ici : http://devgirl.org/2011/06/20/flexair-for-ios-development-process-explained/
La version actuelle de Flash builder (4.5.1) ne permet pas de compiler en Air 3.0. Il faudra donc passer par l’exécutable adt en ligne de commande présent dans le répertoire bin du SDK (pensez à ajouter ce dossier dans votre path système pour pouvoir l’utiliser dans n’importe quel dossier).
Il faut faire une première compilation de l’application dans Flash builder (afin d’avoir le swf dans le dossier bin-debug qui sera nécessaire au packaging de l’appli). Inutile de tenter de la lancer directement depuis flash builder, il ne sait pas la packager (il faudra attendre FB 4.6 qui est actuellement disponible en version beta).
On va donc se placer dans le répertoire bin-debug et lancer la commande suivante (en spécifiant des path valide pour les keystore et mobileprovision dans le cas iOS)
Packaging pour Android :
adt -package -target apk -storetype pkcs12 -keystore “path_certif/android_certif.p12” TanganeGolfDemo.apk TanganeGolfDemo-app.xml TanganeGolfDemo.swf -extdir ../libs
Packaging pour iPhone
adt -package -target ipa-ad-hoc -storetype pkcs12 -keystore "path_certif/iphone_dev.p12" -provisioning-profile “path_certif/TanganeGolfDemo.mobileprovision" TanganeGolfDemo.ipa TanganeGolfDemo-app.xml TanganeGolfDemo.swf -extdir ../libs
Voilà, il n’y a plus qu’à tester cette application sur vos téléphones.
Téléchargement
-
les sources du projet (fichier .fxp)
-
l'application compilée pour android (fichier .apk)
Posté par Guillaume Hemery © 2011 - Tangane | Digital Channels - Tous droits réservés