Xây dựng giao diện cho ứng dụng chat trên điện thoại Android

1

TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI
VIỆN CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

Bài tập lớn
Tương tác người máy

ĐỀ TÀI:
Xây dựng giao diện cho ứng dụng chat trên điện thoại
Android

Giáo viên hướng dẫn:
TS. Vũ Thị Hương Giang

Sinh viên thực hiện:
Nguyễn Đình Mẫn
Hà Quang Minh
Vũ Thị Phương
Lê Thị Trang
Vũ Thị Uyên
Lớp
HTTT-K52

Hà Nội-tháng 10/2011


2

Mục lục
I. Tổng quan về tương tác người máy 3

1. Khái niệm 3
2. Các nguyên tắc thiết kế giao diện tương tác 4
a. Tính thẩm mỹ 4
b. Tính rõ ràng 4
c. Tính tương thích 4
d. Cấu hình 4
e. Tính nhất quán 5
f. Tính trực tiếp 5
g. Hiệu quả 5
h. Thân thiện 5
j. Bỏ qua 6
k. Khôi phục 6
l. Trách nhiệm 6
m. Đơn giản 6
n. Trong suốt 7
o. Dễ hiểu, dễ học 7
II. Xây dựng hệ tương tác di đông trên Android 7
1. Giới thiêu về Android 7
2. Kiến trúc Android 8
a. Applications 9
b. Application Framwork 9
c. Libraries 10
d. Android Runtime 11
e. Linux Kernel 11
3. Các phương tiện tương tác của điện thoại Android 12
4. Các thành phần hỗ trợ của Android để thiết kế giao diện tương tác 12
5. Thiết kế giao diện phần mềm chat trên điên thoại Android 16
a. Tổng quan hệ thống Chat 16
b. Chat trên điện thoại 17
c. AndroidChat 17

6. Đánh giá 20
7. Tài liệu tham khảo 21
3



I. Tổng quan về tương tác người máy
1. Khái niệm
Tương tác người máy là tập các quá trình, đối thoại và các hành động qua đó người
dùng con người sử dụng và tương các với máy tính
Vai trò của hệ tương tác
Nhiệm vụ của hệ tương tác là tạo ra các hệ thống an toàn và có tính tiện dụng như các
hệ thống chức năng.
Các tiêu chí chính cho tính tiện dụng của hệ tương tác
- Tính dễ học
Tính dễ học là một đặc trưng quan trọng của một hệ tương tác. Nó cho phép người
dùng thiếu kinh nghiệm có thể sử dụng đạt hiệu quả tối đa. Tính dễ học thể hiện ở
các điểm:
o Tính dự đoán
o Tính tổng hợp
o Tính thân thiện
o Tính khái quát
o Tính nhất quán
- Tính mềm dẻo
Tính mềm dẻo liên quan đến nhiều cách mà người dùng và máy trao đổi thông tin
với nhau. Có 5 nguyên tắc thể hiện tính mềm dẻo.
o Đối thoại chủ động
o Đa luồng
o Di trú nhiệm vụ
o Thay thế

o Cá nhân hóa
- Tính vững chắc
Người dùng dùng máy tính nhằm thực hiện một số các mục đích trong công việc
hoặc trong lĩnh vực nhiệm vụ. Tính vững chắc của một tương tác bao trùm các đặc
trưng hỗ trợ việc thực hiện thành công và khẳng định đích. Tính vững chắc thể
hiện ở một số tiêu chí sau:
4

o Tính quan sát
o Tính khôi phục
o Tính đáp ứng
o Tính tương hợp nhiệm vụ
2. Các nguyên tắc thiết kế giao diện tương tác
a. Tính thẩm mỹ
Được thể hiện ở các đặc điểm
 Độ tương phản cao giữa các thành phần trên màn hình
 Nhóm các thành phần có cùng chức năng nhiệm vụ
 Cho phép các biểu diễn 3D
 Sử dụng màu sắc và đồ họa phải đơn giản và hiệu quả
 Một thiết kế có tính thẩm mỹ phải cuốn hút người dùng
b. Tính rõ ràng
Giao diện phải rõ ràng về mặt hiển thị, thiết kế cũng như ngữ nghĩa:
 Các thành phần hiển thị
 Các chức năng
 Các từ và văn bản
c. Tính tương thích
Người sử dung: thiết kế phải thích hợp với nhu cầu người dùng
Nhiệm vụ: thiết kế phải đảm bảo các luồng dữ liệu và chức năng thực hiện đúng
nhiệm vụ đề ra, người dùng không phải cố gắng để thực hiện một nhiệm vụ đề ra.
Sản phẩm: người dùng những hệ thống mới thường là những người dùng của hệ thống

phiên bản cũ vì thế sản phẩm phải được thiết kế sao cho các thói quen mong đợi và sự
hiểu biết của người dùng cũ vân được áp dụng.
d. Cấu hình
Cho phép dễ dàng cá nhân hóa và cung cấp khải niệm cấu hình được
 Nâng cao độ nhạy về mặt điều khiển
 Khuyến khích người dùng tự tìm hiểu
5

e. Tính nhất quán
Một hệ thống phải được nhìn thấy phản ứng thao tác theo cùng một cách trong cùng
một ngữ cảnh.
Cùng một thành phần phải:
 Có cùng diện mạo
 Có cùng tính năng sử dụng
 Hoạt động tương tự
Cùng một hoạt động cùng một kết quả
Chức năng của các thành phần phải cố định
f. Tính trực tiếp
Cung cấp cách thức hoàn thành nhiệm vụ một cách trực tiếp:
 Các phương án hoàn thành tác nhiệm phải được cung cấp.
 Phản ứng của việc tác động lên các thành phần của giao diện phải được hiển
thị.
g. Hiệu quả
- Tối thiểu hóa chuyển động của tay, mắt và các hoạt động điều khiển khác
 Chuyển đổi giữa các điều khiển hệ thống phải mềm mại và dễ dàng
 Các định hướng chỉ dẫn phải ngắn gọn nhất có thể.
 Chuyển động của mắt phải trực diện và liên tục (tránh các di chuyển đột
ngột)
- Dự báo những mong muốn của người dùng và nhu cầu mỗi khi có thể.
h. Thân thiện

 Sử dụng các khái niệmvà ngôn ngữ gần gũi với người dùng
 Giao diện nên tự nhiên, bắt chước những mẫu hành vi của người dùng
i. Mềm dẻo
 Hệ thống phải nhạy với những nhu cầu khác nhau của người dùng, cho phép
thực hiện yêu cầu ở các mức độ với một hiệu quả nào đó dựa trên
– Hiểu biết và kỹ năng của người dùng
– Kinh nghiệm của người dùng
6

– Sở thích cá nhân
– Thói quen
– Điều kiện hiện tại
j. Bỏ qua
 Dung thứ và bỏ qua một số lỗi chung không tránh khỏi của người dùng
 Dự báo lỗi nếu có thể
 Đề phòng những lỗi trầm trọng.
 Mỗi khi có lỗi xuất hiện, đưa thông báo và cách giải quyết
k. Khôi phục
• Một hệ thống phải cho phép
– Hủy bỏ hoặc quay lại một số lệnh, thao tác tại thời điểm trước đó
– Quay lại bước một số trước đó nếu có khó khăn xảy ra.
• Đảm bảo người dùng không bao giờ bị mất kết quả tại trạng thái hiện tại
l. Trách nhiệm
• Hệ thống phải trả lời nhanh những yêu cầu của người dùng
• Cung cấp phản hồi tứcthì đối với mọi hành động của người dùng thông qua
– Hình ảnh
– Văn bản
– Âm thanh.
m. Đơn giản
• Cung cấp giao diện đơn giản nhất có thể.

• Một số cách thức để tạo ra sự đơn giản:
– Sử dụng các menu dạng ẩn, chỉ xuất hiện khi cần thiết.
– Hiển thị các chức năng chung và cần thiết trước tiên.
– Cung cấp các mặc định.
– Tạo các hành động chung, đơn giản.
7

n. Trong suốt
• Cho phép người dùng tập trung vào nhiệm vụ, tránh tập trung vào các cơ chế,
cách thức hoạt động của giao diện.
– Các công việc và việc nhắc nhở các công việc trong máy tính phải trong suốt
đối với người dùng.
• Không được bắt người dùng nghĩ về các chi tiết kỹ thuật của hệ thống. Các suy
nghĩ phải hướng đến nhiệm vụ.
o. Dễ hiểu, dễ học
• Một hệ thống phải dễ học và dễ hiểu. Người dùng phải biết:
– What to look at
– What to do
– When to do it
– Where to do it
– Why to do it
– How to do it
• Chuỗi hành động, đáp ứng, trình diễn và thông tin phải theo trật tự có khả năng
dự đoán được.
II. Xây dựng hệ tương tác di đông trên Android
1. Giới thiêu về Android
Android là hệ điều hành điện thoại di động mở nguồn mở miễn phí do Google
phát triển dựa trên nền tảng của Linux. Bất kỳ một hãng sản xuất phần cứng nào cũng
đều có thể tự do sử dụng hệ điều hành Android cho thiếtbị của mình, miễn là các thiết
bị ấy đáp ứng được các tiêu chuẩn cơ bản do Google đặt ra (có cảm ứngchạm, GPS,

3G, )(Xem thêm: Android Compatibility Definition Document)
Các nhà sản xuất có thể tự do thay đổi phiên bản Android trên máy của mình
một cách tự do mà không cần phải xin phép hay trả bất kì khoản phí nào nhưngphải
đảm bảo tính tương thích ngược (backward compatibility) của phiên bản chế riêng đó.
Android là nền tảng cho thiết bị di động bao gồm một hệ điều hành, midware
và một số ứng dụng chủ đạo. Bộ công cụ Android SDK cung cấp các công cụ và bộ
8

thư viên các hàm API cần thiết để phát triển ứng dụng cho nền tảng Android sử dụng
ngôn ngữ lập trình java.
Những tính năng mà nền tảng Android hổ trợ:
Application framework: Cho phép tái sử dụng và thay thế các thành phần sẳn
có của Android.
Dalvik virtual macine: Máy ảo java được tối ưu hóa cho thiết bị di động.
Intergrated browser: Trình duyệt web tích hợp được xây dựng dựa trên
WebKit engine.
Optimized graphics: Hổ trợ bộ thư viện 2D và 3D dự vào đặc tả OpenGL ES
1.0.
SQLite: DBMS dùng để lưu trữ dữ liệu có cấu trúc.
Hổ trở các định dạng media phổ biến như: MPEG4, H.264, MP3, AAC, ARM,
JPG, PNG, GIF.
Hổ trợ thoại trên nền tảng GSM (Phụ thuộc vài phần cứng thiết bị).
Bluetooth, EDGE, 3G và WiFi (Phụ thuộc vài phần cứng thiết bị).
Camera, GPS, la bàn và cảm biến (Phụ thuộc vài phần cứng thiết bị).
Bộ công cụ phát triển ứng dụng mạnh mẽ.
2. Kiến trúc Android
Lược đồ sau thể hiện các thành phần của hệ điều hành Android:
9

Hình 1 - Mô hình kiến trúc nền tảng Android
a. Applications
Hệ điều hành Android tích hợp sẳn một số ứng dụng cơ bản như email client,
SMS, lịch điện tử, bản đồ, trình duyệt web, sổ liên lạc và một số ứng dụng khác.
Ngoài ra tầng này cũng chính là tầng chứa các ứng dụng được phát triển bằng ngôn
ngữ Java.
b. Application Framwork
Tầng này của hệ điều hành Android cung cấp một nền tảng phát triển ứng dụng
mở qua đó cho phép nhà phát triển ứng dụng có khả năng tạo ra các ứng dụng vô cùng
sáng tạo và phong phú. Các nhà phát triển ứng dụng được tự do sử dụng các tính năng
cao cấp của thiết bị phần cứng như: thông tin định vị địa lý, khả năng chạy dịch vụ
dưới nền, thiết lập đồng hồ báo thức, thêm notification vào status bar của màn hình
thiết bị…
Người phát triển ứng dụng được phép sử dụng đầy đủ bộ API được dùng trong
các ứng dụng tích hợp sẳn của Android. Kiến trúc ứng dụng của Android được thiết kế
nhằm mục đích đơn giản hóa việc tái sử dụng các component. Qua đó bất kì ứng dụng
nào cũng có thể công bố các tính năng mà nó muốn chia sẻ cho các ứng dụng khác
10

(VD: Ứng dụng email có muốn các ứng dụng khác có thể sử dụng tính năng gởi mail
của nó). Phương pháp tương tự cho phép các thành phần có thể được thay thế bởi
người sử dụng.
Tầng này bao gồm một tập các services và thành phần sau:
Một tập phong phú và có thể mở rộng bao gồm các đối tượng View được dùng
để xây dựng ứng dụng như: list, grid, text box, button và thậm chí là một trình duyệt
web có thể nhúng vào ứng dụng.
Content Provider: Cho phép các ứng dụng có thể truy xuất dữ liệu từ các ứng
dụng khác hoặc chia sẽ dữ liệu của chúng.
Resource Manager: Cung cấp khả năng truy xuất các tài nguyên non-code
như hình ảnh hoặc file layout.

Notification Manager: Cung cấp khả năng hiển thị custom alert trên thanh
status bar.
Activity Manager: Giúp quản lý vòng đời của một ứng dụng.
c. Libraries
Hệ điều hành Android bao gồm một tập các bộ thư viện C/C++ được sử dụng
bởi nhiều thành phần của Android system. Những tính năng này được cung cấp cho
các lập trình viên thông qua bộ framework của Android. Dưới đây là một số thư viện
cốt lõi:
System C library: một thể hiện được xây dựng từ BSD của bộ thư viện hệ
thống C chuẩn (libc), được điều chỉnh để tối ưu hóa cho các thiết bị chạy trên nền
Linux.
Media libraries: Bộ thư viện hổ trợ trình diễn và ghi các định dạng âm than và
hình ảnh phổ biến.
Surface manager: Quản lý hiển thị nội dung 2D và 3D.
LibWebCore: Một web browser engine hiện đại được sử dụng trong trình
duyệt của Android lần trong trình duyệt nhúng web view được sử dụng trong ứng
dụng.
SGL: Engine hổ trợ đồ họa 2D.
3D libraries: Một thể hiện được xây dựng dựa trên các APIs của OpenGL ES
1.0. Những thư viện này sử dụng các tăng tốc 3D bằng phần cứng lẫn phần mềm để
tối ưu hóa hiển thị 3D.
FreeType: Bitmap and vector font rendering.
11

SQLite: Một DBMS nhỏ gọn và mạnh mẽ.
d. Android Runtime
Hệ điều hành Android tích hợp sẳn một tập hợp các thư viện cốt lõi cung cấp
hầu hết các chức năng có sẵn trong các thư viện lõi của ngôn ngữ lập trình Java. Mọi
ứng dụng của Android chạy trên một tiến trình của riêng nó cùng với một thể hiện của
máy ảo Dalvik. Máy ảo Dalvik thực tế là một biến thể của máy ảo Java được sửa đổi,

bổ sung các công nghệ đặc trưng của thiết bị di động. Nó được xây dựng với mục đích
làm cho các thiết bị di động có thể chạy nhiều máy ảo một cách hiệu quả. Trước khi
thực thi, bất kì ứng dụng Android nào cũng được convert thành file thực thi với định
dạng nén Dalvik Executable (.dex). Định dạng này được thiết kế để phù hợp với các
thiết bị hạn chế về bộ nhớ cũng như tốc độ xử lý. Ngoài ra máy ảo Dalvik sử dụng bộ
nhân Linux để cung cấp các tính năng như thread, low-level memory management.
e. Linux Kernel
Hệ điều hành Android được xây dựng trên bộ nhân Linux 2.6 cho những dịch
vụ hệ thống cốt lõi như: security, memory management, process management,
network stack, driver model. Bộ nhân này làm nhiệm vụ như một lớp trung gian kết
nối phần cứng thiết bị và phần ứng dụng.
Dưới đây là mô hinh hợp tác giữa máy ảo Dalvik và Navite code:

Hình 2 - Mô hình hợp tác giữa máy ảo Dalvik và Navite code
JNI: Java Native Interface (Tương tự khái niệm Application Programming
Interface).
Java Native Interface: là một bộ framework cho phép mã lệnh viết bằng Java
chạy trên máy ảo java có thể gọi hoặc được gọi bởi một ứng dụng viết bằng native
12

code (Ứng dụng được viết cho một phần cứng cụ thể và trên một hệ điều hành cụ thể)
hoặc những bộ thư viện viết bằng C, C++ hoặc Assembly.
Bằng cách sử dụng JNI, Android cho phép các ứng dụng chạy trên máy ảo
Dalvik có thể sử dụng những phương thức được viết bằng các ngôn ngữ cấp thấp như:
C, C++, Assembly. Qua đó các nhà phát triển ứng dụng có thể xây dựng ứng dụng dựa
trên các bộ thư viện viết bằng C, C++, Assembly nhằm tăng tốc độ thực thi của ứng
dụng hoặc sử dụng những tính năng mức thấp mà ngôn ngữ Java không hổ trợ. Tuy
nhiên người phát triển ứng dụng cần phải cân nhắc sự gia tăng độ phức tạp của ứng
dụng khi quyết định sử dụng các bộ thư viện này.
3. Các phương tiện tương tác của điện thoại Android

Các thiết bị thu thập thông tin:
 Bàn phím: thực hiện các chức năng nhập văn bản, và nhóm nút điều khiển
 Mic: thu nhận các thông tin dữ liệu âm thanh
 Camera: thu nhận các thông tin dữ liệu hình ảnh
 Màn hình cảm ứng: với sự phát triển về công nghệ này giúp việc giao tiếp
vs máy điện thoại trở nên vô cùng trực quan và sinh động. Cũng giúp cho
các phần mềm trên điện thoại Android có thể sư dụng được dễ dàng.
Các thiết bị xuất thông tin:
 Loa: phát ra các dữ liệu âm thanh
 Màn hình: hiện lên các dữ liệu hình ảnh, text,…
4. Các thành phần hỗ trợ của Android để thiết kế giao diện tương tác
Một ứng dụng Android gồm các thành phần:
 Activity
 Intent
 Service
 Content Provider
 View
 Lưu trữ dữ liệu
Trong đó View là thành phần cơ bản để xây dựng giao diện người dùng cho 1
ứng dụng Android. View là 1 lớp căn bản của widgets (widgets được dùng để tạo các
nút nhấn, text fields, ).
Lớp con ViewGroup là lớp căn bản của layouts, có thể coi như 1 cái hộp vô
hình chứa nhiều Views hay ViewGroups khác và xác định các thuộc tính layout.
13

Sử dụng Views:
Trong 1 cửa sổ màn hình, mọi views đều được sắp xếp theo thứ tự trên 1 cây
trong 1 hay nhiều file XML nằm trong res/layout.
Khi tạo 1 cây chứa các views, người lập trình cần xác định những giá trị sau:
Các thuộc tính - Chẳng hạn định xem 1 TextView sẽ hiển thị chữ gì. Mỗi view

có những thuộc tính và phương thức khác nhau.
Mức độ tập trung (Focus) - Thay đổi sự tập trung tuỳ theo input của người
dùng với requestFocus().
Listeners - Định các listeners để có hành động khi 1 sự kiện gì đó xảy ra với
setOnFocusChangeListener(View.OnFocusChangeListener)
Nhìn thấy hay không - với setVisibility(int)

Hình 3 - Ví dụ 1 cây Views
Một số Views thường dùng:
TextView: Hiển thị 1 khung text và cho phép người dùng thay đổi.
ImageView: Hiển thị 1 hình ảnh xác định từ file tài nguyên hay qua 1 content
provider.
Button: Hiển thị 1 nút nhấn.
Checkbox: Hiển thị 1 nút nhấn với 2 trạng thái khác nhau.
KeyboardView: Hiển thị bàn phím ảo để nhập liệu.
WebView: Hiển thị các trang web bằng Webkit.
Một số ViewGroups thường dùng:
LinearLayout: Các view được xếp theo 1 hàng hay 1 cột duy nhất.
14


Hình 4 - LinearLayout
AbsoluteLayout: Cho phép xác định chính xác vị trí của từng view.

Hình 5 - AbsoluteLayout
TableLayout: Sắp xếp các view theo các cột và hàng. Mỗi hàng có thể có
nhiều view, mà mỗi view sẽ tạo nên 1 ô.
15

Hình 6 - TableLayout
RelativeLayout: Cho phép xác định vị trí các view theo mối quan hệ giữa
chúng (VD; canh trái, phải, )

Hình 7 - RelativeLayout
FrameLayout: Là 1 placeholder cho phép đặt lên đó 1 view duy nhất. View
đặt lên FrameLayout luôn được canh lề trái phía trên.
16


Hình 8 - FrameLayout
ScrollView: Là 1 FrameLayout đặc biệt cho phép trượt (scroll) 1 danh sách dài
hơn kích thước màn hình.

Hình 9 - ScrollView
5. Thiết kế giao diện phần mềm chat trên điên thoại Android
a. Tổng quan hệ thống Chat
Trò chuyện trực tuyến hay còn gọi là chat, ngày nay đã trở thành một trong
những hoạt động không thể thiếu của người dùng máy tính. Nó giúp kết nối
những con người cách nhau rất xa về mặt địa lý nhưng vẫn có thể cùng trò
chuyện, chia sẻ, tâm tình và cũng để cho các doanh nghiệp tổ chức hội thảo, họp
hành qua mạng Internet.
17

Để có thể chat, người dùng phải sử dụng các phần mềm chat (còn gọi là phần
mềm nhắn tin nhanh - IM viết tắt của Instant Messenger). Nếu chọn đúng một
chương trình chat hợp với nhu cầu của mình, bạn sẽ tiết kiệm được rất nhiều
thời gian, đồng thời làm được rất nhiều việc có ích.
Thông thường một phần mềm chat (IM) cần có các chức năng chính:
 Tạo tài khoản sử dụng

 Login
 Xem danh sách bạn bè
 Trò chuyện (chat)
 Thêm bạn vào danh sách bạn
b. Chat trên điện thoại
a) Tìm hiểu yêu cầu người dùng
 Một phần mềm chat chạy trên điện thoại
 Đơn giản dễ sử dụng
 Miễn phí
 Có khả năng trao đổi dữ diệu và hình ảnh
 Hỗ trợ Video call
 Có khả năng kết nối với tài khoản Facebook
 Trợ giúp Check mail
b) Phân tích yêu cầu người dùng
Với các yêu cầu đầu tiên, thứ hai và thứ ba: đây là các yêu cầu cơ bản và phải
thực hiện được.
Với các yêu cầu còn lại: đây đều là các tiện ích rất tốt cho một phàn mềm chat.
Tuy nhiên do điều kiện về thời gian và tiền bạc của nhóm phát triển thì nó sẽ rất
khó để đáp ứng được.
Vì vậy phần mềm sẽ chỉ thực hiện những chức năng cơ bản của một chương
trình chat (IM).
c. AndroidChat
Tổng quan:
 Hệ điều hành : Android 2.3.3 trở lên
 Công cụ : Eclipse
18

 Ngôn ngữ : Java
Giao diện Đăng nhập:

Giao diện Tạo tài khoản sử dụng mới:



19

Giao diện Xem danh sách bạn bè:

Giao diện Trò chuyện:




20

Giao diện Thêm bạn vào danh sách bạn:

Giao diện Menu


6. Đánh giá
Tính thẩm mỹ: có giao diện với mầu sắc khá hài hòa dịu mắt, đơn giản và
hiệu quả. Tuy nhiên cũng có phần hơi đơn điệu.
21

Tính rõ ràng: các giao diện đều rõ ràng về chức năng cũng như văn bản.
Tính tương thích: tương thích với tất cả các máy điện thoại Android 2.3.3 trở
lên, và hoàn toàn dễ sử dụng.
Cấu hình: chưa cho phép người dùng cá nhân hóa.
Tính nhất quán: tốt

Tính trực tiếp: tốt
Hiệu quả: trong mức chấp nhận được
Thân thiện: sử dụng tiếng Anh đơn giản, thao tác dễ dàng
Tính mềm dẻo: hệ tương tác còn cững nhắc chưa đủ mềm dẻo
Bỏ qua: có thông báo khi người dùng mắc lỗi và cách giải quyết
Khôi phục: cho phép người dùng tiến tới hoặc lùi lại trong một số quá trình
Trách nhiệm: phản hồi nhanh chóng các yêu cầu của người dùng
Đơn giản: giao diện đơn giản dễ nhìn
Trong suốt: tốt
Dễ hiểu dễ đọc: tốt, có gợi ý giúp dễ dàng hiểu

7. Tài liệu tham khảo
1.
2. Slide bài giảng trên lớp
3. google.com
4.