【nodeschool】elementary-electron을 해본다

12126 단어 Electron자바스크립트NodeSchoolNode.js

소개



커맨드 라인 기반으로 Node.js를 배울 수있는 NodeSchool이라는 훌륭한 서비스가 있습니다.
htps : // 그래서 s 쵸오 l. 이오/

이미 메인? learnyounode 코스는 종료되었습니다만, 그 밖에도 재미있을 것 같은 코스가 있으므로 이번은 elementary-electron 를 해 봅니다.

Electron에서 데스크톱 앱을 만드는 방법을 배울 수 있습니다.

해보자



적당한 장소에서
npm install -g elementary-electron

로 학습 라이브러리를 설치합니다.

또한 적절한 장소에서
mkdir elementary-electron
cd elementary-electron

로 여기를 작업 디렉토리로 결정합니다.

학습을 할 때는
elementary-electron

라고 두드리면 코스 선택 화면을 표시할 수 있습니다.
이번 코스에는 다음의 5개의 장이 있는 것 같습니다. 빨리 가자.
  • Installing
  • Hello World
  • Cat Picture
  • Cat Annotation
  • Save PDF

    • 설치



    설치하기만 하면 되네요. 이미 설치된 사람이라면 아무것도 하지 않아도 클리어입니다.
    npm install -g electron
elementary-electron verify

    Hello World



    평소 Hello World를 내는 앱을 만드세요.

    index.html


    <!DOCTYPE html>
<html>

<head>
</head>

<body>
  <h1>Hello World</h1>
</body>

</html>

    app.js


    const electron = require('electron')

electron.app.on('ready', () => {
  const mainWindow = new electron.BrowserWindow({ width: 600, height: 800 })
  mainWindow.loadURL(`file://${__dirname}/index.html`)
})

    실행해 보겠습니다.
    electron app.js



    앱이 표시되었습니다!

    Cat Picture



    고양이의 사진을 표시하는 앱을 만드는 것 같습니다.
    우선은
    npm init

    에서 package.json 를 생성하면서 cat-picture 모듈을 설치합니다.
    npm install --save cat-picture
    cat-picture 를 로드 index.js 를 만들면서 index.html 로 로드하도록 설정합니다.

    index.html


    <!DOCTYPE html>
<html>

<head>
</head>

<body>
  <h1>Hello World</h1>
  <script type="text/javascript" src="index.js"></script>
</body>

</html>

    index.js


    require('cat-picture')



    고양이의 이미지가 제대로 나왔습니다.

    Cat Annotation



    방금 전의 앱을 더욱 개조해 갑니다.
    우선 필요한 모듈을 추가로 설치하면서
    npm install --save lightning-image-poly

    index.html


    <!DOCTYPE html>
<html>

<head>
</head>

<body>
  <h1>Hello World</h1>
  <div id="visualization"></div>
  <script type="text/javascript" src="index.js"></script>
</body>

</html>

    index.js


    const picture = require('cat-picture')
const image = require('lightning-image-poly')

const src = picture.src
picture.remove()

const viz = new image('#visualization', null, [src], { hullAlgorithm: 'convex' })

    수수께끼에 폴리곤을 그릴 수 있네요(동영상을 찍고 있었는데 사라져 버렸습니다).
    우선 이것으로 클리어입니다.

    Save PDF



    방금전의 폴리곤을 PDF에 보존할 수 있도록 한다고 합니다.

    index.js


    const picture = require('cat-picture')
const image = require('lightning-image-poly')
const { remote } = require('electron')
const fs = require('fs')

const src = picture.src
picture.remove()

const viz = new image('#visualization', null, [src], { hullAlgorithm: 'convex' })

const save = () => {
  remote.getCurrentWebContents().printToPDF({
    portrait: true
  }, (err, data) => {
    fs.writeFile('annotation.pdf', data, err => {
      if (err) alert(`error generating pdf! ${err.message}`)
      else alert('pdf saved!')
    })
  })
}

window.addEventListener('keydown', e => {
  if (e.keyCode == 80) save()
})

    앱을 열고 P 키를 누르면 elementary-electron의 디렉토리에 annotation.pdf가 제대로 저장되었습니다.
    이제 코스는 수료입니다.

    결론


    learnyounode 코스는 제목과 힌트만 주어져, 스스로 생각해 시행착오하면서 풀어나가는 형식이었으므로 상당히 보람이 있었지만, 이번 코스는 설명문에 써 있는 내용으로 모두 클리어 할 수있었습니다.

    코스를 해내면서 동시에 본 기사를 쓰고 있었습니다만, 20분 정도에서 Electron의 도입을 접하는 것은 좋은 느낌이군요. 다음 번에는 좀 더 난이도가 높은 코스를 해보고 싶습니다.
    Electron & React & Redux & TypeScript 앱 제작 워크샵 9일째(최종회)
    2018 년이지만 데스크탑 마스코트를 만들고 싶었습니다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage