Weitere ähnliche Inhalte
Ähnlich wie Parse.comと始めるBackbone.js入門(jscafe7) (20)
Mehr von Ryuma Tsukano (8)
Kürzlich hochgeladen (11)
Parse.comと始めるBackbone.js入門(jscafe7)
- 8. Parseとは
BaaS(Backend as a Service):クラウドサービス
● 要するに以下をやってくれる
○ Backend側プログラム
■ Restに沿って独自APIを事前に準備
●
※今迄rails等で書いていた物がParse側で準備されている
○ storage
■ 非公式だがcouchDBという噂が。
●
※今迄mySQL等構築していた物がParse側で準備されてる
○ 今は、色々出来る事が増えてるみたい
■ 認証?/analytics?/push通信?
■ 最近hostingも始まった。
- 9. つまり
開発者はClient側だけ作れば良い
○ Web : front側だけ
○ スマホ : native側だけ
● 色んなシチュエーションで使えそう
○
○
○
○
開発者いないけどDBにデータ入れたい
個人開発スマホアプリで気軽にdata保存したい
とりあえずモック作りたい
勿論、実際の製品に使ってる例も沢山有り
- 13. Client
沢山ある。
● iOS版
● Android版
● .NET版
● javascript版 ★これからこれを使う★
○ Backbone.jsベース(古いBackboneのfork)
■ 少しだけ記述が違う
●
●
●
Backbone.Model => Parse.Object
Backbone.Collection => Parse.Collection
Backbone.View => Parse.View
●
基本的にBackboneをParseにすれば良いが、Modelだけ
Objectになってる点、注意。
- 14. sample手順
1. ユーザー登録
○ sign upでメアド登録
2. Dashboardでアプリ作成(create New App)
3. QuickStartGuide をclick
○ ①javascript選択
○ ②new project選択
○ ③Blank〜Parse SDK(zip)をdownload
4. 解凍後index.htmlのParse.initializeを置換
これでコピペ
5. index.htmlをbrowser確認
○
We’ve also just created...=>成功
- 15. index.html見てみる
● 以下を保存
○ TestObject(Excelシート/tableみたいな物)
○ foo : bar (列と値/カラムと値みたいな物)
Parse.initialize("APPLICATION_ID", "JAVASCRIPT_KEY");
var TestObject = Parse.Object.extend("TestObject");
var testObject = new TestObject();
testObject.save({foo: "bar"}, {
success: function(object) {
$(".success").show();
},
error: function(model, error) {
$(".error").show();
}
});
- 25. 今回のView構成
● 結果表示
○ ①TodoView : Todoの1つ(liの中)
○ ②TodoListView : 複数のTodoの一覧(ul)
● フォーム
○ ③TodoFormView : 送信をcheck
● 全体
○ ④AppView : 初期処理
■ 各View準備
■ Parseからdata読取
③
①
②
- 27. View作成 : template
● templateは、scriptタグで外に出せる(後述)
○ 先程のtemplateから呼び出している
○ jsp等と同じように変数を埋め込める(title)
● このtemplateを①のViewが描写している
<script type="text/template" id="todo-template">
<strong>[TODO]</strong>
<span><%- title %></span>
</script>
- 28. View作成(②:複数のtodo)
● Parse.View(Backbone.View.extend)
○ el : 対象要素(どこに描写するか指定)
○ initialize : 初期処理
■ collectionにadd
var TodoListView = Parse.View.extend({
el: "#todo-list > ul",
■ =>render
initialize: function(){
○ render:描写処理
this.collection.on("add", this.render, this);
},
■ collectionループ
render: function() {
■ 自分の要素内に
this.$el.html("");
this.collection.each(function(todo) {
■ ①のViewを描写
var todoView = new TodoView({model:todo});
this.$el.append(todoView.render().el);
},this);
return this;
}
});
- 29. View作成(③:フォーム)
● Parse.View(Backbone.View.extend)
○ events : イベント
■ submitあったら、
■ createTodo関数を実行
○ createTodo : オリジナル関数
■ inputタグからTodoを作成
■ error時は#errorにmessage
●
先程のvalidationここで表示
■ validationで問題なければ
●
●
Todoを保存
成功したらcollectionに追加
var TodoFormView = Parse.View.extend({
el: "#todo-form",
events: {
"submit": "createTodo"
},
createTodo: function(e) {
e.preventDefault();
var todo = new Todo();
todo.on('error', function(model, error)
{$('#error').html(error);});
todo.set({title : $('#title').val()})
if(todo.isValid()) {
$('#error').html('');
todo.save(null, {
success: _.bind(function(todo) {
this.collection.add(todo);
$('#title').val('');
}, this)
});
};
}
});
- 30. View作成(④:アプリ全体)
● 初期処理
○ Parse.Query(class名).findでParseから一覧取得
○ 各View(②list③form)を初期化して準備
■ ②listは、Parseのdataを表示
var AppView = Parse.View.extend({
initialize: function(){
new Parse.Query("Todo").find({
success: _.bind(function(list){
var todoList = new TodoList(list);
var todoFormView = new TodoFormView({collection: todoList});
this.todoListView = new TodoListView({collection: todoList});
this.render();
}, this)
});
},
render: function(){
this.todoListView.render();
return this;
}
});
- 31. Router作成
● Parse.Router(=Backbone.Router)
○ initialize
■ ④初期View準備
○ routes:URLと関数を紐付け
■ URL:#help(アンカー)
■ help関数実行
●
help用のhtml表示
○ raisのconfig/routes.rb的な物
○ history.start
■ routeのdispatchを開始
var TodoRouter = Parse.Router.extend({
initialize: function(){
var appView = new AppView();
},
routes: {
"help" : "help",
"" : "show"
},
help : function() {
$('#main').hide();
$("span.help").show();
},
show : function() {
$("span.help").hide();
$('#main').show();
}
});
var todoRouter = new TodoRouter;
Parse.history.start();