4. Phương pháp nghiên cứu
5.1.Màn hình Splash
Màn hình đối tượng
Hình 5-1. Màn hình đối tượng Splash
Bảng 5-1. Bảng chi tiết đối tượng của màn hình Splash
STT Tên đối tượng Kiểu đối tượng Mô tả Ghi
chú
1 Logo Icon Logo của ứng dụng
2 Label content Text Tên của logo ứng dụng 3 Circular Progress
Indicator
Circular Progress Indicator
Load các service từ máy chủ trong một khoảng thời gian 4 Label content Text Slogan của ứng dụng
60
THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
Màn hình xử lý
Hình 5-2. Màn hình xử lý Splash
Danh sách xử lý
Bảng 5-2. Bảng chi tiết xử lý của màn hình Splash
STT Tên xử lý
Điều kiện gọi thực hiện Mô tả Ghi chú 1 Load dữ liệu Khởi động ứng dụng, sự kiện sẽ được gọi để load dữ liệu
Sau khi người dùng mở ứng dụng, để có thể vào trang chủ thì sẽ cần load dữ liệu và mất một khoảng thời gian nhất định
Trang chủ của ứng dụng là trang Explore
61 5.2. Màn hình đăng nhập
Màn hình đối tượng
Hình 5-3. Màn hình đối tượng đăng nhập
Bảng 5-3. Bảng chi tiết đối tượng của màn hình đăng nhập
STT Tên đối tượng Kiểu đối tượng
Mô tả Ghi
chú 1 Label content Text Tên của màn hình
2
Label content Text Hướng dẫn nhập số điện thoại để đăng nhập hoặc chọn cách đăng nhập khác
3 Input phone number box
TextField Ô để nhập số điện thoại đăng nhập
4 Continue button
RaisedButton Nút xác nhận đến bước tiếp theo
5 Label content Text Chọn một trong hai cách đăng nhập bên dưới
62
THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
6 Facebook button
IconButton Nút đăng nhập bằng Facebook
7 Google button IconButton Nút đăng nhập bằng Google
Màn hình xử lý
Hình 5-4. Màn hình xử lý đăng nhập
Danh sách xử lý
Bảng 5-4. Bảng chi tiết xử lý của màn hình đăng nhập
STT Tên xử lý Điều kiện gọi thực hiện Mô tả Ghi chú 1 Nhập số điện thoại Nhập số điện thoại đăng nhập vào box
Số điện thoại nhập vào dùng để đăng nhập vào ứng dụng, hoặc có thể dùng để đăng ký tài khoản nếu chưa đăng ký
2
Chuyển đến trang xác thực mã otp
Click vào button “Continue”
Chuyển sang trang xác thực mã otp
63
3 Đăng nhập Facebook
Click vào button “Facebook”
Giúp người dùng có thể sử dụng tài khoản facebook để đăng nhập 4 Đăng nhập
Click vào button
“Google” Giúp người dùng có thể sử dụng tài khoản google để đăng nhập