Hướng dẫn tạo giao diện điều khiển thiết bị qua Bluetooth – tháng 4 năm 2023

Hướng dẫn sử dụng App Inventor

Lập trình Andriod điều khiển qua bluetooth
1. Đăng nhập:
- Truy cập vào địa chỉ ai2.appinventor.mit.edu.
- Tạo tài khoản bằng Google.
- Đăng nhập bằng tài khoản Google.
Sau khi đăng nhập:

2. Dự án – Project:
2.1. Công cụ My Project:

Tác giả : Đặng Thành Tựu 1

 Hướng dẫn tạo giao diện điều khiển thiết bị qua Bluetooth – tháng 4 năm 2023

Trong đó:
- My project: Các dự án đã tạo.
- Start new project: Tạo dự án mới.
- Import project (.aia) from computer…: Đưa dự án từ máy tính lên tài khoản.
- Move To Trash: Xóa dự án (di chuyển vào thùng rác).
- Save project: Lưu dự án.
- Save project as: Lưu thành dự án khác.
- Export selected project (.aia) to my computer: Xuất dự án về máy tính.
2.2. Tạo dự án mới:
- Bước 1: Khởi tạo dự án
Có 2 cách:
+ Chọn Start new project

+ Vào My project chọn Start new project

Tác giả : Đặng Thành Tựu 2

 Hướng dẫn tạo giao diện điều khiển thiết bị qua Bluetooth – tháng 4 năm 2023

- Bước 2: Đặt tên dự án

Sau khi đặt tên dự án tên control_load

Sau đó hệ thống sẽ chuyển sang cửa sổ:

Lưu ý: chọn kích thước giao diện

Tác giả : Đặng Thành Tựu 3

 Hướng dẫn tạo giao diện điều khiển thiết bị qua Bluetooth – tháng 4 năm 2023

Tại cửa sổ thiết kế có 4 cột:

+ Cột 1 - The Palette: sử dụng các công cụ đưa vào giao diện như nút ấn (Button),
nhãn (Label),…
+ Cột 2 - The Viewer: hiển thị giao diện đang thiết kế.
+ Cột 3 - The Components: chứa các đối tượng đã đưa vào giao diện.
+ Cột 4 - The Properties: chứa thuộc tính của từng đối tượng trong giao diện, khi
ta chọn 1 đối tượng trong giao diện thì cột này hiển thị các thuộc tính của đối tượng này
như màu sắc chữ, màu nền,…
- Bước 3: Thiết kế giao diện
- Bước 3.1: Đặt tiêu đề cho giao diện
Hiện tại giao diện có tên Screen1 đổi tên thành Điều khiển thiết bị trong nhà

Tác giả : Đặng Thành Tựu 4

 Hướng dẫn tạo giao diện điều khiển thiết bị qua Bluetooth – tháng 4 năm 2023

+ Cột 3: chọn đối tượng Screen1

+ Cột 4: Tại dòng Title, đặt lại tên


Lưu ý: Trong cột 4, tại dòng AppName mặc định là tên dự án ta đã đặt, muốn đổi
tên của App thì có thể sửa tại đây, sau khi hoàn chỉnh, xuất App sẽ có tên này. Ví dụ:
control_load.apk

Sau khi sửa Title, tại cột 2

Một điểm cần lưu ý khác: cho hiện hoặc ẩn Title

- Bước 3.2: Tạo kết nối Bluetooth

Bước 3.2.1: Tạo kết nối
Tại cột 1 chọn Connectivity, tiếp tục chọn BluetoothClient

Chọn BluetoothClient kéo thả vào cột 2 (giao diện)

Tác giả : Đặng Thành Tựu 5

 Hướng dẫn tạo giao diện điều khiển thiết bị qua Bluetooth – tháng 4 năm 2023

Bước 3.2.2: Tạo nút ấn để chọn tên Bluetooth do xung quanh sẽ có nhiều Bluetooth:
Tại cột 1 chọn ListPicker và thả vào giao diện


Sửa lại nhãn trên ListPicker


Bước 3.2.3: Tạo nút kết nối
Tại cột 1 chọn Button thả vào giao diện


Sau đổi nhãn thành Kết nối

Tác giả : Đặng Thành Tựu 6

 Hướng dẫn tạo giao diện điều khiển thiết bị qua Bluetooth – tháng 4 năm 2023

- Bước 4: Tạo 2 nút tắt/mở thiết bị nhãn ON và OFF

- Bước 4: Viết code cho giao diện

Chọn công cụ Blocks

Sau khi chọn Blocks

Tác giả : Đặng Thành Tựu 7

 Hướng dẫn tạo giao diện điều khiển thiết bị qua Bluetooth – tháng 4 năm 2023

- Bước 4.1: Code cho Bluetooth

+ Bước 4.1.0: Quét Bluetooth trên thiết bị Android (new)

+ Bước 4.1.1: Đối tượng ListPicker

Chia thành 2 giai đoạn:
Giai đoạn 1: Khi mới khởi động, điện thoại sẽ quét các Bluetooth xung quanh
Tại cột 1 chọn ListPicker1
+ Chọn lệnh

Lý do: Khi khởi động App, điện thoại sẽ quét các Bluetooth xung quanh, sau đó
chọn lệnh set như hình

Sau đó chọn đối tượng BluetoothClient1 tại cột 1

Đến đây, sau khi mở App, ta nhấn vào nút Chọn Bluetooth trên điện thì điện thoại
sẽ quét và hiển thị các Bluetooth xung quanh.

Tác giả : Đặng Thành Tựu 8

 Hướng dẫn tạo giao diện điều khiển thiết bị qua Bluetooth – tháng 4 năm 2023

Giai đoạn 2: Chọn Bluetooth và kết nối

Quay lại ListPicker1, chọn tiếp lệnh

Vào Control để lấy lệnh điều khiển if … then

Sau đó kết nối

Nhớ lại sau khi hết giai đoạn 1 thì điện thoại đang hiện ra các Bluetooth xung quanh,
khối đang code có nghĩa là khi ta chọn vào Bluetooh nào trên điện thoại sẽ kết nối vào
Bluetooth đó. Tiếp tục code:
Chọn BluetoothClient1 và ListPicker1 ta được

Mục đích của dòng cuối: Khi kết nối được Bluetooth thì chữ trên nút Kết nối sẽ
chuyển thành Ngắt kết nối để khi ấn vào đó sẽ ngắt kết nối.
+ Bước 4.1.2: Code cho nút Kết nối

Tác giả : Đặng Thành Tựu 9

 Hướng dẫn tạo giao diện điều khiển thiết bị qua Bluetooth – tháng 4 năm 2023

Tương tự, khi ấn vào nút này sẽ đổi chữ Ngắt kết nối thành Kết nối để người dùng
bấm vào sẽ kết nối. Dòng đầu sẽ chuyển thành chữ Chọn Bluetooth
+ Bước 4.1.3: Code cho nút ON

+ Bước 4.1.4: Code cho nút OFF

Lưu ý: Nút ON và OFF gửi dạng số (number) do đó khi viết code arduino thì
sẽ nhận dạng số.
Muốn nhận dạng ký tự thì chọn

3. Đóng gói ứng dụng thành file *.apk

Vào Build chọn 1 trong 2 cách:
- Android App (.apk): tạo file apk cho Android.
- Android App Bundle (.aab): tạo file có đuôi aab

Chọn dòng Android App (.apk)

Chờ hệ thống tạo

Tác giả : Đặng Thành Tựu 10

 Hướng dẫn tạo giao diện điều khiển thiết bị qua Bluetooth – tháng 4 năm 2023

Sau khi thành công sẽ hiện cửa sổ

Có thể bấm vào tải về máy hoặc dùng điện thoại (Android) quét mã QR để cài đặt.
Chọn Dismiss để bỏ qua.
4. Sử dụng:
- Bước 1: Tải App về và cài đặt.
- Bước 2: Mở Bluetooth trên Andriod.
- Bước 3: Kết nối Bluetooth Android với HC-05 (chẳng hạn).
- Bước 4: Mở App trên Andriod.

Tác giả : Đặng Thành Tựu 11

 Hướng dẫn tạo giao diện điều khiển thiết bị qua Bluetooth – tháng 4 năm 2023

- Bước 5: Bấm nút Chọn Bluetooth

- Bước 6: Chọn thiết bị Bluetooth mà Android đã kết nối.

- Bước 7: Sử dụng giao diện.

Tác giả : Đặng Thành Tựu 12
 Hướng dẫn tạo giao diện điều khiển thiết bị qua Bluetooth – tháng 4 năm 2023

- Bước 8: Muốn tắt App thì nên chọn Ngắt kết nối, nếu không lần sau kết nối sẽ
báo là thiết bị đang được sử dụng.
5. Code mẫu viết trên arduino

Nạp code cho arduino, mở monitor quan sát

Tác giả : Đặng Thành Tựu 13

 Hướng dẫn tạo giao diện điều khiển thiết bị qua Bluetooth – tháng 4 năm 2023

6. Làm đẹp giao diện

6.1. Tải các ảnh cần thiết

Cột 3, tại tabe Media chọn Uploaf File…

Chọn các ảnh cần thiết
6.2. Cân chỉnh vị trí các đối tượng
Tại cột 1 vào Layout

Thêm các Layout vào cho phù hợp

Tác giả : Đặng Thành Tựu 14

 Hướng dẫn tạo giao diện điều khiển thiết bị qua Bluetooth – tháng 4 năm 2023

6.3. Thay thế các nút thành các ảnh

Chọn nút “Chọn Bluetooth”, trong cột 4 đến Image để đổi ảnh

Tác giả : Đặng Thành Tựu 15

 Hướng dẫn tạo giao diện điều khiển thiết bị qua Bluetooth – tháng 4 năm 2023

Sau khi OK sẽ đưa ảnh vào màn hình điện thoại, tiếp tục chỉnh chiều cao và ngang
cho phù hợp.
Nên chọn chế độ Pixel.

Tác giả : Đặng Thành Tựu 16

 Hướng dẫn tạo giao diện điều khiển thiết bị qua Bluetooth – tháng 4 năm 2023

Giao diện trên điện thọai

Tác giả : Đặng Thành Tựu 17