1. Thiết kế giao diện

Đầu tiên, chúng ta truy cập vào đường link http://appinventor.mit.edu sau đó chọn Create Apps! và đăng nhập bằng gmail để tiếp tục.

Tiếp theo sẽ có bảng hiện ra, kéo xuống dưới ấn I accept the terms of service!, sau đó ấn Continue để tiếp tục:

Chọn START A BLANK PROJECT:

Nhập tên cho dự án của mình rồi ấn OK

Giao diện làm việc sẽ hiện ra:

Chúng ta sẽ kéo phần ListPicker vào trong khu vực có hình điện thoại:

Ý nghĩa của nút này là chúng ta sẽ tạo nút kết nối Bluetooth và hiển thị trạng thái khi đã kết nối

Ở phần Palete kéo xuống dưới click vào Layout, kéo TableArrangement vào dưới phần text for ListPicker1:

Tiếp theo chúng ta sẽ vào phần User Interface kéo 4 Button vào để có thể bật tắt 2 đèn LED:

Ở mục Connectivity trên cột Palette kéo phần BluetoothClient vào giao diện để gán phương thức truyền cho app là điều khiển qua Bluetooth

Sau đó chúng ta sẽ đổi tên cho các chức năng tương ứng hoặc có thể tải lên hình ảnh để có giao diện đẹp hơn:

• Đối với nút Tex for ListPicker1 sẽ đổi thành KẾT NỐI: Ở cột Properties cuộn xuống sẽ có mục đổi tên cho nút

  

• Đối với các nút bật tắt chúng ta có thể tải hình ảnh lên:

  Tại mục Media chúng ta chọn Upload File

  

  Sau đó tải lên hình ảnh nút ON và OFF:

  

  Khi đã có ảnh chúng ta sẽ gán cho từng nút (ví dụ Nút 1 ON):

  Ở mục Image chúng ta chọn ảnh ON sau đó ấn OK

  

  Tiếp theo ở phần TextColor sẽ xóa tên đi và chỉnh sửa kích thước nút phù hợp với giao diện:

  

  Để thuận tiện cho việc chỉnh sửa giao diện các nút chúng ta có thể đổi size để hiển thị rõ hơn:

  

  Tương tự với các nút còn lại chúng ta được giao diện phần app như sau: