ช่วงเกือบๆ 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 และทำ 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

ผมโดนทาบทามให้ไปสอน Android หลักสูตร Web Services จริงๆ มีหลายคนยุให้ไปสอน Android หลายรอบแล้ว ซึ่งผมไม่ค่อยชอบสอนเท่าไรนัก เพราะเป็นคนพูดไม่ค่อยรู้เรื่อง แต่ครั้งนี้ดูท่างทางอาจจะได้ไปสอนจริงๆ ก็ได้ หลักสูตรที่สอนไม่มีครับ เพราะคอร์สในลักษณะนี้เผลอๆ ไม่มีในโลก ผมไม่เคยเห็นใครสอนเรื่อง Web Services กันนะ เพราะประสบการณ์มันจะพาไปเอง ไม่จำเป็นต้องไปนั่งเรียนก็ได้ แต่ก็แปลกดีที่มีคนทาบทามให้สอนเรื่องนี้ จากที่ได้สอบถามจากความต้องการของผู้เรียน ก็ไม่ค่อยได้ข้อมูลสักเท่าไร สงสัยได้ร่างหลักสูตรเองแล้วล่ะครับ T_T

จากการสอบถามที่มาที่ไปของหลักสูตรประหลาดนี้ เกิดจากแนวคิดในการอัดฉีดความรู้ให้กับนักศึกษาเพื่อให้มีความพร้อมในการไปทำงานหรือทำธุรกิจ ไม่ใช่เป็นการบ่มเพาะแต่เป็นการฉีดยาแรง เพื่อให้เกิดประสบการณ์จากการแก้ปัญหาจากการทำงาน โครงการต้นแบบ หรือ Case Study ซึ่งนักศึกษาจะได้เล่นของจริง สไตล์ Problems Based Learning ผมว่าแนวความคิดแบบนี้ใช้ได้ และคนที่วางแผนการเรียนการสอนแบบนี้ได้ต้องเป็นคนที่รอบรู้จริงๆ ผมเองก็ใช้วิธีการนี้ในการฝึกที่จะเรียนรู้อะไรใหม่ๆ ตั้งปัญหาหรือสิ่งที่อยากทำและหาทางแก้ปัญหานั้นเป็นขั้นตอนไป แต่การที่จะแก้ปัญหาเหล่านั้นได้ จะต้องเข้าใจปัญหาและมีประสบการณ์มากพอที่จะหาวิธีการแก้ปัญหานั้นๆ ซึ่งสิ่งนี้เป็นจุดแข็งและจุดอ่อนในการเรียนรู้ในลักษณะนี้ หากล้มเลิกกลางทางก็แทบจะไม่ได้อะไรเลย ถ้ากัดฟันสู้ก็จะได้เรียนรู้สิ่งใหม่ที่เราอยากเรียนรู้ แต่ฐานความรู้นั้นจะแคบและเฉพาะทางมากๆ ดังนั้นการเรียนรู้ในลักษณะนี้ต้องมีเวลาเหลือพอที่จะเรียนสิ่งรอบตัวหรือบางสิ่งบางอย่างที่เกี่ยวข้องบ้าง จึงจะเป็นการเติมเต็มความรู้ในส่วนที่ขาดหายไป

ผมเอาตัวเองเป็นหนูทดลองเพื่ออยากรู้อะไรบางอย่างในการทำตลาดซอฟต์แวร์บน Android Market แบบซื่อๆ ไม่ได้มี Business Model อะไรซับซ้อน ผมพยายามเขียน App เอาไปวางได้ประมาณ 12 ตัว ตอนนี้กระจายอยู่ในกลุ่ม การศึกษา, เอนเตอร์เทนเม้น โดยตั้งกลุ่มประเทศเป้าหมายแบบรวมๆ ไม่ได้เจาะไปยังกลุ่มเป้าหมายประเทศใดประเทศหนึ่ง เลยเอา App ที่มีสถิติยอดดาวน์โหลดมากกว่า 10,000 ครั้ง เอามาให้ดูซัก 2 App ผลออกมาดังนี้

การศึกษา

เอนเตอร์เทนเม้น

เนื่องจากยอดดาวน์โหลดในกลุ่มเกมส์ยังมีน้อยมาก เลยยังไม่มีตัวเลขมาให้ดู อ้อลืมบอกไปว่าให้ดูช่องสุดท้ายนะครับ สรุปประเด็นง่ายๆ

  • ถ้ามีสถิติเบื้องต้น ในแต่ละกลุ่ม Education เช่น ลูกค้าที่เกาหลีเยอะกว่าญี่ปุ่น การเลือกตลาด/เลือกทำ App ได้ง่ายมากขึ้น ในกรณีไม่รู้จะทำ App อะไรขาย ซึ่งมีประโยชน์มาก
  • Business Model, Innovation, Idea เป็นสิ่งจำเป็นมากในการทำตลาดบน Online Store อื่นๆ ไม่ว่าจะเป็น Play Store, Windows Store, App World หรือแม้กระทั่ง App Store

ทิ้งท้ายอีกหน่อย เพราะว่ายังรู้สึกเสียใจที่คนไทยยังค่าบัญชีเป็น “คนขาย” ไม่ได้ดังนั้น Business Model จึงต้องเปลี่ยนเป็นลักษณะอื่นมากกว่าการขาย App ซึ่งถ้าคิดจากยอดดาวน์โหลด App ของผม โดยรวมมากกว่า 80,000 ครั้ง ก็น่าจะได้เงิน (แบบตรง) ประมาณ 80,000×30=2,400,000 บาท หัก 30% เหลือสุทธิที่จะได้ 1,680,000 บาท แต่ตอนนี้ผมได้เงินจาก App (Business Model แบบโง่ๆ) แค่ 4,539.36 บาท ห่างไกลจากความเป็นจริงมาก :P

ผมมีโครงการเขียน Mobile App ใน 1 สัปดาห์ สัปดาห์ที่ผ่านมานึกอยากเขียนเกมส์และได้แนวคิดเกมส์บวกเลขจากคุณ Teera Laiteerapong ก็เลยได้เขียนเกมส์บวกเลข เพื่อกันลืมเลย Blog ขั้นตอนเล่าการพัฒนาแต่ละวันเอาไว้ ตลอดระยะเวลา 1 อาทิตย์ เป็นซีรี่ตามติดชีวิตเด็กโข่งสร้างเกมส์ มี 7 ตอน ดังนี้

สำหรับอาทิตย์นี้ไม่มีโครงการเขียน Mobile App แต่มาแก้ไขและอัพเดทเพิ่มเติมให้เกมส์ดูดีมากขึ้น และออกตัวจริงบน Play Store สักทีเพราะติดวงเล็บ Beta มา 1 อาทิตย์แล้ว

สำหรับท่านใดอยากลองฝีมือบวกเลขก็ดาวน์โหลด App ไปเล่นได้ที่

เนื่องจากใช้ Galaxy Nexus และได้อัพเกรดเป็น Android 4.2 เรียบร้อยแล้ว แต่ก็มีเรื่องขัดใจหลายอย่างดังนี้

- หน้าจอดูเล็กลง
- Clock Widget แสดงผลแปลกๆ คือตัวหนาในเลขชั่วโมง ตัวบางในเลขนาที เป็นทั้งหน้า lock screen และหน้า home screen
- ไม่มีเดือนธันวาคมส่วน Event ใน App People

บางอย่างน่าจะใส่เข้ามาด้วย เช่น Clear Recent Task ก็ไม่มีเพิ่มเข้ามา ซึ่งน่าเสียดาย แต่ผมก็ชอบของเล่นเล็กๆ อย่าง shotcut menu ที่ซ่อนอยู่ใน notification bar ผมว่ามันน่ารักดี แต่เรียกใช้งานยากไปหน่อย ต้องลาก notification bar ลง กดปุ่ม แล้วก็กดปุ่มเลือกการทำงานอีกที อ้ออีกอย่างหนึ่งโหมดถ่ายภาพแบบ Sphere อันนี้สนุกมากหมุนตัวจนเมื่อยเลย

ผ่านมา 6 วัน วันนี้วันสุดท้ายแล้วครับ สำหรับ Blog สไตล์ Reality ตามติดชีวิตเด็กโข่งสร้างเกมส์ เข้าเรื่องกันเลยดีกว่า เมื่อวานถอดใจกับ GREE แล้วไปซบอก OpenShift Cloud Platfrom as a Service และ CakePHP สร้าง RESTFull Web Service ขึ้นมาเพื่อทำหน้าที่แทน GREE ทำหน้าที่เก็บ Score ของเกมส์จากผู้เล่นทั่วโลก (ดูยิ่งใหญ่มากเลย) วันนี้จะมาเชื่อมโยง Mobile App ไปยัง Web Service กันครับ

หน้าที่หลักของ Web Service ของเราตอนนี้คือการรับข้อมูลจาก Mobile App ในกรณีที่ Mobile App ประมวลผลแล้วว่าจะส่งข้อมูลไปยัง Server โดยใช้เงื่อนไข 2 อย่างคือ

  • มีคะแนน High Score
  • เชื่อมต่อ Internet ได้

เมื่อผู้เล่นรู้ผลคะแนน App จะทำการเชื่อมต่อกับ Web Service และส่งผลคะแนนไปยัง Server โดยอัตโนมัติ กรณีที่ส่งผลคะแนนไม่ได้ก็เสียใจด้วยครับ :) หน้าตาของ World Leaderboard เป็นอย่างนี้ครับ

สำหรับท่านใดอยากลองฝีมือบวกเลขก็ดาวน์โหลด App ไปเล่นได้ที่

เกมส์นี้ใช้สัญญาอนุญาติแบบ GNU/GPL V3 พัฒนาต่อยอดได้ที่ GitHub

ตั้งใจว่าจะดู GREE Social Network Game ต่อแต่ลงทะเบียนสร้าง App บน Cloud PaaS (Platform as a Service) ของ OpenShift ไว้ก็เลยได้กกลับมาตายรัง ขอถอนตัวจาก GREE มาซบอก OpenShift อีกครั้ง (ไปไหนไม่รอด) ในเมื่อตัดสินใจแล้วก็ต้องเดินหน้าต่อครับ แผนคือเราจะมาสร้าง RESTFul Web Service บน OpenShift กัน ซึ่ง Service ที่มีได้แก่

  • ลงทะเบียนสมาชิก ~ นักพัฒนาลงทะเบียน จะได้ล็อกอินและรหัสผ่านที่กำหนด
  • ล็อกอิน ~ ล็อกอินเพื่อใช้งานระบบ เช่น ลงทะเบียนแอพ เป็นต้น
  • ลงทะเบียนแอพลิเคชัน ~ ลงทะเบียนแอพ ได้กุญแจมา 1 ดอก
  • ส่งคะแนน ~ ส่งคะแนนโดยใช้กุญแจแอพ
  • ขอตารางสรุปคะแนน ~ ขอตารางสรุปคะแนนใช้กุญแจแอพ

ระบบเก็บข้อมูลคร่าวๆ แบบนี้ครับ ถ้าดูเผินๆ จะเหมือนกับ Service อื่นทั่วไป ถ้าใครเคยใช้ GREE ก็คงจะคุ้นกันอยู่ :P แฮะๆ ลอก GREE มาอ่ะ การเก็บข้อมูลและฟีเจอร์จะไม่ละเอียดเหมือนกับ GREE ครับ แต่วิธีการใช้งานเหมือนกัน (พยายามลากให้ดูดี จริงๆ กะจะลอกจาก GREE ต่างหาก) หน้าตาจะแบนๆ อย่างนี้

นี่คือ OpenShift Cloud PaaS ที่เราใช้กัน (Cloud ของจริงนะจ๊ะ ไม่ใช่ Hosting)

หน้าตาแบนๆ ของ Service ยังไม่ได้ทำอะไรเพิ่ม และยังใช้ไม่ได้ T_T

ทดสอบบนเครื่อง local ส่งค่าเพื่อลงทะเบียน App ไม่มี pubkey ลงทะเบียนไม่ได้นะจ๊ะ

ผลตารางคะแนนหน้าตาประหลาดๆ

เอาข้อมูลมาทำให้สวยหน่อย

สุดท้ายได้ Mock up ตาราง Leader Board ดังนี้

อ้อลืมบอกไปว่า RESTFull Web Service ผมใช้ CakePHP จริงๆ จะใช้อะไรก็ได้ แต่อยากย้อนความหลังกันนิดหน่อย เลยกลับมาเขียน CakePHP อีกรอบ :) วันนี้มีความคืบหน้าแค่นี่ครับ กำลังสงสัยว่าอาทิตย์นี้ เกมส์จะเสร็จมั๊ยเนี่ย มีคนถามว่าผมใช้เครื่องมืออะไรพัฒนาซอฟต์แวร์ ขอสรุปให้นิดนึงครับ

  • Eclipse JDT, ADT, PDT ~ รวมอยู่ในตัวเดียว
  • Java ~ ผมเกลียด Java มาก จากใจจริงเลยล่ะ
  • PHP ~ บางครั้งใช้ Zend Platform เกาะ Zend Server บน PHP Cloud แล้วแต่อารมณ์จะพาไป
  • CakePHP, Zend Framwork, Lanai-Core ~ ว่างๆ ก็ใช้ Framework เขียน App แต่ตัวหลังขายใปละและไม่ได้ทำต่อ
  • Git + GitHub ~ ย้ายมาหลายที่ ใช้เครื่องมือจัดการโค้ดมาหลายตัว จบที่ GitHub ไม่ใช่เพราะ GitHub ถูกใจผม แต่เพราะว่าโควต้าของที่อื่นเต็มหมดแล้ว T_T
  • MySQL ~ ส่วนใหญ่ใช้ Command Line ไม่รู้เลิกใช้ Command Line ไม่ได้ซักที
  • MySQL Workbench + Admin + Browser ~ เป็น MySQL GUI ที่ใช้งานง่าย ไม่ยังไม่เท่า dbDesigner ที่เคยใช้ (เดี๋ยวนี้เขายังทำต่อมั๊ย)
  • PHP MyAdmin ~ Web GUI ใช้เฉพาะช่วงย้ายข้อมูลไปที่ Server ที่ไม่ให้ใช้ Command Line พอจบงานก็เอาออก :)
  • Cloud (IaaS,PaaS) ~ อันนี้แล้วแต่อารมณ์และลักษณะงาน แปรผันตามจำนวนเงินในกระเป๋า บางทีใช้ AWS ไม่ก็ HP Cloud พอเงินเริ่มหมดก็ไปใช้ Cloud Sigma, EngineYard, dotCloud, Zend Developer Cloud ลงท้ายที่ OpenShift

…ติดตามตอนต่อไป

กลับมาเขียน Blog ต่อ เนื่องจากแก้ไขเกมส์อยู่หลายอย่าง ทั้งส่วนตั้งคำถาม เกณฑ์การให้คะแนนแบบใหม่ เพราะคะแนนกระโดดเยอะมากไปหน่อย หันมาใช้ Bonus เป็นเวลาที่เหลือเป็นคะแนนเสริม และแก้ Bug เล็กน้อย เช่น ได้ได้เรื่อยๆ โดยเวลาไม่จำกัด T_T เป็นต้น วันนี้ตั้งใจจะมาลอง OpenFeint ซึ่งเป็นโซเชียลเน็ตเวิร์คของคนเล่นเกมส์ เก็บคะแนนแข่งกันกับเพื่อนๆ ที่เล่นเกมส์เดียวกันได้ แต่ทว่า OpenFeint ถูกซื้อโดย GREE บริษัทยักษ์ใหญ่จากญี่ปุ่นทำให้ ต้องไปใช้ GREE โดยปริยาย ซึ่งจากที่ทดสอบ GREE ในเบื้องต้น พบว่า Package หลักในส่วน GreePlatform ผม Build ไม่ผ่าน เนื่องจากสาเหตุอะไรไม่ทราบ ก็เลยขอพักเรื่อง GREE ไปก่อน

วันนี้ก็เลยได้มาทำส่วน UI เพิ่มอีก 2 ส่วนคือ ส่วนแสดงผลคะแนน หากยังจำกันได้ของเดิมเป็น Dialog Box ธรรมดาๆ ครั้งนี้ก็เลยเปลี่ยนมาเป็น Custom Layout ซะเลย ได้หน้าตาสวยแบบนี้ครับ

ดูใน Tablet จะหน้าตาแบบนี้

อีกส่วนที่เพิ่มเข้ามาเป็นเสียงครับ ผมเลือกเสียง Effect และเพลงอยู่ 10 กว่าเพลง แล้วให้ Game Tester ซึ่งเป็นใครไม่ได้นอกจากคุณมะระมาช่วยฟังช่วยเลือก คำแนะนำที่ได้คือ ควรจะเป็นเสียงโรงเรียน อ็อดเข้าเรียนอะไรประมาณนี้ ก็เลยได้เพลงสบายๆ ก็อกๆ แก็กๆ มา 1 เพลง และเสียงอ็อดเข้าเรียนอีก 1 เสียง ตบท้ายด้วยเสียงที่ผมชอบมากคือ เสียงสมองระเบิด สำหรับผู้เล่นที่บวกเลขไม่คล่อง :P เรียกได้ว่าสะใจดีครับ วันนี้ก็เลยได้ใกล้ความเป็นเกมส์มากขึ้นแล้ว สำหรับการเก็บคะแนนผ่านทาง Social Network เกมส์อย่าง GREE นั้น ผมไม่แน่ใจว่าจะได้ใช้บริการ GREE หรือเปล่า ถ้ายังแก้ปัญหาไม่ได้ในอาทิตย์นี้คงไปใช้ตัวอื่นแทน ผมก็เลยทำ Custom Layout ส่วนกรอกชื่อเอาก่อน สำหรับ เก็บคะแนนผ่านทาง Social Network เกมส์ ผมอาจจะเขียน Score Services ขึ้นใช้เอง เอ…รู้สึกจะไม่จบง่ายละ เอาเป็นว่าติดตามตอนต่อไปครับ

เนื่องจากเขียนเกมส์และทดสอบบนโทรศัพท์มือถือของตัวเองหน้าจอ 4 นิ้วเหมาะกับการเล่นเกมส์มาก แต่การแสดงผลบน Tablet ขนาดหน้าจอ 7 นิ้ว 10 นิ้ว การแสดงผลต้องต่างกัน ก็เลยได้ออกแบบ Layout สำหรับหน้าจอขนาดต่างๆ ดังนั้นต้องมีการออกแบบสำหรับหน้าจอขนาดต่างๆ ดังนี้

คุณมะระมาเป็น Game Tester และให้คำแนะนำอีกเช่นเคย เนื่องจาก Game Tester บอกว่าคนใช้ 2 มือจับ Tablet ขนาด 7 นิ้ว ปุ่มเลือกตอบต้องพอดีกับการจับเพื่อให้นิ้วโป้งกดได้ถนัดก็เลยจัด UI แบบที่ต้องการ ได้ผลลัพท์ได้เป็นนี้ครับ

คุณมะระทดสอบเกมส์บน Tablet ขนาดหน้าจอต่างกัน สังเกตวิธีการจับเครื่องก็เลยเข้าใจว่าจะต้องออกแบบยังไง

อ้อ ลืมบอกผู้สนับสนุนให้ยืม Tablet มาทดสอบ คือ Gadget Plus อยากได้ Tablet 7 นิ้วคุณภาพสูงยี่ห้อ Ainol ก็ติดต่อคุณมะระได้ที่ gumaraa[at]gmail.com ครับ ตอนต่อไปจะทำอะไร เดี่ยว Blog มาให้อ่านอีกครั้งครับเพราะยังไม่จบ ติดตามตอนต่อไป…