Human to JS

Human to JS diagram

Este proyecto ha sido archivado.

Retrospectiva

Siempre estoy buscando crecer mi carrera aprendiendo nuevas tecnologías como buen Ingeniero en Software; sin embargo, eso puede ser peligroso ya que la Ingeniería en Software no es sobre usar el último tech stack, sino de hacer que las cosas ocurran.

Fuente de inspiración

Estaba revisando Twitter hasta que encontré un tweet de una persona que había creado un side project en un fin de semana. Ese proyecto es SQL Translator, una simple UI para escribir un texto describiendo una consulta, entonces obtienes la consulta en código SQL, ¡simple!

@woiskatring usó la API de ChatGPT para enviar un prompt escrito por el user, devolviendo una respuesta en SQL dentro de un component para copiar al portapapeles. Eso fue suficiente para obtener la atención merecida por la comunidad. Tweet link)

Mi idea

¿Por qué no una web app para escribir un prompt y genera código JavaScript?

Así que comencé a construir mi idea usando este tech stack:

• Next.js: Framework web para construir la UI y como Next.js provee un directorio API para comunicarte con la API de ChatGPT
• MUI: Para usar los UI components como sistema de diseño
• Fromik & Yup: Para manejar el estado del formulario del prompt y crear esquemas de validación
• react-syntax-highlighter: Para mostrar la respuesta de ChatGPT

Usando todas estas tecnologías construí una UI simple usando el MUI Card component, entonces creé el form donde manejé todos los inputs con Formik, los inputs de tipo text y select son los por defecto de MUI, y para crear el esquema de validación usé Yup para marcar como required aquellos inputs para no enviarlos vacíos.

Con la UI finalizada, comencé a crear el endpoint en el directorio de la API para consumir la API de ChatGPT, tan solo usando un fetch como en el proyecto de @whoiskatrin. indicando qué modelo de OpenAI utilizar, en este caso text-davinci-003, puedes aprender más de los esos modelos aquí. Obviamente en la petición envié el prompt del user dentro de un string indicando a ChatGPT que solo me de el código, sin comentarios o resultados adicionales.

Valor añadido

Sí, hay opciones como GitHub Copilot que resuelven ese problema, y eso es por qué agregué la opción de escoger qué tipo de sintaxis usar, arrow function o simple function.

Añadiré más features, como una opción para TypeScript, y usar una TS Interface para que se use como referencia, ¡pero ahora estoy trabajando en más proyectos!

Inspirando personas

Lo genial de los side projects is que inspira personas como nosotros, podemos usar nuestras habilidades técnicas que llevan el pan a la mesa para transformar ideas en productos, y productos en comunidades, tal como @Serudda habla en este video.

Publicado: 14 de Abril del 2023