Ionic: nədir, framework arxitekturası və hibrid tətbiqlərin hazırlanması

Ionic nədir?

Ionic — HTML, CSS və JavaScript istifadə edərək kross-platformalı tətbiqlər yaratmaq üçün açıq mənbəli platformadır. Layihə 2013-cü ildə Drifty Co. şirkəti tərəfindən başladılmış və o vaxtdan jQuery Mobile əlavəsindən Angular, React və Vue dəstəyi olan tamhüquqlu frameworka qədər inkişaf etmişdir.

Ionic-in əsas ideyası ondan ibarətdir ki, veb texnologiyalarını bilən tərtibatçılar Java, Kotlin və ya Swift öyrənmədən mobil tətbiqlər yarada bilsinlər. Tətbiqin görünüşü Material Design və iOS Human Interface Guidelines-ə uyğun hazır komponentlər sayəsində mümkün qədər yerliyə yaxındır.

2024-cü il üçün Statista məlumatlarına görə, Ionic kross-platformalı framework bazarının təxminən 17%-ni tutur, Flutter və React Native-dən geri qalır, lakin Cordova və Xamarin-i qabaqlayır. Framework inkişaf sürəti və platformalar arasında kodu təkrar istifadə etmək imkanı vacib olan startaplar və şirkətlər tərəfindən seçilir.

Ionic arxitekturası: WebView, Capacitor və plaginlər

Ionic arxitekturası üç təbəqə üzərində qurulur: interfeysin göstərilməsi üçün WebView, JavaScript və yerli kod arasında körpü üçün Capacitor və cihazın aparat imkanlarına giriş üçün plagin sistemi.

WebView-in Ionic-də rolu

WebView — tətbiq daxilində veb səhifəni göstərən əməliyyat sisteminin yerli komponentidir. Ionic iOS-da WKWebView, Android-də isə Android System WebView istifadə edir. Framework WebView-ə Angular, React və ya Vue-də tək səhifəli tətbiq (SPA) yükləyir ki, bu da istifadəçi interfeysini təşkil edir.

Google Chrome Team (2024) məlumatlarına görə, müasir WebView-lər ES2023, CSS Grid, Flexbox və WebGL-in bütün imkanlarını dəstəkləyir ki, bu da gündəlik ssenarilərdə performans itkisi olmadan mürəkkəb interfeyslər yaratmağa imkan verir.

Capacitor abstraksiya təbəqəsi kimi

Capacitor — Cordova-nı əvəz edən Ionic komandasından yerli icra mühitidir. O, cihazın yerli funksiyalarını çağırmaq üçün vahid JavaScript API təqdim edir: kamera, geolokasiya, akselerometr, fayl sistemi və biometriya.

Cordova-dan fərqli olaraq, Capacitor körpü üçün xüsusi URL protokolundan istifadə etmir — o, birbaşa WebView-ə quraşdırılmış JavaScript Bridge vasitəsilə işləyir. Ionic Team (2024) testlərinə görə, bu, yerli API-lərin tez-tez çağırılmasında performansı 30% artırır.

Plagin sistemi

Capacitor-da plaginlər — Swift və Kotlin-də yerli kitabxanalardır ki, onlar icra mühitində qeydiyyatdan keçir və JavaScript-dən əlçatan olur. Daxil dəstə kameraya, geolokasiyaya, bildirişlərə, yaddaşa və şəbəkəyə giriş üçün 40-dan çox plagin daxildir.

Standart funksionallıq kifayət etmədikdə tərtibatçı öz plaginini yaza bilər. Bunun üçün @PluginMethod annotasiyası ilə qeyd olunmuş metodları olan CapacitorPlugin-dən miras alan sinif yaradılır. Plagin avtomatik olaraq hər iki platforma üçün kompilyasiya olunur.

Ionic-in yerli frameworklərlə müqayisəsi

Ionic və yerli alətlər arasında seçim edərkən başa düşmək vacibdir ki, Ionic animasiya performansı və mürəkkəb qrafikaya görə SwiftUI və ya Jetpack Compose ilə rəqabət aparmır, lakin inkişaf sürəti və təkrar istifadə olunan kodun həcmində üstünlük qazanır.

Güclü qrafika, xüsusi animasiyalar və ya AR funksiyaları olan tətbiqlər üçün yerli alətlər üstünlük təşkil edir. CRUD tətbiqləri, onlayn mağazalar və korporativ portallar üçün Ionic əhəmiyyətli dərəcədə aşağı inkişaf xərcləri ilə kifayət qədər performans təmin edir.

Backlinko (2025) qeyd edir ki, Ionic-də hibrid tətbiqlər işə salındıqda yerli tətbiqlərdən orta hesabla 15-20% yavaş yüklənir, lakin gündəlik istifadə ssenarilərində fərq istifadəçi üçün nəzərə çarpmır.

Angular ilə Ionic kod nümunələri

Angular-da Ionic tətbiqinin əsas strukturunu nəzərdən keçirək. Aşağıdakı kod siyahı və naviqasiya ilə səhifənin yaradılmasını nümayiş etdirir.

import { Component } from '@angular/core';
import { IonContent, IonList, IonItem } from '@ionic/angular/standalone';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [IonContent, IonList, IonItem],
  template: `
    <ion-content>
      <ion-list>
        <ion-item *ngFor="let item of items">
          {{ item.name }}
        </ion-item>
      </ion-list>
    </ion-content>
  `
})
export class HomePage {
  items = [{ name: 'Birinci element' }, { name: 'Ikinci element' }];
}

Bu nümunədə komponent Angular 17+ standalone API-dən istifadə edir ki, bu da qurulmanı sadələşdirir və paketin ölçüsünü azaldır. *ngFor direktivi elementlər siyahısını göstərir, IonItem isə hər bir elementi platformaya uyğun avtomatik stilləşdirir.

Capacitor vasitəsilə kameraya giriş üçün yerli plaginin idxalı və icazələrin işlənməsi ilə aşağıdakı nümunədən istifadə olunur:

import { Camera, CameraResultType } from '@capacitor/camera';

async takePhoto() {
  const image = await Camera.getPhoto({
    resultType: CameraResultType.DataUrl,
    quality: 90
  });
  this.photo = image.dataUrl;
}

getPhoto metodu avtomatik olaraq kameraya giriş icazəsi tələb edir — permissions üçün ayrıca kod tələb olunmur. Capacitor istifadəçinin razılığını platforma səviyyəsində emal edir və şəkli base64 və ya fayl URL formatında qaytarır.

Ionic-də UI-komponentlər və temalama

Ionic istifadəçinin platformasına uyğunlaşan 50-dən çox hazır UI-komponent təqdim edir. Eyni IonButton iOS-da sistem Apple düyməsi kimi, Android-də isə Material Design düyməsi kimi görünür, heç bir kod dəyişikliyi tələb olunmur.

Adaptiv stillər və temalama

Hər bir Ionic komponenti qlobal temada müəyyən edilmiş CSS dəyişənlərinə reaksiya verir. Tərtibatçı rəngləri, yuvarlaqlıqları, boşluqları və şriftləri --ion-color-primary, --ion-border-radius və digər dəyişənlər vasitəsilə dəyişə bilər.

Ionic Framework Docs (2025) məlumatlarına görə, temanı tam fərdiləşdirmək üçün brendin əsas rənglərinə uyğun gələn 6 CSS dəyişənini dəyişmək kifayətdir. Qalan komponentlər dəyərləri avtomatik miras alır.

:root {
  --ion-color-primary: #3880ff;
  --ion-color-secondary: #3dc2ff;
  --ion-border-radius: 12px;
  --ion-font-family: 'Inter', sans-serif;
}

Naviqasiya və marşrutlaşdırma

Ionic yerli UINavigationController və FragmentManager-in davranışını təqlid edən öz IonRouter-u ilə yığın naviqasiyasından istifadə edir. Səhifələr arasında keçid animasiyaları CSS-də müəyyən edilib və JavaScript kodu tələb etmir.

Marşrutlaşdırma Angular Router ilə əlavə IonNavLink istifadə edərək animasiyalı keçidlər üçün qurulur. Tablar (Tabs) və yan menyu (Menu) dəstəyi frameworka daxildir və deklarativ şəkildə konfiqurasiya olunur.

Ionic tətbiqinin qurulması və nəşri

Ionic tətbiqinin qurulma prosesi üç mərhələdən ibarətdir: veb resurslarının kompilyasiyası, Capacitor vasitəsilə yerli qabığın yaradılması və Xcode və ya Android Studio ilə APK/IPA-nın qurulması. Ionic CLI bütün addımları bir əmrlə avtomatlaşdırır: ionic build && npx cap sync.

Capacitor iOS və Android üçün ayrıca layihələr yaradır — ios/ və android/ qovluqlarında. Tərtibatçı onları Xcode və ya Android Studio-da aça, son qurulmanı həyata keçirə, xüsusi plaginlər əlavə edə və ya App Store-a uyğun parametrləri konfiqurasiya edə bilər.

Google Play və App Store-da nəşr üçün platformaların standart alətlərindən istifadə olunur. Ionic tətbiqin ölçüsünə və ya istifadə olunan API-lərə məhdudiyyət qoymur — son qurulma yerli qabığı olan tamhüquqlu mobil tətbiqdir. Hər qurulma Xcode və Android Studio-nun standart boru kəmərlərindən keçir ki, bu da tətbiq mağazalarının siyasətlərinə uyğunluğu təmin edir.

Buraxılış prosesi ikili faylın tərtibatçı sertifikatları ilə imzalanması və mağazada metadata konfiqurasiyasını əhatə edir. Fastlane — Ionic tətbiqlərinin yerləşdirilməsini avtomatlaşdırmaq üçün məşhur alətdir və testdən nəşrə qədər bütün mərhələləri dəstəkləyir.

• Live Reload — kod dəyişiklikləri ionic serve --lab vasitəsilə cihazda dərhal göstərilir
• Ionic Appflow — avtomatik qurulma və yerləşdirmə ilə CI/CD üçün bulud xidməti
• Capacitor Sync — veb resurslarını əl ilə kopyalamadan yerli layihələrlə sinxronlaşdırır