INTRODUCTION
CURRENT STATUS AND DETERMINATION OF REQUIREMENTS 3 I Current status
Define requirements
The research team has identified the need for an Internal Chat App to enhance internal messaging for companies while ensuring data security This app aims to mitigate concerns about data leakage and will include a variety of essential features tailored to improve communication within organizations.
● Chat(send message, files, images, voice call, video call)
SYSTEM DESIGN ANALYSIS
Usecase Diagram
II Usecase specification and sequence diagrams
STT Use case name Use case
Goal Users can login to the Chat app system
Actors User is not logged in
● Enter information in all fields (username and password)
● Email exists in the system
Main Flow ● User enters information fields (email and password)
● Users enter the correct data with the format of the fields
● Users click login to authenticate
● The software handles the user's login information on the system
● Users after login will be redirected to the message page
● If the user has not entered enough information in the fields, the system displays an error message that cannot log in
● If the user does not have an account, the system will notify that the account does not exist
● If the user has not authenticated the email, the system will send a message asking for authentication
Exception ● User does not enter all field information
● Email chưa tồn tại trên hệ thống
● Email already exists on the system but has not been verified
7 Sequence diagram “login by email and password”
Goal Show history of recent messages
● User has logged into the system
Main Flow ● After the user logs in, the system will automatically load the most recently sent or received messages
● The system will automatically sort the items in chronological order
● After sorting, the system will automatically update and display on the message screen
● If the Access token expires, the system will delete the login information stored on local storage and the user will return to the login screen
● If you log in for the first time or do not have a message history, the screen will show an empty list
Figure 3 Sequence diagram List message
3 Use case “List history voice call”
Table 4 Usecase List history voice call
Goal Display the list of the last 30 calls
● User has logged into the system and clicked “call history”
Main Flow ● After the user logs into the system and selects an option to view call history
● The system will automatically load the last sent or received calls
● The system will automatically arrange coins in chronological order
● After sorting, the system will automatically update and display on the call history screen
● If the Access token expires, the system will delete the login information stored on local storage and the user will return to the login screen
● If logging in for the first time or no call history, the screen will show an empty list
12 Sequence diagram “List history voice call”
Figure 4 Sequence diagram List history voice call
Goal Users can send messages to recipients
● Users click send messages when they have entered the message
Main Flow ● User enters and confirms sending a message
● The system checks that the message content is not blank
● The system handles and saves messages on the Firebase server
● After storing the message on the server, the system will send a request to the Firebase server to send the message to the recipient
● After the recipient receives the notification, the system will update the recipient's message history
Figure 5 Sequence diagram Send message
Goal Show contactable people within the company
● User is logged in and clicked to view contacts
Main Flow ● After the user logs in to the system and clicked button to view contacts
● The system will load the contact information of the members in the system
● The system displays everyone's contact information after the load is complete
● If the Access token expires, the system will delete the login information stored on local storage and the user will return to the login screen
Figure 6 Sequence diagram Contact list
Goal Users can make voice calls.
● User selects the option to make a call to the recipient.
Main Flow ● The user chooses to make a voice call to the recipient.
● The system will request to register a channel on the Agora server to make a call.
● After successful registration, the system will send a request to Firebase to send notifications
● The recipient will receive a call notification to accept the call.
Notifications will be sent to the caller's application to initiate the call and track call duration During the call, users can toggle the speakerphone on or off and utilize either the speakerphone or microphone as needed.
● If the receiver rejects the call the caller will be returned to the previous screen.
● The system reports an error if the Firebase server cannot send the message to the recipient.
Exception ● Firebase Server cannot send notifications.
Figure 7 Sequence diagram Voice call
Figure 8 Sequence diagram Cancel call
7 Use case “Send image message”
Name Send an image message.
Goal Users can send images to recipients via camera or images available in the gallery.
● User chooses to send images by gallery or via camera.
● The user has selected the photo and confirmed sending.
Main Flow ● User chooses to take a photo with the camera or select an existing photo in the gallery.
● After selecting the image and confirming sending, the system will save the image on the server and return the url link with the image on the server.
● The system handles and saves picture messages on Firebase server.
● After storing the link on the server, the system will send a request to the Firebase server to send a notification to the recipient.
● After the recipient receives the notification, the system will update the recipient's message history.
● If the user has not selected an image the screen will display an error message.
Exception ● User has not selected images to send
20 Sequence diagram “Send image message”
Figure 9 Sequence diagram Send image messages
8 Use case “Change profile information”
Table 9 Usecase specification Update profile information
Goal Users can change personal information.
● Personal information fields are not blank.
Main Flow ● User can change upload new avatar or edit display information (description, name and online status)
● After clicking confirm changes, the system will check for empty fields.
● After checking the system will save new information on the server.
● The user is returned to the message history screen
22 Sequence diagram “Change profile infomation”
Figure 10 Sequence diagram Updates personal information
Figure 11 Sequence diagram Changes avatar
Class diagram
ERD diagram
SYSTEM ARCHITECTURE AND TECHNOLOGIES
System architecture
System using MVC và GetX
File structure of the system
Figure 15 Front-end folder structure
Figure 17 Model, Controller and View folder structure
3 Overview of the MVC pattern
The MVC (Model-View-Controller) architecture is a popular web programming model consisting of three key components: Model, View, and Controller This structure allows for a clear separation of concerns, with each component addressing specific aspects of application development By organizing an application into these distinct parts, developers can enhance maintainability and scalability.
Components in the MVC and GetX model
In GetX, the View serves as a widget that displays data and the user interface, relying on information from the Model and utilizing methods and states managed by the Controller It is primarily responsible for managing user interactions and presenting the interface effectively.
In GetX, the Model serves as the foundation for the application's data and state, which can range from a simple class to a more intricate data structure Its primary role is to store and supply data to both the View and Controller Rather than relying on traditional Models, GetX frequently utilizes Observables, Reactives, or GetXControllers to effectively manage the application's state.
In GetX, the Controller plays a crucial role in managing application logic and state It interfaces with the Model to fetch and update data while offering methods and events to the View for processing By bridging the View and Model, the Controller effectively manages data changes within the application.
1 The operation of the MVC and GetX models
In Flutter, the View is created using widgets that present the user interface and showcase data from the Controller or Model It utilizes methods and states managed by the Controller to refresh the interface and respond to user interactions.
In GetX, the Model is typically represented by simple data classes or Observable and Reactive classes, which are essential for monitoring data changes and notifying View widgets to refresh the interface accordingly Meanwhile, the Controller is responsible for executing application logic and managing the overall state of the application.
The article outlines various methods and events that enable the View to effectively interact with the Model for data retrieval and updates Additionally, it discusses the incorporation of complex logic processing methods and state variables to manage and maintain the application's state efficiently.
In the GetX model, the View interacts with the Controller to display data and manage user events, ensuring a responsive interface When data or state changes occur, the Controller updates the View accordingly Additionally, the Controller communicates with the Model to retrieve or modify data, which in turn informs the Controller of any changes This process keeps the View, Model, and Controller distinctly separated, promoting efficient state management and a flexible, maintainable code structure in Flutter applications.
GetX simplifies state management by utilizing Observable and Reactive classes, enabling efficient tracking of data changes This approach ensures that the user interface updates only when necessary, significantly optimizing application performance.
GetX offers exceptional scalability and flexibility by ensuring a distinct separation between View, Model, and Controller, which fosters a well-organized code structure This design not only simplifies maintenance and expansion but also enhances component reusability and adaptability in modifying application logic.
GetX is a widely-used library within the Flutter community, renowned for its extensive documentation and strong community support It simplifies Flutter application development by offering essential features like route creation, dependency injection, state management, and efficient routing.
● Overall, GetX offers efficient state management, scalability, flexibility, and integration with excellent community support, making it a valuable tool for developing Flutter applications
GetX is a versatile and robust library that offers significant benefits, but it necessitates a time investment to master its features and functionalities This can present a learning curve for those who are new to GetX.
Recent updates to GetX may lack full backward compatibility with earlier versions, potentially creating challenges during the upgrade or version transition of an application.
GetX's reliance on third-party libraries like Get, GetStorage, and GetConnect can complicate application management and maintenance Utilizing multiple libraries may lead to increased complexity, making it challenging for developers to ensure smooth functionality and streamline updates within their projects.
The GetX model, while rooted in the MVC structure, may face limitations in large or complex projects, as it may not provide the necessary flexibility or scalability to address specific project requirements effectively.
The GetX model in Flutter offers numerous benefits, including efficient state management, scalability, and seamless integration However, it also presents certain limitations, such as challenges in learning and adaptability, issues with backward compatibility, reliance on third-party libraries, and constraints associated with the MVC structure Therefore, it is essential to carefully evaluate specific project requirements when considering GetX to ensure it aligns well and optimizes the application's efficiency.
3 Reasons to adopt the MVC and GetX models
Technologies used
● Flutter is a mobile and web application development platform developed by Google It allows developers to build cross-platform applications using a single programming language, Dart
Flutter allows developers to build applications for both Android and iOS using a single codebase, significantly reducing development time and effort With its extensive library of UI components and robust development tools, Flutter facilitates the creation of visually attractive and highly interactive applications.
Flutter's hot reload feature is a key advantage, enabling developers to instantly view changes made to the source code without needing to restart the application This functionality significantly reduces both development and testing time, enhancing overall efficiency.
● Flutter also supports web application development, allowing developers to build web and mobile applications from the same codebase
● Flutter is a powerful and flexible cross-platform mobile and web application development technology that is widely used in the programming community today
Flutter job opportunities in Vietnam
Flutter is indeed becoming a popular mobile application development technology with numerous attractive job opportunities Here are some job opportunities that Flutter brings:
1 Flutter Developer: Many companies and organizations are seeking Flutter developers to build and develop cross-platform mobile applications Job opportunities in this field are increasing, especially for startup projects and technology companies
2 Cross-Platform Mobile App Developer: Flutter allows developers to build cross-platform mobile applications, saving time and effort Therefore, there are good job prospects for individuals with skills in developing cross- platform mobile applications using Flutter
3 Developer Advocate and Instructor: With the growth of Flutter, there is an increasing demand for experts and instructors who can introduce and teach Flutter These experts are often hired to support and train employees in app development companies or become instructors in courses and universities
4 Product Developers and UX/UI Designers: Flutter provides a range of UI components and tools to create beautiful and smooth user interfaces As a result, there are many job opportunities for product developers and UX/UI designers with skills in using Flutter to create visually appealing and efficient mobile applications
Job opportunities for Flutter developers can differ based on location, experience, and market demand To discover these opportunities, it's beneficial to explore job websites, engage with developer communities, and keep an eye on technology and mobile app development companies that focus on Flutter.
Firebase is a mobile and web app development platform provided by Google
It offers a range of cloud computing services to support the development and deployment of mobile and web applications quickly and easily
Firebase provides tools and services for the following key aspects of app development:
Firebase offers a real-time database that enables seamless data storage and synchronization across various devices and platforms This functionality allows your application to automatically update and respond to data changes in real-time, enhancing user experience and engagement.
● Authentication: Firebase offers user authentication services to help you manage access to your app You can allow users to log in using various
34 methods, including email login, Google account login, Facebook login, and more
● Cloud Storage: Firebase provides cloud storage services for storing and managing app files You can store images, videos, audio files, and various types of data
Firebase provides cloud messaging services that enable the delivery of push notifications to mobile devices, allowing real-time communication with app users without requiring direct interaction with the application.
● App Analytics: Firebase provides app analytics tools to track and analyze app activities You can collect data on user behavior, interactions, installations, revenue, and various metrics
Firebase offers essential services for app development, including real-time data management, user authentication, file storage and management, push notification delivery, and app performance and user behavior analytics.
Application of firebase in the project
1 Firebase Realtime Database: Firebase Realtime Database provides a real- time database, which is particularly suitable for real-time chat applications You can store and synchronize messages across devices and users When there is a change in the database, different devices will automatically update with the latest messages
2 Firebase Authentication: To authenticate users in a chat application, Firebase Authentication offers secure authentication methods such as email/password login, Google account login, Facebook login, Twitter login, and more This helps ensure user information security and restrict access permissions
3 Firebase Cloud Messaging (FCM): FCM enables sending push notifications to mobile devices By using FCM, you can notify users when there are new messages or important activities in the chat application
4 Firebase Storage: Firebase Storage allows you to store attached files in the chat application, such as images, audio files, or videos You can easily store these files and access them within your chat application
5 Firebase Cloud Functions: Firebase Cloud Functions enables you to write server-side code that runs on the Firebase server By using Cloud Functions, you can perform tasks such as data processing and validation, sending notifications, and executing other tasks that require server access
DESIGN UI
Design User interface
UI_01 Registration screen Register account
UI_02 Login screen Login with Google, Facebook and Apple ID UI_03 Email Login Screen Login with an email account
Enter phone number to login
Screen Enter PIN code to verify phone number
Screen has message list and button to create new chat room
UI_07 Chat Screen Chat box screen
UI_08 Voice Chat Screen Voice chat screen
UI_09 Video Chat Screen Video chat screen
UI_10 Contact List Screen Screen display contact list within the company UI_11 Call History Screen Screen display history list
UI_12 Profile Screen The screen contains personal information, and can update personal information
The screen allows you to upload personal images by capturing or uploading from the photo library UI_14 Logout Screen Sign out of your account from the app
Figure 21 Apple ID login Screen
1 Button Login with Google account
2 Button Login with Facebook account
3 Button Login with Apple ID
4 Button Login with phone number
5 Button Redirect to the login/registration page
UI_03: Login with Email account
3 Label When clicked, user will be redirected to forgot password page
4 Button When clicked, execute the Login feature
5 Label When clicked, user will be redirected to Registration screen
Figure 23 Phone number login Screen
Figure 24 Verification Screen Table 12 Description of pin validation interface
UI_04: Phone Number Login Screen
2 Button When clicked, it will go to the pin validation screen
1 Input Enter the pin code sent to the login phone number
2 Button When clicked, will validate and go to the home screen
Table 13 Description of the Message List interface
2 Text Display last message time
3 Text Display unread message number
4 Text Display last message content
5 Button When clicked, user will be redirected to Contact List
Figure 27 Messaging screen (More options) Table 14 Description of the Messaging screen interface
1 Text Display message receiver name
2 Image Display receiver avatar with online status
5 Icon When clicked, text message will be sent
6 IconButton When clicked, App will show more options (upload image, voice/video call)
7 Input Display text message content will be sent
8 IconButton When clicked, the attachment will be sent
9 IconButton When clicked, the user will take a photo to send from the camera
10 IconButton When clicked it will make a voice call
11 IconButton When clicked will make a video call
12 IconButton When clicked will turn off the more options list
Figure 29 Video call Screen Table 15 Description of the Voice/Video Call Interface
Display caller information included: caller avatar, and caller name
3 IconButton When clicked will mute the sound and if clicked again will cancel the mute
4 IconButton Click will end the call
5 IconButton When clicked will turn off the speaker and if clicked again will cancel the speaker
Display caller information included: caller avatar, and caller name
4 IconButton Click will end the call
5 IconButton When clicked will make the switch between the front and rear cameras
Figure 30 Contact list Screen Table 16 Description of the Contact list interface
3 IconButton When clicked, user will redirect to the chat screen
Figure 31 Call history Screen Table 17 Description of the Call history interface
2 Text Display call end time
5 Text Display call type (video call/ voice call)
Figure 34 Logout Screen Table 18 Description of the Profile interface
2 IconButton When clicked, App will show options to upload new avatar
5 Dropdown Change user online status
6 Button When clicked, personal information will be updated
7 Button When clicked, a popup will appear confirming whether you want to log out or not
1 SelectItem When clicked, the user will upload an image from the gallery
2 SelectItem When clicked, the app will open the camera for taking photos which will be uploaded
1 Button When clicked, a popup will appear confirming whether you want to log out or not
3 Button Cancel logout when clicked
4 Button Accept logout when clicked
INSTALL AND TEST THE SOFTWARE
Install software
● Download app: o Link Android: https://drive.google.com/file/d/1sl683nrOUfKSarjsKGDq4Hsbu Rm29Hgu/view?usp=drive_link o Install IOS app on TestFlight:
● Source code :https://gitlab.com/thanhdung99/video-chat-app
Software Testing
TC_01 Log in with a valid account
Email: congchien1303@gmail.com Password: 123456
TC_02 Log in with an account that doesn't exist
Email: abc@abc.com Password: 123456
Login fails and shows message invalid email or password
TC_03 Log in with the wrong email or password
Email: abc@example.com Password: 123456 Login fail
Show message Invalid email or password
TC_04 Register with valid information
- Enter email, password and confirm
Email: user@example.com Password: 123456 Register successfully As
TC_05 Register with an existing email account
- Enter email, password and confirm
Email: user@example.com Password: 123456 Register fail and show message user already exists
TC_06 Forgot password with valid email
Email: def@example.com Send fail As
63 with email does not exist
- Click Send to email and show message email is not valid
- Click Sign in with Google
Login account google vào máy Send successfully As
- Click Sign in with Apple
Chỉ áp dụng trên thiết bị Iphone
ACHIEVEMENTS AND FUTURE DEVELOPMENT
These achievements
During our thesis project, our team successfully achieved key objectives through thorough research and analysis This process enhanced our self-learning and information-seeking skills, leading to a deeper understanding of website development We learned to select suitable tools and effectively apply them while meticulously analyzing the database to address challenges that arose This hands-on experience has significantly improved our practical skills in web development.
By addressing real-world challenges, we have gained confidence in managing technical issues and developing effective solutions Additionally, we have acquired the skills to troubleshoot and modify the website to align with the original requirements and expectations.
Our journey has significantly enhanced our skills and offered invaluable practical experience, leading to a high level of satisfaction with our achievements This newfound confidence empowers us to tackle future projects and challenges with greater assurance.
After researching and implementing the topic, the group understood more about:
√ How it works and uses Flutter
√ How to Create and Use a MySQL Database
√ Understand how the app works
+ Function to send messages, images, attachments,
+ Voice call, video call function
+ Function to update personal information
Advantage
+ The App is designed with an easy-to-see, user-friendly interface
+ Flutter is one of the most powerful cross platforms today
+ The functions are developed for the purpose of optimizing corporate messaging.
Disadvantage
− Regarding the interface, the user experience has not been fully optimized
− In terms of functions, due to limited knowledge and experience, logic processing is still limited.
Development
● Rebuild a more user-friendly interface
● Develop the feature of finding friends
● Development of login with facebook
● Developed into a social networking messaging app
[2] https://www.tutorialspoint.com/firebase/index.htm
[3] https://dev.to/roxie/how-to-connect-laravel-application-to-mysql- database-5han
[4] https://www.agora.io/en/blog/add-video-calling-to-your-flutter-app-using- agora
[5] https://blog.logrocket.com/how-to-build-chat-application-flutter-firebase
[6] https://docs.agora.io/en/
[7] https://firebase.flutter.dev/docs/auth/usage
[8] https://pub.dev/packages/google_sign_in
[9] https://pub.dev/packages/sign_in_with_apple
[10] https://firebase.flutter.dev/docs/auth/phone