Kusumoto Blog

[ช่วงเช้า] สรุปสิ่งที่น่าสนใจในงาน Google I/O 2016 Extended Bangkok

Weerayut Hongsa -

ตื่นเช้าวันนี้เพื่อไปร่วมงาน Google I/O 2016 Extended Bangkok ที่จัดที่สยามภาวลัย สยามพารากอน ชั้น 6 โดยในงานจะเป็นการสรุปเนื้อหาจากงาน Google I/O 2016 มาให้ Developer ชาวไทยได้รับทราบกันอย่างเต็มอิ่มกันครับ

ต้องบอกก่อนว่า บทความนี้จะเน้นไปในเรื่องของ Web App เป็นหลักนะครับ เพราะผมตั้งใจจะเข้าฟังใน Session ที่เกี่ยวข้องกับ Web App เป็นหลัก แต่จะมีการหยิบเรื่องของ Android ที่น่าสนใจขึ้นมาพูดคุยบ้างเป็นบางหัวข้อครับ

ในช่วงเช้าจะเป็นการกล่าวในเชิงสรุปสิ่งที่เกิดขึ้นใน Google I/O 2016 ให้ฟังโดยภาพรวมซะส่วนใหญ่ครับ โดยสิ่งที่ถูกพูดถึงใน Google I/O 2016 Extended สรุปเป็นหัวข้อได้ ดังนี้ครับ

  • Android N
  • Android Studio 2.2 Preview
  • Android Wear 2.0 (พูดสรุปสิ่งที่เพิ่มขึ้นมาในช่วงเช้าอย่างเดียว)
  • Progressive Web Apps
  • Firebase for Mobile and Web

ผมขอนำ Slide สรุปสิ่งที่เพิ่มขึ้นมาใหม่ใน Android Wear 2.0 มาแปะไว้ให้ลองอ่านดูครับ เพราะในงานไม่ได้เจาะลึกในเรื่องนี้มาก โดยจะพูดถึงสิ่งที่เพิ่มขึ้นมากว้างๆครับ

ในส่วนของ Android นั้น ผมได้หยิบประเด็นที่น่าสนใจในช่วงเช้ามาพูดให้ฟังบางส่วนกันครับ

Instant App

เป็นความสามารถใหม่ที่น่าสนใจมากๆครับ เพราะเราจะสามารถใช้งาน Android Application ได้ โดยไม่ต้องทำการติดตั้ง Application ลงในเครื่อง แถม Application นั้น ยังเป็น Native อีกด้วย!!! สร้างความสะดวกมากๆให้กับผู้ใช้งาน แต่สำหรับนักพัฒนาอาจจะต้องออกแรงหน่อยครับ เพราะต้อง Build App ออกมาใหม่อีกเวอร์ชัน ตอนนี้ยังทดสอบกันอยู่ครับ

Firebase Plugin for Android Studio 2.2

ได้มีการนำ Plugin Firebase มาใส่เอาไว้ใน Android Studio 2.2 Preview เพื่อให้นักพัฒนาสามารถพัฒนา Android Application ได้ง่ายและสะดวกมากขึ้น

APK Analyzer

เป็นส่วนที่เพิ่มขึ้นมาใหม่ใน Android Studio 2.2 ที่ใช้ในการวิเคราะห์ไฟล์ APK ของ Android Application ว่างมีขนาดไฟล์เท่าไหร่ จำนวน Method ต่างๆมีจำนวนเท่าไหร่ ทำให้เราสามารถวิเคราะห์และแก้ปัญหาที่เกี่ยวกับไฟล์ APK ได้สะดวกขึ้น

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

Progressive Web Apps

เป็นสิ่งที่ทำให้ Web App สามารถทำงานได้ใกล้เคียง App มากๆ แล้วมันเหมือนยังไงหล่ะ?

  • โหลดได้อย่างรวดเร็ว สามารถทำงานได้ในกรณีที่มีปัญหาทางด้านเครือข่าย (เน็ตหลุด,เน็ตกาก)
  • ทำงานได้รวดเร็ว ลื่นไหล ทั้งในส่วน Animation, scalling, nav
  • น่าใช้งานและอยู่รวมกันเป็นหนึ่งเดียว

โดยตัว Progressive Web Apps สามารถแสดงผลได้เหมือน Application ตัวนึงเลยก็เป็นได้ เพราะสามารถตั้งค่าให้ ไม่แสดงผล URL bar, เปลี่ยน splash screen ได้ และที่สำคัญ สามารถทำ Push Notification ได้อีกด้วย (ว๊าวว ยังกะ App แหนะ) และที่สำคัญ สามารถแสดงผลได้สอดคล้องทุก Browser

Service Worker

เป็นส่วนสำคัญของ Progressive Web Apps เลยทีเดียวครับ เพราะเป็นส่วนที่ใช้ในการควบคุมการทำงานของตัว Web App ของเรา ให้เป็น Progressive Web Apps โดยใช้ JavaScript ในการควบคุมครับ (เราจะไปลงลึกระดับเทคนิคในบทความหน้าครับ)

Progressive Web Apps Tools

เป็นเครื่องมือช่วยให้ Web App ของเราเป็น Progressive Web Apps ได้อย่างง่ายดาย โดยมีทั้ง Angular,Polymer และ JavaScript Tools จากทีมพัฒนา Chrome (เราจะไปลงลึกระดับเทคนิคและวิธี Implement ในบทความหน้าครับ)

และในอีกไม่กี่เดือนข้างหน้า ตัว Progressive Web Apps จะกลายเป็น feature หนึ่งใน Ionic ทำให้การพัฒนา app แบบ cross-platform โดย Progressive Web Apps ได้เพียงเขียนโค๊ดไม่กี่บรรทัด

หลังจากนี้ จะเป็น Session "Deep Drive into Progressive Web Apps" เป็นการแนะนำตัว Progressive Web Apps แบบคร่าวๆ โดยคุณ Warat Wongmaneekit ครับ

หลายคนได้ยิน Progressive Web Apps กันมาแล้ว คงนึกว่ามันคงเป็น Framework ตัวนึง หรืออาจจะเป็น Library ตัวนึงหรือเปล่า หรือเป็น Technology อะไรหรือเปล่า คำตอบคือ "ผิดครับ" ตัว Progressive Web Apps เป็น HTML Standard ครับ มันเป็นมาตรฐานที่ถูกกำหนดขึ้น

แล้วเว็บเราเนี่ย ต้องมีอะไรบ้าง ถึงจะเรียบว่า Progressive Web Apps หล่ะ แน่นอนครับ ตัว Progressive Web Apps มีข้อกำหนดของมันครับ ว่าต้องมีอะไรบ้าง ถึงจะเรียกว่า Progressive Web Apps

  • Progressive : ทำงานได้กับผู้ใช้งานทุกคน บน Browser ที่สนับสนุน
  • Responsive : สามารถแสดงผลได้ดีในทุกอุปกรณ์
  • Conectivity independent : ต้องทำงานแบบ Offline หรือ Network ที่ช้าได้ดี
  • App-like : ต้องให้ความรู้สึกเหมือนกำลังใช้งาน App
  • Fresh : ต้อง ใหม่ สด เสมอ
  • Safe : ต้องปลอดภัย และทำงานบน Https เท่านั้น
  • Discoverable : ต้องให้ Search Engine สามารถค้นหาได้
  • Re-engageable : ต้องการสร้างการมีส่วนร่วมง่ายๆ เช่น Push Notification
  • Installable : ต้องอนุญาตให้ผู้ใช้งานวาง Web App ไว้ในหน้าแรก และไม่ต้องติดตั้งผ่าน App Store
  • Linkable : ต้องแบ่งบันได้ง่าย ด้วยการแบ่งปันลิงค์

โดยตัว Progressive Web Apps จะรองรับ Browser ที่เป็นที่นิยมส่วนมากอยู่แล้ว โดยรองรับ Google Chrome, Opera, Firefox (ส่วน Microsoft Edge เคลมว่าจะรองรับในเวอร์ชันหน้า ส่วน Safari ไม่รองรับ)

มาถึงจุดนี้หลายๆท่านของสงสัยว่า ไอ้ Progressive Web Apps เนี่ย มีทำงานอยู่ส่วนไหนกันแน่?? คุณ Warat ได้แยกออกมา 2 มุมมองครับ โดยเป็นมุมมองของผู้ใช้งานและนักพัฒนา ดังรูปด้านล่างครับ

Progressive Web Apps เนี่ย สามารถทำการ Custom ส่วนประกอบต่างๆ ได้เหมือนกับ App ปกติเลยหล่ะครับ โดยส่วนที่สามารถ Custom ได้ มีดังนี้ครับ

  • Splash Screen
  • Address Bar
  • Icon
  • Color
  • Orientation

เมื่อพูดในส่วนแสดงผลไปแล้ว คราวนี้เราก็ต้องพูดถึงส่วนที่ควบคุมการทำงานกันบ้างครับ ส่วนที่ควบคุมการทำงานของ Progressive Web Apps เราจะเรียกว่า Service Worker ครับ ซึ่งเป็น Script ที่ทำงานอยู่เบื้องหลัง Browser คอยตรวจสอบการทำงานของ Webpage และสามารถทำงานเบื้องหลังต่อ เมื่อเว็บๆนั้นถูกปิดตัวลง

คุณ Warat ได้แนะนำ Tools ที่ใช้ทดสอบ Progressive Web Apps ชื่อว่า "Lighthouse"

ช่วงหลัง มีการโชว์การใช้ Progressive Web Apps เชื่อมต่อกับอุปกรณ์ภายนอกผ่าน Bluetooth (ในงานคือหลอดไฟเปลี่ยนสีได้) เพื่อควบคุมอุปกรณ์ภายนอก

หลังจากนั้นก็จบ Session ช่วงเช้าครับ เจอกัน Session ช่วงบ่ายกับอีกบทความ ซึ่งเป็นบทความ codelab ครับ