รู้จักกับ Chrome Dev Editor เขียนเว็บแอพผ่าน Google Chrome

“Chrome Dev Editor คืออะไรหว่า?”​ วันก่อนแนะนำเรื่อง Google Polymer ไป วันนี้พอดีพี่ต้น เก้ายอดสตูดิโอ แชร์เจ้าแอพตัวนี้มาใน Facebook ตามชื่อมันต้องเป็นตัวเขียน code (โปรแกรมประเภท Text Editor) แน่ๆ

แต่ถ้า Google ทำขึ้นมา มันต้องมีอะไรพิเศษแน่ๆ จะดูวิดีโอของสองผู้สร้าง Sriram Saloop และ Devon Carew เล่าความเป็นมา หรือจะอ่านที่ผมสรุปเอาไว้ก็ได้ครับ

Chrome Dev Editor กับการเขียนโปรแกรมบน Google Chrome App

Chrome Dev Editor ก็คือ Text Editor บน Google Chrome แต่เหตุผลที่มันเกิดขึ้นมา กับความสามารถไม่ธรรมดาเลย

เหตุผลของผู้สร้าง (Sriram) คืออยากพิสูจน์ครับ อยากพิสูจน์ว่าระบบ Chrome App นั้น จะสามารถสร้างโปรแกรมที่พัฒนาแอพขึ้นมาได้หรือเปล่านั่นเอง! ส่วน Devon แต่เดิมคุมทีมภาษา Dart คิดว่าอยากทำให้ Dart สามารถเขียนได้ทั้ง 4 ระบบปฏิบัติการ นั่นคือ Windows, Mac OS X, Linux, และ Chrome Book ก็เลยมาร่วมกับ Sriram ด้วย

ตัวโปรแกรมประกอบไปด้วย 3 ส่วนของเทคโนโลยี Google นั่นคือ

1. Chrome App
2. Dart
3. Google Polymer

Chrome App เว็บแอพที่รันแบบ Native ได้

เปิดตัวกันไปปีกว่าๆ แล้ว สำหรับระบบที่ Google Chrome ตั้งใจรุกเข้าสู่แอพแบบ Native ที่อยู่บนระบบต่างๆ อย่างเช่น Microsoft Office หรือ Mac Office

ให้ลองนึกว่า Google Chrome ที่ทุกคนเคยคิดว่าเป็น Web Browser นั้น สามารถรันแอพพลิเคชั่นที่เขียนด้วย Web แบบออฟไลน์ (ไม่ต้องต่อ Internet) ได้สบายๆ โดยปัจจุบันมี แอพหลายๆ ตัวเข้าไปอยู่ในโครงการเยอะแล้ว

คลิกดูรายชื่อ Chrome App ที่ทำงานแบบ offline ได้ที่นี่

Dart

เป็นภาษาโปรแกรมมิ่งใหม่ สำหรับการพัฒนาแอพ ที่ Google คิดขึ้นมาให้ทำงานบน Chrome Platform โดยเฉพาะ

โดยมีเป้าหมายหลักคือ “แทนที่ Javascript” (เช้ดดดดดดดดดด อ้าปากค้าง)

แต่ก็สนับสนุนการแปลง code ให้เป็น Javascript เพื่อทำงานบน Web Browser อื่นๆ ที่รองรับ HTML5 ได้เหมือนกันครับ

ลักษณะกว้างๆ ของภาษา Dart มีดังนี้

• มีประสิทธิภาพที่เร็วกว่า Javascript (ใช่ซี่ – – )
• เป็น OO (Object Oriented) ดังนั้นคนเขียน Java หรือ .NET มาก่อนจะเรียนรู้ได้ไม่ยาก

Google Polymer

Google Dev Editor มีเหตุผล 3 อย่างที่เลือก Google Polymer มาใช้สร้าง UI ครับ นั่นคือ

• Encapsulate DOM Structure
• Scope CSS
• Create Reusable Component

โดยรวมคือ Google Polymer สามารถแบ่งส่วนต่างๆ ของ Web UI เป็นไฟล์ที่แยกและประกอบใหม่ได้ไม่จำกัด ทำให้การสร้างแอพง่ายขึ้นมาก

ดูรายละเอียดเพิ่มเติมของ Google Polymer ได้จากที่ผมสรุปไว้ที่นี่

ความสามารถของ Chrome Dev Editor ที่เดโมในงาน

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

ผมสรุปมาดังนี้

• ตัว User Interface ใช้ Google Polymer
• มีระบบจัดการ Git และ Package ที่จำเป็นต้องการใช้งาน จากโครงการ Dart (Pub Get)
• มี server ที่สามารถรัน Web application ได้ในตัว
• สามารถทดสอบรัน Chrome App บน Mobile device ได้ ในตัวอย่างใช้ Android
• Chrome App บน Mobile device ใช้ Apache Cordova (PhoneGap) ในการทำงาน Google เข้าร่วมโครงการนี้มาปีกว่าเพื่อเพิ่มประสิทธิภาพในส่วนนี้
• มี debugging tool

Download Chrome Dev Editor

แค่คุณมี Google Chrome ติดตั้งไว้ในเครื่อง ก็พร้อมจะใช้งาน Chrome Dev Editor แล้วครับ คลิกที่นี่ หรือดูวิดีโอแนะนำการติดตั้งและใช้งาน Chrome Dev Tool ที่นี่เลย