Как cделать мобильное приложение на Vue.js

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

И тут я натыкаюсь на Quasar, инструмент с MIT лицензией, с помощью которого можно создавать кроссплатформенные приложения под Android и iOS. Все что нужно знать программисту - это JavaScript и потрясающий реактивный фреймворк Vue.js.

Введение (или дисклеймер)

Это статья не универсальное пошаговое руководством по созданию мобильного приложения на JavaScript. Я просто хочу познакомить вас бесплатно с прекрасным инструментом, постараюсь рассказать о проблемах, с которыми я столкнулся и каким путем их решал.

Если выполнить все команды и условия, описанные в этой статье, у вас получится собрать простое мобильное приложение. Правда, по пути вас поджидает куча непредвиденных проблем, связанных с настройкой виртуального окружения. Будьте готовы.

Перед началом...

Если вы хотите сделать приложение для Android, то вам понадобится установить на рабочий компьютер Android Studio, Java SDK 8, Gradle и настроить корректно все системные переменные ($path на Mac и Linux или “Системная переменная” на Windows).

Если вы хотите сделать приложение для iOS, понадобится Xcode и компьютер с операционной системой Apple.

Как видите, вам придется не один час потратить на установку и отладку своего виртуального окружения.

Зачем компьютер от Apple

Ограничение, которое наложило Apple на разработчиков. Без этого невозможно собрать приложение под iOS. Не хотите тратить деньги? Можете поставить хакинтош. И точка.

Если кто-то подумает что может это как-то можно обойти, забегу вперед и расстрою: нет. Пока никто не придумал, как собирать яблочные приложения не из-под Mac.

Знакомство c Quasar

Quasar - это фреймворк (для фреймворков, но об этом чуть позже). Сам он имеет набор собственных тегов, а весь JavaScript располагается во Vue компонентах.

Обратите внимание на скриншот выше: , , это теги Quasar, подробней в документации. Документация вся на английском, поэтому, если вы не можете читать на английском техническую информацию, лучше отложить знакомство с Quasar.

В остальном, это обычный Vue.js, и здесь нет ничего “необычного” кроме его собственных тегов и некоторых методов из документации. Все также вызываем корневой экземпляр Vue, в каждом модуле заполняем data и пишем методы. Все это дело собирается через webpack (dev server с hot reload в комплекте). Classic. Если вдруг не поняли мое последнее предложение, прочитайте статью про webpack по ссылке выше.

Ах да, в установочном пакете (об этом позже) из коробки есть поддержка scss и stylus (что просто божественно).

Резюмируя: если вы работали с Webpack и Vue, знаете как без проблем передавать данные между Vue компонентами, знакомы с , знакомы со store (vuex), знакомы с webpack переменными, у вас достаточно энергии и сил разбираться с грядущими проблемами сборки и есть желание копаться в Android Studio и Xcode - тогда проблем с разработкой не будет.

Как оно работает

Да тех, кому интересно как же JavaScript работает в мобильном устройстве. Все очень просто, ваше приложение - это браузер.

Quasar- это инструмент, который позволяет элегантно вписать ваш Vue.js код в программное обеспечение Cordova. А Cordova это уже сам браузер (образно), который запускает ваш JavaScript.

Также, Cordova содержит в себе ряд плагинов, которые через JavaScript (внутри браузера Cordova) позволяют обращаться к камере, push уведомлениям, геолокации, контактам, bluetooth и.т.д. Полный список поддерживаемых функций можно найти здесь.

Конечно, можно обойти Quasar и напрямую работать с Cordova. Возможно, у вас получится подружить Cordova с React. Хотя у последнего для мобильной разработки есть React Native.

Боже, да, я знаю людей, которые на JQuery писали программу и превращали ее в приложение через Cordova. Правда, результат их работы выглядел очень мерзко. Представьте реакцию пользователя, который нажимает на “каталог” в такой “программе” и вместо реактивного изменения компонента (беззагрузочной подстановки страницы) получает обычную загрузку страницы как в браузере.

Vue.js позволяет создавать шикарные SPA и PWA приложения, которые запускаются в браузере, но выглядят как натуральные мобильные и десктопные приложения! Блин, современные SPA и PWA почти ничем не отличаются от программ, лишь наличие браузера показывает пользователю, что он находится все еще на сайте. Quasar позволяет стереть эту грань.

Первые шаги

Давайте создадим проект. Для начала нам понадобится Node.js, а конкретно менеджер пакетов npm. Скачать можно отсюда.

После установки Node.js идем на страницу установки Quasar. Отсюда берем команду:

npm install -g @quasar/cli

Если вы используете Mac OS или Lunix, добавьте команду sudo перед установкой пакетов.

Далее создаем Quasar проект командой:

quasar create

Важно: название проекта должно быть написано единым словом, иначе при сборке все полетит к чертям. Рекомендую не запариваться и использовать Camel Case. Все равно название приложение можно будет потом поменять.

Далее вам зададут 8 вопросов.

1. Заполните имя проекта (пишете как хотите).
2. Заполните описание.
3. Заполните автора приложения.
4. CSS препроцессор выбирайте по вкусу.
5. Если понимаете о чем речь, выбирайте сами. Если нет - включайте автоимпорт.
6. Подключите дополнительные функции на выбор (я тут обычно отказываюсь от всего, хотя, думаю, вещи из этого списка типа Axios вам знакомы)
7. Введите cordova id. Это будет что-то вроде уникального сертификата для сборки приложения в дальнейшем.
8. Выбирайте NPM.

После установки проекта перейдите к нему в папку с помощью команды:

cd

И запускайте проект с помощью команды:

quasar dev

После команды у вас откроется классический localhost сервер с hot reload. Предлагаю вам свернуть статью на это время и пошалить с вашим будущим приложением. Сделайте пару статических страниц, напишите маленькое приложение, например, to do list или калькулятор шашлыка. Я не знаю, просто творите.

Вопрос: особо технически грамотные могут спросить: «Макс, а вот пользователь вносит какие-то данные в программу, но после перезагрузки браузера данные же стираются (если их не сохранять в cookie или базу данных), здесь не будет так же (после перезагрузки приложения)?»

Ответ: естественно, здесь будет также. Как и на любом другом сайте, так и в приложении от Cordova данные после выключения будут потеряны. Но вы можете использовать Local Storage или попытаться приделать своему приложению Web SQL. Грубо говоря, вам нужно воспользоваться готовым API от браузера (Cordova), чтобы сохранять введенные пользователем данные. Вот ссылка на документацию.

Эмуляция: проблемы и головная боль

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

В quasar.conf.js в разделе manifest можно задать имя и описание проекта. Имя из manifest пойдет в название приложения (под иконкой). Возможно, здесь я ошибаюсь, так как название приложения я обычно меняю позже в config.xml в папке src-cordova, которая появляется после запуска проекта в dev режиме на мобильном устройстве.

Запускать проект в тестовом режиме для iOS можно командой:

quasar dev -m cordova -T ios

Для android:

quasar dev -m cordova -T android

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

Проблемы с эмуляцией Android

Например, у меня никак не получалось запускать через Терминал команду “quasar dev -m cordova -T android”.

Сначала у меня была ошибка, в которой компилятор сказал якобы у меня нет Gradle.

Данную проблему я решил довольно просто: перед стартом dev/build команды я добавляю путь к Gradle к системной переменной $PATH:

export PATH=$PATH:/Users/Max/gradle/gradle-6.5/bin

Я надеюсь, вы понимаете, что путь после …$PATH:.. у вас совсем другой будет. Тем более это решит проблему на Mac, но не на Windows. Как это сделать на Windows читайте тут.

Также, у меня была ошибка “PANIC: Missing emulator engine program for 'x86' CPUS”, (после того как я разобрался с Gradle) поэтому я сначала “собрал финальную сборку” проекта без эмуляции через команду:

quasar build -m cordova -T android

Ведь у меня больше не было проблем с Gradle. А после открыл проект (билд) через Android Studio

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

После, студия попросила меня поставить пакет системных картинок. К слову, сначала я поставил пакет ‘R’, и вроде бы у меня все заработало, эмулятор стал запускаться (через нажатие на зеленую кнопку пуск в navbar внутри android studio), но терминальная команда до сих пор не работала. После я вычитал здесь, что нужно поставить Oreo и, о боже, у меня теперь все запустилось через терминал.

Теперь, когда я вызывал через терминал команду “quasar dev -m cordova -T android” у меня наконец-то открывалась эмуляция.

Проблемы с эмуляцией iOS

К моей радости, на этом этапе работы я не столкнулся с проблемами. Но это не значит, что их нет.

Сборка: финал

Для “финальной” сборки используются команды...

Для iOS:

quasar build -m cordova -T ios

Финальная сборка будет лежать в папке название_проекта/src-cordova/platforms/ios, здесь будет файл название_проекта.xcodeproj. Можете его запустить, и у вас откроется Xcode.

И для Android:

quasar build -m cordova -T android

Финальная сборка будет лежать в папке название_проекта/src-cordova/platforms/android. Просто откройте этот путь в Android Studio и увидите свой проект.

Теперь вы можете работать в этих “системах”. Например, можно выпустить приложение к себе на телефон и проверить его работоспособность. Или бесконечно эмулировать на различных устройствах, ища баги. Ах да, еще не забудьте установить иконки для своего приложения, это можно сделать по инструкции от Quasar или через Xcode и Android Studio.

Если все хорошо, можно выпускать приложение в Apple Store или Google Play. Но это уже другая история и достойна отдельной статьи. Если интересно, можете почитать соответствующий раздел в документации Quasar. Хотя, там не все так подробно описано как хотелось, но мне хватило. Свою же статью на эту тему постараюсь написать попозже. 

P.S: По "секрету" хотелось добавить: Хотя получившиеся приложение получилось кроссплатформенным (т.е это как бы браузер), его исходный код все равно можно расширить через написание нативных плагинов под Cordova. Т.е нет особого труда в том, чтобы добавить в свое приложение Face/Touch ID, хотя изначально это не предусмотренно фреймворком Quasar и Cordova.

P.S.S: Если интересно как локализировать iOS приложение на Swfit с помощью Xcode, Storyboard и NSLocalizedString, милости прошу пройти по ссылке выше.