développement web
Dans ce tutoriel, nous allons réaliser un mash-up entre APIDEO et Adobe AIR, permettant à un webmaster ou un représentant de dialoguer avec un utilisateur présent sur son site. Le webmaster n’a pas besoin d’être connecté à son site pour cela grâce à un widget AIR installé sur son poste.
APIDEO est un service permettant de rajouter facilement des conversations vidéo au sein d’un site web. APIDEO offre les briques de base au développeur permettant de publier une vidéo issue d’une webcam sur votre site web.
En utilisant APIDEO, il est facile de faire communiquer 2 utilisateurs connectés à votre site web. Cependant, dans des scénarios tels que le support ou la vente en ligne, un des 2 utilisateurs (que nous appellerons « l’agent ») attend la connexion d’un autre utilisateur.
Il n’est pas pratique pour cet utilisateur de garder ouvert 100% du temps le site web, surtout si la fréquentation du site est faible. De plus, il faut que l’agent pense à se connecter au site web à chaque redémarrage de son PC.
Pour éviter les oublis, nous allons développer un widget en utilisant Adobe AIR. Cette petite application démarrera au login de l’utilisateur et résidera dans la barre des tâches. Dès qu’un utilisateur demande de l’aide, le widget le signalera à l’agent à l’aide d’une fenêtre de notification.
Ce mécanisme permettra ainsi à l’utilisateur de chatter à l’intérieur du site web, alors que l’agent aura une application de messagerie instantanée ressemblant à MSN ou Google Talk.
Cette technique pourrait être utilisée avec quelques modifications au sein d’un centre d’appel (pour gérer les requêtes des utilisateurs), ou au sein d’un centre de support. Elle permet en plus d’éviter les mécanismes de web call-back.
Dans cet article, nous allons rapidement présenter l’application la plus restreinte possible d’utilisation d’APIDEO afin d’en évoquer le principe de fonctionnement : un chat entre 2 utilisateurs au sein d’un même site web. Nous allons ensuite parler du mécanisme de gestion des utilisateurs, nécessaire pour détecter une nouvelle connexion. Enfin, nous montrerons qu’une transposition de la partie « Agent » dans le framework AIR d’Adobe permet de créer facilement une application client lourd type MSN qui s’interface avec le site web.
D’une manière générale, vous trouverez la documentation de l’API ainsi que certains tutoriels sur le site web (http://www.apideo.com/documentation). L’utilisation d’APIDEO nécessite une clé qui peut être obtenue gratuitement (pour un usage non commercial) en s’inscrivant, toujours sur le site web à l’adresse http://www.apideo.com/signup.
Afin de suivre ce tutoriel, vous aurez besoin d’un environnement de développement relativement simple. APIDEO étant une API Javascript, et Adobe AIR permettant également de faire du Javascript, vous aurez uniquement besoin d’un serveur web, Apache par exemple.
Une fois l’inscription sur APIDEO effectuée, vous obtiendrez votre clef. Télécharger le package Apideo sur le site web (http://www.apideo.com/download). Le package est composé de deux fichiers Javascript et de 3 fichiers flash.
Ces fichiers doivent être copiés dans votre site web. Vous pouvez avoir plus de détails sur cette page : http://www.apideo.com/fr/installjs
Pour simplifier cet exemple, nous allons développer 2 pages HTML symétriques. La page « client.html » est utilisée par un Client qui navigue sur votre site internet. Elle envoie le flux vidéo nommé « clientStream » et reçoit le flux vidéo nommé « agentStream ». Inversement, la page « agent.html » est utilisée par L’agent. Elle envoie le flux vidéo nommé « agentStream » et reçoit le flux vidéo nommé « clientStream ».
Le code pour « client.html » est ci-dessous :
<html>
<head>
<script src="/[chemin vers apideo]/apideo.js"></script>
<script type="text/javascript">
function init() {
myConnection = Apideo.connect("112233445566778899")
myRoom = myConnection.joinRoom("myroom")
myRoom.startCamera("cameraDiv","clientStream", {width:320, height:240})
myRoom.playStream("playerDiv","agentStream", {width:320, height:240})
}
</script>
</head>
<body onload="init()">
<div id="cameraDiv"></div>
<div id="playerDiv"></div>
</body>
</html>
Note importante : il faut bien évidemment remplacer la clef factice « 112233445566778899 » par la vraie clef que vous pouvez obtenir en vous inscrivant sur le site d’APIDEO.
Nous commençons par inclure le fichier apideo.js et créons 2 éléments « div ». L’un accueillera le flux provenant de notre webcam, l’autre le flux de notre interlocuteur.
La fonction init contient toute la logique de l’application :
La première ligne permet de se connecter à Apideo en spécifiant la clef Apideo qui vous a été donnée lors de l’inscription sur le site web Apideo. La deuxième ligne connecte l’utilisateur à une « room », une sorte de pièce virtuelle, que nous nommons « myroom ».
Les 2 lignes suivantes démarrent respectivement la webcam et le streaming de la webcam dans les 2 divs prévus à cet effet.
Nous passerons assez rapidement sur l’explication de ce code, puisque ce n’est pas le but de cet article. Vous pouvez trouver une explication détaillée de ce code dans le numéro 115 de Programmez, ou à l’adresse suivante : http://www.apideo.com/gettingstarted.
Le code Agent sera symétrique. Il suffit de reprendre la page Client et d’inverser les 2 dernières lignes de la fonction init ainsi:
myRoom.startCamera("cameraDiv","agentStream", {width:320, height:240})myRoom.playStream("playerDiv","clientStream", {width:320, height:240})
Nous allons modifier la partie Agent afin de réagir à l’évènement correspondant à la connexion d’un utilisateur. Pour cela, il suffit d’implémenter la méthode « onUserJoin » sur l’objet myRoom :
Le code HTML de l’Agent devient donc :
<html>
<head>
<script src="/[chemin vers apideo]/apideo.js"></script>
<script type="text/javascript">
function init() {
myConnection = Apideo.connect("112233445566778899")
myRoom = myConnection.joinRoom("myroom")
myRoom.startCamera("cameraDiv","agentStream", {width:320, height:240})
myRoom.playStream("playerDiv","clientStream", {width:320, height:240})
myRoom.onUserJoin = function(userId, userObj){
alert("User Connected");
}
}
</script>
</head>
<body onload="init()">
<div id="cameraDiv"></div>
<div id="playerDiv"></div>
</body>
</html>
Cette simple modification à pour effet de faire apparaître une boite de dialogue lorsqu’un utilisateur se connecte sur la Room.
Nous sommes donc capables d’afficher un message d’alerte à l’intérieur de la page « agent.html » dès qu’un utilisateur se connecte. Nous allons maintenant voir comment passer la partie Agent en mode « client lourd » grâce à Adobe AIR.
Adobe AIR est un moteur d'exécution multi plateforme qui permet aux développeurs Web d'utiliser leurs compétences HTML, JavaScript, Adobe Flash® et Adobe Flex® pour développer des applications Internet riches (RIA) exécutables sur le bureau.
Vous trouverez de plus amples informations sur le site d’Adobe : http://www.adobe.com/fr/products/air/.
Pour continuer ce tutoriel, vous aurez besoin de télécharger le SDK de Adobe AIR à l’adresse suivante : http://www.adobe.com/fr/products/air/tools/sdk/
Le but de cette intégration est de produire, du côté de l’Agent, une application Client riche, qui sera installée sur le poste par un exécutable (l’utilisateur devra préalablement avoir téléchargé et installé le framework AIR). Cet exécutable permet de lancer l’application en tâche de fond, et d’afficher une petite fenêtre en bas à droite de l’écran pour prévenir l’Agent qu’un client a rejoint la Room.
Pour cela, nous allons prendre notre page « agent.html » et nous allons l’intégrer dans un projet Adobe AIR. Les étapes sont les suivantes:
- Créer un répertoire « agent-air » et copier le fichier « agent.html » dans ce répertoire
- Ecrire le fichier descripteur AIR pour l’application
- Importer la librairie AIR
- Lors du lancement de l’application, la réduire à une icône en barre de tâches
- Implémenter une méthode d’affichage d’une fenêtre lors de la connexion d’un utilisateur.
- Ecrire le code HTML de cette fenêtre d’avertissement.
Fichier descripteur AIR
Le fichier descripteur définit les caractéristiques principales de l’application. Nous l’appellerons « application.xml » :
<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.5">
<id>apideo.air.Agent</id>
<version>1.0</version>
<filename>apideo-air-agent</filename>
<initialWindow>
<content>agent.html</content>
<visible>true</visible>
<width>320</width>
<height>400</height>
</initialWindow>
</application>
Ce fichier doit être placé dans le répertoire « agent-air ».
A partir de ce répertoire, nous pouvons déjà tenter d’exécuter l’application grâce à AIR.
Pour cela, il faut se placer dans le répertoire « agent-air » en ligne de commande et lancer la commande « adl application.xml ». Ceci suppose que vous avez correctement installé le SDK de Adobe AIR et notamment que le répertoire AdobeAIRSDK/bin fait partie de votre « path ». Pour plus d’informations sur la créations d’application AIR Html/Javascript, visitez le lien suivant : http://help.adobe.com/en_US/AIR/1.5/devappshtml/WS5b3ccc516d4fbf351e63e3d118666ade46-7ecc.html
Importer la librairie AIR
Nous copions ensuite le fichier AIRAliases.js fourni dans le répertoire frameworks\libs\air du SDK AIR dans le projet.
Import de la librairie AIR :
<script src="AIRAliases.js" language="JavaScript" type="text/javascript"/>
Cette bibliothèque Javascript permet d’accéder plus facilement aux fonctions du SDK de AIR. Par exemple, la classe runtime.flash.filesystem.File possède l’alias air.File grâce à ce fichier.
Initialisation de l’application côté Agent
Nous allons maintenant rajouter dans la page « agent.html » le code AIR permettant de réduire l’application en icône dans la barre des tâches. Cette fonction sera appelée par l’évènement « onload » de la page.
function initSystemTray(){
var iconLoadComplete = function(event)
{
air.NativeApplication.nativeApplication.icon.bitmaps =
new runtime.Array(event.target.content.bitmapData);
}
var iconLoad = new air.Loader();
var iconMenu = new air.NativeMenu();
//Menu contextuel de l’icône en barre des tâches
var exitCommand = iconMenu.addItem(new air.NativeMenuItem("Exit"));
exitCommand.addEventListener(air.Event.SELECT,function(event){
air.NativeApplication.nativeApplication.icon.bitmaps = [];
air.NativeApplication.nativeApplication.exit();
});
var closeCommand = iconMenu.addItem(new air.NativeMenuItem("Hide"));
closeCommand.addEventListener(air.Event.SELECT,function(event){
window.nativeWindow.visible=false;
});
var activateCommand = iconMenu.addItem(new air.NativeMenuItem("Open"));
activateCommand.addEventListener(air.Event.SELECT,function(event){
window.nativeWindow.visible=true;
});
//Positionner et initialiser l’icone en barre des tâches
if (air.NativeApplication.supportsSystemTrayIcon) {
iconLoad.contentLoaderInfo.addEventListener(
air.Event.COMPLETE,
iconLoadComplete);
iconLoad.load(new air.URLRequest("icons/1.png"));
air.NativeApplication.nativeApplication.icon.tooltip =
"APIDEO -AIR application";
air.NativeApplication.nativeApplication.icon.menu = iconMenu;
}
//Cacher la fenêtre principale
window.nativeWindow.visible=false;
}
Ce code rajoute une icône dans la barre des tâches, avec un menu contextuel contenant les éléments :
- Open : affiche la fenêtre
- Hide : cache la fenêtre
- Exit : quitte l’application
De plus, ce code cache la fenêtre de l’application. Au chargement, seule l’icône dans la barre des tâches sera donc visible !
En quelques lignes de code, nous avons facilement construit une application client – agent qui peut s’appliquer dans de nombreux cas métier tels que le conseil commercial ou encore l’assistance technique. La transposition vers une application client lourd est facilitée par le framework AIR d’Adobe, et permet une utilisation très adaptée pour l’agent.
L’exemple donné ici est bien évidemment un prototype et beaucoup reste à faire pour transformer cette application en solution robuste. Dans l’exemple donné, il ne peut y avoir qu’un seul agent et un seul client. Les cas d’erreurs (plusieurs personnes souhaitent accéder à la page agent ou client) ne sons pas gérés.
Cependant, cet exemple montre la technique de base permettant à un agent de suivre en temps réel les demandes des clients et d’y répondre par conversation vidéo.
Cet exemple suppose aussi que l’agent et le client disposent d’une webcam. Pour une application normale, il faudrait disposer en plus de cette conversation vidéo d’un chat texte. Apideo permet l’envoi facile d’évènements d’un navigateur à l’autre, ce qui permet facilement de réaliser des chats. Un exemple de chat est présenté en tutoriel ici : http://www.apideo.com/eventstutorial
Le code de cet article est disponible aux adresses suivantes :
- partie 1 : mise en relation de 2 utilisateurs sur le même site web
- partie 2 : détection de la connection d’un client par un agent sur un site web
- partie 3 : le code complet de l’application, avec intégration AIR
Vous souhaitez partagez vos connaissances avec les membres de Programmez! Publiez vos tutoriels.
Kevin Nguyen (Kévin Nguyen)
Développement - WEB - ASP - PHP - C++ - Delphi - Java - Magazines - Ressources - Forum - Télécharger - Video - Emploi - Campus - .Net - Tutoriels
Le présent site Web est édité par Go 02, Sarl inscrite au RCS de Paris sous le N° 411321366 et dont le siège social est au 21 rue de Fécamp 75012 Paris.
Adresse de courrier électronique :diff@programmez.com
Le directeur de la publication du site www.programmez.com est Jean-Claude Vaudecrane en qualité de gérant de la sarl GO 02
Le portail du décideur informatique en entreprise : Solutions & Logiciels