Misol bilan Ionic Capacitor va Apache Cordova farqi - Gibrid Native Ilovalarning keyingi kelgusi innovatsiyasi

Ionic Capacitor - Progressive Native Web, Mobile va Desktop ilovalarini yaratishda yordam beradigan ochiq manba asosli yangilik. Boshqa tomondan Apache Cordova ilgari PhoneGap qurilmaning tabiiy xususiyatlariga mobil WebView-dan kirish uchun ham xuddi shunday ishlaydi.

Xo'sh, kelajakda ularni boshqasidan ustun qo'yadigan nima?

Apache Cordova aka PhoneGap, bir muncha vaqtdan beri o'sib borayotgan Ion doirasi singari keng jamoatchilik tomonidan qo'llab-quvvatlanmoqda.

Mobil gibrid ona ilovasini yaratish uchun Cordova-dan foydalanadigan dasturchilar nuqtai nazaridan siz Cordova plaginlari kutubxonalaridan foydalanasiz, ular sahna ortida Cordova doirasida (cordova.js / phonegap.js) Android SDK yoki iOS-dan foydalanib dasturingizni quradilar.

Ionic Capacitor yordamida siz biron bir kordova importini ishlatmasdan, hatto cordova.js-ni ishlatmasdan ham ilovani yaratasiz, buning o'rniga @ capacitor / core sifatida import qilingan o'ziga xos plagin ombori. Kondensatorni ionli ramkasiz ham ishlatish mumkin va u orqaga Cordova bilan mos keladi.

Ionic Framework v4-ni boshlaganingizdan beri, siz tanlagan har qanday UI doirasidan foydalanishingiz mumkin - Angular (Default), ReactJS va Vue. Bu ko'pchilik dasturiy ta'minotni ishlab chiqarish sanoatiga, har qanday veb-ishlab chiqaruvchini topishga, gibrid mahalliy ilovalarni yaratish va nashr etish uchun minimal yoki nol o'rganish egri bilan kodlashni boshlashga yordam beradi.

Ionli loyihangizga kondensatorni qanday kiritish mumkin?

ionli boshlash demokapkasi bo'sh

So'ngra,

CD demokap
npm ishga tushirish

Endi kondansatör paketini o'rnating,

npm o'rnatish - @ @ kondensator / cli @ kondensator / yadro

yuqoridagi buyruq ikkita paketni o'rnatadi va uni pack.json ichiga saqlaydi,

+ @ kondensator / cli @ x.x
+ @ kondensator / yadro @ x.x

Kondensator dasturini boshlang,

npx cap tashabbusi dem.appcap com.demoappcap.app

quyida ko'rishingiz kerak, bu o'zgarishi mumkin (Ion beta.17 yordamida & Beta.11 Capacitor bet).

Sizning kapasitör loyihangiz borishga tayyor! 
"Npx cap add" yordamida platformalarni qo'shing:
npx cap add android <=== Android dasturini yaratish uchun
npx cap ios qo'shing <=== iOS ilovasini yaratish uchun
npx cap elektron qo'shing <=== Ish stoli dasturini yaratish uchun

Ushbu misol uchun biz Android-dan foydalanamiz, shuning uchun ishlating,

npx qopqog'ini qo'shish android

Siz ko'rishingiz kerak,

✔ 26.22-larda androidga bog'liqlikni o'rnatish
✔ Gradle-ni 2.55sm-da sinxronlashtirish
✔ 26.31 soniyada qo'shing
✔ veb-aktivlarni www-dan android / app / src / main / aktivlar / jamoat uchun 407.27msm-ga nusxalash
✔ 4.57m da mahalliy ko'prikni nusxalash
✔ capacitor.config.json-ni 1.15ms-ga nusxalash
✔ nusxasi 429.06ms
✔ Android-ning plaginlari 3.31ms-da yangilanadi
Android uchun 0 kondensator plaginlari topildi:
✔ android-ni 21.26ms-da yangilang

O'zingizning manbangizni Android-ga nusxalash

npx kopiya nusxasi

birinchi marta ko'rishingiz kerak

✔ Veb-aktivlarni www-dan android / app / src / main / aktivlar / umumiy 573.78msm-ga nusxalash
✔ Ona ko'prigini nusxasi 1.46 m
✔ capacitor.config.json-ni 1.93ms-ga nusxalash
✔ 594.71ms nusxada nusxa oling
✔ nusxasi 406.91 mk

Kamera plaginlarini qo'shishga imkon beradi,

ochiq /src/app/home/home.page.html


  
    
      ION KAPACITOR DEMO
    
  

  
   Rasmni oling
  

ochiq, /src/app/home/home.page.ts

'@ burchak / yadro' dan {Komponent} ni import qilish;
'@ capacitor / core' dan {Plaginlar, CameraSource, CameraResultType} import qilish;
@Komponent ({
  tanlagich: 'app-home',
  AndozaUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
Uy sahifasi eksport klassi {
olinganPicture: har qanday;
async takePicture () {
    const takePicture = plaginlarni kuting.Camera.getPhoto (
      {
        sifati: 90,
        allowEditing: haqiqiy,
        manba: CameraSource.Camera,
        natija turi: CameraResultType.Uri
      }
    );
 
    this.takenPicture = takePicture.webPath;
   }
}

saqlash va ishlatish,

npm ishga tushirish 
npx qopqoq android

har safar siz har safar siz fayllarni katalogiga ko'chirishingiz kerak, shuning uchun uning android-i biz uchun.

npx cp nusxasi

Ionic va Cordova-dan farqli o'laroq, siz ilovani bu yerdan qurilmaga ishga tushira olmaysiz, o'rnatilgan IDE-ni ochishingiz kerak,

npx qopqog'i ochiq android

Cordova va Capacitor o'rtasidagi farqni tushunish uchun yuqorida turgan manbangiz sizning boshlang'ich nuqtangizdir.

Maxsus IDE-da kodni ochish uchun,

npx qopqog'i ochiq ios // Xcode
npx cap service // PWA - veb-ilovangizni mahalliy veb-serverda oching

Mavjud Ion Framework dasturini Kapasitatorga ko'chirish

CMD yoki Terminal-da loyihangizning ildiziga o'ting va quyida buyruqni yozing

ionli integratsiyalar kondensatorni faollashtiradi

O'zingizning loyihangizda yangi fayl yaratilganligini tekshiring

capacitor.config.json <------- fayl kondensator qo'shgan

Siz qo'llab-quvvatlashingiz kerak bo'lgan har qanday platformani qo'shishni davom ettirishingiz mumkin

Sizning kapasitör loyihangiz borishga tayyor! 
"Npx cap add" yordamida platformalarni qo'shing:
npx cap add android <=== Android dasturini yaratish uchun
npx cap ios qo'shing <=== iOS ilovasini yaratish uchun
npx cap elektron qo'shing <=== Ish stoli dasturini yaratish uchun