Ionic คือ ตอนที่ 6 : Ionic Native

  1. Ionic Native คืออะไร
  2. Ionic Native ทำงานอย่างไร
  3. การใช้ Ionic Native ในโครงการของคุณ
  4. ควบคุมพลังของ Ionic Native
  5. Cordova vs Capacitor

ในการเดินทางของเราในการทำแอพ Ionic และทำแอพมือถือเราได้มาถึงขั้นตอนสำคัญที่เราได้เจาะลึกลงไปใน Ionic Native ซึ่งเป็นส่วนสำคัญของระบบนิเวศของ Ionic Ionic Native เป็นชุดของ wrapper สำหรับ Apache Cordova และปลั๊กอิน Ionic Capacitor ทำให้เพิ่มฟังก์ชัน Native ให้กับแอปพลิเคชัน Ionic ได้ง่ายขึ้น

ในขณะที่เราดำเนินการไปเรื่อยๆ คุณจะเข้าใจถึงพลังโดยธรรมชาติของ Ionic Native และวิธีที่มันช่วยในการทำแอพ Ionic และทำแอพมือถือได้อย่างราบรื่น แต่ก่อนอื่น เรามานิยามกันก่อนว่า Ionic Native คืออะไร

1. Ionic Native คืออะไร

Ionic Native เป็นตัวห่อหุ้ม TypeScript สำหรับปลั๊กอิน Cordova และ Capacitor ช่วยให้นักพัฒนาสามารถรวมฟังก์ชันการทำงานของอุปกรณ์ Native เข้ากับแอปพลิเคชัน Ionic โดยไม่ต้องเจาะลึกความซับซ้อนของโค้ดเนทีฟ มีอินเทอร์เฟซตามคำสัญญาสำหรับฟีเจอร์แอปบนอุปกรณ์เคลื่อนที่กว่า 250 รายการ ช่วยให้นักพัฒนาสามารถใช้เทคโนโลยีเว็บที่คุ้นเคยในขณะที่เข้าถึงความสามารถของอุปกรณ์ Native ที่ทรงพลัง เช่น กล้อง, ตำแหน่งทางภูมิศาสตร์, บลูทูธ และอื่นๆ อีกมากมาย

โดยพื้นฐานแล้ว Ionic Native นำศักยภาพของการพัฒนาแอพมือถือแบบเนทีฟมาสู่นักพัฒนาเว็บโดยเพิ่มความสามารถของพวกเขาในการทำแอพ Ionic และทำแอพมือถือที่มีประสิทธิภาพสูงและเต็มไปด้วยคุณสมบัติ

2. Ionic Native ทำงานอย่างไร

ในการทำแอพ Ionic และทำแอพมือถือ เรามักจะต้องเข้าถึงคุณสมบัติของอุปกรณ์ดั้งเดิม (native) Ionic Native มีตัวห่อหุ้ม TypeScript สำหรับปลั๊กอิน Cordova และ Capacitor ซึ่งมีอินเทอร์เฟซสำหรับฟังก์ชัน Native เหล่านี้ เมื่อคุณเรียกใช้ฟังก์ชันจากปลั๊กอิน Ionic Native ฟังก์ชันนั้นจะสื่อสารกับเลเยอร์เนทีฟของอุปกรณ์และรันโค้ดเนทีฟที่สอดคล้องกัน ผลลัพธ์จะถูกส่งกลับไปยังแอปพลิเคชัน Ionic ของคุณ

ตัวอย่างเช่น หากคุณใช้ปลั๊กอิน Camera เพื่อถ่ายภาพ Ionic Native จะสื่อสารกับแอปพลิเคชันกล้อง Native ของอุปกรณ์ อนุญาตให้คุณถ่ายภาพ จากนั้นจึงส่งคืนข้อมูลรูปภาพไปยังแอป Ionic ของคุณ

3. การใช้ Ionic Native ในโครงการของคุณ

การใช้งาน Ionic Native ในแอปของคุณนั้นตรงไปตรงมา ก่อนอื่น คุณต้องเพิ่มปลั๊กอินที่ต้องการในโครงการของคุณผ่าน npm ตัวอย่างเช่น หากต้องการเพิ่มปลั๊กอิน Camera คุณต้องเรียกใช้คำสั่งต่อไปนี้:

npm install @ionic-native/camera

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

import { Camera, CameraOptions } from '@ionic-native/camera/ngx';

constructor(private camera: Camera) { }

...

takePicture() {
  const options: CameraOptions = {
    quality: 100,
    destinationType: this.camera.DestinationType.FILE_URI,
    encodingType: this.camera.EncodingType.JPEG,
    mediaType: this.camera.MediaType.PICTURE
  }
  
  this.camera.getPicture(options).then((imageData) => {
   // imageData is either a base64 encoded string or a file URI
   // If it's base64 (DATA_URL):
   let base64Image = 'data:image/jpeg;base64,' + imageData;
  }, (err) => {
   // Handle error
  });
}

ด้วยโค้ดเพียงไม่กี่บรรทัด คุณได้เพิ่มฟังก์ชันการทำงานของกล้องเนทีฟลงในแอป Ionic ของคุณแล้ว

4. ควบคุมพลังของ Ionic Native

Ionic Native ครอบคลุมคุณสมบัติของอุปกรณ์มากมาย โดยแต่ละอันมีปลั๊กอินเฉพาะ นี่คือบางส่วนของพวกเขา:

  1. กล้อง : ตามที่แสดงด้านบน ปลั๊กอินกล้องอนุญาตให้ผู้ใช้ถ่ายภาพหรือเลือกรูปภาพจากคลังรูปภาพของอุปกรณ์
  2. Geolocation : ปลั๊กอิน Geolocation ให้พิกัดทางภูมิศาสตร์ปัจจุบันของอุปกรณ์ มีประโยชน์ในกาทำแอพ Ionic และทำแอพมือถือระบุตำแหน่ง
  3. Bluetooth Serial : ปลั๊กอินนี้เปิดใช้งานการสื่อสารแบบอนุกรมผ่าน Bluetooth มักใช้ในแอปพลิเคชัน IoT
  4. พุช : ปลั๊กอินนี้ช่วยให้คุณสามารถรวมการแจ้งเตือนแบบพุชเข้ากับแอปพลิเคชันของคุณ ซึ่งเป็นคุณลักษณะที่สำคัญสำหรับการมีส่วนร่วมของผู้ใช้
  5. การสั่น : ปลั๊กอินการสั่นช่วยให้แอปของคุณควบคุมกลไกการสั่นของอุปกรณ์ ซึ่งมีประโยชน์สำหรับการแจ้งเตือนหรือการตอบกลับแบบสัมผัส

รายการดำเนินต่อไป ครอบคลุมฟังก์ชันต่างๆ เช่น การเข้าถึงปฏิทินของอุปกรณ์ รายชื่อติดต่อ ระบบไฟล์ มาตรวัดความเร่ง และอื่นๆ อีกมากมาย

5. Cordova vs Capacitor

ในขณะที่ Ionic Native รองรับทั้งปลั๊กอิน Cordova และ Capacitor สิ่งสำคัญคือต้องเข้าใจความแตกต่างระหว่างทั้งสอง Cordova หรือที่รู้จักในชื่อ PhoneGap เป็นเฟรมเวิร์กการพัฒนาแอปพลิเคชันมือถือที่มีมาอย่างยาวนานซึ่งเดิมที Ionic พึ่งพา ในทางกลับกัน Capacitor เป็นเฟรมเวิร์กใหม่ที่พัฒนาโดยทีม Ionic

คาปาซิเตอร์ได้รับการออกแบบให้ทันสมัยและยืดหยุ่นกว่า Cordova โดยมีเครื่องมือที่ดีกว่าและโครงสร้างโครงการที่เหมือนเจ้าของภาษามากกว่า แม้ว่าทั้ง Cordova และ Capacitor จะรองรับปลั๊กอินอย่างกว้าง แต่ปลั๊กอิน Ionic Native ที่ใหม่กว่าบางตัวจะใช้ได้กับ Capacitor เท่านั้น


Ionic Native เป็นเครื่องมืออันทรงพลังใน Ionic framework ซึ่งนำเสนอวิธีการที่ง่ายดายในการผสานรวมคุณสมบัติของอุปกรณ์ Native เข้ากับแอปพลิเคชัน Ionic ของคุณ ฟังก์ชันการทำงานที่หลากหลายและไวยากรณ์ตามสัญญาทำให้เป็นทรัพยากรอันล้ำค่าในการเดินทางของคุณในการสทำแอพ Ionic และทำแอพมือถือ

ด้วยการปลดล็อกความสามารถของอุปกรณ์เนทีฟด้วยเทคโนโลยีบนเว็บ Ionic Native ทำให้เส้นแบ่งระหว่างการพัฒนาเว็บและเนทีฟแอพพร่ามัว เป็นผลให้คุณสามารถทำแอพ Ionic และทำแอพมือถือระดับบนสุดโดยไม่จำเป็นต้องมีความรู้มากมายเกี่ยวกับภาษาโปรแกรม Native


ไอออนิก (Ionic) คืออะไร

Ionic Framework คืออะไร และการติดตั้ง
Ionic คือ ตอนที่ 5 : การเชื่อมต่อ API
Ionic คือ ตอนที่ 7 : Ionic Capacitor