Generación de una aplicación Django y PostgreSQL e implementación en Azure

Este artículo le guía en cómo interactuar con GitHub Copilot para generar una aplicación web local de Django que realiza operaciones CRUD en una base de datos PostgreSQL. A continuación, le guía en cómo interactuar con GitHub Copilot para Azure para implementar la aplicación web y la base de datos en Azure App Service y el servidor flexible de Azure PostgreSQL (junto con varios servicios de Azure compatibles).

La aplicación concreta que crea es una sencilla aplicación de gestión de contactos que cuenta con operaciones CRUD y una arquitectura de tipo lista-detalle.

Nota:

El uso de un modelo de lenguaje grande (LLM) para generar una aplicación podría producir resultados incoherentes. Los resultados dependen del modelo LLM, las instrucciones y mucho más. El enfoque de esta guía es ayudarle a comprender cómo obtener mejores resultados. Sin embargo, cada vez que pase por este ejemplo, obtendrá (potencialmente) resultados considerablemente diferentes.

Prerrequisitos

Importante

GitHub Copilot es una suscripción independiente administrada por GitHub. Para obtener preguntas sobre las suscripciones y el soporte técnico de GitHub Copilot, consulte Introducción a un plan de GitHub Copilot.

Preparación de la sesión de chat

  1. En Visual Studio Code, use el botón "Mostrar u ocultar chat" de la barra de título o use Ctrl+Alt+i para abrir la ventana de chat. Use el icono Nuevo chat para crear una nueva sesión de chat.

  2. En el área de chat, seleccione el modo Agent. En el momento de escribir esto, Claude Sonnet 4 ofrece los mejores resultados. Use el mejor modelo disponible para la generación de código.

Validación de la configuración

Asegúrese de que las herramientas de la CLI y Visual Studio Code están actualizadas, configuradas y funcionando correctamente para mejorar los resultados.

  1. En un nuevo chat, escriba el siguiente mensaje:

    I want to create a new Django website that stores data in PostgreSQL. Then, I'll want
to deploy that new website to Azure. Do I have everything installed on my local
computer that you will need to perform these tasks?

    GitHub Copilot pedirá permiso para ejecutar una serie de comprobaciones de línea de comandos para asegurarse de que tiene las herramientas, así como las versiones más actualizadas de esas herramientas, instaladas.

  2. En el terminal, actualice la CLI de Azure con el comando az --upgrade.

  3. En el terminal, instale la extensión sin contraseña del conector de servicio para la CLI de Azure con el comando . az extension add --name serviceconnector-passwordless --upgrade

  4. En Visual Studio Code, establezca el terminal predeterminado en Git Bash. Vaya a Configuración de preferencias > de archivo > y, a continuación, en "Configuración de búsqueda", escriba "Perfil predeterminado: Windows" y seleccione "Git Bash". Es posible que tenga que reiniciar Visual Studio Code para que esta configuración surta efecto.

    Nota:

    El uso de Git Bash no es estrictamente necesario, pero en el momento de escribirlo produce los mejores resultados.

  5. En Visual Studio Code, use la extensión PostgreSQL para Visual Studio Code (versión preliminar) y vaya a la contacts base de datos.

  6. En Visual Studio Code, use la extensión de Azure y asegúrese de que ha iniciado sesión en su cuenta y suscripción de Azure. Al abrir la extensión de Azure en la barra lateral principal, debería poder ver las suscripciones y los recursos existentes.

  7. Cree una carpeta para los nuevos archivos de aplicación y ábrala en Visual Studio Code como área de trabajo.

Configuración de la base de datos local

Aunque GitHub Copilot es capaz de realizar prácticamente cualquier tarea de desarrollo de aplicaciones que los desarrolladores suelen realizar, obtendrá los mejores resultados si realiza algunas tareas en pasos más pequeños. Para mejorar los resultados, cree la base de datos y configure la autenticación y autorización antes de trabajar con GitHub Copilot.

  1. Cree un chat nuevo y use el siguiente mensaje:

    On my PostgreSQL server localhost, please create a new database named 'contacts'.

Then create a new user <db-username> with password `<password>` and give that
user full rights (create tables and other db objects, CRUD data) to the new
contacts database.

Please do the work, and only prompt me when you are unable to do it yourself.

    Reemplace <db-username> y <password> por el nombre de usuario y la contraseña de la base de datos deseados, respectivamente.

  2. En las máquinas Windows, el procedimiento recomendado de seguridad es almacenar el nombre de usuario y la contraseña de la base de datos en un archivo local:

    %APPDATA%\postgresql\pgpass.conf

    Normalmente, esto resolverá la siguiente ubicación en el disco duro:

    c:\Users\<username>\AppSettings\Roaming\postgresql\pgpass.conf

    Reemplace por <username> el nombre de usuario de Windows.

    El archivo debe usar el siguiente formato:

    localhost:5432:<database-name>:<database-user>:<password>

    Esto supone que está trabajando con una instancia de PostgreSQL en el equipo local y que se hospeda en el puerto predeterminado (5432).

    Sustituya <database-name> por contacts y sustituya <db-username> y <password> por las credenciales que utilizó en el paso anterior.

    Para obtener más información sobre el archivo, consulte la pgpass.confdocumentación de PostgreSQL.

  3. Agregue la ruta de acceso al archivo en la pgpass.conf variable de entorno PATH.

  4. Pruebe la conexión para asegurarse de que funciona. Use la CLI de psql para probarla con el siguiente comando:

    psql -h localhost -U <db-username> -d contacts

    Reemplace por <db-username> el segmento de nombre de usuario de la base de datos en el pgpass.conf archivo.

    Si el pgpass.conf no está configurado correctamente, verás un aviso para que introduzcas tu contraseña.

Generación de una aplicación mediante GitHub Copilot

En primer lugar, proporciona instrucciones e instrucciones sobre cómo compilar y probar la aplicación en el equipo local.

  1. En Visual Studio Code, usa el botón «Mostrar u ocultar el chat» en la barra de título para abrir la ventana de chat. Use el icono Nuevo chat para crear una nueva sesión de chat.

  2. En el área de chat, seleccione el modo Agent. En el momento de escribir esto, Claude Sonnet 4 ofrece los mejores resultados. Use el mejor modelo disponible para la generación de código.

  3. Utilice la siguiente instrucción para comenzar la generación de aplicaciones:

    I want you to create a simple Contact Manager application using Django and PostgreSQL.

This should be a CRUD application, so create web pages that display a list of
contacts, view details, add a new contact, edit or delete a contact. Each Contact
is comprised of a contact's Name, Address, and Phone number. Since this is a
Python / Django project please make sure to work inside of a virtual environment (venv).
I've already created a PostgreSQL database at `localhost` named `contacts`. There are
no tables yet. For local development in PostgreSQL, I'm using a `pgpass.conf` file
and I have tested that it works. Prefer Git Bash in the terminal. Beyond that, if there's
anything I need to do, please include instructions. But I want you to do as much as
you can on your own.

    El prompt tiene las siguientes características:

    • Tipo de aplicación que desea crear. En este caso, una aplicación de administración de contactos.
    • Tecnologías que se van a usar. En este caso, Django y PostgreSQL.
    • La arquitectura de sitio que desea generar. En este caso, una aplicación de estilo CRUD que incluye una página que enumera todos los contactos y le permite explorar en profundidad un contacto específico.
    • Más detalles sobre el dominio del problema. En este caso, se proporcionan los campos de datos que desea que administre la aplicación, incluido el nombre, la dirección y el número de teléfono del contacto.
    • Instrucciones específicas sobre la base de datos. En este caso, se indica a GitHub Copilot que use una base de datos específica que ya ha creado, proporcione el estado de la base de datos y cómo interactuar.
    • Instrucciones específicas sobre el entorno. En este caso, le indica que use Git Bash. También le indica que desea que el trabajo se realice en un entorno de Python (venv), que es un procedimiento recomendado. GitHub Copilot puede seleccionar estas opciones por sí solo, pero indicarlo explícitamente hace que el proceso se desarrolle sin problemas.
    • Expectativas explícitas de que desea que haga tanto trabajo por sí mismo como sea posible. De lo contrario, GitHub Copilot podría proporcionarle instrucciones que seguir.
    • Expectativas explícitas para instrucciones o contexto. Si necesita que realices otras acciones, deja claro que necesita tu ayuda proporcionándole instrucciones y orientación.

    Importante

    Cuando GitHub Copilot usa el terminal para crear un nuevo entorno virtual, Visual Studio Code detecta venv y muestra un cuadro de diálogo que pregunta si desea usarlo. Omita ese cuadro de diálogo. Desaparece. Permitir que GitHub Copilot use el terminal exclusivamente para esta operación.

    GitHub Copilot usa el terminal integrado y el entorno de Visual Studio Code para:

    • Creación de un entorno virtual de Python
    • Instalación de bibliotecas y otras dependencias
    • Generación de archivos de código
    • Generación de tablas de base de datos
    • Genera archivos README con instrucciones adicionales
    • Creación de datos de prueba
    • Inicio de un servidor web local
    • Probar el sitio web (mediante Simple Browser o curl)

    Debido a la forma en que las LLMs generan código, los comandos que usa y lo que genera son diferentes cada vez.

Implementación en Azure con GitHub Copilot para Azure

Después de que GitHub Copilot genere el sitio localmente, creará un mensaje que le pedirá a GitHub Copilot que realice cambios en el sitio como preparación para la implementación y, a continuación, para realizar la implementación. La extensión de GitHub Copilot para Azure procesa esta solicitud creando archivos Bicep y, a continuación, ejecuta esos archivos con la CLI azd.

Use la siguiente instrucción... que puede copiar en el Bloc de notas y cambiar cualquier valor entre los corchetes angulares, como <resource-group-name> y <region-name>, y después copiarla y pegarla en el chat de GitHub Copilot:

Please help me deploy this Django app to Azure.

First, create and use a Resource Group named "<resource-group-name>" in the "<region-name>" region.

Second, create an Azure App Service for the Django app in the new "<resource-group-name>" in the "<region-name>" region.

Third, create a new Azure Database for PostgreSQL flexible server named "<server-name>" in a resource group named "<resource-group-name>" in my subscription "<subscription-id>". Use my current account ("<account-id>") as the Microsoft Entra administrator. For the PostgreSQL "Administrator login", use "<azure-database-username>" and password "<azure-database-password>". Use a "development" class database configuration in the "<region-name>" region. Create a new database named "contact_manager_db" and migrate all tables and data from the local version of "contact_manager_db". The local database uses the username "<local-database-username>" and password "<local-database-password>". Add my IP address as a firewall rule, allow public access to this resource through the internet using a public IP address, and allow public access from any Azure service within Azure to this server.

Fourth, use Service Connector (and any other services you need to make this configuration work successfully) to connect the web app to the database. You may need to modify the application code to accommodate Service Connector. Also, please ensure a secure connection between the Azure App Service web site and the Azure PostgreSQL Flexible Server.

Please choose the least expensive options.

If you are prompted for an environment, use the name "contacts-env". Configure my firewall to allow my IP address. Beyond that, if there's anything
I need to do, please include instructions. But I want you to do as much as you can on your own.

Before you start:

- Do you have any questions that need to be clarified?
- Please create a plan for deployment in the form of a TODO list, and then update the TODO list as you progress. Do not start until I have a chance to review your plan and tell you to proceed.

El indicador tiene las siguientes características:

  • Servicios específicos que desea usar. En este caso, le indicará que desea usar Azure App Service, Azure PostgreSQL Flexible Server, Service Connector. También le das la instrucción de «hacer cualquier otra cosa que necesites hacer» para asegurarte de que funcione.
  • Opciones de servicio específicas. En este caso, indica que desea usar la opción menos costosa posible para cada servicio.
  • Insinúa los próximos pasos probables. En este caso, sugiere que es necesaria alguna modificación en el código para utilizar Service Connector.
  • Anticipe las decisiones con antelación. En este caso, proporciona la respuesta a los ajustes que necesita, como un nombre de entorno para azd,
  • Expectativas explícitas de que quieres que haga la mayor parte del trabajo por su cuenta. De lo contrario, puede proporcionarle instrucciones sobre las medidas que debe tomar.
  • Expectativas explícitas para instrucciones o contexto. Establezca la expectativa de que necesita ayuda e instrucciones cuando le pida que tome medidas.
  • Pregunta si se necesita alguna aclaración. Esto suele sacar a la luz posibles problemas, como casos límite o instrucciones poco claras.
  • Solicita un plan con una lista de tareas pendientes. Te da la confianza de que GitHub Copilot para Azure comprende la tarea y planea llevarla a cabo tal como pretendías.

GitHub Copilot usa el terminal integrado y el entorno de Visual Studio Code para:

  • Actualización de los archivos de código para dar cabida a Service Connector
  • Generación de archivos de Bicep
  • Ejecución de la azd CLI
  • Prueba de la implementación
  • Si es necesario, depure la implementación mediante registros u otra salida.

Interacción con GitHub Copilot

GitHub Copilot requiere tu intervención antes de realizar muchas tareas. Una pausa para introducir indicaciones te da la oportunidad de guiar a GitHub Copilot para corregir el rumbo, evitar errores o personalizar el contenido generado según tus preferencias.

Mientras está en funcionamiento, puede ver y responder afirmativamente a la mayoría de las preguntas que le haga mediante el botón Continue.

Importante

Si obtiene resultados inesperados, reinicie con una nueva sesión de chat.

A veces, es necesario introducir datos. Hay algunos momentos distintos cuando se le solicita la entrada:

  • Credenciales de usuario : si la operación actual en el terminal requiere un nombre de usuario o una contraseña, se le pedirá esta información.
  • Momento de decisión : en ocasiones, GitHub Copilot ofrece varias opciones en una lista y pregunta cuál prefiere.
  • La paleta de comandos : en ocasiones, GitHub Copilot usa las características de una extensión y las opciones se muestran en la paleta de comandos. Una vez que realice las selecciones adecuadas, GitHub Copilot continúa.
  • Inicio de sesión interactivo - La CLI de Azure y azd la CLI requieren que te autentiques e inician uno de los distintos mecanismos de autenticación.

Prueba y solicitud de cambios

Cuando GitHub Copilot termina, es posible que considere que el sitio está completo y funciona correctamente. Sin embargo, las pruebas pueden detectar problemas o características inesperadas o no deseadas de la aplicación.

Use avisos que describen el problema con tantos detalles como sea posible. Por ejemplo, si la aplicación no funciona, proporcione tanta información como sea posible, incluido el mensaje de error exacto y el resultado esperado.

Interrumpir el flujo

En ocasiones, es posible que observe que GitHub Copilot está bloqueado en un bucle que intenta realizar las mismas tareas repetidamente o que está bloqueado en un proceso que nunca vuelve. Por ejemplo, al diagnosticar problemas con el sitio web, Es posible que GitHub Copilot quiera ejecutar un comando como:

az webapp log tail

Cuando GitHub Copilot está bloqueado, puede interrumpir GitHub Copilot de una de varias maneras:

  • Ctrl+C
  • Uso del botón pausar en el chat
  • Finalizar la sesión de chat e iniciar un nuevo chat

Importante

Finalizar la sesión de chat destruye todo el contexto creado durante la sesión, lo que podría o no ser deseable.

Para proporcionar contexto a lo que acaba de suceder y desplazarlo hacia una posible solución, podría agregar un mensaje inmediatamente después de interrumpir el GitHub Copilot, como:

You were just getting the logs from Azure App Service but it did not return
so you got stuck. Try to interrupt after a minute once you get what you need
from the logs.

Contenido relacionado

  • Last updated on