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

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

第一步：创建 WordPress 页面：

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

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

完整代码如下：

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

2. 添加简单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 连接，根据用户的提示生成文本。

2. 连接到自己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 协议》，转载必须注明作者和本文链接