MINISTRY OF EDUCATION AND TRAINING HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION GRADUATION THESIS MAJOR: GRADUATION THESIS OF SOFTWARE ENGINEERING DEVELOPING AN ONLINE PROGRAMMING LEARNING SYSTEM WITH AI ASSISTANT INSTRUCTOR: HOANG VAN DUNG STUDENT: NGUYEN PHUONG ANH TU DINH THANH DUC PHAM VU BAO NHAN Ho Chi Minh city, 2025 HCMC UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY OF INTERNATIONAL EDUCATION 🕯✡🕮🕮✡🕯 GRADUATION THESIS DEVELOPING AN ONLINE PROGRAMMING LEARNING SYSTEM WITH AI ASSISTANT INSTRUCTOR: PROF. HOÀNG VĂN DŨNG STUDENTS: NGUYỄN PHƯƠNG ANH TÚ – 21110105 ĐINH THÀNH ĐỨC – 21110765 PHẠM VŨ BẢO NHÂN – 21110066 ACADEMIC YEAR: 2021 – 2025 MAJOR: SOFTWARE ENGINEERING Ho Chi Minh City, 2025 THE SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom– Happiness ----***---- Ho Chi Minh City, ____ __, 2025 GRADUATION PROJECT ASSIGNMENT Student Name 1: Nguyễn Phương Anh Tú Student ID 1: 21110105 Student Name 2: Đinh Thành Đức Student ID 2: 21110765 Student Name 3: Phạm Vũ Bảo Nhân Student ID 3: 21110066 Major: Software Engineering Class: 21110FIE1,4 Instructor: Prof. Hoàng Văn Dũng Phone Number: Date of Assignment: Date of Submission: 1. Project Title: Developing an Online Programming Learning System with AI Assistant 2.
Initial Materials Provided by Instructor: 3. Content of the Project: 4. Final Product: CHAIR OF THE PROGRAM INSTRUCTOR (Sign with full name) (Sign with full name) 1 THE SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom– Happiness ----***---- INSTRUCTOR'S REPORT FORM Student Name 1: Nguyễn Phương Anh Tú Student ID 1: 21110105 Student Name 2: Đinh Thành Đức Student ID 2: 21110765 Student Name 3: Phạm Vũ Bảo Nhân Student ID 3: 21110066 Major: Software Engineering Project title: Developing an Online Programming Learning System with AI Assistant Instructor’s name: Prof. Hoàng Văn Dũng REPORT Project’s content & progress:.
Thesis oral defense approval: (Approved or Denied). Ho Chi Minh City, ____ __, 2025 INSTRUCTOR (Sign with full name) 2 THE SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom– Happiness ----***---- EVALUATION COMMITTEE'S REPORT FORM Student Name 1: Nguyễn Phương Anh Tú Student ID 1: 21110105 Student Name 2: Đinh Thành Đức Student ID 2: 21110765 Student Name 3: Phạm Vũ Bảo Nhân Student ID 3: 21110066 Major: Software Engineering Project title: Developing an Online Programming Learning System with AI Assistant Evaluation Committee member’s name: Prof. Nguyễn Đăng Quang REPORT Project’s content & progress:. Thesis oral defense approval: (Approved or Denied).
Ho Chi Minh City, ____ __, 2025 EVALUATION COMMITTEE MEMBER (Sign with full name) 3 Acknowledgement ACKNOWLEDGEMENT We would like to extend our sincere gratitude to Mr. Hoàng Văn Dũng, our instructor at Ho Chi Minh City University of Technology and Education, for his invaluable assistance in selecting our topic, guiding us throughout the research process, providing constructive feedback, and supplying essential reference materials during the development of this project titled “Developing an Online Programming Learning System with AI Assistant.” We are also deeply grateful to all the faculty members of the Information Technology Department for their continuous support and for patiently clarifying our doubts throughout the implementation phase. Furthermore, we wish to express our appreciation to our seniors for sharing valuable insights and reference materials, and to our peers for their collaboration and exchange of experiences, which have significantly contributed to enhancing the quality of our work. We look forward to receiving feedback and suggestions from our esteemed teachers and fellow students to further refine and improve our project.
Thank you sincerely. Ho Chi Minh City, ____ __, 2025 THE PROJECT TEAM 4 Table of Contents TABLE OF CONTENTS GRADUATION PROJECT ASSIGNMENT _____________________________________ 1 INSTRUCTOR'S REPORT FORM ____________________________________________ 2 EVALUATION COMMITTEE'S REPORT FORM _______________________________ 3 ACKNOWLEDGEMENT ____________________________________________________ 4 TABLE OF CONTENTS _____________________________________________________ 5 ABBREVIATIONS ________________________________________________________ 10 FIGURES ________________________________________________________________ 11 USE CASES ______________________________________________________________ 14 SEQUENCE DIAGRAMS __________________________________________________ 15 TABLES _________________________________________________________________ 16 CHAPTER 1. Rationale for the Project 17 1. Objectives of the Project 17 1.
Survey and Evaluation of Related Systems 18 1. Categorization and Analysis of Existing Platforms 19 1. Identified Gaps and the Rationale for a Unified Solution 22 1. Addressing the Gaps: Project Objectives and Proposed Solutions 23 1.
Solution to Enhance Problem-Solving in Code Evaluation Systems 24 CHAPTER 2. Microservice 28 5 Table of Contents 2. Abstract Syntax Tree 29 2. Large Language Models (LLMs) 29 2.
Natural Language Processing (NLP) 30 2. Vector Database and Similarity Search 31 2. Content Management System (CMS) 31 2. Web Scraping and Information Retrieval 32 CHAPTER 3.
Use Case Capturing & Modeling 37 3. Use Case Diagram 37 3. Use Case Specifications 38 CHAPTER 4. Overall System Architecture 49 4.
Microservices Architecture 50 CHAPTER 5. Markdown to Website Conversion System Architecture 53 5. Core Processing Pipeline 54 5. Text Processing Subsystem 56 5.
Complete Conversion Workflow 62 5. Conclusion 63 6 Table of Contents 5. Evaluation Assignment Code System 64 5. System Workflow Overview 65 5.
Initialization and AST Construction 65 5. Node Classification and Extraction 66 5. AST Unparsing and Secure Compilation 66 5. Dynamic Execution and Functional Testing 67 5.
Profiling and Performance Analysis 68 5. Comparative Evaluation and Result Compilation 69 5. The Communication Model Protocol (CMP) Architecture 70 5. Core Architectural Components 72 5.
Educational Dialogue Processing Workflow 73 5. Architectural Design Patterns 74 5. Monorepo Architecture in E-Learning Platform 77 5. Overview of Monorepo Architecture 77 5.
Advantages and Considerations 82 5. SYSTEM ANALYSIS & DESIGN ______________________________ 83 6. Component Diagram 83 7 Table of Contents 6. User Database Schema 89 6.
Course Database Schema 93 6. Enrollment Database Schema 96 6. Exercises Database Schema 98 6. Payments Database Schema 99 6.
Object-Oriented Design 102 6. Sequence Diagrams 102 CHAPTER 7. List of Pages and Conversion Diagram 110 7. Detailed Description of Pages 110 7.
List of Pages and Conversion Diagram 121 7. Detailed Description of Pages 121 7. Microservice-based Implementation 137 7. Microservice Architecture Overview 137 7.
Service Decomposition and Domain Boundaries 138 7. API Implementation and Service Communication 140 7. AI Service Implementation 141 7. Front-End Integration 142 7.
Overview of Deployment Architecture 145 7. Development Environment Setup 146 7. Continuous Integration and Continuous Deployment (CI/CD) 150 8 Table of Contents 7. Monitoring and Observability 157 7.
Scaling and Performance Optimization 158 7. Monitoring and Testing 160 CHAPTER 8. Advantages and Disadvantages of the System 163 8. Future Plans 166 REFERENCES ___________________________________________________________ 167 9 List of Abbreviations ABBREVIATIONS IDE Integrated Development Environment API Application Programming Interface UI User Interface CSS Cascading Style Sheets ORM Object Relational Mapping SQL Structured Query Language DB Database AST Abstract Syntax Tree AI Artificial Intelligence LLM Large Language Model NLP Natural Language Processing ERD Entity Relationship Diagram Table 0—1.
Abbreviations 10 List of Figures FIGURES Figure 3—1. Use Case Diagram _________________________________________________ 37 Figure 4—1. Overall System Architecture __________________________________________ 49 Figure 4—2. Overview of the Microsystems Architecture _____________________________ 51 Figure 5—1.
High-level Architecture of the Markdown to Website Conversion System ______ 54 Figure 5—2. Core Processing Pipeline ____________________________________________ 55 Figure 5—3. Text Processing Flow _______________________________________________ 57 Figure 5—4. Mathematical Content Processing _____________________________________ 58 Figure 5—5.
Format Conversion Mechanisms ______________________________________ 59 Figure 5—6. Integration with External Libraries _____________________________________ 61 Figure 5—7. Complete Conversion Workflow ______________________________________ 63 Figure 5—8. Flowchart for AST Implementation ____________________________________ 65 Figure 5—9.
Detail for Unittest and Visit Nodes Process ______________________________ 66 Figure 5—10. Idea for Process ClassBaseAST ______________________________________ 67 Figure 5—11. Pseudocode for Evaluation Code Function ______________________________ 68 Figure 5—12. Pseudocode for Unittest Functions ____________________________________ 69 Figure 5—13.
Pseudocode for Unittest Run ________________________________________ 70 Figure 5—14. CMP System Architectural Overview__________________________________ 71 Figure 5—15. Core Architectural Components ______________________________________ 72 Figure 5—16. Educational Dialogue Processing Workflow ____________________________ 74 Figure 5—17.
Architectural Design Patterns ________________________________________ 75 Figure 5—18. Technical Implementation Stack ______________________________________ 76 Figure 5—19. Overview of Monorepo Architecture __________________________________ 78 Figure 5—20. Architecture Structure Diagram ______________________________________ 78 Figure 5—21.
Integration Architecture Diagram _____________________________________ 81 Figure 6—1. Component Diagram ________________________________________________ 83 Figure 6—2. Login Process Activity Diagram _______________________________________ 84 Figure 6—3. Course Management Activity Diagram _________________________________ 84 Figure 6—4.
Course Enrollment Process Activity Diagram ____________________________ 85 Figure 6—5. Do Exercise Process Activity Diagram__________________________________ 85 Figure 6—6. Upload Docx Process Activity Diagram _________________________________ 86 Figure 6—7. AI Chat Process Activity Diagram _____________________________________ 87 Figure 6—8.
AI Assist Solving Exercise Process Activity Diagram ______________________ 88 Figure 6—9. Logical Diagram ___________________________________________________ 89 Figure 6—10. Class Diagram ___________________________________________________ 102 Figure 7—1. Conversion Diagram for User Pages __________________________________ 110 Figure 7—2.
Home Page (User)_________________________________________________ 111 Figure 7—3. Contact Support __________________________________________________ 111 Figure 7—4. AI Teaching Assistant ______________________________________________ 112 Figure 7—5. AI Summarizing Text ______________________________________________ 113 11 List of Figures Figure 7—6.
Login Page (User) _________________________________________________ 114 Figure 7—7. Course Categories Page (Website) ____________________________________ 114 Figure 7—8. Course Detail Page (Website) ________________________________________ 115 Figure 7—9. Learning Lessons List Page _________________________________________ 115 Figure 7—10.
Exercise List Page (User) (1) _______________________________________ 116 Figure 7—11. Exercise List Page (User) (2) _______________________________________ 116 Figure 7—12. Exercise Detail Page (User) ________________________________________ 117 Figure 7—13. Pricing Register Page _____________________________________________ 117 Figure 7—14.
Profile Page (1) __________________________________________________ 118 Figure 7—15. Profile Page (2) __________________________________________________ 118 Figure 7—16. Blogs Page _____________________________________________________ 119 Figure 7—17. Blog Detail Page (1) ______________________________________________ 120 Figure 7—18.
Blog Detail Page (2) ______________________________________________ 120 Figure 7—19. Conversion Diagram for Admin Pages ________________________________ 121 Figure 7—20. Dashboard Page (Admin) (1) _______________________________________ 122 Figure 7—21. Dashboard Page (Admin) (2) _______________________________________ 122 Figure 7—22.
Dashboard Page (Admin) (3) _______________________________________ 123 Figure 7—23. Dashboard Page (Admin) (4) _______________________________________ 123 Figure 7—24. User Management (Admin) (1) _____________________________________ 124 Figure 7—25. User Management (Admin) (2) _____________________________________ 124 Figure 7—26.
User Management (Admin) (3) _____________________________________ 125 Figure 7—27. User Management (Admin) (4) _____________________________________ 125 Figure 7—28. Course Management (Admin) (1) ____________________________________ 126 Figure 7—29. Course Management (Admin) (2) ____________________________________ 126 Figure 7—30.
Lesson Management (Admin) (1) ____________________________________ 127 Figure 7—31. Lesson Management (Admin) (2) ____________________________________ 127 Figure 7—32. Enrollment Management (Admin) (1) ________________________________ 128 Figure 7—33. Enrollment Management (Admin) (2) ________________________________ 128 Figure 7—34.
Exercise Management (Admin) (1) __________________________________ 129 Figure 7—35. Exercise Management (Admin) (2) __________________________________ 129 Figure 7—36. Exercise Management (Admin) (3) __________________________________ 130 Figure 7—37. Exercise Management (Admin) (4) __________________________________ 130 Figure 7—38.
Exercise Management (Admin) (5) __________________________________ 131 Figure 7—39. Exercise Management (Admin) (6) __________________________________ 132 Figure 7—40. Blog Management (Admin) (1) _____________________________________ 133 Figure 7—41. Blog Management (Admin) (2) _____________________________________ 133 Figure 7—42.
Blog Management (Admin) (3) _____________________________________ 134 Figure 7—43. Pricing Management (Admin) (1) ___________________________________ 135 Figure 7—44. Pricing Management (Admin) (2) ___________________________________ 135 Figure 7—45. AI Generative UI (1) ______________________________________________ 136 Figure 7—46.
AI Generative UI (2) ______________________________________________ 136 12 List of Figures Figure 7—47. AI Generative – Voice Input ________________________________________ 137 Figure 7—48. Microservice Architecture of the ELP-CMP Platform ____________________ 138 Figure 7—49. Database Architecture of the ELP-CMP Platform _______________________ 140 Figure 7—50.
API Gateway Pattern and Service Communication Flow __________________ 141 Figure 7—51. AI Service Architecture____________________________________________ 142 Figure 7—52. Front-End Architecture and Microservice Integration ____________________ 143 Figure 7—53. Test API on Production/Staging Branch in Real Deployment Server ________ 144 Figure 7—54.
Detail One Trace _________________________________________________ 145 Figure 7—56. Overall Deployment Architecture of the ELP-CMP Platform ______________ 146 Figure 7—57. CI/CD Workflow for the ELP-CMP Platform __________________________ 151 Figure 7—58. Auto Build & Test for Deploy_______________________________________ 151 Figure 7—59.
Front-End Deployment (Vercel) (1) __________________________________ 152 Figure 7—60. Front-End Deployment (Vercel) (2) __________________________________ 152 Figure 7—61. Front-End Deployment (Vercel) (3) __________________________________ 153 Figure 7—62. Front-End Deployment (Vercel) (4) __________________________________ 153 Figure 7—63.
PostgreSQL on Neon DB __________________________________________ 155 Figure 7—64. Figure Link Neon DB to Set Up AUTO SCALING Project _______________ 157 Figure 7—65. Test API on Production/Staging Branch in Real Deployment Server ________ 161 Figure 7—68.
