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

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.

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.

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

A Framework for Managing Technical Debt
TechLead Conference 2023TechLead Conference 2023
35 min
A Framework for Managing Technical Debt
Top Content
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.

Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
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.
Monolith to Micro-Frontends
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.
Power Fixing React Performance Woes
React Advanced Conference 2023React Advanced Conference 2023
22 min
Power Fixing React Performance Woes
Top Content
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! ⚡️
Building a Voice-Enabled AI Assistant With Javascript
JSNation 2023JSNation 2023
21 min
Building a Voice-Enabled AI Assistant With Javascript
Top Content
In this talk, we'll build our own Jarvis using Web APIs and langchain. There will be live coding.
Video Editing in the Browser
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

AI on Demand: Serverless AI
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
AI on Demand: Serverless AI
Top Content
Featured WorkshopFree
Nathan Disidore
Nathan Disidore
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.
Working With OpenAI and Prompt Engineering for React Developers
React Advanced Conference 2023React Advanced Conference 2023
98 min
Working With OpenAI and Prompt Engineering for React Developers
Top Content
Workshop
Richard Moss
Richard Moss
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
Building a Shopify App with React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Building a Shopify App with React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
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.
Build a chat room with Appwrite and React
JSNation 2022JSNation 2022
41 min
Build a chat room with Appwrite and React
WorkshopFree
Wess Cope
Wess Cope
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!
Hard GraphQL Problems at Shopify
GraphQL Galaxy 2021GraphQL Galaxy 2021
164 min
Hard GraphQL Problems at Shopify
WorkshopFree
Rebecca Friedman
Jonathan Baker
Alex Ackerman
Théo Ben Hassen
 Greg MacWilliam
5 authors
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.
Web Accessibility for Ninjas: A Practical Approach for Creating Accessible Web Applications
React Summit 2023React Summit 2023
109 min
Web Accessibility for Ninjas: A Practical Approach for Creating Accessible Web Applications
Workshop
Asaf Shochet Avida
Eitan Noy
2 authors
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!