Storyteller: 无代码交互式教程编辑器

在日常的工作生活中，我们会经常接触到许许多多的教程，常见的教程通常是图文或者视频形式。作为一个教程，重要的目的是告诉学习者在什么情况下做什么样的操作，图文教程可以比较好的做到这一点，但是其缺点也很明显，就是让学习者不太容易去学习，阅读起来比较枯燥；视频教程相对图文教程，更能体现真实的操作环境，趣味性也更好，但是想要描述操作步骤，就需要添加配音或者字幕，制作和维护成本就比较高。

为了解决传统教程制作的诸多缺陷和困难，我们开发了 storyteller 这一款应用，定位于 no-code 的交互式教程编辑器。使用 storyteller 可以让用户无需编写代码，就能够轻松、快捷地完成交互式教程的制作，并可以通过最简单的方式将教程嵌入到任意官网或教学网站中。storyteller 可以用于产品演示或者作为产品的交互式说明书，助力于产品的推广，也可以用于教学和远程指导。如果看了以上的描述，你还是不清楚 storyteller 的形态和功能，可以移步至官网，上面有使用 storyteller 制作的产品演示和说明。

为什么 storyteller 能够有信心解决传统教程的缺陷呢？这得益于 storyteller 对教程制作场景的划分，我们将制作教程的环境划分为 web 页面，terminal 终端和视频，并且对 web 页面和 terminal 终端环境使用了独有的媒体格式。例如在 web 场景下，我们利用了开源的 web 页面录制和播放工具: rrweb, 它能够以非常小的体积，无损，稳定和安全的录制和还原一个网页。当用户看到了一个非常逼真，响应式的 storyteller 网站教程的时候，学习者并不是真实的操作一个生产环境的 web 页面，而是操作着一个 web 页面的完美复制，甚至页面中一个按钮的视觉响应都能被保留下来，同时完全不需要有安全性和稳定性方面的担忧，因为页面是在一个沙箱环境下运行的，在页面上的操作不会有实际的业务被执行。可能有开发者说，这些沉浸式无损的教程我自己就能利用类似 intro.js 这样的用户引导类的工具实现，为什么还要有 storyteller? 事实确实如此，开发者完全可以通过编写代码实现这一切，但 storyteller 提供了一种非常简单快速，适用于所有人群的方式，不用写一行代码就能制作出一个逼真的 web 应用的用户引导教程，这就是 storyteller 的 no-code 特点。

虽然目前，storyteller 还没有完善到公开发布的阶段，但它已经非常接近完成了，你可以在官网体验到它的核心功能和特点。如果想第一时间实际体验和使用它，那么你可以在官网上提交你的邮箱地址，我们会很快和你建立联系，让你参与到 storyteller 之后的试用，反馈，迭代改进的过程中，如果你在试用过程中有遇到问题或者有更好的想法，也可以第一时间与我们沟通。将来，storyteller 除了会不断的完善现有的功能，还会推出用户分享教程的故事广场功能，以及支持多人同时编辑教程的协同功能。

对 Storyteller 感兴趣可以在官网留下邮箱，我们很快会开始进行邀请试用～

sillydaddy

2022-06-23 09:56:09 +08:00

@aryu
Storyteller 的实现思路是这样吗：录制网页以及网页的操作过程，然后在这个录制好的基础上，中间插入一些中断点，在这些中断点，需要用户作一些交互操作(比如输入特定文字、点击特定按钮)，才能从断点继续「播放」，否则过程会一直停留在断点。顺便说下，能够「录制交互的过程」，很强大。

上述我的理解对吗？感觉这个思路很有意思，用户制作起教程来也非常容易。但总感觉哪里不对劲，比如以官网的例子，在 bing 输入框中输入文字后搜索，录制过程会输入一遍文字，用户实际操作时，也会输入一遍文字。但是我看到实际演示时并没有这个现象，所以，用户制作时，还需要对原始的录制作一些裁剪处理，是吗？