Створення мобільного додатку.

Необхідний інструментарій

Для створення мобільних додатків в системі К2 використовується фреймворк Ionic. Перевага Ionic полягає в тому, що з однією кодовою базою ви можете створювати додатки для будь-якої платформи, використовуючи лише HTML, CSS і JavaScript.

Для успішної розробки додатку потрібно встановити наступний інструментарій:

Node.js для взаємодії з екосистемою Ionic. Завантажте версію LTS.
Редактор коду, наприклад, Visual Studio Code.
Термінал (CLI).
Android Studio для розробки додатку для Android.
Для релізу додатку на App Store потрібен MacBook.

Інтерфейс командного рядка Ionic (CLI), який є основним інструментом для розробки програм Ionic. Ionic CLI можна встановити глобально за допомогою npm:

npm install -g @ionic/cli

Створення простого додатку

Після встановлення інструментарію можемо створити новий проект:

ionic start myApp blank --type=angular --capacitor --package-id=ua.com.corp2

Параметри:

blank - тип шаблону (також можливі варіанти tabs, list).
--type - тип фреймворку (можливі значення: angular, vue, react).
--capacitor - вмикає інтеграцію з Capacitor для доступу до нативних властивостей пристрою.
--package-id - ідентифікатор програми.

Після створення проекту переходимо в його директорію:

cd myApp

і запускаємо додаток командою:

ionic serve

Для збірки веб версії додатку виконуємо команду:

ionic build

Для генерації нативних платформ пишемо:

npx cap add ios npx cap add android

Створення додатку з плагіном InAppBrowser (вбудована в додаток web сторінка)

Відкрийте в терміналі папку з новоствореним додатком. Встановлюємо плагін:

npm install cordova-plugin-inappbrowser npm install @awesome-cordova-plugins/in-app-browser

У файлі app.module.ts імпортуємо встановлений модуль:

import { NgModule } from ’@angular/core’; 
import { BrowserModule } from ’@angular/platform-browser’; 
import { RouteReuseStrategy } from ’@angular/router’; 
import { IonicModule, IonicRouteStrategy } from ’@ionic/angular’; 
import { AppComponent } from ’./app.component’; 
import { AppRoutingModule } from ’./app-routing.module’; 
import { InAppBrowser } from ’@awesome-cordova-plugins/in-app-browser/ngx’; 

@NgModule({ 
declarations: [AppComponent], imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule], providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }, InAppBrowser ], bootstrap: [AppComponent], }) 

export class AppModule {}

Підключаємо плагін на необхідній сторінці. В нашому випадку обираємо стартову сторінку додатку home.page.ts:

import { Component, OnInit } from ’@angular/core’; 
import { InAppBrowser } from ’@awesome-cordova-plugins/in-app-browser/ngx’; 

@Component({ 
selector: ’app-home’, 
templateUrl: ’home.page.html’, 
styleUrls: [’home.page.scss’], 
}) 

export class HomePage implements OnInit { 
constructor(private iab: InAppBrowser) {} 

ngOnInit(): void { 
 setTimeout(() => { this.routeApp(); }, 1000); } 

routeApp() { 
  this.openInAppBrowser(); 
} 

openInAppBrowser() {
 const browser = this.iab.create( 
’https://cloud.corp2.eu/’, 
’_blank’, 
{ 
location: ’no’, 
hidden: ’no’, 
hardwareback: ’yes’, 
toolbar: ’no’, 
fullscreen: ’no’, 
} 
); 
}}

Після запуску додатку командою:

ionic serve

отримаємо стартову сторінку додатку, що відображає сайт https://cloud.corp2.eu.

Підготовка Android додатку

Для підготовки Android додатку необхідно встановити Android Studio. Після цього потрібно додати Android платформу до вашого проекту:

npx cap add android

Потім відкрийте проект в Android Studio:

npx cap open android

Тут ви можете налаштувати і збілдити ваш додаток для Android.

Підготовка iOS додатку

Для підготовки iOS додатку потрібен MacBook. Додайте iOS платформу до вашого проекту:

npx cap add ios

Потім відкрийте проект в Xcode:

npx cap open ios

В Xcode ви можете налаштувати і збілдити ваш додаток для iOS.

Публікація Android додатку

Для публікації Android додатку виконайте наступні кроки:

Відкрийте проект в Android Studio.
Створіть релізну збірку додатку.
Підпишіть збірку за допомогою ключа підпису.
Завантажте підписану збірку на Google Play Console.
Заповніть всі необхідні метадані та подайте додаток на рецензію.

Публікація iOS додатку

Для публікації iOS додатку виконайте наступні кроки:

Відкрийте проект в Xcode.
Створіть архів додатку.
Підпишіть архів за допомогою сертифікату підпису.
Завантажте підписаний архів на App Store Connect.
Заповніть всі необхідні метадані та подайте додаток на рецензію.

Таким чином, ви можете створити, налаштувати та опублікувати мобільний додаток за допомогою Ionic та необхідного інструментарію.