Criando aplicativos de desktop minúsculos com Tauri e Vue.js

Publicados: 2022-03-10
Resumo rápido ↬ Tauri é uma cadeia de ferramentas para criar aplicativos de desktop pequenos, rápidos e seguros a partir de seu HTML, CSS e JavaScript existente. Neste artigo, Kelvin explica como Tauri funciona bem com a estrutura progressiva Vue.js, integrando ambas as tecnologias no pacote de um aplicativo Web de exemplo chamado nota como um aplicativo nativo.

A tecnologia torna nossas vidas melhores, não apenas dos usuários, mas também dos criadores (desenvolvedores e designers). Neste artigo, vou apresentá-lo a Tauri. Este artigo será útil para você se:

  • você está criando aplicativos na Web com HTML, CSS e JavaScript e deseja usar as mesmas tecnologias para criar aplicativos direcionados às plataformas Windows, macOS ou Linux;
  • você já está criando aplicativos de desktop multiplataforma com tecnologias como Electron e deseja verificar alternativas;
  • você deseja criar aplicativos com tecnologias da Web para distribuições Linux, como PureOS;
  • você é um entusiasta do Rust e gostaria de aplicá-lo para criar aplicativos multiplataforma nativos.

Veremos como construir um aplicativo multiplataforma nativo a partir de um projeto da web existente. Vamos lá!

Observação : este artigo pressupõe que você esteja familiarizado com HTML, CSS, JavaScript e Vue.js.

Mais depois do salto! Continue lendo abaixo ↓

O que é Tauri?

O site oficial resume bem Tauri:

  • Tauri é uma cadeia de ferramentas poliglota para criar aplicativos nativos mais seguros com binários pequenos e rápidos. Por “poliglota”, quero dizer que Tauri usa várias linguagens de programação. No momento, Rust, JavaScript e TypeScript são usados. Mas há planos para permitir que você use Go, C++, Python e muito mais.
  • Ele permite que você use qualquer estrutura de front-end baseada em HTML e JavaScript, como Vue.js, React ou Angular, para criar um aplicativo de desktop nativo e pode ser integrado a qualquer pipeline.
  • Ele ajuda você a criar e agrupar binários para as principais plataformas de desktop (móvel e WebAssembly em breve).

Então, basicamente, o Tauri permite que você use tecnologias da web para criar aplicativos de desktop nativos pequenos e seguros.

Em sua página do GitHub, Tauri é descrito como uma cadeia de ferramentas independente de framework para construir aplicativos nativos altamente seguros que possuem binários minúsculos (ou seja, tamanho do arquivo) e que são muito rápidos (ou seja, uso mínimo de RAM).

Por que não elétron?

Uma ferramenta popular para usar tecnologias da Web para criar aplicativos de desktop é o Electron.

No entanto, os aplicativos Electron têm um tamanho de pacote bastante grande e tendem a ocupar muita memória durante a execução. Aqui está como Tauri se compara ao Electron:

  • Pacote
    O tamanho de um aplicativo Tauri pode ser inferior a 600 KB.
  • Memória
    A pegada de um aplicativo Tauri é menos da metade do tamanho de um aplicativo Electron.
  • Licença
    O relicenciamento é possível com o Tauri, mas não com o Electron. O Electron é fornecido com o Chromium imediatamente. No entanto, o Chromium inclui um sistema de gerenciamento de direitos digitais chamado Widevine. A inclusão do Widevine no Chromium torna os aplicativos criados com o Electron desaprovados pelos usuários de plataformas como PureOS pelo único motivo de não ser um software de código aberto gratuito (FLOSS). Plataformas como PureOS são verificadas pela Free Software Foundation (FSF). Isso significa que eles só podem publicar software gratuito e de código aberto em suas lojas de aplicativos.

Em poucas palavras, se seu aplicativo for construído com Electron, ele nunca será enviado oficialmente na loja PureOS. Esta deve ser uma preocupação para os desenvolvedores que visam essas distribuições.

Mais recursos do Tauri

  • A segurança é muito importante para a equipe Tauri. Os aplicativos criados com o Tauri devem ser seguros desde o início.
  • O Tauri é compatível com qualquer framework front-end, então você não precisa mudar sua pilha.
  • Ele tem muitos padrões de design para ajudá-lo a escolher recursos importantes com configurações simples.

Prós de Tauri

  • O Tauri permite que você pegue a base de código que você criou para a web e a transforme em um aplicativo de desktop nativo, sem alterar nada.
  • Embora você possa usar Rust em um projeto baseado em Tauri, é completamente opcional. Se o fizesse, você não precisaria alterar nada em sua base de código original direcionada para a web.

Tauri do mundo real

Se você faz parte da comunidade Vue.js há algum tempo, já deve ter ouvido falar de Guillaume Chau, membro da equipe principal do Vue.js. Ele é responsável pela interface de linha de comando (CLI) do Vue.js, bem como por outras bibliotecas incríveis do Vue.js. Ele recentemente criou o guijs, que significa “interface gráfica do usuário para projetos JavaScript”. É um aplicativo de desktop nativo com tecnologia Tauri para gerenciar visualmente seus projetos JavaScript.

Guijs é um exemplo do que é possível com o Tauri, e o fato de um membro central da equipe Vue.js trabalhar no aplicativo nos diz que Tauri funciona bem com o Vue.js (entre outros frameworks de front-end). Confira o repositório guijs no GitHub se estiver interessado. E, sim, é de código aberto.

Como funciona o Tauri

Em um alto nível, Tauri usa Node.js para estruturar uma janela de renderização de HTML, CSS e JavaScript como uma interface de usuário (UI), gerenciada e inicializada pelo Rust. O produto é um binário monolítico que pode ser distribuído como tipos de arquivos comuns para Linux (deb/appimage), macOS (app/dmg) e Windows (exe/msi).

Como os aplicativos Tauri são feitos

Um aplicativo Tauri é criado através das seguintes etapas:

  1. Primeiro, crie uma interface em sua estrutura de GUI e prepare o HTML, CSS e JavaScript para consumo.
  2. A CLI do Tauri Node.js pega e monta o executor Rust de acordo com sua configuração.
  3. No modo de desenvolvimento, cria uma janela WebView, com depuração e Hot Module Reloading .
  4. No modo de construção, ele manipula o bundler e cria um aplicativo final de acordo com suas configurações.

Configurando seu ambiente

Agora que você sabe o que é o Tauri e como ele funciona, deixe-me orientá-lo na configuração de sua máquina para desenvolvimento com o Tauri.

Nota : A configuração aqui é para máquinas Linux, mas guias para macOS e Windows também estão disponíveis.

Configuração do Linux

A natureza poliglota do Tauri significa que ele requer várias dependências de ferramentas. Vamos começar instalando algumas das dependências. Execute o seguinte:

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

Assim que o procedimento acima for bem-sucedido, prossiga com a instalação do Node.js (se você ainda não o tiver), porque o Tauri requer seu tempo de execução. Você pode fazer isso executando isto:

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

Isso instalará o nvm (gerenciador de versão do Node.js), que permite gerenciar facilmente o tempo de execução do Node.js e alternar facilmente entre as versões do Node.js. Depois de instalado, execute-o para ver uma lista de versões do Node.js:

 nvm ls-remote

No momento da escrita, a versão mais recente é 14.1.0. Instale assim:

 nvm install v14.1.0

Depois que o Node.js estiver totalmente configurado, você precisará instalar o compilador Rust e o gerenciador de pacotes Rust: Cargo. O comando abaixo instalaria ambos:

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

Depois de executar este comando, certifique-se de que Cargo e Rust estejam em seu $PATH executando o seguinte:

 rust --version

Se tudo correu bem, isso deve retornar um número de versão.

De acordo com a documentação do Tauri, verifique se você está na versão mais recente executando o seguinte comando:

 $ rustup update stable

Voilá! Você está a um passo de deixar sua máquina 100% pronta para a Tauri. Tudo o que resta agora é instalar o engradado tauri-bundler . É melhor sair da CLI e executar o comando abaixo em uma nova janela da CLI:

 $ cargo install tauri-bundler --force

Eureca! Se tudo deu certo, sua máquina agora está pronta para Tauri. A seguir, começaremos a integrar o Tauri com o Vue.js. Vamos lá!

Fio

A equipe Tauri recomenda instalar o gerenciador de pacotes Yarn. Então vamos instalar assim:

 npm install -g yarn

Em seguida, execute o seguinte:

 yarn --version

Se tudo funcionou, um número de versão deve ter sido retornado.

Integrando Tauri com Vue.js

Agora que temos o Tauri instalado, vamos agrupar um projeto web existente. Você pode encontrar a demonstração ao vivo do projeto no Netlify. Vá em frente e faça um fork do repositório, que servirá como um shell. Depois de bifurcá-lo, certifique-se de clonar o fork executando isto:

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

Após clonar o projeto, execute o seguinte para instalar as dependências:

 yarn

Então, execute isso:

 yarn serve

Seu aplicativo deve estar sendo executado em localhost:8080 . Mate o servidor em execução e vamos instalar o plugin Vue.js CLI para Tauri.

vue-cli-plugin-tauri

A equipe da Tauri criou um plugin Vue.js CLI que rapidamente manipula e transforma seu aplicativo de página única (SPA) Vue.js em um pequeno aplicativo de desktop multiplataforma que é rápido e seguro. Vamos instalar esse plugin:

 vue add tauri

Depois que o plug-in for instalado, o que pode demorar um pouco, ele solicitará um título de janela. Basta digitar a nota e pressionar “Enter”.

Vamos examinar as mudanças introduzidas pelo plugin Tauri.

pacote.json

O plugin Tauri adicionou dois scripts na seção de scripts do nosso arquivo package.json . Eles estão:

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

O script tauri:serve deve ser usado durante o desenvolvimento. Então vamos executá-lo:

 yarn tauri:serve

O acima faria o download das caixas de ferrugem necessárias para iniciar nosso aplicativo. Depois disso, ele iniciará nosso aplicativo em modo de desenvolvimento , onde criará uma janela WebView, com depuração e Recarregamento de módulo a quente !

src-tauri

Você também notará que o plug-in adicionou um diretório src-tauri à raiz do diretório do seu aplicativo. Dentro desse diretório estão os arquivos e pastas usados ​​pelo Tauri para configurar seu aplicativo de desktop. Vamos conferir o conteúdo:

 icons/ src/ build.rs cmd.rs main.rs Cargo.lock Cargo.toml rustfmt.toml tauri.conf.json tauri.js

A única mudança que precisaríamos fazer é em src-tauri/Cargo.toml . Cargo.toml é como o arquivo package.json para Rust. Encontre a linha abaixo em Cargo.toml :

 name = "app"

Altere para isso:

 name = "nota"

Isso é tudo que precisamos mudar para este exemplo!

Agrupamento

Para agrupar nota para sua plataforma atual, basta executar isto:

 yarn tauri:build

Nota : Assim como na janela de desenvolvimento, na primeira vez que você executar isso, levará algum tempo para coletar as caixas Rust e construir tudo. Nas execuções subsequentes, ele só precisará reconstruir as próprias caixas Tauri.

Quando o acima estiver concluído, você deverá ter um binário de nota para o seu sistema operacional atual. Para mim, eu tenho um binário .deb criado no diretório src-tauri/target/release/bundle/deb/

Tornando-se multiplataforma

Você provavelmente notou que o comando yarn tauri:build acabou de gerar um binário para o seu sistema operacional. Então, vamos gerar os binários para outros sistemas operacionais. Para conseguir isso, vamos configurar um fluxo de trabalho no GitHub. Estamos usando o GitHub aqui para servir como meio de distribuição para nosso aplicativo multiplataforma. Assim, seus usuários podem simplesmente baixar os binários na aba “Release” do projeto. O fluxo de trabalho que implementaríamos criaria automaticamente nossos binários por meio do poder das ações do GitHub. Vamos lá.

Criando o fluxo de trabalho Tauri

Graças a Jacob Bolda, temos um fluxo de trabalho para criar e lançar automaticamente aplicativos multiplataforma com Tauri no GitHub. Além de construir o binário para as várias plataformas (Linux, Mac e Windows), a ação também faria o upload do binário para você como uma versão no GitHub. Ele também usa a ação Criar uma Liberação feita por Jacob para conseguir isso.

Para usar esse fluxo de trabalho, crie um diretório .github na raiz de nota-web . Nesse diretório, crie outro diretório chamado workflows . Em seguida, criaríamos um arquivo de fluxo de trabalho em .github/workflows/ e o release-tauri-app.yml .

Em release-tauri-app.yml , adicionaríamos um fluxo de trabalho que cria os binários para Linux, macOS e Windows. Esse fluxo de trabalho também carregaria os binários como uma versão de rascunho no GitHub. O fluxo de trabalho seria acionado sempre que enviamos para o mestre.

Abra release-tauri-app.yml e adicione o snippet abaixo:

 name: release-tauri-app on: 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 testar o fluxo de trabalho, confirme e envie suas alterações para o branch master do fork. Depois de enviar com sucesso para o GitHub, você pode clicar na guia "Ações" no GitHub e clicar no link "Verificar compilação" para ver o progresso do fluxo de trabalho.

Após a execução bem-sucedida da ação, você pode ver o rascunho da versão em “Releases” na página do repositório no GitHub. Você pode então publicar seu lançamento!

Conclusão

Este artigo introduziu uma cadeia de ferramentas poliglota para criar aplicativos nativos seguros, multiplataforma e minúsculos. Vimos o que é Tauri e como incorporá-lo ao Vue.js. Por fim, agrupamos nosso primeiro aplicativo Tauri executando yarn tauri:build e também usamos uma ação do GitHub para criar binários para Linux, macOS e Windows.

Deixe-me saber o que você acha de Tauri – eu ficaria animado para ver o que você constrói com ele. Você pode entrar no servidor Discord se tiver alguma dúvida.

O repositório deste artigo está no GitHub. Além disso, veja os binários gerados pelo fluxo de trabalho do GitHub.