Repository: maxogden/elementary-electron
Branch: master
Commit: 7e678a5508ba
Files: 31
Total size: 24.5 KB
Directory structure:
gitextract_k9f45znx/
├── .gitignore
├── bin/
│ └── elementary-electron
├── exercises/
│ ├── cat_annotation/
│ │ ├── exercise.js
│ │ ├── problem.en.md
│ │ ├── problem.ja.md
│ │ └── problem.ko.md
│ ├── cat_picture/
│ │ ├── exercise.js
│ │ ├── problem.en.md
│ │ ├── problem.ja.md
│ │ └── problem.ko.md
│ ├── hello_world/
│ │ ├── exercise.js
│ │ ├── problem.en.md
│ │ ├── problem.ja.md
│ │ └── problem.ko.md
│ ├── installing/
│ │ ├── exercise.js
│ │ ├── problem.en.md
│ │ ├── problem.ja.md
│ │ └── problem.ko.md
│ └── save_pdf/
│ ├── exercise.js
│ ├── problem.en.md
│ ├── problem.ja.md
│ └── problem.ko.md
├── i18n/
│ ├── en.json
│ ├── ja.json
│ └── ko.json
├── index.js
├── lib/
│ ├── checkAll.js
│ ├── fsCheck.js
│ └── pkgDependencyCheck.js
├── package.json
└── readme.md
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
.DS_Store
node_modules
================================================
FILE: bin/elementary-electron
================================================
#!/usr/bin/env node
require('../index.js').execute(process.argv.slice(2))
================================================
FILE: exercises/cat_annotation/exercise.js
================================================
var path = require('path')
var checkAll = require('../../lib/checkAll.js')
var fsCheck = require('../../lib/fsCheck.js')
module.exports = function () {
var problem = {}
problem.requireSubmission = false
problem.problem = {file: path.join(__dirname, 'problem.{lang}.md')}
problem.verify = function (args, cb) {
checkAll([
fsCheck(path.join('.', 'index.js')),
fsCheck(path.join('.', 'node_modules', 'cat-picture')),
fsCheck(path.join('.', 'node_modules', 'lightning-image-poly'))
], '', '{{exercise.cat_annotation.fail}}', cb)
}
return problem
}
================================================
FILE: exercises/cat_annotation/problem.en.md
================================================
# Cat Annotation
Now we're going to add a feature: draw polygon regions on the image!
This could be useful for labeling objects or defining regions on a map.
Add the following line to the `<body>` section of your `index.html`, which adds an empty `div` element to hold our visualization. **Make sure** this comes **before** the `<script>` tag so that the code runs after the `div` is created.
```
<div id='visualization'></div>
```
Next modify `index.js`. The first line should require our cat picture, and also assign it to a variable:
```
var picture = require('cat-picture')
```
We actually just want the source data for the picture, so get it, then remove the image from the page.
```
var src = picture.src
picture.remove()
```
Now install a visualization module for drawing polygons by typing `npm install lightning-image-poly --save`.
Double check that your `package.json` has a new entry!
Require the module by adding the line:
```
var image = require('lightning-image-poly')
```
Then render the image data we stored above by creating a new `image` visualization.
```
var viz = new image('#visualization', null, [src], {hullAlgorithm: 'convex'})
```
If you run `electron app.js` you should see a cat, and be able to draw polygons on it with the mouse!
When you think you are done with this challenge, run `elementary-electron verify`
================================================
FILE: exercises/cat_annotation/problem.ja.md
================================================
# Cat Annotation
ここでは、さらに新しい機能を追加します！これから追加する新しい機能、それは「ポリゴンで指定した領域を描画する」です。
この機能は、地図で指定した範囲を描画したり、ラベリングをするのに役に立ちます。
下記の一行を `index.html` の `<body>` の中に追加してください。このタグは、ビジュアライゼーションを行うための空の `div` です。**気をつけてほしいのが、** このタグは、`<script>` タグより **前** に設置してください。そうすることで、`index.js` を `div` が認識されたあとに実行することができるようになります。
```
<div id='visualization'></div>
```
次に、`index.js` を編集します。最初の一行は、require した `cat-picture` を変数にします。
```
var picture = require('cat-picture')
```
いま実際に欲しいのは画像のデータです。変数に保存したら、ページから画像を削除しましょう。
```
var src = picture.src
picture.remove()
```
次に、ポリゴンを描画するためのモジュールをインストールしましょう。次のコマンドを実行してください: `npm install lightning-image-poly --save`
これで `package.json` に新しい行が追加されているはずです。確認してみてください！
次の行を追加して、いまインストールしたモジュールを使いましょう:
```
var image = require('lightning-image-poly')
```
完了したら、先ほど変数に保存した画像を `image` 変数を使い描画してみましょう。
```
var viz = new image('#visualization', null, [src], {hullAlgorithm: 'convex'})
```
これで、`electron app.js` を実行してアプリを開くと、猫の写真が表示されるだけでなく、マウスでポリゴンを描けるようになります。
この課題が完了したら `elementary-electron verify` を実行してください。
================================================
FILE: exercises/cat_annotation/problem.ko.md
================================================
# 고양이 사진과 다각형
새로운 기능을 추가해 볼까요? 이미지 위에 다각형 영역을 그려 봅시다.
이 기능은 어떤 물체에 표시할 때나, 지도 위에 일정 지역을 나타낼 때 유용합니다.
`index.html` 파일의 `<body>` 부분에 다음 코드 한 줄을 넣어 보세요. 이곳은 사진이 위치할 빈 `div` 요소입니다. **조심하세요.** 이 코드는 `<script>` 태그 **앞에** 위치해야 합니다. 그래야 `div` 요소가 생성된 뒤에 `<script>`내의 코드가 실행됩니다.
```
<div id='visualization'></div>
```
다음은 `index.js`를 수정해 볼까요? 맨 처음 줄에 require를 이용해서 고양이 사진을 변수에 저장해 봅시다.
```
var picture = require('cat-picture')
```
사실 필요한 것은 고양이 사진의 소스 데이터뿐이니, 변수에 저장한 뒤에 사진을 페이지에서 지웁시다.
```
var src = picture.src
picture.remove()
```
이제 다각형을 그려주는 모듈을 설치해 봅시다. `npm install lightning-image-poly --save`를 입력해 주세요.
`package.json`에 새로운 항목이 추가되었는지 다시 한번 확인하세요.
다음 코드를 추가해서 설치한 모듈을 사용해봅시다.
```
var image = require('lightning-image-poly')
```
위에서 변수에 저장한 이미지 데이터를 사용해, visualization `image`를 새로 만들어 이미지를 그려봅시다.
```
var viz = new image('#visualization', null, [src], {hullAlgorithm: 'convex'})
```
`electron app.js`를 실행하면 고양이가 보일 거예요. 그리고 이제 마우스로 다각형을 그릴 수 있습니다!
위의 과정을 전부 완료했다면, `elementary-electron verify`를 실행해주세요.
================================================
FILE: exercises/cat_picture/exercise.js
================================================
var path = require('path')
var chalk = require('chalk')
var checkAll = require('../../lib/checkAll.js')
var cheerio = require('cheerio')
var fs = require('fs')
var fsCheck = require('../../lib/fsCheck.js')
var pkgDependencyCheck = require('../../lib/pkgDependencyCheck.js')
module.exports = function () {
var problem = {}
problem.requireSubmission = false
problem.problem = {file: path.join(__dirname, 'problem.{lang}.md')}
problem.verify = function (args, cb) {
var htmlPath = 'index.html'
checkAll([
fsCheck(htmlPath),
fsCheck('index.js'),
fsCheck(path.join('node_modules', 'cat-picture')),
pkgDependencyCheck('cat-picture'),
function (messages) {
var html
try {
html = fs.readFileSync(htmlPath, 'utf-8')
} catch (e) {
console.log(e)
messages.push(' - ' + chalk.red(htmlPath) + ' [{{exercise.cat_picture.cant_read}}]')
return 0
}
var $
try {
$ = cheerio.load(html)
} catch (e) {
console.log(e)
messages.push(' - ' + chalk.red(htmlPath) + ' [{{exercise.cat_picture.invalid_html}}]')
return 0
}
var script = $('script')
if (script.length === 0) {
messages.push(' - ' + chalk.red(htmlPath) + ' [{{exercise.cat_picture.missing_script_tag}}]')
return 0
}
var body = $('body')
if (body.length === 0) {
messages.push(' - ' + chalk.red(htmlPath) + ' [{{exercise.cat_picture.missing_body_tag}}]')
return 0
}
if (!$.contains(body[0], script[0])) {
messages.push(' - ' + chalk.red(htmlPath) + ' [{{exercise.cat_picture.script_not_in_body}}]')
return 0
}
messages.push(' - ' + chalk.green(htmlPath) + ' ✔')
return 1
}
], '{{exercise.cat_picture.success}}', '{{exercise.cat_picture.fail}}', cb)
}
return problem
}
================================================
FILE: exercises/cat_picture/problem.en.md
================================================
# Cat Picture
Now that we have a working skeleton structure we can add our first feature: render a cat picture.
We could write the code to do this ourselves, but (like many other common programming tasks) somebody else has already written code to do this for us. Node.js provides a way for authors to package up chunks of pre-written code for easy re-use, and also provides a program called `npm` to produce, download, and install such packages (which Node refers to as "modules"). If you're familiar with R, `npm` is very similar to the `install.packages()` command.
So, back to our task: add a glorious cat picture to our app. To do this we can use a module from npmjs.org called `cat-picture`. It does one thing: adds a cat picture to a web page.
We will use the `npm` command line tool to download and install the `cat-picture` module. Before we can work with modules, though, we need to give Node a little bit more information about what we are doing with our app. The best way to do this is actually to _create our own_ module!
To do this, all we need to do is create a file called `package.json` that will contain certain information about our module, notably including a list of what other modules we depend on. `npm` can do this for us!
Run the command `npm init` It will ask you some questions to fill out; if you're not sure about the answer, you can just hit "enter" to accept its default.
When the command is complete, you should see a new file in your directory called `package.json`. Check it out! You can open `package.json` in your text editor.
Now, run the following command: `npm install cat-picture --save`
This will download the `cat-picture` module into a folder called `node_modules` and will also add cat-picture to your `package.json`. If you open `package.json` in your editor again, you should see a mention of the `cat-picture` module.
Now that we have installed the module, we can use it in our application. Add this to your `index.html` file, inside the `<body>` section but _after_ the `<h1>` section:
```
<script type="text/javascript" src="index.js"></script>
```
Then, use your text editor to create a new file in your directory called `index.js` with this line of code in it:
```
require('cat-picture')
```
Now when you run your app with `electron app.js` you should see a cat!
When you think you are done with this challenge, run `elementary-electron verify`
================================================
FILE: exercises/cat_picture/problem.ja.md
================================================
# 猫の写真
これで作業をする土台が完成したので、新しい機能を実装することができます。
これから追加する新しい機能、それは「猫の写真を描画する」です。
この新しい機能を実装するのに、0からコードを書いても良いです。しかし、一般的なプログラミングのタスクと同様に他の誰かが既にコードを書いてくれているようです。Node.js は開発者に作成したコードのまとまりをパッケージ化して簡単に再利用する方法を提供しており、そのようなパッケージ(Node.js からは "modules" と呼ばれています)を作成・ダウンロード・インストールを行うための `npm` と呼ばれるプログラムも提供しています。もしあなたが R 言語に精通しているならば、`install.packages()` コマンドに非常に近いものといえば分かりやすいかもしれません。
それでは本題に戻ります。輝く猫の写真をアプリに追加しましょう。これを作るのに、`cat-picture` と呼ばれるモジュールを npmjs.org からインストールして使ってみましょう。このモジュールは、ウェブページに猫の写真を追加するためのものです。
この `cat-picture` モジュールをダウンロード・インストールするのに、`npm` コマンドを使います。しかし、その作業をする前に、このアプリケーションは何をするためのものか、Node.js にもう少し情報を伝えてみましょう。これを行うベストな方法は、_あなたのモジュール_ を作成することです！
自分のモジュールを作成するには、私たちのモジュールに関するいくつかの詳細、例えば依存している他のモジュールのリストなどを含んだ `package.json`というファイルを作成する必要があります。そして、`npm` は私たちのかわりにこれを行ってくれます！
`npm init`コマンドを実行してみてください。このコマンドを実行すると、いくつかの質問が表示されるので回答してください。また、 答えがわからない場合は "enter" で飛ばすとデフォルトの回答がセットされます。
このコマンドが完了すると、コマンドを実行したディレクトリで `package.json` という名前のファイルが生成されます。チェックしてみてください！エディタで `package.json` を開いてみましょう。
次に、このコマンドを実行してみてください: `npm install cat-picture --save`
この一連の流れは、`cat-picture` モジュールを `node_modules` という名前のフォルダにダウンロードし、cat-picture を `package.json`に追加するというものです。もし今 `package.json` をエディタで改めて開いてみると `cat-picture` の記述を確認することができるでしょう。
さて、モジュールのインストールが完了したので、いよいよアプリケーションで実際に使ってみましょう。まずは、 `index.html` ファイルを作成し、下記の一行を `<body>` の中、かつ `<h1>` の _あと_ に追加してみてください:
```
<script type="text/javascript" src="index.js"></script>
```
完了したら、同じディレクトリに `index.js` を追加し、エディタで開いて下記の一行を追加してみてください:
```
require('cat-picture')
```
これで、`electron app.js` を実行してアプリを開くと、猫の写真を見ることができます！
このチャレンジが完了したら、`elementary-electron verify` を実行してください。
================================================
FILE: exercises/cat_picture/problem.ko.md
================================================
# 고양이 사진
이제 새로운 기능들을 추가할 작업대가 만들어졌습니다. 그럼 첫 번째 기능을 추가해볼까요? 고양이 사진을 그려봅시다.
기능을 추가하기 위해 아예 처음부터 만드는 방법도 있습니다만, 여타 다른 프로그래밍 작업처럼, 누군가가 우리가 필요로 하는 기능을 이미 만든 경우가 많습니다. Node.js는 개발자가 자신이 작성한 프로그램을 패키지화해서 재사용을 쉽게 하도록 해줍니다. 또한 `npm`이라는 프로그램을 제공하여 그러한 프로그램(Node는 이걸 "modules"라고 부릅니다)들을 만들고, 내려받고, 설치하게 해줍니다. R을 사용해보신 적이 있다면 `npm`은 `install.packages()`와 비슷하다고 생각하시면 됩니다.
자 이제 본론으로 돌아와서 아름다운 고양이 사진을 앱에 추가해봅시다. 그러려면 `cat-picture`라는 모듈을 npmjs.org로부터 설치할 필요가 있습니다. 이 모듈은 웹 페이지에 고양이 사진을 추가하는 단순한 프로그램입니다.
`cat-picture` 모듈을 설치하기 위해 `npm`이라는 명령어를 사용할것입니다. 이 작업을 하기 전에, 지금 만들고 있는 앱은 무엇을 하는 프로그램인지에 대해 Node.js에 알려줘야 합니다. 가장 좋은 방법은 실제로 _당신이 직접_ 모듈을 작성하는 것입니다.
모듈을 작성하려면 `package.json`이라는 파일을 만들면 됩니다. 이 파일에 우리가 만든 모듈에 대해서, 그리고 우리의 모듈이 의존하고 있는 모듈들의 리스트를 작성해야 합니다. 고맙게도 `npm`은 이 작업을 우리 대신 해줍니다!
`npm init`을 실행해보세요. 몇 가지 질문에 응답해야 합니다. 뭐라고 답을 해야 할지 모르겠다면 그냥 엔터를 입력해서 디폴트로 설정하세요.
`npm init`의 실행이 완료되면, 현재 디렉터리에 `package.json`이라는 파일이 생길 것입니다. 텍스트 에디터로 내용을 확인해보세요.
이제 다음 명령어를 실행해보세요. `npm install cat-picture --save`
그러면 `cat-picture` 모듈이 `node_modules`라는 폴더에 저장되고, `package.json`에도 모듈 이름이 표시될 것입니다. `package.json`을 텍스트 에디터로 열어보면, `cat-picture` 모듈이 언급되어 있을 것입니다.
이제 모듈을 설치했으니 우리의 앱에서 사용해 봅시다. 다음 코드를 `index.html`의 `<body>` 태그 안에 작성하세요. 단 `<h1>` 태그의 _뒤에_ 와야 하는 것에 주의하세요.
```
<script type="text/javascript" src="index.js"></script>
```
텍스트 에디터를 사용해서, 현재 디렉터리에 `index.js`라는 파일을 만들고 다음 코드를 작성하세요.
```
require('cat-picture')
```
이제 `electron app.js`으로 앱을 실행하세요. 고양이가 보일 겁니다!
위의 과정을 완료하셨다면 `elementary-electron verify`를 실행해주세요.
================================================
FILE: exercises/hello_world/exercise.js
================================================
var path = require('path')
var checkAll = require('../../lib/checkAll.js')
var fsCheck = require('../../lib/fsCheck.js')
module.exports = function () {
var problem = {}
problem.requireSubmission = false
problem.problem = {file: path.join(__dirname, 'problem.{lang}.md')}
problem.verify = function (args, cb) {
checkAll([
fsCheck(path.join('.', 'index.html')),
fsCheck(path.join('.', 'app.js'))
], '{{exercise.hello_world.success}}', '{{exercise.hello_world.fail}}', cb)
}
return problem
}
================================================
FILE: exercises/hello_world/problem.en.md
================================================
# Hello World
Let's set up a simple electron application.
First, create a new empty folder and do the rest of these steps inside that new folder.
Using a text editor (such as TextEdit, Notepad, etc.), create a file called `index.html` in the folder you just created with the following contents:
```
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
```
Then create a file (in the same folder) called `app.js` with the following contents:
```
var electron = require('electron')
electron.app.on('ready', function () {
var mainWindow = new electron.BrowserWindow({width: 600, height: 800, webPreferences: { nodeIntegration: true, enableRemoteModule: true }})
mainWindow.loadURL('file://' + __dirname + '/index.html')
})
```
Finally, run `electron app.js` in your terminal. You should see an application open that displays Hello World!
When you think you are done with this challenge, run `elementary-electron verify`
================================================
FILE: exercises/hello_world/problem.ja.md
================================================
# ハローワールド
シンプルな electron のアプリケーションを作ってみましょう。
最初に、空のフォルダを作り、下記の手順を作ったフォルダの中で実施していきましょう。
テキストエディタ（TextEdit, Notepadなど）を使って、以下の内容の `index.html` をフォルダの中に作成してください：
```
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
```
次に、以下の内容の `app.js`というファイルを（同じフォルダ内に）作成します：
```
var electron = require('electron')
electron.app.on('ready', function () {
var mainWindow = new electron.BrowserWindow({width: 600, height: 800, webPreferences: { nodeIntegration: true, enableRemoteModule: true }})
mainWindow.loadURL('file://' + __dirname + '/index.html')
})
```
最後に、ターミナルで `electron app.js` を実行してください。Hello World が表示されたアプリケーションが開いているはずです。
この課題が完了したら `elementary-electron verify` を実行してください。
================================================
FILE: exercises/hello_world/problem.ko.md
================================================
# 헬로 월드
간단한 electron 앱을 만들어 봅시다.
먼저, 새로운 폴더를 만들고 그 폴더에서 앞으로의 작업을 진행해 주세요.
텍스트 에디터(TextEdit, Notepad 등)를 사용해서 방금 만든 폴더에 `index.html`을 만들고, 다음 내용을 작성하세요.
```
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
```
같은 폴더에 `app.js`라는 파일을 만들고 다음 내용을 작성하세요.
```
var electron = require('electron')
electron.app.on('ready', function () {
var mainWindow = new electron.BrowserWindow({width: 600, height: 800, webPreferences: { nodeIntegration: true, enableRemoteModule: true }})
mainWindow.loadURL('file://' + __dirname + '/index.html')
})
```
마지막으로, `electron app.js`를 터미널에서 실행하세요. Hello World가 출력되는 앱이 보이실 겁니다.
위의 과정을 완료하셨다면 `elementary-electron verify`를 실행해주세요.
================================================
FILE: exercises/installing/exercise.js
================================================
var path = require('path')
var which = require('which')
var chalk = require('chalk')
module.exports = function () {
var problem = {}
problem.requireSubmission = false
problem.problem = {file: path.join(__dirname, 'problem.{lang}.md')}
problem.verify = function (args, cb) {
which('electron', function (err, resolvedPath) {
if (err) {
return cb(null, false, chalk.green('{{ee.fail}}') + ' {{exercise.installing.fail}}')
}
cb(null, true, chalk.green('{{ee.success}}') + ' {{exercise.installing.success}}')
})
}
return problem
}
================================================
FILE: exercises/installing/problem.en.md
================================================
# Installing
You have to install `electron` into your command line environment.
Run `npm install electron -g`
If you receive an EACCES error read this guide:
https://docs.npmjs.com/getting-started/fixing-npm-permissions
When you think you are done with this challenge, run `elementary-electron verify`
================================================
FILE: exercises/installing/problem.ja.md
================================================
# インストール
まずは `electron` を、
あなたのコマンドライン環境にインストールしてみましょう。
`npm install electron -g` を実行してください。
もし `EACCES` というエラーが表示された場合は、
こちらのガイドを読んでみて下さい：
https://docs.npmjs.com/getting-started/fixing-npm-permissions
完了したら `elementary-electron verify` を実行してください。
================================================
FILE: exercises/installing/problem.ko.md
================================================
# electron 설치
먼저 `electron`을 커맨드 라인 환경에 설치해 봅시다.
`npm install electron -g`를 실행해주세요.
만약 `EACCES`라는 에러가 발생한다면 다음 가이드를 읽어주세요.
https://docs.npmjs.com/getting-started/fixing-npm-permissions
위의 과정을 완료하셨다면 `elementary-electron verify`를 실행해주세요.
================================================
FILE: exercises/save_pdf/exercise.js
================================================
var path = require('path')
var checkAll = require('../../lib/checkAll.js')
var fsCheck = require('../../lib/fsCheck.js')
module.exports = function () {
var problem = {}
problem.requireSubmission = false
problem.problem = {file: path.join(__dirname, 'problem.{lang}.md')}
problem.verify = function (args, cb) {
checkAll([
fsCheck(path.join('.', 'annotation.pdf'))
], '{{exercise.save_pdf.success}}', '{{exercise.save_pdf.success}}', cb)
}
return problem
}
================================================
FILE: exercises/save_pdf/problem.en.md
================================================
# Save PDF
Let's make it so when you hit the `P` key it will save a PDF of your annotations.
Require a couple extra modules in your `index.js`:
```
var remote = require('electron').remote
var fs = require('fs')
```
Then define a function that will save the current window to a PDF.
```
function save () {
remote.getCurrentWebContents().printToPDF({
portrait: true
}, function (err, data) {
fs.writeFile('annotation.pdf', data, function (err) {
if (err) alert('error generating pdf! ' + err.message)
else alert('pdf saved!')
})
})
}
```
And finally set up an event listener that will call your `save()` function when you press `P`.
```
window.addEventListener('keydown', function (e) {
if (e.keyCode == 80) save()
})
```
Now if you run your app and hit `P` it should save `annotation.pdf` into your project folder.
When you think you are done with this challenge, run `elementary-electron verify`
================================================
FILE: exercises/save_pdf/problem.ja.md
================================================
# Save PDF
最後に、`P` キーを押したら描画したポリゴンを PDF に保存する機能を追加しましょう。
いくつかのモジュールを `index.js` 内で読み込みます:
```
var remote = require('electron').remote
var fs = require('fs')
```
次に、現在のページを保存する function を作ります。
```
function save () {
remote.getCurrentWebContents().printToPDF({
portrait: true
}, function (err, data) {
fs.writeFile('annotation.pdf', data, function (err) {
if (err) alert('error generating pdf! ' + err.message)
else alert('pdf saved!')
})
})
}
```
最後に、`P` キーが押された際に `save()` が実行されるイベントリスナーを準備します。
```
window.addEventListener('keydown', function (e) {
if (e.keyCode == 80) save()
})
```
これで、`P` キーが押されたら `annotation.pdf` として現在のフォルダに保存されるようになりました。アプリを実行してみましょう。
この課題が完了したら `elementary-electron verify` を実行してください。
================================================
FILE: exercises/save_pdf/problem.ko.md
================================================
# PDF 저장
`P` 키를 누르면 이제까지 그린 다각형을 PDF로 저장하는 기능을 만들어 봅시다.
`index.js`에서 모듈 몇 개를 읽어 들이세요.
```
var remote = require('electron').remote
var fs = require('fs')
```
그리고 현재 창을 PDF로 저장하는 함수를 만드세요.
```
function save () {
remote.getCurrentWindow().webContents.printToPDF({
portrait: true
}, function (err, data) {
fs.writeFile('annotation.pdf', data, function (err) {
if (err) alert('error generating pdf! ' + err.message)
else alert('pdf saved!')
})
})
}
```
마지막으로 `P`를 누르면 방금 만든 `save()` 함수가 실행되도록, 이벤트 리스너에 등록하세요.
```
window.addEventListener('keydown', function (e) {
if (e.keyCode == 80) save()
})
```
이제 앱을 실행해서 `P` 키를 누르면 현재 폴더에 `annotation.pdf`가 저장될 것입니다.
위의 과정을 완료하셨다면 `elementary-electron verify`를 실행해주세요.
================================================
FILE: i18n/en.json
================================================
{
"ee": {
"success": "SUCCESS!",
"fail": "FAIL!"
},
"exercise": {
"cat_annotation": {
"success": "",
"fail": "Your app has some issues."
},
"cat_picture": {
"success": "Your app folder looks good.",
"fail": "Your app folder is missing some things!",
"cant_read": "Can not access the file",
"invalid_html": "Not valid html",
"missing_script_tag": "Missing script tag",
"missing_body_tag": "Missing body tag",
"script_not_in_body": "Script not in body"
},
"hello_world": {
"success": "Your app looks good.\n\nWhen you type `electron app.js` it should start the Welcome to Electron application.",
"fail": "Your app has some issues."
},
"installing": {
"success": "Found `electron` in your PATH.",
"fail": "Failed to find the command `electron` in your PATH."
},
"save_pdf": {
"success": "You did it!\n\nFor more Electron ideas check out https://github.com/sindresorhus/awesome-electron\nFor more workshops like this check out http://nodeschool.io\n",
"fail": "Your app has some issues."
}
}
}
================================================
FILE: i18n/ja.json
================================================
{
"ee": {
"success": "成功！",
"fail": "失敗！"
},
"exercise": {
"cat_annotation": {
"success": "正しく描画されたようです。",
"fail": "何かがうまく行っていないようです。"
},
"cat_picture": {
"success": "あなたのアプリのフォルダ内は良い感じです。",
"fail": "あなたのアプリのフォルダ内は、何かが足りないようです！",
"cant_read": "ファイルのアクセスができないようです。",
"invalid_html": "html ファイルが正しくないようです。",
"missing_script_tag": "script タグが抜けているようです。",
"missing_body_tag": "body タグが抜けているようです。",
"script_not_in_body": "script タグが body タグの中にないようです。"
},
"hello_world": {
"success": "あなたのアプリは正しく動作しているようです。\n\n`electron app.js` を実行すると Electron アプリケーションの世界に入ることができるでしょう。",
"fail": "あなたのアプリは正しく動作していないようです。"
},
"installing": {
"success": "`electron` コマンドが、あなたの PATH に追加されました！",
"fail": "`electron` コマンドが、あなたの PATH に追加されていないようです。"
},
"save_pdf": {
"success": "完成したようですね！\n\nもっと Electron に関するアイデアを見たい方はこちらを確認してみてください: https://github.com/sindresorhus/awesome-electron\n他のワークショップを見たい方はこちらへ: http://nodeschool.io\n",
"fail": "何かがうまく行っていないようです。"
}
}
}
================================================
FILE: i18n/ko.json
================================================
{
"ee": {
"success": "성공!",
"fail": "실패!"
},
"exercise": {
"cat_annotation": {
"success": "성공적입니다.",
"fail": "뭔가 문제가 있습니다."
},
"cat_picture": {
"success": "현재 앱 폴더와 폴더 내의 파일들이 정상적입니다.",
"fail": "현재 앱 폴더는 뭔가가 부족합니다.",
"cant_read": "파일에 접근할 수 없습니다.",
"invalid_html": "html 파일에 문제가 있습니다.",
"missing_script_tag": "script 태그를 찾을 수 없습니다.",
"missing_body_tag": "body 태그를 찾을 수 없습니다.",
"script_not_in_body": "script 태그가 body 태그 내에 존재하지 않습니다."
},
"hello_world": {
"success": "앱이 정상입니다.\n\n`electron app.js`를 실행하면 Electron 세계로부터의 환영 메시지가 출력될 것입니다.",
"fail": "앱에 문제가 있습니다."
},
"installing": {
"success": "`electron` 명령어가 PATH에 추가되었습니다.",
"fail": "`electron` 명령어가 PATH에 추가되어있지 않습니다."
},
"save_pdf": {
"success": "잘하셨어요!\n\nElectron에 관해 더 알고 싶으신 분은 여길 참조하세요. https://github.com/sindresorhus/awesome-electron\n다른 워크숍에 관한 정보는 여길 참조하세요. http://nodeschool.io\n",
"fail": "앱에 문제가 있습니다."
}
}
}
================================================
FILE: index.js
================================================
#!/usr/bin/env node
var elementaryElectron = require('workshopper-adventure')({
appDir: __dirname,
languages: ['en', 'ja', 'ko']
})
elementaryElectron.addAll([
'Installing',
'Hello World',
'Cat Picture',
'Cat Annotation',
'Save PDF'
])
module.exports = elementaryElectron
================================================
FILE: lib/checkAll.js
================================================
var chalk = require('chalk')
module.exports = function (checks, success, error, cb) {
var messages = ['Checking Requirements:']
var total = checks.length
var ok = 0
messages.push('')
for (var i = 0; i < checks.length; i++) {
var check = checks[i]
ok += check(messages)
}
messages.push('')
if (ok === total) {
messages.push(chalk.green('{{ee.success}}') + '\n\n' + success)
} else {
messages.push(chalk.red('{{ee.fail}}') + '\n\n' + error)
}
messages.push('')
cb(null, ok === total, messages.join('\n'))
}
================================================
FILE: lib/fsCheck.js
================================================
var chalk = require('chalk')
var path = require('path')
var fs = require('fs')
module.exports = function appendFileCheck (file) {
return function (messages) {
try {
fs.statSync(path.join(process.cwd(), file))
} catch (err) {
messages.push(' - ' + chalk.red(file) + ' [?]')
return 0
}
messages.push(' - ' + chalk.green(file) + ' ✔')
return 1
}
}
================================================
FILE: lib/pkgDependencyCheck.js
================================================
var chalk = require('chalk')
var path = require('path')
module.exports = function appendDependencyCheck (pkgName) {
return function (messages) {
try {
var pkg = require(path.join(process.cwd(), 'package.json'))
} catch (e) {
messages.push(chalk.red(' - No package.json!!!'))
return 0
}
if (Object.keys(pkg.dependencies).indexOf(pkgName) === -1) {
messages.push(' - Dependency in package.json: ' + chalk.red(pkgName) + ' [?]')
return 0
}
messages.push(' - Dependency in package.json: ' + chalk.green(pkgName) + ' ✔')
return 1
}
}
================================================
FILE: package.json
================================================
{
"name": "elementary-electron",
"version": "1.5.2",
"description": "nodeschool workshop to learn electron",
"main": "index.js",
"bin": {
"elementary-electron": "bin/elementary-electron"
},
"scripts": {
"test": "standard"
},
"keywords": [
"nodeschool",
"workshopper",
"adventure",
"tutorial",
"electron"
],
"contributors": [
"Max Ogden (https://github.com/maxogden)",
"freeman-lab (https://github.com/freeman-lab)"
],
"author": "Max Ogden",
"license": "ISC",
"dependencies": {
"chalk": "^1.1.1",
"cheerio": "^0.20.0",
"which": "^1.2.4",
"workshopper-adventure": "^5.1.8"
},
"devDependencies": {
"standard": "^8.0.0"
},
"repository": {
"type": "git",
"url": "git+https://github.com/maxogden/elementary-electron.git"
},
"bugs": {
"url": "https://github.com/maxogden/elementary-electron/issues"
},
"homepage": "https://github.com/maxogden/elementary-electron#readme"
}
================================================
FILE: readme.md
================================================
# Elementary Electron
A nodeschool workshop that teaches electron.
Please open issues to propose new exercises if you have some cool ideas.
Run `npm install elementary-electron -g`, and then `elementary-electron` to start.
gitextract_k9f45znx/ ├── .gitignore ├── bin/ │ └── elementary-electron ├── exercises/ │ ├── cat_annotation/ │ │ ├── exercise.js │ │ ├── problem.en.md │ │ ├── problem.ja.md │ │ └── problem.ko.md │ ├── cat_picture/ │ │ ├── exercise.js │ │ ├── problem.en.md │ │ ├── problem.ja.md │ │ └── problem.ko.md │ ├── hello_world/ │ │ ├── exercise.js │ │ ├── problem.en.md │ │ ├── problem.ja.md │ │ └── problem.ko.md │ ├── installing/ │ │ ├── exercise.js │ │ ├── problem.en.md │ │ ├── problem.ja.md │ │ └── problem.ko.md │ └── save_pdf/ │ ├── exercise.js │ ├── problem.en.md │ ├── problem.ja.md │ └── problem.ko.md ├── i18n/ │ ├── en.json │ ├── ja.json │ └── ko.json ├── index.js ├── lib/ │ ├── checkAll.js │ ├── fsCheck.js │ └── pkgDependencyCheck.js ├── package.json └── readme.md
Condensed preview — 31 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (36K chars).
[
{
"path": ".gitignore",
"chars": 22,
"preview": ".DS_Store\nnode_modules"
},
{
"path": "bin/elementary-electron",
"chars": 75,
"preview": "#!/usr/bin/env node\n\nrequire('../index.js').execute(process.argv.slice(2))\n"
},
{
"path": "exercises/cat_annotation/exercise.js",
"chars": 583,
"preview": "var path = require('path')\nvar checkAll = require('../../lib/checkAll.js')\nvar fsCheck = require('../../lib/fsCheck.js')"
},
{
"path": "exercises/cat_annotation/problem.en.md",
"chars": 1357,
"preview": "# Cat Annotation\n\nNow we're going to add a feature: draw polygon regions on the image!\n\nThis could be useful for labelin"
},
{
"path": "exercises/cat_annotation/problem.ja.md",
"chars": 1036,
"preview": "# Cat Annotation\n\nここでは、さらに新しい機能を追加します！これから追加する新しい機能、それは「ポリゴンで指定した領域を描画する」です。\n\nこの機能は、地図で指定した範囲を描画したり、ラベリングをするのに役に立ちます。\n\n下"
},
{
"path": "exercises/cat_annotation/problem.ko.md",
"chars": 1018,
"preview": "# 고양이 사진과 다각형\n\n새로운 기능을 추가해 볼까요? 이미지 위에 다각형 영역을 그려 봅시다.\n\n이 기능은 어떤 물체에 표시할 때나, 지도 위에 일정 지역을 나타낼 때 유용합니다.\n\n`index.html` 파일의"
},
{
"path": "exercises/cat_picture/exercise.js",
"chars": 1955,
"preview": "var path = require('path')\nvar chalk = require('chalk')\nvar checkAll = require('../../lib/checkAll.js')\nvar cheerio = re"
},
{
"path": "exercises/cat_picture/problem.en.md",
"chars": 2413,
"preview": "# Cat Picture\n\nNow that we have a working skeleton structure we can add our first feature: render a cat picture.\n\nWe cou"
},
{
"path": "exercises/cat_picture/problem.ja.md",
"chars": 1626,
"preview": "# 猫の写真\n\nこれで作業をする土台が完成したので、新しい機能を実装することができます。\nこれから追加する新しい機能、それは「猫の写真を描画する」です。\n\nこの新しい機能を実装するのに、0からコードを書いても良いです。しかし、一般的なプログ"
},
{
"path": "exercises/cat_picture/problem.ko.md",
"chars": 1511,
"preview": "# 고양이 사진\n\n이제 새로운 기능들을 추가할 작업대가 만들어졌습니다. 그럼 첫 번째 기능을 추가해볼까요? 고양이 사진을 그려봅시다.\n\n기능을 추가하기 위해 아예 처음부터 만드는 방법도 있습니다만, 여타 다른 프로그"
},
{
"path": "exercises/hello_world/exercise.js",
"chars": 523,
"preview": "var path = require('path')\nvar checkAll = require('../../lib/checkAll.js')\nvar fsCheck = require('../../lib/fsCheck.js')"
},
{
"path": "exercises/hello_world/problem.en.md",
"chars": 961,
"preview": "# Hello World\n\nLet's set up a simple electron application.\n\nFirst, create a new empty folder and do the rest of these st"
},
{
"path": "exercises/hello_world/problem.ja.md",
"chars": 718,
"preview": "# ハローワールド\n\nシンプルな electron のアプリケーションを作ってみましょう。\n\n最初に、空のフォルダを作り、下記の手順を作ったフォルダの中で実施していきましょう。\n\nテキストエディタ（TextEdit, Notepadなど）を"
},
{
"path": "exercises/hello_world/problem.ko.md",
"chars": 702,
"preview": "# 헬로 월드\n\n간단한 electron 앱을 만들어 봅시다.\n\n먼저, 새로운 폴더를 만들고 그 폴더에서 앞으로의 작업을 진행해 주세요.\n\n텍스트 에디터(TextEdit, Notepad 등)를 사용해서 방금 만든 폴더"
},
{
"path": "exercises/installing/exercise.js",
"chars": 574,
"preview": "var path = require('path')\nvar which = require('which')\nvar chalk = require('chalk')\n\nmodule.exports = function () {\n v"
},
{
"path": "exercises/installing/problem.en.md",
"chars": 307,
"preview": "# Installing\n\nYou have to install `electron` into your command line environment.\n\nRun `npm install electron -g`\n\nIf you "
},
{
"path": "exercises/installing/problem.ja.md",
"chars": 253,
"preview": "# インストール\n\nまずは `electron` を、\nあなたのコマンドライン環境にインストールしてみましょう。\n\n`npm install electron -g` を実行してください。\n\nもし `EACCES` というエラーが表示された"
},
{
"path": "exercises/installing/problem.ko.md",
"chars": 241,
"preview": "# electron 설치\n\n먼저 `electron`을 커맨드 라인 환경에 설치해 봅시다.\n\n`npm install electron -g`를 실행해주세요.\n\n만약 `EACCES`라는 에러가 발생한다면 다음 가이드를 읽"
},
{
"path": "exercises/save_pdf/exercise.js",
"chars": 484,
"preview": "var path = require('path')\nvar checkAll = require('../../lib/checkAll.js')\nvar fsCheck = require('../../lib/fsCheck.js')"
},
{
"path": "exercises/save_pdf/problem.en.md",
"chars": 939,
"preview": "# Save PDF\n\nLet's make it so when you hit the `P` key it will save a PDF of your annotations.\n\nRequire a couple extra mo"
},
{
"path": "exercises/save_pdf/problem.ja.md",
"chars": 752,
"preview": "# Save PDF\n\n最後に、`P` キーを押したら描画したポリゴンを PDF に保存する機能を追加しましょう。\n\nいくつかのモジュールを `index.js` 内で読み込みます:\n\n```\nvar remote = require('e"
},
{
"path": "exercises/save_pdf/problem.ko.md",
"chars": 746,
"preview": "# PDF 저장\n\n`P` 키를 누르면 이제까지 그린 다각형을 PDF로 저장하는 기능을 만들어 봅시다.\n\n`index.js`에서 모듈 몇 개를 읽어 들이세요.\n\n```\nvar remote = require('elect"
},
{
"path": "i18n/en.json",
"chars": 1136,
"preview": "{\n \"ee\": {\n \"success\": \"SUCCESS!\",\n \"fail\": \"FAIL!\"\n },\n \"exercise\": {\n \"cat_annotation\": {\n \"success\":"
},
{
"path": "i18n/ja.json",
"chars": 1085,
"preview": "{\n \"ee\": {\n \"success\": \"成功！\",\n \"fail\": \"失敗！\"\n },\n \"exercise\": {\n \"cat_annotation\": {\n \"success\": \"正しく描画"
},
{
"path": "i18n/ko.json",
"chars": 1020,
"preview": "{\n \"ee\": {\n \"success\": \"성공!\",\n \"fail\": \"실패!\"\n },\n \"exercise\": {\n \"cat_annotation\": {\n \"success\": \"성공적입니"
},
{
"path": "index.js",
"chars": 289,
"preview": "#!/usr/bin/env node\n\nvar elementaryElectron = require('workshopper-adventure')({\n appDir: __dirname,\n languages: ['en'"
},
{
"path": "lib/checkAll.js",
"chars": 546,
"preview": "var chalk = require('chalk')\n\nmodule.exports = function (checks, success, error, cb) {\n var messages = ['Checking Requi"
},
{
"path": "lib/fsCheck.js",
"chars": 390,
"preview": "var chalk = require('chalk')\nvar path = require('path')\nvar fs = require('fs')\n\nmodule.exports = function appendFileChec"
},
{
"path": "lib/pkgDependencyCheck.js",
"chars": 595,
"preview": "var chalk = require('chalk')\nvar path = require('path')\n\nmodule.exports = function appendDependencyCheck (pkgName) {\n r"
},
{
"path": "package.json",
"chars": 980,
"preview": "{\n \"name\": \"elementary-electron\",\n \"version\": \"1.5.2\",\n \"description\": \"nodeschool workshop to learn electron\",\n \"ma"
},
{
"path": "readme.md",
"chars": 245,
"preview": "# Elementary Electron\n\nA nodeschool workshop that teaches electron.\n\nPlease open issues to propose new exercises if you "
}
]
About this extraction
This page contains the full source code of the maxogden/elementary-electron GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 31 files (24.5 KB), approximately 9.1k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.