Management Function User Function Register Login Login with email, phone number Manage personal information Manage people matched Manage message history Automated Function Send notificat
INTRODUCTION
Research subjects
About research, we investigate other social media applications like Tinder, Soundcloud
… Find out the needs and visions of customers on forums
About backend: Use mobile application programming technology of JavaScript language with Redux library to manage local database and API query Cloud database we used is Firebase to store and query data in real-time
About frontend: Use the React Native interface development tool of the JavaScript programming language to design interfaces for end users.
Research Scope
Our team focuses on research to develop and test a social networking application that has all the necessary functions of a social networking application such as storing user information, connecting and communicating with other people effectively and conveniently.
SURVEY REFERENCES
Tinder
While Tinder wasn’t the first social application to be launched, however, it transformed the social network media or to be more specific dating landscape so effectively with their iconic “swipe right” function, even among those who don’t use the app know about it
Soundcloud
On the other hand, Soundcloud, an online audio streaming and music sharing platform founded in Stockholm, Sweden, in 2007, allows their creators - from musicians to podcasters - to connect with listeners and fans through its various sharing tools That includes a feature SoundCloud is perhaps most known for -its popular commenting feature
It allows users to share their thoughts on specific moments in an audio stream, which are then visible by anyone who listens to the track
Figure 2 Soundcloud's Comment feature on mobile platform
In the end, we think combining the swipe function of Tinder and the interactive element of Soundcloud would make a great social platform for musicians and artists alike to find and talk with each other, form a community that share the same interest and so on Hence the main idea of our project: A social network application for artists
THEORETICAL BASIS
Introduction
For several years now, React Native has been a hot topic in the mobile development world No wonder – it took the tech world by storm by offering a way to develop mobile apps for both iOS and Android simultaneously
React Native has been successfully adopted by hundreds of businesses worldwide, including Uber, Microsoft, and Facebook, and is used across a whole range of industries [1]
Concept
React Native (also known as RN) is a popular JavaScript-based mobile app framework that allows you to build natively-rendered mobile apps for iOS and Android The framework lets you create an application for various platforms by using the same codebase
React Native was first released by Facebook as an open-source project in 2015 In just a couple of years, it became one of the top solutions used for mobile development React Native development is used to power some of the world’s leading mobile apps, including Instagram, Facebook, and Skype [1]
Key features of React Native
When using React Native users can benefit from many different functions like [3] :
- Code reusability: Being able to reuse code is the biggest advantage of React Native, and it indicates that apps can run effectively on multiple platforms – which is something that CEOs and Product Owners truly appreciate They can integrate 90% of the native framework for reusing the code for both operational systems
- Cost efficiency: As mentioned earlier, this is because developers are able to use the same code to build applications for iOS and Android
- Fast refresh: Fast refresh allows developers to run the app while updating it to new versions and modifying the UI Changes are visible immediately, and the developer is spared from rebuilding the entire app
- Simple UI: React Native development uses React JavaScript to build the app’s interface, which makes it more responsive and faster with reduced load time, resulting in an
15 | P a g e overall better user experience Thanks to the reactive UI and component-based approach, the framework is perfect for building apps with both simple and complex designs
- Fast applications: Some claim that React Native code might have a detrimental effect on an app's performance Even though JavaScript code won't run as fast as native code, this difference is unnoticeable to the human eye To further prove it, we decided to run a test comparing two versions of a simple application written in React Native and Swift – both achieved similar performance results
Concept
Google Firebase is a set of cloud-based development tools that helps mobile app developers build, deploy and scale their apps [4]
Key features of Firebase
Firebase provides a variety of features, including the following [4] :
- Authentication: Firebase provides a secure and easy way for users to sign into their app Developers can use Firebase Authentication to support email and password login, Google Sign-In, Facebook Login and more
- Realtime Database: The Firebase Realtime Database is a cloud-hosted NoSQL database that lets organizations store and sync data in real time across all of their users' devices This makes it easy to build apps that are always up to date, even when users are offline
- Cloud Messaging: Firebase Cloud Messaging (FCM) is a service that lets businesses send messages to their users' devices, even if they're not using the app Developers can use FCM to send push notifications, update app content, and more
- Crashlytics: Firebase Crashlytics is a service that helps organizations track and fix crashes in their app Crashlytics provides detailed reports on crashes, so they can quickly identify the root cause and fix the problem
- Performance Monitoring: Firebase Performance Monitoring provides insights into the performance of their app Organizations can use Performance Monitoring to track metrics like CPU usage, memory usage and network traffic
- Test Lab: Firebase Test Lab is a cloud-based service that lets developers test their app on a variety of devices and configurations This helps them ensure the app works well on a variety of devices and in different network conditions
REQUIREMENT CAPTURING AND MODELING
Functional requirements
Table 1 Table describes system's functional requirements
Storages The information of users, message history, … will be stored on Firestore
The image library will be stored on Storage and stored in the database as URL
Search Find person message: Find person matched in message screen
Find person to match: Show the person to match with the algorithm
Calculate Calculate the location between user and other people, match algorithm
Login with email, phone number
Send notification when the user match with other people
Non-functional Requirement
Table 2 Table describes system's non- functional requirements
Use Javascript and React Native
Structure request and response according to the sample
Code needs to have comments
Speed and processing time must be fast
Maximum data processing time: 10 seconds
During processing, loading must be displayed to avoid misunderstandings
Report specific errors, usage, and operating information in the most specific way, without rambling.
Modeling Requirement
Figure 3 Overview use case diagram
2.3.2.1 Use Case Login and Register
Figure 4 Use case login and register
Description Users want to register to the app
2 Choose to sign up by:
● Navigate to Login with email screen
● Input email and password, and press Create
● Input Google account and press Next
3 An account was created and navigated to the Profile Detail screen
Description Users want to login into the app
▪ Navigate to Login with an email screen
▪ Input registered email and password, and press
▪ If the account is correct, navigate to the Discover screen or go back to the Login screen
▪ Input registered email and password in Google login
▪ If the account is correct, navigate to the Discover screen or go back to the Login screen
Table 5 Use case Edit profile
Description Users want to edit their profile which is obsolete or when there is wrong information
Steps 1 Open the app and login
2 Choose personal information in the tab bar
3 Change information if needed and press save
Table 6 Use case Un-match
Description Users can un-match people who they do not want to connect anymore
Steps 1 Open app and login
2 Navigate to the Matched screen, a list of matched people appears
3 Press the Un-match button to start un-match
Table 7 Use case Skip match
Description Users can skip to match some other users if they do not make them interested in
Steps 1 Open app and login
2 Navigate to the Discover screen, a list of random user cards appears
3 Press the X button or swipe left to skip to match
Description Users can start to match other users if they are interested in them
Steps 1 Open app and login
2 Navigate to the Discover screen, a list of random user cards appears
3 Press the Heart button or swipe right to match
Table 9 Use case Read message
Description Users can read their message with others
Steps 1 Open the app and login
2 Navigate to the Message screen
3 Press to any friend and a model appears so the messages can be read
2.3.2.7 Use case read other’s profile:
Table 10 Use case Read other's profile
Description Users can read other’s profiles before they can decide to match with or not
Steps 1 Open the app and login
2 Navigate to the Discover screen and press the user card that appears randomly
3 Navigate to the Profile Detail screen and display their public profile
2.3.2.8 Use case search user in message:
Table 11 Use case Search user in message
Name Search user in message
Description Users can search for another user they have chatted with
Steps 1 Open the app and login
2 Navigate to the Message screen
3 Press search input and input name to search
4 A list of results that match search input appear
Table 12 Use case Send message
Description Users can send messages to whom they have matched before
Steps 1 Open app and login
2 Go to message tab in tab bar
3 Press to any friend and a modal appears Users can input new messages on the text box and send to them
Table 13 Use case Get location
Description User can access other user location through profile
Steps 1 Open app and login
2 Go to other user profile
3 See the location distance between the user and others
Number Name Format Reference Event
1 Continue with email Button Login Click will go to login screen
2 Google Button Google Click will open google login
Number Name Format Reference Event
Click will go to welcome screen
2 Email box Textbox Email Click and input email
3 Password box Textbox Password Click and input password
Click will show/hide password text
5 Login Button Login Click will login to app
Click will navigate to create account screen
Number Name Format Reference Event
1 First name Textbox First name Click will and input
2 Last name Textbox Last name Click and input
4 Password Textbox Password Click and input
5 Eye icon Button Password textbox
Click will show/hide password text
6 Choose your birthday Button Birthday Click will open calendar to choose date
7 Create the account Button Create Click will confirm and create account
Number Name Format Reference Event
1 Woman Button Women Click will choose
2 Man Button Man Click will choose
3 Don’t want to share Button
Don’t want to share Click will choose
4 Continue Button Continue Click will confirm and continue the process
Number Name Format Reference Event
1 List of buttons Button Interest Click will choose the interest
2 Continue Button Continue Click will confirm and continue the process
Number Name Format Reference Event
List of buttons Button Role Click will choose the roles
2 Continue Button Continue Click will confirm and continue the process
Number Name Format Reference Event
User can swipe the card left or right to like and dislike, click on the card to view the profile
2 Dislike button Button Dislike Click will dislike the current user
3 Like button Button Like Click will like the current user
Number Name Format Reference Event
1 Card Card view User User can click on the card to view the profile
2 Un-match Button Un-match Click will un-match the user
3 Reload Button Reload Click will refresh the current list
Number Name Format Reference Event
1 Search box Textbox Search Click and input the name of user to search
2 Chat message View Chat message
Click will show the chat box between current user and other
Number Name Format Reference Event
1 My profile Button My profile Click and show the profile information
2 Edit profile Button Edit profile Click will show the edit profile screen
3 Logout Button Logout Click will logout the current account
Number Name Format Reference Event
Back header button Button Manage account screen Click will go back
2 Youtube button Button Song Click will show you the user favorite song
3 Google maps Button Google maps
Click will show you the location of user on google maps
4 See all Button Gallery Click will open the gallery image
Number Name Format Reference Event
Back header button Button Manage account screen Click will go back
2 Avatar Button View Avatar Click will open your local image to change avatar
3 First name Textbox First name Click and input
4 Last name Textbox Last name Click and input
5 Gender Button Gender Click will show you the screen to choose gender
6 Birthday Button Birthday Click will show calendar to choose your birthday
7 About Textbox About Click and input
Click will show you the screen to choose your interest
Your favorite song Textbox Favorite song Click and input
9 Roles Button Roles Click will show you the screen to choose your roles
Click will show you the screen to choose your gallery
Click will save the information and send the data to the database
Number Name Format Reference Event
1 Message box Textbox Message Click and input to send message
Number Name Format Reference Event
1 Say hello Button Say hello Click will send hello message to the user match
2 Keep swiping Button Keep swiping Click will ignore the notification and keep swiping
Figure 20 Edit gallery profile screen
Figure 21 Edit gallery profile screen
Number Name Format Reference Event
Back header button Button Edit profile screen Click will go back
2 Remove Button Remove Click will remove the image from the gallery
3 Add Button Add Click will open the image from your phone to upload the image
INSTALLATION AND TESTING
Requirement
- Install Nodejs version 16.0.0 or more
- Source code app: https://github.com/spaceman1412/artist_world
Install and run program
- Step 1: Open cmd in the folder that needs to contain the project and clone the project from github with the command: git clone https://github.com/spaceman1412/artist_world
- Step 2: cd to the artist_world directory with the command: cd artist_world and download the necessary libraries with the command: yarn install
- Step 3: After downloading the necessary libraries We open an Android Studio virtual device
- Step 4: After opening the android emulator We run the app through the command: yarn android
Testing plan
Within the scope of the essay, the team uses black box testing to check the main functions of the application Black box testing is very suitable for testing a large part of the main functions in the system, which is very convenient for rapid development of a software.
Testing scope
Table 29 Table list of testing function
Test the login and registration functionality
- Test the user interface of the app
- Test the login function with email
- Test the login function with Google
- Test the register function with email
- Test the user interface of screen
- Test viewing other profile function
- Test the user interface of screen
- Test the un-match function
- Test the change when un-match
- Test the user interface of screen
- Test the change when chatting
- Test the user interface of screen
Testing result
Table 30 Table list of test results
Number Description Process step Result Status
Test the user interface of login page
- Click on continue with email
Test the user interface of discover screen
- Click on bottom card icon Discover screen appear
Test the user interface of match list screen
- Click on bottom hear icon
Test the user interface of chat message screen
- Click on bottom message icon
Chat message screen appear Pass
Test the user interface of account management screen
- Click on bottom profile icon
6 Test the login with email function
- Click on Continue with email button
7 Test the login with Google function
Navigate to the Google login screen
8 Test the user interface of register screen
- Click on Continue with email button
- Click on Continue with email button
User card can swipe left and right
- Click like or dislike button
Alert message you matched the person
User card sort by distance
13 Test the viewing other profile function
- Login in to the app
- Allow the app to use GPS
Test the un- match function
- Navigate to match list screen
- Click on un-match button
User got removed from match list
- Click on refresh button The new updated list show up Pass
Test the change when un-match
The user list in discover screen update
- Navigate to chat message screen
- Click on search box and type information
The chat message list filter by search Pass
Test the change when chatting
- Navigate to chat message screen
- Click on chat and start chatting
The chat message got updated with chat box and chat message
Test the chat message function
- Navigate to chat message screen
- Click on chat and type in chat in the text box
The chat logs got updated Pass
- Navigate to account management screen
- Click on My Profile button
The profile detail screen appear
- Navigate to account management screen
- Click on Edit Profile button
- Type information and click confirm
The user information in profile got updated
- Navigate to account management screen
The user got logout from app Pass
CONCLUDE
Through the process of building the thesis: "Building a media social network mobile app" has given us a lot of experience and practical knowledge for future work By doing this, we have some conclusions as follows:
● Learn and use React Native framework technologies to develop mobile applications, ways to organize class diagrams, system security, data storage, etc From there, realize APIs for using and querying data on the database side, specifically the database system Firebase Store data in a reasonable, organized manner on Firebase cloud data storage
● Understand React JS knowledge in how to build system interfaces, apply independent UI components to develop interfaces Know exactly when to re- render or when to throw away key DOMs Thanks to that, a complete front- end system can be developed
● Learn how to use a GPS system to get location information and embed it with Google Maps
● Built social network app have the required functions such as managing profile, connecting with other people, chatting
● Built a matching system with GPS location and sorting algorithm
● Support both email and Google login
Source code: https://github.com/spaceman1412/artist_world
- Succeed in building music social network app
- Support login method with Google
- Simple and beautiful UI design
- Strong and flexible security with Firebase service
- Login system support is not yet diverse
- The app speed is still slow
- Not support multiple screen size
- Sorting algorithm still not optimized
- Improve performance and bandwidth of firebase
[1] Maciej Budziński, “What Is React Native”, [Online] Available: https://reactnative.dev/docs/getting-started
[2] Simon Kemp, “More than half people on earth now use social media”, 21 July 2020, [Online] Available: https://datareportal.com/reports/more-than-half-the-world-now-uses-social-media
[3] Bharat Desai, “Introduction to React Native: Key Features and Benefits”, 16 August 2023, [Online] Available: https://magecomp.com/blog/introduction-to-react-native-key-features- benefits/#Key_Features_of_React_Native
[4] Katie Terrell Hanna, “Google Firebase”, [Online] Available: https://www.techtarget.com/searchmobilecomputing/definition/Google-Firebase