Passer au contenu principal

HTML, CSS et JavaScript

Cette documentation vous guidera à travers la création de votre premiÚre application Tauri en utilisant uniquement HTML, CSS et JavaScript. C'est probablement le meilleur endroit pour commencer si vous commencez dans le développement web.

info

Before we continue, make sure you have completed the prerequisites to have a working development environment.

Tauri est un framework pour développer des applications de bureau avec n'importe quel framework frontend et un backend en Rust. Chaque application se compose de deux parties :

  1. Le binaire en Rust qui crĂ©e les fenĂȘtres et expose les fonctionnalitĂ©s natives Ă  ces fenĂȘtres
  2. Le framework frontend de votre choix qui crĂ©e l'interface utilisateur dans la fenĂȘtre

Dans ce qui suit, nous allons d'abord configurer le frontend, puis mettre en place le projet Rust et enfin vous montrer comment communiquer entre les deux.

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.

sh <(curl https://create.tauri.app/sh)

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.

Voici un aperçu de ce que nous allons construire :

Aperçu de l&#39;application Aperçu de l&#39;application

CrĂ©er le Frontend​

Nous allons créer une interface utilisateur trÚs minimale en utilisant un fichier HTML. Pour que tout soit bien rangé, créez un dossier séparé pour ça :

mkdir ui

Ensuite, créez un fichier index.html à l'intérieur de ce dossier avec le contenu suivant :

index.html
<!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>

Nous garderons l'interface minimale pour ce guide, mais n'hésitez pas à jouer avec plus de contenu ou à ajouter du style via CSS.

CrĂ©er le projet Rust​

Au cƓur de chaque application Tauri se trouve un binaire Rust qui gĂšre les fenĂȘtres, la webview et les appels au systĂšme d'exploitation par le biais d'une crate Rust appelĂ© tauri. Ce projet est gĂ©rĂ© par Cargo, le gestionnaire de paquets officiel et l'outil de construction propulsĂ© par Rust.

Notre CLI Tauri utilise Cargo sous le capot, de sorte que vous avez rarement besoin d'interagir directement avec lui. Cargo dispose de nombreuses autres fonctionnalités utiles qui ne sont pas exposées par notre CLI, comme les tests, le linting et le formatage, alors veuillez vous référer à leur documentation officielle pour en savoir plus.

Installer Tauri CLI

Si vous n'avez pas encore installĂ© le CLI Tauri, vous pouvez le faire avec l'une des commandes ci-dessous. Vous n'ĂȘtes pas sĂ»r de savoir quoi utiliser ? Consultez la section dĂ©diĂ©e dans la FAQ.

npm install --save-dev @tauri-apps/cli@">1.0.0"
For npm to detect Tauri correctly you need to add it to the "scripts" section in your package.json file:
package.json
"scripts": {
"tauri": "tauri"
}

Pour échafauder un projet Rust minimal qui est pré-configuré pour utiliser Tauri, ouvrez un terminal et exécutez la commande suivante :

npm run tauri init

Il vous guidera à travers une série de questions :

  1. Quel est le nom de votre application ?
    Ce sera le nom de votre paquet final et le nom du programme dans votre OS. Vous pouvez utiliser n'importe quel nom que vous voulez ici.

  2. Quel doit ĂȘtre le nom de la fenĂȘtre ?
    Ce sera le nom de la fenĂȘtre principale par dĂ©faut. Vous pouvez utiliser n'importe quel nom que vous voulez ici.

  3. OĂč sont vos ressources web (HTML/CSS/JS) situĂ©s par rapport au fichier <current dir>/src-tauri/tauri.conf.json qui sera crĂ©Ă© ?
    Ce chemin est celui que Tauri chargera votre resources frontend quand vous compiler en mode production.
    Use ../ui dans cette exemple.

  4. Quelle est l'URL de votre serveur de développement
    Celle - ci peut ĂȘtre soit une URL oĂč est chemin fichier que Tauri chargera pendant le development.
    Utilisé ../ui dans cette exemple.

  5. Quelle est votre commande de développement frontend ?
    Celle ci est la commande utilisée pour démarrer votre serveur de développement frontend.
    You can leave this blank since nothing needs to be compiled.

  6. Quelle est votre commande de build frontend ?
    Celle ci est la commande utilisée pour construire vos fichiers frontend pour la production.
    You can leave this blank since nothing needs to be compiled.
info

Si vous ĂȘtes familier avec Rust, vous remarquerez que tauri init ressemble beaucoup Ă  init cargo. Vous pouvez simplement utiliser cargo init et ajouter les dĂ©pendances Tauri nĂ©cessaires si vous prĂ©fĂ©rez une installation entiĂšrement manuelle.

La commande tauri init gĂ©nĂšre un dossier appelĂ© src-tauri. C'est une convention pour les applications Tauri de placer tous les fichiers liĂ©s au cƓur de l'application dans ce dossier. Passons rapidement Ă  travers le contenu de ce dossier :

  • cargo.toml
    Fichier manifeste de Cargo. Vous pouvez déclarer les crates Rust dont votre application dépend, les métadonnées de votre application, et bien plus encore. Pour la référence complÚte, voir Format de manifeste de Cargo.

  • tauri.conf.json
    Ce fichier vous permet de configurer et de personnaliser des aspects de votre application Tauri du nom de votre application à la liste des API autorisées. Voir la configuration de l'API de Tauri pour la liste complÚte des options supportées et des explications approfondies pour chacune d'entre elles.

  • src/main.rs
    C'est le point d'entrĂ©e de votre programme Rust et l'endroit oĂč nous dĂ©marrons Tauri. Vous y trouverez deux sections :

    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! ayant qu'un seul but : elle dĂ©sactive la fenĂȘtre d'invite de commande qui s'afficherait normalement sur Windows si vous exĂ©cutez une application groupĂ©e. Si vous ĂȘtes sous Windows, essayez de le commenter et de voir ce qui se passe.

    La fonction main est le point d'entrée et la premiÚre fonction qui est appelée lorsque votre programme s'exécute.

  • icĂŽnes
    Il y a de fortes chances que vous souhaitiez une icÎne élégante pour votre application ! Pour vous permettre de démarrer rapidement, nous avons inclus un ensemble d'icÎnes par défaut. Vous devez les changer avant de publier votre application. Pour en savoir plus sur les différents formats d'icÎnes, consultez le tutoriels sur les icÎnes de Tauri.

Et c'est tout! Maintenant, vous pouvez exécuter la commande suivante dans votre terminal pour lancer de votre application en mode développement:

npm run tauri dev

Aperçu de l'application

Progression du développement Progression du développement

Invoquer des commandes​

Tauri vous permet d'améliorer votre frontend avec des capacités natives. Nous appelons ces Commandes, essentiellement des fonctions Rust que vous pouvez appeler depuis votre JavaScript en frontend. Cela vous permet de gérer des traitements ou des appels plus lourds via l'OS dans un code Rust beaucoup plus performant.

Faisons un exemple simple :

src-tauri/src/main.rs
#[tauri::command]
fn greet(name: &str) -> String {
format!("Hello, {}!", name)
}

Une commande est comme n'importe quelle fonction Rust normale, avec l'ajout de la macro d'attribut #[tauri::command] qui permet Ă  votre fonction de communiquer avec le contexte JavaScript.

Enfin, nous devons également parler à Tauri de notre commande nouvellement créée afin qu'elle puisse effectuer les appels en conséquence. Ceci est fait avec la combinaison de la fonction .invoke_handler() et de la macro generate_handler![] que vous pouvez voir ci-dessous :

src-tauri/src/main.rs
fn main() {
tauri::Builder::default()
.invoke_handler(tauri::generate_handler![greet])
.run(tauri::generate_context!())
.expect("error while running tauri application");
}

Maintenant vous ĂȘtes prĂȘt Ă  appeler votre commande depuis le frontend !

Nous recommanderions normalement le paquet @tauri-apps/api ici, mais puisque nous n'utilisons pas de bundler pour ce guide, veuillez activer withGlobalTauri dans votre fichier tauri.conf.json:

tauri.conf.json
{
"build": {
"beforeBuildCommand": "",
"beforeDevCommand": "",
"devPath": "../ui",
"distDir": "../ui",
"withGlobalTauri": true
},

Cela injectera une version pré-compilée des fonctions API dans votre frontend.

Vous pouvez maintenant modifier votre fichier index.html pour appeler votre commande :

index.html
<!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>

:::astuce

Si vous voulez en savoir plus sur la communication entre Rust et JavaScript, veuillez lire le Tauri Inter-Process Communication guide.

:::