4

.net core 和 WPF 开发升讯威在线客服与营销系统:背景和产品介绍

 3 years ago
source link: https://www.cnblogs.com/sheng_chao/p/14135925.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

.net core 和 WPF 开发升讯威在线客服与营销系统:背景和产品介绍

本系列文章详细介绍使用 .net core 和 WPF 开发 升讯威在线客服与营销系统 的过程。本产品已经成熟稳定并投入商用。
在线演示环境:https://kf.shengxunwei.com 注意:演示环境仅供演示交流与评估,不保证 7x24 小时可用。

文章目录列表请点击这里


这个系列的文章,是用来填我2015年挖的一个坑。2015年6月我发表过一篇文章“使用 WPF+ ASP.NET MVC 开发 在线客服系统(一)”,介绍了当时自己开发的客服系统概况,虽然当时系统的开发完成度已经很高,但因为工作等原因,后续的开发完善搁置了,文章也搁置了。直到后来 .net core 关注度的持续升温,我也有了想抽空把系统捡起来,用 .net core 重构并好好完善使之能够完全产品化的想法。

最近一段时间我慢慢完成了系统的重构和开发工作,使用 .net core 彻底重写了整个后端,WPF 的客服端也经过了一定的优化和改善。工作小小告一段落,这个系列的文章也到了填坑的时候,时隔了五年,系统的设计和开发细节早已和当初有了很大不同,这次我将重头开始,从系统的功能设计、技术架构、开发细节以及各个功能,详细介绍开发实现的过程。在未来的系统开发和完善过程中,如果时间允许,我也会同步更新这一系列的文章进行介绍。

作为首篇文章,本文对产品的背景和功能做简单的介绍。

2015年前后当时开发的初版,我使用了 ASP.NET MVC 做为后端,数据库使用原生 ADO.NET 进行操作、WPF 做客服端,Web 访客端使用原生 JavaScript 开发。为了使整个系统能够向下兼容,客服端 .net 框架使用的是 .net framework 3.5 ,可以兼容 Windows XP SP2,Web 访客端为了兼容 IE6 ,也使用了许多比较麻烦的技术实现,说来话长,这次不展开说这方面的细节。

在这次重构的新版本放弃了对 Windows XP 和 IE6 的支持,后端使用 .net core 3.1 ,数据库操作使用了 entity framework core。客服端依然是 WPF,基础框架升级到了 .net framework 4.8 ,访客端依然是原生 JavaScript,兼容 IE8 以上浏览器。

另外相对于2015年的版本,这次重构我增加了一个 Web 后台,使用 Vue 实现,把原先放在客服端的一些管理功能,改到了 Web 后台中,例如:组织机构管理、客服管理、角色权限管理、多站点管理等。
此外因为有了 Web 后台,这次有兴趣的朋友就可以自行注册体验了,当年的旧版本需要我手工开通,很是麻烦。

在线演示环境:https://kf.shengxunwei.com 注意:演示环境仅供演示交流与评估,不保证 7x24 小时可用。

以上所有设计开发工作都是我自己一个人利用业余时间完成的,从系统后台,到 WPF 客服端、Web 前端、Web 管理端,用了很多的时间。功能更新补充的速度不会很快,因为精力实在有限,而且由于系统使用场景的特殊性,始终把稳定性放在第一位,在这方面也花了很多时间。


这个系列的文章主要围绕产品设计和技术开发两方面来讲,本文作为第一篇,介绍完背景,下面简单介绍一下目前实现的功能。

客服功能:

  1. 访客来访提醒
    当有访客到达网站时,访客端会即时弹出提醒窗口,客服可以快速了解访客的地域、来源、关键词、来访次数、历史对话次数及其进入浏览的网页。
  2. 访客类型识别
    系统自动识别访客来源渠道(PC、手机、微信),自动识别新旧访客以及网站会员用户功能,便于访客管理,提高服务效率。
  3. 访客来源跟踪
    客服可以了解访客的所在地域、来源、关键词、来访次数、历史对话次数及浏览的网页。
  4. 访客消息预知
    通过消息预知功能,客服人员可提早一步了解访客正在输入的内容,了解访客的需求及想法,方便客服人员能更快速、更详细的为访客服务,提高工作效率和质量。
  5. 在线图文会话
    客服和访客双方对话窗口都提供多样式对话体验,文字对话为主,文件传送、表情、链接为辅。支持客服人员和网站访客双向文件传输功能。
  6. 常用语/常用文件
    可对客服使用的常用消息、常用链接、常用文件进行管理和维护,便于客服在交谈时直接调用此类文件进行快捷回复。
  7. 转接客服
    当客服人员在遇到解决不了的问题,客服人员可将该对话访客转接给其他客服人员,为企业在线咨询提供了便捷性。
  8. 屏蔽恶意访客
    客服人员通过它可对恶意骚扰的访客进行屏蔽,使客服不再受到此类访客的骚扰。
  9. 会话历史记录
    客服人员可以查询会话历史记录,支持根据时间段和关键词查询。
  10. 实时监控
    有权限的管理人员可以实时监控所有客服的实时聊天内容和状态。

访客功能:

  1. 网页即时通讯
    访客无需安装插件即可发起咨询,访客可随时通过个人电脑、手机、平板等设备进行在线商务沟通,方便快捷。
  2. 邀请窗口
    企业可以融合网站风格、形象定位、用户特点等因素,自主设定个性化、特色的邀请窗口样式。
  3. 咨询图标
    在网站上显示一个浮动的咨询图标,支持自定义风格主题。
  4. 访客对话窗口
    访客对话窗口可设置多种颜色风格,窗口标题、客服资料、欢迎语、公司名片、公告。
  5. 在线图文会话
    客服和访客双方对话窗口都提供多样式对话体验,文字对话为主,文件传送、表情、链接为辅。支持客服人员和网站访客双向文件传输功能。
  6. 直接对话窗口
    客服可对在线访客发起主动对话。

实现效果截图:

14cef0eb-b46b-4af3-a476-91052b46e763.jpg

左下角的浮动图标,可以根据是否有客服在线显示不同的图片,当没有客服在线时,将引导访客进入留言页面。
右下角的区域可以展开,直接在网站上边浏览边交流,不用打开新的浏览器窗口。

67f21c1a-e98d-4daa-afc0-adee82d4b9fb.jpg

访客也可以打开单独的浏览器窗口进行交流。

161787a5-8a6c-48c7-9c50-00b24d791f92.jpg
abac2d03-d580-4b42-917e-a02b1e227d24.jpg

客服端界面目前初步的设计分为三大区域:

  • 左边是会话区,根据访客的不同状态在树型结构中显示。
  • 中间是会话区,除了聊天会话相关的功能之外,还能显示出访客的基本信息。
  • 右侧为辅助功能区,能够显示访客的浏览访问网站时的轨迹,过去的聊天历史记录;以及客服的快捷回复列表等。
    未来的完善也将围绕着三大功能区进行设计。
cb6cb600-da41-4070-a3b2-d4a96769559e.jpg

能够根据单次会话记录,联动显示前后同一访客的所有会话记录。左侧蓝色为查询区,鼠标指上去会自动滑出显示查询条件,不过这个设计似乎不是太友好,有待改进。

234b8be9-59b3-4f78-837f-075150ada160.jpg

站点参数目前实现的功能比较细,能够对访客端的各种细节进行精确的配置。

871e431e-7029-4384-b9b4-3a35ef804b2f.jpg

登录客服自己的一些个性化配置,都放在这里,目前还有待完善。

Web 后台

ff2dc8b5-39a5-4b33-9676-16c9c081bfc3.jpg

系统支持多站点功能。一个机构可以拥有多个站点,站点和客服的关系是平行的,不是隶属的。客服可以根据权限配置,登录一个或多个站点。

组织机构、客服、角色权限

b16ff835-120f-4aa4-9301-c66f9536befd.jpg
6a9e4e30-5639-455f-a9f7-7590e0b85e4c.jpg

曹旭升
QQ:279060597
原文:[https://blog.shengxunwei.com/Home/Post/9b667212-565c-43a8-8379-bd0b832a3720]


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK