BlueMix Hands-On Workshop - IBM€¦ · BlueMix Hands-On Workshop RapidApps Visitor Check-in...

BlueMix Hands-On Workshop RapidApps Visitor Check-in Application on BlueMix Version : 3.00 Last modification date : 11/11/2014 Owner : IBM Ecosystem Development

IBM RapidApps Visitor Check-in Application on BlueMix

RapidApps Visitor Checkin Application on BlueMix

Lab Objectives: This exercise provides an introduction to building an app with RapidApps. The data used with the application is the employee directory sample database that you’ll find in your RapidApps dashboard when you first create it. You will create a new app with new screens based on the existing data in the employee directory database. This is an abbreviated version of a longer Visitor Kiosk application sample tutorial. If the link to the full tutorial is not active the URL is http://developer.ibm.com/rapidapps/docs/tutorials/tutorial-visitor-sign-application-sample/

The simple application we are using is intended to demonstrate the basics of building data centric business apps that can be implemented quickly, by non-IT business users, with RapidApps. Visitors use the app to register when they arrive. Their host employee is then notified to meet them in the lobby. Our application is going to use an empty visitor data set as a starting point, and notify employees of their visitors via e-mail. A more complete application would be used for a real-world business scenario where existing data is either migrated via an import step, or employee data used from an external database in real time, along with notifications via Mobile Push and/or SMS in addition to e-mail. These capabilities can all be used with your RapidApps applications.

Prerequisites:

1. You will need an IBM Bluemix account if you do not already have one – registration for the trail period account is free and quick, register at http://bluemix.net

PART 1 – Launch RapidApps and create the data set f or your app

1. Log into RapidApps. (URL is http://rapidapps.ng.bluemix.net) – click the button for Open your RapidApps dashboard

If you are prompted to select an Organization and Project area, select your Bluemix account as the organization and an available Bluemix space as the project area.


In RapidApps, collections of data are stored as objects. Data objects might be collections of data from a database outside of RapidApps, data that you enter yourself into RapidApps, or a spreadsheet that was imported. Think of the data from any of those data sources as being stored in a table-like structure, where each column of data has a header or a label. These labels are called attributes in RapidApps. All of the attributes together provide the schema or shape of the data object. Later, when you create screens and logic, you work with the shape of the data object rather than the data itself to create views of the data and notifications.

1. Click the Dashboard link. 2. In the Data section, on the right side at the top of any data sets, click New data > Create native

data set . 3. Using the “+” icon at the right side of the table view, click it to create a new attribute and name it

“notifyList”. Select the type “text” for the attribute and indicate a value is not required.

4. Repeat the above step to add five more attributes, named:

• host • dateofvisit • purpose • company • name

5. Select the dateofvisit attribute. Click the attribute data type in the word text and change it to date .

6. Click the attribute heading for “dateofvisit” to close the window. 7. Select the name attribute and change it from not required to required. 8. Click on the name of the data set and change it from “Untitled Data Set” to Visits 9. Click anywhere in the whitespace outside the table design area to save your changes. 10. Click the Dashboard breadcrumb link at the top left to begin designing the app.

PART 2 – Create the app

1. Click New Application > Create new application .


2. For the name, type: My Visitor Kiosk 3. For the template, review each screen by hovering over the screen name and then click List and

Form 4. Click Editable Data Set and under Use existing data on the choices of datasets on the left,

select your new Visits dataset (Note that it is also easy to import any data you can provide as long as it is available in spreadsheet format)

5. Click Generate .

When the application builder opens, the navigation is on the left and a white space is on the right. The white space is the canvas, where you design the app.

PART 3 - Create screens for the app

In the design view of your app, select Screens. Notice that two screen templates are already created for you, one for “Review data” and one for “Submit data”

The process of creating pages for your app involves designing the contents of each screen. To design a screen in RapidApps, you select the widgets, navigation, and styling that the visitor sees. By creating all of the screens first, you can easily add other elements for accessing data and navigating between screens later.

1. Click New Screen at the right side of the “Screens” menu, and click New Blank screen . 2. For the screen name, type DeliveryEntry and then click OK. 3. Click New Screen and click New Blank screen . For the screen name, type Success and

then click Save. 4. Click New Screen and click Navigation . A welcome screen is created.


PART 4 – Design the Welcome screen

1. Select your new Welcome screen to open the screen editor. The Welcome screen contains buttons that the visitors can use to navigate to each of the other screens. By default, this screen is the initial screen for the app.

2. Double-click the Submit data button. 1. Type: I’m a Visitor. 2. Click the canvas or press Enter to save the changes.

3. Double-click the DeliveryEntry button. 1. Type: I’m a Carrier. 2. Click the canvas or press Enter to save the changes.

4. Double-click the Review data button. 1. Type: I’m an Administrator. 2. Click the canvas or press Enter to save the changes. 3. Select the I’m an administrator button and drag it to beneath the other 3 buttons on the

screen. 5. Delete the button for the Success screen – select it, right-click and press Delete

PART 5 - Design the Visitor entry screen

On this screen, visitors enter their data and specify which employee they are visiting.

1. On the left side listing your application’s screens, select Submit data screen and in the screen properties on the lower left, rename the screen VisitorEntry.

2. The VisitorEntry screen contains a form where visitors can enter their information. Think of a form as a place to enter a new record in the data, in this case, a visitor can submit data for their visit. The form is already bound to the Visits data object in the app. The Submit and Cancel buttons are included in the template of the Submit data form for you.

3. To customize attribute labels, open any of the labels by double-clicking it. You may want to capitalize letters and enter spaces so that the label is clearer. For example, change dateofvisit to “Date of visit”. Click on the canvas area or press Enter to save the labels.


4. Hide the notifyList attribute: 1. Select any whitespace location in the form area other than a specific button. 2. Open the Data section at the lower left of the screen design editor, and clear the

notifyList attribute. The notifyList is necessary only in the VisitsListView screen.

Click anywhere in the whitespace of the canvas or press Enter to save your changes

PART 6 - Design the Delivery Entry screen

This screen is for people who are delivering packages.

1. Select the DeliveryEntry screen.

2. From the Widgets menu on the right side, click Form and drag it to the canvas. 3. Options are available when designing the form to use data sets for the form data, you can create

your own data set manually, add an existing data set, import data from a spreadsheet, or use a data set already loaded in the app. Under “Or choose existing data set”, select the Visits data set .

4. Customize any attribute labels - open a label by double-clicking it. Capitalize letters and enter spaces so that the label is clearer. For example, change dateofvisit to Date of Visit. Repeat this step for each label, and then click the canvas or press Enter to save the changes.

5. Use the steps below to remove the host and notifyList fields from the screen because a delivery person does not have a host or a need to see who is notified when they complete the form.

1. Select the form. 2. In the Data section at the lower left of the screen design editor, clear the host and

notifyList attributes. 3. Click anywhere in the whitespace area of the screen design canvas or press Enter to

save your changes 6. Optional: Change the order of the attributes by dragging it.


PART 7 - Select navigation for the form screens

1. Click the Screens tab. 2. Select the VisitorEntry screen.

1. Double-click the Submit button. 2. At the lower left of the screen design editor, expand Actions . For the On click, navigate

to list, select the Success screen.

Click in the canvas area to save the screen design.

3. Select the DeliveryEntry screen. 1. Double-click the Submit button. 2. Expand Actions . For the On click, navigate to list, select the Success screen.


Click in the canvas area to save the screen design.

u

PART 8 - Design the Confirmation screen

1. Select the Success screen.

2. From the Widgets menu, click Text and drag it to the canvas. 1. Double-click the default text and type Welcome followed by a space character 2. Using the right mouse button, click the text widget and click Add variable . 3. Select Visits > name , and then click Add . The ${Input.Visits.name} variable is entered

into your text box. That variable is the variable for the name of the person who is signing in, accessed from the form data.

4. After the variable, type Thank you for signing in. An email was sent to 5. Using the right mouse button, click the text widget and then click Add variable . 6. Select Visits > host , and then click Add . The ${Input.Visits.host} variable is entered into

your text box. That variable is the variable for the name of the person who is to be notified of the visitor.

7. The text widget should now contain this text:

Welcome ${Input.Visits.name} Thank you for signing in. An email was sent to ${Input.Visits.host}

3. From the Widgets menu to the right, click a Button and drag it to the canvas. 1. For the screen to navigate to, select Welcome .


2. Double-click the Welcome button, and then change the label to Back to Home . Now, when a visitor clicks the Back to Home button in the app, the Welcome screen opens.

Click in the canvas area to save the screen.

PART 9 - Test the screens and data

As you design the app, preview your app often, so that you can fix mistakes as you work. You can fix issues more easily if you review a few changes at a time.

1. Click the Preview application tab. Wait for the app to load in the mobile phone emulator.


Note that you can also choose the preview the app for other devices such as tablets and browsers, by clicking on the device named in the “Preview on a <device>” in the app preview.

2. Click through screens and feel free to submit test data, for instance, I’m a visitor . Note that you will need to fill in all required fields in the form before you can submit it.

3. The default behavior for application preview in RapidApps is to require users to be logged in to Bluemix, users can be authenticated from login services using social networks or Bluemix.

Note: For purposes of an introductory exercise, steps are omitted to create Administrator screens and application user roles and security/user login policies. Complete details on these steps are available in the full tutorial linked at the start of this exercise, for instance, setting roles for who can view and edit data on each screen:

PART 10 - Create notifications

You can set user actions to act as triggers for other actions. For example, when a visitor submits a form, an email can be sent to an employee. If someone is delivering office supplies, the office manager might want to be notified that the delivery was made. These actions, or triggers, are set up as rules.


1. Return to the application by clicking on the App details button to the left, above the app preview area, then click to return to the RapidApps Dashboard.

2. In the Rules section, click New Rule . 3. For the rule name, type Send email , then click Save. 4. Click the Send email rule to edit it. 5. To specify that emails are to be sent after changes to the data are made, rather than after a

certain amount of time passes, for the Event type specified by “Select when to run your rule”, click Data event .

6. Select the details for the event type. 1. For Data set , select Visits .

2. Leave the default action as Created . Note that you can specify your rule to be triggered on other types of actions for the data set, such as deleting or updating entries.

7. For the Step 1 Action type , select Send a message.

Note that Rules in RapidApps can trigger other actions besides email messages such as working with data in your app’s data sets, conditional execution of other steps, or invocation of any JavaScript or external Web Services.

8. Define the email that is sent when new submissions are made to the Visits data: 1. In the “Send an email to:” input field, type a test email address to send the email to. 2. For the email subject, enter $ and select {input. From the attribute selections that appear,

select the one for ${input.name} Add the word arrived at the end of the email subject 3. For the email content, type Please come to the lobby to pick up ${input.name}.


Click on any area in the canvas to save your changes.

Note that you can test the individual Rules in your app right in the Rules design editor, using the Test tab:

Optional: You can now return to the dashboard and open the My Visitor Kiosk app, and choose to preview it again and test.

PART 11 - Deploy the app

Deploy your app to the Bluemix site to use in a web browser, tablet, or mobile device.

1. Return to the RapidApps Dashboard, and select your My Visitor Kiosk app 2. Click the Deployment tab. 3. Change the name of the URL for the app to myvisitorkiosk<your_initials> as the host name, or

any unique hostname in the Bluemix domain namespace. Do not use spaces or special characters in the host name.


4. Click Deploy application . 5. When the app is deployed, you can click the link to view your application and can share the link

for others to start using the deployed instance of the app in Bluemix

Note: In RapidApps, you can preview and test your apps on a real device using the real device option in the application preview. A test app for running any app you create with RapidApps is available to install from the Apple App Store or the Google Play Store. A QR Code linking to your app gets generated that your device can scan to view your app in your mobile device

Note: Once the app is deployed, you can also download the complete source files for the app, or jump right into the docs and guides for building a native mobile app from the RapidApps version you just created.

Congratulations! You’ve successfully completed building your Visitor Check-in app using RapidApps. In a business scenario for this type of app, an existing employee directory in an external Cloud or on-premise database would be used, or possibly inside the corporate firewall. This capability is demonstrated by the Access Enterprise Data with RapidApps tutorial. If the link to the article is not active, the URL is https://developer.ibm.com/rapidapps-sandbox/docs/tutorials/access-enterprise-data-rapidapps/

Congratulations You have now completed the “Big Data & Analytics Exercises –

Analytics for Hadoop (BigInsights) and Analytics with Data Warehouse” in Bluemix

including building and running a Java BigData application, working with the BigInsights

Hadoop service management console, and working with the R analytics and the

dashDB data warehouse. You can take advantage of many resources available to

maximize your exposure to technical education and skills building, explore the many

Bluemix applications and services available, and participate in opportunities to

collaborate with other Bluemix developers in the Bluemix ecosystem:

Optional Exercise – Add use of an employee director y dataset to the app

Work with the RapidApps data, screens and rules design tools to extend the application to use a dataset representing an employee directory database:


1. Define the employee directory dataset with attributes for employee name and e-mail address

2. Create a new screen for “Visitors – lookup host employee” that uses a table widget to

provide a view of the employee directory dataset

3. Change screen navigation flow for a visitor as follows:

Welcome > Visitors – lookup host employee > I’m a visitor > Success 4. Change the rule for sending email to lookup the host e-mail address using the employee

directory dataset

Next Steps – Explore Bluemix further and participat e in the Developer Ecosystem

Visit the Bluemix Developer Community at IBM developerWorks to get started using Bluemix with self-service documentation, tutorials, sample projects, articles, and workshops. Use the Bluemix developer forum and blog to get answers and follow our blog. Participate in Events listed in the calendar including Bluemix and Cloud related workshops, conferences, meetups and technicall briefings https://developer.ibm.com/bluemix/ Dev2Dev Support: Community-based direct support network by linking developers to other developers: https://www.ibmdw.net/bluemix/


Take advantage of technical guidance and resources highlighted in Our Bluemix Days Technical Enablement team - Blog IBM Open Source on GitHub – the new IBM@GitHub OSS portal, aggregating all IBM OSS projects on github http://ibm.github.io/

IBM DevOps Services, powered by JazzHub , http://hub.jazz.net where you can collaborate with others to develop, track, plan and deploy software. Share your public projects, or manage your work in private projects. Registration is quick and free. DevOps services on JazzHub provides Git hosting, built-in Web IDE, integration with Eclipse, Visual Studio, or your tool of choice. Automatically build and deploy your application to IBM's cloud platform, Bluemix. Use Team Collaboration and share your work and collaborate through expert tools for Agile Development.

Bluemix projects repositories using a variety of runtimes and application services in Bluemix to quickly get started with example applications: https://developer.ibm.com/bluemix/docs/sample-code/

BlueMix Hands-On Workshop - IBM€¦ · BlueMix Hands-On Workshop RapidApps Visitor Check-in...

Documents

Transcript of BlueMix Hands-On Workshop - IBM€¦ · BlueMix Hands-On Workshop RapidApps Visitor Check-in...