Membuat Aplikasi Desktop Kecil Dengan Tauri Dan Vue.js

Teknologi membuat hidup kita lebih baik, bukan hanya pengguna, tetapi juga pencipta (pengembang dan desainer). Pada artikel ini, saya akan memperkenalkan Anda kepada Tauri. Artikel ini akan bermanfaat bagi Anda jika:

• Anda telah membuat aplikasi di web dengan HTML, CSS, dan JavaScript, dan Anda ingin menggunakan teknologi yang sama untuk membuat aplikasi yang ditargetkan pada platform Windows, macOS, atau Linux;
• Anda sudah membangun aplikasi desktop lintas platform dengan teknologi seperti Electron, dan Anda ingin melihat alternatif;
• Anda ingin membangun aplikasi dengan teknologi web untuk distribusi Linux, seperti PureOS;
• Anda adalah penggemar Rust, dan Anda ingin menerapkannya untuk membangun aplikasi lintas platform asli.

Kami akan melihat bagaimana membangun aplikasi lintas platform asli dari proyek web yang ada. Mari kita lakukan!

Catatan : Artikel ini mengasumsikan Anda nyaman dengan HTML, CSS, JavaScript, dan Vue.js.

Apa itu Tauri?

Situs web resmi merangkum Tauri dengan baik:

• Tauri adalah toolchain polyglot untuk membangun aplikasi asli yang lebih aman dengan biner kecil dan cepat. Dengan “polyglot”, maksud saya Tauri menggunakan banyak bahasa pemrograman. Saat ini, Rust, JavaScript, dan TypeScript digunakan. Tetapi ada rencana untuk membiarkan Anda menggunakan Go, C++, Python, dan banyak lagi.
• Ini memungkinkan Anda menggunakan kerangka kerja front-end berbasis HTML dan JavaScript, seperti Vue.js, React, atau Angular, untuk membangun aplikasi desktop asli, dan itu dapat diintegrasikan ke dalam saluran apa pun.
• Ini membantu Anda membangun dan menggabungkan biner untuk platform desktop utama (seluler dan WebAssembly segera hadir).

Jadi, pada dasarnya, Tauri memungkinkan Anda menggunakan teknologi web untuk membuat aplikasi desktop asli yang kecil dan aman.

Pada halaman GitHub-nya, Tauri digambarkan sebagai kerangka kerja-agnostik toolchain untuk membangun aplikasi asli yang sangat aman yang memiliki binari kecil (yaitu ukuran file) dan yang sangat cepat (yaitu penggunaan RAM minimal).

Mengapa Bukan Elektron?

Alat populer untuk menggunakan teknologi web untuk membangun aplikasi desktop adalah Electron.

Namun, aplikasi Electron memiliki ukuran bundel yang agak besar, dan cenderung memakan banyak memori saat dijalankan. Inilah bagaimana Tauri dibandingkan dengan Elektron:

• Bundel
  Ukuran aplikasi Tauri bisa kurang dari 600 KB.
• Penyimpanan
  Jejak aplikasi Tauri kurang dari setengah ukuran aplikasi Electron.
• Lisensi
  Lisensi ulang dimungkinkan dengan Tauri, tetapi tidak dengan Electron. Elektron dikirimkan dengan Chromium langsung dari kotak. Namun, Chromium menyertakan sistem manajemen hak digital bernama Widevine. Dimasukkannya Widevine di Chromium membuat aplikasi yang dibuat dengan Electron disukai oleh pengguna platform seperti PureOS karena satu-satunya alasan bahwa itu bukan perangkat lunak sumber terbuka gratis/gratis (FLOSS). Platform seperti PureOS diverifikasi oleh Free Software Foundation (FSF). Ini berarti bahwa mereka hanya dapat mempublikasikan perangkat lunak bebas dan sumber terbuka di toko aplikasi mereka.

Singkatnya, jika aplikasi Anda dibuat dengan Electron, itu tidak akan pernah dikirimkan secara resmi di toko PureOS. Ini harus menjadi perhatian bagi pengembang yang menargetkan distribusi semacam itu.

Lebih Banyak Fitur Tauri

• Keamanan sangat penting bagi tim Tauri. Aplikasi yang dibuat dengan Tauri dimaksudkan agar aman sejak awal.
• Tauri kompatibel dengan kerangka kerja front-end apa pun, jadi Anda tidak perlu mengubah tumpukan Anda.
• Ini memiliki banyak pola desain untuk membantu Anda memilih fitur penting dengan konfigurasi sederhana.

Kelebihan Tauri

• Tauri memungkinkan Anda untuk mengambil basis kode yang telah Anda buat untuk web dan mengubahnya menjadi aplikasi desktop asli, tanpa mengubah apa pun.
• Meskipun Anda dapat menggunakan Rust dalam proyek berbasis Tauri, ini sepenuhnya opsional. Jika ya, Anda tidak perlu mengubah apa pun di basis kode asli yang ditargetkan untuk web.

Tauri . Dunia Nyata

Jika Anda telah menjadi bagian dari komunitas Vue.js untuk sementara waktu, Anda pasti pernah mendengar tentang Guillaume Chau, anggota tim inti Vue.js. Dia bertanggung jawab atas antarmuka baris perintah (CLI) Vue.js, serta pustaka Vue.js mengagumkan lainnya. Dia baru-baru ini membuat guijs, yang merupakan singkatan dari "antarmuka pengguna grafis untuk proyek JavaScript". Ini adalah aplikasi desktop asli yang didukung Tauri untuk mengelola proyek JavaScript Anda secara visual.

Guijs adalah contoh dari apa yang mungkin dengan Tauri, dan fakta bahwa anggota inti dari tim Vue.js bekerja di aplikasi memberi tahu kita bahwa Tauri bermain bagus dengan Vue.js (di antara kerangka kerja front-end lainnya). Lihat repositori guijs di GitHub jika Anda tertarik. Dan, ya, ini adalah sumber terbuka.

Bagaimana Tauri Bekerja

Pada tingkat tinggi, Tauri menggunakan Node.js untuk membuat perancah jendela rendering HTML, CSS, dan JavaScript sebagai antarmuka pengguna (UI), dikelola dan di-boot oleh Rust. Produk adalah biner monolitik yang dapat didistribusikan sebagai jenis file umum untuk Linux (deb/appimage), macOS (app/dmg), dan Windows (exe/msi).

Bagaimana Aplikasi Tauri Dibuat

Aplikasi Tauri dibuat melalui langkah-langkah berikut:

1. Pertama, buat antarmuka dalam kerangka GUI Anda, dan siapkan HTML, CSS, dan JavaScript untuk konsumsi.
2. Tauri Node.js CLI mengambilnya dan memasang runner Rust sesuai dengan konfigurasi Anda.
3. Dalam mode pengembangan, ini membuat jendela WebView, dengan debugging dan Hot Module Reloading .
4. Dalam mode build, ia memasang bundler dan membuat aplikasi akhir sesuai dengan pengaturan Anda.

Menyiapkan Lingkungan Anda

Sekarang setelah Anda mengetahui apa itu Tauri dan cara kerjanya, izinkan saya memandu Anda menyiapkan mesin Anda untuk pengembangan dengan Tauri.

Catatan : Pengaturan di sini adalah untuk mesin Linux, tetapi panduan untuk macOS dan Windows juga tersedia.

Pengaturan Linux

Sifat poliglot Tauri berarti membutuhkan sejumlah dependensi alat. Mari kita mulai dengan menginstal beberapa dependensi. Jalankan yang berikut ini:

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

Setelah di atas berhasil, lanjutkan untuk menginstal Node.js (jika Anda belum memilikinya), karena Tauri membutuhkan runtime-nya. Anda dapat melakukannya dengan menjalankan ini:

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

Ini akan menginstal nvm (pengelola versi Node.js), yang memungkinkan Anda mengelola runtime Node.js dengan mudah dan dengan mudah beralih di antara versi Node.js. Setelah terinstal, jalankan ini untuk melihat daftar versi Node.js:

 nvm ls-remote

Pada saat penulisan, versi terbaru adalah 14.1.0. Instal seperti ini:

 nvm install v14.1.0

Setelah Node.js sepenuhnya diatur, Anda perlu menginstal kompiler Rust dan manajer paket Rust: Cargo. Perintah di bawah ini akan menginstal keduanya:

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

Setelah menjalankan perintah ini, pastikan Cargo dan Rust ada di $PATH Anda dengan menjalankan perintah berikut:

 rust --version

Jika semuanya berjalan dengan baik, ini akan mengembalikan nomor versi.

Menurut dokumentasi Tauri, pastikan Anda menggunakan versi terbaru dengan menjalankan perintah berikut:

 $ rustup update stable

Voila! Anda selangkah lebih dekat untuk menyiapkan mesin Anda 100% untuk Tauri. Yang tersisa sekarang adalah memasang peti tauri-bundler . Yang terbaik adalah keluar dari CLI Anda, dan jalankan perintah di bawah ini di jendela CLI baru:

 $ cargo install tauri-bundler --force

Eureka! Jika semuanya berjalan dengan baik, mesin Anda sekarang siap untuk Tauri. Selanjutnya, kita akan mulai mengintegrasikan Tauri dengan Vue.js. Mari kita lakukan!

Benang

Tim Tauri merekomendasikan untuk menginstal manajer paket Benang. Jadi mari kita instal dengan cara ini:

 npm install -g yarn

Kemudian jalankan yang berikut ini:

 yarn --version

Jika semuanya bekerja, nomor versi seharusnya dikembalikan.

Mengintegrasikan Tauri Dengan Vue.js

Sekarang kita telah menginstal Tauri, mari kita gabungkan proyek web yang ada. Anda dapat menemukan demo langsung proyek tersebut di Netlify. Silakan dan garpu repositori, yang akan berfungsi sebagai shell. Setelah melakukan fork, pastikan untuk mengkloning fork dengan menjalankan ini:

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

Setelah mengkloning proyek, jalankan yang berikut ini untuk menginstal dependensi:

 yarn

Kemudian, jalankan ini:

 yarn serve

Aplikasi Anda harus berjalan di localhost:8080 . Matikan server yang sedang berjalan, dan mari kita instal plugin Vue.js CLI untuk Tauri.

vue-cli-plugin-tauri

Tim Tauri membuat plugin Vue.js CLI yang dengan cepat mengatur dan mengubah aplikasi satu halaman (SPA) Vue.js Anda menjadi aplikasi desktop lintas platform kecil yang cepat dan aman. Mari kita instal plugin itu:

 vue add tauri

Setelah plugin diinstal, yang mungkin memakan waktu cukup lama, plugin akan menanyakan judul jendela kepada Anda. Cukup ketik nota dan tekan "Enter".

Mari kita periksa perubahan yang diperkenalkan oleh plugin Tauri.

package.json

Plugin Tauri menambahkan dua skrip di bagian skrip dari file package.json kami. Mereka:

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

Skrip tauri:serve harus digunakan selama pengembangan. Jadi mari kita jalankan:

 yarn tauri:serve

Di atas akan mengunduh peti Rust yang diperlukan untuk memulai aplikasi kami. Setelah itu, itu akan meluncurkan aplikasi kami dalam mode pengembangan , di mana ia akan membuat jendela WebView, dengan debugging dan Hot Module Reload !

src-tauri

Anda juga akan melihat bahwa plugin menambahkan direktori src-tauri ke root direktori aplikasi Anda. Di dalam direktori ini terdapat file dan folder yang digunakan oleh Tauri untuk mengonfigurasi aplikasi desktop Anda. Yuk cek isinya:

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

Satu-satunya perubahan yang perlu kita lakukan adalah di src-tauri/Cargo.toml . Cargo.toml seperti file package.json untuk Rust. Temukan baris di bawah ini di Cargo.toml :

 name = "app"

Ubah menjadi ini:

 name = "nota"

Itu saja yang perlu kita ubah untuk contoh ini!

bundel

Untuk menggabungkan nota untuk platform Anda saat ini, cukup jalankan ini:

 yarn tauri:build

Catatan : Seperti halnya jendela pengembangan, pertama kali Anda menjalankan ini, akan memakan waktu lama untuk mengumpulkan peti Rust dan membangun semuanya. Pada putaran berikutnya, itu hanya perlu membangun kembali peti Tauri sendiri.

Ketika hal di atas selesai, Anda harus memiliki biner nota untuk OS Anda saat ini. Bagi saya, saya memiliki biner .deb yang dibuat di direktori src-tauri/target/release/bundle/deb/

Pergi Lintas-Platform

Anda mungkin memperhatikan bahwa perintah yarn tauri:build baru saja menghasilkan biner untuk sistem operasi Anda. Jadi, mari buat binari untuk sistem operasi lain. Untuk mencapai ini, kami akan menyiapkan alur kerja di GitHub. Kami menggunakan GitHub di sini sebagai media distribusi untuk aplikasi lintas platform kami. Jadi, pengguna Anda cukup mengunduh binari di tab "Rilis" proyek. Alur kerja yang akan kami terapkan akan secara otomatis membangun binari kami untuk kami melalui kekuatan tindakan GitHub. Mari kita lakukan.

Membuat Alur Kerja Tauri

Berkat Jacob Bolda, kami memiliki alur kerja untuk secara otomatis membuat dan merilis aplikasi lintas platform dengan Tauri di GitHub. Selain membangun biner untuk berbagai platform (Linux, Mac, dan Windows), tindakan ini juga akan mengunggah biner untuk Anda sebagai rilis di GitHub. Itu juga menggunakan tindakan Buat Rilis yang dibuat oleh Jacob untuk mencapai ini.

Untuk menggunakan alur kerja ini, buat direktori .github di root nota-web . Di direktori ini, buat direktori lain bernama workflows . Kami kemudian akan membuat file alur kerja di .github/workflows/ , dan beri nama release-tauri-app.yml .

Di release-tauri-app.yml , kami akan menambahkan alur kerja yang membangun binari untuk Linux, macOS, dan Windows. Alur kerja ini juga akan mengunggah binari sebagai rilis draf di GitHub. Alur kerja akan dipicu setiap kali kita mendorong ke master.

Buka release-tauri-app.yml , dan tambahkan cuplikan di bawah ini:

 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

Untuk menguji alur kerja, komit dan dorong perubahan Anda ke cabang master fork Anda. Setelah berhasil mendorong ke GitHub, Anda kemudian dapat mengklik tab "Tindakan" di GitHub, lalu klik tautan "Periksa build" untuk melihat kemajuan alur kerja.

Setelah eksekusi tindakan berhasil, Anda dapat melihat rilis draf di "Rilis" pada halaman repositori di GitHub. Anda kemudian dapat melanjutkan untuk mempublikasikan rilis Anda!

Kesimpulan

Artikel ini telah memperkenalkan toolchain polyglot untuk membangun aplikasi asli yang aman, lintas platform, dan kecil. Kami telah melihat apa itu Tauri dan bagaimana menggabungkannya dengan Vue.js. Terakhir, kami menggabungkan aplikasi Tauri pertama kami dengan menjalankan yarn tauri:build , dan kami juga menggunakan tindakan GitHub untuk membuat binari untuk Linux, macOS, dan Windows.

Beri tahu saya pendapat Anda tentang Tauri — saya akan senang melihat apa yang Anda bangun dengannya. Anda dapat bergabung dengan server Discord jika Anda memiliki pertanyaan.

Repositori untuk artikel ini ada di GitHub. Juga, lihat binari yang dihasilkan oleh alur kerja GitHub.