Menggunakan winapp CLI dengan Tauri

Panduan ini menunjukkan cara menggunakan winapp CLI dengan aplikasi Tauri untuk men-debug dengan identitas paket dan mengemas aplikasi Anda sebagai MSIX.

Identitas paket adalah konsep inti dalam model Windows app. Ini memungkinkan aplikasi Anda untuk mengakses API Windows tertentu (seperti Pemberitahuan, Keamanan, API AI, dll.), merasakan pengalaman pemasangan/penghapusan instalasi yang lebih bersih, dan banyak lagi.

Prasyarat

  1. Windows 11
  2. Node.js - winget install OpenJS.NodeJS --source winget
  3. winapp CLI - winget install microsoft.winappcli --source winget

1. Buat aplikasi Tauri baru

npm create tauri-app@latest

Ikuti perintah (nama Project: tauri-app, bahasa frontend: JavaScript, Package manager: npm).

Navigasikan ke direktori project Anda dan instal dependensi:

cd tauri-app
npm install

Jalankan aplikasi:

npm run tauri dev

2. Perbarui kode untuk memeriksa identitas

Perubahan backend (Rust)

Tambahkan windows dependensi. Buka src-tauri/Cargo.toml:

[target.'cfg(windows)'.dependencies]
windows = { version = "0.58", features = ["ApplicationModel"] }

Buka src-tauri/src/lib.rs dan tambahkan perintah:

#[tauri::command]
fn get_package_family_name() -> String {
    #[cfg(target_os = "windows")]
    {
        use windows::ApplicationModel::Package;
        match Package::Current() {
            Ok(package) => {
                match package.Id() {
                    Ok(id) => match id.FamilyName() {
                        Ok(name) => name.to_string(),
                        Err(_) => "Error retrieving Family Name".to_string(),
                    },
                    Err(_) => "Error retrieving Package ID".to_string(),
                }
            }
            Err(_) => "No package identity".to_string(),
        }
    }
    #[cfg(not(target_os = "windows"))]
    {
        "Not running on Windows".to_string()
    }
}

Daftarkan perintah dalam run fungsi:

pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_opener::init())
        .invoke_handler(tauri::generate_handler![greet, get_package_family_name])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

Perubahan frontend (JavaScript)

Di src/index.html, tambahkan paragraf untuk menampilkan hasilnya:

<p id="pfn-msg"></p>

Dalam src/main.js, panggil perintah :

const { invoke } = window.__TAURI__.core;

async function checkPackageIdentity() {
  const pfn = await invoke("get_package_family_name");
  const pfnMsgEl = document.querySelector("#pfn-msg");

  if (pfn !== "No package identity" && !pfn.startsWith("Error")) {
    pfnMsgEl.textContent = `Package family name: ${pfn}`;
  } else {
    pfnMsgEl.textContent = `Not running with package identity`;
  }
}

window.addEventListener("DOMContentLoaded", () => {
  checkPackageIdentity();
});

Jalankan aplikasi untuk mengonfirmasi bahwa aplikasi menunjukkan "Tidak berjalan dengan identitas paket":

npm run tauri dev

3. Inisialisasi project dengan winapp CLI

winapp init

Ketika diminta:

  • Nama paket: Tekan Enter untuk menerima default (tauri-app)
  • Nama penerbit: Tekan Enter untuk menerima pengaturan standar atau masukkan nama Anda
  • Versi: Tekan Enter untuk menerima 1.0.0.0
  • Titik masuk: Tekan Enter untuk menerima default (tauri-app.exe)
  • Pengaturan SDK: Pilih "Jangan mengatur SDK"

4. Debug dengan identitas

Tambahkan skrip ke package.json:

"scripts": {
    "tauri:dev:withidentity": "cargo build --manifest-path src-tauri/Cargo.toml && winapp create-debug-identity src-tauri/target/debug/tauri-app.exe && .\\src-tauri\\target\\debug\\tauri-app.exe"
}

Jalankan:

npm run tauri:dev:withidentity

Anda akan melihat aplikasi menampilkan Nama Keluarga Paket.

5. Paket dengan MSIX

  1. Bangun untuk rilis:

    npm run tauri build
    
  2. Siapkan direktori paket:

    mkdir dist
    copy .\src-tauri\target\release\tauri-app.exe .\dist\
    
  3. Buat sertifikat pengembangan:

    winapp cert generate --if-exists skip
    
  4. Paket dan tanda tangan:

    winapp pack .\dist --cert .\devcert.pfx
    
  5. Instal sertifikat (jalankan sebagai administrator):

    winapp cert install .\devcert.pfx
    
  6. Instal dengan mengeklik dua kali file yang dihasilkan .msix . Luncurkan dari menu Mulai.