El lanzamiento de ChatGPT provocó ondas en la comunidad de programación, ya que podía generar fragmentos de código increíbles.

¿Cómo se compara con GitHub Copilot lanzado el año pasado? ¿ La IA viene tras tu trabajo? Vamos a averiguar.

Si no ha leído mi artículo anterior sobre GitHub Copilot , puede consultarlo aquí .

Probando ChatGPT

Repasemos brevemente las mismas pruebas a las que sometimos a GitHub Copilot .

Prueba 1: obtención del precio de las acciones

Lamentablemente, la primera vez que generó un código incorrecto.

La función no se definió como async, y promisesno se manejaron correctamente.

El siguiente intento fue mejor.

Extrañamente, funciona sin la clave API (siempre que los parámetros de consulta contengan la apikeyclave con cualquier valor aleatorio).

Resultado : GitHub Copilot deja ChatGPT en el polvo.

Prueba 2: BFS Transversal

Esta vez, ChatGPT lo logró de una sola vez, lamentablemente fue tan largo que una captura de pantalla no cabía en la pantalla, así que aquí está el código generado:

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 gana este.

Prueba 3: Matriz de 100 unos

ChatGPT generó varias sugerencias para esta

Cuando se lanzó GitHub Copilot , generó una sugerencia un poco rara, pero ahora genera el mismo código que ChatGPT .

Resultado : empate (según la versión del software que compare)

Creación de un proyecto TODO completo

Para llevar más lejos las pruebas, decidí crear un proyecto TODO completo usando ambos software.

ChatGPT

1. ¿Cómo crear un proyecto TODO ?

Los pasos mencionados por ChatGPT son bastante completos .

2. ¿Cómo crear un Reactproyecto?

3. Crear un componente Todo

Esta es la parte que no me gustó. El código generado usaba la sintaxis de componente de clase heredada. Tampoco estaba manejando la adición de todos

4. Optimice el componente Todo para manejar la adición y eliminación de todos, así como para marcarlos como hechos.

Aquí está el código que generó (demasiado largo para una captura de pantalla)

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. Último intento mencionando la creación de componentes funcionales y el manejo de la adición, eliminación y finalización 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>
  );
};

Copiloto de GitHub

Lamentablemente , Copilot no puede generar un proyecto React. Solo puede sugerir fragmentos de código en un contexto determinado, así que comencemos creando una aplicación de reacción nosotros mismos .

1. Crea un proyecto React

npx create-react-app react-copilot

3. Finalmente, es hora de que Copilot haga su magia mientras nos sentamos y bebemos un mojito.

Se agregó un comentario en la parte superior del archivo, sobre la tarea a realizar.

Artículo pendiente

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

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

Aunque tuvimos que hacer trabajo adicional para configurar el proyecto, Copilot pudo generar un mejor código para la aplicación Todo en comparación con ChatGPT .

Al final del día, se supone que Copilot es una herramienta para ayudar a los desarrolladores a escribir código más rápido, mientras que ChatGPT es un propósito general chatbot, pero todavía puede optimizar el proceso de desarrollo, pero GitHub Copilot gana sin dudas cuando la tarea está enfocada en la codificación. Esto nos lleva a la pregunta...

¿Quién tomará tu trabajo?

(En tu mente) Desarrolladores de la IA : * risa malvada *

Antes de sacar las horquillas para quemar el cuartel general de GitHub , demos un paso atrás y miremos el panorama general. Estas son herramientas para agilizar el proceso de desarrollo y NO pretenden reemplazar a los desarrolladores.

Todavía necesitamos desarrolladores para escribir el código. Claro, estas herramientas pueden ayudarnos a codificar más rápido, pero sin la participación humana aún no pueden crear todo por su cuenta .

La noticia de los despidos que se propagan como la pólvora debido a la recesión puede sonar extremadamente aterrador, pero mientras sigas actualizando y puliendo tus habilidades, ¡estarás bien!

¡ Tómate una pastilla para relajarte y feliz mejora de tus habilidades !

¡Sígueme para conocer novedades quincenales sobre el dominio de la tecnología !

¿ Necesita un freelancer de desarrollo front-end mejor calificado para eliminar sus problemas de desarrollo? Contáctame en Upwork

¿Quieres ver en qué estoy trabajando? Consulta mi sitio web personal y GitHub

¿Quieres conectarte? Ponte en contacto conmigo en LinkedIn

Soy un Nómada Digital y ocasionalmente viajo. Sígueme en Instagram para ver lo que estoy haciendo.