¡WOW, Escribí Esta Aplicación de React Con Mi Voz!

♪♪♪ ¡Hola, amigos! Hoy vamos a construir una aplicación de React solo con nuestra voz. Estoy muy emocionado, pero primero les daré un poco de contexto antes de sumergirnos en eso. Vamos a hablar sobre GitHub Copilot, consejos de ingeniería de indicaciones con GitHub Copilot, y luego vamos a usar nuestras voces para construir una aplicación de React.

Puede que te estés preguntando, ¿quién soy yo? ¿Quién es esta persona increíble que puede construir aplicaciones con su voz? Mi nombre es Rizal Scarlett, soy un defensor del desarrollo en GitHub. Tengo experiencia en ingeniería de software y enseñando a grupos subrepresentados cómo programar. También soy adicto a las redes sociales, así que si quieres conectarte conmigo, mi nombre de usuario es BlackGirlBytes en la mayoría de las plataformas, incluyendo BlueSky y Mastodon, así que búscame allí.

Bien. ¿Qué es GitHub Copilot? Es un programador de IA que te ayuda a codificar más rápido con menos trabajo. Para mí, se siente como magia. Parece que puede leer mi mente, pero siendo honesto, no puede hacer ninguna de esas cosas, y a veces no siempre genera código perfectamente escrito y actualizado. Tal vez a veces hace referencia a una API más antigua, por eso siempre animo a las personas a revisar el código que se genera, al igual que con un programador humano.

Bien, ¿qué sucede si no es magia? Bajo el capó, GitHub Copilot extrae contexto de tus comentarios y tu código y sugiere líneas individuales y funciones completas al instante. Está impulsado por OpenAI Codecs. Y es posible que estés familiarizado con OpenAI debido a ChatGPT o DALI, que es la herramienta de generación de imágenes de IA, pero Codecs es otra cosa que crearon. Y es un modelo de aprendizaje automático que traduce lenguaje natural a código. Algunos antecedentes sobre Codecs es que es una versión posterior de GPT-3, que significa Generative Pre-trained Transformer 3, que utiliza aprendizaje profundo para producir texto similar al humano. Muchas de nuestras aplicaciones favoritas, como Duolingo, utilizan GPT-3 para corrección gramatical. Y la mayor diferencia entre GPT-3 y Codecs es que Codecs ha sido ajustado para programación. Esto es lo que potencia a GitHub Copilot. Aquí tienes un ejemplo de GitHub Copilot en acción. Tenemos a Melmykdev de Twitter, que está utilizando GitHub Copilot para traducir las cadenas, responder preguntas y fechas. Y todo lo que hacen es proporcionar contexto a través del código de idioma, por ejemplo, FR para francés, JP para japonés, ES para español, y GitHub Copilot toma ese contexto y lo traduce en las palabras correctas. Entonces, tal vez estés pensando, he usado GitHub Copilot y no está funcionando para mí, no lo está haciendo. Permíteme presentarte el concepto de ingeniería de indicaciones. Y esa es la práctica de usar indicaciones para obtener el resultado que deseas. Aquí tienes mis tres principales consejos para la ingeniería de indicaciones. Dale una descripción de tarea de alto nivel. Al comienzo del archivo, describe el propósito de la aplicación para que sepa qué está haciendo. Esto es especialmente útil si estás comenzando desde cero, sin código. GitHub Copilot no tiene contexto.

Entonces, tienes que darle algo así como un comentario. También proporcionando ejemplos, ¿verdad? En los modelos de aprendizaje automático, aprenden a partir de ejemplos. Así que existe este concepto de aprendizaje con pocos ejemplos donde alimentas a tu modelo ejemplos y obtiene una idea más refinada de lo que debería generar en función de ciertas entradas. Y luego, también, iterar más para ser más específico. Tal vez escribiste un comentario muy vago que dice obtener data, pero GitHub Copilot pregunta ¿obtener qué data? Dile que quieres obtener los datos del usuario o los IDs de usuario que pertenecen a este individuo específico o lo que sea. Sé más específico. Adelante y borra ese comentario que escribiste y borra la sugerencia y reitera en ello.

Bien, aquí tienes un ejemplo de cómo estoy utilizando estos consejos de ingeniería de sugerencias que acabo de compartir contigo. En la parte superior, puedes ver que escribí una descripción de tarea de alto nivel. Quiero crear un editor básico de markdown. Quiero utilizar los hooks de React, quiero tener una vista previa en vivo del texto de markdown y obtengo todo eso, pero no es exactamente lo que quería. Así que borro algunas partes y escribo un comentario que dice que quiero tener un valor predeterminado para mi variable de fecha de uso y quiero que ese valor diga `escribe aquí tu markdown` y luego tengo eso y lo pruebo y funciona bastante bien. Tengo encabezados, tengo viñetas, tengo negritas, tengo cursivas, tengo enlaces, funciona muy bien.

Pero pasemos a la parte de voz. ¿Por qué importa eso, verdad? GitHub Copilot puede ayudarte a generar ideas, refrescar tu memoria, mantener el enfoque, pero también puede ayudarte a escribir y podrías preguntarte, ¿por qué necesito ayuda para escribir? Tal vez tengas problemas de destreza física, tal vez tengas problemas de visión. A medida que todos envejecemos, nuestra visión disminuirá por lo que esto es algo útil en términos de accesibilidad de la programación. Así que vamos a sumergirnos en ello. Voy a utilizar Copilot Voice para crear una aplicación simple de lista de tareas. Vamos a configurar todo aquí. Bien. Ve a la línea 16. Crea una variable de estado para los nuevos elementos de la lista de tareas. Crea una función para manejar la adición de nuevos elementos de la lista de tareas. Crea una función para eliminar elementos de la lista de tareas. Guarda el archivo.

Así que vemos aquí que pudo crear un par de funciones para nosotros y utilizar variables de estado, algunas variables de estado, quiero decir. Solo quiero avanzar aquí por cuestión de tiempo y hacer que renderice algunos elementos para nosotros. Crea un formulario de entrada para agregar elementos a la lista de tareas. Crea una lista no ordenada de elementos de la lista de tareas con un botón para eliminar cada elemento. Guarda el archivo. Como puedes ver, esto no está editado porque hay un pequeño error aquí. Realmente no queremos los comentarios aquí. Pero está bien. Estamos haciendo esto en vivo. Muy bien. Lo siguiente que quiero hacer es decirle que ejecute el programa. Ejecutar programa.

Genial. Ahora esto está en vivo en Localhost 3000. Así que puedo ir a mi navegador. Voy a actualizar. Y aquí tenemos cada elemento de la lista de tareas. Quiero probarlo para ver si funciona. Hablar en React Summit. Y vamos a intentar eliminar. Así que funciona. Pudimos construir una aplicación simple con nuestras voces.

Si quieres aprender más sobre GitHub Copilot, puedes ir a github.com slash features slash Copilot. Quiero agradecer a React Summit por permitirme hablar. Y gracias por escuchar. Adiós. Gracias. Gracias.