SlideLive产品设计与实现

简介

SlideLive是一款PPT在线播放和分享的网站。目前已上传10000+的PPT资源。本文将简要介绍一下SlideLive网站的创建历程、功能设计以及技术实现。

创建历程

起源

在过往的学习和工作中，使用Google查找资料时经常会看到一款SlideShare的网站。由于我本人是软件工程专业毕业，心里就萌生了自己开发一款类似网站的想法，同时也能弥补国内空白。

执行

有了想法还是远远不够的，由于我自己是一名Java后端开发工程师，需要学习前端的技术，当时我的选型时Typescript、Angular和Material设计。理由也很简单，因为我对谷歌的开源技术很喜欢。同时我也开始了解SlideShare的产品设计思路，以及为什么它考虑这样做，而不是那样做。

结果

就这样，一步一步，付出终于有了一些好的结果。SlideLive的第一版终于上线了。

网站地址：SlideLive：分享和发现知识

产品功能

SlideLive的定位也很简单，分享和发现知识。何为分享，就是能够通过本网站将自己的文档发布出来，利用SlideLive平台的影响力让更多的用户了解到您的创作；何为发现，就是能够可以通过SlideLive平台，可以在线播放文档，同时可以将文档嵌入到自己的网页里。

从用户的角度，产品功能主要包含如下几个部分：

• 幻灯片

• 主题

• 标签

• 评论

• 统计

• 用户

对于幻灯片功能，主要包括：在线浏览幻灯片、幻灯片推荐、幻灯片搜索、幻灯片上传、以及点赞、收藏、分享等。

对于主题功能，主要是对幻灯片进行主题分类。目前SlideLive参考SlideShare划分了42个主题，不过后期会根据国内用户的特点进行简化。

对于标签功能，支持用户上传幻灯片时自定义标签，同时标签也能利于用户快速搜索相关的幻灯片。

对于评论功能，允许用户对作者的幻灯片进行评论。

对于用户功能，目前支持多种登录方式，包括用户名登录、QQ登录、微博登录。

  

技术实现

前端技术栈：Typescript + Angular + Angular Material

后端技术栈：Java + Spring Boot + Maven

中间件：Encache、Mysql、H2、 Elasticsearch

个性化搜索：elasticsearch-learning-to-rank、用户点击模型、排名学习模型

第三方服务：华为云存储、百度云翻译

部署：Docker、Docker Compose、华为云

总体架构

 

具体而言，SlideLive一共被拆分成了3个子项目，分别是slidelive、slidelive-convertor和slidelive-auto-ltr。其中，slidelive是网站的主体，采用前后端分离技术，前端基于Typescript和Angular，后端基于Java和Spring Boot，但是通过maven的fronted-maven-plugin插件构建于一个Jar文件，并基于docker-compose部署于华为云，同时网站的搜索功能基于Elasticsearch构建；slidelive-convertor是文档转换器，用于在线播放用户上传的ppt、pdf等文档；slidelive-auto-ltr是基于elasticsearch-learning-to-rank插件构建的自动化排名学习模型，用于个性化搜索，其中用户点击模型基于经典的Cascade Model，排名学习算法基于pairwise模式的LambdaMART算法框架，目前该子项目仅在预研阶段，并未投入生产。

总结

目前，SlideLive仍处于开发迭代之中，还有很多不足。不过我相信，SlideLive的产品体验一定会越来越好，真心希望能够给用户创造价值。官网地址：SlideLive：分享和发现知识