แฟ้มสะสมผลงาน

วิ ท ย า ลั ย เ ท ค โ น โ ล ยี อุ ด ม ศึ ก ษ า พ ณิ ช ย ก า ร แฟมสะสม ผลงานการ สอนออนไลน์ ภาคเรี ยนที 1 ปการศึ กษา 2564 อ.คณุตม์ ด้วงแก้ว หมวดคอมพิวเตอร์ธุรกิจ

Android Studio เปน็ เครอ่ื งมือพฒั นา (IDE : Integrated Development Environment) ท่ถี ูกสรา้ งขึ้นมาเพื่อการพัฒนาแอน ดรอยดแ์ อปพลเิ คชั่น การตดิ ตง้ั Android Studio ความต้องการของระบบ เวบ็ ไซต์สาหรบั ดาวนโ์ หลดโปรแกรม https://developer.android.com/studio/index.html

คลกิ DOWNLOAD ANDROID STUDIO และตดิ ต้งั ตามข้นั ตอนปกติ

การใชง้ านและการสร้างโปรเจค เปิดโปรแกรม Android Studio คลิก Start a new Android Studio project เพ่อื เริ่มการสรา้ งโปรเจค

กรอกขอ้ มูลโปรเจค Application name : ช่อื แอพพลิเคชนั่ Company domain : ช่อื บริษทั หรอื namespace ของคุณ Package name : < Company domain > + < Application name > คลกิ Next เพือ่ ไปขัน้ ตอนถดั ไป

เลอื กประเภทของอุปกรณ์ แอพพลเิ คชนั่ ที่พฒั นาต้องการให้ใช้กับอปุ กรณ์ประเภทใด เลือก Phone and Tablet Minimum SDK : เวอรช์ ั่นเก่าท่สี ดุ ของ Android ทีต่ ้องการจะ support คลิก Next เพ่ือไปขนั้ ตอนถดั ไป รอ Installing Request Components คลกิ Next เพ่อื ไปขน้ั ตอนถัดไป

เลอื ก Activity เร่ิมแรก ทตี่ ้องการจะใช้รนั แอพพลิเคชน่ั เลอื ก Empty Activity คลิก Next เพ่อื ไปขนั้ ตอนถัดไป กรอกข้อมลู Activity Activity Name : ช่ือของ Activity

Layout Name : ชื่อของ Layout ซึ่งเป็นของ UI Activity คลกิ Finish เสร็จสน้ิ การสร้างโปรเจค เมอ่ื ได้หนา้ ต่างแบบนี้ ถือว่าการสร้างโปรเจคเสรจ็ เรยี บร้อย โดยจะอธบิ ายสว่ นสาคัญดงั น้ี MainActivity : ไฟล์สาหรับแกไ้ ขโค้ดของ module app

activity_main.xml : ไฟล์สาหรบั แก้ไข UI ของ module app โดยจะมีตัวชว่ ยในการแกไข้ 2 แบบ คอื Design Editor และ Text Editor buil.gradle (Module app) : ไฟล์สาหรบั จัดการ config ของ module app รวมถึงการเรียกใช้ library onCreate method : เมธอดทีจ่ ะทางานเปน็ ลาดับแรกสดุ เมอื่ module app ถกู เรยี กใช้งาน การเรยี กใช้งาน Microgear ไปที่ไฟล์ Gradle Setting > build.gradle (Module app) เพมิ่ compile ‘io.netpie:microgear:1.1.3’ #ระวัง ‘’ เปล่ยี นเป็น single quote ไปใน dependencies และคลิก Sync Now

การสรา้ ง Android Emulator Android Emulator คือ โปรแกรมจาลองอปุ กรณ์โทรศัพท์มอื ถอื Android เสมือน เป็นโปรแกรมที่จะจาลองการทางานของ Android บน PC Computer ไปท่เี มนู Tools > Android > AVD Manager หรือ คลิกท่ี icon ตามภาพด้านล่าง คลิกที่ Create Virtual Device.. เพือ่ เร่ิมการสร้าง Android Emulator

เลอื ก Hardware ตามตอ้ งการ คลกิ Next เพื่อไปขั้นตอนถัดไป เลอื กเวอร์ชัน่ Android คลกิ Next เพอ่ื ไปขน้ั ตอนถดั ไป

จดั การ config ต่างๆ คลิก Finish เสร็จสนิ้ การสรา้ ง Android Emulator คลิกตาม icon เพ่อื รนั Android Emulator ท่ีสร้างไว้

เม่อื รนั เสร็จ จะได้หนา้ ต่าง Android Emulator ดังภาพ

แลปท่ี 1 Microgear android read sensor data from arduino การใชง้ าน Microgear-Android-Studio รับค่าจากเซนเซอร์ DHT ไฟล์ MainActivity https://github.com/chaiwith/workshop-netpie- android/blob/master/lab%201%20android%20monitor/MainActivity.java Copy & Paste All #don’t copy below package com.myname.myapplication; import android.os.Handler; import android.os.Message; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.util.Log; import android.widget.TextView; import io.netpie.microgear.Microgear; import io.netpie.microgear.MicrogearEventListener; public class MainActivity extends AppCompatActivity { private Microgear microgear = new Microgear(this); private String appid = \"appid\"; //APP_ID private String key = \"key\"; //KEY private String secret = \"secret\"; //SECRET private String alias = \"android\"; private TextView TextView_humid; private TextView TextView_temp; Handler handler = new Handler() { @Override public void handleMessage(Message msg) { Bundle bundle = msg.getData(); String humid = bundle.getString(\"humid\"); String temp = bundle.getString(\"temp\"); TextView_humid = (TextView)findViewById(R.id.TextView_humid); TextView_humid.setText(\" \"+humid); TextView_temp = (TextView)findViewById(R.id.TextView_temp); TextView_temp.setText(\" \"+temp); } }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); MicrogearCallBack callback = new MicrogearCallBack(); microgear.setCallback(callback); microgear.connect(appid,key,secret,alias); microgear.subscribe(\"/dht\"); } protected void onDestroy() { super.onDestroy(); microgear.disconnect(); } protected void onResume() { super.onResume(); microgear.bindServiceResume(); }

class MicrogearCallBack implements MicrogearEventListener{ @Override public void onConnect() { Log.i(\"Connected\",\"Now I'm connected with netpie\"); } @Override public void onMessage(String topic, String message) { Message msg = handler.obtainMessage(); Bundle bundle = new Bundle(); String[] message_spit = message.split(\",\"); bundle.putString(\"humid\", message_spit[0]); bundle.putString(\"temp\", message_spit[1]); msg.setData(bundle); handler.sendMessage(msg); Log.i(\"Message\",topic+\" : \"+message); } @Override public void onPresent(String token) { Log.i(\"present\",\"New friend Connect :\"+token); } @Override public void onAbsent(String token) { Log.i(\"absent\",\"Friend lost :\"+token); } @Override public void onDisconnect() { Log.i(\"disconnect\",\"Disconnected\"); } @Override public void onError(String error) { Log.i(\"error\",\"Error : \"+error); } @Override public void onInfo(String info) { Log.i(\"info\",\"Info : \"+info); } } } ในไฟล์ MainActivity จะแบ่งส่วนสาคัญออกเปน็ 4 ส่วน โคด้ สฟี ้า : เปน็ การเรียกใช้ Microgear Library โค้ดสสี ม้ : เป็นการใชง้ าน Microgear โคด้ สีเขยี ว : เปน็ การใช้งาน Event-driven ของ Microgear โค้ดสีม่วง : เปน็ การสรา้ ง TextView เพ่ือใชแ้ สดงผล โดยมี id : textView_humid สาหรับแสดงค่า humid และ id : textView_temp สาหรบั แสดงคา่ temp แก้ไข : (โคด้ สแี ดง) 1. package com.myname.myapplication; ช่ือ package ที่กาหนดไวต้ อนสร้างโปรเจค Package name : < Company domain > + < Application name > 2. appid,key,secret

ไฟล์ activity_main.xml คลิกท่ี Text เพือ่ แก้ไข ui แบบ text editor จะไดร้ ูปตามด้านล่าง https://github.com/chaiwith/workshop-netpie- android/blob/master/lab%201%20android%20monitor/activity_main.xml Copy & Paste All #don’t copy below <?xml version=\"1.0\" encoding=\"utf-8\"?> <android.support.constraint.ConstraintLayout xmlns:android=\"http://schemas.android.com/apk/res/android\" xmlns:app=\"http://schemas.android.com/apk/res-auto\" xmlns:tools=\"http://schemas.android.com/tools\" android:layout_width=\"match_parent\" android:layout_height=\"match_parent\" tools:context=\"com.myname.myapplication.MainActivity\">

<android.support.constraint.Guideline android:layout_width=\"wrap_content\" android:layout_height=\"wrap_content\" android:id=\"@+id/guideline2\" app:layout_constraintGuide_percent=\"0.1\" android:orientation=\"horizontal\" /> <android.support.constraint.Guideline android:id=\"@+id/guideline\" android:layout_width=\"0dp\" android:layout_height=\"0dp\" android:orientation=\"vertical\" app:layout_constraintGuide_percent=\"0.5\" app:layout_constraintTop_toBottomOf=\"@+id/guideline2\"/> <TextView android:id=\"@+id/textView1\" android:layout_width=\"wrap_content\" android:layout_height=\"wrap_content\" android:text=\"Humid :\" android:textAppearance=\"@style/TextAppearance.AppCompat.Display1\" app:layout_constraintRight_toLeftOf=\"@+id/guideline\" app:layout_constraintTop_toTopOf=\"@+id/guideline2\" /> <TextView android:id=\"@+id/textView2\" android:layout_width=\"wrap_content\" android:layout_height=\"wrap_content\" android:text=\"Temp :\" android:textAppearance=\"@style/TextAppearance.AppCompat.Display1\" app:layout_constraintRight_toLeftOf=\"@+id/guideline\" app:layout_constraintTop_toBottomOf=\"@+id/textView1\" /> <TextView android:id=\"@+id/TextView_humid\" android:layout_width=\"wrap_content\" android:layout_height=\"wrap_content\" android:text=\" 0\" android:textAppearance=\"@style/TextAppearance.AppCompat.Display1\" app:layout_constraintLeft_toRightOf=\"@+id/guideline\" app:layout_constraintTop_toTopOf=\"@+id/guideline2\" /> <TextView android:id=\"@+id/TextView_temp\" android:layout_width=\"wrap_content\" android:layout_height=\"wrap_content\" android:text=\" 0\" android:textAppearance=\"@style/TextAppearance.AppCompat.Display1\" app:layout_constraintLeft_toRightOf=\"@+id/guideline\" app:layout_constraintTop_toBottomOf=\"@id/TextView_humid\" /> </android.support.constraint.ConstraintLayout> ในไฟล์ activity_main.xml จะแบ่งสว่ นสาคญั ออกเปน็ 3 สว่ น โค้ดสเี ขียว : TextView ทมี่ ี id : TextView_humid สาหรับแสดงคา่ humid โค้ดสีฟา้ : TextView ทม่ี ี id : TextView_temp สาหรับแสดงค่า temp โดย id ตอ้ งตรงกบั ที่สร้างไวใ้ นไฟล์ MainActivity เปน็ การระบเุ จาะจงจะเซตคา่ จากตวั แปรไหน มาแสดงท่ีไหน แก้ไข : (โค้ดสแี ดง) 1. context=\"com.myname.myapplication.MainActivity ชือ่ package ทกี่ าหนดไวต้ อนสรา้ งโปรเจค Package name : < Company domain > + < Application name >

การรนั แอพพลเิ คชั่นบน Android Emulator ไปทเ่ี มนู Run > > Run ‘app’ หรอื คลกิ ที่ icon ตามภาพดา้ นลา่ ง เลอื ก Emulator ท่ีสร้างไว้ คลกิ OK เพือ่ ยืนยัน

เม่อื รนั เสรจ็ แอพพลเิ คช่นั ในแลปท่ี 1 จะแสดงหน้าตา่ งผลลัพธ์และ icon ดงั ภาพ

แลปท่ี 2 Android Control การใช้งาน Microgear-Android-Studio ควบคมุ ไฟ led ไฟล์ MainActivity https://github.com/chaiwith/workshop-netpie- android/blob/master/lab%202%20android%20control/MainActivity.java Copy & Paste All #don’t copy below package com.myname.myapplication; import android.os.Handler; import android.os.Message; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.util.Log; import android.view.View; import android.widget.Button; import android.widget.TextView; import io.netpie.microgear.Microgear; import io.netpie.microgear.MicrogearEventListener; public class MainActivity extends AppCompatActivity { private Microgear microgear = new Microgear(this); private String appid = \"appid\"; //APP_ID private String key = \"key\"; //KEY private String secret = \"sercret\"; //SECRET private String alias = \"android\"; private TextView myTextView; private Button button_on; private Button button_off; Handler handler = new Handler() { @Override public void handleMessage(Message msg) { Bundle bundle = msg.getData(); String string = bundle.getString(\"state\"); myTextView = (TextView)findViewById(R.id.state); myTextView.setText(\" \"+string); } }; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); MicrogearCallBack callback = new MicrogearCallBack(); microgear.resettoken(); microgear.setCallback(callback); microgear.connect(appid,key,secret,alias); microgear.subscribe(\"/pieled/state\"); button_on = (Button) findViewById(R.id.button_on); button_on.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { microgear.chat(\"pieled\",\"1\"); } }); button_off = (Button) findViewById(R.id.button_off); button_off.setOnClickListener(new View.OnClickListener() { public void onClick(View v) {

microgear.chat(\"pieled\",\"0\"); } }); } protected void onDestroy() { super.onDestroy(); microgear.disconnect(); } protected void onResume() { super.onResume(); microgear.bindServiceResume(); } class MicrogearCallBack implements MicrogearEventListener{ @Override public void onConnect() { Log.i(\"Connected\",\"Now I'm connected with netpie\"); } @Override public void onMessage(String topic, String message) { Message msg = handler.obtainMessage(); Bundle bundle = new Bundle(); if(message.equals(\"1\")){ bundle.putString(\"state\", \"ON\"); }else{ bundle.putString(\"state\", \"OFF\"); } msg.setData(bundle); handler.sendMessage(msg); Log.i(\"Message\",topic+\" : \"+message); } @Override public void onPresent(String token) { Log.i(\"present\",\"New friend Connect :\"+token); } @Override public void onAbsent(String token) { Log.i(\"absent\",\"Friend lost :\"+token); } @Override public void onDisconnect() { Log.i(\"disconnect\",\"Disconnected\"); } @Override public void onError(String error) { Log.i(\"error\",\"Error : \"+error); } @Override public void onInfo(String info) { Log.i(\"info\",\"Info : \"+info); } } } ในไฟล์ MainActivity อธิบายส่วนสาคญั 4 ส่วน โค้ดสสี ม้ : เปน็ การ subscribe topic “/pieled/state” เพ่อื รับรอรบั ข้อความสถานะของ led โค้ดสฟี า้ : เปน็ การสร้างปุ่มสาหรบั สง่ั งานเปิดไฟ led โดยมี id : button_on โค้ดสมี ว่ ง : เปน็ การสร้างปุ่มสาหรบั สง่ั งานปิดไฟ led โดยมี id : button_off

โคด้ สีเขยี ว: เปน็ การสรา้ ง TextView เพ่ือใชแ้ สดงผล โดยมี id : status โคด้ สีน้าเงิน : เปน็ การแสดงสถานะของไฟ led เมือ่ มีการส่งสถานะเข้ามาที่ topic “/pieled/state” โดยมี การเซตค่าสถานะไปที่ TextView แกไ้ ข : (โคด้ สแี ดง) 1. package com.myname.myapplication; ชอ่ื package ท่กี าหนดไว้ตอนสร้างโปรเจค package < Company domain >.< Application name > 2. appid,key,secret ไฟล์ activity_main.xml คลิกที่ Text เพ่อื แก้ไข ui แบบ text editor จะได้รูปตามด้านล่าง

https://github.com/chaiwith/workshop-netpie- android/blob/master/lab%202%20android%20control/activity_main.xml Copy & Paste All #don’t copy below <?xml version=\"1.0\" encoding=\"utf-8\"?> <android.support.constraint.ConstraintLayout xmlns:android=\"http://schemas.android.com/apk/res/android\" xmlns:app=\"http://schemas.android.com/apk/res-auto\" xmlns:tools=\"http://schemas.android.com/tools\" android:layout_width=\"match_parent\" android:layout_height=\"match_parent\" tools:context=\"com.myname.myapplication.MainActivity\"> <android.support.constraint.Guideline android:layout_width=\"wrap_content\" android:layout_height=\"wrap_content\" android:id=\"@+id/guideline\" app:layout_constraintGuide_percent=\"0.1\" android:orientation=\"horizontal\" /> <android.support.constraint.Guideline android:layout_width=\"wrap_content\" android:layout_height=\"wrap_content\" android:id=\"@+id/guideline1\" android:orientation=\"vertical\" app:layout_constraintGuide_percent=\"0.5\" /> <TextView android:id=\"@+id/textView1\" android:layout_width=\"wrap_content\" android:layout_height=\"wrap_content\" android:text=\"State :\" android:textAppearance=\"@style/TextAppearance.AppCompat.Display1\" app:layout_constraintRight_toLeftOf=\"@+id/guideline1\" app:layout_constraintTop_toTopOf=\"@+id/guideline\" /> <TextView android:id=\"@+id/state\" android:layout_width=\"wrap_content\" android:layout_height=\"wrap_content\" android:text=\" ?\" android:textAppearance=\"@style/TextAppearance.AppCompat.Display1\" app:layout_constraintLeft_toLeftOf=\"@+id/guideline1\" app:layout_constraintTop_toTopOf=\"@id/guideline\" /> <Button android:id=\"@+id/button_on\" android:layout_width=\"wrap_content\" android:layout_height=\"wrap_content\" android:text=\"ON\" app:layout_constraintLeft_toLeftOf=\"parent\" app:layout_constraintRight_toRightOf=\"parent\" app:layout_constraintTop_toBottomOf=\"@+id/state\" /> <Button android:id=\"@+id/button_off\" android:layout_width=\"wrap_content\" android:layout_height=\"wrap_content\" android:text=\"OFF\" app:layout_constraintLeft_toLeftOf=\"parent\" app:layout_constraintRight_toRightOf=\"parent\" app:layout_constraintTop_toBottomOf=\"@+id/button_on\" /> </android.support.constraint.ConstraintLayout> ในไฟล์ activity_main.xml จะแบง่ ส่วนสาคญั ออกเปน็ 3 สว่ น โค้ดสีเขียว : TextView ทีม่ ี id : status สาหรับแสดงสถานะของไฟ led

โคด้ สฟี า้ : ปมุ่ ทมี่ ี id : button_on สาหรบั สั่งเปดิ ไฟ led โคด้ สมี ว่ ง : ปมุ่ ทีม่ ี id : button_off สาหรบั สงั่ ปิดไฟ led แก้ไข : (โคด้ สีแดง) 1. context=“com.myname.myapplication.MainActivity” ช่ือ package ทีก่ าหนดไว้ตอนสรา้ งโปรเจค context=“< Company domain >.< Application name >+.MainActivity” เสร็จแลว้ รนั app เพื่อแสดงผลลัพธ์ เม่ือรันเสรจ็ แอพพลิเคช่ันในแลปที่ 2 จะแสดงหน้าต่างผลลพั ธแ์ ละ icon ดงั ภาพ

วิท ย า ลั ย เ ท ค โ น โ ล ยีอุ ด ม ศึ ก ษ า พ ณิ ช ย ก า ร