Bokeh ile Bir Web Uygulaması Yayınlama Eğitimi

Önceki Bokeh eğitimlerimizde, Bokeh ile ilk adımlarınızı ve bazı temel saçılım ve çizgi grafiklerini nasıl oluşturacağınızı ele aldık. Bokeh, geniş veri görselleştirme olanaklarının yanı sıra, Python ile tarayıcı arasında bir bağlantı kurarak uygulamaları sunucularınızda barındırmanın bir yolunu da sunar.   

Önce uygulamayı oluşturup Bokeh sunucularında çalıştırarak meslektaşlarınızla paylaşacağız. Bokeh sunucusunun nasıl çalıştığı hakkında daha fazla bilgi edinmek için Bokeh belgelerine göz atın. 

Bokeh Sunucusunun Temelleri

Bokeh, nesneleri (grafikler, bileşenler, eksenler ve oluşturduğunuz hemen her şey) JSON biçimine dönüştürür.

Bokeh sunucusu, yazdığınız Python Kodunu bir JSON belgesine dönüştürür. Bu JSON belgesi, kullanıcıların uygulamayı tarayıcıda görüntüleyebilmesi için Bokeh'in istemci kitaplığı (BokehJS) kullanılarak JavaScript ile işlenir.

Bokeh'in avantajı, JavaScript kısmını sizin için halletmesidir. Dolayısıyla bir uygulama oluşturmak için önceden JavaScript bilmenize gerek yok! Aşağıdaki görsel, Bokeh sunucusunun nasıl çalıştığının bir özetini sunar.

Kaynak: The Bokeh Server

Bir Bokeh Uygulaması Nasıl Geliştirilir ve Çalıştırılır

Bir Bokeh uygulamasının genel yapısı şöyledir:

1. Grafikler ve bileşenler oluşturun: Bu, bir Bokeh uygulaması oluşturmanın ilk adımıdır. Sergilemek istediğiniz, önceden belirlenmiş bir grafiğiniz olmalıdır.
2. Geri çağırma (callback) işlevini tanımlayın: Bir geri çağırma işlevi, uygulamaya kullanıcı etkileşimine nasıl yanıt vereceğini söyler. Örneğin, bir zaman serisi grafiğinde farklı bir sembol seçtiğinizde grafiğin yeni verilerle güncellenmesi gerekir.
3. Yerleşimler (layout) oluşturun: Yerleşimler, grafikleri etkili ve estetik biçimde sunmamıza yardımcı olur.

Bir Borsa Analizi Bokeh Web Uygulaması Oluşturma

Proje Açıklaması

Bu bölümde, basit bir web uygulamasını nasıl oluşturup finansal analistlerin kullanımına sunacağınızı göstereceğiz.

Big Money Inc — önde gelen bir varlık yönetim şirketinde çalıştığınızı hayal edin. Yöneticiniz, meslektaşlarınızın Python becerilerinizden övgüyle bahsettiğini duydu. Şimdi sizden, şirketin finansal analistlerinin iki hisseyi karşılaştırmak için kullanacağı bir borsa uygulaması oluşturmanızı istiyor. Yöneticiniz, şirketin finansal analistlerinin, istedikleri herhangi bir hisseyi aynı sektördeki benzer bir hisseyle hızla karşılaştırarak zamandan tasarruf edebileceğine inanıyor. Örneğin, Apple hissesi Microsoft ile karşılaştırılabilir ve müşterilerin portföyleri için en iyi hisse seçilebilir. Karşılaştırma, şu temel ölçümleri içermelidir:

• Kapanış fiyatı trend çizelgeleri
• Korelasyon
• Ortalama (beklenen getiri)
• Standart sapma (beklenen risk)

Analiz döneminin etkileşimli olarak özelleştirilebilmesi gerekir. Örneğin, bir kullanıcı iki hissenin son bir haftadaki, aydaki, yıldaki ya da istediği herhangi bir dönemdeki performansını karşılaştırabilmelidir. Uygulamanın şirketin tüm kullanıcıları için kolayca erişilebilir olmasını sağlamalısınız. Bu da bir bulut hizmeti kullanarak dağıtmanız gerektiği anlamına gelir.

Önkoşullar

1. Bokeh hakkında temel düzeyde anlayış.
2. Bir miktar Python bilgisi.
3. Bokeh’e Başlarken Eğitiminde belirtilen paketlerin kurulumu.

Borsa Web Uygulamasına Genel Bakış

Web uygulaması, yukarıda ayrıntılandırılan finans vaka çalışmasına bir çözüm sunacaktır. Bu web uygulaması, kullanıcıların iki hisse senedi sembolü seçmesine ve seçilen hisselerin hem fiyatlarının hem getirilerinin tanımlayıcı istatistiklerini (örneğin ortalama ve standart sapma), korelasyon grafiklerini ve fiyat trend çizelgelerini görselleştirmesine olanak tanır. Etkileşimlilik, farklı sembol ve farklı zaman dilimi kombinasyonlarının seçilebilmesi (fiyat trend çizelgelerinde) ile sağlanır. Web uygulaması şu şekilde görünecektir:

Borsa Web Uygulaması Bokeh Projesini Oluşturma

1. Bir proje klasörü oluşturun ve adını SelectStock koyun.

2. Proje klasörünü açın ve main.py adlı bir dosya oluşturun.

3. Borsa verilerinin bir kopyasını proje klasörüne “all_stocks_5yr.csv” adıyla kaydedin. 

Hisse sembollerinin bir kopyasını kaydedin. ticker.py dosyası, sembol listesini içerir. Tüm listeyi main.py kod betiğine dahil etmek kodu hantallaştırabileceği için yalnızca 505 hisse sembolü vardır. Sembol listesini ayrı bir dosyada saklamak ve gerektiğinde oradan çağırmak uygundur.

main.py dosyasını Spyder, atom veya Sublime Text gibi favori kod düzenleyicilerinizde açın.

Paketleri İçe Aktarın

main.py dosyasına aşağıdaki kodu yazın. Bu kod, web uygulamasını oluşturmak için gerekli paketleri ve sembolleri içe aktarır:

# Import the required packages
import pandas as pd
from functools import lru_cache
from bokeh.io import curdoc
from bokeh.layouts import column, row
from bokeh.models import ColumnDataSource, PreText, Select, Div
from bokeh.plotting import figure

# load the list of tickers
import tickers
tickers = tickers.tickers
Altyapı:

Verileri Okuyun ve Yükleyin 

Bir sembolün kendisiyle karşılaştırılmasını önleyen bir işlev yazın:

# Create a function to ensure that a ticker is not compared to itself
def foo(val, lst):
return [x for x in lst if x != val]
Add the following code to read and load data for the webapp:
# A function to read and load data
# Note the use of @lru_cache() decorator is to cache the data and speed up reloads
@lru_cache()
def load_ticker(ticker):
data = pd.read_csv('all_stocks_5yr.csv', parse_dates=['date'])
data = data.set_index('date')
data = data[data['Name'] == ticker]
return pd.DataFrame({ticker: data.close, ticker+'_returns': data.close.diff()})

# A function to create a dataframe for the selected tickers
@lru_cache()
def get_data(t1, t2):
df1 = load_ticker(t1)
df2 = load_ticker(t2)
data = pd.concat([df1, df2], axis=1)
data = data.dropna()
data['t1'] = data[t1]
data['t2'] = data[t2]
data['t1_returns'] = data[t1+'_returns']
data['t2_returns'] = data[t2+'_returns']
return data

# Put data into a ColumnDataSource
source = ColumnDataSource(
data=dict(date=[], t1=[], t2=[], t1_returns=[], t2_returns=[]))Altyapı:

Bileşenleri Oluşturun

# set up widgets
stats = PreText(text='', width=500)
ticker1 = Select(value='AAPL', options=foo('GOOG', tickers))
ticker2 = Select(value='GOOG', options=foo('AAPL', tickers))
Altyapı:

Bileşenler, kullanıcının karşılaştırma için birinci ve ikinci sembolü seçmesine olanak tanır. Sembolleri seçtiğinizde, Bokeh grafikler oluşturabilir.

Grafikleri Oluşturun

# set up plots
tools = 'pan,wheel_zoom,xbox_select,reset'

corr = figure(width=400, height=350,
              tools='pan,wheel_zoom,box_select,reset', output_backend='webgl')
corr.diamond('t1_returns', 't2_returns', size=2, source=source, color="red",
            selection_color="orange", alpha=0.6, nonselection_alpha=0.1, selection_alpha=0.4)


time_series1 = figure(width=900, height=200, tools=tools,
                      x_axis_type='datetime', active_drag="xbox_select", output_backend='webgl')
time_series1.line('date', 't1', source=source, color='orange')
time_series2 = figure(width=900, height=200, tools=tools,
                      x_axis_type='datetime', active_drag="xbox_select", output_backend='webgl')
time_series2.x_range = time_series1.x_range
time_series2.line('date', 't2', source=source, color='green')Altyapı:

Bu kodda önce grafiklere eşlik edecek araçları tanımlıyoruz. Korelasyon grafiği ilk grafiktir; figure() işlevi width = 400 ve height = 350 olarak belirtilmiştir. Korelasyon grafiği elmas işaretleyiciler kullanır.

Sembol zaman serisi grafiklerini oluşturmak için line glyph'ını kullanıyoruz. Zaman serilerinin aralığı, doğru bir karşılaştırma için eşitlenmiştir.

# Define callbacks
def change_ticker1(attrname, old, new):
ticker2.options = foo(new, tickers)
update()

def change_ticker2(attrname, old, new):
ticker1.options = foo(new, tickers)
update()

def update(selected=None):
t1, t2 = ticker1.value, ticker2.value

df = get_data(t1, t2)
data = df[['t1', 't2', 't1_returns', 't2_returns']]
source.data = data

update_stats(df, t1, t2)

corr.title.text = '%s returns vs. %s returns' % (t1, t2)
    time_series1.title.text, time_series2.title.text = t1, t2

def update_stats(data, t1, t2):
stats.text = str(data[[t1, t2, t1+'_returns', t2+'_returns']].describe())

ticker1.on_change('value', change_ticker1)
ticker2.on_change('value', change_ticker2)

def selection_change(attrname, old, new):
t1, t2 = ticker1.value, ticker2.value
data = get_data(t1, t2)
selected = source.selected.indices
if selected:
    data = data.iloc[selected, :]
update_stats(data, t1, t2)

source.selected.on_change('indices', selection_change)Altyapı:

Geri çağırma bölümünde, birinci ve ikinci işlev sırasıyla sembol 1 ve sembol 2 için geri çağırmayı tanımlar.

update() işlevi, kullanıcı farklı sembol kombinasyonları seçtiğinde grafikleri günceller; update_stats() işlevi, kullanıcı yeni bir sembol kümesi seçtiğinde istatistikleri günceller; selection_change() işlevi ise kullanıcı sembolleri güncellediğinde tüm uygulamayı günceller.

Yerleşimi Ayarlayın

İlk adım, web uygulamasıyla nasıl etkileşime girileceğine dair kullanıcıya talimat veren bir başlık vermektir. Div işlevi, metni sağlamanıza ve diğer özelleştirmelerin yanı sıra yükseklik ve genişliği tanımlamanıza olanak tanır.

# set up layout
# Add a title message to the app
div = Div(
    text="""
        <p>Karşılaştırmak için iki Hisse seçin: Temel İstatistikler</p>
        """,
width=900,
height=30,
)
# Create layouts
app_title = div
widgets = column(ticker1, ticker2, stats)
main_row = row(widgets, corr)
series = column(time_series1, time_series2)
layout = column(app_title, main_row, series)Altyapı:

Uygulama yerleşimi hem column hem row işlevlerini birleştirir.

Önce, en üste bir başlık yerleştirilir. Ana satır bunun altına yığılır (ana satır, tanımlayıcı istatistikleri ve korelasyon grafiğini içerir). Bir sonraki satırda birinci zaman serisi grafiği (sembol 1 için) ve son satırda ikinci sembolün zaman serisi grafiği yer alır.

Uygulamayı Başlatın

Bu adım, sunucuda çağrıldığında web uygulamasını başlatır. 

# initialize the app
update()
curdoc().add_root(layout)
curdoc().title = "Compare Stocks"
Altyapı:

Web Uygulamasını Yayınlama

Web uygulamanızı test etmek için yerel makinenizi kullanarak dağıtabilirsiniz. Bunu yapmak için, Anaconda Prompt'u veya tercih ettiğiniz terminali açmanız yeterlidir. 'SelectStock' adlı proje klasörünü içeren dizine geçin. Bunu aşağıdaki kodu yazarak yapabilirsiniz:

cd "SelectStock klasörünün bulunduğu sistem yolu"Altyapı:

ör. cd "C:\Users\... \SelectStock"

Web uygulamasını çalıştırmak için aşağıdaki kodu yazın:

bokeh serve --show SelectStockAltyapı:

Alternatif olarak, SelectStock klasörüne gidip main.py dosyasını çalıştırabilirsiniz:

Bokeh serve --show main.py
Altyapı:

Bu, web uygulamasını varsayılan web tarayıcısında şu şekilde başlatır;

http://localhost:5006/SelectStock veya

http://localhost:5006/main

Web uygulamanızı çalıştırmak ve dağıtmak için Bokeh Sunucusunu kullanıyorsunuz.

Ayrıca web uygulamasını Heroku gibi hizmetler kullanarak da dağıtabilirsiniz.

Sonuç

Bu eğitimde, kendi Bokeh uygulamalarınızı yerel makinenizde oluşturup dağıtmanın temellerini öğrendiniz. Eğitim, öğrendiklerinizi bir araya getirerek kullanıcıları heyecanlandıracak pratik, eğlenceli ve etkileşimli bir uygulama oluşturmayı gösterir.

Kodlama becerilerinizi hızla geliştirmenin en iyi yolu, bir kavram veya aracı öğrendikten sonra bunun gibi projeler inşa etmektir. Bu pratik yaklaşım, bir araç veya beceriye sağlam bir şekilde hakim olmanızı ve potansiyel işverenlere neler yaptığınızı gösterebilmenizi sağlar.

Bokeh hakkında daha fazla bilgi edinmek isterseniz, bu kitabı okuyabilirsiniz. Ya da daha iyisi, DataCamp’in Bokeh ile Etkileşimli Görselleştirme kursunu deneyin. Bokeh hakkında ayrıntılar ve daha gelişmiş grafiklerin nasıl oluşturulacağı hakkında bilgi sağlar. Daha da ileri giderek gerçek zamanlı verilerle kendi Bokeh web uygulamalarınızı nasıl geliştireceğinizi öğrenebilirsiniz.