DEV Community: Rishabh Tatiraju

Serving static files and creating websites using Python Flask

Rishabh Tatiraju — Fri, 18 Jun 2021 17:34:19 +0000

No matter who you are - a business owner or a developer - having a website shall be inevitable at a point in your career. There are a wide variety of options at your disposal - from no-code, dropdown website builders to hardcore web development using JavaScript frameworks like React.

In this article, we'll talk about another option to build a basic, static website using Python Flask and HTML/CSS + JavaScript, which falls somewhere in between this spectrum of web development choices. This is also a demonstration of how versatile the Flask microframework is!

Additionally, we'll see how we can publish our website online using Heroku.

You can refer to my previous article to understand how to setup Flask to make simple API calls. It will also serve as a good base for this tutorial.

Source code for this tutorial can be found on my GitHub

Prerequisites

If you haven't already, install Flask with the command:

pip install Flask

Folder structure

Create a folder in a location of your choice and open it using your favorite code editor. This will be our workspace folder.

In this workspace folder, create a file called main.py. This file will hold our Flask code with all the routes and configurations.

Within the same folder, create another folder called static. Leave it empty for the moment.

Flask setup

Open the created main.py file and import the Flask module in the first line.

from flask import Flask

Then we initialize the Flask object as usual. However, we pass in two more parameters to the constructor - static_folder as static (which is our static directory name) and static_url_path, which we'll leave as blank.

app = Flask(__name__, static_folder='static', static_url_path='')

Building our webpage

In order to serve a static webpage, we need to make an HTML file that will hold our webpage content. Create a file within the static directory called galaxy.html.

You can put any valid HTML code in this file. I have included a basic webpage with some styling below, feel free to edit this code as it suits you!

<html>
  <head>
    <title>Galaxy</title>
  </head>
  <style>
    body {
      background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Hubble2005-01-barred-spiral-galaxy-NGC1300.jpg/2560px-Hubble2005-01-barred-spiral-galaxy-NGC1300.jpg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      margin: 40px;
    }

    .text {
      color: white;
      font-family: sans-serif;
      text-align: end;
    }
  </style>
  <body>
    <h1 class="text">NGC 1300</h1>
    <p class="text">Barred spiral galaxy</p>
  </body>
</html>

Serving our webpage

Now lets serve this static webpage we just created. In the main.py file, we'll add a new GET request with route /galaxy.

@app.route('/galaxy')
def galaxy():

We will then add the magic code that will automatically serve this static webpage as a route. The Flask object contains a function called send_static_file, which accepts the name of the file located in your static directory as a parameter, and returns it back as a valid HTML response.

@app.route('/galaxy')
def galaxy():
    return app.send_static_file('galaxy.html')

Finally, we'll add the code to execute our Flask server at the bottom of the main.py file. We'll pass in threaded as True to allow multithreaded operations, and set port to 5000.

if __name__ == '__main__':
    app.run(threaded=True, port=5000)

In the end, the entire main.py file looks like this.

from flask import Flask

app = Flask(__name__, static_folder='static', static_url_path='')


@app.route('/galaxy')
def galaxy():
    return app.send_static_file('galaxy.html')


if __name__ == '__main__':
    app.run(threaded=True, port=5000)

Run the code by executing the command python main.py, and navigate to http://localhost:5000/galaxy or http://127.0.0.1:5000/galaxy to see the magic!

You can similarly add more routes and serve other static HTML files to build a complete website!

Deploying online

Now that you have finished building your pages and added the relevant Flask code, it is time to publish your website on the internet for everyone to see. To deploy your website online, we will use a combination of GitHub and Heroku.

Uploading your code to GitHub.

Log in to your GitHub account (or create a new one) and create a new repository. Name it as you wish. Once done, with the working directory set as your workspace folder, run the following commands one after the other.

Note: make sure you replace <YOUR_USERNAME> with your GitHub Username and <YOUR_REPOSITORY_NAME> with the repository name you just created.

git init
git remote add origin https://github.com/<YOUR_USERNAME>/<YOUR_REPOSITORY_NAME>.git
git branch -M main
git add .
git commit -m "Initial commit"
git push

Setting up Heroku

Heroku is a cloud platform that allows us to operate applications in the cloud. We will use Heroku to deploy and publish our website on the web.

Publishing to Heroku is free for simple websites with low traffic.

Create a Heroku account on heroku.com and confirm your email address. Once done, go ahead and create a new team and call it anything you wish.

Within that new team, you will find the New button. Click on it and select Create New App

On the following page, you will be asked to name your new app and choose a region. Name your website appropriately and select any region. Click Create App to continue.

Subsequently, you will be shown a page where you will find an option to select a deployment method. Select GitHub. This will reveal an option to connect your Heroku account with your GitHub account. Follow the steps as instructed.

Once connected, a search bar will appear. Enter your repository name and hit search, and select your repository when it appears in the search results.

After linking your repository, you will be shown a section titled Automatic Deploys. Select the branch (main by default) where your website code resides, and click Enable Automatic Deploys.

This completes our Heroku setup. Moving along.

Deploying your website

Before deploying your website, Heroku must know what commands are to be executed by the app on startup, for which it requires a file called Procfile.

Create a file called Procfile (no extension) in the root of the workspace directory. Include the following line in the file.

web: gunicorn main:app

Gunicorn is an HTTP web server for Python.

We must also create a file called requirements.txt, that tells Heroku what dependencies to install before running our Flask server. Create this file in the root of the workspace directory, and add the following content in it.

Flask
gunicorn

Once done, push these changes to GitHub using the following commands.

git add .
git commit -m "Added Procfile and Requirements"
git push

Since we enabled Automatic Deploys, Heroku will automatically deploy your website to https://<YOUR_HEROKU_APP_NAME>.herokuapp.com/ in a few minutes. Once done, you can visit that link and see your website live on the internet.

From now on, whenever you make any changes, like adding new webpages, all yo need to do is push your code to GitHub, and Heroku will automatically build your website and deploy it for you.

Ending Notes

We just saw a simple way to serve static webpages using Flask. We also saw how to easily deploy the same online using Heroku. This method is not only limited to HTML webpages, but also any type of file as long as it exists in the static folder.

In the upcoming articles of the series, we’ll look at advanced features that we can build using Flask, including authentication (login/signup), and data storage.

Let me know in the comments section if you have any feedback or queries, and as always, keep coding!

Speech-to-text and Text-to-speech with Android

Rishabh Tatiraju — Sat, 30 May 2020 10:11:06 +0000

Have you ever wondered how does Google's speech search work, or ever thought of building an ebook narration app? At the first glance it might seem some complex piece of technology. While it is complicated to implement it on your own, thankfully Android (via Google Services) has built in speech-to-text and text-to-speech APIs which make it extremely easy to setup these features.

See it in action

How does this work?

For Speech-to-text, Android provides an Intent based API which launches Google's Speech Recognition service and returns back the text result to you. There is a catch though - the device will require Google Search app for the service to work.

The Text-to-speech API, unlike Speech Recognition, is available without Google Services, and can be found in android.speech.tts package.

Source code

You can find the source of this tutorial on GitHub.

Let's develop!

Fire up Android Studio and create a project with a Blank Activity.

User interface

The user interface is going to be simple - a LinearLayout as the root view group, inside wich there will be a Button which launches the Speech Recognition API, an EditText that shows the Speech Recognition output as well as serves as input to Text-to-speech functionality, and another Button to trigger Text-to-speech output.

The resultant XML file is as follows:



<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="24dp"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btn_stt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Speak" />

    <EditText
        android:id="@+id/et_text_input"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginTop="24dp"
        android:layout_marginBottom="24dp"
        android:layout_weight="1"
        android:gravity="center"
        android:hint="Text from STT or for TTS goes here." />

    <Button
        android:id="@+id/btn_tts"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Listen" />

</LinearLayout>

Setting up speech recognition

The Speech Recognition API comes bundled with the Google Search app, and can be launched using an Intent. The result of this Intent holds the recognized text, which can be extracted from the result intent in onActivityResult.

All the code beyond here is in Kotlin.

Firstly, let's define our request code constant.



    companion object {
        private const val REQUEST_CODE_STT = 1
    }

Then, we'll attach an onClickListener to our button, in which we will construct and launch the Speech Recognition Intent.



    btn_stt.setOnClickListener {
        // Get the Intent action
        val sttIntent = Intent(RecognizerIntent.ACTION_RECOGNIZE_SPEECH)
        // Language model defines the purpose, there are special models for other use cases, like search.
        sttIntent.putExtra(RecognizerIntent.EXTRA_LANGUAGE_MODEL, RecognizerIntent.LANGUAGE_MODEL_FREE_FORM)
        // Adding an extra language, you can use any language from the Locale class.
        sttIntent.putExtra(RecognizerIntent.EXTRA_LANGUAGE, Locale.getDefault())
        // Text that shows up on the Speech input prompt.
        sttIntent.putExtra(RecognizerIntent.EXTRA_PROMPT, "Speak now!")
        try {
            // Start the intent for a result, and pass in our request code.
            startActivityForResult(sttIntent, REQUEST_CODE_STT)
        } catch (e: ActivityNotFoundException) {
            // Handling error when the service is not available.
            e.printStackTrace()
            Toast.makeText(this, "Your device does not support STT.", Toast.LENGTH_LONG).show()
        }
    }

The above code will launch the Speech Recognition API. But how do we get the result? We'll override the activity's onActivityResult and get the recognized text.



    override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
        super.onActivityResult(requestCode, resultCode, data)
        when (requestCode) {
            // Handle the result for our request code.
            REQUEST_CODE_STT -> {
                // Safety checks to ensure data is available.
                if (resultCode == Activity.RESULT_OK && data != null) {
                    // Retrieve the result array.
                    val result = data.getStringArrayListExtra(RecognizerIntent.EXTRA_RESULTS)
                    // Ensure result array is not null or empty to avoid errors.
                    if (!result.isNullOrEmpty()) {
                        // Recognized text is in the first position.
                        val recognizedText = result[0]
                        // Do what you want with the recognized text.
                        et_text_input.setText(recognizedText)
                    }
                }
            }
        }
    }

At this point, if your run your code, you will be able to use the Speech Recognition.

Setting up Text-to-speech

Unlike Speech Recognition API, Text-to-speech has it own class and doesn't run on Intents. We'll start off by creating a TextToSpeech object. The TextToSpeech class constructor expects a Context and an OnInitListener.



    private val textToSpeechEngine: TextToSpeech by lazy {
        // Pass in context and the listener.
        TextToSpeech(this,
            TextToSpeech.OnInitListener { status ->
                // set our locale only if init was success.
                if (status == TextToSpeech.SUCCESS) {
                    textToSpeechEngine.language = Locale.UK
                }
            })
    }

Then, we'll set an OnClickListener to our TTS button and call the text-to-speech API on our input text.



btn_tts.setOnClickListener {
    // Get the text to be converted to speech from our EditText.
    val text = et_text_input.text.toString().trim()
    // Check if user hasn't input any text.
    if (text.isNotEmpty()) {
        // Lollipop and above requires an additional ID to be passed.
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            // Call Lollipop+ function
            textToSpeechEngine.speak(text, TextToSpeech.QUEUE_FLUSH, null, "tts1")
        } else {
            // Call Legacy function
            textToSpeechEngine.speak(text, TextToSpeech.QUEUE_FLUSH, null)
        }
    } else {
        Toast.makeText(this, "Text cannot be empty", Toast.LENGTH_LONG).show()
    }
}

As a safety measure and to prevent memory leaks, we must override onPause and onDestroy methods and appropriately stop or shutdown the TextToSpeech object.



override fun onPause() {
    textToSpeechEngine.stop()
    super.onPause()
}

override fun onDestroy() {
    textToSpeechEngine.shutdown()
    super.onDestroy()
}

And that's it. Give it a try!

Closing Thoughts

With the standard APIs, Speech Recognition (or Speech-to-text) and Text-to-speech in Android is extremely easy to implement. While this might suffice most use cases, some advanced use cases would require more sophisticated third-party APIs or a custom implementation in your backend. We'll probably cover that sometime later.

Until then, keep coding, and as always do let me know if you have any questions in the comments section!

Kotlin Coroutines and Retrofit – A Practical Approach to Consuming REST APIs in Android

Rishabh Tatiraju — Tue, 05 May 2020 19:08:12 +0000

If you are a serious Android developer, consuming REST APIs at some point in your career is inevitable. This article will focus on how Retrofit can be bundled with Kotlin Coroutines to call asynchronous REST APIs, and we’ll build a small app to showcase a real-world example.

The entire source code of this project is available on GitHub.

What will we build?

We'll be building a small app that retrieves a random dog image on demand. Our layout will contain an ImageView that fills up the top half of the screen, and a button which will call an API to get a random dog image whenever clicked.

We'll be using Retrofit to make the API calls, the Dog CEO API to get random dog images, and we'll be using an image loading library called Coil to display the image.

Prerequisites

Start off a new Android Studio project with a blank activity. Once the initial Gradle sync and indexing is completed, add the following lines in the dependencies section of app level build.gradle. Then re-sync your project to download all the dependencies.

// Retrofit and relevant converters
implementation 'com.squareup.retrofit2:retrofit:2.8.0'
implementation 'com.squareup.retrofit2:converter-gson:2.1.0'

// Coroutines
implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-core:1.3.5'
implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-android:1.3.5'

// Coil for image loading
implementation 'io.coil-kt:coil:0.9.5'

You will also have to use Java 8, as it is required byboth Retrofit and Coil. Add these lines to your app level build.gradle file.

android {
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = "1.8"
    }
}

Setting up Retrofit

Our next step would be setting up the Retrofit client, through which we will be calling our APIs.

Firstly, let’s create an Interface called ApiClient. This will eventually become our Retrofit client. In this file, you’ll be defining all your API routes. We use the following scheme to define our APIs.

@METHOD("/endpoint/of/the/api")
suspend fun ourMethodName(): Response<OurApiResponseModel>

Notice that the function is declared as suspend. Suspend functions are a core element of Coroutines. They’re essentially functions that could be paused or resumed during execution.

Here, the placeholders are:

METHOD: The API method – GET, PUT, POST etc.
ourMethodName: The function named relevant to the API call.
OurApiResponseModel: A class which matches with the API’s JSON response.

In the Dog CEO API, sending a GET request to https://dog.ceo/api/breeds/image/random gives us a random dog image. The API responds with the JSON structure given below:

{
    "message":"https:\/\/images.dog.ceo\/breeds\/hound-basset\/n02088238_3778.jpg",
    "status":"success"
}

We’ll now create a model class called DogImageModel which will be a replica of this response JSON. The keys become variables of the model class and the values will default to null. Retrofit will automatically handle the object mapping part for us. The @Keep annotation is to ensure the class is not obfuscated when using Proguard, which would cause a crash otherwise.

@Keep
class DogImageModel {
    var message: String? = null
    var status: String? = null
}

We’ll now define a new API inside the ApiClient file. Notice that I have omitted the domain name, the reason for which is explained in the next step.

@GET("/api/breeds/image/random")
suspend fun getRandomDogImage(): Response<DogImageModel>

At this point, our ApiClient file looks as follows.

interface ApiClient {
    @GET("/api/breeds/image/random")
    suspend fun getRandomDogImage(): Response<DogImageModel>
}

With our API defined and ready, we’ll create a new Kotlin Object called ApiAdapter. This file will hold the instance of the Retrofit client. Invoking the Retrofit builder, we pass in the base URL (the domain name we had omitted previously), an OkHttpClient instance as our HTTP client, and a GsonConverterFactory which will do the JSON-Object conversion for us.

object ApiAdapter {
    val apiClient: ApiClient = Retrofit.Builder()
        .baseUrl("https://dog.ceo")
        .client(OkHttpClient())
        .addConverterFactory(GsonConverterFactory.create())
        .build()
        .create(ApiClient::class.java)
}

We’re done with Retrofit setup. Let’s now head to the UI part.

Building the UI

Our UI is pretty simple – a vertical LinearLayout with an ImageView and a Button as its children. Here’s the full XML code.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/iv_dog_image"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>

    <Button
        android:id="@+id/btn_get_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="48dp"
        android:text="@string/get_random_dog_image"
        android:layout_gravity="center" />

</LinearLayout>

Calling the API

With our UI and boilerplate code ready, we’ll now venture into Kotlin Coroutines. Simply put, Coroutines is an asynchronous utility in Kotlin that allows you to perform multithreading tasks easily. The usage is diverse and I recommend you to check out the official guide to understand it further.

In order to call a Coroutine, we have to implement a CoroutineScope. This provides the scope in which the given coroutine should send out its results. In our case, we will implement the MainScope(), which creates the scope for UI components.

class MainActivity : AppCompatActivity(), CoroutineScope by MainScope() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        // Rest of the code goes here
    }
}

After we do that, we now have to call the API on a button click. We’ll set an OnClickListener to our Button. Our on-click action would be to call the API. Generally, using Coroutines, the API is called as follows:

Wrap the entire call within a launch function call, passing the Dispatchers.Main dispatcher as a function parameter.
Wrap the API call inside a try/catch block. This will allow us to handle any client errors (e.g. bad URL, no internet).
Call the API by accessing the Retrofit client object in ApiAdapter, and then calling the appropriate API function.
Check whether the API was successful or not, and then retrieve the response body.
Do whatever you want to with the data, in our case get the image URL and display the image.

btn_get_image.setOnClickListener {
    launch(Dispatchers.Main) {
        // Try catch block to handle exceptions when calling the API.
        try {
            val response = ApiAdapter.apiClient.yourApiMethod()
            // Check if response was successful.
            if (response.isSuccessful && response.body() != null) {
                val data = response.body!!
                // Check for null safety.
                data.message?.let { imageUrl ->
                // Load URL into the ImageView using Coil.
                iv_dog_image.load(imageUrl)
            } else {
                // Show API error.
                Toast.makeText(
                    this@MainActivity,
                    "Error Occurred: ${response.message()}",
                    Toast.LENGTH_LONG).show()
            }
        } catch (e: Exception){
            // Show API error. This is the error raised by the client.
            Toast.makeText(this@MainActivity,
                "Error Occurred: ${e.message}",
                Toast.LENGTH_LONG).show()
        }
    }
}

And with that, our entire MainActivity looks like this

class MainActivity : AppCompatActivity(), CoroutineScope by MainScope() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        btn_get_image.setOnClickListener {
            // Use launch and pass Dispatchers.Main to tell that
            // the result of this Coroutine is expected on the main thread.
            launch(Dispatchers.Main) {
                // Try catch block to handle exceptions when calling the API.
                try {
                    val response = ApiAdapter.apiClient.getRandomDogImage()
                    // Check if response was successful.
                    if (response.isSuccessful && response.body() != null) {
                        val data = response.body()!!
                        // Check for null
                        data.message?.let { imageUrl ->
                            // Load URL into the ImageView using Coil.
                            iv_dog_image.load(imageUrl)
                        }
                    } else {
                        // Show API error.
                        Toast.makeText(
                                this@MainActivity,
                                "Error Occurred: ${response.message()}",
                                Toast.LENGTH_LONG).show()
                    }
                } catch (e: Exception) {
                    // Show API error. This is the error raised by the client.
                    Toast.makeText(this@MainActivity,
                            "Error Occurred: ${e.message}",
                            Toast.LENGTH_LONG).show()
                }
            }
        }
    }
}

That’s all. We’re ready to see our new creation in action! But before you run the code, make sure you add the internet permission at the top of your project’s AndroidManifest.xml file.

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

If everything goes well, you’ll be able to see a random dog image every time you tap on the button. Congratulations!

Closing Thoughts

Retrofit is an amazing HTTP client for Android. It reduces, if not eliminates, the time you spend doing mundane and time-consuming tasks like handling network calls and mapping your objects. The library, bundled with the new coroutines feature of Kotlin, makes consuming HTTP network calls pathetically simple!

As always, i'll be glad to answer your questions in the comments section. Until next time!

Building your first RESTful API with Python Flask

Rishabh Tatiraju — Tue, 05 May 2020 15:26:44 +0000

Python is a beautiful programming language having a wide variety of usages. Ideal for beginners, the Flask module in Python is a very simple solution to build RESTful APIs. We’ll take a look at it in this article.

Flask a very simple framework for Python that allows you to build a REST API within minutes. If you have never used Python before, I strongly recommend you to check out the official guide on Python’s official website to kick start your Python experience.

The source code is available on my GitHub

Prerequisites

You need to have Python 3 and above and Pip installed on your system. You will also require an IDE that supports Python. Popular choices are Microsoft Visual Studio Code or JetBrains PyCharm.

Installing Flask

Open the terminal/command prompt and run the following to install the Flask module.

pip install Flask

Setup the work environment

Let’s create a folder named project (you can name it whatever you want), and open it using your favorite IDE. I’ll be using Visual Studio Code (VSCode) for this tutorial. Refer to the screenshots below.

With our working directory created and opened in our IDE, we’ll start off by creating a file named app.py. You can name it whatever you wish to. This file will hold our REST API code.

Setting up Flask

Open the newly created file in your IDE. We’ll start by importing Flask into our Python code. To do this, type the following as the first line of the file.

from flask import Flask

With that step done, we can go ahead and create a Flask object which will be used for all our API related operations.

app = Flask(__name__)

The variable __name__ over here signifies a special variable in Python that points to the name of the current module. You need not worry about it at the moment, but remember that it is important to pass it as a parameter to the constructor.

Writing our first API

Now that we have initialized the Flask object, we can go ahead and write our first API. Let’s first quickly plan out what we will be doing. For now, assume you need an API that returns a simple text saying May the force be with you! once you hit the URL on the browser.

We’ll first decide the route of this API. An API route is, simply put, the URL on which the API will exist. Calling this URL from our browser (or any frontend) should give us the desired output. We’ll keep things simple and call this particular route /greetings.

If this part is a bit confusing, let’s consider a real-life example. Considering the URL https://www.google.com/maps, what do you think would be the route and the domain name? Well, the route is /maps and the domain name is http://www.google.com. Eventually, our REST API will be hosted on some server which will be having its own domain name, just like Google does over here.

Now that we have our route defined, and we know what data to return, let’s build our API!

We’ll start off with writing a function that will be called when we hit our API. Let’s name this function greetings(). This function will return the expected data, which is a string in our case. The code should look like the following:

def greetings():
    return 'May the force be with you!'

So, we have our function ready. How will we call this function when our API is fired? Flask achieves this with something called a Decorator in Python. Simply put, a decorator is a function that wraps another function’s execution within itself.

While it’s not important to understand how Decorators work for this tutorial, I strongly recommend you check out some material about Decorators after this lesson.

We can invoke decorators by using the @ symbol right before the function definition. For Flask, the decorator used to attach a function to a given API is:

@app.route('/your/api/route/here')

Writing this line above our function definition, we get:

@app.route('/greetings')
def greetings(): 
    return 'May the force be with you!'

By using this decorator, we are asking Flask to run this function whenever the route /greetings is called. Flask takes care of the rest for you, as long as the returned data is a valid serializable object (like a text or JSON).

The final content of the files should be as follows:

from flask import Flask

app = Flask(__name__)

@app.route('/greetings')
def greetings():
    return 'May the force be with you!'

Running our Flask server

With most of our code complete, we can now run our Flask server. Add the following line to the end of our file:

if __name__ == 'main':
    app.run()

When you run this file, either by using the command python3 app.py on the console or by using the Run feature of your IDE, you should get the following output.

If you don’t see any errors, then congratulations, your Flask server is up! Go ahead and open http://127.0.0.1:5000/greetings on any browser to see your API in action!

Ending Notes

We saw how simple it is to build RESTful APIs using Python, thanks to the Flask module. In the upcoming articles of the series, we’ll look at more advanced features that we can build using Flask, including authentication (login/signup), data storage and serving static HTML files.

Let me know in the comments section if you have any feedback or queries, and keep coding!

Passing objects between Activities using RxAndroid

Rishabh Tatiraju — Tue, 05 May 2020 14:50:31 +0000

Want to pass data easily between activities? Tired of making classes Parcelable, or reluctant to make them Serializable? Good news — there is a way (among many other ways) to transfer objects between two Activities, and it’s pretty damn simple (well, of sorts!)

This article assumes you to have implemented RxAndroid in your project. If you are new to ReactiveX for Android, here is an article that will help you to understand it better and help you set you up!

Note: All code snippets are in Kotlin language

Creating a communication medium

In order to communicate between two Activities, we first create a Bus class with a static BehaviorSubject object that can be accessed from anywhere.

class AndroidBus {
    companion object {
        val behaviorSubject = BehaviorSubject.create<Any>()
    }
}

Sending data from the source activity

From the source activity, you can get the BehaviorSubject object and push your data model into the bus as follows:

val myAwesomeDataModel = AwesomeDataModel()
AndroidBus.behaviorSubject.onNext(myAwesomeDataModel)

Receiving data at the destination activity

In the destination activity, simply subscribe to the BehaviorSubject and retrieve the object. Just to be safe, make sure the object is of the same type that you’re expecting.

var myAwesomeDataModel: AwesomeDataModel? = null

AndroidBus.behaviorSubject.subscribe {
    if (it is AwesomeDataModel) {
        myAwesomeDataModel = it
    }
}

if (myAwesomeDataModel != null) {
    // do stuff with your data model

And that’s all! No Parcelable implementations, no making classes Serializable and losing performance, no Intents, no bundle keys, nothing! Isn’t RxAndroid wonderful?

What about sending multiple objects?

You can always add multiple objects into a HashMap, pass it using the above method and use the keys of individual objects to retrieve them back.

Building Heatmaps using Google Maps for Android

Rishabh Tatiraju — Tue, 05 May 2020 14:22:13 +0000

Heat maps are a popular way to represent data where each entity is associated with some intensity or magnitude. This article serves as a guide to making heat maps for spatial data using Google Maps for Android.

Note: This blog expects you to know how to setup Google Maps in Android. If you are not aware of the same, check out the official guide by Google. This article uses Kotlin language for all Android code.

Source code of this project is available on my GitHub.

Basics of heatmaps

Heat maps are way of representing data having some magnitude using colours, and are quite popular in showing spatial data.

A common example of heat maps in real life is temperature charts.

Understanding the data structure

In order to show as a heat map, data is stored as a collection of objects having a latitude, longitude and intensity value. The easiest way to do this is to store them as a JSON array of objects each having latitude, longitude and intensity fields. An example is given below.

[
    {
        "intensity": 213.0,
        "lat": 14.68365,
        "lon": 77.58146
    }, 
    {
        "intensity": 275.0,
        "lat": 13.20588,
        "lon": 79.08805
    }, 
    {
        "intensity": 477.0,
        "lat": 16.96423,
        "lon": 82.23792
    }
]

Building heatmaps using Google Maps

For the sake this article, we will be showing a heat map of district-wise population density of India, represented as the number of people per square kilometre. I have already compiled the data as a JSON file, which we will be using later on to load our heatmap data. You can get a copy of the JSON file here.

While the basic Google Maps SDK does not contain any heat map utilities, Google has provided an extension library, called the Google Maps Utility Library, which adds complex features to your existing Google Maps setup.

Add dependencies

Add the following gradle dependencies in your app module build.gradle. You might already have the Google Maps dependency added while you were setting up Google Maps in your project.

implementation 'com.google.maps.android:android-maps-utils:1.0.2'
implementation 'com.google.android.gms:play-services-maps:17.0.0'

Load heatmap data from assets

In real life projects, spatial data is usually fetched from the server in real time. However, to reduce complexity for the sake of this example, we’ll be loading the data from a local JSON file.

In case you missed it, you can download the JSON file here

First, let’s set up our assets folder. Switch to Project view and in the app > src > main directory create a new directory called assets. Paste the downloaded JSON file in this assets folder.

With the file in place, we’ll now read the file contents in our Android code. Our JSON file contains an array of objects, each having the following structure:

{
    "density": 123.4,
    "lat": 18.5544,
    "lon": 76.3324
}

In MainActivity, we’ll create a function called getJsonDataFromAsset which will read the file and retrieve its contents as a JSON array.

private fun getJsonDataFromAsset(fileName: String): JSONArray? {
        try {
            val jsonString = assets.open(fileName).bufferedReader().use { it.readText() }
            return JSONArray(jsonString)
        } catch (e: Exception) {
            e.printStackTrace()
            return null
        }
}

Displaying the heatmap

So far, we have our data as a JSON array. Great! But how do we use it? This is where Google Maps Utility library comes into the picture. The library has components that enable us to easily make heatmaps. One of them is the WeightedLatLng class, which can store latitude, longitude and the weight (intensity).

The Google Maps heat map overlay will expect an ArrayList of WeightedLatLng objects, so let’s generate one from our JSON data. We’ll write a function called getHeatMapData which will parse our JSON array and return us an ArrayList of WeightedLatLng objects.

private fun generateHeatMapData(): ArrayList<WeightedLatLng> {
        val data = ArrayList<WeightedLatLng>()

        // call our function which gets json data from our asset file
        val jsonData = getJsonDataFromAsset("district_data.json")

        // ensure null safety with let call
        jsonData?.let {
            // loop over each json object
            for (i in 0 until it.length()) {
                // parse each json object
                val entry = it.getJSONObject(i)
                val lat = entry.getDouble("lat")
                val lon = entry.getDouble("lon")
                val density = entry.getDouble("density")

                // optional: remove edge cases like 0 population density values
                if (density != 0.0) {
                    val weightedLatLng = WeightedLatLng(LatLng(lat, lon), density)
                    data.add(weightedLatLng)
                }
            }
        }

        return data
}

Now, in the overridden onMapReady function, we can write our code to generate our heat map. Let’s first generate our data by calling the generateHeatMapData function as follows.

val data = generateHeatMapData()

After that, we’ll be creating a HeatMapTileProvider object using its builder.

val heatMapProvider = HeatmapTileProvider.Builder()
            .weightedData(data) // load our weighted data 
            .radius(50) // optional, in pixels, can be anything between 20 and 50
            .build()

Finally, we’ll center Google Map over India (i.e. wherever our data is) so that we are able to see the heatmap.

val indiaLatLng = LatLng(20.5937, 78.9629)
googleMap?.moveCamera(CameraUpdateFactory.newLatLngZoom(indiaLatLng, 5f))

That’s it! Here’s the entirety of onMapReady function for your reference.

override fun onMapReady(googleMap: GoogleMap?) {
    val data = generateHeatMapData()

    val heatMapProvider = HeatmapTileProvider.Builder()
        .weightedData(data) // load our weighted data 
        .radius(50) // optional, in pixels, can be anything between 20 and 50
        .build()

    googleMap?.addTileOverlay(TileOverlayOptions().tileProvider(heatMapProvider))

    val indiaLatLng = LatLng(20.5937, 78.9629)
    googleMap?.moveCamera(CameraUpdateFactory.newLatLngZoom(indiaLatLng, 5f))
}

Let’s run the project and see how our map looks.

That worked! But hey, why is the map so empty? Weren’t you expecting the map to light up? After all, India's population density is one of the highest in the world!

Well, here’s what happened. In places like Delhi, the population density goes to a whopping 36000 per square kilometre. Now consider a city like Bangalore which has a density of 4300 according to our data – although 4300 is a large value, it is nothing as compared to the density in Delhi. In other words, the relatively large value is shadowed by a gigantic other, and is hence considered a small value by the heatmap utility when plotting on the map.

To overcome this, we have the ability to set a maximum intensity for the heat map when creating the heat map tile provider.

val heatMapProvider = HeatmapTileProvider.Builder()
    .weightedData(data) // load our weighted data
    .radius(50) // optional, in pixels, can be anything between 20 and 50
    .maxIntensity(1000.0) // set the maximum intensity
    .build()

Here, setting the maximum intensity overrides the global maximum, i.e. the highest intensity value in our data set, and sets it to whatever value we pass. Let’s try running our project again.

This seems perfect, doesn’t it? Congratulations, you just built your first heat map on Android!

Customizing the Heatmap

You can style your heat map according to your requirements.

You can change the display colors by passing a Gradient to the tile provider builder.

// Create the gradient with whatever start and end colors you wish to use
int[] colors = {Color.GREEN, Color.parseColor("#FF0000")};
float[] startPoints = {0.2f, 1f};
Gradient gradient = new Gradient(colors, startPoints);

val heatMapProvider = HeatmapTileProvider.Builder()
    .weightedData(data)
    .radius(50)
    .maxIntensity(1000.0)
    .gradient(gradient) // set gradient
    .build()

You can also change the opacity of your heat map layer by passing in a value between 0 and 1 to the tile provider builder. This can be particularly helpful if you wish the map in the background to be legible in dark colors.

val heatMapProvider = HeatmapTileProvider.Builder()
    .weightedData(data)
    .opacity(0.5) // set opacity, default is 0.7
    .build()

Final Thoughts

Heat maps can be particularly useful if you wish to represent spatial data having some intensity associated with it. Hopefully this article proves to be the stepping stone for you if you are looking for a career in cartography in mobile applications. As always, I’ll be glad to answer all your questions in the comments section. Keep coding!