มีอะไรใน 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 ได้ให้เหมาะสมกับลูกค้าของคุณได้เลยครับ

ไปประชุมกลุ่ม Thai Cloud User Group มา

ผมแอบเปลี่ยนชื่อกลุ่มนี้เพราะชื่อกลุ่ม Thai Cloud Interest and Usage Group ใน Facebook มันอ่านแล้วดูวิชาการๆ เอาเป็นว่าไปคุยกันเรื่อง Cloud ก็แล้วครับ สำหรับประเด็นที่ไปร่วมออกความคิดเห็นและพูดคุยกันเป็นเรื่อง "จะให้บริการ Software as a Services ได้อย่างไร" มีเรื่องอะไรที่ต้องทำความเข้าใจบ้างและที่จะต้องเรียนรู้เพิ่มเติมมีอะไรบ้าง สรุปเพื่อเป็น Guide Line สำหรับผู้ประกอบการซอฟต์แวร์ที่อยากจะทำ SaaS กะเขาบ้างได้มั๊ย ผมเสนอ Out Line เชิงอบรมแบบคร่าวๆ โดยอาศัยตัวโครงการอบรมเครื่องมือโอเพนซอร์สเพื่อใช้ในการพัฒนาผลิตภัณฑ์และโซลูชั่นของ SIPA ไปเบื้องต้น ก็เป็นจุดเริ่มที่ดี สำหรับในที่ประชุมมีผู้เข้าร่วมหลากหลาย ทั้งคุณอ้น Infotronics, นู๋โบ๊ท อิน วันเดอร์แลนด์ และทีมงานจาก Software Park มาให้ความรู้เรื่อง Cloud Security เป็นอะไรที่สนุกมากครับ และคราวหน้าคงสนุกมากกว่านี้ครับ สำหรับท่านที่ใช้ Cloud หรือกำลังเริ่มต้นก็เชิญเข้าร่วมแก๊งนี้ได้ครับ

Blender short program #2 จัดการวัตถุเบื้องต้น

จากครั้งก่อนได้แนะนำให้รู้จัก Interface ของ Blender ไปแล้ว ในครั้งนี้จะมาแนะนำการจัดการกับ Model ใน Blender อย่างคร่าวๆ บ้าง

หน้าจอของ Blender ที่เราจะใช้งานเป็นหลักในการจัดการกับโมเดล 3มิติ จะเรียกว่า 3D View ที่หน้าจอนี้เราจะเห็นพื้นที่โล่งๆ มีโมเดลและวัตถุต่างๆ อยู่ภายใน

ที่ 3D View นี้ เราสามารถหมุนดูมุมมองต่างๆ ได้ โดยกดเมาส์ปุ่มกลางแล้วลาก เพื่อหมุนดูด้านต่างๆ ของโมเดลได้ตามต้องการ และหากเราต้องการดูรูปด้านต่างๆ โดยเฉพาะ เราสามารถใช้เมนูเพื่อเลือกดูมุม Top, Front, Back และอื่นๆ ได้อีกด้วย

เมื่อเปิด Blender ขึ้นมา เริ่มแรกเราจะมีวัตถุ Mesh อยู่ 1 ชิ้นที่เป็น Cube คำสั่งพื้นฐานที่เราจะใช้บ่อยที่สุดในการจัดการโมเดลก็คือ ย้าย, หมุน และปรับขนาด โดยปุ่มคำสั่งทั้งสามนี้จะอยู่ด้านล่าง

วิธีใช้งานคำสั่งคือ ให้คลิกขวาที่วัตถุที่ต้องการเพื่อเลือก จากนั้นคลิกที่คำสั่งด้านล่างว่าต้องการจะ ย้าย, หมุน หรือปรับขนาด เมื่อเลือกแล้ว ที่วัตถุจะมีสัญลักษณ์ขึ้นมา

คำสั่งย้ายจะมีสัญลักษณ์เป็นลูกศร

คำสั่งหมุนจะมีสัญลักษณ์เป็นวงกลม

คำสั่งปรับขนาดจะมีสัญลักษณ์เป็นเส้นมีสี่เหลี่ยมอยู่ตรงปลาย

การสั่งคำสั่ง ให้เรานำเมาส์ไปคลิกที่เส้นที่ต้องการค้างไว้ แล้วลาก โดยเส้นจะมีอยู่ 3สีด้วยกัน

• น้ำเงิน หมายถึงแกน z


• แดง หมายถึงแกน x


• เขียว หมายถึงแกน y

ให้เราคลิกที่เส้นตามแกนที่ต้องการ แล้วลากเพื่อสั่งให้ ย้าย, หมุน หรือปรับขนาด

ทั้งหมดนี้ก็เป็นการใช้งานเบื้องต้นสำหรับการจัดการโมเดลใน Blender ครับ

มาเขียน 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 นะครับ

กิจกรรม Disc 2 Disc แผ่นเปล่าแลกแผ่นโอเพนซอร์ส

เนื่องจากสำนักงานส่งเสริมอุตสาหกรรมซอฟต์แวร์แห่งชาติ (องค์การมหาชน) ได้หยุดการสนับสนุนปั๊มแผ่น DVD ซอฟต์แวร์โอเพนซอร์สแล้ว ทำให้ท่านที่ขอแผ่น DVD ไม่ว่าจะเป็น Suriyan, Chantra จะได้แผ่น DVD-R ไม่มีปกกลับไปแทน ทางทีมงาน thaiopensource.org จึงมีมติ ให้จัดกิจกรรม Disc 2 Disc โดยการแลกแผ่น DVD เปล่า 1 แผ่น กับแผ่น DVD ซอฟต์แวร์โอเพนซอร์ส 1 แผ่น ซึ่งแผ่น DVD เปล่าที่ท่านส่งมาจะใช้เขียนแผ่น DVD ส่งให้ท่านอื่นๆ ต่อไป สำหรับแผ่นโปรแกรมโอเพนซอร์สที่ให้บริการมีดังนี้

1. Ubuntu


2. Suriyan


3. Chantra

**วิธีการขอแผ่นให้ท่านส่งแผ่น DVD เปล่าตามจำนวนแผ่นที่ท่านต้องการ พร้อมซองเปล่าติดแสตมป์ 9 บาท จ่าหน้าซองถึงตัวท่านเอง วงเล็บมุมซองว่า "Disc2Disc ขอแผ่น ..." ส่งมาที่

ฝ่ายส่งเสริมและพัฒนาเทคโนโลยี (โอเพนซอร์ส)
สำนักงานส่งเสริมอุตสาหกรรมซอฟต์แวร์แห่งชาติ (องค์การมหาชน)
เลขที่ 120 หมู่ที่ 3 ชั้น 9 อาคารรัฐประศาสนภักดี ศูนย์ราชการเฉลิมพระเกียรติ ๘๐ พรรษา ๕ ธันวาคม ๒๕๕๐
ถนนแจ้งวัฒนะ แขวงทุ่งสองห้อง เขตหลักสี่
กรุงเทพมหานคร
1 0 2 1 0

มาเขียน 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 ครับ

Fedora วางแผนเอา Btrfs กลับมาใหม่

Fedora วางแผนเอา Btrfs กลับมาใช้เป็น File System ตั้งต้นใหม่แต่จะอยู่ใน Fedora 18 ออกประมาณปลายปีนี้ สำหรับ Fedora 17 จะยังคงใช้ ext4 เป็น File System ตั้งต้นของระบบเช่นเดิม จากการประชุม streering committee ที่ผ่านมา โปรแกรม Anaconda จะยังไม่สนับสนุน Btrfs รวมไปถึงการจัดการ partition แก้ไข File System จะยังทำไม่ได้ในรุ่นนี้ สำหรับการใช้ Btrfs ใน Fedora ทีมพัฒนาได้วางแผยไว้ตั้งแต่ Fedora 16 แต่ถูกถอดออกจนถึงรุ่น Fedora 17 ที่กำลังจะออกในเดือนเมษายนนี้ สำหรับแฟน Btrfs คงต้องรอกันสักหน่อย ปลายปีนี้อาจได้เห็น Fedora 18 ใช้ Btrfs ก็เป็นได้

มาใช้งาน dotCloud กัน

dotCloud เป็น Platform as a Services (PaaS) ซึ่งให้บริการ Application Stack ที่หลากหลายไม่ว่าเป็น Java, PHP, Python, Ruby อีกทั้งยังสนับสนุน Database อีกหลายตัว เช่น MySQL, MongoDB, PostgreSQL เป็นต้น สำหรับการใช้งานมีเครื่องมือ CLI ที่รองรับทั้ง Windows, Linux และ Mac

สำหรับวิธีการใช้งานก็ง่ายมาก ขั้นตอนมีดังนี้

• สมัครสมาชิก dotCloud


• ติดตั้ง Command Line Interface Client (CLI)


• สร้าง App จาก CLI กำหนด platform ที่จะใช้ เช่น static html, php, ruby ฯลฯ


• สั่ง Push Application ขึ้นไปที่ dotCloud

มาลองสร้าง PHP App กันดูครับ ให้คุณสมัครสมาชิกกับ dotCloud ให้เรียบร้อย จากนั้นเริ่มติดตั้ง CLI กันได้เลย ให้ติดตั้ง easy_install กันก่อน ดังนี้

sudo apt-get install python-setuptools

จากนั้นสั่งติดตั้ง CLI ดังนี้

sudo easy_install pip && sudo pip install dotcloud

เมื่อติดตั้งเสร็จคุณ คุณจะได้ CLI Client สำหรับใช้งานชื่อ dotcloud ให้คุณเรียกใช้คำสั่ง dotcloud ขึ้นมาดังนี้

dotcloud

โปรแกรมจะให้คุณกรอก API Key ให้คุณดู API Key ของคุณที่ http://www.dotcloud.com/account/settings หลังจากตั้งค่า API Key เรียบร้อยแล้ว ให้ลองสร้าง App กันครับ

ให้คุณสร้างไดเรคทอรี่สำหรับ App ของคุณก่อน เช่น hellophp เป็นต้น จากนั้นก็เข้าไปที่ไดเรคทอรีที่คุณสร้าง

mkdir hellophp
cd hellophp

จากนั้นให้คุณสร้างไฟล์ index.php ใส่โค้ดลงไปดังนี้

<?php phpinfo(); ?>

จากนั้นสร้าง Cloud App โดยใช้คำสั่ง

dotcloud create hellophp

จากนั้นสร้างไฟล์ dotcloud.yml (DotCloud Build File) เพื่อบอกให้ dotCloud เตรียม Application Stack ที่เราต้องการ เช่น ตอนนี้เราใช้ PHP ดังนั้น dotCloud จะต้องเตรียม instance ที่ติดตั้ง PHP ให้เรา เขียน DotCloud Build File ได้ดังนี้

www:
type: static

จากนั้นก็สั่งให้เอา App ของเราขึ้น dotCloud โดยใช้คำสั่ง dotcloud push ดังนี้

dotcloud push hellophp

จากนั้น dotCloud ก็จะติดตั้ง platform ที่เราต้องการและ sync ไฟล์ เมื่อ sync ไฟล์เสร็จ dotCloud จะแจ้ง public url ให้เราทราบ ดังนี้

Deployment finished. Your application is available at the following URLs
www: http://hellophp-anoochit.dotcloud.com/

ลองเข้า URL ตามที่ระบบแจ้งมาจะได้ผลลัพท์ดังนี้

ในส่วน Dashboard ของ dotCloud ยังให้ข้อมูลรายละเอียดการใช้งานของ App แต่ละตัวด้วย

สำหรับท่านที่สนใจลองดู Video เพิ่มเติมข้างล่าง สำหรับเอกสารคู่มือการใช้งานและ Tutorial ดูได้ที่หน้าเอกสารของเว็บ dotCloud ครับ

มาเขียน 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 ครับ

Blender short program #1 หน้าจอโปรแกรม

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

ในตอนแรกจะขอแนะนำเกี่ยวกับอินเทอร์เฟสของ Blender ก่อน ซึ่งเป็นสิ่งที่ผมจะต้องแนะนำก่อนทุกครั้ง ถ้าจะต้องมีการสอน Blender ที่ไหนก็ตาม

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

โปรแกรม Blender นั้น จะมีหน้าจออยู่หลายแบบ ซึ่งหน้าจอแต่ละแบบนั้นจะมีไว้เพื่อการใช้งานที่แตกต่างกัน หน้าจอของ Blender จะมีด้วยกันดังนี้

ซึ่งกันที่เรามักจะได้ใช้บ่อยก็คือ

• Outliner ใช้แสดงรายการวัตถุต่างๆ ในไฟล์ที่เราทำอยู่ ซึ่งในกรณีที่ไฟล์ของเราประกอบไปด้วยวัตถุหลายชิ้น หน้าจอนี้จะช่วยได้มาก


• Properties ใช้ตั้งค่าต่างๆ ให้กับวัตถุ


• 3D View

3 หน้าจอนี้จะเป็นส่วนที่เราใช้บ่อย ในกรณีที่เราทำงานเกี่ยวกับการปั้นโมเดล ซึ่งก็คงหนีไม่พ้นล่ะ ถ้าเราใช้ Blender ล่ะก็

เมื่อเปิดโปรแกรม Blender ขึ้นมาครั้งแรก เราจะเห็นหน้าจอต่างๆ ใน Blender เต็มไปหมด

ซึ่งถ้าดูตามภาพแล้ว เราจะเห็นว่ามันจะมีถึง 5 หน้าจอด้วยกันเลยทีเดียว

ทีนี้ ในหน้าจอแต่ละหน้าจอนั้น มันจะมีไอคอนอยู่

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

ส่วนที่พิเศษมากสำหรับอินเทอร์เฟสของ Blender อย่างที่ได้เกริ่นไว้ว่า ผมเองไม่เคยเจอที่ไหนมาก่อนก็คือ ไอ้หน้าจอต่างๆ ที่เราเห็นในตอนแรกถึง 5หน้าจอนี้ เราสามารถเพิ่ม ลด จำนวนมันเท่าไหร่ก็ได้

ให้สังเกตที่มุมซ้ายล่างและขวาบนของหน้าจอแต่ละหน้าจอ จะมีเส้นลายเฉียงๆ อยู่ที่มุมของหน้าจอ ถ้าเราคลิกที่เส้นดังกล่าวแล้วลาก เราจะสามารถเพิ่มหน้าจอ หรือรวมหน้าจอที่เราคลิก ให้รวมเป็นหน้าจอเดียวกับหน้าจอที่อยู่ติดกันได้ โดยถ้าเราคลิกที่เส้นเฉียงๆ นั้น แล้วลากไปทับหน้าจออื่น สองหน้าจอนั้นก็จะถูกรวมกันกลายเป็นหน้าจอเดียว และถ้าเราลากเข้ามาที่ตรงกลางของหน้าจอของมันเอง มันก็จะเพิ่มจำนวนขึ้น อันนี้อธิบายให้เห็นภาพได้ยาก ต้องลองกันเอง

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

จะเห็นได้ว่าเฉพาะ Interface ของ Blender เองก็ชวนงงได้พอสมควรแล้ว แต่อย่างที่บอกว่า ถ้าได้ลองใช้แล้วจะชอบ

มาใช้งาน HP Cloud กัน

ผมได้รับ Invite จาก HP เพื่อเข้าทดสอบใช้งาน HP Cloud ต้อนรับวันวาเลนไทน์กันเลยทีเดียว เบื้องหลังของ HP Cloud ใช้ OpenStack เป็น Cloud Platform ซึ่งท่านที่สนใจสามารถสมัครและเปิดใช้งานได้เลย บริการที่ HP Cloud มีให้ได้แก่

• HP Cloud Compute


• HP Object Storage

นอกจากนี้คุณยังบริหารจัดการผ่านทาง Web Management Console หรือใช้งานผ่าน REST APIs ได้อีกด้วย สำหรับท่านที่เปิดใช้งานจะได้รับ HP Compute 2 ชุด และ Object Storage 1 ชุด สำหรับท่านที่ต้องการ Activate เพื่อใช้งาน โปรดเตรียมบัตรเครดิต กรอกข้อมูล Payment Method ให้เรียบร้อยแล้วเปิดใช้งานได้เลย ข้อมูลเพิ่มเติมดูได้จาก Video ข้างล่าง

HP Cloud Services: Getting Started from HP Cloud on Vimeo.

มาเขียน 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 ได้ครับ แล้วคุณจะรู้ว่าท่อน้ำมหัศจรรย์มีจริงๆ

Canonical หยุดให้การสนับสนุนทางการเงินกับ Kubuntu แล้ว

ข่าวสั้นแต่อาจทำให้แฟนๆ KDE ตกใจได้ เมื่อ Canonical ตัดสินใจหยุดให้การสนับสนุนทางการเงินกับโครงการ Kubuntu หลังจากออก Kubuntu 12.04 แล้ว โดยเหตุผลของการหยุดการสนับสนุนคือ Kubuntu ไม่ประสบผลสำเร็จทางธุรกิจหลังจากที่ได้พยายามมาแล้วถึง 7 ปี

แน่นอนว่า Kubuntu จะยังคงมีอยู่ภายใต้การดูแลของ Community เช่นเดิม ซึ่ง Canonical ยังให้การสนับสนุนในส่วนของ Infrastructure เหมือนกับโครงการอย่าง Xubuntu หรือ Edubuntu อยู่ เช่น Server, Domain เป็นต้น

ที่มา: OMG! Ubuntu!

มาเขียน 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 กันแล้ว

Global Android Dev Camp 2012: กิจกรรมดีๆ ที่นักพัฒนาแอนดรอยด์ไม่ควรพลาด!

นักพัฒนาแอนดรอยด์ชาวไทยทั้งหลาย ไม่ว่าจะมือใหม่หรือมือเก๋า ต้องไม่พลาดงานนี้ “Global Android DevCamp 2012 – Thailand Camp” เพื่อสร้างและเฟ้นหาสุดยอดแอพพลิเคชันสุดเจ๋ง

Global Android DevCamp เป็นกิจกรรมที่จัดขึ้นพร้อมกันกว่า 50 ประเทศทั่วโลกในวันที่ 17-19 กุมภาพันธ์ 2555 นี้ โดยรูปแบบของกิจกรรมจะเป็นการพัฒนาแอพพลิเคชันสำหรับแอนดรอยด์ภายในเวลา 48 ชั่วโมง ทั้งนี้นักพัฒนาที่มีไอเดียเจ๋งๆ แต่ยังขาดทีมในการพัฒนา ก็สามารถที่จะรวมทีมกันได้ภายในงาน แต่ถ้านักพัฒนาคนไหนอยากที่จะฉายเดี่ยว เราก็ไม่ว่ากัน

ในระหว่างการพัฒนาแอพพลิเคชัน จะมีทริปเทคนิคในการพัฒนาดีๆ รวมถึงตัวอย่างในการพัฒนาจากผู้ที่มีประสบการณ์ในการพัฒนาแอนดรอยด์มาอย่างยาวนาน มาแนะนำกันอีกด้วย

สำหรับประเทศไทย (Thailand Camp) จะจัดขึ้นที่ If It Is (ดูสถานที่ตั้งและการเดินทาง) งานนี้ฟรีตลอดทั้งงาน หากนักพัฒนาคนไหนยังไม่ได้ลงทะเบียนสามารถลงทะเบียนเข้าร่วมงานได้ที่นี่

ดูข้อมูลและรายละเอียดเพิ่มเติมได้ที่ เว็บไซต์ Global Android DevCamp 2012 – Thailand Camp

ที่มา - Thailand GTUG

มาตั้งสถานีวิทยุด้วย Airtime กัน

เนื่องจากไม่ได้ไปอัดรายการวิทยุที่ศูนย์เทคโนโลยีการศึกษามานานก็เลยนึกถึงตอนอัดรายการและห้องอัดดรามา 1 ซึ่งตอนนี้เปลี่ยนแปลงไปมาก เครื่องไม้เครื่องมือทันสมัยขึ้นอัดตัดต่อแล้วเอาออกอากาศได้เลยหรือจะทำ Radio Broadcast กันสดๆ ก็ยังได้ ทำให้รู้สึกว่า เทคโนโลยีเหล่านี้ราคาแพง แค่ไมค์ก็ราคาหลายแสนเข้าไปละ พอนึกถึงเรื่องนี้ทีไรก็จะทำให้นึกถึงซอฟต์แวร์ตัวนึงขึ้นมา เจ้าตัวนี้มีชื่อว่า Airtime

Airtime เพิ่งจะเปิดตัวเป็นโอเพนซอร์สไปเมื่อไม่กี่เดือนมานี้ ซอฟต์แวร์ตัวนี้มีลักษณะเด่นคือสามารถทำสถานีวิทยุเองได้ง่ายๆ และควบคุมผ่านหน้าเว็บเบราเซอร์ นอกจากนี้คุณยังสามารถจัดรายการเพลง จัดตารางเวลาออกอากาศได้เอง เชื่อมโยงกับ SoundCloud ได้ และที่สำคัญ stream ไปยัง streamming server อย่าง Icecast หรือ Shoutcast ได้ สำหรับท่านที่ต้องการข้อมูลเพิ่ใเติมสามารถค้นหาเพิ่มเติมได้ที่เว็บไซต์ sourcefabric.org อยากทดสอบก็ทดลองได้ที่ Demo Site ครับ

มาเขียน 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 ได้ครับ ตัวอย่างในครั้งต่อไปยังนึกไม่ออกครับ คิดว่าคงมีโอกาสมาเขียนอีกครับ :)

เครื่องมือเขียน HTML5 Apps แบบยาจก

ผมมักจะชินกับการใช้เครื่องไม้เครื่องมือที่ออกจะดูวิเศษเสมอๆ อย่าง Adobe Dreamweaver, Web Matrix แต่เมื่อไม่มีตังค์ซื้อก็เลยต้องประยุกต์บริการต่างๆ เข้ามาเพื่อให้การเขียน App ทำได้ง่าย สะดวก และรวดเร็ว คิดว่าหลายๆ ท่านคงเคยใช้ Notepad ในการเขียน HTML ใช่มั๊ยครับ แน่นอนมันยากและมึนด้วย วันนี้เลยจะมาแนะนำเครื่องมือในการเขียน HTML5 App สำหรับ Desktop, Mobile, Tablet App กันครับ เครื่องมือที่ผมใช้แบ่งออกเป็นกลุ่มดังนี้

เครื่องมือเกี่ยวข้องกับ Editor

• gEdit เครื่องมือปกติที่ผู้ใช้ Ubuntu หรือ Gnome Based Distribution ใช้กันอยู่แล้ว ข้อดีของ Gnome คือมันมีสีแยกแยะ Syntax ทั้ง HTML, Javascript และ CSS ทำให้เห็นข้อผิดพลาดของโค้ดจากสีที่แสดงผลได้ง่าย


• Eclipse สำหรับตัวนี้ผมมักจะใช้เขียน Android App มากกว่าที่จะเขียน HTML5 App แต่ก็สามารถใช้งานได้เป็นอย่างดี เพราะ plugin ที่เราสามารถติดตั้งเพิ่มเติมเองได้ ก็ทำให้คุณสมบัติของ Eclipse เพิ่มมากขึ้นด้วย

เครื่องมือทดสอบ/ทดลองโค้ด

• JSONLint เป็นเครื่องมือตรวจสอบความถูกต้องของ Syntax แบบ JSON ข้อดีนอกจากการ Validate แล้วยังมีในเรื่องของการจัดรูปแบบของข้อมูลทำให้เราเข้าใจได้ง่ายมากขึ้นด้วย


• JSFiddle เป็นเครื่องมือสารพัดประโยชน์ที่รวมรวมเอาการเขียนโค้ดทั้งในรูปแบบของ HTML, CSS, Javascript พร้อมการแสดงผลลัพท์ให้ดู ที่สำคัญยังสามารถเรียกใช้ Javascript Framwork ดังๆ อย่าง jQuery, Mootools, Prototype, YUI เป็นต้น

เครื่องมือคิวรีและดัดแปลงข้อมูล

• YQL หรือ Yahoo! Query Language สามารถทำให้เราสามารถใช้คำสั่ง SQL ง่ายๆ อย่าง SELECT ในการจัดการข้อมูลบน Internet ได้ง่ายๆ จากหลากหลายบริการ เช่น Yahoo answer, AppDB, Flickr, RSS เป็นต้น โดยคุณสามารถกำหนดข้อมูล output ที่ต้องการได้ด้วย ซึ่งมีให้เลือก 2 รูปแบบคือ XML และ JSON


• Pipes เป็นเครื่องมือดัดแปลงข้อมูลจาก Internet เพื่อให้ได้ข้อมูลที่เราต้องการ Pipes เป็นอะไรที่สนุกมาก คุณสามารถเชื่อมโยงข้อมูลจากบริการที่แตกต่างเพื่อสร้างชุดข้อมูลใหม่ได้ เช่น เอา Youtube มาผนวกกับ Twitter เป็นต้น

เครื่องมือที่เกี่ยวกับ JavaScript Framework

• jQuery Mobile ใช้สำหรับทำ Mobile Web หน้าตาจะออกแนวๆ iPhone App ใช้งานง่าย มีเครื่องมือที่เหมาะสำหรับการเขียน Mobile App เช่น Touch UI เป็นต้น


• PhoneGap เป็น JavaScipt + SDK ทำให้เราสามารถใช้งานอุปกรณ์ที่อยู่ในมือถือหรือ tablet ได้ง่ายๆ ผ่านทาง JavaScript เช่น กล้องถ่ายรูป, GPS, โทรศัพท์ ฯลฯ PhoneGap ยังมี Build Server สำหรับสร้าง App เพื่อใช้งานในมือถือค่ายต่างๆ ได้อีกด้วย จำได้ว่าเคยเขียน blog เกี่ยวกับ PhoneGap Builder ไปแล้ว


• Sencha เป็นเครื่องมือ Javascript Framework อีกตัวหนึ่งที่น่าสนใจ แถมยังมีเครื่องไม้เครื่องมืออีกหลายอย่างให้ได้เล่นกัน

พอแค่นี้ก่อนก็แล้วกันครับ :)