Serverless Application with Flutter & Lambda

Few days ago, Google has announced the beta release of Flutter at Mobile World Congress 2018. A mobile UI framework to build native apps for both iOS and Android. It uses Dart to write application. The code is compiled using the standard Android and iOS toolchains for the specifc mobile platform, hence, better performance and startup times.

Flutter has a lot of benefits such as:

  • Open Source.
  • Hot reload for quicker development cycle.
  • Native ARM code runtime.
  • Rich widget set & growing community of plugins backed by Google.
  • Excellent editor integretation: Android Studio & Visual Studio Code.
  • Single codebase for iOS and Android, full native performance (does not use JavaScript as a bridge or WebViews) .
  • React Native competitor.
  • Dart feels more Java, easy for Java developers to jump on it.
  • It use Widgets, so for people coming from web developement background everything should seem very familiar.
  • It might end the Google vs Oracle Java wars.

So it was a great opportunity to get my hands dirty and create a Flutter application based on Serverless Golang API I built in my previous post “Serverless Golang API with AWS Lambda

The Flutter application will call API Gateway which will invoke a Lambda Function that will use TMDB API to get a list of movies airing this week in theatres in real-time. The application will consume the JSON response and display results in a ListView.

Note: All code can be found on my GitHub.

To get started, follow my previous tutorial on how to create a Serverless API, once deployed, copy to clipboard the API Gateway Invoke URL.

Next, get the Flutter SDK by cloning the following GitHub repository:

Note: Make sure to add flutter/bin folder to your PATH environment variable.

Next, install the missing dependencies and SDK files:

Start Android Studio, and install Flutter plugin from File>Settings>Plugins :

Create a new Flutter project:

Note: Flutter comes with a CLI that you can use to create a new project “flutter create PROJECT_NAME

Android Studio will generate the files for a basic Flutter sample app, we will work in lib/main.dart file:

Run the app. You should see the following screen:

Create a simple POJO class Movie with a set of attributes and getters:

Create a widget, TopMovies, which creates it’s State, TopMoviesState. The state class will maintain a list of movies.

Add the stateful TopMovies widget to main.dart:

Add the TopMoviesState class. Most of the app’s logic will resides in this class.

Let’s initialize our _movies variable with a list of movies by invoking API Gateway, we will iterate through the JSON response, and add the movies using the _addMovie function:

The _addMovie() function will simply add the movie passed as an argument to list of _movies:

Now we just need to display movies in a scrolling ListView. Flutter comes with a suit of powerful basic widgets. In the code below I used the Text, Row, Image widgets. In addition to Padding & Align components to display properly a Movie item:

Finally, update the build method for MyApp to call the TopMovies widget instead:

Restart the app. You should see a list of movies airing today in cinema !

That’s it ! we have successfully created a Serverless application in just 143 lines of code and it works like a charm on both Android and iOS.

Flutter is still in womb so of course it has some cons:

  • Steep learning curve compared to React Native which uses JavaScript.
  • Unpopular comparing to Kotlin or Java.
  • Does not support 32-bit iOS devices.
  • Due to autogenerated code, the build artifact is huge (APK for Android is almost 25 Mb, While I built the same app in Java for 3 Mb).

But for a beta release it look very stable and well designed. I can’t wait to see what you can build with it !

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