- What You Will Learn
- Examples in This Chapter
- 2.1 Exploring the Samples
- 2.2 About You-Your Home Page
- 2.3 Your Keychain and Service Providers
- 2.4 Creating Your First Service: LoanPaymentService
- 2.5 Creating Your First Widget: LoanPaymentWidget
- 2.6 Drafts, Versions, and Timelines
- 2.7 Putting It All Together-Using the WeatherBug API
This chapter is from the book
This chapter is from the book
This chapter is from the book
2.1 Exploring the Samples
Let’s start with the zembly Samples section, which lists applications (Facebook and OpenSocial), widgets (blue badge), and services (orange badge). To see zembly’s samples, select samples from the top dashboard, as shown in Figure 2.2.
)
Figure 2.2 The zembly samples help you get started
The sample Facebook applications include CapitalPunishment, which is presented in Chapter 6 (see “Capital Punishment—A Challenging Facebook Application” on page 162). The sample services run on the zembly server and generally call other services out on the web to do things. Right now1 the sample services include
- AmazonProductSearch—lets you search Amazon’s product catalogs and retrieve detailed product information, including prices, images, etc.
- FlickrPhotoSearchService—calls the flickr picture search service.
- GoogleGeocodeSampleService—enables you to search a ZIP code for a given address.
- HelloWorld—takes your name and says hello.
- WeatherTodayService—retrieves weather for a specific U.S. zip code.
- YahooTripSearchService—enables your applications to use a Yahoo! API to search for public trip plans that were created with Yahoo!.
- YouTubeSampleService—lists information about videos that have a specified tag.
- ZillowSampleService—finds a property given an address. The returned information includes the address for the property or properties, the Zillow Property ID (ZPID), the current Zestimate, the date the Zestimate was computed, a valuation range, and the Zestimate ranking for the property within its ZIP code.
- zventsSearchService—search for events that are happening around a given U.S. location.
The Sample section also includes a list of widgets. Widgets provide a user-friendly object that you can embed in a web page. All of the above services have corresponding widgets. To view a widget’s page, click its name in the Samples section. For example, if you select HelloWorldWidget, zembly takes you to its page so you can see how it was built. To view its source, select the View tab as shown in Figure 2.3.
)
Figure 2.3 Exploring the HelloWorldWidget development page
Further down the page zembly shows you how to embed the widget in a page by providing the code you can select, copy, and paste. Figure 2.4 shows the code window to embed widget HelloWorldWidget (Share This Widget).
)
Figure 2.4 Embedding (sharing) a widget
For example, you can create a web page and call the HelloWorldWidget using the following code:
<iframe src="https://dde7e989aa2a4122aef8a6e53f29e9fb.zembly.com/things/ dde7e989aa2a4122aef8a6e53f29e9fb;iframe" frameborder="0"> </iframe>
You can then open this file in your web browser, which calls the HelloWorldWidget. This widget displays a box and provides an input field to supply a name. A call is made to the HelloWorld service to display the name provided by the user, as shown in Figure 2.5.
)
Figure 2.5 Embedding and running the HelloWorldWidget in a web page
Using Clone
You can clone any application, widget, or service on zembly. This means that you create a copy for yourself. Once you clone a thing on zembly, you own it and you can then modify it. zembly encourages you to clone artifacts that you like; it is both a great learning tool and more importantly, you can build something innovative based on the work someone else has already done. This makes zembly users more productive. To clone a widget, select Clone this widget on its development page, as shown in Figure 2.6.
)
Figure 2.6 Cloning a widget increases its score
Furthermore, when you clone something on zembly, the score of the original widget (or service or application) increases to reflect the cloning. Scores also change when people rate zembly “Things” or favorite them.
Widget Actions
Widgets (this applies to services and applications as well) list actions on their page. Besides cloning, you can add a widget to your list of favorites, report a widget, or watch a widget. When you mark something as a favorite, you have an easily accessible “bookmark” as shown in Figure 2.7.
)
Figure 2.7 Your Favorites give you a convenient bookmark
When you watch something, zembly lets you know when its owner publishes a new version.
Tags on zembly
Use zembly tags to label your widgets, services, and applications to help others find Things through the zembly search mechanism, as shown in Figure 2.8.
)
Figure 2.8 Tags let you find widgets, services, and applications through searching
AmazonProductSearchWidget—Widget Preview
Let’s explore the AmazonProductSearchWidget. From the Samples page, select AmazonProductSearchWidget. zembly takes you to this widget’s page. You’ll see a box area with the instructions Click here to preview this widget. When you click the box, the widget runs in a preview window. You can increase the size of the preview window by selecting the corner (or edges) and dragging until the preview window is the size you want, as shown in Figure 2.9.
)
Figure 2.9 Previewing a widget and adjusting the preview window size
Provide product search index and keywords and click Search. Figure 2.10 shows the result after searching for keyword “zembly” in search index “Books.”
)
Figure 2.10 Previewing the AmazonProductSearchWidget
Widget code includes (X)HTML (for rendering), CSS (for styling), and JavaScript for program logic and calls to external services. When you make a service call, results typically come back in XML or JSON format. Exactly what the data represents depends on the service and the format it uses. For example, with XML you may see results that are RSS 2.0, or ATOM. As it turns out, the Amazon service that AmazonProductSearchWidget calls returns data in XML format. The external web service will specify how to interpret the data that is returned.
You are encouraged to look at the XHTML, CSS, and JavaScript code for this widget (click View as shown in Figure 2.3 on page 14). This chapter will delve into building widgets soon, but first let’s show you how to use this widget in a web page.
Embedding AmazonProductSearchWidget
The AmazonProductSearchWidget has sharing enabled. This means you can export the widget to many popular web sites and pages by simply selecting the logo that corresponds to the target site. zembly has partnered with Clearspring to provide sharing and tracking of your widgets (see www.clearspring.com). We show you how to enable sharing in Chapter 3 (see “Sharing Your Widget” on page 66). However, let’s first show you how to embed a widget in a web page.
Since sharing is enabled for AmazonProductSearchWidget, select Embed from the list of options as shown in Figure 2.11. The share window now displays option Other Sites. Select Other Sites and you’ll see the window with the JavaScript code you need to invoke the widget from an arbitrary HTML page.
)
Figure 2.11 Embedding AmazonProductSearchWidget in a web page
Cut and paste this code into the HTML editor of your choice and open it in your browser. You can add other rendering code as shown in Listing 2.1. Here is the source for the HTML file used to run this widget in a browser.
Listing 2.1. AmazonProductSearchWidget HTML file
<h2 style='margin-left:10px; margin-bottom: 0px'>Let's search Amazon!</h2> <script type="text/javascript" src="https://widgets.clearspring.com/o/49249714e57f0b59/4924d27e70974fe2/ 4924971425b85ee0/cafd08e6/widget.js"> </script>
After creating the HTML file, open it in your browser. Enter a product search index and one or more keywords, then click Search. Figure 2.12 shows the browser output.
)
Figure 2.12 AmazonProductSearchWidget running in a browser
Sharing Your Widgets with Clearspring
Besides embedding widgets in pages, you can also share widgets by adding them to any number of popular sites, such as your iGoogle Home page (see www.google.com/ig). You don’t have to be the widget’s owner. Click Post from the list of options and then select iGoogle from the option icons in the grid (see Figure 2.11). Now click Open in the Add to your iGoogle page display, as shown in Figure 2.13
)
Figure 2.13 Adding AmazonProductSearchWidget to your iGoogle home page
After clicking Open, you’ll be redirected to Google and asked to confirm. Click the big blue Add to Google button, as shown in Figure 2.14. You will now see your iGoogle home paged updated with the widget inside.
)
Figure 2.14 Adding AmazonProductSearchWidget to your iGoogle home page