리눅스 Trello 제작기 (feat. Electron.JS )

윈도에서 리눅스로 옮겨온지 꽤 되었다..

근데 윈도우에서 잘쓰던 Trello가 윈도우 맥버전은 정상적으로 지원을 하지만... 

리눅스 버전은 지원을 하지 않길래 직접 만들기로 했다

 

모든 설명은 노드 및 npm 이 설치되어있다는 가정하에 이루어지겠다

 

1. 일렉트론 설치

npm install -g electron

정말 별거 없다 ㅋㅋ

 

2. 일렉트론 프로젝트 만들기

작업폴더를 만들고 npm init 을 해주면 된다.. 그리고 인터랙티브 창이 나오면 프로젝트에 맞게 알아서 써주자..

{
  "name": "trello-linux-port",
  "version": "1.0.0",
  "description": "trello-linux-port",
  "main": "trello.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "noob",
  "license": "WTFPL"
}

나같은 경우엔 대충 이렇게 package.json 이 만들어지도록 했다

 

프로젝트 구성은 아래와 같다..

ㅡ /trello-linux-port

    ㄴ/ico

        ㄴtrello.png

    ㄴpackage.json

    ㄴtrello.js

 

뭐 대충 이런식으로 구성을 하도록 했다

trello.png는 https://trello.com/about/logo 에서 받을 수 있다

 

3. 코드 작성

'use strict'
const {app, Menu, Tray, BrowserWindow, globalShortcut} = require('electron')

let win
let tray = null
let menu = null
let close = false
let hideMode = true

const iconPath = __dirname + '/ico/trello.png'
const lock = app.requestSingleInstanceLock()

app.on('ready',()=>{
    // 싱글 인스턴스
    if (!lock)
        app.quit()

    // 윈도우 만들기
    win = new BrowserWindow({width : 850, height : 525, show : false, icon : iconPath})
    win.loadURL("https://trello.com")
    win.setMenuBarVisibility(false)
    win.setMinimumSize(635,230)
    win.once('ready-to-show',()=>win.show())
    win.on('close',e=>{
        if (hideMode && !close){
            e.preventDefault()
            win.hide()
        }
    })

    //트레이 아이콘 만들기
    tray = new Tray(iconPath)
    menu = Menu.buildFromTemplate([
        {
            label : 'Exit App\tCtrl+Q', 
            click(){
                close = true
                app.quit()
            }
        },
        {
            label : 'Hide on Closed',
            type : 'checkbox',
            checked : true,
            click(){
                hideMode = menu.items[1].checked
                tray.setContextMenu(menu)
            }
        }
    ])
    tray.setContextMenu(menu)
    tray.on('click',e=>{
        win.show()
    })

    //핫키 설정
    globalShortcut.register('CommandOrControl+Q',()=>{
        if (win.isFocused() && win.isVisible()){
            close = true
            app.quit()
        }
    })
})

//두번째 창이 켜진다면 첫번째 창을 띄우기
app.on('second-instance',()=>{
    if (win.isMinimized())
        win.restore()
    if (!win.isVisible())
        win.show()
    win.focus()
})

공식문서 보면서 끄적 끄적 코드를 썼다 https://www.electronjs.org/docs

주의할점을 굳이 따지자면.. 리눅스에선 콘텍스트 메뉴의 체크박스 갱신이 다른 os 처럼 자동으로 되지 않아서;;

클릭때마다 setContextMenu() 를 호출해줘야한다는점... 이 되겠다

 4. 빌드

npm install -g electron-builder 로 electron-builder 를 설치하자

그리고 프로젝트 폴더에가서 electron-builder . 하면 !!!!

 

에러가 뜬다!! 캬컄

 

Cannot compute electron version from installed node modules

 

뭐 대충 이런 에러인데

해결방법은 간단하다

electron -v 를 치면 버전이 나오는데 (나같은 경우는 v9.0.0)

프로젝트 폴더로 가서

electron-builder -c.electronVersion=자기버전 . 을 치면 빌드가 된다

나같은 경우는 electron-builder -c.electronVersion=9.0.0 . 이런식으로 쳤다

처음 빌드라면 꽤 오래 걸린다..

 

어쨋거나 그렇게 하면 빌드 프로젝트 폴더내 dist 폴더가 생긴다!! 그 안에 어쩌고저쩌고.appimage 던가하는 파일로 실행 파일이 있다!!

 

5. 런처 만들기

 

/usr/share/applications 에 다음과 같은 내용으로 런처를 만들어준다

[Desktop Entry]
Version=1.0
Type=Application
Name=Trello
Comment=
Exec=./트렐로실행파일(어쩌고저쩌고앱이미지)
Icon=
Path=트렐로폴더경로(dist폴더.. 이름을 바꿨다면 바꾼 이름으로!!)
Terminal=false
StartupNotify=false

그럼 끝!!