Ionic: детальний огляд з прикладами

🔹 Що таке Ionic?

Ionic — це кросплатформний фреймворк для створення мобільних застосунків, який використовує HTML, CSS, JavaScript та популярні фронтенд-фреймворки, такі як Angular, React та Vue.
Він дозволяє створювати мобільні, веб та PWA-застосунки з єдиним кодом.

Ionic працює на основі WebView (веб-обгортки), що означає, що застосунок рендериться як звичайна веб-сторінка, але виглядає і працює як нативний застосунок.

🔹 Головні особливості Ionic

✅ Кросплатформність

Один код працює на iOS, Android, Web (PWA).
Підтримує Electron для створення десктоп-застосунків.

✅ Використання веб-технологій

Створюється за допомогою HTML, CSS, JavaScript.
Підтримує Angular, React та Vue.
Можна використовувати Vanilla JS без фреймворків.

✅ Гібридний підхід (WebView)

Використовує Capacitor або Cordova для доступу до нативних API (камера, геолокація, push-сповіщення).
Рендерить UI всередині WebView, схожий на PWA.

✅ Велика бібліотека UI-компонентів

Ionic містить готові адаптивні UI-компоненти (кнопки, форми, картки, модальні вікна).
Автоматично стилізується під iOS та Android.

✅ Підтримка PWA (Progressive Web Apps)

Застосунки можна запускати прямо в браузері без встановлення.

✅ Підключення до нативних API

Через Capacitor або Cordova можна отримати доступ до Bluetooth, геолокації, камери, файлової системи тощо.

🔹 Як працює Ionic?

Ionic використовує WebView для рендеру застосунку всередині нативної оболонки.
Реальні нативні функції (камера, push-сповіщення) викликаються через Capacitor або Cordova.

📌 Архітектура Ionic

Веб-інтерфейс (HTML, CSS, JS) – рендериться через WebView.
Фреймворк (React, Angular, Vue) – керує логікою застосунку.
Capacitor/Cordova – забезпечує доступ до нативних функцій.
Нативна оболонка – запускає застосунок на iOS/Android.

🔹 Основи роботи з Ionic

📌 Встановлення Ionic

Перед початком потрібно встановити Ionic CLI:

npm install -g @ionic/cli

Створення нового проєкту:

ionic start myApp blank --type=angular

blank – шаблон (можна вибрати tabs, sidemenu і т. д.)
--type=angular – можна вибрати react, vue.

Запуск застосунку:

ionic serve  # Запуск у браузері
ionic capacitor run android  # Запуск на Android
ionic capacitor run ios  # Запуск на iOS

🔹 Приклад застосунку

📌 Простий застосунок Ionic + Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  template: `
    <ion-header>
      <ion-toolbar>
        <ion-title>Привіт, Ionic!</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content class="ion-padding">
      <ion-button (click)="showAlert()">Натисни мене</ion-button>
    </ion-content>
  `,
})
export class HomePage {
  showAlert() {
    alert('Привіт, Ionic!');
  }
}

📌 Що тут відбувається?

<ion-header> – створює верхню панель.
<ion-toolbar> – містить заголовок.
<ion-content> – головна область вмісту.
<ion-button> – кнопка, що викликає showAlert().

🔹 Основні UI-компоненти

Ionic містить готовий набір компонентів, які автоматично підлаштовуються під iOS та Android.

📌 Приклад основних компонентів:

<ion-button>Кнопка</ion-button>
<ion-input placeholder="Введіть текст"></ion-input>
<ion-list>
  <ion-item>
    <ion-label>Елемент списку</ion-label>
  </ion-item>
</ion-list>

📌 Адаптація під платформи
На iOS кнопка буде виглядати пласкою, а на Android – з ефектом підсвічування.

🔹 Робота з Capacitor (нативні API)

Capacitor – це альтернатива Cordova, яка дозволяє працювати з нативними API.

📌 Приклад отримання геолокації

npm install @capacitor/geolocation

import { Geolocation } from '@capacitor/geolocation';

async function getLocation() {
  const coordinates = await Geolocation.getCurrentPosition();
  console.log('Широта:', coordinates.coords.latitude);
  console.log('Довгота:', coordinates.coords.longitude);
}

🔹 Робота з API

📌 Приклад отримання даних з API

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  template: `<ion-content><p>{{ data?.title }}</p></ion-content>`,
})
export class HomePage implements OnInit {
  data: any;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get('https://jsonplaceholder.typicode.com/todos/1')
      .subscribe((response) => (this.data = response));
  }
}

🔹 Переваги Ionic

✅ Один код для iOS, Android та Web
✅ Готові UI-компоненти – стилі автоматично адаптуються
✅ Швидка розробка – підтримка Hot Reload
✅ Легка інтеграція з нативними API через Capacitor
✅ Підтримка Angular, React, Vue

🔹 Недоліки Ionic

❌ Менша продуктивність, ніж у нативних застосунках
❌ Залежність від WebView – можуть бути проблеми зі швидкодією
❌ Більший розмір застосунку у порівнянні з React Native чи Flutter

🔹 Для кого підходить Ionic?

✅ Для стартапів та MVP – швидко можна запустити застосунок
✅ Для веб-розробників – можна використати знайомі технології
✅ Для створення PWA (Progressive Web Apps)
✅ Для проєктів, які не потребують високої продуктивності

🔹 Висновок

Ionic – це потужний фреймворк для кросплатформної розробки мобільних застосунків, який дозволяє використовувати веб-технології для створення iOS, Android та PWA.
Він ідеально підходить для швидкої розробки, але поступається продуктивністю React Native та Flutter.

Якщо ви знаєте Angular, React або Vue і хочете створювати мобільні та веб-застосунки одночасно – Ionic чудовий вибір! 🚀