Tìm hiểu và thiết kế giao diện tương tác trên iOS. Xây dựng ứng dụng Metronome hỗ trợ người học nhạc đếm nhịp

Trường Đại học Bách Khoa Hà Nội Viện Công nghệ Thông tin và Truyền thông HCI04 – BTL05 BÁO CÁO BÀI TẬP LỚN Môn: Tương tác Người – Máy Đề tài: Tìm hiểu và thiết kế giao diện tương tác trên iOS. Xây dựng ứng dụng Metronome hỗ trợ người học nhạc đếm nhịp Giảng viên hướng dẫn: TS. Vũ Thị Hương Giang Nhóm sinh viên thực hiện: Nguyễn Văn Minh () 20071970 HTTT – K52 Mai Ngọc Dương 20070009 HTTT – K52 Dương Mạnh Linh 20071697 HTTT – K52 Vũ Văn Thiện 20072737 HTTT – K52 Lê Quang Vịnh 20073503 HTTT – K52 Hà Nội, tháng 10 năm 2011 MỤC LỤC I. Giới thiệu chung 3 1. Sơ lược về Hệ tương tác và tương tác Người – Máy 3 2. Nội dung của đề tài 3 3. Mục đích của đề tài 3 II. Những vấn đề khi xây dựng giao diện tương tác trên môi trường iOS 3 1. Sơ lược về iOS 3 2. Lập trình trên iOS 3 III. Xây dựng giao diện tương tác trên iOS Ứng dụng Metronome 3 1. Giới thiệu về Metronome 3 2. Đặc tả yêu cầu và phân tích nhiệm vụ 3 2.1. Điều chỉnh mức Tempo 3 2.2. Điều chỉnh nhịp điệu (Meter) luyện tập 3 2.3. Lưu lại cấu hình hiện tại của Metronome 3 2.4. Load lại những cấu hình đã Save 3 2.5. Điều chỉnh âm lượng của ứng dụng 3 2.6. Flash màn hình trong quá trình luyện tập 3 2.7. Bậttắt trợ giúp 3 2.8. Bậttắt chức năng Autolock screen của Device 3 2.9. Thay đổi SubDivision 3 2.10. Khóa điều khiển khi đang tập luyện. 3 2.11. Chỉnh Tempo theo nhịp nhập vào của người dùng. 3 3. Thiết kế giao diện tương tác cho hệ thống. 3 3.1. Giao diện cho chức năng điều chỉnh mức Tempo 3 3.2. Giao diện cho chức năng thay đổi nhịp điệu Meter 3 3.3. Giao diện cho chức năng SaveList 3 3.4. Giao diện chức năng Load các cấu hình đã save 3 3.5. Giao diện cho chức năng bậttắt trợ giúp 3 3.6. Giao diện cho chức năng thay đổi âm lượng 3 3.7. Giao diện cho chức năng Flash Screen 3 3.8. Giao diện các chức năng khác 3 4. Đánh giá 3 IV. Kết luận 3 V. Phân công công việc 3 VI. Tài liệu tham khảo 3

Trường Đại học Bách Khoa Hà Nội Viện Công nghệ Thông tin và Truyền thông

HCI04 – BTL05 BÁO CÁO BÀI TẬP LỚN

Môn: Tương tác Người – Máy

Đề tài: Tìm hiểu và thiết kế giao diện tương tác trên iOS Xây dựng

Hà Nội, tháng 10 năm 2011

MỤC LỤC

I Giới thiệu chung 3

1 Sơ lược về Hệ tương tác và tương tác Người – Máy 3

2 Nội dung của đề tài 3

3 Mục đích của đề tài 3

II Những vấn đề khi xây dựng giao diện tương tác trên môi trường iOS 3

1 Sơ lược về iOS 3

2 Lập trình trên iOS 3

III Xây dựng giao diện tương tác trên iOS - Ứng dụng Metronome 3

1 Giới thiệu về Metronome 3

2 Đặc tả yêu cầu và phân tích nhiệm vụ 3

2.1 Điều chỉnh mức Tempo 3

2.2 Điều chỉnh nhịp điệu (Meter) luyện tập 3

2.3 Lưu lại cấu hình hiện tại của Metronome 3

2.4 Load lại những cấu hình đã Save 3

2.5 Điều chỉnh âm lượng của ứng dụng 3

2.6 Flash màn hình trong quá trình luyện tập 3

2.7 Bật/tắt trợ giúp 3

2.8 Bật/tắt chức năng Auto-lock screen của Device 3

2.9 Thay đổi Sub-Division 3

2.10 Khóa điều khiển khi đang tập luyện 3

2.11 Chỉnh Tempo theo nhịp nhập vào của người dùng 3

3 Thiết kế giao diện tương tác cho hệ thống 3

3.1 Giao diện cho chức năng điều chỉnh mức Tempo 3

3.2 Giao diện cho chức năng thay đổi nhịp điệu Meter 3

3.3 Giao diện cho chức năng SaveList 3

3.4 Giao diện chức năng Load các cấu hình đã save 3

3.5 Giao diện cho chức năng bật/tắt trợ giúp 3

3.6 Giao diện cho chức năng thay đổi âm lượng 3

3.7 Giao diện cho chức năng Flash Screen 3

3.8 Giao diện các chức năng khác 3

4 Đánh giá 3

IV Kết luận 3

V Phân công công việc 3

VI Tài liệu tham khảo 3

I Giới thiệu chung

1 Sơ lược về Hệ tương tác và tương tác Người – Máy

Hệ tương tác là hệ thống chấp nhận đầu vào từ người sử dụng và cung cấp đầu ra(một cách rõ ràng) cho người sử dụng

Tương tác Người - Máy hay còn gọi là giao tiếp Người – Máy là một lĩnh vực liênquan đến thiết kế, đánh giá và cài đặt hệ thống máy tính tương tác cho con người sửdụng và nghiên cứu các hiện tượng xảy ra trên đó

Việc thiết kế một giao diện tốt cho một hệ thống không phải là việc dễ dàng.Người sử dụng luôn đòi hỏi hệ thống phải đáp ứng được những gì mà họ mong đợi.Nếu chỉ sử dụng kiến thức về phân tích thiết kế và lập trình, chúng ta sẽ vẫn chưa thểđạt được mục đích mong muốn Do đó, đặt ra nhu cầu cần phải nghiên cứu về conngười – máy tính – kĩ thuật tương tác để hỗ trợ phát triển được một giao diện người sửdụng với tính sử dụng cao

HCI liên quan đến nhiều lĩnh vực khác nhau Trong đó, các lĩnh vực chính có thể

kể đến như: Khoa học máy tính, Trí tuệ nhân tạo, Ngôn ngữ học, Nghệ thuật, Thiết

kế, Kỹ nghệ,… Nhận rõ tầm quan trọng của lĩnh vực HCI như vậy, từ cuối những năm

80, nhiều quốc gia trên thế giới như Anh, Mỹ, Nhật,… đã hình thành nhiều dự ánnghiên cứu về vấn đề này

Nội dung nghiên cứu của tương tác người máy bao gồm:

 Hiểu các đặc điểm cơ bản của con người khi tương tác với máy tính

 Phân tích những gì con người sẽ thực hiện bằng máy tính và giao diện của chúng,hiểu rõ các nhiệm vụ và yêu cầu của người dung

 Xác định giao diện phải hoạt động thế nào với người sử dụng

 Thiết kế giao diện máy tính phù hợp với mục đích, đặc điểm của con người.

 Thiết kế các công cụ giúp các nhà thiết kế để xây dựng giao diện tốt hơn

 Đánh giá các tính chất của tương tác Người – Máy và tác động của hệ thống vớicon người

Khi thiết kế một hệ tương tác, các yếu tố chính cần quan tâm đến là chi phí, tínhtiện dụng của hệ thống, độ tin cậy, khả năng tương thích và được xã hội chấp nhận

2 Nội dung của đề tài

Như đã trình bày ở trên, xây dựng một ứng dụng chạy được là chưa đủ Ngày nay,yêu cầu của người dùng không chỉ dung lại ở đó, mà hệ thống cần thỏa mãn nhiều tínhchất khác nữa: giao diện tiện dụng, dễ dùng, dễ nắm bắt, tạo sự thích thú,…

Nội dung đề tài nghiên cứu của nhóm là:

 Tìm hiểu lý thuyết về hệ tương tác, tương tác Người – Máy

 Tìm hiểu về công nghệ xây dựng giao diện tương tác trên môi trường iOS: iPod,iPhone, iPad của Apple

 Xây dựng một giao diện tương tác cụ thể trên môi trường iOS Ở đây, nhóm thựchiện chọn việc cài đặt ứng dụng Metronome hỗ trợ cho những người học nhạc trongviệc đếm nhịp để demo

 Từ việc xây dựng ứng dụng Metronome trên iDevice và kinh nghiệm xây dựngứng dụng trên PC hay các thiết bị mobile khác, so sánh sự khác nhau khi thiết kế giaodiện tương tác

3 Mục đích của đề tài

Với việc học phân tích thiết kế hệ thống thông tin và kĩ thuật lập trình từ nhữngnăm trước, việc xây dựng một ứng dụng trên Mobile không còn là vấn đề quá khó với

sinh viên Tuy nhiên, để xây dựng một ứng dụng thỏa mãn những tiêu chí đề ra khihọc môn tương tác Người – Máy lại không phải dễ dàng

Vì vậy, chúng em thực hiện đề tài này với mục đích áp dụng những gì đã học củamôn học vào trong thực tế, xây dựng thử nghiệm một ứng dụng nhằm kiểm tra nhữngtính chất của một hệ tương tác trên thiết bị di động

Trong quá trình thực hiện đề tài, nhóm thực hiện không tránh khỏi những thiếu sót.Mong nhận được góp ý của cô giáo và các bạn!

II Những vấn đề khi xây dựng giao diện tương tác

trên môi trường iOS

Ngày nay, với sự bùng nổ của công nghệ thông tin, các thiết bị di động cũng pháttriển hết sức mạnh mẽ Người dùng không chỉ cần một chiếc điện thoại để nghe, gọi,nhắn tin nữa Thay vào đó, điện thoại di động có thể làm được nhiều hơn thế, thay thếcho nhiều thiết bị cồng kềnh khác Không chỉ phát triển về kiểu dáng, cấu hình màcòn cả về ứng dụng Viết ứng dụng mobile đang là một lĩnh vực đầy tiềm năng củangành Công nghệ thông tin Lập trình iOS là một trong những nghề đang lên hiện nay

1 Sơ lược về iOS

iOS là hệ điều hành trên các thiết bị di động của Apple Ban đầu, hệ điều hành nàychỉ được phát triển để chạy trên iPhone, nhưng sau đó nó đã được mở rộng để chạytrên các thiết bị khác của Apple như iPod Touch, iPad và Apple TV Tính đến31/5/2011, kho ứng dụng AppStore của Apple đã có khoảng 500000 ứng dụng iOS(theo “Apple Introduces New iPod touch” Apple Press Release) và được tải về tổngcộng khoảng 15 tỷ lần Trong quý 4 năm 2010, khoảng 26% smart phone chạy hệ điềuhành iOS, sau hệ điều hành Android của Google và Symbian của Nokia (“Google’sAndroid becomes the world’s leading smart phone platform” Canalys)

iOS được giới thiệu lần đầu tại Hội nghị và Triển lãm Macworld diễn ra tháng 1năm 2007 và được phát hành tháng 9 năm đó Khi đó, nó chỉ đơn giản là “iPhone chạy

OS X” mà chưa có tên và không hỗ trợ ứng dụng của bên thứ ba Tháng 3/2008,Apple phát hành bản dùng thử đầu tiên với một cái tên mới cho hệ điều hành này, đó

là “iPhone OS” Tháng 6 năm 2010, Apple đổi tên iPhone OS thành iOS

Giao diện người dùng của iOS dựa trên cơ sở thao tác bằng tay Người dùng có thểtương tác với hệ điều hành này thông qua rất nhiều tác động bằng tay trên màn hìnhcảm ứng của các thiết bị iDevice

2 Lập trình trên iOS

Những người đã quen với hệ điều hành Windows và làm việc trên nền Windowsrất khó để thay đổi thói quen sử dụng một hệ điều hành khác Tuy nhiên, chỉ cần bỏmột thời gian ngắn chịu khó làm quen với cái mới thì ắt hẳn sẽ thấy nhiều điều thú vị

mà Windows không có Ví dụ, khi chuyển từ Windows sang MAC OS, bạn sẽ thấyMAC chẳng có gì hay ho và khó dùng

Tất nhiên cũng tùy vào tính chất công việc mà người ta chọn hệ điều hành nào chophù hợp Ở đây, công việc của chúng ta là lập trình ứng dụng trên iPhone nên MAC

OS là một trong số các yếu tố cần phải có Ngoài ra, để lập trình ứng dụng iPhone,

bạn cần phải có một bộ iPhone SDK do Apple cung cấp và một bộ xCode cùng phiênbản dùng để coding và kéo thả giao diện.

iPhone SDK và xCode có thể dễ dàng download tại trang web của Apple CònMAC OS thì tốt nhất là mua đĩa dành cho PC Việc cài đặt MAC OS trên PC thật sựkhông hề dễ dàng vì mỗi máy PC có một dòng MAC OS riêng được hack để có thểlàm việc trên nền phần cứng tương ứng

Ngôn ngữ lập trình ứng dụng trên iPhone là Objective-C Đây là một ngôn ngữ lậptrình hướng đối tượng Apple đã phát triển kế thừa trình biên dịch C và tạo nên nềnbiên dịch mới cho Objective-C Vì vậy mà trình biên dịch Objective-C có thể biêndịch được cả ngôn ngữ C/C++ Trong lập trình iPhone, bạn có thể viết cả 3 ngôn ngữ

đó trong cùng một Application

Objective-C là ngôn ngữ lập trình đã xuất hiện từ rất lâu, nó được thiết kế và phát triển từ năm 1980 Hiện tại, Objective-C lại trở nên phổ biến vì nó được Apple chọn làm ngôn ngữ lập trình cho hệ thống Mac và iPhone.

Objective-C được thiết kế bởi Brad Cox khi ông làm việc cho công ty Stepstone vào đầu những năm 1980 Objective-C được thiết kế để phục vụ mục đích lập trình hướng đối tượng Nó hoạt động giống như là một tập hợp các thành phần mở rộng rất mạnh mẽ của ngôn ngữ C Objective-C kết hợp các đặc điểm ưu tú nhất của C và ngôn ngữ SmallTalk Objective-C khá đơn giản để học và có đầy đủ các khả năng của một ngôn ngữ lập trình hướng đối tượng

Objective-C đơn giản và nhỏ gọn nhưng lại là một thành phần mở rộng rất mạnh của ngôn ngữ chuẩn ANSI C Objective-C cung cấp đầy đủ các khả năng lập trình hướng đối tượng nhưng lại được thực thi theo cách khá đơn giản và dễ dàng

Hầu hết các ngôn ngữ lập trình hướng đối tượng cung cấp:

Một thư viện các Objects

Các công cụ phát triển cần thiết

Hỗ trợ hướng đối tượng và các thư viện liên quan

Objective-C cũng cung cấp đầy đủ các thành phần trên Bạn có thể sử dụng Objective-C để phát triển một phần mềm hoàn thiện Apple đã chọn Objective-C làmngôn ngữ lập trình chính cho hệ thống máy Mac và iPhone

Là ngôn ngữ hướng đối tượng nên Objective-C giải quyết các vấn đề lập trình dựa trên khái niệm các Object Nó bao gồm 3 phần:

Có hai cách thức cơ bản để xây dựng ứng dụng tương tác trên iOS, đó là sử dụng code đơn thuần hoặc dùng Interface Builder để kéo thả Với việc dùng Interface Builder, mọi việc trở nên nhanh chóng và dễ dàng với những ứng dụng không quá cầu kỳ Tuy nhiên, việc sử dụng code thuần sẽ giúp cho việc điều khiển truy nhập vào

ra, việc cá nhân hóa giao diện sẽ chủ động hơn

Ngoài ra, iOS cũng hỗ trợ nhiều framework giúp lập trình viên dễ dàng hơn trong việcthiết kế giao diện trong ứng dụng Tiêu biểu như Cocos2D, Unity, Box2D,

Tóm lại Objective-C là:

- Thành phần mở rộng của ngôn ngữ lập trình C

- Là ngôn ngữ lập trình hướng đối tượng đơn giản nhưng mạnh mẽ

- Là ngôn ngữ được Apple sử dụng để phát triển các ứng dụng cho hệ thống máy Mac

và iPhone

III Xây dựng giao diện tương tác trên iOS - Ứng

dụng Metronome

1 Giới thiệu về Metronome

Metronome (máy đánh nhịp) là một dụng cụ không thể thiếu giúp người học nhạctrong quá trình luyện tập nhạc cụ Nó hỗ trợ tăng khả năng chơi chính xác cũng nhưgiữ ổn định được nhịp sinh lý cho người học nhạc Những người mới chơi nhạc nên

sử dụng Metronome ngay từ những bài tập đầu tiên Các nhạc sỹ sử dụng Metronomelàm công cụ để điều chỉnh nhịp độ bài hát, bằng cách điều chỉnh nhịp độ củaMetronome (Tempo)

Máy đánh nhịp Metronome chạy theo tần số chính là số Beat trên một phút(BPM) Các khái niệm cơ bản được sử dụng trên Metronome bao gồm: Tempo (tốc độcủa Metronome, tính bằng số Beat trên một phút), Meter (nhịp điệu khi luyện tập.VD: 3/4, 3/8, 6/8, 2/4,…), Sub Division (thể hiện của một beat khi Metronome chạy)

Trong lịch sử, có các loại Metronome phổ biến sau đây:

 Metronome cơ: sử dụng quả nặng để điều chỉnh Tempo.

 Metronome điện: chính xác hơn so với Metronome cơ Thường có nút vặn để điều

chỉnh Tempo

 Metronome Software: các ứng dụng Metronome chạy trên các thiết bị như máy

tính, mobile Tính tiện dụng cao, giao diện đẹp mắt và cũng đảm bảo độ chính xáccao

Các mức BPM được phân thành các thang được quy chuẩn quốc tế Thang đo phổbiến của một Metronome bao gồm:

2 Đặc tả yêu cầu và phân tích nhiệm vụ

Những yêu cầu đặt ra đối với ứng dụng Metronome trên iPhone:

 Chính xác: một Metronome dùng được cần phải chạy chính xác nhịp, tốc độ Đây

là yêu cầu quan trọng nhất với những người trong lĩnh vực âm nhạc

 Ổn định: yêu cầu đặt ra với Metronome là phải chạy ổn định trong một thời gian

dài để thỏa mãn nhu cầu tập luyện lâu của người dùng

 Giao diện đẹp mắt: đây là yêu cầu cần thiết phải thỏa mãn với những ứng dụng

iPhone

 Dễ dùng: với người lần đầu tiên sử dụng ứng dụng, Metronome phải đảm bảo

người dùng đó có thể sử dụng được nhanh chóng Tất nhiên đối với người có kiếnthức về âm nhạc, còn đối với người không có nhiều hiểu biết về nhạc thì cần phải tìmhiểu thêm các kiến thức khác liên quan

 Cung cấp đầy đủ chức năng cho người sử dụng: trước hết là những chức năng cơ

bản, sau đó là các tính năng mở rộng, tiện dụng cho người dùng

 Sử dụng thuận tiện: trước hết, việc sử dụng Metronome được cài đặt trên iPhone

đã mang tính tiện dụng cho người sử dụng Thêm nữa, yêu cầu với ứng dụng cần phảiđảm bảo thao tác của người dùng là thuận tiện nhất cho quá trình sử dụng, tương tác

Với một ứng dụng Metronome, các chức năng cơ bản cần phải có bao gồm:

2.1 Điều chỉnh mức Tempo

Mức Tempo là phần quan trọng nhất trong một ứng dụng Metronome Người họcnhạc không chỉ tập luyện với một mức Tempo duy nhất mà thường xuyên thay đổimức Tempo để luyện tập

Như đã trình bày ở trên, Tempo được điều chỉnh trong khoảng từ 40-208 BPM,cho phép người sử dụng thay đổi tốc độ luyện tập Khi người học nhạc đã quen vớimột mức Tempo nào đó, người ta có thể tập luyện một cách chính xác mà không cần

sự hỗ trợ của Metronome Khi đó, người ta có thể thay đổi Tempo để tập với level caohơn

Việc điều chỉnh mức Tempo có thể được thực hiện bằng nhiều cách khác nhau Cóthể cho người dùng nhập mức Tempo cần tập luyện trực tiếp bằng bàn phím hoặcgiống Metronome điện, xoay núm vặn để thay đổi

2.2 Điều chỉnh nhịp điệu (Meter) luyện tập

Người học nhạc tập luyện với nhiều nhịp điệu khác nhau: 2/4, 3/4, 3/8, 6/8, Do

đó, cần thiết phải cho người sử dụng thay đổi nhịp độ

Một ứng dụng Metronome thông thường cần hỗ trợ ít nhất các nhịp phổ biến chongười học nhạc Ở ứng dụng Metronome của nhóm, sẽ hỗ trợ các nhịp sau đây:

 Các nhịp độ dài bằng 1 nốt trắng: 1/2,2/2,3/2, ,13/2

 Các nhịp có độ dài bằng 1 nốt đen: 1/4,2/4,3/4, ,13/4

 Các nhịp có độ dài bằng một nốt móc đơn: 3/8,6/8,9/8,12/8

2.3 Lưu lại cấu hình hiện tại của Metronome

Người dùng thường có nhu cầu mở lại những cấu hình đã từng tập luyện để tiếptục tập luyện Chức năng này rất cần thiết Lấy ví dụ khi đang luyện tập, người dùngbận một việc gì đó mà phải thoát ứng dụng, sẽ rất mất công nếu cứ mỗi lần như vậylại phải set up lại các thông số của Metronome Do đó, ứng dụng cần phải lưu lại cấuhình cho người sử dụng Thậm chí cần cho phép người sử dụng lưu trước những cấuhình sẽ tập luyện, sẽ tiết kiệm rất nhiều thời gian cho người học nhạc

Các thành phần cần lưu lại trong SaveList bao gồm:

 Mức Tempo: độ nhanh của Metronome

 Nhịp điệu Meter

 Sub-Division: thể hiện của một Beat khi chạy

2.4 Load lại những cấu hình đã Save

Tương tự như chức năng ở trên, chức năng này cho phép Metronome load lạinhững cấu hình đã lưu cho người sử dụng dùng lại Khi load SaveList, các thành phần

sẽ được load lại bao gồm:

 Mức Tempo

 Nhịp điệu Meter

 Sub-Division

2.5 Điều chỉnh âm lượng của ứng dụng

Chức năng này cho phép người sử dụng thay đổi mức âm lượng sao cho phù hợpvới hoàn cảnh tập luyện Ví dụ, người sử dụng có thể tắt âm khi tập cùng nhạc cụhoặc tăng âm lượng khi tập luyện trong môi trường ồn ào

2.6 Flash màn hình trong quá trình luyện tập

Một số trường hợp người sử dụng không thể nghe được âm thanh phát ra từMetronome (môi trường ồn ào, người khiếm thính, tập trung vào chơi nhạc cụ, ).Chức năng Flash màn hình cho phép người sử dụng có thể nhận ra các Beat mà khôngcần nghe âm thanh của Beat, chỉ cần liếc nhìn qua màn hình là có thể biết được vị trícủa Beat hiện tại

2.8 Bật/tắt chức năng Auto-lock screen của Device

Người học nhạc thường tập luyện trong một thời gian dài Trong khi đó, một tínhnăng của iDevice là tắt màn hình, lock screen để tiết kiệm pin Sẽ rất bất tiện vớingười sử dụng khi đang tập luyện lại phải dừng lại để bật màn hình lên Do đó, chứcnăng auto-lock screen là cần thiết cho ứng dụng Metronome nói riêng cũng như cácứng dụng trên iPhone nói chung

2.9 Thay đổi Sub-Division

Sub-Division là chức năng cho phép thay đổi thể hiện của một Beat khiMetronome chạy Có thể hiểu đơn giản như sau: với một nhịp 3/4, thay vì mỗi mộtbeat được thể hiện bằng một nốt đen, khi chọn Sub-Division khác, một beat có thể thểhiện bằng 2 nốt móc đơn hoặc 4 nốt móc kép Như vậy, thay vì nhịp 3/4 sẽ kêu là