2019년 5월 9일 목요일

[ python dash ] 1. 설치 및 예제 실행

2008년 회사 생활을 시작하면서 GUI를 개발해야 할 일이 있어 처음으로 사용한 것이 비쥬얼스튜디오에서 MFC 였다. 그리곤 2012년 즈음 C# .NET을 접하며 MFC는 바이바이~ 이 후 .NET으로 정말 수많은 프로젝트의 GUI를 만들었었다.

하지만 시간이 흘러 어느 날 알파고의 폭발적인 영향으로 머신러닝이 붐을 일으키며 프로그래밍 언어도 python 이라는 신세계 언어가 현재는 다 휘어잡고 있다. 요즘 젊은 친구들은 다 python 으로 코드를 개발하는데 GUI는 계속 .NET을 사용할 수는 없는 법.

순수 python 기반의 GUI 및 웹 어플리케이션 프레임워크 DASH에 관심을 가질 수 밖에 없었다. 아니... 남은 밥벌이를 위해 어쩔 수 없이 선택 할 수 밖에 없었다.(C# 안녕.. 그동안 너와 함께해서 너무 좋았었어..)

DASH에 대한 정보는 모두 https://dash.plot.ly/ 사이트에 있다. 나도 공부하며 정리하면서 이 글들을 써 내려가려 한다.

실습환경: Synology DS918+ Docker Jupyter Notebook ( https://euhyeji.blogspot.com/2019/05/synology-nas-docker-jupyter-notebook.html )

이번 글은 Dash Tutorial Part1. Installation( https://dash.plot.ly/installation )과 Part2. The Dash Layout ( https://dash.plot.ly/getting-started ) 의 첫번쨰 예제이다.

1. DASH 설치

터미널에서 아래 2가지 dash 라이브러리를 설치하자.

pip install dash==0.42.0 # The core dash backend pip install dash-daq==0.1.0 # DAQ components (newly open-sourced!)

이게 끝이다. python 좋다.

2. Layout

DASH 코드는 크게 두가지 부분으로 나뉜다. Layout 부분은 전체 디자인에 대한 부분이고, 사용자 입력을 받고 챠트를 reload 시키는 등의 인터렉션에 해당하는 것은 Callback 부분이다. Layout에 사용하는 라이브러리는 그래프, 버튼, 체크박스, 드롭박스 등의 컴포넌트에 해당하는 dash_core_components, 화면 배치 등을 위한 dash_html_components 두 가지다.

2-1. Hello Dash

아래 코드를 작성하고 실행시켜 보자.

# -*- coding: utf-8 -*-
import dash
import dash_core_components as dcc
import dash_html_components as html

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),

    dcc.Graph(
        id='example-graph',
        figure={
            'data': [
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
            ],
            'layout': {
                'title': 'Dash Data Visualization'
            }
        }
    )
])

if __name__ == '__main__':
    app.run_server(debug=True)
    #app.run_server(host='0.0.0.0') #Docker에서 실행 시 Host IP 그대로 사용하기 위함

아래 그림과 같은 메시지가 출력 된다.

그렇다. DASH는 다른 웹서버 필요없이 Flask 웹서버를 이용해 자신 스스로 웹 서비스를 가능하게 하고 있는 것이다. 파란색으로 적혀 있는 IP를 클릭하면 DASH가 실행되는 웹 페이지를 확인할 수 있다.

여기서, 일반 자신의 컴퓨터에서 실행했다면 아이피가 위와는 다르게 나올 것이고 클릭하면 정상적으로 잘 동작하는 것을 확인할 수 있을 것이다. 하지만 나와 같이 집에 설치되어 있는 Synology NAS에 Docker로 Ubuntu 기반 Jupyter, Python 을 사용하는 사람이라면 추가적으로 다른 설정을 해주어야 한다.