Skip to content

6-code.md

Latest commit

 

History

History
118 lines (88 loc) · 8.41 KB

6-code.md

File metadata and controls

118 lines (88 loc) · 8.41 KB

Coding with GitHub Copilot

← Helping GitHub Copilot understand context Next: GitHub flow →

We've explored how we can use GitHub Copilot to explore our project and to provide context to ensure the suggestions we receive are to the quality we expect. Now let's turn our attention to putting all this prep work into action by generating new code! We'll use GitHub Copilot to aid us in adding functionality to our website and generate the necessary unit tests.

Scenario

The website currently lists all dogs in the database. While this was appropriate when the shelter only had a few dogs, as time has gone on the number has grown and it's difficult for people to sift through who's available to adopt. The shelter has asked you to add filters to the website to allow a user to select a breed of dog and only display dogs which are available for adoption.

Overview of this exercise

In the next handful of steps, you will:

  • create a new Flask endpoint to list the breeds available.
  • add the associated unit test.
  • update the backend and frontend to display the list and add the filters as required in the scenario.

GitHub Copilot interfaces

Until now, we've primarily focused on GitHub Copilot chat. This will likely be the most common way you'll interact with GitHub Copilot. It allows you to interactively ask questions, and has an ability to perform operations across an individual and (with Copilot Edits) multiple files. You can also get support from GitHub Copilot with code completion, which provides suggestions as you code. We're going to explore each of these three capabilities.

Create a new Flask route with Code completion

Code completion predicts the next block of code you're about to type based on the context Copilot has. For code completion, this includes the file you're currently working on and any tabs open in your IDE.

Important

At this time, the Copilot instructions file is only available to Copilot chat.

Code completion is best for situations where you know what you want to do, and are more than happy to just start writing code with a bit of a helping hand along the way. Suggestions will be generated based both on the code you write (say a function definition) and comments you add to your code.

Note

One great way to provide context for GitHub Copilot is to add comments to your code. While comments describing what is done can sometimes be superfluous, it helps Copilot get a better idea of what you're building.

Let's build our new route in our Flask backend with the help of code completion.

  1. Return to your codespace, or reopen it by navigating to your repository and selecting Code > Codespaces and the name of your codespace.

  2. Open app/server/app.py.

  3. Locate the section of code at the very bottom which launches the server, and put your cursor just above it. This should be line 82, and the code will be:

    if __name__ == '__main__':
    app.run(debug=True, port=5100) # Port 5100 to avoid macOS conflicts

  4. Create the route which will call the database to find all breeds, and returns a JSON array with their names and IDs. If you begin typing @app.route or add a comment with the requirements like # Route to get all breeds, you should notice italicized text generated by GitHub Copilot.

  5. Select Tab to accept the code suggestion.

  6. Navigate to http://localhost:5100/api/breeds to validate the route.

Note

As with the prior exercise, we don't provide specific prompts to use with Copilot, as part of the learning experience is to discover how to interact with Copilot. If you are unfamiliar with Flask or how to add routes, you can look at the routes defined above for inspiration, or ask Copilot chat for guidance!

Generate the unit tests

With the route created, we want to now add the tests to ensure the code is correct. We can use GitHub Copilot chat's slash command /tests to create the test for us!

  1. Return to your Codespace or VS Code.
  2. Highlight the code you generated in the prior step.
  3. Open GitHub Copilot chat.
  4. Select the + button to start a new chat.
  5. Type /tests and select tab to activate the command, then press enter to run the command. GitHub Copilot will generate the tests!
  6. Select the Apply edits button just above the generated code suggestion to apply the changes to test_app.py.
  7. Review and validate the code, making any necessary changes. Select Keep once you're satisfied.

Important

GitHub Copilot, like any generative AI solution, can make mistakes. Always review the generated code, making any necessary changes to ensure it's accurate and performs as expected.

  1. Open a terminal window in your codespace or VS Code by selecting Ctrl+Shift+`
  2. Ensure the virtual environment is activated by running the terminal command source ./venv/bin/activate
  3. Navigate to the app/server folder by running the terminal command cd app/server
  4. Run the tests by running the terminal command python -m unittest
  5. Ensure all tests pass!

Add the filters

Adding the filters to the page will require updating a minimum of three files - the Flask backend, the unit tests for our Flask backend, and the Astro frontend. Fortunately, Copilot Edits can update multiple files! Let's get our page updated with the help of Copilot Edits.

  1. Open the following files in your IDE (which we'll point Copilot chat to for context):
    • app/server/app.py
    • app/server/test_app.py
    • app/client/src/components/DogList.astro
  2. Open GitHub Copilot Chat.
  3. Switch to edit mode by selecting Edit in the chat mode dropdown at the bottom of Chat view (should be currently Ask)
  4. If available, select Claude 3.7 Sonnet for the model.
  5. Select Add Context... in the chat window.
  6. Select app/server/app.py, app/client/src/components/DogList.astro and app/server/test_app.py files (you need to select Add context for each file)

Tip

If you type the file names after clicking Add context, they will show up in the filter. You can also drag the files or right click file in explorer and select Copilot -> Add File to Chat)

  1. Ask Copilot to perform the operation you want, to update the page to add the filters. It should meet the following requirements:
    • A dropdown list should be provided with all breeds
    • A checkbox should be available to only show available dogs
    • The page should automatically refresh whenever a change is made
    • Tests should be updated for any changes to the endpoint.
  2. Review the code suggestions to ensure they behave the way you expect them to, making any necessary changes. Once you're satisfied, you can select Keep on the files individually or in Copilot Chat to accept all changes.
  3. Open the page at http://localhost:4321 to see the updates!
  4. Run the Python tests by using python -m unittest in the terminal as you did previously.
  5. If any changes are needed, explain the required updates to GitHub Copilot and allow it to generate the new code.

Important

Working iteratively a normal aspect of coding with an AI pair programmer. You can always provide more context to ensure Copilot understands, make additional requests, or rephrase your original prompts.

Summary and next steps

Congratulations! You've worked with GitHub Copilot to add new features to the website - the ability to filter the list of dogs. Let's close out by creating a pull request with our new functionality!

Resources

← Helping GitHub Copilot understand context Next: GitHub flow →