Как установить ionic на windows

Обновлено: 05.07.2024

04.01.2015 Разрабатываем гибридное приложение на HTML5

Ionic Framework & Cordova

Основные шаги по установке Ionic и настройке Cordova проекта

Настройка Ionic Cordova для компиляции под iOS в среде OSX ограничивается только установкой XCode и NodeJS, далее - обычные консольные команды по настройке Ionic.

Следующая инструкция предназначена для компиляции под Android в среде Windows.

Устанавливаем NodeJS и пакет npm
Из консоли NodeJS устанавливаем Ionic

> npm install -g cordova ionic

Можно сделать это в директории c:/ionic

> cd c:/ionic/
> ionic start appName blank

Нам не понадобится компонент "Android Virtual Device", т.к. мы будем использовать для эмуляции Genymotion

При установке указываем расположение Android SDK Installation Location: C:\Android\sdk\

После установки Android Studio Добавляем переменную среды ANDROID_HOME:

Регистрируемся и скачиваем Genymotion

Так же скачиваем и устанавливаем, желательно отдельно, VirtualBox.

Запускаем Genymotion и добавляем любое виртуальное устройство.

При желании можно установить Google Play на устройство. Для этого скачиваем

Genymotion-ARM-Translation_v1.1.zip и Google Apps для текущей версии андройда.

Далее перетаскиваем zip-архив в окно виртуального девайса. После установки первого, тем же методом устанавливаем второй.

Запускаем Android Studio

Для работы с Genymotion , идем в Configure → Plugins → Browse repositories. Находим плагин Genymotion и устанавливаем его.

В разделе Configure → SDK Manager добавляем необходимые SDK Platforms. На момент написания инструкции ionic требует версию с API Level 22, так что устанавливаем Android 5.1.1

Эмулятор Android должен быть уже запущен

> cd [app folder]
> ionic platform add android
> ionic build android
> ionic run android

В случае ошибок на этапе build (error. android-22..) нужно проверить, установлены ли запрашиваемые компоненты API в SDK Manager, если нет - устанавливаем.

Кастомизация CSS

Ionic Framework - качественно проработанный и адаптированный под основные устройства фреймворк, так что кастомизировать его следует очень осторожно.

Для начала, настроим компиляцию sass:

> cd [app folder]
> ionic setup sass

В случае возникновения ошибок, консоль запускаем от имени администратора и делаем так:

> cd [app folder]
> npm install
> ionic setup sass

Теперь мы можем писать свои scss-стили в файле scss/style.scss, а ionic будет автоматически все компилировать и обновлять вид.

Запуск в OSX

Процесс работы с Ionic-приложением для iOS аналогичен. Требуется только XCode.

Устанавливаем NodeJS, затем через npm устанавливаем Cordova и Ionic.

Возможно понадобится установить еще два пакета:

$ npm install -g ios-sim
$ npm install -g ios-deploy

$ ionic platform add ios
$ ionic build ios

Для запуска эмулятора определенного устройства, делаем следующие шаги:

Получаем список доступных для емуляции устройств:

$ ionic emulate ios --target="iPhone-4s"

Примечания

Для сохранения зависимостей выполняем команду

> ionic state save

Далее, после клонирования репозитория:

> npm install
> ionic state restore

Публикация в AppStore

На эту тему есть много инструкций. Поэтому рассмотрим только не штатные моменты.

ionic build ios

Перед архивацией проекта в Xcode необходимо удалить CFBundleIconFile из файла platforms/ios/ProjectName/ProjectName.plist

XCode: Project → Clean → Build → Archive

Публикация в Google Play

Перед билдом релиз-версии для android, нужно добавить файл platforms/android/build-extras.gradle:

ionic build --release android

Эта команда создаст файл platforms/android/build/outputs/apk/android-release-unsigned.apk.

Прописываем переменныю среды JDK (если еще не добавлены):

Создаем ключ для нашего приложения

> cd projectFolder/platforms/android/build/outputs/apk
> keytool -genkey -v -keystore mykeys.keystore -alias alias_for_project_key -keypass mypassword -dname "CN=Ihor Mykhalchenko O=MyCompany C=UA" -keyalg RSA -keysize 2048 -validity 10000

В папке с проектом будет сгенерирован файл хранилища ключей mykeys.keystore. Далее подписываем файл приложения:

> jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore mykeys.keystore android-release-unsigned.apk alias_for_project_key

Теперь оптимизируем apk и создаем финальный файл:

> C:/Android/sdk/tools/zipalign -v 4 android-release-unsigned.apk AppFinalName.apk

То же на OSX:

/Library/Android/sdk/build-tools/23.0.3/zipalign -v 4 platforms/android/build/outputs/apk/android-release-unsigned.apk AppFinalName.apk

Дебаг

Самый простой способ дебага приложения на нативном Android-девайсе - это подключить телефон по кабелю и перейти в браузере Chrome по ссылке

SSL соединения работают прекраснов debug-режиме, но как только мы выкатываем приложение в режиме release, могут возникнуть проблемы с соединением. Решение не идеальное но работающее:

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

Это базовая платформа, необходимая для создания мобильных приложений с использованием Ionic. Вы можете найти подробную информацию об установке NodeJS в нашей Установке среды NodeJS . Убедитесь, что вы также устанавливаете npm при установке NodeJS.

Android SDK

Если вы собираетесь работать на платформе Windows и разрабатываете свои приложения для платформы Android, то на вашем компьютере должна быть установлена Android SDK. Следующая ссылка содержит подробную информацию о настройке среды Android .

Если вы собираетесь работать на платформе Mac и разрабатываете свои приложения для платформы iOS, то на вашем компьютере должна быть установлена программа XCode. Следующая ссылка содержит подробную информацию о настройке среды iOS .

кордова и ионные

Это основные SDK, которые необходимы для начала работы с Ionic. В этой главе объясняется, как настроить Ionic простым шагом, при условии, что у вас уже есть необходимые настройки, как описано в таблице выше.

Android SDK

кордова и ионные

Установка Cordova и Ionic

Создание приложений

При создании приложений в Ionic вы можете выбрать один из следующих трех вариантов:

Приложение Tabs
Пустое приложение
Приложение бокового меню

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

Приложение Tabs

Если вы хотите использовать шаблон вкладок Ionic, приложение будет построено с меню вкладок, заголовком и парой полезных экранов и функций. Это стандартный Ionic шаблон. Откройте окно командной строки и выберите, где вы хотите создать свое приложение.

Эта команда изменит рабочий каталог. Приложение будет создано на рабочем столе.

Команда Ionic Start создаст папку с именем myApp и настроит Ionic файлы и папки.

Теперь мы хотим получить доступ к папке myApp, которую мы только что создали. Это наша корневая папка.

Теперь давайте добавим проект Cordova для платформы Android и установим также базовые плагины Cordova. Следующий код позволяет нам запускать приложение на эмуляторе Android или на устройстве.

Следующим шагом является создание приложения. Если после выполнения следующей команды возникают ошибки сборки, возможно, вы не установили Android SDK и его зависимости.

Команда Ionic Start создаст папку с именем myApp и настроит файлы и папки Ionic.

Давайте добавим проект Cordova для платформы Android и установим базовые плагины Cordova, как описано выше.

Наконец, мы запустим приложение, как показано ниже:

Приложение бокового меню

Третий шаблон, который вы можете использовать, это шаблон бокового меню. Шаги такие же, как в предыдущих двух шаблонах; мы просто добавим sidemenu при запуске нашего приложения, как показано в коде ниже.

Команда Ionic Start создаст папку с именем myApp и настроит файлы и папки Ionic.

Давайте добавим проект Cordova для платформы Android и установим базовые плагины Cordova с кодом, приведенным ниже.

Следующим шагом является создание нашего приложения с помощью следующего кода.

Наконец, мы запустим приложение с кодом, приведенным ниже.

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

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

Приведенная выше команда откроет ваше приложение в веб-браузере. Google Chrome предоставляет функциональные возможности режима устройства для тестирования мобильной разработки. Нажмите F12 для доступа к консоли разработчика.

В левом верхнем углу окна консоли есть значок «Переключить режим устройства». Следующим шагом будет нажатие на значок «Dock to Right» в правом верхнем углу. После обновления страницы вы должны быть готовы к тестированию в веб-браузере.

Структура папки проекта

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

Ресурсы. Эта папка используется для добавления в проект таких ресурсов, как значки и заставки.

Папка css , где вы будете писать свой стиль CSS.

Папка img для хранения изображений.

Папка js, которая содержит основной файл конфигурации приложений (app.js) и компоненты AngularJS (контроллеры, службы, директивы). Весь ваш код JavaScript будет внутри этих папок.

Папка libs , где будут размещены ваши библиотеки.

Папка шаблонов для ваших файлов HTML.

Index.html в качестве отправной точки для вашего приложения.

.gitignore используется для указания того, какую часть приложения следует игнорировать, если вы хотите перенести свое приложение в репозиторий Git.

bower.json будет содержать компоненты и зависимости bower , если вы решите использовать менеджер пакетов bower.

gulpfile.js используется для создания автоматизированных задач с помощью диспетчера задач gulp .

В package.json содержится информация о приложениях, их зависимостях и плагинах, которые устанавливаются с помощью диспетчера пакетов NPM.

Ресурсы. Эта папка используется для добавления в проект таких ресурсов, как значки и заставки.

Папка css , где вы будете писать свой стиль CSS.

Папка img для хранения изображений.

Папка libs , где будут размещены ваши библиотеки.

Папка шаблонов для ваших файлов HTML.

Index.html в качестве отправной точки для вашего приложения.

bower.json будет содержать компоненты и зависимости bower , если вы решите использовать менеджер пакетов bower.

gulpfile.js используется для создания автоматизированных задач с помощью диспетчера задач gulp .

В следующей главе мы обсудим различные цвета, доступные в Ionic Framework с открытым исходным кодом.

Программирование и разработка

Рынок мобильных приложений быстро становится одной из лучших платформ для охвата современных клиентов. Распространенной проблемой, с которой сталкиваются фронтенд-разработчики, является создание пользовательских интерфейсов (UI), которые выглядят и хорошо работают на всех платформах: Android, iOS или даже как веб-приложение.

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

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

Что такое Ionic?

Ionic — это комплект для разработки программного обеспечения с открытым исходным кодом (SDK), используемый для разработки мобильных, настольных или прогрессивных веб-приложений (PWA). Первоначально он был построен на основе AngularJS, но теперь поддерживает все основные интерфейсные фреймворки. Вы можете использовать Ionic для создания пользовательских интерфейсов для мобильных приложений, созданных с помощью Angular, React или Vue.js.

Ionic даже позволяет разрабатывать приложения Ionic Native без какой-либо структуры.

Ionic используется для создания гибридных приложений, которые по сути представляют собой веб-приложение, заключенное в собственную оболочку. Устройство устанавливает контейнер приложения локально (как собственное приложение), но приложение использует встроенный браузер для подключения к любым возможностям мобильной платформы. Встроенный браузер и любые плагины невидимы для пользователя.

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

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

Плюсы использования Ionic:

Настройка для конкретной платформы
Бэкэнд-агностик
Обширные встроенные параметры и элементы пользовательского интерфейса
Поддерживается ведущими мобильными и веб-платформами
Легко подобрать для тех, кто имеет опыт работы с Sass, CSS или HTML.

Минусы:

Низкая производительность для приложений Ionic Native (особенно для приложений с тяжелой графикой)
Зависимость от плагина, приложения могут полностью сломаться, если плагин отсутствует
Нет поддержки горячей перезагрузки, необходимо перезапустить приложение, чтобы изменения вступили в силу.

Как работает Ionic?

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

Сравнение компонентов на разных мобильных платформах

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

Если вы хотите выйти за рамки стандартной библиотеки, вы также можете создавать собственные компоненты. С этого момента пользовательские компоненты можно повторно использовать в вашем приложении.

Ионные компоненты записываются в TSXверсии JSXфайла TypeScript. TSX- это расширение TypeScript, которое позволяет размещать HTML-разметку непосредственно внутри вашего кода.

Вот пример TSXфайла, который использует как TypeScript, так и HTML.

Cordova

Ионные приложения становятся гибридными с включением фреймворка для разработки мобильных приложений Apache Cordova или Capacitor. Эти программы создают встроенный слой браузера, который позволяет веб-контенту Ionic работать в собственном приложении. После установки встроенного браузера ваше приложение функционирует как собственное приложение и может быть развернуто в магазинах приложений на iOS, Android, Electron или в Интернете как PWA.

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

Наконец, Cordova может создавать виртуальные эмуляторы популярных мобильных платформ, таких как Android или iOS, для тестирования ваших приложений.

Как Cordova и Ionic сочетаются друг с другом

Другие фреймворки

Ionic часто сочетается с другими интерфейсными фреймворками, такими как React и Angular.

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

Ionic React использует специфичные для DOM функции React с react-dom и незаметно реализует React Router для маршрутизации и навигации. React Ionic часто используется из-за того, насколько тесно он ведет себя и управляет, как стандартные приложения React.

Angular — это интерфейсный фреймворк, который обычно используется для корпоративных приложений. Он менее удобен для новичков, но Ionic предлагает инструменты и API, призванные помочь разработчикам Angular легко интегрировать эти две технологии.

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

Начало работы с Ionic

Теперь, когда у вас есть базовые знания, давайте перейдем к практическому обучению. Сначала мы расскажем, как установить Ionic, а затем перейдем к традиционной программе Hello World.

Installation

Для установки Ionic вам понадобится установленный Node.js. Мы установим версию Ionic для Cordova, которая включает оба программного обеспечения.

Введите следующий код в командную строку.

Подождите, пока команда запустится, и у вас будет все необходимое!

Hello World

Теперь мы сделаем простое HelloWorldприложение, которое покажет вам веревки.

Шаг 1

Сначала создайте папку helloworldдля вашего проекта с помощью следующей команды:

startсигналы в интерфейс командной строки для создания нового приложения.
helloworldбудет именем каталога и именем приложения для вашего проекта.
blankвыбирает встроенный blankшаблон, который содержит одну пустую стартовую страницу.

При появлении запроса, если вы хотите добавить плагины Cordova, введите Nили No.

Шаг 2

Измените свой каталог на helloworldкаталог, который мы только что создали. Это позволит вам вносить изменения в проект.

cd это сокращение от «изменить каталог».

Шаг 3

Откройте helloworldпапку в ваших файлах. Вы найдете коллекцию заранее созданных папок и пустых шаблонов файлов. Открыто src/page/home/home.html. Мы отредактируем этот файл на следующем шаге.

Остальные файлы в этом разделе home.scss- это страница для написания вашего кода CSS и home.ts, где вы можете писать код TypeScript.

Шаг 4

Удалите любой текущий текст в home.htmlфайле и замените его следующим:

Синтаксис этого раздела почти идентичен синтаксису HTML. Наша helloworldстраница в поле называется «Ионный проект». Единственный контент в нашем приложении — это термин «Hello World» внутри h2поля.

Сохраните изменения в файле и закройте home.html.

Шаг 5

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

serve запускает приложение в выбранном каталоге.

Когда ваше приложение запустится, введите его localhost:8100в адресную строку, чтобы просмотреть содержимое веб-приложения.

Сделайте своё первое Ionic приложение

Теперь мы создадим полное приложение с Ionicframeworkсайта и исследуем каждую часть.

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

Введите, npm installа затем команду custom-install в командную строку.

Затем cd firstappнажмите Enter, чтобы выбрать новый каталог проекта, и введите ionic serve.

firstappТеперь ваш проект будет запущен.

Если вы не хотите создавать файлы на своей стороне, вы можете продолжить, используя zip-файл ниже.

Обзор кода Ionic React

Давайте подробнее рассмотрим код этого приложения.

index.tsx

Откройте index.tsxфайл. Этот файл длинный, но самые важные части находятся вверху.

Строка 1: В верхней части файла вы можете увидеть оператор импорта для библиотек react и react-dom. Каждому приложению необходимо импортировать пространство имен React, чтобы использовать React.
Строка 2: ReactDOMпространство имен предоставляет методы, специфичные для объектной модели HTML-документа, которые должны вызываться из самого верхнего уровня приложения.
Строка 3: AppИмпорт включает определение самого приложения.
Строка 6: При вызове предлагается render()выполнить AppКомпонент и поместить его в контейнер, указанный вторым параметром. Этот контейнер представляет собой HTML-элемент с атрибутом id root, который находится в index.htmlфайле, найденном в общей папке.

index.html

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

bodyМетки на линии 25-27 содержит в divпаре с, rootчтобы index.htmlсоединиться с index.tsx.

App.tsx

Этот файл определяет Appкомпонент. Именно здесь начинается код React вашего приложения. Appопределяется как постоянная стрелочная функция типа React.FC. FCявляется сокращением от FunctionComponent.

Эта функция возвращает HTML для определения компонента. Большая часть ионного кода появляется в этой HTML-подобной форме.

Строка 3: возвращаемая разметка. Это все, что находится внутри returnзаявления.
Строка 4: Первое в нем — это файл IonApp. An IonApp- это корневой компонент Ionic, который должен отображаться на всех страницах Ionic-React.
Строка 5: Внутри него IonReactRouter. Это тонкая обертка Ionic вокруг React Router. React Router — это то, что позволяет вам создавать многостраничные приложения с богатыми переходами страниц с веб-сайта с помощью одного htmlфайла, также известного как одностраничное приложение(SPA).
Строка 6: Внутри IonReactRouterнаходится IonSplitPaneкомпонент. Это макет, который обеспечивает боковое меню, которое автоматически сворачивается в гамбургер-менюна небольших экранах.
Строка 7: Внутри IonSplitPaneнаходится Menuкомпонент.
Линия 8: Как непосредственный брат в Menuэто IonRouterOutlet. Здесь появляется содержимое вашей главной страницы. MenuНаходится на левой стороне, а IonRouterOutletдома все остальные приложения.
Строка 9: Внутри есть несколько определенных маршрутов. Думайте о маршруте как об URL-адресе. Учитывая путь, /page/:name, то:nameчасть будет переведена на переменный маршрут под названием «имя».
Строка 9: у componentатрибута есть компонент для загрузки при совпадении маршрута. В данном случае это Pageкомпонент. Точный атрибут означает, что этот маршрут будет соответствовать только в том случае, если URL-адрес начинается с косой черты, за которой следует слово страница, еще одна косая черта, а затем еще одно слово, которое становится «именем» страницы.
Строка 10: Второй маршрут — маршрут по умолчанию. Он просто говорит, что если совпавший URL-адрес представляет собой один символ косой черты, перенаправьте приложение на /page/Inbox.

Page.tsx

Page- еще один компонент, похожий на App. Основное отличие состоит в том, что FunctionComponentэто универсальный тип RouteComponentProps. Это то, что позволяет маршрутизатору передавать эти параметры маршрута.

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

Как мне установить IONIC на Windows. По какой-то случайной причине он не устанавливается.

Я установил Node, NPM и Cordova.

Но я получаю ошибки, когда пытаюсь установить IONIC.

Итак, проблема в том, что я не могу установить ионную.

C: \ Windows \ system32> ионный

'ionic' не распознается как внутренняя или внешняя команда, работающая программа или пакетный файл.

C: \ Windows \ system32> npm -v

C: \ Windows \ system32> cordova -v

C: \ Windows \ system32> узел -v

C: \ Windows \ system32> npm install -g ionic

Npm WARN устарел minimatch@0.2.14: пожалуйста, обновите до minimatch 3.0.2 или выше, чтобы избежать проблемы RegExp DoS

Npm WARN устарел minimatch@0.3.0: пожалуйста, обновите до minimatch 3.0.2 или выше, чтобы избежать проблемы RegExp DoS

Npm WARN устарел minimatch@2.0.10: пожалуйста, обновите до minimatch 3.0.2 или выше, чтобы избежать проблемы RegExp DoS

Npm WARN устарел node-uuid@1.4.8: вместо этого используйте модуль uuid

Npm WARN устарел node-uuid@1.3.3: используйте вместо этого модуль uuid C: \ Users \ jasonbullen \ AppData \ Roaming \ npm `- (пусто)

Npm ПРЕДУПРЕЖДЕНИЕ необязательное Пропуск ДОПОЛНИТЕЛЬНАЯ ЗАВИСИМОСТЬ: fsevents@^1.0.0 (node_modules \ ionic \ node_modules \ chokidar \ node_modules \ fsevents):

Npm WARN notsup Пропуск необязательной зависимости: неподдерживаемая платформа для fsevents @ 1.1.1: wanted (current: )

Npm ПРЕДУПРЕЖДЕНИЕ В ionic@2.2.1 замена связанной версии mime-types на mime-types @ 2.0.14

Npm ПРЕДУПРЕЖДЕНИЕ В ionic@2.2.1 замена связанной версии semver на semver@4.2.0

Npm ПРЕДУПРЕЖДЕНИЕ В ionic@2.2.1 замена объединенной версии перекрестного вызова на cross-spawn@4.0.2

Npm ПРЕДУПРЕЖДЕНИЕ В ionic@2.2.1 замена связанной версии form-data на form-data@0.2.0

Npm ПРЕДУПРЕЖДЕНИЕ В ionic@2.2.1 замена связанной версии запроса на request@2.51.0

Npm ПРЕДУПРЕЖДЕНИЕ В ionic@2.2.1 замена связанной версии ionic-app-lib на ionic-app-lib@2.2.0

Читайте также: