Comment développer des applications de bureau en utilisant HTML / CSS / JavaScript? [fermé]


189

Premièrement, je ne suis pas intéressé à faire cela de manière professionnelle. Je suis un développeur Web, un de mes collègues est récemment parti pour Spotify et a déclaré qu'il travaillerait principalement en JavaScript pour l'application Spotify Desktop. Il a dit qu'il utilise "Chrome frame" et que tout à l'intérieur se fait comme une application Web (HTML / JS / CSS).

En tant que développeur Web qui n'a jamais rien construit pour Desktop, c'est une excellente nouvelle. Si je peux utiliser les technologies que je connais déjà et les implémenter dans une sorte de «cadre» tout en étant capable de créer une application Windows ou mieux encore multi-plateforme.

Je sais que je n'ai rien mentionné à propos de la base de données, mais même une simple application de bureau Hello World avec des technologies Web serait formidable pour démarrer.

Alors, comment s'y prendre? Que dois-je / dois savoir exactement?


Il convient de noter qu'il existe au moins deux niveaux non exclusifs d'applications Web. L'un serait des applications de style d'application d'une seule page côté client, et l'autre serait une application qui maintient l'état avec une base de données ou quelque chose. (Bien sûr, les meilleures applications sont les deux.) Vous pouvez apprendre à en faire l'une sans en apprendre beaucoup sur l'autre.
Waleed Khan

Un autre fil de discussion connexe ici [Pouvez-vous faire du développement de bureau en utilisant JavaScript?] [1] [1]: stackoverflow.com/questions/109399/… Cordialement, Ben
benbai123

Vous le faites mal. Le Web n'est pas conçu pour une application de bureau. Si vous le souhaitez, vous pouvez utiliser QML / QtQuick, ce qui est un bon compromis (mais cela reste un ordinateur de bureau, pas le Web!)
Stef


Réponses:


74

Vous pouvez commencer avec Titanium pour les développeurs de bureau. Vous pouvez également jeter un œil à Chromium Embedded Framework . Il s'agit essentiellement d'un contrôle de navigateur Web basé sur le chrome.

Il est écrit en C ++ pour que vous puissiez faire tout ce que vous voulez du système d'exploitation de bas niveau (Growl, icônes de la barre d'état, accès aux fichiers locaux, ports com, etc.) dans votre application de conteneur, puis toute la logique de l'application et l'interface graphique en html / javascript. Il vous permet d'intercepter toute demande http pour servir des ressources locales ou effectuer une action personnalisée. Par exemple, une demande à http://localapp.com/SetTrayIconState?state=active pourrait être interceptée par le conteneur, puis appeler la fonction C ++ pour mettre à jour l'icône de la barre d'état.

Il vous permet également de créer des fonctions qui peuvent être appelées directement depuis JavaScript.

Il est très difficile de déboguer JavaScript directement dans CEF. Il n'y a aucun support pour quelque chose comme Firebug.

Vous pouvez également essayer AppJS.com (Aide à créer des applications de bureau. Pour Linux, Windows et Mac en utilisant HTML, CSS et JavaScript)

De plus, comme l'a souligné @Clint, l'équipe de brackets.io (Adobe) a créé un shell génial à l'aide de Chromium Embedded Framework qui facilite grandement la mise en route. Il s'appelle le shell brackets: github.com/adobe/brackets-shell Pour en savoir plus, cliquez ici: clintberry.com/2013/html5-desktop-apps-with-brackets-shell


3
CEF a des outils de développement Chrome intégrés afin que vous puissiez l'utiliser pour déboguer js. AppJS dispose également d'un accès de bas niveau au système d'exploitation à l'aide des API nodejs.
Morteza Milani

1
L'équipe de Bracket.io (Adobe) a créé un shell génial utilisant Chromium Embedded Framework qui facilite grandement la mise en route. Il s'appelle le shell brackets: github.com/adobe/brackets-shell Pour en savoir plus, cliquez ici: clintberry.com/2013/html5-desktop-apps-with-brackets-shell
Clint

J'utilise actuellement CEF et Eclipse comme outils de développement, et il est possible de lier CEF aux outils de développement Chrome en passant --remote-debugging-port = 8080 aux configurations d'exécution pour les arguments de programme, puis accédez à localhost: 8080 dans Chrome . Veuillez donc supprimer la partie - il est très difficile de déboguer JavaScript directement dans CEF. Il n'y a aucun support pour quelque chose comme Firebug. -
Stranded Kid le

Aussi, je commence à développer Kontena コ ン テ ナgithub.com/jhg/kontena pour le développement d'une solution pour Win32, Linux, Unix comme, Mac et SmartPhone qui sera basée sur CEF, PhoneGap, Backet.io d'Adobe, AppJS, etc. . Il est tellement instable et n'est qu'un prototype maintenant pour obtenir un MVP, est écrit en Python pour le concept de test mais sera traduit du code en C ++ / C avec QT5 (utilisez maintenant QT4) et quand il sera en C ++ / C, commencez la traduction pour mobil soutien.

@JHG bon travail .. Faites-nous savoir quand sa sortie officielle et son bug corrigé
Alfred

33

NW.js

(Anciennement connu sous le nom de node-webkit)

Je suggérerais NW.js si vous êtes familier avec Node ou expérimenté avec JavaScript.

NW.js est un runtime d'application basé sur Chromium et node.js.

Caractéristiques

  • Applications écrites en HTML5, CSS3, JS et WebGL modernes
  • Prise en charge complète des API Node.js et de tous ses modules tiers.
  • Bonnes performances: Node et WebKit s'exécutent dans le même thread: Les appels de fonction sont simples; les objets sont dans le même tas et peuvent simplement se référencer
  • Facile à emballer et à distribuer des applications
  • Disponible sur Linux, Mac OS X et Windows

Vous pouvez trouver le repo NW.js ici , et une bonne introduction à NW.js ici . Si vous avez envie d'apprendre Node.js, je recommanderais cet article SO avec beaucoup de bons liens.


2
Appuyé. Excellent outil.
Erik Reppen le

Mais cela ne peut pas être distribué entre les gens sans leur demander d'installer node et node-webkit, non?
Jānis Gruzis

@ JānisGruzis Non, votre application expédié avec les binaires de NW.js .
approxiblue

27

Awesomium facilite l'utilisation de l'interface utilisateur HTML dans votre application C ++ ou .NET

Mettre à jour

Ma réponse précédente est maintenant dépassée. Ces jours-ci, vous seriez fou de ne pas envisager d'utiliser Electron pour cela. De nombreuses applications de bureau populaires ont été développées en plus.



9

Il semble que les solutions pour les applications de bureau HTML / JS / CSS ne manquent pas.

Une solution que je viens de trouver est TideSDK: http://www.tidesdk.org/ , qui semble très prometteuse, en regardant la documentation.

Vous pouvez développer avec Python, PHP ou Ruby et le packager pour Mac, Windows ou Linux.


1
Cela avait l'air prometteur, mais il ne semble plus être développé. L'équipe principale travaille maintenant sur quelque chose qui s'appelle TideKit, mais il leur faut une éternité pour le publier - PLUS cela coûtera de l'argent :(
TheStoryCoder

1
Oui, dommage. Cela avait l'air prometteur au moment où j'ai répondu. Je suppose que c'est l'une des raisons pour lesquelles ils froncent les sourcils sur les questions concernant les recommandations de choses.
mydoghasworms

3

Désolé d'éclater votre bulle mais le client de bureau Spotify n'est qu'un navigateur basé sur Webkit . Bien sûr, il expose des fonctionnalités supplémentaires spécifiques, mais il ne peut exécuter JS et rendre HTML / CSS que car il dispose d'un moteur JS ainsi que d'un moteur de rendu Chromium. Cela ne vous aide pas à coder une application Web côté client et à le déployer sur plusieurs plates-formes.

Ce que vous recherchez est similaire à Sencha Touch - un cadre qui permet aux applications HTML5 d'être déployées de manière native sur les appareils iOS, Android et Blackberry. Il agit essentiellement comme un intermédiaire entre certains appels d'API et les fonctionnalités spécifiques à l'appareil disponibles.

Je n'ai aucune expérience avec appcelerator , mais il semble faire exactement cela - et obtenir des critiques très favorables en ligne. Vous devriez essayer (à moins que vous ne vouliez revenir en 1999 et rouler avec MS HTA ;)


Il utilise webkit pour l'application mais le logiciel principal n'est pas basé sur html / js
Sucrenoir

1

Je sais qu'il y a Fluid et Prism (il y en a d'autres, c'est celui que j'utilisais auparavant) qui vous permettent de charger un site Web dans ce qui ressemble à une application autonome.

Dans Chrome, vous pouvez créer des raccourcis sur le bureau pour les sites Web. (vous faites cela à partir de Chrome, vous ne pouvez / ne devriez pas emballer cela avec votre application) Chrome Frame est différent:

Google Chrome Frame est un plug-in conçu pour Internet Explorer basé sur le projet open-source Chromium; il apporte les technologies Web ouvertes de Google Chrome à Internet Explorer.

Vous auriez besoin d'une sorte de wrapper comme celui-ci pour votre application Web, puis le reste correspond aux technologies Web auxquelles vous êtes habitué. Vous pouvez utiliser le stockage local HTML5 pour stocker des données lorsque l'application est hors ligne. Je pense que vous pourrez peut-être même travailler avec SQLite.

Cependant, je ne sais pas comment vous feriez pour accéder aux fonctionnalités spécifiques du système d'exploitation. Ce que j'ai décrit ci-dessus a les mêmes limites que n'importe quel site Web «régulier». J'espère que cela vous donne une sorte d'indications sur par où commencer.



0

CEF offre beaucoup de flexibilité et d'options de personnalisation. Mais si l'intention est de développer rapidement, node-webkit est également une bonne option. Node-web kit offre également la possibilité d'appeler des modules de nœuds directement à partir du DOM.

S'il n'y a pas de modules natifs à intégrer, Node-Webkit peut offrir un meilleur kilométrage. Avec les modules natifs C / C ++ ou même C # c'est mieux avec CEF.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.