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

1. 따라하기 2편

 - https://angular.io/tutorial/toh-pt0

 - src/app 으로 이동한 상태에서의 내용입니다.


2. AppComponent 파일 수정

 1) app.component.ts

import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Tour of Heroes'; }


 2) app.component.html

<h1>{{title}}</h1> <app-heroes></app-heroes>


3. app전체에 적용할 css 적용

 1) src/style.css

/* Application-wide Styles */ h1 { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%; } h2, h3 { color: #444; font-family: Arial, Helvetica, sans-serif; font-weight: lighter; } body { margin: 2em; } body, input[text], button { color: #888; font-family: Cambria, Georgia; } /* everywhere else */ * { font-family: Arial, Helvetica, sans-serif; 

}


4. here component CLI로 생성

 1) 명령어

ng generate component heroes


 2) 확인


5. 컴포넌트 수정

 1) app/hero.ts 파일 추가

hero: Hero = { id: 1, name: 'Windstorm' 

};


 2) app/heroes/heroes.component.ts

import { Component, OnInit } from '@angular/core';

import { Hero } from '../hero'; @Component({ selector: 'app-heroes', /* the components CSS element selector */ templateUrl: './heroes.component.html', /* the location of the component's template file. */ styleUrls: ['./heroes.component.css'] /* the location of the component's private CSS styles. */ }) export class HeroesComponent implements OnInit { hero: Hero = { id: 1, name: 'Windstorm' };

constructor() { } ngOnInit() { }  

}


3) app/heroes/heroes.component.html

<!-- {{ hero.name | uppercase }} UppercasePipe -->

<h2>{{ hero.name }} Details</h2> <div><span>id: </span>{{hero.id}}</div> 

<div><span>name: </span>{{hero.name}}</div>


4) src/app/app.module.ts

  1. import { BrowserModule } from '@angular/platform-browser';
  2. import { NgModule } from '@angular/core';
  3. import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
  4.  
  5. import { AppComponent } from './app.component';
  6. import { HeroesComponent } from './heroes/heroes.component';
  7.  
  8. @NgModule({
  9. declarations: [
  10. AppComponent,
  11. HeroesComponent
  12. ],
  13. imports: [
  14. BrowserModule,
  15. FormsModule
  16. ],
  17. providers: [],
  18. bootstrap: [AppComponent]
  19. })
  20. export class AppModule { }




6. 확인

7. 이어서는...

 - 이후 내용은 하나씩 따라하다보니 입력을 못함.

 - 크게 어려운건 없어보임.

해당 블로깅은 Angular Tutorial을 따라하면서 작성한 내용입니다.


https://angular.io/guide/quickstart


1. Angular 설치하기

npm install -g @angular/cli


2. 새로운 어플리케이션 만들기

ng new angular-tour-of-heroes

 - 여기서 ng new는 "새로운 프로젝트를 '현재 디렉토리'에 프로젝트명으로 디렉토리를 만들어준다." 

 - 생성하면 아래와 같은 구조로 내용이 생성될 것이다.


3. 어플리케이션 시작하기

cd angular-tour-of-heroes 

ng serve -open

 - 여기서 ng serve 는 어플리케이션을 빌드하고, 개발서버를 시작한다. 또한 소스파일이 변경될 때 어플리케이션을 알아서 자동시작해준다. '--open 옵션은 브라우저를 켜주는 옵션이다.'


4. 확인

 - 위 명령어로 실행시킬 경우 'http://localhost:4200/' 로 알아서 브라우저가 열리고, 아래처럼 내용이 나올 것이다.




5. 구성요소 확인 및 기본 내용 수정해보기

 1) src/app 으로 이동

cd src/app


 2) 편집

vi ./app.component.ts


3) 제목 수정

export class AppComponent { title = 'My First Angular App'; }


4) 확인


5) Css 수정

h1 { color: #369; font-family: Arial, Helvetica, sans-serif; font-size: 250%; 

}


6) 확인



+ Recent posts