Simple Twitter: Play Framework, AJAX, CRUD on Heroku

Felipe OliveiraSeptember 13th, 2011Last Updated: October 21st, 2012

0 115 2 minutes read

So the big announcement is out – Heroku started offering native support to Play Framework applications! If you haven’t heard it, checkout the post from Jesper Joergensen on Heroku’s blog.

So for the presentation, I am setting up a very basic Twitter clone; it’s meant to be simple yet it displays just enough of the productivity that Play! provides. I am gonna go through the steps to setup the demo application which should cover what was announced on Heroku’s blog post but with a little more depth.

First step let’s create the application

1	`play new twitter`

Add dependency to CRUD module (conf/dependencies.yml)

1	`- play -> crud`

Get the dependencies

1	`play dependencies`

IDE Integration

(for Eclipse)

1	`play eclipsify`

(for IntelliJ)

1	`play idealize`

(for Netbeans)

1	`play netbeansify`

Create Model (app/models/Tweet.java)

package models;
 
import java.util.Date;
import java.util.List;
 
import javax.persistence.Entity;
 
import play.data.validation.MaxSize;
import play.data.validation.Required;
import play.db.jpa.Model;
 
@Entity
public class Tweet extends Model {
 
    @Required
    @MaxSize(140)
    public String tweet;
 
    @Required
    public Date createDate = new Date();
 
    public static List findLatest() {
        return Tweet.find(“order by createDate desc”).fetch();
    }
 
    @Override
    public String toString() {
        return this.tweet;
    }
 
}

Define DB for JPA Models (conf/application.conf)

1	`db=${DATABASE_URL}`

Add Controller Actions (app/controllers/Application.java)

package controllers;
 
import java.util.List;
 
import models.Tweet;
import play.mvc.Controller;
 
public class Application extends Controller {
 
    public static void index() {
        List tweets = Tweet.findLatest();
        render(tweets);
    }
 
    public static void create(String msg) {
        Tweet tweet = new Tweet();
        tweet.tweet = msg;
        tweet.save();
        render(tweet);
    }
 
    public static void tweets() {
        List tweets = Tweet.findLatest();
        renderJSON(tweets);
    }
}

Define Main View (app/views/Application/index.html)

#{extends ‘main.html’ /}
#{set title:’Home’ /}
 
<!– Create Tweet Form –>
 
<form> <input name=”tweet” type=”text” />
<input type=”submit” value=”Tweet” /> </form><!– Latest Tweets List –>
<ul> #{list tweets}
<li>${_.tweet} (${_.createDate.since()})</li><p><p>
#{/list}</ul>
<!– JS –>
<script type=”text/javascript”>
 
    // Capture Form Submit Event
    $(‘form’).submit(function() {
    // Define Create Action
    var createAction = #{jsAction @create(‘:tweet’) /}
 
    // Call Create Action
    $.post(createAction({tweet: $(‘input:first’).val()}), function(data) {
    // Prepend Results to the List
    $(‘ul’).prepend(data);
    $(‘input:first’).val(”);
 
    });
 
    // Don’t let the browser redirect
    return false;
    });
 
</script>

Define Create Action View (app/views/Application/create.html)

1	`<li><code>${tweet.tweet} (${tweet.createDate.since()})</li>`

Create Unit Test for Tweet Model

import models.Tweet;
 
import org.junit.Assert;
import org.junit.Test;
 
import play.test.UnitTest;
 
public class TweetTest extends UnitTest {
 
    @Test
    public void testModelSave() {
        long count = Tweet.count();
        Tweet t = new Tweet();
        t.tweet = “my sample tweet”;
        t.save();
        long count2 = Tweet.count();
        Assert.assertEquals(count + 1, count2);
    }
 
}

Create CRUD Admin for Tweet Model

package controllers;
     public class Tweets extends CRUD {
}

Add Routes (conf/routes)

* /admin module:crud
 
GET /rest/tweets Application.tweets

Define Messages for CRUD Admin (conf/messages)

tweet=Tweet
createDate=Date Created

Define Profile

web: play run –%$FRAMEWORK_ID –http.port=$PORT -DusePrecompiled=$USE_PRECOMPILED -DDATABASE_URL=mem

Run in Development

1	`play run –%dev -DusePrecompiled=false` `-DDATABASE_URL=mem`

Create Application on Heroku

1	`heroku create play-twitter –stack cedar`

heroku create play-twitter –stack cedar

Setup Git Repository

git init; git add .; git commit -a -m “Initial Commit”; git remote add heroku git@heroku.com:play-twitter.git

Setup Heroku Environment Variables

1	`heroku config:add FRAMEWORK_ID=prod; heroku config:add USE_PRECOMPILED=true`

Deploy to Heroku

1	`git push heroku master`

If anything went wrong you can always check the log

1	`heroku logs`

To Setup a Real Database on Heroku

1	`heroku addons:add shared-database`

You can checkout a live demo here, the admin interface here or clone the source code on Github.

Reference: Step-by-Step for a Simple Twitter with Play Framework, AJAX, CRUD and Heroku from our JCG partner Felipe Oliveira at Geek Are Totally In.

Related Articles :

Simple Twitter: Play Framework, AJAX, CRUD on Heroku

Thank you!

Felipe Oliveira

Thank you!