Bagaimana cara mengembangkan Aplikasi Desktop menggunakan HTML / CSS / JavaScript? [Tutup]

189

Pertama, saya tidak tertarik melakukan ini secara profesional. Saya seorang pengembang web, rekan kerja saya baru-baru ini berangkat ke Spotify dan mengatakan ia akan bekerja sebagian besar dalam JavaScript untuk aplikasi Desktop Spotify. Dia mengatakan menggunakan "bingkai Chrome" dan semua yang ada di dalamnya dilakukan seperti aplikasi web (HTML / JS / CSS).

Sebagai pengembang web yang tidak pernah membuat apa pun untuk Desktop, ini adalah berita bagus. Jika saya bisa menggunakan teknologi saya sudah tahu dan menerapkannya di dalam semacam "bingkai" dan masih bisa membangun windows atau aplikasi lintas platform yang lebih baik.

Saya tahu saya tidak menyebutkan apa pun tentang basis data, tetapi bahkan aplikasi desktop hello world sederhana dengan teknologi web akan sangat bagus untuk memulai.

Jadi, bagaimana orang melakukannya? Apa tepatnya yang perlu / perlu saya ketahui?

TK123
sumber
Perlu dicatat bahwa setidaknya ada dua tingkatan non-eksklusif web-app-iness. Satu akan menjadi aplikasi gaya aplikasi satu halaman sisi klien, dan satu akan menjadi aplikasi yang mempertahankan keadaan dengan database atau sesuatu. (Tentu saja, aplikasi terbaik adalah keduanya.) Anda dapat belajar bagaimana melakukan satu tanpa banyak belajar tentang yang lain.
Waleed Khan
Utas terkait lainnya di sini [Dapatkah Anda melakukan Pengembangan Desktop menggunakan JavaScript?] [1] [1]: stackoverflow.com/questions/109399/... Salam, Ben
benbai123
Anda salah melakukannya. Web tidak dirancang untuk aplikasi desktop. Jika Anda mau, Anda bisa menggunakan QML / QtQuick, yang merupakan trade-off yang bagus (tapi tetap desktop, bukan web!)
Stef
serupa di sini :stackoverflow.com/questions/109399/...
Zhang LongQI

Jawaban:

74

Anda dapat mulai dengan Titanium untuk dev desktop. Anda juga mungkin melihat Kerangka Tertanam Chromium . Ini pada dasarnya kontrol browser web berdasarkan chromium.

Ini ditulis dalam C ++ sehingga Anda dapat melakukan semua hal OS tingkat rendah yang Anda inginkan (Growl, ikon baki, akses file lokal, port com, dll) di aplikasi wadah Anda, dan kemudian semua logika aplikasi dan gui di html / javascript. Ini memungkinkan Anda untuk mencegat setiap permintaan http untuk melayani sumber daya lokal atau melakukan beberapa tindakan kustom. Misalnya, permintaan ke http://localapp.com/SetTrayIconState?state=active dapat dicegat oleh wadah dan kemudian memanggil fungsi C ++ untuk memperbarui ikon baki.

Ini juga memungkinkan Anda untuk membuat fungsi yang dapat dipanggil langsung dari JavaScript.

Sangat sulit untuk men-debug JavaScript secara langsung di CEF. Tidak ada dukungan untuk apa pun seperti Firebug.

Anda juga dapat mencoba AppJS.com (Membantu membangun Aplikasi Desktop. Untuk Linux, Windows dan Mac menggunakan HTML, CSS, dan JavaScript)

Juga, seperti yang ditunjukkan oleh @Clint, tim di brackets.io (Adobe) membuat shell yang mengagumkan menggunakan Chromium Embedded Framework yang membuatnya lebih mudah untuk memulai. Ini disebut shell kurung: github.com/adobe/brackets-shell Cari tahu lebih lanjut di sini: clintberry.com/2013/html5-desktop-apps-with-brackets-shell

alfred
sumber
3
CEF memiliki alat dev chrome yang terpasang di dalamnya sehingga Anda dapat menggunakannya untuk men-debug js. AppJS juga memiliki akses tingkat rendah ke OS menggunakan API nodejs.
Morteza Milani
1
Tim di Bracket.io (Adobe) membuat shell yang mengagumkan menggunakan Chromium Embedded Framework yang membuatnya lebih mudah untuk memulai. Ini disebut shell kurung: github.com/adobe/brackets-shell Cari tahu lebih lanjut di sini: clintberry.com/2013/html5-desktop-apps-with-brackets-shell
Clint
Saat ini saya menggunakan CEF, dan Eclipse sebagai alat dev, dan dimungkinkan untuk menautkan CEF ke Chrome Developper Tools dengan mengirimkan --remote-debugging-port = 8080 ke konfigurasi run untuk argumen program, kemudian pergi ke localhost: 8080 di Chrome . Jadi tolong hapus bagian - t sangat sulit untuk men-debug JavaScript secara langsung di CEF. Tidak ada dukungan untuk apa pun seperti Firebug. -
Stranded Kid
Juga, saya mulai mengembangkan Kontena ナ ン テith github.com/jhg/kontena untuk mengembangkan solusi untuk Win32, Linux, seperti Unix, Mac dan SmartPhone yang akan berbasis di CEF, PhoneGap, Backet.io dari Adobe, AppJS, dll. Ini sangat tidak stabil dan hanya prototipe sekarang untuk mendapatkan MVP, ditulis dalam Python untuk konsep pengujian tetapi akan menerjemahkan kode ke C ++ / C dengan QT5 (sekarang gunakan QT4) dan ketika berada di C ++ / C mulai terjemahan untuk mobil dukung.
@JHG kerja bagus .. Beritahu kami kapan secara resmi dirilis dan diperbaiki bug
alfred
33

NW.js

(Sebelumnya dikenal sebagai node-webkit)

Saya akan menyarankan NW.js jika Anda terbiasa dengan Node atau berpengalaman dengan JavaScript.

NW.js adalah runtime aplikasi berdasarkan Chromium dan node.js.

fitur

  • Aplikasi yang ditulis dalam HTML5, CSS3, JS dan WebGL modern
  • Dukungan lengkap untuk Node.js API dan semua modul pihak ketiga.
  • Performa bagus: Node dan WebKit berjalan di utas yang sama: Panggilan fungsi dilakukan secara langsung; objek berada di tumpukan yang sama dan hanya bisa saling referensi
  • Mudah mengemas dan mendistribusikan aplikasi
  • Tersedia di Linux, Mac OS X dan Windows

Anda dapat menemukan repo NW.js di sini , dan pengantar yang bagus untuk NW.js di sini . Jika Anda suka belajar Node.js saya akan merekomendasikan posting SO ini dengan banyak tautan bagus.

Rawa
sumber
2
Diperbantukan. Alat hebat.
Erik Reppen
Tetapi ini tidak dapat didistribusikan antara orang-orang tanpa meminta mereka untuk menginstal node dan node-webkit, kan?
Jānis Gruzis
@ JānisGruzis Tidak, Anda dikirimkan aplikasi Anda dengan NW.js binari .
kira
27

Awesomium memudahkan penggunaan HTML UI di aplikasi C ++ atau .NET Anda

Memperbarui

Jawaban saya sebelumnya sudah usang. Hari-hari ini Anda akan gila untuk tidak melihat menggunakan Elektron untuk ini. Banyak aplikasi desktop populer telah dikembangkan di atasnya.

Ronnie Overby
sumber
16

CATATAN: AppJS sudah usang dan tidak direkomendasikan lagi.

Lihatlah NW.js sebagai gantinya.

Siwei Shen 申思维
sumber
3
Ini tampaknya telah ditinggalkan oleh pencipta appjs
Dan Esparza
@DanEsparza terima kasih, saya memperbaiki jawaban saya
Siwei Shen 申思维
9

Tampaknya solusi untuk aplikasi desktop HTML / JS / CSS tidak kekurangan.

Salah satu solusi yang baru saja saya temui adalah TideSDK: http://www.tidesdk.org/ , yang tampaknya sangat menjanjikan, melihat dokumentasi.

Anda dapat mengembangkan dengan Python, PHP atau Ruby, dan mengemasnya untuk Mac, Windows atau Linux.

mydoghasworms
sumber
1
Tampak menjanjikan, tetapi tidak sedang dikembangkan lagi. Tim inti sekarang sedang mengerjakan sesuatu yang disebut TideKit tetapi butuh selamanya bagi mereka untuk merilisnya - DITAMBAH itu akan memerlukan biaya :(
TheStoryCoder
1
Ya sayang Itu memang terlihat menjanjikan pada saat saya menjawab. Saya kira itu salah satu alasan mengapa mereka tidak menyukai pertanyaan tentang rekomendasi untuk barang-barang.
mydoghasworms
3

Maaf meledak gelembung Anda tapi klien Spotify desktop yang adalah hanya browser berbasis WebKit . Tentu saja memperlihatkan fungsi tambahan spesifik, tetapi hanya dapat menjalankan JS dan membuat HTML / CSS karena memiliki mesin JS serta mesin rendering Chromium. Ini tidak membantu Anda dengan coding aplikasi web sisi klien dan penyebaran ke berbagai platform.

Apa yang Anda cari mirip dengan Sencha Touch - kerangka kerja yang memungkinkan aplikasi HTML5 untuk digunakan secara native ke perangkat iOS, Android dan Blackberry. Ini pada dasarnya bertindak sebagai perantara antara panggilan API tertentu dan fungsionalitas khusus perangkat yang tersedia.

Saya tidak punya pengalaman dengan appcelerator , sedikit tampaknya melakukan hal itu - dan mendapatkan ulasan online yang sangat menguntungkan. Anda harus mencobanya (kecuali jika Anda ingin kembali ke tahun 1999 dan bergabung dengan MS HTA ;)

Ov
sumber
Ini menggunakan webkit untuk aplikasi tetapi soft utama tidak didasarkan pada html / js
Sucrenoir
1

Saya tahu ada Fluid dan Prism (ada yang lain, itu yang dulu saya gunakan) yang memungkinkan Anda memuat situs web ke dalam apa yang tampak seperti aplikasi mandiri.

Di Chrome, Anda dapat membuat pintasan desktop untuk situs web. (Anda melakukannya dari dalam Chrome, Anda tidak bisa / seharusnya tidak mengemasnya dengan aplikasi Anda) Chrome Frame berbeda:

Google Chrome Frame adalah plug-in yang dirancang untuk Internet Explorer berdasarkan proyek Chromium sumber terbuka; itu membawa teknologi web terbuka Google Chrome ke Internet Explorer.

Anda harus memiliki semacam pembungkus seperti itu untuk aplikasi web Anda, dan sisanya adalah teknologi web yang biasa Anda gunakan. Anda dapat menggunakan penyimpanan lokal HTML5 untuk menyimpan data saat aplikasi offline. Saya pikir Anda bahkan dapat bekerja dengan SQLite.

Saya tidak tahu bagaimana cara mengakses fitur spesifik OS. Apa yang saya jelaskan di atas memiliki batasan yang sama dengan situs web "biasa". Semoga ini memberi Anda semacam panduan di mana untuk memulai.

sachleen
sumber
0

CEF menawarkan banyak fleksibilitas dan opsi untuk penyesuaian. Tetapi jika tujuannya adalah untuk mengembangkan node-webkit dengan cepat juga merupakan pilihan yang baik. Node-web kit juga menawarkan kemampuan untuk memanggil modul simpul langsung dari DOM.

Jika tidak ada modul asli untuk mengintegrasikan Node-Webkit dapat menawarkan jarak tempuh yang lebih baik. Dengan modul asli C / C ++ atau bahkan C # lebih baik dengan CEF.

harsha
sumber