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 at my Github:

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:

  • 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:

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:

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 MemesAdapter that 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 the HTTP 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 MainActivity class 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 

Deploying Node.js Application on AWS Elastic Beanstalk

Contrary to EC2, Elastic Beanstalk has Node.js, Go, Java, PHP … installed out of the box 😻. That lets you deploy, monitor and scale your application without having to worry about the infrastructure setup. In this post I will show you how to deploy a simple Node.js application on Elastic Beanstalk.

1 – Elastic Beanstalk setup with AWS Console

Go to AWS Management Console, then click on “Elastic Beanstalk”:

Next, click on “Create New Application”:

Assign a name and a short description for your application, then click on “Create”:

Next, create a new environment by clicking on “Create one now”:

Choose “Web server environment”:

Then fill the form as below:

It will take anywhere from 2 – 5 minutes for Elastic Beanstalk to fully create the necessary instances and start the web app.

After a couple minutes, you should see:

If you point your browser to the URL shown above:

Congratulations 😁 you have successfuly deployed a simple Node.js app on EB.

2 – Upload your App Code

Note: You can use your own code if your Node.js application is ready to be deployed.

Download the simple Node.js app from my Github.

Then, on the EB Dashboard click on “Upload and Deploy“:

A popup will show up, so upload your app code and assign a version to it, then click on “Deploy“:

 

Once the Application has been upgraded you can jump directly to it’s webpage by clicking on the URL shown on the dashboard.

3 – Elastic Beanstalk setup with EB CLI

In this section, I will show you how to deploy the same app by using the AWS EB CLI.

First, install the CLI, if you already have pip you can issue the following command:

After you install the EB CLI, add the path to the executable file to your PATH variable.

Once done, you need to create a new user account in order to manage EB resources with EB CLI. I already did a tutorial on how to create a new User with IAM, so I won’t repeat it. There is one way you’ll want to differ from the tutorial:

  • Add AWSElasticBeanstalkFullAccess to the user permissions list:

Copy down the Access Key ID and Secret Access Key. We’ll need this to connect via the EB CLI interface.

Then, modify your ~/.aws/credentials file and add the following content:

Then in your Node.js application directory, configure EB by typing the following command:

The command take as arguments:

  • –profile : the user profile we created earlier
  • -p: the application language

then set the region on which you want to deploy your application.

Once you finish , issue the command ‘eb-create‘:

After the EB instance is created you can deploy it:

Once deployed , you can open the app by either clicking on the URL on the EB Dashboard:

or by running the command ‘eb open‘:

4 – EB CLI commands

4.1 – eb logs

To pull logs from the instance:

4.2 – eb health

To check the health status of the app:

4.3 – eb terminate –all

To clean up the EB instance:

For a full list of available EB CLI commands, check out the EB CLI Command Reference.