Quick-start tutorial

The tutorial covers the following concepts:

• Start/stop App Builder
• Create a new WebSphere sMash application
• Edit/run/stop an application
• Create a simple Groovy script, including use of query parameters

Step-by-step instructions

This tutorial assumes that you have Firefox 2 or 3 installed.

1. Install either WebSphere sMash DE or the latest CLI.
2. Start App Builder:
   • WebSphere sMash DE: Invoke startAppBuilder from the installed CLI directory
   • latest CLI: Invoke appbuilder open from the installed CLI directory

   Note that the first invocation might take about 30 seconds (depending on your network connectivity) while the App Builder dependencies are downloaded.

   Once App Builder is started, you'll see Firefox open to the welcome screen, such as:

   
3. Create a new application called "hello" with the following steps:
   1. Click on the "Create new application" link, located in the "Actions" area along the left-hand side
   2. Enter "hello" into the "Name" field on the "New Application" dialog
   3. (Optional) Change "Root directory" to create the application directory in another place; in this tutorial, the new application directory will be /home/steveims/hello
   4. (Optional) Change description
   5. Do not change the value of "Module Group"; the default value is fine in most cases (WebSphere sMash DE users will see stable; latest CLI users will see experimental)
   6. Click the "Create" button (WebSphere sMash DE users: The first create might take about 20 seconds while additional dependencies are downloaded)
   

   After the application has been created, App Builder will show the "My Applications" page with the "hello" application, such as:

   

4. Click on the "hello" link (application name) to open that application for editing. The editor resembles the following:

   
5. Start and browse the running "hello" application with the following steps:
   1. Click on the "start" button () in the banner near the upper-right corner; after the application is started, the "start" button is replaced by a "stop" button ()
   2. Click on the launch link (depends on configuration; here looks like ), located to the left of the "start" button; the default index page is opened in another browser tab, as shown:
   
6. Create a Groovy script that returns "Hello world." in response to GET http://localhost:8080/hello.groovy:
   1. Return to the App Builder tab
   2. Click on the "New File" link and select "Page (in /public/)"
      
   3. Add "hello.groovy" to the end of the "File path with name" field on the "File Create" dialog
      
   4. Click the "Create" button
   5. Type the following text into the edit pane; the content is auto-saved

      print "Hello world."
      

      
7. Browse to http://localhost:8080/hello.groovy to view the results:
   
8. Customize the response with a name specified as a query parameter:
   1. Return to the App Builder tab
   2. Replace the content of "hello.groovy" with

      print "Hello ${zget('/request/params/name')}."

      
9. Browse to http://localhost:8080/hello.groovy?name=Steve to view the results:
   
10. End your development session:
    1. Return to the App Builder tab
    2. Stop the "hello" application by clicking the "stop" button ()
    3. Stop App Builder:
       • WebSphere sMash DE: Invoke stopAppBuilder from the installed CLI directory
       • latest CLI: Invoke appbuilder stop from the installed CLI directory