ChatGPT'nin piyasaya sürülmesi, inanılmaz kod parçacıklarıyla ortaya çıkabileceği için programlama topluluğu aracılığıyla dalgalar gönderdi.

Geçen yıl yayınlanan GitHub Copilot ile nasıl karşılaştırılır ? AI işinizin peşinden mi geliyor ? Hadi bulalım.

GitHub Copilot ile ilgili bir önceki yazımı okumadıysanız buradan göz atabilirsiniz .

ChatGPT'yi test etme

GitHub Copilot'a uyguladığımız testleri kısaca gözden geçirelim .

Test 1: Hisse Senedi Fiyat Getirmesi

Ne yazık ki, ilk kez yanlış kod üretti.

İşlev olarak tanımlanmadı asyncve promisesdüzgün bir şekilde işlenmedi.

Bir sonraki girişim daha iyiydi

Garip bir şekilde, API anahtarı olmadan çalışır (sorgu parametreleri apikeyherhangi bir rasgele değere sahip anahtarı içerdiği sürece ).

Sonuç : GitHub Copilot , ChatGPT'yi toz içinde bırakır .

Test 2: BFS Geçişi

Bu sefer, ChatGPT tek seferde başardı, ne yazık ki o kadar uzun sürdü ki ekrana bir ekran görüntüsü sığmadı, işte oluşturulan kod:

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]

Sonuç : ChatGPT bunu kazanır.

Test 3: 100'lük dizi

ChatGPT bunun için birden çok öneri oluşturdu

GitHub Copilot başlatıldığında, biraz riskli bir öneri oluşturdu , ancak şimdi ChatGPT ile aynı kodu üretiyor .

Sonuç : Bağlayın (karşılaştırdığınız yazılım sürümüne bağlı olarak)

Eksiksiz bir YAPILACAKLAR projesi oluşturma

Testleri daha ileriye taşımak için her iki yazılımı da kullanarak eksiksiz bir YAPILACAKLAR projesi oluşturmaya karar verdim .

ChatGPT

1. YAPILACAKLAR projesi nasıl oluşturulur?

ChatGPT tarafından belirtilen adımlar oldukça kapsamlıdır .

2. Nasıl Reactproje oluşturulur?

3. Bir Yapılacaklar bileşeni oluşturun

Bu benim sevmediğim kısım. Oluşturulan kod, eski Sınıf Bileşeni sözdizimini kullanıyordu. Yapılacakların eklenmesiyle de ilgilenmiyordu

4. Yapılacakların eklenmesi ve silinmesinin yanı sıra tamamlandı olarak işaretlemek için Yapılacaklar bileşenini optimize edin.

İşte oluşturduğu kod (ekran görüntüsü için çok uzun)

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. Son olarak, İşlevsel Bileşenler oluşturmaktan ve yapılacak işlerin eklenmesi, silinmesi ve tamamlanmasından bahsederek deneyin .

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 Yardımcı Pilot

Ne yazık ki Copilot , bir React projesi oluşturamaz. Yalnızca belirli bir bağlamda kod parçacıkları önerebilir, bu yüzden kendimize bir tepki uygulaması oluşturarak başlayalım.

1. Bir React projesi oluşturun

npx create-react-app react-copilot

3. Sonunda , biz arkanıza yaslanıp bir mojito yudumlarken, Copilot'un sihrini gerçekleştirme zamanı geldi .

Dosyanın en üstüne, yapılacak görevle ilgili bir açıklama eklendi.

Yapılacak Öğe

// 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. OluşturulduTodoApp

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>
 );
}

Projeyi kurmak için ek işler yapmamız gerekmesine rağmen Copilot , Todo Uygulaması için ChatGPT'ye kıyasla daha iyi kod üretebildi .

Günün sonunda, Copilot'un geliştiricilerin daha hızlı kod yazmasına yardımcı olacak bir araç olması gerekirken, ChatGPT genel bir amaçtır chatbot, yine de geliştirme sürecini düzene sokabilir, ancak GitHub Copilot , görev kodlamaya odaklandığında kesinlikle kazanır! Bu da bizi şu soruya getiriyor...

İşinizi kim alacak?

(Aklınızda) AI'nın geliştiricileri : * kötü kahkaha *

GitHub HQ'yu yakmak için dirgenlerinizi çıkarmadan önce , bir adım geriye gidelim ve büyük resme bakalım. Bunlar , geliştirme sürecini kolaylaştıran araçlardır ve geliştiricilerin yerini alması amaçlanmamıştır.

Hala kodu yazmak için geliştiricilere ihtiyacımız var. Elbette, bu araçlar daha hızlı kod yazmamıza yardımcı olabilir, ancak insan girişi olmadan yine de her şeyi kendi başlarına bulamazlar .

Durgunluk nedeniyle orman yangını gibi yayılan işten çıkarma haberleri son derece korkutucu gelebilir, ancak becerilerinizi güncellemeye ve cilalamaya devam ettiğiniz sürece, iyi olacaksınız!

Sakinleştirici bir hap alın ve mutlu bir şekilde beceri kazanın !

Teknoloji alanında iki haftada bir yeni bilgiler için beni takip edin !

Geliştirme sıkıntılarınızı ortadan kaldırmak için En Çok Puan Alan Ön Uç Geliştirme Serbest Çalışanına mı ihtiyacınız var? Upwork'te bana ulaşın

Ne üzerinde çalıştığımı görmek ister misin? Kişisel Web Siteme ve GitHub'a göz atın

Bağlanmak ister misin? LinkedIn'de bana ulaşın

Ben bir Dijital Göçebeyim ve ara sıra seyahat ederim. Neler yaptığımı görmek için beni Instagram'da takip edin.