海外Udemy、Coursera、Skillshare、Cantrill等平臺(tái)精品編碼課程，請?jiān)L問 https://www.postcode.vip

我們看到GitHub Copilot在2021年10月發(fā)布，整個(gè)開發(fā)社區(qū)都瘋了。

有些人聲稱我們很快就會(huì)失去工作，而其他人，像我一樣，認(rèn)為雖然這個(gè)工具很有趣，但它離替代品還很遠(yuǎn)。它可以提供更好的自動(dòng)完成功能，是的，但它無法為您創(chuàng)建整個(gè)應(yīng)用程序。

所以我們很安全。

至少我們是這么想的

幾周前，我們看到了聊天GPT的發(fā)布，整個(gè)開發(fā)社區(qū)再次瘋狂起來。但他們這次是對(duì)的嗎？

我嘗試了AI，并要求它構(gòu)建相當(dāng)于“Hello world”的Web開發(fā)：一個(gè)待辦應(yīng)用

讓我們看看它是怎么做的。

以下是我對(duì)聊天機(jī)器人的提示和我得到的答案：

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

這是我的第一個(gè)提示，關(guān)鍵的問題是粗粒度的：

一個(gè)待辦事項(xiàng)應(yīng)用
編輯項(xiàng)目的能力
在數(shù)據(jù)庫中存儲(chǔ)數(shù)據(jù)
使用React和Next

現(xiàn)在，我得到的是：

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>
        ))}
      </ul>
    </div>
  )
}

export default ToDoApp

好吧，這不是我想要的。

是的，我有一個(gè)to-do應(yīng)用程序，使用React和Next，但是，它沒有使用數(shù)據(jù)庫，事實(shí)上，它使用內(nèi)存存儲(chǔ)。它不讓我編輯條目。所以我們再問一遍。

你能修改該代碼以增加對(duì)云數(shù)據(jù)庫的支持嗎？

好了，現(xiàn)在我只是引用了“那個(gè)代碼”，并添加了“云數(shù)據(jù)庫”支持。我特別試圖模糊，因?yàn)槿祟惡苋菀桌斫膺@一點(diǎn)，但人工智能需要保持對(duì)當(dāng)前對(duì)話的引用，并記住我們在談?wù)撌裁础?/p>

你瞧，我要的是：

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" onClick={() => handleRemove(item.id)}>
              Remove
            </button>
          </li>
        ))}
      </ul>
    </div>
  )
}

export default ToDoApp

它為我選擇了Firebase，它甚至為我編寫了占位符來輸入我的憑據(jù)。

是嗎？
這個(gè)代碼是否有效？

到目前為止，我對(duì)結(jié)果印象深刻，我真的沒有預(yù)料到這種細(xì)節(jié)水平。

但在測試代碼時(shí)，我發(fā)現(xiàn)了幾個(gè)問題，這些問題明顯突出了這個(gè)機(jī)器人的缺點(diǎn)。

問題#1：缺少導(dǎo)入。這是一個(gè)愚蠢的錯(cuò)誤，但通常人們的教程中往往不會(huì)寫這一步

問題2：它從未指定要使用的firebase npm包的版本。也許這是我的錯(cuò)，但是一個(gè)簡單的npm安裝firebase產(chǎn)生了一個(gè)與代碼不兼容的版本。于是我問bot：我應(yīng)該使用哪個(gè)版本的firebase npm包來實(shí)現(xiàn)這個(gè)例子？

我得到了一個(gè)有趣的答案：

我的意思是，機(jī)器人的強(qiáng)大在于，它能夠理解我的問題的背景，并提供了一個(gè)有效的（幾乎）答案。代碼確實(shí)與那個(gè)版本的firebase兼容，所以我可以嘗試一下。

但是Firebase的當(dāng)前版本是9，而不是7，這是一個(gè)問題。

有了這些問題的解決，我就能夠測試應(yīng)用程序并讓它工作了。

哦，是的，我仍然缺少編輯按鈕。這是我要求的，因?yàn)闆]有多少教程涉及應(yīng)用程序的這一部分。通常我們都會(huì)堅(jiān)持添加和刪除項(xiàng)目的按鈕。

那到底算是能替代我們嗎？
這算是一點(diǎn)chatGPT初期的缺點(diǎn)
不要誤會(huì)我的意思，我仍然認(rèn)為chatGPT是強(qiáng)大且可怕的。
再加上Dalle-2和MidJourney，這是我試過的最有趣、最先進(jìn)的人工智能軟件。
但短時(shí)間內(nèi)它們不會(huì)取代開發(fā)人員。
為什么？因?yàn)槲疑厦嫣岬降膬蓚€(gè)問題。如果你還沒有意識(shí)到這一點(diǎn)，機(jī)器人只是從用來訓(xùn)練它的文章中吐出內(nèi)容。
因此，它不是通過自我意識(shí)來創(chuàng)建的代碼，這應(yīng)該是毋庸置疑的，它只是向我展示其他人寫過的歷史內(nèi)容。不僅如此，它還向我顯示了帶有錯(cuò)誤的過時(shí)內(nèi)容。
這是因?yàn)樗鼰o法驗(yàn)證它是否真的給了我所要求的內(nèi)容。相反，它似乎在猜測（以巨大的成功率）我所尋找的答案，并給我一些看起來像它的東西。
換句話說，在其當(dāng)前狀態(tài)下，只有當(dāng)用于訓(xùn)練它的內(nèi)容經(jīng)過驗(yàn)證并由其他人保持實(shí)時(shí)更新時(shí)，chatGPT才有飛躍的質(zhì)變。文章來源地址http://www.zghlxwxcb.cn/news/detail-423020.html

到了這里，關(guān)于利用Chat GPT建立一個(gè)To-Do應(yīng)用程序--我們終于遇到了我們的替代者嗎？的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！