Jak tworzyć aplikacje pulpitu przy użyciu HTML / CSS / JavaScript? [Zamknięte]

189

Po pierwsze, nie jestem zainteresowany robieniem tego profesjonalnie. Jestem programistą, moim współpracownikiem, który niedawno wyjechał do Spotify i powiedział, że będzie pracował głównie w JavaScript dla aplikacji Spotify Desktop. Powiedział, że używa „ramki Chrome”, a wszystko w środku odbywa się jak aplikacja internetowa (HTML / JS / CSS).

Jako twórca stron internetowych, który nigdy nie budował niczego na komputery, to dobra wiadomość. Jeśli mogę skorzystać z technologii, które już znam i wdrożyć je w jakiejś „ramie” i nadal będę w stanie zbudować aplikację dla systemu Windows lub jeszcze lepszą dla wielu platform.

Wiem, że nie wspominałem nic o bazie danych, ale nawet prosta aplikacja komputerowa Witaj w świecie z technologiami internetowymi byłaby świetna.

Jak więc sobie z tym poradzić? Dokładnie to, co muszę / muszę wiedzieć?

TK123
źródło
Należy zauważyć, że istnieją co najmniej dwa niewyłączne poziomy aplikacji internetowych. Jednym z nich byłyby aplikacje klienckie, jednostronicowe w stylu aplikacji, a drugim byłaby aplikacja utrzymująca stan z bazą danych lub czymś podobnym. (Oczywiście najlepsze są oba aplikacje.) Możesz nauczyć się, jak to zrobić, nie wiedząc wiele o drugim.
Waleed Khan
Kolejny pokrewny wątek tutaj [Czy możesz zrobić
programowanie
Zrobisz to źle. Internet nie jest przeznaczony do aplikacji komputerowej. Jeśli chcesz, możesz użyć QML / QtQuick, co jest dobrym kompromisem (ale pozostaje na komputerze, a nie w sieci!)
Stef
podobne tutaj :stackoverflow.com/questions/109399/…
Zhang LongQI

Odpowiedzi:

74

Możesz zacząć od Titanium na komputer stacjonarny. Możesz także rzucić okiem na Chromium Embedded Framework . Jest to w zasadzie kontrolka przeglądarki internetowej oparta na chromie.

Jest napisany w C ++, dzięki czemu możesz wykonywać wszystkie czynności związane z niskim poziomem systemu operacyjnego (warczenie, ikony na pasku zadań, lokalny dostęp do plików, porty komunikacyjne itp.) W aplikacji kontenerowej, a następnie całą logikę aplikacji i GUI w HTML / JavaScript. Pozwala przechwycić każde żądanie HTTP w celu obsługi lokalnych zasobów lub wykonania niestandardowej akcji. Na przykład żądanie do http://localapp.com/SetTrayIconState?state=active może zostać przechwycone przez kontener, a następnie wywołać funkcję C ++ w celu zaktualizowania ikony zasobnika.

Pozwala także tworzyć funkcje, które można wywoływać bezpośrednio z JavaScript.

Bardzo trudno jest debugować JavaScript bezpośrednio w CEF. Nie ma wsparcia dla czegoś takiego jak Firebug.

Możesz także wypróbować AppJS.com (pomaga w tworzeniu aplikacji komputerowych. Dla systemów Linux, Windows i Mac przy użyciu HTML, CSS i JavaScript)

Ponadto, jak wskazał @Clint, zespół brackets.io (Adobe) stworzył niesamowitą powłokę za pomocą Chromium Embedded Framework, która znacznie ułatwia rozpoczęcie pracy. Nosi nazwę powłoki nawiasów: github.com/adobe/brackets-shell Dowiedz się więcej o tym tutaj: clintberry.com/2013/html5-desktop-apps-with-brackets-shell

alfred
źródło
3
CEF ma wbudowane narzędzia chrome dev, dzięki czemu możesz używać go do debugowania js. AppJS ma również niski poziom dostępu do systemu operacyjnego za pomocą interfejsów API nodejs.
Morteza Milani,
1
Zespół Bracket.io (Adobe) stworzył niesamowitą powłokę za pomocą Chromium Embedded Framework, która znacznie ułatwia rozpoczęcie pracy. Nazywa się to nawiasami: github.com/adobe/brackets-shell Dowiedz się więcej na ten temat tutaj: clintberry.com/2013/html5-desktop-apps-with-brackets-shell
Clint
Obecnie używam CEF i Eclipse jako narzędzi programistycznych, i można połączyć CEF z Chrome Developers Tools, przekazując --remote-debugging-port = 8080 do konfiguracji uruchamiania dla argumentów programu, a następnie przejdź do localhost: 8080 w Chrome . Więc proszę usunąć część - bardzo trudno debugować JavaScript bezpośrednio w CEF. Nie ma wsparcia dla czegoś takiego jak Firebug. -
Stranded Kid
Zaczynam też tworzyć Kontena コ ン テ ナgithub.com/jhg/kontena w celu opracowania rozwiązania dla systemów Win32, Linux, Unix, Mac i SmartPhone, które będą oparte na CEF, PhoneGap, Backet.io Adobe, AppJS itp. Jest tak niestabilny i teraz jest tylko prototypem, aby uzyskać MVP, jest napisany w Pythonie dla koncepcji testowej, ale zostanie przetłumaczony kod na C ++ / C za pomocą QT5 (teraz użyj QT4) i kiedy będzie w C ++ / C, uruchom tłumaczenie dla mobil wsparcie.
@JHG dobra robota. Daj nam znać, kiedy zostanie oficjalnie wydany i naprawiony
Alfred
33

NW.js

(Wcześniej znany jako węzeł-webkit)

Sugerowałbym NW.js, jeśli znasz Node lub JavaScript.

NW.js to środowisko wykonawcze aplikacji oparte na Chromium i node.js.

cechy

  • Aplikacje napisane w nowoczesnym HTML5, CSS3, JS i WebGL
  • Pełna obsługa interfejsów API Node.js i wszystkich modułów innych firm.
  • Dobra wydajność: Node i WebKit działają w tym samym wątku: Wywołania funkcji są proste; obiekty znajdują się na tej samej stercie i mogą się do siebie odwoływać
  • Łatwe pakowanie i dystrybucja aplikacji
  • Dostępne w systemach Linux, Mac OS X i Windows

Repozytorium NW.js można znaleźć tutaj , a dobre wprowadzenie do NW.js tutaj . Jeśli masz ochotę na naukę Node.js , poleciłbym ten post SO z mnóstwem dobrych linków.

Rawa
źródło
2
Oddelegowany. Świetne narzędzie.
Erik Reppen,
Ale nie można tego rozdzielić między ludzi, nie prosząc ich o zainstalowanie węzła i zestawu węzłów, prawda?
Jānis Gruzis
@ JānisGruzis nie, wysyła swoją aplikację z NW.js plików binarnych .
przybliżeniu
27

Awesomium ułatwia korzystanie z interfejsu HTML w aplikacji C ++ lub .NET

Aktualizacja

Moja poprzednia odpowiedź jest teraz nieaktualna. W dzisiejszych czasach oszalałbyś na punkcie używania elektronu . Oprócz tego opracowano wiele popularnych aplikacji komputerowych.

Ronnie Overby
źródło
16

UWAGA: AppJS jest przestarzałe i nie jest już zalecane.

Zamiast tego spójrz na NW.js.

Siwei Shen 申思维
źródło
3
Wygląda na to, że został wycofany przez twórców aplikacji
Dan Esparza
@DanEsparza dzięki, poprawiłem swoją odpowiedź
Siwei Shen
9

Wygląda na to, że rozwiązań dla aplikacji komputerowych HTML / JS / CSS nie brakuje.

Jednym z rozwiązań, które właśnie spotkałem, jest TideSDK: http://www.tidesdk.org/ , który wydaje się bardzo obiecujący, patrząc na dokumentację.

Możesz rozwijać w języku Python, PHP lub Ruby i spakować go na komputery Mac, Windows lub Linux.

mydoghasworms
źródło
1
Wyglądał obiecująco, ale nie jest już rozwijany, jak wygląda. Zespół podstawowy pracuje teraz nad czymś o nazwie TideKit, ale wydanie go trwa wiecznie - PLUS będzie kosztować pieniądze :(
TheStoryCoder
1
Tak, szkoda. Kiedy odpowiedziałem, wyglądało to obiecująco. Myślę, że to jeden z powodów, dla których marszczą brwi na pytania dotyczące rekomendacji rzeczy.
mydoghasworms
3

Przepraszam, że pękłem, ale klient stacjonarny Spotify to tylko przeglądarka internetowa . Oczywiście udostępnia określoną dodatkową funkcjonalność, ale jest w stanie uruchomić JS i renderować HTML / CSS, ponieważ ma silnik JS, a także silnik renderowania Chromium. Nie pomaga to w kodowaniu aplikacji internetowej po stronie klienta i wdrażaniu na wielu platformach.

To, czego szukasz, jest podobne do Sencha Touch - frameworku, który umożliwia natywne wdrażanie aplikacji HTML5 na urządzeniach z iOS, Androidem i Blackberry. Zasadniczo działa jako pośrednik między niektórymi wywołaniami API i dostępnymi funkcjami specyficznymi dla urządzenia.

Nie mam doświadczenia z appceleratorem , ale wydaje się, że właśnie to robi - i otrzymuję bardzo pozytywne recenzje online. Powinieneś spróbować (chyba że chcesz wrócić do 1999 r. I rzucić MS MSA ;)

ov
źródło
Używa aplikacji webkit, ale główny program nie jest oparty na html / js
Sucrenoir,
1

Wiem, że istnieją Fluid i Pryzmat (są inne, z których kiedyś korzystałem), które pozwalają załadować stronę internetową, która wygląda jak samodzielna aplikacja.

W Chrome możesz tworzyć skróty na pulpicie do stron internetowych. (robisz to z poziomu przeglądarki Chrome, nie możesz / nie powinieneś pakować tego w swoją aplikację) Chrome Frame jest inny:

Google Chrome Frame to wtyczka zaprojektowana dla przeglądarki Internet Explorer oparta na projekcie Chromium typu open source; wprowadza otwarte technologie internetowe Google Chrome do Internet Explorera.

Musisz mieć jakieś opakowanie dla swojej aplikacji internetowej, a reszta to technologie internetowe, do których jesteś przyzwyczajony. Możesz używać lokalnego magazynu HTML5 do przechowywania danych, gdy aplikacja jest offline. Myślę, że możesz nawet pracować z SQLite.

Nie wiem jednak, jak poszedłbyś na temat uzyskiwania dostępu do funkcji specyficznych dla systemu operacyjnego. To, co opisałem powyżej, ma takie same ograniczenia jak każda „zwykła” strona internetowa. Mam nadzieję, że daje to jakieś wskazówki, od czego zacząć.

sachleen
źródło
0

CEF oferuje dużą elastyczność i opcje dostosowywania. Ale jeśli celem jest szybki rozwój węzła webkit, jest to również dobra opcja. Zestaw Node-web oferuje także możliwość wywoływania modułów węzłów bezpośrednio z DOM.

Jeśli nie ma żadnych natywnych modułów do zintegrowania Node-Webkit, może zaoferować lepszy przebieg. W przypadku natywnych modułów C / C ++, a nawet C #, jest lepiej z CEF.

harsha
źródło