Browser MVC with YQL and YUI

  • 3,602 views
Uploaded on

YQL is a highly rich and dynamic utility for capturing data from any place on the web. When we couple this functionality with YUI we have wonderful functionality for designing apps and sites easily …

YQL is a highly rich and dynamic utility for capturing data from any place on the web. When we couple this functionality with YUI we have wonderful functionality for designing apps and sites easily and that scale around MVC design patterns.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,602
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
49
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Browser MVC with YQL and YUI
    Jonathan LeBlanc
    Technology Evangelist
    Yahoo! Developer Network
    Twitter: @jcleblanc
  • 2. 2
    Geo Maker
    Available At: http://icant.co.uk/geomaker/index.php
  • 3. 3
    Yahoo! Social Updates
    Available At:
    www.nakedtechnologist.com/
    php_widget_oauth/
    yql_php_widget.html
  • 4. 4
    Christian Heilmann’s Website
    Available At: http://icant.co.uk/
  • 5. 5
    Fetching Dynamic Data with YQLBrowser MVC Model Component
  • 6. 6
  • 7. 7
    YQL Query StructureSELECT * FROM Internet
  • 8. 8
    YQL Test Console
    Available At: http://developer.yahoo.com/yql/console
  • 9. 9
    Running Queries - SELECT Query Structure
    SELECTmyColumn, myTitle
    FROMmyTable
    WHEREmyColumn = 'value' ANDmyTitle = 'title‘
    LIMIT3 OFFSET10
  • 10. 10
    Running Queries - INSERT / UPDATE / DELETE
    Modify Data on the Internet
    Create Tweets, Add Blog Entries, Update Databases
    Current Tables Using I/U/D
    Twitter Status, bit.ly URL Shortner, Yahoo! Profile Status / Update
    Stream, Amazon
    SimpleDB
  • 11. 11
    Running Queries - INSERT Query Structure
    INSERT INTObitly.shorten (login, apiKey, longUrl)
    VALUES (’ME', 'API_KEY', 'http://yahoo.com')
  • 12. 12
    Running Queries - UPDATE Query Structure
    UPDATE social.profile.status
    SET status="Using YQL UPDATE"
    WHEREguid=“NJFIDHVPVVISDXZKT7UKED2WHU”
  • 13. 13
    Running Queries - DELETE Query Structure
    DELETE FROM twittertable
    WHERE tweetid="12345"
    AND username="twitter_username"
    AND password="twitter_password
  • 14. 14
    Running Queries – Sub-selects with the IN clause
    SELECT * FROM flickr.photos.search
    WHERE (lat, lon)
    IN (SELECT centroid.latitude, centroid.longitude FROM geo.places WHERE text="SFO")
  • 15. 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. 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]
    17
  • 18. 18
    Running Queries – URL Format
    http://query.yahooapis.com/v1/yql?[params]
    http://query.yahooapis.com/v1/public/yql?[params]
    Params
    • q=[QUERY]
    • 19. format=[XML / JSON / JSONP / JSONP-X]
    • 20. diagnostics=[true / false]
    • 21. debug=[true / false]
    • 22. env=[.env file link]
    • 23. callback=[function name]
  • 19
    YQL Open Data TablesWrap Your Own API or Data Source
  • 24. 20
    Open Data Tables – XML File Syntax
    <?xml version="1.0" encoding="UTF-8"?>
    <table xmlns="http://query.yahooapis.com/v1/schema/table.xsd">
    <meta></meta>
    <bindings></bindings>
    </table>
  • 25. 21
    Open Data Tables – XML File Syntax
    <?xml version="1.0" encoding="UTF-8"?>
    <table xmlns="http://query.yahooapis.com/v1/schema/table.xsd">
    <meta></meta>
    <bindings></bindings>
    </table>
  • 26. 22
    Open Data Tables – XML File Syntax
    <?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>
  • 27. 23
    Open Data Tables – XML File Syntax
    <?xml version="1.0" encoding="UTF-8"?>
    <table xmlns="http://query.yahooapis.com/v1/schema/table.xsd">
    <meta></meta>
    <bindings></bindings>
    </table>
  • 28. 24
    Open Data Tables – XML File Syntax
    <?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>
    <urlenv="all”>http://www.site.com/{user}</url>
    </urls>
    <inputs>
    <key id="user" type="xs:string" paramType="path"
    required="true" /> </inputs>
    </select>
    </bindings>
    </table>
  • 29. 25
    Open Data Tables – Invoking a Table Definition
    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'
  • 30. Google Buzz Table
    Available At: http://github.com/yql/yql-tables
  • 31. 27
    YQL ExecuteExtending Open Data Tables
  • 32. 28
    YQL Execute – Use Benefits
    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
  • 33. 29
    YQL Execute – XML File Syntax
    <?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>
  • 34. 30
    YQL Execute – XML File Syntax
    <?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>
  • 35. Global Disaster Alert and Coordination System Table
    Available At: http://github.com/yql/yql-tables
  • 36. 32
    YUI Data Handling & ManipulationBrowser MVC Controller Component
  • 37. 33
    YUI Visualization: Controller
    DATA PROCESSING
    GET
    Connection Manager
    HANDLING & MANIPULATION
    DOM
    Event
    Uploader
  • 38. 34
    YUI Visualization: Controller (GET Utility)
    <script type="text/javascript">//public YQL query URLvaryqlPublicQueryURL = "http://query.yahooapis.com/v1/public/yql?";//YQL QueryvarsQuery = 'SELECT * FROM maps.map WHERE zip="94085"';//prepare the URL params for YQL queryvarsURL = yqlPublicQueryURL + "q=" + encodeURI(sQuery) + "&format=json&callback=getYQLDataCallback";//make GET request to YQL with provided queryvartransactionObj = YAHOO.util.Get.script(sURL, {    onSuccess : onYQLReqSuccess,    onFailure : onYQLReqFailure,    scope : this});return transactionObj;
    </script>
  • 39. 35
    YUI Visualization: Controller (Connection Manager)
    <script type="text/javascript">//YQL QueryvarsQuery = '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 POSTvarsURL = "private_data_fetch.php";varpostData = "q=" + sQuery;//define connection manager event callbacksvar callback = {    success:parseYQLResults,    failure:onYQLReqFailure};//make POST request to YQL with provided queryvartransactionObj = YAHOO.util.Connect.asyncRequest('POST', sURL, callback, postData);
    </script>
  • 40. 36
    YUI VisualizationBrowser MVC View Component
  • 41. 37
    YUI Visualization: View
    VISUALIZATION UTILITIES
    AnimationButtonCalendarColor PickerCarouselChartsData TableImageLoader
    Layout ManagerMenuProgressBarSliderStylesheetSWF UtilityTabViewTreeView
  • 42. 38
    YUI Visualization: Pseudo
    They Go Both Ways
    Drag and Drop
    ImageCropper
    Rich Text Editor
  • 43. 39
    Conclusion
    Build applications faster
    (and that run faster)
  • 44. This Presentation
    http://www.slideshare.net/jcleblanc
    YQL Documentation
    http://developer.yahoo.com/yql
    YUI Documentation
    http://developer.yahoo.com/yui
    YQL Console
    http://developer.yahoo.com/yql/console
    YQL Github Account (Contribute Tables)
    http://github.com/yql/yql-tables
  • 45. 41
    Thank YouQuestions?