Introduction au développement de script sur NabCloud.fr (Et bientôt tous les serveurs OJN)

Bonjour a tous !
Ajourd'hui je vais vous présenter le moyen de créer des applications web pour NabCloud.fr (Et bientot tous les serveurs OJN).

Merci a l'équipe d'openjabnab et a l'api http://wizz.cc

Mais alors ça va être difficile ?!

Ce tutoriel s'adresse a tout les niveaux (Si si même si vous vous limitez a Gmail ) même si un minimum de connaissance en HTML, JAVASCRIPT, JQuery et PHP est recommandés. Dans ce tutoriel nous allon apprendre a créer une application facilement et entièrement en Javascript, puis en PHP de A à Z
Ce tutoriel sera diviser en 4 partie principale :

I) Prérequis & introduction au SDK

II) Aide sur le SDK

III) Réalisation d'un contrôleur web simple

IV)Réalisation d'un application en PHP

I) Prérequis & introduction au SDK

C'est quoi un SDK ?

un SDK (Software development toolkit) est un ensemble d'outils permettant aux développeurs de créer des applications de type défini (Ouf merci wikipedia ! ).

Et t'en a un pour OJN ?

Quel question, bien sur ! J'en ai même deux ! Une version Javascript et une version php.

Ou je le trouve ton "SDK" ?

J'y viens, doucement ! :

Version Javascript	NabCloudSDK-js.zip
Version PHP	NabCloudSDK-php.zip

Comment installer le SDK ?

Pour le version Javascript, il faut rajouter entre les balises head ceci :

Code:

<script type="text/javascript" src="nabaztag.js"></script>

Pour la version PHP, il faut rajouter dans les premières lignes de votre code :

Code:

require_once("nabaztag.php");

Si je veut l'utiliser sur un autre serveur ?

Il faudra alors disposer de compétence technique, téléchargez les version dev, et modifier manuellement le fichier

Version Javascript	NabCloudSDK-js.dev.zip
Version PHP	NabCloudSDK-php.dev.zip

Et voila ! Fin de la première partie.

Belle initiative Poupou !

J'espère que ça va en motiver d'autres...

II) Aide sur le SDK
(Partie non obligatoire, zapper directement a la partie 3 si vous souhaiter voir le tuto)

Version Javascript :

Code:

bool nabaztag.ConfigureAndStart(&string bunny)

Pour le moment renvoi toujours true, bunny est le sn du lapin su lequel vous voulez travaillez.

Code:

string nabaztag.tts(&string action, &string msg, &string language)

Envoi du TTS au lapin, pour le moment ne retourne rien. Action peut être égale a "start" ou "stop". Si start, démarre le TTS, si stop, stop le TTS. Msg est le message a envoyer au nabaztag. Language est la langue dans laquelle va être lu le message (Pas de traduction, juste l'accent), peut être égale a "fr", "en", "it"... Merci a http://wizz.cc pour son API.

Code:

string nabaztag.multimedia(&string action, &string ToPlay)

Envoi un mp3 au lapin, pour le moment ne retourne rien. Action peut être égale a "play" ou "stop", si play, joue le mp3, si stop, arrête le mp3. ToPlay est égale a l'url du mp3 a jouer, pour jouer plusieur mp3, ajouter des | entre chaque url.

Code:

string nabaztag.ears(&string action, &int left, &int right)

Change la position des oreilles du nabaztag, pour le moment ne retourne rien. Action peut être égale a "move" ou "reset". Si move, bouge les oreilles dans la position définie par left et right (Valeur de 1 a 16). Si reset, remet les oreilles en position initiale (Droite, 1 & 1).

Code:

string nabaztag.led()

Pas encore implenté.

Version PHP:

Code:

bool nabaztag->ConfigureAndStart(&string bunny)

Pour le moment renvoi toujours true, bunny est le sn du lapin su lequel vous voulez travaillez.

Code:

string nabaztag->tts(&string action, &string msg, &string language)

Envoi du TTS au lapin, retourne la réponse de l'api. Action peut être égale a "start" ou "stop". Si start, démarre le TTS, si stop, stop le TTS. Msg est le message a envoyer au nabaztag. Language est la langue dans laquelle va être lu le message (Pas de traduction, juste l'accent), peut être égale a "fr", "en", "it"... Merci a http://wizz.cc pour son API.

Code:

string nabaztag->multimedia(&string action, &string ToPlay)

Envoi un mp3 au lapin, retourne la réponse de l'api. Action peut être égale a "play" ou "stop", si play, joue le mp3, si stop, arrête le mp3. ToPlay est égale a l'url du mp3 a jouer, pour jouer plusieur mp3, ajouter des | entre chaque url.

Code:

string nabaztag->ears(&string action, &int left, &int right)

Change la position des oreilles du nabaztag, retourne la réponse de l'api. Action peut être égale a "move" ou "reset". Si move, bouge les oreilles dans la position définie par left et right (Valeur de 1 a 16). Si reset, remet les oreilles en position initiale (Droite, 1 & 1).

Code:

string nabaztag->led()

Pas encore implenté.

@wizz Merci. Je te remercie encore pour ton api

Maj, oublie d'un this. dans la version js. Corrigé

III) Réalisation d'un contrôleur web simple

/!\Attention/!\ Ce tutoriel étant concentrez sur le SDK, le code javascript ne sera pas expliquer en entier !

Avant de commencer, voila ce que nous allons faire :
http://nabcloud.fr/dev/DemoWebSDK/

Ensuite,
Si vous êtes sous Windows, il faudra télécharger notepad++.
Si vous êtes sous Mac, il faudra télécharger TextWrangler.
Si vous êtes sous Linux, notamment ubuntu, gedit suffira !

Il va falloir téléchargez le SDK version javascript (NabCloudSDK-js.zip), décompresser le.
Créer un nouveau dossier sur votre bureau et nommer le "TestSDK". Dans ce dossier, glisser le fichier nabaztag.js puis créer un fichier "index.html". Comment faire ?
Pour Windows:
Clique Droit->Nouveau->Fichier texte. Et renommer le en supprimant le ".txt" en "index.html"
Pour Mac:
Ouvrez l'application TextWrangler, puis cliquez sur Fichier->Enregistrer Sous->index.html
Pour linux:
Clique Droit->Créer un document->Fichier vierge. Puis taper "index.html"

Ensuite, pour tous les System d’exploitation, cliquez droit sur le fichier index.html et ouvrire avec->Notepad++ ou TextWrangler ou Editeur de texte

Ensuite, nous allons entrez le code de base de l'application :

Code:

<html>
<head>
</head>
<body>
</body>
</html>

Ensuite, il faut "installer" le SDK, ajouter entre les balises head et /head :

Code:

<script type="text/javascript" src="nabaztag.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>

Ce qui nous donne :

Code:

<html>
<head>
<script type="text/javascript" src="nabaztag.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
</head>
<body>
</body>
</html>

Voila, le SDK est installer. Maintenant, nous allons encore ajouter une ligne dans les balises head :

Code:

<script type="text/javascript">
function LeMACestEntrez() {
$("#MACduNabaztag").fadeOut("fast");
nabaztag.ConfigureAndStart($("#mac").val());
$("#LesApplicationsDisponible").fadeIn("fast");
}
function AuDodo() {
nabaztag.tts("start", "Mais je suis pas fatiguer ! Bon d'accord !", "fr");
setTimeout('nabaztag.ears("move", "10", "10")', 8000);
setTimeout('nabaztag.tts("start", "Enfaite non !", "fr")', 12000);
nabaztag.ears("reset");
}
</script>

Puis nous allons ajouter entre les balise body ce code :

Code:

<div id="MACduNabaztag">
<center>
<label><b>Le MAC de votre nabaztag: </b></label><br />
<input type="text" id="mac"/><input type="submit" Onclick="javascript:LeMACestEntrez();"/>
</center>
</div>

<div id="LesApplicationsDisponible" style="display:none;">
<center>
<input type="submit" value="Dire Bonjour" Onclick="javascript:nabaztag.tts('start', 'Bonjour !', 'fr');" /><br />
<input type="submit" value="Chanson du lapin malefique" Onclick="javascript:nabaztag.multimedia('play', 'http://nabcloud.fr/cast/music/malefique.mp3');" /><br />
<input type="submit" value="Au dodo !" Onclick="javascript:AuDodo();" />
</center>
</div>

Explication :
le bout de code

Code:

<div id="MACduNabaztag">

définie le début d'un "bloc" qui contient une zone pour entrez du texte, le mac du nabaztag et un bouton qui permet de valider,le MAC. Ce bloc ce finit par

Code:

</div>

Le code du bouton est :

Code:

<input type="submit" Onclick="javascript:LeMACestEntrez();"/>

On peut remarquer l'attribut "Onclick" qui veut dire "Quand le bouton sera appuyer, fait ça" et qui est égale a "javascript:LeMACestEntrez();". Quand on appuiera sur le bouton, il exécutera la fonction LeMACestEntrez(); qui est définie plus haut, allons voir cette fonction :

Code:

function LeMACestEntrez() {
$("#MACduNabaztag").fadeOut("fast");
nabaztag.ConfigureAndStart($("#mac").val());
$("#LesApplicationsDisponible").fadeIn("fast");
}

Dans la première ligne, on dit de cacher le bloc "MACduNabaztag". Dans la deuxième ligne, nous faisons le première appelle au SDK, "nabaztag.ConfigureAndStart($("#mac").val())".
Cette fonction dit au SDK de régler le MAC du nabaztag sur lequel vous voulez travailler avec la valeur du champ de texte. Quand vous utiliser le SDK, il faut TOUJOURS exécuter cette ligne avant tout autre appelle au SDK. La dernière ligne dit de montrer le deuxième bloc qui contient trois bouton :

Code:

<div id="LesApplicationsDisponible" style="display:none;">
<center>
<input type="submit" value="Dire Bonjour" Onclick="javascript:nabaztag.tts('start', 'Bonjour !', 'fr');" /><br />
<input type="submit" value="Chanson du lapin malefique" Onclick="javascript:nabaztag.multimedia('play', 'http://nabcloud.fr/cast/music/malefique.mp3');" /><br />
<input type="submit" value="Au dodo !" Onclick="javascript:AuDodo();" />
</center>
</div>

La première ligne, contient un bouton "Dire bonjour", qui fera dire bonjour a votre nabaztag. L'attribut Onclick est égale a un autre appel au SDK, l'appel tts qui permet de lire du text sur le nabaztag

Code:

nabaztag.tts(Start ou Stop, Votre message, la langue)

Pour plus d'info, voir l'aide sur le SDK

Bientôt la suite !