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.
图标图像:
