Quasar Framework — универсальный Vue-фреймворк

Создаем web-приложение и мобильное приложение из одного исходного кода.

Published in

devSchacht

7 min readOct 5, 2017

Перевод статьи “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 съэкономил мне много времени
оба созданных приложения успешно работают