Date post: | 20-Jan-2015 |
Category: |
Technology |
Upload: | jonathan-leblanc |
View: | 3,634 times |
Download: | 4 times |
Browser MVC with YQL and YUI
Jonathan LeBlanc
Technology Evangelist
Yahoo! Developer Network
Twitter: @jcleblanc
2
Geo Maker
Available At: http://icant.co.uk/geomaker/index.php
3
Yahoo! Social Updates
Available At:
www.nakedtechnologist.com/
php_widget_oauth/
yql_php_widget.html
4
Christian Heilmann’s Website
Available At: http://icant.co.uk/
5
Fetching Dynamic Data with YQL Browser MVC Model Component
6
7
YQL Query Structure SELECT * FROM Internet
8
YQL Test Console
Available At: http://developer.yahoo.com/yql/console
9
SELECT myColumn, myTitle FROM myTable WHERE myColumn = 'value' AND myTitle = 'title‘
LIMIT 3 OFFSET 10
Running Queries - SELECT Query Structure
10
Modify Data on the InternetCreate Tweets, Add Blog Entries, Update Databases
Current Tables Using I/U/DTwitter Status, bit.ly URL Shortner, Yahoo! Profile Status / Update Stream, Amazon SimpleDB
Running Queries - INSERT / UPDATE / DELETE
11
INSERT INTO bitly.shorten (login, apiKey, longUrl)
VALUES (’ME', 'API_KEY', 'http://yahoo.com')
Running Queries - INSERT Query Structure
12
UPDATE social.profile.status
SET status="Using YQL UPDATE"
WHERE guid=“NJFIDHVPVVISDXZKT7UKED2WHU”
Running Queries - UPDATE Query Structure
13
DELETE FROM twittertable
WHERE tweetid="12345" AND username="twitter_username" AND password="twitter_password
Running Queries - DELETE Query Structure
14
SELECT * FROM flickr.photos.search
WHERE (lat, lon)
IN (SELECT centroid.latitude, centroid.longitude FROM geo.places WHERE text="SFO")
Running Queries – Sub-selects with the IN clause
15
Running Queries – Available Tables
YQL Command: SHOW Tables
Number of Standard Tables: 105
Number of Community Tables: 600
Total Number of Tables: 705
Contribute Tables to:
http://www.github.com/yql/yql-tables/
16
Running Queries – Table Syntax
YQL Command: DESC tablename
17
Running Queries – URL Format
http://query.yahooapis.com/v1/yql?[params]
http://query.yahooapis.com/v1/public/yql?[params]
Params• q=[QUERY]• format=[XML / JSON] • diagnostics=[true / false]• debug=[true / false]• env=[.env file link]• callback=[function name]
18
http://query.yahooapis.com/v1/yql?[params]
http://query.yahooapis.com/v1/public/yql?[params]
Params• q=[QUERY]• format=[XML / JSON / JSONP / JSONP-X]• diagnostics=[true / false]• debug=[true / false]• env=[.env file link]• callback=[function name]
Running Queries – URL Format
19
YQL Open Data Tables Wrap Your Own API or Data Source
20
<?xml version="1.0" encoding="UTF-8"?>
<table xmlns="http://query.yahooapis.com/v1/schema/table.xsd">
<meta></meta>
<bindings></bindings>
</table>
Open Data Tables – XML File Syntax
21
<?xml version="1.0" encoding="UTF-8"?>
<table xmlns="http://query.yahooapis.com/v1/schema/table.xsd">
<meta></meta>
<bindings></bindings>
</table>
Open Data Tables – XML File Syntax
22
<?xml version="1.0" encoding="UTF-8"?><table xmlns="http://query.yahooapis.com/v1/schema/table.xsd">
<meta> <author>Jonathan LeBlanc</author> <description>My Table</description> <documentationURL>www.site.com</documentationURL>
<sampleQuery>SELECT * FROM {table} </sampleQuery> </meta> <bindings></bindings></table>
Open Data Tables – XML File Syntax
23
<?xml version="1.0" encoding="UTF-8"?>
<table xmlns="http://query.yahooapis.com/v1/schema/table.xsd">
<meta></meta>
<bindings></bindings>
</table>
Open Data Tables – XML File Syntax
24
<?xml version="1.0" encoding="UTF-8"?>
<table xmlns="http://query.yahooapis.com/v1/schema/table.xsd">
<meta></meta>
<bindings>
<select itemPath="" produces="XML" >
<urls>
<url env="all”>http://www.site.com/{user}</url>
</urls>
<inputs>
<key id="user" type="xs:string" paramType="path"
required="true" /> </inputs>
</select>
</bindings>
</table>
Open Data Tables – XML File Syntax
25
The USE clause
USE 'http://github.com/yql/yql-tables/raw/master/google/google.buzz.updates.xml'
AS buzz.updates;
SELECT * FROM buzz.updates
WHERE user='nakedtechnologist'
Open Data Tables – Invoking a Table Definition
Google Buzz Table
Available At: http://github.com/yql/yql-tables
27
YQL Execute Extending Open Data Tables
28
Augment data- city / state to APIs that just return zip code
Create APIs from web pages- celebrity birthdays scraped from IMDB
Data Transformations- convert the results from xml to Google's kml format
Move business logic of your application to the cloud
YQL Execute – Use Benefits
29
<?xml version="1.0" encoding="UTF-8"?>
<table xmlns="http://query.yahooapis.com/v1/schema/table.xsd">
<meta></meta>
<bindings>
<select itemPath="" produces="XML" >
<urls></urls>
<inputs></inputs>
</select>
</bindings>
</table>
YQL Execute – XML File Syntax
30
<?xml version="1.0" encoding="UTF-8"?>
<table xmlns="http://query.yahooapis.com/v1/schema/table.xsd">
<meta></meta>
<bindings>
<select itemPath="" produces="XML" >
<urls></urls>
<inputs></inputs>
<execute></execute>
</select>
</bindings>
</table>
YQL Execute – XML File Syntax
Global Disaster Alert and Coordination System Table
Available At: http://github.com/yql/yql-tables
32
YUI Data Handling & Manipulation Browser MVC Controller Component
33
DATA PROCESSING
GET
Connection Manager
HANDLING & MANIPULATION
DOM
Event
Uploader
YUI Visualization: Controller
34
<script type="text/javascript">//public YQL query URLvar yqlPublicQueryURL = "http://query.yahooapis.com/v1/public/yql?";
//YQL Queryvar sQuery = 'SELECT * FROM maps.map WHERE zip="94085"';
//prepare the URL params for YQL queryvar sURL = yqlPublicQueryURL + "q=" + encodeURI(sQuery) + "&format=json&callback=getYQLDataCallback";
//make GET request to YQL with provided queryvar transactionObj = YAHOO.util.Get.script(sURL, { onSuccess : onYQLReqSuccess, onFailure : onYQLReqFailure, scope : this});
return transactionObj;
</script>
YUI Visualization: Controller (GET Utility)
35
<script type="text/javascript">//YQL Queryvar sQuery = 'select lastUpdated, link, loc_iconURL, loc_longForm, profile_nickname, profile_profileUrl, publishedTime from social.updates where guid=me | sort(field="lastUpdated") | reverse()';
//prepare the URL & post data for the Yahoo! connection manager POSTvar sURL = "private_data_fetch.php";var postData = "q=" + sQuery;
//define connection manager event callbacksvar callback = { success:parseYQLResults, failure:onYQLReqFailure};
//make POST request to YQL with provided queryvar transactionObj = YAHOO.util.Connect.asyncRequest('POST', sURL, callback, postData);
</script>
YUI Visualization: Controller (Connection Manager)
36
YUI Visualization Browser MVC View Component
37
VISUALIZATION UTILITIES
YUI Visualization: View
AnimationButtonCalendarColor PickerCarouselChartsData TableImageLoader
Layout ManagerMenuProgressBarSliderStylesheetSWF UtilityTabViewTreeView
38
They Go Both Ways
Drag and Drop
ImageCropper
Rich Text Editor
YUI Visualization: Pseudo
39
Build applications faster
(and that run faster)
Conclusion
This Presentation http://www.slideshare.net/jcleblanc
YQL Documentationhttp://developer.yahoo.com/yql
YUI Documentationhttp://developer.yahoo.com/yui
YQL Consolehttp://developer.yahoo.com/yql/console
YQL Github Account (Contribute Tables)http://github.com/yql/yql-tables
41
Thank You Questions?