使用与 Stripe 集成的低代码模板构建 AI MicroSaaS 应用程序

type

status

slug

summary

date

检索复制 API 令牌 ✅

请按照以下步骤检索应用程序的复制 API 令牌：

• 访问Replicate Website（https://replicate.com/）并登录您的帐户。如果您没有帐户，则需要创建一个帐户。

• 单击页面左上角您的个人资料旁边的下拉列表，然后导航到API 令牌页面。

检索 Replicate API 令牌

• 复制您的 Replicate API 令牌并将其临时存储以供在应用程序中进一步使用。

检索 Stripe API 密钥 ✅

请按照以下步骤检索应用程序的复制 API 令牌：

• 访问Stripe 网站（https://dashboard.stripe.com/test/dashboard）并登录您的帐户。如果您还没有帐户，请创建一个新帐户。

• 单击右上角的开发者按钮导航至开发者页面。

• 导航到API 密钥部分，复制您的 Stripe API 密钥，并将其临时存储以供在应用程序中进一步使用。

在 Rowy 上设置后端 💪

请按照以下简单步骤在 Rowy 中设置应用程序的后端并创建必要的表：

• 要使用AI MicroSaaS模板在 Rowy 中创建表，请单击“使用此模板”按钮。这将打开模板设置向导，您可以在其中单击“让我们开始！”按钮开始设置过程。

Rowy 上的 AI MicroSaaS 模板

• 系统将要求您输入将存储所有数据的表的名称。您可以选择保留默认值并继续而不进行任何更改。

• 在接下来的步骤中，您将需要输入您的复制 API 密钥。如果您尚未将其添加到GCP Secret Manager中，请单击“在 Secret Manager 中添加密钥”按钮。您将被重定向到GCP Secret Manager，您可以在其中创建一个具有名称的新密钥replicate，并输入复制 API 令牌作为其值。完成后，导航回模板设置向导并选择您的密钥。

将复制 API 密钥添加到 GCP Secret Manager

• 在下一步中，您将需要输入 Stripe API 密钥。与上一步类似，在GCP Secret Manager中创建密钥并在模板设置向导中选择它。

将 Stripe API 密钥添加到 GCP Secret Manager

• 接下来，您应该提供您的 Vercel URL。出于本地测试目的，您可以暂时使用“https://localhost:3000”作为前端项目的默认主机。

将您的 Vercel URL 添加到模板设置向导

• 在下一步中，您只需将Rowy 提供的预构建 Webhooks 部署到您自己的 Google Cloud 项目即可。

在模板设置向导中发布 Webhooks

• 最后，我们可以部署项目所需的云功能，然后单击“继续”按钮，这会将您重定向到项目表。

在模板设置向导中部署自动化

• 导航到右上角的 Webhooks 菜单，查看项目中使用的所有 Webhook。从“ Prediction Done Webhook ”复制Webhook Endpoint ，并将其粘贴到“ Start Prediction webhook ”的代码中（出现提示时）。更新 webhook 并单击“保存并部署”按钮。

将 Webhook 端点添加到“开始预测”Webhook

设置 NextJS 前端 ✨

在运行 Next.js 应用程序之前，您需要确保具备某些先决条件，例如 Node.js、代码编辑器和设备上可用的终端。

MicroSaaS 前端的 GitHub 存储库

要开始使用 Next.js 前端，您需要导航到项目存储库并将其克隆到本地计算机上。这可以通过运行以下命令来实现：

克隆我们的项目后，我们可以移动到项目文件夹中并使用以下命令安装依赖项：

设置环境变量🪴

• .env.local在您的首选代码编辑器中导航到项目文件夹，然后在根目录中创建一个以本地环境变量命名的文件。

• 引用该.env.local.example文件，复制代码并将其粘贴到新创建的.env.local文件中。这将使用必要的内容填充环境变量文件，如下所示：

• 首先，您需要填写之前获得的 Replicate API Token 和 Stripe Key 的值。

• 接下来，我们需要设置一堆与 firebase 相关的环境变量。• 在网络浏览器中，转到 Firebase 项目并打开项目设置。向下滚动到“SDK 设置和配置”部分，然后单击“配置”。在这里，您将找到需要在.env.local文件中配置的必要环境变量值。

Firebase 项目的配置

• 对于“Table ID”环境变量，如果您尚未更改默认表名称，请输入“microSaasProfiles”作为其值。否则，将其设置为您之前添加的表名称。

• 要获取最后两个环境变量，即用于启动预测的 Webhook 和创建 Stripe checkout Webhook，您可以在 Rowy 的 Webhooks 部分找到这些值。

创建一个 `.env.local` 文件

设置 Stripe Webhook URL 🕸️

成功添加环境变量后，我们几乎准备好启动我们的项目了。然而，还剩下一项任务。我们需要在 Stripe 仪表板中设置一个Webhook URL，每当结帐完成时就会触发该 URL。

• 在 Stripe仪表板中，转到开发人员部分并访问 Webhooks。找到并单击“添加端点”按钮。

• 要获取端点 URL，请返回 Rowy 并导航到 Webhooks 部分。查找“Stripe Checkout Session Completed ”Webhook 并复制相应的端点 URL。将此 URL 粘贴为 Stripe 中的端点 URL。

• 接下来，单击“选择事件”并搜索checkout. 选择标记的事件checkout.session.completed并单击“添加事件”。

• 最后，单击“添加端点”按钮在 Stripe 仪表板中创建端点。

将 Rowy Webhook 端点添加到 Stripe

运行 NextJS 项目 ▶️

在项目目录中，通过在终端中运行以下命令来启动本地开发服务器：

此命令将启动服务器并使您能够在本地测试和开发应用程序。

现在我们可以运行localhost:3000来查看 Next.js 前端的运行情况。因此，我们可以在前端和 Rowy 后端启动并运行时验证应用程序的功能。

AI MicroSaas 前端

结论🚀

MicroSaaS 服务为轻松构建强大的应用程序提供了巨大的潜力。在 Rowy 的低代码后端的帮助下，开发人员可以有效地探索创建创新解决方案的大量机会。AI MicroSaaS Background Remover 应用程序为用户提供了一个直观的平台来轻松删除图像背景，从而体现了此类服务的功能。

扩展 AI MicroSaaS 背景去除器应用程序，附加功能可能包括高级图像编辑选项、协作功能等。此外，Rowy 的多功能性超出了背景去除的范围，使开发人员能够探索各种 MicroSaaS 应用程序，例如情感分析工具、文档识别系统或数据可视化平台。🎯

通过利用 Rowy 和 MicroSaaS 服务的力量，开发人员可以释放无限的可能性，创建有影响力且用户友好的应用程序，彻底改变各个行业，并将创新推向新的高度。🧠

作者：巴维亚维尔玛

相关工具⚙️

使用复制 API 去除背景🖼️

使用 Stripe 进行付款处理 💰

NextJS 的无缝前端体验 ✨