Google Code Playground is a gateway to the cloud

The web-based Google Code Playground lets you take Google APIs for a test drive without downloading and installing SDKs.

One great byproduct of the advances in web technologies is the ability to do so much within a browser. This is further enhanced by the robust cloud-based offerings available.

Developers are no longer constricted to their development machine with tools like jsFiddle and Divshot for building and testing code and Web applications. Google simplifies getting started with its various cloud offerings via the appropriately named Google Code Playground.

We all need time to play

Google Code Playground is a web-based tool that allows developers to take the numerous Google APIs for a test drive without downloading and installing SDKs and so forth. You create, run, and tweak code directly within the browser.

While Google prefers for developers to use Chrome, Google Code Playground works with other browsers as well. I had no problems using Google Code Playground with Firefox on Windows 7 and OS X or Internet Explorer 10 on Windows 7 (though I did use the Google Chrome Frame add-on). I have read about issues with Opera 9.6, but I have not tried it in that browser. Once you go to the Google Code Playground site, it's surprisingly easy to dive into Google goodies -- without any downloads, installs, or setups/configurations.

You may be wondering why you would want to frolic in such a playground. I think it will become clear once you read about Google Code Playground's features, and realize how it helps you learn more about Google offerings and how to use them in projects.

Figure A shows what is presented when you visit the Google Code Playground site. The screen shot was created with Firefox 23.0 on Windows 7.

Figure A


Google Code Playground's main entry point

The simple Google Code Playground interface has three main areas of the screen.

  • Pick An API: This menu provides access to Googe's numerous APIs. When an item is selected (clicked) in the menu, relevant code appears in the Edit Code window and its output shows up in the Output window. The search box within the Pick An API area allows you to quickly find something. This is Google, so yes, the search better be lightning fast.
  • Edit Code: This is where developers jump into the deep end of banging on code that they love so much. If this is not you, then stick with local, boring development at your day job. Two buttons at the top right of the Edit Code area -- View Docs and Edit HTML – allow you to dive into feature documentation (which opens in a new browser tab) that provides explanation, purpose, and examples. The second Edit HTML button makes it easy to work directly with HTML source and toggle between JavaScript and HTML development. The final button (the down arrow in the top right of the Edit Code area) provides export and save features to make a copy of what you've done.
  • Output: This is where you see the fruits of your labor. An API is selected in the Edit Code window, which populates the Edit Code area with example code. The code is automatically executed to fill the Output window with the results of running the example code. Any changes/tweaks made to the code are reflected in the Output window once you select the Run Code button at the top of the Output window. Figure B shows playing with the Maps, as I examine the traffic around Citizen's Bank Park in Philadelphia, Pennsylvania.

Figure B


Using Google Maps to look at traffic at a specific map location.

The example in Figure C shows how to use the Google News search feature.

Figure C


The web search features of Google (News, in this example) are easy to use.

What does it offer?

You may be dismissing Google Code Playground as a cool toy that is not right for your development projects. I disagree, as long as the project is using one of the Google APIs. The ability to interact with code with immediate results provides an easy and straightforward way to create code that can easily be copied and pasted into your application.

Figure D provides a snapshot of which APIs are currently available in the Google Code Playground interface. This list may be expanded soon.

Figure D


The current list of APIs

I have worked with the Maps, Search, Blogger, YouTube, and Earth APIs so far. I enjoy working with the Earth API the most.

While most of the Pick An API section of the Google Code Playground interface is devoted to working with Google offerings, it also provides base items like JavaScript, Libraries, and Feeds.

  • JavaScript provides examples of working with various code features with which you can test in other areas of the user interface.
  • Libraries allows you to use jQuery, jQueryUI, MooTools, Dojo, and Prototype Scriptaculous, giving you control over the user interface.
  • Feeds allows you to add and control feeds on your pages.

Let's go!

The Google Code Playground is fun and useful. I enjoy playing with APIs and code, especially with visual items that may be used in web applications (I won't divulge the number of hours I sunk into wandering around the planet with Google Earth). A really cool feature of Google Code Playground is that you can take the code with you with a simple copy and paste or export and save.

The point of entry for Google Code Playground is painless and free, so there's no excuse for you not to give it a shot.

By Tony Patton

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...