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

1. Building games
Matt Gamache-Asselin @mattieuga
Parsewith
Wednesday, May 1, 13

2. Wednesday, May 1, 13

3. Database
Wednesday, May 1, 13

4. Database Server+
+ users
+ security
Wednesday, May 1, 13

5. Database REST API
Z
Z
Z
Server+
+ users
+ security
+
Wednesday, May 1, 13

6. Database REST API
Z
Z
Z
Server+
+ users
+ security
Networking
+
+
Wednesday, May 1, 13

7. Database REST API
Z
Z
Z
Server
+
+
+ users
+ security
Networking The fun stuff!
+
+
Wednesday, May 1, 13

8. Database REST API
Z
Z
Z
Server
+
+
+ users
+ security
Networking The fun stuff!
+
+
Wednesday, May 1, 13

9. Database REST API
Z
Z
Z
Server
+
+
+ users
+ security
Networking The fun stuff!
+
+
Wednesday, May 1, 13

10. Database REST API
Z
Z
Z
Server
+
+
+ users
+ security
Networking The fun stuff!
+
+
Wednesday, May 1, 13

11. iOS Android OS X WP8 Win 8 .NET Cloud Code REST
JavaScript
Wednesday, May 1, 13

12. Giving your code a
BACKBONE.JS
Wednesday, May 1, 13

13. ScoreViewGameView ProfileView
Wednesday, May 1, 13

14. ScoreViewGameView ProfileView
Wednesday, May 1, 13

15. Backbone.Event
Wednesday, May 1, 13

16. Backbone.Model
Backbone.Event
Wednesday, May 1, 13

17. Backbone.Model
Backbone.Event
Backbone.View
Wednesday, May 1, 13

18. Backbone.Model
Backbone.Event
Backbone.View
Backbone.View
Backbone.View
Wednesday, May 1, 13

19. Backbone.Model
Backbone.Event
Backbone.View
var ScoreModel = Backbone.Model.extend({
});
Wednesday, May 1, 13

20. Backbone.Model
Backbone.Event
Backbone.View
var ScoreModel = Backbone.Model.extend({
defaults: {
score: 0,
level: 1,
mult: 1
},
});
Wednesday, May 1, 13

21. Backbone.Model
Backbone.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

22. Backbone.Model
Backbone.Event
Backbone.View
var scoreModel = new ScoreModel();
scoreModel.incrementScore();
Wednesday, May 1, 13

23. Backbone.Model
Backbone.Event
Backbone.View
change
change:score
ScoreModel
var scoreModel = new ScoreModel();
scoreModel.incrementScore();
Wednesday, May 1, 13

24. Backbone.Model
Backbone.Event
Backbone.View
var ScoreView = Backbone.View.extend({
});
var scoreView = new ScoreView({ model: scoreModel });
Wednesday, May 1, 13

25. Backbone.Model
Backbone.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

26. Backbone.Model
Backbone.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

27. ScoreModel
change:score
ScoreView
Wednesday, May 1, 13

28. ScoreModel
change:score
ScoreView
Backbone.Collection Backbone.Router
Wednesday, May 1, 13

29. Wednesday, May 1, 13

30. GameState
GameScene MenuScene HighScoreScene GameOverScene
Events
EggModel
EggView
Wednesday, May 1, 13

31. ParseIt’s all about the server
Wednesday, May 1, 13

32. Backbone.Model
Backbone.View
Backbone.Collection
Backbone.Router
Wednesday, May 1, 13

33. Parse.Object
Backbone.View
Parse.Collection
Backbone.Router
Wednesday, May 1, 13

34. Parse.Object
Backbone.View
Parse.Collection
Backbone.Router
Parse
Wednesday, May 1, 13

35. 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

36. USERSThe in your app
Wednesday, May 1, 13

37. 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

38. 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

39. 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

40. 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

41. Parse.FacebookUtils.LogIn({
success: function(user) {
console.log("User sign up!");
},
error: function(user, error) {
console.log("Uh oh :( ");
}
});
Wednesday, May 1, 13

42. 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

43. 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

44. DATA
Saving stuff in the
Wednesday, May 1, 13

45. 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

46. 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

47. 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

48. QUERIES
Getting stuff from the
Wednesday, May 1, 13

49. 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

50. GameState
GameScene MenuScene HighScoreScene GameOverScene
Events
EggModel
EggView
Wednesday, May 1, 13

51. GameState
GameScene MenuScene HighScoreScene GameOverScene
Events
EggModel
EggView
HighScoreCollection
Parse
Parse.User
Wednesday, May 1, 13

52. 1000110011100010011001010011110001110010101110001
0101010101101000101010010101010101010101111001010
1101101010110010010001001101010101011101011011000
1001010101011100110001010101010001011000110011100
1100101001111000111001010111000111000101010101101
0101001010101010101010111100101001101101101010110
1000100110101010101110101101100001001001010101011
1000101010101000101100011001110001001100101001111
1100101011100011100010101010110100010101001010101
0101011110010100110110110101011001001000100110101
0111010110110000100100101010101110011000101010101
0110001100111000100110010100111100011100101011100
0001010101011010001010100101010101010101011110010
1011011010101100100100010011010101010111010110110
0010010101010111001100010101010100010110001100111
0011001010011110001110010101110001110001010101011
It’s code in the
Wednesday, May 1, 13

53. 1000110011100010011001010011110001110010101110001
0101010101101000101010010101010101010101111001010
1101101010110010010001001101010101011101011011000
1001010101011100110001010101010001011000110011100
1100101001111000111001010111000111000101010101101
0101001010101010101010111100101001101101101010110
1000100110101010101110101101100001001001010101011
1000101010101000101100011001110001001100101001111
1100101011100011100010101010110100010101001010101
0101011110010100110110110101011001001000100110101
0111010110110000100100101010101110011000101010101
0110001100111000100110010100111100011100101011100
0001010101011010001010100101010101010101011110010
1011011010101100100100010011010101010111010110110
0010010101010111001100010101010100010110001100111
0011001010011110001110010101110001110001010101011
It’s JavaScript in the Cloud
Wednesday, May 1, 13

54. 1000110011100010011001010011110001110010101110001
0101010101101000101010010101010101010101111001010
1101101010110010010001001101010101011101011011000
1001010101011100110001010101010001011000110011100
1100101001111000111001010111000111000101010101101
0101001010101010101010111100101001101101101010110
1000100110101010101110101101100001001001010101011
1000101010101000101100011001110001001100101001111
1100101011100011100010101010110100010101001010101
0101011110010100110110110101011001001000100110101
0111010110110000100100101010101110011000101010101
0110001100111000100110010100111100011100101011100
0001010101011010001010100101010101010101011110010
1011011010101100100100010011010101010111010110110
0010010101010111001100010101010100010110001100111
0011001010011110001110010101110001110001010101011
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

55. 1000110011100010011001010011110001110010101110001
0101010101101000101010010101010101010101111001010
1101101010110010010001001101010101011101011011000
1001010101011100110001010101010001011000110011100
1100101001111000111001010111000111000101010101101
0101001010101010101010111100101001101101101010110
1000100110101010101110101101100001001001010101011
1000101010101000101100011001110001001100101001111
1100101011100011100010101010110100010101001010101
0101011110010100110110110101011001001000100110101
0111010110110000100100101010101110011000101010101
0110001100111000100110010100111100011100101011100
0001010101011010001010100101010101010101011110010
1011011010101100100100010011010101010111010110110
0010010101010111001100010101010100010110001100111
0011001010011110001110010101110001110001010101011Wednesday, May 1, 13

56. 1000110011100010011001010011110001110010101110001
0101010101101000101010010101010101010101111001010
1101101010110010010001001101010101011101011011000
1001010101011100110001010101010001011000110011100
1100101001111000111001010111000111000101010101101
0101001010101010101010111100101001101101101010110
1000100110101010101110101101100001001001010101011
1000101010101000101100011001110001001100101001111
1100101011100011100010101010110100010101001010101
0101011110010100110110110101011001001000100110101
0111010110110000100100101010101110011000101010101
0110001100111000100110010100111100011100101011100
0001010101011010001010100101010101010101011110010
1011011010101100100100010011010101010111010110110
0010010101010111001100010101010100010110001100111
0011001010011110001110010101110001110001010101011
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

57. 1000110011100010011001010011110001110010101110001
0101010101101000101010010101010101010101111001010
1101101010110010010001001101010101011101011011000
1001010101011100110001010101010001011000110011100
1100101001111000111001010111000111000101010101101
0101001010101010101010111100101001101101101010110
1000100110101010101110101101100001001001010101011
1000101010101000101100011001110001001100101001111
1100101011100011100010101010110100010101001010101
0101011110010100110110110101011001001000100110101
0111010110110000100100101010101110011000101010101
0110001100111000100110010100111100011100101011100
0001010101011010001010100101010101010101011110010
1011011010101100100100010011010101010111010110110
0010010101010111001100010101010100010110001100111
0011001010011110001110010101110001110001010101011
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: anyyolk@parse.com,
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

58. 1000110011100010011001010011110001110010101110001
0101010101101000101010010101010101010101111001010
1101101010110010010001001101010101011101011011000
1001010101011100110001010101010001011000110011100
1100101001111000111001010111000111000101010101101
0101001010101010101010111100101001101101101010110
1000100110101010101110101101100001001001010101011
1000101010101000101100011001110001001100101001111
1100101011100011100010101010110100010101001010101
0101011110010100110110110101011001001000100110101
0111010110110000100100101010101110011000101010101
0110001100111000100110010100111100011100101011100
0001010101011010001010100101010101010101011110010
1011011010101100100100010011010101010111010110110
0010010101010111001100010101010100010110001100111
0011001010011110001110010101110001110001010101011
Backbone.js
Parse SDK
Wednesday, May 1, 13

59. 1000110011100010011001010011110001110010101110001
0101010101101000101010010101010101010101111001010
1101101010110010010001001101010101011101011011000
1001010101011100110001010101010001011000110011100
1100101001111000111001010111000111000101010101101
0101001010101010101010111100101001101101101010110
1000100110101010101110101101100001001001010101011
1000101010101000101100011001110001001100101001111
1100101011100011100010101010110100010101001010101
0101011110010100110110110101011001001000100110101
0111010110110000100100101010101110011000101010101
0110001100111000100110010100111100011100101011100
0001010101011010001010100101010101010101011110010
1011011010101100100100010011010101010111010110110
0010010101010111001100010101010100010110001100111
0011001010011110001110010101110001110001010101011
Backbone.js
Cloud Code
Parse
Parse SDK
ClientServer
Wednesday, May 1, 13

60. 1000110011100010011001010011110001110010101110001
0101010101101000101010010101010101010101111001010
1101101010110010010001001101010101011101011011000
1001010101011100110001010101010001011000110011100
1100101001111000111001010111000111000101010101101
0101001010101010101010111100101001101101101010110
1000100110101010101110101101100001001001010101011
1000101010101000101100011001110001001100101001111
1100101011100011100010101010110100010101001010101
0101011110010100110110110101011001001000100110101
0111010110110000100100101010101110011000101010101
0110001100111000100110010100111100011100101011100
0001010101011010001010100101010101010101011110010
1011011010101100100100010011010101010111010110110
0010010101010111001100010101010100010110001100111
0011001010011110001110010101110001110001010101011
Angular.js
Cloud Code
Parse
Parse SDK
ClientServer
Wednesday, May 1, 13

61. 1000110011100010011001010011110001110010101110001
0101010101101000101010010101010101010101111001010
1101101010110010010001001101010101011101011011000
1001010101011100110001010101010001011000110011100
1100101001111000111001010111000111000101010101101
0101001010101010101010111100101001101101101010110
1000100110101010101110101101100001001001010101011
1000101010101000101100011001110001001100101001111
1100101011100011100010101010110100010101001010101
0101011110010100110110110101011001001000100110101
0111010110110000100100101010101110011000101010101
0110001100111000100110010100111100011100101011100
0001010101011010001010100101010101010101011110010
1011011010101100100100010011010101010111010110110
0010010101010111001100010101010100010110001100111
0011001010011110001110010101110001110001010101011
Ember.js
Cloud Code
Parse
Parse SDK
ClientServer
Wednesday, May 1, 13

62. 1000110011100010011001010011110001110010101110001
0101010101101000101010010101010101010101111001010
1101101010110010010001001101010101011101011011000
1001010101011100110001010101010001011000110011100
1100101001111000111001010111000111000101010101101
0101001010101010101010111100101001101101101010110
1000100110101010101110101101100001001001010101011
1000101010101000101100011001110001001100101001111
1100101011100011100010101010110100010101001010101
0101011110010100110110110101011001001000100110101
0111010110110000100100101010101110011000101010101
0110001100111000100110010100111100011100101011100
0001010101011010001010100101010101010101011110010
1011011010101100100100010011010101010111010110110
0010010101010111001100010101010100010110001100111
0011001010011110001110010101110001110001010101011
Building games
Matt Gamache-Asselin @mattieuga
Parsewith
https://github.com/parseplatform/anyyolk
www.anyyolk.com
Wednesday, May 1, 13