Como desenvolver aplicativos da área de trabalho usando HTML / CSS / JavaScript? [fechadas]

189

Primeiro, não estou interessado em fazer isso profissionalmente. Sou desenvolvedor web, um colega de trabalho que recentemente partiu para o Spotify e disse que estará trabalhando principalmente em JavaScript para o aplicativo Spotify Desktop. Ele disse que usa o "Chrome frame" e tudo dentro é feito como um aplicativo da web (HTML / JS / CSS).

Como desenvolvedor da Web que nunca criou nada para o Desktop, essa é uma ótima notícia. Se eu puder usar as tecnologias, eu já as conheço e as implemento dentro de algum tipo de "quadro" e ainda assim consigo criar um Windows ou, melhor ainda, um aplicativo de plataforma cruzada.

Eu sei que não mencionei nada sobre o banco de dados, mas mesmo um aplicativo simples para o desktop Hello World com tecnologias da Web seria ótimo para começar.

Então, como alguém faz isso? Exatamente o que eu preciso / preciso saber?

TK123
fonte
Deve-se observar que há pelo menos duas camadas não exclusivas de aplicativo da web. Um deles seria o estilo de aplicativo de página única do lado do cliente e o outro seria um aplicativo que mantém o estado em um banco de dados ou algo assim. (Obviamente, os melhores aplicativos são os dois.) Você pode aprender a fazer um sem aprender muito sobre o outro.
Waleed Khan
Outro segmento relacionada aqui [Você pode fazer desenvolvimento desktop usando JavaScript?] [1] [1]: stackoverflow.com/questions/109399/... Atenciosamente, Ben
benbai123
Você faz errado. A Web não foi projetada para aplicativos de desktop. Period.If você quiser, pode usar QML / QtQuick, que é um bom trade-off (mas permanece desktop, não web!)
Stef
semelhante aqui: stackoverflow.com/questions/109399/…
Zhang LongQI 5/16/16

Respostas:

74

Você pode começar com o Titanium for desktop dev. Além disso, você pode dar uma olhada no Chromium Embedded Framework . É basicamente um controle de navegador da Web baseado em cromo.

Ele está escrito em C ++ para que você possa fazer todo o material de baixo nível do sistema operacional desejado (Growl, ícones de bandeja, acesso a arquivos locais, portas COM etc.) no aplicativo de contêiner e, em seguida, toda a lógica e a interface do aplicativo em html / javascript. Permite interceptar qualquer solicitação http para servir recursos locais ou executar alguma ação personalizada. Por exemplo, uma solicitação para http://localapp.com/SetTrayIconState?state=active pode ser interceptada pelo contêiner e, em seguida, chamar a função C ++ para atualizar o ícone da bandeja.

Também permite criar funções que podem ser chamadas diretamente do JavaScript.

É muito difícil depurar JavaScript diretamente no CEF. Não há suporte para nada como o Firebug.

Você também pode tentar o AppJS.com (ajuda a criar aplicativos de desktop. Para Linux, Windows e Mac usando HTML, CSS e JavaScript)

Além disso, como apontado por @Clint, a equipe do brackets.io (Adobe) criou um shell incrível usando o Chromium Embedded Framework que facilita muito o início. É chamado de shell brackets: github.com/adobe/brackets-shell Saiba mais sobre isso aqui: clintberry.com/2013/html5-desktop-apps-with-brackets-shell

Alfredo
fonte
3
O CEF possui ferramentas de desenvolvimento do Chrome integradas para que você possa usá-lo para depurar js. O AppJS também possui acesso de baixo nível ao SO usando APIs do nodejs.
Morteza Milani
1
A equipe do Bracket.io (Adobe) criou um shell incrível usando o Chromium Embedded Framework que facilita muito a introdução. É chamado de shell parênteses: github.com/adobe/brackets-shell Saiba mais sobre ele aqui: clintberry.com/2013/html5-desktop-apps-with-brackets-shell
Clint
Atualmente, estou usando o CEF e o Eclipse como ferramentas de desenvolvimento, e é possível vincular o CEF ao Chrome Developper Tools passando --remote-debugging-port = 8080 para as configurações de execução dos programas args e, em seguida, vá para localhost: 8080 no Chrome . Portanto, remova a parte - é muito difícil depurar o JavaScript diretamente no CEF. Não há suporte para nada como o Firebug. -
Stranded Kid
Além disso, estou começando a desenvolver o Kontena コ ン テ ナ github.com/jhg/kontena para desenvolver uma solução para Win32, Linux, como Unix, Mac e SmartPhone que serão baseados em CEF, PhoneGap, Backet.io da Adobe, AppJS, etc. É tão instável e agora é apenas um protótipo para obter um MVP, é escrito em Python para o conceito de teste, mas traduzirá o código para C ++ / C com QT5 (agora use QT4) e quando estiver em C ++ / C, inicie a tradução para mobil Apoio, suporte.
@JHG bom trabalho .. Deixe-nos saber quando o seu oficialmente lançado e bug-fixo
Alfred
33

NW.js

(Anteriormente conhecido como node-webkit)

Eu sugeriria o NW.js se você estiver familiarizado com o Node ou com JavaScript.

NW.js é um tempo de execução de aplicativo baseado no Chromium e node.js.

Recursos

  • Aplicativos escritos em HTML5, CSS3, JS e WebGL modernos
  • Suporte completo para APIs do Node.js. e todos os seus módulos de terceiros.
  • Bom desempenho: o nó e o WebKit são executados no mesmo encadeamento: as chamadas de função são feitas diretamente; objetos estão na mesma pilha e podem apenas fazer referência um ao outro
  • Fácil de empacotar e distribuir aplicativos
  • Disponível no Linux, Mac OS X e Windows

Você pode encontrar o repositório NW.js. aqui e uma boa introdução ao NW.js. aqui . Se você gosta de aprender o Node.js, eu recomendaria este post com muitos bons links.

Rawa
fonte
2
Destacado. Ótima ferramenta.
Erik Reppen
Mas isso não pode ser distribuído entre as pessoas sem pedir para instalar o node e o node-webkit, certo?
Jānis Gruzis
@ JānisGruzis Não, você enviado a sua aplicação com NW.js binários .
approxiblue
27

O Awesomium facilita o uso da interface do usuário HTML em seu aplicativo C ++ ou .NET

Atualizar

Minha resposta anterior está desatualizada. Hoje em dia você seria louco por não usar o Electron para isso. Muitos aplicativos populares de desktop foram desenvolvidos sobre ele.

Ronnie Overby
fonte
16

NOTA: O AppJS foi descontinuado e não é mais recomendado.

Dê uma olhada em NW.js vez.

Siwei Shen 申思维
fonte
3
Isso parece ter sido preterido pelos criadores do appjs
Dan Esparza
@DanEsparza obrigado, melhorei minha resposta
Siwei Shen 申思维
9

Parece que as soluções para aplicativos de desktop HTML / JS / CSS são escassas.

Uma solução que acabei de encontrar é o TideSDK: http://www.tidesdk.org/ , que parece muito promissor, olhando a documentação.

Você pode desenvolver com Python, PHP ou Ruby e empacotá-lo para Mac, Windows ou Linux.

mydoghasworms
fonte
1
Parecia promissor, mas não está mais sendo desenvolvido. A equipe principal está trabalhando agora em TideKit algo chamada, mas ele leva uma eternidade para eles para liberá-lo - mais ele vai custar dinheiro :(
TheStoryCoder
1
Sim, pena. Parecia promissor no momento em que respondi. Eu acho que essa é uma razão pela qual eles desaprovam perguntas sobre recomendações de coisas.
Mydoghasworms 19/10/2015
3

Desculpe estourar sua bolha, mas o cliente de desktop Spotify é apenas um navegador baseado em Webkit . Obviamente, ele expõe funcionalidades adicionais específicas, mas só pode executar JS e renderizar HTML / CSS porque possui um mecanismo JS e um mecanismo de renderização Chromium. Isso não ajuda na codificação de um aplicativo Web do lado do cliente e na implantação em várias plataformas.

O que você procura é semelhante ao Sencha Touch - uma estrutura que permite que os aplicativos HTML5 sejam implantados nativamente em dispositivos iOS, Android e Blackberry. Ele basicamente atua como um intermediário entre determinadas chamadas de API e a funcionalidade específica do dispositivo disponível.

Não tenho experiência com appcelerator , mas parece que ele está fazendo exatamente isso - e recebe críticas muito favoráveis ​​online. Você deve tentar (a menos que queira voltar a 1999 e rodar com o MS HTA ;)

ov
fonte
Ele usa webkit para aplicação, mas o soft principal não se baseia em html / js
Sucrenoir
1

Eu sei que há Fluid e Prism (existem outros, é o que eu costumava usar) que permitem carregar um site no que parece ser um aplicativo independente.

No Chrome, você pode criar atalhos da área de trabalho para sites. (você faz isso no Chrome, não pode / não deve empacotar isso com o aplicativo) O Chrome Frame é diferente:

O Google Chrome Frame é um plug-in projetado para o Internet Explorer com base no projeto de código aberto Chromium; ele traz as tecnologias da Web aberta do Google Chrome para o Internet Explorer.

Você precisaria ter algum tipo de invólucro como esse para o seu aplicativo da web e, em seguida, o resto são as tecnologias da web que você está acostumado. Você pode usar o armazenamento local HTML5 para armazenar dados enquanto o aplicativo estiver offline. Eu acho que você pode até trabalhar com SQLite.

Mas não sei como você acessaria recursos específicos do SO. O que eu descrevi acima tem as mesmas limitações que qualquer site "regular". Espero que isso lhe dê algum tipo de orientação sobre por onde começar.

sachleen
fonte
0

O CEF oferece muita flexibilidade e opções para personalização. Mas se a intenção é desenvolver rapidamente o node-webkit também é uma boa opção. O kit Node-Web também oferece a capacidade de chamar módulos de nó diretamente do DOM.

Se não houver módulos nativos para integrar o Node-Webkit, pode oferecer uma melhor quilometragem. Com os módulos nativos C / C ++ ou mesmo C #, é melhor com o CEF.

harsha
fonte