Create 9Gag Android Application

In this post we are going to learn how to create a 9Gag application starting from the RESTful API in Go and deployement to AWS Elastic Beanstalk, to building the Android application.

All the code used on this demo is available on my Github:

• RESTful API
• Android Application

1 — RESTful API

To build this application we need a REST API to crawl through 9Gag website. Hopefully I have already written a 9Gag client that do the hardest task for us. So the only thing we need to do is setup an HTTP server in Go which expose a single endpoint to fetch memes by their tag.

So make sure to grap the packages:

go get github.com/mlabouardy/9gaggo get github.com/gorilla/mux

• 9gag: 9Gag web crawler
• mux: Request router and dispatcher for matching incoming requests to their respective handler

Once the dependencies are installed, create an “app.go” file, with the following content:

Let’s test it out, by typing the following command:

go run app.go

If you point your favorite web browser (not you IE) to http://localhost:3000/memes/geek, you should see:

Let’s try again with a different tag:

The Android application will consumes the API JSON response. Therefore the API must be accessible by the Internet.

2 — Deployement on AWS Elastic Beanstalk

Note: I already did a tutorial on how to use EB, so make sure to read it for more details.

We will deploy the API inside a Docker container. In order to dockerize the service, we need two files :

Dockerfile: To create a Docker image that contains your source bundle:

Dockerrun.aws.json: To deploy the app on AWS EB, it tells EB which port it needs to expose.

Now we have all files required for deployment. We will use the EB CLI, so start by typing “eb init” as below:

Then, type “eb create“:

Once deployed, go to Elastic Beanstalk Dashboard:

If you point your browser to the app url shown above:

3 — Android Application

If you already created your Android project, just go ahead and start from the next section. Otherwise, create a new project in your favorite IDE. I prefer Android Studio with Gradle as the build system, but you can surely use your IDE of choice or Maven as well.

So open Android studio, under the “Quick Start” menu, select “Start a new Android Studio project“:

At first, add the libraries for the project in your build.gradle file:

We will performs HTTP requests againt the API we deployed earlier. Executing those requests from an Android application requires the Internet permission to open network sockets. So make sure to require Internet permission in your AndroidManifest.xml file:

<uses-permission android:name=”android.permission.INTERNET”/>

Add the below string, dimen, color resources to respective files under res directory:

Before we start writing the code, I always start with planning the layout:

As you can notice above the main_activity.xml will contains the ListView, Toolbar & SearchBar. And each row of the ListView will have a TextView, NetworkImageView, and a LinearLayout as wrapper to create the Card effect.

Let’s create an xml layout that presents each indiviual meme item row in a customised way:

Now under the adapter package, create a class named MemesAdapterthat populates the Meme model into the ListView:

Create a class named BitmapLruCache under utils package and add the following code. This class takes care of caching network images on disk for better performances:

We need to define the API Endpoint. The following code defines the MemeService and a method findByTag to request list of memes for a given tag. The @GET annotation declares that this request uses theHTTP GET method. The code snippet also illustrates the usage of Retrofit‘s path parameter replacement functionality. In the defined method the {tag} path will be replaced with the given variable values when calling the findByTag method.

There is a defined class Meme. This class is a simple POJO with _getters_and setters:

Note: The annotation @SerializedName is used to map the JSON attribute to the right Entity field.

Now we have all the required classes in place. Open the MainActivityclass and add the following code:

This class creates the Retrofit client, calls the MemeService every time a user type a new tag in the SearchBar and handles the results (It passes the memes list to the MemesAdapter which populates the ListView)

The output of the application in action is shown below:

This brings an end to this tutorial. In the upcoming tutorial I will show you how to do Unit Tests with JUnit, and UI Tests with Espresso.