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.
Grégory
09/01/2016
Hello Désolé pour le délai de réponse ! Le soucis avec Intel XDK, c est que les mises à jour changent régulièrement l'UI. Difficile de répondre à ta question sans plus d'infos, mais n hesite pas à me contacter sur Twitter (@daibai) ou par mail pour en discuter !
Grégory
09/01/2016
Hello Désolé pour le délai de réponse ! Le soucis avec Intel XDK, c est que les mises à jour changent régulièrement l'UI. Difficile de répondre à ta question sans plus d'infos, mais n hesite pas à me contacter sur Twitter (@daibai) ou par mail pour en discuter !
Grégory
09/01/2016
Hello Désolé pour le délai de réponse ! Le soucis avec Intel XDK, c est que les mises à jour changent régulièrement l'UI. Difficile de répondre à ta question sans plus d'infos, mais n hesite pas à me contacter sur Twitter (@daibai) ou par mail pour en discuter !
Grégory
09/01/2016
Hello, IntelXDK en lui même n'inclut pas de SGBDR tel que SQL / MySQL / SQLite, mais permet, via l'ajout d'un plugin Cordova, de travailler avec SQLite par exemple.
Grégory
09/01/2016
Hello, IntelXDK en lui même n'inclut pas de SGBDR tel que SQL / MySQL / SQLite, mais permet, via l'ajout d'un plugin Cordova, de travailler avec SQLite par exemple.
Grégory
09/01/2016
Hello, IntelXDK en lui même n'inclut pas de SGBDR tel que SQL / MySQL / SQLite, mais permet, via l'ajout d'un plugin Cordova, de travailler avec SQLite par exemple.
Ancillon
05/08/2015
Bonjour, Pouvez vous me dire s'il y a un abonnement à payer pour utiliser cet outil et à combien ça coûte ? Merci pour ce tuto. Inclut-il SQL ? Meilleures salutations.
Ancillon
05/08/2015
Bonjour, Pouvez vous me dire s'il y a un abonnement à payer pour utiliser cet outil et à combien ça coûte ? Merci pour ce tuto. Inclut-il SQL ? Meilleures salutations.
Ancillon
05/08/2015
Bonjour, Pouvez vous me dire s'il y a un abonnement à payer pour utiliser cet outil et à combien ça coûte ? Merci pour ce tuto. Inclut-il SQL ? Meilleures salutations.
stephane
30/07/2015
Salut! Merci pour le tuto. Cependant quand je vais dans l,onglet PROJECTS dasn features and custm cordova plugins je n'ai pas l'option camera. du coup mon app met juste un trou noir a la place de l'appareil photo. As -tu une idée de ce qui se passe? Merci
stephane
30/07/2015
Salut! Merci pour le tuto. Cependant quand je vais dans l,onglet PROJECTS dasn features and custm cordova plugins je n'ai pas l'option camera. du coup mon app met juste un trou noir a la place de l'appareil photo. As -tu une idée de ce qui se passe? Merci
stephane
30/07/2015
Salut! Merci pour le tuto. Cependant quand je vais dans l,onglet PROJECTS dasn features and custm cordova plugins je n'ai pas l'option camera. du coup mon app met juste un trou noir a la place de l'appareil photo. As -tu une idée de ce qui se passe? Merci
firas
05/04/2015
hi, can i generate an android studio project from intel XDK ? ( i want to edite if with another native IDE) Cheers FIRAS
firas
05/04/2015
hi, can i generate an android studio project from intel XDK ? ( i want to edite if with another native IDE) Cheers FIRAS
firas
05/04/2015
hi, can i generate an android studio project from intel XDK ? ( i want to edite if with another native IDE) Cheers FIRAS
sbegh
19/02/2015
Salut ! Et surtout merci pour cet excellent article.
sbegh
19/02/2015
Salut ! Et surtout merci pour cet excellent article.
sbegh
19/02/2015
Salut ! Et surtout merci pour cet excellent article.