一、PPTist介绍
1.1 PPTist简介
一个基于 Vue3.x + TypeScript 的在线演示文稿（幻灯片）应用，还原了大部分 Office PowerPoint 常用功能，支持 文字、图片、形状、线条、图表、表格、视频、音频、公式 几种最常用的元素类型，每一种元素都拥有高度可编辑能力，同时支持丰富的快捷键和右键菜单，力求还原桌面应用级体验。支持导出本地 PPTX 文件，支持移动端基础编辑和预览。您可以在此基础上搭建自己的在线幻灯片应用。
1.2 PPTist功能
基础功能：
- 历史记录（撤销、重做）
- 快捷键
- 右键菜单
- 导出本地文件（PPTX、JSON、图片、PDF）
- 导入导出特有 .pptist 文件
- 打印
其余功能：
- 幻灯片页面编辑、幻灯片元素编辑、文字、图片、形状、线条、图表（柱状图、条形图、折线图、面积图、散点图、饼图、环形图）、表格、视频、音频、公式、幻灯片放映、移动端
1.3 PPTist使用场景
学校教育：教师可以使用PPTist创建有吸引力的在线演示文稿，以提高学生的注意力和参与度。学生也可以使用PPTist创建演示文稿来展示他们的研究和项目。
公司培训：培训师可以使用PPTist创建交互式演示文稿，以便员工更好地理解培训内容。演示文稿可以包含多媒体元素、动画效果和互动问题。
产品展示：企业可以使用PPTist创建漂亮的幻灯片来展示他们的产品和服务。演示文稿可以包含产品图片、说明和示例。
演讲比赛：演讲者可以使用PPTist创建引人入胜的演讲幻灯片，以吸引评委和观众的注意力。演示文稿可以包含不同的主题、图表和统计数据。
会议演示：与传统的PPT软件相比，PPTist可以提供更多的互动功能，例如实时投票和问答。这可以帮助会议主持人更好地与参与者互动，提高会议的效果。
二、本地环境介绍
2.1 本地环境规划
本次实践为个人测试环境，操作系统版本为centos7.6。
| hostname | 本地P地址 | 操作系统版本 | 内核版本 | node版本 |
|---|---|---|---|---|
| jeven | 192.168.3.246 | Ubuntu 22.04.1 LTS | 5.15.0-89-generic | v20.10.0 |
2.2 本次实践介绍
1.本次实践部署环境为个人测试环境，生产环境请谨慎；
2.在Ubuntu环境下部署PPTist在线演示文稿应用。
三、检查本地环境
3.1 检查本地操作系统版本
检查本地操作系统版本，当前版本为Ubuntu 22.04.1 LTS。
root@jeven:~# cat /etc/os-release
PRETTY_NAME="Ubuntu 22.04.1 LTS"
NAME="Ubuntu"
VERSION_ID="22.04"
VERSION="22.04.1 LTS (Jammy Jellyfish)"
VERSION_CODENAME=jammy
ID=ubuntu
ID_LIKE=debian
HOME_URL="https://www.ubuntu.com/"
SUPPORT_URL="https://help.ubuntu.com/"
BUG_REPORT_URL="https://bugs.launchpad.net/ubuntu/"
PRIVACY_POLICY_URL="https://www.ubuntu.com/legal/terms-and-policies/privacy-policy"
UBUNTU_CODENAME=jammy
3.2 检查系统内核版本
检查系统内核版本，当前内核版本为5.15.0-89-generic。
root@jeven:~# uname -r
5.15.0-89-generic
四、部署Node.js 环境
4.1 下载Node.js安装包
下载Node.js安装包，本次使用的Node.js版本为v20.10.0。
wget https://nodejs.org/dist/v20.10.0/node-v20.10.0-linux-x64.tar.xz
4.2 解压Node.js安装包
执行以下命令，解压Node.js安装包。
tar -xvJf node-v20.10.0-linux-x64.tar.xz
4.3 创建软链接
采用创建软链接的方法，使得在任意目录下都可以直接使用node和npm命令。
ln -s /root/node-v20.10.0-linux-x64/bin/node /usr/local/bin/node
ln -s /root/node-v20.10.0-linux-x64/bin/npm /usr/local/bin/npm
4.4 配置环境变量
- 在/etc/profile文件中，新增以下两行：
export NODE_HOME=/root/node-v20.10.0-linux-x64/bin/
export PATH=$PATH:$NODE_HOME:/usr/local/bin/
- 使变量生效
source /etc/profile
4.5 查看node版本
查看node版本，确保Node.js正常安装。NPM（Node Package Manager）是Node.js的包管理工具，它允许开发者在其项目中安装、发布和共享代码包。NPM提供了一个巨大的代码库，使开发者能够轻松地访问和使用其他开发者已经创建的模块。它是目前最流行的包管理工具之一，被广泛用于Node.js项目的开发和部署。
root@jeven:~# node -v
v20.10.0
root@jeven:~# npm -v
10.2.3
五、部署PPTist应用
5.1 下载软件包
下载PPTist软件包
git clone https://github.com/pipipi-pikachu/PPTist.git
5.2 查看源码目录
查看PPTist源码目录
root@jeven:~# tree -L 2 ./PPTist/
./PPTist/
├── commitlint.config.cjs
├── doc
│ ├── Canvas.md
│ ├── CustomElement.md
│ ├── DirectoryAndData.md
│ └── Q&A.md
├── env.d.ts
├── index.html
├── LICENSE
├── package.json
├── package-lock.json
├── public
│ ├── favicon.ico
│ └── icons
├── README.md
├── src
│ ├── App.vue
│ ├── assets
│ ├── components
│ ├── components.d.ts
│ ├── configs
│ ├── global.d.ts
│ ├── hooks
│ ├── main.ts
│ ├── mocks
│ ├── plugins
│ ├── store
│ ├── types
│ ├── utils
│ └── views
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts
14 directories, 20 files
5.3 安装相关依赖
- 进入PPTist源码目录
root@jeven:~# cd PPTist/
root@jeven:~/PPTist# ls
commitlint.config.cjs env.d.ts LICENSE package-lock.json README.md tsconfig.app.json tsconfig.node.json
doc index.html package.json public src tsconfig.json vite.config.ts
- 安装相关依赖
npm install
6.3 启动项目
在开发环境中，执行以下命令，启动PPTist项目，指定启动服务端口1为6500。
npm run dev -- --host 0.0.0.0 --port 6500
七、访问PPTist首页
访问地址：http://192.168.3.246:6500，将IP地址替换为自己服务器IP地址。如果无法访问，则查看服务器防火墙是否配置，如果是云服务器，则还需配置安全组端口。
八、总结
PPTist项目当前版本提供了在线编辑PPT和导出功能，并可作为尝鲜体验使用。该项目的在线编辑和导出功能非常实用，使用户可以方便地创建和分享PPT。然而，导入功能和其他扩展功能还需要进一步优化和完善，期待后续的版本升级。
