Yeni Başlayanlar için Dash

Dash, web uygulamaları geliştirmek için bir Python çatısıdır. Flask, Plotly.js, React ve React Js üzerine inşa edilmiştir. Saf Python kullanarak panolar oluşturmanızı sağlar. Dash açık kaynaklıdır ve uygulamaları web tarayıcısında çalışır. Bu eğitimde, okuyucuyu Dash’in temelleriyle tanıştırıyoruz ve Plotly konusunda ön bilgiye sahip olunduğunu varsayıyoruz.

Dash Kurulumu

Dash’i kullanmaya başlamak için birkaç paket kurmamız gerekir.

1. Çekirdek dash arka ucu.
2. Dash ön yüz
3. Dash HTML bileşenleri
4. Dash çekirdek bileşenleri
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

Dash Uygulama Düzeni

Bir Dash uygulaması genellikle iki bölümden oluşur. İlk bölüm düzeni ifade eder ve uygulamanın nasıl görüneceğini tanımlar; ikinci bölüm ise uygulamanın etkileşimini açıklar. Dash, Python ile HTML içerik üretmemizi sağlayan HTML sınıfları sunar. Bu sınıfları kullanmak için dash_core_components ve dash_html_components modüllerini içe aktarmamız gerekir. Ayrıca Javascript ve React Js kullanarak kendi özel bileşenlerinizi de oluşturabilirsiniz.

Başlamak için en sevdiğiniz metin düzenleyiciyi kullanarak app.py adlı bir dosya oluşturup bu paketleri içe aktaralım.

import dash
import dash_core_components as dcc
import dash_html_components as html
 

Flask’te olduğu gibi, Dash’i dash’in Dash sınıfını çağırarak başlatırız. Bunu yaptıktan sonra uygulamamız için düzeni oluşturabiliriz. Bir HTML Div oluşturmak için dash_html_components içindeki Div sınıfını kullanırız. Ardından H1, H2 vb. gibi HTML bileşenlerini üretmek için HTML bileşenlerini kullanırız. dash_html_components tüm HTML etiketlerine sahiptir. Düzenimizde bir grafik oluşturmak için dash_core_components içindeki Graph sınıfını kullanırız. Graph, plotly.js kullanarak etkileşimli veri görselleştirmeleri üretir. Graph sınıfı, çizilecek data ve layout ayrıntılarını içeren bir figure nesnesi bekler. Dash ayrıca arka plan rengi ve metin rengi gibi stillendirmeler yapmanıza da olanak tanır. Arka planı style özniteliğini kullanarak ve istediğiniz rengi içeren bir nesne geçirerek değiştirebilirsiniz. Bizim örneğimizde, istediğimiz arka plan ve metin rengini içeren bir color sözlüğü tanımladık. Benzer şekilde, düzenin arka planını plot_bgcolor özniteliğiyle değiştirebiliriz.

HTML’de style özelliği noktalı virgülle belirtilirken, Dash’te bir sözlük verilir. Sözlükteki anahtarlar camelCase biçimindedir; örneğin text-align yerine textAlign. HTML’de sınıflar kullanmak yerine Dash’te className kullanılır.

 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']
                }
            }
        }
    )
])
 

Görselleştirmemizi görüntülemek için, tıpkı Flask’te olduğu gibi web sunucumuzu çalıştırmamız gerekir. Unutmayın, Dash Flask üzerine kuruludur. Ayrıca, her değişiklik yaptığımızda sunucuyu yenilemek zorunda kalmamak için debug’ı true olarak ayarlıyoruz.

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

Sonraki adımda terminale geçin ve aşağıdaki komutu yazarak sunucuyu başlatın: python app.py

Bu, http://127.0.0.1:8050/ adresinde yeni bir web sunucusu başlatacaktır. Oraya gidin ve yeni oluşturduğunuz panoyu görün.

Saçılım Grafikleri Oluşturma

Bir saçılım grafiği çizmek için daha önce yaptığımız gibi standart dash bileşenlerini içe aktarırız. Ayrıca saçılım grafiğini çizmek için Plotly’nin graph_objs modülünü de içe aktarmamız gerekir. Daha önce belirtildiği gibi bunu gerçekleştirmek için Dash içindeki Div sınıfını ve Graph bileşenini kullanırız. Graph bileşeni, veriyi ve düzen tanımını içeren bir figure nesnesi alır. Saçılım grafiğini graph_objs içindeki scatter özelliğini kullanarak çizeriz. Grafiğin bir saçılım grafiği olduğundan emin olmak için mode özniteliğini geçirip markers olarak ayarlarız. Aksi halde grafikte çizgiler olur.

 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

Bazen panolarınıza çok miktarda metin eklemeniz gerekebilir. Bunu, aşağıda gösterildiği gibi dash_core_components içindeki Mardown özniteliğini kullanarak yapabilirsiniz.

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

Çekirdek Bileşenler

Şimdi, Dash kullanırken karşılaşacağınız bazı dash_core_components öğelerine bakalım. Aşağıda gösterildiği gibi bir açılır liste oluşturabilirsiniz. Bunu dash_core_components içinden Dropdown’u çağırarak ve seçenekleri sözlüklerden oluşan bir liste olarak geçirerek yaparsınız. Varsayılan değeri values özniteliğini kullanarak ve varsayılan seçeneği ileterek ayarlayabilirsiniz.

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

Çoklu seçimli bir açılır liste üretmek de benzerdir. Tek fark, varsayılan olarak False olan multi özniteliğini true olarak ayarlamanızdır. Daha sonra values özniteliğini belirterek varsayılan olarak çoklu seçili olmasını istediğiniz öğeleri tanımlayabilirsiniz.

    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
    )

Radyo düğmeleri RadioItems özniteliği kullanılarak üretilebilir. Ardından seçenekleri sözlüklerden oluşan bir liste olarak geçersiniz. values özniteliğini belirterek varsayılan bir değer de ayarlayabilirsiniz.

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

Onay kutuları oluşturmak için dash_core_components içinden Checklist özniteliğini çağırırsınız. Seçenekler ve varsayılan değerler yukarıdaki gibi iletilir.

  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']
    )

Uygulamanızda büyük olasılıkla metin girişlerine ihtiyaç duyacaksınız. Bunları üretmek için Input özniteliğini kullanırsınız. Html Label etiketiyle, Girdi alanı için bir etiket oluşturabilirsiniz. values özniteliğini kullanarak alanda bazı metinler belirtebilir ve type ile bunun bir metin alanı mı, sayı mı vb. olduğunu ifade edebilirsiniz.

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

Yardımı çağırma

Dash bileşenleri deklaratif olduğundan, herhangi birinde help komutunu çağırmak ilgili bileşenin yardımını getirir.

help(dcc.Input)

Etkileşim

Şimdi Dash uygulamalarımızı nasıl etkileşimli hale getirebileceğimizi ele alalım. Bunu yapmak için dash.dependencies içinden Input ve Output’u içe aktarmamız gerekir. Bunları HTML Input ile karıştırmayın; farklıdırlar. HTML Input, dash core components içinden içe aktarılır. Aşağıda bir metin girişi oluşturuyor ve ona bir geri çağırım (callback) bağlıyoruz; böylece kutuya bir şey yazdığınızda my-div gerçek zamanlı olarak güncellenir. Bunu etkinleştirmek için Dash, @app adlı bir dekoratör sağlar; bu dekoratör, my-div ile HTML giriş alanına bir geri çağırım fonksiyonu bağlamayı mümkün kılar. Dikkat ederseniz, update_output_div fonksiyonunu tanımlamadan önce dekoratörü kullanıyoruz.

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

Kimlik Doğrulama

Dash, dash-auth adlı ayrı bir paket aracılığıyla kimlik doğrulaması sağlar. İki tür kimlik doğrulama sunar: HTTP Basic Auth ve Plotly OAuth. Basic Auth’ta uygulamanıza bir dizi kullanıcı adı ve parolayı sabitlersiniz. Bu yöntemin bazı zorlukları vardır: kullanıcılar uygulamanızdan çıkış yapamaz, hesap oluşturamaz veya parola değiştiremez ve kullanıcı adlarıyla parolaları kodunuzda güvenle saklamaktan siz sorumlusunuz. Plotly OAuth ise çevrimiçi Plotly hesabınız üzerinden kimlik doğrulaması sağlar ve ücretsiz değildir.

Basic Auth’u kurmak için şu adımları izleyin. Önce gerekli paketleri kurun.

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

Bundan sonra, uygulamanızda bulunmasını istediğiniz kullanıcı adı ve parola çiftlerini ayarlayın.

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

Parola çiftleri ayarlandıktan sonra kimlik doğrulamayla dash_auth.BasicAuth yardımcı programı ilgilenir. Tek yapmanız gereken parola çiftlerini ve uygulama adınızı dash_auth.BasicAuth’a geçirmek.

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

Panoları Heroku’da Barındırma

Panonuzu Heroku’da barındırmak oldukça kolaydır ancak birkaç adım gerektirir.

Önce, projeye ait tüm dosyaları tutacak bir dizin oluşturun. Bunu Ubuntu’da mkdir komutunu kullanarak yapabilirsiniz.

$ mkdir my_dash_app
$ cd my_dash_app

Sonra, klasörü git ve virtualenv ile başlatın. Git sürüm kontrolü içindir; virtualenv ise tüm Python bağımlılıklarımızı tutacak sanal bir ortam oluşturmamızı sağlar. Ortamı oluşturduktan sonra source komutunu kullanarak etkinleştiririz.

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

Sonraki adımda Dash uygulamamız için gerekli tüm paketleri kuruyoruz:

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

Dash uygulamamızı sunmak için bir Python web sunucusuna ihtiyacımız var. Üretimde Flask’in geliştirme sunucusu asla kullanılmaz. Bu işlev için Gunicorn web sunucusunu kullanırız. Aşağıda gösterildiği gibi kurun:

$ pip install gunicorn

Ardından, klasörümüzde birkaç dosya oluşturmamız gerekir:

1. Dash uygulamamızı yazacağımız app.py.
2. Gereksiz dosyaların üretime gönderilmediğinden emin olmak için bir .gitignore
3. Tüm Python bağımlılıklarını ve sürümlerini içerecek bir requirements.txt dosyası.
4. Dağıtım için bir Procfile.

app.py dosyasına aşağıdakileri ekleyin. Bu sadece bir örnektir; kendi Dash panonuzu kullanabilirsiniz.

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)

Temelde bir Dash uygulamasının aynı zamanda bir Flask uygulaması olduğunu unutmamak önemlidir. Dağıtım amaçları için Flask uygulama örneğine erişmemiz gerekir. Dash bunu şu şekilde yapmamızı sağlar 

app.server

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

.gitignore dosyasına üretime göndermek istemediğiniz dosyaları ekleyin. İyi bir Python .gitignore dosyası Github’da mevcuttur.

Şimdi dağıtım bilgimizi Procfile içinde belirtelim. Sunucumuzu gunicorn olarak belirtmek için web değişkenini kullanırız. Ayrıca uygulama ayrıntılarımızı app değişkeninden yararlanarak belirtiriz. app, app.py dosya adını; server ise o dosya içindeki server değişkenini ifade eder.

web: gunicorn app:server

Python bağımlılıklarımızı requirements dosyasına da yazmamız gerekir. Heroku bunları dağıtım sırasında kuracaktır.

pip freeze > requirements.txt

Sonraki adımlar bir Heroku hesabınızın ve Heroku CLI’ın kurulu olduğunu varsayar. Eğer bunlara sahip değilseniz https://www.heroku.com adresine gidip ayarlayın.

Son adım, terminalde bir Heroku uygulaması oluşturmak ve tüm uygulama paketlerimizi eklemektir. Değişiklikleri işledikten (commit) sonra; uygulamanızı heroku master’a gönderin (push). Bu komutun çıktısında, Heroku’daki canlı Dash uygulamanıza bir bağlantı yer alacaktır.

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

Bu yazı, Plotly’nin Dash’i kullanılarak saf Python ile pano oluşturmanın bir girişidir. Dash hakkında daha fazla bilgi edinmek için resmi belgelere göz atın.

Python hakkında daha fazla bilgi edinmek isterseniz, Yeni Başlayanlar için Python Eğitimi ve Veri Bilimi için Orta Düzey Python kursumuza göz atın.