Multiple Child Widget

Một phần của tài liệu Tìm hiểu FLUTTER và phát triển ứng dụng trò chuyện ẩn danh (báo cáo cuối kì đồ án 1) (Trang 33)

Hình 3.4-5. Multiple Child Widget trong Flutter

Loại widget layout này sẽ cho phép có nhiều hơn một widget con. Một số widget layout dạng này được sử dụng phổ biến

▪ Row ▪ Column ▪ ListView ▪ GridView ▪ Expanded ▪ Table ▪ Flow ▪ Stack 3.4.5. Một số phần quan trọng khác

Có khá nhiều phần quan trọng mà bọn em đã tìm hiểu và sử dụng trong đồ án lần này nhưng không thể kể hết trong báo cáo, như :

20

o Animation : Chuyển động trong ứng dụng Flutter

o Các Package, các Dependencies : Gói, thư viện cùng phiên bản phụ thuộc của chúng

o RestAPI với các giao thức HTTP, lệnh Future, ……

Chương 4. KHẢO SÁT VÀ PHÂN TÍCH ĐẶC TẢ YÊU CẦU 4.1. Nhu cầu thực tế

Hiện nay, với sự phát triển của công nghệ, các ứng dụng mãng xã hội đã và đang tràn ngập trên thị trường ứng dụng web cũng như các thiết bị di động. Moi ứng dụng ấy được tạo ra nhằm liên kết mọi người lại với nhau, giúp kết bạn bốn phương, liên lạc với bạn bè, người thân, hay đưa những người xa lạ lại gần nhau hơn chỉ qua màn hình điện thoại.

Thêm vào đó, có một vài nhu cầu nổi lên như tìm người tâm sự, lắng nghe, hay cao cả hơn, là tìm bạn đời mà chỉ cần thông qua một ứng dụng đơn giản. Khá nhiều ứng dụng đã được ra đời, điển hình như Tinder, nhưng vài bạn trẻ lại đnag sử dụng sai cách….

Vậy nên, chúng em quyết định tạo ra app Familiar Stranger – Người Lạ Thân Quen nhằm phục vụ cho nhu cầu cần kết bạn, hay chỉ đơn giản là tâm sự những vấn đề khó nói ở trong lòng, với những người sẵn sàng lắng nghe, cảm thông và chia sẻ, đưa ra nhugnwx lời khuyên bổ ích cho bạn ghép cặp. Thông tin cũng sẽ hoàn toàn được bảo mật, cho đến khi bạn đưa UID của bản thân cho bạn cùng phòng chat và người ấy chủ động kết bạn. Ngoài ra, còn có tính năng nghe nhạc trong phòng chat, giúp tâm trạng thư thái, hay bộc lộ hết cảm xúc ở trong lòng…. Ở đồ án 1 lần này, có thể sẽ có một số chức năng chưa hoàn chỉnh, nhugnw chúng em sẽ cố gắng hoàn thiện vả cải thiện đứa con tinh thần này đi xa hơn nữa.

4.2. Khảo sát bằng Google Form

Kết thúc khảo sát diễn ra vào 22:00 ngày 01 tháng 4 năm 2022.

21

- Link khảo sát : Khảo sát các ứng dụng trò chuyện - Tổng hợp các câu hỏi và câu trả lời :

o Câu 1: Về độ tuổi, vì đối tượng khảo sát chủ yếu là sinh viên nên có phần nghiêng hẳn về lứa từ 18 đến 24 tuổi

o Câu 2: Khá nhiều người khảo sát, nhưng đa số nam sinh khảo sát là chủ yếu.

Hình 4.2-3. Tỷ lệ giới tính khảo sát

22

o Câu 3: Messenger của Facebook(Meta) vẫn đang là nền tảng được sử dụng để trò chuyện nhiều nhất giữa những người bạn với nhau

Hình 4.2-4. Các app nhắn tin thường được sử dụng

o Câu 4: Về giao diện ứng dụng, chia ra làm 2 luồng rõ rệt, thích và không thích vì một vài lý do cá nhân

Hình 4.2-5. Khảo sát về giao diện sử dụng

o Câu 5: Vẫn không quá nhiều người tin cậy độ bảo mật của các ứng dụng trò chuyện hiện nay, khi các tin nhắn riêng tư(không vi phạm chuẩn mực đạo đức và xã hội) bị lộ ra, hay bị hack tài khoản

23

Hình 4.2-6. Khảo sát về độ bảo mật

o Câu 6: Thu thập từ người khảo sát, nhận thấy nhu cầu cần có một app riêng tư hơn, mà không bị sử dụng sai mục đích như Tinder, …. Là khá cao

o Câu 7: Giao diện người dùng mong muốn vẫn là có thể luân phiên giữa sáng và tối, để phù hợp, tuy nhiên, nhóm sẽ ghi nhớ lại ý này để phát

24

triển giao diện tối và sáng song song. Trước mắt nhóm sẽ chỉ hướng đến xây dựng một app hoàn chỉnh trước.

Hình 4.2-7. Khảo sát về màu sắc của app

o Câu 8: Ứng dụng sẽ có thêm phần nhạc phòng chat, nghĩa là âm nhạc được phát đồng bộ cả ở trên hai máy. Và 2/3 số người khảo sát ủng hộ điều này.

Hình 4.2-8. Kết hợp giữa trò chuyện và phát nhạc

o Câu 9: Khảo sát về tính năng Report- khiếu nại người dùng của app, mọi người đồng tình để ngăn chặn các hành vi tiêu cực, phá hoại , xúc

25

phạm danh dự nhân phẩm hay vi phạm các chuẩn mực đạo đức xã hội được diễn ra.

Hình 4.2-9. Độ tin cậy của ứng dụng

4.3. Usecase , đặc tả usecase 4.3.1. Sơ đồ usecase 4.3.1. Sơ đồ usecase

26

4.3.2. Danh sách usecase

STT Tên nhóm Tên usecase

1 Nhóm chức năng ‘Đăng nhập, đăng ký’ Đăng nhập 2 Quên mật khẩu 3 Đăng ký 4 Nhóm chức năng ‘Hồ sơ

người dùng’ Chỉnh sửa hồ sơ 5

Nhóm chức năng ‘Bạn bè’

Kết bạn

6 Danh sách bạn bè

7 Mời bạn bè vào phòng chat

8 Xoá bạn bè 9 Báo cáo bạn bè 10 Xem hồ sơ bạn bè 11 Nhóm chức năng ‘Chat ẩn danh’ Ghép cặp 12 Chat 13 Báo cáo bạn ghép cặp 14 Nghe nhạc

15 Nhóm chức năng ‘Cài đặt’ Chỉnh sửa cài đặt Bảng 4-1. Danh sách chức năng

4.3.3. Đặc tả chi tiết (Activity, Sequence Diagram) 4.3.3.1. Đăng nhập 4.3.3.1. Đăng nhập

27

Mô tả Đăng nhập cho User

Dòng sự kiện 1. User khởi động app, tiến hành vào trang đăng nhập

2. Hệ thống hiển thị màn hình đăng nhập 3. User nhập thông tin nhấn SIGN IN

4. Hệ thống kiểm tra thông tin hợp lệ, thông báo đăng nhập thành công, hiển thị màn hình chính của app Dòng sự kiện khác 1. Hệ thống kiểm tra thông tin không hợp lệ, thông báo

đăng nhập không thành công

Yêu cầu đặc biệt Không

Tình trạng hệ thống trước khi thực hiện

Actor : User

Condition : chưa đăng nhập vào App Tình trạng hệ thống

sau khi thực hiện

Hệ thống xác nhận , cho phép User đăng nhập và sử dụng tính năng của app

Điểm mở rộng Không

28

Activity Diagram

29

Sequence Diagram

Hình 4.3-3. Sơ đồ tuần tự 'Đăng nhập'

4.3.3.2. Đăng ký

Tên chức năng Đăng ký

Mô tả Đăng ký cho User mới sử dụng

Dòng sự kiện 1. User nhấn vào phím SIGN UP để hiển thị màn hình

30

2. Hệ thống hiển thị màn hình /đăng ký

3. User nhập thông tinmuốn đăng ký, nhấn REGISTER 4. Hệ thống kiểm tra thông tin hợp lệ, thông báo đăng

ký/ đăng nhập thành công, hiển thị màn hình chính của app

Dòng sự kiện khác 2. Hệ thống kiểm tra thông tin không hợp lệ, thông báo đăng ký không thành công

Yêu cầu đặc biệt Không

Tình trạng hệ thống trước khi thực hiện

Actor : User

Condition : chưa đăng nhập vào App

Tình trạng hệ thống sau khi thực hiện

Hệ thống xác nhận , cho phép User đăng ký và sử dụng tính năng của app

Điểm mở rộng Không

31

Activity Diagram

32

Sequence Diagram

Hình 4.3-5. Sơ đồ tuần tự 'Đăng ký'

4.3.3.3. Quên mật khẩu

Tên chức năng Quên mật khẩu

Mô tả Reset mật khẩu và đnagw nhập vào app khi User quên mật

33

Dòng sự kiện 1. User nhấn vào Forgot Password để hiển thị màn

hình quên mật khẩu

2. Hệ thống hiển thị màn hình quên mật khẩu

3. User SĐT đã đăng ký, muốn đăng ký để reset mật khẩu

4. Hệ thống kiểm tra SĐT hợp lệ, gửi mã xác minh, yêu cầu nhập mã

5. User nhập mã xác minh

6. Hệ thống kiểm tra mã xác minh hợp lệ, thống báo đnagw nhập thành công, reset mật khẩu về 000000 Dòng sự kiện khác 3. Hệ thống kiểm tra SĐT không hợp lệ, thông báo sai

thông tin

4. Hệ thống kiểm tra mã xác minh không trùng khớp, thông báo sai mã xác minh

Yêu cầu đặc biệt Không

Tình trạng hệ thống trước khi thực hiện

Actor : User

Condition : chưa đăng nhập vào App Tình trạng hệ thống

sau khi thực hiện

Hệ thống xác nhận , cho phép User đăng nhập và sử dụng tính năng của app

Điểm mở rộng Không

34

Activity Diagram

35

Sequence Diagram

Hình 4.3-7. Sơ đồ hoạt động 'Quên mật khẩu'

4.3.3.4. Chỉnh sửa hồ sơ

36

Mô tả Chỉnh sửa hồ sơ cho User

Dòng sự kiện 1. User chọn mục Profile bên Slider menu để vào giao

diện Hồ sơ

2. Hệ thống hiển thị giao diện hồ sơ người dùng 3. Người dùng thực hiện các thay đổi : Avatar, tên,

tuổi, giới tính, nhấn SAVE

4. Hệ thống kiểm tra thông tin hợp lệ, cập nhật thông tin người dùng, cập nhật lại giao diện Hồ sơ

Dòng sự kiện khác 5. Hệ thống kiểm tra thông tin không hợp lệ, thông báo lỗi

Yêu cầu đặc biệt Không

Tình trạng hệ thống trước khi thực hiện

Actor : User

Condition : đã đăng nhập vào App

Tình trạng hệ thống sau khi thực hiện

Hệ thống xác nhận thay đổi của User về hồ sơ của mình

Điểm mở rộng Không

37

Activity Diagram

38

Sequence Diagram

Hình 4.3-9. Sơ đồ tuần tự 'Chỉnh sửa hồ sơ'

4.3.3.5. Chỉnh sửa cài đặt

Tên chức năng Chỉnh sửa cài đặt

Mô tả Chỉnh sửa cài đặt App cho User

Dòng sự kiện 5. User chọn mục Setting bên Slider menu để

vào giao diện Cài đặt

39

7. Người dùng thực hiện các thay đổi

8. Hệ thống cập nhật cài đặt của người dùng cho App

Dòng sự kiện khác Không

Yêu cầu đặc biệt Không

Tình trạng hệ thống trước khi thực hiện

Actor : User

Condition : đã đăng nhập vào App Tình trạng hệ thống sau

khi thực hiện

Hệ thống xác nhận thay đổi của User về cài đặt của App

Điểm mở rộng Không

40

Activity Diagram

41

Sequence Diagram

Hình 4.3-11. Sơ đồ tuần tự 'Chỉnh sửa cài đặt'

4.3.3.6. Ghép cặp

Tên chức năng Ghép cặp

Mô tả Ghép cặp cho hai User với nhau vào phòng chat

Dòng sự kiện 1. User bấm vào biểu tượng PLAY trên màn hình

để bắt đầu ghép cặp

2. Hệ thống bắt đầu đếm giờ, đưa User vào hàng chờ 1 1

3. Hệ thống thông báo tìm thấy người ghép cặp, xác nhận ghép cặp?

4. User xác nhận ghép cặp

5. Hệ thống đưa hai người vào một phòng chat

Dòng sự kiện khác 6. User từ chối ghép cặp

7. Hệ thống dừng đếm giờ, huỷ ghép cặp, đẩy người dùng ra khỏi hàng đợi

42

Yêu cầu đặc biệt Không

Tình trạng hệ thống trước khi thực hiện

Actor : User

Condition : đã đăng nhập vào App

Tình trạng hệ thống sau khi thực hiện

Hệ thống xác nhận , cho phép User đăng nhập và sử dụng tính năng của app

Điểm mở rộng Không

43

Activity Diagram

44

Sequence Diagram

Hình 4.3-13. Sơ đồ tuần tự 'Ghép cặp'

4.3.3.7. Chat

Tên chức năng Chat

Mô tả Chat giữa hai User với nhau trong phòng chat

Dòng sự kiện 1. User nhập tin nhắn/hình ảnh để gửi cho người

45

2. Hệ thống tải hình ảnh và tin nhắn lên, lấy URL từ sever để load hình ảnh nếu có

3. Hệ thống hiển thị tin nhắn của User cho người được ghép cặp

Dòng sự kiện khác Không

Yêu cầu đặc biệt Không

Tình trạng hệ thống trước khi thực hiện

Actor : User

Condition : đã đăng nhập vào App

Tình trạng hệ thống sau khi thực hiện

Hệ thống xác nhận , cho phép User gửi tin nhắn cho người được ghép cặp

Điểm mở rộng Không

46

Activity Diagram

47

Sequence Diagram

Hình 4.3-15. Sơ đồ tuần tự 'Chat'

4.3.3.8. Nghe nhạc

Tên chức năng Nghe nhạc

Mô tả Nghe nhạc cho cả hai bên User

Dòng sự kiện 1. User chuyển snag giao diện Media, chọn bài hát

thêm vào danh sách phát từ danh sách bài hát có sẵn

2. User bấm Play để bắt đầu phát nhạc

3. Hệ thống ghi nhận, phát bản nhạc ở đầu danh sách cho cả hai

48

4. User bấm Pause

5. Hệ thống tạm ngừng phát nhạc 6. User bấm Next

7. Hệ thống chuyển snag bài kế tiếp, xoá bài hát đầu tiên khỏi hàng đợi

Dòng sự kiện khác Không

Yêu cầu đặc biệt Không

Tình trạng hệ thống trước khi thực hiện

Actor : User

Condition : đã đăng nhập vào App

Tình trạng hệ thống sau khi thực hiện

Hệ thống xác nhận , cho phép 2 user nghe nhạc đồng bộ trên điện thoại

Điểm mở rộng Không

49

Activity Diagram

50

Sequence Diagram

Hình 4.3-17. Sơ đồ tuần tự 'Nghe nhạc'

51

Tên chức năng Khiếu nại

Mô tả Khiếu nại Người được ghép cặp cùng vì một lý do nào đó

Dòng sự kiện 1. User nhấn vào mục Report ở menu bên góc màn hình

2. Hệ thống hiển thị giao diện Khiếu nại 3. User chọn lý do khiếu nại, bấm SEND

4. Hệ thống ghi nhận, lưu đoạn chat lên sever, đồng thời đá cả hai ra ngoài màn hình chính, chính thức xoá phòng chat

Dòng sự kiện khác

1. User huỷ khiếu nại, bấm CANCEL 2. Hệ thống trở về màn hình ChatRoom

Yêu cầu đặc biệt Không

Tình trạng hệ thống trước khi thực hiện

Actor : User

Condition : đã đăng nhập vào App

Tình trạng hệ thống sau khi thực hiện

Hệ thống xác nhận đơn khiếu nại, đưa User thoát khỏi phòng chat về màn hình chính

Điểm mở rộng Không

52

Activity Diagram

53

Sequence Diagram

Hình 4.3-19. Sơ đồ tuần tự 'Khiếu nại'

4.3.3.10. Thêm bạn bè

Tên chức năng Thêm bạn bè

Mô tả Thêm bạn bè cho User

Dòng sự kiện 1. User bấm vào mục Add Friend

2. Hệ thống hiển thị hộp thoại thêm bạn bè bằng UID

3. User nhập UID của bẹn bè

4. Hệ thống kiểm tra tồn tại, thông báo thêm bạn bè thành công

54

lỗi

Yêu cầu đặc biệt Không

Tình trạng hệ thống trước khi thực hiện

Actor : User

Condition : đã đăng nhập vào App

Tình trạng hệ thống sau khi thực hiện

Hệ thống xác nhận , cho phép User thêm bạn bè bằng UID

Điểm mở rộng Không

55

Activity Diagram

56

Sequence Diagram

Hình 4.3-21. Sơ đồ tuần tự 'Thêm bạn bè'

4.3.3.11. Tìm kiếm bạn bè

Tên chức năng Tìm kiếm bạn bè

Mô tả Tìm kiếm bạn bè cho User

57

phải màn hình

2. Hệ thống hiển thị giao diện danh sách bạn bè 3. User nhập UID/Tên muốn tìm kiếm, nhấn biểu

tượng kính lúp

4. Hệ thống ghi nhận, kiểm tra, lọc ra danh sách bạn bè trùng khớp với từ khoá cần tìm

Dòng sự kiện khác 8. Hệ thống không tìm thấy ai trúng khớp, không hiển thị bạn bè nào cả

9. Tìm kiếm rỗng -> Hệ thống hiển thị danh sách tất cả bạn bè

Yêu cầu đặc biệt Không

Tình trạng hệ thống trước khi thực hiện

Actor : User

Condition : đã đăng nhập vào App

Tình trạng hệ thống sau khi thực hiện

Hệ thống xác nhận , cho phép User tìm kiếm bạn bè

Điểm mở rộng Không

Một phần của tài liệu Tìm hiểu FLUTTER và phát triển ứng dụng trò chuyện ẩn danh (báo cáo cuối kì đồ án 1) (Trang 33)

Tải bản đầy đủ (PDF)

(104 trang)