![Astro.js: Un nuevo paradigma en Desarrollo Web](https://cdn.openwebinars.net/media/featured_images/astro-js.webp)
Astro.js: Un nuevo paradigma en Desarrollo Web
Astro.js no es solo una nueva herramienta más para el Desarrollo Web, es un cambio de juego que viene a redefinir la...
![](https://cdn.openwebinars.net/media/cache/f4/a3/f4a368f46d0be46cc4ae272d92bab4b6.webp)
Las aplicaciones con Tauri pueden ser hasta un 90% más pequeñas que con otras plataformas. Si quieres comenzar a usar esta herramienta, a lo largo de este tutorial aprenderás a desarrollar una aplicación de escritorio con Tauri, que te ayudará a optimizar el rendimiento y la seguridad de tus proyectos.
El desarrollo de aplicaciones de escritorio ha evolucionado significativamente en los últimos años, surgiendo diferentes alternativas como Electron o PHP Native.
Una de las últimas plataformas en llegar ha sido Tauri, basada en el lenguaje de programación Rust, una herramienta moderna, y eficiente para crear aplicaciones de escritorio utilizando tecnologías web.
De esta forma, los desarrolladores pueden aprovechar sus conocimientos en HTML, CSS y JavaScript para construir aplicaciones de escritorio nativas.
En este artículo, te contamos cómo configurar un entorno de desarrollo con Tauri, crear y estructurar un proyecto, integrar funcionalidades nativas, así como los pasos que debes seguir para desplegar y publicar el proyecto.
Antes de comenzar con Tauri, asegúrate de que tu equipo cumpla con los siguientes requisitos:
npm install -g @tauri-apps/cli
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
npm install -g @tauri-apps/cli
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
npm install -g @tauri-apps/cli
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
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.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.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.
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:
Consultando la documentación oficial de Tauri encontrarás más detalles y ejemplos específicos para cada framework.
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:
npm install @tauri-apps/api
import { Notification } from '@tauri-apps/api';
Notification.requestPermission().then(permission => {
if (permission === 'granted') {
new Notification('Hello', { body: 'Hello from Tauri!' });
}
});
<!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>
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:
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");
}
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.
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:
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");
}
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');
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:
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");
}
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!');
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:
tauri-plugin-store
a tu proyectoLo 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"
tauri.conf.json
para incluir el plugin.
{
"plugins": {
"store": {}
}
}
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"
})();
Puedes llamar a las funciones saveData
y loadData
desde cualquier parte de tu aplicación para almacenar y recuperar datos locales.
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:
npm install --save-dev jest
sum.test.js
):
function sum(a, b) {
return a + b;
}
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});
npx jest
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);
}
}
cargo test
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
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.
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.
Antes de realizar el despliegue debemos optimizar y configurar nuestra aplicación, para ellos debemos seguir estos pasos:
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.
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"
}
}
}
}
}
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.
El último paso es el empaquetado y la distribución, para ello debes seguir los siguientes pasos:
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.
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.
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.
También te puede interesar
Astro.js no es solo una nueva herramienta más para el Desarrollo Web, es un cambio de juego que viene a redefinir la...
Imagina poder crear aplicaciones de escritorio rápidas, seguras y eficientes utilizando tus habilidades como desarrollador web. Con Tauri, es posible. En este...