BlueMix Demo for Innovate


One of the things that I will be focused on this year at Innovate is helping show everyone our new cloud capabilities with BlueMix.  BlueMix allows you to develop composable applications (applications that are based on a series of cloud services and capabilities) using a development environment in the cloud, with automated deployment to cloud.  It takes advantage of our DevOps Services (which are based on the Jazz technology).  I will be working and coordinating the BlueMix pedestal for then IBM Labs.  If you come down and see us, we can give you a quick demo of  BlueMix with DevOps Services.  Some of you might like to run this demo for yourself, so I am supplying the basic demo script here.  Now you can show people exactly what you saw at Innovate.

BlueMix Demo Script

This is being done as a “self-paced” demo script.  My name is Dan Toczala, and you can contact me through my blog, or via email (IBM – dtoczala@us.ibm.com, Personal – dtoczala@gmail.com)

Introduction and Prerequisites

You want to run through a demo of BlueMix capabilities.  This is where to begin.  You’ll need an IBM ID, so you can register for both JazzHub and for BlueMix.  We will assume that you already have an IBM ID, and that you have a registered account for both JazzHub and for BlueMix.

The application also requires that you have API keys for both Twitter and for Klout.  If you do not have accounts for either of these web services, then you will want to get accounts.  They’re free.

  • To get the API key for Twitter, you should go to the Twitter Application Management page, and create a new application.  Twitter will then assign you an API key and API secret for your application.  You will need those for this demo.
  • To get the API key for Klout, you will need to register your new app to get an API key.  Just give it the information needed, including email and password.  You will use “https://ace.ng.bluemix.net/” as the company website for the application that you are registering, as well as for the callback URL.  Once you register, you will receive a Klout API key, which you will need for this demo.  Note: This might take some time.

First Steps – Create Your Project in JazzHub

The first step is to create your project in JazzHub.  So first log in to JazzHub and get to your initial screen.  If you already have JazzHub projects, you will see them listed here.

  • On the top menu bar, you will see a menu option for “Explore”.  Click on “Explore”.
  • In the search bar, type in “Jstart”, and search.
  • You will see a number of projects pop up.  Select the “jstart | Twitter Influence Analyzer (Node)” project.
    • Note: You can choose something else if you want to show off/explore some other aspect or platform of BlueMix.
  • You will now see that main page for the “jstart | Twitter Influence Analyzer (Node)” project.
    • You will see the files in the project, and some text below that from the “README.md” file in the project.  If you read the directions in this file for the IBM JazzHub method, you will find that it matches much of what we explain here.
  • Click on the “Edit Code” button.  DON’T PANIC – you’re not going to start editing code yet.  You should see something like the picture below.  Now you will create your own demo project by clicking on the “Fork” button on the secondary menu bar.

ForkDialog

  • At this point you will be asked for a name for your new project.  Give it a good name like, “Twitter Analyzer Demo App”.  Make sure that the checkbox for “Make it private” is NOT checked.  You will want to be able to show other people that they  can access your application from ANYWHERE.  Note: This operation may take a minute or two.
    • You are now creating a project with a fork of the code from the original project.  This project will be integrated with BlueMix, so you will be able to edit your code “in the cloud” from your browser, and then deploy these changes to your application instance running out on the cloud.
  • When it has completed, you will notice that your browser is now showing your new project.  You are now looking at your very own Twitter Analyzer application!  Now we need to make some minor changes, and we’ll get this working in no time.
  • Our first code change is to the “config.json.txt” file.  First we need to rename this file to “config.json”.
    • To do this, find the “config.json.txt” file in the file list in the left hand side of the browser.  Click on the file to highlight it.  Right click on the file, and in the resulting dialog box, choose “Rename”.  Now you can rename the file to “config.json”.

RenameConfigJSON

  • Now we need to do some configuration for the APPLICATION (not for the BlueMix infrastructure).  Our application needs the API keys for both Twitter and Klout.  You got those keys during the pre-requisite section above.  You need to enter them into the code here.  This is a normal editor, so just click in the file and replace the text in those fields with your key values.  I show you what it looks like below, but don’t use the keys shown here because they won’t work for you.  You need your own keys!
    • If you wait 5-10 seconds, you’ll notice that the file will “save itself”, and save your changes automatically.  If you are impatient, then you can move to the “File” menu item, and select “Save” in the menu dropdown.  Take a few minutes and explore the different editing options available to you.

ConfigChanges

  • In the file list on the left hand side, you should see a file at the top level called “manifest.yml”.  You will need to edit it.
    • We want to make out app look like a real application.  So we will change the following two lines of code in the manifest from this:
url: TwitterInfluenceAnalyzerNode${random-word}.${target-base} #deprecated, kept for temporary compatibility
host: TwitterInfluenceAnalyzerNode-${random-word} #Hostname for app routing. Unique to domain
to this (use your own username here instead of mine):
url: TwitterInfluenceAnalyzerNode-Tox.${target-base} #deprecated, kept for temporary compatibility
host: TwitterInfluenceAnalyzerNode-Tox #Hostname for app routing. Unique to domain
    • We also need to make a change for the Mongo DB services plan.  We change this line from this:
plan: '100'
to this (getting rid of the single quotes):
plan: 100
  • Now you are ready to go, so let’s deploy this thing and test it out.  You will now click on the grey “DEPLOY” button in the menu bar.  You might need to enter your login credentials for BlueMix (remember those pre-requisites?) into the dialog box.  Once you do, you will see a banner telling you that BlueMix is now deploying your application.  Note: This operation may take a minute or two.
    • Note that you may get an error about, “Unable to find the plan for mongodb service”.  I got that too.  Look at the forum to see a similar issue, and then get rid of the single quotes around the number 100 in the manifest.yml file.  Now try deploying again.  You can get a lot of answers to your BlueMix questions in this forum, so you might want to bookmark this.
  • Now click on the main project name in the left hand file list.  It is the entry at the top, and it matches the name of your JazzHub project.  Scroll down in the information on your project, and you will see a section with Manual Deployment Information.  The little green circle here means that your application has been successfully deployed by BlueMix.
    • Click on the links here.  You can jump to your deployed application from here, or even check out the log files on your deployed instance.

ManDeployStatus

  • So to check out your new Twitter Analyzer application, just type in a twitter handle (username) into the search bar of the application, and click the Analyze! button.  You should see the Klout score for that particular user come up.
    • Use your own Twitter ID to see your influence score from Klout, and then compare it to people like Shaquille O’Neil (Shaq), Shakira, or even me (dtoczala).  As you check these people out, notice how your collected inquiries are shown on the home page of the application.
  • You should also go and take a look at your BlueMix dashboard.  You should see that your application is running, and also see a link in the application box to your application.

So now you have everything set up for your demo.  You can include this setup as part of your demo if you want, just be sure to give your application a slightly different name, and have it deploy to a sightly different location (remember those edits to the manifest.yml file?) so you don’t run into issues.

Demo Time

Now let’s look at how you can demonstrate cloud based development, with cloud based deployment, and cloud based DevOps Services capabilities.  We want to show a basic scenario of events that follows this basic flow of events:

  1. Looking at your deployed application
  2. Noting the need to change something
  3. Making the change to the code
  4. Deploying the changed application
  5. Looking for feedback

Our “demo” is going to look at a simple web application, called the Twitter Analyzer, which uses some services (like Mongo DB, Twitter, and Klout) and a Node,js environment, to deliver some simple social influence scoring for you and your closest friends.

Getting Set Up

Start out by opening up two browser tabs, one should be pointing to your new project on JazzHub, and the second should be opened to your BlueMix Dashboard.  Later we will do things from both of these pages, so leave these in different tabs.  You might even want to launch some additional tabs for some of the other work.

Looking at your deployed application

So let’s first look at the BlueMix dashboard.  On the dashboard you can see a section with your applications, and another section with your services.  Look at your new BlueMix application.
TiaNodeInBlueMix
You can see in the lower left that the indicator for application health is green, meaning that your application is currently deployed and running.  In the middle of the box you see a link, which will take you to your running application (more on that in a minute).  In the upper right, there is a control icon, which will allow you to start, stop, or delete your BlueMix application.

If you just click on the box itself, you get taken to a page that displays the current state of your application.  From this screen, you are able to add services, monitor or change your runtime environment, and view files and logs on the system.  All of this is interactive, and allows you to control the amount of resources that you utilize, and gives you the ability to easily scale your deployment to fit your needs.  Spend some time poking around to see what is available.

Now lets go back to that original dashboard.  Just click on the “DASHBOARD” option in the top menu bar.  Now let’s click on the link to the actual running application.  When you do this, you will see a simple application pop up in a new browser tab.  This is the Twitter Analyzer Application.  Now just for fun, type in a twitter handle (username) into the search bar of the application, and click the “Analyze!” button.  You should see the Klout score for that particular user come up. Use your own Twitter ID to see your influence score from Klout, and then compare it to people like Shaquille O’Neil (Shaq), Shakira, or even me (dtoczala).  As you check these people out, notice how your collected inquiries are shown on the home page of the application.

Noting the need to change something

At this point we are somewhat familiar with the look of BlueMix, and with our sample application.  We do have a problem though.  Our sample application is a bit boring.  We want to give it a little life.  Rather than “Analyze!” for our button, we want our button to say, “Show Me The Score!”.  Since this is a social application, we might even want to fool around a bit, and change the help button in the upper menu bar, to read “I am confused”.

So now we have identified two changes that need to be made to our BlueMix application.  How do we communicate this to the development team?  To do so, go into the JazzHub tab in your browser.  If you are not already in the sample project, select it and go into it.  You should see an overview of your project.  Now click on the grey “Track & Plan” button in the upper right hand corner of your browser, which will bring you to the tracking and planning tools for your project.  If you click on the arrow next to the grey “Track & Plan” button, you can decide to activate the new Track and Plan capabilities.  Note: This demo script may not be “perfect”, as the look and feel of some of these capabilities can change over time, and will change based on the use of some of these features.

If You Are Using the Track and Plan Capability

You can see the framework.  If you don’t see any iterations, then go ahead and create some sprints by hitting the green “Create Iterations…” button.

  • Once you are done, go to the text box and type in the headline for your new work item.  Hit return.  You’ve just created a work item!  Now click on the link for your new work item.
  • Make the summary quick and understadable, “Change Analyze button” for example
  • Make sure that the Filed Against field is set to your project
  • Change Owned By to your own user id
  • Make the Priority Medium
  • Add a description of what you want done.  For example, I might put “This is so sleepy.  We need to change the text on the analyze button to be something other than analyze.  Could we make this button say something like “Show Me The Score!”?
  • Once you are done filling in your information, click the “Save” button in the upper right.  This saves the task into the work queue for your application.
  • Now use these same steps to create a second task, this one focused on changing the name of the Help button on the top menu.
    • Make sure that you click the “Save” button once you are done creating this second task.

Alternate directions if not using Track & Plan capability

Now we want to create a couple of work items, or tasks, that we will assign to ourselves as developers.

  • Click on a link to “Create a work item
    • If this isn’t available, then click on the “Work Items” option in the top menu bar, and then select “Create work item -> Task
  • Fill in the information for your work item
    • Make the summary quick and understadable, “Change Analyze button” for example
    • Make sure that the Filed Against field is set to your project
    • Change Owned By to your own user id
    • Make the Priority Medium
    • Add a description of what you want done.  For example, I might put “This is so sleepy.  We need to change the text on the analyze button to be something other than analyze.  Could we make this button say something like “Show Me The Score!”?
  • Once you are done filling in your information, click the “Save” button in the upper right.  This saves the task into the work queue for your application.
  • Now use these same steps to create a second task, this one focused on changing the name of the Help button on the top menu.
    • Make sure that you click the “Save” button once you are done creating this second task.

Making the change to the code

So now at this point you cease being a stakeholder, and now you become a developer.  How do I find out what work is assigned to me?  Once I find out what is assigned, how do I then go and do my work?  We will walk through a quick scenario where you find the work on your queue, pick something to do, and then go and do it.

  • Stay in that window where you just created those work items.  You can log out and then log back in if you want (to be more realistic, and to prove that we’re not cheating here), but you can do this more quickly right from where you are.  In the menu bar at the top of the display, click on “Work Items”, and select “Shared Queries” in the drop down menu.  (note: if you are using the Track & Plan beta, just click on “My Work” in the left hand nav bar.)
    • In the next step we are going to go and look at the work that we have in our queue.  We’ll also fool around a bit and show some of the collaboration that you can leverage to make your teams work together more smoothly.  If you are interested in the query capability of the environment, go and click on “Create Query” (it’s on the far right), and create a query for yourself right now.  It’s pretty easy to do.
  • You will see a set of pre-defined queries listed.  Click on the query “Open assigned to me“, to see a list of the current tasks assigned to you.  You will see the query return the two work items that you have just created.  Hover over the links in the query (but don’t click yet!).  See how a summary of the work item is shown in a quick popup?  This is great for when you want to dig in just a little bit, without navigating to the work item to see everything in the work item.
    • In a BlueMix world you will see things in context.  What does this mean?  It means that although you may have other projects out in the BlueMix universe, you will only see the work items assigned to you for the project that you are currently looking at.
    • if you are using the Track & Plan capability, you can just use the My Work link in the left hand nav bar.  This makes things much simpler, but you do lose the rich hover functionality
    • Take note of the two work items that you created.  Write down the ID’s of those work items.
      • Help menu item work item number ->
      • Analyze button work item number ->
  • Click on the link for the Analyze button work item.  You should see the work item displayed.  Now we are going to go and update the work item, and explore some of the features in the development environment, before going off and working on this.
    • Change the state of the work item (in the upper right) from “New” to “Start Working“, indicating that you will begin working on this.
    • In the discussion field, enter in some text explaining that you will fix this, and you will do an awesome job with it.  Fool around with some of the formatting.  In the menu bar at the top of the field, click on the “Insert User Link” icon.  Then search for your name, and click “Add and Close“.  You’ll notice that your name is now a link in the discussion area of this work item.  If you have a friend who is also registered, put their name in the work item as well.
    • Under the “Summary” field you will see some links for the tabs associated with this work item.  Click on the “Links” tab.  You might notice that you show up as a Subscriber for the work item.  That means that you will get notified whenever this work item changes.  Under links, if you click on the arrow next to the Related button, you can see the various types of relationships that you can create between this work item and other work items, code changes, and even external content.  Now you can click the “Save” butoon (upper right), and save your changes to the work item.  You’ll see that the current state has now changed to “In Progress”.
    • At this point, feel free to go and explore the other tabs, and the information on those tabs.
  • Now we want to go and work with some code.  If you look in the upper right of your browser, you will see an “Edit Code” button.  Press that button to begin looking at your code.
    • You might want to open the code in a different browser tab.  It’s up to you.
  • Let’s start by finding where in the code that Analyze button is.  Well navigate to the top page of our website.  To do so, click the arrow on the “www” folder, and then click on the index.html file.  You should see the contents of the file appear in the browser window.
  • We’ll start by looking in this file.  In the grey menu bar, click on “Edit“, and then in the drop down menu, select “Find…“.  Fill in the word “Analyze” to find the next occurence of the word in the file.  We see it in the title of the webpage, but that isn’t what we want to change.  Clicking on Next in that search dialog just keeps highlighting the same thing.  So the code for our button must be in another file….
  • So let’s find out where.  In the grey menu bar, click on “Edit“, and then in the drop down menu, select “Search files..“.  Fill in the word “Analyze”, and watch as a list of all of the files with “Analyze” in them appear.  We want the “all.html” file, because we now remember that this is the file with the button code.  Click on the link for “all.html“.
  • Now look at the top of the file, and make the code change that was suggested in the work item.  Change the “Analyze!” text displayed in the button, to “ShowMe The Score!”.  The diagram below shows the code change.

ShowMeTheScore

  • If you are doing this from memory, then you will want to go to the menu bar and click on “File“, and select “Save” in the dropdown menu.  If you are reading through this as you go, the environment has probably already saved your changes.  You can tell if you have unsaved changes by checking the file name at the top of the window.  If it has an asterisk next to it, then you know that your changes have not been saved yet.
  • So now we have our simple code change done.  Now we need to deliver our change.  In the vertical set of icons on the left side of your screen, you will see a cylinder.  Hover over the cylinder, and one of the options in the pop-up menu will be Git Status.  Click on “Git Status“.
    • Once you run through this demo, it might be fun to check out the Git repository, and get a feel for the full control that you have over your Git repository for this project.  You might also want to check out some of those other options that are available in that icon menu on the left hand side of your screen.
  • If you are running this demo right after doing the setup, you will see the changes that you made to the config.json and mainifest.yml files listed here.  If you see these, then follow the sub-bullets below
    • By clicking the arrow next to those files, you can review the changes made.  This is a nice little feature for code reviews and sanity checks.
    • Click the icon next to that for the all of those changed files to stage your changes to the Git repository.
    • Once you have all of the changes staged, click on the grey “Commit” button.and then enter in some comment for committing your initial changes.  You will also need to fill in your email address, to validate the changes going into the repository.  DO NOT COMMIT YOUR CHANGE TO THE “all.html” FILE!!
  • Now let’s look at the change that we made, and commit it to the repository
    • By clicking the arrow next to the file, you can review the changes that you made.
    • Click the icon next to that for the all.html file, to stage your changes to the Git repository.
    • Once you have the change staged, click on the grey “Commit” button.and then enter in some comment for committing your initial changes.  Mention the work item number in your comment.  (Remember writing that down earlier?)  So for me, my comment was “Changes for Analyse button as described in task 8225″.  You may also need to fill in your email address, to validate the changes going into the repository.

At this point you have made your code changes, and checked them into the SCM system.  Ordinarily we wouldn’t commit the changes after staging them.  We would go through a test cycle to test out our changes BEFORE we committed them.  Then we could back them out if they failed to address the work item requirements or introduced other issues.

Deploying the changed application

So now you have some changes, and you want to deploy them to an environment and get this code “live”.  It’s really easy with BlueMix, just follow the steps below.

  • Click on the pencil icon (“Show current folder”) on the left hand side icon bar.  This will get you back to the editor.
  • Find the manifest.yml file at the root directory and click on it.  You will see your manifest file contents.  Now look up above the editing window, and you will see a grey “Deploy” button.  Click the “Deploy” button.
    • If you have been working on this for a while, you may need to authenticate with BlueMix again, just provide your ID and password.
    • Otherwise, you will see a message indicating that your deployment is in progress.
    • While you are waiting for the deployment to complete, go to the tab in your browser with the BlueMix dashboard.   if you click the refresh button in the browser, you will see that he status of the application is now stopped.
    • Go back to your editing browser window, and wait for the “deployment in progress” message to disappear.  Once it is gone, go back to the browser tab where you had the BlueMix dashboard.  Click refresh in the browser, and you will see that your application is now running.
  • Click the link to the deployed application in your BlueMix dashboard.  You should see the Twitter Analyzer application now running, but with a much more informal button.  Your code changes have been applied and deployed.

At this point I think that you can figure out how to make changes to the Help button, just doing what you did above.

Looking for feedback

Do you have anything that would make this demo better?  Are there questions that you would like to see explored?  I have some topics for changing things below, if you have others, please forward them along to me.
IBM – dtoczala@us.ibm.com, Personal – dtoczala@gmail.com

About these ads

1 Response to “BlueMix Demo for Innovate”


  1. 1 Stephane Leroy June 5, 2014 at 5:04 pm

    Great post Daniel. The demo ran smoothly and I found it very useful. Thanks !


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




No Nonsense Tech Talk Member

These are my PERSONAL views and observations

The postings on this site are my own and don't necessarily represent IBM's position, strategies or opinions. Anyone is free to use, copy, distribute, modify or sell the source code and other materials directly linked from dtoczala.wordpress.com and is provided "as is" without warranties. I am not responsible for any harm or damage caused to your computer, software or anything else caused by the material.

Recent Twitter Traffic


Follow

Get every new post delivered to your Inbox.

Join 185 other followers

%d bloggers like this: