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

9 min
06 Jun, 2023

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.

Available in English

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.

3. Using Prompt Engineering and Copilot Voice

Short description:

Aquí tienes un ejemplo de cómo utilizar consejos de ingeniería de sugerencias para crear un editor básico de markdown. GitHub Copilot puede ayudar con la escritura de código, haciendo que la programación sea más accesible. Ahora, vamos a utilizar Copilot Voice para crear una aplicación simple de lista de tareas. Puede generar funciones y utilizar variables de estado. También renderizaremos formularios de entrada y listas de elementos de la lista de tareas.

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.

4. Testing the Application and Conclusion

Short description:

La aplicación ahora está en vivo en Localhost 3000. La probé agregando y eliminando elementos de la lista de tareas usando mi voz. Para obtener más información sobre GitHub Copilot, visita github.com/features/Copilot. Gracias a React Summit por la oportunidad de hablar.

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.

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

TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Let’s face it: technical debt is inevitable and rewriting your code every 6 months is not an option. Refactoring is a complex topic that doesn't have a one-size-fits-all solution. Frontend applications are particularly sensitive because of frequent requirements and user flows changes. New abstractions, updated patterns and cleaning up those old functions - it all sounds great on paper, but it often fails in practice: todos accumulate, tickets end up rotting in the backlog and legacy code crops up in every corner of your codebase. So a process of continuous refactoring is the only weapon you have against tech debt.In the past three years, I’ve been exploring different strategies and processes for refactoring code. In this talk I will describe the key components of a framework for tackling refactoring and I will share some of the learnings accumulated along the way. Hopefully, this will help you in your quest of improving the code quality of your codebases.

React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.
React Advanced Conference 2022React Advanced Conference 2022
22 min
Monolith to Micro-Frontends
Top Content
Many companies worldwide are considering adopting Micro-Frontends to improve business agility and scale, however, there are many unknowns when it comes to what the migration path looks like in practice. In this talk, I will discuss the steps required to successfully migrate a monolithic React Application into a more modular decoupled frontend architecture.
React Advanced Conference 2023React Advanced Conference 2023
22 min
Power Fixing React Performance Woes
Next.js and other wrapping React frameworks provide great power in building larger applications. But with great power comes great performance responsibility - and if you don’t pay attention, it’s easy to add multiple seconds of loading penalty on all of your pages. Eek! Let’s walk through a case study of how a few hours of performance debugging improved both load and parse times for the Centered app by several hundred percent each. We’ll learn not just why those performance problems happen, but how to diagnose and fix them. Hooray, performance! ⚡️
React Summit 2023React Summit 2023
24 min
Video Editing in the Browser
Video editing is a booming market with influencers being all the rage with Reels, TikTok, Youtube. Did you know that browsers now have all the APIs to do video editing in the browser? In this talk I'm going to give you a primer on how video encoding works and how to make it work within the browser. Spoiler, it's not trivial!

Workshops on related topic

DevOps.js Conf 2024DevOps.js Conf 2024
163 min
AI on Demand: Serverless AI
Featured WorkshopFree
In this workshop, we discuss the merits of serverless architecture and how it can be applied to the AI space. We'll explore options around building serverless RAG applications for a more lambda-esque approach to AI. Next, we'll get hands on and build a sample CRUD app that allows you to store information and query it using an LLM with Workers AI, Vectorize, D1, and Cloudflare Workers.
React Advanced Conference 2023React Advanced Conference 2023
98 min
Working With OpenAI and Prompt Engineering for React Developers
Workshop
In this workshop we'll take a tour of applied AI from the perspective of front end developers, zooming in on the emerging best practices when it comes to working with LLMs to build great products. This workshop is based on learnings from working with the OpenAI API from its debut last November to build out a working MVP which became PowerModeAI (A customer facing ideation and slide creation tool).
In the workshop they'll be a mix of presentation and hands on exercises to cover topics including:
- GPT fundamentals- Pitfalls of LLMs- Prompt engineering best practices and techniques- Using the playground effectively- Installing and configuring the OpenAI SDK- Approaches to working with the API and prompt management- Implementing the API to build an AI powered customer facing application- Fine tuning and embeddings- Emerging best practice on LLMOps
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Shopify merchants have a diverse set of needs, and developers have a unique opportunity to meet those needs building apps. Building an app can be tough work but Shopify has created a set of tools and resources to help you build out a seamless app experience as quickly as possible. Get hands on experience building an embedded Shopify app using the Shopify App CLI, Polaris and Shopify App Bridge.We’ll show you how to create an app that accesses information from a development store and can run in your local environment.
JSNation 2022JSNation 2022
41 min
Build a chat room with Appwrite and React
WorkshopFree
API's/Backends are difficult and we need websockets. You will be using VS Code as your editor, Parcel.js, Chakra-ui, React, React Icons, and Appwrite. By the end of this workshop, you will have the knowledge to build a real-time app using Appwrite and zero API development. Follow along and you'll have an awesome chat app to show off!
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Hard GraphQL Problems at Shopify
WorkshopFree
At Shopify scale, we solve some pretty hard problems. In this workshop, five different speakers will outline some of the challenges we’ve faced, and how we’ve overcome them.

Table of contents:
1 - The infamous "N+1" problem: Jonathan Baker - Let's talk about what it is, why it is a problem, and how Shopify handles it at scale across several GraphQL APIs.
2 - Contextualizing GraphQL APIs: Alex Ackerman - How and why we decided to use directives. I’ll share what directives are, which directives are available out of the box, and how to create custom directives.
3 - Faster GraphQL queries for mobile clients: Theo Ben Hassen - As your mobile app grows, so will your GraphQL queries. In this talk, I will go over diverse strategies to make your queries faster and more effective.
4 - Building tomorrow’s product today: Greg MacWilliam - How Shopify adopts future features in today’s code.
5 - Managing large APIs effectively: Rebecca Friedman - We have thousands of developers at Shopify. Let’s take a look at how we’re ensuring the quality and consistency of our GraphQL APIs with so many contributors.
React Summit 2023React Summit 2023
109 min
Web Accessibility for Ninjas: A Practical Approach for Creating Accessible Web Applications
Workshop
In this hands-on workshop, we’ll equip you with the tools and techniques you need to create accessible web applications. We’ll explore the principles of inclusive design and learn how to test our websites using assistive technology to ensure that they work for everyone.
We’ll cover topics such as semantic markup, ARIA roles, accessible forms, and navigation, and then dive into coding exercises where you’ll get to apply what you’ve learned. We’ll use automated testing tools to validate our work and ensure that we meet accessibility standards.
By the end of this workshop, you’ll be equipped with the knowledge and skills to create accessible websites that work for everyone, and you’ll have hands-on experience using the latest techniques and tools for inclusive design and testing. Join us for this awesome coding workshop and become a ninja in web accessibility and inclusive design!