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

Rate this content
Bookmark

¿Alguna vez has imaginado escribir código sin siquiera tocar el teclado? En esta masterclass, te mostraré cómo escribí una aplicación de React con mi voz. Pero lo más importante, demostraré cómo esta tecnología puede ayudar a los desarrolladores con discapacidades a escribir código con facilidad y eficiencia. Juntos, exploraremos las formas en que los asistentes de inteligencia artificial activados por voz pueden revolucionar la forma en que pensamos sobre la programación. Únete a mí mientras exploramos las emocionantes posibilidades de la programación de IA activada por voz en la comunidad de React y las formas en que puede hacer que la codificación en React sea más accesible y divertida para todos.

This talk has been presented at React Summit 2023, check out the latest edition of this React Conference.

FAQ

GitHub Copilot es un asistente de programación de IA que ayuda a codificar más rápido sugiriendo líneas de código y funciones completas. Funciona extrayendo contexto de tus comentarios y código, y está impulsado por OpenAI Codecs, una versión especializada de GPT-3 ajustada para la programación.

Los principales consejos para usar GitHub Copilot incluyen: proporcionar una descripción de alto nivel al inicio del archivo, usar ejemplos para enseñar al modelo, y ser específico en tus comentarios para obtener resultados más precisos.

Para mejorar la eficacia de GitHub Copilot, puedes empezar siendo más descriptivo y específico en tus comentarios, proporcionar ejemplos concretos y reiterar tus peticiones para afinar las sugerencias del modelo.

La principal diferencia entre GPT-3 y OpenAI Codecs es que Codecs ha sido especialmente ajustado para la programación, mientras que GPT-3 se utiliza en una variedad de aplicaciones, como la corrección gramatical en Duolingo.

GitHub Copilot puede ser útil para personas con problemas de destreza física o visión, ya que facilita la escritura de código mediante la generación automatizada de líneas y funciones, mejorando así la accesibilidad en la programación.

La ingeniería de indicaciones es la práctica de usar indicaciones o instrucciones claras y específicas para guiar a GitHub Copilot hacia el resultado deseado en la generación de código, lo que mejora la precisión y relevancia de las sugerencias del modelo.

Rizal Scarlett es un desarrollador y defensor del desarrollo en GitHub con experiencia en ingeniería de software. Él utiliza GitHub Copilot para construir aplicaciones y ofrece consejos basados en su experiencia, enfocándose en cómo optimizar el uso del asistente de IA.

Rizel Scarlett
Rizel Scarlett
9 min
06 Jun, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Hoy vamos a construir una aplicación de React solo con nuestra voz utilizando GitHub Copilot, un programador de IA colaborativo impulsado por OpenAI Codecs. Es importante ser específico en tus comentarios para obtener sugerencias precisas de Copilot. Los consejos de ingeniería de la solicitud se pueden utilizar para crear diferentes aplicaciones, como un editor básico de Markdown y una aplicación simple de tareas pendientes. La aplicación se probó con éxito agregando y eliminando elementos de la lista de tareas utilizando comandos de voz.

1. Introducción a GitHub Copilot

Short description:

Hoy vamos a construir una aplicación de React solo con nuestra voz. GitHub Copilot es un programador de IA que te ayuda a codificar más rápido. Extrae contexto de tus comentarios y código para sugerir líneas y funciones. Está impulsado por OpenAI Codecs, un modelo de aprendizaje automático que traduce lenguaje natural a código. La ingeniería de indicaciones es la práctica de usar indicaciones para obtener el resultado deseado.

♪♪♪ ¡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.

2. Providing Examples and Iterating

Short description:

En los modelos de aprendizaje automático, existe un concepto llamado aprendizaje con pocos ejemplos, donde proporcionas ejemplos para refinar la salida del modelo. Es importante ser específico en tus comentarios para obtener sugerencias precisas de GitHub Copilot.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
Un Marco para Gestionar la Deuda Técnica
TechLead Conference 2023TechLead Conference 2023
35 min
Un Marco para Gestionar la Deuda Técnica
Top Content
Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.
Construyendo un Asistente AI Activado por Voz con Javascript
JSNation 2023JSNation 2023
21 min
Construyendo un Asistente AI Activado por Voz con Javascript
Top Content
This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.
Una Guía Práctica para Migrar a Componentes de Servidor
React Advanced 2023React Advanced 2023
28 min
Una Guía Práctica para Migrar a Componentes de Servidor
Top Content
React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.
Solucionando Problemas de Rendimiento en React
React Advanced 2023React Advanced 2023
22 min
Solucionando Problemas de Rendimiento en React
Top Content
This Talk discusses various strategies to improve React performance, including lazy loading iframes, analyzing and optimizing bundles, fixing barrel exports and tree shaking, removing dead code, and caching expensive computations. The speaker shares their experience in identifying and addressing performance issues in a real-world application. They also highlight the importance of regularly auditing webpack and bundle analyzers, using tools like Knip to find unused code, and contributing improvements to open source libraries.
De Monolito a Micro-Frontends
React Advanced 2022React Advanced 2022
22 min
De Monolito a Micro-Frontends
Top Content
Microfrontends are considered as a solution to the problems of exponential growth, code duplication, and unclear ownership in older applications. Transitioning from a monolith to microfrontends involves decoupling the system and exploring options like a modular monolith. Microfrontends enable independent deployments and runtime composition, but there is a discussion about the alternative of keeping an integrated application composed at runtime. Choosing a composition model and a router are crucial decisions in the technical plan. The Strangler pattern and the reverse Strangler pattern are used to gradually replace parts of the monolith with the new application.

Workshops on related topic

IA a demanda: IA sin servidor
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
IA a demanda: IA sin servidor
Top Content
Featured WorkshopFree
Nathan Disidore
Nathan Disidore
En esta masterclass, discutimos los méritos de la arquitectura sin servidor y cómo se puede aplicar al espacio de la IA. Exploraremos opciones para construir aplicaciones RAG sin servidor para un enfoque más lambda-esque a la IA. A continuación, nos pondremos manos a la obra y construiremos una aplicación CRUD de muestra que te permite almacenar información y consultarla utilizando un LLM con Workers AI, Vectorize, D1 y Cloudflare Workers.
AI para Desarrolladores de React
React Advanced 2024React Advanced 2024
142 min
AI para Desarrolladores de React
Featured Workshop
Eve Porcello
Eve Porcello
El conocimiento de las herramientas de AI es fundamental para preparar el futuro de las carreras de los desarrolladores de React, y la suite de herramientas de AI de Vercel es una vía de acceso accesible. En este curso, examinaremos más de cerca el Vercel AI SDK y cómo esto puede ayudar a los desarrolladores de React a construir interfaces de transmisión con JavaScript y Next.js. También incorporaremos APIs de terceros adicionales para construir y desplegar una aplicación de visualización de música.
Temas:- Creación de un Proyecto de React con Next.js- Elección de un LLM- Personalización de Interfaces de Transmisión- Construcción de Rutas- Creación y Generación de Componentes - Uso de Hooks (useChat, useCompletion, useActions, etc)
Trabajando con OpenAI y la Ingeniería de Prompts para Desarrolladores de React
React Advanced 2023React Advanced 2023
98 min
Trabajando con OpenAI y la Ingeniería de Prompts para Desarrolladores de React
Top Content
Workshop
Richard Moss
Richard Moss
En esta masterclass daremos un recorrido por la IA aplicada desde la perspectiva de los desarrolladores de front end, enfocándonos en las mejores prácticas emergentes cuando se trata de trabajar con LLMs para construir grandes productos. Esta masterclass se basa en los aprendizajes obtenidos al trabajar con la API de OpenAI desde su debut en noviembre pasado para construir un MVP funcional que se convirtió en PowerModeAI (una herramienta de creación de ideas y presentaciones orientada al cliente).
En la masterclass habrá una mezcla de presentación y ejercicios prácticos para cubrir temas que incluyen:
- Fundamentos de GPT- Trampas de los LLMs- Mejores prácticas y técnicas de ingeniería de prompts- Uso efectivo del playground- Instalación y configuración del SDK de OpenAI- Enfoques para trabajar con la API y la gestión de prompts- Implementación de la API para construir una aplicación orientada al cliente potenciada por IA- Ajuste fino y embeddings- Mejores prácticas emergentes en LLMOps
Construyendo una Aplicación de Shopify con React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Construyendo una Aplicación de Shopify con React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Los comerciantes de Shopify tienen un conjunto diverso de necesidades, y los desarrolladores tienen una oportunidad única para satisfacer esas necesidades construyendo aplicaciones. Construir una aplicación puede ser un trabajo duro, pero Shopify ha creado un conjunto de herramientas y recursos para ayudarte a construir una experiencia de aplicación sin problemas lo más rápido posible. Obtén experiencia práctica construyendo una aplicación integrada de Shopify utilizando el CLI de la aplicación Shopify, Polaris y Shopify App Bridge.Te mostraremos cómo crear una aplicación que acceda a la información de una tienda de desarrollo y pueda ejecutarse en tu entorno local.
Construyendo Aplicaciones AI para la Web
React Day Berlin 2023React Day Berlin 2023
98 min
Construyendo Aplicaciones AI para la Web
Workshop
Roy Derks
Roy Derks
Hoy en día, cada desarrollador está utilizando LLMs en diferentes formas y figuras. Muchos productos han introducido capacidades AI incorporadas, y en esta masterclass aprenderás cómo construir tu propia aplicación AI. No se necesita experiencia en la construcción de LLMs o en el aprendizaje automático. En cambio, utilizaremos tecnologías web como JavaScript, React y GraphQL que ya conoces y amas.
Construyendo tu Aplicación de IA Generativa
React Summit 2024React Summit 2024
82 min
Construyendo tu Aplicación de IA Generativa
WorkshopFree
Dieter Flick
Dieter Flick
La IA generativa está emocionando a los entusiastas de la tecnología y a las empresas con su vasto potencial. En esta sesión, presentaremos Retrieval Augmented Generation (RAG), un marco que proporciona contexto a los Modelos de Lenguaje Grande (LLMs) sin necesidad de volver a entrenarlos. Te guiaremos paso a paso en la construcción de tu propia aplicación RAG, culminando en un chatbot completamente funcional.
Conceptos Clave: IA Generativa, Retrieval Augmented Generation
Tecnologías: OpenAI, LangChain, AstraDB Vector Store, Streamlit, Langflow