GhostWire [Flash MX/PHP Development] PHPObject: Google Web API

Notes
Monday April 21, 2003

Google Web API

This is a tutorial to demonstrate how you can create a Macromedia Flash MX application that searches the Google index of 2 billion pages, using the Google Web APIs service, and then formats and displays the search results.

We are using PHPObject in this tutorial to make things easier (compare). The following are things you need to complete this tutorial:

Macromedia Flash MX
PHPObject
Web Services Connectivity Add-on
PHP4 installed on your server
License key from Google (obtain free key here). The free license key that is given to you when you create a Google Account entitles you to 1,000 queries per day.

In this tutorial, It is assumed that you already know how to create a user-interface using the FUI components (just drag from components panel and drop on the stage) and I won't elaborate on that.

Prepare the server
First, upload the following files to a directory of your choice on your server:

Gateway.php
nusoap.php (from Web Services Connectivity Add-on)
WebServiceProxy.php (from Web Services Connectivity Add-on)

Create the Flash MX application user interface
You can create your own look-and-feel. Choose how you want the interface to look like. Here is a simple interface:

Start coding in Flash MX
Unpack PHPObject v1.3 and make sure all three .as files are in your work/include directory. Enter the following actionscript in the first frame of the Actions layer:

////////////////////////////////////////
// import the library
////////////////////////////////////////
#include"PHPObject.as"

////////////////////////////////////////
// prepare the movie to use the gateway
////////////////////////////////////////
_global.defaultGatewayKey ="secret";
_global.defaultGatewayUrl ="http://mydomain/services/Gateway.php";

////////////////////////////////////////
// create a PHPObject and link it with the web service
////////////////////////////////////////
mySvc =new PHPObject("http://api.google.com/GoogleSearch.wsdl");
mySvc.utf8encode(false);// this method added in v1.4 allows switching off utf8 encoding by gateway, necessary when the results from web service already encoded

////////////////////////////////////////
// set up the onResult responder
////////////////////////////////////////
// the onResult catch the search results returned from Google
// you should define here how you want to parse the data, which comes in as an object
// this is just an example, there are many other ways to present the search results
mySvc.onResult =function(result) {
 output ="";
 for (i inresult['resultElements']) {
 output +="<a href='"
 +result['resultElements'][i]['URL']// here is the link
 +"'>"
 + ((result['resultElements'][i]['title'].length>0) ?// title exists?
 result['resultElements'][i]['title'] :// use the title
 result['resultElements'][i]['URL'])// else use the URL as title
 +"</a> "
 +result['resultElements'][i]['snippet']// here are words about the site
 +" ";
 }
 results_txt.htmlText = output;
}

////////////////////////////////////////
// set up a function to invoke web service
////////////////////////////////////////
function doSearch(offset) {
 results_txt.htmlText ="Processing request... please wait";// provide feedback to user
 // please refer to Google API reference for details on how to configure your search options
 mySvc.doGoogleSearch(
 "key","licensekey",// enter your license key
 "q",query_txt.text,// the query terms, which we get from the input field
 "start",offset, // Zero-based index of the first desired result
 "maxResults",10,// Number of results desired per query; max 10
 "filter",false,// similar results filter
 "restrict","",// country or topic filter
 "safeSearch",false,// adult content filter
 "lr",""// language restrict
 );
}

////////////////////////////////////////
// set up button triggers
////////////////////////////////////////
previous_btn.onRelease =function() {
offset = Math.max(0,offset-10);// zero is minimum
doSearch(offset);
}

next_btn.onRelease =function() {
offset += 10;
doSearch(offset);
}

search_btn.onRelease =function() {
offset = 0;
doSearch(offset);
}

////////////////////////////////////////
// initialize variables
////////////////////////////////////////
offset = 0;

////////////////////////////////////////
// make buttons nicer (optional)
////////////////////////////////////////
globalStyleFormat.scrollTrack = 0xBCC4D3;
globalStyleFormat.arrow = 0x313A4A;
globalStyleFormat.face = 0xBCC4D3;
globalStyleFormat.highlight = 0xEEEEEE;
globalStyleFormat.shadow = 0x848284;
globalStyleFormat.darkshadow = 0x000000;
globalStyleFormat.highlight3D = 0xBCC4D3;
globalStyleFormat.applyChanges();

Please refer to the Google Web API Reference for more options on configuring your search options and more details on the results that are returned from the web service.

Download this fla (36kb) to jumpstart this tutorial.

Edited May 1, 2003 05:30 PM

Posted by sunny at April 21, 2003 05:56 PM

Comments

In the definition of mySvc.onResult() there's a typo in for() loop, it should be:

for (i in result['resultElements']) {...}

not

for (i inresult['resultElements']) {

Cool library though :-)

Posted by: Matt Burns at May 15, 2003 11:36 PM

Thanks Matt! Good eye ;)
Ok, since it's color coded, I'll leave the typo intact for posterity sake.. and to validate your comment :)

Posted by: sunny at May 16, 2003 12:04 AM

NotesMonday April 21, 2003

Google Web API

Notes
Monday April 21, 2003