GeoInt 2015 Watson Workshop

GeoInt 2015 Watson Workshop Bluemix Building a Watson Question & Answer Service Hands-on Lab The lab is divided into three parts Part A: Getting started what you need and what you will be building Estimated Duration: 10 minutes Part B: Building and personalizing a web app that invokes the Watson Question and Answer service - using Bluemix and Bluemix DevOps Services Estimated Duration: 20 minutes Part C (Bonus): Configuring a mobile app - to access the web app created in Part B - Estimated Duration: 10 minutes Last updated: June 10, 2015 Global Solution Center Dallas, TX Page 1

Table of Contents PART A: GETTING STARTED WHAT YOU NEED AND WHAT YOU WILL BE BUILDING... 3 WHAT YOU NEED:... 3 WHAT YOU WILL BE BUILDING:... 3 PART B: BUILDING AND PERSONALIZING A WEB APP THAT INVOKES THE WATSON QUESTION AND ANSWER SERVICE - USING BLUEMIX AND BLUEMIX DEVOPS SERVICES... 4 1. IMPORTING AND DEPLOYING THE APPLICATION FROM BLUEMIX DEVOPS SERVICES... 4 1.1 Creating the Bluemix DevOps Services Project... 4 1.2 Editing code to personalize web app for Watson Question and Answer service... 7 1.3 Deploying your project to Bluemix... 8 2. CREATING AND TESTING A WATSON Q&A SERVICE IN BLUEMIX... 10 2.1 Running the application before creating a Watson Q&A service... 10 2.2 Creating a Watson Q&A service... 13 2.3 Rerunning your Bluemix app to invoke the Watson Q&A service recently created... 16 PART C: CONFIGURING A MOBILE APP TO ACCESS YOUR WATSON Q&A APP AND SERVICE... 17 1. INVOKING THE SAMPLE WATSON Q&A WEB APP AND SERVICE... 17 2. INVOKING YOUR PERSONALIZED WATSON Q&A WEB APP AND SERVICE CREATED IN PART B... 19 Last updated: June 10, 2015 Global Solution Center Dallas, TX Page 2

Part A: Getting started what you need and what you will be building What you need: a) A Bluemix account - to create a Watson Q&A service and access Bluemix DevOps Services Note: you may use your own ID (if already signed up) or one assigned by the lab instructor b) A laptop with a web browser - to work with Bluemix Note: Google Chrome or Firefox browser is recommended c) An internet connectivity Note: connection options to be provided by the lab instructor What you will be building: In Part B - you will be building a web app that runs on a Node.js runtime in Bluemix. This web app accesses the Watson Q&A service via the QAAPI which runs in the Watson Developer cloud, as shown in the architecture diagram below. You will be able to test your web app from your laptop browser. By personalizing the app, you can convince yourself that it s your code that is being invoked. Watson Question and Answer Architecture Web Application The last part of the lab (Part C) you will access the web app from a hybrid mobile app. Hybrid mobile apps include a native wrapper or shell along with an instance of an embedded browser. You will configure the WatsonQA hybrid app on the ipad to access the web app you created in Part B. Last updated: June 10, 2015 Global Solution Center Dallas, TX Page 3

Part B: Building and personalizing a web app that invokes the Watson Question and Answer service - using Bluemix and Bluemix DevOps Services Overview: IBM Bluemix is an open-standard, cloud-based platform for building, managing, and running all types of applications: mobile, smart devices, web, and big data. Bluemix includes over fifteen services from Watson (and counting!). This lab looks at the Question and Answer service which uses natural language processing and analytics to provide the unique ability to comprehend the subtle nuances of human language, sift through vast amounts of content, and provide evidencebased responses to users' questions. Watson has been made to ingest medical documents in multiple formats (i.e. doc, pdf, html, text, etc.) whereby a user can pose medical questions to the Watson Question and Answer API. This lab will integrate Node.js and the Watson Question and Answer service inside the Bluemix runtime environment. In short, this lab makes you familiar with using Bluemix DevOps Services to deploy a sample web application to Bluemix. This part of the lab explains how to complete the following tasks: Fork an existing Bluemix DevOps Services project Edit Code to personalize the Watson Question and Answer service Deploy your project (You can also enable auto-deployment) Run the Application in Bluemix Estimated Duration: 20 minutes 1. Importing and deploying the application from Bluemix DevOps Services In this section, you will create a project by forking an existing Node.js Watson Q&A application in Bluemix DevOps Services and push it out to Bluemix. 1.1 Creating the Bluemix DevOps Services Project a) Bring up a new browser window from your laptop (be sure to log out of any opened Bluemix or Bluemix DevOps Services session). b) Go to the URL: https://hub.jazz.net and click LOG IN. Last updated: June 10, 2015 Global Solution Center Dallas, TX Page 4

c) If you are prompted to Sign in, enter your own or the lab assigned Bluemix ID (e.g. bluemixlabsx@gmail.com) and password, then click Sign in. d) In case you are prompted to provide an alias name, enter your short ID. For example, type in bluemixlabsx as an alias if your Bluemix ID is bluemixlabsx@gmail.com. e) Once logged in, you should see a page similar to a screen below. f) Enter this URL to bring up the sample project page: https://hub.jazz.net/project/tassjazz/gscgov00-watsonqa/overview. g) From the sample project OVERVIEW page, click on FORK PROJECT button on the right to copy the source code into a new project. Last updated: June 10, 2015 Global Solution Center Dallas, TX Page 5

h) In the Fork Project window: Provide a value to Name your project, e.g. watsonqa lab 5 Ensure that Make this a Bluemix Project checkbox is selected. Click CREATE. i) After a few seconds you should see a message indicating that You have successfully created your new project. The project is now being hosted as a new Git repository in Bluemix DevOps Services. Note: if you wish to review additional details about the project attributes, you may click the gear icon located on the tool bar next to BUILD & DEPLOY button, then select Options. To get back to the project OVERVIEW page, click MY PROJECTS link at the top, then select your project. Last updated: June 10, 2015 Global Solution Center Dallas, TX Page 6

1.2 Editing code to personalize web app for Watson Question and Answer service You will be editing header tags to personalize your application in this section. a) From the OVERVIEW page of your forked project, click the EDIT CODE button. b) In the left frame, select views > layout.jade file to open the file. Then edit the title (line 6) and h2 html tag (line 24) to personalize your Question and Answer service. c) Save your changes by selecting File > Save or press Ctrl+S. Last updated: June 10, 2015 Global Solution Center Dallas, TX Page 7

1.3 Deploying your project to Bluemix Note: In Cloud Foundry environments such as Bluemix, deployment of an application translates into several steps which include bundling the project artifacts, creating the application in the Bluemix execution environment, transferring the bundled application artifacts into Bluemix and starting the app. When you deploy a Bluemix DevOps Services project from the Web IDE, deployment of the project is further automated when you use a manifest.yml file. This file contains important settings, such as the application instance name to use, the host machine, the services that the application uses, and more. There are two methods of deployment to Bluemix using the Web IDE: You can manually deploy whatever is in the Web IDE workspace to Bluemix by clicking the Play icon on the Run Bar. When you deploy by using the Run Bar, you deploy the current state of your code in the Web IDE. You can automatically deploy using a Delivery Pipeline. When you deploy by using the BUILD & DEPLOY feature, you deploy the code that is checked into the repository. Next, you will edit the manifest.yml file and deploy the project: a) In the IBM Bluemix DevOps Services Web IDE, select your project s manifest.yml file. Change the application s host and instance name similar to (or same as) your forked project name, e.g. bluemixlabsx-watsonqa this will be part of the URL to invoke your application (e.g. bluemixlabsx-watsonqa.mybluemix.net) Last updated: June 10, 2015 Global Solution Center Dallas, TX Page 8

b) Save your changes by selecting File > Save or press Ctrl + S c) Click the (Play) icon to manually deploy your app to Bluemix. d) You should be getting an error saying Service instance qa-jt cannot be found in target space. This is expected as the service has not been created. Click X on the right to dismiss the error message. Next, you will be creating the Watson Question and Answer service in Bluemix. Note: To automatically deploy your application to Bluemix whenever you commit to your project s source code control in Git using BUILD & DEPLOY, see the following link for details on how to setup a Delivery Pipeline: Develop a Bluemix application in Node.js using the Web IDE. Last updated: June 10, 2015 Global Solution Center Dallas, TX Page 9

2. Creating and Testing a Watson Q&A service in Bluemix In this section, you will run the app created and deployed in the previous section and expect to see an error. After creating a Watson Q&A service, you should be able to rerun it successfully. 2.1 Running the application before creating a Watson Q&A service a) Refresh the page (e.g. press icon for Chrome or Firefox). Notice a red status indicating your application is in stopped stage. Click Open application dashboard icon to launch Bluemix Dashboard. b) The Bluemix login page should be launched in a new browser tab Note: if you have any problem getting here, you can always open a new browser tab and enter a URL bluemix.net and then Log in if prompted. You should be taken directly to the bluemixlabsx-watsonqa application Overview page (if not, see the note section below). Note: Only if you were not taken to the app Overview page after logged in, follow the steps outlined below to get there and START the application. From the Bluemix Dashboard view, Scroll down to find Applications section. Click on your application (e.g. bluemixlabsxwatsonqa). This should take you to the Overview page where you can START the application. Last updated: June 10, 2015 Global Solution Center Dallas, TX Page 10

c) From the app Overview page, click START in the APP HEALTH widget to start the application. d) Once the application is started, you should see Your app is running message in the APP HEALTH widget. e) Click the URL link next to Routes (e.g. bluemixlabsx-watsonqa.mybluemix.net) to launch the app. Notice the app URL matches the attributes in the manifest.yml file. Last updated: June 10, 2015 Global Solution Center Dallas, TX Page 11

f) Your Watson Q&A application should be launched in a new browser tab. Note: If you get a page not found error, just wait a few minutes for the application to be fully started. Then refresh the page. Notice the values of window title (e.g. bluemixlabsx Q&A), and the heading (e.g. bluemixlabsx Question Answer Application). These should be the same as what you specified in the layout.jade file (title and h2 tags). g) Test the app Enter a new or use the prepopulated question. Then click the Ask button You should get an error in the Output area, e.g. Error: connect ECONNREFUSED, which is expected. Note: When clicking the Ask button, the app invokes the Watson Q&A service specified in the app manifest.yml (e.g. bluemixlabsx-qa-svc) which does not exist or yet created and bound to the app. Last updated: June 10, 2015 Global Solution Center Dallas, TX Page 12

2.2 Creating a Watson Q&A service Next, you will be creating the missing Watson Q&A service instance and bind it to your app. a) Go back to the Bluemix browser tab where you have your bluemixlabsx-watsonqa app Overview page displayed. b) Click inside the ADD A SERVICE OR API box. c) In the services CATALOG page, select Question and Answer service in the Watson category. Last updated: June 10, 2015 Global Solution Center Dallas, TX Page 13

d) Enter a Service name (call it whatever you d like). Then click CREATE. FYI: if your deployed app will require a service(s), then before you deploy your app from Bluemix DevOps Services, create the service(s) in Bluemix making note of the names you give your service(s) (e.g., wat-qa-55). Then, in Bluemix DevOps Services, modify your project s manifest file and add/replace the existing service name(s) with your recently created service name(s) (e.g., wat-qa-55). Then, deploy your app and the service(s) will automatically bind to your app (and will not produce an error as seen in lab section 1.3 d). e) You should be prompted to Restage Application. Click RESTAGE. Last updated: June 10, 2015 Global Solution Center Dallas, TX Page 14

f) The Question and Answer service should now appear as part of the app (shown at the bottom of the screen below). Once the app is fully restarted, click the Routes URL link to re-launch the app (in another browser tab). You will be testing the service in the next section. Last updated: June 10, 2015 Global Solution Center Dallas, TX Page 15

2.3 Rerunning your Bluemix app to invoke the Watson Q&A service recently created In you personalized Watson Q&A Bluemix application browser tab, a) Enter a new or use the prepopulated question b) Click Ask button to invoke the Watson Question and Answer service created in the previous section c) This time, you should be able to get a successful response displayed under Answers and Confidence section similar to what s shown below. d) Feel free to examine the result and try with different questions. Note: The Bluemix Watson Q&A service demonstrates the mechanics of the service, but not the potential in terms of intelligence. The service depends on a limited corpus that has not been trained. You may notice low quality answers with correspondingly low confidence levels. In the next part of the lab (demonstration), we will be invoking the Watson Q&A service you created from the mobile app. Last updated: June 10, 2015 Global Solution Center Dallas, TX Page 16

This bonus section can be developed at your leisure Part C: Configuring a mobile app to access your Watson Q&A app and service Pre-Reqs: You have completed Part B. You have downloaded the WatsonQA mobile app from the IBM App Center catalog onto your device This part of the lab explains how to complete the following tasks: Invoke the Watson Q&A service from the mobile app Configure the WatsonQA mobile app to access your personalized Bluemix web app Estimated Duration: 10 minutes 1. Invoking the sample Watson Q&A web app and service The WatsonQA mobile app integrates with the sample web app which invokes the sample service. a) Launch HCWatsonQA app from the ipad. b) Touch the Click to ask questions link. Last updated: June 10, 2015 Global Solution Center Dallas, TX Page 17

c) Notice the description displayed is from the sample web app, not the one you personalized. d) Ask Watson some questions and expect successful response(s). e) Close the mobile app (double tap the Home button, swipe the app all the way up to kill it). Last updated: June 10, 2015 Global Solution Center Dallas, TX Page 18

2. Invoking your personalized Watson Q&A web app and service created in Part B You will configure the mobile app to access your personalized web app previously created. a) If the mobile app is already running, kill it (refer to 1.e on how) b) Launch HCWatsonQA app from the ipad. c) Go to Settings (upper right). d) Update the Bluemix Application ID with the Route URL to your app, e.g. bluemixlabsxwatsonqa.mybluemix.net. Then tap < Back (upper left) to return to the main screen of the app. e) Touch the Click to ask questions link. f) Notice the description displayed, e.g. bluemixlabsx Question Answer.., is from the personalized app you created, not the sample one. Last updated: June 10, 2015 Global Solution Center Dallas, TX Page 19

g) Ask Watson some questions and expect successful response(s). By completing this lab, you have learned how to: Create a project by copying (forking) an existing Bluemix DevOps Services project Push the project's application from Bluemix DevOps Services to Bluemix Integrate inside Bluemix environment (a web app Watson Q&A service) Integrate outside Bluemix environment (a mobile app a web app + Watson Q&A service). Congratulations! You have successfully completed this Bluemix Watson Q&A Lab. Last updated: June 10, 2015 Global Solution Center Dallas, TX Page 20