Backbone.js

Backbone.jsでGooleアカウントにOAuth2でログインしてGmailのタスクリストと同期するToDoリストをつくるというチュートリアル

投稿日:

dailyjs.com/2012/11/29/backbone-tutorial-1/

たぶんまだ4割くらいしか理解できてない

JavaScriptで、nodeのhttpサーバとgrunt.jsで圧縮、テストはmochaという組み合わせ

テンプレートはtext.jsっていうの

純粋なhtmlとjsなのでS3でもDropBoxでも公開できる

解説は基本的に超丁寧

GitHubで完成コードを公開していて、毎回コミットしているので、そのコミットまでリセットすれば、その時点のコードが得られる

そのコミットのdiffをみれば、どこを変えたかわかる(重要 ←本文中に書いてないこともあるからこれをみて確認する必要がある 名前空間の追加とか)

*diffの見方

毎回最後にコミットもふくめたソースへのリンクがある

screenshot

ここからlatest commitのリンクでdiffが見られる

screenshot

 

* チュートリアルやってるとpart4 で詰まる

なぜかというとBackboneのバージョン0.9.10で内部のoptions.successっていうメソッドの引数が変わったから

その指摘はpart 9にあるので、それをみるか完成コードをみる

 

スケルトンの準備

httpサーバの用意

grunt.jsの用意

require.jsの用意

Google APIの使い方

まず登録してAPI keyとClient IDを取得しておく

code.google.com/apis/console/

Google API JavaScript用クライアントライブラリ client.js

code.google.com/p/google-api-javascript-client/wiki/Authentication?hl=ja

OAuth2

こちらも登録してproduct nameとhomepage urlを登録しておく

localhost:3000/でも使える

tasklists API

タスクリストのCRUD

developers.google.com/google-apps/tasks/v1/reference/tasklists#resource

tasks API

タスクのAPI

developers.google.com/google-apps/tasks/v1/reference/tasks

Backbone.Eventsを継承

Google TasksのAPIを使うには認証が必要

一番基本クラスであるBackbone.Eventsを継承してGoogleアカウントに認証するAPIマネージャをつくる

認証が成功すると”ready”というイベントを発行するようにして、これが発行しないと進まないようにしておく

Oauth2

code.google.com/p/google-api-javascript-client/wiki/Authentication

認証コードの例はここにある

Bakcbone.syncの書換え

あとは、Backbone.syncをオーバーライドしてBackbone.jsの出力にあわせればOK

Backbone.sync(method, model, options)のmethodを”read”、”create”、”update”、”delete”の4つにswitchでわけて処理する

これに対して、Google Apiのメソッドは”list”、”insert”、”update”、”delete”だからこれを変換する

ここではBackbone.gapiRequest(request, method, model, options)という関数に渡すことにして、gapiRequestを順に拡張している

あと、最終的に必要なのは、urlとデータだから、このurlをrequest引数に、データはrequestContentというグローバルぽい変数(少なくともBackbone.syncからもBackbone.gapiRequestからもアクセスできる)にいれる

といっても、それがそうそう簡単ではなく、ステップ・バイ・ステップでREAD、CREATE、UPDATE、DELETEを順番に実装していく

 

-Backbone.js
-

執筆者:

関連記事

Rails3.2でJasmineをつかってBackbone.jsのModelをテストしてみる

  By: Glory Cycles   Developing Backbone.js Applications addyosmani.github.com/backbone-fu

ゾンビView問題~Backbone-supportでSwapping RouterとCompositeViewを使う

By: Charlie – CC BY 2.0 目次1 ゾンビView問題2 使う準備は簡単3 Composite View4 Swapping Router5 いろいろ6 Backbon …

Backbone.jsからRails3.2へのPUTに対して204(no content)が返ってくる問題

By: Bernardo Chang – CC BY 2.0   UPDATEするときRailsはデフォルトでJSONには何も返さないのがデフォルトぽい [crayon-594e …

MIddlemanでrails-assets.orgをつかってbowerのコンポーネントをつかう

By: Simon Cunningham – CC BY 2.0 middlemanは静的なサイトのジェネレータ rails-assets.orgは「the frictionless pr …

Rails3.2とBackbone.jsでサーバーサイドのフィルタリング

By: Haldane Martin – CC BY 2.0   テーブルに表示されているデータをサーチバーに入力した語で絞り込みたい こういうテーブルフィルタリングを実現する仕 …