Intel XDK : accéder aux fonctionnalités mobiles natives dans votre application HTML5

L’environnement de développement Intel XDK est conçu pour les développeurs qui souhaitent utiliser leurs connaissances HTML5 pour créer des applications hybrides pour des appareils mobiles (téléphones et tablettes) et d'autres plates-formes tels que Google Chrome. Pour commencer, vous devez d'abord télécharger et installer la nouvelle application Intel XDK.

Intel XDK est constitué d'un ensemble d'outils de développement pour aider à coder, déboguer, tester et construire des applications web mobiles et applications hybrides HTML5 multi plates-formes.

Ce tutoriel vise à expliquer les bases de la création d'une application mobile hybride avec l'environnement de développement Intel XDK.

Vous pouvez retrouver la documentation de l'API JavaScript Intel XDK à cette url : http://software.intel.com/en-us/node/492826

Chaque projet dans l’éditeur Intel XDK correspond à une application HTML5. Vous pouvez créer un projet HTML5 à partir de zéro, en important des applications HTML5 existantes ou en modifiant l'un des exemples d'applications incluses.

Pour commencer,  on ouvre un nouveau projet. Cela nous permet de générer le fichier index.html suivant :

<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
  <title>Your New Application</title>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
  <style type="text/css">
    /* Prevent copy paste for all elements except text fields */
    *  { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
    input, textarea  { -webkit-user-select:text; }
  </style>
  <script src='intelxdk.js'></script>
  <script type="text/javascript">
    /* This code is used to run as soon as Intel activates */
    var onDeviceReady=function(){
      //hide splash screen
      intel.xdk.device.hideSplashScreen();
    };
    document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
    </script>
</head>
<body>
  <!-- content goes here-->
</body>
</html>

Alerte sonore et vibreur

Nous commençons avec deux fonctionnalités simples, un beep et l'activation du vibreur du périphérique. Nous ajoutons les deux fonctions javascripts à la fin de "</script>" :

function beepOnce()
{
    try
    {
        intel.xdk.notification.beep(1);
    }
    catch(e) {}
}

function vibrateDevice()
{
    try
    {
        intel.xdk.notification.vibrate();
    }
    catch(e) {} 
}

Ensuite, nous ajoutons deux boutons dans les balises "<body>" :

<div><a ontouchstart="beepOnce();">Beep</a></div>
<div><a ontouchstart="vibrateDevice();">Vibreur</a></div>

Les fonctions à retenir sont : "intel.xdk.notification.beep(1);" et "intel.xdk.notification.vibrate();". L'argument de la fonction beep (ici 1) correspond aux nombres d'alertes sonores jouées à chaque appel.

Code complet :

<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
  <title>Camera</title>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
  <style type="text/css">
    /* Prevent copy paste for all elements except text fields */
    *  { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
    input, textarea  { -webkit-user-select:text; }
  </style>
  <script src='intelxdk.js'></script>
  <script type="text/javascript">
    /* This code is used to run as soon as Intel activates */
    var onDeviceReady=function(){
      //hide splash screen
      intel.xdk.device.hideSplashScreen();
    };
    document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);

    function beepOnce()
    {
        try
        {
            intel.xdk.notification.beep(1);
        }
        catch(e) {}
    }

    function vibrateDevice()
    {
        try
        {
            intel.xdk.notification.vibrate();
        }
        catch(e) {} 
    }
    </script>
</head>
<body>
  <div><a ontouchstart="beepOnce();">Beep</a></div>
  <div><a ontouchstart="vibrateDevice();">Vibration</a></div>
</body>
</html>

Lecteur de musique

Intel XDK propose d’accéder au lecteur de musique du périphérique. Une manière simple de lancer un fichier son :

function beepOnce()
{
    try
    {
        intel.xdk.notification.beep(1);
    }
    catch(e) {}
}

function vibrateDevice()
{
    try
    {
        intel.xdk.notification.vibrate();
    }
    catch(e) {} 
}

Code complet du lecteur de musique :

<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
  <title>Camera</title>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
  <style type="text/css">
    /* Prevent copy paste for all elements except text fields */
    *  { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
    input, textarea  { -webkit-user-select:text; }
  </style>
  <script src='intelxdk.js'></script>
  <script type="text/javascript">
    /* This code is used to run as soon as Intel activates */
    var onDeviceReady=function(){
      //hide splash screen
      intel.xdk.device.hideSplashScreen();
    };
    document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);

    function playSound()
    {
        try
        {
            intel.xdk.player.playSound("music.wav"); 
        }
        catch(e) { } 
    }
    </script>
</head>
<body>
  <div><a ontouchstart="playSound();">Play</a></div>
</body>
</html>

Alerte native

Pour rendre les applications hybrides plus proches des applications natives, l'API JavaScript Intel vous permet d'enrichir certains composants tels que les alertes. Plutôt que de lancer vos alertes avec la fonction "alert()", vous pouvez utiliser :

intel.xdk.notification.alert("Titre","Alerte","Confirmer");

Contrôle de la caméra

Voici un exemple permettant d'ajouter une fonctionnalités prise de photo, à ajouter avant la balise de fermeture "" :

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");
    }
  }
}

Code complet :

<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
  <title>Camera</title>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
  <style type="text/css">
    /* Prevent copy paste for all elements except text fields */
    *  { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
    input, textarea  { -webkit-user-select:text; }
  </style>
  <script src='intelxdk.js'></script>
  <script type="text/javascript">
    /* This code is used to run as soon as Intel activates */
    var onDeviceReady=function(){
      //hide splash screen
      intel.xdk.device.hideSplashScreen();
    };
    document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);

    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");
        }
      }
    }
    </script>
</head>
<body>
  <div><a ontouchstart="capturePhoto();">Photo</a></div>
</body>
</html>

Géolocalisation

Pour obtenir l'emplacement actuel du périphérique, Intel XDK dispose de la fonction : getCurrentPosition. Cette commande acquiert de façon asynchrone la latitude et la longitude approximatives de l'appareil. Lorsque des données sont disponibles, la fonction de réussite est appelée. S'il existe une erreur obtenant des données de position, la fonction d'erreur est appelée.

intel.xdk.geolocation.getCurrentPosition(suc,fail);

Code complet :

<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
  <title>Camera</title>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
  <style type="text/css">
    /* Prevent copy paste for all elements except text fields */
    *  { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
    input, textarea  { -webkit-user-select:text; }
  </style>
  <script src='intelxdk.js'></script>
  <script type="text/javascript">
    /* This code is used to run as soon as Intel activates */
    var onDeviceReady=function(){
      //hide splash screen
      intel.xdk.device.hideSplashScreen();
    };
    document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);

var getLocation = function() 
{
    var suc = function(p){
        if (p.coords.latitude != undefined)
        {
            currentLatitude = p.coords.latitude;
            currentLongitude = p.coords.longitude;
            intel.xdk.notification.alert("Titre","Latitude : "+currentLatitude+"nLongitude : "+currentLongitude,"Valider");
        }

    };
    var fail = function(){ 
        alert("geolocation failed"); 
        getLocation();
    };

    intel.xdk.geolocation.getCurrentPosition(suc,fail);
}
    </script>
</head>
<body>
  <div><a ontouchstart="getLocation();">Géolocalisation</a></div>
</body>
</html>

Merci d'avoir suivi ce tutoriel, vous êtes à présent autonome pour créer des applications mobiles hybrides via l'environnement de développement Intel XDK.

Per informazioni più dettagliate sulle ottimizzazioni basate su compilatore, vedere il nostro Avviso sull'ottimizzazione.