A Grace Hopper Celebration of Women in Computing Workshop Development tools installed on your PC? SO LAST YEAR! By leveraging Platforms as a Service, Software as a Service, and DevOps techniques, you can develop the next great app without ever leaving your web browser. Bring your laptop or tablet, and get ready to code! You’ll leave this session with a running app and the knowledge you need to lead your team into the wonderful world of cloud computing. #ghc15

1. Ditch Your Desktop!
Lead Your Team into Cloud
Computing!
A Grace Hopper Celebration of Women in Computing Workshop
http://ibm.biz/ghc15-workbook
Lauren Schaefer
@Lauren_Schaefer
10/14/15
#ghc15
#DitchYourDesktop

2. 1
Table of Contents
The App Revolution, Cloud Computing, & Platforms as a Service .............................................................................2
Software as a Service..................................................................................................................................................5
DevOps .................................................................................................................................................................... 10

3. 2
The App Revolution, Cloud Computing, & Platforms as a Service
Learn this!
1. The app revolution fundamentally changes the way we interact with technology.
2. Cloud services can remove pain: Infrastructure as a Service (removes some pain), Platform as a
Service (removes more pain), and Software as a Service (removes the most pain).
3. Platforms as a service allow you to focus on your app—not the infrastructure behind it.
4. Platforms as a service typically provide a command line client and/or user interface for
deploying apps.
5. Platforms as a service typically have services like databases, auto-scaling, and load balancing
that make creating and managing apps easier.
Try this!
1. Sign Up for IBM Bluemix and IBM Bluemix DevOps Services
We’ll begin by signing up for IBM Bluemix (a PaaS) and IBM Bluemix DevOps Services (a SaaS).
a. Navigate to http://ibm.biz/ghc-bluemix and sign up.
Note: Be sure to use an e-mail address to which you currently have access as you will
need to confirm your account.
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 an email to id@bluemix.net.
c. Navigate to http://ibm.biz/ghc-devops.
d. Click LOG IN.
e. Authenticate with the IBM id you created in the step above.
f. Input an alias and click Finish.
g. Click Continue.
2. Deploy an app on a PaaS
Now that you’re signed up, let’s create an app! In this section, you’ll deploy a Bluemix
Boilerplate (sample app) to quickly get an app running on Bluemix. The app leverages the
Watson Personality Insights Service (remember Watson – the supercomputer that competed on
Jeopardy?) and the Monitoring and Analytics service to analyze the personality traits of an
author.
a. Deploy an app

4. 3
i. Navigate to http://ibm.biz/ghc-bluemix.
ii. Log in if you are not already authenticated.
iii. Click CATALOG in the top navigation bar.
Hint: you may need to open the top menu if CATALOG is not already visible.
iv. In the Boilerplates section, click Personality Insights Node.js Web Starter.
Note: Be sure to click the Node.js Web Starter and NOT the Java Web Starter.
v. Information about the boilerplate will be displayed. Note that the boilerplate
leverages the Watson Personality Insights Service and the Monitoring and
Analytics service. This means that the application code doesn’t have to handle
analyzing personality insights—it gets that functionality directly from the
services hosted on Bluemix.
vi. Input a name for your app.
vii. The Host field will automatically be filled for you based on the name you input.
The host is what will go before “mybluemix.net” in your app’s url. Therefore,
the host you choose needs to be unique across all apps hosted on Bluemix, so
be creative.
viii. Click CREATE.
ix. Bluemix will deploy the app for you. Typically, this takes a minute or two.
When your app has finished deploying, “Your app is running” will be displayed.
How easy was that? You just deployed an app to a PaaS in only a few minutes!
b. Try out your app
Now that your app is deployed, let’s check it out!
i. Click the link beside “Your app is running” to navigate to your app.
ii. The app includes default text from Moby Dick. Click Analyze.

5. 4
iii. Personality traits about Moby Dick’s author, Herman Melville, are displayed.
Tweet this!
 Just deployed an app to the cloud in minutes by leveraging a #PaaS. Check it out: [insert link to
your app] #DitchYourDesktop #ghc15
Get creative
 In Bluemix, navigate to the Catalog. Explore the various boilerplates, runtimes, and services.
Brainstorm apps you could rapidly create by leveraging these assets. Note your ideas here, on
your blog, or on Twitter.
 Use your new app to analyze the personality of various authors. Consider analyzing text from
your favorite blogger, your local newspaper, or your manager’s e-mail!
Additional resources
 The Mobile Apps Revolution is Here to Stay http://www.computerworlduk.com/in-
depth/applications/3536724/the-mobile-apps-revolution-is-here-to-stay/
 Mobile App Revolution Rivals Industrial Revolution
http://www.cio.com/article/2380501/mobile/mobile-app-revolution-rivals-industrial-
revolution.html
 The Mobile App Revolution: What’s Holding You Back?
http://blogs.salesforce.com/company/2013/06/mobile-app-revolution.html
 Computerworld Forecast Study 2015 http://www.idgenterprise.com/report/computerworld-
forecast-study-2015
 MQTT Starfighter, JazzHub, Bluemix and live Scaling Out
https://www.youtube.com/watch?v=b9hkCHmH7H4
 Transforming Enterprise Cloud Services
http://books.google.com/books?id=yyiPyIXgbxMC&pg=PA55#v=onepage&q&f=false

6. 5
Software as a Service
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.
 Coding in the cloud can be easy as working locally on your desktop. Plus, you may not even
have to set up a development environment!
Try this!
1. Create a DevOps Services project for your app
Right now, your app is deployed on Bluemix. You probably want to do more with your app like
plan changes to your app, edit your app’s code, manage your app’s code in source control, and
maybe even setup a DevOps delivery pipeline. This workshop is all about ditching your desktop,
so we’re going to do all of those things in the cloud!
We’ll begin by creating a DevOps Services project that is associated with your app.
a. Create a DevOps Services project
i. On the Bluemix page that has a link to your running app, scroll down and click
VIEW APP OVERVIEW.
Hint: If you previously closed the page or navigated away, don’t worry.
Navigate to http://ibm.biz/ghc-bluemix, log in if you’re not already
authenticated, open the DASHBOARD, and click the tile for your app in the
Applications section.
ii. Click ADD GIT.
iii. In the Create Git Repository dialog, ensure the Populate the repo with the
starter app package and enable the Build & Deploy pipeline box is checked and
click CONTINUE.
Bluemix will create a new DevOps Services project for your app. The project will
include a Git repository that has a copy of your app’s code and have a tracking
and planning capability you can use to organize your work. The project will also
have a Build & Deploy pipeline, which we’ll use in the final portion of this
workshop.

7. 6
iv. Once the Git repository has been successfully created, click CLOSE.
2. Plan tasks to update your app
When working with teammates or even by yourself, organizing your ideas into tasks and user
stories and then organizing those tasks and user stories into a plan can be incredibly valuable.
a. Open Track & Plan
i. Open the project you created in the previous section by navigating to
http://ibm.biz/ghc-devops, signing in if you're not already authenticated, and
clicking on your project on the My Projects page.
ii. Click the gear icon ( ) in the upper-right corner to open the Project Settings
page.
iii. Click OPTIONS.
iv. On the page that loads, select the Enable Track & Plan checkbox (if it is not
already enabled) and click SAVE.
v. Click TRACK & PLAN in the upper-right corner. The Track & Plan section is your
place to organize your ideas.
vi. If the Welcome to Track & Plan dialog is displayed, review it and click Close.
b. Create work items in your backlog
A work item is a generic term for any type of work you want to track. Work items can
be of type user story, task, defect, among others.
i. On the left pane, click Backlog.
ii. On the right pane, type the following in the Create a work item… field: Update
the sample text to something more modern.
iii. By default, the work item type is set to Task.
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. Change the shades of blue in the UI to be shades
of pink.
2. Add a “Customized By…” line at the bottom of the
app’s home page.
c. Plan your work
Now that you have filled your backlog with tasks, it's time to plan your first sprint.
i. On the left pane, click Sprint Planning. A sprint represents a period of time.

8. 7
ii. Click Add Sprints.
iii. Configure the sprints so you have at least two and click Create.
iv. In the Backlog tile of the Sprint Planning page (the page you’re currently
viewing), rearrange your stories so they are in a ranked order by dragging and
dropping them. Put Add a “Customized By…” line at the
bottom of the app’s home page as the top 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.
Hint: You may need to select Sprint 2 and then select Sprint 1 in order for the
sprint to appear.
vi. Assume you have time to complete one task 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
You’ve planned your first two sprints (easy, right?), so let’s start Sprint 1!
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 task ID for your task because you will need it later in this workshop.
3. Implement the task
Next, implement the task Add a “Customized By…” line at the bottom of
the app’s home page. You might be thinking, “Oh no! I need to code, and I don’t have
an IDE currently installed on my device.” Don’t worry – we’re going to code in the cloud! (For
those of you who love coding in your favorite IDE, that’s totally cool. It’s easy to connect to your
project’s Git repository, but we won’t get into how to do that here.)
i. Click EDIT CODE in the upper-right. The web IDE will load.
ii. In the toolbar, toggle on Live Edit (it may take a moment for the option to be
displayed).
iii. Click OK in the confirmation dialog.
Live Edit is a handy feature that will automatically deploy changes you make to
your app. It makes coding in the cloud as fast and easy as coding on your

9. 8
desktop.
Changes that you make to static files (for example, Jade or CSS files) are
reflected almost instantaneously in your deployed app. To deploy changes to
Node.js modules, you must do a fast app restart (not a full redeploy) because
the server caches Node.js modules in memory. You can do a fast app restart by
clicking the Restart button ( ) in the toolbar.
iv. In the code navigation pane, expand Views and click index.jade.
v. At the end of line 43, create a new line, begin typing at the beginning of the line
(you may need to delete several spaces that are added by default for you), add 4
spaces, and type the following: div.col-xs-12 Customized by [YOUR
NAME HERE].
vi. Ensure that Live Edit has finished enabling by waiting for the green status dot to
appear: .
vii. Switch to the tab or window that has your running app and refresh the page.
Notice that your new line of text is at the bottom of the page!
4. Complete the task
To indicate that you have finished your task, mark your task as complete.
i. In the Web IDE, click TRACK & PLAN in the upper-right corner.
Hint: You may need to make your browser wider in order to see the button.
ii. In the right pane, find your task associated with the “Customized By…” feature,
and click the Status: In Progress icon ( ).
iii. Click Complete.
iv. In the right pane, scroll right until you see the RESOLVED section. Notice that
your task is now marked done.
Tweet this!
 Kicking off #ghc15 by getting #SaaS-y at the #DitchYourDesktop workshop with
@Lauren_Schaefer [Feeling extra sassy? Include a selfie of you looking sassy!]
Get creative
 Invite a friend to join your project. Navigate to your project's home page, click Members, and
invite a friend to join.
 Create new work items for features you’d like to implement or defects you find.
 Implement some of the work items you created.

10. 9
Additional resources
 Managing Distributed Teams
https://www.scrumalliance.org/community/articles/2013/july/managing-distributed-
teams.aspx
 So Long Scrum, Hello Kanban https://stormpath.com/blog/so-long-scrum-hello-kanban/
 Rapidly create a Node.js app using a Bluemix boilerplate and DevOps Services
http://www.ibm.com/developerworks/library/d-bluemix-devops90/

11. 10
DevOps
Learn this!
 DevOps aims to get software released faster and more frequently by bridging the gaps between
various teams supporting the software.
 Deployment automation is one of the keys to a successful DevOps approach.
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 and a deployment to your
development (dev) space. You could also configure a deployment to a new production space; the
production space would store the app your end users would use. To save time, we won’t configure
a deployment to a production space during this workshop.
1. Open the Pipeline
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 project’s repository; changes that are in your workspace in the Web IDE
that have not been pushed to your project’s repository will NOT be deployed as part of the
pipeline.
a. Open the Personality Insights project you created in the previous section by navigating
to DevOps Services (http://ibm.biz/ghc-devops), signing in if you're not already
authenticated, and clicking on your project on the My Projects page.
b. Click BUILD & DEPLOY in the upper-right corner.
2. Investigate the Build Stage
As part of using a Bluemix Boilerplate and choosing to Add Git, a simple delivery pipeline was
created for you. The pipeline has a Build Stage and a Deploy Stage.
a. In the Build Stage tile, click the Stage Configuration icon ( ) and select Configure
Stage.
b. On the JOBS tab, note that the the Builder Type is set to Simple. This app can use the
Simple builder since it does not require a build step (whereas a Java app would require a
build step).
c. On the INPUT tab, note that the Run jobs whenever a change is pushed to Git option is
selected. This means that whenever you or a member of your team pushes code to your
project’s repository, a build will automatically be kicked off for you.

12. 11
d. Click Back to Pipeline.
3. Configure the Deploy Stage
The Deploy Stage deploys 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. The pipeline is
configured by default to deploy to the same name and url as your existing app. To allow you to
have your own personal deployed app where you can test your changes as well as a shared app
where developers on your team can test the app as part of your DevOps delivery pipeline, we
will update the Deploy Stage configuration to deploy to a new name and url.
a. In the Deploy Stage tile, click the Stage Configuration icon ( ) and select Configure
Stage.
b. Update the Application Name to be a new name that is unique to your Bluemix dev
space.
c. We want your app to deploy to a consistent place where developers on your team will
be able to test their code. In the Script section, after
cf push “${CF_APP}”
add -n whateverYouWantYourUrlToBe.
Note: the url needs to be unique across all Bluemix apps, so be creative.
d. On the INPUT tab, note that the Run jobs when the previous stage is completed option
is selected by default. The pipeline is now configured so that whenever someone
pushes code to your project’s repository, the build step will run, and, if it succeeds, a
deploy to the dev space will be kicked off.
e. Click SAVE.
4. Kick off the pipeline
Now that we have the build pipeline configured, it’s time to try it out! One way to kick off the
pipeline is to manually trigger it by clicking the Run Stage button ( ) in the Build. To
demonstrate the DevOps flow, we’ll instead kick off the pipeline by pushing code to the
project’s Git repository.
a. Click EDIT CODE in the upper right corner.
b. In the leftmost bar of icons, click the Git Repository button ( ).
c. In the box in the Working Directory Changes section, type a comment similar to the
following, being sure to replace 20 with the task ID associated with the task you
created: Added a Customized By line to the home page as
described in work item 20.
d. Select each change in the Working Directory Changes section and click the COMMIT
button.

13. 12
e. In the OUTGOING section, click PUSH.
f. If you are prompted for your committer information, enter it and click OK.
5. Discover the traceability
When you added a comment in your commit that mentioned your task, a link was automatically
created for you between the change and the task.
a. Click TRACK & PLAN in the upper right corner.
b. In the right pane, scroll to the Resolved view if you are not currently viewing your
resolved work items.
c. Click the textual summary of the work item associated with adding the “Customized
By…” line to open it.
d. In the work item, click the Links tab.
e. In the LINKS section, notice that a link was automatically generated for you. Click the
link. The Git Log displays.
f. Observe that you have a summary of the Git commit and its associated work items.
g. Click GIT LOG in the left navigation to see a list of all of your git commits.
6. Observe the delivery pipeline
The build pipeline was triggered when you pushed your changes to the Git repository. Let’s
check its progress!
a. Click BUILD & DEPLOY in the upper right corner.
b. In the Build Stage tile, click View logs and history. Observe the logs and the artifacts
that were generated as part of the build.
c. Click Back to Pipeline.
d. In the Deploy Stage tile, wait until the stage is listed as passed.
e. In the LAST EXECUTION RESULT section, click the url for your app (it may take a moment
for the url to be displayed). Try it out! This is the place where your development team
would run automated and/or manual tests to ensure the app is in good shape.
Tweet this!
 Dove into #DevOps by creating a delivery pipeline for my app. [attach a screenshot of the Build
& Deploy page for your app] #ghc15 #DitchYourDesktop

14. 13
Get creative
 In a full DevOps pipeline, you’ll likely want to deploy to multiple spaces: a development or
quality assurance space, a production space, and more. Configure your pipeline to deploy to a
production space.
Hint: check out this article: http://www.ibm.com/developerworks/cloud/library/cl-intro4-app/.
 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: http://www.ibm.com/developerworks/cloud/library/cl-bluemix-
rollingpipeline/.
Additional resources
 DevOps for Dummies ebook http://ibm.co/devopsfordummies
 Top 10 Practices for Effective DevOps http://www.drdobbs.com/architecture-and-design/top-
10-practices-for-effective-devops/240149363
 Cloud Computing Trends: 2014 State of the Cloud Survey
http://www.rightscale.com/blog/cloud-industry-insights/cloud-computing-trends-2014-state-
cloud-survey
 DevOps Embracing Cloud Services http://www.midsizeinsider.com/en-us/article/devops-
embracing-cloud-services#.VJmrScABg