Introduction to App Builder - Lesson 1: Create an application

This is the first lesson of the Introduction to App Builder tutorial series, in which you will learn concepts and develop skills with App Builder by constructing an order fulfillment application called Northwinds.

Prerequisites

This tutorial series requires access to a 4.48 App Builder instance with the Northwinds database already installed. There are two ways to get one:

• Request a training instance with the Northwinds database pre-installed, or

• Download and install a release package containing the Northwinds database on your own instance.

Request a training instance

To obtain temporary access to an App Builder instance that already has the Northwinds database as an existing data source, contact the Jitterbit Training Team.

Download and install Northwinds

To use your own instance of App Builder for this tutorial, follow these steps to download and install the Northwinds database on it:

1. Download the release package
   Use the links below to download the correct release package for one of these two database types:

   Database type	Download link
   PostgreSQL	Northwinds PostgreSQL
   Microsoft SQL Server	Northwinds Microsoft SQL Server

2. Install the release package
   Next, install the release package on your App Builder instance:

   1. Log in to App Builder.

   2. Go to the IDE.

      Note

      The Integrated design environment, or IDE, provides quick access to all the commands and settings you need when building apps. Learn more about it in IDE.

   3. Under Deploy, click Install Release.

   4. Click + Package and then click Browse.

   5. Select the downloaded .LP file.

   6. Click Save. The Release panel on the right will display the package information.

   7. Close the Package dialog.

   8. Confirm the details are correct and click the Install button.

3. Unseal the application
   Finally, unseal the application so you have access to the Northwinds database:

   1. Select IDE > Data Servers.

   2. In the Data Servers panel, click View All Data Sources.

   3. Locate the Northwinds data source you've installed and select it. The Data Source panel will show its details.

   4. In the Data Source panel, click More > Unseal Data Source.

Create a new application

After following the steps above to download and install Northwinds, you are ready to start building your first application.

1. Access the Site Menu, App Builder's home page, by clicking the hamburger icon in the top right to access the action drawer, then selecting Site Menu.

   Note

   The action drawer is a list of links to important resources in App Builder. Learn more about it in action drawer.

2. Access the IDE by clicking its button in the top.

3. In the Build panel, click + Application. The Create New Application dialog opens:

   

4. In the ① Details section, do the following:

   1. Enter a name for your new app in the Application Name field. In this series of tutorials, we'll use the name Northwinds.

   2. (Optional) Under Upload App Logo, either drag and drop an image, click Browse to find one, or select an existing image from the dropdown menu.

5. In the ② Data Source section, select Existing Source.

6. In the ③ Home Page section, select Left Menu.

7. Click Proceed. The Add a Source to your application dialog opens.

8. Select Link to existing source then click the Next button.

9. On the Pick sources step, select the Northwinds relational database.

10. Click the Link 1 Source button.

11. On the summary page, click the Done button.

App Builder will create your application.

Start designing your application

Now that App Builder has created the application, you can find it by returning to the site menu and clicking the recently-created application. Its home page is empty for now:

To start adding elements to your application, go to Action Drawer > App Workbench. You will arrive at the home page of the App Workbench, which looks like this:

The App Workbench is the main area where you design your applications. It is where you'll find the development tools with which to build your app and where you will spend most of your time developing. Learn more about it in App Workbench.

Application development in App Builder is split into layers, with each layer representing a different aspect of the development process, and the App Workbench is divided into tabs that mirror this compartmentalization. By following the lessons, you will work on each of the layers in order, helping you understand the way data flows through App Builder.

Next steps

You are ready to start designing your App Builder application. Proceed to the next page in this tutorial series, Lesson 2: Add data to your application.