Quick-start tutorial

This tutorial covers basic concepts for using App Builder. You will learn the basics of running App Builder, various functions for creating a new IBM® WebSphere® sMash application, how to create a simple Groovy script, and using a query parameter.

Prerequisites

Instructions

This tutorial consists of the following steps:

  1. Start App Builder
  2. Create an application
  3. Start the application
  4. Create a Groovy script
  5. Process request parameters
  6. End your development session

Step 1: Start App Builder

Invoke appbuilder open from the installed CLI directory.

For users of older versions of WebSphere sMash DE (CLI 1.0.0.1 and older): Invoke startAppBuilder instead of appbuilder open.

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:

App Builder welcome page on first access.

Step 2: Create an application

  1. Click the Create new application link
  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
    Dialog box for creating a new application.

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

    List of applications shown in App Builder.

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

    Screen capture of the File Editor tab showing first-time instructions.


Step 3: Start the application

  1. Click the start button (Icon associated with 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 (Icon associated with the stop button.)
  2. Click the launch link. Depending on your configuration, this link renders differently. For example, it might look like Screen capture of the launch link. and is located to the left of the start button. The default index page opens in another browser tab, as shown in the following screen capture:

    Screen capture of the default index page for new applications.


Step 4: Create a Groovy script

  1. Return to the App Builder tab
  2. Click the New File link then select Page (in /public/)
    Screen capture of the New File popup menu.

  3. Add hello.groovy to the end of the File path with name field on the File Create dialog
    Screen capture of the New File dialog.

  4. Click the Create button
  5. Type the following text into the edit pane; the content is auto-saved 
    print "Hello world."
    Screen capture of the file editor.

    Browse to http://localhost:8080/hello.groovy to view the results:

    Screen shot of the response from hello.groovy.

Step 5: Process request parameters

  1. Return to the App Builder tab
  2. Replace the content of hello.groovy with 
    print "Hello ${zget('/request/params/name')}."
    Screen capture of the file editor.

    Browse to http://localhost:8080/hello.groovy?name=Steve to view the results:

    Screen capture of the response from hello.groovy?name=Steve.


Step 6: End your development session

  1. Return to the App Builder tab
  2. Stop the hello application by clicking the stop button (Icon associated with the stop button.)

  3. Invoke appbuilder stop from the installed CLI directory.

    For users of older versions of WebSphere sMash DE (CLI 1.0.0.1 and older): Invoke stopAppBuilder instead of appbuilder stop.

Additional Tutorials, Samples, and Demos

Additional tutorials, samples, and demos can be found in the Developer's Guide and on the Documentation page of the Project Zero website.

Version 1.1.26825