1. AppStore Viewer는?
1) "대한민국" AppStore 내에 있는 "iOS"어플 들 랭킹을 보여주고. 해당 어플의 "댓글"들을 볼수 있는 어플을 만들 예정.
2) Windows, MAC, Linux 에서 사용할 수 있도록 "Cross-Platform" 데스크톱 앱을 만들 예정.
2. Stack 소개
1) Electron
- Node.js 기반으로 작성된 데스크탑 어플리케이션
- HTML, CSS, Javascript로 데스크톱 어플을 쉽게 만들 수 있게 해주는 Framework
- Atom Editor를 개발하기 위하여 시작된 프로젝트이고 Atom Shell이라는 이름으로 시작되었다 Electron으로 변경됨.
- 웹으로 만들어진 서비스가 있다면 손쉽게 데스크톱 어플로 기존 소스를 재활용하여 개발하기 쉬움.
2) Angular, Typescript, Bootsrap
- 구글 검색하면 나오는 그거~
3. 사용할 API
1) Appstore Rss
- https://rss.itunes.apple.com/ko-kr
- https://itunes.apple.com/us/rss/customerreviews/id={앱아이디}/json
4. 환경 세팅하기.
0) Intellij javascript 세팅 변경
1) Angular-CLI 설치하기
- Angular의 components, pipes, services 등을 효율적으로 생성해주는 Tool 입니다.
npm install -g @angular/cli
2) Angular2 프로젝트 생성
ng new appstore-viewer
3) Electron 관련 폴더 및 파일 생성(https://electronjs.org/docs/tutorial/quick-start 참고)
cd appstore-viewer && mkdir electron
- 아래와 같이 파일 2개를 만든다.
- 프로젝트는 아래와 같은 구조가 될 것이다.
(1) electron/package.json
{
"name": "appstore-viewer",
"version" : "0.1.0",
"main" : "electron.js"
}
(2) electron/electron.js
// appstore-viewer/electron/electron.js
const {app, BrowserWindow} = require('electron')
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win
function createWindow() {
// Create the browser window.
win = new BrowserWindow({
width: 800,
height: 600,
backgroundColor: '#ffffff',
icon: `file://${__dirname}/dist/assets/logo.png`
})
// and load the index.html of the app.
win.loadURL(`file://${__dirname}/index.html`)
// Open the DevTools.
win.webContents.openDevTools()
// Emitted when the window is closed.
win.on('closed', () => {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
win = null
})
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (win === null) {
createWindow()
}
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
(3) src/index.html
- 자연스러운 실행을 위하여 base href="/"를 base href="./"로 변경한다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>AppstoreViewer</title>
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>데이터를 가져오는 중 입니다.</app-root>
</body>
</html>
(4) package.json에 electron 추가하기
- electron-prebuilt 을 추가함
- 컴파일된 Electron 바이너리 npm(Electron을 받아도 되지만, 그렇게되면 매번 바이너리를 다운받아야하므로, 공식문서에서는 해당 npm을 권장하고있음.)
"electron-prebuilt": "^1.4.13"
(5) 명령어 추가
"scripts": { "start": "ng build --watch", "build": "ng build --prod",
"electron": "cp electron/* dist/ && ./node_modules/.bin/electron dist/"
},
5. 실행하기
- 다운로드
npm install --save-dev
- console창 두개로 명령어를 실행시켜주세요.
npm run start
npm run electron
6. 확인
7. 에러처리
1) Cannot find module '@angular-devkit/core'
module.js:471
throw err;
^
Error: Cannot find module '@angular-devkit/core'
at Function.Module._resolveFilename (module.js:469:15)
at Function.Module._load (module.js:417:25)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/Users/hyeonggeunkim/akageun/electron/appstore-viewer/node_modules/@angular-devkit/schematics/src/tree/virtual.js:10:16)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
- "@angular/cli": "1.6.4" -> "@angular/cli": "1.6.5" 로 변경
- https://github.com/angular/angular-cli/issues/9307
8. 참고 페이지
- http://www.blog.bdauria.com/?p=806
- https://github.com/RobWin/angular2-electron-demo/blob/master/package.json
- https://angularfirebase.com/lessons/desktop-apps-with-electron-and-angular/
- https://msp-typescript.gitbooks.io/typescript-angular2-electron/content/chapter1.html
- https://github.com/MSP-typescript/AngularCLI-Electron-Boilerplate
- https://www.flaticon.com/free-icon/library_100153 (무료아이콘)
'프로그래밍 > 개인프로젝트' 카테고리의 다른 글
| [Github] Github 페이지 활용하기. (0) | 2017.02.06 |
|---|---|
| 텔레그램 봇 활용하기 -1 (0) | 2016.08.23 |
