Пример кварцевой жилы с высоким содержанием золота, месторождение «Beta Hunt», Западная Австралия
Пример кварцевой жилы с высоким содержанием золота, месторождение «Beta Hunt», Западная Австралия

Я хочу рассказать о своем опыте добавления графического интерфейса пользователя, созданного с помощью HTML-разметки и CSS-стилей, к ранее разработанному мной консольному приложению для золотодобывающей компании. Возможно, описанный мною пример воодушевит на использование веб-технологий в вашем проекте.

В своей работе я реализую прикладные алгоритмы вычислительной геологии. В одном из последних проектов, в котором я участвовал, горнодобывающая компания заинтересовалась анализом золоторудных кварцевых жил (см. пример на фото). Компания имела данные о расположении трещин в горной породе, но не знала, какие из них были открытыми и поэтому могли быть жилами, а какие остались закрытыми и не представляли интереса. Для решения этой задачи я разработал консольное приложение на языке Python с использованием библиотеки NumPy. Приложение оказалось полезным, поэтому в компании решили использовать его для поисково-разведочных работ и на других месторождениях. Однако для этого необходимо было разработать пользовательский интерфейс, совместимый с Windows, MacOS и Linux.

Я придерживаюсь мнения, что пользовательский интерфейс следует делать с помощью HTML и CSS, так как эти технологии никуда не пропадут в ближайшие годы, как это сделали другие фреймворки с которыми я работал: WinForms, WPF, Xamarin.Forms. Каждый из этих фреймворков требовал времени на изучение, а опыт, полученный при работе с одним из них, невозможно применить с любым другим. Мне же, как разработчику, рационально инвестировать время в изучение веб-технологий, так как эти знания можно применить во множестве областей: от создания интерфейсов десктопных и мобильных приложений до подготовки книг к печати (см Paged Media CSS[1][2][3]). А если моих знаний недостаточно для сложной верстки, то найти исполнителя, который разработает и сверстает интерфейс программы с помощью веб-технологий, проще и дешевле, чем найти специалиста, способного подготовить описание интерфейса в специализированном DSL фреймворка, такого как XAML, QML, Xib или Nib.

Множество популярных приложений используют веб-технологии при разработке пользовательских интерфейсов, например, VS Code, Figma, Obsidian, Notion, GitHub Desktop, Slack, Signal, 1Password и многие другие. У большинства инструментов есть обширный список приложений, разработанных с их использованием: Electron, Tauri, Wails. Презентовать графический интерфейс пользователю можно и в браузере с помощью локального веб-сервера. Так поступили при разработке таких программ и сервисов как Proxmox (гипервизор), Ventoy (создание загрузочных флешек), CUPS (сервер печати в MacOS и Linux), Syncthing (синхронизация файлов).

В моей предметной области, связанной с нефтегазовой и горнодобывающей промышленностью, использование локального веб-сервера для представления интерфейса — не лучший выбор. Это связано с тем, что клиенты из этих сфер часто ассоциируют работу в браузере с передачей данных через сеть, что вызывает опасения по поводу безопасности. Поэтому требуется прикладывать дополнительные усилия на пояснения, как работает локальный сервер, и почему данные не покидают компьютер. Но мне все равно кажется, что мои объяснения не до конца рассеивают их опасения. Также я был в ситуации, когда политика безопасности предусматривала отсутствие браузера и сетевого подключения на компьютерах, которые работали с особо ценными данными. К тому же, веб-сервер нужно дополнительно установить и аккуратно реализовать его обновление и деинсталляцию, что усложняет инсталляционный скрипт и распространение обновлений.

Десктопное приложение более привычно пользователю, так как он видит интерфейс программы в отдельном окне. Фреймворк берет на себя работу по созданию и управлению нативным окном приложения, по размещению в созданном окне компонента WebView, который отрисовывает HTML-страницу экрана приложения. С помощью таких фреймворков можно легко сделать из веб-приложения десктопное или дополнить существующее консольное приложение пользовательским интерфейсом, созданным с помощью веб-технологий.

Сравнение Tauri и Electron

Существует не один проект, позволяющий создать пользовательский интерфейс с помощью веб-технологий. Наиболее известны Electron, Tauri, Wails, Ultralight и Fyne. Electron самый зрелый из перечисленных выше, поэтому используется во многих популярных приложениях, но Tauri обладает существенными преимуществами перед Electron, на основании которых я сделал выбор в его пользу. Об этих преимуществах я расскажу далее.

При создании приложения с помощью Electron в ваше приложение будет добавлен движок Chromium, поэтому минимальный размер получающегося архива будет более 200 Мб[4]. Tauri и Wails используют компонент WebView, уже присутствующий в системе пользователя; в Windows это будет Chromium, а в macOS и Linux это будет WebKit[5][6]. Размер минимального приложения, созданного с помощью Tauri, будет меньше 7 Мб[7].

Каждый из фреймворков дает возможность взаимодействия с операционной системой, например, доступ к файловой системе или периферийным устройствам. В Electron доступно API Node.js. В Tauri взаимодействовать с операционной системой можно либо со стороны фронтенда, то есть изнутри HTML-страницы, используя JavaScript, либо со стороны бэкенда, то есть в той части приложения, которая создает и контролирует окно c WebView компонентом. Бэкенд приложения в Tauri пишется на Rust, что дает возможность реализовать часть приложения с помощью компилируемого языка программирования. В моем проекте по расчету параметров трещин это будет иметь огромное значение, когда потребуется добавить интерактивную визуализацию, так как в этом случае программа должна будет делать перерасчет без видимых задержек.

Electron приложение распространяется как asar архив[8], распаковав который, можно получить доступ к исходному коду JavaScript приложения. С Tauri так не получится, так как все ресурсы, такие как JavaScript код веб-приложения, HTML-верстка и CSS-стили, встраиваются в исполняемый двоичный файл программы, что сильно затрудняет процесс декомпиляции. Подробнее о мерах безопасности, предпринятых в Tauri, можно прочитать в документации Tauri Apps: Security.

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

В Tauri-приложение можно добавить внешние исполняемые файлы, которые будут распространяться вместе с приложением, чтобы избавить пользователя от необходимости самостоятельно устанавливать дополнительные зависимости. Примером таких зависимостей могут быть интерпретаторы Node.js или Python. В документации Tauri такие встраиваемые внешние зависимости называются sidecar. Разработчики приводят пример использования sidecar API для запуска Node.js приложения из приложения Tauri. Аналогичного примера для запуска Python программы в документации нет, но сделать это также просто. Для этого потребуется упаковать интерпретатор Python, скрипт программы и все ее зависимости, такие как NumPy, в единый исполняемый бинарный файл, для чего я использовал PyInstaller.

Для Windows Tauri подготовит *.msi инсталлятор, используя набор инструментов WiX, или *.exe установочный файл, используя NSIS[9]. Для MacOS можно создать *.dmg образ или архив приложения *.app[10]. Для Linux могут быть созданы Debian пакет *.deb или *.AppImage файл[11]. Это избавляет от необходимости самостоятельно писать инсталляторы или, как минимум, отложить это до момента, когда возможностей Tauri начнет не хватать.

Несмотря на то, что Electron более распространен на сегодняшний день, некоторые популярные программы такие, как 1Password, рассматривают возможность перехода на Tauri[12]. Если такие известные проекты присматриваются к Tauri, то имеет смысл обратить внимание на этот инструмент всем нам.

Выводы

С помощью Tauri я быстро добавил пользовательский интерфейс к написанной ранее программе, не внося в нее никаких изменений. Применяемые в проекте технологии позволили создать кросс-платформенное приложение из единой кодовой базы, которое работает в операционных системах Windows, MacOS и Linux. Использование Tauri упростило установку приложения, так как оно содержит в себе все необходимые для работы зависимости, а пользователь видит знакомый интерфейс инсталлятора. Также я получил возможность реализовать часть функционала на современном компилируемом языке программирования.

Разработанное мной приложение используют при бурении поисково-разведочных скважин, при этом большая часть времени была уделена реализации прикладных алгоритмов, их тестированию, обсуждению результатов с коллегами-геологами, а не на изучение фреймворков для создания пользовательских интерфейсов!

Начать использовать Tauri оказалось очень просто. Если мой опыт вас заинтересовал, то создать первое приложение можно, следуя подробному руководству из документации. Думаю, сейчас самое время попробовать.

Сноски

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_paged_media

[2] https://weasyprint.org

[3] https://print-css.rocks

[4] https://www.youtube.com/watch?v=yRT5rhuSjdU

[5] https://tauri.app/v1/references/webview-versions/

[6] https://wails.io/docs/introduction#native-elements

[7] https://www.youtube.com/watch?v=yRT5rhuSjdU

[8] https://www.electronjs.org/docs/latest/tutorial/asar-archives

[9] https://tauri.app/v1/guides/building/windows

[10] https://tauri.app/v1/guides/building/macos

[11] https://tauri.app/v1/guides/building/linux

[12] https://1password.community/discussion/comment/618609/#Comment_618609

Комментарии (5)


  1. ilyalisov
    02.05.2024 21:11

    Интересная статья! Я правильно понимаю что этот софт работает только на машине, без какого-либо подключения к сети после инсталляции?


    1. rzaitov Автор
      02.05.2024 21:11

      Да, все так. Программа, о которой шла речь в этой статье, не требует работы с сетью.


      1. ilyalisov
        02.05.2024 21:11

        Кажется, что веб способен запускаться где угодно, и возможность разрабатывать нативные приложения через разметку и JS должна убить конструкторы формочек для Windows и Mac)


  1. SuharkovMP
    02.05.2024 21:11
    +2

    Как веб-технологии помогают искать золото?

    веб-технологии помогают искать золото, являясь дополнением к ранее разработанному автором статьи консольному приложению. О функционале самого приложения почему-то ни слова.


    1. rzaitov Автор
      02.05.2024 21:11
      +3

      В процессе редактуры я выкинул это описание, потому что мне оно показалось неинтересным.

      Суть приложения сводится к следущему. Золотоносная руда может находиться только в трещинах породы (геологи называют их разломами). Это видно на примере картинки к статье. Порода, где на текущий момент расположен карьер, подвергалась нескольким этапам деформации. На каком-то этапе деформации мог образоваться разлом (порода треснула не выдержав механического напряжения). На последующих этапах деформации два блока по разные стороны от разлома могут смещаться друг относительно друга. Полость трещены может при последующих механических воздействиях расрываться. Важно найти трещены которые максимально раскрыты, так как в них будет больше всего запасено руды.

      Геологи картируют все разломы в исследуемой области, после чего мы знаем геометрию(поверхность) разлома. Также они исследуют направления смещений блоков друг отностилеьно друга, это дает возможность выделить несколько этапов деформации, которые были в этом месте(районе). Каждай этап деформации описывается тензором механических напряжений; нам от этого тензора будут нужны направления его главных осей. Зная ориентацию тензора механических напряжений этапа деформаци и расположение трещены, можно посчитать ее коэффициент дилатации. Это количественный показатель того "стремилась ли трещина к раскрытию".

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

      Вот как это выглядит на практике. Слева трещина с небольшим коэффициентом делатации, а справа с высоким.