Download - Parse cloud code
Parse Cloud CodeBuilding Web Apps WITH Programming Server a little bit.
http://goo.gl/oW1cZD
2014 Spring Web Programming, NCCUAuthor: pa4373 (Licensed by CC-By 4.0)
Parse is great convenient platform for developing apps.
Basic Operation
Create,Read, Update, Delete, (CRUD)
What if we want more?
To work with Cloud Code, you shall understand how Parse actually works.
RESTful API
● RESTful API is the design principle of Web Service
● Web Service: content consumable for computer program. (Developers love it!)
RESTful API
How web service client works:1. Construct HTTP request2. Get HTTP response3. Parse HTTP response (plain text) into native
data types supported by your programming language.
4. Do whatever you like.
Programming language independent.
RESTful API{ "resultCount":1, "results": [{"wrapperType":"artist", "artistType":"Artist", "artistName":"Jack Johnson", "artistLinkUrl":"https://itunes.apple.com/us/artist/jack-johnson/id909253?uo=4", "artistId":909253, "amgArtistId":468749, "primaryGenreName":"Rock", "primaryGenreId":21, "radioStationUrl":"https://itunes.apple.com/station/idra.909253"}]}
var object = JSON.parse(res);// Do something with object variable.
plain text
RESTful API
Q: How client & server talks to each other?● protocol, standard
○ SOAP (Simple Object Access Protocol)○ XML RPC ○ REST
RESTful API: SOAP
RESTful API: XML RPC
HTTP/1.1 200 OKDate: Sat, 06 Oct 2001 23:20:04 GMTServer: Apache.1.3.12 (Unix)Connection: closeContent-Type: text/xmlContent-Length: 124
<?xml version="1.0"?><methodResponse> <params> <param> <value><double>18.24668429131</double></value> </param> </params></methodResponse>
POST /xmlrpc HTTP 1.0User-Agent: myXMLRPCClient/1.0Host: 192.168.124.2Content-Type: text/xmlContent-Length: 169<?xml version="1.0"?><methodCall> <methodName>circleArea</methodName> <params> <param> <value><double>2.41</double></value> </param> </params></methodCall>
RESTful API: REST
REST: Representational State Transfer
What is that?The story begins with the invention of HTTP by Sir Tim-Berners Lee.CERN, Swiss, 1990
RESTful API: REST
● WEB is a place providing resources.● the very first version of HTTP:
○ GET● HTTP 1.0
○ GET, POST and HEAD● HTTP 1.1
○ GET, POST, HEAD, OPTIONS, PUT, DELETE, PATCH
RESTful API: Resources
A resource is an object with a type, associated data, relationships to other resources,
http://restful-api-design.readthedocs.org/en/latest/scope.html
RESTful API
How Parse WorksYour Code
Parse SDK (黑箱)
產生HTTP請求 產生HTTP回應
Parse Cloud (RESTful API)
Cloud Code
Bring server programming back to Parse while not entirely dealing with server logic, Awesome!
docs: https://parse.com/docs/cloud_code_guide
Cloud Code
All source code available on GitHub:
$ git clone https://github.com/pa4373/wp2014s_cloudcode_example.git
Use Cloud Code
Install command-line tool:● OS X / Linux
○○ python, curl is required. ( usually included in OS. )
● Windows○ https://parse.com/downloads/windows/console/parse.zip
$ curl -s https://www.parse.com/downloads/cloud_code/installer.sh | sudo /bin/bash
Use Cloud Code
Setting up Cloud Code# Create new cloud code folder containing basic files $ parse new cloudcode_demoEmail: [email protected]: # You won’t see **** while typing, stop asking!1: ParseStore
2: PeerEvaluation
3: cloudcode_demo
Select an App: 3 # You shall see all apps on Parse, select one to link with$ cd cloudcode_demo # change into the folder newly created
Use Cloud Code
Q: What’s my password?A: If you use Facebook, Google, GitHub to login,you might need to go to “Account” to manually set your password.
Use Cloud Code
Basic folder structure# let’s see what parse cloud deploy created for us.
├── cloud│ └── main.js# This is where cloud code are stored.
├── config│ └── global.json# A JSON file telling Parse how to deploy your code,
# normally you don’t need to worry about it.
└── public└── index.html
# Few static files you want Parse to host.
Use Cloud Code
Write the very first cloud code function:Open main.js and add the following codes.
Parse.Cloud.define("hello", function(request, response) {
response.success("Hello world!");
// You need to include response.success/error in Cloud
Code indicating the end of the request, or the codes will
went wrong.
});
Use Cloud Code
Deploy to the cloud:in the project directory, typing:
$ parse deploy
Uploading source files
Finished uploading files
New release is named v2 (using Parse JavaScript SDK v1.
2.18)
Use Cloud Code
Call the function we just wrote. (Client JS)
Parse.Cloud.run('hello', {}, {
success: function(result) {
window.alert(result);
// result is 'Hello world!'
},
error: function(error) {
}
});
Use Cloud Code
Call the function we just wrote.
Use Cloud Code
Cloud Code Dashboard
Files: Cloud Code (Live editing)Logs: console.log (Great for debugging)Scheduled Jobs: See queued jobsJob Status: See job status
Use Cloud Code
Topic Covered Today:● beforeSave, afterSave, beforeDelete, and
afterDelete● Parse.Cloud.httpRequest● Background Jobs● Modules● Settings for Development vs. Production
Use Cloud Code
beforeSave, afterSave, beforeDelete, and afterDelete:Act as a hook, allow developers to perform some operations before CRUD.
Use Cloud Code
Change its value before the object is saved on Parse.
Parse.Cloud.beforeSave("ExampleClass", function(request,
response) {
request.object.set("text", "Always the same.");
response.success();
});
Use Cloud Code
Save an object to Parse and retrieve its value.(Client JS)
var ExampleClass = Parse.Object.extend("ExampleClass");
var example_object = new ExampleClass();
example_object.set('text', 'I don\'t believe it!');
example_object.save(null, {
success: function(object){
var text = object.get('text');
window.alert(text);
}, error: function(object){
}
});
Use Cloud Code
Save an object to Parse and retrieve its value
Use Cloud Code
Parse.Cloud.httpRequest:Sometimes you need to fetch contents from other websites / web services, this is where Parse.Cloud.httpRequest comes in handy.
Use Cloud Code
API in the example: iTunes API
Documentation: https://www.apple.com/itunes/affiliates/resources/documentation/itunes-store-web-service-search-api.htmlAPI to use:https://itunes.apple.com/search?term=john+mayer
Use Cloud Codehttps://itunes.apple.com/search?term=john+mayer
Parse.Cloud.httpRequest({
url: 'https://itunes.apple.com/search',
params: {
term: request.params.singer // request.params as the Query Object
},
success: function (httpResponse) {
var SongClass = Parse.Object.extend('SongClass');
var ResObj = JSON.parse(httpResponse.text);
var newlyCreatedObjList = ResObj.results.map(function (e) {
var object = new SongClass();
object.set('trackName', e['trackName']);
return object;
});
// Resolve multiple asynchronous save problem (When to send http response?)
Parse.Object.saveAll(newlyCreatedObjList, {
success: function (list) {
response.success(request.params.singer + " is awesome!");
},
error: {}
});
},
error: function (httpResponse) {
console.error('Request failed with response code ' + httpResponse.status);
}
});
Use Cloud Code
Let’s put it into our ‘Hello World’ cloud code app!
Parse.Cloud.define("get", function(request, response) {
// Put codes shown on the last page here.
});
Use Cloud Code
Call the function we just wrote. (Client JS)
Parse.Cloud.run('get', {singer: 'John Mayer'}, {
success: function(result) {
window.alert(result);
// result is 'John Mayer is awesome'
},
error: function(error) {
}
});
Use Cloud Code
Call the function we just wrote. (Client JS)
Use Cloud Code
Call the function we just wrote. (Client JS)
Use Cloud Code
Background Jobs:Suitable for scheduled, time-consuming jobs
Use Cloud Code
Background Jobs:Let’s say: we want to run the codes on previous example per hour, periodically.
Use Cloud Code
Background Jobs:Define the jobs
Parse.Cloud.job("iTunesAPI", function(request, status) {
// Put the codes in the previous example here.
});
Use Cloud Code
Background Jobs:Parse.Cloud.job("iTunesAPI", function(request, status) {
Parse.Cloud.httpRequest({
url: 'https://itunes.apple.com/search',
params: {
term: request.params.singer
},
success: function (httpResponse) {
var SongClass = Parse.Object.extend('SongClass');
var ResObj = JSON.parse(httpResponse.text);
var newlyCreatedObjList = ResObj.results.map(function(e){
var object = new SongClass();
object.set('trackName', e['trackName']);
return object;
});
Parse.Object.saveAll(newlyCreatedObjList, {
success: function(list){
status.success(request.params.singer+" is awesome!"); // status required for a function to
stop.
}, error: {}
});
},
error: function (httpResponse) {
console.error('Request failed with response code ' + httpResponse.status);
}
});
});
Use Cloud Code
Use Cloud Code
Double quote.
UTC Time
Use Cloud Code
Use Cloud Code
Use Cloud Code
Advanced: Write a web crawler using Background Jobs, httpRequest
Programmers love API and web service.The regular users don’t.
How to extract information from normal web page?
Use Cloud Code
find string?
Good Luck!
Use Cloud Code
What if let codes ‘inspect element?’....
Use Cloud Code
Remarks: (DOM Tree) It’s a tree! Awesome!
Use Cloud Code
Parse doesn’t support modules written in C / C++, exposed from JavaScript.
No magical package manager (i.e npm, to use). TAT
Grab native javascript modules to cloud folder and put var module = require('cloud/<module filename>'); in your code.
Use Cloud Code
Grab https://github.com/isaacs/sax-js/blob/master/lib/sax.js as sax.js in cloud folder.Grab https://github.com/SamDecrock/node-xmlreader/blob/master/xmlreader.js as xmlreader.js in cloud folder.Replace var sax = require("sax"); with var sax = require("cloud/sax.js");
var saxparser = sax.parser(true); with var saxparser = sax.parser(false);
in xmlreader.js
https://parse.com/questions/htmlxml-parser-with-xpath-on-cloud-code
Use Cloud Code
XPath: a way to describe element in a DOM tree,
ex: /html/body/div[3]/div/ul/li/div[2]/p[2]
a little bit like CSS selector
Using ‘inspect element’ to look up Xpath.
Use Cloud Code
http://www.ericclapton.com/tour
/html/body/div[2]/div/div[3]/div/div[3]/div/div/table/tbody/tr/td[2]/a
Use Cloud Code/html/body/div[2]/div/div[3]/div/div[3]/div/div/table/tbody/tr[2]/td[2]/a
Use Cloud CodeParse.Cloud.job("webpage_scraping", function(request, status) {
var xmlreader = require('cloud/xmlreader.js');
Parse.Cloud.httpRequest({
url: 'http://www.ericclapton.com/tour',
success: function (httpResponse) {
xmlreader.read(httpResponse.text, function(err, doc){
var arena = doc.HTML.BODY.DIV.at(1).DIV.at(0).DIV.at(2).DIV.at(0).DIV.at(2).
DIV.at(0).DIV.at(0).TABLE.at(0).TBODY.at(0).TR.at(1).TD.at(1).A.at(0).text();
///html/body/div[2]/div/div[3]/div/div[3]/div/div/table/tbody/tr[2]/td[2]/a
var ConcertArenaClass = Parse.Object.extend('ConcertArenaClass');
var obj = new ConcertArenaClass();
obj.set('arena', arena);
obj.save(null, {
success: function(obj){
status.success('arena saved.');
}, error: {}
});
});
},
error: function (httpResponse) {
console.error('Request failed with response code ' + httpResponse.status);
}
});
});
Use Cloud Code
var xmlreader = require('cloud/xmlreader.js');
xmlreader.read(httpResponse.text, function(err, doc){
var arena = doc.HTML.BODY.DIV.at(1).DIV.at(0).DIV.at(2).DIV.at(0).DIV.at(2).
DIV.at(0).DIV.at(0).TABLE.at(0).TBODY.at(0).TR.at(1).TD.at(1).A.at(0).text();
// XPath: /html/body/div[2]/div/div[3]/div/div[3]/div/div/table/tbody/tr[2]/td[2]/a
// Watch the index diffirence. (start from 0, start from 1 -> None)
});
Use Cloud Code
Limitation:
Not handler malformed HTML markup,for other usage: https://www.npmjs.org/package/xmlreader
Use Cloud Code
Technique: Hack AJAX pageSome web page content is powered by AJAX technique, use ‘Inspect Elemenet’
Use Cloud Code
Always try to find API before writing your own crawler!
Be practical.
Use Cloud Code
ModulesImagine you got the codes from your peer, with 10k+ LoC in there.
Are you ready to debug to die?
Or say, write every function by your own.
And you wishes you were dead.
Use Cloud Code
Modules● Write your own module● Cloud modules● Use Third-party modules (Painful!)
Use Cloud Code
Modules● Write your own module
var coolNames = ['Ralph', 'Skippy', 'Chip', 'Ned', 'Scooter'];
exports.isACoolName = function(name) {
return coolNames.indexOf(name) !== -1;
}
var name = require('cloud/name.js');
name.isACoolName('Fred'); // returns false
name.isACoolName('Skippy'); // returns true;
name.coolNames; // undefined.
cloud/name.js
cloud/main.js
There’s a global exports object.
Use Cloud Code
Modules● Write your own module● Cloud modules
○ https://www.parse.com/docs/cloud_modules_guide● Use Third-party modules
○ Put pure js modules in your cloud directory, and use
‘var mod = require('cloud/name.js');’
Use Cloud Code
Settings for Development vs. Production
You got a app running for production,but you also want to add some cool features, what to do now?
Modify Production on the fly, dangerous and stupid!
Use Cloud Code
Use Cloud Code
Settings for Development vs. Production
Production App
Development App
Your Cloud Code Project
Use Cloud Code
Settings for Development vs. ProductionLink other apps to your project
# Link existing project to other apps, accessible via alias ‘production’$ parse add productionEmail: [email protected]: # You won’t see **** while typing, stop asking!1: ParseStore
2: PeerEvaluation
3: cloudcode_demo
4: cloudcode_demo_production
Select an App: 4
Use Cloud Code
Settings for Development vs. ProductionDeveloping Cloud Code
# Deploy tool will monitor files change on fly and updated to Parse server (No more deploy again)$ parse develop <APP_NAME>E2013-03-19:20:17:01.423Z] beforeSave handler in release 'v1' ran for GameScore with the input: {"original": null, "update":{"score": 1337}} and failed validation with Each GamesScore must have a playerNameNew release is named v58I2013-03-19T20:17:10.343Z] Deployed v58 with triggers: GameScore: before_save
Use Cloud Code
Settings for Development vs. ProductionDeploy Code to Production
$ parse deploy productionNew release is named v2