Introdução

Ao criar aplicativos, é ótimo ter opções de reutilização em diferentes plataformas. Electron oferece uma maneira para os desenvolvedores da web ampliarem suas habilidades enquanto trabalham em aplicativos de plataforma cruzada para desktop. Svelte é uma estrutura que recentemente provou ser aplicável em diferentes ambientes.

Neste artigo, trabalharemos com Svelte e Electron para construir um aplicativo de recarga de recarga móvel. A experiência anterior com JavaScript e Svelte será útil para entender esta postagem.

Pré-requisitos

Estas são as ferramentas que você deve ter em sua máquina:

• Nó : um ambiente de execução JavaScript de back-end que é executado no mecanismo V8 e executa código JavaScript fora de um navegador da web
• npm : um gerenciador de pacotes para Node

Primeiros passos com Svelte

Para começar, iniciaremos um projeto Svelte, pois ele servirá como a interface onde faremos a maioria de nossas alterações.

Em seu terminal, use o comando npx degit svelte/template para criar seu novo projeto Svelte:

//Adicione o nome do seu projeto preferido ao comando: npx degit sveltejs/template reloadly-app-svelte //Ao concluir, navegue até o aplicativo recém-criado: cd reloadly-app-svelte //Em seguida, instale as dependências necessárias: npm install

Neste estágio, seu projeto Svelte deve ter uma estrutura de pastas semelhante a esta:

Depois de instalar o Svelte, o próximo passo é instalar o Electron. Navegue até o seu terminal e em seu projeto Svelte recém-criado, instale o Electron usando npm :

 npm install electron--save-dev

Quando terminar, crie um arquivo index.js em seu projeto Svelte e, neste arquivo, indique a janela da área de trabalho que será aberta sempre que seu aplicativo Electron for iniciado:

//index.js const {app, BrowserWindow}=require ("elétron");
const path=require ("path");
app.on ("pronto", ()=> { const mainWindow=new BrowserWindow (); mainWindow.loadFile (path.join (__ dirname,"public/index.html")); mainWindow.webContents.openDevTools ();
});

O que resta para o seu aplicativo entrar no ar são algumas configurações:

• Tornando index.js o ponto de entrada para seu aplicativo
• Configurar Rollup (um empacotador de módulo instalado quando você criou seu projeto Svelte) para controlar o processo de compilação de seu aplicativo
• Configurando o Electron para iniciar seu aplicativo

Para conseguir isso, edite seu arquivo package.json para incluir o exemplo de código abaixo:

 { ... "main":"index.js" "scripts": { "build":"rollup-c", "dev":"rollup-c-w", "start":"elétron.", }
}

Antes de ir ao ar, verifique se o seguinte foi verificado:

• Em index.js , o caminho da janela principal é public/index.html
• Em public/index.html , a folha de estilo e os links de script são global.css , build/bundle.css e build/bundle.js

Depois de verificar isso, você pode iniciar seu aplicativo executando o comando npm run dev em seu terminal. Seu aplicativo deve ser iniciado com esta interface:

Obtendo e protegendo seu token de acesso

Uma parte importante do aplicativo de recarga de recarga móvel que você está construindo consiste em fazer solicitações HTTP no Svelte e exibir suas respostas em seu aplicativo Electron. Para a API, Reloadly é uma opção viável, pois fornece pontos de extremidade para fazer recargas para números de celular.

Para fazer solicitações HTTP seguras à API do Reloadly, você precisará de credenciais de cliente e um token de acesso. As credenciais podem ser acessadas no painel do Reloadly e, em seguida, usadas para fazer uma solicitação POST para um token de acesso. Existem muitas opções para usar ao fazer esta solicitação, mas Reqbin é preferível por ser minimalista:

O que está acontecendo na imagem acima?

• Uma solicitação POST foi feita para este URL: https://auth.reloadly.com/oauth/token
• O corpo desta solicitação tem as credenciais do cliente ( client-id e client-secret ), grant-type e público como parâmetros
• A resposta desta solicitação contém o token de acesso, suas permissões e quanto tempo deve durar antes de expirar (em segundos)

Para proteger seu token de acesso, você precisa armazená-lo em um ambiente separado de sua base de código. Isso pode ser feito salvando-o em um arquivo .env e, em seguida, instalando dotenv para vincular isso arquivo em sua base de código sem expor seu token de acesso.

Primeiro, crie o arquivo .env em seu projeto Svelte e salve seu token de acesso:

/.env Access_token=portador eyJraWQiOiIwMDA1YzFmMC0xMjQ3LTRmNmUtYjU2ZC1jM2ZkZDVmMzhhOTIiLCJ0eXAiOiJKV1QiLCJ5jZSByZWFkLXByZXBhaWQtY29tbWlzc2lvbnMiLCJleHAiOjE2MjE3Njc1NzQsImh0dHBzOi8vcmVsb2FkbHkuY29tL2p0aSI6ImZmYjgyMGEyLTE1MmEtNGYhbGciOiJIUzI1NiJ9.eyJzdWIiOiI2ODkzIiwiaXNzIjoiaHR0cHM6Ly9yZWxvYWRseS5hdXRoMC5jb20vIiwiaHR0cHM6Ly9yZWxvYWRseS5jb20vc2FuZGJveCI6ZmFsc2UsImh0dHBzOi8vcmVsb2FkbHkuY29tL3ByZXBhaWRVc2VIiwiYXVkIjoiaHR0cHM6Ly90b3B1cHMtaHMyNTYucmODkzIiwiZ3R5IjoiY2xpZW50LWNyZWRlbnRpYWxzGY4ZSIsImlhdCI6MTYxNjU4MzU3NCwianRpIjoiYjVhOTMyNGUtODFiOC00OGIyLWI5MWMtYzZVsb2FkbHkuY29tIiwibmJmIjoxNjE2NTgzNTc0LCJhenAiOiI2ODkzIiwic2NvcGUiOiJzZW5kLXRvcHVwcyByZWFkLW9wZXJhdG9ycyByZWFkLXByb21vdGlvbnMgcmVhZC10b3B1cHMtaGlzdG9yeSByZWFkLXByZXBhaWQtYmFsYW0ZC1hMmY4LWEwMTcwZDFiOySWQiOiI2kZWRiNDQ1YmRjIn0.z6_BQMwHbr_breyDm4YgRTiu3RdhJXKmu8fnlHrBHc4

Em seguida, instale o dotenv junto com rollup/plugin-replace , um plug-in Rollup que substitui strings de destino em arquivos:

 npm install--save-dev dotenv @ rollup/plugin-replace

Depois disso, atualize seu arquivo rollupconfig.js para importar os pacotes instalados e anexe a configuração .env :

//rollup.config.js import {config} de'dotenv';
importar substituir de'@ rollup/plugin-replace'; produção const=! process.env.ROLLUP_WATCH; export default { plugins: [ substituir({ //restringir o objeto __myapp: JSON.stringify ({ env: { isProd: produção, ... config (). parsed//anexou a configuração.env } }), }), ], };

Depois de fazer isso, você pode continuar a estruturar sua solicitação de API para fazer carregamentos.

Estruturação da solicitação de API do Reloadly

Navegue até seu arquivo App.svelte para fazer uma solicitação POST usando a API do Reloadly.

Primeiro, defina todos os parâmetros necessários para a solicitação:

//.src/App.svelte 

Para lidar com as respostas que você receberá da API para solicitar e apresentar os dados, você precisará definir algumas funções em seu aplicativo Svelte:

• handleClick () : envolve a solicitação POST e define sua execução para um botão
• hold (customIdentifier) ​​: Isso garante que o aplicativo não faça uma solicitação até que todas as entradas tenham sido preenchidas

Em seguida, faça a solicitação para Reloadly:

//.src/App.svelte 

Assim que uma resposta bem-sucedida for recebida, use uma combinação de elementos HTML e Svelte para representar os dados.

Primeiro, crie tags de entrada e um botão para lidar com as solicitações:

//. src/App.svelte 
 
 RECARREGUE EM MOVIMENTO & # 127757; 
  
 Número de telefone:  
 
 Quantidade (NGN):  
 
 Referência da transação:  
  RECARREGA 

Em seguida, crie um bloco Svelte logic/await para lidar com as respostas:

//.src/App.svelte 
 {#await results} 
 Carregando... 
 {: então res} 
 {res? `ID da transação: $ {res.operatorTransactionId}`:''} 
 
 {res? `Identificador personalizado: $ {res.customIdentifier}`:''} 
 
 {res? `Nome do operador: $ {res.operatorName}`:''} 
 
 {res? `Data de transação: $ {res.transactionDate}`:''} 
 {: pegar res} 
 Mensagem de erro: {res? `$ {res.message}`:''} 
 {/aguardam}

O estilo do seu aplicativo é semelhante ao CSS padrão. Aqui está um exemplo:

//.src/App.svelte 

Nesse ponto, seu aplicativo deve estar completo. Inicie-o executando npm run dev e faça uma recarga para um número de celular:

Configurações de distribuição em Electron

Agora você concluiu a criação de seu aplicativo de desktop. O procedimento final é distribuí-lo. Para conseguir isso, você precisa instalar o electron-builder , uma ferramenta que empacota e constrói um aplicativo Electron pronto para distribuição.

Navegue até seu terminal e instale esta ferramenta:

 npm install electron-builder--save-dev

A seguir, no arquivo package.json do seu aplicativo, adicione a configuração de distribuição para incluir o electron-builder :

scripts

: { ... "dist":"npm run build && electron-builder"
}

Em seguida, execute npm run dist em seu terminal. Isso constrói seu aplicativo e cria uma versão distribuível dele também:

Conclusão

Trabalhar com diferentes estruturas não é apenas uma ótima maneira de melhorar suas habilidades, mas é melhor saber que existem diferentes opções e, quando combinadas, podem ser usadas para criar aplicativos incríveis. Você pode verificar o código-fonte deste aplicativo de desktop no GitHub.

A postagem Criando cross-aplicativos de plataforma de desktop com Svelte, Electron e Reloadly apareceram primeiro no LogRocket Blog .

Source link