利用Chat GPT建立一个To-Do应用程序--我们终于遇到了我们的替代者吗?

海外Udemy、Coursera、Skillshare、Cantrill等平台精品编码课程,请访问 https://www.postcode.vip

我们看到GitHub Copilot在2021年10月发布,整个开发社区都疯了。

有些人声称我们很快就会失去工作,而其他人,像我一样,认为虽然这个工具很有趣,但它离替代品还很远。它可以提供更好的自动完成功能,是的,但它无法为您创建整个应用程序。

所以我们很安全。

至少我们是这么想的

几周前,我们看到了聊天GPT的发布,整个开发社区再次疯狂起来。但他们这次是对的吗?

我尝试了AI,并要求它构建相当于“Hello world”的Web开发:一个待办应用

让我们看看它是怎么做的。

以下是我对聊天机器人的提示和我得到的答案:

can you give me the code to create a to-do app that allows me to edit the items and store them in a database? Please use React for the front-end and next js for the back-end

这是我的第一个提示,关键的问题是粗粒度的:

一个待办事项应用
编辑项目的能力
在数据库中存储数据
使用React和Next

现在,我得到的是:

import React, { useState } from 'react'
import { useRouter } from 'next/router'

function ToDoApp() {
  const [items, setItems] = useState([]) // useState to store the to-do items
  const router = useRouter()

  // handle form submission
  const handleSubmit = (event) => {
    event.preventDefault()
    const form = event.target
    const input = form.querySelector('input')

    // add the new to-do item to the array of items
    setItems([...items, input.value])
    input.value = ''
  }

  // handle item removal
  const handleRemove = (index) => {
    // create a new array without the item at the specified index
    const newItems = items.filter((item, i) => i !== index)
    setItems(newItems)
  }

  return (
    

To-Do App

    {items.map((item, index) => (
  • {item}
  • ))}
) } export default ToDoApp

好吧,这不是我想要的。

是的,我有一个to-do应用程序,使用React和Next,但是,它没有使用数据库,事实上,它使用内存存储。它不让我编辑条目。所以我们再问一遍。

can you modify that code to add support for a cloud database?

好了,现在我只是引用了“那个代码”,并添加了“云数据库”支持。我特别试图模糊,因为人类很容易理解这一点,但人工智能需要保持对当前对话的引用,并记住我们在谈论什么。

你瞧,我要的是:

import React, { useState } from 'react'
import { useRouter } from 'next/router'
import firebase from 'firebase/app'
import 'firebase/database'

function ToDoApp() {
  const [items, setItems] = useState([]) // useState to store the to-do items
  const router = useRouter()

  // initialize Firebase
  if (!firebase.apps.length) {
    firebase.initializeApp({
      apiKey: '',
      databaseURL: ''
    })
  }

  // get a reference to the Firebase database
  const database = firebase.database()
  const itemsRef = database.ref('items')

  // handle form submission
  const handleSubmit = (event) => {
    event.preventDefault()
    const form = event.target
    const input = form.querySelector('input')

    // add the new to-do item to the Firebase database
    itemsRef.push({
      text: input.value
    })
    input.value = ''
  }

  // handle item removal
  const handleRemove = (itemId) => {
    // remove the item from the Firebase database
    itemsRef.child(itemId).remove()
  }

  // useEffect to fetch the to-do items from the Firebase database
  useEffect(() => {
    itemsRef.on('value', (snapshot) => {
      const items = snapshot.val()
      const newItems = []
      for (let item in items) {
        newItems.push({
          id: item,
          text: items[item].text
        })
      }
      setItems(newItems)
    })
  }, [])

  return (
    

To-Do App

    {items.map((item) => (
  • {item.text}
  • ))}
) } export default ToDoApp

它为我选择了Firebase,它甚至为我编写了占位符来输入我的凭据。

是吗?
这个代码是否有效?

到目前为止,我对结果印象深刻,我真的没有预料到这种细节水平。

但在测试代码时,我发现了几个问题,这些问题明显突出了这个机器人的缺点。

问题#1:缺少导入。愚蠢的错误,我知道,我们人类使他们所有的时间,但代码是失踪的进口 使用效果 钩子

问题2:它从未指定要使用的firebase npm包的版本。也许这是我的错,但是一个简单的npm安装firebase产生了一个与代码不兼容的版本。于是我问bot:我应该使用哪个版本的firebase npm包来实现这个例子?

我得到了一个有趣的答案:
利用Chat GPT建立一个To-Do应用程序--我们终于遇到了我们的替代者吗?_第1张图片

我的意思是,机器人的荣誉,它能够理解我的问题的背景,并提供了一个有效的(几乎)答案。代码确实与那个版本的firebase兼容,所以我可以尝试一下。

但是Firebase的当前版本是9,而不是7,这是一个问题。

有了这些问题的解决,我就能够测试应用程序并让它工作了。
利用Chat GPT建立一个To-Do应用程序--我们终于遇到了我们的替代者吗?_第2张图片
哦,是的,我仍然缺少编辑按钮。这是我要求的,因为没有多少教程涉及应用程序的这一部分。通常我们都会坚持添加和删除项目的按钮。

那到底算是能替代我们吗?
这算是一点chatGPT初期的缺点
不要误会我的意思,我仍然认为chatGPT是强大且可怕的。
再加上Dalle-2和MidJourney,这是我试过的最有趣、最先进的人工智能软件。
但短时间内它们不会取代开发人员。
为什么?因为我上面提到的两个问题。如果你还没有意识到这一点,机器人只是从用来训练它的文章中吐出内容。
因此,它不是通过自我意识来创建的代码,这应该是毋庸置疑的,它只是向我展示其他人写过的历史内容。不仅如此,它还向我显示了带有错误的过时内容。
这是因为它无法验证它是否真的给了我所要求的内容。相反,它似乎在猜测(以巨大的成功率)我所寻找的答案,并给我一些看起来像它的东西。
换句话说,在其当前状态下,只有当用于训练它的内容经过验证并由其他人保持实时更新时,chatGPT才有飞跃的质变。

你可能感兴趣的:(gpt)