Skip to content

Commit 4c51024

Browse files
tspascoaltspascoal
committed
initial base for ignite. Missing bonus and content
1 parent 17f70de commit 4c51024

20 files changed

+476
-0
lines changed

‎content/ignite/0-setup.md‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
# Workshop setup
2+
3+
To complete this workshop you will need to clone a repository with a copy of the contents of this repository
4+
5+
> [!Hint]
6+
> Under regular conditions you would need to ensure all requirements, but don't worry. We have ensured this environment has all you need.
7+
8+
## Configure GitHub Copilot
9+
10+
> [!NOTE]
11+
> For your convenience we have the username and password on the instructions, but you can also see their values in the **Resources** tab
12+
13+
14+
1. [] Open Visual Studio Code
15+
2. [] Click on Copilot icon on top bar (left side next to the search input box)
16+
17+
![Copilot icon](./images/0-copilot-icon.png)
18+
19+
3. [] Click on **Open Chat** option (if you clicked on the dropdown arrow, otherwise the window is now open)
20+
4. [] If there is a login button on the chat window, click it, otherwise type something and press enter in the chat input box to force the login window
21+
5. [] Click on **Sign In** blue button on the modal window
22+
6. [] A browser will automatically open, enter on the login input `user_events` (the password input will be greyed out once you enter the username) click on green **Sign in with your identity provider** button
23+
7. [] Click **Continue** button on the **Single sign-on** page
24+
8. [] Enter [email protected](User1).Username+++ on the **Email, phone, or Skype** input box and click on **Next**
25+
9. [] Enter [email protected](User1).AccessToken+++ on the **Temporary Access Pass** field and click on **Sign in with your entity provider** button
26+
10. [] Authorize the user by clicking continue and authorize VS Code access to user email by clicking on **Authorize Visual-Studio-Code*** button
27+
11. [] Click **open** when browser asks for the confirmation (**This site is trying to open Visual Studio Code.**)
28+
12. [] After Copilot is setup you should now have a **Walkthrough: GitHub Copilot Chat** open tab in Visual Studio Code
29+
30+
We are now ready to start working on our code with the help of Copilot.
31+
32+
## Clone lab repository
33+
34+
Let's clone the repository you'll use for the lab.
35+
36+
1. [] Click on the Source Control icon on the left sidebar
37+
38+
![Source control icon](./images/0-source-control-icon.png)
39+
40+
2. [] Click on **Clone Repository** button
41+
3. [] Type `https://github.com/github-samples/pets-workshop` and press enter.
42+
4. [] Select the repository destination folder (suggestion: use the one is automatically shown. The user home folder) by clicking in **Select as Repository Destination** button.
43+
- Note: The repository will be cloned to **SELECTED FOLDER/pets-workshop**
44+
5. [] Click **Open** button when asked if you **Would like to open the cloned repository?**
45+
6. [] Click the **Yes, I trust the authors** button when asked.
46+
47+
The code is now open in Visual Studio Code, feel free to take a look at it or skip to the next section to start the app.
48+
49+
## Start the app
50+
51+
1. [] On the menu bar at the top, Click on **...** (three dots, or **Terminal** if already visible) and then select **Terminal -> New Terminal**
52+
2. [] Start the application by running the following command on the terminal:
53+
54+
```pwsh
55+
.\scripts\start-app.ps1
56+
```
57+
58+
The startup script will install dependencies and start two applications:
59+
60+
- The backend Flask app on **http://localhost:5100**. You can see a list of dogs by opening the url +++http://localhost:5100/api/dogs+++
61+
- The frontend Astro/Svelte app on +++http://localhost:4321+++. You can see app the by opening that URL.
62+
63+
- [] Try it now, open a browser and navigate to the links provided above.
64+
65+
## Summary and next steps
66+
67+
You've now cloned the repository you'll use for this workshop and have GitHub Copilot setup! Next let's **add a new endpoint to the server**

‎content/ignite/1-add-endpoint.md‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
# Coding with GitHub Copilot
2+
3+
With code completions, GitHub Copilot provides suggestions in your code editor while you're coding. This can turn comments into code, generate the next line of code, and generate an entire function just from a signature. Code completion helps reduce the amount of boilerplate code and ceremony you need to type, allowing you to focus on the important aspects of what you're creating.
4+
5+
## Scenario
6+
7+
It's standard to work in phases when adding functionality to an application. Given that we know we want to allow users to filter the list of dogs based on breed, we'll need to add an endpoint to provide a list of all breeds. Later we'll add the rest of the functionality, but let's focus on this part for now.
8+
9+
The application uses a Flask app with SQLAlchemy as the backend API (in the [/server][server-code] folder), and an Astro app with Svelte as the frontend (in the [/client][client-code] folder). You will explore more of the project later; this exercise will focus solely on the Flask application.
10+
11+
> [!NOTE]
12+
> As you begin making changes to the application, there is always a chance a breaking change could be created. If the page stops working, check the terminal window you used previously to start the application for any error messages. You can stop the app by using <kbd>Control</kbd>+<kbd>C</kbd>, and restart it by running `./scripts/start-app.ps1`.
13+
14+
## Flask routes
15+
16+
While we won't be able to provide a full overview of [routing in Flask][flask-routing], they are defined by using the Python decorator **@app.route**. There are a couple of parameters you can provide to **@app.route**, including the path (or URL) one would use to access the route (such as **api/breeds**), and the [HTTP method(s)][http-methods] which can be used.
17+
18+
## Code completion
19+
20+
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.
21+
22+
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.
23+
24+
## Create the breeds endpoint
25+
26+
Let's build our new route in our Flask backend with the help of code completion.
27+
28+
> [!IMPORTANT]
29+
> For this exercise, **DO NOT** copy and paste the code snippet provided, but rather type it manually. This will allow you to experience code completion as you would if you were coding back at your desk. You'll likely see you only have to type a few characters before GitHub Copilot begins suggesting the rest.
30+
31+
1. [] Return to Visual Studio Code.
32+
2. [] Open **server/app.py** file.
33+
3. [] Locate the comment which reads **## HERE**, which should be at line 68.
34+
4. [] Delete the comment to ensure there isn't any confusion for Copilot, and leave your cursor there.
35+
5. [] Begin adding the code to create the route to return all breeds from an endpoint of **api/breeds** by typing the following:
36+
37+
```python-nocopy
38+
@app.route('/api/breeds', methods=['GET'])
39+
```
40+
41+
6. [] Once you see the full function signature, select <kbd>Tab</kbd> to accept the code suggestion.
42+
43+
> [!Hint]
44+
> You can also use <kbd>control</kbd>+<kbd>Right Arrow</kbd> to accept a single word at a time.
45+
46+
7. [] If it didn't already, code completion should then suggest the remainder of the function signature; just as before select <kbd>Tab</kbd> to accept the code suggestion.
47+
48+
The code generated should look a little like this:
49+
50+
```python-nocopy
51+
@app.route('/api/breeds', methods=['GET'])
52+
def get_breeds():
53+
# Query all breeds
54+
breeds_query = db.session.query(Breed.id, Breed.name).all()
55+
56+
# Convert the result to a list of dictionaries
57+
breeds_list = [
58+
{
59+
'id': breed.id,
60+
'name': breed.name
61+
}
62+
for breed in breeds_query
63+
]
64+
65+
return jsonify(breeds_list)
66+
```
67+
68+
> [!IMPORTANT]
69+
> Because LLMs are probabilistic, not deterministic, the exact code generated can vary. The above is a representative example. If your code is different, that's just fine as long as it works!
70+
71+
8. [] Let's add a comment to the newly created function. To do this, place your cursor inside the function (anywhere between the lines **def get_breeds...** and **return jsonify...**). Then, press <kbd>Control</kbd>+<kbd>I</kbd> to open the editor inline chat.
72+
In the input box, type **/doc**. (You can optionally provide additional details, but it's not required). This will prompt GitHub Copilot to generate a documentation comment for the function. The suggested comment will appear inline in the code (highlighted in green). Click **Accept** to apply the comment to your code, or click **Close** to discard the suggestion.
73+
74+
> [!TIP]
75+
> You just used a slash command, a shortcut to streamline a task, these commands eliminate the need for verbose prompts.
76+
> ![doc slash command](images/1-doc-slash-command-suggestion.png)
77+
78+
9. [] **Save** the file.
79+
80+
## Validate the endpoint
81+
82+
With the code created and saved, let's quickly validate the endpoint to ensure it works.
83+
84+
1. [] Navigate to +++http://localhost:5100/api/breeds+++ on the browser to validate the new route. You should see JSON displayed which contains the list of breeds!
85+
2. [] Let's commit the changes locally, click on the Source control icon on the left sidebar
86+
3. [] Click on the **+** icon to stage **server/app.py**
87+
4. [] On the commit message box click on the icon with two stars, Copilot is going to create the commit message for you
88+
5. [] Click on the **Commit** blue button to commit locally if you are happy with the commit message, otherwise adjust the message before committing.
89+
- Don't try to push the changes (by pushing or synching), you do not have write permissions on the repository.
90+
91+
## Summary and next steps
92+
93+
You've added a new endpoint with the help of GitHub Copilot! You saw how Copilot predicted the next block of code you were likely looking for and provided the suggestion inline, helping save you the effort of typing it out manually. Let's start down the path of performing more complex operations by [exploring our project][walkthrough-next].
94+
95+
## Resources
96+
97+
- [Code suggestions in your IDE with GitHub Copilot][copilot-suggestions]
98+
- [Code completions with GitHub Copilot in VS Code][vscode-copilot]
99+
- [Prompt crafting][prompt-crafting]
100+
101+
102+
[client-code]: /client/
103+
[copilot-suggestions]: https://docs.github.com/en/copilot/using-github-copilot/getting-code-suggestions-in-your-ide-with-github-copilot
104+
[flask-routing]: https://flask.palletsprojects.com/en/stable/quickstart/#routing
105+
[http-methods]: https://www.w3schools.com/tags/ref_httpmethods.asp
106+
[prompt-crafting]: https://code.visualstudio.com/docs/copilot/prompt-crafting
107+
[server-code]: /server/
108+
[vscode-copilot]: https://code.visualstudio.com/docs/copilot/ai-powered-suggestions

‎content/ignite/2-explore-project.md‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
# Helping GitHub Copilot understand context
2+
3+
The key to success when coding (and much of life) is context. Before we add code to a codebase, we want to understand the rules and structures already in place. When working with an AI coding assistant such as GitHub Copilot the same concept applies - the quality of suggestion is directly proportional to the context Copilot has. Let's use this opportunity to both explore the project we've been given and how to interact with Copilot to ensure it has the context it needs to do its best work.
4+
5+
## Scenario
6+
7+
Before adding new functionality to the website, you want to explore the existing structure to determine where the updates need to be made.
8+
9+
## Chat participants and extensions
10+
11+
GitHub Copilot Chat has a set of available [chat participants][chat-participants] and [extensions][copilot-extensions] available to you to both provide instructions to GitHub Copilot and access external services. Chat participants are helpers which work inside your IDE and have access to your project, while extensions can call external services and provide information to you without having to open separate tools. We're going to focus on one core chat participant - **@workspace**.
12+
13+
**@workspace** creates an index of your project and allows you to ask questions about what you're currently working on, to find resources inside the project, or add it to the context. It's best to use this when the entirety of your project should be considered or you're not entirely sure where you should start looking. In our current scenario, since we want to ask questions about our project, **@workspace** is the perfect tool for the job.
14+
15+
> [!NOTE]
16+
> This exercise doesn't provide specific prompts to type, as part of the learning experience is to discover how to interact with Copilot. Feel free to talk in natural language, describing what you're looking for or need to accomplish.
17+
18+
1. [] Return Visual Studio Code with the project open.
19+
2. [] Close any tabs you may have open to ensure the context for Copilot chat is empty.
20+
3. [] Open GitHub Copilot Chat.
21+
22+
> [!Hint]
23+
> You can open Chat by clicking on GitHub Copilot icon at the top bar and then choose **Open Chat** or use <kbd>Control</kbd>+<kbd>Alt</kbd>+<kbd>I</kbd>
24+
25+
4. [] Select the **+** icon towards the top of Copilot chat to begin a new chat.
26+
5. [] Type `@workspace` in the chat prompt window and hit <kbd>tab</kbd> to select or activate it, then continue by asking Copilot about your project. You can ask what technologies are in use, what the project does, where functionality resides, etc.
27+
28+
> [!NOTE]
29+
> You may be asked to authenticate again, if that happens follow the process you have followed before (this time you won't need to enter the credentials).
30+
31+
6. [] Spend a few minutes exploring to find the answers to the following questions (don't forget the **@workspace**):
32+
- Where's the database the project uses?
33+
- What files are involved in listing dogs?
34+
35+
> [!Knowledge] Did you notice that when files are referenced, there's an icon in front of the name? If you click on it, it will open the file in the editor. Those files are part of the prompt Context.
36+
37+
## Summary and next steps
38+
39+
You've explored context in GitHub Copilot, which is key to generating quality suggestions. You saw how you can use chat participants to help guide GitHub Copilot, and how with natural language you can explore the project. Let's see how we can provide even more context to Copilot chat through the use of **Copilot instructions**.
40+
41+
## Resources
42+
43+
- [Copilot Chat cookbook][copilot-cookbook]
44+
- [Use Copilot Chat in VS Code][copilot-chat-vscode]
45+
- [Copilot extensions marketplace][copilot-marketplace]
46+
47+
[chat-participants]: https://code.visualstudio.com/docs/copilot/copilot-chat#_chat-participants
48+
[copilot-chat-vscode]: https://code.visualstudio.com/docs/copilot/copilot-chat
49+
[copilot-cookbook]: https://docs.github.com/en/copilot/copilot-chat-cookbook
50+
[copilot-extensions]: https://docs.github.com/en/copilot/using-github-copilot/using-extensions-to-integrate-external-tools-with-copilot-chat
51+
[copilot-marketplace]: https://github.com/marketplace?type=apps&copilot_app=true

0 commit comments

Comments
 (0)