Bokeh के साथ वेब ऐप परिनियोजित करना: ट्यूटोरियल

अपने पिछले Bokeh ट्यूटोरियल्स में, हमने Bokeh के साथ शुरुआती कदम और बेसिक स्कैटर और लाइन प्लॉट्स बनाना देखा था। व्यापक डेटा विज़ुअलाइज़ेशन क्षमताओं के अलावा, Bokeh Python और ब्राउज़र के बीच कनेक्शन सक्षम करके अपने सर्वर पर ऐप्स होस्ट करने का तरीका भी देता है।   

हम ऐप बनाकर शुरुआत करेंगे और उसे Bokeh सर्वर्स पर चलाएंगे ताकि सहयोगियों के साथ साझा किया जा सके। Bokeh सर्वर कैसे काम करता है, इस पर अधिक जानकारी के लिए Bokeh डाक्यूमेंटेशन देखें। 

Bokeh सर्वर की बुनियाद

Bokeh ऑब्जेक्ट्स (जैसे प्लॉट्स, विजेट्स, एक्सिस, और लगभग सब कुछ जो आप बनाते हैं) को JSON फॉर्मैट में बदलता है।

Bokeh सर्वर आपके द्वारा लिखा गया Python कोड एक JSON दस्तावेज़ में बदल देता है। यह JSON दस्तावेज़ Bokeh की क्लाइंट लाइब्रेरी (BokehJS) का उपयोग करके JavaScript में रेंडर होता है, ताकि उपयोगकर्ता ब्राउज़र में एप्लिकेशन देख सकें।

Bokeh का लाभ यह है कि यह JavaScript वाले हिस्से को संभाल लेता है। इसलिए, ऐप बनाने के लिए आपको JavaScript का पूर्व ज्ञान नहीं होना चाहिए! निम्नलिखित चित्र दर्शाता है कि Bokeh सर्वर कैसे काम करता है।

स्रोत: The Bokeh Server

Bokeh एप्लिकेशन कैसे बनाएं और चलाएं

एक Bokeh एप्लिकेशन की सामान्य संरचना:

1. प्लॉट्स और विजेट्स बनाएं: Bokeh एप्लिकेशन बनाने का यह पहला चरण है। आपके पास पहले से तय प्लॉट होना चाहिए जिसे आप दिखाना चाहते हैं।
2. कॉलबैक फ़ंक्शन परिभाषित करें: कॉलबैक फ़ंक्शन एप्लिकेशन को बताता है कि उपयोगकर्ता की इंटरैक्शन पर कैसे प्रतिक्रिया देनी है। उदाहरण के लिए, जब आप टाइम सीरीज़ प्लॉट में अलग टिकर चुनते हैं, तो प्लॉट नए डेटा के साथ अपडेट होना चाहिए।
3. लेआउट्स बनाएं: लेआउट्स हमें प्लॉट्स को प्रभावी और आकर्षक ढंग से प्रस्तुत करने में मदद करते हैं।

स्टॉक मार्केट विश्लेषण Bokeh वेब ऐप बनाना

प्रोजेक्ट विवरण

इस खंड में, हम दिखाएंगे कि एक सरल वेब ऐप कैसे बनाया जाए और उसे वित्तीय विश्लेषकों के उपयोग के लिए परिनियोजित किया जाए।

कल्पना करें कि आप Big Money Inc — एक अग्रणी एसेट मैनेजमेंट कंपनी — में काम कर रहे हैं। आपकी मैनेजर ने आपके सहकर्मियों से आपकी Python स्किल्स की चर्चा सुनी है। अब वह चाहती हैं कि आप ऐसा स्टॉक मार्केट ऐप बनाएं जिसका उपयोग कंपनी के वित्तीय विश्लेषक दो स्टॉक्स की तुलना करने के लिए करें। आपकी मैनेजर मानती हैं कि विश्लेषक उसी उद्योग के किसी समान स्टॉक से किसी भी स्टॉक की त्वरित तुलना करके समय बचा सकते हैं। उदाहरण के लिए, वे Apple के स्टॉक की तुलना Microsoft से कर सकते हैं और क्लाइंट्स के पोर्टफोलियो बनाने के लिए बेहतर स्टॉक चुन सकते हैं। तुलना में निम्नलिखित बुनियादी माप शामिल होने चाहिए:

• क्लोज़ प्राइस ट्रेंड चार्ट्स
• कोरिलेशन
• मीन (अपेक्षित रिटर्न)
• स्टैंडर्ड डिविएशन (अपेक्षित जोखिम)

विश्लेषण की अवधि को इंटरैक्टिव तरीके से कस्टमाइज़ करने का तरीका होना चाहिए। उदाहरण के लिए, उपयोगकर्ता पिछले सप्ताह, माह, वर्ष, या अपनी पसंद की किसी भी अवधि में दो स्टॉक्स के प्रदर्शन की तुलना कर सके। आपको सुनिश्चित करना चाहिए कि ऐप कंपनी के सभी उपयोगकर्ताओं के लिए आसानी से उपलब्ध हो। इसका अर्थ है कि आपको इसे किसी क्लाउड सेवा का उपयोग करके परिनियोजित करना होगा।

पूर्व-आवश्यकताएँ

1. Bokeh की बुनियादी समझ।
2. Python का कुछ ज्ञान।
3. Getting Started with Bokeh Tutorial में बताए गए पैकेजेस की स्थापना।

स्टॉक मार्केट वेब ऐप का अवलोकन

वेब ऐप ऊपर दिए गए वित्त संबंधी केस स्टडी का समाधान देगा। यह वेब ऐप उपयोगकर्ताओं को दो स्टॉक टिकर्स चुनने और चयनित स्टॉक्स के प्राइसेज़ और रिटर्न्स की डिस्क्रिप्टिव स्टैटिस्टिक्स (जैसे मीन और स्टैंडर्ड डिविएशन), कोरिलेशन प्लॉट्स, और प्राइस ट्रेंड चार्ट्स देखने की सुविधा देता है। इंटरैक्टिविटी अलग-अलग टिकर्स के संयोजन और अलग-अलग समय अवधियों (प्राइस ट्रेंड चार्ट्स पर) का चयन सक्षम करके बनाई जाती है। वेब ऐप कुछ इस प्रकार दिखेगा:

स्टॉक मार्केट वेब ऐप Bokeh प्रोजेक्ट बनाना

1. एक प्रोजेक्ट फ़ोल्डर बनाएं और उसका नाम SelectStock रखें।

2. प्रोजेक्ट फ़ोल्डर खोलें और main.py नाम की फ़ाइल बनाएं।

3. स्टॉक मार्केट डेटा की एक कॉपी प्रोजेक्ट फ़ोल्डर में “all_stocks_5yr.csv” के रूप में सेव करें। 

स्टॉक टिकर्स की एक कॉपी सेव करें। ticker.py फ़ाइल में टिकर्स की सूची होती है। केवल 505 स्टॉक टिकर्स शामिल हैं, क्योंकि पूरी सूची को main.py कोड स्क्रिप्ट में शामिल करने से कोड बोझिल हो सकता है। टिकर्स की सूची को अलग फ़ाइल में सेव करना और ज़रूरत पड़ने पर वहीं से कॉल करना उपयुक्त है।

main.py फ़ाइल को अपने पसंदीदा कोड एडिटर्स जैसे Spyder, atom, या Sublime Text में खोलें।

पैकेज आयात करें

main.py फ़ाइल में निम्न कोड टाइप करें। यह कोड वेब ऐप बनाने के लिए आवश्यक पैकेजेस और टिकर्स आयात करता है:

# 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

डेटा पढ़ें और लोड करें 

ऐसा फ़ंक्शन लिखें जो किसी टिकर को स्वयं से तुलना करने से रोके:

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

विजेट्स बनाएं

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

विजेट्स उपयोगकर्ता को तुलना के लिए पहला और दूसरा टिकर चुनने देते हैं। एक बार टिकर चुन लेने पर, Bokeh प्लॉट्स बना सकता है।

प्लॉट्स बनाएं

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

इस कोड में, हम पहले उन टूल्स को परिभाषित करते हैं जो प्लॉट्स के साथ रहेंगे। कोरिलेशन प्लॉट पहला प्लॉट है, जहाँ figure() फ़ंक्शन में width = 400 और height = 350 दिया गया है। कोरिलेशन प्लॉट डायमंड मार्कर्स का उपयोग करता है।

हम टिकर्स के लिए टाइम सीरीज़ प्लॉट्स बनाने हेतु लाइन ग्लिफ का उपयोग करते हैं। तुलना को सटीक रखने के लिए दोनों टाइम सीरीज़ की रेंज समान रखी जाती है।

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

कॉलबैक सेक्शन में, पहली और दूसरी फ़ंक्शन्स क्रमशः टिकर 1 और टिकर 2 के लिए कॉलबैक परिभाषित करती हैं।

update() फ़ंक्शन तब प्लॉट्स अपडेट करता है जब उपयोगकर्ता टिकर्स का अलग संयोजन चुनता है; update_stats() फ़ंक्शन नए टिकर्स के सेट पर सांख्यिकी अपडेट करता है; और selection_change() फ़ंक्शन तब पूरी ऐप को अपडेट करता है जब उपयोगकर्ता टिकर्स अपडेट करता है।

लेआउट सेट करें

पहला चरण ऐप को ऐसा शीर्षक देना है जो उपयोगकर्ता को बताए कि वेब ऐप के साथ कैसे इंटरैक्ट करें। Div फ़ंक्शन आपको टेक्स्ट देने और ऊँचाई-चौड़ाई के साथ अन्य कस्टमाइज़ेशन परिभाषित करने देता है।

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

ऐप लेआउट में column और row दोनों फ़ंक्शन्स का संयोजन है।

पहले, ऊपर एक शीर्षक रखा जाता है। उसके नीचे मेन रो स्टैक होती है (मेन रो में डिस्क्रिप्टिव स्टैटिस्टिक्स और कोरिलेशन प्लॉट होता है)। अगली रो में पहला टाइम सीरीज़ प्लॉट (टिकर 1 के लिए) और अंतिम रो में दूसरे टिकर का टाइम सीरीज़ प्लॉट होता है।

ऐप को इनिशियलाइज़ करें

यह चरण सर्वर पर कॉल होने पर वेब ऐप को इनिशियलाइज़ करता है। 

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

वेब ऐप परिनियोजित करना

अपने वेब ऐप का परीक्षण करने के लिए, आप इसे अपनी लोकल मशीन का उपयोग करके परिनियोजित कर सकते हैं। ऐसा करने के लिए, बस Anaconda Prompt या अपनी पसंद का टर्मिनल खोलें। उस डायरेक्टरी में जाएँ जिसमें 'SelectStock' नाम का प्रोजेक्ट फ़ोल्डर है। ऐसा करने के लिए आप निम्न कोड टाइप कर सकते हैं:

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

उदा. cd "C:\Users\... \SelectStock"

वेब ऐप चलाने के लिए निम्न कोड टाइप करें:

bokeh serve --show SelectStock

वैकल्पिक रूप से, आप SelectStock फ़ोल्डर में जाकर main.py फ़ाइल चला सकते हैं:

Bokeh serve --show main.py

यह वेब ऐप को डिफ़ॉल्ट वेब ब्राउज़र में इस प्रकार लॉन्च करता है;

http://localhost:5006/SelectStock या

http://localhost:5006/main

आप अपनी वेब ऐप को चलाने और परिनियोजित करने के लिए Bokeh Server का उपयोग कर रहे हैं।

आप Heroku जैसी सेवाओं का उपयोग करके भी वेब ऐप परिनियोजित कर सकते हैं।

निष्कर्ष

इस ट्यूटोरियल में, आपने अपनी लोकल मशीन पर अपना स्वयं का Bokeh एप्लिकेशन बनाना और परिनियोजित करना सीखा। यह ट्यूटोरियल दिखाता है कि आपने जो सीखा है, उसे जोड़कर कैसे एक व्यावहारिक, मज़ेदार, और इंटरैक्टिव ऐप बनाया जा सकता है जो उपयोगकर्ताओं को उत्साहित करे।

अपनी कोडिंग स्किल्स को तेज़ी से विकसित करने का सबसे अच्छा तरीका यह है कि किसी कॉन्सेप्ट या टूल को सीखने के बाद ऐसे प्रोजेक्ट्स बनाएं। यह व्यावहारिक तरीका सुनिश्चित करेगा कि आपको किसी टूल या स्किल की अच्छी समझ हो और आप संभावित नियोक्ताओं को अपना काम दिखा सकें।

यदि आप Bokeh के बारे में और सीखना चाहते हैं, तो आप यह किताब पढ़ सकते हैं। या, और भी बेहतर, DataCamp का Interactive Visualization with Bokeh कोर्स आज़माएँ। इसमें Bokeh और अधिक उन्नत प्लॉट्स बनाने के तरीके पर विस्तार से बताया गया है। आप इससे आगे जाकर रीयल-टाइम डेटा का उपयोग करके अपने स्वयं के Bokeh वेब ऐप्स बनाना भी सीख सकते हैं।