Các file cần quan tầm trong project android

CHƯƠNG 3. THIẾT KẾ PHẦN MỀM GIÁM SÁT, ĐIỀU KHIỂN TỪ XA

3.1 Các file cần quan tầm trong project android

3.1.1 File build.gradle(:app)

Thông qua file này ta có thể chọn phiên bản compiler, cũng như tải các thư viện (module) của bên thư ba ở denpendencies. Cụ thể là lựa chọn compileSDK 13 và tải thư viện thêm thư viện hỗ trỡ tạo MQTT client. Sau khi thay đổi file này nhấn “sync now”

để build và tải thư viện. Trong file này còn nhiều chức khác nữa nhưng trong project này em chỉ tác động vào 2 thuộc tính này.

android {

compileSdk 33 }

dependencies {

implementation 'org.eclipse.paho:org.eclipse.paho.client.mqttv3:1.2.0' }

3.1.2 File main_activity.xml

Đây là file thiết kế giao diện cho màn hình android (vai trò của nó giống file html, css trong thiết web).

Đoạn code bên dưới thiết lập encoding là utf-8 giúp ta gõ tiếng việt. Cặp thẻ tablelayout chứa nội dụng thiết kế giao diện màn hình android. Tablelayout sẽ quy định các phần tử (view con như là button, edit text, textview, switch…) trên giao diện được bố trí dưới dạng bảng (chia thành các cột và các hàng). Các hàng của tablelayout sẽ được xác định bởi số lượng thẻ tablerow và số lượng cột sẽ được xác định dựa vào số lượng view con lớn nhất của một tablerow. Chiều cao của hàng phụ thuộc vào chiều cao lớn nhất của view con trong hàng, chiều rộng của cột phụ thuộc vào chiều rộng lớn nhất của view con trong cột. Trong thẻ mở TableLayout thiết lập các thuộc tính chiều cao, chiều rộng của tablelayout bằng với màn hình (match_parents), thiết lập margin để cách các mép màn hình 5dp, stretchColumns = “1” để cột 1 kéo ra hết cỡ (các cột khác thu gọn vừa đủ chứa nội dung).

Trong cặp thẻ đóng mở TableLayout chứa các tablerow, bên trong các tablerow lại chứa các view con là textview và button.

<?xml version="1.0" encoding="utf-8"?>

<TableLayout

android:layout_height="match_parent"

android:layout_width="match_parent"

android:layout_margin="5dp"

android:stretchColumns="1"

xmlns:android="http://schemas.android.com/apk/res/android">

//Nội dung thiết kế

</TableLayout>

<TableRow>

<TextView android:text="ĐỀ TÀI: Ổ CẮM THÔNG MINH ĐIỀU KHIỂN QUA WIFI "

android:textSize="15sp"

android:textStyle="bold"

android:layout_span="2"

android:gravity="center"/>

</TableRow>

<TableRow> <TextView android:text="Họ và tên: Tạ Anh Tú "/></TableRow>

<TableRow> <TextView android:text="MSSV: 20174311 "/></TableRow>

<TableRow> <TextView android:text="Lớp: 726337 "/></TableRow>

<TableRow>

<TextView android:text=”VRMS" android:gravity="center"/>

<TextView android:text="225V" android:id="@+id/textviewVRMS"/>

</TableRow>

<TableRow>

<TextView android:text="IRMS" android:gravity="center"/>

<TextView android:text="0.02A" android:id="@+id/textviewIRMS"/>

</TableRow>

<TableRow>

<TextView android:text="WATT" android:gravity="center"/>

<TextView android:text="3W" android:id="@+id/textviewWatt"/>

</TableRow>

<TableRow>

<Button android:text="@string/text_button" android:id="@+id/btn_relay"/>

</TableRow>

Đoạn code trên thì các thẻ text view ta có thể thiết lập các thuộc tính như: nội dung chữ hiển thị, kích thước chữ, kiểu chữ in đậm (bold), căn view con vào giữa ô (gravity

= center), gộp 2 ô (span). Ngoài ra ta còn gán cho nó một id riêng biệt để gọi textview này từ file khác. Tương tự với thẻ button ta cũng thiết lập nội dụng hiển thị trên nút nhấn và cũng gán cho nó một id. Sau khi thiết kế xong giao diện màn hình như hình 3.1:

3.1.3 File MainActivity.java

File này có vai trò giống như backend trong lập trình web, sẽ xử lý các sự kiện liên quan đến thao tác của người dùng như nhấn nút, cập nhật dữ liệu qua MQTT. Do đoạn code khá dài nên em sẽ trình bày tổng quan còn phần code chi tiết sẽ để ở phụ lục 5.

• Import các thư viện cần thiết: mqtt, textview, button, log…

• Khai báo các biến, đối tượng của các lớp mqttclient, button, textview Hình 3.1 Giao diện màn hình

• Khi bật ứng dụng lên sự kiện oncreat xảy ra sẽ gọi đến main_activity.xml (file thiết kế iao diện); rồi kết nối với MQTT broker, subcribe các topic IRMS, VRMS, WATT;

• Thiết lập hàm xử lý sự kiện messageArrived xác dữ dữ liệu nhận được thuộc topic thì sẽ tiến hành cập nhật nội dung textview tương ứng.

• Thiết lập hàm xử lý sự kiện nhấn nút setOnClickListener để khi nhân nút sẽ publishMessage với data là ON hoặc OFF đồng thời thay đổi nội dụng hiển thị trên nút là ON hoặc OFF. [5]

• Thiết lập sự kiện thoát ứng dụng onDestroy: sẽ disconnect MQTT broker

3.1.4 File AndroidMainfest.xml

File này dùng để thiết lập chung cho toàn bộ project ví dụ như cấp quyền truy cập internet cho ứng dụng (uses permission INTERNET), thay đổi icon, label (tên) của ứng dụng, xác định activity chạy đầu tiên (một ứng dụng có thể có nhiều giao diện xml và cũng cần có nhiều activity tương ứng nên cần biết activity nào chạy đầu tiên).

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools">

<uses-permission android:name="android.permission.INTERNET"/>

<application

android:allowBackup="true"

android:dataExtractionRules="@xml/data_extraction_rules"

android:fullBackupContent="@xml/backup_rules"

android:icon="@mipmap/ic_launcher"

android:label="@string/app_name"