Die Veröffentlichung von ChatGPT schickte Wellen durch die Programmierer-Community, da sie mit unglaublichen Code-Snippets aufwarten konnte.

Wie ist es im Vergleich zu GitHub Copilot , das letztes Jahr veröffentlicht wurde? Kommt KI nach Ihrem Job? Lass es uns herausfinden.

Wenn Sie meinen vorherigen Artikel zu GitHub Copilot noch nicht gelesen haben , können Sie ihn hier nachlesen .

Testen von ChatGPT

Lassen Sie uns kurz die gleichen Tests durchgehen, denen wir GitHub Copilot unterzogen haben .

Test 1: Abrufen des Aktienkurses

Leider wurde beim ersten Mal falscher Code generiert.

Die Funktion wurde nicht als definiert asyncund promiseswurde nicht richtig behandelt.

Der nächste Versuch war besser

Seltsamerweise funktioniert es ohne den API-Schlüssel (solange die Abfrageparameter den apikeySchlüssel mit einem zufälligen Wert enthalten).

Ergebnis : GitHub Copilot lässt ChatGPT im Staub.

Test 2: BFS-Durchquerung

Diesmal hat ChatGPT es in einem Rutsch geschafft, leider war es so lang, dass ein Screenshot nicht auf den Bildschirm passte, also hier ist der generierte Code:

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]

Ergebnis : ChatGPT gewinnt dieses Mal.

Test 3: Array von 100 Einsen

ChatGPT hat mehrere Vorschläge für diesen generiert

Als GitHub Copilot gestartet wurde, generierte es einen etwas wackeligen Vorschlag, aber jetzt generiert es denselben Code wie ChatGPT .

Ergebnis : Unentschieden (je nachdem, welche Version der Software Sie vergleichen)

Erstellen eines vollständigen TODO-Projekts

Um die Tests weiter voranzutreiben, habe ich mich entschieden, ein vollständiges TODO -Projekt mit beiden Software zu erstellen.

ChatGPT

1. Wie erstelle ich ein TODO- Projekt?

Die von ChatGPT erwähnten Schritte sind recht umfangreich

2. Wie erstelle ich ein ReactProjekt?

3. Erstellen Sie eine Todo-Komponente

Das ist der Teil, den ich nicht mochte. Der generierte Code verwendete die Legacy- Class-Component - Syntax. Es ging auch nicht um das Hinzufügen von Todos

4. Optimieren Sie die Todo-Komponente, um das Hinzufügen und Löschen von Todos zu handhaben und sie als erledigt zu markieren.

Hier ist der generierte Code (zu lang für einen Screenshot)

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. Letzter Versuch, indem erwähnt wird, funktionale Komponenten zu erstellen und das Hinzufügen, Löschen und Vervollständigen von Todos zu handhaben.

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

Leider kann Copilot kein React-Projekt erstellen. Es kann nur Code-Snippets in einem bestimmten Kontext vorschlagen, also beginnen wir damit, selbst eine Reaktions-App zu erstellen

1. Erstellen Sie ein React- Projekt

npx create-react-app react-copilot

3. Endlich ist es an der Zeit, dass Copilot seine Magie entfaltet, während wir uns zurücklehnen und einen Mojito schlürfen.

Am Anfang der Datei wurde ein Kommentar zu der zu erledigenden Aufgabe hinzugefügt

Todo-Element

// 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. GeneriertTodoApp

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

Obwohl wir für die Einrichtung des Projekts zusätzliche Arbeit leisten mussten, konnte Copilot im Vergleich zu ChatGPT besseren Code für die Todo-App generieren .

Letztendlich soll Copilot ein Tool sein, das Entwicklern hilft, Code schneller zu schreiben, während ChatGPT ein Allzweck -Tool ist chatbot, das den Entwicklungsprozess dennoch rationalisieren kann, aber GitHub Copilot gewinnt zweifellos, wenn sich die Aufgabe auf das Codieren konzentriert! Das bringt uns zu der Frage...

Wer übernimmt Ihren Job?

(In Gedanken) Entwickler der KI : * böses Lachen *

Bevor Sie Ihre Heugabeln zücken, um das GitHub-Hauptquartier niederzubrennen , lassen Sie uns einen Schritt zurücktreten und das Gesamtbild betrachten. Dies sind Tools zur Rationalisierung des Entwicklungsprozesses , und sie sollen Entwickler NICHT ersetzen.

Wir brauchen immer noch Entwickler, um den Code zu schreiben. Sicher, diese Tools können uns dabei helfen, schneller zu programmieren, aber ohne menschlichen Input können sie immer noch nicht alles selbst entwickeln .

Die Nachricht von Entlassungen , die sich aufgrund der Rezession wie ein Lauffeuer verbreiten, mag extrem beängstigend klingen, aber solange Sie Ihre Fähigkeiten aktualisieren und verbessern, wird es Ihnen gut gehen!

Nehmen Sie eine Chill-Pille und frohes Upskilling !

Folgen Sie mir für zweiwöchentlich neue Leckerbissen zum Thema Technik !

Benötigen Sie einen erstklassigen Front-End-Entwicklungs-Freelancer , der Ihre Entwicklungsprobleme beseitigt? Kontaktieren Sie mich auf Upwork

Wollen Sie sehen, woran ich arbeite? Besuchen Sie meine persönliche Website und GitHub

Möchten Sie sich verbinden? Kontaktieren Sie mich auf LinkedIn

Ich bin ein digitaler Nomade und reise gelegentlich. Folgen Sie mir auf Instagram , um zu sehen, was ich vorhabe.