Support & Downloads

Quisque actraqum nunc no dolor sit ametaugue dolor. Lorem ipsum dolor sit amet, consyect etur adipiscing elit.

s f

Contact Info
198 West 21th Street, Suite 721
New York, NY 10010
youremail@yourdomain.com
+88 (0) 101 0000 000
Follow Us

Electron e VueJs: Como criar um editor de textos do zero

Você sabia que é possível desenvolver APPs desktop para múltiplas plataformas (linux, mac e windows) usando Javascript? Muitos softwares que você utiliza no seu computador como Vs Code, Atom, GitKraken, Slack, Discord e etc utilizam um framework javascript chamado Electron.

Para desenvolver projetos usando Electron é bem simples, inclusive você pode usar tecnologias famosos como VueJs, React, Angular e etc associado com o Electron para criar seus softwares de desktop.

Já que os principais editores de texto são criados usando Electron, vamos criar neste artigo um editor de texto com Electron + VueJs, então vem com a gente nessa jornada e aprenda como criar APPs desktop com javascript 😁

 

O que vamos desenvolver:

Neste artigo vamos criar nosso editor de Rich Text usando o Quill editor para edição do conteúdo (que vai permitir a inclusão de imagens, emoticons, códigos e etc), Bulma para estilização e o Vue.js juntamente com Electron para tornar nossa aplicação instalável no desktop, além de aprender como distribuir nosso APP ao final para diversas plataformas.

Caso você deseje ver os códigos do projeto completo: Link do projeto no GitHub

 

Nossas ferramentas:

  • Vue cli 3
  • electron
  • quill-editor
  • Nodejs v10

 

Configurando o projeto

1 – Inicialmente precisamos instalar o vue@cli. Usando npm:

ou yarn:

 

2 – Após a instalação do Vue cli iremos criar nosso projeto:

 

3 – Entre na pasta para ver nosso projeto vue criado

 

A partir da versão 3 o Vue@cli fornece uma interface web para gerenciarmos nossas aplicações. Nela é possível instalar plugins, controlar dependências além de rodar nossas tarefas configuradas no package.json. Agora iremos adicionar a pasta do projeto ao gerenciador de projetos (project manager) do Vue ui.

 

4 – Abra a Vue ui:

Após alguns instantes o Vue ui abrirá o browser para mostrar o project manager.

 

5 – Importe a pasta do projeto através da tab import e em seguida clique no botão “Import this folder”. Como havíamos entrado na pasta do projeto anteriormente, não precisamos procurar a pasta para adicionar ao Vue Project Manager.

Uma vez importado nosso projeto para o project manager, o Vue ui abrirá a área de gerenciamento do nosso projeto.

A essa hora você deve estar se perguntando: “Onde está o código?”. Calma, estamos chegando na parte divertida.

 

6 – Vá até a seção de Plugins e clique no botão “+ Add plugin”. Iremos instalar o “vue-cli-plugin-electron-builder”, ele faz a pré configuração do electron com o Vue para o nosso APP.
Caso queira saber um pouco mais sobre o plugin basta ir no
link do repositório: https://github.com/nklayman/vue-cli-plugin-electron-builder

 

7 – Uma vez instalado o plugin podemos rodar o comando para ver nosso app desktop ganhando vida. 😍

 

 

Adicionando o Quill editor e o Bulma ao projeto

Iremos instalar as dependências do Quill editor e o Bulma, o padrão dele é utilizando jquery mas em nosso exemplo usaremos um componente VueJs.

 

1 – Adicione ao projeto o vue-quill-editor, alguns plugins do quill e o bulma para deixar nosso editor com mais recursos:

 

2 – Para usarmos o quill no nosso projeto vamos criar um plugin do Vue, crie o arquivo quill_editor.js com o conteúdo:

escola_javascript_editor/src/plugins/quill_editor.js

 

3 – Feito isso, precisamos adicionar nosso plugin ao setup do Vue, atualize o main.js:

escola_javascript_editor/src/main.js

 

Criando o componente do editor

Nesta parte vamos desenvolver nosso Component VueJs que vai conter nosso editor de textos.

 

1 – Crie o component Editor.vue:

escola_javascript_editor/src/components/Editor.vue

Como o quill já foi adicionado ao main.js, não precisamos importar o vue-quill-editor no componente que acabamos de criar.

 

2 – Adicione o componente do quill ao Editor.vue

escola_javascript_editor/src/components/Editor.vue

Você pode ler mais sobre as opções desse componente na documentação do componente.

 

3 – Adicione o componente editor ao App.vue:

src/App.vue

 

Configurando Toolbar do editor

Até o momento criamos o editor e adicionamos ao APP. Entretanto ainda não permitimos ao usuário interagir com o conteúdo e os diversos plugins que instalamos, nessa seção vamos adicionar a toolbar para que o usuário possa interagir com o conteúdo.

O primeiro passo para adicionar a toolbar é saber quais ferramentas do Quill queremos adicionar. Na documentação do quill você encontra alguns exemplos de toolbar. Vamos lá! 👨‍💻

 

1 – Adicione na variável “editorOption” (do component Editor.vue) o seguinte valor:

O bloco acima é usado pelo quill para informar quais módulos serão usados e configurar alguns plugins, dentro do módulo da toolbar temos um container que diz para o quill qual a ordem e os itens da toolbar.
Como só adicionamos a toolbar, por enquanto temos apenas 1 módulo, nas próximas seções adicionaremos os demais módulos instalados anteriormente.

 

2 – Vamos ver como está ficando nosso editor com:

Você deve ter algo parecido com isto:

Se você tentar adicionar uma imagem ao editor perceberá que não é possível redimensionar nem arrastar uma imagem, isso acontece porque o quill por padrão não possui suporte ao redimensionamento de imagens e drag and drop, para resolver isso iremos adicionar à configuração do quill os plugins de redimensionar imagens e arrastar imagens que foram instalados nas seções anteriores.

 

3 – Edite os módulos da variável editorOption para ficar assim (atualize o Editor.vue):

Curiosidade: O plugin de resize de imagens é dividido em sub módulos, na configuração do quill é possível usar apenas alguns dos sub módulos desse plugin.

 

O próximo plugin que iremos adicionar pode ser considerado indispensável para o editor, ele é o plugin de emojis 😀

4 – Para adicionar o módulo de emojis usaremos o mesmo princípio dos plugins anteriores com algumas alterações (atualize no Editor.vue):

 

Para finalizar os plugins vamos adicionar o highligh.js para deixar os blocos de código formatados pela linguagem.

5 – Adicione o highlight.js ao componente

 

Adicionando ícone ao app

Nosso app ainda está muito genérico, vamos adicionar um ícone para tornar o editor da escola de javascript “único”.

No electron para adicionar um ícone ao app é necessário alterar o arquivo do processo principal “src/background.js”, esse arquivo é responsável por criar a janela e carregar a aplicação além de interagir com o sistema operacional.
Durante a instalação do plugin do Electron o Vue cli se encarregou de criar esse arquivo para nós.

 

Para adicionar o ícone da aplicação, primeiro precisaremos adicionar o ícone escolhido a pasta “public” e em seguida importar a biblioteca path (nativa do Nodejs), você pode baixar o ícone usado no artigo através dos links abaixo:

 

Observação: Dependendo do seu sistema operacional o formato da imagem deve ser diferente.

Linux: “.png” de preferência 32 x 32

Windows: “.ico” de preferência 32×32

 

1 – Abra o arquivo src/background.js e adicione (o path):

 

2 – Após isso, dentro da função “createWindow” substitua o código:

Por:

 

Criando o menu do editor

Nesta seção criaremos o menu do nosso app, o electron já possui um menu nativo para aplicações que podem ser usados e criados tanto no processo renderer quanto main.

Dica: Escolha se vai utilizar a criação do menu no processo renderer ou main a partir da funcionalidade do menu, se o menu precisa interagir diretamente com o conteúdo renderizado use no renderer, caso contrário use no main.

 

Para nossa situação será utilizado a criação de um menu a partir do processo renderer do electron, dessa forma temos acesso ao conteúdo feito no editor para salvar posteriormente os arquivos que criarmos.

Obervação: Também poderíamos utilizar o IPC para enviar o conteúdo do editor ao processo main.

 

1 – No componente do nosso editor “Editor.vue” adicione os botões de abrir e salvar arquivos:

 

2 – Perceba que já adicionamos os métodos de ação “openFile” e “saveFile”. Feito isso, adicione os métodos ao componente Editor.vue, ao final seu componente deve estar assim:

 

Adicionando a função abrir arquivo

Nesta seção iremos adicionar a função de abrir arquivos em um formato criado para o nosso editor “.escola_js”. Para isto usaremos a api remote do electron, que permite utilizar apis típicas do processo main no processo renderer, também utilizaremos a biblioteca “fs” do Nodejs para abrir os arquivos.

 

1 – No método openFile, adicione o seguinte código:

A função showOpenDialog, permite ao usuário abrir o seletor de arquivos e selecionar o arquivo que deseja abrir, nela podem ser configuradas propriedades que limitam o que se pode abrir: um arquivo, uma pasta ou múltiplos arquivos. Uma vez selecionado o arquivo a função retorna um array com os paths dos arquivos selecionados.

Atenção: Mesmo que apenas um arquivo seja selecionado, a função retorna um array com o caminho deste 1 arquivo.

 

Para tornar nosso código mais legível, perceba que a variável filepath faz um array destructuring . Desta forma não precisamos colocar algo to tipo:

Como já temos o caminho do arquivo que se deseja abrir, podemos usar a função “fs.readFile()” para ler o arquivo e adicionar o conteúdo ao editor.

 

2 – Adicione o código abaixo após a declaração da variável filepath, ao final você deve ter algo parecido com isto:

Curiosidade: Nesta função não foi utilizada a função fs.readFileSync porque como ela é síncrona o processo renderer ficaria parado enquanto executa a função, para pequenos arquivos isso é imperceptível, mas à medida que os tamanhos dos arquivos aumentam chegaria ao ponto da aplicação travar.

Nosso editor está ficando funcional, Na próxima seção será adicionado suporte a abertura de arquivos no formato “.escola_js”

[1]  Para o electron cada recurso (IPC, AutoUpdate, Menu, etc) é chamado de api. Seguindo a estrutura de apis do chromium

 

Adicionando a função salvar arquivo

Para adicionar a função salvar em nosso app, utilizaremos funções parecidas as usadas na seção anterior: “showOpenDialog”, “readFile”. A primeira delas é a função “showSaveDialog” que permite abrir uma caixa de salvar arquivo, quando o usuário clicar nessa caixa, ele poderá selecionar o caminho (ou arquivo existente), adicionar o nome do arquivo (se ele não existe ainda) e salvar.
Também usaremos a função fs.writeFile() para salvar os arquivos no formato “.escola_js”.

 

1 – Crie o método saveFile abaixo do método openFile e adicione o seguinte código:

Como a função showSaveDialog retorna apenas uma string contendo o caminho do arquivo a salvar ou sobrescrever não foi necessário fazer um array destructuring. Nosso editor apenas suporta o formato “.escola_js”, então todo arquivo escrito é adicionado no formato mencionado.

Para evitar que ao sobrescrever um arquivo “.escola_js” o editor adicione novamente o formato, na variável filePathToSave foi adicionado uma condição que checa se o arquivo já possui o formato “.escola_js”.

Foi uma caminhada longa, mas nosso editor está pronto 😎!

 

Empacotando o app

Quando se fala em distribuir APPs para desktop, diversos problemas começam a surgir: auto update, certificado de assinatura de código, compilar multiplataforma, etc. Por sorte temos o pacote electron-builder que ajuda a compilar o APP para diversa plataformas.

Para empacotar nosso APP, vamos utilizar a própria integração do plugins vue-electron-builder que foi instalada para gerar a integração electron e vue.

 

1 – Coloque no nó principal do seu package.json o autor e o link para a Homepage do APP (pode ser fictícia se for um APP de teste apenas):

Obs: Você pode conhecer mais opções de configurações aqui: https://www.electron.build/configuration/configuration#Metadata-homepage

 

2 – Abra a vue ui e selecione o item tasks:

 

 

Aqui ficam todas as tasks registradas no package.json, iremos utilizar a task “electron:build” para gerar nosso instalável.

 

Podemos definir os parâmetros de build (clicando em parâmetros), para mudar o formato final do executável (escolhendo a versão do OS que queremos gerar o executável, se é 32 ou 64 bits e etc):

 

 

 

 

 

3 – Depois de escolher as configurações desejadas clique em Executar Tarefa para gerar as versões instaláveis do seu APP.

 

4 – Pronto, seu APP está disponível dentro da pasta dist_electron e já pode ser instalado o/

 

Um desafio para você

Para fixar o conhecimento adquirido nesse tutorial, realiza o seguinte desafio: Quando o usuário pressionar Ctrl + S, salve o conteúdo atual no arquivo aberto, ou abra a janela para que o usuário crie um novo arquivo caso nenhum arquivo esteja aberto.

Cole o código desenvolvido nos comentários após finalizar para que outros programadores aprendam com a sua solução, bom trabalho o/

 

Conclusão

Neste artigo podemos vislumbrar o poder e a praticidade do framework Javascript Electron através da criação de um editor de textos instalável no desktop usando Electron, VueJs, Quill Editor e Bulma.

Se você gostou deste conteúdo e quer aprender mais sobre electron (ou outro tema no mundo javascript) deixa um comentário ai em baixo, também compartilha esse artigo com seus amigos programadores para incentivar a continuação deste trabalho.

Muito obrigado o/

 

Computer Engineer from Universidade Estadual do Maranhão - Brazil. Developed and contributed on multiple researches and projects on the fields: cloud computing, WebGIS, robotics, 3d printing, computer graphics, internet of things, user mobility in mobile communications, numerical methods, fuzzy logic, channel mobile radio, software engineering.

4
Deixe um comentário

avatar
2 Comment threads
2 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
KARINE CORDEIRO RIBEIROLeonardo ScorzaThiago Santos Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Thiago Santos
Visitante
Thiago Santos

Boa tarde,
Eu fiz tudo certinho e cheguei na parte: 4 – Pronto, seu APP está disponível dentro da pasta dist_electron e já pode ser instalado o/
Gostaria de saber como instalar o APP, ele já está na pasta dist_electron
Att,
Thiago

Thiago Santos
Visitante
Thiago Santos

Eu entendi já, é só digitar o comando: yarn run electron:serve
Para executar o app

Leonardo Scorza

E ai Thiago, beleza?
Obrigado por acompanhar o nosso tutorial,
Para ver a versão de desenvolvimento basta rodar: yarn run electron:serve
Porém para instalar e acessar a versão de produção, depois de ter gerado ela em dist_electron você deve ir até essa pasta e rodar o comando para instalar (se você nas configurações gerou um .deb você pode instalar rodando dpkg -i nome_do_projeto_no_pacote).
Grande abraço

KARINE CORDEIRO RIBEIRO
Visitante
KARINE CORDEIRO RIBEIRO

Very good tutorial!