ในบทความถัดไปเราจะมาดู Ionic Framework และวิธีติดตั้งบน Ubuntu 20.04 เฟรมเวิร์กนี้จะอนุญาตให้ผู้ใช้ใช้งานโปรเจ็กต์กับเฟรมเวิร์กอื่นๆ เช่น Angular. Ionic เป็น SDK โอเพ่นซอร์สเต็มรูปแบบสำหรับการพัฒนาแอพมือถือไฮบริดที่สร้างโดย Max Lynch, Ben Sperry และ Adam Bradley ของ Drifty Co. ในปี 2013 เวอร์ชันดั้งเดิมเปิดตัวในปี 2013 และสร้างขึ้นบน AngularJS และ Apache Cordova อย่างไรก็ตาม เวอร์ชันล่าสุดถูกสร้างขึ้นใหม่เป็นชุดของส่วนประกอบเว็บ ซึ่ง อนุญาตให้ผู้ใช้เลือกทำโปรเจ็กต์ Angular, React หรือ Vue.js. นอกจากนี้ยังอนุญาตให้ใช้ส่วนประกอบ Ionic โดยไม่ต้องมีเฟรมเวิร์กส่วนต่อประสานกับผู้ใช้
อิออน จัดเตรียมเครื่องมือและบริการเพื่อพัฒนาไฮบริดเดสก์ท็อป โมบายล์ และโปรเกรสซีฟเว็บแอปพลิเคชันตามแนวทางปฏิบัติและเทคโนโลยีการพัฒนาเว็บที่ทันสมัย. สำหรับสิ่งนี้ เทคโนโลยีเว็บเช่น CSS, HTML5 และ Sass สามารถใช้ได้ ด้วยเฟรมเวิร์กนี้ เราสามารถพัฒนาแอปพลิเคชันด้วยเทคโนโลยีเว็บที่เข้ากันได้กับ iOS, Android หรือเว็บเอง นอกจากนี้ยังมีเครื่องมือ CLI ที่มีประสิทธิภาพซึ่งเราจะสามารถจัดการและสร้างโครงการได้
ลักษณะทั่วไปของอิออน
- กรอบนี้ฟรีและโอเพ่นซอร์ส. มีไลบรารีของเครื่องมือและส่วนประกอบอินเทอร์เฟซผู้ใช้ที่ปรับให้เหมาะกับอุปกรณ์พกพา เพื่อสร้างแอปพลิเคชันที่รวดเร็วและโต้ตอบได้สูง
- อิออนใช้คอร์โดวา และปลั๊กอินล่าสุดเพื่อเข้าถึงฟังก์ชันระบบปฏิบัติการโฮสต์ เช่น GPS กล้อง ไฟฉาย ฯลฯ
- ผู้ใช้สามารถสร้างแอพและปรับแต่งสำหรับ Android, iOS, Windows, เดสก์ท็อป (พร้อม Electron) หรือเบราว์เซอร์ที่ทันสมัย.
- อิออน รวมถึงชิ้นส่วนที่เคลื่อนไหว ตัวพิมพ์ หรือธีมพื้นฐานที่ขยายได้.
- เมื่อใช้ ส่วนประกอบของเว็บ, Ionic จัดเตรียมส่วนประกอบและวิธีการกำหนดเองเพื่อโต้ตอบกับพวกมัน หนึ่งในองค์ประกอบเหล่านั้น คือ การเลื่อนเสมือน ทำให้ผู้ใช้สามารถเลื่อนดูรายการนับพันรายการโดยไม่กระทบต่อประสิทธิภาพการทำงาน อีกองค์ประกอบหนึ่งคือแท็บสร้างอินเทอร์เฟซแบบแท็บที่สนับสนุนการนำทางแบบเนทีฟและการจัดการสถานะประวัติ
- นอกจาก SDK แล้ว Ionic ยังมี นักพัฒนาบริการสามารถใช้เพื่อเปิดใช้งานคุณสมบัติต่างๆ ได้เช่น การใช้งานโค้ดหรือบิลด์อัตโนมัติ
- ด้วย ให้ IDE ของตัวเองที่เรียกว่า Ionic Studio.
- นอกจากนี้ยังมีอินเทอร์เฟซของ บรรทัดคำสั่ง (CLI) เพื่อสร้างโครงการ. CLI ยังอนุญาตให้นักพัฒนาเพิ่มปลั๊กอินและแพ็คเกจ Cordova เพิ่มเติม เปิดใช้งานการแจ้งเตือนแบบพุช สร้างไอคอนแอพ หน้าจอเริ่มต้น และสร้างไบนารีดั้งเดิม
ติดตั้ง Ionic บน Ubuntu 20.04
การติดตั้งเฟรมเวิร์กนี้ค่อนข้างง่าย ในการเริ่มต้นเราเพียงแค่เปิดเทอร์มินัล (Ctrl + Alt + T) และ อัปเดตแพ็คเกจระบบของเรา:
sudo apt update; sudo apt upgrade
จากนั้นเราจะ ติดตั้งแพ็คเกจที่จำเป็น. ในเทอร์มินัลเดียวกันเราจะต้องใช้คำสั่ง:
sudo apt install curl gnupg2 wget git
ขั้นตอนต่อไปคือ ติดตั้ง NodeJS. ตัวอย่างนี้ฉันได้ทดสอบกับ version 14.x. ในการติดตั้งเวอร์ชันนี้ เราจะเริ่มต้นด้วยการเพิ่มที่เก็บที่จำเป็น:
curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -
จากนั้นเราก็ทำได้ ติดตั้ง NodeJS เรียกใช้คำสั่งอื่นนี้:
sudo apt install nodejs
อิออนต้องการ Apache Cordova. ควรชี้แจงว่านี่คือชุดของ API ของอุปกรณ์ที่อนุญาตให้นักพัฒนาแอปพลิเคชันมือถือโดยใช้ JavaScript เพื่อเข้าถึงฟังก์ชันดั้งเดิมของอุปกรณ์ เช่น กล้องหรือมาตรความเร่ง
หลังจากติดตั้ง NodeJS เราก็สามารถ ติดตั้งคอร์โดวา วิ่ง:
sudo npm install -g cordova
ณ จุดนี้ เราสามารถไปยัง ติดตั้ง Ionic โดยใช้ npm:
sudo npm i -g @ionic/cli
หลังจากการติดตั้งเราสามารถทำได้ ตรวจสอบเวอร์ชันที่ติดตั้งด้วยคำสั่ง:
ionic -v
ตัวอย่างการใช้งาน
หากต้องการทราบว่าการติดตั้งดำเนินไปอย่างถูกต้องหรือไม่ เราสามารถเริ่มต้นด้วยการสร้างแอปพลิเคชันตัวอย่างเล็กๆ การทำเช่นนี้เราจะต้อง .เท่านั้น เรียกใช้คำสั่งต่อไปนี้ สร้างตัวอย่าง:
ionic start
เมื่อรันคำสั่งนี้ คุณจะต้องกำหนดประเภทของโครงการที่คุณต้องการสร้าง. สำหรับตัวอย่างนี้ ฉันเลือก Angular นอกจากนี้ คุณจะต้องตั้งชื่อโปรเจ็กต์ของคุณและเลือกเทมเพลต ทั้งหมดนี้คุณจะต้องเลือกจากหน้าจอที่คล้ายกับต่อไปนี้:
หลังจากตั้งค่าแล้ว โฟลเดอร์จะถูกสร้างขึ้นด้วยชื่อที่เราตั้งให้กับโครงการ เข้าถึงโฟลเดอร์นี้เพื่อดูโครงสร้างโครงการ.
ไปยัง ดูโครงการในเทอร์มินัลเดียวกันเราจะดำเนินการคำสั่งอื่นนี้:
ionic serve --host 0.0.0.0 --port 8000
ด้วยคำสั่งนี้ เราจะอนุญาตให้โฮสต์ใด ๆ เข้าถึงพอร์ต 8000.
เมื่อทุกสิ่งที่คุณต้องการถูกโหลด เปิดเว็บเบราว์เซอร์ของคุณและไปที่ http://localhost:8000 o http://IP-de-tu-servidor:8000 และคุณจะเห็นหน้าตัวอย่างที่เพิ่งสร้างขึ้น.
Ionic เป็นเฟรมเวิร์กที่ทันสมัยที่ช่วยให้เราพัฒนาแอปพลิเคชันข้ามแพลตฟอร์มได้ด้วยวิธีที่เรียบง่ายและสง่างาม สามารถรับได้ ข้อมูลเพิ่มเติมและเอกสารเกี่ยวกับการติดตั้งและการใช้งานใน เว็บไซต์โครงการ.