经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 大数据/云/AI » 人工智能基础 » 查看文章
续集来了!我让 GPT-4 用 Laf 三分钟写了个完整的待办事项 App
来源:cnblogs  作者:米开朗基杨  时间:2023/3/22 9:27:50  对本文有异议

书接前文,上篇文章我们教大家如何三分钟时间用 Laf 实现一个自己的 ChatGPT

一觉醒来,GPT-4 已经发布了!

GPT-4 实现了真正的多模态,可以把纸笔画的原型直接写出网页代码读论文时还能理解插图含意

好消息是,ChatGPT Plus 用户目前可以提前尝鲜 GPT-4 模型。作为高贵的 Plus 用户,这怎么能忍?立马打开 ChatGPT 切换到最新模型。

一位 Twitter 网友经过测试发现,使用了 GPT-4 模型的 ChatGPT 编码能力有了显著的提高,甚至可以写出一个完整的工程出来。

既然如此,我有一个想法,先把 Laf 的所有文档内容喂给它,然后再让它给我写一个完整的待办事项 App。不知道它能不能完成这个任务呢?

一顿操作猛如虎训练完文档后,开始正式对它进行考试:

我按照它提供的代码编写云函数和前端项目代码,最后竟然真的成功运行了:

看来能力确实很强啊,可以正常插入数据,竟然毫无 bug。本文到此结束,完结撒花~~

接下来所有的内容都是针对 GPT-4 回复内容的解读和注解,以帮助读者使用 Laf 从零开发一个简单的待办实现 App??

准备工作

  1. 你需要在 laf.dev 上注册一个账户。
  2. 登录到 laf.dev,点击 新建 按钮,创建一个空应用。
  3. 待应用成功启动后,点击右侧 「开发」 按钮,进入应用的「开发控制台」,接下来,我们将在「开发控制台」 进行第一个 laf 应用的功能开发。

编写云函数

首先需要创建一个云函数。

然后在 getTodos 云函数中写上以下代码,写完以后记得在右上角找到 「发布」两个字,点一下发布。

  1. import cloud from '@lafjs/cloud'
  2. const db = cloud.database()
  3. export async function main(ctx: FunctionContext) {
  4. // 调用云数据库的 get() 方法从 "todos" 集合中查询所有待办事项
  5. const todos = await db.collection('todos').get()
  6. // 将查询到的待办事项数据返回给前端
  7. return todos
  8. }

按照刚刚的方式我们再创建 addTodo updateTodo 这两个云函数,并分别写入代码。

  1. import cloud from '@lafjs/cloud'
  2. const db = cloud.database()
  3. export async function main(ctx: FunctionContext) {
  4. // 从前端传来的数据中提取 content(待办事项内容)
  5. const { content } = ctx.body
  6. // 创建一个新的待办事项对象,包含 content 和 completed(是否完成)两个属性
  7. const newTodo = {
  8. content,
  9. completed: false,
  10. }
  11. // 调用云数据库的 add() 方法将新的待办事项添加到 "todos" 集合中
  12. const res = await db.collection('todos').add(newTodo)
  13. // 将添加操作的结果返回给前端
  14. return res
  15. }
  1. import cloud from '@lafjs/cloud'
  2. const db = cloud.database()
  3. export async function main(ctx: FunctionContext) {
  4. // 从前端传来的数据中提取 id(待办事项的唯一标识)和 data(待更新的数据)
  5. const { id, data } = ctx.body
  6. // 调用云数据库的 where() 方法筛选出指定 id 的待办事项
  7. // 然后调用 update() 方法更新该待办事项的数据
  8. const res = await db.collection('todos').where({ _id: id }).update(data)
  9. // 将更新操作的结果返回给前端
  10. return res
  11. }

再次提醒,更改过的每一个云函数都需要 「发布」才能生效哦!

创建集合

这里的集合,对应着传统数据库的表,用来存储数据。

前端

前端这里我们用的是 Vue 项目来演示,React/Angular/小程序,操作都是相同的。

首先需要在前端项目中安装 laf-client-sdk

  1. $ npm install laf-client-sdk

还记得刚创建完项目的页面吗,我们需要回到那里找到我们需要用到的<APPID>

引入并创建 cloud 对象,这里需要注意的是<APPID>需要换成自己的。

  1. import { Cloud } from "laf-client-sdk"; // 引入
  2. // 创建cloud对象
  3. const cloud = new Cloud({
  4. baseUrl: "https://<AppID>.laf.dev", // 这里的 <AppID> 需要换成自己的 AppID
  5. getAccessToken: () => '', // 这里先为空
  6. });

然后我们在前端需要的地方调用我们的云函数。

  1. // 获取待办事项列表
  2. async function fetchTodos() {
  3. // 调用云函数 "getTodos" 来获取待办事项
  4. const res = await cloud.invoke("getTodos")
  5. // 将获取到的待办事项数据存储在 todos.value 中
  6. todos.value = res.data
  7. }
  8. // 添加新的待办事项
  9. async function addTodo() {
  10. // 如果输入框的值为空,则直接返回
  11. if (!newTodo.value.trim()) return
  12. // 调用云函数 "addTodo",添加新的待办事项,传递输入框的值
  13. await cloud.invoke("addTodo", { content: newTodo.value.trim() })
  14. // 清空输入框的值
  15. newTodo.value = ""
  16. // 刷新待办事项列表,以显示新添加的待办事项
  17. await fetchTodos()
  18. }
  19. // 更新待办事项的状态
  20. async function updateTodo(todo) {
  21. // 调用云函数 "updateTodo",更新待办事项的完成状态
  22. await cloud.invoke("updateTodo", {
  23. id: todo._id, // 传递待办事项的唯一 ID
  24. data: { completed: todo.completed }, // 更新完成状态
  25. })
  26. }

到这里我们已经完成了项目的核心功能,可以正常插入数据:

从上述步骤可以看出,整个 App 的后端都托管在 Laf 中,不需要自己准备服务器、搭建服务等等,只需要专注于业务逻辑即可。

除了后端之外,前端能不能也托管在 Laf 中呢?完全没问题!参考上篇文章

不过细心的同学应该发现了,ChatGPT 给出的代码中并不包含删除的功能,你可以按照本文给出的思路继续让 ChatGPT 完善代码,或者可以直接参考 Laf 的官方文档:

原文链接:https://www.cnblogs.com/ryanyangcs/p/17240046.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号