Skip to main content

Búsqueda y reconocimiento del código de ejemplo

Mejora las aptitudes de codificación aprendiendo del código de ejemplo en GitHub.

¿Cómo puedo aprender del código en GitHub?

Aprender de proyectos en GitHub es una excelente manera de descubrir nuevas técnicas y encontrar inspiración para tus propios proyectos.

Pero con millones de repositorios disponibles públicamente en GitHub, la búsqueda del código que se aplica al proyecto puede ser abrumadora. Incluso después de encontrar el repositorio perfecto, puede ser difícil navegar por el código base para encontrar ejemplos útiles.

En lugar de intentar comprender todo un proyecto, un mejor enfoque consiste en elegir una sola característica o función y ver cómo funciona. Podemos usar la funcionalidad de búsqueda de Copilot Chat y GitHubpara buscar una característica y seguirla por el código base. Esta es una excelente manera de aprender, ya que podemos ver cómo funciona la característica durante todo el proceso, desde el back-end hasta el front-end.

En esta guía, descubrirás cómo realizar ambas acciones siguiendo un escenario de ejemplo: aprender a cargar y mostrar datos de archivos en un sitio web de Jekyll. Después, puedes aplicar las sugerencias y técnicas a otros proyectos y lenguajes de programación.

Búsqueda de un proyecto de ejemplo

El primer paso es encontrar el proyecto adecuado del cual aprender.

Usa Copilot Chat para identificar un repositorio

La forma más rápida de encontrar un proyecto con código del que puedas aprender es pedir a Copilot Chat que busque repositorios que coincidan con los criterios.

Abre Copilot Chat e inicia un chat de uso general. Después, pregunta:

¿Puedes encontrar repositorios populares que usen Jekyll para mostrar datos de archivos en el repositorio?

Copilot devolverá vínculos a repositorios pertinentes y, después, puedes formular preguntas de seguimiento sobre los repositorios.

A menudo, Copilot finalizará su respuesta con un vínculo a la búsqueda de GitHub que arroje más resultados. A continuación, revisaremos estos resultados.

Uso de la búsqueda para identificar más opciones

Si Copilot ha incluido un vínculo a los resultados de la búsqueda, síguelo. Si no es así, realiza tu propia consulta de búsqueda siguiendo los pasos que se indican a continuación.

  1. Ve a Advanced search.
  2. En la sección "Opciones avanzadas", usa la lista desplegable "Written in this language" para seleccionar un lenguaje de programación. En nuestro sitio de Jekyll, seleccionaremos "HTML".
  3. Opcionalmente, en "Repositories options", junto a "With this many stars", escribe >150. Esto te ayudará a encontrar repositorios populares que probablemente estén bien mantenidos.
  4. En la parte superior de la página, haz clic en Search.

Tip

Para restringir aún más los resultados de la búsqueda, agrega temas y texto a la consulta de búsqueda. Por ejemplo, topic:jekyll "blog" devolvería repositorios que el propietario ha clasificado como relacionados con Jekyll y con la palabra "blog" en el nombre o la descripción del repositorio. Para obtener una lista de temas populares, consulta Temas sobre GitHub.

Elección de un proyecto

Después de revisar los resultados de Copilot y de la búsqueda, decidimos usar el repositorio github/choosealicense.com. Este repositorio contiene el código fuente para Elegir una licencia, un sitio web de Jekyll que comparte información sobre las licencias de código abierto.

Estamos especialmente interesados en la página Licencias, en la que se muestran licencias de código abierto populares de archivos de datos.

Orientación en el proyecto

Antes de profundizar en el código para mostrar archivos de datos, vamos a orientarnos en el repositorio en general.

La primera vez que visitas un repositorio, puede ser difícil saber por dónde empezar. Aunque cada proyecto se organizará de forma individual, hay métodos de documentación comunes en los que normalmente podemos confiar para orientarnos.

El archivo README.md

Siempre es una buena idea leer el archivo README.md, que es la página principal de un repositorio y se representa automáticamente debajo de la lista de archivos. Los diferentes mantenedores incluirán información diferente, pero a menudo puedes encontrar información sobre el proyecto, cómo compilarla en el equipo local y vínculos a la documentación.

En el repositorio github/choosealicense.com, el archivo README.md explica dónde se encuentran los archivos de licencia (/_licenses), los atributos que puede tener cada licencia y cómo ejecutar el sitio web en el equipo.

Uso de Copilot Chat

Si el archivo README.md no proporciona todas las respuestas, puedes pedir a Copilot que te ayude a navegar por el repositorio y localizar la función.

Para abrir Copilot Chat, haz clic en el icono GitHub Copilot que se encuentra junto a la barra de búsqueda y formula tu pregunta. Por ejemplo:

¿Cuál es la página de aterrizaje principal de este sitio web de Jekyll?

Al hacer preguntas a Copilot sobre un repositorio, puedes devolver los archivos pertinentes, explicar la parte que desempeñan en la función e incluir vínculos.

Wiki del repositorio

Otra posible fuente de información es la wiki del repositorio, una sección del repositorio creada específicamente para contener documentación. Todos los repositorios de GitHub vienen equipados con la capacidad de usar una wiki, pero no todos la usan. Para acceder a la wiki, haz clic en la pestaña Wiki del repositorio.

Versiones

Si el código fuente del repositorio se compila en un archivo ejecutable, algunos mantenedores de repositorio usarán las versiones del repositorio para publicar archivos binarios. Puedes descargar y ejecutar estos archivos binarios para examinar cómo funciona la aplicación mientras explora el código base, sin necesidad de compilar el proyecto tú mismo.

Puedes encontrar las versiones de un repositorio en la barra lateral, a la derecha de la lista de archivos y README.md.

Documentación interna

También puedes buscar documentación interna en el contenido del repositorio. Esto podría ser un único archivo Markdown o un directorio lleno de archivos Markdown. Los nombres comunes que se deben buscar incluyen "docs", "documentation", "wiki", "resources", "help" y "manual".

Ahora que entendemos la estructura general del repositorio, es el momento de usar la búsqueda de GitHub para buscar la función específica que estamos buscando.

Cuando estás en un repositorio y haces clic en el campo de búsqueda en la parte superior de la página, GitHub agregará automáticamente el calificador de búsqueda repo para que los resultados de la búsqueda estén restringidos al repositorio que estás viendo.

Para empezar, necesitamos algo que queramos buscar. Podría tratarse de una cadena de texto única para la característica que estamos examinando, o bien podríamos examinar el origen HTML de la página y buscar un atributo classo id determinado.

En nuestro ejemplo, buscaremos el texto de la parte superior de la página de licencias con esta consulta:repo:github/choosealicense "If you’re looking for a reference table?". Esto devuelve un resultado, un archivo denominado licenses.html.

Ahora podemos hacer clic en el resultado y profundizar más. licenses.html es el origen de la página "Licencias" que estábamos buscando. Podemos ver la cadena que hemos buscado y que cada una de las licencias se incluye con el código siguiente:

{% include license-overview.html license-id="agpl-3.0" %}

Descripción del código fuente

Ahora que hemos encontrado el código específico en el que estamos interesados, podemos pasar a entenderlo.

Pregunta a Copilot Chat sobre el código

Puedes usar Copilot para obtener más información sobre un archivo o incluso líneas de código específicas. Copilot combinará información sobre el lenguaje de programación con el contexto del repositorio para responder a tus preguntas de forma detallada.

Vamos a preguntar a Copilot para explicar lo que sucede en la línea 11, con la etiqueta {% include %}. Haz clic en el número de línea. Después, a la derecha de la línea, haz clic en . En la ventana de chat, pregunta lo siguiente:

¿Qué sucede en esta línea?

Copilot explicará que la línea incluye el archivo license-overview.html y pasa "agpl-3.0" como el elemento license-id que se va a mostrar.

Tip

Si no entiendes una respuesta de Copilot Chat, siempre puedes pedirle que simplifique la respuesta o desarrolle una parte determinada de ella.

Lectura de comentarios

Los comentarios son anotaciones legibles humanas que se pueden usar para comprender el código, y no se ejecutan. Normalmente se delimitan con caracteres como // o /*.

Hay que buscar algunos tipos de comentarios:

  • Línea: comentarios de una sola línea que describen lo que hace una línea determinada.
  • Bloquear: comentarios de varias líneas que podrían describir lo que hace una función o un archivo completo.
  • Archivo: comentario de bloque al principio de un archivo, que proporciona información general sobre esa parte concreta del código base.

Búsqueda de funciones en referencias del lenguaje de programación

Cada lenguaje de programación tendrá una referencia en línea, en la que se explican todos los aspectos del lenguaje.

Si usas un motor de búsqueda para buscar el lenguaje de programación y la función, debes encontrar un vínculo a la página de referencia de esa función.

En nuestro ejemplo, la búsqueda de jekyll include en un motor de búsqueda debe devolver la documentación "Includes" en la documentación de Jekyll. Si leemos más información en la documentación de Jekyll, podemos ver que las propias licencias son una colección en el directorio _licenses.

Tip

Si no encuentras una función en una referencia del lenguaje de programación, es probable que la función se defina en el propio código base. Pídele a GitHub Copilot que los localice.

Para resumir lo que hemos descubierto: el archivo licenses.html incluye /_includes/license-overview.html para cada licencia que se muestra. El archivo /_includes/license-overview.html coincide con el elemento license-id proporcionado a una licencia de la colección /_licenses y representa los detalles.

Experimentación con pequeños cambios

Si puedes ejecutar el proyecto localmente en el equipo, una excelente manera de aprender es realizar pequeños cambios para ver lo que sucede.

Puedes empezar cambiando el texto y, después, realizar cambios más grandes, como experimentar con la forma de interactuar de las funciones y los archivos entre sí.

Intenta buscar el archivo license-overview.html en el directorio _includes y, después, realiza cambios en la forma de mostrar la licencia o experimenta con cómo se carga la licencia desde la colección.

Puedes cambiar los metadatos al principio de uno de los archivos de licencia, cambiar qué atributos se muestran en license-overview.html o incluso intentar agregar tu propio atributo. Cuando hayas realizado el cambio, puedes probarlo siguiendo las instrucciones de README.md para verlo en el explorador.

Aplicación de lo descubierto

El repositorio github/choosealicense.com es un excelente ejemplo de un proyecto de Jekyll grande y muestra lo que se puede hacer con Jekyll y GitHub Pages. ¿Puedes aplicar lo que has descubierto de la estructura del repositorio, cómo usa colecciones y la forma en que incluye los datos de licencia para compilar tu propio proyecto?

Pasos siguientes

Ahora que comprendes cómo funciona el código de ejemplo, puede que quieras reutilizarlo en tu propio proyecto. La reutilización de código es una parte eficaz del desarrollo de software, pero hay pasos importantes que se tienen que seguir para que sea correcto y legal. Para obtener un tutorial completo, consulta Reutilización del código de otras personas en los proyectos.