Votre première application Android avec Intel XDK

Parmi les outils que j'utilise quasi quotidiennement, Intel XDK a pris une place de plus importante au fur et à mesure des développements mobiles. Des petites galères avec l'émulateur Android, des contraintes rencontrées avec Ripple, et du côté "tout web" un peu désagréable de Phonegap Build qui - malgré un réel effort pour proposer une liste de plugins de plus en plus importante, n'est pas des plus pratiques pour créer rapidement un APK. Entre ça, et le besoin d'envoyer un build à l'équipe projet et / ou au client pour faire tester l'application sur tablette ou son smartphone, je cherchais depuis pas mal de temps un outil qui me permettrait non seulement de générer des builds rapidement, mais aussi de les diffuser facilement - façon TestFlight pour au final me faciliter aussi la vie pour générer une application iOS avec les bons certificats (ad hoc ou prod). C'est le cas avec Intel XDK, qui me permet d'avoir tout un environnement pour générer un build, ses assets, et diffuser le tout. Le top, c'est qu'Intel XDK vous permet soit d'utiliser ses plugins, d'utiliser les plugins du plugins registry Cordova, ou les deux, ou aucun des deux. Dans ce post, je vous propose, en quelques minutes, de générer un APK très simple à base de prise de photo. Ca ne prendra pas plus de... disons 20min. Avant tout, pensez à télécharger la dernière version d'Intel XDK sur le site, et à vous créer un compte. Petit 1 : Création de l'app Plusieurs choix sont possibles :

• Vous pouvez par exemple créer un projet Ionic Framework localement puis l'intégrer à Intel XDK, dans ce cas là vous bénéficierez des outils Cordova / Ionic pour développer, et des outils Intel XDK pour les tests (avec Ripple) et les builds.

• Vous pouvez aussi carrément tout développer depuis Intel XDK, qui implémente Brackets comme éditeur (ce qui ne vaut pas un Atom, un Sublime Text ou un Webstorm, on est d'accord, mais bon, c'est juste une démo après tout !)

L'avantage de rester dans l'éco système Intel XDK est notamment de profiter des templates existants. Cela dit vous vous rendrez compte rapidement  qu'un bon vieux Yeoman vous manque, et vous reviendrez du coup à la première solution. Encore une fois, dans l'optique de simplifier ce post, on restera dans l'environnement Intel XDK, on choisi donc un Blank Project, et roule ma poule.     On appelera notre projet Snap0r, mais vous pouvez l'appeler comme bon vous semble. Une fois le projet créé, vous vous retrouvez devant plusieurs onglets. On va rapidement les commenter :

• Develop : C'est l'éditeur (Brackets)
• Emulate : C'est... Ripple, avec une surcouche qui permet de tester les plugins proposés par Intel XDK
• Test : Permet, grâce à l'application mobile Intel App Preview (iOS, Android), de tester l'application sur mobile / tablette sans avoir à builder. Un QRCode est à scanner depuis l'app, et bim, vous retrouvez votre application.
• Debug : Permet de débugger en live sur le device
• Profile : Permet de lancer les outils de profiling de l'application
• Build : Permet de builder sur un nombre intéressant de devices, de générer une webapp (bof), de générer une app Facebook (yeah !), une extension Chrome (Youpi) et Firefox (même si, en gros, vous ne pourrez probablement pas pour l'instant).

A noter aussi que le paramétrage de votre application est disponible, mais séparé des onglets. J'y reviens en temps voulu. Snap0r

Snap0r répond à un besoin inexistant sur le marché des applications mobile : il permet de prendre une photo, et de ne plus rien en faire par la suite. De nombreux utilisateurs prennent quantité de photos qu'ils ne regarderont de toutes façons jamais, ou sont soumis à une pression incroyable pour prendre en photo des amis dans des situations de beuveries dramatiques, des photos de la famille éloignée dans le Pas de Calais, un monument aussi intéressant qu'un plug anal vert, ou leur étron matinal (ce qui finalement, serait la suite logique des choses), alors que finalement, eh bien, tout le monde s'en tape le gros orteil sur une table de ping pong. Snap0r, pour vos moments pas en or.

Maintenant qu'on a pitché devant des investisseurs aux zieuzébahis, se battant pour injecter du cash flow en rollback triple flip à la one again, il va bien falloir la développer, cette application révolutionnaire. Développons, donc J'ai modifié légèrement le code HTML de mon application, après l'ouverture de la balise <body>

<h1 class="align-center">Snap0r, pour les moments qui (ne) comptent (pas)</h1>
<br>
<p class="align-center">
<input type="button" id="takePIC" value="PHOTO !">
</p>

Faites pareil, puis développez le tab Run My App à droite, et choisissez Running in Emulator :   Hop, Ripple - enfin sa version Intel XDK, s'ouvre : Ca claque hein ! Bon, si vous cliquez sur le bouton, ca lancera pour l'instant une alert, on va modifier ça de suite. Fermez l'émulateur, puis cliquez sur PROJECTS en haut à droite, vous aurez accès aux paramètrages de votre application. Dans Plugins & Permissions, cochez Camera dans le listing Featured & Custom cordova plugins. Ce sont les plugins modifiés par Intel XDK. Dans un avenir proche, il est probable que ceux ci ne soient plus proposés au profit des plugins Cordova tout court. N'en parlez pas à vos investisseurs pour l'instant, ça les ferait paniquer. La documentation du plugin Camera est disponible ici : https://software.intel.com/en-us/node/492889 Ce qui nous intéresse pour Snap0r, c'est la méthode TakePicture (sauvegarder les photos va à l'encontre de notre business plan). L'exemple fourni par la doc est parfait pour notre usage :

document.addEventListener("intel.xdk.camera.picture.add",onSuccess); 
document.addEventListener("intel.xdk.camera.picture.busy",onSuccess); 
document.addEventListener("intel.xdk.camera.picture.cancel",onSuccess); 

function capturePhoto() {
  intel.xdk.camera.takePicture(50,false,"jpg");
}

function onSuccess(evt) {

  if (evt.success == true)
  {
    // create image 
    var image = document.createElement('img');
    image.src=intel.xdk.camera.getPictureURL(evt.filename);
    image.id=evt.filename;
    document.body.appendChild(image);
  }
  else
  {
    if (evt.message != undefined)
    {
        alert(evt.message);
    }
    else
    {
        alert("error capturing picture");
    }
  }
}

  On va donc ajouter ce code dans notre application, et comme c'est une démo, on va juste coller ça dans un bon vieux <script> dans l'index.html : Une fois que c'est fait, sauvegardez, puis réouvrez l'émulateur. Notez au passage que vous pouvez laisser l'émulateur ouvert pendant la modification du code. Chaque Save relance l'émulateur (live reload), ca peut aider. Cliquez sur le bouton "PHOTO !", vous devriez voir quelque chose comme ça : [caption id="attachment_232" align="aligncenter" width="565"] "Elle est horrible ta veste, zlol"[/caption] Il s'agit d'une émulation de la capture photo que vous retrouverez sur votre device. Si vous cliquez sur l'icone photo, vous retomberez sur la page précédente, dans laquelle on retrouve également notre photo.   Notez que vous avez désormais deux possibilités :

• soit vous utilisez App Preview pour tester votre application (onglet Test), en scannant le QRCode depuis votre mobile
• soit, comme moi, vous mangez des mamies au petit dej, et dans ce cas vous voulez lancer un build Android pour choper un APK

On est d'accord, on passe au deuxième choix direct. Build Android : Créer l'APK pour les mangeurs de mamies au petit dej' Ca va être rapide. Ouvrez l'onglet Build, cliquez sur Android (notez au passage le support de Crosswalk). Intel XDK va uploader le projet, puis va vous afficher l'environnement de build : Pas grand chose pour Android, mais pour iOS, on aurait quelques étapes supplémentaires, principalement pour gérer les certificats (ca se fait en 2 minutes, un tuto est même proposé, il faut être une truffe pour ne pas y arriver). On clique joyeusement sur Build App Now Attendez quelques instants, ca mouline grave chez Intel pour générer l'APK qui va bien. Une fois que le build est prêt, BIM : Vous devriez aussi avoir reçu un mail qui vous permet de télécharger le build (par exemple, en ouvrant le mail depuis un mobile). Vous pouvez aussi le télécharger dans Intel XDK et l'envoyer à qui vous voulez par mail. Je vous sens perplexe, alors pour vous montrer que je ne suis pas un mytho, j'ai pris des screens de l'application depuis mon Nexus 5 :       Le repo est disponible ici : https://github.com/GregoryBabonaux/snap0r A vous les levées de fonds, les femmes, les saladiers de coke et les 4x4 de luxe. Je reviendrais de temps en temps sur Intel XDK pour vous proposer des tips. Si vous avez des questions, c'est dans les commentaires ma bonne dame.