微型SaaS-从0到1实现

教你一小时完成一个完整的微型 SaaS, 大众创业 Go!

在 WordPress 上创建 AI 工具涉及几个主要步骤。以下是创建该工具的详细步骤:

第一步:创建 WordPress 页面:

首先,在你的 WordPress 网站上创建一个新页面来承载 AI 工具。这个页面将成为用户与工具互动的界面。” 页面 Page” 是 wordpress 的重要功能,可以用来独立进行功能和样式开发。

添加 HTML 代码:
在工具页面添加一些 HTML 代码。这将是与 OpenAI API 进行通信的起点。也是用户交互体验的重要地方。以下是 demo 代码,我们可以添加到 html 板块:

完整代码如下:

代码参考: learnwithhasan.com/create-ai-tools...

  1. 添加简单 javascript 实现提交表单和简单交互:

// 同样是利用 html 板块增加 js 代码:

这里我们的 js 提交表单到 wordpress 后端 API 函数接口:’/wp-admin/admin-ajax.php’,这是 wordpress 的标准接口写法。

现在得到的效果如下图:

url demo : saas.liangdabiao.com/%E5%BE%AE%E5%...

第二步:实现 WordPress 函数:

你需要添加一个自定义的 WordPress 函数,该函数接收用户从 HTML 表单输入的数据并将其发送到 OpenAI 的 API。这一函数充当了你的网站与 OpenAI 之间的桥梁,从而实现两者的通信。

1,基本 wordpress 后端 api 实现:

// 安装好‘Code Snippets’,新增函数代码:
function openai_generate_text() {
// Get the topic from the AJAX request
$prompt = $_POST[‘prompt’];
// OpenAI API URL and key
$api_url = ‘api.openai.com/v1/chat/completions...;
$api_key = ‘sk-XXX’; // Replace with your actual OpenAI API key
// Headers for the OpenAI API
$headers = [
‘Content-Type’ => ‘application/json’,
‘Authorization’ => ‘Bearer ‘ . $api_key
];
// Body for the OpenAI API
$body = [
‘model’ => ‘gpt-3.5-turbo’,
‘messages’ => [[‘role’ => ‘user’, ‘content’ => $prompt]],
‘temperature’ => 0.7
];
// Args for the WordPress HTTP API
$args = [
‘method’ => ‘POST’,
‘headers’ => $headers,
‘body’ => json_encode($body),
‘timeout’ => 120
];
// Send the request
$response = wp_remote_request($api_url, $args);
// Handle the response
if (is_wp_error($response)) {
$error_message = $response->get_error_message();
wp_send_json_error(“Something went wrong: $error_message”);
} else {
$body = wp_remote_retrieve_body($response);
$data = json_decode($body, true);
if (json_last_error() !== JSON_ERROR_NONE) {
wp_send_json_error(‘Invalid JSON in API response’);
} elseif (!isset($data[‘choices’])) {
wp_send_json_error(‘API request failed. Response: ‘ . $body);
} else {
wp_send_json_success($data);
}
}
// Always die in functions echoing AJAX content
wp_die();
}
add_action(‘wp_ajax_openai_generate_text’, ‘openai_generate_text’);
add_action(‘wp_ajax_nopriv_openai_generate_text’, ‘openai_generate_text’);
我们在这里建立了后端的 API 服务基层代码。这里代码是连接到 OpenAI API :
WordPress 函数将与 OpenAI 的 API 连接,根据用户的提示生成文本。

  1. 连接到自己 AI 功能的 API:

我们往往是基于 python、langchain 来得到 AI 功能 api,利用 fastapi /flask 封装成简单的 api,然后 wordpress 后端直接调用 api 接口,提供服务给外部用户。

from fastapi import FastAPI
from pydantic import BaseModel
app = FastAPI()
class User(BaseModel):
name: str
age: int
email: str
@app.get(“/“)
def read_root():
return {“message”: “Welcome to FastAPI!”}
@app.post(“/users/“)
def create_user(user: User):
return {“message”: f”User {user.name} has been created successfully!”, “user”: user}
if name == “main“:
import uvicorn
uvicorn.run(app, host=”127.0.0.1”, port=8000)
3 . wordpress 完成前后端对接 api,测试通过,打通整个流程:

注意:国内不能访问 openai,我们可以 使用代理,代码如下:

import openai
openai.api_key = ‘your-api-key’
openai.api_base = ‘https://api.openai.com' // 这里切换到自己的代理地址,例如 api2d
response = openai.Completion.create(
engine=’davinci’,
prompt=’Once upon a time’,
max_tokens=100
)
print(response.choices[0].text)
或者,我们可以切换为 KIMI 提供服务:

from openai import OpenAI
client = OpenAI(

↓ 这里指定 Kimi 的 API Key#

api_key=”{KIMI_API_KEY}”,

↓ 这里指定 Kimi 的 API 地址#

base_url=”https://api.moonshot.cn/v1",
)
completion = client.chat.completions.create(

↓ 这里指定 Kimi 的模型名称#

model=”moonshot-v1-8k”,
messages=[
{ “role”: “user”, “content”: “…” }
],
)
完成的 Demo, 可以查看: https://saas.liangdabiao.com/%e5%be%ae%e5%9e%8bsaas-%e5%9f%ba%e7%a1%80demo%e5%ba%94%e7%94%a8

第三步:权限验证和积分扣减
增加验证会员权限和积分余额,进行积分扣减

因为我们这个是微型 SaaS, 所以我们需要安装一个前端的会员模块,方便注册登录和查看个人资料,个人积分等功能,这里我们选择安装 “ultimate-member” 插件, cn.wordpress.org/plugins/ultimate-... , 积分功能选择插件:“myCred”, wordpress.org/plugins/mycred/

“ultimate-member” 插件,可以实现内容限制,例如设置只允许注册用户才能使用 SaaS 功能页面。内容权限效验方法,如下图:

“myCred” 积分插件,进行简单的用户积分维护,下面再增加一点代码,在应用使用的时候扣减积分:

$current_user_id = get_current_user_id();
if ( $current_user_id ) {
    //echo 'Current User ID: ' . $current_user_id;
    mycred_subtract( 'mycred_default', $current_user_id, -1, 'SaaS使用!' );
} else {
    //echo 'No user is currently logged in.';
}

// 检查用户在使用工具时的余额
// check for balance
$user_id = get_current_user_id();
$balance = mycred_get_users_balance($user_id);
if ($balance < 1) {
wp_send_json (“积分用光,请充值!”);
}
效果如下:

可以看到,成功进行积分扣减了。

积分购买:微型 SaaS 不想太复杂,这里暂时不想加入支付功能,因为这里是支持超级个体,他们往往没有支付收款条件。所以这里我修改为支持卡密兑换,把功能和支付分离,这样就更友好。同时,我们可以加很多免费得到积分的功能,myCred 自带很多得到积分的功能配置:

结语:
我们这里完成了完整的一个微型 SaaS, 然后学会了,其实可能一个小时就完成一个 SaaS 系统,这样就方便程序员,产品经理,或者自由职业者,AI 爱好者实现自己的小目标,最低门槛入手 AI 开发。梁工 SaaS 这里还会提供 微型 SaaS, 小型 SaaS, 中型 SaaS, 大型 SaaS 等一系列方案,有兴趣请多关注 saas.liangdabiao.com 。感谢支持,大众创业!

本作品采用《CC 协议》,转载必须注明作者和本文链接
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
《G01 Go 实战入门》
从零开始带你一步步开发一个 Go 博客项目,让你在最短的时间内学会使用 Go 进行编码。项目结构很大程度上参考了 Laravel。