Tutoriel Backbone.js : Backbone.sync

Alex Young

Traducteur

vermine

Cet article est la traduction de Backbone.js Tutorial : Backbone.sync publié sur DailyJS.
Commentez

- Titre : Tutoriel Backbone.js : Backbone.sync

- Auteur : Alex Young

- Traducteur : vermine

- Parution : 10 janvier 2013

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2013 Alex Young. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Préparation

- II. L'API Google Tasks

- III. Structure de Backbone.sync

- IV. Faire des requêtes avec gapi

- V. Les modèles

- VI. Les collections

- VII. Faire des requêtes vers l'API

- VIII. Résumé

- IX. Remerciements

I - Préparation

- Partie 1 : environnement de développement

- Partie 2 : les API Google et RequireJS

- Partie 3 : authentification avec OAuth2

- Partie 4 : Backbone.sync

- Partie 5 : affichage des listes

- Partie 6 : créer des listes

- Partie 7 : modifier des listes

- Partie 8 : supprimer des listes

- Partie 9 : les tâches

- Partie 10 : oh non, pas plus de tâches

- Partie 11 : Spies, Stubs et Mocks

- Partie 12 : tester avec Mocks

- Partie 13 : routage

- Partie 14 : personnaliser l'interface

- Partie 15 : mettre à jour, purger

- Partie 16 : plugin jQuery et déplacement des tâches

Avant de commencer ce tutoriel, vous aurez besoin de ce qui suit :

- alexyoung / dailyjs-backbone-tutorial en version c1d5a2e7cc ;

- la clé de l'API de la partie 2 ;

- l'ID client de la partie 2 ;

- la mise à jour de app/js/config.js avec vos clés.

Pour consulter la source, exécutez les commandes suivantes (ou utilisez un outil approprié pour Git GUI) :

git clone git@github.com:alexyoung/dailyjs-backbone-tutorial.git
cd dailyjs-backbone-tutorial
git reset --hard c1d5a2e7cc

II - L'API Google Tasks

En résumé : le but de cette série de tutoriels est de créer une application Backbone.js monopage qui utilise le JavaScript côté client pour communiquer avec les API Google d'authentification et de liste des tâches.

Google donne accès à nos listes de tâches par le biais de deux API :

- Tasklists ;

- Tasks.

Lors du chargement du JavaScript de Google, le navigateur reçoit un accès global à divers objets et méthodes. Dans le tutoriel précédent, j'ai inclus un appel à gapi.client.load qui charge l'API des tâches :

gapi.client.load('tasks', 'v1', function() { /* Loaded */ }) ;

Cela se trouve dans app/js/gapi.js. Le défi avant de générer l'interface consiste à mettre en œuvre une nouvelle méthode Backbone.sync qui utilise gapi pour communiquer avec les API Tasks et Tasklists.

III - Structure de Backbone.sync

J'ai déjà parlé de la structure globale du Backbone.sync dans la partie 2. Le modèle que j'utiliserai dans ce tutoriel est assez générique, donc vous pouvez utiliser la même approche pour communiquer avec autre chose que l'API de Google.

La méthode sync elle-même prend trois arguments, le premier d'entre eux est la method (créer, mettre à jour, supprimer et lire). Nous avons besoin de lier la méthode à quelque chose que les API de Google comprennent.

Voici ce que nous avons jusqu'à présent :

Backbone.sync = function(method, model, options) {
options || (options = {}) ;

switch (method) {
case 'create' :
break ;

case 'update' :
break ;

case 'delete' :
break ;

case 'read' :
break ;
}
} ;

Et ici nous avons les correspondances entre l'API Google et les méthodes Backbone :

API Google Tasks | Méthode Backbone.sync | Description
------------------------------------------------------
insert       |         create        | Créer une nouvelle tâche.
update       |         update        | Mettre à jour une tâche existante.
delete       |         delete        | Supprimer une tâche.
list        |          read         | Obtenir une liste de tâches.

Même si l'API de Google ne ressemble pas à l'API RESTful 3 Rails conçue par Backbone.js, il y a des similitudes.

IV - Faire des requêtes avec gapi

L'objet gapi fait des requêtes à l'aide de ce modèle :

- appeler l'une des méthodes gapi.client.tasks avec le contenu de la requête pour obtenir un objet request ;

- appeler request.execute avec un callback pour envoyer la requête ;

- le callback reçoit un objet response, tout comme une requête Ajax standard.

Voici à quoi ça ressemble en réalité :

var requestContent = {}
, request
, gapiResource ;

gapiResource = 'tasks' ;
requestContent['tasklist'] = tasklistId ; // En supposant que nous en avons un
requestContent['resource'] = model.toJSON() ;

// 'insert' pour créer une nouvelle tâche
request = gapi.client.tasks[gapiResource].insert(requestContent) ;

// Envoyer la requête à l'API
request.execute(function(res) {
// Gérer la réponse
}) ;

En regardant cela, il est clair que nous avons besoin de deux modèles : Task et TaskList. Il faut également deux collections correspondantes : Task et TaskList.

Les modèles et les collections Backbone ont des URL qui sont utilisées pour faire des requêtes vers l'API. De même, les API Google ont des URL : task et tasklist. En utilisant le modèle d'URL Backbone.sync peut déterminer quelle ressource de l'API est requise pour une requête donnée.

V - Les modèles

Créez un nouveau répertoire appelé app/js/models et ajoutez le fichier task.js :

define(function() {
var Task = Backbone.Model.extend({
url: 'tasks'
});

return Task ;
}) ;

Créez également le fichier app/js/models/tasklist.js :

define(function() {
var TaskList = Backbone.Model.extend({
url: 'tasklists'
});

return TaskList ;
}) ;

VI - Les collections

Créez un nouveau répertoire nommé app/js/collections et ajoutez le fichier tasklists.js :

define(['models/tasklist'], function(TaskList) {
var TaskLists = Backbone.Collection.extend({
model: TaskList
, url: 'tasklists'
});

return TaskLists ;
}) ;

Nous allons utiliser la collection TaskList par la suite pour charger vos listes de tâches.

VII - Faire des requêtes vers l'API

Ouvrez le fichier app/js/gapi.js et ajoutez une nouvelle ligne après la ligne 36 :

app.views.auth.$el.hide() ;
$('#signed-in-container').show() ;
self.trigger('ready') ;

Cet événement ready sert pour signifier que l'authentification a réussi et que l'API Tasks est prête à l'emploi. Ensuite, ajoutez les deux lignes suivantes à Backbone.sync, à l'intérieur du cas du read dans le switch :

case 'read':
var request = gapi.client.tasks[model.url].list(options.data) ;
Backbone.gapiRequest(request, method, model, options);
break ;

Ce code crée une demande et donc Backbone.gapiRequest va s'exécuter et déléguer la réponse.

Voici l'implémentation la plus basique de Backbone.gapiRequest :

Backbone.gapiRequest = function(request, method, model, options) {
var result;
request.execute(function(res) {
if (res.error) {
if (options.error) options.error(res) ;
} else if (options.success) {
result = res.items ;
options.success(result, true, request) ;
}
}) ;
} ;

Tout ce qu'elle fait est d'exécuter request.execute qui est fourni par Google et de lier ensuite le résultat pour être compatible avec l'API Backbone en exécutant les callback success et error.

Juste pour vous indiquer que quelque chose se passe réellement, ouvrez app/js/app.js et faites-lui charger la collection TaskLists en changeant le define appelé au début :

define([
'gapi'
, 'views/app'
, 'views/auth'
, 'collections/tasklists'
],

function(ApiManager, AppView, AuthView, TaskLists) {

Maintenant, ajoutez ceci à la méthode connectGapi :

this.apiManager.on('ready', function() {
self.collections.lists.fetch({ data : { userId: '@me' }, success : function(res) {
_.each(res.models, function(model) {
console.log(model.get('title'));
}) ;
}});
}) ;

Ce code utilise la méthode each de Underscore pour effectuer une itération sur chaque « modèle » retourné par Backbone.sync qui est appelée par la collection TaskList.

Lancez le serveur avec npm start et visitez la page http://localhost:8080. Si vous l'exécutez dans un navigateur qui prend en charge la console, vous devriez voir vos listes de tâches.

Si cela fonctionne alors, vous n'êtes pas loin de la création d'une application Backbone.js qui communique avec une API Google. Les mêmes concepts peuvent être appliqués aux autres API JavaScript de Google.

VIII - Résumé

Le code source de ce tutoriel se trouve ici : alexyoung / dailyjs-backbone-tutorial en version fcd653ec6.

IX - Remerciements

Cet article a été publié avec l'aimable autorisation de Alex Young concernant l'article original Backbone.js Tutorial: Backbone.sync du site DailyJS.
Je remercie également ClaudeLELOUP pour sa relecture attentive et assidue.