Lesson 14 : ก้าวเข้าสู่ IOT – ตอนที่ 4 IOT ครบวงจรจาก Android ถึง MQTT Broker ส่งต่อ Arduino

ต่อจาก Lesson13 หลังจากที่เราควบคุม Arduino ผ่าน MQTTBox ได้แล้ว บทความนี้จะต่อยอดด้วยการทำ Mobile Application ส่งคำสั่งมาควบคุม Arduino

ระดับความยาก :  

สิ่งที่จะได้จากบทเรียนนี้

อุปกรณ์
ลำดับ ชิ้นส่วน จำนวน
1 Notebook หรือ Computer ติดตั้ง – Android Studio สำหรับในบทความนี้ใช้ Version 2.3 – MQTT Broker 1 เครื่อง
2 ESP8266-ESP01 1 ตัว
3 Arduino UNO R3 Board 1 ตัว

บทความนี้จะยาวหน่อยนะครับ และต้องใช้ความรู้ 3 เรื่องคือ Android, MQTTBroker และ
Arduino ตั้งสติและลุยได้เล้ยยยยย

เริ่มกันเลย!!!
1. สร้างโปรเจคใหม่ใน Android Studio โดยเลือกเมนู File->New และกำหนดชื่อโปรเจค ตามที่ต้องการ

2. สร้างไฟล์ MainActivity และวาง Component ต่าง ๆ ดังภาพ

3. การวาง Component หากวางไม่ได้ ให้ลองเปิด TextFile นี้ Tab Text จากนั้นแก้ไขข้อมูลในช่อง tools:context และ tools:showIn ให้สอดคล้องกับชื่อ Project ที่เราสร้าง

*หากขั้นตอนนี้ติดปัญหาในการตั้งชื่อสามารถ Download ไฟล์ Project นี้ไปใช้งานได้เลยครับ

4. เพิ่ม Jar ไฟล์สำหรับให้ Android รู้จัก MQTT โดยให้ Download 2 ไฟล์นี้ จากนั้น Copy ไปวางใน folder Libs ของ Project (เลือกมุมมองเป็นแบบ Project ก่อนนะครับ เพื่อจะเห็น folder Libs)

5. คลิกขวาที่ไฟล์ jar จากนั้นเลือก Add as library

6. เพิ่มสิทธิการใช้งาน โดยไปที่ไฟล์ AndroidManifest.xml แก้ 2 จุดคือ Permission และเพิ่ม Service MQTT ดังภาพนี้

7. สร้างไฟล์ PahoMqttClient.java เพื่อใช้เป็น Class สำหรับจัดการคำสั่งต่าง ๆ ในการติดต่อสื่อสารกับ MQTT Broker จากนั้น Copy SourceCode นี้ไปวางได้เลยครับ

8. มาจัดการคำสั่งต่าง ๆ สำหรับการกดปุ่มและการแสดงผลที่ไฟล์ MainActivity.java โดยต้องมี Method อย่างน้อยดังนี้

@Override
protected void onCreate(Bundle savedInstanceState) {….

Button mButton = (Button)findViewById(R.id.btnClear);
mButton.setOnClickListener(
new View.OnClickListener() {
public void onClick(View view) {
EditText logText = (EditText)findViewById(R.id.txtLog);
logText.setText(“”);
}
}
);

mButton = (Button)findViewById(R.id.btnSubscriber);
mButton.setOnClickListener(
new View.OnClickListener() {
public void onClick(View view) {
setMessageNotification(“Click”,”Subscriber Click”);
try {

EditText topicText = (EditText)findViewById(R.id.txtTopic);
EditText messageText = (EditText)findViewById(R.id.txtMessage);

pahoMqttClient.subscribe(mqttAndroidClient,topicText.getText().toString(),1);

setMessageNotification(“Click”,”Subscriber Topic :”+ topicText.getText() );
} catch (MqttException e) {

setMessageNotification(“error”,e.getMessage());
}
}
});

mButton = (Button)findViewById(R.id.btnConnect);
mButton.setOnClickListener(
new View.OnClickListener()
{
public void onClick(View view)
{
EditText urlText = (EditText)findViewById(R.id.txtUrl);
mqttAndroidClient = pahoMqttClient.getMqttClient(getApplicationContext(), urlText.getText().toString(), “Client3”);

setMessageNotification(“Connect”,”Try to connect :”+urlText.getText());

mqttAndroidClient.setCallback(new MqttCallbackExtended() {
@Override
public void connectComplete(boolean b, String s) {
setMessageNotification(s,”Connecttion Completed”);
}
@Override
public void connectionLost(Throwable throwable) {
setMessageNotification(“Error”,”Connecttion Lost”);
}
@Override
public void messageArrived(String s, MqttMessage mqttMessage) throws Exception {
setMessageNotification(s, new String(mqttMessage.getPayload()));
}
@Override
public void deliveryComplete(IMqttDeliveryToken iMqttDeliveryToken) {

}
});
}
}
);

mButton = (Button)findViewById(R.id.btnSend);
mButton.setOnClickListener(
new View.OnClickListener()
{
public void onClick(View view)
{
setMessageNotification(“Click”,”Publish Click”);
try {

EditText topicText = (EditText)findViewById(R.id.txtTopic);
EditText messageText = (EditText)findViewById(R.id.txtMessage);

pahoMqttClient.publishMessage(mqttAndroidClient,messageText.getText().toString(),1, topicText.getText().toString());

setMessageNotification(“Click”,”publishMessage Topic :”+ topicText.getText() + ” Msg :” + messageText.getText());
} catch (MqttException e) {

setMessageNotification(“error”,e.getMessage());
} catch (UnsupportedEncodingException e) {
setMessageNotification(“error”,e.getMessage());
}
}
});

….

}

มี Method สำหรับ Write Log ขึ้นที่หน้าจอ

private void setMessageNotification(String s, String s1) {
EditText editText = (EditText)findViewById(R.id.txtLog);Time today = new Time(Time.getCurrentTimezone());
today.setToNow();

//String editTextStr = editText.getText().toString()
editText.setText(editText.getText()+”\r\n”+ today.minute + ” :” + today.second + ” => ” + s + “,”+s1);

}

9. สรุป Class ที่แก้ไขใน Android จะมี 2 Class คือ MainActivity.java และ PahoMqttClient.java และมี XML ที่แก้ไขคือ AndroidManifest.xml มาถึงจุดนี้เราควรจะ Build และ Run Mobile Application ของเราได้

10. ย้อนกลับมาที่ MQTT Broker ของเราครับ ก่อนที่จะลอง Connect จาก Mobile เราลอง Connect MQTT Broker จาก MQTTBox ก่อนโดยใช้ตรวจสอบดังนี้

10.1 ตรวจสอบ Service ของ MQTT Broker ว่า Run สำเร็จหรือไม่ที่หน้าต่าง Services ของ MS-Windows

10.2 เปิด MQTTBox ขึ้นมาและลองส่งคำสั่ง Publish/Subscribe ดูครับ

10.3 หากสองขั้นตอน(10.1 และ 10.2)นี้ผ่าน เราพร้อมที่จะส่งคำสั่งจาก Android ไปที่ MQTT Broker แล้วครับ แต่หากยังไม่ผ่านลองย้อนไปดูบทความ “Lesson 12 : ก้าวเข้าสู่ IOT – ตอนที่ 2 ทดสอบเจ้ายุงน้อย(MQTT) บน Windows กัน” ดูครับ

11. มาถึงขั้นตอนนี้สามารถส่งคำสั่งจาก Mobile ไปที่ MQTT Broker ได้แล้วครับ ลองส่งคำสั่งดังนี้ครับ

11.1 ทดลอง Connect ไปที่ MQTT Broker ก่อนนะครับ กำหนด URL ให้ถูกต้องและกดปุ่ม Connect ครับ จะได้ Message ว่า Connect Completed

11.2 ทดลอง Subscribe โดยกดปุ่ม Subscriber ได้เลยครับ สังเกตุว่า ชื่อ Topic ต้องตรงกับใน MQTTBox นะครับ

11.3 ทดลอง Publish Message มาจาก MQTTBox ครับ Message นี้จะมาปรากฏที่ Mobile ของเราครับ

11.4 ทดลอง Publish Message มาจาก Mobile ครับ Message นี้จะมาปรากฏที่ MQTTBox ของเราครับ

12. ขั้นตอนต่อมาดำเนินการต่อวงจร Arduino จากบทความ “Lesson 13 : ก้าวเข้าสู่ IOT – ตอนที่ 3 สั่งปิดเปิดไฟผ่านโปรโตคอล MQTT” ให้พร้อมไว้ครับ

13. จาก Mobile Application ทดลอง Publish Message ‘{‘hello’:’1′}’ มาที่ MQTT Broker ดูครับ จะเห็นว่า MQTT Broker จะ Forward Message นั้นต่อมาให้ที่ Arduino และจะเห็นไฟ LED ที่ Arduino เปิดปิดตามคำสั่ง ‘{‘hello’:’0′}’ และ ‘{‘hello’:’1′}’ ครับ

14. มาถึงขั้นตอนนี้ เราสามารถควบคุม Arduino ผ่าน Mobile โดยใช้ Protocol MQTT ได้แล้ว ท่านพร้อมสำหรับงาน IOT แล้วครับ เริ่มสร้างสรรค์งานของตัวท่านเองได้เลยครับ

Share ผลงาน
เมื่อน้อง ๆ ทำสำเร็จแล้วอย่าลืมแชร์ให้เพื่อนๆ ดูได้ที่ Facebook MrMakerThailand
และหากน้อง ๆ ทำไม่ได้ ให้ติดต่อมาได้ตลอดเวลาที่ Inbox นะครับ