DPC 2007 My First Mashup (Cal Evans)

60 %
40 %
Information about DPC 2007 My First Mashup (Cal Evans)
inc

Published on June 20, 2007

Author: dpc

Source: slideshare.net

Description

Dutch PHP Conference 2007

My First Mashup Cal Evans (cal@zend.com) Zend Technologies, Inc. Editor-in-Chief 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.

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.

Backstory Why?

Why?

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

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

UPS Access Key Requires a sacrifice of a small furry animal (not really) Start Here http://www.ups.com/content/us/en/bussol/offering/technology/automated_shipping/online_tools.html Get an online account Get an access key Get a key for the service you want to access Find the documentation for the service

Requires a sacrifice of a small furry animal (not really)

Start Here http://www.ups.com/content/us/en/bussol/offering/technology/automated_shipping/online_tools.html

Get an online account

Get an access key

Get a key for the service you want to access

Find the documentation for the service

Message TO UPS <?xml version=&quot;1.0&quot;?> <AccessRequest xml:lang=&quot;en-US&quot;> <AccessLicenseNumber> YOURACCESSLICENSENUMBER </AccessLicenseNumber> <UserId> YOURUSERID </UserId> <Password> YOURPASSWORD </Password> </AccessRequest> <?xml version=&quot;1.0&quot;?> <TrackRequest xml:lang=&quot;en-US&quot;> <Request> <TransactionReference> <CustomerContext> Example 2 </CustomerContext> <XpciVersion>1.0001</XpciVersion> </TransactionReference> <RequestAction>Track</RequestAction> <RequestOption>activity</RequestOption> </Request> <ShipmentIdentificationNumber> UPS PACKAGE ID </ShipmentIdentificationNumber> </TrackRequest>

<?xml version=&quot;1.0&quot;?>

<AccessRequest xml:lang=&quot;en-US&quot;>

<AccessLicenseNumber> YOURACCESSLICENSENUMBER </AccessLicenseNumber>

<UserId> YOURUSERID </UserId>

<Password> YOURPASSWORD </Password>

</AccessRequest>

<?xml version=&quot;1.0&quot;?>

<TrackRequest xml:lang=&quot;en-US&quot;>

<Request>

<TransactionReference>

<CustomerContext> Example 2 </CustomerContext>

<XpciVersion>1.0001</XpciVersion>

</TransactionReference>

<RequestAction>Track</RequestAction>

<RequestOption>activity</RequestOption>

</Request>

<ShipmentIdentificationNumber>

UPS PACKAGE ID

</ShipmentIdentificationNumber>

</TrackRequest>

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() }

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() }

Let’s play with some code raw.php A simple program that builds an XML message in a string, transmits it to UPS, and parses the response for display.

raw.php

A simple program that builds an XML message in a string, transmits it to UPS, and parses the response for display.

Wasn’t that exciting Transactions like this are very easy with Zend_Rest_Client Transactions like this are real easy with SimpleXML

Transactions like this are very easy with Zend_Rest_Client

Transactions like this are real easy with SimpleXML

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

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

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.

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.

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.

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.

Geocode Message FROM Google { &quot;name&quot;: &quot;1600 Amphitheatre Parkway, Mountain View, CA, USA&quot;, &quot;Status&quot;: { &quot;code&quot;: 200, &quot;request&quot;: &quot;geocode&quot; }, &quot;Placemark&quot;: [ { &quot;address&quot;: &quot;1600 Amphitheatre Pkwy, Mountain View, CA 94043, USA&quot;, &quot;AddressDetails&quot;: { &quot;Country&quot;: { &quot;CountryNameCode&quot;: &quot;US&quot;, &quot;AdministrativeArea&quot;: { &quot;AdministrativeAreaName&quot;: &quot;CA&quot;, &quot;SubAdministrativeArea&quot;: { &quot;SubAdministrativeAreaName&quot;: &quot;Santa Clara&quot;, &quot;Locality&quot;: { &quot;LocalityName&quot;: &quot;Mountain View&quot;, &quot;Thoroughfare&quot;: { &quot;ThoroughfareName&quot;: &quot;1600 Amphitheatre Pkwy&quot; }, &quot;PostalCode&quot;: { &quot;PostalCodeNumber&quot;: &quot;94043&quot; } } } } }, &quot;Accuracy&quot;: 8 }, Point: { coordinates: [-122.083739, 37.423021, 0] } } ] }

{

&quot;name&quot;: &quot;1600 Amphitheatre Parkway, Mountain View, CA, USA&quot;,

&quot;Status&quot;: {

&quot;code&quot;: 200,

&quot;request&quot;: &quot;geocode&quot;

},

&quot;Placemark&quot;: [

{

&quot;address&quot;: &quot;1600 Amphitheatre Pkwy, Mountain View, CA 94043, USA&quot;,

&quot;AddressDetails&quot;: {

&quot;Country&quot;: {

&quot;CountryNameCode&quot;: &quot;US&quot;,

&quot;AdministrativeArea&quot;: {

&quot;AdministrativeAreaName&quot;: &quot;CA&quot;,

&quot;SubAdministrativeArea&quot;: {

&quot;SubAdministrativeAreaName&quot;: &quot;Santa Clara&quot;,

&quot;Locality&quot;: {

&quot;LocalityName&quot;: &quot;Mountain View&quot;,

&quot;Thoroughfare&quot;: {

&quot;ThoroughfareName&quot;: &quot;1600 Amphitheatre Pkwy&quot;

},

&quot;PostalCode&quot;: {

&quot;PostalCodeNumber&quot;: &quot;94043&quot;

}

}

}

}

},

&quot;Accuracy&quot;: 8

},

Point: {

coordinates: [-122.083739, 37.423021, 0]

}

}

]

}

Google Map Interface Gets around the AJAX domain limitation by including Javascript from their server. <script src=&quot;http://maps.google.com/maps?file=api&amp;v=2&amp;key= abcdefg &quot; type=&quot;text/javascript&quot;></script> <script type=&quot;text/javascript&quot;> Simple implementation function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById(&quot;map&quot;)); map.setCenter(new GLatLng(37.4419, -122.1419), 13); } } </script> The onload method builds the map <body onload=&quot;load()&quot; onunload=&quot;GUnload()&quot;> <div id=&quot;map&quot; style=&quot;width: 500px; height: 300px&quot;></div> </body>

Gets around the AJAX domain limitation by including Javascript from their server.

<script src=&quot;http://maps.google.com/maps?file=api&amp;v=2&amp;key= abcdefg &quot; type=&quot;text/javascript&quot;></script>

<script type=&quot;text/javascript&quot;>

Simple implementation

function load() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById(&quot;map&quot;)); map.setCenter(new GLatLng(37.4419, -122.1419), 13); } }

</script>

The onload method builds the map

<body onload=&quot;load()&quot; onunload=&quot;GUnload()&quot;>

<div id=&quot;map&quot; style=&quot;width: 500px; height: 300px&quot;></div>

</body>

First (real) Version Traditional forms based POST All interaction is done at the server level Seriously OLD SCHOOL Style Mashup.

Traditional forms based POST

All interaction is done at the server level

Seriously OLD SCHOOL Style Mashup.

First Version (PHP) GoogleMapAPI.class.php By: Monte Ohrt http://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.php By Sergey Shilko http://www.phpclasses.org/browse/package/3031.html Handles all of the interaction with UPS.

GoogleMapAPI.class.php By: Monte Ohrt http://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.php By Sergey Shilko http://www.phpclasses.org/browse/package/3031.html Handles all of the interaction with UPS.

Let’s play with some code trackpak.php A 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.

trackpak.php

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

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.

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.

Second Version SJAX So that we can easily track what is going on, we don’t use Asynchronous calls Web 1.9 To be truly Web 2.0 you have to use Async. (and you have to have rounded corners.) Proxied Since AJAX calls can only be made to the server that served the page, all calls off server have to go through a proxy.

SJAX So that we can easily track what is going on, we don’t use Asynchronous calls

Web 1.9 To be truly Web 2.0 you have to use Async. (and you have to have rounded corners.)

Proxied Since AJAX calls can only be made to the server that served the page, all calls off server have to go through a proxy.

Second Version (JavaScript) Prototype.js http://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.

Prototype.js http://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.

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.

Proxy.php

Procedural This is a single use design. It’s only purpose is to serve this demo. It’s basically one big switch.

Let’s play with some code SJAX.php First predominantly JavaScript version of the Mashup. This version talks to the proxy to get it’s data and processes it accordingly.

SJAX.php

First predominantly JavaScript version of the Mashup. This version talks to the proxy to get it’s data and processes it accordingly.

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.

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.

Third Version Put the A back in AJAX Watch the cross-browser nuttiness. Web 2.0 Or as close to Web 2.0 as I get. (I don’t do rounded corners) Still Proxied

Put the A back in AJAX Watch the cross-browser nuttiness.

Web 2.0 Or as close to Web 2.0 as I get. (I don’t do rounded corners)

Still Proxied

Third Version (JavaScript) Prototype.js http://prototype.conio.net/ All AJAX and some utilities Almost fully Object Oriented Javascript. Most AJAX is Asynchronous calls.

Prototype.js http://prototype.conio.net/ All AJAX and some utilities

Almost fully Object Oriented Javascript.

Most AJAX is Asynchronous calls.

Let’s play with some code AJAX.php Second 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.)

AJAX.php

Second 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.)

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.

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.

Additional Reading Understanding AJAX: Joshua Eichorn http://www.amazon.com/gp/explorer/0132216353/2/ref=pd_lpo_ase/104-3004796-3584761 ? Web APIs with PHP: Paul Reinheimer http://www.amazon.com/Professional-Web-APIs-PHP-Paypal/dp/0764589547/ref=sr_11_1/104-3004796-3584761?ie=UTF8

Understanding AJAX: Joshua Eichorn http://www.amazon.com/gp/explorer/0132216353/2/ref=pd_lpo_ase/104-3004796-3584761 ?

Web APIs with PHP: Paul Reinheimer http://www.amazon.com/Professional-Web-APIs-PHP-Paypal/dp/0764589547/ref=sr_11_1/104-3004796-3584761?ie=UTF8

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

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

My First Mashup Questions?

Questions?

Vanity Slide Cal Evans Editor-in-Chief, DevZone Zend Technologies, Inc. http://devzone.zend.com http://www.calevans.com [email_address]

Cal Evans

Editor-in-Chief, DevZone

Zend Technologies, Inc.

http://devzone.zend.com

http://www.calevans.com

[email_address]

Add a comment

Related presentations

Related pages

mashup | Jansch.nl

My First Mashup. July 27th, 2007 by Ivo. I have been inspired by Cal Evans' mashup experiment, ... my own little mashup. Version 1. The first version, ...
Read more

DPC2007 and Zend UK Business Conference recap | Jansch.nl

DPC2007 and Zend UK Business Conference ... The event was attended by more than 250 people and with speakers such as Cal Evans, ... « My First Mashup.
Read more

UK PHP Conference: The Roundup - LornaJaneLornaJane

2007. UK PHP Conference ... Cal Evans: My First Mashup. ... My personal favourte moment was him typing “phuk” rather than “phpuk” into a sample ...
Read more

Cal Evans | PHP Developer | ZoomInfo.com

View Cal Evans's business profile as Contributor at PHP Developer and see ... Cal Evans - "My First Mashup" ... www.phpdeveloper.org, 11 June 2007
Read more

Cal Evans PHP Interview - Get Involved If You Want To Be A ...

The Undeniable Icon Of The PHP Community, Cal Evans, ... much or more than I did when I wrote my first ... at ZendCon 2007 introducing the CEO of ...
Read more

Cal Evans (@CalEvans) | Twitter

54.5K tweets • 538 photos/videos • 12.1K followers. Check out the latest Tweets from Cal Evans (@CalEvans)
Read more