微型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 协议》,转载必须注明作者和本文链接
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!