Building AnyYolk with the Parse JavaScript SDK

Building games

Matt Gamache-Asselin @mattieuga

Parsewith

Wednesday, May 1, 13


Database


Database Server+

+ users+ security


Database REST API

ZZZ

Server+

+ users+ security

+


Database REST API

ZZZ

Server+

+ users+ security

Networking

+

+


Database REST API

ZZZ

Server

+

+

+ users+ security

Networking The fun stu!!

+

+


Database REST API

ZZZ

Server

+

+

+ users+ security


+

+


Database REST API

ZZZ

Server

+

+

+ users+ security


+

+


Database REST API

ZZZ

Server

+

+

+ users+ security


+

+


iOS Android OS X WP8 Win 8 .NET Cloud Code REST

JavaScript


Giving your code a BACKBONE.JS


ScoreViewGameView Pro!leView


ScoreViewGameView Pro!leView


Backbone.Event


Backbone.ModelBackbone.Event



Backbone.View



Backbone.View

Backbone.View

Backbone.View



Backbone.View

var ScoreModel = Backbone.Model.extend({

});



Backbone.View


defaults: { score: 0, level: 1, mult: 1 },

});



Backbone.View


defaults: { score: 0, level: 1, mult: 1 }, incrementScore: function() { this.set(“score”, this.get(“score”) + this.get(“mult”); }});



Backbone.View

var scoreModel = new ScoreModel();

scoreModel.incrementScore();



Backbone.View

change

change:scoreScoreModel

var scoreModel = new ScoreModel();

scoreModel.incrementScore();



Backbone.View

var ScoreView = Backbone.View.extend({

});

var scoreView = new ScoreView({ model: scoreModel });



Backbone.View


render: function() { this.$el.html(“<p>” + this.model.get(“score”) + “</p>”); $(“#game .score”).html(this.$el); return this; }

});




Backbone.View


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; }

});



ScoreModelchange:score

ScoreView


ScoreModelchange:score

ScoreView

Backbone.Collection Backbone.Router



GameState

GameScene MenuScene HighScoreScene GameOverScene

Events

EggModel

EggView


ParseIt’s all about the server


Backbone.Model

Backbone.View

Backbone.Collection

Backbone.Router


Parse.Object

Backbone.View

Parse.Collection

Backbone.Router


Parse.Object

Backbone.View

Parse.Collection

Backbone.Router

Parse


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


USERSThe in your app


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 :( ");

}

});


var user = new Parse.User();

user.set("username", "Matt");

user.set("password", "html5r0cks");

user.signUp({



},



}

});


Parse.User.LogIn("Matt", "html5r0cks", {



},



}

});


Parse.User.LogIn("Matt", "html5r0cks", {



},



}

});

var user = Parse.User.current();


Parse.FacebookUtils.LogIn({



},



}

});





},



}

});






},



}

});



DATASaving stu" in the


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) {


}

});


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!");

},



}

});



user.set("displayName", nameValue);

user.save({


console.log("user saved!");

},



}

});


QUERIESGetting stu" from the


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);

},



}

});

query.descending("score");


GameState


Events

EggModel

EggView


GameState


Events

EggModel

EggView

HighScoreCollection

Parse

Parse.User


100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001

It’s code in the


100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001

It’s JavaScript in the Cloud


100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001

Parse.Cloud.define("averageLikes", function(request, response) { ...});

Parse.Cloud.beforeSave("Post", function(request, response) { ...});

Parse.Cloud.afterSave("Post", function(request, response) { ...});


100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001


100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001

Parse.Cloud.httpRequest({ url: 'http://www.parse.com/', success: function(httpResponse) { console.log(httpResponse.text); }, error: function(httpResponse) { console.error(httpResponse.status); }});


http://www.parse.com/

http://www.parse.com/

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”); });});


100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001

Backbone.js

Parse SDK


100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001

Backbone.js

Cloud Code

Parse

Parse SDK

ClientServer


100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001

Angular.js

Cloud Code

Parse

Parse SDK

ClientServer


100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001

Ember.js

Cloud Code

Parse

Parse SDK

ClientServer


100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001100010101010100010110001100111000100110010100111100011100101011100011100010101010110100010101001010101010101010111100101001101101101010110010010001001101010101011101011011000010010010101010111001

Building games

Matt Gamache-Asselin @mattieuga

Parsewithhttps://github.com/parseplatform/anyyolk

www.anyyolk.com


https://github.com/parseplatform/anyyolk




Building AnyYolk with the Parse JavaScript SDK

Technology

new parse

var user

collection backbone

new scoreview

viewvar scoreview

viewvar scoremodel

database rest apizzzserver

new scoremodelscoremodel