Jupyter 使用 & Electron Example

前言

如果有一些数据统计分析可视化的诉求，但又不需要提供商业化平台，Jupyter 生态圈提供 Notebook，一款非常实用工具。并且近期因频繁接触端侧一些事务，对于当下 PC 侧跨端应用的开发构建，简单了解一下 Electron

Jupyter Notebook

Install

Python

许久不用 Python，加上环境里面一些限制，在 Python3.9 的安装中遇到各种问题，最终多数是因为没有 root 权限导致，一再降版本至 3.6 安装成功，但是还是因为 root 权限导致后续 Notebook 使用存在一些问题。最终切换到 root 用户基本全量解决，这其中：

• 在使用 virtualenv 尝试从 Python3.9 Create 新环境时建议将 virtualenv 升级到最新版，如果 virtualenv 版本过于陈旧，会导致没发切成功
• virtualenv new 的新环境默认时不会附加原环境中 pip install 的 package ，如果期望把原环境这些安装也带出来，可以：

virtualenv --system-site-packages new_python -p ~/my_old/python/bin/python3.9 

Jupyter & Notebook

Python3 的环境安装完成后，直接可以

pip install jupyter notebook

安装完成后，建议先设置配置文件

# 执行后在用户目录下生成了 ~/.jupyter/jupyter_notebook_config.py
jupyter notebook --generate-config

编辑 jupyter_notebook_config.py 设置 ：

# Notebook 文件目录等
c.NotebookApp.notebook_dir = 'your_notebook_home_dir'

# 访问域设置
c.NotebookApp.allow_origin = '*'

如果不设置用户登陆密码，Jupyter 启动后会有一个 登陆 Token，用户凭借次密钥前台登陆

$ jupyter notebook password
Enter password:  # 输入密码
Verify password: # 二次输入
[NotebookPasswordApp] Wrote hashed password to /root/.jupyter/jupyter_notebook_config.json 
# 密码设置成功，写入了配置文件中

启动 Notebook

# 因为是 root 用户启动的，所以需添加 --allow-root，不推 root 开放，特别是在外网能够访问时
jupyter notebook --no-browser --ip=0.0.0.0 --port=8888 --allow-root

在 python 3.6 环境下安装后启动，会有 ModuleNotFoundError: No module named ‘pysqlite2’ 错误，如果想要启动，得对 notebook 中代码做一个修改，调整 ～/your_virtualenv/lib/python3.6/site-packages/notebook/services/sessions/sessionmanager.py，

类似上文，将 pysqlite2 -> pysqlite3， 且 pip install pysqlite3，截图时已修改过后的文件，再行启动即可

Notebook 使用

按上文步骤启动后，Web 访问，输入设定密码后即可登录

此处的文件目录，即为先前设定的 Notebook 目录，后续文件均存储在此目录下

执行系统命令

选定使用 Python，前台编码时如有依赖缺少，需执行系统命令，譬如依赖安装

# 在命令前添加 ! 号
!pip install matplotlib
!echo $PATH

First Plot

import matplotlib.pyplot as plt
import numpy as np


x = np.linspace(0, 3*np.pi, 500)
plt.plot(x, np.sin(x**2))
plt.title('first plot')

Widgets

使用多数需要用户调整数据统计参数，生态中提供了 Widgets 框架来做一些常见交互。上文的示例做升级调整

import matplotlib.pyplot as plt
import numpy as np
from ipywidgets import interact

@interact
def run(p=[1.0, 2.0, 3.0, 4.0]):
    x = np.linspace(0, p*np.pi, 500)
    plt.plot(x, np.sin(x**2))
    plt.title('first plot')

绘制时序图

Code

import pendulum
import pandas as pd
import matplotlib.pyplot as plt
import matplotlib.dates as md
from dateutil import parser


def plot_line():
    source_data1 = [{'date': '2022-09-14T00:00:00+08:00', 'count': 30}]
    source_data2 = [{'date': '2022-09-14T00:00:00+08:00', 'count': 18}]
    df1 = pd.DataFrame(source_data1)
    df2 = pd.DataFrame(source_data2)
    times = [parser.parse(pendulum.parse(date).to_datetime_string()) for date in df1['date'].values]  # 打包时间序列
    plt.rcParams['figure.figsize'] = (16.0, 5.0)
    ax = plt.gca()
    plt.gcf().autofmt_xdate()  # 自适应 x 轴日期显示排列
    ax.xaxis.set_major_formatter(md.DateFormatter('%Y-%m-%d')) // 设定 x 周日期格式化
    plt.plot(times, df1['count'].values, label='line_one')
    plt.plot(times, df2['count'].values, label='line_two')
    ax.legend()
    plt.title('time line graph')
    plt.show()

plot_line()

日期处理时候要注意，只能接受 datetime.datetime 结构，对于 '2022-09-14T00:00:00+08:00' 这种格式日期，pendulum 可以直接解析

Dashboard Sharing – voila

如果希望把构建的 Notebooks 作为一个交互式的 Website 提供给他人使用，可以通过 voila 插件

pip install voila

要重启一下 jupyter notebook server
刷新 notebook 后出现插件按钮

点击后直接会跳转到对应 notebook 的分享网页，实际首页 http://your_domain:8888/voila

Electron

作为一个构建桌面端应用的框架，更详细的介绍可以移步 Electron 官网了解。
结合一个网上示例，多一些感性的了解。

• 参考：https://cpury.com/4808.html
• 原码：https://github.com/pury/electron_demo
• 本地环境：MacOS 12.5.1
• npm: 8.19.2
• node: v18.10.0
• 修改套壳地址为 baidu

npm install
npm start

启动后效果

本地安装 yarn 失败，没发大包，查看文档可以用 forge 打包应用

npm install --save-dev @electron-forge/cli
npx electron-forge import

执行完上文命令，demo 工程中 package.json 会被修改，添加了 make，且 start 的启动也被修改成 electron-forge start

npm run make

应用报在 ./out 此路径下，外层的目录有压缩包