Upload
lauren-hayward-schaefer
View
621
Download
2
Tags:
Embed Size (px)
Citation preview
Intro to IBM
Bluemix DevOps
Services
A workshop
By Lauren Schaefer
Try me
Irsquom fabulous
1
Table of Contents Part 1A Deploying amp Updating a Simple App 2
Part 1B Deploying an App that Uses a Bluemix Service 6
Part 1C Planning Tracking amp Leveraging New Bluemix Services 9
Part 1D Deploying Automatically Using the Delivery Pipeline 17
Part 2A Live Edit 23
Part 2B Bluemix Debug 27
2
Part 1A Deploying amp Updating a Simple App Part 1 of this lab is broken into three pieces and demonstrates how easy it is to use IBM Bluemix DevOps
Services to plan code and deploy applications In part 1A youll learn how to deploy and make changes to a
simple application In part 1B youll learn how to deploy an application that uses a Bluemix service In part 1C
youll learn how to use the planning capabilities in DevOps Services to plan and track your app how to add a
new Bluemix service to an application and how to write code that leverages a Bluemix service Finally in part
1D yoursquoll learn how to use a delivery pipeline to automatically deploy changes to your app whenever code is
pushed to your projectrsquos repository
As a bonus youll also get an application that checks the prices of items in online stores for you so you dont
have to surf the web to see if your favorite items are on sale
Before we get started lets discuss the products well be using in this lab
IBM Bluemix DevOps Services is a place where you can collaborate with others to develop track plan
and deploy software
IBM Bluemix is an open-standards cloud-based platform where you can run the applications you develop
in DevOps Services Bluemix provides a variety of services that you can leverage in your applications so
you dont have to start coding from scratch
In part 1A youll be working with a sample online store called Laurens Lovely Landscapes The store currently
sells three prints each prints page displays the name image and price associated with the print
3
Learn this
1 Forking a project means to take a copy of the code in an existing project and put it in to a new
project
2 Making changes to an application can be fast and simple when you use the DevOps Services
Web IDE However users of DevOps Services can use whatever IDE they prefer when coding
Try this
1 Sign up for Bluemix and DevOps Services
a Navigate to httpibmbizcds-bluemix and sign up
b As part of the Bluemix registration process you will receive an e-mail asking you to
confirm your account If you do not confirm you are not registered If you do not
receive a confirmation e-mail send a note to idbluemixnet
c Navigate to httpibmbizcds-ids and register for DevOps Services using the same IBM
id you used for Bluemix
2 Fork Laurenrsquos Lovely Landscapes
At DevOps Services forking a project means taking a copy of the code in an existing project and
putting it in a new project
a Go to the Laurens Lovely Landscapes project overview page httpsibmbizcds-lll
b Click Edit Code in the upper-right corner You might be prompted to authenticate if you
have not already done so The Web IDE opens
c Select Tools gt Fork
d Type a name for your project leave the Add features for Scrum development and Make
this a Bluemix Project boxes checked and click CREATE
e Note that when the project has finished forking your new project name is listed in the
upper-left corner
Now you have a copy of the code in your own project The next step is to deploy it
3 Deploy Laurenrsquos Lovely Landscapes
To deploy an application means to bundle the project artifacts create an app at Bluemix
transfer the bundled app to Bluemix and start the app Bluemix application names and URLs are
created using properties which are often defined in the manifestyml file in a project The
Laurens Lovely Landscapes project already has the manifest created for you
a In the left navigation pane of the Web IDE select manifestyml
b Click the deploy button ( ) in the top bar
4
Note When you deploy through the Web IDE you are deploying the changes that are in
your Web IDErsquos workspace For example you may have changes you are currently
working on that you have not yet pushed to your projectrsquos repository Those changes
will be deployed
4 See Laurenrsquos Lovely Landscapes running
After your application is deployed to Bluemix a green dot displays in the status area of the top
gray bar
a Click the Open URL button ( ) in the top bar
b Browse your application that is running live on Bluemix Click on the Antarctica page and
note that the current price is $10000
5 Update the price of an item
Make a change to the application by updating the price of an item
a In the left pane of the Web IDE expand views and select antarcticatpl
b Scroll down until you see ltdiv id=pricegt10000ltdivgt
c Replace 10000 with 9999 (Wow thats a big sale -) )
d Click File gt Save
e Click the Deploy button ( )
f If prompted to stop and redeploy your app click OK
g After your application is deployed click the Open URL button ( ) in the top gray bar
h In your app that opens click Antarctica
Notice that the price of the item has been updated Success
Tweet this
Getting SaaS-y Just deployed an app to the cloud by leveraging Bluemix DevOpsServices
Check it out [insert link to your app] [Feeling extra sassy Include a selfie of you looking sassy]
Get creative
Laurenrsquos Lovely Landscapes is yours now Change the name change the color scheme change
the pictures or go crazy and implement a shopping cart Make the site your own and redeploy
5
Additional resources
MQTT Starfighter JazzHub Bluemix and live Scaling Out
httpswwwyoutubecomwatchv=b9hkCHmH7H4
Computerworld Forecast Study 2015 httpwwwidgenterprisecomreportcomputerworld-
forecast-study-2015
Transforming Enterprise Cloud Services
httpbooksgooglecombooksid=yyiPyIXgbxMCamppg=PA55v=onepageampqampf=false
Rapidly create a Nodejs app using a Bluemix boilerplate and DevOps Services
httpwwwibmcomdeveloperworkslibraryd-Bluemix-devops90indexhtml
6
Part 1B Deploying an App that Uses a Bluemix Service In this part youll be working with the Laurens Lovely Landscapes app you created in part 1A Youll also be
working with The Fabulous Price Finder app The Fabulous Price Finder provides you with the current prices of
items youre interested in purchasing online with the simple click of a button
Learn this
Leveraging Bluemix services like database services Watson services and DevOps Services makes
creating and managing apps easier
Deploying apps that leverage Bluemix services can be fast and easy
Try this
1 Fork the Fabulous Price Finder
a Go to the Fabulous Price Finder project overview page httpsibmbizcds-fbf
b Click EDIT CODE in the upper-right corner You might be prompted to authenticate if
you have not already done so
c Select Tools gt Fork
d Type a name for your project leave the Add features for Scrum development and Make
this a Bluemix Project boxes checked and click CREATE
e Note that when the project has finished forking your new project name is listed in the
upper-left corner
7
2 Deploy the Fabulous Price Finder
The Fabulous Price Finder uses the Cloudant NoSQL DB service hosted at Bluemix The Cloudant
database service provides access to a fully managed NoSQL JSON data layer thatrsquos always on To
get the Fabulous Price Finder running you deploy the application and then bind a new Cloudant
NoSQL DB instance to the application
a In the left navigation pane select manifestyml
b Click the Deploy ( ) button in the top gray bar Note that when the app finishes
deploying the database functionality will not yet work because you have not bound a
Cloudant NoSQL DB instance to it
c When the application is deployed click the Open application dashboard button ( ) in
the top gray bar
d If you are not already authenticated at Bluemix you might be prompted to do so After
you are authenticated you are redirected to your applications page on Bluemix
e Click ADD A SERVICE OR API
f Scroll down until you see the Cloudant NoSQL DB service Hint Check the Data and
Analytics section The catalog is constantly being updated with new services
g Click the Cloudant NoSQL DB service
h In the Cloudant NoSQL DB dialog leave the defaults in the dialog (the code assumes the
name of your Cloudant NoSQL DB service starts with cloudant) and click CREATE
i When prompted if you want to restage your application now click RESTAGE
j When the page indicates your app is running click your applications route to open it
3 Try the Fabulous Price Finder
Now that you have the Fabulous Price Finder running its time to explore
The home page of the Fabulous Price Finder enables you to record the items for which you want
to check prices You begin with the Antarctica print from the Laurens Lovely Landscapes app
you deployed
a In the form on the home page specify the name for the print (Antarctica) the URL for
the print from your online store (Hint Look for something similar to
httplaurenslovelylandscapes-some-long-string-of-random-
charactersmybluemixnetantarctica) and the id of the price field for the print
(price)
b Click Submit
You are redirected to the View Database page where you can see information about the item
you just stored You can record the details for other items if you like
8
4 Get Prices
After you have stored information about an item you can check its price
a On the home page click Get Prices
b On the Success page click View the database
Notice that the price of your item is now stored in the database If you like go back to your
Laurens Lovely Lanscapes project update the price of the Antarctica print (dont forget to
deploy your change) and click Get Prices again Note that the database reflects the new price of
the print
5 Explore the Cloudant Database
You can browse and update the contents of your Cloudant database which can be helpful when
debugging and working with your app
a Go to the Bluemix dashboard
b Log in if you are not already authenticated
c On the dashboard click on your FabulousPriceFinder app to open it
d Click your Cloudant NoSQL DB service tile to open it
e Click LAUNCH
f In the Databases section click on your database to open it
g Browse the documents youve added to your database
Tweet this
Check out the app I just deployed that leverages a Cloudant database on Bluemix [insert link
to your app]
Get creative
Enhance the apprsquos navigation so it is easier to move around the site or change the name of the
app to be less ldquofabulousrdquo and more you Make it your own
Additional resources
Cloudant-Python httpsgithubcomcloudant-labscloudant-python
Develop and manage Java apps with IBM Bluemix and DevOps Services
httpwwwibmcomdeveloperworkslibraryd-Bluemix-javadevopsindexhtml
9
Part 1C Planning Tracking amp Leveraging New Bluemix Services
Learn this
Leveraging software as a service that works well with the platform as a service of your choice
can greatly speed up your software delivery lifecycle
Agile planning and tracking is simple in the cloud and creates built-in traceability for all of your
teammateshellipwhether they are collocated or distributed
Writing code that leverages a Bluemix service can be fast and significantly reduce development
time
Try this
1 Plan a new feature to add to the Fabulous Price Finder
So far you have made use of existing code but you havent created anything new Time to
change that
When working with teammates or even by yourself organizing your ideas into user stories and
then organizing your user stories into a plan can be incredibly valuable
a Open Track amp Plan
i Open the Fabulous Price Finder project you created in the previous section by
navigating to DevOps Services signing in if youre not already authenticated
and clicking on your project on the My Projects page
ii Click the gear button ( ) in the upper-right corner to open the Project
Settings page
iii Click OPTIONS
iv On the page that loads select the Enable Track amp Plan checkbox (if it is not
already enabled) and click SAVE
v Click TRACK amp PLAN in the upper-right corner The Track amp Plan section is your
place to organize your ideas
b Create work items in your backlog
i On the left pane click Backlog
ii On the right pane type the following in the Create a work itemhellip field As a shopper I want a text message sent to me with the
price of each item so that I dont have to check the
website to view the prices
10
iii The tool will automatically detect the work item type is story and set the type
for you
iv In the icon bar below click the Owned By icon and select your username
v Click CREATE
vi Repeat Steps 2-5 to create work items for the following stories
1 As a shopper I want to organize my items by
store so that I only have to input the field ID
once per store instead of every item
2 As a shopper I want to see a graph of the price
of the items Im watching over time so I can
judge if its a good time to buy the items
3 As a shopper I want the prices to be retrieved
automatically for me on a daily basis so I dont
have to log in manually and click Get Prices
4 As a shopper I want the prices to be texted to
me only when the price has changed so Im not
getting inundated with text messages
vii Create a work item of type defect with the following summary The View
Database page fails to load when the database is empty
c Plan your work
Now that you have filled your backlog with stories its time to plan your first sprint
i On the left pane click Sprint Planning A sprint represents a period of time
Organize your user stories in sprints
ii Click Add Sprints
iii Configure the sprints so you have at least two and click Create
iv In the Backlog section rearrange your stories so they are in a ranked order by
dragging and dropping them Put As a shopper I want a text message sent to me with the price of each item so that
I dont have to check the website to view the prices as
the top item in the list and As a shopper I want the prices to be retrieved automatically for me on a daily basis so
I dont have to log in manually and click Get Prices as
the second highest item in the list
v Click the Sprint 1 dropbdown box and select Sprint 1 so that Sprint 1 appears to
the right of the backlog (You may need to click Sprint 2 and then click Sprint 1
in order for the sprint to appear)
11
vi Assume you have time to complete one user story per sprint Drag the topmost
item in the list to Sprint 1 (on the right)
vii In the sprint dropdown box select Sprint 2
viii Drag the new top most item to Sprint 2
d Track your work
Sprint 1 has begun Indicate that you have started working on the first work item by
marking it as In Progress
i In the sprint dropdown box select Sprint 1
ii In the Sprint 1 section click the Status New icon ( ) for the story planned
for Sprint 1
iii In the Status dialog click Start Working
iv Note the work item ID for your work item because you will need it later in this
lab
2 Implement the feature
Next implement the work item As a shopper I want a text message sent to me with the price of each item so that I dont have to check the
website to view the prices The idea of implementing a text messaging feature
might sound a bit daunting to you Fortunately Bluemix provides a Twilio service you can use
that handles sending the text message so you can implement this feature with only nine lines of
code
a Register with Twilio
If you do not already have an account with Twilio you need to register You also need
your Twilio AccountSID Auth Token and phone number
1 Go to httpswwwtwiliocom and sign up
2 Follow the on-screen instructions to verify your account
3 Note your Twilio phone number
4 After you have authenticated and are viewing your account click your ID in the
right corner and select Account
5 In the API Credentials section note your AccountSID and AuthToken (You
might want to leave this page open as you continue so you can easily copy the
credentials)
b If you do not want to receive text messages
If you do not want to receive text messages to your phone because your carrier charges
ridiculous amounts you can instead send the text messages to your Twilio account
12
phone number If yoursquore ok with receiving text messages on your phone skip this
section and continue on to step c
i In Twilio click NUMBERS in the top navigation bar
ii Click your phone number in the Number table
iii In the Messaging section replace the Request URL with any valid url (this
prevents a never ending loop of your phone number sending a response to the
text message it just received) For example you might replace the Request URL
with a link to your Laurenrsquos Lovely Landscapes app
iv Click Save
v Click Numbers in the top navigation bar
vi Click Verify a number
vii Click text you instead
viii Input your Twilio phone number in the Phone Number box
ix Click Text Me
x In a new tab or window navigate to twiliocom and click Account
xi Click NUMBERS in the top navigation bar
xii Click your number in the Number table
xiii Click Inbound in the Messaging section
xiv Hover over the text message in the table to see the incoming message Note
the verification number in the text messagersquos body
xv Return to your original tab or window and input the verification number
xvi Click Submit
When you want to view incoming text messages for your Twilio number return to the
details page for your number and click Inbound
c Add the Twilio service to the app
Begin by adding the Bluemix Twilio service to your app
i In DevOps Services click EDIT CODE in the upper-right corner
ii Click the Open application dashboard button ( ) The Bluemix page for your
app opens
iii Click ADD A SERVICE OR API
13
iv Scroll down until you see the Twilio service Hint Check the Mobile section The
catalog is constantly being updated with new services
v Click the Twilio service
vi In the Account SID and Auth Token fields paste your Twilio AccountSID and
AuthToken from your Twilio Account Settings page
vii Click CREATE
viii When prompted restage your application now by clicking RESTAGE
ix Wait for the page to indicate that your app is running
d Add code that uses the Twilio service
Add code to your app that sends a text message whenever a price is retrieved for an
item Use the Twilio service to actually send the text message
i Add Twilio to requirementstxt
Your app needs the Twilio module so you must add it to the requirementstxt
file
1 In the Web IDE open requirementstxt
2 Add a new line to the end of the file and type twilio
3 Select File gt Save
ii Connect to the Twilio service
To effectively use your Twilio service you must connect to it
1 In the Web IDE open the wsgipy file
2 In the Imports section around Line 55 add the following line from twiliorest import TwilioRestClient
3 As part of the for loop that begins around Line 65 add the following
lines
Note Be sure your spacing before these two lines (spaces and tabs) is
identical to the if statement that checks if the key starts with
ldquocloudantrdquo
if decoded_config[key][0][name]startswith(Twilio)
twilio_creds = decoded_config[key][0][credentials]
twilio_authToken = twilio_creds[authToken]
twilio_accountSID = twilio_creds[accountSID]
twilioClient = TwilioRestClient(twilio_accountSID twilio_authToken)
4 Your Twilio credentials are now stored in twilio_creds Your code
should now look like the following listing
14
for key value in decoded_configiteritems()
if decoded_config[key][0][name]startswith(Twilio)
twilio_creds = decoded_config[key][0][credentials]
twilio_authToken = twilio_creds[authToken]
twilio_accountSID = twilio_creds[accountSID]
twilioClient = TwilioRestClient(twilio_accountSID twilio_authToken)
if keystartswith(cloudant)
cloudant_creds = decoded_config[key][0][credentials]
cloudant_host = cloudant_creds[host]
cloudant_port = int(cloudant_creds[port])
cloudant_username = cloudant_creds[username]
cloudant_password = cloudant_creds[password]
cloudant_url = str(cloudant_creds[url])
account = cloudantAccount(cloudant_username)
login = accountlogin(cloudant_username cloudant_password)
assert loginstatus_code == 200
db = accountdatabase(dbname)
response = dbput()
print responsejson
5 Save your changes by selecting File gt Save
e Add code to send the text message
Now comes the fun part Its time to code
Continue to work in the wsgipy file and create a new function around Line 89 that
sends a text message def sendTextWithMessage(message)
message = twilioClientmessagescreate(to=+15555555555 from_=+15555555555
body=message)
f Replace the to number with the cell phone number or Twilio number where you want
the text messages to be sent (dont forget the country code)
g Replace the from number with your Twilio phone number (dont forget the country
code)
h In the getCurrentPrice function inside of the if statement that checks if the
price is not None add the following line of code sendTextWithMessage(The current price of s is s (item[name] price))
i Save your changes by selecting File gt Save
Thats it Youve implemented your feature with only nine lines of code
3 Deploy and test the feature
Now its time to deploy your application to Bluemix so you can test it
a Click the Deploy button ( )
b If prompted if you want to stop and redeploy click OK
c After your application has finished deploying click the Open URL button ( ) in the top
gray bar
d In your app click Get Prices
15
e Check your phone or Twilio number for a text message
If you like update the prices of the items in the store and get the prices again
4 Push the feature to the repository
Now that your feature is tested its time to push your changes to the Git repository
a In the leftmost bar of icons click the Git Repository button ( )
b In the box in the Working Directory Changes section type a comment similar to the
following being sure to replace 20 with the work item ID associated with the work item
you created Changes to implement the text messaging feature as
described in work item 20
c Select each change in the Changed Files section and click the COMMIT button
d In the OUTGOING section click PUSH
e If you are prompted for your committer information enter it and click OK
5 Complete the feature
To indicate that you have finished your feature mark your work item as complete
a In the Web IDE click TRACK amp PLAN in the upper-right corner
b In the right pane find your work item associated with the text messaging feature and
click the Status In Progress icon
c Click Set Done
d In the right pane scroll right until you see the RESOLVED section Notice that your work
item is now marked done
6 Discover the traceability
When you added a comment in your commit that mentioned your work item a link was
automatically created for you between the change and the work item
a In the right pane scroll to the Resolved view if you are not currently viewing your
resolved work items
b Click the textual summary of the work item associated with the text messaging feature
to open it
c In the work item click the Links tab
d In the LINKS section notice that a link was automatically generated for you Click the
link The Git Log displays
e Observe that you have a summary of the git commit and its associated work items
f Click GIT LOG in the left navigation to see a list of all of your git commits
16
Tweet this
Collaborate with me on this Bluemix app I created [insert link to your app] [include a
screenshot of the Web IDE with your codemdashTweets with images are more likely to get noticed]
Get creative
Invite a friend to join your project Navigate to your projects home page click Members and
invite a friend to join
Create new work items for features yoursquod like to implement or defects you find
Implement some of the stories you created or fix the defects you recorded
Additional resources
Twilio SMS and MMS Python Quickstart httpswwwtwiliocomdocsquickstartpythonsms
Managing Distributed Teams
httpswwwscrumallianceorgcommunityarticles2013julymanaging-distributed-
teamsaspx
So Long Scrum Hello Kanban httpsstormpathcomblogso-long-scrum-hello-kanban
17
Part 1D Deploying Automatically Using the Delivery Pipeline
Learn this
Deployment automation is one of the keys to a successful DevOps approach
You can create a complete delivery pipeline with multiple stages automated tests and
automatic deploys using DevOps Services
Try this
You can configure a multi-stage build and deployment pipeline to support your DevOps approach to
software development In this section you will configure a builder a deployment to your
development (dev) space and a deployment to your production (prod) space
1 Create a production space
Organizations and spaces are organizational units in the Cloud Foundry infrastructure that can
be used to store and track application resources An organization contains domains spaces and
users a space contains applications and services By default a dev (development) space is
created for you
a Navigate to the Bluemix dashboard if you are not there already
b Click Create a Space in the left menu
c In the Create a Space dialog input prod as your space name and click CREATE
2 Create services for deployments to your dev space
When deploying to your dev and prod spaces you will likely want to have services dedicated to
those deployments For example you want to use separate databases for each space Wersquoll
begin by creating services for each space
a Navigate to the Bluemix dashboard if you are not there already
b Click CATALOG
c Create the Cloudant NoSQL DB service
i Scroll down until you see the Cloudant NoSQL DB service Hint Check the Data
and Analytics section The catalog is constantly being updated with new
services
ii Click the Cloudant NoSQL DB service
iii In the Space dropdown choose dev
iv In the App dropdown choose Leave unbound
18
v In the Service name box leave the default or change the name to something
you like Be sure the name you choose begins with ldquocloudantrdquo as that is how
the code identifies the service
vi Note the name of your service as you will need it later
vii Click CREATE
d Create the Twilio service
i Navigate to the Catalog if you are not there already
ii Scroll down until you see the Twilio service Hint Check the Mobile section The
catalog is constantly being updated with new services
iii Click the Twilio service
iv In the Space dropdown choose dev
v In the App dropdown choose Leave unbound
vi In the Service name box leave the default or change the name to something
you like Be sure the name you choose begins with ldquotwiliordquo as that is how the
code identifies the service Note the name you choose as you will need it later
vii In the Account SID and Auth Token fields paste your Twilio AccountSID and
AuthToken from your Twilio Account Settings page
viii Click CREATE
3 Create services for deployments to your prod space
Repeat the steps from 2 above to create Cloudant NoSQL DB and Twilio services for
deployments to your prod space Be sure to select ldquoprodrdquo as the Space instead of ldquodevrdquo
4 Enable Advanced Build amp Deploy
You can configure a multi-stage build and deployment pipeline to support your DevOps
approach to software development Note that the pipeline only includes changes that have
been pushed to your projectrsquos repository changes that are in your workspace in the Web IDE
that have not been pushed to your projectrsquos repository will NOT be deployed as part of the
pipeline
a Open the Fabulous Price Finder project you created in the previous section by
navigating to DevOps Services signing in if youre not already authenticated and
clicking on your project on the My Projects page
b Click BUILD amp DEPLOY in the upper-right corner
5 Add a builder stage
The first stage we will create is a builder stage
19
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Build Stage
c Notice that the Input Type is set to SCM Repository by default This means the input for
the stage will be your git repository
d Notice that Run jobs whenever a change is pushed to Git is selected by default This
means that whenever you or someone on your team pushes code to your projectrsquos
repository the build stage will automatically be triggered
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Build
g Since this app does not require compilation (unlike a Java app) we will use the Simple
builder type Note that you can choose from a variety of builders
h Notice that the Stop running this stage if this job fails is checked by default This means
that any jobs further down the pipeline will not execute and the whole stage will be
marked as failed if a failure occurs
i Click SAVE
6 Add a ldquodeploy to development spacerdquo stage
Now we will add a deployment to the space that represents your development space Some
might call this a quality assurance or test space It is a place where developers can test their
code live in a production quality environment without actually putting it in production
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Dev Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the previous stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default This
will configure your pipeline so that whenever someone pushes code to your projectrsquos
repository the build step will run and if it succeeds a deploy to the development
environment will be kicked off
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Application Name to be a name that is unique to your Bluemix dev space
h By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
20
developers on your team will be able to test their code In the Script section after cf push ldquo$CF_APPrdquo
add -n whateverYouWantYourUrlToBe Note the url needs to be unique across
all Bluemix apps so be creative
i Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
j Next add a command to restage your app with the newly bound services cf restage $CF_APP
k The script section should now look similar to the following cf push $CF_APP -n fbf-lauren-dev
cf bind-service $CF_APP Cloudant-dev
cf bind-service $CF_APP Twilio-dev
cf restage $CF_APP
l Note that if we had automated tests associated with this project we could add a test
job to this stage so that the deploy would run and then tests could be executed against
that deployment
m Click SAVE
7 Add a deploy to production space stage
Now we will add a deployment to the space that represents your production space This space
is where you keep apps that your end users will use
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Prod Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the Build Stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default Since
we donrsquot have any automated tests included in this pipeline automatically deploying to
production is probably not safe Select Run jobs only when this stage is run manually
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Space to be prod
h Update the Application Name to be a name that is unique to your Bluemix prod space
i By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
21
your end users will be able to access your app In the Script section after cf push ldquo$CF_APPrdquo
add -n whateveryouwantyoururltobe Note the url needs to be unique across
all Bluemix apps so be creative
j Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
k Next add a command to restage your app with the newly bound services cf restage $CF_APP
l The script section should now look similar to the following cf push $CF_APP -n fbf-lauren
cf bind-service $CF_APP Cloudant-prod
cf bind-service $CF_APP Twilio-prod
cf restage $CF_APP
m Click SAVE
8 Kick off the pipeline
Now that we have the build pipeline configured itrsquos time to try it out To trigger the pipeline
we could make a change to our projectrsquos code and push the change to our Git repository or we
could manually request a build
a On the Pipeline page click the Play button ( ) in the Build Stage to kick off the first
stage of the pipeline manually
The build pipeline will go through the build and deploy to dev steps If you like what was
deployed to dev you can drag and drop the build from the Build Stage tile to the Prod
Deployment tile to deploy it there
Tweet this
Dove into DevOps by creating a release pipeline for my app [attach a screenshot of the Build amp
Deploy page for your app] Bluemix DevOpsServices
22
Get creative
Make a change to your code and watch the build pipeline automatically deploy it for you
Zero downtime deployments are very important to web applications Design and implement a
strategy to deploy your app to your production space without any downtime Hint check out
this article httpwwwibmcomdeveloperworkscloudlibrarycl-Bluemix-rollingpipeline
Additional resources
DevOps for Dummies ebook httpibmcodevopsfordummies
Top 10 Practices for Effective DevOps httpwwwdrdobbscomarchitecture-and-designtop-
10-practices-for-effective-devops240149363
Cloud Computing Trends 2014 State of the Cloud Survey
httpwwwrightscalecomblogcloud-industry-insightscloud-computing-trends-2014-state-
cloud-survey
DevOps Embracing Cloud Services httpwwwmidsizeinsidercomen-usarticledevops-
embracing-cloud-servicesVJmrScABg
23
Part 2A Live Edit In this part yoursquoll get to use an exciting new feature Live Edit The Live Edit feature allows you to make
changes to your application and have them deployed nearly instantaneously to your deployed app Itrsquos just like
editing files locallyhellipexcept you donrsquot have to set up a development environment
Since the Live Edit feature is currently optimized for Nodejs we will create a new app using the Personality
Insights Nodejs Web Starter boilerplate (what a concise name) The exciting thing about this boilerplate is that
it uses IBM Watson (remember Watson the supercomputer that beat Jeopardy champions a few years ago)
services
In this part you will create a new Bluemix app and leverage the Live Edit feature to see the changes you make
be deployed almost instantly to your running app
Learn this
Live Edit allows you to see changes you make in the DevOps Services Web IDE reflected in real-
time to your app deployed on Bluemix Itrsquos just like editing files locallyhellipexcept you donrsquot have
to set up a development environment
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app Changes you make in Node modules (like JavaScript files)
will require a fast restart of the app in order to be reflected in your deployed app
Try this
1 Sign up for DevOps Services if you have not done so already
a Navigate to httpibmbizcds-bluemix and sign up
b As part of the Bluemix registration process you will receive an e-mail asking you to
confirm your account If you do not confirm you are not registered If you do not
receive a confirmation e-mail send a note to idbluemixnet
c Navigate to httpibmbizcds-ids and register for DevOps Services using the same IBM
id you used for Bluemix
2 Create a Nodejs app using a Bluemix boilerplate
The first thing we need is a Nodejs app One of the fastest ways to get a new app is to use a
Bluemix boilerplate
a Navigate to httpibmbizcds-bluemix
b Log in if you are not already authenticated
c Click CATALOG The Catalog is your place to browse the available boilerplates (sample
applications) runtimes and services
d In the Boilerplates section click Personality Insights Nodejs Web Starter
24
e Input a name for the app (what the app will be referred to in Bluemix) and a host for the
app (the part of the url that will go before mybluemixnet) Note that the host must be
globally unique across all of Bluemix so be creative
f Click CREATE A copy of the boilerplate code will be put in to a new app for you and
then deployed to Bluemix
g Click Overview In the APP HEALTH section wait for the message ldquoYour app is
runningrdquo to be displayed
h When your app is running click on your route (toward the top of the page) to open your
running app
3 Explore the Nodejs app
Now that your app is running letrsquos take a moment to explore it The Personality Insights app
uses the Watson Personality Insights service to analyze text and determine personality traits of
the textrsquos author
a The app includes sample text from Moby Dick Click ANALYZE to learn about the
personality of Moby Dickrsquos author Herman Melville Textual output as well as a
graphical visualization are displayed
b Navigate to one of your favorite websites with English text (keep it office-friendlyhellipso
perhaps choose your favorite news site) and copy a block of text
c Return to your Personality Insights App and paste the text in the Try the Service box
d Click ANALYZE View the textual output as well as the graphical visualization
4 Prepare for Live Edit
Wersquove tested the app and now wersquoll prep to make some changes to it
a Return to the Bluemix page for your Personality Insights app If your app is not in a
separate window or tab right-click on your apprsquos route and choose an option to open
the link in a new window or tab
b Click ADD GIT in the upper-right corner
c Click CONTINUE in the Create Git Repository dialog Bluemix will take a copy of your
apprsquos code and put it in a Git repository hosted at DevOps Services
d Click CLOSE once the Git Repository has been successfully created
e Click EDIT CODE in the upper-right corner to open the DevOps Services Web IDE
f Toggle the Live Edit option to on
g If prompted to redeploy click OK The app will redeploy so changes can be made live to
your deployed app When the app finishes deploying a green dot will be displayed in
the run bar
25
When the app finishes deploying you are ready to make live edits
5 Change a static file
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app
a In the navigator view on the left expand views
b Select layoutjade
c Update the h2 to say something like ldquoThis open lab is so great that Irsquom going to Tweet
about itrdquo
d Switch to your tab or window that has your running app
e Refresh the page
f Note that the heading of your app was changed instantly You didnrsquot have to wait for
the app to redeploy
g Make a few more changes to static files and watch your app update in real time
6 Change a node module
Changes to node modules require a fast app restart (not a full redeploy) in order to be deployed
because the server caches node modules in memory
a Select the root directory of your app in the navigator in the left pane
b Click File gt New gt File
c The name of the file is highlighted so you can rename it Type defaulttexttxt and press
Enter or Return on your keyboard
d In the editor on the right type or paste the text that you want to use as the default text
in the app
e Select the appjs file in the navigator in the left pane
f In the editor on the right look for the dummy_text variable around line 25 Replace
mobydicktxt with defaulttexttxt
g In the web IDEs top bar click the Restart button ( )
h When the app finishes restarting (which only takes a few seconds) a green dot is
displayed in the run bar
26
i Switch to the tab or window that has your running app Refresh the page to see the new
text (If your browser cached the page and you dont see the text update browse to
your apps URL again and the change should be displayed)
Tweet this
Developing in the cloud using Bluemix DevOpsServices is now as fast and easy as developing
locally WhoKnew
Get creative
Create a new look for the Personality Insights app Open the CSS files located in the publiccss
directory and have fun making changes to the files Watch as your changes are deployed live
Additional resources
Everything AND the kitchen sync Bluemix Live Sync is here httpsdeveloperibmcomdevops-
services20150213everything-kitchen-sync-Bluemix-live-sync
Bluemix Live Sync documentation
httpswwwngbluemixnetdocscm_mmc=developerWorks-_-dWdevcenter-_-devops-
services-_-lpmanageappsbluemixlivehtmlbluemixlive
27
Part 2B Bluemix Debug Sometimes staring at the code to figure out whatrsquos going wrong just doesnrsquot work Sometimes you really need
to debug the code or access the environment where the app is running This is where Bluemix Debug comes in
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for your Nodejs
apps
In this part yoursquoll continue on with the Personality Insights Nodejs app you created in part 2A
Learn this
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for
your Nodejs apps
Try this Note The Node Inspector Debugger currently only works in Chrome You may want to take this
opportunity to change browsers if you are not already using Chrome
1 Open the IBM Bluemix Debugger
a Navigate to httpibmbizcds-ids and sign in if you are not already authenticated
b In My Projects locate the tile for your Personality Insights app Click the Edit Code icon
( ) to open the Web IDE for your project
c In the Web IDErsquos top bar click the Debug button ( )
d When prompted for credentials input your IBM id and password
2 Use the shell
The Bluemix Shell allows you to explore and interact with the Bluemix environment where your
app is running by using a built-in bash shell
a On the IBM Bluemix Debugger page for your project click Open Shell A shell client
opens in your browser
b View the processes running in your Bluemix environment by inputting the following
command top
c Click NEW WINDOW
d Drag and drop the new window so that you can continue to observe your processes
while you explore the log files
e In the new window change directory to the log files by inputting the following
command cd logs
28
f View a list of the files in the logs directory by inputting the following command ls
g Notice that staging_tasklog is a file in your logs directory View the last 10 lines of the
log file by inputting the following command tail staging_tasklog
3 Use the Debugger
The Debugger allows you to debug Nodejs apps
a On the IBM Bluemix Debugger page for your project click Open Debugger The
Debugger takes about 30 seconds to load
b If the Navigator is not displayed on the left click the Expand Navigator button
c Select appjs in the Navigator to open the file
d Add a breakpoint on line 48 by clicking 48
e In a different tab or window navigate to your running app
f Click Analyze
g Switch back to the tab or window with your Debugger Notice that the breakpoint has
been hit On the right you can view the Call Stack and Variables You can also use
buttons on the right to step over the next function call step into the next function call
and step out of the next function call
h When you have finished exploring your running app click the Resume script execution
button ( ) on the right
Note that from the IBM Bluemix Debugger page you can choose to suspend the app which will
restart the app and break at the first line of the app
29
Tweet this
Bluemix + DevOpsServices + Shell = a happy developer NoDownloadsRequired [include a
screenshot of the shell in your browser]
Just debugged my Bluemix app by using the debugger in DevOpsServices
NoDownloadsRequired [take a selfie of you in front of your debugger looking very excited]
Get creative
Use some of your favorite commands to explore the Bluemix environment where your app runs
Additional resources
Bluemix Live Sync
httpswwwngBluemixnetdocsmanageappsBluemixlivehtmlBluemixlivedebugger
Learning the Shell httplinuxcommandorglc3_learning_the_shellphp
1
Table of Contents Part 1A Deploying amp Updating a Simple App 2
Part 1B Deploying an App that Uses a Bluemix Service 6
Part 1C Planning Tracking amp Leveraging New Bluemix Services 9
Part 1D Deploying Automatically Using the Delivery Pipeline 17
Part 2A Live Edit 23
Part 2B Bluemix Debug 27
2
Part 1A Deploying amp Updating a Simple App Part 1 of this lab is broken into three pieces and demonstrates how easy it is to use IBM Bluemix DevOps
Services to plan code and deploy applications In part 1A youll learn how to deploy and make changes to a
simple application In part 1B youll learn how to deploy an application that uses a Bluemix service In part 1C
youll learn how to use the planning capabilities in DevOps Services to plan and track your app how to add a
new Bluemix service to an application and how to write code that leverages a Bluemix service Finally in part
1D yoursquoll learn how to use a delivery pipeline to automatically deploy changes to your app whenever code is
pushed to your projectrsquos repository
As a bonus youll also get an application that checks the prices of items in online stores for you so you dont
have to surf the web to see if your favorite items are on sale
Before we get started lets discuss the products well be using in this lab
IBM Bluemix DevOps Services is a place where you can collaborate with others to develop track plan
and deploy software
IBM Bluemix is an open-standards cloud-based platform where you can run the applications you develop
in DevOps Services Bluemix provides a variety of services that you can leverage in your applications so
you dont have to start coding from scratch
In part 1A youll be working with a sample online store called Laurens Lovely Landscapes The store currently
sells three prints each prints page displays the name image and price associated with the print
3
Learn this
1 Forking a project means to take a copy of the code in an existing project and put it in to a new
project
2 Making changes to an application can be fast and simple when you use the DevOps Services
Web IDE However users of DevOps Services can use whatever IDE they prefer when coding
Try this
1 Sign up for Bluemix and DevOps Services
a Navigate to httpibmbizcds-bluemix and sign up
b As part of the Bluemix registration process you will receive an e-mail asking you to
confirm your account If you do not confirm you are not registered If you do not
receive a confirmation e-mail send a note to idbluemixnet
c Navigate to httpibmbizcds-ids and register for DevOps Services using the same IBM
id you used for Bluemix
2 Fork Laurenrsquos Lovely Landscapes
At DevOps Services forking a project means taking a copy of the code in an existing project and
putting it in a new project
a Go to the Laurens Lovely Landscapes project overview page httpsibmbizcds-lll
b Click Edit Code in the upper-right corner You might be prompted to authenticate if you
have not already done so The Web IDE opens
c Select Tools gt Fork
d Type a name for your project leave the Add features for Scrum development and Make
this a Bluemix Project boxes checked and click CREATE
e Note that when the project has finished forking your new project name is listed in the
upper-left corner
Now you have a copy of the code in your own project The next step is to deploy it
3 Deploy Laurenrsquos Lovely Landscapes
To deploy an application means to bundle the project artifacts create an app at Bluemix
transfer the bundled app to Bluemix and start the app Bluemix application names and URLs are
created using properties which are often defined in the manifestyml file in a project The
Laurens Lovely Landscapes project already has the manifest created for you
a In the left navigation pane of the Web IDE select manifestyml
b Click the deploy button ( ) in the top bar
4
Note When you deploy through the Web IDE you are deploying the changes that are in
your Web IDErsquos workspace For example you may have changes you are currently
working on that you have not yet pushed to your projectrsquos repository Those changes
will be deployed
4 See Laurenrsquos Lovely Landscapes running
After your application is deployed to Bluemix a green dot displays in the status area of the top
gray bar
a Click the Open URL button ( ) in the top bar
b Browse your application that is running live on Bluemix Click on the Antarctica page and
note that the current price is $10000
5 Update the price of an item
Make a change to the application by updating the price of an item
a In the left pane of the Web IDE expand views and select antarcticatpl
b Scroll down until you see ltdiv id=pricegt10000ltdivgt
c Replace 10000 with 9999 (Wow thats a big sale -) )
d Click File gt Save
e Click the Deploy button ( )
f If prompted to stop and redeploy your app click OK
g After your application is deployed click the Open URL button ( ) in the top gray bar
h In your app that opens click Antarctica
Notice that the price of the item has been updated Success
Tweet this
Getting SaaS-y Just deployed an app to the cloud by leveraging Bluemix DevOpsServices
Check it out [insert link to your app] [Feeling extra sassy Include a selfie of you looking sassy]
Get creative
Laurenrsquos Lovely Landscapes is yours now Change the name change the color scheme change
the pictures or go crazy and implement a shopping cart Make the site your own and redeploy
5
Additional resources
MQTT Starfighter JazzHub Bluemix and live Scaling Out
httpswwwyoutubecomwatchv=b9hkCHmH7H4
Computerworld Forecast Study 2015 httpwwwidgenterprisecomreportcomputerworld-
forecast-study-2015
Transforming Enterprise Cloud Services
httpbooksgooglecombooksid=yyiPyIXgbxMCamppg=PA55v=onepageampqampf=false
Rapidly create a Nodejs app using a Bluemix boilerplate and DevOps Services
httpwwwibmcomdeveloperworkslibraryd-Bluemix-devops90indexhtml
6
Part 1B Deploying an App that Uses a Bluemix Service In this part youll be working with the Laurens Lovely Landscapes app you created in part 1A Youll also be
working with The Fabulous Price Finder app The Fabulous Price Finder provides you with the current prices of
items youre interested in purchasing online with the simple click of a button
Learn this
Leveraging Bluemix services like database services Watson services and DevOps Services makes
creating and managing apps easier
Deploying apps that leverage Bluemix services can be fast and easy
Try this
1 Fork the Fabulous Price Finder
a Go to the Fabulous Price Finder project overview page httpsibmbizcds-fbf
b Click EDIT CODE in the upper-right corner You might be prompted to authenticate if
you have not already done so
c Select Tools gt Fork
d Type a name for your project leave the Add features for Scrum development and Make
this a Bluemix Project boxes checked and click CREATE
e Note that when the project has finished forking your new project name is listed in the
upper-left corner
7
2 Deploy the Fabulous Price Finder
The Fabulous Price Finder uses the Cloudant NoSQL DB service hosted at Bluemix The Cloudant
database service provides access to a fully managed NoSQL JSON data layer thatrsquos always on To
get the Fabulous Price Finder running you deploy the application and then bind a new Cloudant
NoSQL DB instance to the application
a In the left navigation pane select manifestyml
b Click the Deploy ( ) button in the top gray bar Note that when the app finishes
deploying the database functionality will not yet work because you have not bound a
Cloudant NoSQL DB instance to it
c When the application is deployed click the Open application dashboard button ( ) in
the top gray bar
d If you are not already authenticated at Bluemix you might be prompted to do so After
you are authenticated you are redirected to your applications page on Bluemix
e Click ADD A SERVICE OR API
f Scroll down until you see the Cloudant NoSQL DB service Hint Check the Data and
Analytics section The catalog is constantly being updated with new services
g Click the Cloudant NoSQL DB service
h In the Cloudant NoSQL DB dialog leave the defaults in the dialog (the code assumes the
name of your Cloudant NoSQL DB service starts with cloudant) and click CREATE
i When prompted if you want to restage your application now click RESTAGE
j When the page indicates your app is running click your applications route to open it
3 Try the Fabulous Price Finder
Now that you have the Fabulous Price Finder running its time to explore
The home page of the Fabulous Price Finder enables you to record the items for which you want
to check prices You begin with the Antarctica print from the Laurens Lovely Landscapes app
you deployed
a In the form on the home page specify the name for the print (Antarctica) the URL for
the print from your online store (Hint Look for something similar to
httplaurenslovelylandscapes-some-long-string-of-random-
charactersmybluemixnetantarctica) and the id of the price field for the print
(price)
b Click Submit
You are redirected to the View Database page where you can see information about the item
you just stored You can record the details for other items if you like
8
4 Get Prices
After you have stored information about an item you can check its price
a On the home page click Get Prices
b On the Success page click View the database
Notice that the price of your item is now stored in the database If you like go back to your
Laurens Lovely Lanscapes project update the price of the Antarctica print (dont forget to
deploy your change) and click Get Prices again Note that the database reflects the new price of
the print
5 Explore the Cloudant Database
You can browse and update the contents of your Cloudant database which can be helpful when
debugging and working with your app
a Go to the Bluemix dashboard
b Log in if you are not already authenticated
c On the dashboard click on your FabulousPriceFinder app to open it
d Click your Cloudant NoSQL DB service tile to open it
e Click LAUNCH
f In the Databases section click on your database to open it
g Browse the documents youve added to your database
Tweet this
Check out the app I just deployed that leverages a Cloudant database on Bluemix [insert link
to your app]
Get creative
Enhance the apprsquos navigation so it is easier to move around the site or change the name of the
app to be less ldquofabulousrdquo and more you Make it your own
Additional resources
Cloudant-Python httpsgithubcomcloudant-labscloudant-python
Develop and manage Java apps with IBM Bluemix and DevOps Services
httpwwwibmcomdeveloperworkslibraryd-Bluemix-javadevopsindexhtml
9
Part 1C Planning Tracking amp Leveraging New Bluemix Services
Learn this
Leveraging software as a service that works well with the platform as a service of your choice
can greatly speed up your software delivery lifecycle
Agile planning and tracking is simple in the cloud and creates built-in traceability for all of your
teammateshellipwhether they are collocated or distributed
Writing code that leverages a Bluemix service can be fast and significantly reduce development
time
Try this
1 Plan a new feature to add to the Fabulous Price Finder
So far you have made use of existing code but you havent created anything new Time to
change that
When working with teammates or even by yourself organizing your ideas into user stories and
then organizing your user stories into a plan can be incredibly valuable
a Open Track amp Plan
i Open the Fabulous Price Finder project you created in the previous section by
navigating to DevOps Services signing in if youre not already authenticated
and clicking on your project on the My Projects page
ii Click the gear button ( ) in the upper-right corner to open the Project
Settings page
iii Click OPTIONS
iv On the page that loads select the Enable Track amp Plan checkbox (if it is not
already enabled) and click SAVE
v Click TRACK amp PLAN in the upper-right corner The Track amp Plan section is your
place to organize your ideas
b Create work items in your backlog
i On the left pane click Backlog
ii On the right pane type the following in the Create a work itemhellip field As a shopper I want a text message sent to me with the
price of each item so that I dont have to check the
website to view the prices
10
iii The tool will automatically detect the work item type is story and set the type
for you
iv In the icon bar below click the Owned By icon and select your username
v Click CREATE
vi Repeat Steps 2-5 to create work items for the following stories
1 As a shopper I want to organize my items by
store so that I only have to input the field ID
once per store instead of every item
2 As a shopper I want to see a graph of the price
of the items Im watching over time so I can
judge if its a good time to buy the items
3 As a shopper I want the prices to be retrieved
automatically for me on a daily basis so I dont
have to log in manually and click Get Prices
4 As a shopper I want the prices to be texted to
me only when the price has changed so Im not
getting inundated with text messages
vii Create a work item of type defect with the following summary The View
Database page fails to load when the database is empty
c Plan your work
Now that you have filled your backlog with stories its time to plan your first sprint
i On the left pane click Sprint Planning A sprint represents a period of time
Organize your user stories in sprints
ii Click Add Sprints
iii Configure the sprints so you have at least two and click Create
iv In the Backlog section rearrange your stories so they are in a ranked order by
dragging and dropping them Put As a shopper I want a text message sent to me with the price of each item so that
I dont have to check the website to view the prices as
the top item in the list and As a shopper I want the prices to be retrieved automatically for me on a daily basis so
I dont have to log in manually and click Get Prices as
the second highest item in the list
v Click the Sprint 1 dropbdown box and select Sprint 1 so that Sprint 1 appears to
the right of the backlog (You may need to click Sprint 2 and then click Sprint 1
in order for the sprint to appear)
11
vi Assume you have time to complete one user story per sprint Drag the topmost
item in the list to Sprint 1 (on the right)
vii In the sprint dropdown box select Sprint 2
viii Drag the new top most item to Sprint 2
d Track your work
Sprint 1 has begun Indicate that you have started working on the first work item by
marking it as In Progress
i In the sprint dropdown box select Sprint 1
ii In the Sprint 1 section click the Status New icon ( ) for the story planned
for Sprint 1
iii In the Status dialog click Start Working
iv Note the work item ID for your work item because you will need it later in this
lab
2 Implement the feature
Next implement the work item As a shopper I want a text message sent to me with the price of each item so that I dont have to check the
website to view the prices The idea of implementing a text messaging feature
might sound a bit daunting to you Fortunately Bluemix provides a Twilio service you can use
that handles sending the text message so you can implement this feature with only nine lines of
code
a Register with Twilio
If you do not already have an account with Twilio you need to register You also need
your Twilio AccountSID Auth Token and phone number
1 Go to httpswwwtwiliocom and sign up
2 Follow the on-screen instructions to verify your account
3 Note your Twilio phone number
4 After you have authenticated and are viewing your account click your ID in the
right corner and select Account
5 In the API Credentials section note your AccountSID and AuthToken (You
might want to leave this page open as you continue so you can easily copy the
credentials)
b If you do not want to receive text messages
If you do not want to receive text messages to your phone because your carrier charges
ridiculous amounts you can instead send the text messages to your Twilio account
12
phone number If yoursquore ok with receiving text messages on your phone skip this
section and continue on to step c
i In Twilio click NUMBERS in the top navigation bar
ii Click your phone number in the Number table
iii In the Messaging section replace the Request URL with any valid url (this
prevents a never ending loop of your phone number sending a response to the
text message it just received) For example you might replace the Request URL
with a link to your Laurenrsquos Lovely Landscapes app
iv Click Save
v Click Numbers in the top navigation bar
vi Click Verify a number
vii Click text you instead
viii Input your Twilio phone number in the Phone Number box
ix Click Text Me
x In a new tab or window navigate to twiliocom and click Account
xi Click NUMBERS in the top navigation bar
xii Click your number in the Number table
xiii Click Inbound in the Messaging section
xiv Hover over the text message in the table to see the incoming message Note
the verification number in the text messagersquos body
xv Return to your original tab or window and input the verification number
xvi Click Submit
When you want to view incoming text messages for your Twilio number return to the
details page for your number and click Inbound
c Add the Twilio service to the app
Begin by adding the Bluemix Twilio service to your app
i In DevOps Services click EDIT CODE in the upper-right corner
ii Click the Open application dashboard button ( ) The Bluemix page for your
app opens
iii Click ADD A SERVICE OR API
13
iv Scroll down until you see the Twilio service Hint Check the Mobile section The
catalog is constantly being updated with new services
v Click the Twilio service
vi In the Account SID and Auth Token fields paste your Twilio AccountSID and
AuthToken from your Twilio Account Settings page
vii Click CREATE
viii When prompted restage your application now by clicking RESTAGE
ix Wait for the page to indicate that your app is running
d Add code that uses the Twilio service
Add code to your app that sends a text message whenever a price is retrieved for an
item Use the Twilio service to actually send the text message
i Add Twilio to requirementstxt
Your app needs the Twilio module so you must add it to the requirementstxt
file
1 In the Web IDE open requirementstxt
2 Add a new line to the end of the file and type twilio
3 Select File gt Save
ii Connect to the Twilio service
To effectively use your Twilio service you must connect to it
1 In the Web IDE open the wsgipy file
2 In the Imports section around Line 55 add the following line from twiliorest import TwilioRestClient
3 As part of the for loop that begins around Line 65 add the following
lines
Note Be sure your spacing before these two lines (spaces and tabs) is
identical to the if statement that checks if the key starts with
ldquocloudantrdquo
if decoded_config[key][0][name]startswith(Twilio)
twilio_creds = decoded_config[key][0][credentials]
twilio_authToken = twilio_creds[authToken]
twilio_accountSID = twilio_creds[accountSID]
twilioClient = TwilioRestClient(twilio_accountSID twilio_authToken)
4 Your Twilio credentials are now stored in twilio_creds Your code
should now look like the following listing
14
for key value in decoded_configiteritems()
if decoded_config[key][0][name]startswith(Twilio)
twilio_creds = decoded_config[key][0][credentials]
twilio_authToken = twilio_creds[authToken]
twilio_accountSID = twilio_creds[accountSID]
twilioClient = TwilioRestClient(twilio_accountSID twilio_authToken)
if keystartswith(cloudant)
cloudant_creds = decoded_config[key][0][credentials]
cloudant_host = cloudant_creds[host]
cloudant_port = int(cloudant_creds[port])
cloudant_username = cloudant_creds[username]
cloudant_password = cloudant_creds[password]
cloudant_url = str(cloudant_creds[url])
account = cloudantAccount(cloudant_username)
login = accountlogin(cloudant_username cloudant_password)
assert loginstatus_code == 200
db = accountdatabase(dbname)
response = dbput()
print responsejson
5 Save your changes by selecting File gt Save
e Add code to send the text message
Now comes the fun part Its time to code
Continue to work in the wsgipy file and create a new function around Line 89 that
sends a text message def sendTextWithMessage(message)
message = twilioClientmessagescreate(to=+15555555555 from_=+15555555555
body=message)
f Replace the to number with the cell phone number or Twilio number where you want
the text messages to be sent (dont forget the country code)
g Replace the from number with your Twilio phone number (dont forget the country
code)
h In the getCurrentPrice function inside of the if statement that checks if the
price is not None add the following line of code sendTextWithMessage(The current price of s is s (item[name] price))
i Save your changes by selecting File gt Save
Thats it Youve implemented your feature with only nine lines of code
3 Deploy and test the feature
Now its time to deploy your application to Bluemix so you can test it
a Click the Deploy button ( )
b If prompted if you want to stop and redeploy click OK
c After your application has finished deploying click the Open URL button ( ) in the top
gray bar
d In your app click Get Prices
15
e Check your phone or Twilio number for a text message
If you like update the prices of the items in the store and get the prices again
4 Push the feature to the repository
Now that your feature is tested its time to push your changes to the Git repository
a In the leftmost bar of icons click the Git Repository button ( )
b In the box in the Working Directory Changes section type a comment similar to the
following being sure to replace 20 with the work item ID associated with the work item
you created Changes to implement the text messaging feature as
described in work item 20
c Select each change in the Changed Files section and click the COMMIT button
d In the OUTGOING section click PUSH
e If you are prompted for your committer information enter it and click OK
5 Complete the feature
To indicate that you have finished your feature mark your work item as complete
a In the Web IDE click TRACK amp PLAN in the upper-right corner
b In the right pane find your work item associated with the text messaging feature and
click the Status In Progress icon
c Click Set Done
d In the right pane scroll right until you see the RESOLVED section Notice that your work
item is now marked done
6 Discover the traceability
When you added a comment in your commit that mentioned your work item a link was
automatically created for you between the change and the work item
a In the right pane scroll to the Resolved view if you are not currently viewing your
resolved work items
b Click the textual summary of the work item associated with the text messaging feature
to open it
c In the work item click the Links tab
d In the LINKS section notice that a link was automatically generated for you Click the
link The Git Log displays
e Observe that you have a summary of the git commit and its associated work items
f Click GIT LOG in the left navigation to see a list of all of your git commits
16
Tweet this
Collaborate with me on this Bluemix app I created [insert link to your app] [include a
screenshot of the Web IDE with your codemdashTweets with images are more likely to get noticed]
Get creative
Invite a friend to join your project Navigate to your projects home page click Members and
invite a friend to join
Create new work items for features yoursquod like to implement or defects you find
Implement some of the stories you created or fix the defects you recorded
Additional resources
Twilio SMS and MMS Python Quickstart httpswwwtwiliocomdocsquickstartpythonsms
Managing Distributed Teams
httpswwwscrumallianceorgcommunityarticles2013julymanaging-distributed-
teamsaspx
So Long Scrum Hello Kanban httpsstormpathcomblogso-long-scrum-hello-kanban
17
Part 1D Deploying Automatically Using the Delivery Pipeline
Learn this
Deployment automation is one of the keys to a successful DevOps approach
You can create a complete delivery pipeline with multiple stages automated tests and
automatic deploys using DevOps Services
Try this
You can configure a multi-stage build and deployment pipeline to support your DevOps approach to
software development In this section you will configure a builder a deployment to your
development (dev) space and a deployment to your production (prod) space
1 Create a production space
Organizations and spaces are organizational units in the Cloud Foundry infrastructure that can
be used to store and track application resources An organization contains domains spaces and
users a space contains applications and services By default a dev (development) space is
created for you
a Navigate to the Bluemix dashboard if you are not there already
b Click Create a Space in the left menu
c In the Create a Space dialog input prod as your space name and click CREATE
2 Create services for deployments to your dev space
When deploying to your dev and prod spaces you will likely want to have services dedicated to
those deployments For example you want to use separate databases for each space Wersquoll
begin by creating services for each space
a Navigate to the Bluemix dashboard if you are not there already
b Click CATALOG
c Create the Cloudant NoSQL DB service
i Scroll down until you see the Cloudant NoSQL DB service Hint Check the Data
and Analytics section The catalog is constantly being updated with new
services
ii Click the Cloudant NoSQL DB service
iii In the Space dropdown choose dev
iv In the App dropdown choose Leave unbound
18
v In the Service name box leave the default or change the name to something
you like Be sure the name you choose begins with ldquocloudantrdquo as that is how
the code identifies the service
vi Note the name of your service as you will need it later
vii Click CREATE
d Create the Twilio service
i Navigate to the Catalog if you are not there already
ii Scroll down until you see the Twilio service Hint Check the Mobile section The
catalog is constantly being updated with new services
iii Click the Twilio service
iv In the Space dropdown choose dev
v In the App dropdown choose Leave unbound
vi In the Service name box leave the default or change the name to something
you like Be sure the name you choose begins with ldquotwiliordquo as that is how the
code identifies the service Note the name you choose as you will need it later
vii In the Account SID and Auth Token fields paste your Twilio AccountSID and
AuthToken from your Twilio Account Settings page
viii Click CREATE
3 Create services for deployments to your prod space
Repeat the steps from 2 above to create Cloudant NoSQL DB and Twilio services for
deployments to your prod space Be sure to select ldquoprodrdquo as the Space instead of ldquodevrdquo
4 Enable Advanced Build amp Deploy
You can configure a multi-stage build and deployment pipeline to support your DevOps
approach to software development Note that the pipeline only includes changes that have
been pushed to your projectrsquos repository changes that are in your workspace in the Web IDE
that have not been pushed to your projectrsquos repository will NOT be deployed as part of the
pipeline
a Open the Fabulous Price Finder project you created in the previous section by
navigating to DevOps Services signing in if youre not already authenticated and
clicking on your project on the My Projects page
b Click BUILD amp DEPLOY in the upper-right corner
5 Add a builder stage
The first stage we will create is a builder stage
19
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Build Stage
c Notice that the Input Type is set to SCM Repository by default This means the input for
the stage will be your git repository
d Notice that Run jobs whenever a change is pushed to Git is selected by default This
means that whenever you or someone on your team pushes code to your projectrsquos
repository the build stage will automatically be triggered
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Build
g Since this app does not require compilation (unlike a Java app) we will use the Simple
builder type Note that you can choose from a variety of builders
h Notice that the Stop running this stage if this job fails is checked by default This means
that any jobs further down the pipeline will not execute and the whole stage will be
marked as failed if a failure occurs
i Click SAVE
6 Add a ldquodeploy to development spacerdquo stage
Now we will add a deployment to the space that represents your development space Some
might call this a quality assurance or test space It is a place where developers can test their
code live in a production quality environment without actually putting it in production
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Dev Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the previous stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default This
will configure your pipeline so that whenever someone pushes code to your projectrsquos
repository the build step will run and if it succeeds a deploy to the development
environment will be kicked off
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Application Name to be a name that is unique to your Bluemix dev space
h By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
20
developers on your team will be able to test their code In the Script section after cf push ldquo$CF_APPrdquo
add -n whateverYouWantYourUrlToBe Note the url needs to be unique across
all Bluemix apps so be creative
i Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
j Next add a command to restage your app with the newly bound services cf restage $CF_APP
k The script section should now look similar to the following cf push $CF_APP -n fbf-lauren-dev
cf bind-service $CF_APP Cloudant-dev
cf bind-service $CF_APP Twilio-dev
cf restage $CF_APP
l Note that if we had automated tests associated with this project we could add a test
job to this stage so that the deploy would run and then tests could be executed against
that deployment
m Click SAVE
7 Add a deploy to production space stage
Now we will add a deployment to the space that represents your production space This space
is where you keep apps that your end users will use
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Prod Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the Build Stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default Since
we donrsquot have any automated tests included in this pipeline automatically deploying to
production is probably not safe Select Run jobs only when this stage is run manually
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Space to be prod
h Update the Application Name to be a name that is unique to your Bluemix prod space
i By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
21
your end users will be able to access your app In the Script section after cf push ldquo$CF_APPrdquo
add -n whateveryouwantyoururltobe Note the url needs to be unique across
all Bluemix apps so be creative
j Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
k Next add a command to restage your app with the newly bound services cf restage $CF_APP
l The script section should now look similar to the following cf push $CF_APP -n fbf-lauren
cf bind-service $CF_APP Cloudant-prod
cf bind-service $CF_APP Twilio-prod
cf restage $CF_APP
m Click SAVE
8 Kick off the pipeline
Now that we have the build pipeline configured itrsquos time to try it out To trigger the pipeline
we could make a change to our projectrsquos code and push the change to our Git repository or we
could manually request a build
a On the Pipeline page click the Play button ( ) in the Build Stage to kick off the first
stage of the pipeline manually
The build pipeline will go through the build and deploy to dev steps If you like what was
deployed to dev you can drag and drop the build from the Build Stage tile to the Prod
Deployment tile to deploy it there
Tweet this
Dove into DevOps by creating a release pipeline for my app [attach a screenshot of the Build amp
Deploy page for your app] Bluemix DevOpsServices
22
Get creative
Make a change to your code and watch the build pipeline automatically deploy it for you
Zero downtime deployments are very important to web applications Design and implement a
strategy to deploy your app to your production space without any downtime Hint check out
this article httpwwwibmcomdeveloperworkscloudlibrarycl-Bluemix-rollingpipeline
Additional resources
DevOps for Dummies ebook httpibmcodevopsfordummies
Top 10 Practices for Effective DevOps httpwwwdrdobbscomarchitecture-and-designtop-
10-practices-for-effective-devops240149363
Cloud Computing Trends 2014 State of the Cloud Survey
httpwwwrightscalecomblogcloud-industry-insightscloud-computing-trends-2014-state-
cloud-survey
DevOps Embracing Cloud Services httpwwwmidsizeinsidercomen-usarticledevops-
embracing-cloud-servicesVJmrScABg
23
Part 2A Live Edit In this part yoursquoll get to use an exciting new feature Live Edit The Live Edit feature allows you to make
changes to your application and have them deployed nearly instantaneously to your deployed app Itrsquos just like
editing files locallyhellipexcept you donrsquot have to set up a development environment
Since the Live Edit feature is currently optimized for Nodejs we will create a new app using the Personality
Insights Nodejs Web Starter boilerplate (what a concise name) The exciting thing about this boilerplate is that
it uses IBM Watson (remember Watson the supercomputer that beat Jeopardy champions a few years ago)
services
In this part you will create a new Bluemix app and leverage the Live Edit feature to see the changes you make
be deployed almost instantly to your running app
Learn this
Live Edit allows you to see changes you make in the DevOps Services Web IDE reflected in real-
time to your app deployed on Bluemix Itrsquos just like editing files locallyhellipexcept you donrsquot have
to set up a development environment
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app Changes you make in Node modules (like JavaScript files)
will require a fast restart of the app in order to be reflected in your deployed app
Try this
1 Sign up for DevOps Services if you have not done so already
a Navigate to httpibmbizcds-bluemix and sign up
b As part of the Bluemix registration process you will receive an e-mail asking you to
confirm your account If you do not confirm you are not registered If you do not
receive a confirmation e-mail send a note to idbluemixnet
c Navigate to httpibmbizcds-ids and register for DevOps Services using the same IBM
id you used for Bluemix
2 Create a Nodejs app using a Bluemix boilerplate
The first thing we need is a Nodejs app One of the fastest ways to get a new app is to use a
Bluemix boilerplate
a Navigate to httpibmbizcds-bluemix
b Log in if you are not already authenticated
c Click CATALOG The Catalog is your place to browse the available boilerplates (sample
applications) runtimes and services
d In the Boilerplates section click Personality Insights Nodejs Web Starter
24
e Input a name for the app (what the app will be referred to in Bluemix) and a host for the
app (the part of the url that will go before mybluemixnet) Note that the host must be
globally unique across all of Bluemix so be creative
f Click CREATE A copy of the boilerplate code will be put in to a new app for you and
then deployed to Bluemix
g Click Overview In the APP HEALTH section wait for the message ldquoYour app is
runningrdquo to be displayed
h When your app is running click on your route (toward the top of the page) to open your
running app
3 Explore the Nodejs app
Now that your app is running letrsquos take a moment to explore it The Personality Insights app
uses the Watson Personality Insights service to analyze text and determine personality traits of
the textrsquos author
a The app includes sample text from Moby Dick Click ANALYZE to learn about the
personality of Moby Dickrsquos author Herman Melville Textual output as well as a
graphical visualization are displayed
b Navigate to one of your favorite websites with English text (keep it office-friendlyhellipso
perhaps choose your favorite news site) and copy a block of text
c Return to your Personality Insights App and paste the text in the Try the Service box
d Click ANALYZE View the textual output as well as the graphical visualization
4 Prepare for Live Edit
Wersquove tested the app and now wersquoll prep to make some changes to it
a Return to the Bluemix page for your Personality Insights app If your app is not in a
separate window or tab right-click on your apprsquos route and choose an option to open
the link in a new window or tab
b Click ADD GIT in the upper-right corner
c Click CONTINUE in the Create Git Repository dialog Bluemix will take a copy of your
apprsquos code and put it in a Git repository hosted at DevOps Services
d Click CLOSE once the Git Repository has been successfully created
e Click EDIT CODE in the upper-right corner to open the DevOps Services Web IDE
f Toggle the Live Edit option to on
g If prompted to redeploy click OK The app will redeploy so changes can be made live to
your deployed app When the app finishes deploying a green dot will be displayed in
the run bar
25
When the app finishes deploying you are ready to make live edits
5 Change a static file
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app
a In the navigator view on the left expand views
b Select layoutjade
c Update the h2 to say something like ldquoThis open lab is so great that Irsquom going to Tweet
about itrdquo
d Switch to your tab or window that has your running app
e Refresh the page
f Note that the heading of your app was changed instantly You didnrsquot have to wait for
the app to redeploy
g Make a few more changes to static files and watch your app update in real time
6 Change a node module
Changes to node modules require a fast app restart (not a full redeploy) in order to be deployed
because the server caches node modules in memory
a Select the root directory of your app in the navigator in the left pane
b Click File gt New gt File
c The name of the file is highlighted so you can rename it Type defaulttexttxt and press
Enter or Return on your keyboard
d In the editor on the right type or paste the text that you want to use as the default text
in the app
e Select the appjs file in the navigator in the left pane
f In the editor on the right look for the dummy_text variable around line 25 Replace
mobydicktxt with defaulttexttxt
g In the web IDEs top bar click the Restart button ( )
h When the app finishes restarting (which only takes a few seconds) a green dot is
displayed in the run bar
26
i Switch to the tab or window that has your running app Refresh the page to see the new
text (If your browser cached the page and you dont see the text update browse to
your apps URL again and the change should be displayed)
Tweet this
Developing in the cloud using Bluemix DevOpsServices is now as fast and easy as developing
locally WhoKnew
Get creative
Create a new look for the Personality Insights app Open the CSS files located in the publiccss
directory and have fun making changes to the files Watch as your changes are deployed live
Additional resources
Everything AND the kitchen sync Bluemix Live Sync is here httpsdeveloperibmcomdevops-
services20150213everything-kitchen-sync-Bluemix-live-sync
Bluemix Live Sync documentation
httpswwwngbluemixnetdocscm_mmc=developerWorks-_-dWdevcenter-_-devops-
services-_-lpmanageappsbluemixlivehtmlbluemixlive
27
Part 2B Bluemix Debug Sometimes staring at the code to figure out whatrsquos going wrong just doesnrsquot work Sometimes you really need
to debug the code or access the environment where the app is running This is where Bluemix Debug comes in
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for your Nodejs
apps
In this part yoursquoll continue on with the Personality Insights Nodejs app you created in part 2A
Learn this
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for
your Nodejs apps
Try this Note The Node Inspector Debugger currently only works in Chrome You may want to take this
opportunity to change browsers if you are not already using Chrome
1 Open the IBM Bluemix Debugger
a Navigate to httpibmbizcds-ids and sign in if you are not already authenticated
b In My Projects locate the tile for your Personality Insights app Click the Edit Code icon
( ) to open the Web IDE for your project
c In the Web IDErsquos top bar click the Debug button ( )
d When prompted for credentials input your IBM id and password
2 Use the shell
The Bluemix Shell allows you to explore and interact with the Bluemix environment where your
app is running by using a built-in bash shell
a On the IBM Bluemix Debugger page for your project click Open Shell A shell client
opens in your browser
b View the processes running in your Bluemix environment by inputting the following
command top
c Click NEW WINDOW
d Drag and drop the new window so that you can continue to observe your processes
while you explore the log files
e In the new window change directory to the log files by inputting the following
command cd logs
28
f View a list of the files in the logs directory by inputting the following command ls
g Notice that staging_tasklog is a file in your logs directory View the last 10 lines of the
log file by inputting the following command tail staging_tasklog
3 Use the Debugger
The Debugger allows you to debug Nodejs apps
a On the IBM Bluemix Debugger page for your project click Open Debugger The
Debugger takes about 30 seconds to load
b If the Navigator is not displayed on the left click the Expand Navigator button
c Select appjs in the Navigator to open the file
d Add a breakpoint on line 48 by clicking 48
e In a different tab or window navigate to your running app
f Click Analyze
g Switch back to the tab or window with your Debugger Notice that the breakpoint has
been hit On the right you can view the Call Stack and Variables You can also use
buttons on the right to step over the next function call step into the next function call
and step out of the next function call
h When you have finished exploring your running app click the Resume script execution
button ( ) on the right
Note that from the IBM Bluemix Debugger page you can choose to suspend the app which will
restart the app and break at the first line of the app
29
Tweet this
Bluemix + DevOpsServices + Shell = a happy developer NoDownloadsRequired [include a
screenshot of the shell in your browser]
Just debugged my Bluemix app by using the debugger in DevOpsServices
NoDownloadsRequired [take a selfie of you in front of your debugger looking very excited]
Get creative
Use some of your favorite commands to explore the Bluemix environment where your app runs
Additional resources
Bluemix Live Sync
httpswwwngBluemixnetdocsmanageappsBluemixlivehtmlBluemixlivedebugger
Learning the Shell httplinuxcommandorglc3_learning_the_shellphp
2
Part 1A Deploying amp Updating a Simple App Part 1 of this lab is broken into three pieces and demonstrates how easy it is to use IBM Bluemix DevOps
Services to plan code and deploy applications In part 1A youll learn how to deploy and make changes to a
simple application In part 1B youll learn how to deploy an application that uses a Bluemix service In part 1C
youll learn how to use the planning capabilities in DevOps Services to plan and track your app how to add a
new Bluemix service to an application and how to write code that leverages a Bluemix service Finally in part
1D yoursquoll learn how to use a delivery pipeline to automatically deploy changes to your app whenever code is
pushed to your projectrsquos repository
As a bonus youll also get an application that checks the prices of items in online stores for you so you dont
have to surf the web to see if your favorite items are on sale
Before we get started lets discuss the products well be using in this lab
IBM Bluemix DevOps Services is a place where you can collaborate with others to develop track plan
and deploy software
IBM Bluemix is an open-standards cloud-based platform where you can run the applications you develop
in DevOps Services Bluemix provides a variety of services that you can leverage in your applications so
you dont have to start coding from scratch
In part 1A youll be working with a sample online store called Laurens Lovely Landscapes The store currently
sells three prints each prints page displays the name image and price associated with the print
3
Learn this
1 Forking a project means to take a copy of the code in an existing project and put it in to a new
project
2 Making changes to an application can be fast and simple when you use the DevOps Services
Web IDE However users of DevOps Services can use whatever IDE they prefer when coding
Try this
1 Sign up for Bluemix and DevOps Services
a Navigate to httpibmbizcds-bluemix and sign up
b As part of the Bluemix registration process you will receive an e-mail asking you to
confirm your account If you do not confirm you are not registered If you do not
receive a confirmation e-mail send a note to idbluemixnet
c Navigate to httpibmbizcds-ids and register for DevOps Services using the same IBM
id you used for Bluemix
2 Fork Laurenrsquos Lovely Landscapes
At DevOps Services forking a project means taking a copy of the code in an existing project and
putting it in a new project
a Go to the Laurens Lovely Landscapes project overview page httpsibmbizcds-lll
b Click Edit Code in the upper-right corner You might be prompted to authenticate if you
have not already done so The Web IDE opens
c Select Tools gt Fork
d Type a name for your project leave the Add features for Scrum development and Make
this a Bluemix Project boxes checked and click CREATE
e Note that when the project has finished forking your new project name is listed in the
upper-left corner
Now you have a copy of the code in your own project The next step is to deploy it
3 Deploy Laurenrsquos Lovely Landscapes
To deploy an application means to bundle the project artifacts create an app at Bluemix
transfer the bundled app to Bluemix and start the app Bluemix application names and URLs are
created using properties which are often defined in the manifestyml file in a project The
Laurens Lovely Landscapes project already has the manifest created for you
a In the left navigation pane of the Web IDE select manifestyml
b Click the deploy button ( ) in the top bar
4
Note When you deploy through the Web IDE you are deploying the changes that are in
your Web IDErsquos workspace For example you may have changes you are currently
working on that you have not yet pushed to your projectrsquos repository Those changes
will be deployed
4 See Laurenrsquos Lovely Landscapes running
After your application is deployed to Bluemix a green dot displays in the status area of the top
gray bar
a Click the Open URL button ( ) in the top bar
b Browse your application that is running live on Bluemix Click on the Antarctica page and
note that the current price is $10000
5 Update the price of an item
Make a change to the application by updating the price of an item
a In the left pane of the Web IDE expand views and select antarcticatpl
b Scroll down until you see ltdiv id=pricegt10000ltdivgt
c Replace 10000 with 9999 (Wow thats a big sale -) )
d Click File gt Save
e Click the Deploy button ( )
f If prompted to stop and redeploy your app click OK
g After your application is deployed click the Open URL button ( ) in the top gray bar
h In your app that opens click Antarctica
Notice that the price of the item has been updated Success
Tweet this
Getting SaaS-y Just deployed an app to the cloud by leveraging Bluemix DevOpsServices
Check it out [insert link to your app] [Feeling extra sassy Include a selfie of you looking sassy]
Get creative
Laurenrsquos Lovely Landscapes is yours now Change the name change the color scheme change
the pictures or go crazy and implement a shopping cart Make the site your own and redeploy
5
Additional resources
MQTT Starfighter JazzHub Bluemix and live Scaling Out
httpswwwyoutubecomwatchv=b9hkCHmH7H4
Computerworld Forecast Study 2015 httpwwwidgenterprisecomreportcomputerworld-
forecast-study-2015
Transforming Enterprise Cloud Services
httpbooksgooglecombooksid=yyiPyIXgbxMCamppg=PA55v=onepageampqampf=false
Rapidly create a Nodejs app using a Bluemix boilerplate and DevOps Services
httpwwwibmcomdeveloperworkslibraryd-Bluemix-devops90indexhtml
6
Part 1B Deploying an App that Uses a Bluemix Service In this part youll be working with the Laurens Lovely Landscapes app you created in part 1A Youll also be
working with The Fabulous Price Finder app The Fabulous Price Finder provides you with the current prices of
items youre interested in purchasing online with the simple click of a button
Learn this
Leveraging Bluemix services like database services Watson services and DevOps Services makes
creating and managing apps easier
Deploying apps that leverage Bluemix services can be fast and easy
Try this
1 Fork the Fabulous Price Finder
a Go to the Fabulous Price Finder project overview page httpsibmbizcds-fbf
b Click EDIT CODE in the upper-right corner You might be prompted to authenticate if
you have not already done so
c Select Tools gt Fork
d Type a name for your project leave the Add features for Scrum development and Make
this a Bluemix Project boxes checked and click CREATE
e Note that when the project has finished forking your new project name is listed in the
upper-left corner
7
2 Deploy the Fabulous Price Finder
The Fabulous Price Finder uses the Cloudant NoSQL DB service hosted at Bluemix The Cloudant
database service provides access to a fully managed NoSQL JSON data layer thatrsquos always on To
get the Fabulous Price Finder running you deploy the application and then bind a new Cloudant
NoSQL DB instance to the application
a In the left navigation pane select manifestyml
b Click the Deploy ( ) button in the top gray bar Note that when the app finishes
deploying the database functionality will not yet work because you have not bound a
Cloudant NoSQL DB instance to it
c When the application is deployed click the Open application dashboard button ( ) in
the top gray bar
d If you are not already authenticated at Bluemix you might be prompted to do so After
you are authenticated you are redirected to your applications page on Bluemix
e Click ADD A SERVICE OR API
f Scroll down until you see the Cloudant NoSQL DB service Hint Check the Data and
Analytics section The catalog is constantly being updated with new services
g Click the Cloudant NoSQL DB service
h In the Cloudant NoSQL DB dialog leave the defaults in the dialog (the code assumes the
name of your Cloudant NoSQL DB service starts with cloudant) and click CREATE
i When prompted if you want to restage your application now click RESTAGE
j When the page indicates your app is running click your applications route to open it
3 Try the Fabulous Price Finder
Now that you have the Fabulous Price Finder running its time to explore
The home page of the Fabulous Price Finder enables you to record the items for which you want
to check prices You begin with the Antarctica print from the Laurens Lovely Landscapes app
you deployed
a In the form on the home page specify the name for the print (Antarctica) the URL for
the print from your online store (Hint Look for something similar to
httplaurenslovelylandscapes-some-long-string-of-random-
charactersmybluemixnetantarctica) and the id of the price field for the print
(price)
b Click Submit
You are redirected to the View Database page where you can see information about the item
you just stored You can record the details for other items if you like
8
4 Get Prices
After you have stored information about an item you can check its price
a On the home page click Get Prices
b On the Success page click View the database
Notice that the price of your item is now stored in the database If you like go back to your
Laurens Lovely Lanscapes project update the price of the Antarctica print (dont forget to
deploy your change) and click Get Prices again Note that the database reflects the new price of
the print
5 Explore the Cloudant Database
You can browse and update the contents of your Cloudant database which can be helpful when
debugging and working with your app
a Go to the Bluemix dashboard
b Log in if you are not already authenticated
c On the dashboard click on your FabulousPriceFinder app to open it
d Click your Cloudant NoSQL DB service tile to open it
e Click LAUNCH
f In the Databases section click on your database to open it
g Browse the documents youve added to your database
Tweet this
Check out the app I just deployed that leverages a Cloudant database on Bluemix [insert link
to your app]
Get creative
Enhance the apprsquos navigation so it is easier to move around the site or change the name of the
app to be less ldquofabulousrdquo and more you Make it your own
Additional resources
Cloudant-Python httpsgithubcomcloudant-labscloudant-python
Develop and manage Java apps with IBM Bluemix and DevOps Services
httpwwwibmcomdeveloperworkslibraryd-Bluemix-javadevopsindexhtml
9
Part 1C Planning Tracking amp Leveraging New Bluemix Services
Learn this
Leveraging software as a service that works well with the platform as a service of your choice
can greatly speed up your software delivery lifecycle
Agile planning and tracking is simple in the cloud and creates built-in traceability for all of your
teammateshellipwhether they are collocated or distributed
Writing code that leverages a Bluemix service can be fast and significantly reduce development
time
Try this
1 Plan a new feature to add to the Fabulous Price Finder
So far you have made use of existing code but you havent created anything new Time to
change that
When working with teammates or even by yourself organizing your ideas into user stories and
then organizing your user stories into a plan can be incredibly valuable
a Open Track amp Plan
i Open the Fabulous Price Finder project you created in the previous section by
navigating to DevOps Services signing in if youre not already authenticated
and clicking on your project on the My Projects page
ii Click the gear button ( ) in the upper-right corner to open the Project
Settings page
iii Click OPTIONS
iv On the page that loads select the Enable Track amp Plan checkbox (if it is not
already enabled) and click SAVE
v Click TRACK amp PLAN in the upper-right corner The Track amp Plan section is your
place to organize your ideas
b Create work items in your backlog
i On the left pane click Backlog
ii On the right pane type the following in the Create a work itemhellip field As a shopper I want a text message sent to me with the
price of each item so that I dont have to check the
website to view the prices
10
iii The tool will automatically detect the work item type is story and set the type
for you
iv In the icon bar below click the Owned By icon and select your username
v Click CREATE
vi Repeat Steps 2-5 to create work items for the following stories
1 As a shopper I want to organize my items by
store so that I only have to input the field ID
once per store instead of every item
2 As a shopper I want to see a graph of the price
of the items Im watching over time so I can
judge if its a good time to buy the items
3 As a shopper I want the prices to be retrieved
automatically for me on a daily basis so I dont
have to log in manually and click Get Prices
4 As a shopper I want the prices to be texted to
me only when the price has changed so Im not
getting inundated with text messages
vii Create a work item of type defect with the following summary The View
Database page fails to load when the database is empty
c Plan your work
Now that you have filled your backlog with stories its time to plan your first sprint
i On the left pane click Sprint Planning A sprint represents a period of time
Organize your user stories in sprints
ii Click Add Sprints
iii Configure the sprints so you have at least two and click Create
iv In the Backlog section rearrange your stories so they are in a ranked order by
dragging and dropping them Put As a shopper I want a text message sent to me with the price of each item so that
I dont have to check the website to view the prices as
the top item in the list and As a shopper I want the prices to be retrieved automatically for me on a daily basis so
I dont have to log in manually and click Get Prices as
the second highest item in the list
v Click the Sprint 1 dropbdown box and select Sprint 1 so that Sprint 1 appears to
the right of the backlog (You may need to click Sprint 2 and then click Sprint 1
in order for the sprint to appear)
11
vi Assume you have time to complete one user story per sprint Drag the topmost
item in the list to Sprint 1 (on the right)
vii In the sprint dropdown box select Sprint 2
viii Drag the new top most item to Sprint 2
d Track your work
Sprint 1 has begun Indicate that you have started working on the first work item by
marking it as In Progress
i In the sprint dropdown box select Sprint 1
ii In the Sprint 1 section click the Status New icon ( ) for the story planned
for Sprint 1
iii In the Status dialog click Start Working
iv Note the work item ID for your work item because you will need it later in this
lab
2 Implement the feature
Next implement the work item As a shopper I want a text message sent to me with the price of each item so that I dont have to check the
website to view the prices The idea of implementing a text messaging feature
might sound a bit daunting to you Fortunately Bluemix provides a Twilio service you can use
that handles sending the text message so you can implement this feature with only nine lines of
code
a Register with Twilio
If you do not already have an account with Twilio you need to register You also need
your Twilio AccountSID Auth Token and phone number
1 Go to httpswwwtwiliocom and sign up
2 Follow the on-screen instructions to verify your account
3 Note your Twilio phone number
4 After you have authenticated and are viewing your account click your ID in the
right corner and select Account
5 In the API Credentials section note your AccountSID and AuthToken (You
might want to leave this page open as you continue so you can easily copy the
credentials)
b If you do not want to receive text messages
If you do not want to receive text messages to your phone because your carrier charges
ridiculous amounts you can instead send the text messages to your Twilio account
12
phone number If yoursquore ok with receiving text messages on your phone skip this
section and continue on to step c
i In Twilio click NUMBERS in the top navigation bar
ii Click your phone number in the Number table
iii In the Messaging section replace the Request URL with any valid url (this
prevents a never ending loop of your phone number sending a response to the
text message it just received) For example you might replace the Request URL
with a link to your Laurenrsquos Lovely Landscapes app
iv Click Save
v Click Numbers in the top navigation bar
vi Click Verify a number
vii Click text you instead
viii Input your Twilio phone number in the Phone Number box
ix Click Text Me
x In a new tab or window navigate to twiliocom and click Account
xi Click NUMBERS in the top navigation bar
xii Click your number in the Number table
xiii Click Inbound in the Messaging section
xiv Hover over the text message in the table to see the incoming message Note
the verification number in the text messagersquos body
xv Return to your original tab or window and input the verification number
xvi Click Submit
When you want to view incoming text messages for your Twilio number return to the
details page for your number and click Inbound
c Add the Twilio service to the app
Begin by adding the Bluemix Twilio service to your app
i In DevOps Services click EDIT CODE in the upper-right corner
ii Click the Open application dashboard button ( ) The Bluemix page for your
app opens
iii Click ADD A SERVICE OR API
13
iv Scroll down until you see the Twilio service Hint Check the Mobile section The
catalog is constantly being updated with new services
v Click the Twilio service
vi In the Account SID and Auth Token fields paste your Twilio AccountSID and
AuthToken from your Twilio Account Settings page
vii Click CREATE
viii When prompted restage your application now by clicking RESTAGE
ix Wait for the page to indicate that your app is running
d Add code that uses the Twilio service
Add code to your app that sends a text message whenever a price is retrieved for an
item Use the Twilio service to actually send the text message
i Add Twilio to requirementstxt
Your app needs the Twilio module so you must add it to the requirementstxt
file
1 In the Web IDE open requirementstxt
2 Add a new line to the end of the file and type twilio
3 Select File gt Save
ii Connect to the Twilio service
To effectively use your Twilio service you must connect to it
1 In the Web IDE open the wsgipy file
2 In the Imports section around Line 55 add the following line from twiliorest import TwilioRestClient
3 As part of the for loop that begins around Line 65 add the following
lines
Note Be sure your spacing before these two lines (spaces and tabs) is
identical to the if statement that checks if the key starts with
ldquocloudantrdquo
if decoded_config[key][0][name]startswith(Twilio)
twilio_creds = decoded_config[key][0][credentials]
twilio_authToken = twilio_creds[authToken]
twilio_accountSID = twilio_creds[accountSID]
twilioClient = TwilioRestClient(twilio_accountSID twilio_authToken)
4 Your Twilio credentials are now stored in twilio_creds Your code
should now look like the following listing
14
for key value in decoded_configiteritems()
if decoded_config[key][0][name]startswith(Twilio)
twilio_creds = decoded_config[key][0][credentials]
twilio_authToken = twilio_creds[authToken]
twilio_accountSID = twilio_creds[accountSID]
twilioClient = TwilioRestClient(twilio_accountSID twilio_authToken)
if keystartswith(cloudant)
cloudant_creds = decoded_config[key][0][credentials]
cloudant_host = cloudant_creds[host]
cloudant_port = int(cloudant_creds[port])
cloudant_username = cloudant_creds[username]
cloudant_password = cloudant_creds[password]
cloudant_url = str(cloudant_creds[url])
account = cloudantAccount(cloudant_username)
login = accountlogin(cloudant_username cloudant_password)
assert loginstatus_code == 200
db = accountdatabase(dbname)
response = dbput()
print responsejson
5 Save your changes by selecting File gt Save
e Add code to send the text message
Now comes the fun part Its time to code
Continue to work in the wsgipy file and create a new function around Line 89 that
sends a text message def sendTextWithMessage(message)
message = twilioClientmessagescreate(to=+15555555555 from_=+15555555555
body=message)
f Replace the to number with the cell phone number or Twilio number where you want
the text messages to be sent (dont forget the country code)
g Replace the from number with your Twilio phone number (dont forget the country
code)
h In the getCurrentPrice function inside of the if statement that checks if the
price is not None add the following line of code sendTextWithMessage(The current price of s is s (item[name] price))
i Save your changes by selecting File gt Save
Thats it Youve implemented your feature with only nine lines of code
3 Deploy and test the feature
Now its time to deploy your application to Bluemix so you can test it
a Click the Deploy button ( )
b If prompted if you want to stop and redeploy click OK
c After your application has finished deploying click the Open URL button ( ) in the top
gray bar
d In your app click Get Prices
15
e Check your phone or Twilio number for a text message
If you like update the prices of the items in the store and get the prices again
4 Push the feature to the repository
Now that your feature is tested its time to push your changes to the Git repository
a In the leftmost bar of icons click the Git Repository button ( )
b In the box in the Working Directory Changes section type a comment similar to the
following being sure to replace 20 with the work item ID associated with the work item
you created Changes to implement the text messaging feature as
described in work item 20
c Select each change in the Changed Files section and click the COMMIT button
d In the OUTGOING section click PUSH
e If you are prompted for your committer information enter it and click OK
5 Complete the feature
To indicate that you have finished your feature mark your work item as complete
a In the Web IDE click TRACK amp PLAN in the upper-right corner
b In the right pane find your work item associated with the text messaging feature and
click the Status In Progress icon
c Click Set Done
d In the right pane scroll right until you see the RESOLVED section Notice that your work
item is now marked done
6 Discover the traceability
When you added a comment in your commit that mentioned your work item a link was
automatically created for you between the change and the work item
a In the right pane scroll to the Resolved view if you are not currently viewing your
resolved work items
b Click the textual summary of the work item associated with the text messaging feature
to open it
c In the work item click the Links tab
d In the LINKS section notice that a link was automatically generated for you Click the
link The Git Log displays
e Observe that you have a summary of the git commit and its associated work items
f Click GIT LOG in the left navigation to see a list of all of your git commits
16
Tweet this
Collaborate with me on this Bluemix app I created [insert link to your app] [include a
screenshot of the Web IDE with your codemdashTweets with images are more likely to get noticed]
Get creative
Invite a friend to join your project Navigate to your projects home page click Members and
invite a friend to join
Create new work items for features yoursquod like to implement or defects you find
Implement some of the stories you created or fix the defects you recorded
Additional resources
Twilio SMS and MMS Python Quickstart httpswwwtwiliocomdocsquickstartpythonsms
Managing Distributed Teams
httpswwwscrumallianceorgcommunityarticles2013julymanaging-distributed-
teamsaspx
So Long Scrum Hello Kanban httpsstormpathcomblogso-long-scrum-hello-kanban
17
Part 1D Deploying Automatically Using the Delivery Pipeline
Learn this
Deployment automation is one of the keys to a successful DevOps approach
You can create a complete delivery pipeline with multiple stages automated tests and
automatic deploys using DevOps Services
Try this
You can configure a multi-stage build and deployment pipeline to support your DevOps approach to
software development In this section you will configure a builder a deployment to your
development (dev) space and a deployment to your production (prod) space
1 Create a production space
Organizations and spaces are organizational units in the Cloud Foundry infrastructure that can
be used to store and track application resources An organization contains domains spaces and
users a space contains applications and services By default a dev (development) space is
created for you
a Navigate to the Bluemix dashboard if you are not there already
b Click Create a Space in the left menu
c In the Create a Space dialog input prod as your space name and click CREATE
2 Create services for deployments to your dev space
When deploying to your dev and prod spaces you will likely want to have services dedicated to
those deployments For example you want to use separate databases for each space Wersquoll
begin by creating services for each space
a Navigate to the Bluemix dashboard if you are not there already
b Click CATALOG
c Create the Cloudant NoSQL DB service
i Scroll down until you see the Cloudant NoSQL DB service Hint Check the Data
and Analytics section The catalog is constantly being updated with new
services
ii Click the Cloudant NoSQL DB service
iii In the Space dropdown choose dev
iv In the App dropdown choose Leave unbound
18
v In the Service name box leave the default or change the name to something
you like Be sure the name you choose begins with ldquocloudantrdquo as that is how
the code identifies the service
vi Note the name of your service as you will need it later
vii Click CREATE
d Create the Twilio service
i Navigate to the Catalog if you are not there already
ii Scroll down until you see the Twilio service Hint Check the Mobile section The
catalog is constantly being updated with new services
iii Click the Twilio service
iv In the Space dropdown choose dev
v In the App dropdown choose Leave unbound
vi In the Service name box leave the default or change the name to something
you like Be sure the name you choose begins with ldquotwiliordquo as that is how the
code identifies the service Note the name you choose as you will need it later
vii In the Account SID and Auth Token fields paste your Twilio AccountSID and
AuthToken from your Twilio Account Settings page
viii Click CREATE
3 Create services for deployments to your prod space
Repeat the steps from 2 above to create Cloudant NoSQL DB and Twilio services for
deployments to your prod space Be sure to select ldquoprodrdquo as the Space instead of ldquodevrdquo
4 Enable Advanced Build amp Deploy
You can configure a multi-stage build and deployment pipeline to support your DevOps
approach to software development Note that the pipeline only includes changes that have
been pushed to your projectrsquos repository changes that are in your workspace in the Web IDE
that have not been pushed to your projectrsquos repository will NOT be deployed as part of the
pipeline
a Open the Fabulous Price Finder project you created in the previous section by
navigating to DevOps Services signing in if youre not already authenticated and
clicking on your project on the My Projects page
b Click BUILD amp DEPLOY in the upper-right corner
5 Add a builder stage
The first stage we will create is a builder stage
19
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Build Stage
c Notice that the Input Type is set to SCM Repository by default This means the input for
the stage will be your git repository
d Notice that Run jobs whenever a change is pushed to Git is selected by default This
means that whenever you or someone on your team pushes code to your projectrsquos
repository the build stage will automatically be triggered
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Build
g Since this app does not require compilation (unlike a Java app) we will use the Simple
builder type Note that you can choose from a variety of builders
h Notice that the Stop running this stage if this job fails is checked by default This means
that any jobs further down the pipeline will not execute and the whole stage will be
marked as failed if a failure occurs
i Click SAVE
6 Add a ldquodeploy to development spacerdquo stage
Now we will add a deployment to the space that represents your development space Some
might call this a quality assurance or test space It is a place where developers can test their
code live in a production quality environment without actually putting it in production
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Dev Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the previous stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default This
will configure your pipeline so that whenever someone pushes code to your projectrsquos
repository the build step will run and if it succeeds a deploy to the development
environment will be kicked off
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Application Name to be a name that is unique to your Bluemix dev space
h By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
20
developers on your team will be able to test their code In the Script section after cf push ldquo$CF_APPrdquo
add -n whateverYouWantYourUrlToBe Note the url needs to be unique across
all Bluemix apps so be creative
i Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
j Next add a command to restage your app with the newly bound services cf restage $CF_APP
k The script section should now look similar to the following cf push $CF_APP -n fbf-lauren-dev
cf bind-service $CF_APP Cloudant-dev
cf bind-service $CF_APP Twilio-dev
cf restage $CF_APP
l Note that if we had automated tests associated with this project we could add a test
job to this stage so that the deploy would run and then tests could be executed against
that deployment
m Click SAVE
7 Add a deploy to production space stage
Now we will add a deployment to the space that represents your production space This space
is where you keep apps that your end users will use
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Prod Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the Build Stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default Since
we donrsquot have any automated tests included in this pipeline automatically deploying to
production is probably not safe Select Run jobs only when this stage is run manually
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Space to be prod
h Update the Application Name to be a name that is unique to your Bluemix prod space
i By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
21
your end users will be able to access your app In the Script section after cf push ldquo$CF_APPrdquo
add -n whateveryouwantyoururltobe Note the url needs to be unique across
all Bluemix apps so be creative
j Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
k Next add a command to restage your app with the newly bound services cf restage $CF_APP
l The script section should now look similar to the following cf push $CF_APP -n fbf-lauren
cf bind-service $CF_APP Cloudant-prod
cf bind-service $CF_APP Twilio-prod
cf restage $CF_APP
m Click SAVE
8 Kick off the pipeline
Now that we have the build pipeline configured itrsquos time to try it out To trigger the pipeline
we could make a change to our projectrsquos code and push the change to our Git repository or we
could manually request a build
a On the Pipeline page click the Play button ( ) in the Build Stage to kick off the first
stage of the pipeline manually
The build pipeline will go through the build and deploy to dev steps If you like what was
deployed to dev you can drag and drop the build from the Build Stage tile to the Prod
Deployment tile to deploy it there
Tweet this
Dove into DevOps by creating a release pipeline for my app [attach a screenshot of the Build amp
Deploy page for your app] Bluemix DevOpsServices
22
Get creative
Make a change to your code and watch the build pipeline automatically deploy it for you
Zero downtime deployments are very important to web applications Design and implement a
strategy to deploy your app to your production space without any downtime Hint check out
this article httpwwwibmcomdeveloperworkscloudlibrarycl-Bluemix-rollingpipeline
Additional resources
DevOps for Dummies ebook httpibmcodevopsfordummies
Top 10 Practices for Effective DevOps httpwwwdrdobbscomarchitecture-and-designtop-
10-practices-for-effective-devops240149363
Cloud Computing Trends 2014 State of the Cloud Survey
httpwwwrightscalecomblogcloud-industry-insightscloud-computing-trends-2014-state-
cloud-survey
DevOps Embracing Cloud Services httpwwwmidsizeinsidercomen-usarticledevops-
embracing-cloud-servicesVJmrScABg
23
Part 2A Live Edit In this part yoursquoll get to use an exciting new feature Live Edit The Live Edit feature allows you to make
changes to your application and have them deployed nearly instantaneously to your deployed app Itrsquos just like
editing files locallyhellipexcept you donrsquot have to set up a development environment
Since the Live Edit feature is currently optimized for Nodejs we will create a new app using the Personality
Insights Nodejs Web Starter boilerplate (what a concise name) The exciting thing about this boilerplate is that
it uses IBM Watson (remember Watson the supercomputer that beat Jeopardy champions a few years ago)
services
In this part you will create a new Bluemix app and leverage the Live Edit feature to see the changes you make
be deployed almost instantly to your running app
Learn this
Live Edit allows you to see changes you make in the DevOps Services Web IDE reflected in real-
time to your app deployed on Bluemix Itrsquos just like editing files locallyhellipexcept you donrsquot have
to set up a development environment
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app Changes you make in Node modules (like JavaScript files)
will require a fast restart of the app in order to be reflected in your deployed app
Try this
1 Sign up for DevOps Services if you have not done so already
a Navigate to httpibmbizcds-bluemix and sign up
b As part of the Bluemix registration process you will receive an e-mail asking you to
confirm your account If you do not confirm you are not registered If you do not
receive a confirmation e-mail send a note to idbluemixnet
c Navigate to httpibmbizcds-ids and register for DevOps Services using the same IBM
id you used for Bluemix
2 Create a Nodejs app using a Bluemix boilerplate
The first thing we need is a Nodejs app One of the fastest ways to get a new app is to use a
Bluemix boilerplate
a Navigate to httpibmbizcds-bluemix
b Log in if you are not already authenticated
c Click CATALOG The Catalog is your place to browse the available boilerplates (sample
applications) runtimes and services
d In the Boilerplates section click Personality Insights Nodejs Web Starter
24
e Input a name for the app (what the app will be referred to in Bluemix) and a host for the
app (the part of the url that will go before mybluemixnet) Note that the host must be
globally unique across all of Bluemix so be creative
f Click CREATE A copy of the boilerplate code will be put in to a new app for you and
then deployed to Bluemix
g Click Overview In the APP HEALTH section wait for the message ldquoYour app is
runningrdquo to be displayed
h When your app is running click on your route (toward the top of the page) to open your
running app
3 Explore the Nodejs app
Now that your app is running letrsquos take a moment to explore it The Personality Insights app
uses the Watson Personality Insights service to analyze text and determine personality traits of
the textrsquos author
a The app includes sample text from Moby Dick Click ANALYZE to learn about the
personality of Moby Dickrsquos author Herman Melville Textual output as well as a
graphical visualization are displayed
b Navigate to one of your favorite websites with English text (keep it office-friendlyhellipso
perhaps choose your favorite news site) and copy a block of text
c Return to your Personality Insights App and paste the text in the Try the Service box
d Click ANALYZE View the textual output as well as the graphical visualization
4 Prepare for Live Edit
Wersquove tested the app and now wersquoll prep to make some changes to it
a Return to the Bluemix page for your Personality Insights app If your app is not in a
separate window or tab right-click on your apprsquos route and choose an option to open
the link in a new window or tab
b Click ADD GIT in the upper-right corner
c Click CONTINUE in the Create Git Repository dialog Bluemix will take a copy of your
apprsquos code and put it in a Git repository hosted at DevOps Services
d Click CLOSE once the Git Repository has been successfully created
e Click EDIT CODE in the upper-right corner to open the DevOps Services Web IDE
f Toggle the Live Edit option to on
g If prompted to redeploy click OK The app will redeploy so changes can be made live to
your deployed app When the app finishes deploying a green dot will be displayed in
the run bar
25
When the app finishes deploying you are ready to make live edits
5 Change a static file
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app
a In the navigator view on the left expand views
b Select layoutjade
c Update the h2 to say something like ldquoThis open lab is so great that Irsquom going to Tweet
about itrdquo
d Switch to your tab or window that has your running app
e Refresh the page
f Note that the heading of your app was changed instantly You didnrsquot have to wait for
the app to redeploy
g Make a few more changes to static files and watch your app update in real time
6 Change a node module
Changes to node modules require a fast app restart (not a full redeploy) in order to be deployed
because the server caches node modules in memory
a Select the root directory of your app in the navigator in the left pane
b Click File gt New gt File
c The name of the file is highlighted so you can rename it Type defaulttexttxt and press
Enter or Return on your keyboard
d In the editor on the right type or paste the text that you want to use as the default text
in the app
e Select the appjs file in the navigator in the left pane
f In the editor on the right look for the dummy_text variable around line 25 Replace
mobydicktxt with defaulttexttxt
g In the web IDEs top bar click the Restart button ( )
h When the app finishes restarting (which only takes a few seconds) a green dot is
displayed in the run bar
26
i Switch to the tab or window that has your running app Refresh the page to see the new
text (If your browser cached the page and you dont see the text update browse to
your apps URL again and the change should be displayed)
Tweet this
Developing in the cloud using Bluemix DevOpsServices is now as fast and easy as developing
locally WhoKnew
Get creative
Create a new look for the Personality Insights app Open the CSS files located in the publiccss
directory and have fun making changes to the files Watch as your changes are deployed live
Additional resources
Everything AND the kitchen sync Bluemix Live Sync is here httpsdeveloperibmcomdevops-
services20150213everything-kitchen-sync-Bluemix-live-sync
Bluemix Live Sync documentation
httpswwwngbluemixnetdocscm_mmc=developerWorks-_-dWdevcenter-_-devops-
services-_-lpmanageappsbluemixlivehtmlbluemixlive
27
Part 2B Bluemix Debug Sometimes staring at the code to figure out whatrsquos going wrong just doesnrsquot work Sometimes you really need
to debug the code or access the environment where the app is running This is where Bluemix Debug comes in
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for your Nodejs
apps
In this part yoursquoll continue on with the Personality Insights Nodejs app you created in part 2A
Learn this
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for
your Nodejs apps
Try this Note The Node Inspector Debugger currently only works in Chrome You may want to take this
opportunity to change browsers if you are not already using Chrome
1 Open the IBM Bluemix Debugger
a Navigate to httpibmbizcds-ids and sign in if you are not already authenticated
b In My Projects locate the tile for your Personality Insights app Click the Edit Code icon
( ) to open the Web IDE for your project
c In the Web IDErsquos top bar click the Debug button ( )
d When prompted for credentials input your IBM id and password
2 Use the shell
The Bluemix Shell allows you to explore and interact with the Bluemix environment where your
app is running by using a built-in bash shell
a On the IBM Bluemix Debugger page for your project click Open Shell A shell client
opens in your browser
b View the processes running in your Bluemix environment by inputting the following
command top
c Click NEW WINDOW
d Drag and drop the new window so that you can continue to observe your processes
while you explore the log files
e In the new window change directory to the log files by inputting the following
command cd logs
28
f View a list of the files in the logs directory by inputting the following command ls
g Notice that staging_tasklog is a file in your logs directory View the last 10 lines of the
log file by inputting the following command tail staging_tasklog
3 Use the Debugger
The Debugger allows you to debug Nodejs apps
a On the IBM Bluemix Debugger page for your project click Open Debugger The
Debugger takes about 30 seconds to load
b If the Navigator is not displayed on the left click the Expand Navigator button
c Select appjs in the Navigator to open the file
d Add a breakpoint on line 48 by clicking 48
e In a different tab or window navigate to your running app
f Click Analyze
g Switch back to the tab or window with your Debugger Notice that the breakpoint has
been hit On the right you can view the Call Stack and Variables You can also use
buttons on the right to step over the next function call step into the next function call
and step out of the next function call
h When you have finished exploring your running app click the Resume script execution
button ( ) on the right
Note that from the IBM Bluemix Debugger page you can choose to suspend the app which will
restart the app and break at the first line of the app
29
Tweet this
Bluemix + DevOpsServices + Shell = a happy developer NoDownloadsRequired [include a
screenshot of the shell in your browser]
Just debugged my Bluemix app by using the debugger in DevOpsServices
NoDownloadsRequired [take a selfie of you in front of your debugger looking very excited]
Get creative
Use some of your favorite commands to explore the Bluemix environment where your app runs
Additional resources
Bluemix Live Sync
httpswwwngBluemixnetdocsmanageappsBluemixlivehtmlBluemixlivedebugger
Learning the Shell httplinuxcommandorglc3_learning_the_shellphp
3
Learn this
1 Forking a project means to take a copy of the code in an existing project and put it in to a new
project
2 Making changes to an application can be fast and simple when you use the DevOps Services
Web IDE However users of DevOps Services can use whatever IDE they prefer when coding
Try this
1 Sign up for Bluemix and DevOps Services
a Navigate to httpibmbizcds-bluemix and sign up
b As part of the Bluemix registration process you will receive an e-mail asking you to
confirm your account If you do not confirm you are not registered If you do not
receive a confirmation e-mail send a note to idbluemixnet
c Navigate to httpibmbizcds-ids and register for DevOps Services using the same IBM
id you used for Bluemix
2 Fork Laurenrsquos Lovely Landscapes
At DevOps Services forking a project means taking a copy of the code in an existing project and
putting it in a new project
a Go to the Laurens Lovely Landscapes project overview page httpsibmbizcds-lll
b Click Edit Code in the upper-right corner You might be prompted to authenticate if you
have not already done so The Web IDE opens
c Select Tools gt Fork
d Type a name for your project leave the Add features for Scrum development and Make
this a Bluemix Project boxes checked and click CREATE
e Note that when the project has finished forking your new project name is listed in the
upper-left corner
Now you have a copy of the code in your own project The next step is to deploy it
3 Deploy Laurenrsquos Lovely Landscapes
To deploy an application means to bundle the project artifacts create an app at Bluemix
transfer the bundled app to Bluemix and start the app Bluemix application names and URLs are
created using properties which are often defined in the manifestyml file in a project The
Laurens Lovely Landscapes project already has the manifest created for you
a In the left navigation pane of the Web IDE select manifestyml
b Click the deploy button ( ) in the top bar
4
Note When you deploy through the Web IDE you are deploying the changes that are in
your Web IDErsquos workspace For example you may have changes you are currently
working on that you have not yet pushed to your projectrsquos repository Those changes
will be deployed
4 See Laurenrsquos Lovely Landscapes running
After your application is deployed to Bluemix a green dot displays in the status area of the top
gray bar
a Click the Open URL button ( ) in the top bar
b Browse your application that is running live on Bluemix Click on the Antarctica page and
note that the current price is $10000
5 Update the price of an item
Make a change to the application by updating the price of an item
a In the left pane of the Web IDE expand views and select antarcticatpl
b Scroll down until you see ltdiv id=pricegt10000ltdivgt
c Replace 10000 with 9999 (Wow thats a big sale -) )
d Click File gt Save
e Click the Deploy button ( )
f If prompted to stop and redeploy your app click OK
g After your application is deployed click the Open URL button ( ) in the top gray bar
h In your app that opens click Antarctica
Notice that the price of the item has been updated Success
Tweet this
Getting SaaS-y Just deployed an app to the cloud by leveraging Bluemix DevOpsServices
Check it out [insert link to your app] [Feeling extra sassy Include a selfie of you looking sassy]
Get creative
Laurenrsquos Lovely Landscapes is yours now Change the name change the color scheme change
the pictures or go crazy and implement a shopping cart Make the site your own and redeploy
5
Additional resources
MQTT Starfighter JazzHub Bluemix and live Scaling Out
httpswwwyoutubecomwatchv=b9hkCHmH7H4
Computerworld Forecast Study 2015 httpwwwidgenterprisecomreportcomputerworld-
forecast-study-2015
Transforming Enterprise Cloud Services
httpbooksgooglecombooksid=yyiPyIXgbxMCamppg=PA55v=onepageampqampf=false
Rapidly create a Nodejs app using a Bluemix boilerplate and DevOps Services
httpwwwibmcomdeveloperworkslibraryd-Bluemix-devops90indexhtml
6
Part 1B Deploying an App that Uses a Bluemix Service In this part youll be working with the Laurens Lovely Landscapes app you created in part 1A Youll also be
working with The Fabulous Price Finder app The Fabulous Price Finder provides you with the current prices of
items youre interested in purchasing online with the simple click of a button
Learn this
Leveraging Bluemix services like database services Watson services and DevOps Services makes
creating and managing apps easier
Deploying apps that leverage Bluemix services can be fast and easy
Try this
1 Fork the Fabulous Price Finder
a Go to the Fabulous Price Finder project overview page httpsibmbizcds-fbf
b Click EDIT CODE in the upper-right corner You might be prompted to authenticate if
you have not already done so
c Select Tools gt Fork
d Type a name for your project leave the Add features for Scrum development and Make
this a Bluemix Project boxes checked and click CREATE
e Note that when the project has finished forking your new project name is listed in the
upper-left corner
7
2 Deploy the Fabulous Price Finder
The Fabulous Price Finder uses the Cloudant NoSQL DB service hosted at Bluemix The Cloudant
database service provides access to a fully managed NoSQL JSON data layer thatrsquos always on To
get the Fabulous Price Finder running you deploy the application and then bind a new Cloudant
NoSQL DB instance to the application
a In the left navigation pane select manifestyml
b Click the Deploy ( ) button in the top gray bar Note that when the app finishes
deploying the database functionality will not yet work because you have not bound a
Cloudant NoSQL DB instance to it
c When the application is deployed click the Open application dashboard button ( ) in
the top gray bar
d If you are not already authenticated at Bluemix you might be prompted to do so After
you are authenticated you are redirected to your applications page on Bluemix
e Click ADD A SERVICE OR API
f Scroll down until you see the Cloudant NoSQL DB service Hint Check the Data and
Analytics section The catalog is constantly being updated with new services
g Click the Cloudant NoSQL DB service
h In the Cloudant NoSQL DB dialog leave the defaults in the dialog (the code assumes the
name of your Cloudant NoSQL DB service starts with cloudant) and click CREATE
i When prompted if you want to restage your application now click RESTAGE
j When the page indicates your app is running click your applications route to open it
3 Try the Fabulous Price Finder
Now that you have the Fabulous Price Finder running its time to explore
The home page of the Fabulous Price Finder enables you to record the items for which you want
to check prices You begin with the Antarctica print from the Laurens Lovely Landscapes app
you deployed
a In the form on the home page specify the name for the print (Antarctica) the URL for
the print from your online store (Hint Look for something similar to
httplaurenslovelylandscapes-some-long-string-of-random-
charactersmybluemixnetantarctica) and the id of the price field for the print
(price)
b Click Submit
You are redirected to the View Database page where you can see information about the item
you just stored You can record the details for other items if you like
8
4 Get Prices
After you have stored information about an item you can check its price
a On the home page click Get Prices
b On the Success page click View the database
Notice that the price of your item is now stored in the database If you like go back to your
Laurens Lovely Lanscapes project update the price of the Antarctica print (dont forget to
deploy your change) and click Get Prices again Note that the database reflects the new price of
the print
5 Explore the Cloudant Database
You can browse and update the contents of your Cloudant database which can be helpful when
debugging and working with your app
a Go to the Bluemix dashboard
b Log in if you are not already authenticated
c On the dashboard click on your FabulousPriceFinder app to open it
d Click your Cloudant NoSQL DB service tile to open it
e Click LAUNCH
f In the Databases section click on your database to open it
g Browse the documents youve added to your database
Tweet this
Check out the app I just deployed that leverages a Cloudant database on Bluemix [insert link
to your app]
Get creative
Enhance the apprsquos navigation so it is easier to move around the site or change the name of the
app to be less ldquofabulousrdquo and more you Make it your own
Additional resources
Cloudant-Python httpsgithubcomcloudant-labscloudant-python
Develop and manage Java apps with IBM Bluemix and DevOps Services
httpwwwibmcomdeveloperworkslibraryd-Bluemix-javadevopsindexhtml
9
Part 1C Planning Tracking amp Leveraging New Bluemix Services
Learn this
Leveraging software as a service that works well with the platform as a service of your choice
can greatly speed up your software delivery lifecycle
Agile planning and tracking is simple in the cloud and creates built-in traceability for all of your
teammateshellipwhether they are collocated or distributed
Writing code that leverages a Bluemix service can be fast and significantly reduce development
time
Try this
1 Plan a new feature to add to the Fabulous Price Finder
So far you have made use of existing code but you havent created anything new Time to
change that
When working with teammates or even by yourself organizing your ideas into user stories and
then organizing your user stories into a plan can be incredibly valuable
a Open Track amp Plan
i Open the Fabulous Price Finder project you created in the previous section by
navigating to DevOps Services signing in if youre not already authenticated
and clicking on your project on the My Projects page
ii Click the gear button ( ) in the upper-right corner to open the Project
Settings page
iii Click OPTIONS
iv On the page that loads select the Enable Track amp Plan checkbox (if it is not
already enabled) and click SAVE
v Click TRACK amp PLAN in the upper-right corner The Track amp Plan section is your
place to organize your ideas
b Create work items in your backlog
i On the left pane click Backlog
ii On the right pane type the following in the Create a work itemhellip field As a shopper I want a text message sent to me with the
price of each item so that I dont have to check the
website to view the prices
10
iii The tool will automatically detect the work item type is story and set the type
for you
iv In the icon bar below click the Owned By icon and select your username
v Click CREATE
vi Repeat Steps 2-5 to create work items for the following stories
1 As a shopper I want to organize my items by
store so that I only have to input the field ID
once per store instead of every item
2 As a shopper I want to see a graph of the price
of the items Im watching over time so I can
judge if its a good time to buy the items
3 As a shopper I want the prices to be retrieved
automatically for me on a daily basis so I dont
have to log in manually and click Get Prices
4 As a shopper I want the prices to be texted to
me only when the price has changed so Im not
getting inundated with text messages
vii Create a work item of type defect with the following summary The View
Database page fails to load when the database is empty
c Plan your work
Now that you have filled your backlog with stories its time to plan your first sprint
i On the left pane click Sprint Planning A sprint represents a period of time
Organize your user stories in sprints
ii Click Add Sprints
iii Configure the sprints so you have at least two and click Create
iv In the Backlog section rearrange your stories so they are in a ranked order by
dragging and dropping them Put As a shopper I want a text message sent to me with the price of each item so that
I dont have to check the website to view the prices as
the top item in the list and As a shopper I want the prices to be retrieved automatically for me on a daily basis so
I dont have to log in manually and click Get Prices as
the second highest item in the list
v Click the Sprint 1 dropbdown box and select Sprint 1 so that Sprint 1 appears to
the right of the backlog (You may need to click Sprint 2 and then click Sprint 1
in order for the sprint to appear)
11
vi Assume you have time to complete one user story per sprint Drag the topmost
item in the list to Sprint 1 (on the right)
vii In the sprint dropdown box select Sprint 2
viii Drag the new top most item to Sprint 2
d Track your work
Sprint 1 has begun Indicate that you have started working on the first work item by
marking it as In Progress
i In the sprint dropdown box select Sprint 1
ii In the Sprint 1 section click the Status New icon ( ) for the story planned
for Sprint 1
iii In the Status dialog click Start Working
iv Note the work item ID for your work item because you will need it later in this
lab
2 Implement the feature
Next implement the work item As a shopper I want a text message sent to me with the price of each item so that I dont have to check the
website to view the prices The idea of implementing a text messaging feature
might sound a bit daunting to you Fortunately Bluemix provides a Twilio service you can use
that handles sending the text message so you can implement this feature with only nine lines of
code
a Register with Twilio
If you do not already have an account with Twilio you need to register You also need
your Twilio AccountSID Auth Token and phone number
1 Go to httpswwwtwiliocom and sign up
2 Follow the on-screen instructions to verify your account
3 Note your Twilio phone number
4 After you have authenticated and are viewing your account click your ID in the
right corner and select Account
5 In the API Credentials section note your AccountSID and AuthToken (You
might want to leave this page open as you continue so you can easily copy the
credentials)
b If you do not want to receive text messages
If you do not want to receive text messages to your phone because your carrier charges
ridiculous amounts you can instead send the text messages to your Twilio account
12
phone number If yoursquore ok with receiving text messages on your phone skip this
section and continue on to step c
i In Twilio click NUMBERS in the top navigation bar
ii Click your phone number in the Number table
iii In the Messaging section replace the Request URL with any valid url (this
prevents a never ending loop of your phone number sending a response to the
text message it just received) For example you might replace the Request URL
with a link to your Laurenrsquos Lovely Landscapes app
iv Click Save
v Click Numbers in the top navigation bar
vi Click Verify a number
vii Click text you instead
viii Input your Twilio phone number in the Phone Number box
ix Click Text Me
x In a new tab or window navigate to twiliocom and click Account
xi Click NUMBERS in the top navigation bar
xii Click your number in the Number table
xiii Click Inbound in the Messaging section
xiv Hover over the text message in the table to see the incoming message Note
the verification number in the text messagersquos body
xv Return to your original tab or window and input the verification number
xvi Click Submit
When you want to view incoming text messages for your Twilio number return to the
details page for your number and click Inbound
c Add the Twilio service to the app
Begin by adding the Bluemix Twilio service to your app
i In DevOps Services click EDIT CODE in the upper-right corner
ii Click the Open application dashboard button ( ) The Bluemix page for your
app opens
iii Click ADD A SERVICE OR API
13
iv Scroll down until you see the Twilio service Hint Check the Mobile section The
catalog is constantly being updated with new services
v Click the Twilio service
vi In the Account SID and Auth Token fields paste your Twilio AccountSID and
AuthToken from your Twilio Account Settings page
vii Click CREATE
viii When prompted restage your application now by clicking RESTAGE
ix Wait for the page to indicate that your app is running
d Add code that uses the Twilio service
Add code to your app that sends a text message whenever a price is retrieved for an
item Use the Twilio service to actually send the text message
i Add Twilio to requirementstxt
Your app needs the Twilio module so you must add it to the requirementstxt
file
1 In the Web IDE open requirementstxt
2 Add a new line to the end of the file and type twilio
3 Select File gt Save
ii Connect to the Twilio service
To effectively use your Twilio service you must connect to it
1 In the Web IDE open the wsgipy file
2 In the Imports section around Line 55 add the following line from twiliorest import TwilioRestClient
3 As part of the for loop that begins around Line 65 add the following
lines
Note Be sure your spacing before these two lines (spaces and tabs) is
identical to the if statement that checks if the key starts with
ldquocloudantrdquo
if decoded_config[key][0][name]startswith(Twilio)
twilio_creds = decoded_config[key][0][credentials]
twilio_authToken = twilio_creds[authToken]
twilio_accountSID = twilio_creds[accountSID]
twilioClient = TwilioRestClient(twilio_accountSID twilio_authToken)
4 Your Twilio credentials are now stored in twilio_creds Your code
should now look like the following listing
14
for key value in decoded_configiteritems()
if decoded_config[key][0][name]startswith(Twilio)
twilio_creds = decoded_config[key][0][credentials]
twilio_authToken = twilio_creds[authToken]
twilio_accountSID = twilio_creds[accountSID]
twilioClient = TwilioRestClient(twilio_accountSID twilio_authToken)
if keystartswith(cloudant)
cloudant_creds = decoded_config[key][0][credentials]
cloudant_host = cloudant_creds[host]
cloudant_port = int(cloudant_creds[port])
cloudant_username = cloudant_creds[username]
cloudant_password = cloudant_creds[password]
cloudant_url = str(cloudant_creds[url])
account = cloudantAccount(cloudant_username)
login = accountlogin(cloudant_username cloudant_password)
assert loginstatus_code == 200
db = accountdatabase(dbname)
response = dbput()
print responsejson
5 Save your changes by selecting File gt Save
e Add code to send the text message
Now comes the fun part Its time to code
Continue to work in the wsgipy file and create a new function around Line 89 that
sends a text message def sendTextWithMessage(message)
message = twilioClientmessagescreate(to=+15555555555 from_=+15555555555
body=message)
f Replace the to number with the cell phone number or Twilio number where you want
the text messages to be sent (dont forget the country code)
g Replace the from number with your Twilio phone number (dont forget the country
code)
h In the getCurrentPrice function inside of the if statement that checks if the
price is not None add the following line of code sendTextWithMessage(The current price of s is s (item[name] price))
i Save your changes by selecting File gt Save
Thats it Youve implemented your feature with only nine lines of code
3 Deploy and test the feature
Now its time to deploy your application to Bluemix so you can test it
a Click the Deploy button ( )
b If prompted if you want to stop and redeploy click OK
c After your application has finished deploying click the Open URL button ( ) in the top
gray bar
d In your app click Get Prices
15
e Check your phone or Twilio number for a text message
If you like update the prices of the items in the store and get the prices again
4 Push the feature to the repository
Now that your feature is tested its time to push your changes to the Git repository
a In the leftmost bar of icons click the Git Repository button ( )
b In the box in the Working Directory Changes section type a comment similar to the
following being sure to replace 20 with the work item ID associated with the work item
you created Changes to implement the text messaging feature as
described in work item 20
c Select each change in the Changed Files section and click the COMMIT button
d In the OUTGOING section click PUSH
e If you are prompted for your committer information enter it and click OK
5 Complete the feature
To indicate that you have finished your feature mark your work item as complete
a In the Web IDE click TRACK amp PLAN in the upper-right corner
b In the right pane find your work item associated with the text messaging feature and
click the Status In Progress icon
c Click Set Done
d In the right pane scroll right until you see the RESOLVED section Notice that your work
item is now marked done
6 Discover the traceability
When you added a comment in your commit that mentioned your work item a link was
automatically created for you between the change and the work item
a In the right pane scroll to the Resolved view if you are not currently viewing your
resolved work items
b Click the textual summary of the work item associated with the text messaging feature
to open it
c In the work item click the Links tab
d In the LINKS section notice that a link was automatically generated for you Click the
link The Git Log displays
e Observe that you have a summary of the git commit and its associated work items
f Click GIT LOG in the left navigation to see a list of all of your git commits
16
Tweet this
Collaborate with me on this Bluemix app I created [insert link to your app] [include a
screenshot of the Web IDE with your codemdashTweets with images are more likely to get noticed]
Get creative
Invite a friend to join your project Navigate to your projects home page click Members and
invite a friend to join
Create new work items for features yoursquod like to implement or defects you find
Implement some of the stories you created or fix the defects you recorded
Additional resources
Twilio SMS and MMS Python Quickstart httpswwwtwiliocomdocsquickstartpythonsms
Managing Distributed Teams
httpswwwscrumallianceorgcommunityarticles2013julymanaging-distributed-
teamsaspx
So Long Scrum Hello Kanban httpsstormpathcomblogso-long-scrum-hello-kanban
17
Part 1D Deploying Automatically Using the Delivery Pipeline
Learn this
Deployment automation is one of the keys to a successful DevOps approach
You can create a complete delivery pipeline with multiple stages automated tests and
automatic deploys using DevOps Services
Try this
You can configure a multi-stage build and deployment pipeline to support your DevOps approach to
software development In this section you will configure a builder a deployment to your
development (dev) space and a deployment to your production (prod) space
1 Create a production space
Organizations and spaces are organizational units in the Cloud Foundry infrastructure that can
be used to store and track application resources An organization contains domains spaces and
users a space contains applications and services By default a dev (development) space is
created for you
a Navigate to the Bluemix dashboard if you are not there already
b Click Create a Space in the left menu
c In the Create a Space dialog input prod as your space name and click CREATE
2 Create services for deployments to your dev space
When deploying to your dev and prod spaces you will likely want to have services dedicated to
those deployments For example you want to use separate databases for each space Wersquoll
begin by creating services for each space
a Navigate to the Bluemix dashboard if you are not there already
b Click CATALOG
c Create the Cloudant NoSQL DB service
i Scroll down until you see the Cloudant NoSQL DB service Hint Check the Data
and Analytics section The catalog is constantly being updated with new
services
ii Click the Cloudant NoSQL DB service
iii In the Space dropdown choose dev
iv In the App dropdown choose Leave unbound
18
v In the Service name box leave the default or change the name to something
you like Be sure the name you choose begins with ldquocloudantrdquo as that is how
the code identifies the service
vi Note the name of your service as you will need it later
vii Click CREATE
d Create the Twilio service
i Navigate to the Catalog if you are not there already
ii Scroll down until you see the Twilio service Hint Check the Mobile section The
catalog is constantly being updated with new services
iii Click the Twilio service
iv In the Space dropdown choose dev
v In the App dropdown choose Leave unbound
vi In the Service name box leave the default or change the name to something
you like Be sure the name you choose begins with ldquotwiliordquo as that is how the
code identifies the service Note the name you choose as you will need it later
vii In the Account SID and Auth Token fields paste your Twilio AccountSID and
AuthToken from your Twilio Account Settings page
viii Click CREATE
3 Create services for deployments to your prod space
Repeat the steps from 2 above to create Cloudant NoSQL DB and Twilio services for
deployments to your prod space Be sure to select ldquoprodrdquo as the Space instead of ldquodevrdquo
4 Enable Advanced Build amp Deploy
You can configure a multi-stage build and deployment pipeline to support your DevOps
approach to software development Note that the pipeline only includes changes that have
been pushed to your projectrsquos repository changes that are in your workspace in the Web IDE
that have not been pushed to your projectrsquos repository will NOT be deployed as part of the
pipeline
a Open the Fabulous Price Finder project you created in the previous section by
navigating to DevOps Services signing in if youre not already authenticated and
clicking on your project on the My Projects page
b Click BUILD amp DEPLOY in the upper-right corner
5 Add a builder stage
The first stage we will create is a builder stage
19
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Build Stage
c Notice that the Input Type is set to SCM Repository by default This means the input for
the stage will be your git repository
d Notice that Run jobs whenever a change is pushed to Git is selected by default This
means that whenever you or someone on your team pushes code to your projectrsquos
repository the build stage will automatically be triggered
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Build
g Since this app does not require compilation (unlike a Java app) we will use the Simple
builder type Note that you can choose from a variety of builders
h Notice that the Stop running this stage if this job fails is checked by default This means
that any jobs further down the pipeline will not execute and the whole stage will be
marked as failed if a failure occurs
i Click SAVE
6 Add a ldquodeploy to development spacerdquo stage
Now we will add a deployment to the space that represents your development space Some
might call this a quality assurance or test space It is a place where developers can test their
code live in a production quality environment without actually putting it in production
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Dev Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the previous stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default This
will configure your pipeline so that whenever someone pushes code to your projectrsquos
repository the build step will run and if it succeeds a deploy to the development
environment will be kicked off
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Application Name to be a name that is unique to your Bluemix dev space
h By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
20
developers on your team will be able to test their code In the Script section after cf push ldquo$CF_APPrdquo
add -n whateverYouWantYourUrlToBe Note the url needs to be unique across
all Bluemix apps so be creative
i Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
j Next add a command to restage your app with the newly bound services cf restage $CF_APP
k The script section should now look similar to the following cf push $CF_APP -n fbf-lauren-dev
cf bind-service $CF_APP Cloudant-dev
cf bind-service $CF_APP Twilio-dev
cf restage $CF_APP
l Note that if we had automated tests associated with this project we could add a test
job to this stage so that the deploy would run and then tests could be executed against
that deployment
m Click SAVE
7 Add a deploy to production space stage
Now we will add a deployment to the space that represents your production space This space
is where you keep apps that your end users will use
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Prod Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the Build Stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default Since
we donrsquot have any automated tests included in this pipeline automatically deploying to
production is probably not safe Select Run jobs only when this stage is run manually
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Space to be prod
h Update the Application Name to be a name that is unique to your Bluemix prod space
i By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
21
your end users will be able to access your app In the Script section after cf push ldquo$CF_APPrdquo
add -n whateveryouwantyoururltobe Note the url needs to be unique across
all Bluemix apps so be creative
j Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
k Next add a command to restage your app with the newly bound services cf restage $CF_APP
l The script section should now look similar to the following cf push $CF_APP -n fbf-lauren
cf bind-service $CF_APP Cloudant-prod
cf bind-service $CF_APP Twilio-prod
cf restage $CF_APP
m Click SAVE
8 Kick off the pipeline
Now that we have the build pipeline configured itrsquos time to try it out To trigger the pipeline
we could make a change to our projectrsquos code and push the change to our Git repository or we
could manually request a build
a On the Pipeline page click the Play button ( ) in the Build Stage to kick off the first
stage of the pipeline manually
The build pipeline will go through the build and deploy to dev steps If you like what was
deployed to dev you can drag and drop the build from the Build Stage tile to the Prod
Deployment tile to deploy it there
Tweet this
Dove into DevOps by creating a release pipeline for my app [attach a screenshot of the Build amp
Deploy page for your app] Bluemix DevOpsServices
22
Get creative
Make a change to your code and watch the build pipeline automatically deploy it for you
Zero downtime deployments are very important to web applications Design and implement a
strategy to deploy your app to your production space without any downtime Hint check out
this article httpwwwibmcomdeveloperworkscloudlibrarycl-Bluemix-rollingpipeline
Additional resources
DevOps for Dummies ebook httpibmcodevopsfordummies
Top 10 Practices for Effective DevOps httpwwwdrdobbscomarchitecture-and-designtop-
10-practices-for-effective-devops240149363
Cloud Computing Trends 2014 State of the Cloud Survey
httpwwwrightscalecomblogcloud-industry-insightscloud-computing-trends-2014-state-
cloud-survey
DevOps Embracing Cloud Services httpwwwmidsizeinsidercomen-usarticledevops-
embracing-cloud-servicesVJmrScABg
23
Part 2A Live Edit In this part yoursquoll get to use an exciting new feature Live Edit The Live Edit feature allows you to make
changes to your application and have them deployed nearly instantaneously to your deployed app Itrsquos just like
editing files locallyhellipexcept you donrsquot have to set up a development environment
Since the Live Edit feature is currently optimized for Nodejs we will create a new app using the Personality
Insights Nodejs Web Starter boilerplate (what a concise name) The exciting thing about this boilerplate is that
it uses IBM Watson (remember Watson the supercomputer that beat Jeopardy champions a few years ago)
services
In this part you will create a new Bluemix app and leverage the Live Edit feature to see the changes you make
be deployed almost instantly to your running app
Learn this
Live Edit allows you to see changes you make in the DevOps Services Web IDE reflected in real-
time to your app deployed on Bluemix Itrsquos just like editing files locallyhellipexcept you donrsquot have
to set up a development environment
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app Changes you make in Node modules (like JavaScript files)
will require a fast restart of the app in order to be reflected in your deployed app
Try this
1 Sign up for DevOps Services if you have not done so already
a Navigate to httpibmbizcds-bluemix and sign up
b As part of the Bluemix registration process you will receive an e-mail asking you to
confirm your account If you do not confirm you are not registered If you do not
receive a confirmation e-mail send a note to idbluemixnet
c Navigate to httpibmbizcds-ids and register for DevOps Services using the same IBM
id you used for Bluemix
2 Create a Nodejs app using a Bluemix boilerplate
The first thing we need is a Nodejs app One of the fastest ways to get a new app is to use a
Bluemix boilerplate
a Navigate to httpibmbizcds-bluemix
b Log in if you are not already authenticated
c Click CATALOG The Catalog is your place to browse the available boilerplates (sample
applications) runtimes and services
d In the Boilerplates section click Personality Insights Nodejs Web Starter
24
e Input a name for the app (what the app will be referred to in Bluemix) and a host for the
app (the part of the url that will go before mybluemixnet) Note that the host must be
globally unique across all of Bluemix so be creative
f Click CREATE A copy of the boilerplate code will be put in to a new app for you and
then deployed to Bluemix
g Click Overview In the APP HEALTH section wait for the message ldquoYour app is
runningrdquo to be displayed
h When your app is running click on your route (toward the top of the page) to open your
running app
3 Explore the Nodejs app
Now that your app is running letrsquos take a moment to explore it The Personality Insights app
uses the Watson Personality Insights service to analyze text and determine personality traits of
the textrsquos author
a The app includes sample text from Moby Dick Click ANALYZE to learn about the
personality of Moby Dickrsquos author Herman Melville Textual output as well as a
graphical visualization are displayed
b Navigate to one of your favorite websites with English text (keep it office-friendlyhellipso
perhaps choose your favorite news site) and copy a block of text
c Return to your Personality Insights App and paste the text in the Try the Service box
d Click ANALYZE View the textual output as well as the graphical visualization
4 Prepare for Live Edit
Wersquove tested the app and now wersquoll prep to make some changes to it
a Return to the Bluemix page for your Personality Insights app If your app is not in a
separate window or tab right-click on your apprsquos route and choose an option to open
the link in a new window or tab
b Click ADD GIT in the upper-right corner
c Click CONTINUE in the Create Git Repository dialog Bluemix will take a copy of your
apprsquos code and put it in a Git repository hosted at DevOps Services
d Click CLOSE once the Git Repository has been successfully created
e Click EDIT CODE in the upper-right corner to open the DevOps Services Web IDE
f Toggle the Live Edit option to on
g If prompted to redeploy click OK The app will redeploy so changes can be made live to
your deployed app When the app finishes deploying a green dot will be displayed in
the run bar
25
When the app finishes deploying you are ready to make live edits
5 Change a static file
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app
a In the navigator view on the left expand views
b Select layoutjade
c Update the h2 to say something like ldquoThis open lab is so great that Irsquom going to Tweet
about itrdquo
d Switch to your tab or window that has your running app
e Refresh the page
f Note that the heading of your app was changed instantly You didnrsquot have to wait for
the app to redeploy
g Make a few more changes to static files and watch your app update in real time
6 Change a node module
Changes to node modules require a fast app restart (not a full redeploy) in order to be deployed
because the server caches node modules in memory
a Select the root directory of your app in the navigator in the left pane
b Click File gt New gt File
c The name of the file is highlighted so you can rename it Type defaulttexttxt and press
Enter or Return on your keyboard
d In the editor on the right type or paste the text that you want to use as the default text
in the app
e Select the appjs file in the navigator in the left pane
f In the editor on the right look for the dummy_text variable around line 25 Replace
mobydicktxt with defaulttexttxt
g In the web IDEs top bar click the Restart button ( )
h When the app finishes restarting (which only takes a few seconds) a green dot is
displayed in the run bar
26
i Switch to the tab or window that has your running app Refresh the page to see the new
text (If your browser cached the page and you dont see the text update browse to
your apps URL again and the change should be displayed)
Tweet this
Developing in the cloud using Bluemix DevOpsServices is now as fast and easy as developing
locally WhoKnew
Get creative
Create a new look for the Personality Insights app Open the CSS files located in the publiccss
directory and have fun making changes to the files Watch as your changes are deployed live
Additional resources
Everything AND the kitchen sync Bluemix Live Sync is here httpsdeveloperibmcomdevops-
services20150213everything-kitchen-sync-Bluemix-live-sync
Bluemix Live Sync documentation
httpswwwngbluemixnetdocscm_mmc=developerWorks-_-dWdevcenter-_-devops-
services-_-lpmanageappsbluemixlivehtmlbluemixlive
27
Part 2B Bluemix Debug Sometimes staring at the code to figure out whatrsquos going wrong just doesnrsquot work Sometimes you really need
to debug the code or access the environment where the app is running This is where Bluemix Debug comes in
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for your Nodejs
apps
In this part yoursquoll continue on with the Personality Insights Nodejs app you created in part 2A
Learn this
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for
your Nodejs apps
Try this Note The Node Inspector Debugger currently only works in Chrome You may want to take this
opportunity to change browsers if you are not already using Chrome
1 Open the IBM Bluemix Debugger
a Navigate to httpibmbizcds-ids and sign in if you are not already authenticated
b In My Projects locate the tile for your Personality Insights app Click the Edit Code icon
( ) to open the Web IDE for your project
c In the Web IDErsquos top bar click the Debug button ( )
d When prompted for credentials input your IBM id and password
2 Use the shell
The Bluemix Shell allows you to explore and interact with the Bluemix environment where your
app is running by using a built-in bash shell
a On the IBM Bluemix Debugger page for your project click Open Shell A shell client
opens in your browser
b View the processes running in your Bluemix environment by inputting the following
command top
c Click NEW WINDOW
d Drag and drop the new window so that you can continue to observe your processes
while you explore the log files
e In the new window change directory to the log files by inputting the following
command cd logs
28
f View a list of the files in the logs directory by inputting the following command ls
g Notice that staging_tasklog is a file in your logs directory View the last 10 lines of the
log file by inputting the following command tail staging_tasklog
3 Use the Debugger
The Debugger allows you to debug Nodejs apps
a On the IBM Bluemix Debugger page for your project click Open Debugger The
Debugger takes about 30 seconds to load
b If the Navigator is not displayed on the left click the Expand Navigator button
c Select appjs in the Navigator to open the file
d Add a breakpoint on line 48 by clicking 48
e In a different tab or window navigate to your running app
f Click Analyze
g Switch back to the tab or window with your Debugger Notice that the breakpoint has
been hit On the right you can view the Call Stack and Variables You can also use
buttons on the right to step over the next function call step into the next function call
and step out of the next function call
h When you have finished exploring your running app click the Resume script execution
button ( ) on the right
Note that from the IBM Bluemix Debugger page you can choose to suspend the app which will
restart the app and break at the first line of the app
29
Tweet this
Bluemix + DevOpsServices + Shell = a happy developer NoDownloadsRequired [include a
screenshot of the shell in your browser]
Just debugged my Bluemix app by using the debugger in DevOpsServices
NoDownloadsRequired [take a selfie of you in front of your debugger looking very excited]
Get creative
Use some of your favorite commands to explore the Bluemix environment where your app runs
Additional resources
Bluemix Live Sync
httpswwwngBluemixnetdocsmanageappsBluemixlivehtmlBluemixlivedebugger
Learning the Shell httplinuxcommandorglc3_learning_the_shellphp
4
Note When you deploy through the Web IDE you are deploying the changes that are in
your Web IDErsquos workspace For example you may have changes you are currently
working on that you have not yet pushed to your projectrsquos repository Those changes
will be deployed
4 See Laurenrsquos Lovely Landscapes running
After your application is deployed to Bluemix a green dot displays in the status area of the top
gray bar
a Click the Open URL button ( ) in the top bar
b Browse your application that is running live on Bluemix Click on the Antarctica page and
note that the current price is $10000
5 Update the price of an item
Make a change to the application by updating the price of an item
a In the left pane of the Web IDE expand views and select antarcticatpl
b Scroll down until you see ltdiv id=pricegt10000ltdivgt
c Replace 10000 with 9999 (Wow thats a big sale -) )
d Click File gt Save
e Click the Deploy button ( )
f If prompted to stop and redeploy your app click OK
g After your application is deployed click the Open URL button ( ) in the top gray bar
h In your app that opens click Antarctica
Notice that the price of the item has been updated Success
Tweet this
Getting SaaS-y Just deployed an app to the cloud by leveraging Bluemix DevOpsServices
Check it out [insert link to your app] [Feeling extra sassy Include a selfie of you looking sassy]
Get creative
Laurenrsquos Lovely Landscapes is yours now Change the name change the color scheme change
the pictures or go crazy and implement a shopping cart Make the site your own and redeploy
5
Additional resources
MQTT Starfighter JazzHub Bluemix and live Scaling Out
httpswwwyoutubecomwatchv=b9hkCHmH7H4
Computerworld Forecast Study 2015 httpwwwidgenterprisecomreportcomputerworld-
forecast-study-2015
Transforming Enterprise Cloud Services
httpbooksgooglecombooksid=yyiPyIXgbxMCamppg=PA55v=onepageampqampf=false
Rapidly create a Nodejs app using a Bluemix boilerplate and DevOps Services
httpwwwibmcomdeveloperworkslibraryd-Bluemix-devops90indexhtml
6
Part 1B Deploying an App that Uses a Bluemix Service In this part youll be working with the Laurens Lovely Landscapes app you created in part 1A Youll also be
working with The Fabulous Price Finder app The Fabulous Price Finder provides you with the current prices of
items youre interested in purchasing online with the simple click of a button
Learn this
Leveraging Bluemix services like database services Watson services and DevOps Services makes
creating and managing apps easier
Deploying apps that leverage Bluemix services can be fast and easy
Try this
1 Fork the Fabulous Price Finder
a Go to the Fabulous Price Finder project overview page httpsibmbizcds-fbf
b Click EDIT CODE in the upper-right corner You might be prompted to authenticate if
you have not already done so
c Select Tools gt Fork
d Type a name for your project leave the Add features for Scrum development and Make
this a Bluemix Project boxes checked and click CREATE
e Note that when the project has finished forking your new project name is listed in the
upper-left corner
7
2 Deploy the Fabulous Price Finder
The Fabulous Price Finder uses the Cloudant NoSQL DB service hosted at Bluemix The Cloudant
database service provides access to a fully managed NoSQL JSON data layer thatrsquos always on To
get the Fabulous Price Finder running you deploy the application and then bind a new Cloudant
NoSQL DB instance to the application
a In the left navigation pane select manifestyml
b Click the Deploy ( ) button in the top gray bar Note that when the app finishes
deploying the database functionality will not yet work because you have not bound a
Cloudant NoSQL DB instance to it
c When the application is deployed click the Open application dashboard button ( ) in
the top gray bar
d If you are not already authenticated at Bluemix you might be prompted to do so After
you are authenticated you are redirected to your applications page on Bluemix
e Click ADD A SERVICE OR API
f Scroll down until you see the Cloudant NoSQL DB service Hint Check the Data and
Analytics section The catalog is constantly being updated with new services
g Click the Cloudant NoSQL DB service
h In the Cloudant NoSQL DB dialog leave the defaults in the dialog (the code assumes the
name of your Cloudant NoSQL DB service starts with cloudant) and click CREATE
i When prompted if you want to restage your application now click RESTAGE
j When the page indicates your app is running click your applications route to open it
3 Try the Fabulous Price Finder
Now that you have the Fabulous Price Finder running its time to explore
The home page of the Fabulous Price Finder enables you to record the items for which you want
to check prices You begin with the Antarctica print from the Laurens Lovely Landscapes app
you deployed
a In the form on the home page specify the name for the print (Antarctica) the URL for
the print from your online store (Hint Look for something similar to
httplaurenslovelylandscapes-some-long-string-of-random-
charactersmybluemixnetantarctica) and the id of the price field for the print
(price)
b Click Submit
You are redirected to the View Database page where you can see information about the item
you just stored You can record the details for other items if you like
8
4 Get Prices
After you have stored information about an item you can check its price
a On the home page click Get Prices
b On the Success page click View the database
Notice that the price of your item is now stored in the database If you like go back to your
Laurens Lovely Lanscapes project update the price of the Antarctica print (dont forget to
deploy your change) and click Get Prices again Note that the database reflects the new price of
the print
5 Explore the Cloudant Database
You can browse and update the contents of your Cloudant database which can be helpful when
debugging and working with your app
a Go to the Bluemix dashboard
b Log in if you are not already authenticated
c On the dashboard click on your FabulousPriceFinder app to open it
d Click your Cloudant NoSQL DB service tile to open it
e Click LAUNCH
f In the Databases section click on your database to open it
g Browse the documents youve added to your database
Tweet this
Check out the app I just deployed that leverages a Cloudant database on Bluemix [insert link
to your app]
Get creative
Enhance the apprsquos navigation so it is easier to move around the site or change the name of the
app to be less ldquofabulousrdquo and more you Make it your own
Additional resources
Cloudant-Python httpsgithubcomcloudant-labscloudant-python
Develop and manage Java apps with IBM Bluemix and DevOps Services
httpwwwibmcomdeveloperworkslibraryd-Bluemix-javadevopsindexhtml
9
Part 1C Planning Tracking amp Leveraging New Bluemix Services
Learn this
Leveraging software as a service that works well with the platform as a service of your choice
can greatly speed up your software delivery lifecycle
Agile planning and tracking is simple in the cloud and creates built-in traceability for all of your
teammateshellipwhether they are collocated or distributed
Writing code that leverages a Bluemix service can be fast and significantly reduce development
time
Try this
1 Plan a new feature to add to the Fabulous Price Finder
So far you have made use of existing code but you havent created anything new Time to
change that
When working with teammates or even by yourself organizing your ideas into user stories and
then organizing your user stories into a plan can be incredibly valuable
a Open Track amp Plan
i Open the Fabulous Price Finder project you created in the previous section by
navigating to DevOps Services signing in if youre not already authenticated
and clicking on your project on the My Projects page
ii Click the gear button ( ) in the upper-right corner to open the Project
Settings page
iii Click OPTIONS
iv On the page that loads select the Enable Track amp Plan checkbox (if it is not
already enabled) and click SAVE
v Click TRACK amp PLAN in the upper-right corner The Track amp Plan section is your
place to organize your ideas
b Create work items in your backlog
i On the left pane click Backlog
ii On the right pane type the following in the Create a work itemhellip field As a shopper I want a text message sent to me with the
price of each item so that I dont have to check the
website to view the prices
10
iii The tool will automatically detect the work item type is story and set the type
for you
iv In the icon bar below click the Owned By icon and select your username
v Click CREATE
vi Repeat Steps 2-5 to create work items for the following stories
1 As a shopper I want to organize my items by
store so that I only have to input the field ID
once per store instead of every item
2 As a shopper I want to see a graph of the price
of the items Im watching over time so I can
judge if its a good time to buy the items
3 As a shopper I want the prices to be retrieved
automatically for me on a daily basis so I dont
have to log in manually and click Get Prices
4 As a shopper I want the prices to be texted to
me only when the price has changed so Im not
getting inundated with text messages
vii Create a work item of type defect with the following summary The View
Database page fails to load when the database is empty
c Plan your work
Now that you have filled your backlog with stories its time to plan your first sprint
i On the left pane click Sprint Planning A sprint represents a period of time
Organize your user stories in sprints
ii Click Add Sprints
iii Configure the sprints so you have at least two and click Create
iv In the Backlog section rearrange your stories so they are in a ranked order by
dragging and dropping them Put As a shopper I want a text message sent to me with the price of each item so that
I dont have to check the website to view the prices as
the top item in the list and As a shopper I want the prices to be retrieved automatically for me on a daily basis so
I dont have to log in manually and click Get Prices as
the second highest item in the list
v Click the Sprint 1 dropbdown box and select Sprint 1 so that Sprint 1 appears to
the right of the backlog (You may need to click Sprint 2 and then click Sprint 1
in order for the sprint to appear)
11
vi Assume you have time to complete one user story per sprint Drag the topmost
item in the list to Sprint 1 (on the right)
vii In the sprint dropdown box select Sprint 2
viii Drag the new top most item to Sprint 2
d Track your work
Sprint 1 has begun Indicate that you have started working on the first work item by
marking it as In Progress
i In the sprint dropdown box select Sprint 1
ii In the Sprint 1 section click the Status New icon ( ) for the story planned
for Sprint 1
iii In the Status dialog click Start Working
iv Note the work item ID for your work item because you will need it later in this
lab
2 Implement the feature
Next implement the work item As a shopper I want a text message sent to me with the price of each item so that I dont have to check the
website to view the prices The idea of implementing a text messaging feature
might sound a bit daunting to you Fortunately Bluemix provides a Twilio service you can use
that handles sending the text message so you can implement this feature with only nine lines of
code
a Register with Twilio
If you do not already have an account with Twilio you need to register You also need
your Twilio AccountSID Auth Token and phone number
1 Go to httpswwwtwiliocom and sign up
2 Follow the on-screen instructions to verify your account
3 Note your Twilio phone number
4 After you have authenticated and are viewing your account click your ID in the
right corner and select Account
5 In the API Credentials section note your AccountSID and AuthToken (You
might want to leave this page open as you continue so you can easily copy the
credentials)
b If you do not want to receive text messages
If you do not want to receive text messages to your phone because your carrier charges
ridiculous amounts you can instead send the text messages to your Twilio account
12
phone number If yoursquore ok with receiving text messages on your phone skip this
section and continue on to step c
i In Twilio click NUMBERS in the top navigation bar
ii Click your phone number in the Number table
iii In the Messaging section replace the Request URL with any valid url (this
prevents a never ending loop of your phone number sending a response to the
text message it just received) For example you might replace the Request URL
with a link to your Laurenrsquos Lovely Landscapes app
iv Click Save
v Click Numbers in the top navigation bar
vi Click Verify a number
vii Click text you instead
viii Input your Twilio phone number in the Phone Number box
ix Click Text Me
x In a new tab or window navigate to twiliocom and click Account
xi Click NUMBERS in the top navigation bar
xii Click your number in the Number table
xiii Click Inbound in the Messaging section
xiv Hover over the text message in the table to see the incoming message Note
the verification number in the text messagersquos body
xv Return to your original tab or window and input the verification number
xvi Click Submit
When you want to view incoming text messages for your Twilio number return to the
details page for your number and click Inbound
c Add the Twilio service to the app
Begin by adding the Bluemix Twilio service to your app
i In DevOps Services click EDIT CODE in the upper-right corner
ii Click the Open application dashboard button ( ) The Bluemix page for your
app opens
iii Click ADD A SERVICE OR API
13
iv Scroll down until you see the Twilio service Hint Check the Mobile section The
catalog is constantly being updated with new services
v Click the Twilio service
vi In the Account SID and Auth Token fields paste your Twilio AccountSID and
AuthToken from your Twilio Account Settings page
vii Click CREATE
viii When prompted restage your application now by clicking RESTAGE
ix Wait for the page to indicate that your app is running
d Add code that uses the Twilio service
Add code to your app that sends a text message whenever a price is retrieved for an
item Use the Twilio service to actually send the text message
i Add Twilio to requirementstxt
Your app needs the Twilio module so you must add it to the requirementstxt
file
1 In the Web IDE open requirementstxt
2 Add a new line to the end of the file and type twilio
3 Select File gt Save
ii Connect to the Twilio service
To effectively use your Twilio service you must connect to it
1 In the Web IDE open the wsgipy file
2 In the Imports section around Line 55 add the following line from twiliorest import TwilioRestClient
3 As part of the for loop that begins around Line 65 add the following
lines
Note Be sure your spacing before these two lines (spaces and tabs) is
identical to the if statement that checks if the key starts with
ldquocloudantrdquo
if decoded_config[key][0][name]startswith(Twilio)
twilio_creds = decoded_config[key][0][credentials]
twilio_authToken = twilio_creds[authToken]
twilio_accountSID = twilio_creds[accountSID]
twilioClient = TwilioRestClient(twilio_accountSID twilio_authToken)
4 Your Twilio credentials are now stored in twilio_creds Your code
should now look like the following listing
14
for key value in decoded_configiteritems()
if decoded_config[key][0][name]startswith(Twilio)
twilio_creds = decoded_config[key][0][credentials]
twilio_authToken = twilio_creds[authToken]
twilio_accountSID = twilio_creds[accountSID]
twilioClient = TwilioRestClient(twilio_accountSID twilio_authToken)
if keystartswith(cloudant)
cloudant_creds = decoded_config[key][0][credentials]
cloudant_host = cloudant_creds[host]
cloudant_port = int(cloudant_creds[port])
cloudant_username = cloudant_creds[username]
cloudant_password = cloudant_creds[password]
cloudant_url = str(cloudant_creds[url])
account = cloudantAccount(cloudant_username)
login = accountlogin(cloudant_username cloudant_password)
assert loginstatus_code == 200
db = accountdatabase(dbname)
response = dbput()
print responsejson
5 Save your changes by selecting File gt Save
e Add code to send the text message
Now comes the fun part Its time to code
Continue to work in the wsgipy file and create a new function around Line 89 that
sends a text message def sendTextWithMessage(message)
message = twilioClientmessagescreate(to=+15555555555 from_=+15555555555
body=message)
f Replace the to number with the cell phone number or Twilio number where you want
the text messages to be sent (dont forget the country code)
g Replace the from number with your Twilio phone number (dont forget the country
code)
h In the getCurrentPrice function inside of the if statement that checks if the
price is not None add the following line of code sendTextWithMessage(The current price of s is s (item[name] price))
i Save your changes by selecting File gt Save
Thats it Youve implemented your feature with only nine lines of code
3 Deploy and test the feature
Now its time to deploy your application to Bluemix so you can test it
a Click the Deploy button ( )
b If prompted if you want to stop and redeploy click OK
c After your application has finished deploying click the Open URL button ( ) in the top
gray bar
d In your app click Get Prices
15
e Check your phone or Twilio number for a text message
If you like update the prices of the items in the store and get the prices again
4 Push the feature to the repository
Now that your feature is tested its time to push your changes to the Git repository
a In the leftmost bar of icons click the Git Repository button ( )
b In the box in the Working Directory Changes section type a comment similar to the
following being sure to replace 20 with the work item ID associated with the work item
you created Changes to implement the text messaging feature as
described in work item 20
c Select each change in the Changed Files section and click the COMMIT button
d In the OUTGOING section click PUSH
e If you are prompted for your committer information enter it and click OK
5 Complete the feature
To indicate that you have finished your feature mark your work item as complete
a In the Web IDE click TRACK amp PLAN in the upper-right corner
b In the right pane find your work item associated with the text messaging feature and
click the Status In Progress icon
c Click Set Done
d In the right pane scroll right until you see the RESOLVED section Notice that your work
item is now marked done
6 Discover the traceability
When you added a comment in your commit that mentioned your work item a link was
automatically created for you between the change and the work item
a In the right pane scroll to the Resolved view if you are not currently viewing your
resolved work items
b Click the textual summary of the work item associated with the text messaging feature
to open it
c In the work item click the Links tab
d In the LINKS section notice that a link was automatically generated for you Click the
link The Git Log displays
e Observe that you have a summary of the git commit and its associated work items
f Click GIT LOG in the left navigation to see a list of all of your git commits
16
Tweet this
Collaborate with me on this Bluemix app I created [insert link to your app] [include a
screenshot of the Web IDE with your codemdashTweets with images are more likely to get noticed]
Get creative
Invite a friend to join your project Navigate to your projects home page click Members and
invite a friend to join
Create new work items for features yoursquod like to implement or defects you find
Implement some of the stories you created or fix the defects you recorded
Additional resources
Twilio SMS and MMS Python Quickstart httpswwwtwiliocomdocsquickstartpythonsms
Managing Distributed Teams
httpswwwscrumallianceorgcommunityarticles2013julymanaging-distributed-
teamsaspx
So Long Scrum Hello Kanban httpsstormpathcomblogso-long-scrum-hello-kanban
17
Part 1D Deploying Automatically Using the Delivery Pipeline
Learn this
Deployment automation is one of the keys to a successful DevOps approach
You can create a complete delivery pipeline with multiple stages automated tests and
automatic deploys using DevOps Services
Try this
You can configure a multi-stage build and deployment pipeline to support your DevOps approach to
software development In this section you will configure a builder a deployment to your
development (dev) space and a deployment to your production (prod) space
1 Create a production space
Organizations and spaces are organizational units in the Cloud Foundry infrastructure that can
be used to store and track application resources An organization contains domains spaces and
users a space contains applications and services By default a dev (development) space is
created for you
a Navigate to the Bluemix dashboard if you are not there already
b Click Create a Space in the left menu
c In the Create a Space dialog input prod as your space name and click CREATE
2 Create services for deployments to your dev space
When deploying to your dev and prod spaces you will likely want to have services dedicated to
those deployments For example you want to use separate databases for each space Wersquoll
begin by creating services for each space
a Navigate to the Bluemix dashboard if you are not there already
b Click CATALOG
c Create the Cloudant NoSQL DB service
i Scroll down until you see the Cloudant NoSQL DB service Hint Check the Data
and Analytics section The catalog is constantly being updated with new
services
ii Click the Cloudant NoSQL DB service
iii In the Space dropdown choose dev
iv In the App dropdown choose Leave unbound
18
v In the Service name box leave the default or change the name to something
you like Be sure the name you choose begins with ldquocloudantrdquo as that is how
the code identifies the service
vi Note the name of your service as you will need it later
vii Click CREATE
d Create the Twilio service
i Navigate to the Catalog if you are not there already
ii Scroll down until you see the Twilio service Hint Check the Mobile section The
catalog is constantly being updated with new services
iii Click the Twilio service
iv In the Space dropdown choose dev
v In the App dropdown choose Leave unbound
vi In the Service name box leave the default or change the name to something
you like Be sure the name you choose begins with ldquotwiliordquo as that is how the
code identifies the service Note the name you choose as you will need it later
vii In the Account SID and Auth Token fields paste your Twilio AccountSID and
AuthToken from your Twilio Account Settings page
viii Click CREATE
3 Create services for deployments to your prod space
Repeat the steps from 2 above to create Cloudant NoSQL DB and Twilio services for
deployments to your prod space Be sure to select ldquoprodrdquo as the Space instead of ldquodevrdquo
4 Enable Advanced Build amp Deploy
You can configure a multi-stage build and deployment pipeline to support your DevOps
approach to software development Note that the pipeline only includes changes that have
been pushed to your projectrsquos repository changes that are in your workspace in the Web IDE
that have not been pushed to your projectrsquos repository will NOT be deployed as part of the
pipeline
a Open the Fabulous Price Finder project you created in the previous section by
navigating to DevOps Services signing in if youre not already authenticated and
clicking on your project on the My Projects page
b Click BUILD amp DEPLOY in the upper-right corner
5 Add a builder stage
The first stage we will create is a builder stage
19
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Build Stage
c Notice that the Input Type is set to SCM Repository by default This means the input for
the stage will be your git repository
d Notice that Run jobs whenever a change is pushed to Git is selected by default This
means that whenever you or someone on your team pushes code to your projectrsquos
repository the build stage will automatically be triggered
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Build
g Since this app does not require compilation (unlike a Java app) we will use the Simple
builder type Note that you can choose from a variety of builders
h Notice that the Stop running this stage if this job fails is checked by default This means
that any jobs further down the pipeline will not execute and the whole stage will be
marked as failed if a failure occurs
i Click SAVE
6 Add a ldquodeploy to development spacerdquo stage
Now we will add a deployment to the space that represents your development space Some
might call this a quality assurance or test space It is a place where developers can test their
code live in a production quality environment without actually putting it in production
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Dev Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the previous stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default This
will configure your pipeline so that whenever someone pushes code to your projectrsquos
repository the build step will run and if it succeeds a deploy to the development
environment will be kicked off
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Application Name to be a name that is unique to your Bluemix dev space
h By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
20
developers on your team will be able to test their code In the Script section after cf push ldquo$CF_APPrdquo
add -n whateverYouWantYourUrlToBe Note the url needs to be unique across
all Bluemix apps so be creative
i Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
j Next add a command to restage your app with the newly bound services cf restage $CF_APP
k The script section should now look similar to the following cf push $CF_APP -n fbf-lauren-dev
cf bind-service $CF_APP Cloudant-dev
cf bind-service $CF_APP Twilio-dev
cf restage $CF_APP
l Note that if we had automated tests associated with this project we could add a test
job to this stage so that the deploy would run and then tests could be executed against
that deployment
m Click SAVE
7 Add a deploy to production space stage
Now we will add a deployment to the space that represents your production space This space
is where you keep apps that your end users will use
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Prod Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the Build Stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default Since
we donrsquot have any automated tests included in this pipeline automatically deploying to
production is probably not safe Select Run jobs only when this stage is run manually
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Space to be prod
h Update the Application Name to be a name that is unique to your Bluemix prod space
i By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
21
your end users will be able to access your app In the Script section after cf push ldquo$CF_APPrdquo
add -n whateveryouwantyoururltobe Note the url needs to be unique across
all Bluemix apps so be creative
j Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
k Next add a command to restage your app with the newly bound services cf restage $CF_APP
l The script section should now look similar to the following cf push $CF_APP -n fbf-lauren
cf bind-service $CF_APP Cloudant-prod
cf bind-service $CF_APP Twilio-prod
cf restage $CF_APP
m Click SAVE
8 Kick off the pipeline
Now that we have the build pipeline configured itrsquos time to try it out To trigger the pipeline
we could make a change to our projectrsquos code and push the change to our Git repository or we
could manually request a build
a On the Pipeline page click the Play button ( ) in the Build Stage to kick off the first
stage of the pipeline manually
The build pipeline will go through the build and deploy to dev steps If you like what was
deployed to dev you can drag and drop the build from the Build Stage tile to the Prod
Deployment tile to deploy it there
Tweet this
Dove into DevOps by creating a release pipeline for my app [attach a screenshot of the Build amp
Deploy page for your app] Bluemix DevOpsServices
22
Get creative
Make a change to your code and watch the build pipeline automatically deploy it for you
Zero downtime deployments are very important to web applications Design and implement a
strategy to deploy your app to your production space without any downtime Hint check out
this article httpwwwibmcomdeveloperworkscloudlibrarycl-Bluemix-rollingpipeline
Additional resources
DevOps for Dummies ebook httpibmcodevopsfordummies
Top 10 Practices for Effective DevOps httpwwwdrdobbscomarchitecture-and-designtop-
10-practices-for-effective-devops240149363
Cloud Computing Trends 2014 State of the Cloud Survey
httpwwwrightscalecomblogcloud-industry-insightscloud-computing-trends-2014-state-
cloud-survey
DevOps Embracing Cloud Services httpwwwmidsizeinsidercomen-usarticledevops-
embracing-cloud-servicesVJmrScABg
23
Part 2A Live Edit In this part yoursquoll get to use an exciting new feature Live Edit The Live Edit feature allows you to make
changes to your application and have them deployed nearly instantaneously to your deployed app Itrsquos just like
editing files locallyhellipexcept you donrsquot have to set up a development environment
Since the Live Edit feature is currently optimized for Nodejs we will create a new app using the Personality
Insights Nodejs Web Starter boilerplate (what a concise name) The exciting thing about this boilerplate is that
it uses IBM Watson (remember Watson the supercomputer that beat Jeopardy champions a few years ago)
services
In this part you will create a new Bluemix app and leverage the Live Edit feature to see the changes you make
be deployed almost instantly to your running app
Learn this
Live Edit allows you to see changes you make in the DevOps Services Web IDE reflected in real-
time to your app deployed on Bluemix Itrsquos just like editing files locallyhellipexcept you donrsquot have
to set up a development environment
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app Changes you make in Node modules (like JavaScript files)
will require a fast restart of the app in order to be reflected in your deployed app
Try this
1 Sign up for DevOps Services if you have not done so already
a Navigate to httpibmbizcds-bluemix and sign up
b As part of the Bluemix registration process you will receive an e-mail asking you to
confirm your account If you do not confirm you are not registered If you do not
receive a confirmation e-mail send a note to idbluemixnet
c Navigate to httpibmbizcds-ids and register for DevOps Services using the same IBM
id you used for Bluemix
2 Create a Nodejs app using a Bluemix boilerplate
The first thing we need is a Nodejs app One of the fastest ways to get a new app is to use a
Bluemix boilerplate
a Navigate to httpibmbizcds-bluemix
b Log in if you are not already authenticated
c Click CATALOG The Catalog is your place to browse the available boilerplates (sample
applications) runtimes and services
d In the Boilerplates section click Personality Insights Nodejs Web Starter
24
e Input a name for the app (what the app will be referred to in Bluemix) and a host for the
app (the part of the url that will go before mybluemixnet) Note that the host must be
globally unique across all of Bluemix so be creative
f Click CREATE A copy of the boilerplate code will be put in to a new app for you and
then deployed to Bluemix
g Click Overview In the APP HEALTH section wait for the message ldquoYour app is
runningrdquo to be displayed
h When your app is running click on your route (toward the top of the page) to open your
running app
3 Explore the Nodejs app
Now that your app is running letrsquos take a moment to explore it The Personality Insights app
uses the Watson Personality Insights service to analyze text and determine personality traits of
the textrsquos author
a The app includes sample text from Moby Dick Click ANALYZE to learn about the
personality of Moby Dickrsquos author Herman Melville Textual output as well as a
graphical visualization are displayed
b Navigate to one of your favorite websites with English text (keep it office-friendlyhellipso
perhaps choose your favorite news site) and copy a block of text
c Return to your Personality Insights App and paste the text in the Try the Service box
d Click ANALYZE View the textual output as well as the graphical visualization
4 Prepare for Live Edit
Wersquove tested the app and now wersquoll prep to make some changes to it
a Return to the Bluemix page for your Personality Insights app If your app is not in a
separate window or tab right-click on your apprsquos route and choose an option to open
the link in a new window or tab
b Click ADD GIT in the upper-right corner
c Click CONTINUE in the Create Git Repository dialog Bluemix will take a copy of your
apprsquos code and put it in a Git repository hosted at DevOps Services
d Click CLOSE once the Git Repository has been successfully created
e Click EDIT CODE in the upper-right corner to open the DevOps Services Web IDE
f Toggle the Live Edit option to on
g If prompted to redeploy click OK The app will redeploy so changes can be made live to
your deployed app When the app finishes deploying a green dot will be displayed in
the run bar
25
When the app finishes deploying you are ready to make live edits
5 Change a static file
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app
a In the navigator view on the left expand views
b Select layoutjade
c Update the h2 to say something like ldquoThis open lab is so great that Irsquom going to Tweet
about itrdquo
d Switch to your tab or window that has your running app
e Refresh the page
f Note that the heading of your app was changed instantly You didnrsquot have to wait for
the app to redeploy
g Make a few more changes to static files and watch your app update in real time
6 Change a node module
Changes to node modules require a fast app restart (not a full redeploy) in order to be deployed
because the server caches node modules in memory
a Select the root directory of your app in the navigator in the left pane
b Click File gt New gt File
c The name of the file is highlighted so you can rename it Type defaulttexttxt and press
Enter or Return on your keyboard
d In the editor on the right type or paste the text that you want to use as the default text
in the app
e Select the appjs file in the navigator in the left pane
f In the editor on the right look for the dummy_text variable around line 25 Replace
mobydicktxt with defaulttexttxt
g In the web IDEs top bar click the Restart button ( )
h When the app finishes restarting (which only takes a few seconds) a green dot is
displayed in the run bar
26
i Switch to the tab or window that has your running app Refresh the page to see the new
text (If your browser cached the page and you dont see the text update browse to
your apps URL again and the change should be displayed)
Tweet this
Developing in the cloud using Bluemix DevOpsServices is now as fast and easy as developing
locally WhoKnew
Get creative
Create a new look for the Personality Insights app Open the CSS files located in the publiccss
directory and have fun making changes to the files Watch as your changes are deployed live
Additional resources
Everything AND the kitchen sync Bluemix Live Sync is here httpsdeveloperibmcomdevops-
services20150213everything-kitchen-sync-Bluemix-live-sync
Bluemix Live Sync documentation
httpswwwngbluemixnetdocscm_mmc=developerWorks-_-dWdevcenter-_-devops-
services-_-lpmanageappsbluemixlivehtmlbluemixlive
27
Part 2B Bluemix Debug Sometimes staring at the code to figure out whatrsquos going wrong just doesnrsquot work Sometimes you really need
to debug the code or access the environment where the app is running This is where Bluemix Debug comes in
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for your Nodejs
apps
In this part yoursquoll continue on with the Personality Insights Nodejs app you created in part 2A
Learn this
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for
your Nodejs apps
Try this Note The Node Inspector Debugger currently only works in Chrome You may want to take this
opportunity to change browsers if you are not already using Chrome
1 Open the IBM Bluemix Debugger
a Navigate to httpibmbizcds-ids and sign in if you are not already authenticated
b In My Projects locate the tile for your Personality Insights app Click the Edit Code icon
( ) to open the Web IDE for your project
c In the Web IDErsquos top bar click the Debug button ( )
d When prompted for credentials input your IBM id and password
2 Use the shell
The Bluemix Shell allows you to explore and interact with the Bluemix environment where your
app is running by using a built-in bash shell
a On the IBM Bluemix Debugger page for your project click Open Shell A shell client
opens in your browser
b View the processes running in your Bluemix environment by inputting the following
command top
c Click NEW WINDOW
d Drag and drop the new window so that you can continue to observe your processes
while you explore the log files
e In the new window change directory to the log files by inputting the following
command cd logs
28
f View a list of the files in the logs directory by inputting the following command ls
g Notice that staging_tasklog is a file in your logs directory View the last 10 lines of the
log file by inputting the following command tail staging_tasklog
3 Use the Debugger
The Debugger allows you to debug Nodejs apps
a On the IBM Bluemix Debugger page for your project click Open Debugger The
Debugger takes about 30 seconds to load
b If the Navigator is not displayed on the left click the Expand Navigator button
c Select appjs in the Navigator to open the file
d Add a breakpoint on line 48 by clicking 48
e In a different tab or window navigate to your running app
f Click Analyze
g Switch back to the tab or window with your Debugger Notice that the breakpoint has
been hit On the right you can view the Call Stack and Variables You can also use
buttons on the right to step over the next function call step into the next function call
and step out of the next function call
h When you have finished exploring your running app click the Resume script execution
button ( ) on the right
Note that from the IBM Bluemix Debugger page you can choose to suspend the app which will
restart the app and break at the first line of the app
29
Tweet this
Bluemix + DevOpsServices + Shell = a happy developer NoDownloadsRequired [include a
screenshot of the shell in your browser]
Just debugged my Bluemix app by using the debugger in DevOpsServices
NoDownloadsRequired [take a selfie of you in front of your debugger looking very excited]
Get creative
Use some of your favorite commands to explore the Bluemix environment where your app runs
Additional resources
Bluemix Live Sync
httpswwwngBluemixnetdocsmanageappsBluemixlivehtmlBluemixlivedebugger
Learning the Shell httplinuxcommandorglc3_learning_the_shellphp
5
Additional resources
MQTT Starfighter JazzHub Bluemix and live Scaling Out
httpswwwyoutubecomwatchv=b9hkCHmH7H4
Computerworld Forecast Study 2015 httpwwwidgenterprisecomreportcomputerworld-
forecast-study-2015
Transforming Enterprise Cloud Services
httpbooksgooglecombooksid=yyiPyIXgbxMCamppg=PA55v=onepageampqampf=false
Rapidly create a Nodejs app using a Bluemix boilerplate and DevOps Services
httpwwwibmcomdeveloperworkslibraryd-Bluemix-devops90indexhtml
6
Part 1B Deploying an App that Uses a Bluemix Service In this part youll be working with the Laurens Lovely Landscapes app you created in part 1A Youll also be
working with The Fabulous Price Finder app The Fabulous Price Finder provides you with the current prices of
items youre interested in purchasing online with the simple click of a button
Learn this
Leveraging Bluemix services like database services Watson services and DevOps Services makes
creating and managing apps easier
Deploying apps that leverage Bluemix services can be fast and easy
Try this
1 Fork the Fabulous Price Finder
a Go to the Fabulous Price Finder project overview page httpsibmbizcds-fbf
b Click EDIT CODE in the upper-right corner You might be prompted to authenticate if
you have not already done so
c Select Tools gt Fork
d Type a name for your project leave the Add features for Scrum development and Make
this a Bluemix Project boxes checked and click CREATE
e Note that when the project has finished forking your new project name is listed in the
upper-left corner
7
2 Deploy the Fabulous Price Finder
The Fabulous Price Finder uses the Cloudant NoSQL DB service hosted at Bluemix The Cloudant
database service provides access to a fully managed NoSQL JSON data layer thatrsquos always on To
get the Fabulous Price Finder running you deploy the application and then bind a new Cloudant
NoSQL DB instance to the application
a In the left navigation pane select manifestyml
b Click the Deploy ( ) button in the top gray bar Note that when the app finishes
deploying the database functionality will not yet work because you have not bound a
Cloudant NoSQL DB instance to it
c When the application is deployed click the Open application dashboard button ( ) in
the top gray bar
d If you are not already authenticated at Bluemix you might be prompted to do so After
you are authenticated you are redirected to your applications page on Bluemix
e Click ADD A SERVICE OR API
f Scroll down until you see the Cloudant NoSQL DB service Hint Check the Data and
Analytics section The catalog is constantly being updated with new services
g Click the Cloudant NoSQL DB service
h In the Cloudant NoSQL DB dialog leave the defaults in the dialog (the code assumes the
name of your Cloudant NoSQL DB service starts with cloudant) and click CREATE
i When prompted if you want to restage your application now click RESTAGE
j When the page indicates your app is running click your applications route to open it
3 Try the Fabulous Price Finder
Now that you have the Fabulous Price Finder running its time to explore
The home page of the Fabulous Price Finder enables you to record the items for which you want
to check prices You begin with the Antarctica print from the Laurens Lovely Landscapes app
you deployed
a In the form on the home page specify the name for the print (Antarctica) the URL for
the print from your online store (Hint Look for something similar to
httplaurenslovelylandscapes-some-long-string-of-random-
charactersmybluemixnetantarctica) and the id of the price field for the print
(price)
b Click Submit
You are redirected to the View Database page where you can see information about the item
you just stored You can record the details for other items if you like
8
4 Get Prices
After you have stored information about an item you can check its price
a On the home page click Get Prices
b On the Success page click View the database
Notice that the price of your item is now stored in the database If you like go back to your
Laurens Lovely Lanscapes project update the price of the Antarctica print (dont forget to
deploy your change) and click Get Prices again Note that the database reflects the new price of
the print
5 Explore the Cloudant Database
You can browse and update the contents of your Cloudant database which can be helpful when
debugging and working with your app
a Go to the Bluemix dashboard
b Log in if you are not already authenticated
c On the dashboard click on your FabulousPriceFinder app to open it
d Click your Cloudant NoSQL DB service tile to open it
e Click LAUNCH
f In the Databases section click on your database to open it
g Browse the documents youve added to your database
Tweet this
Check out the app I just deployed that leverages a Cloudant database on Bluemix [insert link
to your app]
Get creative
Enhance the apprsquos navigation so it is easier to move around the site or change the name of the
app to be less ldquofabulousrdquo and more you Make it your own
Additional resources
Cloudant-Python httpsgithubcomcloudant-labscloudant-python
Develop and manage Java apps with IBM Bluemix and DevOps Services
httpwwwibmcomdeveloperworkslibraryd-Bluemix-javadevopsindexhtml
9
Part 1C Planning Tracking amp Leveraging New Bluemix Services
Learn this
Leveraging software as a service that works well with the platform as a service of your choice
can greatly speed up your software delivery lifecycle
Agile planning and tracking is simple in the cloud and creates built-in traceability for all of your
teammateshellipwhether they are collocated or distributed
Writing code that leverages a Bluemix service can be fast and significantly reduce development
time
Try this
1 Plan a new feature to add to the Fabulous Price Finder
So far you have made use of existing code but you havent created anything new Time to
change that
When working with teammates or even by yourself organizing your ideas into user stories and
then organizing your user stories into a plan can be incredibly valuable
a Open Track amp Plan
i Open the Fabulous Price Finder project you created in the previous section by
navigating to DevOps Services signing in if youre not already authenticated
and clicking on your project on the My Projects page
ii Click the gear button ( ) in the upper-right corner to open the Project
Settings page
iii Click OPTIONS
iv On the page that loads select the Enable Track amp Plan checkbox (if it is not
already enabled) and click SAVE
v Click TRACK amp PLAN in the upper-right corner The Track amp Plan section is your
place to organize your ideas
b Create work items in your backlog
i On the left pane click Backlog
ii On the right pane type the following in the Create a work itemhellip field As a shopper I want a text message sent to me with the
price of each item so that I dont have to check the
website to view the prices
10
iii The tool will automatically detect the work item type is story and set the type
for you
iv In the icon bar below click the Owned By icon and select your username
v Click CREATE
vi Repeat Steps 2-5 to create work items for the following stories
1 As a shopper I want to organize my items by
store so that I only have to input the field ID
once per store instead of every item
2 As a shopper I want to see a graph of the price
of the items Im watching over time so I can
judge if its a good time to buy the items
3 As a shopper I want the prices to be retrieved
automatically for me on a daily basis so I dont
have to log in manually and click Get Prices
4 As a shopper I want the prices to be texted to
me only when the price has changed so Im not
getting inundated with text messages
vii Create a work item of type defect with the following summary The View
Database page fails to load when the database is empty
c Plan your work
Now that you have filled your backlog with stories its time to plan your first sprint
i On the left pane click Sprint Planning A sprint represents a period of time
Organize your user stories in sprints
ii Click Add Sprints
iii Configure the sprints so you have at least two and click Create
iv In the Backlog section rearrange your stories so they are in a ranked order by
dragging and dropping them Put As a shopper I want a text message sent to me with the price of each item so that
I dont have to check the website to view the prices as
the top item in the list and As a shopper I want the prices to be retrieved automatically for me on a daily basis so
I dont have to log in manually and click Get Prices as
the second highest item in the list
v Click the Sprint 1 dropbdown box and select Sprint 1 so that Sprint 1 appears to
the right of the backlog (You may need to click Sprint 2 and then click Sprint 1
in order for the sprint to appear)
11
vi Assume you have time to complete one user story per sprint Drag the topmost
item in the list to Sprint 1 (on the right)
vii In the sprint dropdown box select Sprint 2
viii Drag the new top most item to Sprint 2
d Track your work
Sprint 1 has begun Indicate that you have started working on the first work item by
marking it as In Progress
i In the sprint dropdown box select Sprint 1
ii In the Sprint 1 section click the Status New icon ( ) for the story planned
for Sprint 1
iii In the Status dialog click Start Working
iv Note the work item ID for your work item because you will need it later in this
lab
2 Implement the feature
Next implement the work item As a shopper I want a text message sent to me with the price of each item so that I dont have to check the
website to view the prices The idea of implementing a text messaging feature
might sound a bit daunting to you Fortunately Bluemix provides a Twilio service you can use
that handles sending the text message so you can implement this feature with only nine lines of
code
a Register with Twilio
If you do not already have an account with Twilio you need to register You also need
your Twilio AccountSID Auth Token and phone number
1 Go to httpswwwtwiliocom and sign up
2 Follow the on-screen instructions to verify your account
3 Note your Twilio phone number
4 After you have authenticated and are viewing your account click your ID in the
right corner and select Account
5 In the API Credentials section note your AccountSID and AuthToken (You
might want to leave this page open as you continue so you can easily copy the
credentials)
b If you do not want to receive text messages
If you do not want to receive text messages to your phone because your carrier charges
ridiculous amounts you can instead send the text messages to your Twilio account
12
phone number If yoursquore ok with receiving text messages on your phone skip this
section and continue on to step c
i In Twilio click NUMBERS in the top navigation bar
ii Click your phone number in the Number table
iii In the Messaging section replace the Request URL with any valid url (this
prevents a never ending loop of your phone number sending a response to the
text message it just received) For example you might replace the Request URL
with a link to your Laurenrsquos Lovely Landscapes app
iv Click Save
v Click Numbers in the top navigation bar
vi Click Verify a number
vii Click text you instead
viii Input your Twilio phone number in the Phone Number box
ix Click Text Me
x In a new tab or window navigate to twiliocom and click Account
xi Click NUMBERS in the top navigation bar
xii Click your number in the Number table
xiii Click Inbound in the Messaging section
xiv Hover over the text message in the table to see the incoming message Note
the verification number in the text messagersquos body
xv Return to your original tab or window and input the verification number
xvi Click Submit
When you want to view incoming text messages for your Twilio number return to the
details page for your number and click Inbound
c Add the Twilio service to the app
Begin by adding the Bluemix Twilio service to your app
i In DevOps Services click EDIT CODE in the upper-right corner
ii Click the Open application dashboard button ( ) The Bluemix page for your
app opens
iii Click ADD A SERVICE OR API
13
iv Scroll down until you see the Twilio service Hint Check the Mobile section The
catalog is constantly being updated with new services
v Click the Twilio service
vi In the Account SID and Auth Token fields paste your Twilio AccountSID and
AuthToken from your Twilio Account Settings page
vii Click CREATE
viii When prompted restage your application now by clicking RESTAGE
ix Wait for the page to indicate that your app is running
d Add code that uses the Twilio service
Add code to your app that sends a text message whenever a price is retrieved for an
item Use the Twilio service to actually send the text message
i Add Twilio to requirementstxt
Your app needs the Twilio module so you must add it to the requirementstxt
file
1 In the Web IDE open requirementstxt
2 Add a new line to the end of the file and type twilio
3 Select File gt Save
ii Connect to the Twilio service
To effectively use your Twilio service you must connect to it
1 In the Web IDE open the wsgipy file
2 In the Imports section around Line 55 add the following line from twiliorest import TwilioRestClient
3 As part of the for loop that begins around Line 65 add the following
lines
Note Be sure your spacing before these two lines (spaces and tabs) is
identical to the if statement that checks if the key starts with
ldquocloudantrdquo
if decoded_config[key][0][name]startswith(Twilio)
twilio_creds = decoded_config[key][0][credentials]
twilio_authToken = twilio_creds[authToken]
twilio_accountSID = twilio_creds[accountSID]
twilioClient = TwilioRestClient(twilio_accountSID twilio_authToken)
4 Your Twilio credentials are now stored in twilio_creds Your code
should now look like the following listing
14
for key value in decoded_configiteritems()
if decoded_config[key][0][name]startswith(Twilio)
twilio_creds = decoded_config[key][0][credentials]
twilio_authToken = twilio_creds[authToken]
twilio_accountSID = twilio_creds[accountSID]
twilioClient = TwilioRestClient(twilio_accountSID twilio_authToken)
if keystartswith(cloudant)
cloudant_creds = decoded_config[key][0][credentials]
cloudant_host = cloudant_creds[host]
cloudant_port = int(cloudant_creds[port])
cloudant_username = cloudant_creds[username]
cloudant_password = cloudant_creds[password]
cloudant_url = str(cloudant_creds[url])
account = cloudantAccount(cloudant_username)
login = accountlogin(cloudant_username cloudant_password)
assert loginstatus_code == 200
db = accountdatabase(dbname)
response = dbput()
print responsejson
5 Save your changes by selecting File gt Save
e Add code to send the text message
Now comes the fun part Its time to code
Continue to work in the wsgipy file and create a new function around Line 89 that
sends a text message def sendTextWithMessage(message)
message = twilioClientmessagescreate(to=+15555555555 from_=+15555555555
body=message)
f Replace the to number with the cell phone number or Twilio number where you want
the text messages to be sent (dont forget the country code)
g Replace the from number with your Twilio phone number (dont forget the country
code)
h In the getCurrentPrice function inside of the if statement that checks if the
price is not None add the following line of code sendTextWithMessage(The current price of s is s (item[name] price))
i Save your changes by selecting File gt Save
Thats it Youve implemented your feature with only nine lines of code
3 Deploy and test the feature
Now its time to deploy your application to Bluemix so you can test it
a Click the Deploy button ( )
b If prompted if you want to stop and redeploy click OK
c After your application has finished deploying click the Open URL button ( ) in the top
gray bar
d In your app click Get Prices
15
e Check your phone or Twilio number for a text message
If you like update the prices of the items in the store and get the prices again
4 Push the feature to the repository
Now that your feature is tested its time to push your changes to the Git repository
a In the leftmost bar of icons click the Git Repository button ( )
b In the box in the Working Directory Changes section type a comment similar to the
following being sure to replace 20 with the work item ID associated with the work item
you created Changes to implement the text messaging feature as
described in work item 20
c Select each change in the Changed Files section and click the COMMIT button
d In the OUTGOING section click PUSH
e If you are prompted for your committer information enter it and click OK
5 Complete the feature
To indicate that you have finished your feature mark your work item as complete
a In the Web IDE click TRACK amp PLAN in the upper-right corner
b In the right pane find your work item associated with the text messaging feature and
click the Status In Progress icon
c Click Set Done
d In the right pane scroll right until you see the RESOLVED section Notice that your work
item is now marked done
6 Discover the traceability
When you added a comment in your commit that mentioned your work item a link was
automatically created for you between the change and the work item
a In the right pane scroll to the Resolved view if you are not currently viewing your
resolved work items
b Click the textual summary of the work item associated with the text messaging feature
to open it
c In the work item click the Links tab
d In the LINKS section notice that a link was automatically generated for you Click the
link The Git Log displays
e Observe that you have a summary of the git commit and its associated work items
f Click GIT LOG in the left navigation to see a list of all of your git commits
16
Tweet this
Collaborate with me on this Bluemix app I created [insert link to your app] [include a
screenshot of the Web IDE with your codemdashTweets with images are more likely to get noticed]
Get creative
Invite a friend to join your project Navigate to your projects home page click Members and
invite a friend to join
Create new work items for features yoursquod like to implement or defects you find
Implement some of the stories you created or fix the defects you recorded
Additional resources
Twilio SMS and MMS Python Quickstart httpswwwtwiliocomdocsquickstartpythonsms
Managing Distributed Teams
httpswwwscrumallianceorgcommunityarticles2013julymanaging-distributed-
teamsaspx
So Long Scrum Hello Kanban httpsstormpathcomblogso-long-scrum-hello-kanban
17
Part 1D Deploying Automatically Using the Delivery Pipeline
Learn this
Deployment automation is one of the keys to a successful DevOps approach
You can create a complete delivery pipeline with multiple stages automated tests and
automatic deploys using DevOps Services
Try this
You can configure a multi-stage build and deployment pipeline to support your DevOps approach to
software development In this section you will configure a builder a deployment to your
development (dev) space and a deployment to your production (prod) space
1 Create a production space
Organizations and spaces are organizational units in the Cloud Foundry infrastructure that can
be used to store and track application resources An organization contains domains spaces and
users a space contains applications and services By default a dev (development) space is
created for you
a Navigate to the Bluemix dashboard if you are not there already
b Click Create a Space in the left menu
c In the Create a Space dialog input prod as your space name and click CREATE
2 Create services for deployments to your dev space
When deploying to your dev and prod spaces you will likely want to have services dedicated to
those deployments For example you want to use separate databases for each space Wersquoll
begin by creating services for each space
a Navigate to the Bluemix dashboard if you are not there already
b Click CATALOG
c Create the Cloudant NoSQL DB service
i Scroll down until you see the Cloudant NoSQL DB service Hint Check the Data
and Analytics section The catalog is constantly being updated with new
services
ii Click the Cloudant NoSQL DB service
iii In the Space dropdown choose dev
iv In the App dropdown choose Leave unbound
18
v In the Service name box leave the default or change the name to something
you like Be sure the name you choose begins with ldquocloudantrdquo as that is how
the code identifies the service
vi Note the name of your service as you will need it later
vii Click CREATE
d Create the Twilio service
i Navigate to the Catalog if you are not there already
ii Scroll down until you see the Twilio service Hint Check the Mobile section The
catalog is constantly being updated with new services
iii Click the Twilio service
iv In the Space dropdown choose dev
v In the App dropdown choose Leave unbound
vi In the Service name box leave the default or change the name to something
you like Be sure the name you choose begins with ldquotwiliordquo as that is how the
code identifies the service Note the name you choose as you will need it later
vii In the Account SID and Auth Token fields paste your Twilio AccountSID and
AuthToken from your Twilio Account Settings page
viii Click CREATE
3 Create services for deployments to your prod space
Repeat the steps from 2 above to create Cloudant NoSQL DB and Twilio services for
deployments to your prod space Be sure to select ldquoprodrdquo as the Space instead of ldquodevrdquo
4 Enable Advanced Build amp Deploy
You can configure a multi-stage build and deployment pipeline to support your DevOps
approach to software development Note that the pipeline only includes changes that have
been pushed to your projectrsquos repository changes that are in your workspace in the Web IDE
that have not been pushed to your projectrsquos repository will NOT be deployed as part of the
pipeline
a Open the Fabulous Price Finder project you created in the previous section by
navigating to DevOps Services signing in if youre not already authenticated and
clicking on your project on the My Projects page
b Click BUILD amp DEPLOY in the upper-right corner
5 Add a builder stage
The first stage we will create is a builder stage
19
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Build Stage
c Notice that the Input Type is set to SCM Repository by default This means the input for
the stage will be your git repository
d Notice that Run jobs whenever a change is pushed to Git is selected by default This
means that whenever you or someone on your team pushes code to your projectrsquos
repository the build stage will automatically be triggered
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Build
g Since this app does not require compilation (unlike a Java app) we will use the Simple
builder type Note that you can choose from a variety of builders
h Notice that the Stop running this stage if this job fails is checked by default This means
that any jobs further down the pipeline will not execute and the whole stage will be
marked as failed if a failure occurs
i Click SAVE
6 Add a ldquodeploy to development spacerdquo stage
Now we will add a deployment to the space that represents your development space Some
might call this a quality assurance or test space It is a place where developers can test their
code live in a production quality environment without actually putting it in production
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Dev Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the previous stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default This
will configure your pipeline so that whenever someone pushes code to your projectrsquos
repository the build step will run and if it succeeds a deploy to the development
environment will be kicked off
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Application Name to be a name that is unique to your Bluemix dev space
h By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
20
developers on your team will be able to test their code In the Script section after cf push ldquo$CF_APPrdquo
add -n whateverYouWantYourUrlToBe Note the url needs to be unique across
all Bluemix apps so be creative
i Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
j Next add a command to restage your app with the newly bound services cf restage $CF_APP
k The script section should now look similar to the following cf push $CF_APP -n fbf-lauren-dev
cf bind-service $CF_APP Cloudant-dev
cf bind-service $CF_APP Twilio-dev
cf restage $CF_APP
l Note that if we had automated tests associated with this project we could add a test
job to this stage so that the deploy would run and then tests could be executed against
that deployment
m Click SAVE
7 Add a deploy to production space stage
Now we will add a deployment to the space that represents your production space This space
is where you keep apps that your end users will use
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Prod Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the Build Stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default Since
we donrsquot have any automated tests included in this pipeline automatically deploying to
production is probably not safe Select Run jobs only when this stage is run manually
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Space to be prod
h Update the Application Name to be a name that is unique to your Bluemix prod space
i By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
21
your end users will be able to access your app In the Script section after cf push ldquo$CF_APPrdquo
add -n whateveryouwantyoururltobe Note the url needs to be unique across
all Bluemix apps so be creative
j Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
k Next add a command to restage your app with the newly bound services cf restage $CF_APP
l The script section should now look similar to the following cf push $CF_APP -n fbf-lauren
cf bind-service $CF_APP Cloudant-prod
cf bind-service $CF_APP Twilio-prod
cf restage $CF_APP
m Click SAVE
8 Kick off the pipeline
Now that we have the build pipeline configured itrsquos time to try it out To trigger the pipeline
we could make a change to our projectrsquos code and push the change to our Git repository or we
could manually request a build
a On the Pipeline page click the Play button ( ) in the Build Stage to kick off the first
stage of the pipeline manually
The build pipeline will go through the build and deploy to dev steps If you like what was
deployed to dev you can drag and drop the build from the Build Stage tile to the Prod
Deployment tile to deploy it there
Tweet this
Dove into DevOps by creating a release pipeline for my app [attach a screenshot of the Build amp
Deploy page for your app] Bluemix DevOpsServices
22
Get creative
Make a change to your code and watch the build pipeline automatically deploy it for you
Zero downtime deployments are very important to web applications Design and implement a
strategy to deploy your app to your production space without any downtime Hint check out
this article httpwwwibmcomdeveloperworkscloudlibrarycl-Bluemix-rollingpipeline
Additional resources
DevOps for Dummies ebook httpibmcodevopsfordummies
Top 10 Practices for Effective DevOps httpwwwdrdobbscomarchitecture-and-designtop-
10-practices-for-effective-devops240149363
Cloud Computing Trends 2014 State of the Cloud Survey
httpwwwrightscalecomblogcloud-industry-insightscloud-computing-trends-2014-state-
cloud-survey
DevOps Embracing Cloud Services httpwwwmidsizeinsidercomen-usarticledevops-
embracing-cloud-servicesVJmrScABg
23
Part 2A Live Edit In this part yoursquoll get to use an exciting new feature Live Edit The Live Edit feature allows you to make
changes to your application and have them deployed nearly instantaneously to your deployed app Itrsquos just like
editing files locallyhellipexcept you donrsquot have to set up a development environment
Since the Live Edit feature is currently optimized for Nodejs we will create a new app using the Personality
Insights Nodejs Web Starter boilerplate (what a concise name) The exciting thing about this boilerplate is that
it uses IBM Watson (remember Watson the supercomputer that beat Jeopardy champions a few years ago)
services
In this part you will create a new Bluemix app and leverage the Live Edit feature to see the changes you make
be deployed almost instantly to your running app
Learn this
Live Edit allows you to see changes you make in the DevOps Services Web IDE reflected in real-
time to your app deployed on Bluemix Itrsquos just like editing files locallyhellipexcept you donrsquot have
to set up a development environment
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app Changes you make in Node modules (like JavaScript files)
will require a fast restart of the app in order to be reflected in your deployed app
Try this
1 Sign up for DevOps Services if you have not done so already
a Navigate to httpibmbizcds-bluemix and sign up
b As part of the Bluemix registration process you will receive an e-mail asking you to
confirm your account If you do not confirm you are not registered If you do not
receive a confirmation e-mail send a note to idbluemixnet
c Navigate to httpibmbizcds-ids and register for DevOps Services using the same IBM
id you used for Bluemix
2 Create a Nodejs app using a Bluemix boilerplate
The first thing we need is a Nodejs app One of the fastest ways to get a new app is to use a
Bluemix boilerplate
a Navigate to httpibmbizcds-bluemix
b Log in if you are not already authenticated
c Click CATALOG The Catalog is your place to browse the available boilerplates (sample
applications) runtimes and services
d In the Boilerplates section click Personality Insights Nodejs Web Starter
24
e Input a name for the app (what the app will be referred to in Bluemix) and a host for the
app (the part of the url that will go before mybluemixnet) Note that the host must be
globally unique across all of Bluemix so be creative
f Click CREATE A copy of the boilerplate code will be put in to a new app for you and
then deployed to Bluemix
g Click Overview In the APP HEALTH section wait for the message ldquoYour app is
runningrdquo to be displayed
h When your app is running click on your route (toward the top of the page) to open your
running app
3 Explore the Nodejs app
Now that your app is running letrsquos take a moment to explore it The Personality Insights app
uses the Watson Personality Insights service to analyze text and determine personality traits of
the textrsquos author
a The app includes sample text from Moby Dick Click ANALYZE to learn about the
personality of Moby Dickrsquos author Herman Melville Textual output as well as a
graphical visualization are displayed
b Navigate to one of your favorite websites with English text (keep it office-friendlyhellipso
perhaps choose your favorite news site) and copy a block of text
c Return to your Personality Insights App and paste the text in the Try the Service box
d Click ANALYZE View the textual output as well as the graphical visualization
4 Prepare for Live Edit
Wersquove tested the app and now wersquoll prep to make some changes to it
a Return to the Bluemix page for your Personality Insights app If your app is not in a
separate window or tab right-click on your apprsquos route and choose an option to open
the link in a new window or tab
b Click ADD GIT in the upper-right corner
c Click CONTINUE in the Create Git Repository dialog Bluemix will take a copy of your
apprsquos code and put it in a Git repository hosted at DevOps Services
d Click CLOSE once the Git Repository has been successfully created
e Click EDIT CODE in the upper-right corner to open the DevOps Services Web IDE
f Toggle the Live Edit option to on
g If prompted to redeploy click OK The app will redeploy so changes can be made live to
your deployed app When the app finishes deploying a green dot will be displayed in
the run bar
25
When the app finishes deploying you are ready to make live edits
5 Change a static file
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app
a In the navigator view on the left expand views
b Select layoutjade
c Update the h2 to say something like ldquoThis open lab is so great that Irsquom going to Tweet
about itrdquo
d Switch to your tab or window that has your running app
e Refresh the page
f Note that the heading of your app was changed instantly You didnrsquot have to wait for
the app to redeploy
g Make a few more changes to static files and watch your app update in real time
6 Change a node module
Changes to node modules require a fast app restart (not a full redeploy) in order to be deployed
because the server caches node modules in memory
a Select the root directory of your app in the navigator in the left pane
b Click File gt New gt File
c The name of the file is highlighted so you can rename it Type defaulttexttxt and press
Enter or Return on your keyboard
d In the editor on the right type or paste the text that you want to use as the default text
in the app
e Select the appjs file in the navigator in the left pane
f In the editor on the right look for the dummy_text variable around line 25 Replace
mobydicktxt with defaulttexttxt
g In the web IDEs top bar click the Restart button ( )
h When the app finishes restarting (which only takes a few seconds) a green dot is
displayed in the run bar
26
i Switch to the tab or window that has your running app Refresh the page to see the new
text (If your browser cached the page and you dont see the text update browse to
your apps URL again and the change should be displayed)
Tweet this
Developing in the cloud using Bluemix DevOpsServices is now as fast and easy as developing
locally WhoKnew
Get creative
Create a new look for the Personality Insights app Open the CSS files located in the publiccss
directory and have fun making changes to the files Watch as your changes are deployed live
Additional resources
Everything AND the kitchen sync Bluemix Live Sync is here httpsdeveloperibmcomdevops-
services20150213everything-kitchen-sync-Bluemix-live-sync
Bluemix Live Sync documentation
httpswwwngbluemixnetdocscm_mmc=developerWorks-_-dWdevcenter-_-devops-
services-_-lpmanageappsbluemixlivehtmlbluemixlive
27
Part 2B Bluemix Debug Sometimes staring at the code to figure out whatrsquos going wrong just doesnrsquot work Sometimes you really need
to debug the code or access the environment where the app is running This is where Bluemix Debug comes in
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for your Nodejs
apps
In this part yoursquoll continue on with the Personality Insights Nodejs app you created in part 2A
Learn this
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for
your Nodejs apps
Try this Note The Node Inspector Debugger currently only works in Chrome You may want to take this
opportunity to change browsers if you are not already using Chrome
1 Open the IBM Bluemix Debugger
a Navigate to httpibmbizcds-ids and sign in if you are not already authenticated
b In My Projects locate the tile for your Personality Insights app Click the Edit Code icon
( ) to open the Web IDE for your project
c In the Web IDErsquos top bar click the Debug button ( )
d When prompted for credentials input your IBM id and password
2 Use the shell
The Bluemix Shell allows you to explore and interact with the Bluemix environment where your
app is running by using a built-in bash shell
a On the IBM Bluemix Debugger page for your project click Open Shell A shell client
opens in your browser
b View the processes running in your Bluemix environment by inputting the following
command top
c Click NEW WINDOW
d Drag and drop the new window so that you can continue to observe your processes
while you explore the log files
e In the new window change directory to the log files by inputting the following
command cd logs
28
f View a list of the files in the logs directory by inputting the following command ls
g Notice that staging_tasklog is a file in your logs directory View the last 10 lines of the
log file by inputting the following command tail staging_tasklog
3 Use the Debugger
The Debugger allows you to debug Nodejs apps
a On the IBM Bluemix Debugger page for your project click Open Debugger The
Debugger takes about 30 seconds to load
b If the Navigator is not displayed on the left click the Expand Navigator button
c Select appjs in the Navigator to open the file
d Add a breakpoint on line 48 by clicking 48
e In a different tab or window navigate to your running app
f Click Analyze
g Switch back to the tab or window with your Debugger Notice that the breakpoint has
been hit On the right you can view the Call Stack and Variables You can also use
buttons on the right to step over the next function call step into the next function call
and step out of the next function call
h When you have finished exploring your running app click the Resume script execution
button ( ) on the right
Note that from the IBM Bluemix Debugger page you can choose to suspend the app which will
restart the app and break at the first line of the app
29
Tweet this
Bluemix + DevOpsServices + Shell = a happy developer NoDownloadsRequired [include a
screenshot of the shell in your browser]
Just debugged my Bluemix app by using the debugger in DevOpsServices
NoDownloadsRequired [take a selfie of you in front of your debugger looking very excited]
Get creative
Use some of your favorite commands to explore the Bluemix environment where your app runs
Additional resources
Bluemix Live Sync
httpswwwngBluemixnetdocsmanageappsBluemixlivehtmlBluemixlivedebugger
Learning the Shell httplinuxcommandorglc3_learning_the_shellphp
6
Part 1B Deploying an App that Uses a Bluemix Service In this part youll be working with the Laurens Lovely Landscapes app you created in part 1A Youll also be
working with The Fabulous Price Finder app The Fabulous Price Finder provides you with the current prices of
items youre interested in purchasing online with the simple click of a button
Learn this
Leveraging Bluemix services like database services Watson services and DevOps Services makes
creating and managing apps easier
Deploying apps that leverage Bluemix services can be fast and easy
Try this
1 Fork the Fabulous Price Finder
a Go to the Fabulous Price Finder project overview page httpsibmbizcds-fbf
b Click EDIT CODE in the upper-right corner You might be prompted to authenticate if
you have not already done so
c Select Tools gt Fork
d Type a name for your project leave the Add features for Scrum development and Make
this a Bluemix Project boxes checked and click CREATE
e Note that when the project has finished forking your new project name is listed in the
upper-left corner
7
2 Deploy the Fabulous Price Finder
The Fabulous Price Finder uses the Cloudant NoSQL DB service hosted at Bluemix The Cloudant
database service provides access to a fully managed NoSQL JSON data layer thatrsquos always on To
get the Fabulous Price Finder running you deploy the application and then bind a new Cloudant
NoSQL DB instance to the application
a In the left navigation pane select manifestyml
b Click the Deploy ( ) button in the top gray bar Note that when the app finishes
deploying the database functionality will not yet work because you have not bound a
Cloudant NoSQL DB instance to it
c When the application is deployed click the Open application dashboard button ( ) in
the top gray bar
d If you are not already authenticated at Bluemix you might be prompted to do so After
you are authenticated you are redirected to your applications page on Bluemix
e Click ADD A SERVICE OR API
f Scroll down until you see the Cloudant NoSQL DB service Hint Check the Data and
Analytics section The catalog is constantly being updated with new services
g Click the Cloudant NoSQL DB service
h In the Cloudant NoSQL DB dialog leave the defaults in the dialog (the code assumes the
name of your Cloudant NoSQL DB service starts with cloudant) and click CREATE
i When prompted if you want to restage your application now click RESTAGE
j When the page indicates your app is running click your applications route to open it
3 Try the Fabulous Price Finder
Now that you have the Fabulous Price Finder running its time to explore
The home page of the Fabulous Price Finder enables you to record the items for which you want
to check prices You begin with the Antarctica print from the Laurens Lovely Landscapes app
you deployed
a In the form on the home page specify the name for the print (Antarctica) the URL for
the print from your online store (Hint Look for something similar to
httplaurenslovelylandscapes-some-long-string-of-random-
charactersmybluemixnetantarctica) and the id of the price field for the print
(price)
b Click Submit
You are redirected to the View Database page where you can see information about the item
you just stored You can record the details for other items if you like
8
4 Get Prices
After you have stored information about an item you can check its price
a On the home page click Get Prices
b On the Success page click View the database
Notice that the price of your item is now stored in the database If you like go back to your
Laurens Lovely Lanscapes project update the price of the Antarctica print (dont forget to
deploy your change) and click Get Prices again Note that the database reflects the new price of
the print
5 Explore the Cloudant Database
You can browse and update the contents of your Cloudant database which can be helpful when
debugging and working with your app
a Go to the Bluemix dashboard
b Log in if you are not already authenticated
c On the dashboard click on your FabulousPriceFinder app to open it
d Click your Cloudant NoSQL DB service tile to open it
e Click LAUNCH
f In the Databases section click on your database to open it
g Browse the documents youve added to your database
Tweet this
Check out the app I just deployed that leverages a Cloudant database on Bluemix [insert link
to your app]
Get creative
Enhance the apprsquos navigation so it is easier to move around the site or change the name of the
app to be less ldquofabulousrdquo and more you Make it your own
Additional resources
Cloudant-Python httpsgithubcomcloudant-labscloudant-python
Develop and manage Java apps with IBM Bluemix and DevOps Services
httpwwwibmcomdeveloperworkslibraryd-Bluemix-javadevopsindexhtml
9
Part 1C Planning Tracking amp Leveraging New Bluemix Services
Learn this
Leveraging software as a service that works well with the platform as a service of your choice
can greatly speed up your software delivery lifecycle
Agile planning and tracking is simple in the cloud and creates built-in traceability for all of your
teammateshellipwhether they are collocated or distributed
Writing code that leverages a Bluemix service can be fast and significantly reduce development
time
Try this
1 Plan a new feature to add to the Fabulous Price Finder
So far you have made use of existing code but you havent created anything new Time to
change that
When working with teammates or even by yourself organizing your ideas into user stories and
then organizing your user stories into a plan can be incredibly valuable
a Open Track amp Plan
i Open the Fabulous Price Finder project you created in the previous section by
navigating to DevOps Services signing in if youre not already authenticated
and clicking on your project on the My Projects page
ii Click the gear button ( ) in the upper-right corner to open the Project
Settings page
iii Click OPTIONS
iv On the page that loads select the Enable Track amp Plan checkbox (if it is not
already enabled) and click SAVE
v Click TRACK amp PLAN in the upper-right corner The Track amp Plan section is your
place to organize your ideas
b Create work items in your backlog
i On the left pane click Backlog
ii On the right pane type the following in the Create a work itemhellip field As a shopper I want a text message sent to me with the
price of each item so that I dont have to check the
website to view the prices
10
iii The tool will automatically detect the work item type is story and set the type
for you
iv In the icon bar below click the Owned By icon and select your username
v Click CREATE
vi Repeat Steps 2-5 to create work items for the following stories
1 As a shopper I want to organize my items by
store so that I only have to input the field ID
once per store instead of every item
2 As a shopper I want to see a graph of the price
of the items Im watching over time so I can
judge if its a good time to buy the items
3 As a shopper I want the prices to be retrieved
automatically for me on a daily basis so I dont
have to log in manually and click Get Prices
4 As a shopper I want the prices to be texted to
me only when the price has changed so Im not
getting inundated with text messages
vii Create a work item of type defect with the following summary The View
Database page fails to load when the database is empty
c Plan your work
Now that you have filled your backlog with stories its time to plan your first sprint
i On the left pane click Sprint Planning A sprint represents a period of time
Organize your user stories in sprints
ii Click Add Sprints
iii Configure the sprints so you have at least two and click Create
iv In the Backlog section rearrange your stories so they are in a ranked order by
dragging and dropping them Put As a shopper I want a text message sent to me with the price of each item so that
I dont have to check the website to view the prices as
the top item in the list and As a shopper I want the prices to be retrieved automatically for me on a daily basis so
I dont have to log in manually and click Get Prices as
the second highest item in the list
v Click the Sprint 1 dropbdown box and select Sprint 1 so that Sprint 1 appears to
the right of the backlog (You may need to click Sprint 2 and then click Sprint 1
in order for the sprint to appear)
11
vi Assume you have time to complete one user story per sprint Drag the topmost
item in the list to Sprint 1 (on the right)
vii In the sprint dropdown box select Sprint 2
viii Drag the new top most item to Sprint 2
d Track your work
Sprint 1 has begun Indicate that you have started working on the first work item by
marking it as In Progress
i In the sprint dropdown box select Sprint 1
ii In the Sprint 1 section click the Status New icon ( ) for the story planned
for Sprint 1
iii In the Status dialog click Start Working
iv Note the work item ID for your work item because you will need it later in this
lab
2 Implement the feature
Next implement the work item As a shopper I want a text message sent to me with the price of each item so that I dont have to check the
website to view the prices The idea of implementing a text messaging feature
might sound a bit daunting to you Fortunately Bluemix provides a Twilio service you can use
that handles sending the text message so you can implement this feature with only nine lines of
code
a Register with Twilio
If you do not already have an account with Twilio you need to register You also need
your Twilio AccountSID Auth Token and phone number
1 Go to httpswwwtwiliocom and sign up
2 Follow the on-screen instructions to verify your account
3 Note your Twilio phone number
4 After you have authenticated and are viewing your account click your ID in the
right corner and select Account
5 In the API Credentials section note your AccountSID and AuthToken (You
might want to leave this page open as you continue so you can easily copy the
credentials)
b If you do not want to receive text messages
If you do not want to receive text messages to your phone because your carrier charges
ridiculous amounts you can instead send the text messages to your Twilio account
12
phone number If yoursquore ok with receiving text messages on your phone skip this
section and continue on to step c
i In Twilio click NUMBERS in the top navigation bar
ii Click your phone number in the Number table
iii In the Messaging section replace the Request URL with any valid url (this
prevents a never ending loop of your phone number sending a response to the
text message it just received) For example you might replace the Request URL
with a link to your Laurenrsquos Lovely Landscapes app
iv Click Save
v Click Numbers in the top navigation bar
vi Click Verify a number
vii Click text you instead
viii Input your Twilio phone number in the Phone Number box
ix Click Text Me
x In a new tab or window navigate to twiliocom and click Account
xi Click NUMBERS in the top navigation bar
xii Click your number in the Number table
xiii Click Inbound in the Messaging section
xiv Hover over the text message in the table to see the incoming message Note
the verification number in the text messagersquos body
xv Return to your original tab or window and input the verification number
xvi Click Submit
When you want to view incoming text messages for your Twilio number return to the
details page for your number and click Inbound
c Add the Twilio service to the app
Begin by adding the Bluemix Twilio service to your app
i In DevOps Services click EDIT CODE in the upper-right corner
ii Click the Open application dashboard button ( ) The Bluemix page for your
app opens
iii Click ADD A SERVICE OR API
13
iv Scroll down until you see the Twilio service Hint Check the Mobile section The
catalog is constantly being updated with new services
v Click the Twilio service
vi In the Account SID and Auth Token fields paste your Twilio AccountSID and
AuthToken from your Twilio Account Settings page
vii Click CREATE
viii When prompted restage your application now by clicking RESTAGE
ix Wait for the page to indicate that your app is running
d Add code that uses the Twilio service
Add code to your app that sends a text message whenever a price is retrieved for an
item Use the Twilio service to actually send the text message
i Add Twilio to requirementstxt
Your app needs the Twilio module so you must add it to the requirementstxt
file
1 In the Web IDE open requirementstxt
2 Add a new line to the end of the file and type twilio
3 Select File gt Save
ii Connect to the Twilio service
To effectively use your Twilio service you must connect to it
1 In the Web IDE open the wsgipy file
2 In the Imports section around Line 55 add the following line from twiliorest import TwilioRestClient
3 As part of the for loop that begins around Line 65 add the following
lines
Note Be sure your spacing before these two lines (spaces and tabs) is
identical to the if statement that checks if the key starts with
ldquocloudantrdquo
if decoded_config[key][0][name]startswith(Twilio)
twilio_creds = decoded_config[key][0][credentials]
twilio_authToken = twilio_creds[authToken]
twilio_accountSID = twilio_creds[accountSID]
twilioClient = TwilioRestClient(twilio_accountSID twilio_authToken)
4 Your Twilio credentials are now stored in twilio_creds Your code
should now look like the following listing
14
for key value in decoded_configiteritems()
if decoded_config[key][0][name]startswith(Twilio)
twilio_creds = decoded_config[key][0][credentials]
twilio_authToken = twilio_creds[authToken]
twilio_accountSID = twilio_creds[accountSID]
twilioClient = TwilioRestClient(twilio_accountSID twilio_authToken)
if keystartswith(cloudant)
cloudant_creds = decoded_config[key][0][credentials]
cloudant_host = cloudant_creds[host]
cloudant_port = int(cloudant_creds[port])
cloudant_username = cloudant_creds[username]
cloudant_password = cloudant_creds[password]
cloudant_url = str(cloudant_creds[url])
account = cloudantAccount(cloudant_username)
login = accountlogin(cloudant_username cloudant_password)
assert loginstatus_code == 200
db = accountdatabase(dbname)
response = dbput()
print responsejson
5 Save your changes by selecting File gt Save
e Add code to send the text message
Now comes the fun part Its time to code
Continue to work in the wsgipy file and create a new function around Line 89 that
sends a text message def sendTextWithMessage(message)
message = twilioClientmessagescreate(to=+15555555555 from_=+15555555555
body=message)
f Replace the to number with the cell phone number or Twilio number where you want
the text messages to be sent (dont forget the country code)
g Replace the from number with your Twilio phone number (dont forget the country
code)
h In the getCurrentPrice function inside of the if statement that checks if the
price is not None add the following line of code sendTextWithMessage(The current price of s is s (item[name] price))
i Save your changes by selecting File gt Save
Thats it Youve implemented your feature with only nine lines of code
3 Deploy and test the feature
Now its time to deploy your application to Bluemix so you can test it
a Click the Deploy button ( )
b If prompted if you want to stop and redeploy click OK
c After your application has finished deploying click the Open URL button ( ) in the top
gray bar
d In your app click Get Prices
15
e Check your phone or Twilio number for a text message
If you like update the prices of the items in the store and get the prices again
4 Push the feature to the repository
Now that your feature is tested its time to push your changes to the Git repository
a In the leftmost bar of icons click the Git Repository button ( )
b In the box in the Working Directory Changes section type a comment similar to the
following being sure to replace 20 with the work item ID associated with the work item
you created Changes to implement the text messaging feature as
described in work item 20
c Select each change in the Changed Files section and click the COMMIT button
d In the OUTGOING section click PUSH
e If you are prompted for your committer information enter it and click OK
5 Complete the feature
To indicate that you have finished your feature mark your work item as complete
a In the Web IDE click TRACK amp PLAN in the upper-right corner
b In the right pane find your work item associated with the text messaging feature and
click the Status In Progress icon
c Click Set Done
d In the right pane scroll right until you see the RESOLVED section Notice that your work
item is now marked done
6 Discover the traceability
When you added a comment in your commit that mentioned your work item a link was
automatically created for you between the change and the work item
a In the right pane scroll to the Resolved view if you are not currently viewing your
resolved work items
b Click the textual summary of the work item associated with the text messaging feature
to open it
c In the work item click the Links tab
d In the LINKS section notice that a link was automatically generated for you Click the
link The Git Log displays
e Observe that you have a summary of the git commit and its associated work items
f Click GIT LOG in the left navigation to see a list of all of your git commits
16
Tweet this
Collaborate with me on this Bluemix app I created [insert link to your app] [include a
screenshot of the Web IDE with your codemdashTweets with images are more likely to get noticed]
Get creative
Invite a friend to join your project Navigate to your projects home page click Members and
invite a friend to join
Create new work items for features yoursquod like to implement or defects you find
Implement some of the stories you created or fix the defects you recorded
Additional resources
Twilio SMS and MMS Python Quickstart httpswwwtwiliocomdocsquickstartpythonsms
Managing Distributed Teams
httpswwwscrumallianceorgcommunityarticles2013julymanaging-distributed-
teamsaspx
So Long Scrum Hello Kanban httpsstormpathcomblogso-long-scrum-hello-kanban
17
Part 1D Deploying Automatically Using the Delivery Pipeline
Learn this
Deployment automation is one of the keys to a successful DevOps approach
You can create a complete delivery pipeline with multiple stages automated tests and
automatic deploys using DevOps Services
Try this
You can configure a multi-stage build and deployment pipeline to support your DevOps approach to
software development In this section you will configure a builder a deployment to your
development (dev) space and a deployment to your production (prod) space
1 Create a production space
Organizations and spaces are organizational units in the Cloud Foundry infrastructure that can
be used to store and track application resources An organization contains domains spaces and
users a space contains applications and services By default a dev (development) space is
created for you
a Navigate to the Bluemix dashboard if you are not there already
b Click Create a Space in the left menu
c In the Create a Space dialog input prod as your space name and click CREATE
2 Create services for deployments to your dev space
When deploying to your dev and prod spaces you will likely want to have services dedicated to
those deployments For example you want to use separate databases for each space Wersquoll
begin by creating services for each space
a Navigate to the Bluemix dashboard if you are not there already
b Click CATALOG
c Create the Cloudant NoSQL DB service
i Scroll down until you see the Cloudant NoSQL DB service Hint Check the Data
and Analytics section The catalog is constantly being updated with new
services
ii Click the Cloudant NoSQL DB service
iii In the Space dropdown choose dev
iv In the App dropdown choose Leave unbound
18
v In the Service name box leave the default or change the name to something
you like Be sure the name you choose begins with ldquocloudantrdquo as that is how
the code identifies the service
vi Note the name of your service as you will need it later
vii Click CREATE
d Create the Twilio service
i Navigate to the Catalog if you are not there already
ii Scroll down until you see the Twilio service Hint Check the Mobile section The
catalog is constantly being updated with new services
iii Click the Twilio service
iv In the Space dropdown choose dev
v In the App dropdown choose Leave unbound
vi In the Service name box leave the default or change the name to something
you like Be sure the name you choose begins with ldquotwiliordquo as that is how the
code identifies the service Note the name you choose as you will need it later
vii In the Account SID and Auth Token fields paste your Twilio AccountSID and
AuthToken from your Twilio Account Settings page
viii Click CREATE
3 Create services for deployments to your prod space
Repeat the steps from 2 above to create Cloudant NoSQL DB and Twilio services for
deployments to your prod space Be sure to select ldquoprodrdquo as the Space instead of ldquodevrdquo
4 Enable Advanced Build amp Deploy
You can configure a multi-stage build and deployment pipeline to support your DevOps
approach to software development Note that the pipeline only includes changes that have
been pushed to your projectrsquos repository changes that are in your workspace in the Web IDE
that have not been pushed to your projectrsquos repository will NOT be deployed as part of the
pipeline
a Open the Fabulous Price Finder project you created in the previous section by
navigating to DevOps Services signing in if youre not already authenticated and
clicking on your project on the My Projects page
b Click BUILD amp DEPLOY in the upper-right corner
5 Add a builder stage
The first stage we will create is a builder stage
19
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Build Stage
c Notice that the Input Type is set to SCM Repository by default This means the input for
the stage will be your git repository
d Notice that Run jobs whenever a change is pushed to Git is selected by default This
means that whenever you or someone on your team pushes code to your projectrsquos
repository the build stage will automatically be triggered
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Build
g Since this app does not require compilation (unlike a Java app) we will use the Simple
builder type Note that you can choose from a variety of builders
h Notice that the Stop running this stage if this job fails is checked by default This means
that any jobs further down the pipeline will not execute and the whole stage will be
marked as failed if a failure occurs
i Click SAVE
6 Add a ldquodeploy to development spacerdquo stage
Now we will add a deployment to the space that represents your development space Some
might call this a quality assurance or test space It is a place where developers can test their
code live in a production quality environment without actually putting it in production
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Dev Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the previous stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default This
will configure your pipeline so that whenever someone pushes code to your projectrsquos
repository the build step will run and if it succeeds a deploy to the development
environment will be kicked off
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Application Name to be a name that is unique to your Bluemix dev space
h By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
20
developers on your team will be able to test their code In the Script section after cf push ldquo$CF_APPrdquo
add -n whateverYouWantYourUrlToBe Note the url needs to be unique across
all Bluemix apps so be creative
i Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
j Next add a command to restage your app with the newly bound services cf restage $CF_APP
k The script section should now look similar to the following cf push $CF_APP -n fbf-lauren-dev
cf bind-service $CF_APP Cloudant-dev
cf bind-service $CF_APP Twilio-dev
cf restage $CF_APP
l Note that if we had automated tests associated with this project we could add a test
job to this stage so that the deploy would run and then tests could be executed against
that deployment
m Click SAVE
7 Add a deploy to production space stage
Now we will add a deployment to the space that represents your production space This space
is where you keep apps that your end users will use
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Prod Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the Build Stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default Since
we donrsquot have any automated tests included in this pipeline automatically deploying to
production is probably not safe Select Run jobs only when this stage is run manually
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Space to be prod
h Update the Application Name to be a name that is unique to your Bluemix prod space
i By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
21
your end users will be able to access your app In the Script section after cf push ldquo$CF_APPrdquo
add -n whateveryouwantyoururltobe Note the url needs to be unique across
all Bluemix apps so be creative
j Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
k Next add a command to restage your app with the newly bound services cf restage $CF_APP
l The script section should now look similar to the following cf push $CF_APP -n fbf-lauren
cf bind-service $CF_APP Cloudant-prod
cf bind-service $CF_APP Twilio-prod
cf restage $CF_APP
m Click SAVE
8 Kick off the pipeline
Now that we have the build pipeline configured itrsquos time to try it out To trigger the pipeline
we could make a change to our projectrsquos code and push the change to our Git repository or we
could manually request a build
a On the Pipeline page click the Play button ( ) in the Build Stage to kick off the first
stage of the pipeline manually
The build pipeline will go through the build and deploy to dev steps If you like what was
deployed to dev you can drag and drop the build from the Build Stage tile to the Prod
Deployment tile to deploy it there
Tweet this
Dove into DevOps by creating a release pipeline for my app [attach a screenshot of the Build amp
Deploy page for your app] Bluemix DevOpsServices
22
Get creative
Make a change to your code and watch the build pipeline automatically deploy it for you
Zero downtime deployments are very important to web applications Design and implement a
strategy to deploy your app to your production space without any downtime Hint check out
this article httpwwwibmcomdeveloperworkscloudlibrarycl-Bluemix-rollingpipeline
Additional resources
DevOps for Dummies ebook httpibmcodevopsfordummies
Top 10 Practices for Effective DevOps httpwwwdrdobbscomarchitecture-and-designtop-
10-practices-for-effective-devops240149363
Cloud Computing Trends 2014 State of the Cloud Survey
httpwwwrightscalecomblogcloud-industry-insightscloud-computing-trends-2014-state-
cloud-survey
DevOps Embracing Cloud Services httpwwwmidsizeinsidercomen-usarticledevops-
embracing-cloud-servicesVJmrScABg
23
Part 2A Live Edit In this part yoursquoll get to use an exciting new feature Live Edit The Live Edit feature allows you to make
changes to your application and have them deployed nearly instantaneously to your deployed app Itrsquos just like
editing files locallyhellipexcept you donrsquot have to set up a development environment
Since the Live Edit feature is currently optimized for Nodejs we will create a new app using the Personality
Insights Nodejs Web Starter boilerplate (what a concise name) The exciting thing about this boilerplate is that
it uses IBM Watson (remember Watson the supercomputer that beat Jeopardy champions a few years ago)
services
In this part you will create a new Bluemix app and leverage the Live Edit feature to see the changes you make
be deployed almost instantly to your running app
Learn this
Live Edit allows you to see changes you make in the DevOps Services Web IDE reflected in real-
time to your app deployed on Bluemix Itrsquos just like editing files locallyhellipexcept you donrsquot have
to set up a development environment
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app Changes you make in Node modules (like JavaScript files)
will require a fast restart of the app in order to be reflected in your deployed app
Try this
1 Sign up for DevOps Services if you have not done so already
a Navigate to httpibmbizcds-bluemix and sign up
b As part of the Bluemix registration process you will receive an e-mail asking you to
confirm your account If you do not confirm you are not registered If you do not
receive a confirmation e-mail send a note to idbluemixnet
c Navigate to httpibmbizcds-ids and register for DevOps Services using the same IBM
id you used for Bluemix
2 Create a Nodejs app using a Bluemix boilerplate
The first thing we need is a Nodejs app One of the fastest ways to get a new app is to use a
Bluemix boilerplate
a Navigate to httpibmbizcds-bluemix
b Log in if you are not already authenticated
c Click CATALOG The Catalog is your place to browse the available boilerplates (sample
applications) runtimes and services
d In the Boilerplates section click Personality Insights Nodejs Web Starter
24
e Input a name for the app (what the app will be referred to in Bluemix) and a host for the
app (the part of the url that will go before mybluemixnet) Note that the host must be
globally unique across all of Bluemix so be creative
f Click CREATE A copy of the boilerplate code will be put in to a new app for you and
then deployed to Bluemix
g Click Overview In the APP HEALTH section wait for the message ldquoYour app is
runningrdquo to be displayed
h When your app is running click on your route (toward the top of the page) to open your
running app
3 Explore the Nodejs app
Now that your app is running letrsquos take a moment to explore it The Personality Insights app
uses the Watson Personality Insights service to analyze text and determine personality traits of
the textrsquos author
a The app includes sample text from Moby Dick Click ANALYZE to learn about the
personality of Moby Dickrsquos author Herman Melville Textual output as well as a
graphical visualization are displayed
b Navigate to one of your favorite websites with English text (keep it office-friendlyhellipso
perhaps choose your favorite news site) and copy a block of text
c Return to your Personality Insights App and paste the text in the Try the Service box
d Click ANALYZE View the textual output as well as the graphical visualization
4 Prepare for Live Edit
Wersquove tested the app and now wersquoll prep to make some changes to it
a Return to the Bluemix page for your Personality Insights app If your app is not in a
separate window or tab right-click on your apprsquos route and choose an option to open
the link in a new window or tab
b Click ADD GIT in the upper-right corner
c Click CONTINUE in the Create Git Repository dialog Bluemix will take a copy of your
apprsquos code and put it in a Git repository hosted at DevOps Services
d Click CLOSE once the Git Repository has been successfully created
e Click EDIT CODE in the upper-right corner to open the DevOps Services Web IDE
f Toggle the Live Edit option to on
g If prompted to redeploy click OK The app will redeploy so changes can be made live to
your deployed app When the app finishes deploying a green dot will be displayed in
the run bar
25
When the app finishes deploying you are ready to make live edits
5 Change a static file
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app
a In the navigator view on the left expand views
b Select layoutjade
c Update the h2 to say something like ldquoThis open lab is so great that Irsquom going to Tweet
about itrdquo
d Switch to your tab or window that has your running app
e Refresh the page
f Note that the heading of your app was changed instantly You didnrsquot have to wait for
the app to redeploy
g Make a few more changes to static files and watch your app update in real time
6 Change a node module
Changes to node modules require a fast app restart (not a full redeploy) in order to be deployed
because the server caches node modules in memory
a Select the root directory of your app in the navigator in the left pane
b Click File gt New gt File
c The name of the file is highlighted so you can rename it Type defaulttexttxt and press
Enter or Return on your keyboard
d In the editor on the right type or paste the text that you want to use as the default text
in the app
e Select the appjs file in the navigator in the left pane
f In the editor on the right look for the dummy_text variable around line 25 Replace
mobydicktxt with defaulttexttxt
g In the web IDEs top bar click the Restart button ( )
h When the app finishes restarting (which only takes a few seconds) a green dot is
displayed in the run bar
26
i Switch to the tab or window that has your running app Refresh the page to see the new
text (If your browser cached the page and you dont see the text update browse to
your apps URL again and the change should be displayed)
Tweet this
Developing in the cloud using Bluemix DevOpsServices is now as fast and easy as developing
locally WhoKnew
Get creative
Create a new look for the Personality Insights app Open the CSS files located in the publiccss
directory and have fun making changes to the files Watch as your changes are deployed live
Additional resources
Everything AND the kitchen sync Bluemix Live Sync is here httpsdeveloperibmcomdevops-
services20150213everything-kitchen-sync-Bluemix-live-sync
Bluemix Live Sync documentation
httpswwwngbluemixnetdocscm_mmc=developerWorks-_-dWdevcenter-_-devops-
services-_-lpmanageappsbluemixlivehtmlbluemixlive
27
Part 2B Bluemix Debug Sometimes staring at the code to figure out whatrsquos going wrong just doesnrsquot work Sometimes you really need
to debug the code or access the environment where the app is running This is where Bluemix Debug comes in
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for your Nodejs
apps
In this part yoursquoll continue on with the Personality Insights Nodejs app you created in part 2A
Learn this
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for
your Nodejs apps
Try this Note The Node Inspector Debugger currently only works in Chrome You may want to take this
opportunity to change browsers if you are not already using Chrome
1 Open the IBM Bluemix Debugger
a Navigate to httpibmbizcds-ids and sign in if you are not already authenticated
b In My Projects locate the tile for your Personality Insights app Click the Edit Code icon
( ) to open the Web IDE for your project
c In the Web IDErsquos top bar click the Debug button ( )
d When prompted for credentials input your IBM id and password
2 Use the shell
The Bluemix Shell allows you to explore and interact with the Bluemix environment where your
app is running by using a built-in bash shell
a On the IBM Bluemix Debugger page for your project click Open Shell A shell client
opens in your browser
b View the processes running in your Bluemix environment by inputting the following
command top
c Click NEW WINDOW
d Drag and drop the new window so that you can continue to observe your processes
while you explore the log files
e In the new window change directory to the log files by inputting the following
command cd logs
28
f View a list of the files in the logs directory by inputting the following command ls
g Notice that staging_tasklog is a file in your logs directory View the last 10 lines of the
log file by inputting the following command tail staging_tasklog
3 Use the Debugger
The Debugger allows you to debug Nodejs apps
a On the IBM Bluemix Debugger page for your project click Open Debugger The
Debugger takes about 30 seconds to load
b If the Navigator is not displayed on the left click the Expand Navigator button
c Select appjs in the Navigator to open the file
d Add a breakpoint on line 48 by clicking 48
e In a different tab or window navigate to your running app
f Click Analyze
g Switch back to the tab or window with your Debugger Notice that the breakpoint has
been hit On the right you can view the Call Stack and Variables You can also use
buttons on the right to step over the next function call step into the next function call
and step out of the next function call
h When you have finished exploring your running app click the Resume script execution
button ( ) on the right
Note that from the IBM Bluemix Debugger page you can choose to suspend the app which will
restart the app and break at the first line of the app
29
Tweet this
Bluemix + DevOpsServices + Shell = a happy developer NoDownloadsRequired [include a
screenshot of the shell in your browser]
Just debugged my Bluemix app by using the debugger in DevOpsServices
NoDownloadsRequired [take a selfie of you in front of your debugger looking very excited]
Get creative
Use some of your favorite commands to explore the Bluemix environment where your app runs
Additional resources
Bluemix Live Sync
httpswwwngBluemixnetdocsmanageappsBluemixlivehtmlBluemixlivedebugger
Learning the Shell httplinuxcommandorglc3_learning_the_shellphp
7
2 Deploy the Fabulous Price Finder
The Fabulous Price Finder uses the Cloudant NoSQL DB service hosted at Bluemix The Cloudant
database service provides access to a fully managed NoSQL JSON data layer thatrsquos always on To
get the Fabulous Price Finder running you deploy the application and then bind a new Cloudant
NoSQL DB instance to the application
a In the left navigation pane select manifestyml
b Click the Deploy ( ) button in the top gray bar Note that when the app finishes
deploying the database functionality will not yet work because you have not bound a
Cloudant NoSQL DB instance to it
c When the application is deployed click the Open application dashboard button ( ) in
the top gray bar
d If you are not already authenticated at Bluemix you might be prompted to do so After
you are authenticated you are redirected to your applications page on Bluemix
e Click ADD A SERVICE OR API
f Scroll down until you see the Cloudant NoSQL DB service Hint Check the Data and
Analytics section The catalog is constantly being updated with new services
g Click the Cloudant NoSQL DB service
h In the Cloudant NoSQL DB dialog leave the defaults in the dialog (the code assumes the
name of your Cloudant NoSQL DB service starts with cloudant) and click CREATE
i When prompted if you want to restage your application now click RESTAGE
j When the page indicates your app is running click your applications route to open it
3 Try the Fabulous Price Finder
Now that you have the Fabulous Price Finder running its time to explore
The home page of the Fabulous Price Finder enables you to record the items for which you want
to check prices You begin with the Antarctica print from the Laurens Lovely Landscapes app
you deployed
a In the form on the home page specify the name for the print (Antarctica) the URL for
the print from your online store (Hint Look for something similar to
httplaurenslovelylandscapes-some-long-string-of-random-
charactersmybluemixnetantarctica) and the id of the price field for the print
(price)
b Click Submit
You are redirected to the View Database page where you can see information about the item
you just stored You can record the details for other items if you like
8
4 Get Prices
After you have stored information about an item you can check its price
a On the home page click Get Prices
b On the Success page click View the database
Notice that the price of your item is now stored in the database If you like go back to your
Laurens Lovely Lanscapes project update the price of the Antarctica print (dont forget to
deploy your change) and click Get Prices again Note that the database reflects the new price of
the print
5 Explore the Cloudant Database
You can browse and update the contents of your Cloudant database which can be helpful when
debugging and working with your app
a Go to the Bluemix dashboard
b Log in if you are not already authenticated
c On the dashboard click on your FabulousPriceFinder app to open it
d Click your Cloudant NoSQL DB service tile to open it
e Click LAUNCH
f In the Databases section click on your database to open it
g Browse the documents youve added to your database
Tweet this
Check out the app I just deployed that leverages a Cloudant database on Bluemix [insert link
to your app]
Get creative
Enhance the apprsquos navigation so it is easier to move around the site or change the name of the
app to be less ldquofabulousrdquo and more you Make it your own
Additional resources
Cloudant-Python httpsgithubcomcloudant-labscloudant-python
Develop and manage Java apps with IBM Bluemix and DevOps Services
httpwwwibmcomdeveloperworkslibraryd-Bluemix-javadevopsindexhtml
9
Part 1C Planning Tracking amp Leveraging New Bluemix Services
Learn this
Leveraging software as a service that works well with the platform as a service of your choice
can greatly speed up your software delivery lifecycle
Agile planning and tracking is simple in the cloud and creates built-in traceability for all of your
teammateshellipwhether they are collocated or distributed
Writing code that leverages a Bluemix service can be fast and significantly reduce development
time
Try this
1 Plan a new feature to add to the Fabulous Price Finder
So far you have made use of existing code but you havent created anything new Time to
change that
When working with teammates or even by yourself organizing your ideas into user stories and
then organizing your user stories into a plan can be incredibly valuable
a Open Track amp Plan
i Open the Fabulous Price Finder project you created in the previous section by
navigating to DevOps Services signing in if youre not already authenticated
and clicking on your project on the My Projects page
ii Click the gear button ( ) in the upper-right corner to open the Project
Settings page
iii Click OPTIONS
iv On the page that loads select the Enable Track amp Plan checkbox (if it is not
already enabled) and click SAVE
v Click TRACK amp PLAN in the upper-right corner The Track amp Plan section is your
place to organize your ideas
b Create work items in your backlog
i On the left pane click Backlog
ii On the right pane type the following in the Create a work itemhellip field As a shopper I want a text message sent to me with the
price of each item so that I dont have to check the
website to view the prices
10
iii The tool will automatically detect the work item type is story and set the type
for you
iv In the icon bar below click the Owned By icon and select your username
v Click CREATE
vi Repeat Steps 2-5 to create work items for the following stories
1 As a shopper I want to organize my items by
store so that I only have to input the field ID
once per store instead of every item
2 As a shopper I want to see a graph of the price
of the items Im watching over time so I can
judge if its a good time to buy the items
3 As a shopper I want the prices to be retrieved
automatically for me on a daily basis so I dont
have to log in manually and click Get Prices
4 As a shopper I want the prices to be texted to
me only when the price has changed so Im not
getting inundated with text messages
vii Create a work item of type defect with the following summary The View
Database page fails to load when the database is empty
c Plan your work
Now that you have filled your backlog with stories its time to plan your first sprint
i On the left pane click Sprint Planning A sprint represents a period of time
Organize your user stories in sprints
ii Click Add Sprints
iii Configure the sprints so you have at least two and click Create
iv In the Backlog section rearrange your stories so they are in a ranked order by
dragging and dropping them Put As a shopper I want a text message sent to me with the price of each item so that
I dont have to check the website to view the prices as
the top item in the list and As a shopper I want the prices to be retrieved automatically for me on a daily basis so
I dont have to log in manually and click Get Prices as
the second highest item in the list
v Click the Sprint 1 dropbdown box and select Sprint 1 so that Sprint 1 appears to
the right of the backlog (You may need to click Sprint 2 and then click Sprint 1
in order for the sprint to appear)
11
vi Assume you have time to complete one user story per sprint Drag the topmost
item in the list to Sprint 1 (on the right)
vii In the sprint dropdown box select Sprint 2
viii Drag the new top most item to Sprint 2
d Track your work
Sprint 1 has begun Indicate that you have started working on the first work item by
marking it as In Progress
i In the sprint dropdown box select Sprint 1
ii In the Sprint 1 section click the Status New icon ( ) for the story planned
for Sprint 1
iii In the Status dialog click Start Working
iv Note the work item ID for your work item because you will need it later in this
lab
2 Implement the feature
Next implement the work item As a shopper I want a text message sent to me with the price of each item so that I dont have to check the
website to view the prices The idea of implementing a text messaging feature
might sound a bit daunting to you Fortunately Bluemix provides a Twilio service you can use
that handles sending the text message so you can implement this feature with only nine lines of
code
a Register with Twilio
If you do not already have an account with Twilio you need to register You also need
your Twilio AccountSID Auth Token and phone number
1 Go to httpswwwtwiliocom and sign up
2 Follow the on-screen instructions to verify your account
3 Note your Twilio phone number
4 After you have authenticated and are viewing your account click your ID in the
right corner and select Account
5 In the API Credentials section note your AccountSID and AuthToken (You
might want to leave this page open as you continue so you can easily copy the
credentials)
b If you do not want to receive text messages
If you do not want to receive text messages to your phone because your carrier charges
ridiculous amounts you can instead send the text messages to your Twilio account
12
phone number If yoursquore ok with receiving text messages on your phone skip this
section and continue on to step c
i In Twilio click NUMBERS in the top navigation bar
ii Click your phone number in the Number table
iii In the Messaging section replace the Request URL with any valid url (this
prevents a never ending loop of your phone number sending a response to the
text message it just received) For example you might replace the Request URL
with a link to your Laurenrsquos Lovely Landscapes app
iv Click Save
v Click Numbers in the top navigation bar
vi Click Verify a number
vii Click text you instead
viii Input your Twilio phone number in the Phone Number box
ix Click Text Me
x In a new tab or window navigate to twiliocom and click Account
xi Click NUMBERS in the top navigation bar
xii Click your number in the Number table
xiii Click Inbound in the Messaging section
xiv Hover over the text message in the table to see the incoming message Note
the verification number in the text messagersquos body
xv Return to your original tab or window and input the verification number
xvi Click Submit
When you want to view incoming text messages for your Twilio number return to the
details page for your number and click Inbound
c Add the Twilio service to the app
Begin by adding the Bluemix Twilio service to your app
i In DevOps Services click EDIT CODE in the upper-right corner
ii Click the Open application dashboard button ( ) The Bluemix page for your
app opens
iii Click ADD A SERVICE OR API
13
iv Scroll down until you see the Twilio service Hint Check the Mobile section The
catalog is constantly being updated with new services
v Click the Twilio service
vi In the Account SID and Auth Token fields paste your Twilio AccountSID and
AuthToken from your Twilio Account Settings page
vii Click CREATE
viii When prompted restage your application now by clicking RESTAGE
ix Wait for the page to indicate that your app is running
d Add code that uses the Twilio service
Add code to your app that sends a text message whenever a price is retrieved for an
item Use the Twilio service to actually send the text message
i Add Twilio to requirementstxt
Your app needs the Twilio module so you must add it to the requirementstxt
file
1 In the Web IDE open requirementstxt
2 Add a new line to the end of the file and type twilio
3 Select File gt Save
ii Connect to the Twilio service
To effectively use your Twilio service you must connect to it
1 In the Web IDE open the wsgipy file
2 In the Imports section around Line 55 add the following line from twiliorest import TwilioRestClient
3 As part of the for loop that begins around Line 65 add the following
lines
Note Be sure your spacing before these two lines (spaces and tabs) is
identical to the if statement that checks if the key starts with
ldquocloudantrdquo
if decoded_config[key][0][name]startswith(Twilio)
twilio_creds = decoded_config[key][0][credentials]
twilio_authToken = twilio_creds[authToken]
twilio_accountSID = twilio_creds[accountSID]
twilioClient = TwilioRestClient(twilio_accountSID twilio_authToken)
4 Your Twilio credentials are now stored in twilio_creds Your code
should now look like the following listing
14
for key value in decoded_configiteritems()
if decoded_config[key][0][name]startswith(Twilio)
twilio_creds = decoded_config[key][0][credentials]
twilio_authToken = twilio_creds[authToken]
twilio_accountSID = twilio_creds[accountSID]
twilioClient = TwilioRestClient(twilio_accountSID twilio_authToken)
if keystartswith(cloudant)
cloudant_creds = decoded_config[key][0][credentials]
cloudant_host = cloudant_creds[host]
cloudant_port = int(cloudant_creds[port])
cloudant_username = cloudant_creds[username]
cloudant_password = cloudant_creds[password]
cloudant_url = str(cloudant_creds[url])
account = cloudantAccount(cloudant_username)
login = accountlogin(cloudant_username cloudant_password)
assert loginstatus_code == 200
db = accountdatabase(dbname)
response = dbput()
print responsejson
5 Save your changes by selecting File gt Save
e Add code to send the text message
Now comes the fun part Its time to code
Continue to work in the wsgipy file and create a new function around Line 89 that
sends a text message def sendTextWithMessage(message)
message = twilioClientmessagescreate(to=+15555555555 from_=+15555555555
body=message)
f Replace the to number with the cell phone number or Twilio number where you want
the text messages to be sent (dont forget the country code)
g Replace the from number with your Twilio phone number (dont forget the country
code)
h In the getCurrentPrice function inside of the if statement that checks if the
price is not None add the following line of code sendTextWithMessage(The current price of s is s (item[name] price))
i Save your changes by selecting File gt Save
Thats it Youve implemented your feature with only nine lines of code
3 Deploy and test the feature
Now its time to deploy your application to Bluemix so you can test it
a Click the Deploy button ( )
b If prompted if you want to stop and redeploy click OK
c After your application has finished deploying click the Open URL button ( ) in the top
gray bar
d In your app click Get Prices
15
e Check your phone or Twilio number for a text message
If you like update the prices of the items in the store and get the prices again
4 Push the feature to the repository
Now that your feature is tested its time to push your changes to the Git repository
a In the leftmost bar of icons click the Git Repository button ( )
b In the box in the Working Directory Changes section type a comment similar to the
following being sure to replace 20 with the work item ID associated with the work item
you created Changes to implement the text messaging feature as
described in work item 20
c Select each change in the Changed Files section and click the COMMIT button
d In the OUTGOING section click PUSH
e If you are prompted for your committer information enter it and click OK
5 Complete the feature
To indicate that you have finished your feature mark your work item as complete
a In the Web IDE click TRACK amp PLAN in the upper-right corner
b In the right pane find your work item associated with the text messaging feature and
click the Status In Progress icon
c Click Set Done
d In the right pane scroll right until you see the RESOLVED section Notice that your work
item is now marked done
6 Discover the traceability
When you added a comment in your commit that mentioned your work item a link was
automatically created for you between the change and the work item
a In the right pane scroll to the Resolved view if you are not currently viewing your
resolved work items
b Click the textual summary of the work item associated with the text messaging feature
to open it
c In the work item click the Links tab
d In the LINKS section notice that a link was automatically generated for you Click the
link The Git Log displays
e Observe that you have a summary of the git commit and its associated work items
f Click GIT LOG in the left navigation to see a list of all of your git commits
16
Tweet this
Collaborate with me on this Bluemix app I created [insert link to your app] [include a
screenshot of the Web IDE with your codemdashTweets with images are more likely to get noticed]
Get creative
Invite a friend to join your project Navigate to your projects home page click Members and
invite a friend to join
Create new work items for features yoursquod like to implement or defects you find
Implement some of the stories you created or fix the defects you recorded
Additional resources
Twilio SMS and MMS Python Quickstart httpswwwtwiliocomdocsquickstartpythonsms
Managing Distributed Teams
httpswwwscrumallianceorgcommunityarticles2013julymanaging-distributed-
teamsaspx
So Long Scrum Hello Kanban httpsstormpathcomblogso-long-scrum-hello-kanban
17
Part 1D Deploying Automatically Using the Delivery Pipeline
Learn this
Deployment automation is one of the keys to a successful DevOps approach
You can create a complete delivery pipeline with multiple stages automated tests and
automatic deploys using DevOps Services
Try this
You can configure a multi-stage build and deployment pipeline to support your DevOps approach to
software development In this section you will configure a builder a deployment to your
development (dev) space and a deployment to your production (prod) space
1 Create a production space
Organizations and spaces are organizational units in the Cloud Foundry infrastructure that can
be used to store and track application resources An organization contains domains spaces and
users a space contains applications and services By default a dev (development) space is
created for you
a Navigate to the Bluemix dashboard if you are not there already
b Click Create a Space in the left menu
c In the Create a Space dialog input prod as your space name and click CREATE
2 Create services for deployments to your dev space
When deploying to your dev and prod spaces you will likely want to have services dedicated to
those deployments For example you want to use separate databases for each space Wersquoll
begin by creating services for each space
a Navigate to the Bluemix dashboard if you are not there already
b Click CATALOG
c Create the Cloudant NoSQL DB service
i Scroll down until you see the Cloudant NoSQL DB service Hint Check the Data
and Analytics section The catalog is constantly being updated with new
services
ii Click the Cloudant NoSQL DB service
iii In the Space dropdown choose dev
iv In the App dropdown choose Leave unbound
18
v In the Service name box leave the default or change the name to something
you like Be sure the name you choose begins with ldquocloudantrdquo as that is how
the code identifies the service
vi Note the name of your service as you will need it later
vii Click CREATE
d Create the Twilio service
i Navigate to the Catalog if you are not there already
ii Scroll down until you see the Twilio service Hint Check the Mobile section The
catalog is constantly being updated with new services
iii Click the Twilio service
iv In the Space dropdown choose dev
v In the App dropdown choose Leave unbound
vi In the Service name box leave the default or change the name to something
you like Be sure the name you choose begins with ldquotwiliordquo as that is how the
code identifies the service Note the name you choose as you will need it later
vii In the Account SID and Auth Token fields paste your Twilio AccountSID and
AuthToken from your Twilio Account Settings page
viii Click CREATE
3 Create services for deployments to your prod space
Repeat the steps from 2 above to create Cloudant NoSQL DB and Twilio services for
deployments to your prod space Be sure to select ldquoprodrdquo as the Space instead of ldquodevrdquo
4 Enable Advanced Build amp Deploy
You can configure a multi-stage build and deployment pipeline to support your DevOps
approach to software development Note that the pipeline only includes changes that have
been pushed to your projectrsquos repository changes that are in your workspace in the Web IDE
that have not been pushed to your projectrsquos repository will NOT be deployed as part of the
pipeline
a Open the Fabulous Price Finder project you created in the previous section by
navigating to DevOps Services signing in if youre not already authenticated and
clicking on your project on the My Projects page
b Click BUILD amp DEPLOY in the upper-right corner
5 Add a builder stage
The first stage we will create is a builder stage
19
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Build Stage
c Notice that the Input Type is set to SCM Repository by default This means the input for
the stage will be your git repository
d Notice that Run jobs whenever a change is pushed to Git is selected by default This
means that whenever you or someone on your team pushes code to your projectrsquos
repository the build stage will automatically be triggered
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Build
g Since this app does not require compilation (unlike a Java app) we will use the Simple
builder type Note that you can choose from a variety of builders
h Notice that the Stop running this stage if this job fails is checked by default This means
that any jobs further down the pipeline will not execute and the whole stage will be
marked as failed if a failure occurs
i Click SAVE
6 Add a ldquodeploy to development spacerdquo stage
Now we will add a deployment to the space that represents your development space Some
might call this a quality assurance or test space It is a place where developers can test their
code live in a production quality environment without actually putting it in production
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Dev Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the previous stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default This
will configure your pipeline so that whenever someone pushes code to your projectrsquos
repository the build step will run and if it succeeds a deploy to the development
environment will be kicked off
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Application Name to be a name that is unique to your Bluemix dev space
h By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
20
developers on your team will be able to test their code In the Script section after cf push ldquo$CF_APPrdquo
add -n whateverYouWantYourUrlToBe Note the url needs to be unique across
all Bluemix apps so be creative
i Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
j Next add a command to restage your app with the newly bound services cf restage $CF_APP
k The script section should now look similar to the following cf push $CF_APP -n fbf-lauren-dev
cf bind-service $CF_APP Cloudant-dev
cf bind-service $CF_APP Twilio-dev
cf restage $CF_APP
l Note that if we had automated tests associated with this project we could add a test
job to this stage so that the deploy would run and then tests could be executed against
that deployment
m Click SAVE
7 Add a deploy to production space stage
Now we will add a deployment to the space that represents your production space This space
is where you keep apps that your end users will use
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Prod Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the Build Stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default Since
we donrsquot have any automated tests included in this pipeline automatically deploying to
production is probably not safe Select Run jobs only when this stage is run manually
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Space to be prod
h Update the Application Name to be a name that is unique to your Bluemix prod space
i By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
21
your end users will be able to access your app In the Script section after cf push ldquo$CF_APPrdquo
add -n whateveryouwantyoururltobe Note the url needs to be unique across
all Bluemix apps so be creative
j Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
k Next add a command to restage your app with the newly bound services cf restage $CF_APP
l The script section should now look similar to the following cf push $CF_APP -n fbf-lauren
cf bind-service $CF_APP Cloudant-prod
cf bind-service $CF_APP Twilio-prod
cf restage $CF_APP
m Click SAVE
8 Kick off the pipeline
Now that we have the build pipeline configured itrsquos time to try it out To trigger the pipeline
we could make a change to our projectrsquos code and push the change to our Git repository or we
could manually request a build
a On the Pipeline page click the Play button ( ) in the Build Stage to kick off the first
stage of the pipeline manually
The build pipeline will go through the build and deploy to dev steps If you like what was
deployed to dev you can drag and drop the build from the Build Stage tile to the Prod
Deployment tile to deploy it there
Tweet this
Dove into DevOps by creating a release pipeline for my app [attach a screenshot of the Build amp
Deploy page for your app] Bluemix DevOpsServices
22
Get creative
Make a change to your code and watch the build pipeline automatically deploy it for you
Zero downtime deployments are very important to web applications Design and implement a
strategy to deploy your app to your production space without any downtime Hint check out
this article httpwwwibmcomdeveloperworkscloudlibrarycl-Bluemix-rollingpipeline
Additional resources
DevOps for Dummies ebook httpibmcodevopsfordummies
Top 10 Practices for Effective DevOps httpwwwdrdobbscomarchitecture-and-designtop-
10-practices-for-effective-devops240149363
Cloud Computing Trends 2014 State of the Cloud Survey
httpwwwrightscalecomblogcloud-industry-insightscloud-computing-trends-2014-state-
cloud-survey
DevOps Embracing Cloud Services httpwwwmidsizeinsidercomen-usarticledevops-
embracing-cloud-servicesVJmrScABg
23
Part 2A Live Edit In this part yoursquoll get to use an exciting new feature Live Edit The Live Edit feature allows you to make
changes to your application and have them deployed nearly instantaneously to your deployed app Itrsquos just like
editing files locallyhellipexcept you donrsquot have to set up a development environment
Since the Live Edit feature is currently optimized for Nodejs we will create a new app using the Personality
Insights Nodejs Web Starter boilerplate (what a concise name) The exciting thing about this boilerplate is that
it uses IBM Watson (remember Watson the supercomputer that beat Jeopardy champions a few years ago)
services
In this part you will create a new Bluemix app and leverage the Live Edit feature to see the changes you make
be deployed almost instantly to your running app
Learn this
Live Edit allows you to see changes you make in the DevOps Services Web IDE reflected in real-
time to your app deployed on Bluemix Itrsquos just like editing files locallyhellipexcept you donrsquot have
to set up a development environment
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app Changes you make in Node modules (like JavaScript files)
will require a fast restart of the app in order to be reflected in your deployed app
Try this
1 Sign up for DevOps Services if you have not done so already
a Navigate to httpibmbizcds-bluemix and sign up
b As part of the Bluemix registration process you will receive an e-mail asking you to
confirm your account If you do not confirm you are not registered If you do not
receive a confirmation e-mail send a note to idbluemixnet
c Navigate to httpibmbizcds-ids and register for DevOps Services using the same IBM
id you used for Bluemix
2 Create a Nodejs app using a Bluemix boilerplate
The first thing we need is a Nodejs app One of the fastest ways to get a new app is to use a
Bluemix boilerplate
a Navigate to httpibmbizcds-bluemix
b Log in if you are not already authenticated
c Click CATALOG The Catalog is your place to browse the available boilerplates (sample
applications) runtimes and services
d In the Boilerplates section click Personality Insights Nodejs Web Starter
24
e Input a name for the app (what the app will be referred to in Bluemix) and a host for the
app (the part of the url that will go before mybluemixnet) Note that the host must be
globally unique across all of Bluemix so be creative
f Click CREATE A copy of the boilerplate code will be put in to a new app for you and
then deployed to Bluemix
g Click Overview In the APP HEALTH section wait for the message ldquoYour app is
runningrdquo to be displayed
h When your app is running click on your route (toward the top of the page) to open your
running app
3 Explore the Nodejs app
Now that your app is running letrsquos take a moment to explore it The Personality Insights app
uses the Watson Personality Insights service to analyze text and determine personality traits of
the textrsquos author
a The app includes sample text from Moby Dick Click ANALYZE to learn about the
personality of Moby Dickrsquos author Herman Melville Textual output as well as a
graphical visualization are displayed
b Navigate to one of your favorite websites with English text (keep it office-friendlyhellipso
perhaps choose your favorite news site) and copy a block of text
c Return to your Personality Insights App and paste the text in the Try the Service box
d Click ANALYZE View the textual output as well as the graphical visualization
4 Prepare for Live Edit
Wersquove tested the app and now wersquoll prep to make some changes to it
a Return to the Bluemix page for your Personality Insights app If your app is not in a
separate window or tab right-click on your apprsquos route and choose an option to open
the link in a new window or tab
b Click ADD GIT in the upper-right corner
c Click CONTINUE in the Create Git Repository dialog Bluemix will take a copy of your
apprsquos code and put it in a Git repository hosted at DevOps Services
d Click CLOSE once the Git Repository has been successfully created
e Click EDIT CODE in the upper-right corner to open the DevOps Services Web IDE
f Toggle the Live Edit option to on
g If prompted to redeploy click OK The app will redeploy so changes can be made live to
your deployed app When the app finishes deploying a green dot will be displayed in
the run bar
25
When the app finishes deploying you are ready to make live edits
5 Change a static file
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app
a In the navigator view on the left expand views
b Select layoutjade
c Update the h2 to say something like ldquoThis open lab is so great that Irsquom going to Tweet
about itrdquo
d Switch to your tab or window that has your running app
e Refresh the page
f Note that the heading of your app was changed instantly You didnrsquot have to wait for
the app to redeploy
g Make a few more changes to static files and watch your app update in real time
6 Change a node module
Changes to node modules require a fast app restart (not a full redeploy) in order to be deployed
because the server caches node modules in memory
a Select the root directory of your app in the navigator in the left pane
b Click File gt New gt File
c The name of the file is highlighted so you can rename it Type defaulttexttxt and press
Enter or Return on your keyboard
d In the editor on the right type or paste the text that you want to use as the default text
in the app
e Select the appjs file in the navigator in the left pane
f In the editor on the right look for the dummy_text variable around line 25 Replace
mobydicktxt with defaulttexttxt
g In the web IDEs top bar click the Restart button ( )
h When the app finishes restarting (which only takes a few seconds) a green dot is
displayed in the run bar
26
i Switch to the tab or window that has your running app Refresh the page to see the new
text (If your browser cached the page and you dont see the text update browse to
your apps URL again and the change should be displayed)
Tweet this
Developing in the cloud using Bluemix DevOpsServices is now as fast and easy as developing
locally WhoKnew
Get creative
Create a new look for the Personality Insights app Open the CSS files located in the publiccss
directory and have fun making changes to the files Watch as your changes are deployed live
Additional resources
Everything AND the kitchen sync Bluemix Live Sync is here httpsdeveloperibmcomdevops-
services20150213everything-kitchen-sync-Bluemix-live-sync
Bluemix Live Sync documentation
httpswwwngbluemixnetdocscm_mmc=developerWorks-_-dWdevcenter-_-devops-
services-_-lpmanageappsbluemixlivehtmlbluemixlive
27
Part 2B Bluemix Debug Sometimes staring at the code to figure out whatrsquos going wrong just doesnrsquot work Sometimes you really need
to debug the code or access the environment where the app is running This is where Bluemix Debug comes in
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for your Nodejs
apps
In this part yoursquoll continue on with the Personality Insights Nodejs app you created in part 2A
Learn this
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for
your Nodejs apps
Try this Note The Node Inspector Debugger currently only works in Chrome You may want to take this
opportunity to change browsers if you are not already using Chrome
1 Open the IBM Bluemix Debugger
a Navigate to httpibmbizcds-ids and sign in if you are not already authenticated
b In My Projects locate the tile for your Personality Insights app Click the Edit Code icon
( ) to open the Web IDE for your project
c In the Web IDErsquos top bar click the Debug button ( )
d When prompted for credentials input your IBM id and password
2 Use the shell
The Bluemix Shell allows you to explore and interact with the Bluemix environment where your
app is running by using a built-in bash shell
a On the IBM Bluemix Debugger page for your project click Open Shell A shell client
opens in your browser
b View the processes running in your Bluemix environment by inputting the following
command top
c Click NEW WINDOW
d Drag and drop the new window so that you can continue to observe your processes
while you explore the log files
e In the new window change directory to the log files by inputting the following
command cd logs
28
f View a list of the files in the logs directory by inputting the following command ls
g Notice that staging_tasklog is a file in your logs directory View the last 10 lines of the
log file by inputting the following command tail staging_tasklog
3 Use the Debugger
The Debugger allows you to debug Nodejs apps
a On the IBM Bluemix Debugger page for your project click Open Debugger The
Debugger takes about 30 seconds to load
b If the Navigator is not displayed on the left click the Expand Navigator button
c Select appjs in the Navigator to open the file
d Add a breakpoint on line 48 by clicking 48
e In a different tab or window navigate to your running app
f Click Analyze
g Switch back to the tab or window with your Debugger Notice that the breakpoint has
been hit On the right you can view the Call Stack and Variables You can also use
buttons on the right to step over the next function call step into the next function call
and step out of the next function call
h When you have finished exploring your running app click the Resume script execution
button ( ) on the right
Note that from the IBM Bluemix Debugger page you can choose to suspend the app which will
restart the app and break at the first line of the app
29
Tweet this
Bluemix + DevOpsServices + Shell = a happy developer NoDownloadsRequired [include a
screenshot of the shell in your browser]
Just debugged my Bluemix app by using the debugger in DevOpsServices
NoDownloadsRequired [take a selfie of you in front of your debugger looking very excited]
Get creative
Use some of your favorite commands to explore the Bluemix environment where your app runs
Additional resources
Bluemix Live Sync
httpswwwngBluemixnetdocsmanageappsBluemixlivehtmlBluemixlivedebugger
Learning the Shell httplinuxcommandorglc3_learning_the_shellphp
8
4 Get Prices
After you have stored information about an item you can check its price
a On the home page click Get Prices
b On the Success page click View the database
Notice that the price of your item is now stored in the database If you like go back to your
Laurens Lovely Lanscapes project update the price of the Antarctica print (dont forget to
deploy your change) and click Get Prices again Note that the database reflects the new price of
the print
5 Explore the Cloudant Database
You can browse and update the contents of your Cloudant database which can be helpful when
debugging and working with your app
a Go to the Bluemix dashboard
b Log in if you are not already authenticated
c On the dashboard click on your FabulousPriceFinder app to open it
d Click your Cloudant NoSQL DB service tile to open it
e Click LAUNCH
f In the Databases section click on your database to open it
g Browse the documents youve added to your database
Tweet this
Check out the app I just deployed that leverages a Cloudant database on Bluemix [insert link
to your app]
Get creative
Enhance the apprsquos navigation so it is easier to move around the site or change the name of the
app to be less ldquofabulousrdquo and more you Make it your own
Additional resources
Cloudant-Python httpsgithubcomcloudant-labscloudant-python
Develop and manage Java apps with IBM Bluemix and DevOps Services
httpwwwibmcomdeveloperworkslibraryd-Bluemix-javadevopsindexhtml
9
Part 1C Planning Tracking amp Leveraging New Bluemix Services
Learn this
Leveraging software as a service that works well with the platform as a service of your choice
can greatly speed up your software delivery lifecycle
Agile planning and tracking is simple in the cloud and creates built-in traceability for all of your
teammateshellipwhether they are collocated or distributed
Writing code that leverages a Bluemix service can be fast and significantly reduce development
time
Try this
1 Plan a new feature to add to the Fabulous Price Finder
So far you have made use of existing code but you havent created anything new Time to
change that
When working with teammates or even by yourself organizing your ideas into user stories and
then organizing your user stories into a plan can be incredibly valuable
a Open Track amp Plan
i Open the Fabulous Price Finder project you created in the previous section by
navigating to DevOps Services signing in if youre not already authenticated
and clicking on your project on the My Projects page
ii Click the gear button ( ) in the upper-right corner to open the Project
Settings page
iii Click OPTIONS
iv On the page that loads select the Enable Track amp Plan checkbox (if it is not
already enabled) and click SAVE
v Click TRACK amp PLAN in the upper-right corner The Track amp Plan section is your
place to organize your ideas
b Create work items in your backlog
i On the left pane click Backlog
ii On the right pane type the following in the Create a work itemhellip field As a shopper I want a text message sent to me with the
price of each item so that I dont have to check the
website to view the prices
10
iii The tool will automatically detect the work item type is story and set the type
for you
iv In the icon bar below click the Owned By icon and select your username
v Click CREATE
vi Repeat Steps 2-5 to create work items for the following stories
1 As a shopper I want to organize my items by
store so that I only have to input the field ID
once per store instead of every item
2 As a shopper I want to see a graph of the price
of the items Im watching over time so I can
judge if its a good time to buy the items
3 As a shopper I want the prices to be retrieved
automatically for me on a daily basis so I dont
have to log in manually and click Get Prices
4 As a shopper I want the prices to be texted to
me only when the price has changed so Im not
getting inundated with text messages
vii Create a work item of type defect with the following summary The View
Database page fails to load when the database is empty
c Plan your work
Now that you have filled your backlog with stories its time to plan your first sprint
i On the left pane click Sprint Planning A sprint represents a period of time
Organize your user stories in sprints
ii Click Add Sprints
iii Configure the sprints so you have at least two and click Create
iv In the Backlog section rearrange your stories so they are in a ranked order by
dragging and dropping them Put As a shopper I want a text message sent to me with the price of each item so that
I dont have to check the website to view the prices as
the top item in the list and As a shopper I want the prices to be retrieved automatically for me on a daily basis so
I dont have to log in manually and click Get Prices as
the second highest item in the list
v Click the Sprint 1 dropbdown box and select Sprint 1 so that Sprint 1 appears to
the right of the backlog (You may need to click Sprint 2 and then click Sprint 1
in order for the sprint to appear)
11
vi Assume you have time to complete one user story per sprint Drag the topmost
item in the list to Sprint 1 (on the right)
vii In the sprint dropdown box select Sprint 2
viii Drag the new top most item to Sprint 2
d Track your work
Sprint 1 has begun Indicate that you have started working on the first work item by
marking it as In Progress
i In the sprint dropdown box select Sprint 1
ii In the Sprint 1 section click the Status New icon ( ) for the story planned
for Sprint 1
iii In the Status dialog click Start Working
iv Note the work item ID for your work item because you will need it later in this
lab
2 Implement the feature
Next implement the work item As a shopper I want a text message sent to me with the price of each item so that I dont have to check the
website to view the prices The idea of implementing a text messaging feature
might sound a bit daunting to you Fortunately Bluemix provides a Twilio service you can use
that handles sending the text message so you can implement this feature with only nine lines of
code
a Register with Twilio
If you do not already have an account with Twilio you need to register You also need
your Twilio AccountSID Auth Token and phone number
1 Go to httpswwwtwiliocom and sign up
2 Follow the on-screen instructions to verify your account
3 Note your Twilio phone number
4 After you have authenticated and are viewing your account click your ID in the
right corner and select Account
5 In the API Credentials section note your AccountSID and AuthToken (You
might want to leave this page open as you continue so you can easily copy the
credentials)
b If you do not want to receive text messages
If you do not want to receive text messages to your phone because your carrier charges
ridiculous amounts you can instead send the text messages to your Twilio account
12
phone number If yoursquore ok with receiving text messages on your phone skip this
section and continue on to step c
i In Twilio click NUMBERS in the top navigation bar
ii Click your phone number in the Number table
iii In the Messaging section replace the Request URL with any valid url (this
prevents a never ending loop of your phone number sending a response to the
text message it just received) For example you might replace the Request URL
with a link to your Laurenrsquos Lovely Landscapes app
iv Click Save
v Click Numbers in the top navigation bar
vi Click Verify a number
vii Click text you instead
viii Input your Twilio phone number in the Phone Number box
ix Click Text Me
x In a new tab or window navigate to twiliocom and click Account
xi Click NUMBERS in the top navigation bar
xii Click your number in the Number table
xiii Click Inbound in the Messaging section
xiv Hover over the text message in the table to see the incoming message Note
the verification number in the text messagersquos body
xv Return to your original tab or window and input the verification number
xvi Click Submit
When you want to view incoming text messages for your Twilio number return to the
details page for your number and click Inbound
c Add the Twilio service to the app
Begin by adding the Bluemix Twilio service to your app
i In DevOps Services click EDIT CODE in the upper-right corner
ii Click the Open application dashboard button ( ) The Bluemix page for your
app opens
iii Click ADD A SERVICE OR API
13
iv Scroll down until you see the Twilio service Hint Check the Mobile section The
catalog is constantly being updated with new services
v Click the Twilio service
vi In the Account SID and Auth Token fields paste your Twilio AccountSID and
AuthToken from your Twilio Account Settings page
vii Click CREATE
viii When prompted restage your application now by clicking RESTAGE
ix Wait for the page to indicate that your app is running
d Add code that uses the Twilio service
Add code to your app that sends a text message whenever a price is retrieved for an
item Use the Twilio service to actually send the text message
i Add Twilio to requirementstxt
Your app needs the Twilio module so you must add it to the requirementstxt
file
1 In the Web IDE open requirementstxt
2 Add a new line to the end of the file and type twilio
3 Select File gt Save
ii Connect to the Twilio service
To effectively use your Twilio service you must connect to it
1 In the Web IDE open the wsgipy file
2 In the Imports section around Line 55 add the following line from twiliorest import TwilioRestClient
3 As part of the for loop that begins around Line 65 add the following
lines
Note Be sure your spacing before these two lines (spaces and tabs) is
identical to the if statement that checks if the key starts with
ldquocloudantrdquo
if decoded_config[key][0][name]startswith(Twilio)
twilio_creds = decoded_config[key][0][credentials]
twilio_authToken = twilio_creds[authToken]
twilio_accountSID = twilio_creds[accountSID]
twilioClient = TwilioRestClient(twilio_accountSID twilio_authToken)
4 Your Twilio credentials are now stored in twilio_creds Your code
should now look like the following listing
14
for key value in decoded_configiteritems()
if decoded_config[key][0][name]startswith(Twilio)
twilio_creds = decoded_config[key][0][credentials]
twilio_authToken = twilio_creds[authToken]
twilio_accountSID = twilio_creds[accountSID]
twilioClient = TwilioRestClient(twilio_accountSID twilio_authToken)
if keystartswith(cloudant)
cloudant_creds = decoded_config[key][0][credentials]
cloudant_host = cloudant_creds[host]
cloudant_port = int(cloudant_creds[port])
cloudant_username = cloudant_creds[username]
cloudant_password = cloudant_creds[password]
cloudant_url = str(cloudant_creds[url])
account = cloudantAccount(cloudant_username)
login = accountlogin(cloudant_username cloudant_password)
assert loginstatus_code == 200
db = accountdatabase(dbname)
response = dbput()
print responsejson
5 Save your changes by selecting File gt Save
e Add code to send the text message
Now comes the fun part Its time to code
Continue to work in the wsgipy file and create a new function around Line 89 that
sends a text message def sendTextWithMessage(message)
message = twilioClientmessagescreate(to=+15555555555 from_=+15555555555
body=message)
f Replace the to number with the cell phone number or Twilio number where you want
the text messages to be sent (dont forget the country code)
g Replace the from number with your Twilio phone number (dont forget the country
code)
h In the getCurrentPrice function inside of the if statement that checks if the
price is not None add the following line of code sendTextWithMessage(The current price of s is s (item[name] price))
i Save your changes by selecting File gt Save
Thats it Youve implemented your feature with only nine lines of code
3 Deploy and test the feature
Now its time to deploy your application to Bluemix so you can test it
a Click the Deploy button ( )
b If prompted if you want to stop and redeploy click OK
c After your application has finished deploying click the Open URL button ( ) in the top
gray bar
d In your app click Get Prices
15
e Check your phone or Twilio number for a text message
If you like update the prices of the items in the store and get the prices again
4 Push the feature to the repository
Now that your feature is tested its time to push your changes to the Git repository
a In the leftmost bar of icons click the Git Repository button ( )
b In the box in the Working Directory Changes section type a comment similar to the
following being sure to replace 20 with the work item ID associated with the work item
you created Changes to implement the text messaging feature as
described in work item 20
c Select each change in the Changed Files section and click the COMMIT button
d In the OUTGOING section click PUSH
e If you are prompted for your committer information enter it and click OK
5 Complete the feature
To indicate that you have finished your feature mark your work item as complete
a In the Web IDE click TRACK amp PLAN in the upper-right corner
b In the right pane find your work item associated with the text messaging feature and
click the Status In Progress icon
c Click Set Done
d In the right pane scroll right until you see the RESOLVED section Notice that your work
item is now marked done
6 Discover the traceability
When you added a comment in your commit that mentioned your work item a link was
automatically created for you between the change and the work item
a In the right pane scroll to the Resolved view if you are not currently viewing your
resolved work items
b Click the textual summary of the work item associated with the text messaging feature
to open it
c In the work item click the Links tab
d In the LINKS section notice that a link was automatically generated for you Click the
link The Git Log displays
e Observe that you have a summary of the git commit and its associated work items
f Click GIT LOG in the left navigation to see a list of all of your git commits
16
Tweet this
Collaborate with me on this Bluemix app I created [insert link to your app] [include a
screenshot of the Web IDE with your codemdashTweets with images are more likely to get noticed]
Get creative
Invite a friend to join your project Navigate to your projects home page click Members and
invite a friend to join
Create new work items for features yoursquod like to implement or defects you find
Implement some of the stories you created or fix the defects you recorded
Additional resources
Twilio SMS and MMS Python Quickstart httpswwwtwiliocomdocsquickstartpythonsms
Managing Distributed Teams
httpswwwscrumallianceorgcommunityarticles2013julymanaging-distributed-
teamsaspx
So Long Scrum Hello Kanban httpsstormpathcomblogso-long-scrum-hello-kanban
17
Part 1D Deploying Automatically Using the Delivery Pipeline
Learn this
Deployment automation is one of the keys to a successful DevOps approach
You can create a complete delivery pipeline with multiple stages automated tests and
automatic deploys using DevOps Services
Try this
You can configure a multi-stage build and deployment pipeline to support your DevOps approach to
software development In this section you will configure a builder a deployment to your
development (dev) space and a deployment to your production (prod) space
1 Create a production space
Organizations and spaces are organizational units in the Cloud Foundry infrastructure that can
be used to store and track application resources An organization contains domains spaces and
users a space contains applications and services By default a dev (development) space is
created for you
a Navigate to the Bluemix dashboard if you are not there already
b Click Create a Space in the left menu
c In the Create a Space dialog input prod as your space name and click CREATE
2 Create services for deployments to your dev space
When deploying to your dev and prod spaces you will likely want to have services dedicated to
those deployments For example you want to use separate databases for each space Wersquoll
begin by creating services for each space
a Navigate to the Bluemix dashboard if you are not there already
b Click CATALOG
c Create the Cloudant NoSQL DB service
i Scroll down until you see the Cloudant NoSQL DB service Hint Check the Data
and Analytics section The catalog is constantly being updated with new
services
ii Click the Cloudant NoSQL DB service
iii In the Space dropdown choose dev
iv In the App dropdown choose Leave unbound
18
v In the Service name box leave the default or change the name to something
you like Be sure the name you choose begins with ldquocloudantrdquo as that is how
the code identifies the service
vi Note the name of your service as you will need it later
vii Click CREATE
d Create the Twilio service
i Navigate to the Catalog if you are not there already
ii Scroll down until you see the Twilio service Hint Check the Mobile section The
catalog is constantly being updated with new services
iii Click the Twilio service
iv In the Space dropdown choose dev
v In the App dropdown choose Leave unbound
vi In the Service name box leave the default or change the name to something
you like Be sure the name you choose begins with ldquotwiliordquo as that is how the
code identifies the service Note the name you choose as you will need it later
vii In the Account SID and Auth Token fields paste your Twilio AccountSID and
AuthToken from your Twilio Account Settings page
viii Click CREATE
3 Create services for deployments to your prod space
Repeat the steps from 2 above to create Cloudant NoSQL DB and Twilio services for
deployments to your prod space Be sure to select ldquoprodrdquo as the Space instead of ldquodevrdquo
4 Enable Advanced Build amp Deploy
You can configure a multi-stage build and deployment pipeline to support your DevOps
approach to software development Note that the pipeline only includes changes that have
been pushed to your projectrsquos repository changes that are in your workspace in the Web IDE
that have not been pushed to your projectrsquos repository will NOT be deployed as part of the
pipeline
a Open the Fabulous Price Finder project you created in the previous section by
navigating to DevOps Services signing in if youre not already authenticated and
clicking on your project on the My Projects page
b Click BUILD amp DEPLOY in the upper-right corner
5 Add a builder stage
The first stage we will create is a builder stage
19
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Build Stage
c Notice that the Input Type is set to SCM Repository by default This means the input for
the stage will be your git repository
d Notice that Run jobs whenever a change is pushed to Git is selected by default This
means that whenever you or someone on your team pushes code to your projectrsquos
repository the build stage will automatically be triggered
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Build
g Since this app does not require compilation (unlike a Java app) we will use the Simple
builder type Note that you can choose from a variety of builders
h Notice that the Stop running this stage if this job fails is checked by default This means
that any jobs further down the pipeline will not execute and the whole stage will be
marked as failed if a failure occurs
i Click SAVE
6 Add a ldquodeploy to development spacerdquo stage
Now we will add a deployment to the space that represents your development space Some
might call this a quality assurance or test space It is a place where developers can test their
code live in a production quality environment without actually putting it in production
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Dev Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the previous stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default This
will configure your pipeline so that whenever someone pushes code to your projectrsquos
repository the build step will run and if it succeeds a deploy to the development
environment will be kicked off
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Application Name to be a name that is unique to your Bluemix dev space
h By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
20
developers on your team will be able to test their code In the Script section after cf push ldquo$CF_APPrdquo
add -n whateverYouWantYourUrlToBe Note the url needs to be unique across
all Bluemix apps so be creative
i Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
j Next add a command to restage your app with the newly bound services cf restage $CF_APP
k The script section should now look similar to the following cf push $CF_APP -n fbf-lauren-dev
cf bind-service $CF_APP Cloudant-dev
cf bind-service $CF_APP Twilio-dev
cf restage $CF_APP
l Note that if we had automated tests associated with this project we could add a test
job to this stage so that the deploy would run and then tests could be executed against
that deployment
m Click SAVE
7 Add a deploy to production space stage
Now we will add a deployment to the space that represents your production space This space
is where you keep apps that your end users will use
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Prod Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the Build Stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default Since
we donrsquot have any automated tests included in this pipeline automatically deploying to
production is probably not safe Select Run jobs only when this stage is run manually
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Space to be prod
h Update the Application Name to be a name that is unique to your Bluemix prod space
i By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
21
your end users will be able to access your app In the Script section after cf push ldquo$CF_APPrdquo
add -n whateveryouwantyoururltobe Note the url needs to be unique across
all Bluemix apps so be creative
j Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
k Next add a command to restage your app with the newly bound services cf restage $CF_APP
l The script section should now look similar to the following cf push $CF_APP -n fbf-lauren
cf bind-service $CF_APP Cloudant-prod
cf bind-service $CF_APP Twilio-prod
cf restage $CF_APP
m Click SAVE
8 Kick off the pipeline
Now that we have the build pipeline configured itrsquos time to try it out To trigger the pipeline
we could make a change to our projectrsquos code and push the change to our Git repository or we
could manually request a build
a On the Pipeline page click the Play button ( ) in the Build Stage to kick off the first
stage of the pipeline manually
The build pipeline will go through the build and deploy to dev steps If you like what was
deployed to dev you can drag and drop the build from the Build Stage tile to the Prod
Deployment tile to deploy it there
Tweet this
Dove into DevOps by creating a release pipeline for my app [attach a screenshot of the Build amp
Deploy page for your app] Bluemix DevOpsServices
22
Get creative
Make a change to your code and watch the build pipeline automatically deploy it for you
Zero downtime deployments are very important to web applications Design and implement a
strategy to deploy your app to your production space without any downtime Hint check out
this article httpwwwibmcomdeveloperworkscloudlibrarycl-Bluemix-rollingpipeline
Additional resources
DevOps for Dummies ebook httpibmcodevopsfordummies
Top 10 Practices for Effective DevOps httpwwwdrdobbscomarchitecture-and-designtop-
10-practices-for-effective-devops240149363
Cloud Computing Trends 2014 State of the Cloud Survey
httpwwwrightscalecomblogcloud-industry-insightscloud-computing-trends-2014-state-
cloud-survey
DevOps Embracing Cloud Services httpwwwmidsizeinsidercomen-usarticledevops-
embracing-cloud-servicesVJmrScABg
23
Part 2A Live Edit In this part yoursquoll get to use an exciting new feature Live Edit The Live Edit feature allows you to make
changes to your application and have them deployed nearly instantaneously to your deployed app Itrsquos just like
editing files locallyhellipexcept you donrsquot have to set up a development environment
Since the Live Edit feature is currently optimized for Nodejs we will create a new app using the Personality
Insights Nodejs Web Starter boilerplate (what a concise name) The exciting thing about this boilerplate is that
it uses IBM Watson (remember Watson the supercomputer that beat Jeopardy champions a few years ago)
services
In this part you will create a new Bluemix app and leverage the Live Edit feature to see the changes you make
be deployed almost instantly to your running app
Learn this
Live Edit allows you to see changes you make in the DevOps Services Web IDE reflected in real-
time to your app deployed on Bluemix Itrsquos just like editing files locallyhellipexcept you donrsquot have
to set up a development environment
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app Changes you make in Node modules (like JavaScript files)
will require a fast restart of the app in order to be reflected in your deployed app
Try this
1 Sign up for DevOps Services if you have not done so already
a Navigate to httpibmbizcds-bluemix and sign up
b As part of the Bluemix registration process you will receive an e-mail asking you to
confirm your account If you do not confirm you are not registered If you do not
receive a confirmation e-mail send a note to idbluemixnet
c Navigate to httpibmbizcds-ids and register for DevOps Services using the same IBM
id you used for Bluemix
2 Create a Nodejs app using a Bluemix boilerplate
The first thing we need is a Nodejs app One of the fastest ways to get a new app is to use a
Bluemix boilerplate
a Navigate to httpibmbizcds-bluemix
b Log in if you are not already authenticated
c Click CATALOG The Catalog is your place to browse the available boilerplates (sample
applications) runtimes and services
d In the Boilerplates section click Personality Insights Nodejs Web Starter
24
e Input a name for the app (what the app will be referred to in Bluemix) and a host for the
app (the part of the url that will go before mybluemixnet) Note that the host must be
globally unique across all of Bluemix so be creative
f Click CREATE A copy of the boilerplate code will be put in to a new app for you and
then deployed to Bluemix
g Click Overview In the APP HEALTH section wait for the message ldquoYour app is
runningrdquo to be displayed
h When your app is running click on your route (toward the top of the page) to open your
running app
3 Explore the Nodejs app
Now that your app is running letrsquos take a moment to explore it The Personality Insights app
uses the Watson Personality Insights service to analyze text and determine personality traits of
the textrsquos author
a The app includes sample text from Moby Dick Click ANALYZE to learn about the
personality of Moby Dickrsquos author Herman Melville Textual output as well as a
graphical visualization are displayed
b Navigate to one of your favorite websites with English text (keep it office-friendlyhellipso
perhaps choose your favorite news site) and copy a block of text
c Return to your Personality Insights App and paste the text in the Try the Service box
d Click ANALYZE View the textual output as well as the graphical visualization
4 Prepare for Live Edit
Wersquove tested the app and now wersquoll prep to make some changes to it
a Return to the Bluemix page for your Personality Insights app If your app is not in a
separate window or tab right-click on your apprsquos route and choose an option to open
the link in a new window or tab
b Click ADD GIT in the upper-right corner
c Click CONTINUE in the Create Git Repository dialog Bluemix will take a copy of your
apprsquos code and put it in a Git repository hosted at DevOps Services
d Click CLOSE once the Git Repository has been successfully created
e Click EDIT CODE in the upper-right corner to open the DevOps Services Web IDE
f Toggle the Live Edit option to on
g If prompted to redeploy click OK The app will redeploy so changes can be made live to
your deployed app When the app finishes deploying a green dot will be displayed in
the run bar
25
When the app finishes deploying you are ready to make live edits
5 Change a static file
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app
a In the navigator view on the left expand views
b Select layoutjade
c Update the h2 to say something like ldquoThis open lab is so great that Irsquom going to Tweet
about itrdquo
d Switch to your tab or window that has your running app
e Refresh the page
f Note that the heading of your app was changed instantly You didnrsquot have to wait for
the app to redeploy
g Make a few more changes to static files and watch your app update in real time
6 Change a node module
Changes to node modules require a fast app restart (not a full redeploy) in order to be deployed
because the server caches node modules in memory
a Select the root directory of your app in the navigator in the left pane
b Click File gt New gt File
c The name of the file is highlighted so you can rename it Type defaulttexttxt and press
Enter or Return on your keyboard
d In the editor on the right type or paste the text that you want to use as the default text
in the app
e Select the appjs file in the navigator in the left pane
f In the editor on the right look for the dummy_text variable around line 25 Replace
mobydicktxt with defaulttexttxt
g In the web IDEs top bar click the Restart button ( )
h When the app finishes restarting (which only takes a few seconds) a green dot is
displayed in the run bar
26
i Switch to the tab or window that has your running app Refresh the page to see the new
text (If your browser cached the page and you dont see the text update browse to
your apps URL again and the change should be displayed)
Tweet this
Developing in the cloud using Bluemix DevOpsServices is now as fast and easy as developing
locally WhoKnew
Get creative
Create a new look for the Personality Insights app Open the CSS files located in the publiccss
directory and have fun making changes to the files Watch as your changes are deployed live
Additional resources
Everything AND the kitchen sync Bluemix Live Sync is here httpsdeveloperibmcomdevops-
services20150213everything-kitchen-sync-Bluemix-live-sync
Bluemix Live Sync documentation
httpswwwngbluemixnetdocscm_mmc=developerWorks-_-dWdevcenter-_-devops-
services-_-lpmanageappsbluemixlivehtmlbluemixlive
27
Part 2B Bluemix Debug Sometimes staring at the code to figure out whatrsquos going wrong just doesnrsquot work Sometimes you really need
to debug the code or access the environment where the app is running This is where Bluemix Debug comes in
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for your Nodejs
apps
In this part yoursquoll continue on with the Personality Insights Nodejs app you created in part 2A
Learn this
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for
your Nodejs apps
Try this Note The Node Inspector Debugger currently only works in Chrome You may want to take this
opportunity to change browsers if you are not already using Chrome
1 Open the IBM Bluemix Debugger
a Navigate to httpibmbizcds-ids and sign in if you are not already authenticated
b In My Projects locate the tile for your Personality Insights app Click the Edit Code icon
( ) to open the Web IDE for your project
c In the Web IDErsquos top bar click the Debug button ( )
d When prompted for credentials input your IBM id and password
2 Use the shell
The Bluemix Shell allows you to explore and interact with the Bluemix environment where your
app is running by using a built-in bash shell
a On the IBM Bluemix Debugger page for your project click Open Shell A shell client
opens in your browser
b View the processes running in your Bluemix environment by inputting the following
command top
c Click NEW WINDOW
d Drag and drop the new window so that you can continue to observe your processes
while you explore the log files
e In the new window change directory to the log files by inputting the following
command cd logs
28
f View a list of the files in the logs directory by inputting the following command ls
g Notice that staging_tasklog is a file in your logs directory View the last 10 lines of the
log file by inputting the following command tail staging_tasklog
3 Use the Debugger
The Debugger allows you to debug Nodejs apps
a On the IBM Bluemix Debugger page for your project click Open Debugger The
Debugger takes about 30 seconds to load
b If the Navigator is not displayed on the left click the Expand Navigator button
c Select appjs in the Navigator to open the file
d Add a breakpoint on line 48 by clicking 48
e In a different tab or window navigate to your running app
f Click Analyze
g Switch back to the tab or window with your Debugger Notice that the breakpoint has
been hit On the right you can view the Call Stack and Variables You can also use
buttons on the right to step over the next function call step into the next function call
and step out of the next function call
h When you have finished exploring your running app click the Resume script execution
button ( ) on the right
Note that from the IBM Bluemix Debugger page you can choose to suspend the app which will
restart the app and break at the first line of the app
29
Tweet this
Bluemix + DevOpsServices + Shell = a happy developer NoDownloadsRequired [include a
screenshot of the shell in your browser]
Just debugged my Bluemix app by using the debugger in DevOpsServices
NoDownloadsRequired [take a selfie of you in front of your debugger looking very excited]
Get creative
Use some of your favorite commands to explore the Bluemix environment where your app runs
Additional resources
Bluemix Live Sync
httpswwwngBluemixnetdocsmanageappsBluemixlivehtmlBluemixlivedebugger
Learning the Shell httplinuxcommandorglc3_learning_the_shellphp
9
Part 1C Planning Tracking amp Leveraging New Bluemix Services
Learn this
Leveraging software as a service that works well with the platform as a service of your choice
can greatly speed up your software delivery lifecycle
Agile planning and tracking is simple in the cloud and creates built-in traceability for all of your
teammateshellipwhether they are collocated or distributed
Writing code that leverages a Bluemix service can be fast and significantly reduce development
time
Try this
1 Plan a new feature to add to the Fabulous Price Finder
So far you have made use of existing code but you havent created anything new Time to
change that
When working with teammates or even by yourself organizing your ideas into user stories and
then organizing your user stories into a plan can be incredibly valuable
a Open Track amp Plan
i Open the Fabulous Price Finder project you created in the previous section by
navigating to DevOps Services signing in if youre not already authenticated
and clicking on your project on the My Projects page
ii Click the gear button ( ) in the upper-right corner to open the Project
Settings page
iii Click OPTIONS
iv On the page that loads select the Enable Track amp Plan checkbox (if it is not
already enabled) and click SAVE
v Click TRACK amp PLAN in the upper-right corner The Track amp Plan section is your
place to organize your ideas
b Create work items in your backlog
i On the left pane click Backlog
ii On the right pane type the following in the Create a work itemhellip field As a shopper I want a text message sent to me with the
price of each item so that I dont have to check the
website to view the prices
10
iii The tool will automatically detect the work item type is story and set the type
for you
iv In the icon bar below click the Owned By icon and select your username
v Click CREATE
vi Repeat Steps 2-5 to create work items for the following stories
1 As a shopper I want to organize my items by
store so that I only have to input the field ID
once per store instead of every item
2 As a shopper I want to see a graph of the price
of the items Im watching over time so I can
judge if its a good time to buy the items
3 As a shopper I want the prices to be retrieved
automatically for me on a daily basis so I dont
have to log in manually and click Get Prices
4 As a shopper I want the prices to be texted to
me only when the price has changed so Im not
getting inundated with text messages
vii Create a work item of type defect with the following summary The View
Database page fails to load when the database is empty
c Plan your work
Now that you have filled your backlog with stories its time to plan your first sprint
i On the left pane click Sprint Planning A sprint represents a period of time
Organize your user stories in sprints
ii Click Add Sprints
iii Configure the sprints so you have at least two and click Create
iv In the Backlog section rearrange your stories so they are in a ranked order by
dragging and dropping them Put As a shopper I want a text message sent to me with the price of each item so that
I dont have to check the website to view the prices as
the top item in the list and As a shopper I want the prices to be retrieved automatically for me on a daily basis so
I dont have to log in manually and click Get Prices as
the second highest item in the list
v Click the Sprint 1 dropbdown box and select Sprint 1 so that Sprint 1 appears to
the right of the backlog (You may need to click Sprint 2 and then click Sprint 1
in order for the sprint to appear)
11
vi Assume you have time to complete one user story per sprint Drag the topmost
item in the list to Sprint 1 (on the right)
vii In the sprint dropdown box select Sprint 2
viii Drag the new top most item to Sprint 2
d Track your work
Sprint 1 has begun Indicate that you have started working on the first work item by
marking it as In Progress
i In the sprint dropdown box select Sprint 1
ii In the Sprint 1 section click the Status New icon ( ) for the story planned
for Sprint 1
iii In the Status dialog click Start Working
iv Note the work item ID for your work item because you will need it later in this
lab
2 Implement the feature
Next implement the work item As a shopper I want a text message sent to me with the price of each item so that I dont have to check the
website to view the prices The idea of implementing a text messaging feature
might sound a bit daunting to you Fortunately Bluemix provides a Twilio service you can use
that handles sending the text message so you can implement this feature with only nine lines of
code
a Register with Twilio
If you do not already have an account with Twilio you need to register You also need
your Twilio AccountSID Auth Token and phone number
1 Go to httpswwwtwiliocom and sign up
2 Follow the on-screen instructions to verify your account
3 Note your Twilio phone number
4 After you have authenticated and are viewing your account click your ID in the
right corner and select Account
5 In the API Credentials section note your AccountSID and AuthToken (You
might want to leave this page open as you continue so you can easily copy the
credentials)
b If you do not want to receive text messages
If you do not want to receive text messages to your phone because your carrier charges
ridiculous amounts you can instead send the text messages to your Twilio account
12
phone number If yoursquore ok with receiving text messages on your phone skip this
section and continue on to step c
i In Twilio click NUMBERS in the top navigation bar
ii Click your phone number in the Number table
iii In the Messaging section replace the Request URL with any valid url (this
prevents a never ending loop of your phone number sending a response to the
text message it just received) For example you might replace the Request URL
with a link to your Laurenrsquos Lovely Landscapes app
iv Click Save
v Click Numbers in the top navigation bar
vi Click Verify a number
vii Click text you instead
viii Input your Twilio phone number in the Phone Number box
ix Click Text Me
x In a new tab or window navigate to twiliocom and click Account
xi Click NUMBERS in the top navigation bar
xii Click your number in the Number table
xiii Click Inbound in the Messaging section
xiv Hover over the text message in the table to see the incoming message Note
the verification number in the text messagersquos body
xv Return to your original tab or window and input the verification number
xvi Click Submit
When you want to view incoming text messages for your Twilio number return to the
details page for your number and click Inbound
c Add the Twilio service to the app
Begin by adding the Bluemix Twilio service to your app
i In DevOps Services click EDIT CODE in the upper-right corner
ii Click the Open application dashboard button ( ) The Bluemix page for your
app opens
iii Click ADD A SERVICE OR API
13
iv Scroll down until you see the Twilio service Hint Check the Mobile section The
catalog is constantly being updated with new services
v Click the Twilio service
vi In the Account SID and Auth Token fields paste your Twilio AccountSID and
AuthToken from your Twilio Account Settings page
vii Click CREATE
viii When prompted restage your application now by clicking RESTAGE
ix Wait for the page to indicate that your app is running
d Add code that uses the Twilio service
Add code to your app that sends a text message whenever a price is retrieved for an
item Use the Twilio service to actually send the text message
i Add Twilio to requirementstxt
Your app needs the Twilio module so you must add it to the requirementstxt
file
1 In the Web IDE open requirementstxt
2 Add a new line to the end of the file and type twilio
3 Select File gt Save
ii Connect to the Twilio service
To effectively use your Twilio service you must connect to it
1 In the Web IDE open the wsgipy file
2 In the Imports section around Line 55 add the following line from twiliorest import TwilioRestClient
3 As part of the for loop that begins around Line 65 add the following
lines
Note Be sure your spacing before these two lines (spaces and tabs) is
identical to the if statement that checks if the key starts with
ldquocloudantrdquo
if decoded_config[key][0][name]startswith(Twilio)
twilio_creds = decoded_config[key][0][credentials]
twilio_authToken = twilio_creds[authToken]
twilio_accountSID = twilio_creds[accountSID]
twilioClient = TwilioRestClient(twilio_accountSID twilio_authToken)
4 Your Twilio credentials are now stored in twilio_creds Your code
should now look like the following listing
14
for key value in decoded_configiteritems()
if decoded_config[key][0][name]startswith(Twilio)
twilio_creds = decoded_config[key][0][credentials]
twilio_authToken = twilio_creds[authToken]
twilio_accountSID = twilio_creds[accountSID]
twilioClient = TwilioRestClient(twilio_accountSID twilio_authToken)
if keystartswith(cloudant)
cloudant_creds = decoded_config[key][0][credentials]
cloudant_host = cloudant_creds[host]
cloudant_port = int(cloudant_creds[port])
cloudant_username = cloudant_creds[username]
cloudant_password = cloudant_creds[password]
cloudant_url = str(cloudant_creds[url])
account = cloudantAccount(cloudant_username)
login = accountlogin(cloudant_username cloudant_password)
assert loginstatus_code == 200
db = accountdatabase(dbname)
response = dbput()
print responsejson
5 Save your changes by selecting File gt Save
e Add code to send the text message
Now comes the fun part Its time to code
Continue to work in the wsgipy file and create a new function around Line 89 that
sends a text message def sendTextWithMessage(message)
message = twilioClientmessagescreate(to=+15555555555 from_=+15555555555
body=message)
f Replace the to number with the cell phone number or Twilio number where you want
the text messages to be sent (dont forget the country code)
g Replace the from number with your Twilio phone number (dont forget the country
code)
h In the getCurrentPrice function inside of the if statement that checks if the
price is not None add the following line of code sendTextWithMessage(The current price of s is s (item[name] price))
i Save your changes by selecting File gt Save
Thats it Youve implemented your feature with only nine lines of code
3 Deploy and test the feature
Now its time to deploy your application to Bluemix so you can test it
a Click the Deploy button ( )
b If prompted if you want to stop and redeploy click OK
c After your application has finished deploying click the Open URL button ( ) in the top
gray bar
d In your app click Get Prices
15
e Check your phone or Twilio number for a text message
If you like update the prices of the items in the store and get the prices again
4 Push the feature to the repository
Now that your feature is tested its time to push your changes to the Git repository
a In the leftmost bar of icons click the Git Repository button ( )
b In the box in the Working Directory Changes section type a comment similar to the
following being sure to replace 20 with the work item ID associated with the work item
you created Changes to implement the text messaging feature as
described in work item 20
c Select each change in the Changed Files section and click the COMMIT button
d In the OUTGOING section click PUSH
e If you are prompted for your committer information enter it and click OK
5 Complete the feature
To indicate that you have finished your feature mark your work item as complete
a In the Web IDE click TRACK amp PLAN in the upper-right corner
b In the right pane find your work item associated with the text messaging feature and
click the Status In Progress icon
c Click Set Done
d In the right pane scroll right until you see the RESOLVED section Notice that your work
item is now marked done
6 Discover the traceability
When you added a comment in your commit that mentioned your work item a link was
automatically created for you between the change and the work item
a In the right pane scroll to the Resolved view if you are not currently viewing your
resolved work items
b Click the textual summary of the work item associated with the text messaging feature
to open it
c In the work item click the Links tab
d In the LINKS section notice that a link was automatically generated for you Click the
link The Git Log displays
e Observe that you have a summary of the git commit and its associated work items
f Click GIT LOG in the left navigation to see a list of all of your git commits
16
Tweet this
Collaborate with me on this Bluemix app I created [insert link to your app] [include a
screenshot of the Web IDE with your codemdashTweets with images are more likely to get noticed]
Get creative
Invite a friend to join your project Navigate to your projects home page click Members and
invite a friend to join
Create new work items for features yoursquod like to implement or defects you find
Implement some of the stories you created or fix the defects you recorded
Additional resources
Twilio SMS and MMS Python Quickstart httpswwwtwiliocomdocsquickstartpythonsms
Managing Distributed Teams
httpswwwscrumallianceorgcommunityarticles2013julymanaging-distributed-
teamsaspx
So Long Scrum Hello Kanban httpsstormpathcomblogso-long-scrum-hello-kanban
17
Part 1D Deploying Automatically Using the Delivery Pipeline
Learn this
Deployment automation is one of the keys to a successful DevOps approach
You can create a complete delivery pipeline with multiple stages automated tests and
automatic deploys using DevOps Services
Try this
You can configure a multi-stage build and deployment pipeline to support your DevOps approach to
software development In this section you will configure a builder a deployment to your
development (dev) space and a deployment to your production (prod) space
1 Create a production space
Organizations and spaces are organizational units in the Cloud Foundry infrastructure that can
be used to store and track application resources An organization contains domains spaces and
users a space contains applications and services By default a dev (development) space is
created for you
a Navigate to the Bluemix dashboard if you are not there already
b Click Create a Space in the left menu
c In the Create a Space dialog input prod as your space name and click CREATE
2 Create services for deployments to your dev space
When deploying to your dev and prod spaces you will likely want to have services dedicated to
those deployments For example you want to use separate databases for each space Wersquoll
begin by creating services for each space
a Navigate to the Bluemix dashboard if you are not there already
b Click CATALOG
c Create the Cloudant NoSQL DB service
i Scroll down until you see the Cloudant NoSQL DB service Hint Check the Data
and Analytics section The catalog is constantly being updated with new
services
ii Click the Cloudant NoSQL DB service
iii In the Space dropdown choose dev
iv In the App dropdown choose Leave unbound
18
v In the Service name box leave the default or change the name to something
you like Be sure the name you choose begins with ldquocloudantrdquo as that is how
the code identifies the service
vi Note the name of your service as you will need it later
vii Click CREATE
d Create the Twilio service
i Navigate to the Catalog if you are not there already
ii Scroll down until you see the Twilio service Hint Check the Mobile section The
catalog is constantly being updated with new services
iii Click the Twilio service
iv In the Space dropdown choose dev
v In the App dropdown choose Leave unbound
vi In the Service name box leave the default or change the name to something
you like Be sure the name you choose begins with ldquotwiliordquo as that is how the
code identifies the service Note the name you choose as you will need it later
vii In the Account SID and Auth Token fields paste your Twilio AccountSID and
AuthToken from your Twilio Account Settings page
viii Click CREATE
3 Create services for deployments to your prod space
Repeat the steps from 2 above to create Cloudant NoSQL DB and Twilio services for
deployments to your prod space Be sure to select ldquoprodrdquo as the Space instead of ldquodevrdquo
4 Enable Advanced Build amp Deploy
You can configure a multi-stage build and deployment pipeline to support your DevOps
approach to software development Note that the pipeline only includes changes that have
been pushed to your projectrsquos repository changes that are in your workspace in the Web IDE
that have not been pushed to your projectrsquos repository will NOT be deployed as part of the
pipeline
a Open the Fabulous Price Finder project you created in the previous section by
navigating to DevOps Services signing in if youre not already authenticated and
clicking on your project on the My Projects page
b Click BUILD amp DEPLOY in the upper-right corner
5 Add a builder stage
The first stage we will create is a builder stage
19
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Build Stage
c Notice that the Input Type is set to SCM Repository by default This means the input for
the stage will be your git repository
d Notice that Run jobs whenever a change is pushed to Git is selected by default This
means that whenever you or someone on your team pushes code to your projectrsquos
repository the build stage will automatically be triggered
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Build
g Since this app does not require compilation (unlike a Java app) we will use the Simple
builder type Note that you can choose from a variety of builders
h Notice that the Stop running this stage if this job fails is checked by default This means
that any jobs further down the pipeline will not execute and the whole stage will be
marked as failed if a failure occurs
i Click SAVE
6 Add a ldquodeploy to development spacerdquo stage
Now we will add a deployment to the space that represents your development space Some
might call this a quality assurance or test space It is a place where developers can test their
code live in a production quality environment without actually putting it in production
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Dev Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the previous stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default This
will configure your pipeline so that whenever someone pushes code to your projectrsquos
repository the build step will run and if it succeeds a deploy to the development
environment will be kicked off
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Application Name to be a name that is unique to your Bluemix dev space
h By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
20
developers on your team will be able to test their code In the Script section after cf push ldquo$CF_APPrdquo
add -n whateverYouWantYourUrlToBe Note the url needs to be unique across
all Bluemix apps so be creative
i Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
j Next add a command to restage your app with the newly bound services cf restage $CF_APP
k The script section should now look similar to the following cf push $CF_APP -n fbf-lauren-dev
cf bind-service $CF_APP Cloudant-dev
cf bind-service $CF_APP Twilio-dev
cf restage $CF_APP
l Note that if we had automated tests associated with this project we could add a test
job to this stage so that the deploy would run and then tests could be executed against
that deployment
m Click SAVE
7 Add a deploy to production space stage
Now we will add a deployment to the space that represents your production space This space
is where you keep apps that your end users will use
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Prod Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the Build Stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default Since
we donrsquot have any automated tests included in this pipeline automatically deploying to
production is probably not safe Select Run jobs only when this stage is run manually
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Space to be prod
h Update the Application Name to be a name that is unique to your Bluemix prod space
i By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
21
your end users will be able to access your app In the Script section after cf push ldquo$CF_APPrdquo
add -n whateveryouwantyoururltobe Note the url needs to be unique across
all Bluemix apps so be creative
j Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
k Next add a command to restage your app with the newly bound services cf restage $CF_APP
l The script section should now look similar to the following cf push $CF_APP -n fbf-lauren
cf bind-service $CF_APP Cloudant-prod
cf bind-service $CF_APP Twilio-prod
cf restage $CF_APP
m Click SAVE
8 Kick off the pipeline
Now that we have the build pipeline configured itrsquos time to try it out To trigger the pipeline
we could make a change to our projectrsquos code and push the change to our Git repository or we
could manually request a build
a On the Pipeline page click the Play button ( ) in the Build Stage to kick off the first
stage of the pipeline manually
The build pipeline will go through the build and deploy to dev steps If you like what was
deployed to dev you can drag and drop the build from the Build Stage tile to the Prod
Deployment tile to deploy it there
Tweet this
Dove into DevOps by creating a release pipeline for my app [attach a screenshot of the Build amp
Deploy page for your app] Bluemix DevOpsServices
22
Get creative
Make a change to your code and watch the build pipeline automatically deploy it for you
Zero downtime deployments are very important to web applications Design and implement a
strategy to deploy your app to your production space without any downtime Hint check out
this article httpwwwibmcomdeveloperworkscloudlibrarycl-Bluemix-rollingpipeline
Additional resources
DevOps for Dummies ebook httpibmcodevopsfordummies
Top 10 Practices for Effective DevOps httpwwwdrdobbscomarchitecture-and-designtop-
10-practices-for-effective-devops240149363
Cloud Computing Trends 2014 State of the Cloud Survey
httpwwwrightscalecomblogcloud-industry-insightscloud-computing-trends-2014-state-
cloud-survey
DevOps Embracing Cloud Services httpwwwmidsizeinsidercomen-usarticledevops-
embracing-cloud-servicesVJmrScABg
23
Part 2A Live Edit In this part yoursquoll get to use an exciting new feature Live Edit The Live Edit feature allows you to make
changes to your application and have them deployed nearly instantaneously to your deployed app Itrsquos just like
editing files locallyhellipexcept you donrsquot have to set up a development environment
Since the Live Edit feature is currently optimized for Nodejs we will create a new app using the Personality
Insights Nodejs Web Starter boilerplate (what a concise name) The exciting thing about this boilerplate is that
it uses IBM Watson (remember Watson the supercomputer that beat Jeopardy champions a few years ago)
services
In this part you will create a new Bluemix app and leverage the Live Edit feature to see the changes you make
be deployed almost instantly to your running app
Learn this
Live Edit allows you to see changes you make in the DevOps Services Web IDE reflected in real-
time to your app deployed on Bluemix Itrsquos just like editing files locallyhellipexcept you donrsquot have
to set up a development environment
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app Changes you make in Node modules (like JavaScript files)
will require a fast restart of the app in order to be reflected in your deployed app
Try this
1 Sign up for DevOps Services if you have not done so already
a Navigate to httpibmbizcds-bluemix and sign up
b As part of the Bluemix registration process you will receive an e-mail asking you to
confirm your account If you do not confirm you are not registered If you do not
receive a confirmation e-mail send a note to idbluemixnet
c Navigate to httpibmbizcds-ids and register for DevOps Services using the same IBM
id you used for Bluemix
2 Create a Nodejs app using a Bluemix boilerplate
The first thing we need is a Nodejs app One of the fastest ways to get a new app is to use a
Bluemix boilerplate
a Navigate to httpibmbizcds-bluemix
b Log in if you are not already authenticated
c Click CATALOG The Catalog is your place to browse the available boilerplates (sample
applications) runtimes and services
d In the Boilerplates section click Personality Insights Nodejs Web Starter
24
e Input a name for the app (what the app will be referred to in Bluemix) and a host for the
app (the part of the url that will go before mybluemixnet) Note that the host must be
globally unique across all of Bluemix so be creative
f Click CREATE A copy of the boilerplate code will be put in to a new app for you and
then deployed to Bluemix
g Click Overview In the APP HEALTH section wait for the message ldquoYour app is
runningrdquo to be displayed
h When your app is running click on your route (toward the top of the page) to open your
running app
3 Explore the Nodejs app
Now that your app is running letrsquos take a moment to explore it The Personality Insights app
uses the Watson Personality Insights service to analyze text and determine personality traits of
the textrsquos author
a The app includes sample text from Moby Dick Click ANALYZE to learn about the
personality of Moby Dickrsquos author Herman Melville Textual output as well as a
graphical visualization are displayed
b Navigate to one of your favorite websites with English text (keep it office-friendlyhellipso
perhaps choose your favorite news site) and copy a block of text
c Return to your Personality Insights App and paste the text in the Try the Service box
d Click ANALYZE View the textual output as well as the graphical visualization
4 Prepare for Live Edit
Wersquove tested the app and now wersquoll prep to make some changes to it
a Return to the Bluemix page for your Personality Insights app If your app is not in a
separate window or tab right-click on your apprsquos route and choose an option to open
the link in a new window or tab
b Click ADD GIT in the upper-right corner
c Click CONTINUE in the Create Git Repository dialog Bluemix will take a copy of your
apprsquos code and put it in a Git repository hosted at DevOps Services
d Click CLOSE once the Git Repository has been successfully created
e Click EDIT CODE in the upper-right corner to open the DevOps Services Web IDE
f Toggle the Live Edit option to on
g If prompted to redeploy click OK The app will redeploy so changes can be made live to
your deployed app When the app finishes deploying a green dot will be displayed in
the run bar
25
When the app finishes deploying you are ready to make live edits
5 Change a static file
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app
a In the navigator view on the left expand views
b Select layoutjade
c Update the h2 to say something like ldquoThis open lab is so great that Irsquom going to Tweet
about itrdquo
d Switch to your tab or window that has your running app
e Refresh the page
f Note that the heading of your app was changed instantly You didnrsquot have to wait for
the app to redeploy
g Make a few more changes to static files and watch your app update in real time
6 Change a node module
Changes to node modules require a fast app restart (not a full redeploy) in order to be deployed
because the server caches node modules in memory
a Select the root directory of your app in the navigator in the left pane
b Click File gt New gt File
c The name of the file is highlighted so you can rename it Type defaulttexttxt and press
Enter or Return on your keyboard
d In the editor on the right type or paste the text that you want to use as the default text
in the app
e Select the appjs file in the navigator in the left pane
f In the editor on the right look for the dummy_text variable around line 25 Replace
mobydicktxt with defaulttexttxt
g In the web IDEs top bar click the Restart button ( )
h When the app finishes restarting (which only takes a few seconds) a green dot is
displayed in the run bar
26
i Switch to the tab or window that has your running app Refresh the page to see the new
text (If your browser cached the page and you dont see the text update browse to
your apps URL again and the change should be displayed)
Tweet this
Developing in the cloud using Bluemix DevOpsServices is now as fast and easy as developing
locally WhoKnew
Get creative
Create a new look for the Personality Insights app Open the CSS files located in the publiccss
directory and have fun making changes to the files Watch as your changes are deployed live
Additional resources
Everything AND the kitchen sync Bluemix Live Sync is here httpsdeveloperibmcomdevops-
services20150213everything-kitchen-sync-Bluemix-live-sync
Bluemix Live Sync documentation
httpswwwngbluemixnetdocscm_mmc=developerWorks-_-dWdevcenter-_-devops-
services-_-lpmanageappsbluemixlivehtmlbluemixlive
27
Part 2B Bluemix Debug Sometimes staring at the code to figure out whatrsquos going wrong just doesnrsquot work Sometimes you really need
to debug the code or access the environment where the app is running This is where Bluemix Debug comes in
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for your Nodejs
apps
In this part yoursquoll continue on with the Personality Insights Nodejs app you created in part 2A
Learn this
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for
your Nodejs apps
Try this Note The Node Inspector Debugger currently only works in Chrome You may want to take this
opportunity to change browsers if you are not already using Chrome
1 Open the IBM Bluemix Debugger
a Navigate to httpibmbizcds-ids and sign in if you are not already authenticated
b In My Projects locate the tile for your Personality Insights app Click the Edit Code icon
( ) to open the Web IDE for your project
c In the Web IDErsquos top bar click the Debug button ( )
d When prompted for credentials input your IBM id and password
2 Use the shell
The Bluemix Shell allows you to explore and interact with the Bluemix environment where your
app is running by using a built-in bash shell
a On the IBM Bluemix Debugger page for your project click Open Shell A shell client
opens in your browser
b View the processes running in your Bluemix environment by inputting the following
command top
c Click NEW WINDOW
d Drag and drop the new window so that you can continue to observe your processes
while you explore the log files
e In the new window change directory to the log files by inputting the following
command cd logs
28
f View a list of the files in the logs directory by inputting the following command ls
g Notice that staging_tasklog is a file in your logs directory View the last 10 lines of the
log file by inputting the following command tail staging_tasklog
3 Use the Debugger
The Debugger allows you to debug Nodejs apps
a On the IBM Bluemix Debugger page for your project click Open Debugger The
Debugger takes about 30 seconds to load
b If the Navigator is not displayed on the left click the Expand Navigator button
c Select appjs in the Navigator to open the file
d Add a breakpoint on line 48 by clicking 48
e In a different tab or window navigate to your running app
f Click Analyze
g Switch back to the tab or window with your Debugger Notice that the breakpoint has
been hit On the right you can view the Call Stack and Variables You can also use
buttons on the right to step over the next function call step into the next function call
and step out of the next function call
h When you have finished exploring your running app click the Resume script execution
button ( ) on the right
Note that from the IBM Bluemix Debugger page you can choose to suspend the app which will
restart the app and break at the first line of the app
29
Tweet this
Bluemix + DevOpsServices + Shell = a happy developer NoDownloadsRequired [include a
screenshot of the shell in your browser]
Just debugged my Bluemix app by using the debugger in DevOpsServices
NoDownloadsRequired [take a selfie of you in front of your debugger looking very excited]
Get creative
Use some of your favorite commands to explore the Bluemix environment where your app runs
Additional resources
Bluemix Live Sync
httpswwwngBluemixnetdocsmanageappsBluemixlivehtmlBluemixlivedebugger
Learning the Shell httplinuxcommandorglc3_learning_the_shellphp
10
iii The tool will automatically detect the work item type is story and set the type
for you
iv In the icon bar below click the Owned By icon and select your username
v Click CREATE
vi Repeat Steps 2-5 to create work items for the following stories
1 As a shopper I want to organize my items by
store so that I only have to input the field ID
once per store instead of every item
2 As a shopper I want to see a graph of the price
of the items Im watching over time so I can
judge if its a good time to buy the items
3 As a shopper I want the prices to be retrieved
automatically for me on a daily basis so I dont
have to log in manually and click Get Prices
4 As a shopper I want the prices to be texted to
me only when the price has changed so Im not
getting inundated with text messages
vii Create a work item of type defect with the following summary The View
Database page fails to load when the database is empty
c Plan your work
Now that you have filled your backlog with stories its time to plan your first sprint
i On the left pane click Sprint Planning A sprint represents a period of time
Organize your user stories in sprints
ii Click Add Sprints
iii Configure the sprints so you have at least two and click Create
iv In the Backlog section rearrange your stories so they are in a ranked order by
dragging and dropping them Put As a shopper I want a text message sent to me with the price of each item so that
I dont have to check the website to view the prices as
the top item in the list and As a shopper I want the prices to be retrieved automatically for me on a daily basis so
I dont have to log in manually and click Get Prices as
the second highest item in the list
v Click the Sprint 1 dropbdown box and select Sprint 1 so that Sprint 1 appears to
the right of the backlog (You may need to click Sprint 2 and then click Sprint 1
in order for the sprint to appear)
11
vi Assume you have time to complete one user story per sprint Drag the topmost
item in the list to Sprint 1 (on the right)
vii In the sprint dropdown box select Sprint 2
viii Drag the new top most item to Sprint 2
d Track your work
Sprint 1 has begun Indicate that you have started working on the first work item by
marking it as In Progress
i In the sprint dropdown box select Sprint 1
ii In the Sprint 1 section click the Status New icon ( ) for the story planned
for Sprint 1
iii In the Status dialog click Start Working
iv Note the work item ID for your work item because you will need it later in this
lab
2 Implement the feature
Next implement the work item As a shopper I want a text message sent to me with the price of each item so that I dont have to check the
website to view the prices The idea of implementing a text messaging feature
might sound a bit daunting to you Fortunately Bluemix provides a Twilio service you can use
that handles sending the text message so you can implement this feature with only nine lines of
code
a Register with Twilio
If you do not already have an account with Twilio you need to register You also need
your Twilio AccountSID Auth Token and phone number
1 Go to httpswwwtwiliocom and sign up
2 Follow the on-screen instructions to verify your account
3 Note your Twilio phone number
4 After you have authenticated and are viewing your account click your ID in the
right corner and select Account
5 In the API Credentials section note your AccountSID and AuthToken (You
might want to leave this page open as you continue so you can easily copy the
credentials)
b If you do not want to receive text messages
If you do not want to receive text messages to your phone because your carrier charges
ridiculous amounts you can instead send the text messages to your Twilio account
12
phone number If yoursquore ok with receiving text messages on your phone skip this
section and continue on to step c
i In Twilio click NUMBERS in the top navigation bar
ii Click your phone number in the Number table
iii In the Messaging section replace the Request URL with any valid url (this
prevents a never ending loop of your phone number sending a response to the
text message it just received) For example you might replace the Request URL
with a link to your Laurenrsquos Lovely Landscapes app
iv Click Save
v Click Numbers in the top navigation bar
vi Click Verify a number
vii Click text you instead
viii Input your Twilio phone number in the Phone Number box
ix Click Text Me
x In a new tab or window navigate to twiliocom and click Account
xi Click NUMBERS in the top navigation bar
xii Click your number in the Number table
xiii Click Inbound in the Messaging section
xiv Hover over the text message in the table to see the incoming message Note
the verification number in the text messagersquos body
xv Return to your original tab or window and input the verification number
xvi Click Submit
When you want to view incoming text messages for your Twilio number return to the
details page for your number and click Inbound
c Add the Twilio service to the app
Begin by adding the Bluemix Twilio service to your app
i In DevOps Services click EDIT CODE in the upper-right corner
ii Click the Open application dashboard button ( ) The Bluemix page for your
app opens
iii Click ADD A SERVICE OR API
13
iv Scroll down until you see the Twilio service Hint Check the Mobile section The
catalog is constantly being updated with new services
v Click the Twilio service
vi In the Account SID and Auth Token fields paste your Twilio AccountSID and
AuthToken from your Twilio Account Settings page
vii Click CREATE
viii When prompted restage your application now by clicking RESTAGE
ix Wait for the page to indicate that your app is running
d Add code that uses the Twilio service
Add code to your app that sends a text message whenever a price is retrieved for an
item Use the Twilio service to actually send the text message
i Add Twilio to requirementstxt
Your app needs the Twilio module so you must add it to the requirementstxt
file
1 In the Web IDE open requirementstxt
2 Add a new line to the end of the file and type twilio
3 Select File gt Save
ii Connect to the Twilio service
To effectively use your Twilio service you must connect to it
1 In the Web IDE open the wsgipy file
2 In the Imports section around Line 55 add the following line from twiliorest import TwilioRestClient
3 As part of the for loop that begins around Line 65 add the following
lines
Note Be sure your spacing before these two lines (spaces and tabs) is
identical to the if statement that checks if the key starts with
ldquocloudantrdquo
if decoded_config[key][0][name]startswith(Twilio)
twilio_creds = decoded_config[key][0][credentials]
twilio_authToken = twilio_creds[authToken]
twilio_accountSID = twilio_creds[accountSID]
twilioClient = TwilioRestClient(twilio_accountSID twilio_authToken)
4 Your Twilio credentials are now stored in twilio_creds Your code
should now look like the following listing
14
for key value in decoded_configiteritems()
if decoded_config[key][0][name]startswith(Twilio)
twilio_creds = decoded_config[key][0][credentials]
twilio_authToken = twilio_creds[authToken]
twilio_accountSID = twilio_creds[accountSID]
twilioClient = TwilioRestClient(twilio_accountSID twilio_authToken)
if keystartswith(cloudant)
cloudant_creds = decoded_config[key][0][credentials]
cloudant_host = cloudant_creds[host]
cloudant_port = int(cloudant_creds[port])
cloudant_username = cloudant_creds[username]
cloudant_password = cloudant_creds[password]
cloudant_url = str(cloudant_creds[url])
account = cloudantAccount(cloudant_username)
login = accountlogin(cloudant_username cloudant_password)
assert loginstatus_code == 200
db = accountdatabase(dbname)
response = dbput()
print responsejson
5 Save your changes by selecting File gt Save
e Add code to send the text message
Now comes the fun part Its time to code
Continue to work in the wsgipy file and create a new function around Line 89 that
sends a text message def sendTextWithMessage(message)
message = twilioClientmessagescreate(to=+15555555555 from_=+15555555555
body=message)
f Replace the to number with the cell phone number or Twilio number where you want
the text messages to be sent (dont forget the country code)
g Replace the from number with your Twilio phone number (dont forget the country
code)
h In the getCurrentPrice function inside of the if statement that checks if the
price is not None add the following line of code sendTextWithMessage(The current price of s is s (item[name] price))
i Save your changes by selecting File gt Save
Thats it Youve implemented your feature with only nine lines of code
3 Deploy and test the feature
Now its time to deploy your application to Bluemix so you can test it
a Click the Deploy button ( )
b If prompted if you want to stop and redeploy click OK
c After your application has finished deploying click the Open URL button ( ) in the top
gray bar
d In your app click Get Prices
15
e Check your phone or Twilio number for a text message
If you like update the prices of the items in the store and get the prices again
4 Push the feature to the repository
Now that your feature is tested its time to push your changes to the Git repository
a In the leftmost bar of icons click the Git Repository button ( )
b In the box in the Working Directory Changes section type a comment similar to the
following being sure to replace 20 with the work item ID associated with the work item
you created Changes to implement the text messaging feature as
described in work item 20
c Select each change in the Changed Files section and click the COMMIT button
d In the OUTGOING section click PUSH
e If you are prompted for your committer information enter it and click OK
5 Complete the feature
To indicate that you have finished your feature mark your work item as complete
a In the Web IDE click TRACK amp PLAN in the upper-right corner
b In the right pane find your work item associated with the text messaging feature and
click the Status In Progress icon
c Click Set Done
d In the right pane scroll right until you see the RESOLVED section Notice that your work
item is now marked done
6 Discover the traceability
When you added a comment in your commit that mentioned your work item a link was
automatically created for you between the change and the work item
a In the right pane scroll to the Resolved view if you are not currently viewing your
resolved work items
b Click the textual summary of the work item associated with the text messaging feature
to open it
c In the work item click the Links tab
d In the LINKS section notice that a link was automatically generated for you Click the
link The Git Log displays
e Observe that you have a summary of the git commit and its associated work items
f Click GIT LOG in the left navigation to see a list of all of your git commits
16
Tweet this
Collaborate with me on this Bluemix app I created [insert link to your app] [include a
screenshot of the Web IDE with your codemdashTweets with images are more likely to get noticed]
Get creative
Invite a friend to join your project Navigate to your projects home page click Members and
invite a friend to join
Create new work items for features yoursquod like to implement or defects you find
Implement some of the stories you created or fix the defects you recorded
Additional resources
Twilio SMS and MMS Python Quickstart httpswwwtwiliocomdocsquickstartpythonsms
Managing Distributed Teams
httpswwwscrumallianceorgcommunityarticles2013julymanaging-distributed-
teamsaspx
So Long Scrum Hello Kanban httpsstormpathcomblogso-long-scrum-hello-kanban
17
Part 1D Deploying Automatically Using the Delivery Pipeline
Learn this
Deployment automation is one of the keys to a successful DevOps approach
You can create a complete delivery pipeline with multiple stages automated tests and
automatic deploys using DevOps Services
Try this
You can configure a multi-stage build and deployment pipeline to support your DevOps approach to
software development In this section you will configure a builder a deployment to your
development (dev) space and a deployment to your production (prod) space
1 Create a production space
Organizations and spaces are organizational units in the Cloud Foundry infrastructure that can
be used to store and track application resources An organization contains domains spaces and
users a space contains applications and services By default a dev (development) space is
created for you
a Navigate to the Bluemix dashboard if you are not there already
b Click Create a Space in the left menu
c In the Create a Space dialog input prod as your space name and click CREATE
2 Create services for deployments to your dev space
When deploying to your dev and prod spaces you will likely want to have services dedicated to
those deployments For example you want to use separate databases for each space Wersquoll
begin by creating services for each space
a Navigate to the Bluemix dashboard if you are not there already
b Click CATALOG
c Create the Cloudant NoSQL DB service
i Scroll down until you see the Cloudant NoSQL DB service Hint Check the Data
and Analytics section The catalog is constantly being updated with new
services
ii Click the Cloudant NoSQL DB service
iii In the Space dropdown choose dev
iv In the App dropdown choose Leave unbound
18
v In the Service name box leave the default or change the name to something
you like Be sure the name you choose begins with ldquocloudantrdquo as that is how
the code identifies the service
vi Note the name of your service as you will need it later
vii Click CREATE
d Create the Twilio service
i Navigate to the Catalog if you are not there already
ii Scroll down until you see the Twilio service Hint Check the Mobile section The
catalog is constantly being updated with new services
iii Click the Twilio service
iv In the Space dropdown choose dev
v In the App dropdown choose Leave unbound
vi In the Service name box leave the default or change the name to something
you like Be sure the name you choose begins with ldquotwiliordquo as that is how the
code identifies the service Note the name you choose as you will need it later
vii In the Account SID and Auth Token fields paste your Twilio AccountSID and
AuthToken from your Twilio Account Settings page
viii Click CREATE
3 Create services for deployments to your prod space
Repeat the steps from 2 above to create Cloudant NoSQL DB and Twilio services for
deployments to your prod space Be sure to select ldquoprodrdquo as the Space instead of ldquodevrdquo
4 Enable Advanced Build amp Deploy
You can configure a multi-stage build and deployment pipeline to support your DevOps
approach to software development Note that the pipeline only includes changes that have
been pushed to your projectrsquos repository changes that are in your workspace in the Web IDE
that have not been pushed to your projectrsquos repository will NOT be deployed as part of the
pipeline
a Open the Fabulous Price Finder project you created in the previous section by
navigating to DevOps Services signing in if youre not already authenticated and
clicking on your project on the My Projects page
b Click BUILD amp DEPLOY in the upper-right corner
5 Add a builder stage
The first stage we will create is a builder stage
19
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Build Stage
c Notice that the Input Type is set to SCM Repository by default This means the input for
the stage will be your git repository
d Notice that Run jobs whenever a change is pushed to Git is selected by default This
means that whenever you or someone on your team pushes code to your projectrsquos
repository the build stage will automatically be triggered
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Build
g Since this app does not require compilation (unlike a Java app) we will use the Simple
builder type Note that you can choose from a variety of builders
h Notice that the Stop running this stage if this job fails is checked by default This means
that any jobs further down the pipeline will not execute and the whole stage will be
marked as failed if a failure occurs
i Click SAVE
6 Add a ldquodeploy to development spacerdquo stage
Now we will add a deployment to the space that represents your development space Some
might call this a quality assurance or test space It is a place where developers can test their
code live in a production quality environment without actually putting it in production
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Dev Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the previous stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default This
will configure your pipeline so that whenever someone pushes code to your projectrsquos
repository the build step will run and if it succeeds a deploy to the development
environment will be kicked off
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Application Name to be a name that is unique to your Bluemix dev space
h By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
20
developers on your team will be able to test their code In the Script section after cf push ldquo$CF_APPrdquo
add -n whateverYouWantYourUrlToBe Note the url needs to be unique across
all Bluemix apps so be creative
i Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
j Next add a command to restage your app with the newly bound services cf restage $CF_APP
k The script section should now look similar to the following cf push $CF_APP -n fbf-lauren-dev
cf bind-service $CF_APP Cloudant-dev
cf bind-service $CF_APP Twilio-dev
cf restage $CF_APP
l Note that if we had automated tests associated with this project we could add a test
job to this stage so that the deploy would run and then tests could be executed against
that deployment
m Click SAVE
7 Add a deploy to production space stage
Now we will add a deployment to the space that represents your production space This space
is where you keep apps that your end users will use
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Prod Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the Build Stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default Since
we donrsquot have any automated tests included in this pipeline automatically deploying to
production is probably not safe Select Run jobs only when this stage is run manually
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Space to be prod
h Update the Application Name to be a name that is unique to your Bluemix prod space
i By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
21
your end users will be able to access your app In the Script section after cf push ldquo$CF_APPrdquo
add -n whateveryouwantyoururltobe Note the url needs to be unique across
all Bluemix apps so be creative
j Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
k Next add a command to restage your app with the newly bound services cf restage $CF_APP
l The script section should now look similar to the following cf push $CF_APP -n fbf-lauren
cf bind-service $CF_APP Cloudant-prod
cf bind-service $CF_APP Twilio-prod
cf restage $CF_APP
m Click SAVE
8 Kick off the pipeline
Now that we have the build pipeline configured itrsquos time to try it out To trigger the pipeline
we could make a change to our projectrsquos code and push the change to our Git repository or we
could manually request a build
a On the Pipeline page click the Play button ( ) in the Build Stage to kick off the first
stage of the pipeline manually
The build pipeline will go through the build and deploy to dev steps If you like what was
deployed to dev you can drag and drop the build from the Build Stage tile to the Prod
Deployment tile to deploy it there
Tweet this
Dove into DevOps by creating a release pipeline for my app [attach a screenshot of the Build amp
Deploy page for your app] Bluemix DevOpsServices
22
Get creative
Make a change to your code and watch the build pipeline automatically deploy it for you
Zero downtime deployments are very important to web applications Design and implement a
strategy to deploy your app to your production space without any downtime Hint check out
this article httpwwwibmcomdeveloperworkscloudlibrarycl-Bluemix-rollingpipeline
Additional resources
DevOps for Dummies ebook httpibmcodevopsfordummies
Top 10 Practices for Effective DevOps httpwwwdrdobbscomarchitecture-and-designtop-
10-practices-for-effective-devops240149363
Cloud Computing Trends 2014 State of the Cloud Survey
httpwwwrightscalecomblogcloud-industry-insightscloud-computing-trends-2014-state-
cloud-survey
DevOps Embracing Cloud Services httpwwwmidsizeinsidercomen-usarticledevops-
embracing-cloud-servicesVJmrScABg
23
Part 2A Live Edit In this part yoursquoll get to use an exciting new feature Live Edit The Live Edit feature allows you to make
changes to your application and have them deployed nearly instantaneously to your deployed app Itrsquos just like
editing files locallyhellipexcept you donrsquot have to set up a development environment
Since the Live Edit feature is currently optimized for Nodejs we will create a new app using the Personality
Insights Nodejs Web Starter boilerplate (what a concise name) The exciting thing about this boilerplate is that
it uses IBM Watson (remember Watson the supercomputer that beat Jeopardy champions a few years ago)
services
In this part you will create a new Bluemix app and leverage the Live Edit feature to see the changes you make
be deployed almost instantly to your running app
Learn this
Live Edit allows you to see changes you make in the DevOps Services Web IDE reflected in real-
time to your app deployed on Bluemix Itrsquos just like editing files locallyhellipexcept you donrsquot have
to set up a development environment
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app Changes you make in Node modules (like JavaScript files)
will require a fast restart of the app in order to be reflected in your deployed app
Try this
1 Sign up for DevOps Services if you have not done so already
a Navigate to httpibmbizcds-bluemix and sign up
b As part of the Bluemix registration process you will receive an e-mail asking you to
confirm your account If you do not confirm you are not registered If you do not
receive a confirmation e-mail send a note to idbluemixnet
c Navigate to httpibmbizcds-ids and register for DevOps Services using the same IBM
id you used for Bluemix
2 Create a Nodejs app using a Bluemix boilerplate
The first thing we need is a Nodejs app One of the fastest ways to get a new app is to use a
Bluemix boilerplate
a Navigate to httpibmbizcds-bluemix
b Log in if you are not already authenticated
c Click CATALOG The Catalog is your place to browse the available boilerplates (sample
applications) runtimes and services
d In the Boilerplates section click Personality Insights Nodejs Web Starter
24
e Input a name for the app (what the app will be referred to in Bluemix) and a host for the
app (the part of the url that will go before mybluemixnet) Note that the host must be
globally unique across all of Bluemix so be creative
f Click CREATE A copy of the boilerplate code will be put in to a new app for you and
then deployed to Bluemix
g Click Overview In the APP HEALTH section wait for the message ldquoYour app is
runningrdquo to be displayed
h When your app is running click on your route (toward the top of the page) to open your
running app
3 Explore the Nodejs app
Now that your app is running letrsquos take a moment to explore it The Personality Insights app
uses the Watson Personality Insights service to analyze text and determine personality traits of
the textrsquos author
a The app includes sample text from Moby Dick Click ANALYZE to learn about the
personality of Moby Dickrsquos author Herman Melville Textual output as well as a
graphical visualization are displayed
b Navigate to one of your favorite websites with English text (keep it office-friendlyhellipso
perhaps choose your favorite news site) and copy a block of text
c Return to your Personality Insights App and paste the text in the Try the Service box
d Click ANALYZE View the textual output as well as the graphical visualization
4 Prepare for Live Edit
Wersquove tested the app and now wersquoll prep to make some changes to it
a Return to the Bluemix page for your Personality Insights app If your app is not in a
separate window or tab right-click on your apprsquos route and choose an option to open
the link in a new window or tab
b Click ADD GIT in the upper-right corner
c Click CONTINUE in the Create Git Repository dialog Bluemix will take a copy of your
apprsquos code and put it in a Git repository hosted at DevOps Services
d Click CLOSE once the Git Repository has been successfully created
e Click EDIT CODE in the upper-right corner to open the DevOps Services Web IDE
f Toggle the Live Edit option to on
g If prompted to redeploy click OK The app will redeploy so changes can be made live to
your deployed app When the app finishes deploying a green dot will be displayed in
the run bar
25
When the app finishes deploying you are ready to make live edits
5 Change a static file
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app
a In the navigator view on the left expand views
b Select layoutjade
c Update the h2 to say something like ldquoThis open lab is so great that Irsquom going to Tweet
about itrdquo
d Switch to your tab or window that has your running app
e Refresh the page
f Note that the heading of your app was changed instantly You didnrsquot have to wait for
the app to redeploy
g Make a few more changes to static files and watch your app update in real time
6 Change a node module
Changes to node modules require a fast app restart (not a full redeploy) in order to be deployed
because the server caches node modules in memory
a Select the root directory of your app in the navigator in the left pane
b Click File gt New gt File
c The name of the file is highlighted so you can rename it Type defaulttexttxt and press
Enter or Return on your keyboard
d In the editor on the right type or paste the text that you want to use as the default text
in the app
e Select the appjs file in the navigator in the left pane
f In the editor on the right look for the dummy_text variable around line 25 Replace
mobydicktxt with defaulttexttxt
g In the web IDEs top bar click the Restart button ( )
h When the app finishes restarting (which only takes a few seconds) a green dot is
displayed in the run bar
26
i Switch to the tab or window that has your running app Refresh the page to see the new
text (If your browser cached the page and you dont see the text update browse to
your apps URL again and the change should be displayed)
Tweet this
Developing in the cloud using Bluemix DevOpsServices is now as fast and easy as developing
locally WhoKnew
Get creative
Create a new look for the Personality Insights app Open the CSS files located in the publiccss
directory and have fun making changes to the files Watch as your changes are deployed live
Additional resources
Everything AND the kitchen sync Bluemix Live Sync is here httpsdeveloperibmcomdevops-
services20150213everything-kitchen-sync-Bluemix-live-sync
Bluemix Live Sync documentation
httpswwwngbluemixnetdocscm_mmc=developerWorks-_-dWdevcenter-_-devops-
services-_-lpmanageappsbluemixlivehtmlbluemixlive
27
Part 2B Bluemix Debug Sometimes staring at the code to figure out whatrsquos going wrong just doesnrsquot work Sometimes you really need
to debug the code or access the environment where the app is running This is where Bluemix Debug comes in
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for your Nodejs
apps
In this part yoursquoll continue on with the Personality Insights Nodejs app you created in part 2A
Learn this
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for
your Nodejs apps
Try this Note The Node Inspector Debugger currently only works in Chrome You may want to take this
opportunity to change browsers if you are not already using Chrome
1 Open the IBM Bluemix Debugger
a Navigate to httpibmbizcds-ids and sign in if you are not already authenticated
b In My Projects locate the tile for your Personality Insights app Click the Edit Code icon
( ) to open the Web IDE for your project
c In the Web IDErsquos top bar click the Debug button ( )
d When prompted for credentials input your IBM id and password
2 Use the shell
The Bluemix Shell allows you to explore and interact with the Bluemix environment where your
app is running by using a built-in bash shell
a On the IBM Bluemix Debugger page for your project click Open Shell A shell client
opens in your browser
b View the processes running in your Bluemix environment by inputting the following
command top
c Click NEW WINDOW
d Drag and drop the new window so that you can continue to observe your processes
while you explore the log files
e In the new window change directory to the log files by inputting the following
command cd logs
28
f View a list of the files in the logs directory by inputting the following command ls
g Notice that staging_tasklog is a file in your logs directory View the last 10 lines of the
log file by inputting the following command tail staging_tasklog
3 Use the Debugger
The Debugger allows you to debug Nodejs apps
a On the IBM Bluemix Debugger page for your project click Open Debugger The
Debugger takes about 30 seconds to load
b If the Navigator is not displayed on the left click the Expand Navigator button
c Select appjs in the Navigator to open the file
d Add a breakpoint on line 48 by clicking 48
e In a different tab or window navigate to your running app
f Click Analyze
g Switch back to the tab or window with your Debugger Notice that the breakpoint has
been hit On the right you can view the Call Stack and Variables You can also use
buttons on the right to step over the next function call step into the next function call
and step out of the next function call
h When you have finished exploring your running app click the Resume script execution
button ( ) on the right
Note that from the IBM Bluemix Debugger page you can choose to suspend the app which will
restart the app and break at the first line of the app
29
Tweet this
Bluemix + DevOpsServices + Shell = a happy developer NoDownloadsRequired [include a
screenshot of the shell in your browser]
Just debugged my Bluemix app by using the debugger in DevOpsServices
NoDownloadsRequired [take a selfie of you in front of your debugger looking very excited]
Get creative
Use some of your favorite commands to explore the Bluemix environment where your app runs
Additional resources
Bluemix Live Sync
httpswwwngBluemixnetdocsmanageappsBluemixlivehtmlBluemixlivedebugger
Learning the Shell httplinuxcommandorglc3_learning_the_shellphp
11
vi Assume you have time to complete one user story per sprint Drag the topmost
item in the list to Sprint 1 (on the right)
vii In the sprint dropdown box select Sprint 2
viii Drag the new top most item to Sprint 2
d Track your work
Sprint 1 has begun Indicate that you have started working on the first work item by
marking it as In Progress
i In the sprint dropdown box select Sprint 1
ii In the Sprint 1 section click the Status New icon ( ) for the story planned
for Sprint 1
iii In the Status dialog click Start Working
iv Note the work item ID for your work item because you will need it later in this
lab
2 Implement the feature
Next implement the work item As a shopper I want a text message sent to me with the price of each item so that I dont have to check the
website to view the prices The idea of implementing a text messaging feature
might sound a bit daunting to you Fortunately Bluemix provides a Twilio service you can use
that handles sending the text message so you can implement this feature with only nine lines of
code
a Register with Twilio
If you do not already have an account with Twilio you need to register You also need
your Twilio AccountSID Auth Token and phone number
1 Go to httpswwwtwiliocom and sign up
2 Follow the on-screen instructions to verify your account
3 Note your Twilio phone number
4 After you have authenticated and are viewing your account click your ID in the
right corner and select Account
5 In the API Credentials section note your AccountSID and AuthToken (You
might want to leave this page open as you continue so you can easily copy the
credentials)
b If you do not want to receive text messages
If you do not want to receive text messages to your phone because your carrier charges
ridiculous amounts you can instead send the text messages to your Twilio account
12
phone number If yoursquore ok with receiving text messages on your phone skip this
section and continue on to step c
i In Twilio click NUMBERS in the top navigation bar
ii Click your phone number in the Number table
iii In the Messaging section replace the Request URL with any valid url (this
prevents a never ending loop of your phone number sending a response to the
text message it just received) For example you might replace the Request URL
with a link to your Laurenrsquos Lovely Landscapes app
iv Click Save
v Click Numbers in the top navigation bar
vi Click Verify a number
vii Click text you instead
viii Input your Twilio phone number in the Phone Number box
ix Click Text Me
x In a new tab or window navigate to twiliocom and click Account
xi Click NUMBERS in the top navigation bar
xii Click your number in the Number table
xiii Click Inbound in the Messaging section
xiv Hover over the text message in the table to see the incoming message Note
the verification number in the text messagersquos body
xv Return to your original tab or window and input the verification number
xvi Click Submit
When you want to view incoming text messages for your Twilio number return to the
details page for your number and click Inbound
c Add the Twilio service to the app
Begin by adding the Bluemix Twilio service to your app
i In DevOps Services click EDIT CODE in the upper-right corner
ii Click the Open application dashboard button ( ) The Bluemix page for your
app opens
iii Click ADD A SERVICE OR API
13
iv Scroll down until you see the Twilio service Hint Check the Mobile section The
catalog is constantly being updated with new services
v Click the Twilio service
vi In the Account SID and Auth Token fields paste your Twilio AccountSID and
AuthToken from your Twilio Account Settings page
vii Click CREATE
viii When prompted restage your application now by clicking RESTAGE
ix Wait for the page to indicate that your app is running
d Add code that uses the Twilio service
Add code to your app that sends a text message whenever a price is retrieved for an
item Use the Twilio service to actually send the text message
i Add Twilio to requirementstxt
Your app needs the Twilio module so you must add it to the requirementstxt
file
1 In the Web IDE open requirementstxt
2 Add a new line to the end of the file and type twilio
3 Select File gt Save
ii Connect to the Twilio service
To effectively use your Twilio service you must connect to it
1 In the Web IDE open the wsgipy file
2 In the Imports section around Line 55 add the following line from twiliorest import TwilioRestClient
3 As part of the for loop that begins around Line 65 add the following
lines
Note Be sure your spacing before these two lines (spaces and tabs) is
identical to the if statement that checks if the key starts with
ldquocloudantrdquo
if decoded_config[key][0][name]startswith(Twilio)
twilio_creds = decoded_config[key][0][credentials]
twilio_authToken = twilio_creds[authToken]
twilio_accountSID = twilio_creds[accountSID]
twilioClient = TwilioRestClient(twilio_accountSID twilio_authToken)
4 Your Twilio credentials are now stored in twilio_creds Your code
should now look like the following listing
14
for key value in decoded_configiteritems()
if decoded_config[key][0][name]startswith(Twilio)
twilio_creds = decoded_config[key][0][credentials]
twilio_authToken = twilio_creds[authToken]
twilio_accountSID = twilio_creds[accountSID]
twilioClient = TwilioRestClient(twilio_accountSID twilio_authToken)
if keystartswith(cloudant)
cloudant_creds = decoded_config[key][0][credentials]
cloudant_host = cloudant_creds[host]
cloudant_port = int(cloudant_creds[port])
cloudant_username = cloudant_creds[username]
cloudant_password = cloudant_creds[password]
cloudant_url = str(cloudant_creds[url])
account = cloudantAccount(cloudant_username)
login = accountlogin(cloudant_username cloudant_password)
assert loginstatus_code == 200
db = accountdatabase(dbname)
response = dbput()
print responsejson
5 Save your changes by selecting File gt Save
e Add code to send the text message
Now comes the fun part Its time to code
Continue to work in the wsgipy file and create a new function around Line 89 that
sends a text message def sendTextWithMessage(message)
message = twilioClientmessagescreate(to=+15555555555 from_=+15555555555
body=message)
f Replace the to number with the cell phone number or Twilio number where you want
the text messages to be sent (dont forget the country code)
g Replace the from number with your Twilio phone number (dont forget the country
code)
h In the getCurrentPrice function inside of the if statement that checks if the
price is not None add the following line of code sendTextWithMessage(The current price of s is s (item[name] price))
i Save your changes by selecting File gt Save
Thats it Youve implemented your feature with only nine lines of code
3 Deploy and test the feature
Now its time to deploy your application to Bluemix so you can test it
a Click the Deploy button ( )
b If prompted if you want to stop and redeploy click OK
c After your application has finished deploying click the Open URL button ( ) in the top
gray bar
d In your app click Get Prices
15
e Check your phone or Twilio number for a text message
If you like update the prices of the items in the store and get the prices again
4 Push the feature to the repository
Now that your feature is tested its time to push your changes to the Git repository
a In the leftmost bar of icons click the Git Repository button ( )
b In the box in the Working Directory Changes section type a comment similar to the
following being sure to replace 20 with the work item ID associated with the work item
you created Changes to implement the text messaging feature as
described in work item 20
c Select each change in the Changed Files section and click the COMMIT button
d In the OUTGOING section click PUSH
e If you are prompted for your committer information enter it and click OK
5 Complete the feature
To indicate that you have finished your feature mark your work item as complete
a In the Web IDE click TRACK amp PLAN in the upper-right corner
b In the right pane find your work item associated with the text messaging feature and
click the Status In Progress icon
c Click Set Done
d In the right pane scroll right until you see the RESOLVED section Notice that your work
item is now marked done
6 Discover the traceability
When you added a comment in your commit that mentioned your work item a link was
automatically created for you between the change and the work item
a In the right pane scroll to the Resolved view if you are not currently viewing your
resolved work items
b Click the textual summary of the work item associated with the text messaging feature
to open it
c In the work item click the Links tab
d In the LINKS section notice that a link was automatically generated for you Click the
link The Git Log displays
e Observe that you have a summary of the git commit and its associated work items
f Click GIT LOG in the left navigation to see a list of all of your git commits
16
Tweet this
Collaborate with me on this Bluemix app I created [insert link to your app] [include a
screenshot of the Web IDE with your codemdashTweets with images are more likely to get noticed]
Get creative
Invite a friend to join your project Navigate to your projects home page click Members and
invite a friend to join
Create new work items for features yoursquod like to implement or defects you find
Implement some of the stories you created or fix the defects you recorded
Additional resources
Twilio SMS and MMS Python Quickstart httpswwwtwiliocomdocsquickstartpythonsms
Managing Distributed Teams
httpswwwscrumallianceorgcommunityarticles2013julymanaging-distributed-
teamsaspx
So Long Scrum Hello Kanban httpsstormpathcomblogso-long-scrum-hello-kanban
17
Part 1D Deploying Automatically Using the Delivery Pipeline
Learn this
Deployment automation is one of the keys to a successful DevOps approach
You can create a complete delivery pipeline with multiple stages automated tests and
automatic deploys using DevOps Services
Try this
You can configure a multi-stage build and deployment pipeline to support your DevOps approach to
software development In this section you will configure a builder a deployment to your
development (dev) space and a deployment to your production (prod) space
1 Create a production space
Organizations and spaces are organizational units in the Cloud Foundry infrastructure that can
be used to store and track application resources An organization contains domains spaces and
users a space contains applications and services By default a dev (development) space is
created for you
a Navigate to the Bluemix dashboard if you are not there already
b Click Create a Space in the left menu
c In the Create a Space dialog input prod as your space name and click CREATE
2 Create services for deployments to your dev space
When deploying to your dev and prod spaces you will likely want to have services dedicated to
those deployments For example you want to use separate databases for each space Wersquoll
begin by creating services for each space
a Navigate to the Bluemix dashboard if you are not there already
b Click CATALOG
c Create the Cloudant NoSQL DB service
i Scroll down until you see the Cloudant NoSQL DB service Hint Check the Data
and Analytics section The catalog is constantly being updated with new
services
ii Click the Cloudant NoSQL DB service
iii In the Space dropdown choose dev
iv In the App dropdown choose Leave unbound
18
v In the Service name box leave the default or change the name to something
you like Be sure the name you choose begins with ldquocloudantrdquo as that is how
the code identifies the service
vi Note the name of your service as you will need it later
vii Click CREATE
d Create the Twilio service
i Navigate to the Catalog if you are not there already
ii Scroll down until you see the Twilio service Hint Check the Mobile section The
catalog is constantly being updated with new services
iii Click the Twilio service
iv In the Space dropdown choose dev
v In the App dropdown choose Leave unbound
vi In the Service name box leave the default or change the name to something
you like Be sure the name you choose begins with ldquotwiliordquo as that is how the
code identifies the service Note the name you choose as you will need it later
vii In the Account SID and Auth Token fields paste your Twilio AccountSID and
AuthToken from your Twilio Account Settings page
viii Click CREATE
3 Create services for deployments to your prod space
Repeat the steps from 2 above to create Cloudant NoSQL DB and Twilio services for
deployments to your prod space Be sure to select ldquoprodrdquo as the Space instead of ldquodevrdquo
4 Enable Advanced Build amp Deploy
You can configure a multi-stage build and deployment pipeline to support your DevOps
approach to software development Note that the pipeline only includes changes that have
been pushed to your projectrsquos repository changes that are in your workspace in the Web IDE
that have not been pushed to your projectrsquos repository will NOT be deployed as part of the
pipeline
a Open the Fabulous Price Finder project you created in the previous section by
navigating to DevOps Services signing in if youre not already authenticated and
clicking on your project on the My Projects page
b Click BUILD amp DEPLOY in the upper-right corner
5 Add a builder stage
The first stage we will create is a builder stage
19
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Build Stage
c Notice that the Input Type is set to SCM Repository by default This means the input for
the stage will be your git repository
d Notice that Run jobs whenever a change is pushed to Git is selected by default This
means that whenever you or someone on your team pushes code to your projectrsquos
repository the build stage will automatically be triggered
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Build
g Since this app does not require compilation (unlike a Java app) we will use the Simple
builder type Note that you can choose from a variety of builders
h Notice that the Stop running this stage if this job fails is checked by default This means
that any jobs further down the pipeline will not execute and the whole stage will be
marked as failed if a failure occurs
i Click SAVE
6 Add a ldquodeploy to development spacerdquo stage
Now we will add a deployment to the space that represents your development space Some
might call this a quality assurance or test space It is a place where developers can test their
code live in a production quality environment without actually putting it in production
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Dev Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the previous stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default This
will configure your pipeline so that whenever someone pushes code to your projectrsquos
repository the build step will run and if it succeeds a deploy to the development
environment will be kicked off
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Application Name to be a name that is unique to your Bluemix dev space
h By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
20
developers on your team will be able to test their code In the Script section after cf push ldquo$CF_APPrdquo
add -n whateverYouWantYourUrlToBe Note the url needs to be unique across
all Bluemix apps so be creative
i Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
j Next add a command to restage your app with the newly bound services cf restage $CF_APP
k The script section should now look similar to the following cf push $CF_APP -n fbf-lauren-dev
cf bind-service $CF_APP Cloudant-dev
cf bind-service $CF_APP Twilio-dev
cf restage $CF_APP
l Note that if we had automated tests associated with this project we could add a test
job to this stage so that the deploy would run and then tests could be executed against
that deployment
m Click SAVE
7 Add a deploy to production space stage
Now we will add a deployment to the space that represents your production space This space
is where you keep apps that your end users will use
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Prod Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the Build Stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default Since
we donrsquot have any automated tests included in this pipeline automatically deploying to
production is probably not safe Select Run jobs only when this stage is run manually
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Space to be prod
h Update the Application Name to be a name that is unique to your Bluemix prod space
i By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
21
your end users will be able to access your app In the Script section after cf push ldquo$CF_APPrdquo
add -n whateveryouwantyoururltobe Note the url needs to be unique across
all Bluemix apps so be creative
j Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
k Next add a command to restage your app with the newly bound services cf restage $CF_APP
l The script section should now look similar to the following cf push $CF_APP -n fbf-lauren
cf bind-service $CF_APP Cloudant-prod
cf bind-service $CF_APP Twilio-prod
cf restage $CF_APP
m Click SAVE
8 Kick off the pipeline
Now that we have the build pipeline configured itrsquos time to try it out To trigger the pipeline
we could make a change to our projectrsquos code and push the change to our Git repository or we
could manually request a build
a On the Pipeline page click the Play button ( ) in the Build Stage to kick off the first
stage of the pipeline manually
The build pipeline will go through the build and deploy to dev steps If you like what was
deployed to dev you can drag and drop the build from the Build Stage tile to the Prod
Deployment tile to deploy it there
Tweet this
Dove into DevOps by creating a release pipeline for my app [attach a screenshot of the Build amp
Deploy page for your app] Bluemix DevOpsServices
22
Get creative
Make a change to your code and watch the build pipeline automatically deploy it for you
Zero downtime deployments are very important to web applications Design and implement a
strategy to deploy your app to your production space without any downtime Hint check out
this article httpwwwibmcomdeveloperworkscloudlibrarycl-Bluemix-rollingpipeline
Additional resources
DevOps for Dummies ebook httpibmcodevopsfordummies
Top 10 Practices for Effective DevOps httpwwwdrdobbscomarchitecture-and-designtop-
10-practices-for-effective-devops240149363
Cloud Computing Trends 2014 State of the Cloud Survey
httpwwwrightscalecomblogcloud-industry-insightscloud-computing-trends-2014-state-
cloud-survey
DevOps Embracing Cloud Services httpwwwmidsizeinsidercomen-usarticledevops-
embracing-cloud-servicesVJmrScABg
23
Part 2A Live Edit In this part yoursquoll get to use an exciting new feature Live Edit The Live Edit feature allows you to make
changes to your application and have them deployed nearly instantaneously to your deployed app Itrsquos just like
editing files locallyhellipexcept you donrsquot have to set up a development environment
Since the Live Edit feature is currently optimized for Nodejs we will create a new app using the Personality
Insights Nodejs Web Starter boilerplate (what a concise name) The exciting thing about this boilerplate is that
it uses IBM Watson (remember Watson the supercomputer that beat Jeopardy champions a few years ago)
services
In this part you will create a new Bluemix app and leverage the Live Edit feature to see the changes you make
be deployed almost instantly to your running app
Learn this
Live Edit allows you to see changes you make in the DevOps Services Web IDE reflected in real-
time to your app deployed on Bluemix Itrsquos just like editing files locallyhellipexcept you donrsquot have
to set up a development environment
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app Changes you make in Node modules (like JavaScript files)
will require a fast restart of the app in order to be reflected in your deployed app
Try this
1 Sign up for DevOps Services if you have not done so already
a Navigate to httpibmbizcds-bluemix and sign up
b As part of the Bluemix registration process you will receive an e-mail asking you to
confirm your account If you do not confirm you are not registered If you do not
receive a confirmation e-mail send a note to idbluemixnet
c Navigate to httpibmbizcds-ids and register for DevOps Services using the same IBM
id you used for Bluemix
2 Create a Nodejs app using a Bluemix boilerplate
The first thing we need is a Nodejs app One of the fastest ways to get a new app is to use a
Bluemix boilerplate
a Navigate to httpibmbizcds-bluemix
b Log in if you are not already authenticated
c Click CATALOG The Catalog is your place to browse the available boilerplates (sample
applications) runtimes and services
d In the Boilerplates section click Personality Insights Nodejs Web Starter
24
e Input a name for the app (what the app will be referred to in Bluemix) and a host for the
app (the part of the url that will go before mybluemixnet) Note that the host must be
globally unique across all of Bluemix so be creative
f Click CREATE A copy of the boilerplate code will be put in to a new app for you and
then deployed to Bluemix
g Click Overview In the APP HEALTH section wait for the message ldquoYour app is
runningrdquo to be displayed
h When your app is running click on your route (toward the top of the page) to open your
running app
3 Explore the Nodejs app
Now that your app is running letrsquos take a moment to explore it The Personality Insights app
uses the Watson Personality Insights service to analyze text and determine personality traits of
the textrsquos author
a The app includes sample text from Moby Dick Click ANALYZE to learn about the
personality of Moby Dickrsquos author Herman Melville Textual output as well as a
graphical visualization are displayed
b Navigate to one of your favorite websites with English text (keep it office-friendlyhellipso
perhaps choose your favorite news site) and copy a block of text
c Return to your Personality Insights App and paste the text in the Try the Service box
d Click ANALYZE View the textual output as well as the graphical visualization
4 Prepare for Live Edit
Wersquove tested the app and now wersquoll prep to make some changes to it
a Return to the Bluemix page for your Personality Insights app If your app is not in a
separate window or tab right-click on your apprsquos route and choose an option to open
the link in a new window or tab
b Click ADD GIT in the upper-right corner
c Click CONTINUE in the Create Git Repository dialog Bluemix will take a copy of your
apprsquos code and put it in a Git repository hosted at DevOps Services
d Click CLOSE once the Git Repository has been successfully created
e Click EDIT CODE in the upper-right corner to open the DevOps Services Web IDE
f Toggle the Live Edit option to on
g If prompted to redeploy click OK The app will redeploy so changes can be made live to
your deployed app When the app finishes deploying a green dot will be displayed in
the run bar
25
When the app finishes deploying you are ready to make live edits
5 Change a static file
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app
a In the navigator view on the left expand views
b Select layoutjade
c Update the h2 to say something like ldquoThis open lab is so great that Irsquom going to Tweet
about itrdquo
d Switch to your tab or window that has your running app
e Refresh the page
f Note that the heading of your app was changed instantly You didnrsquot have to wait for
the app to redeploy
g Make a few more changes to static files and watch your app update in real time
6 Change a node module
Changes to node modules require a fast app restart (not a full redeploy) in order to be deployed
because the server caches node modules in memory
a Select the root directory of your app in the navigator in the left pane
b Click File gt New gt File
c The name of the file is highlighted so you can rename it Type defaulttexttxt and press
Enter or Return on your keyboard
d In the editor on the right type or paste the text that you want to use as the default text
in the app
e Select the appjs file in the navigator in the left pane
f In the editor on the right look for the dummy_text variable around line 25 Replace
mobydicktxt with defaulttexttxt
g In the web IDEs top bar click the Restart button ( )
h When the app finishes restarting (which only takes a few seconds) a green dot is
displayed in the run bar
26
i Switch to the tab or window that has your running app Refresh the page to see the new
text (If your browser cached the page and you dont see the text update browse to
your apps URL again and the change should be displayed)
Tweet this
Developing in the cloud using Bluemix DevOpsServices is now as fast and easy as developing
locally WhoKnew
Get creative
Create a new look for the Personality Insights app Open the CSS files located in the publiccss
directory and have fun making changes to the files Watch as your changes are deployed live
Additional resources
Everything AND the kitchen sync Bluemix Live Sync is here httpsdeveloperibmcomdevops-
services20150213everything-kitchen-sync-Bluemix-live-sync
Bluemix Live Sync documentation
httpswwwngbluemixnetdocscm_mmc=developerWorks-_-dWdevcenter-_-devops-
services-_-lpmanageappsbluemixlivehtmlbluemixlive
27
Part 2B Bluemix Debug Sometimes staring at the code to figure out whatrsquos going wrong just doesnrsquot work Sometimes you really need
to debug the code or access the environment where the app is running This is where Bluemix Debug comes in
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for your Nodejs
apps
In this part yoursquoll continue on with the Personality Insights Nodejs app you created in part 2A
Learn this
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for
your Nodejs apps
Try this Note The Node Inspector Debugger currently only works in Chrome You may want to take this
opportunity to change browsers if you are not already using Chrome
1 Open the IBM Bluemix Debugger
a Navigate to httpibmbizcds-ids and sign in if you are not already authenticated
b In My Projects locate the tile for your Personality Insights app Click the Edit Code icon
( ) to open the Web IDE for your project
c In the Web IDErsquos top bar click the Debug button ( )
d When prompted for credentials input your IBM id and password
2 Use the shell
The Bluemix Shell allows you to explore and interact with the Bluemix environment where your
app is running by using a built-in bash shell
a On the IBM Bluemix Debugger page for your project click Open Shell A shell client
opens in your browser
b View the processes running in your Bluemix environment by inputting the following
command top
c Click NEW WINDOW
d Drag and drop the new window so that you can continue to observe your processes
while you explore the log files
e In the new window change directory to the log files by inputting the following
command cd logs
28
f View a list of the files in the logs directory by inputting the following command ls
g Notice that staging_tasklog is a file in your logs directory View the last 10 lines of the
log file by inputting the following command tail staging_tasklog
3 Use the Debugger
The Debugger allows you to debug Nodejs apps
a On the IBM Bluemix Debugger page for your project click Open Debugger The
Debugger takes about 30 seconds to load
b If the Navigator is not displayed on the left click the Expand Navigator button
c Select appjs in the Navigator to open the file
d Add a breakpoint on line 48 by clicking 48
e In a different tab or window navigate to your running app
f Click Analyze
g Switch back to the tab or window with your Debugger Notice that the breakpoint has
been hit On the right you can view the Call Stack and Variables You can also use
buttons on the right to step over the next function call step into the next function call
and step out of the next function call
h When you have finished exploring your running app click the Resume script execution
button ( ) on the right
Note that from the IBM Bluemix Debugger page you can choose to suspend the app which will
restart the app and break at the first line of the app
29
Tweet this
Bluemix + DevOpsServices + Shell = a happy developer NoDownloadsRequired [include a
screenshot of the shell in your browser]
Just debugged my Bluemix app by using the debugger in DevOpsServices
NoDownloadsRequired [take a selfie of you in front of your debugger looking very excited]
Get creative
Use some of your favorite commands to explore the Bluemix environment where your app runs
Additional resources
Bluemix Live Sync
httpswwwngBluemixnetdocsmanageappsBluemixlivehtmlBluemixlivedebugger
Learning the Shell httplinuxcommandorglc3_learning_the_shellphp
12
phone number If yoursquore ok with receiving text messages on your phone skip this
section and continue on to step c
i In Twilio click NUMBERS in the top navigation bar
ii Click your phone number in the Number table
iii In the Messaging section replace the Request URL with any valid url (this
prevents a never ending loop of your phone number sending a response to the
text message it just received) For example you might replace the Request URL
with a link to your Laurenrsquos Lovely Landscapes app
iv Click Save
v Click Numbers in the top navigation bar
vi Click Verify a number
vii Click text you instead
viii Input your Twilio phone number in the Phone Number box
ix Click Text Me
x In a new tab or window navigate to twiliocom and click Account
xi Click NUMBERS in the top navigation bar
xii Click your number in the Number table
xiii Click Inbound in the Messaging section
xiv Hover over the text message in the table to see the incoming message Note
the verification number in the text messagersquos body
xv Return to your original tab or window and input the verification number
xvi Click Submit
When you want to view incoming text messages for your Twilio number return to the
details page for your number and click Inbound
c Add the Twilio service to the app
Begin by adding the Bluemix Twilio service to your app
i In DevOps Services click EDIT CODE in the upper-right corner
ii Click the Open application dashboard button ( ) The Bluemix page for your
app opens
iii Click ADD A SERVICE OR API
13
iv Scroll down until you see the Twilio service Hint Check the Mobile section The
catalog is constantly being updated with new services
v Click the Twilio service
vi In the Account SID and Auth Token fields paste your Twilio AccountSID and
AuthToken from your Twilio Account Settings page
vii Click CREATE
viii When prompted restage your application now by clicking RESTAGE
ix Wait for the page to indicate that your app is running
d Add code that uses the Twilio service
Add code to your app that sends a text message whenever a price is retrieved for an
item Use the Twilio service to actually send the text message
i Add Twilio to requirementstxt
Your app needs the Twilio module so you must add it to the requirementstxt
file
1 In the Web IDE open requirementstxt
2 Add a new line to the end of the file and type twilio
3 Select File gt Save
ii Connect to the Twilio service
To effectively use your Twilio service you must connect to it
1 In the Web IDE open the wsgipy file
2 In the Imports section around Line 55 add the following line from twiliorest import TwilioRestClient
3 As part of the for loop that begins around Line 65 add the following
lines
Note Be sure your spacing before these two lines (spaces and tabs) is
identical to the if statement that checks if the key starts with
ldquocloudantrdquo
if decoded_config[key][0][name]startswith(Twilio)
twilio_creds = decoded_config[key][0][credentials]
twilio_authToken = twilio_creds[authToken]
twilio_accountSID = twilio_creds[accountSID]
twilioClient = TwilioRestClient(twilio_accountSID twilio_authToken)
4 Your Twilio credentials are now stored in twilio_creds Your code
should now look like the following listing
14
for key value in decoded_configiteritems()
if decoded_config[key][0][name]startswith(Twilio)
twilio_creds = decoded_config[key][0][credentials]
twilio_authToken = twilio_creds[authToken]
twilio_accountSID = twilio_creds[accountSID]
twilioClient = TwilioRestClient(twilio_accountSID twilio_authToken)
if keystartswith(cloudant)
cloudant_creds = decoded_config[key][0][credentials]
cloudant_host = cloudant_creds[host]
cloudant_port = int(cloudant_creds[port])
cloudant_username = cloudant_creds[username]
cloudant_password = cloudant_creds[password]
cloudant_url = str(cloudant_creds[url])
account = cloudantAccount(cloudant_username)
login = accountlogin(cloudant_username cloudant_password)
assert loginstatus_code == 200
db = accountdatabase(dbname)
response = dbput()
print responsejson
5 Save your changes by selecting File gt Save
e Add code to send the text message
Now comes the fun part Its time to code
Continue to work in the wsgipy file and create a new function around Line 89 that
sends a text message def sendTextWithMessage(message)
message = twilioClientmessagescreate(to=+15555555555 from_=+15555555555
body=message)
f Replace the to number with the cell phone number or Twilio number where you want
the text messages to be sent (dont forget the country code)
g Replace the from number with your Twilio phone number (dont forget the country
code)
h In the getCurrentPrice function inside of the if statement that checks if the
price is not None add the following line of code sendTextWithMessage(The current price of s is s (item[name] price))
i Save your changes by selecting File gt Save
Thats it Youve implemented your feature with only nine lines of code
3 Deploy and test the feature
Now its time to deploy your application to Bluemix so you can test it
a Click the Deploy button ( )
b If prompted if you want to stop and redeploy click OK
c After your application has finished deploying click the Open URL button ( ) in the top
gray bar
d In your app click Get Prices
15
e Check your phone or Twilio number for a text message
If you like update the prices of the items in the store and get the prices again
4 Push the feature to the repository
Now that your feature is tested its time to push your changes to the Git repository
a In the leftmost bar of icons click the Git Repository button ( )
b In the box in the Working Directory Changes section type a comment similar to the
following being sure to replace 20 with the work item ID associated with the work item
you created Changes to implement the text messaging feature as
described in work item 20
c Select each change in the Changed Files section and click the COMMIT button
d In the OUTGOING section click PUSH
e If you are prompted for your committer information enter it and click OK
5 Complete the feature
To indicate that you have finished your feature mark your work item as complete
a In the Web IDE click TRACK amp PLAN in the upper-right corner
b In the right pane find your work item associated with the text messaging feature and
click the Status In Progress icon
c Click Set Done
d In the right pane scroll right until you see the RESOLVED section Notice that your work
item is now marked done
6 Discover the traceability
When you added a comment in your commit that mentioned your work item a link was
automatically created for you between the change and the work item
a In the right pane scroll to the Resolved view if you are not currently viewing your
resolved work items
b Click the textual summary of the work item associated with the text messaging feature
to open it
c In the work item click the Links tab
d In the LINKS section notice that a link was automatically generated for you Click the
link The Git Log displays
e Observe that you have a summary of the git commit and its associated work items
f Click GIT LOG in the left navigation to see a list of all of your git commits
16
Tweet this
Collaborate with me on this Bluemix app I created [insert link to your app] [include a
screenshot of the Web IDE with your codemdashTweets with images are more likely to get noticed]
Get creative
Invite a friend to join your project Navigate to your projects home page click Members and
invite a friend to join
Create new work items for features yoursquod like to implement or defects you find
Implement some of the stories you created or fix the defects you recorded
Additional resources
Twilio SMS and MMS Python Quickstart httpswwwtwiliocomdocsquickstartpythonsms
Managing Distributed Teams
httpswwwscrumallianceorgcommunityarticles2013julymanaging-distributed-
teamsaspx
So Long Scrum Hello Kanban httpsstormpathcomblogso-long-scrum-hello-kanban
17
Part 1D Deploying Automatically Using the Delivery Pipeline
Learn this
Deployment automation is one of the keys to a successful DevOps approach
You can create a complete delivery pipeline with multiple stages automated tests and
automatic deploys using DevOps Services
Try this
You can configure a multi-stage build and deployment pipeline to support your DevOps approach to
software development In this section you will configure a builder a deployment to your
development (dev) space and a deployment to your production (prod) space
1 Create a production space
Organizations and spaces are organizational units in the Cloud Foundry infrastructure that can
be used to store and track application resources An organization contains domains spaces and
users a space contains applications and services By default a dev (development) space is
created for you
a Navigate to the Bluemix dashboard if you are not there already
b Click Create a Space in the left menu
c In the Create a Space dialog input prod as your space name and click CREATE
2 Create services for deployments to your dev space
When deploying to your dev and prod spaces you will likely want to have services dedicated to
those deployments For example you want to use separate databases for each space Wersquoll
begin by creating services for each space
a Navigate to the Bluemix dashboard if you are not there already
b Click CATALOG
c Create the Cloudant NoSQL DB service
i Scroll down until you see the Cloudant NoSQL DB service Hint Check the Data
and Analytics section The catalog is constantly being updated with new
services
ii Click the Cloudant NoSQL DB service
iii In the Space dropdown choose dev
iv In the App dropdown choose Leave unbound
18
v In the Service name box leave the default or change the name to something
you like Be sure the name you choose begins with ldquocloudantrdquo as that is how
the code identifies the service
vi Note the name of your service as you will need it later
vii Click CREATE
d Create the Twilio service
i Navigate to the Catalog if you are not there already
ii Scroll down until you see the Twilio service Hint Check the Mobile section The
catalog is constantly being updated with new services
iii Click the Twilio service
iv In the Space dropdown choose dev
v In the App dropdown choose Leave unbound
vi In the Service name box leave the default or change the name to something
you like Be sure the name you choose begins with ldquotwiliordquo as that is how the
code identifies the service Note the name you choose as you will need it later
vii In the Account SID and Auth Token fields paste your Twilio AccountSID and
AuthToken from your Twilio Account Settings page
viii Click CREATE
3 Create services for deployments to your prod space
Repeat the steps from 2 above to create Cloudant NoSQL DB and Twilio services for
deployments to your prod space Be sure to select ldquoprodrdquo as the Space instead of ldquodevrdquo
4 Enable Advanced Build amp Deploy
You can configure a multi-stage build and deployment pipeline to support your DevOps
approach to software development Note that the pipeline only includes changes that have
been pushed to your projectrsquos repository changes that are in your workspace in the Web IDE
that have not been pushed to your projectrsquos repository will NOT be deployed as part of the
pipeline
a Open the Fabulous Price Finder project you created in the previous section by
navigating to DevOps Services signing in if youre not already authenticated and
clicking on your project on the My Projects page
b Click BUILD amp DEPLOY in the upper-right corner
5 Add a builder stage
The first stage we will create is a builder stage
19
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Build Stage
c Notice that the Input Type is set to SCM Repository by default This means the input for
the stage will be your git repository
d Notice that Run jobs whenever a change is pushed to Git is selected by default This
means that whenever you or someone on your team pushes code to your projectrsquos
repository the build stage will automatically be triggered
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Build
g Since this app does not require compilation (unlike a Java app) we will use the Simple
builder type Note that you can choose from a variety of builders
h Notice that the Stop running this stage if this job fails is checked by default This means
that any jobs further down the pipeline will not execute and the whole stage will be
marked as failed if a failure occurs
i Click SAVE
6 Add a ldquodeploy to development spacerdquo stage
Now we will add a deployment to the space that represents your development space Some
might call this a quality assurance or test space It is a place where developers can test their
code live in a production quality environment without actually putting it in production
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Dev Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the previous stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default This
will configure your pipeline so that whenever someone pushes code to your projectrsquos
repository the build step will run and if it succeeds a deploy to the development
environment will be kicked off
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Application Name to be a name that is unique to your Bluemix dev space
h By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
20
developers on your team will be able to test their code In the Script section after cf push ldquo$CF_APPrdquo
add -n whateverYouWantYourUrlToBe Note the url needs to be unique across
all Bluemix apps so be creative
i Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
j Next add a command to restage your app with the newly bound services cf restage $CF_APP
k The script section should now look similar to the following cf push $CF_APP -n fbf-lauren-dev
cf bind-service $CF_APP Cloudant-dev
cf bind-service $CF_APP Twilio-dev
cf restage $CF_APP
l Note that if we had automated tests associated with this project we could add a test
job to this stage so that the deploy would run and then tests could be executed against
that deployment
m Click SAVE
7 Add a deploy to production space stage
Now we will add a deployment to the space that represents your production space This space
is where you keep apps that your end users will use
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Prod Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the Build Stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default Since
we donrsquot have any automated tests included in this pipeline automatically deploying to
production is probably not safe Select Run jobs only when this stage is run manually
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Space to be prod
h Update the Application Name to be a name that is unique to your Bluemix prod space
i By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
21
your end users will be able to access your app In the Script section after cf push ldquo$CF_APPrdquo
add -n whateveryouwantyoururltobe Note the url needs to be unique across
all Bluemix apps so be creative
j Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
k Next add a command to restage your app with the newly bound services cf restage $CF_APP
l The script section should now look similar to the following cf push $CF_APP -n fbf-lauren
cf bind-service $CF_APP Cloudant-prod
cf bind-service $CF_APP Twilio-prod
cf restage $CF_APP
m Click SAVE
8 Kick off the pipeline
Now that we have the build pipeline configured itrsquos time to try it out To trigger the pipeline
we could make a change to our projectrsquos code and push the change to our Git repository or we
could manually request a build
a On the Pipeline page click the Play button ( ) in the Build Stage to kick off the first
stage of the pipeline manually
The build pipeline will go through the build and deploy to dev steps If you like what was
deployed to dev you can drag and drop the build from the Build Stage tile to the Prod
Deployment tile to deploy it there
Tweet this
Dove into DevOps by creating a release pipeline for my app [attach a screenshot of the Build amp
Deploy page for your app] Bluemix DevOpsServices
22
Get creative
Make a change to your code and watch the build pipeline automatically deploy it for you
Zero downtime deployments are very important to web applications Design and implement a
strategy to deploy your app to your production space without any downtime Hint check out
this article httpwwwibmcomdeveloperworkscloudlibrarycl-Bluemix-rollingpipeline
Additional resources
DevOps for Dummies ebook httpibmcodevopsfordummies
Top 10 Practices for Effective DevOps httpwwwdrdobbscomarchitecture-and-designtop-
10-practices-for-effective-devops240149363
Cloud Computing Trends 2014 State of the Cloud Survey
httpwwwrightscalecomblogcloud-industry-insightscloud-computing-trends-2014-state-
cloud-survey
DevOps Embracing Cloud Services httpwwwmidsizeinsidercomen-usarticledevops-
embracing-cloud-servicesVJmrScABg
23
Part 2A Live Edit In this part yoursquoll get to use an exciting new feature Live Edit The Live Edit feature allows you to make
changes to your application and have them deployed nearly instantaneously to your deployed app Itrsquos just like
editing files locallyhellipexcept you donrsquot have to set up a development environment
Since the Live Edit feature is currently optimized for Nodejs we will create a new app using the Personality
Insights Nodejs Web Starter boilerplate (what a concise name) The exciting thing about this boilerplate is that
it uses IBM Watson (remember Watson the supercomputer that beat Jeopardy champions a few years ago)
services
In this part you will create a new Bluemix app and leverage the Live Edit feature to see the changes you make
be deployed almost instantly to your running app
Learn this
Live Edit allows you to see changes you make in the DevOps Services Web IDE reflected in real-
time to your app deployed on Bluemix Itrsquos just like editing files locallyhellipexcept you donrsquot have
to set up a development environment
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app Changes you make in Node modules (like JavaScript files)
will require a fast restart of the app in order to be reflected in your deployed app
Try this
1 Sign up for DevOps Services if you have not done so already
a Navigate to httpibmbizcds-bluemix and sign up
b As part of the Bluemix registration process you will receive an e-mail asking you to
confirm your account If you do not confirm you are not registered If you do not
receive a confirmation e-mail send a note to idbluemixnet
c Navigate to httpibmbizcds-ids and register for DevOps Services using the same IBM
id you used for Bluemix
2 Create a Nodejs app using a Bluemix boilerplate
The first thing we need is a Nodejs app One of the fastest ways to get a new app is to use a
Bluemix boilerplate
a Navigate to httpibmbizcds-bluemix
b Log in if you are not already authenticated
c Click CATALOG The Catalog is your place to browse the available boilerplates (sample
applications) runtimes and services
d In the Boilerplates section click Personality Insights Nodejs Web Starter
24
e Input a name for the app (what the app will be referred to in Bluemix) and a host for the
app (the part of the url that will go before mybluemixnet) Note that the host must be
globally unique across all of Bluemix so be creative
f Click CREATE A copy of the boilerplate code will be put in to a new app for you and
then deployed to Bluemix
g Click Overview In the APP HEALTH section wait for the message ldquoYour app is
runningrdquo to be displayed
h When your app is running click on your route (toward the top of the page) to open your
running app
3 Explore the Nodejs app
Now that your app is running letrsquos take a moment to explore it The Personality Insights app
uses the Watson Personality Insights service to analyze text and determine personality traits of
the textrsquos author
a The app includes sample text from Moby Dick Click ANALYZE to learn about the
personality of Moby Dickrsquos author Herman Melville Textual output as well as a
graphical visualization are displayed
b Navigate to one of your favorite websites with English text (keep it office-friendlyhellipso
perhaps choose your favorite news site) and copy a block of text
c Return to your Personality Insights App and paste the text in the Try the Service box
d Click ANALYZE View the textual output as well as the graphical visualization
4 Prepare for Live Edit
Wersquove tested the app and now wersquoll prep to make some changes to it
a Return to the Bluemix page for your Personality Insights app If your app is not in a
separate window or tab right-click on your apprsquos route and choose an option to open
the link in a new window or tab
b Click ADD GIT in the upper-right corner
c Click CONTINUE in the Create Git Repository dialog Bluemix will take a copy of your
apprsquos code and put it in a Git repository hosted at DevOps Services
d Click CLOSE once the Git Repository has been successfully created
e Click EDIT CODE in the upper-right corner to open the DevOps Services Web IDE
f Toggle the Live Edit option to on
g If prompted to redeploy click OK The app will redeploy so changes can be made live to
your deployed app When the app finishes deploying a green dot will be displayed in
the run bar
25
When the app finishes deploying you are ready to make live edits
5 Change a static file
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app
a In the navigator view on the left expand views
b Select layoutjade
c Update the h2 to say something like ldquoThis open lab is so great that Irsquom going to Tweet
about itrdquo
d Switch to your tab or window that has your running app
e Refresh the page
f Note that the heading of your app was changed instantly You didnrsquot have to wait for
the app to redeploy
g Make a few more changes to static files and watch your app update in real time
6 Change a node module
Changes to node modules require a fast app restart (not a full redeploy) in order to be deployed
because the server caches node modules in memory
a Select the root directory of your app in the navigator in the left pane
b Click File gt New gt File
c The name of the file is highlighted so you can rename it Type defaulttexttxt and press
Enter or Return on your keyboard
d In the editor on the right type or paste the text that you want to use as the default text
in the app
e Select the appjs file in the navigator in the left pane
f In the editor on the right look for the dummy_text variable around line 25 Replace
mobydicktxt with defaulttexttxt
g In the web IDEs top bar click the Restart button ( )
h When the app finishes restarting (which only takes a few seconds) a green dot is
displayed in the run bar
26
i Switch to the tab or window that has your running app Refresh the page to see the new
text (If your browser cached the page and you dont see the text update browse to
your apps URL again and the change should be displayed)
Tweet this
Developing in the cloud using Bluemix DevOpsServices is now as fast and easy as developing
locally WhoKnew
Get creative
Create a new look for the Personality Insights app Open the CSS files located in the publiccss
directory and have fun making changes to the files Watch as your changes are deployed live
Additional resources
Everything AND the kitchen sync Bluemix Live Sync is here httpsdeveloperibmcomdevops-
services20150213everything-kitchen-sync-Bluemix-live-sync
Bluemix Live Sync documentation
httpswwwngbluemixnetdocscm_mmc=developerWorks-_-dWdevcenter-_-devops-
services-_-lpmanageappsbluemixlivehtmlbluemixlive
27
Part 2B Bluemix Debug Sometimes staring at the code to figure out whatrsquos going wrong just doesnrsquot work Sometimes you really need
to debug the code or access the environment where the app is running This is where Bluemix Debug comes in
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for your Nodejs
apps
In this part yoursquoll continue on with the Personality Insights Nodejs app you created in part 2A
Learn this
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for
your Nodejs apps
Try this Note The Node Inspector Debugger currently only works in Chrome You may want to take this
opportunity to change browsers if you are not already using Chrome
1 Open the IBM Bluemix Debugger
a Navigate to httpibmbizcds-ids and sign in if you are not already authenticated
b In My Projects locate the tile for your Personality Insights app Click the Edit Code icon
( ) to open the Web IDE for your project
c In the Web IDErsquos top bar click the Debug button ( )
d When prompted for credentials input your IBM id and password
2 Use the shell
The Bluemix Shell allows you to explore and interact with the Bluemix environment where your
app is running by using a built-in bash shell
a On the IBM Bluemix Debugger page for your project click Open Shell A shell client
opens in your browser
b View the processes running in your Bluemix environment by inputting the following
command top
c Click NEW WINDOW
d Drag and drop the new window so that you can continue to observe your processes
while you explore the log files
e In the new window change directory to the log files by inputting the following
command cd logs
28
f View a list of the files in the logs directory by inputting the following command ls
g Notice that staging_tasklog is a file in your logs directory View the last 10 lines of the
log file by inputting the following command tail staging_tasklog
3 Use the Debugger
The Debugger allows you to debug Nodejs apps
a On the IBM Bluemix Debugger page for your project click Open Debugger The
Debugger takes about 30 seconds to load
b If the Navigator is not displayed on the left click the Expand Navigator button
c Select appjs in the Navigator to open the file
d Add a breakpoint on line 48 by clicking 48
e In a different tab or window navigate to your running app
f Click Analyze
g Switch back to the tab or window with your Debugger Notice that the breakpoint has
been hit On the right you can view the Call Stack and Variables You can also use
buttons on the right to step over the next function call step into the next function call
and step out of the next function call
h When you have finished exploring your running app click the Resume script execution
button ( ) on the right
Note that from the IBM Bluemix Debugger page you can choose to suspend the app which will
restart the app and break at the first line of the app
29
Tweet this
Bluemix + DevOpsServices + Shell = a happy developer NoDownloadsRequired [include a
screenshot of the shell in your browser]
Just debugged my Bluemix app by using the debugger in DevOpsServices
NoDownloadsRequired [take a selfie of you in front of your debugger looking very excited]
Get creative
Use some of your favorite commands to explore the Bluemix environment where your app runs
Additional resources
Bluemix Live Sync
httpswwwngBluemixnetdocsmanageappsBluemixlivehtmlBluemixlivedebugger
Learning the Shell httplinuxcommandorglc3_learning_the_shellphp
13
iv Scroll down until you see the Twilio service Hint Check the Mobile section The
catalog is constantly being updated with new services
v Click the Twilio service
vi In the Account SID and Auth Token fields paste your Twilio AccountSID and
AuthToken from your Twilio Account Settings page
vii Click CREATE
viii When prompted restage your application now by clicking RESTAGE
ix Wait for the page to indicate that your app is running
d Add code that uses the Twilio service
Add code to your app that sends a text message whenever a price is retrieved for an
item Use the Twilio service to actually send the text message
i Add Twilio to requirementstxt
Your app needs the Twilio module so you must add it to the requirementstxt
file
1 In the Web IDE open requirementstxt
2 Add a new line to the end of the file and type twilio
3 Select File gt Save
ii Connect to the Twilio service
To effectively use your Twilio service you must connect to it
1 In the Web IDE open the wsgipy file
2 In the Imports section around Line 55 add the following line from twiliorest import TwilioRestClient
3 As part of the for loop that begins around Line 65 add the following
lines
Note Be sure your spacing before these two lines (spaces and tabs) is
identical to the if statement that checks if the key starts with
ldquocloudantrdquo
if decoded_config[key][0][name]startswith(Twilio)
twilio_creds = decoded_config[key][0][credentials]
twilio_authToken = twilio_creds[authToken]
twilio_accountSID = twilio_creds[accountSID]
twilioClient = TwilioRestClient(twilio_accountSID twilio_authToken)
4 Your Twilio credentials are now stored in twilio_creds Your code
should now look like the following listing
14
for key value in decoded_configiteritems()
if decoded_config[key][0][name]startswith(Twilio)
twilio_creds = decoded_config[key][0][credentials]
twilio_authToken = twilio_creds[authToken]
twilio_accountSID = twilio_creds[accountSID]
twilioClient = TwilioRestClient(twilio_accountSID twilio_authToken)
if keystartswith(cloudant)
cloudant_creds = decoded_config[key][0][credentials]
cloudant_host = cloudant_creds[host]
cloudant_port = int(cloudant_creds[port])
cloudant_username = cloudant_creds[username]
cloudant_password = cloudant_creds[password]
cloudant_url = str(cloudant_creds[url])
account = cloudantAccount(cloudant_username)
login = accountlogin(cloudant_username cloudant_password)
assert loginstatus_code == 200
db = accountdatabase(dbname)
response = dbput()
print responsejson
5 Save your changes by selecting File gt Save
e Add code to send the text message
Now comes the fun part Its time to code
Continue to work in the wsgipy file and create a new function around Line 89 that
sends a text message def sendTextWithMessage(message)
message = twilioClientmessagescreate(to=+15555555555 from_=+15555555555
body=message)
f Replace the to number with the cell phone number or Twilio number where you want
the text messages to be sent (dont forget the country code)
g Replace the from number with your Twilio phone number (dont forget the country
code)
h In the getCurrentPrice function inside of the if statement that checks if the
price is not None add the following line of code sendTextWithMessage(The current price of s is s (item[name] price))
i Save your changes by selecting File gt Save
Thats it Youve implemented your feature with only nine lines of code
3 Deploy and test the feature
Now its time to deploy your application to Bluemix so you can test it
a Click the Deploy button ( )
b If prompted if you want to stop and redeploy click OK
c After your application has finished deploying click the Open URL button ( ) in the top
gray bar
d In your app click Get Prices
15
e Check your phone or Twilio number for a text message
If you like update the prices of the items in the store and get the prices again
4 Push the feature to the repository
Now that your feature is tested its time to push your changes to the Git repository
a In the leftmost bar of icons click the Git Repository button ( )
b In the box in the Working Directory Changes section type a comment similar to the
following being sure to replace 20 with the work item ID associated with the work item
you created Changes to implement the text messaging feature as
described in work item 20
c Select each change in the Changed Files section and click the COMMIT button
d In the OUTGOING section click PUSH
e If you are prompted for your committer information enter it and click OK
5 Complete the feature
To indicate that you have finished your feature mark your work item as complete
a In the Web IDE click TRACK amp PLAN in the upper-right corner
b In the right pane find your work item associated with the text messaging feature and
click the Status In Progress icon
c Click Set Done
d In the right pane scroll right until you see the RESOLVED section Notice that your work
item is now marked done
6 Discover the traceability
When you added a comment in your commit that mentioned your work item a link was
automatically created for you between the change and the work item
a In the right pane scroll to the Resolved view if you are not currently viewing your
resolved work items
b Click the textual summary of the work item associated with the text messaging feature
to open it
c In the work item click the Links tab
d In the LINKS section notice that a link was automatically generated for you Click the
link The Git Log displays
e Observe that you have a summary of the git commit and its associated work items
f Click GIT LOG in the left navigation to see a list of all of your git commits
16
Tweet this
Collaborate with me on this Bluemix app I created [insert link to your app] [include a
screenshot of the Web IDE with your codemdashTweets with images are more likely to get noticed]
Get creative
Invite a friend to join your project Navigate to your projects home page click Members and
invite a friend to join
Create new work items for features yoursquod like to implement or defects you find
Implement some of the stories you created or fix the defects you recorded
Additional resources
Twilio SMS and MMS Python Quickstart httpswwwtwiliocomdocsquickstartpythonsms
Managing Distributed Teams
httpswwwscrumallianceorgcommunityarticles2013julymanaging-distributed-
teamsaspx
So Long Scrum Hello Kanban httpsstormpathcomblogso-long-scrum-hello-kanban
17
Part 1D Deploying Automatically Using the Delivery Pipeline
Learn this
Deployment automation is one of the keys to a successful DevOps approach
You can create a complete delivery pipeline with multiple stages automated tests and
automatic deploys using DevOps Services
Try this
You can configure a multi-stage build and deployment pipeline to support your DevOps approach to
software development In this section you will configure a builder a deployment to your
development (dev) space and a deployment to your production (prod) space
1 Create a production space
Organizations and spaces are organizational units in the Cloud Foundry infrastructure that can
be used to store and track application resources An organization contains domains spaces and
users a space contains applications and services By default a dev (development) space is
created for you
a Navigate to the Bluemix dashboard if you are not there already
b Click Create a Space in the left menu
c In the Create a Space dialog input prod as your space name and click CREATE
2 Create services for deployments to your dev space
When deploying to your dev and prod spaces you will likely want to have services dedicated to
those deployments For example you want to use separate databases for each space Wersquoll
begin by creating services for each space
a Navigate to the Bluemix dashboard if you are not there already
b Click CATALOG
c Create the Cloudant NoSQL DB service
i Scroll down until you see the Cloudant NoSQL DB service Hint Check the Data
and Analytics section The catalog is constantly being updated with new
services
ii Click the Cloudant NoSQL DB service
iii In the Space dropdown choose dev
iv In the App dropdown choose Leave unbound
18
v In the Service name box leave the default or change the name to something
you like Be sure the name you choose begins with ldquocloudantrdquo as that is how
the code identifies the service
vi Note the name of your service as you will need it later
vii Click CREATE
d Create the Twilio service
i Navigate to the Catalog if you are not there already
ii Scroll down until you see the Twilio service Hint Check the Mobile section The
catalog is constantly being updated with new services
iii Click the Twilio service
iv In the Space dropdown choose dev
v In the App dropdown choose Leave unbound
vi In the Service name box leave the default or change the name to something
you like Be sure the name you choose begins with ldquotwiliordquo as that is how the
code identifies the service Note the name you choose as you will need it later
vii In the Account SID and Auth Token fields paste your Twilio AccountSID and
AuthToken from your Twilio Account Settings page
viii Click CREATE
3 Create services for deployments to your prod space
Repeat the steps from 2 above to create Cloudant NoSQL DB and Twilio services for
deployments to your prod space Be sure to select ldquoprodrdquo as the Space instead of ldquodevrdquo
4 Enable Advanced Build amp Deploy
You can configure a multi-stage build and deployment pipeline to support your DevOps
approach to software development Note that the pipeline only includes changes that have
been pushed to your projectrsquos repository changes that are in your workspace in the Web IDE
that have not been pushed to your projectrsquos repository will NOT be deployed as part of the
pipeline
a Open the Fabulous Price Finder project you created in the previous section by
navigating to DevOps Services signing in if youre not already authenticated and
clicking on your project on the My Projects page
b Click BUILD amp DEPLOY in the upper-right corner
5 Add a builder stage
The first stage we will create is a builder stage
19
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Build Stage
c Notice that the Input Type is set to SCM Repository by default This means the input for
the stage will be your git repository
d Notice that Run jobs whenever a change is pushed to Git is selected by default This
means that whenever you or someone on your team pushes code to your projectrsquos
repository the build stage will automatically be triggered
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Build
g Since this app does not require compilation (unlike a Java app) we will use the Simple
builder type Note that you can choose from a variety of builders
h Notice that the Stop running this stage if this job fails is checked by default This means
that any jobs further down the pipeline will not execute and the whole stage will be
marked as failed if a failure occurs
i Click SAVE
6 Add a ldquodeploy to development spacerdquo stage
Now we will add a deployment to the space that represents your development space Some
might call this a quality assurance or test space It is a place where developers can test their
code live in a production quality environment without actually putting it in production
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Dev Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the previous stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default This
will configure your pipeline so that whenever someone pushes code to your projectrsquos
repository the build step will run and if it succeeds a deploy to the development
environment will be kicked off
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Application Name to be a name that is unique to your Bluemix dev space
h By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
20
developers on your team will be able to test their code In the Script section after cf push ldquo$CF_APPrdquo
add -n whateverYouWantYourUrlToBe Note the url needs to be unique across
all Bluemix apps so be creative
i Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
j Next add a command to restage your app with the newly bound services cf restage $CF_APP
k The script section should now look similar to the following cf push $CF_APP -n fbf-lauren-dev
cf bind-service $CF_APP Cloudant-dev
cf bind-service $CF_APP Twilio-dev
cf restage $CF_APP
l Note that if we had automated tests associated with this project we could add a test
job to this stage so that the deploy would run and then tests could be executed against
that deployment
m Click SAVE
7 Add a deploy to production space stage
Now we will add a deployment to the space that represents your production space This space
is where you keep apps that your end users will use
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Prod Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the Build Stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default Since
we donrsquot have any automated tests included in this pipeline automatically deploying to
production is probably not safe Select Run jobs only when this stage is run manually
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Space to be prod
h Update the Application Name to be a name that is unique to your Bluemix prod space
i By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
21
your end users will be able to access your app In the Script section after cf push ldquo$CF_APPrdquo
add -n whateveryouwantyoururltobe Note the url needs to be unique across
all Bluemix apps so be creative
j Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
k Next add a command to restage your app with the newly bound services cf restage $CF_APP
l The script section should now look similar to the following cf push $CF_APP -n fbf-lauren
cf bind-service $CF_APP Cloudant-prod
cf bind-service $CF_APP Twilio-prod
cf restage $CF_APP
m Click SAVE
8 Kick off the pipeline
Now that we have the build pipeline configured itrsquos time to try it out To trigger the pipeline
we could make a change to our projectrsquos code and push the change to our Git repository or we
could manually request a build
a On the Pipeline page click the Play button ( ) in the Build Stage to kick off the first
stage of the pipeline manually
The build pipeline will go through the build and deploy to dev steps If you like what was
deployed to dev you can drag and drop the build from the Build Stage tile to the Prod
Deployment tile to deploy it there
Tweet this
Dove into DevOps by creating a release pipeline for my app [attach a screenshot of the Build amp
Deploy page for your app] Bluemix DevOpsServices
22
Get creative
Make a change to your code and watch the build pipeline automatically deploy it for you
Zero downtime deployments are very important to web applications Design and implement a
strategy to deploy your app to your production space without any downtime Hint check out
this article httpwwwibmcomdeveloperworkscloudlibrarycl-Bluemix-rollingpipeline
Additional resources
DevOps for Dummies ebook httpibmcodevopsfordummies
Top 10 Practices for Effective DevOps httpwwwdrdobbscomarchitecture-and-designtop-
10-practices-for-effective-devops240149363
Cloud Computing Trends 2014 State of the Cloud Survey
httpwwwrightscalecomblogcloud-industry-insightscloud-computing-trends-2014-state-
cloud-survey
DevOps Embracing Cloud Services httpwwwmidsizeinsidercomen-usarticledevops-
embracing-cloud-servicesVJmrScABg
23
Part 2A Live Edit In this part yoursquoll get to use an exciting new feature Live Edit The Live Edit feature allows you to make
changes to your application and have them deployed nearly instantaneously to your deployed app Itrsquos just like
editing files locallyhellipexcept you donrsquot have to set up a development environment
Since the Live Edit feature is currently optimized for Nodejs we will create a new app using the Personality
Insights Nodejs Web Starter boilerplate (what a concise name) The exciting thing about this boilerplate is that
it uses IBM Watson (remember Watson the supercomputer that beat Jeopardy champions a few years ago)
services
In this part you will create a new Bluemix app and leverage the Live Edit feature to see the changes you make
be deployed almost instantly to your running app
Learn this
Live Edit allows you to see changes you make in the DevOps Services Web IDE reflected in real-
time to your app deployed on Bluemix Itrsquos just like editing files locallyhellipexcept you donrsquot have
to set up a development environment
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app Changes you make in Node modules (like JavaScript files)
will require a fast restart of the app in order to be reflected in your deployed app
Try this
1 Sign up for DevOps Services if you have not done so already
a Navigate to httpibmbizcds-bluemix and sign up
b As part of the Bluemix registration process you will receive an e-mail asking you to
confirm your account If you do not confirm you are not registered If you do not
receive a confirmation e-mail send a note to idbluemixnet
c Navigate to httpibmbizcds-ids and register for DevOps Services using the same IBM
id you used for Bluemix
2 Create a Nodejs app using a Bluemix boilerplate
The first thing we need is a Nodejs app One of the fastest ways to get a new app is to use a
Bluemix boilerplate
a Navigate to httpibmbizcds-bluemix
b Log in if you are not already authenticated
c Click CATALOG The Catalog is your place to browse the available boilerplates (sample
applications) runtimes and services
d In the Boilerplates section click Personality Insights Nodejs Web Starter
24
e Input a name for the app (what the app will be referred to in Bluemix) and a host for the
app (the part of the url that will go before mybluemixnet) Note that the host must be
globally unique across all of Bluemix so be creative
f Click CREATE A copy of the boilerplate code will be put in to a new app for you and
then deployed to Bluemix
g Click Overview In the APP HEALTH section wait for the message ldquoYour app is
runningrdquo to be displayed
h When your app is running click on your route (toward the top of the page) to open your
running app
3 Explore the Nodejs app
Now that your app is running letrsquos take a moment to explore it The Personality Insights app
uses the Watson Personality Insights service to analyze text and determine personality traits of
the textrsquos author
a The app includes sample text from Moby Dick Click ANALYZE to learn about the
personality of Moby Dickrsquos author Herman Melville Textual output as well as a
graphical visualization are displayed
b Navigate to one of your favorite websites with English text (keep it office-friendlyhellipso
perhaps choose your favorite news site) and copy a block of text
c Return to your Personality Insights App and paste the text in the Try the Service box
d Click ANALYZE View the textual output as well as the graphical visualization
4 Prepare for Live Edit
Wersquove tested the app and now wersquoll prep to make some changes to it
a Return to the Bluemix page for your Personality Insights app If your app is not in a
separate window or tab right-click on your apprsquos route and choose an option to open
the link in a new window or tab
b Click ADD GIT in the upper-right corner
c Click CONTINUE in the Create Git Repository dialog Bluemix will take a copy of your
apprsquos code and put it in a Git repository hosted at DevOps Services
d Click CLOSE once the Git Repository has been successfully created
e Click EDIT CODE in the upper-right corner to open the DevOps Services Web IDE
f Toggle the Live Edit option to on
g If prompted to redeploy click OK The app will redeploy so changes can be made live to
your deployed app When the app finishes deploying a green dot will be displayed in
the run bar
25
When the app finishes deploying you are ready to make live edits
5 Change a static file
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app
a In the navigator view on the left expand views
b Select layoutjade
c Update the h2 to say something like ldquoThis open lab is so great that Irsquom going to Tweet
about itrdquo
d Switch to your tab or window that has your running app
e Refresh the page
f Note that the heading of your app was changed instantly You didnrsquot have to wait for
the app to redeploy
g Make a few more changes to static files and watch your app update in real time
6 Change a node module
Changes to node modules require a fast app restart (not a full redeploy) in order to be deployed
because the server caches node modules in memory
a Select the root directory of your app in the navigator in the left pane
b Click File gt New gt File
c The name of the file is highlighted so you can rename it Type defaulttexttxt and press
Enter or Return on your keyboard
d In the editor on the right type or paste the text that you want to use as the default text
in the app
e Select the appjs file in the navigator in the left pane
f In the editor on the right look for the dummy_text variable around line 25 Replace
mobydicktxt with defaulttexttxt
g In the web IDEs top bar click the Restart button ( )
h When the app finishes restarting (which only takes a few seconds) a green dot is
displayed in the run bar
26
i Switch to the tab or window that has your running app Refresh the page to see the new
text (If your browser cached the page and you dont see the text update browse to
your apps URL again and the change should be displayed)
Tweet this
Developing in the cloud using Bluemix DevOpsServices is now as fast and easy as developing
locally WhoKnew
Get creative
Create a new look for the Personality Insights app Open the CSS files located in the publiccss
directory and have fun making changes to the files Watch as your changes are deployed live
Additional resources
Everything AND the kitchen sync Bluemix Live Sync is here httpsdeveloperibmcomdevops-
services20150213everything-kitchen-sync-Bluemix-live-sync
Bluemix Live Sync documentation
httpswwwngbluemixnetdocscm_mmc=developerWorks-_-dWdevcenter-_-devops-
services-_-lpmanageappsbluemixlivehtmlbluemixlive
27
Part 2B Bluemix Debug Sometimes staring at the code to figure out whatrsquos going wrong just doesnrsquot work Sometimes you really need
to debug the code or access the environment where the app is running This is where Bluemix Debug comes in
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for your Nodejs
apps
In this part yoursquoll continue on with the Personality Insights Nodejs app you created in part 2A
Learn this
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for
your Nodejs apps
Try this Note The Node Inspector Debugger currently only works in Chrome You may want to take this
opportunity to change browsers if you are not already using Chrome
1 Open the IBM Bluemix Debugger
a Navigate to httpibmbizcds-ids and sign in if you are not already authenticated
b In My Projects locate the tile for your Personality Insights app Click the Edit Code icon
( ) to open the Web IDE for your project
c In the Web IDErsquos top bar click the Debug button ( )
d When prompted for credentials input your IBM id and password
2 Use the shell
The Bluemix Shell allows you to explore and interact with the Bluemix environment where your
app is running by using a built-in bash shell
a On the IBM Bluemix Debugger page for your project click Open Shell A shell client
opens in your browser
b View the processes running in your Bluemix environment by inputting the following
command top
c Click NEW WINDOW
d Drag and drop the new window so that you can continue to observe your processes
while you explore the log files
e In the new window change directory to the log files by inputting the following
command cd logs
28
f View a list of the files in the logs directory by inputting the following command ls
g Notice that staging_tasklog is a file in your logs directory View the last 10 lines of the
log file by inputting the following command tail staging_tasklog
3 Use the Debugger
The Debugger allows you to debug Nodejs apps
a On the IBM Bluemix Debugger page for your project click Open Debugger The
Debugger takes about 30 seconds to load
b If the Navigator is not displayed on the left click the Expand Navigator button
c Select appjs in the Navigator to open the file
d Add a breakpoint on line 48 by clicking 48
e In a different tab or window navigate to your running app
f Click Analyze
g Switch back to the tab or window with your Debugger Notice that the breakpoint has
been hit On the right you can view the Call Stack and Variables You can also use
buttons on the right to step over the next function call step into the next function call
and step out of the next function call
h When you have finished exploring your running app click the Resume script execution
button ( ) on the right
Note that from the IBM Bluemix Debugger page you can choose to suspend the app which will
restart the app and break at the first line of the app
29
Tweet this
Bluemix + DevOpsServices + Shell = a happy developer NoDownloadsRequired [include a
screenshot of the shell in your browser]
Just debugged my Bluemix app by using the debugger in DevOpsServices
NoDownloadsRequired [take a selfie of you in front of your debugger looking very excited]
Get creative
Use some of your favorite commands to explore the Bluemix environment where your app runs
Additional resources
Bluemix Live Sync
httpswwwngBluemixnetdocsmanageappsBluemixlivehtmlBluemixlivedebugger
Learning the Shell httplinuxcommandorglc3_learning_the_shellphp
14
for key value in decoded_configiteritems()
if decoded_config[key][0][name]startswith(Twilio)
twilio_creds = decoded_config[key][0][credentials]
twilio_authToken = twilio_creds[authToken]
twilio_accountSID = twilio_creds[accountSID]
twilioClient = TwilioRestClient(twilio_accountSID twilio_authToken)
if keystartswith(cloudant)
cloudant_creds = decoded_config[key][0][credentials]
cloudant_host = cloudant_creds[host]
cloudant_port = int(cloudant_creds[port])
cloudant_username = cloudant_creds[username]
cloudant_password = cloudant_creds[password]
cloudant_url = str(cloudant_creds[url])
account = cloudantAccount(cloudant_username)
login = accountlogin(cloudant_username cloudant_password)
assert loginstatus_code == 200
db = accountdatabase(dbname)
response = dbput()
print responsejson
5 Save your changes by selecting File gt Save
e Add code to send the text message
Now comes the fun part Its time to code
Continue to work in the wsgipy file and create a new function around Line 89 that
sends a text message def sendTextWithMessage(message)
message = twilioClientmessagescreate(to=+15555555555 from_=+15555555555
body=message)
f Replace the to number with the cell phone number or Twilio number where you want
the text messages to be sent (dont forget the country code)
g Replace the from number with your Twilio phone number (dont forget the country
code)
h In the getCurrentPrice function inside of the if statement that checks if the
price is not None add the following line of code sendTextWithMessage(The current price of s is s (item[name] price))
i Save your changes by selecting File gt Save
Thats it Youve implemented your feature with only nine lines of code
3 Deploy and test the feature
Now its time to deploy your application to Bluemix so you can test it
a Click the Deploy button ( )
b If prompted if you want to stop and redeploy click OK
c After your application has finished deploying click the Open URL button ( ) in the top
gray bar
d In your app click Get Prices
15
e Check your phone or Twilio number for a text message
If you like update the prices of the items in the store and get the prices again
4 Push the feature to the repository
Now that your feature is tested its time to push your changes to the Git repository
a In the leftmost bar of icons click the Git Repository button ( )
b In the box in the Working Directory Changes section type a comment similar to the
following being sure to replace 20 with the work item ID associated with the work item
you created Changes to implement the text messaging feature as
described in work item 20
c Select each change in the Changed Files section and click the COMMIT button
d In the OUTGOING section click PUSH
e If you are prompted for your committer information enter it and click OK
5 Complete the feature
To indicate that you have finished your feature mark your work item as complete
a In the Web IDE click TRACK amp PLAN in the upper-right corner
b In the right pane find your work item associated with the text messaging feature and
click the Status In Progress icon
c Click Set Done
d In the right pane scroll right until you see the RESOLVED section Notice that your work
item is now marked done
6 Discover the traceability
When you added a comment in your commit that mentioned your work item a link was
automatically created for you between the change and the work item
a In the right pane scroll to the Resolved view if you are not currently viewing your
resolved work items
b Click the textual summary of the work item associated with the text messaging feature
to open it
c In the work item click the Links tab
d In the LINKS section notice that a link was automatically generated for you Click the
link The Git Log displays
e Observe that you have a summary of the git commit and its associated work items
f Click GIT LOG in the left navigation to see a list of all of your git commits
16
Tweet this
Collaborate with me on this Bluemix app I created [insert link to your app] [include a
screenshot of the Web IDE with your codemdashTweets with images are more likely to get noticed]
Get creative
Invite a friend to join your project Navigate to your projects home page click Members and
invite a friend to join
Create new work items for features yoursquod like to implement or defects you find
Implement some of the stories you created or fix the defects you recorded
Additional resources
Twilio SMS and MMS Python Quickstart httpswwwtwiliocomdocsquickstartpythonsms
Managing Distributed Teams
httpswwwscrumallianceorgcommunityarticles2013julymanaging-distributed-
teamsaspx
So Long Scrum Hello Kanban httpsstormpathcomblogso-long-scrum-hello-kanban
17
Part 1D Deploying Automatically Using the Delivery Pipeline
Learn this
Deployment automation is one of the keys to a successful DevOps approach
You can create a complete delivery pipeline with multiple stages automated tests and
automatic deploys using DevOps Services
Try this
You can configure a multi-stage build and deployment pipeline to support your DevOps approach to
software development In this section you will configure a builder a deployment to your
development (dev) space and a deployment to your production (prod) space
1 Create a production space
Organizations and spaces are organizational units in the Cloud Foundry infrastructure that can
be used to store and track application resources An organization contains domains spaces and
users a space contains applications and services By default a dev (development) space is
created for you
a Navigate to the Bluemix dashboard if you are not there already
b Click Create a Space in the left menu
c In the Create a Space dialog input prod as your space name and click CREATE
2 Create services for deployments to your dev space
When deploying to your dev and prod spaces you will likely want to have services dedicated to
those deployments For example you want to use separate databases for each space Wersquoll
begin by creating services for each space
a Navigate to the Bluemix dashboard if you are not there already
b Click CATALOG
c Create the Cloudant NoSQL DB service
i Scroll down until you see the Cloudant NoSQL DB service Hint Check the Data
and Analytics section The catalog is constantly being updated with new
services
ii Click the Cloudant NoSQL DB service
iii In the Space dropdown choose dev
iv In the App dropdown choose Leave unbound
18
v In the Service name box leave the default or change the name to something
you like Be sure the name you choose begins with ldquocloudantrdquo as that is how
the code identifies the service
vi Note the name of your service as you will need it later
vii Click CREATE
d Create the Twilio service
i Navigate to the Catalog if you are not there already
ii Scroll down until you see the Twilio service Hint Check the Mobile section The
catalog is constantly being updated with new services
iii Click the Twilio service
iv In the Space dropdown choose dev
v In the App dropdown choose Leave unbound
vi In the Service name box leave the default or change the name to something
you like Be sure the name you choose begins with ldquotwiliordquo as that is how the
code identifies the service Note the name you choose as you will need it later
vii In the Account SID and Auth Token fields paste your Twilio AccountSID and
AuthToken from your Twilio Account Settings page
viii Click CREATE
3 Create services for deployments to your prod space
Repeat the steps from 2 above to create Cloudant NoSQL DB and Twilio services for
deployments to your prod space Be sure to select ldquoprodrdquo as the Space instead of ldquodevrdquo
4 Enable Advanced Build amp Deploy
You can configure a multi-stage build and deployment pipeline to support your DevOps
approach to software development Note that the pipeline only includes changes that have
been pushed to your projectrsquos repository changes that are in your workspace in the Web IDE
that have not been pushed to your projectrsquos repository will NOT be deployed as part of the
pipeline
a Open the Fabulous Price Finder project you created in the previous section by
navigating to DevOps Services signing in if youre not already authenticated and
clicking on your project on the My Projects page
b Click BUILD amp DEPLOY in the upper-right corner
5 Add a builder stage
The first stage we will create is a builder stage
19
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Build Stage
c Notice that the Input Type is set to SCM Repository by default This means the input for
the stage will be your git repository
d Notice that Run jobs whenever a change is pushed to Git is selected by default This
means that whenever you or someone on your team pushes code to your projectrsquos
repository the build stage will automatically be triggered
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Build
g Since this app does not require compilation (unlike a Java app) we will use the Simple
builder type Note that you can choose from a variety of builders
h Notice that the Stop running this stage if this job fails is checked by default This means
that any jobs further down the pipeline will not execute and the whole stage will be
marked as failed if a failure occurs
i Click SAVE
6 Add a ldquodeploy to development spacerdquo stage
Now we will add a deployment to the space that represents your development space Some
might call this a quality assurance or test space It is a place where developers can test their
code live in a production quality environment without actually putting it in production
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Dev Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the previous stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default This
will configure your pipeline so that whenever someone pushes code to your projectrsquos
repository the build step will run and if it succeeds a deploy to the development
environment will be kicked off
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Application Name to be a name that is unique to your Bluemix dev space
h By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
20
developers on your team will be able to test their code In the Script section after cf push ldquo$CF_APPrdquo
add -n whateverYouWantYourUrlToBe Note the url needs to be unique across
all Bluemix apps so be creative
i Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
j Next add a command to restage your app with the newly bound services cf restage $CF_APP
k The script section should now look similar to the following cf push $CF_APP -n fbf-lauren-dev
cf bind-service $CF_APP Cloudant-dev
cf bind-service $CF_APP Twilio-dev
cf restage $CF_APP
l Note that if we had automated tests associated with this project we could add a test
job to this stage so that the deploy would run and then tests could be executed against
that deployment
m Click SAVE
7 Add a deploy to production space stage
Now we will add a deployment to the space that represents your production space This space
is where you keep apps that your end users will use
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Prod Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the Build Stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default Since
we donrsquot have any automated tests included in this pipeline automatically deploying to
production is probably not safe Select Run jobs only when this stage is run manually
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Space to be prod
h Update the Application Name to be a name that is unique to your Bluemix prod space
i By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
21
your end users will be able to access your app In the Script section after cf push ldquo$CF_APPrdquo
add -n whateveryouwantyoururltobe Note the url needs to be unique across
all Bluemix apps so be creative
j Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
k Next add a command to restage your app with the newly bound services cf restage $CF_APP
l The script section should now look similar to the following cf push $CF_APP -n fbf-lauren
cf bind-service $CF_APP Cloudant-prod
cf bind-service $CF_APP Twilio-prod
cf restage $CF_APP
m Click SAVE
8 Kick off the pipeline
Now that we have the build pipeline configured itrsquos time to try it out To trigger the pipeline
we could make a change to our projectrsquos code and push the change to our Git repository or we
could manually request a build
a On the Pipeline page click the Play button ( ) in the Build Stage to kick off the first
stage of the pipeline manually
The build pipeline will go through the build and deploy to dev steps If you like what was
deployed to dev you can drag and drop the build from the Build Stage tile to the Prod
Deployment tile to deploy it there
Tweet this
Dove into DevOps by creating a release pipeline for my app [attach a screenshot of the Build amp
Deploy page for your app] Bluemix DevOpsServices
22
Get creative
Make a change to your code and watch the build pipeline automatically deploy it for you
Zero downtime deployments are very important to web applications Design and implement a
strategy to deploy your app to your production space without any downtime Hint check out
this article httpwwwibmcomdeveloperworkscloudlibrarycl-Bluemix-rollingpipeline
Additional resources
DevOps for Dummies ebook httpibmcodevopsfordummies
Top 10 Practices for Effective DevOps httpwwwdrdobbscomarchitecture-and-designtop-
10-practices-for-effective-devops240149363
Cloud Computing Trends 2014 State of the Cloud Survey
httpwwwrightscalecomblogcloud-industry-insightscloud-computing-trends-2014-state-
cloud-survey
DevOps Embracing Cloud Services httpwwwmidsizeinsidercomen-usarticledevops-
embracing-cloud-servicesVJmrScABg
23
Part 2A Live Edit In this part yoursquoll get to use an exciting new feature Live Edit The Live Edit feature allows you to make
changes to your application and have them deployed nearly instantaneously to your deployed app Itrsquos just like
editing files locallyhellipexcept you donrsquot have to set up a development environment
Since the Live Edit feature is currently optimized for Nodejs we will create a new app using the Personality
Insights Nodejs Web Starter boilerplate (what a concise name) The exciting thing about this boilerplate is that
it uses IBM Watson (remember Watson the supercomputer that beat Jeopardy champions a few years ago)
services
In this part you will create a new Bluemix app and leverage the Live Edit feature to see the changes you make
be deployed almost instantly to your running app
Learn this
Live Edit allows you to see changes you make in the DevOps Services Web IDE reflected in real-
time to your app deployed on Bluemix Itrsquos just like editing files locallyhellipexcept you donrsquot have
to set up a development environment
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app Changes you make in Node modules (like JavaScript files)
will require a fast restart of the app in order to be reflected in your deployed app
Try this
1 Sign up for DevOps Services if you have not done so already
a Navigate to httpibmbizcds-bluemix and sign up
b As part of the Bluemix registration process you will receive an e-mail asking you to
confirm your account If you do not confirm you are not registered If you do not
receive a confirmation e-mail send a note to idbluemixnet
c Navigate to httpibmbizcds-ids and register for DevOps Services using the same IBM
id you used for Bluemix
2 Create a Nodejs app using a Bluemix boilerplate
The first thing we need is a Nodejs app One of the fastest ways to get a new app is to use a
Bluemix boilerplate
a Navigate to httpibmbizcds-bluemix
b Log in if you are not already authenticated
c Click CATALOG The Catalog is your place to browse the available boilerplates (sample
applications) runtimes and services
d In the Boilerplates section click Personality Insights Nodejs Web Starter
24
e Input a name for the app (what the app will be referred to in Bluemix) and a host for the
app (the part of the url that will go before mybluemixnet) Note that the host must be
globally unique across all of Bluemix so be creative
f Click CREATE A copy of the boilerplate code will be put in to a new app for you and
then deployed to Bluemix
g Click Overview In the APP HEALTH section wait for the message ldquoYour app is
runningrdquo to be displayed
h When your app is running click on your route (toward the top of the page) to open your
running app
3 Explore the Nodejs app
Now that your app is running letrsquos take a moment to explore it The Personality Insights app
uses the Watson Personality Insights service to analyze text and determine personality traits of
the textrsquos author
a The app includes sample text from Moby Dick Click ANALYZE to learn about the
personality of Moby Dickrsquos author Herman Melville Textual output as well as a
graphical visualization are displayed
b Navigate to one of your favorite websites with English text (keep it office-friendlyhellipso
perhaps choose your favorite news site) and copy a block of text
c Return to your Personality Insights App and paste the text in the Try the Service box
d Click ANALYZE View the textual output as well as the graphical visualization
4 Prepare for Live Edit
Wersquove tested the app and now wersquoll prep to make some changes to it
a Return to the Bluemix page for your Personality Insights app If your app is not in a
separate window or tab right-click on your apprsquos route and choose an option to open
the link in a new window or tab
b Click ADD GIT in the upper-right corner
c Click CONTINUE in the Create Git Repository dialog Bluemix will take a copy of your
apprsquos code and put it in a Git repository hosted at DevOps Services
d Click CLOSE once the Git Repository has been successfully created
e Click EDIT CODE in the upper-right corner to open the DevOps Services Web IDE
f Toggle the Live Edit option to on
g If prompted to redeploy click OK The app will redeploy so changes can be made live to
your deployed app When the app finishes deploying a green dot will be displayed in
the run bar
25
When the app finishes deploying you are ready to make live edits
5 Change a static file
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app
a In the navigator view on the left expand views
b Select layoutjade
c Update the h2 to say something like ldquoThis open lab is so great that Irsquom going to Tweet
about itrdquo
d Switch to your tab or window that has your running app
e Refresh the page
f Note that the heading of your app was changed instantly You didnrsquot have to wait for
the app to redeploy
g Make a few more changes to static files and watch your app update in real time
6 Change a node module
Changes to node modules require a fast app restart (not a full redeploy) in order to be deployed
because the server caches node modules in memory
a Select the root directory of your app in the navigator in the left pane
b Click File gt New gt File
c The name of the file is highlighted so you can rename it Type defaulttexttxt and press
Enter or Return on your keyboard
d In the editor on the right type or paste the text that you want to use as the default text
in the app
e Select the appjs file in the navigator in the left pane
f In the editor on the right look for the dummy_text variable around line 25 Replace
mobydicktxt with defaulttexttxt
g In the web IDEs top bar click the Restart button ( )
h When the app finishes restarting (which only takes a few seconds) a green dot is
displayed in the run bar
26
i Switch to the tab or window that has your running app Refresh the page to see the new
text (If your browser cached the page and you dont see the text update browse to
your apps URL again and the change should be displayed)
Tweet this
Developing in the cloud using Bluemix DevOpsServices is now as fast and easy as developing
locally WhoKnew
Get creative
Create a new look for the Personality Insights app Open the CSS files located in the publiccss
directory and have fun making changes to the files Watch as your changes are deployed live
Additional resources
Everything AND the kitchen sync Bluemix Live Sync is here httpsdeveloperibmcomdevops-
services20150213everything-kitchen-sync-Bluemix-live-sync
Bluemix Live Sync documentation
httpswwwngbluemixnetdocscm_mmc=developerWorks-_-dWdevcenter-_-devops-
services-_-lpmanageappsbluemixlivehtmlbluemixlive
27
Part 2B Bluemix Debug Sometimes staring at the code to figure out whatrsquos going wrong just doesnrsquot work Sometimes you really need
to debug the code or access the environment where the app is running This is where Bluemix Debug comes in
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for your Nodejs
apps
In this part yoursquoll continue on with the Personality Insights Nodejs app you created in part 2A
Learn this
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for
your Nodejs apps
Try this Note The Node Inspector Debugger currently only works in Chrome You may want to take this
opportunity to change browsers if you are not already using Chrome
1 Open the IBM Bluemix Debugger
a Navigate to httpibmbizcds-ids and sign in if you are not already authenticated
b In My Projects locate the tile for your Personality Insights app Click the Edit Code icon
( ) to open the Web IDE for your project
c In the Web IDErsquos top bar click the Debug button ( )
d When prompted for credentials input your IBM id and password
2 Use the shell
The Bluemix Shell allows you to explore and interact with the Bluemix environment where your
app is running by using a built-in bash shell
a On the IBM Bluemix Debugger page for your project click Open Shell A shell client
opens in your browser
b View the processes running in your Bluemix environment by inputting the following
command top
c Click NEW WINDOW
d Drag and drop the new window so that you can continue to observe your processes
while you explore the log files
e In the new window change directory to the log files by inputting the following
command cd logs
28
f View a list of the files in the logs directory by inputting the following command ls
g Notice that staging_tasklog is a file in your logs directory View the last 10 lines of the
log file by inputting the following command tail staging_tasklog
3 Use the Debugger
The Debugger allows you to debug Nodejs apps
a On the IBM Bluemix Debugger page for your project click Open Debugger The
Debugger takes about 30 seconds to load
b If the Navigator is not displayed on the left click the Expand Navigator button
c Select appjs in the Navigator to open the file
d Add a breakpoint on line 48 by clicking 48
e In a different tab or window navigate to your running app
f Click Analyze
g Switch back to the tab or window with your Debugger Notice that the breakpoint has
been hit On the right you can view the Call Stack and Variables You can also use
buttons on the right to step over the next function call step into the next function call
and step out of the next function call
h When you have finished exploring your running app click the Resume script execution
button ( ) on the right
Note that from the IBM Bluemix Debugger page you can choose to suspend the app which will
restart the app and break at the first line of the app
29
Tweet this
Bluemix + DevOpsServices + Shell = a happy developer NoDownloadsRequired [include a
screenshot of the shell in your browser]
Just debugged my Bluemix app by using the debugger in DevOpsServices
NoDownloadsRequired [take a selfie of you in front of your debugger looking very excited]
Get creative
Use some of your favorite commands to explore the Bluemix environment where your app runs
Additional resources
Bluemix Live Sync
httpswwwngBluemixnetdocsmanageappsBluemixlivehtmlBluemixlivedebugger
Learning the Shell httplinuxcommandorglc3_learning_the_shellphp
15
e Check your phone or Twilio number for a text message
If you like update the prices of the items in the store and get the prices again
4 Push the feature to the repository
Now that your feature is tested its time to push your changes to the Git repository
a In the leftmost bar of icons click the Git Repository button ( )
b In the box in the Working Directory Changes section type a comment similar to the
following being sure to replace 20 with the work item ID associated with the work item
you created Changes to implement the text messaging feature as
described in work item 20
c Select each change in the Changed Files section and click the COMMIT button
d In the OUTGOING section click PUSH
e If you are prompted for your committer information enter it and click OK
5 Complete the feature
To indicate that you have finished your feature mark your work item as complete
a In the Web IDE click TRACK amp PLAN in the upper-right corner
b In the right pane find your work item associated with the text messaging feature and
click the Status In Progress icon
c Click Set Done
d In the right pane scroll right until you see the RESOLVED section Notice that your work
item is now marked done
6 Discover the traceability
When you added a comment in your commit that mentioned your work item a link was
automatically created for you between the change and the work item
a In the right pane scroll to the Resolved view if you are not currently viewing your
resolved work items
b Click the textual summary of the work item associated with the text messaging feature
to open it
c In the work item click the Links tab
d In the LINKS section notice that a link was automatically generated for you Click the
link The Git Log displays
e Observe that you have a summary of the git commit and its associated work items
f Click GIT LOG in the left navigation to see a list of all of your git commits
16
Tweet this
Collaborate with me on this Bluemix app I created [insert link to your app] [include a
screenshot of the Web IDE with your codemdashTweets with images are more likely to get noticed]
Get creative
Invite a friend to join your project Navigate to your projects home page click Members and
invite a friend to join
Create new work items for features yoursquod like to implement or defects you find
Implement some of the stories you created or fix the defects you recorded
Additional resources
Twilio SMS and MMS Python Quickstart httpswwwtwiliocomdocsquickstartpythonsms
Managing Distributed Teams
httpswwwscrumallianceorgcommunityarticles2013julymanaging-distributed-
teamsaspx
So Long Scrum Hello Kanban httpsstormpathcomblogso-long-scrum-hello-kanban
17
Part 1D Deploying Automatically Using the Delivery Pipeline
Learn this
Deployment automation is one of the keys to a successful DevOps approach
You can create a complete delivery pipeline with multiple stages automated tests and
automatic deploys using DevOps Services
Try this
You can configure a multi-stage build and deployment pipeline to support your DevOps approach to
software development In this section you will configure a builder a deployment to your
development (dev) space and a deployment to your production (prod) space
1 Create a production space
Organizations and spaces are organizational units in the Cloud Foundry infrastructure that can
be used to store and track application resources An organization contains domains spaces and
users a space contains applications and services By default a dev (development) space is
created for you
a Navigate to the Bluemix dashboard if you are not there already
b Click Create a Space in the left menu
c In the Create a Space dialog input prod as your space name and click CREATE
2 Create services for deployments to your dev space
When deploying to your dev and prod spaces you will likely want to have services dedicated to
those deployments For example you want to use separate databases for each space Wersquoll
begin by creating services for each space
a Navigate to the Bluemix dashboard if you are not there already
b Click CATALOG
c Create the Cloudant NoSQL DB service
i Scroll down until you see the Cloudant NoSQL DB service Hint Check the Data
and Analytics section The catalog is constantly being updated with new
services
ii Click the Cloudant NoSQL DB service
iii In the Space dropdown choose dev
iv In the App dropdown choose Leave unbound
18
v In the Service name box leave the default or change the name to something
you like Be sure the name you choose begins with ldquocloudantrdquo as that is how
the code identifies the service
vi Note the name of your service as you will need it later
vii Click CREATE
d Create the Twilio service
i Navigate to the Catalog if you are not there already
ii Scroll down until you see the Twilio service Hint Check the Mobile section The
catalog is constantly being updated with new services
iii Click the Twilio service
iv In the Space dropdown choose dev
v In the App dropdown choose Leave unbound
vi In the Service name box leave the default or change the name to something
you like Be sure the name you choose begins with ldquotwiliordquo as that is how the
code identifies the service Note the name you choose as you will need it later
vii In the Account SID and Auth Token fields paste your Twilio AccountSID and
AuthToken from your Twilio Account Settings page
viii Click CREATE
3 Create services for deployments to your prod space
Repeat the steps from 2 above to create Cloudant NoSQL DB and Twilio services for
deployments to your prod space Be sure to select ldquoprodrdquo as the Space instead of ldquodevrdquo
4 Enable Advanced Build amp Deploy
You can configure a multi-stage build and deployment pipeline to support your DevOps
approach to software development Note that the pipeline only includes changes that have
been pushed to your projectrsquos repository changes that are in your workspace in the Web IDE
that have not been pushed to your projectrsquos repository will NOT be deployed as part of the
pipeline
a Open the Fabulous Price Finder project you created in the previous section by
navigating to DevOps Services signing in if youre not already authenticated and
clicking on your project on the My Projects page
b Click BUILD amp DEPLOY in the upper-right corner
5 Add a builder stage
The first stage we will create is a builder stage
19
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Build Stage
c Notice that the Input Type is set to SCM Repository by default This means the input for
the stage will be your git repository
d Notice that Run jobs whenever a change is pushed to Git is selected by default This
means that whenever you or someone on your team pushes code to your projectrsquos
repository the build stage will automatically be triggered
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Build
g Since this app does not require compilation (unlike a Java app) we will use the Simple
builder type Note that you can choose from a variety of builders
h Notice that the Stop running this stage if this job fails is checked by default This means
that any jobs further down the pipeline will not execute and the whole stage will be
marked as failed if a failure occurs
i Click SAVE
6 Add a ldquodeploy to development spacerdquo stage
Now we will add a deployment to the space that represents your development space Some
might call this a quality assurance or test space It is a place where developers can test their
code live in a production quality environment without actually putting it in production
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Dev Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the previous stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default This
will configure your pipeline so that whenever someone pushes code to your projectrsquos
repository the build step will run and if it succeeds a deploy to the development
environment will be kicked off
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Application Name to be a name that is unique to your Bluemix dev space
h By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
20
developers on your team will be able to test their code In the Script section after cf push ldquo$CF_APPrdquo
add -n whateverYouWantYourUrlToBe Note the url needs to be unique across
all Bluemix apps so be creative
i Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
j Next add a command to restage your app with the newly bound services cf restage $CF_APP
k The script section should now look similar to the following cf push $CF_APP -n fbf-lauren-dev
cf bind-service $CF_APP Cloudant-dev
cf bind-service $CF_APP Twilio-dev
cf restage $CF_APP
l Note that if we had automated tests associated with this project we could add a test
job to this stage so that the deploy would run and then tests could be executed against
that deployment
m Click SAVE
7 Add a deploy to production space stage
Now we will add a deployment to the space that represents your production space This space
is where you keep apps that your end users will use
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Prod Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the Build Stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default Since
we donrsquot have any automated tests included in this pipeline automatically deploying to
production is probably not safe Select Run jobs only when this stage is run manually
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Space to be prod
h Update the Application Name to be a name that is unique to your Bluemix prod space
i By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
21
your end users will be able to access your app In the Script section after cf push ldquo$CF_APPrdquo
add -n whateveryouwantyoururltobe Note the url needs to be unique across
all Bluemix apps so be creative
j Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
k Next add a command to restage your app with the newly bound services cf restage $CF_APP
l The script section should now look similar to the following cf push $CF_APP -n fbf-lauren
cf bind-service $CF_APP Cloudant-prod
cf bind-service $CF_APP Twilio-prod
cf restage $CF_APP
m Click SAVE
8 Kick off the pipeline
Now that we have the build pipeline configured itrsquos time to try it out To trigger the pipeline
we could make a change to our projectrsquos code and push the change to our Git repository or we
could manually request a build
a On the Pipeline page click the Play button ( ) in the Build Stage to kick off the first
stage of the pipeline manually
The build pipeline will go through the build and deploy to dev steps If you like what was
deployed to dev you can drag and drop the build from the Build Stage tile to the Prod
Deployment tile to deploy it there
Tweet this
Dove into DevOps by creating a release pipeline for my app [attach a screenshot of the Build amp
Deploy page for your app] Bluemix DevOpsServices
22
Get creative
Make a change to your code and watch the build pipeline automatically deploy it for you
Zero downtime deployments are very important to web applications Design and implement a
strategy to deploy your app to your production space without any downtime Hint check out
this article httpwwwibmcomdeveloperworkscloudlibrarycl-Bluemix-rollingpipeline
Additional resources
DevOps for Dummies ebook httpibmcodevopsfordummies
Top 10 Practices for Effective DevOps httpwwwdrdobbscomarchitecture-and-designtop-
10-practices-for-effective-devops240149363
Cloud Computing Trends 2014 State of the Cloud Survey
httpwwwrightscalecomblogcloud-industry-insightscloud-computing-trends-2014-state-
cloud-survey
DevOps Embracing Cloud Services httpwwwmidsizeinsidercomen-usarticledevops-
embracing-cloud-servicesVJmrScABg
23
Part 2A Live Edit In this part yoursquoll get to use an exciting new feature Live Edit The Live Edit feature allows you to make
changes to your application and have them deployed nearly instantaneously to your deployed app Itrsquos just like
editing files locallyhellipexcept you donrsquot have to set up a development environment
Since the Live Edit feature is currently optimized for Nodejs we will create a new app using the Personality
Insights Nodejs Web Starter boilerplate (what a concise name) The exciting thing about this boilerplate is that
it uses IBM Watson (remember Watson the supercomputer that beat Jeopardy champions a few years ago)
services
In this part you will create a new Bluemix app and leverage the Live Edit feature to see the changes you make
be deployed almost instantly to your running app
Learn this
Live Edit allows you to see changes you make in the DevOps Services Web IDE reflected in real-
time to your app deployed on Bluemix Itrsquos just like editing files locallyhellipexcept you donrsquot have
to set up a development environment
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app Changes you make in Node modules (like JavaScript files)
will require a fast restart of the app in order to be reflected in your deployed app
Try this
1 Sign up for DevOps Services if you have not done so already
a Navigate to httpibmbizcds-bluemix and sign up
b As part of the Bluemix registration process you will receive an e-mail asking you to
confirm your account If you do not confirm you are not registered If you do not
receive a confirmation e-mail send a note to idbluemixnet
c Navigate to httpibmbizcds-ids and register for DevOps Services using the same IBM
id you used for Bluemix
2 Create a Nodejs app using a Bluemix boilerplate
The first thing we need is a Nodejs app One of the fastest ways to get a new app is to use a
Bluemix boilerplate
a Navigate to httpibmbizcds-bluemix
b Log in if you are not already authenticated
c Click CATALOG The Catalog is your place to browse the available boilerplates (sample
applications) runtimes and services
d In the Boilerplates section click Personality Insights Nodejs Web Starter
24
e Input a name for the app (what the app will be referred to in Bluemix) and a host for the
app (the part of the url that will go before mybluemixnet) Note that the host must be
globally unique across all of Bluemix so be creative
f Click CREATE A copy of the boilerplate code will be put in to a new app for you and
then deployed to Bluemix
g Click Overview In the APP HEALTH section wait for the message ldquoYour app is
runningrdquo to be displayed
h When your app is running click on your route (toward the top of the page) to open your
running app
3 Explore the Nodejs app
Now that your app is running letrsquos take a moment to explore it The Personality Insights app
uses the Watson Personality Insights service to analyze text and determine personality traits of
the textrsquos author
a The app includes sample text from Moby Dick Click ANALYZE to learn about the
personality of Moby Dickrsquos author Herman Melville Textual output as well as a
graphical visualization are displayed
b Navigate to one of your favorite websites with English text (keep it office-friendlyhellipso
perhaps choose your favorite news site) and copy a block of text
c Return to your Personality Insights App and paste the text in the Try the Service box
d Click ANALYZE View the textual output as well as the graphical visualization
4 Prepare for Live Edit
Wersquove tested the app and now wersquoll prep to make some changes to it
a Return to the Bluemix page for your Personality Insights app If your app is not in a
separate window or tab right-click on your apprsquos route and choose an option to open
the link in a new window or tab
b Click ADD GIT in the upper-right corner
c Click CONTINUE in the Create Git Repository dialog Bluemix will take a copy of your
apprsquos code and put it in a Git repository hosted at DevOps Services
d Click CLOSE once the Git Repository has been successfully created
e Click EDIT CODE in the upper-right corner to open the DevOps Services Web IDE
f Toggle the Live Edit option to on
g If prompted to redeploy click OK The app will redeploy so changes can be made live to
your deployed app When the app finishes deploying a green dot will be displayed in
the run bar
25
When the app finishes deploying you are ready to make live edits
5 Change a static file
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app
a In the navigator view on the left expand views
b Select layoutjade
c Update the h2 to say something like ldquoThis open lab is so great that Irsquom going to Tweet
about itrdquo
d Switch to your tab or window that has your running app
e Refresh the page
f Note that the heading of your app was changed instantly You didnrsquot have to wait for
the app to redeploy
g Make a few more changes to static files and watch your app update in real time
6 Change a node module
Changes to node modules require a fast app restart (not a full redeploy) in order to be deployed
because the server caches node modules in memory
a Select the root directory of your app in the navigator in the left pane
b Click File gt New gt File
c The name of the file is highlighted so you can rename it Type defaulttexttxt and press
Enter or Return on your keyboard
d In the editor on the right type or paste the text that you want to use as the default text
in the app
e Select the appjs file in the navigator in the left pane
f In the editor on the right look for the dummy_text variable around line 25 Replace
mobydicktxt with defaulttexttxt
g In the web IDEs top bar click the Restart button ( )
h When the app finishes restarting (which only takes a few seconds) a green dot is
displayed in the run bar
26
i Switch to the tab or window that has your running app Refresh the page to see the new
text (If your browser cached the page and you dont see the text update browse to
your apps URL again and the change should be displayed)
Tweet this
Developing in the cloud using Bluemix DevOpsServices is now as fast and easy as developing
locally WhoKnew
Get creative
Create a new look for the Personality Insights app Open the CSS files located in the publiccss
directory and have fun making changes to the files Watch as your changes are deployed live
Additional resources
Everything AND the kitchen sync Bluemix Live Sync is here httpsdeveloperibmcomdevops-
services20150213everything-kitchen-sync-Bluemix-live-sync
Bluemix Live Sync documentation
httpswwwngbluemixnetdocscm_mmc=developerWorks-_-dWdevcenter-_-devops-
services-_-lpmanageappsbluemixlivehtmlbluemixlive
27
Part 2B Bluemix Debug Sometimes staring at the code to figure out whatrsquos going wrong just doesnrsquot work Sometimes you really need
to debug the code or access the environment where the app is running This is where Bluemix Debug comes in
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for your Nodejs
apps
In this part yoursquoll continue on with the Personality Insights Nodejs app you created in part 2A
Learn this
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for
your Nodejs apps
Try this Note The Node Inspector Debugger currently only works in Chrome You may want to take this
opportunity to change browsers if you are not already using Chrome
1 Open the IBM Bluemix Debugger
a Navigate to httpibmbizcds-ids and sign in if you are not already authenticated
b In My Projects locate the tile for your Personality Insights app Click the Edit Code icon
( ) to open the Web IDE for your project
c In the Web IDErsquos top bar click the Debug button ( )
d When prompted for credentials input your IBM id and password
2 Use the shell
The Bluemix Shell allows you to explore and interact with the Bluemix environment where your
app is running by using a built-in bash shell
a On the IBM Bluemix Debugger page for your project click Open Shell A shell client
opens in your browser
b View the processes running in your Bluemix environment by inputting the following
command top
c Click NEW WINDOW
d Drag and drop the new window so that you can continue to observe your processes
while you explore the log files
e In the new window change directory to the log files by inputting the following
command cd logs
28
f View a list of the files in the logs directory by inputting the following command ls
g Notice that staging_tasklog is a file in your logs directory View the last 10 lines of the
log file by inputting the following command tail staging_tasklog
3 Use the Debugger
The Debugger allows you to debug Nodejs apps
a On the IBM Bluemix Debugger page for your project click Open Debugger The
Debugger takes about 30 seconds to load
b If the Navigator is not displayed on the left click the Expand Navigator button
c Select appjs in the Navigator to open the file
d Add a breakpoint on line 48 by clicking 48
e In a different tab or window navigate to your running app
f Click Analyze
g Switch back to the tab or window with your Debugger Notice that the breakpoint has
been hit On the right you can view the Call Stack and Variables You can also use
buttons on the right to step over the next function call step into the next function call
and step out of the next function call
h When you have finished exploring your running app click the Resume script execution
button ( ) on the right
Note that from the IBM Bluemix Debugger page you can choose to suspend the app which will
restart the app and break at the first line of the app
29
Tweet this
Bluemix + DevOpsServices + Shell = a happy developer NoDownloadsRequired [include a
screenshot of the shell in your browser]
Just debugged my Bluemix app by using the debugger in DevOpsServices
NoDownloadsRequired [take a selfie of you in front of your debugger looking very excited]
Get creative
Use some of your favorite commands to explore the Bluemix environment where your app runs
Additional resources
Bluemix Live Sync
httpswwwngBluemixnetdocsmanageappsBluemixlivehtmlBluemixlivedebugger
Learning the Shell httplinuxcommandorglc3_learning_the_shellphp
16
Tweet this
Collaborate with me on this Bluemix app I created [insert link to your app] [include a
screenshot of the Web IDE with your codemdashTweets with images are more likely to get noticed]
Get creative
Invite a friend to join your project Navigate to your projects home page click Members and
invite a friend to join
Create new work items for features yoursquod like to implement or defects you find
Implement some of the stories you created or fix the defects you recorded
Additional resources
Twilio SMS and MMS Python Quickstart httpswwwtwiliocomdocsquickstartpythonsms
Managing Distributed Teams
httpswwwscrumallianceorgcommunityarticles2013julymanaging-distributed-
teamsaspx
So Long Scrum Hello Kanban httpsstormpathcomblogso-long-scrum-hello-kanban
17
Part 1D Deploying Automatically Using the Delivery Pipeline
Learn this
Deployment automation is one of the keys to a successful DevOps approach
You can create a complete delivery pipeline with multiple stages automated tests and
automatic deploys using DevOps Services
Try this
You can configure a multi-stage build and deployment pipeline to support your DevOps approach to
software development In this section you will configure a builder a deployment to your
development (dev) space and a deployment to your production (prod) space
1 Create a production space
Organizations and spaces are organizational units in the Cloud Foundry infrastructure that can
be used to store and track application resources An organization contains domains spaces and
users a space contains applications and services By default a dev (development) space is
created for you
a Navigate to the Bluemix dashboard if you are not there already
b Click Create a Space in the left menu
c In the Create a Space dialog input prod as your space name and click CREATE
2 Create services for deployments to your dev space
When deploying to your dev and prod spaces you will likely want to have services dedicated to
those deployments For example you want to use separate databases for each space Wersquoll
begin by creating services for each space
a Navigate to the Bluemix dashboard if you are not there already
b Click CATALOG
c Create the Cloudant NoSQL DB service
i Scroll down until you see the Cloudant NoSQL DB service Hint Check the Data
and Analytics section The catalog is constantly being updated with new
services
ii Click the Cloudant NoSQL DB service
iii In the Space dropdown choose dev
iv In the App dropdown choose Leave unbound
18
v In the Service name box leave the default or change the name to something
you like Be sure the name you choose begins with ldquocloudantrdquo as that is how
the code identifies the service
vi Note the name of your service as you will need it later
vii Click CREATE
d Create the Twilio service
i Navigate to the Catalog if you are not there already
ii Scroll down until you see the Twilio service Hint Check the Mobile section The
catalog is constantly being updated with new services
iii Click the Twilio service
iv In the Space dropdown choose dev
v In the App dropdown choose Leave unbound
vi In the Service name box leave the default or change the name to something
you like Be sure the name you choose begins with ldquotwiliordquo as that is how the
code identifies the service Note the name you choose as you will need it later
vii In the Account SID and Auth Token fields paste your Twilio AccountSID and
AuthToken from your Twilio Account Settings page
viii Click CREATE
3 Create services for deployments to your prod space
Repeat the steps from 2 above to create Cloudant NoSQL DB and Twilio services for
deployments to your prod space Be sure to select ldquoprodrdquo as the Space instead of ldquodevrdquo
4 Enable Advanced Build amp Deploy
You can configure a multi-stage build and deployment pipeline to support your DevOps
approach to software development Note that the pipeline only includes changes that have
been pushed to your projectrsquos repository changes that are in your workspace in the Web IDE
that have not been pushed to your projectrsquos repository will NOT be deployed as part of the
pipeline
a Open the Fabulous Price Finder project you created in the previous section by
navigating to DevOps Services signing in if youre not already authenticated and
clicking on your project on the My Projects page
b Click BUILD amp DEPLOY in the upper-right corner
5 Add a builder stage
The first stage we will create is a builder stage
19
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Build Stage
c Notice that the Input Type is set to SCM Repository by default This means the input for
the stage will be your git repository
d Notice that Run jobs whenever a change is pushed to Git is selected by default This
means that whenever you or someone on your team pushes code to your projectrsquos
repository the build stage will automatically be triggered
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Build
g Since this app does not require compilation (unlike a Java app) we will use the Simple
builder type Note that you can choose from a variety of builders
h Notice that the Stop running this stage if this job fails is checked by default This means
that any jobs further down the pipeline will not execute and the whole stage will be
marked as failed if a failure occurs
i Click SAVE
6 Add a ldquodeploy to development spacerdquo stage
Now we will add a deployment to the space that represents your development space Some
might call this a quality assurance or test space It is a place where developers can test their
code live in a production quality environment without actually putting it in production
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Dev Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the previous stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default This
will configure your pipeline so that whenever someone pushes code to your projectrsquos
repository the build step will run and if it succeeds a deploy to the development
environment will be kicked off
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Application Name to be a name that is unique to your Bluemix dev space
h By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
20
developers on your team will be able to test their code In the Script section after cf push ldquo$CF_APPrdquo
add -n whateverYouWantYourUrlToBe Note the url needs to be unique across
all Bluemix apps so be creative
i Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
j Next add a command to restage your app with the newly bound services cf restage $CF_APP
k The script section should now look similar to the following cf push $CF_APP -n fbf-lauren-dev
cf bind-service $CF_APP Cloudant-dev
cf bind-service $CF_APP Twilio-dev
cf restage $CF_APP
l Note that if we had automated tests associated with this project we could add a test
job to this stage so that the deploy would run and then tests could be executed against
that deployment
m Click SAVE
7 Add a deploy to production space stage
Now we will add a deployment to the space that represents your production space This space
is where you keep apps that your end users will use
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Prod Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the Build Stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default Since
we donrsquot have any automated tests included in this pipeline automatically deploying to
production is probably not safe Select Run jobs only when this stage is run manually
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Space to be prod
h Update the Application Name to be a name that is unique to your Bluemix prod space
i By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
21
your end users will be able to access your app In the Script section after cf push ldquo$CF_APPrdquo
add -n whateveryouwantyoururltobe Note the url needs to be unique across
all Bluemix apps so be creative
j Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
k Next add a command to restage your app with the newly bound services cf restage $CF_APP
l The script section should now look similar to the following cf push $CF_APP -n fbf-lauren
cf bind-service $CF_APP Cloudant-prod
cf bind-service $CF_APP Twilio-prod
cf restage $CF_APP
m Click SAVE
8 Kick off the pipeline
Now that we have the build pipeline configured itrsquos time to try it out To trigger the pipeline
we could make a change to our projectrsquos code and push the change to our Git repository or we
could manually request a build
a On the Pipeline page click the Play button ( ) in the Build Stage to kick off the first
stage of the pipeline manually
The build pipeline will go through the build and deploy to dev steps If you like what was
deployed to dev you can drag and drop the build from the Build Stage tile to the Prod
Deployment tile to deploy it there
Tweet this
Dove into DevOps by creating a release pipeline for my app [attach a screenshot of the Build amp
Deploy page for your app] Bluemix DevOpsServices
22
Get creative
Make a change to your code and watch the build pipeline automatically deploy it for you
Zero downtime deployments are very important to web applications Design and implement a
strategy to deploy your app to your production space without any downtime Hint check out
this article httpwwwibmcomdeveloperworkscloudlibrarycl-Bluemix-rollingpipeline
Additional resources
DevOps for Dummies ebook httpibmcodevopsfordummies
Top 10 Practices for Effective DevOps httpwwwdrdobbscomarchitecture-and-designtop-
10-practices-for-effective-devops240149363
Cloud Computing Trends 2014 State of the Cloud Survey
httpwwwrightscalecomblogcloud-industry-insightscloud-computing-trends-2014-state-
cloud-survey
DevOps Embracing Cloud Services httpwwwmidsizeinsidercomen-usarticledevops-
embracing-cloud-servicesVJmrScABg
23
Part 2A Live Edit In this part yoursquoll get to use an exciting new feature Live Edit The Live Edit feature allows you to make
changes to your application and have them deployed nearly instantaneously to your deployed app Itrsquos just like
editing files locallyhellipexcept you donrsquot have to set up a development environment
Since the Live Edit feature is currently optimized for Nodejs we will create a new app using the Personality
Insights Nodejs Web Starter boilerplate (what a concise name) The exciting thing about this boilerplate is that
it uses IBM Watson (remember Watson the supercomputer that beat Jeopardy champions a few years ago)
services
In this part you will create a new Bluemix app and leverage the Live Edit feature to see the changes you make
be deployed almost instantly to your running app
Learn this
Live Edit allows you to see changes you make in the DevOps Services Web IDE reflected in real-
time to your app deployed on Bluemix Itrsquos just like editing files locallyhellipexcept you donrsquot have
to set up a development environment
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app Changes you make in Node modules (like JavaScript files)
will require a fast restart of the app in order to be reflected in your deployed app
Try this
1 Sign up for DevOps Services if you have not done so already
a Navigate to httpibmbizcds-bluemix and sign up
b As part of the Bluemix registration process you will receive an e-mail asking you to
confirm your account If you do not confirm you are not registered If you do not
receive a confirmation e-mail send a note to idbluemixnet
c Navigate to httpibmbizcds-ids and register for DevOps Services using the same IBM
id you used for Bluemix
2 Create a Nodejs app using a Bluemix boilerplate
The first thing we need is a Nodejs app One of the fastest ways to get a new app is to use a
Bluemix boilerplate
a Navigate to httpibmbizcds-bluemix
b Log in if you are not already authenticated
c Click CATALOG The Catalog is your place to browse the available boilerplates (sample
applications) runtimes and services
d In the Boilerplates section click Personality Insights Nodejs Web Starter
24
e Input a name for the app (what the app will be referred to in Bluemix) and a host for the
app (the part of the url that will go before mybluemixnet) Note that the host must be
globally unique across all of Bluemix so be creative
f Click CREATE A copy of the boilerplate code will be put in to a new app for you and
then deployed to Bluemix
g Click Overview In the APP HEALTH section wait for the message ldquoYour app is
runningrdquo to be displayed
h When your app is running click on your route (toward the top of the page) to open your
running app
3 Explore the Nodejs app
Now that your app is running letrsquos take a moment to explore it The Personality Insights app
uses the Watson Personality Insights service to analyze text and determine personality traits of
the textrsquos author
a The app includes sample text from Moby Dick Click ANALYZE to learn about the
personality of Moby Dickrsquos author Herman Melville Textual output as well as a
graphical visualization are displayed
b Navigate to one of your favorite websites with English text (keep it office-friendlyhellipso
perhaps choose your favorite news site) and copy a block of text
c Return to your Personality Insights App and paste the text in the Try the Service box
d Click ANALYZE View the textual output as well as the graphical visualization
4 Prepare for Live Edit
Wersquove tested the app and now wersquoll prep to make some changes to it
a Return to the Bluemix page for your Personality Insights app If your app is not in a
separate window or tab right-click on your apprsquos route and choose an option to open
the link in a new window or tab
b Click ADD GIT in the upper-right corner
c Click CONTINUE in the Create Git Repository dialog Bluemix will take a copy of your
apprsquos code and put it in a Git repository hosted at DevOps Services
d Click CLOSE once the Git Repository has been successfully created
e Click EDIT CODE in the upper-right corner to open the DevOps Services Web IDE
f Toggle the Live Edit option to on
g If prompted to redeploy click OK The app will redeploy so changes can be made live to
your deployed app When the app finishes deploying a green dot will be displayed in
the run bar
25
When the app finishes deploying you are ready to make live edits
5 Change a static file
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app
a In the navigator view on the left expand views
b Select layoutjade
c Update the h2 to say something like ldquoThis open lab is so great that Irsquom going to Tweet
about itrdquo
d Switch to your tab or window that has your running app
e Refresh the page
f Note that the heading of your app was changed instantly You didnrsquot have to wait for
the app to redeploy
g Make a few more changes to static files and watch your app update in real time
6 Change a node module
Changes to node modules require a fast app restart (not a full redeploy) in order to be deployed
because the server caches node modules in memory
a Select the root directory of your app in the navigator in the left pane
b Click File gt New gt File
c The name of the file is highlighted so you can rename it Type defaulttexttxt and press
Enter or Return on your keyboard
d In the editor on the right type or paste the text that you want to use as the default text
in the app
e Select the appjs file in the navigator in the left pane
f In the editor on the right look for the dummy_text variable around line 25 Replace
mobydicktxt with defaulttexttxt
g In the web IDEs top bar click the Restart button ( )
h When the app finishes restarting (which only takes a few seconds) a green dot is
displayed in the run bar
26
i Switch to the tab or window that has your running app Refresh the page to see the new
text (If your browser cached the page and you dont see the text update browse to
your apps URL again and the change should be displayed)
Tweet this
Developing in the cloud using Bluemix DevOpsServices is now as fast and easy as developing
locally WhoKnew
Get creative
Create a new look for the Personality Insights app Open the CSS files located in the publiccss
directory and have fun making changes to the files Watch as your changes are deployed live
Additional resources
Everything AND the kitchen sync Bluemix Live Sync is here httpsdeveloperibmcomdevops-
services20150213everything-kitchen-sync-Bluemix-live-sync
Bluemix Live Sync documentation
httpswwwngbluemixnetdocscm_mmc=developerWorks-_-dWdevcenter-_-devops-
services-_-lpmanageappsbluemixlivehtmlbluemixlive
27
Part 2B Bluemix Debug Sometimes staring at the code to figure out whatrsquos going wrong just doesnrsquot work Sometimes you really need
to debug the code or access the environment where the app is running This is where Bluemix Debug comes in
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for your Nodejs
apps
In this part yoursquoll continue on with the Personality Insights Nodejs app you created in part 2A
Learn this
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for
your Nodejs apps
Try this Note The Node Inspector Debugger currently only works in Chrome You may want to take this
opportunity to change browsers if you are not already using Chrome
1 Open the IBM Bluemix Debugger
a Navigate to httpibmbizcds-ids and sign in if you are not already authenticated
b In My Projects locate the tile for your Personality Insights app Click the Edit Code icon
( ) to open the Web IDE for your project
c In the Web IDErsquos top bar click the Debug button ( )
d When prompted for credentials input your IBM id and password
2 Use the shell
The Bluemix Shell allows you to explore and interact with the Bluemix environment where your
app is running by using a built-in bash shell
a On the IBM Bluemix Debugger page for your project click Open Shell A shell client
opens in your browser
b View the processes running in your Bluemix environment by inputting the following
command top
c Click NEW WINDOW
d Drag and drop the new window so that you can continue to observe your processes
while you explore the log files
e In the new window change directory to the log files by inputting the following
command cd logs
28
f View a list of the files in the logs directory by inputting the following command ls
g Notice that staging_tasklog is a file in your logs directory View the last 10 lines of the
log file by inputting the following command tail staging_tasklog
3 Use the Debugger
The Debugger allows you to debug Nodejs apps
a On the IBM Bluemix Debugger page for your project click Open Debugger The
Debugger takes about 30 seconds to load
b If the Navigator is not displayed on the left click the Expand Navigator button
c Select appjs in the Navigator to open the file
d Add a breakpoint on line 48 by clicking 48
e In a different tab or window navigate to your running app
f Click Analyze
g Switch back to the tab or window with your Debugger Notice that the breakpoint has
been hit On the right you can view the Call Stack and Variables You can also use
buttons on the right to step over the next function call step into the next function call
and step out of the next function call
h When you have finished exploring your running app click the Resume script execution
button ( ) on the right
Note that from the IBM Bluemix Debugger page you can choose to suspend the app which will
restart the app and break at the first line of the app
29
Tweet this
Bluemix + DevOpsServices + Shell = a happy developer NoDownloadsRequired [include a
screenshot of the shell in your browser]
Just debugged my Bluemix app by using the debugger in DevOpsServices
NoDownloadsRequired [take a selfie of you in front of your debugger looking very excited]
Get creative
Use some of your favorite commands to explore the Bluemix environment where your app runs
Additional resources
Bluemix Live Sync
httpswwwngBluemixnetdocsmanageappsBluemixlivehtmlBluemixlivedebugger
Learning the Shell httplinuxcommandorglc3_learning_the_shellphp
17
Part 1D Deploying Automatically Using the Delivery Pipeline
Learn this
Deployment automation is one of the keys to a successful DevOps approach
You can create a complete delivery pipeline with multiple stages automated tests and
automatic deploys using DevOps Services
Try this
You can configure a multi-stage build and deployment pipeline to support your DevOps approach to
software development In this section you will configure a builder a deployment to your
development (dev) space and a deployment to your production (prod) space
1 Create a production space
Organizations and spaces are organizational units in the Cloud Foundry infrastructure that can
be used to store and track application resources An organization contains domains spaces and
users a space contains applications and services By default a dev (development) space is
created for you
a Navigate to the Bluemix dashboard if you are not there already
b Click Create a Space in the left menu
c In the Create a Space dialog input prod as your space name and click CREATE
2 Create services for deployments to your dev space
When deploying to your dev and prod spaces you will likely want to have services dedicated to
those deployments For example you want to use separate databases for each space Wersquoll
begin by creating services for each space
a Navigate to the Bluemix dashboard if you are not there already
b Click CATALOG
c Create the Cloudant NoSQL DB service
i Scroll down until you see the Cloudant NoSQL DB service Hint Check the Data
and Analytics section The catalog is constantly being updated with new
services
ii Click the Cloudant NoSQL DB service
iii In the Space dropdown choose dev
iv In the App dropdown choose Leave unbound
18
v In the Service name box leave the default or change the name to something
you like Be sure the name you choose begins with ldquocloudantrdquo as that is how
the code identifies the service
vi Note the name of your service as you will need it later
vii Click CREATE
d Create the Twilio service
i Navigate to the Catalog if you are not there already
ii Scroll down until you see the Twilio service Hint Check the Mobile section The
catalog is constantly being updated with new services
iii Click the Twilio service
iv In the Space dropdown choose dev
v In the App dropdown choose Leave unbound
vi In the Service name box leave the default or change the name to something
you like Be sure the name you choose begins with ldquotwiliordquo as that is how the
code identifies the service Note the name you choose as you will need it later
vii In the Account SID and Auth Token fields paste your Twilio AccountSID and
AuthToken from your Twilio Account Settings page
viii Click CREATE
3 Create services for deployments to your prod space
Repeat the steps from 2 above to create Cloudant NoSQL DB and Twilio services for
deployments to your prod space Be sure to select ldquoprodrdquo as the Space instead of ldquodevrdquo
4 Enable Advanced Build amp Deploy
You can configure a multi-stage build and deployment pipeline to support your DevOps
approach to software development Note that the pipeline only includes changes that have
been pushed to your projectrsquos repository changes that are in your workspace in the Web IDE
that have not been pushed to your projectrsquos repository will NOT be deployed as part of the
pipeline
a Open the Fabulous Price Finder project you created in the previous section by
navigating to DevOps Services signing in if youre not already authenticated and
clicking on your project on the My Projects page
b Click BUILD amp DEPLOY in the upper-right corner
5 Add a builder stage
The first stage we will create is a builder stage
19
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Build Stage
c Notice that the Input Type is set to SCM Repository by default This means the input for
the stage will be your git repository
d Notice that Run jobs whenever a change is pushed to Git is selected by default This
means that whenever you or someone on your team pushes code to your projectrsquos
repository the build stage will automatically be triggered
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Build
g Since this app does not require compilation (unlike a Java app) we will use the Simple
builder type Note that you can choose from a variety of builders
h Notice that the Stop running this stage if this job fails is checked by default This means
that any jobs further down the pipeline will not execute and the whole stage will be
marked as failed if a failure occurs
i Click SAVE
6 Add a ldquodeploy to development spacerdquo stage
Now we will add a deployment to the space that represents your development space Some
might call this a quality assurance or test space It is a place where developers can test their
code live in a production quality environment without actually putting it in production
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Dev Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the previous stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default This
will configure your pipeline so that whenever someone pushes code to your projectrsquos
repository the build step will run and if it succeeds a deploy to the development
environment will be kicked off
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Application Name to be a name that is unique to your Bluemix dev space
h By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
20
developers on your team will be able to test their code In the Script section after cf push ldquo$CF_APPrdquo
add -n whateverYouWantYourUrlToBe Note the url needs to be unique across
all Bluemix apps so be creative
i Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
j Next add a command to restage your app with the newly bound services cf restage $CF_APP
k The script section should now look similar to the following cf push $CF_APP -n fbf-lauren-dev
cf bind-service $CF_APP Cloudant-dev
cf bind-service $CF_APP Twilio-dev
cf restage $CF_APP
l Note that if we had automated tests associated with this project we could add a test
job to this stage so that the deploy would run and then tests could be executed against
that deployment
m Click SAVE
7 Add a deploy to production space stage
Now we will add a deployment to the space that represents your production space This space
is where you keep apps that your end users will use
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Prod Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the Build Stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default Since
we donrsquot have any automated tests included in this pipeline automatically deploying to
production is probably not safe Select Run jobs only when this stage is run manually
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Space to be prod
h Update the Application Name to be a name that is unique to your Bluemix prod space
i By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
21
your end users will be able to access your app In the Script section after cf push ldquo$CF_APPrdquo
add -n whateveryouwantyoururltobe Note the url needs to be unique across
all Bluemix apps so be creative
j Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
k Next add a command to restage your app with the newly bound services cf restage $CF_APP
l The script section should now look similar to the following cf push $CF_APP -n fbf-lauren
cf bind-service $CF_APP Cloudant-prod
cf bind-service $CF_APP Twilio-prod
cf restage $CF_APP
m Click SAVE
8 Kick off the pipeline
Now that we have the build pipeline configured itrsquos time to try it out To trigger the pipeline
we could make a change to our projectrsquos code and push the change to our Git repository or we
could manually request a build
a On the Pipeline page click the Play button ( ) in the Build Stage to kick off the first
stage of the pipeline manually
The build pipeline will go through the build and deploy to dev steps If you like what was
deployed to dev you can drag and drop the build from the Build Stage tile to the Prod
Deployment tile to deploy it there
Tweet this
Dove into DevOps by creating a release pipeline for my app [attach a screenshot of the Build amp
Deploy page for your app] Bluemix DevOpsServices
22
Get creative
Make a change to your code and watch the build pipeline automatically deploy it for you
Zero downtime deployments are very important to web applications Design and implement a
strategy to deploy your app to your production space without any downtime Hint check out
this article httpwwwibmcomdeveloperworkscloudlibrarycl-Bluemix-rollingpipeline
Additional resources
DevOps for Dummies ebook httpibmcodevopsfordummies
Top 10 Practices for Effective DevOps httpwwwdrdobbscomarchitecture-and-designtop-
10-practices-for-effective-devops240149363
Cloud Computing Trends 2014 State of the Cloud Survey
httpwwwrightscalecomblogcloud-industry-insightscloud-computing-trends-2014-state-
cloud-survey
DevOps Embracing Cloud Services httpwwwmidsizeinsidercomen-usarticledevops-
embracing-cloud-servicesVJmrScABg
23
Part 2A Live Edit In this part yoursquoll get to use an exciting new feature Live Edit The Live Edit feature allows you to make
changes to your application and have them deployed nearly instantaneously to your deployed app Itrsquos just like
editing files locallyhellipexcept you donrsquot have to set up a development environment
Since the Live Edit feature is currently optimized for Nodejs we will create a new app using the Personality
Insights Nodejs Web Starter boilerplate (what a concise name) The exciting thing about this boilerplate is that
it uses IBM Watson (remember Watson the supercomputer that beat Jeopardy champions a few years ago)
services
In this part you will create a new Bluemix app and leverage the Live Edit feature to see the changes you make
be deployed almost instantly to your running app
Learn this
Live Edit allows you to see changes you make in the DevOps Services Web IDE reflected in real-
time to your app deployed on Bluemix Itrsquos just like editing files locallyhellipexcept you donrsquot have
to set up a development environment
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app Changes you make in Node modules (like JavaScript files)
will require a fast restart of the app in order to be reflected in your deployed app
Try this
1 Sign up for DevOps Services if you have not done so already
a Navigate to httpibmbizcds-bluemix and sign up
b As part of the Bluemix registration process you will receive an e-mail asking you to
confirm your account If you do not confirm you are not registered If you do not
receive a confirmation e-mail send a note to idbluemixnet
c Navigate to httpibmbizcds-ids and register for DevOps Services using the same IBM
id you used for Bluemix
2 Create a Nodejs app using a Bluemix boilerplate
The first thing we need is a Nodejs app One of the fastest ways to get a new app is to use a
Bluemix boilerplate
a Navigate to httpibmbizcds-bluemix
b Log in if you are not already authenticated
c Click CATALOG The Catalog is your place to browse the available boilerplates (sample
applications) runtimes and services
d In the Boilerplates section click Personality Insights Nodejs Web Starter
24
e Input a name for the app (what the app will be referred to in Bluemix) and a host for the
app (the part of the url that will go before mybluemixnet) Note that the host must be
globally unique across all of Bluemix so be creative
f Click CREATE A copy of the boilerplate code will be put in to a new app for you and
then deployed to Bluemix
g Click Overview In the APP HEALTH section wait for the message ldquoYour app is
runningrdquo to be displayed
h When your app is running click on your route (toward the top of the page) to open your
running app
3 Explore the Nodejs app
Now that your app is running letrsquos take a moment to explore it The Personality Insights app
uses the Watson Personality Insights service to analyze text and determine personality traits of
the textrsquos author
a The app includes sample text from Moby Dick Click ANALYZE to learn about the
personality of Moby Dickrsquos author Herman Melville Textual output as well as a
graphical visualization are displayed
b Navigate to one of your favorite websites with English text (keep it office-friendlyhellipso
perhaps choose your favorite news site) and copy a block of text
c Return to your Personality Insights App and paste the text in the Try the Service box
d Click ANALYZE View the textual output as well as the graphical visualization
4 Prepare for Live Edit
Wersquove tested the app and now wersquoll prep to make some changes to it
a Return to the Bluemix page for your Personality Insights app If your app is not in a
separate window or tab right-click on your apprsquos route and choose an option to open
the link in a new window or tab
b Click ADD GIT in the upper-right corner
c Click CONTINUE in the Create Git Repository dialog Bluemix will take a copy of your
apprsquos code and put it in a Git repository hosted at DevOps Services
d Click CLOSE once the Git Repository has been successfully created
e Click EDIT CODE in the upper-right corner to open the DevOps Services Web IDE
f Toggle the Live Edit option to on
g If prompted to redeploy click OK The app will redeploy so changes can be made live to
your deployed app When the app finishes deploying a green dot will be displayed in
the run bar
25
When the app finishes deploying you are ready to make live edits
5 Change a static file
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app
a In the navigator view on the left expand views
b Select layoutjade
c Update the h2 to say something like ldquoThis open lab is so great that Irsquom going to Tweet
about itrdquo
d Switch to your tab or window that has your running app
e Refresh the page
f Note that the heading of your app was changed instantly You didnrsquot have to wait for
the app to redeploy
g Make a few more changes to static files and watch your app update in real time
6 Change a node module
Changes to node modules require a fast app restart (not a full redeploy) in order to be deployed
because the server caches node modules in memory
a Select the root directory of your app in the navigator in the left pane
b Click File gt New gt File
c The name of the file is highlighted so you can rename it Type defaulttexttxt and press
Enter or Return on your keyboard
d In the editor on the right type or paste the text that you want to use as the default text
in the app
e Select the appjs file in the navigator in the left pane
f In the editor on the right look for the dummy_text variable around line 25 Replace
mobydicktxt with defaulttexttxt
g In the web IDEs top bar click the Restart button ( )
h When the app finishes restarting (which only takes a few seconds) a green dot is
displayed in the run bar
26
i Switch to the tab or window that has your running app Refresh the page to see the new
text (If your browser cached the page and you dont see the text update browse to
your apps URL again and the change should be displayed)
Tweet this
Developing in the cloud using Bluemix DevOpsServices is now as fast and easy as developing
locally WhoKnew
Get creative
Create a new look for the Personality Insights app Open the CSS files located in the publiccss
directory and have fun making changes to the files Watch as your changes are deployed live
Additional resources
Everything AND the kitchen sync Bluemix Live Sync is here httpsdeveloperibmcomdevops-
services20150213everything-kitchen-sync-Bluemix-live-sync
Bluemix Live Sync documentation
httpswwwngbluemixnetdocscm_mmc=developerWorks-_-dWdevcenter-_-devops-
services-_-lpmanageappsbluemixlivehtmlbluemixlive
27
Part 2B Bluemix Debug Sometimes staring at the code to figure out whatrsquos going wrong just doesnrsquot work Sometimes you really need
to debug the code or access the environment where the app is running This is where Bluemix Debug comes in
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for your Nodejs
apps
In this part yoursquoll continue on with the Personality Insights Nodejs app you created in part 2A
Learn this
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for
your Nodejs apps
Try this Note The Node Inspector Debugger currently only works in Chrome You may want to take this
opportunity to change browsers if you are not already using Chrome
1 Open the IBM Bluemix Debugger
a Navigate to httpibmbizcds-ids and sign in if you are not already authenticated
b In My Projects locate the tile for your Personality Insights app Click the Edit Code icon
( ) to open the Web IDE for your project
c In the Web IDErsquos top bar click the Debug button ( )
d When prompted for credentials input your IBM id and password
2 Use the shell
The Bluemix Shell allows you to explore and interact with the Bluemix environment where your
app is running by using a built-in bash shell
a On the IBM Bluemix Debugger page for your project click Open Shell A shell client
opens in your browser
b View the processes running in your Bluemix environment by inputting the following
command top
c Click NEW WINDOW
d Drag and drop the new window so that you can continue to observe your processes
while you explore the log files
e In the new window change directory to the log files by inputting the following
command cd logs
28
f View a list of the files in the logs directory by inputting the following command ls
g Notice that staging_tasklog is a file in your logs directory View the last 10 lines of the
log file by inputting the following command tail staging_tasklog
3 Use the Debugger
The Debugger allows you to debug Nodejs apps
a On the IBM Bluemix Debugger page for your project click Open Debugger The
Debugger takes about 30 seconds to load
b If the Navigator is not displayed on the left click the Expand Navigator button
c Select appjs in the Navigator to open the file
d Add a breakpoint on line 48 by clicking 48
e In a different tab or window navigate to your running app
f Click Analyze
g Switch back to the tab or window with your Debugger Notice that the breakpoint has
been hit On the right you can view the Call Stack and Variables You can also use
buttons on the right to step over the next function call step into the next function call
and step out of the next function call
h When you have finished exploring your running app click the Resume script execution
button ( ) on the right
Note that from the IBM Bluemix Debugger page you can choose to suspend the app which will
restart the app and break at the first line of the app
29
Tweet this
Bluemix + DevOpsServices + Shell = a happy developer NoDownloadsRequired [include a
screenshot of the shell in your browser]
Just debugged my Bluemix app by using the debugger in DevOpsServices
NoDownloadsRequired [take a selfie of you in front of your debugger looking very excited]
Get creative
Use some of your favorite commands to explore the Bluemix environment where your app runs
Additional resources
Bluemix Live Sync
httpswwwngBluemixnetdocsmanageappsBluemixlivehtmlBluemixlivedebugger
Learning the Shell httplinuxcommandorglc3_learning_the_shellphp
18
v In the Service name box leave the default or change the name to something
you like Be sure the name you choose begins with ldquocloudantrdquo as that is how
the code identifies the service
vi Note the name of your service as you will need it later
vii Click CREATE
d Create the Twilio service
i Navigate to the Catalog if you are not there already
ii Scroll down until you see the Twilio service Hint Check the Mobile section The
catalog is constantly being updated with new services
iii Click the Twilio service
iv In the Space dropdown choose dev
v In the App dropdown choose Leave unbound
vi In the Service name box leave the default or change the name to something
you like Be sure the name you choose begins with ldquotwiliordquo as that is how the
code identifies the service Note the name you choose as you will need it later
vii In the Account SID and Auth Token fields paste your Twilio AccountSID and
AuthToken from your Twilio Account Settings page
viii Click CREATE
3 Create services for deployments to your prod space
Repeat the steps from 2 above to create Cloudant NoSQL DB and Twilio services for
deployments to your prod space Be sure to select ldquoprodrdquo as the Space instead of ldquodevrdquo
4 Enable Advanced Build amp Deploy
You can configure a multi-stage build and deployment pipeline to support your DevOps
approach to software development Note that the pipeline only includes changes that have
been pushed to your projectrsquos repository changes that are in your workspace in the Web IDE
that have not been pushed to your projectrsquos repository will NOT be deployed as part of the
pipeline
a Open the Fabulous Price Finder project you created in the previous section by
navigating to DevOps Services signing in if youre not already authenticated and
clicking on your project on the My Projects page
b Click BUILD amp DEPLOY in the upper-right corner
5 Add a builder stage
The first stage we will create is a builder stage
19
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Build Stage
c Notice that the Input Type is set to SCM Repository by default This means the input for
the stage will be your git repository
d Notice that Run jobs whenever a change is pushed to Git is selected by default This
means that whenever you or someone on your team pushes code to your projectrsquos
repository the build stage will automatically be triggered
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Build
g Since this app does not require compilation (unlike a Java app) we will use the Simple
builder type Note that you can choose from a variety of builders
h Notice that the Stop running this stage if this job fails is checked by default This means
that any jobs further down the pipeline will not execute and the whole stage will be
marked as failed if a failure occurs
i Click SAVE
6 Add a ldquodeploy to development spacerdquo stage
Now we will add a deployment to the space that represents your development space Some
might call this a quality assurance or test space It is a place where developers can test their
code live in a production quality environment without actually putting it in production
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Dev Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the previous stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default This
will configure your pipeline so that whenever someone pushes code to your projectrsquos
repository the build step will run and if it succeeds a deploy to the development
environment will be kicked off
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Application Name to be a name that is unique to your Bluemix dev space
h By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
20
developers on your team will be able to test their code In the Script section after cf push ldquo$CF_APPrdquo
add -n whateverYouWantYourUrlToBe Note the url needs to be unique across
all Bluemix apps so be creative
i Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
j Next add a command to restage your app with the newly bound services cf restage $CF_APP
k The script section should now look similar to the following cf push $CF_APP -n fbf-lauren-dev
cf bind-service $CF_APP Cloudant-dev
cf bind-service $CF_APP Twilio-dev
cf restage $CF_APP
l Note that if we had automated tests associated with this project we could add a test
job to this stage so that the deploy would run and then tests could be executed against
that deployment
m Click SAVE
7 Add a deploy to production space stage
Now we will add a deployment to the space that represents your production space This space
is where you keep apps that your end users will use
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Prod Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the Build Stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default Since
we donrsquot have any automated tests included in this pipeline automatically deploying to
production is probably not safe Select Run jobs only when this stage is run manually
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Space to be prod
h Update the Application Name to be a name that is unique to your Bluemix prod space
i By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
21
your end users will be able to access your app In the Script section after cf push ldquo$CF_APPrdquo
add -n whateveryouwantyoururltobe Note the url needs to be unique across
all Bluemix apps so be creative
j Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
k Next add a command to restage your app with the newly bound services cf restage $CF_APP
l The script section should now look similar to the following cf push $CF_APP -n fbf-lauren
cf bind-service $CF_APP Cloudant-prod
cf bind-service $CF_APP Twilio-prod
cf restage $CF_APP
m Click SAVE
8 Kick off the pipeline
Now that we have the build pipeline configured itrsquos time to try it out To trigger the pipeline
we could make a change to our projectrsquos code and push the change to our Git repository or we
could manually request a build
a On the Pipeline page click the Play button ( ) in the Build Stage to kick off the first
stage of the pipeline manually
The build pipeline will go through the build and deploy to dev steps If you like what was
deployed to dev you can drag and drop the build from the Build Stage tile to the Prod
Deployment tile to deploy it there
Tweet this
Dove into DevOps by creating a release pipeline for my app [attach a screenshot of the Build amp
Deploy page for your app] Bluemix DevOpsServices
22
Get creative
Make a change to your code and watch the build pipeline automatically deploy it for you
Zero downtime deployments are very important to web applications Design and implement a
strategy to deploy your app to your production space without any downtime Hint check out
this article httpwwwibmcomdeveloperworkscloudlibrarycl-Bluemix-rollingpipeline
Additional resources
DevOps for Dummies ebook httpibmcodevopsfordummies
Top 10 Practices for Effective DevOps httpwwwdrdobbscomarchitecture-and-designtop-
10-practices-for-effective-devops240149363
Cloud Computing Trends 2014 State of the Cloud Survey
httpwwwrightscalecomblogcloud-industry-insightscloud-computing-trends-2014-state-
cloud-survey
DevOps Embracing Cloud Services httpwwwmidsizeinsidercomen-usarticledevops-
embracing-cloud-servicesVJmrScABg
23
Part 2A Live Edit In this part yoursquoll get to use an exciting new feature Live Edit The Live Edit feature allows you to make
changes to your application and have them deployed nearly instantaneously to your deployed app Itrsquos just like
editing files locallyhellipexcept you donrsquot have to set up a development environment
Since the Live Edit feature is currently optimized for Nodejs we will create a new app using the Personality
Insights Nodejs Web Starter boilerplate (what a concise name) The exciting thing about this boilerplate is that
it uses IBM Watson (remember Watson the supercomputer that beat Jeopardy champions a few years ago)
services
In this part you will create a new Bluemix app and leverage the Live Edit feature to see the changes you make
be deployed almost instantly to your running app
Learn this
Live Edit allows you to see changes you make in the DevOps Services Web IDE reflected in real-
time to your app deployed on Bluemix Itrsquos just like editing files locallyhellipexcept you donrsquot have
to set up a development environment
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app Changes you make in Node modules (like JavaScript files)
will require a fast restart of the app in order to be reflected in your deployed app
Try this
1 Sign up for DevOps Services if you have not done so already
a Navigate to httpibmbizcds-bluemix and sign up
b As part of the Bluemix registration process you will receive an e-mail asking you to
confirm your account If you do not confirm you are not registered If you do not
receive a confirmation e-mail send a note to idbluemixnet
c Navigate to httpibmbizcds-ids and register for DevOps Services using the same IBM
id you used for Bluemix
2 Create a Nodejs app using a Bluemix boilerplate
The first thing we need is a Nodejs app One of the fastest ways to get a new app is to use a
Bluemix boilerplate
a Navigate to httpibmbizcds-bluemix
b Log in if you are not already authenticated
c Click CATALOG The Catalog is your place to browse the available boilerplates (sample
applications) runtimes and services
d In the Boilerplates section click Personality Insights Nodejs Web Starter
24
e Input a name for the app (what the app will be referred to in Bluemix) and a host for the
app (the part of the url that will go before mybluemixnet) Note that the host must be
globally unique across all of Bluemix so be creative
f Click CREATE A copy of the boilerplate code will be put in to a new app for you and
then deployed to Bluemix
g Click Overview In the APP HEALTH section wait for the message ldquoYour app is
runningrdquo to be displayed
h When your app is running click on your route (toward the top of the page) to open your
running app
3 Explore the Nodejs app
Now that your app is running letrsquos take a moment to explore it The Personality Insights app
uses the Watson Personality Insights service to analyze text and determine personality traits of
the textrsquos author
a The app includes sample text from Moby Dick Click ANALYZE to learn about the
personality of Moby Dickrsquos author Herman Melville Textual output as well as a
graphical visualization are displayed
b Navigate to one of your favorite websites with English text (keep it office-friendlyhellipso
perhaps choose your favorite news site) and copy a block of text
c Return to your Personality Insights App and paste the text in the Try the Service box
d Click ANALYZE View the textual output as well as the graphical visualization
4 Prepare for Live Edit
Wersquove tested the app and now wersquoll prep to make some changes to it
a Return to the Bluemix page for your Personality Insights app If your app is not in a
separate window or tab right-click on your apprsquos route and choose an option to open
the link in a new window or tab
b Click ADD GIT in the upper-right corner
c Click CONTINUE in the Create Git Repository dialog Bluemix will take a copy of your
apprsquos code and put it in a Git repository hosted at DevOps Services
d Click CLOSE once the Git Repository has been successfully created
e Click EDIT CODE in the upper-right corner to open the DevOps Services Web IDE
f Toggle the Live Edit option to on
g If prompted to redeploy click OK The app will redeploy so changes can be made live to
your deployed app When the app finishes deploying a green dot will be displayed in
the run bar
25
When the app finishes deploying you are ready to make live edits
5 Change a static file
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app
a In the navigator view on the left expand views
b Select layoutjade
c Update the h2 to say something like ldquoThis open lab is so great that Irsquom going to Tweet
about itrdquo
d Switch to your tab or window that has your running app
e Refresh the page
f Note that the heading of your app was changed instantly You didnrsquot have to wait for
the app to redeploy
g Make a few more changes to static files and watch your app update in real time
6 Change a node module
Changes to node modules require a fast app restart (not a full redeploy) in order to be deployed
because the server caches node modules in memory
a Select the root directory of your app in the navigator in the left pane
b Click File gt New gt File
c The name of the file is highlighted so you can rename it Type defaulttexttxt and press
Enter or Return on your keyboard
d In the editor on the right type or paste the text that you want to use as the default text
in the app
e Select the appjs file in the navigator in the left pane
f In the editor on the right look for the dummy_text variable around line 25 Replace
mobydicktxt with defaulttexttxt
g In the web IDEs top bar click the Restart button ( )
h When the app finishes restarting (which only takes a few seconds) a green dot is
displayed in the run bar
26
i Switch to the tab or window that has your running app Refresh the page to see the new
text (If your browser cached the page and you dont see the text update browse to
your apps URL again and the change should be displayed)
Tweet this
Developing in the cloud using Bluemix DevOpsServices is now as fast and easy as developing
locally WhoKnew
Get creative
Create a new look for the Personality Insights app Open the CSS files located in the publiccss
directory and have fun making changes to the files Watch as your changes are deployed live
Additional resources
Everything AND the kitchen sync Bluemix Live Sync is here httpsdeveloperibmcomdevops-
services20150213everything-kitchen-sync-Bluemix-live-sync
Bluemix Live Sync documentation
httpswwwngbluemixnetdocscm_mmc=developerWorks-_-dWdevcenter-_-devops-
services-_-lpmanageappsbluemixlivehtmlbluemixlive
27
Part 2B Bluemix Debug Sometimes staring at the code to figure out whatrsquos going wrong just doesnrsquot work Sometimes you really need
to debug the code or access the environment where the app is running This is where Bluemix Debug comes in
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for your Nodejs
apps
In this part yoursquoll continue on with the Personality Insights Nodejs app you created in part 2A
Learn this
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for
your Nodejs apps
Try this Note The Node Inspector Debugger currently only works in Chrome You may want to take this
opportunity to change browsers if you are not already using Chrome
1 Open the IBM Bluemix Debugger
a Navigate to httpibmbizcds-ids and sign in if you are not already authenticated
b In My Projects locate the tile for your Personality Insights app Click the Edit Code icon
( ) to open the Web IDE for your project
c In the Web IDErsquos top bar click the Debug button ( )
d When prompted for credentials input your IBM id and password
2 Use the shell
The Bluemix Shell allows you to explore and interact with the Bluemix environment where your
app is running by using a built-in bash shell
a On the IBM Bluemix Debugger page for your project click Open Shell A shell client
opens in your browser
b View the processes running in your Bluemix environment by inputting the following
command top
c Click NEW WINDOW
d Drag and drop the new window so that you can continue to observe your processes
while you explore the log files
e In the new window change directory to the log files by inputting the following
command cd logs
28
f View a list of the files in the logs directory by inputting the following command ls
g Notice that staging_tasklog is a file in your logs directory View the last 10 lines of the
log file by inputting the following command tail staging_tasklog
3 Use the Debugger
The Debugger allows you to debug Nodejs apps
a On the IBM Bluemix Debugger page for your project click Open Debugger The
Debugger takes about 30 seconds to load
b If the Navigator is not displayed on the left click the Expand Navigator button
c Select appjs in the Navigator to open the file
d Add a breakpoint on line 48 by clicking 48
e In a different tab or window navigate to your running app
f Click Analyze
g Switch back to the tab or window with your Debugger Notice that the breakpoint has
been hit On the right you can view the Call Stack and Variables You can also use
buttons on the right to step over the next function call step into the next function call
and step out of the next function call
h When you have finished exploring your running app click the Resume script execution
button ( ) on the right
Note that from the IBM Bluemix Debugger page you can choose to suspend the app which will
restart the app and break at the first line of the app
29
Tweet this
Bluemix + DevOpsServices + Shell = a happy developer NoDownloadsRequired [include a
screenshot of the shell in your browser]
Just debugged my Bluemix app by using the debugger in DevOpsServices
NoDownloadsRequired [take a selfie of you in front of your debugger looking very excited]
Get creative
Use some of your favorite commands to explore the Bluemix environment where your app runs
Additional resources
Bluemix Live Sync
httpswwwngBluemixnetdocsmanageappsBluemixlivehtmlBluemixlivedebugger
Learning the Shell httplinuxcommandorglc3_learning_the_shellphp
19
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Build Stage
c Notice that the Input Type is set to SCM Repository by default This means the input for
the stage will be your git repository
d Notice that Run jobs whenever a change is pushed to Git is selected by default This
means that whenever you or someone on your team pushes code to your projectrsquos
repository the build stage will automatically be triggered
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Build
g Since this app does not require compilation (unlike a Java app) we will use the Simple
builder type Note that you can choose from a variety of builders
h Notice that the Stop running this stage if this job fails is checked by default This means
that any jobs further down the pipeline will not execute and the whole stage will be
marked as failed if a failure occurs
i Click SAVE
6 Add a ldquodeploy to development spacerdquo stage
Now we will add a deployment to the space that represents your development space Some
might call this a quality assurance or test space It is a place where developers can test their
code live in a production quality environment without actually putting it in production
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Dev Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the previous stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default This
will configure your pipeline so that whenever someone pushes code to your projectrsquos
repository the build step will run and if it succeeds a deploy to the development
environment will be kicked off
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Application Name to be a name that is unique to your Bluemix dev space
h By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
20
developers on your team will be able to test their code In the Script section after cf push ldquo$CF_APPrdquo
add -n whateverYouWantYourUrlToBe Note the url needs to be unique across
all Bluemix apps so be creative
i Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
j Next add a command to restage your app with the newly bound services cf restage $CF_APP
k The script section should now look similar to the following cf push $CF_APP -n fbf-lauren-dev
cf bind-service $CF_APP Cloudant-dev
cf bind-service $CF_APP Twilio-dev
cf restage $CF_APP
l Note that if we had automated tests associated with this project we could add a test
job to this stage so that the deploy would run and then tests could be executed against
that deployment
m Click SAVE
7 Add a deploy to production space stage
Now we will add a deployment to the space that represents your production space This space
is where you keep apps that your end users will use
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Prod Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the Build Stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default Since
we donrsquot have any automated tests included in this pipeline automatically deploying to
production is probably not safe Select Run jobs only when this stage is run manually
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Space to be prod
h Update the Application Name to be a name that is unique to your Bluemix prod space
i By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
21
your end users will be able to access your app In the Script section after cf push ldquo$CF_APPrdquo
add -n whateveryouwantyoururltobe Note the url needs to be unique across
all Bluemix apps so be creative
j Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
k Next add a command to restage your app with the newly bound services cf restage $CF_APP
l The script section should now look similar to the following cf push $CF_APP -n fbf-lauren
cf bind-service $CF_APP Cloudant-prod
cf bind-service $CF_APP Twilio-prod
cf restage $CF_APP
m Click SAVE
8 Kick off the pipeline
Now that we have the build pipeline configured itrsquos time to try it out To trigger the pipeline
we could make a change to our projectrsquos code and push the change to our Git repository or we
could manually request a build
a On the Pipeline page click the Play button ( ) in the Build Stage to kick off the first
stage of the pipeline manually
The build pipeline will go through the build and deploy to dev steps If you like what was
deployed to dev you can drag and drop the build from the Build Stage tile to the Prod
Deployment tile to deploy it there
Tweet this
Dove into DevOps by creating a release pipeline for my app [attach a screenshot of the Build amp
Deploy page for your app] Bluemix DevOpsServices
22
Get creative
Make a change to your code and watch the build pipeline automatically deploy it for you
Zero downtime deployments are very important to web applications Design and implement a
strategy to deploy your app to your production space without any downtime Hint check out
this article httpwwwibmcomdeveloperworkscloudlibrarycl-Bluemix-rollingpipeline
Additional resources
DevOps for Dummies ebook httpibmcodevopsfordummies
Top 10 Practices for Effective DevOps httpwwwdrdobbscomarchitecture-and-designtop-
10-practices-for-effective-devops240149363
Cloud Computing Trends 2014 State of the Cloud Survey
httpwwwrightscalecomblogcloud-industry-insightscloud-computing-trends-2014-state-
cloud-survey
DevOps Embracing Cloud Services httpwwwmidsizeinsidercomen-usarticledevops-
embracing-cloud-servicesVJmrScABg
23
Part 2A Live Edit In this part yoursquoll get to use an exciting new feature Live Edit The Live Edit feature allows you to make
changes to your application and have them deployed nearly instantaneously to your deployed app Itrsquos just like
editing files locallyhellipexcept you donrsquot have to set up a development environment
Since the Live Edit feature is currently optimized for Nodejs we will create a new app using the Personality
Insights Nodejs Web Starter boilerplate (what a concise name) The exciting thing about this boilerplate is that
it uses IBM Watson (remember Watson the supercomputer that beat Jeopardy champions a few years ago)
services
In this part you will create a new Bluemix app and leverage the Live Edit feature to see the changes you make
be deployed almost instantly to your running app
Learn this
Live Edit allows you to see changes you make in the DevOps Services Web IDE reflected in real-
time to your app deployed on Bluemix Itrsquos just like editing files locallyhellipexcept you donrsquot have
to set up a development environment
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app Changes you make in Node modules (like JavaScript files)
will require a fast restart of the app in order to be reflected in your deployed app
Try this
1 Sign up for DevOps Services if you have not done so already
a Navigate to httpibmbizcds-bluemix and sign up
b As part of the Bluemix registration process you will receive an e-mail asking you to
confirm your account If you do not confirm you are not registered If you do not
receive a confirmation e-mail send a note to idbluemixnet
c Navigate to httpibmbizcds-ids and register for DevOps Services using the same IBM
id you used for Bluemix
2 Create a Nodejs app using a Bluemix boilerplate
The first thing we need is a Nodejs app One of the fastest ways to get a new app is to use a
Bluemix boilerplate
a Navigate to httpibmbizcds-bluemix
b Log in if you are not already authenticated
c Click CATALOG The Catalog is your place to browse the available boilerplates (sample
applications) runtimes and services
d In the Boilerplates section click Personality Insights Nodejs Web Starter
24
e Input a name for the app (what the app will be referred to in Bluemix) and a host for the
app (the part of the url that will go before mybluemixnet) Note that the host must be
globally unique across all of Bluemix so be creative
f Click CREATE A copy of the boilerplate code will be put in to a new app for you and
then deployed to Bluemix
g Click Overview In the APP HEALTH section wait for the message ldquoYour app is
runningrdquo to be displayed
h When your app is running click on your route (toward the top of the page) to open your
running app
3 Explore the Nodejs app
Now that your app is running letrsquos take a moment to explore it The Personality Insights app
uses the Watson Personality Insights service to analyze text and determine personality traits of
the textrsquos author
a The app includes sample text from Moby Dick Click ANALYZE to learn about the
personality of Moby Dickrsquos author Herman Melville Textual output as well as a
graphical visualization are displayed
b Navigate to one of your favorite websites with English text (keep it office-friendlyhellipso
perhaps choose your favorite news site) and copy a block of text
c Return to your Personality Insights App and paste the text in the Try the Service box
d Click ANALYZE View the textual output as well as the graphical visualization
4 Prepare for Live Edit
Wersquove tested the app and now wersquoll prep to make some changes to it
a Return to the Bluemix page for your Personality Insights app If your app is not in a
separate window or tab right-click on your apprsquos route and choose an option to open
the link in a new window or tab
b Click ADD GIT in the upper-right corner
c Click CONTINUE in the Create Git Repository dialog Bluemix will take a copy of your
apprsquos code and put it in a Git repository hosted at DevOps Services
d Click CLOSE once the Git Repository has been successfully created
e Click EDIT CODE in the upper-right corner to open the DevOps Services Web IDE
f Toggle the Live Edit option to on
g If prompted to redeploy click OK The app will redeploy so changes can be made live to
your deployed app When the app finishes deploying a green dot will be displayed in
the run bar
25
When the app finishes deploying you are ready to make live edits
5 Change a static file
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app
a In the navigator view on the left expand views
b Select layoutjade
c Update the h2 to say something like ldquoThis open lab is so great that Irsquom going to Tweet
about itrdquo
d Switch to your tab or window that has your running app
e Refresh the page
f Note that the heading of your app was changed instantly You didnrsquot have to wait for
the app to redeploy
g Make a few more changes to static files and watch your app update in real time
6 Change a node module
Changes to node modules require a fast app restart (not a full redeploy) in order to be deployed
because the server caches node modules in memory
a Select the root directory of your app in the navigator in the left pane
b Click File gt New gt File
c The name of the file is highlighted so you can rename it Type defaulttexttxt and press
Enter or Return on your keyboard
d In the editor on the right type or paste the text that you want to use as the default text
in the app
e Select the appjs file in the navigator in the left pane
f In the editor on the right look for the dummy_text variable around line 25 Replace
mobydicktxt with defaulttexttxt
g In the web IDEs top bar click the Restart button ( )
h When the app finishes restarting (which only takes a few seconds) a green dot is
displayed in the run bar
26
i Switch to the tab or window that has your running app Refresh the page to see the new
text (If your browser cached the page and you dont see the text update browse to
your apps URL again and the change should be displayed)
Tweet this
Developing in the cloud using Bluemix DevOpsServices is now as fast and easy as developing
locally WhoKnew
Get creative
Create a new look for the Personality Insights app Open the CSS files located in the publiccss
directory and have fun making changes to the files Watch as your changes are deployed live
Additional resources
Everything AND the kitchen sync Bluemix Live Sync is here httpsdeveloperibmcomdevops-
services20150213everything-kitchen-sync-Bluemix-live-sync
Bluemix Live Sync documentation
httpswwwngbluemixnetdocscm_mmc=developerWorks-_-dWdevcenter-_-devops-
services-_-lpmanageappsbluemixlivehtmlbluemixlive
27
Part 2B Bluemix Debug Sometimes staring at the code to figure out whatrsquos going wrong just doesnrsquot work Sometimes you really need
to debug the code or access the environment where the app is running This is where Bluemix Debug comes in
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for your Nodejs
apps
In this part yoursquoll continue on with the Personality Insights Nodejs app you created in part 2A
Learn this
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for
your Nodejs apps
Try this Note The Node Inspector Debugger currently only works in Chrome You may want to take this
opportunity to change browsers if you are not already using Chrome
1 Open the IBM Bluemix Debugger
a Navigate to httpibmbizcds-ids and sign in if you are not already authenticated
b In My Projects locate the tile for your Personality Insights app Click the Edit Code icon
( ) to open the Web IDE for your project
c In the Web IDErsquos top bar click the Debug button ( )
d When prompted for credentials input your IBM id and password
2 Use the shell
The Bluemix Shell allows you to explore and interact with the Bluemix environment where your
app is running by using a built-in bash shell
a On the IBM Bluemix Debugger page for your project click Open Shell A shell client
opens in your browser
b View the processes running in your Bluemix environment by inputting the following
command top
c Click NEW WINDOW
d Drag and drop the new window so that you can continue to observe your processes
while you explore the log files
e In the new window change directory to the log files by inputting the following
command cd logs
28
f View a list of the files in the logs directory by inputting the following command ls
g Notice that staging_tasklog is a file in your logs directory View the last 10 lines of the
log file by inputting the following command tail staging_tasklog
3 Use the Debugger
The Debugger allows you to debug Nodejs apps
a On the IBM Bluemix Debugger page for your project click Open Debugger The
Debugger takes about 30 seconds to load
b If the Navigator is not displayed on the left click the Expand Navigator button
c Select appjs in the Navigator to open the file
d Add a breakpoint on line 48 by clicking 48
e In a different tab or window navigate to your running app
f Click Analyze
g Switch back to the tab or window with your Debugger Notice that the breakpoint has
been hit On the right you can view the Call Stack and Variables You can also use
buttons on the right to step over the next function call step into the next function call
and step out of the next function call
h When you have finished exploring your running app click the Resume script execution
button ( ) on the right
Note that from the IBM Bluemix Debugger page you can choose to suspend the app which will
restart the app and break at the first line of the app
29
Tweet this
Bluemix + DevOpsServices + Shell = a happy developer NoDownloadsRequired [include a
screenshot of the shell in your browser]
Just debugged my Bluemix app by using the debugger in DevOpsServices
NoDownloadsRequired [take a selfie of you in front of your debugger looking very excited]
Get creative
Use some of your favorite commands to explore the Bluemix environment where your app runs
Additional resources
Bluemix Live Sync
httpswwwngBluemixnetdocsmanageappsBluemixlivehtmlBluemixlivedebugger
Learning the Shell httplinuxcommandorglc3_learning_the_shellphp
20
developers on your team will be able to test their code In the Script section after cf push ldquo$CF_APPrdquo
add -n whateverYouWantYourUrlToBe Note the url needs to be unique across
all Bluemix apps so be creative
i Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
j Next add a command to restage your app with the newly bound services cf restage $CF_APP
k The script section should now look similar to the following cf push $CF_APP -n fbf-lauren-dev
cf bind-service $CF_APP Cloudant-dev
cf bind-service $CF_APP Twilio-dev
cf restage $CF_APP
l Note that if we had automated tests associated with this project we could add a test
job to this stage so that the deploy would run and then tests could be executed against
that deployment
m Click SAVE
7 Add a deploy to production space stage
Now we will add a deployment to the space that represents your production space This space
is where you keep apps that your end users will use
a Click ADD STAGE
b Click MyStage at the top of the stage configuration box and name your stage by typing
Prod Deployment
c Notice that the Input Type is set to Build Artifacts This means that the build artifacts
created in the Build Stage will be the input to this stage
d Notice that Run jobs when the previous stage is completed is selected by default Since
we donrsquot have any automated tests included in this pipeline automatically deploying to
production is probably not safe Select Run jobs only when this stage is run manually
e Click JOBS to open the Jobs section of the stage configuration
f Click ADD JOB and select Deploy
g Update the Space to be prod
h Update the Application Name to be a name that is unique to your Bluemix prod space
i By default the deployer will use the instructions in the manifest Rather than deploying
to a url with a random string of characters we want this to be a consistent place where
21
your end users will be able to access your app In the Script section after cf push ldquo$CF_APPrdquo
add -n whateveryouwantyoururltobe Note the url needs to be unique across
all Bluemix apps so be creative
j Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
k Next add a command to restage your app with the newly bound services cf restage $CF_APP
l The script section should now look similar to the following cf push $CF_APP -n fbf-lauren
cf bind-service $CF_APP Cloudant-prod
cf bind-service $CF_APP Twilio-prod
cf restage $CF_APP
m Click SAVE
8 Kick off the pipeline
Now that we have the build pipeline configured itrsquos time to try it out To trigger the pipeline
we could make a change to our projectrsquos code and push the change to our Git repository or we
could manually request a build
a On the Pipeline page click the Play button ( ) in the Build Stage to kick off the first
stage of the pipeline manually
The build pipeline will go through the build and deploy to dev steps If you like what was
deployed to dev you can drag and drop the build from the Build Stage tile to the Prod
Deployment tile to deploy it there
Tweet this
Dove into DevOps by creating a release pipeline for my app [attach a screenshot of the Build amp
Deploy page for your app] Bluemix DevOpsServices
22
Get creative
Make a change to your code and watch the build pipeline automatically deploy it for you
Zero downtime deployments are very important to web applications Design and implement a
strategy to deploy your app to your production space without any downtime Hint check out
this article httpwwwibmcomdeveloperworkscloudlibrarycl-Bluemix-rollingpipeline
Additional resources
DevOps for Dummies ebook httpibmcodevopsfordummies
Top 10 Practices for Effective DevOps httpwwwdrdobbscomarchitecture-and-designtop-
10-practices-for-effective-devops240149363
Cloud Computing Trends 2014 State of the Cloud Survey
httpwwwrightscalecomblogcloud-industry-insightscloud-computing-trends-2014-state-
cloud-survey
DevOps Embracing Cloud Services httpwwwmidsizeinsidercomen-usarticledevops-
embracing-cloud-servicesVJmrScABg
23
Part 2A Live Edit In this part yoursquoll get to use an exciting new feature Live Edit The Live Edit feature allows you to make
changes to your application and have them deployed nearly instantaneously to your deployed app Itrsquos just like
editing files locallyhellipexcept you donrsquot have to set up a development environment
Since the Live Edit feature is currently optimized for Nodejs we will create a new app using the Personality
Insights Nodejs Web Starter boilerplate (what a concise name) The exciting thing about this boilerplate is that
it uses IBM Watson (remember Watson the supercomputer that beat Jeopardy champions a few years ago)
services
In this part you will create a new Bluemix app and leverage the Live Edit feature to see the changes you make
be deployed almost instantly to your running app
Learn this
Live Edit allows you to see changes you make in the DevOps Services Web IDE reflected in real-
time to your app deployed on Bluemix Itrsquos just like editing files locallyhellipexcept you donrsquot have
to set up a development environment
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app Changes you make in Node modules (like JavaScript files)
will require a fast restart of the app in order to be reflected in your deployed app
Try this
1 Sign up for DevOps Services if you have not done so already
a Navigate to httpibmbizcds-bluemix and sign up
b As part of the Bluemix registration process you will receive an e-mail asking you to
confirm your account If you do not confirm you are not registered If you do not
receive a confirmation e-mail send a note to idbluemixnet
c Navigate to httpibmbizcds-ids and register for DevOps Services using the same IBM
id you used for Bluemix
2 Create a Nodejs app using a Bluemix boilerplate
The first thing we need is a Nodejs app One of the fastest ways to get a new app is to use a
Bluemix boilerplate
a Navigate to httpibmbizcds-bluemix
b Log in if you are not already authenticated
c Click CATALOG The Catalog is your place to browse the available boilerplates (sample
applications) runtimes and services
d In the Boilerplates section click Personality Insights Nodejs Web Starter
24
e Input a name for the app (what the app will be referred to in Bluemix) and a host for the
app (the part of the url that will go before mybluemixnet) Note that the host must be
globally unique across all of Bluemix so be creative
f Click CREATE A copy of the boilerplate code will be put in to a new app for you and
then deployed to Bluemix
g Click Overview In the APP HEALTH section wait for the message ldquoYour app is
runningrdquo to be displayed
h When your app is running click on your route (toward the top of the page) to open your
running app
3 Explore the Nodejs app
Now that your app is running letrsquos take a moment to explore it The Personality Insights app
uses the Watson Personality Insights service to analyze text and determine personality traits of
the textrsquos author
a The app includes sample text from Moby Dick Click ANALYZE to learn about the
personality of Moby Dickrsquos author Herman Melville Textual output as well as a
graphical visualization are displayed
b Navigate to one of your favorite websites with English text (keep it office-friendlyhellipso
perhaps choose your favorite news site) and copy a block of text
c Return to your Personality Insights App and paste the text in the Try the Service box
d Click ANALYZE View the textual output as well as the graphical visualization
4 Prepare for Live Edit
Wersquove tested the app and now wersquoll prep to make some changes to it
a Return to the Bluemix page for your Personality Insights app If your app is not in a
separate window or tab right-click on your apprsquos route and choose an option to open
the link in a new window or tab
b Click ADD GIT in the upper-right corner
c Click CONTINUE in the Create Git Repository dialog Bluemix will take a copy of your
apprsquos code and put it in a Git repository hosted at DevOps Services
d Click CLOSE once the Git Repository has been successfully created
e Click EDIT CODE in the upper-right corner to open the DevOps Services Web IDE
f Toggle the Live Edit option to on
g If prompted to redeploy click OK The app will redeploy so changes can be made live to
your deployed app When the app finishes deploying a green dot will be displayed in
the run bar
25
When the app finishes deploying you are ready to make live edits
5 Change a static file
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app
a In the navigator view on the left expand views
b Select layoutjade
c Update the h2 to say something like ldquoThis open lab is so great that Irsquom going to Tweet
about itrdquo
d Switch to your tab or window that has your running app
e Refresh the page
f Note that the heading of your app was changed instantly You didnrsquot have to wait for
the app to redeploy
g Make a few more changes to static files and watch your app update in real time
6 Change a node module
Changes to node modules require a fast app restart (not a full redeploy) in order to be deployed
because the server caches node modules in memory
a Select the root directory of your app in the navigator in the left pane
b Click File gt New gt File
c The name of the file is highlighted so you can rename it Type defaulttexttxt and press
Enter or Return on your keyboard
d In the editor on the right type or paste the text that you want to use as the default text
in the app
e Select the appjs file in the navigator in the left pane
f In the editor on the right look for the dummy_text variable around line 25 Replace
mobydicktxt with defaulttexttxt
g In the web IDEs top bar click the Restart button ( )
h When the app finishes restarting (which only takes a few seconds) a green dot is
displayed in the run bar
26
i Switch to the tab or window that has your running app Refresh the page to see the new
text (If your browser cached the page and you dont see the text update browse to
your apps URL again and the change should be displayed)
Tweet this
Developing in the cloud using Bluemix DevOpsServices is now as fast and easy as developing
locally WhoKnew
Get creative
Create a new look for the Personality Insights app Open the CSS files located in the publiccss
directory and have fun making changes to the files Watch as your changes are deployed live
Additional resources
Everything AND the kitchen sync Bluemix Live Sync is here httpsdeveloperibmcomdevops-
services20150213everything-kitchen-sync-Bluemix-live-sync
Bluemix Live Sync documentation
httpswwwngbluemixnetdocscm_mmc=developerWorks-_-dWdevcenter-_-devops-
services-_-lpmanageappsbluemixlivehtmlbluemixlive
27
Part 2B Bluemix Debug Sometimes staring at the code to figure out whatrsquos going wrong just doesnrsquot work Sometimes you really need
to debug the code or access the environment where the app is running This is where Bluemix Debug comes in
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for your Nodejs
apps
In this part yoursquoll continue on with the Personality Insights Nodejs app you created in part 2A
Learn this
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for
your Nodejs apps
Try this Note The Node Inspector Debugger currently only works in Chrome You may want to take this
opportunity to change browsers if you are not already using Chrome
1 Open the IBM Bluemix Debugger
a Navigate to httpibmbizcds-ids and sign in if you are not already authenticated
b In My Projects locate the tile for your Personality Insights app Click the Edit Code icon
( ) to open the Web IDE for your project
c In the Web IDErsquos top bar click the Debug button ( )
d When prompted for credentials input your IBM id and password
2 Use the shell
The Bluemix Shell allows you to explore and interact with the Bluemix environment where your
app is running by using a built-in bash shell
a On the IBM Bluemix Debugger page for your project click Open Shell A shell client
opens in your browser
b View the processes running in your Bluemix environment by inputting the following
command top
c Click NEW WINDOW
d Drag and drop the new window so that you can continue to observe your processes
while you explore the log files
e In the new window change directory to the log files by inputting the following
command cd logs
28
f View a list of the files in the logs directory by inputting the following command ls
g Notice that staging_tasklog is a file in your logs directory View the last 10 lines of the
log file by inputting the following command tail staging_tasklog
3 Use the Debugger
The Debugger allows you to debug Nodejs apps
a On the IBM Bluemix Debugger page for your project click Open Debugger The
Debugger takes about 30 seconds to load
b If the Navigator is not displayed on the left click the Expand Navigator button
c Select appjs in the Navigator to open the file
d Add a breakpoint on line 48 by clicking 48
e In a different tab or window navigate to your running app
f Click Analyze
g Switch back to the tab or window with your Debugger Notice that the breakpoint has
been hit On the right you can view the Call Stack and Variables You can also use
buttons on the right to step over the next function call step into the next function call
and step out of the next function call
h When you have finished exploring your running app click the Resume script execution
button ( ) on the right
Note that from the IBM Bluemix Debugger page you can choose to suspend the app which will
restart the app and break at the first line of the app
29
Tweet this
Bluemix + DevOpsServices + Shell = a happy developer NoDownloadsRequired [include a
screenshot of the shell in your browser]
Just debugged my Bluemix app by using the debugger in DevOpsServices
NoDownloadsRequired [take a selfie of you in front of your debugger looking very excited]
Get creative
Use some of your favorite commands to explore the Bluemix environment where your app runs
Additional resources
Bluemix Live Sync
httpswwwngBluemixnetdocsmanageappsBluemixlivehtmlBluemixlivedebugger
Learning the Shell httplinuxcommandorglc3_learning_the_shellphp
21
your end users will be able to access your app In the Script section after cf push ldquo$CF_APPrdquo
add -n whateveryouwantyoururltobe Note the url needs to be unique across
all Bluemix apps so be creative
j Under the cf push command add two lines that bind the services in your dev space
to the app The command should be the following cf bind-service $CF_APP nameOfYourCloudantService cf bind-service $CF_APP nameOfYourTwilioService
k Next add a command to restage your app with the newly bound services cf restage $CF_APP
l The script section should now look similar to the following cf push $CF_APP -n fbf-lauren
cf bind-service $CF_APP Cloudant-prod
cf bind-service $CF_APP Twilio-prod
cf restage $CF_APP
m Click SAVE
8 Kick off the pipeline
Now that we have the build pipeline configured itrsquos time to try it out To trigger the pipeline
we could make a change to our projectrsquos code and push the change to our Git repository or we
could manually request a build
a On the Pipeline page click the Play button ( ) in the Build Stage to kick off the first
stage of the pipeline manually
The build pipeline will go through the build and deploy to dev steps If you like what was
deployed to dev you can drag and drop the build from the Build Stage tile to the Prod
Deployment tile to deploy it there
Tweet this
Dove into DevOps by creating a release pipeline for my app [attach a screenshot of the Build amp
Deploy page for your app] Bluemix DevOpsServices
22
Get creative
Make a change to your code and watch the build pipeline automatically deploy it for you
Zero downtime deployments are very important to web applications Design and implement a
strategy to deploy your app to your production space without any downtime Hint check out
this article httpwwwibmcomdeveloperworkscloudlibrarycl-Bluemix-rollingpipeline
Additional resources
DevOps for Dummies ebook httpibmcodevopsfordummies
Top 10 Practices for Effective DevOps httpwwwdrdobbscomarchitecture-and-designtop-
10-practices-for-effective-devops240149363
Cloud Computing Trends 2014 State of the Cloud Survey
httpwwwrightscalecomblogcloud-industry-insightscloud-computing-trends-2014-state-
cloud-survey
DevOps Embracing Cloud Services httpwwwmidsizeinsidercomen-usarticledevops-
embracing-cloud-servicesVJmrScABg
23
Part 2A Live Edit In this part yoursquoll get to use an exciting new feature Live Edit The Live Edit feature allows you to make
changes to your application and have them deployed nearly instantaneously to your deployed app Itrsquos just like
editing files locallyhellipexcept you donrsquot have to set up a development environment
Since the Live Edit feature is currently optimized for Nodejs we will create a new app using the Personality
Insights Nodejs Web Starter boilerplate (what a concise name) The exciting thing about this boilerplate is that
it uses IBM Watson (remember Watson the supercomputer that beat Jeopardy champions a few years ago)
services
In this part you will create a new Bluemix app and leverage the Live Edit feature to see the changes you make
be deployed almost instantly to your running app
Learn this
Live Edit allows you to see changes you make in the DevOps Services Web IDE reflected in real-
time to your app deployed on Bluemix Itrsquos just like editing files locallyhellipexcept you donrsquot have
to set up a development environment
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app Changes you make in Node modules (like JavaScript files)
will require a fast restart of the app in order to be reflected in your deployed app
Try this
1 Sign up for DevOps Services if you have not done so already
a Navigate to httpibmbizcds-bluemix and sign up
b As part of the Bluemix registration process you will receive an e-mail asking you to
confirm your account If you do not confirm you are not registered If you do not
receive a confirmation e-mail send a note to idbluemixnet
c Navigate to httpibmbizcds-ids and register for DevOps Services using the same IBM
id you used for Bluemix
2 Create a Nodejs app using a Bluemix boilerplate
The first thing we need is a Nodejs app One of the fastest ways to get a new app is to use a
Bluemix boilerplate
a Navigate to httpibmbizcds-bluemix
b Log in if you are not already authenticated
c Click CATALOG The Catalog is your place to browse the available boilerplates (sample
applications) runtimes and services
d In the Boilerplates section click Personality Insights Nodejs Web Starter
24
e Input a name for the app (what the app will be referred to in Bluemix) and a host for the
app (the part of the url that will go before mybluemixnet) Note that the host must be
globally unique across all of Bluemix so be creative
f Click CREATE A copy of the boilerplate code will be put in to a new app for you and
then deployed to Bluemix
g Click Overview In the APP HEALTH section wait for the message ldquoYour app is
runningrdquo to be displayed
h When your app is running click on your route (toward the top of the page) to open your
running app
3 Explore the Nodejs app
Now that your app is running letrsquos take a moment to explore it The Personality Insights app
uses the Watson Personality Insights service to analyze text and determine personality traits of
the textrsquos author
a The app includes sample text from Moby Dick Click ANALYZE to learn about the
personality of Moby Dickrsquos author Herman Melville Textual output as well as a
graphical visualization are displayed
b Navigate to one of your favorite websites with English text (keep it office-friendlyhellipso
perhaps choose your favorite news site) and copy a block of text
c Return to your Personality Insights App and paste the text in the Try the Service box
d Click ANALYZE View the textual output as well as the graphical visualization
4 Prepare for Live Edit
Wersquove tested the app and now wersquoll prep to make some changes to it
a Return to the Bluemix page for your Personality Insights app If your app is not in a
separate window or tab right-click on your apprsquos route and choose an option to open
the link in a new window or tab
b Click ADD GIT in the upper-right corner
c Click CONTINUE in the Create Git Repository dialog Bluemix will take a copy of your
apprsquos code and put it in a Git repository hosted at DevOps Services
d Click CLOSE once the Git Repository has been successfully created
e Click EDIT CODE in the upper-right corner to open the DevOps Services Web IDE
f Toggle the Live Edit option to on
g If prompted to redeploy click OK The app will redeploy so changes can be made live to
your deployed app When the app finishes deploying a green dot will be displayed in
the run bar
25
When the app finishes deploying you are ready to make live edits
5 Change a static file
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app
a In the navigator view on the left expand views
b Select layoutjade
c Update the h2 to say something like ldquoThis open lab is so great that Irsquom going to Tweet
about itrdquo
d Switch to your tab or window that has your running app
e Refresh the page
f Note that the heading of your app was changed instantly You didnrsquot have to wait for
the app to redeploy
g Make a few more changes to static files and watch your app update in real time
6 Change a node module
Changes to node modules require a fast app restart (not a full redeploy) in order to be deployed
because the server caches node modules in memory
a Select the root directory of your app in the navigator in the left pane
b Click File gt New gt File
c The name of the file is highlighted so you can rename it Type defaulttexttxt and press
Enter or Return on your keyboard
d In the editor on the right type or paste the text that you want to use as the default text
in the app
e Select the appjs file in the navigator in the left pane
f In the editor on the right look for the dummy_text variable around line 25 Replace
mobydicktxt with defaulttexttxt
g In the web IDEs top bar click the Restart button ( )
h When the app finishes restarting (which only takes a few seconds) a green dot is
displayed in the run bar
26
i Switch to the tab or window that has your running app Refresh the page to see the new
text (If your browser cached the page and you dont see the text update browse to
your apps URL again and the change should be displayed)
Tweet this
Developing in the cloud using Bluemix DevOpsServices is now as fast and easy as developing
locally WhoKnew
Get creative
Create a new look for the Personality Insights app Open the CSS files located in the publiccss
directory and have fun making changes to the files Watch as your changes are deployed live
Additional resources
Everything AND the kitchen sync Bluemix Live Sync is here httpsdeveloperibmcomdevops-
services20150213everything-kitchen-sync-Bluemix-live-sync
Bluemix Live Sync documentation
httpswwwngbluemixnetdocscm_mmc=developerWorks-_-dWdevcenter-_-devops-
services-_-lpmanageappsbluemixlivehtmlbluemixlive
27
Part 2B Bluemix Debug Sometimes staring at the code to figure out whatrsquos going wrong just doesnrsquot work Sometimes you really need
to debug the code or access the environment where the app is running This is where Bluemix Debug comes in
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for your Nodejs
apps
In this part yoursquoll continue on with the Personality Insights Nodejs app you created in part 2A
Learn this
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for
your Nodejs apps
Try this Note The Node Inspector Debugger currently only works in Chrome You may want to take this
opportunity to change browsers if you are not already using Chrome
1 Open the IBM Bluemix Debugger
a Navigate to httpibmbizcds-ids and sign in if you are not already authenticated
b In My Projects locate the tile for your Personality Insights app Click the Edit Code icon
( ) to open the Web IDE for your project
c In the Web IDErsquos top bar click the Debug button ( )
d When prompted for credentials input your IBM id and password
2 Use the shell
The Bluemix Shell allows you to explore and interact with the Bluemix environment where your
app is running by using a built-in bash shell
a On the IBM Bluemix Debugger page for your project click Open Shell A shell client
opens in your browser
b View the processes running in your Bluemix environment by inputting the following
command top
c Click NEW WINDOW
d Drag and drop the new window so that you can continue to observe your processes
while you explore the log files
e In the new window change directory to the log files by inputting the following
command cd logs
28
f View a list of the files in the logs directory by inputting the following command ls
g Notice that staging_tasklog is a file in your logs directory View the last 10 lines of the
log file by inputting the following command tail staging_tasklog
3 Use the Debugger
The Debugger allows you to debug Nodejs apps
a On the IBM Bluemix Debugger page for your project click Open Debugger The
Debugger takes about 30 seconds to load
b If the Navigator is not displayed on the left click the Expand Navigator button
c Select appjs in the Navigator to open the file
d Add a breakpoint on line 48 by clicking 48
e In a different tab or window navigate to your running app
f Click Analyze
g Switch back to the tab or window with your Debugger Notice that the breakpoint has
been hit On the right you can view the Call Stack and Variables You can also use
buttons on the right to step over the next function call step into the next function call
and step out of the next function call
h When you have finished exploring your running app click the Resume script execution
button ( ) on the right
Note that from the IBM Bluemix Debugger page you can choose to suspend the app which will
restart the app and break at the first line of the app
29
Tweet this
Bluemix + DevOpsServices + Shell = a happy developer NoDownloadsRequired [include a
screenshot of the shell in your browser]
Just debugged my Bluemix app by using the debugger in DevOpsServices
NoDownloadsRequired [take a selfie of you in front of your debugger looking very excited]
Get creative
Use some of your favorite commands to explore the Bluemix environment where your app runs
Additional resources
Bluemix Live Sync
httpswwwngBluemixnetdocsmanageappsBluemixlivehtmlBluemixlivedebugger
Learning the Shell httplinuxcommandorglc3_learning_the_shellphp
22
Get creative
Make a change to your code and watch the build pipeline automatically deploy it for you
Zero downtime deployments are very important to web applications Design and implement a
strategy to deploy your app to your production space without any downtime Hint check out
this article httpwwwibmcomdeveloperworkscloudlibrarycl-Bluemix-rollingpipeline
Additional resources
DevOps for Dummies ebook httpibmcodevopsfordummies
Top 10 Practices for Effective DevOps httpwwwdrdobbscomarchitecture-and-designtop-
10-practices-for-effective-devops240149363
Cloud Computing Trends 2014 State of the Cloud Survey
httpwwwrightscalecomblogcloud-industry-insightscloud-computing-trends-2014-state-
cloud-survey
DevOps Embracing Cloud Services httpwwwmidsizeinsidercomen-usarticledevops-
embracing-cloud-servicesVJmrScABg
23
Part 2A Live Edit In this part yoursquoll get to use an exciting new feature Live Edit The Live Edit feature allows you to make
changes to your application and have them deployed nearly instantaneously to your deployed app Itrsquos just like
editing files locallyhellipexcept you donrsquot have to set up a development environment
Since the Live Edit feature is currently optimized for Nodejs we will create a new app using the Personality
Insights Nodejs Web Starter boilerplate (what a concise name) The exciting thing about this boilerplate is that
it uses IBM Watson (remember Watson the supercomputer that beat Jeopardy champions a few years ago)
services
In this part you will create a new Bluemix app and leverage the Live Edit feature to see the changes you make
be deployed almost instantly to your running app
Learn this
Live Edit allows you to see changes you make in the DevOps Services Web IDE reflected in real-
time to your app deployed on Bluemix Itrsquos just like editing files locallyhellipexcept you donrsquot have
to set up a development environment
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app Changes you make in Node modules (like JavaScript files)
will require a fast restart of the app in order to be reflected in your deployed app
Try this
1 Sign up for DevOps Services if you have not done so already
a Navigate to httpibmbizcds-bluemix and sign up
b As part of the Bluemix registration process you will receive an e-mail asking you to
confirm your account If you do not confirm you are not registered If you do not
receive a confirmation e-mail send a note to idbluemixnet
c Navigate to httpibmbizcds-ids and register for DevOps Services using the same IBM
id you used for Bluemix
2 Create a Nodejs app using a Bluemix boilerplate
The first thing we need is a Nodejs app One of the fastest ways to get a new app is to use a
Bluemix boilerplate
a Navigate to httpibmbizcds-bluemix
b Log in if you are not already authenticated
c Click CATALOG The Catalog is your place to browse the available boilerplates (sample
applications) runtimes and services
d In the Boilerplates section click Personality Insights Nodejs Web Starter
24
e Input a name for the app (what the app will be referred to in Bluemix) and a host for the
app (the part of the url that will go before mybluemixnet) Note that the host must be
globally unique across all of Bluemix so be creative
f Click CREATE A copy of the boilerplate code will be put in to a new app for you and
then deployed to Bluemix
g Click Overview In the APP HEALTH section wait for the message ldquoYour app is
runningrdquo to be displayed
h When your app is running click on your route (toward the top of the page) to open your
running app
3 Explore the Nodejs app
Now that your app is running letrsquos take a moment to explore it The Personality Insights app
uses the Watson Personality Insights service to analyze text and determine personality traits of
the textrsquos author
a The app includes sample text from Moby Dick Click ANALYZE to learn about the
personality of Moby Dickrsquos author Herman Melville Textual output as well as a
graphical visualization are displayed
b Navigate to one of your favorite websites with English text (keep it office-friendlyhellipso
perhaps choose your favorite news site) and copy a block of text
c Return to your Personality Insights App and paste the text in the Try the Service box
d Click ANALYZE View the textual output as well as the graphical visualization
4 Prepare for Live Edit
Wersquove tested the app and now wersquoll prep to make some changes to it
a Return to the Bluemix page for your Personality Insights app If your app is not in a
separate window or tab right-click on your apprsquos route and choose an option to open
the link in a new window or tab
b Click ADD GIT in the upper-right corner
c Click CONTINUE in the Create Git Repository dialog Bluemix will take a copy of your
apprsquos code and put it in a Git repository hosted at DevOps Services
d Click CLOSE once the Git Repository has been successfully created
e Click EDIT CODE in the upper-right corner to open the DevOps Services Web IDE
f Toggle the Live Edit option to on
g If prompted to redeploy click OK The app will redeploy so changes can be made live to
your deployed app When the app finishes deploying a green dot will be displayed in
the run bar
25
When the app finishes deploying you are ready to make live edits
5 Change a static file
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app
a In the navigator view on the left expand views
b Select layoutjade
c Update the h2 to say something like ldquoThis open lab is so great that Irsquom going to Tweet
about itrdquo
d Switch to your tab or window that has your running app
e Refresh the page
f Note that the heading of your app was changed instantly You didnrsquot have to wait for
the app to redeploy
g Make a few more changes to static files and watch your app update in real time
6 Change a node module
Changes to node modules require a fast app restart (not a full redeploy) in order to be deployed
because the server caches node modules in memory
a Select the root directory of your app in the navigator in the left pane
b Click File gt New gt File
c The name of the file is highlighted so you can rename it Type defaulttexttxt and press
Enter or Return on your keyboard
d In the editor on the right type or paste the text that you want to use as the default text
in the app
e Select the appjs file in the navigator in the left pane
f In the editor on the right look for the dummy_text variable around line 25 Replace
mobydicktxt with defaulttexttxt
g In the web IDEs top bar click the Restart button ( )
h When the app finishes restarting (which only takes a few seconds) a green dot is
displayed in the run bar
26
i Switch to the tab or window that has your running app Refresh the page to see the new
text (If your browser cached the page and you dont see the text update browse to
your apps URL again and the change should be displayed)
Tweet this
Developing in the cloud using Bluemix DevOpsServices is now as fast and easy as developing
locally WhoKnew
Get creative
Create a new look for the Personality Insights app Open the CSS files located in the publiccss
directory and have fun making changes to the files Watch as your changes are deployed live
Additional resources
Everything AND the kitchen sync Bluemix Live Sync is here httpsdeveloperibmcomdevops-
services20150213everything-kitchen-sync-Bluemix-live-sync
Bluemix Live Sync documentation
httpswwwngbluemixnetdocscm_mmc=developerWorks-_-dWdevcenter-_-devops-
services-_-lpmanageappsbluemixlivehtmlbluemixlive
27
Part 2B Bluemix Debug Sometimes staring at the code to figure out whatrsquos going wrong just doesnrsquot work Sometimes you really need
to debug the code or access the environment where the app is running This is where Bluemix Debug comes in
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for your Nodejs
apps
In this part yoursquoll continue on with the Personality Insights Nodejs app you created in part 2A
Learn this
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for
your Nodejs apps
Try this Note The Node Inspector Debugger currently only works in Chrome You may want to take this
opportunity to change browsers if you are not already using Chrome
1 Open the IBM Bluemix Debugger
a Navigate to httpibmbizcds-ids and sign in if you are not already authenticated
b In My Projects locate the tile for your Personality Insights app Click the Edit Code icon
( ) to open the Web IDE for your project
c In the Web IDErsquos top bar click the Debug button ( )
d When prompted for credentials input your IBM id and password
2 Use the shell
The Bluemix Shell allows you to explore and interact with the Bluemix environment where your
app is running by using a built-in bash shell
a On the IBM Bluemix Debugger page for your project click Open Shell A shell client
opens in your browser
b View the processes running in your Bluemix environment by inputting the following
command top
c Click NEW WINDOW
d Drag and drop the new window so that you can continue to observe your processes
while you explore the log files
e In the new window change directory to the log files by inputting the following
command cd logs
28
f View a list of the files in the logs directory by inputting the following command ls
g Notice that staging_tasklog is a file in your logs directory View the last 10 lines of the
log file by inputting the following command tail staging_tasklog
3 Use the Debugger
The Debugger allows you to debug Nodejs apps
a On the IBM Bluemix Debugger page for your project click Open Debugger The
Debugger takes about 30 seconds to load
b If the Navigator is not displayed on the left click the Expand Navigator button
c Select appjs in the Navigator to open the file
d Add a breakpoint on line 48 by clicking 48
e In a different tab or window navigate to your running app
f Click Analyze
g Switch back to the tab or window with your Debugger Notice that the breakpoint has
been hit On the right you can view the Call Stack and Variables You can also use
buttons on the right to step over the next function call step into the next function call
and step out of the next function call
h When you have finished exploring your running app click the Resume script execution
button ( ) on the right
Note that from the IBM Bluemix Debugger page you can choose to suspend the app which will
restart the app and break at the first line of the app
29
Tweet this
Bluemix + DevOpsServices + Shell = a happy developer NoDownloadsRequired [include a
screenshot of the shell in your browser]
Just debugged my Bluemix app by using the debugger in DevOpsServices
NoDownloadsRequired [take a selfie of you in front of your debugger looking very excited]
Get creative
Use some of your favorite commands to explore the Bluemix environment where your app runs
Additional resources
Bluemix Live Sync
httpswwwngBluemixnetdocsmanageappsBluemixlivehtmlBluemixlivedebugger
Learning the Shell httplinuxcommandorglc3_learning_the_shellphp
23
Part 2A Live Edit In this part yoursquoll get to use an exciting new feature Live Edit The Live Edit feature allows you to make
changes to your application and have them deployed nearly instantaneously to your deployed app Itrsquos just like
editing files locallyhellipexcept you donrsquot have to set up a development environment
Since the Live Edit feature is currently optimized for Nodejs we will create a new app using the Personality
Insights Nodejs Web Starter boilerplate (what a concise name) The exciting thing about this boilerplate is that
it uses IBM Watson (remember Watson the supercomputer that beat Jeopardy champions a few years ago)
services
In this part you will create a new Bluemix app and leverage the Live Edit feature to see the changes you make
be deployed almost instantly to your running app
Learn this
Live Edit allows you to see changes you make in the DevOps Services Web IDE reflected in real-
time to your app deployed on Bluemix Itrsquos just like editing files locallyhellipexcept you donrsquot have
to set up a development environment
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app Changes you make in Node modules (like JavaScript files)
will require a fast restart of the app in order to be reflected in your deployed app
Try this
1 Sign up for DevOps Services if you have not done so already
a Navigate to httpibmbizcds-bluemix and sign up
b As part of the Bluemix registration process you will receive an e-mail asking you to
confirm your account If you do not confirm you are not registered If you do not
receive a confirmation e-mail send a note to idbluemixnet
c Navigate to httpibmbizcds-ids and register for DevOps Services using the same IBM
id you used for Bluemix
2 Create a Nodejs app using a Bluemix boilerplate
The first thing we need is a Nodejs app One of the fastest ways to get a new app is to use a
Bluemix boilerplate
a Navigate to httpibmbizcds-bluemix
b Log in if you are not already authenticated
c Click CATALOG The Catalog is your place to browse the available boilerplates (sample
applications) runtimes and services
d In the Boilerplates section click Personality Insights Nodejs Web Starter
24
e Input a name for the app (what the app will be referred to in Bluemix) and a host for the
app (the part of the url that will go before mybluemixnet) Note that the host must be
globally unique across all of Bluemix so be creative
f Click CREATE A copy of the boilerplate code will be put in to a new app for you and
then deployed to Bluemix
g Click Overview In the APP HEALTH section wait for the message ldquoYour app is
runningrdquo to be displayed
h When your app is running click on your route (toward the top of the page) to open your
running app
3 Explore the Nodejs app
Now that your app is running letrsquos take a moment to explore it The Personality Insights app
uses the Watson Personality Insights service to analyze text and determine personality traits of
the textrsquos author
a The app includes sample text from Moby Dick Click ANALYZE to learn about the
personality of Moby Dickrsquos author Herman Melville Textual output as well as a
graphical visualization are displayed
b Navigate to one of your favorite websites with English text (keep it office-friendlyhellipso
perhaps choose your favorite news site) and copy a block of text
c Return to your Personality Insights App and paste the text in the Try the Service box
d Click ANALYZE View the textual output as well as the graphical visualization
4 Prepare for Live Edit
Wersquove tested the app and now wersquoll prep to make some changes to it
a Return to the Bluemix page for your Personality Insights app If your app is not in a
separate window or tab right-click on your apprsquos route and choose an option to open
the link in a new window or tab
b Click ADD GIT in the upper-right corner
c Click CONTINUE in the Create Git Repository dialog Bluemix will take a copy of your
apprsquos code and put it in a Git repository hosted at DevOps Services
d Click CLOSE once the Git Repository has been successfully created
e Click EDIT CODE in the upper-right corner to open the DevOps Services Web IDE
f Toggle the Live Edit option to on
g If prompted to redeploy click OK The app will redeploy so changes can be made live to
your deployed app When the app finishes deploying a green dot will be displayed in
the run bar
25
When the app finishes deploying you are ready to make live edits
5 Change a static file
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app
a In the navigator view on the left expand views
b Select layoutjade
c Update the h2 to say something like ldquoThis open lab is so great that Irsquom going to Tweet
about itrdquo
d Switch to your tab or window that has your running app
e Refresh the page
f Note that the heading of your app was changed instantly You didnrsquot have to wait for
the app to redeploy
g Make a few more changes to static files and watch your app update in real time
6 Change a node module
Changes to node modules require a fast app restart (not a full redeploy) in order to be deployed
because the server caches node modules in memory
a Select the root directory of your app in the navigator in the left pane
b Click File gt New gt File
c The name of the file is highlighted so you can rename it Type defaulttexttxt and press
Enter or Return on your keyboard
d In the editor on the right type or paste the text that you want to use as the default text
in the app
e Select the appjs file in the navigator in the left pane
f In the editor on the right look for the dummy_text variable around line 25 Replace
mobydicktxt with defaulttexttxt
g In the web IDEs top bar click the Restart button ( )
h When the app finishes restarting (which only takes a few seconds) a green dot is
displayed in the run bar
26
i Switch to the tab or window that has your running app Refresh the page to see the new
text (If your browser cached the page and you dont see the text update browse to
your apps URL again and the change should be displayed)
Tweet this
Developing in the cloud using Bluemix DevOpsServices is now as fast and easy as developing
locally WhoKnew
Get creative
Create a new look for the Personality Insights app Open the CSS files located in the publiccss
directory and have fun making changes to the files Watch as your changes are deployed live
Additional resources
Everything AND the kitchen sync Bluemix Live Sync is here httpsdeveloperibmcomdevops-
services20150213everything-kitchen-sync-Bluemix-live-sync
Bluemix Live Sync documentation
httpswwwngbluemixnetdocscm_mmc=developerWorks-_-dWdevcenter-_-devops-
services-_-lpmanageappsbluemixlivehtmlbluemixlive
27
Part 2B Bluemix Debug Sometimes staring at the code to figure out whatrsquos going wrong just doesnrsquot work Sometimes you really need
to debug the code or access the environment where the app is running This is where Bluemix Debug comes in
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for your Nodejs
apps
In this part yoursquoll continue on with the Personality Insights Nodejs app you created in part 2A
Learn this
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for
your Nodejs apps
Try this Note The Node Inspector Debugger currently only works in Chrome You may want to take this
opportunity to change browsers if you are not already using Chrome
1 Open the IBM Bluemix Debugger
a Navigate to httpibmbizcds-ids and sign in if you are not already authenticated
b In My Projects locate the tile for your Personality Insights app Click the Edit Code icon
( ) to open the Web IDE for your project
c In the Web IDErsquos top bar click the Debug button ( )
d When prompted for credentials input your IBM id and password
2 Use the shell
The Bluemix Shell allows you to explore and interact with the Bluemix environment where your
app is running by using a built-in bash shell
a On the IBM Bluemix Debugger page for your project click Open Shell A shell client
opens in your browser
b View the processes running in your Bluemix environment by inputting the following
command top
c Click NEW WINDOW
d Drag and drop the new window so that you can continue to observe your processes
while you explore the log files
e In the new window change directory to the log files by inputting the following
command cd logs
28
f View a list of the files in the logs directory by inputting the following command ls
g Notice that staging_tasklog is a file in your logs directory View the last 10 lines of the
log file by inputting the following command tail staging_tasklog
3 Use the Debugger
The Debugger allows you to debug Nodejs apps
a On the IBM Bluemix Debugger page for your project click Open Debugger The
Debugger takes about 30 seconds to load
b If the Navigator is not displayed on the left click the Expand Navigator button
c Select appjs in the Navigator to open the file
d Add a breakpoint on line 48 by clicking 48
e In a different tab or window navigate to your running app
f Click Analyze
g Switch back to the tab or window with your Debugger Notice that the breakpoint has
been hit On the right you can view the Call Stack and Variables You can also use
buttons on the right to step over the next function call step into the next function call
and step out of the next function call
h When you have finished exploring your running app click the Resume script execution
button ( ) on the right
Note that from the IBM Bluemix Debugger page you can choose to suspend the app which will
restart the app and break at the first line of the app
29
Tweet this
Bluemix + DevOpsServices + Shell = a happy developer NoDownloadsRequired [include a
screenshot of the shell in your browser]
Just debugged my Bluemix app by using the debugger in DevOpsServices
NoDownloadsRequired [take a selfie of you in front of your debugger looking very excited]
Get creative
Use some of your favorite commands to explore the Bluemix environment where your app runs
Additional resources
Bluemix Live Sync
httpswwwngBluemixnetdocsmanageappsBluemixlivehtmlBluemixlivedebugger
Learning the Shell httplinuxcommandorglc3_learning_the_shellphp
24
e Input a name for the app (what the app will be referred to in Bluemix) and a host for the
app (the part of the url that will go before mybluemixnet) Note that the host must be
globally unique across all of Bluemix so be creative
f Click CREATE A copy of the boilerplate code will be put in to a new app for you and
then deployed to Bluemix
g Click Overview In the APP HEALTH section wait for the message ldquoYour app is
runningrdquo to be displayed
h When your app is running click on your route (toward the top of the page) to open your
running app
3 Explore the Nodejs app
Now that your app is running letrsquos take a moment to explore it The Personality Insights app
uses the Watson Personality Insights service to analyze text and determine personality traits of
the textrsquos author
a The app includes sample text from Moby Dick Click ANALYZE to learn about the
personality of Moby Dickrsquos author Herman Melville Textual output as well as a
graphical visualization are displayed
b Navigate to one of your favorite websites with English text (keep it office-friendlyhellipso
perhaps choose your favorite news site) and copy a block of text
c Return to your Personality Insights App and paste the text in the Try the Service box
d Click ANALYZE View the textual output as well as the graphical visualization
4 Prepare for Live Edit
Wersquove tested the app and now wersquoll prep to make some changes to it
a Return to the Bluemix page for your Personality Insights app If your app is not in a
separate window or tab right-click on your apprsquos route and choose an option to open
the link in a new window or tab
b Click ADD GIT in the upper-right corner
c Click CONTINUE in the Create Git Repository dialog Bluemix will take a copy of your
apprsquos code and put it in a Git repository hosted at DevOps Services
d Click CLOSE once the Git Repository has been successfully created
e Click EDIT CODE in the upper-right corner to open the DevOps Services Web IDE
f Toggle the Live Edit option to on
g If prompted to redeploy click OK The app will redeploy so changes can be made live to
your deployed app When the app finishes deploying a green dot will be displayed in
the run bar
25
When the app finishes deploying you are ready to make live edits
5 Change a static file
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app
a In the navigator view on the left expand views
b Select layoutjade
c Update the h2 to say something like ldquoThis open lab is so great that Irsquom going to Tweet
about itrdquo
d Switch to your tab or window that has your running app
e Refresh the page
f Note that the heading of your app was changed instantly You didnrsquot have to wait for
the app to redeploy
g Make a few more changes to static files and watch your app update in real time
6 Change a node module
Changes to node modules require a fast app restart (not a full redeploy) in order to be deployed
because the server caches node modules in memory
a Select the root directory of your app in the navigator in the left pane
b Click File gt New gt File
c The name of the file is highlighted so you can rename it Type defaulttexttxt and press
Enter or Return on your keyboard
d In the editor on the right type or paste the text that you want to use as the default text
in the app
e Select the appjs file in the navigator in the left pane
f In the editor on the right look for the dummy_text variable around line 25 Replace
mobydicktxt with defaulttexttxt
g In the web IDEs top bar click the Restart button ( )
h When the app finishes restarting (which only takes a few seconds) a green dot is
displayed in the run bar
26
i Switch to the tab or window that has your running app Refresh the page to see the new
text (If your browser cached the page and you dont see the text update browse to
your apps URL again and the change should be displayed)
Tweet this
Developing in the cloud using Bluemix DevOpsServices is now as fast and easy as developing
locally WhoKnew
Get creative
Create a new look for the Personality Insights app Open the CSS files located in the publiccss
directory and have fun making changes to the files Watch as your changes are deployed live
Additional resources
Everything AND the kitchen sync Bluemix Live Sync is here httpsdeveloperibmcomdevops-
services20150213everything-kitchen-sync-Bluemix-live-sync
Bluemix Live Sync documentation
httpswwwngbluemixnetdocscm_mmc=developerWorks-_-dWdevcenter-_-devops-
services-_-lpmanageappsbluemixlivehtmlbluemixlive
27
Part 2B Bluemix Debug Sometimes staring at the code to figure out whatrsquos going wrong just doesnrsquot work Sometimes you really need
to debug the code or access the environment where the app is running This is where Bluemix Debug comes in
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for your Nodejs
apps
In this part yoursquoll continue on with the Personality Insights Nodejs app you created in part 2A
Learn this
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for
your Nodejs apps
Try this Note The Node Inspector Debugger currently only works in Chrome You may want to take this
opportunity to change browsers if you are not already using Chrome
1 Open the IBM Bluemix Debugger
a Navigate to httpibmbizcds-ids and sign in if you are not already authenticated
b In My Projects locate the tile for your Personality Insights app Click the Edit Code icon
( ) to open the Web IDE for your project
c In the Web IDErsquos top bar click the Debug button ( )
d When prompted for credentials input your IBM id and password
2 Use the shell
The Bluemix Shell allows you to explore and interact with the Bluemix environment where your
app is running by using a built-in bash shell
a On the IBM Bluemix Debugger page for your project click Open Shell A shell client
opens in your browser
b View the processes running in your Bluemix environment by inputting the following
command top
c Click NEW WINDOW
d Drag and drop the new window so that you can continue to observe your processes
while you explore the log files
e In the new window change directory to the log files by inputting the following
command cd logs
28
f View a list of the files in the logs directory by inputting the following command ls
g Notice that staging_tasklog is a file in your logs directory View the last 10 lines of the
log file by inputting the following command tail staging_tasklog
3 Use the Debugger
The Debugger allows you to debug Nodejs apps
a On the IBM Bluemix Debugger page for your project click Open Debugger The
Debugger takes about 30 seconds to load
b If the Navigator is not displayed on the left click the Expand Navigator button
c Select appjs in the Navigator to open the file
d Add a breakpoint on line 48 by clicking 48
e In a different tab or window navigate to your running app
f Click Analyze
g Switch back to the tab or window with your Debugger Notice that the breakpoint has
been hit On the right you can view the Call Stack and Variables You can also use
buttons on the right to step over the next function call step into the next function call
and step out of the next function call
h When you have finished exploring your running app click the Resume script execution
button ( ) on the right
Note that from the IBM Bluemix Debugger page you can choose to suspend the app which will
restart the app and break at the first line of the app
29
Tweet this
Bluemix + DevOpsServices + Shell = a happy developer NoDownloadsRequired [include a
screenshot of the shell in your browser]
Just debugged my Bluemix app by using the debugger in DevOpsServices
NoDownloadsRequired [take a selfie of you in front of your debugger looking very excited]
Get creative
Use some of your favorite commands to explore the Bluemix environment where your app runs
Additional resources
Bluemix Live Sync
httpswwwngBluemixnetdocsmanageappsBluemixlivehtmlBluemixlivedebugger
Learning the Shell httplinuxcommandorglc3_learning_the_shellphp
25
When the app finishes deploying you are ready to make live edits
5 Change a static file
Changes you make to static files (for example Jade or CSS files) will be reflected almost
instantaneously in your deployed app
a In the navigator view on the left expand views
b Select layoutjade
c Update the h2 to say something like ldquoThis open lab is so great that Irsquom going to Tweet
about itrdquo
d Switch to your tab or window that has your running app
e Refresh the page
f Note that the heading of your app was changed instantly You didnrsquot have to wait for
the app to redeploy
g Make a few more changes to static files and watch your app update in real time
6 Change a node module
Changes to node modules require a fast app restart (not a full redeploy) in order to be deployed
because the server caches node modules in memory
a Select the root directory of your app in the navigator in the left pane
b Click File gt New gt File
c The name of the file is highlighted so you can rename it Type defaulttexttxt and press
Enter or Return on your keyboard
d In the editor on the right type or paste the text that you want to use as the default text
in the app
e Select the appjs file in the navigator in the left pane
f In the editor on the right look for the dummy_text variable around line 25 Replace
mobydicktxt with defaulttexttxt
g In the web IDEs top bar click the Restart button ( )
h When the app finishes restarting (which only takes a few seconds) a green dot is
displayed in the run bar
26
i Switch to the tab or window that has your running app Refresh the page to see the new
text (If your browser cached the page and you dont see the text update browse to
your apps URL again and the change should be displayed)
Tweet this
Developing in the cloud using Bluemix DevOpsServices is now as fast and easy as developing
locally WhoKnew
Get creative
Create a new look for the Personality Insights app Open the CSS files located in the publiccss
directory and have fun making changes to the files Watch as your changes are deployed live
Additional resources
Everything AND the kitchen sync Bluemix Live Sync is here httpsdeveloperibmcomdevops-
services20150213everything-kitchen-sync-Bluemix-live-sync
Bluemix Live Sync documentation
httpswwwngbluemixnetdocscm_mmc=developerWorks-_-dWdevcenter-_-devops-
services-_-lpmanageappsbluemixlivehtmlbluemixlive
27
Part 2B Bluemix Debug Sometimes staring at the code to figure out whatrsquos going wrong just doesnrsquot work Sometimes you really need
to debug the code or access the environment where the app is running This is where Bluemix Debug comes in
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for your Nodejs
apps
In this part yoursquoll continue on with the Personality Insights Nodejs app you created in part 2A
Learn this
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for
your Nodejs apps
Try this Note The Node Inspector Debugger currently only works in Chrome You may want to take this
opportunity to change browsers if you are not already using Chrome
1 Open the IBM Bluemix Debugger
a Navigate to httpibmbizcds-ids and sign in if you are not already authenticated
b In My Projects locate the tile for your Personality Insights app Click the Edit Code icon
( ) to open the Web IDE for your project
c In the Web IDErsquos top bar click the Debug button ( )
d When prompted for credentials input your IBM id and password
2 Use the shell
The Bluemix Shell allows you to explore and interact with the Bluemix environment where your
app is running by using a built-in bash shell
a On the IBM Bluemix Debugger page for your project click Open Shell A shell client
opens in your browser
b View the processes running in your Bluemix environment by inputting the following
command top
c Click NEW WINDOW
d Drag and drop the new window so that you can continue to observe your processes
while you explore the log files
e In the new window change directory to the log files by inputting the following
command cd logs
28
f View a list of the files in the logs directory by inputting the following command ls
g Notice that staging_tasklog is a file in your logs directory View the last 10 lines of the
log file by inputting the following command tail staging_tasklog
3 Use the Debugger
The Debugger allows you to debug Nodejs apps
a On the IBM Bluemix Debugger page for your project click Open Debugger The
Debugger takes about 30 seconds to load
b If the Navigator is not displayed on the left click the Expand Navigator button
c Select appjs in the Navigator to open the file
d Add a breakpoint on line 48 by clicking 48
e In a different tab or window navigate to your running app
f Click Analyze
g Switch back to the tab or window with your Debugger Notice that the breakpoint has
been hit On the right you can view the Call Stack and Variables You can also use
buttons on the right to step over the next function call step into the next function call
and step out of the next function call
h When you have finished exploring your running app click the Resume script execution
button ( ) on the right
Note that from the IBM Bluemix Debugger page you can choose to suspend the app which will
restart the app and break at the first line of the app
29
Tweet this
Bluemix + DevOpsServices + Shell = a happy developer NoDownloadsRequired [include a
screenshot of the shell in your browser]
Just debugged my Bluemix app by using the debugger in DevOpsServices
NoDownloadsRequired [take a selfie of you in front of your debugger looking very excited]
Get creative
Use some of your favorite commands to explore the Bluemix environment where your app runs
Additional resources
Bluemix Live Sync
httpswwwngBluemixnetdocsmanageappsBluemixlivehtmlBluemixlivedebugger
Learning the Shell httplinuxcommandorglc3_learning_the_shellphp
26
i Switch to the tab or window that has your running app Refresh the page to see the new
text (If your browser cached the page and you dont see the text update browse to
your apps URL again and the change should be displayed)
Tweet this
Developing in the cloud using Bluemix DevOpsServices is now as fast and easy as developing
locally WhoKnew
Get creative
Create a new look for the Personality Insights app Open the CSS files located in the publiccss
directory and have fun making changes to the files Watch as your changes are deployed live
Additional resources
Everything AND the kitchen sync Bluemix Live Sync is here httpsdeveloperibmcomdevops-
services20150213everything-kitchen-sync-Bluemix-live-sync
Bluemix Live Sync documentation
httpswwwngbluemixnetdocscm_mmc=developerWorks-_-dWdevcenter-_-devops-
services-_-lpmanageappsbluemixlivehtmlbluemixlive
27
Part 2B Bluemix Debug Sometimes staring at the code to figure out whatrsquos going wrong just doesnrsquot work Sometimes you really need
to debug the code or access the environment where the app is running This is where Bluemix Debug comes in
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for your Nodejs
apps
In this part yoursquoll continue on with the Personality Insights Nodejs app you created in part 2A
Learn this
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for
your Nodejs apps
Try this Note The Node Inspector Debugger currently only works in Chrome You may want to take this
opportunity to change browsers if you are not already using Chrome
1 Open the IBM Bluemix Debugger
a Navigate to httpibmbizcds-ids and sign in if you are not already authenticated
b In My Projects locate the tile for your Personality Insights app Click the Edit Code icon
( ) to open the Web IDE for your project
c In the Web IDErsquos top bar click the Debug button ( )
d When prompted for credentials input your IBM id and password
2 Use the shell
The Bluemix Shell allows you to explore and interact with the Bluemix environment where your
app is running by using a built-in bash shell
a On the IBM Bluemix Debugger page for your project click Open Shell A shell client
opens in your browser
b View the processes running in your Bluemix environment by inputting the following
command top
c Click NEW WINDOW
d Drag and drop the new window so that you can continue to observe your processes
while you explore the log files
e In the new window change directory to the log files by inputting the following
command cd logs
28
f View a list of the files in the logs directory by inputting the following command ls
g Notice that staging_tasklog is a file in your logs directory View the last 10 lines of the
log file by inputting the following command tail staging_tasklog
3 Use the Debugger
The Debugger allows you to debug Nodejs apps
a On the IBM Bluemix Debugger page for your project click Open Debugger The
Debugger takes about 30 seconds to load
b If the Navigator is not displayed on the left click the Expand Navigator button
c Select appjs in the Navigator to open the file
d Add a breakpoint on line 48 by clicking 48
e In a different tab or window navigate to your running app
f Click Analyze
g Switch back to the tab or window with your Debugger Notice that the breakpoint has
been hit On the right you can view the Call Stack and Variables You can also use
buttons on the right to step over the next function call step into the next function call
and step out of the next function call
h When you have finished exploring your running app click the Resume script execution
button ( ) on the right
Note that from the IBM Bluemix Debugger page you can choose to suspend the app which will
restart the app and break at the first line of the app
29
Tweet this
Bluemix + DevOpsServices + Shell = a happy developer NoDownloadsRequired [include a
screenshot of the shell in your browser]
Just debugged my Bluemix app by using the debugger in DevOpsServices
NoDownloadsRequired [take a selfie of you in front of your debugger looking very excited]
Get creative
Use some of your favorite commands to explore the Bluemix environment where your app runs
Additional resources
Bluemix Live Sync
httpswwwngBluemixnetdocsmanageappsBluemixlivehtmlBluemixlivedebugger
Learning the Shell httplinuxcommandorglc3_learning_the_shellphp
27
Part 2B Bluemix Debug Sometimes staring at the code to figure out whatrsquos going wrong just doesnrsquot work Sometimes you really need
to debug the code or access the environment where the app is running This is where Bluemix Debug comes in
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for your Nodejs
apps
In this part yoursquoll continue on with the Personality Insights Nodejs app you created in part 2A
Learn this
Bluemix Debug allows you to restart get shell access and use the Node Inspector Debugger for
your Nodejs apps
Try this Note The Node Inspector Debugger currently only works in Chrome You may want to take this
opportunity to change browsers if you are not already using Chrome
1 Open the IBM Bluemix Debugger
a Navigate to httpibmbizcds-ids and sign in if you are not already authenticated
b In My Projects locate the tile for your Personality Insights app Click the Edit Code icon
( ) to open the Web IDE for your project
c In the Web IDErsquos top bar click the Debug button ( )
d When prompted for credentials input your IBM id and password
2 Use the shell
The Bluemix Shell allows you to explore and interact with the Bluemix environment where your
app is running by using a built-in bash shell
a On the IBM Bluemix Debugger page for your project click Open Shell A shell client
opens in your browser
b View the processes running in your Bluemix environment by inputting the following
command top
c Click NEW WINDOW
d Drag and drop the new window so that you can continue to observe your processes
while you explore the log files
e In the new window change directory to the log files by inputting the following
command cd logs
28
f View a list of the files in the logs directory by inputting the following command ls
g Notice that staging_tasklog is a file in your logs directory View the last 10 lines of the
log file by inputting the following command tail staging_tasklog
3 Use the Debugger
The Debugger allows you to debug Nodejs apps
a On the IBM Bluemix Debugger page for your project click Open Debugger The
Debugger takes about 30 seconds to load
b If the Navigator is not displayed on the left click the Expand Navigator button
c Select appjs in the Navigator to open the file
d Add a breakpoint on line 48 by clicking 48
e In a different tab or window navigate to your running app
f Click Analyze
g Switch back to the tab or window with your Debugger Notice that the breakpoint has
been hit On the right you can view the Call Stack and Variables You can also use
buttons on the right to step over the next function call step into the next function call
and step out of the next function call
h When you have finished exploring your running app click the Resume script execution
button ( ) on the right
Note that from the IBM Bluemix Debugger page you can choose to suspend the app which will
restart the app and break at the first line of the app
29
Tweet this
Bluemix + DevOpsServices + Shell = a happy developer NoDownloadsRequired [include a
screenshot of the shell in your browser]
Just debugged my Bluemix app by using the debugger in DevOpsServices
NoDownloadsRequired [take a selfie of you in front of your debugger looking very excited]
Get creative
Use some of your favorite commands to explore the Bluemix environment where your app runs
Additional resources
Bluemix Live Sync
httpswwwngBluemixnetdocsmanageappsBluemixlivehtmlBluemixlivedebugger
Learning the Shell httplinuxcommandorglc3_learning_the_shellphp
28
f View a list of the files in the logs directory by inputting the following command ls
g Notice that staging_tasklog is a file in your logs directory View the last 10 lines of the
log file by inputting the following command tail staging_tasklog
3 Use the Debugger
The Debugger allows you to debug Nodejs apps
a On the IBM Bluemix Debugger page for your project click Open Debugger The
Debugger takes about 30 seconds to load
b If the Navigator is not displayed on the left click the Expand Navigator button
c Select appjs in the Navigator to open the file
d Add a breakpoint on line 48 by clicking 48
e In a different tab or window navigate to your running app
f Click Analyze
g Switch back to the tab or window with your Debugger Notice that the breakpoint has
been hit On the right you can view the Call Stack and Variables You can also use
buttons on the right to step over the next function call step into the next function call
and step out of the next function call
h When you have finished exploring your running app click the Resume script execution
button ( ) on the right
Note that from the IBM Bluemix Debugger page you can choose to suspend the app which will
restart the app and break at the first line of the app
29
Tweet this
Bluemix + DevOpsServices + Shell = a happy developer NoDownloadsRequired [include a
screenshot of the shell in your browser]
Just debugged my Bluemix app by using the debugger in DevOpsServices
NoDownloadsRequired [take a selfie of you in front of your debugger looking very excited]
Get creative
Use some of your favorite commands to explore the Bluemix environment where your app runs
Additional resources
Bluemix Live Sync
httpswwwngBluemixnetdocsmanageappsBluemixlivehtmlBluemixlivedebugger
Learning the Shell httplinuxcommandorglc3_learning_the_shellphp
29
Tweet this
Bluemix + DevOpsServices + Shell = a happy developer NoDownloadsRequired [include a
screenshot of the shell in your browser]
Just debugged my Bluemix app by using the debugger in DevOpsServices
NoDownloadsRequired [take a selfie of you in front of your debugger looking very excited]
Get creative
Use some of your favorite commands to explore the Bluemix environment where your app runs
Additional resources
Bluemix Live Sync
httpswwwngBluemixnetdocsmanageappsBluemixlivehtmlBluemixlivedebugger
Learning the Shell httplinuxcommandorglc3_learning_the_shellphp