Upload
parseit
View
1.558
Download
3
Tags:
Embed Size (px)
DESCRIPTION
This webcast explored how to create the game AnyYolk based on the following concepts: How to create web apps with Backbone.js Best practices of Backbone.js How the Parse SDK works with Backbone.js Live example of adding a highscore to a Backbone.js game How you can use Cloud Code to add server-side functionality to your Parse app
Citation preview
Building games
Matt Gamache-Asselin @mattieuga
Parsewith
Wednesday, May 1, 13
Wednesday, May 1, 13
Database
Wednesday, May 1, 13
Database Server+
+ users+ security
Wednesday, May 1, 13
Database REST API
ZZZ
Server+
+ users+ security
+
Wednesday, May 1, 13
Database REST API
ZZZ
Server+
+ users+ security
Networking
+
+
Wednesday, May 1, 13
Database REST API
ZZZ
Server
+
+
+ users+ security
Networking The fun stu!!
+
+
Wednesday, May 1, 13
Database REST API
ZZZ
Server
+
+
+ users+ security
Networking The fun stu!!
+
+
Wednesday, May 1, 13
Database REST API
ZZZ
Server
+
+
+ users+ security
Networking The fun stu!!
+
+
Wednesday, May 1, 13
Database REST API
ZZZ
Server
+
+
+ users+ security
Networking The fun stu!!
+
+
Wednesday, May 1, 13
iOS Android OS X WP8 Win 8 .NET Cloud Code REST
JavaScript
Wednesday, May 1, 13
Giving your code a BACKBONE.JS
Wednesday, May 1, 13
ScoreViewGameView Pro!leView
Wednesday, May 1, 13
ScoreViewGameView Pro!leView
Wednesday, May 1, 13
Backbone.Event
Wednesday, May 1, 13
Backbone.ModelBackbone.Event
Wednesday, May 1, 13
Backbone.ModelBackbone.Event
Backbone.View
Wednesday, May 1, 13
Backbone.ModelBackbone.Event
Backbone.View
Backbone.View
Backbone.View
Wednesday, May 1, 13
Backbone.ModelBackbone.Event
Backbone.View
var ScoreModel = Backbone.Model.extend({
});
Wednesday, May 1, 13
Backbone.ModelBackbone.Event
Backbone.View
var ScoreModel = Backbone.Model.extend({
defaults: { score: 0, level: 1, mult: 1 },
});
Wednesday, May 1, 13
Backbone.ModelBackbone.Event
Backbone.View
var ScoreModel = Backbone.Model.extend({
defaults: { score: 0, level: 1, mult: 1 }, incrementScore: function() { this.set(“score”, this.get(“score”) + this.get(“mult”); }});
Wednesday, May 1, 13
Backbone.ModelBackbone.Event
Backbone.View
var scoreModel = new ScoreModel();
scoreModel.incrementScore();
Wednesday, May 1, 13
Backbone.ModelBackbone.Event
Backbone.View
change
change:scoreScoreModel
var scoreModel = new ScoreModel();
scoreModel.incrementScore();
Wednesday, May 1, 13
Backbone.ModelBackbone.Event
Backbone.View
var ScoreView = Backbone.View.extend({
});
var scoreView = new ScoreView({ model: scoreModel });
Wednesday, May 1, 13
Backbone.ModelBackbone.Event
Backbone.View
var ScoreView = Backbone.View.extend({
render: function() { this.$el.html(“<p>” + this.model.get(“score”) + “</p>”); $(“#game .score”).html(this.$el); return this; }
});
var scoreView = new ScoreView({ model: scoreModel });
Wednesday, May 1, 13
Backbone.ModelBackbone.Event
Backbone.View
var ScoreView = Backbone.View.extend({
initialize: function() { this.model.on(“change:score”, this.render); },
render: function() { this.$el.html(“<p>” + this.model.get(“score”) + “</p>”); $(“#game .score”).html(this.$el); return this; }
});
var scoreView = new ScoreView({ model: scoreModel });
Wednesday, May 1, 13
ScoreModelchange:score
ScoreView
Wednesday, May 1, 13
ScoreModelchange:score
ScoreView
Backbone.Collection Backbone.Router
Wednesday, May 1, 13
Wednesday, May 1, 13
GameState
GameScene MenuScene HighScoreScene GameOverScene
Events
EggModel
EggView
Wednesday, May 1, 13
ParseIt’s all about the server
Wednesday, May 1, 13
Backbone.Model
Backbone.View
Backbone.Collection
Backbone.Router
Wednesday, May 1, 13
Parse.Object
Backbone.View
Parse.Collection
Backbone.Router
Wednesday, May 1, 13
Parse.Object
Backbone.View
Parse.Collection
Backbone.Router
Parse
Wednesday, May 1, 13
Parse.Object
Backbone.View
Parse.Collection
Backbone.Router
Parse.User
Parse.Query
Parse.ACL
Parse.Cloud
Parse.Roles
Parse.Push
Parse.FacebookUtils
Parse.Promise
Parse
Wednesday, May 1, 13
USERSThe in your app
Wednesday, May 1, 13
var user = new Parse.User();
user.set("username", "Matt");
user.set("password", "html5r0cks");
user.signUp({
success: function(user) {
console.log("User sign up!");
},
error: function(user, error) {
console.log("Uh oh :( ");
}
});
Wednesday, May 1, 13
var user = new Parse.User();
user.set("username", "Matt");
user.set("password", "html5r0cks");
user.signUp({
success: function(user) {
console.log("User sign up!");
},
error: function(user, error) {
console.log("Uh oh :( ");
}
});
Wednesday, May 1, 13
Parse.User.LogIn("Matt", "html5r0cks", {
success: function(user) {
console.log("User sign up!");
},
error: function(user, error) {
console.log("Uh oh :( ");
}
});
Wednesday, May 1, 13
Parse.User.LogIn("Matt", "html5r0cks", {
success: function(user) {
console.log("User sign up!");
},
error: function(user, error) {
console.log("Uh oh :( ");
}
});
var user = Parse.User.current();
Wednesday, May 1, 13
Parse.FacebookUtils.LogIn({
success: function(user) {
console.log("User sign up!");
},
error: function(user, error) {
console.log("Uh oh :( ");
}
});
Wednesday, May 1, 13
Parse.FacebookUtils.LogIn({
success: function(user) {
console.log("User sign up!");
},
error: function(user, error) {
console.log("Uh oh :( ");
}
});
var user = Parse.User.current();
Wednesday, May 1, 13
Parse.FacebookUtils.LogIn({
success: function(user) {
console.log("User sign up!");
},
error: function(user, error) {
console.log("Uh oh :( ");
}
});
var user = Parse.User.current();
Wednesday, May 1, 13
DATASaving stu" in the
Wednesday, May 1, 13
var score = new Parse.Object("HighScore");
score.set("score", 13);
score.set("player", Parse.User.current());
score.save({
success: function(object) {
console.log("object saved!");
},
error: function(error) {
console.log("Uh oh :( ");
}
});
Wednesday, May 1, 13
var score = new Parse.Object("HighScore");
score.set("score", 13);
score.set("player", Parse.User.current());
score.save({
success: function(object) {
console.log("object saved!");
},
error: function(error) {
console.log("Uh oh :( ");
}
});
Wednesday, May 1, 13
var user = Parse.User.current();
user.set("displayName", nameValue);
user.save({
success: function(user) {
console.log("user saved!");
},
error: function(error) {
console.log("Uh oh :( ");
}
});
Wednesday, May 1, 13
QUERIESGetting stu" from the
Wednesday, May 1, 13
var query = new Parse.Query("HighScore");
query.greaterThan("score", 10);
query.equalTo("player", Parse.User.current());
query.find({
success: function(highScores) {
console.log("My scores over 10" + highScores);
},
error: function(user, error) {
console.log("Uh oh :( ");
}
});
query.descending("score");
Wednesday, May 1, 13
GameState
GameScene MenuScene HighScoreScene GameOverScene
Events
EggModel
EggView
Wednesday, May 1, 13
GameState
GameScene MenuScene HighScoreScene GameOverScene
Events
EggModel
EggView
HighScoreCollection
Parse
Parse.User
Wednesday, May 1, 13
100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001
It’s code in the
Wednesday, May 1, 13
100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001
It’s JavaScript in the Cloud
Wednesday, May 1, 13
100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001
Parse.Cloud.define("averageLikes", function(request, response) { ...});
Parse.Cloud.beforeSave("Post", function(request, response) { ...});
Parse.Cloud.afterSave("Post", function(request, response) { ...});
Wednesday, May 1, 13
100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001
Wednesday, May 1, 13
100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001
Parse.Cloud.httpRequest({ url: 'http://www.parse.com/', success: function(httpResponse) { console.log(httpResponse.text); }, error: function(httpResponse) { console.error(httpResponse.status); }});
Wednesday, May 1, 13
100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001
var Mailgun = require('mailgun');Mailgun.initialize('myDomainName', 'myAPIKey');
Parse.Cloud.define("inviteFriends", function(request, response) { var friendEmails = request.params.friends; var userName = Parse.User.current().get(“displayName”);
Mailgun.sendEmail({ to: friendsEmails, from: [email protected], subject: userName + “ invited you to play AnyYolk!”, html: “Try out <a href=‘http://anyyolk.com’>AnyYolk</a> ” + “and compete against ” + userName + “!” }).then(function() { response.success(“Emails sent”); });});
Wednesday, May 1, 13
100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001
Backbone.js
Parse SDK
Wednesday, May 1, 13
100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001
Backbone.js
Cloud Code
Parse
Parse SDK
ClientServer
Wednesday, May 1, 13
100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001
Angular.js
Cloud Code
Parse
Parse SDK
ClientServer
Wednesday, May 1, 13
100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001
Ember.js
Cloud Code
Parse
Parse SDK
ClientServer
Wednesday, May 1, 13
100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001
Building games
Matt Gamache-Asselin @mattieuga
Parsewithhttps://github.com/parseplatform/anyyolk
www.anyyolk.com
Wednesday, May 1, 13