¿Cómo desarrollar aplicaciones de escritorio usando HTML / CSS / JavaScript? [cerrado]

189

Primero, no estoy interesado en hacer esto profesionalmente. Soy un desarrollador web, un compañero de trabajo mío que se fue recientemente a Spotify y dijo que trabajará principalmente en JavaScript para la aplicación Spotify Desktop. Dijo que usa "marco de Chrome" y que todo lo que está dentro se hace como una aplicación web (HTML / JS / CSS).

Como desarrollador web que nunca creó nada para Desktop, esta es una gran noticia. Si puedo usar las tecnologías que ya conozco e implementarlas dentro de una especie de "marco" y todavía ser capaz de construir una aplicación de Windows o mejor plataforma cruzada.

Sé que no mencioné nada sobre la base de datos, pero incluso una simple aplicación de escritorio hello world con tecnologías web sería genial para comenzar.

Entonces, ¿cómo se hace esto? ¿Qué necesito / necesito saber exactamente?

javascript html css desktop-application TK123
fuente
Cabe señalar que hay al menos dos niveles no exclusivos de aplicaciones web. Una sería aplicaciones de estilo de aplicación de una sola página del lado del cliente, y una sería una aplicación que mantenga el estado con una base de datos o algo así. (Por supuesto, las mejores aplicaciones son ambas). Puedes aprender a hacer una sin aprender mucho sobre la otra.
Waleed Khan
Otro hilo relacionado aquí [¿Puedes hacer desarrollo de escritorio usando JavaScript?] [1] [1]: stackoverflow.com/questions/109399/… Saludos, Ben
benbai123
Lo haces mal La web no está diseñada para aplicaciones de escritorio. Período. Si lo desea, puede usar QML / QtQuick, que es una buena compensación (¡pero sigue siendo de escritorio, no web!)
Stef
similar aquí: stackoverflow.com/questions/109399/…
Zhang LongQI
66
electron.atom.io
emlai

Respuestas:

74

Puede comenzar con Titanium para desarrolladores de escritorio. También puede echar un vistazo a Chromium Embedded Framework . Básicamente es un control de navegador web basado en cromo.

Está escrito en C ++ para que pueda hacer todas las cosas del sistema operativo de bajo nivel que desee (Growl, iconos de bandeja, acceso a archivos locales, puertos com, etc.) en su aplicación contenedor, y luego toda la lógica de la aplicación y la interfaz gráfica de usuario en html / javascript. Le permite interceptar cualquier solicitud http para servir recursos locales o realizar alguna acción personalizada. Por ejemplo, el contenedor puede interceptar una solicitud a http://localapp.com/SetTrayIconState?state=active y luego llamar a la función C ++ para actualizar el icono de la bandeja.

También le permite crear funciones a las que se puede llamar directamente desde JavaScript.

Es muy difícil depurar JavaScript directamente en CEF. No hay soporte para nada como Firebug.

También puede probar AppJS.com (Ayuda a construir aplicaciones de escritorio para Linux, Windows y Mac usando HTML, CSS y JavaScript)

Además, como señaló @Clint, el equipo de brackets.io (Adobe) creó un shell increíble utilizando Chromium Embedded Framework que hace que sea mucho más fácil comenzar. Se llama shell de corchetes: github.com/adobe/brackets-shell Obtenga más información aquí: clintberry.com/2013/html5-desktop-apps-with-brackets-shell

Alfredo
fuente
3
CEF tiene herramientas de desarrollo de Chrome integradas para que pueda usarlo para depurar js. AppJS también tiene acceso de bajo nivel al sistema operativo utilizando las API de nodejs.
Morteza Milani
1
El equipo de Bracket.io (Adobe) creó un shell increíble usando Chromium Embedded Framework que hace que sea mucho más fácil comenzar. Se llama el shell de brackets: github.com/adobe/brackets-shell Obtenga más información aquí: clintberry.com/2013/html5-desktop-apps-with-brackets-shell
Clint
Actualmente estoy usando CEF y Eclipse como herramientas de desarrollo, y es posible vincular CEF a Chrome Developer Tools pasando --remote-debugging-port = 8080 a las configuraciones de ejecución para los argumentos del programa, luego vaya a localhost: 8080 en Chrome . Por lo tanto, elimine la parte: es muy difícil depurar JavaScript directamente en CEF. No hay soporte para nada como Firebug. -
Stranded Kid
Además, estoy empezando a desarrollar Kontena コ ン テ ナgithub.com/jhg/kontena para desarrollar una solución para Win32, Linux, Unix like, Mac y SmartPhone que se basará en CEF, PhoneGap, Backet.io de Adobe, AppJS, etc. Es tan inestable y solo es un prototipo ahora para obtener un MVP, está escrito en Python para el concepto de prueba, pero traducirá el código a C ++ / C con QT5 (ahora usa QT4) y cuando esté en C ++ / C comenzará la traducción para mobil apoyo.
@JHG buen trabajo .. Háganos saber cuándo se lanzó oficialmente y se corrigió un error
Alfred
33

NW.js

(Anteriormente conocido como node-webkit)

Sugeriría NW.js si está familiarizado con Node o tiene experiencia con JavaScript.

NW.js es un tiempo de ejecución de la aplicación basado en Chromium y node.js.

Caracteristicas

  • Aplicaciones escritas en HTML5 moderno, CSS3, JS y WebGL
  • Soporte completo para las API de Node.js y todos sus módulos de terceros.
  • Buen rendimiento: Node y WebKit se ejecutan en el mismo subproceso: las llamadas a funciones se realizan directamente; los objetos están en el mismo montón y solo pueden referenciarse entre sí
  • Fácil de empaquetar y distribuir aplicaciones
  • Disponible en Linux, Mac OS X y Windows

Puede encontrar el repositorio de NW.js aquí , y una buena introducción a NW.js aquí . Si te gusta aprender Node.js , recomendaría esta publicación SO con muchos enlaces buenos.

Rawa
fuente
2
Secundado Gran herramienta
Erik Reppen
Pero esto no se puede distribuir entre las personas sin pedirles que instalen node y node-webkit, ¿verdad?
Jānis Gruzis
@ JānisGruzis No, usted envió su aplicación con NW.js binarios .
aproximadamente el
27

Awesomium facilita el uso de la interfaz de usuario HTML en su aplicación C ++ o .NET

Actualizar

Mi respuesta anterior ahora está desactualizada. En estos días, sería una locura no considerar el uso de Electron para esto. Además, se han desarrollado muchas aplicaciones de escritorio populares.

Ronnie Overby
fuente
16

NOTA: AppJS está en desuso y ya no se recomienda.

Echa un vistazo a NW.js en su lugar.

Siwei Shen 申思维
fuente
3
Esto parece haber sido desaprobado por los creadores de la aplicación
Dan Esparza
@DanEsparza gracias, mejoré mi respuesta
Siwei Shen 申思维
9

Parece que las soluciones para las aplicaciones de escritorio HTML / JS / CSS no faltan.

Una solución que acabo de encontrar es TideSDK: http://www.tidesdk.org/ , que parece muy prometedor, mirando la documentación.

Puede desarrollar con Python, PHP o Ruby, y empaquetarlo para Mac, Windows o Linux.

mydoghasworms
fuente
1
Parecía prometedor, pero parece que ya no se está desarrollando. El equipo central ahora está trabajando en algo llamado TideKit, pero les lleva una eternidad lanzarlo
ADEMÁS
1
Sí, lástima Sin embargo, parecía prometedor cuando respondí. Supongo que esa es una de las razones por las que desaprueban las preguntas sobre recomendaciones para cosas.
mydoghasworms
3

Lamento reventar su burbuja, pero el cliente de escritorio Spotify es solo un navegador basado en Webkit . Por supuesto, expone una funcionalidad adicional específica, pero solo puede ejecutar JS y renderizar HTML / CSS porque tiene un motor JS y un motor de renderizado Chromium. Esto no le ayuda a codificar una aplicación web del lado del cliente y a implementarla en múltiples plataformas.

Lo que está buscando es similar a Sencha Touch , un marco que permite que las aplicaciones HTML5 se implementen de forma nativa en dispositivos iOS, Android y Blackberry. Básicamente, actúa como intermediario entre ciertas llamadas API y la funcionalidad específica del dispositivo disponible.

No tengo experiencia con appcelerator , aunque parece estar haciendo exactamente eso, y recibo críticas muy favorables en línea. Debe intentarlo (a menos que quiera volver a 1999 y continuar con MS HTA ;)

ov
fuente
Utiliza webkit para la aplicación, pero el software principal no se basa en html / js
Sucrenoir
1

Sé que hay Fluid and Prism (hay otros, ese es el que solía usar) que te permiten cargar un sitio web en lo que parece una aplicación independiente.

En Chrome, puede crear accesos directos de escritorio para sitios web. (lo haces desde Chrome, no puedes / no debes empacar eso con tu aplicación) Chrome Frame es diferente:

Google Chrome Frame es un complemento diseñado para Internet Explorer basado en el proyecto de código abierto Chromium; trae las tecnologías web abiertas de Google Chrome a Internet Explorer.

Necesitaría tener algún tipo de envoltorio como ese para su aplicación web, y luego el resto son las tecnologías web a las que está acostumbrado. Puede usar el almacenamiento local HTML5 para almacenar datos mientras la aplicación está fuera de línea. Creo que incluso podrías trabajar con SQLite.

Sin embargo, no sé cómo harías para acceder a funciones específicas del sistema operativo. Lo que describí anteriormente tiene las mismas limitaciones que cualquier sitio web "normal". Esperemos que esto le brinde algún tipo de orientación sobre dónde comenzar.

Sachleen
fuente
0

CEF ofrece mucha flexibilidad y opciones de personalización. Pero si la intención es desarrollar rápidamente el kit de web de nodo también es una buena opción. El kit Node-web también ofrece la capacidad de llamar a módulos de nodo directamente desde DOM.

Si no hay módulos nativos para integrar, Node-Webkit puede ofrecer un mejor kilometraje. Con los módulos nativos C / C ++ o incluso C #, es mejor con CEF.

harsha
fuente