Así que he estado usando Atom de GitHub como mi editor de texto preferido desde hace algo más de un año. En caso de que estés
es un editor de texto de código abierto que se ejecuta en el propio GitHub. Electrón plataforma. Resumiendo,
Electron permite crear aplicaciones de escritorio multiplataforma utilizando tecnologías web como HTML, JavaScrpt y CSS. Básicamente, Electron es para escritorio,
lo que Apache Cordova es para los móviles.
¿Adónde quiero llegar? Bueno, utilizando Electron y varias tecnologías web, podemos crear aplicaciones de escritorio multiplataforma que
se sincroniza perfectamente con Couchbase Server.
Vamos a tomar un ejemplo de trabajo que escribí anteriormente y convertirlo en una aplicación de escritorio independiente que puede distribuir a Mac,
Windows, e incluso Linux. El ejemplo que estamos viendo en particular es el tutorial de PouchDB con AngularJS que escribí. Si aún no lo has hecho
leer este tutorial, te recomiendo léalo aquí,
si no, puede dirigirse directamente al código fuente del tutorial para esta guía.
Instalación de Electron for Development en su equipo
Antes de que podamos empaquetar nuestra aplicación con Electron, tenemos que instalarlo en nuestra máquina. Vamos a utilizar el Node Package Manager (NPM) para
instalar nuestras dependencias, así que si aún no ha instalado Node.js en su máquina, diríjase a
el Node.js y hágalo ahora.
Con Node.js instalado, ejecute lo siguiente desde el símbolo del sistema (Windows) o Terminal (Linux y Mac) para instalar Electron globalmente en
su máquina:
|
1 2 3 |
npm install -g electron-prebuilt |
Si utilizas Mac o Linux, es posible que tengas que ejecutar el comando como administrador. Para ello, utilice sudo sólo si
necesario.
Preparación del contenedor de la aplicación Electron
En general, no es necesario modificar la aplicación web estática (HTML, JavaScript, CSS) para utilizar Electron.
Sin embargo, tendrá que configurar algunos archivos para que Electron pueda entender su proyecto.
Cree un nuevo directorio (tal vez en su escritorio) llamado CouchbaseProject. Dentro de este directorio, cree un directorio
main.js y paquete.json archivo. Empezando por el paquete.json añada lo siguiente
código:
|
1 2 3 4 5 6 7 |
{ "name" : "electron-couchbase", "version" : "0.0.1", "main" : "main.js" } |
Según la documentación de Electron, es importante el principal utiliza un nombre de archivo que coincide con el que ha creado en la propiedad
proyecto.
Ahora podemos añadir código a la sección main.js . Ábralo y añada lo siguiente:
|
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 app = require('app'); // Module to control application life. var BrowserWindow = require('browser-window'); // Module to create native browser window. // Report crashes to our server. require('crash-reporter').start(); // Keep a global reference of the window object, if you don't, the window will // be closed automatically when the JavaScript object is garbage collected. var mainWindow = null; // Quit when all windows are closed. app.on('window-all-closed', function() { // On OS X it is common for applications and their menu bar // to stay active until the user quits explicitly with Cmd + Q if (process.platform != 'darwin') { app.quit(); } }); // This method will be called when Electron has finished // initialization and is ready to create browser windows. app.on('ready', function() { // Create the browser window. mainWindow = new BrowserWindow({width: 800, height: 600}); // and load the index.html of the app. mainWindow.loadUrl('file://' + __dirname + '/public/index.html'); // Emitted when the window is closed. mainWindow.on('closed', function() { // Dereference the window object, usually you would store windows // in an array if your app supports multi windows, this is the time // when you should delete the corresponding element. mainWindow = null; }); }); |
Para ser justos, este main.js ha sido copiado casi exactamente de la documentación de inicio rápido de Electron. Tenga en cuenta que
que las diferencias entre ambas son que mi versión no muestra el Inspector de Chrome y que nuestros archivos web existirán en el
público de nuestro proyecto.
Codificación de nuestra aplicación web híbrida de escritorio mediante Couchbase y Electron
Aquí es donde ocurre la magia. Recuerda, te dije que vamos a utilizar el AngularJS, PouchDB, Couchbase código fuente del proyecto de un anterior
tutorial. Con el CouchbaseProject como nuestro directorio de trabajo actual en el Símbolo del sistema o Terminal, ejecute lo siguiente:
|
1 2 3 |
git clone https://github.com/couchbaselabs/pouchdb-angularjs-app public |
El comando anterior clonará el proyecto anterior y lo renombrará como público para cumplir el requisito que establecimos en el
main.js archivo.
Ejecutar nuestra aplicación de escritorio Electron
A partir de ahora el proyecto debería ser ejecutable. Con CouchbaseProject como directorio de trabajo actual en el símbolo del sistema
o Terminal, ejecute lo siguiente:
|
1 2 3 |
electron . |
Con un poco de suerte, debería empezar a ejecutarse. Sin embargo, el hecho de que nuestra aplicación se esté ejecutando y guardando datos, no significa que nosotros
se están sincronizando con Couchbase Server. En realidad necesitamos iniciar el Couchbase Sync Gateway.
Ejecución de la puerta de enlace Couchbase Sync
Couchbase Sync Gateway es responsable de la sincronización con el servidor desde nuestra aplicación local y desde el servidor a nuestra aplicación local.
aplicación. Funciona tanto con aplicaciones móviles como, en nuestro caso, con aplicaciones de escritorio inspiradas en PouchDB. La pasarela de sincronización de Couchbase
puede descargarse aquí.
Cuando clonaste el proyecto AngularJS / PouchDB de GitHub, también había un archivo de configuración de Sync Gateway en él. Siéntase libre de utilizar ese
para este ejemplo. Muévelo a tu escritorio, o a algún lugar fuera del directorio de la aplicación y ejecuta lo siguiente:
|
1 2 3 |
/path/to/sync/gateway/bin/sync_gateway /path/to/project/sync-gateway-config.json |
Puede comprobar que se está ejecutando visitando https://localhost:4985 desde su navegador web.
Con Couchbase Sync Gateway funcionando, relanza tu aplicación Electron y deberías notar que replica los datos.
Conclusión
Enhorabuena. Acaba de crear una aplicación de escritorio multiplataforma utilizando únicamente tecnologías web como HTML, JavaScript y
CSS. Lo que es aún mejor es que esta aplicación de escritorio se sincronizará con Couchbase Server.
Si quieres seguir leyendo sobre cómo desplegar esta aplicación como un binario independiente, puedes encontrarlo en el GitHub oficial
Documentación electrónica.
¿qué dirección debo utilizar desde electron para indicar a sync-gateway que los datos proceden de? En la aplicación se utiliza localhost:9000. ¿Es eso cierto cuando distribuyo mi aplicación al equipo?
Estoy usando couchbase en mi oficina con sync-gateway. la app en laptops en windows con electron.
Bueno, una aplicación Electron no se considera una aplicación web. No debería tener problemas de compartición de recursos entre orígenes (CORS). Sólo tiene que asegurarse de que la aplicación Electron apunta a su Sync Gateway.
Lo mejor,
gracias por su respuesta, tengo su aplicación angular pre-electrón sincronización con couchbase sync-gateway. Estás diciendo que cuando añado estas adiciones por encima de esperar que todavía sincronizar?
también la consola muestra que jquery está fallando?
Sí, sólo hay que empaquetar la aplicación en Electron. jQuery falta porque no lo añadí. No lo añadí porque no estaba usando las características de Bootstrap que lo usaban. Puedes ignorarlo.
Lo mejor,
Gracias por tu ayuda y por seguir tus otros tutoriales. Muchas gracias. sus tutoriales son muy útiles. también sigo sus otros tutoriales. gracias
No hay problema :-)
q
¿alguna idea de lo que está pasando aquí?
2016-04-28T22:55:47.375-04:00 Changes+: Notificación para comprobar la terminación de la alimentación _changes
2016-04-28T22:55:47.375-04:00 Changes: MultiChangesFeed hecho
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 Cambios+: Int secuencia multi cambios alim...
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: channels expand to 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 esperando...
2016-04-28T22:55:48.294-04:00 Changes+: Esperando a que el recuento de \"test-database\"\ pase de 7.
No veo nada fuera de lo normal. ¿Qué hace y qué no hace? Un poco más de contexto sería útil.
Lo mejor,
Probablemente estoy malinterpretando algo. El contenido que he publicado es mi salida de terminal cuando se ejecuta:
/ruta/a/sync/gateway/bin/sync_gateway /ruta/a/proyecto/sync-gateway-config.json
Y luego vuelve a lanzar la aplicación con electron .
En la ventana del navegador de https://localhost:4985Sólo tiene información sobre la versión.
{\"ADMIN":true,\"couchdb\":\"Welcome\",\"vendor":{\"name":\"Couchbase Sync Gateway\",\"version":1.2},\"version":\"Couchbase Sync Gateway/1.2.0(79;9df63a5)\"}
No hay nada ahí o en mi aplicación que sugiera que estoy sincronizando registros. Si pongo dos registros en mi aplicación (nombre, correo electrónico, etc.), no lo veo en mi aplicación. https://localhost:4985. ¿Debería verlo allí?
¿Qué debería ver cuando intento validar que se está ejecutando visitando https://localhost:4985 desde el navegador web? Probablemente me estoy perdiendo una cosa o muchas cosas. Gracias por cualquier sugerencia.
Probablemente quieras usar el puerto 4984, en lugar del 4985.
Avísame si se soluciona el problema.
Lo mejor,
Gracias por su respuesta. Tendré que investigar esto cuando tenga más tiempo. He probado los dos puertos que has indicado (uno es admin y el otro no). Ninguno replicaba los datos de la aplicación. Podría ser un problema con mi mac o un descuido tonto que me llevará un tiempo averiguar.
He probado su ejemplo a nivel local en mi mac, funcionó bien como se esperaba, ahora bien, si tuviera que compilar mi aplicación de electrones y el uso en alguna otra máquina Mac o Windows, ¿cuáles deberían ser los cambios necesarios para que todos los usuarios pueden tener un conjunto diferente de cubos de datos y pueden utilizar la aplicación de forma individual.
No deberías dar a cada usuario su propio bucket. En su lugar, debe utilizar las funciones de autenticación incorporadas en la puerta de enlace de sincronización para los permisos de lectura y escritura.
A continuación, puede tener una aplicación completa con muchos usuarios
[...] hace años escribí sobre el uso de Couchbase en una aplicación de escritorio usando AngularJS 1.0 y Electron, pero con la tecnología que había en ese periodo bien podría haber habido dinosaurios. Mucho ha cambiado [...]
[...] puede parecerte familiar por dos razones. En primer lugar, lo tomé de un post anterior que escribí sobre Electron y, en segundo lugar, lo saqué directamente de la documentación de Electron. Nuestro [...]