Giao diện đặt lại mật khẩu mới

Một phần của tài liệu Xây dựng ứng dụng sổ tay gia đình hỗ trợ tương tác (Trang 89)

STT Tên thành phần Mô tả

1 Ô nhập email mà người dùng muốn đặt lại mật khẩu

Người dùng nhập email để nhận mã xác thực trước khi đặt lại mật khẩu mới trong tình huống quên mật khẩu

2 Nút nhận mã xác thực

Hệ thống gửi lại mã xác thực vào email đã dùng để đăng ký

3 Ô nhập mật khẩu Người dùng nhập mật khẩu 4 Ô nhập xác nhận

mật khẩu

Người dùng nhập lại mật khẩu lần nữa

5 Nút đặt lại mật khẩu mới

Hệ thống cập nhật lại mật khẩu mới cho người dùng

64

Quản lý tài khoản cá nhân(Xem, cập nhật thơng tin cá nhân)

Hình 3.20: Giao diện quản lý thơng tin tài khoản các nhân STT Tên thành phần Mô tả

1 Nút cập nhật ảnh đại

Điều hướng người dùng đến màn hình chọn ảnh từ album hoặc chụp người camera để đổi ảnh đại diện mới

2 Nút thông tin cá nhân

Điều hướng người dùng đến màn hình cập nhật thơng tin cá nhân

3 Ơ nhập cập nhật số điện thoại

Hiển thị và cho phép chỉnh sửa trực tiếp số điện thoại

4 Ô nhập cập nhật tên

Hiển thị và cho phép chỉnh sửa trực tiếp tên

5 Ô nhập cập nhật ngày sinh

Hiển thị và cho phép chỉnh sửa trực tiếp ngày sinh

6 Nút lưu Lưu lại những thông tin cá nhân đã chỉnh sửa Bảng 3.42: Bảng mô tả giao diện quản lý thông tin tài khoản các nhân

65

Quản lý danh sách gia đình và thành viên

Hình 3.21: Giao diện quản lý danh sách gia đình và thành viên STT Tên thành phần Mô tả STT Tên thành phần Mơ tả

1 Nút tạo gia đình mới

Điều hướng người dùng đến màn hình nhập thơng tin gia đình mới

2 Nút tìm kiếm Tìm kiếm nhanh gia đình theo tên 3 Nút chỉnh sửa Chỉnh sửa thơng tin gia đình

4 Nút lấy mã QR Hiển thị mã QR phục vụ cho việc thêm thành viên 4 Nút rời Người dùng rời gia đình

66

Quản lý danh sách album gia đình

Hình 3.22: Giao diện quản lý album gia đình STT Tên thành phần Mô tả STT Tên thành phần Mô tả

1 Nút tạo album mới Điều hướng người dùng đến màn hình nhập thơng tin album mới

2 Nút thêm ảnh vào album

Điều hướng người dùng đến màn hình chọn ảnh từ thiết bị vào album

3 Nút chọn ảnh Chọn các ảnh cần xoá 4 Nút xoá ảnh Xố các ảnh đã chọn

67

Cập nhật danh sách cơng việc nhà

Hình 3.23: Giao diện cập nhật danh sách công việc nhà STT Tên thành phần Mô tả STT Tên thành phần Mô tả

1 Nút tạo công việc mới

Điều hướng người dùng đến màn hình nhập thơng tin công việc mới

2 Nút sắp xếp công việc tạo gần đây

Sắp xếp công việc tạo gần đây nhất lên đầu danh sách

3 Nút sắp xếp công việc sắp trễ hạn

Sắp xếp công việc sắp trễ nhất lên đầu danh sách

4 Nút lọc danh sách công việc

Lọc cơng việc theo tiêu chí người được phân cơng hoặc trạng thái cơng việc

68

Tạo cơng việc mới

Hình 3.24: Giao diện tạo công việc mới STT Tên thành phần Mô tả STT Tên thành phần Mô tả

1 Ơ tên cơng việc Nhập tên công việc (bắt buộc) 2 Ơ thời hạn cơng

việc

Nhập ngày kết thúc công việc (bắt buộc)

3 Nút chọn lặp lại Cho phép lặp lại công việc hằng ngày, tuần hoặc tháng

4 Nút chọn người được phân công

Chọn người được phân công

5 Nút chọn ảnh Chọn ảnh đính kèm theo cơng việc nếu có 6 Ơ nhập mơ tả Nhập mô tả thông tin chi tiết của công việc 7 Nút Xong Xác nhận tạo công việc mới

69

Bảng 3.46: Bảng mô tả giao diện tạo cơng việc mới

Cập nhật danh sách sự kiện trong gia đình

Hình 3.25: Giao diện cập nhật danh sách sự kiện trong gia đình STT Tên thành phần Mô tả STT Tên thành phần Mô tả

1 Lịch thống kê sự kiện

Xác định ngày nào trong tháng có sự kiện.

2 Nút sắp xếp các sự kiện tạo gần đây

Sắp xếp sự kiện tạo gần đây nhất lên đầu danh sách

3 Nút sắp xếp sự kiện sắp kết thúc

Sắp xếp sự kiện sắp kết thúc lên đầu danh sách

4 Nút lọc danh sách cơng việc

Lọc cơng việc theo tiêu chí người tham gia sự kiện

70

Tạo sự kiện mới

71 STT Tên thành phần Mô tả

1 Ô nhập tên đều sự kiện

Nhập tên sự kiện (bắt buộc)

2 Ô nhập ngày bắt đầu sự kiện

Nhập ngày bắt đầu sự kiện (bắt buộc)

3 Ô nhập ngày bắt đầu sự kiện

Nhập ngày bắt đầu sự kiện (bắt buộc)

4 Nút chọn lặp lại Cho phép lặp lại sự kiện hằng ngày, tuần hoặc tháng 5 Nút chọn người

được tham gia

Chọn người được tham gia

6 Nút chọn ảnh Chọn ảnh đính kèm theo sự kiện nếu có 7 Ơ nhập mơ tả Nhập mô tả thông tin chi tiết của sự kiện

8 Nút Xong Xác nhận tạo sự kiện mới với các trường thông tin đã nhập

72

Giao diện hiển thị danh sách các mục thu chi theo từng tháng

Hình 3.27: Giao diện hiển thị danh sách các mục thu chi hằng tháng STT Tên thành phần Mô tả STT Tên thành phần Mô tả

1 Nút chuyển đổi tháng

Chuyển danh mục thu chi tương ứng với tháng đã chọn.

2 Nút tạo mục thu hoặc chi mới

Tạo mục thu hoặc chi mới

3 Khung hiển thị tổng thu và chi

Hiển thị tổng thu và chi của tháng mà người dùng đang chọn, khi nhấn vào khung này thì sẽ chuyển đến màn hình thống kê thu và chi theo từng danh mục

73

Màn hình tạo mục thu hoặc chi mới

Hình 3.28: Giao diện tạo mục thu hoặc chi mới STT Tên thành phần Mô tả STT Tên thành phần Mơ tả

1 Ơ nhập khoản thu hoặc chi

Nhập khoản thu hoặc chi (bắt buộc)

2 Ô loại thu hoặc chi Chọn loại hình thu hoặc chi (bắt buộc) 3 Ô nhập ngày tạo Nhập ngày tạo (bắt buộc)

4 Nút chọn lặp lại Cho phép lặp lại khoản thu hoặc chi

5 Nút chọn ảnh Chọn ảnh đính kèm theo khoản thu hoặc chi nếu có 6 Ơ nhập ghi chú Nhập ghi chú của khoản thu hoặc chi

74

Bảng 3.50: Bảng mô tả giao diện tạo mục thu hoặc chi mới

Màn hình hiển thị danh sách các loại hình thu hoặc chi

75

Màn hình tạo loại hình thu hoặc chi mới

Hình 3.30: Giao diện tạo loại hình thu hoặc chi mới STT Tên thành phần Mô tả STT Tên thành phần Mơ tả

1 Ơ nhập tên Nhập khoản tên của loại hình (bắt buộc) 2 Ơ chọn loại hình

thu hoặc chi

Chọn loại hình mới là thu hoặc chi (bắt buộc)

76

Bảng 3.51: Bảng mơ tả giao diện tạo loại hình thu hoặc chi mới

Giao diện chat

Hình 3.31: Giao diện chat STT Tên thành phần Mô tả STT Tên thành phần Mô tả

1 Ô nhập nội dung tin nhắn

Nhập nội dung tin nhắn

2 Nút gửi tin nhắn Gửi tin nhắn 3 Nút thực hiện gọi

video

77

Bảng 3.52: Bảng mơ tả giao diện chat

Giao diện gọi video

Hình 3.32: Giao diện gọi video call STT Tên thành phần Mô tả STT Tên thành phần Mô tả

1 Nút tắt tiếng Ngắt thu âm thanh

2 Đổi chiều camera Đổi chiều camera (trước hoặc sau) 3 Nút kết thúc cuộc

gọi

Tiến hành kết thúc cuộc gọi video

78 • Giao diện định vị Hình 3.33: Giao diện định vị STT Tên thành phần Mơ tả 1 Nút kích hoạt liên tục cập nhật vị trí

Cập nhật vị trí sau mỗi 20 giây

79

Giao diện hiển thị các bài viết ẩm thực

Hình 3.34: Giao diện hiển thị các bài viết ẩm thực STT Tên thành phần Mô tả STT Tên thành phần Mô tả

1 Nút tạo bài viết mới

Điều hướng người dùng đến màn hình tạo bài viết mới

2 Nút tìm kiếm Tìm kiếm nhanh gia đình theo tên Bảng 3.55: Mô tả giao diện hiển thị các bài viết ẩm thực

80

Giao diện tạo bài viết mới

Hình 3.35: Giao diện tạo bài viết ẩm thực mới STT Tên thành phần Mô tả STT Tên thành phần Mô tả

1 Ô chọn ảnh đại diện

Chọn ảnh đại diện cho bài viết

81 3 Khung nhập nội

dung bài viết

Nhập nội dung bài viết

Bảng 3.56: Mô tả giao diện tạo bài viết ẩm thực mới

Chương 4. ÁP DỤNG THUẬT TOÁN

4.1. Một số định nghĩa

4.1.1. Utility matrix

Đây là một thành phần hết sức quan trọng trong hệ khuyến nghị, ta hầu như không thể thực hiện khuyến nghị mà không sử dụng tới utility matrix.

Trong hệ khuyến nghị sẽ bao gồm hai lớp thực thể tạm gọi là user và item. User sẽ có sự quan tâm đối với các item nhất định, và sự quan tâm đó sẽ được đúc kết thơng qua dữ liệu ta có. Và những dữ liệu ta có để có thể đúc kết được mối quan tâm của các user đối với các item sẽ được thể hiện trong utility matrix, với mỗi cặp user - item sẽ có một giá trị đại diện cho mức độ quan tâm của user tới item đó.

Hình 4.1: Ví dụ về Utility matrix [3]

Hình trên là một ví dụ về ma trận utility. Trong đó từ u[1] đến u[n] tương ứng với các user và từ i[1] đến i[m] tương ứng với các item. Giá trị từng cặp (u, i)

82

chính là giá trị rating (mức độ quan tâm của user u đến item i). Ma trận này được xây dựng từ dữ liệu. Tuy nhiên, có thể thấy rằng ma trận này có rất nhiều các giá trị chưa biết, đó là do giữa cặp user - item chưa có sự tương tác. Nhiệm vụ của hệ gợi ý chính là dựa vào các ơ đã có giá trị trong ma trận trên (dữ liệu thu được từ trong q khứ), thơng qua mơ hình đã được xây dựng, dự đốn các ơ cịn trống (của user hiện hành), sau đó dựa vào các kết quả dự đốn này, sắp xếp kết quả dự đốn (ví dụ, từ cao xuống thấp) và chọn ra những items có giá trị dự đốn cao nhất để gợi ý cho người dùng.

Khơng có Utility matrix, gần như không thể gợi ý được sản phẩm tới người dùng, ngồi cách ln ln gợi ý các sản phẩm phổ biến nhất. Vì vậy, trong các Recommender Systems, việc xây dựng Utility Matrix là tối quan trọng. Tuy nhiên, việc xây dựng ma trận này thường có gặp nhiều khó khăn. Có hai hướng tiếp cận phổ biến để xác định giá trị rating cho mỗi cặp user-item trong Utility Matrix: [4]

• Nhờ người dùng rate sản phẩm. Amazon luôn gửi mail nhắc nhở người dùng rate sản phẩm hay Baemin luôn nhắc nhở người dùng rate sản phẩm và người giao hàng mỗi khi nhận được sản phẩm. Tuy nhiên, cách này cũng sẽ có những hạn chế như người dùng rất ít khi rate sản phẩm hay việc rate sản phẩm đôi khi là những đánh giá thiên lệch của người dùng về sản phẩm như đối với người dùng khó tính, họ có thể đánh giá sản phẩm họ thích chỉ ở mức 3-4 sao và các sản phẩm họ khơng thích ở mức 1 sao, nhưng với người dùng dễ tính thì họ sẵn sàng đánh giá sản phẩm với 5 sao cho sản phẩm họ thích và 3 sao cho sản phẩm họ khơng thích.

• Một hướng tiếp cận khác là thu thập thông tin về hành vi của user. Nếu user mua một sản phẩm trên Amazon, hay xem một video trên youtube (có thể xem nhiều lần), hay click đọc một bài viết nào đó, thì có thể khẳng định rằng người dùng thích hay quan tâm đến sản phẩm đó.

83

4.1.2. Cosine similarity

Sau khi đã xây dựng được utility matrix, mỗi cột (user) là một vector với độ dài là số lượng item. Ta có thể sử dụng những vector này để thực hiện việc tính tốn độ tương ứng giữa các user bằng việc sử dụng hàm Cosine similarity.

Hình 4.2: Cơng thức tính cosine similarity trên góc θ

Độ tương quan giữa hai vector sẽ được xác định dựa trên cosine góc được hợp thành bởi hai vector, với 0° < θ < 180°, bởi đó độ similarity giữa hai vector sẽ là một số thuộc trong khoảng [-1, 1]. Giá trị bằng 1 thể hiện hai vector hoàn toàn similar nhau. Hàm số cos của một góc bằng 1 nghĩa là góc giữa hai vector bằng 0, tức một vector bằng tích của một số dương với vector cịn lại. Giá trị cos bằng -1 thể hiện hai vector này hoàn toàn trái ngược nhau, tức khi hành vi của hai users là hoàn toàn ngược nhau thi similarity giữa hai vector đó là thấp nhất.

Hình 4.3: Độ tương quan giữa hai vector Hệ khuyến nghị gồm 2 nhóm chính: Hệ khuyến nghị gồm 2 nhóm chính:

84

o Content-based Filtering: Gợi ý các item dựa vào hồ sơ (profiles) của người dùng hoặc dựa vào nội dung/thuộc tính (attributes) của những item tương tự như item mà người dùng đã chọn trong quá khứ.

o Collaborative Filtering: Gợi ý các items dựa trên sự tương quan (similarity) giữa các users và/hoặc items. Có thể hiểu rằng đây là cách gợi ý tới một user dựa trên những users có hành vi tương tự.

4.1.3. Reddit’s hot ranking

Hình 4.4: Mơ tả thuật tốn Reddit’s hot ranking [5]

4.1.3.1. Hiện tượng snowball

Hiện tượng snowball là hiện tượng sẽ xảy ra khi có một bài viết được xếp hạng đứng đầu và cứ mỗi ngày sẽ lại càng nhận được nhiều lượt vote hơn dẫn đến việc bài viết sẽ luôn nhận được một số lượt vote nhất định theo thời gian và sau một khoảng thời gian dài, bài viết vẫn sẽ xuất hiện trên top các bài viết được yêu thích nhiều nhất.

85

4.1.3.2. Ảnh hưởng của yếu tố thời gian

Thời gian đăng của bài viết có ảnh hưởng lơn đến độ phổ biến của bài viết và thuật toán sẽ xếp hạng bài viết mới cao hơn so với các bài viết cũ. Điểm số bài viết sẽ không bị giảm đi theo thời gian nhưng những bài viết mới hơn sẽ được chấm điểm xếp hạng cao hơn.

Hình 4.5: Minh họa về xếp hạng các bài viết có cùng số lượt upvote và downvote nhưng được đăng tải ở các mốc thời gian khác nhau [5]

4.1.3.3. The logarithm scale

Thuật toán của Reddit sử dụng hàm logarithm để đánh trọng số các lượt vote đầu tiên cao hơn các lượt vote sau.

86

Với tác dụng của hàm logarithm, các lượt vote sau sẽ được chấm điểm thấp hơn so với các lượt vote đầu, cụ thể:

• Với bài viết có 10 vote (tức số upvote - downvote), bài đó sẽ được cộng hẳn

log 10 = 1 điểm. [6]

• Với bài viết có gấp đơi số vote trên, tức 20 vote, bài đó lại chỉ nhận được

log 20 = 1.3 điểm. [6]

• Một bài viết khác có số vote gấp 10 bài viết đầu, tức tận 100 vote, bài đó lại chỉ nhận được log 100 = 2 điểm. [6]

Cũng một ví dụ khác, để bài viết đăng cách đây 3 ngày trước có hạng cao hơn một bài vừa mới đăng, nó cần phải có đến hơn 259200

45000 = 5.76 điểm từ

số vote, tức nó cần phải có đến gần 600000 lượt vote. [6]

Như vậy, nhờ vào hàm logarit mà các lượt vote đầu có giá trị cao nhất, các lượt vote về sau càng ngày càng có ít giá trị hơn và để bài viết càng cũ giữ được trên trending thì càng phải nhận được lượng vote cực lớn. Như vậy sẽ giải quyết được vấn đề snowball.

4.1.3.4. Ảnh hưởng của các lượt downvote

Có thể thấy từ thuật tốn, số điểm của bài viết được tính dựa trên số lượt upvote và downvote như sau:

Hình 4.7: Cách tính điểm cho bài viết dựa trên số lượt up và downvote [5] Điều có ảnh hưởng lớn đến các bài viết có số lượt upvote và downvote

Một phần của tài liệu Xây dựng ứng dụng sổ tay gia đình hỗ trợ tương tác (Trang 89)