Create an emailing service using

Bluemix and DevOps Services

1 CONTENTS
2 Intro ............................................................................................................................ 3
3 Setup project .............................................................................................................. 3
3.1 Fork a project ....................................................................................................... 3
3.2 Push the application ............................................................................................. 4
3.3 Setup auto deployment ........................................................................................ 7
4 Create a service on bluemix ...................................................................................... 10
5 Implement the email service .................................................................................... 12
5.1 Back-end ............................................................................................................. 12
5.2 Front-end ........................................................................................................... 15
5.3 Push the application ........................................................................................... 16
5.4 Try it out ............................................................................................................. 16
6 Learn more ................................................................................................................ 17
6.1 Send email, front end (temp title) ...................................................................... 17
6.2 Create HTML components .................................................................................. 17
7 Terminology .............................................................................................................. 18
7.1 Fork .................................................................................................................... 18
7.2 Build and deploy ................................................................................................. 18
7.3 Root directory .................................................................................................... 18
7.4 Git ....................................................................................................................... 18
7.5 Ant ...................................................................................................................... 18

2 INTRO
This guide will show how to implement an emailing service using Bluemix and DevOps
Services. You will need to install zero(!) programs, it will all be done in the cloud. The
explanation for each step is mostly brief. If you want learn more on a topic in the guide,
look for the image. Clicking it will take you to the Learn more-section. There is
also a Terminology-section. Look for this (?) sign if there is a term you are not familiar
with.
3 SETUP PROJECT
3.1 FORK A PROJECT
1. Log in to DevOps Services. This requires an IBM id (create IBM id)
2. Click on Explore in the navigation bar and search for project bir2014
3. Click on the bir-2014 laboration project
4. Click on EDIT CODE


5. Click on FORK (?)


6. Name your project and press Save (other fields should be filled correctly by
default)
Since you forked an application already deployed on Bluemix, you will have to
change the host URL of your forked application so that it is unique.
7. Open the file manifest.yml in the root directory (?)
8. Change host and name to something suitable. Host needs to be globally unique
so it is recommend to use some key word related to you, such as your name
(bir2014-yourname for example).
Now you will need to push the changes so that the auto deployment function gets
triggered
3.2 PUSH THE APPLICATION
9. Click on the Git (?) tab on the left side navigation bar (below the pen). It takes
you to the built-in git feature of the Web IDE


10. Click on the arrow next to the manifest.yml file to inspect the changes you just
made

The green rows shows what will be added if you choose to commit the file. The
red rows show what will be removed
11. If the displayed changes seem correct, go ahead and write something descriptive
in the commit comment


12. Check the Select all checkbox to include the changes in manifest.yml (there
might be a few more auto generated ones) to the git commit
13. Click COMMIT to commit you selected changes
14. The commit will be added to your outgoing commits. Click Push to push the
changes and trigger the auto deploy function

3.3 SETUP AUTO DEPLOYMENT
15. Click on BUILD & DEPLOY (?)


16. Click on Advanced.
This toggles advanced deployment which is helpful when working with java
applications
17. Click the cogwheel in the Git Repo box


18. Make sure Ant(?) is selected as Builder in the upper selection box and click
SAVE (make sure Automatically build is checked)
19. Click add a stage to the right
20. Click save (the default values are enough)
Next time you push the project, it will build and deploy to Bluemix automatically.
Since you just set it up, you will have to build it manually this time
21. Click on REQUEST BUILD. This builds your application in the cloud and then
automatically deploys it to Bluemix. If you receive an error, click the error sign to
get further details.

22. Wait until the latest build has been deployed. It should say Deployment 1
Success (could be another digit if you have deployed the application before)
23. Click on the link to your project to make sure it is up and running


24. The project is now set up correctly and you are ready to start develop the
application!
4 CREATE A SERVICE ON BLUEMIX
1. Login to Bluemix (use your already created IBM id)
2. Click on your newly forked and deployed application


3. Click on ADD A NEW SERVICE
4. Find the service SendGrid and click on it, you can search for it in the search field
or you can navigate to it in the grid (it is in the category Web and Application)
5. Make sure you app is selected in the App:- selection box and click CREATE
(you can send 25,000 emails/month free!). When you are returned to the
dashboard, it prompts you to restage the application. Click OK
6. Click on Show Credentials on the newly created SendGrid service on the
dashboard


7. It will expand and display some data. Copy and save the values for username
and password (in a local text file for example). They will be used later on
5 IMPLEMENT THE EMAIL SERVICE
5.1 BACK-END
Using a SendGrid-java library will make it easier to create and send your emails
via the java application. The library is open-source and can be found here
1. Click here to download the SendGrid java library. Store it somewhere on your
computer for now
1. Go back to the DevOps Services site
2. Click on the EDIT CODE button for you project
3. Navigate to directory WebContent/WEB-INF/lib
4. Drag and drop the just downloaded sendgrid-java.jar file to the /lib directory
5. Open the build.xml file in the root directory (?) and paste in:


as shown in the image. There should be 4 pathelement-tags in total.


6. Navigate to directory src/com/ibm/api/requests
7. Right-click on the /request directory and click on New > File. Name the file
MailRequest.java
<pathelement location="WebContent/WEB-INF/lib/sendgrid-java.jar"/>


8. Open the file and paste in the following:



9. Right-click on the /resources directory and click on New > File. Name the file
MailResource.java
10. Open the file and paste in the following:
package com.ibm.api.requests;

public class MailRequest {
public String to;
public String html;
}


The code is mainly using the SendGrid library you downloaded and added to the
project earlier. Click here to check out the documentation



package com.ibm.api.resources;

import javax.ws.rs.POST;
import javax.ws.rs.Path;
import javax.ws.rs.Produces;
import javax.ws.rs.core.MediaType;
import com.ibm.api.requests.MailRequest;
import com.sendgrid.SendGrid;
import com.sendgrid.SendGrid.Email;
import com.sendgrid.SendGrid.Response;
import com.sendgrid.SendGridException;

@Path("/mail")
public class MailResource {

@POST
@Produces(MediaType.APPLICATION_JSON)
public String getNearestFuelStations(MailRequest req) {
SendGrid sendGrid = new SendGrid("USERNAME", "PASSWORD");
Email email = new Email();
email.addTo(req.to);
email.setFrom("[email protected]");
email.setSubject("IBM Workshop");
email.setHtml(req.html);

Response response = null;
try {
response = sendGrid.send(email);
} catch (SendGridException e) {
e.printStackTrace();
return e.getMessage();
}
return response.getMessage();
}
}
11. Replace the placeholders USERNAME and PASSWORD with the values you
copied from Bluemix earlier
For the java application to recognize the MailResource class as a resource, you
will need to add it the resources file
12. Navigate to WebContent/WEB-INF and open the resources file.
13. Paste in the following:

on a new row.
14. The back-end coding is complete, now on to the front-end!
5.2 FRONT-END
15. Navigate to WebContent/scripts/controllers/lab.js and open it
16. Paste in the following below the //TODO tag:





17. Replace the text MY MESSAGE with something of your choice. This message
will be sent in the email once the feature is implemented
18. Navigate to WebContent/views/fuelstations.html and open it
19. Scroll down to the //TODO tag at the button
20. Paste in the following below the //TODO tag:
com.ibm.api.resources.MailResource
$scope.sendEmail = function(){
var request = {
to: $scope.email,
html: "<p> MY MESSAGE </p>"
};
request.html += UtilService.getFuelStationHtml();

$http.post("/api/mail", request)
.success(function(response){
console.log("Email has been sent!");
});
};


21. The coding is complete!
5.3 PUSH THE APPLICATION
The pushing process is the same as in the project setup. Look back if you need a
more detailed description
22. Click on the Git tab on the right side navigation bar.
23. Write something descriptive in the commit comment. Added an emailing feature
to my Bluemix application! for example
24. Check the Select all box and click commit
25. Click Push to push the changes and trigger the auto deploy function
26. Go to BUILD & DEPLOY and make sure you receive no errors. Wait until the
latest build has been deployed
27. Click the link to return to your URL and try out your new feature!
5.4 TRY IT OUT
28. Click somewhere on the map to place the blue marker, then click the Find fuel
stations-button to find fuel stations which meets the requirements set in the
above input boxes. The found fuel stations will be displayed as orange markers
on the map
29. When you have found at least one fuel station, fill out your email address in the
input box and click Send email
30. Press F12 (for chrome) and navigate to the console. If the mail was send correctly
a message should appear saying Email has been send!. This was the message
you wrote earlier
31. Check your email and you should have received a fantastic email from the
emailing feature you just created, well done!

<input ng-model="email">
<button ng-click="sendEmail()">Send email </button>

6 FURTHER DEVELOPMENT
Do you want more? As with any software application, there are countless ways it can be
expanded. Since this application has the benefit of being deployed on Bluemix, why
dont you check out some of the other services and see what you find interesting?
One option is to implement a data management service to be able to store data
persistently from the application. Bluemix offers several DBaaS (Database as a Service)
solutions:

The Cloudant NoSQL DB service provides a convenient way to store data in the cloud
without using SQL. You could for example store your fuel stations searches. Take a look
at the documentation and let your imagination be the limit!
Getting started with Cloudant NoSQL Database
Using Cloudant on Liberty

7 LEARN MORE
7.1 SEND EMAIL, FRONT END (TEMP TITLE)

7.2 CREATE HTML COMPONENTS

8 TERMINOLOGY
8.1 FORK
https://help.github.com/articles/fork-a-repo
8.2 BUILD AND DEPLOY
http://en.wikipedia.org/wiki/Software_deployment
8.3 ROOT DIRECTORY
http://en.wikipedia.org/wiki/Root_directory
8.4 GIT
http://en.wikipedia.org/wiki/Git_(software)
8.5 ANT
http://en.wikipedia.org/wiki/Apache_Ant