Page d'accueil>Code source PHP>Autres catégories
Télécharger

Kit d'administration du tableau de bord Flask

Tableau de bord Flask open source généré par AppSeed sur un design moderne. AdminKit est un package professionnel comprenant des centaines de composants d'interface utilisateur, de formulaires, de tableaux, de graphiques, de pages et d'icônes - Construits sur Bootstrap 5 .

  • Flask Dashboard AdminKit - Démo - Déploiement LIVE
  • Tutoriel Flask - Démarrer avec Flask

Caractéristiques

  • SGBD : SQLite, PostgreSQL (production)
  • Outils de base de données : SQLAlchemy ORM, Alembic (migrations de schémas)
  • Conception modulaire avec Blueprints , base de code simple
  • Authentification basée sur la session (via flask_login ), validation des formulaires
  • Scripts de déploiement : Docker, Gunicorn / Nginx, Heroku
  • Prise en charge via Github et Discord.


Comment l'utiliser 

$ # Get the code
$ git clone https://github.com/app-generator/flask-adminkit.git
$ cd flask-adminkit
$
$ # Virtualenv modules installation (Unix based systems)
$ virtualenv env
$ source env/bin/activate
$
$ # Virtualenv modules installation (Windows based systems)
$ # virtualenv env
$ # .envScriptsactivate
$
$ # Install modules - SQLite Database
$ pip3 install -r requirements.txt
$
$ # OR with PostgreSQL connector
$ # pip install -r requirements-pgsql.txt
$
$ # Set the FLASK_APP environment variable
$ (Unix/Mac) export FLASK_APP=run.py
$ (Windows) set FLASK_APP=run.py
$ (Powershell) $env :FLASK_APP = " .run.py "
$
$ # Set up the DEBUG environment
$ # (Unix/Mac) export FLASK_ENV=development
$ # (Windows) set FLASK_ENV=development
$ # (Powershell) $env:FLASK_ENV = "development"
$
$ # Start the application (development mode)
$ # --host=0.0.0.0 - expose the app on all network interfaces (default 127.0.0.1)
$ # --port=5000    - specify the app port (default 5000)  
$ flask run --host=0.0.0.0 --port=5000
$
$ # Access the dashboard in browser: http://127.0.0.1:5000/

Remarque : Pour utiliser l'application, veuillez accéder à la page d'inscription et créer un nouvel utilisateur. Après authentification, l'application débloquera les pages privées.


Structure de base de code

Le projet est codé à l'aide de plans, d'un modèle d'usine d'applications, d'un double profil de configuration (développement et production) et d'une structure intuitive présentée ci-dessous :

Version simplifiée 

 < PROJECT ROOT >
   |
   | -- app/                      # Implements app logic
   |    | -- base/                # Base Blueprint - handles the authentication
   |    | -- home/                # Home Blueprint - serve UI Kit pages
   |    |
   |   __init__.py               # Initialize the app
   |
   | -- requirements.txt          # Development modules - SQLite storage
   | -- requirements-mysql.txt    # Production modules  - Mysql DMBS
   | -- requirements-pqsql.txt    # Production modules  - PostgreSql DMBS
   |
   | -- .env                      # Inject Configuration via Environment
   | -- config.py                 # Set up the app
   | -- run.py                    # Start the app - WSGI gateway
   |
   | -- ************************************************************************

Le flux d'amorçage

  • run.py charge le fichier .env
  • Initialisez l'application à l'aide du profil spécifié : Debug ou Production
    • Si env.DEBUG est défini sur True, le stockage SQLite est utilisé
    • Si env.DEBUG est défini sur False, le pilote de base de données spécifié est utilisé (MySql, PostgreSQL)
  • Appelez la méthode d'usine d'applications create_app définie dans app/ init .py
  • Rediriger les utilisateurs invités vers la page de connexion
  • Déverrouillez les pages servies par le plan d'accueil pour les utilisateurs authentifiés

Plan d'application/de base

Le plan de base gère l'authentification (itinéraires et formulaires) et la gestion des actifs. La structure est présentée ci-dessous : 

 < PROJECT ROOT >
   |
   | -- app/
   |    | -- home/                                # Home Blueprint - serve app pages (private area)
   |    | -- base/                                # Base Blueprint - handles the authentication
   |         | -- static/
   |         |    | -- < css, JS, images >          # CSS files, Javascripts files
   |         |
   |         | -- templates/                      # Templates used to render pages
   |              |
   |              | -- includes/                  #
   |              |    | -- navigation.html       # Top menu component
   |              |    | -- sidebar.html          # Sidebar component
   |              |    | -- footer.html           # App Footer
   |              |    | -- scripts.html          # Scripts common to all pages
   |              |
   |              | -- layouts/                   # Master pages
   |              |    | -- base-fullscreen.html  # Used by Authentication pages
   |              |    | -- base.html             # Used by common pages
   |              |
   |              | -- accounts/                  # Authentication pages
   |                   | -- login.html            # Login page
   |                   | -- register.html         # Registration page
   |
   | -- requirements.txt                          # Development modules - SQLite storage
   | -- requirements-mysql.txt                    # Production modules  - Mysql DMBS
   | -- requirements-pqsql.txt                    # Production modules  - PostgreSql DMBS
   |
   | -- .env                                      # Inject Configuration via Environment
   | -- config.py                                 # Set up the app
   | -- run.py                                    # Start the app - WSGI gateway
   |
   | -- ************************************************************************

Plan d'application/accueil

Le plan Accueil gère les pages du kit d’interface utilisateur pour les utilisateurs authentifiés. Il s'agit de la zone privée de l'application - la structure est présentée ci-dessous : 

 < PROJECT ROOT >
   |
   | -- app/
   |    | -- base/                     # Base Blueprint - handles the authentication
   |    | -- home/                     # Home Blueprint - serve app pages (private area)
   |         |
   |         | -- templates/           # UI Kit Pages
   |              |
   |              | -- index.html      # Default page
   |              | -- page-404.html   # Error 404 - mandatory page
   |              | -- page-500.html   # Error 500 - mandatory page
   |              | -- page-403.html   # Error 403 - mandatory page
   |              | -- * .html          # All other HTML pages
   |
   | -- requirements.txt               # Development modules - SQLite storage
   | -- requirements-mysql.txt         # Production modules  - Mysql DMBS
   | -- requirements-pqsql.txt         # Production modules  - PostgreSql DMBS
   |
   | -- .env                           # Inject Configuration via Environment
   | -- config.py                      # Set up the app
   | -- run.py                         # Start the app - WSGI gateway
   |
   | -- ************************************************************************

Déploiement

L'application est fournie avec une configuration de base à exécuter dans Docker, Heroku, Gunicorn et Waitress.


Exécution Docker

L'application peut être facilement exécutée dans un conteneur Docker. Les étapes :

Obtenez le code 

$ git clone https://github.com/app-generator/flask-adminkit.git
$ cd flask-adminkit

Démarrez l'application dans Docker 

$ sudo docker-compose pull && sudo docker-compose build && sudo docker-compose up -d

Visitez http://localhost:5005 dans votre navigateur. L'application devrait être opérationnelle.


Héroku

Étapes de déploiement sur Heroku

  • Créez un compte GRATUIT sur la plateforme Heroku
  • Installez la CLI Heroku qui correspond à votre système d'exploitation : Mac, Unix ou Windows
  • Ouvrez une fenêtre de terminal et authentifiez-vous via la commande heroku login
  • Clonez les sources et poussez le projet pour un déploiement LIVE 
$ # Clone the source code:
$ git clone https://github.com/app-generator/flask-adminkit.git
$ cd flask-adminkit
$
$ # Check Heroku CLI is installed
$ heroku -v
heroku/7.25.0 win32-x64 node-v12.13.0 # <-- All good
$
$ # Check Heroku CLI is installed
$ heroku login
$ # this commaond will open a browser window - click the login button (in browser)
$
$ # Create the Heroku project
$ heroku create
$
$ # Trigger the LIVE deploy
$ git push heroku master
$
$ # Open the LIVE app in browser
$ heroku open

Licorne

Gunicorn 'Green Unicorn' est un serveur HTTP Python WSGI pour UNIX.

Installer en utilisant pip 

$ pip install gunicorn

Démarrez l'application en utilisant le binaire gunicorn 

$ gunicorn --bind 0.0.0.0:8001 run:app
Serving on http://localhost:8001

Visitez http://localhost:8001 dans votre navigateur. L'application devrait être opérationnelle.


Serveuse

Waitress (équivalent Gunicorn pour Windows) est censé être un serveur WSGI purement Python de qualité production avec des performances très acceptables. Il n'a aucune dépendance à l'exception de celles qui résident dans la bibliothèque standard Python.

Installer en utilisant pip 

$ pip install waitress

Démarrez l'application en utilisant waitress-serve 

$ waitress-serve --port=8001 run:app
Serving on http://localhost:8001

Visitez http://localhost:8001 dans votre navigateur. L'application devrait être opérationnelle.


Crédits et liens

  • Flask Framework - Le site officiel
  • Code passe-partout - Index fourni par AppSeed
  • Code Boilerplate - Index publié sur Github

AdminKit du tableau de bord Flask - Fourni par AppSeed App Generator .

Développer
Informations supplémentaires
Applications connexes
Recommandé pour vous
Actualités connexes Tout