Chat GPT 创建APP：开发人员要被替代了吗？

news2024/11/15 12:42:29

我们又要被人工智能取代了吗？

GitHub Copilot 于 2021 年 10 月发布，整个开发社区都为之疯狂。有些人发表言论说我们很快就会失业，而其他人（比如我），认为虽然这个工具很有趣，但距离替代人工还很远。它可以提供更好的自动完成的功能，但无法为我们创建完整的应用程序。

所以我们很安全，至少我是这么想的。

几周前，Chat GPT 的发布，整个开发社区再次疯狂。这次，我尝试了AI，并要求它创建一个相当于“Hello world”的web开发：To-Do。让我们看看它是怎么做的。

项目需求

这是我给 Chatbot 的提示和我得到的答案：

你能给我代码来创建一个允许我编辑项目并将它们存储在数据库中的 to-do app 吗？请在前端使用 React，在后端使用 next js

以是我最初给的提示，关键部分已用粗体标记：

to-do app
可以编辑项目
将数据存储在数据库中
使用 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 (
    <div>
      <h1>To-Do App</h1>
      <form onSubmit={handleSubmit}>
        <input type="text" placeholder="Add a new item" />
        <button type="submit">Add</button>
      </form>
      <ul>
        {items.map((item, index) => (
          <li key={index}>
            {item}
            <button type="button" onClick={() => handleRemove(index)}>
              Remove
            </button>
          </li>
        ))}

我确实得到了一个 to-do app，并且使用了 React 和 Next，但是它没有使用数据库。事实上，它使用的是内存存储，而且它不允许我编辑项目。

现在让我们再问一次。

您可以修改该代码以添加对云数据库的支持吗？

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

瞧，这是我得到的代码：

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: '<YOUR_API_KEY>',
      databaseURL: '<YOUR_DATABASE_URL>'
    })
  }


  // 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 (
    <div>
      <h1>To-Do App</h1>
      <form onSubmit={handleSubmit}>
        <input type="text" placeholder="Add a new item" />
        <button type="submit">Add</button>
      </form>
      <ul>
        {items.map((item) => (
          <li key={item.id}>
            {item.text}
            <button type="button" on

它为我选择了 Firebase，甚至写了占位符以输入我的身份验证信息。

这段代码可以工作吗？

至少到目前为止，结果给我留下了深刻的印象，我并没有真正期待这些细节。但在测试代码时，我发现了该 chatbot 存在几个突出问题：

问题 #1：它缺少 import。这实在是一个很愚蠢的错误，我们一直在优化，但是代码却缺少了 import。

问题 #2：它从未指定要使用的 firebase npm 包的版本。也许那是我的错，但是一个简单的 npm install firebase 命令安装了一个与代码不兼容的版本。所以我问 chatbot：我应该为刚才那段代码安装什么版本的 firebase npm 包？

我得到了一个有趣的回答：