Vue js iphone app

Как 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 проект командой:

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

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

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

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

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

После команды у вас откроется классический 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

quasar dev -m cordova -T android

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

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

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

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

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

Я надеюсь, вы понимаете, что путь после …$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

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

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

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

quasar build -m cordova -T ios

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

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, милости прошу пройти по ссылке выше.

Опубликовано: 2020-06-05 9:55

Нужен сайт?

Готов за разумную плату разработать сайт, CRM-систему или внедрить дополнительный функционал в существующий проект.

Источник

Как устанавливать, создавать и развертывать нативные приложения с помощью Vue

Vue-Native – это фреймворк для создания кроссплатформенных мобильных приложений. Он позволят разрабатывать приложения в Vue.js, используя React Native.

Мы создадим приложение, которое извлекает популярные гифки с платформы Giphy , используя Giphy API. Приложение будет отображать гифки и информацию о них с помощью компонентов ScrollView, Text, Image и т.д.

Требования

Чтобы следовать этому руководству, вам нужно установить Node версии не ниже 6.0. А также менеджер пакетов NPM (поставляется вместе с Node) или Yarn.

Кроме этого необходимы базовые знания JavaScript и Vue. Вы можете обратиться к официальной документации Vue, размещённой здесь .

Подготовка

Сначала нужно настроить проект и установить зависимости. Мы будем использовать встроенный CLI Vue для инициализации нашего приложения.

Сначала установите Vue Native CLI, выполнив следующую команду:

Затем инициализируйте новый проект:

Выполнение этой команды загрузит приложение Create React Native App с помощью Expo CLI.

На момент написания этого руководства Vue Native CLI требуется React Native версии 0.55.4 и expo версии 29.0.0. Обновите файл package.json , чтобы установить эти версии. Мы также добавим команды для сборки под платформы iOS и Android , изменив объект scripts .

Затем обновите sdkVersion в файле app.json , чтобы он соответствовал версии expo. Откройте файл app.json и измените его, как показано ниже:

После этого запустите команду npm install или yarn , чтобы установить необходимые версии приложений. Затем запустите приложение с помощью команды npm start .

Для создания и запуска нашего приложения мы будем использовать Expo. Это набор инструментов с открытым исходным кодом, созданный на основе React-native и предназначенный для разработки приложений под Android и iOS.

Тестирование на мобильном устройстве

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

Выполните команду npm run start-native в папке проекта, чтобы запустить приложение с помощью expo. Обычно Expo запускает через порт 19002. Откройте страницу http://localhost:19002 для просмотра инструментов разработчика, предоставляемых платформой. Здесь вы сможете отправить ссылку для предварительного просмотра в SMS или по электронной почте.

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

Следующий простой способ – загрузить официальное мобильное приложение Expo. Его можно найти Apple App Store или Google Play.

Чтобы запустить приложение в iOS, после установки откройте камеру и отсканируйте штрих-код. В Android вы также можете использовать приложение Expo.

Выполните следующую команду:

После запуска приложения отсканируйте штрих-код и просмотрите приложение в Expo.

Следующий вариант тестирования на мобильном устройстве – использование эмулятора или симулятора в Android studio или Xcode . Скачайте и установите инструмент для интересующей вас платформы. После этого выполните любую из следующих команд, чтобы запустить приложение:

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

Чтобы начать использовать Giphy API, войдите в свою учетную запись Giphy. Следующим шагом является создание приложения в платформе разработчика .

На панели инструментов учетной записи разработчика есть кнопка «Создать приложение», нажмите её и введите сведения о своем приложении.

После этого приложение должно отображаться на панели инструментов с ключом API. Этот ключ будет использоваться при отправке запросов в Giphy.

Для этого мы будем использовать Javascript SDK . Выполните следующую команду для установки пакета:

Теперь можно использовать API с помощью этого SDK.

Компонент приложения

Создаваемое нами приложение отображает популярные гифки, доступные на платформе Giphy. Через Giphy API мы получаем нужное изображение, заголовок и тип Gif. Данные будут отображаться с помощью компонентов, предоставляемых vue-native. Откройте файл App.vue, расположенный в корневой папке проекта и измените его, как показано ниже:

В приведенном выше фрагменте кода компонент App отображает компонент scrollview . Он является контейнером для других компонентов. Он отображает только ActivityIndicator , который будет заменен списком гифок после завершения вызова API.

Также мы создаем экземпляр клиента Giphy, используя ключ API из панели инструментов разработчиков. Нужно заменить строку ‘ GIPHY_API_KEY ‘ на ключ API.

Вызов метода trending осуществляет запрос к Giphy. Первым передаваемым параметром является gifs . Он указывает, какие популярные элементы должны быть возвращены: гифки или стикеры. Второй параметр – это объект, предоставляющий необязательные параметры: limit (лимит), offset (смещение), rating (рейтинг) и fmt (формат).

Мы передадим только параметр limit , ограничив результаты 20 элементами. Этот вызов выполняется в созданном жизненном цикле компонента. Далее мы создадим элемент gif для отображения возвращенных результатов.

После перезагрузки приложение должно отобразить индикатор активности:

Создание компонента gif

Каждый элемент gif будет отображаться с использованием компонента View . Он поддерживает макет с использованием flexbox, стилей и специальных возможностей. Каждый элемент будет отображать гифку, заголовок и тип. Создайте папку components в корневой папке проекта. В каталоге компонентов создайте файл GifItem.vue и измените его, добавив приведенный ниже код:

Используя компонент Image , мы отобразим источник каждого изображения. А с помощью компонента Text — заголовок рисунка. Компонент Image имеет свойство source , которое является объектом со свойством uri .

Метод titleCase принимает заголовок gif-файла и возвращает текст, делая первые буквы слов заглавными. Компонент GifItem имеет одно свойство — gif .

Изменим файл App.vue , чтобы создать новый GifItem . Добавьте в файл следующий фрагмент кода:

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

Компонент заголовка

После успешного запроса популярных гифок и их отображения добавим заголовок для представления контекста приложения. Используя компонент View, создадим область для размещения заголовка приложения. Создайте файл header.vue в каталоге components и измените его с помощью кода, приведенного ниже:

Теперь добавим компонент заголовка к компоненту приложения. Это отобразит простой заголовок в верхней части приложения. Обновите файл `App.vue`, включив в него компонент Header :

После этого заголовок будет добавлен в верхнюю часть приложения.

Развертывание приложения

Мы будем развёртывать наше приложение в магазине Google Play. Для этого нужно в файл app.json добавить специфические свойства Android. Откройте файл app.json и включите в него поле `android`:

Поле android.package – это уникальное значение, которое будет представлять ваш пакет в магазине приложений. После изменения файла выполните команду npm run build:android .

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

После этого будет сгенерирована ссылка для загрузки приложения.

Чтобы развернуть загруженный APK-файл в магазине Google Play, перейдите в Play Console и создайте учетную запись. После чего оплатите регистрационный сбор в размере 25 долларов США.

Для окончания регистрации перейдите на эту страницу и следуйте инструкциям, чтобы загрузить приложение в магазин Google Play.

Заключение

Vue native предоставляет решение для создания мобильных приложений с использованием Vue.js. Он компилируется в React и использует компоненты React Native.

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

Пожалуйста, оставляйте свои отзывы по текущей теме статьи. За комментарии, подписки, дизлайки, отклики, лайки низкий вам поклон!

Дайте знать, что вы думаете по этой теме в комментариях. Мы крайне благодарны вам за ваши комментарии, лайки, отклики, подписки, дизлайки!

Источник