不写一行代码，搭建一款Web3 SaaS产品

昨天看到一位Youtube博主发布了一个关于他是如何用无代码工具，不写一行代码，搭建一款Web3 SaaS产品的视频，感觉非常有意思，于是写了这篇文章跟大家分享。这位叫做Simon Høiberg的博主是一名住在瑞士的软件工程师，他创办了一家服务于创作者经济的SaaS公司，并通过写作和视频跟大家分享SaaS创业的经验。

导语

Simon首先介绍了关于这款SaaS产品的基本情况，这是一款用于追踪和管理加密货币的SaaS工具——CryptoView（cryptoview.webflow.io），它支持实时追踪、预测你的加密货币投资组合情况，一站式地管理你的所有投资组合，从而使得你的投资收益最大化。

整个产品会包含官网展示页、价格套餐介绍页面、登录系统和自定义用户数据等部分，在前端部分用到的无代码工具是Webflow，订阅和用户系统会使用Memberstack、付费系统会用到Stripe，当然这里还会用到数据库Airtable来存储用户数据，最后用Zapier来连接这些无代码工具，做到数据的传输和同步。所有的这些开发都不需要写一行代码（可能还是会有一点点哈哈）。整个无代码技术栈就如下图所示：

01.

官网搭建

介绍完了产品架构后，接下去就开始正式搭建的过程了。首先我们要创建的是官网的部分，这就需要用到Webflow这个无代码工具了。Webflow可以说是市面上最早一批的无代码搭建网站前端应用平台，在今年3月份刚刚完成了1.2亿美金的C轮融资，估值40亿美金。感兴趣想要了解更多Webflow背后故事的朋友，可以关注深思圈之后的推文。

在Webflow（www.webflow.com）注册好账号后，点击“New Site”按钮来创建一个新的站点，在这里你可以选择从现有的模版创建或者是直接创建一个空白站点。Webflow上有一个模版商城，里面包含付费或者免费的模版，在视频里，Simon选择购买了一个79美金的SaaS模版直接创建了网站。

完成创建后，你可以在编辑器界面双击任意文字框，来编辑里面的内容，同时可以上传并替换相关的页面图片，也可以更改页面上各种组件和按钮的样式。一切都是通过拖拉拽的方式，不需要写一行代码，而且所见即所得，帮助你快速完成一个官网展示页的搭建。在这个步骤中，Simon更改了模版中的文字内容，同时删除了不必要的栏目和导航，还把一些图片通过Figma加上了跟加密货币相关的图标，让整个网站看起来更加符合产品的调性。

在完成官网展示页面样式的调整后，点击右上角的“Publish”按钮，稍等片刻，你就可以通过域名访问你的网站了，整个过程非常简单快速，你不需要担心服务器的部署和运维问题，这也是无代码工具的魅力之一，在降低开发难度的同时，大大提升了开发效率。

在完成官网展示页面后，下一步要做的就是创建“用户系统”了，这个系统可以实现用户的注册登陆和订阅付费功能。首先在Webflow中创建两个新页面——注册页和登陆页。大多数Webflow的模版都自带了“密码功能页”，所以你可以选择复制这个模版页布局到新的页面中，然后修改它。在完成这两个页面创建后，记得要将官网右上角登陆和注册按钮的超链接修改为这两个新页面，同时把“价格展示页”中的“Start”按钮超链接修改为跳转到注册页面。完成上述操作后，点击右上角“Publish”按钮，来发布并预览一下，看看跳转是否顺利。

02.

用户系统创建

接着我们就需要用到Memberstack（www.memberstack.com）这个工具了，这是一个帮助Webflow开发者在Webflow内部实现用户管理和付费整合的工具。在注册好账号登陆后，在“Select a site building tool”中选择“Webflow”，接着输入你网站的名称，然后在“Do you need to accept payments?”中选择“Yes I do”，并选择“USD”作为收款货币。

接着第二步是“Create a membership”，在点击这个按钮后，你可以在弹窗中配置你相关的“会员订阅计划”，比如收费价格、是否有试用期，会员周期等等。这里还要特别设置的一个地方就是“非付费用户的访问权限”，通过这个设置，你可以限制非付费用户访问的网址权限，当非付费用户访问设限的网址时，会自动弹出需要付费的窗口来引导付款。

最后一步就是把Memberstack配置好的系统跟Webflow上的站点进行关联，点击“Install header code”这个选项，然后选中并复制页面中的代码。接着回到Webflow中，点击左上角的“Project Settings”，然后选择“Custom Code”标签，然后把刚刚复制的代码粘贴到输入框中。需要特别注意的是，这个功能在Webflow中需要付费订阅才能使用。

接着我们需要回到Memberstack来创建注册和登陆表单，并把这两个表单跟之前Webflow中的两个页面相关联。点击“Forms & Fields”标签，你可以在这个页面中配置你需要用户注册时填写的相关信息，比如邮箱、密码或者手机号等等。为了使得Memberstack和Webflow中的用户信息能够关联上，我们需要特别创建一个ID字段，并且选择隐藏这个字段。

下一步你需要把Memberstack上Email和Password字段的Name和Value对应的“attribute”复制到Webflow中Email和Password输入框的“Custom attributes”中，同时你还需要把注册表单的Name和Value也复制粘贴到Webflow对应表单的“Custom

attributes”中。完成上述操作后，点击右上角“Publish”按钮，来发布并预览一下，看看能否顺利注册并登录系统来。经过测试，Simon顺利在Memberstack中看到了刚刚注册的账号信息。

然后我们需要把Memberstack上的用户数据跟Webflow中的进行同步打通。首先在Webflow中进入“CMS Collection”来创建一个内容管理系统的收集器，这里涉及到两个基本的字段：Name和Slug。Slug指的就是URL链接尾部用于区别不同用户页面的参数。此外我们还需要添加两个字段，一个是存储Email的，还有一个是存储我们加密货币数据的，这里选择“Plain Text”类型即可。完成字段添加后，点击右上角的创建按钮即可。在完成CMS创建后，Webflow会自动生成一个用户主页，我们需要根据产品的需求来修改一下这个页面里的文字内容和样式。

至此，信息同步需要做的配置准备工作已经大功告成，接下去我们需要做的就是利用Zapier来实现整个系统的打通了。

03.

数据连接和打通

Zapier是一个无代码的自动化工具，通过聚合和打通不同应用间的API来实现不同应用之间的互动和数据同步。

在这里我们需要借助Zapier来实现下面这张图上的数据联通功能，当用户在注册页面创建账号后，会自动在Memberstack上创建一条用户数据，然后利用Zapier来设置触发事件在Webflow的CMS中也创建一条相同的用户数据，并把“Webflow Member ID”同步到Memberstack中。

下面进入具体配置阶段，在Zapier（www.zapier.com)中创建账号后，选择左上角的“Create Zap”，在“App Event”中搜索Memberstack，“Trigger Event”选择“New Member”。接着回到Memberstack中，点击左边栏“Power-ups”菜单里的“Integrations”，选择Zapier，并复制里面的“API Key”粘贴到Zapier中，然后点击继续。接着我们需要配置执行的动作，在Action中搜索Webflow并选中，然后在“Action Event”中选择“Create Live Item”，然后Zapier会弹窗让你输入Webflow的账号密码来完成授权。然后是选择你的站点、CMS收集器和相关的用户信息，这里我们需要把Memberstack ID作为URL链接里Slug的部分。接下去的Action还是选择“Memberstack”，然后选择“Update Member”，在这里就可以选择Webflow的Member ID同步到Memberstack了。完成上述操作后，打开右上角的Zap开关，然后回到注册页面，注册一个新账号，来测试同步是否成功。如果顺利的话，你可以在Webflow的CMS中看到新创建的账号数据，同时Memberstack上的账号数据也顺利同步了Webflow的Member ID。

截止到目前为止，没有写一行代码，我们就已经顺利完成了官网展示页、注册和登陆页以及用户系统的搭建。由于时间限制，Simon没有在这个视频中完成整个SaaS产品的搭建工作，在下一期视频中，他会再来详细介绍付费流程Stripe的配置和具体SaaS功能的开发，大家敬请期待。

本文为深思圈原创编译文章，转载请联系公众号后台

参考材料

[1]https://youtu.be/00i3JRAQ_w4

结尾

以上就是本期关于如何用无代码工具搭建SaaS产品的全部内容了，最近几年LCNC（Low Code，No Code）工具的快速发展，越来越改变了整个开发的环境。无论是针对企业内部还是外部应用的搭建，以及各种API连接聚合器和各类生产环境一键部署工具，都极大丰富了整个开发者生态。相信在不远的未来，LCNC工具会把软件开发能力进一步赋能给更大的群体，通过拖拉拽和所见即所得的方式，降低开发门槛的同时给予使用者足够的灵活度和延展性。无代码的发展就会像从最早的汇编语言到C语言再到Java和Python语言的迭代一样，每一次生产力的革命都使得更多人加入到开发者的队伍中来。之后深思圈也会分享更多关于SaaS行业和LCNC工具的分析、教程和最新产品介绍，敬请期待！

这个号刚刚起步，希望觉得内容不错的朋友能够帮忙分享一下。您的每次分享，都是在激励我不断产出更好的内容。

欢迎关注深思圈，一起探索更大的世界。

- END -

往期文章