เขียนบล็อกมันยาว แล้วก็กินพลังงานมากไป ไหนจะต้องนึก ต้องเรียบเรียง ต้องทำตัวอย่าง แล้วยิ่งเป็น บล็อกเชิง โปรแกรมมิ่ง นี่แม่ง บางทีก็นึกได้ ทำได้ แต่พอจะมาเขียน ไม่รู้จะเริ่มจากตรงไหนดี จริงๆ

ตอนนี้ก็เสือกไปจดโดเมน onDeviceReady.com มาอีก คิดว่าจะเอามาเขียนเกี่ยวกับ Mobile Hybrid App (ไม่รู้คิดได้ไง ขี้เกียจขนาดนี้ สงสัยตอนคิด กรูจะเมา 555)

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

ต่อจากนี้ ถ้าจะเขียน ก็คงเป็นแบบ โพสต์ลง Facebook.com jQueryTips Fanpage นี่แหละ เล่นง่ายๆ ไปเลยกรู ยังไงก็ฝาก Page นี้ด้วย แล้วก็ถ้าว่างๆ ก็ไปคุยเล่นกันที่ Page ได้ไม่ซีเรียสๆ

สวัสดี (จบแบบหนังไทย โบราณแม่งเลยนี่)

โดยที่ Tools ตัวนี้จะแบ่ง กล่องเริ่มต้นมาให้เรา ทั้งหมด 4 กล่อง แบ่งเป็น

HTML

CSS

JavaScript

Result

โดยที่เราสามารถเขียนสามารถเขียนโคด ตามแต่ละส่วน แล้วผลลัพธ์ก็จะออกมาที่ ส่วน "Result" ที่สำคัญ Tools ตัวนี้ ยังอนุญาติให้เรา Load พวก JS Framework ต่างๆ เข้าไปเพื่อทำการเทสต์ร่วมได้ด้วย โดยที่เราจะใช้ Sources ที่เค้าเตรียมมาให้ หรือว่าจะ link ตรงเข้าไปเพิ่มเอง ก็ยังได้

ที่าำคัญ โคดที่เราเขียนออกมาทั้งหมด เรายังสามารถเอาไป Embed เพื่อแสดงผล ที่ไหนก็ได้อีกด้วย ตามตัวอย่างข้างล่างนี้เลยครับ

ลองไปเล่นดูนะครับ สำหรับผม ผมว่ามันมีประโยชน์พอสมควรเลยทีเดียว

ก่อนหน้านี้ผมมีปัญหากับการเขียน App ใน Titanium คือมันมีปัญหากับ Table พอ เนื้อหายาวๆ แล้ว Scroll ขึ้นลงเร็วๆ มันจะกระตุก หน่อยๆ ไม่ค่อย นิ่มนวลเท่าที่ควร ก็เลยคิดว่า จะลองเปลี่ยนมาเป็น HTML5 ในส่วนของ Table + JS Scrolling เข้าท่าๆ สักตัว

แต่จนแล้วจนรอด ก็ไม่มีตัวไหนได้อย่างใจผมเลย

จน iOS update มาถึง v5 นี่แหละ ถึงได้รู้ว่า คิดถูกแล้ว

Scrolling ของพวก Mobile มันจะ มี โมเมนตั้ม ที่ต่างจาก การ Scroll ขึ้นลงของ Browser ค่อนข้างมาก เพราะฉะนั้น ถ้าเราเขียน HTML Table ธรรมดา ลงไปเป็น App ความรู้สึกมันจะรู้เลย ว่าไม่ใช่ แต่ วันนี้ Apple แก้ปัญหาให้เราแล้วล่ะครับ

แล้วทั้งหมดก็แก้ปัญหาด้วยคำว่า

overflow:scroll;

-webkit-overflow-scrolling:touch;

เท่านั้นเอง จากนั้นผมก็ลอง Lab ด้วยการเอา Titanium มาเป็นโครง แต่ Table ใช้ HTML ดิบๆมา Render แล้วเพิ่ม style พวกนี้ ลงไปใน table เท่านั้นแหละ เนียนกริบ

ลองไปอ่านตัวอย่าง แล้วก็วิธีใช้ที่ link ด้านล่างนะครับ ผมขี้เกียจเขียนซ้ำเค้า

http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/

บอกได้เลย ถ้าเป็นอย่างนี้ เทรน HTML5 ใน Mobile มาแทน Native ได้แน่ๆ

แต่วันนี้ ยังไงก็มาแล้ว ก็จับประเด็น บางเรื่องมาเล่าสู่กันฟัง...

พอดีช่วงนี้ผมกำลัง ทำงานในส่วนออก Report พอดี ซึ่งที่ต้องการก็คือ ออก Report เป็น PDF อันที่จริงมันก็ไม่มีปัญหาอะไรหรอก Lib PDF มีอยู่ถมไป Zend_Pdf ซึ่งทำงานได้ละเอียดมากๆ ก็มีอยู่ แต่ด้วยความขี้เกียจ เลยไม่อยากไป Add Columns ไปสร้างสี แบ่งล๊อกอะไรให้มันวุ่นวาย

แล้วก็จำได้ด้วยว่าเคยเห็น Web ตั้งเยอะที่มัน Convert HTML เป็น PDF มันน่าจะมีใครทำ Lib อะไรมาให้ใช้บ้างน่า สรุปได้ แคนดิเดท มา 3 ตัว ประกอบไปด้วย

1. TCPDF

2. Dompdf

3. mPDF

ก็เลยค่อยๆลอง ไปทีละตัว โดยที่แต่ละตัว ก็มีข้อเด่น ข้อด้อยต่างกันไป ซึ่งแรกเริ่ม ผมก็ไล่มาเลย ตั้งแต่

TCPDF

ตัวนี้ค่อนข้างจะใช้ง่ายมาก ไม่ต้อง Config อะไรวุ่นวาย Font ก็มี ที่ Support ภาษาไทยมาให้ในตัว คือ "Freeserif" ไม่ต้องทำอะไรเท่าไหร่ ตอนแรกก็คิดว่าจะหยุดที่ตัวนี้แหละ แต่พอทำไปทำมาเกิดปัญหา คือมันสามารถอ่าน Stylesheet ได้แค่เล็กน้อยเท่านั้น พวก attrs ง่ายๆ อย่าง  color อะไรแบบนี้

แต่ว่ามันดันอ่านพวก float, padding, margin เพี้ยนๆ ไม่เหมือน HTML ที่ทำมาเท่าไหร่ ซึ่งมันยากมาก เพราะผมต้องทำ HTML เป็น table เกือบทั้งหมด เลยเปลี่ยนๆ ลองตัวใหม่

Dompdf

ตัวนี้ลองอ่าน Document แล้ว ก็ลองใช้งาน ถูกใจมากเลย ถึงจะ config ลำบากไปนิด แต่ว่าใช้งานง่าย โคดเขียนสวย Doc มีตัวอย่างเยอะ แล้วก็ดู ค่อนข้างโปรที่สุด แต่....

พอถึงเรื่องภาษาไทย ผมพยายาม Add Font ไทยเข้าไป มันก็ได้อยู่ ถึงจะลง Font ค่อนข้างลำบากหน่อย แต่พอเอามา Render จริงๆ font ไทย เนียนนะครับ ใช้ได้หมด แต่สระ เสือกกลายเป็น สี่เหลี่ยมหมด (คิดว่าคงมีวิธีแก้ แต่ตอนนี้ไม่ได้หาต่อแล้ว) ก็เลยข้ามไปก่อน กะว่าจะมาหาวิธีแก้ ที่ตัวนี้แหละ แต่ยังไงขอลอง ตัวถัดไปก่อน

mPDF

ตัวนี้บอกตามตรง ตอนแรกผมค่อนข้างจะไม่สนใจ ด้วยความที่หน้าเว็บ ดูไม่โปร (ใช้ WordPress ไม่เปลี่ยน Theme) PageRank ไม่ขึ้นเลย Search หาก็ไม่ค่อยมีข้อมูล

แต่ก็ลองดู เพราะว่า คงใช้เวลาไม่นาน ดูตามตัวอย่างแล้ว เขียนตามนิดเดียวก็คงรู้ผล

แต่เรื่องไม่น่าเชื่อก็เกิดขึ้น คือ Lib ตัวนี้กับทำตามที่ผมต้องการได้ทุกอย่าง คือโจทย์ของผมมีว่า

- ต้องสามารถอ่าน CSS ได้

- ต้องสามารถแสดงผล ได้เหมือน HTML เพี้ยนได้ไม่เกิน 2%

- ต้องสามารถใช้งานกับภาษาไทยได้ 100%

- ใช้ง่ายไม่ต้องต่อ online กับ Service ภายนอกตัวอื่นๆ

- ต้องสามารถ ทำ Paging ในตัว PDF ได้

- ต้อง Config header + footer ได้

- ต้องอ่าน img แล้วนำเข้าไปได้

ไม่น่าเชื่อก็ต้องเชื่อแหละครับ Lib ตัวนี้ทำได้หมดเลย ได้มากกว่าที่ผมต้องการเสียอีก แถมระบบการ Config ก็เอื้อ แก้การประยุกต์ใช้งานมากๆ

มาลองดูตัวอย่างที่ผมทำการ Lab ไปนะครับ

สมมุติว่า ผมมี HTML ตามนี้

<?php

$html = <<<EOF
	<div id="wrapper">
		<div class="row">
			<div class="picture"><img src="http://a2.twimg.com/profile_images/1699637550/iannnnnAVATAR_normal.png" /></div>
			<div class="content">
				<div class="header">
					<a href="#">Name<span>@username</span></a>
					<small>4m</span>
				</div>
				<p lang="th">[THAI TEXT TO SHOW]</p>
				<div class="footer">Footer text</div>
			</div>
		</div>
		<div class="clear"></div>
	</div>
EOF;

?>

แล้วผมมี stylesheet ประมาณนี้

.row { background:url(http://www.domain.com/assets/images/bg.jpg); }
.row { clear:both; width:500px; padding:10px; border-radius:5px; font-family:naipol; font-size:11px; background-color:#EEE; }
.picture { float:left; display:block; width:48px; height:48px; }
.picture img { width:48px; height:48px; border-radius:5px; }

.content { margin-left:60px; }
.content .header small { float:right; text-align:right; }
.content p { margin:0; padding: 5px 0; }
.content .footer { color:orange; }

.clear { clear:both; }

ผมลองเขียนโคดขึ้นมาเพื่อ Gen ออกมาดู

<?php
$mpdf = new mPDF();
//$mpdf->setDisplayMode('fullpage');
//$mpdf->setAutoFont();

$mpdf->writeHTML($style, 1);
$mpdf->writeHTML($html);
$mpdf->Output();

?>

โดยที่ Stylesheet ผมใส่ไว้ในตัวแปล $style นะครับ

ผลลัพธ์ที่ออกมาของผม มาตามรูปข้างล่างนี้ครับ

ซึ่งเหมือนกับ HTML เป๊ะเลย เรื่องของ Font Thai ผมใช้ "Thonburi" เป็นตัว font ครับ

ที่สำคัญ Lib ตัวนี้ยังมีการ config font ที่ฉลาดมา และยังสามารถ Detect ภาษาให้เองได้ด้วยอีก

http://mpdf1.com/manual/index.php?tid=453

ลองไปเล่นดูนะครับ มันเหมาะกับการ Generate Reports, Coupons หรือ หน้าเว็บ มาก

แต่ว่า บทความนี้มันดีจริงๆ ผมเลยต้องเอามา บล็อกกัน ทั้งๆ ที่ Copy มาเป็นลิ้งก์แบบนี้แหละ

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

เพราะ JS ในปัจจุบันมัน ค่อยข้างจะแทรกซึมไปทุกที่ ทั้ง HTML5, Mobile Framework, API Protocol, Push Engine แล้วก็อีกล้านแปด ในอนาคตนี้ก็ไม่มีทางตายง่ายๆ นับวันมีแต่จะใหญ่โตขึ้นเรื่อยๆ

ก็ลองๆดูๆ กันหน่อยนะ วันนี้ขออัพเดท แบบคนขี้เกียจสักหน่อย 555

ลองไปดูตามลิ้งก์นี้ครับ เขียนดีมากๆ

http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth

"เขียนโปรแกรมเหรอ" ?

ตัวผมก็ไม่ได้เรียนเกี่ยวกับทางด้านนี้มาเลยนะ ไม่เคยคิดด้วยซ้ำ จบโฆษณามาล่ะ เพราะตอนเรียนมหาลัย ไม่ชอบเลข กับ ภาษาอังกฤษ ถึงขนาดเคยติด F ซะด้วยซ้ำ แถมจบช้ากว่า คนอื่นปีนึง เพราะว่าติดสาว 555

จบมาก็ไม่รู้จะทำอาชีพอะไร เพราะว่าโง่มาก ดีที่ตอนนั้นเห็นเว็บมันกำลังมา หันไปทางไหนมีแต่ คนเล่นเน็ท เลยหันมาศึกษา เพราะอยากรวยอย่างเดียว คิดว่า ทำเว็บเสร็จ สงสัยคนจะมาลงโฆษณาเยอะ (เคยเห็นค่าโฆษณาบางเว็บแล้วมันเยอะดี) ลงสัก 10 ป้าย ป้ายละพัน ได้สักเดือนละ 10,000 นึง โอ้ย แหล่ม มีตังค์เที่ยวแน่กู !!!

ก็เลยหัดเขียนเว็บแม่งเลยนี่ เดี๋ยวทำเว็บดังๆ รวยไม่รู้เรื่อง ฮ่า ฮ่า ฮ่า

ในใจตอนนั้นคิดว่า มันจะไปยากอาไร้ เดี๋ยวไปซื้อหนังซื้อสอนทำเว็บ ที่ร้านหนังสือ ดอกหญ้า มาสักเล่ม อ่านจบกูก็ทำได้แล้ว สุดท้ายได้ หนังสือ Dreamweaver มาเล่มนึง จำไม่ได้ว่า เวอร์ชั่นอะไร คลับคล้าย คลับคลาว่าเป็น 5 หรือ 6 นี่ล่ะ มั้ง (จนเดี๋ยวนี้เปิดไปได้ไม่เกิน 30 หน้า)

สุดท้ายมาลองทำ เอาภาพมาปะๆ ติดๆ แล้วก็ลองทำ เหมือนเว็บ Idol ดู แต่ทำไมทำแบบมันไม่ได้วะ แถมเครื่องมือเม่งก็โครตจะเยอะ ใครมันจะไปใช้เป็น -*-

เลยมานั่งตรึกตรองดู สงสัยเพราะว่าเราไม่มีพื้นฐาน ไม่มีคนสอน อืมม์ น่าจะใช่ละ....

ตัดสินใจได้ปุ๊บ ไปสมัครเลย คอร์สทำเว็บ หวานกูแล้วๆ ทีนี้ได้แน่ ได้แน่ๆ หึ หึ หึ

วันแรกไปนั่งเรียน จำได้ว่า อ. เอา โปรแกรมอะไรไม่รู้ของ Adobe มาสอน เป็นโปรแกรมทำเว็บ แบบนึงคล้ายๆ Dreamweaver นี่ล่ะ จำชื่อไม่ได้ เรียนๆ ไป อู้ยยยย ง่าย เดี๋ยวอีก 4-5 ครั้งจบคอร์ส เสร็จกูแน่ เว็บ Idol ลอกแม่งเลย ฮ่า ฮ่า อ่า พอมาถึงครั้งที่สี่ เริ่มชักไม่แน่ใจ

"ทำไมบทเรียนกู มันมีแต่เอาภาพมาป่ะๆ ติดๆ วะ นี่มันต้องมีอะไรผิดพลาดแน่ๆ" เลยตัดสินใจไปถาม อ. ว่าเนี่ยๆ เว็บ Idol มันทำแบบนี้ๆ เมื่อไหร่ อ จะสอนสักที แบบว่า ใจร้อนๆ อยากรวย

อ. อมยิ้ม ตอบมาด้วยสีหน้า สมเพชเต็มที บอกว่า "นี่คุณ เว็บแบบนี้มันต้องเขียนโปรแกรมด้วย ที่คุณเรียนเค้าเรียก เว็บดีไซด์" !!!!!!!

เหมือนฟ้าผ่ากลางวัน "เปรี้ยง" ความฝันในวัยหนุ่ม กระเจิงทันที

แล้วนี่..... ไอ้โปรแกรมที่กูใช้อยู่มันไม่ใช่การเขียนโปรแกรมหรอกเหรอ ???

อ้อ เราเป็นแค้ผู้ใช้โปรแกรมสินะ เราเป็นแค่ ผู้ใช้ ผู้ใช้ ผู้ใช้ Y_Y

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

ตัดสินใจได้อีกปั๊บ ก็เอาอีก ไปสมัครอีก คอร์ส PHP Language
(ขอบคุณการตัดสินใจวันนั้นของตัวเองมากๆ)

แล้วก็ได้มาเทคคอร์สสั้นๆ เกี่ยวกับ PHP รวมถึง Database นิดหน่อย ตอนไปเรียน ยอมรับเลยว่า เราคงจะโง่ที่สุดในห้อง 555

เพราะว่าพิมพ์ดีด ยังไม่ได้เล้ย ต้องคอยให้ พี่ข้างๆ Copy Code ให้เพราะพิมพ์ไม่ทันเค้า อายสาดดดดด

พอไปได้สัก 2-3 ครั้ง ท้อครับ เพราะแม่งไม่เข้าใจเลย if if else else อะไรวะ งงชิบ แล้ว แถมยังขาดเรียนไปหนึ่งครั้งเรื่องสำคัญ จำได้ว่าเป็นเรื่อง เก็บ Login ใน Cookie (ก่อนหน้านั้นเรียนเรื่อง session) แต่ก็อดทนเรียนจนจบ ทั้งๆที่ใจมันถอดไปแล้วด้วยซ้ำ แต่เสียดายตังค์ ค่าเรียน

ก่อนจบคอร์ส จำได้ว่า อ ให้การบ้านมา ให้ทำ Web Application แบบมีการตอบโต้กันได้ มี Database มี การใช้ Text เก็บข้อมูล (Flat Data) ซึ่งก็ไม่ได้สนใจอะไรมากนัก เพราะใจมันถอดทิ้งไปแล้ว
ความเชื่อที่จะที่แบบ เว็บ Idol ไม่มีหลงเหลือ

โอ้ ความฝันในวัยหน่ม มันช่างสั้นนัก …. T_T

จบแล้วครับ …. The End


เอ้ย ยังๆ มันต้องเหมือน เถ้าแก่น้อยดิ มันต้อง Happy Ending 555

หลังจากจบมา ผมก็ลองเอา โคดที่ พี่ใจดีคนนั้น อุตส่าห์ Copy มาให้ (ผมจำชื่อพี่ไม่ได้ แต่ก็ต้องขอ ขอบคุณมากครับ ใจพี่หล่อมากครับ) มานั่งอ่านดูทีละบทๆ จริงๆ แล้วถ้ามาตอนนี้ หลายๆ คนคงด่าผมว่าโง่ โคดมันง่ายๆ เองมีประมาณ
- วิธีใช้งาน Cookie
- วิธีใช้งาน Session
- แบบฝึกหัดท้ายบท ทำระบบ Member Login
- วิธีการติดต่อ Database
- วิธีการเก็บข้อมูลลงไฟล์
- แบบฝึกหัด ทำระบบ Guest Book

แล้วก็อื่นๆ ประมาณนี้แหละ ไม่หนีกัน

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

สุดท้ายเอาวะ ลองทำ แบบฝึกหัดที่ อ เค้าให้มาดู "ระบบเว็บบอร์ด" ซึ่งตอนนั้นมันเป็นอะไรที่ยากมาก เป็นโจทย์ที่ต้องใช้ บทเรียนทุกบท มาผนวก เข้าด้วยกัน แต่ก็ทำมันออกมาจนเสร็จได้ด้วยตัวเองจนได้

ภูมิใจมากกกกกกกกก

และตั้งแต่วันนั้น ผมก็ยึดอาชีพนี้มาได้ 8 ปีแล้วครับ

เรื่องทุกเรื่องที่ผมเขียนใน Blog แห่งนี้ คือสิ่งที่ผมศึกษาเอาเองทั้งหมด จากคนที่ติด F วิชา Eng จนตอนนี้อ่าน Doc Eng คล่องเลยครับ

เอาล่ะ พอๆ เดี๋ยวจะหาว่า ขี้คุย 555

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

เอาล่ะ ไหนๆ ก็อัพ แล้ว เอาเรื่องที่หาอ่าน บทความภาษาไทย ไม่ค่อยได้ดีกว่า เรื่องของ "Web Service"  ครับ ปกติส่วนมากจะมีแต่บทความวิธีใช้ แต่ว่า วันนี้ผมจะมาเขียน บทความ "วิธีทำ" กันดีกว่า

สมัยนี้ หนียังไงก็หนีไม่พ้น กับการต้องเข้าไปยุ่งกับ API ของเว็บบิ๊กๆ ทั้งหลาย ซึ่งแต่ละเว็บก็มีการใช้ Protocol ต่างกันไป ถ้ายิ่ง บิ๊กมาก ก็จะมี Protocol ให้ใช้แทบจะครบ

มีทั้ง RESTful, XML-RPC, JSON-RPC, SOAP, etc. ซึ่งลงท้ายทุกตัวทำงานเหมือนกันหมด คือใช้ติดต่อ ระหว่าง โปรแกรม ซึ่งตอนนี้ API ของเว็บทุกเว็บ อย่างน้อยจะต้องมี  1 protocol คือ REST เพราะว่ามันง่ายกับ Developer ในการติดต่อ แล้วก็เขียนเชื่อมไป จะว่า XML-RPC, JSON-RPC ก็ต้องถือว่า เป็น REST ด้วยเหมือนกันแหละ เพียงแต่ Response Format ต่างออกไป

เอาล่ะ ทฤษฎีอาจจะไม่ค่อยแน่น แต่ปฎิบัติ ผมพอไหว  555

วันนี้เราจะมาออกแบบ ชุด API ของ REST กัน โดยที่โจทย์ของเรามีดังนี้

1. API จะต้อง Authen จากโปรแกรมเชื่อมใช้งานได้

2. Structure ต้องเป็นระเบียบสามารถเพิ่ม ชุด function ได้ง่าย

3. Response ต้องออกได้ทั้ง XML และ JSON

4. ต้องมี Failed Message  ในกรณีที่ API ไม่สามารถทำงานได้สมบูรณ์

อุปกรณ์เครื่องครัวที่ต้องเตรียมมา

1. CodeIgniter ตัวนี้ใช้เป็น Base Render MVC เฉยๆ จะมีไม่มีก็ไม่ว่ากัน เอา Structure ตามถนัด

2. Zend_Rest_Server ตัวนี้ก็เหมือน เนื้อสัน ไม่มีก็ทำ เสต๊ก ไม่ได้

3. Zend_Json ตัวนี้เอาไปแปลง Response Format  กลับไป กลับมาระหว่า XML -> JSON

เอาล่ะ มาเริ่มกันเลย....

ก่อนอื่นเราต้องมี File Bootstrap ของ API คือตัวกลางนั่นแหละ เวลาที่ ใครเรียกจะต้องมาที่ไฟล์นี้ก่อนซึ่งตัวนี้ผมใช้ Controller นั้น CI  มาทำ

โดยในไฟล์นี้ผมตั้งชื่อ Controller ว่า Rest.php

<?php

class Rest extends CI_Controller {

	public static $server;
	
	private $_methods = array('blogs');
	
	public function __construct()
	{
		parent::__construct();
		
		// load zend reset server class

		
		require_once('Zend/Rest/Server.php');
		self::$server = new Zend_Rest_Server();
		
	}
	
	public function _remap($method, $attrs)
	{
		// check existing api methods
		if (!in_array($method, $this->_methods)) {
			die('API is not exists');
		}
		
		// if having specific method
		if (method_exists($this, $method)) {
			call_user_func_array(array($this, $method), $attrs);
		}
		else {		
			$call = "service_{$method}";
			$this->load->model('services/'.$call);
			self::$server->setClass($call);
		}
		
		// keep response
		self::$server->returnResponse(true);
		$xmlstr = self::$server->handle();
				
		// response format
		$format = $this->input->get_post('format');
		if (strcasecmp($format, 'json') == 0)
		{	
			// format output to valid structure
			$dom = new DOMDocument('1.0');
			$dom->preserveWhiteSpace = false;
			$dom->formatOutput = true;
			$dom->loadXML($xmlstr);
			
			// now we have valid format
			$xmlstr = $dom->saveXML();
				
			// zend not provide attribute, so we change to the code below
			$this->load->loadClass('Zend_Json');
			$response = Zend_Json::fromXml($xmlstr, true);		
			
			header('Content-Type:application/javascript;charset=' . config_item('charset'));
			echo Zend_Json::prettyPrint($response); exit(0);
		}
		
		// return XML format
		header('Content-Type:text/xml; charset='.config_item('charset'));
		echo $xmlstr;
	}
		
}

?>

ไฟล์นี้ก็มีประมาณนี้ครับ โดยแต่ละ method มีการทำงาน คร่าวๆ ดังนี้

method __construct

ส่วนนี้จะเป็นส่วนของการ include Zend_Rest_Server เข้ามาใช้งาน กับโหลด helper บางตัวเข้ามา (ผมจะขยายงาน helper ตัวนี้ทีหลัง)

method _remap

ส่วนนี้เป็น คล้ายๆ magic method ใน CI คือ เอาง่ายๆ มันเหมือน __call ใน class ปกติ ที่เวลาเราเรียก method อะไรมันจะเข้ามาที่นี่ก่อน นั่นแหละ

ส่วนการทำงานของมันก็คือ เป็นตัวรับ method ที่ user เข้ามาใช้งาน จุดสำคัญช่วงแรกอยู่ที่โคดตรงช่วงนี้

$call = "service_{$method}";
$this->load->model('services/'.$call);
self::$server->setClass($call);

จะเป็นตัวรับ method ว่า user call อะไรมาเช่น  blogs, albums, friends

ก็จะไปเรียก model ที่อยู่ตาม path แบบนี้

/application/models/services/service_blogs.php

จากนั้นก็เอา methods ใน service_blogs ว่ามองเป็น method ของชุด API blogs

ส่วนท้ายๆ มันคือกันทำ  format ระหว่าง xml, json ค่อยๆ ไล่โคดเอาแล้วกันนะครับ 

ทีนี้มาดูในส่วนของ service_blogs.php  กันว่า เรามีอะไรบ้าง

<?php

class service_blogs extends CI_Model {

	public function __construct()
	{
		parent::__construct();
	}
	
	public function GetItems($page=1, $limit=20, $sort="created_at-desc", $criteria=array())
	{
		// implement
		
		return array();
	}
	
	public function GetItem($id)
	{
		// implement
		
		return array();
	}
	
}

?>

เราจะมี methods ที่รอการ implement เรียงอยู่ครับ ซึ่งถ้าเราทำ สองไฟล์นี้จบแล้ว เราจะสามารถเรียกแบบนี้ได้

http://xxx.com/api/rest/blogs?method=GetItem&page=1&limit=20

โดยถ้าเราแยกชิ้นของ URL ออกมาจะมองเป็น โปรแกรมได้ดังนี้

1. rest = controller (CI)

2. blogs = model (models/services/service_blogs.php)

3. method:GetItems = method นึง ใน class ของ service_blogs

4. &page=1&limit=20 = arguments ของ method นั้นๆ

ที่เหลือ เราก็แค่ implement ลงไป Zend_Rest_Server จะจัดการทำ ให้ออกมาเป็น XML เอง

ทีนี้เราลองมา Implement ดูสักนิด ที่ method GetItem แล้วกัน สมมุตผมโคดลงไปแบบนี้

public function GetItem($id)
	{
		return array(
			'response' => array(
				'id' => $id,
				'message' => "You are calling blogs:GetItem with parameter id = ".$id
			)
		);
	}

แล้วผมมาลองเรียกแบบนี้

http://xxx.com/api/rest/blogs?method=GetItem

สิ่งที่ผมจะได้กลับมาก็คือ

เพราะว่าอะไรครับ ?

เพราะว่า id ผมเป็น field บังคับ Zend_Rest_Server จะมาเป็นตัวจัดการตรงนี้เอง แต่ถ้าผมเขียนโคดใหม่เป็น

public function GetItem($id=123)
	{
		return array(
			'response' => array(
				'id' => $id,
				'message' => "You are calling blogs:GetItem with parameter id = ".$id
			)
		);
	}

สังเกตุตรง id=123  นะครับ

ผลลัพธ์ที่ได้ ก็จะผิดกัน จะเหมือนกับผมเรียกไปด้วย URL

http://xxx.com/api/rest/blogs?method=GetItem&id=123 นั่นแหละครับ ตามภาพด้านล่าง

เอาล่ะ ทีนี้เราลองมาทำการ validate ชุดของ api แบบง่ายๆกันดูนะครับ ผมจะเพิ่มโคดอีกหน่อย ดังนี้

public function GetItem($id=123)
	{
	 	$username = $this->input->get_post('username');
	 	$password = $this->input->get_post('password');
	 	
	 	if (strcmp($username, 'Teepluss') != 0 || strcmp($password, '123') != 0) {
	 		throw new Exception('Sorry, User is exists our database.');
	 	}
	 	
	 	
		return array(
			'response' => array(
				'id' => $id,
				'message' => "You are calling blogs:GetItem with parameter id = ".$id
			)
		);
	}

จะเห็นได้ว่า ผมมีการร้องขอ ให้กรอก  username + password เข้ามาแล้ว ที่ผมไม่เอาใส่เป็น parameters ของ method เพราะจะทำให้ดูว่ามันจะเรียกแบบนี้เลยก็ได้ ส่วนค่าตรง parameters ของ method จะแทนได้ทั้ง  get และ post เลยเช่นเดียวกัน แตกต่างกันตรงที่ parameter Zend Rest มีการจัดการ validate เรื่อง missing parameter ให้ด้วย เท่านั้นเอง

ทีนี้ผมจะลองเรียกไปใหม่ แบบนี้

http://xxx.com/api/rest/blogs?method=GetItem&id=123

ข้อความตอบกลับมาของผมก็คือ

นั่นก็เพราะผมยังไม่ได้ใส่ username + password ไปนั่นเอง เอาใหม่ทีนี้ใส่ให้ถูกๆ เป็น

http://xxx.com/api/rest/blogs?method=GetItem&id=123&username=Teepluss&password=123

ข้อความตอบกลับของผมก็จะเป็น

ถูกต้องตามปกติ และนอกจากนั้นแล้ว จากโคด ที่เราทำการเขียนไว้ต้องแต่ controller rest.php ยังสามารถทำให้เราจัดการกับ format ได้อีกด้วย เช่นผมพิมพ์ไปว่า

http://xxx.com/api/rest/blogs?method=GetItem&id=123&username=Teepluss&password=123&format=json

ค่าที่ตอบกลับมาผมจะได้มาใน format ของ  json ดังภาพด้านล่าง

ซึ่ง Format JSON นี่ล่ะ เหมาะนักในการไปใช้ใน โปรแกรมจาก อุปกรณ์ต่างๆ เช่น iPhone, Android เป็นต้น

ไม่ยากเกินไปใช่มั้ยครับ สำหรับ 4 เดือนที่หายไป วันนี้มีของมาฝากเท่านี้แหละ เห็นมั้ยล่ะ มันต้องพิมพ์เยอะแค่ไหน ในการอัพ บล็อกแต่ละที นี่ล่ะที่ขี้เกียจ T___T

เจอกันโอกาสหน้านะครับ

Tee++;

จริงๆ แล้วการทำ oAuth ของ Facebook เพื่อ Request Access Token นั้น ตัว SDK มันก็ทำงานได้ค่อนข้างดีแล้ว แต่ว่า บางทีก็ขี้เกียจ implement วุ่นวายแบบนั้น เลยเขียนลวกๆ ง่ายๆ ออกมา ลองมาดูขั้นตอนกัน ง่ายมากๆ

$app_id = "APP_ID";
$app_secret = "APP_SECRET";
$callback_url = "http://www.callbackdomain.com";

$code = @$_GET['code'];
if ($code)
{	
	$params = array(
		'client_id' => $app_id,
		'redirect_uri' => $callback_url,
		'client_secret' => $app_secret,
		'code' => $code
	);
	$url = "https://graph.facebook.com/oauth/access_token?" . http_build_query($params); 
	$result = file_get_contents($url);
	
	parse_str($result, $output);			
	echo $output['access_token'];
}
else
{				
	$params = array(
		'client_id' => $app_id,
		'scope' => "publish_stream,offline_access",
		'redirect_uri' => $callback_url,
		'display' => "wap"
	);
	
	$url = "https://graph.facebook.com/oauth/authorize?" . http_build_query($params);
	echo "<script>window.location='" . $url . "';</script>";
}

แค่นี้ล่ะ อิอิ จบละ ไปนอนละ 555

จริงๆ แล้วผมมีเรื่องอีกหลายเรื่องที่อยากจะมาเขียนทั้ง Yahoo Query Language (YQL) หรือว่าจะเป็น Zend JSON-RPC Server รวมไปถึง jQuery MVC แต่ก็อดใจไว้ เพราะกลัวว่าเรื่อง Titanium จะไม่จบแล้วก็ขาดความต่อเนื่อง ซึ่งผมกะๆ เอาโดยประมาณกว่าจะเขียนจนจบ คงมีเยอะแน่ๆ แล้วดูจากการ update ที่บ่อยมากๆ ของผม คงจะเขียนสัก ปี สอง ปีเป็นแน่แท้ 555

แต่เอาเถอะครับ ต่อจากนี้จะพยายามมาอัพเดทให้บ่อยขึ้นละกัน

วันนี้ก่อนที่เราจะมาลงมือเขียนจริๆ ผมอยากจะเล่าให้ฟังถึง โครงสร้างของ Titanium Mobile สักนิดนึง อย่าเพิ่งเบื่อกันไปก่อนนะครับ

เริ่มต้นตั้งแต่เรา Create Project ขึ้นมาใหม่ เราจะพบไฟล์ตามภาพด้านล่างนี้

โดยจะประกอบไปด้วย ไฟล์ Config, License, Readme แล้ว ก็ โฟลเดอร์ที่เราไว้ใช้ทำงาน คือ Resources

แล้วถ้าเราแตก Resources ออกมาดู (ตามภาพด้านล่าง) จะพบว่ามี ไฟล์ app.js นั่นล่ะครับ คือไฟล์แรกที่เราจะใช้ในการเขียน App ส่วนโฟลเดอร์ iphone, android คือที่ไว้เก็บไฟล์ ภาพเวลารัน App ขึ้นมาหรือไฟล์ที่เกี่ยวข้องกับ app โดยตรงเช่น icon app อะไรแบบนั้น

ถ้าเราจะทำให้ App รองรับ Retina Display สำหรับ iPhone เราจะใส่ @2x ตามเข้าไปด้วยสำหรับทุกๆ ไฟล์ image

ทีนี้มาดูกันที่ไฟล์  app.js อีกที

เมื่อเรา Create Mobile Project ขึ้นมา Ti Studio ก็จะสร้าง App มาให้เราเลย พร้อมกับ TabGroup ซึ่งจริงๆ แล้วเราจะเริ่มต้น Application  ด้วยอะไรก็ได้ เช่น

Windows, TabGroup, Navgroup

ซึ่งถ้าจะพูดกันตรงๆ ไอ้ TabGroup นี่แหละง่ายสุด แต่ถ้าจะให้ Performance ดีที่สุด ผมว่าเริ่มด้วย Window ปล่าวๆ ยังไงมันก็ต้องดีกว่า แต่ช่างมันเหอะ ไม่ใช่เว็บนี่ ต้องมาคำนึงอะไรกันมากเล่า 555

ทีนี้มาลองดูโคดของ app.js กันไปทีละส่วน

ช่วงบรรทัดที่ 1-20

ช่วงนี้จะเป็นการสร้าง TabGroup ขึ้นมา พร้อมทั้งสร้าง window จากนั้น ก็สร้าง tab ย่อย เพื่อจับ window ลงไปหา tab ย่อยที่ 1 ซึ่งถ้าเราลอง Build ดู ใน Simulator จะแสดงผลตาม ภาพด้านล่าง

ซึ่งส่วนที่เราสร้างก็คือ Tab ด้านล่างที่เขียนว่า "Tab 1" นั่นเอง ส่วนภาพของ Tab ก็คือไฟล์ "KS_nav_views.png" ที่ิอยู่ใน Resources

แล้วก็ผมบอกไปแล้วนะครับ ถ้าเราจะทำ ให้มันรองรับ Retina Display เราจะต้องสร้างไฟล์ @2x ใส่เข้าไปเอง ถ้าตามกรณีนี้ เราก็ต้องมี KS_nav_views@2x.png ประกอบเข้าไปด้วย ส่วนการเลิกไฟล์ ผมเข้าใจว่า App จะเป็นตัวจัดการเอง

ส่วนคำว่า "I am Window 1" นั้น เราจะเห็นในโคด ต่อจาก บรรทัดที่ 20 ตามนี้ครับ

ซึ่งจะเป็นการสร้าง Label ที่มี Text จากนั้นจับยัดลง Window ด้วยคำสั่ง .add()

ต่อมา โดด บรรทัดที่ 31-52 เป็นแค่การ สร้างเข้าไป อีก tab นึงเท่านั้นเอง ตรงนี้ผมขอข้ามนะครับ

ต่อมาดูภาพด้านล่าง

โคดตั้งแต่ 56-64 จะเป็นการ เอา tab ที่เราสร้าง ยัดลง tabgroup ใหญ่ จากนั้นก็สั่งมัน เปิด ซะ เท่านี้เราก็จะได้ ตัวตั้งต้นของ application แล้วครับ ง่ายมากๆ

ถ้ามาลองสังเกตุดูการออกแบบ จะเปนในลักษณะ Layer คือ มันจะซ้อนกันเป็นชั้นๆ ไป ตามนี้

label <- window <- tab <- tabgroup

มันจะเป็นชั้นๆ ไป ค่อยๆ add เข้าหากัน หลักการออกแบบนี้เราจะใช้ในทุกส่วนของการเขียน Titanium Mobile ครับ

ซึ่งจริงๆ แล้วตัว Structure หลักมันจะมีอีก หลายส่วนที่อยากให้ลองดูกัน

ไม่ว่าจะเป็น Internation App ด้วย

Internationalization and Localization (i18N)

หรือว่าจะเป็นส่วน Global UI ด้วย .jss 

อันนี้มันอธิบายยากไปหน่อย ยังไงถ้าอยากรู้ลองดูที่ link นี้นะครับ

http://developer.appcelerator.com/blog/2010/08/dealing-with-multiple-screens-and-multiple-languages.html

แล้วก็เนื่องจาก Titanium Mobile มัน Base ด้วย JS ดังนั้นเราจะเขียนไปในทิศทางไหนก็ได้ อาทิเช่น

1. เขียนโดยแต่ออก ด้วย url

คือเขียน 1 view 1 logic ต่อ 1 ไฟล์ อันนี้มันจะเหมือนตัวอย่างที่เค้าให้มาคือ Kitchensink

2. เขียนแบบ OOP โดยมองทุกอย่างเป็นกลุ่มวัตถุ แล้วก็สามารถ Reuse ได้ในส่วนต่างๆ

http://wiki.appcelerator.org/display/guides/Building+Reusable+Factories

3. จะเขียนเป็น MV, MVC, MC อะไรก็ได้ตามแต่ที่จะคิด แล้วก็มองว่าเหมาะกับตัวเอง ทำให้ทำงานง่าย

http://stackoverflow.com/questions/2573592/how-to-organize-js-files-in-a-appcelerator-titanium-project/2594227#2594227

ส่วนตัวผมเอง (ตอนนี้) เลิกวิธีการเขียนแบบตัวอย่าง Tweetanium เพราะว่า มันจัดการไฟล์ js ได้เป็นสัดส่วนดี แต่ว่าถ้ามือใหม่ ผมคิดว่าข้อ 1 มันก็ไม่เลวร้ายนะครับ แถมได้ performance ค่อยข้างดีด้วย (คิดเอาเอง) เพราะว่า Process มันแยกกันเป็นชิ้นๆ

ยังไงก็ลองเล่นดูนะครับ

เอาล่ะครับ มาเข้าสู่โลกของ Mobile กันอีกครั้ง 555

วันนี้ผมจะมาเข้าเรื่องของ Titanium Mobile แล้วนะครับ โดยก่อนที่จะลงมือเขียนกันนั้น มาทำความรุ้จักคร่าวๆ กันก่อนว่า ไอ้เจ้า "Titanium Platform" เนี่ยมันคืออะไรกัน ?

Titanium เนี่ยเป็นเครื่องหมายการค้าของ Appcelerator, Inc. โดยมี Tool ที่เป็นจุดขายเลย คือเครื่องมือพัฒนา Software แบบ Cross-Platform และที่สำคัญคือเป็น Native App ด้วย

คำว่า Native App ก็หมายความ App ที่ออกมา จะมีลักษณะ เหมือนกับ App ที่พัฒนาด้วยภาษาต้นแบบเลย ประมาณนั้น โดยภาษาที่เขียนไม่จำเป็นต้องเป็นภาษา ที่ทาง Hardware แต่ละตัวกำหนด โดยที่ ตัว SDK ของ Titanium จะทำหน้าที่เป็นตัวกลางระหว่าง ภาษาที่เราเขียน กับ ภาษาที่ใช้งานจริงๆ ให้เราเอง พูดง่ายๆ ก็ลองนึกภาพ  API ละกัน แนวๆ นั้นแหละ

อ้าวแล้วทำไมเราต้องมาใช้  Titanium ล่ะ ?

จริงๆ ส่วนตัวผมเองตอนแรก มีคำตอบเดียว ก็คือ "มันง่าย" ไม่เสียเวลาดี แต่พอมาจับลึกๆ แล้วมันมีคำตอบที่ผมสรุปมาเองประมาณนี้ครับ

1. ภาษาที่ใช้ส่วนมากเป็น Web Skill ซึ่งผมคิดว่า เราๆท่านๆ ก็คงมีติดตัวกันมาพอสมควร จึงไม่เสียเวลามากนัก ในการเรียนรู้

2. ทำที่เดียวมันออกมาได้หลาย Platform อาทิเช่น เขียน Software บน  Windows ได้ของ Mac, Linux แถมมาด้วย หรือว่า เขียน iOS ได้ Android ติดมือมาอีก (อาจจะมีแก้คำสั่งส่วน UI บ้าง)

3. มี Developer ใช้อยู่เยอะ พอสมควร App ใหญ่ๆ บางตัวก็ใช้ อาทิเช่น Ebay ทำให้มีความมั่นใจได้พอสมควรว่า จะไม่ถูกลอยแพ หรือว่า ตัดออกจาก สาระบบ ง่ายๆ

4. ฟรี ไม่ต้องเสียตังค์เพิ่มเติม แต่ถ้าอยากจ่ายคุณ ก็อาจจะได้  IDE ดีขึ้น Module API มากขึ้น ได้เข้าไปดูในส่วน Knowlegde Center มากขึ้น ราวๆ นี้

5. API ทำมาได้ล้อกับ Native Apps อย่าง  ได้ใกล้เคียงกันมาก แทบจะครบตามที่ต้องการ

เอาล่ะ 5 ข้อนี้ก็ พอสำหรับการตัดสินใจที่จะใช้งานแล้ว สำหรับผม ที่จะขาดไปบ้างก็มี 

1. Performance ไม่ได้ดีระดับ Native แต่ก็ถือว่าไม่น่าเกลียดไปนัก

2. ไม่มี Interface Builder แต่ข้อนี้ก็แก้ได้ ด้วยมีคนเขียนตัว Convert มาให้แล้วครับ สำหรับ Titanium Mobile นะ เดี๋ยวไว้จะเอามาแนะนำกัน

3. หาข้อมูลยากเหลือเกินครับ ถ้าไม่ยอมจ่ายตังค์ จะส่ง Ticket ไปถามก็ไม่ได้ แต่เรามันพวก คิวบู๊ อยู่แล้ว เรื่องแค่นี้ ไม่ง้อก็ได้วะ !

เอาล่ะๆ มาดูข้อมูลในส่วนอื่นๆ บ้าง

สินค้าในตระกูลของ Titanium นั้นก็มีหลายตัวด้วยกันครับ ตามนี้

http://www.appcelerator.com/products/

ซึ่งถ้าสนใจจะจ่ายตังค์ก็เข้าไปดู แล้วตัดสินใจเลือกกันได้ตามด้านล่างนี้

http://www.appcelerator.com/products/plans-pricing/

แต่สำหรับผมใช้ Free ไปมันก็ใช้ได้เยอะแล้วน้าาา ไว้วันหลังอาจจะอุดหนุน แต่ไม่ใช้ตอนนี้ 555

ส่วนตัวที่ผมลองเล่นมีแค่

Titanium Desktop กับ Titanium Mobile

โดยที่ 2 ตัวนี้มีความแตกต่างกันในส่วนของ ปลายทางที่จะ Port ไปลงก็ชื่อมันก็บอกอยู่แล้วนะ โดยไอ้ตัวแรกมุ่งไปทาง Desktop อาทิเช่น Windows, Mac, Linux จริงๆ ไม่อาทิเช่นก็ได้ มันมีแค่นั้นแหละ 555

ส่วนอีกตัวมุ่งไปทาง Mobile คือ iOS กับ Android ส่วน RIM กับตัวอื่นๆ กำลังพัฒนา อยู่ครับ

ต่อไปนี้ผมจะพูดถึง Titanium Mobile เท่านั้นนะครับ เพราะ Desktop ผมยังไม่ได้ลองเล่นอะไรมาก ถึงขนาดเอามาบอกเล่าได้

โดยขั้นตอนติดตั้งจะมีคู่มือ ทั้งในส่วนของ Mac และ PC (Windows 7)

Download Link:
http://www.appcelerator.com/products/download

Installation Guide:

- Windows 7 (Android)

- Mac OS

ส่วนของ MAC นั้นผมลองเขียน เป็น iOS วิธีลงง่ายมาก ให้ลง Xcode 4 ก่อน จากนั้นให้ลง Titanium Studio ตาม ก็เป็นอันเสร็จ

(PS. ในส่วนต่อไปผมขอพูดถึงวิธีการเขียนหรือ ข้อมูลด้านอื่นๆ เป็น iOS นะครับ เพราะว่าผมยังไม่ได้ลองลง ตัว Android SDK เลยด้วยซ้ำ)

หลังจากที่เราลง Titanium Studio เรียบร้อยแล้ว เราก็จะได้ IDE ไว้ใช้งานพร้อมที่จะสร้าง Project แล้วครับ โดย IDE ที่ได้มาจากของ Free จะเป็น Aptana ที่มี Titanium SDK ฝังอยู่ในตัวให้เรียบร้อย (หน้าตาค่อนข้างมืดมน หน่อย แต่ตอนนี้ผมชินแล้ว)

หลังจากที่เราลงเสร็จ สิ่งแรกที่เราควรจะทำเลยคือ Download ตัวอย่าง Kitchen Sink มา แล้วค่อยๆ ไล่ดูทีละอัน

Get Start With Kitchen Sink

ซึ่งตัวอย่างที่เค้าให้มาดูง่ายมากๆ เลยครับ ที่นี้เราลองมาดูพร้อมๆกัน ว่าเราจะทำงานกับ Kitchen Sink ยังไง ?

1. ให้เรา New Mobile Project มาก่อนโดยที่ ทำการคลิกขวา ตรงพื้นที่ฝั่ง Document แล้ว เลือก

New -> Titanium Mobile Project

2. ให้ Download Kitchen Sink มา แล้วจับ โยกเข้าไปใน  Project เรา หรือว่าจะ Import เข้าไป ผลที่ได้ก็เหมือนกันครับ โดยจะได้ Tree ตามรูปด้านล่าง

3. จากนั้นให้เราลอง Run iPhone Simulator ขึ้นมาดู โดยกดไปที่ ตัวที่เป็น สามเหลี่ยม ปุ่ม Play นั่นล่ะ

4. สุดท้ายก็ได้ตัวอย่างมาลองแล้ว โดยจะประกอบไปด้วย Tab Group 4 Tabs คือ

4.1 Base UI

4.2 Controls

4.3 Phone

4.4 Platform

4.5 Mashups

5. โดยเราจะสามารถ รู้ได้ว่า ตัวอย่างนี้รันอยู่ที่ไฟล์ไหน ได้โดยดูที่ Console Log ประกอบครับ แล้วก็เข้าไปดูซิว่า เค้าเขียนแบบไหน มันถึงออกมาได้แบบนั้น

6. โดยการเขียนทุกครั้งเราจะต้องเริ่มจากไฟล์ app.js เป็นไฟล์แรก ซึ่งตามตัวอย่างนี้ ใช้ TabGroup เป็นตัวเริ่มต้นของ Application

เอาล่ะครับ เท่านี้ก็เป็นอันจบสำหรับการเริ่มต้นกับ Kitchen Sink ซึ่งเรื่องเทคนิคลึกๆ ยังต้องพูดกันอีกยาวครับ สำหรับตัวนี้ซึ่งการเขียน ยังไงวันนี้ผมก็ขอลาไปนอนก่อนล่ะครับ ฝันดี

Appendix

1. Titanium Mobile Document Guide

2. Titanium Mobile Q&A

3. Titanium Mobile API Docs

4. Titanium Mobile Programming Guides

5. Seven days with Titanium

6. Titanium Mobile on Mobiletuts+

7. Titanium Mobile on Stackoverflow

8. Building iPhone Apps with JavaScript using Titanium

9. Titanium Mobile Scripts on CodeCanyon (Paid)

10. Titanium Mobile on Vimeo (Media)

11. Titanium Mobile on YouTube (Media)

ทีนี้ผมจะขออธิบาย ตามความเข้าใจแบบ งูๆ ปลา ของผมก่อน แล้วกัน ถูก ไม่ถูกยังไง ก็ขอให้เข้าใจไว้ว่า ผมมัน "มือใหม่"

1. Native App

App ประเภทนี้ก็คือ App ที่เขียนตาม Rules ของ Apple ล้วนๆ คือใช้ Xcode พัฒนาโปรแกรมด้วย Objective C แบบตรงๆ ซึ่งผลที่ได้ก็คือ Performance ดีเยี่ยม ความเสี่ยงที่จะไม่ได้รับการ Support เป็น 0 อภิสิทธิ์ เหนือชั้น

แต่ข้อเสียมันก็คือ ต้องไปเสียเวลาพอสมควรในการ Learning แล้วพอ เรียนจนฉลาดแล้ว แม่งก็ทำอะไรได้ไม่กี่อย่าง เพราะภาษามันเฉพาะเหลือเกิน

แต่ทว่าก็ไม่อยากให้ทิ้ง อยากให้เป็นตัวที่เราพยายามเรียนรู้ไป ในขณะที่กำลังเขียนในรูปแบบอื่นๆ

2. Web View

อันนี้เป็นตัวเลือกในกรณีที่เราต้องการ App แบบเร่งด่วน แล้วก็ไม่ต้องการลูกเล่นอะไรมากมายนัก ไม่จำเป็นต้องติดต่อกับ Feature ภายในตัวเครื่อง ภาษาที่เขียนก็ Web Skill ล้วนๆ ครับ เขียนเสร็จก็เอา Native เรียก URL ตรงๆ มาเลยก็เสร็จแล้ว ไม่จำเป็นต้อง Learning อะไรใหม่เลย ถ้าคุณเป็น Web Dev อยู่แล้ว

โดยที่คุณอาจจะมีตัวช่วยหน่อยก็คือพวก Mobile Web Framwork อย่าง jQ Touch, jQuery Mobile, Sencha Touch เพื่อให้มันดูโปรขึ้นมาอีกนิด

ข้อเสียก็คือ App มันดู ป๋องๆ แป๋ง ใช่มั้ยล่ะ ? แล้วก็ติดต่อกับ Feature เช่นพวก  กล้อง, Location Base, Network อะไรพวกนี้ไม่ได้เลย !!!!

แล้วก็ความเร็วของ App มันจะไปผูกกับ Web Server แทบจะ 100% เลยทีเดียว แต่มันก็สะดวกและเร็วมากๆ คุณอาจจะเอามาเป็นตัวเลือกแรก ในการหัดทำแรกๆ ก็ไม่เสียหายหรอก

3. Hybrid App

App ประเภทนี้ชื่อมันก็บอกอยู่แล้วว่าเป็นลูกผสม โดยที่คุณ สามารถจะใช้ Web Skill โดยที่ยังติด่อกับ Feature ในตัว iOS Device ได้อีด้วย

โดยหลักการของมันก็คือ คุณจะเขียนอยู่ใน Framwork หรือ SDK อีกทีนึง ด้วยเทคนิคนี้ Web Skill ของคุณจะโดยหั่นเหลือแค่ ทักษะในการใช้ HTML5 + Javascript ถ้าจะเขียนพวก Server Side Script คุณจะต้องทำออกมาเป็น Web Service เอง

หลักการของมันก็คือ ไฟล์ HTML + JS ทั้งหมดของคุณจะถูกฝังลงไปเป็นตัว App ด้วย แล้วก็โดนเรียกจากภายในตัวเองเท่านั้น ถ้าต้องการส่ง  หรือ รับ Data จากภายนอก จะส่งกันผ่าน XHR (จริงๆ คุณจะเรียก URL ออกมาก็ได้ แต่ถ้าทำแบบนั้น AppStore จะไม่มีทางรับคุณเข้าไปอาศัยด้วย 555)

ส่วนการติดต่อกับ Feature ภายในจะใช้ SDK ที่ใช้งานร่วม ที่มี API เป็น Javascript Syntax  ให้ใช้งาน

Framework ประเภทนี้ก็จะมีพวก PhoneGap, Titanium Mobile, NimbleKit, etc.

ข้อดีก็คือ ใช้เวลาศึกษาไม่นานเลย เพราะว่า Web Dev ส่วนมากจะมี Skill ทาง Javascript อยู่บ้างแล้ว ไม่มากก็น้อย ไม่น้อยก็ควรจมีบ้าง 5555

ส่วนมาก Framework พวกนี้จะเขียนที่แล้วออกมาได้หลาย Device เลยเช่น iOS, Android, RIM, Window Phone 7*, Symbiam*

* ส่วนมากมักจะไม่สมบูรณ์

แล้วก็สามารถทำงานได้เร็วกว่า Web View เพราะว่าเรียกไฟล์ภายในตัวเอง ที่สำคัญสามารถเรียกข้อมูล ออกมาภายนอก โดยไม่กังวลเรื่อง Cross Domain (ก็ App มันไม่มี Domain นี่หว่า) แล้วก็ API พวกนี้ส่วนมากจะมีชุดของ Local Storage มาให้ใช้เป็น Basic อยู่แล้ว 5MB ทำให้ง่ายในการจัดเก็บข้อมูล

แล้วข้อเสียล่ะ ?

มันก็ไม่เร็วเหมือน Native App Performance ก็ต่ำกว่า แล้วก้มี เปอร์เซ็นต์บ้างที่เวลา OS มันอัพเดท เราอาจจะต้องมารอ ชุด Framework ครอบพวกนี้ อัพเดท เพื่อที่จะได้ใช้ Feature ใหม่ๆ

เอาล่ะ นี่คือคร่าวๆ ......

แต่ทีนี้ในจำนวนรูปแบบการเขียน Hybrid มันก็มีบางแบบที่น่าสนใจมาก ก็คือ แทนที่มันจะเป็น Hybrid แบบปกติ แต่ยังเสือกใช้ Native UI ได้อีก เลยทำให้ App เนียนมากขึ้นไปใหญ่อาทิเช่น Titanium Mobile, NimbleKit*

* NimbleKit  ผมไม่ได้ลองเล่น เลยไม่รู้ว่ามันจะจริงมั้ย ??

ถ้าอยากดูว่ามันเนียนแค่ไหน ลองโหลด Wunderlist จาก AppStore มาดู ตัวนั้นและ App ที่มีชื่อเสียง แล้วก็ทำจาก Titanium Mobile

เกริ่นกันไว้แค่นี้ก่อน ระหว่างนี้ใครสนใจก็ไปลองศึกษาเพิ่มเติมนะครับ ครั้งหน้าผมจะเข้าสู่เรื่องของ Titanium Mobile, Tiranium Studio กันเลย

เริ่มต้นแบบนี้ก่อนเลย เพราะหายไปนานมากๆ จนจำไม่ได้แล้ว อัพเดทครั้งสุดท้ายเมื่อไหร่ 555

พอดีตอนนี้อยู่ในช่วงการเก็บตัวฝึกซ้อม เพื่อเปลี่ยนสายอาชีพ อิอิ 

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

สำหรับที่เล็งไว้ในตอนนี้ก็คงจะเป็นในส่วน ของ Mobile นั่นเอง เพราะกำลังอิน สุดๆ แล้วๆ ใครที่กำลังจะหา อะไรใหม่ๆ ทำในงานสายนี้ผมขอแนะนำเลย โมบายนี่ล่ะ อิน !

สำหรับผมเองนั้น จับงานสายเว็บมาตลอด ถ้านับเป็นปีนี่มันจะบอกอายุเกินไป ข้ามไปเลยๆ 555

ตอนนี้พอจะหันมาทำเรื่องมือถือบ้าง ต้องเปลี่ยนภาษาที่เขียน ไปลอง หยิบๆ จับๆ หัดๆ Objective C มาอยู่พักใหญ่ๆ (4 วัน) ก็เห็นว่าไม่เข้าท่าแน่ มันช้าเกิน หัวไม่ค่อยรับอะไรเลย 555

ก็เลยลองหาวิธี อื่นที่มันสามารถจะเขียน iOS ได้ อาทิเช่น HTML 5 เป็นต้น แต่ก็อยากติดต่อกับอุปกรณ์มันได้ด้วยนี่นา แค่ให้ทำ WebView แบบปกติๆ เหรอ มันกระจอกชะมัด T__T 

หลังจากนั่งๆ นอนๆ เที่ยวเล่นอยู่พัก ก็ไปลองพยายามหาใหม่ ทีนี้ไปเจอ Flex Builder for PHP เออ แม่งเข้าท่าเขียน PHP Build ออกมาเป็น Native App เจ๋งๆ สุดยอด พระเจ้า !!!!!

แต่ก้ต้องผิดหวัง เดินคอตกออกมา เพราะมันเหมือนหลอกลวง ยังไงชอบกล ใครเคยลองแล้วจะรู้ 5555

หรือกรูจะต้องเขียน Objective C จริงๆ บอกตามตรง "ขี้เกียจจะเลิร์น" แต่ทว่า ชีวิตต้องไม่สิ้นหวังสิวะ 

Google... !!! Google ! Google ! 

หาอยู่พักใหญ่ๆ ไปเจอ วิธีเขียนอีกแบบ เค้าเรียกว่า Hybrid โดยหลักการคร่าวๆ มันเป็นดังนี้ 

เขียน Template ด้วย HTML 5 แต่ว่า โคด HTML ทั้งหมดต้องฝัง ลงไปในเนื้อเดียวกับ App แล้วจะมีพวก ตัวช่วย อาทิเช่น PhoneGap เป็นตัวติดต่อ กับ มือถือ เช่น กล้องถ่ายรูป, contact, network เป็นต้น โดยที่จะมี API ฝังในตัว เขียนเป็น js ที่ดูแล้วง่ายมากๆ 

เอาล่ะ ที่นี้เราได้ตัวติดต่อแล้ว ต่อไปหน้าตาล่ะ อยากให้มันเนียนๆ หน่อยเอาไงดี เลยไปค้นๆ เจอไอ้นี่อีก Sencha ชื่อเหมือนชาเขียวเลย  555

ต่อจากนั้นก็ลองเล่นตาม Step เทพเค้าเลยครับ

A Sencha Touch MVC application with PhoneGap

ทีนี้ใช้เวลาศึกษาอยู่ 1 อาทิตย์เต็มๆ จนพอจะเขียนได้คล่องบ้าง อยากบอกว่าตอนศึกษาแม่งโครตจะลำบาก กว่าจะ Render กว่าจะทำนู่นทำนี่ได้ อ่านจนจะเป็นไข้เลย 

สุดท้ายก็เขียนออกมาแล้วเอาไปเทสต์กับมือถือดู "WTF" ทำไม มันแปร่งๆ ไม่เนียนเลย Rotate  กลับไปกลับมา แม่งมี Space โผล่มาอีกละ -*-

ตอนนี้ในหัวมีแต่คำถาม 

หรือกูจะต้องเขียน Objective C

เอาวะ ตอนหาข้อมูลเรื่อง Sencha มี Keyword อีก 2-3 ตัวแถมมาด้วย ก็ลองนึกๆ ดูมันคืออะไรบ้าง หนึ่งในนั้นคือ 

NimbleKit

ก็ไปลองๆ ทีนี้สั้นหน่อย ลองได้แค่ 30 นาที รู้สึกไม่ถูกชะตาเท่าไหร่ ไปลอง KW ตัวต่อไปดีกว่า นั่นก็คือ พระเอกขี่ม้าขาว (ในช่วงนี้)

Appcelerator Titanium Mobile

ลองไปได้ 1 ชั่วโมงเต็มๆ เพระว่าตอนนั้นมันก็ดึกมากแล้ว ง่วงนอนเต็มที่ แต่ในขณะที่ลองนั้น บอกได้คำเดียวว่า ค่อนข้างพอใจ เนื่องจาก 

ใช้ Syntax  เป็น JS ล้วนๆ แต่ผลลัพธ์ เป็น Native App ทั้ง UI ทั้ง Animate เนียนมากๆ เพราะเนื่องจากมันเป็น Native ก็เลยไปนอน (เอ้ยไม่เกี่ยว แต่ตอนนั้นทำแบบนี้จริงๆ 555)

วันรุ่งขึ้นมาหาข้อมูลต่อ ทั้งเรื่อง การ Approve จาก AppStore ว่ามีปัญหามั้ย ทั้งเรื่อง Performance ทั้งช่วง Gap ของ การอัพเดท iOS ว่าต้องรอ API มันอัพเดทตาม นานแค่ไหน พอได้ข้อมูลมาประกอบการตัดสินใจก็เลย 

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

ก้คิดไว้ว่าตัวนี้น่าจะมาเป็น "อัศวินม้าขาว" ได้พอถ่วงเวลา ให้ศึกษา Objective C ไปพลางๆ ได้บ้าง ยังไงก็ รอดูบทความถึงวิธีการเขียน รวมไปถึง การประยุกต์ ใช้งานกับ Web Service ได้ในตอนต่อๆ ไปนะครับ กับ jQuery Mini Series: Mobile ที่ไม่ใช่  jQuery Mobile 555

สำหรับวันนี้ ตัวใครตัวมันนะครับ 

สวัสดีครับ ช่วงนี้ห่างหายจากการอัพเดทไปเลย พอดีติดเกมส์ 555++

จริงๆ แล้ววันนี้มีหลายเรื่องที่อยากจะมาเล่าสู่กันฟัง อาทิเช่น

NodeJS
Facebook Offline Message API
CI 2.0.1
วิธีการทำ Caching ของ Facebook
Cross Domain Cookie
วิธีการใช้ domain, subdomain map เข้ากับ user ของเราผ่าน CI, etc....

แต่ก็สรุปมาเลือก MongoDB ที่เป็น NoSQL โดยไม่มีเหตุผลอะไรรองรับ นอกจากว่า "มันเขียนอธิบายง่ายสุด" ส่วนเรื่องอื่นๆ ใครสนใจเรื่องไหน ก็บอกกันได้นะครับ จะได้มาไว้เขียนในคราวหน้า

เอาล่ะๆ มาเริ่มกันเลยดีกว่า

NoSQL จริงๆ แล้วก็ต้องถือเป็น ฐานข้อมูลชนิดนึง ซึ่งจะแตกต่างจาก Database พวกภาษา SQL ทั้งหลาย คือตัวมันจะเป็น ฐานข้อมูลที่ไม่มีความสัมพันธ์กัน เพราะฉะนั้น ลืมเรื่อง relation ไปก่อน สักพัก

แล้วก็สามารถรองรับกับจำนวนข้อมูลที่มากมายได้ โดยยังทำงานได้เร็ว เพราะไม่ต้องมีความสัมพันธ์ใดๆ ฉะนั้น ไม่ต้องกังวลว่า Index จะทำงานมั้ย มันยังไงก็ทำงาน

แล้วก็ข้อดี (รึเปล่า) คือมันไม่มี structure คลุม ไม่ต้องมาสร้าง fields เตรียมไว้ก่อน อยากเก็บยังไๆงก็เก็บ แต่ก็ควรคิดให้ดีๆ ซะก่อน

สามารถขยาย scale ออกได้ง่ายๆ เพราะเป็นการต่อตรง เวลาข้อมูลเยอะเข้าๆ ก็เพิ่มเครื่องๆๆๆๆๆ เข้าไปเรื่อยๆ อันนี้ดีสุดๆ

เว็บไซต์ระดับโลกที่มีข้อมูล มหาศาลยังไงก็ต้องออกแบบใน ลักษณะนี้ทั้งนั้น อาทิ Facebook, Twitter เพราะจำนวนข้อมูล ไหลเข้า ไหลออก มีมากมายมหาศาล

NoSQL ก็มีมากมายหลายตัวอีก แต่ที่วันนี้จะมาพูดกันนะ คือ MongoDB เอาเป็นเชิงปฎิบัติ หรือการใช้งานกันเลยดีกว่า เรื่อง ทฤษฎี ไม่ค่อยจะถูกกับผมนัก ไอ้ที่เขียนไปข้างบน ถูกบ้าง ผิดบ้างก็ขออภัยด้วยนะ อย่าว่ากันเลย

การใช้งานนั้น ถ้าเขียนผ่าน PHP Framework ก็เอา Google หาได้เลย มีคนเขียน client มาเยอะแยะอยู่แล้ว

แต่ทีนี้ผมจะมาพูด เอาเป็นใช้งานผ่าน PHP โดยตรงเลย

สิ่งที่เราต้องมีในวันนี้ก็คือ

1. MongoDB
http://www.mongodb.org/downloads

2. PHP Mongo Extension
http://php.net/manual/en/mongo.installation.php

เท่านี้แหละครับ ที่เราต้องมีพิเศษกว่าครั้งอื่น ส่วนวิธีการลง มันมีบอกไว้อยู่แล้วตามลิ้งค์เลย

พอเราได้มาครบติดตั้งเสร็จเรียบร้อย ก็มาเริ่ม start mongo กันก่อน โดยเปิด cmd ขึ้นมา (ผมเขียนผ่าน Windows)

d:PHPCodedevelopmentmongomongodbbinmongod.exe --dbpath d:PHPCodedevelopmentmongoStorage

แนะนำให้เขียนเป็น .bat ไว้เลย เวลา start จะได้ไม่เสียเวลา

โดยตัวแรกจะเป็นที่อยู่ .exe ของ mongodb ที่เราโหลดมา

ตัวที่สองจะเป็น ที่อยู่ที่จะเป็น root ของการจัดเก็บข้อมูล

ตัวอย่างการ connect

// connect mongo on localhost
$m = new Mongo;

// select database
$db = $m->people;

// select collection
$collection = $db->person;

ให้มองเหมือน db ก็ได้คือต้อง conenct -> select db -> select table

อันนี้ผม conenct ผ่าน localhost เลยไม่จำเป็นต้องระบุ IP:PORT ลงไป

ตัวอย่างการ Insert

$insert = array(
	'name' => $_POST['name'],
	'lastname' => $_POST['lastname'],
	'age' => $_POST['age'],
	'comments' => array()
);
$collection->insert($insert, true);

$m->close();

โดยค่า last insert id เราสามารถ get ออกมาด้วยคำสั่งนี้

$insert['_id']

ตัวอย่างการดึงข้อมูลทั้งหมด พร้อม where case, pagination limit

$docs_per_page = 5;

$page = isset($_GET['page']) ? $_GET['page'] : 1;
$q = isset($_GET['q']) ? $_GET['q'] : "";


$m = new Mongo;
$db = $m->project;
$collection = $db->users;

$criteria = array();
if (isset($q{0})) {
	$criteria['first_name'] = new MongoRegex('/' .$q . '/i');
	//$criteria['last_name']['$or'] = new MongoRegex('/' .$q . '/i');
}
$fields = array('email', 'first_name', 'created_at');

$skip = (int) ($docs_per_page * ($page - 1));
$limit = (int) $docs_per_page;

$cursor = $collection->find($criteria, $fields);
$cursor->sort(array('created_at' => -1))->skip($skip)->limit($limit);

$total_result = $cursor->count();
$total_page = (int) (ceil($total_result/$docs_per_page));

$m->close();

ตัวอย่างการดึงข้อมูลแบบ Record เดียว

$m = new Mongo;
$db = $m->people;
$collection = $db->person;
$criteria = array(
	'_id' => new MongoId($id)
);
$doc = $collection->findOne($criteria);

ตัวอย่างการ Update

// connect mongo on localhost
$m = new Mongo;

// select database
$db = $m->people;

// select collection
$collection = $db->person;

$criteria = array(
	'_id' => new MongoId($id)
);

$doc = array(
	'name' => $_POST['name'],
	'lastname' => $_POST['lastname'],
	'age' => $_POST['age'],
	'comments' => array()
);
$collection->update($criteria, $doc);

$m->close();

เท่านี้แหละครับ Syntax ไม่มีอะไรซับซ้อนเลยสักนิด สังเกตุ ดีๆ มันทำงานคล้ายๆ กับ database ปกติ แหละ จริงๆ แล้ว ผมมีตัวอย่างเว็บ ที่อยากให้ไปลองอ่านกัน ซึ่งเข้าเขียน เทียบกับ SQL ให้เราเห็นเลยว่า Flow มันไม่หนีกันเลย แถมยังไม่ต้องมาคิดเรื่อง Relation ให้ปวดหัวอีกด้วย

http://www.dealtaker.com/blog/2010/05/12/php-mongodb-sitting-in-a-tree-part-1/

http://www.shift8creative.com/blog/mongodb-queries-with-lithium-part-two

ไอ้ 2 ลิ้งค์ข้างบนอ่านแล้วจะทำความเข้าใจได้ดีมากๆ แนะนำเลย

ส่วนตรงนี้ถือเป็นข้อมูลที่มีประโยชน์เพิ่มเติมนะครับ

http://www.slideshare.net/kbanker/mongodb-schema-design

อันนี้เป็น Client ที่ใช้กับ CI ครับ (โดยส่วนตัวไม่คิดว่าจะมีประโยชน์นัก เพราะว่า มันแค่ตัวครอบ ที่เหมือนยังเขียนไม่เสร็จซะมากกว่า)

https://bitbucket.org/alexbilbie/codeigniter-mongo-library/wiki/Home

ยังไง ถ้าใครลองเล่นแล้วมี Idea อะไรดีๆ ก็ลงมือ ศึกษาแล้วทำเลยนะครับ ถึงจะไม่สำเร็จอย่างน้อยเราก็มีความรู้เพิ่มขึ้นมาอีกระดับครับ ^^

สำหรับบทความวันนี้เราจะพูดกันถึง Tool สำหรับนักพัฒนาที่สุดแสนสะดวกในยามขี้เกียจตัวนึง นั่นก็คือ

YQL (Yahoo! Query Language)

ซึ่งถ้าเราให้คำจัดกัดความของมัน มันก็คือ "API สำหรับ APIs" นั่นเอง เพราะตัวมันทำหน้าที่ต่อในการเรียกใช้ APIs ตัวอื่นๆ ด้วยภาษที่คล้ายๆกับ SQL ทำให้เราไม่ต้องทำความเข้าใจกับขั้นตอนซับซ้อนอะไร ของ API ปลายทางมากนัก

และที่สำคัญ Yahoo! จะเป็นคนจัดการเรื่อง Performance ต่างๆ ให้เราเองอีกด้วย ซึ่งตัว Yahoo! บอกไว้ว่าไอ้ Service นี้ของเค้าน่ะ มันมี Uptime ถึง 99.5% เชียวนะ แต่มันก้มีข้อจำกัดเรื่อง Rate Limit ว่า Query ได้ไม่เกิน 100,000 ต่อวัน และไม่เกิน 1000IP/ชั่วโมง แต่ก็ช่างแม่งเหอะ -*-

โดยที่ตาราง Table (ให้มองภาพเหมือน SQL) มี 2 แบบก็คือ

Native = Service ของ Yahoo! เอง (รวมไปถึง Flickr ด้วยล่ะอย่าลืม)

Community = ส่วนที่ Developer Submitted เข้ามา

ซึ่งไอ้แบบที่สองนี่แหละที่เราจะมาลองทำกันวันนี้ !!

เราจะมาลองเรียก Service ของ Twitter กัน เพราะว่ามันไม่ค่อยมีอะไรซับซ้อน อิอิ

ก่อนอื่นเราเข้ามาดูก่อนว่าตอนนี้ส่วนของ Community มันมีอะไรเข้ามาแล้วบ้าง

Community Tables

จะสังเกตุเห้นว่า Syntax การแสดงตารางเหมือนภาษา SQL เป๊ะๆ ต่อจากนั้นมาลองใช้กันผ่าน Console ที่ทาง Yahoo! เตรียมมาให้ พิมพ์เข้าไปแบบนี้

select * from twitter.search where q='earthquake'

แล้วก็กด Test Console เท่านี้ Data ก็ออกมา โดย Yahoo! ให้เราเลือกได้ ทั้ง แบบ XML และ JSON

โครตง่ายเลยเห็นมั้ย 555+

ส่วนวิธีการเอาไปใช้งาน กับโปรแกรม Yahoo! ก็จะมี Link เป็น REST ให้เรา Copy ไปใช้ได้เลย เท่านี้ก็เป็นอันจบ ลองเอาไปเล่นดูนะครับ ไว้สำหรับตอนขี้เกียจต่อ API เอง 55+

วันนี้พอแค่นี้ล่ะครับ บทความสั้นๆ ^^

ที่จะเขียนต่อไปนี้ คือฟฤติกรรมที่บ่อนทำลาย อาชีพ Dev ของตัวเอง อย่างเห็นได้ชัด (จริงๆ มันก็ไม่ขนาดนั้นหลอก แต่ฝรั่งมันเว่อร์ 555)

ทีนี้มาดูกันถึง 10 ตัวอย่างของ โปรแกรมเมอร์ยอดแย่ ที่ควรจะแก้ไขโดยด่วน

1. ชอบเขียนแบบสั้นๆ เอาสะดวก

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

อาทิเช่นการออก output

Bad

<?=$wording?>

Good

<?php echo $wording; ?>

2. ไม่มีการวางแผนเพืิ่อทำการเขียนโคดล่วงหน้า

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

ควรจะมีการ วางแผนอย่างเป็นระบบ อาจจะทำการเขียน comment ไว้ในแต่ละส่วน ที่จะทำงาน อาทิเช่น

<?php

// Include necessary data

// Initialize the database connection

// Include the common header markup

// Determine the page variables from the POST data

// Load the proper database info using the page vairiables

// Loop through the loaded rows

    // Format the images for display

    // Create a permalink

    // Format the entry for display

    // Add the formatted entry to the entry array

// Collapse the entry array into page-ready markup

// Output the entries

// Include the common footer markup

เพื่อที่จะได้เป็นการบอกตัวเองด้วยว่าเราจะทำอะไรต่อไป

3. ไม่มีการ comment อะไรเลยในโคด

อันนี้จำเป็นมากๆเลย ในการเขียนโคด ควรจะเขียน comment ไว้ในจุดที่สำคัญๆต่างๆ โดยเฉพาะพวก function, class ต่างๆ แล้วก็ logic ที่มีความสำคัญกับ Software ลองไปดูโคดฝรั่งแต่ละตัวสิครับ comment มันเยอะกว่าโคดอีก ทั้งนี้เพื่อให้สะดวกในการค้นหา แล้วก็ยัง ทำให้คนอื่นเข้าใจได้ง่ายด้วยว่าจะไปไล่โคด ได้ยังไง ตัวอย่างการเขียน comment ก็ควรมีด้วย อาทิเช่น

/**
 * print_array()
 *
 * Formatting array
 * This function use for debugging
 *
 * @access    public
 * @param    array
 * @return    string
 */
if ( ! function_exists('print_array'))
{
    function print_array($array, $break=false)
    {
        echo "<pre>" . print_r($array, true) . "</pre>n";
        if ($break == true) exit(0);
    }
}

// Get the extension off the image filename
$pieces = explode('.', $image_name);
$extension = array_pop($pieces);

แบบนี้ คนอื่นมาอ่านปุ๊บ ก็เข้าใจเลยว่ามันใช้ทำอะไร

4. โคดไม่มีความชัดเจน

อันนี้ไม่ใช่เรื่องใหญ่นัก แต่ว่ามันก็ทำให้โคดเราอ่านยากแล้วก็ ไล่โคดลำบากมาก อาทิเช่น

<?php

$foo = 8;

if( $foo<10 )
    if( $foo>5 )
        echo "Greater than 5!";
    else
        echo "Less than 5!";
else
    echo "Greater than 10!";
    echo "<br />Another note.";

5. ไม่เขียนตามมารตฐาน

อันนี้มันก็คือการเขียนที่ไม่มี มารฐาน เอะอะๆ ก็ทำตามใจกูลูกเดียว จริงๆแล้ว PHP มันมีมารฐานการเขียนที่เป็น Standard อยู่นะครับ ลองคิดดุึว่าทั้งทีมคุณ เขียนแบบสไตล์ใคร สไตล์มัน มันจะปวดหัวแค่ไหน

ลองดู Standard ที่เป็นที่นิยมกันดูนะครับ

http://codeigniter.com/user_guide/general/styleguide.html

http://pear.php.net/manual/en/standards.php

6. เขียนโคดซ้ำไปซ้ำมา ไม่มีการนำกลับมาใช้ใหม่

อันนี้มันไม่ใช่ความผิดหรอกครับ มันอยู่ที่ทักษะแล้วก็ ประสบการณ์ การเขียนโคดที่ดีจะต้องถูกออกแบบให้ Re use ได้เกือบทั้งหมด การเขียนในรูปแบบนี้ก็คือ การใช้ function, class เข้าทำงานในส่วนที่ซ้ำได้เป็นอย่างดี

แต่กว่าจะทำได้ดีก็ต้องอาศัยประสบการณ์ครับ ไม่ใช่ว่าเขียนแบบ OOP ได้แล้วก็จบ การออกแบบ Class มันต้องออกแบบได้อย่างดีอีกด้วย

อาทิเช่น class ที่เกี่ยวกับเรื่อง database ของ blog มันควรที่จะต้องเขียนออกมาให้เป็นกลางที่สุด เช่น

- ต้องใช้งานได้ในส่วน Portal

- ต้องใช้งานได้ในส่วน User Site

- ต้องใช้งานได้ใน API

- ต้องใช้งานได้ใน Super Backend

เพราะฉะนั้น ต้องอาศัยประสบการณ์ลองผิดลองถูกกันไปครับ ผมเคยออกแบบพลาดครั้งนึง เสียเวลาไปหลายเดือนเลย T__T

(ยอมทำใหม่ดีกว่าเขียนต่อโคดที่ไม่ชอบ)

7. ไม่เขียนตามรูปแบบที่โดนวางไว้

การเขียนโคดมันต้องเขียนตามรูปแบบที่เราวางไว้ครับ อาทิเช่นตัวผม ถนัดเขียนแบบ MVC ผมก็จะต้องเขียนแบบ MVC ตามรูปแบบ เป๊ะๆ ไม่มีส่วน/ไหนเลยที่เอา view ไปโผล่ใน Controller หรือไป Query ใน View อะไรประมาณนั้น มันจะทำให้เกิดปัญหาทั้งกับ เราเองแล้วก็ทีมงานครับ เวลาจะแก้อะไรทีนึง ทั้งๆ ที่ตามปกติแล้วเราจะรู้ได้ทันทีว่าต้องไปแก้ที่ไหน แต่พอเจอ Query ใน view เข้า เราก็ต้องไปตามไล่โคดกันหัวบานอีก

8. พยายามทำงานทุกอย่างทั้งหมดตั้งแต่ต้นด้วยตัวเอง

อันนี้ผมเคยเป็นนะ คือเข้าใจไปเองว่า ถ้าเราเริ่มเขียนโคดเองตั้งแต่ ตัวอักษรแรก มันจะทำให้เรามีความเข้าใจสูงขึ้น ซึ่งมันเป็นอะไรที่โง่มากๆ T__T

ในโลก Internet นั้นมันมีของดีที่เค้าพัฒนาเตรียมไว้ให้เราไปหยิบฉวยใช้งานอยู่เยอะแยะ ทั้งมีการ จูนนิ่ง อัพเดท แก้บั๊ก ให้เราอยู่ตลอดเวลา ทำไมเราจะไปเอามาใช้ไม่ได้ อาทิเช่น

Zend DB

ตัวนี้สุดยอดเลย มีการอัพเดทอยู่ตลอด มีรูปแบบให้ใช้งานแทบจะเรียกว่าครบครัน เนียกว่า ถ้ามาเขียน class แบบนี้เอง ชาตินี้กูก็ทำไม่เสร็จ แถมถ้าเสร็จออกมา แล้วก็มีบั๊ก ทำไมล่ะ เราจะไม่เอามาใช้

9. ไม่พยายามหาความรู้ใหม่ๆ หรือท้าทายตัวเองด้วย โจทย์ยากๆ

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

แต่ถ้าเป็นงานแบบที่คนอื่นเค้าทำได้ เราก็ควรจะทำได้ ถูกมั้ยครับ

10. ไม่เปิดใจให้กว้าง แชร์ในสิ่งที่ตัวเองรู้ให้กับคนอื่นบ้าง

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

แต่อันนี้ไม่ใช่แนวพวกที่ไปขอโคดเค้ามา Copy แล้วเค้าไม่ให้ แล้วมาทะลึ่งบอกว่าเค้าหวงนะ มันคนละกรณีกัน 555+

................

เอาล่ะครับ ก็จบกันง่ายๆ กับฟฤติกรรม ห่วยๆ 10 ข้อ ทีนี้ใครจะเห็นด้วย หรือไม่เห็นด้วย ก็แล้วแต่ ศรัทธานะครับ ผมก็ไม่ได้คิดเองหรอก ไปอ่านบทความคนอื่นเค้ามาแล้วมีแรง บันดาลใจ 555+

แล้วที่สำคัญ ผมเองก็ๆไม่ได้ ทำได้เป๊ะๆ อย่างที่เขียนด้วย มันก็ต้องมีบางอารมณ์ แบบว่าขี้เกียจ หรือมักง่ายกันบ้าง แต่โดยรวมแล้ว ผมก็ไม่ได้หลุดจากที่เขียนมามากนักหรอก แต่ถ้าใครทำได้หมด ผมก็ว่ามันดีต่อตัวเองทั้งนั้นะ ^^

อ้อแล้วก็อย่าลืมก่อนเขียนโคดทุกครั้ง เปิด Error เป็น E_ALL ไปเลยนะครับ

Go Fight for it!!!!

เริ่มต้นของเรื่องนี้ เกิดมาจากความต้องการที่ไม่สมหวังของผมเอง 555+

คืดผมอยากจะ Convert YouTube มาเป็น ไฟล์ MP3 ไว้ฟังเองเล่นๆ (มันผิดกฎหมายลิขสิทธิ์ แล้วก็ผิดกฎของ YouTube นะจ๊ะ) ก็เลยไป Google เพื่อหา เว็บที่จะ Convert ให้ แบบ Online แต่พอหาๆ ไปมันก็พอมีอยู่หรอก แต่ว่า
เพลงที่ผมจะเอามันดันมี เสียงอะไรเยอะแยะ ก่อนจะเริ่มเพลง ทีนี้ไอ้เว็บพวกนี้มันก้ไม่ยอมให้เลือกเวลา เริ่มต้น สิ้นสุด อะไรแบบนั้น ซึ่งแต่ก่อนผมใช้เว็บนึงมันมีให้ แต่พอดีมันเจ๊งไปแล้ว ไม่รู้โดนจับหรือยังไง 555+

ก็เลยเอาวะ เขียนเองแม่มเลย จะได้ใช้วันหลังด้วย !!!

แต่ก็เหมือนเดิม ด้วยความขี้เกียจ จะไปให้เขียนเองตั้งแต่ 0 มันก็เปลืองแรงไป ก็๋เลยค้นจาก Google ไปเจอ Class สั้นๆ มาตัวนึง (มันทำ HTML มาด้วยโครต ใจดีเลย)
http://www.codingforums.com/showthread.php?t=205066

พอได้โคดมา ก็เอามาแก้ๆ นิดหน่อย (นิดหน่อยจริงๆ แค่ 10 กว่าบรรทัด)

ก่อนอื่นสิ่งที่ต้องมีสำหรับบทความนี้ก็คือ
1. FFMPEG
2. CURL

สำหรับ FFMPEG for Windows ดาวน์โหลดได้ที่นี่
http://sergey89.ru/files/ffmpeg-php-win32-all.zip
* ผมใช้ใน PHP 5.2.5 ได้ แต่ 5.3.0 ไม่ Work!!!!

โดยส่วนที่แก้ไปก็มี

File HTML
1. เติม input ให้สามารถใส่ส่วนที่จะเริ่มตัดลงไปในส่วนของ HTML

<input type="text" name="ss" value="00:00:00" style="width:50px;" />

// ini_set('display_errors',0);  

$ss = $_POST['ss'];
echo ($converter->GenerateMP3($_POST['quality'], $ss)) ? '<p>Success!</p>' : '<p>Error generating MP3 file!</p>';

function __construct()
{
    $this->_TEMPVIDDIR = dirname(__FILE__) . "/videos/";
    $this->_SONGFILEDIR = dirname(__FILE__) . "/mp3/";
    $this->_FFMPEG = dirname(__FILE__) . "/tools/ffmpeg/bin/ffmpeg.exe";
}

function GenerateMP3($audioQuality, $ss='00:00:00')
{
    $qualities = $this->GetAudioQualities();
    $quality = (in_array($audioQuality, $qualities)) ? $audioQuality : $qualities[1];

    //ffmpeg -ss 00:01:00 -t 00:00:45 -map_meta_data new_track.mp3:original.mp3 -acodec copy -i original.mp3 new_track.mp3
    $map_meta_data = "-map_meta_data " . $this->GetSongFileName() . ":" . $this->GetTempVidFileName();
    $exec_string = $this->_FFMPEG.' ' .$map_meta_data. ' -i '.$this->GetTempVidFileName().' -y -acodec libmp3lame -ab '.$quality.'k -ss '.$ss.' '.$this->GetSongFileName();
    shell_exec($exec_string);

    // delete temp file
    $this->DeleteTempVid();

    return is_file($this->GetSongFileName());
}