如果你在好奇这个网站是怎么做出来的...

器材库网站定位是怎么样的？

光子映画在这个网站诞生之前就已经构建了一个相对完备的器材库设计方案，包括基本的规章制度和借还流程。我们在设计器材排期的记录方式时想到了可以用一个网页系统来承担器材展示和排期管理的功能，于是就针对这一部分的工作流设计了这个网站的 UI 和功能。其余的工作，比如器材审核和提取时间预约等工作我们仍然会在微信等平台上完成。

网站的用户体验设计理念是什么？

简单易用，不消耗用户任何多余的时间。为了达到这个目标，我们尽量减少了从进入网站到发起器材申请的点击次数，减少了所有页面上的干扰元素，尽量让所有的表单清晰易懂。

此外，本站在交互体验上追求先反应再加载。如果你观察仔细的话，点击进入一个新页面时会瞬间进入一个新的空白页面，而列表会在之后才显示出来；如果进入一个之前使用过的页面则会先显示之前缓存的页面信息同时在后台请求数据更新，如果有更新才会应用到页面上（SWR）。我们判断这样的设计能够显著提升操作感受。

当然，如果有对页面设计的建议欢迎反馈。

网站使用的技术栈是什么？

这可能是开发人员们最关心的问题，在此我们分享一下这个网站的技术实现，以达到交流的目的。

本站前端使用的是 React + TypeScript + Ant Design + NextJS，采用 Vercel 部署。

React 和 TypeScript 自不必说，Web 开发的经典组合；Ant Design 是阿里开发的 UI 组件库，其主要优势是设计风格简约、对中文语言的支持良好以及包含很多开箱即用的组件，如可以显示不可用日期的日历组件和功能强大的各种表单组件；应用框架选用 NextJS 主要是看中其配置的简便性和与 Vercel 的深度适配（就是同一家公司），以及自带服务端 API 便于中继向后端的请求。

本站的后端并没有使用传统的数据库和后端应用程序，而是使用了自带云的 Headless CMS 服务 Sanity。

现在 Headless CMS 是 JAMStack 社区主推的后端解决方案之一，我个人觉得它可以理解为自带了基本权限管理、图形化后台界面、图片和文件管理、以及非常友好的 API 的增强版数据库，自带云的 Headless CMS 在此基础上还增加了已经配置好的 CDN，相当于把开发人员最常写的后端轮子全都实现好了。在本站的建设中，这一技术的引入使后端几乎没有开发阶段，只写了几个配置文件就上线了。

从众多 Headless CMS 中选中 Sanity 的主要原因是其简洁性。基本上所有其它自带云的服务都会提供功能很强大的界面，但 Sanity 只提供了最基本的文档编辑界面，所有其它功能都是用配置文件实现的，这样一来后台界面的运行性能就非常好，编辑文档十分快捷，并且可以自动将较为专业化的内容和配置与非专业的管理员用户分开。当然，最重要的点也是它提供相当慷慨的免费云资源配额，包含每月 10 万次的 API 请求、5GB 的文件存储和一万条文档存储，完全能够达到本站需求。

本站的邮件服务使用的是 SendGrid，永久免费，每日配额 100 条邮件，可以通过 API 触发邮件发送，完美满足本站当前预计的体量和需求。

此外，Sanity 和 SendGrid 都提供了 Node.js 的 Client Library，针对这两个服务的请求都可以直接通过调用函数完成，不用自己写 HTTP Request，进一步简化了开发流程。

总结来说，本站的所有技术选择的核心都在围绕两个点：简便性和低成本。本站整个开发过程中都没有涉及任何实际的服务器，所有的配置都在网页和代码编辑器里完成，今后如果不增加功能的话的基本没有系统维护需求；本站使用的所有服务都提供免费配额，而由于本站的体量大概率不会有过大增长，这些免费配额理论上能在可预计的时间范围内一直支撑本站免费运行。

代码开源吗？

器材库网站的前端部分在 Github 上开源：点击此处进入。

有未来的更新计划吗？

取决于是否有需要。目前有在考虑的功能包括增加账号系统来方便用户追踪自己的器材预约状态，但目前来看这一功能的实现难度大于其带来的效用，多数情况下邮件存档就已经足够使用了。

还有就是虽然本站有做布局上的移动端适配，但目前还是更推荐使用大屏设备如电脑或者 iPad 访问来获得更好的表单填写体验，如果移动端使用需求大的话以后可能会增加为移动端专门设计的表单组件。

另外有在考虑的是更换更加先进的技术栈，比如用 Remix 代替 NextJS 以达到更好的客户端性能，不过目前来说 NextJS 已经足够使用，如果未来有需要（或者足够闲）可能会考虑更换。

我可以给器材库反馈或者加入开发行列吗？

非常欢迎！我们希望能够将器材库以及器材库网站做得越来越好。出于隐私原因我们不直接在这里提供个人联系方式，如果你在本站上预定任何器材就会在邮件中收到我们的联系方式，也可通过光子映画的微信群等渠道添加。

你也可以通过邮件形式直接联系光子映画：uiucphoton@gmail.com