探索面板框架：构建库存跟踪应用-DEV365 开发者社区

作为一个热情的pythonista，深入参与了Web应用程序开发，我一直在寻找可以提高我的生产力的工具。长期以来，Sparlit一直是一个值得信赖的同伴，以其用户友好性和快速原型功能而受到重视。但是，我最近发现的面板激发了我的好奇心。

在这篇博客文章中，我不会在简化和面板之间进行比较。取而代之的是，我将成为独立探索面板的旅程的指南，并深入研究其独特的优势和应用。通过此探索的结论，您将对小组如何彻底改变您的python Web开发方法有一个全面的看法。

为了完全掌握面板的潜力，我决定使用此框架创建一个库存跟踪应用程序。通过这种动手体验，我的目标是强调小组提供的能力和可能性，从而使您对其在现代网络开发中的作用有价值。

如果您准备好了，我们就可以了！

因为我正在使用Windows，所以我打开CMD并使用pip安装软件包。我想指出您包装的最新版本是1.2.2。面板可与Python 3.8或更高版本一起使用Linux，Windows和Mac。

pip install panel

我们将首先检索库存数据并使用yfinance软件包生成图表。这可以看作是一种热身练习的形式。

import yfinance as yf
import pandas as pd

def get_stock_data(stock_symbol, start_date, end_date, frequency='1d'):

    stock_data = yf.download(
        stock_symbol,
        start=start_date,
        end=end_date,
        interval=frequency,
        progress=False
    )

    return stock_data

上面的代码定义了用于下载指定库存符号的Yahoo Finance数据的Python函数。可以使用参数（例如开始日期，结束日期和数据频率）调用该函数。使用yfinance库，该功能下载了指定库存符号的价格数据，并将其转换为PANDAS数据框架。最后，它返回此数据框。

import yfinance as yf
import pandas as pd
import hvplot.pandas

def get_stock_data(stock_symbol, start_date, end_date, frequency='1d'):

    stock_data = yf.download(
        stock_symbol,
        start=start_date,
        end=end_date,
        interval=frequency,
        progress=False
    )

    return stock_data

def plot_stock_data(stock_symbol, start_date, end_date, frequency, column='Adj Close'):
    stock_data = get_stock_data(stock_symbol, start_date, end_date, frequency)
    stock_data = pd.DataFrame(stock_data)[[column]].rename(columns={column:stock_symbol})
    return stock_data.hvplot(
        title=f"{stock_symbol}",
        ylabel='',
        xlabel=''
    )

上面的代码定义了一个python函数，该函数在指定的日期范围和频率内生成了给定股票符号的股票价格数据的图。

import yfinance as yf
import pandas as pd
import hvplot.pandas

def get_stock_data(stock_symbol, start_date, end_date, frequency='1d'):

    stock_data = yf.download(
        stock_symbol,
        start=start_date,
        end=end_date,
        interval=frequency,
        progress=False
    )

    return stock_data

def plot_stock_data(stock_symbol, start_date, end_date, frequency, column='Adj Close'):
    stock_data = get_stock_data(stock_symbol, start_date, end_date, frequency)
    stock_data = pd.DataFrame(stock_data)[[column]].rename(columns={column:stock_symbol})
    return stock_data.hvplot(
        title=f"{stock_symbol}",
        ylabel='',
        xlabel=''
    )

plot_stock_data(stock_symbol='THYAO.IS', start_date='2023-01-01', end_date='2023-09-06', frequency='1d')

运行上述代码将产生一个互动图，显示从2023/01/01到2023/06/06的每日调整后的土耳其航空公司库存（Thyao.is）的收盘价。您可以在此期间与情节进行互动以探索股票价格数据。

现在，我们可以继续以最简单的形式使用面板。

您可以在任何编辑器或IDE中将面板代码编辑为.py文件，将要渲染的对象标记为.servable()。

import yfinance as yf
import pandas as pd
import hvplot.pandas
import panel as pn

def get_stock_data(stock_symbol, start_date, end_date, frequency='1d'):

    stock_data = yf.download(
        stock_symbol,
        start=start_date,
        end=end_date,
        interval=frequency,
        progress=False
    )

    return stock_data

def plot_stock_data(stock_symbol, start_date, end_date, frequency, column='Adj Close'):
    stock_data = get_stock_data(stock_symbol, start_date, end_date, frequency)
    stock_data = pd.DataFrame(stock_data)[[column]].rename(columns={column:stock_symbol})
    return stock_data.hvplot(
        title=f"{stock_symbol}",
        ylabel='',
        xlabel=''
    )

plot = plot_stock_data(stock_symbol='THYAO.IS', start_date='2023-01-01', end_date='2023-09-06', frequency='1d')

pn.Column(plot).servable()

在上面的代码段中，我们使用plot_stock_data为指定的时间范围和频率创建库存符号“ thyao.is”的图。然后，我们将该图安排在面板列布局中，并使其可用，从而使其显示为基于Web的仪表板。

为了查看并与创建的绘图进行交互，我们需要使用终端中的以下命令运行该应用程序，该命令可以用Visual Studio代码或任何其他代码编辑器写入：

panel serve app.py --show --autoreload

这是此命令的作用：

panel serve：此命令告诉面板为应用程序服务。
app.py：用包含面板应用程序代码的Python脚本的名称替换此此内容。
--show：此选项打开一个新的Web浏览器窗口/选项卡以显示应用程序。
--autoreload：在对代码进行更改时，它可以自动重新加载应用程序。

运行命令后，将在以下URL：http://localhost:5006/app处访问该应用程序。该URL意味着该应用程序正在我们的本地计算机（因此“ Localhost”）上运行，并且可以通过端口5006访问。“/app”路径由我们的面板应用程序的结构确定。

我们可以将小部件添加到应用程序中，以使其更加动态。 “小部件”是Web应用程序的小组件或模块，用于在用户界面中显示单个功能或信息。小部件可以嵌入网站或应用程序中并提供多种功能。

允许用户选择一个日期范围。

import yfinance as yf
import pandas as pd
from datetime import datetime
import hvplot.pandas
import panel as pn

datetime_range_picker = pn.widgets.DatetimeRangePicker(
    name='Datetime Range Picker',
    value=(datetime(2023, 1, 1), datetime(2023, 9, 6))
)

def get_stock_data(stock_symbol, start_date, end_date, frequency='1d'):
    stock_data = yf.download(
        stock_symbol,
        start=start_date,
        end=end_date,
        interval=frequency,
        progress=False
    )
    return stock_data

def plot_stock_data(stock_symbol, start_date, end_date, frequency, column='Adj Close'):
    stock_data = get_stock_data(stock_symbol, start_date, end_date, frequency)
    stock_data = pd.DataFrame(stock_data)[[column]].rename(columns={column: stock_symbol})
    return stock_data.hvplot(
        title=f"{stock_symbol}",
        ylabel='',
        xlabel=''
    )

@pn.depends(datetime_range_picker.param.value)
def update_plot(date_range):
    start_date, end_date = date_range
    plot = plot_stock_data(
        stock_symbol='THYAO.IS',
        start_date=start_date,
        end_date=end_date,
        frequency='1d'
    )
    return plot

app = pn.Column(
    datetime_range_picker,
    update_plot
).servable()

if __name__ == "__main__":
    app.show()

代码片段提供了具有交互式功能的财务数据分析的Python应用程序。它首先使用panel库创建DatetimeRangePicker小部件，从而允许用户选择特定的日期和时间范围。默认日期范围设置为从2023/01/01到2023/09/06。

update_plot函数的定义是对@pn.depends装饰器表示的datetime_range_picker小部件的值参数的依赖性。这意味着每当选定的日期范围更改时，该函数就会自动触发。在update_plot内部，从选定的日期范围提取了开始和终点日期，并调用plot_stock_data功能在指定的日期范围内生成土耳其航空公司股票（'Thyao.is'）的库存数据图。

。

该应用程序是由面板列布局创建的，由datetime_range_picker小部件和update_plot函数组成。通过调用.servable()，组件合并到交互式仪表板中。

条件语句if __name__ == "__main__":确保显示面板应用程序的app.show()方法仅在脚本直接作为主程序运行时才能执行，从而阻止其在导入为模块时运行。

允许用户选择一个符号。

import yfinance as yf
import pandas as pd
from datetime import datetime
import hvplot.pandas
import panel as pn

stock_symbols = ['THYAO.IS', 'GARAN.IS', 'MGROS.IS']

stock_select = pn.widgets.Select(
    name='Select Stock Symbol',
    options=stock_symbols,
    value=stock_symbols[0]
)

datetime_range_picker = pn.widgets.DatetimeRangePicker(
    name='Datetime Range Picker',
    value=(datetime(2023, 1, 1), datetime(2023, 9, 6))
)

def get_stock_data(stock_symbol, start_date, end_date, frequency='1d'):
    stock_data = yf.download(
        stock_symbol,
        start=start_date,
        end=end_date,
        interval=frequency,
        progress=False
    )
    return stock_data

def plot_stock_data(stock_symbol, start_date, end_date, frequency, column='Adj Close'):
    stock_data = get_stock_data(stock_symbol, start_date, end_date, frequency)
    stock_data = pd.DataFrame(stock_data)[[column]].rename(columns={column: stock_symbol})
    return stock_data.hvplot(
        title=f"{stock_symbol}",
        ylabel='',
        xlabel=''
    )

@pn.depends(datetime_range_picker.param.value, stock_select.param.value)
def update_plot(date_range, selected_stock):
    start_date, end_date = date_range
    plot = plot_stock_data(
        stock_symbol=selected_stock,
        start_date=start_date,
        end_date=end_date,
        frequency='1d'
    )
    return plot

app = pn.Column(
    stock_select,
    datetime_range_picker,
    update_plot
).servable()

if __name__ == "__main__":
    app.show()

接下来，该脚本使用stock_select创建下拉菜单小部件。该小部件允许用户从预定义列表中选择其中一个库存符号，并以第一个库存符号作为默认值初始化。

应用程序的核心在于update_plot函数，它是回调。它响应所选股票符号（selected_stock）或所选日期范围（date_range）的变化。使用@pn.depends装饰器，该功能指定其对两个小部件的依赖性：datetime_range_picker和stock_select。

在该功能中，它提取起始和结束的历史可追溯至date_range，然后调用plot_stock_data函数。此功能可获取所选库存符号，日期范围和默认频率的库存数据（每日），最终返回图表，显示股票调整后的收盘价。该函数返回此图，并且每当用户与小部件进行交互时，都会在面板应用中进行更新，从而确保动态和响应式可视化。

主面板应用程序名为应用程序，构成为列布局，具有三个组件：stock_select用于库存符号选择，datetime_range_picker用于日期范围选择，而update_plot则用于所选股票价格数据的交互式图。这些组件共同为用户提供了无缝互动的体验，使他们可以在所选日期范围内探索不同公司的股价数据。

pn.extension是面板提供的功能，允许我们为我们的Web应用程序设置模板或主题。

import yfinance as yf
import pandas as pd
from datetime import datetime
import hvplot.pandas
import panel as pn

pn.extension(template='fast')

stock_symbols = ['THYAO.IS', 'GARAN.IS', 'MGROS.IS']

stock_select = pn.widgets.Select(
    name='Select Stock Symbol',
    options=stock_symbols,
    value=stock_symbols[0]
)

datetime_range_picker = pn.widgets.DatetimeRangePicker(
    name='Datetime Range Picker',
    value=(datetime(2023, 1, 1), datetime(2023, 9, 6))
)

def get_stock_data(stock_symbol, start_date, end_date, frequency='1d'):
    stock_data = yf.download(
        stock_symbol,
        start=start_date,
        end=end_date,
        interval=frequency,
        progress=False
    )
    return stock_data

def plot_stock_data(stock_symbol, start_date, end_date, frequency, column='Adj Close'):
    stock_data = get_stock_data(stock_symbol, start_date, end_date, frequency)
    stock_data = pd.DataFrame(stock_data)[[column]].rename(columns={column: stock_symbol})
    return stock_data.hvplot(
        title=f"{stock_symbol}",
        ylabel='',
        xlabel=''
    )

@pn.depends(datetime_range_picker.param.value, stock_select.param.value)
def update_plot(date_range, selected_stock):
    start_date, end_date = date_range
    plot = plot_stock_data(
        stock_symbol=selected_stock,
        start_date=start_date,
        end_date=end_date,
        frequency='1d'
    )
    return plot

app = pn.Column(
    stock_select,
    datetime_range_picker,
    update_plot
).servable()

if __name__ == "__main__":
    app.show()

通过使用pn.extension，我们可以轻松地增强基于面板的Web应用程序的视觉吸引力和功能。

我们还可以永久将我们的Web应用程序切换到Dark Mode。

import yfinance as yf
import pandas as pd
from datetime import datetime
import hvplot.pandas
import panel as pn

pn.config.theme = 'dark'
pn.extension(template='fast')

stock_symbols = ['THYAO.IS', 'GARAN.IS', 'MGROS.IS']

stock_select = pn.widgets.Select(
    name='Select Stock Symbol',
    options=stock_symbols,
    value=stock_symbols[0]
)

datetime_range_picker = pn.widgets.DatetimeRangePicker(
    name='Datetime Range Picker',
    value=(datetime(2023, 1, 1), datetime(2023, 9, 6))
)

def get_stock_data(stock_symbol, start_date, end_date, frequency='1d'):
    stock_data = yf.download(
        stock_symbol,
        start=start_date,
        end=end_date,
        interval=frequency,
        progress=False
    )
    return stock_data

def plot_stock_data(stock_symbol, start_date, end_date, frequency, column='Adj Close'):
    stock_data = get_stock_data(stock_symbol, start_date, end_date, frequency)
    stock_data = pd.DataFrame(stock_data)[[column]].rename(columns={column: stock_symbol})
    return stock_data.hvplot(
        title=f"{stock_symbol}",
        ylabel='',
        xlabel=''
    )

@pn.depends(datetime_range_picker.param.value, stock_select.param.value)
def update_plot(date_range, selected_stock):
    start_date, end_date = date_range
    plot = plot_stock_data(
        stock_symbol=selected_stock,
        start_date=start_date,
        end_date=end_date,
        frequency='1d'
    )
    return plot

app = pn.Column(
    stock_select,
    datetime_range_picker,
    update_plot
).servable()

if __name__ == "__main__":
    app.show()

语句pn.config.theme = 'dark'是软件开发中面板框架中使用的配置设置。应用此设置时，它指示框架采用黑暗主题或外观。实际上，这意味着使用面板框架构建的应用程序或网站的用户界面（UI）将具有深色和设计元素，而不是轻度或明亮的美学。这个黑暗主题在明亮的UI可能会分散注意力或不舒服的弱光环境中特别有用，或者对于那些只喜欢其应用程序或网站的视觉风格的用户。

我们可以按以下方式并排排列小部件和图形。

import yfinance as yf
import pandas as pd
from datetime import datetime
import hvplot.pandas
import panel as pn

pn.config.theme = 'dark'
pn.extension(template='fast')

stock_symbols = ['THYAO.IS', 'GARAN.IS', 'MGROS.IS']

stock_select = pn.widgets.Select(
    name='Select Stock Symbol',
    options=stock_symbols,
    value=stock_symbols[0]
)

datetime_range_picker = pn.widgets.DatetimeRangePicker(
    name='Datetime Range Picker',
    value=(datetime(2023, 1, 1), datetime(2023, 9, 6))
)

def get_stock_data(stock_symbol, start_date, end_date, frequency='1d'):
    stock_data = yf.download(
        stock_symbol,
        start=start_date,
        end=end_date,
        interval=frequency,
        progress=False
    )
    return stock_data

def plot_stock_data(stock_symbol, start_date, end_date, frequency, column='Adj Close'):
    stock_data = get_stock_data(stock_symbol, start_date, end_date, frequency)
    stock_data = pd.DataFrame(stock_data)[[column]].rename(columns={column: stock_symbol})
    return stock_data.hvplot(
        title=f"{stock_symbol}",
        ylabel='',
        xlabel=''
    )

@pn.depends(datetime_range_picker.param.value, stock_select.param.value)
def update_plot(date_range, selected_stock):
    start_date, end_date = date_range
    plot = plot_stock_data(
        stock_symbol=selected_stock,
        start_date=start_date,
        end_date=end_date,
        frequency='1d'
    )
    return plot

app_layout = pn.Row(
    pn.Column(
        stock_select,
        datetime_range_picker,
    ),
    update_plot
)

app = app_layout.servable()

if __name__ == "__main__":
    app.show()

在上面的代码段中，应用程序布局分为两个关键部分。第一部分是“用户输入部分”，该部分封装在pn.Row中的pn.Column中。在此列中，有两个小部件：stock_select和datetime_range_picker。这些小部件可能使用户可以选择特定的股票或数据系列并分别指定日期或时间范围。第二部分（表示为update_plot）负责基于用户与输入窗口小部件的用户交互渲染和动态更新数据可视化。最后，app_layout.servable()方法调用创建了实际的Web应用程序，为部署做准备并为最终用户服务。

让我们通过增加图形的高度和宽度并对其进行一些较小的设计调整来完成我们的Web应用程序。

import yfinance as yf
import pandas as pd
from datetime import datetime
import hvplot.pandas
import panel as pn

pn.config.theme = 'dark'
pn.extension(template='fast')

stock_symbols = ['THYAO.IS', 'GARAN.IS', 'MGROS.IS']

stock_select = pn.widgets.Select(
    name='Select Stock Symbol',
    options=stock_symbols,
    value=stock_symbols[0]
)

datetime_range_picker = pn.widgets.DatetimeRangePicker(
    name='Datetime Range Picker',
    value=(datetime(2023, 1, 1), datetime(2023, 9, 6))
)

def get_stock_data(stock_symbol, start_date, end_date, frequency='1d'):
    stock_data = yf.download(
        stock_symbol,
        start=start_date,
        end=end_date,
        interval=frequency,
        progress=False
    )
    return stock_data

def plot_stock_data(stock_symbol, start_date, end_date, frequency, column='Adj Close'):
    stock_data = get_stock_data(stock_symbol, start_date, end_date, frequency)
    stock_data = pd.DataFrame(stock_data)[[column]].rename(columns={column: stock_symbol})
    return stock_data.hvplot(
        title=f"{stock_symbol}",
        ylabel='',
        xlabel='',
        width=1500,
        height=800,
        line_color='orange',
        grid=True
    )

@pn.depends(datetime_range_picker.param.value, stock_select.param.value)
def update_plot(date_range, selected_stock):
    start_date, end_date = date_range
    plot = plot_stock_data(
        stock_symbol=selected_stock,
        start_date=start_date,
        end_date=end_date,
        frequency='1d'
    )
    return plot

app_layout = pn.Row(
    pn.Column(
        stock_select,
        datetime_range_picker,
    ),
    update_plot,
    height=800
)

app = app_layout.servable()

if __name__ == "__main__":
    app.show()

我们在plot_stock_data函数中提到了上面提到的更改。

我们可以将标题从“窗格应用程序”修改为左上角的“库存跟踪应用”。

总而言之，我进入小组框架世界的旅程令人兴奋。我不仅写了一篇博客文章，介绍了此框架，而且还通过创建Web应用程序将其付诸实践。我对面板的想法绝大多数是积极的 - 对网络开发的未来有很大的希望。

将其与该空间中的另一个流行选择的简化进行了比较，我发现面板与Web开发生态系统提供了更紧密的一致性。这并不意味着我低估了简化。相反，它展示了面板的多功能性和适应性。

当我迈出了这一框架的第一步时，我对它的可能性感到非常兴奋。展望未来，我有雄心勃勃的计划，计划使用面板开发和共享专业级应用程序。旅程刚刚开始，我迫不及待地想看看小组将我带到网络开发世界中的地方。在我继续探索面板框架的潜力时，请继续关注更多令人兴奋的更新和发现。

罗马不是一天建造的。