Building AnyYolk with the Parse JavaScript SDK

Post on 15-Jan-2015

1.553 views 3 download

Tags:

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

Transcript of Building AnyYolk with the Parse JavaScript SDK

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: 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

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