Что такое ионный?

В последние дни я знакомился с Ionic Framework. Для начала у меня возник вопрос, который может быть похож на ваш. Почему стоит выбрать Ionic Framework?

Причины, по которым я выбрал Ionic в качестве следующего фреймворка для развития своего набора навыков, перечислены здесь:

  • Ionic - это все о HTML, CSS, JavaScript.
  • Поскольку я внимательно следил за JavaScript в последние месяцы и недавно работал над внештатным проектом с использованием технологий и фреймворка (с которыми я знаком), таких как Node.js, Express.js и AngularJS.
  • Для создания мобильных приложений с использованием моих текущих знаний (то есть AngularJS)
  • Кривая обучения - если вы знакомы с AngularJS
  • Ionic кроссплатформенный
  • имеет собственные компоненты пользовательского интерфейса, которые кажутся Bootstrapish и легко настраиваются
  • Он имеет открытый исходный код и имеет активное постоянно растущее сообщество (особенно с выпуском версии 2).

В приведенный выше «список рассуждений» я также включаю еще несколько пунктов, которые предоставляет Ionic:

  • имеет собственный интерфейс командной строки (CLI) для формирования, разработки и развертывания приложений.
  • он предоставляет доступ к API мобильных устройств с помощью двух вариантов: ngCordova и ionic-native.
  • приложение, написанное на Ionic, может быть преобразовано для конкретного устройства (например, Android и iOS) с помощью Apache Cordova.

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

Гибридная мобильная архитектура

Вы думали, я собираюсь начать эту статью с обсуждения некоторых мифов о гибридных мобильных приложениях? Ну, не потому, что Саймон уже написал классную статью на DevDactic.com.

Генезис гибридных мобильных приложений состоит в том, чтобы понять, что такое гибридное приложение?

Гибридное приложение - это тип мобильного приложения, в котором для отображения интерфейса используется окно браузера.

Это подпадает под классификацию типов мобильных приложений, которая состоит из трех типов:

  • Собственный: разработан с использованием специфичного для платформы языка программирования, такого как Objective C или Java.
  • Мобильные веб-сайты: разработаны с использованием таких веб-технологий, как HTML, CSS и JavaScript, и доступны только через мобильный веб-браузер. На самом деле это веб-приложения.
  • Гибрид: кроссплатформенность и доступ к собственным API (в основном через плагины)

Архитектура гибридных мобильных приложений, разработанных с использованием Ionic Framework, состоит из двух концепций, с которыми необходимо ознакомиться как можно скорее: WebView и Apache Cordova.

Что такое WebView?

Думайте об этом как о браузере, который работает в рамках мобильного приложения с использованием Ionic. Этот браузер реализует код, написанный на HTML, CSS и JavaScript.

Приложение в конкретной мобильной операционной системе запускается с помощью такого инструмента, как Cordova. Он предоставляет API-интерфейсы, написанные на JavaScript, для взаимодействия с собственными функциями мобильного устройства, такими как доступ к камере или микрофону.

WebView взаимодействует с API-интерфейсами Cordova, которые затем взаимодействуют с мобильными устройствами.

WebViews настолько распространены в наши дни, что вы можете создавать настольные приложения с помощью Electron.

Для получения подробной информации о гибридных мобильных приложениях, я хотел бы, чтобы вы прочитали статью Джона Бристоу.

Что необходимо для разработки ионного приложения?

Эти инструменты понадобятся вам как часть настройки среды с вашей операционной системой.

Даже если вы не используете Node.js как часть своей среды разработки, для использования Ionic вам необходимо установить его, чтобы получить доступ к инструментам командной строки, таким как Bower, Gulp и собственный интерфейс командной строки Ionic, используя его менеджер пакетов Node: npm.

Установка Ionic

Ionic - это набор Angular.js, UI Router, директив Angular, сервисов Angular, утилит JS и стилей CSS, ориентированных на мобильные устройства. Они объединены как ionic.bundle.js и ionic.css.

Из командной строки:

$ npm install cordova ionic -g

Это установит инструмент, который вы собираетесь использовать: Ionic CLI, который является утилитой командной строки.

Для получения подробной информации о том, что он может делать:

$ ionic --help, в котором перечислены все задачи, которые вы можете выполнять с помощью этой утилиты.

Процесс разработки ионных приложений

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

  • пустой ionic start myApp blank
  • вкладки ionic start myApp tabs
  • sidemenu tart myApp sidemenu

Чтобы получить список всех доступных шаблонов Ionic, введите в терминале:

$ ionic start -l

ionic start - это команда, которая используется для формирования Ionic-приложения.

Создание каркаса для ионного приложения

$ ionic start -a "Example" -i app.example example blank

Эта команда может помочь вам сформировать Ionic Project со следующими параметрами:

  • -a "Example" удобочитаемое имя приложения
  • -i app.example идентификатор приложения
  • example имя папки проекта
  • blank ионный шаблон

Эти шаги позволяют обновить файл конфигурации с указанием имени приложения и его идентификатора. (Мы узнаем больше о файле конфигурации позже).

После этого шага, если вы внимательно посмотрите в окно терминала, запускается сценарий, который устанавливает шесть плагинов Cordova, упомянутых в package.json файле.

  • cordova-plugin-device для получения информации об устройстве
  • cordova-plugin-console определяет глобальный экземпляр console.log()
  • cordova-plugin-whitelist реализует политику белых списков для навигации по WebView приложения.
  • cordova-plugin-splashscreen показывает и скрывает заставку при запуске приложения на устройстве.
  • cordova-plugin-statusbar предоставляет функции для настройки строки состояния iOS и Android.
  • ionic-plugin-keyboard предоставляет функции для взаимодействия с клавиатурой

Итак, теперь у вас есть настройка проекта Ionic, и вы знакомы с основными элементами настройки проекта. Пришло время запустить приложение из командной строки с помощью команды ionic serve, чтобы запустить приложение локально на порту.

$ cd example
$ ionic serve

Он откроет окно браузера в веб-браузере по умолчанию, и вы увидите примерно следующее:

ionic serve --lab запустит приложение локально, показывая два экземпляра приложения для iOS и Android.

Для преднамеренного запуска приложения на другом номере порта: ionic serve -p 8080

Ионная структура проекта

Ниже приведена корневая структура Ionic Project после строительных лесов:

Я начну описывать, что содержится в каждой папке / файле в корневой папке приложения, сверху вниз.

  • hooks состоит из скриптов, которые выполняются при выполнении определенной задачи Cordova.
  • plugins содержит все плагины, добавленные в проект
  • www код ионного приложения, который мы пишем для создания приложения
  • scss состоит из базового файла scss (стили ионных компонентов пользовательского интерфейса)
  • .bowerrc путь к каталогу, в котором устанавливаются зависимости Bower
  • .editorconfig конфигурация редактора по умолчанию для краткости
  • bower.json список зависимостей Bower
  • config.xml метаинформация, необходимая Cordova при преобразовании приложения Ionic для конкретной платформы. Он состоит из тегов XML, описывающих проект.
  • gulpfile.js задачи сборки, используемые при разработке приложения
  • ionic.config.json информация о ионном применении

www / Папка

Эта папка является основной папкой нашего приложения, и в ней написан код нашего приложения. Он состоит из файла запуска приложения index.html, который действует как первая страница приложения, css для определения пользовательских стилей, images для добавления изображений в приложение, js который также состоит из app.js, где мы загружаем фреймворк AngularJS. В этом файле ionic передается как зависимость с использованием Angular Dependency Injection. $ionicPlatform - это служба, которая внедряется в run метод, который включает плагины Cordova, о которых говорилось ранее, и само приложение.

Последняя папка, lib, содержит пакеты / зависимости, которые устанавливаются с помощью Bower. Он содержит предварительно загруженную зависимость файлов Ionic и Angular.

Думаю, теперь у вас есть представление о том, как работает гибридное приложение, использующее Ionic Framework.

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

Хотите получать больше подобных статей? Подпишитесь на меня здесь. Иногда я отправляю подписчикам контент, который никогда раньше не видел.

Хакерский полдень - это то, с чего хакеры начинают свои дни. Мы часть семьи @AMI. Сейчас мы принимаем заявки и рады обсуждать рекламные и спонсорские возможности.

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