Báo cáo Đồ án cơ sở 2 Đề tài xây dựng website booking tour

 Vấn đề cần giải quyết Trong ngữ cảnh trên, vấn đề cần giải quyết là việc tạo ra một website booktour kết nối người dùng trên web và đại lý bán vé..  Đề xuất nội dung thực hiện Để giải

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ

TRUYỀN THÔNG VIỆT – HÀN KHOA KHOA HỌC MÁY TÍNH

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ

TRUYỀN THÔNG VIỆT – HÀN KHOA KHOA HỌC MÁY TÍNH

Lớp : 22NS

MỤC LỤC CHƯƠNG 1:MÔ TẢ TỔNG QUAN ĐÈ TÀI

1.1 Tổng quan về đề tà 8

1.2 Tổng quan về website 8

CHƯƠNG 2:PHÂN TÍCH VÀ THIẾT KẾ HỆ THỐNG 9

2.1 Phân tích 9

2.2 Tác nhân 9

2.3 Chức năng của ứng dụng 9

2.4 Sơ đồ Usecase 11

2.5 Đặc tả usecase: 11

2.6 Biểu đồ lớp 16

2.7 Biểu đồ hoạt động: 17

CHƯƠNG 3:GIAO DIỆN ỨNG DỤNG 21

3.1 Giao diện ứng dụng người dùng 21

3.2 Giao diện ứng dụng của quản trị viên 22

3.3 Giao diện ứng dụng của nhân viên giao hàng 23

CHƯƠNG 4: KẾT LUẬN 2 5

DANH MỤC HÌNH ẢNH

Hình 2.7-1 Biểu đồ hoạt động thanh toán 20

Hình 2.7-2 Biểu đồ hoạt động tương tác với admin 20

Hình 2.7-3 Biểu đồ hoạt động nhận đơn đặt hàng 21

Hình 2.7-4 Biểu đồ hoạt động xem đơn chưa được giao 21

Hình 2.7-5 Biểu đồ hoạt động quản lý người dùng 22

Hình 2.7-6 Biểu đồ hoạt động phản hồi người dùng 22

Hình 3.1-1 Giao diện đăng nhập 23

Hình 3.1-2 Giao diện đăng ký 24

Hình 3.1-3 Giao diện trang chủ 25

Hình 3.1-4 Giao diện chi tiết món ăn 27

Hình 3.1-5 Giao diện giỏ hàng 28

Hình 3.1-6 Giao diện thanh toán 29

Hình 3.1-7 Giao diện người dùng 30

Hình 3.1-8 Giao diện hiện thông tin tài khoản 31

Hình 3.1-9 Giao diện hiện địa chỉ 32

Hình 3.1-10 Giao diện tạo địa chỉ mới 33

Hình 3.1-11 Giao diện nhập thông tin địa chỉ 34

Hình 3.1-12 Giao diện cập nhật địa chỉ 35

Hình 3.1-13 Giao diện khung chat 36

Hình 3.1-14 Giao diện hiển thị đơn hàng 37

Hình 3.2-1 Giao diện đăng nhập 41

Hình 3.2-2 Giao diện trang chủ 42

Hình 3.2-3 Giao diện danh mục chức năng 43

Hình 3.2-4 Giao diện danh sách người dùng 44

Hình 3.2-5 Giao diện khung chat quản trị viên 45

Hình 3.2-6 Giao diện menu đồ ăn 46

Hình 3.2-7 Giao diện menu đồ ăn 47

Hình 3.2-8 Giao diện thêm mới món ăn 48

Hình 3.2-9 Giao diện cập nhật thông tin món ăn mới 49

Hình 3.2-10 Giao diện danh sách nhân viên giao hàng 50

Hình 3.3-1 Giao diện đăng nhập 52

Hình 3.3-2 Giao diện đăng ký 53

Hình 3.3-3 Giao diện danh sách đơn hàng 54

Hình 3.3-4 Giao diện đơn hàng đang giao 56

LỜI CẢM ƠN

Trước tiên em xin chân thành cảm ơn thầy Nguyễn Hữu Nhật Minh và quý thầy cô

bộ môn đã nhiệt tình giảng dạy và trang bị những kiến thức cơ bản, cần thiết cho emtrong quá trình thực hiện đề tài

Mặc dù đã rất cố gắng, nhưng trong một khoảng thời gian cho phép cũng như hạnchế về mặt kiến thức, báo cáo đồ án này không tránh khỏi những thiếu sót Chính vìvậy em rất mong nhận được những ý kiến đóng góp quý báu của quý Thầy Cô để kiếnthức của em trong lĩnh vực này được hoàn thiện hơn Em xin chân thành cảm ơn !

Đà Nẵng, ngày 2 tháng 12 năm 2023

NHẬN XÉT CỦA GIẢNG VIÊN

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

Đà Nẵng, ngày 2 tháng 12 năm 2023 Giảng viên hướng

dẫn

CHƯƠNG I: TỔNG QUAN ĐỀ TÀI

1.1 Tổng quan về đề tài

 Bối cảnh thực hiện đề tài

Trong bối cảnh hiện nay, sự phát triển của công nghệ thông tin đang mở ra nhiều cơ hội và thách thức mới Việc kết nối giữa người dùng trên nền tảng web ngày càng trở nên quan trọng, đặc biệt là xu hướng đi du lịch của mọi người Sự phổ biến của ứng dụng web đặt ra yêu cầu cao cho việc xây dựng các ứng dụng đa nền tảng chất lượng cao

 Vấn đề cần giải quyết

Trong ngữ cảnh trên, vấn đề cần giải quyết là việc tạo ra một website booktour kết nối người dùng trên web và đại lý bán vé Điều này đặt ra thách thức về việc xử lý giữa các thiết bị và cung cấp trải nghiệm người dùng đồng đều

 Đề xuất nội dung thực hiện

Để giải quyết vấn đề trên, đồ án sẽ tập trung vào triển khai một hệ thống đặt và sử dụng Node.js cho phần server, React cho ứng dụng web, Nội dung thực hiện sẽ bao gồm việc nắm vững cách thiết kế giao diện người dùng hiệu quả trên

webstite Database để lưu trữ cuộc trò chuyện dùng Nosql

‘MongoDB’ xử lý lưu trữ dữ liệu lớn mà không ảnh hưởng đến hiệu suất Vì sử dụng NoSql nên sẽ không có phần phân thích thiết kế hệ thống của ứng dụng

1.2 Phương pháp, kết quả

1.2.1 Phương pháp

 Chọn database NoSql kết nối với server (MongoDB)

 Sử dụng thư viện mongoose để kết nối ứng dụng Node.js với MongoDB

 Định nghĩa các mô hình dữ liệu để tương thích với cấu trúc tin nhắn trong ứng dụng chat

 Sử dụng các chỉ mục để tối ưu hóa truy vấn dữ liệu, đặc biệt là khi truy vấn lịch sử đặt tour của khách hàng

 Xây dựng server(Node.js)

 Sử dụng Node.js, express để triển khai server

 Xây dựng web client( React )

 Xây dựng giao diện người dùng với React để hiển thị và quản lý

 Xử lý sự kiện realtime để cập nhật cuộc trò chuyện trên ứng dụng di động

 Kiểm thử và sửa lỗi

 Tiến hành kiểm thử đơn vị và kiểm thử tích hợp để đảm bảotính ổn định và đáng tin cậy của hệ thống

 Sửa lỗi và cải thiện mã nguồn dựa trên phản hồi từ quá trình kiểm thử

1.2.2 Kết quả

 Phát triển được giao diện người dùng thân thiện, đáp ứng và hiệu quả trên nền tảng website

 Xử lý các lượt đặt hàng một cách nhanh chóng hiệu quả

CHƯƠNG II: NGHIÊN CỨU TỔNG QUAN

2.1 Phân tích các website có trên thị trường

 Traveloka

 Ưu điểm

 Giao diện thân thiện với người dùng

 Hỗ trợ tìm kiếm những nơi phù hợp nhu cầu

 Tính năng tìm kiếm giá rẻ

 Tìm kiếm thông tin còn hạn chế

 Website của tôi

 Ưu điểm

 Đơn giản tiện lợi cho người sử dụng

 Tích hợp thanh toán online

CHƯƠNG III: TRIỂN KHAI XÂY DỰNG

 3.1 Thiết kế database

 Tạo Database

 Có 3 collection chính ( tương tự 3 table trong SQL ):

 Locations: Lưu trữ thông tin id Tour, tên Tour

 Booking: Lưu trữ thông tin, ngày khởi hành, ngày kết thúc, giá cả của tất cả người dùng,

 Users: Lưu trữ thông tin người dùng

 Mô hình địa điểm:

 Sử dụng cấu trúc JSON để lưu thông tin

 Phân loại địa điểm theo id

description: mô tả chuyến đi

Hình 3.1.1 Cấu trúc collection locations

 Booking:

updatedAt: ngày sửa thông tin đặt

Hình 3.1.2 Cấu trúc collection booking

updatedAt: ngày sửa thông tin tài khoản

Hình 3.1.3 Cấu trúc collection users

3.2 Triển khai Server với Node.js

MongoDB

truy xuất dữ liệu

3.3 Thiết kế giao diện người dùng ( Web )

- Sử dụng FrameWork React để tạo giao diện

3.3.1 Giao diện trang đăng nhập, đăng ký

- Nếu người dùng chưa có tài khoản, nhấp vào ‘Register để sangtrang đăng ký người dùng Ngược lại nếu đã có thì nhấn vào

‘Register để về trang đăng nhập

3.3.3 Trang home

Hình 3.3.3 Trang home

- Nút logout nếu người dùng muốn đăng xuất

- Hiển thị danh sách nơi muốn đến

- Người dùng có thể chọn nơi mình muốn đến và bấm nút

“ViewDetails ” đề xem thêm

3.3.4 Giao diện đặt tour

Hình 3.3.4 Giao diện đặt tour

- Bố cục nền trắng dễ nhìn

- Người dùng dễ dàng xem chi tiết thông tin đặt tour của mình

- Có thể thanh toán online

3.3.5 Giao diện thanh toán

- Người dùng nhập thông tin để thanh toán

- Ở đây mô phỏng thanh toán bằng api “Stripe” cổng thanh toán của Mỹ, dựa trên mẫu có sẵn

Hình 3.3.5 Giao diện thanh toán

3.3.6 Giao diện lịch sử đặt

- Hiển thị danh sách tour đã đặt và hủy

- Tích luỹ kinh nghiệm làm mô hình mạng client-server kiểu mới

-Có cho mình project xịn giúp mình show được nó với các nhàtuyển dụng trong tương lai

2 Hướng nghiên cứu

- Tìm thêm các chức năng mới giúp tăng thêm trải nghiệm ngườidùng

- Tạo các dự án cá nhân mới để tích luỹ thêm kinh nghiệm xâydựng app mobile

- Ứng dụng thêm AI

TÀI LIỆU THAM KHẢO

&ved=2ahUKEwjwm6GDqNf-

%2Fnanoweb.vn%2Fthiet-ke-app-ban-hang-tong-quan-va-su-nd227675.html&usg=AOvVaw09JfYMC6rIb6P5ZZHRwk_f[

can-thiet-2

]

https://www.youtube.com/watch?v=7dAt-JMSCVQ&pp=ugMICgJ2aRABGAHKBQ1EZWxpdmVycnkgYXBw[