งาน Google I/O 2014 ที่ผ่านมา Google ได้เปิดตัวเครื่องมือหลายอย่างเกี่ยวข้องกับการพัฒนาเว็บไซต์และเครื่องมือต่างๆ เกี่ยวกับ Google Chrome เครื่องมือที่น่าสนใจคงหนีไม่พ้น Chrome Dev Editor ซึ่งเป็น Edit และ Generator ในตัวเเดียวกัน คือ ไม่ต้องกังวลเรื่อง Bower หรือ Yeoman หรือการใช้ Command Line อีกต่อไป เพราะ CDE สามารถสร้าง Boilerplate ของ Web Application ให้ได้ง่ายๆ อีกทั้งยังเชื่อมต่อกับ Polymer Designer ด้วยทำให้คุณมีเครื่องมือ Drag & Drop ในการใช้งาน Polymer ได้ง่ายขึ้นไปอีก สำหรับการ Depoly เป็น Chrome Application ก็ทำได้เลยง่ายๆ นอกจากนี้ยังสามารถ Deploy ไปเป็น Mobile Application ได้อีกด้วย

สำหรับการติดตั้ง CDE สามารถติดตั้งได้จาก Chrome Web Store ดังนี้


Continue reading

Polymer เป็น Web Framework ใหม่ที่ใช้การพัฒนาเว็บไซต์โดยใช้ component ต่างๆ ประกอบเข้าด้วยกัน โดยเครื่องมือหลักๆ ที่ใช้ในในการสร้างโครงการใหม่คือ Bower และการเพิ่ม component เพื่อเสริมความสามารถใหม่ๆ ก็ไม่พ้น Bower แต่ Bower เองทำหน้าที่เพียงแค่ติดตั้ง component ที่เราต้องการเท่านั้น ไม่ได้มี Boilerplate มาให้แต่อย่างใด เราสามารถใช้ Yeoman เข้ามาแก้ปัญหานี้ได้ โดยใช้ Polymer Generator

ซึ่งมีผู้พัฒนา Polymer Generator ไว้หลายตัว ที่จะมาแนะนำวันนี้เป็น Official Generator ชื่อ Polymer ให้ติดตั้ง Generator เพิ่มเติมดังนี้

sudo npm install -g generator-polymer


Continue reading

Polymer เป็น Platform Web Component ที่พัฒนาโดย Google ที่รวม Component ที่จำเป็นต้องใช้ในการพัฒนา Web และเครื่องมือในการผนวกบริการต่างๆ ของ Google เข้ามาใช้ได้ง่ายมากขึ้น ผ่านทาง Component ที่มีให้ นอกจากนี้ยังมี Polymer Core Component สำหรับ UI ต่างๆ พร้อมรองรับการพัฒนา Web แบบ Responsive ด้วย Polymer ในแนวคิดการออกแบบ แบบ Material Design ซึ่งถูกใช้ในงานออกแบบ Android Application ใน Android 5.0 ด้วย

โดยปกติการใช้งาน Polymer จะใช้งานผ่าน Bower เป็นหลัก แล้วถึงจะแก้ไขโค้ดของหน้า Web ที่เราจ้องการ แต่ Polymer มีเครื่องมือใหม่เรียกว่า Designer ช่วยให้คุณใช้งาน Polymer ได้ง่ายมากขึ้น ซึ่ง Polymer Designer สามารถเรียกใช้งานผ่านทางหน้าเว็บไซต์ของโครงการได้ หรือจะเอา source code มาติดตั้งและใช้งานภายในหน่วยงานก็ได้เช่นกัน มาลองใช้งานผ่านเว็บกันก่อน


Continue reading

Google นำเสนอการออกแบบ Application ใหม่ ชื่อ Material Design และจะถูกใช้งานบน Android L ภายใต้แนวคิดการออกแบบในลักษณะนี้ทำให้ Application อยู่ในรูปแบบ responsive มากขึ้น สามารถแสดงผลได้บนทุกๆ อุปกรณ์ และที่สำคัญคือมี Animation อัตโนมัติแทบจะทุกๆ widget เลย แนวคิดแบบนี้สามารถนำเอามาปรับใช้กับการพัฒนา Mobile App หรือ Web App ได้ ไม่จำเป็นต้องเป็น Android App นะครับ ในส่วนของ Web App ทาง Google มีโครงการ Polymer เป็น platform ในการพัฒนา Web App ในรูปแบบของ Web Component สามารถใช้งาน Meterial Design ได้เลย ผ่าน Component ต่างๆ ที่มีให้ สำหรับท่านที่สนใจ Material Design ก็ไปศึกษาข้อมูลเพิ่มเติมกันได้ครับ

เรามาลองสร้าง Layout ในแบบ Material Design โดยใช้ Polymer กันครับ อันดับแรกต้องมี Polymer กันก่อน วิธีง่ายที่สุดคือการใช้ paper element ในรูปแบบ zip file แต่วิธีที่ Google แนะนำคือใช้ Bower ติดตั้ง component ที่จำเป็นต้องใช้จะทำให้ Web App ที่ได้มีขนาดเล็ก เราจะมาใช้วิธีที่ง่ายที่สุดแล้วกันครับ เข้าไปที่ Getting The Code คลิกที่ Get The Paper Elements จากนั้นจะมี dialog ขึ้นมาให้เราเลือกว่าเราจะดาวน์โหลดจากที่ไหน ให้เลือก Download Zip เมื่อได้ไฟล์แล้ว ให้แตกไฟล์นี้ลงในไดเรคทอรีของโปรเจค

mkdir hello-polymer

cd hello-polymer

curl -o elements.zip https://bowerarchiver.appspot.com/archive?paper-elements=Polymer/paper-elements

unzip elements.zip


Continue reading