Google Gadgets API - Developer Tools

来源:百度文库 编辑:神马文学网 时间:2024/03/28 22:13:24

Google Gadgets API Developer Guide
Google Gadgets HomeSubmit a GadgetGoogle Gadgets for Your Page
Developer Guide
Resources
Developer FAQDeveloper ForumGoogle CodeTerms and Conditions
Search Gadgets Docs

Developer Tools
This document describes tools that help you write gadgets.
Contents
Developer Gadget Programming and Debugging TipsStart SmallStudy Existing GadgetsUse the Firefox JavaScript ConsoleConfirm Your Assumptions Additional Tools
Using AnalyticsGetting an Analytics AccountIntegrating Analytics Into Your GadgetsViewing Analytics Reports
Hosting on Google CodeCreating a New Project Checking Out a Project Uploading Files
Developer Gadget
The developer gadget is a special gadget that you can use as the basis for creating your own gadgets. It is a dashboard for viewing all of the gadgets on your personalized homepage, and it also lets you control gadget caching. By default, gadget definitions are cached. You can uncheck the Cached checkbox to override this behavior. This is useful when you‘re working on a gadget and want to see the results of your edits instead of the cached gadget.
The developer gadget is also asample gadget in its own right.
To add the developer gadget, click Add content > Add by URL (next to the "Search Homepage Content" button) and enter "developer.xml" in the text field.
The developer gadget (screenshot) lists links for all of the gadgets you are currently running on your homepage. You can use the Add a gadget text box to add a new gadget by providing the URL for the gadget spec.
Programming and Debugging Tips
Part of the gadget development process (or any code development process) is understanding why things don‘t always work the way you expect them to. This section describes some basic techniques for avoiding problems, and for fixing them when they occur.
Start Small
A fundamental rule of programming is to start small. Get a basic, skeletal gadget working, and then build it up gradually. Test it at every stage before moving on. Using this approach makes it easier to tell when a change you made introduced problems.
Study Existing Gadgets
One of the greatest resources available to you as a gadget developer is existing gadgets. Go to thecontent directory and look at the source code of gadgets that closely resemble what you are trying to implement.
Use the Firefox JavaScript Console
You can use the Firefox web browser to test your gadgets on the personalized homepage during development. If a gadget isn‘t working properly, open the JavaScript Console (Tools > JavaScript Console), select Errors, and scroll down to see if your gadget has JavaScript syntax errors. Before each test, remember to clear the Console to flush old error messages.
If you‘re using a different type of browser, look for a JavaScript console or debugger supported by your browser.
Confirm Your Assumptions
Confirming your assumptions during the development process can save you a lot of time and wasted effort. Are you sure that your variable has the value you think it does? Are you certain that your array contains elements? Is it possible that the function that "doesn‘t seem to be working right" isn‘t getting called at all? You can test your assumptions by printing out status messages at different points in your program. For example, the following gadget has a print() function that writes debugging messages to debug_div if the debug flag has a non-zero value:














]]>


Note: SeeMiniMessages for a description of the MiniMessage API, which lets you modify the behavior and appearance of the messages you display in a gadget.
Additional Tools
The following Firefox add-ons can help you get more fine-grained insight into your gadgets during development:
Firebug provides debugging tools and DOM inspection.Web Developer adds to the browser a menu and toolbar containing web developer tools.
Using Analytics
You can use Google Analytics to collect statistics about your gadgets. Typically, you use analytics to track pageviews (that is, every time a gadget renders) or events (for example, every time a user clicks a button in your gadget).
Getting an Analytics Account
To use analytics:
Use your Google account to sign up for aGoogle Analytics account. In the "Sign Up for Google Analytics" box, click Sign Up. Enter the URL for the website you wish to track, and assign your account a name. This is the name by which your account will appear in your Google Analytics reports. If you‘d like to track more than one website, you can add more sites once your account has been set up. See theGoogle Analytics Help for details. Fill out your name, phone number, and territory. Agree to the Terms of Service, and click Create New Account. This displays the Tracking Instructions page. The Tracking Instructions page has a text box that contains a code snippet, where UA-xxxxxxx-x is the unique ID associated with your analytics account:


This snippet does the following:
Loads the urchin.js library into the client browser. Sets the _uacct. Calls urchinTracker(), sending data back to Google Analytics.
Normally the way that analytics works is that you would copy this code snippet into every web page that you wanted to track. However, gadgets are a special case. You must follow the instructions below to make analytics work for your gadgets.
Integrating Analytics Into Your Gadgets
Once you get an analytics account as described above, you receive a unique analytics ID. You use this ID to integrate analytics into your gadgets.
To integrate analytics into a gadget:
In your gadget, import the Google Analytics library: Call the _IG_Analytics() function. It takes two parameters: your analytics ID, and a "pageview path." The pageview path is a way of uniquely identifying each gadget or action that you want to track in Google Analytics. The pageview path is used in analytics reports to distinguish one gadget‘s statistics from another. The pageview path does not have to exactly match the gadget‘s name, but it should be a name that you can easily recognize in your reports. In the following excerpt, UA-000000-0 is the analytics ID, and, /mygadget is the pageview path:
This invokes urchinTracker() and sends data back to analytics.
Here is an example of a gadget that includes analytics. This gadget tracks gadget pageviews and button clicks. Each time the gadget is rendered, a pageview is recorded as /test_analyticslib. Each time a user clicks on the button, a pageview is recorded as /test_analyticslib/click. In this example, you would have to substitute a real analytics ID for UA-xxxxxx-x:


// Track this gadget using Google Analytics._IG_Analytics("UA-xxxxxx-x", "/test_analyticslib");]]>

Note the following:
In this gadget, the pageview path is /test_analyticslib. This is the name by which the gadget‘s statistics will be listed in Google Analytics reports. To track JavaScript events or other user interactions, you can call _IG_Analytics() within an event handler function. This gadget uses analytics to track every time a user clicks the gadget‘s button.
As with all other features, analytics also works with type="url" gadgets. SeeUsing JavaScript Libraries with type="url" Gadgets for details.
Viewing Analytics Reports
To view the reports associated with your gadgets, log intoGoogle Analytics. Go to View Reports > Content Summary.
For more information on what you can do with Google Analytics, see theGoogle Analytics Help.
Hosting on Google Code
For developers that don‘t have access to a public server, we recommend hosting your gadgets on Google Code:http://code.google.com/hosting. It provides many benefits to gadget developers and is completely free. One of the biggest advantages is that it provides version control via Subversion, which is an open source version control system. With Subversion, you can easily track changes and maintain different versions of your gadget. The entire revision history is available, which allows you to roll back or analyze differences between versions. To learn more about Subversion, see theSubversion book.
The first thing you need to do is install a desktop program ("Subversion client") that allows you to load and save files tocode.google.com (the "Subversion repository"). Most Subversion clients come equipped with a graphical user interface that provides an easier way of interacting with Subversion than the command line interface. There are many clients to choose from depending on what operating system you are running. Make sure you install one that is compatible with your system. Here are a few clients we recommend:
TortoiseSVN is an easy-to-use Subversion client for Windows that integrates functionality directly into Windows Explorer.AnkhSVN is a Visual Studio plug-in offering Subversion access within the IDE.ZigVersion is a Subversion client built for the Mac OS X.
RapidSVN is a cross-platform GUI Subversion client.  This client supports all three major operating systems: Windows, Mac OS X, and Linux.
Here is a full list ofclients and plugins.
Once you‘ve installed Subversion on your machine, follow the steps below to get started using Google Code to host your projects.
Creating a New Project
To create a new project:
Go tohttp://code.google.com/hosting and sign in with your gmail account.  If you don‘t have one yet, create one. If you need a gmail invitation to create a gmail address, contactGoogle. Click Create a new project. Fill in the fields for your new project: Create a lowercase name for your project, such as gadgets, rowan-gadgets. Keep in mind that the project name becomes part of your project‘s URL and cannot be changed later. Write a summary and description. Choose an open source license. To learn more, visitOpen-source license. Optional step: assign labels to help other users find your project.
Verify that all required fields are filled and click Create Project. You‘re done!  You will be redirected to the Project Home page. Verify that your URL looks something like this: http://code.google.com/p//
You now have a project on code.google.com. A Subversion repository has been created using your project name. Click on the Source tab, and click the Subversion repository link.
The URL should look something like this: http://.googlecode.com/svn/. You should see three directory links: branches, tags, and trunk. When you upload files to your project, they will be placed in the /trunk folder. You may want to bookmark the URL http://.googlecode.com/svn/trunk/ for future reference.
Checking Out a Project
Before you can upload files, you need to check out code from your project‘s Subversion repository. In order to perform the checkout, you‘ll need three pieces of information: the repository URL, username, and password. To find this information, go to your project‘s Source tab (http://code.google.com/p//source). You should see something like this:
svn checkout https://.googlecode.com/svn/trunk/ gadgets-test --username
When prompted, enter your generatedSVN password.
Keep this page open in a browser as you continue so that you can retrieve the appropriate information as needed.
The details of the actual checkout may vary based on which Subversion client you are using, but the overall process is the same. The instructions in this section assume you are usingTortoiseSVN.
To check out a project:
Create a new folder in Windows Explorer and navigate inside the folder. Right click and choose SVN Checkout....  Type in your repository URL and click OK.  TortoiseSVN will connect to the server and attempt to authenticate you. At this point, you will be prompted for a username and password.  Enter your username and password, check Save authentication, and click OK.
At this point the client connects and checks out your entire repository. You‘re done.
If your checkout completed successfully, you should see a new hidden folder, /.svn.  Do not modify or delete this folder.
Uploading Files
Once your project is checked out, you can begin adding new folders and files to the directory using Subversion commands. The instructions in this section assume you are usingTortoiseSVN.
To upload a file:
Create a new file and save it (for example, new-gadget.xml). Right click on the file and choose Add....  This simply marks the file as added; at this point the file has not yet been uploaded to the server. Continue editing the file until you are ready to commit (upload) it. When you are ready to commit the file, right click on the file and choose SVN Commit....
When prompted, write an optional note in the message log and click OK. Your file should begin transmitting to the server.
Once the file is completely transmitted to the server, the commit (upload) is complete and the file becomes available online immediately at http://.googlecode.com/svn/trunk/new-gadget.xml.
You can create directory structures within your repository that will be reflected in the URL. For example, if you add and commit a new file under /a/b/c/new-gadget.xml, the file is hosted at http://.googlecode.com/svn/trunk/a/b/c/new-gadget.xml.
To learn more about project hosting on Google Code, visit theFAQ.
Back to top

©2007 Google -Privacy Policy -Terms and Conditions -About Google
Updated on Thu Jan 11 2007