Ionic FrameworkPhoneGap/Cordova

อัพเดต Ionic 2 Beta 6 อัดเต็มความสามารถใหม่ๆ

เรื่องที่เกี่ยวข้อง - Ionic 2, Ionic Framework, PhoneGap/Cordova

ระหว่างที่หลายๆ คนกำลังรอ Angular 2 และ Ionic 2 วันนี้โค้ชพลมีความคืบหน้าใน Beta รุ่นที่ 6 มาฝากครับ

โดยแบ่งเป็น 2 ส่วนคือ

  1. Component และความสามารถใหม่ๆ ที่เพิ่มเข้ามา
  2. และ Component ที่กำลังได้รับการยกเครื่อง

Component และความสามารถใหม่ๆ ใน Ionic 2

ของใหม่มาเยอะทีเดียว เริ่มจาก

Virtual Scroll

  • จำลอง List ที่เลื่อนเติมจำนวนได้เรื่อยๆ (เช่นในแอพ Facebook หรือ Twitter)
  • แสดงข้อมูลเพิ่มที่ละชุด แทนที่การแสดงข้อมูลทั้งหมดใน List (ทางเทคนิคจะกินทรัพยากรกว่ามาก)
  • เพิ่มความ “นุ่มนวล” ในการ Scroll
  • ทีมพัฒนาบอกว่ามีประสิทธิภาพกว่า collection-repeat ซะอีก (คุณพระ!)
  • มาพร้อมกับความสามารถในการปรับแต่ง Section ใน List อย่าง Header และ Footer

Loading Component

conference-app-loading-1024x606.png

  • หลายๆ คนเรียกว่า “หมุนติ้ว” หรือ Loading Icon ปกติใช้ในการแสดงการทำงานของแอพพลิเคชั่น คราวนี้มาในรูปแบบ Component ของ Angular 2
  • โดยปกติจะแสดง Ionic Spinner เพื่อให้กลมกลืนกับระบบที่ทำงานอยู่มากที่สุด
  • สามารถกำหนดเปลี่ยนรูป Spinner (ไอคอนหมุน) เป็นชุดที่ทาง Ionic เตรียมให้ หรือจะใส่ของตัวเองเข้าไปแทนก็ได้

ระบบ Theming

สามารถเพิ่มสีจำพวก base หรือ contrast เข้าไปใน $color map ของ Sass ได้แล้ว

รองรับ Back Button แบบสมบูรณ์

  • เป็นฟีเจอร์ที่หลายๆ คนเรียกร้องใน Ionic 1 (รวมถึงพลด้วย 555)
  • การใช้ Back Button จะไม่ใช่การออกจากแอพอีกแล้ว แต่จะเหมือนกับการทำงานบนแอพ Native นั่นคือจะย้อนไปก่อนหน้าเรื่อยๆ และออกจากแอพในช่วงสุดท้ายแทน

Select Component

Select UI.png

  • สามารถตั้งให้เปิด Action Sheet แทน Alert ได้
  • Action Sheet จะรองรับ 1 ตัวเลือก และมีตัวเลือกได้ไม่เกิน 6 ตัว ถ้าเกินกว่านั้นจะกลายเป็น Alert เหมือนเดิม
  • เพิ่มเข้ามาโดยคุณ @manucorporat (ปรบมือ)

Material Design เป็นค่าเริ่มต้น

  • การเปิดทดสอบบนคอมพิวเตอร์จะใช้ Material Design เป็นหลัก
  • โหมด iOS จะทำงานบนอุปกรณ์ iOS เท่านั้น
  • โหมด Windows Platform จะทำงานบนอุปกรณ์ Windows เท่านั้น

Toast Component

Toast.png

  • ปกติ Toast จะเคยอยู่ในรูปแบบของ Plugin ใน ngCordova
  • ตอนนี้ถูกเพิ่มเข้ามาเป็น Component ใน Ionic 2
  • ขอบคุณ @dmackerman ที่เพิ่มความสามารถนี้เข้ามาใน Ionic 2 เลยครับ

Component และความสามารถที่ตั้งเป้าว่าจะได้รับการปรับปรุง

ในข่าวเดียวกันนี้ ทางทีมพัฒนา Ionic ก็ได้เปิดเผย ว่ามีอีกหลายส่วนที่จะเพิ่มเข้ามา ถึงแม้ว่าจะเผยให้เห็นถึงเวลาที่ต้องใช้ในการพัฒนา แต่ก็น่าตื้นเต้นจริงๆ

Date/Time Input

ถ้ายังจำกันได้ตอนโค้ชพลสอน เราสามารถเรียก Date Time Picker ขึ้นมาโดยใช้ <input type=”date”> ได้ แต่ใน Ionic 2 จะใส่เข้ามาให้ใช้เป็น Component เลย น่าจะสะดวกขึ้นอีกมาก

Swipable Tab

ความสามารถนี้มาจากฝั่ง Material Design ของ Android ครับ ใครใช้ Android รุ่นใหม่ๆ จะสังเกตได้ชัดเจนในแอพ Contacts ว่าเราสามารถ “Swipe” แทนการกดที่ Tab ได้ ซึ่งทางทีมพัฒนากำลังทำตัวนี้อยู่

Popover

แสดงตัวเลือก action ต่างๆ ในแอพ

PopOver Menu iOS.jpg
PopOver ใน iOS

Range Slider

jqm_range-sliders.png
Range Slider ของ JQuery Mobile 

เรามี Slider มาก่อนแล้วใน HTML5 และ JQuery Mobile ซึ่งใน Ioinic 2 จะมีการเพิ่ม Component นี้เข้าไปให้ด้วย

Inset Modals

กล่อง Pop Up คล้ายๆ กับ Alert ซึ่งจะตั้งให้เปิดใช้งานบนหน้าจอขนาดใหญ่

List reorder and delete

list-complex-example.png

ถ้ายังจำกันได้ใน Ionic 1 จะมีความสามารถ Built in การ reorder ลำดับ และลบไอเท็มออกจาก List ด้วย ความสามารถนี้กำลังจะกลับมาใน Ionic 2

(ตอนแรกเห็นหายไป ตกใจแทบแย่ 555)

Chips

components_acux_chips_chipstxticon.png

เป็น UI สำหรับการแสดงข้อมูลขนาดเล็กที่ซับซ้อน ซึ่งมีที่มาจาก Material Design ของ Googe ซึ่งถ้าใครเคยเขียน Email ผ่านระบบ Inbox ของ Google จะคุ้นเคยกับเจ้านี่เป็นอย่างดี

จริงๆ เพิ่มเข้ามาโดยคุณ​ @3dd13 แล้ว แต่ยังไม่มี Document และการปรับ performance ครับ

ส่งท้าย

คำแนะนำของโค้ชพลยังเป็นเช่นเดิม คือลองได้ แต่เพิ่งวางใจเอาไปทำแอพจริงๆ เชียว อย่างที่เคยเล่าให้ฟังใน Beta 3-4

ใครสนใจเรียน Ionic ตั้งแต่ปูพื้นฐานจนสร้างแอพจริงได้ พร้อมอัพเดตเนื้อหาเป็น Ionic 2 คลิกลงทะเบียนเรียนกับผมได้ที่นี่ครับ

 

เริ่มต้นยุค AI ด้วยคอร์สฟรี และพรีเมี่ยม กับพล

หากชอบสิ่งที่พลเล่า เรื่องที่พลสอน สามารถสนับสนุนพลโดยการเข้าเรียนคอร์สออนไลน์ของพลนะคร้าบ

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

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

Privacy Preferences

คุณสามารถเลือกการตั้งค่าคุกกี้โดยเปิด/ปิด คุกกี้ในแต่ละประเภทได้ตามความต้องการ ยกเว้น คุกกี้ที่จำเป็น

Allow All
Manage Consent Preferences
  • Always Active

Save