BlueMix Hands-On Workshop Lab A - Building and Deploying BlueMix Applications Version : 4.00 Last modification date : 13 June 2014 Owner : IBM Ecosystem Development
Table of Contents Part 1: Building an Application from a Boilerplate in the BlueMix UI... 5 1. Build the application... 5 2. Run the Application... 8 Part 2: Deploying a Node.js app that uses the MySQL service with command line tools... 10 1. Install the Cloud Foundry command line tools... 10 2. Deploy a Node.js app that uses the MySQL Service with command line tools... 10 3. Running the application... 11 Part 3: Deploying a Java web app that uses the PostGreSQL service with the IBM BlueMix Eclipse tools... 15 1. Starting Eclipse... 15 2. Importing the code for this section from GitHub... 15 3. Define the BlueMix Server... 17 4. Push the application from Eclipse... 18 5. Running the application... 20 Copyright IBM Corporation 2013-2014. All rights reserved. 3
Lab A: Building and Deploying BlueMix Applications Lab Objectives: This lab introduces different ways of creating and deploying BlueMix applications and illustrates some of the different types of applications that can be run in BlueMix.. Three approaches are demonstrated : i) Building and deploying a Java Web Runtime using a Boilerplate from the BlueMix UI as the starting point ii) Deploying a Node,js application that uses the MySQL service with the Cloud Foundry command line tools iii) Deploying a Java Web application that user the PostGreSQL service with Eclipse and the BlueMix Eclipse plugins. Lab Duration : 40 minutes Part 1: Building an Application from a Boilerplate in the BlueMix UI In Part 1 of you'll work with a BlueMix boilerplate to quickly bring up a Java web application that uses the BlueMix Data Cache Service. Boilerplates are great starting points for developing BlueMix applications from scratch because they contain everything needed for an application to run in a BlueMix environment and thus can be used as application templates. They also have examples of how to read service metadata in your applications and how to use various services. 1. Build the application In this section you ll use one of the application boilerplates in BlueMix to quickly bring up and run a Java Web application that uses- the BlueMix Data Cache Service. Step 1 Step 2 Start your browser and go to the url https://ace.ng.bluemix.net Click on LOGIN Figure 1 BlueMix Login page Step 3 After logging in click on CATALOG and select the JAVA Web Starter boilerplate under Boilerplates Copyright IBM Corporation 2013-2014. All rights reserved. 5
Figure 2 Java Web Starter boilerplate Step 4 A pop-up of the Java Web Starter appears, click on Create Application. Figure 3 Java Web Starter popup Step 5 Name your application (hint: the host name defaults to the application name so you need a system wide unique name - use something like firstname-lastname-java-web ). Figure 4 Naming your application Step 6 Step 7 Click Create. You should be taken automatically to the Dashboard area where you'll see a large icon representing your application that indicates that your app is starting up. Copyright IBM Corporation 2013-2014. All rights reserved. 6
Figure 5 Dashboard view of your app Step 8 Wait for your app to start. You'll know that it has started when the status message changes to Your app is running great! (Hint: if you periodically refresh the browser page you'll see the app change state faster) Figure 6 Dashboard view of started app Copyright IBM Corporation 2013-2014. All rights reserved. 7
2. Run the Application In this section you ll run the application that you just created without making any changes to verify that your app was deployed correctly. The app allows you to manage key/value pairs in an instance of the Data Cache Service Step 1 Click the URL for the application just below the application's name Figure 7 Running the app Step 2 Add a key/value pair and press Put. Figure 8 Add key/value pair Copyright IBM Corporation 2013-2014. All rights reserved. 8
Step 3 Verify that the key/value pair appears in the Grid Entries Figure 9 Verify key/value pair Copyright IBM Corporation 2013-2014. All rights reserved. 9
Part 2: Deploying a Node.js app that uses the MySQL service with command line tools In Part 2 you'll work with the Cloud Foundry command line tools to deploy a Node,js application that uses the MySQL data service from your local machine. 1. Install the Cloud Foundry command line tools In this section you'll install the Cloud Foundry Command Line tools used to deploy your Node,js app to BlueMix Step 1 Step 2 Step 3 Open Windows Explorer and launch the program \BlueMixLabs\install\cf_installer.exe where \BlueMixLabs is the root folder of the files provided to you by the instructor. Click Install and follow the prompts (accepting the default settings) Verify the installation by launching a Command Prompt (cmd.exe) and typing in the command cf -v Step 4 Verify that the output from the command looks like Figure 10. Figure 10 Output of cf -v command 2. Deploy a Node.js app that uses the MySQL Service with command line tools In this section you'll deploy a Node.js application that we have provided for you that uses the MySQL Database service in BlueMix. This app demonstrates how to connect to a MySQL database on BlueMix from a Node.js based app. The application allows you to select a line-separated file of text to upload, adding each line to a table in the database as a separate row. You'll deploy the app using the Cloud Foundry Command Line tools. Step 5 Step 6 Launch a Command Prompt (cmd.exe) and navigate to the folder containing the app \BlueMixLabs\LabA\bluemix-node-mysql-uploader\app where \BlueMixLabs is the root folder of the files provided to you by the instructor You'll now be in the folder containing the Node.js source code for the application. Execute the dir command and verify that have the files shown in Figure 11. Copyright IBM Corporation 2013-2014. All rights reserved. 10
Figure 11 Node.js app source files Step 7 Step 8 Step 9 Step 10 Step 11 From the same command prompt login to BlueMix by issuing the following command (note; you can copy the command from the file \BlueMixLabs\LongCommands.txt) cf login -a https://api.ng.bluemix.net Provide your BlueMix credentials when prompted. Create an instance of the mysql service used by the app selecting a Service Plan level, and giving it a unique name in the last argument by issuing the following command (note: you can copy the command from the file \BlueMixLabs\LongCommands.txt) cf create-service mysql 100 mysql_nmu Next you'll push the app to BlueMix. The following command pushes the app but doesn't start it. You need to substitute yourappname with a system wide unique name because by default the app's URL starts with the app's name. This is not the same application as part 1, so please choose a different application name. (note: you can edit and then copy the command from the file \BlueMixLabs\LongCommands.txt) cf push yourappname --no-manifest --no-start -c "node app.js" Bind the Service you created in Step 9 to the app that your just pushed (Note substitute yourappname with the app name you used in Step 6 - you can edit and then copy the command from the file \BlueMixLabs\LongCommands.txt) ). cf bind-service yourappname mysql_nmu Step 12 Start your app. (Note substitute yourappname with the app name you used in Step 6 - you can edit and then copy the command from the file \BlueMixLabs\LongCommands.txt) cf start yourappname 3. Running the application Now that the application has been deployed and started, you can examine it in the BlueMix Web Portal and run it Step 1 Step 2 Step 3 In your browser go to the BlueMix URL https://ace.ng.bluemex.net and login if necessary Make sure you're in the Dashboard section (if not click on the Dashboard link at the top of the page to take you there). Examine the resource usage of the application you just pushed and started by clicking on the Copyright IBM Corporation 2013-2014. All rights reserved. 11
icon just above the application's name (as shown in Figure 15). Figure 12 Application's runtime settings Step 4 Click on navigation link on the left that is labeled Node.js Figure 13 Node.js navigation link Step 5 Your application's resource usage will appear Copyright IBM Corporation 2013-2014. All rights reserved. 12
Figure 14 Application resource usage Step 6 Click on the Dashboard link at the top of the page to see your list of applications again. Step 7 Click on your application's link just below it's name to run it. Figure 15 Launching your application Step 8 The application will allow you to upload a text file and create a database row for each line. Upload the file \BlueMixLabs\LabA\sample.txt where \BlueMixLabs is the root folder of the Copyright IBM Corporation 2013-2014. All rights reserved. 13
files provided to you by the instructor by clicking on the Browse button to select the file locally and then the Upload button to send it to the application Figure 16 MySQL Upload application UI Step 9 Verify that the number of lines in the file and the contents of the file are displayed Figure 17 Output of MySQL Upload application Copyright IBM Corporation 2013-2014. All rights reserved. 14
Part 3: Deploying a Java web app that uses the PostGreSQL service with the IBM BlueMix Eclipse tools In Part 3 you'll work with the IBM BlueMix Eclipse tools to deploy a Java web application that uses the PostGreSQL database service.note that this application is functionally equivalent to the Node.js application in Part 2 1. Starting Eclipse In this section you ll start Eclipse and load the workspace that will be used for this part of the lab. Step 1 Step 2 Open Windows Explorer and launch the program \BlueMixLabs\eclipse\eclipse.exe where \BlueMixLabs is the root folder of the files provided to you by the instructor. Select the workspace \BlueMixLabs\workspaces\LabAPart3 when prompted and click OK Figure 18 Select Eclipse Workspace 2. Importing the code for this section from GitHub In this section you ll use the built in Eclipse tools to import the code for this section from a Git repository. This demonstrates how a typical BlueMix developer would work with version controlled code. Step 1 Select File->Import from the Eclipse menu and select Git_>Projects from Git in the resulting dialog. Click Next. Figure 19 Importing from Git dialog Step 2 Select GitHub as the source and click Next Copyright IBM Corporation 2013-2014. All rights reserved. 15
Figure 20 Select GitHub as the source Step 3 Enter the string bluemix-java-post in the Search field and click Search Figure 21 Finding GitHub Repository Step 4 Select the ibmjstart Repository shown in Figure 21 and click Next. Step 5 Repeat clicking Next to accept the defaults until the Finish button becomes active. Step 6 Step 7 Click Finish to complete the importing of the code. Wait until the project is built by monitoring the build status at the bottom right of the Eclipse UI until there is no activity reported Figure 22 Build status Step 8 Verify that there are no errors (ie red X's) in the Project Explorer pane following the build. Copyright IBM Corporation 2013-2014. All rights reserved. 16
Figure 23 Project Explorer following import 3. Define the BlueMix Server In this section you'll define the BlueMix server so you can automatically push your Eclipse code out to BlueMix when needed Step 1 Click on the Servers tab at the bottom of the Eclipse UI as shown in Figure 24. Figure 24 Eclipse Servers tab Step 2 Click the link labeled...click this link to create a new server. Step 3 Expand the IBM category and select IBM BlueMix. Click Next. Figure 25 Select IBM BlueMix as server type Step 4 In the next dialog enter your BlueMix credentials and click on Validate Account Copyright IBM Corporation 2013-2014. All rights reserved. 17
Figure 26 Validate your BlueMix account Step 5 Verify that the dialog reports that your account is valid and then click Finish. Step 6 Your server definition should now appear in the Servers tab Figure 27 Your server definition 4. Push the application from Eclipse In this section you'll learn how to push, create services and start your app all from within the same UI in Eclipse. Step 1 Go back to Eclipse and from the Servers tab select your server, right click and select Add and Remove from the context menu Figure 28 Add project to server Step 2 Select the PostgreSQLUpload application and click Add. Copyright IBM Corporation 2013-2014. All rights reserved. 18
Figure 29 Add project to BlueMix Step 3 Step 4 Click Finish. Click Next in the resulting dialog Append a unique string to the Subdomain (eg your first initial + last name ) since this has to be unique systemwide. See Figure 30 for an example. Click Next Figure 30 Specify unique Subdomain for app Step 5 Click the icon to add a new service Figure 31 Add new service Step 6 Name the service postgresql_jpu and select postgresql - PostgreSQL database as the Type. Click Finish Copyright IBM Corporation 2013-2014. All rights reserved. 19
Figure 32 Name and type of service Step 7 Step 8 Click Finish to push and start your application. Messages should start appearing on the console. Wait for the message that says The server defaultserver is ready to run a smarter planet. Figure 33 Console messages 5. Running the application Now that the application has been deployed and started, you can run it from inside Eclipse Step 1 From the Eclipse menu select Window>Web Browser and then select one of your installed Web browsers (eg Firefox) Figure 34 Select an external browser Step 2 In the Project Explorer select your project, right click and then select Run As->Run on Server from the context menu. Copyright IBM Corporation 2013-2014. All rights reserved. 20
Figure 35 Launch application Step 3 Step 4 Click on Finish in the resulting dialog..the browser you selected in Step 1 should launch with the application Upload the file \BlueMixLabs\LabA\sample.txt where \BlueMixLabs is the root folder of the files provided to you by the instructor by clicking on the Browse button to select the file locally and then the Upload button to send it to the application. Figure 36 Upload application UI Step 5 Verify that the number of lines in the file and the contents of the file are displayed Copyright IBM Corporation 2013-2014. All rights reserved. 21
Figure 37 Output of PostgreSQL Upload application Congratulations! You ve successfully completed Lab A where you've looked at different ways of developing and deploying BlueMix application Copyright IBM Corporation 2013-2014. All rights reserved. 22