Home / Developer  / Hack! JavaScript APIs สำหรับควบคุมมือถือผ่าน Mobile Browser

Hack! JavaScript APIs สำหรับควบคุมมือถือผ่าน Mobile Browser

บทความ Life Hack! เบาๆ แต่แสบสันวันนี้คือการแนะนำ APIs ของ JavaScript เก๋ๆ มาควบคุมการทำงานของอุปกรณ์โทรศัพท์มือถือผ่าน Mobile Web Browser หลังจากที่ใช้ชีวิตในการเขียนโปรแกรมเชื่อมต่อ บอร์ด Microcontroller อย่าง Raspberry Pi A+ และ Arduino มาได้สักระยะตามประสาคนทำวิจัย และครูที่ต้องพัฒนาตนเอง การค้นคว้าหลายๆ ที่ล้มเหลวก็มักจะทำให้เราพบสิ่งแปลกใหม่ที่สามารถนำมาประยุกต์ใช้ หรือบอกต่อให้กับคนที่สนใจเผื่อบางครั้งความผิดพลาดของเราในตอนนั้นอาจจะเป็นความสำเร็จของใครสักคนก็เป็นได้

เรื่องมีอยู่ว่า ชีวิตช่วงหลังงานเยอะ + เลี้ยงลูก เลยต้องหาแนวทางบางสิ่งมา Hack ชีวิต (Life Hacking) สักหน่อยเช่นการทุ่นแรงทำงานถึกๆ ด้วยระบบบางอย่าง หรือการคำนวณการเปิดปิดไฟด้วยอุปกรณ์ชงนม ฯลฯ Hack ชีวิตไปๆ มาๆ ก็เจอ Library น่าสนใจบนเว็บไซต์ตามเทคโนโลยีของ HTML5 ทำงานผ่าน  Browser มาตรฐานซ้ำยังควบคุมอุปกรณ์ได้พอๆ กับ Cordova โดยไม่ต้องผ่าน Node.JS ก็เลยหยิบมาฝากกัน เป็นรูปแบบ JavaScript APIs ทั้งหมดครับ

JavaScript APIs ควบคุมอุปกรณ์มือถือผ่าน Mobile Web Browser:

GPS Location

ค่า Lat, Lng

ค่า Lat, Lng

ไม่มีอะไรมากครับ เก็บการเก็บค่า Lat, Lng ของพิกัดของเราโดยอ้างจาก Browser และสัญญาณเครือข่ายของมือถือก็พอ ให้เราใส่ code ต่อไปนี้ลงในไฟล์ gps.html ครับ

เปิดผ่านเครื่องมือถือก็จะเห็นผลลัพธ์ดังภาพข้างบนแบบชิลๆ แต่ต้องทำการ Allow ข้อมูลก่อนนะครับ (อย่าลืมเปิด Location Services)

Features ส่วนของ Phone Call และ SMS

สร้างไฟล์ phone.html ขึ้นมาใส่ code ต่อไปนี้ลงไปครับ

ใส่ Phone Number ลงไปเวลากดแสดงผลจะเป็นแบบนี้

Screenshot_2015-11-30-22-02-46

กดโทรออกอ้างจาก Code ส่วนนี้

Screenshot_2015-11-30-22-03-52

กดส่ง SMS ให้ต่อ String เริ่มต้นข้อความตามใจชอบพอกดส่งก็จะมี String เริ่มต้นพร้อมเบอร์มาพร้อมเลย

Screenshot_2015-11-30-22-04-01_1

ก็แล้วแต่ว่าจะเอาไปประยุกต์ทำอะไรก็ว่าไปนะครับ

ส่วนของ Screen Orientation หรือการตรวจจับการวางหน้าจอแนวตั้งแนวนอน

บางทีก็เป็นปัญหาโลกแตกนะครับที่ หน้าจอแสดงผลของเว็บไซต์มันพลิกแนวตั้งบ้างนอนบ้างแล้วการแสดงผลก็แตกต่างกันไป ยิ่ง AE ของเอเจนซีดังสมัยนี้ เวลาไปขายงาน (ตอนรับก็มีแต่รับเก่งอังกฤษเก่ง แต่ไม่เคยรับคนที่พร้อมพัฒนาเรื่องความรู้เทรนด์ต่างๆ เลย) พอเจอปัญหานี้เข้าก็อธิบายไม่ได้ งานก็เข้าฝั่งพัฒนาเว็บ ทางออกเดียวคือ คำนวณมันเสียเลยครับ

สร้างไฟล์  device.html มาแล้วใส่ code นี้ครับ

ทดสอบดูหน่อยสิ

Screenshot_2015-11-30-22-07-10

นี่คือแนวตั้ง ตาม Code

Screenshot_2015-11-30-22-07-19

อันนี้ก็แนวนอน พลิกซะ ตาม Code

Screenshot_2015-11-30-22-07-37

รูปนี้ค่ามันเยอะเพราะว่า ผมกลับหัวเล่นเว็บครับ พอ Capture Screen มาก็ได้ค่าตามนี้แหละ

ระบบแรงโน้มถ่วงของเครื่องที่มี Gyro, Gesture วัด Gravity

ลองทดสอบกับเครื่องที่มี Feature ที่ว่าครับสร้างไฟล์ gravity.html มาใส่ code ตามนี้

Screenshot_2015-11-30-22-17-09

ทดสอบคือยื่นมือถือด้วยแขนเดียวแล้วลอง ย่อเข่า แล้ว ยืดเข่าดูจะเห็นตัวเลขที่เปลี่ยนไปอย่างชัดเจนเลยครับ

Vibrator เอ๊ย! Vibration การสั่นของเครื่อง

การเขียน Script ควบคุมการสั่นของเครื่องนั้นต้องเป็น Event ที่เขียนร่วมกับ onClick จะได้ผลมากที่สุด และบางทีบาง Browser บนเครื่องอุปกรณ์ไม่รองรับ หรือไม่ Supported มันครับต้องเช็คให้ดีก่อน

Code ตัวอย่างให้สร้างไฟล์ว่า vibrate.html ขึ้นมา

ทดสอบเช็คก่อนด้วย ฟังก์ชันนี้

Screenshot_2015-11-30-22-26-47

ตัวอย่างข้างบนใช้ไม่ได้

Screenshot_2015-11-30-22-27-03

กดแล้ว Supported ด้วยสักพักจะเกิดการสั่นของเครื่องในมือของเราทันที กดปุ่มที่เขียนว่า “Vibrate!” ดูสิครับ ตาม Code

ตรวจสอบสัญญาณไฟเข้าแบตเตอรี่ ของอุปกรณ์ และระดับพลังงาน Battery Power

เป็น JavaScript APIs ที่ผมมองว่ามันเข้าท่าที่สุดเพราะมันครอบคลุมทุกอุปกรณ์ที่มีการเชื่อมต่อไฟฟ้า หรือสายชาร์จไฟ ผมใช้เขียน Micro-controller หลายตัวจาก JavaScript APIs ตัวนี้ สร้างไฟล์ว่า battery.html ขึ้นมาครับ

ทำการทดสอบก่อนเลยครับ ผลลัพธ์ผมทำการคำนวณตัวเลขออกมาเป็น % ให้แล้วผ่าน

และทำการตรวจสอบสายชาร์จที่มีกระแสไฟฟ้าเข้า จากส่วนนี้ครับ (ส่งค่าเป็น true และ false)

บนมือถือแสดงแบบนี้ (ไม่ได้ ชาร์จแบตมือถือ)

Screenshot_2015-11-30-22-34-41

บนเว็บไซต์แสดงแบบนี้ (มีการชาร์จแบตเครื่องคอมฯ ระหว่างทำงาน กดดูที่ Console ได้)

LifeHack-10

ก็คงจะพอแค่นี้ก่อนแหละครับ ลูกเล่นการใช้ JavaScript APIs ควบคุมอุปกรณ์มือถือ แบบง่ายๆ ที่ผมไปผจญภัยแล้วพบเจอมาจากทั่วสารทิศ หวังว่าคงจะได้ช่วยเหลือพี่น้องนักพัฒนา นักศึกษาได้บ้างนะครับ 😀

Comments

daydevthailand@gmail.com

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ,ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Review overview
NO COMMENTS

Sorry, the comment form is closed at this time.