BUILDING A SYSTEM OF AUCTION AND SALE FOR AGRICULTURAL PRODUCTS.

THE UNIVERSITY OF DANANG UNIVERSITY OF SCIENCE AND TECHNOLOGY FACULTY OF INFORMATION TECHNOLOGY GRADUATION PROJECT DEPARTMENT: INFORMATION TECHNOLOGY SPECIALIZED: SOFTWARE TECHNOLOGY PROJECT : BUILDING A SYSTEM OF AUCTION AND SALE FOR AGRICULTURAL PRODUCTS. STUDENT : Ha Nguyen Khanh STUDENT CODE : 102150094 CLASS : 15T2 INSTRUCTOR : Hoa Do Thi Tuyet Da Nang, 12/2019 COMMENT OF INSTRUCTOR .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... COMMENT OF REVIEWER .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... .......................................................................................................................................... PREFACE In fact, there is no success that is not associated with the help of more or less from others. During the past five years, when I started studying in this university, I have received a lot of help from my teachers, family and friends. First of all, I would like to express my sincere thanks to all the teachers of the Faculty of Information Technology - Da Nang University of Technology for teaching and guiding me during the past five years. I would like to express my sincere thanks to Ms. Do Thi Tuyet Hoa, who gave her whole-hearted guidance, as well as for creating all the conditions for me to complete this graduation project. If it weren''''t for her insightful instructions, evaluation, and advice, I think completing my graduation project would be much more difficult. Once again I would like to sincerely thank you. The project is implemented in a period of 3 months. First step into practice, explore the field of web applications, with limited knowledge and many surprises. Therefore, the inevitable shortcomings. I look forward to receiving valuable comments from teachers and friends to improve my knowledge in this field. Lastly, I would like to wish the teachers in the Faculty of Information Technology and Ms. Do Thi Tuyet Hoa so healthy and confident to continue the beautiful mission of imparting knowledge to the next generation. Best regards! Da Nang, Day ...., Month ...., Year 2019 Nguyen Khanh Ha 5 ASSURANCE I swear : 1. The content of this project is done by me under the direct guidance of Ms. Do Thi Tuyet Hoa. 2. The references are clearly cited with the author''''s name, the name of the work, the time and place of publication. 3. If there are invalid or infringing copies, I accept full responsibility. Student Nguyen Khanh Ha 6 TABLE OF CONTENT PREFACE i ASSURANCE ii TABLE OF CONTENT iii LIST OF TABLES, PICTURES vi LIST OF SYMBOL, ACRONYM viii INTRODUCTION 1 1. About the topic 1 2. Purpose, request. 1 3. Research Methods 1 4. Tools used 1 5. Result 2 6. Content of the project. 2 CHAPTER 1:THEORETICAL BASIS 3 1.1. Overview of server side 3 1.1.1. Framework Node.js 3 1.1.1.1. Definition of Node.js 3 1.1.1.2. Nodejs operating model 3 1.1.1.3. Advantages of Node.js 4 1.1.2. Framework Express.js 5 1.1.2.1. Express.js 5 1.1.2.2. Express.js structure 5 1.1.3. JWT standard (JSON Web Token) 5 1.1.3.1. JSON Web Token 5 1.1.3.2. Explain more about three components of JWT 6 7 1.1.4. MongoDB 7 1.1.4.1. Introduction 7 1.1.4.2. Advantages of MongoDB compared to relational database (RDBMS) 7 1.1.4.3. Some characteristics of MongoDB 8 1.1.5. Visual Studio Code programming environment 8 1.2. Overview of Client-side 8 1.2.1. React.js 8 1.2.1.1. Introduction 8 1.2.1.2. What is React? 9 1.2.2. Redux.js 9 1.2.2.1. Introduction 9 1.2.2.2. Principle 10 The first, Single source of truth 10 The second, State is read-only 10 And the last, Changes are made with pure functions 10 1.2.2.3. Redux structure 11 1.3. Application of real-time interaction between client-server 11 1.3.1. Websocket 11 1.3.2. How to transfer data in real time 12 1.3.2.1. Create a connection 12 1.3.2.2. Handshake 12 1.4. Single-page in React.js 13 1.5. Conclusion of chapter 14 CHAPTER 2:SYSTEM ANALYSIS AND DESIGN 14 2.1. Introduction 14 2.1.1 Purpose 14 2.1.2. Interface requirements 15 2.1.3. Non-functional requirements 15 2.2. System design 16 2.2.1. Actors 16 8 2.2.2. Use case diagram 17 2.2.2.1. Diagrams 17 2.2.2.2. Use case description. 21 2.2.3. Sequence diagram 26 2.2.4. Class diagram 27 2.2.5. Database design 29 CHAPTER 3:DEPLOYMENT AND EVALUATION OF RESULT 33 3.1. Deployment 33 3.1.1. Environment 33 3.1.2. Install MongoDb 34 3.2. Result 34 3.2.1. Client website 34 3.2.2. Admin website 44 CONCLUSION 45 - Result: 46 - Unfulfilled results 46 - Development direction 46 REFERENCES 47 9 LIST OF TABLES, PICTURES Table 2.1: Login use case 22 Table 2.2: Logout use case 23 Table 2.3: Register use case 23 Table 2.4: Add product use case 24 Table 2.5: Update Product use case 24 Table 2.6: Delete Product use case 24 Table 2.7: Search Product 25 Table 2.8: See product by category use case 25 Table 2.9: View Product use case 25 Table 2.10:Add bid section use case 26 Table 2.11: Bid product use case 26 Table 2.12: User Table 30 Table 2.13: Role Table 31 Table 2.14: AccessToken Table 31 Table 2.15: Product Table 31 Table 2.16: Category Table 32 Table 2.17: Auction Table 32 Table 2.18: AuctionDetail Table 32 Table 2.19: Cart Table 33 Table 2.20: CurrencyUnit Table 33 Table 2.21: Announcement Table 33 Table 2.22: FAQ Table 34 Picture 1.1: Describe how the Node.js works 4 Picture 1.2:Structure of Express.js 5 Picture 1.3: Redux structure 11 Picture 1.4: WebSocket connection 13 10 Picture 1.5: Single page application 14 Picture 2.1: Overview use case 18 Picture 2.2: Owner use cases 19 Picture 2.3: Overview customer use case 20 Picture 2.4: Customer use case 21 Picture 2.5: Admin use case 22 Picture 2.6: Create auction sequence diagram 27 Picture 2.7: Bid product sequence diagram 28 Picture 2.8: Class diagram 29 Picture 2.9: Database design 30 Picture 3.1: Home page client website 36 Picture 3.2: Login page 37 Picture 3.3: Register page 38 Picture 3.4: Profile page 39 Picture 3.5: Products pages 40 Picture 3.6: UI of products for owner 41 Picture 3.7: Owner add auction for their product 41 Picture 3.8: Owner’s products after successfully add auction 42 Picture 3.9: Product detail page 43 Picture 3.10: Customer bid product by add money 44 Picture 3.11: Bid Table updated after that 44 Picture 3.12: Customer cart where contain products that they win in auctions 44 Picture 3.13: Login page 45 Picture 3.14: Homepage 46 Picture 3.15: User management 46 11 LIST OF SYMBOL, ACRONYM ACRONYM: - JWT: Json Web Token - RDBMS: Relational Database Management System - JSON: JavaScript Object Notation - URI: Uniform Resource Identifier - MVC: Model View Controller - HTTP: Hypertext Transfer Protocol - TCP: Transmission Control Protocol - FAQ: Frequently Asked Question - SPA: Single Page Application 12 Building a system of auction and sale for agricultural products INTRODUCTION 1. About the topic With the strong development of information technology in recent years, its application in life is not too strange to us. From industry, service, transportation to agriculture, ... Its appearance helps to promote economic development and life clearly. Helps reduce investment in labor power while improving economic efficiency. In this topic, I focus on the agricultural sector, specifically on agricultural products. It can be seen that for many years, farmers have always been in a precarious situation because the products they make are too dependent on some traders. Some are exclusive and may determine the price for the item at a pinch price. With the aim of limiting the ''''crop gain, crop loss'''' situation of Vietnamese farmers in general due to lack of information and demand for their products, the main cause is often forced by some traders. Since then, I have devised this topic with the purpose of building a platform where the prices of agricultural products become transparent and stable in accordance with the rules of the market economy. 2. Purpose, request. I proposed this idea with the desire to help farmers be more active in solving the problem of consuming the products they make. With just a few simple steps, they can find out the highest possible price of the product they make and the unit that consumes that product, as well as compare it with the market average. From that, avoiding the pressure of traders to price, improve economic efficiency. To achieve that goal, it is required to understand the relevant knowledge such as the law of supply and demand, e-commerce, auction, ... 3. Research Methods - System analysis and design. - Create the database. - Build system. - Software Testing. Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 13 Building a system of auction and sale for agricultural products 4. Tools used - Database: Mongodb - Backend: Node.js - Frontend: React.js 5. Result About theory: Understand the profession of auctions and e-commerce. Capture emerging technologies like nodejs and reactjs, understand how NoSQL Mongodb works. About application: Develop a system to meet the needs of auctioning agricultural products and buying and selling functions for users. Also demonstrate the management functions for the system administrator. 6. Content of the project. Projects include the following: - Chapter 1: Theoretical basis - Chapter 2: System analysis and design - Chapter 3: Deployment and evaluation of result - Conclusion and development direction. Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 14 Building a system of auction and sale for agricultural products CHAPTER 1: THEORETICAL BASIS 1.1. Overview of server side 1.1.1. Framework Node.js 1.1.1.1. Definition of Node.js Node.js is an open-source server side runtime environment built on Chrome''''s V8 JavaScript engine. It provides an event driven, non-blocking (asynchronous) I/O and cross-platform runtime environment for building highly scalable server-side application using JavaScript. Node.js can be used to build different types of applications such as command line application, web application, real-time chat application, REST API server etc. However, it is mainly used to build network programs like web servers, similar to PHP, Java, or ASP.NET. Node.js was written and introduced by Ryan Dahl in 2009. 1.1.1.2. Nodejs operating model Node.js processes user requests differently when compared to a traditional web server model. Node.js runs in a single process and the application code runs in a single thread and thereby needs less resources than other platforms. All the user requests to your web application will be handled by a single thread and all the I/O work or long running job is performed asynchronously for a particular request. So, this single thread doesn''''t have to wait for the request to complete and is free to handle the next request. Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 15 Building a system of auction and sale for agricultural products When asynchronous I/O work completes then it processes the request further and sends the response. An event loop is constantly watching for the events to be raised for an asynchronous job and executing callback function when the job completes. Picture 1.1: Describe how the Node.js works 1.1.1.3. Advantages of Node.js Besides speed and scalability, using JavaScript on servers and browsers helps you avoid having to switch languages. You can do anything with only one language. Another strong point of Nodejs is extremely suitable for JSON. JSON is considered ideal when used by a JavaScript program. When working with nodejs, data can flow through layers without having to reformat. In the end, JavaScript is really popular, which makes it easier to develop Node apps than other server-side languages. Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 16 Building a system of auction and sale for agricultural products 1.1.2. Framework Express.js 1.1.2.1. Express.js Express js is a small, but flexible framework built on top of Nodejs. It provides powerful features for web or mobile development About support packages: Express.js has a multitude of support packages so you don''''t have to worry about working with this framework. About performance: Express.js provides more features for better programming. Not reducing the speed of Node.js. 1.1.2.2. Express.js structure Picture 1.2:Structure of Express.js 1.1.3. JWT standard (JSON Web Token) 1.1.3.1. JSON Web Token JSON Web Token (JWT) is an open standard (RFC 7519) that defines a compact and closed way for securely transmitting information between parties as a JSON object. This information can be verified and trusted because it is digital signature. JWTs can be signed using a secret algorithm or a public / private key. Example: Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 17 Building a system of auction and sale for agricultural products eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjEzODY4OTkxMzEsImlzcyI6Im ppcmE6MTU0ODk1OTUiLCJxc2giOiI4MDYzZmY0Y2ExZTQxZGY3YmM5MGM4YWI2ZDBmNjIwN 2Q0OTFjZjZkYWQ3YzY2ZWE3OTdiNDYxNGI3MTkyMmU5IiwiaWF0IjoxMzg2ODk4OTUxfQ.u KqU9dTB6gKwG6jQCuXYAiMNdfNRw98Hw_IWuA5MaMo And this is the structure: .. In its compact form, JSON Web Tokens consist of three parts separated by dots (.), which are: - Header - Payload - Signature 1.1.3.2. Explain more about three components of JWT Header The header typically consists of two parts: the token type and the signing algorithm used for encryption (HMAC SHA256 or RSA). { "alg": "HS256", "typ": "JWT" } Payload The second part of the token is the payload, which contains the claims. Claims are statements about an entity (typically, the user) and additional data. There are three types of claims: registered, public and private claims. - Registered claims Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 18 Building a system of auction and sale for agricultural products These are a set of predefined claims which are not mandatory but recommended, to provide a set of useful, interoperable claims. Some of them are: iss (issuer), exp (expiration time), sub (subject), aud (audience) and others. - Public Claims These can be defined at will by those using JWTs. But to avoid collisions they should be defined as URI that contains a collision resistant namespace. - Private Claims These are the custom claims created to share information between parties that agree on using them and are neither registered or public claims. The payload is then Base64Url encoded to form the second part of the JWT. Signature To create the signature part, you have to take the encoded header, the encoded payload, a secret, the algorithm specified in the header, and sign that. For example, if you want to use HMAC SHA256 algorithm, the signature will be created in the following way: HMACSHA256 ( base64UrlEncode(header) + "." + base64UrlEncode(payload), secret ) Because the Signature itself includes both headers and payloads, the Signature can be used to check the integrity of the data when transmitting. Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 19 Building a system of auction and sale for agricultural products 1.1.4. MongoDB 1.1.4.1. Introduction MongoDB is an open source, document-oriented NoSQL database program in which tables are flexibly structured to allow data stored on tables without having to follow a certain type of structure. Because of this flexible structure, MongoDB can be used to store complex and diverse structured data. 1.1.4.2. Advantages of MongoDB compared to relational database (RDBMS) - Fewer Schema: MongoDB is a Document-based database, in which a Collection holds different documents. The number of fields, content, and size of one Document may differ from another. - The structure of an object is clear. - No complicated joins. - MongoDB is easy to expand. - The mapping of application objects to database objects is unnecessary. 1.1.4.3. Some characteristics of MongoDB - Document oriented repository: Data is stored in JSON style. - Indexing on any attribute. - Diverse queries. - Faster update. 1.1.5. Visual Studio Code programming environment Visual Studio Code is a Microsoft product, launched in April 2015 at the Build conference. Features are simple, compact, easy to install. Visual Studio Code can be installed on Windows, Linux and Mac OS and supports multiple languages. Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 20 Building a system of auction and sale for agricultural products 1.2. Overview of Client-side 1.2.1. React.js 1.2.1.1. Introduction Let me understand this with a practical example: Let’s say one of your friends posted a photograph on Facebook. Now you go and like the image and then you started checking out the comments too. Now while you are browsing over comments you see that likes count has increased by 100, since you liked the picture, even without reloading the page. This magical count change is because of Reactjs. React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It’s ‘V’ in MVC. Reactjs is an open-source, component-based front end library responsible only for the view layer of the application. It is maintained by Facebook. React uses a declarative paradigm that makes it easier to reason about your application and aims to be both efficient and flexible. It designs simple views for each state in your application, and React will efficiently update and render just the right component when your data changes. The declarative view makes your code more predictable and easier to debug. A react application is made of multiple components, each responsible for rendering a small, reusable piece of HTML. Components can be nested within other components to allow complex applications to be built out of simple building blocks. A component may also maintain internal state. NOTE : React is not a framework. It is just a library developed by Facebook to solve some problems. 1.2.1.2. What is React? React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called “components”. Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 21 Building a system of auction and sale for agricultural products 1.2.2. Redux.js 1.2.2.1. Introduction Redux is a state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger . You can use Redux together with React , or with any other view library. It is tiny (2kB, including dependencies). 1.2.2.2. Principle Redux can be described in three fundamental principles: The first, Single source of truth The state of your whole application is stored in an object tree within a single store . This makes it easy to create universal apps, as the state from your server can be serialized and hydrated into the client with no extra coding effort. A single state tree also makes it easier to debug or inspect an application; it also enables you to persist your app''''s state in development, for a faster development cycle. Some functionality which has been traditionally difficult to implement - Undo/Redo, for example - can suddenly become trivial to implement, if all of your state is stored in a single tree. The second, State is read-only The only way to change the state is to emit an action , an object describing what happened. This ensures that neither the views nor the network callbacks will ever write directly to the state. Instead, they express an intent to transform the state. Because all changes are centralized and happen one by one in a strict order, there are no subtle race Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 22 Building a system of auction and sale for agricultural products conditions to watch out for. As actions are just plain objects, they can be logged, serialized, stored, and later replayed for debugging or testing purposes. And the last, Changes are made with pure functions To specify how the state tree is transformed by actions, you write pure reducers . Reducers are just pure functions that take the previous state and an action, and return the next state. Remember to return new state objects, instead of mutating the previous state. You can start with a single reducer, and as your app grows, split it off into smaller reducers that manage specific parts of the state tree. Because reducers are just functions, you can control the order in which they are called, pass additional data, or even make reusable reducers for common tasks such as pagination. Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 23 Building a system of auction and sale for agricultural products 1.2.2.3. Redux structure Picture 1.3: Redux structure 1.3. Application of real-time interaction between client-server 1.3.1. Websocket The Websocket are a full duplex communications protocol initiated over HTTP. They are commonly used in modern web applications for streaming data and other synchronous traffic. Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 24 Building a system of auction and sale for agricultural products Most communication between web browsers and web sites uses HTTP. With HTTP, the client sends a request and the sever returns a response. Typically, the response occurs immediately, and the transaction is complete. Even if the network connection stays open, this will be used for a separate transaction of a request and a response. Some modern web sites use Websocket. Websocket connections are initiated over HTTP and are typically long lived. Messages can be sent in either direction at any time and are not transactional in nature. The connection will normally stay open and idle until either the client or the server is ready to send a message. 1.3.2. How to transfer data in real time 1.3.2.1. Create a connection To connect to the remote host, create a new WebSocket object and pass the destination endpoint URL. var ws = new WebSocket("ws://echo.websocket.org", "myProtocol"); 1.3.2.2. Handshake When creating a WebSocket connection, the first step is a handshake via TCP where both the client and server agree to use the WebSocket protocol. Client Handshake: GET /chat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ== Origin: http://example.com Sec-WebSocket-Protocol: chat, superchat Sec-WebSocket-Version: 13 Server Handshake: HTTP/1.1 101 Switching Protocols Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 25 Building a system of auction and sale for agricultural products Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo= Sec-WebSocket-Protocol: chat The WebSocket connection is initiated by upgrading from the HTTP protocol to the WebSocket protocol during the handshake process between the client and the server via the same TCP connection. The Upgrade header is included in the request to notify the server that the client wants to make a WebSocket connection. Picture 1.4: WebSocket connection 1.4. Single-page in React.js A single-page application is an app that works inside a browser and does not require page reloading during use. You are using this type of applications every day. These are, for instance: Gmail, Google Maps, Facebook or GitHub. Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 26 Building a system of auction and sale for agricultural products SPAs are all about serving an outstanding UX by trying to imitate a “natural” environment in the browser - no page reloads, no extra wait time. It is just one web page that you visit which then loads all other content using JavaScript - which they heavily depend on. SPA requests the markup and data independently and renders pages straight in the browser. We can do this thanks to the advanced JavaScript frameworks like AngularJS. Single-page sites help keep the user in one, comfortable web space where content is presented to the user in a simple, easy and workable fashion. Picture 1.5: Single page application 1.5. Conclusion of chapter Through the content mentioned in chapter 1, we have an overview of the theoretical basis as well as the technologies applied in the project. Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 27 Building a system of auction and sale for agricultural products CHAPTER 2: SYSTEM ANALYSIS AND DESIGN 2.1. Introduction 2.1.1 Purpose The purpose of this document is to describe in detail the functions of the project. Detailed illustration of functions to build a complete system. Through it, explain clearly about the constraints of the system. The basic functions of the system: - Register an account. - Login into system. - Manage personal profile. - Create product. - Manage product information. - Create the auction for every product. - Bid product. 2.1.2. Interface requirements - User interface requirements: The interface is easy to see, intuitive and the most informative display. The interface is divided into many areas, but it is required to ensure consistency and not to cause distractions when operating. - Admin Interface: Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 28 Building a system of auction and sale for agricultural products The administrator interface must provide the most general overview of the system such as a list of locations, a list of users and a full range of function keys. 2.1.3. Non-functional requirements - Efficiency: The system must be relatively stable, meet certain page load speed with not much traffic. The system ensures optimal loading of page elements, without wasting resources. - Safety requirements: The system operates independently, does not depend on any software, does not affect other software. - Security requirements: The system ensures that the user information is most confidential, not using unknown JavaScript libraries. User passwords are not transmitted as plain-text. The password saved to the database must be unidirectional and cannot be decompiled. 2.2. System design 2.2.1. Actors - Owner Owner login into system Owner manage personal information Owner create the auction relative to their product Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 29 Building a system of auction and sale for agricultural products - Customer Customer login into system. Customer manage personal information. Customer bid product - Admin Admin manage user in system and other information Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 30 Building a system of auction and sale for agricultural products 2.2.2. Use case diagram 2.2.2.1. Diagrams Picture 2.1: Overview use case - Owner Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 31 Building a system of auction and sale for agricultural products Picture 2.2: Owner use cases Login use case allow owner login into system Manage product use case allow owner manage informations about their product in system include basic functions like view, create, update, delete product Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 32 Building a system of auction and sale for agricultural products Manage bid session use case allow owner create auction for their product. Manage profile use case allow owner manage personal information Logout use case allow owner log out from system - Customer Picture 2.3: Overview customer use case Customer actor are divided into 2 categories: New customers only have basic functions such as viewing products. To perform other functions, the system requires them to register for an account. Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 33 Building a system of auction and sale for agricultural products Customers have registered for an account, they have all the functions described in detail below. Picture 2.4: Customer use case Login use case allow customer login into system See products use case allow customer view list of products. They can also view by category or search product if they want Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 34 Building a system of auction and sale for agricultural products Bid product use case allow customer join an auction that owner created before. When that auction end, product is sent to winner cart. Manage profile use case allow customer manage personal information Logout use case allow owner log out from system - Admin Picture 2.5: Admin use case Manage User use case allow admin manage user and account in this system. 2.2.2.2. Use case description. Table 2.1: Login use case Name Login Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 35 Building a system of auction and sale for agricultural products Actor All Relative Use case None Description Allow all user login into system. Previous condition None Next condition Success: logged into system Fail: notice error and return login page Table 2.2: Logout use case Name Logout Actor All Relative Use case Login Description Allow all user logout from system. Previous condition Logged into system Next condition Success: redirect to login page. Fail: notice error and return login page Table 2.3: Register use case Name Register Actor Owner, Customer Relative Use case None Description Allow all user register to have an account using for login into system with following information: - First name - Last name - Birthday - Gender - Phone - Email - Address Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 36 Building a system of auction and sale for agricultural products - Username - Password - Avatar Previous condition None Next condition Success: redirect to login page. Fail: notice error Table 2.4: Add product use case Name Add product Actor Owner Relative Use case Login Description Allow owner user create their product with complete information: - Name - Code - Price - Unit - Mass - Quantity - Expiry Date - Description - Category - Images Previous condition Logged into system. Next condition Success: redirect to list of owner product (Profile page) Fail: notice error Table 2.5: Update Product use case Name Update product Actor Owner Relative Use case Login Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 37 Building a system of auction and sale for agricultural products Description Allow owner user update their product. Previous condition Logged into system. Next condition Success: redirect to list of owner product (Profile page) Fail: notice error Table 2.6: Delete Product use case Name Delete product Actor Owner Relative Use case Login Description Allow owner user delete their product Previous condition Logged into system. Next condition Success: redirect to list of owner product (Profile page) Fail: notice error Table 2.7: Search Product Name Search product Actor All Relative Use case None Description Allow user search products via keyword they put into search part. Previous condition None Next condition Show list of products that is result of search Table 2.8: See product by category use case Name See by category Actor All Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 38 Building a system of auction and sale for agricultural products Relative Use case None Description Allow user see products by category. Previous condition None Next condition Show list of products by category Table 2.9: View Product use case Name View product Actor All Relative Use case None Description Allow user see product detail. Previous condition None Next condition None Table 2.10:Add bid section use case Name Add bid section Actor Owner Relative Use case Login, Add product Description Allow owner user add bid section products with following information: - Start time - End time Previous condition Logged into system and created product. Next condition Success: redirect list of products. Fail: show error. Table 2.11: Bid product use case Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 39 Building a system of auction and sale for agricultural products Name Bid product Actor Customer Relative Use case Login Description Allow customer user bid product by add bid money for this product Previous condition Logged into system and add bid money that greater than current biggest bid money of this product Next condition Success: Show bid table with new data Fail: show error. 2.2.3. Sequence diagram Sequence diagram about a process of an auction that is created by owner Picture 2.6: Create auction sequence diagram Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 40 Building a system of auction and sale for agricultural products Sequence diagram about process bid a product of customer Picture 2.7: Bid product sequence diagram 2.2.4. Class diagram Class diagram with some main class User: User register to create an entity called User. User can interact with system via User entity There are 3 object that inherit from User: Admin, Customer and Owner Product: Product that created by Owner Category: Category of product Auction: Bid session that created by Owner AuctionDetail: Auction detail information include customers with their bid money. Cart: Cart that contain product for winner customer Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 41 Building a system of auction and sale for agricultural products Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 42 Building a system of auction and sale for agricultural products Picture 2.8: Class diagram 2.2.5. Database design Picture 2.9: Database design Table 2.12: User Table Property Name Explain Data type Note id User id String firstName User firt name String lastName User last name String birthday User birthday Date gender User gender Boolean Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 43 Building a system of auction and sale for agricultural products address User Address String phone User phone String email User email String username User account String password password String status status boolean roleId Role id String foreign key of Role Table 2.13: Role Table Property Name Explain Data type Note id Role id String role Role name String Table 2.14: AccessToken Table Property Name Explain Data type Note id id String userId User id String Foreign key of User token Token String period Period of time of token Integer Table 2.15: Product Table Property Name Explain Data type Note id Product id String Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 44 Building a system of auction and sale for agricultural products name Product name String code Product code String price Initial product price Decimal unitId Currency unit id String Foreign key of CurrencyUnit description Product description String images Product images String Array of image paths categoryId Category id String Foreign key of Category userId User id String Foreign key of User Table 2.16: Category Table Property Name Explain Data type Note id Category id String name Category name String description Category description String parentId Parent category id String Foreign key of Category Table 2.17: Auction Table Property Name Explain Data type Note id Auction id String ownerId Owner user id String Foreign key of User Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 45 Building a system of auction and sale for agricultural products productId Product id String Foreign key of Product startTime Start time DateTime endTime End time DateTime winnerId Winner User id String Foreign key of User Table 2.18: AuctionDetail Table Property Name Explain Data type Note id Auction Detail id String userId User id String Foreign key of User auctionId Auction id String Foreign key of Auction bidMoney Bid money Decimal Table 2.19: Cart Table Property Name Explain Data type Note id Cart id String auctionId Auction id String Foreign key of Auction userId User id String Foreign key of User productId Product id String Foreign key of Product shippingDate Shipping date DateTime shippingTo Shipping address String Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 46 Building a system of auction and sale for agricultural products total total String Maybe ignore by add last price in to product object Table 2.20: CurrencyUnit Table Property Name Explain Data type Note id Currency unit id String unit Currency unit name String Table 2.21: Announcement Table Property Name Explain Data type Note id Announcement id String userId User id String Foreign key of User title title of announcement String content content of announcement String Table 2.22: FAQ Table Property Name Explain Data type Note id FAQ id String question question String answer answer String Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 47 Building a system of auction and sale for agricultural products CHAPTER 3: DEPLOYMENT AND EVALUATION OF RESULT 3.1. Deployment 3.1.1. Environment System is deployed on web, works on internet connected browsers such as Chrome, Firefox, Internet Explorer ... - Operating system: Configured on Linux operating system - Scope of use: Can be used on all browsers - Product is written according to the Client-Server model - Programming languages: React.js, Node.js, GraphQL 3.1.2. Install MongoDb - In Linux, open terminal and install nodejs, npm: sudo apt install nodejs The nodejs package contains both node and npm. Check the version after install: nodejs --version - Then,install Mongodb: sudo apt install -y mongodb 3.2. Result 3.2.1. Client website Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 48 Building a system of auction and sale for agricultural products Picture 3.1: Home page client website Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 49 Building a system of auction and sale for agricultural products Picture 3.2: Login page Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 50 Building a system of auction and sale for agricultural products Picture 3.3: Register page Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 51 Building a system of auction and sale for agricultural products Picture 3.4: Profile page Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 52 Building a system of auction and sale for agricultural products Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 53 Building a system of auction and sale for agricultural products Picture 3.5: Products pages Picture 3.6: UI of products for owner Picture 3.7: Owner add auction for their product Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 54 Building a system of auction and sale for agricultural products Picture 3.8: Owner’s products after successfully add auction Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 55 Building a system of auction and sale for agricultural products Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 56 Building a system of auction and sale for agricultural products Picture 3.9: Product detail page Picture 3.10: Customer bid product by add money Picture 3.11: Bid Table updated after that Picture 3.12: Customer cart where contain products that they win in auctions Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 57 Building a system of auction and sale for agricultural products 3.2.2. Admin website Picture 3.13: Login page Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 58 Building a system of auction and sale for agricultural products Picture 3.14: Homepage Picture 3.15: User management Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 59 Building a system of auction and sale for agricultural products CONCLUSION 1. Result: During the time of studying theoretical basis and deploying technology application, the project has achieved the following results: 1. About theory - Understand the basic theory of web programming - Steps to complete a product in reality. - System analysis and design step by step 2. In practical terms Complete an application that applies to the auction and sale of agricultural commodities: Complete functions: - Register an account. - Login into system. - Manage personal profile. - Create product. - Manage product information. - Create the auction for every product. - Bid product. Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 60 Building a system of auction and sale for agricultural products 2. Unfulfilled results The user interface is quite simple, not yet complete the statistical functions for the owner and the customer delivery functions Uncomplete functions: - View history of auctions - Checkout product after winning the auction and shipping follow 3. Development direction Some research and development directions of the topic are as follows: - Improved user interface - Complete the view history of auctions and add statistical functions for owners - Complete the checkout product and add delivery function for customers - Add online payment Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 61 Building a system of auction and sale for agricultural products Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 62 Building a system of auction and sale for agricultural products REFERENCES [1] NodeJS: https://nodejs.org/en/ [2] ReactJS: https://reactjs.org/ [3] Stackoverflow: http://stackoverflow.com/ Student: Nguyen Khanh Ha Instructor: Do Thi Tuyet Hoa 63