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. Github Page 란? 

 - HTML, Css, Javascript 등으로 이루어진 Static 호스팅 서비스

 - <username>.github.io로 URL 접속 가능

 - custom domain 사용 할 수 있음.

 - git만 사용할 줄 안다면, 편리하게 사용 가능.


2. Github Page 만들기

 - Github에 <username>.github.io Repository를 만들고 해당 Repository에 index.html을 만들면 끝!

 1) Github에 가입을 한다.

 2) <username>.github.io Repository를 만든다.

 


 3) <username>.github.io Repository에 index.html을 추가해 놓는다.

 4) http://<username>.github.io/ URL을 입력하여, 접속한다.


3. Domain 설정 하기

 - DNS에서 test.xxxx.xx를 CNAME 설정에 <username>.github.io 를 추가한다.

 - test.xxxx.xx을 호출한다. 잘된다. 끝!

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

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

1. telegram bot

 - 2015년 6월 24일 텔레그램 봇 api 공식 발표

 - 기존에는 telegram-cli를 활용한 봇이 많았음

 - 어떤 차이점이 있을까?

 구분

telegram-cli 

telegram-bot 

 지원

오픈소스커뮤니티(비공식) 

텔레그램(공식)

 통신 API

텔레그램 API 

bot API 

 계정

실제 유저 계정 

Bot 계정 

 UI

메시지

메시지, 커스텀 키보드 

 

 


2. Bot 만들기

 - https://telegram.me/botfather 주소로 접속해서 @BotFather 사용자를 추가함

 - 대화창에 들어가면 아래와 같이 화면이 활성화 됨.

 

 * /help를 통해 사용가능한 명령어를 확인할 수 있음.

 - /newbot 메시지를 보내서 봇을 등록할 수 있음.(봇 이름, 봇 아이디 순으로 등록한다. 봇 이름은 한글도 사용가능함)

 - 등록을 하면 봇 api 사용에 필요한 token을 보내줌. (꼭 필요한 값이므로 저장해 놓는 것이 좋다.)

 

3-1. node.js

 -npm 설치 

npm install node-telegram-bot 


- source code

/**

 * Created by geunspage on 2015-10-05.

 */

var Bot = require('node-telegram-bot');

var bot = new Bot({

    token: 'your_bot_token'

}).on('message', function (message) {

        if(message.text == '/test'){

            bot.sendMessage({

                chat_id: message.chat.id,

                text: 'geuns Test : ' + message.text

            });

        }else if(message.text == 'Hello'){

            bot.sendMessage({

                chat_id: message.chat.id,

                text: message.text +' World geuns Telegram Bot'

            });

 

        }else if(message.text == 'time'){

            bot.sendMessage({

                chat_id: message.chat.id,

                text: 'cur '+new Date()

            });

 

        }

        console.log(message);

    })

    .start(); 



4. 실행 화면

 

5. 기타

 - 서버 모니터링 등 여러 분야에서 활용 가능할 것 같음.

 - 생각보다 샘플들이 많아서 본인 입맛에 맞춰서 수정 가능할 듯.

 - 

 

6. 참고 URL

 - https://core.telegram.org/bots/api

 - http://bakyeono.net/post/2015-08-24-using-telegram-bot-api.html

 - https://github.com/depoio/node-telegram-bot




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

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

+ Recent posts