Начало работы с NativeScript-Vue 1.0

Начало работы с NativeScript-Vue 1.0

От автора: совсем недавно команда NativeScript Vue объявила выпуск NativeScript-Vue 1.0. Как следует из названия, NativeScript-Vue — это проект, который интегрирует Vue.js в NativeScript, позволяя вам создавать полностью родные приложения для iOS и Android с помощью Vue.js. В этой статье мы рассмотрим, как вы можете начать создавать свое первое приложение с помощью NativeScript-Vue и ответим на некоторые распространенные вопросы. Давайте начнем.

Начало работы с NativeScript-Vue 1.0

Выбор среды

Начнём с того, что есть два способа разработки с помощью NativeScript-Vue.

Вариант 1: Работа в NativeScript Playground: NativeScript Playground — это среда разработки NativeScript, основанная на браузере, который позволяет запускать кодирование без настройки собственных iOS и Android SDK на машине разработки.

Вариант 2: Использование CLI NativeScript: CLI NativeScript — это интерфейс командной строки для создания и запуска приложений NativeScript. Поскольку CLI NativeScript создает реальные бинарные файлы iOS и Android, вы должны установить необходимые native зависимости для разработки с использованием CLI.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

В этой статье мы начнем разработку с помощью NativeScript Playground, так как это отличный инструмент для изучения того, как работает NativeScript-Vue, не испытывая затруднений при настройке локальной среды. После этого мы рассмотрим следующие шаги, которые нужно предпринять, чтобы настроить локальный процесс разработки NativeScript-Vue.

А теперь приступим к разработке.

Использование NativeScript Playground

Начните с посещения сайта https://play.nativescript.org/?template=play-vue, в котором открывается Playground с предустановленным шаблоном Vue. Первое, что вы увидите, — это подсказка, которая выглядит следующим образом.

Начало работы с NativeScript-Vue 1.0

Чтобы использовать NativeScript Playground, вам необходимо загрузить и установить два приложения на устройстве iOS или Android. Первое приложение «NativeScript Playground» имеет возможность сканировать QR-коды, которые вы видите в своем браузере, а второй «NativeScript Preview» — это приложение, которое запускает код, который вы пишете в своем браузере. Вот что вам нужно сделать.

Загрузите и установите приложения NativeScript Playground и NativeScript Preview на устройстве iOS или Android. Если у вас несколько устройств, вы можете установить приложения на всех устройствах. Playground позволяет вам работать на нескольких устройствах одновременно, и это довольно круто.

Откройте приложение NativeScript Playground на вашем устройстве(ах) и нажмите «Scan QR-code».

Начало работы с NativeScript-Vue 1.0

Начало работы с NativeScript-Vue 1.0

Cканируйте QR-код в своём Playground (а не QR-код в этой статье); в приложении вы должны увидеть следующее:

Начало работы с NativeScript-Vue 1.0

Начало работы с NativeScript-Vue 1.0

Это приложение может показаться простым, и похоже, что так оно и есть, но всё же есть одна особенность: компоненты пользовательского интерфейса, которые вы видите на экране, не являются элементами DOM — они полностью адаптированы для Android и iOS. В частности, элементы управления текстом в приложении, — это UILabel на iOS и android.widget.TextView на Android.

Сила NativeScript заключается в том, что вы можете использовать эти элементы управления с помощью JavaScript и использовать такие фреймворки, как Vue. Круто, да?

Теперь, когда вы активизировали свою работу, давайте начнем вносить некоторые изменения. Например, перейдите и измените text атрибут одного из элементов управления <Label> , а затем используйте Cmd + S (или Ctrl + S в Windows), чтобы сохранить обновление. Вы должны увидеть изменения на своем устройстве.

Начало работы с NativeScript-Vue 1.0

ПРИМЕЧАНИЕ. Я не ускорял этот gif — Playground действительно так быстро. Попробуйте сами!

Давайте на этом примере сделаем еще кое-что. В Playground есть набор компонентов, которые вы можете легко перетащить в свой код, чтобы добавить в приложение. Возьмите кнопочный элемент управления (см. изобржание ниже, если вы не можете найти этот элемент) и перетащите компонент в шаблон приложения. Сохраните изменения, и вы должны увидеть, что кнопка автоматически появляется на вашем устройстве.

Начало работы с NativeScript-Vue 1.0

Теперь, когда у вас появилась минутка, чтобы поиграть с 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. Давайте посмотрим на некоторые из самых важных.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Цель изучения №1: компоненты пользовательского интерфейса NativeScript

Поскольку NativeScript использует собственные компоненты пользовательского интерфейса iOS и Android, нет эквивалентов NativeScript для HTML-элементов, таких как div s или span s. Вместо этого вам нужно изучить новый набор компонентов пользовательского интерфейса для создания собственных представлений.

Не волнуйся; хоть это и новые компоненты, вы все равно можете использовать знакомый синтаксис Vue для обработки таких задач, как привязка событий и данных. Просто нужно озгакомиться с новыми компонентами и тем, как их настроить. Для этого вы можете обратиться к документации по компонентам NativeScript-Vue.

Например, помните <Button>? В NativeScript-Vue документации к компоненту приведен пример и ссылки на полную документацию API.

Начало работы с NativeScript-Vue 1.0

Цель изучения №2: макеты NativeScript

Поскольку NativeScript не использует HTML или DOM, NativeScript не может реплицировать многие концепции веб-макета, такие как float и display: block|inline. Поэтому вы должны изучить некоторые новые способы организации своих компонентов пользовательского интерфейса на экране.

Однако есть две хорошие новости. Во-первых, у NativeScript есть полная реализация flexbox, которая работает как на iOS, так и на Android, то есть вы можете использовать знакомый синтаксис для большинства задач компоновки.

Во-вторых, команда NativeScript имеет сайт, посвященный изучению макетов NativeScript, отличных от flexbox . Когда вы будете готовы серьёзно относиться к NativeScript-Vue, стоит потратить 30 минут на изучение материалов на сайте.

Начало работы с NativeScript-Vue 1.0

Задача обучения №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

Начало работы с NativeScript-Vue 1.0

И, наконец, вы можете использовать команду tns run ios для macOS для запуска приложения на iOS-симуляторе или устройстве iOS подключенном к USB.

tns run ios

Начало работы с NativeScript-Vue 1.0

Куда пойти потом

После того как вы изучите компоненты пользовательского интерфейса NativeScript, выясните, как работают макеты NativeScript и снимите CLI NativeScript, вы на пути к созданию своего следующего мобильного приложения с помощью NativeScript-Vue. Вот некоторые другие ссылки, которые могут вам пригодиться, когда вы перейдёте к более продвинутой разработке NativeScript-Vue.

Отладка — NativeScript включает встроенный отладчик, созданный поверх инструментов разработчика Chrome. Отладчик позволяет вам переходить через код JavaScript, просматривать консоль, отслеживать сетевые запросы и даже просматривать визуальное дерево вашего приложения iOS и Android.

Начало работы с NativeScript-Vue 1.0

Как работает NativeScript. Когда вы начинаете создавать расширенные приложения, хорошо иметь некоторые знания о том, как NativeScript позволяет создавать собственные приложения для iOS и Android с помощью JavaScript.

Начало работы с NativeScript-Vue 1.0

Плагины NativeScript. Несмотря на то, что NativeScript предоставляет множество межплатформенных API-интерфейсов, экосистема плагина NativeScript предоставляет сотни дополнительных API-интерфейсов, которые могут потребоваться для приложения. Стоит потратить несколько минут, чтобы ознакомиться с Marketplace NativeScript и узнать, что там есть.

Начало работы с NativeScript-Vue 1.0

NativeScript Community Slack — команда NativeScript-Vue зависает в канале #vue в сообществе NativeScript Slack . Канал Slack — отличное место для встреч с другими разработчиками NativeScript-Vue, задать любые вопросы, которые могут возникнуть, и даже вовлечься в разработку интеграции.

Начало работы с NativeScript-Vue 1.0

Заключение

В целом 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.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

VUE JS. Быстрый старт

Практический курс по созданию веб-приложения на VUE JS с полного нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree