DeveloperJavaScriptProgramming Language

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 ครับ

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS APIs for Devices</title>
</head>
<body>
<script>
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(success);
}

function success(gps) {
    console.log('lat: ' + gps.coords.latitude);
    console.log('lng: ' + gps.coords.longitude);
	document.getElementById("location").innerHTML = 'lat: ' + gps.coords.latitude + 'lng: ' + gps.coords.longitude;
}
</script>
<p id="location"></p>
</body>
</html>

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

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

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS APIs for Devices</title>
</head>
<body>
<div>
<a href="tel:+0817601415">
    Phone Call
</a>
</div>
<div>
<a href="sms:+0817601415?body=พ่อเมิง%20สบายดีนะ!">
    Send SMS
</a>
</div>
</body>
</html>

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

Screenshot_2015-11-30-22-02-46

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

<a href="tel:+0817601415">
    Phone Call
</a>

Screenshot_2015-11-30-22-03-52

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

<a href="sms:+0817601415?body=พ่อเมิง%20สบายดีนะ!">
    Send SMS
</a>

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

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

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

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

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS APIs for Devices</title>
</head>
<body>
<script>
if (window.DeviceOrientationEvent) {
    window.addEventListener('deviceorientation', function(eventShow) {
        //left-to-right
        console.log(eventShow.gamma);
		document.getElementById("devices").innerHTML = 'Event: ' + eventShow.gamma;
        //front-to-back
        console.log(eventShow.beta);
		document.getElementById("devices").innerHTML = 'Event: ' + eventShow.beta;
		
        console.log(eventShow.alpha);
		document.getElementById("devices").innerHTML = 'Event: ' + eventShow.alpha;
    }, false);
}
</script>
<div id="devices"></div>
</body>
</html>

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

Screenshot_2015-11-30-22-07-10

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

//front-to-back
        console.log(eventShow.beta);
		document.getElementById("devices").innerHTML = 'Event: ' + eventShow.beta;

Screenshot_2015-11-30-22-07-19

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

//left-to-right
        console.log(eventShow.gamma);
		document.getElementById("devices").innerHTML = 'Event: ' + eventShow.gamma;

Screenshot_2015-11-30-22-07-37

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

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

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS APIs for Devices</title>
</head>
<body>
<script>
if (window.DeviceMotionEvent) {
    window.addEventListener('devicemotion', function(motion) {   

        // Acceleration including gravity
        console.log(motion.accelerationIncludingGravity.x);
        console.log(motion.accelerationIncludingGravity.y);
        console.log(motion.accelerationIncludingGravity.z);
		document.getElementById("gx").innerHTML = 'Gravity X: ' + motion.accelerationIncludingGravity.x;
		document.getElementById("gy").innerHTML = 'Gravity Y: ' + motion.accelerationIncludingGravity.x;
		document.getElementById("gz").innerHTML = 'Gravity Z: ' + motion.accelerationIncludingGravity.x;

    }, false);
}
</script>
<h1> Gravity </h1>
<div id="gx"></div>
<div id="gy"></div>
<div id="gz"></div>
</body>
</html>

Screenshot_2015-11-30-22-17-09

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

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

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

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS APIs for Devices</title>
</head>
<script>
function deviceVibrate() {
	if (window.navigator && window.navigator.vibrate) {
	   // Check Supported!
	   alert('supported');
	   navigator.vibrate(1000);
	} else {
	   // Not supported
	   alert('not supported');
	}
}
</script>
</head>
<body>
<button type="button"
onclick="deviceVibrate()">
Vibrate!</button>
</body>
</html>

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

Screenshot_2015-11-30-22-26-47

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

if (window.navigator && window.navigator.vibrate) {
	   // Check Supported!
	   alert('supported');
	   navigator.vibrate(1000);
	} else {
	   // Not supported
	   alert('not supported');
	}

Screenshot_2015-11-30-22-27-03

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

<button type="button"
onclick="deviceVibrate()">
Vibrate!</button>

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

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale = 0.9,maximum-scale = 1.0" />
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
<title>JS APIs for Devices</title>
</head>
<body>
<script>
var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;
function logBattery(battery) {
    console.log(battery.level);
    console.log(battery.charging);
    //console.log(dischargingTime);

    battery.addEventListener('chargingchange', function() {
        console.log('Battery Status: ' + battery.charging);
		
    }, false);
	document.getElementById("percent").innerHTML = 'ระดับ:'+ (battery.level*100) + '%';
	document.getElementById("charging").innerHTML = 'เสียบสายชาร์จ:'+ battery.charging;
}

if (navigator.getBattery) {
    navigator.getBattery().then(logBattery);
} else if (battery) {
    logBattery(battery);
	
}
</script>
<div id="percent"></div>
<div id="charging"></div>
</body>
</html>

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

document.getElementById("percent").innerHTML = 'ระดับ:'+ (battery.level*100) + '%';

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

document.getElementById("charging").innerHTML = 'เสียบสายชาร์จ:'+ battery.charging;

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

Screenshot_2015-11-30-22-34-41

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

LifeHack-10

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

Asst. Prof. Banyapon Poolsawas

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

Related Articles

Back to top button

Adblock Detected

เราตรวจพบว่าคุณใช้ Adblock บนบราวเซอร์ของคุณ,กรุณาปิดระบบ Adblock ก่อนเข้าอ่าน Content ของเรานะครับ, ถือว่าช่วยเหลือกัน