Displaying GitHub Stats with Spring RestTemplate and Thymeleaf

We added GitHub Project Stats on the NixMash Spring Home Page which you can view here. You'll see that we did it in a very Spring-like manner, and with no JavaScript whatsoever.

We'll describe the process then go into a bit of detail.

  • Used Spring's RestTemplate for synchronous client-side HTTP retrieval of JSON from the GitHub API Project Url
  • Loaded the JSON elements into a simple container called GitHubDTO
  • Served up GitHubDTO as a Model Attribute in Spring MVC named gitHubStats
  • Generated the HTML with Thymeleaf, using the gitHubStats properties and Spring messages.properties
  • Prettied up the HTML with CSS

GitHub Buttons is thanks to the excellent work of Mark Otto, a member of the GitHub Team and author of GitHub Buttons. The Thymeleaf HTML and CSS was based on his work. His GitHub Button Display service is available if using <iframes />. I guess we could have gone that route, but it was a great opportunity to roll our own with some cool Spring and Thymeleaf action.

We'll begin the details portion of our post with the raw JSON we get from the GitHub API for our repo.

Now we use the Spring RestTemplate to retrieve that JSON and store it into a DTO called GitHubDTO. Notice we use the RestTemplate twice. First we load our JSON straight into DTO object in one line of code, and the second time to retrieve the JSON as a Mapped String Object and retrieve the Developer Followers count. We have to do that because Follower Count is on a different API Endpoint.

    public GitHubDTO getGitHubStats() {

        String gitHubRepoUrl = environment.getProperty("github.repo.url");
        String gitHubUserUrl = environment.getProperty("github.user.url");

        // Load Repository JSON elements into GitHubDTO Object

        RestTemplate restTemplate = new RestTemplate();
        GitHubDTO gitHubDTO = restTemplate.getForObject(gitHubRepoUrl, GitHubDTO.class);

        // Load User Followers count from GitHub User JSON Endpoint and add to GitHubDTO

        HttpEntity<String> stringUserEntity = restTemplate.getForEntity(gitHubUserUrl, String.class);
        ObjectMapper mapper = new ObjectMapper();
        try {
            ObjectNode node = mapper.readValue(stringUserEntity.getBody(), ObjectNode.class);
            gitHubDTO.setFollowers(node.get("followers").intValue());
        } catch (IOException e) {
           logger.error("Error adding follower count from GitHub API to GitHubDTO object");
        }
        return gitHubDTO;
    }

The GitHubDTO container is straight POJO. What makes it interesting are the Jackson Property Annotations. @JsonIgnoreProperties allows us to include only the elements we want to retrieve, and @JsonProperty identifies the JSON Element.

With Spring MVC we can now serve up our gitHubStats Model Attribute on the Home Page.

Now it's time for Thymeleaf to do its thing. Below is part of our Thymeleaf fragment where we're displaying the first of our four buttons. We can use as much Thymeleaf Juju here as we like, even use a single HTML Block for all four buttons if we wanted to. It's a matter of how many properties you want to create verses a few repeated lines of HTML. We went with repeated lines of HTML because it was more straightforward.

You can see we're using several messages.properties and at the bottom, our gitHubStats Attribute.

Speaking of those properties, here are the ones we're using. Simply change these items and you're good to go in your own project.

Source Code Notes for this Post

All source code discussed in this post can be found in my NixMash Spring GitHub repo and viewed online here.

Posted May 13, 2016 12:25 PM EDT

More Like This Post