Cách Triển Khai ứng Dụng Web Với Máy Chủ Bokeh

Tìm hiểu cách tạo và triển khai ứng dụng web so sánh giá chứng khoán với Bokeh. Sử dụng các kỹ năng trực quan hóa Python Bokeh của bạn để tạo một công cụ tương tác, thiết thực.

Giới thiệu

Chúng tôi sẽ bắt đầu bằng cách tạo ứng dụng và chạy nó trên máy chủ Bokeh để chia sẻ với đồng nghiệp. Để biết thêm thông tin về cách hoạt động của máy chủ Bokeh, hãy xem tài liệu Bokeh . 

Khái niệm cơ bản về Máy chủ Bokeh

Bokeh chuyển đổi các đối tượng (chẳng hạn như lô, vật dụng, trục và hầu hết mọi thứ bạn tạo) sang định dạng JSON.

Máy chủ Bokeh chuyển đổi Mã Python bạn viết thành tài liệu JSON. Tài liệu JSON được hiển thị bằng JavaScript sử dụng thư viện ứng dụng khách của Bokeh (BokehJS) để người dùng xem ứng dụng trong trình duyệt.

Ưu điểm của Bokeh là nó xử lý phần JavaScript. Do đó, bạn không cần phải có kiến ​​thức trước về JavaScript để tạo một ứng dụng! Hình ảnh sau đây cung cấp một bản tóm tắt về cách hoạt động của máy chủ Bokeh.

Nguồn: Máy chủ Bokeh

Cách tạo và chạy ứng dụng Bokeh

Cấu trúc chung của ứng dụng bokeh là:

1. Tạo lô và vật dụng: Đây là bước đầu tiên trong việc tạo ứng dụng Bokeh. Bạn nên có một cốt truyện xác định trước mà bạn muốn giới thiệu.
2. Xác định chức năng gọi lại: Một chức năng gọi lại hướng dẫn ứng dụng cách phản hồi với tương tác của người dùng. Ví dụ: khi bạn chọn một mã đánh dấu khác trong một biểu đồ chuỗi thời gian, biểu đồ đó sẽ cập nhật dữ liệu mới.
3. Tạo bố cục: Bố cục giúp chúng ta trình bày các lô đất một cách hiệu quả và thẩm mỹ.

Tạo ứng dụng web Bokeh phân tích thị trường chứng khoán

mô tả dự án

Trong phần này, chúng tôi sẽ hướng dẫn bạn cách tạo một ứng dụng web đơn giản và triển khai nó cho các nhà phân tích tài chính sử dụng.

Hãy tưởng tượng bạn đang làm việc cho Big Money Inc - một công ty quản lý tài sản hàng đầu. Người quản lý của bạn đã nghe đồng nghiệp khen ngợi kỹ năng Python của bạn. Bây giờ cô ấy muốn bạn tạo một ứng dụng thị trường chứng khoán mà các nhà phân tích tài chính của công ty sẽ sử dụng để so sánh hai cổ phiếu. Người quản lý của bạn tin rằng các nhà phân tích tài chính của công ty có thể tiết kiệm thời gian bằng cách nhanh chóng so sánh bất kỳ cổ phiếu nào họ muốn với một cổ phiếu tương tự trong cùng ngành. Ví dụ, họ có thể so sánh cổ phiếu của Apple với cổ phiếu của Microsoft và chọn cổ phiếu tốt nhất để tạo danh mục đầu tư của khách hàng. Việc so sánh nên bao gồm các biện pháp cơ bản, chẳng hạn như:

• Đóng biểu đồ xu hướng giá
• Tương quan
• Trung bình (lợi nhuận dự kiến)
• Độ lệch chuẩn (rủi ro kỳ vọng)

Cần có một cách để tùy chỉnh khoảng thời gian phân tích một cách tương tác. Ví dụ: người dùng có thể so sánh hiệu suất của hai cổ phiếu trong tuần trước, tháng, năm hoặc bất kỳ khoảng thời gian nào họ thích. Bạn nên đảm bảo rằng ứng dụng luôn sẵn có cho tất cả người dùng của công ty. Điều này có nghĩa là bạn cần phải triển khai nó bằng dịch vụ đám mây.

Điều kiện tiên quyết

1. Hiểu biết cơ bản về Bokeh.
2. Một số kiến ​​thức về Python.
3. Cài đặt các gói được nêu trong Hướng dẫn Bắt đầu với Bokeh của chúng tôi .

Tổng quan về Ứng dụng web Thị trường chứng khoán

Ứng dụng web sẽ cung cấp giải pháp cho nghiên cứu điển hình về tài chính được trình bày chi tiết ở trên. Ứng dụng web này cho phép người dùng chọn hai mã cổ phiếu và trực quan hóa các thống kê mô tả của chúng (chẳng hạn như trung bình và độ lệch chuẩn) về cả giá và lợi nhuận, biểu đồ tương quan và biểu đồ xu hướng giá cho các cổ phiếu đã chọn. Tính tương tác được tạo ra bằng cách cho phép lựa chọn kết hợp các mã khác nhau và các khoảng thời gian khác nhau (trên biểu đồ xu hướng giá). Ứng dụng web sẽ trông như thế này:

 

Tạo Dự án Bokeh của Ứng dụng web trên Thị trường Chứng khoán

1. Bạn sẽ cần tạo một thư mục dự án và đặt tên là SelectStock.

2. Mở thư mục dự án và tạo một tệp có tên main.py.

3. Lưu bản sao dữ liệu thị trường chứng khoán trong thư mục dự án dưới dạng “all_stocks_5yr.csv”. 

Lưu một bản sao của các mã cổ phiếu. Tệp ticker.py chứa danh sách các mã. Chỉ có 505 mã cổ phiếu, vì việc bao gồm toàn bộ danh sách trong tập lệnh mã main.py có thể làm cho mã trở nên cồng kềnh. Rất thích hợp để lưu danh sách các mã trong một tệp riêng biệt và gọi từ nó khi cần.

Mở tệp main.py trong các trình soạn thảo mã yêu thích của bạn như Spyder, atom hoặc Sublime Text.

Nhập gói

Nhập mã sau vào tệp main.py. Mã này nhập các gói và mã cần thiết để tạo ứng dụng 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

Đọc và tải dữ liệu 

Viết một hàm để ngăn một mã so sánh với chính 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=[]))

Tạo tiện ích con

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

Các widget cho phép người dùng chọn mã đầu tiên và mã thứ hai để so sánh. Sau khi bạn chọn các mã, Bokeh có thể tạo các ô.

Tạo lô đất

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

Trong đoạn mã này, trước tiên chúng ta xác định các công cụ sẽ đi kèm với các âm mưu. Biểu đồ tương quan là biểu đồ đầu tiên, với hàm figure () xác định chiều rộng = 400 và chiều cao = 350. Biểu đồ tương quan sử dụng các điểm đánh dấu kim cương.

Chúng tôi sử dụng glyph dòng để tạo các biểu đồ chuỗi thời gian cho các mã. Phạm vi của chuỗi thời gian là bằng nhau để cho phép so sánh thích hợp.

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

Trong phần gọi lại, hàm đầu tiên và hàm thứ hai xác định lệnh gọi lại cho mã số 1 và mã số 2, tương ứng.

Hàm update () cập nhật các ô bất cứ khi nào người dùng chọn một tổ hợp mã khác nhau; hàm update_stats () cập nhật số liệu thống kê khi người dùng chọn một bộ mã đánh dấu mới; và, hàm select_change () cập nhật toàn bộ ứng dụng khi người dùng cập nhật các mã.

Thiết lập bố cục

Bước đầu tiên là đặt cho ứng dụng một tiêu đề cung cấp hướng dẫn cho người dùng về cách tương tác với ứng dụng web. Chức năng Div cho phép bạn cung cấp văn bản và xác định chiều cao và chiều rộng, cùng với các tùy chỉnh khác.

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

Bố cục ứng dụng kết hợp cả chức năng cột và hàng.

Đầu tiên, một tiêu đề được đặt ở trên cùng. Hàng chính được xếp chồng bên dưới (hàng chính chứa thống kê mô tả và biểu đồ tương quan). Hàng tiếp theo chứa biểu đồ chuỗi thời gian đầu tiên (đối với mã 1) và hàng cuối cùng chứa biểu đồ chuỗi thời gian cho mã thứ hai.

Khởi tạo ứng dụng

Bước này khởi chạy ứng dụng web khi được gọi trên máy chủ. 

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

Triển khai ứng dụng web

Để kiểm tra ứng dụng web của bạn, bạn có thể triển khai nó bằng máy cục bộ của mình. Để làm điều này, bạn chỉ cần mở Anaconda Prompt hoặc thiết bị đầu cuối mà bạn chọn. Di chuyển vào thư mục chứa tên thư mục dự án 'SelectStock'. Bạn có thể thực hiện việc này bằng cách nhập mã sau:

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

ví dụ: cd "C: \ Users \ ... \ SelectStock"

Nhập mã sau để chạy ứng dụng web:

bokeh serve --show SelectStock

Ngoài ra, bạn có thể điều hướng vào thư mục SelectStock và chạy tệp main.py:

Bokeh serve --show main.py

Thao tác này sẽ khởi chạy ứng dụng web trong trình duyệt web mặc định dưới dạng;

http: // localhost: 5006 / SelectStock hoặc

http: // localhost: 5006 / main

Bạn đang sử dụng Máy chủ Bokeh để chạy và triển khai ứng dụng web của mình.

Bạn cũng có thể triển khai ứng dụng web bằng các dịch vụ như Heroku.

Sự kết luận

Trong hướng dẫn này, bạn đã học được các nguyên tắc cơ bản về việc xây dựng và triển khai các ứng dụng Bokeh của riêng mình trên máy cục bộ của bạn. Hướng dẫn chỉ cho bạn cách kết hợp tất cả những gì bạn đã học được để xây dựng một ứng dụng thực tế, vui nhộn và tương tác sẽ kích thích người dùng.

Cách tốt nhất để xây dựng kỹ năng viết mã của bạn nhanh chóng là xây dựng các dự án như thế này sau khi học một khái niệm hoặc công cụ. Cách tiếp cận thực tế này sẽ đảm bảo rằng bạn hiểu rõ về một công cụ hoặc kỹ năng và có thể cho các nhà tuyển dụng tiềm năng thấy bạn đang làm gì.

Nếu bạn muốn tìm hiểu thêm về Bokeh, bạn có thể đọc cuốn sách này . Hoặc, tốt hơn, hãy thử khóa học Hình ảnh tương tác với Bokeh của DataCamp . Nó cung cấp thông tin chi tiết về Bokeh và cách tạo các âm mưu nâng cao hơn. Bạn có thể đi xa hơn và tìm hiểu cách tạo ứng dụng web Bokeh của riêng mình bằng cách sử dụng dữ liệu thời gian thực. 

Liên kết: https://www.datacamp.com/tutorial/tutorial-bokeh-web-app-deployment

#python #bokeh 

What is GEEK

Buddha Community

Cách Triển Khai ứng Dụng Web Với Máy Chủ Bokeh

Tìm hiểu cách tạo và triển khai ứng dụng web so sánh giá chứng khoán với Bokeh. Sử dụng các kỹ năng trực quan hóa Python Bokeh của bạn để tạo một công cụ tương tác, thiết thực.

Giới thiệu

Chúng tôi sẽ bắt đầu bằng cách tạo ứng dụng và chạy nó trên máy chủ Bokeh để chia sẻ với đồng nghiệp. Để biết thêm thông tin về cách hoạt động của máy chủ Bokeh, hãy xem tài liệu Bokeh . 

Khái niệm cơ bản về Máy chủ Bokeh

Bokeh chuyển đổi các đối tượng (chẳng hạn như lô, vật dụng, trục và hầu hết mọi thứ bạn tạo) sang định dạng JSON.

Máy chủ Bokeh chuyển đổi Mã Python bạn viết thành tài liệu JSON. Tài liệu JSON được hiển thị bằng JavaScript sử dụng thư viện ứng dụng khách của Bokeh (BokehJS) để người dùng xem ứng dụng trong trình duyệt.

Ưu điểm của Bokeh là nó xử lý phần JavaScript. Do đó, bạn không cần phải có kiến ​​thức trước về JavaScript để tạo một ứng dụng! Hình ảnh sau đây cung cấp một bản tóm tắt về cách hoạt động của máy chủ Bokeh.

Nguồn: Máy chủ Bokeh

Cách tạo và chạy ứng dụng Bokeh

Cấu trúc chung của ứng dụng bokeh là:

1. Tạo lô và vật dụng: Đây là bước đầu tiên trong việc tạo ứng dụng Bokeh. Bạn nên có một cốt truyện xác định trước mà bạn muốn giới thiệu.
2. Xác định chức năng gọi lại: Một chức năng gọi lại hướng dẫn ứng dụng cách phản hồi với tương tác của người dùng. Ví dụ: khi bạn chọn một mã đánh dấu khác trong một biểu đồ chuỗi thời gian, biểu đồ đó sẽ cập nhật dữ liệu mới.
3. Tạo bố cục: Bố cục giúp chúng ta trình bày các lô đất một cách hiệu quả và thẩm mỹ.

Tạo ứng dụng web Bokeh phân tích thị trường chứng khoán

mô tả dự án

Trong phần này, chúng tôi sẽ hướng dẫn bạn cách tạo một ứng dụng web đơn giản và triển khai nó cho các nhà phân tích tài chính sử dụng.

Hãy tưởng tượng bạn đang làm việc cho Big Money Inc - một công ty quản lý tài sản hàng đầu. Người quản lý của bạn đã nghe đồng nghiệp khen ngợi kỹ năng Python của bạn. Bây giờ cô ấy muốn bạn tạo một ứng dụng thị trường chứng khoán mà các nhà phân tích tài chính của công ty sẽ sử dụng để so sánh hai cổ phiếu. Người quản lý của bạn tin rằng các nhà phân tích tài chính của công ty có thể tiết kiệm thời gian bằng cách nhanh chóng so sánh bất kỳ cổ phiếu nào họ muốn với một cổ phiếu tương tự trong cùng ngành. Ví dụ, họ có thể so sánh cổ phiếu của Apple với cổ phiếu của Microsoft và chọn cổ phiếu tốt nhất để tạo danh mục đầu tư của khách hàng. Việc so sánh nên bao gồm các biện pháp cơ bản, chẳng hạn như:

• Đóng biểu đồ xu hướng giá
• Tương quan
• Trung bình (lợi nhuận dự kiến)
• Độ lệch chuẩn (rủi ro kỳ vọng)

Cần có một cách để tùy chỉnh khoảng thời gian phân tích một cách tương tác. Ví dụ: người dùng có thể so sánh hiệu suất của hai cổ phiếu trong tuần trước, tháng, năm hoặc bất kỳ khoảng thời gian nào họ thích. Bạn nên đảm bảo rằng ứng dụng luôn sẵn có cho tất cả người dùng của công ty. Điều này có nghĩa là bạn cần phải triển khai nó bằng dịch vụ đám mây.

Điều kiện tiên quyết

1. Hiểu biết cơ bản về Bokeh.
2. Một số kiến ​​thức về Python.
3. Cài đặt các gói được nêu trong Hướng dẫn Bắt đầu với Bokeh của chúng tôi .

Tổng quan về Ứng dụng web Thị trường chứng khoán

Ứng dụng web sẽ cung cấp giải pháp cho nghiên cứu điển hình về tài chính được trình bày chi tiết ở trên. Ứng dụng web này cho phép người dùng chọn hai mã cổ phiếu và trực quan hóa các thống kê mô tả của chúng (chẳng hạn như trung bình và độ lệch chuẩn) về cả giá và lợi nhuận, biểu đồ tương quan và biểu đồ xu hướng giá cho các cổ phiếu đã chọn. Tính tương tác được tạo ra bằng cách cho phép lựa chọn kết hợp các mã khác nhau và các khoảng thời gian khác nhau (trên biểu đồ xu hướng giá). Ứng dụng web sẽ trông như thế này:

 

Tạo Dự án Bokeh của Ứng dụng web trên Thị trường Chứng khoán

1. Bạn sẽ cần tạo một thư mục dự án và đặt tên là SelectStock.

2. Mở thư mục dự án và tạo một tệp có tên main.py.

3. Lưu bản sao dữ liệu thị trường chứng khoán trong thư mục dự án dưới dạng “all_stocks_5yr.csv”. 

Lưu một bản sao của các mã cổ phiếu. Tệp ticker.py chứa danh sách các mã. Chỉ có 505 mã cổ phiếu, vì việc bao gồm toàn bộ danh sách trong tập lệnh mã main.py có thể làm cho mã trở nên cồng kềnh. Rất thích hợp để lưu danh sách các mã trong một tệp riêng biệt và gọi từ nó khi cần.

Mở tệp main.py trong các trình soạn thảo mã yêu thích của bạn như Spyder, atom hoặc Sublime Text.

Nhập gói

Nhập mã sau vào tệp main.py. Mã này nhập các gói và mã cần thiết để tạo ứng dụng 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

Đọc và tải dữ liệu 

Viết một hàm để ngăn một mã so sánh với chính 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=[]))

Tạo tiện ích con

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

Các widget cho phép người dùng chọn mã đầu tiên và mã thứ hai để so sánh. Sau khi bạn chọn các mã, Bokeh có thể tạo các ô.

Tạo lô đất

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

Trong đoạn mã này, trước tiên chúng ta xác định các công cụ sẽ đi kèm với các âm mưu. Biểu đồ tương quan là biểu đồ đầu tiên, với hàm figure () xác định chiều rộng = 400 và chiều cao = 350. Biểu đồ tương quan sử dụng các điểm đánh dấu kim cương.

Chúng tôi sử dụng glyph dòng để tạo các biểu đồ chuỗi thời gian cho các mã. Phạm vi của chuỗi thời gian là bằng nhau để cho phép so sánh thích hợp.

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

Trong phần gọi lại, hàm đầu tiên và hàm thứ hai xác định lệnh gọi lại cho mã số 1 và mã số 2, tương ứng.

Hàm update () cập nhật các ô bất cứ khi nào người dùng chọn một tổ hợp mã khác nhau; hàm update_stats () cập nhật số liệu thống kê khi người dùng chọn một bộ mã đánh dấu mới; và, hàm select_change () cập nhật toàn bộ ứng dụng khi người dùng cập nhật các mã.

Thiết lập bố cục

Bước đầu tiên là đặt cho ứng dụng một tiêu đề cung cấp hướng dẫn cho người dùng về cách tương tác với ứng dụng web. Chức năng Div cho phép bạn cung cấp văn bản và xác định chiều cao và chiều rộng, cùng với các tùy chỉnh khác.

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

Bố cục ứng dụng kết hợp cả chức năng cột và hàng.

Đầu tiên, một tiêu đề được đặt ở trên cùng. Hàng chính được xếp chồng bên dưới (hàng chính chứa thống kê mô tả và biểu đồ tương quan). Hàng tiếp theo chứa biểu đồ chuỗi thời gian đầu tiên (đối với mã 1) và hàng cuối cùng chứa biểu đồ chuỗi thời gian cho mã thứ hai.

Khởi tạo ứng dụng

Bước này khởi chạy ứng dụng web khi được gọi trên máy chủ. 

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

Triển khai ứng dụng web

Để kiểm tra ứng dụng web của bạn, bạn có thể triển khai nó bằng máy cục bộ của mình. Để làm điều này, bạn chỉ cần mở Anaconda Prompt hoặc thiết bị đầu cuối mà bạn chọn. Di chuyển vào thư mục chứa tên thư mục dự án 'SelectStock'. Bạn có thể thực hiện việc này bằng cách nhập mã sau:

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

ví dụ: cd "C: \ Users \ ... \ SelectStock"

Nhập mã sau để chạy ứng dụng web:

bokeh serve --show SelectStock

Ngoài ra, bạn có thể điều hướng vào thư mục SelectStock và chạy tệp main.py:

Bokeh serve --show main.py

Thao tác này sẽ khởi chạy ứng dụng web trong trình duyệt web mặc định dưới dạng;

http: // localhost: 5006 / SelectStock hoặc

http: // localhost: 5006 / main

Bạn đang sử dụng Máy chủ Bokeh để chạy và triển khai ứng dụng web của mình.

Bạn cũng có thể triển khai ứng dụng web bằng các dịch vụ như Heroku.

Sự kết luận

Trong hướng dẫn này, bạn đã học được các nguyên tắc cơ bản về việc xây dựng và triển khai các ứng dụng Bokeh của riêng mình trên máy cục bộ của bạn. Hướng dẫn chỉ cho bạn cách kết hợp tất cả những gì bạn đã học được để xây dựng một ứng dụng thực tế, vui nhộn và tương tác sẽ kích thích người dùng.

Cách tốt nhất để xây dựng kỹ năng viết mã của bạn nhanh chóng là xây dựng các dự án như thế này sau khi học một khái niệm hoặc công cụ. Cách tiếp cận thực tế này sẽ đảm bảo rằng bạn hiểu rõ về một công cụ hoặc kỹ năng và có thể cho các nhà tuyển dụng tiềm năng thấy bạn đang làm gì.

Nếu bạn muốn tìm hiểu thêm về Bokeh, bạn có thể đọc cuốn sách này . Hoặc, tốt hơn, hãy thử khóa học Hình ảnh tương tác với Bokeh của DataCamp . Nó cung cấp thông tin chi tiết về Bokeh và cách tạo các âm mưu nâng cao hơn. Bạn có thể đi xa hơn và tìm hiểu cách tạo ứng dụng web Bokeh của riêng mình bằng cách sử dụng dữ liệu thời gian thực. 

Liên kết: https://www.datacamp.com/tutorial/tutorial-bokeh-web-app-deployment

#python #bokeh 

Evolution in Web Design: A Case Study of 25 Years - Prismetric

The term web design simply encompasses a design process related to the front-end design of website that includes writing mark-up. Creative web design has a considerable impact on your perceived business credibility and quality. It taps onto the broader scopes of web development services.

Web designing is identified as a critical factor for the success of websites and eCommerce. The internet has completely changed the way businesses and brands operate. Web design and web development go hand-in-hand and the need for a professional web design and development company, offering a blend of creative designs and user-centric elements at an affordable rate, is growing at a significant rate.

In this blog, we have focused on the different areas of designing a website that covers all the trends, tools, and techniques coming up with time.

Web design
In 2020 itself, the number of smartphone users across the globe stands at 6.95 billion, with experts suggesting a high rise of 17.75 billion by 2024. On the other hand, the percentage of Gen Z web and internet users worldwide is up to 98%. This is not just a huge market but a ginormous one to boost your business and grow your presence online.

Web Design History
At a huge particle physics laboratory, CERN in Switzerland, the son of computer scientist Barner Lee published the first-ever website on August 6, 1991. He is not only the first web designer but also the creator of HTML (HyperText Markup Language). The worldwide web persisted and after two years, the world’s first search engine was born. This was just the beginning.

Evolution of Web Design over the years
With the release of the Internet web browser and Windows 95 in 1995, most trading companies at that time saw innumerable possibilities of instant worldwide information and public sharing of websites to increase their sales. This led to the prospect of eCommerce and worldwide group communications.

The next few years saw a soaring launch of the now-so-famous websites such as Yahoo, Amazon, eBay, Google, and substantially more. In 2004, by the time Facebook was launched, there were more than 50 million websites online.

Then came the era of Google, the ruler of all search engines introducing us to search engine optimization (SEO) and businesses sought their ways to improve their ranks. The world turned more towards mobile web experiences and responsive mobile-friendly web designs became requisite.

Let’s take a deep look at the evolution of illustrious brands to have a profound understanding of web design.

Here is a retrospection of a few widely acclaimed brands over the years.

Netflix
From a simple idea of renting DVDs online to a multi-billion-dollar business, saying that Netflix has come a long way is an understatement. A company that has sent shockwaves across Hollywood in the form of content delivery. Abundantly, Netflix (NFLX) is responsible for the rise in streaming services across 190 countries and meaningful changes in the entertainment industry.

1997-2000

The idea of Netflix was born when Reed Hastings and Marc Randolph decided to rent DVDs by mail. With 925 titles and a pay-per-rental model, Netflix.com debuts the first DVD rental and sales site with all novel features. It offered unlimited rentals without due dates or monthly rental limitations with a personalized movie recommendation system.

Netflix 1997-2000

2001-2005

Announcing its initial public offering (IPO) under the NASDAQ ticker NFLX, Netflix reached over 1 million subscribers in the United States by introducing a profile feature in their influential website design along with a free trial allowing members to create lists and rate their favorite movies. The user experience was quite engaging with the categorization of content, recommendations based on history, search engine, and a queue of movies to watch.

Netflix 2001-2005 -2003

2006-2010

They then unleashed streaming and partnering with electronic brands such as blu-ray, Xbox, and set-top boxes so that users can watch series and films straight away. Later in 2010, they also launched their sophisticated website on mobile devices with its iconic red and black themed background.

Netflix 2006-2010 -2007

2011-2015

In 2013, an eye-tracking test revealed that the users didn’t focus on the details of the movie or show in the existing interface and were perplexed with the flow of information. Hence, the professional web designers simply shifted the text from the right side to the top of the screen. With Daredevil, an audio description feature was also launched for the visually impaired ones.

Netflix 2011-2015

2016-2020

These years, Netflix came with a plethora of new features for their modern website design such as AutoPay, snippets of trailers, recommendations categorized by genre, percentage based on user experience, upcoming shows, top 10 lists, etc. These web application features yielded better results in visual hierarchy and flow of information across the website.

Netflix 2016-2020

2021

With a sleek logo in their iconic red N, timeless black background with a ‘Watch anywhere, Cancel anytime’ the color, the combination, the statement, and the leading ott platform for top video streaming service Netflix has overgrown into a revolutionary lifestyle of Netflix and Chill.

Netflix 2021

Contunue to read: Evolution in Web Design: A Case Study of 25 Years

#web #web-design #web-design-development #web-design-case-study #web-design-history #web-development

whatsapp web-w app web-webs whatsapp »

Through whatsapp web you can easily run whatsapp on your android pc on your android mobile. Just like whatsapp mobile is for android device, whatsapp web is for windows device. Whatsapp web is quite popular which has quite cool features.

whatsapp web

how to use whatsapp web desktop
Whatsapp web is very easy to use. Simply you have to search web.whatsapp.com in your google chrome and click on first result which is the official website of whatsapp web.

As soon as you click, an interface will open in front of you, on which you will see a barcode. Follow the steps given below to use whatsapp web on your desktop

web.whatsapp.com

open your whatsapp on your mobile
You will see 3dots on the right side top inside whatsapp, you have to click
The 3rd option is whatsapp web, you have to click it
Now you have to capture the barcode you see on your desktop through your phone.
Now you can use whatsapp of your android mobile in your desktop
webs whatsapp

note: You can see whatsapp of anyone’s mobile by pointing to the barcode of your desktop. You can also call it whatsapp hack.

Remember that after using whatsapp web, logout it from your desktop. To logout follow the steps given below.

w app web

open your whatsapp on your mobile
You will see 3dots on the right side top inside whatsapp, you have to click
The 3rd option is whatsapp web, you have to click it
You will see the symbol for logout, you have to logout by clicking it.

read more

#whatsapp #whatappweb #https://web.whatsapp.com/ #wsp web #web.whatsapp web #web whatsapp

How to Disable Caching of particular JS/CSS file?

You fixed everything in your website the images and text everything.

You have a pretty good idea about what will appear on your screen and what will not.

But!

There is a good chance when you open your file in the browser to see how the site is doing over there, you will see the really old version rendering at first.

Then Refresh, Refresh and Refresh….

And there it is!

#web-tips-tricks #web-development #web #web-dev-resources #web-tips

Key Points For Joining The Best Web Designing For Better Career Option

The scope of the web designer is increasing day by day, because of high demanding job forms an important part of our society. Web Designing is that the creation and planning of internet sites. it’s a process of developing different sites.

To be an honest web designer you ought to have an entire knowledge of CSS and HTML. These are the important prerequisite for designing an internet site. In today’s world of competition to be amongst at the highest one needs media. Websites are playing a key role in today’s life. Whether in online web desiging course mention shopping or engineering everything is formed online.

These are some of the main benefits which a standard person has made with the utilization of internet sites. many roles are available for web designers than before. Many big companies demand experienced and quality web designers.

Web designing is the creative and innovative part of web development during which the designer is especially concerned with how our website looks. CSS is the heart of the web designing part.

The scope of web designing is increasing day by day. In today’s web and internet world, people want a creative website once they want to access it. Top company web development of India hands over 8-10 lac per annum for an experienced web designer. So it’s a really good field for creating websites.

Web designers have the work of designing whole websites which forms the primary step of web development. After web designing remaining work will start. In today’s growing scenario there are many job opportunities for fresher and experienced candidates.

Web designing is a crucial course that features a lot of scope within the present and also in the future scenario. There are two ways to travel through this course. If you’re curious about taking over a full-time web designer course then we will make a career in media or as advertising agents.

If one is curious about Engineering or in Commerce course but getting to develop the skill in web designing, then you’ll prefer the part-time short course in web designing.

When it comes to selecting a training institute, you will find them in every corner. CETPA Infotech is a reputed training institution and provides training that is industry oriented, updated, innovative and summer training has become a pioneer during this online designing field.

#web designing training in noida #web designing training in delhi #web designing online training #web designing online course #web designing course #web designing training