1. Giới thiệu.
Trong 7 bài vừa qua mình đã giới thiệu cho các bạn cách để viết API và đây là phần cuối cùng trong chuõi bài này. Mình sẽ giới thiệu cho các bạn một ứng dụng web được phát triển trên nền tảng Flask để hỗ trợ cho các bạn triển khai các ứng dụng API đưa lên web, ví dụ của mình là Datta Able Flask.
Vậy Datta Able Flask chính là một ứng dụng web được xây dựng trên nền tảng Flask, một framework phát triển ứng dụng web Python nhẹ và linh hoạt. Nó là một bộ giao diện người dùng (UI) đẹp và đầy đủ tính năng, được thiết kế để giúp bạn dễ dàng phát triển các ứng dụng web chuyên nghiệp mà không cần phải xây dựng giao diện từ đầu. Datta Able Flask là một phiên bản Flask của Datta Able, một sản phẩm phổ biến trong cộng đồng phát triển web.
Dưới đây là một số điểm nổi bật về Datta Able Flask:
- Giao diện người dùng đẹp và hiện đại: Datta Able Flask cung cấp một giao diện người dùng hiện đại, sử dụng các thành phần UI chất lượng cao như biểu đồ, bảng dữ liệu, biểu mẫu và nhiều chức năng khác để giúp bạn xây dựng các ứng dụng web có giao diện thân thiện với người dùng.
- Biểu đồ và chức năng tương tác: Datta Able Flask có tích hợp sẵn các biểu đồ và chức năng tương tác, cho phép bạn hiển thị và quản lý dữ liệu dưới dạng biểu đồ cũng như thực hiện các tác vụ tương tác như lọc, sắp xếp và tìm kiếm.
- Quản lý người dùng và phiên: Ứng dụng này cung cấp chức năng quản lý người dùng, bao gồm đăng nhập, đăng ký và quản lý tài khoản người dùng. Bạn có thể dễ dàng tích hợp xác thực và ủy quyền người dùng vào ứng dụng của mình.
- Chức năng tùy chỉnh: Datta Able Flask linh hoạt và cho phép bạn tùy chỉnh giao diện và chức năng theo nhu cầu cụ thể của bạn. Bạn có thể thêm, sửa đổi hoặc xóa các thành phần theo ý muốn.
- Sử dụng Flask và Jinja2: Datta Able Flask sử dụng Flask cho phát triển web và Jinja2 cho việc quản lý mẫu và hiển thị dữ liệu động.
- Open-Source và cộng đồng phát triển: Datta Able Flask là một dự án mã nguồn mở, cho phép bạn sử dụng nó miễn phí và cộng đồng phát triển đang liên tục cập nhật và hỗ trợ.
Để bắt đầu sử dụng Datta Able Flask, bạn có thể tìm kiếm tài liệu và ví dụ trực tuyến để hiểu cách cài đặt, tùy chỉnh và triển khai dự án này cho nhu cầu cụ thể của bạn.
2. Cài đặt
Có 2 cách để bạn cài đặt được Datta Able Flask này.
2.1. Dùng Docker.
Bắt đầu ứng dụng trong Docker:
Bước 1 – Tải mã nguồn về:
- Sử dụng lệnh sau để tải mã nguồn ứng dụng từ kho lưu trữ GitHub về máy tính của bạn:
Bạn vào https://appseed.us/product/datta-able/flask/ để có thể demo nó trước khi tải về.
git clone https://github.com/app-generator/flask-datta-able.gitSau đó, sử dụng lệnh cd để di chuyển vào thư mục vừa tải về:
cd flask-datta-ableBước 2 – Khởi động ứng dụng trong Docker:
- Sử dụng lệnh sau để khởi động ứng dụng bằng Docker:
docker-compose up --build- Sau khi chạy lệnh này, ứng dụng sẽ được triển khai và chạy trong môi trường Docker.
- Để truy cập ứng dụng, mở trình duyệt web và nhập địa chỉ sau vào thanh địa chỉ:
http://localhost:5085- Ứng dụng của bạn sẽ hiện ra và có thể sử dụng.
Tạo tập tin .env mới bằng file env.sample:
- Để tạo một tập tin
.envmới, bạn có thể sao chép nội dung từ fileenv.sample. - Các biến môi trường trong tập tin
.envcó ý nghĩa như sau:DEBUG: Nếu đặt thànhTrue, ứng dụng sẽ chạy trong chế độ phát triển. Đối với môi trường sản xuất, bạn nên đặt giá trị làFalse.ASSETS_ROOT: Biến này được sử dụng để quản lý tài sản (assets) trong ứng dụng, ví dụ: hình ảnh, file CSS, JavaScript. Giá trị mặc định là/static/assets.OAuth qua Github: Đây là cấu hình cho tính năng xác thực OAuth sử dụng Github. Bạn cần cung cấpGITHUB_IDvàGITHUB_SECRETđể kết nối ứng dụng với tài khoản Github của bạn.
Hy vọng rằng thông tin này giúp bạn hiểu rõ hơn về cách bắt đầu và cấu hình ứng dụng sử dụng Flask Datta Able trong môi trường Docker.
2.2. Xây dựng ứng dụng bằng cách cài đặt thủ công.
Bước 1 – Tải mã nguồn về:
Vào server và tải mã nguồn về server và di chuyển vào thư mục vừa tải về.
git clone https://github.com/app-generator/flask-datta-able.git
cd flask-datta-able/Bước 2 – Cài đặt các module bằng VENV (cho Unix và MacOS):
Bắt đầu bằng việc tạo một môi trường ảo Python bằng lệnh:
python3 -m venv .venvKích hoạt môi trường ảo vừa tạo bằng lệnh:
source .venv/bin/activateCài đặt các module cần thiết bằng lệnh:
pip install -r requirements.txtHoặc cài đặt cho Windows:
Trong môi trường Windows, thay thế các lệnh trên bằng các lệnh sau:
$ virtualenv env
$ .\env\Scripts\activate
$ pip install -r requirements.txt
Bước 3 – Cấu hình môi trường Flask:
- Đặt biến môi trường
FLASK_APPvàFLASK_ENVbằng cách sử dụng lệnh sau:- Trong CMD:
$ set FLASK_APP=run.py
$ set FLASK_ENV=developmentTrong PowerShell:
$env:FLASK_APP = ".\run.py"
$env:FLASK_ENV = "development"Bước 4 – Khởi động ứng dụng:
- Sử dụng lệnh sau để khởi động ứng dụng Flask:
$ flask runHoặc để chạy ứng dụng với HTTPS (bảo mật), sử dụng lệnh sau:
$ flask run --cert=adhocSau bước này, ứng dụng của bạn sẽ chạy tại địa chỉ: http://127.0.0.1:5000/.
Hoặc bạn có thể chỉnh sửa và chạy trực tiếp từ file run.py.
Vào file run.py sửa đổi nội dung từ.
if __name__ == "__main__":
app.run()Thành nội dung dưới.
if __name__ == "__main__":
app.run(debug=True, host='0.0.0.0', port=5000)Giờ tại môi trường ảo hãy run server.
(.venv) root@flask-13-200:/home/flask-datta-able# python3 run.py
* Serving Flask app 'apps' (lazy loading)
* Environment: development
* Debug mode: on
* Running on all addresses.
WARNING: This is a development server. Do not use it in a production deployment.
* Running on http://192.168.13.200:5000/ (Press CTRL+C to quit)
* Restarting with stat
[2023-09-11 09:41:09,645] INFO in run: DEBUG = True
[2023-09-11 09:41:09,645] INFO in run: Page Compression = FALSE
[2023-09-11 09:41:09,645] INFO in run: DBMS = sqlite:////home/flask-datta-able/apps/db.sqlite3
[2023-09-11 09:41:09,645] INFO in run: ASSETS_ROOT = /static/assets
* Debugger is active!
* Debugger PIN: 361-696-745Dùng trình duyệt và thưởng thức thôi.
Bước 5 – Tạo người dùng:
Mặc định, ứng dụng sẽ chuyển hướng người dùng khách (không đăng nhập) để xác thực. Để truy cập các trang riêng tư, bạn cần thực hiện các bước sau:
Khởi động ứng dụng và truy cập trang đăng ký để tạo một người dùng mới tại địa chỉ:
http://<server_ip>:5000/registerSau khi tạo tài khoản, truy cập trang đăng nhập để xác thực tài khoản tại địa chỉ:
http://<server_ip>:5000/loginKết quả.
3. Cấu trúc mã nguồn dự án.
Cấu trúc này giúp dự án dễ quản lý và phát triển, với mỗi ứng dụng con có cấu trúc riêng biệt, và các file mẫu và tĩnh được sắp xếp cẩn thận để làm cho việc phát triển giao diện người dùng trở nên hiệu quả.
< PROJECT ROOT >
|
|-- apps/
| |
| |-- home/ # A simple app that serve HTML files
| | |-- routes.py # Define app routes
| |
| |-- authentication/ # Handles auth routes (login and register)
| | |-- routes.py # Define authentication routes
| | |-- models.py # Defines models
| | |-- forms.py # Define auth forms (login and register)
| |
| |-- static/
| | |-- <css, JS, images> # CSS files, Javascripts files
| |
| |-- templates/ # Templates used to render pages
| | |-- includes/ # HTML chunks and components
| | | |-- 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 # Register page
| | |
| | |-- home/ # UI Kit Pages
| | |-- index.html # Index page
| | |-- 404-page.html # 404 page
| | |-- *.html # All other pages
| |
| config.py # Set up the app
| __init__.py # Initialize the app
|
|-- requirements.txt # App Dependencies
|
|-- .env # Inject Configuration via Environment
|-- run.py # Start the app - WSGI gateway
|
|-- ************************************************************************Thư mục gốc của dự án (PROJECT ROOT): Thư mục chứa toàn bộ dự án.
Thư mục ‘apps/’:
- Thư mục này chứa các ứng dụng con (blueprints) trong dự án.
- Mỗi ứng dụng con (ví dụ: ‘home’ và ‘authentication’) có cấu trúc tương tự nhau.
Thư mục ‘home/’: Thư mục này biểu diễn một ứng dụng con đơn giản chứa các file HTML.
Thư mục ‘authentication/’:
- Thư mục này xử lý các tuyến đường liên quan đến xác thực (đăng nhập và đăng ký).
- Bao gồm các file ‘routes.py’ (định nghĩa tuyến đường), ‘models.py’ (định nghĩa mô hình dữ liệu), và ‘forms.py’ (định nghĩa các biểu mẫu xác thực).
Thư mục ‘static/’: Chứa file CSS, file JavaScript và hình ảnh cho giao diện người dùng.
Thư mục ‘templates/’:
- Chứa các mẫu HTML được sử dụng để hiển thị trang web.
- Bao gồm ‘includes/’ (các mảnh HTML và thành phần), ‘layouts/’ (mẫu chung), và các thư mục con tương ứng với từng ứng dụng.
File ‘config.py’: Được sử dụng để cấu hình ứng dụng.
File ‘init.py’: File này khởi tạo ứng dụng.
File ‘requirements.txt’: Liệt kê các phụ thuộc (dependencies) cần thiết cho ứng dụng.
File ‘.env’: Chứa cài đặt cấu hình thông qua biến môi trường.
File ‘run.py’: Sử dụng để khởi động ứng dụng, là cổng WSGI (Web Server Gateway Interface).
4. Phiên bản PRO (chuyên nghiệp).
- Phiên bản PRO là một phiên bản nâng cấp của sản phẩm gốc (Flask Datta Able) và có nhiều tính năng mạnh mẽ hơn, trang và thành phần hơn.
Được thiết kế cho những người thích các yếu tố táo bạo và trang web đẹp, Datta Able là mẫu quản trị Bootstrap 4 đẹp và thời trang nhất so với tất cả các mẫu quản trị Bootstrap khác. Nó đi kèm với nhiều trang và thành phần có tính năng cao và mã nguồn được tập trung hoàn toàn vào việc phát triển ứng dụng.
Tính năng cụ thể của Flask Datta PRO bao gồm:
- Giao diện người dùng cải tiến: Thêm nhiều trang và thành phần mới giúp ứng dụng trở nên phong cách hơn và đẹp mắt hơn.
- Xác thực được cải thiện: Cung cấp tính năng kiểm tra độ mạnh của mật khẩu và khả năng treo người dùng tự động sau nhiều lần đăng nhập không thành công.
- Hồ sơ người dùng mở rộng: Cải thiện trang hồ sơ người dùng để cung cấp nhiều thông tin hơn về người dùng.
- Quản lý người dùng: Tích hợp chức năng quản lý người dùng, nhưng có thể bị giới hạn chỉ dành cho các quản trị viên.
Phiên bản PRO này mang lại nhiều cải tiến và tính năng bổ sung so với phiên bản gốc, làm cho việc phát triển ứng dụng và quản trị trang web trở nên dễ dàng hơn và hiệu quả hơn.
