Introduction
The rapid advancement of Information Technology and smartphones has transformed daily life, leading to the creation of highly shareable applications that operate seamlessly across different geographical locations and operating systems These applications enhance information exchange and learning convenience, with exam preparation apps standing out as a prime example Such applications enable users to access tests and manage their learning progress efficiently, saving both time and money while allowing them to study and take mock exams from home without the need for physical teaching centers Consequently, we have chosen to focus on "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.
- 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
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, object-oriented scripting language that enhances webpage interactivity through features like complex animations, clickable buttons, and popup menus Advanced server-side implementations, such as Node.js, enable additional website functionalities, including real-time collaboration across multiple devices Within a host environment like a web browser, JavaScript can interact with its surrounding objects, allowing for effective programmatic control.
JavaScript features a standard library of objects, including Array, Date, and Math, along with essential language elements like operators and control structures Additionally, Core JavaScript can be enhanced with supplementary objects to serve various purposes.
Client-side JavaScript enhances the core language by providing objects that manage browser functions and the Document Object Model (DOM) These extensions enable applications to manipulate HTML forms and react to user interactions, including mouse clicks, form submissions, and page navigation.
Server-side JavaScript enhances the core language by introducing objects essential for executing JavaScript on a server These extensions enable applications to interact with databases, maintain information continuity across different invocations, and manage file operations on the server.
JavaScript enables dynamic changes to the appearance of a webpage through the Document Object Model (DOM) in the browser, while Node.js allows server-side JavaScript to handle custom requests generated by browser-executed code This dual capability enhances interactivity and responsiveness in web applications.
- 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 XML HttpRequest object, originally designed by Microsoft, facilitates asynchronous HTTP requests to the server, allowing data transfer between the client and server without the need to reload the page.
- 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.
Larger front-end projects often involve complex configurations, as numerous tools must be integrated to create an effective development environment This intricate setup is closely linked to the functionality of the libraries used in the project.
- 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, created by Facebook, is a framework designed for cross-platform mobile app development, enabling developers to utilize JavaScript for building applications that work seamlessly on both Android and iOS devices.
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, interacting through a Bridge that facilitates data exchange between them This architecture enhances performance by allowing concurrent processing, leading to improved application responsiveness and user experience.
- 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 boasts a large and passionate user community, making it one of the most loved frameworks, according to the 2019 Stack Overflow survey This extensive network of developers offers valuable support, ensuring that users can easily find help when facing bugs or challenges.
- 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
The security of applications can be compromised by the reliance on JavaScript, which is prone to errors that complicate maintenance This inherent characteristic of JavaScript not only affects security but also poses challenges for users, making it essential to consider alternative approaches for enhanced safety and maintainability.
- 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 Node.js that enhances its web server capabilities by simplifying APIs and introducing useful features It streamlines application organization through middleware and routing, enriches Node.js's HTTP objects with additional utilities, and supports the rendering of dynamic HTTP responses.
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, nonrelational database management system (DBMS) that utilizes flexible documents for data processing and storage, rather than traditional tables and rows As a NoSQL solution, it eliminates the need for a relational database management system (RDBMS), offering an elastic data storage model that facilitates the easy storage and querying of diverse data types This approach simplifies database management for developers and fosters a highly scalable environment for cross-platform applications and services.
MongoDB documents, structured as Binary JSON, serve as fundamental data units capable of storing diverse data types across multiple systems With its dynamic schema design, MongoDB offers users exceptional flexibility in creating data records and querying document collections through aggregation, facilitating the analysis of large datasets efficiently.
MongoDB has established itself as a reliable and highly scalable NoSQL database, making it a preferred choice for numerous businesses Beyond being a conventional document-based database, MongoDB offers unique features that differentiate it from other database management systems (DBMS).
- 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 programming code editor available for Windows, Linux, and macOS It seamlessly blends the features of an Integrated Development Environment (IDE) with those of a traditional code editor, making it an ideal choice for developers.
Visual Studio Code offers robust debugging capabilities, built-in Git integration, and features like syntax highlighting and smart code completion Additionally, it supports code snippets and enhancements, while its customization options enable users to modify themes, keyboard shortcuts, and various settings to tailor their coding environment.
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.
Developers can enhance Visual Studio's capabilities by accessing a repository of extensions, allowing them to utilize programming languages that are not natively supported This flexibility ensures that performance remains optimal while expanding the software's functionality.
- 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 in VS Code that enhances coding efficiency by providing intelligent code prompts It not only identifies incomplete code segments but also assists programmers by automatically suggesting missing syntax, including undeclared variables This level of professionalism in code assistance sets VS Code apart from other coding tools.
- 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 intelligent code editor that comprehensively understands JavaScript, HTML, and CSS, making it an essential tool for web development It excels in developing Node.js applications and includes built-in tools for testing, debugging, and code analysis Additionally, its integration with various version control systems enhances its functionality, ensuring a powerful and efficient development experience.
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.
The JavaScript debugger for Google Chrome is seamlessly integrated into the IDE, allowing users to debug without the need to switch between the editor and the browser This functionality enhances the development experience by streamlining the debugging process directly within the environment.
- 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 method for delivering data in a standardized format to various applications However, testing these APIs through code can be tedious Postman simplifies this process by allowing users to manipulate and test REST APIs without the need for coding, making it one of the most popular tools for API testing today.
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 enables users to organize their API calls effectively through Collections, allowing the creation of subfolders that can house multiple requests This feature significantly enhances the organization of test suites, streamlining the testing process.
Postman allows users to easily share files by importing and exporting collections and environments Additionally, users can utilize direct links to facilitate the sharing of collections.
- 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 popular platform offering Git source code repositories for software development projects It includes all the essential features of Git while enhancing collaboration through social tools that facilitate interaction among developers.
- 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.
The Folk operation allows users to duplicate a repository from another owner into their own Git account, enabling them to utilize it as if it were their own creation.
- Clone: They are considered clones, or verbs that express the performance of cloning By using clone, repositories, projects from systems run on the basis of git.
Platforms like GitLab, GitHub, and Bitbucket allow users to clone repositories at specific commits, enabling various options for ongoing development and usage.
- 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 for hosting apps, websites, and web services, allowing users to easily link their GitHub or GitLab repositories With just a click on "Create Web Service," Render automatically builds and deploys the service with each push to the repository The platform offers native support for popular programming languages including Node.js, Python, Ruby, Elixir, Go, and Rust, and it can also handle any application packaged with a Dockerfile, making it a versatile choice for developers.
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
Grasping the knowledge, tools, and technologies essential for project implementation forms the foundation for advancing to the next phase: System Design Analysis, which will be discussed in the following chapter.
SYSTEM ANALYSIS AND DESIGN
Introduction to DELF Practice
"DELF Practice" is an innovative app designed to facilitate quick and effective access to tests while efficiently managing learning progress This user-friendly platform enables individuals to study and take mock exams from the comfort of their homes, eliminating the need to visit teaching centers and ultimately saving both time and money.
System analysis
Following a thorough consultation and analysis of the online training application's characteristics and requirements, we have identified the essential functional requirements for the DELF Practice app, which is designed for two user roles: the user and the administrator.
Login, register, change password, retrieve password
View, update, delete personal information
Create, update, delete personal exam Practice exam online, offline
View detailed answers, results of the exam done
Download the exam, vocabulary, grammar to your devices View vocabulary
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
- 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 tailored to meet the needs of students, featuring a menu that allows for quick navigation between pages The exam content closely aligns with what students have learned, enabling them to become familiar with the types of questions they will encounter in the official exam Additionally, the website automatically calculates and saves the user's test score in the database upon completion.
After a period of serious and effective study and practice, up to now, the topic
The development of a cross-platform application for DELF French exam practice has been successfully completed within the specified timeframe and content requirements Despite our strong commitment to the project, we recognize that our limited experience may have led to some shortcomings We welcome your feedback and suggestions to enhance the quality of this application.
Achievement
Under the guidance of Associate Professor Dr Nguyen Thanh Binh and the Faculty of Computer Science at Vietnam - Korea University of Information and Communication Technology, we developed a cross-platform application for DELF French exam practice This project successfully meets all specified requirements, and throughout its implementation, our team utilized various technologies and techniques, including React Native, Redux, Node.js, Express.js, MongoDB, Firebase, and 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