Ionic (เฟรมเวิร์กสำหรับพัฒนาแอปพลิเคชันบนมือถือ)

ไอออนิก
ผู้เขียนต้นฉบับ	ดริฟตี้[ 1 ]
นักพัฒนา	เอาท์ซิสเต็มส์
ปล่อย	2013
เวอร์ชันเสถียร	8.8.11 [ 2 ]  / 17 มิถุนายน 2026 ( 17 มิถุนายน 2569 )
เขียนเป็น	TypeScript , JavaScript
พิมพ์	เฟรมเวิร์กซอฟต์แวร์
ใบอนุญาต	ใบอนุญาต MIT
เว็บไซต์	ionicframework.com​
ที่เก็บข้อมูล	github.com/ionic-team/ionic-framework​​​

Ionicเป็นชุดเครื่องมือ UI แบบโอเพนซอร์สสำหรับการสร้างแอปพลิเคชันข้ามแพลตฟอร์มบนมือถือ เว็บ และเดสก์ท็อป โดยใช้เทคโนโลยีเว็บ เช่น HTML, CSS และ JavaScript/TypeScript โดยมีชุดส่วนประกอบ UI ที่ออกแบบไว้ล่วงหน้าและเครื่องมือสำหรับการสร้างแอปพลิเคชันแบบโต้ตอบคุณภาพสูง Ionic ถูกสร้างขึ้นครั้งแรกในฐานะSDK แบบ โอเพน ซอร์สที่สมบูรณ์แบบ สำหรับการพัฒนาแอปพลิเคชันมือถือแบบไฮบริด โดย Max Lynch, Ben Sperry และ Adam Bradley จาก Drifty Co. ในปี 2013 ^{[ 3 ]}เวอร์ชันดั้งเดิมเปิดตัวในปี 2013 และสร้างขึ้นบนAngularJSและApache Cordovaอย่างไรก็ตาม เวอร์ชันล่าสุดได้รับการสร้างใหม่เป็นชุดWeb Componentsโดยใช้ StencilJS ทำให้ผู้ใช้สามารถเลือกเฟรมเวิร์กส่วนติดต่อผู้ใช้ใดก็ได้ เช่นAngular , ReactหรือVue.jsนอกจากนี้ยังอนุญาตให้ใช้ส่วนประกอบ Ionic โดยไม่ต้องใช้เฟรมเวิร์กส่วนติดต่อผู้ใช้เลย^{[ 4 ​​]} Ionic มีเครื่องมือและบริการสำหรับการพัฒนาแอปพลิเคชันมือถือแบบไฮบริด เดสก์ท็อป และเว็บแอปพลิเคชันแบบก้าวหน้า โดย อิงจากเทคโนโลยีและแนวปฏิบัติการพัฒนาเว็บสมัยใหม่ โดยใช้เทคโนโลยีเว็บ เช่นCSS , HTML5และSassโดยเฉพาะอย่างยิ่ง สามารถสร้างแอปพลิเคชันมือถือด้วยเทคโนโลยีเว็บเหล่านี้ จากนั้นเผยแพร่ผ่านร้านค้าแอปเน ทีฟ เพื่อติดตั้งบนอุปกรณ์โดยใช้Cordovaหรือ Capacitor ^{[ 5 ]}

Ionic ถูกสร้างขึ้นโดย Drifty Co. ในปี 2013 หลังจากปล่อยเวอร์ชันอัลฟ่าของเฟรมเวิร์กในเดือนพฤศจิกายน 2013 เวอร์ชันเบต้า 1.0 ก็ถูกปล่อยออกมาในเดือนมีนาคม 2014 เวอร์ชันสุดท้าย 1.0 ในเดือนพฤษภาคม 2015 และเวอร์ชัน 2.0 หลายเวอร์ชันในปี 2016 ^{[ 6 ]}

ตั้งแต่เดือนมกราคม 2019 Ionic 4 อนุญาตให้นักพัฒนาเลือกใช้เฟรมเวิร์กอื่นนอกเหนือจาก Angular เช่น React, Vue.js และเว็บคอมโพเนนต์^{[ 7 ]} Ionic 4 สร้างขึ้นโดยใช้ StencilJS Ionic ถูกซื้อกิจการโดยOutSystemsในเดือนพฤศจิกายน 2022 ^{[ 8 ]}

Ionic ใช้ ปลั๊กอิน Cordovaและ Capacitor ในช่วงหลังๆ เพื่อเข้าถึงคุณสมบัติของระบบปฏิบัติการโฮสต์ เช่น กล้อง GPS ไฟฉาย ฯลฯ^{[ 9 ] [ 10 ] [ 11 ]}ผู้ใช้สามารถสร้างแอปของตนเองได้ จากนั้นสามารถปรับแต่งแอปเหล่านั้นสำหรับAndroid , iOS , Windows , เดสก์ท็อป (ด้วยElectron ) หรือเบราว์เซอร์สมัยใหม่ได้^{[ 12 ]} Ionic อนุญาตให้สร้างและปรับใช้แอปโดยการห่อหุ้มเครื่องมือสร้าง Cordova หรือ Capacitor ด้วยเครื่องมือบรรทัดคำสั่ง 'ionic' ที่เรียบง่าย^{[ 13 ]}

Ionic ประกอบด้วยส่วนประกอบสำหรับมือถือ การจัดรูปแบบตัวอักษร รูปแบบการโต้ตอบ และธีมพื้นฐานที่ขยายได้^{[ 14 ]}

Ionic ใช้ Web Components เพื่อจัดเตรียมส่วนประกอบที่กำหนดเองและวิธีการโต้ตอบกับส่วนประกอบเหล่านั้น ส่วนประกอบหนึ่งคือ virtual scroll ซึ่งช่วยให้ผู้ใช้สามารถเลื่อนดูรายการนับพันรายการได้โดยไม่กระทบต่อประสิทธิภาพการทำงาน ส่วนประกอบอีกอย่างหนึ่งคือ tabs ซึ่งสร้างอินเทอร์เฟซแบบแท็บพร้อมรองรับการนำทางแบบเนทีฟและการจัดการสถานะประวัติ^{[ 15 ]}

นอกจาก SDK แล้ว Ionic ยังให้บริการที่นักพัฒนาสามารถใช้เพื่อเปิดใช้งานคุณสมบัติต่างๆ เช่น การปรับ ใช้โค้ดการสร้างอัตโนมัติ Ionic ยังมี IDEของตัวเองที่เรียกว่า Ionic Studio แต่ได้ยกเลิกไปในปี 2020 ^{[ 16 ]}

Ionic ยังมีอินเทอร์เฟซบรรทัดคำสั่ง (CLI)สำหรับสร้างโปรเจกต์ CLI ยังช่วยให้นักพัฒนาสามารถเพิ่มปลั๊กอิน Cordova และแพ็กเกจ front-end เพิ่มเติม เปิดใช้งานการแจ้งเตือนแบบพุช สร้างไอคอนแอปและหน้าจอสแปลชและสร้างไบนารีเนทีฟได้^{[ 17 ]}

สำหรับ Android, Ionic รองรับ Android 4.4 ขึ้นไป สำหรับ iOS, Ionic รองรับ iOS 10 ขึ้นไป^{[ 18 ]} Ionic 2 รองรับ Universal Windows Platform สำหรับการสร้างแอปWindows 10 ^{[ 19 ]} Ionic Framework ซึ่งใช้Angular.jsรองรับแอปBlackBerry 10 ^{[ 20 ]}

แอป Ionic ทำงานโดยใช้โค้ดเนทีฟและโค้ดเว็บผสมกัน ทำให้สามารถเข้าถึงฟังก์ชันเนทีฟได้อย่างเต็มที่หากจำเป็น โดยส่วนใหญ่ของ UI ของแอปสร้างขึ้นด้วยเทคโนโลยีเว็บมาตรฐาน Ionic ใช้คุณสมบัติการเร่งความเร็วฮาร์ดแวร์เนทีฟที่มีอยู่ในเบราว์เซอร์ (เช่น แอนิเมชัน CSS) และเพิ่มประสิทธิภาพการเรนเดอร์ (หลีกเลี่ยง การจัดการ DOM ที่มีราคาแพง ) Ionic ใช้การเปลี่ยนผ่านและการแปลง CSS สำหรับแอนิเมชันเพื่อใช้ประโยชน์จากGPUและเพิ่มเวลาประมวลผลให้สูงสุด^{[ 21 ]}

Ionic เป็น^{โมดูล} npmและต้องการNode.js [ ^{22 ]}

• เฟรมเวิร์กไอออนิก
• Cordova กับ Capacitor: การเปรียบเทียบในการสร้างแอปพลิเคชัน Ionic Framework