Outils Intel® HTML5 pour le développement d'applications mobiles

N'hésitez pas à commenter cet article ! 2 commentaires Donner une note à l'article (5)

Article lu   fois.

L'auteur

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Téléchargement

HTML5 est la nouvelle norme HTML. Intel Corporation a annoncé récemment la publication d'un ensemble d'outils HTML5 pour le développement d'applications mobiles. Cet article montre comment porter une application d'accéléromètre Apple iOS* sur HTML5 en utilisant ces outils. Attention : le code autogénéré créé par Intel® XDK peut contenir du code utilisé sous une des licences détaillées dans l'Annexe A de ce document. Reportez-vous à la sortie Intel XDK pour obtenir des détails sur les bibliothèques utilisées pour construire votre application.

Outils Intel® HTML5 pour le développement d'applications mobiles

Code source iOS

Code source résultant des outils HTML5

II. Intel® HTML5 App Porter Tool

Pour commencer, nous allons prendre une application d'accéléromètre iOS et convertir le code source Objective-C* en code HTML5. Nous allons le faire à l'aide d'Intel® HTML5 App Porter Tool et du code source qui se trouve ici : [iOS_source] (Remarque : l'exemple de code IOS_source est fourni dans le cadre de la licence Intel Sample Software License (Licence des exemples de logiciels Intel) détaillée dans l'Annexe B). Vous pouvez télécharger Intel HTML5 App Porter Tool depuis l'onglet Tools ici : http://software.intel.com/fr-fr/html5. Après avoir rempli et soumis le formulaire avec votre adresse e-mail, vous obtiendrez les liens permettant de télécharger cet outil. Les consignes d'utilisation de cet outil se trouvent sur ce site : http://software.intel.com/fr-fr/articles/tutorial-creating-an-html5-app-from-a-native-ios-project-with-intel-html5-app-porter-tool

Une fois que vous aurez terminé toutes les étapes, vous obtiendrez le code source HTML5.

III. Intel XDK

Vous pouvez ouvrir le code HTML5 dans n'importe quel IDE. Intel vous offre un outil pratique pour le développement d'applications HTML5 : Intel XDK - Kit de développement multi-plate-forme (http://software.intel.com/fr-fr/html5/tools). Avec Intel XDK, les développeurs peuvent écrire un seul code source pour le déployer sur de nombreux appareils. Ce qui est particulièrement intéressant est qu'il n'est pas nécessaire de l'installer sur votre ordinateur. Vous pouvez l'installer comme une extension de Google Chrome*. Si vous utilisez un autre navigateur, vous devez télécharger un fichier JavaScript* et l'exécuter. Il est parfois nécessaire de mettre à jour Java*.

Après avoir installé Intel XDK, la fenêtre principale s'affiche :

Image non disponible

Si vous voulez porter un code existant, appuyez sur le gros bouton « Start new » (Démarrer un nouveau).

Si vous créez un nouveau projet, entrez le nom du projet et sélectionnez la case d'option « Create your own from scratch » (Créer mon propre projet depuis le début), comme illustré dans la capture d'écran ci-dessous.

Image non disponible

Cochez « Use a blank project » (Utiliser un projet vierge). Attendez un peu que le message suivant s'affiche : « Application Created Successfully! » (L'application a été créée avec succès).

Cliquez sur « Open project folder » (Ouvrir le dossier du projet).

Image non disponible

Supprimez tous les fichiers de ce dossier et copiez-y les fichiers portés. Nous n'avons pas encore porté l'application d'accéléromètre. Nous devons encore lui écrire une interface. Il est possible de supprimer les hooks créés par Intel HTML5 App Porter Tool. Supprimez ces fichiers :

  • todo_api_application__uiaccelerometerdelegate.js ;
  • todo_api_application_uiacceleration.js ;
  • todo_api_application_uiaccelerometer.js ;
  • todo_api_js_c_global.js.

Pour mettre à jour le projet dans Intel XDK, accédez à la fenêtre d'édition de l'émulateur Windows.

Ouvrez le fichier index.html et supprimez les lignes restantes des fichiers inclus.

Image non disponible

Ouvrez le fichier todo_api_application_appdelegate.js et implémentez la propriété non mappée « window » du délégué.

 
Sélectionnez
application.AppDelegate.prototype.setWindow = function(arg1) {
    // ================================================================
    // REFERENCES TO THIS FUNCTION:
    // line(17): C:WorkBloggingechuraevAccelerometerAccelerometerAppDelegate.m
    //    In scope: AppDelegate.application_didFinishLaunchingWithOptions
    //    Actual arguments types: [*js.APT.View]
    //    Expected return type: [unknown type]
    //
    //if (APT.Global.THROW_IF_NOT_IMPLEMENTED)
    //{
        // TODO remove exception handling when implementing this method
       // throw "Not implemented function: application.AppDelegate.setWindow";
    //}
this._window = arg1;
};

application.AppDelegate.prototype.window = function() {
    // ================================================================
    // REFERENCES TO THIS FUNCTION:
    // line(20): C:WorkBloggingechuraevAccelerometerAccelerometerAppDelegate.m
    //    In scope: AppDelegate.application_didFinishLaunchingWithOptions
    //    Actual arguments types: none
    //    Expected return type: [unknown type]
    //
    // line(21): C:WorkBloggingechuraevAccelerometerAccelerometerAppDelegate.m
    //    In scope: AppDelegate.application_didFinishLaunchingWithOptions
    //    Actual arguments types: none
    //    Expected return type: [unknown type]
    //
    //if (APT.Global.THROW_IF_NOT_IMPLEMENTED)
    //{
        // TODO remove exception handling when implementing this method
       // throw "Not implemented function: application.AppDelegate.window";
    //}
return this._window;
};

Ouvrez le fichier viewcontroller.js. Supprimez toutes les fonctions utilisées pour travailler avec l'accéléromètre dans l'ancienne application iOS. À la fin, nous obtenons ce fichier :

 
Sélectionnez
APT.createNamespace("application");

document.addEventListener("appMobi.device.ready",onDeviceReady,false);

APT.ViewController = Class.$define("APT.ViewController");

application.ViewController = Class.$define("application.ViewController", APT.ViewController, {
    __init__: function() {
        this.$super();
    };>});

Dans le fichier ViewController_View_774585933.css, nous devons changer le style de couleur des éléments pour qu'ils soient blancs au lieu de noirs et qu'ils soient lisibles sur un arrière-plan noir et donc remplacer : color: rgba(0,0,0,1); par color: rgba(256,256,256,1);. En conséquence, nous obtenons :

 
Sélectionnez
div#Label_590244915
{
        left: 20px;
        color: rgba(256,256,256,1);
        height: 21px;
        position: absolute;
        text-align: left;
        width: 320px;
        top: 0px;
        opacity: 1;
}
div#Label_781338720
{
        left: 20px;
        color: rgba(256,256,256,1);
        height: 21px;
        position: absolute;
        text-align: left;
        width: 42px;
        top: 29px;
        opacity: 1;
}
div#Label_463949782
{
        left: 20px;
        color: rgba(256,256,256,1);
        height: 21px;
        position: absolute;
        text-align: left;
        width: 42px;
        top: 51px;
        opacity: 1;
}
div#Label_817497855
{
        left: 20px;
        color: rgba(256,256,256,1);
        height: 21px;
        position: absolute;
        text-align: left;
        width: 42px;
        top: 74px;
        opacity: 1;
}
div#Label_705687206
{
        left: 70px;
        color: rgba(256,256,256,1);
        height: 21px;
        position: absolute;
        text-align: left;
        width: 42px;
        top: 29px;
        opacity: 1;
}
div#Label_782673145
{
        left: 70px;
        color: rgba(256,256,256,1);
        height: 21px;
        position: absolute;
        text-align: left;
        width: 42px;
        top: 51px;
        opacity: 1;
}
div#Label_1067317462
{
        left: 70px;
        color: rgba(256,256,256,1);
        height: 21px;
        position: absolute;
        text-align: left;
        width: 42px;
        top: 74px;
        opacity: 1;
}
div#View_774585933
{
        left: 0px;
        height: 548px;
        position: absolute;
        width: 320px;
        top: 20px;
        opacity: 1;
}

Après avoir actualisé la fenêtre de l'émulateur, vous voyez :

Image non disponible

Pour coder les fonctions de l'accéléromètre, nous devons utiliser la bibliothèque JavaScript appMobi. Vous trouverez la documentation de cette bibliothèque ici. Elle est installée lorsque vous téléchargez Intel XDK.

Ouvrez le fichier index.html et ajoutez cette ligne à la liste des scripts :

 
Sélectionnez
<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/appmobi.js"></script>

Ouvrez le fichier ViewController_View_774585933.html. Nous devons renommer les champs avec des noms plus logiques, de :

 
Sélectionnez
<div data-apt-class="Label" id="Label_705687206">0</div>
<div data-apt-class="Label" id="Label_782673145">0</div>
<div data-apt-class="Label" id="Label_1067317462">0</div>

à :

 
Sélectionnez
<div data-apt-class="Label" id="accel_x">0</div>
<div data-apt-class="Label" id="accel_y">0</div>
<div data-apt-class="Label" id="accel_z">0</div>

La même opération doit être réalisée avec le fichier ViewController_View_774585933.css, où nous devons renommer les styles.

Ouvrez le fichier viewcontroller.js et écrivez des fonctions à utiliser avec l'accéléromètre.

 
Sélectionnez
function suc(a) {
    document.getElementById('accel_x').innerHTML = a.x;
    document.getElementById('accel_y').innerHTML = a.y;
    document.getElementById('accel_z').innerHTML = a.z;
}

var watchAccel = function () {
    var opt = {};
    opt.frequency = 5;
    timer = AppMobi.accelerometer.watchAcceleration(suc, opt);
}

function onDeviceReady() {
    watchAccel();
}
document.addEventListener("appMobi.device.ready",onDeviceReady,false);

Actualisez le projet et vous pouvez le voir dans la fenêtre de l'émulateur :

Image non disponible

Vous pouvez voir comment fonctionne l'accéléromètre sur Intel XDK dans le volet « ACCELEROMETER » (Accéléromètre) :

Image non disponible

L'application se présente maintenant ainsi :

Image non disponible

Vous trouverez le code source complet de l'application ici.

Annexe A : Contrats de licence de code Intel® XDK

Annexe B : Contrat de licence des exemples de code source Intel

IV. Remerciements

Merci à Intel Developer Zone et à Xavier Hallade pour la rédaction de ce tutoriel.

Retrouvez le Blog de Xavier Hallade, Software Engineer chez Intel.

Pour toute question, merci de contacter Slim Soussi, EMEA Program Manager chez Intel : slim(pt)soussi(at)intel(pt)com

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Copyright © 2014 intel. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.