Download - Browser MVC with YQL and YUI

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

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



<meta></meta>


</table>


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>


23



<meta></meta>


</table>


24



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


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



<meta></meta>

<bindings>


<urls></urls>

<inputs></inputs>

</select>

</bindings>

</table>

YQL Execute – XML File Syntax

30



<meta></meta>

<bindings>


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

Download - Browser MVC with YQL and YUI

Top Related