Building an Android App on a Flask Server

Android with a Back-end ? Why not Locally?

I’ll start from the simplest place..! Any idea why we need a separate back-end for our android app? Simply think about a situation where all the user’s who use the mobile application receive data from and send data to a cloud database server!

Why REST APIs?

REST APIs communicate via http requests to perform the communication between your front-end application and the database! Just like you are in Asia with your mobile application and the database is hosted in a sever in America. You need an agent to establish the connectivity between your mobile app and database, isn’t it?? This is the point where you implement your own REST API. It will communicate with your central database using the functions you implemented to perform CRUD. Your front-end application establishes a connection and makes http requests to retrieve data from the database. The REST API you implemented will work on those requests and send you the data as http response.

Why Flask??

My initial use case was that I was working on a machine learning based mobile application and there I needed to do pre-processing and predictions using python and python-compatible libraries. Hence it was a significant requirement to have a python backend and that’s where I stepped into ‘Flask’! In this approach we can send our data from Android to Flask server via REST API calls and do the python related processing inside the flask server and get the output back to our android app via REST API call. Yeah even from first impressions it’s simple but nice!

Here I’m using okhttp, a third-party library developed by Square for sending and receiving http requests.

I’m going to demonstrate how to connect your Android frontend application to a Python Server implemented using Flask!

Here are the steps!

1. Create your Android App

2.Create the Flask Server

3. Connect Android app and the server

This demonstration contains a simple user interface.

‘Send Post Request’ button sends a ‘POST’ request to the server with user’s name entered in the given text field. When it goes to the server, there we implement a function extract_name() to return a sentence containing the name it receive, back to the user as the response. So once you enter your name and click on the ‘Send Post Request’ button, the response you receive will be displayed on the bottom text view.

When click on the ‘Send Get Request’ button, it will make a GET request to the server and the corresponding server function ‘get_fact()’ will return the response text. It will be displayed on the text view on the bottom.

So let’s see how to do it!

1. Create your Android App

• Open your Android Studio and click File->New Project to create a new project
• Select ‘Empty Activity’ in this preview. (You can choose a preferred view!)

Select the activity template and click Next.

• Give your project a name and then click finish as in the below image.

Now the Android app is being created. Wait some time till your IDE does this for you!

I’m creating a simple UI with a text box, buttons, and a text view as previously mentioned. For now, just copy and paste the below code in your activity_main.xml file. In the end, you’ll get a clear insight!

Now click on the run button in the IDE and you will see the particular user interface in your simulator or emulator:

2. Create the Flask Server

In somewhere else (not in the android project directory) create a new file named server.py and copy the following code there.

Now open the cmd inside the same directory where the above file exists, and run it using the command

python server.py

Now your server should be running!

This is how your cmd appears! You will get your own URL at the place marked with a red arrow. Use that URL in the upcoming sections

3. Connect Android App with Server

Add the following line in AndroidManifest.xml file for internet permission.

Within the ‘application’ tag in the manifest file put the following line

Add the following dependency in the dependencies object section in app/build.gradle

Now let’s make our UI functional! For that paste the following code in MainActivity.java file . Make sure to paste the URL you got here as the value of the variable on line 29 of the below code

Please ensure to enable internet connectivity to the devices in which the Flask server executes and the mobile phone which android app executes.

All set now!!! Yeah! It’s done! By clicking on the Send Get Request and Send Post Request buttons you will send requests to the server and retrieve corresponding responses. Do go through the codebase carefully and read the comments. It’s simple!!!

Here you can see the demo. Look, your Android app can send data to the backend server and retrieve the data from it!

You can find the source code in GitHub : https://github.com/RusJaI/Android-Flask

First Published here