[BitBar] 오픈소스 플러그인 내맘대로 만들어보기 (Mac OS 메뉴바 플러그인)

안녕하세요! Jay 입니다. 오늘은 평소에 사용하고 있던  BitBar라는 오픈소스의 플러그인을 만들어 보겠습니다!

1. What is BitBar?

---

BitBar는 Mac OS의 상단에 있는 메뉴바에 어떤 상태등을 쉽게 표시할 수 있도록 해주는 오픈소스 프로그램입니다.

 

Mac 화면 상단에 있는 메뉴바

그리고 이 BitBar와 함께 다양한 플러그인으로 여러 가지 상태를 표시할 수 있습니다. BitBar 홈페이지에 가보면 많은 개발자들이 편리하고 재밌는(?) 플러그인 들을 만들어 놓았습니다.

BitBar 왼쪽에 있는 다양한 카테고리의 플러그인들

https://getbitbar.com/

BitBar - Put anything in your Mac OS X menu bar

물론 이 플러그인들도 깃허브에 오픈소스로 올라와 있습니다.
그리고 BitBar가 개인적으로 편하고 좋은 게 이런 플러그인들을 쉽게 만들어서 사용할 수 있다는 것입니다.

또한 Ruby, Python2, Python3, JavaScript, CoffeeScript, Swift, Go, Lisp, Perl5, PHP 등을 지원해서 본인이 사용하는 언어로 플러그인을 만들 수 있습니다.

2. BitBar 설치

---

BitBar 홈페이지에 Get BitBar라는 버튼을 클릭하면 BitBar 깃허브로 이동하게 되는데 BitBar-v1.9.2.zip 를  다운로드하여 설치하시면 됩니다.

BitBar 설치 후 메뉴바

BitBar를 설치하게 되면 메뉴바에 BitBar라고 나오는데, 아직 어떤 플러그인도 없기 때문에 그렇습니다.

이제 플러그인을 설치해서 어떻게 나오는지 한 번 확인해보겠습니다.

 

한해가 몇퍼센트나 지났는지 알려주는 플러그인

저는 위 플러그인을 한번 설치해 보겠습니다. Add to BitBar 버튼을 클릭합니다.

 

이렇게 BitBar를 열어 플러그인을 자동을 설치합니다. 

 

플러그인이 설치된 메뉴바

오! 2020년이 45%나 지나갔네요! 이 외에도 다양하 게 사용할 수 있는 플러그인이 많은 것 같습니다.

3. BitBar 플러그인 살펴보기

---

자, 이번에는 BitBar 플러그인을 만들어 보겠습니다. BitBar 플러그인 만들어보는 게 좋다고 생각하는 게, 만들기도 그리 어렵지 않고, 오픈소스로 배포해서 다른 사람들도 플러그인을 공유할 수 있다는 점입니다.

플러그인을 만들기 전, 위에서 설치했던 Process Bar of Year 이 어떻게 작성되어 있는지 확인해 보겠습니다.

 

Bitbar Preferences

Preferences에서 Open Plugin Folder를 클릭하면, 플러그인이 설치된 폴더를 확인할 수 있습니다.

 

설치된 플럭그인

ProcessBarOfYear 플러그인이 정말 있네요! Bash로 작성된 플러그인 인가 봅니다.

 

쉘 스크립트로 작성된 플러그인

#는 주석이고 가장 상단에 어떤 환경으로 실행하지를 선언해 주는 것 같습니다.

ProcessBarOfYear 에서는 bash로 실행하네요.

 

코드를 간단하게 살펴보면 get_total_days_of_year은 1년 일수를 반환해 주는 것 같은데 윤년 때문에 그런 것 같네요.

무튼, 1년 일수를 반환 후, 현재 date에 나눠서 %로 출력을 하네요.

ex) (166 X 100) / 365 = 45%

실제로 아까 플러그인 이미지를 보면, 출력하는 내용과 코드가 동일한 걸 볼 수 있습니다.
BitBar는 printf, echo 등 이렇게 출력되는 내용을 메뉴바에 표시해 줍니다.

간단하게 테스트해볼까요?

#!/usr/bin/env bash
 
echo "Jay Test"

Jay Test 라고 메뉴바에 출력해보겠습니다. BitBar Preferences에서 Refresh all을 클릭하면,

 

이렇게 내가 만든 플러그인을 메뉴바에 표시할 수 있습니다!! 참 쉽죠잉?

 

4. 나만의 BitBar 플러그인 만들기 

---

삼성생명 광고 라떼 짤

무엇을 만들어 볼까 고민하다가 재미로 한번 팀원들의 커밋을 감시하는 꼰대(?) 같은 플러그인👿을 한번 만들어 보자고 생각했습니다. 

(사실 팀원이 아니더라도 내가 지켜보고 싶은 사람이 커밋을 했는지 안 했는지 확인? 해보고 싶은 그런 플러그인?!ㅋㅋㅋ)

#!/usr/bin/env LC_ALL=en_US.UTF-8 /usr/local/bin/python3
 
# <bitbar.title>CommitObserver</bitbar.title>
# <bitbar.version>v1.0</bitbar.version>
# <bitbar.author>Fitware Jay</bitbar.author>
# <bitbar.author.github>JAY-Chan9yu</bitbar.author.github>
# <bitbar.image></bitbar.image>
# <bitbar.desc>If you want to monitor whether your teammates are committing or not, try this plugin.(joke)</bitbar.desc>
# <bitbar.dependencies>python3</bitbar.dependencies>
# <bitbar.abouturl>https://github.com/JAY-Chan9yu/BitBar-CommitObserver</bitbar.abouturl>
 
import datetime
import os
 
import requests
import yaml
from bs4 import BeautifulSoup
 
GOOD = "💚"
BAD = "🚨"
EMOJI_LIST = ['🐶', '🐱', '🐭', '🐹', '🐻', '🐰', '🐼', '🐨', '🐯', '🦁', '🐮', '🐷', '🐸', '🐵']
DIR_PATH = os.path.join(
    os.path.dirname(os.path.realpath(__file__)),
    'commit_observer',
    'github_user_list.yml'
)
 
print("😈 COMMIT OBSERVER")
with open(DIR_PATH, 'r', encoding='utf-8') as f:
    user_yaml = yaml.load(f, Loader=yaml.FullLoader)
    temp_emoji_list = EMOJI_LIST
    user_dict = user_yaml.get('githubID')
 
for user in user_dict:
    try:
        emoji = temp_emoji_list.pop()
    except IndexError:
        temp_emoji_list = EMOJI_LIST
        emoji = temp_emoji_list.pop()
 
    # If you don't use {to} in the url parameter, you can't see today's commit for local time due to utc time
    today = datetime.datetime.today().strftime('%Y-%m-%d')
    source = requests.get('https://github.com/{}?to={}'.format(
        user.get('id'),
        today
    )).text
    soup = BeautifulSoup(source, "html.parser")
 
    if soup.select('rect'):
        user_commit = soup.find(
            "rect",
            attrs={"data-date": today}
        ).get('data-count')
 
        if int(user_commit) == 0:
            print("{} {} : {}".format(emoji, user.get('name'), BAD))
        else:
            print("{} {} : {}".format(emoji, user.get('name'), GOOD))
 

저는 이렇게 만들어 봤습니다! 이름하여 👿CommitObserver(커밋 관찰자?) 입니다! ㅋㅋㅋㅋ 

위에서부터 차례로 간단히 설명드리자면 첫 줄에는 python3 경로와 인코딩 설정을 해줬습니다.

 

* 현재 설정되어있는 python 경로 확인은 python shell에서 아래와 같이 확인할 수 있습니다.

(pyenv 같은 걸로 관리할 시 usr/local/bin 이 아닐 수 있습니다)

>>> import os
>>> import sys
>>> sys.executable

사실 인코딩은 환경변수에 추가해서 사용하면 되는데, 처음에 문서를 안 보고 하다가 구글링 하면서 찾은 방법입니다. (문서를 잘 읽읍시다;;)

 

공식 문서에 나와있는 인코딩 설정 내용

무튼, 이렇게 해주면 환경변수로 등록 안 해도 UTF-8 인코딩 사용할 수 있습니다. 그다음에 <bitbar> 이렇게 태그로 되어있는 건 메타데이터 들인데 BitBar에서 이 메타데이터를 수집해서 홈페이지에 노출하거나 하는 것 같습니다! (정확히는 모르겠네요)

 

메타데이터 설명

이제 메인 코드를 보면, github_user_list.yml 파일에서 github ID, name을 가져와 BeautifulSoup를 사용해 오늘 커밋한 게 한 개라도 있는지 확인 후 이모지를 출력합니다. 커밋이 있으면 💚, 없으면 🚨

* 참고로 rect가 깃헙 잔디인데 -1이 가장 마지막 리스트입니다 (가장 최근 잔디)

 

# Commit Observer Github ID List
 
# please insert your team member's name into username
# and insert github ID into github_id
githubID: 
  - name: Jay
    id: Jay-Chan9yu

yml 파일은 위와 같습니다. user를 더 추가하려면 저 형식에 맞게 추가해주면 돼요!

추가로 플러그인의 이름은 CommitObserver.30m.py 인데, 파일 이름과 확장자 사이는 Refresh time입니다. 

 

공식문서에 나와있는 refresh time 설명

근데 문서에는 Default Refresh Time이 안 나와 있더라고요;;

 

그래서 README.md PR 했습니다! 제발 merge되라!! 나도 오픈소스 컨트리뷰터가 되고 싶다~~~!!

 

레포지토리에서 refresh 로 검색하니까 나오더라고요 ㅎㅎ 저 시간을 안 적으면 1분이 default입니다.

 

Plugin.m 파일에 선언되어 있는 default refresh time

자, 이제 Refresh all 을 눌러서 확인해 보도록 하겠습니다!!

 

오오오오!!!ㅋㅋㅋㅋ

토이 프로젝트를 진행하는 친구들의 깃헙 아이디를 추가했는데, Fernando..커밋을 했군... 훌륭해!! ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

이렇게 간단하게 커밋을 감시하는 BitBar 플러그인을 만들었습니다. 

커밋을 감시하고 싶은 사람이 있다면 한번 설치를...흐흐흐😈

 

정말 별거 아니지만 나도 오픈소스 플러그인을 만들었다!!!

https://github.com/JAY-Chan9yu/BitBar-CommitObserver

JAY-Chan9yu/BitBar-CommitObserver

 

5. 마치며

---

BitBar는 정말 재밌는 오픈소스인 것 같습니다!ㅋㅋ 다른 개발자들이 만들어 놓은 플러그인 한 번 사용해보세요!

간단하고 재밌는 것도 있고, 카테고리 살펴보면 유용한 게 많을 거예요!
그리고 본인이 메뉴바에서 보고 싶은 것 들은 쉽게 플러그인으로 만들어서 사용할 수 도 있고 오픈소스 플러그인으로 공유도 할 수 있기 때문에 한 번쯤 만들어 보는 것도 좋은 경험이 될 것 같습니다!

 

오늘 시간이 남으신다면 나만의 메뉴바 플러그인 한번 만들어 보는 게 어떠세요?! ㅋㅋㅋ

오늘 하루도 즐거운 시간 보내시고 즐거운 코딩 하세요~🧑‍💻👋