Tworzenie małych aplikacji desktopowych z Tauri i Vue.js

Technologia czyni nasze życie lepszym nie tylko użytkownikom, ale także twórcom (programistom i projektantom). W tym artykule przedstawię Wam Tauri. Ten artykuł przyda Ci się, jeśli:

• budujesz aplikacje w sieci za pomocą HTML, CSS i JavaScript i chcesz używać tych samych technologii do tworzenia aplikacji przeznaczonych na platformy Windows, macOS lub Linux;
• już budujesz wieloplatformowe aplikacje komputerowe z technologiami takimi jak Electron i chcesz sprawdzić alternatywy;
• chcesz tworzyć aplikacje z technologiami webowymi dla dystrybucji Linuksa, takich jak PureOS;
• jesteś entuzjastą Rusta i chciałbyś go zastosować do tworzenia natywnych aplikacji wieloplatformowych.

Przyjrzymy się, jak zbudować natywną aplikację wieloplatformową z istniejącego projektu internetowego. Weźmy się za to!

Uwaga : w tym artykule zakładamy, że znasz język HTML, CSS, JavaScript i Vue.js.

Co to jest Tauri?

Oficjalna strona internetowa dobrze podsumowuje Tauri:

• Tauri to wielojęzyczny łańcuch narzędzi do tworzenia bezpieczniejszych natywnych aplikacji z zarówno małymi, jak i szybkimi plikami binarnymi. Przez „poliglota” rozumiem, że Tauri używa wielu języków programowania. Obecnie używane są Rust, JavaScript i TypeScript. Ale są plany, aby umożliwić korzystanie z Go, C++, Pythona i innych.
• Umożliwia korzystanie z dowolnej struktury frontonu opartej na HTML i JavaScript, takiej jak Vue.js, React lub Angular, do tworzenia natywnej aplikacji komputerowej i można ją zintegrować z dowolnym potoku.
• Pomaga budować i łączyć pliki binarne dla głównych platform komputerowych (mobilne i WebAssembly już wkrótce).

Zasadniczo Tauri umożliwia korzystanie z technologii internetowych do tworzenia małych i bezpiecznych natywnych aplikacji komputerowych.

Na swojej stronie GitHub Tauri jest opisany jako niezależny od frameworka łańcuch narzędzi do tworzenia wysoce bezpiecznych aplikacji natywnych, które mają małe pliki binarne (tj. rozmiar pliku) i które są bardzo szybkie (tj. minimalne zużycie pamięci RAM).

Dlaczego nie elektron?

Popularnym narzędziem do wykorzystywania technologii internetowych do tworzenia aplikacji desktopowych jest Electron.

Jednak aplikacje Electron mają dość duży rozmiar pakietu i podczas działania zajmują dużo pamięci. Oto jak Tauri porównuje się do Electrona:

• Pakiet
  Rozmiar aplikacji Tauri może być mniejszy niż 600 KB.
• Pamięć
  Ślad aplikacji Tauri jest o połowę mniejszy od aplikacji Electron.
• Licencja
  Relicencjonowanie jest możliwe w przypadku Tauri, ale nie w przypadku Electrona. Electron jest dostarczany z Chromium zaraz po wyjęciu z pudełka. Chromium zawiera jednak system zarządzania prawami cyfrowymi o nazwie Widevine. Włączenie Widevine do Chromium sprawia, że ​​aplikacje stworzone za pomocą Electron są mile widziane przez użytkowników platform takich jak PureOS tylko dlatego, że nie jest to darmowe/wolne oprogramowanie o otwartym kodzie źródłowym (FLOSS). Platformy takie jak PureOS są weryfikowane przez Free Software Foundation (FSF). Oznacza to, że w swoich sklepach z aplikacjami mogą publikować wyłącznie bezpłatne oprogramowanie o otwartym kodzie źródłowym.

Krótko mówiąc, jeśli Twoja aplikacja jest oparta na Electronie, nigdy nie zostanie oficjalnie dostarczona do sklepu PureOS. Powinno to być przedmiotem troski programistów, którzy wybierają takie dystrybucje.

Więcej funkcji Tauri

• Bezpieczeństwo jest bardzo ważne dla zespołu Tauri. Aplikacje tworzone za pomocą Tauri mają być bezpieczne od samego początku.
• Tauri jest kompatybilny z dowolnym frameworkiem front-end, więc nie musisz zmieniać swojego stosu.
• Ma wiele wzorców projektowych, które pomogą Ci wybrać ważne funkcje przy prostych konfiguracjach.

Plusy Tauri

• Tauri umożliwia przekształcenie bazy kodu, którą zbudowałeś dla Internetu, w natywną aplikację komputerową bez zmiany czegokolwiek.
• Chociaż możesz użyć Rust w projekcie opartym na Tauri, jest to całkowicie opcjonalne. Gdybyś tak zrobił, nie musiałbyś zmieniać niczego w swojej oryginalnej bazie kodu przeznaczonej dla sieci.

Taury w świecie rzeczywistym

Jeśli byłeś częścią społeczności Vue.js przez jakiś czas, to słyszałeś o Guillaume Chau, członku głównego zespołu Vue.js. Jest odpowiedzialny za interfejs wiersza poleceń (CLI) Vue.js, a także inne niesamowite biblioteki Vue.js. Niedawno stworzył guijs, co oznacza „graficzny interfejs użytkownika dla projektów JavaScript”. Jest to natywna aplikacja komputerowa oparta na technologii Tauri do wizualnego zarządzania projektami JavaScript.

Guijs jest przykładem tego, co jest możliwe dzięki Tauri, a fakt, że główny członek zespołu Vue.js pracuje nad aplikacją, mówi nam, że Tauri dobrze współpracuje z Vue.js (wśród innych front-endowych frameworków). Sprawdź repozytorium guijs na GitHub, jeśli jesteś zainteresowany. I tak, jest to oprogramowanie typu open source.

Jak działa Tauri

Na wysokim poziomie Tauri używa Node.js do tworzenia szkieletu okna renderowania HTML, CSS i JavaScript jako interfejsu użytkownika (UI), zarządzanego i uruchamianego przez Rust. Produkt jest monolitycznym plikiem binarnym, który może być rozpowszechniany jako popularne typy plików dla systemów Linux (deb/appimage), macOS (app/dmg) i Windows (exe/msi).

Jak powstają aplikacje Tauri

Aplikacja Tauri jest tworzona w następujący sposób:

1. Najpierw utwórz interfejs w swoim frameworku GUI i przygotuj HTML, CSS i JavaScript do użycia.
2. Tauri Node.js CLI przejmuje go i montuje Rust runner zgodnie z twoją konfiguracją.
3. W trybie programistycznym tworzy okno WebView z debugowaniem i Hot Module Reloading .
4. W trybie budowania riguje pakiet i tworzy ostateczną aplikację zgodnie z Twoimi ustawieniami.

Konfigurowanie środowiska

Teraz, gdy już wiesz, czym jest Tauri i jak działa, pozwól, że poprowadzę Cię przez proces konfiguracji Twojej maszyny do rozwoju z Tauri.

Uwaga : ta konfiguracja dotyczy komputerów z systemem Linux, ale dostępne są również przewodniki dla systemów macOS i Windows.

Konfiguracja Linuksa

Wielojęzyczny charakter Tauri sprawia, że ​​wymaga on szeregu zależności narzędziowych. Zacznijmy od zainstalowania niektórych zależności. Uruchom następujące:

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

Gdy powyższe się powiedzie, przejdź do instalacji Node.js (jeśli jeszcze go nie masz), ponieważ Tauri wymaga jego runtime. Możesz to zrobić, uruchamiając to:

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

Spowoduje to zainstalowanie nvm (menedżera wersji Node.js), który umożliwia łatwe zarządzanie środowiskiem wykonawczym Node.js i łatwe przełączanie się między wersjami Node.js. Po zainstalowaniu uruchom to, aby zobaczyć listę wersji Node.js:

 nvm ls-remote

W chwili pisania tego tekstu najnowsza wersja to 14.1.0. Zainstaluj to tak:

 nvm install v14.1.0

Gdy Node.js zostanie w pełni skonfigurowany, będziesz musiał zainstalować kompilator Rusta i menedżera pakietów Rust: Cargo. Poniższe polecenie zainstaluje oba:

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

Po uruchomieniu tego polecenia upewnij się, że Cargo i Rust znajdują się w twojej $PATH , uruchamiając następujące polecenie:

 rust --version

Jeśli wszystko poszło dobrze, powinno to zwrócić numer wersji.

Zgodnie z dokumentacją Tauri upewnij się, że korzystasz z najnowszej wersji, uruchamiając następujące polecenie:

 $ rustup update stable

Voila! Jesteś o krok bliżej do przygotowania maszyny w 100% na Tauri. Pozostało już tylko zainstalować tauri-bundler . Najlepiej zamknąć CLI i uruchomić poniższe polecenie w nowym oknie CLI:

 $ cargo install tauri-bundler --force

Eureko! Jeśli wszystko poszło dobrze, Twoja maszyna jest gotowa na Tauri. Następnie zaczniemy integrować Tauri z Vue.js. Weźmy się za to!

Przędza

Zespół Tauri zaleca zainstalowanie menedżera pakietów Yarn. Więc zainstalujmy to w ten sposób:

 npm install -g yarn

Następnie uruchom następujące polecenie:

 yarn --version

Jeśli wszystko działało, powinien zostać zwrócony numer wersji.

Integracja Tauri z Vue.js

Teraz, gdy zainstalowaliśmy Tauri, połączmy istniejący projekt sieciowy. Demo projektu na żywo można znaleźć na Netlify. Śmiało i rozwidlej repozytorium, które będzie służyć jako powłoka. Po rozwidleniu pamiętaj, aby sklonować widelec, uruchamiając to:

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

Po sklonowaniu projektu uruchom następujące czynności, aby zainstalować zależności:

 yarn

Następnie uruchom to:

 yarn serve

Twoja aplikacja powinna działać na localhost:8080 . Zabij działający serwer i zainstalujmy wtyczkę Vue.js CLI dla Tauri.

vue-cli-plugin-tauri

Zespół Tauri stworzył wtyczkę Vue.js CLI, która szybko riguje i zamienia twoją jednostronicową aplikację Vue.js (SPA) w małą, wieloplatformową aplikację komputerową, która jest zarówno szybka, jak i bezpieczna. Zainstalujmy tę wtyczkę:

 vue add tauri

Po zainstalowaniu wtyczki, co może chwilę potrwać, poprosi Cię o tytuł okna. Wystarczy wpisać nota i nacisnąć „Enter”.

Przyjrzyjmy się zmianom wprowadzonym przez wtyczkę Tauri.

pakiet.json

Wtyczka Tauri dodała dwa skrypty w sekcji skryptów naszego pliku package.json . Oni są:

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

Podczas programowania należy używać skryptu tauri:serve . Więc uruchommy to:

 yarn tauri:serve

Powyższe spowoduje pobranie skrzyń Rust potrzebnych do uruchomienia naszej aplikacji. Następnie uruchomi naszą aplikację w trybie deweloperskim , gdzie utworzy okno WebView z debugowaniem i przeładowaniem modułu Hot !

src-tauri

Zauważysz również, że wtyczka dodała katalog src-tauri do katalogu głównego katalogu twojej aplikacji. Wewnątrz tego katalogu znajdują się pliki i foldery używane przez Tauri do konfiguracji aplikacji komputerowej. Sprawdźmy zawartość:

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

Jedyną zmianą, jaką musielibyśmy wprowadzić, jest src-tauri/Cargo.toml . Cargo.toml jest jak plik package.json dla Rusta. Znajdź linię poniżej w Cargo.toml :

 name = "app"

Zmień to na to:

 name = "nota"

To wszystko, co musimy zmienić w tym przykładzie!

Wiązanie

Aby powiązać nota ​​z aktualną platformą, po prostu uruchom to:

 yarn tauri:build

Uwaga : Podobnie jak w przypadku okna rozwoju, przy pierwszym uruchomieniu zajmie trochę czasu, aby zebrać skrzynie Rust i zbudować wszystko. Podczas kolejnych przejazdów będzie musiał jedynie samodzielnie odbudować skrzynie Tauri.

Po zakończeniu powyższego powinieneś mieć plik binarny nota dla bieżącego systemu operacyjnego. Dla mnie mam plik binarny .deb utworzony w katalogu src-tauri/target/release/bundle/deb/

Przejście na wiele platform

Prawdopodobnie zauważyłeś, że yarn tauri:build właśnie wygenerowała plik binarny dla twojego systemu operacyjnego. Wygenerujmy więc pliki binarne dla innych systemów operacyjnych. Aby to osiągnąć, skonfigurujemy przepływ pracy na GitHub. Używamy tutaj GitHub, aby służyć jako medium dystrybucyjne dla naszej wieloplatformowej aplikacji. Tak więc Twoi użytkownicy mogą po prostu pobrać pliki binarne w zakładce „Wydanie” projektu. Przepływ pracy, który byśmy zaimplementowali, automatycznie zbudowałby dla nas nasze pliki binarne za pomocą akcji GitHub. Weźmy się za to.

Tworzenie przepływu pracy Tauri

Dzięki Jacobowi Boldzie mamy przepływ pracy do automatycznego tworzenia i wydawania aplikacji wieloplatformowych z Tauri na GitHub. Oprócz budowania pliku binarnego dla różnych platform (Linux, Mac i Windows), akcja może również przesłać plik binarny dla Ciebie jako wydanie na GitHub. Aby to osiągnąć, używa również akcji Utwórz uwolnienie wykonanej przez Jacoba.

Aby skorzystać z tego przepływu pracy, utwórz katalog .github w katalogu głównym nota-web . W tym katalogu utwórz kolejny katalog o nazwie workflows . Następnie stworzylibyśmy plik przepływu pracy w .github/workflows/ i nazwalibyśmy go release-tauri-app.yml .

W release-tauri-app.yml dodamy przepływ pracy, który buduje pliki binarne dla systemów Linux, macOS i Windows. Ten przepływ pracy przesłałby również pliki binarne jako wersję roboczą na GitHub. Przepływ pracy zostanie wyzwolony za każdym razem, gdy wypchniemy do mastera.

Otwórz release-tauri-app.yml i dodaj poniższy fragment kodu:

 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

Aby przetestować przepływ pracy, zatwierdź i wypchnij swoje zmiany do master gałęzi rozwidlenia. Po pomyślnym wypchnięciu do GitHub możesz kliknąć kartę "Akcje" w GitHub, a następnie kliknąć link "Sprawdź kompilację", aby zobaczyć postęp przepływu pracy.

Po pomyślnym wykonaniu akcji możesz zobaczyć wersję roboczą w „Wersje” na stronie repozytorium na GitHub. Następnie możesz opublikować swoje wydanie!

Wniosek

W tym artykule przedstawiono łańcuch narzędzi wielojęzycznych do tworzenia bezpiecznych, wieloplatformowych i małych aplikacji natywnych. Widzieliśmy, czym jest Tauri i jak włączyć go do Vue.js. Na koniec połączyliśmy naszą pierwszą aplikację Tauri, uruchamiając yarn tauri:build , a także użyliśmy akcji GitHub do tworzenia plików binarnych dla systemów Linux, macOS i Windows.

Daj mi znać, co myślisz o Tauri — byłbym podekscytowany, widząc, co z nim zbudujesz. Możesz dołączyć do serwera Discord, jeśli masz jakieś pytania.

Repozytorium tego artykułu znajduje się na GitHub. Zobacz także pliki binarne wygenerowane przez przepływ pracy GitHub.