Создание крошечных настольных приложений с помощью Tauri и Vue.js

Опубликовано: 2022-03-10
Краткое резюме ↬ Tauri — это набор инструментов для создания небольших, быстрых и безопасных настольных приложений на основе существующих HTML, CSS и JavaScript. В этой статье Кельвин объясняет, как Tauri хорошо сочетается с прогрессивным фреймворком Vue.js, интегрируя обе технологии в пакет примера веб-приложения под названием nota в качестве нативного приложения.

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

  • вы создавали веб-приложения с помощью HTML, CSS и JavaScript и хотите использовать те же технологии для создания приложений, предназначенных для платформ Windows, macOS или Linux;
  • вы уже создаете кроссплатформенные настольные приложения с такими технологиями, как Electron, и хотите проверить альтернативы;
  • вы хотите создавать приложения с использованием веб-технологий для дистрибутивов Linux, таких как PureOS;
  • вы энтузиаст Rust и хотели бы применить его для создания нативных кроссплатформенных приложений.

Мы рассмотрим, как создать собственное кроссплатформенное приложение из существующего веб-проекта. Давайте приступим!

Примечание . В этой статье предполагается, что вы знакомы с HTML, CSS, JavaScript и Vue.js.

Еще после прыжка! Продолжить чтение ниже ↓

Что такое Таури?

Официальный сайт хорошо резюмирует Таури:

  • Tauri — это многоязычная цепочка инструментов для создания более безопасных нативных приложений как с крошечными, так и с быстрыми двоичными файлами. Под «полиглотом» я подразумеваю, что Tauri использует несколько языков программирования. На данный момент используется Rust, JavaScript и TypeScript. Но есть планы позволить вам использовать Go, C++, Python и многое другое.
  • Он позволяет использовать любую интерфейсную среду на основе HTML и JavaScript, такую ​​как Vue.js, React или Angular, для создания собственного настольного приложения, и его можно интегрировать в любой конвейер.
  • Он помогает создавать и объединять двоичные файлы для основных настольных платформ (скоро появятся мобильные и WebAssembly).

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

На своей странице GitHub Tauri описывается как независимая от фреймворка цепочка инструментов для создания высокозащищенных нативных приложений, которые имеют крошечные двоичные файлы (т. е. размер файла) и очень быстрые (т. е. минимальное использование оперативной памяти).

Почему не Электрон?

Популярным инструментом для использования веб-технологий для создания настольных приложений является Electron.

Однако приложения Electron имеют довольно большой размер пакета и, как правило, занимают много памяти при работе. Вот как Таури сравнивается с Электроном:

  • Пучок
    Размер приложения Tauri может быть менее 600 КБ.
  • Память
    Размер приложения Tauri составляет менее половины размера приложения Electron.
  • Лицензия
    Повторное лицензирование возможно с Tauri, но не с Electron. Электрон поставляется с Chromium прямо из коробки. Однако Chromium включает систему управления цифровыми правами под названием Widevine. Включение Widevine в Chromium делает приложения, созданные с помощью Electron, недовольными пользователями таких платформ, как PureOS, по той единственной причине, что это не бесплатное программное обеспечение с открытым исходным кодом (FLOSS). Такие платформы, как PureOS, проверяются Фондом свободного программного обеспечения (FSF). Это означает, что они могут публиковать только бесплатное программное обеспечение с открытым исходным кодом в своих магазинах приложений.

Короче говоря, если ваше приложение создано с помощью Electron, оно никогда не будет официально отправлено в магазин PureOS. Это должно беспокоить разработчиков, нацеленных на такие дистрибутивы.

Больше возможностей Таури

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

Плюсы Таури

  • Tauri позволяет вам взять базу кода, которую вы создали для Интернета, и превратить ее в собственное настольное приложение, ничего не меняя.
  • Хотя вы можете использовать Rust в проекте на основе Tauri, это совершенно необязательно. Если бы вы это сделали, вам не нужно было бы ничего менять в исходной базе кода, предназначенной для Интернета.

Таури в реальном мире

Если вы какое-то время были частью сообщества Vue.js, то вы наверняка слышали о Гийоме Чау, члене основной команды Vue.js. Он отвечает за интерфейс командной строки (CLI) Vue.js, а также за другие замечательные библиотеки Vue.js. Недавно он создал guijs, что означает «графический пользовательский интерфейс для проектов JavaScript». Это собственное настольное приложение на базе Tauri для визуального управления вашими проектами JavaScript.

Guijs — это пример того, что возможно с Tauri, и тот факт, что один из основных членов команды Vue.js работает над приложением, говорит нам о том, что Tauri прекрасно работает с Vue.js (среди других интерфейсных фреймворков). Если вам интересно, загляните в репозиторий guijs на GitHub. И да, это с открытым исходным кодом.

Как работает Таури

На высоком уровне Tauri использует Node.js для формирования окна рендеринга HTML, CSS и JavaScript в качестве пользовательского интерфейса (UI), управляемого и загружаемого Rust. Продукт представляет собой монолитный двоичный файл, который можно распространять как обычные типы файлов для Linux (deb/appimage), macOS (app/dmg) и Windows (exe/msi).

Как создаются приложения Tauri

Приложение Tauri создается с помощью следующих шагов:

  1. Во-первых, создайте интерфейс в своей графической среде и подготовьте HTML, CSS и JavaScript для использования.
  2. Интерфейс командной строки Tauri Node.js берет его и настраивает бегун Rust в соответствии с вашей конфигурацией.
  3. В режиме разработки он создает окно WebView с отладкой и Hot Module Reloading .
  4. В режиме сборки он настраивает сборщик и создает окончательное приложение в соответствии с вашими настройками.

Настройка вашей среды

Теперь, когда вы знаете, что такое Tauri и как он работает, позвольте мне провести вас через настройку вашей машины для разработки с помощью Tauri.

Примечание . Настройка здесь предназначена для компьютеров с Linux, но также доступны руководства для macOS и Windows.

Настройка Linux

Многоязычная природа Tauri означает, что он требует ряда зависимостей от инструментов. Давайте начнем с установки некоторых зависимостей. Запустите следующее:

 $ sudo apt update && sudo apt install libwebkit2gtk-4.0-dev build-essential curl libssl-dev appmenu-gtk3-module

После того, как все вышеперечисленное выполнено успешно, приступайте к установке Node.js (если у вас его еще нет), потому что для Tauri требуется среда выполнения. Вы можете сделать это, запустив это:

 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash

Это установит nvm (менеджер версий Node.js), который позволит вам легко управлять средой выполнения Node.js и легко переключаться между версиями Node.js. После установки запустите это, чтобы увидеть список версий Node.js:

 nvm ls-remote

На момент написания последней версией была 14.1.0. Установите его так:

 nvm install v14.1.0

После того, как Node.js будет полностью настроен, вам нужно будет установить компилятор Rust и менеджер пакетов Rust: Cargo. Команда ниже установит оба:

 $ curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh

После запуска этой команды убедитесь, что Cargo и Rust находятся в вашем $PATH , выполнив следующее:

 rust --version

Если все прошло хорошо, это должно вернуть номер версии.

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

 $ rustup update stable

Вуаля! Вы на один шаг приблизились к тому, чтобы ваша машина была на 100 % готова к работе с Tauri. Осталось только установить крейт tauri-bundler . Лучше всего выйти из CLI и выполнить приведенную ниже команду в новом окне CLI:

 $ cargo install tauri-bundler --force

Эврика! Если все прошло хорошо, ваша машина готова для Таури. Далее мы приступим к интеграции Tauri с Vue.js. Давайте приступим!

Пряжа

Команда Tauri рекомендует установить менеджер пакетов Yarn. Итак, давайте установим его следующим образом:

 npm install -g yarn

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

 yarn --version

Если бы все работало, должен был быть возвращен номер версии.

Интеграция Tauri с Vue.js

Теперь, когда у нас установлен Tauri, давайте объединим существующий веб-проект. Вы можете найти демо-версию проекта на Netlify. Идите вперед и разветвите репозиторий, который будет служить оболочкой. После разветвления обязательно клонируйте разветвление, выполнив это:

 git clone https://github.com/[yourUserName]/nota-web

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

 yarn

Затем запустите это:

 yarn serve

Ваше приложение должно работать на localhost:8080 . Убейте работающий сервер и давайте установим плагин Vue.js CLI для Tauri.

vue-cli-плагин-таури

Команда Tauri создала подключаемый модуль Vue.js CLI, который быстро настраивает и превращает одностраничное приложение Vue.js (SPA) в маленькое кроссплатформенное настольное приложение, быстрое и безопасное. Давайте установим этот плагин:

 vue add tauri

После установки плагина, что может занять некоторое время, он запросит у вас заголовок окна. Просто введите nota и нажмите «Enter».

Давайте рассмотрим изменения, внесенные плагином Tauri.

пакет.json

Плагин Tauri добавил два скрипта в раздел скриптов нашего файла package.json . Они есть:

 "tauri:build": "vue-cli-service tauri:build", "tauri:serve": "vue-cli-service tauri:serve"

При разработке следует использовать скрипт tauri:serve . Итак, запустим:

 yarn tauri:serve

Вышеуказанное загрузит ящики Rust, необходимые для запуска нашего приложения. После этого он запустит наше приложение в режиме разработки , где создаст окно WebView с отладкой и горячей перезагрузкой модуля !

src-tauri

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

 icons/ src/ build.rs cmd.rs main.rs Cargo.lock Cargo.toml rustfmt.toml tauri.conf.json tauri.js

Единственное изменение, которое нам нужно сделать, это src-tauri/Cargo.toml . Cargo.toml похож на файл package.json для Rust. Найдите строку ниже в Cargo.toml :

 name = "app"

Измените его на это:

 name = "nota"

Это все, что нам нужно изменить для этого примера!

Комплектация

Чтобы связать nota для вашей текущей платформы, просто запустите это:

 yarn tauri:build

Примечание . Как и в случае с окном разработки, при первом запуске потребуется некоторое время, чтобы собрать ящики Rust и собрать все. При последующих запусках нужно будет только перестроить сами ящики Таури.

Когда вышеперечисленное будет выполнено, у вас должен быть двоичный файл nota для вашей текущей ОС. Что касается меня, у меня есть двоичный файл .deb , созданный в каталоге src-tauri/target/release/bundle/deb/

Переход на кроссплатформенность

Вы, наверное, заметили, что команда yarn tauri:build только что сгенерировала двоичный файл для вашей операционной системы. Итак, давайте сгенерируем бинарники для других операционных систем. Для этого мы настроим рабочий процесс на GitHub. Здесь мы используем GitHub как средство распространения нашего кроссплатформенного приложения. Таким образом, ваши пользователи могли просто загрузить двоичные файлы на вкладке «Релиз» проекта. Рабочий процесс, который мы реализуем, будет автоматически создавать для нас наши двоичные файлы с помощью действий GitHub. Давайте приступим к делу.

Создание рабочего процесса Tauri

Благодаря Джейкобу Болде у нас есть рабочий процесс для автоматического создания и выпуска кроссплатформенных приложений с помощью Tauri на GitHub. Помимо создания двоичного файла для различных платформ (Linux, Mac и Windows), действие также загрузит двоичный файл для вас в виде выпуска на GitHub. Для этого также используется действие Create a Release, созданное Джейкобом.

Чтобы использовать этот рабочий процесс, создайте каталог .github в корне nota-web . В этом каталоге создайте еще один каталог с именем workflows . Затем мы создадим файл рабочего процесса в .github/workflows/ и назовем его release-tauri-app.yml .

В release-tauri-app.yml мы бы добавили рабочий процесс, который создает двоичные файлы для Linux, macOS и Windows. Этот рабочий процесс также будет загружать двоичные файлы в качестве черновика на GitHub. Рабочий процесс будет запускаться всякий раз, когда мы нажимаем на мастер.

Откройте release-tauri-app.yml и добавьте приведенный ниже фрагмент:

 name: release-tauri-app on: push: branches: - master paths: - '**/package.json' jobs: check-build: runs-on: ubuntu-latest timeout-minutes: 30 steps: — uses: actions/checkout@v2 — name: setup node uses: actions/setup-node@v1 with: node-version: 12 — name: install rust stable uses: actions-rs/toolchain@v1 with: toolchain: stable profile: minimal — name: install webkit2gtk run: | sudo apt-get update sudo apt-get install -y webkit2gtk-4.0 — run: yarn — name: build nota for tauri app run: yarn build — run: cargo install tauri-bundler --force — name: build tauri app run: yarn tauri:build create-release: needs: check-build runs-on: ubuntu-latest outputs: RELEASE_UPLOAD_URL: ${{ steps.create_tauri_release.outputs.upload_url }} steps: — uses: actions/checkout@v2 — name: setup node uses: actions/setup-node@v1 with: node-version: 12 — name: get version run: echo ::set-env name=PACKAGE_VERSION::$(node -p "require('./package.json').version") — name: create release id: create_tauri_release uses: jbolda/[email protected] env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: tag_name: ${{ matrix.package.name }}-v${{ env.PACKAGE_VERSION }} release_name: 'Release nota app v${{ env.PACKAGE_VERSION }}' body: 'See the assets to download this version and install.' draft: true prerelease: false create-and-upload-assets: needs: create-release runs-on: ${{ matrix.platform }} timeout-minutes: 30 strategy: fail-fast: false matrix: platform: [ubuntu-latest, macos-latest, windows-latest] include: — platform: ubuntu-latest buildFolder: bundle/deb ext: \_0.1.0_amd64.deb compressed: '' — platform: macos-latest buildFolder: bundle/osx ext: .app compressed: .tgz — platform: windows-latest buildFolder: '' ext: .x64.msi compressed: '' steps: — uses: actions/checkout@v2 — name: setup node uses: actions/setup-node@v1 with: node-version: 12 — name: install rust stable uses: actions-rs/toolchain@v1 with: toolchain: stable profile: minimal — name: install webkit2gtk (ubuntu only) if: matrix.platform == 'ubuntu-latest' run: | sudo apt-get update sudo apt-get install -y webkit2gtk-4.0 — run: yarn — name: build nota for tauri app run: yarn build — run: cargo install tauri-bundler --force — name: build tauri app run: yarn tauri:build — name: compress (macos only) if: matrix.platform == 'macos-latest' working-directory: ${{ format('./src-tauri/target/release/{0}', matrix.buildFolder ) }} run: tar -czf ${{ format('nota{0}{1}', matrix.ext, matrix.compressed ) }} ${{ format('nota{0}', matrix.ext ) }} — name: upload release asset id: upload-release-asset uses: actions/[email protected] env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: upload_url: ${{ needs.create-release.outputs.RELEASE_UPLOAD_URL }} asset_path: ${{ format('./src-tauri/target/release/{0}/nota{1}{2}', matrix.buildFolder, matrix.ext, matrix.compressed ) }} asset_name: ${{ format('nota{0}{1}', matrix.ext, matrix.compressed ) }} asset_content_type: application/zip — name: build tauri app in debug mode run: yarn tauri:build --debug — name: compress (macos only) if: matrix.platform == 'macos-latest' working-directory: ${{ format('./src-tauri/target/debug/{0}', matrix.buildFolder ) }} run: tar -czf ${{ format('nota{0}{1}', matrix.ext, matrix.compressed ) }} ${{ format('nota{0}', matrix.ext ) }} — name: upload release asset with debug mode on id: upload-release-asset-debug-mode uses: actions/[email protected] env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: upload_url: ${{ needs.create-release.outputs.RELEASE_UPLOAD_URL }} asset_path: ${{ format('./src-tauri/target/debug/{0}/nota{1}{2}', matrix.buildFolder, matrix.ext, matrix.compressed ) }} asset_name: ${{ format('nota-debug{0}{1}', matrix.ext, matrix.compressed ) }} asset_content_type: application/zip

Чтобы протестировать рабочий процесс, зафиксируйте и отправьте изменения в master ветку вашего форка. После успешной отправки на GitHub вы можете щелкнуть вкладку «Действия» в GitHub, а затем щелкнуть ссылку «Проверить сборку», чтобы увидеть ход рабочего процесса.

При успешном выполнении действия черновик релиза можно увидеть в разделе «Релизы» на странице репозитория на GitHub. Затем вы можете опубликовать свой релиз!

Заключение

В этой статье представлена ​​цепочка инструментов полиглота для создания безопасных, кросс-платформенных и крошечных нативных приложений. Мы увидели, что такое Tauri и как его интегрировать с Vue.js. Наконец, мы собрали наше первое приложение Tauri, запустив yarn tauri:build , а также использовали действие GitHub для создания двоичных файлов для Linux, macOS и Windows.

Дайте мне знать, что вы думаете о Tauri — мне будет интересно посмотреть, что вы с ним построите. Вы можете присоединиться к серверу Discord, если у вас есть какие-либо вопросы.

Репозиторий этой статьи находится на GitHub. Также см. двоичные файлы, сгенерированные рабочим процессом GitHub.