In this tutorial we will see how to create, publish and use a simple web clip robot. The robot will interact Wired and just show the first three news items from that page in the clip. The clip can then be used to show Wired's latest news on your own web site without using RSS feeds or any other technology other than openkapow. A web clip creates an interactive way of reusing the user interface of a site.

It is assumed that you already have downloaded the robot development environment RoboMaker and registered as a user on openkapow.com. It is also a good idea to have read the tutorials Creating a basic RSS robot that reads from Digg and Creating a basic REST robot that searches Google since these tutorials give a good overview of how RoboMaker works. All images in the tutorial can be viewed at full size, just click on the image you are interested in and it will be opened in a new window. The robot built in this tutorial is downloadable here

Part 1 - Create a Web Clip robot

Start with opening up RoboMaker, if you are using Windows you will find RoboMaker in your start menu under Kapow RoboSuite Openkapow Edition. In the startup wizard choose the option "Create a web clip..." and click OK.
 

In the New Robot Wizard that opens you need to enter the URL the clipping robot should start from, in this case we are going interact with Wired, so we enter "www.wired.com" and click Next.


We then need to specify if we want the clipping robot to login automatically. This is a very practical piece of functionality if we do a clipping robot that needs to login to a site show us the results. However, there is no need to login at Wired so we choose "No" and click Finish.


When we click the Finish button in the Wizard a whole host of things happen. First of all a 4 step robot is created, this is the most basic clipping robot possible. Second, the robot is executed. We can see this since the last step is active (shown by it being high lighted in green). The execution of the robot made a popup window called the "Portlet View" to open. In the Portlet View we can see what our clip would look like right now if we choose to publish it (you have already clipped the complete wired.com site - good job!). The Portlet View also contains some wizards that makes the whole process of building a clipping robot a lot simpler.


Let's take a closer look at the 4 initial steps before we go on with the robot building. These steps are specific to clipping robots and are not used in RSS or REST robots.

A clipping robot must start with a "Begin Clip" step, and a robot can have one, and only one, such step. It is the starting point of a clipping robot and it keeps track of the robots session and what page to load. The "Default?" step is the first step on the default branch of a clipping robot, more about this soon when we have added another branch (and if you do not know what a branch is yet, then don't worry, we will get to that as well). The "Clip" step is where it is defined exactly what in the page that should be clipped, the default is that the whole page is clipped (in this case the complete Wired.com startpage), but this can, as we will soon see, be easily changed. The "End Clip" step is (and must be) the last step in a branch of a clipping robot. It returns the data that the Clip step has clipped. It will become clear what these steps do as soon as we add some functionality to our robot, so let us turn our attention to the Portlet View to do just that.

If you at any point while developing a clipping robot have closed the Portlet View it can be easily opened by either clicking on the End Clip step in a branch or by clicking the icon  in the icon bar of RoboMaker. As mentioned before the Portlet View shows what our clip would look like right now if we choose to publish it. But it does much more than that, it also gives us a way to interact with the loaded page and to add functionality to the clipping robot using several handy wizards. 

Part 2 - Add a second branch and clip the top 3 news of Wired

Right now we are clipping the whole of the site, but what if we just want to clip the Wired logo and the top 3 news stories? We are not interested in the rest of the start page at all. However, for all other pages than the start page Wired.com we want to show the whole page, at least for now. To do that we open the Portlet View and click on the Add Clip Branch icon   which will open the Add Clipping Branch Wizard.

 In the first step of the wizard we need to give our new branch a name, for now, let's be happy with the default name "First Page" and click Next.

 In the next step of the wizard we can define when this new clipping branch is going to be used, in this case it will be used when the page URL equals "http://www.wired.com". Perfect, no need to change that, so just click Finish.

 We have now generated a new branch named "First Page" that contains three steps. Now we have a robot with two branches and it is the Clip step in the First Page branch that is active. This means that we now can change what that step will acctually clip.

 Take a look on the Clip steps configuration to the right in RoboMaker. In the Tag Finders tab it is defined what the Clip step will clip, in this case everything on the whole page.

 Let us change this and clip the first news story only. Start doing this by clicking on the title of the first news story in the browser view. Notice that when you do this the title is high lighted by a green dashed square, and the HTML tag you clicked on is also high lighted in the HTML source view, the DOM view and the HTML path. These four views are always connected which makes it easy to navigate a page.

Right now we do want to clip more than just the title of the first news story, we want to clip the whole first story. So we need to find the HTML tag that contains the story itself. Since we already have the title high lighted we can move out in the HTML from there until we find what we are looking for. Use the arrows in the browser view icon bar to do this . Using the arrows we move outwards in the HTML until we find the DIV tag with the class "borderBox" that holds the complete first story. Moving one step further out in the HTML will high light the DIV that contains all the stories, so then we know we have gone to far.

 To clip the first story just right click on it in the browser view and choose "Use only this Tag".

 This will replace the Clip steps Tag Finder that identified the whole page with a Tag Finder that identifies just this first news story.

 Let us open the Portlet View and see how our clip has changed. Click on the "End Clip" step in the First Page branch and see for yourself.

 With a few clicks we have change the content of the clip from the complete Wired.com page to just the first news story. That is nice, but we really wanted the first three stories, and for good measure, let's include the Wired logo as well. To do this we need to go back to the Clip step in the First Page branch and continue to configure it. Either close the Porlet View and click on the Clip step or click the "Edit Current Clip Branch" icon . to do all that in one go. Identify the tag that contains the second story in the same way as we did for the first story, then right click and choose "Use this Tag" to add it to the clip. The first time we took "Use only this Tag" to replace the Clip steps default Tag Finder that clips the whole page, but this time around we do not want to replace the existing Tag Finder (which clips the first news story), we just want to add more data to the clip. Hence we use "Use this Tag".

 Do the same for the third news story and the Wired News logo. Then open the Portlet View and take a look at how your clip looks now. All the changes we have made to the clipping robot have been in the First Page branch, we have not touched the Default branch. We did configure the First Page branch to only be used when http://www.wired.com was loaded, so any other URL will be handled by the default branch. Test this by clicking on the link of the first news story inside the Portlet View. The URL will then be different from http://www.wired.com and thus the Default branch will be used. This branch will clip the whole page. Note that it is the End Clip in the Default branch that is active, which indicates that it was the default branch that was executed.

The way a clipping robot works is that it tries branch after branch, from top to bottom, to see which one to use to handle the current page that is being loaded. Only one branch will be used, and it will be the first one found who's rules fit the current page URL. The "First Page?" step contains a test if the URL equals "http://www.wired.com", if it does continue to the Clip step in that branch. If the "First Page?" step fails then the robot will try the "Default?" step in the next branch. The "Default?" step is a special type of step that is always true, so if no other branch is executed then the page will be handled by the Default branch.

 So why did we add a new branch at all and not just edit the Clip step in the Default branch? Imagine if we didn't add a First Page branch, instead we clipped the top three news stories from Wired using the Clip step in the Default branch. This would work great for the Wired start page, but if we then clicked on a link in the clip (for example the link of the first news story as we did above) it would not look so great anymore. Since there is only one branch in the robot all pages will be handled by this one branch. Since the Clip step is set up to handle the Wired start page it will try to find the same data in any page, in this case it would try to find the top three news stories on a page containing a complete article, and it would of course fail. This is why the Default branch should always be keept untouched unless it is absolutely necessary. If you find yourself needing to edit the Default branch you should most likely add a new branch and edit the new branch instead.

The clipping robot we have so far shows the Wired logo and the top 3 news stories from Wired.com, and on all other pages it clips the whole page. We could of course continue to add branches to handle articles etc, but we leave that for the next tutorial. Instead let us take a look on how to publish the robot to openkapow.com and how to use it on our own pages.

Part 3 - Publish and use the Web Clip

We have a pretty cool robot already, but as long as it is just local on your computer it is quite pointless. So let us publish it to openkapow.com so we can use the clip to show Wired news on our own page. The first thing to do is to save the robot locally. This is not necessary to publish the robot to openkapow.com, but it is always a good idea to do so anyway. Just take "Save" from the "File" menu and save your robot file on your harddrive.

Next thing to do is to publish the robot. This means that the robot is uploaded to openkapow.com and can be run from there using a simple URL in a browser. Once a robot is uploaded to openkapow.com it is publically available to all to use or download.  In order to publish a robot you need to be registered as a user at openkapow.com and you need to have put in your openkapow username and password in RoboMaker. You probably did this when you installed RoboMaker already, if not simply go into the "File" menu and take "Edit Username and Password". When the username and password are correctly configured click the little openkapow robot icon to open the publish dialouge box.

The title and description of the robot are already filled in, based on what you entered when first creating the robot. Feel free to edit that information if you want to. Each robot needs to be categorized as beloning a category, in this case we take "Tutorials and Examples" (but if you do this robot yourself you should publish your robot in the "News" category). Each robot can also have tags associated with it. These tags makes it easier to find a robot when searching on openkapow.com, so add the tags you think best describe your robot.

Once we are done with adding tags and configuring our robot click publish. RoboMaker then contacts openkapow.com and uploads your robot. When this is done you will get back the URL through which the robot is now available to use.

You (or anybody else) can now use this Web Clip robot directly from a browser by just using this URL (see for yourself at http://service.openkapow.com/tutorial/wired3stories.clip). For example this clip can be integrated to any existing page simply by loading the clip in a frame or iframe. The clip shown in the browser if fully usable and all links are clickable just as for any other page. If the page loaded is http://www.wired.com the top three stories will be shown, in all other cases the whole page will be shown. If you want to find the URL to one of your already published robots you can find that in "Robot Configuration" in the "File" menu in RoboMaker. The whole robot is downloadable here.

Summary

We have with a few clicks of a mouse created a clip containing the top stories from Wwired. We haven't written any code at all, not even changed any of the automatically generated configurations. This is a good example how easy it is to develop robots and how quickly you will see results. This clip could now be integrated with your page or your blog in a frame or an iframe for example. Basically you have with a few clicks reused and remixed Wired.com to look and do what you want you want it to. There have been no need to write any code whatsoever, and no need to install any servers or fiddle with deployment files. This is a very powerful way to reuse parts of pages, both content and functionality.