เขียนเกม TapTapTap และประสบการณ์ Google Play Game Services

กลับมาเขียน Mobile App อีกรอบ ก่อนหน้านี้โดนลากไปเรียน Cloud Specialist ก็เลยต้องกลับไปดู Cloud เกือบ 1 ปีเหมือนย้อนอดีตเลย เรียน Cloud Specialist จบแล้วก็ได้เวลากลับมาเขียน Mobile App ล่ะครับ ครั้งนี้ตั้งใจว่าจะลองอะไรที่ยังไม่ได้ลอง เพราะหลุดวงโคจรไปเกือบ 2 ปีเลย T_T ถ้ายังจำกันได้ ผมเคยพยายามเขียนเกมส์ง่ายๆ ได้ไอเดียจากคุณธีระเรื่องเกมส์บวกเลข ผ่านไปเกือบ 2 ปีกลับมาเขียนเกมส์ใหม่ ที่อยากเขียนเกมเพราะอยากรู้เรื่อง Google Play Game Service ครับ :)

ผมไม่มีไอเดียเรื่องเกมส์เพราะไม่ค่อยได้เล่นเกมส์ แต่ได้แนวคิดดีๆ จาก Ake Exorcist ที่เอา Micro Controller ควบคุม Mouse ให้เล่นเกมส์ในเว็บไซต์แบบอัตโนมัติ เกมที่เล่นเป็นเกมส์ง่ายๆ กติกาคือให้เลือกสีอ่อนให้ถูกมากที่สุดในเวลาที่กำหนดไว้ ผมว่าเป็นเกมส์ที่ไอเดียดีมาก เล่นได้เรื่อยๆ สนุกดีครับ พอได้แนวคิดแล้วก็ดองเอาไว้ใน Any.Do เกือบ 1 เดือนถึงจะได้มานั่งเขียน T_T Google Play Game Services ถูกผนวกกับ Google Play Service มาเรียบร้อยแล้วไม่ต้องกังวลว่า Android เวอร์ชั่นเก่า/ใหม่จะไม่มี Google Play Service API ครับเพราะมันจะถูกอัพเดทให้อัตโนมัติ ตัดปัญหาเรื่องนี้ไปได้เลย สำหรับแหล่งเรียนรู้ก็คงไม่พ้นเว็บ Android Developer ซึ่งข้อมูลใน Google Play Game Services บนเว็บให้ข้อมูลได้ดีมาก และตามสไตล์ของ Google คือ อยากเรียนรู้แนะนำให้ดาวน์โหลดโค้ดตัวอย่าง อ่านตาม document แล้วลองทำตามไปเรื่อยๆ ก็เข้าใจได้เร็วขึ้น

การใช้งาน Google Play Game Services ต้องไปสร้าง Game Service ในหน้า Developer Console ก่อน เพื่อเป็น Service Endpoint ให้กับ App ของเรา

Continue reading

มาเล่น ADB Over Network กัน

Android 4.3+ มีความสามารถด้าน Debugging เพิ่มขึ้นมาคือ ADB Over Network หรือเรียกง่ายๆ ว่า Wifi Debugging หลักการคือคุณสามารถใช้ ADB ได้ทั้งแบบมีสายและไร้สาย ถ้ามี USB Hub เยอะหน่อยก็จะสะดวก แต่ถ้าไม่มีก็สามารถ Debug ผ่าน Wifi ได้ วิธีการง่ายๆ มีดังนี้

อันดับแรกต้องอยู่ในเครือข่ายเดียวกันเสียก่อน ดู IP Address อยู่ในวงเดียวกัน

เสียบสาย USB ที่มือถือเปิด terminal แล้วสั่ง

adb tcpip 5555

เอาสาย USB ออก ที่มือถือเปิดไปที่ Setting > Developer Options เลือก ADB Over Network ดู IP Address และ Port

สั่ง adb connect มาที่มือถือตาม IP Address และ Port ที่กำหนด

adb connect 192.168.88.248:5555

สั่ง adb devices จะพบมือถือของเรา Debug ผ่าน Network แล้ว ลองใช้ ddms ทดสอบดูได้

ถ้าท่านใดที่ต้องการทดสอบ ​Mobile App ในอุปกรณ์หลายๆ ตัวพร้อมกัน ADB Over Network เป็นเครื่องมือช่วยได้ดีครับ

เขียน Custom Watch Face บน Android Wear กัน

ช่วงนี้ใน Google Play Store เริ่มมี App Watch Face มาให้ดาวน์โหลดกันเยอะขึ้น มี Watch Face ใหม่ๆ แทบจะทุกสัปดาห์ มีทั้งแบบฟรีและเสียเงิน ก็เลยคิดว่าถ้าจะเขียน Watch Face ในแบบที่ต้องการบ้างจะทำอย่างไร ซึ่งเท่าที่ลองค้นหาข้อมูลก็พบว่า Watch Face เขียนคล้ายกับ Launcher บน Android คือเขียน Wear App ปกติแต่ไปกำหนดใน AndroidManifest ว่าให้ทำหน้าที่เป็นอะไร ซึ่งถือว่าง่ายมากๆ ลองมาทำเล่นกันครับ

สิ่งที่ต้องมี

  • Android Studio รุ่นล่าสุด
  • Android SDK Rev 20
  • Android Wear System Image

อันดับแรกสร้าง AVD ขึ้นมาก่อนตามนี้

จากนั้น Start AVD เอาไว้ สำหรับท่านที่ใช้ Intel HAXM การทำงานของ Emulator ก็จะเร็วขึ้นมาบ้างนิดหน่อย T_T

สร้าง Project ขึ้นมาใหม่ เลือกเป็น Mobile และ Wear App เลือก Blank Activity ทั้งคู่

จากนั้น แก้ไข Android Manifest ที่ Wear Module เพิ่ม user permission ดังนี้

<uses-permission android:name="com.google.android.permission.PROVIDE_BACKGROUND" />
<uses-permission android:name="android.permission.WAKE_LOCK" />

จากนั้นกำหนดให้ Activity ฝังเป็น background ดังนี้

android:allowEmbedded="true"

เพิ่ม meta-data ลงไป เพื่อให้แสดง preview ตอนเลือกเปลี่ยน watch face ทำภาพขนาด 320×320 ใส่ลงใน res/drawable-hdpi

<meta-data
android:name="com.google.android.clockwork.home.preview"
android:resource="@drawable/ic_preview" />

ในส่วน intent-filter เพิ่ม category เพื่อกำหนดให้แสดงผลเป็น Background

<category android:name="com.google.android.clockwork.home.category.HOME_BACKGROUND" />

ตัวอย่าง Android Manifest

ทีนี้มาทำ Watch Face กัน แบบง่ายๆ แก้ไข layout ในไฟล์ rect_activity_wear.xml และ round_activity_wear.xml เพิ่ม ImageView และ TextClock ลงไปดังนี้

ใครอยากได้ภาพ Background ก็ทำภาพสวยๆ ขนาด 320x320px ใส่ลงไปได้ใน ImageView จากนั้นมาลองทดสอบ Wear App กัน วิธีการทดสอบทำได้ง่ายๆ สั่ง Run App บน AVD ที่เราสร้างขึ้น App จะ Run ขึ้นมาปกติ ให้เลื่อนขวา แล้วกดค้างที่หน้าจอ เพื่อเปลี่ยน watch face คุณก็จะเห็น watch face ของคุณขึ้นมา

วิธีการทำ Package สำหรับเผยแพร่ใน Play Store เนื่องจาก Wear Device ไม่สามารถเชื่อมต่อกับ Play Store ได้โดยตรง จำเป็นต้องใช้ Mobile App เป็น Payload ถ้าสั่งติดตั้ง Mobile App ที่มี Wear App อยู่ด้วย ตัวมือถือจะ Sync App ไปยังนาฬิกาให้อัตโนมัติ วิธีเพิ่ม wear apk ลงไปใน Mobile App ซึ่งก็มีอยู่ 2 วิธี คือ

  • Sign Package ของ Wear App แล้วเพิ่มเข้าไปใน Mobile App เอง
  • Sign Package ของ Wear App แล้วเพิ่มเข้าไปใน Mobile App แบบอัตโนมัติ

ก็เลือกอย่างหลังจะง่ายที่สุดครับ ให้ดู build.gradle ใน Mobile Module ว่าตั้งค่า WearApp เป็น dependencies แล้วหรือยัง (ถ้าเราสร้าง project มาพร้อมกัน Android Studio จะเพิ่ม WearApp เป็น dependency ให้อยู่แล้ว) จากนั้นสั่ง Generated Sign APK ที่ Mobile Module ได้เลย คุณก็จะได้ APK ที่เป็น Mobile App และมี Wear App อยู่ข้างใน ทีนี้ก็เอา Apk ที่ได้ เอาไปทดสอบกัน

วิธีการสร้าง Custom Watch Face นี้อาจไม่ถูกต้องนัก ทำสอบจาก Emulator มีผลข้างเคียงในเรื่องของการแสดงผล Notification และอาการ Screen Flick ซึ่งบนนาฬิกาจริงๆ ไม่รู้ว่ามีอาการแบบเดียวกันหรือไม่ ถ้าใครมี LG G Watch หรือ Gear Live ก็ฝากลองด้วย :P เอาไว้ถ้ามีวิธีการที่ดีกว่านี้ หรือ Google ปล่อย Watch Face API ออกมาแล้ว เดี๋ยวจะมาอัพเดทกันอีกรอบ :)

มาเขียน Notification บน Android Wear กัน

Android Wear เป็น Platform SmartWatch ที่เพิ่งเปิดตัวไปเมื่อไม่นานมานี้ จากงาน Google I/O 2014 ในเบื้องต้น Android Wear เน้นการเชื่อมต่อกับ Smartwatch และ tablet สามารถ share notification ได้อัตโนมัติ โดย notification ที่แสดงผลบน Smartphone จะแสดงผลบน Smartwatch ด้วยเช่นกัน โดยแสดงผลเป็น card ในรูปแบบของ context stream การใช้ notification ที่เชื่อมระหว่าง Smartphone และ Smartwatch สามารถช่วยสร้างประสบการณ์การใช้งานที่ดีให้กับผู้ใช้ได้ หากคุณเพิ่มฟังก์ชั่นการใช้งานเข้าไปให้กับ notification ที่คุณสร้างด้วย

มาลองสร้าง Notification บน Android Wear กัน สำหรับท่านที่เคยเขียน Notification บน Android มาแล้ว อาจจะคุ้นเคยกับ Notification Builder สำหรับ Smartphone กันอยู่แล้ว แต่ถ้าคุณต้องการสร้าง Notification เพื่อให้แสดงผลทั้งบน Smartphone และ Smartwatch ด้วยจะต้องใช้ NotificationCompat Builder สำหรับการใช้งาน NotificationCompat คุณจะต้องเรียกใช้ library จาก Android Support Library มาทดลองเขียนกันครับ

ขั้นแรกสิ่งที่คุณต้องมี

  • Android Studio 0.8.x รุ่นล่าสุด
  • Android Wear System Image ใช้ Atom ได้จะเร็วมาก อย่าลืมติดตั้ง HAXM ด้วย
  • Android Support Library
  • Android Wear App ดาวน์โหลดได้ที่ Google Play Store

Continue reading

อัดวิดีโอหน้าจอบน Android 4.4.2 KitKat

ผมยังรู้สึกตื่นเต้นกับ KitKat อยู่หลังจากตัดสินใจอัพเกรดจาก 4.3 Stock ROM มาเป็น Cyanogen Mod 11 ทำให้ได้เล่นและได้ลองอะไรใหม่ๆ เยอะ โดยเฉพาะคุณมบัติที่เพิ่งโผล่มา คือ Screen Record ครับ โดยปกตินักพัฒนาจะอาศัยโปรแกรม Screen Record จากภายนอกมาจับหน้าจอเพื่อทำ Video แต่ใน KitKat มีโปรแกรมจับหน้าจอใดตัว ซึ่งเรียกใช้ได้ 2 วิธี

วิธีแรกจาก adb นี่แหละครับ คือสั่ง adb shell ให้ไป run โปรแกรม screen record ในเครื่องให้จับหน้าจอให้แล้วบันทึกลงใน sdcard ดังนี้

adb shell screenrecord /sdcard/a.mp4

หากต้องการหยุด ก็กด Ctrl+C เท่านี้ก็ได้วิดีโอหน้าจอแล้ว จากนั้นก็คัดลอกไฟล์จากมือถือลงมาที่เครื่องดังนี้

adb pull /sdcard/a.mp4

วิธีที่ 2 ใช้ Android Studio ที่เป็นเครื่องมือของนักพัฒนานี่แหละครับ เปิดไปที่ Android DDMS จากนั้นหาปุ่มเขียวๆ กดลงไปเลยครับ

จากนั้นจะมีหน้าจอให้ตั้งค่า config เพิ่มเติมถ้าคิดไม่ออกก็กด Start Recording ไปได้เลย

เมื่อกด Start Recording แล้วหน้าจอจะแสดง progress bar พร้อมปุ่ม Stop หากต้องการหยุดบันทึกก็กดปุ่ม Stop ได้เลย

พอกด Stop โปรแกรมก็จะถามว่าจะบันทึกไฟล์ไว้ที่ไหนดังนี้

เลือกไดเรคทอรีที่ต้องการ :)

 

อัพเกรด Galaxy Nexus เป็น KitKat 4.4.2

เนื่องจาก Google ยกเลิกสนับสนุนการอัพเกรด Galaxy Nexus เนื่องจากอายุเกิน 18 เดือน หมดอายุแล้ว T_T ก็เลยต้องรอ Custom ROM ซึ่ง Cyanogen Mod ก็ไม่ทำให้ผิดหวัง ปัญหาคือไม่ official แต่ก็พอใช้ได้ดีกว่าไม่มี ROM อ่ะนะ การที่จะอัพเดท ROM ของ Cyanogen Mod ต้องใช้ Clock Work Mod Recovery ต้อง flash clockworkmod ก่อน วิธีการก็ง่ายมาก unlock bootloader ก่อนดังนี้

adb reboot bootloader

fastboot oem unlock

จากนั้นที่เครื่องจะถามว่าเราต้องการ unlock bootloader หรือไม่ ก็กด Accept ไปครับ จากนั้นก็ boot เครื่องปกติ จากนั้นดาวน์โหลด Cyanogen Mod 11 และ GApps ใส่ลงใน /sdcard จากนั้นดาวน์โหลด Clock Work Mod Recovery มาแล้วสั่ง flash recovery ดังนี้

fastboot flash recovery recovery-clockwork-touch-6.0.4.3-maguro.img

จากนั้น reboot ไปที่ recovery

fastboot boot recovery-clockwork-touch-6.0.4.3-maguro.img

คุณจะเข้าสู่หน้า CWM ให้เลือก wipe data/factory reset จากนั้นเลือก install zip > install zip from /sdcard เลือก flash cm11 และ gapps ตามลำดับ จากนั้นก็สั่ง reboot เครื่อง เท่านี้ก็ได้ KitKat ใช้แล้ว :)

 

อัพเกรด Jelly Bean 4.3 บน Transformer TF101

Tablet Transformer TF101 ของผมใช้ Jelly Bean จาก Custom ROM ของ Rayman FX พัฒนาจาก CM10 ซึ่งผมก็ซนติดตั้ง CM10 อัพเกรดมาเรื่อยๆ จนกระทั่งอาการของเครื่องมันแปลกทำงานช้าจนรับไม่ได้ ก็เลยลองค้นหา ROM ใหม่ พบว่าระยะหลังๆ มีคนทำ ROM หน้าใหม่เกิดขึ้นมาเพิ่มอีกเรื่อยๆ ก็เลยลองสักหน่อย จาก XDA Developer Forum มี ROM ที่น่าสนใจชื่อ KatKiss เป็น Jelly Bean 4.3 พัฒนาโดย Timduru ซึ่ง ROM ตังนี้ต้องติดตั้ง Recovery ตัวใหม่ด้วย จึงจะ Flash ROM ใหม่ลงไปได้ และทำงานได้ถูกต้อง สำหรับ KatKiss รองรับการแสดงผล UI ได้ 2 แบบคือแบบ Tablet และแบบ Phablet ปรับแต่งได้ตามใจชอบ และที่สำคัญ ROM ตัวนี้มาพร้อมกับ Root ไม่ต้องตาม Root กันทีหลัง สำหรับคนที่สนใจก็ลองไปหาติดตั้งกันดูได้ครับ

ต่อมือถือ Android กับ Ubuntu ผ่าน MTP

ผมใช้มือถือ Nexus มาได้ 1 ปี แต่ก็ยังไม่สามารถรับ-ส่ง ไฟล์ผ่านสาย USB ได้ เนื่องจาก Android 4.x ใน Nexus ใช้การเชื่อมต่อผ่านโปรโตคอล MTP และ PTP เท่านั้น ทำให้การใช้งานเครื่อง Nexus ของผมต้องผ่าน ddms หรือไม่ก็ Airdroid สำหรับท่านที่ใช้ระบบปฏิบัติการ Windows อาจไม่ส่งผลกระทบเท่าไร แต่ท่านที่ใช้ Ubuntu ก็คงต้องมาหาทางแก้ไขกัน ใน Ubuntu มีเครื่องมือหลายอย่างในการรับส่งไฟล์ผ่าน MTP เช่น Go-Mtpfs, Gvfs เป็นต้น แต่ทั้งหมดก็สร้างปัญหา หรือที่เรียกว่าใช้งานไม่ได้มาเกือบ 1 ปี แต่ Gvfs และ libmtp ก็ทะยอยแก้ปัญหามาเรื่อยๆ สำหรับท่านที่อยากลอง สามารถติดตั้งเพื่อทดสอบกันได้ จาก PPA ของนักพัฒนา ดังนี้

เพิ่ม PPA ของ Gvfs

sudo add-apt-repository ppa:langdalepl/gvfs-mtp

sudo apt-get update

จากนั้นสั่ง Upgrade

sudo apt-get upgrade

จากนั้น reboot เครื่อง แล้วลองเสียบเครื่อง Nexus ของคุณดูครับ จะพบว่า Ubuntu จะ Mount MTP Device ขึ้นมาให้พร้อมใช้งาน ;)

หมดพลัง

ช่วงเกือบๆ 3 อาทิตย์ที่ผ่านมาผมพยายามเค้นสมองเรื่องการพัฒนา Mobile Application บน Android ก็ต้องเตรียม Presentation ตัวอย่าง App และวิดีโอ Tutorial เพื่อเตรียมไปสอนที่มหาวิทยาลัยราชภัฏพระนครศรีอยุธยา ในช่วงเดือนมิถุนายน แต่เนื่องจากไม่มี Material เหล่านี้เลย ก็ต้องทำกันใหม่หมด ทำให้ต้องทำงาน 3 อย่างพร้อมกัน และด้วยความนึกสนุกก็เลยไปเปิดคอร์สออนไลน์ที่ ClassStart.org ทำให้ผมต้องเร่งทำ Material ข้างต้นให้เร็วขึ้น เพราะเดี๋ยวจะไม่ทันเปิดคอร์สที่ ClassStart.org เอาเป็นว่าเป็น 3 อาทิตย์ที่ทรหดมาก วันนี้เป็นวันสุดท้ายที่จะต้องทำให้เสร็จ ซึ่งช้ากว่ากำหนด 1 สัปดาห์ ผลลัพท์ที่ได้คือ

  • Presentation : Android Mobile App Development จำนวน 8 ตอน
  •  Video Tutorial สอนทำ Workshop จำนวน 60 เรื่อง
  • Source Code เฉลย Workshop เป็น Web Service จำนวน 6 ตัว เป็น Mobile App อีก 47 ตัว
  • คอร์สออนไลน์ที่ ClassStart.org ตอนนี้มีคนลงทะเบียน 65 คน

เครื่องไม้เครื่องมือทั้งหมดที่ใช้ ได้แก่

  • Google Drive
  • Youtube
  • GitHub
  • Git
  • GEdit
  • GIMP
  • Inkscape
  • Shutter
  • Chrome
  • OpenShot
  • Eclipse PDT
  • Eclipse ADT
  • XAMPP
  • Screen capture with Gnome 3

 

มัดรวมเครื่องมือสำหรับออกแบบ UI บน Android

เนื่องจากการออกแบบ UI และทำ UI Prototype ใน Android ใช้พลังงานมหาศาลในการออกแบบ ซึ่งต้องใช้เวลามากกว่า 70% ในการทำซึ่งเป็นช่วงเวลาโหดร้ายมาก เพราะ Android Application ที่ดีจะต้องแสดงผลได้ในทุกขนาดของหน้าจอ ซึ่งอุปกรณ์ที่ใช้ระบบปฏิบัติการ Android มีหน้าจอต่างกันเกือบร้อยแบบซึ่งมีทั้งมือถือ, แท็บเล็ต และหน้าจอโทรทัศน์ T_T ทำให้การออกแบบหน้าจอกินเวลามาก ถ้าต้องการแก้ไข UI นี่แทบจะกระอักเลือดกันเลยทีเดียว ครั้งนี้จะมาแนะนำเครื่องมือที่ใช้สำหรับออกแบบและทำ UI Protype ให้เราเห็นภาพและตัดสินใจได้ว่าจะเอา UI แบบไหนแสดงผลในอุปกรณ์ใด และยังสามารถสร้างภาพ Mockup สำหรับแสดงผลบนหน้าจออุปกรณ์ตระกูล Nexus ได้ด้วย เครื่องมือต่างๆ มีดังนี้

  • Android Asset Studio เป็นเครื่องมือสำหรับสร้าง icon, Action bar
  • Android Action Bar Style Generator เป็นเครื่องมือสร้าง theme สำหรับ Action Bar
  • Android Holo Colors Generator สำหรับสร้าง theme
  • Device frame generator เป็นเครื่องมือสร้างภาพอุปกรณ์+ภาพหน้าจอที่เราต้องการเอาไปใส่ สำหรับตระกูล Nexus
  • Pencil GUI Prototyping Tools เป็นเครื่องมือสร้างภาพหน้าจอ (ตัวนี้เป็นโปรแกรมจากเพื่อนบ้านของเรานี่เอง-เวียดนาม)
  • Fluid UI เป็นเครื่องมือสร้างภาพหน้าจอมีหลายระบบปฏิบัติการให้เลือกทั้ง Windows, Windows Mobile, iPhone, iPad และ Android Phone, Android Tablet แถมมีเครื่องมือที่เรียกว่า Fluid Player สำหรับเล่นตัวอย่าง UI บนอุปกรณ์ต่างๆ ได้ เอาไว้ทดสอบ Flow และนำเสนองานได้

ปิดท้ายด้วยเว็บรวม UI สวยๆ เอาไว้เป็นตัวอย่างสำหรับผู้ที่พัฒนา Mobile App อย่าง Android Patterns สำหรับท่านที่สงสัยว่าหน้าจอสวยๆ แปลกๆ ที่ไม่มีเครื่องมือใน ADT นั้นทำยังไงให้องไปค้นหากันได้ที่ Android View รวบรวมเอาเครื่องมือและไลบรารีต่างๆ ไว้มากมายสามารถไปศึกษากันได้ สุดท้ายเป็นเอกสารแนะนำการออกแบบ UI Guideline บน Android จาก nuuneoi แห่งบริษัท หัวลำโพง จำกัด ผู้พัฒนา App MOLOME