Building AnyYolk with the Parse JavaScript SDK

2,256 views
2,076 views

Published on

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

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,256
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
33
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Building AnyYolk with the Parse JavaScript SDK

  1. 1. Building gamesMatt Gamache-Asselin @mattieugaParsewithWednesday, May 1, 13
  2. 2. Wednesday, May 1, 13
  3. 3. DatabaseWednesday, May 1, 13
  4. 4. Database Server++ users+ securityWednesday, May 1, 13
  5. 5. Database REST APIZZZServer++ users+ security+Wednesday, May 1, 13
  6. 6. Database REST APIZZZServer++ users+ securityNetworking++Wednesday, May 1, 13
  7. 7. Database REST APIZZZServer+++ users+ securityNetworking The fun stuff!++Wednesday, May 1, 13
  8. 8. Database REST APIZZZServer+++ users+ securityNetworking The fun stuff!++Wednesday, May 1, 13
  9. 9. Database REST APIZZZServer+++ users+ securityNetworking The fun stuff!++Wednesday, May 1, 13
  10. 10. Database REST APIZZZServer+++ users+ securityNetworking The fun stuff!++Wednesday, May 1, 13
  11. 11. iOS Android OS X WP8 Win 8 .NET Cloud Code RESTJavaScriptWednesday, May 1, 13
  12. 12. Giving your code aBACKBONE.JSWednesday, May 1, 13
  13. 13. ScoreViewGameView ProfileViewWednesday, May 1, 13
  14. 14. ScoreViewGameView ProfileViewWednesday, May 1, 13
  15. 15. Backbone.EventWednesday, May 1, 13
  16. 16. Backbone.ModelBackbone.EventWednesday, May 1, 13
  17. 17. Backbone.ModelBackbone.EventBackbone.ViewWednesday, May 1, 13
  18. 18. Backbone.ModelBackbone.EventBackbone.ViewBackbone.ViewBackbone.ViewWednesday, May 1, 13
  19. 19. Backbone.ModelBackbone.EventBackbone.Viewvar ScoreModel = Backbone.Model.extend({});Wednesday, May 1, 13
  20. 20. Backbone.ModelBackbone.EventBackbone.Viewvar ScoreModel = Backbone.Model.extend({defaults: {score: 0,level: 1,mult: 1},});Wednesday, May 1, 13
  21. 21. Backbone.ModelBackbone.EventBackbone.Viewvar 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. 22. Backbone.ModelBackbone.EventBackbone.Viewvar scoreModel = new ScoreModel();scoreModel.incrementScore();Wednesday, May 1, 13
  23. 23. Backbone.ModelBackbone.EventBackbone.Viewchangechange:scoreScoreModelvar scoreModel = new ScoreModel();scoreModel.incrementScore();Wednesday, May 1, 13
  24. 24. Backbone.ModelBackbone.EventBackbone.Viewvar ScoreView = Backbone.View.extend({});var scoreView = new ScoreView({ model: scoreModel });Wednesday, May 1, 13
  25. 25. Backbone.ModelBackbone.EventBackbone.Viewvar 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. 26. Backbone.ModelBackbone.EventBackbone.Viewvar 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. 27. ScoreModelchange:scoreScoreViewWednesday, May 1, 13
  28. 28. ScoreModelchange:scoreScoreViewBackbone.Collection Backbone.RouterWednesday, May 1, 13
  29. 29. Wednesday, May 1, 13
  30. 30. GameStateGameScene MenuScene HighScoreScene GameOverSceneEventsEggModelEggViewWednesday, May 1, 13
  31. 31. ParseIt’s all about the serverWednesday, May 1, 13
  32. 32. Backbone.ModelBackbone.ViewBackbone.CollectionBackbone.RouterWednesday, May 1, 13
  33. 33. Parse.ObjectBackbone.ViewParse.CollectionBackbone.RouterWednesday, May 1, 13
  34. 34. Parse.ObjectBackbone.ViewParse.CollectionBackbone.RouterParseWednesday, May 1, 13
  35. 35. Parse.ObjectBackbone.ViewParse.CollectionBackbone.RouterParse.UserParse.QueryParse.ACLParse.CloudParse.RolesParse.PushParse.FacebookUtilsParse.PromiseParseWednesday, May 1, 13
  36. 36. USERSThe in your appWednesday, May 1, 13
  37. 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. 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. 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. 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. 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. 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. 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. 44. DATASaving stuff in theWednesday, May 1, 13
  45. 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. 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. 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. 48. QUERIESGetting stuff from theWednesday, May 1, 13
  49. 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. 50. GameStateGameScene MenuScene HighScoreScene GameOverSceneEventsEggModelEggViewWednesday, May 1, 13
  51. 51. GameStateGameScene MenuScene HighScoreScene GameOverSceneEventsEggModelEggViewHighScoreCollectionParseParse.UserWednesday, May 1, 13
  52. 52. 1000110011100010011001010011110001110010101110001010101010110100010101001010101010101010111100101011011010101100100100010011010101010111010110110001001010101011100110001010101010001011000110011100110010100111100011100101011100011100010101010110101010010101010101010101111001010011011011010101101000100110101010101110101101100001001001010101011100010101010100010110001100111000100110010100111111001010111000111000101010101101000101010010101010101011110010100110110110101011001001000100110101011101011011000010010010101010111001100010101010101100011001110001001100101001111000111001010111000001010101011010001010100101010101010101011110010101101101010110010010001001101010101011101011011000100101010101110011000101010101000101100011001110011001010011110001110010101110001110001010101011It’s code in theWednesday, May 1, 13
  53. 53. 1000110011100010011001010011110001110010101110001010101010110100010101001010101010101010111100101011011010101100100100010011010101010111010110110001001010101011100110001010101010001011000110011100110010100111100011100101011100011100010101010110101010010101010101010101111001010011011011010101101000100110101010101110101101100001001001010101011100010101010100010110001100111000100110010100111111001010111000111000101010101101000101010010101010101011110010100110110110101011001001000100110101011101011011000010010010101010111001100010101010101100011001110001001100101001111000111001010111000001010101011010001010100101010101010101011110010101101101010110010010001001101010101011101011011000100101010101110011000101010101000101100011001110011001010011110001110010101110001110001010101011It’s JavaScript in the CloudWednesday, May 1, 13
  54. 54. 1000110011100010011001010011110001110010101110001010101010110100010101001010101010101010111100101011011010101100100100010011010101010111010110110001001010101011100110001010101010001011000110011100110010100111100011100101011100011100010101010110101010010101010101010101111001010011011011010101101000100110101010101110101101100001001001010101011100010101010100010110001100111000100110010100111111001010111000111000101010101101000101010010101010101011110010100110110110101011001001000100110101011101011011000010010010101010111001100010101010101100011001110001001100101001111000111001010111000001010101011010001010100101010101010101011110010101101101010110010010001001101010101011101011011000100101010101110011000101010101000101100011001110011001010011110001110010101110001110001010101011Parse.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. 55. 1000110011100010011001010011110001110010101110001010101010110100010101001010101010101010111100101011011010101100100100010011010101010111010110110001001010101011100110001010101010001011000110011100110010100111100011100101011100011100010101010110101010010101010101010101111001010011011011010101101000100110101010101110101101100001001001010101011100010101010100010110001100111000100110010100111111001010111000111000101010101101000101010010101010101011110010100110110110101011001001000100110101011101011011000010010010101010111001100010101010101100011001110001001100101001111000111001010111000001010101011010001010100101010101010101011110010101101101010110010010001001101010101011101011011000100101010101110011000101010101000101100011001110011001010011110001110010101110001110001010101011Wednesday, May 1, 13
  56. 56. 1000110011100010011001010011110001110010101110001010101010110100010101001010101010101010111100101011011010101100100100010011010101010111010110110001001010101011100110001010101010001011000110011100110010100111100011100101011100011100010101010110101010010101010101010101111001010011011011010101101000100110101010101110101101100001001001010101011100010101010100010110001100111000100110010100111111001010111000111000101010101101000101010010101010101011110010100110110110101011001001000100110101011101011011000010010010101010111001100010101010101100011001110001001100101001111000111001010111000001010101011010001010100101010101010101011110010101101101010110010010001001101010101011101011011000100101010101110011000101010101000101100011001110011001010011110001110010101110001110001010101011Parse.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. 57. 1000110011100010011001010011110001110010101110001010101010110100010101001010101010101010111100101011011010101100100100010011010101010111010110110001001010101011100110001010101010001011000110011100110010100111100011100101011100011100010101010110101010010101010101010101111001010011011011010101101000100110101010101110101101100001001001010101011100010101010100010110001100111000100110010100111111001010111000111000101010101101000101010010101010101011110010100110110110101011001001000100110101011101011011000010010010101010111001100010101010101100011001110001001100101001111000111001010111000001010101011010001010100101010101010101011110010101101101010110010010001001101010101011101011011000100101010101110011000101010101000101100011001110011001010011110001110010101110001110001010101011var 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. 58. 1000110011100010011001010011110001110010101110001010101010110100010101001010101010101010111100101011011010101100100100010011010101010111010110110001001010101011100110001010101010001011000110011100110010100111100011100101011100011100010101010110101010010101010101010101111001010011011011010101101000100110101010101110101101100001001001010101011100010101010100010110001100111000100110010100111111001010111000111000101010101101000101010010101010101011110010100110110110101011001001000100110101011101011011000010010010101010111001100010101010101100011001110001001100101001111000111001010111000001010101011010001010100101010101010101011110010101101101010110010010001001101010101011101011011000100101010101110011000101010101000101100011001110011001010011110001110010101110001110001010101011Backbone.jsParse SDKWednesday, May 1, 13
  59. 59. 1000110011100010011001010011110001110010101110001010101010110100010101001010101010101010111100101011011010101100100100010011010101010111010110110001001010101011100110001010101010001011000110011100110010100111100011100101011100011100010101010110101010010101010101010101111001010011011011010101101000100110101010101110101101100001001001010101011100010101010100010110001100111000100110010100111111001010111000111000101010101101000101010010101010101011110010100110110110101011001001000100110101011101011011000010010010101010111001100010101010101100011001110001001100101001111000111001010111000001010101011010001010100101010101010101011110010101101101010110010010001001101010101011101011011000100101010101110011000101010101000101100011001110011001010011110001110010101110001110001010101011Backbone.jsCloud CodeParseParse SDKClientServerWednesday, May 1, 13
  60. 60. 1000110011100010011001010011110001110010101110001010101010110100010101001010101010101010111100101011011010101100100100010011010101010111010110110001001010101011100110001010101010001011000110011100110010100111100011100101011100011100010101010110101010010101010101010101111001010011011011010101101000100110101010101110101101100001001001010101011100010101010100010110001100111000100110010100111111001010111000111000101010101101000101010010101010101011110010100110110110101011001001000100110101011101011011000010010010101010111001100010101010101100011001110001001100101001111000111001010111000001010101011010001010100101010101010101011110010101101101010110010010001001101010101011101011011000100101010101110011000101010101000101100011001110011001010011110001110010101110001110001010101011Angular.jsCloud CodeParseParse SDKClientServerWednesday, May 1, 13
  61. 61. 1000110011100010011001010011110001110010101110001010101010110100010101001010101010101010111100101011011010101100100100010011010101010111010110110001001010101011100110001010101010001011000110011100110010100111100011100101011100011100010101010110101010010101010101010101111001010011011011010101101000100110101010101110101101100001001001010101011100010101010100010110001100111000100110010100111111001010111000111000101010101101000101010010101010101011110010100110110110101011001001000100110101011101011011000010010010101010111001100010101010101100011001110001001100101001111000111001010111000001010101011010001010100101010101010101011110010101101101010110010010001001101010101011101011011000100101010101110011000101010101000101100011001110011001010011110001110010101110001110001010101011Ember.jsCloud CodeParseParse SDKClientServerWednesday, May 1, 13
  62. 62. 1000110011100010011001010011110001110010101110001010101010110100010101001010101010101010111100101011011010101100100100010011010101010111010110110001001010101011100110001010101010001011000110011100110010100111100011100101011100011100010101010110101010010101010101010101111001010011011011010101101000100110101010101110101101100001001001010101011100010101010100010110001100111000100110010100111111001010111000111000101010101101000101010010101010101011110010100110110110101011001001000100110101011101011011000010010010101010111001100010101010101100011001110001001100101001111000111001010111000001010101011010001010100101010101010101011110010101101101010110010010001001101010101011101011011000100101010101110011000101010101000101100011001110011001010011110001110010101110001110001010101011Building gamesMatt Gamache-Asselin @mattieugaParsewithhttps://github.com/parseplatform/anyyolkwww.anyyolk.comWednesday, May 1, 13

×