Dash untuk Pemula

Dash adalah kerangka kerja Python untuk membangun aplikasi web. Ini dibangun di atas Flask, Plotly.js, React, dan React Js. Dash memungkinkan Anda membuat dasbor menggunakan Python murni. Dash bersifat open source, dan aplikasinya berjalan di peramban web. Dalam tutorial ini, kami memperkenalkan pembaca pada dasar-dasar Dash dan mengasumsikan bahwa mereka sudah memiliki pengalaman dengan Plotly.

Instalasi Dash

Untuk mulai menggunakan Dash, kita harus memasang beberapa paket.

1. Backend inti dash.
2. Front-end Dash
3. Komponen HTML Dash
4. Komponen inti Dash
5. Plotly

pip install dash==0.21.1  
pip install dash-renderer==0.13.0  
pip install dash-html-components==0.11.0
pip install dash-core-components==0.23.0  
pip install plotly --upgrade

Tata Letak Aplikasi Dash

Sebuah aplikasi Dash biasanya terdiri dari dua bagian. Bagian pertama adalah tata letak yang menggambarkan tampilan aplikasi dan bagian kedua menggambarkan interaktivitas aplikasi. Dash menyediakan kelas HTML yang memungkinkan kita menghasilkan konten HTML dengan Python. Untuk menggunakan kelas-kelas ini, kita perlu mengimpor dash_core_components dan dash_html_components. Anda juga dapat membuat komponen kustom sendiri menggunakan Javascript dan React Js.

Untuk memulainya, kita akan membuat berkas bernama app.py menggunakan editor teks favorit kita lalu mengimpor paket-paket ini.

import dash
import dash_core_components as dcc
import dash_html_components as html
 

Sama seperti di Flask, kita menginisialisasi Dash dengan memanggil kelas Dash dari dash. Setelah itu kita dapat membuat tata letak untuk aplikasi kita. Kita menggunakan kelas Div dari dash_html_components untuk membuat HTML Div. Kemudian kita menggunakan komponen HTML untuk menghasilkan komponen HTML seperti H1, H2, dan seterusnya. dash_html_components memiliki semua tag HTML. Untuk membuat grafik pada tata letak, kita menggunakan kelas Graph dari dash_core_components. Graph merender visualisasi data interaktif menggunakan plotly.js. Kelas Graph mengharapkan sebuah objek figure dengan data yang akan diplot dan detail layout-nya. Dash juga memungkinkan Anda melakukan penataan gaya seperti mengubah warna latar belakang dan warna teks. Anda dapat mengubah latar belakang dengan menggunakan atribut style dan meneruskan sebuah objek dengan warna spesifik Anda. Dalam kasus kita, kita telah mendefinisikan kamus color dengan warna latar belakang dan teks yang kita inginkan. Demikian pula, kita dapat mengubah latar belakang layout menggunakan atribut plot_bgcolor.

Di HTML, properti style ditentukan menggunakan titik koma, tetapi di Dash, sebuah dictionary disuplai. Kunci dalam dictionary menggunakan camelCase misalnya text-align menjadi textAlign. Alih-alih menggunakan classes seperti di HTML, className digunakan di Dash.

 app = dash.Dash()
colors = {
    'background': '#111111',
    'text': '#7FDBFF'
}
app.layout = html.Div(style={'backgroundColor': colors['background']}, children=[
    html.H1(
        children='Hello Dash',
        style={
            'textAlign': 'center',
            'color': colors['text']
        }
    ),
    html.Div(children='Dash: A web application framework for Python.', style={
        'textAlign': 'center',
        'color': colors['text']
    }),
    dcc.Graph(
        id='Graph1',
        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': {
                'plot_bgcolor': colors['background'],
                'paper_bgcolor': colors['background'],
                'font': {
                    'color': colors['text']
                }
            }
        }
    )
])
 

Untuk melihat visualisasi kita, kita perlu menjalankan server web seperti di Flask. Ingat Dash dibangun di atas Flask. Kita juga mengatur debug ke true agar kita tidak perlu terus-menerus menyegarkan server setiap kali melakukan perubahan

 if __name__ == '__main__':
    app.run_server(debug=True)

Selanjutnya, buka terminal dan mulai server dengan mengetikkan kode berikut: python app.py

Ini akan memulai server web baru di http://127.0.0.1:8050/. Kunjungi alamat tersebut dan lihat dasbor baru Anda.

Membuat Scatter Plot

Untuk membuat scatter plot, kita mengimpor komponen dash seperti sebelumnya. Kita juga perlu mengimpor Plotly graph_objs untuk membuat scatter plot. Seperti disebutkan sebelumnya, kita menggunakan kelas Div dan komponen Graph dari Dash untuk menyelesaikan ini. Komponen Graph menerima objek figure yang memiliki data dan deskripsi layout. Kita membuat scatter plot menggunakan properti scatter dari graph_objs. Untuk memastikan plot adalah scatter plot kita meneruskan atribut mode dan menyetelnya sebagai markers. Jika tidak, grafik akan menampilkan garis.

 import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import plotly.graph_objs as go

app = dash.Dash()

df = pd.read_csv(
    'https://gist.githubusercontent.com/chriddyp/' +
    '5d1ea79569ed194d432e56108a04d188/raw/' +
    'a9f9e8076b837d541398e999dcbac2b2826a81f8/'+
    'gdp-life-exp-2007.csv')


app.layout = html.Div([
    dcc.Graph(
        id='life-exp-vs-gdp',
        figure={
            'data': [
                go.Scatter(
                    x=df[df['continent'] == i]['gdp per capita'],
                    y=df[df['continent'] == i]['life expectancy'],
                    text=df[df['continent'] == i]['country'],
                    mode='markers',
                    opacity=0.8,
                    marker={
                        'size': 15,
                        'line': {'width': 0.5, 'color': 'white'}
                    },
                    name=i
                ) for i in df.continent.unique()
            ],
            'layout': go.Layout(
                xaxis={'type': 'log', 'title': 'GDP Per Capita'},
                yaxis={'title': 'Life Expectancy'},
                margin={'l': 40, 'b': 40, 't': 10, 'r': 10},
                legend={'x': 0, 'y': 1},
                hovermode='closest'
            )
        }
    )
])

if __name__ == '__main__':
    app.run_server()
 

Markdown

Terkadang Anda mungkin perlu menyertakan banyak teks dalam dasbor. Anda dapat melakukannya menggunakan atribut Mardown dari dash_core_components seperti di bawah ini.

 import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()

markdown_text = '''
### Dash and Markdown
A lot of text
'''

app.layout = html.Div([
    dcc.Markdown(children=markdown_text)
])

if __name__ == '__main__':
    app.run_server()

Komponen Inti

Selanjutnya, mari lihat beberapa dash_core_components yang akan Anda temui saat menggunakan Dash. Anda dapat menghasilkan drop-down seperti di bawah ini. Anda melakukannya dengan memanggil Dropdown dari dash_core_components dan meneruskan options sebagai daftar dictionary. Anda dapat mengatur nilai default menggunakan atribut values dan meneruskan opsi default.

  dcc.Dropdown(
        options=[
            {'label': 'New York City', 'value': 'NYC'},
            {'label': u'Montréal', 'value': 'MTL'},
            {'label': 'San Francisco', 'value': 'SF'}
        ],
        value='MTL'
    )

Membuat drop-down multi-pilih mirip seperti di atas. Satu-satunya perubahan adalah Anda menetapkan atribut multi ke true karena default-nya False. Anda kemudian dapat menentukan item yang ingin dipilih ganda secara default dengan menentukan atribut values.

    html.Label('Multi-Select Dropdown'),
    dcc.Dropdown(
        options=[
            {'label': 'New York City', 'value': 'NYC'},
            {'label': u'Montréal', 'value': 'MTL'},
            {'label': 'San Francisco', 'value': 'SF'}
        ],
        value=['MTL', 'SF'],
        multi=True
    )

Tombol radio dapat dibuat menggunakan atribut RadioItems. Anda kemudian meneruskan options sebagai daftar dictionary. Anda juga dapat menetapkan nilai default dengan menentukan atribut values.

 html.Label('Radio Items'),
    dcc.RadioItems(
        options=[
            {'label': 'New York City', 'value': 'NYC'},
            {'label': u'Montréal', 'value': 'MTL'},
            {'label': 'San Francisco', 'value': 'SF'}
        ],
        value='MTL'
    )

Untuk membuat kotak centang, Anda memanggil atribut Checklist dari dash_core_components. Opsi dan nilai default diteruskan seperti di atas

  html.Label('Checkboxes'),
    dcc.Checklist(
        options=[
            {'label': 'New York City', 'value': 'NYC'},
            {'label': u'Montréal', 'value': 'MTL'},
            {'label': 'San Francisco', 'value': 'SF'}
        ],
        values=['MTL', 'SF']
    )

Anda hampir pasti memerlukan teks masukan dalam aplikasi Anda. Untuk membuatnya Anda akan menggunakan atribut Input. Dengan tag Html Label, Anda dapat membuat label untuk kolom Input. Dengan menggunakan atribut values Anda dapat menentukan beberapa teks di kolom tersebut dan untuk menentukan jenisnya gunakan type dan tentukan apakah itu kolom teks, angka, dll.

 html.Label('Text Box'),
    dcc.Input(value='MTL', type='text')

Memanggil bantuan

Karena komponen Dash bersifat deklaratif, memanggil perintah help pada salah satunya akan menghasilkan bantuan untuk komponen tersebut.

help(dcc.Input)

Interaktivitas

Sekarang mari bahas cara membuat aplikasi Dash kita interaktif. Untuk melakukan ini, kita perlu mengimpor Input dan Output dari dash.dependencies. Jangan bingung dengan HTML Input karena keduanya berbeda. HTML Input diimpor dari dash core components. Di bawah ini kita membuat input teks dan mengikatnya ke callback sehingga setiap kali Anda mengetik sesuatu ke kotak itu, my-div diperbarui secara real time. Untuk memungkinkan ini Dash menyediakan dekorator @app yang memungkinkan pengikatan fungsi callback ke my-div dan kolom input HTML. Perhatikan bahwa kita menggunakan dekorator sebelum mendeklarasikan fungsi update_output_div.

 import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash()

app.layout = html.Div([
    dcc.Input(id='my-id', value='Dash App', type='text'),
    html.Div(id='my-div')
])


@app.callback(
    Output(component_id='my-div', component_property='children'),
    [Input(component_id='my-id', component_property='value')]
)
def update_output_div(input_value):
    return 'You\'ve entered "{}"'.format(input_value)


if __name__ == '__main__':
    app.run_server()

Autentikasi

Dash menyediakan autentikasi melalui paket terpisah bernama dash-auth. Ini menyediakan dua mode autentikasi, yaitu HTTP Basic Auth dan Plotly OAuth. Pada Basic Auth, Anda meng-hardcode serangkaian nama pengguna dan kata sandi di aplikasi Anda. Metode ini memiliki beberapa tantangan seperti pengguna tidak dapat keluar dari aplikasi Anda, pengguna tidak dapat membuat akun atau mengubah kata sandi, dan Anda bertanggung jawab menyimpan nama pengguna dan kata sandi dengan aman dalam kode Anda. Plotly OAuth menyediakan autentikasi melalui akun Plotly online Anda, dan tidak gratis.

Untuk menyiapkan Basic Auth lanjutkan sebagai berikut. Pertama, pasang paket-paket yang diperlukan.

 pip install dash==0.21.1
pip install dash-auth==1.0.0

Setelah itu tetapkan pasangan nama pengguna dan kata sandi yang ingin Anda miliki di aplikasi Anda.

 VALID_USERNAME_PASSWORD_PAIRS = [
    ['hello', 'world']
]

Utilitas dash_auth.BasicAuth dari Dash akan menangani autentikasi untuk Anda setelah pasangan kata sandi ditetapkan. Yang perlu Anda lakukan hanyalah meneruskan pasangan kata sandi dan nama aplikasi Anda ke dash_auth.BasicAuth.

 app = dash.Dash('auth')
auth = dash_auth.BasicAuth(
    app,
    VALID_USERNAME_PASSWORD_PAIRS
)

Hosting Dasbor di Heroku

Menghosting dasbor Anda di Heroku cukup mudah namun memerlukan beberapa langkah.

Pertama, buat direktori yang akan menampung semua berkas proyek Anda. Anda dapat melakukannya di Ubuntu menggunakan perintah mkdir.

$ mkdir my_dash_app
$ cd my_dash_app

Selanjutnya, inisialisasi folder dengan git dan virtualenv. Git untuk kontrol versi, dan virtualenv memungkinkan kita membuat lingkungan virtual untuk menampung semua dependensi Python kita. Setelah membuat lingkungan, kita mengaktifkannya menggunakan perintah source.

$ git init
$ virtualenv venv
$ source venv/bin/activate

Berikutnya, kita memasang semua paket yang kita perlukan untuk aplikasi Dash kita:

$ pip install dash
$ pip install dash-renderer
$ pip install dash-core-components
$ pip install dash-html-components
$ pip install plotly

Untuk menyajikan aplikasi Dash kita, kita memerlukan server web Python. Kita tidak pernah menggunakan server pengembangan Flask di produksi. Kita menggunakan server web Gunicorn untuk fungsi ini. Pasang seperti di bawah ini:

$ pip install gunicorn

Selanjutnya, kita perlu membuat beberapa berkas di folder kita:

1. app.py tempat kita akan menulis kode aplikasi dash kita.
2. Sebuah .gitignore untuk memastikan berkas yang tidak perlu tidak didorong ke produksi
3. Sebuah berkas requirements.txt yang akan berisi semua dependensi Python dan versinya.
4. Sebuah Procfile untuk deployment.

Tambahkan yang berikut ini ke app.py. Ini hanya contoh sehingga Anda dapat menggunakan dasbor Dash Anda sendiri.

import os
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__)
server = app.server
app.layout = html.Div([
    html.H2('Hello World'),
    dcc.Dropdown(
        id='dropdown',
        options=[{'label': i, 'value': i} for i in ['LA', 'NYC', 'MTL']],
        value='LA'
    ),
    html.Div(id='display-value')
])
@app.callback(dash.dependencies.Output('display-value', 'children'),
              [dash.dependencies.Input('dropdown', 'value')])
def display_value(value):
    return 'You have selected "{}"'.format(value)
if __name__ == '__main__':
    app.run_server(debug=True)

Penting untuk kita ingat bahwa pada intinya aplikasi Dash juga merupakan aplikasi Flask. Untuk keperluan deployment, kita perlu mengakses instance aplikasi Flask. Dash memungkinkan kita melakukan ini menggunakan 

app.server

app = dash.Dash(__name__)
server = app.server

Tambahkan berkas-berkas yang tidak ingin Anda dorong ke produksi di berkas .gitignore. Berkas .gitignore Python yang baik tersedia di Github

Sekarang mari tentukan informasi deployment kita di Procfile. Kita menggunakan variabel web untuk menentukan server kita sebagai gunicorn. Kita juga menentukan detail aplikasi kita menggunakan variabel app. app merujuk pada nama berkas app.py dan server merujuk pada variabel server di dalam berkas tersebut.

web: gunicorn app:server

Kita juga perlu menuliskan dependensi Python kita ke berkas requirements. Heroku akan memasangnya selama deployment.

pip freeze > requirements.txt

Langkah selanjutnya mengasumsikan bahwa Anda memiliki akun Heroku dan telah memasang Heroku CLI. Jika belum, kunjungi https://www.heroku.com dan siapkan terlebih dahulu.

Langkah berikutnya adalah membuat aplikasi Heroku di terminal dan menambahkan semua paket aplikasi kita. Setelah Anda melakukan commit perubahan; dorong aplikasi Anda ke heroku master. Keluaran perintah ini akan berisi tautan ke aplikasi Dash Anda yang aktif di Heroku.

$ heroku create your-app-name
$ git add .
$ git commit -m 'Your-commit-message'
$ git push heroku master

Ini berfungsi sebagai pengantar untuk membangun dasbor dalam Python murni menggunakan Dash oleh Plotly. Untuk mempelajari lebih lanjut tentang Dash kunjungi docs resmi.

Jika Anda tertarik mempelajari lebih lanjut tentang python, lihat Tutorial Python untuk Pemula dan Intermediate Python for Data Science.