Volver a la página principal
sábado 21 septiembre 2024
53

Cómo usar Tauri en Rust

Tauri es un marco emergente y muy eficiente para crear aplicaciones de escritorio con tecnologías web, como HTML, CSS y JavaScript, utilizando un backend basado en Rust. A diferencia de otros marcos como Electron, Tauri es extremadamente ligero, consume menos recursos del sistema y ofrece una excelente seguridad gracias al uso de Rust.

En esta guía, te mostraré cómo usar Tauri con Rust para desarrollar aplicaciones de escritorio, aprovechando al máximo el rendimiento y la seguridad que ofrece este lenguaje.

¿Qué es Tauri?

Tauri permite crear aplicaciones nativas para sistemas operativos como Windows, macOS y Linux, utilizando el motor WebView del sistema operativo para mostrar el contenido web. Esto lo hace más eficiente que Electron, ya que no requiere un navegador completo (como Chromium) empaquetado con la aplicación. Además, el backend de la aplicación se puede programar en Rust, proporcionando un nivel de seguridad adicional y control sobre el sistema operativo.

Beneficios de usar Tauri con Rust

1. Ligereza: Las aplicaciones Tauri tienen un tamaño reducido en comparación con Electron.

2. Seguridad: Rust proporciona seguridad de memoria y previene fallos típicos de lenguajes no seguros.

3. Alto rendimiento: Rust es conocido por su rapidez y baja latencia.

4. Interoperabilidad con el sistema: Tauri puede interactuar con APIs nativas de cada sistema operativo.

5. Cross-platform: Compila aplicaciones para Windows, macOS y Linux sin modificaciones significativas en el código.

Requisitos previos

Antes de empezar, asegúrate de tener instaladas las siguientes herramientas:

1. Rust: Si no tienes Rust instalado, puedes instalarlo ejecutando este comando en tu terminal: 

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

Verifica la instalación con: 

rustc --version

2. Node.js: Para la parte de frontend, necesitarás Node.js para gestionar dependencias y ejecutar el servidor de desarrollo.

Descárgalo desde el sitio oficial de Node.js.

3. Tauri CLI: Instala la CLI de Tauri, que te ayudará a inicializar, desarrollar y construir tu aplicación: 

cargo install tauri-cli

Paso 1: Crear un proyecto básico en Rust

El primer paso es crear un nuevo proyecto de Rust que será la base de tu aplicación Tauri. 

cargo new mi_app_tauri --bin

Este comando crea un proyecto básico de Rust con un archivo main.rs en la carpeta src/.

Estructura inicial del proyecto Rust 

mi_app_tauri/
├── Cargo.toml
└── src
    └── main.rs

El archivo main.rs contiene un simple programa de Rust "Hello, world!". Más adelante, este archivo se adaptará para incluir la lógica nativa de la aplicación.

Paso 2: Integrar Tauri en el proyecto

Una vez que tenemos el proyecto de Rust configurado, lo siguiente es agregar Tauri. Ejecuta el siguiente comando para inicializar Tauri dentro del proyecto: 

cd mi_app_tauri
npx tauri init

Este comando crea la estructura de archivos y configuración que Tauri necesita. Te preguntará algunas opciones básicas durante la inicialización:

1. ¿Dónde está la carpeta del frontend?: Puedes dejarla vacía si no tienes un frontend específico, pero para este ejemplo, se puede utilizar la carpeta src.

2. ¿Quieres que Tauri gestione el servidor de desarrollo?: Si planeas usar un servidor web local, selecciona No.

3. Framework: No seleccionaremos un framework específico, ya que Rust se encargará de la lógica nativa.

Después de la inicialización, tu proyecto tendrá esta estructura: 

mi_app_tauri/
├── src-tauri/
│   ├── tauri.conf.json
│   ├── src/
│   │   └── main.rs
├── src/
│   └── index.html
├── Cargo.toml

Archivos importantes

  • src-tauri/: Contiene el código específico de Tauri, incluyendo la configuración (tauri.conf.json) y el backend en Rust (main.rs).
  • src/index.html: Este archivo HTML será la interfaz de tu aplicación, que será servida a través de WebView en una ventana nativa.

Paso 3: Escribir el código en Rust para Tauri

Ahora que tenemos la estructura de Tauri lista, vamos a trabajar en el archivo main.rs dentro de la carpeta src-tauri/src. Aquí es donde se define el comportamiento de la aplicación de escritorio.

Por defecto, Tauri usa Rust para manejar la ventana nativa y los comandos del sistema. Vamos a escribir un código básico para abrir una ventana de Tauri y servir el archivo HTML de src/index.html.

Abre src-tauri/src/main.rs y reemplaza su contenido con el siguiente código: 

#![cfg_attr(
    all(not(debug_assertions), target_os = "windows"),
    windows_subsystem = "windows"
)]

fn main() {
    tauri::Builder::default()
        .run(tauri::generate_context!())
        .expect("error while running Tauri application");
}

Este código inicializa una aplicación Tauri simple y abre una ventana nativa que cargará tu archivo HTML de la carpeta src/.

Explicación del código:

  • #![cfg_attr(...)]: Esta línea asegura que no se muestre una consola en la versión final de la aplicación en Windows.
  • tauri::Builder::default() es el constructor de Tauri que crea la aplicación.
  • run() inicia el bucle de la ventana nativa y la aplicación.

Paso 4: Crear el frontend

Aunque Rust manejará la lógica nativa, necesitas una interfaz de usuario (UI) para tu aplicación. Tauri utiliza WebView para mostrar contenido web en ventanas nativas, por lo que puedes escribir tu interfaz utilizando HTML, CSS y JavaScript.

Edita el archivo src/index.html para crear una página simple que se mostrará dentro de la ventana nativa de la aplicación. Aquí tienes un ejemplo básico: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Mi App Tauri</title>
</head>
<body>
  <h1>Hola desde Tauri!</h1>
  <button id="saludo-btn">Saludar desde Rust</button>

  <script>
    document.getElementById('saludo-btn').addEventListener('click', async () => {
      const saludo = await window.__TAURI__.invoke('saludar');
      alert(saludo);
    });
  </script>
</body>
</html>

Explicación del código HTML:

  • Botón "Saludar desde Rust": Este botón invoca un comando en Rust cuando es presionado, lo que nos permite ejecutar lógica nativa desde el frontend.
  • Tauri API (window.__TAURI__.invoke()): Utiliza la API de Tauri para llamar a una función nativa de Rust desde JavaScript.

Paso 5: Añadir comandos de Rust en Tauri

Ahora, vamos a agregar una función en Rust que se pueda invocar desde el frontend. Modifica el archivo src-tauri/src/main.rs para agregar un comando: 

use tauri::command;

#[command]
fn saludar() -> String {
    "¡Hola desde Rust!".to_string()
}

fn main() {
    tauri::Builder::default()
        .invoke_handler(tauri::generate_handler![saludar])
        .run(tauri::generate_context!())
        .expect("error while running Tauri application");
}

Explicación:

  • #[command]: Esta macro convierte la función saludar en un comando que puede ser invocado desde el frontend.
  • invoke_handler: Registra la función saludar para que pueda ser llamada por el frontend.

Cuando el usuario haga clic en el botón en la interfaz, el mensaje "¡Hola desde Rust!" será devuelto al frontend y mostrado en un alert.

Paso 6: Ejecutar la aplicación

Con todo el código listo, es hora de ejecutar la aplicación. Primero, inicia el servidor de desarrollo: 

npm run tauri dev

Esto abrirá una ventana de Tauri con tu archivo HTML cargado y mostrará la funcionalidad de saludar desde Rust.

Paso 7: Construir la aplicación para producción

Para empaquetar tu aplicación en un ejecutable nativo que puedas distribuir, simplemente ejecuta: 

npm run tauri build

Esto generará un ejecutable que puede ser instalado en cualquier sistema operativo compatible.

Conclusión

Has aprendido cómo configurar y utilizar Tauri con Rust para crear aplicaciones de escritorio ligeras y rápidas. Tauri ofrece un entorno ideal para aplicaciones que requieren interfaces web pero también desean aprovechar la seguridad, velocidad y control de Rust para la lógica nativa.

Etiquetas:
rust tauri
Compartir:
Creado por:
Author photo

Jorge García

Fullstack developer