Python Admin Dashboards - Generated with automation tools

Hello Coders,

My name is Adrian (aka Sm0ke), and this article tries to summarize the idea behind the AppSeed service, by presenting some real-life samples generated by the platform.

In one sentence, AppSeed generate usable web apps in different programming languages (Python, Javascript, Php) and design patterns (MVC, Two-Tier etc..) using flat HTML as input.


How it Works

Phase #1 - As mentioned, we are always starting from the flat HTML files, that requires a processing in order to become usable: components extraction, master pages detection, hard-coded texts removal, maybe some assets tuning (CSS compression, JS minification, etc). To solve this phase, we've developed an HTML parser in Python BS4 (not open-source) to speed up and automate the manual work usually involved. The tool help us with a small list of tasks:

  • Load the whole HTML theme and normalize the assets to be loaded from standard directories: assets / js, img, css
  • Update all HTML files to use the new paths
  • Detect master pages by comparing the DOM tree between pages
  • extract the menus, and components
  • Translate the HTML to various template engines: Jinja2, Django native, PUG, Blade and Php native (more will come)

Phase #2 - Once the HTML is processed, the automated workflow injects the layouts and components into simple boilerplate code enhanced with basic features and modules: authentication, database, ORM, deployment scripts.

Let's start with a real sample: Atlantis Dark Dashboard, generated in two Python flavors, using flat HTML files as input :

Both apps are using a common set of features, of course coded in a Framework specific way: session-based authentication, SQLite database, ORM, modular design (Flask version uses blueprints) and deployment scripts (Gunicorn, Docker). Now let's compare the login screen:

Login Page: Left Flask | Right Django 

The UI elements are identical, as expected, now let's take a look at the page code, rendered by each framework:

Login Page Source Code: Left Flask | Right Django 

In terms of source code structure, the layouts is are identical: master page default.html is extended by the login page with specific content: page title, page content (the login form).  

The framework specific stuff:

  • The CSRF token syntax, used to secure the forms submission
  • Fields declaration
  • Links syntax
Login Page Forms: Top Flask | Bottom Django 

The similarities between Flask and Django are obvious and help us a lot in unifying things in the automation workflow, and is not about only Flask vs. Django. We can spot the same thing if we compare PUG with Blade, or PUG with Jinja2. Same patterns exists across many template engines, and this is quite logic because same problems must be solved using a simple and optimal way, and this leads to similar solutions.

Let's move on with our compare and see something on the screen. The little one, goes first: Flask Dashboard Atlantis Dark. The build instructions are copied (and simplified) from the README file:

$ git clone https://github.com/app-generator/flask-dashboard-atlantis-dark.git
$ cd flask-dashboard-atlantis-dark
$
$ # Install requirements
$ pip3 install -r requirements.txt
$
$ # Set the FLASK_APP environment variable
$ (Unix/Mac) export FLASK_APP=run.py
$
$ # Run the application
$ flask run
$
$ # Access the app in browser: http://127.0.0.1:5000/

After create a new user and authenticate, we should see this screen:

Flask Dashboard Atlantis Dark - Main screen

The Django version, Django Atlantis Dark can be built using a similar way, by following the instructions saved in the README file:

$ git clone https://github.com/app-generator/django-dashboard-atlantis-dark.git
$ cd django-dashboard-atlantis-dark
$
$ # Install modules
$ pip3 install -r requirements.txt
$
$ # Set up database and create tables
$ python manage.py makemigrations
$ python manage.py migrate
$
$ # Start the application (development mode)
$ python manage.py runserver
$
$ # Access the app in browser: http://127.0.0.1:8000/

After authentication, we should see the same screen, based on the fact that both apps were generated from the same flat HTML design on top of feature-identical boilerplate code.

Other screens, common to both web apps:

Admin Dashboard - Maps Screen

Django Dashboard Atlantis - Maps Screen.


Admin Dashboard - Widgets

Django Dashboard Atlantis - Widgets Screen.


Admin Dashboard - Charts

Django Dashboard Atlantis - Charts Screen.


In a similar way, in 2019 the platform generate in a automated or semi automated way (some manual work involved) more than 170 web apps, published on Github under permissive licenses (MIT, LGPL):

  • Admin Dashboards  - curated index with web apps coded in various programming languages
  • Flask Apps - usable UI-ready apps, generated with authentication, database, ORM and basic tooling
  • Django Admin Dashboards - similar to the ones presented here
  • JAMstack starters generated on top of popular UI Kits
  • Static Sites - generated in Eleventy (11ty) and Panini SSG

Where to go from here


Thank you!

Show Comments

Get the latest posts delivered right to your inbox.