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 instale -g electrón-preconstruido |
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 |
{ "nombre" : "electron-couchbase", "version" : "0.0.1", "principal" : "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 aplicación = requiere(aplicación); // Módulo para controlar la vida de la aplicación. var BrowserWindow = requiere(ventana-navegador); // Módulo para crear la ventana nativa del navegador. // Informe de caídas a nuestro servidor. requiere(informe de accidente).iniciar(); // Mantenga una referencia global del objeto ventana, si no lo hace, la ventana se // se cerrará automáticamente cuando el objeto JavaScript sea recolectado. var mainWindow = null; // Salir cuando todas las ventanas estén cerradas. aplicación.en(ventana-todo-cerrado, función() { // En OS X es habitual que las aplicaciones y su barra de menú // para permanecer activo hasta que el usuario salga explícitamente con Cmd + Q si (proceso.plataforma != darwin) { aplicación.abandone(); } }); // Este método será llamado cuando Electron haya terminado // inicialización y está listo para crear ventanas de navegación. aplicación.en(listo, función() { // Crear la ventana del navegador. mainWindow = nuevo BrowserWindow({anchura: 800, altura: 600}); // y carga el index.html de la aplicación. mainWindow.loadUrl(archivo:// + __dirname + /público/index.html); // Se emite cuando se cierra la ventana. mainWindow.en(cerrado, función() { // Dereferenciar el objeto ventana, normalmente se almacenan las ventanas // en un array si tu app soporta multi ventanas, este es el momento // cuando debe eliminar el elemento correspondiente. 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 clonar 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 |
electrón . |
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 |
/ruta/a/sincronizar/pasarela/papelera/sync_gateway /ruta/a/proyecto/sincronizar-pasarela-config.json |
Puede comprobar que se está ejecutando visitando http://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 http://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. http://localhost:4985. ¿Debería verlo allí?
¿Qué debería ver cuando intento validar que se está ejecutando visitando http://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 [...]