dpc 2007 my first mashup (cal evans)
DESCRIPTION
Dutch PHP Conference 2007TRANSCRIPT
![Page 1: DPC 2007 My First Mashup (Cal Evans)](https://reader035.vdocument.in/reader035/viewer/2022062405/5565a324d8b42a083a8b4863/html5/thumbnails/1.jpg)
My First Mashup
Cal Evans ([email protected])Zend Technologies, Inc.Editor-in-Chiefhttp://devzone.zend.com
![Page 2: DPC 2007 My First Mashup (Cal Evans)](https://reader035.vdocument.in/reader035/viewer/2022062405/5565a324d8b42a083a8b4863/html5/thumbnails/2.jpg)
http://devzone.zend.com
What We Will Cover
This session will show you some of the issues you will deal with in consuming web services from your web page.
We will create the same Mashup three times, once in PHP and then twice in Javascript.
![Page 3: DPC 2007 My First Mashup (Cal Evans)](https://reader035.vdocument.in/reader035/viewer/2022062405/5565a324d8b42a083a8b4863/html5/thumbnails/3.jpg)
http://devzone.zend.com
Backstory
Why?
![Page 4: DPC 2007 My First Mashup (Cal Evans)](https://reader035.vdocument.in/reader035/viewer/2022062405/5565a324d8b42a083a8b4863/html5/thumbnails/4.jpg)
http://devzone.zend.com
Our First Mashup
Combine APIs from UPS and Google
Allow a user to not only track a package via UPS but also to see it’s progress plotted on a map.
It’s a cute mashup and almost useful
![Page 5: DPC 2007 My First Mashup (Cal Evans)](https://reader035.vdocument.in/reader035/viewer/2022062405/5565a324d8b42a083a8b4863/html5/thumbnails/5.jpg)
http://devzone.zend.com
UPS Access Key
Requires a sacrifice of a small furry animal(not really)
1. Start Herehttp://www.ups.com/content/us/en/bussol/offering/technology/automated_shipping/online_tools.html
2. Get an online account3. Get an access key4. Get a key for the service you want to
access5. Find the documentation for the service
![Page 6: DPC 2007 My First Mashup (Cal Evans)](https://reader035.vdocument.in/reader035/viewer/2022062405/5565a324d8b42a083a8b4863/html5/thumbnails/6.jpg)
http://devzone.zend.com
Message TO UPS<?xml version="1.0"?>
<AccessRequest xml:lang="en-US"><AccessLicenseNumber>YOURACCESSLICENSENUMBER</AccessLicenseNumber><UserId>YOURUSERID</UserId><Password>YOURPASSWORD</Password>
</AccessRequest><?xml version="1.0"?><TrackRequest xml:lang="en-US">
<Request><TransactionReference><CustomerContext>Example 2</CustomerContext><XpciVersion>1.0001</XpciVersion></TransactionReference><RequestAction>Track</RequestAction><RequestOption>activity</RequestOption>
</Request><ShipmentIdentificationNumber>
UPS PACKAGE ID</ShipmentIdentificationNumber>
</TrackRequest>
![Page 7: DPC 2007 My First Mashup (Cal Evans)](https://reader035.vdocument.in/reader035/viewer/2022062405/5565a324d8b42a083a8b4863/html5/thumbnails/7.jpg)
http://devzone.zend.com
Response FROM UPS
Way too verbose to show here. (1 package generated 2,128 lines of XML)
Contains more information than we need for this project
Can be parsed easily thanks to the miracle of SimpleXML in PHP.
$xml = new SimpleXMLElement($x);foreach ($xml->xpath('//Activity') as $y) {
// doStuff()}
![Page 8: DPC 2007 My First Mashup (Cal Evans)](https://reader035.vdocument.in/reader035/viewer/2022062405/5565a324d8b42a083a8b4863/html5/thumbnails/8.jpg)
http://devzone.zend.com
Let’s play with some code
raw.phpA simple program that builds an XML message in a string, transmits it to UPS, and parses the response for display.
![Page 9: DPC 2007 My First Mashup (Cal Evans)](https://reader035.vdocument.in/reader035/viewer/2022062405/5565a324d8b42a083a8b4863/html5/thumbnails/9.jpg)
http://devzone.zend.com
Wasn’t that exciting
Transactions like this are very easy with Zend_Rest_Client
Transactions like this are real easy with SimpleXML
![Page 10: DPC 2007 My First Mashup (Cal Evans)](https://reader035.vdocument.in/reader035/viewer/2022062405/5565a324d8b42a083a8b4863/html5/thumbnails/10.jpg)
http://devzone.zend.com
GoogleMaps API
The original Mashup API. Easy to use Extremely easy to get approval for We use 2 Google APIs in this
Mashup New-ish Geocoding API Mapping API
![Page 11: DPC 2007 My First Mashup (Cal Evans)](https://reader035.vdocument.in/reader035/viewer/2022062405/5565a324d8b42a083a8b4863/html5/thumbnails/11.jpg)
http://devzone.zend.com
Google Access Key
Easy to get. Visit
http://www.google.com/apis/maps/signup.html
Enter your URL Copy the key they give you and
save it in your code. It’s really that simple.
![Page 12: DPC 2007 My First Mashup (Cal Evans)](https://reader035.vdocument.in/reader035/viewer/2022062405/5565a324d8b42a083a8b4863/html5/thumbnails/12.jpg)
http://devzone.zend.com
Geocode Message TO Google Documentation
http://www.google.com/apis/maps/documentation/#Geocoding_Etc
HTTP Request
http://maps.google.com/maps/geo?key=YOURGOOGLEKEYHERE&q=19200+Stevens+Creek+Blvd+Santa+Clara+CA+95014&output=json
q -- The address that you want to geocode. key -- Your API key. output -- The format in which the output should be generated. The options are xml, kml, csv, or json.
KML, or Keyhole Markup Language, is an XML grammar and format for modeling and storing geographic features such as points, lines, images, and polygons for display in Google Earth™, Google Maps™, and Google Maps for mobile.
![Page 13: DPC 2007 My First Mashup (Cal Evans)](https://reader035.vdocument.in/reader035/viewer/2022062405/5565a324d8b42a083a8b4863/html5/thumbnails/13.jpg)
http://devzone.zend.com
Geocode Message FROM Google{ "name": "1600 Amphitheatre Parkway, Mountain View, CA, USA", "Status": { "code": 200, "request": "geocode" }, "Placemark": [ { "address": "1600 Amphitheatre Pkwy, Mountain View, CA 94043, USA", "AddressDetails": { "Country": { "CountryNameCode": "US", "AdministrativeArea": { "AdministrativeAreaName": "CA", "SubAdministrativeArea": { "SubAdministrativeAreaName": "Santa Clara", "Locality": { "LocalityName": "Mountain View", "Thoroughfare": { "ThoroughfareName": "1600 Amphitheatre Pkwy" }, "PostalCode": { "PostalCodeNumber": "94043" } } } } }, "Accuracy": 8 }, Point: { coordinates: [-122.083739, 37.423021, 0] } } ]}
![Page 14: DPC 2007 My First Mashup (Cal Evans)](https://reader035.vdocument.in/reader035/viewer/2022062405/5565a324d8b42a083a8b4863/html5/thumbnails/14.jpg)
http://devzone.zend.com
Google Map Interface
Gets around the AJAX domain limitation by including Javascript from their server.
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg" type="text/javascript"></script>
<script type="text/javascript">
Simple implementationfunction load() { if (GBrowserIsCompatible()) { var map = new
GMap2(document.getElementById("map")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); } }
</script>
The onload method builds the map<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
![Page 15: DPC 2007 My First Mashup (Cal Evans)](https://reader035.vdocument.in/reader035/viewer/2022062405/5565a324d8b42a083a8b4863/html5/thumbnails/15.jpg)
http://devzone.zend.com
First (real) Version
Traditional forms based POST
All interaction is done at the server level
Seriously OLD SCHOOL Style Mashup.
![Page 16: DPC 2007 My First Mashup (Cal Evans)](https://reader035.vdocument.in/reader035/viewer/2022062405/5565a324d8b42a083a8b4863/html5/thumbnails/16.jpg)
http://devzone.zend.com
First Version (PHP)
GoogleMapAPI.class.phpBy: Monte Ohrthttp://www.phpinsider.com/php/code/GoogleMapAPI/Handles all of the interaction with Google and builds all necessary JavaScript to display our map and points
ups_tracker.class.phpBy Sergey Shilkohttp://www.phpclasses.org/browse/package/3031.htmlHandles all of the interaction with UPS.
![Page 17: DPC 2007 My First Mashup (Cal Evans)](https://reader035.vdocument.in/reader035/viewer/2022062405/5565a324d8b42a083a8b4863/html5/thumbnails/17.jpg)
http://devzone.zend.com
Let’s play with some code
trackpak.phpA full-featured version of our mashup that will query UPS for the package activity, strip out the cities, geocode them and plot them on a GoogleMap. This version uses the default output options from the chosen classes which results in very little custom code.
![Page 18: DPC 2007 My First Mashup (Cal Evans)](https://reader035.vdocument.in/reader035/viewer/2022062405/5565a324d8b42a083a8b4863/html5/thumbnails/18.jpg)
http://devzone.zend.com
Wasn’t that exciting
Using pre-packaged objects made this easy to write.
BAD PRACTICE: Don’t modify someone else’s code, subclass the class and extend it with your code.
BAD PRACTICE: Don’t output HTML directly from your class. Use a decorator class.
![Page 19: DPC 2007 My First Mashup (Cal Evans)](https://reader035.vdocument.in/reader035/viewer/2022062405/5565a324d8b42a083a8b4863/html5/thumbnails/19.jpg)
http://devzone.zend.com
Second Version
SJAXSo that we can easily track what is going on, we don’t use Asynchronous calls
Web 1.9To be truly Web 2.0 you have to use Async. (and you have to have rounded corners.)
ProxiedSince AJAX calls can only be made to the server that served the page, all calls off server have to go through a proxy.
![Page 20: DPC 2007 My First Mashup (Cal Evans)](https://reader035.vdocument.in/reader035/viewer/2022062405/5565a324d8b42a083a8b4863/html5/thumbnails/20.jpg)
http://devzone.zend.com
Second Version (JavaScript)
Prototype.jshttp://www.prototypejs.org/All AJAX and some extra utilities that just make life easier.
Procedural in nature.To make it easy to follow The Javascript code is mostly procedural.
![Page 21: DPC 2007 My First Mashup (Cal Evans)](https://reader035.vdocument.in/reader035/viewer/2022062405/5565a324d8b42a083a8b4863/html5/thumbnails/21.jpg)
http://devzone.zend.com
Second Version (PHP)
Proxy.php Procedural
This is a single use design. It’s only purpose is to serve this demo. It’s basically one big switch.
![Page 22: DPC 2007 My First Mashup (Cal Evans)](https://reader035.vdocument.in/reader035/viewer/2022062405/5565a324d8b42a083a8b4863/html5/thumbnails/22.jpg)
http://devzone.zend.com
Let’s play with some code
SJAX.phpFirst predominantly JavaScript version of the Mashup. This version talks to the proxy to get it’s data and processes it accordingly.
![Page 23: DPC 2007 My First Mashup (Cal Evans)](https://reader035.vdocument.in/reader035/viewer/2022062405/5565a324d8b42a083a8b4863/html5/thumbnails/23.jpg)
http://devzone.zend.com
Wasn’t that exciting
Separation of logic achieved by moving data processing duties to proxy.php and using JavaScript for the display logic.
Takes the X out of SJAX because we use JSON. (But SJAJ doesn’t sound as cool)
Synchronous is harder than Old School but still easy to read because it’s single threaded.
![Page 24: DPC 2007 My First Mashup (Cal Evans)](https://reader035.vdocument.in/reader035/viewer/2022062405/5565a324d8b42a083a8b4863/html5/thumbnails/24.jpg)
http://devzone.zend.com
Third Version
Put the A back in AJAXWatch the cross-browser nuttiness.
Web 2.0Or as close to Web 2.0 as I get. (I don’t do rounded corners)
Still Proxied
![Page 25: DPC 2007 My First Mashup (Cal Evans)](https://reader035.vdocument.in/reader035/viewer/2022062405/5565a324d8b42a083a8b4863/html5/thumbnails/25.jpg)
http://devzone.zend.com
Third Version (JavaScript)
Prototype.jshttp://prototype.conio.net/All AJAX and some utilities
Almost fully Object Oriented Javascript.
Most AJAX is Asynchronous calls.
![Page 26: DPC 2007 My First Mashup (Cal Evans)](https://reader035.vdocument.in/reader035/viewer/2022062405/5565a324d8b42a083a8b4863/html5/thumbnails/26.jpg)
http://devzone.zend.com
Let’s play with some code
AJAX.phpSecond JavaScript version of the Mashup. This version talks to the proxy to get it’s data and processes it accordingly but in an asynchronous manner. This has ramifications in some browsers. (hint: I.E.)
![Page 27: DPC 2007 My First Mashup (Cal Evans)](https://reader035.vdocument.in/reader035/viewer/2022062405/5565a324d8b42a083a8b4863/html5/thumbnails/27.jpg)
http://devzone.zend.com
Wasn’t that exciting
I.E. returns the ajax calls in random order. This means that we have to be able to handle the data in whatever order it comes back from the server.
For some reason this is not an issue with FireFox.
To solve this problem we use PointManager class which is a Singleton Pattern.
![Page 28: DPC 2007 My First Mashup (Cal Evans)](https://reader035.vdocument.in/reader035/viewer/2022062405/5565a324d8b42a083a8b4863/html5/thumbnails/28.jpg)
http://devzone.zend.com
Additional Reading
Understanding AJAX: Joshua Eichornhttp://www.amazon.com/gp/explorer/0132216353/2/ref=pd_lpo_ase/104-3004796-3584761?
Web APIs with PHP: Paul Reinheimerhttp://www.amazon.com/Professional-Web-APIs-PHP-Paypal/dp/0764589547/ref=sr_11_1/104-3004796-3584761?ie=UTF8
![Page 29: DPC 2007 My First Mashup (Cal Evans)](https://reader035.vdocument.in/reader035/viewer/2022062405/5565a324d8b42a083a8b4863/html5/thumbnails/29.jpg)
http://devzone.zend.com
Resources
www.programmableweb.com www.prototypejs.org www.ajaxian.com http://therichwebexperience.com/
show_view.jsp?showId=60 http://developer.yahoo.com/ http://devzone.zend.com/public/
view PHP Abstract Podcast
![Page 30: DPC 2007 My First Mashup (Cal Evans)](https://reader035.vdocument.in/reader035/viewer/2022062405/5565a324d8b42a083a8b4863/html5/thumbnails/30.jpg)
http://devzone.zend.com
My First Mashup
Questions?
![Page 31: DPC 2007 My First Mashup (Cal Evans)](https://reader035.vdocument.in/reader035/viewer/2022062405/5565a324d8b42a083a8b4863/html5/thumbnails/31.jpg)
http://devzone.zend.com
Vanity Slide
Cal EvansEditor-in-Chief, DevZoneZend Technologies, Inc.
http://devzone.zend.com
http://www.calevans.com