Xây dựng website bán quần áo

BỘ GIÁO DỤC VÀ ĐÀO TẠO TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH ĐỒ ÁN TỐT NGHIỆP NGÀNH CÔNG NGHỆ THÔNG TIN XÂY DỰNG WEBSITE BÁN QUẦN ÁO GVHD: TRẦN CÔNG TÚ SVTH: DƯƠNG VĂN CƯỜNG MSSV: 16110027 SVTH: PHẠM THỊ HÀ MSSV: 16110061 SKL007082 Tp Hồ Chí Minh, tháng 07/2020 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG WEBSITE BÁN QUẦN ÁO SVTH : Khóa : Ngành : GVHD : TP Hồ Chí Minh, tháng năm 2020 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG WEBSITE BÁN QUẦN ÁO SVTH : Khóa : Ngành : GVHD : TP Hồ Chí Minh, tháng năm 2020 CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc *** -TP Hồ Chí Minh, ngày tháng năm 2020 NHIỆM VỤ KHÓA LUẬN TỐT NGHI ỆP Họ tên sinh viên 1: Dương Văn Cường MSSV: 16110027 Lớp: 16110CLST1 Họ tên sinh viên 2: Phạm Thị Hà Lớp: 16110CLST4 MSSV: 16110061 Ngành: Công Nghệ Thông Tin Giảng viên hướng dẫn: ThS Trần Công Tú Ngày nhận đề tài: 24/2/2020 Ngày nộp đề tài: 1/7/2020 Tên đề tài: Xây dựng website bán quần áo Các số liệu, tài liệu ban đầu: Tiểu luận chuyên ngành Nội dung thực đề tài: Đề tài phát triển từ Tiểu luận chuyên ngành với nhiệm vụ cụ thể sau: • Thiết kế cài đặt lại số chức như: thêm sản phẩm, toán, quản lý tài khoản, đăng nhập đăng ký tài khoản, … • Bổ sung chức cịn thiếu: đánh giá sản phẩm, điều chỉnh trạng thái đơn hàng, thống kê doanh thu, xem chi tiết đơn hàng mua, • Cài đặt thêm chức như: toán online, gợi ý sản phẩm, chatbot hỗ trợ khách hàng Sản phẩm: Website bán quần áo TRƯỞNG NGÀNH GIẢNG VIÊN HƯỚNG DẪN iii CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc ******** PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪ N Họ tên sinh viên 1: MSSV: Họ tên sinh viên 2: MSSV: Ngành: Tên đề tài: Họ tên giáo viên hướng dẫn: NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: (Bằng chữ: ) TP Hồ Chí Minh, ngày thán g năm 20… Giáo viên hướng dẫn (Ký & ghi rõ họ tên) iv CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc lập – Tự – Hạnh phúc ******** PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN Họ tên sinh viên 1: MSSV: Họ tên sinh viên 2: MSSV: Ngành: Tên đề tài: Họ tên giáo viên phản biện: NHẬN XÉT Về nội dung đề tài & khối lượng thực hiện: Ưu điểm: Khuyết điểm: Đề nghị cho bảo vệ hay không? Đánh giá loại: Điểm: (Bằng chữ: ) TP Hồ Chí Minh, ngày thán g Giáo viên phản biện (Ký & ghi rõ họ tên) năm 20… v LỜI CẢM ƠN Lời nói đầu tiên, nhóm thực xin gửi lời cảm ơn chân thành sâu sắc đến ThS Trần Công Tú tận tâm dẫn dắt bảo nhóm thực suốt q trình thực đề tài! Nhờ có Thầy mà nhóm thực có hướng thực đắn nhanh chóng nhanh chóng tìm hướng giải vấn đề cách tốt Chính mà sản phẩm hoàn thiện cách chuyên nghiệp có chất lượng Nhóm thực xin cảm ơn thầy cô Hội đồng phản biện có nhận xét cơng tâm ưu điểm hạn chế để từ nhóm thực có thay đổi giúp cho sản phẩm nhóm đạt chất lượng tốt hơn! Cuối cùng, nhóm thực xin chân thành cảm ơn ban lãnh đạo trường Đại học Sư phạm Kỹ thuật Thành phố Hồ Chí Minh thầy giảng viên thuộc khoa Đào tạo chất lượng cao tạo điều kiện cho nhóm học tập, nghiên cứu hồn thành tốt khóa luận tốt nghiệp nhóm! Trong trình thực báo cáo khó tránh khỏi thiếu sót mong q thầy thơng cảm, góp ý để nhóm thực cải thiện tốt cho thân sau Nhóm thực xin chân thành cảm ơn! vi LỜI MỞ ĐẦU Ngày nay, kinh tế ngày phát triển kéo theo chất lượng sống người ngày nâng cao Nhu cầu ăn no mặc ấm không cần thiết mà người ta hướng tới để ăn thật ngon, mặc thật đẹp Chính nói riêng ngành cơng nghiệp may mặc ngành hàng ln phát triển mạnh mẽ qua năm nhu cầu ngày cao người Hiện dù nông thôn hay thành thị đường ta không khỏi bắt gặp người tụ tập gian hàng quần áo chợ, cửa hàng thời trang khu mua sắm quần áo trung tâm thương mại Điều cho ta thấy nhu cầu ăn mặc người ngày tăng lên Tuy nhiên, việc mua sắm truyền thống khơng cịn lựa chọn số phần lớn người tiêu dùng nước Bởi sống đại ngày người ln muốn việc phải thật nhanh chóng, thuận tiện mà lại khơng phải tốn nhiều công sức Do nhu cầu cộng với phát triển cơng nghệ thơng tin việc mua sắm quần áo với người trở nên thuận tiện nhờ hình thức mua sắm online, cần có smartphone tay với vài phút tìm kiếm mạng tìm vơ vàn trang web bán quần áo online với đầy đủ mẫu mã, kiểu dáng, màu sắc, giá tiền…phù hợp với yêu cầu người tiêu dùng Nhận thấy vấn đề nhóm thực định lựa chọn xây dựng Website bán quần áo làm đề tài cho Khóa luận tốt nghiệp Với xu hướng công nghệ phát triển Web năm gần React, Vue, jQuery, GraphQL, Kotlin, … nhóm xem xét dựa kiến thức học với xu hướng sử dụng công nghệ định lựa chọn kết hợp hai cơng nghệ bao gồm Angular ASP.NET Web API để thực đề tài vii MỤC LỤC NHIỆM VỤ KHÓA LUẬN TỐT NGHIỆP PHIẾU NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN PHIẾU NHẬN XÉT CỦA GIÁO VIÊN PHẢN BIỆN LỜI CẢM ƠN LỜI MỞ ĐẦU MỤC LỤC DANH MỤC CÁC TỪ VIẾT TẮT DANH MỤC CÁC BẢNG BIỂU DANH MỤC CÁC BIỂU ĐỒ VÀ HÌNH ẢNH Chương TỔNG QUAN 1.1 Lý chọn đề tài 1.2 Mục tiêu 1.3 Công nghệ sử dụng Chương CƠ SỞ LÝ THUYẾT 2.1 Angular Framework 2.2 ASP.NET Web API 2.3 ASP.NET Entity Framework 2.4 Microsoft SQL Server 2016 2.5 Dialogflow 2.6 Hệ thống gợi ý sản phẩm Chương PHÂN TÍCH VÀ THIẾT KẾ 3.1 Khảo sát trạng 3.1.1 Website can 3.1.2 Website no 3.1.3 Website nem 3.1.4 Website yam 3.1.5 Website gu 3.1.6 Website gu viii private void UserSimilarityCalculation() { using(var entity = new RoseFashionDBEntities()) { var userlist = entity.Users.Where(u => u.Role!="admin").ToList(); for (int i = 0; i < userlist.Count - 1;i++) { string userid1 = userlist[i].UserID; for (int j = i + 1; j < userlist.Count; j++) { string userid2 = userlist[j].UserID; var vectors = entity.fn_GetTwoVetor(userid1, userid2).ToList(); double[] vector1 = new double[vectors.Count]; double[] vector2 = new double[vectors.Count]; for (int k = 0; k < vectors.Count; k++) { vector1[k] = (double)vectors[k].User1Rating; vector2[k] = (double)vectors[k].User2Rating; } Similarity newrecord = new Similarity(); newrecord.UserID1 = userid1; newrecord.UserID2 = userid2; newrecord.SimilarityRate = Cosine_Similarity(vector1, vector2); var existedrecord = entity.Similarities.FirstOrDefault(r => r.UserID1 == newrecord.UserID1 && r.UserID2 == newrecord.UserID2); if (existedrecord != null) { existedrecord.SimilarityRate = newrecord.SimilarityRate; } else { entity.Similarities.Add(newrecord); } entity.SaveChanges(); } } } } 84 4.3.4 Hàm dự đoán kết đánh giá private void PredictUserRating() { using(var entity = new RoseFashionDBEntities()) { var userlist = entity.Users.Where(u => u.Role!="admin").ToList(); foreach(User user in userlist) { entity.proc_RemoveOldRecommendation(user.UserID); var unratedproduct = entity.fn_GetUnRatedProduct(user.UserID).ToList(); foreach (string productid in unratedproduct) { var toprating = entity.fn_GetProductRatingFromTopSimilarUser( user.UserID, productid).ToList(); if (toprating.Count != 0) { double numerator = 0; double denominator = 0; for(int i=0; i r.UserID==user.UserID && r.ProductID==productid); if (oldrecord != null) { oldrecord.PredictedStar = predictrating; } else { entity.Recommendations.Add(new Recommendation { UserID = user.UserID, ProductID = productid, PredictedStar = predictrating }); } entity.SaveChanges(); } } } } 85 Do tài khoản quản trị viên không cần gợi ý sản phẩm nên thực dự đoán đánh giá với tài khoản người dùng Đầu tiên, loại bỏ dự đốn có từ trước cách sử dụng procedure proc_RemoveOldRecommendation Sau đó, tìm sản phẩm mà user xét chưa đánh giá function fn_GetUnRatedProduct Với sản phẩm tìm được, sử dụng function fn_GetProductRatingFromTopSimilarUser để tìm đánh giá từ user tương đồng với user xét lên sản phẩm Cuối cùng, thay giá trị vừa tìm vào cơng thức nêu mục 2.6 giá trị dự đốn sau lưu vào sở liệu create procedure proc_RemoveOldRecommendation @userid varchar(50) as begin delete from Recommendation where UserID=@userid and ProductID in (select Recommendation.ProductID from Recommendation inner join (select Product.ProductID, Rating.UserID from Product, Rating where Rating.UserID = @userid and Product.ProductID = Rating.ProductID) as temp on Recommendation.ProductID = temp.ProductID where Recommendation.UserID = temp.UserID) end 86 create function fn_GetUnRatedProduct(@userid varchar(50)) returns @result Table(ProductID varchar(50)) as begin insert into @result select ProductID from Product where ProductID not in (select ProductID from Rating where Rating.UserID = @userid) return end create function fn_GetProductRatingFromTopSimilarUser(@userid varchar(50), @productid varchar(50)) returns @result table(SimilarityRate float, UserID varchar(50), Star float) as begin insert into @result select TOP 10 SimilarityRate, UserID, Star from Similarity sub1 inner join( select UserID, Star from Rating where ProductID = @productid) sub2 on sub1.UserID1 = sub2.UserID or sub1.UserID2 = sub2.UserID where sub1.UserID1 = @userid or sub1.UserID2 = @userid order by SimilarityRate desc return end 87 Sau thuật tốn hồn tất, sở liệu chứa danh sách giá trị đánh giá dự đoán user lên sản phẩm mà người chưa thực đánh giá Function fn_GetRecommendedProduct lấy sản phẩm có kết dự đốn cao từ danh sách để gợi ý cho người dùng create function fn_GetRecommendedProduct(@userid varchar(50)) returns @result table(ProductID varchar(50)) as begin insert into @result select Top 10 ProductID from (select * from Recommendation where UserID = @userid) as temp order by PredictedStar desc return end 88 4.4 Sử dụng Dialogflow để xây dựng Chatbot 4.4.1 Tạo Project (Agent) Sau đăng nhập vào Dialogflow thành cơng trang Dialogflow console chọn Create Agent để tạo chatbot Hình 4.3 Giao diện tạo Agent Dialogflow Sau chọn Create ta tạo thành cơng Agent để ta tiếp tục bước xây dựng kịch cho chatbot 4.4.2 Tạo kịch cho Chatbot 4.4.2.1 Tạo từ khóa cho chatbot (Entity) Cũng tư vấn viên cho khách hàng shop bán quần áo, chatbot cần phải trả lời số câu hỏi đặc trưng vấn đề mua bán quần áo như: muốn mua áo thun nam, shop đâu hay phí giao hàng bao nhiêu, … Chính vậy, để xây dựng chatbot cho website, nhóm cần phải xác định chủ đề cụ thể để dựa vào chatbot đưa câu trả lời xác - bước tạo Entity Dialogflow chatbot Dưới số Entity mà nhóm xác định được: 89 Hình 4.4 Các Entity xác định cho chatbot Tuy nhiên, với Entity xác định thường mang ý nghĩa chung mà để tạo entity hồn chỉnh ta cần xác định thêm từ khóa cụ thể Entity Ví dụ nhóm xác định entity Địa dựa vào câu hỏi mà khách hàng đặt liên quan đến Entity Địa xác định số từ khóa như: đâu, chỗ nào, nơi nào, … Hình 4.5 Tạo từ khóa cho entity Nhờ vào việc xác định từ khóa cho Entity, chatbot xác định xác ý nghĩa từ câu hỏi khách hàng 90 4.4.2.2 Tạo Intents Có thể hiểu việc tạo Intents việc tạo mẫu câu hỏi câu trả lời tương ứng để từ chatbot học hỏi sau đưa câu trả lời hợp lý Với chatbot tạo ta có hai Intent mặc định Default Fallback Intent (những câu hội thoại mà chatbot không hiểu) Default Welcome Intent (những câu hội thoai thuộc chào hỏi) Tuy nhiên, với hai Intent mặc định cần phải điều chỉnh để phù hợp với mục tiêu giao tiếp chatbot Trong phần điều quan trọng việc tự tạo Intent phù hợp với mục đích giao tiếp chatbot, điều quan trọng để tạo chatbot hiệu Với Intent tự tạo xây dựng dựa Entity có, ví dụ hình đây: Hình 4.6 Tạo Intent cho chatbot 91 Hình 4.7 Tạo Intent cho chatbot Như nói phần nhóm tạo Entity cho chatbot, với Entity Địa nhóm tạo Intent Địa liên quan Trong Intent Địa hình có câu hỏi như: địa shop nằm đâu, shop đâu vậy, shop nằm đâu, ta thấy câu hỏi chứa từ khóa nằm Entity Địa Chính nhờ vào việc xác định đánh dấu lại từ khóa câu hỏi Dialogflow giúp cho chatbot xác định nội dung câu hỏi khách hàng thuộc chủ đề gì, từ chọn câu trả lời phù hợp từ mục Responses Hình 4.8 Câu trả lời cho chatbot (tương ứng với câu hỏi Intent) Như vậy, việc tạo nhiều Entity Intent giúp ta tạo chatbot 92 4.4.3 Kết nối Chatbot với website Lấy mã Client access token từ Dialogflow chatbot Hình 4.9 Lấy Access token Tạo biến chứa giá trị vào file enviroment.ts Angular export const environment = { production: false, dialogflow: { angularBot: 'YourClientAccessToken' } }; Hình 4.10 Sử dụng Access token 93 Để kết nối với chatbot, ta thực bước sau: • Khởi tạo ApiAiClient với tham số mã Client Access Token • Tạo hàm converse để gửi câu hỏi nhận câu trả lời từ Dialogflow export class ChatService { readonly token = environment.dialogflow.angularBot; readonly client = new ApiAiClient({ accessToken: this token }); conversation = new BehaviorSubject([]); constructor() {} converse(msg: string) { const userMessage = new Message(msg, 'user'); this.update(userMessage); return this.client.textRequest(msg) then(res => { const speech = res.result.fulfillment.spech; const botMessage = new Message(speech,'bot'); this.update(botMessage); }); } Hình 4.11 Kết nối chatbot với website 94 Chương TỔNG KẾT 5.1 Kết đạt Sau nhiều cố gắng nỗ lực, nhóm thực hồn tất đề tài Khóa luận tốt nghiệp với kết đạt sau: • Tổng hợp áp dụng kiến thức thân suốt trình học tập vào việc xây dựng ứng dụng thực tế • Hồn tất cài đặt website bán quần áo theo thiết kế đề • Sửa đổi cải thiện sai sót mắc phải Tiểu luận chuyên ngành • Áp dụng kiến thức Machine learning – đề tài quan tâm giới công nghệ 5.2 Ưu điểm Sau hoàn thành đề tài, dựa vào so sánh thực tế nhận xét khách quan nhóm đưa số ưu điểm cho sản phẩm nhóm sau: • • • • • • Giao diện web thân thiện, đồng màu sắc, font chữ Thao tác đơn giản nhanh chóng Giao diện tương thích với thiết bị desktop, tablet mobile Đồng hóa số lượng sản phẩm giỏ với số lượng kho Có chatbot hỗ trợ khác hàng Áp dụng Machine learning thông qua hệ thống gợi ý sản phẩm 5.3 Nhược điểm Bên cạnh ưu điểm nêu trên, kỹ chun mơn cịn hạn chế nên sản phẩm nhóm cịn tồn số hạn chế: • • • • • Vẫn cịn thiếu sót nhiều chức so với sản phẩm thực tế Giao diện chưa có tính thẩm mĩ cao Chưa triển khai kiểm tra website môi trường vận hành thực Chưa thể đáp ứng yêu cầu bảo mật Tốc độ xử lý hiển thị liệu chưa tốt 5.4 Khó khăn Trong q trình thực đề tài nhóm gặp phải số khó khăn như: • • • • Khơng tiếp xúc thực tế với nghiệp vụ quản trị viên Khó khăn tài triển khai website mơi trường vận hành thực tế Khả xử lý việc truy cập lúc nhiều tài khoản máy Cài đặt tính dùng để bảo mật web 95 5.5 Bài học kinh nghiệm Sau trình học tập thực đề tài, nhóm thực rút cho thân nhiều học kinh nghiệm không kỹ chuyên môn mà kỹ mềm làm việc nhóm như: • Trong q trình thực cần thống số quy tắc như: cách đặt tên thư mục, tên biến, vị trí lưu, … để tránh nhầm lẫn dư thừa • Nên note lại lỗi gặp để tránh thời gian sửa chữa sau • Khi sử dụng cơng nghệ nên nắm lý thuyết thực hành ví dụ nhỏ trước áp dụng vào dự án lớn • Cần phải quan tâm đến trải nghiệm người dùng không nên áp đặt ý kiến chủ quan thiết kế UX, UI • Thực kiểm thử sớm để hạn chế tối đa lỗi phát sinh rủi ro lớn • Cần biết cách quản lý thời gian, nâng cao trách nhiệm thân tương tác tốt với thành viên nhóm để tránh bị trì trệ cơng việc 5.6 Hướng phát triển Mặc dù sản phẩm đáp ứng phần lớn chức cần thiết để phục vụ cho nhu cầu sử dụng người dùng website bán quần áo, nhiên, nhiều nhược điểm, thiếu sót mà nhóm sửa chữa, cải thiện phát huy Vì vậy, nhóm thực đề kế hoạch để phát triển sản phẩm nhóm tương lai sau: • Hồn thiện sản phẩm dựa ý kiến đóng góp từ Hội đồng phản biện • Tìm hiểu bổ sung thêm chức cho quản trị viên cho website để sản phẩm bám sát với nhu cầu thực tế • Nâng cao bảo mật, khả xử lý phản hồi website • Đưa sản phẩm vào sử dụng môi trường thực tế để kiểm tra khả đáp ứng thực 96 ... tài xây dựng website bán quần áo để phục vụ cho việc phát triển thương hiệu thời trang 1.2 Mục tiêu Áp dụng kiến thức học kết hợp công nghệ tìm hiểu để phân tích, thiết kế xây dựng website bán quần. .. 3.1 Khảo sát trạng 3.1.1 Website can 3.1.2 Website no 3.1.3 Website nem 3.1.4 Website yam 3.1.5 Website gu 3.1.6 Website gu viii 3.1.7 Website she 3.1.8 Website yo 3.1.9 Kết luận 3.2 Mơ... NGHIỆP XÂY DỰNG WEBSITE BÁN QUẦN ÁO SVTH : Khóa : Ngành : GVHD : TP Hồ Chí Minh, tháng năm 2020 TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT TP HỒ CHÍ MINH KHOA ĐÀO TẠO CHẤT LƯỢNG CAO KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG