ข้ามไปที่เนื้อหาหลัก

Hello World Android การใช้งาน App Inventor

App Inventor เป็นเครื่องมือที่ใช้สำหรับสร้างแอพพลิเคชันสำหรับสมาร์ทโฟนและแท็บเล็ตที่เป็นระบบปฏิบัติการ Android ซึ่ง Google ร่วมมือกับ MIT พัฒนาโปรแกรม App inventor ขึ้น ต่อมา Google ถอนตัวออกมาและยกให้ MIT พัฒนาต่อเอง ในนาม MIT App inventor App inventor มีลักษณะการเขียนโปรแกรมแบบ Visual Programming  คือ เขียนโปรแกรมด้วยการต่อบล็อกคำสั่ง โดยโปรแกรมนี้จะให้บริการผ่านอินเตอร์เน็ต (App Inventor server) โดยข้อมูลของโปรเจกต่างๆ จากผู้ใช้ จะถูกเก็บไว้ที่เครื่องแม่ข่ายที่ให้บริการ

การสร้างแอพ มีอยู่สองโหมดที่ต้องสลับทำงานคือ โหมด Designer สำหรับการออกแบบและโหมด Blocks สำหรับการต่อชุดคำสั่งให้ทำงานตามต้องการ

วัตถุที่ลากมาวางบนหน้า Designer จะเรียกว่าคอมโพเน้นท์ (Components) โดยแต่ละคอมโพเน้นท์จะประกอบด้วย Properties (คุณสมบัติ) และ Event (เหตุการณ์) และจะมีคอมโพเน้นท์ (Components) บางตัวที่ไม่แสดงบนหน้าจอแต่จะทำงานด้านหลัง เช่น เสียง  , การติดต่อกับอุปกรณ์มือถือ  , วิดีโอ , sensor เป็นต้น

Properties (คุณสมบัติ) คือการบอกคุณสมบัติของคอมโพเน้นท์แต่ละตัวว่าเป็นยังไร เช่น ปุ่ม จะมีลักษระสีแดง ข้อความเขียนว่า ตกลง สีตัวอักษรสีแดง ขนาดตัวอักษร 16 px เป็นตัวสามารถตั้งค่าในโหมด Designer  และโหมด  Blocks

Event  (เหตุการณ์) คือการสั่งให้คอมโพเน้นท์ทำงานตามที่เรากำหนดในชุดคำสั่ง เช่น เมื่อกดปุ่ม แล้วให้เปลี่ยนสีพื้นหลังของแอพ ซึ่งจะทำงานในส่วนของโหมด block

การ Save งานที่เรากำลังทำอยู่จะ Save อัตโนมัติ แล้วสามารถเปิดได้ทุกที่ทีมีเน็ตผ่านเว็บเบราเซอร์ โดยใช้ Google Account  ของเรา  Log in

โปรแกรมนี้จะทำงานบนเว็บ โดย ลงชื่อเข้าใช้ - บัญชี ของ Google Account เช่น Gmail และ เข้าทำงานได้ที่


http://ai2.appinventor.mit.edu/


เมื่อเริ่มใช้งาน App Inventor ครั้งแรก  โปรแกรมจะแจ้งให้เราทราบว่า ขอใช้ข้อมูลของ Google Account ให้คลิกที่ Allow
 


ข้อตกลงในการให้บริการ และ การใช้โปรแกรม App Inventor  ยอมรับให้คลิก I accept the terms of service!


โปรแกรมจะให้กรอกข้อมูล แบบสอบถาม เกี่ยวกับ App Inventor เรายังไม่พร้อม จะกรอกภายหลัง ก็ให้ คลิก Take Survey Later
 



ติ๊กเลือก Do not Show Again และ คลิก Continue


เริ่มเข้าสู่ โปรแกรม App Inventor 2
 



เริ่มต้นเขียนโปรแกรม ไปที่ Projects -> Start new project
 




ตั้งชื่อ Project เช่น Hello_World แล้วคลิก OK




หน้าตารวมๆ ของ โปรแกรม App Inventor 2
 


เริ่ม ออกแบบหน้าจอ แอพแอนดรอยด์
ลาก Label  จากส่วน Palette กลุ่ม  User Interface ไปวางไว้ที่ ของส่วน Viewer ลงใน  Screen1 




และ ลาก Button ไปวางไว้ ใน  Screen1


เปลี่ยนโหมด ไปที่ โหมด Blocks คลิกที่ Blocks ด้านขวาสุดดังรูป



เข้าสู่ โหมด Blocks


ที่ส่วนของ Blocks คลิกที่ Button1 ที่ Viewer จะแสดง บล็อก ต่างๆ ที่เกี่ยวกับ Button1 เท่านั้น จากนั้นให้คลิกที่ บล็อก when Button1.Click (Event หรือ เหตุการณ์ ที่ Button1 ถูกคลิก)


บล็อก when Button1.Click จะเข้าไปอยู่ในส่วนของ Viewer



ที่ส่วนของ Blocks คลิกที่ Label1 ที่ Viewer จะแสดง บล็อก ต่างๆ ที่เกี่ยวกับ Label1 เท่านั้น จากนั้นให้คลิกที่ บล็อก set Label1.Text  (ตั้งค่าให้ Label1.Text แสดงข้อความ)



จะได้ บล็อก when Button1.Click  และ บล็อก set Label1.Text อยู่ใน Viewer


ลาก บล็อก set Label1.Text ให้เข้าไปอยู่ใน บล็อก when Button1.Click (ถ้าต่อกันสนิทจะมีเสียง)



ที่ส่วนของ Blocks -> Built-in คลิกที่ Text จากนั้นให้คลิกที่ บล็อก " " (เครื่องหมายคำพูด)


" " (เครื่องหมายคำพูด) เข้าไปอยู่ใน Viewer แต่ยังไม่ตรงตำแหน่ง



ลากเครื่องหมายคำพูด ไปต่อที่ Label1.Text to



ในเครื่องหมายคำพูด พิมพ์คำว่า Hello World เข้าไป

ถึงขั้นตอนนี้ โปรแกรม Hello World ของเราก็พร้อมที่จะทำงานแล้วครับ

การทำงานของโปรแกรมก็คือ เมื่อผู้ใช้ คลิกที่ ปุ่ม Button1 ให้ข้อความ Hello World ไปแสดงที่ Label1 ครับ

มาทดสอบแอพ Hello World ที่เราสร้าง

ให้ดาวน์โหลด แอพ QR Code Reader จาก Play สโตร์ เลือก ตัวบนซ้ายมือสุด QR Code Reader Scan
 



โดยไปที่ Build -> App (provide) QR code for .apk)



จะได้ QR code ของโปรแกรม Hello World ให้ใช้ สมาร์ทโฟน ของเรา สแกน QR code เพื่อ ดาวน์โหลด โปรแกรม Hello World เข้าสู่ สมาร์ทโฟน ของเรา
เมื่อสแกน QR code สำเร็จจะขึ้น URL ให้ ดาวน์โหลด ให้ คลิก ตกลง
 

หรือ จะดาวน์โหลด มาที่คอมพิวเตอร์ของเรา แล้ว ก็อปปี้ ไปยัง สมาร์ทโฟน ของเราก็ได้เหมือนกัน
โดยไปที่ Build -> App (save .apk to my computer)


เมื่อดาวน์โหลดเสร็จ ก็ติดตั้งแอพ เหมือนการติดตั้ง แอพทั่วๆไป

เปิดแอพ Hello World ของเรา

หน้าตาโปรแกรม หรือ แอพ Hello World ของเรา
และ เมื่อคลิกที่ Button1 ข้อความ ใน Label1 จะเปลี่ยนเป็น Hello World

เสร็จแล้วครับ Hello World แอพแอนดรอยด์ แอพแรกของเรา

โพสต์ยอดนิยมจากบล็อกนี้

การใช้งาน IR Infrared Obstacle Avoidance Sensor Module

โมดูลเซ็นเซอร์แสงสำหรับตรวจจับวัตถุกีดขวาง   IR Infrared Obstacle Avoidance Sensor Module โมดูลเซ็นเซอร์แสงสำหรับตรวจจับวัตถุกีดขวาง    IR Infrared Obstacle Avoidance Sensor Module โดยโมดูลนี้ จะมีตัวรับและตัวส่ง infrared ในตัว ตัวสัญญาณ(สีขาว) infrared จะส่งสัญญาณออกมา และเมื่อมีวัตถุมาบัง คลื่นสัญญาณ infrared  ที่ถูกสั่งออกมาจะสะท้องกลับไปเข้าตัวรับสัญญาณ (สีดำ) สามารถนำมาใช้ตรวจจับวัตถุที่อยู่ตรงหน้าได้ และสามารถปรับความไว ระยะการตรวจจับ ใกล้หรือไกลได้ ภายตัวเซ็นเซอร์แบบนี้จะมีตัวส่ง Emitter และ ตัวรับ Receiver ติดตั้งภายในตัวเดียวกัน ทำให้ไม่จำเป็นต้องเดินสายไฟทั้งสองฝั่ง เหมือนแบบ Opposed Mode ทำให้การติดตั้งใช้งานได้ง่ายกว่า แต่อย่างไรก็ตามจำเป็นต้องติดตั้งตัวแผ่นสะท้อนหรือ Reflector ไว้ตรงข้ามกับตัวเซ็นเซอร์เอง โดยโฟโต้เซ็นเซอร์แบบที่ใช้แผ่นสะท้อนแบบนี้จะเหมาะสำหรับชิ้นงานที่มีลักษณะทึบแสงไม่เป็นมันวาว เนื่องจากอาจทำให้ตัวเซ็นเซอร์เข้าใจผิดว่าเป็นตัวแผ่นสะท้อน และ ทำให้ทำงานผิดพลาดได้ เซ็นเซอร์แบบนี้จะมีช่วงในการทำงาน หรือ ระยะในการตรวจจับจะได้ใกล้กว่าแบบ O

การติดตั้ง Library ของ DHT Sensor DHT11 , DHT21 , DHT22

การติดตั้ง Library ของ DHT Sensor ไลบรารี DHT ใช้สำหรับในการให้เซ็นเซอร์ DHT  อ่านอุณหภูมิและความชื้นด้วย  Arduino หรือ ESP8266 ได้ คลิกที่นี่เพื่อดาวน์โหลดไลบรารี ของเซ็นเซอร์ DHT https://github.com/adafruit/DHT-sensor-library เปิดโปรแกรม Arduino IDE  ไปที่ Skecth -> Include Library -> Add .ZIP Library... ไปที่ ไลบรารี DHT-sensor-library ที่เรา ดาวน์โหลด มา ตรวจสอบที่ Skecth -> Include Library  จะพบ ไลบรารี DHT sensor library เพิ่มเข้ามาใน Arduino IDE ของเรา ไปที่ Skecth -> Include Library -> Manage Libraries... ไปที่ช่องค้นหา พิมพ์ DHT -> Enter (เพื่อค้นหา DHT sensor library ) เมื่อพบ DHT sensor library แล้ว ให้คลิก More info คลิกที่ Select Vers.. ในตัวอย่าง เลือก Version 1.2.3 คลิก Install คลิก Close เพิ่ม #include <DHT.h> ไปที่ส่วนบนสุดของโค้ด #include <DHT.h> void setup() {   // put your setup code here, to run once: } void loop() {   // put your main

ESP32 #2: การติดตั้ง Arduino core for ESP32 WiFi chip

ในบทความนี้จะเป็นการแนะนำการติดตั้งโปรแกรม Arduino IDE ตั้งแต่ต้น ไปจนถึงการติดตั้งชุดพัฒนา Arduino core for ESP32 WiFi chip และ การตรวจสอบว่าติดตั้งสำเร็จหรือไม่ “Arduino” แต่เดิมเป็นแพลตฟอร์มที่ใช้ในการพัฒนาเฟิร์มแวร์ให้กับบอร์ด Arudino เท่านั้น แต่ภายหลังกลุ่มผู้พัฒนาโปรแกรม Arduino IDE ได้เริ่มรองรับการติดตั้งชุดพัฒนาเฟิร์มแวร์ให้กับบอร์ดอื่น ๆ ด้วย ทำให้บอร์ดอื่น ๆ ที่รองรับการเขียนโปรแกรมด้วยภาษา C/C++ สามารถเข้ามาใช้โปรแกรม Arduino IDE ในการพัฒนาได้ นอกจากข้อดีของโปรแกรม Arduino IDE แล้ว ชุดไลบารี่ต่าง ๆ ที่ทำมารองรับกับแพลตฟอร์ม Arduino ก็จะสามารถนำมาใช้งานกับบอร์ดอื่น ๆ ได้ด้วย การจะใช้ Arduino core for ESP32 กับ Arduino IDE ได้นั้น มีขั้นตอนดังนี้ คือ 1. ติดตั้งโปรแกรม Arduino (IDE) ลิงค์ดาวโหลด Arduino (IDE)  https://www.arduino.cc/en/Main/Software 2. ติดตั้ง แพลตฟอร์ม ESP32 ในการเริ่มต้นเราจะต้องอัปเดตผู้จัดการบอร์ดด้วย URL ที่กำหนดเอง เปิด Arduino IDE และไปที่ File > Preferences คัดลอก URL ด้านล่างลงใน Additional Board Manager URLs: แล้ว คลิก