Creazione di piccole app desktop con Tauri e Vue.js

Pubblicato: 2022-03-10
Riepilogo rapido ↬ Tauri è una toolchain per la creazione di app desktop piccole, veloci e sicure da HTML, CSS e JavaScript esistenti. In questo articolo, Kelvin spiega come Tauri gioca bene con il framework progressivo Vue.js integrando entrambe le tecnologie nel raggruppamento di un'app Web di esempio chiamata nota come applicazione nativa.

La tecnologia migliora la nostra vita, non solo gli utenti, ma anche i creatori (sviluppatori e designer). In questo articolo ti presenterò Tauri. Questo articolo ti sarà utile se:

  • hai creato applicazioni sul Web con HTML, CSS e JavaScript e desideri utilizzare le stesse tecnologie per creare app destinate a piattaforme Windows, macOS o Linux;
  • stai già realizzando app desktop multipiattaforma con tecnologie come Electron e vuoi provare le alternative;
  • vuoi creare app con tecnologie web per distribuzioni Linux, come PureOS;
  • sei un appassionato di Rust e vorresti applicarlo per creare applicazioni multipiattaforma native.

Vedremo come creare un'applicazione multipiattaforma nativa da un progetto web esistente. Andiamo a farlo!

Nota : questo articolo presuppone che tu abbia dimestichezza con HTML, CSS, JavaScript e Vue.js.

Altro dopo il salto! Continua a leggere sotto ↓

Cos'è Tauri?

Il sito ufficiale riassume bene Tauri:

  • Tauri è una toolchain poliglotta per la creazione di app native più sicure con binari piccoli e veloci. Per "poliglotta", intendo che Tauri utilizza più linguaggi di programmazione. Al momento vengono utilizzati Rust, JavaScript e TypeScript. Ma ci sono piani per farti usare Go, C++, Python e altro.
  • Ti consente di utilizzare qualsiasi framework front-end basato su HTML e JavaScript, come Vue.js, React o Angular, per creare un'app desktop nativa e può essere integrato in qualsiasi pipeline.
  • Ti aiuta a creare e raggruppare i binari per le principali piattaforme desktop (mobile e WebAssembly in arrivo).

Quindi, in pratica, Tauri ti consente di utilizzare le tecnologie web per creare app desktop native minuscole e sicure.

Nella sua pagina GitHub, Tauri è descritto come una toolchain indipendente dal framework per la creazione di app native altamente sicure che hanno binari minuscoli (es. dimensione del file) e che sono molto veloci (es. utilizzo minimo della RAM).

Perché non l'elettrone?

Uno strumento popolare per l'utilizzo delle tecnologie Web per creare applicazioni desktop è Electron.

Tuttavia, le app Electron hanno una dimensione del pacchetto piuttosto grande e tendono a occupare molta memoria durante l'esecuzione. Ecco come Tauri si confronta con Electron:

  • Fascio
    La dimensione di un'app Tauri può essere inferiore a 600 KB.
  • Memoria
    L'ingombro di un'app Tauri è meno della metà delle dimensioni di un'app Electron.
  • Licenza
    La rilicenza è possibile con Tauri, ma non con Electron. Electron viene spedito con Chromium appena uscito dalla scatola. Tuttavia, Chromium include un sistema di gestione dei diritti digitali chiamato Widevine. L'inclusione di Widevine in Chromium rende le app create con Electron disapprovate dagli utenti di piattaforme come PureOS per il solo motivo che non è un software open source gratuito (FLOSS). Piattaforme come PureOS sono verificate dalla Free Software Foundation (FSF). Ciò significa che possono pubblicare solo software gratuito e open source nei loro app store.

In poche parole, se la tua app è realizzata con Electron, non verrà mai spedita ufficialmente nel negozio PureOS. Questa dovrebbe essere una preoccupazione per gli sviluppatori che prendono di mira tali distribuzioni.

Altre caratteristiche di Tauri

  • La sicurezza è davvero importante per il team Tauri. Le app create con Tauri sono pensate per essere sicure fin dall'inizio.
  • Tauri è compatibile con qualsiasi framework front-end, quindi non devi cambiare il tuo stack.
  • Ha molti modelli di progettazione per aiutarti a scegliere funzioni importanti con configurazioni semplici.

Pro di Tauri

  • Tauri ti consente di prendere la base di codice che hai creato per il Web e trasformarla in un'app desktop nativa, senza cambiare nulla.
  • Sebbene tu possa usare Rust in un progetto basato su Tauri, è completamente opzionale. In tal caso, non avresti bisogno di modificare nulla nella base di codice originale destinata al Web.

Tauri del mondo reale

Se fai parte della community Vue.js da un po', allora avrai sentito parlare di Guillaume Chau, un membro del core team di Vue.js. È responsabile dell'interfaccia della riga di comando (CLI) di Vue.js e di altre fantastiche librerie Vue.js. Di recente ha creato guijs, che sta per "interfaccia utente grafica per progetti JavaScript". È un'app desktop nativa basata su Tauri per gestire visivamente i tuoi progetti JavaScript.

Guijs è un esempio di ciò che è possibile fare con Tauri e il fatto che un membro principale del team Vue.js lavori sull'app ci dice che Tauri funziona bene con Vue.js (tra gli altri framework front-end). Se sei interessato, controlla il repository guijs su GitHub. E, sì, è open source.

Come funziona Tauri

Ad alto livello, Tauri usa Node.js per impalcare una finestra di rendering HTML, CSS e JavaScript come interfaccia utente (UI), gestita e avviata da Rust. Il prodotto è un binario monolitico che può essere distribuito come tipi di file comuni per Linux (deb/appimage), macOS (app/dmg) e Windows (exe/msi).

Come sono fatte le app Tauri

Un'app Tauri viene creata tramite i seguenti passaggi:

  1. Innanzitutto, crea un'interfaccia nel tuo framework GUI e prepara HTML, CSS e JavaScript per il consumo.
  2. La CLI Tauri Node.js lo prende e trucca il Rust runner in base alla tua configurazione.
  3. In modalità sviluppo, crea una finestra WebView, con debugging e Hot Module Reloading .
  4. In modalità build, trucca il bundler e crea un'applicazione finale in base alle tue impostazioni.

Configurare il tuo ambiente

Ora che sai cos'è Tauri e come funziona, lascia che ti guidi attraverso l'impostazione della tua macchina per lo sviluppo con Tauri.

Nota : la configurazione qui è per macchine Linux, ma sono disponibili anche guide per macOS e per Windows.

Installazione Linux

La natura poliglotta di Tauri significa che richiede una serie di dipendenze da strumenti. Iniziamo installando alcune delle dipendenze. Esegui quanto segue:

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

Una volta che quanto sopra ha avuto successo, procedi con l'installazione di Node.js (se non lo hai già), perché Tauri richiede il suo runtime. Puoi farlo eseguendo questo:

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

Questo installerà nvm (Node.js version manager), che ti consente di gestire facilmente il runtime di Node.js e di passare facilmente da una versione all'altra di Node.js. Dopo averlo installato, eseguilo per vedere un elenco di versioni di Node.js:

 nvm ls-remote

Al momento in cui scrivo, la versione più recente è la 14.1.0. Installalo in questo modo:

 nvm install v14.1.0

Una volta che Node.js è completamente configurato, è necessario installare il compilatore Rust e il gestore di pacchetti Rust: Cargo. Il comando seguente installerebbe entrambi:

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

Dopo aver eseguito questo comando, assicurati che Cargo e Rust siano nel tuo $PATH eseguendo quanto segue:

 rust --version

Se tutto è andato bene, questo dovrebbe restituire un numero di versione.

Secondo la documentazione di Tauri, assicurati di avere l'ultima versione eseguendo il comando seguente:

 $ rustup update stable

Ecco! Sei un passo avanti per preparare la tua macchina al 100% per Tauri. Non resta che installare la cassa tauri-bundler . È meglio uscire dalla CLI ed eseguire il comando seguente in una nuova finestra della CLI:

 $ cargo install tauri-bundler --force

Eureka! Se tutto è andato bene, la tua macchina è ora pronta per Tauri. Successivamente, inizieremo a integrare Tauri con Vue.js. Andiamo a farlo!

Filato

Il team Tauri consiglia di installare il gestore di pacchetti Yarn. Quindi installiamolo in questo modo:

 npm install -g yarn

Quindi eseguire quanto segue:

 yarn --version

Se tutto ha funzionato, dovrebbe essere stato restituito un numero di versione.

Integrazione di Tauri con Vue.js

Ora che abbiamo installato Tauri, aggiungiamo un progetto web esistente. Puoi trovare la demo live del progetto su Netlify. Vai avanti e biforca il repository, che fungerà da shell. Dopo averlo biforcato, assicurati di clonare il fork eseguendo questo:

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

Dopo aver clonato il progetto, eseguire quanto segue per installare le dipendenze:

 yarn

Quindi, esegui questo:

 yarn serve

L'applicazione dovrebbe essere in esecuzione su localhost:8080 . Uccidi il server in esecuzione e installiamo il plug-in CLI Vue.js per Tauri.

vue-cli-plugin-tauri

Il team Tauri ha creato un plug-in CLI Vue.js che trucca e trasforma rapidamente la tua applicazione a pagina singola (SPA) Vue.js in una piccola app desktop multipiattaforma veloce e sicura. Installiamo quel plugin:

 vue add tauri

Dopo aver installato il plug-in, che potrebbe richiedere del tempo, ti verrà chiesto il titolo della finestra. Basta digitare nota e premere "Invio".

Esaminiamo le modifiche introdotte dal plugin Tauri.

pacchetto.json

Il plugin Tauri ha aggiunto due script nella sezione script del nostro file package.json . Loro sono:

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

Lo script tauri:serve dovrebbe essere utilizzato durante lo sviluppo. Quindi eseguiamolo:

 yarn tauri:serve

Quanto sopra scaricherà le casse Rust necessarie per avviare la nostra app. Successivamente, avvierà la nostra app in modalità sviluppo , dove creerà una finestra WebView, con debugging e Hot Module Reloading !

src-tauri

Noterai anche che il plugin ha aggiunto una directory src-tauri alla radice della directory dell'app. All'interno di questa directory ci sono file e cartelle utilizzati da Tauri per configurare la tua app desktop. Diamo un'occhiata ai contenuti:

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

L'unica modifica che dovremmo apportare è in src-tauri/Cargo.toml . Cargo.toml è come il file package.json per Rust. Trova la riga qui sotto in Cargo.toml :

 name = "app"

Cambialo in questo:

 name = "nota"

Questo è tutto ciò che dobbiamo cambiare per questo esempio!

Raggruppamento

Per raggruppare nota per la tua piattaforma attuale, esegui semplicemente questo:

 yarn tauri:build

Nota : come per la finestra di sviluppo, la prima volta che lo esegui, ci vorrà del tempo per raccogliere le casse di Rust e costruire tutto. Nelle esecuzioni successive, dovrà solo ricostruire le casse Tauri stesse.

Al termine di quanto sopra, dovresti avere un binario di nota per il tuo attuale sistema operativo. Per me, ho un binario .deb creato nella directory src-tauri/target/release/bundle/deb/

Andare multipiattaforma

Probabilmente hai notato che il comando yarn tauri:build appena generato un binario per il tuo sistema operativo. Quindi, generiamo i binari per altri sistemi operativi. Per raggiungere questo obiettivo, imposteremo un flusso di lavoro su GitHub. Stiamo usando GitHub qui per fungere da mezzo di distribuzione per la nostra app multipiattaforma. Quindi, i tuoi utenti potrebbero semplicemente scaricare i binari nella scheda "Rilascio" del progetto. Il flusso di lavoro che implementeremmo creerebbe automaticamente i nostri binari per noi tramite la potenza delle azioni GitHub. Andiamo a questo.

Creazione del flusso di lavoro Tauri

Grazie a Jacob Bolda, abbiamo un flusso di lavoro per creare e rilasciare automaticamente app multipiattaforma con Tauri su GitHub. Oltre a creare il binario per le varie piattaforme (Linux, Mac e Windows), l'azione caricherebbe anche il binario per te come versione su GitHub. Utilizza anche l'azione Crea un rilascio fatta da Jacob per raggiungere questo obiettivo.

Per utilizzare questo flusso di lavoro, crea una directory .github nella radice di nota-web . In questa directory, crea un'altra directory denominata workflows . Creeremo quindi un file di flusso di lavoro in .github/workflows/ e lo chiameremo release-tauri-app.yml .

In release-tauri-app.yml aggiungeremo un flusso di lavoro che compila i binari per Linux, macOS e Windows. Questo flusso di lavoro caricherebbe anche i file binari come bozza di versione su GitHub. Il flusso di lavoro verrebbe attivato ogni volta che si passa al master.

Apri release-tauri-app.yml e aggiungi lo snippet di seguito:

 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

Per testare il flusso di lavoro, esegui il commit e invia le modifiche al ramo master del tuo fork. Dopo aver eseguito correttamente il push su GitHub, puoi quindi fare clic sulla scheda "Azioni" in GitHub, quindi fare clic sul collegamento "Verifica build" per vedere l'avanzamento del flusso di lavoro.

Dopo aver eseguito correttamente l'azione, puoi vedere la bozza di rilascio in "Rilasci" nella pagina del repository su GitHub. Puoi quindi continuare a pubblicare la tua versione!

Conclusione

Questo articolo ha introdotto una toolchain poliglotta per la creazione di applicazioni native sicure, multipiattaforma e minuscole. Abbiamo visto cos'è Tauri e come incorporarlo con Vue.js. Infine, abbiamo raggruppato la nostra prima app Tauri eseguendo yarn tauri:build e abbiamo anche utilizzato un'azione GitHub per creare binari per Linux, macOS e Windows.

Fammi sapere cosa ne pensi di Tauri: sarei entusiasta di vedere cosa costruisci con esso. Puoi unirti al server Discord se hai domande.

Il repository per questo articolo è su GitHub. Inoltre, consulta i file binari generati dal flusso di lavoro GitHub.