Então você está interessado em criar um aplicativo de bate-papo para desktop como o Slack, mas não sabe por onde começar. O Slack foi muito aberto ao dizer que usou o aplicativo de bate-papo do Github Elétrons para criar a versão desktop de seu software. Isso significa que o Slack foi desenvolvido usando tecnologias da Web.
Veremos como criar um aplicativo de desktop de bate-papo em tempo real que não é nem de longe tão rico em recursos quanto o Slack, mas que lhe dará uma perspectiva de como você poderia expandir até esse ponto.
Os pré-requisitos
Embora não exija muito, há algumas coisas de que você precisará para ter sucesso no que vem a seguir:
- Servidor Couchbase 4+
- Gerenciador de pacotes do nó (NPM)
Precisamos do Couchbase Server porque todas as mensagens de bate-papo serão armazenadas em cache no banco de dados após serem enviadas. Isso permite que todos que entrarem na sala de bate-papo possam ver as mensagens anteriores. Isso é importante porque as pessoas podem estar entrando no bate-papo mais tarde do que outras e não queremos que elas percam nada. O Node Package Manager (NPM) é necessário porque o usaremos para instalar o Angular 2 e o Electron. Ele está disponível por meio da instalação do Node.js.
Com tudo isso dito, vamos começar a desenhar nosso projeto.
Clonagem do servidor Socket.io
Como você deve saber, este não é o primeiro tutorial que escrevi sobre o assunto de bate-papo em tempo real usando a pilha CEAN. Na verdade, escrevi outros dois:
- Criação de um aplicativo de bate-papo em tempo real com a pilha CEAN e o Socket.io
- Criando um aplicativo de bate-papo em tempo real com o Ionic 2 e o Socket.io
Para economizar tempo, usaremos o código do lado do servidor que desenvolvemos no primeiro tutorial da pilha CEAN, e não no tutorial do Ionic 2. Se você ainda não o fez, recomendo que o leia. No entanto, você pode obter o código-fonte em fazendo o download do GitHub, ou executando o seguinte no Terminal (Mac e Linux) ou no Prompt de Comando (Windows):
|
1 2 3 |
git clone https://github.com/couchbaselabs/cean-web-chat |
Com o download do código do lado do servidor, navegue até o projeto usando o Prompt de Comando ou o Terminal e instale todas as dependências executando:
|
1 2 3 |
npm instalar |
Neste ponto, seu código de servidor de bate-papo está pronto para ser usado!
Configuração do Couchbase
Como o Couchbase será usado com o aplicativo Node.js, precisamos de um bucket configurado e autorizado a usar consultas N1QL. Tudo isso foi explicado no primeiro Tutorial de bate-papo da pilha CEANMas, apenas para relembrar, vamos ver novamente.
Instale uma cópia do Couchbase Server 4 e crie um bucket chamado bate-papo na web que tenha o serviço de consulta ativado. Como usaremos as consultas N1QL, precisamos criar um índice primário. Isso pode ser feito usando o cliente Couchbase Query (CBQ). No Mac, execute o seguinte em um Terminal:
|
1 2 3 |
./Aplicativos/Couchbase Servidor.aplicativo/Conteúdo/Recursos/couchbase-núcleo/caixa/cbq |
O mesmo pode ser feito no Windows usando o prompt de comando da seguinte forma:
|
1 2 3 |
C:/Programa Arquivos/Couchbase/Servidor/caixa/cbq.exe |
Com o CBQ aberto, execute o seguinte para criar um índice:
|
1 2 3 |
CRIAR PRIMÁRIO ÍNDICE ON `web-bate-papo` USO GSI; |
O Couchbase Server está pronto para ser usado!
Criação de um projeto Electron
Nosso projeto Electron terá muito corte e cola quando se trata de código. Isso ocorre porque o Electron aceita praticamente qualquer aplicativo da Web que você lançar nele. Lembre-se de que temos um aplicativo da Web muito adequado incluído em nosso projeto de servidor Socket.io.
Crie um novo diretório, talvez em sua área de trabalho, e chame-o de bate-papo na área de trabalho ou o que você achar mais apropriado. Navegue até o projeto com seu Terminal ou Prompt de Comando e execute o seguinte:
|
1 2 3 |
npm inicial -y |
Isso cria um NPM muito básico package.json em nosso projeto. Agora, precisamos instalar todas as dependências do nosso aplicativo de desktop. Execute o seguinte:
|
1 2 3 4 |
npm instalar angular2@2.0.0-beta.0 sistemajs tipografia --salvar npm instalar elétron-pré-construído --salvar-dev |
A primeira instalação obterá todas as nossas dependências do Angular 2. No projeto do lado do servidor, a interface do usuário voltada para o cliente foi toda criada com o Angular 2 e o TypeScript. Faremos o mesmo aqui. A segunda instalação obtém o binário do Electron.
Agora abra o package.json encontrado na raiz do projeto e troque o arquivo roteiros parte com o seguinte:
|
1 2 3 4 5 |
"scripts": { "start": "electron main.js" }, |
Veremos o que isso significa em breve, mas primeiro crie um main.js na raiz do projeto. Ele deve conter o seguinte código:
|
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 |
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. // 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; }); }); |
O texto acima pode parecer familiar por dois motivos. Primeiro, eu a tirei de um post anterior Eu escrevi sobre o Electron e, em segundo lugar, ele veio praticamente direto da documentação do Electron. Nossa linha importante, entretanto, é a seguinte:
|
1 2 3 |
Janela principal.loadURL('file://' + __dirname + '/public/index.html'); |
Isso significa que todo o nosso código do Angular 2 estará no diretório público começando com o diretório index.html arquivo.
Copiar o público do diretório cean-web-chat que você clonou do GitHub e coloque-o na raiz do projeto Electron. Já existe um arquivo index.html nele, mas precisamos alterar algumas coisas. Abra-o e altere a variável script caminhos para o seguinte:
|
1 2 3 4 5 6 7 8 |
Fizemos isso porque os caminhos da nossa biblioteca não estão no mesmo lugar em que estavam no aplicativo do lado do servidor.
Há mais algumas coisas a fazer antes de estarmos prontos para vê-lo em ação. Abra o arquivo public/app/default/default.ts e crie uma nova variável na classe da seguinte forma:
|
1 2 3 |
socketHost: string; |
Isso deve ser feito dentro da classe. Como não estamos mais no mesmo host que o servidor, precisamos informar ao nosso cliente de desktop a qual host devemos nos conectar. Dentro do construtor, defina socketHost para qualquer que seja o host:
|
1 2 3 |
este.socketHost = "http://192.168.57.1:3000"; |
Nossa solicitação HTTP no construtor não é mais válida porque nosso cliente não está incluído no servidor. Precisamos definir o host que acabamos de definir. Isso pode ser feito da seguinte forma:
|
1 2 3 |
http.obter(este.socketHost + "/fetch").assinar((sucesso) => { |
Por fim, encontre a linha em que você define o objeto Socket.io. Ele também precisa de um host para o qual apontar. Altere-o para que se pareça com o seguinte:
|
1 2 3 |
este.soquete = io(este.socketHost); |
A essa altura, você deve estar bem!
Vendo-o em ação
Você precisará de dois Prompts de Comando ou Terminais abertos para isso. O primeiro terminal executará o servidor Socket.io Node.js que se conecta ao Couchbase Server. Execute o seguinte, com o projeto do GitHub como seu diretório de trabalho, para fazer isso:
|
1 2 3 |
nó aplicativo.js |
Se o servidor for iniciado, você está em boas condições. No segundo Terminal, execute o seguinte, com o projeto Electron como seu diretório de trabalho:
|
1 2 3 |
npm iniciar |
Lembre-se de que fizemos o iniciar em nosso script package.json arquivo? É assim que o usamos.
Tente enviar algumas mensagens. Elas devem ser salvas no Couchbase Server e, se você abrir outro cliente ou carregar o cliente de bate-papo incorporado do projeto do GitHub, poderá conversar.
Conclusão
Você acabou de ver como converter um aplicativo da Web existente em um aplicativo de desktop de plataforma cruzada. Esse aplicativo oferecia bate-papo em tempo real usando tecnologias de ponta como Angular 2, Couchbase, Socket.io e Node.js.
Se ainda não o fez, recomendo que dê uma olhada nos posts anteriores que fiz sobre o tópico Socket.io com o Couchbase. São boas leituras e podem abrir as portas para possibilidades para você.
