Ionic: Быстрый старт 3.0

Ранее в заметках я рассматривал разработку с привзякой к IDE Visual Studio, с установкой Java и Android SDK для локальных сборок и т.д. Но мир не стоит на месте и появляются более удобные подходы и инструменты.

В данной заметке я расскажу как разрабатывать мобильные приложения без привязки к какой-либо IDE и их настройкам. Все что нам будет нужно - это абсолютно любой текстовый редактор и командная строка. Таким образом мы не привязаны даже к операционной системе, в которой ведем разработку.


Ionic 3 дает нам очень много удобных и, зачастую, бесплатных вещей для комфортной разработки приложений. Это и эмуляция в браузере, и эмуляция на реальном устройстве по WiFi, и использование Ionic View для того, чтобы дать поработать с приложенем кому-нибудь другому, и управление версиями, и компиляция в облаке для любой платформы. Вообщем много всего.

Немаловажный факт в том, что нам так же не нужно ставить всякие Java SDK, Android SDK и тому подобные вещи!

Формат данной заметки будет пошаговый, как-будто все ставим и запускаем первый раз :)


Шаг нулевой

Обязательно создаем себе учетную запись на Ionic Dashboard


Шаг первый

Ставим менеджер пакетов, NPM. Без него никуда. Идем на официальный сайт NodeJS и скачиванием последнюю свежую TLS версию. Ставим по принципу next-next-next.

После установки проверим, что все установилось. Попросим NodeJS показать свою версию. Делается в командном окне следующей командой.

node --version

Так же нам нужно поставить OpenSSH для генерации ключей. Ниже будет инструкция для пользователей Windows:


Шаг второй

Продолжаем работать с командной строкой и будем ставить себе инструментарий Ionic. Делается это простой командой:

npm install -g cordova ionic

Запускаем и ждем некоторое время когда все установится.


Шаг третий

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

Для начала заведем папку для наших приложений, например c:/apps. Далее выполним последовательно следующие команды:

cd c:/apps
ionic start demoApp sidemenu

demoApp в команде это название папки нашего приложения, то есть Ionic создаст папку c:/apps/demoApp и положит туда исходники приложения. sidemenu это вариант выбранного макета приложения c боковым меню. Вместо него можно так же использовать tabs - вариант с закладками, или blank - просто пустое приложения с одним экраном.

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

Шаг четвертый

Теперь запустим наше приложение в браузерном эмуляторе, последовательно выполнив следующие команды:

cd c:/apps/demoApp
ionic serve -l

После завершения выполнения команды будет открыт браузер, в котором будет наше приложение. В браузере так же можно выбрать платформу, под которой смотрим приложение (iOS, Android и Windows Mobile).

Ionic предоставляет нам функционал Live Reload, это значит что , если во время тестирование в веб-эмуляторе мы что-то изменим в исходниках, то эмулятор сразу подтянет эти изменения, то есть команду ionic serve -l не надо запускать каждый раз.

Шаг пятый

Теперь запустим наше приложение в веб-эмуляторе прямо на нашем устройстве. Для этого на устройство надо установить приложение Ionic DevApp из Apple AppStore или Google Play. Так же устройство должно быть подключено к тому же WiFi, что и рабочий компьютер.

Иконка Ionic DevApp

Открываем приложение Ionic DevApp, запускаем веб-мулятор на рабочем компьютере:

cd c:/apps/demoApp
ionic serve -l

После запуска веб-эмулятора на рабочем компьютере, приложение Ionic DevApp покажет в ваше приложение, на которое можно нажать и поиграться с ним на устройстве.

Ionic DevApp.


Шаг пятый

А теперь мы построим наше приложение и посмотрим не через веб-эмулятор, а уже как на нормальное скомпилированное приложение. Для этого на устройство надо установить приложение Ionic View из Apple AppStore или Google Play.

Иконка Ionic View

После установки приложения открываем его и авторизуемся в нем в нашей учетной записью из Ionic Dashboard.

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

git add -A
git commit -a -m "Update"
git push ionic master

Это надо делать каждый раз, когда мы внесли какие-то изменения и хотим проверить сборку на устройстве. После загрузки исходников они тут же начнут компилироваться в облаке. Скомпилированное приложение будет доступно в Ionic View в течение 2-3 минут, может раньше.

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

Ionic View.


Как видно из заметки, чтобы начать работать с Ionic, необязательно долго настраивать себе рабочую среду, ставить всякие SDKеи и IDEшки. Мы не привязаны вообще ни к чему, даже к операционной системе, а работать можно хоть в блокноте.

В какой-нибудь следующей заметке я расскажу, как контроллировать сборки в Ionic Dashboard, как давать тестировать свое приложение кому-нибудь другому и как скомпилировать файлы для продакшна, для отправки в AppStore или Google Play.