DEV Community: Shivappa

(EDA Part-1) EDA (Exploratory Data Analysis) Explained With Real Life — Why Looking at Your Data Is the Most Important Step in Machine Learning

Shivappa — Thu, 16 Apr 2026 06:27:32 +0000

Part 1 of 5 — Beginner friendly

Let me tell you a story about a Detective.

Sherlock Holmes never walks into a crime scene and starts guessing. He doesn't say "it was probably the butler" and call it done. He looks. He observes. He notices the mud on the shoes, the cigarette stub, the clock stopped at 11:47. Only after he's observed everything does he form a theory.

EDA is what Sherlock does before naming a suspect. Your dataset is the crime scene. Your ML model is the theory. You don't build the theory until you've studied the scene thoroughly.

Most beginners skip this step. They load data, run a model, get 90% accuracy, feel great, and ship it. Three weeks later the model breaks in production and nobody knows why.

That failure almost always traces back to one thing: they never looked at their data properly.

What is EDA?

EDA stands for Exploratory Data Analysis. It's the process of examining, understanding, and summarising a dataset before you train any model. Think of it as your first conversation with the data — you're not asking it to predict anything yet. You're just getting to know it.

The real-world example:

Imagine a doctor who skips the examination and jumps straight to prescribing medicine. They don't check your blood pressure, don't run tests, don't ask about symptoms. Dangerous, right? EDA is the medical examination. Your model is the prescription. Don't prescribe before you examine.

The term was coined by statistician John Tukey in 1977. His insight was simple but radical: stop assuming things about data. Let the data tell you its own story first.

The flow looks like this:

The EDA mindset

Before writing a single line of code, ask these 4 questions about any new dataset:

What is this Data ? What does each column mean in real life ? Don't assume - read the data dictionary.
What is the quality ? Are there missing values? Duplicates? Wrong data types? Values that look like errors?
What are the distributions What does each feature look like? Skewed? Balanced? Are there obvious outliers?
What are the relationships Which features are correlated with each other? Which features predict the target?

Three pillars of EDA

Summary Statistics: Getting the vitals (Mean, Median, Mode, Standard Deviation). If the terms are new for you don't worry, you will learn more on this in next parts of this series.
Data Visualization: Turning rows of numbers into charts (Histograms, Scatter plots, Box plots) to see what the human eye misses in a spreadsheet.
Data Cleaning: Identifying missing values, duplicate entries, or garbage data that could skew your results.

Why is EDA Crucial for Machine Learning?

You’ve probably heard the phrase Garbage In, Garbage Out. This is the primary reason we do EDA. Even the most sophisticated algorithm will fail if the data it learns from is flawed.

A. Ensuring Data Quality
EDA helps you find the weirdness. Is there a person in your dataset who is 250 years old? Is there a house with 0 bedrooms? EDA catches these anomalies before they confuse your model.

B. Feature Selection & Engineering
By looking at correlations, you can see which variables actually matter. If you’re predicting house prices and find that the color of the front door has zero correlation with the price, you can drop that noise and make your model leaner and faster.

C. Testing Assumptions
Many ML models (like Linear Regression) rely on specific assumptions—for example, that your data follows a Normal Distribution. EDA allows you to check these assumptions. If your data is heavily skewed, you’ll know you need to transform it first.

D. Building Intuition
As a data scientist, you need to be the bridge between the raw data and the business stakeholders. EDA gives you the story behind the numbers, allowing you to explain why a model might be making certain predictions.

The `Cost` of Skipping EDA

Skipping this step is a recipe for disaster. Without EDA:

1. Biased Models: You might train a model on data that isn't representative of the real world.

2. Overfitting: You might "learn" from outliers that are actually just data entry errors.

3. Wasted Time: You’ll spend weeks tuning a model only to realize the data was missing the most important variable all along.

Pro Tip: EDA isn’t a one-time chore; it’s an iterative process. You’ll find yourself coming back to it even after you’ve started building your models.

The dataset we'll use throughout this series

We'll use the Titanic dataset from Kaggle — one of the most famous datasets in data science. It's real historical data about passengers and crew who were aboard the RMS Titanic, which sank on April 15, 1912 resulting in the death of 1502 out of 2,224 passengers and crew — a widely used sample provided by Kaggle for the competition.

Here's what makes it perfect for EDA: it has missing values, mixed data types, categorical and numeric features, and a clear survival target to predict.

What's next?

In Part 2, we download the Titanic dataset from Kaggle and run our first 5-line EDA check. No complicated setup — you can run it directly in a free Kaggle notebook or google collab.

See you in Part 2! 👋

Access Key Vault secret from Web Application

Shivappa — Sun, 09 May 2021 08:58:02 +0000

In the previous parts we have learnt how to create Azure Key Vault and how to add the principal in Azure Key Vault by whom it must be accessed.
In this part, we will learn how we can use secrets stored in Azure Key Vault in our Web Application.

Let's write a simple flask app to fetch the secrets from Key Vault.
Create a folder called KeyVaultDemo on your computer and open it in VS Code.
Create a new file requirements.txt which contains the packages required.
Add below contents to it.

flask
azure-keyvault-secrets
azure-identity

azure-keyvault-secrets: It is a client library in python to access the secrets stored in Azure Key Vault. More information on this package can be found here.
azure-identity: It is an authentication library that provides different credential classes with which one can authenticate with the Active Directory.
To learn more on this package please check here.

We have added the packages required for our purpose.
Let's write actual code in which we can access the Key Vault secrets.
Create app.py file and dump the below contents to it.

import os

from flask import Flask

from azure.identity import DefaultAzureCredential
from azure.keyvault.secrets import SecretClient

app = Flask(__name__)

# Save KEY VAULT URL in the web app application settings
AZUE_KEY_VAULT_URL = os.environ.get('AZUE_KEY_VAULT_URL', '')
# AZUE_KEY_VAULT_URL = "https://keyvaultdemoapp.vault.azure.net/"

@app.route('/secret')
def index():
    """Fetch secret from Azure Key Vault

    Returns:
        str: Response message to be displayed.
    """
    # Use Default credential. This has fallback authentication mechanism
    credential = DefaultAzureCredential()
    # Authenticate to Azure Key Vault.
    secret_client = SecretClient(vault_url=AZUE_KEY_VAULT_URL, credential=credential)
    # Fetch secrets created in Azure Key Vault
    secrets = secret_client.get_secret('firstsecret')
    name = secrets.name
    value = secrets.value
    # Show secret name and it's value in the response
    response = f'secret {name} value is {value}'
    return response

Let's understand few lines from the above code snippet.

from azure.identity import DefaultAzureCredential

Azure identity helps to authenticate from the credentials we choose. Here we selected credential type as DefaultAzureCredential.
This is the most used credential type in most cloud applications because of the fallback mechanism supported.
First, it will try to check for Environment variables saved for the web application. If not then it will try to check in this order of authentication --> Managed Identity --> Visual Studio Code --> Azure Cli --> Interactive
Below Environment variables are required for Identity and must be added in Application settings in the web app deployed.

AZURE_CLIENT_ID --> This is the ID of an Azure Active Directory application
AZURE_CLIENT_SECRET --> This is the ID of application secrets created in Azure Active Directory.
AZURE_TENANT_ID --> This is the ID of the Active Directory Tenant.

To learn more on each method please look at the client library here.

Our code is ready and we will deploy it to Azure and access the application.
Right click on Explorer area in VS Code and click on Deploy to Web App...

Select your subscription.
Select Create new Web App..
Give a name to the web app. It should be Globally Unique name.
Select Runtime stack as Python 3.8
Select pricing tier as Free

It takes some time to deploy and you will see a successfully deployed message on the right bottom corner of VS Code.
Go to the Azure portal and go to the app created now and click on browse from the overview page.
It shows an error because we have not added the app environment in the app settings that we are accessing and using inside our flask app.

Let's add them to the Azure web app.
Go to Web App you just created.
Click on Configuration section under Settings.
Click on New application setting.
Add below Key value pair when prompted for entries.

Key : AZURE_CLIENT_ID
Value: Value which you copied when we created the authentication settings in the previous part

Repeat the above operation for the below Key addition.

AZURE_CLIENT_SECRET : corresponding value
AZURE_TENANT_ID : corresponding value
AZURE_KEY_VAULT_URL : This is the URL of the key vault created in this part. Go to Overview and on the right side you will see the keyvault URL.

Once you add all the entries, Save the settings.
The final application settings look like this web app configuration.

Now browse your application and see the secret name and secret value stored in Key Vault are displayed.

We have learned how to use Azure Key Vault in your web application for storing the secrets securely.

To learn more on Azure Key Vault please refer to Microsoft documentation here.

That's all!
Thank you for reading my blog.
Stay tuned to read more blogs on Azure services.

Azure Key vault authentication

Shivappa — Sun, 09 May 2021 06:39:59 +0000

In the previous part we have learnt how to add Azure Key Vault resource. Now we will learn how to add the authentication to the Key vault to access it.
Let's create a access-policy(principal) to access the store.
To add the access-policy we have to make the Authentication with the Active Directory.
Let's see how we can authenticate.
Go to resources and search for ADB2C.
Read more about ADB2C here.

Register new application in ADB2C to get the CLIENT_ID, CLIENT_SECRET and TENANT_ID.
Go to App registrations and click on "New registration*.

Name this application and select Single tenant option.
Click on Register to register this application.

Go to the new app created and note down the Client ID and Tenant ID which we require in our web application.

In addition, we need to add the secrets and use them.
create new secrets and note that also for later use.

Now we have successfully created the identity which can be used in Azure Key Vault for access.

Go to the created Azure Key Vault resource and click on
Access policies and select Add Access Policy.

Select the template from the drop-down. Key, Secret, and Certificate Management. If you want to select only secret you can do so.
Select Key Permissions which can be allowed for this access if Key Management has opted.
Select Secret Permissions which can be allowed for this access if Key Management has opted.
Select Certificate Permissions which can be allowed for this access if Key Management has opted.
select Select Principal and search for the application which we created in ADB2C in the above steps.

We have authenticated our key vault by whom it can be used.
Let's write a simple flask app to fetch the secrets from the key vault in the next part of this series.

Understand and use Azure Key Vault Easily (Most Secured Secrets Storage)

Shivappa — Sun, 09 May 2021 06:34:11 +0000

Now a days the term security becoming the must follow topic for all the organizations to have a good brand name.
To secure your credentials or secrets in your web application is a big challenge when we deploy our application to the public internet.
And also once your code is deployed and secrets are revealed then one need to redeploy the code with updated secrets to secure the application. As the application grows bigger and bigger this will be cumbersome to manage the application.

To solve this issue we can use Azure Key Vault resource.
Azure Key Vault is a Microsoft cloud service to store and access data and secrets securely. Which controls below tasks,

Securely store the keys, secrets and certificates.
Only authorized user can access the key vault.
Frequently rotate the secrets, keys.
Automatically renew the certificates.
Centralized storage for all keys, secrets and certificates.

Azure Key Vault can be used in many services, here I will be showing how to use it in Azure app service.

Prerequisites:

Active Azure Subscription Account
Visual Studio Code

We can create Azure Key Vault using Azure CLI or Azure Portal.
In this blog we will look at how to do in Azure Portal.

Create Azure Key Vault using Azure Portal

Create an Azure resource

Login to Azure Portal.
Click on create a resource.
Search for Key Vault. Select and create it.
Fill details and create the resource.

Resource Group: Select existing resource group or create a new one

Key vault name: Enter globally Unique name for your key vault. This is access from the application.

Region: Select location the one near to you.

Pricing tier: Select Standard.

Review + create and then create.
Go to Key vault resource created.
Let's create some secrets in the key vault which will be accessed from our application.
Click on Generate/Import to add new secret.

Fill the details and add it.
Name: name of the secret to be created.
value: Value to store in this secret.
We can set when this secret can be activated and deactivated.
As of now we can leave default, meaning immediate activate and never expires.

After the secret is added go the secret which looks like this.

Our secret is successfully created in Azure Key Vault. Now we have to access it from our code.
To access the secrets, valid permissions (like who can access) must be added to the keyvault.
Let's learn how to add the authentication in next part of this series.

Deploy Containerized Web App to Microsoft Azure | Upload/Download files of Azure Storage Account

Shivappa — Fri, 02 Apr 2021 15:25:31 +0000

If you are bored to read my store you can skip quoted text and go to technical content below.

Few months back I got a chance to work in cloud project.
Since this is completely new to me and had lot of responsibility.
Then I started searching over the internet about Microsoft azure and the services it provides. Really there are plenty of services in the Azure which helps to build projects to the great extent.
Then I started googling about the services what they do and how can be used. Every time I google I was going through blogs, some are valid and easy to understand but some are not.
One day I got a nice tutorial in Microsoft website and found it has rich in documentation about the Azure. After I studied that topic, myself started exploring in the Microsoft documentation and found that it has Microsoft Learn page where it supports all the documentation on all the services it supported and it has all the levels of content from beginner to expert level.

You can learn and achieve your expertise in various topics from Microsoft Learn.
Each module provides exercises and knowledge check questions based on the topic you learnt.
And another great thing MSLearn provides for hands on is Azure sandbox subscription(You can activate during each module learning and exercises ).
This is really great for quick hands on the things we learn. This is strictly for the study purpose on the learning modules and will be deleted after the timer(You should not use for other purposes).

Later I found some online events are being conducted by Microsoft professionals and explored them. You can find very helpful and priceless content from these events. Please visit here for full list of Microsoft Virtual events.
As I was reading about Azure certification courses, I have got excited and attended AZ-900 Azure fundamentals(basic level) virtual training and it was really nice. This event sparked me to attend many more events and learn Azure. Later I passed AZ-900 certification with only documents from this MSLearn.

As I was studying for the various services on the Azure in MSLearn, I got to know there is an online event Cloud Community Days in KonfHub is going to happen. Without a bit delay I registered for the 2 Days conference and I attended the same. You can join your nearest Azure Developer community.
It was really thoughtful conference in which many things I have learnt and could clarify many doubts which I had.
The content throughout was good and there were quiz sessions in between. On first day I could not attend in quiz but attended second day's first two quizzes and in the first attempt I ranked 12th and in the next I ranked 3rd. This pushed me more to learn and master the learnings from the Microsoft and attend many more such events.
Later I took "Azure Dev Challenge" and completed effective study and as a next step Azure Developer Stories contest I planned to write a blog of my steps towards Microsoft Azure.

This is my first blog ever. Thank you Microsoft and KonfHub for this motivation.

I think it is enough to stop my story and share some technical details which I built after learning Azure Dev Challenge modules.

Project Statement

Deploy a Containerized Flask Web Application which translates the given text to another language and dump the contents in a file. This file will be uploaded to Azure Storage Account in a secure way. Once it is uploaded we can download the file if we have valid SAS token for the file.

We will divide above project statement into below steps,

Create Azure Container Registry(ACR).
Write Flask Application to
- translate text using Azure Cognitive Services
- upload/download files to/from Azure Storage Account.
Deploy containerized flask application to Azure Container Registry.
Check logs of our container application.

Prerequisites

Visual Studio Code IDE.
Microsoft Azure Subscription. Get a free account if you do not have one.
Latest Python version.

Step 1: Create Azure Container Registry(ACR)

Before creating Azure Container Registry, we will understand some terms.
Container Image: It is a bundled software package, which contains system libraries, tools and other platform settings with which a program can run without any changes to software package at run time.
Container Registry: It is a repository to store container images to run container based applications.

Now let's create Azure Container Registry.

Login to your Azure Portal
Click on add resource to create new Resource Group.

Search for "resource group" in the Azure Marketplace and click on it and create.

Add new resource group with required details.

Subscription: Select your valid Azure subscription where you want to create resource group.
Resource group: Name of the resource group to be created.
Region: The location where you want to create resource group.(select your nearest region)

Once the resource group is created. Go to the Resource Group created in above step.
Now create a container registry resource in this Resource Group.
Click on "Add"

Search for "container registry" in the Azure Marketplace and click on it and create.

Fill all the required details.

Subscription: Select your valid Azure subscription where you want to create container registry.
Resource group: Select the resource group which you created in previous step.
Registry name: Name of your Azure Container registry to be created.
Location: The location where you want to create ACR (Keep same as the resource group Region).
SKU: Select the registry tier Basic. (Available are Basic, Standard, Premium)

Then Review + create and Create.
After the Azure Container Registry is created, open and update admin user setting.

Enable under Admin user, this is required to deploy web application directly from container registry.

Now we successfully created Azure Container Registry.
It is time to write some code.

Step 2: Write Flask Application

We will be using Visual Studio Code code editor for all our coding. A best code editor with vast features.
Now on I will be referring Visual Studio Code as VS Code.

Download and install VS Code based on your OS. (Can be used on Windows, MacOS, Linux).
Install latest python version from python.org

Create a folder Azure-Dev-Stories in your computer and open the folder in VSCode.
Open cmd and run below commands. (I am using windows. If you are using other OS please replace corresponding commands)

md Azure-Dev-Stories cd Azure-Dev-Stories code .

(code . opens VSCode)
Now VSCode is opened and you can see empty folder like this.

Our environment for coding is ready.

To isolate our project we will create virtual environment.
Open VSCode terminal (Ctrl + `) and execute below command.

python -m venv .venv

To make containerized image of our code we need to install below extensions from VSCode marketplace.

Azure App service, Azure Account extension (For Azure services)
Docker extension (For dockerizing the application).

Search for Azure account and docker in marketplace and install them as shown in below screens.

Install Docker extension.

After both the extensions are installed your VS Code looks similar to this.

Go to Azure extension and login to your Microsoft Azure account.

Now create a file app.py and add below contents in it and save the file.

from flask import Flask

app = Flask(__name__)

Now we need to create our first Dockerfile.

Dockerfile: It is a text file which contains all the steps to be performed to create our application as a image.

Go to command palette (Ctrl + Shift + P) in VSCode and type build image, select Azure Container Registry: Build Image in Azure... from the search list.

You will be asked to add a Dockerfile to the workspace on bottom screen, select Yes.

Select Python:Flask (select other relevant application platform if you are building for other frameworks)
Then select app.py as entry point and select port 5000 and select Yes to add the docker compose files.
After the above steps your VSCode folder looks like this.

Newly created Dockerfile looks like this.

# For more information, please refer to https://aka.ms/vscode- docker-python
FROM python:3.8-slim-buster

EXPOSE 5000

# Keeps Python from generating .pyc files in the container
ENV PYTHONDONTWRITEBYTECODE=1

# Turns off buffering for easier container logging
ENV PYTHONUNBUFFERED=1

# Install pip requirements
COPY requirements.txt .
RUN python -m pip install -r requirements.txt

WORKDIR /app
COPY . /app

# Creates a non-root user and adds permission to access the /app 
 folder
# For more info, please refer to https://aka.ms/vscode-docker- python-configure-containers
RUN useradd appuser && chown -R appuser /app
USER appuser

# During debugging, this entry point will be overridden. For more 
information, please refer to https://aka.ms/vscode-docker-python- debug
CMD ["gunicorn", "--bind", "0.0.0.0:5000", "app:app"]`

Now go to requirements.txt file and add below packages.

flask
gunicorn
python-dotenv
python-dateutil
requests
azure-storage-blob

We set what packages are required for our project and we need to install them in our virtual environment.
Go to VS Code terminal and run below command to install the packages.
pip install -r requirements.txt

It takes some time to install all the packages.

Now our bare flask application framework is ready and we need to deploy it to Azure as web application to make sure our application is running.

Step 3: Deploy containerized flask application to Azure Container Registry

Open command palette (Ctrl + Shift + P) and search build image and select Azure Container Registry: Build Image in Azure... from the search list.
Now give a name to image. With this name it will be pushed to Azure Container Registry.

Replace .Run.ID with master to keep our image tag always the master.

azure-dev-stories:master

Select the Azure Container Registry from the list which we have created before.

Choose Linux. (You can choose other OS for which you want to make the image)

After the image is successfully created you will see output like this.

Confirm whether the image is present in Azure Container Registry(ACR).
Go to Docker extension and see the steps in below image.

Our application image is built and is present in ACR. Now we need to deploy as Azure web application.
Right click on master and select Deploy Image to Azure App Service....

Enter Unique global name for your application. If similar name is exists, it shows error and choose different name. This name must be unique across global azure web applications, because our deployed application is accessible over the internet.
Select the Resource group which we already created during ACR creation(it shows the list of resource groups).
Create App Service Plan for the application.
Give a name to Service Plan (the agent on which our application runs).
Select pricing tier F1 Free.
Select the Location for the Service Plan. After above steps you will see deploy message at the bottom screen. Once the web application is deployed you will see a message Successfully create web app ....

Open the site and check our application is up and running.
We see our bare app like this.

Now go to Azure Portal and check image tag is applied properly.
To check it, go to Azure home search bar, search for app services and select the web application deployed.

Go to Deployment Center -> Settings and confirm Registry, Image, Tag(master) are fine.

Now we successfully deployed flask web application as containerized App in Azure. And we need make valuable use from the web application.
So our next step is,

translate text using Azure Cognitive Services

To translate the user input to another language we will use Azure Cognitive Services.
Now go to Azure Portal.
Create a resource -> search for translator service and install it.

Fill required fields.

Subscription: Valid subscription.
Resource group: select resource group created before.
Region: Select nearest region
Name: give a unique name to translator service
Pricing tier: Free F0, (You can choose higher plan also based on your requirements)

Then Review + create and Create.

Go to the translator service created, note down KEY1 or KEY2, Endpoint and Location, we need them to input in our flask application later.

We created Azure translator and we need to use it in our application to get the translated text.
Go to VSCode. Create .env file and add below details.

KEY=0b5c31e83e36459f953b097d01931143
ENDPOINT=https://api.cognitive.microsofttranslator.com/
LOCATION=eastus

KEY : Translator service key1 or key2
ENDPOINT: Translator Endpoint
LOCATION: Translator service Location

Note: When we created Dockerfile, but silently .dockerignore file also created. This contains the list of files which we need ignore while building the docker image.
Look careful all contents, it has .env also. But we must need this file to get our translator service details.
So remove the line containing .env.

We need to ignore our virtual environment libraries which are present in .venv. Add **/.venv line in .dockerignore.

For the docker to refer our environment variables properly, we need to add .env file in docker-compose.yml.
Open docker-compose.yml file and add section env_file after ports like this(take care of the indentation. ports and env_file should be on same level).

version: '3.4'

services:
  azuredevstories:
    image: azuredevstories
    build:
      context: .
      dockerfile: ./Dockerfile
    ports:
      - 5000:5000
    env_file: 
      - .env

Now we are done with all the configuration. Let's write some code.
Copy paste below code in app.py.

import logging
import os
import requests, uuid

from flask import Flask, render_template, request

from dotenv import load_dotenv
load_dotenv()

app = Flask(__name__)

# Setup logging to get the logs from the application
level = logging.DEBUG
format = f'%(asctime)s %(levelname)s %(name)s : %(message)s'
logging.basicConfig(filename='app.log', level=level, format=format)

@app.route('/', methods=['GET'])
def index():
    return render_template('index.html')

@app.route('/', methods=['POST'])
def index_post():
    """translate given string and put in file and upload to Azure storage account"""
    # Read values from the form
    original_text = request.form['text']
    target_language = request.form['language']

    # Load values from .env
    key = os.environ.get('KEY', '')
    endpoint = os.environ.get('ENDPOINT', '')
    location = os.environ.get('LOCATION', '')

    # Construct the translator method
    path = '/translate?api-version=3.0'
    target_language_parameter = '&to=' + target_language
    constructed_url = endpoint + path + target_language_parameter

    # Set up header for post request
    headers = {
        'Ocp-Apim-Subscription-Key': key,
        'Ocp-Apim-Subscription-Region': location,
        'Content-type': 'application/json',
        'X-ClientTraceID': str(uuid.uuid4())
    }

    # body of request
    body = [{'text': original_text}]

    # Make call using post
    translator_request = requests.post(constructed_url, headers=headers, json=body)
    # Retrieve JSON response
    translator_response = translator_request.json()
    # Retrieve translation response
    translated_text = translator_response[0]['translations'][0]['text']

    return render_template(
        'results.html',
        original_text=original_text,
        translated_text=translated_text,
    )

Create templates folder in current workspace directory.
Inside templates folder, create index.html with which we can receive the input and send it to Azure translation service from our flask application.
Copy paste below code in index.html.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <title>Translator</title>
</head>
<body>
    <div class="container">
        <h1>Translation service</h1>
        <div>Enter the text you wish to translate and upload to Azure</div>
        <div>
            <form method="POST">
                <div class="form-group">
                    <textarea name="text" cols="10" rows="2" class="form-control"></textarea>
                </div>
                <div class="form-group">
                    <label for="language">Select Translation Language</label>
                    <select name="language" class="form-control">
                        <option value="en">English</option>
                        <option value="it">Italian</option>
                        <option value="ja">Japanese</option>
                        <option value="ru">Russian</option>
                        <option value="de">German</option>
                    </select>
                </div>
                <div>
                    <button type="submit" class="btn btn-success">Translate and Upload !</button>
                </div>
            </form>
        </div>
    </div>
</body>
</html>

Inside templates folder, create results.html and copy paste below code.
This will display the results once the input is translated.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <title>Upload</title>
</head>
<body>
</br>
    <div class="container">
        <h2>Translation results</h2>
    </br>
        <div>
            <strong>Input text :</strong> {{ original_text }}
        </div>
        <div>
            <strong>Translated text:</strong> {{ translated_text }}
        </div>
        <div>
            <a href="{{ url_for('index') }}">Try another one!</a>
        </div>
    </div>
</body>
</html>

Our final folder structure looks like this.

Now our application is ready to make translations. Run locally and confirm there is no issue.
flask run

But we have not yet deployed it Azure, so it is time to re-build and deploy it to Azure.
Go to command palette (Ctrl + Shift + P).
Search build image and select Azure Container Registry: Build Image in Azure...,
Simply click enter key in all steps and keep all settings without change. (make sure all are valid and recent settings).
Image build starts and once it is completed you will see the results under Output in terminal section.
Go to docker extension, refresh and confirm the image tag time is changed (a few seconds ago).

Wait for sometime to docker image apply on the web application. Now open already deployed web application website https://mydockerdemotest.azurewebsites.net/ and check changes are reflected.

You can also open the web application in App services -> Select your application -> Overview -> Browse.

Website looks like this.

Enter input text to be translated and select the language of translation. Click Translate. We have the translated text like this.

Wow!, now our application is able to translate the text.

Now we will write this translation text to a file and upload to Azure Storage Account and download whenever we want.
That is a great service provided by Azure to store our files in a more secure way.
Let's learn on how to upload and download the files in Azure service.

Use Azure Storage Account to securely upload and download files.

Azure Storage account: It contains all our Azure storage objects like blobs(containers), queues, tables and disks. This account can be accessed over the internet using the unique namespace which we will be doing in this section.
Let's begin...
Again go to Azure Portal and install Azure Storage Account service.
Here are the steps.
Create new resource.

search storage account in azure marketplace and create the service.

Fill the required fields.

Subscription: Valid subscription.
Resource group: select resource group created before.
Storage account name: give a unique name to storage account
Location: Select nearest location
Performance: select Standard
Account kind: Default StorageV2 (general purpose v2)
Replication: Default Read-access-geo-redundant storage (RA-GRS)

Click Review + create then create to create the service.
Go to the created resource and fetch the connection details of the storage account.
Select Access keys and click on Show keys. It displays the key and connection string.

Copy and note down the key and Connection string which is required to put in our code to upload the file to this storage account.

Let's create a container in which we will be storing our files.
Go to overview and select containers.

Create a new container.

Give a name to container and select private from the dropdown because nobody else should not access our storage account.

Our storage container is created. Now let's go to code part from which we can upload the files to this container.

Go to VSCode.
As we already copied the connection string, copy it to .env file along with our container name and storageaccount name which we already created.
Our complete .env file looks like this.

KEY=0b5c31e83e36459f953b097d01931143
ENDPOINT=https://api.cognitive.microsofttranslator.com/
LOCATION=eastus
STORAGEACCOUNT_CONNECTION_STRING=DefaultEndpointsProtocol=https;AccountName=storageaccounttranslator;AccountKey=oJrELlq6ts0GGrvBVCISsARadZL0ozRPLF+m2afgRjz5mTcnV9TzmpDAFOQqPcZ0u+8OW90Qp35k5842QkB95w==;EndpointSuffix=core.windows.net
CONTAINER_NAME=translations
STORAGE_ACCOUNT_NAME=storageaccounttranslator
SASTOKEN_LIFE=12

STORAGEACCOUNT_CONNECTION_STRING : Connection string of the the storage account which we copied.
CONTAINER_NAME : Name of the container we created.
STORAGE_ACCOUNT_NAME : Our storage account name.
SASTOKEN_LIFE : How long sas token is valid for the file.(in months)

Now we need to write code to upload the translated file to storage account.
Go to appy.py file and add below methods.
upload_storageaccount and generate_sastoken()

def generate_sastoken(filename, saslife, connections):
    container_name = connections.get('container_name')
    connection_string = connections.get('storageaccount_connection')
    try:
        blob_service_client = BlobServiceClient.from_connection_string(connection_string)
        # generateToken with expiry
        sas_token = generate_blob_sas(blob_service_client.account_name, 
                container_name=container_name, blob_name=filename,
                account_key=blob_service_client.credential.account_key,
                permission=AccountSasPermissions(read=True),
                expiry=datetime.now() + relativedelta(months=saslife))

        print(f'sas token generated: {sas_token}')
        return sas_token
    except Exception as e:
        print(f'failed to generate token for file {filename} error: {e}')


def upload_storageaccount(infile, inpath, connections):
    connection_string = connections.get('storageaccount_connection')
    container_name = connections.get('container_name')
    account_name = connections.get('account_name')
    try:
        blob_service_client = BlobServiceClient.from_connection_string(connection_string)
        blob_client = blob_service_client.get_blob_client(container = container_name, blob = infile)

        # Upload the file data
        filepath = inpath + '/' + infile
        with open(filepath, 'rb') as data:
            blob_client.upload_blob(data, overwrite = True)

        url = f"https://{account_name}.blob.core.windows.net/{container_name}/{infile}"
        print(f'File {infile} uploaded to {url}')
        return url
    except Exception as e:
        print(f'failed to upload the report {infile} to {inpath}')

and call these methods from index_post() after the text is translated.
Update results.html to display the storage path and sas token with which we can download the file.

        <div>
            <strong>Storage file path:</strong> {{ storagepath }}
        </div>
        <div>
            <strong>SAS Token:</strong> {{ sas_token }}
        </div>

For complete code please refer my GitHub repository.

Now re-build the container image and check the results.
Go to command palette (Ctrl + Shift + P) in VSCode and type build image, select Azure Container Registry: Build Image in Azure... from the search list.
and follow remaining steps from our last re-build step.
Go to application website and check whether latest changes are reflected.
Enter input for translation text and language then click Translate and Upload!
After successful translation and upload the file we will get output like this.

Now go and download the file in new browser tab using below url combination.
<Storage file path>?<SAS Token>

Sample URL
https://storageaccounttranslator.blob.core.windows.net/translations/translated_file_ja.txt?se=2022-04-02T07%3A02%3A42Z&sp=r&sv=2020-06-12&sr=b&sig=%2BK83mBfp2Oun%2Bs0O8U0YTuJaHxOnyItEtdrUsrmpTO4%3D
Try to download file without SAS Token, you will get
error like this.

So it is sure that completely secured in storage account. Without SAS token file cannot be downloaded using bare url.

Also we can confirm whether the file is present in the storage account container. Go to Azure Portal -> Storage Account -> Container -> Select container. Here our uploaded files will be present.

If we encounter any issue in our application. How to check for it ? There is a solution in Azure service too. Let's look into it.

Step 4: Check logs of our container application.

In this step we will see how to check the logs of our container application.
Go to Azure Portal -> Search -> App Services -> Web application we created.

If we want to look at the previous logs on application crash, container crash or any other issues we can go to Diagnose and solve problems, here it displays the detailed information.
If we want to see the live log to Log stream. Here we can see whether our container application is started or encountered any issues.

Note: You might be wondering, we have stored the secrets in .env how to protect them. Yes! there is a solution in Azure called Azure Key Vault. I will be writing a blog on it soon.

Now we reached the final step.

We have created many Azure services so far in this blog, what happens if we leave them ? As Azure says Pay As You Go! means if we leave our resources it will be chargeable. So we must clear the resources which we have used.

OK! let's delete them.
Go to Azure Portal -> select our created Resource Group -> Delete the resource group. This deletes the entire resource group which contains many services.
If you want to delete only specific service, you do so too.

That's all !!!!!

Conclusion:

Thank you for your time in reading my first blog.
We learnt how to use Microsofts's Visual Studio Code, Azure Cognitive Services, Azure Storage Account, Azure web application, Containerizing web app, Azure Container Registry, Flask framework, etc. I hope it helped you to gain some knowledge on Azure services.
Your comments/suggestions are valuable for me to learn more.