HTML, CSS, e JavaScript
Questa guida ti guiderà attraverso la creazione della tua prima app Tauri utilizzando solo HTML, CSS, e JavaScript. Questo è probabilmente il posto migliore per iniziare se siete neofiti allo sviluppo web.
Before we continue, make sure you have completed the prerequisites to have a working development environment.
Tauri è un framework per costruire applicazioni desktop con qualsiasi framework Front-end e un nucleo in Rust. Ogni app consiste di due parti:
- Un binario Rust che crea le finestre ed espone le funzionalità native a quelle finestre
- Un Frontend di tua scelta che produce l'Interfaccia Utente all'interno della finestra
Di seguito, strutturiamo prima il Frontend, poi impostiamo il progetto Rust ed infine ti mostriamo come farli comunicare tra di loro.
create-tauri-app
The easiest way to scaffold a new project is the create-tauri-app
utility. It provides opinionated templates for vanilla HTML/CSS/JavaScript and many frontend frameworks like React, Svelte and Yew.
- Bash
- PowerShell
- Cargo
- npm
- Yarn
- pnpm
- Bun
sh <(curl https://create.tauri.app/sh)
irm https://create.tauri.app/ps | iex
cargo install create-tauri-app --locked
cargo create-tauri-app
npm create tauri-app@latest
yarn create tauri-app
pnpm create tauri-app
bunx create-tauri-app
Please note that you do not need to follow the rest of this guide if you use create-tauri-app
, but we still recommend reading it to understand the setup.
Ecco un'anteprima di quello che costruiremo:
Crea il Frontend​
Creeremo un'interfaccia utente minimale usando un file HTML. Per mantenere le cose ordinate però, creiamo una cartella separata per esso:
mkdir ui
Successivamente, crea un file index.html
all'interno di quella cartella con i seguenti contenuti:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Welcome from Tauri!</h1>
</body>
</html>
Manterremo l'interfaccia utente minimale per questa guida, ma sentitevi liberi di giocare con più contenuti o aggiungere styling attraverso CSS.
Crea il progetto Rust​
At the heart of every Tauri app is a Rust binary that manages windows, the webview, and calls to the operating system through a Rust crate called tauri
. Questo progetto è gestito da Cargo, il gestore ufficiale di pacchetti e lo strumento di costruzione tuttofare per Rust.
Tauri CLI utilizza Cargo dietro le quinte quindi raramente è necessario interagire con esso direttamente. Cargo ha molte caratteristiche utili che non sono esposte attraverso la CLI, come testing, linting, e formattazione, quindi invitiamo a riferirsi alla loro documentazione ufficiale per saperne di più.
If you haven't installed the Tauri CLI yet you can do so with one of the below commands. Non sei sicuro quale usare? Dai un'occhiata alla voce FAQ.
- npm
- Yarn
- pnpm
- Bun
- Cargo
npm install --save-dev @tauri-apps/cli@">1.0.0"
"scripts": {
"tauri": "tauri"
}
yarn add -D @tauri-apps/cli@^1.0.0
pnpm add -D @tauri-apps/cli@1
bun add -D @tauri-apps/cli@1.0.0
cargo install tauri-cli --version "^1.0.0"
Per strutturare un progetto Rust minimale preconfigurato per utilizzare Tauri, apri un terminale ed esegui il seguente comando:
- npm
- Yarn
- pnpm
- Cargo
npm run tauri init
yarn tauri init
pnpm tauri init
cargo tauri init
Vi guiderà attraverso una serie di domande:
- What is your app name?
This will be the name of your final bundle and what the OS will call your app. È possibile utilizzare il nome che si desidera. - What should the window title be?
This will be the title of the default main window. You can use any title you want here. - Where are your web assets (HTML/CSS/JS) located relative to the
<current dir>/src-tauri/tauri.conf.json
file that will be created?
This is the path that Tauri will load your frontend assets from when building for production.Use../ui
for this value. - What is the URL of your dev server?
This can be either a URL or a file path that Tauri will load during development.Use../ui
for this value. - What is your frontend dev command?
This is the command used to start your frontend dev server.You can leave this blank since nothing needs to be compiled. - What is your frontend build command?
This is the command to build your frontend files.You can leave this blank since nothing needs to be compiled.
Se hai familiarità con Rust, noterai che tauri init
sembra e funziona molto come cargo init
. È possibile utilizzare cargo init
e aggiungere le dipendenze Tauri necessarie se si preferisce una configurazione completamente manuale.
Il comando tauri init
genera una cartella chiamata src-tauri
. È una convenzione per le applicazioni Tauri dove inserire tutti i file correlati al nucleo in questa cartella. Attraversiamo rapidamente i contenuti della cartella:
Cargo.toml
Cargo's manifest file. È possibile dichiarare crates Rust da cui la tua app dipende, metadati sulla tua app, e molto altro. Per il riferimento completo vedi Formato Manifesto di Cargo.tauri.conf.json
This file lets you configure and customize aspects of your Tauri application from the name of your app to the list of allowed APIs. Vedere Configurazione API di Tauri per l'elenco completo delle opzioni supportate e le spiegazioni approfondite per ciascuno.src/main.rs
This is the entry point to your Rust program and the place where we bootstrap into Tauri. Troverete due sezioni in esso:src/main.rs#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
fn main() {
tauri::Builder::default()
.run(tauri::generate_context!())
.expect("error while running tauri application");
}The line beginning with the
cfg!
ha un solo scopo: disattiva la finestra del prompt dei comandi che normalmente apparirebbe su Windows se si eseguisse un app impacchettata. Se sei su Windows, prova a commentarlo e vedi cosa succede.La funzione
main
è il punto di entrata e la prima funzione che viene invocata quando il programma viene eseguito.icons
Chances are you want a snazzy icon for your app! Per farti andare velocemente, abbiamo incluso un set di icone predefinite. Dovresti cambiarli prima di pubblicare la tua applicazione. Scopri di più sui vari formati di icone nella guida delle icone di Tauri.
E questo è tutto! Ora puoi eseguire il seguente comando nel terminale per avviare una build di sviluppo della tua app:
- npm
- Yarn
- pnpm
- bun
- Cargo
npm run tauri dev
yarn tauri dev
pnpm tauri dev
bunx tauri dev
cargo tauri dev
Anteprima dell'applicazione
Invoca Comandi​
Tauri lets you enhance your frontend with native capabilities. Chiamiamo queste funzionalità Comandi, sono essenzialmente funzioni Rust che puoi chiamare dal tuo Frontend JavaScript. Questo ti consente di gestire elaborazioni pesanti o chiamate al SO tramite codice Rust più performante.
Facciamo un piccolo esempio:
#[tauri::command]
fn greet(name: &str) -> String {
format!("Ciao, {}!", name)
}
Un Comando è come qualsiasi funzione Rust, con l'aggiunta dell'attributo macro #[tauri::command]
che permette alla tua funzione di comunicare con il contesto JavaScript.
Infine, dobbiamo anche dire a Tauri del nostro nuovo Comando in modo che possa indirizzare le chiamate di conseguenza. Questo è fatto con la combinazione della funzione .invoke_handler()
e della macro generate_handler![]
che puoi vedere sotto:
fn main() {
tauri::Builder::default()
.invoke_handler(tauri::generate_handler![greet])
.run(tauri::generate_context!())
.expect("Errore nell'eseguire l'applicazione tauri");
}
Now you're ready to call your Command from the frontend!
Normalmente consiglieremmo il pacchetto @tauri-apps/api
, ma visto che non stiamo usando un impacchettatore per questa guida, suggeriamo di abilitare l'opzione withGlobalTauri
nel proprio file tauri.config.json
:
{
"build": {
"beforeBuildCommand": "",
"beforeDevCommand": "",
"devPath": "../ui",
"distDir": "../ui",
"withGlobalTauri": true
},
In questo modo verrà iniettata una versione pre-impacchettata delle funzioni API nel frontend.
Ora puoi modificare il tuo file index.html
per chiamare il tuo comando:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1 id="header">Welcome from Tauri!</h1>
<script>
// access the pre-bundled global API functions
const { invoke } = window.__TAURI__.tauri
// now we can call our Command!
// You will see "Welcome from Tauri" replaced
// by "Hello, World!"!
invoke('greet', { name: 'World' })
// `invoke` returns a Promise
.then((response) => {
window.header.innerHTML = response
})
</script>
</body>
</html>
If you want to know more about the communication between Rust and JavaScript, please read the Tauri Inter-Process Communication guide.