Por isso, tenho usado Átomo pelo GitHub como meu editor de texto preferido há pouco mais de um ano. Caso você esteja
inconscientemente, ele é um editor de texto de código aberto que é executado no próprio GitHub Elétrons plataforma. Para resumir,
A Electron permite que você crie aplicativos de desktop de plataforma cruzada usando tecnologias da Web como HTML, JavaScrpt e CSS. Essencialmente, a Electron é para desktop,
o que o Apache Cordova é para dispositivos móveis.
Onde quero chegar com isso? Bem, usando o Electron e várias tecnologias da Web, podemos criar aplicativos de desktop de plataforma cruzada que
sincronização excelente com o Couchbase Server!
Vamos pegar um exemplo de trabalho que escrevi anteriormente e convertê-lo em um aplicativo de desktop autônomo que você pode distribuir para o Mac,
Windows e até mesmo Linux. O exemplo que estamos analisando em particular é o tutorial que escrevi sobre PouchDB com AngularJS. Caso você ainda não tenha
leia este tutorial, recomendo que você leia aqui,
Caso contrário, você pode ir direto para o código-fonte do tutorial para este guia.
Instalação do Electron for Development em seu computador
Antes de podermos agrupar nosso aplicativo com o Electron, precisamos instalá-lo em nossa máquina. Usaremos o Node Package Manager (NPM) para
instalar nossas dependências, portanto, se você ainda não instalou o Node.js em sua máquina, acesse
o Node.js site e faça isso agora.
Com o Node.js instalado, execute o seguinte no prompt de comando (Windows) ou no terminal (Linux e Mac) para instalar o Electron globalmente em
sua máquina:
|
1 2 3 |
npm instalar -g elétron-pré-construído |
Se você estiver usando Mac ou Linux, talvez seja necessário executar o comando como administrador. Isso pode ser feito usando sudo somente se
necessário.
Preparando o contêiner do aplicativo Electron
Na maioria das vezes, você não precisa fazer nenhuma revisão em seu aplicativo da Web estático (HTML, JavaScript, CSS) para usar o Electron.
No entanto, você precisará configurar alguns arquivos para que o Electron possa entender seu projeto.
Vá em frente e crie um novo diretório (talvez em sua área de trabalho) chamado Projeto Couchbase. Dentro desse diretório, crie um diretório
main.js e package.json arquivo. Começando com o arquivo package.json adicione o seguinte
código:
|
1 2 3 4 5 6 7 |
{ "name" (nome) : "electron-couchbase", "versão" : "0.0.1", "principal" : "main.js" } |
De acordo com a documentação do Electron, é importante que principal usa um nome de arquivo que corresponde ao que você criou em seu arquivo
projeto.
Agora, podemos adicionar código à seção main.js arquivo. Abra-o e adicione o seguinte:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
var aplicativo = exigir('aplicativo'); // Módulo para controlar a vida útil do aplicativo. var Janela do navegador = exigir('janela do navegador'); // Módulo para criar a janela nativa do navegador. // Relate as falhas ao nosso servidor. exigir("Relator de acidentes).iniciar(); // Mantenha uma referência global do objeto da janela; se você não fizer isso, a janela será // ser fechado automaticamente quando o objeto JavaScript for coletado do lixo. var Janela principal = nulo; // Sair quando todas as janelas estiverem fechadas. aplicativo.em('janela-tudo-fechado', função() { // No OS X, é comum que os aplicativos e suas barras de menu // permanecer ativo até que o usuário saia explicitamente com Cmd + Q se (processo.plataforma != 'darwin') { aplicativo.sair(); } }); // Esse método será chamado quando o Electron tiver terminado // inicialização e está pronto para criar janelas do navegador. aplicativo.em('pronto', função() { // Criar a janela do navegador. Janela principal = novo Janela do navegador({largura: 800, altura: 600}); // e carregar o index.html do aplicativo. Janela principal.loadUrl('file://' + __dirname + '/public/index.html'); // Emitido quando a janela é fechada. Janela principal.em("fechado, função() { // Dereferenciar o objeto de janela, normalmente você armazenaria janelas // em uma matriz se seu aplicativo for compatível com várias janelas, este é o momento // quando você deve excluir o elemento correspondente. Janela principal = nulo; }); }); |
Para ser justo, esse main.js foi copiado quase que exatamente da documentação de início rápido do Electron. Você deve observar
que as diferenças entre os dois são que minha versão não mostra o Chrome Inspector e que nossos arquivos da Web existirão no diretório
público do nosso projeto.
Codificação de nosso aplicativo de desktop híbrido da Web usando o Couchbase e o Electron
É aqui que a mágica acontece. Lembre-se de que eu lhe disse que usaremos o código-fonte do projeto AngularJS, PouchDB e Couchbase de um artigo anterior
tutorial. Com o Projeto Couchbase como nosso diretório de trabalho atual no prompt de comando ou no terminal, execute o seguinte:
|
1 2 3 |
git clone https://github.com/couchbaselabs/pouchdb-angularjs-app public |
O comando acima clonará o projeto anterior e o renomeará como público para acomodar o requisito que definimos na
main.js arquivo.
Executando nosso aplicativo Electron para desktop
No momento, o projeto deve ser executável. Com Projeto Couchbase como seu diretório de trabalho atual no prompt de comando
ou Terminal, execute o seguinte:
|
1 2 3 |
elétron . |
Com um pouco de sorte, ele deve começar a funcionar. No entanto, só porque nosso aplicativo está em execução e salvando dados, isso não significa que
estão sincronizando com o Couchbase Server. Na verdade, precisamos iniciar o Couchbase Sync Gateway.
Executando o Couchbase Sync Gateway
O Couchbase Sync Gateway é responsável pela sincronização com o servidor a partir do nosso aplicativo local e do servidor de volta para o nosso aplicativo local.
aplicativo. Ele funciona com aplicativos móveis e também, no nosso caso, com aplicativos de desktop inspirados no PouchDB. O gateway de sincronização do Couchbase
pode ser baixado aqui.
Quando você clonou o projeto AngularJS / PouchDB do GitHub, havia também um arquivo de configuração do Sync Gateway nele. Sinta-se à vontade para usá-lo
para este exemplo. Mova-o para a área de trabalho ou para algum lugar fora do diretório do aplicativo e execute o seguinte:
|
1 2 3 |
/caminho/para/sincronização/portal/caixa/portais de sincronização /caminho/para/projeto/sincronização-portal-configuração.json |
Você pode confirmar que ele está em execução acessando http://localhost:4985 no seu navegador da Web.
Com o Couchbase Sync Gateway em execução, reinicie seu aplicativo Electron e você deverá notar que ele está replicando os dados.
Conclusão
Parabéns! Você acabou de criar um aplicativo de desktop multiplataforma usando nada mais do que tecnologias da Web, como HTML, JavaScript e
CSS. O que é ainda melhor é que esse aplicativo de desktop será sincronizado com o Couchbase Server.
Se quiser ler mais sobre como implantar esse aplicativo como um binário autônomo, ele pode ser encontrado no GitHub oficial
Documentação de elétrons.
Que endereço devo usar no Electron para informar ao sync-gateway de onde os dados estão vindo? No aplicativo, você usou localhost:9000. Isso é verdade quando distribuo meu aplicativo para a equipe?
Estou usando o couchbase em meu escritório com o sync-gateway. O aplicativo em laptops com Windows com o Electron.
Bem, um aplicativo Electron não é considerado um aplicativo da Web. Você não deve ter problemas de compartilhamento de recursos de origem cruzada (CORS). Você só precisa garantir que o aplicativo Electron aponte para o seu Sync Gateway.
Melhor,
Obrigado por sua resposta, tenho seu aplicativo angular pré-electron sincronizado com o couchbase sync-gateway. Você está dizendo que, quando eu fizer essas adições acima, esperamos que ele continue sincronizado?
Além disso, o console está mostrando que o jquery está falhando?
Sim, basta agrupar o aplicativo no Electron. O jQuery está ausente porque eu não o adicionei. Não o adicionei porque não estava usando os recursos do Bootstrap que o utilizavam. Você pode ignorá-lo.
Melhor,
Consegui fazê-lo funcionar, mas em toda essa solução de problemas perdi uma linha que comentei. Muito obrigado. Seus tutoriais são muito úteis. Também sigo seus outros tutoriais. Obrigado
Sem problemas :-)
q
Alguma ideia do que está acontecendo aqui?
2016-04-28T22:55:47.375-04:00 Changes+: Notificação para verificar o término do feed _changes
2016-04-28T22:55:47.375-04:00 Changes: MultiChangesFeed concluído
2016-04-28T22:55:48.294-04:00 HTTP: #040: GET /test-database/_changes?timeout=25000&style=all_docs&feed=longpoll&since=5&limit=96&_nonce=1461898548292
2016-04-28T22:55:48.294-04:00 Changes+: Alimentação de múltiplas alterações da sequência Int...
2016-04-28T22:55:48.294-04:00 Changes: MultiChangesFeed({*}, {Since:5 Limit:96 Conflicts:true IncludeDocs:false Wait:true Continuous:false Terminator:0xc820875a40 HeartbeatMs:0 TimeoutMs:25000 ActiveOnly:false}) ...
2016-04-28T22:55:48.294-04:00 Changes+: MultiChangesFeed: canais expandem para channels.TimedSet{\"!\":channels.VbSequence{VbNo:(*uint16)(nil), Sequence:0x1}, \"*\":channels.VbSequence{VbNo:(*uint16)(nil), Sequence:0x1}} ...
2016-04-28T22:55:48.294-04:00 Changes+: MultiChangesFeed aguardando...
2016-04-28T22:55:48.294-04:00 Changes+: Aguardando a contagem de \"test-database\"\ passar de 7
Não vejo nada fora do comum. O que ele está ou não está fazendo? Um pouco mais de contexto seria útil.
Melhor,
Provavelmente estou entendendo algo errado. O conteúdo que postei é a saída do meu terminal quando executo:
/path/to/sync/gateway/bin/sync_gateway /path/to/project/sync-gateway-config.json
Em seguida, reinicie o aplicativo com o elétron .
Na janela do navegador do http://localhost:4985Ele tem apenas algumas informações de versão.
{\"ADMIN\":true,\"couchdb\":\"Welcome\",\"vendor\":{\"name\":\"Couchbase Sync Gateway\",\"version\":1.2},\"version\":\"Couchbase Sync Gateway/1.2.0(79;9df63a5)\"}
Não há nada lá ou no meu aplicativo que sugira que estou sincronizando registros. Se eu colocar dois registros no meu aplicativo (nome, e-mail, etc.), não os verei no http://localhost:4985. Devo vê-lo lá?
O que devo ver quando tento validar que ele está em execução visitando http://localhost:4985 do navegador da Web? Provavelmente estou perdendo uma coisa ou muitas coisas. Obrigado por qualquer dica.
É provável que você queira usar a porta 4984, em vez da 4985.
Informe-me se isso corrigiu o problema para você.
Melhor,
Obrigado por sua resposta. Vou ter que dar uma olhada nisso quando tiver mais tempo. Tentei as duas portas que você listou (uma é administrativa e a outra não). Nenhuma delas replicou dados do aplicativo. Pode ser um problema com meu Mac ou um descuido bobo que levará algum tempo para ser resolvido.
Agora, se eu fosse compilar meu aplicativo eletrônico e usá-lo em outra máquina Mac ou Windows, quais seriam as alterações necessárias para que todos os usuários pudessem ter um conjunto diferente de compartimentos de dados e pudessem usar o aplicativo individualmente.
Você não deve dar a cada usuário seu próprio bucket. Em vez disso, você deve usar os recursos de autenticação incorporados ao gateway de sincronização para permissões de leitura e gravação.
Então, você poderá ter um aplicativo completo com muitos usuários
[...] anos atrás, escrevi sobre o uso do Couchbase em um aplicativo de desktop usando o AngularJS 1.0 e o Electron, mas, com a tecnologia, era como se houvesse dinossauros naquele período. Muita coisa mudou [...]
[...] acima pode parecer familiar por dois motivos. Primeiro, eu a retirei de um post anterior que escrevi sobre o Electron e, segundo, ela veio praticamente direto da documentação do Electron. Nosso [...]