Báo cáo Lập trình thiết bị di động (Android)

Báo cáo kết thúc môn Lập trình thiết bị di động trên hệ điều hành android. Một phong cách lập trình mới trên MIT AppInventor 2. Báo cáo kết thúc môn Lập trình thiết bị di động trên hệ điều hành android. Một phong cách lập trình mới trên MIT AppInventor 2. Báo cáo kết thúc môn Lập trình thiết bị di động trên hệ điều hành android. Một phong cách lập trình mới trên MIT AppInventor 2

TRƯỜNG ĐẠI HỌC TRÀ VINH KHOA KỸ THUẬT VÀ CÔNG NGHỆ

BÁO CÁO HẾT HỌC PHẦN LẬP TRÌNH THIẾT BỊ DI ĐỘNG (220071)

NĂM HỌC: 2013-2014

Giảng viên hướng dẫn: NGUYỄN HOÀNG DUY THIỆN

Sinh viên thực hiện: TRẦN TUẤN AN

Mã số sinh viên: 110112010

Lớp: DF12TT12

Trà Vinh, tháng 8 năm 2014

TRƯỜNG ĐẠI HỌC TRÀ VINH KHOA KỸ THUẬT VÀ CÔNG NGHỆ

PHIẾU ĐÁNH GIÁ BÁO CÁO

Sinh viên thực hiện: TRẦN TUẤN AN

Mã số sinh viên: 110112010

Lớp: DF12TT12

Báo cáo viết

GIÁO VIÊN CHẤM BÁO CÁO

Nguyễn Hoàng Duy Thiện

1 Giới thiệu về App Inventor

App Inventor ra mắt vào tháng 7/2010, với chương trình này, bạn không cần phải có bất cứ kiến thức nào về lập trình cũng có thể tạo các ra ứng dụng cho Android từ cơ bản đến nâng cao bằng những thao tác kéo thả

Dựa trên ý tưởng “những gì bạn thấy là những gì bạn có” (What you see is

what you get), App Inventor giúp dễ dàng tiếp cận và xây dựng ứng dụng Android Với giao diện trực quan, dễ hiểu, cho phép truy cập đến các chức năng của điện thoại kể cả GPS, đây là công cụ giúp cho bộ sưu tập ứng dụng của Android ngày càng dồi dào và phong phú

Tháng 8/2010, một lập trình viên mang tên Clark Wimberly đã tạo ra nền tảng Twitter client bằng App Inventor đã chứng minh khả năng và sức mạnh của chương trình này

Đáng tiếc, chỉ 1 năm sau khi ra đời, App Inventor đã bị Google vùi dập, việc truy cập và sử dụng mã nguồn mở một cách thoải mái khiến Google không đồng tình vì nó không nằm trong chiến lược của ông lớn này Sau đó, Google chi tiền để

hỗ trợ học viện Công nghệ Massachusetts (MIT) thực hiện dự án, với mục đích đào tạo các lập trình viên một cách bài bản, và tiếp đó mới phổ biến App Inventor Ngày nay, MIT đã hoàn thiện App Inventor và nó được chia sẻ ngay trên tài khoản Google Các lập trình viên mới bắt đầu hoặc bất kỳ ai muốn tạo ra ứng dụng Android chỉ cần vào địa chỉ web của MIT, nhập thông tin tài khoản Google, và từ những mảnh ghép nhỏ, xây dựng những ý tưởng của mình

Với chương trình này, bạn không cần phải có bất cứ kiến thức nào về lập trình cũng có thể tạo các ra phần mềm cho Android từ cơ bản đến nâng cao Với giao diện trực quan, dễ hiểu, cho phép truy cập đến các chức năng của điện thoại kể

cả GPS, đây sẽ là công cụ giúp cho bộ sưu tập ứng dụng của Android ngày càng dồi

Điểm nổi bật của App Inventor là nó cho phép bạn vừa thiết kế ứng dụng vừa xài thử ứng dụng đó trực tiếp trên chiếc điện thoại Android đang được kết nối với máy tính Tất cả các công đoạn viết phần mềm đều thông qua giao diện đồ họa trực quan theo kiểu WYSIWYG (What you see is what you get) mà không cần bạn phải đụng tới một đoạn mã nào Các chỉ dẫn trên màn hình đủ dễ hiểu để bạn có thể tiến hành viết phần mềm ngay mà không nhất thiết phải xem qua các bản hướng dẫn sử dụng

Tuy có cách dùng đơn giản nhưng App Inventor khá "hào phóng" khi cho phép bạn truy xuất đến các chức năng thường dùng của điện thoại như chức năng tự động nhắn tin, xác định vị trí hiện tại qua GPS và kể cả giao tiếp với các ứng dụng trên nền web như Amazon, Facebook hay Twitter

2 Các loại tài nguyên được sử dụng trong ứng dụng

- Button (nút nhấn) là thành phần mà người dùng chạm vào để thực

hiện các hành động nào đó bên trong ứng dụng

- Label (nhãn) là thành phần dùng để hiện thị văn bản

- Image (hình ảnh) là thành phần để hiển thị một hình ảnh

- Clock (đồng hồ) cho phép tạo thời gian để các sự kiện xảy ra

- Notifier là thành phần được dùng để hiển thị các thông báo, cảnh báo

tới người sử dụng hoặc ghi lại các nhật ký để người dùng dễ dàng chỉnh sửa chức năng của ứng

- Screen (màn hình) là thành phần được mặc định tạo ra trong mỗi dự

án, tên mặc định là Screen1 và tên này không thể thay đổi, có thể thực hiện việc thêm mới các màn hình khác

- HorizontalArrangement (vùng sắp xếp theo chiều ngang) dùng để

hiển thị một nhóm các thành phần được bố trí theo chiều từ trái sang phải

- TableArrangement (vùng sắp xếp theo bảng biểu) dùng để hiển thị

một nhóm các thành phần được bố trí theo kiểu bảng biểu

- VerticalArrangement (vùng sắp xếp theo chiều dọc) dùng để hiển thị

một nhóm các thành phần được bố trí theo chiều từ trên xuống dưới, canh lề trái

- Player (chương trình phát nhạc) dùng để mở một tập tin âm thanh

- Sound (chương trình phát nhạc) dùng để mở một tập tin âm thanh

hoặc phim có thời lượng ngắn hoặc dùng để bật chức năng rung của thiết bị

- TinyDB (cơ sở dữ liệu) là thành phần dùng để lưu trữ dữ liệu, chỉ có

tác dụng khi ứng dụng đang được mở

II Nội dung

Ứng dụng sử dụng các Screen và Layout để phân chia các giao diện

1 Các màn hình

Screen1 Screen1 Giao diện chính của trò chơi Screen2 scrCapDo Giao diện chọn hình và cấp độ chơi Screen3 Screen3x3 Giao diện xếp hình cấp độ 3x3 Screen4 Screen4x4 Giao diện xếp hình cấp độ 4x4 Screen5 ScrThanhTich Giao diện bảng xếp hạng Screen6 ScreenThongTin Giao diện hiển thị thông tin trò chơi

2 Thiết kế giao diện từng màn hình

2.1 Giao diện màn hình chính

Các thành phần sử dụng trong giao diện chính

VerticalArrangment Layout VA_ThucDon Chứa các nút thực

đơn HorizontalArrangment Layout HA_TuyChinh Chứa các nút bật

tắt âm thanh, nhạc nền

btn_AmThanh Bật/tắt âm thanh

nút Back 2 lần liên tiếp trong 2 giây

Interface

Notifier_ThongBao Hiển thị thông báo

chỉnh âm thanh,nhạc nền

Các thay đổi về thuộc tính các thành phần

VA_ThucDon AlignHorizontal: Center; Width: Fill parent

btn_BatDau Image: BatDau.png

btn_XepHang Image: XepHang.png

btn_ThongTin Image: ThongTin.png

HA_TuyChinh AlignHorizontal: Right; Width: Fill parent

btn_NhacNen Image: NhacNenBat.png

btn_AmThanh Image: AmThanhBat.png

btn_TuyChinh Image: ButtonCaiDat.png

Sound_AmThanh Source: click.wav

Player_NhacNen Source: BananaSong.mp3; Loop: True;

PlayOnlyInForeground: True

2.2 Giao diện chọn hình và cấp độ

Các thành phần sử dụng trong giao diện

HorizontalArrangement Layout Ha_Banner Chứa ảnh banner

HorizontalArrangement Layout HA_ChonCapDo Chứa các nút cấp độ HorizontalArrangement Layout HA_ChonHinh Chứa bảng hình ảnh TableArrangement Layout TB_ChonHinh Chứa các nút hình

Các thay đổi về thuộc tính các thành phần

HA_Banner AlignHorizontal: Center; Width: Fill parent

Img_Banner Picture: Banner.png

HA_ChonCapDo AlignHorizontal: Center; Width: Fill parent

btn_CapDo3x3 Image: 3x3Bat.png

btn_CapDo4x4 Image:4x4Tat.png

HA_ChonHinh AlignHorizontal: Center; Width: Fill parent

TB_ChonHinh Columns: 3; Rows: 3

Các thành phần sử dụng trong giao diện

HorizontalArrangement Layout Ha_Banner Chứa ảnh banner HorizontalArrangement Layout HA_KetQua Chứa kết quả

chơi, hình gốc VerticalArrangemnt Layout VA_TienTrinh Chứa kết quả chơi HorizontalArrangemnt Layout HA_DiChuyen Chứa kết quả di

chuyển HorizontalArrangemnt Layout HA_ThoiGian Chứa thời gian di

chuyển HorizontalArrangemnt Layout HA_DiChuyenHinh Chứa bảng các

màn chơi

Các thay đổi về thuộc tính các thành phần

HA_Banner AlignHorizontal: Center

Img_Banner Picture: Banner.png

HA_KetQua AlignHorizontal: Center; Width: Fill parent

HA_DiChuyen AlignHorizontal: Center; AlignVertical: Top; Width:

Fill parent; Height: Fill parent btn_DiChuyen Image: DiChuyen1.png; Width: Fill parent

HA_ThoiGian AlignHorizontal: Center; AlignVertical: Top; Width:

Fill parent; Height: Fill parent btn_ThoiGian Image: ThoiGian1.png; Width: Fill parent

Sound_AmThanh Source: slide.wav

Player_NhacNen Source: NhacNen.mp3

Player_ThangCuoc Source: winwinwin.mp3; Volume: 90

2.4 Giao diện cấp độ 4x4 (16 mảnh ghép)

Các thành phần sử dụng trong giao diện

HorizontalArrangement Layout Ha_Banner Chứa ảnh banner HorizontalArrangement Layout HA_KetQua Chứa kết quả

chơi, hình gốc VerticalArrangemnt Layout VA_TienTrinh Chứa kết quả chơi HorizontalArrangemnt Layout HA_DiChuyen Chứa kết quả di

chuyển HorizontalArrangemnt Layout HA_ThoiGian Chứa thời gian di

chuyển HorizontalArrangemnt Layout HA_DiChuyenHinh Chứa bảng các

AccelerometerSensor Sensor AS_TronHinh Lắc điện thoại để

màn chơi Các thay đổi về thuộc tính các thành phần

HA_Banner AlignHorizontal: Center

Img_Banner Picture: Banner.png

HA_KetQua AlignHorizontal: Center; Width: Fill parent

HA_DiChuyen AlignHorizontal: Center; AlignVertical: Top; Width:

Fill parent; Height: Fill parent btn_DiChuyen Image: DiChuyen1.png; Width: Fill parent

HA_ThoiGian AlignHorizontal: Center; AlignVertical: Top; Width:

Fill parent; Height: Fill parent btn_ThoiGian Image: ThoiGian1.png; Width: Fill parent

Sound_AmThanh Source: slide.wav

Player_NhacNen Source: NhacNen.mp3

Player_ThangCuoc Source: winwinwin.mp3; Volume: 90

chuyển 3x3 VerticalArrangement Layout VA_ThoiGian3x3 Chứa thứ hạng

thời gian chơi 3x3

hạng 4x4 VerticalArrangement Layout VA_CapDo4x4 Chứa cấp độ 4x4 VerticalArrangement Layout VA_ThuHang4x4 Chứa thứ hạng 4x4 VerticalArrangement Layout VA_DiChuyen4x4 Chứa thứ hạng di

chuyển 4x4

VerticalArrangement Layout VA_ThoiGian4x4 Chứa thứ hạng

thời gian chơi 4x4 HorizontalArrangement Layout HA_QuayVe Chứ nút quay về

Interface

hạng

Các thay đổi về thuộc tính các thành phần

VA_XepHang AlignHorizontal: Center; Width: Fill parent

VA_CapDo3x3 AlignHorizontal: Center

lbl_CapDo Text: Cấp độ; TextAlignment: Center; FontSize: 15;

FontBold: True lbl_CapDo3x3 TextAlignment: Center; FontSize:20; FontBold: True lbl_ThuHang Text: Hạng; TextAlignment: Center; FontSize: 15;

FontBold: True lbl_ThuHang3x3 TextAlignment: Center; FontSize:15

lbl_DiChuyen Text: Di chuyển; TextAlignment: Center; FontSize: 15;

FontBold: True lbl_DiChuyen3x3 TextAlignment: Center; FontSize:15

lbl_ThoiGian Text:Thời gian; TextAlignment: Center; FontSize: 15;

FontBold: True lbl_ThoiGian3x3 TextAlignment: Center; FontSize:15

lbl_CapDo4x4 TextAlignment: Center; FontSize:20; FontBold: True lbl_ThuHang4x4 TextAlignment: Center; FontSize:15

lbl_DiChuyen4x4 TextAlignment: Center; FontSize:15

lbl_ThoiGian4x4 TextAlignment: Center; FontSize:15

Sound_AmThanh Source: click.wav

Player_NhacNen Source: winwinwin.mp3

2.6 Giao diện thông tin trò chơi

Các thành phần sử dụng trong giao diện

chỉnh Các thay đổi về thuộc tính các thành phần

HA_QuayVe AlignHorizontal: Center; Width: Fill parent

Sound_AmThanh Source: click.wav

3 Lập trình và mô phỏng chức năng

3.1 Xử lý các sự kiện trong giao diện màn hình chính

3.1.1 Sự kiện khi Screen1 được khởi tạo

- Thiết lập tỷ lệ các layout và các thành phần trong các layout theo tỷ lệ

 Thủ tục ThietLapAmThanh: lấy thông tin cấu hình âm thanh trong lần chơi trước từ cơ sở dữ liệu đưa vào mảng TuyChinh để để kiểm tra và thiết lập lại âm thanh

3.1.2 Sự kiện các nút bắt đầu, thành tích, thông tin

- Khi ấn vào nút sẽ được chuyển sang màn hình khác

3.1.3 Sự kiện khi ấn nút tùy chỉnh

- Khi ấn ấn vào nút tùy chỉnh nếu 2 nút âm thanh và nhạc nền đang ở

trạng thái ẩn thì sẽ hiển thị và ngược lại

3.1.4 Sự kiện khi chạm vào nút âm thanh và nhạc nền

- Khi chạm vào nút âm thanh hoặc nhạc nền nếu âm thanh hoặc nhạc

nền đang bật sẽ được tắt, đồng thời đổi sang hình ảnh tắt nhạc nền hoặc âm thanh và ngược lại, sau đó lưu thông số cấu hình vào cơ sở dữ liệu để lần chơi thông số cấu hình vẫn giống như lần chơi trước

3.1.5 Sự kiện khi ấn nút quay lại trên thiết bị

- Khi chạm vào nút quay lại trên thiết bị sẽ xuất hiện 1 thông báo hướng

dẫn đóng ứng dụng bằng cách bấm 2 lần liên tiếp vào nút quay về trong thời gian

nhỏ hơn 2 giây, lúc này sự kiện Timer của clock_DongUngDung cũng được bật và

số lần chạm vào nút quay về được lưu trong biến SoLanNhan

 Thủ tục CapNhatThoiGianDongUngDung: thời gian sẽ được đếm

lùi về 0, khi ThoiGianDongUngDung bằng 0 thì sự kiện Timer của

clock_DongUngDung sẽ được tắt

3.2 Xử lý sự kiện trong giao diện màn hình chọn hình và cấp độ

2.1.1 Sự kiện khi scrCapDo được khởi tạo

- Thiết lập tỷ lệ cho các thành phần trên màn hình theo tỷ lệ phần trăm

của màn hình

2.1.2 Sự kiện khi ấn vào nút cấp độ 3x3, 4x4

- Khi chạm vào nút cấp độ thì biến tên màn hình sẽ được cập nhật theo

tên màn hình phù hợp với cấp độ và đổi ảnh của nút sang chế độ được chọn nút còn lại đổi sang không được chọn

2.1.3 Sự kiện khi ấn vào các nút hình ảnh

- Khi chọn 1 ảnh bất kỳ thì thủ tục BatDauChoi sẽ được gọi với 2 tham

số là TenManHinh và TenHinh

 Thủ tục BatDauChoi: mở màn hình theo tên màn hình được truyền

vào với 1 giá trị bắt đầu là tên hình

3.3 Xử lý sự kiện trong màn hình cấp độ 3x3 và màn hình cấp độ 4x4

- Màn hình cấp độ 3x3 và 4x4 có các sự kiện và thủ tục giống nhau chỉ

khác một vài chi tiết như số mảnh ghép (3x3=9 mảnh ghép, 4x4=16 mảnh ghép), thời gian trộn hình (3x3 thời gian: 50 giây, 4x4 thời gian: 100 giây) và tên mảng

thành tích

3.3.1 Sự kiện khi Screen3x3 và Screen4x4 được khởi tạo

- Thiết lập tỷ lệ các thành phần trên màn hình theo phần trăm của màn

hình và thiết lập âm thanh theo thông số cấu hình được lưu trong cơ sở dữ liệu

- Gán giá trị tên hình từ màn hình scrCapDo gửi qua cho biến TenHinhGoc

- Sự kiện TaiHinh được gọi sự kiện này sẽ gán những mãnh ghép của hình TenHinhGoc cho các nút theo đúng vị trí (từ 19 đối với cấp độ 3x3 và

116 đối với cấp độ 4x4)

- Thông báo hướng dẫn “lắc điện thoại để trộn hình” sau khi người

dùng chọn “OK” thì sự kiện TuDongTronHinh sẽ thực thi trộn hình ngẫu nhiên

 Thủ tục ThietLapTyLe:

 Thủ tục ThietLapTuyChinh: Lấy giá trị TuyChinh từ cơ sở dữ liệu

gán vào mảng TuyChinh và kiểm tra nếu tại vị trí 1 của mảng TuyChinh có giá trị

là True thì bật nhạc nền ngược lại gán giá trị Source của Player_ThangCuoc là rỗng, nếu tại vị trí 2 có giá trị là False thì gán giá trị Source của Sound_AmThanh

là rỗng

 Thủ tục TaiHinh: gán giá Image cho các btn_Hinh1, ,btn_Hinh9

đối với cấp độ 3x3 và btn_Hinh1, ,btn_Hinh16 đối với cấp độ 4x4 theo đúng thứ

tự các mãnh ghép từ 19 và từ 116

3.3.2 Sự kiện AfterChoosing của Notifier_ThongBao

- Sau khi người dùng chọn “OK” ở thông báo hướng dẫn “lắc điện thoại

để trộn hình” thì sự kiện này sẽ được gọi và kiểm tra lựa chọn của người dùng nếu người dùng chọn “OK” thì sự kiện Shaking của AS_TronHinh sẽ được bật Ngoài ra nếu người dùng chọn “Chơi lại” ở thông báo kết quả chơi khi người dùng hoàn

thành màn chơi thì giá trị của biến ThoiGianChoi sẽ được cập nhật về 0, biến ThoiGianTronHinh được cập nhật lại 50, giá trị Text của 2 nút btn_DiChuyen và btn_ThoiGian cũng được cập nhật về 0 sau đó sẽ hiển thị lại thông báo hướng dẫn

“Lắc điện thoại để trộn hình”, nếu người dùng chọn “Quay về” thì sự kiện close screen sẽ được gọi Nếu người dùng chạm vào nút quay về trên thiết bị thì thông

báo nhắc nhở “Bạn muốn thoát khỏi màn chơi” sẽ hiển thị nếu người dùng chọn

“Đúng” thì sự kiện close screen sẽ được gọi