본문 바로가기

프로그래밍/개인프로젝트

[AppStore Viewer] 1. 세팅하기.


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 (무료아이콘)

'프로그래밍 > 개인프로젝트' 카테고리의 다른 글

[AppStore Viewer] 1. 세팅하기.  (0) 2018.04.17
[Github] Github 페이지 활용하기.  (0) 2017.02.06
텔레그램 봇 활용하기 -1  (0) 2016.08.23