Flask and Chart.js reports with drilldown

I really enjoy the integration between Flask web application backend, Bootstrap for styling and Chart.js library for data visualisation on the browser “frontend”. However I was missing a way how to drill down through a data point on the chart into a detail report page. So I decided to give back to the community, do some research and wrap up the solution myself.

see the demo web application “animation”:

screens_gif

You can clone the project from here: https://github.com/datahappy1/flask_chartjs_drilldown_example_project

Enjoy!

Czech sentiment analyzer project aka “czester”

Hey! Just finished my latest project, the Czech language sentiment analyzer. The official name of this tool is “CZESTER”. Spend a lot of my time with this project the last couple of months, but I feel it was definitely worth it.

I learned a lot of new facts about multi-threaded web scraping, supervised machine learning, natural language processing, Flask and Chart.js integration which I used for site statistics page and also about deploying Flask machine learning web applications to Pythonanywhere and Heroku. This was probably the coolest project I worked on in a while.

It’s currently deployed to czester.herokuapp.com and I’d love to hear what you think about it. The details describing this project are located here: czester.herokuapp.com/methodology

Flask, Server-sent events, JavaScript example project == “done”

I just finished a super fun example project with a Flask web back-end, HTML5 Server-sent events and a bit of JavaScript.

Check it out here: https://github.com/datahappy1/flask_sse_example_project

So, what’s it all about? Flask, Waitress and Javascript are used for 1-N Server-sent event streams to enable long running jobs state auto-refresh visualized in a HTML table in the browser. You could use this to make the AWS EMR or Batch consoles auto-refresh for instance, but basically any long-running task state can be “auto-refreshed” in this way. 

Here’s a high level diagram of the project architecture:

diagram

And a .gif “screenshot” from the web app running at your localhost:

screens

More details are in the README.MD in the Github repository.

Flask, MVC, Github integration example project finished

I just finished a fun and challenging project in Python. It’s a project based on Flask web microframework allowing the user to work with branches and files of their Github repository. This functionality is accessible via a locally running web application but the same functionality is also covered with rest api endpoints. These api endpoints are also used as endpoints for tests.

purpose of this Flask project is to demonstrate:

  1. how to deliver the same features in both api endpoints and static html forms in one Flask project
  2. how Flask can be used with the MVC design pattern with the controller imported as Flask blueprints
  3. how Flask can deal with Github integration using the Github API v3 (used as the model “persistence” layer in the MVC design pattern)
  4. api endpoint pytest testing using the app factory import pattern
  5. ability of such a web application to gracefully fail on Github integration exceptions

Have a look here: https://github.com/datahappy1/flask_mvc_github_example_project

The basic idea behind this example project is this:

diagram

few screenshots from the app:

Spinning up a Docker container with Flask and Python

Imagine you need to replicate an existing web API returning a JSON ( listing all feeds in some system ) on your local machine for further development purposes and possible extensions. Today I’ll demonstrate how to achieve this using Docker container , Python and Flask. Note that this tutorial requires some previous experience with Python and Docker. Have a look at Flask, it’s a powerful and easy to use Python web framework.

The source web API we’ll be replicating is returning a valid JSON structure listing all the feeds:

[{
  "feed_name": "feed1",
  "feed_type": "feed type 1",
  "filemasks": [
    "filemask11",
    "filemask12"
  ]
},
{
  "feed_name": "feed2",
  "feed_type": "feed type 2",
  "filemasks": [
    "filemask21",
    "filemask22"
  ]
}]

Let’s save this dummy JSON file as feeds.json on our local file system.

Next we’ll setup the environment and start with Docker:

mkdir docker-api

mkdir docker-api/app

mkdir docker-api/feeds

cd docker-api


#1) create Dockerfile as:

FROM python:3.6-stretch

COPY . .

RUN pip install -r requirements.txt

WORKDIR /app/

ENTRYPOINT ["python3"]

CMD ["app.py"]


#2) create requirements.txt as :

Flask==0.10.1


#3) download the feeds.json file from the website
to your local filesystem into docker-api/feeds/

 

Let’s move forward with the Python application, which is reading from the Docker image

the feeds.json file and exposing this JSON to the Flask web API. We won’t be stepping into

any other HTTP methods besides GET, ( the default Flask route method ), we’ll focus just on returning the complete JSON file listing all the feeds.

 

I prepared the Python app in the location docker-api/app/app.py and it is looking like this:


import os
from flask import Flask
from flask import Response

app = Flask(__name__)

@app.route('/api/v1/feeds')
def returner():
    os.chdir("..")
    path = os.path.abspath(os.curdir) + '/feeds/feeds.json'

    with open(path,"r") as f:
        data = f.read()
        resp = Response(response=data, status=200, mimetype="application/json")
        return resp

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0')

The next step is spinning up the docker container ( once we build the image of course )

cd docker-api/

docker build -t feeds . 
docker run -d -p 5000:5000 feeds 
docker container list 
*optionally docker container kill(or stop) container_id in
case you need to "restart" the container
Btw. docker kill vs docker stop is an interesting topic and is discussed for example here
Let’s confirm that your Python project structure is looking like this:
docker

and voila, after running docker run -d -p 5000:5000 feeds , if you lookup the webpage

localhost:5000/api/v1/feeds

in your web browser, you should be getting the response with the desired JSON listing all the feeds.

You might want to check-out also curl.