Що таке іонічний?
Це фреймворк, який дозволяє розробляти додатки з веб-технологіями, тобто відкритими стандартами, широко відомими спільноті: HTML, CSS та Javascript.
За допомогою Ionic та єдиної кодової бази ви можете створювати додатки, які працюють на різних платформах, таких як iOS та Android. Але також можна скомпілювати проекти також до так званого PWA (Progressive Web Apps) або настільних додатків на базі Electron.
Однією з основоположних переваг іонної та гібридної розробки взагалі є те, що, оскільки це технології розробки, відомі та використовуються в веб-середовищі, будь-який розробник, який регулярно працює в Інтернеті, може повторно використовувати всі знання, що зберігаються роками.
Завдяки цьому і з досить незначною кривою навчання людина, що має досвід у розробці інтерфейсу, здатна розробляти мобільні додатки, які можуть бути доступними для користувачів у магазинах додатків (таких як Apple App Store або Google Play).
Android Studio - це інтелектуальний редактор коду, розроблений і підтримуваний безпосередньо компанією Google для полегшення розробки програм для цієї операційної системи.
Android Studio - це не тільки редактор коду, пристосований для Android, але це також повний пакет інструментів та залежностей, необхідних для початку розробки та компіляції програм для цієї операційної системи.
Іонний 4
Ionic 4 поставляється з важливими новими функціями, які виводять фреймворк на новий рівень, більш універсальний у всіх відношеннях, завдяки включенню нових технологій, потоків розвитку.
Без сумніву, з цим оновленням фреймворк досягає високого ступеня зрілості, надаючи розробникам нові інструменти, за допомогою яких можна створювати дивовижні орієнтовані на пристрої додатки.
Ionic 4 тепер пропонує оптимізовані для мобільних пристроїв компоненти інтерфейсу через веб-компоненти. Перевага веб-компонентів полягає в тому, що це стандарт Javascript, тому вони базуються на власному коді, що дозволяє досягти більш високої продуктивності в цілому. Але також, оскільки це Javascript, можна використовувати веб-компоненти в будь-якому інтерфейсі.
Ionic 4 видалив залежності з будь-яким конкретним фреймворком Javascript. Більше не потрібно використовувати Angular. Ми можемо використовувати React, Vue та інші бібліотеки, якщо бажаємо, або навіть власний Javascript, без використання певної структури.
Він включає бібліотеку Stencil (Stencil.JS) для розробки компонентів інтерфейсу користувача. Трафарет створений тією ж командою Ionic, яка забезпечує нам оптимізовану продуктивність для роботи на мобільних та гібридних додатках з Ionic. Можна сказати, що Stencil є прозорим для розробника.
Очевидно, що розробник використовуватиме компоненти, яких він у принципі не знає, якщо це користувацькі елементи (користувацькі компоненти з власними веб-компонентами), виготовлені за допомогою певного фреймворку або бібліотеки. Необов’язково мати знання про Stencil, оскільки самі компоненти програми можуть бути створені за допомогою цієї бібліотеки або з іншим фреймворком, який ми вважаємо за краще.
Тепер Ionic розробила новий рівень для спілкування з рідною частиною пристроїв. Його назва - конденсатор, і вона замінює те, що пропонували нам плагіни Cordova раніше. Хоча Кордову все ще можна використовувати за бажанням, завдяки Capacitor ми отримуємо більш високу продуктивність і усуваємо залежності від систем інших організацій, не пов'язаних з Ionic.
У конденсаторі є досить багато плагінів для рідної поведінки, але в багатьох випадках нам все одно доведеться їхати до Кордови, коли цей компонент ще не існує в цій системі.
Крок 1. Встановлення Node.js
Node.js - це серверне середовище Javascript на основі подій. Це бібліотека та середовище виконання для керованих подіями і, отже, асинхронних входів/виходів, що працює на інтерпретаторі JavaScript, створеному Google V8.
Щоб встановити його, ми переходимо на офіційну сторінку та завантажуємо останню версію нашої операційної системи. Після завантаження інсталятора ми запускаємо його та натискаємо «Далі».
Ми приймаємо ліцензійну угоду та натискаємо "Далі".
Вибираємо шлях, куди хочемо його встановити, і натискаємо «Далі».
Ми залишаємо це як є і натискаємо "Далі".
Нарешті ми натискаємо на "Встановити".
Після завершення встановлення ми натискаємо «Готово», і програма встановлення закриється.
Щоб перевірити, чи він був встановлений правильно, ми відкриваємо консоль і виконуємо таку команду:
Ми отримаємо версію вузла, яку ми зараз встановили.
Крок 2. Встановлення Ionic Cli
Ionic CLI - це інтерпретатор командного рядка Ionic, який містить ряд корисних інструментів для легкого виконання багатьох загальних завдань при розробці та виробництві програм за допомогою Ionic.
Щоб встановити його, ми відкриваємо консоль і вводимо таку команду:
Після завершення встановлення ми можемо перевірити, що все пройшло правильно, виконавши таку команду:
Крок 3. Створення нашого акаунта на Ionic.
Перед початком роботи з Ionic нам потрібно створити обліковий запис Ionic, щоб мати змогу керувати нашими майбутніми програмами.
Для цього ми переходимо до наступного посилання та заповнюємо відповідну інформацію.
Після того, як це буде зроблено, відкриється таке вікно привітання, яке вказує на те, що обліковий запис створено правильно.
Крок 4. Створіть наш перший додаток.
Для створення нашого першого додатка в Ionic ми можемо зробити це, ввівши цю команду в консолі:
Щоб переглянути всі доступні шаблони, які містить ionic, ми можемо виконати таку команду: Встановлюємо ім'я, яке ми хочемо дати нашому додатку, замість "myApp" і вибираємо шаблон, який ми хочемо замість "вкладок".
Коли ми виконаємо команду, вона почне встановлювати всі необхідні залежності, і вона запитає нас, чи хочемо ми встановити Ionic Appflow SDK і підключитися до програми. Ми натискаємо "Y", щоб вказати "так", і він попросить нас увійти з іонним обліковим записом, який ми створили раніше. І виберіть шаблон, який найкраще відповідає нашим потребам.
Ми вводимо електронну адресу та пароль, і він запитає нас, чи хочемо ми створити нову програму чи запустити вже існуючу. Вибираємо опцію "Створити нову програму на Ionic Appflow".
Щойно додаток буде створено, він запитає нас, який git ми хочемо використовувати. Ми вибираємо ту, яка нам найбільше подобається, якщо у нас немає облікового запису у вибраному git, ми створюємо її і рухаємося далі. Нарешті, він запитає нас, яку гілку ми хочемо використовувати, ми вибираємо "Посилання лише на головну гілку", і з цим у нас буде перша програма в Ionic.
Нарешті, для запуску програми ми вводимо папку програми з терміналу і запускаємо її наступним чином:
Вікно, подібне до цього, відкриється у браузері, залежно від використовуваного нами шаблону: