พลาดไม่ได้กับงานสัมนา Android Developer Day

GDG Thailand และ MT2 ขอเชิญชวนนักพัฒนาแอพพลิเคชั่นแอนดรอยพบกับ Android Developer Day งานสัมมนา 1 วันเต็มที่เจาะลึกเนื้อหาแอนดรอยแบบเข้มข้นอัพเดตล่าสุดจากงาน Google I/O และไปทำความรู้จักกับสถาปัตยกรรมอินเทลบนแพลตฟอร์มแอนดรอยที่เป็นความท้าทายใหม่ของนักพัฒนาไทย พร้อมด้วยกลุ่มคอมมิวนิตี้ Ingress ชาวไทย ที่จะมาเล่าประสบการณ์และแนะนำกิจกรรมให้กับผู้เล่นทั้งเก่าและใหม่ได้สนุกกัน สมาชิก GDG Thailand สามารถลงทะเบียนเข้าร่วมกิจกรรมได้แล้ววันนี้และพบกันในวันที่ 1 มิถุนายน ที่ห้อง Auditorium ซอฟต์แวร์พาร์ค

กำหนดการ

9.00 ลงทะเบียน
9.30 พิธีเปิด
10.00 รู้จักกับสถาปัตยกรรมของอินเทล Android x86 ความท้าทายใหม่ของนักพัฒนาแอนดรอย, มร. แจ๊กกี้ ลี – Intel Corporation
11.50 เชิญรับประทานอาหาร
12.45 ทำความรู้จักกับเครื่องมือใหม่คู่ใจนักพัฒนา Android Studio
13.00 ช่องทางทำรายได้จาก Google Admob โฉมใหม่
14.30 ปัจจุบันและอนาคตของ Android หลังงาน Google I/O 2013
15.15 พูดคุยกับกลุ่มผู้เล่นเกมทั้งสองฝ่ายใน Ingress Talk
16.00 พิธีปิด

ลงทะเบียน : http://goo.gl/q9fil
Google+ Event : http://goo.gl/En7We

ที่มา - http://www.gdg.in.th/2013/android-developer-day/

PayPal เตรียมปล่อย Android SDK ตัวใหม่

PayPal เตรียมปล่อย Android SDk ตัวใหม่รองรับการจ่ายเงินแบบหลายช่องทาง ซึ่ง SDK ตัวนี้จะเริ่มใช้ในอเมริกาเป็นที่แรก ซึ่งจะใช้งานได้ตั้งแต่วันที่ 15 พฤษภาคม Android SDK นี้จะสนับสนุนตั้งแต่ Android 2.2 ขึ้นไป และสนับสนุนการจ่ายเงินแบบหลายช่องทาง ทั้งผ่านบัญชี PayPal และผ่าน credit card สำหรับนักพัฒนาที่สนใจติดตามได้ที่ PayPal Developer

Play Store เปิดให้นักพัฒนาตอบกลับความเห็นของผู้ใช้โดยตรงได้แล้ว

หลังจากที่รอคอยมาเกือบๆ 1 ปี หลังจากที่มีข่าวออกมาว่าจะมีการเปิดคุณสมบัติใหม่ๆ ใน Play Store ที่นักพัฒนาต้องการมากคือ การตอบกลับความคิดเห็นในหน้า App Review ของเว็บ Google Play Store ซึ่งตอนนี้ Google ได้เปิดคุณสมบัตินี้ให้เรียบร้อยแล้ว นักพัฒนาสามารถตอบกลับความคิดเห็น หรือแนะนำการใช้ App ตลอดจนช่วยให้นักพัฒนาสื่อสารไปยังผู้ใช้ได้โดยตรงอีกด้วย สำหรับการใช้งานการตอบกลับความคิดนี้สามารถใช้งานได้ที่หน้า Developer Console

วิเคราะห์ข้อมูลจาก Xyologic Mobile Analysis

เมื่อวันก่อน SIPA บอกว่าจะมี Edumarket (แอบโฆษณา) สำหรับให้คนไทยได้ขาย Mobile App ซึ่งก็น่าสนใจดีครับ แต่เหนือสิ่งอื่นใดสิ่งที่ผู้ประกอบการอยากได้จาก Market คือตัววิเคราะห์ข้อมูลดีๆ เพื่อใช้ในการพัฒนา App ให้ดีขึ้น ตรงกลุ่มเป้าหมายตามความเป็นจริงมากขึ้น ครั้งที่แล้วผมพาไปดูสถิติจาก Android Developer Console โดยใช้ข้อมูลตัวเองเป็นหลัก (ไปดูข้อมูลของคนอื่นไม่ได้) ครั้งนี้ผมมีข้อมูลการวิเคราะห์จาก Xyologic Mobile Analysis GmbH ทำให้เราสามารถดูข้อมูลสถิติดาวน์โหลดและการวิเคราะห์ในเบื้องต้นได้ทั้งตัว Mobile App และ Publisher ได้ นอกจากนี้ยังสามารถดูข้อมูลการใช้ Mobile App รายประเทศได้อีกด้วย อ้อดูข้อมูลได้เกือบทุก platform น่าสนใจมาก

ลองดูตัวอย่าง ผมชอบ Molome โปรแกรมถ่ายรูปและแต่งภาพพร้อมแชร์ภาพขึ้น Social Network เป็นผลงาน Mobile App ของคนไทยจากบริษัทหัวลำโพง (Hlp International) ก็เลยได้ดูข้อมูลเบื้องต้นดังนี้

อีกบริษัทนึงที่ผมติดตามงานมาตลอดคือ Touchsi พัฒนา App หลายอย่าง App ที่ผมชอบมากคือพุทธวจนะ ข้อมูลเป็นดังนี้

มาดูของผมกันบ้างครับ สไลต์ solo เดี่ยว

ข้อมูลน่าสนใจดีครับ โดยเฉพาะ Rank สูงๆ ที่อยู่ในต่างประเทศ บางทีเราคิดว่า App จะขายได้ในประเทศโน้นประเทศนี้แต่พอเอาเข้าจริงๆ กลับไปดังในประเทศที่เราไม่คาดคิด :)

Open Source Learning on Demand App (BETA)

หลังจากปรับปรุงเว็บไทยโอเพนซอร์ส ก็เลยได้มาเขียนแหล่งความรู้สำหรับผู้ที่สนใจเรียนการเขียนโปรแกรมและการใช้งานซอฟต์แวร์โอเพนซอร์สในด้านต่างๆ ซึ่งได้รวบรวม Chanel Video Tutorial บน Youtube ไว้ส่วนหนึ่ง แต่เนื่องจากมีหลากหลายวิชาและเข้าถึงได้ยาก ก็เลยทำเป็น Mobile App สำหรับท่านที่ต้องการเรียน (ในยามว่าง) ซึ่งได้แบ่งรายวิชาไว้เบื้องต้นแล้วได้แก่ Amazon Web Service, Android Programming, Titanium, jQuery Mobile, Blender เป็นต้น สำหรับรายวิชาจะมีเพิ่มเข้ามาเรื่อยๆ หากท่านใดสนใจที่จะช่วยรวบรวมเป็น playlist ก็จะยิ่งดีจะได้มีแหล่งเรียนรู้และเนื้อหาที่มากขึ้น ติดต่อร่วมพัฒนาได้ที่ anoochit [at] gmail.com สำหรับ App ดาวน์โหลดได้ที่ Google Play Store ครับ

วิเคราะห์ตลาดซอฟต์แวร์บน Play Store

ผมเอาตัวเองเป็นหนูทดลองเพื่ออยากรู้อะไรบางอย่างในการทำตลาดซอฟต์แวร์บน 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,000x30=2,400,000 บาท หัก 30% เหลือสุทธิที่จะได้ 1,680,000 บาท แต่ตอนนี้ผมได้เงินจาก App (Business Model แบบโง่ๆ) แค่ 4,539.36 บาท ห่างไกลจากความเป็นจริงมาก :P

บริการ E-Learning ผ่านมือถือของสถาบันการศึกษา

เขียน Unofficial Moodle Mobile Application ไปเมื่อหลายเดือนก่อน ซึ่งตอนนั้นยังไม่ค่อยมี Mobile App ลักษณะนี้บน Google Play มากนัก มีแค่ 2 ตัว แต่ตอนนี้สถาบันการศึกษาในต่างประเทศเริ่มหันมาให้ความสนใจกับการให้บริการ E-Learning ผ่าน Mobile Device และ Tablet กันมากขึ้น หลังจากการติดตามจาก Google Play Store พบ App ลักษณะนี้เพิ่มมากขึ้น ดังนี้

• UL Moodle ของ University London


• UCL Moodle ของ University College London


• UNO Moodle ของ University of New Orleans


• Bilgi Online ของ Istanbul Bilgi University


• Birmingham City Moodle ของ Birmingham City University


• City University Moodle ของ City University London


• Moodle Moot West Coast ของ West Coast University


• Hult University Moodle ของ Hult University


• Moodle City University London ของ City University London


• Wisconsin Moodle Moot 2012 ของ Wisconsin University


• iULSU ของ University of Lethbridge


• MyMMU-mobile ของ Manchester Metropolitan University


• WWS CONNECTED ของ Westfield Washington Schools


• Forth Valley College ของ Forth Valley College


• RCC Mobile App ของ Robeson Community College


• RUB Mobile ของ Ruhr-Uni Bochum


• Leicester College ของ Leicester College


• Colaiste Dhulaigh Mobile ของ Coláiste Dhúlaigh College of Further Education


• SAC Student Handbook and Diary ของ Scottish Agricultural College


• OBU ของ Ouachita Baptist's campus


• AAU Studentenportal ของ Alpen-Adria-Universität


• iLancaster ของ Lancaster University


• University of Edinburgh ของ University of Edinburgh


• UoB Student ของ University of Birmingham

และอีกมากมาย ผม List ไม่ไหว T_T เพราะมันเยอะมากครับ นอกจากนี้ยังมี Moodle Mobile Client ตัวใหม่ๆ เพิ่มขึ้นมาอีก เช่น

• Droodle


• Moodle on Android


• MDroid

อยากเห็น University ในบ้านเรามี Mobile App เจ๋งๆ อย่างนี้บ้าง

พัฒนา Mobile Application กับ MongoDB

ช่วงนี้เกาะกระแส Open Source Fast Track Programme สักหน่อยจะได้เป็นแรงสนับสนุนในการเรียนรู้เทคโนโลยีใหม่ๆ ไปในตัว สำหรับครั้งนี้ผมคงไม่ได้เขียนอธิบายบ่อยมากนักจะเน้นที่ Video และ Link ต่างๆ มากขึ้น เพื่อให้ได้เรียนรู้เพิ่มได้ ครั้งนี้เป็นเรื่อง พัฒนา Mobile Application กับ MongoDB ก็เลยมี Video มาฝากครับ

สำหรับท่านที่ต้องการพัฒนาบน Cloud ก็มี Platform as a Service ที่ให้บริการ MongoDB หลากหลายค่ายด้วยกันดังนี้

• Zend Developer Cloud


• OpenShift


• dotCloud

มาเรียนเขียนโปรแกรม Android ผ่าน Youtube กัน

ครั้งที่แล้วเคยเขียนว่าจะเริ่มต้นเขียน Android App ยังไง มีเว็บไซต์ให้ไปดูอยู่ 3 เว็บ แต่ก็มีหลายท่านอยากได้วิดีโอแบบนั่งเรียนไปด้วยทำตามไปด้วย เลยนึกขึ้นได้ว่ามีวิดีโออยู่ 2 ชุด ที่สามารถเรียนได้ที่บ้านง่ายๆ ผ่าน Youtube ได้เลย วิดีโอจะมีทั้งหมด 50 ตอน ดูข้างล่างเลยครับ :)

มาเล่น NFC กัน

Near Field Communication หรือ NFC เป็นการสื่อสารระยะใกล้ด้วยเทคโนโลยีสัญญาญไร้สาย ซึ่งทำให้สามารถแลกเปลี่ยนข้อมูลระหว่างอุปกรณ์ได้ สำหรับโทรศัพท์มือถือที่มีเทคโนโลยี NFC ติดมาด้วยได้แก่ Nokia, Samsung Galaxy Nexus และ Samsung Galaxy SIII เป็นต้น

เกริ่นนำมาขนาดนี้ มาลองกันเลยดีกว่าครับ เครื่องมือและอุปกรณ์ที่เราสามารถนำมาลองได้ มีดังนี้

1. NFC Tag


2. มือถือที่สามารถใช้ NFC ได้


3. โปรแกรมอ่าน NFC Tag Info


4. โปรแกรมเขียน NFC TagWriter

สำหรับผม NFC Tag ที่ใกล้ตัวที่สุดคือเจ้านี่ครับ บัตรกระต่าย

มาลองใช้ NFC Tag Info อ่านกันครับ ได้ผลลัพท์แบบนี้

จากที่ทำการทดสอบพบว่า โปรแกรมหา Data Set Storage ไม่เจอแต่ทราบขนาด Storage คือ 4094 byte ซึ่งแปลกดีครับ ถ้าใครมี NFC Tag ก็หามาลองดูได้สำหรับตัวถัดมาคือ NFC TagWriter ไม่รู้ว่าจะทดสอบให้ดูยังไง ถ้าใครมี NFC Tag ก็เอา Tag มาแนบไว้หลังเครื่อง แล้วเลือกข้อมูลที่ต้องการเขียนลง Tag ได้เลย สำหรับบัตรกระต่ายที่ผมทดลองดู พบว่าโปรแกรมแนะนำให้ Format Storage ซะงั้น T_T

เขียน Mobile App บน Android เริ่มยังไง

มีคนถามคำถามผมว่า เขียน Mobile App บน Android เริ่มยังไง? ตอบไม่ถูกเลยครับ คำตอบที่ง่ายที่สุดและรวดเร็วที่สุดคือ อ่านจากเว็บไซต์ครับ สำหรับเว็บไซต์ที่ผมจะมาแนะนำสำหรับผู้ที่อยากเริ่มต้นเขียน Android App ให้ดูเว็บนี้ก่อนเลยครับ

Android Developer

เว็บนี้จะรวบรวมข้อมูลที่ทุกคนควรรู้เกี่ยวกับ Android ทั้ง Source Code ของ Android การพัฒนาซอฟต์แวร์ รวมไปถึงเครื่องไม้เครื่องมือต่างๆ ที่ต้องใช้ และที่ขาดไม่ได้คือ Tutorial และ SDK Decument ที่ต้องใช้อ้างอิงครับ

Vogella Android Development Tutorial

เว็บนี้จะรวบรวม Tutorial สอนการเขียน Android App ที่แบ่งหมวดหมู่ได้อย่างชัดเจน เข้าใจได้ง่าย

ทุกๆเรื่อง ที่เกี่ยวกับ android โดย มาสเตอร์ อึ่ง

สำหรับเนื้อหาภาษาไทยคงหนีไม่พ้นเว็บไซต์ของมาสเตอร์อึ่ง ซึ่งมีข้อมูล Tutorial ภาคภาษาไทย อ่านเข้าใจง่ายมีตัวอย่างประกอบ และที่สำคัญมาสเตอร์อึ่งเปิดคอร์สสอน Android อยู่แล้วใครสนใจเรียนสามารถสมัครเรียนได้ครับ

สำหรับหนังสือภาษาไทยที่สามารถซื้อหาได้ตามร้านขายหนังสือได้แก่
* Basic Android App Development เขียนโดย อ.จักรชัย โสอินทร์
* Android Developer's Cook Book : รวมโค้ด Android App เขียนโดย James Steele, Nelson To แปลโดย ไพบูลย์ สวัสดิ์ปัญญาโชติ

ลองไปซื้อหามาอ่านกันได้ครับ :)

เขียน Mobile Application ด้วย Illumination Software Creator

Illumination Software Creator เป็นโปรแกรมสำหรับสร้าง prototype application โดยไม่ต้องเขียนโค้ด การทำงานของโปรแกรมใช้การกำหนด properties บล็อกของฟังก์ชั่นต่างๆ ใช้เส้นเชื่อมโยงบล็อกต่างๆ เข้าด้วยกัน ทำให้คุณไม่ต้องเขียนโค้ดเพียงแค่กำหนดค่าให้ถูกต้องเท่านั้น Illumination Software Creator สามารถสร้าง Application สำหรับ Mobile อย่าง Android, iOS, Maemo นอกจากนี้ยังสามารถสร้าง Application อย่าง Python/GTK Desktop และรวมไปถึง Application บนเว็บไซต์อย่าง HTML5 และ Flash ได้อีกด้วย

สำหรับท่านที่สนใจสามารถหาข้อมูลเพิ่มเติมได้ที่เว็บโครงการ Landuke

มาเขียน Mobile HTML5 App กัน ตอน ทำ Prototype แบบง่ายๆ

ค้างเขียนเรื่องนี้มาได้ 2 อาทิตย์ ไม่มีกำลังใจเขียนสักที วันนี้วันดีก็เลยเร่งเขียนเพราะเดี๋ยวจะไม่มีเวลามาเขียน Blog แบบนี้อีก ครั้งนี้จะมาแนะนำเครื่องมือที่ช่วยในการสร้าง Prototype อย่างง่ายๆ เรียกได้ว่าไม่ต้องเขียน HTML กันเลยทีเดียว อ้อ ลืมบอกไปว่าใช้ jQuery Mobile น่ะครับ ถ้าท่านที่ใช้ jQuery Mobile อยู่แล้ว ถ้าไม่เขียน HTML ก็จะหาเครื่องมือแบบ WYSIWYG มาใช้งาน แต่เครื่องมทอที่จะมาแนะนำวันนี้เป็นเครื่องมือ WYSIWYG เช่นกันแต่ทำงานบนเว็บครับ ลาก-วาง กำหนดคณะลักษณะของ widget ต่างๆ ได้เลย เครื่องมือตัวนี้เรียกว่า Codiqa

หากท่านเข้าเว็บ jQuery Mobile ให้เลื่อนลงมากลางๆ หน้าจอ จะพบ Codiqa แบบ mini คือสร้างได้หน้าเดียว preview ได้ เอาเป็นว่ากดๆ เล่นๆ ได้บ้าง ตามที่เขาจะมีมาให้ แต่ถ้าอยากใช้เต็มๆ ให้เข้าไปที่เว็บไซต์ http://codiqa.com สมัครสมาชิกให้เรียบร้อยแล้วเริ่มลงมือทำ App Prototype กันได้เลย สำหรับการ export เพื่อเป็น HTML5 App สำหรับอุปกรณ์ต่างๆ และการบันทึก prpject ต้องจ่ายเงินเพิ่มนะครับ :)

มีอะไรใน Android Developer Console

ผมตัดสินใจลงทะเบียนเพื่อเอา Mobile App ขึ้น Android Market เมื่อกลางเดือนกุมภาพันธ์ ซึ่งเวลาเอา App ขึ้น Market เราต้องใช้ Developer Console ครับ ในความคิดของผม Developer Console มันดูรกมาก และมีอะไรหลายอย่างที่เราต้องกรอกข้อมูล ภาพไอคอนโปรแกรม ภาพโฆษณาในหน้า Market ภาพหน้าจอโปรแกรม วิดีโอโปรโมท ฯลฯ ซึ่งดูยุ่งยากในช่วงแรกที่เอา App ขึ้น หลังจากนั้นต้องวางแผนเรื่องพวกนี้ตั้งแต่ออกแบบ App กันเลยทีเดียว แต่สำหรับสถิติในหน้า App แต่ละตัวดูเหมือนไม่ค่อยตั้งใจทำซักเท่าไร แต่ก็พอจะมีข้อมูลให้ได้รู้ว่ามี Device รุ่นไหน ใช้ Android รุ่นอะไร ประเทศอะไร ที่ดาวน์โหลด App ของเราไปบ้าง ซึ่งเป็นข้อมูลที่ดีมากทีเดียว สำหรับสถิติตัวเก่ามันดูแย่มาก (กองรวมกันเป็น Pie Chart ในหน้าเดียว) แต่เมื่อวานนี้ทีม Android Market ปรับปรุงหน้า Developer Console ใหม่ ค่อยดูหน้าตาดีหน่อย

สถิติมีข้อมูลที่ละเอียดพอที่จะสามารถปรับปรุง App ได้ให้เหมาะสมกับลูกค้าของคุณได้เลยครับ

มาเขียน Mobile HTML5 App กัน ตอน แสดงผลหน้าจอหลายขนาด

ผมมักจะเขียน HTML5 App แล้วทดสอบบน Tablet ซึ่งมีขนาดหน้าจอใหญ่โต 1280x720px ซึ่งมีพื้นที่เหลือเฟือในการแสดงผล แต่ถ้าหน้าจอเล็กๆ อย่าง 320px, 480px, 640px ล่ะจะทำอย่างไร? ซึ่งแน่นอนว่าการแสดงผล อย่างเช่น ภาพ ขนาดตัวอักษร ฯลฯ จะไม่เหมาะสม ตัวอย่างเช่น

จากภาพจะเห็นว่าเราอ่านการ์ตูน I am Petdo! ได้แค่ครึ่งเดียว ทีนี้ทำยังไงดี วิธีง่ายๆ คือการใช้ความสามารถของ CSS3 ครับ ใน CSS3 จะมีคำสั่งพิเศษชื่อว่า media ซึ่งคำสั่งนี้ใช้เพื่อกำหนดความเหมาะสมของ CSS ในแต่เหตุการณ์ เช่น หน้าจอมีขนาดเล็กบ้าง ใหญ่บ้าง เป็นต้น ทีนี้เราก็มากำหนด CSS ให้ I am Petdo! กันใหม่ เพิ่มคำสั่ง media เข้าไปดังนี้

@media screen and (min-width: 320px) {
img.imagefield {
width:280px;
height:auto;
}
}

@media screen and (min-width: 480px) {
img.imagefield {
width:400px;
height:auto;
}
}

@media screen and (min-width: 800px) {
img.imagefield {
width:563px;
height:auto;
}
}

จากโค้ดข้างต้น หากหน้าจอมีขนาดเล็ก 320px ให้ ภาพที่ใช้ class imagefield มีขนาดความกว้าง 280px ตามลำดับ เท่านี้คุณก็จะได้หน้าจอการแสดงผลที่ดูดีขึ้น ดังนี้

ลองเอาไปประยุกต์ใช้กันดูได้ครับ อ้อและอีกอย่างนึง อย่าลืมกด Like ให้ ThaiOpenSource นะครับ

มาเขียน Mobile HTML5 App กัน ตอน หน้าจอหลายขนาดทดสอบยังไง

นักพัฒนา Mobile Web หลายท่านมักจะมีเครื่องไม้เครื่องมืออย่าง Emulator, มือถือ, tablet หลากหลายขนาดเพื่อใช้ทดสอบว่า Mobile Web หรือ HTML5 App ที่พัฒนาขึ้นมานั้นแสดงผลในหน้าจอขนาดต่างๆ เป็นอย่างไร จะต้องแก้ไขหรือปรับปรุงในส่วนใดบ้างเพื่อให้การแสดงผลถูกต้องและลงตัวมากที่สุด ครั้งนี้จะมาแนะนำ Emulator บน Browser เพื่อที่จะช่วยทดสอบ HTML5 App ได้ง่ายมากขึ้น เครื่องมือนี้ชื่อ Ripple แห่งค่ายฮิปโปจิ๋ว (tinyhippos)

ripple จะเปลี่ยน Browser ของคุณให้กลายเป็น Mobile/Tablet Emulator พร้อมฟังก์ชั่นที่เชื่อมต่อกับ JavaScript Framwork ต่างๆ ไม่ว่าจะเป็น PhoneGap, WebWork, WebWork TabletOS, Mobile Web เป็นต้น คุณสามารถทดสอบ App ที่ใช้การเชื่อมต่อ Internet, GPS, Accelerometer ได้ง่ายๆ

สำหรับท่านที่สนใจก็ลองทดสอบดูได้ที่ http://ripple.tinyhippos.com ครับ

มาเขียน HTML5 App แบบ คลิ๊ก คลิ๊ก คลิ๊ก

ผมพอจะเข้าใจได้เลยว่าการเขียน HTML5 Application เป็นแนวทางอีกแนวทางหนึ่งในการเขียน Application บน Mobile ซึ่งต้องขอบคุณ Apple เพราะกระแสความก้าวล้ำทางด้านเทคโนโลยีของ Webkit ทำให้เกิดแรงผลักดันมาตรฐานที่ควรจะมีให้เกิดขึ้นอย่างรวดเร็ว ทั้ง JavaScript Engine, Local Storage, Local Database และอื่นๆ และอุปกรณ์อย่าง iPhone, iPad ก็รองรับ Mobile (Web) Application ได้อย่างลงตัว โดยการสร้าง Wedget ลงในอุปกรณ์ให้สามารถเรียกใช้ได้เหมือนกับ Application ตัวหนึ่งในเครื่อง จากการพัฒนาดังกล่าวจึงเกิดบริการใหม่ เพื่อช่วยให้นักพัฒนาซอฟต์แวร์และเจ้าของบริการสามารถสร้าง HTML5 App ได้อย่างง่ายๆ เรียกว่า อยากได้อะไร คลิ๊กเอาได้เลย ในครั้งนี้จะมาแนะนำ บริการ SaaS เพื่อช่วยสร้าง HTML5 App กัน 2 ตัวดังนี้

Widget Box

ตัวอย่างการใช้งาน Widget Box Mobile App สร้าง App การ์ตูน IamPetdo จาก RSS Feed

กำหนด Feed URL

กด Save เราก็ได้ HTML5 App มา 1 ตัวใน 3 ขั้นตอน

HTML5 App ที่สร้างขึ้นมาจะอยู่กับ Widget Box หากต้องการติดตั้งลงในอุปกรณ์ต่างๆ เช่น iPhone. iPad, มือถือ Android หรือ Tablet Android ต้องสมัครสมาชิกซึ่งมีค่าใช้จ่ายอยู่นิดหน่อย สำหรับท่านที่สนใจก็ลองไปใช้งานกันดูได้ที่ http://www.widgetbox.com

Tiggzi

Tiggzi (บริการเดิมชื่อ Tiggr) เป็นบริการสำหรับสร้าง Mobile Web และ Mobile App ที่น่าสนใจอีกตัวหนึ่ง ซึ่งตัวระบบให้คุณสามารถวาง Widget เพื่อกำหนดรูปแบบและหน้าตาของ Mobile App ของคุณได้ อีกทั้งยังสนับสนุนการเขียนโค้ดเพื่อควบคุม Widget เหล่านั้นได้อีกด้วย จะคล้ายกับการเขียนโปรแกรมจากเครื่องมือบนระบบปฏิบัติการทั่วไป แต่ตากกันตรงที่เราเขียนและพัฒนาบนเว็บแทน สำหรับ App ที่ได้สามารถใช้งานได้กับ iPhone, Android ได้เลย สำหรับท่านที่สนใจก็ลองทดสอบได้ที่ http://tiggzi.com ครับ

มาเขียน Mobile HTML5 App กัน ตอน ท่อน้ำมหัศจรรย์

หลังจากที่ได้แนะนำแนวทางการเขียน HTML5 App และใช้เครื่องมือหลายตัวไปบ้างแล้ว ครั้งนี้ผมจะมาแนะนำเครื่องมือท่อน้ำสุดมหัศจรรย์ ชื่อเป็นทางการเรียกว่า Yahoo! Pipes เครื่องมือนี้ช่วยให้คุณตัดต่อ เชื่อมโยงข้อมูล ผสมข้อมูลต่างๆ ที่มาจากหลากหลายเว็บได้ และที่สำคัญสามารถส่งออกผลลัพท์ได้หลากหลายรูปแบบไม่ว่าจะเป็น RSS, JSON, KML และรูปแบบอื่นๆ

การใช้งาน Pipes ง่ายมากเพียงเลือกเครื่องมือให้เหมาะสมแลัวลากเส้นเชื่อมโยงข้อมูลตั้งค่าตามต้องการจากนั้น Pipes ก็จะทำงานให้คุณพร้อมผลลัพท์ที่น่ามหัศจรรย์ จากตัวอย่างผมต้องการเชื่อมโยงข้อมูลจาก 3 เว็บไซต์เข้าด้วยกัน และใช้ keyword คำว่า Ubuntu ในการ filter ข้อมูลพร้อม เรียงลำดับเหตุการณ์ และหยิบเอาเฉพาะ 10 รายการล่าสุดมาใช้ เขียน Flow ได้ดังภาพ

เมื่อเชื่อมโยงข้อมูลต่างๆ เข้าด้วยกันได้เรียบร้อยแล้ว คุณจะได้หน้า Publish ของคุณขึ้นมาพร้อมลิงค์เพื่อ export ข้อมูลต่างๆ ที่สามารถใช้งานต่อได้ เช่น เพิ่ม Widget ลงใน Google, เพิ่ม Widget ลงใน Yahoo!, Export ข้อมูลเป็น RSS, JSON หรือแม้กระทั่งซอร์สโค้ดภาษา PHP :)

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

มาเขียน Mobile HTML5 App กัน ตอน การ์ตูนสุดสนุกแห่งยุค

ผมคลั่งการ์ตูนออนไลน์เรื่องหนึ่งมาก ถ้าคุณมีพฤติกรรมที่ออกจะดูแย่ๆ จนคนรอบข้างรับไม่ได้ คุณจะถูกขนานนามว่าเป็น "Petdo!" ใช่ครับ การ์ตูน I am Petdo! เป็นการ์ตูนสร้างสรรค์มากในยุคนี้ หากใครไม่ได้อ่านเชยมากๆ ครับ ในครั้งนี้ผมจะมายกตัวอย่างการเขียน HTML5 + jQuery + jQuery Mobile + YQL กัน เว็บไซต์การ์ตูน I am Petdo! มีช่องทางให้คุณอ่านการ์ตูนผ่านทาง RSS Feed ได้ ซึ่งคุณสามารถใช้ RSS reader ตัวไหนก็ได้ในการอ่านการ์ตูนเรื่องนี้ โดยไม่ต้องเข้าเว็บและเราก็สามารถเขียน HTML5 App ในการ Feed เนื้อหาจาก RSS ได้เช่นกัน เครื่องมือที่จะมาแนะนำเพิ่มเติมวันนี้คือ YQL

YQL หรือ Yahoo! Query Language เป็นเครื่องมือคล้ายกับคำสั่ง SQL ใช้ในการ query, filter, join ข้อมูลข้ามเว็บเซอร์วิส คุณสามารถใช้ YQL ในการสร้างชุดข้อมูลที่คุณต้องการได้ง่ายเลยทีเดียว

จากภาพจะเห็นได้ว่าเราสามารถใช้คำสั่ง SQL เพื่อ filter ข้อมูลจาก RSS Feed ได้ YQL มีคุณสมบัติอีกอย่างคือสามารถ แสดงผลลัพท์ในรูปแบบ XML หรือ JSON ได้ ในที่นี้เราจะใช้ผมลัพท์จาก JSON ส่งต่อให้ jQuery ประมวลผล คุณสามารถใช้ Query URL เอาไปใช้งานได้เลย ตัวอย่างเช่น

http://query.yahooapis.com/v1/public/yql?q=select%20title%20from%20rss%20where%20url%3D%22http%3A%2F%2Frss.news.yahoo.com%2Frss%2Ftopstories%22&format=json&diagnostics=true&callback=cbfunc

ผลลัพทที่ได้จะเป็นข้อมูลในรูปแบบ JSON เมื่อได้ข้อมูลมาแล้วก็เขียน jQuery ผ่านทาง jsfiddle เช่นเคย ปรับแต่ง CSS ตามใจชอบ

ตอนนี้เราก็ได้ jQuery ในส่วนที่จำนำไปใช้งานกันแล้ว จับใส่ jQuery Mobile อีกนิดหน่อยเราก็จะได้ HTML5 App สำหรับ Mobile กันแล้ว

มาเขียน Mobile HTML5 App กัน ตอน ภาพสวยใน Flickr

บริการคลังเก็บภาพถ่ายอย่าง Flickr มีช่องทางสำหรับนักพัฒนา App สามารถที่จะเรียกใช้งานได้ซึ่งมีมาตั้งนานแล้ว ผ่านทาง Flickr API ซึ่งแน่นอนว่าสามารถอัพโหลดภาพผ่านทาง API ได้ และดึงข้อมูลภาพเอามาแสดงผลได้เช่นกัน วิธีการก็ง่ายมากครับ

1. ต้องสมัคร Flickr API กันก่อน


2. เลือกช่างกล้องที่เราชื่นชอบ ผมชอบงานถ่ายภาพของนักพัฒนาซอฟต์แวร์ท่านหนึ่ง คือ คุณFordAntiTrust ครับ


3. ดู Flickr API ที่เราสามารถเลือกใช้ได้ http://www.flickr.com/services/api

มีแค่นี้ครับ ผมเลือกใช้ Method ที่ชื่อว่า flickr.photosets.getPhotos ค่าตัวแปรที่ต้องใช้งานกับ Method นี้คือ API_KEY และ PhotoSet ID ให้เราลองสร้าง REST Request เพื่อให้ได้ข้อมูลเล่นๆ บน Browser กันก่อน ดังนี้

http://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos&api_key=YOUR-KEY&photoset_id=YOUR-PHOTOSET-ID&format=json&jsoncallback=?

เปลี่ยนค่าตามค่าที่คุณต้องการ ก็จะได้ค่า JSON กลับมาแบบงงๆ อย่างนี้

jsonFlickrApi({"photoset":{"id":"72157626549802465", "primary":"5523106788", "owner":"14143570@N00", "ownername":"Ford AntiTrust", "photo":[{"id":"5523106788", "secret":"ff8af2e14e", "server":"5057", "farm":6, "title":"dear - cu-cheer-66 (2)", "isprimary":"1"}, {"id":"5522518723", "secret":"b006460b92", "server":"5292", "farm":6, "title":"dear - cu-cheer-66 (6)", "isprimary":"0"}, {"id":"5522517811", "secret":"a3e3900d7f", "server":"5252", "farm":6, "title":"dear - cu-cheer-66 (4)", "isprimary":"0"}, {"id":"5522518261", "secret":"e4c4373a3f", "server":"5219", "farm":6, "title":"dear - cu-cheer-66 (5)", "isprimary":"0"},"page":1, "per_page":500, "perpage":500, "pages":1, "total":"29"}, "stat":"ok"})

เรียกได้ว่าสุดมึน คำถามคือ "ภาพอยู่แห่งหนใด" แล้วจะเอามันออกมาโชว์ได้ยังไง? ต่อให้ Parse JSON ได้แลัวภาพอยู่ไหนอ้ะ T_T วิธีการแปลข้อมูลอยู่ที่ Flickr Photo Source URLs ซึ่งข้อมูลจะใช้ REST เช่นเคย ในการแสดงข้อมูลภาพ งงไหม REST ซ้อน REST ไม่ต้องสนใจก็ได้ครับ มันเป็นเรื่องของโครงสร้างการจัดการข้อมูล เอาเป็นว่าโครงสร้าง URL ที่เราจะใช้กันมีดังนี้

http://farm{farm-id}.staticflickr.com/{server-id}/{id}_{secret}_[mstzb].jpg

ค่าที่เราจะเอามาใช้จาก JSON ข้าต้นได้แก่ farm-id, server-id, id, secret และ option ภาพที่เราต้องการ แบ่งเป็น

• s ภาพขนาด 75x75


• t ภาพ thumbnail 100px


• m ภาพขนาด 240px


• z ภาพขนาดกลาง 640px


• b ภาพขนาดใหญ่ 1024px


• o ภาพต้นฉบับ

จากตัวอย่าง JSON ข้างต้น เราลองมาหาภาพแต่ละขนาดกันครับ

แทนค่าสมการกันดีกว่า http://farm6.staticflickr.com/5057/5523106788ff8af2e14ez.jpg เราจะได้ภาพดังนี้

เอาล่ะเริ่มมีกำลังใจกันแล้วใช่มั๊ยครับ เราก็ใช้ http://jsfiddle.net ในการเขียนโค้ดและทดสอบโค้ดกัน

เมื่อได้ทดสอบ jQuery Code และ CSS กันอย่างพอใจแล้ว ก็มาประกอบร่างกันใน jQuery Mobile แล้วไป Build ต่อโดยใช้ PhoneGap Build เราก็จะได้ HTML5 App สำหรับ Mobile ในค่ายต่างๆ ได้แล้วครับ ตัวอย่างพอหอมปากหอมคอ

คิดว่าน่าจะเป็นแนวทางในการพัฒนา HTML5 App ผนวกกับ APIs ต่างๆ บน Cloud ได้ครับ ตัวอย่างในครั้งต่อไปยังนึกไม่ออกครับ คิดว่าคงมีโอกาสมาเขียนอีกครับ :)