Làm cách nào để phát triển Ứng dụng máy tính để bàn bằng HTML / CSS / JavaScript? [đóng cửa]


189

Đầu tiên, tôi không quan tâm đến việc này một cách chuyên nghiệp. Tôi là một nhà phát triển web, một đồng nghiệp của tôi gần đây đã rời khỏi Spotify và nói rằng anh ta sẽ làm việc chủ yếu bằng JavaScript cho ứng dụng Spotify Desktop. Ông nói rằng nó sử dụng "khung Chrome" và mọi thứ bên trong được thực hiện như một ứng dụng web (HTML / JS / CSS).

Là một nhà phát triển web chưa bao giờ xây dựng bất cứ thứ gì cho Desktop, đây là một tin tuyệt vời. Nếu tôi có thể sử dụng các công nghệ tôi đã biết và triển khai chúng trong một số "khung" và vẫn có thể xây dựng một cửa sổ hoặc ứng dụng đa nền tảng tốt hơn.

Tôi biết tôi đã không đề cập bất cứ điều gì về cơ sở dữ liệu, nhưng ngay cả một ứng dụng máy tính để bàn đơn giản với các công nghệ web cũng sẽ rất tuyệt để sử dụng.

Vì vậy, làm thế nào để đi về điều này? Chính xác những gì tôi cần / cần biết?


Cần lưu ý rằng có ít nhất hai tầng ứng dụng web không độc quyền. Một sẽ là các ứng dụng kiểu ứng dụng một trang, phía máy khách và một ứng dụng sẽ duy trì trạng thái với cơ sở dữ liệu hoặc một cái gì đó. (Tất nhiên, các ứng dụng tốt nhất là cả hai.) Bạn có thể học cách làm cái này mà không cần học nhiều về cái kia.
Waleed Khan

Một chủ đề liên quan khác ở đây [Bạn có thể thực hiện Phát triển máy tính để bàn bằng JavaScript không?] [1] [1]: stackoverflow.com/questions/109399/ Trân trọng, Ben
Bạch123

Bạn làm sai. Web không được thiết kế cho ứng dụng máy tính để bàn. Nếu bạn muốn, bạn có thể sử dụng QML / QtQuick, đây là một sự đánh đổi tốt (nhưng nó vẫn là máy tính để bàn, không phải là web!)
Stef


Câu trả lời:


74

Bạn có thể bắt đầu với Titanium cho dev máy tính để bàn. Ngoài ra, bạn có thể xem qua Chromium Embedded Framework . Về cơ bản, nó là một điều khiển trình duyệt web dựa trên crom.

Nó được viết bằng C ++ để bạn có thể thực hiện tất cả những thứ hệ điều hành cấp thấp mà bạn muốn (Growl, biểu tượng khay, truy cập tệp cục bộ, cổng com, v.v.) trong ứng dụng container của bạn, sau đó tất cả logic ứng dụng và gui trong html / javascript. Nó cho phép bạn chặn bất kỳ yêu cầu http nào để phục vụ tài nguyên cục bộ hoặc thực hiện một số hành động tùy chỉnh. Ví dụ: yêu cầu http://localapp.com/setTrayIconState?state=active có thể bị chặn bởi container và sau đó gọi hàm C ++ để cập nhật biểu tượng khay.

Nó cũng cho phép bạn tạo các hàm có thể được gọi trực tiếp từ JavaScript.

Rất khó để gỡ lỗi JavaScript trực tiếp trong CEF. Không có hỗ trợ cho bất cứ điều gì như Fireorms.

Bạn cũng có thể dùng thử AppJS.com (Trợ giúp xây dựng Ứng dụng máy tính để bàn. Cho Linux, Windows và Mac bằng HTML, CSS và JavaScript)

Ngoài ra, như ra nhọn bởi @Clint, nhóm nghiên cứu tại brackets.io (Adobe) đã tạo một vỏ tuyệt vời sử dụng Chromium Embedded khung mà làm cho nó dễ dàng hơn để bắt đầu. Nó được gọi là shell ngoặc: github.com/adobe/brackets-shell Tìm hiểu thêm về nó ở đây: clintberry.com/2013/html5-desktop-apps-with-brackets-shell


3
CEF có các công cụ phát triển chrome được tích hợp sẵn để bạn có thể sử dụng nó để gỡ lỗi js. AppJS cũng có quyền truy cập cấp thấp vào HĐH bằng API nodejs.
Morteza Milani

1
Nhóm tại ngoặc.io (Adobe) đã tạo ra một lớp vỏ tuyệt vời bằng cách sử dụng Chromium Embedded Framework giúp bắt đầu dễ dàng hơn nhiều. Nó được gọi là shell ngoặc: github.com/adobe/brackets-shell Tìm hiểu thêm về nó ở đây: clintberry.com/2013/html5-desktop-apps-with-brackets-shell
Clint

Tôi hiện đang sử dụng CEF và Eclipse làm công cụ phát triển và có thể liên kết CEF với Công cụ phát triển Chrome bằng cách chuyển --remote-debugging-port = 8080 sang cấu hình chạy cho đối số chương trình, sau đó truy cập localhost: 8080 trong Chrome . Vì vậy, vui lòng xóa phần - rất khó gỡ lỗi JavaScript trực tiếp trong CEF. Không có hỗ trợ cho bất cứ điều gì như Fireorms. -
Bị mắc kẹt vào

Ngoài ra, tôi bắt đầu để phát triển Kontenaンテナコgithub.com/jhg/kontena cho sự phát triển một giải pháp cho Win32, Linux, Unix như, Mac và điện thoại thông minh sẽ được đặt tại CEF, PhoneGap, Backet.io của Adobe, AppJS, vv Hiện tại nó không ổn định và chỉ là nguyên mẫu để lấy MVP, được viết bằng Python cho khái niệm thử nghiệm nhưng sẽ được dịch mã sang C ++ / C với QT5 (bây giờ sử dụng QT4) và khi ở trong C ++ / C, hãy bắt đầu dịch ủng hộ.

@JHG tốt công việc .. Cho chúng tôi biết khi nó chính thức phát hành và lỗi cố định
alfred

33

Tây Bắc

(Trước đây gọi là nút-webkit)

Tôi sẽ đề xuất NW.js nếu bạn quen thuộc với Node hoặc có kinh nghiệm với JavaScript.

NW.js là thời gian chạy ứng dụng dựa trên Chromium và node.js.

Đặc trưng

  • Các ứng dụng được viết bằng HTML5, CSS3, JS và WebGL hiện đại
  • Hoàn thành hỗ trợ cho API Node.js và tất cả các mô-đun bên thứ ba của nó.
  • Hiệu suất tốt: Node và WebKit chạy trong cùng một luồng: Các lệnh gọi hàm được thực hiện đơn giản; các đối tượng nằm trong cùng một đống và chỉ có thể tham chiếu lẫn nhau
  • Dễ dàng đóng gói và phân phối ứng dụng
  • Có sẵn trên Linux, Mac OS X và Windows

Bạn có thể tìm thấy repo của NW.js tại đây và một bài giới thiệu hay về NW.js tại đây . Nếu bạn thích học Node.js, tôi sẽ giới thiệu bài đăng SO này với rất nhiều liên kết tốt.


2
Biệt phái. Công cụ tuyệt vời.
Erik Reppen

Nhưng điều này không thể được phân phối giữa mọi người mà không yêu cầu họ cài đặt nút và nút-webkit, phải không?
Jāni Gruzis

@ JānisGruzis Không, bạn vận chuyển ứng dụng của bạn với NW.js mã nhị phân .
xấp xỉ

27

Awesomium giúp bạn dễ dàng sử dụng Giao diện người dùng HTML trong ứng dụng C ++ hoặc .NET của bạn

Cập nhật

Câu trả lời trước đây của tôi đã lỗi thời. Ngày nay, bạn sẽ phát điên nếu không xem xét việc sử dụng Electron cho việc này. Nhiều ứng dụng máy tính để bàn phổ biến đã được phát triển trên đầu trang của nó.


16

LƯU Ý: AppJS không được dùng nữa và không được đề xuất nữa.

Thay vào đó, hãy xem NW.js.


3
Điều này dường như đã bị phản đối bởi những người tạo ra appjs
Dan Esparza

@DanEsparza cảm ơn, tôi đã cải thiện câu trả lời của mình
Siwei Shen 18/05/2015

9

Có vẻ như các giải pháp cho các ứng dụng máy tính để bàn HTML / JS / CSS không thiếu.

Một giải pháp tôi vừa tìm thấy là TideSDK: http://www.tidesdk.org/ , có vẻ rất hứa hẹn, xem tài liệu này.

Bạn có thể phát triển với Python, PHP hoặc Ruby và gói nó cho Mac, Windows hoặc Linux.


1
Có vẻ đầy hứa hẹn, nhưng không được phát triển nữa. Nhóm nòng cốt hiện đang làm việc trên một cái gì đó gọi TideKit nhưng phải mất mãi mãi để họ phát hành nó - CỘNG nó sẽ tốn tiền :(
TheStoryCoder

1
Vâng, thương hại. Nó trông có vẻ đầy hứa hẹn vào lúc tôi trả lời. Tôi đoán đó là một lý do tại sao họ cau mày với các câu hỏi liên quan đến các khuyến nghị cho công cụ.
mydoghasworms

3

Xin lỗi vì đã vỡ bong bóng của bạn, nhưng khách hàng Spotify máy tính để bànchỉ là một trình duyệt dựa trên Webkit . Tất nhiên, nó cho thấy chức năng bổ sung cụ thể, nhưng nó chỉ có thể chạy JS và kết xuất HTML / CSS vì nó có công cụ JS cũng như công cụ kết xuất Chromium. Điều này không giúp bạn mã hóa ứng dụng web phía máy khách và triển khai trên nhiều nền tảng.

Những gì bạn đang tìm kiếm tương tự như Sencha Touch - một khung cho phép các ứng dụng HTML5 được triển khai thực sự cho các thiết bị iOS, Android và Blackberry. Về cơ bản, nó hoạt động như một trung gian giữa các lệnh gọi API nhất định và chức năng dành riêng cho thiết bị có sẵn.

Tôi không có kinh nghiệm với appcelerator , có vẻ như nó đang làm chính xác điều đó - và nhận được những đánh giá rất thuận lợi trên mạng. Bạn nên thử lại (trừ khi bạn muốn quay lại năm 1999 và lăn lộn với MS HTA ;)


Nó sử dụng webkit cho ứng dụng nhưng phần mềm chính không dựa trên html / js
Sucrenoir

1

Tôi biết có FluidPrism (có những cái khác, đó là cái tôi đã từng sử dụng) cho phép bạn tải một trang web vào một ứng dụng độc lập.

Trong Chrome, bạn có thể tạo lối tắt trên màn hình cho trang web. (bạn làm điều đó từ trong Chrome, bạn không thể / không nên gói nó với ứng dụng của mình) Khung Chrome khác:

Google Chrome Frame là một trình cắm được thiết kế cho Internet Explorer dựa trên dự án Chromium nguồn mở; nó mang các công nghệ web mở của Google Chrome lên Internet Explorer.

Bạn cần có một số loại trình bao bọc như thế cho ứng dụng web của mình và phần còn lại là các công nghệ web bạn đã sử dụng. Bạn có thể sử dụng bộ nhớ cục bộ HTML5 để lưu trữ dữ liệu trong khi ứng dụng ngoại tuyến. Tôi nghĩ bạn thậm chí có thể làm việc với SQLite.

Tuy nhiên, tôi không biết bạn sẽ truy cập các tính năng cụ thể của hệ điều hành như thế nào. Những gì tôi mô tả ở trên có những hạn chế giống như bất kỳ trang web "thông thường" nào. Hy vọng rằng điều này cung cấp cho bạn một số loại hướng dẫn về nơi bắt đầu.



0

CEF cung cấp rất nhiều tính linh hoạt và các tùy chọn để tùy chỉnh. Nhưng nếu mục đích là phát triển nhanh nút-webkit cũng là một lựa chọn tốt. Node-web kit cũng cung cấp khả năng gọi các mô-đun nút trực tiếp từ DOM.

Nếu không có bất kỳ mô-đun gốc nào để tích hợp Node-Webkit có thể cung cấp số dặm tốt hơn. Với các mô-đun gốc C / C ++ hoặc thậm chí C #, sẽ tốt hơn với CEF.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.