Desarrollo Web

Preparación del entorno de desarrollo

Requisitos previos

Antes de comenzar con Tauri, asegúrate de que tu equipo cumpla con los siguientes requisitos:

• Node.js (versión 14 o superior)
• Gestor de paquetes para Rust denominado Cargo
• Lenguaje Rust
• Un editor de código, como Visual Studio Code

Instalación de Tauri en Windows

• Instala Node.js desde nodejs.org.
• Instala Rust y Cargo siguiendo las instrucciones en rust-lang.org.
• Ejecuta el siguiente comando en la terminal para instalar Tauri CLI:

npm install -g @tauri-apps/cli

Instalación de Tauri en macOS

• Instala Node.js desde nodejs.org.
• Instala Rust y Cargo en una terminal con el siguiente comando:

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

• Instala Tauri CLI con:

npm install -g @tauri-apps/cli

Instalación de Tauri en Linux

• Instala Node.js desde nodejs.org.
• Instala Rust y Cargo con:

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

• Instala Tauri CLI con:

npm install -g @tauri-apps/cli

Configuración inicial del proyecto

Creación de la estructura del proyecto

• Crea un nuevo proyecto con Tauri, para ellos debemos teclear en la terminal el siguiente comando:

npm create tauri-app

• Sigue las instrucciones del asistente para configurar tu nuevo proyecto, deberás configurar datos como el nombre, el lenguaje a utilizar en el Frontend (typeScript, Rust o .NET), el gestor de paquetes y la plantilla base (Vanilla, Vue, Svelte, …) sobre la que deseemos crear nuestro proyecto.

• En este paso debemos acceder a la carpeta del proyecto, instalar las dependencias de Node y posteriormente desplegar el servidor de desarrollo. Se desplegará nuestra aplicación ejecutándose en el navegador en una URL de nuestro equipo.

 cd tauri-app
  npm install
  npm run tauri dev

Organización de archivos y carpetas del proyecto

Un proyecto tipo de Tauri incluye la siguiente organización de carpetas y archivos:

• src-tauri: contiene los archivos de configuración y el código Rust.
• src: contiene los archivos del Frontend, como HTML, CSS y JavaScript.

Configuración de archivos clave

La configuración de Tauri considera dos archivos, que permiten modificar la preferencias y ajustes de la aplicación:

• tauri.conf.json: archivo principal de configuración de Tauri.
• Cargo.toml: archivo de configuración de Rust.

Desarrollo de la interfaz de usuario

Uso de HTML, CSS y JavaScript

Tauri permite utilizar tecnologías web estándar para desarrollar una interfaz de usuario.

Puedes estructurar tu HTML en el archivo index.html y estilizarlo con CSS en el archivo styles.css.

JavaScript puede ser incluido directamente en el HTML o en archivos separados, aunque para hacerlo más modular te recomendamos que tengas una carpeta con todos los scripts de JavaScript y lo importes donde los necesites.

Integración con frameworks Frontend

Tauri es compatible con varios frameworks Frontend como React, Vue y Svelte, lo que lo dota de una mayor versatilidad y dinamismo.

La integración con estos frameworks se realiza de manera sencilla, permitiendo que el Frontend sea desarrollado con herramientas modernas y familiares, mientras que el Backend se gestiona con Rust, un lenguaje seguro y eficiente.

La integración con uno de estos frameworks sigue un proceso similar. De forma resumida deberás:

• Crear una aplicación base usando el CLI del framework (por ejemplo, vue create my-tauri-app para Vue).
• Instalar las dependencias de Tauri (@tauri-apps/cli y @tauri-apps/api).
• Configurar Tauri utilizando npx tauri init.
• Ajustar el archivo tauri.conf.json para que apunte correctamente a tu aplicación Frontend.
• Utilizar los comandos de Tauri para desarrollo y construcción.

Consultando la documentación oficial de Tauri encontrarás más detalles y ejemplos específicos para cada framework.

Integración de funcionalidades nativas

Uso de plugins de Tauri

Tauri ofrece varios plugins que facilitan la integración de funcionalidades nativas como el acceso a archivos, notificaciones, etc.

Para utilizar un plugin, primero necesitas instalarlo y configúralo en tu proyecto y luego invocarlo desde la parte Frontend, donde quieras utilizarlo.

Como ejemplo, para integrar el plugin de notificaciones debes seguir estos pasos:

• Instala el plugin:

npm install @tauri-apps/api

• Importa y usa el plugin en tu código JavaScript:

import { Notification } from '@tauri-apps/api';

Notification.requestPermission().then(permission => {
  if (permission === 'granted') {
    new Notification('Hello', { body: 'Hello from Tauri!' });
  }
});

• Incrusta el script en un ejemplo sencillo de HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tauri Notification</title>
</head>
<body>
  <h1>Hello Tauri!</h1>
  <script type="module" src="./index.js"></script>
</body>
</html>

Comunicación entre Frontend y Backend

Tauri facilita la comunicación entre el Frontend y el Backend a través de la declaración de comandos y eventos.

Para ello hemos preparado un ejemplo relativo al envío de un mensaje desde el Backend al Frontend, su implementación consta de los siguientes pasos:

• Define un comando en Rust, puedes añadirlo en el archivo src-tauri/src/main.rs:

use tauri::command;

#[command]
fn my_custom_command() -> String {
  "Hello from Rust!".to_string()
}

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

• Invoca el comando desde el Frontend (JavaScript):

import { invoke } from '@tauri-apps/api/tauri';

async function callRustCommand() {
  const response = await invoke('my_custom_command');
  console.log(response); // "Hello from Rust!"
}

callRustCommand();

De esta sencilla forma, comunicamos un área con la otra, aislando la capa de presentación de la lógica.

Implementación de funciones nativas con Rust

Rust se utiliza en Tauri para implementar funcionalidades nativas de manera eficiente, permitiendo el acceso a funciones nativas relativas al equipo en el que se ejecute. Puedes escribir funciones en Rust y exponerlas al Frontend mediante comandos.

En este ejemplo se traemos los pasos necesarios para implementar la funcionalidad de Lectura de un archivo en Rust:

• Agrega la función de lectura de archivo en Rust:

use std::fs;
use tauri::command;

#[command]
fn read_file(path: String) -> Result<String, String> {
  fs::read_to_string(path).map_err(|err| err.to_string())
}

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

• Invoca la función desde el Frontend:

import { invoke } from '@tauri-apps/api/tauri';

async function readFile(path) {
  try {
    const content = await invoke('read_file', { path });
    console.log(content);
  } catch (error) {
    console.error('Error reading file:', error);
  }
}

readFile('path/to/your/file.txt');

Gestión de archivos y datos

Lectura y escritura de archivos

Como se mostró en el ejemplo anterior, Tauri facilita la lectura y escritura de archivos mediante diversas funciones nativas en Rust. Como se puede apreciar, siempre debemos declarar las funciones Rust en un archivo e invocarlas desde el Frontend.

Este es un ejemplo para utilizar la funcionalidad de escritura de un archivo:

• Agrega la función de escritura de archivo en archivo Rust:

use std::fs;
use tauri::command;

#[command]
fn write_file(path: String, content: String) -> Result<(), String> {
  fs::write(path, content).map_err(|err| err.to_string())
}

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

• Invoca la función desde el Frontend:

import { invoke } from '@tauri-apps/api/tauri';

async function writeFile(path, content) {
  try {
    await invoke('write_file', { path, content });
    console.log('File written successfully');
  } catch (error) {
    console.error('Error writing file:', error);
  }
}

writeFile('path/to/your/file.txt', 'Hello, Tauri!');

Almacenamiento de datos locales

Tauri permite el almacenamiento de datos locales utilizando APIs del navegador o plugins específicos.

Su implementación sigue este ejemplo:

// Guardar datos
localStorage.setItem('key', 'value');

// Leer datos
const value = localStorage.getItem('key');
console.log(value); // "value"

Por otro lado, en Tauri, puedes usar el plugin tauri-plugin-store para gestionar el almacenamiento de datos locales de una manera más robusta y específica para aplicaciones de escritorio, puedes implementarlo siguiendo estos pasos:

• Añadir el plugin tauri-plugin-store a tu proyecto

Lo pimero que necesitas es añadir el plugin a tu configuración de Tauri, en el archivo Cargo.toml.

[dependencies]
tauri = { version = "1.0", features = ["api-all"] }
tauri-plugin-store = "0.2"

• Luego, necesitas actualizar la configuración de Tauri en tu archivo tauri.conf.json para incluir el plugin.

{
  "plugins": {
    "store": {}
  }
}

• Después de configurar el plugin, puedes usarlo en tu aplicación. Aquí tienes un ejemplo de cómo guardar y leer datos usando tauri-plugin-store desde un archivo JavaScript.

import { Store } from "tauri-plugin-store-api";

// Crear una instancia de Store
const store = new Store(".settings.dat");

// Guardar datos
async function saveData(key, value) {
  await store.set(key, value);
  await store.save(); // Es importante llamar a save() para persistir los cambios
}

// Leer datos
async function loadData(key) {
  const value = await store.get(key);
  return value;
}

// Ejemplo de uso
(async () => {
  await saveData('key', 'value');
  const value = await loadData('key');
  console.log(value); // "value"
})();

• Integrar el uso del plugin en tu aplicación

Puedes llamar a las funciones saveData y loadData desde cualquier parte de tu aplicación para almacenar y recuperar datos locales.

Pruebas y depuración

Métodos y herramientas para probar la aplicación

Las pruebas son esenciales para garantizar la calidad de tu aplicación. Puedes utilizar herramientas como Jest para pruebas de JavaScript y cargo test para pruebas de Rust.

Este es un ejemplo de una prueba unitaria con la librería Jest:

• Instala Jest:

npm install --save-dev jest

• Crea un archivo de pruebas (sum.test.js):

function sum(a, b) {
  return a + b;
}

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

• Ejecuta las pruebas:

npx jest

• Por otro lado, debemos realizar pruebas sobre el área Backend de la aplicación para ellos podemos utilizar la utilidad cargo test. En el siguiente ejemplo verás una pequeña prueba que comprueba si se realiza correctamente la operación de sumar dos valores.

// src-tauri/src/lib.rs

pub fn add(a: i32, b: i32) -> i32 {
    a + b
}

#[cfg(test)]
mod tests {
    use super::*;

    #[test]
    fn test_add() {
        assert_eq!(add(2, 3), 5);
    }

    #[test]
    fn test_add_negative() {
        assert_eq!(add(-2, -3), -5);
    }
}

• Para ejecutar el test ejecutamos el siguiente comando en la terminal.

cargo test

• Por consola obtendremos la siguiente salida con datos de la ejecución de las pruebas:

running 2 tests
test tests::test_add ... ok
test tests::test_add_negative ... ok

test result: ok. 2 passed; 0 failed; 0 ignored; 0 measured; 0 filtered out; finished in 0.00s

Técnicas para depurar y solucionar problemas comunes

Para depurar tu aplicación, puedes utilizar las herramientas de desarrollo del navegador (DevTools) para el Frontend y cargo para el Backend.

Para encontrar problemas y errores en el navegador, abre las herramientas de desarrollo en tu navegador o en la ventana de tu aplicación Tauri presionando F12 o Ctrl+Shift+I.

De otro lado, en la terminal del servidor de desarrollo de Tauri, puedes observar si se producen errores durante la ejecución.

Consejos para mejorar el rendimiento

• Minimiza y comprime tus archivos HTML, CSS y JavaScript.
• Usa técnicas de lazy loading para cargar componentes bajo demanda.
• Optimiza el uso de plugins y módulos nativos.

Despliegue de la aplicación

Una vez que hemos terminado de escribir el código de nuestra aplicación, debemos hacer el despliege para que los usuarios puedan utilizarla. Este es un paso crítico, pues es el paso final y tenemos que aseguranros que seguimos los pasos correctos para evitar problemas de instalación y configuración.

Preparación para el despliegue

Antes de realizar el despliegue debemos optimizar y configurar nuestra aplicación, para ellos debemos seguir estos pasos:

• Optimización del código:

Asegúrate de que tu código está optimizado para producción. Minimiza los archivos JavaScript y CSS, para reducir el tamaño de los archivos y mejorar el rendimiento.

• Configuración de Tauri:

Revisa y actualiza la configuración en el archivo tauri.conf.json. Asegúrate de que el identificador de tu aplicación (identifier) es único y que todos los íconos y recursos están correctamente especificados.

   {
     "tauri": {
       "bundle": {
         "identifier": "com.aplicaciontauri.miapp",
         "icon": ["icons/icon.ico"],
         "windows": {
           "wix": {
             "language": "en-US"
           }
         }
       }
     }
   }

• Pruebas finales:

Ejecuta pruebas exhaustivas para asegurarte de que todas las funcionalidades de la aplicación funcionan correctamente. Usa herramientas de pruebas automatizadas y realiza pruebas manuales.

Es fundamental, para evitar la publicación en tiendas de aplicaciones con errores que puedan dar fallos al usuario final.

Empaquetado y distribución

El último paso es el empaquetado y la distribución, para ello debes seguir los siguientes pasos:

• Construcción de la Aplicación:

Una vez que tu aplicación esté lista para ser empaquetada, ejecuta el comando de construcción de Tauri:

npm run tauri build

Este comando compilará tu aplicación y generará un instalador en la carpeta src-tauri/target/release/bundle.

• Verificación del paquete: Revisa los archivos generados en el directorio de construcción para asegurarte de que el instalador y otros artefactos se han creado correctamente.

• Firma del código: Firma digitalmente tu aplicación para asegurar la integridad y autenticidad del código. Esto es importante para aplicaciones distribuidas fuera de las tiendas oficiales.

  Para firmar digitalmente tu aplicación Tauri en Windows, primero adquiere un certificado de firma de código de una CA confiable y expórtalo a un archivo .pfx. Instala el Windows SDK para obtener la herramienta signtool.

  Luego, firma tu instalador usando signtool, especificando el archivo .pfx y la contraseña. Finalmente, verifica la firma con signtool para asegurarte de que es válida. Esto garantiza la integridad y autenticidad de tu aplicación para los usuarios.

Publicación en Tiendas de Aplicaciones

Para la publicación de tu aplicación en la tienda de aplicaciones debes seguir los siguientes pasos:

• Preparación de los recursos: Prepara todos los recursos necesarios para la publicación, como capturas de pantalla, descripciones detalladas, y otros elementos gráficos que se requieran.

• Publicación en Microsoft Store: Sigue las directrices de la Microsoft Store para publicar tu aplicación. Esto incluye crear una cuenta de desarrollador, empaquetar tu aplicación en formato MSIX, y subirla a la tienda.

• Publicación en otras tiendas: Si planeas publicar en otras tiendas de aplicaciones, asegúrate de seguir sus requisitos específicos. Cada tienda puede tener sus propias guías y herramientas para la publicación.

Conclusiones

Desarrollar aplicaciones de escritorio con Tauri ofrece una experiencia flexible, combinando lo mejor de las tecnologías web con el rendimiento y las capacidades nativas de un lenguaje de Backend como es Rust.

Tauri es muy modular, separando perfectamente la lógica del frontal de la aplicación, además es compatible con un elevado número de frameworks de js, por lo que si tienes conocimientos en alguno de ellos, la experiencia de desarrollo será más satisfactoria.

Por otro lado, Tauri es mucho más liviano que alternativas como Electron, ya que mientras que este integra un navegador completo, Tauri utiliza un webView, lo que redunda en un mayor eficiencia y velocidad.