Archive for the 'Web Development' Category

Codeigniter , jQuery , Ext-Js และ Adobe AIR

หัวข้อวันนี้ตั้งชื่อหัวข้อได้ไม่ตรงนักแต่ผมอยากจะมาพูดถึงเจ้า 4 ตัวนี้ให้ทุกท่านฟังสำหรับคนที่กำลังจะพัฒนา App ขนาดเล็กหรือกลาง แล้วทำไมเจ้า 4 ตัวนี้มันถึงดังมากๆโดยเฉพาะ jQuery ซึ่งตอนนี้เป็นที่กล่าวถึงของ Javascript Framework กันมากเลยทีเดียว ผมจะมาพูดถึงทีละตัวนะครับ พร้อมความสัมพันธุ์

  • Codeigniter จะว่าผมโม้ก็ไม่ว่านะครับ เป็นตัวที่ผมว่าอนาคตยังอีกไกล แล้วก็ไกลกว่า KohanaPHP อีกด้วยความที่เรียบง่าย Document อ่านง่าย ต่อเติมได้ง่ายทำให้เจ้า Codeigniter นี้สามารถแปลงไปได้ในทุกระบบ ถึงแม้จะมี Function งานไม่ครบเหมือนพวก Symphony หรือ KonahaPHP แต่เจ้าตัวนี้ก็มาทดแทนด้วยความเร็ว , เข้าใจง่าย และ ต่อเติมง่าย แทนโดยเจ้า Codeigniter มีการวางโครงสร้างมาจาก Ruby on Rails (แต่เขียนด้วย PHP ซึ่งมันสุดยอดมาก)
  • jQuery ตัวนี้ใครติดตามผมมานานจะรู้ว่าผมเชียร์ตัวนี้ แทบใจขาดดิ้นๆๆ เลยทีเดียวด้วยความสามารถที่จิ๋วแต่แจ๋ว จัดการ Data ได้อย่างยอดเยี่ยมแถมเปลี่ยนการ Coding ภาษา Javascript ให้ง่ายมากๆ แล้วตอนนี้มันดังจนไปเทียบเท่ากับพวก Prototype , Dojo , YUI ได้แล้ว แล้วมีทีท่าว่าจะดังต่อไป ด้วยหลักการเดิม เร็ว , เข้าใจง่าย และต่อเติมง่าย
  • Ext-Js เป็นน้องใหม่ไฟแรงแถมตอนนี้ได้เปลี่ยน License เป็น GPL หรือนำไปใช้ได้ฟรีแม้ว่าคุณจะนำไปใช้ในการค้าก็เถอะ กระแสเลยยิ่งแรงขึ้นไปอีก (ตอนแรกถ้านำไปใช้ในการค้าต้องซื้อ) โดยเจ้า Ext-JS วิธีการใช้จะคล้ายๆกับเป็น Component (แต่ก็ยังไม่สมบูรณ์) โดยเราสามารถได้ Component มาต่อเติม website ด้วยการ new Object เสร็จแล้วใส่ค่าอีกนิดหน่อยเราก็จะได้ Component ซึ่งมี User Interface ที่สวยงามพร้อมมาทันที แต่จนแล้วจนรอด มันก็เหมาะสำหรับคนที่ใช้ Javascript พื้นฐานมาคล่องพอตัวแล้วเหมือนกัน
  • Adobe AIR เมื่อเจ้า Runtime ตัวนี้ออกมาพร้อม SDK ทำให้การสร้าง Desktop App เปลี่ยนไปทันที คนทำแต่ Web App ตอนนี้จะมีโอกาสได้โชว์ฝีมือในการทำ Desktop App กันแล้วด้วยภาษา HTML , Javascript , CSS 3 ภาษานี้

แล้วมันเกี่ยวกันยังไงหรอ ? ตอนนี้ผมใช้เจ้า Codeigniter กับ jQuery อยู่ซึ่งขอบอกว่า Work มากในระดับของฟรี เสร็จแล้วมีโครงการที่จะศึกษาการทำงานของเจ้า Adobe AIR ด้วยเหมือนกัน เลยศึกษามาพอสมควรโดยมันสามารถถูกเขียนได้ด้วย 3 แบบคือ AJAX , Flash , Flex แต่ผมขอเลือกทาง AJAX แทนที่จะเป็น Flash หรือ Flex เพราะผมมีพื้นด้านนี้มาเยอะแล้ว ไม่อยากเริ่มต้นใหม่ (ถึงแม้จะลงเรียน Adobe Flash ไปแล้วก็ตาม) แล้วคราวนี้ไอ้เจ้า Ext-Js นี้และที่จะมาทำให้การพัฒนา ออกมาสวยงามและมีประสิทธิภาพ โดยเสียเวลาเขียน code น้อยลง ;) แต่แล้วไอ้เรื่องการจัดการ Data ด้วย Javascript ปกติรวมถึงการท่อง DOM มักก็เป็นปัญหาพอควร

ดังนั้นช่วงเวลานี้กระแส jQuery + ExtJs กำลังมาแรงในการทำ Adobe AIR แต่ยังไม่มี App ที่มาจากเจ้า 2 ตัวนี้ + กันแบบดีๆเลย (เพราะกระแสมันพึ่งเริ่ม) แล้วดูจาก Document รวมถึงผมได้ลองเขียนเจ้า Ext-Js แล้วมัน ไม่ได้เขียนเข้าใจยากมากเมื่อมารวมกับ jQuery โดยผมใช้ jQuery ในการจัดการ Data , AJAX , Event Handler , Effect และท่อง DOM ส่วนที่เหลือก็ใช้ Ext-JS ในการสร้าง Component สวยๆมาใช้แบบง่ายๆ จะเห็นว่า jQuery จะเป็นฐานในการจัดการข้อมูลพื้นฐานส่วน Ext-JS มาเสริมและสุดท้าย

Codeigniter เอะแล้วมาเกี่ยวอะไรกับการใช้ Adobe AIR ละ Web Service ไงครับเจ้า Codeigniter ไม่น่าเชื่อว่าจะทำ Web Service ได้ง่ายโคตรๆ (ขอไม่บอกรายละเอียดในตอนนี้) ด้วยการที่เราสามารถเข้าถึง Method ของ Controller ได้ผ่าน URL รวมกับ function พื้นๆของ PHP อย่าง Array แล้วก็ Json_encode ทำให้มันกลายเป็น Web Service แบบ RESTful โดยง่ายเลยทีเดียว แล้วเราก็ใช้ jQuery เรียก Web Service ของ Codeigniter แล้วรับมันมาแบบ JSON แล้วนำมาใช้ประโยชน์ต่อได้ !

ขอสรุปของการทำงานแบบง่ายๆในอีกมุมหนึ่งที่ผมมา Trend นี้มาแรงในกลุ่มรายย่อยแบบเราๆทำกัน

  • (X)HTML + CSS ทำงานในส่วนของโครงสร้าง User Interface
  • Javascript ทำงานในการดึง Data จาก Web Service และนำมาใส่ใน User Interface รวมถึงทำ Effect ต่างๆด้วย
  • PHP-OOP ใช้ในการนำ Data จาก Database มาประมวลผลต่างๆแล้วนำไปให้ Javascript เรียกใช้ Web Service
  • Database ใช้สำหรับการจัดเก็บ Data แบบง่ายๆเพื่อให้ PHP นำไปประมวลผลต่อ

จุดเด่นของการใช้ Driven แบบนี้

  • ปรับปรุง , บำรุงรักษาและจัดการง่าย เพราะมีการแยกส่วนอย่างชัดเจน
  • ไม่จำเป็นต้องรู้ภาษา SQL ให้ลึกซึ้งเราใช้ PHP-OOP ในการจัดการ Data แทน
  • มี Framework รองรับแล้วเป็น Open-Source ทุกอย่างทั้ง Codeigniter , jQuery , ExtJS รวมถึง Database ที่เป็น Open-Source อย่าง MySQL , PostgreSQL
  • ถอดเข้าถอดออกได้อย่างง่ายดาย
  • เขียน , ออกแบบ และเข้าใจได้ง่าย

จุดด้อยของการใช้ Driven แบบนี้

  • Performance ขึ้นอยู่กับเครื่องของ User มากกว่าของ Server ยกเว้นใช้ Jaxer Server (AJAX at Server)
  • ยังไม่เหมาะสำหรับงานระดับ Enterprise
  • ใช้หลายภาษาทำให้ Curve ในการเรียนรู้สูง (แล้ว J2EE ละ??)
  • ใช้การเชื่อมต่อจากหลายจุด ไม่เป็นหนึ่งเดียวอาจเกิดปัญหาเรื่องการเชื่อมต่อได้

วันนี้ผมก็ลาไปแค่นี้ก่อนละครับเขียนเหนื่อยเลยมีอะไรแนะนำ หรือมาเสนอความคิดเห็นก็ลง Comment กันไว้ได้เลยครับ ;)

Iterative Process กระบวนการพัฒนาแบบต่อเนื่อง

ถ้าจะพูดถึง Software Engineering การพูดถึง Process นี้ถือว่าเป็นหัวใจหลักของ SE เลยก็ว่าได้ เพราะเขาเน้นกระบวนการผลิต เพื่อให้ได้ Software ที่มีคุณภาพมากขึ้น การทำงานแบบ Iterative มีหลายแบบมาก แต่ที่ฮิตๆ แล้วจะมีแบบ Spiral Model

แล้วยังมีอีกหลาย Process ที่น่าสนใจนะครับ แต่ผมจะพูดถึง Spiral Model เป็นต้นแบบละกันครับ Spiral Model เนี้ยมีหลักง่ายๆคือเมื่อจบ 1 รอบของการทำงานจะได้ผลลงานที่มากขึ้น (ผมสรุปง่ายเกินเปล่า) อะแล้วมันต่างกับการทำงานอื่นๆอย่างไรละ ถ้าผมพูดถึง Waterfall Model เนี้ยหลายคนคงรู้จักและไม่รู้จัก ผมจะสรุปง่ายๆว่า ในสมัยก่อนปกติการทำงานของ Software จะต้องรู้สิ่งที่ต้องการให้หมด ก่อนแล้วค่อยเริ่มต้นวิเคราะห์ พัฒนา ทดลอง ส่งมอง ตามลำดับแต่ เมื่อยุคสมัยเปลี่ยนไป

การที่รอให้สิ่งที่ต้องการให้เรารู้หมดก่อน (Requirement) มันคงจะช้าไปดังนั้นเลยเกิด Spiral Model ขึ้นนั้นก็คือรู้แค่ไหน ทำแค่นั้นไปก่อน ก็ดู Make Sense มากขึ้น แต่จริงมันไม่ขนาดรู้แค่ไหนทำแค่นั้น ก็คือรู้ส่วนหลักๆก่อน แล้วก็เริ่มทำงานได้เลยส่วนใหญ่แล้ว Spiral Model จะทำให้สามารถ Release หลายๆครั้งได้ !! แต่ปัญหาทั้งหลายก็ยังไม่หมดไป ยังได้มีการพัฒนารูปแบบ ต่างๆในการพัฒนามากมาย โดยมีเด่นๆตอนนี้ก็คือ

Unified Process หรือถ้าจะให้เด่นจริงต้อง RUP Ration Unified Process อันนี้ดังมาก ต่อมาก็เป็น XP Programming ซึ่งเป็นการเขียน Test Case ก่อนแล้วให้ Programmer ทำงานคู่กัน แทนที่จะแยกกันทำ แล้วยังมีอีกหลายอันอย่าง โดยกระบวนการจะมีประสิทธิภาพ แค่ไหน ?? เขาก็เลยมีจำพวก ISO , CMMI ซึ่งทางด้าน Software CMMI จะเป็นที่นิยมมากกว่านะครับ

วันนี้ฝากไว้ให้อ่านไปกันแค่นี้ก่อนส่วน Spiral Model นั้นรูปนี้ก็อธิบายได้ดีมากแล้วนะครับ ไว้วันที่ 19 ผมจะกลับมาใหม่นะครับ ^^

SWOT ของ Adobe Flex

SWOT เป็นคำที่ย่อมาจาก Strong Weakness Opportunity Threat ตามลำดับดังนั้นวันนี้ผมจะมาวิเคราะห์โดยคร่าวๆให้ฟังกันนะครับโดยแปลแต่ละคำได้ดังนี้นะครับ Strenght = จุดแข็ง , Weakness = จุดด้อย , Opportunity = โอกาส , Threat = อุปสรรค

Strenght -

  • จุดแข็งของ Adobe Flex ตอนนี้คือเป็น RIA ที่มี User Interface ให้เรียกใช้สวยงาม
  • ใช้หลัก ActionScript 3.0 ทำให้การเขียนอยู่ในรูป OO แต่ในขณะเดียวกันก็สามารถทำให้เป็น Component Based ได้อย่างง่ายด้าย
  • เพราะความเป็น RIA ทำให้กิน Bandwidth น้อยกว่าการทำ Flash ธรรมดาอยู่มาก
  • การติดต่อกับ J2EE มี Service มาให้ใช้เรียบร้อยทำให้สามารถดึง ถ่ายข้อมูลผ่าน J2EE ได้ง่ายมาก
  • มี Animation ติดตัวมาบางทำให้ผู้เขียน Web Application ไม่จำเป็นต้องรู้ Script ในการทำ Animation มากนัก
  • มีการทำระบบ Cache แล้วใน Version 3.0 ทำให้โหลดเร็วขึ้นมาก

Weakness -

  • จุดอ่อนสำคัญเลยคือถ้าการเขียน Application ไม่ดีจะทำให้กิน Ram และ Bandwidth มาก
  • การตั้งชื่อ Class / Method บางทีมันก็เป็นคำศัพท์ที่คนไทยเข้าใจยาก
  • เรียนรู้ยาก เพราะภาษามีโครงสร้างในตัวของมันเอง ทำให้เริ่มต้นอาจจะยาก แต่ทำไปนานๆแล้วจะรู้แล้วว่ามันออกแบบมาดี

Opportunity -

  • โอกาสสำคัญจริงๆเลยนะครับ คือตอนนี้ Adobe AIR มาแล้วนะครับส่วนใครที่ยังไม่รู้ว่ามันทำอะไรได้นะครับ ผมจะสรุปคร่าวๆ มันเป็นตัว Compile จากภาษา HTML AJAX FLEX ไปเป็น Application บน Desktop ได้ทุก Platform เอะหมายความว่าไง อนาคตเราไม่จำเป็นต้องจับหลายภาษาอีกแล้ว ?
  • ทาง Adobe เมื่อได้รวบ Macromedia เข้าไปแล้วทำให้การทำงานทั้งส่วน Web และ Design ผูกเข้าด้วยกันอนาคตงานที่เราจะได้จะความสวยเป็นของแถมแน่ๆ อย่าง Flex นี้เป็นตัวอย่าง ยิ่งถ้ามีคนทำ Component เยอะๆ อนาคตเรามีหน้าที่แค่ Code ไม่ต้องไปใส่ใจ ว่าเราทำ UI ไม่เก่ง

Threat -

  • อุปสรรคที่ไม่แน่ว่าอาจจะเกิดขึ้นหรือไม่ก็คือเรื่องที่ Microsoft จะทำให้ IE รองรับกับ Platform Silverlight ของตัวเองมากกว่าที่จะรองรับทางฝั่ง Adobe หรือไม่
  • มันใช้ Technology ที่จะมาแรงจริงๆหรือไม่ หรือแค่แรงชั่วคราวเพราะเดียวจะมี Adobe Apollo มาด้วย แต่มันยังใช้ Flex เป็นพื้นฐานอยู่ดี
  • ตัวภาษาเองเป็น Open Source มี SDK ให้ครบแต่กลับสนับสนุนไปในทาง Flex Builder มากกว่าซึ่งเหมือนจะขาย Software ไปในตัวเอง ถ้าของแท้ก็ 499$ เอง
  • คู่แข่งตัวฉกาจอีกแล้วนั้นคือ Silverlight ของตัว Microsoft แต่ทว่าดูๆแล้วตอนนี้ยังเดาไม่ได้ว่าใครเจ๋งกว่า แต่เรื่อง UI Adobe ยังนำอยู่
  • ถึงแม้ดูเหมือนจะออกแบบมาดีทุกอย่าง แต่ก็ขาดเรื่องความ Plain อยู่มาก เพราะถ้าพัฒนาด้วย Flex ล้วนๆโดยไม่ใช้ Flex Builder เลยนี้ผมว่าเขียนยากอยู่เหมือนกันนะ

นี้ก็คือการวิเคราะห์แบบ SWOT คร่าวๆเกี่ยวกับ Flex นะครับ แต่ส่วนตัวผมขอไปวิเคราะห์ Dependency Pull / Push ก่อนนะครับเป็นการบ้านส่งอาจารย์ ไว้ผมจะมาเล่า share อีกนะครับช่วงนี้สอบอาจจะหายไปเลยนะ ^^

ความแตกต่างระหว่าง Adobe Flex & Adobe Flash

หลังจากที่ผมได้ลองพัฒนา Flex ควบคู่กับการศึกษา Flash ไปในตัวด้วย (เพราะสิ่งที่ผมกำลังจะทำให้บริษัท มันอยู่ในรูปของ Object โต๊ะอะไรต่างๆเลยต้องใช้ Flash มาผสม) โดย Concept หลักๆที่ผมได้เรียนรู้จากการศึกษาก็คือ

การที่เราจะต้องทำ Object flash ตัวหนึ่งเปลี่ยนสีได้ตามที่ต้องการ บน Flex ยากกว่าบน Flash มากนัก เท่าที่ผมลองทำแล้ว Flex สามารถที่จะทำได้ แต่ด้วย Code ที่ยุ่งยากแล้วไม่รู้ว่าทำไปแล้วจะได้ผลแค่ไหน ผมเลยมองว่า Flex เหมือนกับกึ่ง Animation บน Web แต่สิ่งที่ผมได้รับ Assign งานมา มันเหมือนกับทำ Animation ที่ผสมลูกเล่นต่างๆลงไป ผมเลยฝากมาบอกสำหรับคนที่กำลังใช้ Flex กะ Flash ความจริงถ้าคุณใช้ Flex , Flash เป็นอีกตัวที่คุณต้องเรียนรู้บางแต่ไม่ต้องมาก

แต่ถ้าคุณเป็นทางด้าน Animation โดยตรง ไม่จำเป็นที่จะต้องมาแตะ Flex เลยก็ได้ถ้า Boss คุณไม่ได้เจาะจงให้ใช้ Flex ความสามารถใน Flex นั้นสามารถเขียนได้หลายแบบมากๆ แต่โดยร่วมแล้วใครมาทำ Flex จะต้องรู้จัก MXML เพราะเป็นหัวใจหลักของ Flex แต่ Flex สามารถทำได้ด้วย ActionScript 3.0 ทั้งหมดเลยก็ได้ ดังนั้นไม่ใช่ว่า Flex จะต้องใช้ MXML เท่านั้นโดย ผมศึกษามาพอคร่าวๆ อีกหน่อยว่าใครใช้ J2EE จะรวมงานกับ Flex ได้อย่างยอดเยี่ยมเลยทีเดียว ไม่ต้องทำ XML เองโดยตรง

ดังนั้นผมขอสรุปว่าก่อนที่จะเริ่มใช้ Technology ใดๆนะครับ ควรจะศึกษาก่อนว่า มันเกิดมาเพราะอะไร และจุดประสงค์ของโปรแกรม มันคืออะไร ? ไม่ใช่แค่ว่า มันสามารถทำได้หรือไม่ เพราะไม่งั้นผมก็บอกตรงๆว่า Flex ก็ทำได้ แต่ว่ามันคุ้มไหมกับความยุ่งยากในการที่จะทำและบำรุงรักษาในอนาคต ? Flex เกิดมาเพื่อ Rich Internet Application , Flash เกิดมาเพื่อแสดง Animation ดังนั้นอย่าผิด Concept นะครับ…….

ActionScript 3.0 ตอนนี้ผมว่าเยี่ยมมากๆ คนที่จับ Java มาก่อนเจอ ActionScript 3.0 ก็เข้าใจได้อย่างรวดเร็วมีส่วนของ Package / Embed / Bindable เท่านั้นที่ต้องศึกษาเพิ่มเติม แต่ก็ทำง่ายมากๆ ขอบอกว่าใครกำลังมีโปรเจคเขียน Web นะครับลองใช้ Flex ดูแล้วจะได้ผลที่น่าพอใจมาก ความเร็วนี้ผมให้ 8/10 เลยเขียนดีๆ นี้เร็วมากใช้หลักการ Model-View-Controller !! + Algorithm ที่เป็นระบบ รับรองว่าเร็วมาก.. (ต้อง Install Adobe Flash Player 9 ก่อนนะครับถึงจะใช้ Flex ได้)

รู้จักกับ jQuery

jQuery

เป็น Framework ตัวหนึ่งที่ใช้ในการพัฒนา Javascript โดย jQuery มีความสามารถต่างๆมากมายที่จะทำเรื่องง่ายเป็นเรื่องยาก เช่น ajax , effect และอื่นๆของ Javascript สนุกมากขึ้น

jQuery สามารถหา Download ได้ที่ jquery.comโดยมี 2 แบบให้เลือกใช้คือแบบ Compressed กับ Uncompressed โดยถ้าต้องการศึกษาตัว Framework ว่ามีการทำงานยังไงให้เลือกแบบ Uncompressed ส่วนตอนเอาไปใช้งานถ้าไม่มีการเปลี่ยนแปลงอะไรด้านในควรใช้แบบ Compressed เพราะช่วยให้โหลดเร็วมากกว่าหลายเลยทีเดียว ดูตัวอย่างการใช้งาน jQuery อย่างง่ายๆที่นี้ Example 1 : กดปุ่มเพื่อโชว์้ข้อความเพิ่มเติม Example 2 : โหลดข้อความจากหน้าอื่นโดยไม่ต้องเปลี่ยนหน้า (ใช้ Ajax) เราจะเริ่มวิธีัการใช้งานในคราวหน้า คราวนี้ฝากให้ไปลองทดสอบเองไปก่อนนะครับ