플라스크 대시보드 - 그라데이션 가능한 디자인

안녕하세요 코더 여러분,

이 문서는 오픈 소스 스타터Flask Gradient Able 위에 간단한 작업을 빌드하고 코딩하여 매우 인기 있는 Python 프레임워크인 Flask를 시작하는 초보자를 돕는 것을 목표로 합니다. 프로젝트는 Github에서 직접 다운로드하여 상용 프로젝트(MIT 라이선스)에 사용할 수 있습니다.

✨Flask Gradient Able - 상품 페이지

✨ Flask Gradient Able - 라이브 데모

초보자를 위해 Flask은 Python으로 작성된 경량 웹 애플리케이션 프레임워크입니다. 때때로 마이크로프레임워크로 분류되는 Flask는 API, 간단한 웹 앱 또는 복잡한 전자 상거래 플랫폼이 되도록 쉽게 확장할 수 있는 경량 코드베이스를 제공합니다.





멋진 Ui 키트 위에 코딩되고 MIT 라이선스로 출시되는 이 Flask 스타터는 무제한 취미 및 상업용 제품에 사용할 수 있습니다. 이 외에도 코드 기반은 깨끗하고 주요 대상인 초보자가 소화하기 쉽습니다. 다른 특징들:

UI 키트: Gradient Able Dashboard(무료 버전)

청사진으로 코딩된 모듈식 코드베이스

마이그레이션을 위한 SQLite/PostgreSQL 데이터베이스, ORM, Alembic

세션 기반 인증, 기본 양식 유효성 검사

배포 스크립트: Docker, Gunicorn/Nginx

이 간단한 Flask 스타터가 마음에 들면 터미널과 몇 가지 기본 명령을 사용하여 빌드할 수 있습니다. 이 앱은 Python3로 코딩되어 있으며 성공적으로 빌드하려면 워크스테이션에 Python3 인터프리터가 제대로 설치되어 있어야 합니다. 확실하지 않은 경우 원하는 터미널을 열고 다음을 입력하십시오.

$ python -V
Python 3.7.2 <--- All good

python version 검사에서 3.x 버전이 반환되면 문제가 없습니다.

Let's clone the source code

언급한 바와 같이 앱은 Github에 게시되며 clone 명령 도구를 사용하여 코드를 다운로드하거나 ZIP 아카이브를 다운로드할 수 있습니다.

$ # Get the code
$ git clone https://github.com/app-generator/flask-dashboard-gradientable.git
$ cd flask-dashboard-gradientable

소스를 복제/복사한 후 requirements.txt 파일에 나열된 앱 종속성을 설치해야 합니다.

$ # Install modules - SQLite Database
$ pip3 install -r requirements.txt

다음 단계는 GIT 변수의 값을 설정하는 것이며 모든 설정이 완료되었습니다.

$ # 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"
$
$ # 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/

모든 것이 순조롭게 진행되면 브라우저에서 대시보드를 방문하여 로그인 화면이 표시되어야 합니다.



기본적으로 이 Flask 스타터는 기본 사용자로 프로비저닝되지 않으며 인증을 통과하고 비공개 페이지에 액세스하려면 먼저 등록 페이지를 사용하여 새 사용자를 생성해야 합니다.

로그인 후 대시보드 페이지에 액세스할 수 있어야 합니다.

Main Dashboard Page

Google Maps page

UI Tables

코드 기반 구조

이 프로젝트는 청사진, 앱 팩토리 패턴, 이중 구성 프로필(개발 및 프로덕션) 및 다음과 같은 직관적인 구조를 사용하여 코딩됩니다.

< 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
   |
   |-- ************************************************************************

앱 시작 방법

FLASK_APP가 run.py 파일을 로드합니다

.

지정된 프로필을 사용하여 앱 초기화: 디버그 또는 프로덕션

env.DEBUG가 True로 설정된 경우 SQLite 저장소가 사용됨

env.DEBUG가 False로 설정된 경우 지정된 DB 드라이버가 사용됨(MySql, PostgreSQL)

app/init.py에 정의된 앱 팩터리 메서드.env를 호출합니다

.

게스트 사용자를 로그인 페이지로 리디렉션

인증된 사용자를 위해 HOME Blueprint에서 제공하는 페이지 잠금 해제

앱 배포

스타터에는 Docker에 대한 기본 배치 개선 사항이 장착되어 있습니다. Docker화된 컨테이너에서 앱을 시작하려면 터미널에 한 줄을 입력해야 합니다(Linux 배포판에 제공되는 명령).

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

모든 것이 순조롭게 진행되면 create_app를 방문하여 브라우저에서 실행 중인 앱을 확인해야 합니다.

Thanks for reading! Let me know your thoughts in the comments

자원

Flask - 공식 사이트

Gradient Able Dashboard - CodedThemes 에이전시에서 제공한 디자인

Flask Dashboards - AppSeed에서 제공하는 인덱스