Tuto: Faire une application Facebook 3/3 0
Tutoriel
Pour cette troisième et dernière partie de ce tutoriel, nous allons écrire le mécanisme de l’application en question à savoir afficher une question aléatoire depuis un fichier XML et enregistrer la réponse par le biais d’une requéte AJAX dans la base de donnée MySQL.
Pour se faire nous allons déjà créer notre document XML qui contiendra les questions et faire ensuite un fichier qui servira de serveur pour nos requetes AJAX puis enfin styler le tout avec un peu de CSS.
Le langage XML
Voici la structure de notre document XML qui contiendra les questions, gardez en tête que XML est un language de balisage non strict, ce qui signifie que c’est vous qui inventez les balises et leurs attributs.
< ?xml version="1.0" encoding="ISO-8859-1"?> <form> <question> <id>0</id> <txt> <fr> Combien font 2+2? </fr> </txt> <txt_reponses> <fr> <reponse idr="0_1">Je trouve pas ma calculette...</reponse> <reponse idr="0_2">4</reponse> <reponse idr="0_3">Je m'en fout!</reponse> </fr> </txt_reponses> </question> <question> <id>1</id> <txt> <fr> XML est il un language de balisage strict? </fr> </txt> <txt_reponses> <fr> <reponse idr="1_1">Pire tu meurs</reponse> <reponse idr="1_2">XM quoi???</reponse> <reponse idr="1_3">Je m'en fout!</reponse> </fr> </txt_reponses> </question> </form>
Voici un exemple pour le fichier XML, chaque balises question contient une sous balise « id» qui doit être incrémenter à chaque nouvelle questions, tout comme pour les reponses avec l’attribut « idr» qui contient l’ID de la question suivi du numéro de la réponse pour s’y retrouver plus tard. J’ai entouré la question et les réponses d’une balise « fr» pour vous montrer qu’il est possible de proposer les traductions directement dans le fichier XML ce qui évite d’atteindre les limites de la balise fb:intl qui est l’outil de traduction Facebook.
php_attitude
Notre fichier XML remplis passons maintenant au fichier qui répondra à nos requêtes AJAX. Pour commencer une fonction qui récupère une question aléatoire dans notre fichier XML et qui l’affiche à votre visiteur dès que ce dernier clique sur commencer.
< ?php
require_once 'inc/facebook.php'; // On commence par appeler l'API fb
require_once 'lib/db_connect.php'; // On se connecte à la bdd
// Et ici toutes vos classes
$appapikey = 'votre API once again';
$appsecret = 'Votre API secret once again';
$facebook = new Facebook($appapikey, $appsecret);
// Toutes les variables d'URL pour simplifier la maintenance de l'appli
$appname = 'Ici le nom de votre appli (URL)';
$fb_path = 'http://apps.facebook.com/';
$app_path = $fb_path.$appname.'/'; // Verifiez que le resultat mene bien vers votre appli
$callbackurl = 'Ici votre callback URL';
// Ces deux variables recupéreront l'ID et la langue de l'utilisateur dans la requete AJAX
$user_id = $_POST['fb_sig_user'];
$lang = $_POST['fb_sig_locale'];
// Par exemple avec ca notre appli gére le francais et l'anglais
if ($lang == 'fr_FR') {
$l = 'fr';
} else {
$l = 'en';
}
// Donner la premiere question, en vérifiant que l'ID de l'utilisateur soit bien numérique
if ((isset($_POST['start'])) && (isset($_POST['fbid'])) && (is_numeric($_POST['fbid']))) {
$fbid = $_POST['fbid'];
// On charge notre fichier XML et le transforme en objet avec SimpleXML
$xml = simplexml_load_file('q.xml');
// On compte les questions
$i = -1;
foreach($xml->xpath('//question/id') as $id) {
$i++;
}
// On choisit une question aléatoire
$id_next = mt_rand(0,$i);
// On charge des variables avec les reponses et la question
$question = $xml->xpath('//question[id="'.$id_next.'"]/txt/'.$l.'');
$rep = $xml->xpath('//question[id="'.$id_next.'"]/txt_reponses/'.$l.'');
// on renvoi tout ca
echo '
<div class="reponse" id="reponse">
<!-- Ce div sert à afficher un chargement entre 2 question -->
<div id="loader" style="display: none;">
<h2><fb :intl>Chargement en cours...</fb></h2>
</div>
<div id="question_reponse">
<h1>'.$question_.'</h1>
<br />
';
// Pour chaque réponse on fait un bouton avec notre futur fonction Ajax
// Il contient l'ID de la prochaine question, l'id de la reponse cliqué
// et l'id de l'utilisateur
foreach($rep[0] as $reponse) {
echo '<button onclick="next_question(\'questionnaire_wrap\',\''.$id_next.'\',\''.$reponse->attributes()->idr.'\',\''.$fbid.'\'); return false;">'.$reponse.'</button>
';
}
echo '
</div>
';
}
?>
</div>Voila ce bout de code des plus commenté prend place dans le dossier lib, dans un fichier que l’on nommera server.php par exemple. Elle se chargera d’envoyer la première question et de mettre notre appli sur les rails. Voici maintenant un autre bout de code qui vous permettra d’enregistrer la réponse et de donner la question suivante.
// Recuperer la reponse et donné la question suivante
// On verifie que la requte AJAX contiens tout ce dont on a besoin
if ((isset($_POST['id_question'])) && (isset($_POST['reponse'])) && (isset($_POST['fbid'])) && (is_numeric($_POST['fbid'])) && (is_numeric($_POST['id_question']))) {
// On charge des variables
$fbid = $_POST['fbid'];
$last_question = $_POST['id_question'];
$last_reponse = mysql_real_escape_string($_POST['reponse']);
// On enregistre dans la bdd
$requete = ("INSERT INTO `form`
(`fb_id`, `victime_id`, `question_id`, `reponse`, `timestamp`)
VALUES ('$user_id', '$fbid', '$last_question', '$last_reponse','$timestamp')");
$send = mysql_query($requete,$connection) OR DIE(mysql_error());
// on charge notre fichier XML en objet
$xml = simplexml_load_file('q.xml');
// compter le nombre de question
$i = -1;
foreach($xml->xpath('//question/id') as $id) {
$i++;
}
$id_next = $last_question + 1;
// verifier que la question suivante existe sinon on repart a zero
if ($id_next > $i) {
$id_next = 0;
}
$question = $xml->xpath('//question[id="'.$id_next.'"]/txt/'.$l.'');
$rep = $xml->xpath('//question[id="'.$id_next.'"]/txt_reponses/'.$l.'');
// et on renvoi la question suivante
echo '
<div class="reponse" id="reponse">
<!-- Ce div sert à afficher un chargement entre 2 question -->
<div id="loader" style="display: none;">
<h2><fb :intl>Chargement en cours...</fb></h2>
</div>
<div id="question_reponse">
<h1>'.$question_.'</h1>
<br />
';
// Pour chaque réponse on fait un bouton pour notre futur fonction Ajax
// Il contient l'ID de la prochaine question, l'id de la reponse cliqué
// et l'id de l'utilisateur
foreach($rep[0] as $reponse) {
echo '<button onclick="next_question(\'questionnaire_wrap\',\''.$id_next.'\',\''.$reponse->attributes()->idr.'\',\''.$fbid.'\'); return false;">'.$reponse.'</button>
';
}
echo '
</div>
';
}
</div>Voila pour notre fichier server.php, on peut imaginer des envois de notification ou feed dans les réponses qu’il retourne, ce n’est évidemment qu’un exemple à vous de le faire évoluer. Il ne nous reste plus qu’a créer notre fonction AJAX en FBJS (le javascript Facebook) pour nous relier avec notre fichier server.php et styler le tout avec un peu de CSS.
Ajax
< ?php
// On active le login pour récupérer l'id de l'utilisateur
$login = true;
// On affiche le menu de notre appli
$tabs = true;
// On appel notre header.php
require_once('header.php');
// La balise FBML fb:name permet de récupérer via l'id le nom et le prénom de l'utilisateur
echo '<h1>Bienvenue <fb :name uid="'.$user_id.'" />!!
<div id="load_prant">
<!-- Ce div sert à afficher un chargement entre 2 question -->
<div id="loader" style="display: none;">
<h2><fb :intl>Chargement en cours...</fb></h2>
</div>
</div>
<div id="questionnaire_wrap">
<div class="reponse" id="reponse">
<a href="#" onclick="start_question(\'questionnaire_wrap\',\'ok\',\''.$fbid.'\'); return false;">Commencer le questionnaire</a>
</div>
</div>
<!-- Ceci est une variable FBJS vide pour vider le contenu dun div lors des chargements -->
<fb :js-string var="empty"></fb>
';
// Au clique de ce lien on commence le questionnaire $fbid contient l'ID utilisateur
// voir le header.php pour plus d'infos
// Et enfin nos 2 fonctions Ajax
?>
<script type="text/javascript">
<!--
function start_question(div,start,fbid) {
// On affiche le message de chargement
document.getElementById('loader').setStyle({display: 'block'});
// On vide le contenu de #questionnaire_wrap
document.getElementById('questionnaire_wrap').setInnerFBML(empty);
// On initialise la requete AJAX
var ajax = new Ajax();
// La reponse sera en FBML (le html fb) mais on aurai pu l'avoir en Json
ajax.responseType = Ajax.FBML;
// Une fois la requete envoyé et la réponse de server.php recu
ajax.ondone = function(data) {
var loader = document.getElementById('loader');
// On supprime les noeuds enfants de #load_parent dans l'arbre DOM
// vu qu'il sera renvoyé par le server.php
document.getElementById('load_parent').removeChild(loader);
// On affiche le resultat dans la variable div qui contient l'id du div questionnaire_wrap
document.getElementById(div).setInnerFBML(data);
}
// Laisser à 1 pour envoyer avec la requete la langue et l'ID utilisateur
// Plus pleins d'autres infos
ajax.requireLogin = 1;
// On envoi les donnés
// start vaut "true" il sera verifier en php avec if ($_POST['start']) {...}
// Et fbid contient l'ID utilisateur recuperer dans header.php
var params={"start":true,"fbid":fbid};
// Verifier bien le chemin vers votre server.php
ajax.post('<?php echo $callbackurl; ?>lib/server.php',params);
}
function next_question(div,idQuestion,reponse,fbid) {
// On affiche le message de chargement
document.getElementById('loader').setStyle({display: 'block'});
// On vide le contenu de #questionnaire_wrap
document.getElementById('questionnaire_wrap').setInnerFBML(empty);
var ajax = new Ajax();
ajax.responseType = Ajax.FBML;
ajax.ondone = function(data) {
var reponse = document.getElementById('reponse');
reponse.setInnerFBML
// On affiche les donnés
document.getElementById(div).setInnerFBML(data);
// On cache le loader
document.getElementById('loader').setStyle({display: 'none'});
}
ajax.requireLogin = 1;
var params={"id_question":idQuestion,"reponse":reponse,"fbid":fbid};
ajax.post('< ?php echo $callbackurl; ?>lib/server.php',params);
}
-->
</script>
< ?php
// On appel notre footer.php
require_once('footer.php');
?>Voila l’application est désormais préte il ne reste plus qu’a la styler un peu avec du CSS.
Cascading style sheet
Pour utiliser CSS dans vos applications Facebook, il y a de nombreuses techniques, je vais vous en montrer une simple. Elle consiste à créer un fichier style.php dans votre dossier lib et de l’inclure dans vos librairies du fichier header.php, voici le contenu de ce fichier.
< ?php
function get_style() {
echo '<style type="text/css">
/* ICI votre code CSS */
';
}
?>Après l’avoir inclus dans votre header.php, n’oubliez d’exécuter la fonction avec « get_style();»
Vous voila prêt à écrire vos propres applications Facebook, gardez en tête d’alléger au maximum vos applications car pendant les montés en charges Facebook a du mal à suivre et surtout de les sécuriser. Le succès d’une application réside dans la viralité de cette dernière c’est à dire sa capacité à se rendre indispensable pour les utilisateurs et à se répandre sur les profils des utilisateurs de Facebook. L’API facebook regorge de fonctions pour vous faciliter le travail et le wiki est une mine d’informations à ne surtout pas négliger.
Je met à votre disposition la source de cet fabuleuse application qui ne sert pas à grand chose si ce n’est de vous faire comprendre le fonctionnement d’une application Facebook.
Télèchargez la source de l'appli
Deezer
Sendgits!
iHate
iCompare
Mygalerie.fr
Hightux.net
Picasa
War on drugs
