Перенос приложения Ionic Cordova в приложение Capacitor — Полное руководство


Миграция приложения Ionic Cordova в приложение Capacitor — полное руководство

Здесь представлено полное руководство по преобразованию приложения Ionic Cordova в Capacitor (эта статья лучше всего подходит для Ionic версии 5/6 Angular). В наши дни большинство разработчиков переходят на Capacitor, так как он имеет более стабильные плагины, чем Cordova, а Apache прекратил поддержку платформы Cordova. В этом руководстве мы рассмотрим не только команды для преобразования Cordova в Capacitor, но и полный процесс преобразования реального приложения Cordova в Capacitor. Ура!!!

Capacitor — Чем он отличается от Cordova?

Этот раздел актуален только для тех, кто уже некоторое время работает с Ionic / Cordova. Cordova была единственным доступным выбором для разработчиков приложений Ionic в течение довольно долгого времени. Cordova помогает превратить веб-приложение Ionic в приложение, устанавливаемое на устройство.

Capacitor очень похож на Cordova, но с некоторыми ключевыми различиями в рабочем процессе приложения.

Вот различия между Cordova и Capacitor (вы оцените их только в том случае, если ранее использовали Cordova, в противном случае можете просто пропустить этот раздел)

  1. Capacitor рассматривает каждый проект платформы как исходный актив, а не как актив времени сборки. Это означает, что Capacitor хочет, чтобы вы хранили исходный код платформы в репозитории, в отличие от Cordova, которая всегда предполагает, что вы будете генерировать код платформы во время сборки.
  2. В связи с вышесказанным, Capacitor не использует config.xml или подобную пользовательскую конфигурацию для настроек платформы. Вместо этого изменения в конфигурацию вносятся путем редактирования AndroidManifest.xml для Android и Info.plist для Xcode
  3. Capacitor не «запускается на устройстве» и не эмулируется через командную строку. Вместо этого такие операции выполняются через IDE для конкретной платформы. Поэтому вы не сможете запустить приложение Ionic-capacitor с помощью команды ionic run ios . Вам придется запускать iOS-приложения с помощью Xcode, а Android-приложения — с помощью Android studio.
  4. Поскольку код платформы не является исходным кодом, вы можете напрямую изменять нативный код с помощью Xcode или Android Studio. Это дает большую гибкость разработчикам

По сути, Capacitor — это как свежая, более гибкая версия Cordova.

Перенос Cordova в Capacitor

Прежде чем перейти к шагам по преобразованию приложения Ionic Cordova в Ionic Capacitor — мы рассмотрим код приложения, который необходимо преобразовать. Ниже приведен файл package.json для проекта Ionic Cordova.

Если вы посмотрите на приведенный выше файл пакета, вы увидите, что поверх Ionic установлен фреймворк Cordova. Теперь давайте приступим к миграции Cordova в Capacitor.

Чтобы перенести Cordova в Capacitor, сначала у вас должен быть проект Cordova (LAMMO 😂). Перейдите в каталог вашего проекта и выполните приведенную ниже команду, чтобы добавить трассировки Capacitor в ваше приложение Cordova.

$ ionic integrations enable capacitor
Войти в полноэкранный режим Выйти из полноэкранного режима

Приведенная выше команда инициализирует и добавит базовые библиотеки конденсатора в ваш проект Cordova. Есть некоторые базовые плагины, которые необходимы для запуска приложения на устройствах или в браузерах.

Эта команда иногда выдает ошибки [в реальной жизни — всегда выдает ошибки 🚨]. Если она выдает ошибки, установите базовый плагин с помощью следующей команды.

$ npm install @capacitor/app @capacitor/haptics @capacitor/keyboard @capacitor/status-bar
Войти в полноэкранный режим Выйдите из полноэкранного режима

Теперь базовые плагины установлены, после чего инициализируем конденсатор с помощью следующей команды

$ npx cap init 
Войти в полноэкранный режим Выйти из полноэкранного режима

Эта команда запросит у вас некоторую базовую информацию, связанную с приложением. Например, имя приложения и ID пакета. Она также спросит, хотите ли вы скопировать информацию о плагине из файла config.xml, введите ‘y’ для этого.

В результате будет создан файл ‘capacitor.config.ts ‘, это эквивалент файла config.xml во фреймворке Cordova. Давайте посмотрим на файл capacitor.config.ts и изменим его для фреймворка capacitor.

Конфигурационный файл для настройки Cordova

Если вы обратите внимание на этот файл, то найдете блок Cordova: {}, который содержит информацию о плагинах Cordova. Но сейчас нам не нужна Cordova, поэтому мы изменим этот файл (capacitor.config.ts) для capacitor.

Теперь мы добавили plugins: {} блок, который содержит информацию о плагинах конденсатора. Например, Splash Screen, Push Notifications и т.д. plugins config (plugins {}) содержит конфигурацию каждого плагина, используемого в проекте Ionic. В Capacitor также может быть установлен плагин Cordova (но в нашем случае мы хотим использовать только плагин capacitor).

Если вы хотите узнать больше о том, как конфигурируется файл Config, обратитесь к схеме конфигурации Capacitor.

Всякий раз, когда вы устанавливаете плагин, конфигурация плагина должна быть добавлена в этот файл. Например, если вы устанавливаете плагин Twitter, то его секретный ключ будет помещен в config.

Примечание :- Поскольку мы инициализируем Capacitor 3, ему нужен файл capacitor.config.ts, а не capacitor.config.json (файл JSON поддерживается Capacitor 2 и старше).

Теперь мы готовы к старту. Перед настройкой платформы Android и iOS мы удалим все экземпляры/плагины Cordova и заменим их на Capacitor. Мы начнем это с очистки файла package.json. Здесь очистка означает удаление всего существования Cordova из приложения (начиная с файла package.json).

Примечание :- Мой способ удаления плагина cordova из файла package.json заключается в поиске «cordova» и «@ionic-native» и удалении всех строк или блоков, связанных с ним.

При удалении плагина Cordova из файла package.json, скопируйте удаленный плагин куда-нибудь, так как мы должны знать, какой плагин нам нужно добавить для capacitor. После удаления всех Cordova и ionic-native package.json будет выглядеть как :-.

Но вы, должно быть, чувствуете, что наше приложение находится в состоянии полного разрыва. Да, если вы попытаетесь запустить ionic serve, вы увидите, что он выдаст множество ошибок. Но подождите немного, скоро наше приложение будет исправлено.

После добавления Capacitor в приложение, мы должны выполнить 3 шага:-…

  1. Удаление экземпляров использования кода Cordova и ionic-native из проекта Ionic.
  2. Установка плагинов capacitor
  3. Замена кода плагина Cordova на код плагина capacitor.

Примечание :- Эта часть будет отличаться для каждого приложения, так как каждое приложение использует одни и те же или разные плагины.

Для удаления экземпляров Cordova и ionic-native, мы можем найти ionic-native и удалить все его экземпляры. Я рассмотрю один пример удаления ionic-native и Cordova экземпляров плагина Cordova push и добавления новой альтернативы плагина уведомлений Capacitor Push.

Чтобы удалить и заменить плагин, мы выполним следующие шаги:-.

Шаг 1 — Удаление экземпляров использования кода Cordova и ionic-native из проекта Ionic

Удалите инициализацию Cordova push plugin из app.module.ts :- Перейдите в app.module.ts, удалите оператор импорта push plugin, а также удалите инъекцию Push модуля из провайдеров. Вы должны удалить из файла нижеупомянутые строки.

import { FCM } from '@ionic-native/fcm/ngx'; - Remove FCM import statement

Providers: [
...,
FCM // Remove injection of FCM module
]
Вход в полноэкранный режим Выйти из полноэкранного режима

Теперь нам нужно удалить их и из файла Implementation. Перейдите к файлу, в который импортирован ваш плагин push. [Просто найдите «import { FCM } from ‘@ionic-native/fcm/ngx'»].

Как только вы окажетесь на странице, удалите оператор import и удалите все существование этого Push Plugin. Наш код находится в таком месте, где у нас действительно реализован push-плагин.

Шаг 2- Установка плагинов конденсатора

Внедрение плагина Capacitor Push (замена Cordova Push Plugin) :- Это простой шаг, вы можете перейти на страницу Capacitor Plugins и найти плагин, который вы хотите использовать. Перед его использованием необходимо установить плагин push, используя приведенный ниже код.

$ npm install @capacitor/push-notifications
Вход в полноэкранный режим Выйти из полноэкранного режима

Шаг 3- Замена кода плагина Cordova на код плагина capacitor.

Конденсаторные плагины проще в использовании, так как нам не нужно их внедрять. В нашем случае мы использовали плагин push, поэтому добавьте приведенную ниже логику в ваше приложение. Поместите этот код на место вашего старого кода плагина на базе Cordova.

import { PushNotifications } from '@capacitor/push-notifications';

const addListeners = async () => {
  await PushNotifications.addListener('registration', token => {
    console.info('Registration token: ', token.value);
  });
  await PushNotifications.addListener('registrationError', err => {
    console.error('Registration error: ', err.error);
  });
  await PushNotifications.addListener('pushNotificationReceived', notification => {
    console.log('Push notification received: ', notification);
  });
  await PushNotifications.addListener('pushNotificationActionPerformed', notification => {
    console.log('Push notification action performed', notification.actionId, notification.inputValue);
   });
}

const registerNotifications = async () => {
  let permStatus = await PushNotifications.checkPermissions();
  if (permStatus.receive === 'prompt') {
     permStatus = await PushNotifications.requestPermissions();
  }
  if (permStatus.receive !== 'granted') {
     throw new Error('User denied permissions!');
  }
  await PushNotifications.register();
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Таким образом, мы можем заменить плагин Cordova на плагин Capacitor. Это будет применимо для всех плагинов, которые нужно заменить плагином Capacitor.

Теперь наше приложение полностью переведено на фреймворк Capacitor. И мы можем добавить к нему платформы android и iOS, выполнив следующую команду:-.

// Creating www build folder

$ ionic build

// Installing android and ios packages

$ npm install @capacitor/android
$ npm install @capacitor/ios


// Adding iOS and android platform to the Ionic app

$ npx cap add android
$ npx cap add ios
Войти в полноэкранный режим Выйти из полноэкранного режима

Бонус: Использование плагина Cordova с Capacitor 🎉

Вы увидите, что многие плагины еще не доступны в Capacitor, но доступны в Cordova. Итак, Как установить Cordova в приложение Capacitor? что делать в такой ситуации?; мы также можем использовать плагины Cordova в приложении Ionic capacitor. Давайте рассмотрим пример, если вы хотите добавить плагин для выбора контактов из книги контактов, то в конденсаторе нет никакой возможности для этого, но у нас есть альтернатива Cordova для этого (cordova-plugin-contacts). Выполните приведенную ниже команду для установки плагина contacts

$ npm install cordova-plugin-contacts
$ npm install @ionic-native/contacts
Войдите в полноэкранный режим Выйти из полноэкранного режима

После установки плагина нам нужно внедрить его в файл module.ts, как показано ниже.

import { Contacts } from '@ionic-native/contacts/ngx'; - Importing Contacts

Providers: [
...,
Contacts // Adding Contacts module as provider
]
Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь для его использования мы можем просто импортировать плагин в component.ts или page.ts и внедрить модуль Contacts.

import { Contacts } from '@ionic-native/contacts/ngx';

constructor(private contacts: Contacts) {}

pickContacts() {
  this.contacts.pickContact()
}
Вход в полноэкранный режим Выход из полноэкранного режима

Заключение

Теперь мы успешно преобразовали приложение Ionic Cordova в приложение Ionic Capacitor. Теперь мир Ionic переходит на конденсатор, так как он имеет более стабильную среду и не вызывает проблем с установкой. Вы также нашли — Как установить плагины Cordova в приложении Capacitor.

Следующие шаги

Если вам понравился этот блог, вы также найдете следующие блоги по Ionic интересными и полезными. Не стесняйтесь задавать любые вопросы в разделе комментариев

  • Платежные шлюзы Ionic — Stripe | PayPal | Apple Pay | RazorPay
  • Диаграммы Ionic с — Google Charts| HighCharts | d3.js | Chart.js
  • Социальные логины Ionic — Facebook | Google | Twitter
  • Аутентификация Ionic — через электронную почту | анонимно
  • Функции Ionic — Геолокация | Считыватель QR-кодов | Шагомер
  • Медиа в Ionic — Аудио | Видео | Image Picker | Image Cropper
  • Ionic Essentials — нативное хранилище | переводы | RTL
  • Обмен сообщениями в Ionic — Firebase Push | Чтение SMS
  • Ionic с Firebase — основы | Хостинг и БД | Облачные функции

Ionic React Full App с Capacitor

Если вам нужна база для запуска вашего следующего приложения Ionic 5 React Capacitor, вы можете сделать ваше следующее потрясающее приложение, используя Ionic 5 React Full App в Capacitor

Ionic Capacitor Full App (Angular)

Если вам нужна база для запуска вашего следующего приложения Angular Capacitor, вы можете сделать ваше следующее потрясающее приложение, используя Capacitor Full App

Ionic Full App (Angular и Cordova)

Если вам нужна база для запуска вашего следующего приложения на Ionic 5, вы можете сделать ваше следующее потрясающее приложение, используя Ionic 5 Full App


Оцените статью
devanswers.ru
Добавить комментарий