La idea principal de este artículo es mostrarle cómo puede aprovechar Tauri y algunas de sus API para desarrollar aplicaciones de escritorio con FileSystem (fs) en particular.
Requerimientos
Este tutorial asume que el usuario tiene una comprensión básica de la programación de Reactand como un todo.
Tauri API
- Lista de APIs de Tauri La API fs nos brinda algunas funcionalidades comunes (crear, leer y escribir archivos y crear carpetas) que podemos importar y usar. Esto será útil especialmente si no quiere ensuciarse las manos con Rust y ahorrarnos mucho tiempo.
Esta es la lista de funcionalidades de nuestra aplicacion:
- Los usuarios podrán crear notas.
- Al crear notas, debemos proporcionarles la opción de diálogo Guardar nativa para especificar dónde quieren que se guarde su nota.
- Cree el archivo de notas en la ubicación deseada y permítales agregar su contenido.
- Una vez que se ha creado la nota, la guardaremos en el localstorage de modo que podamos realizar un seguimiento de nuestras notas independientemente de dónde estén almacenadas en nuestra computadora.
- Leer el contenido de una nota guardada en la computadora del usuario
- Cuando un usuario elimina una nota, elimina el archivo
Como puedes ver, veremos cómo podemos interactuar con el sistema de archivos para crear, leer y eliminar archivos usando Tauri. También hablaremos sobre cómo Tauri implementa allow list para permitir solo ciertas características de una API.
Configurando Tauri
Hay un par de herramientas que necesitará para poner en marcha este desarrollo y, afortunadamente, el sitio web oficial de Tauri nos tiene cubiertos. instale todas las dependencias necesarias de tu plataforma apropiada como se especifica en la documentación.
Una vez que haya terminado, es posible que deba reiniciar su bash para que Rust pueda agregarse a las variables ambientales, pero la forma más fácil es reiniciar su computadora.
Ahora, podemos proceder a crear un proyecto Tauri. Crearé el proyecto usando hilo, pero puede usar el administrador de paquetes de su preferencia como se especifica aquí.
https://tauri.app/v1/guides/getting-started/setup/
Para crear el proyecto Tauri, escriba el siguiente código en su terminal:
npm create tauri-app@latest
Estas son las configuraciones
✔ Project name · tauri-react-tasks
✔ Choose which language to use for your frontend · TypeScript / JavaScript - (pnpm, yarn, npm)
✔ Choose your package manager · npm
✔ Choose your UI template · React - (https://reactjs.org/)
✔ Choose your UI flavor · TypeScript
No olvides entrar en el proyecto y ejecutar npm install
finalmente ejecutar
npm run tauri dev
Por cierto tambien hay una extension dedicada a Tauri para Visual Studio Code que el proyecto te sugerirá instalar, ademas de Rust Analyzer
Si todo va bien, debería ver la aplicación compilada como se ve en la imagen a continuación:
Ahora, lo único que queda es descargar tres íconos y ponerlos en /src/assets.
Ahora también podemos modificar nuestro /src-tauri/tauri.conf.json. Por defecto, el archivo viene como se muestra a continuación:
"allowlist": {
"all": false,
"shell": {
"all": false,
"open": true
},
"dialog": {
"save": true
},
"fs": {
"readFile": true,
"removeFile": true,
"writeFile": true,
"scope": ["$DOCUMENT/*", "$DESKTOP/*"]
}
},
Entonces, desde el primer momento, podemos ver que solo le estamos dando acceso a nuestra aplicación a las carpetas Documento y Escritorio, y si el usuario intenta guardar notas fuera de este alcance, no se lo permitirá.