ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • [BitBar] 오픈소스 플러그인 내맘대로 만들어보기 (Mac OS 메뉴바 플러그인)
    💻 프로그래밍/Python 2020. 6. 14. 05:32

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


    1. What is BitBar?


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

     

    Mac 화면 상단에 있는 메뉴바

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

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

    https://getbitbar.com/

     

    BitBar - Put anything in your Mac OS X menu bar

    BitBar: the free app that lets you put the anything into your Mac OS X menu bar. Browse from a wide range of plugins, or easily write your own (using any language you like).

    getbitbar.com

    물론 이 플러그인들도 깃허브에 오픈소스로 올라와 있습니다.
    그리고 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%

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

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

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

    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))
     
    cs

    저는 이렇게 만들어 봤습니다! 이름하여 👿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
    cs

     

    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

    A plugin for BitBar provides whether team members have committed or not. - JAY-Chan9yu/BitBar-CommitObserver

    github.com

     

    5. 마치며


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

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

     

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

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

    댓글 0

운동하는 개발자 JAY-JI