Вышла новая альфа-версия Tauri, которая предлагает новый способ создания кроссплатформенных мобильных приложений!
Если вы уже знакомы с использованием Tauri или, по крайней мере, с некоторым опытом разработки в Rust и Web, вы будете рады узнать, что была выпущена новая альфа-версия, которая предлагает разработчикам возможность использовать ту же структуру кода, что и их настольные приложения. … для мобильных устройств! Не стесняйтесь сразу перейти к примеру исходный код проекта, использованному в этой статье, чтобы увидеть внутреннее совершенство того, как этого можно достичь!
Что такое Таури
Для тех из вас, кто еще не знаком с одной из новейших сред разработки или, возможно, плохо знаком с программированием в целом, позвольте мне дать вам краткое введение!
Tauri — это набор инструментов, который помогает разработчикам создавать приложения для основных настольных платформ, используя практически любой существующий интерфейсный фреймворк. Ядро построено на Rust, а интерфейс командной строки использует Node.js, что делает Tauri действительно многоязычным подходом к созданию и поддержке отличных приложений.
Первые шаги
Прежде всего, если вы никогда не использовали Tauri для разработки, вероятно, стоит его настроить! Поскольку большую часть своей разработки я делаю в основном для Linux (Arch), я расскажу об этом здесь. Вы можете найти всю документацию на сайте Tauri для своей системы, если она отличается:
sudo pacman -Syu sudo pacman -S — needed \ webkit2gtk-4.1 \ base-devel \ curl \ wget \ openssl \ appmenu-gtk-module \ gtk3 \ libappindicator-gtk3 \ librsvg \ libvips
Убедитесь, что Rust также установлен с помощью скрипта установки:
curl - proto '=https' - tlsv1.2 https://sh.rustup.rs -sSf | sh
Для Android-проектов:
rustup target add aarch64-linux-android armv7-linux-androideabi i686-linux-android x86_64-linux-android
Еще одно ключевое приложение, которое необходимо установить в вашей системе, — это Android Studio. Вы можете следовать инструкциям по установке для вашей конкретной установки, представленным на их официальном веб-сайте.
Поскольку разработка кода для этой статьи выполняется в системе Linux на основе Arch, можно просто использовать пользовательский репозиторий Arch (AUR) в качестве более быстрого средства установки Android Studio и соответствующего пакета инструментов:
#Using Yay for package management yay -S android-tools android-studio #Using Pacman sudo pacman -S android-tools android-studio
Откройте Android Studio и перейдите в окно управления SDK:
Обязательно выберите и нажмите apply, чтобы установить следующие компоненты:
- Платформа Android SDK
- Платформа Android SDK-Инструменты
- НДК (бок о бок)
- Инструменты сборки Android SDK
- Инструменты командной строки Android SDK
После того, как мы завершили первоначальную настройку, единственное, что осталось сделать, это обновить файл ресурсов нашей оболочки, чтобы включить пару новых переменных среды. Откройте свои .bashrc, .zshrc или config.fish и добавьте следующие новые переменные.
Примечание. Пути/версии NDK и Android Studio могут различаться.
Прежде чем продолжить, обязательно source вашу новую конфигурацию:
Настройка проекта
После установки всех зависимостей пора переходить к созданию нового мобильного проекта!
Существует несколько различных способов создания исходной структуры проекта, но в этом примере мы будем использовать create-tauri-app, установленный с помощью cargo.
На этом этапе у вас должно быть все настроено, поэтому перейдите в каталог, в котором вы хотите разместить свой проект, и запустите следующее, чтобы начать:
cargo install create-tauri-app cargo create-tauri-app --alpha --mobile
Следуйте каждой подсказке и выберите, как вы планируете разрабатывать новое приложение:
Внесение изменений
На данный момент все, что вам нужно для разработки вашего нового приложения, готово! Если вы не знакомы с использованием Tauri, вы найдете каталог src-tauri в папке вашего проекта, в котором содержится весь серверный код Rust, используемый вашим приложением.
Вы также увидите стандартный каталог src, в котором находится весь код пользовательского интерфейса (состоящий из файлов, соответствующих платформе, которую вы выбрали для использования во время установки).
Давайте продолжим, откроем проект и внесем некоторые изменения, а после этого создадим и запустим наше новое блестящее мобильное приложение!
create-tauri-app создает базовую структуру приложения, которую уже можно запускать и тестировать, но поскольку мы хотим создать мобильное приложение, давайте добавим несколько дополнительных библиотек React из двух отличных фреймворков для создания новых компонентов.
В этом примере используются преимущества следующих фреймворков React:
Обе платформы требуют всего пару шагов для интеграции в ваш проект. Как и большинство, первым шагом будет их установка из корневого каталога проекта:
npm i mdb-react-ui-kit @fortawesome/fontawesome-free npm i @mui/material @emotion/react @emotion/styled npm i @mui/icons-material
Создайте несколько компонентов
Хорошо, я знаю, что потребовалось несколько шагов, чтобы добраться сюда… но теперь мы можем создать несколько потрясающе выглядящих компонентов для нашего нового мобильного приложения! Давайте продолжим и посмотрим на основной экран этого приложения, чтобы понять, как различные компоненты сочетаются друг с другом, чтобы сформировать работающий мобильный интерфейс.
Обязательно ознакомьтесь с исходным кодом этого примера на GitHub, чтобы увидеть весь макет проекта и файлы компонентов!
Создание приложения
После создания нескольких экранов, добавления компонентов и оформления всего по своему вкусу… пришло время собрать и запустить новое приложение! Это можно сделать либо на физическом устройстве, либо, что удобнее, на эмулированном устройстве с помощью Android Studio.
Мы продолжим и воспользуемся последним для этого примера, но прежде чем мы откроем Android Studio, нам нужно, чтобы Tauri сначала создал для нас необходимый каталог проекта Android. Для этого просто запустите из корня проекта следующее:
npm run tauri android init
Вот и все! Если вы работаете над проектом для iOS, вы, конечно же, замените android на ios.
Теперь все готово, чтобы запустить приложение на нашем эмуляторе, чтобы проверить и увидеть в действии! Команда для запуска приложения в режиме разработки аналогична любому другому приложению Tauri:
npm run tauri android dev [--open]
Переключатель — open является необязательным и может использоваться для открытия Android Studio, если он еще не запущен. Перед тестированием обязательно создайте эмулятор устройства в Android Studio!
Вы также можете запустить следующую команду, чтобы просто разработать интерфейс без подключения к эмулятору:
npm run tauri dev
Время установки
После внесения некоторых изменений, добавления некоторых компонентов и тестирования вашего нового интерфейса на эмуляторе или физическом устройстве… пришло время скомпилировать новый блестящий двоичный файл! В этом случае (поскольку мы собираем приложение для Android) в процессе компиляции будет выдан как обычный файл .apk для установки на устройство, так и архивный пакет .aab. Последний из них используется Google Play Store для распространения, если вы когда-нибудь захотите выпустить свое новое мобильное приложение для остального мира!
Команда для создания готового бинарного файла/пакета в основном такая же, как и при тестировании, просто измените последний аргумент команды:
npm run tauri android build
После завершения процесса сборки вы увидите полный путь к выходным данным сборки, который затем можно скопировать/загрузить куда угодно. Вы также можете использовать прямой путь к новому файлу .apk, чтобы установить его непосредственно на устройство-эмулятор для запуска через Android Studio:
npm run tauri android build && \ $HOME/Android/Sdk/platform-tools/adb -s emulator-'<device_number>' \ install $PROJECT_DIR/src-tauri/gen/android/$PROJECT_NAME/ \ app/build/outputs/apk/universal/release/app-universal-release-unsigned.apk
Следующие шаги
Поздравляем! К этому моменту у вас должно быть работающее мобильное приложение, которое успешно собирается и работает на физическом устройстве и/или эмуляторе! Если вы где-то застряли, не расстраивайтесь! По мере продолжения разработки альфа-репозиторий регулярно обновлялся, поэтому обязательно периодически проверяйте его, а также обновляйте зависимости вашего проекта `cargo`!
Tauri Mobile может стать новым игроком в мобильной разработке.
Я надеюсь, что вы заинтересовались этой новой захватывающей функцией, которую разрабатывал этот удивительный фреймворк, и она будет только улучшаться по мере того, как все больше разработчиков будут использовать ее и оставлять критические отзывы!
Если вы ищете другие интересные статьи по программированию, обязательно подпишитесь и следите за мной, чтобы получать оповещения о любых новых статьях, когда они выходят!
Код
Найдите весь исходный код этой статьи на Github:
