{{ profile.name }}
diff --git a/frontend/src/views/FaceAI.vue b/frontend/src/views/FaceAI.vue
index c0a4e980d..7f4e3f5e8 100644
--- a/frontend/src/views/FaceAI.vue
+++ b/frontend/src/views/FaceAI.vue
@@ -149,14 +149,18 @@ export default class FaceAI extends Vue {
],
})
.then((response) => {
- if(response.length == 0) {
- this.$confirm("The AI could not recognize your face, make sure the gray box covers most of your face.", "AI Error", "error")
- .then((r: boolean) => {
- this.$router.go(0);
- })
- .catch(() => {
- this.$router.push({ name: 'home' })
- });
+ if (response.length == 0) {
+ this.$confirm(
+ "The AI could not recognize your face, make sure the gray box covers most of your face.",
+ "AI Error",
+ "error"
+ )
+ .then((r: boolean) => {
+ this.$router.go(0);
+ })
+ .catch(() => {
+ this.$router.push({ name: "home" });
+ });
return;
}
this.faces = response.map((face) => {
@@ -199,11 +203,15 @@ export default class FaceAI extends Vue {
glasses,
};
});
- }).catch(err => {
- this.$alert("An error occurred while trying to connect to Face AI. Try again and ask your coach if the problem persists.", "Face AI not available", "warning")
- .then(() => this.$router.go(0));
- console.log("An error occurred:");
- console.error(err);
+ })
+ .catch((err) => {
+ this.$alert(
+ "An error occurred while trying to connect to Face AI. Try again and ask your coach if the problem persists.",
+ "Face AI not available",
+ "warning"
+ ).then(() => this.$router.go(0));
+ console.log("An error occurred:");
+ console.error(err);
});
});
}
diff --git a/instructions/day1/ApplicationPart1/README.md b/instructions/day1/ApplicationPart1/README.md
index 3aa0d3b7f..48eaee21c 100644
--- a/instructions/day1/ApplicationPart1/README.md
+++ b/instructions/day1/ApplicationPart1/README.md
@@ -15,7 +15,7 @@ Today you will learn how to:
## Table Of Contents
1. [Create a new branch in your project](#create-a-new-branch-in-your-project)
-2. [Change the title and it's color of your App](#change-the-title-and-its-color-of-your-app)
+2. [Change the title and its color of your App](#change-the-title-and-its-color-of-your-app)
3. [Test your changes in your codespace](#test-your-changes-in-your-codespace)
4. [Commit & push your changes](#commit--push-your-changes)
5. [Open a pull request and merge it](#open-a-pull-request-and-merge-it)
@@ -26,8 +26,18 @@ Go to your repository on GitHub. Click on the "main" dropdown and type in the na
+Let's type a few git commands in the terminal to create a new branch.
+
+
+
+What is a terminal?
+
+You are probably used to getting things done on your computer by moving your mouse around and clicking on things. There is actually a different way with which you can use your computer: The terminal!\ Instead of moving your mouse you can type a command in the terminal and the computer will execute it. Say, you want to go to a specific folder on your computer - we have a command for that, namely, `cd ` (cd stands for change directory). There are many other commands that can do many different things. We call the set of all commands and their combinations the Shell Scripting language. You can try them out for yourself, go to the terminal (the little box as shown in the picture) and type `help` - this will list all the built-in commands. Feel free to play around and give them a try to familiarize yourself with the environment. For some handy common commands you can try: `pwd` (outputs the path of your current directory, pwd stands for print working directory) and `ls` (lists all the files in the current repository)
+
+
+
Go back into your codespace and type into the terminal:
-
+
git pull
and afterwards:
@@ -40,27 +50,35 @@ It should look similar to this:
Congrats! You just created a new branch and switched to it successfully. Now you can start making changes to your code!
-## Change the title and it's color of your App
+## Change the title and its color of your App
-Open the file **Home.vue** from the folder **frontend/src/views**. On top you find a so called `
` that describes the basic structure of the Home-View. To change the title of your App from Milligram however you like, you need to change the text between the `` tags.
+Open the file `Home.vue` from the folder `frontend/src/views`. On top you find a so called `` that describes the basic structure of the Home-View. To change the title of your App from Milligram however you like, you need to change the text between the `` tags.
-To change the color we need to add a new attribute to the `` tag. The attribute is called `style` and we can set it to `color: green` to make our title green. You can find a full list of all possible colors [here](https://htmlcolorcodes.com/color-names/).
+To change the color we need to add a new attribute to the `` tag. The attribute is called `style` and we can set it to `color: green` to make our title green. [You can find a full list of all possible colors here.](https://htmlcolorcodes.com/color-names/)
-## Test your changes in your codespace
+## Test your changes in your codespace
1. Install recommended extensions when prompted.
2. In the terminal, navigate to the frontend folder with `cd frontend`
3. Run `npm install` to install node packages.
-4. Build the app with this command - `npm run build`
-5. Run the app - `npm run serve`
-6. Click *browse to site* when it pops up to see the deployed test site - you should now see your changes!
+4. Build the app with this command - `npm run dev`
+5. Click _browse to site_ when it pops up to see the deployed test site, you should now see your changes
+6. Now, try to change the color of the title to another color of your choice: the color will change automatically in the browser without you having to refresh the page!
+
+
+| :warning: Troubleshooting |
+|:---------------------------|
+| if the `open in browser`pop-up does not show up at the bottom of your window, refresh the page and retry |
+
+
+
## Commit & push your changes
Click on the `+` sign on the upper right of your terminal to create a new one. We do not want to stop our app from running, so we will use a new terminal for the next steps.
@@ -71,7 +89,7 @@ After verifying your changes, it's time to commit and push. At first we want to
-Now run first `git add .` what will add all changed files to the staging area. Afterwards run `git commit -m "Update title and color"` to commit your changes. The `-m` flag is used to add a commit message. It is important to add a meaningful commit message, so that others can understand what you have changed. Afterwards run `git push` to push your changes to GitHub.
+Now first run `git add .` this will add all changed files to the staging area. Afterwards run `git commit -m "Update title and color"` to commit your changes. The `-m` flag is used to add a commit message. It is important to add a meaningful commit message, so that others can understand what you have changed. Afterwards run `git push` to push your changes to GitHub.
@@ -79,9 +97,11 @@ Now run first `git add .` what will add all changed files to the staging area. A
Now go back into your GitHub repository. You should see a message that you have pushed your branch. Click on the **Compare & pull request** button to open a new pull request.
+> If this message does not appear, click on the **Pull requests** tab and then on the **New pull request** button.
+
-A new window will open. Here you can see your last commit message as a title and have the possibilty to insert a description. Check that you have chosen your own repositories main branch for the merge.
+A new window will open. Here you can see your last commit message as a title and have the possibilty to insert a description. Check that you have chosen your own repositories main branch for the merge.
Click on the **Create pull request** button on the lower left to create a new pull request.
@@ -96,14 +116,13 @@ Another window opens. Here you can review your changes again. Click on **Files c
Click back on **Conversation** to see the conversation view. Here you can see the commit message and the description we have added.
-Pull requests are a very popular way of working professionally together with other developers on a project to ensure code quality. Usually another person would now review your changes and then (hopefully) accept them and merge them into the **main** branch.
+Pull requests are a very popular way of working professionally together with other developers on a project to ensure code quality. Usually another person would now review your changes and then (hopefully) accept them and merge them into the **main** branch.
Today we will do this ourselves. Click on the **Merge pull request** and then **Confirm merge** button to merge your recent made changes.
-If everything went well, you should see a message that your pull request has been merged.
+If everything went well, you should see a message that your pull request has been merged.
-Congratulations! You have successfully made your first changes to your project, learned how professional developers work together and merged them into the main branch.
-
+Congratulations! You have successfully made your first changes to your project, learned how professional developers work together and merged them into the main branch.
[◀ Previous challenge](../GitHub/README.md) | [🔼 Home](../../../README.md) | [Next challenge ▶](../ApplicationPart2/README.md)
diff --git a/instructions/day1/ApplicationPart1/images/terminal.png b/instructions/day1/ApplicationPart1/images/terminal.png
new file mode 100644
index 000000000..30d42d582
Binary files /dev/null and b/instructions/day1/ApplicationPart1/images/terminal.png differ
diff --git a/instructions/day1/ApplicationPart2/README.md b/instructions/day1/ApplicationPart2/README.md
index cc3fe89b6..5b191b0d7 100644
--- a/instructions/day1/ApplicationPart2/README.md
+++ b/instructions/day1/ApplicationPart2/README.md
@@ -61,7 +61,7 @@ _A [repository](https://docs.github.com/github/creating-cloning-and-archiving-re
-Make sure that the Actions have read/write permissions. Check this via Settings->Actions->General and scroll down to the *Workflow permissions* section. Click the *Read and write permissions* option. Click *Save*.
+Make sure that the Actions have read/write permissions. Check this via Settings->Actions->General and scroll down to the _Workflow permissions_ section. Click the _Read and write permissions_ option. Click _Save_.
### Run GitHub Actions
@@ -84,9 +84,9 @@ it to serve the frontend for Milligram.
- Go to your repository settings-
- Navigate to **Pages**, select the branch _gh-pages_ and hit the save button.
- 
+ 
- The deployment will take 1-2 minutes. After that, the Milligram website is
- accessible through `https://.github.io/anyonecancode/`.
+ accessible through `https://.github.io/everyonecancode/`.
Take a look at the website. Try changing the profile to your GitHub account name
and see that it is stored even if you refresh the browser.
@@ -103,7 +103,10 @@ features are:
- Detect objects within images and create image descriptions (implemented on day 2)
- Transcribe sentences you speak using Azure Speech Service (implemented on day 2)
-To make the first modifications, open your personal Milligram website on your phone and explore it's content. Then edit the profile in the app to show your own GitHub profile picture in the app.
+Your app is available. But there is no storage or database behind it. So it won't be able to store any data. We'll install that in the next step.
+
+Now, to make the first modifications, open your personal Milligram website on your phone and explore it's content. Then edit the profile in the app to show your own GitHub profile picture in the app.
+
### Add The application to your homescreen
@@ -154,8 +157,8 @@ Just like the disk or storage on your computer. A cool fun fact is that you can
- Select your subscription & the resource group with the name that you used to log into the Azure Portal.
- The name of your Azure Storage account needs to be globally unique. It also has to use small letters and no special characters.
- Make sure to select `Standard` for _Performance_ and `Locally-redundant storage (LRS)` for _Redundancy_.
- 
-- Hit _Review & create_ and after that _Create_ to finish creating the storage account.
+ 
+- Hit _Review_ and after that _Create_ to finish creating the storage account.
- Once the storage account is created there should be a button _Go to resource_. Click on it.
- Now you should see your storage account. Select _Containers_ on the left hand side.
- Click the _New Container_ button and create a container named `images`. Leave everything in the preconfigured settings as is.
@@ -179,8 +182,7 @@ Our [Azure Web App](https://learn.microsoft.com/en-us/azure/static-web-apps/) is
- Create a new App Service Plan and ``.
-- Click on _Change size_ and then click the _Dev/Test_ tab and select the **F1** which is free, otherwise you might be charged when creating a larger plan.
- 
+- In the pricing plan dropdown menu, select **Free F1** which is free, otherwise you might be charged when creating a larger plan.
- Click _Review + Create_ at the bottom of the screen.
- Review the displayed information and click _Create_ on the next screen to spin up the backend application.
@@ -192,13 +194,13 @@ Our [Azure Web App](https://learn.microsoft.com/en-us/azure/static-web-apps/) is
Now let's connect our application with our storage so that you can take pictures on your phone and store them. We need to tell the Web application where it can find our storage service. The application can take external configurations to configure the connection to the storage account.
-- For this reason navigate to your _storage account_ again. You should be able to find it via the search bar in the top either by searching its unique name or just storage account.
-- Under _Access keys_ you can find the _Connection string_ from our storage account. Hit the 👀*Show keys* button so are able to copy it's value to e.g. a notepad.
- 
+- For this reason navigate to your _Storage account_ again. You should be able to find it via the search bar in the top either by searching its unique name or just storage account.
+- Under _Access keys_ you can find the _Connection string_ from our storage account. Hit the _👀 Show keys_ button so are able to copy it's value to e.g. a notepad.
+ 
- Navigate back to the web app and open the _Configuration_ tab, click _New connection string_ and create a new connection string with the following settings:
- - Name: `STORAGE`
- - Value: ``
- - Type: `Custom`
+ | Connection string | Type | Value |
+ |-|-|-|
+ | `STORAGE` | Custom | `` |
- Hit `ok` and `Save`.
- Navigate and scroll down to the _CORS_ tab on the left hand side of your app service and enter `https://.github.io` under _Allowed Origins_.
- Hit `Save` again.
@@ -230,13 +232,13 @@ Once you have hit `Save` the service automatically creates a workflow file in yo
Let's pause a second. To make sure that you are on track, test if our app's frontend gets a response from our backend service. Before we bring everything together, we want to make sure the backend service is working as expected.
- Navigate to the _Overview_ tab on the left hand side of the Web App Service.
- 
-- Hit the _URL_ and test the website using the docs to figure out if the features of our Milligram will work.
+ 
+- Hit on Default Domain, add `/docs` to the end, then test the website using the interactive documentation to figure out if the features of our Milligram will work.
- In your browser you will have the following view:
- 
+ 
:::tip
- 📝 If you want to learn more about Swagger have a look at [Wikipedia]().
+ 📝 If you want to learn more about OpenAPI have a look at [Wikipedia]().
:::
- Select the _GET/images_ endpoint, hit `Try it Out` and then hit `Execute`. Once you get the 200 Response code, you have a successful running service. Congratulations!
@@ -245,16 +247,20 @@ Let's pause a second. To make sure that you are on track, test if our app's fron
📝 Look at the HTTP Response Codes at [Wikipedia](https://en.wikipedia.org/wiki/List_of_HTTP_status_codes). 2xx Codes generally mean success, where as 4xx and 5xx Codes show different kinds of errors. You probably know 404 - Not Found.
:::
+### Clarifications, What have we done so far?
+
+Congratulations, you have just deployed the backend to your web application! Let us summarize what we have done so far.\
+First, we have deployed the frontend (user interface) of our web app using github pages. This is what you see when you go to your github pages link. The frontend needed a server to serve images and run some logic. This is where the azure part came in. First, we created a storage resource, this is responsible for storing our images. Second, we created a web app resource, here we will run our server logic. The server logic is written in Python using a framework called FastAPI. The server logic code is hosted in the everyonecancode github repository. We connected our web app to the github repository and we instructed the server to run a specific command upon starting the web app. This command will start running our server logic, this is why you can see the docs in your browser under `/docs`. Next up, we will try to connect the Frontend to the Backend.
+
### Integrate Azure Web App URL in GitHub Secrets
Now that we are sure that our backend service works as expected, we can bring everything together.
To do this, we will use a GitHub feature called _Secrets_, where you can store your backend URL to make your frontend talk to the backend service.
-- On your Repository page in GitHub select _Settings_ and navigate to _Secrets_ > _Actions_.
+- On your Repository page in GitHub select _Settings_ and navigate to _Secrets and Variables_ > _Actions_.
- Add a _New repository secret_ named `VITE_IMAGE_API_URL` and as value set ``.
- > ⚠️⚠️ Your URL should end on a **/**. It should look like this: `https://xxxx.azurewebsites.net/`
-
+ > ⚠️⚠️ Your URL should end on a **/**. It should look like this: `https://xxxx.azurewebsites.net/` > 
### Run frontend Pipeline again
@@ -276,7 +282,7 @@ Our frontend application should now have a new button with a camera symbol that
So go ahead and take at least 5 pictures and make sure they appear in your app. Make sure to share them with at least 1-2 friends so they can also upload their photos to your News Feed.
-That's a wrap for today. Congrats!
+That's a wrap for today. Congrats! 🎉
Tomorrow, we will make our app smart by adding artificial intelligence to it for detecting objects within your images as well as talking to our app.
diff --git a/instructions/day1/ApplicationPart2/images/FrontendPagesUpdated.png b/instructions/day1/ApplicationPart2/images/FrontendPagesUpdated.png
new file mode 100644
index 000000000..32bdee04c
Binary files /dev/null and b/instructions/day1/ApplicationPart2/images/FrontendPagesUpdated.png differ
diff --git a/instructions/day1/ApplicationPart2/images/light/BackendStorage1.png b/instructions/day1/ApplicationPart2/images/light/BackendStorage1.png
new file mode 100644
index 000000000..128c6566d
Binary files /dev/null and b/instructions/day1/ApplicationPart2/images/light/BackendStorage1.png differ
diff --git a/instructions/day1/GitHub/README.md b/instructions/day1/GitHub/README.md
index b078c3540..907477356 100644
--- a/instructions/day1/GitHub/README.md
+++ b/instructions/day1/GitHub/README.md
@@ -66,7 +66,7 @@ Now, let's go ahead and fork this repository!
## Create your codespace
-GitHub Codespaces is a cloud-based development environment that lets you code directly from your browser. It can also be connected to your local Visual Studio Code.
+GitHub Codespaces is a cloud-based development environment that lets you code directly from your browser. It can also be connected to your local Visual Studio Code.
In your forked repository, click on the green button that says **<> Code**, go to the **Codespaces** tab an click on **Create codespace on main**. Let's do it!
@@ -80,7 +80,7 @@ Another tab in our codespace opens and it installs the extensions for Azure Func
-Now that you have successfully created and customised your GitHub account, and created our codespace we will move onto the next challenge for today.
+Now that you have successfully created and customised your GitHub account, and created our codespace we will move onto the next challenge for today.
You will make your first code changes and merge your first pull request here.
@@ -88,15 +88,13 @@ You will make your first code changes and merge your first pull request here.
Octocat is the official mascot of GitHub and the cutest, friendliest, and most tentacular cat you'll ever meet! With its unique octopus-like shape, Octocat has become a beloved symbol of the GitHub community, popping up in merchandise, events, and social media.
-As an extra challenge for those who finish early, we dare you to unleash your creativity and design your own Octocat using the Octocat builder at https://myoctocat.com/. This tool allows you to customize the color, shape, and accessories of your Octocat, and share it with others.
+As an extra challenge for those who finish early, we dare you to unleash your creativity and design your own Octocat using the Octocat builder at [https://myoctocat.com](https://myoctocat.com/). This tool allows you to customize the color, shape, and accessories of your Octocat, and share it with others.
-Think of your Octocat as your personal avatar, your spirit animal, or your alter ego. Give it a funky hairstyle, a cool outfit, or a quirky accessory. Make it reflect your personality, your interests, or your sense of humor.
-Who knows, your Octocat might become the next internet sensation, the star of a blockbuster movie, or the mascot of a future GitHub feature. Or it might just make you smile :)
+Think of your Octocat as your personal avatar, your spirit animal, or your alter ego. Give it a funky hairstyle, a cool outfit, or a quirky accessory. Make it reflect your personality, your interests, or your sense of humor.
+
+Who knows, your Octocat might become the next internet sensation, the star of a blockbuster movie, or the mascot of a future GitHub feature. Or it might just make you smile :)
So go ahead, have fun, and show us what you've got!
[🔼 Home](../../../README.md) | [Next challenge ▶](../ApplicationPart1/README.md)
-
-
-
diff --git a/instructions/day2/Speech/README.md b/instructions/day2/Speech/README.md
index 7b47e1f87..b1b34a7c3 100644
--- a/instructions/day2/Speech/README.md
+++ b/instructions/day2/Speech/README.md
@@ -13,7 +13,7 @@ In this challenge you will learn how to:
## Table of contents
-### Further informative resources:
+### Further informative resources
- [What is a Resource / Resource Group / Subscription?](https://docs.microsoft.com/azure/cloud-adoption-framework/govern/resource-consistency/resource-access-management)
- [Speech API](https://azure.microsoft.com/services/cognitive-services/speech-services/#overview)
@@ -40,9 +40,8 @@ Now we will make our app understand when we talk to our Milligram social media a
## Run Frontend Pipeline again
- Navigate to **Actions** > **Pages** and **Run workflow**
- 
-
- 
+ 
+ 
Click on the frontend link displayed under the deploy step under your pipeline `https://.github.io/...` or open the app on your phone.
@@ -50,7 +49,7 @@ Our frontend application should now have a new button with a microphone symbol t
Neither what you say nor what is transcribed will be saved and will **not** appear on the timeline or news feed.
-## Talk to me! What do you have to say? Play around!
+## Talk to me! What do you have to say? Play around
So go ahead and say at least 5 sentences and tell us how great your application understands you.
@@ -75,11 +74,11 @@ Look at the prepared application with our pictures for you to play around [Milli
Start your own coding journey now or try out an Azure certification as we did using Udacity, Udemy, Pluralsight, Edx etc., make sure to check out the links posted below:
-_Tipps 📝_
-
-> - [Programming course on Udacity](https://www.udacity.com/course/intro-to-programming-nanodegree--nd000)
-> - [Microsoft Azure AI Fundamentals learning path (with optional certification)](https://learn.microsoft.com/en-us/training/paths/get-started-with-artificial-intelligence-on-azure/)
-> - [Microsoft Azure Fundamentals learning path (with optional certification)](https://learn.microsoft.com/en-gb/certifications/exams/az-900)
+ :::tip
+ - [Programming course on Udacity](https://www.udacity.com/course/intro-to-programming-nanodegree--nd000)
+ - [Microsoft Azure AI Fundamentals learning path (with optional certification)](https://learn.microsoft.com/en-us/training/paths/get-started-with-artificial-intelligence-on-azure/)
+ - [Microsoft Azure Fundamentals learning path (with optional certification)](https://learn.microsoft.com/en-gb/certifications/exams/az-900)
+ :::
Be sure to check out our Microsoft Programs:
@@ -87,4 +86,4 @@ Be sure to check out our Microsoft Programs:
- Internships at MS
- [Professional Careers at Microsoft](https://careers.microsoft.com/)
-[◀ Previous challenge](../Vision/README.md) | [🔼 Home](../../../README.md)
\ No newline at end of file
+[◀ Previous challenge](../Vision/README.md) | [🔼 Home](../../../README.md)
diff --git a/instructions/day2/Vision/README.md b/instructions/day2/Vision/README.md
index 3e6a0e0fb..086565001 100644
--- a/instructions/day2/Vision/README.md
+++ b/instructions/day2/Vision/README.md
@@ -13,7 +13,7 @@ In this challenge you will learn how to:
## Table of contents
-### Further informative resources:
+### Further informative resources
- [What is a Resource / Resource Group / Subscription?](https://docs.microsoft.com/azure/cloud-adoption-framework/govern/resource-consistency/resource-access-management)
- [Vision API](https://azure.microsoft.com/en-us/products/cognitive-services/vision-services/)
@@ -23,9 +23,9 @@ In this challenge you will learn how to:
## Getting started
- Navigate to your **Resource Group** we created on Day 1 during the previous challenges.
-- Create a new **Resource** and search for **Cognitive Services**.
+- Create a new **Resource** and search for **Azure AI services**.
- 
+ 
## Create Computer Vision Cognitive Service
@@ -60,7 +60,7 @@ You need to share the information of this resource with the web app, so that it
## Run Frontend Pipeline again
- Navigate to **Actions** > **Pages** and **Run workflow**
- 
+ 
Click on the frontend link displayed under the deploy step under your pipeline `https://.github.io/...` or open the app on your phone.
@@ -68,7 +68,7 @@ Our frontend application should now have a new button with an image symbol that
Neither what picture you take nor what is detected will be saved and will **not** appear on the timeline or news feed.
-## Look around! What can your app detect? Play around!
+## Look around! What can your app detect? Play around
So go ahead and detect at least 5 objects and tell us how great your application detects objects on images.
@@ -82,4 +82,4 @@ Ask your coach if you did not succeed. We have you covered with a back up. ⚠
### Use prepared Milligram Backend Service
-Look at the prepared application with our pictures for you to play around [Milligram](https://microsoft.github.io/anyonecancode/).
\ No newline at end of file
+Look at the prepared application with our pictures for you to play around [Milligram](https://microsoft.github.io/everyonecancode/).
diff --git a/instructions/day2/Vision/images/createresource1.png b/instructions/day2/Vision/images/createresource1.png
new file mode 100644
index 000000000..7b9f4a633
Binary files /dev/null and b/instructions/day2/Vision/images/createresource1.png differ