DEV Community

Microsoft Azure profile image Brandon Minnick
Brandon Minnick for Microsoft Azure

Posted on

#25DaysOfServerless Day 18 Solution: Wrapping the Perfect Gift

#serverless #azure

Hello Friends!

The challenge on Day 18 of #25DaysOfServerless is to ensure that each gift is perfectly wrapped according to the following rules

  1. Placed in a box
  2. Box is wrapped
  3. A bow / ribbon placed on top

Let's accomplish this using Azure Blob Storage, Azure Computer Vision API, and Azure Functions.

Example

Using this example of a perfectly wrapped gift, the Computer Vision API confirms the following Tags:

  • Box
  • Gift Wrapping
  • Ribbon
  • Present

Computer Vision Results Example

Creating the Solution

Step 0: Install Tools

In this step, we will install the necessary commandline tools in order to complete the solution.

1 - Install .NET Core v3.1

2 - Install the Azure CLI

brew update && brew install azure-cli
Enter fullscreen mode Exit fullscreen mode

3 - Install Azure Functions Core Tools v3.x

  • (Windows) In the terminal, enter the following command: 
npm install -g azure-functions-core-tools@3
Enter fullscreen mode Exit fullscreen mode
  • (macOS) In the terminal, enter the following command: 
brew tap azure/functions
brew install azure-functions-core-tools@3
# if upgrading on a machine that has 2.x installed
brew link --overwrite azure-functions-core-tools@3
Enter fullscreen mode Exit fullscreen mode

4 - Install Git Command Line Tools

  • In a browser, navigate to the Git Downloads Page
  • On the Git Downloads Page, install git for your specific operating system

Step 1: Downloading the Solution Repo

In this step, we will fork and clone the solution repo to our local machine.

0 - Star the Solution Repo

Note Starring the repo will help it become more discoverable, helping more devs find the solution

  • In a browser, navigate to the Perfect-Gift repo
  • In the browser, tt the top of the page, click Star GitHub Star

1 - Fork the Solution Repo

  • In a browser, navigate to the Perfect-Gift repo
  • In the browser, tt the top of the page, click Star GitHub Fork

2 - Clone the newly Forked Repo

  • In the terminal, enter the following command: 
git clone https://github.com/[your github user name]/Perfect-Gift
Enter fullscreen mode Exit fullscreen mode

Note Replace [your github user name] with your GitHub User name

Step 2: Log into Azure CLI

1 - In the terminal, enter the following command to login into Azure CLI:

az login
Enter fullscreen mode Exit fullscreen mode

Note: Stand by until the Azure CLI opens your browser to the Azure Login page

Step 3: Create Azure Resources

In this step, we'll generate the following Azure Resources:

  • Azure Resource Group
    • This is a folder in azure that will hold our resources
  • Azure Blob Storage
    • This is where we'll upload and store the images of our gifts
  • Computer Vision API Key
    • This API will use machine learning to confirm that our gift has been perfectly wrapped
  • Azure Functions
    • This server less function will run each time a new photo is uploaded to Azure Blob Storage to confirm that the image contains a perfectly wrapped gift

1 - In the terminal, enter the following command to create an Azure Resource Group

az group create --name PerfectGift --location EastUS
Enter fullscreen mode Exit fullscreen mode

2 - In the terminal, enter the following command to create a free Computer Vision resource

az cognitiveservices account create --resource-group PerfectGift --name PerfectGiftComputerVision --sku F0 --kind ComputerVision --location EastUS
Enter fullscreen mode Exit fullscreen mode

3 - In the terminal, in the JSON response, note the value of endpoint

Note: For the EastUS, the endpoint should be https://eastus.api.cognitive.microsoft.com. We will use this value later in our serverless function.

4 - In the terminal, enter the following command to retrieve the newly generated Computer Vision API Key

az cognitiveservices account keys list --resource-group PerfectGift --name PerfectGiftComputerVision
Enter fullscreen mode Exit fullscreen mode

5 - In the terminal, in the JSON response, note the value of key1

Note: The JSON response will provide two keys. Both keys are valid, and we'll be using key1 for our serverless function.

{
  "key1": "[YOUR API KEY]",
  "key2": "[YOUR API KEY]"
}

6 - In the terminal, enter the following command to create an Azure Storage account:

az storage account create --name giftstorage[YOUR NAME] --location EastUS --resource-group PerfectGift --sku Standard_LRS
Enter fullscreen mode Exit fullscreen mode

Note: Replace [Your Name] with your name to ensure the storage account name is unique, e.g. giftstoragebrandon

7 - In the terminal, enter the following command retrive the Azure Storage Connection String

az storage account show-connection-string --name giftstorage[YOUR NAME]
Enter fullscreen mode Exit fullscreen mode

Note: Replace [Your Name] with your name

8 - In the terminal, in the JSON response, copy the value of connectionString

Note: We will use connectionString in the next step to create a new storage container

9 - In the terminal, enter the following command to create container called gifts in our Azure Storage account:

az storage container create --name gifts --connection-string "[YOUR CONNECTION STRING]"
Enter fullscreen mode Exit fullscreen mode

Note: Replace [YOUR CONNECTION STRING] with the vaulue of connectionString retreived in the previous step, e.g. az storage container create --name gifts --connection-string "abc123def456ghi789=="

10 - In the terminal, enter the following command to create an Azure Function App:

az functionapp create --resource-group PerfectGift --consumption-plan-location EastUS --name PerfectGift-[Your Name] --storage-account  giftstorage[YOUR NAME] --runtime dotnet
Enter fullscreen mode Exit fullscreen mode

Note: Replace [Your Name] with your name to ensure the function app name is unique, e.g. PerfectGift-Brandon

11 - In the terminal, enter the following to set the Azure Functions Runtime to v3:

az functionapp config appsettings set --resource-group PerfectGift --name PerfectGift-Brandon --settings "FUNCTIONS_EXTENSION_VERSION=~3"
Enter fullscreen mode Exit fullscreen mode

12 - In the terminal, enter the following to add the Computer Vision API key and endpoint to the newly created Azure Function App:

az functionapp config appsettings set --resource-group PerfectGift --name PerfectGift-[YOUR NAME] --settings "VisionApiKey=[YOUR API KEY]" "VisionApiBaseUrl=[YOUR COMPUTER VISION ENDPOINT]"
Enter fullscreen mode Exit fullscreen mode

Note: Replace [YOUR NAME] with your name, replace [YOUR API KEY] with the value of key1 and replace [YOUR COMPUTER VISION ENDPOINT] with the value of endpoint
e.g. az functionapp config appsettings set --resource-group PerfectGift --name PerfectGift-Brandon --settings "VisionApiKey=abc123" "VisionApiBaseUrl=https://eastus.api.cognitive.microsoft.com"

Step 4: Publish Azure Function

In this step, we will publish the solution found in PerfectGift.csproj to Azure.

1 - In the terminal, enter the following command to navigate to the folder containing PerfectGift.csproj in the cloned solution repo

  • (Windows) 
cd [Path to cloned solution repo]\Perfect-Gift\PerfectGift\
Enter fullscreen mode Exit fullscreen mode
  • (macOS) 
cd [Path to cloned solution repo]/Perfect-Gift/PerfectGift
Enter fullscreen mode Exit fullscreen mode

2 - In the terminal, enter the following command to publish PerfectGift.csproj to our Azure Function App:

func azure functionapp publish PerfectGift-[YOUR NAME]
Enter fullscreen mode Exit fullscreen mode

Note: Replace [YOUR NAME] with your name

Step 5: Upload Perfectly Wrapped Gift Images

Our serverless functon is now ready to verify our gift images!

In this step, we will upload images to Azure Blob Storage and confirm that our serverless function automatically verifies the image is a perfectly wrapped gift. If the image is not of a perfectly wrapped gift, it will automatically be removed from Azure Blob Storage.

1 - Download this sample image of a perfectly wrapped gift

2 - Move & rename the downloaded image of a perfectly wrapped gift:

  • (Windows) Save the file as C:\Downloads\gift.jpg
  • (macOS) Save the file as ~/Download/gift.jpg

3 - In the terminal, enter the following command to upload our image of a perfectly wrapped gift

az storage blob upload --container-name gifts --connection-string "[YOUR CONNECTION STRING]" --file [FILE PATH TO GIFT IMAGE] --name Gift1
Enter fullscreen mode Exit fullscreen mode

Note: Replace [YOUR CONNECTION STRING] with the value of connectionString and replace [FILE PATH TO GIFT IMAGE] with the file path to your wrapped gift image
e.g. az storage blob upload --container-name gifts --connection-string "abc123def456ghi789==" --file cd:\Downloads\gift.jpg --name Gift1

4 - In the terminal, enter the following command to confirm the image has been not been deleted from storage:

az storage blob list --container-name gifts --connection-string "[YOUR CONNECTION STRING]"
Enter fullscreen mode Exit fullscreen mode

Note: Replace [YOUR CONNECTION STRING] with the value of connectionString and replace [FILE PATH TO GIFT IMAGE] with the file path to your wrapped gift image
e.g. az storage blob list --container-name gifts --connection-string "abc123def456ghi789=="

5 - In the JSON response, confirm "name": "Gift1"

6 - Download this sample image of a wrapped gift missing a bow

7 - Move & rename the downloaded image of a wrapped gift missing a bow:

  • (Windows) Save the file as C:\Downloads\nobow.jpg
  • (macOS) Save the file as ~/Download/nobow.jpg
  1. In the terminal, enter the following command to upload our image of a perfectly wrapped gift 
az storage blob list --container-name gifts --connection-string "[YOUR CONNECTION STRING]" --file [FILE PATH TO NO BOW GIFT IMAGE] --name Gift2
Enter fullscreen mode Exit fullscreen mode

Note: Replace [YOUR CONNECTION STRING] with the value of connectionString and replace [FILE PATH TO GIFT IMAGE] with the file path to your wrapped gift image

e.g. az storage blob upload --container-name gifts --connection-string "abc123def456ghi789==" --file cd:\Downloads\nobow.jpg --name Gift2

9 - In the terminal, enter the following command to confirm the image has been not been deleted from storage:

az storage blob list --container-name gifts --connection-string "[YOUR CONNECTION STRING]"
Enter fullscreen mode Exit fullscreen mode

Note: Replace [YOUR CONNECTION STRING] with the value of connectionString and replace [FILE PATH TO GIFT IMAGE] with the file path to your wrapped gift image

e.g. az storage blob list --container-name gifts --connection-string "abc123def456ghi789=="

10 - In the JSON response, confirm that "name": "Gift2" does not exist

Note: It may take a minute for the Blob Trigger Function to analyze the uploaded image.

If "name": "Gift2" does still exist, run az storage blob list --container-name gifts --connection-string "[YOUR CONNECTION STRING]" again in a few minutes

Step 6: Celebrate 🎉

We now have a working Blob Trigger that automatically verifies our gifts have been perfectly wrapped!

We have successfully completed the Day 18 Challenge of #25DaysOfServerless!

Top comments (0)

Read next

maxx_don profile image

GitHub Actions Azure Vnet Integration

Massimiliano Donini -

codestreet profile image

How to Create Custom Middleware in Azure Functions: A Step-by-Step Guide with .NET 8

CodeStreet -

hkhelil profile image

How to Manage Kubernetes App Storage Like a Pro 📁

Hamdi KHELIL -

imsushant12 profile image

Serverless vs. Monolithic: Which is Right for You?

Sushant Gaurav -