XÂY DỰNG WEBSITE BÁN đồ NỘI THẤT

NỘI DUNG

Với sự phát triển mạnh mẽ của Javascript và nhu cầu ngày càng tăng trong việc phát triển ứng dụng web và di động, Mern Stack đang trở thành lựa chọn ưu tiên để thiết kế website nhờ vào những lợi thế vượt trội của nó.

MERN STACK là công nghệ dùng để xây dựng các ứng dụng web nâng cao Ngăn xếp MERN bao gồm các thành phần nguồn mở khác nhau bao gồm:

● M= MongoDB: Cơ sở dữ liệu NoSQL phổ biến.

● E= Express: Web Framework nhẹ và di động.

● R= React: Thư viện Javascript để xây dựng giao diện người dung.

● N= Node.js: Môi trường thực thi Server – side Javascript.

Các thành phần này cung cấp hỗ trợ để các nhà phát triển làm việc và là bộ Combo Open Source các công nghệ đều liên quan tới JavaScript.

STACK là một chương trình hoàn thiện bao gồm không chỉ mã nguồn mà còn cả hệ điều hành và các phần mềm hỗ trợ như web server và cơ sở dữ liệu Tất cả những thành phần này được kết hợp lại để hình thành một technical stack.

II LỊCH SỬ PHÁT TRIỂN

1 Lịch sử phát triển Reactjs

ReactJS, được ra mắt vào năm 2013, bắt đầu chỉ là các trang HTML tĩnh Sự xuất hiện của CSS và JavaScript đã nâng cao khả năng tương tác, giúp người dùng tạo ra những trang web đẹp hơn Tuy nhiên, trước đó, việc gửi và nhận file vẫn còn hạn chế Sự ra đời của jQuery đã cách mạng hóa quy trình phát triển web, cho phép tải trang chỉ một lần và cập nhật dữ liệu một cách hiệu quả.

Năm 2010, Angular được phát triển bởi Google, đã thiết lập tiêu chuẩn xây dựng web cho các ứng dụng sau này Tuy nhiên, AngularJS gặp khó khăn trong việc xử lý nhiều tính năng phát sinh từ các phần khác nhau trên trang web, như tin nhắn, quảng cáo và bài viết, do lượng mã quá lớn Để giải quyết vấn đề này, năm 2013, các kỹ sư tại Facebook đã giới thiệu một khái niệm mới.

CÔNG NGHỆ MERN STACK

Ý NGHĨA VỀ MERN

Với sự phát triển mạnh mẽ của Javascript và nhu cầu ngày càng tăng về dịch vụ phát triển ứng dụng web và di động, Mern Stack đang trở thành lựa chọn ưu tiên cho thiết kế website nhờ vào những lợi thế vượt trội của nó.

MERN STACK là công nghệ dùng để xây dựng các ứng dụng web nâng cao Ngăn xếp MERN bao gồm các thành phần nguồn mở khác nhau bao gồm:

● M= MongoDB: Cơ sở dữ liệu NoSQL phổ biến.

● E= Express: Web Framework nhẹ và di động.

● R= React: Thư viện Javascript để xây dựng giao diện người dung.

● N= Node.js: Môi trường thực thi Server – side Javascript.

Các thành phần này cung cấp hỗ trợ để các nhà phát triển làm việc và là bộ Combo Open Source các công nghệ đều liên quan tới JavaScript.

STACK là một chương trình hoàn thiện bao gồm không chỉ mã nguồn mà còn cả hệ điều hành và các phần mềm hỗ trợ như web server và cơ sở dữ liệu Tất cả những thành phần này được kết hợp với nhau để hình thành một technical stack.

LỊCH SỬ PHÁT TRIỂN

1 Lịch sử phát triển Reactjs

ReactJS, ra đời vào năm 2013, đã cách mạng hóa việc phát triển web bằng cách cho phép tạo ra các trang web động thay vì chỉ là các trang HTML tĩnh Sự kết hợp của CSS và JavaScript đã giúp người dùng tương tác tốt hơn, tạo ra những trải nghiệm hấp dẫn hơn Với sự xuất hiện của jQuery, việc cập nhật dữ liệu trở nên dễ dàng hơn, chỉ cần tải trang một lần mà vẫn có thể thay đổi nội dung một cách linh hoạt.

Năm 2010, Angular được phát triển bởi Google, đã thiết lập một chuẩn mực mới cho việc xây dựng web Tuy nhiên, với sự xuất hiện của nhiều tính năng phức tạp trên các trang web như tin nhắn, quảng cáo và bài viết, AngularJS gặp khó khăn trong việc quản lý mã nguồn do khối lượng lớn Để khắc phục điều này, năm 2013, các kỹ sư tại Facebook đã giới thiệu một khái niệm mới.

2 Lịch sử phát triển NodeJS

Node.js, được phát triển bởi Ryan Dahl vào năm 2009, đã gặp phải nhiều hạn chế trong khả năng của máy chủ web Đến ngày 8 tháng 11 năm 2009, Node.js đã được cải tiến bằng cách tích hợp công cụ JavaScript V8 của Google.

Vào tháng 1 năm 2010, npm, một trình quản lý gói cho Node.js, đã ra mắt, giúp lập trình viên dễ dàng xuất bản và chia sẻ mã nguồn của các gói Node.js Npm được thiết kế để đơn giản hóa quy trình cài đặt, cập nhật và gỡ cài đặt các gói, mang lại hiệu quả cao trong phát triển phần mềm.

Vào tháng 6 năm 2011, Microsoft và Joyent đã triển khai phiên bản Windows gốc của Node.js [10].

Vào tháng 12 năm 2014, Fedor Industry đã khởi xướng io.js, một nhánh của Node.js, nhằm giải quyết mâu thuẫn nội bộ trong quản trị của Joyent Io.js được phát triển như một giải pháp quản trị mở với một ủy ban kỹ thuật độc lập.

Vào tháng 2 năm 2015, ý tưởng thành lập quỹ Node.js trung lập đã được công bố Đến tháng 6 năm 2015, cộng đồng Node.js và io.js đã đồng thuận hợp tác dưới sự quản lý của Node.js Foundation.

Vào năm 2019, JS Foundation và Node.js Foundation đã hợp nhất để tạo thành OpenJS Foundation [10].

3 Lịch sử phát triển MongoDB

MongoDB, được phát triển bởi công ty phần mềm 10gen vào năm 2007, đã chuyển sang mô hình mã nguồn mở vào năm 2009, cung cấp hỗ trợ thương mại và các dịch vụ khác Đến năm 2013, 10gen đã đổi tên thành MongoDB Inc.

Vào ngày 20 tháng 10 năm 2017, MongoDB trở thành công ty giao dịch công khai và được yết trên NASDAQ với tên gọi MDB

Vào ngày 30 tháng 10 năm 2019, MongoDB đã hợp tác với Alibaba để cung cấp giải pháp MongoDB-as-a-service, cho phép khách hàng truy cập dịch vụ quản lý từ các trung tâm dữ liệu toàn cầu của Alibaba.

CÀI ĐẶT VÀ TRIỂN KHAI

CÁCH CÀI ĐẶT VỚI NODE.JS

Bạn truy cập vào địa chỉ https://nodejs.org/en/download/ sẽ xuất hiện một trang web với giao diện như sau:

Hình 1 Trang chủ cài đặt Node

Bước 2: Sau khi chọn phiên bản phù hợp với máy tính thì ta chỉ cần chạy file vừa tải và cài đặt rất đơn giản.

Để chạy NodeJS, bạn cần một trình soạn thảo code, và công cụ được sử dụng là Visual Studio Code, một công cụ nổi tiếng Để bắt đầu, hãy tạo một thư mục, mở nó trong Visual Studio Code, và sử dụng terminal để gõ lệnh `npm init` nhằm tạo một project NodeJS.

Hình 2 Màn hình terminal tạo mới project nodejs

CÀI ĐẶT VỚI EXPRESS

Là một Framework chạy trên nền tảng của NodeJS nên ta sẽ cài nó trong project của NodeJS bằng cách gõ lệnh “npm install express” ngay trong project NodeJS.

Hình 3.Màn hình terminal cài đặt framework express

CÀI ĐẶT VỚI REACT

Ta có thể dùng cmd hoặc PowerShell để cài reactjs ở global với lệnh “npm install –g create-react-app”

Hình 4.Màn hình cài ReactJS sử dụng ở global

CÀI ĐẶT VÀ KẾT NỐI CƠ SỞ DỮ LIỆU VỚI MONGODB

Bước 1: Truy cập trang https://www.mongodb.com/download center#community và tải.

Bước 2: Bắt đầu cài đặt.

Hình 5 Giao diện cài đặt MongoDB

Để cài đặt Mongo Compass, bạn hãy nhấn Next, chọn Custom và tiếp tục nhấn Next để xác định vị trí lưu file tải Mongo Compass là một công cụ trực quan hữu ích cho việc làm việc với MongoDB.

❖ Tạo mới connection và kết nối với database

Hình 6 Giao diện của MongoDB Compass

MongoDB operates on port 27017 locally, and you can connect to the Node.js server using the provided connection string Click on "connect" to proceed, and use the plus sign below to create a new database, similar to how the team established the database named "ecommerce-tlcn." You can also select "create collection" to add a new collection.

Trong MongoDB Compass, giao diện các collection cho phép chúng ta dễ dàng quản lý dữ liệu Đối với Node.js, không cần tạo collection trước mà có thể để MongoDB tự động tạo khi kết nối Để thiết lập kết nối giữa server và cơ sở dữ liệu MongoDB, chúng ta sử dụng thư viện Mongoose Việc cài đặt Mongoose rất đơn giản, chỉ cần mở cmd và gõ lệnh: npm install mongoose save hoặc sử dụng yarn với lệnh: yarn add mongoose.

Hình 8 Cài đặt gói package

Sau đó tiến hành import vào project để tạo kết nối, với chuỗi kết ban đầu bên mongoDB là: "mongodb://localhost:27017/ecommerce-tlcn"

Ta tiến hành tạo các Shema để khai báo thuộc tính, và dùng Schema để tạo Model ứng với các bản trong database.

Hình 10 Tạo mới collection

Phần giỏ hàng (cart) bao gồm các trường như user để xác định người dùng sở hữu giỏ hàng, và cartItems là mảng chứa các sản phẩm trong giỏ hàng Mỗi sản phẩm trong mảng item có mã sản phẩm, số lượng và giá tương ứng Dựa trên schema này, chúng ta có thể tạo ra một model hoàn chỉnh.

Khi khách hàng gửi yêu cầu mua hàng đến server, Mongoose sẽ tạo một collection với các trường tương ứng đã định nghĩa trên server Trường _id được tự động sinh ra để phân biệt các đối tượng khác nhau, và dữ liệu trong MongoDB được lưu trữ dưới dạng JSON với cấu trúc key-value.

Hình 9 Kết nối với MongoDB ở localHình SEQ Hình \* ARABIC 9 Kết nối MongoDB trên local

Hình 11.Data được lưu vào MongoDB

HƯƠNG 3: TÌM HIỂU CÁC TRANG WEB BÁN ĐỒ NỘI THẤT

I TRANG WEB BÁN ĐỒ NỘI THẤT NHADEP.COM.VN

Web nội thất Nhà Đẹp, thành lập từ năm 1999, là thương hiệu hàng đầu trong lĩnh vực nội thất tại Việt Nam với 3 nhà máy sản xuất và hệ thống cửa hàng tại Hà Nội và TP Hồ Chí Minh Đến nay, thương hiệu đã phát triển rộng khắp cả nước, cung cấp đa dạng sản phẩm nội thất và đồ dùng gia đình với nhiều mức giá, đảm bảo chất lượng cho từng sản phẩm Thiết kế chủ đạo của sản phẩm trên website là màu trắng, kèm theo mô tả chi tiết giúp người mua dễ dàng nắm bắt thông tin trước khi quyết định mua hàng.

Nhadep.com.vn, ban đầu chỉ là một trang giới thiệu doanh nghiệp, đã được phát triển vào năm 2007 với giao diện và chức năng cải tiến, trở thành một trong những trang web mua bán nội thất lớn tại Việt Nam Trang web này ngày càng hoàn thiện hơn về mặt giao diện, cung cấp trải nghiệm tốt hơn cho người dùng.

Hình 12 Ảnh trang chủ nhà đẹp

2.Các đặc điểm của trang web

Tối ưu hóa trải nghiệm di động trên trang web giúp khách hàng dễ dàng nhận thấy lợi ích của sản phẩm được đăng bán, đồng thời tạo dựng sự tin tưởng khi họ xem xét sản phẩm.

Giao diện trang web sử dụng nền phông trắng chủ đạo, cung cấp thông tin chi tiết về giá cả từng sản phẩm, cùng với thông tin đầy đủ về các chi nhánh cửa hàng thuộc TCT GROUP Trang web cũng hiển thị các chương trình khuyến mãi và thông tin liên hệ cần thiết cho khách hàng.

Bố cục trang web: Dễ nhìn cho người dung, logo thương hiệu rõ ràng trong website

Cập nhật thường xuyên nội dung sản phẩm và thông tin khuyến mãi là cách hiệu quả để thu hút khách hàng Việc giới thiệu sản phẩm một cách logic và hấp dẫn không chỉ giúp tăng cường sự quan tâm mà còn nâng cao khả năng chuyển đổi khách hàng.

3.Ưu nhược điểm của trang web Ưu điểm Nhược điểm

+ Giúp giảm bớt chi phí kinh doanh vận hành thấp.

+ Giúp việc giao dịch nhanh cũng như linh hoạt về thời gian, không gian.

+ Độ uy tín cao hơn, quan tâm đến nhu cầu khách hàng.

+ Tiết kiệm thời gian cho người mua hàng

Giao diện mới mang đến cái nhìn tổng quan dễ hiểu, giúp người dùng dễ dàng nắm bắt thông tin sản phẩm cần mua Số lượng sản phẩm được mua ngày càng tăng, đồng thời chất lượng đánh giá cũng đạt mức cao.

+ Bảo mật trên internet chưa thực sự an toàn.

+ Sự thiếu tin tưởng của khách hàng về chất lượng sản phẩm.

+ Người bán không hiểu về hệ thống thanh toán trực tuyến.

+ Việc tư vấn thắc mắc cho khách hàng chậm.

TÌM HIỂU CÁC TRANG WEB BÁN ĐỒ NỘI THẤT

TRANG WEB NHAXINH.COM

Website nhaxinh.com, được thành lập vào năm 2007, là một trong những đơn vị tiên phong trong lĩnh vực phát triển nội thất trực tuyến tại Việt Nam Với nhiều thành tựu nổi bật trong ngành nội thất, nhaxinh.com đã xây dựng được thương hiệu uy tín và trở thành một trong những thương hiệu lâu đời, bắt đầu từ 2 cửa hàng tại Tp Hồ Chí Minh và Tỉnh Hà Nội vào năm 2008.

Hình 13 Ảnh trang chủ nhà xinh

2.Các đặc điểm của trang web

Trang web của Nhà Xinh có giao diện chủ đạo trên nền phông trắng, cung cấp thông tin chi tiết về giá cả từng sản phẩm và các chi nhánh cửa hàng Đặc biệt, phần lớn sản phẩm của Nhà Xinh được sản xuất tại nhà máy của Tổng công ty AA, tọa lạc tại Đức Hòa, Long An.

AA Tây Ninh sở hữu diện tích 80.000m2 và trang bị thiết bị hiện đại đạt tiêu chuẩn ISO 9001 Công ty chuyên sản xuất các sản phẩm nội thất chất lượng cao phục vụ cho khách sạn, nhà hàng 5 sao, các dự án nội thất cao cấp và xuất khẩu.

Bố cục trang web cần dễ nhìn và thân thiện với người dùng, với logo thương hiệu rõ ràng Nội dung hấp dẫn là yếu tố quan trọng, vì vậy cần thường xuyên cập nhật thông tin về sản phẩm và các chương trình khuyến mãi để thu hút khách hàng, đồng thời giới thiệu sản phẩm một cách logic và hấp dẫn.

3.Ưu nhược điểm của trang web Ưu điểm Nhược điểm

+ Giúp việc giao dịch nhanh cũng như Linh hoạt về thời gian, không gian

+ Tiết kiệm thời gian cho người mua hàng

Giao diện mới được thiết kế trực quan, giúp người dùng dễ dàng tiếp cận và hiểu rõ thông tin về sản phẩm Điều này đã góp phần làm tăng số lượng sản phẩm được mua.

+ Tốc độ truy cập vào web nhanh

+ Chất lượng hình ảnh sản phẩm tốt đa dạng về mẫu mã sản phẩm.

+ Sự thiếu tin tưởng của khách hàng về chất lượng sản phẩm

+ Thông tin liên hệ online khách hàng còn ít không đủ phục vụ khách hàng.

+ Không cho khách hàng đánh giá sản phẩm khi đã mua hàng.

+ Hiển thị thông tin sản phẩm khuyến mãi quá nhỏ khó cho khách hàng nhìn thấy.

+ Khách hàng không lưu được hình ảnh sản phẩm về máy.

TRANG WEB HOMEOFFICE.COM.VN

Homeooffice.com.vn là trang web thương mại điện tử chuyên cung cấp đồ nội thất, thuộc sở hữu của công ty TNHH TMDV Home Office, hoạt động từ tháng 3 năm 2015 Chúng tôi cung cấp đa dạng sản phẩm nội thất cho không gian sống và làm việc, bao gồm bàn làm việc, ghế ngồi, kệ sách, và nhiều sản phẩm khác, phục vụ cho cả căn hộ chung cư và văn phòng công ty.

Tại Home Office, bạn có thể khám phá những sản phẩm độc đáo, theo xu hướng toàn cầu như nội thất từ ống nước và gỗ ép, với cam kết bảo vệ môi trường Hầu hết các sản phẩm đều được thiết kế và sản xuất bởi công ty, nhằm mang đến cho khách hàng trải nghiệm tiện nghi và thoải mái ngay tại ngôi nhà của mình.

Hình 14.Ảnh trang chủ Home Office

Tối ưu hóa trải nghiệm di động trên trang web giúp khách hàng dễ dàng nhận biết lợi ích của sản phẩm được bán, đồng thời tạo cảm giác tin tưởng khi họ xem xét sản phẩm.

Giao diện trang web của công ty TNHH TMDV Home Office nổi bật với nền trắng và chữ đen, giúp người dùng dễ dàng tiếp cận thông tin Trang web cung cấp mô tả chi tiết về giá thành từng sản phẩm, cùng với thông tin đầy đủ về các cửa hàng chi nhánh và thương hiệu.

Bố cục trang web: Dễ nhìn cho người dùng, logo thương hiệu rõ ràng trong website.

3.Ưu nhược điểm trang web Ưu điểm Nhược điểm + Giúp giảm bớt chi phí kinh doanh vận hành thấp.[3]

+ Giúp việc giao dịch nhanh cũng như

Linh hoạt về thời gian, không gian

+ Dịch vụ khách hàng chi tiết hướng dẫn đầy đủ các bước đặt hàng cho khách hàng gặp khó khăn.

+ Cho phép khách hàng đánh giá sản phẩm

+ Giá thành sản phẩm rẻ

+ Có cả hàng thanh lý cho những khách hàng có kinh phí thấp

+ Chi tiết mô tả sản phẩm chưa đầy đủ gây thu hút.

+ Trang web quá nhiều mục chi tiết gây khó chịu cho khách hàng

+ Thông tin sản phẩm khuyến mãi không hiện lên khi người dùng vào trang

TRANG WEB GO HOME

Nội thất Go Home, thuộc công ty Sunvina Việt Nam, được thành lập năm 2015, chuyên kinh doanh và phân phối sản phẩm nội thất gỗ Thương hiệu mang đến cho khách hàng trải nghiệm sang trọng với các sản phẩm thiết kế tinh tế và cầu kỳ Trang web chính thức của Nội thất Go Home là gotrangtri.vn.

Hình 15.Ảnh trang chủ gỗ trang trí

Tối ưu hóa trải nghiệm di động trên trang web giúp khách hàng dễ dàng nhận biết lợi ích của sản phẩm và tạo dựng niềm tin khi họ duyệt xem các mặt hàng được bán.

Giao diện trang web của công ty TNHH TMDV Home Office được thiết kế trên nền phông trắng với màu xanh chủ đạo, tạo cảm giác dịu mắt Trang web cung cấp thông tin chi tiết về giá thành từng sản phẩm và địa chỉ các chi nhánh của thương hiệu.

Bố cục trang web được thiết kế đồng đều, rõ ràng và dễ dàng tìm kiếm, giúp người dùng nhanh chóng xác định vị trí sản phẩm cần mua Logo thương hiệu cũng được hiển thị rõ ràng trên website.

3.Ưu nhược điểm trang web Ưu điểm Nhược điểm

+ Giúp việc giao dịch nhanh cũng như linh hoạt về thời gian, không gian

+ Nội dung các đề mục được ẩn đi nên việc tìm kiếm sẽ mất nhiều thời gian của khách hàng

+ Không có mục đăng ký khách

+ Cho phép khách hàng đánh giá sản phẩm, cũng như lượt thích khách hàng với sản phẩm dó.

+ Các sản phẩm có hàng xuất khẩu và nhập khẩu

+ Có chính sách giao hàng miễn phí theo khu vực

TRANG WEB NOITHATHOAPHAT.PRO

Sau gần 25 năm hoạt động, Nội thất Hòa Phát đã khẳng định vị thế là nhà sản xuất nội thất hàng đầu tại Việt Nam Công ty không ngừng đổi mới và phát triển các sản phẩm để đáp ứng nhu cầu ngày càng cao của khách hàng, đồng thời giảm thiểu việc nhập khẩu nội thất văn phòng Nội thất Hòa Phát là đơn vị tiên phong trong nghiên cứu và sản xuất nội thất trong nước.

Tối ưu hóa trải nghiệm di động trên trang web giúp khách hàng dễ dàng nhận biết lợi ích của sản phẩm được bán, đồng thời tạo dựng niềm tin vững chắc khi họ xem xét sản phẩm.

Giao diện trang web được thiết kế với nền phông trắng, mang lại vẻ đẹp mắt và dễ nhìn Trang web cung cấp thông tin chi tiết về giá cả từng sản phẩm, bao gồm kiểu dáng, chất liệu, kích thước và màu sắc, giúp người dùng dễ dàng lựa chọn.

Bố cục trang web: Bố cục tổng thể trang web dễ sử dụng, logo thương hiệu rõ ràng trong website.

3.Ưu nhược điểm trang web Ưu điểm Nhược điểm

+ Giúp việc giao dịch nhanh cũng như linh hoạt về thời gian, không gian

+ Cho phép khách hàng đánh giá sản phẩm.

+ Nội dung các đề mục được ẩn đi nên việc tìm kiếm sẽ mất nhiều thời gian của khách hàng

+ Không có mục đăng ký khách hàng cũng như mục đăng nhập.

+ Các chương trình khuyến mãi bị ẩn việc tìm kiếm sản phẩm khuyến mãi gặp khó khăn.

+ Không có thông tin giới thiệu web cũng như thương hiệu tạo cảm giác chưa đủ tin tưởng cho khách hàng.

PHÂN TÍCH WEBSITE BÁN ĐỒ NỘI THẤT

MÔ TẢ WEBSITE

1 Lý do chọn đề tài

Hiện nay, mọi mặt hàng, bao gồm cả thiết bị nội thất, đều được bày bán trên các trang thương mại điện tử và mạng xã hội Việc tạo ra một trang web chuyên biệt cho việc bán đồ nội thất sẽ giúp người tiêu dùng dễ dàng lựa chọn sản phẩm phù hợp, đồng thời cung cấp cái nhìn tổng quát về sản phẩm và giá cả khi mua sắm.

Nhóm chúng em đã nghiên cứu và thiết kế đề tài “Xây dựng website bán đồ nội thất” với mục tiêu hỗ trợ các cửa hàng trong việc tăng tốc bán hàng, quản lý hàng hóa nhập xuất hàng ngày, cũng như cập nhật doanh thu và chi phí Điều này giúp các cửa hàng có thể thực hiện những điều chỉnh cần thiết và hợp lý cho từng mặt hàng tại mỗi thời điểm.

2.Các chức năng có thể xây dựng

✔ Đăng nhập, đăng ký, quên mật khẩu

✔ Đăng ký thông tin seller

✔ Đăng ký bán sản phẩm, quản lý sản phẩm

✔ Quản lý thông tin order

✔ Quản lý thông tin giảm giá

✔ Đăng nhập, đăng ký quên mật khẩu

✔ Tìm kiếm sản phẩm theo tên sản phẩm

✔ Chọn sản phẩm theo danh mục

✔ Chọn các phương thức thanh toán

✔ Chat với nhà cung cấp

CÁC THÀNH PHẦN CẦN CÓ ĐỂ WEBSITE CÓ THỂ HOẠT ĐỘNG ỔN ĐỊNH

Tên miền còn được gọi là domain là một đường dẫn tới trang web của bạn hay còn được nói cách khác là địa chỉ website.

Tên miền là duy nhất và được cấp phát sau khi hoàn tất quá trình đăng ký Khi đăng ký tên miền, người dùng cần trả một khoản phí và chi phí duy trì hàng năm.

Tên miền quốc gia thường được ưu tiên hơn tên miền quốc tế, trừ khi doanh nghiệp hoạt động toàn cầu Để bảo vệ thương hiệu, bạn nên mua các tên miền phổ biến theo thứ tự ưu tiên: vn, com.vn, com, net, info, và các đuôi khác.

Khi giới thiệu doanh nghiệp với đối tác, sở hữu một website chuyên nghiệp và thu hút không chỉ thể hiện sự năng động mà còn tạo dựng niềm tin Một website được thiết kế chỉnh chu sẽ nâng cao hình ảnh doanh nghiệp, tương tự như một văn phòng khang trang, từ đó giúp đối tác đánh giá cao hơn về chất lượng và uy tín của công ty.

Website là bộ mặt của doanh nghiệp; một website chuyên nghiệp không chỉ tạo ấn tượng tốt mà còn thu hút khách hàng hiệu quả hơn, từ đó gia tăng cơ hội bán hàng.

❖ Các lưu ý thiết kế website:

✔ Các yếu tố về giao diện: Giao diện bắt mắt, tông màu phù hợp tạo ấn tượng cho người xem

✔ Website phù hợp với xu hướng thiết kế hiện tại và thói quen người dùng chúng ta hướng tới

✔ Phân bố nội dung, bố cục, màu sắc, đường nét hợp lý

✔ Yếu tố nhận diện thương hiệu trên web: logo, tên miền, slogan, font chữ

✔ Cung cấp đầy đủ thông tin cho khách hàng.

Hosting, hay còn gọi là web hosting, là không gian lưu trữ được phân chia trên máy chủ, cho phép cung cấp dịch vụ web và duy trì kết nối internet để trang web hoạt động Điều này giúp mọi người có thể dễ dàng truy cập vào website bất cứ lúc nào.

4.Mô tả giao diện các webpage

Website gồm: trang khách hàng, trang nhà cung cấp (seller), trang admin

Trang khách hàng: bao gồm trang chủ có trang sản phẩm trang giỏ hàng trang mua hàng, trang thông tin mua hàng.

Trang seller là nền tảng dành cho nhà cung cấp muốn bán hàng tại cửa hàng, bao gồm các phần như trang phiếu giảm giá, thông tin nhà cung cấp, sản phẩm đăng bán, đơn hàng và thống kê.

Trang admin là nơi quản lý tài khoản và danh sách seller, đồng thời cũng là trang điều hành các danh mục hiện có trên website Ngoài ra, trang admin còn giúp theo dõi và quản lý lợi nhuận thu được từ các seller.

USE CASE HỆ THỐNG

Hình 17 Ảnh usecase admin

Hình 18 Ảnh usecase seller

Hình 19 Ảnh usecase client

Mô Tả Use Case

Tên use case: Xác thực Số ID: 01 Mức quan trọng: Cao

Actor chính: Admin, seller, client Loại use case: Thiết yếu, cần thiết.

Để tạo đơn hàng và duyệt sản phẩm, admin cần phải đăng nhập vào hệ thống Seller cũng phải đăng nhập để thực hiện việc đăng ký bán hàng Đối với khách hàng, việc đăng nhập là bắt buộc khi mua hàng để hệ thống có thể lưu trữ thông tin của họ.

● Nhập thông tin đăng nhập

● Nếu thành công sẽ chuyển trang thất bại sẽ thống báo cho người dùng

Các xử lý ngoại lệ:

● Nếu đăng nhập thất bại hệ thống yêu cầu actor cung cấp lại thông tin đăng nhập gồm tên đăng nhập và mật khẩu.

2 Use case thêm danh mục

Thêm danh mục cho ứng dụng

Số ID: 02 Mức quan trọng: Cao

Actor chính: Admin Loại use case: Thiết yếu, cần thiết.

Mô tả tóm tắt: Admin tạo danh mục danh, seller chỉ được đăng bán những sản phẩm thuộc danh mục này

● Hệ thống lưu lại danh mục

● Trả về danh sách danh mục cho người dùng

● Danh mục có ký tự đặc biệt sẽ được hệ thống báo lỗi

Use case sửa danh mục

Mô tả tóm tắt: Admin được quyền chỉnh sửa danh mục

● Chọn danh mục cần chỉnh sửa

● Submit danh mục lên hệ thống

● Hệ thống lưu lại danh mục

● Trả về danh sách danh mục cho người dùng

● Danh mục có ký tự đặc biệt sẽ được hệ thống báo lỗi

4 Use case quản lý danh mục

Tên use case: Quản lý danh mục

Sau khi đăng nhập thành công vào hệ thống quản lý danh mục sản phẩm, các danh mục mà admin thêm vào sẽ là điều kiện cần thiết để seller có thể tiến hành đăng bán sản phẩm.

● Hệ thống yêu cầu các thông tin để đăng nhập bao gồm tên đăng nhập và mật khẩu đăng nhập.

● Sau khi đã có tài khoản và Actor nhập đầy đủ thông tin click vào nút “Đăng nhập”.

● Hệ thống sẽ kiểm tra thông tin đăng nhập và thông báo thành công hoặc thất bại cho actor.

● Nếu đăng nhập thất bại hệ thống yêu cầu actor cung cấp lại thông tin đăng nhập gồm tên đăng nhập và mật khẩu.

5 Use case duyệt sản phẩm

Mô tả tóm tắt: Sau khi seller tạo sản phẩm thì admin sẽ nhận được thống báo có sản phẩm mới, admin xét duyệt sản phẩm mới được bán

● Hệ thống thay đổi trạng thái sang đã duyệt hoặc đã hủy

● Trả về danh sách sản phẩm cho admin

6 Use case xác nhận đánh giá

Số ID: 06 Mức quan trọng: trung bình

Actor chính: Seller Loại use case: Thiết yếu, cần thiết.

Mô tả tóm tắt: Đánh giá của khách hàng sẽ được admin duyệt trước khi show lên trang chủ

● Đánh giá được thông báo tới admin

● Admin chọn xác nhận hoặc hủy

● Đánh giá được xác nhận sẽ hiển thị trên trang chủ

● Đánh giá mang tính vi phạm sẽ không được duyệt

7 Use case thêm sản phẩm

Tên use case: Thêm sản phẩm

Actor chính: Khách hàng Loại use case: Thiết yếu, cần thiết.

● Seller tạo sản phẩm mới

● Hệ thống lưu lại sản phẩm với trạng thái chưa được duyệt

● Seller gửi yêu cầu tới admin

● Admin duyệt sản phẩm sẽ được show trên trang chủ

 Sản phẩm sẽ không được duyệt nếu admin thấy không hợp lệ

8 Use case gửi đơn hàng

Tên use case: Client Số ID: 08 Mức quan trọng: Cao

Actor chính: Khách hàng Loại use case: Thiết yếu, cần thiết.

Mô tả tóm tắt: Khi khách mau hàng và yêu cầu thanh toán

● Khách hàng chọn sản phẩm cần mua từ giỏ hàng

● Xác nhận thông tin giao hàng

● Nếu không đăng nhập thì không thể mua hàng

● Nếu không thông tin người nhận không hợp lệ thì không gửi được đơn hàng

SƠ ĐỒ ACTIVITY

Hình 20 Sơ đồ biểu diễn đăng nhập

Hình 21 Sơ đồ biễu diễn giỏ hàng

Hình 23 Sơ đồ biểu diễn đánh giá sản phẩm

Hình 24 Sơ đồ biểu diễn thêm danh mục sản phẩm

Hình 25 Sơ đồ biểu diễn cập nhật danh mục

Hình 26 Sơ đồ biểu diện quá trình đặt hàng

THIẾT KẾ CƠ SỞ DỮ LIỆU

Hình 27 Erd của ứng dụng

❖ Admin export class Admin extends mongoose.Document { @Prop()

@Prop({ enum: ROLE }) role: ROLE;

@Prop() password: string; verifyPassword: (password: string) => Promise;

✔ name: tên của admin kiểu dữ liệu lả string

✔ role: phân quyền admin kiểu dữ liệu enum là các quyền lưu sẵn và khai báo dưới dạng một enum object

✔ email: mail xác nhận thông tin cá nhân

✔ password: password được lưu dưới dạng string

❖ Brand (thương hiệu) export class Brand extends mongoose.Document {

@Prop({ unique: true }) name: string;

Collection chỉ có name là tên của thương hiệu sản phẩm và nó duy nhất

❖ Category ( danh mục sản phẩm ) export class Category extends mongoose.Document {

@Prop({ type: mongoose.Schema.Types.Array, default: [] }) properties: [];

✔ name: ten danh mục lưu dưới dạng string

Properties refer to options categorized and stored in an array, such as furniture options like tables and chairs, which can vary in size (large or small) and material type.

✔ parent: mỗi danh mục sẽ có danh mục cha của nó hoặc không (ví dụ danh mục phòng khách lại có danh mục con là ghế sofa)

❖ Origin (nguồn gốc sản phẩm) export class Origin extends mongoose.Document {

Collection chỉ gồm tên của của nguồn gốc có thuộc tính unique

❖ Product (sản phẩm được seller đăng bán) export class Product extends mongoose.Document {

@Prop({ type: mongoose.Schema.Types.Array, required: false }) @ApiPropertyOptional()

@Prop({ type: [{ type: mongoose.Schema.Types.ObjectId, ref: ' Category' }] })

@IsObjectId({ message: 'categories is invalid [ObjectId]', ea ch: true })

@Prop({ type: mongoose.Schema.Types.ObjectId, ref: 'Origin' } )

@IsObjectId({ message: 'Origin is invalid ObjectId' }) origin: Origin;

@Prop({ type: mongoose.Schema.Types.ObjectId, ref: 'Brand' }) @ApiProperty({ type: () => Brand })

@IsObjectId({ message: 'Brand is invalid ObjectId' }) brand: Brand;

@Prop({ type: mongoose.Schema.Types.ObjectId, ref: 'Seller' } ) seller: Seller | string;

@Prop({ default: 0 }) sold_amount: number;

@Prop({ enum: PRODUCT_STATUS, default: PRODUCT_STATUS.PENDING }) status: PRODUCT_STATUS;

✔ name: tên sản phẩm kiểu string

✔ video: video mô tả sản phẩm có thể có hoặc không được lưu dưới dạng đường dẫn

✔ description: mô tả của sản phẩm kiểu string

✔ price: giá gốc sản phẩm kiểu number

✔ market_price: giá bán ra kiểu number

✔ images: hình ảnh lưu dưới dạng array các hình mà ở đó các hình được lưu dạng đường dẫn ảnh

✔ properties: các thuộc tính của sản phẩm kiểu array tham chiếu đến collection category

✔ categories: sản phẩm thuộc danh mục nào nó có thể thuộc nhiều danh mục

✔ origin: nguồn gốc của sản phẩm tham chiếu đến collection origin

✔ brand: thương hiệu nó tham chiếu đến collection brand

✔ amount: số lượng còn lại kiểu number

✔ sold_amout: số lượng bán ra

✔ status: trạng thái của sản phẩm

❖ Seller export class Seller extends mongoose.Document {

@Prop({ unique: true }) email: string;

@Prop({ enum: ['pending', 'verified'], default: 'pending' }) status: 'pending' | 'verified';

@Prop() password_reset_token: string;

@Prop({ type: mongoose.Schema.Types.Array }) contactInfos: [ContactInfo];

@Prop({ type: mongoose.Schema.Types.ObjectId, ref: 'Category' } ) category: Category; verifyPassword: (password: string) => Promise;

✔ ower_name: tên người bán

✔ email, password: tương tự như admin

✔ status: trạng thái đã được admin xác thực hoặc đang chờ sử lý khi đưa sản phẩm lên

✔ contact_info: thông tin liên hệ của người bán

✔ category: danh mục sản phẩm mà seller bán

❖ Store export class Store extends mongoose.Document {

@Prop({ unique: true, required: false }) url: string;

@Prop({ type: [contactSchema], default: [] }) contacts: [Contact];

@Prop({ type: mongoose.Schema.Types.ObjectId, ref: 'Seller' } ) seller: string | Seller;

✔ store_name: tên của cửa hàng kiểu string

✔ regresentative_name: tên người đại diện kiểu string

✔ contacts: mảng lưu các thông tin liên hệ của cửa hàng

✔ seller: người bán hàng cho cửa hàng kiểu dữ liệu là string hoặc tham chiếu đến collection seller.

3 Nhập dữ liệu cho cơ sở dữ liệu

❖ Dữ liệu người dùng: sẽ được tạo khi người dùng vào các trang như client, admin, seller thực hiện đăng ký tài khoản, tạo hồ sơ cá nhân.

❖ Dữ liệu về danh mục sản phẩm: được quản lý tại trang admin, do admin thêm mới

❖ Dữ liệu về thanh toán đơn, thông tin trao đổi của khách hàng: chúng ta sẽ nhận được khi người dùng mua hàng, trao đổi đánh giá trên website.

Dữ liệu thống kê sẽ được hiển thị trên trang seller, dựa vào các đơn hàng và doanh thu đạt được Thông tin này không cần lưu trữ trong cơ sở dữ liệu vì có thể được tính toán trực tiếp từ các đơn hàng.

MÔ TẢ CẤU TRÚC CHƯƠNG TRÌNH VÀ CÁC TRANG WEB

1 Mô tả cấu trúc chương trình

Hình 28 Mô tả cấu trúc chương trình

Chương trình bao gồm ba thành phần chính: Seller Portal dành cho người bán, Shop là giao diện bán hàng, và Admin cho quản trị viên, kèm theo các API và giao diện tương ứng Tất cả các API sử dụng chung một cơ sở dữ liệu MongoDB để truy vấn và lưu trữ dữ liệu, đồng thời kết nối với MailGun để gửi email đến người dùng.

2 Thiết kế các trang web

❖ Trang chủ (giao diện người dùng là khách hàng):

❖ Trang admin: bao gồm trang đăng nhập đăng ký, quản lý danh mục, quản lý xét duyệt sản phẩm.

✔ Đăng ký, đăng nhập: yêu cầu người dùng phải có tài khoản admin mới được vào hệ thống đăng nhập sau khi đăng nhập hoặc đăng ký.

✔ Trang danh mục : là trang mà admin được phép thêm danh mục vào thực hiện thao tác với nó

✔ Trang sản phẩm: admin được phép hủy sản phẩm hoặc duyệt sản phẩm cho seller.

❖ Trang seller: mã giảm giá, sản phẩm, quản lý đơn hàng, quản lý profile seller

✔ Trang mã giảm giá: để cho seller tạo ra các phiếu discount cho sản phẩm của mình.

Trang sản phẩm bao gồm các trang con nhằm mục đích quản lý sản phẩm, thông tin về các nhà cung cấp và các chương trình giảm giá áp dụng.

✔ Trang quản lý profile: các thao tác liên quan đến quản lý thông tin seller thông tin cửa hàng.

✔ Trang quản lý đơn hàng: giúp seller nắm bắt được các đơn hàng và quản lý giao hàng một cách tốt nhất.

❖ Trang client: là trang giao diện cho khách hàng của website chia ra rất nhiều trang tiện ích khác nhau.

Trang chủ của website bao gồm thông tin về cửa hàng nằm dưới header, các tiêu đề hấp dẫn, thông tin quảng cáo, cùng với một số sản phẩm nổi bật được trưng bày để thu hút người dùng Ngoài ra, trang còn hiển thị giỏ hàng và danh sách các danh mục sản phẩm để dễ dàng cho khách hàng trong việc tìm kiếm và mua sắm.

✔ Trang sản phẩm liệt kê các sản phẩm các nút tìm kiếm lọc sản phẩm, một số thông tin sản phẩm.

✔ Trang chi tiết sản phẩm: thông tin cụ thể của sản phẩm kèm mô tả, các sản phẩm liên quan và các thông tin đánh giá từ khách hàng.

✔ Trang tìm kiếm: giống trang sản phẩm nhưng sẽ liệt kê số ít sản phẩm được người dùng yêu cầu.

✔ Trang giỏ hàng: thông tin các sản phẩm trong giỏ hàng, về giá về số lượng.

✔ Trang đơn hàng: gồm 2 trang một trang để xác nhập thông tin người mua,một trang để xác nhận thanh toán và gửi đơn hàng.

KẾT QUẢ ĐẠT ĐƯỢC

CÔNG NGHỆ

 MongoDB: tìm hiểu thành công về NoSql, tốc độ truy vấn nhanh dễ dàng giao tiếp với server có sẵn các phương thức để truy vấn data.

 NodeJS: Xây dựng thành công các API của một trang bán hàng với framework NestJS, xử lý thành công các chức năng, yêu cầu từ giao diện.

 Express: Tìm hiểu các chức năng của express trong NodeJS để giúp server chạy tốt hơn code tối ưu hơn hẳn.

ReactJS cho phép xây dựng giao diện thành công thông qua việc sử dụng CSS và các thư viện bên ngoài mà không cần template có sẵn Việc chia giao diện rõ ràng theo từng chức năng, chuyển trang mượt mà, và xử lý gọi API để truy vấn dữ liệu là những yếu tố quan trọng trong việc phát triển các chức năng cần thiết cho một trang web.

CHỨC NĂNG ỨNG DỤNG

Trang admin gồm các chức năng:

 Quản lý danh mục( thêm xóa sửa danh mục, tìm kiếm danh mục)

 Quản lý nhân xét đánh giá sản phẩm (admin sẽ xét duyệt những đánh giá từ khách hàng)

 Xét duyệt sản phẩm từ seller ( sản phẩm seller được admin duyệt mới được đưa ra bán)

 Quản lý hóa đơn (admin sẽ được phần trăm doanh thu từ đơn hàng của seller, admin là người thực hiện giao hàng)

 Thống kê (thống kê thông qua hóa đơn bán hàng)

Trang seller gồm các chức năng:

 Quản lý thông tin seller (các thông cơ bản như tên, địa chỉ liên hệ)

 Quản lý mã giảm giá (tạo mã giảm giá)

 Quản lý sản phẩm( thêm xóa sản phần từ danh mục của admin, yêu cầu admin

 Quản lý đánh giá và trả lời đánh giá

 Trang chủ hiển thị danh mục sản phẩm và các sản phẩm mới

 Trang sản phẩm có các chức năng lọc sản phẩm theo giá

 Trang tìm kiếm sản phẩm

 Trang chi tiết sản phẩm(tất cả thông tin về sản phẩm)

 Trang shop (xem thông tin về shop của sản phẩm)

 Trang chọn phương thức thanh toán

 Trang đánh giá khi mua hàng

 Trang thông tin cá nhân

Một số chức năng nổi bậc:

Khi người dùng mua sản phẩm, seller sẽ nhận được thông báo, đồng thời admin cũng sẽ thông báo khi sản phẩm được duyệt Khách hàng sẽ nhận thông báo xác nhận đơn hàng và khi giao hàng hoàn tất.

Hình 29.Thông báo trên seller

Hiển thị thông tin của shop cho khách hàng biết

Hình 30.Thông tin seller trên trang chủ

Thanh toán bằng momo hoặc trực tiếp và cho phép áp dụng mã giảm giá

Hình 20 Trang thanh toán của khách hàng

Seller trả lời đánh giá của khách hàng

Hình 31.Seller trả lời đánh giá

ĐÁNH GIÁ ƯU NHƯỢC ĐIỂM

Ưu điểm của việc phát triển website thương mại điện tử bao gồm khả năng tìm hiểu công nghệ hiệu quả, tham khảo từ các trang thương mại điện tử lớn, và xây dựng website với các chức năng cơ bản Website này có thể thực hiện lọc tìm kiếm sản phẩm nhanh chóng, hỗ trợ thanh toán qua ví điện tử, thống kê doanh thu cho người bán, và gửi thông báo qua email một cách chính xác.

Giao diện trang chủ còn chưa hấp dẫn và thiếu tính năng tính phí vận chuyển Ngoài ra, vẫn còn thiếu một số chức năng quan trọng như hướng dẫn mua bán, phần hỏi đáp về sản phẩm, và cách liên hệ với nhà bán.

HƯỚNG DẪN CHẠY ỨNG DỤNG

Bước 1: Vào link tải node https://nodejs.org/en/ về lưu ý tải bản recommended không tải bản mới nhất.

Bước 2: Cài yarn ở global npm install global yarn

To install MongoDB version 4, follow the instructions provided on the official MongoDB installation guide at [MongoDB Installation](https://docs.mongodb.com/manual/installation/) Additionally, download and install MongoDB Compass, a graphical user interface for MongoDB, from [MongoDB Compass Download](https://www.mongodb.com/try/download/compass).

To set up a new database named "doan2," first, download the data from the database folder Next, create collections named "branchs," "categories," "orderitems," "orders," "origins," "sellers," "store," and "users" as shown in the provided image Finally, import the data from the database folder, or alternatively, follow the command execution method demonstrated in the video.

Hình 32.Giao diện lưu trữ data trên mongo compass

Bước 5: Vô trong các thư mục project tạo file có tên env

● backend-doan: tạo thư mục tên env rồi copy paste đoạn code dưới vào lưu lại JWT_SELLER=seller

USER_FORGOT_PASSWORD_SECRET=secret_forgot

FORGOT_PASSWORD_SECRET=forgot_password_secret

CLOUDINARY_SECRET=ugJFwe6vMI1huxPIZTznSm6aadE

DB_URL=mongodb://localhost/doan2

MAILGUN_KEYc08854a1637490e17f1d23995c07d-f7d0b107-860e0e36 SELLER_PORTAL=http://localhost:3003

PAYMENT_BACK_URL=https://6d285d7f4573.ngrok.io/api/orders/checkout/m omo

Hình 33.File env trong visual studio code

● seller-portal : copy lệnh bên dưới làm tương tự backend

NEXT_PUBLIC_API_URL=http://localhost:3002/api

NEXT_PUBLIC_API_URL=http://localhost:3005/api

NEXT_PUBLIC_API_URL=http://localhost:3001/api/

Step 6: Open the source code in the folder named "backend-doan" and launch three terminal windows to run the homepage, admin, and seller pages For Windows users, open the terminal in a similar manner Alternatively, you can follow the demo video to build using Docker Compose.

Hình 34 Terminal chạy backend

Step 7: Open the frontend directories for seller-portal and admin-fe, and then launch a terminal for each of these folders In every terminal window, type the command 'yarn' and press enter to install all the necessary modules.

Bước 8: Sau khi cài đặt xong các module, hãy mở cửa sổ terminal và chạy lệnh `yarn dev` Tiếp theo, nhấn Ctrl + click vào đường link để mở trang web, ví dụ: http://localhost:3004.

Định dạng
Số trang	70
Dung lượng	2,94 MB