Cet article va expliquer comment cr\u00e9er une application Twitter simple, qui fonctionne qu\u2019on soit connect\u00e9 ou non. Pour cel\u00e0, nous allons utiliser des technologies Web, en particulier des nouveaut\u00e9s de HTML5 qui permettent de stocker des donn\u00e9es c\u00f4t\u00e9 client et de mettre des fichiers en cache. Le navigateur Safari de l\u2019iPhone se pr\u00eate bien \u00e0 l\u2019exercice, puisqu\u2019il supporte ces technologies.<\/p>\n
Les plus press\u00e9s peuvent tester imm\u00e9diatement la d\u00e9mo<\/a>.<\/p>\n Tout d\u2019abord, il faut cr\u00e9er le squelette HTML de notre application. Ce fichier HTML devrait faire l\u2019affaire:<\/p>\n Ce fichier se d\u00e9compose de la mani\u00e8re suivante:<\/p>\n Passons maintenant au fichier twitter.js<\/p>\n La premi\u00e8re chose, est d\u2019ouvrir la base de donn\u00e9es. Si elle n\u2019existe pas, elle sera cr\u00e9\u00e9e automatiquement.<\/p>\n La fonction La base sera accessible \u00e0 travers la variable globale On va ensuite cr\u00e9er un objet Pour le moment il ne contient qu\u2019un attribut de configuration: le nombre de tweets \u00e0 t\u00e9l\u00e9charger \u00e0 chaque rafra\u00eechissement. Mais nous allons tout de suite lui ajouter des m\u00e9thodes dans le chapitre suivant.<\/p>\n Au chargement de l\u2019application, nous allons tenter de cr\u00e9er la table (si elle n\u2019existe pas) et lire les tweets qu\u2019elle contient pour les afficher. Comme les donn\u00e9es sont stock\u00e9e en local, les tweets s\u2019afficheront, m\u00eame si la connexion Internet est interrompue.<\/p>\n En revanche, si la base de donn\u00e9es n\u2019est pas disponible, nous allons r\u00e9cup\u00e9rer les tweets directement en ligne.<\/p>\n On va donc ajouter la m\u00e9thode Cr\u00e9ation de la table:<\/p>\n Si la base de donn\u00e9es est bien l\u00e0 et la table cr\u00e9\u00e9e, nous pouvons faire une requ\u00eate pour r\u00e9cup\u00e9rer les tweets:<\/p>\n Rien de tr\u00e8s compliqu\u00e9: la requ\u00eate de type L\u2019affichage d\u2019un tweet est effectu\u00e9 par une fonction qui va simplement g\u00e9n\u00e9r\u00e9 un Notez que cette fonction utilise une autre fonction prettyDate qui formatte la date pour la rendre lisible. Je ne documenterai pas cette fonction mais vous la trouverez dans la d\u00e9mo.<\/p>\n Pour le moment, notre table ne contient aucun tweet, donc rien ne s\u2019affiche. Nous allons charger les donn\u00e9es twitter, les stocker et les afficher.<\/p>\n Pour faire simple, nous allons utiliser l\u2019API JSONP de Twitter pour charger les 20 derniers tweets. La m\u00e9thode load fait plusieurs choses:<\/p>\n Comme la timeline est prot\u00e9g\u00e9e par un login et un password, il faudra les entrer lorsque le navigateur le demande.<\/p>\n Une fois le chargement termin\u00e9, un callback est automatiquement appel\u00e9. Si la base de donn\u00e9es existe, il va simplement extraire les donn\u00e9es qui nous int\u00e9ressent et les stocker dans la base de donn\u00e9es. Sinon, il va afficher chaque tweet.<\/p>\n Il faut savoir que l\u2018 Voil\u00e0 notre m\u00e9thode d\u2019insertion qui simule une insertion synchrone. Elle prend deux param\u00e8tres: le tableau de donn\u00e9es et un callback \u00e0 executer en find d\u2019insertion.<\/p>\n Voil\u00e0, nous avons tout le code n\u00e9cessaire pour r\u00e9cup\u00e9rer des tweets, les stockers localement et les afficher sans repasser par le serveur.<\/p>\n Jusque l\u00e0, nous avons cr\u00e9\u00e9 une application web qui conserve des donn\u00e9es en local. Une connexion reste n\u00e9anmoins n\u00e9cessaire pour afficher la page HTML et charger le javascript. Heureusement, HTML5 offre un m\u00e9canisme qui permet de garder ces deux fichiers en cache et d\u2019y acc\u00e9der m\u00eame sans connexion Internet. Cette fonctionnalit\u00e9 est offerte par le Ce fichier doit \u00eatre envoy\u00e9 avec le bon type MIME Un fois ce fichier cr\u00e9\u00e9, il suffit de l\u2019inclure dans le fichier HTML en modifiant la balise HTML:<\/p>\n Si vous avez bien suivi toutes les \u00e9tapes (et si j\u2019ai bien expliqu\u00e9), vous devriez avoir une application qui fonctionne totallement offline. Lors de la premi\u00e8re connexion, la page HTML et le JS se chargent et sont mis en cache. Ils pourront \u00eatre acc\u00e9d\u00e9s n\u2019importe quand par la suite, m\u00eame sans connexion. L\u2019application permet ensuite d\u2019afficher des tweets stock\u00e9s localement, sans t\u00e9l\u00e9chargement quelque donn\u00e9e.<\/p>\n Pour t\u00e9l\u00e9charger les fichiers complet et tester l\u2019application, tout est disponible \u00e0 cette adresse: http:\/\/svay.com\/experiences\/iphone-twitter\/<\/a><\/p>\n Cet exemple est plut\u00f4t basique et vous aurez certainement des id\u00e9es d\u2019applications plus \u00e9labor\u00e9es. D\u2019ailleurs, il semblerait que Google lance dans peu de temps une version offline de GMail pour iPhone en utilisant les m\u00eame technologies.<\/p>\n Enfin, voil\u00e0 les liens qui ont servi \u00e0 pr\u00e9parer ce tuto:<\/p>\n Cet article va expliquer comment cr\u00e9er une application Twitter simple, qui fonctionne qu\u2019on soit connect\u00e9 ou non. Pour cel\u00e0, nous allons utiliser des technologies Web, en particulier des nouveaut\u00e9s de HTML5 qui permettent de stocker des donn\u00e9es c\u00f4t\u00e9 client et de mettre des fichiers en cache. Le navigateur Safari de l\u2019iPhone se pr\u00eate bien \u00e0 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[27],"tags":[],"_links":{"self":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts\/2099"}],"collection":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/comments?post=2099"}],"version-history":[{"count":0,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/posts\/2099\/revisions"}],"wp:attachment":[{"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/media?parent=2099"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/categories?post=2099"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/svay.com\/blog\/wp-json\/wp\/v2\/tags?post=2099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Le squelette de l’application<\/h2>\n
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text\/html; UTF-8" \/> <meta http-equiv="Content-Script-Type" content="text\/javascript" \/> <meta http-equiv="Content-Style-Type" content="text\/css" \/> <meta http-equiv="Content-Language" content="en" \/> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=1;"\/> <style type="text\/css"> body { font-family: sans-serif; margin: 0; padding: 0; } #toolbar { background: #EFEFEF; padding: 5px; border-bottom: 1px solid #a3a3a3; } #toolbar button { border: 1px solid #a1a1a1; -webkit-border-radius: 3px; background: #F3F3F3; padding: 0.5em; } ol { margin: 0; padding: 0; } ol li{ list-style: none; border-bottom: 1px solid #CCC; margin: 0; padding: 0.5em; overflow: auto; } span.text { display: block; margin-left: 29px; } li img { float: left; } .date { font-size: 0.8em; color: #AAA; } <\/style> <title>iPhone Twitter<\/title> <\/head> <body> <div id="toolbar"> <button id="load">↻ Refresh<\/button> <\/div> <ol id="timeline"><\/ol> <script type="text\/javascript" src="twitter.js"><\/script> <script type="text\/javascript"> <!-- window.onload = function() { Twitter.init(); document.getElementById('load').onclick = function() { Twitter.load(); } } --> <\/script> <\/body> <\/html> <\/pre>\n\n
Acc\u00e8s \u00e0 la base de donn\u00e9es<\/h2>\n
var db = null; try { if (window.openDatabase) { db = openDatabase("Twitter", "1.0", "Twitter Feed", 200000); } } catch(err) {} <\/pre>\nopenDatabase<\/code> prend 4 param\u00e8tres:<\/p>\n\n
db<\/code>.<\/p>\nL’objet Twitter<\/h2>\n
Twitter<\/code> qui va contenir le code pour le chargement et l\u2019affichage des tweets.<\/p>\n var Twitter = { count: 20 } <\/pre>\nCr\u00e9ation de la table et affichage des tweets<\/h2>\n
init<\/code> qui suit:<\/p>\n \/\/Create table init : function() { console.log('init'); if (db) { \/\/Have database? Read data db.transaction(function(tx) { tx.executeSql( "CREATE TABLE IF NOT EXISTS status (id REAL UNIQUE, username TEXT, created_at TEXT, text TEXT, avatar TEXT)", [], function(result) { Twitter.readStatus(); }, function(tx, error) { Twitter.readStatus(); } ); }); } else { \/\/No database? Just load data and display Twitter.load(); } }, <\/pre>\n \/\/Read statuses readStatus : function() { console.log('read'); db.transaction(function(tx) { tx.executeSql("SELECT id, username, created_at, text, avatar FROM status ORDER BY id DESC", [], function(tx, result) { var timeline = document.getElementById('timeline'); timeline.innerHTML = ''; for (var i = 0; i < result.rows.length; ++i) { var row = result.rows.item(i); Twitter.display(row); } }, function(tx, error) { \/\/ Couldn't retrieve tweets return; }); }); }, <\/pre>\nSELECT<\/code> r\u00e9cup\u00e8re les donn\u00e9es et on passe chaque ligne r\u00e9sultat \u00e0 une fonction qui va se charger de les afficher.<\/p>\nLI<\/code> pour l\u2019ajouter \u00e0 notre liste ordonn\u00e9e:<\/p>\n \/\/Display statuses display : function(row) { console.log('display'); var timeline = document.getElementById('timeline'); var li = document.createElement('LI'); var d = new Date(); d.setTime(Date.parse(row['created_at'])); li.innerHTML = '<img src="'+row['avatar']+'" alt="" height="24" widht="24"\/>'+ '<span class="text">'+ '<strong>'+row['username'] + '<\/strong> ' + row['text'] + ' <span class="date">' + prettyDate(d) + '<\/span>'+ '<\/span>'; timeline.appendChild(li); }, <\/pre>\nRemplissage de la base de donn\u00e9es<\/h2>\n
\n
<script><\/code> pr\u00e9c\u00e9dents qui auraient pu \u00eatre ajout\u00e9 par un pr\u00e9c\u00e9dent chargement<\/li>\n<script><\/code> dans le <head><\/code><\/li>\n load : function() { console.log('load'); \/\/Remove JSONP scripts var head = document.getElementsByTagName('head')[0]; var scripts = null; while ((scripts = head.getElementsByTagName('script')).length > 0 ) { head.removeChild(scripts[0]); } document.getElementById('load').innerHTML = 'Refreshing...'; var now = new Date(); var url = 'http:\/\/twitter.com\/statuses\/friends_timeline.json?callback=Twitter.twitterCallback&count={count}&random={random}'; var script = document.createElement('script'); script.setAttribute( 'src', url.replace('{count}',Twitter.count) .replace('{random}',now.getTime()) ); script.onload = function() { document.getElementById('load').innerHTML = '↻ Refresh'; } console.log(script); head.appendChild(script); }, <\/pre>\n twitterCallback : function(obj) { console.log('callback'); if (db) { var inserts = []; for (var i=0, l=obj.length; i<l; i++) { var status = [ obj[i].id, obj[i].user.screen_name, obj[i].text, obj[i].created_at, obj[i].user.profile_image_url ] inserts.push(status); } Twitter.insert(inserts, Twitter.readStatus); } else { \/\/No database? just display for (var i=0, l=obj.length; i<l; i++) { Twitter.display({ 'id' : obj[i].id, 'username' : obj[i].user.screen_name, 'text' : obj[i].text, 'created_at' : obj[i].created_at, 'avatar' : obj[i].user.profile_image_url }); } } }, <\/pre>\nINSERT<\/code> est asynchrone et risque de lancer l\u2019affichage avant que nos donn\u00e9es soient enti\u00e8rement stock\u00e9es. Nous utilisons donc notre propre fonction Twitter.insert<\/code> qui va faire les insertions et n\u2019afficher qu\u2019\u00e0 la fin.<\/p>\n \/\/Synchronous insert insert : function(arStatus, callback) { var status = arStatus.pop(); var sql = "INSERT INTO status (id, username, text, created_at, avatar) VALUES (?,?,?,?,?)"; db.transaction( function (tx) { tx.executeSql( sql, status, function(tx, result){ if (arStatus.length > 0) { Twitter.insert(arStatus, callback); } else { callback(); } }, function(tx, error){ if (arStatus.length > 0) { Twitter.insert(arStatus, callback); } else { callback(); } } ); } ); } <\/pre>\nCache d’applications offline<\/h2>\n
cache-manifest<\/code>, un fichier qui indique au navigateur la liste des fichiers \u00e0 garder en cache. Ces fichiers ne seront plus jamais rafraichis, \u00e0 moins que le cache-manifest<\/code> ne change.<\/p>\nContent-type: text\/cache-manifest<\/code> (avec PHP par exemple) pour fonctionner. Notez qu\u2019on inclue un commentaire avec la date pour versionner ce fichier. Il suffira de changer la date pour forcer un rechargement complet de l\u2019application.<\/p>\n CACHE MANIFEST #20090201-1731 index.html twitter.js <\/pre>\n
<html manifest="cache-manifest.php"> <\/pre>\n
Conclusion<\/h2>\n
\n