書接前文，上篇文章我們教大家如何三分鐘時間用 Laf 實現(xiàn)一個自己的 ChatGPT。
一覺醒來，GPT-4 已經(jīng)發(fā)布了！
GPT-4 實現(xiàn)了真正的多模態(tài)，可以把紙筆畫的原型直接寫出網(wǎng)頁代碼。讀論文時還能理解插圖含意。
好消息是，ChatGPT Plus 用戶目前可以提前嘗鮮 GPT-4 模型。作為高貴的 Plus 用戶，這怎么能忍？立馬打開 ChatGPT 切換到最新模型。
一位 Twitter 網(wǎng)友經(jīng)過測試發(fā)現(xiàn)，使用了 GPT-4 模型的 ChatGPT 編碼能力有了顯著的提高，甚至可以寫出一個完整的工程出來。
既然如此，我有一個想法，先把 Laf 的所有文檔內(nèi)容喂給它，然后再讓它給我寫一個完整的待辦事項 App。不知道它能不能完成這個任務(wù)呢？
一頓操作猛如虎訓(xùn)練完文檔后，開始正式對它進行考試：
我按照它提供的代碼編寫云函數(shù)和前端項目代碼，最后竟然真的成功運行了：
看來能力確實很強啊，可以正常插入數(shù)據(jù)，竟然毫無 bug。本文到此結(jié)束，完結(jié)撒花~~
接下來所有的內(nèi)容都是針對 GPT-4 回復(fù)內(nèi)容的解讀和注解，以幫助讀者使用 Laf 從零開發(fā)一個簡單的待辦實現(xiàn) App??
準(zhǔn)備工作
- 你需要在 laf.dev 上注冊一個賬戶。
- 登錄到 laf.dev，點擊
新建按鈕，創(chuàng)建一個空應(yīng)用。 - 待應(yīng)用成功啟動后，點擊右側(cè) 「開發(fā)」 按鈕，進入應(yīng)用的「開發(fā)控制臺」，接下來，我們將在「開發(fā)控制臺」 進行第一個
laf應(yīng)用的功能開發(fā)。
編寫云函數(shù)
首先需要創(chuàng)建一個云函數(shù)。
然后在 getTodos 云函數(shù)中寫上以下代碼,寫完以后記得在右上角找到 「發(fā)布」兩個字，點一下發(fā)布。
import cloud from '@lafjs/cloud'
const db = cloud.database()
export async function main(ctx: FunctionContext) {
// 調(diào)用云數(shù)據(jù)庫的 get() 方法從 "todos" 集合中查詢所有待辦事項
const todos = await db.collection('todos').get()
// 將查詢到的待辦事項數(shù)據(jù)返回給前端
return todos
}
按照剛剛的方式我們再創(chuàng)建 addTodo updateTodo 這兩個云函數(shù)，并分別寫入代碼。
import cloud from '@lafjs/cloud'
const db = cloud.database()
export async function main(ctx: FunctionContext) {
// 從前端傳來的數(shù)據(jù)中提取 content（待辦事項內(nèi)容）
const { content } = ctx.body
// 創(chuàng)建一個新的待辦事項對象，包含 content 和 completed（是否完成）兩個屬性
const newTodo = {
content,
completed: false,
}
// 調(diào)用云數(shù)據(jù)庫的 add() 方法將新的待辦事項添加到 "todos" 集合中
const res = await db.collection('todos').add(newTodo)
// 將添加操作的結(jié)果返回給前端
return res
}
import cloud from '@lafjs/cloud'
const db = cloud.database()
export async function main(ctx: FunctionContext) {
// 從前端傳來的數(shù)據(jù)中提取 id（待辦事項的唯一標(biāo)識）和 data（待更新的數(shù)據(jù)）
const { id, data } = ctx.body
// 調(diào)用云數(shù)據(jù)庫的 where() 方法篩選出指定 id 的待辦事項
// 然后調(diào)用 update() 方法更新該待辦事項的數(shù)據(jù)
const res = await db.collection('todos').where({ _id: id }).update(data)
// 將更新操作的結(jié)果返回給前端
return res
}
再次提醒，更改過的每一個云函數(shù)都需要 「發(fā)布」才能生效哦！
創(chuàng)建集合
這里的集合，對應(yīng)著傳統(tǒng)數(shù)據(jù)庫的表，用來存儲數(shù)據(jù)。
前端
前端這里我們用的是 Vue 項目來演示，React/Angular/小程序，操作都是相同的。
首先需要在前端項目中安裝 laf-client-sdk。
$ npm install laf-client-sdk
還記得剛創(chuàng)建完項目的頁面嗎，我們需要回到那里找到我們需要用到的<APPID>。
引入并創(chuàng)建 cloud 對象，這里需要注意的是<APPID>需要換成自己的。
import { Cloud } from "laf-client-sdk"; // 引入
// 創(chuàng)建cloud對象
const cloud = new Cloud({
baseUrl: "https://<AppID>.laf.dev", // 這里的 <AppID> 需要換成自己的 AppID
getAccessToken: () => '', // 這里先為空
});
然后我們在前端需要的地方調(diào)用我們的云函數(shù)。
// 獲取待辦事項列表
async function fetchTodos() {
// 調(diào)用云函數(shù) "getTodos" 來獲取待辦事項
const res = await cloud.invoke("getTodos")
// 將獲取到的待辦事項數(shù)據(jù)存儲在 todos.value 中
todos.value = res.data
}
// 添加新的待辦事項
async function addTodo() {
// 如果輸入框的值為空，則直接返回
if (!newTodo.value.trim()) return
// 調(diào)用云函數(shù) "addTodo"，添加新的待辦事項，傳遞輸入框的值
await cloud.invoke("addTodo", { content: newTodo.value.trim() })
// 清空輸入框的值
newTodo.value = ""
// 刷新待辦事項列表，以顯示新添加的待辦事項
await fetchTodos()
}
// 更新待辦事項的狀態(tài)
async function updateTodo(todo) {
// 調(diào)用云函數(shù) "updateTodo"，更新待辦事項的完成狀態(tài)
await cloud.invoke("updateTodo", {
id: todo._id, // 傳遞待辦事項的唯一 ID
data: { completed: todo.completed }, // 更新完成狀態(tài)
})
}
到這里我們已經(jīng)完成了項目的核心功能，可以正常插入數(shù)據(jù)：
從上述步驟可以看出，整個 App 的后端都托管在 Laf 中，不需要自己準(zhǔn)備服務(wù)器、搭建服務(wù)等等，只需要專注于業(yè)務(wù)邏輯即可。
除了后端之外，前端能不能也托管在 Laf 中呢？完全沒問題！參考上篇文章。
不過細(xì)心的同學(xué)應(yīng)該發(fā)現(xiàn)了，ChatGPT 給出的代碼中并不包含刪除的功能，你可以按照本文給出的思路繼續(xù)讓 ChatGPT 完善代碼，或者可以直接參考 Laf 的官方文檔：
