Source code generator for web application based on the existing database faculty of high quality training graduations thesis of the information technology

TABLE OF CONTENTS CHAPTER INTRODUCTION 1.1 Current situation……………………………………………………… 1.2 Review current solutions……………………………………………… 1.2.1 Visual Studio’s MVC Web Application Generator 1.3 Proposed solution……………………………………………………… 1.4 Scope…………………………………………………………………… CHAPTER TECHNOLOGIES 2.1 Technologies…………………………………………………………….4 2.2 NET Core……………………………………………………………… 2.3 Python………………………………………………………………… 2.4 Python Flask…………………………………………………………… 2.5 Microsoft SQL Server 2019………………………………………… 2.6 Redis queue (RQ)……………………………………………………… 2.7 Angular Framework……………………………………………………10 2.7.1 Overview 10 2.7.2 MEAN Stack 11 CHAPTER REQUIREMENT SPECIFICATION 13 3.1 User requirement……………………………………………………… 13 3.2 System requirement…………………………………………………… 14 3.2.1 Actor of system 14 3.2.2 Use case diagram 14 3.2.3 Use case specification 15 v 3.2.4 Use case description 16 3.2.4.1 Unauthorized user - Use case description 16 3.2.4.2 Authorized user - Use case description 25 3.2.5 Non-functional requirement 38 3.2.5.1 Usability 38 3.2.5.2 Reliability 38 3.2.5.3 Availability 39 3.2.5.4 Security 39 3.2.5.5 Durability 39 3.2.5.6 Ability 39 3.2.6 Entity Relationship diagram 39 CHAPTER SYSTEM DESIGN AND IMPLEMENTATION 41 4.1 System Architecture………………………………………………… 41 4.2 Component Diagram………………………………………………… 42 4.2.1 Back-end 42 4.2.2 Front-end 43 4.2.3 Source code generator framework 44 4.3 Activity Diagram……………………………………………………… 45 4.3.1 The process to create a website from an existed database 45 4.4 Class Diagram………………………………………………………… 46 4.4.1 Class diagram for Easy-Web’s System 46 4.4.1.1 Class diagram description for class User 47 4.4.1.2 Class diagram description for class BaseEntity 47 4.4.1.3 Class diagram description for class UserDatabaseInfo 47 vi 4.4.1.4 Class diagram description for class WebGeneratedHistory 48 4.4.2 Class diagram use for Source code generates framework system 49 4.4.2.1 Class diagram description for class BaseEntity 49 4.4.2.2 Class diagram description for class SystemMasterConfig 50 4.4.2.3 Class diagram description for class SystemTableConfig 50 4.4.2.4 Class diagram description for class SystemTableColumnConfig …………………………………………………………………51 4.4.2.5 Class diagram description for class SystemTableForeignKeyConfig 52 4.5 Sequence Diagram…………………………………………………… 53 4.5.1 Login 53 4.5.2 Register 54 4.5.3 Generate a website from an existed database 55 4.5.4 Back-end source code generator 56 4.5.5 Front-end source code generator 57 4.5.6 Website source code generator framework 57 4.6 User interface design………………………………………………… 58 4.6.1 Project prototype 58 4.6.1.1 System - UI for the unauthenticated user 61 4.6.1.1.1 SCA_008 Homepage 62 4.6.1.1.2 SCA_017 Homepage system – Easy-Web Blog 64 4.6.1.1.3 SCA_014 Register database connection string 66 4.6.1.1.4 SCA_13 Configure tables 68 4.6.1.1.5 SCA_015 Configure Columns 69 vii 4.6.1.1.6 SCA_016 Fill out Information & Preview 70 4.6.1.1.7 SCA_005 Login page 71 4.6.1.1.8 SCA_004 Register page 72 4.6.1.1.9 SCA_003 View demo table management screen 73 4.6.1.1.10 SCA_001 Create data demo screen 75 4.7 Database Design……………………………………………………… 76 4.7.1 Database Physical Diagram 76 CHAPTER SYSTEM IMPLEMENTATION 80 5.1 Software development environment………………………………… 80 5.2 Source code management…………………………………………… 80 5.3 System Implementation……………………………………………… 81 5.3.1 Easy-Web web user interface 81 5.3.2 Website source code generates framework 81 5.3.3 User’s Generated website 82 5.4 Test Plan……………………………………………………………… 83 5.4.1 List of stages of testing 83 5.4.2 List of test types 83 5.4.3 Constraints 83 5.4.4 Plan defect 83 5.5 Test Design…………………………………………………………… 84 5.5.1 Items to be tested 84 5.5.2 Features to be tested 84 5.6 Test Case……………………………………………………………… 84 5.6.1 Test case of check login function 84 viii 5.6.2 Test case register function 85 5.6.3 Test case register database connection string 86 5.6.4 Test case config table 87 5.6.5 Test case config column 88 CHAPTER CONCLUSION 89 6.1 Conclusion…………………………………………………………… 89 6.2 Advantage…………………………………………………………… 89 6.3 Disadvantage………………………………………………………… 89 6.4 Future planning……………………………………………………… 89 REFERENCES 90 APPENDICES 91 TABLE OF TASKS 92 ix LIST OF ABBREVIATIONS Table List of Abbreviations Term Definition DB Database RQ Redis Queue API Application Programming Interface MEAN MongoDB, Express.js, Angular, NodeJS HTTP Hyper Text Transfer Protocol CMS Content Management System FE Front-end BE Back-end DBMS Database Management System CRUD Create – Read – Update - Delete IDE Integrated development environment NPM Node Package Manager VPS Virtual Private Server x LIST OF TABLES Table List of Abbreviations x Table Actor description 14 Table Use case specification 15 Table Use case uc_01 16 Table Use case uc_02 18 Table Use case uc_03 20 Table Use case uc_04 21 Table Use case uc_05 22 Table Use case uc_06 23 Table 10 Use case uc_07 24 Table 11 Use case uc_08 25 Table 12 Use case uc_09 26 Table 13 Use case uc_10 28 Table 14 Use case uc_11 29 Table 15 Use case uc_12 31 Table 16 Use case uc_13 33 Table 17 Use case uc_14 35 Table 18 Use case uc_16 37 Table 19 Component Description 41 Table 20 Description for class User 47 Table 21 Description for class BaseEntity 47 Table 22 Description for class UserDatabaseInfo 47 Table 23 Description for class WebGenetatedHistory 48 Table 24 Description for class BaseEntity 49 Table 25 Description for class SystemMasterConfig 50 Table 26 Description for class SystemTableConfig 50 Table 27 Description for class SystemTableColumnConfig 51 xi Table 28 Description for class SystemTableForeignKeyConfig 52 Table 29 Screen flow description 59 Table 30 Homepage screen description 63 Table 31 Blog screen description 65 Table 32 Table register database screen connection 66 Table 33 Configure table screen description 68 Table 34 Config columns screen 69 Table 35 Generate website step 04 screen description 70 Table 36 Demo Login page screen 71 Table 37 Demo Register UI screen description 72 Table 38 View detail UI screen description 73 Table 39 Create a new entity screen description 75 Table 40 Description for tables of Web Application 76 Table 41 Description for tables of Website generated 78 Table 42 Software development environment 80 Table 43 Test case check login 84 Table 44 Test case register function 85 Table 45 Test case register database 86 Table 46 Test case config table 87 Table 47 Test case config column 88 Table 48 Team member tasks assignment and working schedule 92 xii LIST OF FIGURES Figure 2.1 .NET Core logo Figure 2.2 Python logo Figure 2.3 Python Flask logo Figure 2.4 Microsoft SQL Server logo Figure 2.5 Redis Queue model Figure 2.6 Angular 12 10 Figure 2.7 MEAN Stack model 11 Figure 3.1 Easy-Web – use case diagram 14 Figure 3.2 Use case register account 16 Figure 3.3 Use case login 18 Figure 3.4 Use case view demo login page 19 Figure 3.5 View demo register page 20 Figure 3.6 Use case view demo page view detail 22 Figure 3.7 Use case view demo update page 23 Figure 3.8 View demo creates page create data 24 Figure 3.9 Use case view all websites generated 25 Figure 3.10 Use case download source code generated 26 Figure 3.11 Use case view all tables fetched 27 Figure 3.12 Use case change table display name 29 Figure 3.13 Use case hide table 31 Figure 3.14 Use case register database connection string 33 Figure 3.15 View all columns in the table 35 Figure 3.16 Use case hide column 37 Figure 3.17 ERD Diagram for EasyWeb Web Application 39 Figure 3.18 ERD for generating websites 40 Figure 4.1 System architecture diagram 41 Figure 4.2 Web application Back-end component diagram 42 xiii Figure 4.3 Web application Angular component diagram 43 Figure 4.4 Source code generator component diagram 44 Figure 4.5 Activity diagram for creates a website from an existed database 45 Figure 4.6 Class diagram for Web Application 46 Figure 4.7 Class diagram for web generate 49 Figure 4.8 Sequence diagram for the login function 53 Figure 4.9 Sequence diagram for generate website from an existed database 55 Figure 4.10 Sequence diagram for generate back-end of the web generated 56 Figure 4.11 Sequence diagram for generate front-end of the web generated 57 Figure 4.12 Sequence diagram for the web generator 57 Figure 4.15 Screen flow Easy-Web 58 Figure 4.16 Homepage Easy-Web screen 62 Figure 4.17 Homepage Easy-Web Blog screen 64 Figure 4.18 Register database connection string steps 01 screens 66 Figure 4.19 Generate website step 02 screen 68 Figure 4.20 Generate website step 03 screen 69 Figure 4.21 Generate website step 04 screen 70 Figure 4.22 Demo Login page screen 71 Figure 4.23 Demo Register screen 72 Figure 4.24 Demo View detail screen 73 Figure 4.25 Create a new entity screen 75 Figure 4.13 Database physical diagram for Web Application 76 Figure 4.14 Database physical diagram for a website generated 78 Figure 5.1 Generated website overview model 82 xiv Graduation Thesis AspNetUserRoles Auto-generated by ASP.NET Core Identity service Used for authentication AspNetUsers Auto-generated by ASP.NET Core Identity service Used for authentication AspNetUserTokens Auto-generated by ASP.NET Core Identity service Used for authentication _EFMigrationHistory Auto-generated by Entity Framework Core Used for database migration SystemMasterConfigs Used for the source code generator framework, will be removed when the generate phase is done SystemTableConfigs Used for the source code generator framework, will be removed when the generate phase is done SystemColumnConfigs Used for the source code generator framework, will be removed when the generate phase is done SystemForeignKeyCon Used for the source code generator framework, will be figs removed when the generate phase is done Chapter 04: System design and implementation 79 Graduation Thesis CHAPTER SYSTEM IMPLEMENTATION 5.1 Software development environment The system will divide into: Table 42 Software development environment Tools Environment Name NET Core Docker Container Python 3.6.7 Docker Container Windows 10 Ubuntu 18.04 WSL 2.0 IDE for coding Visual Studio 2019 Visual Studio Code IDE for database SQL Server 2019 Datagrip 2020 Azure data studio Source control GitHub, SourceTree Modeling tool Draw.io Other Docker For Windows Postman Google Cloud Computing Engine 5.2 Source code management All of the source code is managed by GitHub Links GitHub: • Source system Easy-Web (private repository - require access): https://github.com/sonphan18071999/KLTN-EasyWeb-System.git • CMS’s Client App Source code template (private repository - require access): https://github.com/sonphan18071999/KLTN-EasyWeb-Generator.git • CMS’s API Source code template (private repository - require access): Chapter 05: System implementation 80 Graduation Thesis hqhoangvuong/CustomerTemplateAPI (github.com) • API Source code generator (private repository - require access): https://github.com/hqhoangvuong/KLTN_CMSSrcCodeGenerator_API • Client App Source code generator (private repository - require access): https://github.com/hqhoangvuong/KLTN_CMSSrcCodeGenerator_ClientApp 5.3 System Implementation 5.3.1 Easy-Web web user interface ● The Back end: o Deployed to VPS Ubuntu 18.04 using NET Core docker container, exposed to port 80 of the VPS (vuonghuynhsolutions.tech:80) ● The Front-end: o Deployed to Heroku 5.3.2 Website source code generates framework The framework had been deployed to VPS Ubuntu 18.04 using Linux and Python Flask runtime, exposed to port 5000 of the VPS (vuonghuynhsolutions.tech:5000) Chapter 05: System implementation 81 Graduation Thesis 5.3.3 User’s Generated website Figure 5.1 Generated website overview model Easy-Web’s Source code generator framework will generate for users a fully functional website base on their provided database and settings that were done on EasyWeb’s User Web Application The generated CMS has three parts: • The API (Back-end): Powered by ASP.NET Core and RESTFUL API The API communicates with the database using a database driver The type of database driver is depending on what type of DBMS it works with • The Client App (Front-end): The Client app or Front-end powered by Angular Provide the user an environment to CRUD action on their Chapter 05: System implementation 82 Graduation Thesis database The limit of action for each table is depending on how their settings before on the Easy-Web’s User Web Interface • The API Client (Middleware): The API Client is a middleware, written by Typescript as an NPM Package It’s a part of the Client App, sit between the API (Back-end) and the Client App (Front-end), act as a bridge for these two parts to communicate together The generated CMS can be deployed via: • Automation deploys: Using the Easy-Web provided deploy tool • Manual deploys: o Back-end: Using Docker Container o Front-end: Using Apache2 or Heroku 5.4 Test Plan 5.4.1 List of stages of testing • • • • Unit test System test Acceptance test Integration test 5.4.2 List of test types • • • • Function test User interface test Data and database integrity testing Regression Testing 5.4.3 Constraints Operating system: Windows 10 Browser: Google Chrome, Microsoft Edge Chromium; using the latest version at the time of test case had been executed 5.4.4 Plan defect During the testing process, when there is an error, the tester will notify the developer immediately Chapter 05: System implementation 83 Graduation Thesis 5.5 Test Design 5.5.1 Items to be tested • Easy-Web User Web user interface 5.5.2 Features to be tested • Easy-Web User Web user interface: UI testing, Website generate testing, DBMS compatibility testing 5.6 Test Case Here are some typical test cases that have been tested: 5.6.1 Test case of check login function Prerequisites: The device must be connected to the internet Navigate to: https://easy-web-it.herokuapp.com Table 43 Test case check login Test case ID Test Description Test steps Lg_02 Login to the website but using the wrong user name On the website, enter your user name/password into the field user name and password Click the “Log in” button Lg_03 Login to the website but using the On the website, fill right user name and wrong Chapter 05: System implementation Pass / Fail Expected Expected / Not result result executed / Suspended The system As Passed showed a expected warning toast “Password and username might not correct” The system As Passed showed a expected warning 84 Graduation Thesis wrong password Lg_04 Login to the website with an empty user name or password password Click the “Log in” button On the website, fill right user name and wrong password toast “Password and username might not correct” The system As showed a expected warning toast “Password and username might not correct” Passed 5.6.2 Test case register function Table 44 Test case register function Test case ID Test Test steps Description Expected result Lg_06 Register account with an empty field Open register page Click on submit There will be a toast warning shows “Passwords must be at least characters” Lg_07 Register an account with an Fulfilled all the fields There will be a toast warning that shows “Email Chapter 05: System implementation Pass / Fail Expected / Not result executed / Suspended As Passed expected As expected Passed 85 Graduation Thesis existing account Lg_08 except infield user name with value “Sonp” Register Fulfilled all the account fields except without click check on check agreeing to the agrees to the terms and terms and conditions conditions 'sonp@gmail.com' is already taken.” There will be a toast warning that shows “User has not yet agreed to the terms and conditions” As expected Failed 5.6.3 Test case register database connection string Table 45 Test case register database Test case ID Test Description Lg_09 Register connection string without provide the right database string URL Lg_10 Register connection string without providing port number Test steps Expected result There will be a toast Fulfilled all the fields warning in the database except that field a random database shows connection string “URL can't be empty!” There Open register will be a database page toast Fill in the database’s warning URL: shown Open register database page Chapter 05: System implementation Expectd result As expected As expected Pass / Fail / Not executed / Suspende d Passed Passed 86 Graduation Thesis “vuonghuynhsolutions.t ech” Fill in user name: “sonp” Fill in password: “sonphan” Fill in the schema: “QuanLyQuanCafe” Click on submit button Lg_11 Register connection string with empty field Open register database page Fulfilled all the fields in the database except the field port number There will As be a toast expected warning , that shows “URL can't be empty!” Passed 5.6.4 Test case config table Table 46 Test case config table Test case ID Lg_12 Test description Hide table without select row Test steps Click on page step config table Click on the button “Hide” Chapter 05: System implementation Pass / Fail Expected Expected / Not result result executed / Suspended There will As Passed be a warning expected, toast message shown “You haven’t 87 Graduation Thesis selected any table yet” 5.6.5 Test case config column Table 47 Test case config column Test case ID Lg_13 Test description Test steps Hide column Click on with column is page step nullable true config column Click choose on the column Click the button hide Chapter 05: System implementation Expected result Expected result There will be a warning toast message shown “You haven’t select any table yet” As expected Pass / Fail / Not executed / Suspended Passed 88 Graduation Thesis CHAPTER 6.1 CONCLUSION Conclusion After done the testing and statistical above, we have done nearly 97% of the original objective Our website can generate a fully functional website for the user based on their existed database and settings Currently, we support three DBMS (Microsoft SQL Server, MySQL, and PostgreSQL) that can work with Easy-Web 6.2 Advantage • • • • • • Use on-the-shelf technology and framework to build a website Easy to use, the Easy-Web user web interface is user-friendly, clear, and modern Support different types of DBMS Website generated using two presentation layers, communicate by REST API The generated code has a modern structure, easy to read, modify, and maintenance Highly reusable and customization with the introduction of the API Client 6.3 Disadvantage • Only support NET Identity Service for authentication and authorization of the generated CMS • Users must provide system both read/write permission on their database • Only two CMS templates for the user (Bootstrap Light & Dark themes) • Only support generate the whole website from the database, not allow generate for a specific table 6.4 Future planning • • • • Add user-defined authorization Support more DBMS & require only read permission on the user’s database Add more website templates Support generating specific components for each table Chapter 06: Conclusion 89 Graduation Thesis REFERENCES [1] Microsoft (2020) ASP.NET.Core Retrieved from https://dotnet.microsoft.com/learn/aspnet/what-is-aspnet-core (Last access 07/11/2021) [2] What is Python? Executive Summary Retrieved from What is Python? Executive Summary | Python.org (Last access 07/11/2021) [3] Python Advantages and Disadvantages – Step in the right direction Retrieved from Python Advantages and Disadvantages - Step in the right direction - TechVidvan (Last access 07/11/2021) [4] Introduction to Micro Web Framework Flask Retrieved from https://medium.com/featurepreneur/introduction-to-micro-web-framework-flask78de9289270b (Last access 07/11/2021) [5] Flask – Devopedia Retrieved from Flask (devopedia.org) (Last access 07/11/2021) [6] Flask Python Development Services Bangalore Retrieved from Flask Python Development Services Bangalore | GoodWorkLabs (Last access 07/11/2021) [7] What is SQL Server? Retrieved from What is SQL Server? - Tech Monitor (Last access 07/11/2021) [8] Microsoft SQL Server Support in MicroStrategy Retrieved from Microsoft SQL Server Support in MicroStrategy (Last access 07/11/2021) [9] Use Redis Queue for Asynchronous Tasks in a Flask App Retrieved from medium.com (Last access 07/11/2021) References 90 Graduation Thesis APPENDICES GRADUATION PROJECT ASSIGNMENT i GRADUATION PROJECT ASSIGNMENT ii PRE-DEFENSE EVALUATION SHEET iii FOREWORD Error! Bookmark not defined ACKNOWLEDGEMENTS Error! Bookmark not defined TABLE OF CONTENTS v LIST OF ABBREVIATIONS x LIST OF TABLES xi LIST OF FIGURES xiii Appendices 91 Graduation Thesis TABLE OF TASKS Table 48 Team member tasks assignment and working schedule Son Phan Tasks Related product survey Vuong Huynh Actual start date Actual end date 03/15/2021 03/21/2021 x 03/15/2021 03/21/2021 x 03/22/2021 03/28/2021 x Research using Entity Framework reverse engine tool Learn the business of CMS generate x Learn about Angular Framework x 03/29/2021 03/31/2021 Design prototype x 04/01/2021 04/07/2021 System Design Use Case Diagram x x 04/01/2021 04/11/2021 Architecture Diagram x x 04/01/2021 04/11/2021 04/12/2021 04/18/2021 04/12/2021 04/13/2021 04/18/2021 05/05/2021 Sequence Diagram x Database Diagram x Coding the Easy-Web’s User web user interface x Coding the Easy-Web’s User web API x 04/14/2021 04/22/2021 Research and design Generate framework x 04/23/2021 04/25/2021 Code the API Generate framework x 04/26/2021 05/02/2021 Research and design the user’s CMS Client App (Front - End) source code generate framework x 05/03/2021 05/27/2021 Table of Tasks the API 92 Graduation Thesis Design and code the Client App template for the user’s CMS Client App (Front - End) source code generate framework Coding for the user’s CMS Client App (Front - End) source code generate framework x x x 05/28/2021 06/05/2021 06/06/2021 06/23/2021 Combine two code generators to one, coding the queue and API endpoint for the CMS Source code generator framework x 06/05/2021 06/23/2021 Integrate the CMS Source code generator framework with the EasyWeb’s User Web user interface x 06/24/2021 06/27/2021 Test the whole system x x 06/28/2021 07/03/2021 Report Word File x x 07/04/2021 07/20/2021 File Power Point x x 07/04/2021 07/20/2021 Table of Tasks 93 ... & FE Based on the source code of the generated website, it will have functions of a website based on the tables in the user's database, they can download and use it or customize the code inside... successful website, the system will save the history of their created websites In case the user wants to review the website, information is created Goal: Users can re-download the source code of the website... Action System Response From the homepage of EasyWeb, users click on the The system will navigate the user “Discovery” button on the to the login page header User clicks on the button “Login” The