Tauri ve Vue.js ile Minik Masaüstü Uygulamaları Oluşturma

Teknoloji, sadece kullanıcıları değil, yaratıcıları da (geliştiriciler ve tasarımcılar) hayatımızı daha iyi hale getiriyor. Bu yazımda sizi Tauri ile tanıştıracağım. Bu makale aşağıdaki durumlarda sizin için yararlı olacaktır:

• Web üzerinde HTML, CSS ve JavaScript ile uygulamalar oluşturuyorsunuz ve Windows, macOS veya Linux platformlarını hedefleyen uygulamalar oluşturmak için aynı teknolojileri kullanmak istiyorsunuz;
• Electron gibi teknolojilerle halihazırda platformlar arası masaüstü uygulamaları geliştiriyorsunuz ve alternatifleri kontrol etmek istiyorsunuz;
• PureOS gibi Linux dağıtımları için web teknolojileriyle uygulamalar oluşturmak istiyorsanız;
• Rust meraklısısınız ve bunu yerel platformlar arası uygulamalar oluşturmak için kullanmak istiyorsunuz.

Mevcut bir web projesinden yerel bir çapraz platform uygulamasının nasıl oluşturulacağına bakacağız. Hadi hadi bakalım!

Not : Bu makale, HTML, CSS, JavaScript ve Vue.js konusunda rahat olduğunuz varsayılmaktadır.

Tauri Nedir?

Resmi web sitesi Tauri'yi iyi özetliyor:

• Tauri, hem küçük hem de hızlı ikili dosyalarla daha güvenli yerel uygulamalar oluşturmaya yönelik çok dilli bir araç zinciridir. "Çok dilli" derken, Tauri'nin birden fazla programlama dili kullandığını kastediyorum. Şu anda Rust, JavaScript ve TypeScript kullanılmaktadır. Ancak Go, C++, Python ve daha fazlasını kullanmanıza izin veren planlar var.
• Yerel bir masaüstü uygulaması oluşturmak için Vue.js, React veya Angular gibi herhangi bir HTML ve JavaScript tabanlı ön uç çerçevesini kullanmanıza olanak tanır ve herhangi bir ardışık düzene entegre edilebilir.
• Büyük masaüstü platformları (mobil ve WebAssembly yakında) için ikili dosyalar oluşturmanıza ve bir araya getirmenize yardımcı olur.

Bu nedenle, temel olarak Tauri, küçük ve güvenli yerel masaüstü uygulamaları oluşturmak için web teknolojilerini kullanmanıza olanak tanır.

GitHub sayfasında Tauri, küçük ikili dosyalara (yani dosya boyutuna) sahip ve çok hızlı (yani minimum RAM kullanımı) yüksek düzeyde güvenli yerel uygulamalar oluşturmak için çerçeveden bağımsız bir araç zinciri olarak tanımlanır.

Neden Elektron Değil?

Masaüstü uygulamaları oluşturmak için web teknolojilerini kullanmak için popüler bir araç Electron'dur.

Bununla birlikte, Electron uygulamaları oldukça büyük bir paket boyutuna sahiptir ve çalışırken çok fazla bellek kullanma eğilimindedir. Tauri'nin Electron ile karşılaştırması şu şekildedir:

• paket
  Bir Tauri uygulamasının boyutu 600 KB'den az olabilir.
• Hafıza
  Bir Tauri uygulamasının kapladığı alan, bir Electron uygulamasının boyutunun yarısından daha azdır.
• Lisans
  Tauri ile yeniden lisanslama mümkündür, ancak Electron ile mümkün değildir. Electron, kutudan çıktığı anda Chromium ile birlikte gelir. Ancak Chromium, Widevine adlı bir dijital hak yönetimi sistemi içerir. Widevine'in Chromium'a dahil edilmesi, Electron ile oluşturulan uygulamaları, PureOS gibi platformların kullanıcıları tarafından yalnızca ücretsiz/özgür açık kaynaklı yazılım (FLOSS) olmaması nedeniyle hoş karşılanmaz hale getirir. PureOS gibi platformlar, Özgür Yazılım Vakfı (FSF) tarafından doğrulanır. Bu, uygulama mağazalarında yalnızca ücretsiz ve açık kaynaklı yazılım yayınlayabilecekleri anlamına gelir.

Özetle, uygulamanız Electron ile oluşturulmuşsa, PureOS mağazasında asla resmi olarak gönderilmez. Bu, bu tür dağıtımları hedefleyen geliştiriciler için bir endişe kaynağı olmalıdır.

Tauri'nin Diğer Özellikleri

• Güvenlik, Tauri ekibi için gerçekten önemlidir. Tauri ile oluşturulan uygulamaların en başından itibaren güvenli olması amaçlanmıştır.
• Tauri, herhangi bir ön uç çerçeve ile uyumludur, bu nedenle yığınınızı değiştirmeniz gerekmez.
• Basit konfigürasyonlarla önemli özellikleri seçmenize yardımcı olacak birçok tasarım modeline sahiptir.

Tauri'nin Artıları

• Tauri, web için oluşturduğunuz kod tabanını hiçbir şeyi değiştirmeden yerel bir masaüstü uygulamasına dönüştürmenize olanak tanır.
• Rust'u Tauri tabanlı bir projede kullanabilmenize rağmen, tamamen isteğe bağlıdır. Bunu yapsaydınız, web için hedeflenen orijinal kod tabanınızdaki hiçbir şeyi değiştirmenize gerek kalmazdı.

Gerçek Dünya Boğa

Bir süredir Vue.js topluluğunun bir parçasıysanız, Vue.js'nin çekirdek ekibinin bir üyesi olan Guillaume Chau'yu duymuşsunuzdur. Vue.js komut satırı arabiriminden (CLI) ve diğer harika Vue.js kitaplıklarından sorumludur. Kısa süre önce “JavaScript projeleri için grafiksel kullanıcı arayüzü” anlamına gelen guij'leri yarattı. JavaScript projelerinizi görsel olarak yönetmek için Tauri destekli bir yerel masaüstü uygulamasıdır.

Guijs, Tauri ile neler yapılabileceğinin bir örneğidir ve Vue.js ekibinin çekirdek bir üyesinin uygulama üzerinde çalışması, Tauri'nin Vue.js ile (diğer ön uç çerçeveler arasında) iyi oynadığını söyler. İlgileniyorsanız GitHub'daki guijs deposuna göz atın. Ve evet, açık kaynaklıdır.

Tauri Nasıl Çalışır?

Tauri, Rust tarafından yönetilen ve önyüklenen bir kullanıcı arabirimi (UI) olarak bir HTML, CSS ve JavaScript oluşturma penceresini iskele etmek için yüksek düzeyde Node.js kullanır. Ürün, Linux (deb/appimage), macOS (app/dmg) ve Windows (exe/msi) için ortak dosya türleri olarak dağıtılabilen monolitik bir ikili dosyadır.

Tauri Uygulamaları Nasıl Yapılır?

Aşağıdaki adımlarla bir Tauri uygulaması oluşturulur:

1. İlk olarak, GUI çerçevenizde bir arayüz oluşturun ve HTML, CSS ve JavaScript'i tüketim için hazırlayın.
2. Tauri Node.js CLI onu alır ve Rust runner'ı konfigürasyonunuza göre donatır.
3. Geliştirme modunda, hata ayıklama ve Hot Module Reloading ile bir WebView penceresi oluşturur.
4. Derleme modunda, paketleyiciyi donatır ve ayarlarınıza göre son bir uygulama oluşturur.

Ortamınızı Ayarlama

Artık Tauri'nin ne olduğunu ve nasıl çalıştığını bildiğinize göre, makinenizi Tauri ile geliştirme için ayarlama konusunda size yol göstermeme izin verin.

Not : Buradaki kurulum Linux makineleri içindir, ancak macOS ve Windows için kılavuzlar da mevcuttur.

Linux Kurulumu

Tauri'nin çok dilli doğası, bir dizi alet bağımlılığı gerektirdiği anlamına gelir. Bazı bağımlılıkları yükleyerek başlayalım. Aşağıdakileri çalıştırın:

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

Yukarıdakiler başarılı olduğunda, Node.js'yi yüklemeye devam edin (zaten yoksa), çünkü Tauri çalışma zamanını gerektirir. Bunu çalıştırarak yapabilirsiniz:

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

Bu, Node.js çalışma zamanını kolayca yönetmenize ve Node.js sürümleri arasında kolayca geçiş yapmanıza olanak tanıyan nvm'yi (Node.js sürüm yöneticisi) yükleyecektir. Yüklendikten sonra, Node.js sürümlerinin listesini görmek için bunu çalıştırın:

 nvm ls-remote

Yazma sırasında, en son sürüm 14.1.0'dır. Şu şekilde kurun:

 nvm install v14.1.0

Node.js tamamen kurulduğunda, Rust derleyicisini ve Rust paket yöneticisini yüklemeniz gerekir: Kargo. Aşağıdaki komut her ikisini de yükler:

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

Bu komutu çalıştırdıktan sonra, aşağıdakileri çalıştırarak Cargo ve Rust'ın $PATH içinde olduğundan emin olun:

 rust --version

Her şey yolunda gittiyse, bu bir sürüm numarası döndürmelidir.

Tauri belgelerine göre, aşağıdaki komutu çalıştırarak en son sürümde olduğunuzdan emin olun:

 $ rustup update stable

işte! Makinenizi Tauri'ye %100 hazır hale getirmeye bir adım daha yaklaştınız. Şimdi geriye kalan tek şey tauri-bundler kurmak. CLI'nizden çıkmak ve aşağıdaki komutu yeni bir CLI penceresinde çalıştırmak en iyisidir:

 $ cargo install tauri-bundler --force

Evreka! Her şey yolunda gittiyse, makineniz artık Tauri için hazırdır. Sırada, Tauri'yi Vue.js ile entegre etmeye başlayacağız. Hadi hadi bakalım!

İplik

Tauri ekibi, Yarn paket yöneticisinin yüklenmesini önerir. O halde şu şekilde yükleyelim:

 npm install -g yarn

Ardından aşağıdakileri çalıştırın:

 yarn --version

Her şey işe yaradıysa, bir sürüm numarası döndürülmeliydi.

Tauri'yi Vue.js ile Entegre Etme

Artık Tauri'yi yüklediğimize göre, mevcut bir web projesini gruplayalım. Projenin canlı demosunu Netlify'da bulabilirsiniz. Devam edin ve bir kabuk görevi görecek olan depoyu çatallayın. Çatalladıktan sonra, şunu çalıştırarak çatalı klonladığınızdan emin olun:

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

Projeyi klonladıktan sonra, bağımlılıkları kurmak için aşağıdakileri çalıştırın:

 yarn

Ardından, şunu çalıştırın:

 yarn serve

Uygulamanız localhost:8080 üzerinde çalışıyor olmalıdır. Çalışan sunucuyu öldürün ve Tauri için Vue.js CLI eklentisini yükleyelim.

vue-cli-eklenti-tauri

Tauri ekibi, Vue.js tek sayfalık uygulamanızı (SPA) hızla donatan ve hem hızlı hem de güvenli olan küçük bir çapraz platform masaüstü uygulamasına dönüştüren bir Vue.js CLI eklentisi oluşturdu. Şu eklentiyi yükleyelim:

 vue add tauri

Eklenti yüklendikten sonra, ki bu biraz zaman alabilir, sizden bir pencere başlığı isteyecektir. Sadece nota yazın ve "Enter" tuşuna basın.

Tauri eklentisinin getirdiği değişiklikleri inceleyelim.

paket.json

Tauri eklentisi, package.json dosyamızın komut dosyaları bölümüne iki komut dosyası ekledi. Onlar:

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

Geliştirme sırasında tauri:serve betiği kullanılmalıdır. Öyleyse çalıştıralım:

 yarn tauri:serve

Yukarıdakiler, uygulamamızı başlatmak için gereken Pas kasalarını indirir. Bundan sonra, hata ayıklama ve Sıcak Modül Yeniden Yükleme ile bir WebView penceresi oluşturacağı geliştirme modunda uygulamamızı başlatacak!

src-tauri

Eklentinin, uygulama dizininizin kök dizinine bir src-tauri dizini eklediğini de fark edeceksiniz. Bu dizinin içinde, masaüstü uygulamanızı yapılandırmak için Tauri tarafından kullanılan dosyalar ve klasörler bulunur. İçindekilere bir göz atalım:

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

Yapmamız gereken tek değişiklik src-tauri/Cargo.toml . Cargo.toml , Rust için package.json dosyası gibidir. Cargo.toml aşağıdaki satırı bulun:

 name = "app"

Bunu şu şekilde değiştirin:

 name = "nota"

Bu örnek için değiştirmemiz gereken tek şey bu!

paketleme

Mevcut platformunuz için nota paketlemek için şunu çalıştırın:

 yarn tauri:build

Not : Geliştirme penceresinde olduğu gibi, bunu ilk çalıştırdığınızda, Rust kasalarını toplamak ve her şeyi inşa etmek biraz zaman alacaktır. Sonraki çalışmalarda, yalnızca Tauri kasalarını yeniden inşa etmesi gerekecek.

Yukarıdakiler tamamlandığında, mevcut işletim sisteminiz için bir ikili nota sahip olmalısınız. Benim için, src-tauri/target/release/bundle/deb/ dizininde oluşturulmuş bir .deb ikili dosyasına sahibim.*

Çapraz Platforma Geçmek

Muhtemelen yarn tauri:build komutunun işletim sisteminiz için bir ikili oluşturduğunu fark etmişsinizdir. Öyleyse, diğer işletim sistemleri için ikili dosyaları oluşturalım. Bunu başarmak için GitHub üzerinde bir iş akışı kuracağız. Burada, platformlar arası uygulamamız için bir dağıtım aracı olarak hizmet vermek üzere GitHub'ı kullanıyoruz. Böylece, kullanıcılarınız projenin “Sürüm” sekmesindeki ikili dosyaları indirebilir. Uygulayacağımız iş akışı, GitHub eylemlerinin gücü aracılığıyla bizim için ikili dosyalarımızı otomatik olarak oluşturur. Hadi hadi bakalım.

Tauri İş Akışını Oluşturma

Jacob Bolda sayesinde, GitHub'da Tauri ile platformlar arası uygulamaları otomatik olarak oluşturmak ve yayınlamak için bir iş akışımız var. Eylem, çeşitli platformlar (Linux, Mac ve Windows) için ikili dosya oluşturmanın yanı sıra, ikili dosyayı sizin için GitHub'da bir sürüm olarak yükler. Ayrıca bunu başarmak için Jacob tarafından yapılan Bir Yayın Oluşturma eylemini kullanır.

Bu iş akışını kullanmak için nota-web kökünde bir .github dizini oluşturun. Bu dizinde, workflows adlı başka bir dizin oluşturun. Daha sonra .github/workflows/ içinde bir iş akışı dosyası oluşturur ve onu release-tauri-app.yml .

release-tauri-app.yml Linux, macOS ve Windows için ikili dosyaları oluşturan bir iş akışı eklerdik. Bu iş akışı ayrıca ikili dosyaları GitHub'a taslak sürüm olarak yükler. Master'a her bastığımızda iş akışı tetiklenir.

release-tauri-app.yml açın ve aşağıdaki pasajı ekleyin:

 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

İş akışını test etmek için, değişikliklerinizi taahhüt edin ve çatalınızın master dalına aktarın. GitHub'a başarıyla aktardıktan sonra, GitHub'daki "Eylemler" sekmesine tıklayabilir, ardından iş akışının ilerlemesini görmek için "Yapıyı kontrol et" bağlantısını tıklayabilirsiniz.

Eylemin başarılı bir şekilde yürütülmesinin ardından, GitHub'daki depo sayfasındaki "Yayınlar" bölümünde taslak sürümü görebilirsiniz. Daha sonra yayınınızı yayınlamaya devam edebilirsiniz!

Çözüm

Bu makale, güvenli, platformlar arası ve küçük yerel uygulamalar oluşturmak için çok dilli bir araç zincirini tanıttı. Tauri'nin ne olduğunu ve Vue.js ile nasıl birleştirileceğini gördük. Son olarak, yarn tauri:build çalıştırarak ilk Tauri uygulamamızı bir araya getirdik ve ayrıca Linux, macOS ve Windows için ikili dosyalar oluşturmak için bir GitHub eylemi kullandık.

Tauri hakkında ne düşündüğünüzü bana bildirin - onunla ne inşa ettiğinizi görmekten heyecan duyarım. Herhangi bir sorunuz varsa Discord sunucusuna katılabilirsiniz.

Bu makalenin deposu GitHub'da. Ayrıca GitHub iş akışı tarafından oluşturulan ikili dosyalara bakın.