Đồ án: Xây dựng hệ thống E-commerce điện thoại đa nền tảng MERN Stack, React Native

Tìm hiểu chi tiết về xây dựng hệ thống e-commerce điện thoại đa nền tảng sử dụng stack MERN và React Native. Tối ưu hóa trải nghiệm người dùng trên mọi thiết

• Tác giả: Nguyen Thanh Nhu
• Người hướng dẫn: PhD. Le Vinh Thinh
• Trường học: Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh
• Chuyên ngành: Công nghệ Thông tin
• Đề tài: Hệ thống E-commerce điện thoại đa nền tảng MERN & React Native
• Loại tài liệu: Đồ án tốt nghiệp
• Năm xuất bản: 2021
• Địa điểm: Thành phố Hồ Chí Minh

Tóm tắt

I. Tổng quan về hệ thống E commerce điện thoại đa nền tảng MERN React Native

Hệ thống E-commerce điện thoại đa nền tảng sử dụng MERN Stack và React Native là giải pháp thương mại điện tử hiện đại. Hệ thống này cho phép bán điện thoại di động trên cả website và ứng dụng di động. MERN Stack bao gồm MongoDB, Express.js, ReactJS và Node.js. MongoDB lưu trữ dữ liệu phi quan hệ. Express.js xử lý API phía server. ReactJS xây dựng giao diện website. Node.js chạy môi trường backend. React Native phát triển ứng dụng di động đa nền tảng. Công nghệ này chia sẻ code giữa iOS và Android. Hệ thống phân vai rõ ràng giữa quản trị viên và khách hàng. Quản trị viên có toàn quyền quản lý sản phẩm, đơn hàng, doanh thu. Khách hàng có thể duyệt sản phẩm, đặt hàng và thanh toán trực tuyến. Kiến trúc này đảm bảo tính nhất quán dữ liệu giữa các nền tảng. Người dùng trải nghiệm liền mạch trên mọi thiết bị.

1.1. Kiến trúc MERN Stack trong phát triển ứng dụng E commerce

MERN Stack là bộ công nghệ JavaScript toàn diện cho phát triển web full-stack. MongoDB lưu trữ dữ liệu dạng document JSON linh hoạt. Cơ sở dữ liệu này phù hợp với dữ liệu sản phẩm điện thoại có thuộc tính đa dạng. Express.js tạo RESTful API xử lý yêu cầu HTTP hiệu quả. Framework này cung cấp middleware xử lý xác thực và phân quyền. ReactJS xây dựng giao diện người dùng tương tác cao với Virtual DOM. Thư viện này cập nhật UI nhanh chóng khi dữ liệu thay đổi. Node.js chạy JavaScript trên server, xử lý nhiều request đồng thời. Kiến trúc này thống nhất ngôn ngữ lập trình xuyên suốt dự án.

1.2. Vai trò của React Native trong phát triển ứng dụng di động đa nền tảng

React Native là framework phát triển ứng dụng di động từ Facebook. Framework này cho phép viết code một lần và chạy trên cả iOS lẫn Android. React Native sử dụng JavaScript và các component gốc. Điều này đảm bảo hiệu suất gần bằng ứng dụng native thuần túy. Trong hệ thống E-commerce điện thoại, React Native kết nối với cùng RESTful API backend. Người dùng di động truy cập đầy đủ tính năng như trên website. Các tính năng bao gồm duyệt sản phẩm, giỏ hàng, thanh toán và quản lý đơn hàng. Hot Reload tăng tốc quá trình phát triển và kiểm thử. Cộng đồng React Native lớn mạnh cung cấp nhiều thư viện hỗ trợ.

II. Phân tích yêu cầu và thách thức xây dựng hệ thống E commerce

Xây dựng hệ thống E-commerce điện thoại đa nền tảng đòi hỏi phân tích kỹ lưỡng nhiều yêu cầu. Hệ thống cần quản lý hai nhóm người dùng chính là quản trị viên và khách hàng. Quản trị viên có quyền cao nhất, quản lý sản phẩm, thương hiệu, màu sắc và đơn hàng. Quản trị viên có thể là chủ cửa hàng hoặc nhân viên quản lý. Chủ cửa hàng kiểm soát doanh thu, chi phí và hoạt động kho hàng. Nhân viên quản lý theo dõi số lượng đơn hàng theo ngày và tuần. Khách hàng chia thành hai nhóm: đã đăng ký và chưa đăng ký. Nhóm đã đăng ký sử dụng đầy đủ tính năng thanh toán, quản lý thông tin cá nhân và đánh giá sản phẩm. Dữ liệu giao dịch cần lưu trữ đầy đủ thông tin người mua, sản phẩm, người nhận và thanh toán. Thách thức lớn nhất là đảm bảo đồng bộ dữ liệu giữa website và ứng dụng di động.

2.1. Yêu cầu về vai trò người dùng và phân quyền truy cập

Hệ thống E-commerce điện thoại yêu cầu phân quyền chi tiết cho từng vai trò. Quản trị viên truy cập trang quản trị với toàn quyền thao tác. Quyền này bao gồm thêm, sửa, xóa sản phẩm và quản lý thương hiệu. Quản trị viên cũng quản lý danh sách màu sắc sản phẩm điện thoại. Khách hàng đã đăng ký được phép thanh toán trực tuyến và quản lý đơn hàng. Họ cập nhật thông tin cá nhân, xem lịch sử mua hàng và viết đánh giá. Khách hàng chưa đăng ký chỉ được phép duyệt sản phẩm và xem thông tin cơ bản. Phân quyền này đảm bảo bảo mật dữ liệu và kiểm soát truy cập hợp lý. Mỗi vai trò có giao diện riêng biệt phù hợp với nhu cầu sử dụng.

2.2. Thách thức trong quản lý dữ liệu sản phẩm và giao dịch

Quản lý dữ liệu sản phẩm điện thoại phức tạp hơn sản phẩm thông thường. Mỗi điện thoại có nhiều thuộc tính: giá, số lượng, thời gian bảo hành, màu sắc và thương hiệu. Dữ liệu cần lưu trữ dưới dạng document trong MongoDB để linh hoạt. Thông tin người mua bao gồm họ tên, quê quán, ngày sinh, nghề nghiệp, email và số điện thoại. Thông tin người nhận gồm địa chỉ giao hàng và ghi chú đặc biệt. Thông tin thanh toán cần lưu phương thức COD hoặc ví điện tử, ngày giao hàng, phí vận chuyển và tổng tiền. Thách thức là đảm bảo tính toàn vẹn dữ liệu khi nhiều giao dịch diễn ra đồng thời. Hệ thống phải xử lý trạng thái đơn hàng chính xác từ lúc đặt đến khi giao thành công.

III. Giải pháp kỹ thuật triển khai hệ thống E commerce MERN React Native

Giải pháp triển khai hệ thống E-commerce điện thoại dựa trên kiến trúc client-server hiện đại. Backend sử dụng Node.js kết hợp Express.js xây dựng RESTful API. API xử lý tất cả yêu cầu từ cả website và ứng dụng di động. MongoDB lưu trữ dữ liệu sản phẩm, người dùng và đơn hàng dưới dạng document. Mỗi collection trong MongoDB đại diện cho một thực thể như sản phẩm, thương hiệu hoặc người dùng. Frontend website sử dụng ReactJS với component-based architecture. Các component tái sử dụng giúp giảm thiểu code trùng lặp. React Native xây dựng giao diện ứng dụng di động kết nối cùng API backend. Hệ thống sử dụng JWT token xác thực người dùng trên cả hai nền tảng. Redux quản lý state toàn cục đảm bảo dữ liệu đồng bộ giữa các trang. Giải pháp này tiết kiệm thời gian phát triển và chi phí bảo trì dài hạn.

3.1. Xây dựng RESTful API với Express.js và MongoDB

RESTful API là trung tâm kết nối giữa frontend và cơ sở dữ liệu. Express.js định nghĩa các endpoint theo chuẩn REST cho từng tài nguyên. Các endpoint bao gồm GET, POST, PUT và DELETE cho sản phẩm, đơn hàng và người dùng. MongoDB lưu trữ dữ liệu dưới dạng document JSON linh hoạt. Mongoose ODM định nghĩa schema và validation cho từng collection. Middleware trong Express xử lý xác thực JWT token trước khi truy cập dữ liệu. API trả về response chuẩn với mã trạng thái HTTP phù hợp. Xử lý lỗi tập trung giúp debug nhanh chóng và thông báo lỗi rõ ràng cho người dùng. Hệ thống phân trang và lọc sản phẩm giúp tối ưu hiệu suất truy vấn.

3.2. Thiết kế giao diện người dùng với ReactJS và React Native

Giao diện người dùng được thiết kế nhất quán trên cả website và di động. ReactJS xây dựng các component cho trang sản phẩm, giỏ hàng và thanh toán. State management với Redux quản lý dữ liệu giỏ hàng và thông tin người dùng. React Router điều hướng giữa các trang mà không cần tải lại trang. React Native sử dụng cùng logic business với website nhưng render native component. Navigation trong React Native sử dụng React Navigation library. StyleSheet tối ưu giao diện cho từng kích thước màn hình di động. Cả hai nền tảng gọi cùng API backend đảm bảo dữ liệu nhất quán. Formik và Yup xử lý validation form đăng ký, đăng nhập và thanh toán.

IV. Kết luận và hướng phát triển hệ thống E commerce đa nền tảng

Hệ thống E-commerce điện thoại đa nền tảng MERN và React Native đã hoàn thành các mục tiêu đề ra. Hệ thống cung cấp đầy đủ tính năng cho cả website và ứng dụng di động. Quản trị viên quản lý hiệu quả sản phẩm, thương hiệu, màu sắc và đơn hàng. Khách hàng trải nghiệm mua sắm thuận tiện với nhiều phương thức thanh toán. Kiến trúc MERN Stack đảm bảo hiệu suất cao và khả năng mở rộng tốt. React Native giúp tiết kiệm chi phí phát triển ứng dụng đa nền tảng. Dữ liệu đồng bộ giữa website và di động nhờ RESTful API chung. Hệ thống đáp ứng yêu cầu thực tế của cửa hàng bán điện thoại di động. Dự án chứng minh tính khả thi của công nghệ MERN trong thương mại điện tử. Hướng phát triển tương lai bao gồm tích hợp thanh toán trực tuyến và hệ thống gợi ý sản phẩm thông minh.

4.1. Ưu điểm và hạn chế của giải pháp MERN React Native

Giải pháp MERN Stack và React Native có nhiều ưu điểm nổi bật. Ngôn ngữ JavaScript thống nhất xuyên suốt toàn bộ dự án giảm độ phức tạp. MongoDB linh hoạt lưu trữ dữ liệu sản phẩm có cấu trúc đa dạng. ReactJS và React Native chia sẻ logic business tiết kiệm thời gian phát triển. Cộng đồng lớn mạnh cung cấp tài liệu và thư viện phong phú. Tuy nhiên hệ thống cũng có hạn chế cần lưu ý. MongoDB không phù hợp với dữ liệu yêu cầu mối quan hệ phức tạp. React Native có thể gặp vấn đề hiệu suất với animation phức tạp. SEO cho ứng dụng React cần thêm kỹ thuật Server-Side Rendering. Bảo mật API cần được cải thiện liên tục chống tấn công phổ biến.

4.2. Tiềm năng mở rộng và ứng dụng thực tế của hệ thống

Hệ thống E-commerce MERN và React Native có tiềm năng mở rộng lớn. Có thể tích hợp cổng thanh toán trực tuyến như VNPay, MoMo hoặc ZaloPay. Hệ thống gợi ý sản phẩm dựa trên lịch sử duyệt web tăng doanh số bán hàng. Tích hợp chatbot hỗ trợ khách hàng trực tuyến cải thiện trải nghiệm người dùng. Mở rộng sang bán nhiều loại sản phẩm khác ngoài điện thoại di động. Triển khai microservices architecture xử lý hàng triệu giao dịch mỗi ngày. Tích hợp hệ thống quản lý kho hàng tự động và dự báo nhu cầu. Hệ thống có thể ứng dụng cho các cửa hàng bán lẻ điện tử tiêu dùng. Mô hình này dễ nhân rộng cho các doanh nghiệp vừa và nhỏ tại Việt Nam.

Trích đoạn nội dung tài liệu

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN RESEARCH FOR BUILDING A MULTI-PLATFORM PHONE E-COMMERCE SYSTEM (MOBILE AND WEBSITE) MERN STACK AND REACT-NATIVE APPLICATION GVHD:LE VINH THINH SVTH: NGUYEN THANH NHU NGO HOANG MINH TAM SKL008089 Tp. Hồ Chí Minh, tháng 07/2021 HCMC UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING GRADUATION PROJECT RESEARCH FOR BUILDING A MULTI-PLATFORM PHONE E-COMMERCE SYSTEM (MOBILE AND WEBSITE) MERN STACK AND REACT-NATIVE APPLICATION NGUYEN THANH NHU Student ID: 17110202 NGO HOANG MINH TAM Student ID: 17110218 Major: INFORMATION TECHNOLOGY Advisor: LE VINH THINH PhD. Ho Chi Minh City, July 2021 HCMC UNIVERSITY OF TECHNOLOGY AND EDUCATION FACULTY FOR HIGH QUALITY TRAINING GRADUATION PROJECT RESEARCH FOR BUILDING A MULTI-PLATFORM PHONE E-COMMERCE SYSTEM (MOBILE AND WEBSITE) MERN STACK AND REACT-NATIVE APPLICATION NGUYEN THANH NHU Student ID: 17110202 NGO HOANG MINH TAM Student ID: 17110218 Major: INFORMATION TECHNOLOGY Advisor: LE VINH THINH PhD. Ho Chi Minh City, July 2021 THE SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom– Happiness -------- Ho Chi Minh City, July 23, 2021 GRADUATION PROJECT ASSIGNMENT Student name: Nguyen Thanh Nhu Student ID: 17110202 Student name: Ngo Hoang Minh Tam Student ID: 17110218 Major: Information technology Class: 2017 Advisor: Le Vinh Thinh PhD.

Date of assignment: March 15, 2021 Date of submission: July 20, 2021 1. Project title: Research for building a multi-platform phone e-commerce system (mobile and website) MERN Stack and React-Native application. Initial materials provided by the advisor: None 3. Content of the project: Building an E-commerce system to sell phones on Website and Mobile platforms: • Backend: Learn and build RESTful API based on non-relational database MongoDB based on NodeJS Express framework.

• Website frontend: Learn and connect API to create website interface through ReactJS library. • Mobile frontend: Learn and connect API to create mobile application interface through React Native library. Final product: Website and mobile app ensure the necessary functions. CHAIR OF THE PROGRAM ADVISOR (Name and signature) (Name and signature) THE SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom– Happiness -------- ADVISOR’S EVALUATION SHEET Student name: Nguyen Thanh Nhu Student ID: 17110202 Student name: Ngo Hoang Minh Tam Student ID: 17110218 Major: Information technology Research for building a multi-platform phone e-commerce system (mobile and website) MERN Stack and React-Native application Advisor: Le Vinh Thinh PhD.

Content of the project:. Approval for oral defense? (Approved or denied) .) Ho Chi Minh City, ., 2021 ADVISOR (Name and signature) THE SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom– Happiness -------- PRE-DEFENSE EVALUATION SHEET Student name: Nguyen Thanh Nhu Student ID: 17110202 Student name: Ngo Hoang Minh Tam Student ID: 17110218 Major: Information technology Project title: Research for building a multi-platform phone e-commerce system (mobile and website) MERN Stack and React-Native application Name of Reviewer:. Content and workload of the project. Approval for oral defense? (Approved or denied) .) Ho Chi Minh City, ., 2021 REVIEWER (Name and signature) THE SOCIALIST REPUBLIC OF VIETNAM Independence – Freedom– Happiness -------- EVALUATION SHEET OF DEFENSE COMMITTEE MEMBER Student name: Nguyen Thanh Nhu Student ID: 17110202 Student name: Ngo Hoang Minh Tam Student ID: 17110218 Major: Information technology Project title: Research for building a multi-platform phone e-commerce system (mobile and website) MERN Stack and React-Native application Name of Defense Committee Member:.

Content and workload of the project .) Ho Chi Minh City, ., 2021 COMMITTEE MEMBER ACKNOWLEDGEMENTS Our whole group was very fortunate to receive guidance and help from teachers and friends during the implementation process. Now, the group would like to send this sincere thanks to Mr. Le Vinh Thinh, who directly supported the group during the process of choosing the topic, guiding, commenting, and giving suggestions as well as providing reference materials. Without the guidance and practical experience of the teacher, we think that this topic will be difficult to complete and complete on time.

Once again, the whole team would like to thank Mr. Le Vinh Thinh. We would also like to thank the teachers in the Department of High-Quality Training for their help in supporting the group's knowledge and answering questions. Along with that, the group would like to thank their classmates for providing a lot of useful information and knowledge to help the group complete the topic better.

The time is limited, along with limited knowledge and many other surprises, so the omission is inevitable, so the team is looking forward to receiving your valuable comments from the teachers to improve their knowledge. group is to be improved later. We sincerely thank you! i TABLE OF CONTENTS Acknowledgements. i Table of contents .v List of tables.

vi List of figures. Tools and techniques .3 Chapter 2 THEORETICAL BASIS .5 Chapter 3 REQUIREMENTS ANALYSIS. Review the pros and cons of similar services:. Research roles and functions.

Issue of records, books, and transaction documents. Assess the current situation and solutions. Functional and non-functional requirements. List of actors.

System Overview Usecase. Detailed Description of Usecase .15 Chapter 4 SOFTWARE DESIGN. E-commerce Mobile App.92 iii Chapter 5 IMPLEMENTATION AND TESTING. Run backend server.

Run frontend server. Run chatbot server. Run mobile app .122 iv ABSTRACT MERN: MongoDB (M), ExpressJS (E), React (R) và NodeJS (N) JS: Javascript API: Application Programming Interface JSON: JavaScript Object Notation HTTP: Hyper Text Transfer Protocol JWT: Json Web Token v LIST OF TABLES vi vii viii ix LIST OF FIGURES x xi xii Chapter 1 INTRODUCTION Subject name Research and build a cross-platform phone e-commerce system (Mobile & Website) using MERN Stack and React Native. The urgency of the subject Currently, advanced technologies develop more and more strongly and are applied more and more in the fields of economy, production as well as people's daily life.

A typical point in the development of such technologies is the application of information technology in almost all activities. Thanks to that, the work is done quickly, accurately, and with much higher results. When society is developing, people's living standards are improved, and economic income is improving, the mobile phone is no longer strange to everyone, but on the contrary, it is an indispensable item. indispensable for people today.

Most people equip themselves with a phone that suits their needs and pocket. However, with today's increasingly busy life, to want to buy a favorite phone, consumers have to go to the store to choose, so it will take a lot of time and effort. Along with the reasons mentioned above, through researching the project team, it is known that the application of selling mobile phones online will help customers reduce the time and effort to go to the store to buy. If you want to choose a phone that suits your budget, you just need to sit next to a computer with an internet connection to be able to buy the phone you need.

Besides, smart mobile devices such as smartphones are now also an inseparable object of each person, so a cross-platform multi-platform sales system that connects will help customers' purchasing decisions. goods are always timely and fast. Therefore, the project team chose to carry out the topic "Research and build a cross-platform phone selling system (Mobile and Website) using MERN Stack and React Native". The system is built with the orientation to make shopping for customers' phones easier and faster, without wasting time and effort, giving customers the same experience as buying a phone at a physical store.

Chapter 1: INTRODUCTION 1 Purpose of the topic Building an E-commerce system to sell phones on two platforms Website and Mobile: • Backend: Learn and build RESTful API based on non-relational database MongoDB based on NodeJS Express framework. • Front-end Website: Learn and connect API to create website interface through ReactJS library. • Mobile Application: Learn and connect API to create mobile application interface through React Native library. Object and scope of the study 1.

Functional requirements The object of the topic in the system is to build a system for customers to access and perform the behavior of viewing, purchasing products, managing purchased orders,. from the system (customers have not registered yet logged in and logged in). Along with that, the administrator can manage the system with basic administrator functions. Requirements of the customer user group: - The interface is easy to use and has high aesthetics.

- Allow customers to register for membership and ensure confidentiality of information. - View and change account information. - The form of payment must be accurate. - Product information is rich and diverse.

- Introduce and sell many types of goods and items so that customers have many opportunities to choose about one type of item. Information about a product must be detailed so that customers can grasp information about the product they choose. Especially the items that many customers are interested in. - Always update, introduce the latest generations of phones.

- Product warranty information must be clear. - Allow customers to buy products in installments. Chapter 1: INTRODUCTION 2 - For customers to manage their orders, a notification will appear when there is an update of order information. - Customers can chat for product advice.

- Allow customers to search quickly and accurately according to many criteria. Requirements of the system administrator user group: - General management: related to the information of customers, goods,. - Updating goods information online. - Easily update and regularly change images, detailed price information of items you will do business with anywhere.

- Manage, store and report information about orders and status of orders: delivered yet, multi-payment. - Detailed statistics specific, accurate and fast. - Statistics on which items are sold out, which are best-selling, which are in stock, which items need to be edited. - Summary of daily, weekly, monthly, quarterly, and annual revenue and expenditure.

- Aggregate and store customer feedback to be able to answer. - Customers quickly and accurately. - Products: Can add, edit and delete information, categories. - Receive and respond to customer requests.

- Manage other information: promotions,. Tools and techniques Tools and techniques used for the project Tool Name Front-end ReactJS, React Native Back-end NodeJS, Express, SocketIO Chatbot Rasa Chapter 1: INTRODUCTION 3 IDE Visual Code DBMS MongoDB Source Control Github Modeling tool draw.io, Enterprise Architect, dataedo Expected results achieved Understand the knowledge of MERN Stack, React Native, Restful API. Complete a website and a mobile application selling phones online with full basic features. Chapter 1: INTRODUCTION 4 Chapter 2 THEORETICAL BASIS What is MERN Stack? MERN is the acronym for MongoDB, Express JS, React JS, and Node JS.

The MERN stack is a combination of the above technologies, all based on JavaScript, used to build advanced web applications. It is an open-source full-stack development framework, it provides entire front-end to back-end development components. [1] MongoDB MongoDB is an open-source, cross-platform, NoSQL DBMS. It is a document-oriented database, which means that data is saved using collections and documents, instead of tables and rows, like in a relational database.

This makes possible easier and faster data integration within applications. [1] MongoDB stores the data in binary JSON format that allows the fast exchange of data between client and server. [1] MongoDB can be used for the storage of large volumes of data, which makes it highly scalable. [1] Express JS Express JS is a modular, lightweight framework of NodeJS, that helps in building web applications.

[1] It is a server-side, back-end, JavaScript-based framework, that is designed to write simplified, fast, and secure applications. [1] It can be assumed that Express JS, runs on top of the Node JS, managing the server and its routes. ReactJS React JS is an open-source JavaScript library used to build user interfaces, typically for single-page applications. [1] React JS enables developers to modify/edit and refresh the page to view the changes without having to restart or reload the page.