Specialized project 1 report building a cross platform application for delf french exam practice

VIETNAM – KOREA UNIVERSITY OF INFORMATION AND COMMUNICATION TECHNOLOGY Faculty Of Computer Science SPECIALIZED PROJECT REPORT BUILDING A CROSS-PLATFORM APPLICATION FOR DELF FRENCH EXAM PRACTICE Students: Lê Phú Quốc Phạm Toàn Phúc Class: 20GIT Instructor: Assoc Prof PhD Nguyễn Thanh Bình VIETNAM – KOREA UNIVERSITY OF INFORMATION AND COMMUNICATION TECHNOLOGY Faculty Of Computer Science SPECIALIZED PROJECT REPORT BUILDING A CROSS-PLATFORM APPLICATION FOR DELF FRENCH EXAM PRACTICE Students: Lê Phú Quốc Id: 20IT709 Phạm Toàn Phúc Id: 20IT523 Instructor: Assoc Prof PhD Nguyễn Thanh Bình Danang, May 2023 COMMENTS Instructor Assoc Prof PhD Nguyễn Thanh Bình THANK YOU To complete this project successfully, we have received the support and help of teachers and friends With deep and sincere affection, allow us to express our deep gratitude to all teachers and friends who have facilitated and helped in the process of studying and researching the topic First of all, we would like to send to the teachers of Vietnam - Korea University of Information and Communication Technology with respectful greetings, best wishes for health and deep thanks With the attention, teaching, and attentive guidance of the teachers, so far we have been able to complete the project, topic: "Building a crossplatform application for DELF French exam practice" In particular, we would like to express our sincerest thanks to our teacher – Assoc Prof PhD Nguyen Thanh Binh has been interested in helping and guiding us to successfully complete this project in the past time We would like to express our gratitude to the leaders of Vietnam - Korea University of Information and Communication Technology, faculties, departments and functional departments for directly and indirectly helping us while studying and researching the topic With limited time and experience, it is impossible to avoid shortcomings in the process We look forward to receiving the guidance and suggestions of teachers so that we can improve as well as draw experiences to better complete the upcoming project We sincerely thank you! Students, Lê Phú Quốc Phạm Toàn Phúc CONTENTS LIST OF ACRONYMS vii LIST OF FIGURES viii LIST OF TABLES ix PREAMBLE 1 Introduction .1 Objectives of the project Implementation contents 3.1 Building application interface 3.2 Building application functionality Report structure .2 Chapter OVERVIEW Technologies, programming languages used 1.1 JavaScript programming language 1.2 Framework React Native 1.3 Express Framework 1.5 MongoDB .6 1.6 Redux .7 1.7 Axios .8 Tools and software used 2.1 Visual Studio Code 2.2 WebStorm .10 2.3 Postman 10 2.4 Github 12 2.5 Render 12 End of Chapter 13 Chapter SYSTEM ANALYSIS AND DESIGN 14 Introduction to DELF Practice 14 System analysis .14 2.1 Functional requirements .14 2.2 Non-functional requirements 14 2.4 UseCase diagram 15 2.5 UseCase specification 16 2.6 Activity Diagram 22 Chapter IMPLEMENTATION 25 Database design .25 1.1 ERD 25 1.2 Database .25 System design 30 2.2 Interface overview 30 2.3 Interface design 30 CONCLUSION 37 Achievement 37 Development direction 37 REFERENCES i LIST OF ACRONYM Y LIST OF FIGURES Figure General UC diagram .15 Figure 2 Login Activity .22 Figure Create Exam Activity 23 Figure Submit Exam Activity 23 Figure Play Vocabulary Game 24 Figure ERD 25 Figure Users Collection 25 Figure 3 Examination Collection 26 Figure Question Collection 26 Figure Result Collection 27 Figure Answer Collection 27 Figure Exercise Collection .28 Figure Vocabulary Collection 28 Figure Grammar Collection .29 Figure 10 Favorite Collection .29 Figure 11 Login interface 30 Figure 12 Registration interface 31 Figure 13 Forgot password interface .31 Figure 14 Change password interface 32 Figure 15 Home interface 32 Figure 16 Vocabulary interface 33 Figure 17 Game interface 33 Figure 20 Detailed answer interface 35 Figure 21 Personal information interface 36 Figure 22 Result interface 36 LIST OF TABLES Table UC Login 16 Table 2 UC Registration .16 Table UC Forgot password 16 Table UC View vocabulary list 17 Table UC View grammars list 17 Table UC View examination list 17 Table UC Take examinations .18 Table UC Search vocabularies 18 Table UC Download documents 18 Table 10 UC Setup reminder 19 Table 11 UC Manage favorite vocabularies 19 Table 12 UC Manage examinations .19 Table 13 UC Manage users 20 Table 14 UC Manage vocabularies 20 Table 15 UC Manage grammars 21 Table 16 UC Statistic 21 PREAMBLE Introduction In recent years, the continuous development of Information Technology in general and smartphone devices in particular has brought about significant changes in life Taking advantage of the internet and smartphone environment, the current development trend is to build highly shareable applications that operate regardless of geographical location as well as operating system, facilitating people to exchange, search for information and learn easily and conveniently Exam preparation application is one of the typical applications The application will support accessing tests and managing learning progress quickly, effectively, saving money and time Helping users to study and take mock exams without having to go to teaching centers For the above reasons, we decided to carry out the topic "Building a cross-platform application for DELF French exam practice" Objectives of the project - - Building the basic functions of a DELF French exam practice application The application is self-compatible, displayable on all current devices and can be upgraded in the future Beautiful application interface, attracting users Statistical management Applying React Native, Express frameworks, VS Code, WebStorm tools to build applications Applying Redux structure to manage the state of the application more scientifically and efficiently Applying Axios library to call API Applying Node.js Express to build Restful API Implementation contents 3.1 Building application interface a User side - Login, registration interface Personal information interface Home interface Exam list interface Exam interface Detailed answer interface Exam results interface Vocabulary list interface Detailed vocabulary interface Grammar list interface Detailed grammar interface Game interface Favorite vocabulary interface Administrator side Setting interface b Administrator side - User management interface Vocabulary management interface 33 2.6.4 Play Vocabulary Game Figure Play Vocabulary Game 33 Chapter IMPLEMENTATION Database design 1.1 ERD Figure ERD 1.2 Database 1.2.1 Users Collection Figure Users Collection 33 1.2.2 Examination Collection Figure 3 Examination Collection 1.2.3 Question Collection Figure Question Collection 33 1.2.4 Result Collection Figure Result Collection 1.2.5 Answer Collection Figure Answer Collection 33 1.2.6 Exercise Collection Figure Exercise Collection 1.2.7 Vocabulary Collection Figure Vocabulary Collection 33 1.2.8 Grammar Collection Figure Grammar Collection 1.2.9 Favorite Collection Figure 10 Favorite Collection 33 System design 2.2 Interface overview The interface is designed to suit the user's needs The functions are displayed in the menu to help users quickly manipulate between pages The content of the exam is close to the content that students have learned, helping students to familiarize themselves with the exam questions before the official exam The website has the function of automatically calculating the user's score when they complete their test and the test score is saved in the database 2.3 Interface design 2.3.1 Login interface Figure 11 Login interface 33 2.3.2 Registration interface Figure 12 Registration interface 2.3.3 Forgot password interface Figure 13 Forgot password interface 33 2.3.4 Change password interface Figure 14 Change password interface 2.3.5 Home interface Figure 15 Home interface 33 2.3.6 Vocabulary interface Figure 16 Vocabulary interface 2.3.7 Game interface Figure 17 Game interface 33 2.3.8 Examination interface Figure 18 Examination interface 33 2.3.9 Examination list interface Figure 19 Examination list interface 2.3.10 Detailed answer interface Figure 18 Detailed answer interface 33 2.3.11 Personal information interface Figure 19 Personal information interface 2.3.12 Result interface Figure 20 Result interface 33 CONCLUSION After a period of serious and effective study and practice, up to now, the topic "BUILDING A CROSS-PLATFORM APPLICATION FOR DELF FRENCH EXAM PRACTICE" has been basically completed according to the requirements of the content and the set time In the process of researching and implementing the topic with high determination, but due to limited experience and knowledge, the topic will inevitably have shortcomings We look forward to receiving your comments and suggestions to improve the topic Achievement Based on the study of cross-platform application programming languages and frameworks, together with the guidance of Associate Professor, Dr Nguyen Thanh Binh and other lecturers of the Faculty of Computer Science, Vietnam - Korea University of Information and Communcation Technology, we have successfully built the topic " BUILDING A CROSS-PLATFORM APPLICATION FOR DELF FRENCH EXAM PRACTICE" The application fully meets the requirements set forth During the implementation of the project, the team has learned and applied many technologies and techniques: Reat Native, Redux, Node.js, Express.JS MongoDB, Firebase, AWS, Development direction With the limitations and shortcomings mentioned above, the research direction of the thesis is expected as follows: - Learn some more advanced functions required for the software - Exploit more available resources to make the software more complete and diverse 33 REFERENCES [1] [2] Maximilian Schwarzmüller (2022) React Native – The Practice Guide Jonas Schmedtmann (2022) Node.js, Express, MongoDB & More: The Complete Bootcamp