Tauri Mobile - Bouw mobiele apps met JavaScript en Rust

Studio Terabyte is een fullstack web development studio die oplossingen vindt en bouwt passend bij uw project

Wat is Tauri

Tauri beschrijft zichzelf als een framework voor het bouwen van kleine, razendsnelle binaire bestanden voor alle grote desktopplatforms. Ontwikkelaars kunnen elk front-end framework integreren dat compileert naar HTML, JS en CSS voor het bouwen van hun front-end. De backend van de applicatie is een Rust binary met een API waarmee de front-end kan communiceren.

Tauri is dus een framework waarmee je platformonafhankelijke apps kunt bouwen met technologieën waarmee je al bekend mee bent. En nu ondersteunt het ook mobiele apps. Klinkt geweldig, toch!

Waarom Tauri gebruiken?

Waarom zou je iets als Tauri gebruiken in plaats van Kotlin voor Android-apps en Swift voor iOS-apps? Het stelt je in de eerste plaats in staat om te werken met technologieën die je al kent. Niet gedwongen worden om een hele nieuwe programmeertaal te leren, om nog maar te zwijgen van de hele toolchain die de taal vereist, is een enorme tijd besparing. Het maakt het ook gemakkelijk om uw huidige web-app uit te breiden naar mobiele apps zonder dat u gespecialeerde programmeurs hoeft in te huren.

Naast die reden zijn er nog andere om te overwegen:

• Security
• FLOSS
• Bundelgrootte
• Prestatie
• Plugin-systeem
• Zelf-updater

Minimale Tauri mobiele app

*Opmerking: Dit is gebaseerd op de 2.0 Alpha-versie en de vroege versie van de documentatie. Een nieuw versie van het hulpprogramma create-tauri-app is in ontwikkeling om een aantal van de volgende stappen eenvoudiger te maken. Dat gezegd hebbende, is het altijd nuttig om de basis te begrijpen!

De basis

Zorg er eerst voor dat u alle vereisten hebt geïnstalleerd die nodig zijn voor de ontwikkeling van de mobiele app. Ik werk op een mac en bouw en iOS-app, dus ik volg de instructies hier. Als u een ander besturingssysteem gebruikt of Android app wilt maken, kunt u in plaats daarvan hier beginnen.

Nu we de basis gereed hebben, gaan we beginnen met het installeren van het Tauri create-tauri-app Rust hulpprogramma. Hierdoor kunnen we gemakkelijk een nieuw Tauri-project initialiseren. Ik ga voor een Vue en TypeScript project.

cargo install create-tauri-app
cargo create-tauri-app

cd nu in de nieuwe map die is gemaakt en gaan wij ervoor zorg dat we de nieuwste versie hebben. Voer de volgende opdracht uit

npm install @tauri-apps/cli@next @tauri-apps/api@next

Geweldig, dat was het Node-gedeelte! cd nu in de map src-tauri en voer de volgende opdrachten uit om het Rust-gedeelte bij te werken:

cargo add tauri@2.0.0-alpha.0
cargo add tauri-build@2.0.0-alpha.0 --build
cargo install tauri-cli --version "^2.0.0-alpha"

We zijn bijna klaar om onze mobiele app te ontwikkelen! Om mobiele Tauri-applicaties te ontwikkelen, moet de frontend de bestanden aanbedienen op uw openbare netwerkadres. Het netwerkadres kan worden gevonden met behulp van het interne IP NPM-pakket. Je kunt het installeren op de volgende manier:

npm install --save-dev internal-ip

Configuration updates

Vervolgens moeten we het bestand vite.config.ts bijwerken. Ik gebruik Vue, dus de mijne ziet er zo uit:

import { defineConfig } from 'vite'
import { internalIpV4 } from 'internal-ip'
import vue from "@vitejs/plugin-vue";
export default defineConfig(async () => {
  const host = await internalIpV4()
  /** @type {import('vite').UserConfig} */
  const config = {
    plugins: [vue()],
  // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
  // prevent vite from obscuring rust errors
  clearScreen: false,
    server: {
      host: '0.0.0.0', // listen on all addresses
      port: 5173,
      strictPort: true,
      hmr: {
        protocol: 'ws',
        host,
        port: 5183,
      },
    },
  // to make use of `TAURI_DEBUG` and other env variables
  // https://tauri.studio/v1/api/config#buildconfig.beforedevcommand
  envPrefix: ["VITE_", "TAURI_"],
  build: {
    // Tauri supports es2021
    target: process.env.TAURI_PLATFORM == "windows" ? "chrome105" : "safari13",
    // don't minify for debug builds
    minify: !process.env.TAURI_DEBUG ? "esbuild" : false,
    // produce sourcemaps for debug builds
    sourcemap: !!process.env.TAURI_DEBUG,
  },
  }
  return config
})

Als je een ander framework gebruikt, zorg er dan voor dat je de framework-specifieke plug-ins bewaart die al in dit bestand stonden.

Nog een configuratie-update. Dit is een belangrijke!

Update tauri.conf.json:

Er zijn twee dingen die we hier moeten veranderen. Voeg eerst het volgende object als volgt toe aan het object bundel:

    "bundle": {
      "active": true,
      "category": "DeveloperTool",
      "copyright": "",
      "deb": {
        "depends": []
      },
      "externalBin": [],
      "iOS": {
        "developmentTeam": "demo"
      },
      "icon": [

Wijzig ook de poort waarnaar Tauri luistert, zodat deze overeenkomt met de poort waarop uw JS-framework zal worden uitgevoerd. In mijn geval is het 5173. Dus als volgt:

  "build": {
    "beforeDevCommand": "npm run dev",
    "beforeBuildCommand": "npm run build",
    "devPath": "http://localhost:5173", <- Here
    "distDir": "../dist",
    "withGlobalTauri": false
  },

Rust changes

Nu de configuratiebestanden gereed zijn, gaan we enkele wijzigingen aanbrengen in onze Rust-bestanden.

1. Werk uw bestand src-tauri/Cargo.toml bij met de volgende regel:

[lib]
crate-type = ["staticlib", "cdylib", "rlib"]

2. Maak het nieuw bestand src-tauri/src/lib.rs en voeg de volgende inhoud toe:

use tauri::App;
#[cfg(mobile)]
mod mobile;
#[cfg(mobile)]
pub use mobile::*;
pub type SetupHook = Box<dyn FnOnce(&mut App) -> Result<(), Box<dyn std::error::Error>> + Send>;
#[tauri::command]
fn greet(name: &str) -> String {
    format!("Hello, {}!", name)
}
#[derive(Default)]
pub struct AppBuilder {
    setup: Option<SetupHook>,
}
impl AppBuilder {
    pub fn new() -> Self {
        Self::default()
    }
    #[must_use]
    pub fn setup<F>(mut self, setup: F) -> Self
    where
        F: FnOnce(&mut App) -> Result<(), Box<dyn std::error::Error>> + Send + 'static,
    {
        self.setup.replace(Box::new(setup));
        self
    }
    pub fn run(self) {
        let setup = self.setup;
        tauri::Builder::default()
            .setup(move |app| {
                if let Some(setup) = setup {
                    (setup)(app)?;
                }
                Ok(())
            })
            .invoke_handler(tauri::generate_handler![greet])
            .run(tauri::generate_context!())
            .expect("error while running tauri application");
    }
}
#[cfg(mobile)]
fn do_something() {
    println!("Hello from Mobile!");
}
#[cfg(desktop)]
fn do_something() {
    println!("Hello from Desktop!");
}
fn run() {
    if cfg!(mobile) {
        println!("Hello from Mobile!");
    } else {
        println!("Hello from Desktop!");
    }
}

3. Maak een het bestand src-tauri/src/mobile.rs en voeg de volgende inhoud toe:

#[tauri::mobile_entry_point]
fn main() {
  super::AppBuilder::new().run();
}

Dit is een belangrijke stap

4. Update de inhoud van src-tauri/src/main.rs naar:

#![cfg_attr(
  all(not(debug_assertions), target_os = "windows"),
  windows_subsystem = "windows"
)]
pub fn main() {
  // Change demo_mobile_app to the name of your app! 
  demo_mobile_app::AppBuilder::new().run();
}

Nu dit is geregeld, rondt u af met de volgende stappen:

• voer cargo tauri ios init uit in de hoofdmap van het project.
  • als je een foutmelding krijgt met betrekking tot cocaopods, voer dan: brew install cocoapods uit en probeer het opnieuw
• voer cargo tauri ios dev uit om de server te starten

Resultaten

Gefeliciteerd! U zou nu moeten worden gevraagd in welke emulator u uw app wilt laten uitvoeren en u ziet zoiets als dit:

Conclusie

In deze blogpost hebben we een minimale Tauri-app opgezet waarmee we een native iOS-app kunnen bouwen met JS, Vue in ons geval en Rust!

Vanaf hier zou je een solide basis moeten hebben om je eigen ideeën uit te werken en de geweldige app te lanceren die je altijd al hebt willen bouwen!

Je kunt de code voor dit artikel hier vinden: GitHub