Crearea de aplicații desktop mici cu Tauri și Vue.js

Tehnologia ne face viața mai bună, nu doar utilizatorii, ci și creatorii (dezvoltatori și designeri). În acest articol, vă voi prezenta pe Tauri. Acest articol vă va fi util dacă:

• ați creat aplicații pe web cu HTML, CSS și JavaScript și doriți să utilizați aceleași tehnologii pentru a crea aplicații care vizează platformele Windows, macOS sau Linux;
• construiți deja aplicații desktop multiplatforme cu tehnologii precum Electron și doriți să verificați alternative;
• doriți să construiți aplicații cu tehnologii web pentru distribuțiile Linux, cum ar fi PureOS;
• sunteți un pasionat de Rust și doriți să îl aplicați pentru a construi aplicații native multiplatforme.

Vom analiza cum să construim o aplicație nativă multiplatformă dintr-un proiect web existent. Să ajungem la asta!

Notă : Acest articol presupune că sunteți confortabil cu HTML, CSS, JavaScript și Vue.js.

Ce este Tauri?

Site-ul oficial o rezumă bine pe Tauri:

• Tauri este un lanț de instrumente poliglot pentru construirea de aplicații native mai sigure, atât cu binare mici, cât și rapide. Prin „poliglot”, vreau să spun că Tauri folosește mai multe limbaje de programare. În acest moment, sunt folosite Rust, JavaScript și TypeScript. Dar există planuri pentru a vă permite să utilizați Go, C++, Python și multe altele.
• Vă permite să utilizați orice cadru front-end bazat pe HTML și JavaScript, cum ar fi Vue.js, React sau Angular, pentru a construi o aplicație desktop nativă și poate fi integrată în orice conductă.
• Vă ajută să construiți și să grupați fișiere binare pentru platformele desktop majore (mobile și WebAssembly vor fi disponibile în curând).

Deci, practic, Tauri vă permite să utilizați tehnologii web pentru a crea aplicații desktop native mici și sigure.

Pe pagina sa GitHub, Tauri este descris ca un lanț de instrumente agnostic de cadru pentru construirea de aplicații native extrem de sigure, care au binare mici (adică dimensiunea fișierului) și care sunt foarte rapide (adică utilizarea minimă a RAM).

De ce nu Electron?

Un instrument popular pentru utilizarea tehnologiilor web pentru a construi aplicații desktop este Electron.

Cu toate acestea, aplicațiile Electron au o dimensiune destul de mare a pachetului și tind să ocupe multă memorie atunci când rulează. Iată cum se compară Tauri cu Electron:

• Pachet
  Dimensiunea unei aplicații Tauri poate fi mai mică de 600 KB.
• Memorie
  Amprenta unei aplicații Tauri este mai mică de jumătate din dimensiunea unei aplicații Electron.
• Licență
  Licențiarea este posibilă cu Tauri, dar nu și cu Electron. Electronul este livrat cu Chromium imediat scos din cutie. Cu toate acestea, Chromium include un sistem digital de gestionare a drepturilor numit Widevine. Includerea lui Widevine în Chromium face ca aplicațiile create cu Electron să fie descurajate de utilizatorii platformelor precum PureOS din singurul motiv că nu este un software cu sursă deschisă (FLOSS) gratuit. Platforme precum PureOS sunt verificate de Free Software Foundation (FSF). Aceasta înseamnă că pot publica numai software gratuit și open-source în magazinele lor de aplicații.

Pe scurt, dacă aplicația dvs. este construită cu Electron, nu va fi niciodată expediată oficial în magazinul PureOS. Aceasta ar trebui să fie o preocupare pentru dezvoltatorii care vizează astfel de distribuții.

Mai multe caracteristici ale lui Tauri

• Securitatea este foarte importantă pentru echipa Tauri. Aplicațiile create cu Tauri sunt menite să fie sigure de la început.
• Tauri este compatibil cu orice cadru front-end, așa că nu trebuie să vă schimbați stiva.
• Are multe modele de design pentru a vă ajuta să alegeți funcții importante cu configurații simple.

Avantajele lui Tauri

• Tauri vă permite să luați baza de cod pe care ați creat-o pentru web și să o transformați într-o aplicație desktop nativă, fără a schimba nimic.
• Deși ați putea folosi Rust într-un proiect bazat pe Tauri, este complet opțional. Dacă ați făcut-o, nu ar fi nevoie să modificați nimic din baza de cod inițială destinată webului.

Tauri din lumea reală

Dacă faci parte din comunitatea Vue.js de ceva vreme, atunci vei fi auzit de Guillaume Chau, un membru al echipei de bază a Vue.js. El este responsabil pentru interfața de linie de comandă Vue.js (CLI), precum și pentru alte biblioteci minunate Vue.js. El a creat recent guijs, care înseamnă „interfață grafică cu utilizatorul pentru proiecte JavaScript”. Este o aplicație desktop nativă alimentată de Tauri pentru a vă gestiona vizual proiectele JavaScript.

Guijs este un exemplu de ceea ce este posibil cu Tauri, iar faptul că un membru de bază al echipei Vue.js lucrează în aplicație ne spune că Tauri se joacă frumos cu Vue.js (printre alte framework-uri front-end). Verificați depozitul guijs de pe GitHub dacă sunteți interesat. Și, da, este open-source.

Cum funcționează Tauri

La un nivel înalt, Tauri folosește Node.js pentru a crea o fereastră de randare HTML, CSS și JavaScript ca interfață cu utilizatorul (UI), gestionată și bootstrap de Rust. Produsul este un binar monolitic care poate fi distribuit ca tipuri de fișiere comune pentru Linux (deb/appimage), macOS (app/dmg) și Windows (exe/msi).

Cum sunt realizate aplicațiile Tauri

O aplicație Tauri este creată prin următorii pași:

1. Mai întâi, creați o interfață în cadrul dvs. GUI și pregătiți HTML, CSS și JavaScript pentru consum.
2. CLI-ul Tauri Node.js îl ia și instalează Runnerul Rust în funcție de configurația dvs.
3. În modul de dezvoltare, creează o fereastră WebView, cu depanare și reîncărcare Hot Module .
4. În modul build, acesta instalează bundler-ul și creează o aplicație finală conform setărilor dvs.

Configurarea mediului

Acum că știți ce este Tauri și cum funcționează, permiteți-mi să vă ghidez prin configurarea mașinii dvs. pentru dezvoltare cu Tauri.

Notă : Configurarea de aici este pentru mașinile Linux, dar sunt disponibile și ghiduri pentru macOS și pentru Windows.

Configurare Linux

Natura poliglotă a lui Tauri înseamnă că necesită o serie de dependențe de instrumente. Să începem instalând unele dintre dependențe. Rulați următoarele:

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

Odată ce cele de mai sus au reușit, continuați să instalați Node.js (dacă nu îl aveți deja), deoarece Tauri necesită timpul de execuție. Puteți face acest lucru rulând acest lucru:

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

Aceasta va instala nvm (Managerul de versiuni Node.js), care vă permite să gestionați cu ușurință timpul de execuție a Node.js și să comutați cu ușurință între versiunile Node.js. După ce este instalat, rulați aceasta pentru a vedea o listă cu versiunile Node.js:

 nvm ls-remote

La momentul scrierii, cea mai recentă versiune este 14.1.0. Instalați-l așa:

 nvm install v14.1.0

Odată ce Node.js este complet configurat, va trebui să instalați compilatorul Rust și managerul de pachete Rust: Cargo. Comanda de mai jos le va instala pe ambele:

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

După ce rulați această comandă, asigurați-vă că Cargo și Rust sunt în $PATH rulând următoarele:

 rust --version

Dacă totul a decurs bine, acesta ar trebui să returneze un număr de versiune.

Conform documentației Tauri, asigurați-vă că aveți cea mai recentă versiune rulând următoarea comandă:

 $ rustup update stable

Voila! Ești cu un pas mai aproape de a-ți pregăti mașina 100% pentru Tauri. Tot ce a mai rămas acum este să instalezi lada tauri-bundler . Cel mai bine este să părăsiți CLI-ul și să rulați comanda de mai jos într-o nouă fereastră CLI:

 $ cargo install tauri-bundler --force

Eureka! Dacă totul a mers bine, mașina ta este acum gata pentru Tauri. În continuare, vom începe să integrăm Tauri cu Vue.js. Să ajungem la asta!

Fire

Echipa Tauri recomandă instalarea managerului de pachete Yarn. Deci, să-l instalăm astfel:

 npm install -g yarn

Apoi rulați următoarele:

 yarn --version

Dacă totul a funcționat, ar fi trebuit returnat un număr de versiune.

Integrarea Tauri cu Vue.js

Acum că avem Tauri instalat, haideți să grupăm un proiect web existent. Poți găsi demo-ul live al proiectului pe Netlify. Continuați și bifurcați depozitul, care va servi drept coajă. După ce o bifurcați, asigurați-vă că ați clonat furca rulând acest lucru:

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

După clonarea proiectului, rulați următoarele pentru a instala dependențele:

 yarn

Apoi, rulați asta:

 yarn serve

Aplicația dvs. ar trebui să ruleze pe localhost:8080 . Omorâți serverul care rulează și haideți să instalăm pluginul CLI Vue.js pentru Tauri.

vue-cli-plugin-tauri

Echipa Tauri a creat un plugin Vue.js CLI care se realizează rapid și transformă aplicația ta cu o singură pagină (SPA) Vue.js într-o aplicație desktop mică, multiplatformă, rapidă și sigură. Hai să instalăm acel plugin:

 vue add tauri

După ce pluginul este instalat, ceea ce poate dura ceva timp, vă va cere un titlu pentru fereastră. Doar introduceți nota și apăsați „Enter”.

Să examinăm modificările introduse de pluginul Tauri.

pachet.json

Pluginul Tauri a adăugat două scripturi în secțiunea de scripturi a fișierului nostru package.json . Sunt:

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

Scriptul tauri:serve ar trebui folosit în timpul dezvoltării. Deci hai sa il rulam:

 yarn tauri:serve

Cele de mai sus ar descărca lăzile Rust necesare pentru a porni aplicația noastră. După aceea, va lansa aplicația noastră în modul de dezvoltare , unde va crea o fereastră WebView, cu depanare și reîncărcare Hot Module !

src-tauri

Veți observa, de asemenea, că pluginul a adăugat un director src-tauri la rădăcina directorului aplicației dvs. În interiorul acestui director sunt fișiere și foldere utilizate de Tauri pentru a configura aplicația desktop. Să verificăm conținutul:

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

Singura modificare pe care ar trebui să o facem este în src-tauri/Cargo.toml . Cargo.toml este ca fișierul package.json pentru Rust. Găsiți linia de mai jos în Cargo.toml :

 name = "app"

Schimbați-l în asta:

 name = "nota"

Asta este tot ce trebuie să schimbăm pentru acest exemplu!

Gruparea

Pentru a combina nota pentru platforma dvs. actuală, pur și simplu rulați acest lucru:

 yarn tauri:build

Notă : Ca și în fereastra de dezvoltare, prima dată când rulați aceasta, va dura ceva timp pentru a colecta lăzile Rust și a construi totul. La rulările ulterioare, va trebui doar să reconstruiască ei înșiși lăzile Tauri.

Când cele de mai sus sunt finalizate, ar trebui să aveți un binar de nota pentru sistemul de operare curent. Pentru mine, am un binar .deb creat în directorul src-tauri/target/release/bundle/deb/

Trecerea pe mai multe platforme

Probabil ați observat că comanda yarn tauri:build tocmai a generat un binar pentru sistemul dvs. de operare. Deci, să generăm binarele pentru alte sisteme de operare. Pentru a realiza acest lucru, vom configura un flux de lucru pe GitHub. Utilizăm GitHub aici pentru a servi ca mediu de distribuție pentru aplicația noastră multiplatformă. Deci, utilizatorii dvs. ar putea descărca fișierele binare din fila „Lansare” a proiectului. Fluxul de lucru pe care l-am implementa ne-ar construi automat binarele prin puterea acțiunilor GitHub. Să ajungem la asta.

Crearea fluxului de lucru Tauri

Datorită lui Jacob Bolda, avem un flux de lucru pentru a crea și a lansa automat aplicații multiplatforme cu Tauri pe GitHub. În afară de construirea binarului pentru diferitele platforme (Linux, Mac și Windows), acțiunea ar încărca și binarul pentru tine ca versiune pe GitHub. De asemenea, folosește acțiunea Create a Release făcută de Jacob pentru a realiza acest lucru.

Pentru a utiliza acest flux de lucru, creați un director .github în rădăcina nota-web . În acest director, creați un alt director numit workflows . Apoi, vom crea un fișier de flux de lucru în .github/workflows/ și îl vom numi release-tauri-app.yml .

În release-tauri-app.yml , am adăuga un flux de lucru care creează fișierele binare pentru Linux, macOS și Windows. Acest flux de lucru ar încărca, de asemenea, binarele ca o versiune nefinalizată pe GitHub. Fluxul de lucru ar fi declanșat ori de câte ori am împinge la master.

Deschideți release-tauri-app.yml și adăugați fragmentul de mai jos:

 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

Pentru a testa fluxul de lucru, comite și împingeți modificările în ramura master a furcii. După ce împingeți cu succes în GitHub, puteți apoi să faceți clic pe fila „Acțiuni” din GitHub, apoi să faceți clic pe linkul „Verificați construcția” pentru a vedea progresul fluxului de lucru.

După executarea cu succes a acțiunii, puteți vedea versiunea nefinalizată în „Versiuni” pe pagina de depozit de pe GitHub. Apoi puteți continua să vă publicați lansarea!

Concluzie

Acest articol a introdus un lanț de instrumente poliglot pentru construirea de aplicații native sigure, multiplatforme și mici. Am văzut ce este Tauri și cum să-l încorporăm cu Vue.js. În cele din urmă, am combinat prima noastră aplicație Tauri rulând yarn tauri:build și am folosit, de asemenea, o acțiune GitHub pentru a crea fișiere binare pentru Linux, macOS și Windows.

Spune-mi ce părere ai despre Tauri — aș fi încântat să văd ce construiești cu el. Vă puteți alătura serverului Discord dacă aveți întrebări.

Depozitul pentru acest articol este pe GitHub. De asemenea, vedeți binarele generate de fluxul de lucru GitHub.