Creación de pequeñas aplicaciones de escritorio con Tauri y Vue.js

 

 

 

  • SmashingConf UX y diseño, Amberes 2024
  • Listas de verificación de diseño de interfaz inteligente

  • Índice
    1. ¿Qué es Tauri?
  • ¿Por qué no el electrón?
  • Más características de Tauri
  • Ventajas de Tauri
  • Tauri del mundo real
  • Cómo funciona Tauri
  • Cómo se crean las aplicaciones Tauri
  • Configurando su entorno
    1. Configuración de Linux
  • Hilo
  • Integrando Tauri con Vue.js
    1. vue-cli-plugin-tauri
  • paquete.json
    1. src-tauri
  • agrupación
  • Ir multiplataforma
  • Creando el flujo de trabajo de Tauri
  • Conclusión
  • Tauri es una cadena de herramientas para crear aplicaciones de escritorio pequeñas, rápidas y seguras a partir de HTML, CSS y JavaScript existentes. En este artículo, Kelvin explica cómo Tauri juega bien con el marco progresivo Vue.js al integrar ambas tecnologías al agrupar una aplicación web de ejemplo llamada nota como una aplicación nativa.

     

    La tecnología mejora nuestras vidas, no sólo de los usuarios, sino también de los creadores (desarrolladores y diseñadores). En este artículo, te presentaré a Tauri. Este artículo te será útil si:

    • ha estado creando aplicaciones en la web con HTML, CSS y JavaScript y desea utilizar las mismas tecnologías para crear aplicaciones destinadas a plataformas Windows, macOS o Linux;
    • ya está creando aplicaciones de escritorio multiplataforma con tecnologías como Electron y desea probar alternativas;
    • desea crear aplicaciones con tecnologías web para distribuciones de Linux, como PureOS;
    • Eres un entusiasta de Rust y te gustaría aplicarlo para crear aplicaciones nativas multiplataforma.

    Veremos cómo crear una aplicación multiplataforma nativa a partir de un proyecto web existente. ¡Hagámoslo!

     

    Nota : este artículo asume que se siente cómodo con HTML, CSS, JavaScript y Vue.js.

    ¿Qué es Tauri?

    El sitio web oficial resume bien a Tauri:

    • Tauri es una cadena de herramientas políglota para crear aplicaciones nativas más seguras con binarios pequeños y rápidos. Por "políglota", me refiero a que Tauri utiliza múltiples lenguajes de programación. Actualmente se utilizan Rust, JavaScript y TypeScript. Pero hay planes para permitirle usar Go, C++, Python y más.
    • Le permite utilizar cualquier marco de interfaz de usuario basado en HTML y JavaScript, como Vue.js, React o Angular, para crear una aplicación de escritorio nativa y se puede integrar en cualquier canal.
    • Le ayuda a crear y agrupar archivos binarios para las principales plataformas de escritorio (próximamente móviles y WebAssembly).

    Básicamente, Tauri le permite utilizar tecnologías web para crear aplicaciones de escritorio nativas pequeñas y seguras.

    En su página de GitHub , Tauri se describe como una cadena de herramientas independiente del marco para crear aplicaciones nativas altamente seguras que tienen binarios pequeños (es decir, tamaño de archivo) y que son muy rápidas (es decir, uso mínimo de RAM).

    ¿Por qué no el electrón?

    Una herramienta popular para utilizar tecnologías web para crear aplicaciones de escritorio es Electron.

    Sin embargo, las aplicaciones de Electron tienen un tamaño de paquete bastante grande y tienden a ocupar mucha memoria cuando se ejecutan. Así es como se compara Tauri con Electron:

    • Paquete
      El tamaño de una aplicación Tauri puede ser inferior a 600 KB.
    • Memoria
      La huella de una aplicación Tauri es menos de la mitad del tamaño de una aplicación Electron.
    • La renovación de licencia
      es posible con Tauri, pero no con Electron. Electron se envía con Chromium nada más sacarlo de la caja. Sin embargo, Chromium incluye un sistema de gestión de derechos digitales llamado Widevine . La inclusión de Widevine en Chromium hace que las aplicaciones creadas con Electron sean mal vistas por los usuarios de plataformas como PureOS por la única razón de que no es software libre de código abierto (FLOSS). Plataformas como PureOS están verificadas por la Free Software Foundation (FSF). Esto significa que sólo pueden publicar software gratuito y de código abierto en sus tiendas de aplicaciones.

    En pocas palabras, si su aplicación está creada con Electron, nunca se enviará oficialmente en la tienda PureOS. Esto debería ser una preocupación para los desarrolladores que apuntan a este tipo de distribuciones .

     

    Más características de Tauri

    • La seguridad es realmente importante para el equipo Tauri. Las aplicaciones creadas con Tauri deben ser seguras desde el principio.
    • Tauri es compatible con cualquier marco de front-end, por lo que no es necesario cambiar su pila.
    • Tiene muchos patrones de diseño para ayudarlo a elegir funciones importantes con configuraciones simples.

    Ventajas de Tauri

    • Tauri le permite tomar el código base que ha creado para la web y convertirlo en una aplicación de escritorio nativa, sin cambiar nada.
    • Aunque puedes usar Rust en un proyecto basado en Tauri, es completamente opcional. Si lo hiciera, no necesitaría cambiar nada en su código base original destinado a la web.

    Tauri del mundo real

    Si ha sido parte de la comunidad Vue.js por un tiempo, habrá oído hablar de Guillaume Chau , miembro del equipo central de Vue.js. Es responsable de la interfaz de línea de comandos (CLI) de Vue.js, así como de otras increíbles bibliotecas de Vue.js. Recientemente creó guijs , que significa "interfaz gráfica de usuario para proyectos JavaScript". Es una aplicación de escritorio nativa impulsada por Tauri para administrar visualmente sus proyectos de JavaScript.

    Guijs es un ejemplo de lo que es posible con Tauri, y el hecho de que un miembro central del equipo de Vue.js trabaje en la aplicación nos dice que Tauri funciona muy bien con Vue.js (entre otros marcos de front-end). Consulte el repositorio de guijs en GitHub si está interesado. Y sí, es de código abierto.

    Cómo funciona Tauri

    En un nivel alto, Tauri usa Node.js para estructurar una ventana de representación HTML, CSS y JavaScript como una interfaz de usuario (UI), administrada y arrancada por Rust . El producto es un binario monolítico que se puede distribuir como tipos de archivos comunes para Linux (deb/appimage), macOS (app/dmg) y Windows (exe/msi).

    Cómo se crean las aplicaciones Tauri

    Una aplicación Tauri se crea mediante los siguientes pasos:

    1. Primero, cree una interfaz en su marco GUI y prepare HTML, CSS y JavaScript para su consumo.
    2. La CLI de Tauri Node.js lo toma y configura el corredor Rust de acuerdo con su configuración.
    3. En modo de desarrollo, crea una ventana WebView, con depuración y recarga de módulo en caliente .
    4. En el modo de compilación, configura el paquete y crea una aplicación final de acuerdo con su configuración.

    Configurando su entorno

    Ahora que sabes qué es Tauri y cómo funciona, déjame guiarte en la configuración de tu máquina para el desarrollo con Tauri.

    Nota : La configuración aquí es para máquinas Linux, pero también hay guías disponibles para macOS y Windows .

     

    Configuración de Linux

    La naturaleza políglota de Tauri significa que requiere una serie de dependencias de herramientas. Comencemos instalando algunas de las dependencias. Ejecute lo siguiente:

    $ sudo apt update sudo apt install libwebkit2gtk-4.0-dev build-essential curl libssl-dev appmenu-gtk3-module

    Una vez que lo anterior sea exitoso, procede a instalar Node.js (si aún no lo tienes), porque Tauri requiere su tiempo de ejecución. Puedes hacerlo ejecutando esto:

    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash

    Esto instalará nvm (administrador de versiones de Node.js), que le permite administrar fácilmente el tiempo de ejecución de Node.js y cambiar fácilmente entre versiones de Node.js. Una vez instalado, ejecute esto para ver una lista de versiones de Node.js:

    nvm ls-remote

    Al momento de escribir este artículo, la versión más reciente es 14.1.0. Instálalo así:

    nvm install v14.1.0

    Una vez que Node.js esté completamente configurado, deberá instalar el compilador de Rust y el administrador de paquetes de Rust: Cargo. El siguiente comando instalaría ambos:

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

    Después de ejecutar este comando, asegúrese de que Cargo y Rust estén en su $PATHejecutando lo siguiente:

    rust --version

    Si todo ha ido bien, esto debería devolver un número de versión.

    Según la documentación de Tauri, asegúrese de tener la última versión ejecutando el siguiente comando:

    $ rustup update stable

    ¡Voilá! Estás un paso más cerca de tener tu máquina 100% lista para Tauri. Todo lo que queda ahora es instalar la tauri-bundlercaja. Es mejor salir de su CLI y ejecutar el siguiente comando en una nueva ventana CLI:

    $ cargo install tauri-bundler --force

    ¡Eureka! Si todo ha ido bien, tu máquina ya está lista para Tauri. A continuación, comenzaremos a integrar Tauri con Vue.js. ¡Hagámoslo!

    Hilo

    El equipo de Tauri recomienda instalar el administrador de paquetes Yarn . Así que instalémoslo de esta manera: Mejores pianos digitales

    npm install -g yarn

    Luego ejecute lo siguiente:

    yarn --version

    Si todo funcionó, se debería haber devuelto un número de versión.

    Integrando Tauri con Vue.js

    Ahora que tenemos Tauri instalado, empaquetemos un proyecto web existente. Puede encontrar la demostración en vivo del proyecto en Netlify . Continúe y bifurque el repositorio , que servirá como shell. Después de bifurcarlo, asegúrese de clonarlo ejecutando esto:

    git clone https://github.com/[yourUserName]/nota-web

    Después de clonar el proyecto, ejecute lo siguiente para instalar las dependencias:

    yarn

    Luego, ejecuta esto:

    yarn serve

    Su aplicación debería estar ejecutándose en localhost:8080. Elimine el servidor en ejecución e instalemos el complemento CLI de Vue.js para Tauri.

    vue-cli-plugin-tauri

    El equipo de Tauri creó un complemento CLI de Vue.js que rápidamente configura y convierte su aplicación de una sola página (SPA) de Vue.js en una pequeña aplicación de escritorio multiplataforma que es rápida y segura. Instalemos ese complemento:

     

    vue add tauri

    Una vez instalado el complemento, lo que puede tardar un poco, le pedirá un título de ventana. Simplemente escribe notay presiona “Entrar”.

    Examinemos los cambios introducidos por el complemento Tauri.

    paquete.json

    El complemento Tauri agregó dos scripts en la sección de scripts de nuestro package.jsonarchivo. Ellos son:

    "tauri:build": "vue-cli-service tauri:build","tauri:serve": "vue-cli-service tauri:serve"

    El tauri:servescript debe usarse durante el desarrollo. Así que ejecutémoslo:

    yarn tauri:serve

    Lo anterior descargaría las cajas Rust necesarias para iniciar nuestra aplicación. Después de eso, iniciará nuestra aplicación en modo de desarrollo , donde creará una ventana WebView, con depuración y recarga de módulo en caliente .

    src-tauri

    También notarás que el complemento agregó un src-tauridirectorio a la raíz del directorio de tu aplicación. Dentro de este directorio se encuentran los archivos y carpetas que utiliza Tauri para configurar su aplicación de escritorio. Veamos el contenido:

    icons/src/ build.rs cmd.rs main.rsCargo.lockCargo.tomlrustfmt.tomltauri.conf.jsontauri.js

    El único cambio que necesitaríamos hacer es en src-tauri/Cargo.toml. Cargo.tomles como el package.jsonarchivo de Rust. Encuentra la siguiente línea en Cargo.toml:

    name = "app"

    Cámbielo a esto:

    name = "nota"

    ¡Eso es todo lo que necesitamos cambiar para este ejemplo!

    agrupación

    Para agrupar notasu plataforma actual, simplemente ejecute esto:

    yarn tauri:build

    Nota : Al igual que con la ventana de desarrollo, la primera vez que ejecute esto, le llevará algún tiempo recolectar las cajas de Rust y construir todo. En ejecuciones posteriores, solo será necesario reconstruir las cajas Tauri.

    Cuando se complete lo anterior, debería tener un binario de notapara su sistema operativo actual. Para mí, tengo un .debbinario creado en el src-tauri/target/release/bundle/deb/directorio.*

    Ir multiplataforma

    Probablemente hayas notado que el yarn tauri:buildcomando acaba de generar un binario para tu sistema operativo. Entonces, generemos los binarios para otros sistemas operativos. Para lograr esto, configuraremos un flujo de trabajo en GitHub. Estamos utilizando GitHub aquí para que sirva como medio de distribución para nuestra aplicación multiplataforma. Entonces, sus usuarios podrían simplemente descargar los binarios en la pestaña "Versión" del proyecto. El flujo de trabajo que implementaríamos construiría automáticamente nuestros archivos binarios mediante el poder de las acciones de GitHub . Hagámoslo.

    Creando el flujo de trabajo de Tauri

    Gracias a Jacob Bolda , tenemos un flujo de trabajo para crear y lanzar automáticamente aplicaciones multiplataforma con Tauri en GitHub. Además de crear el binario para las distintas plataformas (Linux, Mac y Windows), la acción también cargaría el binario como una versión en GitHub. También utiliza la acción Crear una versión realizada por Jacob para lograrlo.

     

    Para utilizar este flujo de trabajo, cree un .githubdirectorio en la raíz de nota-web. En este directorio, cree otro directorio llamado workflows. Luego crearíamos un archivo de flujo de trabajo .github/workflows/y le asignaríamos el nombre release-tauri-app.yml.

    En release-tauri-app.yml, agregaríamos un flujo de trabajo que compila los archivos binarios para Linux, macOS y Windows. Este flujo de trabajo también cargaría los archivos binarios como versión preliminar en GitHub. El flujo de trabajo se activará cada vez que accedamos al maestro.

    Abra release-tauri-app.ymly agregue el siguiente fragmento:

    name: release-tauri-appon: push: branches: - master paths: - '**/package.json'jobs: check-build: runs-on: ubuntu-latest timeout-minutes: 30 steps: — uses: actions/checkout@v2 — name: setup node uses: actions/setup-node@v1 with: node-version: 12 — name: install rust stable uses: actions-rs/toolchain@v1 with: toolchain: stable profile: minimal — name: install webkit2gtk run: | sudo apt-get update sudo apt-get install -y webkit2gtk-4.0 — run: yarn — name: build nota for tauri app run: yarn build — run: cargo install tauri-bundler --force — name: build tauri app run: yarn tauri:build create-release: needs: check-build runs-on: ubuntu-latest outputs: RELEASE_UPLOAD_URL: ${{ steps.create_tauri_release.outputs.upload_url }} steps: — uses: actions/checkout@v2 — name: setup node uses: actions/setup-node@v1 with: node-version: 12 — name: get version run: echo ::set-env name=PACKAGE_VERSION::$(node -p "require('./package.json').version") — name: create release id: create_tauri_release uses: jbolda/[email protected] env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: tag_name: ${{ matrix.package.name }}-v${{ env.PACKAGE_VERSION }} release_name: 'Release nota app v${{ env.PACKAGE_VERSION }}' body: 'See the assets to download this version and install.' draft: true prerelease: false create-and-upload-assets: needs: create-release runs-on: ${{ matrix.platform }} timeout-minutes: 30 strategy: fail-fast: false matrix: platform: [ubuntu-latest, macos-latest, windows-latest] include: — platform: ubuntu-latest buildFolder: bundle/deb ext: _0.1.0_amd64.deb compressed: '' — platform: macos-latest buildFolder: bundle/osx ext: .app compressed: .tgz — platform: windows-latest buildFolder: '' ext: .x64.msi compressed: '' steps: — uses: actions/checkout@v2 — name: setup node uses: actions/setup-node@v1 with: node-version: 12 — name: install rust stable uses: actions-rs/toolchain@v1 with: toolchain: stable profile: minimal — name: install webkit2gtk (ubuntu only) if: matrix.platform == 'ubuntu-latest' run: | sudo apt-get update sudo apt-get install -y webkit2gtk-4.0 — run: yarn — name: build nota for tauri app run: yarn build — run: cargo install tauri-bundler --force — name: build tauri app run: yarn tauri:build — name: compress (macos only) if: matrix.platform == 'macos-latest' working-directory: ${{ format('./src-tauri/target/release/{0}', matrix.buildFolder ) }} run: tar -czf ${{ format('nota{0}{1}', matrix.ext, matrix.compressed ) }} ${{ format('nota{0}', matrix.ext ) }} — name: upload release asset id: upload-release-asset uses: actions/[email protected] env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: upload_url: ${{ needs.create-release.outputs.RELEASE_UPLOAD_URL }} asset_path: ${{ format('./src-tauri/target/release/{0}/nota{1}{2}', matrix.buildFolder, matrix.ext, matrix.compressed ) }} asset_name: ${{ format('nota{0}{1}', matrix.ext, matrix.compressed ) }} asset_content_type: application/zip — name: build tauri app in debug mode run: yarn tauri:build --debug — name: compress (macos only) if: matrix.platform == 'macos-latest' working-directory: ${{ format('./src-tauri/target/debug/{0}', matrix.buildFolder ) }} run: tar -czf ${{ format('nota{0}{1}', matrix.ext, matrix.compressed ) }} ${{ format('nota{0}', matrix.ext ) }} — name: upload release asset with debug mode on id: upload-release-asset-debug-mode uses: actions/[email protected] env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} with: upload_url: ${{ needs.create-release.outputs.RELEASE_UPLOAD_URL }} asset_path: ${{ format('./src-tauri/target/debug/{0}/nota{1}{2}', matrix.buildFolder, matrix.ext, matrix.compressed ) }} asset_name: ${{ format('nota-debug{0}{1}', matrix.ext, matrix.compressed ) }} asset_content_type: application/zip

    Para probar el flujo de trabajo, confirma y envía tus cambios a la rama de tu bifurcación master. Después de ingresar exitosamente a GitHub, puede hacer clic en la pestaña "Acciones" en GitHub, luego hacer clic en el enlace "Verificar compilación" para ver el progreso del flujo de trabajo.

     

    Tras la ejecución exitosa de la acción, podrá ver el borrador de la versión en "Lanzamientos" en la página del repositorio en GitHub. ¡Luego podrás continuar publicando tu lanzamiento!

    Conclusión

    Este artículo ha presentado una cadena de herramientas políglota para crear aplicaciones nativas pequeñas, seguras y multiplataforma. Hemos visto qué es Tauri y cómo incorporarlo con Vue.js. Por último, incluimos nuestra primera aplicación Tauri ejecutando yarn tauri:buildy también usamos una acción de GitHub para crear archivos binarios para Linux, macOS y Windows.

    Déjame saber qué piensas de Tauri. Me encantaría ver qué construyes con él. Puedes unirte al servidor de Discord si tienes alguna pregunta.

    El repositorio de este artículo está en GitHub. Consulte también los archivos binarios generados por el flujo de trabajo de GitHub .

    (ra, il, al)Explora más en

    • vista
    • javascript
    • Herramientas





    Tal vez te puede interesar:

    1. Creación de su propia biblioteca de validación de React: las características (Parte 2)
    2. Introducción a Quasar Framework: creación de aplicaciones multiplataforma
    3. Creación de un componente web retro que se puede arrastrar con iluminación
    4. Creación y acoplamiento de una aplicación Node.js con arquitectura sin estado con la ayuda de Kinsta

    Creación de pequeñas aplicaciones de escritorio con Tauri y Vue.js

    Creación de pequeñas aplicaciones de escritorio con Tauri y Vue.js

    SmashingConf UX y diseño, Amberes 2024 Listas de verificación de diseño de interfaz inteligente Índice

    programar

    es

    https://aprendeprogramando.es/static/images/programar-creacion-de-pequenas-aplicaciones-de-escritorio-con-tauri-y-vue-1044-0.jpg

    2024-05-21

     

    Creación de pequeñas aplicaciones de escritorio con Tauri y Vue.js
    Creación de pequeñas aplicaciones de escritorio con Tauri y Vue.js

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20