4. Phương pháp nghiên cứu
5.3.Màn hình chỉnh sửa thông tin cá nhân
Màn hình đối tượng
Hình 5-5. Màn hình đối tượng chỉnh sửa thông tin cá nhân
Bảng 5-5. Bảng chi tiết đối tượng của màn hình chỉnh sửa thông tin cá nhân
STT Tên đối tượng Kiểu đối tượng Mô tả Ghi chú 1 Back button
IconButton Quay lại màn hình trước đó
2 Label content
64
THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
3
Avatar CircleAvatar Avatar của người dùng, lấy khi người dùng đăng nhập với facebook hoặc google hoặc do người dùng cung cấp 4 Edit button IconButton Người dùng muốn thay đổi ảnh đại diện
của mình thì sẽ chọn vào đây 5 Label
content
Text Tên của trường Email
6 Label content
Text Trường email của người dùng
7 Name box TextField Ô để người dùng nhập tên muốn thay đổi 8 Nickname
box
TextField Ô để người dùng nhập nickname của mình
9 Contact box
TextField Ô để người dùng nhập số điện thoại liên lạc
10 Contact icon
Icon Icon mô tả trường contact
11 Update button
RaisedButton Nút cập nhập profile sau khi chỉnh sửa hoàn tất
65
Màn hình xử lý
Hình 5-6. Màn hình xử lý thông tin cá nhân
Danh sách xử lý
Bảng 5-6. Bảng chi tiết xử lý của màn hình chỉnh sửa thông tin cá nhân
STT Tên xử lý Điều kiện gọi thực hiện
Mô tả Ghi
chú 1 Quay lại Click vào button
“back”
Quay lại trang trước đó
2 Thay đổi ảnh đại diện
Click vào button “Change avatar”
Hiển thị thư mục để người dùng chọn ảnh đại diện
3 Nhập tên người dùng
Nhập vào ô tên
người dùng Thay đổi tên người dùng 4 Nhập nickname
người dùng
Nhập vào ô nickname
Thay đổi nickname của người dùng
5 Nhập contact Nhập vào ô số điện thoại liên lạc
66
THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
6
Cập nhật thông tin
Click vào button “update profile”
Cập nhật thông tin người dùng sau khi thay đổi vào cơ sở dữ liệu
5.4. Màn hình chọn địa điểm
Màn hình đối tượng
Hình 5-7. Màn hình đối tượng chọn địa điểm
Bảng 5-7. Bảng chi tiết đối tượng của màn hình chọn địa điểm
STT Tên đối tượng Kiểu đối tượng
Mô tả Ghi
chú 1 Back button IconButton Quay lại màn hình trước đó
2 Map button IconButton Chuyển sang màn hình view destination
3 Start place box TextField Ô để người dùng nhập nơi bắt đầu chuyến đi
4 Destination place box
TextField Ô để người dùng nhập nơi dừng chân
67
5 Add home buttton
RaisedButton Nút nhập địa chỉ nhà ở của người dùng
6 Add work button RaisedButton Nút nhập nơi làm việc của người dùng
7
Label content Text Hiển thị thông tin cho người dùng biết trường này dùng để lưu các địa điểm
8 Next button IconButton Nút chuyển sang trang chọn địa điểm để lưu
9 Add destination later button
FlatButton Nút giúp người dùng thêm địa điểm dừng chân sau
68
THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
Màn hình xử lý
Hình 5-8. Màn hình xử lý chọn địa điểm
Danh sách xử lý
Bảng 5-8. Bảng chi tiết xử lý của màn hình chọn địa điểm
STT Tên xử lý Điều kiện gọi thực hiện
Mô tả Ghi
chú 1 Quay lại Click vào button
“back”
Quay lại trang trước đó
2 Mở map Click vào button “map”
Chuyển sang trang xem thông tin địa điểm
3 Nhập địa điểm khởi hành Nhập vào ô nơi bắt đầu
Tên của địa điểm bắt đầu lịch trình
4
Nhập địa điểm dừng chân
Nhập vào ô địa điểm dừng chân
Tên của địa điểm trong lịch trình mà người dùng muốn dừng chân tham quan
69
5 Thêm địa chỉ nhà ở
Click vào button “add home”
Thêm địa chỉ nhà ở vào database
6 Thêm địa chỉ nơi làm việc
Click vào button
“add work” Thêm địa chỉ nơi làm việc vào database 7 Lưu địa điểm Click vào button
“next”
Chuyển sang trang lưu địa điểm đã nhập vào database
8
Thêm điểm dừng chân vào sau
Click vào button “add destiantion later”
Địa điểm dừng chân sẽ được người dùng thêm vào sau
5.5. Màn hình tạo lịch trình
Màn hình đối tượng
Hình 5-9. Màn hình đối tượng tạo lịch trình
Bảng 5-9. Bảng chi tiết đối tượng của màn hình tạo lịch trình
STT Tên đối tượng
Kiểu đối tượng Mô tả Ghi chú
1 Back button
70
THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
2 Label content Text Tên màn hình 3 Help button
IconButton Trợ giúp cho người dùng Hướng dẫn sử dụng 4 Start point
box
TextField Ô để người dùng nhập nơi bắt đầu của lịch trình
5 Arrival point box
TextField Ô để người dùng nhập nơi kết thúc của lịch trình
6 Date range DateRangerPicker Khoảng thời gian của lịch trình Tính bằng ngày 7 Member
button
FlatButton Số lượng người tham gia vào chuyến đi Người lớn, trẻ em 8 Private switch
Switch Trạng thái của lịch trình giúp người dùng có thể để lịch trình cho riêng mình xem
9 Continue button
RaisedButton Chuyển sang màn hình tạo lịch trình cho từng ngày cụ thể
71
Màn hình xử lý
Hình 5-10. Màn hình xử lý tạo lịch trình
Danh sách xử lý
Bảng 5-10. Bảng chi tiết xử lý của màn hình tạo lịch trình
STT Tên xử lý Điều kiện gọi thực hiện
Mô tả Ghi
chú 1 Quay lại Click vào button
“back”
Quay lại trang trước đó
2 Trợ giúp Click vào button
“help” Hướng dẫn tạo lịch trình cho người dùng mới 3 Nhập địa điểm
khởi hành
Nhập vào ô nơi bắt đầu
Tên của địa điểm bắt đầu lịch trình
4 Nhập địa điểm kết thúc
Nhập vào ô địa điểm kết thúc
Tên của địa điểm kết thúc của lịch trình
5
Thời gian lịch trình
Click vào trường của “start date” hoặc “end date”
Thêm khoảng thời gian của lịch trình
72
THIẾT KẾ GIAO DIỆN VÀ XỬ LÝ
6
Số lượng tham gia
Click vào button “traveller”
Chọn số lượng người tham gia, bao gồm bao nhiêu người lớn và bao nhiêu trẻ em
7
Trạng thái riêng tư
Click vào switch “private”
Chuyển đổi trạng thái của lịch trình là riêng tư hoặc public đối với những traveller khác
8
Chuyển màn hình thêm kế hoạch từng ngày
Click vào button “continue”
Chuyển sang màn hình thêm kế hoạch từng ngày