Ionic: Начало

В данной заметке рассказывается о том, как настроить себе окружение для разработки мобильных приложений с использованием фреймворка Ionic под Windows.

В моих заметках для разработки приложений в качестве IDE я буду использовать Microsoft Visual Studio.

Это вопрос личных предпочтений. Лично мне неудобно иметь большую кучу разных IDE, хотя помимо Visual Studio я пользуюсь еще и phpStorm, Atom и старым добрым Notepad++, в завимисоти от проекта, разумеется.


Шаг первый

Первым делом, что необходимо поставить - это NodeJS вместе с входящим в него NPM. Именно с помощью него устанавливается сам фреймворк. Скачать и установить его можно с официального сайта NodeJS .

Вот прямая ссылка на установщик NodeJS, который использовался при написании данной заметки.

Процесс установки NodeJS по принципу Next-Next-Next.

Чтобы проверить, что NodeJS установился нормально, можно проверить его версию в командной строке. Достаточно выполнить следующую команду:

node --version

В результате выполнения команды должна отобразиться версия NodeJS в системе.

Результат проверки версии NodeJS

Шаг второй

Теперь мы готовы установить в систему непосредственно сам фреймворк Ionic с помощью следующей команды:

npm install -g cordova ionic
В процессе установки может запрашиваться ввод разной информации, такие как имя, название компании и т.д. Достаточно просто жать Enter.

Процесс установки - запустил и жди.

Чтобы проверить установленные версии Ionic и Cordova, можно выполнить последовательно следующие команды:

ionic --version
cordova --version
Результат проверки версии Ionic и Cordova

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


Шаг третий

Теперь ставим Microsoft Visual Studio. Для наших целей подойдет бесплатная версия Visual Studio 2017 Community. Качаем и запускам.

В процессе установки необходимо выбрать тип установки "Пользовательская" и далее выбрать среди разных опций опцию "HTML/JavaScript (Apache Cordova)".

Выбор инструментария.

После установки Visual Studio надо поставить NPM Task Manager для Visual Studio.


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

На самом деле, к этому моменту мы уже сделали все действия чтобы начать разработку приложения сходу. Но я предлагаю немного облегчить себе жизнь и добавить в Visual Studio три общих шаблона мобильного приложения: Пустое приложение, Приложение с табами и Приложение с сайдбаром.

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

Запускаем Visual Studio и в верхнем меню выбираем пункт "Средства -> Расширения и обновления". В открывшемся окне в левой части выбираем пункт "В сети", после чего в правой части набираем "Ionic" и жмем Enter для поиска.

Среди результатов поиска будет "Ionic 2 Templates for Visual Studio 2017" с кнопкой "Скачать". После скачивания закрываем окно и закрываем Visual Studio.

Загрузка шаблонов.

После того, как Visual Studo закрыта, запустится процесс установки шаблонов. В открывшемся окне нажимаем кнопку "Изменить" и ждем окончания установки.

Установка шаблонов.


Шаг пятый

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

Открываем Visual Studio и в верхнем меню выбираем "Файл -> Создать -> Проект". В появившемся окне в левой части выбираем пункт "Установленные -> TypeScript -> Мобильные приложения" после чего в центральной части окна будут отображены три шаблона приложения. Для теста можно выбрать любой, например "Ionic2 - Sidemenu". Далее в нижней часте окна указываем имя приложения, путь, где оно будет лежать, и нажимаем кнопку "Ок."

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

Создание проекта готово. В правой части Visual Studio будет отображены файлы проекта нашего приложения.

Файлы проекта

Пока не будем вдаваться в подробности что там к чему, а просто запустим его. Для этого в верхней части Visual Studio нужно выбрать эмулятор, как на картинке ниже, и нажать F5 для запуска.

Запуск приложения в веб=эмулятре.

В результате запуска откроется браузер, где будет отображено мобильное приложение.

Тестовое приложение в браузере

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