การเปิดตัวChatGPT ทำให้เกิดแรงกระเพื่อมไปทั่วชุมชนการเขียนโปรแกรมเนื่องจากอาจได้ข้อมูลโค้ดที่น่าทึ่ง

เปรียบเทียบกับGitHub Copilotที่เปิดตัวเมื่อปีที่แล้วได้อย่างไร AIกำลังมาหลังจากงานของคุณหรือไม่? ลองหากัน

หากคุณยังไม่ได้อ่านบทความก่อนหน้าของฉันเกี่ยวกับGitHub Copilotคุณสามารถตรวจสอบได้ที่นี่

กำลังทดสอบ ChatGPT

มาดูการทดสอบแบบเดียวกับที่เรา ทดสอบ GitHub Copilotกัน

ทดสอบ 1: การดึงข้อมูลราคาหุ้น

น่าเศร้าที่ครั้งแรกมันสร้างรหัสที่ไม่ถูกต้อง

ฟังก์ชันไม่ได้กำหนดเป็นasyncและpromisesไม่มีการจัดการอย่างถูกต้อง

ความพยายามครั้งต่อไปดีกว่า

มันทำงานแปลก ๆ โดยไม่มีคีย์ API (ตราบใดที่พารามิเตอร์การสืบค้นมีapikeyคีย์ที่มีค่าสุ่ม)

ผลลัพธ์ : GitHub Copilotทิ้งChatGPTไว้ในฝุ่น

การทดสอบที่ 2: BFS Traversal

ครั้งนี้ChatGPT ประสบความสำเร็จในครั้งเดียว น่าเสียดายที่ภาพหน้าจอไม่พอดีกับหน้าจอ ดังนั้นนี่คือรหัสที่สร้างขึ้น:

class Node:
  def __init__(self, value):
    self.value = value
    self.left = None
    self.right = None

class BinarySearchTree:
  def __init__(self):
    self.root = None

  def insert(self, value):
    new_node = Node(value)

    if self.root is None:
      self.root = new_node
      return

    current_node = self.root
    while True:
      if value < current_node.value:
        if current_node.left is None:
          current_node.left = new_node
          return
        current_node = current_node.left
      else:
        if current_node.right is None:
          current_node.right = new_node
          return
        current_node = current_node.right

  def inorder_traversal(self, node, numbers):
    if node is None:
      return
    self.inorder_traversal(node.left, numbers)
    numbers.append(node.value)
    self.inorder_traversal(node.right, numbers)

  def get_numbers(self):
    numbers = []
    self.inorder_traversal(self.root, numbers)
    return numbers

bst = BinarySearchTree()
bst.insert(10)
bst.insert(5)
bst.insert(15)
bst.insert(3)
bst.insert(7)
bst.insert(13)
bst.insert(17)

numbers = bst.get_numbers()
print(numbers)  # [3, 5, 7, 10, 13, 15, 17]

ผลลัพธ์ : ChatGPTชนะรายการนี้

ทดสอบ 3: อาร์เรย์ 100 อัน

ChatGPTสร้างคำแนะนำมากมายสำหรับสิ่งนี้

เมื่อ เปิดตัว GitHub Copilot มันสร้างคำแนะนำแปลก ๆเล็กน้อย แต่ตอนนี้มันสร้างรหัสเดียวกับChatGPT

ผลลัพธ์ : เท่ากัน (ขึ้นอยู่กับเวอร์ชันของซอฟต์แวร์ที่คุณเปรียบเทียบ)

สร้างโครงการ TODO ที่สมบูรณ์

เพื่อผลักดันการทดสอบต่อไป ฉันตัดสินใจสร้าง โครงการ TODO ที่สมบูรณ์ โดยใช้ทั้งสองซอฟต์แวร์

ChatGPT

1. จะสร้างโครงการTODO ได้อย่างไร?

ขั้นตอนที่กล่าวถึงโดยChatGPTนั้นค่อนข้างครอบคลุม

2. วิธีการสร้างReactโครงการ?

3. สร้างส่วนประกอบสิ่งที่ต้องทำ

นี่เป็นส่วนที่ฉันไม่ชอบ รหัสที่สร้างขึ้นใช้ไวยากรณ์คอมโพเนนต์คลาส ดั้งเดิม มันไม่ได้จัดการการเพิ่มสิ่งที่ต้องทำเช่นกัน

4. ปรับแต่งคอมโพเนนต์สิ่งที่ต้องทำเพื่อจัดการการเพิ่มและการลบสิ่งที่ต้องทำ ตลอดจนทำเครื่องหมายว่าเสร็จสิ้น

นี่คือรหัสที่สร้างขึ้น (ยาวเกินไปสำหรับภาพหน้าจอ)

import React from "react";

// TodoItem component
const TodoItem = ({
 item,
 onDelete,
 onComplete,
}) => (
 <li>
   {item.text}
   <button onClick={onDelete}>Delete</button>
   <button onClick={onComplete}>
     {item.isComplete ? "Undo" : "Complete"}
   </button>
 </li>
);

// TodoApp component
class TodoApp extends React.Component {
 // Define the initial state of the component
 state = {
   todoItems: [],
 };

 // Method to handle adding new items to the todo list
 addTodo = (text) => {
   // Add the new item to the todo list
   this.setState({
     todoItems: [
       ...this.state.todoItems,
       { text, isComplete: false },
     ],
   });
 };

 // Method to handle deleting items from the todo list
 deleteTodo = (index) => {
   // Delete the item at the given index
   this.setState({
     todoItems: this.state.todoItems.filter(
       (_, i) => i !== index
     ),
   });
 };

 // Method to handle completing/undoing a todo item
 completeTodo = (index) => {
   // Update the "isComplete" property of the item at the given index
   this.setState((state) => {
     const todoItems = [...state.todoItems];
     todoItems[index].isComplete =
       !todoItems[index].isComplete;
     return { todoItems };
   });
 };

 // Method to render the component
 render() {
   return (
     <div>
       {/* Form to add new items to the todo list */}
       <form>
         <input
           type="text"
           placeholder="Add a todo item"
         />
         <button type="submit">Add</button>
       </form>

       {/* List of todo items */}
       <ul>
         {this.state.todoItems.map(
           (item, index) => (
             <TodoItem
               key={index}
               item={item}
               onDelete={() =>
                 this.deleteTodo(index)
               }
               onComplete={() =>
                 this.completeTodo(index)
               }
             />
           )
         )}
       </ul>
     </div>
   );
 }
}

5. พยายามครั้งสุดท้ายด้วยการกล่าวถึงเพื่อสร้างFunctional Componentsและจัดการการเพิ่ม การลบ และการทำสิ่งที่ต้องทำให้เสร็จ

import React from "react";

// TodoItem component
const TodoItem = ({ item, onDelete, onComplete }) => (
  <li>
    {item.text}
    <button onClick={onDelete}>Delete</button>
    <button onClick={onComplete}>
      {item.isComplete ? "Undo" : "Complete"}
    </button>
  </li>
);

// TodoApp component
const TodoApp = () => {
  // Define the initial state of the component
  const [todoItems, setTodoItems] = React.useState([]);
  // Method to handle adding new items to the todo list
  const addTodo = (text) => {
    // Add the new item to the todo list
    setTodoItems([
      ...todoItems,
      { text, isComplete: false },
    ]);
  };
  // Method to handle deleting items from the todo list
  const deleteTodo = (index) => {
    // Delete the item at the given index
    setTodoItems(
      todoItems.filter((_, i) => i !== index)
    );
  };
  // Method to handle completing/undoing a todo item
  const completeTodo = (index) => {
    // Update the "isComplete" property of the item at the given index
    setTodoItems((state) => {
      const todoItems = [...state];
      todoItems[index].isComplete =
        !todoItems[index].isComplete;
      return todoItems;
    });
  };
  // Return the component
  return (
    <div>
      {/* Form to add new items to the todo list */}
      <form>
        <input
          type="text"
          placeholder="Add a todo item"
        />
        <button type="submit">Add</button>
      </form>
      {/* List of todo items */}
      <ul>
        {todoItems.map((item, index) => (
          <TodoItem
            key={index}
            item={item}
            onDelete={() => deleteTodo(index)}
            onComplete={() => completeTodo(index)}
          />
        ))}
      </ul>
    </div>
  );
};

GitHub Copilot

Copilot ที่ น่าเศร้าไม่สามารถสร้างโครงการตอบโต้ได้ มันสามารถแนะนำตัวอย่างโค้ดในบริบทที่กำหนดเท่านั้น ดังนั้นมาเริ่มด้วยการสร้างแอปตอบโต้ ด้วยตัว เราเอง

1. สร้างโครงการตอบโต้

npx create-react-app react-copilot

3. ในที่สุดก็ถึงเวลาที่Copilotจะใช้เวทมนตร์ในขณะที่เรานั่งพักและจิบโมจิโต้

มีการเพิ่มความคิดเห็นที่ด้านบนของไฟล์เกี่ยวกับงานที่ต้องทำ

รายการสิ่งที่ต้องทำ

// Functional TodoItem component which takes onDelete,
// onComplete, and item ({ todo: string; completed: boolean })
// as props

// Functional TodoApp component which handles addition,
// deletion & completion of todos. The TodoItem component
// is used to render each todo item

export default function TodoItem({
 onDelete,
 onComplete,
 item,
}) {
 return (
   <div>
     <input
       type="checkbox"
       checked={item.completed}
       onChange={() => onComplete(item)}
     />
     <span
       style={{
         textDecoration: item.completed
           ? "line-through"
           : "none",
       }}
     >
       {item.todo}
     </span>
     <button onClick={() => onDelete(item)}>
       Delete
     </button>
   </div>
 );
}

5. สร้างTodoApp

import React, { useState } from "react";
import TodoItem from "./TodoItem";

export default function TodoApp() {
 const [todos, setTodos] = useState([]);
 const [todo, setTodo] = useState("");

 const addTodo = () => {
   setTodos([...todos, { todo, completed: false }]);
   setTodo("");
 };

 const deleteTodo = (item) => {
   setTodos(todos.filter((todo) => todo !== item));
 };

 const completeTodo = (item) => {
   setTodos(
     todos.map((todo) =>
       todo === item
         ? { ...todo, completed: !todo.completed }
         : todo
     )
   );
 };

 return (
   <div>
     <h1>Todo App</h1>
     <input
       type="text"
       value={todo}
       onChange={(e) => setTodo(e.target.value)}
     />
     <button onClick={addTodo}>Add</button>
     {todos.map((item, index) => (
       <TodoItem
         key={index}
         onDelete={deleteTodo}
         onComplete={completeTodo}
         item={item}
       />
     ))}
   </div>
 );
}

แม้ว่าเราจะต้องทำงานเพิ่มเติมเพื่อตั้งค่าโปรเจ็กต์ แต่Copilotก็สามารถสร้างโค้ดที่ดีกว่าสำหรับTodo Appเมื่อเทียบกับChatGPT

ท้ายที่สุดCopilotควรจะเป็นเครื่องมือที่ช่วยให้นักพัฒนาเขียนโค้ดได้เร็วขึ้น ในขณะที่ChatGPTเป็นจุดประสงค์ทั่วไปchatbotแต่ก็ยังสามารถปรับปรุงกระบวนการพัฒนาได้ แต่GitHub Copilotชนะขาดเมื่องานมุ่งเน้นไปที่การเขียนโค้ด! ทำให้เราเกิดคำถามว่า...

ใครจะรับงานของคุณ?

(ในใจ) ผู้พัฒนาAI : *หัวเราะชั่วร้าย*

ก่อนที่คุณจะเอาส้อมของคุณไปเผาGitHub HQลองย้อนกลับไปดูภาพรวม เครื่องมือเหล่านี้เป็นเครื่องมือในการปรับปรุงกระบวนการพัฒนาและไม่ ได้ มีไว้เพื่อแทนที่นักพัฒนาซอฟต์แวร์

เรายังต้องการนักพัฒนาในการเขียนโค้ด แน่นอนว่าเครื่องมือเหล่านี้สามารถช่วยให้เราเขียนโค้ดได้เร็วขึ้น แต่ถ้าปราศจากการป้อนข้อมูลของมนุษย์ พวกเขาก็ยังคิดทุกอย่างขึ้นมาเองไม่ได้

ข่าวการปลดพนักงานที่แพร่กระจายราวกับไฟป่าเนื่องจากภาวะเศรษฐกิจถดถอยอาจฟังดูน่ากลัวมาก แต่ตราบใดที่คุณหมั่นปรับปรุงและขัดเกลาทักษะของคุณ คุณจะสบายดี!

กินยาเย็นและมีความสุขในการอัพสกิล !

ติดตามฉันสำหรับเกร็ดเล็กเกร็ดน้อยใหม่ทุกสองสัปดาห์ในโดเมนของเทคโนโลยี !

ต้องการนักแปลอิสระด้านการพัฒนาส่วนหน้าที่ได้รับคะแนนสูงสุดเพื่อขจัดปัญหาด้านการพัฒนาของคุณหรือไม่ ติดต่อฉันได้ที่Upwork

ต้องการดูสิ่งที่ฉันกำลังทำอยู่หรือไม่ ตรวจสอบเว็บไซต์ส่วนตัวและGitHub ของฉัน

ต้องการเชื่อมต่อ? ติดต่อฉันทางLinkedIn

ฉันเป็น Digital Nomad และเดินทางเป็นครั้งคราว ติดตามฉันบนInstagramเพื่อดูว่าฉันกำลังทำอะไรอยู่