This lab demonstrates how easy it is to develop a Node.js application by using IBM Bluemix DevOps Services  and to deploy that application to IBM Bluemix. So what do these products do?  IBM Bluemix DevOps Services is a place where you can collaborate with others to develop, track, plan, and deploy software.  You might be familiar with the previous name for DevOps Services:  JazzHub.  Bluemix is an open-standards cloud-based platform where you can run the applications you develop in DevOps Services. As you work through this lab, you will become familiar with how to use DevOps Services to deploy applications to Bluemix.

Learning objectives

Getting an instant read on the Twitterverse’s reactions to an app, product launch, campaign, or current event would be enormously helpful.  Are the reactions positive, negative, or neutral? This lab utilizes JavaScript, Node.js, and the Bluemix run time environment to host an application that analyzes tweets.  Don’t worry if you don’t know a lot about Node.js as the sample application we provide gives you basic functionality.  You also have the option of updating the application to leverage any of the Bluemix services like a Data Cache service. In short, this lab will aid you in getting familiar with using DevOps Services to deploy a sample application to Bluemix. This lab explains how to complete the following tasks:
  • Fork an existing DevOps Services project
  • Manually deploy your application to Bluemix
  • Update your application and redeploy it manually
  • Enable auto-deployment for your project
  • Trigger automatic deployment when a change is pushed to source control

Time required

This lab takes approximately 15 minutes to complete.

Before you begin

First, before you start the  lab, you must register for IBM Bluemix DevOps Services at: https://hub.jazz.net.

After you have registered and received your IBM ID through email, or if you already have an IBM ID, you can start the lab.  If you see references to an IBM Bluemix account, you should use your IBM ID for that account.

Create a DevOps Services project

In this tutorial, you start by forking a sample project. When you fork a project, you create a new DevOps Services project that has a copy of the code in the project that you forked.

Fork the DevOps Services project

To fork an IDS project, complete the following steps:
  1. Open spirit | Sentiment Analysis App.
  2. You can explore the project before deciding to fork it.
  3. Click FORK PROJECT to copy the code into a new project.
    ids_speed_lab_fork_project
  4. In the Fork Project window, enter a unique project name, your Bluemix space information, and click CREATE. The forking process might take a few minutes depending on the size of the project. When you fork the project, a Git repository hosted at DevOps Services is created for your project and a copy of the code in the original project is automatically pushed to your new project’s repository.
  5. When the project is forked, click EDIT CODE to begin working with the code.
    ids_speed_lab_edit_code

Configure your application

You now have a fork of the Sentiment Analysis App.  In order for the app to run successfully, you’ll need to update the application so it has Twitter keys.   
  1. By default, the readme.md will be displayed in the right pane.  Scroll down until you see the section, “To get your own Twitter Application Keys.” Follow the instructions to get Twitter keys. You will need to sign in to your Twitter account. 
  2. Configure your application “app.js” file with the following values from your Twitter application: 
    • consumer_key is the Twitter “Consumer key”
    • consumer_secret is the Twitter “Consumer secret”
    • access_token_key is the Twitter “Access token”
    • access_token_secret is the Twitter “Access token secret”
  3. Save your changes to app.js by selecting File > Save in the online editor.
    ids_speed_lab_save_changes

Pushing your application to Bluemix

You now have a fork of the Sentiment Analysis App and can deploy it to Bluemix.  Behind the scenes, deploying the application translates into bundling up the project artifacts, creating an application at Bluemix, transferring the bundled application to Bluemix, and starting the application.  Bluemix application names and URLs are created using properties, which are often defined in the manifest.yml file in a project.  You forked an existing project that has the properties are already setup for you in a manifest.yml. To deploy your application to Bluemix manually, complete the following steps:
  1. Expand the Run bar at the top of the editor area and click the Plus icon (+). 
    ids_speed_lab_edit_configuration
  2. In the Edit Launch Configuration window, select where you would like the application to deploy. The default values are fine, as in your email as the organization and “dev” as the space. Click SAVE.
  3. Next to the Run bar, click the Deploy icon.
    ids_speed_lab_play

    When the application has finished deploying to Bluemix, the grey circle icon turns green to indicate that the application was successfully deployed to Bluemix.
    ids_speed_lab_app_running
To try out your application, complete the following steps:
  1. Next to the Run bar, click the Open application icon. The application opens in a new browser tab or window.
    ids_speed_lab_open_app
  2. In the application, type a subject such as “Justin Bieber” and click Go.
    ids_speed_lab_bieber
  3. Watch as the application analyzes the Twitterverse’s reactions to your topic.
    ids_speed_lab_bieber_feeling
To manage your application in Bluemix, complete the following steps:
  1. Near the Run bar, click the Open application dashboard icon.
    ids_speed_lab_open_app_dashboard
  2. The application settings page at Bluemix will be displayed. Look around and you’ll find detailed status on the application like how much memory is in use.
    ids_speed_lab_app_dashboard

Optional: Update your application

You might want to try updating your application and pushing the changes to Bluemix.  This will give you time to explore the DevOps Services editor a bit.  The editor has quite a few keyboard shortcuts, and you can see the complete list in the Help menu when you are in the DevOps Services editor. ids_speed_lab_doc_links
  1. In the DevOps Services editor, click app.js to open it. 
  2. Use the “Find” keyboard shortcut (CTRL+F or CMD+F) to find the word “Welcome” and change some text in the HTML tags to something else.
  3. Use the “Save” keyboard shortcut (CTRL+S or CMD+S) to save your change.
  4. Press the Play icon next to the Run bar again to update your application running at Bluemix.

Optional:  Turning on auto-deployment for your project

Earlier in this lab, you manually pushed your application to Bluemix when you pressed the Deploy button next to the Run bar.  Another option is to automatically deploy your application to Bluemix every time that you push to your project’s source control in Git.  To enable auto-deployment, complete the following steps:
  1. Click BUILD & DEPLOY.
  2. Click Add stage.
  3. Rename the stage Auto deploy the Sentiment Analysis Project.
  4. In the Input tab, select the following options:
    1. For the Input type, select SCM Repository.
    2. For the Git URL, you can leave the default URL to your Git repository.
    3. For the Branch, select master.
    4. For the Stage trigger, select Automatically execute jobs when a change is pushed to Git.
  5. In the Jobs tab, click ADD JOB.
    1. Select Deploy.
    2. Leave the default values and click SAVE.
Now, any time you push a commit to the branch selected in the Deploy From menu, a new deployment will be kicked off and listed in the Recent Auto-Deployments table.

Make a change and push it

Let’s make another trivial change and push it to your repository, so we can see the auto-deployment in action.  
  1. In the DevOps Services editor, open the app.js file.
  2. Change something trivial within the HTML tags and save the changes.
  3. In the left navigation bar, click the Git Repository icon. 
  4. The file with the pending change will be displayed:
    ids_speed_lab_push_change
  5. Your change is now ready to commit.  Select the changed file and enter a description of the change.
  6. Click Commit. 
  7. The change is in the Outgoing section and still needs to be pushed to your Git repository, so click Push.  The change will be pushed, and the page will update to show no more pending changes.  For more information about pushing changes, see the open source documentation for Orion.
  8. Open your auto-deployment status page by clicking BUILD & DEPLOY. You will see the job status, the last commit message, and the deployment status. 
    ids_speed_lab_autodeploy
  9. When the deployment completes, open your application again to verify the auto-deployed changes.

Optional: Bluemix Live Sync

With node.js apps, you can make changes to static files, like HTML or CSS, and have them immediately included in the deployed app by using the Bluemix Live Sync feature. You can also edit code, however, you must click the Restart icon to have those changes reflected in the deployed app.
  1. Verify that the app is running.
  2. Toggle the Live Edit switch to the on position. 
    ids_speed_lab_live_edit_switch
    The app redeploys. When the redeploy is finished, the Live Edit mode is enabled and confirmed in the Run bar.
    ids_speed_lab_live_edit_enabled
  3. Edit a file and save the changes. 
    1. If you edited code, such as app.js or server.js, click the Restart icon.
  4. Refresh the app in the browser. Changes to static files, like HTML and CSS files, are reflected in the deployed app momentarily.
  5. Optional: Use the debug tools to troubleshoot issues.
    1. Click the Debug icon.
    2. Click Open Debugger. The file opens in a new browser tab or window where you can work with the code. 
    3. Use the debugging tools to create breakpoints and inspect  variables in your code to isolate problem areas as you work.

Summary

This lab described how to complete the following tasks:
  • Create a DevOps Services project by forking an existing project
  • Push an application to Bluemix manually and automatically
  • Manage your application on Bluemix

Additional resources

For more information on the inspiration for the Simple Sentiment Analysis application and how it was developed, view the developerWorks article Build a sentiment analysis application with Node.js, Express, sentiment, and ntwitter.
Have questions?  Ask us (almost) anything in our forum.
Looking for more tutorials?  Check these out:
Prefer video?  You’ll love these:
Get social with us!

Join The Discussion

Your email address will not be published. Required fields are marked *