NodeGui를 사용하여 기본 데스크톱 GIF 검색기 앱 빌드

NodeGui Node.js로 플랫폼 간 네이티브 데스크톱 앱을 구축하기 위한 오픈 소스 라이브러리입니다. NodeGui 앱은 macOS, Windows 및 Linux에서 실행할 수 있습니다. NodeGui로 빌드된 앱은 JavaScript를 사용하여 작성되고 CSS로 스타일이 지정되며 다음을 사용하여 기본 데스크톱 위젯으로 렌더링됩니다. Qt 프레임워크 .

NodeGui의 일부 기능은 다음과 같습니다.

• 다크 모드를 기본적으로 지원하는 기본 위젯
• 낮은 CPU 및 메모리 공간
• Flexbox 레이아웃에 대한 완벽한 지원을 포함한 CSS 스타일 지정
• 완벽한 Node.js API 지원 및 모든 Node.js 호환 npm 모듈에 대한 액세스
• Chrome의 DevTools를 사용한 탁월한 디버깅 지원
• 일류 TypeScript 지원

NodeGui는 Qt 프레임워크로 구동되므로 Electron과 같은 다른 Chromium 기반 솔루션에 비해 CPU 및 메모리 효율성이 높습니다. 이는 NodeGui를 사용하여 작성된 응용 프로그램이 하지 마라 브라우저 인스턴스를 열고 그 안에 UI를 렌더링합니다. 대신 모든 위젯이 기본적으로 렌더링됩니다.

이 튜토리얼은 NodeGui를 설치하고 이를 사용하여 시스템 트레이에 상주하고 GIPHY API .

설치 및 기본 설정

이 자습서에서는 다음이 있다고 가정합니다. Node.js v12 이상 설치. 다음을 실행하여 Node와 npm을 모두 사용할 수 있는지 확인할 수 있습니다.

CMake 및 컴파일 도구 설치

NodeGui는 프로젝트의 네이티브 C++ 레이어를 빌드하기 위해 CMake 및 C++ 컴파일 도구가 필요합니다. C++11 이상을 지원하는 C++ 컴파일러와 함께 CMake >= 3.1을 설치해야 합니다. 자세한 지침은 운영 체제에 따라 약간 다릅니다.

맥 OS

Homebrew를 사용하여 CMake를 설치하는 것이 좋습니다. Homebrew를 설치한 후 터미널에서 다음 명령을 실행합니다.

신탁 지갑에서 현금화하는 방법

다음을 실행하여 설치를 확인할 수 있습니다.

마지막으로 C++ 코드를 컴파일하려면 GCC/Clang이 필요합니다. 다음 명령을 사용하여 GCC가 설치되어 있는지 확인하십시오.

GCC가 설치되어 있지 않은 경우 설치해야 합니다. Xcode용 명령줄 도구 또는 XCode 개발자 도구 ~에서 애플의 개발자 페이지 .

윈도우

다음에서 최신 릴리스를 다운로드하여 Windows에 CMake를 설치할 수 있습니다. CMake 다운로드 페이지 .

Windows에서 기본 터미널로 Powershell을 사용하는 것이 좋습니다.
다음을 실행하여 CMake 설치를 확인할 수 있습니다.

마지막으로 C++ 컴파일러가 필요합니다. 한 가지 가능성은 Visual Studio 2017 이상 설치 . 다음을 선택하는 것이 좋습니다. C++로 데스크톱 개발 설치 과정 중 작업량.

리눅스

이 튜토리얼의 목적을 위해 Ubuntu 18.04에 중점을 둘 것입니다. 패키지 관리자를 사용하여 CMake를 설치하는 것이 좋습니다. 터미널에서 다음 명령을 실행합니다.

다음을 실행하여 설치를 확인할 수 있습니다.

마지막으로 C++ 코드를 컴파일하려면 GCC가 필요합니다. 다음 명령을 사용하여 GCC가 설치되어 있는지 확인합니다.

헬로 월드

NodeGui meme 앱을 시작하기 위해 스타터 프로젝트를 복제합니다.

참고: 이를 실행하려면 Git 및 npm이 필요합니다.

터미널을 열고 다음을 실행합니다.

모든 것이 잘 진행되면 화면에 작동하는 Hello World NodeGui 앱이 표시되어야 합니다.

기본적으로 nodegui-스타터 프로젝트 TypeScript 프로젝트입니다. 그러나 이 자습서에서는 JavaScript로 응용 프로그램을 작성할 것입니다. 스타터를 JS 프로젝트로 변환하기 위해 다음과 같이 약간 변경합니다.

1. |_+_| 삭제 |_+_|에 있는 파일 폴더.

2. 새 파일 만들기 |_+_| |_+_|에 다음 내용이 포함된 디렉토리:
   src/index.js

   |_+_|

개발에 관한 한 NodeGui 응용 프로그램은 기본적으로 Node.js 응용 프로그램입니다. NodeGui의 모든 API와 기능은 |_+_| 다른 Node.js 모듈처럼 필요할 수 있는 모듈입니다. 또한 모든 Node.js API 및 노드 모듈에 액세스할 수 있습니다. NodeGui는 웹 기반 구성 요소 대신 기본 구성 요소를 빌딩 블록으로 사용합니다.

위의 예에서 우리는 큐메인윈도우 그리고 Q라벨 Hello World라는 텍스트를 표시하는 기본 창을 만듭니다.

이제 앱을 다시 실행합니다.

이제 기본 설정이 준비되었으므로 밈 검색기 🥳를 구축해 보겠습니다.

참고: 이 튜토리얼을 수행하는 동안 문제가 발생하면 |_+_| 시작 프로젝트가 NodeGui의 최신 버전을 가져왔는지 확인하기 위한 파일입니다.

애니메이션 GIF 표시

밈은 일반적으로 애니메이션 GIF이므로 URL에서 GIF 이미지를 표시하는 기본 창을 만드는 것으로 시작하겠습니다.

이를 위해 우리는 큐무비 QLabel과 함께. QMovie는 위젯이 아니라 간단한 애니메이션을 재생할 수 있는 컨테이너입니다. QLabel과 함께 사용하겠습니다.

QMovie의 사용 예는 다음과 같습니다.

URL에서 이미지를 로드하고 싶기 때문에 |_+_|를 사용할 수 없습니다. setFileName 로컬 파일에만 예약된 메서드입니다. 대신 다음을 사용하여 GIF 이미지를 다운로드합니다. 축 버퍼로 사용하고 QMovie 방법 사용 loadFromData 대신에.

이제 axios 설치부터 시작하겠습니다.

이제 URL을 매개변수로 받아 구성된 |_+_| GIF 인스턴스:

|_+_| 함수는 URL을 받아 axios에게 GIF를 버퍼로 다운로드하도록 지시한 다음 해당 버퍼를 사용하여 |_+_| 사례.

|_+_|를 생각할 수 있습니다. GIF 애니메이션을 프레임별로 재생하는 내부 논리를 처리하는 클래스로. |_+_| 위젯이 아니므로 그대로 화면에 표시되지 않습니다. 대신 일반 |_+_| 인스턴스 및 세트 |_+_| 그것에.

달러에서 로벅스로 변환기

이후 |_+_| 프라미스를 반환하면 코드를 일부 변경해야 합니다. 약간의 리팩토링 후 다음과 같이 끝납니다.

src/index.js

|_+_| 함수는 우리의 진입점입니다. 여기에서 창과 레이블을 만듭니다. 그런 다음 |_+_|를 인스턴스화합니다. |_+_|의 도움으로 인스턴스를 기능을 사용하고 마지막으로 |_+_| |_+_|로.

|_+_|로 앱 실행 다음과 같이 표시되어야 합니다.

GIPHY API에서 GIF 가져오기

giphy.com 에는 누구나 애니메이션 GIF를 사용하는 멋진 앱을 빌드하는 데 사용할 수 있는 공개 API가 있습니다. GIPHY API를 사용하려면 다음에서 등록해야 합니다. developer.giphy.com API 키를 얻습니다. 당신은 찾을 수 있습니다 여기에서 추가 지침 .

우리는 엔드포인트 검색 밈 검색을 구현하기 위한 기능입니다.

|_+_| |_+_| 매개변수를 입력으로 사용하고 위의 끝점을 사용하여 GIF를 요청합니다.

실행 후 함수의 결과는 다음과 같습니다.

결과는 본질적으로 각 GIF에 대한 정보를 포함하는 객체 배열입니다. 특히 |_+_|에 관심이 있습니다. GIF에 대한 URL을 포함하는 각 이미지에 대해.

API 응답을 사용하여 GIF 목록 표시

GIF 목록을 표시하기 위해 |_+_| 기능:

1. 생성 QWidget 컨테이너
2. |_+_| 만들기 GIF별 위젯
3. |_+_| 만들기 각각 |_+_| 사례
4. 각각 첨부 |_+_| |_+_|의 자식으로 컨테이너
5. 반환 |_+_| 컨테이너

코드는 다음과 같습니다.

이것을 조금 분해합시다.

먼저 컨테이너 위젯을 만듭니다. |_+_|s는 기본적으로 컨테이너 역할을 하는 빈 위젯입니다. |_+_|와 비슷합니다. 웹 세계의 요소.

다음으로 |_+_|에 하위 위젯을 할당하려면 레이아웃을 지정해야 합니다. ㅏ 형세 자식 위젯이 부모 안에 어떻게 배열되어야 하는지를 나타냅니다. 여기서 우리는 선택합니다 FlexLayout .

그런 다음 |_+_| |_+_| 생성 함수 각 GIF URL에 대한 인스턴스. 우리는 |_+_| 인스턴스를 |_+_| (이름 |_+_|)하고 |_+_| 방법. 마지막으로 |_+_| |_+_|를 사용하여 컨테이너의 레이아웃에 대한 위젯 방법.

터보 세금 계정을 삭제하는 방법

이것은 모두 비동기식으로 발생하기 때문에 일부 컨테이너 스타일을 설정하고 컨테이너 위젯을 반환하기 전에 |_+_|를 사용하여 모든 것이 해결될 때까지 기다립니다.

창 위젯에 목록 첨부

이제 |_+_| 우리가 준비한 위젯 목록을 보기 위한 기능입니다.

src/index.js

이러한 변경을 수행한 후 프로젝트를 실행하면 다음이 표시됩니다.

엄청난! 이제 사용자가 Hello GIF 이외의 다른 항목을 검색할 수 있도록 버튼과 함께 검색 입력 필드를 추가해 보겠습니다.

검색 입력 및 버튼 추가

|_+_|를 생성하여 시작하겠습니다. 콜백 함수를 매개변수로 받아들이는 함수. 검색 버튼을 클릭하면 호출됩니다.

함수가 수행해야 하는 작업은 다음과 같습니다.

1. |_+_| 만들기 검색 입력 필드와 버튼을 자식으로 추가할 컨테이너
2. 레이아웃을 생성하고 컨테이너에 연결
3. 검색 입력 및 버튼을 만든 다음 |_+_|
4. 버튼에 이벤트 리스너를 연결하여 클릭하면 |_+_| 텍스트 입력 필드에 있는 텍스트를 전달하는 콜백 함수
5. 반환 |_+_| 컨테이너

코드는 다음과 같습니다.

여기에서 무슨 일이 일어나고 있는지 공정하게 이해하셨기를 바랍니다. 하지만 한 가지 새로운 점은 setStyleSheet 메서드 . 블록 수준의 CSS를 한번에 적용하는 방법이라고 생각하시면 됩니다. 이것은 웹의 전역 스타일시트와 매우 유사하지만 NodeGui/Qt에서 스타일시트는 전역적으로 뿐만 아니라 모든 블록에 첨부될 수 있다는 차이점이 있습니다.

스타일시트를 사용하여 위젯의 스타일을 지정하려면 |_+_| 스타일시트에서 참조하는 데 사용할 위젯입니다. 이는 |_+_| 웹 세상에서. |_+_|를 설정하기 위해 |_+_| 방법.

이제 이것을 추가합시다 |_+_| 메인 창으로.

src/index.js

이제 앱을 실행하고 검색 필드에 무언가를 입력하면 검색한 내용이 터미널에 기록된 것을 볼 수 있습니다.

검색을 GIF 보기에 연결

사용자 검색에 대한 응답으로 새 GIF를 로드하려면 다음을 수행해야 합니다.

1. 검색 버튼을 클릭하면 실행되는 콜백 내에서 검색 텍스트를 잡고 |_+_| 새로운 GIF 목록을 가져오는 기능.
2. |_+_|를 사용하여 이러한 GIF에 대한 새 컨테이너를 만듭니다. 기능.
3. 창에서 기존 컨테이너를 제거합니다.
4. 창에 새 컨테이너를 추가합니다.

우리가 물건을 조금 섞으면 다음을 얻습니다.

다시 실행하고 마술을 봅시다 🧙‍♂️.

보시다시피 검색창에 무언가를 입력하고 검색 버튼을 누르면 위젯이 GIPHY API에서 검색어와 일치하는 GIF 목록을 가져옵니다.

|_+_| 사용 GIF 목록을 스크롤 가능하게 만들기

이 모든 것이 올바른 방향으로 진행되고 있지만 GIF ​​목록이 하단에서 잘리고 스크롤할 방법이 없다는 것을 눈치채셨을 것입니다. |_+_|를 사용하고 있기 때문입니다. 표시할 컨테이너입니다. 컨테이너를 스크롤 가능하게 만들려면 |_+_| ~을 위해 QScrollArea . 이것은 다른 위젯에 대한 스크롤 뷰를 제공합니다.

|_+_|를 제거하여 시작하겠습니다. |_+_|의 속성 기능:

그런 다음 변경해야 합니다 |_+_| 다음과 같이 보입니다.

여기서는 너무 신나는 일이 없습니다. 검색 필드 아래의 레이아웃에 추가할 새 |_+_|를 생성하고 있습니다. 우리는 또한 |_+_|를 사용하고 있습니다. takeWidget 메서드 새 검색 결과를 추가하기 전에 스크롤 영역에서 기존 컨테이너를 제거합니다.

meme searcher를 실행하면 이제 스크롤 가능한 GIF가 있어야 합니다.

공유를 위해 GIF URL 복사에 클릭 리스너 추가

이제 모든 GIF를 볼 수 있으므로 공유할 수 있기를 원합니다. 이를 수행하는 한 가지 빠른 방법은 사용자가 선택한 GIF를 클릭할 때마다 URL을 전역 클립보드에 복사하는 것입니다.

그런 다음 사용자는 GIF를 사용하려는 위치로 이동하여 |_+_|로 삽입할 수 있습니다.

이를 위해서는 다음을 수행해야 합니다.

1. 각 GIF에 마우스 다운 이벤트 리스너를 첨부합니다.
2. 이벤트 리스너 콜백 내에서 Q클립보드 클래스 URL을 전역 클립보드에 복사하려면
3. URL이 복사되었다는 모달을 사용자에게 표시

이벤트 리스너는 |_+_| 기능:

pdf 파이썬에서 이미지 추출

여기, QApplication.클립보드 클립보드와 상호 작용하기 위한 객체를 반환합니다. 이 객체의 |_+_| 실제 클립보드의 내용을 변경하는 방법.

또한 |_+_| 기능. 다음을 정의해 보겠습니다.

그만큼 QMessageBox 위젯 웹 브라우저의 경고 상자와 비슷합니다. 사용자 상호 작용을 중단하고 메시지를 표시하는 데 사용할 수 있습니다.

마지막으로 |_+_| 맨 위에 있는 새 위젯을 모두 가져와야 합니다.

밈 검색 프로그램을 실행하면 이제 GIF URL을 복사/붙여넣기할 수 있습니다.

시스템 트레이 아이콘 추가

우리는 앱을 사용하지 않을 때 시스템 트레이에 숨겨두기를 원합니다. 이를 위해 클릭 시 실행 중인 위젯의 가시성을 토글하는 메뉴 항목이 있는 시스템 트레이 아이콘을 생성합니다.

관련 단계는 다음과 같습니다.

1. 만들기 Q시스템트레이아이콘 아이콘으로.
2. 다음을 사용하여 시스템 트레이 아이콘에 대한 메뉴를 만듭니다. Q메뉴 . 메뉴 인스턴스를 시스템 트레이의 컨텍스트 메뉴로 설정합니다.
3. 다음을 사용하여 메뉴 항목 만들기 QAction 위젯 이벤트 리스너를 설정하여 |_+_| 이벤트.
4. 트리거 시 창을 숨기거나 표시합니다.

필요한 모듈을 요청하고 |_+_| 아이콘을 사용하도록 지시하는 기능:

보시다시피 |_+_|의 아이콘이 필요합니다. 폴더. 잘 따라오시면 가능합니다 여기에서 아이콘 파일을 다운로드 .

이제 시스템 트레이 아이콘을 생성하는 기능이 제공됩니다.

여기에서는 NodeGui를 사용하여 아이콘을 만들고 있습니다. QIcon 클래스 . 그런 다음 |_+_| 앱의 시스템 트레이 아이콘을 만드는 클래스입니다.

마지막으로, 웹팩이 |_+_| 폴리필링을 방지하기 위해 웹팩 설정(|_+_|에서)을 조정해야 합니다.

최종 결과:

몇 가지 최종 조정

오류 처리

패키징을 진행하기 전에 |_+_| 기능을 추가하고 오류 처리 대화 상자를 추가합니다.

예를 들어 GIPHY에서 GIF를 가져오라는 Ajax 요청에 문제가 있는 경우 사용자에게 경고합니다. API 키를 유효하지 않은 것으로 변경한 다음 앱을 실행하고 GIF 검색을 시도하면 됩니다.

사용자가 API 키를 입력하도록 허용

API 키에 대해 이야기하는 동안 사용자가 API 키를 입력할 수 있는 대화 상자를 추가해 보겠습니다. 이는 프로그램에서 하드 코딩할 필요가 없음을 의미합니다.

Stormx 구입처

보시다시피, 우리는 |_+_| 위젯 사용자에게 입력하라는 메시지를 표시한 다음 사용자가 제공하는 모든 내용을 |_+_| 변하기 쉬운. 이 튜토리얼을 읽은 후 NodeGui 기술을 향상시키려는 경우 예를 들어 파일 시스템에 키를 유지하거나 유효성을 검사하고 사용자에게 피드백을 제공하여 이를 개선할 수 있습니다.

참고: 잊지 마세요. 전체 소스 코드는 여기에서 사용할 수 있습니다. https://github.com/sitepoint-editors/memesearchapp-nodegui-tutorial .

플랫폼 간 배포를 위한 앱 패키징

앱을 성공적으로 빌드한 후에는 최종 사용자가 다운로드하여 사용할 수 있는 macOS, Windows 및 Linux용 배포 가능 파일을 만들어야 합니다.

배포 가능 파일을 만드는 프로세스는 일반적으로 운영 체제마다 다르므로 고통을 덜기 위해 |_+_|라는 NodeGui의 패키징 도구를 사용합니다.

용법

먼저 패커를 개발 종속성으로 설치합니다.

다음으로 packer를 사용하여 배포 템플릿을 만듭니다.

템플릿은 본질적으로 NodeGui 앱의 모든 코드, 자산 및 종속성을 성공적으로 패키징하는 코드를 포함하는 OS별 프로젝트입니다. 세 가지 다른 템플릿을 만들려면 Windows, macOS 및 Linux에서 별도로 실행해야 합니다. 이 템플릿을 사용하면 각 OS에 특정한 최종 배포 설정을 미세 조정할 수 있습니다. 필요에 맞게 회사 정보, 아이콘 및 기타 메타데이터와 같은 항목을 조정할 수 있습니다.

Linux의 경우 템플릿은 다음과 같습니다.

init 명령만 실행하면 됩니다. 한번 . 그런 다음 템플릿을 변경하고 프로젝트 리포지토리에서 커밋합니다.

다음 단계는 실제로 프로젝트를 빌드하고 배포 가능 패키지로 패키징하는 것입니다.

|_+_| 삭제 존재하는 경우 디렉토리:

그런 다음 webpack을 사용하여 앱을 빌드합니다.

마지막으로 패커의 pack 명령을 실행하여 |_+_| 인수로 폴더:

결과는 다음과 같습니다.

• macOS에서 패커는 |_+_| 파일.
• Linux에서 패커는 |_+_|를 출력하며 이는 |_+_| macOS에서 파일.
• Windows에서 패커는 실행 파일과 모든 dll을 포함하는 폴더를 출력합니다.

명령이 성공하면 일반적으로 |_+_| 예배 규칙서. 당신을 확인 하지 않다 이 디렉터리를 커밋합니다:

Linux 배포 가능 파일은 |_+_|입니다. .

결론

이 튜토리얼에서는 약 200줄의 코드로 NodeGui를 사용하여 실제 밈 검색 앱을 성공적으로 구축했습니다. 우리는 라이브러리의 기본 개념과 기능 중 일부를 배웠습니다. 또한 완성된 앱을 최종 사용자와 공유할 수 있는 배포 가능 패키지로 패키징할 수 있었습니다.

저는 NodeGui가 Node.js로 진정으로 효율적인 네이티브 앱을 많이 만들 수 있는 문을 열어준다고 믿습니다.

NodeGui는 또한 다음과 같은 라이브러리 및 프레임워크를 지원합니다. 리액트(공식) , 각도(커뮤니티) 등등 Vue.js(커뮤니티) . 이것들을 확인하고 관심이 있다면 GitHub에서 별표를 해주세요.

NodeGui는 오픈 소스 라이브러리입니다. 코드 기여의 큰 이점 . 비교적 이해하기 쉬운 코드베이스와 매우 환영받는 커뮤니티가 있습니다. 모든 사람이 도와주도록 격려합니다.

마지막으로 CSS를 통한 많은 내장 위젯과 스타일 덕분에 NodeGui 앱은 웹이나 Electron 앱만큼 개발하기 쉽다고 생각합니다. 나만의 멋진 것을 만들고 우리와 공유하는 것이 좋습니다.

원래 Atul Ramachandran에서 출판했습니다. https://www.sitepoint.com