Motivation

Continuous Deployment is nice: you roll out new versions of your software all the time and not only three, four times a year with your mayor release. And everything automatically. Of course this requires a good coverage of automated unit, integration and UI tests to make sure that your current version doesn’t break anything for the user.
What tools can you use do achieve this for your open source project? If I’m not mistaken you get all this with an account at bit bucket from Atlassian. But since I currently host my open source projects on Github I had to find another solution. And it exists, even for free: http://codeship.io
Codeship already nows about many services and you only have to configure a few lines to get it up and running. For instance it supports Github as code repository and Google App Engine as deployment target. But the documentation about it is still a bit sparse. So this article describes how you can set it up

SCM

Tests

mvn package

cp target/-/WEB-INF/appengine-web-testenv.xml target/-/WEB-INF/appengine-web.xml

Please replace maven.project and maven.version with the name of your maven artefact. In my case this is “extraleague-1.0-SNAPSHOT”. So this basically replaces the original appengine file with the one containing the test environment id. When appcfg.sh now tries to find the target for deployment it will find the one with the test environment.
Now we add another deployment descriptor by selecting the app engine option. I think when you first do this you have to authorise CodeShip to deploy to GAE on your behalf. After that I added./target/extraleague-1.0-SNAPSHOT/ as Path and a rest service endpoint in the URL field. This URL will be checked to decide if the deployment was successful. In my first attempt I used the index.html of my angular application for this. The problem here is that static files like the index.html did get served while the Java server part had a 500 error. That’s why I think a rest point is a better choice here.

Triggering a run and debugging

Remarks

cp src/main/webapp/WEB-INF/appengine-web-testenv.xml  src/main/webapp/WEB-INF/appengine-web.xml
cat src/main/webapp/WEB-INF/appengine-web.xml
echo '{"credentials":{"rof":{"access_token":"XXXX","expiration_time_millis":1399667604244,"refresh_token":"XXX"}}}' > ~/.appcfg_oauth2_tokens_java
mvn appengine:update
wget --retry-connrefused --no-check-certificate -T 60 http://your-test-url

Motivation

I’m currently working on a foosball web app that is widely used in breaks where I work. While you track the goals made by each of the team the app running on the app engine calculates a ranking of all the players and awards badges given special scores in a game.
Now I wanted to update all the clients about goals made or if a a foosball table is currently occupied. Since I’m using AngularJS for the client my first cheap approach was to pull the information frequently. But as we all know, pulling doesn’t scale well for the server. In another project I had used the GAE ChannelService before, but there the client technology was GWT. So how would I get this to work for AngularJS? This posts describes the different components necessary and might help you achieving the same.

Technology

The token

@Entity
@Cache
public class BrowserClient {
 
 @Id
 private Long id;

 private String token;
 
 @Index
 private Date createdDate;

        //getter/setter omitted for saving space
...
}

The createdDate is used to remove old (and most possibly outdated) client entries from the datastore. Now how the client gets this token? With AngularJS and Restlet an obvious choice is to create a REST endpoint resource:

public class NotificationTokenResource extends ServerResource {
 
 @Get(value = "json")
 public NotificationTokenDto execute() throws UnsupportedEncodingException {
  ChannelService channelService = ChannelServiceFactory

                     .getChannelService();
  Random random = new Random();
  String token = channelService

                     .createChannel(String.valueOf(random.nextLong()));
  BrowserClient client = new BrowserClient();
  client.setToken(token);
  ofy().save().entities(client);
  NotificationTokenDto dto = new NotificationTokenDto();
  dto.setToken(token);
  return dto;
 }
}

So what happens here? First I get an instance of the channel service, then I have it create a token based on a random seed. In case your used is logged in you could also use the userId to create the token. This saves you the trouble to store the token in the datastore, since you always can recreate it on the server side based on the same userId. Then I store the token and fill it into a DTO to be returned as JSON to the client:

{"token":"AHRl[...]ntZ"}

Angular Notification Service

angular.module('gaeChannelService', ['ngResource'])
 .factory('NotificationToken', ['$resource', function($resource) {
     return $resource('/rest/notificationToken');
 }])

 .factory('NotificationService', ['$rootScope', 'NotificationToken', function($rootScope, NotificationToken){
 var tokenObject = NotificationToken.get({}, function() {
  console.log("Token received");
  channel = new goog.appengine.Channel(tokenObject.token);
  socket = channel.open();
  socket.onopen = function() {
   console.log("Channel opened");
  };
  socket.onmessage = function(message) {
   console.log("Message received: " + message.data);
   var messageObject = angular.fromJson(message.data);
   $rootScope.$emit(messageObject.channel, messageObject);
  };
 });

    return {
    }
 }]);

First the REST endpoint for the token is defined and later injected into the notification service. In the callback method of the REST call the connection to the channel is opened and more callback methods are defined. The onmessage function will be called, when the server sends a new message. This message will be deserialized using the angular.fromJson method. Since all the messages contain a member called “channel” the message will be sent using the $emit function to all subscribers of that specific channel.

In the controller

So what do we have now? When the page is first loaded, we request a token from the server. The NotificationService uses this token to open a channel and listens for messages. Once a message is received it is relayed on the specified broadcast channel. So now we have to add listeners in a controller:

  $rootScope.$on("UpdateOpenGames", function(event, message) {
   console.log("Received change in open games from server");
   $scope.$apply(function() {
    $scope.games = [];
    angular.forEach(message.openGames, function(key, value) {
     $scope.games.push(new OpenGames(key));
    });
   });
  });

This code listens for messages on the channel “UpdateOpenGames” for incoming messages. Once a message has been received the $scope.$apply makes sure, that everybody knows about changes of the current scope.

In the controller

Now what is left is to send a message from the server:

  List clients = ofy().load().type(BrowserClient.class).list();
  ChannelService channelService = ChannelServiceFactory.getChannelService();
  ObjectMapper mapper = new ObjectMapper();
  String payload = mapper.writeValueAsString(message);
  for (BrowserClient client : clients) {
      ChannelMessage channelMessage = new ChannelMessage(client.getToken(), payload);
      channelService.sendMessage(channelMessage);
  }

This code first loads all BrowserClient objects from the datastore. Remember, the BrowserClient class contains the token we need to send a message to a specific channel. Then we serialize the message we want to send into a JSON string, convert it into a ChannelMessage and send it. We doe this for all currently active clients. If by now a client is no longer online we won’t notice here. That’s it, folks!

Remarks

This is a pure broadcast and doesn’t take care much of security. If your application sends secrets over the channel you should be a bit more careful with the token. You have to treat it with care, since it can be used to impersonate your client from a possibly evil browser.

Other new features:

• Social bookmarking items: share items that you like with your friends in Twitter, Facebook and others
• Drag And Drop: by dragging an item with the dotted handle to a feed label on the left you can copy that item to a new feed. This also works with search results: you can search for movies and once you found one that you like you can drag it to the feed that your downloader has subscribed to