Merge pull request #2 from microsoft/vscode-http-client

feat: Use a VS Code extension to test the uploader function

Author: ikhemissi

.devcontainer/devcontainer.json

@@ -41,7 +41,9 @@
         "ms-azuretools.azure-dev",
         "ms-azuretools.vscode-azurefunctions",
         // Bicep
-        "ms-azuretools.vscode-bicep"
+        "ms-azuretools.vscode-bicep",
+        // HTTP client
+        "humao.rest-client"
       ]
     }
   }

.gitignore

@@ -317,3 +317,6 @@ paket-files/
 __pycache__/
 *.pyc
 .azure
+
+# Environment variables
+.env

audioupload.http

@@ -0,0 +1,9 @@
+POST https://{{$dotenv AZURE_UPLOADER_FUNCTION_APP_NAME}}.azurewebsites.net/api/AudioUpload HTTP/1.1
+Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW
+
+------WebKitFormBoundary7MA4YWxkTrZu0gW
+Content-Disposition: form-data; name="audio"; filename="MicrosoftAI.wav"
+Content-Type: audio/wav
+
+< ./docs/assets/audios/MicrosoftAI.wav
+------WebKitFormBoundary7MA4YWxkTrZu0gW--

docs/assets/vscode-upload-audio-file.png

@@ -202,15 +202,15 @@ To test the environment setup, we will upload an audio file using the uploader f
 
 </details>
 
-Inside VS Code, use the following command to upload an audio file to the audio's storage account with the uploader function:
+Inside VS Code, open the `audioupload.http` file located on the root directory, then click on the `Send Request` button.
+This will send a request to the uploader function to upload an audio file to the audio's storage account:
 
-```sh
-curl -v -F audio=@\./docs/assets/audios/MicrosoftAI.wav https://${AZURE_UPLOADER_FUNCTION_APP_NAME}.azurewebsites.net/api/AudioUpload
-```
+![Uploading a file from VS Code](assets/vscode-upload-audio-file.png)
 
+A loader will appear on the Status Bar (at the bottom) to indicate that the upload is in progress.
 Wait for the request to finish then make sure the audio file was uploaded to the `audios` container which you have checked at the beginning.
 
-The following sample audio files are provided in the workshop, so feel free to retry testing the uploader function with another file:
+The following sample audio files are provided in the workshop, so feel free to retry testing the uploader function with another file by updating the `audioupload.http` file:
 
 - [Azure Functions](assets/audios/AzureFunctions.wav)
 - [Microsoft AI](assets/audios/MicrosoftAI.wav)

docs/workshop.md

@@ -19,3 +19,6 @@ $filter="/blobServices/default/containers/" + ${env:AUDIOS_STORAGE_ACCOUNT_CONTA
 az eventgrid system-topic event-subscription create -n audio-files-topic-subscription -g ${env:RESOURCE_GROUP} --system-topic-name ${env:AUDIOS_EVENTGRID_SYSTEM_TOPIC_NAME} --endpoint-type webhook --endpoint $endpointUrl --included-event-types Microsoft.Storage.BlobCreated --subject-begins-with $filter
 
 Write-Output "Created blob event grid subscription successfully."
+
+# Load azd environment variables to .env file for testing deployed functions
+azd env get-values > .env

scripts/post-up.ps1

@@ -21,3 +21,6 @@ filter="/blobServices/default/containers/${AUDIOS_STORAGE_ACCOUNT_CONTAINER_NAME
 az eventgrid system-topic event-subscription create -n "audio-files-topic-subscription" -g "${RESOURCE_GROUP}" --system-topic-name "${AUDIOS_EVENTGRID_SYSTEM_TOPIC_NAME}" --endpoint-type "webhook" --endpoint "$endpointUrl" --included-event-types "Microsoft.Storage.BlobCreated" --subject-begins-with "$filter" 
 
 echo "Created blob event grid subscription successfully."
+
+# Load azd environment variables to .env file for testing deployed functions
+azd env get-values > .env