O lançamento do ChatGPT causou ondulações na comunidade de programação, pois poderia criar trechos de código incríveis.

Como ele se compara ao GitHub Copilot lançado no ano passado? A IA está atrás do seu trabalho? Vamos descobrir.

Se você ainda não leu meu artigo anterior sobre o GitHub Copilot , você pode conferir aqui .

Testando ChatGPT

Vamos passar brevemente pelos mesmos testes pelos quais colocamos o GitHub Copilot .

Teste 1: Busca de Preço de Ações

Infelizmente, na primeira vez gerou código incorreto.

A função não foi definida como async, e promisesnão foi tratada corretamente.

A próxima tentativa foi melhor

Estranhamente, funciona sem a chave da API (desde que os parâmetros de consulta contenham a apikeychave com qualquer valor aleatório).

Resultado : o GitHub Copilot deixa o ChatGPT comendo poeira.

Teste 2: BFS Traversal

Desta vez, o ChatGPT acertou de uma vez, infelizmente era tão longo que uma captura de tela não cabia na tela, então aqui está o código gerado:

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]

Resultado : ChatGPT ganha este.

Teste 3: Matriz de 100 uns

O ChatGPT gerou várias sugestões para este

Quando o GitHub Copilot foi lançado, ele gerou uma sugestão um pouco instável, mas agora gera o mesmo código que o ChatGPT .

Resultado : empate (dependendo de qual versão do software você compara)

Criando um projeto TODO completo

Para levar os testes adiante, decidi criar um projeto TODO completo usando ambos os softwares.

ChatGPT

1. Como criar um projeto TODO ?

As etapas mencionadas pelo ChatGPT são bastante abrangentes

2. Como criar um Reactprojeto?

3. Crie um componente Todo

Essa é a parte que não gostei. O código gerado estava usando a sintaxe herdada do componente de classe . Também não estava lidando com a adição de todos

4. Otimize o componente Todo para lidar com a adição e exclusão de tarefas, bem como marcá-las como concluídas.

Aqui está o código gerado (muito longo para uma captura de tela)

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. Última tentativa, mencionando a criação de componentes funcionais e a manipulação de adição, exclusão e conclusão de todos.

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 copiloto

Infelizmente , o Copilot não pode gerar um projeto React. Ele só pode sugerir trechos de código em um determinado contexto, então vamos começar criando um aplicativo react nós mesmos

1. Crie um projeto React

npx create-react-app react-copilot

3. Finalmente é hora do Copilot fazer sua mágica enquanto nos sentamos e saboreamos um mojito.

Um comentário foi adicionado na parte superior do arquivo, na tarefa a ser realizada

Item de tarefa

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

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

Embora tenhamos que fazer trabalho adicional para configurar o projeto, o Copilot conseguiu gerar um código melhor para o Todo App em comparação com o ChatGPT .

No final das contas, o Copilot deve ser uma ferramenta para ajudar os desenvolvedores a escrever código mais rapidamente, enquanto o ChatGPT é de uso geral chatbot, mas ainda pode agilizar o processo de desenvolvimento, mas o GitHub Copilot vence quando a tarefa é focada em codificação! Isso nos leva à pergunta...

Quem ficará com o seu emprego?

(Em sua mente) Desenvolvedores da IA : * risada maligna *

Antes de pegar seus forcados para incendiar o GitHub HQ , vamos dar um passo para trás e ver o quadro geral. Essas são ferramentas para agilizar o processo de desenvolvimento e NÃO se destinam a substituir os desenvolvedores.

Ainda precisamos de desenvolvedores para escrever o código. Claro, essas ferramentas podem nos ajudar a codificar mais rapidamente, mas sem a entrada humana, elas ainda não podem criar tudo por conta própria .

A notícia de demissões se espalhando como fogo devido à recessão pode parecer extremamente assustadora, mas contanto que você continue atualizando e aprimorando suas habilidades, você ficará bem!

Tome uma pílula relaxante e feliz upskilling !

Siga -me para novidades quinzenais sobre o domínio da tecnologia !

Precisa de um freelancer de desenvolvimento front-end com a melhor classificação para acabar com seus problemas de desenvolvimento? Entre em contato comigo no Upwork

Quer ver no que estou trabalhando? Confira meu site pessoal e GitHub

Quer se conectar? Entre em contato comigo no LinkedIn

Sou nômade digital e viajo ocasionalmente. Siga-me no Instagram para conferir o que estou fazendo.