HTML / CSS / JavaScript를 사용하여 데스크탑 앱을 개발하는 방법은 무엇입니까? [닫은]


189

첫째, 나는 이것을 전문적으로하는 것에 관심이 없다. 저는 웹 개발자로 최근 Spotify로 떠난 동료이며 Spotify Desktop 앱용 JavaScript로 주로 작업 할 것이라고 말했습니다. 그는 "Chrome frame"을 사용하며 내부의 모든 것은 웹 앱 (HTML / JS / CSS)과 같이 이루어 졌다고 말했다.

데스크톱 용으로 아무것도 만들지 않은 웹 개발자로서 이것은 좋은 소식입니다. 기술을 사용할 수 있다면 이미 알고 있고 어떤 종류의 "프레임"안에서 구현하고 여전히 창이나 더 나은 크로스 플랫폼 앱을 만들 수 있습니다.

데이터베이스에 대해서는 언급하지 않았지만 웹 기술이 적용된 간단한 hello world 데스크톱 앱조차도 훌륭 할 것입니다.

그렇다면 어떻게해야할까요? 정확히 무엇을 알아야합니까?


웹 응용 프로그램에는 적어도 두 가지의 비 독점적 계층이 있습니다. 하나는 클라이언트 쪽 단일 페이지 응용 프로그램 스타일 응용 프로그램이고 다른 하나는 데이터베이스 나 다른 상태로 상태를 유지하는 응용 프로그램입니다. (물론 최고의 앱은 둘 다입니다.) 다른 것에 대해 많이 배우지 않고도 한 가지 방법을 배울 수 있습니다.
Waleed Khan

또 다른 관련 스레드는 여기 [[JavaScript를 사용하여 데스크탑 개발을 할 수 있습니까?] [1] [1] : stackoverflow.com/questions/109399/… 감사합니다, Ben
benbai123

잘못 했어 웹은 데스크톱 앱용으로 설계되지 않았습니다. Period. 당신이 원한다면 QML / QtQuick을 사용할 수 있습니다. 이것은 좋은 절충입니다 (그러나 웹이 아닌 데스크탑으로 남아 있습니다!)
Stef


답변:


74

데스크톱 개발을 위해 Titanium으로 시작할 수 있습니다. Chromium Embedded Framework도 살펴볼 수 있습니다 . 기본적으로 크롬을 기반으로 한 웹 브라우저 컨트롤입니다.

C ++로 작성되어 컨테이너 응용 프로그램에서 원하는 모든 하위 수준 OS (Growl, 트레이 아이콘, 로컬 파일 액세스, 포트 등)를 수행 한 다음 html / javascript에서 모든 응용 프로그램 논리 및 GUI를 수행 할 수 있습니다. 로컬 리소스를 제공하거나 일부 사용자 지정 작업을 수행하기 위해 http 요청을 가로 챌 수 있습니다. 예를 들어 컨테이너 가 http://localapp.com/SetTrayIconState?state=active에 대한 요청을 가로 챈 다음 C ++ 함수를 호출하여 트레이 아이콘을 업데이트 할 수 있습니다.

또한 JavaScript에서 직접 호출 할 수있는 함수를 작성할 수 있습니다.

CEF에서 직접 JavaScript를 디버깅하는 것은 매우 어렵습니다. Firebug와 같은 것은 지원하지 않습니다.

AppJS.com (HTML, CSS 및 JavaScript를 사용하여 Linux, Windows 및 Mac 용 데스크탑 응용 프로그램을 작성하는 데 도움이 됨)을 사용해 볼 수도 있습니다 .

또한 @Clint가 지적한대로 brackets.io (Adobe) 팀은 Chromium Embedded Framework를 사용하여 시작하기가 훨씬 쉬운 멋진 쉘을 만들었습니다. 괄호 셸이라고합니다 : github.com/adobe/brackets-shell 여기에 대한 자세한 내용은 clintberry.com/2013/html5-desktop-apps-with-brackets-shell


3
CEF에는 크롬 개발 도구가 내장되어 있으므로 js를 디버깅하는 데 사용할 수 있습니다. AppJS는 nodejs API를 사용하여 OS에 대한 낮은 수준의 액세스 권한도 있습니다.
Morteza Milani

1
Bracket.io (Adobe) 팀은 Chromium Embedded Framework를 사용하여 훨씬 쉽게 시작할 수있는 멋진 셸을 만들었습니다. 괄호 쉘이라고합니다 : github.com/adobe/brackets-shell 여기에서 더 자세히 알아보십시오 : clintberry.com/2013/html5-desktop-apps-with-brackets-shell
Clint

현재 CEF와 Eclipse를 개발 도구로 사용하고 있으며, --remote-debugging-port = 8080을 프로그램 인수의 실행 구성에 전달하여 CEF를 Chrome 개발자 도구에 연결 한 다음 Chrome의 localhost : 8080으로 이동할 수 있습니다 . 따라서 부분을 제거하십시오-t는 CEF에서 직접 JavaScript를 디버깅하기가 매우 어렵습니다. Firebug와 같은 것은 지원하지 않습니다. -
좌초 아이

또한 CEF, PhoneGap, Adobe의 Backet.io, AppJS 등을 기반으로하는 Win32, Linux, Unix와 같은 Mac 및 SmartPhone 솔루션을 개발하기 위해 konテ ナgithub.com/jhg/kontena 를 개발 하기 시작했습니다. 매우 불안정하고 MVP를 얻기위한 프로토 타입 일 뿐이며 테스트 개념을 위해 Python으로 작성되었지만 QT5 (현재 QT4 사용)를 사용하여 코드를 C ++ / C로 변환하고 C ++ / C 시작시 모빌에 대한 변환을 수행합니다. 지원하다.

@JHG good job .. 공식적으로 출시되고 버그가 수정 된시기를 알려주세요
alfred

33

NW.js

(이전의 node-webkit)

Node에 익숙하거나 JavaScript에 익숙한 경우 NW.js를 제안 합니다.

NW.js는 Chromium 및 node.js를 기반으로하는 앱 런타임입니다.

풍모

  • 최신 HTML5, CSS3, JS 및 WebGL로 작성된 앱
  • Node.js API 및 모든 타사 모듈을 완벽하게 지원합니다.
  • 좋은 성능 : Node와 WebKit은 동일한 스레드에서 실행됩니다. 함수 호출은 간단합니다. 객체는 동일한 힙에 있으며 서로를 참조 할 수 있습니다.
  • 손쉬운 앱 패키징 및 배포
  • Linux, Mac OS X 및 Windows에서 사용 가능

당신은 NW.js가 REPO 찾을 수 있습니다 여기에 , 그리고 NW.js 좋은 소개 여기 . 당신이 학습 공상하는 경우 Node.js를을 내가 추천 좋은 링크의 많은 SO 게시물을.


2
두 번째. 훌륭한 도구입니다.
Erik Reppen

그러나 이것은 노드와 노드 웹킷을 설치하도록 요구하지 않고 사람들 사이에 배포 될 수 없습니다.
Jānis Gruzis 2016 년

@ JānisGruzis 아니요, 앱 을 NW.js 바이너리와 함께 제공했습니다 .

27

Awesomium 을 사용하면 C ++ 또는 .NET 앱에서 HTML UI를 쉽게 사용할 수 있습니다.

최신 정보

이전 답변이 구식입니다. 요즘에는 Electron 을 사용하지 않는 것이 좋습니다 . 많은 인기있는 데스크탑 앱이 그 위에 개발되었습니다.



9

HTML / JS / CSS 데스크탑 앱용 솔루션이 부족한 것 같습니다.

내가 방금 접한 한 가지 해결책은 TideSDK : http://www.tidesdk.org/ 입니다. 설명서를 보면 매우 유망한 것으로 보입니다.

Python, PHP 또는 Ruby로 개발하여 Mac, Windows 또는 Linux 용으로 패키지 할 수 있습니다.


1
유망 해 보였지만 더 이상 개발되지 않은 것처럼 보입니다. :( PLUS 그것은 돈을 비용 - 핵심 팀은 지금 뭔가 호출 TideKit에 노력하고 있지만, 그들이 그것을 해제 영원히 소요
TheStoryCoder

1
예, 동정입니다 내가 대답했을 때 유망한 것처럼 보였습니다. 나는 그것이 물건에 대한 권장 사항에 관한 질문에 눈살을 찌푸린 이유 중 하나 인 것 같습니다.
mydoghasworms

3

거품이 터져서 죄송하지만 Spotify 데스크톱 클라이언트웹킷 기반 브라우저 입니다. 물론 특정 추가 기능을 제공하지만 JS 엔진과 Chromium 렌더링 엔진이 있기 때문에 JS를 실행하고 HTML / CSS 만 렌더링 할 수 있습니다. 클라이언트 측 웹앱을 코딩하고 여러 플랫폼에 배포하는 데 도움이되지 않습니다.

찾고있는 것은 HTML5 앱을 iOS, Android 및 Blackberry 장치에 기본적으로 배포 할 수있는 프레임 워크 인 Sencha Touch 와 유사 합니다. 기본적으로 특정 API 호출과 사용 가능한 장치 별 기능 사이의 중개자 역할을합니다.

나는 appcelerator에 대한 경험이 없으며 비트가 정확히 그렇게하고있는 것으로 보입니다. 1999 년으로 돌아가서 MS HTA로 롤백하고 싶지 않다면, 당신은 그것을 포기해야한다 .


그것은 응용 프로그램을 위해 웹킷을 사용하지만 주요 소프트는 html / js를 기반으로하지 않습니다
Sucrenoir

1

거기에 대해 내가 아는 유체프리즘 독립 실행 형 응용 프로그램의 모양으로 웹 사이트를로드 할 (내가 사용하는 데 사용되는 하나 즉, 다른 사람이 있습니다).

Chrome에서는 웹 사이트의 바탕 화면 바로 가기를 만들 수 있습니다. (Chrome에서 그렇게하면 앱과 함께 패키지 할 수는 없습니다) Chrome 프레임은 다릅니다.

Chrome 프레임은 오픈 소스 Chromium 프로젝트를 기반으로 Internet Explorer 용으로 설계된 플러그인입니다. Chrome의 공개 웹 기술을 Internet Explorer에 제공합니다.

웹 응용 프로그램과 같은 종류의 래퍼가 있어야하며 나머지는 익숙한 웹 기술입니다. 앱이 오프라인 일 때 HTML5 로컬 저장소 를 사용 하여 데이터를 저장할 수 있습니다 . SQLite로 작업 할 수도 있다고 생각합니다.

그래도 OS 특정 기능에 액세스하는 방법을 모르겠습니다. 위에서 설명한 내용은 "일반"웹 사이트와 동일한 제한 사항이 있습니다. 바라건대 이것은 어디서 시작해야하는지에 대한 일종의 지침을 제공합니다.



0

CEF는 사용자 정의를위한 많은 유연성과 옵션을 제공합니다. 그러나 의도가 신속하게 노드 웹킷을 개발하는 것이라면 좋은 옵션입니다. 노드 웹 키트는 DOM에서 직접 노드 모듈을 호출하는 기능도 제공합니다.

Node-Webkit을 통합 할 기본 모듈이없는 경우 더 나은 마일리지를 제공 할 수 있습니다. 네이티브 모듈 C / C ++ 또는 C #을 사용하면 CEF가 더 좋습니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.