构建SaaS？

用户管理

用户界面

账单

建筑学

结论

我们免费提供用户管理、用户界面和循环计费（使用 Stripe）功能（MIT 许可证）。我们使用了 Adminator，并通过在其上集成 Firebase 和 Svelte 使其功能完善。您可以从 GitHub 获取：https ://github.com/mihairaulea/DashboardHeroLite

不会让您感到枯燥——您知道自己需要用户管理功能，也知道自己需要用户界面。计费是公司生存的命脉，所以最好也把它做好。下面就教您如何使用 Dashboard Hero Lite 快速、经济地实现这些功能，并在本周内让您的 MVP 上线运行。

在成为打造最小可行产品（以及失败的创业项目）的高手之后，有一件事始终萦绕在我心头：如何快速、低成本且（在某种程度上）可靠地构建产品。

在产品核心功能开发完成后，你应该能够将其推向市场并很快开始盈利。然而，事实并非总是如此——我们有个客户在聘请我们之前，光是开发核心功能就花费了18.1万美元。

Dashboard Hero 旨在帮助 SaaS 公司快速扩展规模，并专注于其产品的核心功能。

用户管理

最起码，你需要一个注册和登录界面。目的是为了收集用户的邮箱地址，以便建立与用户的沟通渠道。

您还需要根据用户的角色（已验证用户与访客、管理员与普通用户与其他角色）来过滤访问权限并呈现不同的用户界面。

如果能够允许用户使用 Facebook 和 Google (OAuth) 登录和注册，阻止某些用户，从主管理面板手动重置密码并验证电子邮件地址，那就太好了。

手动注册用户怎么样？我们也有这个功能。

有关如何实现此功能的详细信息，请阅读“架构”部分。

用户界面

也许你已经花了 3 到 6 个月的时间学习并熟练掌握了 React、Angular 或 Vue。也许你甚至喜欢这些框架。但我没有，也不喜欢。

初创公司资源匮乏——在竞争异常激烈的环境中，专注于前端最佳实践是最不应该做的事情。

Svelte 简直太棒了——它完美地应用了帕累托法则：付出 20% 的努力，获得 80% 的收益。

你会得到组件——由 HTML、CSS 和 Javascript 组成的独立代码块。但你不会接触到 React Hooks、组件生命周期和 Webpack 构建等复杂技术。你会像回到 2004 年那样敲键盘。我们的目标是先发布项目，然后开始学习和迭代。

组件示例包括菜单和顶部栏，以及不同颜色的按钮、通知等等。

Svelte 是我 14 年编码生涯中使用过的少数几个完全不会妨碍编程的框架之一——只需编写 HTML（使用模板系统）、CSS 和 JavaScript 即可。

架构部分包含解释、实践操作和示例。

账单

Dashboard Hero Lite 与 Stripe 有部分集成。您可以在 Stripe 计费控制面板中生成套餐订阅 URL，然后手动将其分配到 Firebase 中。这应该足以满足您最初 10-20 位客户的需求。

文章和视频将详细介绍如何操作，敬请期待。

建筑学

克隆管理后台 GitHub 仓库后，你会看到两个重要的文件夹：src 和 public。Rollup（一个构建工具）以 src 文件夹为输入，生成 Web 应用的公开版本。public 文件夹的内容会被部署到 Firebase Hosting。

源（src）文件夹

App.svelte 是我们管理后台的入口点。它会获取一个 Firebase 实例，并根据用户是否登录来渲染不同的组件。

很简单，对吧？你可以使用 Firebase 云函数来隐藏敏感的业务流程，还可以阻止未登录用户访问资源。

MenuDrawer 和 TopBar 是重要的组件。MenuDrawer 通过 Link 标签告诉路由器要渲染哪些组件。

以下是一个例子：
用户界面元素

在构建时，Svelte 知道如何解包 Link 属性。

顶部栏会显示用户邮箱地址，并允许用户注销。

ContentContainer 列出可用的路由（页面），并将 URL 路径映射到 Svelte 组件。仅当用户登录时显示（参见 App.svelte）。

UserContainer 具有类似的结构，并处理登录和注册。

要在本地主机上运行项目，请从项目根目录执行：
npm install
npm run dev

要部署到 Firebase 并让全世界都能看到您强大的管理后台，请执行以下操作：将 src/common/resources/firebase/index.js 文件（第 6 行）中的 Firebase 凭据替换为您自己的凭据，然后在项目根目录下运行以下命令：

部署 Firebase

结论

本文力求简洁明了，让您快速上手。当然，亲身阅读和实践代码才是最好的学习方法 :)

请在评论区告诉我们您正在开发什么——我们对新技术始终充满热情。如果您有任何需要进一步解释的地方，也请告诉我们。如果您发现了 bug，请不要犹豫，在 GitHub 上提交 issue。

打个招呼也行 :)