Создание мобильных приложений с помощью Capacitor и Vue.js

Недавно команда Ionic анонсировала духовного преемника Apache Cordova и Adobe PhoneGap с открытым исходным кодом под названием Capacitor. Capacitor позволяет создавать приложения с использованием современных веб-технологий и запускать их везде, от веб-браузеров до собственных мобильных устройств (Android и iOS) и даже на настольных платформах с помощью Electron — популярной платформы GitHub для создания кроссплатформенных настольных приложений с Node.js. и передовые веб-технологии.

Ionic — самая популярная гибридная мобильная платформа — в настоящее время работает поверх Cordova, но в будущих версиях Capacitor будет вариантом по умолчанию для приложений Ionic. Capacitor также предоставляет уровень совместимости, который позволяет использовать существующие плагины Cordova в проектах Capacitor.

Помимо использования Capacitor в приложениях Ionic, вы также можете использовать его без Ionic с предпочитаемой вами интерфейсной инфраструктурой или библиотекой пользовательского интерфейса, такой как Vue, React, Angular с материалом, Bootstrap и т. д.

В этом руководстве мы увидим, как использовать Capacitor и Vue для создания простого мобильного приложения для Android. Фактически, как уже упоминалось, ваше приложение также может работать как прогрессивное веб-приложение (PWA) или как настольное приложение в основных операционных системах с помощью всего нескольких команд.

Мы также будем использовать некоторые компоненты пользовательского интерфейса Ionic 4 для оформления нашего демонстрационного мобильного приложения.

Характеристики конденсатора

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

• С открытым исходным кодом и бесплатно
  Capacitor — это проект с открытым исходным кодом, лицензированный по разрешающей лицензии MIT и поддерживаемый Ionic и сообществом.
• Кроссплатформенность
  Вы можете использовать Capacitor для создания приложений с одной базой кода и для нескольких платформ. Вы можете запустить еще несколько команд интерфейса командной строки (CLI) для поддержки другой платформы.
• Собственный доступ к платформам SDK
  Конденсатор не мешает, когда вам нужен доступ к собственным SDK.
• Стандартные веб- и браузерные технологии
  Приложение, созданное с помощью Capacitor, использует стандартные веб-API, поэтому ваше приложение также будет кросс-браузерным и будет хорошо работать во всех современных браузерах, соответствующих стандартам.
• Расширяемый
  Вы можете получить доступ к собственным функциям базовых платформ, добавив плагины или, если вы не можете найти плагин, который соответствует вашим потребностям, создав собственный плагин через простой API.

Требования

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

• Вам понадобятся Node v8.6+ и npm v5.6+, установленные на вашем компьютере. Просто зайдите на официальный сайт и скачайте версию для своей операционной системы.
• Чтобы создать приложение для iOS, вам понадобится Mac с Xcode.
• Чтобы создать приложение для Android, вам необходимо установить Java 8 JDK и Android Studio с Android SDK.

Создание проекта Vue

В этом разделе мы установим Vue CLI и создадим новый проект Vue. Затем мы добавим навигацию в наше приложение с помощью маршрутизатора Vue. Наконец, мы создадим простой пользовательский интерфейс, используя компоненты Ionic 4.

Установка Vue CLI v3

Начнем с установки Vue CLI v3 из npm, выполнив из командной строки следующее:

 $ npm install -g @vue/cli

Возможно, вам потребуется добавить sudo для глобальной установки пакета, в зависимости от вашей конфигурации npm.

Создание нового проекта Vue

После установки Vue CLI давайте воспользуемся им для создания нового проекта Vue, запустив из CLI следующее:

 $ vue create vuecapacitordemo

Вы можете запустить сервер разработки, перейдя в корневую папку проекта и выполнив следующую команду:

 $ cd vuecapacitordemo $ npm run serve

Ваше внешнее приложение будет работать с https://localhost:8080/ .

Если вы посетите https://localhost:8080/ в своем веб-браузере, вы должны увидеть следующую страницу:

Добавление Ионика 4

Чтобы иметь возможность использовать компоненты Ionic 4 в своем приложении, вам необходимо использовать основной пакет Ionic 4 из npm.

Итак, откройте файл index.html , который находится в public папке вашего проекта Vue, и добавьте следующий <script src='https://unpkg.com/@ionic/[email protected]/dist/ionic.js'></script> тег в заголовке файла.

Это содержимое public/index.html :

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title>vuecapacitordemo</title> </head> <body> <noscript> <strong>We're sorry but vuecapacitordemo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div></div> <!-- built files will be auto injected --> <script src='https://unpkg.com/@ionic/[email protected]/dist/ionic.js'></script> </body> </html>

Вы можете получить текущую версию пакета ядра Ionic из npm.

Теперь откройте src/App.vue и добавьте следующее содержимое в тег template после удаления того, что там есть:

 <template> <ion-app> <router-view></router-view> </ion-app> </template>

ion-app — это компонент Ionic. Это должен быть компонент верхнего уровня, обертывающий другие компоненты.

router-view — это выход маршрутизатора Vue. Компонент, соответствующий пути, будет отображаться здесь маршрутизатором Vue.

После добавления компонентов Ionic в ваше приложение Vue вы начнете получать предупреждения в консоли браузера, подобные следующим:

 [Vue warn]: Unknown custom element: <ion-content> - did you register the component correctly? For recursive components, make sure to provide the "name" option. found in ---> <HelloWorld> at src/components/HelloWorld.vue <App> at src/App.vue <Root>

Это связано с тем, что компоненты Ionic 4 на самом деле являются веб-компонентами, поэтому вам нужно указать Vue, что компоненты, начинающиеся с префикса ion , не являются компонентами Vue. Вы можете сделать это в файле src/main.js , добавив следующую строку:

 Vue.config.ignoredElements = [/^ion-/]

Теперь эти предупреждения должны быть устранены.

Добавление компонентов Vue

Добавим два компонента. Во-первых, удалите все файлы в папке src/components (также удалите любой импорт для компонента HelloWorld.vue в App.vue ) и добавьте файлы Home.vue и About.vue .

Откройте src/components/Home.vue и добавьте следующий шаблон:

 <template> <ion-app> <ion-header> <ion-toolbar color="primary"> <ion-title> Vue Capacitor </ion-title> </ion-toolbar> </ion-header> <ion-content padding> The world is your oyster. <p>If you get lost, the <a href="https://ionicframework.com/docs">docs</a> will be your guide.</p> </ion-content> </ion-app> </template>

Далее в том же файле добавьте следующий код:

 <script> export default { name: 'Home' } </script>

Теперь откройте src/components/About.vue и добавьте следующий шаблон:

 <template> <ion-app> <ion-header> <ion-toolbar color="primary"> <ion-title> Vue Capacitor | About </ion-title> </ion-toolbar> </ion-header> <ion-content padding> This is the About page. </ion-content> </ion-app> </template>

Также в этот же файл добавьте следующий код:

 <script> export default { name: 'About' } </script>

Добавление навигации с помощью Vue Router

Начните с установки маршрутизатора Vue, если он еще не установлен, выполнив следующую команду из корневой папки вашего проекта:

 npm install --save vue-router

Затем в src/main.js добавьте следующие импорты:

 import Router from 'vue-router' import Home from './components/Home.vue' import About from './components/About.vue'

Это импортирует маршрутизатор Vue и компоненты «Дом» и «О программе».

Добавь это:

 Vue.use(Router)

Создайте экземпляр Router с массивом маршрутов:

 const router = new Router({ routes: [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About } ] })

Наконец, сообщите Vue об экземпляре Router :

 new Vue({router, render: h => h(App) }).$mount('#app')

Теперь, когда мы настроили маршрутизацию, давайте добавим несколько кнопок и методов для навигации между нашими двумя компонентами «Домой» и «О программе».

Откройте src/components/Home.vue и добавьте следующий goToAbout() :

 ... export default { name: 'Home', methods: { goToAbout () { this.$router.push('about') },

В блоке template добавьте кнопку для вызова метода goToAbout() :

 <ion-button @click="goToAbout" full>Go to About</ion-button>

Теперь нам нужно добавить кнопку, чтобы вернуться домой, когда мы находимся в компоненте «О программе».

Откройте src/components/About.vue и добавьте метод goBackHome() :

 <script> export default { name: 'About', methods: { goBackHome () { this.$router.push('/') } } } </script>

И в блоке template добавьте кнопку для вызова метода goBackHome() :

 <ion-button @click="goBackHome()" full>Go Back!</ion-button>

При запуске приложения на реальном мобильном устройстве или эмуляторе вы заметите проблему масштабирования. Чтобы решить эту проблему, нам нужно просто добавить несколько meta , которые правильно задают область просмотра.

В public/index.html добавьте следующий код в head страницы:

 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no">

Добавление конденсатора

Вы можете использовать конденсатор двумя способами:

• Создайте новый проект конденсатора с нуля.
• Добавьте конденсатор в существующий интерфейсный проект.

В этом руководстве мы выберем второй подход, потому что сначала мы создали проект Vue, а теперь добавим Capacitor в наш проект Vue.

Интеграция конденсатора с Vue

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

Сначала установите Capacitor CLI и основные пакеты из npm. Убедитесь, что вы находитесь в своем проекте Vue, и выполните следующую команду:

 $ cd vuecapacitordemo $ npm install --save @capacitor/core @capacitor/cli

Затем инициализируйте Capacitor информацией вашего приложения, выполнив следующую команду:

 $ npx cap init

Мы используем npx для запуска команд Capacitor. npx — это утилита, входящая в состав npm v5.2.0 и предназначенная для упрощения запуска утилит и исполняемых файлов CLI, размещенных в реестре npm. Например, это позволяет разработчикам использовать локально установленные исполняемые файлы без необходимости использования сценариев запуска npm.

Команда init Capacitor CLI также добавит собственные платформы по умолчанию для Capacitor, такие как Android и iOS.

Вам также будет предложено ввести информацию о вашем приложении, такую ​​как имя, идентификатор приложения (который в основном будет использоваться в качестве имени пакета для приложения Android) и каталог вашего приложения.

После того, как вы введете необходимые данные, Capacitor будет добавлен в ваш проект Vue.

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

 $ npx cap init vuecapacitordemo com.example.vuecapacitordemo

Имя приложения — vuecapacitordemo , а его идентификатор — com.example.vuecapacitordemo . Имя пакета должно быть допустимым именем пакета Java.

Вы должны увидеть сообщение: «Ваш проект конденсатора готов к работе!»

Вы также можете заметить, что файл с именем capacitor.config.json был добавлен в корневую папку вашего проекта Vue.

Точно так же, как CLI предлагает, когда мы инициализировали Capacitor в нашем проекте Vue, теперь мы можем добавить собственные платформы, на которые мы хотим ориентироваться. Это превратит наше веб-приложение в собственное приложение для каждой добавляемой платформы.

Но непосредственно перед добавлением платформы нам нужно указать Capacitor, где искать собранные файлы — то есть в папке dist нашего проекта Vue. Эта папка будет создана при первом запуске команды build приложения Vue ( npm run build ) и находится в корневой папке нашего проекта Vue.

Мы можем сделать это, изменив webDir в capacitor.config.json , который является файлом конфигурации для Capacitor. Итак, просто замените www на dist . Вот содержимое capacitor.config.json :

 { "appId": "com.example.vuecapacitordemo", "appName": "vuecapacitordemo", "bundledWebRuntime": false, "webDir": "dist" }

Теперь давайте создадим папку dist и создадим наш проект Vue, выполнив следующую команду:

 $ npm run build

После этого мы можем добавить платформу Android, используя следующее:

 npx cap add android

Если вы посмотрите в свой проект, вы обнаружите, что был добавлен собственный проект android .

Это все, что нам нужно для интеграции Capacitor и Android. Если вы хотите настроить таргетинг на iOS или Electron, просто запустите npx cap add ios или npx cap add electron соответственно.

Использование конденсаторных плагинов

Capacitor предоставляет среду выполнения, которая позволяет разработчикам использовать три столпа Интернета — HTML, CSS и JavaScript — для создания приложений, которые изначально работают в Интернете, а также на основных настольных и мобильных платформах. Но он также предоставляет набор подключаемых модулей для доступа к собственным функциям устройств, таким как камера, без необходимости использования специального низкоуровневого кода для каждой платформы; плагин делает это за вас и предоставляет нормализованный высокоуровневый API, если уж на то пошло.

Capacitor также предоставляет API, который вы можете использовать для создания пользовательских плагинов для собственных функций, не охватываемых набором официальных плагинов, предоставляемых командой Ionic. Вы можете узнать, как создать плагин в документации.

Вы также можете найти более подробную информацию о доступных API и основных плагинах в документации.

Пример: добавление плагина конденсатора

Давайте посмотрим на пример использования плагина Capacitor в нашем приложении.

Мы будем использовать плагин «Modals», который используется для отображения собственных модальных окон для предупреждений, подтверждений и подсказок ввода, а также листов действий.

Откройте src/components/Home.vue и добавьте следующий импорт в начало блока script :

 import { Plugins } from '@capacitor/core';

Этот код импортирует класс Plugins из @capacitor/core .

Затем добавьте следующий метод для отображения диалогового окна:

 … methods: { … async showDialogAlert(){ await Plugins.Modals.alert({ title: 'Alert', message: 'This is an example alert box' }); }

Наконец, добавьте кнопку в блок template , чтобы активировать этот метод:

 <ion-button @click="showDialogAlert" full>Show Alert Box</ion-button>

Вот скриншот диалогового окна:

Вы можете найти более подробную информацию в документах.

Создание приложения для целевых платформ

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

1. Создайте производственную сборку вашего приложения Vue.
2. Скопируйте все веб-ресурсы в собственный проект (в нашем примере Android), созданный Capacitor.
3. Откройте свой проект Android в Android Studio (или Xcode для iOS) и используйте встроенную интегрированную среду разработки (IDE) для создания и запуска приложения на реальном устройстве (если оно подключено) или эмуляторе.

Итак, выполните следующую команду, чтобы создать производственную сборку:

 $ npm run build

Затем используйте команду copy интерфейса командной строки Capacitor, чтобы скопировать веб-ресурсы в собственный проект:

 $ npx cap copy

Наконец, вы можете открыть свой нативный проект (в нашем случае Android) в нативной IDE (в нашем случае Android Studio) с помощью команды open интерфейса командной строки Capacitor:

 $ npx cap open android

Либо Android Studio будет открыта с вашим проектом, либо будет открыта папка, содержащая собственные файлы проекта.

Если это не открывает Android Studio, просто откройте IDE вручную, перейдите в «Файл» → «Открыть…», затем перейдите к своему проекту и откройте папку android из IDE.

Теперь вы можете использовать Android Studio для запуска своего приложения с помощью эмулятора или реального устройства.

Заключение

В этом руководстве мы использовали Ionic Capacitor с веб-компонентами Vue и Ionic 4 для создания мобильного приложения Android с веб-технологиями. Вы можете найти исходный код демонстрационного приложения, которое мы создали в этом руководстве, в репозитории GitHub.