CHƯƠNG 3: XÂY DỰNG ỨNG DỤNG TẢI ẢNH MPU(Mobile Photo Uploader)
3.2CÁC GIAO DIỆN
3.2.1 Nhìn chung về ứng dụng
MPU trợ giúp các hệ điều hành và thiết bị dưới đây:
Android
• Hệ điều hành được trợ giúp ♦ Phiên bản hệ điều hành 1.0 • Độ phân giải được trợ giúp
♦ Điện thoại di động G1 của Google: 480x320(HVGA) ảnh chân dung, ảnh phong cảnh.
Định dạng hình ảnh được trợ giúp: • Jpeg
• Bmp • Gif • Png
• Cỡ file được trợ giúp • Nhỏ hơn 3Mb
Cỡ của ứng dụng: dưới 1MB
Công nghệ và các phương thức sử dụng
Xu hướng truy nhập vào Photoshow.com hiện nay là bằng cách dùng một giao thức sử dụng XML qua HTTP(xml>/HTTP). Yêu cầu được tạo ra theo lời gọi HTTP POST. Đoạn code XML đó có dạng:
<?xml version=”1.0” encoding=”utf-8”> <service name=”serviceName”> <params> … </params> </service>
Nội dung trong phần params là thành phần tên của các tham số. Nếu thành công thì câu trả lời có dạng:
<?xml version=”1.0” encoding=”utf-8”> <response name=”serviceName”> <value> … </value> </response>
Phần value chứa những giá trị được trả ra, nếu không trả lại gì(void returns) thì sẽ được lưu trong thành phần giá trị rỗng (empty). Nếu có lỗi xảy ra thì sẽ trả ra mẫu sau:
<?xml version=”1.0” encoding=”utf-8”> <response name=”serviceName”>
<fault>MPSN_FAULT_XXXX</fault> <service>
Chỗ MPSN_FAULT_XXXX là chuỗi chỉ ra loại của lỗi, ví dụ:
MPSN_FAULT_NO_LOGIN chỉ ra rằng một cái gì đó vừa được tạo ra để log in vào một tài khoản mà không tồn tại.
Để truy cập vào services trong Photoshow.com, hệ thống client phải thành lập một session. Sau đó server sẽ trả ra một sessionKey, sessionKey sẽ được dùng cho những lần truy cập tiếp theo. Sau đây là các bước tuần tự:
1. Photoshow.com:: getSession
2. Khi ứng dựng đã lập được một Session nó có thể gọi login để xác định một người dùng cụ thể và liên kết người dùng đó với session. Login cũng trả ra chi tiết về người dùng, chi tiết này có thể được dùng cho lần tiếp theo
3. Để nhận một danh sách PhotoShow cho người sử dụng, ứng dụng client phải gọi loadCompositeChannel trong gói “uci”(unique channel identifier). Điều này căn cứ vào tên màn hình của người dùng lấy được từ việc gọi login.
4. Người sử dụng có thể chọn từ danh sách các Photoshow mà họ có trên mạng.
5. Khi đã chọn được một PhotoShow ứng dụng lấy lại vị trí của upload server host đưa ra thông tin của Show, rồi đến các photo riêng lẻ.
6. Cuối cùng ứng dụng kết thúc một session bằng cách gọi endSession
Phương thức getSession EndPoint:
http://www.photoshow.com/MPSNAppServer/services/session
Sau đó, ứng dụng client sẽ dùng lệnh sau để getSession:
<?xml version="1.0" encoding="utf-8"?> <service name="getSession"> <params> <licenseKey>KEY-PSC-ONLINE-PHP</licenseKey> <source> <product>api_demo</product> <version>1.0.0</version> <brandLocale> <brand>roxio</brand> <locale>en_US</locale> </brandLocale> <build>1</build> <platform>mobile</platform> <level>free</level> <redirSource>sonic_development</redirSource> </source> </params> </service>
Kết quả sẽ trả ra như sau: (adsbygoogle = window.adsbygoogle || []).push({});
<?xml version="1.0" encoding="utf-8"?> <response name="getSession"> <value> <session> <sessionKey>abdef…</sessionKey> … </session> </value> </response>
Session key là một chuỗi đã được trích và được đưa vào lần gọi tiếp theo.
Phương thức Login:
Sử dụng session key đã lấy được từ phương thức getSession:
<?xml version="1.0" encoding="utf-8"?> <service name="login"> <params> <sessionKey>from getSession</sessionKey> <username>nick_twyman@conky.com</ username > <password>password</password> </params> </service> Kết quả trả ra là: <?xml version="1.0" encoding="utf-8"?> <response name="login"> <value> <user> <scrnName>nick</scrnName> … </user> </value> </response>
scrnName là tên duy nhất cho người dùng, được dùng để mặc định kênh của họ trên web và được dùng trên URLs cho quá trình online của họ. Nó sẽ được trích ra và được lưu lại
Phương thức endSession Endpoint:
http://www.photoshow.com/MPSNAppServer/services/session
Nếu ứng dụng không dùng lại session, nó sẽ kết thúc session bất cứ khi nào có thể. Điều này được làm bởi một lời gọi tới endSession.
<?xml version="1.0" encoding="utf-8"?> <service name="getSession"> <params> <sessionKey>from getSession</sessionKey> </params> </service> Kết quả sẽ trả ra: <?xml version="1.0" encoding="utf-8"?> <response name="getSession"> <value/> </response>
(Trích: PhotoShow Integration-Sonic Solutions) 3.2.2 Luồng chương trình và những đặc trưng
MPU được dùng để tải những bức ảnh đã được chọn trong điện thoại lên website photoshow.com
MPU liên kết với website photoshow.com bằng dịch vụ web API • Luồng chương trình
Login Main Sharring
Setting Photo Library Tải ảnh Chọn ảnh Xác nhận lại ảnh đã chọn Chọn ảnh Hình 3.1 Thoát
Biểu đồ chức năng ( Functional Diagram):
Sơ đồ liên kết các màn hình
Hệ thống upload ảnh
Login Liệt kê danh sách ảnh Tải ảnh lên mạng
3.2.2.1 Login
Người dùng phải cung cấp các thông tin về email và mật khẩu, sau đó chương trình sẽ kiểm tra tính hợp lệ của các thông tin đó trước khi truy nhập vào website photoshow.com
3.2.2.2PhotoLibrary
MPU đưa ra đã được lưu trong thư mục nguồn
Thông tin của Photo trong thư viện ảnh có thể được cập nhật tự động hoặc do người dùng tự cập nhật.
Người sử dụng có thể chọn nhiều ảnh để tải cùng một lúc 3.2.2.3Chọn Album để tải vào
Người dùng chọn một trong các photoshow được liệt kê để đưa ảnh vào Màn hình Login Màn hình Main Màn hình ReadyToUpload Màn hình ChoosePhotoShow Màn hình PhotoLibrary Màn hình UploadPhoto Hình 3.3
3.2.2.4Tải ảnh và tải lại nếu có lỗi
Ứng dụng có thể tải nhiều ảnh vào website photoshow.com Nếu có lỗi, ứng dụng có thể tự động tải lại
3.2.2.5Quản lý dữ liệu thông minh
MPU trợ giúp chức năng mặc định dưới đây của điện thoại di động trong phần quản lý dữ liệu (adsbygoogle = window.adsbygoogle || []).push({});
• Tải lên mạng Wifi
o Tải lên mạng wifi và gọi điện chạy song song với nhau o Wifi là kết nối riêng cao hơn
• Chạy nhiều hơn 2 dữ liệu ứng dụng
o Khi dùng nhiều hơn 2 dữ liệu ứng dụng. Ví dụ như email,ứng dụng có thể chia sẻ băng thông
3.2.3 Các màn hình và chức năng chính 3.2.3.1Khởi động MPU
Hình 3.4
Hình 3.3: màn hình chính của G1: Đây là màn hình sẽ xuất hiện ngay khi khởi động thiết bị, màn hình có các chức năng chính là Dialer, Contacts, Browses và Maps và 1 đồng hồ hiển thị giờ hệ thống.
Hình 3.5
Hình 3.3: màn hình đầy đủ chức năng: đây là màn hình chứa đầy đủ các chức năng của G1. Mỗi khi một ứng dụng được tạo ra thì tên của nó sẽ được hiển thị trên màn hình này. Ở đây, ứng dụng MPU sẽ được đặt tên là Login.
3.2.3.2Màn hình Login
Chức năng chính: Đăng nhập vào ứng dụng
Sau khi chọn chức năng Login để vào ứng dụng thì chúng ta sẽ thấy xuất hiện màn hình Login, yêu cầu người dùng điền email và password để đăng nhập vào trang web photoshow.com ( email và password này phải được người dùng lập trước tại trang photoshow.com).
Hình 3.7
Nếu đăng nhập sai thì sẽ có một message thông báo là sai tên đăng nhập hoặc mật khẩu(Invalid Username or Password) và có 2 lựa chọn cho người sử dụng:
• Back to main menu: thoát khỏi ứng dụng,quay trở về màn hình chính
• Login again: đăng nhập lại Giải thích chức năng:
No Item name Type
Max
length Description
1 Email Textbox 40 Email của người dùng 2 Password Passwordbox 32 Mật khẩu của người dùng
3
Save
password Checkbox
N/A
Lưu password hoặc không
4 Exit Button N/A [Exit] button click: Tắt ứng dụng
5 Login Button N/A [Login] button click:
- Dữ liệu thông tin đã được xác nhận _ Nếu thông tin là đúng thì thì gửi yêu cầu tới web service.
6 Back to main menu
Button N/A _Khi người dùng đánh sai mật khẩu (adsbygoogle = window.adsbygoogle || []).push({});
thì có 1 thông báo với 2 lựa chọn • Quay ra màn hình chính 7 Login again Button N/A • Đăng nhập lại
Mô tả thuật toán chức năng đăng nhập: Bắt đầu Đăng nhập thành Sai Đúng Đúng Đăng nhập lại? Sai Thoát Hình 3.8 Username, password
3.2.3.3Màn hình Main
Sau khi đã đăng nhập được vào ứng dụng thì màn hình Main sẽ hiện ra mới các nội dung như trong hình 3.7:
Hình 3.9
Ở đây chỉ có phần PhotoLibrary là hoàn chỉnh còn 2 phần còn lại đang được xây dựng. Khi ở màn hình này, người dùng có 2 lựa chọn:
• Switch account: quay lại màn hình trước để đăng nhập lại với email và password khác
• Exit: thoát hẳn khỏi ứng dụng
Số thứ tự
Tên các thành
phần Kiểu Giải thích
2 Quick Sharing Button
3 Setting Button
4 Switch account Menu [Switch account] click - Quay lại màn hình login
5 Exit Menu [Exit] click: Thoát khỏi ứng dụng và
trở về màn hình chính của G1
Mô tả thuật toán vào thư viện ảnh;
3.2.3.4Màn hình PhotoLibrary
Đây là màn hình danh sách các ảnh có sẵn trong máy với thông tin về tên mỗi bức ảnh bên cạnh hình đã được thu nhỏ. Muốn chọn bức ảnh nào để tải thì người dùng sẽ phải bấm vào ô check bên cạnh mỗi ảnh để đánh dấu. Sau khi đã chọn xong, người dùng chọn Next để sang bước tiếp theo. Nếu không, người dùng có thể chọn Back để quay lại màn hình trước.
Vào chọn ảnh trong thư Sai Đúng Hình 3.10 Bắt đầu Kết thúc lựa chọn
Hiện giao diện PhotoLibrary
Hình 3.11 Giải thích chức năng: Số thứ tự Tên các thành phần Kiểu Giải thích 1 List Photo List (Custom
control) _Để chứa danh sách ảnh
2 Images Image
[Image 1] click:
_ Nếu tick tức là chọn bức ảnh đó để tải lên và ngược lại
3 Next
Menu
[Next] click: Sang màn hình
ReadyToUploadPhoto (adsbygoogle = window.adsbygoogle || []).push({});
4 Back Menu
[Back] click:
- Quay lại màn hình PhotoLibrary Mô tả thuật toán lựa chọn ảnh
3.2.2.5Màn hình ReadyToUploadPhoto
Đây là màn hình chữa những bức ảnh đã được tick từ màn hình trước. Màn hình này để kiểm tra xem người dùng đã chắc chắn chọn những bức ảnh này để tải lên mạng hay chưa, nếu chưa có thì có thể quay lại màn hình trước để chọn lại bằng cách chọn menu Back, còn nếu đã sẵn sàng thì chuyển sang bước tiếp theo bằng cách chọn Next.
Bắt đầu Kết thúc Đúng Hình 3.12 Đã chọn xong? Chọn ảnh Sai
Hình 3.13 Số thứ tự Tên các thành phần Kiểu Giải thích
1 Thumbnails Image Hiển thị ra 4 bức ảnh được chọn trên 1 hàng ngang
2 Next Menu [Next] click: Sang màn hình
ChoosePhotoShow
3 Back Menu [Back] click: Quay lại màn hình
Mô tả thuật toán xác nhận ảnh đã chọn:
3.2.2.6Màn hình ChoosePhotoShow
Màn hình này chứa danh sách các PhotoShow đã được lập từ trước của người dùng. Các photoshow đã được liệt kê theo tên. Bên cạnh tên mỗi photoshow là các option, muốn chọn photoshow nào người dùng chỉ việc tick vào option bên cạnh để chọn.
Xác nhận lại ảnh muốn Đúng Sai Kết thúc Hình 3.14 Bắt đầu
Hiện giao diện PhotoLibrary
Hình 3.15 Số thứ tự Tên các thành phần Kiểu Giải thích
1 Photoshows List item
Đây là danh sách các Album có sẵn đã được tạo trên trang Photoshow.com. Người dùng sẽ chọn 1 Album để đưa những bức ảnh đã chọn và bằng cách tích và option bên cạnh.
2 Upload Menu
[Upload] click: Sang màn hình
UploadPhoto để tải ảnh lên Photoshow.com
3 Back Menu
[Back] click: Quay lại màn hình
ReadyToUpload để xem lại các ảnh đã được chọn
Mô tả thuật toán chọn album ảnh: Sai Kết thúc lựa chọn Bắt đầu Hình 3.16 Lựa chọn album để tải ảnh vào Đồng ý tải vào album đã chọn? Đúng
3.2.2.7Màn hình UploadPhoto
Đây là bước cuối cùng của quá trình tải ảnh.
Màn hình khi đang upload: màn hình này hiện thị tên bức ảnh và số lượng ảnh đã tải được trên tổng số ảnh cần tải. Theo hình 3.15 dưới đây thì bức ảnh đang được tải là bức ảnh có tên cat_5.jpg, số lượng ảnh đã tải được là 1 ảnh trên tổng số ảnh cần tải là 3 ảnh.
Hình 3.17 (adsbygoogle = window.adsbygoogle || []).push({});
Màn hình khi đã tải xong:
Màn hình ở hình 3.16 hiển thị trạng thái tải ảnh khi đã hoàn thành (upload finish). Đây là trường hợp tải ảnh thành công, nghĩa là ảnh đã xuất hiện trong album đã chọn trên trang web Photoshow.com
Tải ảnh bị lỗi
Màn hình ở hình 3.17 hiển thị trang thái tải ảnh bị lỗi, khi đó ảnh không được tải lên web. Nguyên nhân có thể do sự cố mạng chưa được kết nối, hoặc lỗi ở trang web tải lên(photoshow.com). Khi đó người sử dụng có 2 lựa chọn là tiếp tục tải (upload continue) hoặc thoát (Back to Login).
Hình 3.19 Số thứ tự Tên các thành phần Kiểu Giải thích
1 Tên của ảnh hiện
tại Label Tên của ảnh đang tải
bar
4 Message Label Hiện thị khi cần (Có lỗi, thành công) 5 Back to Login Menu Quay lại màn hình Login
6 Upload continue Menu Quay lại màn hình PhotoLibrary để tiếp tục chọn ảnh để tải Mô tả thuật toán tải ảnh:
Bắt đầu Tải ảnh Tiếp tục tải ảnh? Sai Đúng Kết thúc
Hiện giao diện PhotoLibrary
Hiện giao diện Login