Tìm hiểu flutter và thuật toán recommendation, xây dựng ứng dụng minh họa

Trong số đó có Flutter mặc dù là công cụ ra đời muộn nhất nhưng có tốc độ phát triển vượt trội và nhiều ưu điểm so với các công nghệ đi trước, nhiều công ty công nghệ lớn sử dụng Flutter

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

KHOA CÔNG NGHỆ PHẦN MỀM

HUỲNH HẠ VY – 16521470

ĐỖ NGỌC BÍCH TRÂM – 16521273

KHÓA LUẬN TỐT NGHIỆP

Tìm hiểu Flutter và thuật toán Recommendation, xây dựng

ứng dụng minh họa

Research on Several Recommendation Algorithms and Build Illustrative

Application with Flutter

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

KHOA CÔNG NGHỆ PHẦN MỀM

HUỲNH HẠ VY – 16521470

ĐỖ NGỌC BÍCH TRÂM – 16521273

KHÓA LUẬN TỐT NGHIỆP

Tìm hiểu Flutter và thuật toán Recommendation, xây dựng

ứng dụng minh họa

Research on Several Recommendation Algorithms and Build Illustrative

Application with Flutter

KỸ SƯ NGÀNH KỸ THUẬT PHẦN MỀM

GIẢNG VIÊN HƯỚNG DẪN

Hội đồng chấm khóa luận tốt nghiệp, thành lập theo Quyết định số ………

…… ngày ……… của Hiệu trưởng Trường Đại học Công nghệ Thông tin

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC

CÔNG NGHỆ THÔNG TIN

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

Độc Lập - Tự Do - Hạnh Phúc

TP HCM, ngày tháng năm 2021

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:

Tìm hiểu Flutter và thuật toán Recommendation, xây dựng ứng dụng minh họa

Đánh giá Khóa luận:

1 Về cuốn báo cáo:

Một số nhận xét về hình thức cuốn báo cáo:

•

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH

TRƯỜNG ĐẠI HỌC

CÔNG NGHỆ THÔNG TIN

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM Độc Lập – Tự Do – Hạnh Phúc

TP HCM, ngày tháng năm 2021

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:

Tìm hiểu Flutter và thuật toán Recommendation, xây dựng ứng dụng minh họa

Nhóm sinh viên thực hiện: Cán bộ phản biện:

ĐỖ NGỌC BÍCH TRÂM

16521273

Đánh giá Khóa luận:

1 Về cuốn báo cáo:

Một số nhận xét về hình thức cuốn báo cáo:

HUỲNH HẠ VY: ……… /10

ĐỖ NGỌC BÍCH TRÂM: ……… /10

Người nhận xét

(Ký và ghi rõ họ tên)

LỜI CẢM ƠN

Sau quá trình học tập và rèn luyện tại khoa Công nghệ phần mềm trường Đại

học Công nghệ Thông tin – ĐHQG TP.HCM chúng em đã được trang bị các kiến thức cơ bản, các kỹ năng thực tế để có thể hoàn thành Khóa luận tốt nghiệp của mình

Chúng em xin gửi lời cảm ơn chân thành đến thầy Trần Anh Dũng và thầy Nguyễn Đình Hiển đã quan tâm hướng dẫn truyền đạt những kiến thức và kinh nghiệm cho chúng em trong suốt thời gian học tập bộ môn Khóa luận tốt nghiệp

Cuối cùng, chúng em xin gửi lời cảm ơn đến tất cả thầy cô trong khoa và bạn

bè đã luôn bên cạnh, chỉ bảo, truyền đạt và động viên chúng em

Trong quá trình làm bài tập môn không tránh khỏi được những sai sót, chúng

em mong nhận được sự góp ý của quý thầy và các bạn để được hoàn thiện hơn

Chúng em xin chân thành cảm ơn

Thành phố Hồ Chí Minh, tháng năm 2021

Sinh viên

HUỲNH HẠ VY

ĐỖ NGỌC BÍCH TRÂM

Thời gian thực hiện: Từ ngày 14/8/2020 đến ngày 10/01/2020

Sinh viên thực hiện:

1 Huỳnh Hạ Vy – 16521470

2 Đỗ Ngọc Bích Trâm – 16521273

Nội dung đề tài:

1 Mục tiêu của đề tài:

1.1 Bối cảnh chọn đề tài

Ngày nay, công nghệ thông tin ngày một phát triển, kéo theo đó là sự bùng

nổ của các thiết bị điện tử, đặc biệt là điện thoại thông minh và máy tính Nếu như trước đây việc sở hữu một chiếc điện thoại thông minh hay máy tính khá khó khăn thì ngày nay do sự cạnh tranh gay gắt giữa các thương hiệu khiến giá thành những thiết bị này rẻ hơn và việc sở hữu chúng trở nên dễ dàng hơn Vì thế nhu cầu phát triển ứng dụng cho các thiết bị này càng ngày càng tăng cao

Để tiếp cận đến nhiều người dùng, các nhà phát triển ứng dụng mong muốn ứng dụng của họ chạy được trên nhiều nền tảng đặc biệt là Android, iOS, Windows, MacOS và web Thay vì phải tìm hiểu nhiều ngôn ngữ, công nghệ khác nhau ứng với từng nền tảng thì hiện nay trên thị trường có nhiều công cụ hỗ trợ lập trình đa nền tảng như Flutter, React Native, Ionic, … giúp các nhà phát triển ứng dụng tiết kiệm thời gian, chi phí dành cho quá trình phát triển ứng dụng Trong số đó có Flutter mặc dù là công cụ ra đời muộn nhất nhưng có tốc độ phát triển vượt trội và nhiều ưu điểm so với các công nghệ đi trước, nhiều công

ty công nghệ lớn sử dụng Flutter để phát triển sản phẩm của mình như Google, Alibaba, Tencent, … Ứng dụng xây dựng với Flutter hoạt động với hiệu năng mạnh mẽ và hiếm có vấn đề về mặt tương thích, ngoài ra đây còn là công cụ mã nguồn mở nên ngày càng nhiều lập trình viên và công ty quan tâm đến công nghệ mới này

Đây là lý do nhóm chọn đề tài khóa luận tốt nghiệp là “Tìm hiểu Flutter và xây dựng ứng dụng minh họa” Ngoài ra, trong thời điểm dịch toàn cầu COVID-

19 đang diễn ra, thông qua các kiến thức đã tìm hiểu, tích lũy được nhóm nhận thấy từ việc mua hàng qua mạng chỉ với thủ tục đăng ký mua sắm đơn giản nhưng đem lại nhiều lợi ích: tiết kiệm và chủ động về thời gian, tránh những nơi đông người và tránh khỏi những phiền phức khó chịu Vậy nên việc mua bán hàng qua mạng đang rất được mọi người quan tâm Trên cơ sở các kiến thức được học trong nhà trường và quá trình tìm hiểu các website trong thực tế, nhóm đã quyết định tích hợp thêm hệ thống hỗ trợ gợi ý sản phẩm vào ứng dụng hiện tại nhằm

hỗ trợ khách hàng đến mức tối đa, tăng trải nghiệm khách hàng đối với ứng dụng

- Khách hàng chỉ cần các thao tác đơn giản trên điện thoại di động là có thể đặt

Các trang thương mại điện tử, trang mua bán laptop hiện nay đa số đều có

ý tưởng và phương thức hoạt động tương đồng ở hầu hết các khâu như: loại hàng hóa, vận chuyển, thanh toán, độ tin cậy… và không có gì khác biệt để tạo ra giá trị vượt trội cho khách hàng ngoại trừ ưu thế về giá (rẻ)

+ Sau quá trình khảo sát, lắng nghe ý kiến người dùng, giải pháp mà nhóm

đề ra để tăng lượt truy cập và thời gian sử dụng của người dùng đối với ứng dụng của mình là nhóm đã đưa thêm các bài viết tin tức, những câu chuyện liên quan đến laptop, công nghệ mới và những video liên quan về các sản phẩm laptop tại trang thông tin sản phẩm, điều đó sẽ giúp người dùng vừa giải trí bổ ích có thêm kiến thức, vừa trở thành người tiêu dùng

thông minh hơn và từ đó gắn bó với ứng dụng của mình hơn

+ Đồng thời hệ thống gợi ý sản phẩm sẽ lấy dữ liệu những vấn đề mà người dùng quan tâm từ đó đưa ra các sản phẩm, bài viết gợi ý trong trang chủ khi người dùng vừa mở ứng dụng

+ Ngoài ra, app còn ứng dụng công nghệ Flutter vào việc xây dựng giao diện ứng dụng, từ đó giao diện trở nên trực quan, thu hút người dùng hơn

− Tính khác biệt, cải thiện về chức năng

Chọn lọc các chức năng tiện dụng nhất của top các app thương mại điện tử

lớn hiện nay để đưa vào ứng dụng ứng dụng của mình:

+ Tiki: Giỏ hàng chỉ có thể chọn mua tất cả hoặc xóa bớt (mua lại lần sau) Điều này đã làm dẫn đến sự hạn chế thoải mái lựa chọn và mua sắm của

người dùng

→ Ứng dụng thực hiện có thêm chức năng chọn và bỏ chọn trong phần giỏ hàng, những hàng chưa được chọn sẽ lưu lại trong giỏ hàng để mua sau

và tiến hành thanh toán những món chọn cho người dùng (một số ứng

dụng cũng đã làm điều này là Lazada, Shopee)

+ Shopee, Tiki, Sendo: lượng sản phẩm bán trên ứng dụng quá nhiều gây

ra hiện tượng giao diện trở nên rối mắt với quá nhiều tính năng, sản phẩm; Notification và banner quảng cáo các mặt hàng khác được push liên tục gây phiền nhiễu cho khách hàng nếu khách chỉ mong muốn mua laptop Ngoài ra, thực tế trên thị trường chưa xây dựng ứng dụng di động mua bán chuyên biệt cho laptop trong khi đây là một thị trường màu mỡ và cần

được khai thác

Điều này làm người dùng phải thao tác tìm kiếm trên màn hình dẫn đến làm giảm tính tiện dụng của app đối với người mua hàng Ngoài ra, nếu được recommend quá nhiều sản phẩm không mong muốn so với nhu cầu đang cần mua

laptop sẽ gây trải nghiệm không tốt cho người dùng

→ Ứng dụng Eshop cho phép người dùng được thực hiện trải nghiệm mua sắm đúng với nhu cầu mua laptop và phụ kiện, không gây rối mắt với quá nhiều thể loại sản phẩm và nhiều tính năng không cần thiết, giúp người dùng dễ theo dõi, sau này có thể mở rộng sang bán đồ điện tử, linh kiện

máy tính, phụ kiện

Sau bước chọn các sản phẩm trong giỏ hàng là phần điền địa chỉ nhận hàng:

Nếu chưa xác nhận đặt đơn hàng thì Tiki và Sendo không lưu địa chỉ mà người dùng đã từng nhập, trường hợp khách hàng quay về chỉnh sửa đơn giỏ hàng của mình rồi lại sang phần nhập địa chỉ thì phải nhập lại Điều này làm mất thời gian của người dùng và làm giảm tính tiện dụng của app đối với người mua

Các ứng dụng thương mại điện tử hiện nay đa số gợi ý sản phẩm cho người

dùng dựa trên sản phẩm bán chạy nhất, sản phẩm mới nhất chung cho tất cả các người dùng Việc này có thể hiệu quả tốt trong thời gian đầu nhưng về lâu thì chưa tốt (các sản phẩm bán chạy nhất được gợi ý nên được mua nhiều hơn và tiếp tục dẫn đầu danh sách)

→ Nhóm sẽ áp dụng gợi ý sản phẩm cho từng người dùng khác nhau dựa

trên lịch sử mua hàng, đánh giá của họ đối với sản phẩm Điều này giúp

tỉ lệ mua hàng của người dùng cao hơn, cải thiện doanh thu của người

bán và người mua có thể mua được sản phẩm ưng ý

để xây dựng trang admin cho ứng dụng Ngoài ra, thực hiện nghiên cứu và tìm hiểu phương pháp crawl data với Node JS để thu thập dữ liệu thực tế cho nghiên cứu, xây dựng hệ thống gợi ý sản phẩm Nghiên cứu và hiện thực hóa các thuật toán gợi ý sản phẩm, cụ thể là Content-based và Collaborative Có thể áp dụng trong ứng dụng trong việc gợi ý sản phẩm cũng như những dự án khác sau này Thứ hai là phát triển ứng dụng có tính thực tiễn cao, có khả năng triển khai ứng dụng vào thực tế, giúp những người có nhu cầu mua laptop và phụ kiện có thể thao tác dễ dàng và tiện lợi

Nhóm hy vọng dựa trên nền tảng lý thuyết đã được thầy cô truyền thụ lại, kết hợp với sự tìm hiểu công nghệ của nhóm, luận văn tốt nghiệp của nhóm sẽ đạt được mục đích như mong đợi

1.4 Ý nghĩa của đề tài

Trước hết, đề tài ''Tìm hiểu Flutter và xây dựng ứng dụng minh họa'' là một ứng dụng được xây dựng như một đề tài thể hiện việc áp dụng những kiến thức quý báu đã được các thầy cô của trường Đại học Công nghệ Thông tin – Đại học Quốc gia thành phố Hồ Chí Minh đã nhiệt tình truyền thụ lại cho chúng em Và đặc biệt là sự theo dõi và quan tâm giúp đỡ của thầy Trần Anh Dũng trong suốt thời gian nhóm chúng em thực hiện đề tài này

Thứ hai là những kinh nghiệm quý báu mà nhóm có được trong quá trình

thực hiện đề tài sẽ là hành trang tuyệt vời giúp ích rất nhiều cho công việc sau

này của mỗi thành viên trong nhóm

1.5 Nhiệm vụ của đề tài

− Tìm hiểu các hoạt động kinh doanh sản phẩm laptop và phụ kiện trong thực tế

− Tìm hiểu cách thức xây dựng một ứng dụng đa nền tảng với Flutter

− Xây dựng thành công ứng dụng có tích hợp hệ thống hỗ trợ gợi ý sản phẩm Hệ thống gợi ý sản phẩm đạt hiệu năng cao: phản hồi nhanh, độ chính xác cao

− Hệ thống tối ưu hóa lợi nhuận đối với những khách hàng mới

− Hệ thống có khả năng ứng dụng và triển khai vào thực tiễn nhanh chóng

− Áp dụng và triển khai tốt các kiến thức đã nghiên cứu và học hỏi vào hiện thức hóa ứng dụng

cầu mua Laptop và phụ kiện đi kèm

− Tìm hiểu về hệ thống gợi ý sản phẩm đối với 2 phương pháp: based method, Collaborative filtering method dựa trên các khía cạnh: ý tưởng, phương thức thực hiện và ưu, nhược điểm

Content-− Triển khai, đánh giá độ chính xác của từng phương pháp dựa trên dữ liệu thực nghiệm

− Áp dụng hệ thống gợi ý vào ứng dụng để gợi ý sản phẩm đến người dùng các sản phẩm phù hợp nhất

3 Đối tượng nghiên cứu:

− Các công cụ và thư viện của Flutter

− Hệ thống recommendation system cho sản phẩm

− Các công nghệ phù hợp hỗ trợ xây dựng ứng dụng minh họa: phương pháp crawl data thu thập dữ liệu người dùng thực tế với sự hỗ trợ của Node JS, ngôn ngữ lập trình Elixir và framework Phoenix,

− Những cá nhân có nhu cầu mua sắm online Laptop và các thiết bị phụ kiện

đi kèm trên nền tảng ứng dụng di dộng

4 Phương pháp thực hiện:

− Làm việc nhóm hai thành viên, lên kế hoạch và thực hiện bằng cách trao đổi trực tiếp hoặc gián tiếp qua các kênh chat online, quản lí task công việc thông qua trello

− Tham khảo các ứng dụng tương tự: shopee, tiki, lazada,

− Tham khảo ý kiến của giảng viên hướng dẫn để được định hướng đúng, đạt kết quả tốt nhất

− Thu thập phản hồi của người dùng để hoàn thiện, cải tiến ứng dụng

5 Kết quả mong đợi:

− Hiểu được các kiến thức liên quan đến Flutter

− Biết cách sử dụng các công cụ hỗ trợ lập trình đa nền tảng với Flutter

− Biết được các kỹ thuật lập trình với Flutter

− Biết cách sử dụng các công nghệ hỗ trợ để xây dựng ứng dụng minh họa

− Có khả năng dùng Flutter để xây dựng các ứng dụng đa nền tảng

− Hoàn thành ứng dụng mua bán Laptop và thiết bị đi kèm với giao diện trực quan, hoạt động tốt trên cả hai nền tảng Android và iOS

− Đẩy mạnh tích hợp tính năng gợi ý, giới thiệu sản phẩm phù hợp - tạo điều kiện thuận lợi nhất cho khách hàng

− Ứng dụng có giao diện đẹp, dễ sử dụng tâm lý thoải mái cuốn hút khách hàng khi sử dụng

− Tạo được sự liên kết logic giữa các màn hình để khách hàng có thể chuyển màn hình một cách nhanh nhất và thuận tiện nhất

− Đảm bảo tính bảo mật về các thông tin nhạy cảm của khách hàng tạo cảm giác an toàn cho khách hàng

− Đối với nhà quản trị có thể cập nhật, thêm xóa sửa đổi thông tin liên quan đến mặt hàng và các vấn đề khác Nhận và trả lời ý kiến về phía khách hàng

cứu 20/8/2020 − Phát biểu bài toán

− Khảo sát các ứng dụng tương tự

− Tìm hiểu công nghệ sử dụng

2 Phân tích hệ

thống

21/8/2020 - 10/9/2020

− Phân tích, xác định chức năng

− Tìm hiểu Flutter và ngôn ngữ Dart và ứng dụng vào việc xây dựng giao diện ứng dụng

− Tìm hiểu ngôn ngữ Elixir và framework phoenix vào việc hiện thực hóa ứng dụng theo các tính năng cơ bản đã phân tích trước đó

− Kết hợp song song kiểm thử với hiện thức hóa sản phẩm

- hạn chế bug phát sinh từ giai đoạn đầu

− Nghiên cứu phương pháp crawl data, xử lí data và import data vào database

− Sử dụng data đã thu thập được vào nghiên cứu recommendation

− Nghiên cứu hệ thống recommendation system phương pháp Content-based Filtering

− Hiện thực hóa, tích hợp hệ thống recommendation system vào ứng dụng

− Nghiên cứu hệ thống recommendation system phương pháp

Conllaborative Filtering

− Hiện thực hóa, tích hợp hệ thống recommendation system vào ứng dụng

mềm được tìm ra

8 Hoàn thiện báo

cáo

01/01/2021 - 10/01/2021

− Hoàn thiện báo cáo, chuẩn

bị cho bảo vệ khóa luận

MỤC LỤC

CHƯƠNG 1: GIỚI THIỆU CHUNG 1

1.1 Lý do chọn đề tài 1

1.2 Tính mới/ khác biệt về chức năng của đề tài so với một số ứng dụng thương mại điện tử hiện nay 2

1.2.1 Điểm mới nổi bật của đề tài 2

1.2.2 Tính khác biệt, cải thiện về chức năng 2

1.3 Đối tượng nghiên cứu: 4

1.4 Phạm vi nghiên cứu 4

1.5 Phương pháp nghiên cứu 5

1.6 Bố cục của khóa luận 5

CHƯƠNG 2: KIẾN THỨC NỀN TẢNG 7

2.1 Tổng quan về Flutter 7

2.1.1 Tổng quan và lịch sử 7

2.1.2 Tổng quan về Flutter: 11

2.1.3 Ưu điểm và nhược điểm của Flutter 13

2.1.4 Khi nào nên sử dụng Flutter 15

2.1.5 So sánh cơ bản giữa Flutter và React Native 15

2.1.6 So sánh chi tiết giữa Flutter, React Native và Xamarin 16

c) Hệ thống khuyến nghị lai (Hybrid recommender system) 27

CHƯƠNG 3: XÂY DỰNG HỆ THỐNG 31

3.1 Xây dựng kiến trúc hệ thống 31

3.1.1 Xác định yêu cầu hệ thống 31

3.1.2 Phân tích yêu cầu hệ thống 31

a) Phần ứng dụng (khách hàng) 31

b) Phần Admin (quản trị viên) 34

3.1.3 Phân tích thiết kế hệ thống 35

a) Sơ đồ use case 35

b) Entity Relation Diagram 47

c) Sơ đồ lớp 48

3.1.4 Phân tích và thiết kế CSDL 49

a) Bảng PRODUCTS 52

b) Bảng USERS 54

c) Bảng USER_VIEW_PRODUCTS 55

d) Bảng BRANDS 56

e) Bảng CATEGORIES 56

f) Bảng FAVORITES 57

g) Bảng VOUCHERS 57

h) Bảng REVIEWS 58

k) Bảng REPLIES 59

l) Bảng ADDRESSES 59

m) Bảng ORDERS 60

n) Bảng ORDER_LINES 61o) Bảng CARTS 62q) Bảng CART_PRODUCTS 623.2 Thiết kế giao diện 633.2.1 Giao diện ứng dụng 63a) Giao diện Onboarding 63b) Giao diện chính của ứng dụng 65c) Giao diện Đăng nhập 66d) Giao diện Đăng ký 67e) Giao diện Danh mục 68f) Giao diện Tìm kiếm 69j) Giao diện Danh sách sản phẩm 70k) Giao diện Tài khoản 72l) Giao diện Thông tin sản phẩm 72m) Giao diện Giỏ hàng 76n) Giao diện Thanh toán 79o) Giao diện Xem lịch sử đơn hàng 81q) Giao diện Danh sách yêu thích 82p) Giao diện Quản lý danh sách địa chỉ 833.2.2 Giao diện quản lý Admin (webapp React) 84

g) Giao diện quản lý đánh giá, phản hồi 90CHƯƠNG 4: ÁP DỤNG GỢI Ý SẢN PHẨM 924.1 Thực nghiệm 924.1.1 Một số định nghĩa 92a) Utility matrix 92b) Root Mean Squared Error (RMSE) 944.1.2 Phương pháp 95a) Content-based Recommender System 96b) Neighborhood-based Collaborative Filtering 97c) Matrix Factorization Collaborative Filtering 1034.2 Đánh giá 1044.2.1 So sánh kết quả 1044.2.2 Content-based Recommender System 1044.2.3 Neighborhood-based Collaborative Filtering và Matrix Factorization Collaborative Filtering 1054.3 Áp dụng Neighborhood-based Collaborative Filtering 1054.4 Ứng dụng Content-based filtering 106CHƯƠNG 5: KẾT LUẬN, HƯỚNG PHÁT TRIỂN 1085.1 Kết quả đạt được 1085.2 Ưu điểm 1085.3 Nhược điểm 1095.4 Hướng phát triển 109

DANH MỤC HÌNH VẼ

Hình 3 1: Biểu đồ use case mức tổng quát 35Hình 3 2: Biểu đồ use case Đăng nhập 36Hình 3 3: Biểu đồ use case Quản lý sản phẩm 37Hình 3 4: Biểu đồ use case Quản lý đơn hàng 37Hình 3 5: Biểu đồ use case Quản lý mã khuyến mãi 38Hình 3 6: Biểu đồ use case Quản lý phản hồi, đánh giá 39Hình 3 7: Biểu đồ use case Tìm kiếm sản phẩm 39Hình 3 8: Biểu đổ use case Xem sản phẩm 40Hình 3 9: Biểu đồ use case Bình luận và đánh giá 41Hình 3 10: Biểu đồ use case Đặt mua hàng 41Hình 3 11: Biểu đồ use case Theo dõi đơn hàng 42Hình 3 12: Biểu đồ use case Quản lý sản phẩm yêu thích 43Hình 3 13: Biểu đồ use case Quản lý địa chỉ giao hàng 43Hình 3 14: Biểu đồ Entity Relation 48Hình 3 15: Biểu đồ lớp 48Hình 3 16: Giao diện Onboarding 65Hình 3 17: Giao diện chính của ứng dụng 66Hình 3 18: Giao diện Đăng nhập 67Hình 3 19: Giao diện Đăng ký 68Hình 3 20: Giao diện Danh mục 69Hình 3 21: Giao diện Tìm kiếm 70Hình 3 22: Giao diện Danh sách sản phẩm 71

Hình 3 29: Giao diện Đặt hàng thành công 81Hình 3 30: Giao diện Lịch sử order 82Hình 3 31: Giao diện Danh sách yêu thích 83Hình 3 32: Giao diện Quản lý danh sách địa chỉ 84Hình 3 33: Giao diện Đăng nhập quản lý admin 85Hình 3 34: Giao diện Quản lý admin 86Hình 3 35: Giao diện Danh sách đơn hàng 86Hình 3 36: Giao diện Chi tiết đơn hàng 87Hình 3 37: Giao diện Danh sách sản phẩm 87Hình 3 38: Giao diện Chi tiết sản phẩm 88Hình 3 39: Giao diện Tạo mới sản phẩm 88Hình 3 40: Giao diện Xem danh sách khuyến mãi 89Hình 3 41: Giao diện Thêm mã khuyến mãi 89Hình 3 42: Giao diện Danh sách đánh giá 90Hình 3 43: Giao diện Chi tiết đánh giá 90Hình 3 44: Giao diện Phản hồi 91

Hình 4 1: Utility matrix 92Hình 4 2: Công thức tính RMSE 95Hình 4 3: Kết quả load dữ liệu Content-based 96Hình 4 4: Ví dụ feature vector của các item 96Hình 4 5: Kết quả dự đoán content-based 97Hình 4 6: RMSE của content-based 97Hình 4 7: Các bước neighborhood-based CF 99Hình 4 8: Ý tưởng của Matrix Factorization CF 103Hình 4 9: Hiển thị kết quả gợi ý trong ứng dụng 106Hình 4 10: Hiển thị kết quả gợi ý trong ứng dụng 107

DANH MỤC BẢNG

Bảng 3 1: Danh sách actors 44Bảng 3 2: Danh sách use cases 46Bảng 3 3: Các lớp của sơ đổ lớp 49Bảng 3 4: Các đối tượng và thuộc tính của đối tượng 52Bảng 3 5: Bảng PRODUCTS 54Bảng 3 6: Bảng USERS 55Bảng 3 7: Bảng USER_VIEW_PRODUCTS 56Bảng 3 8: Bảng BRANDS 56Bảng 3 9: Bảng CATEGORIES 57Bảng 3 10: Bảng FAVORITES 57Bảng 3 11: Bảng VOUCHERS 58Bảng 3 12: Bảng REVIEWS 59Bảng 3 13: Bảng REPLIES 59Bảng 3 14: Bảng ADDRESSES 60Bảng 3 15: Bảng ORDERS 61Bảng 3 16: Bảng ORDER_LINES 62Bảng 3 17: Bảng CARTS 62Bảng 3 18: Bảng CART_PRODUCT 63

CHƯƠNG 1: GIỚI THIỆU CHUNG 1.1 Lý do chọn đề tài

Ngày nay, công nghệ thông tin ngày một phát triển, kéo theo đó là sự bùng

nổ của các thiết bị điện tử, đặc biệt là điện thoại thông minh và máy tính Nếu như trước đây việc sở hữu một chiếc điện thoại thông minh hay máy tính khá khó khăn thì ngày nay do sự cạnh tranh gay gắt giữa các thương hiệu khiến giá thành những thiết bị này rẻ hơn và việc sở hữu chúng trở nên dễ dàng hơn Vì thế nhu cầu phát triển ứng dụng cho các thiết bị này càng ngày càng tăng cao

Để tiếp cận đến nhiều người dùng, các nhà phát triển ứng dụng mong muốn ứng dụng của họ chạy được trên nhiều nền tảng đặc biệt là Android, iOS, Windows, MacOS và web Thay vì phải tìm hiểu nhiều ngôn ngữ, công nghệ khác nhau ứng với từng nền tảng thì hiện nay trên thị trường có nhiều công cụ hỗ trợ lập trình đa nền tảng như Flutter, React Native, Ionic, … giúp các nhà phát triển ứng dụng tiết kiệm thời gian, chi phí dành cho quá trình phát triển ứng dụng

Trong số đó có Flutter mặc dù là công cụ ra đời muộn nhất nhưng có tốc độ phát triển vượt trội và nhiều ưu điểm so với các công nghệ đi trước, nhiều công ty công nghệ lớn sử dụng Flutter để phát triển sản phẩm của mình như Google,

Alibaba, Tencent,… Ứng dụng xây dựng với Flutter hoạt động với hiệu năng mạnh

mẽ và hiếm có vấn đề về mặt tương thích, ngoài ra đây còn là công cụ mã nguồn

mở nên ngày càng nhiều lập trình viên và công ty quan tâm đến công nghệ mới này

Đây là lý do nhóm chọn đề tài khóa luận tốt nghiệp là “Tìm hiểu Flutter và xây dựng ứng dụng minh họa” Ngoài ra, trong thời điểm dịch toàn cầu COVID-19

và quá trình tìm hiểu các website trong thực tế, nhóm đã quyết định tích hợp thêm

hệ thống hỗ trợ gợi ý sản phẩm vào ứng dụng hiện tại nhằm hỗ trợ khách hàng đến mức tối đa, tăng trải nghiệm khách hàng đối với ứng dụng - Khách hàng chỉ cần các thao tác đơn giản trên điện thoại di động là có thể đặt hàng được ngay

1.2 Tính mới/ khác biệt về chức năng của đề tài so với một số ứng dụng thương mại điện tử hiện nay

1.2.1 Điểm mới nổi bật của đề tài

Các trang thương mại điện tử, trang mua bán laptop hiện nay đa số đều có ý tưởng và phương thức hoạt động tương đồng ở hầu hết các khâu như: loại hàng hóa, vận chuyển, thanh toán, độ tin cậy,… và không có gì khác biệt để tạo ra giá trị vượt trội cho khách hàng ngoại trừ ưu thế về giá (rẻ)

→ Sau quá trình khảo sát, lắng nghe ý kiến người dùng, giải pháp mà nhóm

đề ra để tăng lượt truy cập và thời gian sử dụng của người dùng đối với ứng dụng của mình là nhóm đã đưa thêm các bài viết tin tức, những câu chuyện liên quan đến laptop, công nghệ mới và những video liên quan về các sản phẩm laptop tại trang thông tin sản phẩm, điều đó sẽ giúp người dùng vừa giải trí bổ ích có thêm kiến thức, vừa trở thành người tiêu dùng thông minh hơn và từ đó gắn bó với ứng dụng của mình hơn

→ Đồng thời hệ thống gợi ý sản phẩm sẽ lấy dữ liệu những vấn đề mà người dùng quan tâm từ đó đưa ra các sản phẩm, bài viết gợi ý trong trang chủ khi người dùng vừa mở ứng dụng

Ngoài ra, app còn ứng dụng công nghệ Flutter vào việc xây dựng giao diện ứng dụng, từ đó giao diện trở nên trực quan, thu hút người dùng hơn

1.2.2 Tính khác biệt, cải thiện về chức năng

Chọn lọc các chức năng tiện dụng nhất của top các app thương mại điện tử lớn hiện nay để đưa vào ứng dụng ứng dụng của mình:

Tiki: Giỏ hàng chỉ có thể chọn mua tất cả hoặc xóa bớt (mua lại lần sau) Điều này

đã làm dẫn đến sự hạn chế thoải mái lựa chọn và mua sắm của người dùng

→ Ứng dụng thực hiện có thêm chức năng chọn và bỏ chọn trong phần giỏ hàng, những hàng chưa được chọn sẽ lưu lại trong giỏ hàng để mua sau và tiến hành thanh toán những món chọn cho người dùng (một số ứng dụng cũng đã làm điều này là Lazada, Shopee)

Shopee, Tiki, Sendo: lượng sản phẩm bán trên ứng dụng quá nhiều gây ra hiện tượng giao diện trở nên rối mắt với quá nhiều tính năng, sản phẩm;

Notification và banner quảng cáo các mặt hàng khác được push liên tục gây phiền nhiễu cho khách hàng nếu khách chỉ mong muốn mua laptop Ngoài ra, thực tế trên thị trường chưa xây dựng ứng dụng di động mua bán chuyên biệt cho laptop trong khi đây là một thị trường màu mỡ và cần được khai thác

Điều này làm người dùng phải thao tác tìm kiếm trên màn hình dẫn đến làm giảm tính tiện dụng của app đối với người mua hàng Ngoài ra, nếu được

recommend quá nhiều sản phẩm không mong muốn so với nhu cầu đang cần mua laptop sẽ gây trải nghiệm không tốt cho người dùng

→ Ứng dụng Eshop cho phép người dùng được thực hiện trải nghiệm mua sắm đúng với nhu cầu mua laptop và phụ kiện, không gây rối mắt với quá nhiều thể loại sản phẩm và nhiều tính năng không cần thiết Thực hiện push notification order status, voucher, người dùng dễ theo dõi, sau này có thể

mở rộng sang bán đồ điện tử, linh kiện máy tính, phụ kiện

Sau bước chọn các sản phẩm trong giỏ hàng là phần điền địa chỉ nhận hàng:

→ Ứng dụng Eshop sẽ mặc định chọn địa chỉ được xét ưu tiên, hoặc người dùng có thể chọn địa chỉ trong danh sách đã được lưu hay tạo mới tại trang chọn (Ứng dụng đã làm được điều này là Shoppe.)

Về việc gợi ý sản phẩm cho người dùng:

Các ứng dụng thương mại điện tử hiện nay đa số gợi ý sản phẩm cho người dùng dựa rên sản phẩm bán chạy nhất, sản phẩm mới nhất chung cho tất cả các người dùng Việc này có thể hiệu quả tốt trong thời gian đầu nhưng về lâu thì chưa tốt (các sản phẩm bán chạy nhất được gợi ý nên được mua nhiều hơn và tiếp tục dẫn đầu danh sách)

→ Nhóm sẽ áp dụng gợi ý sản phẩm cho từng người dùng khác nhau dựa trên nhóm người dùng có cùng sở thích, đánh giá đối với sản phẩm Điều này giúp tỉ lệ mua hàng của người dùng cao hơn, cải thiện doanh thu của người bán và người mua có thể mua được sản phẩm ưng ý

1.3 Đối tượng nghiên cứu:

Khoá luận này hướng đến nghiên cứu các đối tượng sau:

− Các công cụ và thư viện của Flutter

− Hệ thống recommendation system cho sản phẩm

− Các công nghệ phù hợp hỗ trợ xây dựng ứng dụng minh họa: phương pháp crawl data thu thập dữ liệu người dùng thực tế với sự hỗ trợ của Node JS, ngôn ngữ lập trình Elixir và framework Phoenix,

− Những cá nhân có nhu cầu mua sắm online Laptop và các thiết bị phụ kiện đi kèm trên nền tảng ứng dụng di dộng

1.4 Phạm vi nghiên cứu

− Xây dựng mobile app trên nền tảng Android và iOS với sự hỗ trợ của Flutter

− Xây dựng app hướng đến các đổi tượng thường mua sắm online, có nhu cầu mua Laptop và phụ kiện đi kèm

− Tìm hiểu về hệ thống gợi ý sản phẩm đối với 2 phương pháp: Content-based method, Collaborative filtering method dựa trên các khía cạnh: ý tưởng, phương thức thực hiện và ưu, nhược điểm

− Triển khai, đánh giá độ chính xác của từng phương pháp dựa trên dữ liệu thực nghiệm

− Áp dụng hệ thống gợi ý vào ứng dụng để gợi ý sản phẩm đến người dùng các sản phẩm phù hợp nhất

1.5 Phương pháp nghiên cứu

− Làm việc nhóm hai thành viên, lên kế hoạch và thực hiện bằng cách trao đổi trực tiếp hoặc gián tiếp qua các kênh chat online, quản lí task công việc thông qua trello Tham khảo các ứng dụng tương tự: shopee, tiki, lazada,

− Tham khảo ý kiến của giảng viên hướng dẫn để được định hướng đúng, đạt kết quả tốt nhất

− Thu thập phản hồi của người dùng để hoàn thiện, cải tiến ứng dụng

1.6 Bố cục của khóa luận

Khóa luận gồm có 5 chương:

- Chương 1 giới thiệu về đề tài, đưa ra các điểm nổi bật so với các ứng dụng trước Tiếp đến là đề xuất các giải pháp để giải quyết các vấn đề đã đặt ra Ngoài ra, chương 1 cũng đề cập đến đối tượng nghiên cứu, phạm

vi đề tài Cuối chương 1 là phần bố cục của khóa luận

- Chương 2 trình bày các kiến thức nền tảng, các công nghệ và thuật toán

- Chương 4 tập trung trình bày thuật toán gợi ý sản phẩm Các kiến thức cần nắm, các loại gợi ý, các số đo, thực nghiệm và kết quả thực nghiệm, sau đó áp dụng vào ứng dụng TMĐT

- Chương 5 kết luận, rút ra được các ưu nhược điểm của ứng dụng và hướng phát triển trong tương lai

CHƯƠNG 2: KIẾN THỨC NỀN TẢNG 2.1 Tổng quan về Flutter

2.1.1 Tổng quan và lịch sử

Flutter là một bộ công cụ phát triển phần mềm mã nguồn mở giúp các lập trình viên xây dựng ứng dụng trên nền tảng di động, web và máy tính với một codebase duy nhất Flutter được giới thiệu vào năm 2015 sau đó được thử nghiệm và phát triển cho đến khi ra mắt phiên bản chính thức vào ngày 4 tháng 12 năm 2018 Từ đó Flutter

đã phát triển mạnh mẽ và trở thành đối thủ đáng gồm với các công cụ lập trình đa nền tảng trước đó, hiện tại thì Flutter đang là một trong những giải pháp phát triển ứng dụng đa nền tảng được sử dụng nhiều nhất với cộng đồng không ngừng phát triển Tháng 4 năm 2020 theo thống kê của Google có hơn hai triệu lập trình viên đã sử dụng Flutter và hơn 50.000 ứng dụng sử dụng Flutter được đưa lên PlayStore Chỉ sau một tháng con số đó đã lên tới 60.000

Những app đã được build bằng Flutter và được sử dụng rộng rãi:

1 Google Ads

2 Alibaba

3 Reflectly

4 Watermaniac

5 Hamilton Musical

6 Cryptomaniac

7 School Planner

2.1.2 Tổng quan về Flutter:

• Về ngôn ngữ Dart:

Dart là ngôn ngữ lập trình hướng đối tượng được phát triển bởi Google với mục đích có thể thay thế Javascript Dart có thể hỗ trợ lập trình bất đồng bộ với Future, async, await and Steam tương tự như Rx(ReactiveX)

Google tuyên bố rằng Dart có thể render 120 khung hình mỗi giây, vì nó sẽ compile thành thư viện ARM C/C++ tương thích với các phần thử native ở app di động Đó là lý do vì sao Flutter sẽ chạy rất nhanh trên các thiết bị Ngoài ra Dart còn có cơ chế thu gom bộ nhớ rác và máy ảo, tương tụ như Java

Học ngôn ngữ Dart không chỉ sử dụng để tạo app di động qua Flutter mà còn

có thể tạo webapp bằng AngularDart, cũng có thể viết ngôn ngữ Dart ở backend Trong tương lai, ta có thể viết tất cả các nền tảng chỉ bằng một ngôn ngữ là Dart

• Về Compiler: AOT và JIT

Flutter sử dụng cả hai AOT(Ahead Of Time) compiler và JIT(Just In Time)

compiler

Ở chế độ lập trình: Flutter sẽ sử dụng JIT compiler, nó sẽ compile code trong lúc chạy, giúp việc lập trình, sửa lỗi hiệu quả hơn Đổi lại, kích thước file APK và IPA sẽ lớn, và performance chưa được tối ưu

Ở chế độ phát hành: Flutter sẽ sử dụng AOT compiler, nó sẽ compile code trước khi chạy, và ứng dụng sẽ đạt đến mức tối ưu nhất có thể

• Tổng quan về cấu trúc

Các phần tử chính trong Flutter bao gồm:

Thư viện nền được viết bằng Dart, cung cấp các class và function cơ bản để tạo dựng nên các ứng dụng sử dụng Flutter, chẳng hạn như các APIs để tương tác với engine

Thiết kế UI trong Flutter bao gồm sử dụng sẵn có hay tạo mới các widget (phần tử UI) Tất cả đồ họa, bao gồm text, hình ảnh,… hay animation đều được tạo

• Kênh tương tác giữa các nền tảng di động (Platform channel)

Flutter cung cấp Platform channel giúp chúng ta tương tác với các phần đặc thù của hệ thống nền tảng như Camera, Service,…