Prism：一款实现 Pinterest 缺失功能的视觉书签应用

当您浏览互联网的时候，发现了大量的好资源，想要随手保存，但可能会发现自己没有高效的书签工具来保存这些链接。 没有一个界面能够让您快速、轻松地查阅所有已保存的网站。 书签列表中的链接模糊不清、难以辨认，在 Pinterest 中也无法快速查阅某个网站。 为了解决这些痛点，Prism 应运而生。 它是用于 Google Chrome 浏览器的 Web 应用和视觉书签扩展程序，使您可以在同一个地方管理和浏览所有喜欢的网站。 用它获得的截屏能够实现自动更新，这样您就可以随时查看最新内容，但您也可以捕捉静态截屏，以跟踪某个特定的时刻。

Prism 是一家位于加州湾区，由女性创办并以设计主导的远程初创公司。 Prism 专注于让网页浏览体验更加可视化，它的构想源自一位设计师。 Prism 由 Anna Western 创立，她既是首席执行官又是设计师，拥有 10 多年的设计经验，曾与各种工作室、初创公司和世界 500 强企业进行过合作。 Anna 此前曾担任 Facebook 的产品设计师，负责内部工具的设计，她还曾通过 YC W19 联合创办并推出了一家初创公司。

通过 Anna 及其团队以及我们经验丰富的后端和前端工程师的共同努力，我们从零开始开发了 Prism，将 Anna 的想法变成了一个对全世界用户有用且可行的解决方案。

挑战

我们的客户 Anna Western 是由她的同事 David Weekly 介绍给我们的，后者是我们在研发 Medcorder 医疗应用时结识的。 她想与工程团队合作，为她正在设计的 Prism 视觉书签应用和浏览器扩展程序构建最简可行产品。

客户当时正在为她的公司寻找称职的技术合作伙伴。 她想要开发的产品是一个可用于管理浏览器书签的视觉书签应用和插件，以此来对网站进行收集和分类。 Anna 希望实现一种对网站本身进行截屏并将其保存到图板的机制，类似于 Pinterest。 但是，该应用与 Pinterest 有一个关键区别。 在 Pinterest 上，当您固定某些内容时，您固定的是页面上某个位置的单个图像，并将引用该页面。 但在 Prism 上，您可以对整个页面进行截屏。

例如，您可以列出想要重新访问的所有网站。 您会得到该网站的截屏，并且可以将这些截屏收集到图板中。 此外，当您回头查看它们时，截屏会进行更新，这样您就始终能够查看所保存网站的最新版本。 您可以通过安装的浏览器扩展程序来使用该应用，并在您的个人 Prism 账户中整理、查看和修改图板。

Anna 找到 Singula.team 时，已经有了关于视觉书签应用和浏览器扩展程序的成形设计理念，并带来了试验模型和对应用功能的构想。 我们的工作是进行充分的调研，进行一轮咨询，提出技术解决方案，并给出项目架构的设计方法。

解决方案

Singula.team 成为了 Prism 团队的工程合作伙伴，帮助他们构建书签管理器。 我们对项目进行了估算，评估了风险，提供了构建时间表，并就 Anna 关心的所有问题提供了咨询。

我们的工程师开发了一个基于 Web 的应用，可用作 Chrome 浏览器的扩展程序。 用户可以使用该 Chrome 扩展程序添加网页书签。 按照 Anna 提供的设计，该产品能够将已添加书签的网页的截屏保存到视觉图板上供用户参考，并使用户能够对这些截屏进行分类整理。 这样一来，他们就可以直观地看到要跟踪的书签页面。 用户还可以导入现有的 Chrome 书签。 用户可以邀请其他用户或非用户加入他们的图板，被邀请的用户会成为图板成员。

我们于 2019 年 5 月启动了该项目，并于 2019 年 9 月推出了产品。 通过与 Anna 和 Prism 团队的高效合作，我们仅用了三个半月的时间就发布了最简可行产品，还额外花了一些时间来修复错误和缩短加载时间。 我们在前端使用了 React，实现界面的同时遵循了设计规范的每个细节，从而帮助创建了完全满足客户期望的前端设计。 所有网格页面都能灵活缩放，这意味着网格可以像 Pinterest 一样随着页面的变化进行缩放。

我们在后台使用了 Python，并采用了无头版本的 Chrome 来对网站进行截屏。 它会渲染网站本身，然后我们会导出网站图像并保存在 DigitalOcean Spaces 中。 同时，Redis 也被用来分发渲染任务。 项目堆栈包括 Kubernetes、GraphQL 和 CircleCI，以实现持续集成和持续交付。 我们使用 Rollbar 和 Sentry 用于实时错误跟踪和调试，并建议使用 Mailgun 云端电子邮件服务进行邮件活动。 项目团队由一名项目经理、一名前端工程师和一名后端工程师组成。 我们的项目经理负责处理客户和工程团队之间的所有沟通，从而简化了 Prism 团队的工作。

总结

我们非常享受与 Prism 团队的合作，接受了构建类似 Pinterest 的 Web 应用的挑战，并创建了一个定制的浏览器扩展程序，该扩展程序能够提供更多可定制性和灵活性，可以更好地满足用户需求。 无论是从头开始构建全新的应用，还是开发跨浏览器的插件或扩展程序，我们始终在寻找新的创新项目。 如果您拥有产品构想，并需要开发方面的帮助，请告诉我们您的联系方式，我们会尽快与您取得联系，就您的项目以及我们能够提供的帮助进行讨论。