Jupyter Notebook 是什么

从开发者来说，Jupyter Notebook是一个前后端都有的现成项目，用于交互开发和展示数据科学项目，写python的算法开发者们用的多。

notebook 将代码及其输出集成到单个文档中，该文档结合了可视化、叙述性文本、数学公式和其他富媒体。
它是一个单独的文档，您可以在其中运行代码、显示输出，还可以添加解释、公式、图表，并使您的工作更加透明、可理解、可重复和可共享。

现在基本使用最新的JupyterLab了，包含notebook的功能，是升级版，单独的notebook只是一个单独的编辑页面，JupyterLab有资源管理，插件等增强的功能。

前提条件

• 编程基础，前端开发者 或 python开发者 上手会更快
• nodejs开发环境
• python开发环境
• anaconda(推荐，安装了这个内置了好几百个库，包括Jupyter Notebook 和 JupyterLab)

插件开发流程

原文链接

1. 创建环境

   conda create -n jupyterlab-ext --override-channels --strict-channel-priority -c conda-forge -c nodefaults jupyterlab=3 cookiecutter nodejs jupyter-packaging git
   

2. 激活环境

   conda activate jupyterlab-ext
   

3. 生成项目

   cookiecutter https://github.com/jupyterlab/extension-cookiecutter-ts
   

4. 安装依赖 前端安装好之后

   pip install -ve . 
   // 运行以下命令来安装初始项目依赖项，并将扩展安装到JupyterLab环境中。
   // 上面的命令将扩展的前端部分复制到JupyterLab中。我们可以在每次进行更改时再次运行此pip安装命令，以将更改复制到JupyterLab中。 
   // 或者直接链接过去
   jupyter labextension develop --overwrite . 
   

5. 运行JupyterLab

   jupyter lab // 注意，在哪个目录运行，就会加载哪个目录的文件
   

   对前端来说，jlpm 是JupyterLab内置的类似yarn的东西。
   写完代码后，要生效，就立马运行 npm run build，当然可以运行 watch 命令。

6. 发布开发的插件
   全部的扩展开发接口文档

Widget

Widget 可以理解为所有组件的父类，如果要自定义一个视图或者按钮，包括项目中的一些视图按钮等，都是继承这个类，有一些公用的方法。比如可以通过 widget.children() 返回子节点，同样是 Widget 类型。

import { Widget } from '@lumino/widgets';

widget trackers

通常，扩展需要与其他扩展创建的文档和活动交互。例如，扩展可能想要将一些文本注入到笔记本单元格中，或设置自定义快捷键映射，或关闭特定类型的所有文档。这样的操作通常是由widget trackers完成的。扩展模块在WidgetTracker中跟踪其活动的实例，然后将其作为token提供，以便其他扩展模块可以请求它们。
比如INotebookTracker ，就可以跟踪notebook的操作，增删等。

commands

可以理解为命令，就是一些封装好的功能，在某个场景触发，然后执行某些操作，比较右键执行某个操作，或者在菜单点击，实现某个操作。比如新建一个tab页，打开terminal等。

palette

可使用快捷键盘 ctrl + shift + c 打开，或者菜单 view => active command palette 打开，就是一堆commands的集合。

功能1 - 添加一个 command

import {JupyterFrontEnd,JupyterFrontEndPlugin,
} from '@jupyterlab/application';
import { ICommandPalette } from '@jupyterlab/apputils';
import { Widget } from '@lumino/widgets';const extension: JupyterFrontEndPlugin = {id: 'widgets-example',autoStart: true,requires: [ICommandPalette],activate: (app: JupyterFrontEnd, palette: ICommandPalette) => {const { commands, shell } = app;const command = 'widgets:open-tab';// 使用command打开一个tab页commands.addCommand(command, {label: 'Open a Tab Widget',caption: 'Open the Widgets Example Tab',execute: () => {const widget = new ExampleWidget();shell.add(widget, 'main');},});palette.addItem({ command, category: 'Extension Examples' });},
};export default extension;class ExampleWidget extends Widget {constructor() {super();this.addClass('jp-example-view');this.id = 'simple-widget-example';// tab页的标题this.title.label = 'Widget Example View';this.title.closable = true;}
}

功能2 - 增加菜单

1. 在package.json里，增加 schemaDir字段,指向我们定义的设置目录

  "jupyterlab": {"extension": true,"outputDir": "jupyterlab_examples_main_menu/labextension","schemaDir": "schema"}

2. 项目新建schema目录(如果没有)，新建 plugin.json，增加内容，通过id识别是新建菜单，还是用原来的菜单，如果是在 文件下 增加 id 就是 jp-mainmenu-file，详情内容看官网

{"title": "Main Menu Example","description": "Main Menu Example settings.","jupyter.lab.menus": {"main": [{"id": "jp-mainmenu-example-menu", "label": "Main Menu Example","rank": 80,"items": [{"command": "jlab-examples:main-menu","args": {"origin": "from the menu"}}]}]},"additionalProperties": false,"type": "object"
}

3. 配置 command

import {JupyterFrontEnd,JupyterFrontEndPlugin,
} from '@jupyterlab/application';import { ICommandPalette } from '@jupyterlab/apputils';const extension: JupyterFrontEndPlugin = {id: 'main-menu',autoStart: true,requires: [ICommandPalette],activate: (app: JupyterFrontEnd, palette: ICommandPalette) => {const { commands } = app;const command = 'jlab-examples:main-menu';commands.addCommand(command, {label: 'Execute jlab-examples:main-menu Command',caption: 'Execute jlab-examples:main-menu Command',execute: (args: any) => {console.log(`jlab-examples:main-menu has been called ${args['origin']}.`);window.alert(`jlab-examples:main-menu has been called ${args['origin']}.`);},});const category = 'Extension Examples';palette.addItem({command,category,args: { origin: 'from the palette' },});},
};export default extension;

功能3 - 增加tab，左右中间

import { Widget} from '@lumino/widgets';class ExampleWidget extends Widget {constructor() {super();this.addClass('jp-example-view');this.id = 'simple-widget-example';this.title.label = 'halo';this.title.closable = true;}
}// 往右边增加内容
const widget = new ExampleWidget();
app.shell.add(widget, 'right');

功能3 - 使用react

首先，自行安装好 react ，如下然后就可以当做正常widget使用了

import React from "react"
import { ReactWidget} from '@jupyterlab/apputils';
class MyComponent extends React.Component {click = (): void => {console.log(1111)}render(): React.ReactNode {return (
this.click}>hello
)}
}const myWidget: Widget = ReactWidget.create();

常用各个组件库、基本的使用方法、注释

import React from "react"
import {ILayoutRestorer,JupyterFrontEnd,JupyterFrontEndPlugin,ILabStatus // IConnectionLost,// IInfo// IRouter
} from '@jupyterlab/application';
import { Widget} from '@lumino/widgets';// import { requestAPI } from './handler';
import {ICommandPalette,ISplashScreen, IThemeManager, IToolbarWidgetRegistry,MainAreaWidget,WidgetTracker,ReactWidget
} from '@jupyterlab/apputils';import {IDocumentManager} from "@jupyterlab/docmanager"
// @jupyterlab/filebrowser已废弃，更新为@jupyterlab/docmanager
import {IFileBrowserFactory} from "@jupyterlab/filebrowser"
import {IEditorTracker} from "@jupyterlab/fileeditor"
import {IHTMLViewerTracker} from "@jupyterlab/htmlviewer"
import {ILauncher} from "@jupyterlab/launcher"
import {IMainMenu} from "@jupyterlab/mainmenu"
import {ISettingEditorTracker} from "@jupyterlab/settingeditor"
import {ISettingRegistry} from "@jupyterlab/settingregistry"
import {IStateDB} from "@jupyterlab/statedb"
import {IStatusBar} from "@jupyterlab/statusbar"
import {ITerminalTracker} from "@jupyterlab/terminal"
import {ITooltipManager} from "@jupyterlab/tooltip"
import {INotebookTools, INotebookTracker, INotebookWidgetFactory} from "@jupyterlab/notebook"interface APODResponse {copyright: string;date: string;explanation: string;media_type: 'video' | 'image';title: string;url: string;
}/*** Initialization data for the cybercube extension.*/
const plugin: JupyterFrontEndPlugin = {id: 'cybercube:plugin',autoStart: true,requires: [ICommandPalette,ISplashScreen,IThemeManager,IToolbarWidgetRegistry,IDocumentManager,IFileBrowserFactory,IEditorTracker,IHTMLViewerTracker,ILauncher,IMainMenu,INotebookTools,INotebookTracker,INotebookWidgetFactory,ISettingEditorTracker,ISettingRegistry,IStateDB,IStatusBar,ITerminalTracker,ITooltipManager,ILabStatus],optional: [ILayoutRestorer],activate
};export default plugin;// @ts-ignore
// @ts-ignore
function activate(app: JupyterFrontEnd,palette: ICommandPalette,splashScreen: ISplashScreen,themeManager: IThemeManager,// 工具栏小部件的注册表,如果要从数据定义(例如存储在设置中)动态生成工具栏，则需要此选项toolbarWidgetRegistry: IToolbarWidgetRegistry,// 操作文件系统，文件增删documentManager: IDocumentManager,// 可以自定义文件浏览器fileBrowserFactory: IFileBrowserFactory,// 如果希望能够循环访问由应用程序创建的文件编辑器并与之交互，请使用此选项editorTracker: IEditorTracker,// 处理HTML documents的交互htmlViewerTracker: IHTMLViewerTracker,// 添加东西到launcherlauncher: ILauncher,mainMenu: IMainMenu,// 在右侧边栏中notebook工具面板的服务。使用此选项可将您自己的功能添加到面板。notebookTools: INotebookTools,// 一种用于notebook的部件跟踪器。如果您希望能够循环访问应用程序创建的notebook并与之交互，请使用此选项。notebookTracker: INotebookTracker,// @ts-ignore 可以自行创建notebooknotebookWidgetFactory: INotebookWidgetFactory,// 处理编辑器设置settingEditorTracker:ISettingEditorTracker,// jupyterlab 设置系统，可以存储应用的存储设置settingRegistry: ISettingRegistry,// jupyterlab的状态数据库stateDB: IStateDB,// 状态栏的操作statusBar: IStatusBar,// 控制台的操作terminalTracker: ITerminalTracker,tooltipManager: ITooltipManager,labStatus: ILabStatus,restorer: ILayoutRestorer | null
) {console.log('JupyterLab extension jupyterlab_apod is activated!');// Declare a widget variablelet widget: any;// console.log(app);// console.log(splashScreen);// console.log(themeManager);// splashScreen.show(true)// toolbarWidgetRegistry.createWidget// console.log(documentManager)/*** @title 添加普通节点到 文件浏览器 toolbar*/// const t = fileBrowserFactory.defaultBrowser.toolbar;// const w: any = new Widget();// w.node.textContent = "haha"// t.addItem("haha", w);/*** @title 添加react节点到 文件浏览器 toolbar*/// const t = fileBrowserFactory.defaultBrowser.toolbar;// class MyComponent extends React.Component {//   click = (): void => {//     console.log(1111)//   }//   render(): React.ReactNode {//     return (//       
//         hello//       
//     )//   }// }// // @ts-ignore// const myWidget: Widget = ReactWidget.create();// // @ts-ignore// t.addItem("ff", myWidget);/*** @title fileBrowserFactory*/// const fb = fileBrowserFactory.createFileBrowser("custom-browser")// console.log(fb)// ----- fileBrowserFactory ------// 默认文件浏览器的dom// console.log(fileBrowserFactory.defaultBrowser.node)// 默认文件浏览器上边那三个按钮// console.log(fileBrowserFactory.defaultBrowser.toolbar.node)// 文件列表的dom// console.log(fileBrowserFactory.defaultBrowser.listing.node)// 文件列表上边的path的dom// console.log(fileBrowserFactory.defaultBrowser.crumbs.node)// ----- fileBrowserFactory ------// console.log(editorTracker);// console.log(htmlViewerTracker);// console.log(launcher);// console.log(notebookTools);// console.log(notebookTracker);// console.log(notebookWidgetFactory);// console.log(settingEditorTracker);// console.log(settingEditorTracker.currentWidget);// console.log(stateDB);// stateDB.save("myid", "cube").then(r => {//   console.log(r);// }).catch(e => {//   console.log(e);// })// stateDB.fetch("myid").then(r => {//   console.log(r);// })// console.log(terminalTracker);// terminalTracker.forEach(e => {//   console.log(e);// })// console.log(tooltipManager.invoke());// 自定义添加右键菜单，根据css选择器匹配在什么地方出现，甚至可以自定义右键菜单// console.log(app.contextMenu)// console.log(app)// 可以添加widgets到应用中// A top area for things like top-level toolbars and information.//  A menu area for top-level menus, which is collapsed into the top area in multiple-document mode and put below it in single-document mode.//  left and right sidebar areas for collapsible content.//  A main work area for user activity.//  A down area for information content; like log console, contextual help.//  A bottom area for things like status bars.//  A header area for custom elements.// console.log(app.shell.add());// 添加快捷键// Accel 就是 ctrl// app.commands.addKeyBinding({//   command: commandID,//   args: {},//   keys: ['Accel T'],//   selector: '.jp-Notebook'// });// launcher.add({//   command: 'apod:open',//   category: 'Tutorial',//   rank: 0// });// setTimeout(() => {//   app.commands//     .execute('terminal:create-new')//     .then((terminal: any) => {//       app.shell.add(terminal, 'right');//     });// }, 2000)const command: string = 'open-picture';/*** @title 菜单操作，暂没作用*/// console.log(mainMenu.addMenu);/// @ts-ignore// const menu = new Menu({ "commands": app.commands });// menu.addItem({//   command,//   args: {},// });// mainMenu.addMenu(menu as any, { rank: 40 });// 成功了，可以跑，在文件菜单下增加子项mainMenu.fileMenu.addGroup([ {command}], 40);/*** @title 状态栏的操作*/// console.log(statusBar);const statusWidget = new Widget();labStatus.busySignal.connect(() => {statusWidget.node.textContent = labStatus.isBusy ? 'Busy' : 'Idle';});statusBar.registerStatusItem('lab-status', {align: 'middle',// @ts-ignoreitem: statusWidget});// console.log(notebookTracker)app.commands.addCommand(command, {// command 的标题label: 'Astronomy Picture',execute: () => {if (!widget || widget.isDisposed) {const content: any = new APODWidget();widget = new MainAreaWidget({content});widget.id = 'apod-jupyterlab';// 页面tab的标题widget.title.label = '太空图片';widget.title.closable = true;}if (!tracker.has(widget)) {// Track the state of the widget for later restorationtracker.add(widget);}if (!widget.isAttached) {// Attach the widget to the main work area if it's not thereapp.shell.add(widget, 'main');}widget.content.updateAPODImage();// Activate the widgetapp.shell.activateById(widget.id);}});// Add the command to the palette.palette.addItem({ command, category: 'Tutorial' });// Track and restore the widget statelet tracker: any = new WidgetTracker({namespace: 'apod'});if (restorer) {restorer.restore(tracker, {command,name: () => 'apod'});}
}class APODWidget extends Widget {/*** Construct a new APOD widget.*/constructor() {super();this.addClass('my-apodWidget');// Add an image element to the panelthis.img = document.createElement('img');this.node.appendChild(this.img);// Add a summary element to the panelthis.summary = document.createElement('p');this.node.appendChild(this.summary);}/*** The image element associated with the widget.*/readonly img: HTMLImageElement;/*** The summary text element associated with the widget.*/readonly summary: HTMLParagraphElement;/*** Handle update requests for the widget.*/async updateAPODImage(): Promise {const response = await fetch(`https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY&date=${this.randomDate()}`);if (!response.ok) {const data = await response.json();if (data.error) {this.summary.innerText = data.error.message;} else {this.summary.innerText = response.statusText;}return;}const data = await response.json() as APODResponse;if (data.media_type === 'image') {// Populate the imagethis.img.src = data.url;this.img.title = data.title;this.summary.innerText = data.title;if (data.copyright) {this.summary.innerText += ` (Copyright ${data.copyright})`;}} else {this.summary.innerText = 'Random APOD fetched was not an image.';}}/*** Get a random date string in YYYY-MM-DD format.*/randomDate(): string {const start = new Date(2010, 1, 1);const end = new Date();const randomDate = new Date(start.getTime() + Math.random()*(end.getTime() - start.getTime()));return randomDate.toISOString().slice(0, 10);}
}

相关链接

• How to Use Jupyter Notebook: A Beginner’s Tutorial
• 开发者指南
• jupyter-notebook 官网
• Jupyter Notebook介绍、安装及使用教程
• Anaconda介绍、安装及使用教程
• anaconda官网
• 插件生成 extension-cookiecutter-ts
• JupyterLab API Documentation
• 扩展例子包
• lumino
• conda-forge
• 技术论坛 Jupyter Discourse Forum