Tutorial Menerapkan Aplikasi Web dengan Bokeh

Dalam tutorial Bokeh sebelumnya, kami membahas cara memulai dengan Bokeh dan membuat plot sebar dan garis dasar. Selain berbagai kemungkinan visualisasi data, Bokeh juga menawarkan cara untuk meng-host aplikasi di server dengan menghubungkan Python dan browser.   

Kita akan mulai dengan membuat aplikasi dan menjalankannya di server Bokeh untuk dibagikan kepada rekan kerja. Untuk informasi lebih lanjut tentang cara kerja server Bokeh, lihat dokumentasi Bokeh. 

Dasar-dasar Bokeh Server

Bokeh mengonversi objek (seperti plot, widget, sumbu, dan hampir semua hal yang Anda buat) ke format JSON.

Server Bokeh mengonversi Kode Python yang Anda tulis menjadi dokumen JSON. Dokumen JSON dirender dalam JavaScript menggunakan pustaka klien Bokeh (BokehJS) agar pengguna dapat melihat aplikasi di browser.

Keunggulan Bokeh adalah menangani bagian JavaScript. Jadi, Anda tidak perlu memiliki pengetahuan JavaScript sebelumnya untuk membuat aplikasi! Gambar berikut merangkum cara kerja server Bokeh.

Sumber: The Bokeh Server

Cara Membangun dan Menjalankan Aplikasi Bokeh

Struktur umum aplikasi Bokeh adalah:

1. Buat plot dan widget: Ini adalah langkah pertama dalam membuat aplikasi Bokeh. Anda sebaiknya sudah menentukan plot yang ingin ditampilkan.
2. Definisikan fungsi callback: Fungsi callback memberi instruksi pada aplikasi tentang cara merespons interaksi pengguna. Misalnya, saat Anda memilih ticker berbeda dalam plot deret waktu, plot harus diperbarui dengan data baru.
3. Buat tata letak: Tata letak membantu kita menyajikan plot secara efektif dan estetis.

Membuat Aplikasi Web Analisis Pasar Saham dengan Bokeh

Deskripsi Proyek

Pada bagian ini, kami akan menunjukkan cara membuat aplikasi web sederhana dan menerapkannya agar dapat digunakan oleh analis keuangan.

Bayangkan Anda bekerja untuk Big Money Inc — perusahaan manajemen aset terkemuka. Manajer Anda mendengar rekan-rekan memuji keterampilan Python Anda. Kini ia ingin Anda membuat aplikasi pasar saham yang akan digunakan analis keuangan perusahaan untuk membandingkan dua saham. Manajer Anda meyakini analis keuangan perusahaan dapat menghemat waktu dengan cepat membandingkan saham apa pun yang mereka inginkan dengan saham serupa dalam industri yang sama. Misalnya, mereka dapat membandingkan saham Apple dengan Microsoft dan memilih saham terbaik untuk menyusun portofolio klien. Perbandingan harus mencakup ukuran dasar, seperti:

• Bagan tren harga penutupan
• Korelasi
• Rata-rata (imbal hasil yang diharapkan)
• Simpangan baku (risiko yang diharapkan)

Harus ada cara untuk menyesuaikan periode analisis secara interaktif. Misalnya, pengguna harus dapat membandingkan kinerja dua saham pada minggu, bulan, tahun terakhir, atau periode apa pun yang mereka inginkan. Anda harus memastikan aplikasi mudah diakses oleh semua pengguna di perusahaan. Artinya, Anda perlu menerapkannya menggunakan layanan cloud.

Prasyarat

1. Pemahaman dasar tentang Bokeh.
2. Pengetahuan dasar Python.
3. Instalasi paket yang diuraikan dalam Tutorial Memulai dengan Bokeh kami.

Gambaran Umum Aplikasi Web Pasar Saham

Aplikasi web ini akan memberikan solusi untuk studi kasus di bidang keuangan yang dijelaskan di atas. Aplikasi ini memungkinkan pengguna memilih dua ticker saham dan memvisualisasikan statistik deskriptif (seperti rata-rata dan simpangan baku) dari harga dan return, plot korelasi, serta bagan tren harga untuk saham yang dipilih. Interaktivitas diciptakan dengan memungkinkan pemilihan kombinasi berbagai ticker dan berbagai periode waktu (pada bagan tren harga). Aplikasi web akan tampak seperti ini:

Membuat Proyek Bokeh Aplikasi Web Pasar Saham

1. Buat folder proyek dan beri nama SelectStock.

2. Buka folder proyek dan buat file bernama main.py.

3. Simpan salinan data pasar saham di folder proyek sebagai “all_stocks_5yr.csv”. 

Simpan salinan ticker saham. File ticker.py berisi daftar ticker. Hanya ada 505 ticker saham, karena menyertakan seluruh daftar di skrip kode main.py dapat membuat kode menjadi rumit. Lebih tepat menyimpan daftar ticker di file terpisah dan memanggilnya saat diperlukan.

Buka file main.py di editor kode favorit Anda seperti Spyder, atom, atau Sublime Text.

Impor Paket

Ketik kode berikut di file main.py. Kode ini mengimpor paket dan ticker yang diperlukan untuk membuat aplikasi web:

# 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

Baca dan Muat Data 

Tulis fungsi untuk mencegah sebuah ticker dibandingkan dengan dirinya sendiri:

# 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=[]))

Buat Widget

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

Widget memungkinkan pengguna memilih ticker pertama dan kedua untuk dibandingkan. Setelah Anda memilih ticker, Bokeh dapat membuat plot.

Buat Plot

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

Dalam kode ini, pertama kita mendefinisikan tools yang akan menyertai plot. Plot korelasi adalah plot pertama, dengan fungsi figure() yang menetapkan width = 400 dan height = 350. Plot korelasi menggunakan penanda berbentuk belah ketupat.

Kita menggunakan glyph garis untuk membuat plot deret waktu untuk ticker. Rentang deret waktu dibuat sama agar perbandingan lebih tepat.

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

Pada bagian callback, fungsi pertama dan kedua masing-masing mendefinisikan callback untuk ticker 1 dan ticker 2.

Fungsi update() memperbarui plot setiap kali pengguna memilih kombinasi ticker yang berbeda; fungsi update_stats() memperbarui statistik saat pengguna memilih set ticker baru; dan fungsi selection_change() memperbarui seluruh aplikasi saat pengguna memperbarui ticker.

Atur Tata Letak

Langkah pertama adalah memberi judul aplikasi yang memberikan instruksi kepada pengguna tentang cara berinteraksi dengan aplikasi web. Fungsi Div memungkinkan Anda memberikan teks dan menentukan tinggi serta lebar, beserta kustomisasi lainnya.

# set up layout
# Add a title message to the app
div = Div(
    text="""
        <p>Select two Stocks to compare key Statistics:</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)

Tata letak aplikasi menggabungkan fungsi column dan row.

Pertama, sebuah judul ditempatkan di bagian atas. Baris utama ditumpuk di bawahnya (baris utama berisi statistik deskriptif dan plot korelasi). Baris berikutnya berisi plot deret waktu pertama (untuk ticker 1), dan baris terakhir berisi plot deret waktu untuk ticker kedua.

Inisialisasi aplikasi

Langkah ini menginisialisasi aplikasi web saat dipanggil di server. 

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

Menerapkan Aplikasi Web

Untuk menguji aplikasi web Anda, Anda dapat menerapkannya menggunakan mesin lokal Anda. Untuk melakukannya, cukup buka Anaconda Prompt atau terminal pilihan Anda. Masuk ke direktori yang berisi folder proyek bernama 'SelectStock'. Anda dapat melakukannya dengan mengetik kode berikut:

cd "System path to where the SelectStock folder is contained"

mis. cd "C:\Users\... \SelectStock"

Ketik kode berikut untuk menjalankan aplikasi web:

bokeh serve --show SelectStock

Atau, Anda dapat masuk ke folder SelectStock dan menjalankan file main.py:

Bokeh serve --show main.py

Ini akan meluncurkan aplikasi web di browser web bawaan sebagai;

http://localhost:5006/SelectStock atau

http://localhost:5006/main

Anda menggunakan Bokeh Server untuk menjalankan dan menerapkan aplikasi web Anda.

Anda juga dapat menerapkan aplikasi web menggunakan layanan seperti Heroku.

Kesimpulan

Dalam tutorial ini, Anda telah mempelajari dasar-dasar membangun dan menerapkan aplikasi Bokeh Anda sendiri di mesin lokal. Tutorial ini menunjukkan cara merangkai semua yang telah Anda pelajari untuk membangun aplikasi yang praktis, menyenangkan, dan interaktif yang akan menarik minat pengguna.

Cara terbaik untuk mengasah keterampilan pemrograman dengan cepat adalah membangun proyek seperti ini setelah mempelajari suatu konsep atau alat. Pendekatan praktis ini akan memastikan Anda memahami alat atau keterampilan dengan baik dan dapat menunjukkan kepada calon pemberi kerja apa yang telah Anda kerjakan.

Jika Anda ingin mempelajari lebih lanjut tentang Bokeh, Anda dapat membaca buku ini. Atau, lebih baik lagi, coba kursus DataCamp Interactive Visualization with Bokeh. Kursus ini memberikan detail tentang Bokeh dan cara membuat plot yang lebih canggih. Anda dapat melangkah lebih jauh dan mempelajari cara membangun aplikasi web Bokeh Anda sendiri menggunakan data real-time.