한국어
오픈소스포럼
 이곳은 다양한 오픈소스 프로젝트를 소개하고 리뷰, 활용 방법을 공유합니다.

NodeGui를 사용하면 JavaScript로 데스크톱 응용 프로그램을 만들 수 있다.

NodeGui는 Qt를 사용하여 Window 및 기타 GUI 요소를 생성한다. Qt C++ 위젯의 기능을 Javascript 세계로 가져온다. 따라서 순수하게 Javascript 만을 사용하여 데스크탑 응용 프로그램을 작성할 수 있다는 장점이 있다. (HTML 등의 언어가 필요치 않음) 또한 다른 Javascript 데스크탑 GUI 솔루션에 비해 메모리 및 CPU 효율성이 매우 뛰어나다. NodeGui로 구축된 Hello World 앱은 20MB 대의 메모리에서 실행된다.

nodegui_app.png

 

Hello World

nodegui/nodegui-starter 리포지토리를 사용하여 빠르게 시작해 볼 수 있다.

 

index.ts

import { QMainWindow, QWidget, QLabel, FlexLayout, QPushButton, QIcon, QSize } from '@nodegui/nodegui';
import logo from '../assets/logox200.png';

const win = new QMainWindow();
win.setWindowTitle("Hello World");
win.resize(400, 200)

const centralWidget = new QWidget();
centralWidget.setObjectName("myroot");
const rootLayout = new FlexLayout();
centralWidget.setLayout(rootLayout);

const label = new QLabel();
label.setObjectName("mylabel");
label.setText("Hello");

const button = new QPushButton();
button.resize(100, 150)
button.setIcon(new QIcon(logo));

const label2 = new QLabel();
label2.setText("World");
label2.setInlineStyle(`
  color: red;
`);

rootLayout.addWidget(label);
rootLayout.addWidget(button);
rootLayout.addWidget(label2);
win.setCentralWidget(centralWidget);
win.setStyleSheet(
  `
    #myroot {
      background-color: #009688;
      height: '100%';
      align-items: 'center';
      justify-content: 'center';
    }
    #mylabel {
      font-size: 16px;
      font-weight: bold;
      padding: 1;
    }
  `
);
win.show();

(global as any).win = win;

실행

nodegui_helloworld.png

 

패키징

완성된 앱을 배포하려면 @nodegui/packer를 사용한다.

Hello World 패키징 크기 약 65MB 수준

nodegui_packaging.png

참조:

https://docs.nodegui.org/docs/guides/getting-started/

https://docs.nodegui.org/docs/guides/nodegui-architecture

번호 제목 글쓴이 날짜 조회 수
35 openFrameworks 한글 폰트 설정 및 출력하기 file makersweb 2023.02.19 198
34 Flutter 위젯의 상태관리에 대해서 file makersweb 2023.04.06 450
33 OTA 오픈소스 프로젝트 makersweb 2022.08.03 471
32 도커(docker)설치 및 기본 명령어 makersweb 2019.12.02 482
31 CopperSpice 에 대해서 (C++ Gui 라이브러리) file makersweb 2022.01.02 537
30 라즈베리파이4에서 openFrameworks 예제 실행 file makersweb 2020.12.13 559
29 Windows에서 Qt Creator + CMake + vcpkg 로 C++ 개발환경 구성 (POCO 라이브러리 DirectoryWatcher 예제) file makersweb 2023.01.14 667
28 라즈베리파이에서 Redis의 Pub/Sub 패턴을 사용하는 Electron 응용프로그램 file makersweb 2021.01.31 681
27 Chromium과 Ozone 층 file makersweb 2022.03.03 728
26 윈도우에서 안드로이드 flutter 프로그래밍 개발환경 구축(with Visual Studio Code) file makersweb 2020.09.16 794
25 ZeroMQ 를 이용한 Qt 응용프로그램 간 통신 file makersweb 2021.08.28 832
24 VSCode 와 Qbs 플러그인으로 C/C++ 개발환경 구성 file makersweb 2021.09.12 846
23 NAppGUI, C언어용 크로스 플랫폼 GUI 라이브러리 file makersweb 2022.10.10 861
22 Protocol Buffers 를 이용한 직렬화 with Conan Package Manager file makersweb 2021.02.24 861
21 C++를 위한 Lottie 라이브러리 with SDL2 file makersweb 2021.08.15 962
20 LVGL 을 통해 GUI 구현 시 한글 폰트 추가 file makersweb 2023.02.07 1082
» [NodeGui] JavaScript로 데스크탑 응용프로그램 작성 file makersweb 2023.02.21 1085
18 Qt와 GStreamer 로 작성한 flac 오디오 재생 예제 file makersweb 2020.09.05 1139
17 Flutter/Dart 와 Qt/QML 비교 file makersweb 2021.11.07 1401
16 CANdevStudio 를 사용하여 CAN 네트워크 시뮬레이션 file makersweb 2021.03.09 1698