Ionic: Запуск на реальном устройстве

В данной заметке я расскажу как запустить приложение на реальном устройстве. В контексте данной заметки я буду рассматривать работу с устройствами на базе Android, так как с запуском приложения в iOS не так все просто, но в конце заметки я покажу способ как можно запустить приложение на iOS.

Фактически, это продолжение настройки среды разработки и окружения. Несмотря на то, что объем действий не маленький, сделать это надо будет только один раз.

Android

Первым делом надо установить Java Development Kit версии 1.8 и выше. Лично у меня на данный момент - Java SE Development Kit 8u131 (jdk1.8.0_131), но можно качать и по свежее. Скачать и установить его можно с официального сайта. Это необходимо для компиляции приложения.

Версии под Windows в самом низу

Теперь необходимо установить Android SDK. Начиная с 25 версии Google не дает визуальный интерфейс для управления версиями Android, мотивируя делать все через командную строку, но, тем не менее, оставил ссылки на SDK Manager. Скачать можно тут. В командной строке ничего страшного нет, это дело привычки.

Качаем архив и распаковываем содержимое в любую папку, например у меня он находится по пути - C:\Program Files (x86)\Android\android-sdk

Расположение Android SDK

Теперь предстоит самое просто и долгое - скачивание и установка версий Adnroid API, по сути версий самого Android, которые сможет поддерживать приложение. Простое заключается в том, что нужно просто отметить нужное галочками, а долгое - что это займет некоторое время для скачивания и установки. Запускаем файл SDK Manager.exe, который находится в папке с Android SDK. И выбираем все что называется Android SDK Build-tools и все SDK Platform в каждой версии Android. И так же отдельно выбираем необходимые утилиты в категории Extras. После чего наживаем кнопку "Install packages..." и ждем.

Это то, что установлено у меня. Лично я выбирал все элементы по корневым папкам.

Так, с Android SDK разобрались и мы близки к запуску нашего приложения на устройстве. Теперь нам нужно прописать пути к Android SDK в переменные окружения Windows. Делается это так:

Процесс создания переменных среды. Много кликов, но что поделать.

Теперь для удобства мы добавим в Visual Studio командную строку, с помощью которой мы будем запускать приложение, да и не только. Делается это так: Открываем пункт меню "Средства" -> "Внешние инструменты". В появившемся окне нажимаем кнопку "Добавить", после чего заполняем три поля внизу окна.

После этого нам будет доступен пункт "Средства" -> "Командная строка".

Процесс добавления командной строки.

Откроем нашу командую строку ("Средства" -> "Командная строка") и выполним следующую команду, которая посторит актуальный препроцессор стилей SASS:

npm install --global --production windows-build-tools
npm rebuild node-sass
Выполнение команды

После успешного выполнения команды закройте командное окно. Мы готовы к запуску приложения на устройстве.

Теперь подключаем мобильное устройство по USB проводу к компьютеру. На самом устройстве необходимо включить отладку по USB и разрешить установку приложений из анонимных источников.

Разрешение на установку из анонимых источников обычно находится в "Настройки" -> "Безопасность" -> "Неизвестные источники".

Отладка по USB находится в "Настройки" -> "Параметры разработки" -> "Отладка по USB".

Название пунктов меню от устройства к устройству могут меняться, но примерное направление, думаю, понятно.

Расположение настроек на устройстве.

Все готово. Переходим к запуску приложения в debug режиме на устройстве. Компиляция может занять пару минут. После успешной компиляции приложение само запустится на устройстве. Делается это следующей командой (команду запускаем все там же - "Средства" -> "Командная строка"):

ionic cordova run android --debug

Успешная компиляция приложения.

Открытие приложения уже на самом устройстве может занять 5-10 секунд, может быть виден белый экран. Это не страшно. Про ускорение загрузки приложения я расскажу в отдельной заметке о подготовке приложений для публикации, грубо говоря, компиляцию приложения в release mode, а не debug, как сейчас

iOS

На iOS устройства нельзя просто так взять и загрузить наше приложение, в отличие от Android, на который можно просто закинуть apk файл и запустить его. Но ребята из Ionic сделали возможность тестирования приложений через свое приложение Ionic View.

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

Приложение в приложении. Ну вы поняли.

Первым делом необходимо создать свой аккаунт на сайте Ionic. После создания аккаунта заходим в него. После входа нам предложат выбрать тарифный план, выбираем Free, для наших тестов он подойдет. Ничего сложного.

Создание аккаунта Ionic и вход в него.

После того, как мы вошли в аккаунт, сходу предлагается создать, по сути, репозиторий для своего приложения. После создания, приложению будет присвоен уникальный номер, в моем примере это - 4d9c4959, у вас он будет свой.

Создание репозитрия своего приложения.

Теперь нам надо поставить OpenSSH в систему, чтобы можно было работать с репозиторием. Скачать и установить его можно например тут. Качаем, устаналиваем, жмем Next и Ok везде. И перезагружаем компьютер.

После перезагрузки запускаем Visual Studio и открываем командную строку. Будем связывать наше приложение с репозиторием в аккаунте Ionic. Делается это командой:

ionic login

Будет предложено указать свой логин и пароль от аккаунта Ionic. Указываем. Система попросит настройки SSH и предложит четыре варианта на выбор. Первый из которых - Настроить автоматически. Он нам и нужен. Фактически, после ввода пароля от аккаунта, после успешной авторизации, надо до упора жать Enter.

Далее в командном окне в Visual Studio непосредственно связываем наше приложение с репозиторием Ionic командой:

Вместо кода 4d9c4959 необходимо подставить свой.
ionic link --pro-id 4d9c4959
Связь приложения с репозиторием.

Теперь мы можем загрузить наше приложение в репозиторий. Нужно последовательно выполнить следующие команды каждый раз, когда мы хотим отправить наше приложение в репозиторий:

git add -A
git commit -a -m "Update"
git push ionic master
В идеале, в место Update надо писать кратко о том, что было изменено.

Ну а сейчас мы должны поставить приложение Ionic View из AppStore на устройство iOS и запустить в нем наше приложение, которое мы загрузили в репозиторий шагом выше. После того как поставили Ionic View авторизуемся в нем и нам будет доступно наше приложение.

Открытие приложения уже на самом устройстве может занять 5-10 секунд, может быть виден белый экран. Это не страшно. Про ускорение загрузки приложения я расскажу в отдельной заметке о подготовке приложений для публикации, грубо говоря, компиляцию приложения в release mode, а не debug, как сейчас

Просмотр приложения на iOS.


Вот и все, что нужно знать, чтобы проверить свое приложение на реальных устройствах iOS или Android. В целом муторно, согласен. Но сделать это надо всего 1 раз. А при разработке уже просто вызывать нужные команды для тестирования для Android:

ionic cordova run android --debug

Или iOS:

git add -A
git commit -a -m "Update"
git push ionic master
// Далее смотреть приложение в Ionic View

А вот как сделать уже релизую версию приложения, как сформировать apk файл для Android, которым можно с кем-нибудь поделиться, или какие сложности при релизе приложения на iOS, я расскажу как нибудь в следующей заметке на эту тему.