续集来了!我让 GPT-4 用 Laf 三分钟写了个完整的待办事项 App

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

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

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

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

续集来了!我让 GPT-4 用 Laf 三分钟写了个完整的待办事项 App

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

续集来了!我让 GPT-4 用 Laf 三分钟写了个完整的待办事项 App

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

续集来了!我让 GPT-4 用 Laf 三分钟写了个完整的待办事项 App

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

续集来了!我让 GPT-4 用 Laf 三分钟写了个完整的待办事项 App

续集来了!我让 GPT-4 用 Laf 三分钟写了个完整的待办事项 App

续集来了!我让 GPT-4 用 Laf 三分钟写了个完整的待办事项 App

续集来了!我让 GPT-4 用 Laf 三分钟写了个完整的待办事项 App

续集来了!我让 GPT-4 用 Laf 三分钟写了个完整的待办事项 App

续集来了!我让 GPT-4 用 Laf 三分钟写了个完整的待办事项 App

续集来了!我让 GPT-4 用 Laf 三分钟写了个完整的待办事项 App

续集来了!我让 GPT-4 用 Laf 三分钟写了个完整的待办事项 App

续集来了!我让 GPT-4 用 Laf 三分钟写了个完整的待办事项 App

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

续集来了!我让 GPT-4 用 Laf 三分钟写了个完整的待办事项 App

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

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

准备工作

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

编写云函数

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

续集来了!我让 GPT-4 用 Laf 三分钟写了个完整的待办事项 App

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

import cloud from '@lafjs/cloud'

const db = cloud.database()
export async function main(ctx: FunctionContext) {
  // 调用云数据库的 get() 方法从 "todos" 集合中查询所有待办事项
  const todos = await db.collection('todos').get()

  // 将查询到的待办事项数据返回给前端
  return todos
}

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

import cloud from '@lafjs/cloud'

const db = cloud.database()
export async function main(ctx: FunctionContext) {
  // 从前端传来的数据中提取 content(待办事项内容)
  const { content } = ctx.body

  // 创建一个新的待办事项对象,包含 content 和 completed(是否完成)两个属性
  const newTodo = {
    content,
    completed: false,
  }

  // 调用云数据库的 add() 方法将新的待办事项添加到 "todos" 集合中
  const res = await db.collection('todos').add(newTodo)

  // 将添加操作的结果返回给前端
  return res
}
import cloud from '@lafjs/cloud'

const db = cloud.database()
export async function main(ctx: FunctionContext) {
  // 从前端传来的数据中提取 id(待办事项的唯一标识)和 data(待更新的数据)
  const { id, data } = ctx.body

  // 调用云数据库的 where() 方法筛选出指定 id 的待办事项
  // 然后调用 update() 方法更新该待办事项的数据
  const res = await db.collection('todos').where({ _id: id }).update(data)

  // 将更新操作的结果返回给前端
  return res
}

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

创建集合

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

续集来了!我让 GPT-4 用 Laf 三分钟写了个完整的待办事项 App

前端

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

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

$ npm install laf-client-sdk

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

续集来了!我让 GPT-4 用 Laf 三分钟写了个完整的待办事项 App

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

import { Cloud } from "laf-client-sdk"; // 引入

// 创建cloud对象
const cloud = new Cloud({
  baseUrl: "https://<AppID>.laf.dev", // 这里的 <AppID> 需要换成自己的 AppID
  getAccessToken: () => '', // 这里先为空
});

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

// 获取待办事项列表
async function fetchTodos() {
  // 调用云函数 "getTodos" 来获取待办事项
  const res = await cloud.invoke("getTodos")
  // 将获取到的待办事项数据存储在 todos.value 中
  todos.value = res.data
}

// 添加新的待办事项
async function addTodo() {
  // 如果输入框的值为空,则直接返回
  if (!newTodo.value.trim()) return

  // 调用云函数 "addTodo",添加新的待办事项,传递输入框的值
  await cloud.invoke("addTodo", { content: newTodo.value.trim() })
  // 清空输入框的值
  newTodo.value = ""
  // 刷新待办事项列表,以显示新添加的待办事项
  await fetchTodos()
}

// 更新待办事项的状态
async function updateTodo(todo) {
  // 调用云函数 "updateTodo",更新待办事项的完成状态
  await cloud.invoke("updateTodo", {
    id: todo._id, // 传递待办事项的唯一 ID
    data: { completed: todo.completed }, // 更新完成状态
  })
}

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

续集来了!我让 GPT-4 用 Laf 三分钟写了个完整的待办事项 App

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

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

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

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

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:续集来了!我让 GPT-4 用 Laf 三分钟写了个完整的待办事项 App - Python技术站

(0)
上一篇 2023年4月17日
下一篇 2023年4月17日

相关文章

  • 王家林的“云计算分布式大数据Hadoop实战高手之路—从零开始”的第九讲Hadoop图文训练课程:剖析NameNode和Secondary NameNode的工作机制和流程

    本讲主要剖析SecondaryNameNode。   “云计算分布式大数据Hadoop实战高手之路”之完整发布目录 云计算分布式大数据实战技术Hadoop交流群:312494188,每天都会在群中发布云计算实战性资料,欢迎大家加入!   Hadoop在启动的时候,会启动SecondaryNameNode,我们使用JPS命令查看一下查看一下Hadoop启动时启…

    云计算 2023年4月11日
    00
  • 3分钟快速学会在ASP.NET Core MVC中如何使用Cookie

    当我们开发Web应用程序时,处理用户的会话和状态变得至关重要。为了满足这个需求,浏览器通常使用Cookie来记录关于用户会话和状态的信息。在ASP.NET Core MVC中,我们可以轻易地使用Cookie来维护会话和状态的信息。 以下是实现在ASP.NET Core MVC中如何使用Cookie的完整攻略。 步骤 1:创建一个ASP.NET Core MV…

    云计算 2023年5月17日
    00
  • 阿里云深度整合万网业务 提供一站式解决方案

    阿里云和万网都是阿里巴巴集团旗下公司,阿里云为企业级客户提供云计算和大数据服务,而万网则为中小企业提供域名注册、网站建设等一站式服务。近年来,阿里云和万网逐渐整合,打造了一套完整的解决方案,帮助企业和个人快速上云。 下面是详细的攻略流程: 1. 注册阿里云账号并开通万网服务 首先,用户需要注册阿里云账号,网址为:https://account.aliyun.…

    云计算 2023年5月17日
    00
  • 什么是云计算?云计算三种模式Sass、Paas、Iaas

    云计算旨在通过网络把多个成本相对较低的计算实体整合成一个具有强大计算能力的完美系统,并借助现今的商业模式把强大的计算能力分布到终端用户手中。目前,国内市面上有许多提供云计算的供应商,比如阿里云、腾讯云、百度云、华为云、网易云。 云计算 云计算的“云”指的是计算机网络(一般指的是 Internet),“计算”指的是多个计算机共同计算巨大的数据的过程。通过云计算…

    云计算 2023年4月12日
    00
  • “创新雷神号”卫星成功发射,华为云分布式云原生“天地一体”首次组网成功

    2022年2月27日,我国在文昌发射场使用长征八号运载火箭,以“1箭22星”方式,成功将“创新雷神号”卫星等共22颗卫星发射升空。卫星主要用于提供商业遥感信息、海洋环境监测、森林防火减灾等服务。其中“创新雷神号” 作为“天算星座”计划的第二颗先导试验星,主要基于由北京邮电大学、华为云、北京大学联合研制的星地融合分布式网络验证平台开展试验验证。 “天算星座”计…

    云计算 2023年4月10日
    00
  • 谈谈所谓云计算,App Engine 试用有感

    如果你是 Google 公司的一名员工,你完成了一些代码,想上传到公司的服务器让它工作。但是这里有十几万台服务器,你选择哪台呢? 这两天玩了玩 Google App Engine,感觉所谓云计算就是一个屏蔽底层细节的操作系统,只不过这个操作系统是管理分布式计算的。从对用户起的作用来说,与我们现在用的 Linux Windows 本质上没什么区别。 让我们回想…

    云计算 2023年4月12日
    00
  • 安卓其它

    安卓其它攻略 本文将介绍安卓其它的完整攻略,包括环境搭建、开发流程、示例说明等。 1. 环境搭建 在开始之前,需要完成以下环境搭建: 安装Android Studio 配置Android SDK 配置Gradle 2. 开发流程 安卓其它开发流程包括以下步骤: 2.1 创建项目 在Android Studio中创建项目,选择项目类型和配置。 2.2 设计界面…

    云计算 2023年5月16日
    00
  • 华为云发布冷启动加速解决方案:助力Serverless计算速度提升90%+

    摘要:本文介绍了华为云对冷启动优化这一业界难题的探索之路,创新提出了基于进程级快照的优化方案。 作者信息—— 子游:华为元戎高级工程师 平山:华为云中间件 Serverless 负责人 琪君:华为元戎负责人 Key Takeaways 冷启动 (Cold Start)一直是Serverless领域面临的优化难题之一,华为云创新提出了基于进程级快照的冷启动加速…

    云计算 2023年4月13日
    00
合作推广
合作推广
分享本页
返回顶部