TALENT TOWN – BOOK TALENTS ONLINE

DANANG UNIVERSITY UNIVERSITY OF SCIENCE AND TECHNOLOGY FACULTY OF INFORMATION TECHNOLOGY GRADUATION PROJECT THESIS MAJOR: INFORMATION TECHNOLOGY SPECIALTY: SOFTWARE ENGINEERING PROJECT TITLE: TALENT TOWN – BOOK TALENTS ONLINE Instructor: DR TRUONG NGOC CHAU Student: NGUYEN VAN PHUNG Student ID: 102150124 Class: 15T2 Da Nang, 12/2019 INSTRUCTOR’S COMMENTS …………………………………………………………………………………… ………………………………………………………………………………… … …………………………………………………………………………………… …………………………………………………………………………………… ………………………………………………………………………………… … …………………………………………………………………………………… …………………………………………………………………………………… ………………………………………………………………………………… … …………………………………………………………………………………… …………………………………………………………………………………… ………………………………………………………………………………… … …………………………………………………………………………………… …………………………………………………………………………………… ………………………………………………………………………………… … …………………………………………………………………………………… ………………………………………………………………………… ………… ………………………………………………………………………………… … …………………………………………………………………………………… …………………………………………………………………………………… ………………………………………………………………………………… … …………………………………………………………………………………… …………………………………………………………………………………… ………………………………………………………………………………… … …………………………………………………………………… ……………… …………………………………………………………………………………… ………………………………………………………………………………… … …………………………………………………………………………………… …………………………………………………………………………………… ………………………………………………………………………………… … …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………… …………………… … …………………………………………………………………………………… REVIEWER’S COMMENTS …………………………………………………………………………………… ………………………………………………………………………………… … …………………………………………………………………………………… …………………………………………………………………………………… ………………………………………………………………………………… … ……………………………………………………………………………… …… …………………………………………………………………………………… ………………………………………………………………………………… … …………………………………………………………………………………… …………………………………………………………………………………… ………………………………………………………………………………… … …………………………………………………………………………………… …………………………………………………………………………………… ………………………………………………………………………………… … …………………………………………………………………………………… …………………………………………………………………………………… ………………………………………………………………………………… … …………………………………………………………………………………… …………………………………………………………………………………… ……………………………………………………………………………… … … …………………………………………………………………………………… …………………………………………………………………………………… ………………………………………………………………………………… … …………………………………………………………………………………… …………………………………………………………………………………… ………………………………………………………………………………… … …………………………………………………………………………………… ……………………………………………………………………… …………… ………………………………………………………………………………… … …………………………………………………………………………………… …………………………………………………………………………………… ………………………………………………………………………………… … …………………………………………………………………………………… SUMMARY Topic title : Talent Town – Book Talents Online Student n ame : Nguyen Van Phung Student ID : 102150124 Class : 15T2 Talent Town is a marketplace where customers and talents are connected to bring real life gigs with just some click Talents on Talent Town can be singers, dancers, DJs, clowns or any person having ability to provide good performance with their specific skills Customers on Talent Town are people who are seeking for talents to perform at their wedding, birthday party, anniversary or any other kinds of events Main features: - Talents: + Membership registration + Building profile + Add availability, packages + Communicate to customers + Accept/ Decline/ Cancel gigs - Customers: + Search for talents + Message to talents + Book talents for events + Keep tracks of the bookings - Admin: + Manage all users and relevant information + Ability to contact to users if needed + Keep tracks of users’ activities DA NANG UNIVERSITY UNIVERSITY OF SICIENCE AND TECHNOLOGY FALCUTY OF INFORMATION TECHNOLOGY THE SOCIALIST REPUBLIC OF VIETNAM Independence - Freedom - Happiness GRADUATION PROJECT REQUIREMENTS Student Name: Nguyen Van Phung Student ID : 102150124 Class: 15T2 Faculty: Information Technology Major: Information Technology 1 Topic title: Talent Town – Book talents online 2 Project topic : ☐ has signed intellectual property agreement for final result 3 Initial figure and data: …………………………………… …………………………………………… …… ………………………………………………………………………………………… … ………………………………… … ……………………… ………………… Content of the explanations and calculations: … …………………………………………………………………………………… … …………………………………………………………………………………… … ………………………………………… ………………………………………… … …………………………………………………………………………………… Drawings, charts (specify the types and sizes of drawings): … …………………………………………………………………………………… … …………………………………………………………………………………… … …………………………………………………………………………………… 4 Name of instructor: Content pa rts: Truong Ngoc Chau 5 Date of assignment : …… /…… /201… 6 Date of completion : …… /…… /201… Danang, December 20 th , 2019 Head of Division ………………… Instructor i PREFACE Firstly, I would like to express my gratitude to the teachers in the Faculty of Information Technology, Da Nang University, University of Science and Technology, who have industriously taught and imparted valuable knowledge to me in the past school years I would like to express my sincere thanks to Dr Truong Ngoc Chau who helped me a lot while I was implementing my project Thanks to his advice, I had the good direction in the deployment and implementation of the requirements of the graduation thesis In addition, I would like to t hank my mentor, Mr Duong Quang Hai from PSCD Co , LTD company for his valuable guidance He definitely provided me with the tools that I needed to choose the right direction and successfully complete this project Moreover, although I have tried to complete this thesis as well as possible, within the capabilities that I could, unavoidably it has some mistakes So that any comments are extremely significant to me to make this thesis more complete Finally, I wish all teachers in the Faculty of Informa tion Technology the best health and more success in life Thank you for your contribution to the young generations Best regards, Phung Danang, December 20 th 2019 Nguyen Van Phung ii ASSURRANCE I guarantee: 1 The contents of this project are performed by our - self following the guidance of Dr Truong Ngoc Chau 2 All references, which used in this project thesis, are quoted with author’s name, project’s name, time and location to publish clearly and faithfully 3 All invalid copies, educated statute violation or cheating will be born the full responsibility by my - self Student Performed Nguyen Van Phung iii TABLE OF CONTENTS PREFACE i ASSURRANCE ii TABLE OF CONTENTS iii INTRODUCTION 9 Chapter 1: THEORIES AN D TECHNOLOGIES 10 1 1 The Server side 10 1 1 1 Node js 10 1 1 2 Express js 10 1 1 3 MongoDB 11 1 2 The Client side 12 1 2 1 React js 12 1 2 2 Redux 12 1 2 3 Ant design 13 1 3 Realtime client - server communication 13 1 3 1 What is Websocket? 13 1 3 2 Socket io 14 Chapter 2: ANALYSIS AND DESIGN 15 2 1 Requirement analysis 15 2 1 1 General requirements 15 2 1 2 Main features 15 2 2 Diagra ms 16 2 2 1 Use case diagram 16 2 2 2 Use case specifications 22 2 2 3 Sequence diagram 29 2 2 4 Activity diagram 33 2 3 Database design 37 2 3 1 Description of tables 37 2 3 2 Relational database 46 2 4 Conclusion 46 Chapter 3: IMPLEMENTATION AND RESULT EVALUATION 47 3 1 Development environment 47 iv 3 2 Demo system’s main feature 48 3 2 1 Talents 48 3 2 2 Customers 55 3 2 3 General 58 3 2 4 Admin 59 3 3 Experiment result evaluation 61 3 3 1 Advantages 61 3 3 2 Disadvantages 61 CONCLUSION 62 1 Achievements 62 2 Future works 62 REFERENCES 63 v LIST OF TABLES , FIGURES Table 2 1 - UC specification – User login 22 Table 2 2 - UC specification – User logout 22 Table 2 3 - UC specification – User add card for payment 23 Table 2 4 - UC specification – Talent add bank for payout 23 Table 2 5 - UC specification – Search for talents 24 Table 2 6 - UC specification – Customer make a boo king 24 Table 2 7 - UC specification – Customer cancel a booking 25 Table 2 8 - UC specification – Talent accept a gig 25 Table 2 9 - UC specification – Talent decline a gig 26 Table 2 10 - UC specification – Talent cancel a gig 26 Table 2 11 - UC specification – Admin login 27 Table 2 12 - UC specification – Admin logout 27 Table 2 13 - UC specification – Admin activate a user 28 Table 2 14 - UC specification – Admin accept talent’s submission 28 Table 2 15 - Description of table Users 37 Table 2 16 - Description of table Entertainers 38 Table 2 17 - Description of table Customers 39 Table 2 18 - Description of table Customers 39 Table 2 19 - Description of table Conversations 39 Table 2 20 - Description of table Mes sages 40 Table 2 21 - Description of table Cancellation Policies 40 Table 2 22 - Description of table Gigs 40 Table 2 23 - Description of table Gig Bills 41 Table 2 24 - Description of table Refer By Codes 42 Table 2 25 - Description of table Payment Status 42 Table 2 26 - Description of table Plans 42 Table 2 27 - Description of table Plan Benefits 43 Table 2 28 - Description of table Packages 43 Table 2 29 - Description of table Entertainer Types 43 Table 2 30 - Description of table Extras 44 Table 2 31 - Description of table Ent ertainer Calendars 44 Table 2 32 - Description of table Notice Responses 44 vi Table 2 33 - Description of table Review Entertainer 45 Table 2 34 - Description of table Review Customer 45 Figure 2 1 - Use case diagram for Customer 16 Figure 2 2 - Use case diagram for Customer managing bookings 17 Figure 2 3 - Use case diagram for Talent 18 Figure 2 4 - Use case diagram for Talent managing gigs 19 Figure 2 5 - Use case diagram for Admin 20 Figure 2 6 - Use case diagram for Admin managing users 21 Figure 2 7 - Sequence diagram - Login 29 Figure 2 8 - Sequence diagram - Register 29 Figure 2 9 - Sequence diagram – Add card 30 Figure 2 10 - Sequence diagram – Customer make a booking 30 Figure 2 11 - Sequence diagram – Talent accept a gig 31 Figure 2 12 - Sequence diagram – Send message 31 Figure 2 13 - Sequence diagram – Admin activate user 32 Figure 2 14 - Sequence diagram – Admin accept talent’s submission 32 Figure 2 15 - Activity diagram - Login 33 Figure 2 16 - Activity diagram - Register 33 Figure 2 17 - Activity diagram – Add card 34 Figure 2 18 - Activity diagram – Customer make a booking 34 Figure 2 19 - Activity diagram – Talent accept a gig 35 Figure 2 20 - Activity diagram – Customer make a booking 35 Figure 2 21 - Activity diagram – Admin activate a user 36 Figure 2 22 - Activity diagram – Talent accept ta lent’s submission 36 Figure 2 23 - Relationship between tables of database 46 Figure 3 1 - Talent sign up 48 Figure 3 2 - Talent log in 48 Figure 3 3 - Talent dashboard – Overview 49 Figure 3 4 - Talent dashboard – Biography & Media 49 Figure 3 5 - Talent dashboard – Package s & Travel 50 Figure 3 6 - Talent dashboard – Booking preferences 50 Figure 3 7 - Talent dashboard – Calendar 51 Figure 3 8 - Talent dashboard – Calendar 51 vii Figure 3 9 - Talent dashboard – My gigs 52 Figure 3 10 - Talent dashboard – Category management 52 Figure 3 11 - Talent dashboard – Messages 53 Figure 3 12 - Talent dashboard – Plan 53 Figure 3 13 - Talent dashboard – Settings 54 Figure 3 14 - Talent dashboard – Refer a friend 54 Figure 3 15 - Customer sign up 55 Figure 3 16 - Customer login 55 Figure 3 17 - Customer dashboard – Overview 56 Figure 3 18 - Customer dashboard – My bookings 56 Figure 3 19 - Customer dashboard – Favourites 57 Figure 3 20 - Customer dashboard – My bookings 57 Figure 3 21 - Customer dashboard – My bookings 58 Figure 3 22 - Gig details 58 Figure 3 23 - Admin - Login 59 Figure 3 24 - Admin - Analytics 59 Figure 3 25 - Admin – User management 60 Figure 3 26 - Admin gig management 60 viii LIST OF SYMBOL, ACRONYM A cronym Explanation OS Operating System API A pplication P rogramming I nterface MVC Model - View - Controller I/O Input / Outut INTRODUCTION CONTEXT These days, there’re many people having some kinds of talent in entertainment They can be artists, freelancer, students or anyone with passion of bringing their performance to the audiences and also earn for their livings Moreover, there are also customers who want to find some talents for their wedding, birthday party or any other event Talent Town appears and becomes a marketplace where customers can find the good fit for their events Talent Town brings talents the ability of setting up their own profiles with images, videos, packages, available time and range of places to performance Customers will be able to see a list of amazing talents in detail and then decide to choose one with best option about price, location and time SCOPES Talent Town has mainly targeted to talents who is interested in getting more gigs and customers who want to find talents for their events STRUCTURE OF THESIS Chapter 1 Theories and Technologies: Research theories and technologies which was used in the project Chapter 2 Analysis and Design: Specify requirements a nd analysis, design use case and class diagrams Chapter 3 Implement and Assessment results: This chapter shows how to implement and demonstrate screenshots of main features Conclusion Present archived results and future works Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 10 Ch apter 1: THEORIES AND TECHNOLOGIES 1 1 The Server side 1 1 1 Node js As an asynchronous event - driven JavaScript runtime, Node js is designed to build scalable network applications In most applications, many connections can be handled concurrently Upon each connection, the callback is fired, but if there is no work to be done, Node js will sleep In contrast to today''''s more common concurrency model, in which OS threads are employed Thread - based networking is relatively inefficient a nd very difficult to use Furthermore, users of Node js are free from worries of dead - locking the process, since there are no locks Almost no function in Node js directly performs I/O, so the process never blocks Because nothing blocks, scalable systems are very reasonable to develop in Node js Node js being designed without threads doesn''''t mean you can''''t take advantage of multiple cores in your environment Child processes can be spawned by using our child_process fork() API, and are designed to be easy to communicate with Built upon that same interface is the cluster module, which allows you to share sockets between processes to enable load balancing over your cores 1 1 2 Express js Express is a minimal, open source and flexible Node js web app framework designed to make developing websites, web apps, & API’s much easier Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 11 Why Express js? + Express helps to respond to requests with route support so that you may write responses to specific URLs + Supports multiple templating engines to simplify generating HTML + The nice thing about it is it’s very simple and it’s open - source What is the purpose of it with Node js? That you don''''t have to repeat same code over and over again Node js is a low - level I/O mechanism which has an HTTP module If you just use an HTTP modu le, a lot of work like parsing the payload, cookies, storing sessions (in memory or in Redis ), selecting the right route pattern based on regular expressions will have to be re - implemented With Express js, it is just there for you to use 1 1 3 MongoDB Like any other database management language, MongoDB is based on a NoSQL databa se that is used for storing data in a key - value pair Its working is based on the concept of document and collection It is also an open source, a document - oriented, cross - platform database system that is written using C++ Mongo DB can be defined as a d ocument - oriented database system that uses the concept of NoSQL It also provides high availability, high performance, along with automatic scaling This open source product was developed by the company - 10gen in October 2007, and the company also maintai ns it MongoDB exists under the General Public License (GPL) as a free database management tool as well as available under Commercial license as of the manufacturer MongoDB was also intended to function with commodity servers Companies of different sizes all over the world across all industries are using MongoDB as their database Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 12 1 2 The Client side 1 2 1 React js ReactJS is an open - source JavaScript library which is used for building user interfaces specifically for single page applications It’s used for handling view layer for web and mobile apps React also allows us to create reusable UI components React was first created by Jordan Walke, a software engineer working for Facebook React first deployed on Facebook’s newsfeed in 2011 and on Instagram in 2012 React allows developers to create large web applications which can change data, without reloading the page The main purpose of React is to be fast, scalable, and simple It works only on user interfaces in application This corresponds to view in the MVC template React JS is also called simply React or React js 1 2 2 Red ux Redux is a predictable state container for JavaScript apps As the application grows, it becomes difficult to keep it organized and maintain data flow Redux solves this problem by managing application’s state with a single global object called Stor e Redux fundamental principles help in maintaining consistency throughout your application, which makes debugging and testing easier Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 13 More importantly, it gives you live code editing combined with a time - travelling debugger It is flexible to go with any view layer such as React, Angular, Vue, etc 1 2 3 Ant design Ant Design is a React UI library that has a plethora of easy - to - use components that are useful for building elegant user interfaces Created by Chinese conglomerate Alibaba, Ant Design is used by several big names: Alibaba (of course), Tencent, Baidu, and more It is now the most popular React UI library with over 54 k sta rs on Github 1 3 Realtime client - server comm unication 1 3 1 What is Websocket? WebSocket is a protocol for creating a fast two - way channel between a web browser and a server WebSocket overcomes limitations with HTTP to allow for low latency communications between a user and a web service As Internet speeds continue to climb, u sers are beginning to see the Internet as a source of dynamic, realtime information Like desktop applications, the web Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 14 traditionally relied on the user to perform an action before the service could process and provide information While this works, it cre ates a static experience and prevents users from becoming truly engaged in the content WebSocket adds flavor to the web by allowing websites to update content without having to wait for the user Unlike other techniques which piggyback on the HTTP protocol, the WebSocket protocol creates a true ongoing connection between the user and the web service, allowing information to flow easily between both endpoints 1 3 2 Socket io Socket IO was created in 2010 It was developed to use open connections to facilitate realtime communication, still a relatively new phenomenon at the time Socket IO allows bi - directional communication between client and server Bi - directional communications are enabled when a client has Socket IO in the browser, and a server h as also integrated the Socket IO package While data can be sent in a number of forms, JSON is the simplest Socket IO enables real - time, bidirectional and event - based communication It works on every platform, browser or device, focusing equally on relia bility and speed Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 15 Chapter 2 : ANALYSIS AND DESIGN This chapter will go into detail the requirements, describing nonfunctional requirements, design constraints and other factors necessary to provide a complete and comprehensive description of the requirements for the application This consists of a package containing Requirements Specification, Use - Cases of the use - case model, Use Case Specifications , Sequence Diagram and Activity Diagram Shows an overview of what functions the system can satisfy In addition, it defines the architecture, modules, and data for a system to satisfy specified requirements System design is intended to be the link between the system architecture and the implementation of technological system elements that compose the p hysical architecture model of the system It could be seen as the application of systems theory to product development The System Design process is to provide sufficiently detailed data and information about the system and it is a system element to enab le the implementation consistent with architectural entities as defined in models and views of the system architecture It shows the components of the web application, the structure of data tables, the relationship the elements that make up the system 2 1 Requirement analysis 2 1 1 General requirements For customers , I want my system has enough features to support them for finding and booking talents easily They can view talents list, search for a talent fit their needs and then view details and mak e bookings For talents , I want my system has enough features to support them for creating attractive profiles and earn more gigs They can add photos, videos, packages, extra or travel information Then can also set available time for customers to choose date time for bookings For admin, I want my system has enough features to support him to fully manage to website and all users 2 1 2 Main features This system has three main actors: - Customer - Talent - Admin Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 16 2 2 Diagrams 2 2 1 Use case diagram • Use case diagram for Customer Figure 2 1 - Use case diagram for Customer Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 17 • Use case diagram for Customer managing bookings Figure 2 2 - Use case diagram for Customer managing bookings Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 18 • Use case diagram for Talent Figure 2 3 - Use case diagram for Talent Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 19 • Use case diagram for Talent managing gigs Figure 2 4 - Use case diagram for Talent managing gigs Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 20 • Use case diagram for Admin Figure 2 5 - Use case diagram for Admin Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 21 • Use case diagram for Admin managing users Figure 2 6 - Use case diagram for Admin managing users Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 22 2 2 2 Use case specifications a) Users (Customer and Talent) • User l ogin Table 2 1 - UC specification – User login Use case ID UC - user - login Actors Customer, Talent Related use - case Brief description This use case for logging into the web app Pre – conditions Post – conditions Success: Redirect user to homepage Failed: Show message: “Incorrect email or password” • User l og out Table 2 2 - UC specification – User logout Use case ID UC - user - log out Actors Customer, Talent Related use - case UC - user - login Brief description This use case for logging out of the web app Pre – conditions User has already logged in successfully Post – conditions Redirect user to homepage Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 23 • Add card for payment Table 2 3 - UC specification – User add card for payment Use case ID UC - user - add - card Actors Customer , Talent Related use - case UC - user - login Brief description This use case for customer adding a card for payment Pre – conditions User has already logged in successfully Post – conditions Success: Show message: “Successfully added” Failed: Show message: “Something went wrong Please try again” • Add bank for payout Table 2 4 - UC specification – Talent add bank for payout Use case ID UC - tale n t - add - bank Actors Talent Related use - case UC - user - login Brief description This use case for talent adding a bank account for payout Pre – conditions User has already logged in successfully Post – conditions Success: Show message: “Successfully added” Failed: Show message: “Something went wrong Please try again” Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 24 • Search for talents Table 2 5 - UC specification – Search for talents Use case ID UC - search - talents Actors Customer Related use - case UC - user - login Brief description This use case for customer searching for talents Pre – conditions Post – conditions List of talents shows up • Make a booking Table 2 6 - UC specification – Customer make a booking Use case ID UC - customer - make - booking Actors Customer Related use - case UC - user - login Brief description This use case for customer making a booking Pre – conditions User has already logged in successfully Post – conditions Success: Show message: “Successfully booked ” Failed: Show message: “Something went wrong Please try again” Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 25 • Cancel a booking Table 2 7 - UC specification – Customer cancel a booking Use case ID UC - customer - cancel - booking Actors Customer Related use - case UC - user - login Brief description This use case for customer cancelling a booking Pre – conditions User has already logged in successfully Post – conditions Success: Show message: “Successfully cancelled ” Failed: Show message: “Something went wrong Please try again” • Accept a gig Table 2 8 - UC specification – Talent accept a gig Use case ID UC - talent - accept - gig Actors Talent Related use - case UC - user - login Brief description This use case for talent accepting a gig Pre – conditions User has already logged in successfully Post – conditions Success: Show message: “Successfully accepted ” Failed: Show message: “Something went wrong Please try again” Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 26 • Reject a gig Table 2 9 - UC specification – Talent decline a gig Use case ID UC - talent - decline - gig Actors Talent Related use - case UC - user - login Brief description This use case for talent declining a gig Pre – conditions User has already logged in successfully Post – conditions Success: Show message: “Successfully declined ” Failed: Show message: “Something went wrong Please try again” • Cancel a gig Table 2 10 - UC specification – Talent cancel a gig Use case ID UC - talent - cancel - gig Actors Talent Related use - case UC - user - login Brief description This use case for talent cancelling a gig Pre – conditions User has already logged in successfully Post – conditions Success: Show message: “Successfully cancelled ” Failed: Show message: “Something went wrong Please try again” Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 27 b) Admin • Admin l ogin Table 2 11 - UC specification – Admin login Use case ID UC - admin - login Actors Admin Related use - case Brief description This use case for logging into admin dashboard Pre – conditions Post – conditions Success: Redirect admin to admin dashboard Failed: Show message: “Incorrect email or password” • Admin l ogout Table 2 12 - UC specification – Admin logout Use case ID UC - admin - logout Actors Admin Related use - case UC - admin - login Brief description This use case for logging out of admin dashboard Pre – conditions Admin has already logged in to admin dashboard successfully Post – conditions Redirect admin to admin login page Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 28 • Admin activate user Table 2 13 - UC specification – Admin activate a user Use case ID UC - admin - activate - user Actors Admin Related use - case UC - admin - login Brief description This use case for logging out of admin dashboard Pre – conditions Admin has already logged in to admin dashboard successfully Post – conditions Success: Show message: “Successfully updated” Failed: Show message: “ Something went wrong Please try again ” • Admin accept talent’s submission Table 2 14 - UC specification – Admin accept talent’s submission Use case ID UC - admin - accept - talent Actors Admin Related use - case UC - admin - login Brief description This use case for logging out of admin dashboard Pre – conditions Admin has already logged in to admin dashboard successfully Post – conditions Success: Show message: “Successfully updated” Failed: Show message: “Something went wrong Please try again” Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 29 2 2 3 Sequence diagram • Login Figure 2 7 - Sequence diagram - Login • Register Figure 2 8 - Sequence diagram - Register Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 30 • Add card Figure 2 9 - Sequence diagram – Add card • Customer make a booking Figure 2 10 - Sequence diagram – Customer make a booking Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 31 • Talent accept a gig Figure 2 11 - Sequence diagram – Talent accept a gig • Send message Figure 2 12 - Sequence diagram – Send message Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 32 • Admin activate user Figure 2 13 - Sequence diagram – Admin activate user • Admin accept talent’s submission Figure 2 14 - Sequence diagram – Admin accept talent’s submission Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 33 2 2 4 Activity diagram • Login Figure 2 15 - Activity diagram - Login • Register Figure 2 16 - Activity diagram - Register Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 34 • Add card Figure 2 17 - Activity diagram – Add card • Customer make a booking Figure 2 18 - Activity diagram – Customer make a booking Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 35 • Talent accept a gig Figure 2 19 - Activity diagram – Talent accept a gig • Send message Figure 2 20 - Activity diagram – Customer make a booking Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 36 • Admin activate a user Figure 2 21 - Activity diagram – Admin activate a user • Admin accept talent’s submission Figure 2 22 - Activity diagram – Talent accept talent’s submission Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 37 2 3 Database design 2 3 1 Description of tables Table 2 15 - Description of table Users Name Type Required? Max length Key _ id Char True 255 PK email Char True 255 password Char True 255 first_name Char True 255 last_name Char True 255 avatar Char True 255 phone Char True 15 role Char True 15 status Char True 15 is_verified Boolean True birthday Datetime True note Char False 255 provider Char False 15 reset_password_code Char False 15 reset_password_expires Datetime False stuff_info Object False verify_token Char False 15 Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 38 Table 2 16 - Description of table Entertainers Name Type Required? Max length Key _ id Char True 255 PK user_id Char True 255 FK plan_id Char False 255 FK cancellation_policy_id Char False 255 FK act _name Char True 255 act_type_id Char True 255 FK act_description Char True 255 charge_per_mile Int False 15 travel_range Int False 15 location Char True 255 free_range Int False 15 have_equipment Boolean False photos Array False videos Array False r ate Int False 15 views Int False 15 ranking Int False 15 category_selected Array False completed_steps Array False submit_progress_bar Boolean False refer_code Char False 15 refer_b y Char False 15 booking_window Char False 255 FK advance_notice Char False 255 FK Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 39 Table 2 17 - Description of table Customers Name Type Required? Max length Key _ id Char True 255 PK user_id Char False 255 FK rate Int False 15 favourites Array False Table 2 18 - Description of table Customers Name Type Required? Max length Key _ id Char True 255 PK user_id Char True 255 FK message Char True 255 is_read Boolean True is_notified Boolean True conversation_id Char False 255 FK Table 2 19 - Description of table Conversations Name Type Required? Max length Key _ id Char True 255 PK customer_id Char True 255 FK entertainer_id Char True 255 FK title Char False 255 Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 40 Table 2 20 - Description of table Messages Name Type Required? Max length Key _ id Char True 255 PK conversation_id Char True 255 FK user_id Char True 255 FK message Char True 255 is_read Boolean False Table 2 21 - Description of table Cancellation Policies Name Type Required? Max length Key _ id Char True 255 PK name Char True 255 refund_time Int True 15 full_refund_description Char True 255 no_refund_description Char True 255 Table 2 22 - Description of table Gigs Name Type Required? Max length Key _ id Char True 255 PK entertainer_id Char True 255 FK customer_id Int True 15 FK package_id Object True FK title Char True 255 description Char True 255 start_time Datetime True end_time Datetime True Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 41 address Char True 255 status Char True 255 cancellation_policy_id Char True 255 FK reason_cancelled Char True 255 extras_list Array True mango_preAuthorizationId Char True 255 mango_payinId Char True 255 mango_transferId Char True 255 Table 2 23 - Description of table Gig Bills Name Type Required? Max length Key _ id Char True 255 PK entertainer_id Char True 255 FK gig _id Char True 255 FK payment_status_id Char True 255 FK package_ fee Int True 15 extra_fee Int True 15 travel_cost_fee Int True 15 entertainer_commission_fee Int True 15 customer_commission_fee Int True 15 trust_and_support_fee Int True 15 customer_will_pay Int True 15 entertainer_will_receive Int True 15 Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 42 Table 2 24 - Description of table Refer By Codes Name Type Required? Max length Key _ id Char True 255 PK referrer Char True 255 FK referred Char True 255 FK sent_award Boolean True code_used Char True 255 Table 2 25 - Description of table Payment Status Name Type Required? Max length Key _ id Char True 255 PK code Char True 255 mango_status Char True 255 customer_status Char True 255 customer_description Char True 255 entertainer_status Char True 255 entertainer_description Char True 255 Table 2 26 - Description of table Plans Name Type Required? Max length Key _ id Char True 255 PK name Char True 255 benefit_codes Array True description Char True 255 monthly_price Int True 15 is_default Boolean True commission Int True 15 trust_and_support Int True 15 Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 43 Table 2 27 - Description of table Plan Benefits Name Type Required? Max length Key _ id Char True 255 PK name Char True 255 description Char True 255 Table 2 28 - Description of table Packages Name Type Required? Max length Key _ id Char True 255 PK name Char True 255 description Char True 255 entertainer_id Char True 255 FK price Int True 15 duaration Int True 15 setup_time Int True 15 Table 2 29 - Description of table Entertainer Types Name Type Required? Max length Key _ id Char True 255 PK categoryName Char True 255 level Int True 15 parentId Char True 255 rankingNo Int True 15 Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 44 Table 2 30 - Description of table Extras Name Type Required? Max length Key _ id Char True 255 PK name Char True 255 description Char True 255 entertainer_id Char True 255 FK price Int True 15 duaration Int True 15 Table 2 31 - Description of table Entertainer Calendars Name Type Required? Max length Key _ id Char True 255 PK entertainer_id Char True 255 FK date Datetime True start_time Datetime True end_time Datetime True Table 2 32 - Description of table Notice Responses Name Type Required? Max length Key _ id Char True 255 PK type Char True 255 description Char True 255 peroid Int True 15 response_time Int True 15 Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 45 Table 2 33 - Description of table Review Entertainer Name Type Required? Max length Key _ id Char True 255 PK gig_id Char True 255 FK customer_id Char True 255 FK entertainer_id Char True 255 FK satisfaction Int True 15 professionalism Int True 15 communication Int True 15 punctuality Int True 15 message Char True 15 Table 2 34 - Description of table Review Customer Name Type Required? Max length Key _ id Char True 255 PK gig_id Char True 255 FK customer_id Char True 255 FK entertainer_id Char True 255 FK rate Int True 15 message Char True 255 Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 46 2 3 2 Relational database Figure 2 23 - Relationship between tables of database 2 4 Conclusion This chapter presented the requirements specification that the system could meet the user’s demands Follow the requirements, the use case diagrams are used to gather the requirements of a system including internal and external influences These requiremen ts are mostly design requirements The activity diagrams, draw the activity flow of a system, show the steps and action sequences as well as the interactions between user and user, user and system Thereby, the overview and the activity streams of the syst em are fully presented Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 47 Chapter 3 : IMPLEMENTATION AND RESULT EVALUATION 3 1 Development environment - Web service The web service is a RESTful API It is built by Node js version 8 16 2 on Express Framework version 4 1 6 4 , based on representational state transfer (REST) technology I use MongoDB for the database - Web Client + React js version 16 5 1 for making presentation logic and HTML, CSS + Ant Design Framework version 3 12 1 for building the user interface - Development Tools + Visual Studio Code for coding + Postman for testing APIs + Star UML for diagrams + Lucid Chart for database structure + Robo3T as GUI tool MongoDB Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 48 3 2 Demo system’s main feature 3 2 1 Talents 1) Sign up Figure 3 1 - Talent sign up 2 ) Login Figure 3 2 - Talent log in Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 49 3 ) Talent das h board – O verview Figure 3 3 - Talent dashboard – Overview 4 ) Talent dashboard – Biography & Media Figure 3 4 - Talent dashboard – Biography & Media Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 50 5 ) Talent dashboard – Packages & Travel Figure 3 5 - Talent dashboard – Packages & Travel 6 ) Talent dashboard – Booking preferences Figure 3 6 - Talent dashboard – Booking preferences Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 51 7 ) Talent dashboard – Calendar Figure 3 7 - Talent dashboard – Calendar 8 ) Talent dashboard – Calendar Figure 3 8 - Talent dashboard – Calendar Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 52 9 ) Talent dashboard – My gigs Figure 3 9 - Talent dashboard – My gigs 10 ) Talent dashboard – Category management Figure 3 10 - Talent dashboard – Category management Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 53 11 ) Talent dashboard – Messages Figure 3 11 - Talent dashboard – Messages 12 ) Talent dashboard – Plan Figure 3 12 - Talent dashboard – Plan Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 54 13 ) Talent dashboard – Settings Figure 3 13 - Talent dashboard – Settings 14 ) Talent dashboard - Refer a friend Figure 3 14 - Talent dashboard – Refer a friend Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 55 3 2 2 Customers 1 ) Customer sign up Figure 3 15 - Customer sign up 2 ) Customer login Figure 3 16 - Customer login Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 56 3 ) Customer dashboard – Overview Figure 3 17 - Customer dashboard – Overview 4 ) Customer dashboard – My bookings Figure 3 18 - Customer dashboard – My bookings Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 57 5 ) Customer dashboard – Favourites Figure 3 19 - Customer dashboard – Favourites 6 ) Customer book a Talent Figure 3 20 - Customer dashboard – My bookings Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 58 3 2 3 General 1 ) Homepage Figure 3 21 - Customer dashboard – My bookings 2 ) Gig details Figure 3 22 - Gig details Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 59 3 2 4 Admin 1 ) Admin – login Figure 3 23 - Admin - Login 2 ) Admin – Analytics Figure 3 24 - Admin – Analytics Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 60 3 ) Admin – User management Figure 3 25 - Admin – User management 4 ) Admin – Gig management Figure 3 26 - Admin gig management Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 61 3 3 Experiment result evaluation 3 3 1 Advantages Basically, “Building an Electronic Voting System Based on Blockchain” meets the needs of companies in the scope of the senior project In terms of UX/UI, my system provides simple and familiar UIs for users to interact and get information In my system, users can view the user list, sort it by a lot of things such as name, team, position, and so on and if they want to find someone, they can search that person Besides, they can view the award list, details about an award which are start day, end day, priz e, who is nominated and so on Also, they can see the winner and the ranking breakdown if that award is already finished Moreover, whenever there is an award, one day before it starts, my system will send an email to inform everyone who can vote in that a ward What''''s more? One day before its end, my system will send another email to remind them if they haven''''t voted for it yet Especially, my system resolves one of the most difficult questions of voting about the authenticity of the votes, assisting emplo yees to have no worry about their votes are recorded correctly or not The system also stores statistical data about the award that had happened 3 3 2 Disadvantages Besides the advantages mentioned above, my system still has some disadvantages : - Emp loyees cannot see the history of their votes which mean that they cannot see whom they voted for - My system can only vote on a machine that has been installed blockchain (Multichain) - The synchronization of the system is not so stable and the perform ance is not too high Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 62 CONCLUSION 1 Achievements After building this system, I could understand how to make a web application using React js , Node js, MongoDB and some libraries such as Ant Design I know how to interact between client, database, and server , how to use socket io to create real - time communication I also learn how to build a RESTful API with Node js/Express framework Besides, I gain more knowledge of the structure of Node js, its workflow as well as the framework, API and how to apply them to my project I know how to integrate a payment gateway to a web app too I also improved my skills a lot, including research skills, technical skills, presentation skills, English and many other soft skills About the project, I have already followed the plan which was created in the first week of graduation project duration and implemented all functions in that plan Besides, I also try to make the system the most flexible whose purpose is to enhance user experience Last but not lea st, I made this system that customers and talents can meet and then have some kinds of business The system includes a lot of features: - View talents list order by some information such as name, position, and so on - Search talents by name, position, team and category or price - Modify personal information including upload images - Online payment - Cronjob for reminding events Although certain resu lts have been achieved, there are still many challenges, risks, and issues with products: - The algorithm is not so optimal that some processes are not as fast as I want - Some parts of UI & UX need improving 2 Future works With some disadvantage I have already mentioned in the evaluation part, I am aware of some development directions for this system in the future, such as: - Improve performance - Make the UI & UX better - Make some flows simpl e Talent Town – Book Talents Online Student performed : Nguyen Van Phung Instructor: Dr Truong Ngoc Chau 63 REFERENCES [1] https://nodejs org/en/docs/ [2] https://www javatpoint com/nodejs - features [3] https://developer mozilla org/en - US/docs/Learn/Server - side/Express_Nodejs/Introduction [4] https://reactjs org/ [5] http s://www mongodb com/ [6] https://medium com/@martin sikora/node - js - websocket - simple - chat - tutorial - 2def3a841b61 [7] https://unsplash com/s/photos/singer [8] https://www mangopay com/