Что такое ионный?
В последние дни я знакомился с 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
список зависимостей Bowerconfig.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. Сейчас мы принимаем заявки и рады обсуждать рекламные и спонсорские возможности.
Если вам понравился этот рассказ, мы рекомендуем прочитать наши Последние технические истории и Современные технические истории. До следующего раза не воспринимайте реалии мира как должное!