MINISTRY OF EDUCATION AND TRAINING HO CHI MINH CITY UNIVERSITY OF TECHNOLOGY AND EDUCATION GRADUATION THESIS INFORMATION TECHNOLOGY BUILDING A MEDIA SOCIAL NETWORK MOBILE APP INSTRUCTOR: MSc.TRUONG THI NGOC PHUONG STUDENT: NGUYEN THUAN THIEN SKL012401 Ho Chi Minh City, 2023 MINISTRY OF EDUCATION AND TRAINING HO CHI MINH UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR INTERNATIONAL EDUCATION -------------- --------------- CAPSTONE PROJECT BUILDING A MEDIA SOCIAL NETWORK MOBILE APP STUDENTS: NGUYỄN THUẬN THIÊN ID: 19110135 ADVISOR: TRƯƠNG THỊ NGỌC PHƯỢNG, MSc. Ho Chi Minh 1|Page ACKNOWLEDGEMENTS We would want to show our gratitude to lecturer, MSc Truong Thi Ngoc Phuong, who directly supported us throughout the process of creating project for us to successfully complete this and report. This topic has provided us with the necessary conditions to learn and do well on it. Furthermore, we would like to express our gratitude to our classmates for providing us with a wealth of relevant information and knowledge that has aided us in improving our thesis.
We completed the topic and report in a short amount of time, with limited knowledge and many other restrictions in terms of methodologies and expertise with software implementation. As a result, there will inevitably be flaws in the process of creating the topic, so we eagerly await your important feedback so that our expertise may be increased, and we can do better next time. Thank you very much. 2|Page HCM UNIVERSITY OF TECHNOLOGY AND EDUCATION XÃ HỘI CHỦ NGHĨA VIỆT NAM FACULTY OF INTERNATIONAL EDUCATION Độc lập – Tự do – Hạnh phúc ******* ******* INSTRUCTOR REVIEW FORM Student’s full name: Nguyễn Thuận Thiên Student ID: 19110135 Topic name: Build a media social network mobile application.
Instructor’s full name: Trương Thị Ngọc Phượng OBSERVE 1. About the topic content & implementation volume: 2. Offer for protection or not: 5. Points: Ho Chi Minh City, .in 2023 DEPARTMENT OF INFORMATION TECHNOLOGY Instructor (Sign and write full name) (Sign and specify full name) 3|Page HCM UNIVERSITY OF TECHNOLOGY AND EDUCATION XÃ HỘI CHỦ NGHĨA VIỆT NAM FACULTY OF INTERNATIONAL EDUCATION Độc lập – Tự do – Hạnh phúc ******* ******* REVIEWER REVIEW FORM Student’s full name: Nguyễn Thuận Thiên Student ID: 19110135 Topic name: Build a media social network mobile application.
Reviewer’s full name: Trần Nhật Quang OBSERVE 1. About the topic content & implementation volume: 2. Offer for protection or not: 5. Points: Ho Chi Minh City, .in 2023 Reviewer (Sign and specify full name) 4|Page TABLE OF CONTENTS CHAPTER 01: INTRODUCTION.Reason for choosing the topic .10 CHAPTER 02: SURVEY REFERENCES .12 CHAPTER 03: THEORETICAL BASIS .Key features of React Native: .Key features of Firebase:.14 CHAPTER 04: REQUIREMENT CAPTURING AND MODELING .Non-functional Requirement .Overview use case diagram .Detailed use case diagram.19 5|Page CHAPTER 05: INSTALLATION AND TESTING .Install and run program .58 6|Page TABLE OF FIGURES Figure 1.
Tinder swiping function. Soundcloud's Comment feature on mobile platform. Overview use case diagram. Use case login and register.
Basic info screen. Match list screen. Chat message screen. Account management screen.
My profile screen. Edit profile screen. Edit profile screen. Match notification screen.
Edit gallery profile screen. Edit gallery profile screen. Install app – step 1. Install app – step 2.
Install app – step 3. Install app – step 4. 49 7|Page TABLE OF TABLES Table 1. Table describes system's functional requirements.
Table describes system's non- functional requirements. Use case Register. Use case Login. Use case Edit profile.
Use case Un-match. Use case Skip match. Use case Match. Use case Read message.
Use case Read other's profile. Use case Search user in message. Use case Send message. Use case Get location.
Edit gallery profile. Table list of testing function. Table list of test results. 51 9|Page CHAPTER 01: INTRODUCTION 1.
Reason for choosing the topic Social Media has transitioned from being a mere novelty to an absolute necessity in contemporary society, serving both individuals and businesses as an indispensable tool. The significance of social media in our daily lives is now beyond any doubt. Over the past couple of years, our world has experienced a profound transformation, unlike anything we've seen before. Prolonged lockdowns in various countries led to a shift in our needs, priorities, and lifestyles.
Our methods of earning, spending, learning, and even socializing underwent a dramatic transformation. When we found ourselves confined to our homes for extended periods, the internet and social media platforms became our primary means of connection. It was during this period that we truly grasped the profound impact and vital role of social media in our lives. This was particularly evident in platforms that revolved around art and artistic consumption, such as music and movie streaming services, as well as video-based social platforms.
Recognizing the growing demand for social platforms in recent years, we have embarked on the development of an application that facilitates interest-sharing and communication among users. In a world that thrives on connection and creativity, the need for a dedicated social platform tailored to the unique interests and talents of artists has never been greater. Welcome to a digital space where artistry and community converge – the ArtistWorld. Whether you're an aspiring painter, a seasoned sculptor, a digital illustrator, a passionate photographer, or any form of creative visionary, our platform is designed to provide you with a vibrant and supportive community that celebrates and nurtures your artistic journey.
Join us as we embark on a transformative experience, connecting artists from all corners of the globe, fostering collaboration, inspiration, and a deep sense of belonging in the world of artistry. Explore, create, and connect like never before in the colorful and dynamic world of ArtistWorld. Research subjects About research, we investigate other social media applications like Tinder, Soundcloud … Find out the needs and visions of customers on forums. 10 | P a g e 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. 11 | P a g e CHAPTER 02: SURVEY REFERENCES 1.
Survey Nearly 65% of the world’s population can be found on social media according to a recent research report[2]. With such a huge human presence on multiple social platforms, we choose some of the most popular social network platforms such as Soundcloud, Tinder,…as our point of reference.1 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. Tinder swiping function 12 | P a g e 2.2 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. 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 13 | P a g e CHAPTER 03: THEORETICAL BASIS 1. 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 14 | 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.