How to use web services and Google API
Posted in Web Development on July 9th, 2008 by JaredWith the internet evolving at such speed, it is important to keep abreast of emerging technologies. However, as I’m sure you all know, this is far easier typed then done. Not only do you need to learn newly developed technologies but also new uses and implementations for old technologies. Over the passed few years - with the advent of Web 2.0 - we have seen these new technologies being used to develop user- and developer-friendly sites.
One of the most important of these new methodologies is the web service: a friendly way to incorporate useful data from an external site into your own. This is what I intend to cover in this tutorial. To get the most out of this paper you should have at least a basic understanding of the following:
So what exactly is a web service? It is basically a way to execute commands on and retrieve information from a remote system. In the example we are working with today, we will be using the ubiquitous Google to translate words on the fly.
First of all, so that our HTML page knows what we’re talking about, we need to include the Google JavaScript file. Do this by pasting the following into the head of your HTML document.
<script type=”text/javascript” src=”http://www.google.com/jsapi”></script>
Your whole document should now look like this.
<html>
<head>
<title>My first web service page</title>
<script type=”text/javascript” src=”http://www.google.com/jsapi”></script>
</head>
<body>
</body>
</html>
Now, you can look at this HTML page if you want but it won’t be very interesting. Continuing on to actually do something fun, we add the following.
<script type=”text/javascript”>
google.load(“language”,”1”);
google.language.translate(“Where is the kitchen?”, “en”, “es”, function (translated) {
alert(translated.translation);
});
</script>
So, what we have done here is load the Google language API (Application Programming Interface) with google.load. With the next line, we’ve used the translate method to translate “Where is the kitchen?” from English (“en”) to Spanish (“es”). The last parameter is a function that handles what is returned by this translate function. That might be a little bit confusing. Take a look at the second line:
Google.language.translate(“Where is the kitchen?”, “en”, “es”, function (translated) {/*…Code…*/});
The first parameter is the text you would like to translate, the second is the language from which you would like to translate, the third is the abbreviation for the language to which you would like to translate. The final parameter is a function that contains the translated text. We will take a quick look at this.
function (translated) {
alert(translated.translation);
}
The “translated” word on the first line is the object that Google sends to us containing the text we asked it to translate. If all was successful, we can access the translated text by calling translated.translation. This is what we have done on the third line; throwing a popup with the translated text inside. If you don’t understand that last bit you need to learn a bit more Javascript.
Your page should now look like this.
<html>
<head>
<title>My first web service page</title>
<script type=”text/javascript” src=”http://www.google.com/jsapi”></script>
<script type=”text/javascript”>
google.load(“language”,”1”);
google.language.translate(“Where is the kitchen?”, “en”, “es”, function (translated) {
alert(translated.translation);
});
</script>
</head>
<body>
<div id=”translatedDiv”></div>
</body>
</html>
ONE last thing. We need to make this translation happen when the page is loaded. To do this we wrap the translation line in a function and use a google method to run it. Like so.
<html>
<head>
<title>My first web service page</title>
<script type=”text/javascript” src=”http://www.google.com/jsapi”></script>
<script type=”text/javascript”>
google.load(“language”,”1”);
function init () {
google.language.translate(“Where is the kitchen?”, “en”, “es”, function (translated) {
alert(translated.translation);
});
}
google.setOnLoadCallback(init);
</script>
</head>
<body>
</body>
</html>
That google method simply runs the function “init” when the page has loaded. That’s it. Everything you need to know. Load it up in your favourite browser and voila! “Donde esta la cocina”. A list of available languages can be found at the link below. This is obviously a very simple example but you can see how easy it is. Try mixing things up with a bit of PHP, MySQL and jQuery to make something really funky and web 2.0. Also, have a look at other Google APIs. There are loads of them.
http://code.google.com/more/#products-products-android
‘Til next time.
I wanto create my own web service api. But I can’t know how to design it.
Please help me…
Hi!
I would like write Java software to improve the translation related to IT software. would you please provide me how can I use Google translation service into my Java software. and what restrication and Terms and condition applied to my software?
Nice tutorial, thanks!