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

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

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

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

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

Đượ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

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

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

 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

– 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

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ộ

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

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:

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

(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

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

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

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

Lớp con ViewGroup là lớp căn bản của layouts, có thể coi như 1 cái hộp vô

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

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 ô

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

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

Để 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

 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

 Ngôn ngữ : Java

Giao diện Đăng nhập:

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

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

Giao diện Trò chuyện:

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

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

2 Slide bài giảng trên lớp

3 google.com