30 天内编写一个 SaaS 代码

所以我在 30 天内构建了一个 SaaS......它比我最初想象的要复杂得多，但看看我是如何做到的，包括：

• 选择一个主题
• 学习人工智能
• 注册域名
• 创建徽标
• 设计登陆页面
• 网站编码
• 前端和后端设计
• 使用 Stripe 付款
• VPS 设置
• 開發吧！

Youtube 视频：构建 SaaS 之旅
博客文章：Adrian Twarog
SaaS：增强 AI

介绍

我花了七天时间构建了自己的 SAS，它将帮助开发者利用 AI 赢得人生。在这个视频中，我将向大家展示我是如何做到这一切的，包括所有的乐趣、所有的艰辛以及最终成品。最后，他们说开发者可以构建任何东西。

嗯，我是个开发者，我只是想做点什么，我想做一个 SAS。我本身并不怎么时髦。SAS 就是一个软件即服务 (SaaS)。它看起来很容易开发，只需要一些前端，或许还需要一些后端。也许你还需要它能够正常工作，避免后期可能出现的 bug。但我想做一个非常酷的东西。

最近，我查看了 GitHub co pilot，它使用了 AI 技术，这是一种非常酷的 AI 攻击，可以自动完成你正在写的内容，我想使用他们的一些技术来构建 SAS 等一系列工具，可能适用于开发人员或类似的东西，因为我自己就是一个工具。

每当我遇到问题时，我总是会去 Google 一下，看看有没有更简单的方法，不用一遍又一遍地 Google 相同的内容，比如如何执行 git 合并，或者，比如，如何执行一些基本命令，甚至正则表达式，它的一些语法都让我眼花缭乱。所以我打算尝试构建一个围绕这个问题的工具。

现在，我将向你们展示，带你们踏上这段旅程，尝试解决构建 SAS 的问题，这包括构建前端、设计后端以及中间的一切。那就让我们开始我第一天的尝试吧。

学习人工智能

所以我要做的第一件事就是获取一些人工智能工具。市面上有很多工具，谷歌有自己的机器学习套件，亚马逊甚至微软也有。但这并不是我最初兴奋的原因。我真正喜欢的是 GitHub co pilot。它是由一家名为 Open AI 的公司开发的。

他们创建了自己的人工智能技术，叫做 GPT 2，现在又推出了 GPT 3，它们创建了他们现在使用的模型，我想这个模型叫做编解码器，是他们为使用 VS Code 的开发者提供的。我想用这个模型来创建一些工具。所以我尝试访问他们的网站。

不幸的是，即使有名为Open AI的公司，你也不能直接进去注册，你得经过一个候补名单和一个流程。所以我就这么做了。我等啊等，最终终于进去了。所以现在我来到了他们的游乐场。我要试试看，看看我那些关于用AI构建工具的想法是否真的可行。

那么，我们来试试吧。我访问了 Open AI 网站，想弄清楚它是怎么运作的。一开始我有点害怕，因为有时候文档很糟糕，有些开发者网站也很糟糕。但说实话，Open API 的文档是我见过的最好的文档之一。它甚至让我想起了 Stripe 的文档，那可是世界级的。但这并不意味着我知道自己在做什么。

我跳进了他们的游乐场系统。然后我被各种东西弄得眼花缭乱，比如模型响应温度、Toppy 频率、总统职位等等，简直不知所措。所以我跳进了他们这里的例子，它展示了一些你可以用开放人工智能构建的东西。

对我来说，我想先用正则表达式补全器来开始。我尝试了很多不同的设置和提示符，直到我让一些功能像 JavaScript 聊天机器人甚至正则表达式一样运行起来。所以这意味着，创建自然语言来解决我们每个人都会遇到的编程问题，这个想法似乎有一些很酷的优点。但让我们来看看构建 SAS 的下一个最重要的步骤。那就是注册域名。

要做到这一点，我需要一个公司名称。而这却是最难的事情之一。我考虑了各种不同的选择。最后我想到了一个名字，叫做“副刊写手”，或者叫“副刊编辑”？我记不清了，但我立刻就去注册了，那里有新的域名，叫做.ai。

注册域名

于是我立即注册了 subeditor.ai 域名。实际上，在花了大概两三百美元之后，我决定不行，不行，我不喜欢这个域名，我得注册另一个域名。我最近在做的事情之一是开发名为“enhance UI”的书籍，这是一本帮助开发者学习设计的书。所以我觉得不妨顺应潮流，创建一个名为“enhance AI”的书籍，它可以成为开发者使用人工智能来改进日常工作、撰写博客等的工具。所以，我们也注册一个吧。

创建徽标

现在我们已经完成了这些，我们可以看看作为开发者开发任何 SASS 产品最难的部分，那就是设计 logo。对于一个 logo 来说，它必须让人眼前一亮，必须能够代表开发者、工具、开放 AI 等等。所以我把一些圆圈和正方形放在一起，这就是 logo。

设计登陆页面

接下来，我们需要创建一个落地页，这样当人们看到这个产品时，他们更有可能尝试甚至购买。为此，我将使用 figma。我们将根据 logo 进行设计，我会从 logo 中提取一些颜色，以及一些形状，比如正方形和圆形。

我想设计一个能让人们了解这个工具工作原理的设计。所以我可能会把它放在一个漂亮的盒子里寄给她，并给她一个例子，也许他可以解释一下代码和它的功能，同时还会有很多行动号召，鼓励人们注册。

这是设计师想出来的点子，没什么特别的。我可能还在琢磨它。但至少它已经启动并运行了。接下来要做的就是实际编写代码。我会用一些基本的 HTML 和 CSS 来编写。现在就试试吧。我打开已安装的 VS Code，使用 Tailwind CSS，然后开始根据我的 figma 设计进行编码。很快就完成了，我很少做噩梦。

但昨晚我做了个噩梦，梦见我得把这个SAS的每一行代码都写出来。作为一名开发人员，这有时很有意思，因为你喜欢写代码，但有时这实在太难了。

所以我会尝试使用页面构建器。请别介意我这么说，我打算用 Web Flow，看看能不能重新设计一些 Tailwind 的设计。如果花费的时间一样长甚至更快，就先测试一下。如果这样更方便，我可能会把整个落地页都换成 WebFlow。等我们真正构建应用的时候，我肯定会用 React 来构建。但落地页会一直修改。我觉得用 React 来构建这个东西可能有点小题大做。

前端和后端

现在是时候构建前端和后端了，这是最棒的部分，让我们先从前端开始，用 create React app 来做。我会开始构建它。同时，我还需要一个后端来处理一些基本的事情，比如登录。所以，我们用我们最喜欢的 Express 和 MongoDB 节点，我可能会用云版本的 MongoDB，因为以后我需要扩展它时，需要确保它能够持久化。

但这是构建SAS的传统方法。所以我们就从这里开始吧。接下来，我们需要一个支付处理器，比如II Way、PayPal，甚至Stripe，因为你不想自己存储信用卡信息。所以我决定使用Stripe，因为它们很受欢迎。而且我确实想做订阅业务。

所以设置起来应该很容易。设置起来并不容易。但现在既然完成了，一切就都正常了。每次有人加入，他们都可以免费试用，在正式注册并承诺使用之前测试一下产品，这正是我们想要做的。因为现在没人愿意在没有实际试用的情况下就立即购买。接下来，我们需要一个地方来托管整个系统，包括前端和后端，因为它不会自行托管，Linode 就是这样的。

发射

终于完成了！我在 Twitter 上发了帖子，在 Hashnode 上发了文章，在 YouTube 上发布了视频。你可以在下面找到它们。

网站：https://www.enhanceai.ai
Twitter： https: //twitter.com/EnhanceAI

关注并支持我：

如果您订阅我的频道，我将特别感谢 :)

• 🎞️ YouTube
• 🐦推特