KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG ỨNG DỤNG HỖ TRỢ CHĂM SÓC DA

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM LÊ BÁ VƯƠNG HÀ THỊ ANH KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG ỨNG DỤNG HỖ TRỢ CHĂM SÓC DA Building the application supporting skin care KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM TP HỒ CHÍ MINH, 2021 ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CƠNG NGHỆ THÔNG TIN KHOA CÔNG NGHỆ PHẦN MỀM LÊ BÁ VƯƠNG – 17521277 HÀ THỊ ANH– 17520230 KHÓA LUẬN TỐT NGHIỆP XÂY DỰNG ỨNG DỤNG HỖ TRỢ CHĂM SÓC DA Building the application supporting skin care KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM GIẢNG VIÊN HƯỚNG DẪN ThS LÊ THANH TRỌNG TP HỒ CHÍ MINH, 2021 THƠNG TIN HỘI ĐỒNG CHẤM KHĨA LUẬN TỐT NGHIỆP Hội đồng chấm khóa luận tốt nghiệp, thành lập theo Quyết định số …………………… ngày ………………… Hiệu trưởng Trường Đại học Công nghệ Thông tin ……………………………………… – Chủ tịch ………………………………….…… – Thư ký …………………………………….… – Ủy viên ……………………………………… – Ủy viên ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH CỘNG HỊA XÃ HỘI CHỦ NGHĨA VIỆT NAM TRƯỜNG ĐẠI HỌC Độc Lập - Tự Do - Hạnh Phúc CÔNG NGHỆ THÔNG TIN TP.HCM, ngày……tháng… năm…… NHẬN XÉT KHÓA LUẬN TỐT NGHIỆP (CỦA CÁN BỘ HƯỚNG DẪN) Tên khóa luận: XÂY DỰNG ỨNG DỤNG HỖ TRỢ CHĂM SĨC DA Nhóm SV thực hiện: Cán hướng dẫn: Lê Bá Vương 17521277 Hà Thị Anh 17520230 ThS Lê Thanh Trọng Đánh giá Khóa luận Về báo cáo: Số trang 120 Số chương Số bảng số liệu 27 _ Số hình vẽ 51 _ Số tài liệu tham khảo 10 _ Sản phẩm Một số nhận xét hình thức báo cáo: …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… Về nội dung nghiên cứu: …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… Về chương trình ứng dụng: …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… Về thái độ làm việc sinh viên: …………………………………………………………………………………… …………………………………………………………………………………… Đánh giá chung:Khóa luận đạt/khơng đạt yêu cầu khóa luận tốt nghiệp kỹ sư/ cử nhân, xếp loại Giỏi/ Khá/ Trung bình Điểm sinh viên: Lê Bá Vương: ……… /10 Hà Thị Anh: ……… /10 ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM TRƯỜNG ĐẠI HỌC Độc Lập - Tự Do - Hạnh Phúc CÔNG NGHỆ THƠNG TIN TP.HCM, ngày……tháng… năm…… NHẬN XÉT KHĨA LUẬN TỐT NGHIỆP (CỦA CÁN BỘ PHẢN BIỆN) Tên khóa luận: XÂY DỰNG ỨNG DỤNG HỖ TRỢ CHĂM SĨC DA Nhóm SV thực hiện: Cán phản biện: Lê Bá Vương 17521277 Hà Thị Anh 17520230 Đánh giá Khóa luận Về báo cáo: Số trang 120 Số chương Số bảng số liệu 27 _ Số hình vẽ 51 _ Số tài liệu tham khảo 10 _ Sản phẩm Một số nhận xét hình thức báo cáo: …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… Về nội dung nghiên cứu: …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… Về chương trình ứng dụng: …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… …………………………………………………………………………………… Về thái độ làm việc sinh viên: …………………………………………………………………………………… …………………………………………………………………………………… Đánh giá chung:Khóa luận đạt/khơng đạt u cầu khóa luận tốt nghiệp kỹ sư/ cử nhân, xếp loại Giỏi/ Khá/ Trung bình Điểm sinh viên: Lê Bá Vương: ……… /10 Hà Thị Anh: ……… /10 Người nhận xét (Ký tên ghi rõ họ tên) LỜI CẢM ƠN Quá trình thực luận văn tốt nghiệp giai đoạn quan trọng quãng đời sinh viên Luận văn tốt nghiệp tiền đề nhằm trang bị cho chúng em kỹ nghiên cứu, kiến thức quý báu trước lập nghiệp cịn kết cho năm tháng khơng ngừng nỗ lực học tập, rèn luyện Để hoàn thành khóa luận “Xây dựng ứng dụng hỗ trợ chăm sóc da” bên cạnh nỗ lực thân tận tình bảo, giúp đỡ thầy cô giáo Trước hết, chúng em xin chân thành cảm ơn quý Thầy, Cô trường Đại học Công nghệ thông tin Đặc biệt Thầy, Cô khoa Công nghệ phần mềm tận tình dạy trang bị cho chúng em kiến thức cần thiết suốt thời gian ngồi ghế giảng đường, làm tảng cho chúng em hồn thành khóa luận Chúng em xin gửi lời cảm ơn chân thành sâu sắc đến thầy Lê Thanh Trọng, người đồng hành chúng em suốt trình thực khóa luận Nhờ tận tình giúp đỡ thầy chúng em định hướng cách tư cách làm việc khoa học Đó góp ý q báu khơng q trình thực khóa luận mà cịn hành trang tiếp bước cho chúng em đường học tập lập nghiệp sau Xin cảm ơn thầy cô hội đồng với lời góp ý chân thành bổ ích giúp luận văn chúng em tốt Cuối cùng, xin cảm ơn gia đình, người thân, bạn bè bên cạnh, ủng hộ, động viên tinh thần suốt trình thực khóa luận ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM TRƯỜNG ĐẠI HỌC Độc Lập - Tự Do - Hạnh Phúc CÔNG NGHỆ THÔNG TIN ĐỀ CƯƠNG CHI TIẾT TÊN ĐỀ TÀI: XÂY DỰNG ỨNG DỤNG HỖ TRỢ CHĂM SÓC DA Cán hướng dẫn: ThS Lê Thanh Trọng Thời gian thực hiện:Từ ngày 01/03/2021 đến ngày 26/06/2021 Sinh viên thực hiện: Lê Bá Vương – 17521277 Hà Thị Anh – 17520230 Nội dung đề tài: Mục tiêu: Xây dựng ứng dụng với tính hỗ trợ người dùng q trình chăm sóc da, tạo mơi trường chia sẻ học hỏi kinh nghiệm từ chuyên gia người dùng khác Tập trung vào chức chính: • Kiểm tra phân tích da: Làm kiểm tra da với hệ thống câu hỏi trắc nghiệm phân loại da Tiến sĩ Leslie Baumann nhận kết loại da sau hệ thống phân tích Nhận sản phẩm gợi ý phù hợp • Xây dựng quy trình dưỡng da cá nhân: Thêm, chỉnh sửa bước dưỡng da quy trình • Nhật ký dưỡng da: Cập nhật lưu lại trạng thái da ngày • Lên lịch trình dưỡng da: Dễ dàng hẹn ngày cụ thể để hệ thống nhắc nhở kế hoạch dưỡng da dự định • Học hỏi chia sẻ kinh nghiệm dưỡng da: Đăng bài, thảo luận, theo dõi người dùng khác • Trị chuyện: Nhắn tin, chia sẻ nhận tư vấn hỗ trợ trực tiếp từ người dùng khác • Đặt lịch tư vấn với chuyên gia: Nhận tư vấn trực tiếp với chuyên gia thông qua buổi tư vấn online lên lịch thành cơng • Nhận xét/Đánh giá: Để lại bình luận đánh giá khách quan viết, chia sẻ, sản phẩm chuyên gia Bên cạnh đó, đề tài tạo hội để nghiên cứu, học hỏi để nâng cao chuyên môn lĩnh vực phát triển phần mềm, nắm bắt công nghệ xu hướng phát triển ứng dụng thị trường Phạm vi: Đề tài “Xây dựng ứng dụng hỗ trợ chăm sóc da” tập trung xây dựng ứng dụng chuyên chăm sóc da dành cho thiết bị chạy hệ điều hành Android • Ngữ cảnh: Q trình chăm sóc da khơng phải q phức tạp nhiều người thường nghĩ khơng phải đơn giản người chưa thực hiểu da mình, hiểu kiến thức làm đẹp Điều mà họ cần công cụ, phương tiện hỗ trợ, cung cấp kiến thức làm đẹp, đồng hành họ trình chăm sóc da Cơng cụ phải đáp ứng xu hướng làm đẹp đại nhanh, tiện lợi hiệu • Đề tài tập trung giải vấn đề tồn đọng phát sinh việc chăm sóc da ngày như: - Thiếu kiến thức làm đẹp - Chưa có quy trình dưỡng da chuyên biệt - Chưa có nơi giao lưu, đặt câu hỏi 3.2.3 Thiết kế kiến trúc hệ thống 3.2.3.1 Kiến trúc tổng thể Hình 3.18 Sơ đồ kiến trúc tổng thể hệ thống Kiến trúc tổng thể hệ thống bao gồm: - Skincare server: Máy chủ ứng dụng, sử dụng framework ExpressJs viết ngôn ngữ javascript, chạy hệ điều hành - Admin: Trang quản trị, quản lý người dùng liệu khác danh sách sản phẩm, - SMTP server: Máy chủ giao tiếp với SMTP server thông qua giao thức SMTP cần gửi mail đến người dùng - MongoDB: Là hệ thống quản lý liệu hệ thống - Firebase cloud storage: Lưu trữ liệu trực tuyến hình ảnh,… 105 - Firebase cloud messaging: Kết nối với máy chủ để gửi thông báo tới thiết bị người dùng - Firebase Authentication: Api xác thực firebase 3.2.3.2 Kiến trúc ứng dụng di động Hình 3.19 Sơ đồ kiến ứng dụng di động • Tầng giao diện (Presentation): Có chức cập nhật hiển thị thơng tin, nhận liệu, kiểm tra tính đắn liệu trước gọi xuống tầng xử lý nghiệp vụ Bao gồm thành phần chính: - View: Gồm có Screen - Chứa hình hiển thị ứng dụng Component - Các thành phần giao diện thiết kế để tái sử dụng nhiều hình - ViewModel: Phần logic trung gian View Model - Model: Đại diện cho đối tượng nghiệp vụ cần xử lý • Tầng nghiệp vụ (Business): Kiểm tra ràng buộc, tính đắn liệu theo nghiệp vụ trước lưu trữ Ở chiều ngược lại, xử lý 106 chuyển đổi liệu thô thành đối tượng nghiệp vụ đẩy lên tầng giao diện • Tầng liệu (Data Access): Có chức giao tiếp với sở liệu lưu trữ, cập nhật, truy vấn 3.2.4 Thiết kế giao diện 3.2.4.1 Danh sách hình STT Mơ tả chức Tên hình Đăng nhập Sử dụng để đăng nhập vào hệ thống Đăng kí Đăng kí tài khoản Xác nhận email Xác nhận tài khoản email Quên mật Đặt lại mật Trang chủ Hiển thị thông tin chung Bảng tin Hiển thị danh sách viết người theo dõi Thêm viết Tạo viết Tìm kiếm người dùng Tìm kiếm hiển thị danh sách kết tìm kiếm Gợi ý theo dõi Gợi ý theo dõi số người dùng 10 Chăm sóc da Hiển thị menu chức Chăm sóc da 11 Cập nhật mục tiêu da Cập nhật mục tiêu chăm sóc da 12 Thông tin da Hiển thị thông tin loại da 13 Bài kiểm tra da Hiển thị danh sách phần kiểm tra da 14 Làm kiểm tra da Trả lời lưu câu trả lời kiểm tra da 107 15 Quy trình dưỡng da Quản lý bước quy trình dưỡng da 16 Thêm quy trình dưỡng da Thêm bước dưỡng da vào quy trình 17 Thêm sản phẩm vào quy Thêm sản phẩm dưỡng da vào bước quy trình dưỡng da trình 18 Lịch trình dưỡng da 19 Thêm lịch trình dưỡng da 20 Danh sách câu chuyện Hiển thị danh sách câu chuyện dưỡng dưỡng da 21 da Chi tiết câu chuyện dưỡng Danh sách nhật ký câu chuyện dưỡng da da 22 Thêm lịch trình dưỡng da Thêm câu chuyện Thêm câu chuyện dưỡng da dưỡng da 23 Viết nhật ký Tạo nhật ký câu chuyện dưỡng da 24 Nhật ký cảm xúc Hiển thị cảm xúc thay đổi câu chuyện dưỡng da 25 Tư vấn Màn hình điều khiển chức tư vấn chuyên gia 26 Danh sách lịch hẹn Hiển thị danh sách lịch hẹn theo ngày chọn 27 Danh sách chuyên gia Hiển thị danh sách chuyên gia đặt lịch tư vấn 28 Đặt lịch tư vấn Hiển thị thời gian rảnh chuyên gia cụ thể đặt lịch hẹn cho chuyên gia 108 29 Tạo thời gian rảnh Chuyên gia tạo thời gian rảnh để người dùng đặt lịch tư vấn vào khoảng thời gian 30 Trang cá nhân hiển thị thơng tin cá nhân Cá nhân menu tiện ích 31 Bài viết Hiển thị danh sách viết cá nhân 32 Tài khoản Cập nhật thông tin tài khoản 33 Sản phẩm Hiển thị danh sách loại sản phẩm 34 Danh sách sản phẩm Hiển thị danh sách sản phẩm theo loại 35 Sản phẩm Hiển thị danh sách sản phẩm (Các sản phẩm sử dụng quy trình dưỡng da) 36 Sản phẩm yêu thích Hiển thị danh sách sản phẩm yêu thích 37 Chi tiết sản phẩm Hiển thị thông tin chi tiết sản phẩm 38 Trò chuyện Hiển thị danh sách trò chuyện 39 Nhắn tin Màn hình tin nhắn tài khoản với 40 Đánh giá Hiển thị thông tin lượt đánh giá chuyên gia 41 Chứng Danh sách chứng chuyên gia 42 Thêm chứng Thêm chứng 43 Hỗ trợ Hiển thị tiện ích hỗ trợ ứng dụng Bảng 3.27 Danh sách hình 109 3.2.4.2 Giao diện số hình ứng dụng Hình 3.20 Bài kiểm tra da Hình 3.21 Làm kiểm tra da Hình 3.22 Trang chủ Hình 3.23 Chăm sóc da 110 Hình 3.24 Cập nhật mục tiêu da Hình 3.25 Quy trình dưỡng da Hình 3.26 Sản phẩm tơi Hình 3.27 Chi tiết sản phẩm 111 Hình 3.28 Bảng tin Hình 3.29 Đăng Hình 3.30 Thêm chứng Hình 3.31 Tạo hẹn 112 Hình 3.32 Lịch chuyên gia Hình 3.33 Đánh giá chuyên gia 113 3.3 Triển khai hệ thống 3.3.1 Máy chủ Máy chủ triển khai Amazon Elastic Compute Cloud (Amazon EC2), dịch vụ web cung cấp lực điện toán bảo mật có kích cỡ linh hoạt đám mây EC2 cung cấp nhiều tùy chọn cho phép người dùng tạo máy ảo theo lựa chọn cấu hình riêng họ Máy ảo cài server thuộc hệ điều hành Ubuntu 18.04.5 LTS Dưới thông tin máy chủ: Hình 3.34 Thơng tin máy chủ cài đặt server Sử dụng pm2, trình quản lý process (tiến trình) dành cho ứng dụng Nodejs để quản lý tiến trình hoạt động server 114 Hình 3.35 Quản lý tiến trình server pm2 3.3.2 Ứng dụng di động Do giới hạn kinh phí, thời gian nên sản phẩm dừng lại mức độ chạy thử chưa thể đưa lên Google Play để triển trai thực tế Tuy nhiên, qua trình kiểm thử sử dụng, kết cho thấy ứng dụng hoạt động tốt, ổn định với hệ điều hành Android 4.0 trở lên 115 Chương KẾT LUẬN VÀ HƯỚNG PHÁT TRIỂN 4.1 Kết đạt Sau q trình thực đề tài, nhóm em phát triển thành công ứng dụng mang tên “Skincare” với chủ đề “Xây dựng ứng dụng hỗ trợ chăm sóc da” Do giới hạn kinh phí, thời gian nên sản phẩm dừng lại mức độ chạy thử chưa thể đưa lên Google Play để triển trai thực tế Tuy nhiên, qua trình kiểm thử sử dụng, kết cho thấy ứng dụng hoạt động tốt, ổn định, có khả nâng cấp mở rộng Cụ thể kết đạt sau: • Về mặt sản phẩm: - Ứng dụng có đầy đủ chức mục tiêu đề - Ứng dụng hoạt động tốt, ổn định, khả phản hồi nhanh - Có khả nâng cấp, mở rộng • Về mặt kiến thức: - Hiểu rõ quy trình phát triển phần mềm, biết cách áp dụng quy trình vào thực tế - Kĩ phân chia xếp công việc cải thiện - Kĩ code tốt - Trau dồi kĩ làm việc nhóm • Về mặt kĩ thuật: - Hiểu sâu framework ReactNative, Express.js… - Biết áp dụng kiến thức lập trình mạng, SocketIO…để áp dụng vào việc xây dựng ứng dụng - Biết cách triển khai máy chủ nên tảng đám mây 116 4.2 Thuận lợi khó khăn 4.2.1 Thuận lợi - Được giúp đỡ tận tình từ nhà trường, đặc biệt giảng viên hướng dẫn giúp nhóm chúng em định hướng cơng việc cần làm, giúp trình thực dễ dàng - Thuận lợi việc tiếp cận tìm hiểu công nghệ sử dụng - Động lực từ bạn bè anh chị khóa trước 4.2.2 Khó khăn - Các công nghệ thư viện sử dụng thường xuyên gặp vấn đề mã nguồn xung đột phiên - Khối lượng công việc lớn, áp lực mặt thời gian - Chưa tham gia nhiều vào dự án xây dựng ứng dụng di động thực tế nên phải tự tìm hiểu - Mã nguồn Android thường xuyên gặp lỗi khó sửa 4.3 Hướng phát triển Mặc dù trình thực đề tài kết thúc đề tài cịn mở rộng nâng cấp tương lai Cụ thể: - Liên kết với tài khoản bên thứ ba như: Facebook, Google, Twitter - Hỗ trợ đa ngôn ngữ, đa chủ đề - Nâng cấp khả quét da thông qua Camera - Phân tích sâu sản phẩm dựa hình ảnh sản phẩm - Thêm chức phát thành phần có hại cho da sản phẩm - Cải thiện giao diện 117 Sau hoàn thiện, triển khai ứng dụng lên Google Play để người trải nghiệm ứng dụng 118 TÀI LIỆU THAM KHẢO Tài liệu tiếng Anh [1] “React Native Documents” [Online] Available: https://reactnative.dev/docs/getting-started [Accessed 15 March 2021] [2] “React Native Components” [Online] Available: https://reactnative.dev/docs/components-and-apis [Accessed 20 March 2021] [3] “React Navigation Documents” [Online] Available: https://reactnavigation.org/docs/getting-started [Accessed 25 March 2021] [4] Firebase, “Notifications” [Online] Available: https://rnfirebase.io/messaging/notifications [Accessed 10 April 2021] [5] Paula’s Choice, “Ingredient dictionary” [Online] Available: https://www.paulaschoice.com/ingredient-dictionary [Accessed 15 April 2021] [6] Leslie Baumann, “16 Baumann Skin Types” [Online] Available: https://lesliebaumannmd.com/16-baumann-skin-types/ [Accessed 20 April 2021] [7] Firebase, “React Native Firebase” [Online] Available: https://rnfirebase.io/ [Accessed 25 April 2021] [8] Socket.io, “Socket.io Documents” [Online] Available: https://socket.io/docs/v4 [Accessed 10 May 2021] [9] “What is oily skin?” [Online] Available: https://www.evolvebeauty.co.uk/blogs/news/what-is-oily-skin [Accessed 25 June 2021] [10] “Dry skin: How can we help?” [Online] https://www.evolvebeauty.co.uk/blogs/news/dry-skin-how-can-we-help Available: [Accessed 25 June 2021] Tài liệu tiếng Việt [1] Thủy Tiên, “Hệ thống câu hỏi trắc nghiệm phân loại da” [Online] Available: https://windlovebeauty.wordpress.com/2015/08/24/he-thong-cau-hoi-trac-nghiemphan-loai-da/ [Accessed 20 April 2021] [2] YouNetMedia, “Cơ hội cho thị trường chăm sóc da sau mùa dịch Covid-19” [Online] Available: https://younetmedia.com/co-hoi-nao-cho-thi-truong-cham-socda-sau-mua-dich-covid-19/ [Accessed 10 June2021] 119 ... triển ứng dụng thị trường Phạm vi: Đề tài ? ?Xây dựng ứng dụng hỗ trợ chăm sóc da? ?? tập trung xây dựng ứng dụng chuyên chăm sóc da dành cho thiết bị chạy hệ điều hành Android • Ngữ cảnh: Q trình chăm. .. triển ứng dụng thị trường 1.4 Phạm vi Đề tài ? ?Xây dựng ứng dụng hỗ trợ chăm sóc da? ?? tập trung xây dựng ứng dụng chuyên chăm sóc da dành cho thiết bị chạy hệ điều hành Android • Đối tượng sử dụng: ... tiễn Ứng dụng người bạn đồng hành hữu ích cho gặp vấn đề da, chuẩn bị chăm sóc da hay trình chăm sóc da Thơng qua ứng dụng, người dùng khơng học thêm kiến thức chăm sóc da mà cịn hỗ trợ xây dựng