Tìm hiểu công nghệ react xây dựng website thương mại điện tử (báo cáo cuối kì đồ án 1)

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM BÁO CÁO ĐỒ ÁN TÌM HIỂU REACTJS VÀ XÂY DỰNG ỨNG DỤNG THƯƠNG MẠI ĐIỆN TỬ LUXY WINE Nhóm thực hiện: Nhóm Dương Hiển Thế 19522252 Nguyễn Tấn Thành 19522239 Gvhd: Th.S Huỳnh Tuấn Anh TP Hồ Chí Minh, 15 tháng năm 2022 LỜI CẢM ƠN Trong trình học tập, nghiên cứu phát triền đề tài “Tìm hiểu cơng nghệ React xây dựng website thương mại điện tử” chúng em nhận giúp đỡ, bảo nhiệt tình thầy để hồn thành đồ án Chúng em xin bày tỏ biết ơn đặc biệt đến Thầy Huỳnh Tuấn Anh, người trực tiếp hướng dẫn, giúp đỡ kiến thức, tài liệu phương pháp để chúng em hoàn thành đề tài Chúng em xin chân thành cảm ơn thời gian quý báu thầy dành để kiểm tra, đưa ý kiến nhận xét đóng góp nhiều vào tính năng, hướng phát triển cho đề tài.Hi vọng với báo góp ý từ thầy, nhóm đề tài tiếp túc phát triển để ứng dụng ngày mở rộng phục vụ tốt cho người dùng Mặc dù có nhiều cố gắng suốt q trình thực đề tài, song cịn có mặt hạn chế, thiếu sót Chúng em mong nhận ý kiến đóng góp dẫn thầy bạn để đề tài chúng em hoàn thiện Chúng em xin trân trọng cảm ơn! TP Hồ Chí Minh, ngày 10 tháng năm 2022 LỜI MỞ ĐẦU Các công nghệ để phát triển nên ứng dụng web q trình lớn mạnh, nhiều cơng cụ hỗ trợ tốt việc phát triển ứng dụng tảng Web Nổi bật số ReactJS Báo cáo cho đồ án mà tụi em tìm hiểu ReactJS thời gian vừa qua Trong thời đại công nghệ số 4.0, với phát triển vũ bão Internet, xu hướng kinh doanh trực tuyến hay bán hàng online đem lại hiệu kinh tế cho nhiều ngành nghề kinh doanh Việt Nam Chính vậy, nhiều doanh nghiệp phát triển website thành siêu thị hàng hố Internet, giúp người mua có thêm nhiều lựa chọn tìm kiếm thơng tin hay so sánh giá Những website đa dạng lĩnh vực sản phẩm, xu hướng phát triển có nhu cầu lớn kinh doanh quà lưu niệm Nắm bắt nhu cầu đó, Website Luxy Wine chúng em thực nhằm giải nhu cầu kinh doanh sản phẩm lưu niệm khắp vùng miền đất nước, tạo hội cho người mua sở hữu quà lưu niệm độc lạ, thấy để biến chúng thành quà ý nghĩa cho người thân Bên cạnh đó, website cịn nơi chia sẻ trải nghiệm sản phẩm lạ người dùng đăng tải để chia sẻ với người Các cơng việc mà website hỗ trợ là: Xem đặt hàng sản phẩm, xem blog, quản lý đơn hàng, quản lý blog, quản lý sản phẩm quản lý voucher giảm giá cửa hàng MỤC LỤC LỜI CẢM ƠN LỜI MỞ ĐẦU A Tìm hiểu cơng nghệ Error! Bookmark not defined ReactJS Hệ sinh thái React Đặc trưng ReactJS Lý nên chọn reactjs Tương lai phát triển ReactJS B Sử dụng ReactJS để xây dựng ứng dụng thương mại điện tử I Chương 1: Tổng Quan Thông tin chung 1.1 Tên đề tài 1.2 Nền tảng ứng dụng 1.3 Công nghệ 1.4 Nhân II Chương 2: Cơ sở lý thuyết Front end Back end Database Storage III Chương 3: Phân tích thiết kế hệ thống 10 Danh sách tính 10 Sơ đồ Use Case 11 Sơ đồ liên kết hình (Site map) 37 Sơ đồ hoạt động 38 Cơ sở liệu 45 Kiến trúc hệ thống 50 Giao diện 53 IV Chương 4: Tổng kết 84 Kết đạt 84 Hạn chế 85 Hướng phát triển 85 Cách cài đặt 85 Bảng phân công công việc 86 A TÌM HIỂU CƠNG NGHỆ ReactJS React (Hay ReactJS, React.js) thư viện Javascript mã nguồn mở để xây dựng thành phần giao diện tái sử dụng Nó tạo Jordan Walke, kỹ sư phần mềm Facebook Người bị ảnh hưởng XHP (Một tảng thành phần HTML cho PHP) React lần triển khai cho ứng dụng Newsfeed Facebook năm 2011, sau triển khai cho Instagram.com năm 2012 Nó mở mã nguồn (open-sourced) JSConf US tháng năm 2013 Mã nguồn React mở GitHub: https://github.com/facebook/react Hiện nay, thư viện nhận nhiều quan tâm đến từ cộng đồng Nó bảo trì (maintain) Facebook Instagram, với đóng góp cộng đồng lập trình viên giỏi Thế giới Hệ sinh thái React React JS thường mô tả thư viện JavaScript Đôi framework JavaScript Vậy cụ thể gì? Hay hai? Nhóm chun mơn Skillcrush định nghĩa React JS thư viện JavaScript, framework Sự khác biệt thư viện JavaScript (như React) framework JavaScript (như Angular) là: Các developer áp dụng code thư viện vào lệnh cụ thể, yêu cầu Đối với framework, tạo khung xếp trang web hay ứng dụng Rồi sau cung cấp khu vực dành riêng cho framework code Để dễ hiểu hơn, tưởng tượng code từ thư viện JavaScript đồ nội thất, trang trí cho nhà xây Cịn framework mẫu mà ta dựa vào để xây dựng nhà React JS thường bị nhầm framework hệ sinh thái mạnh mẽ, khả mở rộng lớn Do người ta xem thư viện JavaScript linh hoạt Nên nhớ, sử dụng React JS để build website hay UI ứng dụng web, ta truy cập vào: Snippet React code thành phần (như block React code, dùng để tạo phần cụ thể giao diện người dùng) Có thể sử dụng JSX để trực tiếp tác động vào DOM Một Virtual DOM, giúp cải thiện đáng kể hiệu website Nhưng hết, React JS có mã nguồn mở, nên tải xuống sửa đổi miễn phí Do đó, kích thước thư viện React tăng theo cấp số nhân với vơ vàn tiện ích, add-on khác Đặc trưng ReactJS Nếu trước muốn thay đổi thành phần web đòi hỏi phải thực thao tác với DOM Tuy nhiên với ReactJS phát triển cơng nghệ Virtual DOM vấn đề giải tốt Virtual DOM công nghệ sử dụng giúp ứng dụng có khả hoạt động ổn định mượt mà cần thay đổi thành phần website liên tục với trang web lớn, có nhiều thành phần phức tạp Đối với ReactJS sử dụng dạng cú pháp mở rộng dành riêng cho Javascript sở hữu tên gọi JSM Nhờ có JSM thay việc phải viết cú pháp cho Javascript vơ phức tạp lúc cú pháp trở nên gọn gàng, đơn giản nhiều Nó giúp công việc phát triển web thực thuận lợi, hiệu với độ xác cao Lý nên chọn reactjs Dễ dàng để học Từ đánh giá, nhận xét cộng đồng thấy ReactJS dễ dàng để tìm hiểu, tiếp cận học tập Với nguồn tài liệu phong phú, đầy đủ hướng dẫn chi tiết làm quen, hay học thành thạo điều mà đạt thực đam mê, yêu thích dành thời gian để nghiên cứu Từ tài liệu cung cấp tìm hiểu, thực hành theo khơng q khó khăn Trong điều kiện có sẵn tảng Javascript việc bắt đầu thực sau vài ngày ngắn ngủi tìm hiểu nắm bắt kiến thức liên quan Tái sử dụng nhiều thành phần Đặc trưng bật ReactJS dùng việc tập trung vào giải tầng view nên thành phần giúp tạo ứng dụng component Đồng thời chức ReactJS phân chia thành component khác để sử dụng hiệu điều tạo điều kiện cho tái sử dụng, tránh tình trạng lặp code có khả xuất Nhiều cơng cụ hỡ trợ Một ưu điểm bật, lợi ích khơng thể bỏ qua sử dụng ReactJS việc có nhiều cơng cụ hỗ trợ khác Từ công cụ kiểm tra tối ưu ứng dụng, hay công cụ debug,… sử dụng hợp lý giúp trình phát triển web, hay ứng dụng thực đạt kết cao, nhanh chóng đơn giản Cộng đồng người dùng đông đảo Tốc độ phát triển mạnh mẽ, hoàn thiện cao với độ phổ biến khẳng định ReactJS giúp người dùng dễ dàng tìm kiếm hỗ trợ cần thiết Đồng thời việc tìm kiếm thơng tin để giải đáp cho thắc mắc người dùng trở nên đơn giản nhiều Sở hữu cộng đồng phát triển đông đảo, mạnh mẽ với thư viện hoàn thiện tốt, tối ưu tối đa để sử dụng hỗ trợ cho người dùng ứng dụng ReactJS tốt Tương lai phát triển ReactJS Facebook nhóm phát triển ReactJS thể cam kết nâng cao hiệu cho ReactJS Đây điều quan trọng đối thủ VueJS thể tham vọng bám đuổi sát Và mong đợi hy vọng ReactJS cải tiến phiên tiếp theo: Cộng đồng ReactJS trông đợi phương pháp render Ví dụ, ReactJS team xây dựng thêm cú pháp phân đoạn vào JSX mà không cần key Các Developer trơng đợi phát triển quy trình xử lý lỗi Trước đây, lỗi runtime xuất lúc render, ReactJS xử lý vụng Developer phải refresh trang thông thường Ở phiên tại, lỗi đưa vô component lifecycle method Mặc dù điều giúp ngăn render data lỗi, ý tưởng tốt cho UX Tăng cường server-side rendering Mặc dù ReactJS phiên tăng cường điều này, có cải tiến tốc độ lý tưởng cho streaming, cịn mang tính quảng bá chủ yếu, chưa mang lại hiệu thực B SỬ DỤNG REACTJS ĐỂ XÂY DỰNG ỨNG DỤNG THƯƠNG MẠI ĐIỆN TỬ LUXY WINE I Chương 1: Tổng Quan Tên đề tài Website bán rượu trực tuyến Luxy Wine Nền tảng ứng dụng Web Công nghệ Front-end: ReactJS Back-end: NodeJS & ExpressJS Database: Mongodb Storage: Firebase storage Nhân STT Họ tên Dương Hiển Thế Nguyễn Tấn Thành MSSV 19522252 19522239 II Chương 2: Cơ sở lý thuyết Front end ReactJS: Như giới thiệu trước đó, ReactJS thư viện có nhiều ưu điểm cho việc lập trình ứng dụng Web Back end • NodeJS: NodeJS mã nguồn xây dựng dựa tảng Javascript V8 Engine Nó xây dựng để chạy server Javascript ngơn ngữ hướng kiện, điều xảy server tạo kiện non-blocking, nên website sử dụng NodeJS đáp ứng việc truy cập lúc lượng user lớn • ExpressJS Expressjs hay viết Express js, Express.js Đây framework mã nguồn mở miễn phí cho Node.js Express.js sử dụng thiết kế xây dựng ứng dụng web cách đơn giản nhanh chóng Vì Express js u cầu ngơn ngữ lập trình Javascript nên việc xây dựng ứng dụng web API trở nên đơn giản với lập trình viên nhà phát triển Expressjs khuôn khổ Node.js hầu hết mã code viết sẵn cho lập trình viên làm việc Nhờ có Expressjs mà nhà lập trình dễ dàng tạo ứng dụng web, nhiều web kết hợp Do có dung lượng nhẹ, Expressjs giúp cho việc tổ chức ứng dụng web thành kiến trúc MVC có tổ chức Để sử dụng mã nguồn này, cần phải biết Javascript HTML Expressjs phần công nghệ giúp quản lý ứng dụng web cách dễ dàng hay gọi ngăn xếp phần mềm MEAN Nhờ có thư viện Javascript Express js giúp cho nhà lập trình xây dựng nên ứng dụng web hiệu nhanh chóng Expressjs sử dụng để nâng cao chức Node.js Database MongoDB: hệ quản trị sở liệu NoSQL mã nguồn mở đa tảng viết C++ Bản ghi MongoDB lưu trữ dạng liệu văn (Document), cấu trúc liệu bao gồm cặp giá trị trường tương tự đối tượng JSON Storage Firebase Storage dịch vụ xây dựng cho mục đích lưu trữ quản lý nội dung mà người dùng ứng dụng tạo ảnh, videos hay liệu dạng file Firebase Storage cung cấp API cho việc uploads download file từ app bạn cách bảo mật bạn không cần quan tâm đến chất lượng đường truyền mạng Firebase Storage xây dựng tảng Google Cloud Platform nên có nhiều lợi III Chương 3: Phân tích thiết kế hệ thống Danh sách tính Stt Tên tính Đăng nhập Đăng ký Đổi mật Quên mật Đăng xuất Xem thông tin cá nhân Chỉnh sửa thông tin cá nhân Xem chi tiết đơn hàng Xem lịch sử mua hàng 10 Xem sản phẩm rượu 11 Xem sản phẩm đặc biệt 12 Xem sản phẩm phụ kiện 13 Xem tin tức 14 Xem chi tiết tin tức 15 Xem chi tiết sản phẩm 16 Xem giỏ hàng 17 Thêm sản phẩm vào giỏ hàng 18 Sửa sản phẩm gió hàng 19 Xóa sản phẩm giỏ hàng 20 Tiến hành đặt hàng Use case Xác thực người dùng Quản lý thông tin cá nhân Xem sản phẩm, tin tức Quản lý giỏ hàng Mua hàng 10 7.24 Giao diện chỉnh sửa trạng thái đơn hàng 7.25 Giao diện tạo đơn hàng (Bước 1) 73 7.26 Giao diện tạo đơn hàng ( Bước 2) 74 7.27 Giao diện tạo đơn hàng (Bước 3) 7.28 Giao diện xác nhận toán 75 7.29 Giao diện quản lý voucher 76 7.30 Giao diện chi tiết voucher 77 7.31 Giao diện sửa, xóa voucher 78 7.32 Giao diện quản lý viết 79 7.33 Giao diện thêm, chỉnh sửa viết 7.34 Giao diện quản lý banner 80 7.2 Giao diện chi tiết banner 81 7.3 Giao diện quản lý người dùng 7.4 Giao diện chỉnh sửa, thêm người dùng 82 7.5 Giao diện Dashboard 83 7.6 Giao diện chọn khoảng thời gian 7.7 Giao diện tùy chỉnh khoảng thời gian Link ảnh drive: https://drive.google.com/drive/folders/1GN9bynCk6oyQz1AnmAd0FItJ9Oj23FBo IV Chương 4: Tổng kết Kết đạt được Thông qua đồ án này, nhóm hồn tồn vận dụng ReactJS việc xây dựng ứng dụng web tận dụng Redux-thunk cho State Management để tối ưu hiệu suất ứng dụng Bên cạnh đó, thơng qua NodeJS 84 ReactJS, nhóm làm việc với MongoDb Firebase storage để quản lý liệu ứng dụng Nhóm khơng tích lũy kiến thức kinh nghiệm ReactJS mà cịn có thêm nhiều kinh nghiệm nghiệp vụ thực nghiên cứu cho ứng dụng Từ đó, nhóm đủ tự tin để tiếp tục phát triển dự án khác công nghệ trên, đặc biệt ReactJS Source code đồ án nhóm quản lý đường dẫn github sau: - https://github.com/hacThe/LuxyWine-FE - https://github.com/hacThe/LuxyWine-BE Hạn chế - Một số quy trình nghiệp vụ khâu quản lý cịn chưa hồn thiện - Giao diện chưa thực tối ưu cho nhiều thiết bị, responsive mang tính tương đối - Chưa test kĩ tính Hướng phát triển - Hoàn thành đầy đủ, chi tiết vấn đề nghiệp vụ trọng tâm - Chỉnh sửa giao diện responsive hoàn hảo cho tất thiết bị - Thực nghiệp vụ Digital Maketting, tối ưu hóa cơng cụ tìm kiếm cho trang web Cách cài đặt 4.1 Đối với người sử dụng: Giao diện : https://luxy-wine-7ijtn2uzl-hacthe.vercel.app/trang-chu Tài khoản admin: hienthe.473@gmail.com / a11111111 Đường dẫn quản lý: https://luxy-wine-7ijtn2uzl-hacthe.vercel.app/quan-ly/dashboard 4.2 Đối với lập trình viên: • Front end: − Clone repository: https://github.com/hacThe/LuxyWine-FE − Tạo thư mục env với nội dung 85 − PORT=8080 − Cài đặt thư viện: npm install − Khởi chạy ứng dụng: npm start • Back end: − Clone repository: https://github.com/hacThe/LuxyWine-BE − Tạo thư mục env với nội dung: − JWT_SECRET=Thisisprivatekey − PORT=5000 − MONGODB_URI=mongodb+srv://admin: FbMg02FyxIUfB0HX@luxywine.f1fdn.mongodb.net/myFirstDatabase?retr yWrites=true&w=majority − Cài đặt thư viện: npm install − Khởi chạy ứng dụng: npm start Bảng phân công công việc STT Thành viên Tên công việc Thế Thành Chuẩn bị, lên kế hoạch x x Khảo sát, đặc tả yêu cầu x x Thiết kế kiến trúc x x Thiết kế liệu x x Thiết kế giao diện x Chức người dùng (Front end) Chức quản lý (Front end) x Backend x x Kiểm tra sửa lỗi x x 10 Viết tổng hợp báo cáo x x 50% 50% x Tỷ lệ công việc phân công 86 Mức độ hoàn thành 100% TÀI LIỆU THAM KHẢO - https://reactjs.org/docs/getting-started.html 87 100% ... tập, nghiên cứu phát triền đề tài ? ?Tìm hiểu cơng nghệ React xây dựng website thương mại điện tử? ?? chúng em nhận giúp đỡ, bảo nhiệt tình thầy để hoàn thành đồ án Chúng em xin bày tỏ biết ơn đặc... cài đặt 85 Bảng phân công công việc 86 A TÌM HIỂU CƠNG NGHỆ ReactJS React (Hay ReactJS, React. js) thư viện Javascript mã nguồn mở để xây dựng thành phần giao diện tái sử... dụng ReactJS để xây dựng ứng dụng thương mại điện tử I Chương 1: Tổng Quan Thông tin chung 1.1 Tên đề tài 1.2 Nền tảng ứng dụng 1.3 Công nghệ