The application will support accessingtests and managing learning progress quickly, effectively, saving money and time.Helping users to study and take mock exams without having to go to
Introduction
The rapid advancements in Information Technology and smartphones have transformed daily life, leading to the creation of highly shareable applications that transcend geographical and operating system barriers This trend facilitates easy information exchange and learning opportunities One notable example is the exam preparation application, which allows users to access tests and manage their learning progress efficiently, saving both time and money By enabling users to study and take mock exams from anywhere, without the need to visit teaching centers, we have chosen to focus on "Building a cross-platform application for DELF French exam practice and deploying it on Amazon Web Services."
Objectives of the project
- Building 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.
- Building an admin website for statistical and management.
- 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 Nodejs Express to build Restful API.
- Applying Docker to build, test, deploy application quicky.
Implementation contents
Building application interface
Building application functionality
a User side i) On Android devices
- Login, register, change password, retrieve password
- View, update, delete personal information
- View detailed answers, results of the exam done
- View, create, update, delete favorite vocabulary ii) On website
- View, create by xlsx file, update, delete personal exam
- Pay by bank account b Administrator side i) On website
- View, create, update, delete user
- View, create, update, delete vocabulary
- View, create, update, delete grammar
- View, create by xlsx file, update, delete exam
Building container application with Docker and Docker Compose
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.
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 web interactivity through features like complex animations and clickable elements Advanced server-side implementations, such as Node.js, extend its capabilities, enabling functionalities like real-time collaboration Within a host environment, such as a web browser, JavaScript interacts with various objects, allowing for programmatic control and enriched user experiences.
JavaScript features a standard library that includes essential objects like Array, Date, and Math, alongside fundamental language elements such as operators, control structures, and statements Additionally, Core JavaScript can be enhanced for diverse applications by incorporating supplementary objects.
Client-side JavaScript enhances the core language by providing objects that manage browser interactions and the Document Object Model (DOM) This enables applications to dynamically add elements to HTML forms and react to user actions like mouse clicks, form submissions, and page navigation.
Server-side JavaScript enhances the core language by introducing objects that facilitate server operations These extensions enable applications to interact with databases, maintain information continuity across different executions, and execute file manipulations 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 developed by Microsoft, facilitates asynchronous HTTP requests to the server, enabling 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.
For larger front-end projects, configuring the environment can be a tedious process due to the numerous tools that need to be integrated This complexity is often directly 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, developed by Facebook, is a powerful framework designed for cross-platform mobile app development, enabling developers to utilize JavaScript to create applications that seamlessly run 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 conversion between them This separation allows for enhanced performance and responsiveness in applications, as tasks can be processed concurrently without blocking the main user interface.
- 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 dedicated user community, making it one of the most popular frameworks, as highlighted in the 2019 Stack Overflow survey This extensive network provides valuable support for developers facing bugs and challenges, ensuring that help is readily available.
- 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 inherent characteristics of JavaScript, which can lead to user vulnerabilities Additionally, the ease of making mistakes in JavaScript can complicate future maintenance, posing further challenges for developers.
- 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 streamlining APIs and introducing useful features It simplifies application organization through middleware and routing, enriches Node.js's HTTP objects with valuable utilities, and supports the rendering of dynamic HTTP content.
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 NoSQL database management system that utilizes flexible documents for data storage instead of traditional tables and rows This innovative approach allows for an elastic data storage model, enabling users to easily store and query diverse data types By eliminating the need for a relational database management system, MongoDB simplifies database management for developers and fosters a highly scalable environment suitable for cross-platform applications and services.
MongoDB documents, structured as Binary JSON (JavaScript Object Notation), serve as the fundamental data units, enabling the storage of diverse data types across multiple systems The dynamic schema design of MongoDB provides users with exceptional flexibility in creating data records and querying document collections, facilitating efficient data analysis through MongoDB aggregation and handling large volumes of information effectively.
MongoDB has established itself as a reliable choice for businesses seeking a robust and scalable NoSQL database solution Its advanced features extend beyond traditional document-based storage, offering unique capabilities 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 compatible with Windows, Linux, and macOS It seamlessly combines the features of an Integrated Development Environment (IDE) and a code editor, making it an ideal choice for developers.
Visual Studio Code offers robust debugging capabilities, integrated Git support, and features like syntax highlighting and smart code completion It also includes snippets and various code enhancements Additionally, its customization options enable users to modify themes, keyboard shortcuts, and other settings to tailor their coding experience.
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 their Visual Studio experience by accessing a repository of extensions, enabling them to utilize programming languages that may not be natively supported This flexibility allows for the integration of additional functionalities without compromising the software's performance.
- 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: Most coders include Intellisense code prompts, but few are as professional as VS Code It can detect if any piece of code is incomplete
Even when programmers forget to declare variables, Intellisense will automatically help them to add missing syntaxes.
- 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 a powerful code editor designed for web development, offering extensive support for JavaScript, HTML, and CSS It excels in developing Node.js applications and includes built-in tools for testing, debugging, and code analysis With seamless integration with various version control systems (VCS), WebStorm is an essential tool for efficient and effective web development.
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 directly within the editor without needing to switch between the IDE and the browser This feature enhances efficiency by providing a streamlined debugging experience specifically designed for browser-based JavaScript development.
- 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 solution for delivering standardized data to various applications While testing API results through code can be tedious, Postman streamlines this process by enabling users to manipulate and test APIs, particularly REST APIs, without any coding required As one of the most popular tools for API testing, Postman simplifies the task of calling REST APIs efficiently.
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 allows users to create Collections for organizing their API calls effectively Each Collection can include subfolders containing multiple requests, enhancing the organization of test suites and streamlining the testing process.
Postman allows users to easily share files by importing or exporting collections and environments Additionally, direct links can be utilized for seamless collection sharing.
- 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 that offers Git source code repositories for software development projects It encompasses all the functionalities of Git while incorporating social features 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 copy a repository from another owner's account to their own Git account, enabling them to utilize it as if it were created by themselves.
Clones are essential for managing repositories in systems like Git, GitLab, GitHub, and Bitbucket, allowing users to replicate projects at specific commits This functionality enhances the development process by offering various options for continuing work on these repositories.
- 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.
Docker is an open platform designed for the development, shipping, and execution of applications It allows you to decouple your applications from the underlying infrastructure, facilitating faster software delivery By using Docker, you can manage your infrastructure with the same efficiency and methods as your applications.
Docker enables the packaging and execution of applications in isolated environments known as containers This isolation enhances security and allows multiple containers to operate concurrently on a single host Containers are lightweight and include all necessary components to run the application, eliminating dependence on the host's installed software Additionally, Docker facilitates seamless sharing of containers, ensuring that collaborators access identical and consistently functioning environments.
- Docker Images: are read-only templates that contain the instructions for creating a Docker container, are built from a series of layers, each of which represents a change to the previous layer.
Docker containers are executable instances of Docker images that operate on a host machine They offer isolation from both the host system and other containers, featuring their own distinct file system, network interfaces, and process space.
Docker volumes provide a method for storing data outside of a container's file system, enabling data sharing between containers They are essential for persisting data across container runs and for storing information that multiple containers need to access.
End of Chapter 1
Grasping the knowledge, tools, and technologies essential for project implementation is crucial 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 streamline test preparation and track learning progress efficiently, saving both time and money It empowers users to study and take mock exams conveniently from home, eliminating the need to visit teaching centers.
System analysis
After thorough consultation and analysis of the characteristics and requirements for the online training application, we have identified the essential functional requirements for the DELF Practice app This application is designed for two user roles: the user and the administrator.
Login, register, change password, retrieve password
View, update, delete personal information
View detailed answers, results of the exam done
View, create, update, delete favorite vocabulary
View, create by xlsx file, update, delete personal exam
View, create, update, delete user
View, create, update, delete vocabulary
View, create, update, delete grammar
View, create by xlsx file, 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 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 10 UC Manage favorate 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
- UC ends 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 users, featuring a menu that allows for quick navigation between pages The exam content closely aligns with what students have studied, enabling them to become familiar with potential exam questions prior to the official test Additionally, the website automatically calculates scores upon test completion, with results securely stored in the database for easy access.
Deploy application to AWS EC2
4 Config AWS instance: a Input name for instance, such as: DELF Server
Figure 3 30 Config AWS instance b Choose Amazon Machine Image, such as: Ubuntu
Figure 3 31 Choose Amazon Machine Image c Create key pair (used to connect instance)
Figure 3 32 Create Key pair d Config network settings:
- Config ssh, TCP protocol on port 22
Figure 3 33 Config network d Config storage: 8GiB SSD
Figure 3 34 Config storage e Launch instance
3.2 Install Docker on instance and deploy application
2 Run the following command a Install and update ubuntu packages
- sudo apt-get install apt-transport-https ca-certificates curl gnupg-agent software-properties-common b Install docker and docker compose
- curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
- sudo apt-get install docker-ce docker-ce-cli containerd.io
- apt-cache madison docker-ce
- sudo apt install docker.io
- sudo apt install docker-compose
Clone project: git clone https://github.com/tygovip127/DELFPractice.git
Move to folder container file docker-compose.yaml: cd DELFPractice/production
Build and run docker container: sudo docker-compose up -d build
Figure 3 38 Build and run docker
After a period of serious and effective study and practice, up to now, the topic
The project "Building a Cross-Platform Application for DELF French Exam Practice and Deploying on Amazon Web Services" has been successfully completed within the established timeframe and requirements Despite the high level of determination during the research and implementation phases, the endeavor faced challenges due to limited experience and knowledge, resulting in some unavoidable shortcomings.
We look forward to receiving your comments and suggestions to improve the topic.
Achievement
In collaboration with Associate Professor Dr Nguyen Thanh Binh and the Faculty of Computer Science at Vietnam-Korea University of Information and Communication Technology, we have developed a cross-platform application for DELF French exam practice, which is deployed on Amazon Web Services This project adheres to all specified requirements and has enabled our team to learn and implement 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