Tạo Mã Nguồn Ứng Dụng Web Dựa Trên Cơ Sở Dữ Liệu Hiện Có

Trong bối cảnh công nghệ thông tin phát triển nhanh chóng, nhu cầu tạo ứng dụng… 110 trang · Ho Chi Minh City University of Technology and Education · 2021.

• Tác giả: Phan Son
• Người hướng dẫn: MSc. Nguyen Duc Khoan
• Trường học: Ho Chi Minh City University of Technology and Education
• Chuyên ngành: Information Technology
• Đề tài: Source Code Generator For Web Application Based On The Existing Database
• Loại tài liệu: Graduation Thesis
• Năm xuất bản: 2021
• Địa điểm: Ho Chi Minh City

Mục lục chi tiết

• ACKNOWLEDGEMENTS
• TABLE OF CONTENTS
• 1. CHAPTER 1: Review current solutions
• 1.1. Visual Studio’s MVC Web Application Generator
• 1.2. Microsoft SQL Server 2019
• 1.3. Actor of system
• 1.4. Use case diagram
• 1.5. Use case specification
• 1.6. Use case description
• 1.7. Unauthorized user - Use case description
• 1.8. Authorized user - Use case description
• 1.9. Non-functional requirement
• 1.10. Entity Relationship diagram
• 1.11. SYSTEM DESIGN AND IMPLEMENTATION
• 1.12. Source code generator framework
• 1.13. The process to create a website from an existed database
• 1.14. Class diagram for Easy-Web’s System
• 1.15. Class diagram description for class User
• 1.16. Class diagram description for class BaseEntity
• 1.17. Class diagram description for class UserDatabaseInfo
• 1.18. Class diagram description for class WebGeneratedHistory
• 1.19. Class diagram use for Source code generates framework system
• 1.20. Class diagram description for class SystemMasterConfig
• 1.21. Class diagram description for class SystemTableConfig
• 1.22. Class diagram description for class SystemTableColumnConfig
• 1.23. Class diagram description for class SystemTableForeignKeyConfig
• 1.24. Generate a website from an existed database
• 1.25. Back-end source code generator
• 1.26. Front-end source code generator
• 1.27. Website source code generator framework
• 1.28. User interface design
• 1.29. System - UI for the unauthenticated user
• 1.30. SCA_017 Homepage system – Easy-Web Blog
• 1.31. SCA_014 Register database connection string
• 1.32. SCA_13 Configure tables
• 1.33. SCA_015 Configure Columns
• 1.34. SCA_016 Fill out Information & Preview
• 1.35. SCA_005 Login page
• 1.36. SCA_004 Register page
• 1.37. SCA_003 View demo table management screen
• 1.38. SCA_001 Create data demo screen
• 1.39. Database Physical Diagram
• 1.40. Software development environment
• 1.41. Source code management
• 1.42. Easy-Web web user interface
• 1.43. Website source code generates framework
• 1.44. User ’s Generated website
• 1.45. List of stages of testing
• 1.46. List of test types
• 1.47. Items to be tested
• 1.48. Features to be tested
• 1.49. Test case of check login function
• 1.50. Test case register function
• 1.51. Test case register database connection string
• 1.52. Test case config table
• 1.53. Test case config column
• 2. CHAPTER 2: Technologies
• 2.1. Python Flask
• 2.2. RQ Worker
• 2.3. .NET Core
• 2.4. Entity Framework Core 5.0 with:
• 2.4.1. SQL Server Driver (Microsoft.0)
• 2.4.2. MySQL Driver (MySql.0 Preview 4)
• 2.4.3. PostgreSQL Driver (Npgsql 5.7)
• 2.4.4. EF Core Reverse Engineering tool (Scaffold-DbContext Command)
• 2.5. Framework Angular 12 with an additional library:
• 2.5.1. Font Awesome
• 2.5.2. Bootstrap 4
• 2.5.3. Toast
• 2.5.4. Material UI
• 2.6. Cloudinary third party
• 2.7. FileStack third party
• 2.8. SQL Server
• 2.9. PostgreSQL
• 2.10. MySQL
• 2.11. MEAN Stack
• 2.12. .NET Core logo
• 2.13. Python Flask logo
• 2.14. Microsoft SQL Server 2019
• 2.15. Redis Queue model
• LIST OF ABBREVIATIONS
• LIST OF TABLES
• LIST OF FIGURES

Tóm tắt

I. Giới Thiệu Tạo Ứng Dụng Web Từ Database Giải Pháp Nhanh

Trong bối cảnh công nghệ thông tin phát triển nhanh chóng, nhu cầu tạo ứng dụng web ngày càng tăng cao. Tuy nhiên, nguồn lực lập trình viên còn hạn chế. Việc xây dựng website lặp đi lặp lại có thể gây nhàm chán và tốn thời gian. Dự án Easy-Web ra đời nhằm giải quyết vấn đề này, giúp người dùng tự động tạo ứng dụng web từ cơ sở dữ liệu hiện có. Người dùng chỉ cần đăng ký database vào hệ thống, hệ thống sẽ phân tích và sinh mã nguồn web từ database. Sau bốn bước cấu hình, người dùng sẽ nhận được một website hoàn chỉnh với đầy đủ mã nguồn backend và frontend. Mã nguồn này có thể được tùy chỉnh và sử dụng theo nhu cầu. "Với Easy-Web, người dùng có thể tạo một ứng dụng web quản lý tự động bằng cách đăng ký cơ sở dữ liệu của họ trong hệ thống."

1.1. Tổng Quan Về Ứng Dụng Web Tự Động Từ Database

Easy-Web là một giải pháp tạo ứng dụng web tự động từ database. Nó cho phép người dùng tạo ra các ứng dụng web quản lý dữ liệu một cách nhanh chóng và dễ dàng. Hệ thống đọc các bảng, cột và dữ liệu từ database do người dùng cung cấp. Sau đó, nó tạo ra một website với đầy đủ chức năng dựa trên cấu trúc của database. Người dùng có thể tải xuống và tùy chỉnh mã nguồn của website này. Ứng dụng web tự động từ database giúp tiết kiệm thời gian và công sức cho các nhà phát triển.

1.2. Lợi Ích Của Việc Tạo Ứng Dụng Web Từ Database

Việc tạo ứng dụng web từ database mang lại nhiều lợi ích. Thứ nhất, nó giúp tiết kiệm thời gian và công sức phát triển. Thay vì phải viết code từ đầu, người dùng có thể sử dụng các công cụ để sinh mã nguồn web từ database. Thứ hai, nó giảm thiểu rủi ro sai sót trong quá trình lập trình. Các công cụ code generator ứng dụng web từ database thường được kiểm tra kỹ lưỡng và đảm bảo tính chính xác. Thứ ba, nó cho phép người dùng tập trung vào các khía cạnh quan trọng hơn của ứng dụng, chẳng hạn như thiết kế giao diện và trải nghiệm người dùng.

II. Thách Thức Khó Khăn Khi Phát Triển Web Từ Database Thủ Công

Phát triển ứng dụng web từ database theo cách thủ công thường gặp nhiều khó khăn. Quá trình này đòi hỏi kiến thức chuyên sâu về lập trình web, quản lý database và các công nghệ liên quan. Việc viết code cho từng chức năng, từ CRUD application từ database đến tạo API từ database, tốn rất nhiều thời gian và công sức. Hơn nữa, việc duy trì và cập nhật code cũng là một thách thức lớn. Các lỗi có thể xảy ra trong quá trình lập trình và cần được sửa chữa kịp thời. "Khi thực hiện cùng một công việc lặp đi lặp lại, có thể gây nhàm chán và tốn thời gian."

2.1. Yêu Cầu Kỹ Năng Cao Khi Lập Trình Web Từ Database

Để phát triển một ứng dụng web từ database, lập trình viên cần có kiến thức vững chắc về các ngôn ngữ lập trình như ASP.NET, Python, và các framework như Angular, React. Họ cũng cần hiểu rõ về cấu trúc database, các truy vấn SQL và các giao thức truyền dữ liệu. Ngoài ra, kinh nghiệm làm việc với các công cụ phát triển web và quản lý database cũng rất quan trọng. Việc thiếu hụt kỹ năng có thể dẫn đến các lỗi trong quá trình lập trình và ảnh hưởng đến hiệu suất của ứng dụng.

2.2. Tốn Thời Gian Và Công Sức Cho Các Tác Vụ Lặp Đi Lặp Lại

Trong quá trình phát triển ứng dụng web từ database, có nhiều tác vụ lặp đi lặp lại, chẳng hạn như tạo form từ database, tạo trang web từ database, và tạo báo cáo từ database. Việc thực hiện các tác vụ này theo cách thủ công tốn rất nhiều thời gian và công sức. Các lập trình viên phải viết code cho từng form, từng trang web và từng báo cáo. Điều này không chỉ làm chậm tiến độ dự án mà còn làm tăng nguy cơ sai sót. Do đó, việc tự động tạo ứng dụng web từ database là một giải pháp hiệu quả để giảm thiểu thời gian và công sức cho các tác vụ lặp đi lặp lại.

III. Giải Pháp Sử Dụng Code Generator Tạo Web Từ Database Nhanh

Để giải quyết các thách thức trên, giải pháp code generator ứng dụng web từ database nổi lên như một công cụ hữu hiệu. Các công cụ này cho phép người dùng chuyển đổi database thành ứng dụng web một cách nhanh chóng và dễ dàng. Người dùng chỉ cần cung cấp thông tin về database, các công cụ sẽ tự động sinh mã nguồn web từ database. Mã nguồn này có thể được tùy chỉnh và sử dụng để xây dựng các ứng dụng web phức tạp. "Với Easy-Web, người dùng có thể tạo một ứng dụng web quản lý tự động bằng cách đăng ký cơ sở dữ liệu của họ trong hệ thống."

3.1. Ưu Điểm Của Code Generator Ứng Dụng Web Từ Database

Các công cụ tạo ứng dụng web từ database mang lại nhiều ưu điểm. Thứ nhất, chúng giúp tiết kiệm thời gian và công sức phát triển. Thứ hai, chúng giảm thiểu rủi ro sai sót trong quá trình lập trình. Thứ ba, chúng cho phép người dùng tập trung vào các khía cạnh quan trọng hơn của ứng dụng. Thứ tư, chúng giúp tạo ra các ứng dụng web có tính nhất quán và dễ bảo trì. Cuối cùng, chúng cho phép người dùng tạo ứng dụng web không cần code hoặc với rất ít code.

3.2. Các Tính Năng Quan Trọng Của Code Generator Web Từ Database

Một code generator ứng dụng web từ database tốt cần có các tính năng sau: Khả năng kết nối với nhiều loại database khác nhau (SQL Server, MySQL, PostgreSQL,...). Khả năng phân tích cấu trúc database và tạo ra các model tương ứng. Khả năng tạo API từ database để truy cập dữ liệu. Khả năng tạo frontend từ database với giao diện người dùng thân thiện. Khả năng tùy chỉnh mã nguồn được tạo ra. Khả năng tạo admin panel từ database để quản lý dữ liệu.

IV. Easy Web Nền Tảng Tạo Ứng Dụng Web Từ Database Đơn Giản

Easy-Web là một nền tảng tạo ứng dụng web từ database mã nguồn mở, cho phép người dùng tạo ứng dụng web nhanh chóng bằng cách đăng ký database của họ vào hệ thống. Hệ thống sẽ phân tích các thực thể trong database và hướng dẫn người dùng qua các bước cấu hình. Cuối cùng, Easy-Web sẽ trả về một website hoàn chỉnh với mã nguồn đầy đủ. Người dùng có thể sử dụng mã nguồn này dựa trên hướng dẫn của Easy-Web. Easy-Web hướng đến các nhà phát triển sử dụng Angular, .NET Core và SQL Server, giúp họ tiết kiệm thời gian xây dựng website quản lý.

4.1. Quy Trình Tạo Ứng Dụng Web Với Easy Web

Quy trình tạo ứng dụng web với Easy-Web bao gồm các bước sau: Đăng ký database vào hệ thống. Hệ thống phân tích cấu trúc database. Người dùng cấu hình các bảng và cột. Hệ thống sinh mã nguồn web từ database. Người dùng tải xuống và tùy chỉnh mã nguồn. Mã nguồn được tạo ra bao gồm cả backend và frontend, với đầy đủ các chức năng CRUD (Create, Read, Update, Delete).

4.2. Các Công Nghệ Sử Dụng Trong Easy Web

Easy-Web sử dụng các công nghệ sau: Angular cho frontend, .NET Core cho backend, Microsoft SQL Server cho database, Python Flask cho website generate framework, và Redis Queue cho xử lý các tác vụ nền. Việc sử dụng các công nghệ này giúp Easy-Web có hiệu suất cao, khả năng mở rộng tốt và dễ dàng bảo trì. Easy-Web cũng hỗ trợ nhiều loại database khác nhau, bao gồm SQL Server, PostgreSQL và MySQL.

V. Ứng Dụng Thực Tế Tạo Web Quản Lý Cho Doanh Nghiệp Từ DB

Việc tạo ứng dụng web cho doanh nghiệp từ database có thể được ứng dụng trong nhiều lĩnh vực khác nhau. Ví dụ, có thể tạo ứng dụng web cho quản lý kho, tạo ứng dụng web cho nhân sự, tạo ứng dụng web cho kế toán, hoặc tạo ứng dụng web cho CRM. Các ứng dụng này giúp doanh nghiệp quản lý dữ liệu một cách hiệu quả hơn, cải thiện quy trình làm việc và tăng năng suất. "Dựa trên cơ sở dữ liệu mà người dùng đã cung cấp, hệ thống sẽ có thể đọc các bảng, cột và dữ liệu chứa trong cơ sở dữ liệu đó."

5.1. Ví Dụ Về Ứng Dụng Web Quản Lý Khách Hàng CRM

Một ứng dụng web quản lý khách hàng (CRM) có thể được tạo từ database chứa thông tin về khách hàng, sản phẩm, đơn hàng và các tương tác với khách hàng. Ứng dụng này cho phép nhân viên bán hàng và marketing theo dõi thông tin khách hàng, quản lý các chiến dịch marketing, và tạo báo cáo về doanh số bán hàng. Việc tạo ứng dụng web cho CRM giúp doanh nghiệp cải thiện quan hệ với khách hàng và tăng doanh thu.

5.2. Ví Dụ Về Ứng Dụng Web Quản Lý Kho Hàng

Một ứng dụng web quản lý kho hàng có thể được tạo từ database chứa thông tin về sản phẩm, số lượng tồn kho, vị trí lưu trữ và các giao dịch nhập xuất kho. Ứng dụng này cho phép nhân viên kho theo dõi số lượng tồn kho, quản lý các đơn hàng nhập xuất kho, và tạo báo cáo về tình hình kho hàng. Việc tạo ứng dụng web cho kho giúp doanh nghiệp quản lý kho hàng một cách hiệu quả hơn và giảm thiểu thất thoát.

VI. Kết Luận Tương Lai Của Phát Triển Web Từ Database Tự Động

Việc tạo ứng dụng web từ database tự động là một xu hướng tất yếu trong tương lai. Các công cụ low-code platform web application database và no-code platform web application database ngày càng trở nên phổ biến, cho phép người dùng tạo ứng dụng web dễ dàng mà không cần kiến thức chuyên sâu về lập trình. Xu hướng này sẽ giúp giảm chi phí phát triển ứng dụng web, tăng tốc độ phát triển và cho phép người dùng tập trung vào các khía cạnh quan trọng hơn của ứng dụng. "Thông qua việc xây dựng Easy Web, nhóm cũng đã bổ sung kiến thức mới để áp dụng bao gồm: Biết tiến trình cơ bản để xây dựng một sản phẩm Open-Source."

6.1. Sự Phát Triển Của Các Nền Tảng Low Code Và No Code

Các nền tảng low-code và no-code đang phát triển mạnh mẽ, cho phép người dùng tạo ứng dụng web kéo thả một cách dễ dàng. Các nền tảng này cung cấp các công cụ trực quan để thiết kế giao diện người dùng, xây dựng logic nghiệp vụ và kết nối với các database. Việc sử dụng các nền tảng này giúp giảm đáng kể thời gian và chi phí phát triển ứng dụng web.

6.2. Tầm Quan Trọng Của Tùy Biến Và Mở Rộng Trong Tương Lai

Trong tương lai, khả năng tùy biến và mở rộng sẽ trở nên quan trọng hơn đối với các công cụ tạo ứng dụng web từ database. Người dùng cần có khả năng tùy chỉnh giao diện người dùng, thêm các chức năng mới và tích hợp với các hệ thống khác. Các công cụ tạo ứng dụng web tùy chỉnh sẽ giúp người dùng đáp ứng các nhu cầu cụ thể của doanh nghiệp và tạo ra các ứng dụng web độc đáo.

Nội dung chính

Bối cảnh và vấn đề nghiên cứu

Trong bối cảnh ngành công nghệ thông tin phát triển nhanh chóng, nhu cầu xây dựng các ứng dụng web quản trị dữ liệu phục vụ doanh nghiệp và tổ chức ngày càng gia tăng. Tuy nhiên, nguồn nhân lực lập trình viên có kinh nghiệm vẫn còn hạn chế. Trong thực tế phát triển phần mềm, các kỹ sư thường xuyên phải lặp lại các công đoạn xây dựng giao diện quản trị, thiết lập mô hình dữ liệu (Data Model), viết các tầng truy xuất dữ liệu và cài đặt các chức năng CRUD (Create - Read - Update - Delete) cơ bản cho từng bảng dữ liệu. Quá trình lặp đi lặp lại này làm tiêu tốn nhiều thời gian, công sức và làm giảm hiệu suất phát triển các tính năng nghiệp vụ cốt lõi ở phía máy khách (Client-side).

Nhằm giải quyết bài toán trên, nhóm tác giả đã đề xuất và xây dựng hệ thống Easy-Web – một nền tảng mã nguồn mở có chức năng tự động tạo mã nguồn ứng dụng web quản trị hoàn chỉnh dựa trên cơ sở dữ liệu quan hệ có sẵn của người dùng.

Mục tiêu và nhiệm vụ nghiên cứu của đề tài được xác định cụ thể như sau:

1. Nghiên cứu cơ chế phân tích cấu trúc lược đồ dữ liệu từ các hệ quản trị cơ sở dữ liệu quan hệ phổ biến (Microsoft SQL Server, MySQL, PostgreSQL).
2. Xây dựng quy trình 4 bước cấu hình trực quan cho phép người dùng tùy biến bảng, cột, thao tác CRUD và nhận diện thương hiệu mà không cần viết mã lệnh (No-code).
3. Thiết kế và hiện thực khung sinh mã nguồn (Website Generate Framework) có khả năng tự động tạo đầy đủ mã nguồn Back-end (ASP.NET Core RESTful API), Middleware (Swagger Code Generation) và Front-end (Angular 12).
4. Tích hợp cơ chế hàng đợi xử lý nền (Redis Queue) để quản lý các tác vụ sinh mã phức tạp, tránh tình trạng gián đoạn kết nối HTTP giữa máy khách và máy chủ.
5. Đóng gói sản phẩm thành giải pháp hoàn chỉnh cho phép người dùng tải mã nguồn, nhận mã nguồn qua email hoặc chuẩn bị cho việc triển khai trực tiếp lên máy chủ.

Đối tượng và phạm vi nghiên cứu:

• Đối tượng nghiên cứu: Công cụ sinh mã nguồn tự động (Source Code Generator) cho ứng dụng web dựa trên cơ sở dữ liệu hiện có.
• Phạm vi không gian: Đồ án tốt nghiệp ngành Công nghệ Thông tin, thực hiện tại Khoa Đào tạo Chất lượng cao, Trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh (HCMUTE).
• Phạm vi thời gian: Đề tài được giao ngày 15/03/2021 và hoàn thành nộp báo cáo vào ngày 19/07/2021.
• Phạm vi công nghệ: Hỗ trợ trích xuất dữ liệu từ Microsoft SQL Server 2019, MySQL và PostgreSQL; sinh ứng dụng web với kiến trúc phân tầng gồm Back-end ASP.NET Core và Front-end Angular 12.

Cơ sở lý thuyết và phương pháp

Đề tài kết hợp giữa việc khảo sát giải pháp thương mại sẵn có và ứng dụng các lý thuyết kỹ nghệ phần mềm hiện đại nhằm xây dựng kiến trúc sinh mã tối ưu:

Hạng mục	Cơ sở lý thuyết và công nghệ áp dụng	Vai trò trong hệ thống
Giải pháp đối sánh	Visual Studio’s MVC Web Application Generator (từ Visual Studio 2017)	Phân tích ưu/nhược điểm của công cụ Scaffolding sẵn có để định hình tính năng cho Easy-Web
Kỹ thuật ORM & CSDL	Entity Framework Core 5.0 (lệnh Scaffold-DbContext), Code First / Database First	Kỹ thuật đảo ngược (Reverse Engineering) lược đồ CSDL thành các lớp Entity C#
Hệ quản trị CSDL	Microsoft SQL Server 2019, MySQL (Driver MySql.0 Preview 4), PostgreSQL (Driver Npgsql 5.7)	Cơ sở dữ liệu nguồn của người dùng và lưu trữ dữ liệu hệ thống Easy-Web
Xử lý nền (Background Job)	Redis Queue (RQ Worker) kết hợp Python	Điều phối và thực thi hàng đợi sinh mã nguồn bất đồng bộ, xử lý các tác vụ tệp và shell script
Framework Front-end	Angular 12 (TypeScript, SCSS, Data Binding, Material UI, Bootstrap 4)	Xây dựng giao diện hệ thống Easy-Web và cấu trúc mã nguồn Front-end được sinh ra
Cộng đồng / Blog	MEAN Stack (MongoDB, Express.js, Angular, Node.js)	Phát triển phân hệ Blog chia sẻ thông tin cho người dùng Easy-Web
Lưu trữ đa phương tiện	Cloudinary, FileStack	Lưu trữ hình ảnh, logo và tệp tin đính kèm

Phương pháp nghiên cứu thực tế:

• Phương pháp phân tích - tổng hợp yêu cầu: Khảo sát các công cụ sinh mã nguồn hiện có của Microsoft Visual Studio, từ đó tổng hợp các hạn chế (đòi hỏi người dùng phải có kiến thức chuyên sâu về .NET/MVC, mã nguồn sinh ra khó tùy biến, khó triển khai) để xây dựng bảng yêu cầu chức năng và phi chức năng cho Easy-Web.
• Phương pháp mô hình hóa hướng đối tượng (UML): Xây dựng hệ thống sơ đồ ca sử dụng (Use Case Diagram), sơ đồ hoạt động (Activity Diagram), sơ đồ tuần tự (Sequence Diagram), sơ đồ lớp (Class Diagram) và sơ đồ thực thể quan hệ (ERD).
• Phương pháp phân rã kiến trúc (Architectural Decomposition): Tách biệt hệ thống Easy-Web thành hai phân hệ độc lập: Website giao tiếp người dùng và Khung sinh mã nguồn hoạt động như một Microservice trên nền tảng máy chủ Linux.
• Phương pháp thực nghiệm và kiểm thử phần mềm: Xây dựng các ca kiểm thử chức năng (Functional Test Cases) cho các module đăng nhập, đăng ký, kết nối cơ sở dữ liệu và cấu hình bảng/cột; đo lường thời gian xử lý của bộ sinh mã nguồn để tích hợp hàng đợi Redis Queue phù hợp.

Thiết kế và triển khai hệ thống

Hệ thống Easy-Web được thiết kế theo mô hình phân tán gồm hai thành phần chính:

1. Phân hệ Website tương tác Easy-Web

• Front-end: Xây dựng trên nền tảng Angular 12, Bootstrap 4, Material UI, SCSS và Toast notifications. Cung cấp giao diện người dùng cho cả người dùng chưa xác thực (xem bản demo, giao diện Dark/Light mode, đọc blog) và người dùng đã xác thực (quản lý CSDL, thực hiện quy trình 4 bước tạo website, xem thống kê và tải mã nguồn).
• Back-end: Xây dựng bằng ASP.NET Core kết hợp Entity Framework Core 5.0 và Microsoft SQL Server, đảm nhiệm xử lý toàn bộ logic nghiệp vụ, quản lý tài khoản người dùng, lưu vết cấu hình và lịch sử sinh website.
• Phân hệ Blog cộng đồng: Tích hợp mô hình MEAN Stack (MongoDB, Express.js, Angular, Node.js) nhằm cung cấp không gian trao đổi thông tin nhẹ nhàng và linh hoạt.

2. Khung sinh mã nguồn (Website Generate Framework)

Khung sinh mã nguồn được thiết kế dưới dạng một Microservice độc lập viết bằng Python và Flask, bao gồm 4 module chuyên trách:

• Client App (Front-end) Generator: Sử dụng Python để sinh mã nguồn giao diện người dùng Angular 12 dựa trên tệp cấu hình lược đồ mà người dùng đã tùy chỉnh.
• API Client Generator (Middleware): Sử dụng Python kết hợp công cụ Swagger Code Generation để tự động sinh tầng middleware kết nối giữa Front-end và Back-end dựa trên các đặc tả endpoint RESTful API.
• API (Back-end) Generator: Sử dụng Python kết hợp các mẫu bản mẫu (templates) để sinh toàn bộ mã nguồn ASP.NET Core RESTful API cùng tầng truy xuất dữ liệu Entity Framework Core tương thích với CSDL người dùng cung cấp.
• Website Generate Framework API & RQ Worker: Ứng dụng Python Flask kết hợp Redis Queue (RQ) đóng vai trò tiếp nhận yêu cầu từ hệ thống Easy-Web, đưa vào hàng đợi xử lý ngầm và điều phối 3 module trên. Nhóm tác giả ghi nhận thời gian trung bình để tạo hoàn chỉnh một bộ mã nguồn CMS là khoảng 1 phút 15 giây (75 giây); do đó việc sử dụng RQ giúp giải phóng kết nối HTTP tức thì, ngăn chặn hiện tượng timeout trên trình duyệt.

+-----------------------------------------------------------------------------------+
|                              KIẾN TRÚC HỆ THỐNG EASY-WEB                          |
+-----------------------------------------------------------------------------------+
| 1. EASY-WEB APPLICATION                                                           |
|    - Front-end: Angular 12, TypeScript, SCSS, Bootstrap 4, Material UI            |
|    - Back-end: ASP.NET Core RESTful API, Microsoft SQL Server 2019                |
|    - Phân hệ phụ: MEAN Stack Blog (MongoDB, Express.js, Angular, Node.js)         |
|    - Tích hợp dịch vụ: Cloudinary, FileStack                                      |
+-----------------------------------------------------------------------------------+
| 2. WEBSITE GENERATE FRAMEWORK (Microservice trên Linux)                           |
|    - Framework API: Python Flask + Redis Queue (RQ Worker) điều phối tác vụ nền   |
|    - API (Back-end) Generator: Sinh mã nguồn ASP.NET Core RESTful API             |
|    - API Client Generator (Middleware): Swagger Code Generation                   |
|    - Client App (Front-end) Generator: Sinh mã nguồn Angular 12 Web App           |
+-----------------------------------------------------------------------------------+

3. Quy trình 4 bước tạo website từ cơ sở dữ liệu

Hệ thống chuẩn hóa quy trình tạo lập website quản trị thông qua 4 bước cấu hình liên tiếp:

• Bước 1 - Đăng ký chuỗi kết nối (SCA_014 / UC_13): Người dùng cung cấp URL kết nối CSDL, loại hệ quản trị (SQL Server, MySQL hoặc PostgreSQL), số cổng, tên người dùng và mật khẩu truy cập có quyền đọc. Hệ thống tiến hành kết nối thử nghiệm và trích xuất danh sách bảng, cột.
• Bước 2 - Cấu hình bảng (SCA_13 / UC_10, UC_11, UC_12): Người dùng xem danh sách các bảng dữ liệu được đọc về, đổi tên hiển thị của bảng sang định dạng chuẩn giao diện (yêu cầu dạng CamelCase) và ẩn đi các bảng không mong muốn xuất hiện trên website (quy tắc nghiệp vụ: phải giữ lại tối thiểu 5 bảng).
• Bước 3 - Cấu hình cột (SCA_015 / UC_14, UC_15, UC_16): Người dùng tùy chỉnh tên hiển thị của từng thuộc tính cột, ẩn/hiện cột và lựa chọn thành phần giao diện (UI Component) tương ứng cho từng kiểu dữ liệu.
• Bước 4 - Hoàn tất thông tin và xem trước (SCA_016 / UC_17, UC_18): Thiết lập tên website, tải lên logo, cập nhật thông tin liên hệ, xem trước giao diện và gửi yêu cầu sinh mã nguồn vào hàng đợi hệ thống; sau khi hoàn tất, người dùng có thể tải tệp mã nguồn nén hoặc nhận qua email.

4. Thiết kế cơ sở dữ liệu và lớp đối tượng

• Các lớp chính trong hệ thống Easy-Web: User (quản lý người dùng), BaseEntity (lớp thực thể cơ sở), UserDatabaseInfo (lưu trữ thông tin chuỗi kết nối và thông số CSDL người dùng), WebGeneratedHistory (lưu lịch sử và đường dẫn tải mã nguồn các website đã sinh).
• Các lớp chính trong bộ sinh mã nguồn: SystemMasterConfig (cấu hình chung cho website), SystemTableConfig (cấu hình chi tiết cho từng bảng), SystemTableColumnConfig (cấu hình kiểu dữ liệu, hiển thị và component của cột), SystemTableForeignKeyConfig (cấu hình khóa ngoại và mối quan hệ giữa các thực thể).

Nội dung chính theo từng chương

Chapter 1. Review current solutions (Tổng quan các giải pháp hiện tại)

Chương 1 phân tích bối cảnh phát triển của ngành công nghệ phần mềm web và sự cần thiết của các công cụ tự động hóa. Tác giả tiến hành đánh giá chi tiết giải pháp Visual Studio’s MVC Web Application Generator (tính năng Scaffolding tích hợp sẵn trong Visual Studio từ phiên bản 2017). Mặc dù giải pháp của Microsoft có ưu điểm là dễ tiếp cận và tài liệu phong phú, nhưng tồn tại nhiều nhược điểm lớn: người dùng buộc phải có nền tảng vững về lập trình .NET/MVC và Entity Framework CLI, sản phẩm sinh ra chỉ là ứng dụng MVC nguyên khối, đòi hỏi nhiều công sức tùy biến mới có thể sử dụng được và khó triển khai.

Từ đó, chương 1 xác định mục tiêu xây dựng Easy-Web với các tiêu chí: tối giản thao tác, không đòi hỏi viết mã lệnh, cho phép tùy biến sâu giao diện/chức năng, hỗ trợ nhiều CSDL (SQL Server, MySQL, PostgreSQL) và định hình kiến trúc phân tách rõ ràng giữa Angular Front-end và .NET Core Back-end.

Chapter 2. Technologies (Công nghệ sử dụng)

Chương 2 trình bày chi tiết cơ sở lý thuyết và lý do lựa chọn từng công nghệ trong ngăn xếp:

• .NET Core & Entity Framework Core 5.0: Đóng vai trò nền tảng xử lý Back-end với hiệu năng cao, hỗ trợ đa nền tảng, tích hợp sẵn hệ thống xác thực và công cụ Scaffold-DbContext phục vụ việc trích xuất thực thể CSDL.
• Python & Flask: Ngôn ngữ kịch bản có cú pháp linh hoạt, hệ sinh thái thư viện phong phú, tối ưu cho các tác vụ xử lý tệp, chuỗi ký tự và lệnh shell; Flask microframework được dùng để đóng gói dịch vụ sinh mã dưới dạng RESTful API gọn nhẹ.
• Redis Queue (RQ): Giải pháp hàng đợi tác vụ nền giúp xử lý quy trình sinh mã nguồn kéo dài khoảng 75 giây mà không gây nghẽn kết nối mạng.
• Angular 12: Framework Front-end nền tảng TypeScript với khả năng Two-way Data Binding, cấu trúc Component hóa và SCSS giúp quản lý giao diện linh hoạt.
• Microsoft SQL Server 2019 & MEAN Stack: Đảm nhiệm lưu trữ dữ liệu hệ thống và vận hành phân hệ Blog cộng đồng.

Chapter 3. Requirement specification (Đặc tả yêu cầu phần mềm)

Chương 3 chi tiết hóa toàn bộ yêu cầu của hệ thống qua việc xác định hai nhóm tác nhân (Unauthenticated User và Authenticated User) cùng danh mục 18 ca sử dụng:

Mã Use Case	Tên ca sử dụng	Nhóm tác nhân	Tóm tắt mục tiêu ca sử dụng
UC_01	Register new account	Unauthenticated	Đăng ký tài khoản thành viên mới trên hệ thống Easy-Web
UC_02	Login to the system	Unauthenticated	Đăng nhập vào hệ thống để truy cập các tính năng quản trị
UC_03 - UC_07	View demo pages	Unauthenticated	Xem trước giao diện demo (Login, Register, Detail, Update, Create)
UC_08	View list websites generated	Authenticated	Xem danh sách thống kê các website đã được tạo thành công
UC_09	Re-download source code	Authenticated	Tải lại gói mã nguồn của các website đã sinh trước đó
UC_10	View all tables fetched	Authenticated	Xem danh sách các bảng dữ liệu trích xuất từ CSDL kết nối
UC_11	Change table display name	Authenticated	Đổi tên hiển thị của bảng sang định dạng chuẩn CamelCase
UC_12	Hide table	Authenticated	Ẩn các bảng không cần sinh mã (phải giữ tối thiểu 5 bảng)
UC_13	Register DB connection string	Authenticated	Đăng ký thông số kết nối CSDL nguồn để hệ thống đọc lược đồ
UC_14 - UC_16	Column configurations	Authenticated	Xem danh sách cột, xem chi tiết và ẩn các cột dữ liệu không cần thiết
UC_17	Set logo for website	Authenticated	Tải lên biểu trưng (logo) nhận diện cho website được sinh
UC_18	Send source code to email	Authenticated	Gửi liên kết hoặc gói mã nguồn hoàn chỉnh vào hộp thư người dùng

Chương này cũng mô tả chi tiết các luồng sự kiện chính (Main Success Scenario), kịch bản thay thế (Alternative Scenario), ngoại lệ (Exceptions) và quy tắc nghiệp vụ (Business Rules) cho từng ca sử dụng.

Chapter 4. System Design and Implementation (Thiết kế và hiện thực hệ thống)

Chương 4 tập trung mô tả kiến trúc kỹ thuật của Easy-Web:

• Trình bày sơ đồ lớp chi tiết cho hai hệ thống: Hệ thống Easy-Web (User, BaseEntity, UserDatabaseInfo, WebGeneratedHistory) và Khung sinh mã nguồn (SystemMasterConfig, SystemTableConfig, SystemTableColumnConfig, SystemTableForeignKeyConfig).
• Thiết kế lược đồ thực thể quan hệ (ERD) và lược đồ vật lý CSDL cho cả cơ sở dữ liệu hệ thống và cơ sở dữ liệu của website đích được sinh ra.
• Xây dựng sơ đồ tuần tự (Sequence Diagram) mô tả chi tiết quy trình xác thực, quy trình sinh mã nguồn Back-end ASP.NET Core, sinh Middleware bằng Swagger và sinh Front-end Angular 12.
• Thiết kế hệ thống giao diện người dùng chi tiết (từ màn hình SCA_001 đến SCA_017) tương ứng với luồng thao tác thực tế.

Chapter 5. Software Testing and Management (Kiểm thử và quản lý phần mềm)

Chương 5 trình bày thiết lập môi trường phát triển, quy trình đóng gói và phát hành thư viện tái sử dụng lên hệ thống NPM (Node Package Manager). Bên cạnh đó, chương này đặc tả các bộ kịch bản kiểm thử (Test Cases) chi tiết cho các chức năng kiểm tra đăng nhập, đăng ký tài khoản, đăng ký chuỗi kết nối cơ sở dữ liệu và cấu hình bảng/cột, bảo đảm tính toàn vẹn và độ tin cậy của mã nguồn được tự động sinh ra.

Kết quả và đóng góp

Dựa trên các số liệu và nội dung thực nghiệm được trình bày trong tài liệu, đề tài đã đạt được các kết quả cụ thể:

• Xây dựng thành công hệ sinh thái Easy-Web: Hoàn thiện nền tảng web ứng dụng bao gồm giao diện tương tác người dùng (Angular 12), hệ thống dịch vụ Back-end (.NET Core, SQL Server) và phân hệ Blog cộng đồng (MEAN Stack).
• Hoàn thiện khung sinh mã nguồn đa nền tảng: Hiện thực thành công dịch vụ sinh mã nguồn tự động hỗ trợ 3 hệ quản trị CSDL quan hệ hàng đầu (SQL Server 2019, MySQL, PostgreSQL), sinh ra mã nguồn sạch bao gồm tầng RESTful API (.NET Core) và Front-end (Angular 12) có giao diện tương thích đa màn hình (Responsive).
• Tối ưu hóa hiệu năng xử lý với Redis Queue: Tích hợp thành công cơ chế hàng đợi bất đồng bộ RQ Worker, giải quyết bài toán thời gian sinh mã kéo dài trung bình 1 phút 15 giây/yêu cầu, giúp hệ thống hoạt động ổn định mà không làm gián đoạn trải nghiệm người dùng.
• Đóng gói thư viện NPM: Đã tạo, cấu hình và phát hành thành công gói thư viện NPM dùng chung phục vụ mục đích tái sử dụng mã nguồn.

Về mặt đóng góp so với các nghiên cứu và giải pháp trước đó:

• Khắc phục nhược điểm của công cụ Visual Studio Scaffolding bằng cách cung cấp giao diện trực quan 4 bước, loại bỏ hoàn toàn yêu cầu viết mã lệnh hoặc thao tác dòng lệnh phức tạp.
• Tách biệt hoàn toàn tầng giao diện (Angular) và tầng dịch vụ (RESTful API), tạo điều kiện thuận lợi cho các lập trình viên dễ dàng tải về, tùy biến sâu và mở rộng chức năng nghiệp vụ phía máy khách.

Hạn chế và hướng nghiên cứu tiếp

Hạn chế của đề tài:

• Thời gian xử lý sinh toàn bộ mã nguồn vẫn còn tương đối dài (khoảng 75 giây cho một tiến trình đầy đủ) do khối lượng thao tác tệp tin, trích xuất cấu trúc dữ liệu và thực thi shell script lớn.
• Kiến trúc sinh mã nguồn hiện tại bị ràng buộc vào khuôn mẫu công nghệ cố định (Back-end ASP.NET Core và Front-end Angular 12), chưa cung cấp tùy chọn chuyển đổi sang các framework khác.
• Hệ thống áp dụng một số quy tắc nghiệp vụ cố định trong quá trình cấu hình (như yêu cầu bắt buộc phải hiển thị tối thiểu 5 bảng dữ liệu).

Hướng phát triển tiếp theo:

• Tối ưu hóa hiệu năng xử lý của các tiến trình Python và quy trình đóng gói tệp tin nhằm rút ngắn thời gian sinh mã nguồn trong hàng đợi Redis Queue.
• Mở rộng khả năng hỗ trợ thêm các ngăn xếp công nghệ phổ biến khác cho Front-end (React, Vue.js) và Back-end (Node.js Express, Python Flask/Django, Java Spring Boot).
• Bổ sung công cụ hỗ trợ triển khai tự động (Instant Deployment) cho phép người dùng đưa website vừa sinh trực tiếp lên các nền tảng đám mây hoặc máy chủ ảo (VPS/Docker) với cấu hình tối giản.

Giá trị tham khảo

Đồ án tốt nghiệp này mang lại giá trị tham khảo thiết thực cho các nhóm đối tượng:

• Sinh viên ngành Công nghệ thông tin và Kỹ thuật phần mềm: Là tài liệu tham khảo điển hình về phương pháp xây dựng công cụ sinh mã nguồn (Code Generator), kỹ nghệ phần mềm dựa trên mô hình (Model-Driven Development) và quy trình xây dựng đồ án tốt nghiệp chuẩn mực từ phân tích yêu cầu, thiết kế kiến trúc UML đến kiểm thử phần mềm.
• Kỹ sư phát triển phần mềm Full-stack: Cung cấp tài liệu thực tế về cách kết hợp đa dạng các công nghệ hiện đại (.NET Core, Angular 12, Python Flask, Redis Queue, MEAN Stack) trong một kiến trúc hướng dịch vụ để giải quyết bài toán xử lý tác vụ nền nặng.
• Nội dung nổi bật đáng tham khảo: Phương pháp phân rã module sinh mã (Client App Generator, API Client Generator, API Generator) và hệ thống đặc tả 18 ca sử dụng (Use Case Specifications) chi tiết.

Câu hỏi thường gặp

1. Nền tảng Easy-Web hỗ trợ những hệ quản trị cơ sở dữ liệu nào?
Hệ thống hỗ trợ 3 hệ quản trị cơ sở dữ liệu quan hệ gồm Microsoft SQL Server 2019, MySQL và PostgreSQL thông qua các driver tương ứng của Entity Framework Core 5.0 (Microsoft.0, MySql.0 Preview 4, Npgsql 5.7).

2. Mã nguồn ứng dụng web được Easy-Web sinh ra sử dụng những công nghệ gì?
Ứng dụng web được sinh ra bao gồm đầy đủ Back-end là ASP.NET Core RESTful API kết nối cơ sở dữ liệu qua Entity Framework Core, tầng Middleware sinh tự động qua Swagger Code Generation và Front-end là Angular 12 kết hợp Bootstrap 4, Material UI và SCSS.

3. Tại sao hệ thống cần sử dụng Redis Queue (RQ Worker)?
Quy trình trích xuất CSDL, dựng mô hình C#, tạo controller, sinh giao diện Angular và đóng gói tệp tin mất trung bình khoảng 1 phút 15 giây cho mỗi yêu cầu. Redis Queue được sử dụng để chuyển tác vụ sinh mã vào hàng đợi xử lý nền ngầm, giúp phản hồi yêu cầu HTTP của người dùng ngay lập tức và tránh lỗi timeout trên trình duyệt.

4. Người dùng cần trải qua những bước nào để tạo một website từ Easy-Web?
Người dùng thực hiện quy trình 4 bước gồm: (1) Đăng ký chuỗi kết nối CSDL; (2) Cấu hình bảng (đổi tên hiển thị dạng CamelCase, ẩn/hiện bảng); (3) Cấu hình cột (đổi tên thuộc tính, ẩn cột, chọn UI component); (4) Điền thông tin website, tải logo, xem trước và gửi yêu cầu sinh mã nguồn.

5. Điểm khác biệt cơ bản giữa Easy-Web và Visual Studio’s MVC Web Application Generator là gì?
Visual Studio MVC Scaffolding đòi hỏi kiến thức chuyên sâu về lập trình .NET/MVC, thao tác dòng lệnh và chỉ sinh ứng dụng MVC nguyên khối khó tùy biến; trong khi Easy-Web cung cấp giao diện trực quan hoàn toàn không cần viết mã (No-code), hỗ trợ đa hệ CSDL và sinh ra ứng dụng phân tách độc lập giữa RESTful API và Single Page Application (Angular 12).

Kết luận

Đồ án tốt nghiệp của sinh viên Phan Sơn và Huỳnh Quốc Hoàng Vương đã giải quyết trọn vẹn bài toán tự động hóa quy trình xây dựng ứng dụng web quản trị từ cơ sở dữ liệu quan hệ có sẵn thông qua nền tảng Easy-Web. Bằng việc kết hợp hiệu quả giữa ASP.NET Core, Angular 12, Python Flask và cơ chế xử lý nền Redis Queue, đề tài đã tạo ra một công cụ sinh mã nguồn trực quan, giúp giảm thiểu đáng kể thời gian và công sức lập trình lặp lại cho các nhà phát triển web. Toàn bộ tài liệu cung cấp cấu trúc phân tích, thiết kế kỹ thuật và đặc tả kiểm thử phần mềm có tính ứng dụng và giá trị tham khảo học thuật cao.

Trích đoạn nội dung tài liệu

MINISTRY OF EDUCATION AND TRAINING HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING CAPSTONE PROJECT INFORMATION TECHNOLOGY SOURCE  CODE GENERATOR FOR WEB APPLICATION BASED ON THE EXISTING DATABASE LECTURERMSc. NGUYEN DUC KHOAN 6TUDENT PHAN SON HUYNH QUOC HOANG VUONG S K L0 0 8 0 9 0 Ho Chi Minh City, July 2021 HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING GRADUATION THESIS SOURCE CODE GENERATOR FOR WEB APPLICATION BASED ON THE EXISTING DATABASE Advisor: NGUYEN DUC KHOAN, MSc. Student Name: Student ID: PHAN SON 17110216 HUYNH QUOC HOANG VUONG 17110256 Course: 2017 Ho Chi Minh City, July 2021 THE SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom– Happiness -------- Ho Chi Minh City, July 20, 2021 GRADUATION PROJECT ASSIGNMENT Student name: PHAN SON Student ID: 17110216 Student name: HUYNH QUOC HOANG VUONG Student ID: 17110256 Major: INFORMATION TECHNOLOGY Class: 17110CLST Advisor: MSc. NGUYEN DUC KHOAN.

Phone number: Date of assignment: 15/03/2021 Date of submission: 19/07/2021 1. Project title: SOURCE CODE GENERATOR FOR WEB APPLICATION BASED ON THE EXISTING DATABASE. Initial materials provided by the advisor: Implementation using, ASP.1, Python Flask, SQL Server, MEAN Stack. Content of the project: Easy Web is an Open-Source website that allows users to register their database.

From there, the system will analyze the entities in the user's database. Go through the steps of registering the user's database and adjusting the entities in the Easy Web system. Finally, Easy Web will return to the user. From there the end-user can use it based on the instructions that Easy Web.

Final product: Web application that includes both front-end and back-end. CHAIR OF THE PROGRAM ADVISOR (Sign with full name) (Sign with full name) i THE SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom– Happiness -------- Ho Chi Minh City, July 20, 2021 GRADUATION PROJECT ASSIGNMENT Student name: PHAN SON Student ID: 17110216 Student name: HUYNH QUOC HOANG VUONG Student ID: 17110256 Major: INFORMATION TECHNOLOGY Class: 17110CLST Project title: SOURCE CODE GENERATOR FOR WEB APPLICATION BASED ON THE EXISTING DATABASE. Advisor: NGUYEN DUC KHOAN, MSc. Content of the project: …………………………………………………………………………………… …………………………………………………………………………………… 2.

Approval for oral defense? (Approved or denied) …………………………………………………………………………………… …………………………………………………………………………………… 5.in words: …………………………………………… Ho Chi Minh City, July 2021 ADVISOR (Sign with full name) ii THE SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom– Happiness -------- Ho Chi Minh City, July 20, 2021 PRE-DEFENSE EVALUATION SHEET Student name: PHAN SON Student ID: 17110216 Student name: HUYNH QUOC HOANG VUONG Student ID: 17110256 Major: INFORMATION TECHNOLOGY Class: 17110CLST Project title: SOURCE CODE GENERATOR FOR WEB APPLICATION BASED ON THE EXISTING DATABASE. Name of Reviewer: NGUYEN DUC KHOAN, MSc. Content of the project:. Approval for oral defense? (Approved or denied) .) Ho Chi Minh City, July 2021.

REVIEWER (Sign with full name) iii ACKNOWLEDGEMENTS First, the team would like to sincerely thank the teachers, departments, and related people in the high-quality training department and the University of Technology and Education in general. Thanks to that, the team could approach, learn, and explore and apply the acquired knowledge. The team was very sincere to Mr. Nguyen Duc Khoan who played the role of both a lecturer and a mentor during the process of this graduating session.

His enthusiastic guidance helped the team a lot in posing problems and solving problems that the group encountered. Finally helped the team complete this Easy-Web web application. iv TABLE OF CONTENTS CHAPTER 1. Review current solutions……………………………………………….

Visual Studio’s MVC Web Application Generator.5 Microsoft SQL Server 2019…………………………………………. Actor of system. Use case diagram. Use case specification.

Use case description. Unauthorized user - Use case description. Authorized user - Use case description. Non-functional requirement.

Entity Relationship diagram. SYSTEM DESIGN AND IMPLEMENTATION. Source code generator framework. The process to create a website from an existed database.

Class diagram for Easy-Web’s System. Class diagram description for class User. Class diagram description for class BaseEntity. Class diagram description for class UserDatabaseInfo.

Class diagram description for class WebGeneratedHistory. Class diagram use for Source code generates framework system. Class diagram description for class BaseEntity. Class diagram description for class SystemMasterConfig.

Class diagram description for class SystemTableConfig. Class diagram description for class SystemTableColumnConfig. Class diagram description for class SystemTableForeignKeyConfig.