Giao Trinh Android Ung Dung Trong Cac He Thong IoTs 2020 PDF [PDF]

Zitiervorschau

Lập trình Android và ứng dụng trong các hệ thống IoTs ( Android trong điều khiển, IoTs, WearOS)

Ths. Nguyễn Văn Hiệp – Ts. Trần Đức Thiện – Ts. Trần Mạnh Sơn

Đại học Sư Phạm Kỹ Thuật TPHCM

LỜI GIỚI THIỆU Những năm 2000, điện thoại thông minh (smartphone) là một khái niệm rất xa xỉ. Người giàu thì cũng chỉ có thể “sang chảnh” với các điện thoại “đập đá” đúng nghĩa. Nhưng chúng ta đã thật sự chứng kiến sự thay đổi như vũ bão của thế giới smartphone. Rất nhiều hãng điện thoại mới nổi, thành công mang đến cho người dùng sự tiếp cận dễ dàng hơn bao giờ hết. Điện thoại thông minh giờ đã thông minh hơn, với sự tích hợp của AI (trí tuệ nhân tạo) người dùng như có thêm trợ lý đắc lực hiểu mình hơn nữa. Smartphone ngày càng đa dạng, trãi dài trên các phân khúc từ cao cấp đến bình dân. Giới trẻ hầu như ai cũng có smartphone, mọi thứ bắt đầu liên kết hầu hết với nhau qua internet. Thế giới trở nên phẳng hơn, mọi tương tác liên quan đến đời sống tinh thần, vật chất được số hóa và chia sẻ. Với sự thống trị hiện tại của Android trong thế giới smartphone, cuộc cách mạng công nghiệp 4.0 đang tiến đến gõ cửa từng nhà, quyển sách mong muốn mang đến cho người đọc những nền tảng cơ bản, cốt lốt của việc lập trình di động ứng dụng điều khiển, giám sát thiết bị. Quyển sách này được viết dựa trên hai quyển Lập trình Android cơ bản, Lập trình Android trong ứng dụng điều khiển của cùng tác giả, NXB Đại học Quốc Gia HCM. Chính vì vậy, một số khái niệm cơ bản đã được bỏ bớt, hướng đến phần ứng dụng thực tế, các hệ thống giám sát điều khiển thông qua thiết bị Android được cải tiến, chỉnh sửa, bổ sung. Tác giả hi vọng sau khi đọc quyển sách này, người đọc có thể tự xây dựng một số hệ thống điều khiển thông minh cơ bản phù hợp với nhu cầu cụ thể. Hoặc đơn giản là trang bị những kiến thức để việc trải nghiệm các thiết bị smarthome (nhà thông minh) dễ dàng và thuận tiện hơn! Chân thành cảm ơn sự ủng hộ của quý độc giả, mọi góp ý về nội dung vui lòng gởi về email: [email protected]. Thân ái!

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 1

MỤC LỤC Lời giới thiệu ....................................................................................................................... 1 Chương 1

Định nghĩa vỀ Android ................................................................................... 9

Chương 2

Thiết kế Layout trong Android Studio .......................................................... 13

2.1

Đặt vấn đề ............................................................................................................ 13

2.2

Các loại Layout tiêu chuẩn trong Android:.......................................................... 13

2.3

Relative Layout: ................................................................................................... 14

2.4

Linear Layout: ...................................................................................................... 18

2.5

Table Layout: ....................................................................................................... 24

2.6

Grid Layout: ......................................................................................................... 26

2.7

Frame Layout: ...................................................................................................... 26

2.8

Constraint Layout:................................................................................................ 28

Chương 3

Các điều khiển giao diện người dùng ............................................................ 33

3.1

Đặt vấn đề ............................................................................................................ 33

3.2

Các đối tượng UI cơ bản và thuộc tính quan trọng:............................................. 33

3.2.1

Các thuộc tính quan trọng của một UI: ......................................................... 34

3.2.2

Các đối tượng UI cơ bản: .............................................................................. 37

3.3

Bài tập về UI Control: .......................................................................................... 38

Chương 4

Xây dựng ứng dụng IOTs sử dụng Firebase ................................................. 47

4.1

Đặt vấn đề ............................................................................................................ 47

4.2

Định nghĩa Firebase ............................................................................................. 47

4.2.1

Content Delivery Network ............................................................................ 49

4.2.2

Dữ liệu thời gian thực - Firebase Realtime Database ................................... 49

4.2.3

Cách thức hoạt động của cơ sở dữ liệu thời gian thực .................................. 50

4.3

Xây dựng một dự án đơn giản sử dụng Google Firebase .................................... 51

4.3.1

Bài toán 1: ..................................................................................................... 51

4.3.2

Bài toán 2: ..................................................................................................... 61

Chương 5

Điều Khiển Thiết Bị Qua Tin Nhắn Sms ...................................................... 73

5.1

Đặt vấn đề ............................................................................................................ 73

5.2

Phần mềm trên điện thoại Android ...................................................................... 74 Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 2

5.2.1

Xây dựng giao diện bằng phần mềm SMS_Control ..................................... 74

5.2.2

Chương trình trên hoạt động như thế nào? ................................................... 79

5.3

Bộ điều khiển ....................................................................................................... 80

5.4

Kết nối phần cứng và chương trình Arduino ....................................................... 82

Chương 6 6.1

Sử dụng Google Maps trong ứng dụng giám sát, định vị ............................. 89

GPS là gì ?............................................................................................................ 89

6.1.1

Cách thức hoạt động của vệ tinh ................................................................... 89

6.1.2

Cách xác định vị trí theo kinh độ và vĩ độ .................................................... 90

6.2

Google Maps ........................................................................................................ 91

6.2.1

Xây dựng ứng dụng đơn giản giám sát thiết bị dùng Google Maps ............. 92

6.2.2

Viết chương trình cho ứng dụng xác định vị trí bằng Google maps ............. 93

6.2.3

Chương trình trên hoạt động như thế nào? ................................................. 102

6.3

Viết chương trình cho thiết bị nhận tin nhắn yêu cầu và gửi lại vị trí ............... 108

6.3.1

Thiết kế giao diện chính .............................................................................. 108

6.3.2

Yêu cầu thiết bị cấp quyền cho ứng dụng ................................................... 109

6.3.3

Phần code chính trong MainsActivity.java ................................................. 109

6.4

Mô phỏng ........................................................................................................... 113

Chương 7

ĐIỀU KHIỂN VÀ GIÁM SÁT THIẾT BỊ QUA BLUETOOTH .............. 116

7.1

Đặt vấn đề .......................................................................................................... 116

7.2

Phần mềm trên điện thoại Android .................................................................... 117

7.2.1

Xây dựng ứng dụng đơn giản ...................................................................... 117

7.2.2

Chương trình trên hoạt động như thế nào? ................................................. 123

7.3

Bộ điều khiển ..................................................................................................... 126

Chương 8

Ứng Dụng Công Nghệ Nhận Dạng Ký Tự Quang Học Trong Điều Khiển 131

8.1

Đặt vấn đề .......................................................................................................... 131

8.2

Định nghĩa về Công nghệ .................................................................................. 131

8.3

Ứng dụng công nghệ OCR điều khiển led 7 màu .............................................. 132

8.3.1

yêu cầu......................................................................................................... 132

8.3.2

Sơ đồ hệ thống ............................................................................................. 133

8.3.3

Thiết kế ứng dụng trên Android .................................................................. 133

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 3

8.3.4

Thiết kế bộ điều khiển ................................................................................. 142

Chương 9

Ứng dụng cảm biến gia tốc trong điều khiển ............................................. 146

9.1

Đặt vấn đề .......................................................................................................... 146

9.2

Phần mềm trên điện thoại Android .................................................................... 147

9.3

Bộ điều khiển ..................................................................................................... 156

Chương 10

Ứng dụng công nghệ nhận dạng giọng nói .............................................. 158

10.1

Đặt vấn đề ....................................................................................................... 158

10.2

Ứng dụng trên điện thoại Android .................................................................. 158

10.3

Bộ điều khiển .................................................................................................. 168

Chương 11

Sử Dụng Blynk Tạo Ứng Dụng Điều Khiển Với Google Assistant ........ 170

11.1

Đặt vấn đề ....................................................................................................... 170

11.2

Xây dựng ứng dụng với BLYNK ................................................................... 171

11.2.1 Giới thiệu về App Blynk ............................................................................. 171 11.2.2 Tạo mới dự án trên Blynk ........................................................................... 171 11.3

Đăng nhập và cài đặt trên IFTTT ................................................................... 176

11.4

Bộ điều khiển .................................................................................................. 184

Chương 12

Wear OS Và Ứng Dụng Điều Khiển ....................................................... 186

12.1

Đặt vấn đề ....................................................................................................... 186

12.2

Tạo một Database Firebase............................................................................. 187

12.3

Tạo một ứng dụng trên smartphone ................................................................ 191

12.4

Tạo một ứng dụng trên smartwatch ................................................................ 193

12.5

Mạch điều khiển Esp8266 đọc dữ liệu từ Firebase ........................................ 197

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 4

Hình ảnh Hình 1.1 Chiếc điều thoại T-Mobile G1 .............................................................................. 9 Hình 1.2 Các phiên bản hệ điều hành Android và thời gian phát hành ............................. 10 Hình 2.1 Sơ đồ thừa kế giữa các thành phần giao diện trong Android ............................. 13 Hình 2.2 Thiết kế một giao diện sử dụng RelativeLayout ................................................ 15 Hình 2.3 Màn hình ứng dụng khi chạy máy ảo ................................................................. 17 Hình 2.4 Hình ảnh minh hoạ cho margin và padding ....................................................... 18 Hình 2.5 Kết quả màn hình sau thiết kế ............................................................................ 20 Hình 2.6 Kết quả hiển thị trên màn hình khi thiết kế LinearLayout dọc........................... 21 Hình 2.7 Thiết kế các Layout lồng vào nhau..................................................................... 23 Hình 2.8 Kết quả hiển thị trên máy ảo các Layout lồng vào nhau .................................... 24 Hình 2.9 Thiết kế màn hình đăng nhập dùng TableLayout ............................................... 24 Hình 2.10 Kết quả mô phỏng xây dựng màn hình đăng nhập dùng TableLayout ............ 26 Hình 2.11 Thiết kế các nút nhấn sử dụng FrameLayout. .................................................. 27 Hình 2.12 Sử dụng các Layout đã trình bày thiết kế giao diện máy tính đơn giản ........... 28 Hình 2.13 Thiết kế giao diện ứng dụng sử dụng ConstraintLayout .................................. 29 Hình 2.14 Kết quả màn hình ứng dụng khi chạy máy ảo .................................................. 31 Hình 3.1 Các sắp xếp các view, Viewgroup ...................................................................... 33 Hình 3.2 Chọn kích thước màn hình thiết kế trong Android Studio ................................. 34 Hình 3.3 Độ phân giải pixel trong Androidd ..................................................................... 35 Hình 3.4 Kích thước tính theo đơn vị dp ........................................................................... 35 Hình 3.5 Kích thước dp trong Android ............................................................................. 36 Hình 3.6 Ví dụ về kích thước sp ........................................................................................ 36 Hình 3.7 Biểu diễn của các đơn vị đo trên cùng một màn hình Nguồn Androidvn.org... 37 Hình 3.8 Giao diện ứng dụng tính chỉ số BMI .................................................................. 39 Hình 3.9 Giao diện thiết kế ứng dụng BMI ....................................................................... 42 Hình 3.10 Kết quả chạy trên máy tính ảo .......................................................................... 46 Hình 4.1 Firebase hỗ trợ nhiều nền tảng ........................................................................... 47 Hình 4.2 Phần cứng kết nối sử dụng NODMCU8266....................................................... 51 Hình 4.3 Vào mục setting .................................................................................................. 53 Hình 4.4 Vào mục Android SDK ...................................................................................... 54 Hình 4.5 Vào SDK Tools .................................................................................................. 54 Hình 4.6 Vào mục Tools\ Firebase .................................................................................... 55 Hình 4.7 Vào mục Realtime Database .............................................................................. 55 Hình 4.8 Vào mục Save and retrieve data ......................................................................... 56 Hình 4.9 Kết quả Database thêm một Child tên là LED ................................................... 56 Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 5

Hình 4.10 Code trong mục Rules ...................................................................................... 57 Hình 4.11 Thông báo tại cửa sổ Firebase .......................................................................... 57 Hình 4.12 Kết quả chạy trên máy ảo a) khi Led sáng b) khi Led tắt................................. 60 Hình 4.13 Sơ đồ chân module NodeMCU 8266 ............................................................... 62 Hình 4.14 Ảnh thực tế DHT11 .......................................................................................... 63 Hình 4.15 Kết nối NodeMCU 8266 với DHT11 a) sơ đồ kết nối; b) kết nối trên hình thực tế ........................................................................................................................................ 63 Hình 4.16 Phần cứng kết nối cơ bản cho hệ thống ............................................................ 64 Hình 4.17 Xây dựng ứng dụng trên Android Studio ......................................................... 64 Hình 4.18 Tạo một dự án Firebase .................................................................................... 67 Hình 4.19 Một dự án Firebase lưu trữ dữ liệu thời gian thực ........................................... 67 Hình 4.20 Hoạt động của Realtime Data Firebase ............................................................ 70 Hình 4.21 Lấy firebase_host .............................................................................................. 72 Hình 5.1 Hệ thống điều khiển thiết bị qua SMS................................................................ 73 Hình 5.2 Giao diện ứng dụng điều khiển SMS_Control ................................................... 74 Hình 5.3 SIM900 ............................................................................................................... 81 Hình 5.4 Board TDGGSM_900 ........................................................................................ 81 Hình 5.5 Board GPRS Shield-EFCom .............................................................................. 82 Hình 5.6 Sơ đồ kết nối phần cứng ..................................................................................... 83 Hình 5.7 Giao tiếp SIM900 qua hai chân khác chân Tx, Rx mặc định ............................. 83 Hình 6.1 Hệ thống định vị toàn cầu GPS .......................................................................... 90 Hình 6.2 Xác định vị trí bằng công thức lượng giác ......................................................... 90 Hình 6.3 Hình biểu tượng của ứng dụng Google Maps mới cập nhật .............................. 91 Hình 6.4 Giao diện Google Maps trên điện thoại.............................................................. 91 Hình 6.5 Theo dõi định vị thiết bị từ một thiết bị khác ..................................................... 92 Hình 6.6 Tạo một Projet mới ............................................................................................. 93 Hình 6.7 Các bước tiến hành xin API key ......................................................................... 94 Hình 6.8 Tạo 1 API key cho ứng dụng .............................................................................. 94 Hình 6.9 File Google_maps_api.xml................................................................................. 95 Hình 6.10 Vào trang web xin API key .............................................................................. 95 Hình 6.11 Tạo một API Key .............................................................................................. 96 Hình 6.12 API key sau khi đã tạo ...................................................................................... 96 Hình 6.13 Điền API key vào file .xml ............................................................................... 96 Hình 6.14 Thêm dịch vụ của Google vào chương trình .................................................... 97 Hình 6.15 Giao diện chính của ứng dụng xác định vị trí .................................................. 97 Hình 6.16 Giao diện chính của ứng dựng thông báo vị trí .............................................. 109 Hình 6.17 Các yêu cầu quyền cơ bản cho ứng dụng ....................................................... 109 Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 6

Hình 6.18 Giao diện chính hiện thị vị trí ......................................................................... 114 Hình 6.19 Tin nhắn yêu cầu gửi tới và phản hồi bằng tin nhắn vị trí.............................. 114 Hình 6.20 Giao diện chính của ứng dụng theo dõi vị trí ................................................. 115 Hình 6.21 Giá trị được biểu thị và vị trí thiết bị được hiển thị trên bản đồ ..................... 115 Hình 7.1 Sơ đồ điều khiển thiết bị bằng Bluetooth ......................................................... 116 Hình 7.2 Giao diện điều khiển của ứng dụng .................................................................. 117 Hình 7.3 Giao diện khi đèn được bật ............................................................................... 118 Hình 7.4 Module Bluetooth HC05/06 ............................................................................. 126 Hình 7.5 Sơ đồ kết nối Ardunio Uno R3 với HC-05 ....................................................... 128 Hình 9.1 Cảm biến gia tốc trong điện thoại..................................................................... 146 Hình 9.2 Giao diện của ứng dụng .................................................................................... 147 Hình 9.3 Giao diện điều khiển ......................................................................................... 147 Hình 9.4 Sơ đồ kết nối phần cứng ................................................................................... 156 Hình 10.1 Giao diện ứng dụng Android .......................................................................... 159 Hình 10.2 Kết nối Ardunio với HC05 và ba led đơn ...................................................... 168 Hình 11.1 Sơ đồ hệ thống điều khiển với Google Assistant ........................................... 170 Hình 11.2 Giao diện đăng nhập Blynk ............................................................................ 172 Hình 11.3 Tạo một ứng dụng mới với Blynk .................................................................. 172 Hình 11.4 Chọn phần cứng cho dự án Blynk .................................................................. 173 Hình 11.5 Thông báo gởi mã Auth Token đến tài khoản liên kết ................................... 173 Hình 11.6 Hộp widget của Blynk .................................................................................... 174 Hình 11.7 Giao diện xây dựng các Button điều khiển .................................................... 174 Hình 11.8 Thiết lập các thuộc tính cho nút Button trong Blynk ..................................... 175 Hình 11.9 Thiết chân kết nối cho nút nhấn ..................................................................... 176 Hình 11.10 Khởi chạy Blynk ........................................................................................... 176 Hình 11.11 Tạo một applet trên IFTTT ........................................................................... 177 Hình 11.12 Tạo điều kiện This ........................................................................................ 178 Hình 11.13 Liên kết Google Assistant với IFTTT .......................................................... 178 Hình 11.14 Chọn loại trigger cho IFTTT ........................................................................ 179 Hình 11.15 Thiết lập các câu lệnh trigger cho sự kiện This ............................................ 180 Hình 11.16 Thiết lập sự kiện That ................................................................................... 180 Hình 11.17 Chọn dịch vụ Webhooks cho sự kiện That ................................................... 181 Hình 11.18 Chọn hành động cho webhooks .................................................................... 181 Hình 11.19 Thiết lập các thuộc tính cho hành động (action) .......................................... 182 Hình 11.20 Hoàn thành thiết lập IFTTT .......................................................................... 182 Hình 11.21 Thiết lập cho điều khiển tắt Led 1 ................................................................ 183 Hình 11.22 Kết quả sau khi hoàn thành thiết lập cho hai led .......................................... 183 Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 7

Hình 11.23 Phần cứng kết nối NodeMCU ...................................................................... 184 Hình 12.1 Giao diện của ứng dụng Google Home .......................................................... 187 Hình 12.2 Tạo dự án Firebase mới .................................................................................. 188 Hình 12.3 Chép file .json và project Android ................................................................. 188 Hình 12.4 Hướng dẫn tích hợp Firebase vào Android project ........................................ 189 Hình 12.5 Chọn dự án Android để tích hợp Firebase ...................................................... 189 Hình 12.6 Thêm Package Name để Add dự án vào firebase ........................................... 190 Hình 12.7 Thiết lập cho phép đọc ghi dữ liệu lên DataFirebase ..................................... 190 Hình 12.8 Tạo dữ liệu cho DataFirebase ......................................................................... 191 Hình 12.9 Thêm các thư viện Firebase vào Gradle ......................................................... 191 Hình 12.10 Thêm thư viện vào Build.Gradle(app).......................................................... 192 Hình 12.11 Thiết kế giao diện cho ứng dụng trên điện thoại .......................................... 192 Hình 12.12 Xây dựng code cho file MainActivity.java .................................................. 193 Hình 12.13 Kết quả quan sát Firebase khi chạy ứng dụng .............................................. 193 Hình 12.14 Tạo ứng dụng cho đồng hồ thông minh........................................................ 194 Hình 12.15 Thiết lập ứng dụng Wear OS mới ................................................................ 194 Hình 12.16 Giao diện xây dựng ứng dụng Wear OS ...................................................... 195 Hình 12.17 Xem địa chỉ IP của đồng hồ thông minh ...................................................... 196 Hình 12.18 Vào cửa sổ command ‘Android Debugging bridge” .................................... 196 Hình 12.19 Dòng lệnh để kết nối đồng hồ thông minh với máy tính .............................. 196 Hình 12.20 Debugging thông qua wifi giữa máy tính và đồng hồ .................................. 197 Hình 12.21 Modul thu phát wifi ESP8266 NodeMCU Mini D1..................................... 197 Hình 12.22 Hướng dẫn lấy Authcode của dự án Firebase ............................................... 199

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 8

CHƯƠNG 1 DỊNH NGHĨA VỀ ANDROID Android là hệ điều hành di động phổ biến nhất trên thế giới, cung cấp hàng tỷ thiết bị từ điện thoại đến đồng hồ, máy tính bảng, TV và hơn thế nữa. Cho đến nay sự phủ sóng của hệ điều hành Android rộng đến mức không ai là không biết đến nó. Đặc biệt, các thiết bị di động từ giá rẻ đến cao cấp, các hãng khác nhau đều trang bị hệ điều hành Android cho thiết bị của mình. Ban đầu, Android được phát triển bởi Tổng công ty Android, với sự hỗ trợ tài chính từ Google và sau này công ty Android được chính Google mua lại vào năm 2005. Android ra mắt vào năm 2007 cùng với tuyên bố thành lập Liên minh thiết bị cầm tay mở (Open Handset Alliance, viết tắt OHA), một hiệp hội gồm các công ty phần cứng, phần mềm, và viễn thông với mục tiêu đẩy mạnh các tiêu chuẩn mở cho các thiết bị di động. Chiếc điện thoại đầu tiên chạy Android được bán vào năm 2008, chính là T-Mobile G1 do HTC sản xuất như trong hình 1.1.

Hình 1.1 Chiếc điều thoại T-Mobile G1

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 9

Android có mã nguồn mở được Google phát hành theo Giấy phép Apache. Giấy phép Apache là một giấy phép phần mềm tự do của Quỹ Phần mềm Apache (Apache Software Foundation - ASF). Giấy phép Apache bắt buộc phải có thông báo bản quyền và lời phủ nhận. Tương tự như các giấy phép phần mềm tự do khác, Giấy phép Apache trao cho người dùng phần mềm quyền tự do sử dụng phần mềm với bất kỳ mục đích nào như phân phối, chỉnh sửa, và phân phối bản có sửa đổi của phần mềm, theo các điều khoản của giấy phép, mà không lo lắng tới phí bản quyền. Chính mã nguồn mở cùng với một giấy phép không có nhiều ràng buộc đã cho phép các nhà phát triển thiết bị, mạng di động và các lập trình viên tự do điều chỉnh và phân phối Android. Ngoài ra, Android còn có một cộng đồng lập trình viên đông đảo chuyên viết các ứng dụng để mở rộng chức năng của thiết bị bằng một loại ngôn ngữ lập trình Java có sửa đổi.

Hình 1.2 Các phiên bản hệ điều hành Android và thời gian phát hành

Những yếu tố này đã giúp Android trở thành nền tảng điện thoại thông minh phổ biến nhất thế giới, vượt qua Symbian OS vào quý 4 năm 2010, và được các công ty công nghệ lựa chọn khi họ cần một hệ điều hành không nặng nề, có khả năng tinh chỉnh, và giá rẻ chạy trên các thiết bị công nghệ cao thay vì xây dựng một hệ điều hành cho riêng mình. Do đó Android đã được thiết kế để không chỉ chạy trên điện thoại và máy tính bảng mà còn xuất hiện trên Tivi, máy chơi game và các thiết bị điện tử khác. Bản chất mở của Android cũng Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 10

khích lệ một đội ngũ đông đảo lập trình viên và những người đam mê sử dụng mã nguồn mở để tạo ra những dự án do cộng đồng quản lý. Những dự án này bổ sung các tính năng cao cấp cho những người dùng thích tìm tòi hoặc đưa Android vào các thiết bị ban đầu chạy hệ điều hành khác. Android chiếm 87,7% thị phần điện thoại thông minh trên toàn thế giới vào thời điểm quý 2 năm 2017, với tổng cộng 2 tỷ thiết bị đã được kích hoạt và 1,3 triệu lượt kích hoạt mỗi ngày. Sự thành công của hệ điều hành cũng khiến nó trở thành mục tiêu trong các vụ kiện liên quan đến bằng phát minh, góp mặt trong cái gọi là "cuộc chiến điện thoại thông minh" giữa các công ty công nghệ. Điển hình có một thời gian dài SamSung và Apple liên tục kiện tục các bên vi phạm bản quyền của nhau.1 Hệ điều hành Android liên tục được cập nhật, và đến nay nó trải qua nhiều phiên bản khác nhau và sẽ còn tiếp tục. Hình đồ họa ghi lại các cột mốc phát triển chính của hệ điều hành này được trình bày trong hình 1.2. Một số nền tảng Android: Android không chỉ được thiết kế để chạy trên điện thoại, máy tính bảng (tablet), thiết bị di động có kích thước lớn (phable). Android chạy trên các thiết bị có đủ hình dạng và kích thước, mang đến cho bạn cơ hội lớn để tiếp tục tương tác với người dùng. Và Android được thiết kế chuyên dùng và hướng đến các đối tượng khác nhau. Android TV là hệ điều hành được tùy biến xây dựng chạy trên các tivi thông minh. Thị trường tivi thông minh giờ rất sôi động. Nội dung xem trực tiếp phong phú, chất lượng cao. Chính vì vậy Android TV mong muốn mang đến những trải nghiệm mới cho người dùng. Android TV tạo ứng dụng cho phép người dùng trải nghiệm nội dung của ứng dụng trên màn hình lớn. Android Auto là hệ điều hành được tùy biến cho các xe hơi. Nhằm mang đến các trải nghiệm giải trí, công việc tuyệt vời. Các trải nghiệm dẫn đường, nghe nhạc, xem phim, ... sẽ được nâng lên một tầm mới. Việc viết ứng dụng của bạn với Android Auto, bạn sẽ không phải lo lắng sự khác biệt về phần cứng của thiết bị như độ phân giải màn hình, giao diện phần mềm, nút bấm và điều khiển cảm ứng. Người dùng có thể truy cập ứng dụng của bạn thông qua ứng dụng Android Auto trên điện thoại của họ. Hoặc, khi được kết nối với các loại xe tương thích, các ứng dụng trên thiết bị cầm tay chạy Android 5.0 trở lên có thể giao tiếp với trải nghiệm Android Auto. Wear OS (trước đây là Android Wear) là hệ điều hành Android được tùy biến xây dựng cho các thiết bị đeo. Đồng hồ thông minh giúp bạn luôn kết nối với sức khỏe. Bạn có thể theo dõi các hoạt động hằng ngày như thông tin thân nhiệt, nhịp tim, bước chân đi, giờ ngủ, đọc nhanh các tin nhắn, email, …

1

(Một số thông tin được lấy từ trang Bách khoa toàn thư mở wikipedia.org).

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 11

Google Chrome OS được thiết kế dùng trình duyệt web Google Chrome là giao diện người dùng chính, và như vậy nó chủ yếu là để làm việc với các ứng dụng web. Giao diện người dùng được đơn giản hóa tối đa, giống như trong trình duyệt Google Chrome. Do trình duyệt web là ứng dụng duy nhất tồn tại trong thiết bị, Google Chrome OS nhắm vào những người dùng dành hầu hết thời gian làm việc với máy tính của họ trên Internet. Lợi thế mạnh nhất của Chrome OS chính là tốc độ khởi động, cũng vì là hệ điều hành trong một trình duyệt web nên Chrome OS rất nhẹ và đơn giản. Tính năng tiện lợi nhất của Chrome OS là người dùng có thể kết nối bất cứ ở đâu nếu có internet và Chrome OS, vì nó sử dụng tài khoản cá nhân trên nền tảng đám mây nên dữ liệu, lịch sử của bạn sẽ không bị mất. Android Things cho phép bạn tạo các thiết bị thông minh, được kết nối với nhiều ứng dụng công nghiệp, người bán lẻ và công nghiệp khác nhau. Lợi thế của Android Things là phát triển ứng dụng cho thiết bị của bạn bằng các công cụ phát triển Android, giao diện lập trình ứng dụng (API) và tài nguyên cùng với API mới, cung cấp I/O và thư viện cấp thấp cho các thành phần phổ biến như cảm biến nhiệt độ, bộ điều khiển hiển thị và hơn thế nữa. Xây dựng các thiết bị trên các giải pháp phần cứng chìa khóa trao tay với Hệ thống môđun được chứng nhận (SoM) và các bo mạch phát triển giúp đơn giản hóa nguyên mẫu cho quy trình sản xuất. Google hỗ trợ cung cấp hình ảnh, bản cập nhật và bản sửa lỗi hệ thống để bạn có thể tập trung vào việc tạo ra các sản phẩm hấp dẫn. Ngoài ra, bạn có thể đẩy các bản cập nhật hệ thống này và bản cập nhật ứng dụng của riêng bạn lên thiết bị bằng Android Things Console.

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 12

CHƯƠNG 2 THIẾT KẾ LAYOUT TRONG ANDROID STUDIO 2.1 ĐẶT VẤN ĐỀ Android Layout là một lớp điều khiển việc sắp xếp các thành phần con của nó xuất hiện trên màn hình. Bất cứ thành phần nào đó được gọi là một View (hoặc thừa kế từ View) đều có thể là con của một Layout. Tất cả các lớp Layout đều mở rộng từ lớp ViewGroup (mà kế thừa từ View), do đó bạn cũng có thể tạo một lớp Layout tùy biến của mình, bằng cách tạo một lớp mở rộng từ ViewGroup. Hình 2.1 minh họa sơ đồ thừa kế giữa các thành phần giao diện trong Android.

Hình 2.1 Sơ đồ thừa kế giữa các thành phần giao diện trong Android

2.2 CÁC LOẠI LAYOUT TIÊU CHUẨN TRONG ANDROID: Bảng 2.1 Các loại Layout tiêu chuẩn trong Android

Layout Relative Layout

Mô tả RelativeLayout là một ViewGroup nó hiển thị các View con của nó theo vị trí có tương đối với nhau. Việc sắp xếp các view trên màn hình tốn ít tài nguyên hơn, tuy nhiên do có sự quan hệ qua lại nên khi tùy chỉnh các thành phần sẽ chú ý Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 13

Linear Layout

Table Layout

Grid Layout

Frame Layout

Absolute Layout

Constraint Layout

2.3

hơn. Đây là Layout mặc định thay cho LinearLayout ở các phiên bản kế tiếp của Android Studio LinearLayout bố trí tất cả các thành phần con của nó theo một hướng duy nhất, theo chiều dọc hoặc chiều ngang. Những phiên bản Android Studio ban đầu chọn LinearLayout làm layout mặc định. TableLayout là một view nó nhóm các view con thành các dòng và các cột.

GridLayout sử dụng một mạng lưới các dòng mỏng và vô hạn để tách khu vực bản vẽ của nó thành: các hàng, các cột, và các ô (cell). Nó hỗ trợ cả việc bắc qua (span) các hàng và các cột, mà cùng nhau cho phép một thành phần giao diện để chiếm một phạm vi hình chữ nhật gồm nhiều ô. FrameLayout là một đối tượng giữ chỗ ở trên màn hình mà bạn có thể sử dụng để hiển thị một khung nhìn duy nhất.

AbsoluteLayout làm bạn có thể chỉ định chính xác vị trí của các view con trong nó. Sắp xếp các view con theo đúng tọa độ x, y trong thành phần cha. Một constraint là phần mô tả làm thế nào để một View nên được định vị trên màn hình tương đối với các phần tử khác trong layout. Bạn có thể xác định một constraint cho một hay nhiều mặt của một view bằng cách chế độ kết nối bất kỳ sau đây : điểm neo nằm trên một View khác, một cạnh của layout, một guideline vô hình. Đây là Layout mặc định trong Android Studio hiện tại.

RELATIVE LAYOUT:

RelativeLayout là một ViewGroup có hiển thị các View con ở các vị trí tương đối. Vị trí của mỗi View có thể được quy định liên quan đến các View anh em (như bên trái của hoặc bên dưới một View khác) hoặc ở các vị trí tương đối với khu vực cha RelativeLayout (chẳng hạn như sắp xếp ngay phía dưới, bên trái hoặc trung tâm). RelativeLayout là một tiện ích rất mạnh mẽ cho thiết kế một giao diện người sử dụng vì nó có thể loại bỏ các nhóm View lồng nhau và giữ cho hệ thống phân cấp bố trí của bạn bằng phẳng, đồng thời cải thiện hiệu suất. Nếu bạn sử dụng một vài nhóm LinearLayout lồng nhau, bạn có thể thay thế chúng bằng một RelativeLayout duy nhất. Ví dụ 2.1 Thiết kế screen nhập ghi chú như sau:

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 14

Hình 2.2 Thiết kế một giao diện sử dụng RelativeLayout

Với hoạt động (activity) này thì chúng ta có thể sử dụng các layout như: TableLayout, LinearLayout, RelativeLayout, ConstraintLayout để thiết kế. Ở phần này, tôi sử dụng RelativeLayout để thiết kế ra giao diện như trên. Code file activity_main.xml:







Một số thuộc tính thường dùng khi sử dụng Relative Layout: Bảng 2.2 Các thuộc tính thườn dùng trong relative layout

Tên thuộc tính android:layout_above android:layout_alignBaseline android:layout_alignBottom android:layout_alignLeft

android:layout_alignParentBottom

android:layout_alignParentLeft

android:layout_alignParentRight

android:layout_alignParentTop

android:layout_alignRight

Mô tả Đặt tiện ích (widget) hiện tại nằm kế sau widget có id được chỉ ra Đặt widget này lên cùng dòng với widget có id được chỉ ra Canh sao cho đáy của widget hiện thời trùng với đáy của widget có id được chỉ ra Đặt cạnh trái của widget hiện thời trùng với cạnh trái của widget có id được chỉ ra Nếu thiết lập là true thì widget hiện thời sẽ được canh xuống đáy của widget chứa nó Nếu được thiết lập là true thì widget hiện thời sẽ canh trái so với widget chứa nó Nếu được thiết lập là true thì widget hiện thời sẽ canh phải so với widget chứa nó Nếu được thiết lập là true thì widget hiện thời sẽ canh lên đỉnh widget chứa nó Canh phải của widget hiện thời trùng với cạnh phải của widget có id được chỉ ra

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 16

android:layout_alignTop android:layout_alignWithParentIfMissing

android:layout_below android:layout_centerHorizontal

android:layout_centerInParent

android:layout_centerVertical

android:layout_toLeftOf

android:layout_toRightOf

Canh đỉnh của widget hiện thời trùng với đỉnh của widget có id được chỉ ra Nếu thiết lập là true, thì widget sẽ được canh theo widget chứa nó nếu các thuộc tính canh của widget không có Đặt widget hiện thời ngay sau widget có id được chỉ ra Nếu thiết lập là true thì widget hiện thời sẽ được canh giữa theo chiều ngang widget chứa nó Nếu thiết lập là true thì widget hiện thời sẽ được canh chính giữa theo chiều phải trái và trên dưới so với widget chứa nó Nếu thiết lập là true thì widget hiện thời sẽ được canh chính giữa theo chiều dọc widget chứa nó Đặt cạnh phải của widget hiện thời trùng với cạnh trái của widget có id được chỉ ra Đặt cạnh trái của widget hiện thời trùng với cạnh phải của widget có id được chỉ ra

Ví dụ 2.1 Kết quả hiển thị trên máy ảo:

Hình 2.3 Màn hình ứng dụng khi chạy máy ảo

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 17

2.4 LINEAR LAYOUT: LinearLayout là một ViewGroup nó sắp xếp các thành phần con theo một hướng duy nhất, theo chiều dọc hoặc chiều ngang. Bạn có thể chỉ định hướng của nó theo thuộc tính: android:orientation. Thuộc tính này quy định hướng sắp xếp của Layout, bạn sử dụng "horizontal" đối với dòng, và "vertical" để sắp xếp theo cột. Mặc định là "horizontal". Bảng 2.3 Các thuộc tính trong linear layout

Thuộc tính Layout_width Layout_height layout_margintop layout_marginbottom layout_marginleft layout_marginright layout_gravity layout_weight

Mô tả Quy định độ rộng của widget Quy định độ cao của widget Quy định khoảng cách bên trên của widget Quy định khoảng cách bên dưới của widget Quy định khoảng cách bên trái của widget Quy định khoảng cách bên phải của widget Quy định vị trí của widget Quy định khoảng không gian layout phân chia cho widget

Hình 2.4 Hình ảnh minh hoạ cho margin và padding

Để hiểu rõ hơn về LinearLayout chúng ta sẽ tìm hiểu các ví dụ dưới đây. Lưu ý: các ví dụ chủ yếu phân tích các Layout do đó sẽ dùng phương pháp thiết kế giao diện từ file XML, không hướng dẫn lập trình chức năng ở phần này. Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 18

Ví dụ 2.2 Thiết kế screen gồm 4 cột màu, có độ rộng bằng nhau.

Với yêu cầu như vậy, chúng ta có thể sử dụng các layout như: LinearLayout, TableLayout, RelativeLayout để thiết kế. Ở đây, tôi sử dụng LinearLayout để giải quyết yêu cầu này. Code file activity_main.xml:





Code trên ta thấy thuộc tính orientation được gán giá trị là horizontal để các widget trong nó được sắp xếp theo chiều ngang. Thuộc tính android:weightSum được sử dụng để tính tổng weight của các widget trong LinearLayout. Thuộc tính android:layout_weight (của các widget nằm bên trong LinearLayout) là độ rộng của widget này so với các widget khác, ta thấy ở code trên giá trị của thuộc tính android:layout_weight ở cả bốn TextView là “25”, do đó độ rộng của mỗi cột màu là như nhau và chiếm hết toàn bộ màn hình vì tổng của các android:layout_weight bằng android:weightsum. Nếu bạn muốn các cột màu có độ rộng như nhau nhưng chỉ chiếm một nửa màn hình, hãy tăng gấp đôi giá trị của android:weightsum = “200”. Hãy thử và kiểm tra kết quá có đúng như bạn nghĩ không! Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 19

Lưu ý: giá trị của thuộc tính android:layout_weight không làm cho widget nhỏ hơn giá trị được gán ở android:layout_width. Do đó, khi thiết kế độ rộng của widget bằng thuộc tính android:layout_weight thì cần phải gán cho thuộc tính android:layout_width một giá trị thật nhỏ hoặc là “wrap_content”. Hai thuộc tính android:layout_width=“match_parent” và android:layout_height =“match_parent” để LinerLayout chiếm toàn bộ không gian của widget cha (ở đây là màn hình hiển thị). Ở các TextView cũng có thuộc tính android:layout_height =“match_parent” để chiều cao của TextView chiếm toàn bộ chiều cao của cha nó (ở đây là LinearLayout).

Kết quả hiển thị trên máy ảo được trình bày trong hình 2.5.

Hình 2.5 Kết quả màn hình sau thiết kế

Ví dụ 2.3 Thiết kế screen có bốn hàng màu, với hàng màu đỏ và vàng có độ cao gấp đôi so với hai hàng màu còn lại Code file activity_main.xml:





Thuộc tính android:orientation của LinearLayout được gán giá trị là vertical do đó các widget trong layout sẽ được sắp xếp theo chiều dọc. Các nội dung còn lại thì tương tự như trên. Các bạn có thể thay đổi giá trị weightSum và các layout_weight để xem sự thay đổi. Kết quả hiển thị trên máy ảo được trình bày trong hình 2.6.

Hình 2.6 Kết quả hiển thị trên màn hình khi thiết kế LinearLayout dọc

Ví dụ 2.4 Thiết kế screen là tổ hợp bốn hàng màu và bốn cột màu đã làm ở các ví dụ một và ví dụ hai. Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 21

Code file activity_main.xml:









Horizontal

Vertical

Vertical

Hình 2.7 Thiết kế các Layout lồng vào nhau

Như đã nói ở trên, các ViewGroup có thể chứa cả View và ViewGroup bên trong nó, ở ví dụ ta sẽ lồng các LinearLayout vào nhau để đáp ứng yêu cầu thiết kế, hình dưới phác thảo việc lồng các LinearLayout lại với nhau. Kết quả hiển thị trên máy ảo được trình bày trong hình 2.8. Trong thực tế, thiết kế giao diện cho các ứng dụng thường phức tạp, chỉ sử dụng một Layout để chưa các widget không để đáp ứng yêu cầu thiết kế. Do đó, giải pháp lồng các Layout vào nhau sẽ giúp bạn giải quyết hầu hết các bài toán giao diện. Ngoài LinearLayout còn một số Layout khác hỗ trợ thiết kế giao diện mà chúng ta sẽ thảo luận dưới đây.

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 23

Hình 2.8 Kết quả hiển thị trên máy ảo các Layout lồng vào nhau

2.5 TABLE LAYOUT: TableLayout là một ViewGroup nó hiển thị các thành phần con trên các hàng và các cột. TableLayout đặt vị trí các thành phần con của nó theo hàng và cột. Bộ chứa TableLayout không hiển thị đường biên (border) cho các hàng, các cột, hoặc các ô của nó. Bảng sẽ có nhiều cột nhiều hàng với nhiều ô. Một bảng có thể có các ô trống, nhưng các ô không thể bắc qua (span) nhau theo chiều thẳng đứng, như cách có thể trong HTML. Các đối tượng TableRow là các View con của một TableLayout (mỗi TableRow định nghĩa một hàng duy nhất trong bảng). Mỗi hàng có 0 hoặc nhiều ô, mỗi ô trong số đó có thể chứa bất kỳ loại View nào. Vì vậy, một dòng có thể chứa một vài loại View, như ImageView hoặc TextView. Một ô cũng có thể chứa ViewGroup (ví dụ, bạn có thể cho một TableLayout khác vào trong 1 ô). Ví dụ 2.5 Thiết kế screen đăng nhập sử dụng TableLayout như sau:

Hình 2.9 Thiết kế màn hình đăng nhập dùng TableLayout

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 24

Để thiết kế như hình trên, ta có thể sử dụng các layout RelativeLayout, LinearLayout, ConstraintLayout, TableLayout, GridLayout. Sau đây, tôi sẽ sử dụng TableLayout để thiết kế giao diện cho activity này. Code file activity_main.xml:











Từ code trên ta thấy để tạo thêm các hàng cho bảng ta sẽ dùng thẻ , các widget ở mỗi hàng sẽ nằm trong cặp thẻ này. Số cột của bảng phụ thuộc vào hàng có số widget lớn nhất. Bảng sử dụng trong ví dụ này có kích thước là ba hàng và hai cột. Thuộc tính android:StretchColumns=“*” cho phép căn đều độ rộng các cột trong bảng. Ngoài ra, EditText để nhập mật khẩu sử dụng thuộc tính android:inputType="textPassword" để hiển thị các dữ liệu được nhập vào ở dạng ký tự “*”. Kết quả hiển thị trên máy ảo:

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 25

Hình 2.10 Kết quả mô phỏng xây dựng màn hình đăng nhập dùng TableLayout

2.6 GRID LAYOUT: GridLayout sử dụng một mạng lưới các dòng mỏng và vô hạn để tách khu vực bản vẽ của nó thành: các hàng, các cột, và các ô (cell). Nó hỗ trợ cả việc bắc qua (span) các hàng và các cột, nghĩa là cho phép hợp nhất ô gần nhau thành một ô lớn (hình chữ nhật) để chứa một View. Trong GridLayout, việc chỉ định kích thước và căn lề làm giống với LinearLayout. Căn chỉnh/trọng lượng (Alignment/gravity) cũng làm việc giống như trọng lượng (gravity) trong LinearLayout và sử dụng chung các hằng số: left, top, right, bottom, center_horizontal, center_vertical, center, fill_horizontal, fill_vertical và fill. Không giống như hầu hết các lưới ở các bộ công cụ khác, Android GridLayout không liên kết dữ liệu với các hàng hoặc cột. Thay vào đó, tất cả mọi thứ được làm với Aligment (căn chỉnh) và sự linh hoạt được liên kết với các thành phần tự thân của nó. Sự linh hoạt của các cột được suy ra từ thuộc tính gravity của các thành phần bên trong các cột. Nếu mọi thành phần định nghĩa một gravity, cột được coi là linh hoạt, nếu không cột được coi là không linh hoạt.

2.7 FRAME LAYOUT: FrameLayout là một đối tượng giữ chỗ ở trên màn hình mà bạn có thể sử dụng để hiển thị một View đơn lẻ. Frame Layout là loại Layout cơ bản nhất. Đặc điểm của FrameLayout là khi đặt các widget lên screen thì các widget này luôn nằm ở góc trái trên cùng, nó không cho phép chúng ta thay đổi vị trí của các widget. Các widget đưa vào sau sẽ nằm chồng lên các widget đưa vào trước theo thứ tự trong file XML. Ví dụ 2.6 Thiết kế giao diện 3 nút nhấn nằm trong FrameLayout như hình sau: Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 26

Hình 2.11 Thiết kế các nút nhấn sử dụng FrameLayout. Với yêu cầu thiết kế như trên, các layout có thể sử dụng như: FrameLayout, ConstraintLayout, RelativeLayout. Ở đây, tôi sử dụng FrameLayout để thực hiện yêu cầu trên. Code file activity_main.xml:



Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 27



Theo thứ tự code trong file xml, Button1 ở đầu tiên nên trên giao diện nó sẽ nằm dưới cùng, Button2 nằm ở giữa và Button1 nằm trên cùng. Bài tập tổng hợp, dựa vào các Layout đã tìm hiểu ở trên, hãy thiết kế Screen như hình dưới.

Hình 2.12 Sử dụng các Layout đã trình bày thiết kế giao diện máy tính đơn giản

2.8 CONSTRAINT LAYOUT: Một constraint là phần mô tả làm thế nào để một View nên được định vị trên màn hình tương đối với các phần tử khác trong layout. Bạn có thể xác định một constraint cho một hay nhiều mặt của một view bằng các chế độ kết nối bất kỳ sau đây: • Điểm neo nằm trên một View khác. • Một cạnh của layout. • Một guideline vô hình. Bởi layout của từng View được định nghĩa bởi sự kết hợp với các phần tử khác nhau trong Layout. Bạn có thể tạo một giao diện phức tạp với hệ thống cây nhiều nhánh (kiểu View Hierachy). Mặc dù nó có khái niệm tương tự như RelativeLayout nhưng ConstraintLayout là linh hoạt hơn và được thiết kế sử dụng hoàn toàn từ công cụ Layout Editor mới. Và trong các phiên bản Android Studio mới, đây được chọn làm Layout mặc định khi thiết kế. Các loại của constaint bạn có thể xác định như sau: • Kết nối phía bên các cạnh của Layout • Kết nối phía bên của một View sang bên tương ứng với Layout. ví dụ kết nối phía trên của một View vào mép trên cùng của ConstraintLayout • Kết nối phía bên cạnh của một View. Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 28

• Kết nối phía bên cạnh của một View đến phía đối diện của một View khác. Ví dụ 2.7 Kết nối cạnh trên (top) của View A vào cạnh dưới (bottom) của View B, như vậy thì A luôn luôn ở bên dưới B Chỉnh thẳng hàng với một View. Canh thẳng hàng các cạnh của một view để các cạnh và góc của view khác tương tự. Ví dụ sắp xếp bên trái của View A đến phía bên trái của View B sao cho chúng được xếp chồng theo chiều dọc và canh trái. Chỉnh cơ bản với một View: Căn đường cơ bản của văn bản nằm trong view với một đường cơ bản của vản bản trong view khác. Sử dụng điều này để gắn kết các view theo chiều ngang khi các văn bản trong view quan trọng hơn là căn các cạnh trong view. Khi bạn thêm một constraint vào View bạn xem trong công cụ layout editor. Bạn có thể kéo để đặt lại vị trí của View và thêm những constraint để đảm bảo bố trí của bạn đáp ứng các kích cỡ màn hình khác nhau một cách thích hợp. Ví dụ 2.8 Viết giao diện của ứng dụng tính chỉ số BMI (sẽ có ở chương sau)

Hình 2.13 Thiết kế giao diện ứng dụng sử dụng ConstraintLayout

Để thiết kế được giao diện như trên thì ta có thể sử dụng các Layout ở trên và ở phần này tôi sẽ sử dụng ConstraintLayout để thiết kế. Các bạn sẽ thấy đây là layout rất tiện lợi và đang được Google khuyến khích dùng. Code file activity_main.xml:







Kết quả thực hiện trên máy ảo:

Hình 2.14 Kết quả màn hình ứng dụng khi chạy máy ảo

Giải thích về code thiết kế xml:

Ở trong ConstraintLayout, chúng ta sẽ sử dụng các id của các đối tượng để căn chỉnh cho nhau. Ở đây tôi sẽ giải thích về đối tượng EditText có id: “ednang” và các đối tượng TextView, Button còn lại sẽ tương tự. Thuộc tính layout_constrainTop_toBottomOf = “@id/edcao” sẽ căn chỉnh Top của EditText với Bottom của đối tượng có id là edcao. Thuộc tính layout_constrainLeft_toRightOf = “@id/tvnang” sẽ căn chỉnh Left của EditText với Right của đối tượng có id là tvnang. Thuộc tính layout_constraintBaseline_toBaselineOf="@id/tvnang" sẽ đưa EditText nằm cùng hàng Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 31

với đối tượng có id là tvnang. Thuộc tính layout_marginLeft=“30sp” sẽ đưa EditText cách xa bên trái so với đối tượng có id là tvnang 30sp.

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 32

CHƯƠNG 3 CÁC ĐIỀU KHIỂN GIAO DIỆN NGƯỜI DÙNG 3.1 ĐẶT VẤN ĐỀ Tất cả phần tử giao diện người (User Interface) trong một ứng dụng Android đều được xây dựng bằng cách sử dụng các đối tượng View và ViewGroup. View là một đối tượng có chức năng hiển thị trên màn hình mà người dùng có thể tương tác. ViewGroup là một đối tượng có chức năng giữ hoăc chứa các đối tượng View (và ViewGroup) khác để định nghĩa bố trí giao diện của ứng dụng. Android cung cấp một bộ sưu tập cả lớp con View và ViewGroup cho bạn các cách điều khiển nhập liệu thông dụng (chẳng hạn như nút nhấn Button và trường văn bản TextView) và các Layout khác nhau. Giao diện người dùng (UI) thành phần trong ứng dụng của bạn được định nghĩa bằng cách sử dụng một phân cấp các đối tượng View và ViewGroup như minh họa trong hình dưới đây. Mỗi Viewgroup là một bộ chứa vô hình có chức năng tổ chức view, viewgroup con, trong khi viewgroup con có thể là điều khiển nhập liệu (EditText) hoặc các widget khác để vẽ một phần nào đó của UI. Cây phân cấp này có thể đơn giản hoặc phức tạp tùy nhu cầu của bạn (nhưng đơn giản sẽ tốt cho hiệu năng).

Hình 3.1 Các sắp xếp các view, Viewgroup

3.2

CÁC ĐỐI TƯỢNG UI CƠ BẢN VÀ THUỘC TÍNH QUAN TRỌNG:

Một số View thường được sử dụng trong thiết kế giao diện ứng dụng như: TextView, Button, RadioButton, CheckBox, EditText, Switch, ImageView, … Các ViewGroup thường dùng chính là các Layout dùng để sắp xếp các widget khác bên trong nó, một số Layout phổ biến như: LinearLayout, TableLayout, RelativeLayout, GridLayout, ConstrainLayout, … đã được nói đến ở chương trước.

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 33

3.2.1 CÁC THUỘC TÍNH QUAN TRỌNG CỦA MỘT UI: Thuộc tính chiều cao và chiều rộng để xác định kích thước của một UI Control: layout_width, layout_height. Chúng ta có thể ghi: • wrap_content: Vừa với nội dung mà UI đó chứa. • match_parent: Vừa với ViewGroup đang chứa UI đó. • Đơn vị đo: dp, sp, px, pt, inch. Giải thích các đơn vị dùng trong thiết kế để các bạn có thể hiểu rõ hơn: • Pixel (px) hay còn gọi điểm ảnh: Pixel, px hay có khi gọi là pel (xuất phát từ “picture element”), chúng ta hay gọi là điểm ảnh, có dạng hình vuông. Một hình ảnh bitmap mà bạn thấy trên màn hình là ma trận hai chiều (2D) của các pixel tạo nên (hay ma trận của các hình vuông nhỏ). Mỗi pixel chiếm một vị trí trong ma trận và chứa một phần của hình ảnh hiển thị. Pixel thường được dùng để nói về độ phân giải (resolution) của thiết bị: ví dụ Samsung Galaxy S3 có màn hình độ phân giải 1280 x 720 (Height x Width). Điều này có nghĩa là chiều cao của màn hình Galaxy S3 là 1280 pixels, còn chiều rộng là 720 pixels. Thiết bị có độ phân giải càng cao thì màn hình càng có nhiều pixels. Tuy nhiên điều này chưa nói lên được là màn hình sẽ hiển thị ảnh mịn, đẹp hay không. Điều này tuỳ thuộc vào diện tích của màn hình, vì vậy pixel không dùng làm đơn vị đo lường kích thước của màn hình thiết bị, nhưng lại được dùng để đo kích thước của ảnh. Cùng một đối tượng khi thiết kế với kích thước chọn theo px giống nhau, nhưng khi chạy trên các các màn hình có độ phân giải khác nhau sẽ cho kích thước hiển thị khác nhau.

Hình 3.2 Chọn kích thước màn hình thiết kế trong Android Studio

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 34

Hình 3.3 Độ phân giải pixel trong Androidd

• dp, hay dip hay Density-independent Pixels, có khi được gọi là Deviceindependent Pixels. Đây là một đơn vị đo chiều dài vật lý cũng giống như inch, cm, mm… mà Google thường áp dụng để do kích thước màn hình của thiết bị. 160 dp = 1inch, điều này có nghĩa 1dp = 1/160 = 0.00625 inch. Một dp có thể chứa một hay nhiều pixel. Ví dụ như màn hình có kích thước là 10 dp. Ở màn hình độ phân giải thấp 1dp tương đương 1 pixel. Ở độ phân giải trung bình thì 1dp tương đương 4 pixels ….

Hình 3.4 Kích thước tính theo đơn vị dp

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 35

Hình 3.5 Kích thước dp trong Android •

DPI (Dots per inch) hay PPI – (Pixels per inch) là số điểm ảnh (pixels) trên một inch của màn hình thiết bị, con số này càng lớn thì màn hình thiết bị hiển thị hình ảnh càng mịn và đẹp. Dựa vào dpi người ta chia làm loại màn hình như sau: small: ldpi (120 dpi), normal: mdpi (160 dpi), large: hdpi (240 dpi), x-large: xhdpi (320 dpi). Với mỗi loại này thì một dp tương ứng với số lượng pixels khác nhau, được tính theo công thức: px = dp * (dpi / 160) Ví dụ với thiết bị có dpi là 320 thì với 10 dp ta có: 10 * (320/160) = 20 px , một dp tương đương 2 px. • PT (Point): khái niệm pt tương tự như dp là một đơn vị đo kích thước thực, nhưng khác với dp: 1 pt = 1/72 inch, trong khi 1 dp = 1/160 inch pt thường được dùng trong lập trình iOS. • SP (Scale-independent Pixels) Cũng tương tự như dp, nhưng sp thường được dùng cho

font size của văn bản.

Hình 3.6 Ví dụ về kích thước sp

Sau đây là ví dụ ở màn hình normal screen mdpi (160dpi) cho các đơn vị đo dp, sp, px, pt, inch

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 36

Hình 3.7 Biểu diễn của các đơn vị đo trên cùng một màn hình Nguồn Androidvn.org

Thuộc tính id và text dùng để phân biệt UI này với UI khác: • id: dùng để xác định địa chỉ của UI đó và trong toàn bộ ứng dụng không có bất cứ id nào trùng nhau. • Text: dùng để hiển thị tác dụng của UI do người dùng tuỳ chọn đặt tên để dễ phân biệt. Đây là các thuộc tính quan trọng của một UI không thể bỏ qua khi thiết kế giao diện. Ngoài ra, mỗi UI khác nhau sẽ có các thuộc tính đặc trưng riêng các bạn hãy tự tìm hiểu thêm nhé. Khi lập trình, trong file .java (ví dụ: scr/MainActivity.java) tạo một đại diện cho đối tượng Control này và “kết nối” nó từ layout, Ví dụ ta đặt tên cho đại diện của TextView là myText và ta muốn buột nó vào TextView có id là text_id ở file xml của ta, ta sử dụng như sau: TextView myText = (TextView) findViewById(R.id.text_id);

Trên đây ta ví dụ cho trường hợp Control của ta là một TextView, các đối tượng khác làm tương tự.

3.2.2 CÁC ĐỐI TƯỢNG UI CƠ BẢN: STT

UI Control và mô tả

1

TextView: Điều khiển này được sử dụng để hiển thị văn bản (text) cho người dùng

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 37

2

EditText: Điều khiển này định nghĩa là lớp con của TextView bao gồm các khả năng chỉnh sửa

3

AutoCompleteTextView: Là một view tương tự như EditText ngoại trừ nó hiển thị một danh sách được đề nghị để hoàn thành trong lúc bạn đang nhập.

4

Button: Là một nút nhấn có thể được nhấn, click bởi người dùng khi thực thi một hoạt động.

5

ImageButton: Tương tự nút nhấn nhưng có hình ảnh.

6

CheckBox: Là tùy chọn có thể được thay đổi bởi người dùng. Bạn nên sử dụng các checkboxes khi người dùng có thể tùy chọn một nhóm mà không bắt buộc sự loại trừ lẫn nhau.

7

ToggleButton: Một nút nhấn on/off có đèn hiển thị

8

RadioButton: RadioButton có hai trạng thái: hoặc là được đánh dấu(checked) hoặc không được đánh dấu (unchecked)

9

RadioGroup: RadioGroup được dùng để nhóm một hoặc nhiều RadioButton với nhau

10

ProgressBar: ProgressBar cung cấp một phản hồi trực quan về các công việc đang xử lý, ví dụ bạn đang thực hiện một công việc ở trạng thái nền.

11

ImageView: ImageView được dùng để hiển thị hình ảnh.

12

Switch: Switch tương tự như ToggleButton có hai trạng thái là check và uncheck.

3.3 BÀI TẬP VỀ UI CONTROL: Các UI kể trên rất quen thuộc trong thiết kế, bạn cũng không quá khó để làm quen. Vì đã trình bày trong các tài liệu trước cũng như khá nhiều tài liệu từ trang web phát triển Android nên tác giả không muốn trình bày lại, mà chỉ sơ lược qua. Để hiểu rõ ta xem một ví dụ như sau đây: Yêu cầu: Ta có một Activity cho nhập chiều cao, cân nặng vào. Sau đó, nó sẽ tính toán chỉ số BMI và đưa ra kết luận về tình trạng của bạn trên một Activity khác.

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 38

Giao diện mong muốn theo yêu cầu:

Hình 3.8 Giao diện ứng dụng tính chỉ số BMI

Giải thích về yêu cầu: Người dùng nhập chiều cao và cân nặng vào hai EditText ở Activity thứ nhất. Khi nhấn nút “Tiếp tục” thì sẽ chuyển qua Activity thứ hai. Sau đó tính toán chỉ số BMI và hiển thị kết quả lên Activity thứ hai. Khi nhấn nút “OK” thì sẽ kết thúc và quay lại Activity chính. Các bước thực hiện như sau: Bước 1: Tạo ứng dụng Android. Bước 2: Thiết kế Layout cho Main Activity như yêu cầu gồm: ba TextView, hai EditText, một Button. Chỉnh file res/layout/activity_main.xml như sau:









Bước 3: Tạo một Activity mới tên là Ketqua, nên tạo bằng Wizard. Và ta thiết kế layout theo yêu cầu gồm hai TextView và một Button. Chỉnh file res\layout\activity_main2.xml như sau:





Bước 4: Định nghĩa các hằng số trong file res\value\string.xml như bên dưới. Để tiện thiết kế layout thì ngay khi ta thiết kế layout cho MainActivity ta đã định nghĩa các hằng số cho file String.xml rồi. Sau đó khi ta tạo Activity mới ta lại định nghĩa thêm. Việc này sẽ giúp bạn thu gọn thuộc tính text trong các đối tượng.

BMI Calculator Hãy nhập chiều cao và cân nặng của bạn

Đến đây ta có giao diện của hai Activity như sau:

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 41

Hình 3.9 Giao diện thiết kế ứng dụng BMI Bước 5: Khai báo Activity ketqua và Intent trong fileres\AndroidManifest.xml như sau:











Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 42



Bước 6: Viết code cho MainActivity. Chỉnh sửa file MainActivity.java như sau (Chú ý các dòng chú thích). package com.example.windows10.bmicalculator; import import import import import import import import

android.content.Intent; android.support.v7.app.AppCompatActivity; android.os.Bundle; android.view.View; android.widget.Button; android.widget.EditText; android.widget.TextView; android.widget.Toast;

public class MainActivity extends AppCompatActivity { EditText chieucao,cannang; Button btn; Double w,h; Boolean a,b; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); anhxa(); } @Override protected void onResume() { super.onResume(); //xử lý sự kiện nút nhấn btn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { if(isEmpty(chieucao)) { Toast.makeText(MainActivity.this,"Hãy nhập chiều cao!",Toast.LENGTH_LONG).show(); a = false; } else { h = Double.parseDouble(chieucao.getText().toString()); a = true; } if(isEmpty(cannang)) { Toast.makeText(MainActivity.this,"Hãy nhập cân nặng!",Toast.LENGTH_LONG).show(); b = false; } else {

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 43

w = Double.parseDouble(cannang.getText().toString()); b = true; } if(a&b) { //Khai báo intent mới liên kết activity 2 Intent activity_ketqua = new Intent(MainActivity.this, Main2Activity.class); //Khai báo bundle để chứa các dữ liệu cần gửi Bundle thongso = new Bundle(); thongso.putDouble("cannang", w); thongso.putDouble("chieucao", h); activity_ketqua.putExtra("dulieu", thongso); //Mở activity 2 startActivity(activity_ketqua); } } }); } @Override protected void onPause() { super.onPause(); } public void anhxa() { //ánh xạ các đối tượng từ file xml chieucao = (EditText)findViewById(R.id.chieucao); cannang = (EditText)findViewById(R.id.cannang); btn = (Button)findViewById(R.id.nutnhan); } //kiem tra edit text đã được nhập dữ liệu hay chưa private boolean isEmpty(EditText etText) { if (etText.getText().toString().trim().length() > 0) return false; return true; } }

Bước 7: Viết code cho Main2Activity. Chỉnh sửa file Main2Activity.java như sau (Chú ý các dòng chú thích). package com.example.windows10.bmicalculator; import import import import import import

android.content.Intent; android.support.v7.app.AppCompatActivity; android.os.Bundle; android.view.View; android.widget.Button; android.widget.TextView;

import org.w3c.dom.Text; public class Main2Activity extends AppCompatActivity { TextView ketqua; Button btn_ok; Double BMI;

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 44

@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main2); anhxa(); } @Override protected void onResume() { super.onResume(); Intent caller = getIntent(); Bundle dulieunhan = caller.getBundleExtra("dulieu"); Double chieucao=dulieunhan.getDouble("chieucao"); Double cannang=dulieunhan.getDouble("cannang"); //Tính chỉ số BMI theo tiêu chuẩn tổ chức y tế thế giới BMI=cannang/(chieucao*chieucao); BMI= (double) Math.round(BMI*100)/100; String kq; if(BMI









Phần nội dung quan trọng nhất: File MainActivity.Java package com.example.ngb.voice_control; import android.bluetooth.BluetoothAdapter; import android.bluetooth.BluetoothDevice; import android.bluetooth.BluetoothSocket; import android.content.BroadcastReceiver; import android.content.Context; import android.content.Intent; import android.content.IntentFilter; import android.os.Bundle; import android.os.Handler; import android.speech.RecognizerIntent; import android.support.v7.app.AppCompatActivity; import android.util.Log; import android.view.View; import android.widget.AdapterView; import android.widget.ArrayAdapter; import android.widget.Button; import android.widget.ImageButton; import android.widget.ListView; import android.widget.TextView; import android.widget.Toast; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; import java.util.ArrayList;

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 161

import java.util.UUID; public class MainActivity extends AppCompatActivity { ImageButton btn_speak; TextView txtv_blue, txtv_red, txtv_green; Button btn_scan; final static int RESULT_SPEECH = 1; ListView list_device, list_data; ArrayListtext; BluetoothAdapter myBluetoothAdapter; BluetoothSocket btSocket; private OutputStream outStream = null; private InputStream inStream= null; private static final UUID MY_UUID = UUID .fromString("00001101-0000-1000-8000-00805F9B34FB"); //khởi tạo arrayadapter để lưu list thiết bị quét được // khởi tạo arrayadapter để lưu text chuyển đổi từ giọng //nói private ArrayAdapterBTArrayAdapter; private ArrayAdapterV2TArrayAdapter; ArrayListAdress; ArrayList ID; String BtAddress= null; private static final String TAG = "HC-05"; Handler handler = new Handler(); byte delimiter = 10; boolean stopWorker = false; int readBufferPosition = 0; byte[] readBuffer = new byte[1024]; private boolean chophepgui=false; protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); txtv_blue = (TextView) findViewById(R.id.textView_ledblue); txtv_green = (TextView) findViewById(R.id.textView_ledgreen); txtv_red = (TextView) findViewById(R.id.textView_ledred); btn_speak = (ImageButton) findViewById(R.id.btnSpeak); list_device = (ListView) findViewById(R.id.listView_blue); list_data = (ListView) findViewById(R.id.listView_data); btn_scan=(Button)findViewById(R.id.button_scan); //khởi tạo 2 array list để lưu ID và địa chỉ của thiết bị //quét được //hiển thị các thiết bị quét được trên listview //list_device ID=new ArrayList(); Adress=new ArrayList(); BTArrayAdapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, ID); list_device.setAdapter(BTArrayAdapter); //đăng ký bộ lọc để nhận phản hồi kết nối với thiết bị //Bluetooth IntentFilter filter1 = new IntentFilter(BluetoothDevice.ACTION_ACL_CONNECTED); this.registerReceiver(bReceiver, filter1); myBluetoothAdapter = BluetoothAdapter.getDefaultAdapter(); on(); //mở kết nối Bluetooth //hàm xử lý nút micro được nhấn để nhận dạng giọng nói btn_speak.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Intent intent = new Intent(RecognizerIntent.ACTION_RECOGNIZE_SPEECH); intent.putExtra(RecognizerIntent.EXTRA_LANGUAGE_MODEL, RecognizerIntent.LANGUAGE_MODEL_FREE_FORM); startActivityForResult(intent, RESULT_SPEECH); } }); //hàm xử lý khi nút Scan được nhấn để dò tìm thiết bị btn_scan.setOnClickListener(new View.OnClickListener() {

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 162

@Override public void onClick(View v) { find(); }}); //xử lý khi listview thiết bị được nhấn list_device.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView parent, View view, int position, long id) { BtAddress = Adress.get(position); Toast.makeText(MainActivity.this,"đang kết nối....",Toast.LENGTH_LONG).show(); Connect(); }}); } @Override //hàm chuyển đổi giọng nói thành text protected void onActivityResult(int requestCode, int resultCode, Intent data) { if (chophepgui) { //khi kết nối với một thiết bị nào đó rồi mới thực hiện gửi được super.onActivityResult(requestCode, resultCode, data); if (requestCode == RESULT_SPEECH && resultCode == RESULT_OK) { text = data.getStringArrayListExtra(RecognizerIntent.EXTRA_RESULTS); //lưu chuỗi chuyển hóa từ giọng nói vào listview //list_data V2TArrayAdapter = new ArrayAdapter(this, android.R.layout.select_dialog_item, text); list_data.setAdapter(V2TArrayAdapter); for (int i = 0; i 0) { byte[] packetBytes = new byte[bytesAvailable]; inStream.read(packetBytes); for(int i=0;i1) { //hiển thị trạng thái các đèn dựa vào dữ liệu phản hồi if (rdata.substring(0,2).equals("ds")) {txtv_red.setText("đèn đỏ bật");} if (rdata.substring(0,2).equals("dt")) {txtv_red.setText("đèn đỏ tắt");} if (rdata.substring(0,2).equals("ls")) {txtv_green.setText("đèn xanh lục bật");} if (rdata.substring(0,2).equals("lt")) {txtv_green.setText("đèn xanh lục tắt");} if (rdata.substring(0,2).equals("xs"))

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 165

{txtv_blue.setText("đèn xanh dương bật");} if (rdata.substring(0,2).equals("xt")) {txtv_blue.setText("đèn xanh dương tắt");} } } }); //handler } else { readBuffer[readBufferPosition++] = b; } } } } catch (IOException ex) { stopWorker = true; } } } }); workerThread.start(); } }

Việc giao tiếp, truyền và nhận Bluetooth tương tự như các chương trước, ở đây tôi chỉ trình bày về phần chuyển giọng nói thành Text. Quá trình chuyển đổi giọng nói sang text có hai phần chính. • Hàm con chuyển đổi dữ liệu giọng nói thành text. Hàm này chỉ thực thi khi điện thoại đã kết nối với thiết bị điều khiển. Sau khi có được dữ liệu giọng nói (đã chuyển thành text) thì kết quả hiển thị lên listview list_data, sau đó dữ liệu sẽ được chuyển lần lượt thành các chuỗi dạng string và chứa trong buff. Bây giờ, nhiệm vụ của chúng ta là tìm trong các chuỗi dữ liệu nhận dạng này (buff) các từ khóa điều khiển để ra lệnh điều khiển phù hợp, gởi đến bộ điều khiển qua Bluetooth. protected void onActivityResult(int requestCode, int resultCode, Intent data) { if (chophepgui) { //khi kết nối với một thiết bị nào đó rồi mới thực hiện gửi //được super.onActivityResult(requestCode, resultCode, data); if (requestCode == RESULT_SPEECH && resultCode == RESULT_OK) { text = data.getStringArrayListExtra(RecognizerIntent.EXTRA_RESULTS); //lưu chuỗi chuyển hóa từ giọng nói vào listview list_data V2TArrayAdapter = new ArrayAdapter(this, android.R.layout.select_dialog_item, text); list_data.setAdapter(V2TArrayAdapter); //đọc và chuyển nội dung lần lượt lưu vào buff for (int i = 0; i 0) { buff1 =Serial.read() - 0x30; //nhận dữ liệu và chuyển dữ liệu từ mã Ascii thành số nhị //phân thông thường để tiện việc so sánh }}

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 169

CHƯƠNG 11 SỬ DỤNG BLYNK TẠO ỨNG DỤNG ĐIỀU KHIỂN VỚI GOOGLE ASSISTANT 11.1 ĐẶT VẤN ĐỀ Google Assistant là một trợ lý cá nhân ảo được phát triển bởi Google dành cho thiết bị di động và nhà thông minh, được giới thiệu lần đầu tại hội nghị nhà phát triển của hãng vào tháng 5 năm 2016. Không giống như Google Now (có thể được xem là tiền thân của Google Assistant, hỗ trợ các điều khiển trên điện thoại bằng giọng nói), Trợ lý Google có thể tham gia các cuộc trò chuyện hai chiều. Google Assistant hiện tại hỗ trợ rất nhiều ngôn ngữ khác nhau, có tiếng Việt. Các cuộc trò chuyện của Google Assistant được xem là tự nhiên, thông minh nhất hiện nay. Hiện tại Google Assistant có thể trả lời và thực thi rất nhiều công việc như trả lời thời tiết, ngày giờ, chỉ đường, bật nhạc,... Các cuộc trò chuyện ngày càng tự nhiên hơn và đôi khi khá hài hước. Google Assistant cơ bản có thể giải phóng hoàn toàn người dùng việc chạm vào điện thoại hoặc thiết bị thông minh chạy Android như Loa Thông minh chẳng hạn. Hiện tại Google Assistant cực kỳ được ưa chuộng trong các hệ thống điều khiển nhà thông minh, xe hơi,..nhưng nơi mà việc ra lệnh thuận tiện hơn, nhanh hơn việc cầm thiết bị lên và chạm vào để điều khiển. Trong chương này tác giả sẽ trình bày cách để xây dựng một ứng dụng điều khiển hai led đơn thông qua Google assistant. Và việc xây dựng này theo một hướng mới hoàn toàn khác với việc sử dụng Android Studio đã trình bày trong các chương trước. Đó là dùng Blynk để xây dựng. Mục đích ứng dụng khá vui vẻ, bạn đọc có thể dễ dàng làm nhanh và khả năng thành công cao. Điều đó kích thích sự đam mê và sáng tạo đúng không? Nếu một bạn học sinh cấp 2 có đam mê vẫn có thể làm theo hướng dẫn và thành công việc mọi việc khá đơn giản. Các kiến thức lập trình cơ bản được hỗ trợ gần trọn vẹn với các mã nguồn mở phong phú có thể giúp người đọc có thêm một hướng nghiên cứu “nhẹ nhàng” hơn. Sơ đồ hệ thống như hình bên dưới:

Hình 11.1 Sơ đồ hệ thống điều khiển với Google Assistant

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 170

Như sơ đồ hệ thống hình bên trên, ta dùng phần cứng khá quen thuộc là NodeMCU kết nối và điều khiển hai led đơn, một màu xanh và một màu đỏ. Việc điều khiển sẽ được thực hiện từ Google Assistant. Chúng ta biết rằng, trợ lý ảo của Google chúng ta có thể dễ dàng gọi ra bằng các cú pháp “Hey Google” hoặc “OK Google” và sau đó ra lệnh điều khiển. Trong bài này ta dùng các lệnh điều khiển tiếng Việt cho thuận lợi và có cảm giác tự nhiên hơn. Ví dụ ta có thể dùng câu lệnh “Hãy sáng led đỏ” để bật led đỏ chẳng hạn. Chúng ta đã có một chương nói về điều khiển thiết bị bằng giọng nói, việc dùng Google Assistant điều khiển cũng có nhiều điểm tương đồng. Tuy nhiên Google Assistant có sự phản hồi hai chiều, thông minh và tiện dụng hơn.

11.2 XÂY DỰNG ỨNG DỤNG VỚI BLYNK 11.2.1 GIỚI THIỆU VỀ APP BLYNK Blynk là một ứng dụng được thiết kế cho các hệ thống IOTS (Internet of Things). Nó có thể cho phép người dùng có thể tạo ra giao diện một cách nhanh chóng và dễ dàng mà không cần lập trình. Blynk có thể điều khiển phần cứng từ xa, nó có thể hiển thị trạng thái on/off của thiết bị, hiển thị dữ liệu cảm biến…và có thể lưu trữ dữ liệu trên sever của Blynk. Ngoài ra, Blynk là một ứng dụng chạy trên điện thoại nên ta có thể kéo thả, vọc vạch trực tiếp trên điện thoại. Blynk được phát hành trên cả hai nền tảng Android và Ios. Việc phát sinh code tự động Android đã có Blynk lo! Đặc biệt Blynk cung cấp rất nhiều giao diện đẹp mắt để theo dõi các thông số, điều khiển thiết bị trong nhà thông minh. Việc này nếu bạn dùng Android Studio nguyên bản thì sẽ khá là khó khăn.

11.2.2 TẠO MỚI DỰ ÁN TRÊN BLYNK -

Đầu tiên chúng ta phải tải ứng dụng Blynk trên Play Store.

-

Sử dụng tài khoản Gmail hoặc Facebook để đăng ký tài khoản Blynk.

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 171

Hình 11.2 Giao diện đăng nhập Blynk

-

Sau khi đăng nhập xong, ta tiến hành tạo mới một project trên Blynk. Nếu bạn có một ứng dụng sẵn rồi thì có thể mở nó ra và hiệu chỉnh phù hợp.

Hình 11.3 Tạo một ứng dụng mới với Blynk

-

Sau đó lựa chọn phần cứng phần cứng mà chúng ta mà chúng ta sử dụng và đặt tên cho project. Ở đây chúng ta chọn phần cứng là “ESP8266” tên project là “điều khiển led” và sau đó nhấn Create.

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 172

Hình 11.4 Chọn phần cứng cho dự án Blynk

-

Hoàn thành tạo mới project ứng dụng sẽ gửi mã Auth Token vào gmail mà chúng ta đã dùng để đăng ký tài khoản và dùng mã này để làm việc với project vừa khởi tạo.

Hình 11.5 Thông báo gởi mã Auth Token đến tài khoản liên kết

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 173

-

Lựa chọn các Widget phù hợp với thiết kế của mình. Chúng ta thấy các widget được thiết kế sẵn và rất đa dạng. Chúng ta chỉ cần chọn cái phù hợp.

Hình 11.6 Hộp widget của Blynk

-

Bây giờ chúng ta sẽ tiến hành tạo hai nút nhấn để điều khiển bật tắt hai led đơn bằng cách chạm vào “Button” và kéo đến màn hình thiết kế.

Hình 11.7 Giao diện xây dựng các Button điều khiển

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 174

-

Thiết lập các đặc tính cho nút nhấn thứ nhất bằng cách chạm vào nút nhấn đó (nút nhấn thứ 2 chúng cũng làm tương tự). Ở đây ta có thể thiết lập nút nhấn liên kết đến chân nào của ESP, các nhãn ON/OFF tương ứng các mức logic 1/0, thông tin của nút nhấn cần thể hiện. Bạn hãy thử thay đổi thoải mái và kiểm tra sự thay đổi đó ảnh hưởng như thế nào. Không có hư hỏng gì ở đây cả. Bạn không phải lo lắng!

Hình 11.8 Thiết lập các thuộc tính cho nút Button trong Blynk

-

Đặt tên cho nút nhấn thứ nhất là “điều khiển led 1” Mode có 2 chế độ là PUSH (nút nhấn thả nút nhấn trở về trạng thái ban đầu) và SWITCH (nút nhấn thả sẽ chuyển trạng thái, trạng thái đó được giữ nguyên cho đến khi bạn nhấn lần tiếp theo), trong phần này chúng ta chọn là SWITCH.

-

Chạm vào mã PIN để chọn chân, ở đây chúng kết nối led đơn ở chân GPIO16 NodeMCU nên chọn chân là “gp16”. Nếu phần cứng bạn có sự khác biệt, hãy điều chỉnh cho phù hợp.

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 175

Hình 11.9 Thiết chân kết nối cho nút nhấn

Như vậy việc thiết lập đặc tính cho nút nhấn thứ nhất thì đã xong, nút nhấn thứ 2 chúng ta cũng thiết lập tương tự nhưng tại mã PIN chúng ta chọn chân theo sự kết nối của led đơn với chân GPIO của NodeMCU. Sau khi hoàn thành thiết lập cho 2 nút nhấn chúng ta nhấn vào nút Run (Hình tam giác gốc phải) để khởi chạy Blynk.

Hình 11.10 Khởi chạy Blynk

11.3 ĐĂNG NHẬP VÀ CÀI ĐẶT TRÊN IFTTT Trợ lý Google không thể giao tiếp trực tiếp với BLYNK. Để liên kết giữa trợ lý Google và Blynk chúng ta sử dụng IFTTT. If This Then That ( IFTTT) là một dịch vụ web miễn phí. Trong đó, If This (nếu sự việc này xảy ra) sẽ dẫn đến Then That (làm việc kia), được xem

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 176

là nguyên lý hoạt động của câu lệnh. Tức là khi câu lệnh này được kích hoạt thì thông qua IFTTT ứng dụng kia cũng sẽ kích hoạt và thay đổi tương tự. Trong dự án này chúng ta sử dụng WEBHOOKS trên IFTTT để xử lý và update dữ liệu trên sever Blynk. Web hook là một cách cực kỳ hữu ích và tương đối dễ dàng trong việc triển khai các phản ứng sự kiện. Các web hook cung cấp một cơ chế trong đó một ứng dụng server-side có thể thông báo cho một ứng dụng phía client-side khi một sự kiện mới đã xảy ra trên máy chủ. Đầu tiên chúng ta phải đăng nhập vào trang Web IFTTT (ifttt.com). Tài khoản đăng nhập IFTTT phải là tài khoản của Google Assistant. Sau đó, chúng ta sẽ thiết lập câu lệnh để điều khiển bật tắt led 1 còn led 2 chúng ta cũng làm tương tự. Sau khi đăng nhập xong IFTTT thì ta nhấn vào nút Create để tạo một Applet mới như hình bên dưới

Hình 11.11 Tạo một applet trên IFTTT

Sau đó vào mục This.

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 177

Hình 11.12 Tạo điều kiện This

Như chúng ta đã nói phía trên, mục This này sẽ xác định điều kiện xảy ra để thực thi mục Then That. Ở đây ta sử dụng Google Assistant cho việc điều khiển nên ta gắn nó với Google Assistant bằng cách gõ chữ “Google Assistant” vào mục chọn một dịch vụ.

Hình 11.13 Liên kết Google Assistant với IFTTT

Sau đó ta chọn loại Trigger (kích hoạt) là loại nói một câu đơn “Say a simple Phrase”. Tất nhiên trong một số điều khiển khác, mục đích khác bạn có thể chọn loại trigger khác. Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 178

Hình 11.14 Chọn loại trigger cho IFTTT

Ở mục “What do you want to say” (Bạn muốn nói gì?) chúng ta đặt câu lệnh cần nói ở đây. Các câu lệnh điều khiển bạn có thể đặt theo ý các bạn với sự hỗ trợ ngôn ngữ của Google Assistant trên thiết bị. Ở đây tôi chọn là “turn on led 1”. Nếu thiết bị các bạn đã cập nhật Google Assistant phiên bản hỗ trợ tiếng Việt thì bạn có thể đặt câu lệnh tiếng Việt cho thuận tiện trong việc điều khiển. Trong phần “What do you want to say” có đến ba tùy chọn cho chúng ta. Điều đó có nghĩa là chỉ cần bạn nói đúng một trong ba câu lệnh thì nó đều có thể đáp ứng. Bạn cũng có thể tổ hợp các câu lệnh này vừa bằng tiếng Anh và tiếng Việt kết hợp như hình 11.15. “ What do you want the Assistant to say in response?” Đây là câu phản hồi của Google Asistant sau khi mình thực hiện câu lệnh vừa nói. Bạn thích nghe “Chị Gồ” trả lời những lời ngọt tai thì cứ đưa mẫu câu vào đây! Sau khi cài đặt câu lệnh xong thì nhấn vào “Create trigger”. Như vậy ta đã thực hiện xong mục “This”

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 179

Hình 11.15 Thiết lập các câu lệnh trigger cho sự kiện This

Sau khi thực hiện xong mục “This” thì ta tiến hành thực hiện mục “That”

Hình 11.16 Thiết lập sự kiện That

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 180

Ở mục “That” ta chọn Webhooks. Với webhooks, bạn sẽ được nhận “push notification” (đẩy thông báo đến) khi có sự kiện xảy ra trên máy chủ. Bạn sẽ không cần phải thăm dò các API để xác định những sự kiện này đã xảy ra hay chưa. Bạn chỉ cần đăng ký vào một sự kiện với webhooks. Giống như bạn "subscribe" một kênh Youtube, khi nào có video mới bạn sẽ được thông báo ngay lập tức.

Hình 11.17 Chọn dịch vụ Webhooks cho sự kiện That

Sau đó nhấn vào “Make a web request”

Hình 11.18 Chọn hành động cho webhooks

Chúng ta điền đầy đủ các thông tin sau đây, lưu ý phải điền đủ đủ và đúng Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 181

Hình 11.19 Thiết lập các thuộc tính cho hành động (action)

Sau khi điền đầy đủ thông tin thì ta nhấn “Create action” để hoàn thành. Như vậy thông qua IFTTT ta liên kết Google Assistant cho sự kiện trigger “This” và Webhooks cho hành động phản ứng “That”. Hoàn thànhbằng việc nhấn Finish

Hình 11.20 Hoàn thành thiết lập IFTTT

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 182

Như vậy chúng ta điều khiển được led 1 sáng với Google Assistant, bằng cách nói câu lệnh mà chúng ta đã thiết lập ở mục “this”. Phần điều khiển led 1 tắt chúng ta cũng thực hiện tương tự. Ở đây tôi chỉ trình bày các hình ảnh mà không chi tiết các bước nữa.

Hình 11.21 Thiết lập cho điều khiển tắt Led 1 Ta làm điều tương tự để điều khiển sáng/tắt Led 2. Kết quả sau khi chúng ta thiết lập xong như hình 11.22.

Hình 11.22 Kết quả sau khi hoàn thành thiết lập cho hai led

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 183

11.4 BỘ ĐIỀU KHIỂN Nhắc lại phần cứng chúng ta dùng mô đun NodeMCU kết nối hai led đơn qua hai chân D0, D1. Điều khiển mức 1 sáng, mức 0 tắt.

Hình 11.23 Phần cứng kết nối NodeMCU

Bây giờ chúng ta mở phần mềm Adruino IDE để tiến hành viết chương trình cho Nodemcu. Chúng ta thấy chương trình rất đơn giản vì chúng ta sử dụng các thư viện và hàm hỗ trợ gần như hoàn toàn. #define BLYNK_PRINT Serial #include #include char auth[] = " Mã Auth Token "; char ssid[] = "TÊN WIFI"; char pass[] = "PASS WIFI"; void setup() { Serial.begin(9600); Blynk.begin(auth, ssid, pass); } void loop() { Blynk.run(); }

Kết thúc chương 11, chúng ta thấy việc điều khiển các led thông qua mạng Internet, sử dụng luôn cả Google Assistant chạy rất trơn tru. Một ứng dụng IoTs rất “xịn xò” nhưng có thể thực hiện đơn giản thông qua các thao tác. Mục này rất phù hợp hướng dẫn các bạn sinh viên ngoài ngành, các bạn sinh viên mới bắt đầu khám phá lãnh vực IoTs. Đặc biệt Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 184

với học sinh cấp 2, cấp 3 vẫn có thể tham khảo và tự xây dựng các ứng dụng thực tế như điều khiển, giám sát khu vườn, trang trại, các thiết bị nhà thông minh một cách dễ dàng. Và hơn hết, khi tiếp tục xúc với lãnh vực công nghệ, những bước chân đầu tiên như thế này tạo một sự đam mê mãnh liệt đối với các em, kích thích sự tìm tòi, khám phá hơn bao giờ hết. Hi vọng sẽ chương này đạt được mục đích khơi sáng, bùng cháy ngọn lửa yêu khoa học công nghệ của bạn đọc như tác giả đã từng.

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 185

CHƯƠNG 12

WEAR OS VÀ ỨNG DỤNG ĐIỀU KHIỂN

12.1 ĐẶT VẤN ĐỀ Hệ điều hành Android là hệ điều hành không chỉ dành cho mỗi điện thoại di động. Android rồi còn là hệ điều hành dùng cho máy tính bảng (tablet), tivi, mắt kính thông minh, đồng hồ thông minh và xe hơi,..Hướng đến mỗi loại thiết bị thì Android có những tùy chỉnh phù hợp. Ví dụ đối với thiết bị đeo (đồng hồ) thì mặt đồng hồ vuông, hoặc tròn kích thước nhỏ. Do đó giao diện và chức năng phải làm sao cho dễ thao tác, trực quan. Hiện tại nếu chúng ta xây dựng ngôi nhà thông minh sử dụng Google Home làm trung tâm điều khiển thì chúng ta thấy rằng App Google Home đã có sẵn, chúng ta chỉ cần mua thiết bị có hỗ trợ và tiến hành cài đặt (như hình 12.1). Sau khi cài đặt xong thì chúng ta có thể “trò chuyện” tự nhiên với loa Google Home, có thể điều khiển các thiết bị một cách tự nhiên nhất. Chúng ta cũng có thể dùng Google Assistant trên điện thoại để ra lệnh hoặc thao tác điều khiển. Nếu nhà bạn sử dụng Tivi Android, từ remote tivi chúng ta có thể ra lệnh tắt mở đèn, quạt. Tuy nhiên nếu bạn đang đeo một đồng hồ Android, luôn nằm trên tay và luôn ở trạng thái sẵn sàng chờ nhận lệnh điều khiển thì việc giao tiếp với ngôi nhà thông minh càng trở nên dễ dàng hơn. Wear OS tên đầy đủ chính thức là 'Wear OS by Google', trước đây có tên là Android Wear, là phiên bản hệ điều hành mở Android của Google thiết kế cho đồng hồ thông minh và thiết bị đeo khác. Bằng cách kết nối với điện thoại thông minh, Wear OS sẽ tích hợp chức năng Google Assistant và gởi các thông báo từ điện thoại di động đến đồng hồ thông minh. Trong tài liệu này, chúng ta tập trung giải quyết cách xây dựng một ứng dụng Android trên điện thoại thông minh và ứng dụng Android Wear (hiện tại là WearOS) trên đồng hồ thông minh. Từ đó chúng ta sử dụng hai thiết bị này thay đổi dữ liệu Database Firebase để điều khiển ESP8266 bật tắt Led. Như ta đã phân tích, nếu bạn làm một ngôi nhà thông minh theo hệ sinh thái của Google thì có thể việc lập trình này không cần thiết. Nhưng nếu bạn muốn xây dựng một giao diện ứng dụng riêng, điều khiển một số thiết bị “riêng biệt” cho bạn thì đây lại là một vấn đề. Vấn đề chúng ta sẽ bàn thảo là làm sao để viết ứng dụng điều khiển nằm trên chính chiếc đồng hồ chạy Android của bạn. Và hơn thế nữa là các đối tượng điều khiển không chỉ giới hạn trong hệ sinh thái Google. Các đối tượng trong hệ sinh thái Google phải nói là rất tốt, đa dạng. Tuy nhiên hiện tại vẫn có giá thành cao, khó tiếp cận. Hầu hết người dùng nhà thông minh “bình dân” đang lựa chọn các thiết bị hỗ trợ giá Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 186

cả phải chăng hơn, ví dụ các đèn Yeelight, các quạt Xiaomi. Các thiết bị này vẫn nằm trong hệ sinh thái hỗ trợ của Google Home. Trở lại vấn đề chúng ta đang nói, giờ chúng ta sẽ xây dựng một ứng dụng điều khiển từ đồng hồ

Hình 12.1 Giao diện của ứng dụng Google Home

12.2 TẠO MỘT DATABASE FIREBASE Việc tạo mới dự án trên Firebase chúng ta đã bàn thảo rất nhiều ở các chương trình. Tuy nhiên các chương trước đó chúng ta đi theo các tiện lợi là sau khi có dự án Android xong ta mới tiến hành link kết và tạo dự án Firebase từ chính Android Studio. Ở đây chúng ta làm theo một cách khác đó là tiến hành tạo dự án Firebase trước. Thật ra cách này sẽ dài dòng hơn! Nhưng thêm một cách làm cũng hay đúng không cách bạn? Khởi tạo 1 database firebase trên “firebase.google.com”. Các bạn vào trang web https://firebase.google.com/ → Chọn “GET STARTED” → “Add project” và đặt tên cho Project trên Firebase, chọn quốc gia “Vietnam”. → Chọn “CREATE PROJECT”.

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 187

Hình 12.2 Tạo dự án Firebase mới

Sau khi CREATE PROJECT thì cửa sổ nhảy sang bước 2 như hình dưới, các bạn tải file google-services.json về và bỏ vào trong thư mục app/src của project mà bạn tạo → CONTINUE

Hình 12.3 Chép file .json và project Android

Sau bước 2 thì đến bước 3, bạn thêm các dòng code được hướng dẫn từ Firebase như hình dưới, phần này vào phần Android Studio tôi sẽ nói chi tiết hơn các bạn đừng lo.

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 188

Hình 12.4 Hướng dẫn tích hợp Firebase vào Android project

Vậy là xong 3 bước trên. Tiếp theo, trong hình dưới chọn “Add Firebase to your Android app”

Hình 12.5 Chọn dự án Android để tích hợp Firebase

Bây giờ mới đến phần quan trọng, các bạn sẽ vào MainActivity.java trong Android Studio để lấy “Android package name” để đăng ký cho Firebase → Sau đó chọn “REGISTER APP” . Nhớ là phải lấy cho đúng đừng sót chữ nào của package name.

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 189

Vào project Android copy Android package name chép vào ô này. Thật chính xác nhé. Android Package name nằm trong file MainActivity.java tại

Hình 12.6 Thêm Package Name để Add dự án vào firebase

Tiếp sau các bạn vào thiết lập cho phép đọc ghi dữ liệu. Các bạn vào Database → Rule → chuyển thành “true” chỗ read write. Sau đó nhấn PUBLISH.

Hình 12.7 Thiết lập cho phép đọc ghi dữ liệu lên DataFirebase

Sau đó nhấn vào DATA và bạn sẽ thấy cơ sở dữ liệu dạng cây JSON như hình dưới. Bạn có thể tạo các biến dữ liệu tại đây.

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 190

Hình 12.8 Tạo dữ liệu cho DataFirebase

Và như vậy là Database đã sẵn sàng để đọc ghi dữ liệu lên rồi, giờ chúng ta sẽ xây dựng một ứng dụng trên Smartphone để gửi dữ liệu lên Database Firebase thôi. 12.3 TẠO MỘT ỨNG DỤNG TRÊN SMARTPHONE

Việc tạo ứng dụng Android đơn giản như các ứng dụng trước. Không có gì khác biệt. Sau khi khởi tạo xong project ta sẽ chép File Google-services.json vào thư mục. Ở phần Firebase, yêu cầu ta chép các thư viện cho file Gradle. Ta tiến hành chép các dòng code như hướng dẫn bên Firebase lúc nãy vào file build.gradle (project). Lưu ý là các phiên bản Android Studio mới thì Gradle có sự sắp xếp khác biệt một vài điểm. Nhắc lại, nếu bạn liên kết Firebase vào project một cách tự động như đã từng làm ở các chương trước thì các thư viện này được thêm vào tự động và ta không phải làm thủ công.

Hình 12.9 Thêm các thư viện Firebase vào Gradle

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 191

Tiếp theo ta vào file Build.gradle(Module: app) thêm các dòng code như hướng dẫn bên Firebase, sau khi nhập xong nhấn SYNC ở góc trên để đồng bộ.

Hình 12.10 Thêm thư viện vào Build.Gradle(app)

Tiếp theo vào phần layout cho phần mềm, thiết kế một switch (nút gạt điều khiển)

Hình 12.11 Thiết kế giao diện cho ứng dụng trên điện thoại

Đặt ID của Widget này là “switch1”. Sau đó ta qua MainActivity.java để lập trình hoạt động của ứng dụng. Việc việc code cho ứng dụng điều khiển này các bạn xem lại chương Xây dựng các ứng dụng IOTs sử dụng Firebase.

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 192

Hình 12.12 Xây dựng code cho file MainActivity.java

Sau khi viết đoạn code và chạy mô phỏng hoặc chạy trên thiết bị thật ta sẽ thấy các biến trên Firebase được tạo và thay đổi giá trị

Hình 12.13 Kết quả quan sát Firebase khi chạy ứng dụng

12.4 TẠO MỘT ỨNG DỤNG TRÊN SMARTWATCH Nếu bạn có một đồng hồ thông minh chạy Android, bạn hãy tạo project và cài chương trình thực tế lên trên đồng hồ thông minh của mình. Ở đây tao sử dụng một đồng hồ khá cũ đó là Asus Zenwatch 2. Các đồng hồ khác các bạn có thể thay đổi lúc kết nối và đổ chương trình xuống. Hoặc bạn có thể chạy mô phỏng ở phần này trong Android Studio.

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 193

Việc tạo project tương tự như project Android bình thường nhưng lưu ý các bạn phải chọn là Wear OS và mặt đồng hồ tròn/vuông cho phù hợp

Hình 12.14 Tạo ứng dụng cho đồng hồ thông minh

Tùy thuộc vào người lập trình có muốn chọn các giao diện có chứa sẵn các công cụ hỗ trợ hay không, nếu người lập trình muốn giao diện trống thì người lập trình có thể lựa chọn Blank Activity. Tiếp theo sau đó là đặt tên cho ứng dụng, chọn phiên bản hệ điều hành, ngôn ngữ lập trình.

Hình 12.15 Thiết lập ứng dụng Wear OS mới

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 194

Khi hoàn thành hết thao tác thì môi trường để thiết kế, giao diện lập trình sẽ xuất hiện như sau

Hình 12.16 Giao diện xây dựng ứng dụng Wear OS

Về cơ bản, ứng dụng viết trên đồng hồ thông minh cũng được viết tương tự như trên điện thoại thông minh nên tác giả sẽ không thực hiện lại. Vì thế xem như ta đã viết một chương trình cho đồng hồ thông minh. Và bây giờ là cách để nạp chương trình đó cho đồng hồ “ASUS ZENWATCH 2” Mở đồng hồ Android, vào cài đặt → tùy chọn nhà phát triển → chọn “gỡ lỗi qua Wi-Fi” và ta có thể thấy địa chỉ IP của đồng hồ trong hình dưới là 192.168.1.104 cũng như PORT để kết nối với laptop là 5555:

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 195

Hình 12.17 Xem địa chỉ IP của đồng hồ thông minh

Vào thư mục ADB (Android Debugging Bridge - ta có thể tải ADB trên rất nhiều nguồn trên google) → Nhấn Shift và click chuột trái chọn “Open command window here”:

Hình 12.18 Vào cửa sổ command ‘Android Debugging bridge”

Tại Cửa sổ command mở lên ta gõ “adb connect 192.168.1.104:5555”

Hình 12.19 Dòng lệnh để kết nối đồng hồ thông minh với máy tính

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 196

Sau đó ta nạp chương trình qua wifi theo thứ tự như hình 4.42:

Hình 12.20 Debugging thông qua wifi giữa máy tính và đồng hồ

12.5 MẠCH ĐIỀU KHIỂN ESP8266 ĐỌC DỮ LIỆU TỪ FIREBASE Ở đây mình sử dụng ESP8266, chân dương (Anode) của led được gắn vào chân D4 của ESP8266 Chú ý: Để ESP8266 kết nối đọc dữ liệu từ FIREBASE thì phải thêm thư viện Firebase “#include ”. Khối xử lý trung tâm (Modul wifi ESP8266 NodeMCU Mini D1).

Hình 12.21 Modul thu phát wifi ESP8266 NodeMCU Mini D1

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 197

Modul wifi ESP8266 NodeMCU Mini D1 là kit phát triển dựa trên nền chip Wifi SoC ESP8266EX với thiết kế dễ dàng sử dụng vì tích hợp sẵn mạch nạp sử dụng chip CH340 trên bo mạch. Người dùng muốn nạp chương trình chỉ cần kết nối với máy tính qua cáp USB (Loại dùng cho Laptop và điện thoại thông minh). Bạn có thể sử dụng trực tiếp phần mềm IDE của Arduino để lập trình với bộ thư viện riêng để lập trình cho ESP. Chương trình cho ESP8266 đọc dữ liệu từ Firebase điều khiển LED, như đã nói ở trên, chân sử dụng kết nối led là D4. #include #include #define wifiName "wifiName" //Đây là SSID của mạng wifi bạn muốn ESP kết nối tới #define wifiPass "wifiPass" //Đây là password #define LED D4 String chipId = "Den 1"; //Bạn điền đường link của dự án firebase vào bên dưới #define firebaseURl "link_dự_án.firebaseio.com" // #define authCode " nếu dùng thì lấy auth từ dự án firebase, không thì bỏ qua" int onlyt=1,onlys=1; void setupFirebase() { Firebase.begin(firebaseURl, authCode); } void setupWifi() { //kết nối wifi với tên và mật khẩu từ hai mảng đã lưu WiFi.begin(wifiName, wifiPass); Serial.println("Hey i 'm connecting..."); while (WiFi.status() != WL_CONNECTED) { Serial.println("."); delay(500); } Serial.println(); Serial.println("I 'm connected and my IP address: "); Serial.println(WiFi.localIP()); } void setup() { pinMode(LED, OUTPUT); WiFi.mode(WIFI_OFF); delay(50); Serial.begin(115200); delay(10); setupWifi(); setupFirebase(); } void getData() { String path = chipId; FirebaseObject object = Firebase.get(path); String trangthai = object.getString("Trang Thai"); Serial.println("TRANG THAI DEN: "); Serial.println(trangthai); if(trangthai!="\0") { if(trangthai=="SANG") { if(onlys==1) { Firebase.setString(chipId+"/TT","SANG"); onlys=0; onlyt=1;

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 198

}; analogWrite(LED,255); }else { if(onlyt==1) { Firebase.setString(chipId+"/TT","TAT"); onlyt=0; onlys=1; }; analogWrite(LED,0); } } } void loop() { getData(); }

Nếu bạn sử dụng authCode của dự án Firebase thì có thể lấy như hình hướng dẫn bên dưới

Hình 12.22 Hướng dẫn lấy Authcode của dự án Firebase

Như vậy đến đây ta cơ bản đã xây dựng được một ứng dụng IoTs với một chiếc đồng hồ thông minh, việc điều khiển trở nên tiện lợi và đa dạng hơn. Chúc các bạn tiếp tục phát triển những dự án hay phù hợp khác.

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 199

TỔNG KẾT Đến đây các bạn cơ bản đã nắm được các kiến thức nền tảng với lập trình di động trong ứng dụng điều khiển. Các bạn có thể dễ dàng xây dựng một ứng dụng IoTs phù hợp cho riêng mình. Hệ điều hành Android là một hệ điều hành mở, ngày càng có nhiều hỗ trợ người dùng hơn bao giờ hết. Ngày trước việc điều khiển bằng giọng nói, khuôn mặt, vân tay,...có vẻ rất khó khăn, nhưng hiện tại Google cung cấp rất nhiều hàm API để ta dễ dàng thực hiện điều đó. Tác giả cố gắng cập nhật, thêm mới nhiều nội dung. Tuy nhiên kiến thức về lập trình Android trong điều khiển và ứng dụng là rất rộng. Vì thế tác giả cũng chọn lọc một số phần cốt lõi, phổ biến để đưa đến độc giả. Hi vọng ở lần tái bản tiếp theo sẽ có nhiều cải tiến phù hợp hơn. Rất cám ơn quý độc giả, các bạn sinh viên với lòng đam mê khoa học đã đọc hết quyển sách này. Chúc các bạn luôn giữ nhiệt huyết sáng tạo, vận dụng các kiến thức vào thực tế để giúp đất nước ngày càng tươi đẹp và phát triển. Trân trọng.

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 200

TÀI LIỆU THAM KHẢO [1] Nguyễn Văn Hiệp, Lập trình Android trong ứng dụng điều khiển, NXB Đại học Quốc gia TPHCM – 2016 [2] Trang hỗ trợ các nhà lập trình Android http://developer.android.com , 01-09/2020 [3] Diễn đàn lập trình Android http://stackoverflow.com/questions , 25/03/2020 [4] Cộng đồng Arduino Việt Nam http://arduino.vn/, 28/05/2020

Đại học Sư Phạm Kỹ Thuật TPHCM

Trang 201