Fuente validada
Lab_07_Codespaces_VSCode.docx
Esta pagina fue reconstruida desde el documento del ZIP entregado como fuente principal.
Conformidad visual
Sin imagenes publicadas
El archivo fuente contiene 0 imagenes embebidas. Para garantizar conformidad, no se publican imagenes heredadas de otros materiales.
Criterio GH-300
Practica verificable
Ejecuta los comandos, captura evidencia propia y valida cada sugerencia de Copilot antes de aceptarla.
Alcance de publicacion:
Solo se publica el contenido del laboratorio indicado por el archivo Lab_07_Codespaces_VSCode.docx.
Las imagenes no se muestran porque el ZIP no incluye imagenes embebidas en este documento.
Certificación GH-300
Laboratorio 07
GitHub Codespaces y Visual Studio Code
Autor: Carlos Crudo
linkedin.com/in/carloscrudo
Configuración y uso de GitHub Codespaces como entorno de desarrollo cloud integrado con Visual Studio Code para productividad máxima.
Temas que cubre este laboratorio:
Crear y configurar Codespaces
Dev containers (devcontainer.json)
VS Code en el navegador vs desktop
Extensiones y personalización del entorno
Copilot en Codespaces
Laboratorio 07: GitHub Codespaces y Visual Studio Code
Lab 07: Programando con GitHub Codespaces y Visual Studio Code
Objetivo:
Imagina que eres un desarrollador trabajando en un proyecto que requiere un entorno de desarrollo alojado en la nube para facilitar la colaboración y Agiliza tu flujo de trabajo. Para aumentar tu productividad y gestionar tu Más eficazmente configurado en desarrollo, decides usar GitHub Codespaces con Visual Studio Code. Esta configuración te permite crear y personalizar entornos de desarrollo directamente en la nube, facilitando la Colabora con tu equipo y gestiona las configuraciones de proyectos eficientemente.
En este laboratorio práctico, tú deberás:
Inicia un Codespace: Crea y lanza un Codespace en GitHub usando plantillas predefinidas.
Personaliza configuraciones: Personaliza las configuraciones de tu proyecto dentro del espacio de código para adaptarse a tus necesidades de desarrollo.
Gestionar los espacios de código: Gestiona y navega eficientemente por tus espacios de códigos, garantizar un proceso de desarrollo fluido y ordenado.
Push Code to Repository: Practica cómo empujar tus cambios de código desde el codespace al repositorio de GitHub, reforzando tu capacidad de Integra el trabajo de desarrollo con control de versiones.
Ejercicio #1: Configurar un nuevo Repositorio y crear un espacio de código en GitHub)
Inicia sesión en tu cuenta de GitHub.
Navega hasta el siguiente enlace: https://github.com/skills/code-with-codespaces
En este laboratorio crearás el repositorio usando una plantilla pública "código-de habilidades con espacios de código".
Selecciona Crear un nuevo repositorio en el menú Usar esta plantilla.
Introduce los siguientes datos y selecciona Crear Repositorio.
Nombre del repositorio: skills-code-with-codespaces
Tipo de repositorio: Público
Una vez creado el repositorio, haz clic en el botón de Código.
Selecciona la pestaña Codespaces en la ventana emergente y luego haz clic en el botón Crear codespace en el botón principal.
Nota: El espacio de código se abrirá en una nueva pestaña del navegador.
El navegador mostrará un editor web basado en VS Code y un terminal Debería estar presente como se muestra a continuación.
Espera 2 minutos a que el espacio de código (una máquina virtual) gire se levantaba solo.
Vuelve al repositorio skills-code-with-codespaces y Haz clic en el botón de Código
Nota: si el espacio de código recién creado no se carga, entonces actualiza la página.
Haz clic en la puntería suspensiva... en el espacio de código activo.
Nota: El nombre del espacio de código puede diferir en tu caso
Selecciona Abrir en Visual Studio Code en el menú emergente.
Una ventana emergente pedirá confirmación para abrir el espacio de código en la aplicación VS code. Selecciona Abrir Código Visual Studio para abrir el espacio de código.
Se te pedirá que instales la extensión de GitHub Codespaces, que hagas clic en instalar extensión y que abras URI.
Una vez instalado, verás una ventana emergente pidiendo más permisos. Haz clic en Autorizar código Visual Studio
Confirma el acceso introduciendo la contraseña de tu cuenta de GitHub.
Nota: Si ves que aparece la opción Permitir el Cortafuegos de Windows, por favor permite que continúes.
Ejercicio #2: Envía código a tu repositorio desde el espacio de código
Desde dentro del espacio de código en la ventana del explorador de código de VS, selecciona el archivo index.html.
Sustituye el conector h1 por lo siguiente:
<h1>Hello from the codespace!</h1>
Guarda el archivo.
Nota: El archivo debería guardarse automáticamente.
Utiliza el terminal VS Code para confirmar el cambio de archivo introduciendo la Siguiente mensaje de confirmación:
git commit -a -m "¡Añadiendo hola desde el espacio de código!"Envía los cambios de nuevo a tu repositorio. Desde el terminal VS Code, introduzca:
git push¡El nuevo código de VS ha sido enviado a tu repositorio!
Vuelve a la página principal de tu repositorio y ve el index.html verificar que el nuevo código se envió a tu repositorio.
Espera unos 20 segundos y luego actualiza esta Acciones de GitHub Actualiza automáticamente al siguiente paso.
Resumen:
Ahora has usado GitHub Codespaces y Visual Studio Code para
Crea y lanza un Codespace en GitHub usando plantillas predefinidas.
Push Code to Repository: Practica cómo empujar tus cambios de código desde el codespace al repositorio de GitHub, reforzando tu capacidad de Integra el trabajo de desarrollo con control de versiones.