INTRODUCTION
Expected Results to be Achieved
The Current Status of Companies Regarding Internal Messaging is becoming increasingly important and widespread The use of internal messaging applications has become an integral part of communication and internal communication processes within companies Below are some common characteristics of the current status of companies:
● The Current State of Companies regarding internal messaging is becoming increasingly important and prevalent Companies nowadays often use internal messaging applications such as Slack, Microsoft Teams, Google Chat, or similar apps to create an effective internal communication environment These applications have become an integral part of the IT infrastructure within companies.
● Scope of Usage: Internal messaging applications are widely used across various departments and teams within a company Departments such as technical, marketing, sales, and management all utilize these applications for quick and effective communication.
● Features and Interactivity: Modern internal messaging applications integrate numerous features and interactive capabilities that facilitate convenient and efficient communication among employees Users can send personal and group messages, share files, schedule online meetings, and interact swiftly with colleagues through these tools.
● Security and Data Management: Companies place emphasis on ensuring the security of internal information and data when using messaging applications Security measures such as data encryption, user authentication, and access control are implemented to safeguard sensitive information from unauthorized access or leaks.
● Interactivity and Usage: Employees within companies actively engage with internal messaging applications They use these applications to
CURRENT STATUS AND DETERMINATION OF REQUIREMENTS 3 I Current status
Define requirements
After surveying the current state, the research team has decided to develop an Internal Chat App to assist companies and businesses in improving their internal messaging without concerns about data leakage The app will have the following features:
● 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.
Pre- ● Enter information in all fields (username and password). conditions
Post- ● Email exists in the system. conditions ● Verified email account before
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.
Alternative ● Users after login will be redirected to the message page.
● If the user has not entered enough information in the fields,
Flow 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
Exception send a message asking for authentication
● 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.
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.
Pre- ● User has logged into the system and clicked “call history”. conditions
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
Alternative display on the call history screen.
● If the Access token expires, the system will delete the login
Flow 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
Exception show an empty list.
Sequence diagram “List history voice call”
Figure 4 Sequence diagram List history voice call
Goal Users can send messages to recipients.
Pre- ● Users click send messages when they have entered the conditions 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
Exception 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. conditions
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.
Pre- ● User selects the option to make a call to the recipient. conditions
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.
● Notification will be sent to the caller's application to initiate the call and count the call time During a call the speakerphone can be turned off/on and the speakerphone or microphone can be used.
Alternative ● If the receiver rejects the call the caller will be returned to
● The system reports an error if the Firebase server cannot send the message to the recipient.
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
Actors available in the gallery.
Pre- ● User chooses to send images by gallery or via camera. conditions
Post- ● The user has selected the photo and confirmed sending. conditions
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.
Alternative ● If the user has not selected an image the screen will
Flow display an error message.
Exception User has not selected images to send
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.
Pre- ● Personal information fields are not blank. conditions
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 screenRequired fields blank.
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
Components in the MVC and GetX model
In GetX, the View is a widget designed to present data and the user interface. The View is constructed using data received from the Model and utilizes methods and states managed by the Controller The View is typically responsible for handling user events and displaying the interface.
In GetX, the Model represents the data and state of the application It can be a simple class or a complex data structure The Model is responsible for storing and providing data to the View and Controller In GetX, instead of using traditional Models, we often use Observables, Reactives, or GetXControllers to manage the application's state.
In GetX, the Controller is responsible for handling the logic and managing the state of the application It interacts with the Model to retrieve and update data, and at the same time, provides methods and events to the View for processing. The Controller facilitates the connection between the View and the Model and manages data changes within the application.
1 The operation of the MVC and GetX models
In Flutter, the View is implemented as Flutter widgets and is responsible for presenting the user interface and displaying data from the Controller or Model The View uses methods and states managed by the Controller to update the interface and handle user events.
In GetX, the Model is often represented using simple data classes or Observable and Reactive classes These classes help track changes in the data and notify the View widgets to update the interface when the data changes The Controller performs the application logic and manages the state of the application It provides methods and events to the View to handle and interact with the Model to retrieve and update data It can also contain complex logic processing methods and state variables to hold and manage the application state.
In the GetX model, the interaction between the components happens as follows: The View uses the methods and state variables provided by the Controller to display data and handle user events When there is a change in the data or state, the Controller notifies the View to update the interface The Controller can also call methods of the Model to retrieve or update data When there is a change in the data, the Model notifies the Controller, and the Controller notifies the View to update the interface The GetX model helps maintain a clear separation between View, Model, and Controller in a Flutter application, making it easy to manage the application's state and create a flexible and maintainable code structure.
● Efficient state management: GetX makes it easy and efficient to manage the state of the application The Observable and Reactive classes in GetX allow tracking changes in data and automatically update the user interface only when necessary, optimizing the performance of the application.
● Scalability and flexibility: GetX allows for a clear separation between View, Model, and Controller, creating a code structure that is easy to maintain and expand This enables easier development, reusability of components, and flexibility in changing application logic.
● Integration and community support: GetX is a popular library in the Flutter community with a large and supportive community and abundant documentation It provides many useful features, such as route creation, dependency injection, state management, and routing, making Flutter application development easier.
● Overall, GetX offers efficient state management, scalability, flexibility, and integration with excellent community support, making it a valuable tool for developing Flutter applications.
● Learning and Adaptability: GetX is a powerful and flexible library, but it requires time to understand and learn how to use it effectively This can create an initial learning curve for newcomers to GetX.
● Backward Compatibility: Some new updates of GetX may not be fully backward compatible with previous versions, which can pose challenges when upgrading or changing the GetX version of an application.
● Dependency on Third-Party Libraries: GetX relies on other third-party libraries such as Get, GetStorage, GetConnect, etc Using multiple libraries can introduce complexity and difficulties in managing and maintaining the application.
● Limitations of the MVC Structure: The GetX model is based on the MVC structure, and this structure may not be suitable or fully meet the requirements of some large or complex projects In some cases, this model may not be flexible enough or scalable to meet the specific needs of a project.
3 Reasons to adopt the MVC and GetX models
● High Performance: GetX is designed with the goal of optimizing performance It utilizes reactive mechanisms to update only the components that have actual changes, saving resources and increasing the speed of the application This is particularly important for large and complex applications with a lot of data and user interfaces that need to be updated.
● Integration and Ease of Use: GetX provides a range of useful utilities and features such as state management, navigation, dependency injection, and storage It integrates well with other Flutter features and helps minimize the need for using multiple different libraries GetX also offers a concise and readable syntax, making application development easy and fast.
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.
● With Flutter, developers can create applications for both Android and iOS from a single codebase, saving time and effort Flutter provides a rich library of UI components and powerful development tools, enabling the creation of visually appealing and smooth interactive applications.
● One of Flutter's strengths is its hot reload capability, which allows developers to make changes to the source code and see the results immediately without restarting the application This helps shorten development and testing time.
● 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.
However, specific job opportunities may vary depending on geographical location, experience, and specific market demands To find job opportunities for Flutter, you can search on job websites, join developer communities, and follow technology companies and mobile app development companies that are interested in Flutter.
2 Firebase Firebase concept 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.
● Cloud Messaging: Firebase offers cloud messaging services for sending push notifications to mobile devices This allows you to send real-time notifications to users of your app without direct interaction with the app.
● 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.
● These are some of the key services provided by Firebase for app development They help you manage real-time data, authenticate users, store and manage files, send push notifications, and analyze app performance and user behavior.
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.
6 Firebase Performance Monitoring: Firebase Performance Monitoring provides tools to monitor and analyze the performance of your chat application You can measure response times, network payloads, and other metrics to improve performance and user experience.
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.
UI_04 Phone Number Enter phone number to login
UI_05 PIN Verification Enter PIN code to verify phone number.
UI_06 Message List Screen has message list and button to create new
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.
UI_13 Upload Image The screen allows you to upload personal images
Screen 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
Figure 22 Gmail login Screen Table 11 UI login description
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
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
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
2 Text, Display caller information included: caller avatar, and caller
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.
3 Text, Display caller information included: caller avatar, and caller
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.
2 Text Display call end time.
5 Text Display call type (video call/ voice call)
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 o Install IOS app on TestFlight:
Software Testing
ID Description Test Test Data Expected Actual Statu
TC_01 Log in with - Enter Email: Login As Pass a valid email congchien1303@gmail.com successfully Expected account and Password: 123456 password
- Click Login TC_02 Log in with - Enter Email: abc@abc.com Login fails As Pass an account email Password: 123456 and shows Expected that doesn't and message exist password invalid
TC_03 Log in with - Enter Email: abc@example.com Login fail As Pass the wrong email Password: 123456 Show Expected email or and message password password Invalid
TC_04 Register - Enter Email: user@example.com Register As Pass with valid email, Password: 123456 successfully Expected information password and confirm
- Click Register TC_05 Register - Enter Email: user@example.com Register As Pass with an email, Password: 123456 fail and Expected existing password show email and message account confirm user already
TC_06 Forgot - Enter Email: Send As Pass password email congchien1303@gmail.com successfully Expected with valid - Click email Send to email
TC_07 Forgot - Enter Email: def@example.com Send fail As Pass password email Expected
62 with email - Click and show does not Send to message exist email email is not valid TC_08 Login with - Click Login account google vào Send As Pass
Account Sign in máy successfully Expected
Google TC_09 Login with - Click Chỉ áp dụng trên thiết bị Send As Pass
Apple ID Sign in Iphone successfully Expected withApple
ACHIEVEMENTS AND FUTURE DEVELOPMENT
These achievements
During our research, analysis, and implementation process for our thesis project, our team has achieved several important goals and successfully completed what we initially planned Self- learning and information searching have provided us with a deeper understanding of the website development process, starting from finding suitable tools to analyzing the database and addressing any arising issues. Throughout this process, we have enhanced many skills and gained practical experience We have learned how to choose appropriate tools and apply them to web development We have carefully analyzed the database and devised solutions to tackle any challenges that emerged during the development phase. From resolving real-world issues, we have become more confident in handling technical problems and finding effective solutions We have also learned how to troubleshoot and adjust the website to meet the initial requirements and expectations.
The entire journey has not only improved our skills but also provided us with invaluable practical experience We are highly satisfied with the achievements and feel more confident when approaching future projects and challenges.
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