GIỚI THIỆU ĐỀ TÀI
Tên đề tài
XÂY DỰNG NỀN TẢNG CHIA SẺ NHÀ
Mô tả đề tài
Chia sẻ nhà ở đang trở thành xu hướng phổ biến toàn cầu, với nhiều hình thức đa dạng như chia sẻ phòng trọ, căn hộ, nhà nguyên căn và nhà nghỉ.
Sự phổ biến của việc chia sẻ nhà ở mang lại nhiều lợi ích như tiết kiệm chi phí, tăng cường kết nối xã hội và giảm tác động môi trường Người thuê nhà có thể tiết kiệm chi phí cho thuê, điện, nước và internet, đồng thời tạo cơ hội gặp gỡ và kết nối với những người thuê khác, từ đó mở rộng mạng lưới xã hội Với sự phát triển của internet, chia sẻ nhà ở qua mạng xã hội đã trở thành xu hướng phổ biến, giúp chủ nhà có không gian trống kiếm thêm thu nhập từ việc cho thuê ngắn hạn cho du khách hoặc người dùng khác.
Đăng ký và tìm kiếm qua mạng xã hội là một quy trình đơn giản và tiết kiệm thời gian Người dùng có thể dễ dàng truy cập thông tin chi tiết về các ngôi nhà và phòng trống, bao gồm hình ảnh và đánh giá từ những người đã trải nghiệm trước đó Điều này mang lại cho người thuê nhà cái nhìn tổng quan về không gian trước khi quyết định đặt chỗ.
Website mua điện thoại trực tuyến của chúng tôi được thiết kế nhằm mang lại trải nghiệm tốt nhất cho người dùng, với đầy đủ các chức năng cơ bản của một nền tảng chia sẻ nhà ở Người dùng có thể dễ dàng tiếp cận và lựa chọn các mẫu mã điện thoại đa dạng, phù hợp với sở thích cá nhân của mình.
Website Home-Sharing được xây dựng bằng Nodejs kết hợp với các thư viện hỗ trợ khác.
Lý do chọn đề tài
Với sự phát triển mạnh mẽ của Internet, mua sắm trực tuyến ngày càng trở nên phổ biến nhờ vào tính đơn giản và dễ sử dụng, cùng với khả năng tiếp cận nhanh chóng đến nguồn sản phẩm phong phú từ các trang web thương mại điện tử.
Trước đây, việc mua sắm thường bị hạn chế bởi thời gian và không gian trưng bày Các cửa hàng và trung tâm thương mại chỉ có thể giới thiệu một số lượng sản phẩm nhất định, khiến nhiều sản phẩm bị bỏ qua Việc tìm kiếm nguồn hàng mới cũng tốn nhiều thời gian, chỉ những người có thời gian rảnh rỗi hoặc vị trí thuận lợi mới dễ dàng thực hiện Thay đổi địa điểm mua sắm trở nên bất tiện, cùng với chi phí và thời gian cho những chuyến đi.
Sự phát triển nhanh chóng của Internet đã tạo ra nhiều biến đổi lớn trong đời sống con người, đặc biệt là trong cách thức và thói quen mua sắm, nhờ sự ra đời của các website mua sắm trực tuyến.
Chúng em đã chọn đề tài "Xây dựng website mua điện thoại trực tuyến" do tính ứng dụng cao và nhu cầu thực tế lớn Đề tài này giúp chúng em vận dụng khả năng của mình qua nhiều loại hình khác nhau để phát triển sản phẩm Hơn nữa, tên đề tài cũng rất thú vị vì đây là lần đầu tiên chúng em thực hiện một dự án như vậy.
Khảo sát hiện trạng
Hiện nay, thị trường mua sắm trực tuyến nổi tiếng với nhiều website như thegioididong và SellPhoneS, cùng với các cửa hàng lớn Những trang web này thu hút người dùng nhờ giao diện bắt mắt, dễ sử dụng và kho sản phẩm phong phú Chúng tập trung vào việc mang lại trải nghiệm tìm kiếm điện thoại thoải mái và ưng ý nhất cho khách hàng.
Chúng tôi sẽ phát triển một website mua điện thoại trực tuyến, tích hợp các tính năng mua sắm cơ bản để mang đến trải nghiệm dễ sử dụng và tiện lợi cho người dùng.
Công nghệ sử dụng
Môi trường thiết kế
Công cụ hỗ trợ
- Trình duyệt Cốc Cốc, Chrome, FireFox.
CƠ SỞ LÝ THUYẾT
Tổng quan về HandleBarJs
Handlebars.js là thư viện mạnh mẽ cho hệ thống mẫu, giúp tạo mẫu HTML động bằng cách tách biệt logic và giao diện người dùng Thư viện này cho phép kết hợp dữ liệu từ nhiều nguồn khác nhau và sử dụng các thành phần logic như biểu thức, điều kiện, vòng lặp và hàm trợ giúp để tạo ra đầu ra HTML hoàn chỉnh.
2.1.2 Khái niệm cơ bản trong HandleBarJs:
2.1.2.1 Biểu thức của Handbars.js:
Một biểu thức handlebars đơn giản có thể được viết như sau, trong đó nội dung của biến "content" có thể là một biến hoặc một hàm trợ giúp, với hoặc không có tham số.
{{ content }} hoặc như thế này nếu biểu thức nằm trong khối:
HTML content and other Handlebars expresion go here
Với biểu thức handlebars HTML Biến customerName là thuộc tính sẽ được truy xuất bởi hàm handlebars.compile:
Dưới đây là ví dụ về một thẻ script Handlebars:
2.1.2.2 Biểu thức của Handbars.js:
Phần quan trọng thứ hai trong templating Handlebars là dữ liệu cần hiển thị trên trang Bạn truyền một đối tượng dữ liệu vào hàm Handlebars, và đối tượng này được gọi là bối cảnh.
Đối tượng dữ liệu có thể bao gồm nhiều loại như mảng, chuỗi, số, và các đối tượng khác, hoặc sự kết hợp của chúng Nếu đối tượng dữ liệu chứa một mảng các đối tượng, bạn có thể sử dụng hàm Handlebars để lặp qua mảng và thiết lập bối cảnh cho từng mục Dưới đây là ví dụ về cách thiết lập đối tượng dữ liệu và cách lặp qua nó trong Handlebars.
//đối tượng customers có một mảng các đối tượng mà chúng ta sẽ chuyển tới handlebars: var theData = {customers:[{firstName:”Michael”, lastName:”Alexander”, age:20}, {firstName:”John”, lastName:”Allen”, age:29}]};
Bạn có thể sử dụng vòng lặp để lặp lại đối tượng của customers như thế này:
2.1.2.2 Hàm biên dịch Handbars.js:
Hàm biên dịch: Đoạn mã cuối cùng mà chúng ta cần cho việc tạo template của handlebars xử lý 2 bước sau:
-Biên dịch template với hàm handlebars
Sử dụng hàm đã biên dịch để gọi đối tượng dữ liệu truyền vào, với đối tượng dữ liệu là tham số duy nhất, sẽ trả về một chuỗi HTML chứa các giá trị được chèn vào.
- Handlebars là một trong những công cụ tiên tiến nhất, giàu tính năng và phổ biến trong tất cả Javascript templating engines.- Tái sử dụng các Component
- Handlebars là templating engine không có logic, có nghĩa là có rất ít hoặc không có logic trong các template HTML mà bạn sử dụng
NodeJS giúp giữ cho các trang HTML của bạn đơn giản và sạch sẽ bằng cách tách biệt chúng khỏi các tệp JavaScript, sử dụng logic và handlebars để phục vụ mục đích này.
Node.js là một nền tảng phát triển độc lập, được xây dựng trên V8 JavaScript Engine, cho phép tạo ra các ứng dụng web như trang video clip, diễn đàn và mạng xã hội với khả năng mở rộng nhanh chóng và dễ dàng.
NodeJS có thể chạy trên nhiều nền tảng hệ điều hành khác nhau từ Window cho tới Linux,
OS X nên đó cũng là một lợi thế NodeJS cung cấp các thư viện phong phú ở dạng Javascript Module khác nhau giúp đơn giản hóa việc lập trình và giảm thời gian ở mức thấp nhất
Node.js được xây dựng và phát triển từ năm 2009, bảo trợ bởi công ty Joyent, trụ sở tại
2.2.2 Cách NodeJS hoạt động: Ý tưởng chính của Node js là sử dụng non-blocking, hướng sự vào ra dữ liệu thông qua các tác vụ thời gian thực một cách nhanh chóng Bởi vì, Node js có khả năng mở rộng nhanh chóng, khả năng xử lý một số lượng lớn các kết nối đồng thời bằng thông lượng cao
Node.js sử dụng luồng đơn (Single-Threaded) kết hợp với non-blocking I/O để xử lý các yêu cầu, giúp tối ưu hóa việc sử dụng tài nguyên hệ thống Điều này cho phép Node.js hỗ trợ hàng chục ngàn kết nối đồng thời mà không làm tiêu tốn RAM như các ứng dụng web truyền thống.
Node.js mang lại tốc độ cực nhanh nhờ vào engine JavaScript V8 của Google Chrome, cho phép thực thi mã một cách hiệu quả Bên cạnh đó, NPM cung cấp hơn 50.000 package, giúp các lập trình viên dễ dàng lựa chọn và tích hợp các tính năng cần thiết cho ứng dụng của họ.
Lập trình không đồng bộ trong Node.JS cho phép server xử lý các API mà không phải chờ đợi phản hồi, giúp tối ưu hóa hiệu suất Hơn nữa, Node.JS không sử dụng buffering, điều này đặc biệt hữu ích khi upload âm thanh hoặc video, vì nó xuất dữ liệu theo từng phần (chunk) mà không làm chậm quá trình xử lý.
Node.JS hoạt động dựa trên mô hình đơn luồng kết hợp với vòng lặp sự kiện, cho phép các ứng dụng xử lý một lượng lớn yêu cầu (request) hiệu quả hơn nhiều so với các máy chủ truyền thống như Apache HTTP Server.
NodeJS offers high scalability due to its non-blocking response capability, allowing it to easily handle multiple requests by creating limited threads for processing Additionally, ExpressJS enhances this functionality by providing a robust framework for building web applications.
Express.js là một framework mã nguồn mở miễn phí cho Node.js, giúp thiết kế và xây dựng ứng dụng web một cách nhanh chóng và đơn giản Nó hỗ trợ các phương thức HTTP và middleware, tạo ra một API mạnh mẽ và dễ sử dụng.
MongoDB
- MongoDB là một hệ quản trị cơ sở dữ liệu mã nguồn mở, là CSDL thuộc NoSql và được hàng triệu người sử dụng
MongoDB là một cơ sở dữ liệu hướng tài liệu, lưu trữ dữ liệu dưới dạng document kiểu JSON, giúp truy vấn nhanh chóng hơn so với các cơ sở dữ liệu quan hệ Trong khi các hệ thống như MySQL hay SQL Server sử dụng bảng để tổ chức dữ liệu, MongoDB sử dụng khái niệm collection thay vì bảng.
Trong MongoDB, collection tương ứng với bảng trong RDBMS, trong khi document tương ứng với hàng MongoDB sử dụng document thay cho hàng trong RDBMS, cho phép cấu trúc collection rất linh hoạt, giúp dữ liệu lưu trữ không cần phải tuân theo một cấu trúc cố định nào.
- Thông tin liên quan được lưu trữ cùng nhau để truy cập truy vấn nhanh thông qua ngôn ngữ truy vấn MongoDB
2.4.2 Một số câu lệnh cơ bản:
Tạo bảng db.createCollection('students');
Tạo bản ghi db.students.insert({ name:huy, gender: 'male'});
Cập nhật db.students.update({ _id: 1 },{$set:{ name: huy update' }});
Xóa bản ghi db.students.remove({ _id: 1});
Tìm kiếm all db.students.find({});
Tìm kiếm db.students.find({ name: huy });
MongoDB sử dụng lưu trữ dữ liệu dưới dạng Document JSON, cho phép mỗi collection có kích cỡ và các document khác nhau Điều này mang lại sự linh hoạt trong việc lưu trữ dữ liệu, giúp bạn dễ dàng thêm dữ liệu mà không gặp phải ràng buộc.
MongoDB không yêu cầu ràng buộc dữ liệu hay phép join như trong các hệ quản trị cơ sở dữ liệu quan hệ (RDBMS), do đó khi thực hiện các thao tác như chèn, xóa hoặc cập nhật, hệ thống không cần tốn thời gian kiểm tra các ràng buộc dữ liệu.
MongoDB cung cấp khả năng mở rộng dễ dàng thông qua tính năng mở rộng ngang (Horizontal Scalability) Hệ thống sử dụng khái niệm cluster, trong đó các node chứa dữ liệu tương tác với nhau Để mở rộng hệ thống, người dùng chỉ cần thêm một node mới vào cluster.
- Trường dữ liệu “_id” luôn được tự động đánh index (chỉ mục) để tốc độ truy vấn thông tin đạt hiệu suất cao nhất
Khi một truy vấn dữ liệu được thực hiện, bản ghi sẽ được lưu trữ trong bộ nhớ RAM, giúp tăng tốc độ truy vấn tiếp theo mà không cần phải đọc dữ liệu từ ổ cứng.
MongoDB mang lại hiệu năng cao với tốc độ truy vấn (find, update, insert, delete) vượt trội so với các hệ quản trị cơ sở dữ liệu quan hệ (RDBMS) Các thử nghiệm cho thấy, khi làm việc với lượng dữ liệu lớn, tốc độ insert của MongoDB có thể nhanh gấp 100 lần so với MySQL.
Sơ đồ Use-case
H ình 2:Sơ đồ use-case tổng quát
Hình 3: Sơ đồ use-case đăng nhập
Bảng 3.1: Đặc tả đăng nhập:
Tên Use – Case Đăng nhập
Mô tả Use-Case cho phép người dùng đăng nhập vào hệ thống
Actor Khách Điều kiện kích hoạt Người dùng chọn Login
Tiền điều kiện Đã có tài khoản
Hậu điều kiện Người dùng đăng nhập vào hệ thống thành công
1 Hệ thống hiển thị màn hình đăng nhập
2 Người dùng nhập email/tên người dùng và mật khẩu
3 Hệ thống kiểm tra thông tin đăng nhập
4 Nếu thông tin hợp lệ hệ thống thông báo đăng nhập thành công
Luồng sự kiện phụ Mật khẩu hoặc tên đăng nhập sai:
1 Hệ thống hiển thị lại màn hình đăng nhập để người dùng nhập lại thông tin kèm theo thông báo tên đăng nhập hoặc mật khẩu sai
2 Quay lại bước 2 của Luồng sự kiện chính
H ình 4:Sơ đồ use-case đăng xuất
Bảng 3.2: Đặc tả đăng xuất:
Tên Use – Case Đăng xuất
Mô tả Use-Case cho phép người dùng đăng xuất ra khỏi hệ thống
Actor Thành viên Điều kiện kích hoạt Người dùng chọn Log out
Tiền điều kiện Đã đăng nhập
Hậu điều kiện Người dùng đăng xuất ra khỏi hệ thống thành công
1 Hệ thống đăng xuất người dùng và đưa về trang trước đó
Luồng sự kiện phụ Mật khẩu hoặc tên đăng nhập sai:
1 Hệ thống hiển thị lại màn hình đăng nhập để người dùng nhập lại thông tin kèm theo thông báo tên đăng nhập hoặc mật khẩu sai
2 Quay lại bước 2 của Luồng sự kiện chính
H ình 5: Sơ đồ use-case đăng ký thành viên
Bảng 3.3: Đặc tả đăng ký thành viên:
Tên Use – Case Đăng ký thành viên
Mô tả Use-Case cho phép người dùng đăng ký tài khoản
Actor Khách Điều kiện kích hoạt Khi người dùng nhấn vào nút Sign up nằm trong trang chủ
Tiền điều kiện Có tài khoản email hợp lệ
Hậu điều kiện Người dùng đăng ký thành công
1 Hệ thống hiển thị màn hình đăng ký
2 Người dùng nhập thông tin
3 Hệ thống kiểm tra tài khoản vừa nhập và gửi email xác nhận
4 Người dùng xác nhận email
5 Nếu tất cả đều hợp lệ hệ thống thông báo đăng ký thành công
Luồng sự kiện phụ Email đã tồn tại:
1 Hệ thống hiển thị thông báo lỗi
2 Quay lại bước 3 của Luồng sự kiện chính
Hình 6: Sơ đồ use-case mua sản phẩm
Bảng 3.4: Đặc tả chọn máy:
Tên Use – Case Giỏ hàng
Mô tả Use-Case cho phép người dùng đặt phòng
Actor Thành viên Điều kiện kích hoạt Người dùng chọn vào phòng
Tiền điều kiện Đã đăng nhập tài khoản website
Hậu điều kiện Người dùng đặt phòng thành công
1 Hệ thống đưa sản phẩm vào giỏ hàng
2 Kết thực Use-case Luồng sự kiện phụ
Bảng 3.5: Đặc tả đề xuất điện thoại:
Tên Use – Case Đề xuất điện thoại
Mô tả Use-case đề xuất máy cho người dùng khi họ tìm kiếm một chiếc điện thoại
Actor Hệ thống Điều kiện kích hoạt Người dùng tìm một điện thoại và chọn hiển thị điện thoại đề xuất
Tiền điều kiện Người dùng sử dụng tài khoản Website đã đăng nhập vào hệ thống và chọn máy để mua
Hậu điều kiện Hệ thống cung cấp cho người dùng các loại điện thoại được đề xuất
1 Hệ thống tìm đến điện thoại mà khách hàng cần mua
2 Hệ thống hiển thị các mẫu điện thoại được đề xuất Luồng sự kiện phụ
Bảng 3.6: Đặc tả hiển thị thông tin sản phẩm:
Tên Use – Case Hiển thị lời sản phẩm
Mô tả Use-case hiển thị sản phẩm do người dùng khi họ chọn một sản phẩm
Actor Hệ thống Điều kiện kích hoạt Người dùng chọn vào một sản phẩm và chọn biểu tượng hiển thị thông tin sản phẩm
Người dùng cần đăng nhập vào tài khoản trên website và chọn máy để mua, sau đó hệ thống sẽ cung cấp cho họ các loại máy đề xuất phù hợp.
1 Hệ thống tìm kiếm thông tin sản phẩm
2 Hệ thống hiển thị thông tin sản phẩm
Luồng sự kiện phụ Không tìm thấy thông tin sản phẩm:
1 Hệ thống hiển thị không tìm thấy thông tin sản phẩm
3.1.5 Thay đổi thông tin các nhân:
Hình 7: Sơ đồ use-case thay đổi thông tin cá nhân
Bảng 3.7: Đặc tả thông tin cá nhân:
Tên Use – Case Thay đổi thông tin cá nhân
Mô tả Use-Case cho phép người dùng thay đổi thông tin
Actor Thành viên Điều kiện kích hoạt Người dùng chọn Account
Tiền điều kiện Đã đăng nhập tài khoản Website
Hậu điều kiện Người dùng thay đổi thông tin thành công
1 Hệ thống hiển thị trang thông tin cá nhân
2 Người dùng chọn Chỉnh sửa hồ sơ
3 Người dùng nhập thông tin mới và chọn lưu
4 Hệ thống lưu thông tin mới
Luồng sự kiện phụ Thông tin không hợp lệ :
1 Hệ thống hiển thị thông báo lỗi
2 Quay lại bước 3 của Luồng sự kiện chính
1 Hệ thống trở lại trang Thông tin cá nhân
3.1.6 Quản lý thông tin cá nhân:
H ình 8: Sơ đồ use-case quản lý giỏ hàng cá nhân
Bảng 3.8: Đặc tả thêm sản phẩm :
Tên Use – Case Thêm sản phẩm
Mô tả Use-Case cho phép người dùng thêm sản phẩm mới
Actor Thành viên Điều kiện kích hoạt Người dùng chọn Add
Tiền điều kiện Đã đăng nhập tài khoản Website
Hậu điều kiện Người dùng thêm sản phẩm thành công
1 Hệ thống hiển thị sản phẩm mới
2 Người dùng chọn sản phẩm và lưu
Luồng sự kiện phụ Không nhập tên :
1 Hệ thống hiển thị thông báo lỗi
2 Quay lại bước 2 của Luồng sự kiện chính
Bảng 3.9: Đặc tả xoá sản phẩm:
Tên Use – Case Xoá sản phẩm
Mô tả Use-Case cho phép người dùng xóa sản phẩm đã có
Actor Thành viên Điều kiện kích hoạt Người dùng chọn Delete
Tiền điều kiện Đã đăng nhập tài khoản website
Hậu điều kiện Người dùng xoá sản phẩm thành công
1 Hệ thống hiển thị thông báo xác nhận xóa
3 Hệ thống xóa sản phẩm
Luồng sự kiện phụ Người dùng chọn hủy :
1 Hệ thống trở lại trang giỏ hàng
Hình 9: Sơ đồ use-case tìm kiếm
Bảng 3.10: Đặc tả tìm kiếm:
Tên Use – Case Tìm kiếm
Mô tả Use-Case cho phép người dùng tìm kiếm máy, nhà sản xuất,
Actor Tất cả Điều kiện kích hoạt Người dùng chọn Search
1 Hệ thống hiển thị trang tìm kiếm
2 Người dùng nhập từ khóa
3 Hệ thống hiển thị kết quả tìm kiếm
Luồng sự kiện phụ Người dùng xóa toàn bộ từ khóa:
1 Hệ thống hiển thị danh sách thể loại
2 Quay lại bước 2 của Luồng sự kiện chính
Người dùng chọn thể loại:
1 Hệ thống hiển thị các sản phẩm liên quan đến thể loại
Hình 10: Sơ đồ use-case xem thông tin sản phẩm
Bảng 3.11: Đặc tả xem thông tin đơn hàng:
Tên Use – Case Xem thông tin đơn hàng
Mô tả Use-Case cho phép người dùng xem thông tin đơn hàng
Actor Tất cả Điều kiện kích hoạt Người dùng chọn một đơn gàng
1 Hệ thống hiển thị trang thông tin đơn hàng
2 Kết thúc Use-case Luồng sự kiện phụ
Trang đăng nhập, đăng ký
Hình 11:Giao diện đăng nhập
- Khi click vào nút Log in, sẽ dẫn vào trang đăng nhập của Website
- Khi click vào nút quên mật khẩu, sẽ dẫn vào trang nhập mail lấy lại mật khẩu sau đó xác nhận mật khẩu mới
Hình 12 : Giao diện nút trang đăng ký sau khi click Sign up
- Sau khi đăng nhập thành công, trang sẽ tự chuyển hướng về trang chủ.
Trang chủ
Hình 13:Giao diện trang chủ
- Với người dùng khách, các tính năng xem thông tin khách hàng
H ình 14:Giao diện thông tin người dùng
Trang thông tin nhà ở
Hình 15:Giao diện thông tin phòng
- Nhấn click vào sản phẩm, sẽ dẫn đến trang chi tiết sản phẩm
- Trang cá nhân sẽ hiển thị tên sản phẩm, hình ảnh, giá thành và các thông số.
Trang tìm kiếm
Hình 16: Giao diện trang tìm kiếm
Mặc định, website cung cấp nhiều thể loại và chủ đề khác nhau, bao gồm danh sách top sản phẩm nổi bật và các loại sản phẩm đa dạng.
H ình 17:Giao diện sau khi tìm kiếm
- Khi gõ vào thanh tìm kiếm từ khoá, công cụ tìm kiếm sẽ thể hiện kết quả về các loại điện thoại liên quan tới từ khoá đó.
Trang thông tin giỏ hàng
H ình 18:Giao diện thông tin chuyến đi
- Khi click vào giỏ hàng sẽ dẫn đến trang thông tin đơn hàng
- Trang này có 2 nhiệm vụ chính:
• Kiểm tra số lượng sản phẩm đặt mua
• Thanh đi đến thánh toán sản phẩm
• Nút Thanh Toán: khi click vào sẽ đổi sang trạng thái nhập thông tin khách hàng nhận đơn hàng và trạng thái của đơn hàng
H ình 19: Giao diện đặt phòng thành công.
Trang thông tin vận chuyển
Hình 20:Giao diện đặt phòng
- Khi click “Tiếp tục” sẽ dẫn đến trang thông tin vận chuyển
- Trang này liệt kê danh sách các thành phần mà người dùng order trong lần mua hàng đó - Cuối cùng đi tới chấp nhận thanh toán
