Introduction
Recent advances in Information Technology and smartphones have significantly transformed our daily lives by enabling the creation of highly shareable, cross-platform applications that operate seamlessly across different locations and operating systems These applications facilitate effortless information exchange, learning, and quick access to resources, making education more convenient and efficient For example, exam preparation apps allow users to access practice tests, manage their learning progress, and prepare for exams such as DELF French, all without the need to visit physical classrooms or coaching centers Motivated by these benefits, we are focusing on developing a cross-platform application aimed at helping learners practice and prepare effectively for the DELF French exam.
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.
- 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
Building application interface
Building application functionality
a User side i) On Android, iOS devices
- Login, register, change password, retrive password
- View, update, delete personal information
- Create, update, delete personal exam
- View detailed answers, results of the exam done
- Download the exam, vocabulary, grammar to your devices
- View, create, update, delete favorite vocabulary
- Set up learning reminder notification ii) On website
- View, create, update, delete personal exam b Administrator side i) On website
- View, create, update, delete user
- View, create, update, delete vocabulary
- View, create, update, delete grammar
- View, create, update, delete exam
Report structure
After Introduction, the report is presented in 3 chapters, specifically as follows:
In this chapter, the report presents the concepts, characteristics, tools and technologies that will be used to implement the project.
- Chapter 2 System analysis and design
The content of the chapter includes the following parts: System analysis, presentation system design They present the stages to analyze, design and build a management system for the topic.
The content presents the results of the process of implementing and developing.Finally, there are Conclusions, References and Appendices related to the project
OVERVIEW
Technologies, programming languages used
JavaScript is a versatile, cross-platform, object-oriented scripting language essential for creating interactive webpages with features like animations, clickable buttons, and popup menus Beyond client-side use, advanced server-side JavaScript frameworks like Node.js enable developers to add powerful functionalities such as real-time collaboration between multiple computers When executed within a host environment like a web browser, JavaScript interacts with environment objects to provide seamless programmatic control, enhancing user experience and website functionality.
JavaScript features a standard library of objects like Array, Date, and Math, along with essential language elements such as operators, control structures, and statements This core JavaScript can be extended for diverse purposes by adding supplementary objects, enhancing its capabilities for various development needs.
Client-side JavaScript enhances the core language by providing objects that enable developers to control a browser and manipulate the Document Object Model (DOM) This extension allows applications to dynamically add elements to HTML forms and handle user interactions such as mouse clicks, form inputs, and page navigation, enriching the user experience and enabling interactive web pages.
Server-side JavaScript enhances the core language by providing objects essential for server operations, such as enabling applications to communicate with databases, maintain data continuity across multiple executions, and perform file manipulations on the server This extension of JavaScript is crucial for building dynamic, data-driven server applications that require persistent data management and server-side processing.
JavaScript enables dynamic webpage modification by allowing changes to the Document Object Model (DOM) directly within the browser, enhancing user experience Additionally, with Node.js, JavaScript can efficiently handle server-side requests, responding to customized inputs sent from client-side code The advantages of using JavaScript in both client and server environments include real-time interactivity, improved performance, and streamlined development processes, making it a versatile tool for modern web development.
- Regardless of where you host JavaScript, it always gets executed on the client environment to save lots of bandwidth and make the execution process fast.
In JavaScript, the XMLHttpRequest object, originally designed by Microsoft, plays a crucial role in making asynchronous HTTP requests It enables seamless data transfer between the client and server without requiring a page reload, enhancing the responsiveness and user experience of web applications.
- The biggest advantage of JavaScript is having the ability to support all modern browsers and produce an equivalent result.
- Global companies support community development by creating projects that are important An example is Google (created the Angular framework) or Facebook (created the React.js framework).
- JavaScript is employed everywhere on the web.
- JavaScript plays nicely with other languages and may be utilized in an enormous sort of applications.
- There are many open-source projects that provide useful help for developers to add JavaScript.
- There are many available courses within the field of JavaScript, because of which you’ll quickly and simply expand your knowledge of this programming language.
- It is not difficult to start working in JavaScript For this reason, many of us prefer to start our adventure in the IT sector by learning this language.
- It gives the power to make rich interfaces.
- There are some ways to use JavaScript through Node.js servers It is possible to develop a whole JavaScript app from front to back using only JavaScript. c Disadvantages
- This may be difficult to develop large applications, although you’ll also use the TypeScript overlay.
Setting up a development environment for large front-end projects can be a complex and time-consuming task due to the numerous tools involved Proper configuration is essential to ensure smooth integration and optimal performance of the project Additionally, the setup process is closely linked to the functionality and operation of the chosen libraries and frameworks, making it crucial for developers to carefully manage their configuration to streamline development workflows.
- The main problem or disadvantage in JavaScript is that the code is always visible to everyone anyone can view JavaScript code.
- No matter what proportion fast JavaScript interprets, JavaScript DOM (Document Object Model) is slow and can be a never-fast rendering with HTML.
- If the error occurs in JavaScript, it can stop rendering the whole website. Browsers are extremely tolerant of JavaScript errors.
- JavaScript is usually interpreted differently by different browsers This makes it somewhat complex to read and write cross-browser code
- Though some HTML editors support debugging, it’s not as efficient as other editors like C/C++ editors Hence it is difficult for the developer to detect the matter.
- This continuous conversion takes longer than the conversion of a number to an integer This increases the time needed to run the script and reduces its speed.
React Native, developed by Facebook, is a powerful framework designed for cross-platform mobile app development It enables developers to build mobile applications for both Android and iOS using JavaScript, streamlining the development process and ensuring consistent performance across devices React Native's principal operation involves leveraging JavaScript to create native-like mobile apps, allowing for efficient and scalable development for multiple platforms.
React Native works by integrating 2 threads, Main Thread and JS Thread for mobile applications In there:
- Main Thread: updates the user interface and handles user interaction
- JS Thread: executes and processes JavaScript code.
The Main Thread and JS Thread operate independently, ensuring efficient performance They communicate seamlessly through a Bridge, which facilitates data transfer between the two threads This architecture offers significant advantages, including improved responsiveness and smoother user experiences by enabling concurrent processing and reducing bottlenecks.
- Code Reusable: React Native allows developers to reuse 80-90% of their code while developing cross-platform apps This advantage helps users:
+ Save time and reduce the development cost of an application
+ Make better use of human resources
+ Maintain less code, less bugs
+ The features in both platforms are similar
React Native is one of the most loved frameworks, according to the 2019 Stack Overflow survey, thanks to its large and active user community worldwide This extensive community provides valuable support and resources, ensuring developers can find help quickly when facing bugs or challenges during development.
- Stability and Optimization: Developed by Facebook, React Native has quite high stable performance:
+ The application development team is not too large
+ Build apps with the least native code for different operating systems
+ Better user experience when compared to Hybrids app e Disadvantages
- Performance is worse than Native Ap
Security concerns arise from the widespread use of JavaScript, which can introduce vulnerabilities and compromise safety Additionally, JavaScript's characteristics, such as being easy to make mistakes, can negatively impact security and lead to potential exploits The complexity and frequent errors associated with JavaScript also make maintaining and securing applications more challenging over time.
- Customization is not really good in some modules
- Not suitable for applications that need high computing power (hash, crypto, etc)
Express is a lightweight framework built on top of Node.js, designed to simplify server-side development by providing streamlined APIs and enhanced features It enables developers to organize application logic efficiently through middleware and routing, making code more maintainable Additionally, Express offers useful utilities that extend Node.js’s HTTP objects and supports dynamic rendering of web pages, making it an essential tool for building scalable web applications with Node.js.
Express is a part of MEAN stack, a full stack JavaScript solution used in building fast, robust, and maintainable production web applications.
- It is fast and lightweight.
- It is easy to learn and use.
- It has a large community of developers.
- It has a simple and flexible routing system. c Disadvantages
- It can be difficult to debug.
- It can be difficult to maintain large codebases.
- It can be difficult to integrate with other frameworks.
MongoDB is an open-source, non-relational database management system (DBMS) that utilizes flexible document data models instead of traditional tables and rows As a prominent NoSQL solution, MongoDB eliminates the need for a relational database management system (RDBMS), offering an elastic data storage model that simplifies the process of storing and querying diverse data types This flexibility enhances database management for developers while creating a highly scalable environment ideal for cross-platform applications and services.
MongoDB documents and collections are the fundamental units of data, formatted as Binary JSON (JavaScript Object Notation), allowing them to store diverse data types and be distributed across multiple systems With MongoDB's dynamic schema design, users benefit from unmatched flexibility in creating data records, performing complex queries through aggregation, and analyzing large datasets efficiently This makes MongoDB a powerful NoSQL database solution for scalable and flexible data management.
MongoDB has established itself as a reliable and scalable NoSQL database solution trusted by many businesses Beyond being a traditional document-based database, it offers advanced features that differentiate it from other database management systems (DBMS) Its powerful capabilities make it an ideal choice for organizations seeking a flexible and high-performance data management platform.
- Data size in MongoDB is typically higher due to e.g each document has field names stored it
- Less flexibity with querying (e.g no JOINs)
- No support for transactions - certain atomic operations are supported, at a single document level
Tools and software used
Visual Studio Code, developed by Microsoft, is a free, versatile programming code editor available for Windows, Linux, and macOS It seamlessly combines the functionalities of an integrated development environment (IDE) and a lightweight code editor, making it an ideal choice for developers across different platforms.
Visual Studio Code is a powerful code editor that supports debugging, integrated Git version control, syntax highlighting, smart code completion, snippets, and various code enhancements to boost developer productivity Its highly customizable interface allows users to personalize themes, keyboard shortcuts, and other settings, making it a flexible tool tailored to individual workflows.
Visual Studio Code has many features like:
- Support many programming languages: VS Code supports many programming languages such as C/C++, C#, F#, Visual Basic, HTML, CSS, JavaScript, etc.
- Cross-platform support: Coders are usually only used for Windows or Linux or Mac Systems But VS Code can work well on all three platforms above.
Visual Studio offers a comprehensive repository of extensions, enabling developers to use additional programming languages not natively supported by the IDE These extensions allow for expanded functionality without compromising the software's performance, ensuring a seamless and efficient development experience.
- Secure Repository: With Visual Studio Code, users can have complete peace of mind as it easily connects to Git or any existing repositories.
- Web Support: Visual Studio Code supports many web applications In addition, it also has an editor and website designer.
- Hierarchical data storage: Most code archive files are located in similar folders.
- Support for writing Code: VS Code will suggest to programmers options if any.
- Terminal support: Visual Studio Code has terminal integration, which saves users from having to switch between two screens or return to the root directory when performing operations.
- Multitasking screen: Visual Studio Code users can open multiple files and folders at the same time – even though they are not related to each other.
IntelliSense is a powerful feature included in most coding environments, but Visual Studio Code (VS Code) provides one of the most professional implementations It enhances productivity by detecting incomplete code and offering real-time prompts Even if programmers forget to declare variables or miss syntax, IntelliSense automatically assists by suggesting and adding the missing elements, ensuring smoother and error-free coding.
- Git Support: Visual Studio Code supports pulling or copying code directly from GitHub This code can then be changed and saved on the software.
- Comments: Leaving comments makes it easy for users to remember what needs to be done.
WebStorm software is a professional JavaScript IDE solution that supports advanced features for JavaScript, HTML and CSS programming languages, providing a complete experience for web programming and development.
WebStorm is an advanced code editor that offers deep understanding of JavaScript, HTML, and CSS, making it an essential tool for efficient web development It excels in developing Node.js applications with built-in testing, debugging, and code analysis features Additionally, WebStorm seamlessly integrates with various version control systems (VCS), enhancing collaboration and project management Overall, WebStorm combines intelligent coding assistance with powerful development tools, streamlining the web development process.
WebStorm has many features like:
- Smart JavaScript, HTML, and CSS editor with code completion, format configuration, powerful redirects, refactoring, and on-the-fly error detection.
- Support for a wide range of technologies: TypeScript (including a built in compiler) CoffeeScript, Dart, Less, Sass, AngularJS, Angular 2, React, Flow, Meteor and many more.
Discover the powerful JavaScript debugger integrated directly into the Google Chrome IDE, allowing seamless debugging without switching between the editor and browser This object-defined debugger is specifically designed for use within the browser environment, streamlining the development process Built-in to the IDE, it offers developers an efficient way to identify and resolve code issues quickly, enhancing productivity and ensuring a smoother workflow for JavaScript debugging.
- Powerful Node.js debugger for debugging applications running locally or remotely.
- Integrate with build tools and execute tasks like Gulp, Grunt, and NPM scripts.
- Smart code checker, one-click quick hints and integration with ESLint, JSHint, JSLint, TSLint and JSCS.
- Unit testing in JavaScript with built-in Karma test run with code coverage and support for the Mocha testing framework.
- Enhance Live Edit productivity without reloading the page.
- Integrated HTTP Server, REST Client and Terminal.
- Integrates with version control systems including Git, Subversion, Mercurial, CVS, Perforce, and GitHub.
- Integration with various issue trackers.
Exposing system resources via a RESTful API offers a flexible and standardized way to provide diverse applications with data Testing and interacting with these APIs can be time-consuming when done through code, but Postman simplifies this process by allowing users to manipulate REST APIs effortlessly As one of the most popular API testing tools, Postman enables developers to call REST APIs without writing any code, streamlining the testing workflow.
Postman supports all HTTP methods (GET, POST, PUT, PATCH, DELETE, ). Besides, it also allows to save the history of requests, very convenient for reuse when needed. b Features
Postman features are as follows:
Postman utilizes Collections to help users organize their API calls efficiently Each collection can include subfolders containing multiple requests, making it easy to structure and manage comprehensive test suites This hierarchical organization feature significantly enhances workflow efficiency and simplifies API testing processes.
Postman allows users to easily share API workflows by importing and exporting Collections and environments, simplifying collaboration Additionally, direct sharing links can be utilized to distribute Collections quickly and efficiently, enhancing seamless team collaboration and version control.
- Postman has the ability to test HTTP response status.
- Debugging support: Postman's console can help you inspect exported data. From there, the debugging process will become easier and more flexible.
- Test creation support: Test checkpoints and determine the status of a successful HTTP response And validation roles can be added to each API call to ensure test coverage.
- Through the process of using collections and newman will make sure the tests will run in the iterations From there, save time on potentially repetitive tests.
- Continuous Integration: Postman is capable of supporting continuous integration for development operations and can be maintained
GitHub is a leading platform that hosts Git source code repositories, enabling developers to collaborate on software projects effectively In addition to core Git functionalities, GitHub offers social features such as issue tracking, pull requests, and a vibrant community for developers to share knowledge and interact As a popular service in the software development ecosystem, GitHub enhances project management and teamwork through its integrated tools and user-friendly interface.
- A tool to help manage source code organized in the form of distributed data.
- Help synchronize the team's source code to 1 server.
- Support manipulating source code checking during work. b Term
- Gitignore: This can be considered as the default file of git, used to remove unnecessary folders or files.
- Diff: Using diff will help compare the difference between multiple versions.
- Remote: Apply remote to help control branches from the repository faster and more efficiently on git servers.
- Tag: This is Github's best way to use and mark commits.
- Repository: Is a good data management repository of Github, helping to store many different types of project source code, and store data components in an extremely efficient way.
Folk allows users to copy a repository from another owner to their own Git account, effectively creating a personal version of the project This operation enables you to use the repository as if it were your own, facilitating seamless customization and collaboration By replicating repositories through Folk, developers can efficiently manage and build upon existing projects within their Git environment.
Cloning is a fundamental action in version control systems like Git, GitHub, GitLab, and Bitbucket, where "clone" refers to creating a copy of a repository or project By cloning repositories, developers can replicate specific commits, enabling seamless collaboration and ongoing development Cloning repositories at desired points in their history allows for flexible workflows and efficient project management This process is essential for maintaining consistent codebases and supporting collaborative software development.
- Commit: This is a point on the work tree, or what we call the work tree, which is extremely familiar to programmers.
- Branch: Also known as branches They clearly show the division of versions when these versions all have certain differences.
- Git: Also known as prefix of commands when needed to be used under CLI.
Render is a powerful platform that allows users to host apps, websites, and web services seamlessly By linking a GitHub or GitLab repository and clicking "Create Web Service," Render automatically builds and deploys the service with each push, ensuring continuous updates The platform offers native support for popular programming languages such as Node.js, Python, Ruby, Elixir, Go, and Rust, making it versatile for various development needs Additionally, Render can build and deploy any application that includes a Dockerfile, providing flexibility for containerized projects.
Some features and benefits of hosting Web Services on Render, as described by the vendor:
- Free and fully-managed TLS certificates
End of Chapter 1
Understanding the key knowledge, tools, and technologies involved in project implementation is essential for effectively designing the system This foundational understanding supports the transition to the next phase—System Design Analysis—which will be detailed in the following chapter.
SYSTEM ANALYSIS AND DESIGN
Introduction to DELF Practice
"DELF Practice is a convenient app that allows users to access DELF test materials and track their learning progress easily and efficiently It enables students to prepare for exams and take mock tests anytime, anywhere, saving both time and money by eliminating the need for attending traditional classes This innovative platform supports self-study for DELF exam preparation, making it a cost-effective solution for learners seeking to improve their French language skills and succeed in DELF exams."
System analysis
Based on a thorough analysis of the online training application's features and requirements, we have identified the essential functional features for DELF Practice Designed to serve both users and administrators, the DELF Practice application is tailored to facilitate efficient language learning and management, ensuring a seamless experience for learners while providing comprehensive administrative controls.
Login, register, change password, retrieve password
View, update, delete personal information
Create, update, delete personal exam
View detailed answers, results of the exam done
Download the exam, vocabulary, grammar to your devices
View, create, update, delete favorite vocabulary
Set up learning reminder notification
View, create, update, delete user
View, create, update, delete vocabulary
View, create, update, delete grammar
View, create, update, delete exam
- The application interface is easy to interact, easy to use
- The system can run on internet-connected devices and operating systems
- The system operates 24/7, 24/24 including holidays
- The application must be well optimized, operate smoothly, without lag, and do not consume too much of the device's resources.
Description - Allow guest to log into the system
Basic flow - The screen shows a button to sign in with a Google account or enter an account and password
- The user presses the login button and selects the account to log in to the system
- The system authenticates the user, if valid, allows the user to enter the system, otherwise requires the user to log in again
Description - Allow guest to registration the account
Basic flow - The screen shows a button to sign up to enter an email and password
- The user presses the sign up button to sign up
- The system authenticates the user, if valid, allows the user to sign up, otherwise requires the user to sign up again
Description - Allow guest to reset the password
Basic flow - The screen shows a button to get code to email
- The system send a mail to email of user, allows the user to reset password
Description - UC allows the user to view the list of vocabularies Precondition - User has logged into the system
Basic flow - The system displays the vocabularies owned by the user
- User selects vocabulary to view the detailed vocabulary
- User selects favorite button to add the vocabulary to favorite vocabularies
Table 2 4 UC View vocabulary list
Description - UC allows the user to view the list of grammars Precondition - User has logged into the system
Basic flow - The system displays the grammars owned by the user
- User selects grammar to view the detailed grammar
Table 2 5 UC View grammars list
Description - UC allows the user to view the list of examinations Precondition - User has logged into the system
- The system displays the examinations owned by the user
- User selects examination to take the exam
Table 2 6 UC View examination list
Description - UC allows users to take exams
Precondition - User has logged into the system
Basic flow - User selects examination to take the exam
- The system will display all questions of the test (listening, speaking, reading, writing)
- Users click submit to view the results
Description - UC allows users to search vocabularies
Precondition - User has logged into the system
Basic flow - User enter vocabulary to search information
- The system will display vocabulary information (pronounciation, meaning, examples)
- User selects favorite button to add the vocabulary to favorite vocabularies
Description - UC allows the user to download examinations, vocabularies, grammars Precondition - User has logged into the system
Basic flow - User selects download button to download examinations, vocabularies, grammars
Description - UC allows user to setup study reminders
Precondition - User has logged into the system
Basic Flow - The system displays the configuration reminder
- User perform new creation and reminder updates
- The system study announces to the mobile device screen
Description - UC allows user to manage (view, add, edit, delete) favorite vocabularies Precondition - User has logged into the system
Basic Flow - The system displays the favorite vocabularies
- User perform new creation and exam updates
- The system periodically announces favorite vocabulary to the mobile device screen
Table 2 11 UC Manage favorite vocabularies
Description - UC allows administrators to manage (view, add, edit, delete) exams Precondition - User has logged into the system
Basic flow - The system displays the exams
- Administrators perform new creation and exam updates
- The system authenticates users and data before performing actions
Sub flow - The system will display a message when the data provided is incorrect
- After performing the actions, the system will update the new changes on the UI side
Description - UC allows administrators to manage (view, add, edit, delete) users Precondition - User has logged into the system
Basic flow - The system displays the users
- Administrators perform new creation and user updates
- The system authenticates users and data before performing actions
Sub flow - The system will display a message when the data provided is incorrect
- After performing the actions, the system will update the new changes on the UI side
Description - UC allows administrators to manage (view, add, edit, delete) vocabularies Precondition - User has logged into the system
Basic flow - The system displays the vocabularies
- Administrators perform new creation and user updates
- The system authenticates users and data before performing actions
Sub flow - The system will display a message when the data provided is incorrect
- After performing the actions, the system will update the new changes on the UI side
Description - UC allows administrators to manage (view, add, edit, delete) grammars Precondition - User has logged into the system
Basic flow - The system displays the grammars
- Administrators perform new creation and user updates
- The system authenticates users and data before performing actions
Sub flow - The system will display a message when the data provided is incorrect
- After performing the actions, the system will update the new changes on the UI side
Description - UC allows administrators to statistic
Precondition - User has logged into the system
Basic flow - The system displays the statistic
IMPLEMENTATION
Database design
System design
The user-friendly interface is designed to meet users' needs, with a clearly displayed menu that allows quick navigation between pages The exam content closely aligns with students' learning material, helping them familiarize themselves with potential questions before the official test Additionally, the website features an automatic scoring system that calculates and saves users' test scores in the database upon completion, ensuring accurate and efficient results management.
After a period of serious and effective study and practice, up to now, the topic
We have nearly completed the development of a cross-platform application designed to help users prepare for the DELF French exam, adhering to project requirements and deadlines Throughout the research and implementation process, we approached the project with strong determination, despite recognizing our limited experience and knowledge, which may have led to certain shortcomings We welcome your valuable feedback and suggestions to enhance and improve the application.
Achievement
Under the guidance of Associate Professor Dr Nguyen Thanh Binh and faculty members at the Faculty of Computer Science, Vietnam-Korea University of Information and Communication Technology, our team successfully developed a cross-platform application for DELF French exam practice The application fully meets project requirements, showcasing our proficiency in technologies such as React Native, Redux, Node.js, Express.js, MongoDB, Firebase, and AWS Throughout the development process, we gained valuable experience by applying these modern frameworks and techniques to create an effective and reliable learning tool.
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