От автора: совсем недавно команда NativeScript Vue объявила выпуск NativeScript-Vue 1.0. Как следует из названия, NativeScript-Vue — это проект, который интегрирует Vue.js в NativeScript, позволяя вам создавать полностью родные приложения для iOS и Android с помощью Vue.js. В этой статье мы рассмотрим, как вы можете начать создавать свое первое приложение с помощью NativeScript-Vue и ответим на некоторые распространенные вопросы. Давайте начнем.
Выбор среды
Начнём с того, что есть два способа разработки с помощью NativeScript-Vue.
Вариант 1: Работа в NativeScript Playground: NativeScript Playground — это среда разработки NativeScript, основанная на браузере, который позволяет запускать кодирование без настройки собственных iOS и Android SDK на машине разработки.
Вариант 2: Использование CLI NativeScript: CLI NativeScript — это интерфейс командной строки для создания и запуска приложений NativeScript. Поскольку CLI NativeScript создает реальные бинарные файлы iOS и Android, вы должны установить необходимые native зависимости для разработки с использованием CLI.
В этой статье мы начнем разработку с помощью NativeScript Playground, так как это отличный инструмент для изучения того, как работает NativeScript-Vue, не испытывая затруднений при настройке локальной среды. После этого мы рассмотрим следующие шаги, которые нужно предпринять, чтобы настроить локальный процесс разработки NativeScript-Vue.
А теперь приступим к разработке.
Использование NativeScript Playground
Начните с посещения сайта https://play.nativescript.org/?template=play-vue, в котором открывается Playground с предустановленным шаблоном Vue. Первое, что вы увидите, — это подсказка, которая выглядит следующим образом.
Чтобы использовать NativeScript Playground, вам необходимо загрузить и установить два приложения на устройстве iOS или Android. Первое приложение «NativeScript Playground» имеет возможность сканировать QR-коды, которые вы видите в своем браузере, а второй «NativeScript Preview» — это приложение, которое запускает код, который вы пишете в своем браузере. Вот что вам нужно сделать.
Загрузите и установите приложения NativeScript Playground и NativeScript Preview на устройстве iOS или Android. Если у вас несколько устройств, вы можете установить приложения на всех устройствах. Playground позволяет вам работать на нескольких устройствах одновременно, и это довольно круто.
Откройте приложение NativeScript Playground на вашем устройстве(ах) и нажмите «Scan QR-code».
Cканируйте QR-код в своём Playground (а не QR-код в этой статье); в приложении вы должны увидеть следующее:
Это приложение может показаться простым, и похоже, что так оно и есть, но всё же есть одна особенность: компоненты пользовательского интерфейса, которые вы видите на экране, не являются элементами DOM — они полностью адаптированы для Android и iOS. В частности, элементы управления текстом в приложении, — это UILabel на iOS и android.widget.TextView на Android.
Сила NativeScript заключается в том, что вы можете использовать эти элементы управления с помощью JavaScript и использовать такие фреймворки, как Vue. Круто, да?
Теперь, когда вы активизировали свою работу, давайте начнем вносить некоторые изменения. Например, перейдите и измените text атрибут одного из элементов управления <Label> , а затем используйте Cmd + S (или Ctrl + S в Windows), чтобы сохранить обновление. Вы должны увидеть изменения на своем устройстве.
ПРИМЕЧАНИЕ. Я не ускорял этот gif — Playground действительно так быстро. Попробуйте сами!
Давайте на этом примере сделаем еще кое-что. В Playground есть набор компонентов, которые вы можете легко перетащить в свой код, чтобы добавить в приложение. Возьмите кнопочный элемент управления (см. изобржание ниже, если вы не можете найти этот элемент) и перетащите компонент в шаблон приложения. Сохраните изменения, и вы должны увидеть, что кнопка автоматически появляется на вашем устройстве.
Теперь, когда у вас появилась минутка, чтобы поиграть с Playground, давайте посмотрим на синтаксис этого примера.
const Vue = require("./nativescript-vue"); new Vue({ methods: { onButtonTap() { console.log("Button was pressed"); }, }, template: ` <Page> ... <Button text="Button" @tap="onButtonTap" /> ... </Page> `,
}).$start();
Если вы знакомы с Vue.js, то, вероятно, узнаете этот синтаксис, так как он идентичен синтаксису, используемому для привязки событий в веб-приложениях Vue.js. Фактически, в основном весь синтаксис, который вы знаете из создания веб-приложений Vue.js, может применяться непосредственно к работе с компонентами пользовательского интерфейса в NativeScript-Vue.
Например, приведенный ниже код использует синтаксис привязки данных Vue для изменения текста кнопки предыдущего примера.
const Vue = require("./nativescript-vue"); new Vue({ data: { buttonText: "Tap Me!" }, template: ` <Page> ... <Button :text="buttonText" /> ... </Page> `,
}).$start();
Сила NativeScript-Vue заключается в том, что вы можете использовать знакомый синтаксис Vue.js для создания native интерфейсов iOS и Android с единой базы кода.
Попробуйте перетащить несколько других компонентов, чтобы понять, как работает NativeScript-Vue (обязательно попробуйте графики и календарь). Когда вы будете готовы, мы перейдем к следующим шагам, которые нужно выполнить.
Изучение NativeScript
Одна из замечательных особенностей NativeScript-Vue значительно снижать барьер в создании приложений для iOS и Android. Хотя примеры этой статьи довольно простые, помните, что нужно будет изучить новое программное обеспечение (Xcode и Android Studio) и новые языки (Swift или Objective-C, Kotlin или Java) даже для создания тривиальных приложений.
Несмотря на то, что NativeScript-Vue упрощает мобильную разработку Vue.js, по-прежнему есть ряд концепций, которые необходимо научиться успешно завершать с NativeScript-Vue. Давайте посмотрим на некоторые из самых важных.
Цель изучения №1: компоненты пользовательского интерфейса NativeScript
Поскольку NativeScript использует собственные компоненты пользовательского интерфейса iOS и Android, нет эквивалентов NativeScript для HTML-элементов, таких как div s или span s. Вместо этого вам нужно изучить новый набор компонентов пользовательского интерфейса для создания собственных представлений.
Не волнуйся; хоть это и новые компоненты, вы все равно можете использовать знакомый синтаксис Vue для обработки таких задач, как привязка событий и данных. Просто нужно озгакомиться с новыми компонентами и тем, как их настроить. Для этого вы можете обратиться к документации по компонентам NativeScript-Vue.
Например, помните <Button>? В NativeScript-Vue документации к компоненту приведен пример и ссылки на полную документацию API.
Цель изучения №2: макеты NativeScript
Поскольку NativeScript не использует HTML или DOM, NativeScript не может реплицировать многие концепции веб-макета, такие как float и display: block|inline. Поэтому вы должны изучить некоторые новые способы организации своих компонентов пользовательского интерфейса на экране.
Однако есть две хорошие новости. Во-первых, у NativeScript есть полная реализация flexbox, которая работает как на iOS, так и на Android, то есть вы можете использовать знакомый синтаксис для большинства задач компоновки.
Во-вторых, команда NativeScript имеет сайт, посвященный изучению макетов NativeScript, отличных от flexbox . Когда вы будете готовы серьёзно относиться к NativeScript-Vue, стоит потратить 30 минут на изучение материалов на сайте.
Задача обучения №3: интерфейс NativeScript
Эту статью мы начали с NativeScript Playground, основанном на обучающей среде браузера NativeScript. Хотя Playground отлично подходит для начала работы, в конечном счёте нужно будет настроить локальную среду для разработки NativeScript. Локальная среда позволяет вам создавать приложения для iOS App Store и Google Play, использовать плагины NativeScript в приложениях и такие инструменты, как webpack и .vue файлы.
Для локальной разработки вам необходимо сначала установить CLI NativeScript из npm.
npm install -g nativescript
Далее, и это самая сложная часть, вам нужно настроить соответствующие зависимости для iOS и Android для выполнения сборки на машине разработки. В документации NativeScript есть полное руководство, позволяющее пройти процесс, но на этом этапе легко застрять, так как есть много подводных камней (разные версии npm, разные версии Android и т. д.).
ПРИМЕЧАНИЕ. Если вы сталкиваетесь с проблемами, возникающими в процессе установки, форум сообщества NativeScript — отличное место, чтобы обратиться за помощью.
После завершения установки вы сможете использовать CLI NativeScript для создания, запуска и развертывания приложений NativeScript-Vue. Например, можно использовать следующую команду для создания нового приложения NativeScript-Vue:
tns create sample-app --template nativescript-vue-template
Затем вы можете использовать команду tns run android для запуска приложения на Android-эмуляторе или устройстве Android подключенном к USB.
tns run android
И, наконец, вы можете использовать команду tns run ios для macOS для запуска приложения на iOS-симуляторе или устройстве iOS подключенном к USB.
tns run ios
Куда пойти потом
После того как вы изучите компоненты пользовательского интерфейса NativeScript, выясните, как работают макеты NativeScript и снимите CLI NativeScript, вы на пути к созданию своего следующего мобильного приложения с помощью NativeScript-Vue. Вот некоторые другие ссылки, которые могут вам пригодиться, когда вы перейдёте к более продвинутой разработке NativeScript-Vue.
Отладка — NativeScript включает встроенный отладчик, созданный поверх инструментов разработчика Chrome. Отладчик позволяет вам переходить через код JavaScript, просматривать консоль, отслеживать сетевые запросы и даже просматривать визуальное дерево вашего приложения iOS и Android.
Как работает NativeScript. Когда вы начинаете создавать расширенные приложения, хорошо иметь некоторые знания о том, как NativeScript позволяет создавать собственные приложения для iOS и Android с помощью JavaScript.
Плагины NativeScript. Несмотря на то, что NativeScript предоставляет множество межплатформенных API-интерфейсов, экосистема плагина NativeScript предоставляет сотни дополнительных API-интерфейсов, которые могут потребоваться для приложения. Стоит потратить несколько минут, чтобы ознакомиться с Marketplace NativeScript и узнать, что там есть.
NativeScript Community Slack — команда NativeScript-Vue зависает в канале #vue в сообществе NativeScript Slack . Канал Slack — отличное место для встреч с другими разработчиками NativeScript-Vue, задать любые вопросы, которые могут возникнуть, и даже вовлечься в разработку интеграции.
Заключение
В целом NativeScript-Vue предлагает новый захватывающий способ создания приложений для iOS и Android с использованием Vue.js.
Самый лучший способ начать работу с NativeScript-Vue — находится в NativeScript Playground, так как он позволяет начать работу без необходимости локализовать среду разработки iOS и Android. После того, как вы будете довольны базой, загрузите и установите CLI NativeScript и попробуйте один из шаблонов CLI NativeScript . Если у вас есть вопросы, форум сообщества NativeScript и Community Slack — отличные места для общения.
И самое главное – получайте удовольствие. Очень круто, что теперь можно создавать полностью родные приложения для iOS и Android c Vue.js, поэтому пробуйте.
Автор: TJ VanToll
Источник: https://vuejsdevelopers.com/
Редакция: Команда webformyself.