Nghiên cứu xây dựng thiết kế website bán giày

ĐẠI HỌC ĐÀ NẴNG TRƯỜNG ĐẠI HỌC SƯ PHẠM BÁO CÁO KHÓA LUẬN TỐT NGHIỆP THIẾT KẾ VÀ XÂY DỰNG WEBSITE BÁN GIÀY Sinh viên : Võ Ngọc Thành Đạt GVHD : TS Nguyễn Trần Quốc Vinh Lớp : 17CNTTC Trường Đại Học Sư Phạm – Đại Học Đà Nẵng CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc Khoa Tin         NHIỆM VỤ KHÓA LUẬN TỐT NGHIỆP Họ tên: VÕ NGỌC THÀNH ĐẠT Chuyên ngành: CÔNG NGHỆ THÔNG TIN Lớp: 17 CNTTC MSSV: 3120417004 Tên đề tài: NGHIÊN CỨU XÂY DỰNG THIẾT KẾ WEBSITE BÁN GIÀY Giảng viên hướng dẫn: TS NGUYỄN TRẦN QUỐC VINH Nhiệm vụ sinh viên - Nhận đề tài từ giảng viên hướng dẫn - Lên kế hoạch thực - Bắt đầu cơng việc - Hồn thành đề tài Đà Nẵng, ngày tháng năm 2021 TRƯỞNG BỘ MÔN GIÁO VIÊN HƯỚNG DẪN (Ký ghi rõ họ tên) (Ký ghi rõ họ tên) PHẦN NHẬN XÉT CỦA GIẢNG VIÊN HƯỚNG DẪN Đà Nẵng, Ngày … tháng … năm 2021 Giảng viên hướng dẫn PHẦN NHẬN XÉT CỦA HỘI ĐỒNG PHẢN BIỆN Đà Nẵng, Ngày … tháng … năm 2021 Hội Đồng Phản Biện MỤC LỤC MỤC LỤC DANH MỤC HÌNH ẢNH LỜI CẢM ƠN 11 MỞ ĐẦU 12 THÔNG TIN KẾT QUẢ NGHIÊN CỨU .14 CHƯƠNG 1: TỔNG QUAN VỀ CÔNG NGHỆ THIẾT KẾ WEBSITE 16 1.1 Tìm hiểu ngơn ngữ lập trình 16 1.1.1 Ngôn ngữ HTML 16 1.1.2 Ngôn ngữ CSS 17 1.1.3 Ngôn ngữ lập trình NodeJS 18 1.1.4 Framework ReactJS 19 1.2 Một số thư viện hỗ trợ 19 1.2.1 Thư viện Javascript 19 1.2.2 Thư viện Ajax 20 1.2.3 Thư viện BOOTSTRAP 20 1.2.4 Thư viện JQUERY 21 1.3 Cơ sở liệu MongoDB 22 1.3.1 Khái niệm sở liệu MongoDB 22 1.3.2 Các thành phần MongoDB .23 1.4 Giới thiệu Dialogflow 24 1.4.1 Khái niệm Dialogflow .24 1.4.2 Lịch sử đời hoạt động 26 CHƯƠNG 2: PHÂN TÍCH THIẾT KẾ HỆ THỐNG WEBSITE 27 2.1 Khảo sát đặc tả yêu cầu 27 2.1.1 Phần quản lý admin .27 2.1.2 Giao diện người dùng 27 2.2 Phân tích thiết kế hệ thống 28 2.2.1 Các chức hệ thống 28 2.2.2 Các tác nhân hệ thống 28 2.3 Biểu đồ use case 32 2.3.1 Biểu đồ Use – case tổng quát 32 2.3.2 Use case quản lý danh mục sản phẩm 33 2.3.3 Use case khách hàng quản lý giỏ hàng 34 2.3.4 Use case quản lý sản phẩm .35 2.3.5 Use case quản lý thành viên 37 2.3.6 Use case quản lý đơn đặt hàng .38 2.4 Biểu đồ 39 2.4.1 Biểu đồ chức đăng nhập 39 2.4.2 Biểu đồ chức đăng ký 40 2.4.3 Biểu đồ chức tìm kiếm sản phẩm 41 2.4.4 Biểu đồ quản lý thành viên 42 2.4.5 Biểu đồ quản lý đơn đặt hàng .43 2.5 Biểu đồ hoạt động .44 2.5.1 Biểu đồ hoạt động đăng ký tài khoản .44 2.5.2 Biểu đồ hoạt động đăng nhập tài khoản 45 2.5.3 Biểu đồ hoạt động mua hàng toán 46 2.5.4 Biểu đồ hoạt động tìm kiếm sản phẩm 47 2.6 Biểu đồ trạng thái .48 2.6.1 Biểu đồ trạng thái đăng ký tài khoản 48 2.6.2 Biểu đồ trạng thái đăng nhập tài khoản 49 2.6.3 Biểu đồ trạng thái quản lý thành viên .50 2.6.4 Biểu đồ trạng thái tìm kiếm sản phẩm 51 2.7 Biểu đồ lớp phân tích .52 2.8 Thiết kế sở liệu .53 2.8.1 Bảng Admin 53 2.8.2 Bảng Product 53 2.8.3 Bảng User .54 2.9 Quy trình hệ thống chatbot 54 2.9.1 Khảo sát sử dựng chatbot 54 2.9.2 Lựa chọn tảng công cụ xây dựng chatbot 55 2.9.3 Xây dựng kịch triển khai chatbot .56 2.9.4 Chatbot phản hồi nào? .56 2.9.5 Phân tích theo dõi .58 CHƯƠNG 3: THIẾT KẾ VÀ XÂY DỰNG WEBSITE .59 3.1 Giao diện hiển thị .59 3.1.1 Giao diện trang chủ hiển thị 59 3.1.2 Giao diện sản phẩm 59 3.1.3 Giao diện đăng nhập .60 3.1.4 Giao diện đăng ký 60 3.1.5 Giao diện giỏ hàng 61 3.2.6 Giao diện hệ thống chatbot hỗ trợ người dùng 62 3.2 Giao diện chức quản lý 63 3.2.1 Giao diện trang chủ admin 63 3.2.2 Giao diện trang quản lý sản phẩm 63 3.2.3 Giao diện trang quản đơn đặt hàng 64 3.2.4 Giao diện trang quản lý sản phẩm 64 3.2.5 Giao diện trang quản lý người dùng 64 KẾT LUẬN 65 Kết đạt 65 Hạn chế đề tài 65 Hướng phát triển 66 TÀI LIỆU THAM KHẢO 67 DANH MỤC HÌNH ẢNH Hình 1: Dialogflow 25 Hình 2: Biểu đồ Use case tổng quát 32 Hình 3: Biểu đồ Use case quản lý danh mục sản phẩm 33 Hình 4: Biểu đồ Use case quản lý giỏ hàng 34 Hình 5: Biểu đồ Use case quản lý sản phẩm 35 Hình 6: Biểu đồ Use case quản lý thành viên 37 Hình 7: Biểu đồ Use case quản lý đơn đặt hàng .38 Hình 8: Biểu đồ chức đăng nhập 39 Hình 9: Biểu đồ chức đăng ký 40 Hình 10: Biểu đồ chức tìm kiếm sản phẩm 41 Hình 11: Biểu đồ quản lý thành viên 42 Hình 12: Biểu đồ quản lý đơn đặt hàng 43 Hình 13: Biểu đồ hoạt động đăng ký tài khoản .44 Hình 14: Biểu đồ hoạt động đăng nhập tài khoản 45 Hình 15: Biểu đồ hoạt mua hàng toán 46 Hình 16: Biểu đồ hoạt động tìm kiếm sản phẩm .47 Hình 17: Biểu đồ trạng thái đăng ký tài khoản .48 Hình 18: Biểu đồ trạng thái đăng nhập tài khoản 49 Hình 19: Biểu đồ trạng thái quản lý thành viên 50 Hình 20: Biểu đồ trạng thái tìm kiếm sản phẩm .51 Hình 21: Biểu đồ lớp phân tích .52 Hình 22: Bảng Admin .53 Hình 23: Bảng Category_Product 53 Hình 24: Bảng User 54 Hình 25: quy trình hoạt động chabot 57 Hình 26: Giao diện trang chủ hiển thị .59 Hình 27: Giao diện sản phẩm 59 Hình 28: Giao diện đăng nhập 60 Hình 29: Giao diện đăng ký 60 Hình 30: Giao diện giỏ hàng 61 Hình 31: Giao diện hệ thống chatbot hỗ trợ người dùng 62 Hình 32: Giao diện trang chủ admin .63 Hình 33: Giao diện trang quản lý sản phẩm 63 Hình 34: Giao diện trang quản đơn đặt hàng 64 Hình 35: Giao diện trang quản lý người dùng 64 10 2.8 Thiết kế sở liệu 2.8.1 Bảng Admin Hình 22: Bảng Admin 2.8.2 Bảng Product Hình 23: Bảng Category_Product 53 2.8.3 Bảng User Hình 24: Bảng User 2.9 Quy trình hệ thống chatbot 2.9.1 Khảo sát sử dựng chatbot Khảo sát bước đầu để xác định chatbot phục vụ cho đối tượng khách hàng Chúng ta nên có khảo sát độ tuổi, giới tính sở thích mua hàng nhóm khách hàng tiềm mà bạn hướng đến Chúng ta dựa vào Facebook Page Insights xây dựng chatbot Messenger Facebook Nếu xây dựng chatbot cho website, bạn dựa vào thơng tin thu thập Google Analytics định hướng chạy quảng cáo bạn (nếu bạn sử dụng Facebook Ads và/hoặc Google Adwords để tìm kiếm, tiếp cận khách hàng) Sau có định hướng rõ ràng sản phẩm phương pháp tiếp cận khách hàng cụ thể, Chúng ta bắt tay vào xây dựng chatbot riêng Xây dựng chatbot trình xác định tương tác người dùng chatbot Người thiết kế chatbot xác định tính cách chatbot, câu hỏi hỏi cho người dùng tương tác tổng thể Nó xem tập hợp câu hỏi mang tính định hướng tiêu dùng với lựa chọn giới hạn Để tăng tốc q trình này, người thiết kế sử dụng công cụ xây dựng chatbot chuyên dụng, cho phép xem trước cách mà chatbot tương tác 54 Một phần quan trọng xây dựng chatbot tập trung vào việc kiểm tra người dùng Kiểm tra người dùng thực theo hướng dẫn để thử nghiệm giao diện chatbot xây dựng 2.9.2 Lựa chọn tảng công cụ xây dựng chatbot Quá trình xây dựng, thử nghiệm triển khai chatbots thực tảng phát triển chatbot Một số tảng phổ biến chúng cho phép sử dụng miễn phí Tuy nhiên, sử dụng chatbot cho mục đích kinh doanh nên sử dụng WIT.AI phát triển hoạt động Messenger Flatform API.AI hỗ trợ với Google Cloud Platform Rất nhiều cơng cụ xây dựng chatbot miễn phí xây dựng dựa hai tảng Một số công cụ tiếng có nhiều nhà thiết kế chatbot tin 33 tưởng sử dụng SnachBot, Chatfuel, Harafunel, … Khi bạn có định hướng cụ thể cơng cụ xây dựng chatbot, sử dụng chúng để bắt đầu tạo cho botchat 55 2.9.3 Xây dựng kịch triển khai chatbot Q trình xây dựng kịch chatbot chia thành hai nhiệm vụ chính: hiểu ý định người dùng tạo câu trả lời thơi thúc người dùng chọn câu trả lời Nhiệm vụ liên quan đến việc hiểu người dùng muốn tìm Hiện nay, người dùng tương tác với bot dạng văn tự câu lệnh thoại Một kịch đưa để xác định người dùng tương tác với hệ thống Trong kịch có câu hỏi đáp án để người dùng lựa chọn Chatbot kết hợp AI hồn tồn đọc thơng tin người dùng gửi đến cách lọc từ khóa phản hồi lại 2.9.4 Chatbot phản hồi nào? Nhiệm vụ thứ hai liên quan đến phản hồi mà chatbot tạo đưa kết quả, gợi ý cho người dùng Các câu trả lời bot đưa câu hỏi sau người dùng chọn lựa chọn đáp án câu hỏi trước Ví dụ như: 56 Hình 25: quy trình hoạt động chabot Đây sơ đồ phần kịch chatbot Tuy nhiên, mẫu chatbot đơn giản sử dụng cấu trúc menu/buttons để đưa lựa chọn cho người dùng Nếu bạn muốn biết thêm loại chatbot phức tạp có khả trị chuyện với người dùng với ngơn ngữ tự nhiên tích hợp công nghệ hiệu ứng camera, chatbot xử lý âm thanh, … theo dõi tìm hiểu thêm vấn đề cần sử dụng để tạo chatbot tương tự Sau hoàn tất kịch bản, bạn triển khai cài đặt bot Messenger lên ứng dụng chat mà bạn muốn Quá trình cài đặt nhanh, khoảng đồng hồ, tạo chatbot tương tác đơn giản Website 57 2.9.5 Phân tích theo dõi Việc phân tích tạo cho sở liệu khách hàng để bạn tích hợp thêm chức chăm sóc khách hàng Ví dụ việc chúc mừng sinh nhật khách hàng, gửi thơng báo chương trình khuyến mại hay đơn giản tự động đưa lựa chọn yêu thích khách hàng truy cập đặt đơn hàng Việc sử dụng chatbot cần được theo dõi để phát lỗi vấn đề tiềm ẩn Theo dõi phân tích đoạn chat cung cấp thơng tin hữu ích giúp bạn cải thiện trải nghiệm người dùng (đặc biệt với người mua hàng) Việc phân tích khơng dừng lại bước thống kê xem sản phẩm chọn mua nhiều hay nhóm tuổi khách hàng bạn bao nhiêu,… Nó cịn tiền đề cho giai đoạn bảo trì cải tiến chatbot sau 58 CHƯƠNG 3: THIẾT KẾ VÀ XÂY DỰNG WEBSITE 3.1 Giao diện hiển thị 3.1.1 Giao diện trang chủ hiển thị Hình 26: Giao diện trang chủ hiển thị 3.1.2 Giao diện sản phẩm Hình 27: Giao diện sản phẩm 59 3.1.3 Giao diện đăng nhập Hình 28: Giao diện đăng nhập 3.1.4 Giao diện đăng ký Hình 29: Giao diện đăng ký 60 3.1.5 Giao diện giỏ hàng Hình 30: Giao diện giỏ hàng 61 3.2.6 Giao diện hệ thống chatbot hỗ trợ người dùng Hình 31: Giao diện hệ thống chatbot hỗ trợ người dùng 62 3.2 Giao diện chức quản lý 3.2.1 Giao diện trang chủ admin Hình 32: Giao diện trang chủ admin 3.2.2 Giao diện trang quản lý sản phẩm Hình 33: Giao diện trang quản lý sản phẩm 63 3.2.3 Giao diện trang quản đơn đặt hàng Hình 34: Giao diện trang quản đơn đặt hàng 3.2.4 Giao diện trang quản lý người dùng Hình 35: Giao diện trang quản lý người dùng 64 KẾT LUẬN Kết đạt ❖ Nắm kiến thức thiết kế xây dựng website React js sở liệu MongoDB sử dụng Redux lưu trữ cịn có sử dụng kiến thức HTML5, CSS3 JavaScript để thiết kế dựng giao diện người dùng ❖ Xây dựng hệ thống cung cấp chức website nói chung bán giày nói riêng ❖ Giao diện đơn giản, đẹp, lịch giúp người dung tương tác dễ dàng ❖ Cung cấp thông tin sản phẩm, cửa hàng, thương hiệu sản phẩm ❖ Cung cấp sản phẩm theo thể loại ❖ Thay đổi lựa chọn mua sản phẩm ❖ Thêm vào giỏ hàng tiến hành toán ❖ Quản lý danh sách sản phẩm, người dùng, … ❖ Ứng dụng phần trí tuệ nhân tạo nhỏ vào website với mục đích tương tác cách tốt với người dùng Hạn chế đề tài ➢ Các khía cạnh toán chưa khai thác hết ➢ Các chức chưa đạt với mục tiêu đề so với thực tế ➢ Hạn chế đối tượng sử dụng ➢ Chưa thao tác với danh sách sản phẩm, người dùng 65 Hướng phát triển • Cải thiện chức có xây dựng thêm chức cịn thiếu • Thương mại hóa website • Phát triển thành App • Xây dựng hệ thống quản lý chặt chẽ • Tổ chức sở liệu chặt chẽ tăng thêm tính bảo mật • Tổ chức quyền sử dụng hệ thống chức sử dụng đối tượng cụ thể, rõ ràng đầy đủ 66 TÀI LIỆU THAM KHẢO [1] Giao diện website: https://vansvietnam.com/ https://www.converse.com.vn/ [2] Học Reactjs https://www.youtube.com/watch?v=vok14zYNs7o&list=PLRhlTlpDUWswrSL W_wYQCotCI3vGa8Ljz https://www.youtube.com/watch?v=gL5HBA_1bDQ&list=PLJ5qtRQovuEOo KffoCBzTfvzMTTORnoyp [3] Học Nodejs https://www.youtube.com/watch?v=z2f7RHgvddc&list=PL_VfJajZj0VatBpaXkEHK_UPHL7dW6I3 [4] Lý thuyết Reactjs https://thachpham.com/ https://viblo.asia/ [5] Tài liệu sách ReactJS https://www.newline.co/fullstack-react 67 ... với mọt hệ thống thông tin thiết kế tốt, giao diện đẹp dễ sử dụng Em lựa chọn đề tài “NGHIÊN CỨU XÂY DỰNG WEBSITE BÁN GIÀY” với mong muốn vận dụng kiến thức học, xây dựng trang web có tính thực... 3120417004 Tên đề tài: NGHIÊN CỨU XÂY DỰNG THIẾT KẾ WEBSITE BÁN GIÀY Giảng viên hướng dẫn: TS NGUYỄN TRẦN QUỐC VINH Nhiệm vụ sinh viên - Nhận đề tài từ giảng viên hướng dẫn - Lên kế hoạch thực - Bắt... hiểu NodeJS, MongoDB , ReactJS phục vụ trình xây dựng trang web - Website nhanh hiệu việc quản lý, bán hàng 14 Kết đạt - Xây dựng thành công website bán giày - Tìm hiểu nắm bắt kiến thức HTML , CSS