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

Để tiếp cận đến nhiều người dùng, các nhà phát triển ứng dụng mongmuố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.. Trong số đó có Flutt

ĐẠI HỌC QUỐC GIA TP HỒ CHÍ MINH TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN

Application with Flutter

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

Application with Flutter

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

1 ……… – Chủ tịch

2 ……… – Thư ký

3 ……… – Ủy viên

4 ……… – Ủy viên

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

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

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ộ hướng dẫn: HUỲNH HẠ VY 16521470

THS TRẦN ANH DŨNG ĐỖ NGỌC BÍCH TRÂM 16521273 TS NGUYỄN

ĐÌNH HIỂN Đánh giá Khóa luận:

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

Số trang Số chương Số bảng số liệu Số hình vẽ Số tài liệutham khảo Sản phẩm

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

•

•

2 Về nội dung nghiên cứu:

Người nhận xét (Ký và ghi rõ họ tên)

TRẦN ANH DŨNG NGUYỄN ĐÌNH HIỂN

ĐẠ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: HUỲNH HẠ VY

16521470

ĐỖ NGỌC BÍCH TRÂM Đánh giá Khóa luận:

16521273

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

Số trang Số chương Số bảng số liệu Số hình vẽ Số tàiliệu tham khảo Sản phẩm

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

2 Về nội dung nghiên cứu:

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à kinhnghiệ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

ĐẠ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

ĐỀ CƯƠNG CHI TIẾT Tên đề tài: Tìm hiểu Flutter và thuật toán Recommendation, xây dựng ứng

dụng minh họa

Cán bộ hướng dẫn:

TS Nguyễn Đình Hiển

Ths Trần Anh Dũng

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áytính Nếu như trước đây việc sở hữu một chiếc điện thoại thông minh haymáy tính khá khó khăn thì ngày nay do sự cạnh tranh gay gắt giữa các thươnghiệ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àngngà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 mongmuố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ôngnghệ khác nhau ứng với từng nền tảng thì hiện nay trên thị trường có nhiềucông cụ hỗ trợ lập trình đa nền tảng như Flutter, React Native, Ionic, … giúpcác nhà phát triển ứng dụng tiết kiệm thời gian, chi phí dành cho quá trìnhphá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ầuCOVID 19 đang diễn ra, thông qua các kiến thức đã tìm hiểu, tích lũy đượcnhó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ậynê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 websitetrong thực tế, nhóm đã quyết định tích hợp thêm hệ thống hỗ trợ gợi ý sảnphẩ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ảinghiệm khách hàng đối với ứng dụng - Khách hàng chỉ cần các thao tác đơngiả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 hiện nay

− Đ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ữngvideo 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ừatrở thành người tiêu dùng thông minh hơn và từ đó gắn bó với ứngdụ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 ý trongtrang 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ầnsau) Điều này đã làm dẫn đến sự hạn chế thoải mái lựa chọn và muasắ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ảnphẩm; Notification và banner quảng cáo các mặt hàng khác được pushliên tục gây phiền nhiễu cho khách hàng nếu khách chỉ mong muốnmua 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 đếnlà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 đượcrecommend quá nhiều sản phẩm không mong muốn so với nhu cầu đang cầnmua 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àmmấ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ớingười mua 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à Shopee.)

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 chongườ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 chotấ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 muanhiề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 ý

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ũngnhư 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ểnkhai ứ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ủanhó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ữngkiến thức quý báu đã được các thầy cô của trường Đại học Công nghệ Thôngtin – Đại học Quốc gia thành phố Hồ Chí Minh đã nhiệt tình truyền thụ lạicho chúng em Và đặc biệt là sự theo dõi và quan tâm giúp đỡ của thầy TrầnAnh 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ảnphẩ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

2 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ó nhucầ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

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ươngpháp crawl data thu thập dữ liệu người dùng thực tế với sự hỗ trợ củaNode 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áchtrao đổi trực tiếp hoặc gián tiếp qua các kênh chat online, quản lí taskcô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áchhà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ênquan đến mặt hàng và các vấn đề khác Nhận và trả lời ý kiến về phíakhách hàng

Kế hoạch thực hiện: nhóm chia kế hoạch thực hiện theo 8 giai đoạn cụ

thể Giai đoạn Thời gian Công việc

1 Khảo sát,

nghiên cứu

14/8/2020 - 20/8/2020

− Lựa chọn đề tài

− 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ônngữ 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 ứngdụ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ươngpháp crawl data, xử lí data

và import data vào database

− Sử dụng data đã thuthập được vào nghiên cứurecommendation

− 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

7 Kiểm thử và

sửa lỗi ứng dụng

01/12/202

0 - 20/12/2020

− Thực hiện kiểm thử các chức năng, luồng hoạt động của ứng dụng

8 Hoàn thiện báo

01/01/2021 cáo

10/01/2021

− Tiến hành sửa các lỗi phần mềm được tìm ra

-

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

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

Bố cục của khóa luận 5CHƯƠNG 2: KIẾN THỨC NỀN TẢNG 72.1 Tổng quan về Flutter 72.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 Khinà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 chitiết giữa Flutter, React Native và Xamarin 16 2.2 Tổng quan về hệ

thông gợi ý 21 2.2.1 Kháiniệm 21 2.2.2 Cácphương pháp trong hệ thống khuyến nghị 23 a) Hệ thống

khuyến nghị theo nội dung (Content-based approach) 23b) Hệ thống khuyến nghị lọc cộng tác (Collaborative filtering) 25 c) Hệthống khuyến nghị lai (Hybrid recommender system) 27 CHƯƠNG3: XÂY DỰNG HỆ THỐNG 31 3.1 Xâydự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ântích yêu cầu hệ thống 31 a) Phần ứngdụ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ơ đồ usecase 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ảngPRODUCTS 52 b) BảngUSERS 54 c) BảngUSER_VIEW_PRODUCTS 55 d) BảngBRANDS 56 e) BảngCATEGORIES 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

61 o) Bảng CARTS

62 q) Bảng CART_PRODUCTS 62

3.2 Thiết kế giao diện

63 3.2.1 Giao diện ứng dụng

63 a) Giao diện Onboarding 63 b) Giao diện chính của ứng dụng 65 c) Giao diện Đăng nhập 66 d) Giao diện Đăng ký 67 e) Giao diện Danh mục 68 f) Giao diện Tìm kiếm 69 j) Giao diện Danh sách sản phẩm 70 k) Giao diện Tài khoản 72 l) Giao diện Thông tin sản phẩm 72 m) Giao diện Giỏ hàng 76 n) Giao diện Thanh toán 79 o) Giao diện Xem lịch sử đơn hàng 81 q) Giao diện Danh sách yêu thích 82 p) Giao diện Quản lý danh sách địa chỉ 83 3.2.2

Giao diện quản lý Admin (webapp React) 84 a) Giao diện đăng nhập 85 b) Giao diện quản lý chính 85 c) Giao diện quản lý đơn hàng 86 d)

Giao diện quản lý sản phẩm 87

f) Giao diện quản lý khuyến mãi 89 g) Giao diện quản lý đánh giá, phản hồi 90

CHƯƠNG 4: ÁP DỤNG GỢI Ý SẢN PHẨM 92

4.1 Thực nghiệm 92

4.1.1 Một số định nghĩa 92 a) Utility matrix 92 b) Root Mean Squared Error (RMSE) 94 4.1.2 Phương pháp 95 a) Content-based Recommender System 96 b) Neighborhood-based Collaborative Filtering 97 c) Matrix Factorization Collaborative Filtering 103 4.2 Đánh giá 104 4.2.1 So sánh kết quả 104 4.2.2 Content-based Recommender System 104

4.2.3 Neighborhood-based Collaborative Filtering và Matrix Factorization Collaborative Filtering

105 4.3 Áp dụng Neighborhood-based Collaborative Filtering 105

4.4 Ứng dụng Content-based filtering 106

CHƯƠNG 5: KẾT LUẬN, HƯỚNG PHÁT TRIỂN 108

5.1 Kết quả đạt được 108

5.2 Ưu điểm 108

5.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

nhập 36 Hình 3 3: Biểu đồ use caseQuản lý sản phẩm 37 Hình 3 4: Biểu đồ usecase Quản lý đơn hàng 37 Hình 3 5: Biểu đồ usecase Quản lý mã khuyến mãi 38 Hình 3 6: Biểu đồuse case Quản lý phản hồi, đánh giá 39 Hình 3 7: Biểu

đồ use case Tìm kiếm sản phẩm 39 Hình 3 8:Biểu đổ use case Xem sản phẩm 40 Hình 3.9: Biểu đồ use case Bình luận và đánh giá 41 Hì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

42 Hình 3 12: Biểu đồ use case Quản lý sản phẩm yêuthích 43 Hình 3 13: Biểu đồ use case Quản lý địa chỉ giaohàng 43 Hình 3 14: Biểu đồ EntityRelation 48 Hình 3 15: Biểu đồlớp 48 Hình 3 16: Giaodiện Onboarding 65 Hình 3 17:Giao diện chính của ứng dụng 66 Hình 3.18: Giao diện Đăng nhập 67 Hình

3 19: Giao diện Đăng ký 68Hình 3 20: Giao diện Danh mục

69 Hình 3 21: Giao diện Tìm kiếm

70 Hình 3 22: Giao diện Danh sách sảnphẩm 71 Hình 3 23: Giao diện Tàikhoản 72 Hình 3 24: Giao diệnThông tin sản phẩm 76 Hình 3 25: Giao

diện Giỏ hàng 77 Hình 3 26:Giao diện Giỏ hàng đang có sản phẩm 78 Hình 3.27: Giao diện Chọn voucher 79

Hình 3 28: Giao diện Thanh toán

80 Hình 3 29: Giao diện Đặt hàng thànhcông 81 Hình 3 30: Giao diện Lịch sửorder 82 Hình 3 31: Giao diện Danhsách yêu thích 83 Hình 3 32: Giao diệnQuản lý danh sách địa chỉ 84 Hình 3 33: Giaodiện Đăng nhập quản lý admin 85 Hình 3 34:Giao diện Quản lý admin 86 Hình 3.35: Giao diện Danh sách đơn hàng 86 Hình

3 36: Giao diện Chi tiết đơn hàng 87 Hì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

88 Hình 3 39: Giao diện Tạo mới sản phẩm

88 Hình 3 40: Giao diện Xem danh sách khuyếnmãi 89 Hình 3 41: Giao diện Thêm mã khuyếnmãi 89 Hình 3 42: Giao diện Danh sách đánhgiá 90 Hình 3 43: Giao diện Chi tiết đánhgiá 90 Hình 3 44: Giao diện Phảnhồi 91

Hình 4 1: Utility matrix

RMSE 95 Hình 4 3: Kết quả load

dữ liệu Content-based 96 Hình 4 4: Ví dụfeature vector của các item 96 Hình 4 5: Kếtquả dự đoán content-based 97 Hình 4 6:RMSE của content-based 97 Hình 4.7: Các bước neighborhood-based CF 99 Hình 4.8: Ý tưởng của Matrix Factorization CF 103 Hình 4

9: Hiển thị kết quả gợi ý trong ứng dụng 106 Hình 4.10: Hiển thị kết quả gợi ý trong ứng dụng 107

3 13: Bảng REPLIES 59Bảng 3 14: Bảng ADDRESSES

ORDERS 61 Bảng 3 16:Bảng ORDER_LINES 62 Bảng 3.17: Bảng CARTS 62 Bảng

TMĐT Thương mại điện tử Hình thức mua sắm online

CSDL Cơ sở dữ liệu Cơ sở dữ liệu cho ứng dụng

APP Application Ứng dụng

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áttriể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ôngnghệ 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ênngà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âydự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ạinhiề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 đangrấ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

1

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âuchuyệ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ườidù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ùngthô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:

2 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àmgiả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 muasắ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ệnpush 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: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ủaapp đối với người mua hàng

3

→ Ứng dụng Eshop sẽ mặc định chọn địa chỉ được xét ưu tiên, hoặc ngườidùng có thể chọn địa chỉ trong danh sách đã được lưu hay tạo mới tạitrang 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ênnhóm người dùng có cùng sở thích, đánh giá đối với sản phẩm Điều nàygiúp tỉ lệ mua hàng của người dùng cao hơn, cải thiện doanh thu củangườ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ápcrawl 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

4

− Tìm hiểu về hệ thống gợi ý sản phẩm đối với 2 phương pháp: Content-basedmethod, 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 đổitrự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ôngqua 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 ứngdụ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 gợi ý sản phẩm được sử dụng để xây dựng ứng dụng

- Chương 3 trình bày chi tiết quy trình xây dựng hệ thống, từ xác định vàphân tích yêu cầu bài toán cho đến xây dựng CSDL, cuối cùng là xâydựng giao diện cho úng dụng

5

- 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ứccầ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

6

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ậptrì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ộtcodebase 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áccô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ữnggiả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 đồngkhô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

7

2 Alibaba

3 Reflectly

4 Watermaniac

8

5 Hamilton Musical

9

6 Cryptomaniac

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 Trongtươ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

11

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

tử native hoặc biến app Flutter thành một phần của native app

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

− Ưu điểm:

13

• Thời gian lập trình nhanh: giúp tiết kiện thời gian, công sức và tiền bạc.Cũng giống như những ngôn ngữ cross-platform (đa nền ) khác, Fluttercho ta sử dụng 1 nguồn code để tạo ra các app chạy được trên iOS vàAndroid

• “Hot reload” trong Flutter sẽ giúp ta thấy ngay kết quả khi sửa đổi trongcode: ngay trong app review mà không cần phải ngồi chờ build lại app

Như thế, ta có thể fix bug và thử các UI hay tính năng mới một cáchnhanh chóng

• Linh hoạt: Nhờ vào kiến trúc của Flutter, ta có thể chỉnh sửa tùy biến UI không giới hạn

• Flutter có thể hoạt động trên nền tảng web và có document chi tiết luôn được cập nhật liên tục: Dù hiện nay, phiên bản Flutter cho web vẫn còn ở giai đoan beta, nhưng trong tương lai, Flutter có thể sẽ xếp cùng với những framework JS khác như React hay Angular,…

− Khuyết điểm:

• Flutter vẫn còn là framework rất mới: vì là framework vừa được ra mắttrong khoảng hai năm trở lại nên Flutter vẫn chưa hoàn toàn ổn định Vẫncòn khá nhiều lỗi và ít tính năng hơn, vẫn còn nhiều thư viện vẫn tronggiai đoạn thử nghiệm

• Ngôn ngữ Dart cũng là một ngôn ngữ mới: Khi so sánh với Kotlin hay Swift, nó có ít tính năng hơn và ít ổn định hơn

• Giao diện và tương tác không đạt được 100% như native: Vì Flutter khôngtạo ra các phần tử native, thay vào đó tái tạo lại các phần tử đó bằng thưviện của mình, nhưng không thể giống hoàn toàn được Điều đó sẽ dễnhận ra khi như trường hợp hệ thống nâng cấp thay đổi giao diện textfieldthì ở

app Flutter vẫn như ban đầu

• Không có một hướng dẫn cụ thể nào cho việc lập trình ứng dụng Flutter:

Nó sẽ là vấn đề khá nhức nhối khi ta muốn xây dụng những ứng dụngphức tạp hơn

14

• Framework Flutter cũng như ngôn ngữ Dart, đang thay đổi rất nhanh: Dẫn đến việc bảo trì code là khá khó

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

Hiện tại Flutter vẫn còn rất mới vì thế không nên sử dụng cho những ứng dụng phức tạp Tuy vậy, nó lại là một giải pháp tốt đối với những dự án nhỏ, vì nó

sử dụng kiến trúc khá giống với những công nghệ mới khác hiện nay

Khi ta muốn xây dựng một app mobile nhưng không biết liệu app có mang lại thành công hay không, hãy build nó bằng Flutter để cắt giảm chi phí Khi app đó trở nên thành công, lúc đó ta có thể chuyển nó sang native app Vì lập trình hai app native ngay từ đầu sẽ vô cùng rủi ro, mất nhiều vốn và thời gian, nên đó là lý do nhóm khởi nghiệp thường sẽ chọn những công nghệ cross-platform như Flutter, giúp thực hiện ý tưởng mà không cần quá nhiều đầu tư và rủi ro

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

Flutter được xem là đối thủ cạnh tranh lớn nhất của React Native Hiện nay, React Native lâu năm và ổn định hơn, chưa kể đến RN nhận được những ưu điểm

từ ngôn ngữ lập trình phổ biến nhất Javascript, và đã có một cộng đồng người dùng lớn hỗ trợ

Dù vậy, Flutter vẫn đang phát triển nhanh chóng Một số báo cáo cho rằngFlutter chạy nhanh hơn React Native, vì không cần phải qua Javascript Bridge vàtrình biên dịch Dagger giúp cho việc code và compile nhanh tức thì Có lẽ, chỉ làvấn đề thời gian trước khi Flutter được sử dụng rộng rãi

Sau tất cả, mục đích của ngôn ngữ cross-platform như Flutter và React Native làgiúp giảm thời gian đưa ra thị trường sử dụng, và việc phát triển app di động sẽhiệu quả hơn, hấp dẫn đối với cả người lập trình và người sử dụng

Sau là bảng so sánh nhỏ giữa Flutter và React Native:

15 Flutter React NativeĐịnh nghĩa Là công cụ phát triển UI

của Google dành cho phát triển các ứng dụng dành cho di động, máy tính, và trang web chỉ với một

Là một Framework giúp xây dựng ứng dụng native iOS và Android bằng Javascript