Xây dựng web bán hàng e commerce

BÁO CÁO ĐỒ ÁN MÔN HỌC CÔNG NGHỆ WEB ĐỀ TÀI: XÂY DỰNG WEB BÁN HÀNG E-COMMERCE Giảng viên hướng dẫn : Lương Trần Hy Hiến • Sinh viên thực hiện: Trần Hồng Khang • MSSV: 4501104108 • Nhóm: MEVN Thành phố Hồ Chí Minh, tháng 12 năm 2021 Lời cảm ơn Lời chúng em xin chân thành cảm ơn thầy Lương Trần Hy Hiến giảng dạy môn “Công nghệ Web” trường đại học Sư Phạm TPHCM, hướng dẫn nhóm làm đồ án mơn học Trong thời gian học tập thực hành hướng dẫn thầy, chúng em thu nhiều kiến thức hay bổ ích Nếu khơng có lời hướng dẫn, dạy bảo thầy chúng em nghĩ đồ án chúng em khó hồn thành Mặc dù cố gắng hoàn thiện đồ án với tất nỗ lực, nhiên trình tìm hiểu, xây dựng đồ án thời gian có hạn kiến thức hạn chế, nhiều bỡ ngỡ, nên đồ án “Xây dựng Web bán hàng E-Commerce” chắn tránh khỏi thiếu sót Chúng em mong nhận quan tâm, thơng cảm đóng góp quý báu thầy để đồ án ngày hồn thiện tích lũy thêm kinh nghiệm để thực tốt đồ án sau Mục lục Lời cảm ơn Mục lục Danh mục hình ảnh I Công nghệ sử dụng Web MERN stack Ngăn xếp MERN hoạt động nào? Ưu điểm MERN Stack Tại sử dụng mern stack để phát triển ứng dụng web? Lợi ích kinh doanh việc sử dụng ngăn xếp công nghệ MERN 10 MongoDB 13 MongoDB gì? 13 Hoạt động MongoDB gì? 13 Lý nên chọn MongoDB 14 Khi nên sử dụng MongoDB ? 14 Cài đặt MongoDB 15 Expressjs 15 Expressjs gì? 15 Lý nên chọn Expressjs? 15 Lợi ích framework Express 17 Cách cài đặt Expressjs 17 React 17 React gì? 17 Tại lại chọn React để sử dụng? 18 Node.js 19 Những ứng dụng NodeJS lập trình web 19 Lý chọn Nodejs 20 Cài đặt NodeJS 21 Redux 21 Redux 21 Tại lại chọn redux để sử dụng? 21 II Phần báo cáo cá nhân: Trần Hoàng Khang 22 Kết nối sở liệu MongoDB: 22 Đăng ký người dùng (User): 24 Đăng nhập người dùng: 25 Các Middleware người dùng: 26 4.1: validateRegisterRequest: 26 4.2: validateLoginRequest: 26 Các chức User: 27 5.1 Thao tác với giỏ hàng: 27 5.2 Thêm địa toán: 28 5.3 Tạo kiểm tra đơn hàng: 29 Danh mục hình ảnh Hình 1: Minh họa cho ngăn xếp MERN Hình 1.1: Minh họa cho công nghệ Hình 1.3: Các ngơn ngữ lập trình sử dụng nhiều số nhà phát triển tồn giới, tính đến năm 2021 12 Hình 2: Minh họa MongoDB 13 Hình 3: Ảnh minh họa Expressjs 16 Hình 5: Bảng thống kê lượng Developer sử dụng Nodejs vào cuối năm 2020 20 Hình 6: Minh họa cho store 22 I Công nghệ sử dụng Web MERN stack MERN viết tắt MongoDB, Express, React, Node, theo tên bốn cơng nghệ tạo nên ngăn xếp • MongoDB - sở liệu tài liệu • Express (.js) - Khung web Node.js • React (.js) - khung JavaScript phía máy khách • Node (.js) - máy chủ web JavaScript hàng đầu Express Node tạo nên tầng (ứng dụng) Express.js khung công tác web phía máy chủ Node.js tảng máy chủ JavaScript mạnh mẽ phổ biến Bất kể bạn chọn biến thể nào, ME (RVA) N cách tiếp cận lý tưởng để làm việc với JavaScript JSON, lúc, nơi Ngăn xếp MERN hoạt động nào? Kiến trúc MERN cho phép bạn dễ dàng xây dựng kiến trúc tầng (giao diện người dùng, phụ trợ, sở liệu) hoàn toàn JavaScript JSON Hình 1: Minh họa cho ngăn xếp MERN MEAN VS MERN VS MEVN Hình 1.1: Minh họa cho công nghệ MEAN, MERN MEVN công nghệ hỗ trợ người tạo trang web ứng dụng di động Cả ba bao gồm MongoDB, Express.js (do bắt đầu “ME”) NodeJS Sự khác biệt ngăn xếp MEAN, MERN MEVN tìm thấy chữ thứ ba từ viết tắt MEAN ngăn xếp JavaScript dựa vào việc sử dụng Angular cho khung JavaScript front-end nó, đó, ngăn xếp MERN dựa React hệ sinh thái Cuối cùng, MEVN dựa vào Vue.js hệ sinh thái Nhưng phổ biến có nhiều tài liệu để tìm kiếm có MERN MEAN stack Ưu điểm MERN Stack Ưu điểm ngăn xếp MERN phát triển web dịng mã viết JavaScript, ngơn ngữ lập trình gần phổ biến quan trọng mã phía máy chủ phía máy khách Bằng cách sử dụng ngơn ngữ lập trình nhất, ngăn xếp MERN loại bỏ nhu cầu chuyển đổi ngữ cảnh đơn giản hóa đáng kể tồn q trình phát triển, mang đến cho nhà phát triển web công cụ để tạo ứng dụng web hiệu với nỗ lực Các ngăn xếp công nghệ sử dụng nhiều ngơn ngữ lập trình khiến nhà phát triển phải tự tìm cách giao diện chúng cách, cách sử dụng ngăn xếp JavaScript MERN, nhà phát triển cần biết JavaScript JSON Để học MERN, người ta tham gia chương trình đào tạo trực tuyến MERN Stack Làm việc MERN stack mang lại kết mạnh mẽ cách đơn giản hiệu Biết cách bạn xung quanh ngăn xếp kỹ quan trọng việc xây dựng triển khai ứng dụng MERN vững trở nên quan trọng tương lai Node.js xây dựng dựa thời gian chạy JavaScript Chrome để tạo điều kiện thuận lợi cho việc xây dựng ứng dụng mạng hoạt động nhanh với khả mở rộng dễ dàng Nền tảng hoạt động cách sử dụng mơ hình I / O không chặn, theo hướng kiện, hiệu Tính hiệu đơn giản Node.js khiến trở thành tảng lý tưởng cho ứng dụng thời gian thực chạy thiết bị phân tán, đặc biệt ứng dụng có yêu cầu liệu cao Nhưng Node.js có nhiều tiềm kết hợp với ngăn xếp MERN Kết xuất giao diện người dùng hiệu suất React JS tốt nói trừu tượng lớp giao diện người dùng Vì React thư viện nên cung cấp cho bạn tự để xây dựng ứng dụng tổ chức mã theo cách bạn muốn Vì vậy, tốt Angular hiệu suất kết xuất giao diện người dùng Hiệu chi phí Vì MERN Stack sử dụng ngơn ngữ xun suốt Javascript nên có lợi cho công ty thuê chuyên gia Javascript thay thuê chuyên gia khác cho công nghệ khác Việc di chuyển giúp tiết kiệm nhiều thời gian tiền bạc Nguồn mở Tất công nghệ liên quan đến MERN mã nguồn mở Tính cho phép nhà phát triển nhận giải pháp cho truy vấn phát triển q trình phát triển, từ cổng mở có sẵn Kết là, có lợi cho nhà phát triển Dễ dàng chuyển đổi máy khách máy chủ Vì thứ viết ngơn ngữ nên MERN đơn giản nhanh chóng Và dễ dàng chuyển đổi máy khách máy chủ Tại sử dụng mern stack để phát triển ứng dụng web? Tăng cường bảo mật: Các ứng dụng MERN stack phát triển dễ dàng tích hợp với nhà cung cấp dịch vụ lưu trữ bảo mật để giữ thông tin an tồn trước cơng mạng Cùng với việc đảm bảo độ bền lưu trữ liệu, tích hợp giúp quản lý bảo mật thiết bị người dùng, cho phép bạn sử dụng tảng thương mại điện tử an toàn chống trộm Khả tương thích với đám mây khả mở rộng cao: Vì mặt hàng liên tục thêm vào tảng thương mại điện tử, khơng có cách mà khả mở rộng bị xâm phạm Cùng với Node.js tối đa hóa khả xử lý, ngăn xếp MERN bao gồm sở liệu NoSQL - MongoDB, có khả mở rộng cao tương thích với lưu trữ đám mây Do đó, liệu thu thập từ tảng thương mại điện tử quản lý dễ dàng từ nơi giới Giao diện người dùng tùy chỉnh giảm độ phức tạp: Ngăn xếp MERN hỗ trợ kiến trúc Model View Controller (MVC) hỗ trợ tùy biến không giới hạn giao diện người dùng tảng Do đó, thay quản lý nội dung thơng qua bảng phụ trợ, bạn sửa đổi giao diện người dùng để cung cấp trải nghiệm độc đáo cho người dùng bạn Khả tái sử dụng mã: Các thành phần trang web phát triển thông qua công nghệ MERN hốn đổi cho tái sử dụng Nó có nghĩa phần mã từ dự án dễ dàng sử dụng lại tảng thương mại điện tử khác Do đó, thành phần tái sử dụng phê duyệt sản xuất cho phép trang web thương mại điện tử phát triển liền mạch nhanh chóng, cho phép bạn nhận sản phẩm với thời gian quay vịng tối thiểu Sửa đổi linh hoạt: Vì tất mã thành phần lưu trữ tảng đám mây, nên việc kiểm tra mã sửa đổi chúng từ xa trở nên dễ dàng Điều làm giảm thời gian phát triển thử nghiệm ứng dụng vòng đời phát triển phần mềm cho phép thay đổi ứng dụng nhanh chóng hiệu Lợi ích kinh doanh việc sử dụng ngăn xếp công nghệ MERN Sự kết hợp công nghệ MERN Stack làm cho trở nên lý tưởng để phát triển nhiều loại ứng dụng Nó cho phép triển khai ứng dụng nhanh chóng dễ dàng Vì nhà phát triển làm việc MERN Stack có kiến thức bốn thành phần, nên hoạt động trình phát triển hiệu chi phí Cơng nghệ nguồn mở Các cơng ty khởi nghiệp thích MERN mã nguồn mở liên tục cải tiến chuyên gia công nghệ khắp giới Tất thành phần ngăn xếp MERN mã nguồn mở bạn sử dụng để tạo ứng dụng web mạnh mẽ Ví dụ: AngularJS frontend framework mã nguồn mở tạo rõ ràng để giải số vấn đề vốn có phiên HTML JavaScript trước Các khung cải thiện hiệu viết mã cung cấp vô số công cụ để giúp bạn xây dựng ứng dụng nâng cao nhanh Mẫu miễn phí có sẵn trực tuyến Các mẫu miễn phí có sẵn trực tuyến, điều giúp bạn tiết kiệm nhiều thời gian Tôi ba lần thời gian để tùy chỉnh chủ đề so với việc tải xuống giải pháp bán sẵn Bạn nhận trợ giúp từ chuyên gia bạn gặp phải vấn đề trình thực Nhiều tảng có cộng đồng trực tuyến, nơi bạn đăng câu hỏi nhận phản hồi mã trực tiếp từ nhà phát triển khác làm việc với tảng Việc học ln dễ dàng chuyên gia để nắm lấy tay bạn! Cho phép bạn xây dựng nhanh chóng Các ngăn xếp MERN dựa công nghệ mã nguồn mở mà nhà phát triển sử dụng tự do, có nghĩa bạn khơng phải xây dựng thứ từ đầu Ví dụ: bạn muốn tảng blog, phát triển khuôn khổ phổ biến WordPress 10 Các hệ thống có tần suất write/insert lớn Sử dụng làm search engine Cài đặt MongoDB Truy cập vào trang web https://www.mongodb.com/try/download/community Download file cài đặt (msi zip), trường hợp download file zip ta cần giải nén khơng cần cài đặt gì, sau bắt đầu cấu hình Mở file vừa tải tiến hành chạy file cài đặt Sau chạy xong, vào thư mục chứa file tải để khởi động MongoDB Sử dụng IP 127.0.0.1:27017 để tạo kết nối đến mongoDB Expressjs Expressjs gì? Expressjs hay cịn 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ì Expressjs 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 khn 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 Lý nên chọn Expressjs? 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 Expressjs giúp cho nhà lập trình xây dựng nên ứng dụng web hiệu 15 nhanh chóng Expressjs sử dụng để nâng cao chức Node.js Express lựa chọn hoàn hảo cho máy chủ cần tạo hiển thị API (ví dụ: API REST) để giao tiếp ứng dụng khách với ứng dụng máy chủ bạn.Trong năm qua, tồn vài giao diện truyền thông phổ biến (API) hai thực thể Tuy nhiên, phổ biến gọi REST xác định vào năm 2000 Roy Fielding Đó kiến trúc tận dụng giao thức HTTP phép giao tiếp ứng dụng khách ứng dụng máy chủ Ứng dụng máy chủ cung cấp API REST gọi máy chủ RESTful Các máy chủ không tuân theo kiến trúc REST 100% gọi RESTish RESTful Trên thực tế, không sử dụng Expressjs, bạn phải thực nhiều bước lập trình phức tạp để xây dựng nên API hiệu Express js giúp cho việc lập trình Node.js trở nên dễ dàng có nhiều tính bổ sung Hình 3: Ảnh minh họa Expressjs Tổng hợp số chức Expressjs sau: • Thiết lập lớp trung gian để trả HTTP request • Define router cho phép sử dụng với hành động khác dựa phương thức HTTP URL • Cho phép trả trang HTML dựa vào tham số 16 Lợi ích framework Express Framework giúp cho việc phát triển ứng dụng rút ngắn nhiều Cũng framework dựa ngôn ngữ khác Rails (Ruby); Django (Python); Laravel, CakePHP (PHP)… Express xây dựng dựa NodeJs Vậy có ưu điểm để ta lựa chọn cho việc phát triển ứng dụng Express hỗ trợ việc phát triển ứng dụng theo mơ hình MVC, mơ hình phổ biến cho việc lập trình web Cho phép định nghĩa Middleware hỗ trợ cho việc tổ chức tái sử dụng code Định nghĩa routes request method đến server cách dễ dàng Hỗ trợ REST API Cách cài đặt Expressjs ● Bước 1: cài đặt NodeJs npm ● Bước 2: dùng npm để cài đặt ExpressJs Tại cửa sổ CMD thực lệnh sau: npm init npm install save express React React gì? React (cịn gọi React.js ReactJS ) thư viện JavaScript front-end mã nguồn mở miễn phí để xây dựng giao diện người dùng dựa thành phần UI Nó trì Meta (trước Facebook) cộng đồng nhà phát triển công ty cá nhân React sử dụng làm sở để phát triển ứng dụng single - page ứng dụng di động Tuy nhiên, React quan tâm đến việc quản lý trạng thái hiển thị trạng thái cho DOM , đó, việc tạo ứng dụng React thường yêu cầu sử dụng thư viện bổ sung để định tuyến, số chức phía máy khách định 17 Tại lại chọn React để sử dụng? React sử dụng hàng trăm công ty lớn giới, bao gồm Netflix, Airbnb, American Express, Facebook, WhatsApp, eBay, Instagram Đây chứng cho thấy cơng cụ có số lợi cạnh tranh với đối thủ khác Dưới số lý để sử dụng Dễ sử dụng React thư viện GUI nguồn mở JavaScript tập trung vào điều cụ thể; hồn thành nhiệm vụ UI hiệu Nó phân loại thành kiểu “V” mơ hình MVC (Model-View-Controller) Là lập trình viên JavaScript, bạn dễ dàng hiểu điều React Bạn chí bắt đầu phát triển ứng dụng dựa web cách sử dụng react vài ngày Nó hỗ trợ Reusable Component Java React cho phép bạn sử dụng lại components phát triển thành ứng dụng khác có chức Tính tái sử dụng component lợi khác biệt cho lập trình viên Viết component dễ dàng React component dễ viết sử dụng JSX, mở rộng cú pháp tùy chọn cho JavaScript cho phép bạn kết hợp HTML với JavaScript JSX pha trộn tuyệt vời JavaScript HTML Nó làm rõ tồn q trình viết cấu trúc trang web Ngoài ra, phần mở rộng giúp render nhiều lựa chọn dễ dàng Hiệu suất tốt với Virtual DOM React cập nhật hiệu q trình DOM (Document Object Model – Mơ hình đối tượng tài liệu) Như bạn biết, q trình gây nhiều thất vọng dự án ứng dụng dựa web May mắn React sử dụng virtual DOMs, bạn tránh vấn đề Cơng cụ cho phép bạn xây dựng virtual DOMs host chúng nhớ Nhờ vậy, có thay đổi DOM thực tế, virtual thay đổi 18 Hệ thống ngăn DOM thực tế để buộc cập nhật liên tục Do đó, tốc độ ứng dụng khơng bị gián đoạn Thân thiện với SEO React cho phép bạn tạo giao diện người dùng truy cập cơng cụ tìm kiếm khác Tính lợi lớn tất khung JavaScript thân thiện với SEO Ngồi ra, React tăng tốc q trình ứng dụng nên cải thiện kết SEO Cuối tốc độ web đóng vai trị quan trọng tối ưu hóa SEO Node.js Nodejs xây dựng phát triển từ năm 2009, bảo trợ công ty Joyent, trụ sở California, Hoa Kỳ Nodejs tảng (Platform) phát triển độc lập xây dựng Javascript Runtime Chrome mà xây dựng ứng dụng mạng cách nhanh chóng dễ dàng mở rộng Phần Core bên Nodejs viết hầu hết C++ nên cho tốc độ xử lý hiệu cao Nodejs tạo ứng dụng có tốc độ xử lý nhanh, realtime thời gian thực Nodejs áp dụng cho sản phẩm có lượng truy cập lớn, cần mở rộng nhanh, cần đổi công nghệ, tạo dự án Startup nhanh Những ứng dụng NodeJS lập trình web • NodeJS tạo, mở, đọc, ghi, xóa đóng tệp truy cập máy chủ • Xây dựng nội dung cho trang web động • Thực thu thập liệu theo yêu cầu cụ thể • Thực truy vấn, sửa, xóa, thêm liệu hệ quản trị sở như: Microsoft SQL Server, MySQL, MongoDB, PostgreSQL 19 Lý chọn Nodejs • Ứng dụng Nodejs phần đông viết ngôn ngữ lập trình javascript ngơn ngữ thơng dụng, sử dụng rộng rãi chạy nhiều trình duyệt, tảng, hệ điều hành, • Nodejs nhẹ lại hiệu nhờ vào chế non-blocking I/O, chạy đa tảng Server dùng Event-driven • Tương thích với nhiều thiết bị, chạy ứng dụng phát triển Nodejs thiết bị nào, dù Mac, Window, Linux, • Ứng dụng NodeJS có khả chạy đa tảng, thiết bị, đồng thời đáp ứng yêu cầu thời gian thực • Node.js có tốc độ nhanh, xử lý nhu cầu sử dụng lượng khách truy cập ‘khổng lồ’ thời gian cực ngắn • Ứng dụng phát triển Node.js có khả xử lý nhiều yêu cầu truy cập lúc, ‘cứu’ website khỏi nguy bị ‘sập’ lượng truy cập nhiều Hình 5: Bảng thống kê lượng Developer sử dụng Nodejs vào cuối năm 2020 20 Cài đặt NodeJS Bước 1: Truy cập vào địa https://nodejs.org/en/download/ để cài đặt NodeJS Bước 2: Tiến hành kiểm tra lại trạng thái cài đặt cách: Vào cmd -> node –v Bước 3: Tạo thư mục dùng để chứa nội dung cho dự án Trong đó, tạo file có tên DuAn.js nhập nội dung cần viết là: Console.log(‘Xin chào’); Để chương trình chạy, vào thư mục vừa tạo tiến hành thao tác Shift + chuột phải vào thư mục chọn Open PowerShell window here Khi cửa sổ command line lên, gõ lệnh: node Duan.js Lúc này, cửa sổ command line lên để khai báo biến NodeJS Redux Redux Redux thư viện JavaScript mã nguồn mở để quản lý tập trung trạng thái ứng dụng Nó sử dụng phổ biến với thư viện React Angular để xây dựng giao diện người dùng Tương tự (và lấy cảm hứng từ) kiến trúc Flux Facebook , tạo Dan Abramov Andrew Clark Redux thư viện nhỏ với API giới hạn, đơn giản thiết kế để trở thành vùng chứa đốn trước cho trạng thái ứng dụng Nó hoạt động theo kiểu tương tự hàm giảm , khái niệm lập trình hàm Tại lại chọn redux để sử dụng? Chúng ta có hồn tồn build project hoàn chỉnh với React Nhưng project bạn ngày lớn, với ngày nhiều component, việc sử dụng React để quản lý state trở nên phức tạp Đây lúc Redux toả sáng; làm giảm bớt phức tạp ứng dụng lớn Nếu bạn hiểu qua React thị bạn biết luồng liệu React component cha truyền props cho component Trong ứng 21 dụng khổng lồ với liệu phải chạy qua nhiều component thông qua state props, tin đi, code bạn trở nên khó đọc khó cải thiện, chưa kể tiềm ẩn nhiều bug khơng đáng có Với Redux, có store nơi chứa tất state Nếu state thay đổi component A, phản ánh lên store, component cần biết đến thay đổi state component A subcribe lên store.Component A gửi thay đổi state lên store, component B C cần state chúng lấy trực tiếp từ store Hình 6: Minh họa cho store II Phần báo cáo cá nhân: Trần Hoàng Khang Backend – User Kết nối sở liệu MongoDB: Kết nối thực qua đường dẫn URL đến sở liệu MongoDB qua thư viện “mongoose” 22 Kết nối qua MongoDBCompass: Với tên CSDL gồm collection (bảng) categories, pages, products users Kết nối qua file env (Enviroment), biến môi trường process.env Nodejs phần sử dụng nhiều dự án Nodejs thực tế, việc lưu trữ thông tin môi trường giúp cho trình làm việc deploy dự án dễ dàng tăng khả bảo mật cho thông tin cá nhân mật khẩu,… 23 Đăng ký người dùng (User): Được gọi folder Routes với Api : “localhost:5000/api/register” Sẽ thông qua Middleware (sẽ tìm hiểu cụ thể mục 4) với giao thức next() để thực thi đến hàm register folder Controller (“api/src/controller/auth.js”) Tại đây, bước đầu tìm kiếm User trùng lặp không tiến hành đăng ký người dùng với thuộc tính họ, tên, email mật Sử dụng ứng dụng Postman để thực thi API để đăng ký người dùng (User) có tên Khang Tran 24 Cùng lúc đó, sở liệu MongoDB cập nhật User vừa đăng ký: Đăng nhập người dùng: API đăng nhập (Login) : “localhost:5000/api/login” Thực đăng nhập qua Postman: 25 Sau đăng nhập thành công nhận token hình để giúp xác nhận chức mà User thực hiện: Các Middleware người dùng: 4.1: validateRegisterRequest: Dùng thư viện express-validator với hàm check để kiểm tra liệu đầu vào, tránh trường hợp người dùng nhập sai cố tình nhập sai để truy cập trái phép vào hệ thống 4.2: validateLoginRequest: Tương tự đăng ký User Kiểm tra email mật đăng nhập User 26 Các chức User: Để sử dụng chức mình, User ln phải kiểm tra qua Middleware userMiddleware để xác nhận role User: (“api/src/commonmiddleware/index.js”) Ví dụ Postman, điều kiện kiểm tra thiếu token thông báo yêu cầu “Authorization required” tức lúc hệ thống chưa thể xác nhận người truy cập thuộc role user hay admin 5.1 Thao tác với giỏ hàng: Sau chọn mặt hàng ưng ý, người dùng bắt đầu thêm sản phẩm vào giỏ hàng Cũng quản lý chúng để phục vụ nhu cầu mua sắm API thêm vào giỏ: “localhost:5000/api/user/cart/add-to-cart” Ở mục Header ta phải thêm token qua cú pháp: 27 Tích vào Authorization, cột Value: Bearer[khoảng trắng] Với token nhận đăng nhập User thành cơng Ngồi thao tác với giỏ hàng cịn: • getCartItems: Xem giỏ hàng • removeItem: Xóa sản phẩm giỏ hàng API gọi từ Routes (“api/src/routes/cart.js”) đến middleware thư mục Validation(“api/src/validators/auth.js”) đến hàm thực thi Controller (“api/src/controller/cart.js”) 5.2 Thêm địa toán: Sau chọn sản phẩm người dùng tiến hành toán sản phẩm với việc thêm địa tốn Và sau kiểm tra địa lại cần API: “localhost:5000/api/user/address/create” Xác nhận đăng nhập qua middleware requireLogin xác nhận role người dùng qua userMiddleware Sau gọi hàm addAddress Controller(“api/src/controller/cart.js”) 28 5.3 Tạo kiểm tra đơn hàng: Sau thêm địa toán xác nhận địa chỉ, User tiến hành khởi tạo đơn hàng với hàm addOrder Ta thấy có hai hàm giống getOrder getOrders Với phương thức /get người dùng xem tất đơn hàng theo User ID Với phương thức /post người dùng tìm đơn hàng cụ thể theo orderID có tạo đơn hàng END 29 ... thiện đồ án với tất nỗ lực, nhiên trình tìm hiểu, xây dựng đồ án thời gian có hạn kiến thức hạn chế, nhiều bỡ ngỡ, nên đồ án ? ?Xây dựng Web bán hàng E-Commerce? ?? chắn tránh khỏi thiếu sót Chúng em... quan trọng việc xây dựng triển khai ứng dụng MERN vững trở nên quan trọng tương lai Node.js xây dựng dựa thời gian chạy JavaScript Chrome để tạo điều kiện thuận lợi cho việc xây dựng ứng dụng mạng... 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ì Expressjs 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