H2O Wave入门教程：从零开始构建Hello World应用-CSDN博客

本文链接：https://blog.csdn.net/gitblog_01089/article/details/148549189

H2O Wave入门教程：从零开始构建Hello World应用

wave Realtime Web Apps and Dashboards for Python and R 项目地址: https://gitcode.com/gh_mirrors/wav/wave

前言

H2O Wave是一个现代化的Web应用框架，专为数据科学家和开发者设计，用于快速构建实时、交互式的Web应用。本教程将带你完成第一个Wave应用的创建过程，通过"Hello World"示例理解Wave的核心概念。

环境准备

1. 启动Wave服务器

首先需要下载并启动Wave服务器。解压下载包后，在终端执行相应命令：

# Unix/MacOS系统
./waved

# Windows系统
waved.exe

启动成功后，你将看到类似如下的输出，表示服务器已在本地10101端口运行：

2020/10/27 16:16:34 # 
2020/10/27 16:16:34 # ┌─────────────────────────┐
2020/10/27 16:16:34 # │  ┌    ┌ ┌──┐ ┌  ┌ ┌──┐  │ H2O Wave
2020/10/27 16:16:34 # │  │ ┌──┘ │──│ │  │ └┐    │ (version) (build)
2020/10/27 16:16:34 # │  └─┘    ┘  ┘ └──┘  └─┘  │ © 2020 H2O.ai, Inc.
2020/10/27 16:16:34 # └─────────────────────────┘

重要提示：运行任何Wave应用时，Wave服务器必须保持运行状态，因为它是浏览器与Wave应用之间的桥梁。

2. 创建工作目录

创建一个新目录作为项目工作区，并设置Python虚拟环境：

# Unix/MacOS
python3 -m venv venv
source venv/bin/activate

# Windows
python -m venv venv
.\venv\Scripts\activate

安装Wave Python驱动：

pip install h2o-wave

编写第一个Wave应用

创建hello_world.py文件，内容如下：

from h2o_wave import site, ui

# 获取/hello路由对应的页面引用
page = site['/hello']

# 向页面添加一个Markdown卡片
page['quote'] = ui.markdown_card(
    box='1 1 2 2',  # 卡片位置和大小
    title='Hello World',
    content='"The Internet? Is that thing still around?" - *Homer Simpson*',
)

# 保存页面变更
page.save()

运行与查看

执行脚本：

python hello_world.py

然后在浏览器中访问http://localhost:10101/hello，你将看到一个显示荷马·辛普森名言的卡片。

代码解析

让我们深入理解这个简单程序的工作原理：

页面引用获取：
```
page = site['/hello']
```
site对象代表Wave服务器上的所有页面集合，通过类似字典的方式访问特定路由的页面。
卡片添加：
```
page['quote'] = ui.markdown_card(...)
```
页面(page)是卡片的容器。这里我们添加了一个Markdown卡片，包含标题和内容。
- box='1 1 2 2'定义了卡片的位置和大小(列1，行1，宽2单位，高2单位)
- 内容支持Markdown格式
变更保存：
```
page.save()
```
保存操作会将变更广播给所有连接的浏览器。

实时编辑体验

Wave的一个强大特性是支持实时编辑。我们可以通过Python REPL交互式地修改页面：

from h2o_wave import site
page = site['/hello']
quote = page['quote']

# 修改标题
quote.title = 'Hello Again!'
page.save()

# 修改内容
quote.content = "D'oh! - *Homer Simpson*"
page.save()

每次保存后，浏览器中的内容都会实时更新，无需刷新页面。