Skip to content

Latest commit

 

History

History
104 lines (54 loc) · 4.29 KB

2. core exercises.md

File metadata and controls

104 lines (54 loc) · 4.29 KB
Raw

Workshop exercises

Core exercise

The following exercises will help you get started with GitHub Copilot. You must have completed the setup instructions before starting these steps.

Step by step instructions

1. Getting the application running

Starting Point: You should have the repo open in VSCode (or your supported IDE)

  1. Press CTRL + ` to open the terminal window in VS Code if it is not already open.

  2. Open a .java file and run F5

  • Alternatively,Enter ./mvnw spring-boot:run in the terminal window and press ENTER to run the application.
  1. In the pop-up window that appears in the bottom right corner of the Codespace window, click the Open in Browser button. This will securely map port 3000 from the Codespace environment (if you're using Codespaces) to your local browser so you can see the running calculator application.
Open in Browser
  1. Do some simple calculations to show that the calculator is working as expected.
The Node Calculator

  1. Close the browser window for now and return to the Codespace window.

  2. Ensure your focus is in the terminal window and press CTRL + C to stop the application.

2. Adding features using GitHub Copilot

TO DO - You've been asked to add a new feature to the calculator application.

Adding the buttons to the calculator UI

  1. Open the templates/index.html file in the editor window.

  2. Scroll down to where you see the <!-- TODO #1: Buttons --> comment

  3. Add a new line below this comment and type the following two lines. You should see GitHub Copilot start to autocomplete the second line as you type. When you see this, just press TAB to accept the completion.

<!-- add a button for a power (or exponential) function -->

Your finished snippet should match the following.

GitHub Copilot suggestions

Adding the logic for the new features

  1. Open the client.js file in the editor window.

  2. Scroll down to where you see the // TODO #2: Add operator comment (Line 22)

  3. Move your cursor to the end of the line 35 (to the right of break; and press ENTER.

GitHub Copilot should display ghost text suggesting the code shown in the following screenshot. Press TAB to accept the suggestion.

GitHub Copilot suggestions
  1. Press ENTER at the end of the line, then accept the next two lines Copilot suggests.

Your completed addition should match the following.

GitHub Copilot suggestions

  1. Open the ArithmeticController.java file in the editor window.

  2. Scroll down to where you see the // TODO #3: Add operator comment

  3. Press ENTER at the end of the line that defines the divide function.

  4. Copy and Paste this line <button class="btn" th:onClick="operationPressed('^')">^</button>

GitHub Copilot suggestions

  1. Press CTRL + ` to open the terminal window in VS Code.

  2. Enter ./mvnw spring-boot:run in the terminal window and press ENTER to run the application.

  3. You should test the new button by clicking 3, then the "^" (power) button, then click 2. Click "=" and the result should be 9.

  4. Close the browser window, return to the Terminal window in Codespaces and press CTRL+C to terminate the application.

Success, you have enhanced the calculator application using GitHub Copilot!

Hopefully your calculator is working! Remember, GitHub Copilot is probabilistic so you may not get the exact same code suggestions as we did. If you're not happy with the suggestions, you can always press CTRL + Z to undo the changes and try again.

What's next?

You're now ready to start the challenge exercises to see how you can leverage the power of GitHub Copilot to solve a number of challenges yourself.