¿Listo para sumergirte en el mundo de GitHub Copilot? En esta guía, te mostraremos cómo construir una aplicación frontend utilizando React y la asistencia de Copilot. Basándonos en el trabajo previo de la API backend para Planventure, crearemos un cliente React que interactúa con nuestra API.
¿Qué necesitas?
Antes de empezar, asegúrate de tener lo siguiente:
- Un editor de código como VS Code.
- La última versión de Node.js.
- Un gestor de paquetes como npm.
- Acceso a GitHub Copilot.
También puedes usar un GitHub Codespace, pero necesitarás acceso a Copilot.
¿Qué construiremos?
Crearemos una aplicación frontend que se conecta a la API backend. Usaremos React con Vite y Material UI para:
- Autenticar usuarios.
- Añadir rutas protegidas.
- Añadir información de viajes e itinerarios.
- Editar itinerarios existentes.
Paso 1: Configuración inicial
Primero, clonaremos el repositorio de Planventure:
git clone https://github.com/github-samples/planventure
Luego, navegaremos al directorio planventure-client y cambiaremos a la rama client-start:
cd planventure-client
git switch client-start
Instalaremos las dependencias necesarias:
npm install
Y finalmente, iniciaremos el servidor:
npm run dev
Abre un navegador en http://localhost:5173 para verificar que la aplicación se está ejecutando.
Paso 2: Crear formularios de inicio de sesión y registro
Comenzaremos con la autenticación creando formularios de inicio de sesión y registro. Primero, crearemos un componente AuthLayout para las rutas autenticadas. Usaremos Copilot Chat para generar el componente con el siguiente prompt:
@workspace Create AuthLayout component with navigation and centered content.
Copilot generará el código, que insertaremos en un nuevo archivo llamado AuthLayout.jsx.
Luego, crearemos el formulario de inicio de sesión con el siguiente prompt:
@workspace Build a LoginForm component with email/password fields and validation.
Guardaremos el código generado en LoginForm.jsx dentro de una nueva carpeta auth.
Para la página de registro, usaremos el siguiente prompt:
@workspace Create SignupForm component matching the login form style and a new SignUpPage. Be sure to update routing.
Copilot creará los componentes SignupForm y SignUpPage y actualizará las rutas necesarias.
Paso 3: Usar la API para la autenticación
Ahora, configuraremos las funciones de servicio de la API para las rutas de inicio de sesión y registro. Usaremos el siguiente prompt:
@workspace Setup api service functions for login and register routes. Update login and signup forms to use api service. #file:SignupForm.jsx
Recuerda iniciar el servidor backend:
cd planventure-api
flask run --debug
Una vez que inicies sesión, agregaremos la funcionalidad de cierre de sesión a la barra de navegación con:
@workspace update navbar to include the logout function
Paso 4: Añadir un panel de control y navegación lateral
Crearemos un panel de control con navegación lateral para facilitar el acceso a las funciones comunes. Usaremos el siguiente prompt:
Build a dashboard layout component with sidebar navigation.
También crearemos componentes TripCard y TripList para mostrar los viajes del usuario:
Create TripCard and TripList components for displaying trips with loading states.
Y un componente de panel de control que muestra los viajes al iniciar sesión:
Create a dashboard component that displays the trips that users are routed to on login.
Finalmente, integraremos la API para obtener los viajes del usuario:
Update to fetch trips from the flask api.
Paso 5: Habilitar la gestión de viajes
Ahora agregaremos la capacidad para que los usuarios gestionen sus viajes. Comenzaremos creando un nuevo formulario para agregar viajes:
npm install dayjs @mui/x-date-pickers
Luego, usaremos el siguiente prompt:
Create NewTripForm with destination and date inputs. Use the dayjs library.
Para gestionar los itinerarios, crearemos componentes ItineraryDay y TimeSlot:
Create ItineraryDay and TimeSlot components for managing daily activities with editing capabilities.
Finalmente, permitiremos a los usuarios editar los detalles de sus viajes:
Allow users to edit their trip details.
Conclusión
¡Felicidades! Has construido una versión funcional de la aplicación en poco tiempo con la ayuda de GitHub Copilot. Recuerda que puedes usar GitHub Copilot de forma gratuita. Si tienes preguntas, no dudes en dejarlas en los comentarios.
Fuente: GitHub Blog
Leave a Comment