-
Notifications
You must be signed in to change notification settings - Fork 685
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Frank Campise
committed
Apr 21, 2024
1 parent
217dea1
commit aeb6226
Showing
121 changed files
with
2,554 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
# Hackathon Format: Build a To-Do Application with AI Features | ||
|
||
**COMING SOON** | ||
|
||
[🔼 Home ](/Public%20Repo%20Content/README.md) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,34 @@ | ||
# Track 2: Build a To-Do Application with AI Features | ||
|
||
## Summary | ||
This track is designed to help students build a To-Do application with AI features that will be deployed to Azure. The application will start as a simple console application and then evolve into a web application taking advantage of generative AI to help with task recommendations. The application will be broken down into a series of sprints that will build on top of each other. Each sprint will have a set of features and user stories that the students will implement. The goal is to give students a hands-on experience building a real-world application that they can continue to evolve after the hackathon. | ||
|
||
## Key Concepts that Students will Learn: | ||
- **Everyone can code** – and coding can come in all forms and sizes; from a simple script/console application, to a website, to a fully commercial solution that scales to millions of users. You do not have to be building the next Facebook or YouTube to be a developer. | ||
|
||
- **Start Small and iterate** – some problems can be daunting if you try to solve them all at once, break down a problem into smaller chunks that you can iterate over and incrementally make improvements to your application. We have purposely broken down the problem into a series of sprints and user stories to help show how an application can evolve over many iterations. | ||
|
||
- **Understand the tools that can help you on the journey**: such as IDE’s (i.e., Visual Studio Code) and how AI can both help you build your application (i.e., GitHub Copilot) as well as help you create applications with amazing capabilities | ||
|
||
## Track Structure | ||
- Students will be broken up into teams based on skill level and each team will be assigned a coach (i.e., CSA) to guide them through two days of learning. | ||
- The training will be centered around building a **To-Do Application**. Taking the students from the most basic console application, to a web application, **adding AI features** along the way, and then eventually **hosting in Azure**. | ||
- The application will be broken down into a small set of manageable tasks (i.e., sprints and user stories) building up to the final application. Each sprint will have some learning activities through recorded presentations to get the students up to speed on a topic, and then exercises broken up into features/user stories that they will implement. | ||
- Each sprint will build on top of the previous sprint and students will be very hands on with the code. | ||
- Since each sprint builds on the previous sprint a student can join at any point in the track and start coding as each user story has a fully functional code base that the user can start from. | ||
- The students will be able to work at their own pace and will have the ability to ask questions of their coach as they work through the exercises. | ||
|
||
|
||
## Getting Started | ||
This track has been designed to work in **2 modes** you can either approach it as... | ||
- **Workshop** - where you can simply follow along the step-by-step guide all the way through the training. | ||
- [**start the track in the workshop format**](/Track_2_ToDo_App/Workshop-Format.md) | ||
|
||
> [!TIP] | ||
> If you are completely new to coding or just want to follow along with the step-by-step guide, this is the best place to start. | ||
- **Hackathon** - where you are given a set of features/user stories and you try to implement these changes on your own (abliet there is always an option to jump into the step-by-step guide if you get stuck) and work through them in a set amount of time. | ||
- [**start the track in the hackathon format**](/Track_2_ToDo_App/Hackathon-Format.md) | ||
|
||
|
||
Still interesting in learning more about coding? Check out the [**Where to Learn More**](/Track_2_ToDo_App/Where%20to%20Learn%20More.md) section for more resources on coding and building applications. |
70 changes: 70 additions & 0 deletions
70
Track_2_ToDo_App/Sprint-00 - Environment Setup/01 - Setup GitHub Account.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,70 @@ | ||
# Setup GitHub Account | ||
⏲️ _Est. time to complete: 45 min._ ⏲️ | ||
|
||
## 🎯Here is what you will learn | ||
You wil learn the following: | ||
- How to sign up at GitHub and create an account | ||
- How to edit your profile and upload a picture | ||
- How to fork a repository | ||
- Bonus: How to build your own Octocat | ||
|
||
## Table Of Contents | ||
|
||
1. [Sign up and create a GitHub account](#sign-up-and-create-at-github-account) | ||
2. [Edit your GitHub profile](#edit-your-github-profile) | ||
3. [Fork repository](#fork-repository) | ||
4. [Create your codespace](#create-your-codespace) | ||
5. [Bonus Challenge: Octocat](#bonus-challenge-build-your-own-octocat) | ||
|
||
## Sign up and create at GitHub account | ||
|
||
<details> | ||
<summary>What is GitHub?</summary> | ||
|
||
GitHub is actually two things: **Git** and **Hub**. | ||
|
||
**Git** is a version control software. It allows developers to work on a specific project at the same time by tracking the changes. If something goes wrong, you can easily undo the changes with Git. | ||
**Hub** is nothing special in itself, but it represents the "social network" of developers built on top of Git. While GitHub does not own the Git software, it has created a platform that makes it easy to access and collaborate with Git. The groundbreaking feature of GitHub is that it makes it super easy to share/show your code with the world or just store it. You no longer have to worry about where you store your code. Companies have GitHub accounts for the same reason. GitHub provides an easy way to store your code online with built-in version control. | ||
|
||
</details> | ||
|
||
- Go to the [GitHub website](https://github.com/) and create a GitHub account. | ||
- Add your email address, password and your desired username | ||
![Startpage of GitHub](../content-images/Sprint%2000/github/GithubSignUp.png) | ||
![Enter your Email page](../content-images/Sprint%2000/github//EnterEmail.png) | ||
- Type **y** for receiving emails from GitHub about new product updates and announcements. Or **n** for not receiving emails from GitHub about product updates and announcements. | ||
![Announcement confirmation page](../content-images/Sprint%2000/github/NoAnnouncements.png) | ||
|
||
- To **verify** the account, please follow the instructions. | ||
![Verification page](../content-images/Sprint%2000/github/verification.png) | ||
|
||
After verifying your account, you will be given an option to choose if you would like to use the free version or paid version, for this exercise, please choose free version at the bottom of the screen and continue. | ||
|
||
![Verion page](../content-images/Sprint%2000/github/version.png) | ||
|
||
You have now successfully created your GitHub account. Now it is time to edit your profile and make it your own. | ||
|
||
## Edit your GitHub profile | ||
|
||
### Upload a profile picture and insert your name | ||
|
||
This is the front page of your account. This overview shows everything about your activities on GitHub, such as your contributions to repositories, your own repositories, your achievements and much more. | ||
![Profile page](../content-images/Sprint%2000/github/homePage.png) | ||
|
||
To change or add any of your information, click on your icon in the top right corner and choose **Settings**. If you like, you can upload a profile picture here as well. | ||
|
||
![Top right user icon options popup](../content-images/Sprint%2000/github/Settings.png) | ||
|
||
![Profile page](../content-images/Sprint%2000/github/EditProfile.gif) | ||
|
||
## Fork Repository | ||
|
||
A Fork is a copy of a repository in your own GitHub account. This is extremely handy if you want to freely experiment without making any changes to the original project. | ||
|
||
Now, let's go ahead and fork this repository! | ||
|
||
![Highlighted fork button top right](../content-images/Sprint%2000/github/ForkTheRepository.png) | ||
|
||
Now that you have successfully created your GitHub account, we are ready to set up your coding environment next! | ||
|
||
[🔼 Sprint 0 - Home](readme.md) | [Next setup step ▶](02b%20-%20Setup%20Local%20Development%20Environment.md) |
119 changes: 119 additions & 0 deletions
119
Track_2_ToDo_App/Sprint-00 - Environment Setup/02a - Use GitHub CodeSpaces.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,119 @@ | ||
# Using GitHub CodeSpaces | ||
⏲️ _Est. time to complete: 10 min._ ⏲️ | ||
|
||
## Here is what you will learn 🎯 | ||
You will learn the following: | ||
- What is GitHub Codespaces and how it can benefit your development process. | ||
- How to create and stop GitHub Codespaces. | ||
- How to understand and use the `devcontainer.json` file in a project. | ||
- How to install and use extensions in a Codespace. | ||
|
||
## Table Of Contents | ||
- [Introduction to GitHub Codespaces](#introduction-to-github-codespaces) | ||
- [Creating and Stopping a GitHub Codespace](#creating-and-stopping-a-github-codespace) | ||
- [Understanding the `devcontainer.json` file](#understanding-the-devcontainerjson-file) | ||
- [Installing and using extensions in a Codespace](#installing-and-using-extensions-in-a-codespace) | ||
|
||
## Introduction to GitHub Codespaces | ||
|
||
Welcome to our project! If you're new to programming, don't worry. We're here to guide you through the process. We use something called Codespaces, which is a feature provided by GitHub. You can learn more about it [here](https://github.com/features/codespaces). | ||
|
||
GitHub Codespaces is a cloud-based development environment. It's like a virtual coding setup that lives on the internet, not on your personal computer. It allows you to write, run, debug, test, save different versions of your code (commit), and share your code with others (push), all from your web browser. This means you don't need to set up a local development environment on your computer, which can be a complex and time-consuming process, especially for beginners. | ||
|
||
Here are some of the advantages of using Codespaces: | ||
|
||
- **No setup required**: You don't need to install any software or configure your computer to start coding. Just open a Codespace, and you're ready to go! | ||
|
||
- **Consistent environments**: Each Codespace is isolated and consistent. This means you won't run into issues like "it works on my machine but not on yours". | ||
|
||
- **Powerful and flexible**: Codespaces are powered by Visual Studio Code and support a wide range of programming languages and tools. You can customize your Codespace with extensions and settings to fit your workflow. | ||
|
||
- **Accessible from anywhere**: As long as you have an internet connection, you can access your Codespace from any device, anywhere in the world. | ||
|
||
- **Limited free usage**: GitHub provides up to 60 hours of free usage of Codespaces per month. This makes it a cost-effective solution for beginners and small projects. | ||
|
||
Now that you know what Codespaces is and why it's useful, let's dive into how to use it in our project! | ||
|
||
|
||
## Creating and Stopping a GitHub Codespace | ||
|
||
Creating a new Codespace is easy, when you know where to look: | ||
|
||
1. Navigate to the main page of the GitHub repository for which you want to create a Codespace. | ||
2. Click on the green "Code" button on the top right and switch from the local to the Codespaces tab. | ||
3. Click on the plus symbol. GitHub will now create a new Codespace and open it in a new browser window. It might take a few minutes to load but just like that you're done! | ||
|
||
![Create Codespaces](../content-images/Sprint%2000/github/CreateCodespaces.png) | ||
|
||
To stop a Codespace, follow these steps: | ||
|
||
1. Go back to the main page of the GitHub repository (the tab should still be open in your web browser) | ||
2. Click on the three dots in the top right corner of the Codespace window. | ||
3. Select "Stop Codespace". Your Codespace will now be stopped and closed. You can reopen it later by returning to your repository and selecting the same Codespace from the list. | ||
|
||
![Stop Codespaces](../content-images/Sprint%2000/github/StopCodespaces.png) | ||
|
||
If you do not explicitly stop a codespace, it will continue to run until it times out from inactivity. Closing a codespace does not stop the Codespace. | ||
|
||
## Understanding the `devcontainer.json` file | ||
|
||
In our project, you'll find a file named `devcontainer.json` which is located in the.devontainer folder. This file is automatically detected by GitHub and like a recipe for Codespaces. It tells Codespaces how to set up the environment for our project. Let's break down what each part means: | ||
|
||
```json | ||
{ | ||
"image": "mcr.microsoft.com/devcontainers/universal:2", | ||
"postCreateCommand": "python3 -m pip install -r Application/requirements.txt", | ||
"customizations": { | ||
"codespaces": { | ||
"openFiles": ["Application/README.md"] | ||
}, | ||
"vscode": { | ||
"extensions": [ | ||
"ms-toolsai.jupyter", | ||
"ms-python.python" | ||
] | ||
} | ||
} | ||
} | ||
``` | ||
|
||
- `"image": "mcr.microsoft.com/devcontainers/universal:2"`: This line tells Codespaces to use a specific Docker image. Docker images are like blueprints for creating containers, which are isolated environments where you can run your code. | ||
|
||
In this case, we're using the `mcr.microsoft.com/devcontainers/universal:2` image. This is a universal image provided by Microsoft that includes a wide range of development tools. It's designed to support many different types of projects, making it a great starting point for most Codespaces. | ||
|
||
This image includes tools for several programming languages, databases, and utilities. It also includes the Visual Studio Code Server, which allows you to use Visual Studio Code's interface in your web browser. | ||
|
||
By using this image, we ensure that everyone working on the project has the same tools available, regardless of their local machine. | ||
|
||
- `"postCreateCommand": "python3 -m pip install -r Application/requirements.txt"`: After the base Docker image is set up, this command runs. It's like adding the specific ingredients for our project. | ||
|
||
This command is a standard way to install Python packages. Here's what each part of the command does: | ||
|
||
- `python3`: This is the version of Python we're using. Python 3 is the current and most widely used version of Python. | ||
|
||
- `-m pip`: This tells Python to use the `pip` tool. `pip` is like a handyman that can fetch and install Python packages for you. These packages are ready-made pieces of code that you can use in your project. | ||
|
||
- `install`: This is the task we're giving to `pip`. It's like saying, "Hey pip, please install something for me." | ||
|
||
- `-r Application/requirements.txt`: The `-r` option tells `pip` to look in a specific file for a list of packages to install. In this case, the file is `Application/requirements.txt`. This file is like a shopping list of all the Python packages that our project needs. | ||
|
||
By running this command, we make sure that all the necessary Python packages are installed in the Codespace. This is like setting up all the tools and materials before starting a DIY project. | ||
|
||
## Installing and using extensions in a Codespace | ||
|
||
The `devcontainer.json` file also allows us to customize our Codespaces environment. We have two types of customizations: | ||
|
||
- `"codespaces"`: These customizations apply when we're using Codespaces. `"openFiles": ["README.md"]` means that the `README.md` file that you saw on the main page will automatically pop up when you start the Codespace. It's like walking into a room and finding a welcome note on the table. | ||
|
||
- `"vscode": {"extensions": ["ms-toolsai.jupyter", "ms-python.python"]}`: This part tells Visual Studio Code to automatically add two helpers, called extensions, when the Codespace is created: | ||
|
||
- `ms-toolsai.jupyter`: This is like a digital notebook where you can write and run code, and also add notes, images, or even equations. It's very popular in data science because you can see your data and your code side by side. The Jupyter extension lets you use these notebooks right inside Visual Studio Code. | ||
|
||
- `ms-python.python`: This is a helper for writing Python code. It adds features like code suggestions, checks your code for mistakes, and even formats your code to make it look neat and consistent. It's like having a helpful robot that watches over your shoulder while you code. | ||
|
||
By including these extensions in our `devcontainer.json` file, we make sure they are automatically added in the Codespace. This means you don't have to add them yourself, and everyone working on the project has the same setup. | ||
|
||
We hope this helps you understand how our project is set up in Codespaces. Happy coding! | ||
|
||
|
||
[🔼 Sprint 0 - Home](readme.md) | [Next Sprint ▶](/Track_2_ToDo_App/Sprint-01%20-%20Basic%20Application/README.md) |
Oops, something went wrong.