P
`
`‘ a
`D
`A
`fe —
`
`.
`
`:
`
`\
`
`~—
`
`-
`
`-
`
`=
`
`at
`el
`
`=
`
`
`
`
`
`oe ae Le;aa a a es ee = + Ue «aye ye
`
`am ean Alea)
`Mashup Projects
`
`Create practical mashups in PHP, grabbing and mixing data from
`Google Maps, Flickr, Amazon, YouTube, MSN Search, Yahoo!,
`Last.fm, and 411Sync.com
`
`Shu-Wai Chow
`
`
`
`/PACKT.
`
`
`
`Petitioner Apple Inc. - Ex. 1035, p. Cover-1
`
`

`

`PHP Web 2.0 Mashup Projects
`
`Create practical mashups in PHP, grabbing and
`mixing data from Google Maps, Flickr, Amazon ,
`YouTube, MSN Search, Yahoo!, Last.fm, and
`411 Sync.com
`
`Shu-Wai Chow
`
`PACKT
`
`PUBLISHING
`BIRMINGHAM - MUMBAl
`
`Petitioner Apple Inc. - Ex. 1035, p. Cover-2
`
`

`

`PHP Web 2.0 Mashup Projects
`Create practical mashups in PHP, grabbing and mixing data from
`Google Maps, Flickr, Amazon, YouTube, MSN Search, Yahoo!,
`Last.fm, and 411Sync.com
`
`Copyright© 2007 Packt Publishing
`
`All rights reserved. No part of this book may be reproduced, stored in a retrieval
`system, or transmitted in any form or by any means, without the prior written
`permission of the publisher, except in the case of brief quotations embedded in
`critical articles or reviews.
`
`Every effort has been made in the preparation of this book to ensure the accuracy of
`the information presented. However, the information contained in this book is sold
`"ithout warranty, either express or implied. Neither the author, Packt Publishing,
`nor its dealers or distribu tors will be held liable for any damages caused or alleged to
`re caused directly or indirectly by this book.
`
`Packt Publishing has endeavored to provide trademark information about all the
`companies and products mentioned in this book by the appropriate use of capitals.
`However, Packt Publishing cannot guarantee the accuracy of this information.
`
`First published: September, 2007
`
`:?rod uction Reference: 1070907
`
`:'ublished by Packt Publishing Ltd.
`~~ Lincoln Road
`Olton
`Brrmingham, B27 6P A, UK.
`
`:SB>l' 978-1-847190-88-8
`
`.-,.-,,. . packtpub. com
`
`Cover Image by Vinayak Chittar (vinayak. chicr.ar@gmail . com)
`
`Petitioner Apple Inc. - Ex. 1035, p. Cover-3
`
`

`

`Preface
`
`A mashup is a web page or application that combines data from two or more
`external online sources into an integrated experience. This book is your entryway to
`the world of mashups and Web 2.0. You will create PHP projects that grab data from
`one place on the Web, mix it up with relevant information from another place on the
`Web and present it in a single application. All the mashup applications used in the
`book are built upon free tools and are thoroughly explained. You will find all the
`source code used to build the mashups in the code download section on our website.
`
`This book is a practical tutorial with five detailed and carefully explained case
`studies to build new and effective mash.up applications.
`
`What This Book Covers
`You will learn how to write PHP code to remotely consume services like Google
`Maps, Flickr, Amazon, YouTube, MSN Search, Yahoo!, Last.fm, and the Internet UPC
`Database, not to mention the California Highway Patrol Traffic data! You will also
`learn about the technologies, data formats, and protocols needed to use these web
`services and APis, and some of the freely-available PHP tools for working with them.
`
`You will understand how these technologies work with each other and see how
`to use this information, in combination with your imagination, to build your own
`cutting-edge websites.
`
`Chapter 1 provides an overview of mashups: what a mash.up is, and why you would
`want one.
`
`In Chapter 2 we create a basic mashup, and go shopping. We will simply look up
`products on Amazon.com based on the Universal Product Code (UPC). To do this,
`we cover two basic web services to get our feet wet - XML-RPC and REST. The
`Internet UPC database is an XML--RPC-based service, while Amazon uses REST.
`
`Petitioner Apple Inc. - Ex. 1035, p. 1
`
`

`

`Pre ace
`
`We will create code to call XML-RPC and REST services. Using PHP s SAX function,
`we create an extensible object-01iented parser for XML. The mashup covered in this
`chapter integrates information taken from Amazon's E-commerce Service (ECS) with
`the Internet UPC database.
`
`In Chapter 3, we o·eate a custom search engine using the technology of MSN, and
`Yahoo! The chapter starts with an introduction to SOAP, the most complex of the
`web service protocols. SOAP relies heavily on other standards like WSDL and XSD,
`which are aJso covered in readable detail. We take a look at a WSDL document and
`learn how to figure out what web services are available from it, and what types of
`data are passed. Using PHP S's SoapClient extension, we then interact with SOAP
`servers to grab data. We then finally create our mashup, which gathers web search
`results sourced from Microsoft Live and Yahoo!
`
`For the mashup in Chapter 4, we use the API from the video repository site You Tube,
`and the XML feed s from social music site Last.fro. We will take a look at three
`different XML-based file formats from those two sites: XSPF for song play lists, RSS
`for publishing frequently updated information, and YouTube's custom XML format.
`We will create a mashu p tl1at takes the songs in two Last.fm RSS feeds and
`queries You Tube to retrieve videos for those songs. Rather than creating our own
`XML-based parsers to parse tl1e three formats, we have used parsers from PEAR,
`one for each of the tlu ee formats. Using these PEAR packages, we create an
`object-oriented abstraction of these formats, which can be consumed by our
`mashup application.
`
`In Chapter 5, we screen-scrape from the California Highway Patrol website. The
`CHP maintains a website of traffic incidents. This site auto-refreshes every minute,
`ensuring the user gets live data about accidents tluoughout the state of California.
`This is very valuable if you are in front of a computer. If you are out and about
`running errands, it would be fairly useless. However, our mashup will use the web
`service from 41 lSync.com to accept SMS messages from mobile users to deliver these
`traffic incidents to users.
`
`\\"e ve thrown almost everything into Chapter 6! In this chapter, we use RDF
`documents, SPARQL, RAP, Google Maps, Flickr, AJAX, and JSON. We create a
`geographically-centric way to present pictures from Flickr on Google Maps. We see
`how lo read RDF documents and how to extract data from them using SPARQL and
`RAP for RDF. This gets us the latitude and longitude of London tube stations. We
`display them on a Google Map, and retrieve pictures of a selected station from Flickr.
`O ur application needs to commwucate with the API servers for which we use
`AJAX and JSON, which is emerging as a major data format. The biggest pitfall in
`this AJAX application is race conditions, and we will learn various techniques to
`overcome these.
`
`[ 2] -
`
`- - - - -- - - -- - - -
`
`Petitioner Apple Inc. - Ex. 1035, p. 2
`
`

`

`Pre ace
`
`What You Need for This Book
`To follow along with the projects and use the example code in this book, you will
`need a web server running PHP 5.0 or higher and Apache 1.3.
`
`All of the examples assume you are running the web server on your local work
`station, and all development is done Locally.
`
`Additionally, two projects have special requirements. In Chapter 5, you will need
`access to a web server that can be reached externally from the Internet. In Chapter
`6, you will need a MySQL server. Again, we assume you are running the MySQL
`server locally and it is properly configured.
`
`To quickly install PHP, Apache, and MySQL, check out XAMPP
`(http: //www . apache friends . org/en/xampp . html). XAMPP is a one-step
`installer for PHP, Apache, and MySQL, among other things.
`
`XAMPP is available for Windows, Linux, and Mac OS X. However, many standard
`Linux distributions already have PHP, Apache, and MySQL installed. Check your
`distribution's documentation on how to activate them. Mac OS X already has Apache
`and PHP installed by default. You can turn them on by enabling Web Sharing in
`your Sharing Preferences.
`
`MySQL can be installed as a binary downloaded from MySQL.corn
`(http : //dev .mysql . com/downloads/mysql/4.l.html).
`
`Conventions
`In this book, you will find a number of styles of text that distinguish between
`different kinds of information. Here are some examples of these styles, and an
`explanation of their meaning.
`
`There are three styles for code. Code words in text are shown as follows: "We can
`include other contexts through the use of the include directive."
`
`A block of code will be set as follows:
`
`<?php
`$aDom = new DOMDocument();
`try {
`$aDom->loadHTMLFile( 1 examplehtml .html 1
`catch (Excepti on $ex) {
`$aDom = false;
`
`)
`
`;
`
`[3] - - -- - - -- - -- - -
`
`Petitioner Apple Inc. - Ex. 1035, p. 3
`
`

`

`Pre ace
`
`When we wish to draw your attention ~o a p.u-t:k.7llar part of a code block, the
`relevant lines or items will be made bold:
`
`<param>
`<value><string>Hello, world .< s~=·-g>< ·,a:ue ~
`</param>
`
`Any command-line input and output is written as follov,:s:
`
`Buttercup:- root# pear list
`
`Buttercup:~ root# is the shell prompt on the author's machine.
`
`New terms and important words are introduced in a bold-type font. Words that you
`see on the screen, in menus or dialog boxes for example, appear in our text like this:
`"In the search box, enter in your keyword and the region code then press Search."
`
`[ ~ Important notes appear in a box like this.
`
`'A)
`~ Tips and tricks appear like this.
`
`[
`
`]
`]
`
`Reader Feedback
`Feedback from our readers is always welcome. Let us know what you think about
`this book, what you liked or may have disliked. Reader feedback is important for u s
`to develop titles that you really get the most out of.
`
`To send us general feedback, simply drop an email to feedback@packtpub .com,
`making sure to mention the book title in the subject of your message.
`
`If there is a book that you need and would like to see us publish, please send
`us a note in the SUGGEST A TITLE form on www. packtpub. com or email
`suggest@packtpub .com.
`
`If there is a topic that you have expertise in and you are interested in either writing
`or contributing to a book, see our author guide onwww.packtpub . com/ authors.
`
`[4] - - - - - -- - - - -- - -
`
`Petitioner Apple Inc. - Ex. 1035, p. 4
`
`

`

`Pre ace
`
`Customer Support
`Now that you are the proud owner of a Packt book, we have a number of things to
`help you to get the most from your purchase.
`
`Downloading the Example Code for the Book
`Visit http : //www . packtpub . com/ support, and select this book from the list of titles
`to download any example code or extra resources for this book. The files available
`for download will then be displayed .
`
`The downloadable files contain instructions on how to use them.
`
`Errata
`Although we have taken every care to ensure the accuracy of our contents, mistakes
`do happen. If you find a mistake in one of our books- maybe a mistake in text or
`code -we would be grateful if you would report this to us. By doing this you can
`save other readers from frustration, and help to improve subsequent versions of
`this book. If you find any errata, report tl1em by visiting http : //www. packtpub .
`com/ support, selecting your book, clicking on the Submit Errata link, and entering
`the details of your errata. Once your errata are verified, your submission will be
`accepted and the errata are added to the list of existing errata. The existing errata can
`be viewed by selecting your title from http : //www. packtpub. com/support.
`
`Questions
`You can contact us at questions@packtpub . com if you are having a problem with
`some aspect of the book, and we will do our best to address it.
`
`(5) - -- - - - - - -- -- -
`
`Petitioner Apple Inc. - Ex. 1035, p. 5
`
`

`

`Introduction to Mashups
`
`Mashups, more specifically ca1led web application hybrids by Wikipedia, have been
`an exciting trend in web applications in recent years. Web mashups are exactly what
`they sound like - web applications that merge data from one or more sources and
`present them in new ways. Very often, the data owners encourage and facilitate
`third parties to use the data. In many cases, this facilitation is made possible by
`the data owners providing application programming interfaces (API) to their data.
`These APis follow standard web service protocols and can be implemented quickly
`and easily in a variety of programming languages, including PHP. New, innovative
`mashups, made by individuals that combine data from traditionally unlikely
`pairings are popping up every day.
`
`One example is the Wii Seeker site. When the Nintendo Wii launched in November
`2006, many knew there would be shortages. The object of the Wii Seeker site is to
`help people find Wiis by combining expected initial shipment information to Target
`stores and Google Maps. A marker on a Google Map represented a Target retail
`store. If the user clicked on the marker they would see information about the store
`such as the address. They would also see the number of Wiis the store was expected
`to have on launch day. By representing numerical inventory data on a map, a user
`could see Target stores near their location and plan their store visits on launch day to
`maximize their chances of actually finding a Wii.
`
`After the Nintendo Wii was launched, the site reinvented itself by adding auction
`information from eBay and product information from Amazon. They also added
`additional chain retail stores like Circuit City and Walmart. Instead of seeing
`Nintendo Wii inventory information on each store, the site now allows visitors to
`post notes for each other about the store's inventory.
`
`Petitioner Apple Inc. - Ex. 1035, p. 7
`
`

`

`---
`
`introduction to Mashups
`
`'~jifflndnear.bymet1
`
`"911.tWl\'-flllla?
`...(ilf'Wllllf•l
`~ ~
`f h•doWi wlWiAl:cenariMcl
`
`fiittJaa>OWlt~SOl;E
`WSSWIGMlf.SW,NY.SfJ>J
`
`.~W 4 -Glme~ -
`
`Another mashup example is Astrolicio.us. This site queries data feeds from sites like
`Digg.com, Google News, and Google Videos and presents it to the user on one page.
`By combining data feeds, the site's creator has made a portal of current astronomy
`news for visitors.
`
`0UclO.US•A~~-•truaofflyMdJ41K.t,'--'"'ChW.tlllld~ 0.CV..i.Ll'ttpholMilomtlwlillbblitSptetT~.U.WulaA~Npo,blK,t,iMWt.toulCU, .-d'Mll'QSt
`
`SIWS Wffl IN. 1;«eOll191tY d °'9'1 w. his( lhoto 1-p MtJOOOffl'fw»HtocnC,oogk lllld Ii.., 51Cn ~ -.hnctwq hffl deuoo.H $pp P!9 Pe '9dfot~ 4151
`n....._,._,.,~
`Ami!Ifllf AMNMm!Y Silf:
`a.. • ....i .... _,___,,._,.
`~ J •N •~
`
`• r,,.,.~F-1"'1.,~·lllt_Jiw,,,I~
`• -~ ..... J"'--,a-E-.PIIO•..._...,.,_Sp:,c,l~\l'"· ..... 1'Jt.Jlll7 ........
`l"--.~-,......,.19♦-_""" _____ ~~-
`
`~.,..,~-...-"'°"'_.....,,
`t'h'!!i:svn
`,._....,..._~~--..~,.._n.._,.T• ~..._.. 1'
`• !MPl'll!9!9"'1.....,....,,>11'W!NMfit::r->"'$!Wl1>V,P,r~t
`/lo>-,. . . (),.,a.---.__,.._., ... ~ ... ......,..-~--(cid:173)
`_,.....,,..._,._""9a,.Ll'I ..... 1'1.3N7M--al-'6flll-•.___ ........
`' "WxrrP:t•twca· Dece
`
`--...~~_.., __ Ld,_...._.,_......"" __ __
`S-0,,ilJ'.,._,___,.....,o..._~~u.~ ......... ,~
`._ __ d_.,......_,....._ ................... , T.UCl..4--..,-
`• ...._....._uwo-.~~~~,...._
`. . . . . . . . . , . . . . , . _~~U . . . , .L _ _ Lab_.,...,__,.,, _
`
`[ 8]
`
`Astronomy Video •
`
`DfooonSoace
`
`·~~
`....... -..,_~ """ ........... _... __ ~-w.-
`...,.._...,__..,._...,.~_.,...,_. .,,_....,._,._•-T(cid:173)
`• t~ro-A
`;a,n,,,...,,~-°"""'.NQ_I_,,
`__________ ...,,.__Qrl> ...... lflll.. _ _ _ .~ - - -
`--~-------.~ 1,_~r--• .......... __,,.__,,.,,,
`.__..,....,_~-----..-.w-,cw...
`• ~..,c-,.,c.,Qe•J-,;-,,.,-, . . . . , , .~
`"-S.0.9-~--....--...., .......... _ .. ..,..
`•tv1,.~---.,....,. _
`_...,.._.,.. _________ _
`.-.......-.-. .... ·kwflll-••--....---.,.,,,...,,.,_.
`a..~~cw-...ar-...•~.,....,-.oiui-......,
`• ~,....,.,_,.~-:,,,-r•1e.q~
`.......,_~ .. --····~Ma--.. .00 ......... ~~~0'
`.....,9!1E,-.TlffN<IMCll'ltCITOOIW'h1AIOMNA9'9'0,..__ ...... MoNM
`...... .,....Clilr~illl~I.
`, .... _._.._,_,_Mt,M'\~---•----...-.-~ ....
`• ..._. frrmee tr■tectHUbleAeecsl....,,,.._..,.. . . . . ,r,
`_ . , . ... _ _ _ _ . _ , , . . _ . . . . ,DOO . . . . . ~•-!i9!0•illl00,....,
`~Jl'VI---•...,. _____ ... ___ ,_,.,..,
`~s-,-...1:r.,....~
`
`_____ ._,.,_, _ _ e l~ t l ............... _.,..,,. _ _ _.,,.
`
`..... ~
`-,-.-.. -~----•----.-... -____ _..
`Astronomy News
`w.,..,..,,.....,, ......
`• ..,
`-. ~!~------~·~~
`..,,___,_,..,,__ __ -,e,_..,..,.__~_.._.
`__,,,..,.....,_.,..,_,_, _ _..,. _
`io.11 .. .___.,._.,..,__o1._....,._..... .. _ _ _
`_Tlo9 __ ..... ..__~---------ol•(cid:173)
`,,. __ '"""""'g1 ..... _..,.,,~~~~-·»-
`-• !'tlmMlPDF< Dsmfr-#aleN...,,,._
`---..-~---~------..NAS,\-1,
`~-......... ----~-..-..
`-. ..,,., ____ ..,.,.,,.
`._ ............ .,,.., ............. ~~ ......... ~-.......
`-• NMNIWP-Mee.....,,l.,J-e•t1mr-w • fiolcnei;...,,-,.,....
`............. ~-~==--...... --... .---..--
`
`Petitioner Apple Inc. - Ex. 1035, p. 8
`
`

`

`011 U1e ho me page, the user can quickly scan items that may interest them. For news,
`the user is given bullet points for each news item containing the headline and a
`synopsis. For videos, the user is shown a thumbnail. If a user clicks on a link, they
`are taken to the source of the article or video. This site is clean, simple, and full of
`information . It is also quite easy to make using the APls of the sources. It probably
`did not take the s ite creator more than an afternoon to go from the s tart of coding
`to launch.
`
`01
`
`ter 1
`
`Web 2.0 and Mashups
`How, in just a few short years, have mashups suddenly sprung up everywhere? The
`story leads back to jus t a few years ago. After the technology industry's financial
`bubble collapsed in 2001, internet firms regrouped and redefined themselves. There
`were business lessons to be learned, technologies to be re-evaluated, and people's
`perceptions had changed. By the middle of the decade, many trends and differences
`became clear. The term "Web 2.0" started to surface, to draw separation between new
`s ites and sites that gained popula rity in the late Nineties. The term was vague and
`seemed suspiciously gimmicky at first. However, the differences between old and
`ne w were real. They were not just historical and chronological. Sites like Google,
`YouTube, and Flickr demonstrated new approaches to building a web business.
`These sites often had s imple interfaces, fully e mbraced web services, and re turned a
`lot of control to the user. Many of these sites relied solely on their users for content.
`In September 2005, technology publisher Tim O'Reilly wrote an article entitled
`What ls Web 2.0 to succinctly declare the traits of Web 2.0 versus 1.0 sites. There were
`two characteristics that were direct catalysts for the growth of mashups:
`
`•
`Importance of Data
`• User Communities
`
`Importance of Data
`The first characteristic is the importance of data. The question of who owned data
`and what they choose to do with the data became a big issue. Why in the world
`would companies invest millions of dollars to gather their data and U1eir da tabase
`syste ms, but then freely give it away for others to use? The answer is by opening
`their systems, mashup developers help increase the reach of the data owners.
`
`O'Reilly used the example of MapQuest to illustrate tlus. MapQuest was the leader
`in mapping in the mid to late nineties. H ow ever, U1eir system was closed and did not
`allow outside parties to do anything with their data. In the early Aughts, mapping
`sites started to leverage tlus weakness. Yahoo! Maps, Microsoft Virtual Earth, and
`Google Maps entered the market, and each one had APfs. Despite the huge
`
`[9) -
`
`-
`
`- - -- - - - - - -- -
`
`Petitioner Apple Inc. - Ex. 1035, p. 9
`
`

`

`Introduction to Mashups
`
`early market lead, MapQuest quickly !os;: d) bigger players with open data. There
`are many examples like this. Amazon opened up theu data through the Amazon
`Ecommerce Service (ECS). Many mashups haw used this web service to create
`their own store fronts. Amazon gets the sale and gives a percentage to mashup
`developers. This has created many more channels for Amazon to sell their goods
`besides www . amazon . com. Contrast this \\ith a site like BarnesAndNoble.com which
`does not open their data. The only channel that they can sell is through the main
`website. Not only do they lose sales opportunities, but they lack the affiliate loyalty
`that Amazon has.
`
`In our earlier examples, Wii Seeker helps the Target by funneling buyers to stores.
`Wii Seeker in turn, receives adverting revenue and affiliate commissions on their
`site. Google Videos, Google News, and Digg.com get visitors when a user clicks on
`a link from astrolicious.us. Astrolicious.us gets advertising revenue with very little
`development time invested.
`
`User Communities
`The second characteristic is that user added data is more valuable than we once
`thought. User product reviews on ecommerce sites are nothing new. Neither are
`web forums. However, itis how sites are u sing this information, and who owns
`the data, that is becoming important. Movie rental site Netflix has always allowed
`users to rate movies they have watched. Based on these recommendations, Netflix
`will suggest other movies you might like. Recently, they have added a new social
`networking feature called "Friends", where you can see how your friends have rated
`movies and what they are watching. One feature of Friends is compatibility ratings.
`Comparing both you and your friends' recommendations, Netflix comes up with a
`percentage of your shared movie tastes.
`
`Other sites are completely dependent on user-added data. YouTube and Flickr
`provide video and picture hosting, respectively, for free. Their widespread adoption,
`though, is not simply from hosting. Before Flickr, there were many sites that hosted
`images for free. That was nothing new. The difference, again, is what both sites do
`with user-added data. Both sites provide social networking features. You can leave
`your ratings and comments on a hosted item and you can subscribe to a person's
`profile. Anytime tl'lat person uploads something, you will be notified of the new
`content. Both sites also allow folksonom.ic tagging, which basically lets uploaders
`describe the content witl1 their own keywords. Visitors can use these keywords to
`search when they are looking for content. Tagging has proven to be an incredible aid
`for search algorithms.
`
`- - - - - - - - - - - - -- - [ 10] - - - - -- - - - - - - -- --
`
`Petitioner Apple Inc. - Ex. 1035, p. 10
`
`

`

`Thus, it is these two characteristics of new sites that have allowed small web
`developers to appear much bigger. Backed with data from large internet presences,
`mashup developers create usage channels that data owners could not have foreseen,
`or been restricted by business rules.
`
`Cl
`
`ter 1
`
`How We Will Create Mash ups
`Technologically, the mashup phenomenon could not have happened without
`website owners making a clean separation between the data that is used on their
`sites, and the actual presentation of the data. This has always been a goal in
`computer application development, and therefore, it is no surprise that website
`and web application architecture have progressed towards this stage ever since the
`World Wide Web was created. This separation is quickly turning the World Wide
`Web into what is known as the semantic web-a philosophy where web content is
`presented not only for humans to read, but also in a way that can be easily processed
`by software and machines. We have moved from static pages to database-driven
`sites, from presentational FONT tags to cascading style sheets. It is perhaps inevitable
`that the web has become an environment that fosters mashup development.
`
`Data sources of mashups are vru:ied. Often, data owners provide mashup developers
`access to their data through official application programming interfaces. As we are
`talking about web applications, these APis utilize web services, which come in a
`variety of protocols. Really Simple Syndication (RSS), a family of formats to present
`data, is another common data source that has helped spur tlle mashup adoption.
`When official methods are unavailable, developers become really creative in getting
`data. Screen scraping is a method that has always been around. Regardless of the
`method, mashups also deal with a variety of data formats. While mashups can be
`sin1ple to create, a mashup developer must be flexible and well-rounded in the
`knowledge of their tools.
`
`Open-source software is particularly well-suited in this mashup environment. The
`Apache and PHP combination makes for fast development. Being open source,
`developers are constantly and quickly adding new features to keep up with the web
`service world.
`
`This book will take a look at how to use common data sources with PHP. Most
`official APis are based on the big three web service protocols-XML-RPC, REST, and
`SOAP. We will of course look at these p rotocols. APis and raw web service requests
`by hand, of course, are not the only way to retrieve data. We will look at using
`third-party libraries to interface with some popular sites. Feeds are also an important
`data source which we will use. By giving you a broad overview of tl1e tools
`used in the mashup world, you should be able to start developing your own
`mashups quickly.
`
`- - - -- -- - --
`
`- - --
`
`[ 11] - - - - -- - - -- - - --
`
`Petitioner Apple Inc. - Ex. 1035, p. 11
`
`

`

`Introduction to Mashups
`
`More Mashups
`For more examples and inspirations, check out these popular mashups:
`
`• Popurls (popur ls . com)- Collects URLs from popular sites.
`• Housingmaps.com (www. housingmaps. com)-Plots housing listings from
`Craigslist on to a map.
`• Keegy (us . keegy . com)-A site that aggregates news from different sources
`and personalizes it for the reader.
`• Alkemis (local . alkemi s. com)-Aggregates and maps all sorts of data, for
`example, pictures and live web cams, in selected cities.
`• Gametripping.com (www. garnet ripping. com) -A collection of satellite and
`Flickr photos of baseball stadiums.
`
`- - -- - - -- - - - -- - - [12) - - - - - -- - - - - -- - -
`
`Petitioner Apple Inc. - Ex. 1035, p. 12
`
`

`

`London Tube Photos
`
`Project Overview
`What Plot London Tube station locations on Google Maps. When a
`station's icon is clicked, search Flickr for photos of the station
`and display them on the map.
`Protocols Used REST
`Data Formats XML, RDF, JSON
`Tools Featured SPARQL, RDF API for PHP, XMLHttpRequest Object AJA\)
`APls Used Google Maps, Flickr Services
`
`We have used a lot of techniques and APls in our projects. For the most part, things
`have mashed up together fairly easily with minimal issues. One of the reasons for
`this is that we have re lied on PHP to create the presentation for our mashups. This
`simplifies the architecture of our mashup a nd gives us a lot of control. Many APis,
`though, are JavaScript-based, and hence, any mashup will rely heavily on JavaScript
`for the presentation. This introduces a lot of other issues that we will have to deal
`with. In this mashup, we will encounter some of those issues, and look at ways to
`work around them. Pl IP will remain an important part of our mashup, but take a
`smaller role than it has played so far.
`
`In this mash up, we w ill present a geographically-centric way to present pictures
`from the photo-sharing site, Flickr. When a user loads our application, they will
`be presented with a Google map of London. A pull-down menu of all the London
`Tube lines w ill be available. The user w ill select a line, and the application will load
`all of the Tube stations onto the map and display them with markers. If the user
`clicks on a marker, the name of the station will appear as a popup on the map. In the
`background, a search query against Flickr will be initiated, and any pictures of the
`station will appear in the popup as a thumbnail. Clicking on the photo will take the
`user to the photo's page on Flickr.
`
`Petitioner Apple Inc. - Ex. 1035, p. 203
`
`

`

`London Tube Photos
`
`JavaScript is not the only new tool that we will integrate into our toolbox. Before we
`can work on the user interface, we will need to populate data into our application.
`We need to find out which Tube stations belong to which line, and where those
`stations are located. Many websites have one of those things or the other, but not
`both. If we used them, not only are we dealing with two data sources, but we'd
`have to resort to screen scraping again. Fortunately, there is one place that has both
`pieces of information. This source is in Resource Description Format, an XML format
`that we glanced at, earlier in Chapter 3. In this mashup, we will take a much closer
`look at RDF, and how to extract data from it using a young query language called
`SPARQL (SPARQL Protocol and RDF Query Language).
`
`Preliminary Planning
`Note that it would not have been wise to pre-plan mashups, but this application will
`be much m ore complex, and will definitely require some forethought. Previously,
`our APis have worked in the background delivering data. We use PHP to re trieve
`data from an API, receive it in whatever format it gives us, format the response into
`either ITT~IL output to the user, or another format to retrieve data from another APL
`PHP gives us a lot of flexibility in the way o ur application is designed.
`
`This time, one API, Google Maps, is a JavaScript APL Another, Flickr Services, is still
`server based. The two canno t talk directly to each other, and we are going to have to
`play witlun the rules set by each one. More than ever, we are going to have to take a
`close look a t everything before we attempt to write a single line of code.
`
`At th.is point, ti-us is what we know:
`
`1. We need to find a data source for the Tube stations. We need to find the
`names of the stations in each line, and some piece of information we can use
`to geographically identify it on a map. The latter will be dictated more by the
`capability of the tool o n the receiving end. In other words, as we are going
`to use Google Maps, we are going to have to see how Google Maps p laces
`markers on its map, and we will have to massage the source data to Google
`Map's liking.
`2. We will use the Google Maps API solely for presentation. JavaScript cannot
`call PHP functions or server side code directly, nor can PI IP call JavaScript
`functions. However, we can use PHP to w rite JavaScript code on the fly,
`and we do have the JavaScript XMLHttpRequest object available. The
`XMLHt t pRequest object can call server resources by sending a GET or POST
`request without the page reloading. We can then d ynamically update the
`page in front of the user. This process is popularly known as AJAX, or
`Asynchronous JavaScript and XML.
`
`- - -- - - - - - -- - - - -(204] - - - - - - - - -- - - - - -
`
`Petitioner Apple Inc. - Ex. 1035, p. 204
`
`

`

`Cha ter 6
`
`Looking at the Flickr Service's documentation page at
`http ://www. flickr . com/services/api/, we find we have an
`incredible variety of formats and protocols to choose from. All of our
`major request protocols, REST, XML-RPC, and SOAP are there. In
`addition to these, we can have our choice of JSON or serialized PHP for
`the response format. There is also a huge list of language kits already
`built. You can use these kits to call Flickr directly from PHP, Cold Fusion,
`Java, etc. Unfortunately, JavaScript is not on that list.
`
`Finding Tube Information
`Our biggest problem is finding the initial Tube data. Without this first step, we
`cannot create our mashup. The first logical step is to look at the official Tube site at
`http://www. tfl. gov. uk/tube/. Poking around, we see a lot of colorful maps of the
`lines, but nothing machine readable - no feeds and not even a pull-down menu with
`stations. It looks like the official site will be a poor choice as a source of data.
`
`We should look at the Google Maps API to see what it can even accept.
`The documentation homepage is at http://www. google. com/ apis/maps/
`documentation/. This site has many examples as well as class, methods, and
`properties references. Looking around, we see that a Google Map marker is
`represen ted by a class called GMarker. There are many examples on how to create a
`marker like so:
`marker= new GMarker(point};
`map.addOver lay(marker };
`
`That's wonderful, but what is a point that is passed to the GMarker class? Looking at
`the docu mentation reference, we find that it is a GLatLng object, which is an object
`that has two simple properties - the longitude of the marker and the latitude of the
`marker. It looks like the most direct way to c