Quasar Framework — универсальный Vue-фреймворк
Создаем web-приложение и мобильное приложение из одного исходного кода.
Перевод статьи “Vue2 and Quasar Framework — one source code for browser and Mobile applications (.ipa — IOS and .apk — Android)”. С разрешения автора Greg Kroczek.
Несколько дней назад я был занят поиском фреймворка под библиотеку Vue.js. Такого фреймворка, на котором можно было бы создавать универсальный код — как для веб-приложения, так и для мобильного приложения (под iOS и под Android-устройства одновременно).
Моей основной целью было свести к минимуму время для написания кода приложения, которое одинаково хорошо работало бы на мобильных устройствах и в браузерах.
Я просмотрел множество ресурсов с описанием профессиональных инструментов подобного рода. Во многих источниках на первом месте фигурировал фреймворк Weex.
Однако мое внимание привлек другой фреймворк — Quasar Framework, возможности которого мне показались много большими, нежели у Weex.
Вот почему я решил пожертвовать время на написание статьи о Quasar Framework. Целью данного обзора является создание приложения, которое могло бы одинаково работать на различных устройствах.
Мне было интересно посмотреть, как приложение, собранное из одного исходного кода, будет работать в качестве мобильного приложения как под iOS, так и под Android.
Вопрос — почему Cordova работает под Quasar Framework без каких-либо проблем? Секрет заключается в отлично написанной оболочке фреймворка Quasar Framework. Данная оболочка отвечает за генерирование Cordova-приложения из исходных файлов проекта Quasar Framework.
Ниже представлен пример готового приложения, которое одинаково работает как в обычном веб-браузере, так и под Android-устройством и iOS-устройством:
Quasar Framework — создание веб-приложения
Для начала давайте создадим обычное веб-приложение на Vue.js, используя Quasar Framework.
Данный фреймворк имеет в своем составе консольную утилиту quasar-cli для быстрого развертывания проекта на Quasar Framework.
Чтобы воспользоваться этой утилитой, ее необходимо первоначально установить (глобально) как обычный npm-пакет:
$ npm install -g quasar-cli
Теперь можно развернуть новый проект на Quasar Framework под именем my-project:
$ quasar init my-project
Затем переходим в директорию проекта и устанавливаем все зависимости из файла package.json:
$ cd my-project
$ npm install
Примерный вид сгенерированного проекта представлен ниже:
Quasar Framework поддерживает два режима работы.
Debug mode — режим отладки Vue-приложения с поддержкой hot reload. Для запуска проекта в этом режиме нужно указать ключ dev в консольной утилите quasar.
Помимо этого, Quasar Framework поддерживает две темы оформления для создаваемого приложения — тема оформления Material Design и тема оформления iOS.
Для запуска проекта в режиме отладки с поддержкой Material Design запускаем команду:
$ quasar dev
… или:
$ quasar dev mat
… что одинаково по результату. Команда quasar dev является сокращением команды quasar dev mat.
Для запуска проекта в режиме отладки с поддержкой темы оформления iOS нужна команда:
$ quasar dev ios
Вид проекта в браузере в момент первоначальной инициализации:
Release mode — режим сборки приложения. В этом режиме в папку /dist производится генерация готового кода приложения. Фреймворк оптимизирует код приложения и соединяет все части в единое целое. Производится минификация кода, проверка вендорных префиксов, очистка кэша браузера и многие другие вещи.
Команда для запуска сборки готового приложения:
$ quasar build
Также можно запустить сборку приложения с указанием определенной темы оформления:
$ quasar build mat
… или:
$ quasar build ios
В соответствии с официальной документацией фреймворка Quasar Framework, можно локально запускать сервер статических файлов прямо из директории.
При этом в браузере будут автоматически отображаться все изменения в текущем проекте.
Для запуска в этом режиме нужно выполнить команду:
$ quasar serve
Можно также запустить команду с указанием относительного или абсолютного пути (три варианта на выбор — результат одинаковый получится):
$ quasar serve dist
$ quasar serve ./dist
$ quasar serve /work/quasar-app/dist
Quasar Play App
При разработке проекта на Quasar Framework можно воспользоваться мобильным приложением Quasar Play. Цель создания этого приложения — возможность тестирования проекта непосредственно на мобильном устройстве.
Приложение создано под Android и доступно для установки с Google Play. Преимущество использования Quasar Play заключается в том, что можно тестировать создаваемое приложение на “настоящем” устройстве.
Для запуска проекта с возможностью тестирования в Quasar Play нужно ввести команду:
$ quasar dev --play
После установки приложения Quasar Play на мобильном устройстве нужно его запустить. Затем сканировать QR-код, который сгенерируется в терминале командой quasar dev (см. скриншот выше).
Тем самым приложение Quasar Play получает ссылку на запущенный сервер проекта. Результатом является отображение разрабатываемого приложения прямо на физическом Android-устройстве.
Можно ввести ссылку на работающий сервер проекта вручную, но это не так удобно.
Создание приложения под iOS и Android
В данном разделе необходимо акцентировать внимание на наиболее важных моментах разработки приложения под Android и iOS.
Предполагается, что пакеты приложений Android Studio и Xcode уже установлены и правильным образом настроены на локальной машине, на которой производится разработка приложения.
За более подробной информацией можно обратиться на страницу официальной документации Quasar Framework — Cordova App Wrapper.
Для генерирования мобильной версии текущего приложения используется платформа Cordova Platform. Первоначально ее необходимо установить глобально (ключ -g) на локальной машине с помощью менеджера пакетов npm:
$ npm install -g cordova
Затем при помощи команды:
$ quasar wrap cordova
… из текущего Quasar-проекта создается Cordova-приложение.
В дополнение к платформе Cordova крайне рекомендуется установить в проекте плагин Crosswalk WebView Cordova.
Цель данного плагина — предотвращение возможных проблем, связанных с ошибками поведения более старых версий Android-платформ.
Для установки плагина нужно перейти в директорию cordova текущего проекта:
$ cd cordova
… и установить плагин cordova-plugin-crosswalk-webview командой:
$ cordova plugin add cordova-plugin-crosswalk-webview
Затем добавляем в проект поддержку Android-платформы:
$ cordova platform add android
… и запускаем эмулятор Android-системы:
$ cordova run android
Сборка Android-версии приложения
Для сборки готового приложения под операционную систему Android можно воспользоваться командой:
$ cordova build --release android
Готовый .apk-файл текущего приложения располагается по пути:
cordova > platforms > android > build > outputs > apk > android-arm7-release.apk
Этот файл является программой, которая работает под операционной системой Android.
Создание iOS-версии приложения
Теперь самое время перейти к вопросу создания версии приложения под iOS.
Важное замечание — для создания ios-пакета в текущий проект необходимо добавить поддержку операционной системы iOS!
Для этого в платформу Cordova добавляем систему iOS:
$ cordova platform add ios
Перед запуском разрабатываемого проекта необходимо подключить к проекту существующее физическое устройство или запустить в консоли симулятор этого устройства, например iPhone 7s Plus.
Список всех поддерживаемых устройств и их симуляторов можно получить командой:
$ cordova run ios --list
В приведенном ниже скриншоте обратите внимание на первую строку после команды cordova run.
Эта строка означает, что к локальной машине iMac подключено реальное физическое устройство iPhone, на котором можно тестировать текущий проект:
Важно — для запуска разрабатываемого приложения на физическом устройстве необходимо иметь зарегистрированный профиль разработчика по адресу https://developer.apple.com.
Это понадобится для подписывания готового приложения:
Для запуска iOS-версии разрабатываемого приложения в симуляторе нужно запустить команду:
$ cordova run ios --target="iPhone-7-Plus"
Для запуска iOS-версии разрабатываемого приложения на физическом устройстве (например, iPhone) требуется команда:
$ cordova run ios --device
Сборка iOS-версии приложения
Для запуска процесса сборки iOS-версии приложения на физическом устройстве (например, iPhone) нужно запустить команду:
$ cordova run ios --device
Эта команда запустит сборку .ipa-пакета для физического устройства, к примеру — iPhone 7s Plus.
Если используется Cordova iOS версии 3.9.0 или более поздняя, то для процесса сборки .ipa-пакета можно использовать команду без каких-либо дополнительных зависимостей:
$ cordova build ios --device --release
Для запуска процесса сборки в корне текущего проекта потребуется файл build.json:
{
"ios": {
"debug": {
"codeSignIdentity": "iPhone Developer",
"provisioningProfile": "your-dev-provisioning-profile-UUID-here"
},
"release": {
"codeSignIdentity": "iPhone Distribution",
"provisioningProfile": "your-distribution-provisioning-profile-UUID-here"
}
}
}
Если на локальной машине, где производится сборка проекта, установлен пакет Xcode версии 8 или более поздней, то в файле build.json потребуются два дополнительных поля developmentTeam и packageType.
Также отпадает необходимость в зарегистрированном профиле Apple-разработчика, так как его можно заменить дополнительным полем iPhone Developer для отладки и размещения приложения:
{
"ios": {
"debug": {
"codeSignIdentity": "iPhone Developer",
"developmentTeam": "UUIDDevTeam",
"packageType": "development"
},
"release": {
"codeSignIdentity": "iPhone Developer",
"developmentTeam": "UUIDDevTeam",
"packageType": "app-store"
}
}
}
Готовый .ipa-файл сборки располагается по адресу:
cordova > platforms > ios > build > device
Этот файл является готовым приложением, которое работает под устройством iPhone 7 Plus.
В процессе разработки и тестирования приложения под iOS можно столкнуться с некоторыми ошибками.
Решения некоторых из этих проблем представлено ниже.
Ошибка:
“Cannot read property ‘replace’ of undefined”.
Для решения проблемы нужно запустить установку пакета ios-sim:
$ npm i -g ios-sim
Ошибка:
“The operation couldn’t be completed. (FBSOpenApplicationErrorDomain error 1.)”.
Можно предложить несколько способов решения этой проблемы.
- Убедиться, что используется последняя версия симулятора (v.10 и выше):
$ cd cordova
$ cordova plugin add cordova-plugin-crosswalk-webview
2. Выгрузить приложение из симулятора и затем перезапустить его:
После этого удалить приложение из симулятора.
Заключение
В качестве подведения итогов и ответа на возможные вопросы читателей можно привести краткий список с небольшим заголовком:
В процессе написания данной статьи:
- все пакеты генерировались без каких-либо проблем
- Quasar Framework съэкономил мне много времени
- оба созданных приложения успешно работают