updates to L100 cloud native app walkthrough (#54)

Author: shivashant25

demo-scripts/cloud-native-app-architecture/media/cni11.png

@@ -1,86 +1,70 @@
-# Cloud Native App Architecture Walkthrough : L100
+# Cloud Native App Architecture : Overview
 
-## Overview
+## Key Takeaways
 
-Contoso Traders is one of the leading E-Commerce platforms with a wide range of electronic products like desktops and laptops, mobile phones, gaming console accessories, and monitors. This includes a wide range of international brands like Microsoft Surface, XBOX, Samsung, ASUS, DELL etc. Contoso Traders Organization is using Microsoft 365 for their collaboration works internally.
+The key takeaways from this demo are:
 
-Contoso Traders has different departments like marketing, sales, accounts, HR, and IT. For internal communication, they are using Microsoft Teams and Outlook. In the Contoso Traders organisation, there are various functionalities with the Contoso Traders E-commerce platform like product approval, product price approval, Product price update approval etc. 
+* You'll get an overview of the application's architecture.
+* You'll also get an insight into the various Azure services that this application leverages.
 
-## Context
+## Before You Begin
 
-You will explore the Contoso traders code base present in a GitHub repository which contains all the files related to the application’s UI, backend APIs, deployment files, GitHub workflows, and deployment guides. You will also launch the application and review the functionalities of it.
+* No prerequisites are required for this specific demo.
 
-## Solution Architecture
+## Walkthrough: Exploring the application's architecture and the Azure services leveraged
 
-Contoso Traders is a 2 tier application and consists of Client tier.
+Let's take a quick peek into Contoso Traders's application architecture. The various components can be broadly categorized as follows:
 
-Presentation tier conatins the React JS application that acts as a client, collects the the information given by the user and passes it to Database tier. It consists of a collection of small, autonomous services. Each service is self-contained and should implement a single business capability within a bounded context. A bounded context is a natural division within a business and provides an explicit boundary within which a domain model exists.
+![Contoso Traders Architecture](./media/cni1.png)
 
-## Major components of Solution Architecture:
+### DevOps
 
-### DEVOPS
+The application's source code, tests, deployment scripts (IaC), tests are all available in this GitHub repository itself. We also have CI/CD pipelines (github workflows) that build the various application components, and deploy them to Azure Cloud.
 
-The word DevOps is a combination of the terms development and operations, meant to represent a collaborative or shared approach to the tasks performed by a company's application development and IT operations teams.
+An Azure Container Registry (ACR) is used to store the container images for the application's microservices. The ACR is integrated with the GitHub repository, and the container images are built and pushed to the ACR whenever there is a commit to the repository's `main` branch.
 
-DEVOPS consists of 2 components:
+### Front-End Infrastructure
 
-1. **GitHub (Reposistry and Actions)**: A code hosting platform for version control and collaboration.
+The front-end is a React JS application that is hosted on Azure App Service. The front-end application is also configured to use Azure Application Insights for monitoring and telemetry.
 
-   - **GitHub Repository**: A repository contains all of your project's files and each file's revision history. You can discuss and manage your project's work within the repository. You can find the **ContosoTraders** Application's GitHub repository here `https://github.com/microsoft/ContosoTraders`.
-   - **GitHub Actions**: A continuous integration and continuous delivery (CI/CD) platform that allows you to automate your build, test, and deployment pipeline. In this application you are deploying Azure Infrastructure using the Bicep template with the GitHub Workflow.
+Power Apps is used to create the Shipping Management App where this app will be managing shipment. Storage Account is used to store the images of the products available in the application.
 
-2. **Container Registry**: Allows you to build, store, and manage container images and artifacts in a private registry for all types of container deployments.   
+CDN is used to cache the static content of the application, and to serve it from the nearest edge location. This helps in reducing the latency and improving the performance of the application.
 
-### MICROSERVICES
+### Back-End Infrastructure
 
-Microservices are a popular architectural style for building applications that are resilient, highly scalable, independently deployable, and able to evolve quickly. It consists of a collection of small, autonomous services. Each service is self-contained and should implement a single business capability within a bounded context. A bounded context is a natural division within a business and provides an explicit boundary within which a domain model exists.
+API Management (gateway) is used to expose the application's microservices to the front-end. Common policies such as authentication, authorization, rate limiting, caching etc. are configured in API Management. The API Management is also configured to use Azure Active Directory for authentication and authorization.
 
-Backend tier consists of 3 API components that are containerized:
+### Back-End APIs and Databases
 
-1. **Shopping Cart**: Azure Container App is fully managed serverless container service for building and deploying modern apps at scale which helps in deploying containerised apps without managing complex infrastructure. Azure Cosmos DB is a fully managed NoSQL and relational database for modern app development. Cosmos DB holds the data of products which you add to the shopping cart.
+The application's APIs are built using .NET 6, and are deployed as containerized applications. We have three primary APIs:
 
-2. **Products and Stocks/Inventory**: Azure Kubernetes service simplifies deploying a managed Kubernetes cluster in Azure by offloading the operational overhead to Azure. Controller commands, Service layer repositories and Data Model encapsulated in AKS. Azure SQL Database is an always-up-to-date, fully managed relational database service built for the cloud. Build your next app with the simplicity and flexibility of a multi-model database that scales to meet demand. It offers single-digit millisecond response times, automatic and instant scalability, along with guarantee speed at any scale.
+* Products/Stocks API: This API is deployed as a containerized application on Azure Kubernetes Service (AKS). It is used to manage the products and their inventory. It uses both Azure SQL Database (product catalog) as well as Azure Cosmos DB (stock/inventory) for its persistence.
 
-3. **Image Search**: An image search engine is a tool that helps you find appropriate images to use in your online store. The Computer Vision service provides developers with access to advanced algorithms for processing images and returning the product information that are stored in the storage account. The storage account provides a unique namespace which provides highly available, durable, scalable and redundant storage. Here, in this application storage accounts stores the images of the products available in the application, which can be accessed by computer vision and app service.
+* Carts API: This API is deployed as a containerized application on Azure Container App (ACA). It is used to manage the shopping carts operations. It uses Azure Cosmos DB as its repository.
 
-### Gateway & IAM
+* Image Search API: This API is deployed as a containerized App Service. It is used to search for matching products with user-submitted images. It primarily relies on Azure Cognitive Search (Computer Vision).
 
-Application Gateway is a web traffic load balancer that enables you to manage traffic to your web applications. IAM is a cloud service that controls the permissions and access for users and cloud resources.
+All these microservices are also configured to use Azure Application Insights for monitoring and telemetry.
 
-1. **Azure Active Directory**: Azure AD is an integrated cloud identity and access solution, and a leader in the market for managing directories, enabling access to applications, and protecting identities.
+### Monitoring and Telemetry
 
-2. **API Managemnet (Gateway)**: Azure API Management offers a scalable, multi-cloud API management platform for securing, publishing and analysing APIs.
+Application Insights is used to monitor the application's performance and health. It is also used to collect telemetry data (metrics, events, logs) from the application's various components. The telemetry data is used to generate dashboards and alerts.
 
-### Front End
+### Security
 
-The Front End is the part of the website where users can see and interact with such as the graphical user interface (GUI) and the command line including the design, navigating menus, texts, images, videos, etc.
+Azure Active Directory (AAD) is used to manage the application's users and groups. AAD is also used to authenticate and authorize the application's users. The application's APIs are configured to use AAD for authentication and authorization.
 
-The primary use of a CDN is to decrease load times across a geographical area and DNS plays a major part in this. In order to make use of a CDN, the domain must point to a CDN provider. There are two App Service's in the application, one created with React JS is used as main website for ContosoTraders and other created using C#/ASP.Net for Rewards App. Power Apps is used to create the Shipping Management App where this app will be managing shipment. Storage Account is used to store the images of the products available in the application. 
+Microsoft Defender is used to monitor the application's security posture. It is also used to detect and respond to security threats to the infrastructure.
 
+## Walkthrough: Launching the application
 
-![](https://raw.githubusercontent.com/microsoft/ContosoTraders/main/docs/architecture/contoso-traders-enhancements.drawio.png)
+1. Open browser and navigate to [https://www.contosotraders.com/](https://www.contosotraders.com/)
 
+   ![Contoso Traders App](media/launchapp.png)
 
-## Instructions
-
-1. Open browser, using a new tab navigate to `https://github.com/microsoft/ContosoTraders` GitHub repository. This repository conatins all the neccessary files and documents which will guide you to host the contoso traders application from the scratch.
-
-1. Navigate to github/workflows folder, it contains the workflow YAML files using which you can the deployment resources. Please see the individual workflows for more information.
-
-1. contoso-traders-infra-deployment.yml will deploy the infrastructure into Azure which includes resource groups, resources, sets access policies to key vaults, and seeds the database from storage accounts into an Azure SQL database. This workflow will invoke the Bicep template that deploys the ACI app and AKS cluster.
-
-1. contoso-traders-app-deployment.yml deploys the application to Azure cloud. The application is configured to use the pre-deployed resources.
-
-1. contoso-traders-load-testing.yml configures the load testing for the application.
-
-## Launch App
-
-1. Open browser and navigate to [https://contosotraders.com/](https://www.contosotraders.com/)
-
-   ![](media/launchapp.png)
-   
-   In the webpage you will be able to see the ecommerce store with clsuter of electronic products such as Laptops, Xbox controllers, Desktops, mobile phones and monitors of different brands.
+   On this webpage, you'll be able to see the e-commerce store with clusters of electronic products such as laptops, game controllers, desktops, mobile phones and monitors of different brands.
 
 ## Summary
 
-You have got an overview of the ContosoTraders Application and also walkthrough of the App Architecture.
+Hope this demo was helpful in giving you an overview of the application's architecture and the various Azure services that this application leverages. We have a more detailed technical walkthrough of this application in [the next demo](./technical-walkthrough.md).

demo-scripts/cloud-native-app-architecture/media/cni13.png

@@ -1,14 +1,23 @@
 # Technical Walkthrough: Cloud Native Infrastructure
 
-## Overview
+## Overview of the Contoso Traders application
 
 Contoso Traders is one of the leading E-Commerce platforms with a wide range of electronic products like desktops and laptops, mobile phones, gaming console accessories, and monitors. This includes a wide range of international brands like Microsoft Surface, XBOX, Samsung, ASUS, DELL etc. Contoso Traders Organization is using Microsoft 365 for their collaboration works internally.
 
 Contoso Traders has different departments like marketing, sales, accounts, HR, and IT. For internal communication, they are using Microsoft Teams and Outlook. In the Contoso Traders organisation, there are various functionalities with the Contoso Traders E-commerce platform like product approval, product price approval, Product 
 
-## Context
+## Key Takeway
 
-## Steps
+1. **Archiecture Contoso Traders application**: The complete architecture of the Contoso Traders application is explained. The architecture is divided into multiple sub-components which covers different aspect of the application.
+
+1. **Demo of Azure Deployment**: You 
+
+
+## Walkthrough
+
+### Archiecture Contoso Traders application
+
+In this walkthrough, You will understand the architecture of the Contoso Traders application and its different components.
 
 1. Open browser, using a new tab navigate to `https://github.com/microsoft/ContosoTraders` GitHub repository. This repository conatins all the neccessary files and documents which will guide you to host the contoso traders application from the scratch.
 
@@ -24,19 +33,23 @@ Contoso Traders has different departments like marketing, sales, accounts, HR, a
 
    - **FRONTEND**: Frontend is basically a ReactJS application hosted in Azure App service which works with backend(microservices) in a synchronized manner to get data.
 
-   - **MICROSERVICES (3)**: There are 3 components of the application which are containerized that is, Shopping cart, products + carts, and Image search.**Shopping cart** is hosted in Azure container instance which pulls the image from container instance. **Products + carts** is hosted in Azure Kubernetes cluster which is deployed by pulling the image from container instance. **Image search** is hosted in conatinerzied App service.
+   - **MICROSERVICES**: There are 3 components of the application which are containerized that is, Shopping cart, products + carts, and Image search.**Shopping cart** is hosted in Azure container instance which pulls the image from container instance. **Products + carts** is hosted in Azure Kubernetes cluster which is deployed by pulling the image from container instance. **Image search** is hosted in conatinerzied App service.
 
    - **GATEWAY & IAM**: All the resources, identities communicate using Azure APIs to provide seamless experience inorder to keep up the website up and running. Azure Key vault is used to store all the sensitive keys and secrets, access policies are created which is assigned to resources and identities which uses the stored keys and secrets as needed.
 
    - **MONITORING AND TELEMETRY**: Azure Monitor, Application Insights, and Log Analytics is used to collect the logs and telemetry which can be used to check features like availabilty, performance, scability, etc of the resources.
 
    - **SECURITY**: Microsoft Defender for cloud and DevOps are used th protect the resources and GitHub repository from vulnerabilities and threats. 
 
-   ![](media/cni1.png)
+   ![](media/cni13.png)
 
 1. Open browser, using a new tab navigate to your forked **ContosoTraders** repo (`https://github.com/<GITHUB USERNAME/ContosoTraders`) GitHub repository. This repository conatins all the neccessary files and documents which will guide you to host the contoso traders application from the scratch.
 
    ![](media/cni6.png) 
+   
+### Deploying the application to Azure
+
+In this walkthrough, Let's explore and understand the GitHub Wworkflows which deploys the Contoso traders application in detail.
 
 1. Navigate to **github/workflows (1)** folder, it contains the **workflow YAML files (2)** using which you can deploy and configure the resources. Each workflow has its own functionality.
 
@@ -48,7 +61,7 @@ Contoso Traders has different departments like marketing, sales, accounts, HR, a
 
 1. The first job **provision-infrastructure** is the one which deploys the Infrasructure to Azure. Let us look at the each component of the job.
 
-   - **checkout code (1)**: The checkout component step automates the Azure sign in using the details defined in a secret named **SERVICEPRINCIPAL**.
+   - **azure login (1)**: The checkout component step automates the Azure sign in using the details defined in a secret named **SERVICEPRINCIPAL**.
 
    - **create resource group (2)**: This step creates an **Azure resource group**, A bicep template named **createResources.bicep** bicep template which is present in `ContosoTraders/iac` directory.
 
@@ -62,6 +75,12 @@ Contoso Traders has different departments like marketing, sales, accounts, HR, a
 
    - **purge CDN endpoint (7)**: This step purges the **CDN Endpoint**.
 
-   ![](media/cni9.png)  
+   ![](media/cni11.png) 
+   
+1. The second job **deploy-carts-api**, it builds a docker image of the carts-api and pushes it to Azure container instance. Let us look at the each component of the job.
+
+   - **azure login (1)**: The checkout component step automates the Azure sign in using the details defined in a secret named **SERVICEPRINCIPAL**.
+   
+   -