Как построить и запустить релиз-приложение iOS в Cordova

Будем исходить из того, что вы написали свое первое приложение под Android на Windows, используя, к примеру, редактор Visual Code и теперь хотите на основе уже написанного кода построить приложение под iOS, перекинув все исходник на ваш Mac — машину, где мы будет подготавливать, построить и подписывать приложение под iOS, прибегнув к помощи XCode.

Здесь представлен текст описания одного из вариантов построения приложения Cordova для платформы iOS. Перед началом работы условимся, что у  нас в инструментарии есть следующие необходимые условия:

  • у нас есть Mac OS High Sierra(или неважно какая версия, но чтобы работала стабильно);
  • на нашем Mac OS установлен XCode последней версии(или неважно какой версии, но чтобы работало стабильно);
  • на нашем Mac OS установлен Node.js v8 и выше(или неважно какой версии, но чтобы работало стабильно);
  • на нашем Node.js установлен Cordova;
  • у нас есть годовая подписка на возможность разрабатывать приложения под продукты Apple. Стоит это удовольствие $99, без этого ваш проект так и будет на стадии дебагинга, без возможности устанавливать на сторонние устройства или загружать на App Store.

Это все элементарные элементы, которые понятны для настройки любому разработчику, принявшегося серьезно разработать под iOS и останавливаться, подробно описывая каждый шаг, я не буду.

Подписка на Apple Developer

Особо следует остановиться на покупку лицензии разработки в виде подписки, потому что без этого никак, если вы хотите подписать приложение и распространять его. У Apple распространители делятся на 4 категории:

  1. Sign in with Apple ID — распространители, которые имеют возможность использовать разработку только в режиме тестирования. Т.е., вы не можете распространять ваши приложения за пределы эмулятора на вашем Mac или вашего личного устройства, но весь функционал разработки вам все равно доступен. Стоит $0;
  2. Individual — распространитель в виде индивидуального разработчика. Apple выдает вам сертификат, в котором прописаны ваши личные данные, как физического лица. Стоит $99;
  3. Organization — распространитель от имени организации. Apple выдает вам сертификат, в котором прописаны вашей организации. Стоит $99;
  4. Enterprise Program — распространитель корпоративного ПО. Стоит $299.

Подробно про фичи разработки под тем или иной подпиской можно почитать по ссылке.

Настройка проекта Cordova

Добавляем платформу iOS и подготавливаем проект для XCode

cordova platform add ios
cordova prepare              # или "cordova build"

Развертывание проекта в Cordova

Примечание. Этап развертывания средствами Cordova можно пропустить, так как дальнейщую работу с проектом мы будем производить в XCode.

Дополнительно будет полезно установить вспомогательные утилиты, которые пригодятся в работе c эмуляторами

npm install -g ios-sim
npm install -g ios-deploy

В данной статье мы не будем работать через эти утилиты, а будем работать через XCode. Также через командную строку мы можем задеплоить приложение.

Для развертывания приложения на подключенном iOS устройстве:

cordova run ios --device

Для развертывания приложения на iOS эмуляторе по умолчанию:

cordova emulate ios

Можно использовать cordova run android —list чтобы увидеть все доступные цели и cordova run android —target=имя_устройства для запуска приложения на конкретном устройстве или эмуляторе (например, cordova run android --target="Nexus4_emulator").

Чтобы увидеть дополнительные параметры построения и запуска также можно использовать cordova run —help.

Работа с проектом в XCode iOS SDK

Первым делом открываем сгенерированный проект XCode в директории проекта Cordova по пути ProjectName/platforms/ios/PrjectName.xcpdeproj

Здесь следует рассмотреть несколько пунктов настройки, чтобы сгенерировать релиз проекта.

Первым делом выбираем модуль Cordova в списке и при его контексте нажимаем на вкладку General, где устанавливаем галочку на автоуправление подпиской и в выпадающем нижнем списке выбираем команду разработки. В данном случае там указываем вашу купленную подписку разработчика у Apple

Первым делом выбираем конечное устройство в виде физического устройства

Далее заходим в настройку схемы проекты и там должен быть выбран название проекта,а  не библиотека Cordova

Если он не установлен, то заходим в Edit Scheme и во всех вкладках устанавливаем конфигурацию Build Configuration в режим Release, кроме вкладки Test

Теперь, нам нужно сначала почистить проект нажав на Clean, построить, нажав на Build и архивировать, нажав на Archive

Если мы все правильно настроили в проекте, то проект должен удачно архивировать в формат *.xcarchive по пути проекта ProjectName/platforms/ios/PrjectName.xcarchive

Чтобы увидеть все сгенерированные архивы проектов необходимо найти в верхнем меню Window > Organizer

В данном диалоге мы увидим список всех архивов. Это не полноценное приложение, которое можно уже установить на iOS — устройство и его нельзя разместить в маркет. Для этого нам нужно его экспортировать в один из вариантов и для этого сначала выбираем проект, далее нужный архив из проекта и нажав на кнопку Export вызываем окно выбора типа распространения нашего приложения в формате *.ipa

В способе распространения *.ipa выбираем нужный вариант. Если хотим распространить через App Store, о выбираем первый пункт. Второй пунтк — это распространение подписанного приложения с возможность индивидуальной установки без App Store. Другие можно понять по их кратким описаниям, но основные — это 2 первых, если вы новоиспеченный разработчик iOS.

К примеру выберем тип распространения Ad Hoc и жмем на Next и в следующем диалоге у нас будет возможность выбрать какое-то специфическое устройство или все поддерживающие данной разработкой устройства все сразу, также есть возможность добавить файл манифеста, который даст возможность установить приложение только из определенной ссылки скачивания и жмем на Next

В данном шаге необходимо выбрать режим подписи. Оставим автоподпись средой XCode и жмем на Next

Дальше среда будет генерировать подписанные дистрибутивы под разные устройства iOS

По окончании процесса среда выдаст подробную информацию о сборке

Жмем на кнопку Export и среда нас запросит выбрать место хранения сгенерированных подписанных дистрибутивов *.ipa

После сохранения создастся отдельная папка, в которой будут все наши подписанные дистрибутивы iOS

 

Часть 1. Push — уведомления для Android и iOS при помощи Firebase Cloud Messages

 

Это простой прямой подход, касающийся того, как реализовать push-уведомление в Android, а также iOS, используя плагин  cordova plugin for fcm для проекта Cordova и Google Firebase FCM в виде облачного сервера обработки сообщений.

Использование FCM в платформе Android

1. Создание проекта Cordova. Сначала необходимо иметь какой-то проект Cordova с добавленной платформой Android:

cordova create pushSample
cd pushSample
cordova platform add android

далее к этому проекту мы добавляем плагин cordova-plugin-fcm командой:

cordova plugin add cordova-plugin-fcm

В процессе установки данного плагина система нам выведет ряд ошибок, к примеру, скажет, что у нас отсутствует файл google-services.json:

Error: cordova-plugin-fcm: You have installed platform android but file 'google-services.json' was not found in your Cordova project root folder.
Note : This is because we have not added the google-services.json file which has to be created in the next following steps.

данный файл мы должны скачать из консоли Google Firebase в процессе создания приложения и находиться он должен в корневой директории проекта Cordova.

2. Создание облачного проекта Firebase. В консоли google firebse console жмем на кнопку «Добавить» и создаем новое облачный проект для Android, iOS и WEB — проектов:

После нажатия на кнопку «Создать проект» следующим шагом является добавление возможности создания облачных уведомлений через Firebase Cloud Messages и для этого необходимо нажать на пункту «Notifications» и далее следующее окно предложит ввести данные приложения для Android или iOS:

На данном этапе нажимаем на Android и заполняем данные и выйдет окно, требующий заполнения уникального идентификатора:

далее жмем на кнопку «Зарегистрировать приложение» и мы попадем на шаг, где нам предлагают скачать вышеупомянутый файл google-services.json:

данный файл скачиваем и кидаем в корень проекта Cordova pushSample/google-service.json.

Далее жмем «Продолжить» и сервис предложит нам добавить некоторый код в файл сборки build.gradle, который находится в корне платформы Android по пути pushSample/platforms/android/build.gradle:

buildscript {
  dependencies {
    // Add this line
    classpath 'com.google.gms:google-services:3.2.0'
  }
}

В скрипте сборки плагина по пути pushSample/platforms/android/cordova-plugin-fcm/pushSample-FCMPlugin.gradle :

dependencies {
  // Add this line
  compile 'com.google.firebase:firebase-core:11.8.0'
}
...
// Add to the bottom of the file
apply plugin: 'com.google.gms.google-services'

В некоторых случаях выше приведенный код может выдавать ошибки и несоответствия и все это выйдет в консоль, как например ниже:

google-services plugin could not detect any version for com.google.android.gms or com.google.firebase, default version: 9.0.0 will be used.
please apply google-services plugin at the bottom of the build file.

Для решения можно написать костыли принудительного исполнения, прописав их в файл pushSample/platforms/android/build.gradle:

...

allprojects {
    repositories {
        ...
        configurations.all {
            resolutionStrategy {
                // Add force (11.4.0 is version you want to use)
                force 'com.google.firebase:firebase-messaging:11.4.0'
                force 'com.google.firebase:firebase-core:11.4.0'
                force 'com.google.android.gms:play-services-gcm:11.4.0'
            }
        }
    }
}

...

3. Пишем первое уведомление. После добавления кода построения сервисов Google облачный проект предложит нам отправить сообщение:

Перед тем, как написать новое сообщение из консоли в клиентские приложения в виде уведомлений необходимо сначала написать клиентский код, который будет их принимать. Для этого в папке скриптов создаем новый файл www/scripts/script.fcm.js, в котором будем писать код, выполняемый после инициализации всех ресурсов Cordova:

var app = {
    initialize: function() {
        this.setup();
    },
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },
    receivedEvent: function(id) {
        console.log('Received Event: ' + id);
    },
    setup: function() {  
        //***********Начало кода FCM
        //Функция обработки всех уведомлений, как в бакграунде, так и при открытом приложении
        FCMPlugin.getToken(function(token) {
            //this is the fcm token which can be used
            //to send notification to specific device 
            console.log(token);
            //FCMPlugin.onNotification( onNotificationCallback(data), successCallback(msg), errorCallback(err) )
            //Here you define your application behaviour based on the notification data.
            FCMPlugin.onNotification(function(data) {
                console.log(data);
                //data.wasTapped == true means in Background :  Notification was received on device tray and tapped by the user.
                //data.wasTapped == false means in foreground :  Notification was received in foreground. Maybe the user needs to be notified.
                if (data.wasTapped) {
                     //Notification was received on device tray and tapped by the user.
                     alert(JSON.stringify(data));
                 } else {
                     //Notification was received in foreground. Maybe the user needs to be notified.
                     alert(JSON.stringify(data));
                 }
            });
        });
        //************Конец кода FCM
    }
};

app.initialize();

Данный файл подключаем ко всем необходимым страницам нашего проекта Cordova. построим приложение и запустим на эмулятор или на реальное устройство:

cordova build android
cordova run android

И далее и консоли отправляем наше первое уведомление:

жмем на «Отправить сообщение» и ждем его в приложении в виде уведомления, причем, приложение может быть закрыто и уведомление все равно придет и будет видно в верхней части экрана устройства или эмулятора:

Очень важно, чтобы уведомления пришли изначально настроить устройства на прием уведомлений данным приложением в настройках.