การเขียนโปรแกรมเป็นทีม ต้องทำอย่างไร

โดยปกติแล้ว ท่านใดที่อยู่ในสายการเขียนโปรแกรม คงรู้ว่าการเขียนโปรแกรมนั้นส่วนมาก มักจะฉายเดี่ยว หรือทำงานคนเดียว หรือแม้แต่ทำงานกันเป็นทีม แต่ก็จะแบ่งหน้าที่กันทำงานเป็นส่วนๆ เช่น คนนี้ทำ Design คนนี้ทำ Programming คนนี้ดูเรื่อง Server คนนี้ดูเรื่องหลังบ้าน อะไรอย่างนี้

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

ยังมีอีกหลายปัจจัย เล่าเป็นวันๆ ก็ไม่จบ แต่ละคนก็เจอแต่ละเหตุการณ์แตกต่างกันไป แต่สิ่งหนึ่งที่เป็นส่วนที่สำคัญในการทำงานเป็นทีมที่แต่ละคนมองข้ามไป หรือไม่ทันสังเกต และเป็นสาเหตุให้เราไม่สามารถทำงานร่วมกันเป็นทีมได้ ก็คือ กระบวนการในการทำงานและเครื่องมือช่วยในการทำงานเป็นทีม (Working Process & Development Tools)

โปรดฟังอีกครั้งหนึ่งว่า “เราขาดกระบวนการในการทำงานเป็นทีม และ เครื่องมือที่จะมาช่วยในการทำงานเป็นทีม” (Working Process & Development Tools) และให้สังเกตว่าผมไม่ได้พูดถึง ทักษะการเขียนโปรแกรมเป็นทีม (Programming Skill) เลยนะ เป็นเพราะอะไรนะหรือ ค่อยดูตอนท้ายๆ ครับ ตอนนี้เรามาดูที่ละหัวข้อที่สำคัญกันก่อนว่า แต่ละหัวข้อมันคืออะไร ทำไมมันถึงสำคัญ

1.เครื่องมือในการพัฒนาเป็นทีม
เครื่องมือที่ว่านี้อาจจะแยกออกเป็นประเภทต่างๆดังนี้

1.1.เครื่องมือช่วยในการเขียนโปรแกรม (Editor / IDE)
เราลองสำรวจดูว่า ตอนนี้เราใช้โปรแกรมอะไรในการช่วยเขียนโปรแกรม เช่น Nodepage ++, Edit Plus, Dreamwever, Eclipse, NetBean, Sublime, Aptana, VIM หรืออื่นๆ

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

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

1.2.เครื่องมือการคอมไฟล์ไฟล์ต่างๆ หรือรวมไฟล์ต่างๆ เข้าด้วยกัน (Build Automation)
เครื่องมือนี้บางคนอาจจะมองข้าม หรือไม่เคยใช้เลยก็ได้ถ้าไม่ได้เขียนโปรแกรมเป็นทีมมาก่อน หรือใช้ CMS ในการพัฒนาเว็บไซด์

การใช้ Build Automation เข้ามาช่วยนี้ จะเอาไว้สำหรับการทำงานที่ซ้ำไปซ้ำมา หรืองานที่ต้องสั่ง run ซ้ำไปซ้ำมา เช่น การตรวจสอบไฟล์ CSS, JavaScript, การรวมไฟล์ CSS, JavaScript เป็นไฟล์เดียว การคอมไฟล์ LESS ไฟล์ การสั่ง Automation Test JavaScript  การ refresh หน้าเว็บไซด์เมื่อมีการแก้ไขโปรแกรม หรืออื่นๆ

งานเหล่านี้ เมื่อเรามีการเขียนโปรแกรม โดยปกติเราจะกด run เอง แต่ถ้าเราเลือกใช้เครื่องมือ Build Automation เข้ามาช่วย เราจะสามารถประหยัดเวลาในการทำงาน และสะดวกมากขึ้นอีกด้วย

และเมื่อเราทำงานเป็นทีม บางทีอาจจะมีการเขียนแยกไฟล์กันบ่อยๆ เราก็จะมี Build Script นี่เหล่ะ ที่จะนำไฟล์ของแต่ละคนมารวมกันโดยอัตโนมัติผ่าน Build Script ที่เราได้เขียนไว้แล้ว

1.3.เครื่องมือในการทดสอบ (Debug)
แน่นอน เมื่อเราเขียนโปรแกรม เราก็ต้องมีการทดสอบโปรแกรม ว่าทำงานได้ถูกต้องไหม โดยเฉพาะอย่างยิ่งการทำเว็บไซด์ การเขียนอะไรเข้าไป 1 บรรทัด ถ้าเราไม่ทดสอบ (Debug) ผ่านหน้าเว็บไซด์ อาจจะมีผลกระทบต่อหลายๆส่วนก็ได้ โดยเฉพาะอย่างยิ่งการเขียน HTML, CSS

เครื่องมือที่ช่วยในการ Debug เช่น Google Chrome Inspector (Google Chrome), Firebug (Firefox) เป็นต้น ซึ่งถ้าเราไม่ใช้เครื่องมือในการช่วย Debug เราอาจจะทำงานร่วมกับคนอื่นแล้ว เกิดข้อผิดพลาดขึ้นบ่อยๆ ถ้าพลาดบ่อยๆ คนที่แบกรับภาระก็คือทีมทุกคน ต้องมาคอยตามแก้ไขให้อยู่เรื่อยๆ

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

1.4.เครื่องมือในการแชร์โค้ด (Source Code Management)
สิ่งนี้สำคัญมาก ถ้าใครทำงานเป็นทีม แล้วไม่มี Source Code Management ก็ไม่ต่างอะไรกับการทำงานคนเดียวเลย นั้นก็คือ ต่างคนต่างทำ สุดท้ายแล้วค่อยเอามาประกอบกัน

ในการทำงานเป็นทีม เราจะต้องให้ทุกคนสามารถเห็นชุดคำสั่งที่เราเขียนได้ แก้ไขได้ ลบได้ รู้ว่าใครเขียนอะไรเพิ่มเข้าไปได้ ระบบการจัดการโค๊ดนี้ หลายคนอาจจะใช้อยู่เป็นประจำเช่น  GIT, SVN โดยปัจจุบันนิยมใช้ GIT ในการแชร์โค้ดร่วมกัน โดยอาจจะเลือกใช้ผู้ให้บริการ GIT Server โดยที่เราไม่ต้องติดตั้งเอง และใช้งานฟรีอีกด้วย เช่น Github.com, BitBucket.org

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

และการเก็บโค้ดไว้ใน Git Server นี้จะมีข้อมูล ตอนที่จะเอาโค้ดขึ้น Production จริงๆด้วย โดยใช้ Automation Deployment เข้ามาช่วย ซึ่งจะอธิบายในหัวข้อต่อไป

1.5.เครื่องมือในการติดตั้งขึ้นบนเครื่องจริง (Deploy to Production)
สมัยก่อน ผมก็เป็นคนหนึ่งที่เขียนโปรแกรมเสร็จแล้ว เมื่อจะขึ้นงานจริง (Production) ก็ทำการอัพโหลดไฟล์ทั้งหมดขึ้นโฮสติ้งผ่าน FTP ซึ่งก็สะดวกดี และก็เป็นวิธีที่หลายๆ คนก็ทำกันแบบนี้

ปัญหาอยู่ที่ว่า เมื่อเอางานขึ้นโฮสติ้งเรียบร้อยแล้ว ถ้ามีการแก้ไขเกิดขึ้น เราก็กลับมาแก้ไขที่เครื่องแล้วก็อัพโหลดเฉพาะไฟล์นั้นๆ ขึ้นไปทับไฟล์เดิม ซึ่งวิธีเหล่านี้ก็ใช้ได้ผลอย่างดีเยี่ยม (ในสายตาผมนะ ^^)

แต่เดี๋ยวก่อน ก่อนที่จะอัพโหลดไฟล์ใหม่ขึ้นไปทับ จะต้องสำรองไฟล์เดิมไว้ก่อน แล้วค่อยเอาไฟล์ใหม่ขึ้นไปทับ (กันพลาดว่างั้นเถอะ)

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

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

พูดมาก็ยาวแล้ว สรุปก็คือ Automation Deployment นี่เหล่ะจะเป็นพระเอก ขี่ม้าขาวมาช่วยในการนำโค้ดของเราขึ้นโฮสติ้งอย่างปลอดภัยที่สุด โดยหลักการคือ นำโค้ดที่เราเขียนใน GIT Server เช่น Github.com, BitBucket.org มาติดตั้งให้ที่โฮสติ้งอัตโนมัติเลยทีเดียว

สิ่งที่ตามมาก็คือ เมื่อเราเขียนโค็ดเสร็จเรียบร้อย เราก็ commit ขึ้น Github ให้เรียบร้อย เมื่อจะนำโค้ดที่พึ่งแก้ไขเมื่อกี้นี้ขึ้นโฮสติ้ง เราก็เพียงสั่งให้ระบบ Deployment นำโค็ดจาก Github ไปติดตั้งที่โฮสติ้งเองโดยอัตโนมัติ (เพียงแค่คลิกเดียว หรือ รันคำสั่งเดียวเช่น cap production deploy) ถ้ามีปัญหาเกิดขึ้น เราก็แค่สั่งให้ Rollback หรือถอยกลับไปเวอร์ชั่นก่อนหน้า ภายในเสี้ยววินาที

เห็นไหมล่ะครับว่า การมีระบบ Deployment เป็นสิ่งที่จำเป็นอย่างมาก แต่เชื่อไหมครับ ส่วนใหญ่เราก็ยัง FTP กันอยู่เหมือนเดิม ^^ เพราะการทำระบบ Deployment ต้องใช้ทักษะหลายๆอย่างผสมกัน กว่าจะสร้างระบบ Deployment ได้

IDE คืออะไร

IDE คืออะไร

      IDE ย่อมาจาก Integrated Development Environment คือ เครื่องมือที่ช่วยในการพัฒนาโปรแกรมโดยมีสิ่งอำนวยความสะดวกต่างๆ เช่น คำสั่ง Compile, Run ตัวอย่างของ IDE เช่น NetBeans Editplus, JCreator, Eclipse แต่ Notepad ไม่นับว่าเป็น IDE เนื่องจากตัว Notepad เองไม่มีเครื่องมืออำนวยความสะดวกสำหรับการเขียนโปรแกรมใดๆ เลย  IDE เป็นโปรแกรมที่รวมคำสั่ง เมนู และ GUI ต่างมาสร้างเป็นโปรแกรมที่มีรูปร่างหน้าตาเหมาะแก่การเขียนโปรแกรม หรือพูดอีกอย่างว่า เป็นโปรแกรมที่จะสร้างสภาพแวดล้อม(environment) ให้เหมาะแก่การเขียนโปรแกรม

      หน้าที่ของโปรแกรม IDE คือการเปิดไฟล์ที่เขียนภาษาโปรแกรม เช่นภาษา C, Pascal, Java และเซ็ตข้อมูลการคอมไพล์โปรแกรมเก็บไว้ในไฟล์โปรเจคต์ รวมถึงจัดการ Directory และมีปุ่มสร้างโปรแกรมแบบกดทีเดียวทำงานอัตโนมัติจนเสร็จ โปรแกรม IDE 1 โปรแกรม มักจะมีความสามารถเฉพาะบางภาษา ตัวอย่างเช่น โปรแกรมตระกูล Visual ของบริษัทไมโครซอฟท์ ที่มี Visual Basic สำหรับภาษาเบสิค Visual C++ สำหรับภาษา C++ 

แต่ว่าโดยปกติ IDE จะต้องประกอบด้วยส่วนต่างๆดังต่อไปนี้ครับ
1.Source code editor ที่ใช้สำหรับเขียนคำสั่ง หรือแก้ไขคำสั่ง
2.compiler หรือ interpreter ใช้สำหรับ แปลภาษาคอมพิวเตอร์ต่าง ๆ เช่น ภาษาซี จาวา ให้เป็นภาษาเครื่อง
3.Debugger ใช้สำหรับช่วยในการตรวจสอบ หรือหาจุดผิดพลาดของโปรแกรม
4. GUI หรือ Graphics User Interface เป็นเครื่องมือที่ช่วยให้โปรแกรมเมอร์ใช้งาน หรือเขียนโปรแกรมได้ง่ายขึ้น รวดเร็วขึ้น
 
 แต่ที่นอกเหนือจากนั้นคือความต่างของ IDE แต่ละตัวแล้วครับ ว่าใครจะทำมาเอื้อต่อการทำงานของ developer ได้มากกว่ากัน เช่นบางตัวจะมีส่วน debugger หรือว่าส่วน syncronize ไฟล์ หรือส่วนการจัดการ project file ฯลฯ แล้วแต่ว่า IDE คนนั้นจะขยันใส่ option ให้เราได้มากเท่าไร

Source Code Editor ที่เป็นส่วนนึงของ IDE คงไม่ต้องพูดนะครับว่ามันก็คือ Text Editor นั่นล่ะครับ มองว่าเป็น notepad ก็ไม่ผิดหรอก ทำหน้าที่เดียวกันเลย แต่ว่าตัวที่ติดมากับ IDE ความสามารถจะเหนือว่า เช่นว่า
- hilight สีของคำสั่ง ตัวแปร function หรือค่าต่างๆในโค้ดได้ เช่นตัวแปรสีส้ม comment เป็นสีเขียว
- auto suggest เช่นว่าเรากำลังจะพิมพ์ function strtolower แต่เพียงแค่เราพิมพ์ str ตัว text editor ก็จะขึ้น function ทั้งหมดที่ขึ้นต้นด้วย str ขึ้นมาให้เราเลือกทันที
- ตรวจสอบ syntag ได้ สมมุตว่าเราพิมพ์ function strtolower เป็น strolower โดยที่เราไม่ทันสังเกต แต่ text editor ก็จะเตือนเราทันทีว่าบรรทัดนี้ผิด หรือว่าลืมปิดคำสั่งด้วยเครื่องหมาย ; ก็เตือนเราได้เช่นกัน
- จัดการ format การเขียนโปรแกรมได้ ลองนึกตัวอย่างว่าเวลาเราพิมพ์อะไรใน notepad แล้วเรากด enter ขึ้นบรรทัดใหม่มันก็จะมาชิดซ้ายสุด แต่ว่า text editor ใน IDE จะจัดย่อหน้าให้อย่างสวยงาม
- ฯลฯ เพราะว่ามันมีลูกเล่นเยอะเพื่อช่วยเหลืองานเรานั่นเอง

Compiler หรือ Interpreter ถ้าคนที่ไม่เคยเรียนคอมพิวเตอร์ หรือการทำงานของคอมพิวเตอร์มาอาจจะงง ว่ามันคืออะไร ก็เล่าคร่าวๆเพื่อความเข้าใจครับ ว่าปกติแล้วคอมพิวเตอร์เราทำงานด้วยสัญญาณไฟฟ้าครับ คือเวลาอุปกรณ์ในเครื่องเราแต่ละชิ้นทำงานพูดคุยกัน มันจะคุยกันด้วยสัญญาณไฟ 0 หรือ 1 โดย 0 ก็คือไม่มีไฟ 1 คือมีไฟ โดยจะสลับกับ เช่น 0001 1000 1101 หรืออื่นๆก็ว่ากันไปเป็นต้น นี่ล่ะครับ ที่คอมพิวเตอร์เข้าใจจริงๆ แต่ว่าเวลาที่คนเราเขียนโปรแกรม เราจะไม่สามารถเขียนให้เป็น
00010111 11011100 หรืออะไรแบบนี้ได้ จึงเริ่มมีการแปลงตัวเลขพวกนี้ให้เป็นภาษาคนมากขึ้น คือภาษา Assembly ซึ่งเป็นภาษาที่คนเริ่มอ่านออกแล้ว แล้ว simple ที่สุดที่จะใช้เพื่อการแปลงลงไปเป็นคำสั่งของ computer ให้ทำงานต่างๆ ลองดูตัวอย่างของ ภาษา Assembly ได้ที่ http://th.wikipedia.org/wiki/Assembly โดยหากท่านเคยเขียนโปรแกรมหรือเขียนเว็บต่างๆมา ก็จะทราบว่ามันเป็นภาษาที่เราอ่านออกเช่น
if($haveuser){
echo "มีคนอยู่";
}
เป็นต้น ซึ่งแน่นอน ภาษานี้คนเข้าใจแต่คอมไม่เข้าใจ จึงต้องอาศัย Compiler หรือ interpreter ช่วยในการแปลงจากภาษาคนตัวอย่างไปเป็น Assembly เพื่อให้คอมพิวเตอร์เข้าใจคำสั่งของเราและทำงานได้ต่อไปนั่นเอง
ทั้งหมดนี้ก็รวมรวมเข้ามาเพื่อให้เป็น IDE นั่นเอง

IDE ที่ได้รับความนิยมในปัจจุบัน

เมื่อใช้คำค้นว่า top 10 IDE ที่ google search engine พบว่าเว็บไซต์ http://www.comptalks.com/ ซึ่งได้เขียนขึ้นในวันที่ 20 มกราคม 2558 ได้จัดเรียงลำดับ IDE ที่ได้รับความนิยม 10 ลำดับดังนี้

1. Netbeans เป็น IDE ประเภท GPL ของบริษัท Sun Microsystem ปัจจุบัน Oracle ได้ซื้อกิจการของบริษัท Sun Microsystem แล้วจึงยังให้บริการดาวน์โหลดไปใช้ฟรีเหมือนเดิม จุดเด่นของ NetBeans คือ มี Third Party หลายกลุ่มเข้ามามีส่วนร่วมในการพัฒนาเพิ่มเติมเข้าไปได้ นอกจากนี้ยังมี GUI ที่ออกแบบมาสวยงาม และมี syntax Highlight ที่ชัดเจน และสุดท้ายคือ รองรับการใช้งานได้หลายภาษา
2. Eclipse เป็น IDE ประเภท GPL เช่นกัน รองรับภาษาคอมพิวเตอร์หลายภาษา เช่น Java, C, C++, Python เป็นต้น
3. Komodo IDE เป็น IDE ที่มีลิขสิทธิ์ที่ผู้ใช้ต้องซื้อ มีข้อดี ในด้านรองรับหลายภาษา เช่น Perl, PHP, Python, C, C++, JavaScript, HTML, XML
4. Monodevelop เป็น IDE ที่สร้างขึ้นมาเพื่อเป็นทางเลือก ในกรณีที่โปรแกรมเมอร์ต้องการเขียนภาษา C# และ ASP.NET เพราะว่า Monodevelop เป็น IDE ที่เป็น Open source ที่ไม่ต้องซื้อเช่นกัน
5. Aptana เป็น IDE ที่ไม่ต้องซื้อเช่นเดียวกัน รองรับภาษาหลายภาษา เช่น Java, HTML, PHP, JavaScript, และอื่น ๆ ใช้ได้ทั้ง MS Windows, Mac OS, และ Linux
6. QtCreator เป็น IDE ที่เป็นทั้งให้ใช้ฟรี และชนิดจำหน่าย รองรับภาษาหลายภาษา มี GUI ที่สวยงาม
7. Code::Blocks เป็น IDE ที่ได้ความนิยมในการเขียนโปรแกรมในสถานศึกษา รองรับภาษา C, C++ หากติดตั้ง plug-in จะสามารถใช้ภาษา Python ได้ ใช้ดีมาก ๆ กับ C และ C#
8. PSPad เป็น IDE ที่พัฒนาขึ้นมาจากโปรแกรมเมอร์เพียงคนเดียว รองรับเฉพาะ MS Windows เหมาะสำหรับเขียนโปรแกรมสร้างเว็บไซต์ 
9. Geany เป็น IDE ที่รองรับหลายภาษา เช่น C, Java, PHP, HTML, Python และอื่น ๆ
10. Ulzard เป็น IDE ชนิด Online ที่ให้โปรแกรมเมอร์พัฒนาโปรแกรมบนเว็บไซต์โดยตรง

ในขณะเดียวกัน ในยุคของ Cloud Computing ที่รองรับการทำงานหลาย ๆ platform จึงมี IDE แบบ online เกิดขึ้นอย่างมากมาย ซึ่ง Cloud computer เองมี programming language as a service ให้บริการจึงได้ค้นคำว่า top 10 online IDE พบว่าเว็บไซต์  http://codecall.net/ ได้เขียนขึ้นเมื่อวันที่ 24 กรกฏาคม 2557 ได้จัดลำดับ IDE Online 10 ชื่อ เรียงตามลำดับดังนี้

1. 
   
   Cloud9
2. Codenvy
3. Code Anywhere
4. Koding
5. Neutron Drive
6. Collide
7. Orion
8. Python Fiddle
9. Erbix
10. SourceKit

สรุป

IDE เป็นเครื่องมือสำหรับให้โปรแกรมเมอร์พัฒนาซอฟต์แวร์ประยุกต์ มีฟังก์ชันการทำงานครบครัน ตามที่โปรแกรมเมอร์ต้องการ มีให้ใช้หลายชื่อ หลายยี่ห้อ มีทั้งแบบฟรี และแบบจำหน่าย หากท่านต้องการทราบว่ามี IDE อื่น ๆ ที่ท่านอาจสนใจ ให้ท่านค้นหาใน google.co.th ด้วยคำค้นว่า 

IDE Computer wiki

ท่านจะพบ IDE อีกมากมายที่น่าสนใจ ตรงกับความต้องการของท่านเอง

ข้อมูลอ้างอิง

http://wiki.thaigamedevx.com

http://www.kku.ac.th

Ajax

เอแจ็กซ์

จากวิกิพีเดีย สารานุกรมเสรี

สำหรับความหมายอื่น ดูที่ Ajax

เอแจ็กซ์ (อังกฤษ: AJAX: Asynchronous JavaScript and XML /ˈeɪdʒæks/) เป็นกลุ่มของเทคนิคในการพัฒนาเว็บแอปพลิเคชันเพื่อ ให้ความสามารถโต้ตอบกับผู้ใช้ได้ดีขึ้น โดยการรับส่งข้อมูลในฉากหลัง ทำให้ทั้งหน้าไม่ต้องโหลดใหม่ทุกครั้งที่มีการเปลี่ยนแปลง ซึ่งช่วยทำให้เพิ่มการตอบสนอง ความรวดเร็ว และการใช้งานโดยรวม
เอแจ็กซ์นั้นไม่ใช่เทคโนโลยีใหม่ แต่เป็นเทคนิคที่ได้ใช้เทคโนโลยีหลายอย่างที่มีอยู่แล้วรวมกันดังต่อไปนี้:

• XHTML (หรือ HTML) และ CSS ใช้ในการแสดงผลลัพธ์และรูปแบบข้อมูล
• ECMAScript เช่นจาวาสคริปต์ ในการเข้าถึง Document Object Model (DOM) เพื่อใช้ในการแสดงข้อมูลที่มีการเปลี่ยนแปลงหรือโต้ตอบกับผู้ใช้
• XMLHttpRequest ใช้ในการแลกเปลี่ยนข้อมูล asynchronously กับเว็บเซิร์ฟเวอร์
• XML ใช้เป็นรูปแบบข้อมูลในการแลกเปลี่ยน ซึ่งรูปแบบอื่นก็สามารถใช้ได้เช่นกันไม่ว่าจะเป็น HTML, JSON, EBML, หรือ ข้อความธรรมดา

ประวัติ

ภาพเปรียบเทียบการทำงานระหว่างเว็บแอปพลิเคชันแบบดังเดิม กับแบบที่ใช้เอแจ็กซ์

Jeese Jams Garett นั้นเป็นผู้ที่ได้บัญญัติคำว่า เอแจ็กซ์ ขึ้นเมื่อปีพ.ศ. 2548 ซึ่งนึกขึ้นได้ระหว่างที่เขากำลังอาบน้ำ เพื่อหาคำสั้นๆ สำหรับอธิบายให้ลูกค้าของเขาทราบเกี่ยวกับเทคโนโลยีต่างๆ ที่ต้องการจะนำเสนอ
เอแจ็กซ์โดยตัวมันเองแล้วไม่ได้เป็นเทคโนโลยีหรือภาษาโปรแกรมชนิดใหม่ แต่เป็นการรวมกลุ่มของเทคโนโลยีที่มีใชัอยู่แล้วดังที่กล่าวข้างต้น โดยวิวัฒนาการของเอแจ็กซ์เริ่มต้นเมื่อปีค.ศ. 2002 ไมโครซอฟท์ได้ทำการคิดค้น XMLHttpRequest ขึ้นมาเพื่อเป็นทางเลือกในการเขียนโปรแกรมบนเว็บเพจ เพื่อใช้ติดต่อกับ เว็บเซิร์ฟเวอร์ ในการแลกเปลี่ยนข้อมูล ซึ่งในขณะนั้นมีแต่เพียง อินเทอร์เน็ตเอกซ์พลอเรอร์ เท่านั้นที่มีความสามารถนี้ ต่อมาเว็บเบราว์เซอร์อื่นๆ เช่นจาก มอซิลลา ไฟร์ฟอกซ์ ได้นำแนวคิดของ XMLHttpRequest ไปใส่ในเบราว์เซอร์ของตนด้วย จึงเริ่มทำให้มีการใช้อย่างกว้างขวางขึ้น จนปัจจุบันได้กลายเป็นมาตรฐานที่ทุกเว็บเบราว์เซอร์ต้องมี
ในตอนแรกนั้นไมโครซอฟท์เป็นผู้ที่ได้นำ XMLHttpRequest โดยใช้ใน Outlook Web Access ที่มาพร้อมกับ Microsoft Exchange Server 2000 ต่อมาเว็บไซต์อย่างกูเกิล ได้เปิดบริการใหม่ชื่อจีเมล ซึ่งใช้ XMLHttpRequest เป็นหัวใจหลักในการดึงข้อมูลจากเว็บเซิร์ฟเวอร์ จึงทำให้แนวคิดและเทคนิคการพัฒนาเว็บแอปพลิเคชันด้วย เอแจ็กซ์ เริ่มเป็นที่รู้จักกันกว้างขวางขึ้น จนปัจจุบันถือว่าเป็นหนึ่งในหัวใจหลักของแนวคิดเรื่อง Web 2.0

หลักการทำงาน

วิธีการทำงานของเว็บแอปพลิเคชันแบบดังเดิมนั้น โดยปกติแล้วเมื่อผู้ใช้ทำการร้องขอข้อมูลจากเซิร์ฟเวอร์ ตัวเว็บเบราว์เซอร์จะทำการส่งข้อมูลการร้องขอโดยใช้โพรโทคอล HTTP เพื่อติดต่อกับเว็บเซิร์ฟเวอร์ และที่เว็บเซิร์ฟเวอร์จะทำการประมวลผลจากการร้องขอที่ได้รับ และส่งผลลัพธ์เป็นหน้า HTML กลับไปให้ผู้ใช้ วิธีการข้างต้นเป็นวิธีการแบบการร้องขอและการตอบรับ (Request and Response) ซึ่งผู้ใช้จะต้องรอระหว่างที่เซิร์ฟเวอร์ประมวลผลอยู่ ซึ่งเป็นหลักการทำงานแบบ Synchronous แต่การทำงานของเว็บแอปพลิเคชันที่ใช้เทคนิคเอแจ็กซ์จะเป็นการทำงานแบบ Asynchronous หรือการติดต่อสื่อสารแบบไม่ต่อเนื่อง โดยเซิร์ฟเวอร์จะทำการส่งผลลัพธ์เป็นเว็บเพจให้ผู้ใช้ทันทีโดยไม่ต้องรอให้ ประมวลผลเสร็จก่อน หลังจากนั้นเว็บเพจที่ผู้ใช้ได้รับจะทำการดึงข้อมูลในส่วนต่างๆทีหลัง หรือจะดึงข้อมูลก็ต่อเมื่อผู้ใช้ต้องการเท่านั้น (ทำงานอยู่เบื้องหลัง)

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

ข้อดี

สามารถประมวลผลได้เร็ว เรียกดูข้อมูลได้ทันที โดยไม่ต้องรีเฟรชหน้านั้นๆ

ขนาดการรับส่งข้อมูล

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

ความรวดเร็วในการตอบสนอง

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

ปัญหาที่พบ

ปัญหาการใช้งานเกี่ยวกับปุ่ม "ย้อนกลับ"

เนื่องจากว่าเทคนิค เอแจ็กซ์นั้นทำงานในฉากหลัง และไม่ได้เรียกหน้าใหม่ ทำให้เวลาใช้ปุ่ม "ย้อนกลับ" (back) ในเว็บเบราว์เซอร์ อาจจะไม่ได้หน้าที่ควรจะเป็น ผู้พัฒนานั้น ได้คิดค้นวิธีการแก้ไขปัญหานี้หลากหลายรูปแบบด้วยกัน หนึ่งในวิธีที่ใช้แก้ไขปัญหานี้อย่างแพร่หลายคือการใส่ IFRAME ที่มองไม่เห็นเพื่อสั่งให้เว็บเบราว์เซอร์เปลี่ยนแปลงรายการหน้าของปุ่มก่อน หน้านี้

ปัญหาในการคั่นหน้า

เนื่องจากว่าข้อมูลสามารถเปลี่ยนแปลงโดยไม่ต้องโหลดหน้าใหม่นั้น ทำให้ยากต่อการที่จะคั่นหน้าใน สถานะปัจจุบันที่ต้องการ เนื่องจากถือว่าเป็นหน้าเดียวกัน. อย่างไรก็ตาม นักพัฒนาซอฟต์แวร์ได้คิดค้นวิธีการแก้ไขปัญหานี้ โดยการใส่ ชิ้นส่วนตัวแปร (fragment identifier) ใส่ในส่วนของURL ตามหลังเครื่องหมาย '#' เพื่อใช้ในการระบุสถานะของเว็บแอปพลิเคชัน สาเหตุที่ใช้วิธีนี้ได้นั้นเนื่องจากว่าจาวาสคริปต์นั้นสามารถเปลี่ยนชิ้น ส่วนตัวแปรนี้ได้โดยไม่ต้องโหลดหน้าใหม่. อย่างไรก็ตามวิธีแก้ไขปัญหานี้ไม่ใช่วิธีที่สมบูรณ์แบบ

เวลาที่ใช้ในการรับส่งข้อมูล

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

ปัญหาความเข้ากันได้กับเสิร์ชเอนจิน

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

ความน่าเชื่อถือของจาวาสคริปต์

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

ตัวอย่าง

js.js

var xhr = XMLHttpRequest();//ประกาศ object
xhr.open("post", "data.php");//ดึงข้อความจาก data.php
xhr.send(null);//ไม่ต้องส่งข้อมูลไป ดึงแค่ข้อความ
alert(xhr.responseText);//จะ alert ว่า "This is Message."

data.php

<?PHP
echo 'This is Message.';//แสดงผลคำว่า "This is Message." ด้วย function echo
?>

jQuery example

$.ajax({
    url: "data.php"//ดึงข้อความจาก data.php
}).done(function(data){//เมื่อเสร็จแล้วให้นำข้อความที่ส่งกลับมาเก็บเอาใว้ในตัวแปร data
    alert(data);//จะ alert ว่า "This is Message."
});

เอแจ็กซ์เฟรมเวิร์ก

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

สำหรับเอเอสพี

• xinteleport

สำหรับเอเอสพีดอตเน็ต

• เอเอสพีดอตเน็ต เอแจ็กซ์
• Ajax.NET Professional
• Anthem.NET - controls and utilities for ASP.NET 1.1 and 2.0

สำหรับ ColdFusion

• ajaxCFC

สำหรับจาวา

• DWR
• Google Web Toolkit

สำหรับจาวาสคริปต์ที่ไม่มีส่วนประกอบด้านเซิร์ฟเวอร์

• Prototype
• Dojo Toolkit
• SmartClient
• qooxdoo
• Clean AJAX
• Yahoo! UI Library
• Prototype.js ใช้ในRuby on Rails CakePHP และอื่นๆ
• jQuery

สำหรับพีเอชพี

• Sajax
• Xajax
• Projax
• PHPLiveX

สำหรับไพทอน

• Mochikit ใช้ในเทอร์โบเกียร์

ดูเพิ่ม

• เว็บแอปพลิเคชัน
• เว็บ 2.0
• จาวาสคริปต์
• XMLHttpRequest

แหล่งข้อมูลอื่น

• ThaiAjax.com
• Goragod.com (ไทย)
• ASP.NET AJAX (อังกฤษ)
• Google Web Toolkit (อังกฤษ)
• เว็บไซต์ที่สอนภาษา (AJAX) และอื่น ๆ ที่เกี่ยวข้อง (ภาษาไทย)

ตัวอย่างเว็บไซต์ที่ได้ใช้เทคนิคเอแจ็กซ์

• facebook.com
• The Wos
• Windows Live Local
• Google Gmail
• pageflakes.com
• flickr
• A9
• Goragod.com (ไทย)
• Sanook.com
• Clipsociety.com
• Thaigunners.com (ไทย)

JSON

JSON

จากวิกิพีเดีย สารานุกรมเสรี

เจซัน (อังกฤษ: JSON: JavaScript Object Notation เสียงอ่านภาษาอังกฤษ: /ˈdʒeɪsən/ แปลว่า สัญกรณ์วัตถุจาวาสคริปต์) เป็นฟอร์แมตสำหรับแลกเปลี่ยนข้อมูลคอมพิวเตอร์ ฟอร์แมต JSON นั้นอยู่ในรูปข้อความธรรมดา (plain text) ที่ทั้งมนุษย์และโปรแกรมคอมพิวเตอร์สามารถอ่านเข้าใจได้

มาตรฐานของฟอร์แมต JSON คือ RFC 4627 มี Internet media type เป็น application/json และมีนามสกุลของไฟล์เป็น .json

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

โครงสร้างของฟอร์แมต

เจสัน เป็นรูปแบบสายอักขระ (String) ชนิดหนึ่งที่ถูกจัดเก็บในรูปแบบที่สามารถอ่านและเข้าใจได้ง่าย ถ้าจะให้เข้าใจง่าย ๆ ก็คือเจสันเปรียบเสมือนรูปแบบของ อาเรย์ (Array) ชนิดหนึ่งที่ใช้รับส่งข้อมูลผ่านอาแจ็กซ์เพราะซึ่งปกติแล้วถ้าเราต้องการรับ-ส่งข้อมูลผ่านอาแจ็กซ์ต่าง ๆ นั้น จะต้องรับ-ส่งมาในรูปแบบของสายอักขระทั้งก้อน และเมื่อฝั่งอาแจ็กซ์ทำการรับค่าที่ทำการส่งค่ากลับมาจากเซิร์ฟเวอร์ ก็จะต้องนำสายอักขระ เหล่านั้นมาตัดตำแหน่งที่ต้องการ เพื่อเอาสายอักขระตัวที่ต้องการมาใช้ แต่สำหรับเจสันแล้ว สามารถรับส่งชุดค่าตัวแปรได้ทั้งฝั่งไคลเอนต์ (Client) และฝั่งเซิร์ฟเวอร์ (Server) โดยทั้ง 2 ฝั่งสามารถทำการเข้ารหัสและถอดรหัสโดยใช้เจสันเอนโค้ด (Json Encode) และ เจสันดีโค้ด (Json Decode) เพื่ออ่านค่าตัวแปรเหล่านั้น และจะเรียกใช้งานมันได้อย่างไร ซึ่งปกติแล้วจะอยู่ในรูปแบบของอาเรย์และสำหรับตัวแปรเจสันนั้นไม่จำกัดแค่รับส่งข้อมูลผ่านเว็บเบราว์เซอร์เท่านั้น แต่ยังสามารถนำเจสันไปประยุกต์กับการรับส่งข้อมูลในรูปแบบอื่น ๆ ได้ เช่นการจับเก็บข้อมูลในรูปแบบของ สายอักขระในข้อความหรือการรับส่งผ่านตัวให้บริการเว็บไซต์ (Web Service) ก็สามารถทำได้เช่นเดียวกัน
JSON นั้นใช้ความสัมพันธ์ของภาษาจาวาสคริปต์ แต่ไม่ถูกมองว่าเป็นภาษาโปรแกรม กลับถูกมองว่าเป็นภาษาในการแลกเปลี่ยนข้อมูลมากกว่า ในปัจจุบันมีไลบรารีของภาษาโปรแกรมอื่นๆ ที่ใช้ประมวลผลข้อมูลในรูปแบบ JSON มากมาย
JSON หรือ Java Script Object Notation เป็นวิธีการที่ทำให้ JavaScript แลกเปลี่ยนข้อมูลกับ Server ได้อย่างง่ายดายครับ
รูปแบบของ JSON นั้น อาจทำให้หลายๆ ท่านงงกับมันไม่มากก็น้อยล่ะครับ เช่น บางครั้งทำไมใช้ [] บางครั้งใช้ {} มันมีเหตุผลอะไร มีความหมายอย่างไร

ถ้าจะให้อธิบายรูปแบบเป็นประโยคก็คือ JSON ถูกสร้างขึ้นจากชุดข้อมูลของ literal object notation ใน javascript JSON จะใช้ [] แทน array และใช้ {} แทน hash (หรือ associate array ) แต่ละสมาชิกคั่นด้วย comma (,) และแต่ละ ชื่อสมาชิกคั่นด้วย colon (:)
ยัง งงๆ กันอยู่ใช่มั้ยล่ะครับ
ก่อนอื่นผมอยากให้ท่านมอง JSON ว่าเป็น Array ซะก่อนครับ ซึ่งจริงๆ แล้ว มันก็มีความคล้ายกันอยู่มาก

ลองดูความแตกต่างระหว่าง JSON กับ Array ดูครับ

JSON

var ekanan = {                "firstName": "เอกนันท์",                "lastName": "ขันทอง",                "address":                          {                           "streetAddress": "พระราม2",                           "city": "กรุงเทพฯ",                           "postalCode": "10150"                          },                "phoneNumbers":                               [                                "085-123-4567",                                "02-555-4567"                               ]               }

Array

$ekanan = Array(                 "firstName"=>"เอกนันท์",                 "lastName"=>"ขันทอง",                 "address" =>                             Array(                                   "streetAddress"=>"พระราม2",                                   "city"=>"กรุงเทพฯ",                                   "postalCode"=>"10150"                                  ),                 "phoneNumbers"=>                             Array(                                   "085-123-4567",                                   "02-555-4567"                                  )                )

เมื่อเอามาเปรียบเทียบกันแล้ว รูปแบบนั้นมีความคล้ายคลึงอยู่มาก หลายท่านคงสังเกตุเห็นกันแล้วว่า เราจะใช้ {} ตอนไหน และใช้ [] เมื่อใด
อย่างที่กล่าวมาข้างต้นครับ “JSON จะใช้ [] แทน array และใช้ {} แทน hash (หรือ associate array)”
พูดภาษาชาวบ้านก็คือ
เราจะใช้ {} (ปีกกา) ต่อเมื่อมี Key จับคู่ Value เช่น Array(“streetAddress”=>”พระราม2″,”city”=>”กรุงเทพฯ”,”postalCode”=>”10150″)และจะใช้ [] (ก้ามปู) ต่อเมื่อไม่มี Key จับคู่ Value เช่น Array(“พระราม2″,”กรุงเทพฯ”,”10150″)

วิธีการใช้ JSON ก็ง่ายๆ ครับ

//นำชุดข้อมูล JSON มาเข้า function eval var data = eval( '(' + RemoveChar(ajax.responseText) + ')' ); //วิธีอ้างถึงข้อมูล ก็ง่ายๆ ครับ data.firstName                   จะมีค่าเท่ากับ เอกนันท์ data.address.streetAddress       จะมีค่าเท่ากับ พระราม2 data.phoneNumbers[0]             จะมีค่าเท่ากับ 085-123-4567 data.phoneNumbers[1]             จะมีค่าเท่ากับ 02-555-4567

***ท่านสามารถใช้คำสั่ง json_encode() ใน php เพื่อแปลง array ให้เป็น json ได้ ตัวอย่างเช่น

<?php $arr  = Array(                 "firstName"=>"เอกนันท์",                 "lastName"=>"ขันทอง",                 "address" =>                             Array(                                   "streetAddress"=>"พระราม2",                                   "city"=>"กรุงเทพฯ",                                   "postalCode"=>"10150"                                  ),                 "phoneNumbers"=>                             Array(                                   "085-123-4567",                                   "02-555-4567"                                  )                ); echo json_encode($arr); ?> ผลที่ได้..               {                "firstName": "เอกนันท์",                "lastName": "ขันทอง",                "address":                          {                           "streetAddress": "พระราม2",                           "city": "กรุงเทพฯ",                           "postalCode": "10150"                          },                "phoneNumbers":                               [                                "085-123-4567",                                "02-555-4567"                               ]            }

ยังไงก็หวังว่าบทความนี้จะเป็นประโยชน์สำหรับผู้เริ่มต้นนะครับ
ศึกษาข้อมูลเพิ่มเติมได้ที่ http://www.json.org/