Встречайте новую альтернативу Electron
Вас пугала идея отказа от JavaScript, HTML и CSS?
Что ж, в течение многих лет у нас были альтернативы, которые позволяли нам создавать нативные приложения с использованием этих технологий, что значительно облегчало нашу жизнь.
В этой статье я поделюсь с вами одним конкретным инструментом, который привлек мое внимание: Таури.
Эта альтернатива Electron позволяет создавать настольные приложения с использованием веб-технологий, которые вы знаете и любите.
Сегодня я покажу вам, как вы можете создать простое приложение To-Do (с добавленным анализом тональности) с помощью React, но при этом мы сможем распространять его как нативное приложение.
Начало работы с Таури
Настройка основного проекта на самом деле довольно тривиальна. Их документация может вас немного напугать, если вы прочитаете все шаги руководства, но если вы делаете это впервые, единственное, что вам нужно запомнить, это эту команду:
sh <(curl https://create.tauri.app/sh) <your app name> --template react --manager npmThat’s all, the script will take care of asking you a few questions,
Эта простая строка установит все, что вам нужно, убедившись, что она использует шаблон React и работает с NPM в качестве менеджера пакетов.
Вы можете просмотреть их ручную настройку в другой день, сегодня мы закончили. Кроме того, документы Tauri охватывают только то, как вручную начать работу с Next, но если вы посмотрите на документы команды create-tauri-app, вы увидите, что вам не нужен Next для использования простого React.
В моем случае я назвал свое приложение «Tauri-Do», и оно создало кучу папок и файлов. В этом примере мы будем беспокоиться только о двух папках:
src: Здесь будет жить наш код React.src-tauri: Здесь мы добавим немного кода Rust, чтобы добавить очень простую нативную функцию в наше приложение.
Да, я сказал «Rust», серверная часть Tauri и причина, по которой мы можем создать нативное приложение (с доступом ко всем нативным преимуществам, таким как управление окнами и меню). Не волнуйтесь, я добавлю очень мало Rust, так что если вы никогда не программировали на этом языке, вы не заблудитесь.
Теперь давайте посмотрим на приложение, которое мы будем создавать.
Создание десктопной версии приложения To-Do
Я собираюсь создать классическое приложение To-Do с добавленной «вишенкой на вершине», что приложение будет выполнять быстрый анализ настроений по задачам, чтобы определить, являются ли они «положительными», «отрицательными» или «нейтральными». ».
Вот как будет выглядеть приложение:
Я сделал большой скриншот, потому что мы собираемся добавить верхнюю строку меню. Меню «Файл», которое вы видите, было добавлено в качестве встроенной функции в это приложение. Это не будет делать МНОГО, но у него будет действие, которое при нажатии перемещает фокус обратно в поле ввода в главном окне.
По сути, мы собираемся создать приложение React, которое может взаимодействовать с ОС.
Захватывающий!
Для этого, после первоначальной настройки, которую вы уже должны были выполнить, мы будем использовать пакет bootstrap для стилизации и пакет sentiment для бита анализа тональности.
Написание веб-интерфейса
Давайте начнем с того, что должно быть легкой частью.
После запуска команды начальной настройки у вас должна быть готова структура проекта. На данный момент мы сосредоточимся на папке src. Вот где будет жить наш веб-код.
Чтобы упростить задачу, я собираюсь отредактировать файл App.jsx внутри этой папки и добавить следующий код:
Как вы понимаете, это базовый код приложения для списка дел. Я не храню задачи нигде, кроме как внутри состояния компонента, используя хук useState.
Анализ настроений выполняется в строке 19, и это дает мне число, которое я затем превращаю в строку при отображении списка с помощью функции getSentimentString.
Опять же, ничего особенного, просто небольшая функция, которая сделает приложение более интересным.
На данный момент вы уже можете запустить приложение с помощью npm run tauri dev, и после компиляции некоторого кода (да, я сказал компилировать) приложение появится на вашем экране.
Но прямо сейчас «приложение» — это не что иное, как упрощенный веб-браузер, показывающий вашу веб-страницу.
Итак, давайте взаимодействуем с ОС.
Добавляем немного «магии» Rust
Rust API большой, с ним можно делать МНОГОЕ, но в целях вводного урока я просто ограничусь добавлением нативного пункта меню.
Для этого мы зайдем в папку src-tauri и откроем файл src/main.rs.
Вы уже увидите там некоторый код, так как приложение по умолчанию, которое оно создает при настройке проекта, также добавило некоторые базовые взаимодействия. Оставьте все там на время, давайте не будем слишком беспокоиться об этом.
Сейчас мы должны сосредоточиться на добавлении пунктов меню. Для этого добавим в функцию main следующий код:
Первый атрибут метода CustomMenuItem::new — это пункт меню «id», а второй — текст, который будет показан.
Здесь мы создаем меню «Файл» с двумя опциями: «Новая задача» и «Выход».
Мы хотим, чтобы опция «Выход» завершила программу, а для «Новой задачи» мы хотим инициировать событие фокуса на элементе ввода. Но сначала нам еще нужно добавить это новое меню в программу.
Мы сделаем это, изменив строку tauri::Builder, чтобы она выглядела так:
И теперь, если вы снова запустите приложение, вы увидите меню в верхнем левом углу.
Теперь нам нужно как-то заставить эти опции работать. Для этого мы будем использовать «события». В частности, «события меню».
Мы будем использовать метод on_menu_event следующим образом:
Оператор match поможет нам сопоставить пункт меню «id» с идентификатором события. Итак, для элемента «выйти» мы просто закрываем приложение с помощью std::process::exit(0). Но для «нового» пункта меню мы вызовем событие окна. Это событие должно быть зафиксировано нашим пользовательским интерфейсом, и мы отреагируем соответствующим образом.
Первый аргумент метода emit — это «id» события, а второй — полезная нагрузка. Для этого конкретного события нам не нужна полезная нагрузка, поэтому мы оставим ее пустой.
И это все, что нам было нужно. Теперь давайте вернемся в раздел React нашего приложения и добавим код для прослушивания нашего нового события.
Прослушивание событий Rust в нашем компоненте React
Мы будем использовать функцию listen из библиотеки @tauri-apps/api/event, которая уже установлена в проекте.
Итак, добавьте этот оператор импорта в свой файл App.jsx:
import {listen} from '@tauri-apps/api/event'
А затем мы настроим прослушиватель событий при монтировании компонента. Для этого мы просто воспользуемся хуком useEffect, например:
И теперь, при нажатии на пункт меню «Файл -> Создать задачу», поле ввода получит фокус.
Магия!
Если вы хотите увидеть полный исходный код приложения, вы можете проверить этот репозиторий Github.
Обратите внимание, что вы также можете генерировать события из веб-интерфейса, которые будут обрабатываться Rust. Подробнее о событиях можно прочитать в их официальной документации.
Понравилось ли вам то, что вы прочитали? Подпишитесь на мой БЕСПЛАТНЫЙ информационный бюллетень, где я делюсь со всеми своим 20-летним опытом работы в ИТ-индустрии. Присоединяйтесь к Бродяге старого разработчика!
Создание вашего приложения
Единственное, чего нам не хватает на данный момент, — это упаковки вашего приложения для распространения. В конце концов, это десктопное приложение, поэтому мы должны каким-то образом получить бинарный файл.
Мы можем сделать это с помощью команды npm run tauri build. Но перед этим нам нужно отредактировать файл src-tauri/tauri.conf.json. Там мы можем редактировать многие свойства приложения, такие как имя со свойством package.productName, значки со свойством tauri.bundle.icon и идентификатор пакета со свойством tauri.bundle.identifier.
Единственное обязательное изменение — последнее, нам нужно добавить уникальный идентификатор пакета. Как только мы это сделаем, запустится процесс сборки, и мы получим бинарный файл для установки.
Имейте в виду, что на момент написания этой статьи кросс-компиляция отсутствует, поэтому, если вы хотите иметь бинарники для macOS и Windows (например), вам придется собирать их в обеих системах.
Кроме этого, ваше приложение должно быть готово сейчас.
Поздравляем, вы создали свое (надеюсь) первое настольное приложение, не изучая язык программирования для настольных компьютеров.
С помощью Tauri мы смогли напрямую перенести все наши знания в области веб-разработки в мир настольных компьютеров. И в процессе мы также получили некоторые сверхспособности, которых у нас не было раньше: возможность взаимодействовать со специфическими функциями ОС.
Хотя в этом уроке мы только коснулись Tauri, мы ясно видим потенциал, который предоставляет эта структура. Я очень рад продолжить пробовать его и посмотреть, как далеко я смогу зайти, прежде чем мне действительно понадобится выучить другой язык.
А вы? Вы уже пробовали Таури? Или вы пробовали что-то подобное, например Electron? Поделитесь своим опытом в разделе комментариев!
Создавайте приложения с повторно используемыми компонентами, такими как Lego.
Инструмент с открытым исходным кодом Bit помогает более чем 250 000 разработчиков создавать приложения с компонентами.
Превратите любой пользовательский интерфейс, функцию или страницу в компонент многократного использования — и поделитесь им со своими приложениями. Легче сотрудничать и строить быстрее.
Разделите приложения на компоненты, чтобы упростить разработку приложений, и наслаждайтесь наилучшими возможностями для рабочих процессов, которые вы хотите:
