Azure App Services: Web Apps Made Simple

What is Azure App Service?

Azure App Service is a fully managed platform for building, deploying, and scaling web apps. It supports multiple programming languages and frameworks, allowing developers to focus on writing code rather than managing servers.

Key Features

• Multiple Language Support: ASP.NET, .NET Core, Java, Ruby, Node.js, PHP, Python
• Built-in DevOps: Continuous integration and deployment from GitHub, Azure DevOps, and more
• Auto-scaling: Automatically scale based on demand
• Global Scale: Deploy to multiple regions worldwide
• Security and Compliance: Built-in authentication, SSL certificates, and compliance certifications

Types of App Services

1. Web Apps

Host web applications and REST APIs:

# Create a web app
az webapp create \
  --resource-group myResourceGroup \
  --plan myAppServicePlan \
  --name myUniqueWebApp \
  --runtime "DOTNET|8.0"

2. API Apps

Build and host RESTful APIs:

# Deploy API app with continuous deployment
az webapp deployment source config \
  --name myApiApp \
  --resource-group myResourceGroup \
  --repo-url https://github.com/username/api-repo \
  --branch main \
  --manual-integration

3. Mobile Apps

Backend services for mobile applications:

# Create mobile app backend
az webapp create \
  --resource-group myResourceGroup \
  --plan myAppServicePlan \
  --name myMobileBackend \
  --runtime "DOTNETCORE|6.0"

App Service Plans

App Service Plans define the compute resources for your apps:

Deployment Slots

Deployment slots enable zero-downtime deployments:

# Create a staging slot
az webapp deployment slot create \
  --name myWebApp \
  --resource-group myResourceGroup \
  --slot staging

# Deploy to staging
az webapp deployment source config \
  --name myWebApp \
  --resource-group myResourceGroup \
  --slot staging \
  --repo-url https://github.com/username/app-repo

# Swap staging to production
az webapp deployment slot swap \
  --name myWebApp \
  --resource-group myResourceGroup \
  --slot staging \
  --target-slot production

Azure Functions: Serverless Computing

What are Azure Functions?

Azure Functions is a serverless compute service that lets you run event-driven code without managing infrastructure. You pay only for the time your code runs, making it cost-effective for sporadic workloads.

Key Benefits

• Event-Driven: Triggered by various events (HTTP requests, timers, storage changes)
• Pay-per-Execution: Only pay when your function runs
• Auto-Scaling: Automatically scales from zero to thousands of instances
• Multiple Languages: C#, JavaScript, Python, Java, PowerShell, and more

Function Triggers

HTTP Trigger

[FunctionName("HttpTriggerCSharp")]
public static async Task<IActionResult> Run(
    [HttpTrigger(AuthorizationLevel.Function, "get", "post", Route = null)] HttpRequest req,
    ILogger log)
{
    log.LogInformation("C# HTTP trigger function processed a request.");

    string name = req.Query["name"];

    string requestBody = await new StreamReader(req.Body).ReadToEndAsync();
    dynamic data = JsonConvert.DeserializeObject(requestBody);
    name = name ?? data?.name;

    string responseMessage = string.IsNullOrEmpty(name)
        ? "This HTTP triggered function executed successfully. Pass a name in the query string or in the request body for a personalized response."
        : $"Hello, {name}. This HTTP triggered function executed successfully.";

    return new OkObjectResult(responseMessage);
}

Timer Trigger

[FunctionName("TimerTriggerCSharp")]
public static void Run([TimerTrigger("0 */5 * * * *")]TimerInfo myTimer, ILogger log)
{
    log.LogInformation($"C# Timer trigger function executed at: {DateTime.Now}");
}

Blob Storage Trigger

[FunctionName("BlobTriggerCSharp")]
public static void Run(
    [BlobTrigger("samples-workitems/{name}", Connection = "AzureWebJobsStorage")] Stream myBlob,
    string name,
    ILogger log)
{
    log.LogInformation($"C# Blob trigger function processed blob\n"
                      $"Name: {name}\n"
                      $"Blob Size: {myBlob.Length} bytes");

    // Process the blob content
    // Example: Read blob content
    using (var reader = new StreamReader(myBlob))
    {
        string content = reader.ReadToEnd();
        log.LogInformation($"Blob content: {content}");
    }
}

Service Bus Queue Trigger

[FunctionName("ServiceBusQueueTrigger")]
public static async Task Run(
    [ServiceBusTrigger("myqueue", Connection = "ServiceBusConnection")] string myQueueItem,
    ILogger log)
{
    log.LogInformation($"C# ServiceBus queue trigger function processed message: {myQueueItem}");

    try
    {
        // Process the queue message
        var order = JsonConvert.DeserializeObject<Order>(myQueueItem);

        // Business logic here
        await ProcessOrderAsync(order);

        log.LogInformation($"Successfully processed order {order.Id}");
    }
    catch (Exception ex)
    {
        log.LogError(ex, "Error processing queue message");
        throw; // Re-throw to handle poison messages
    }
}

private static async Task ProcessOrderAsync(Order order)
{
    // Implementation here
    await Task.CompletedTask;
}

public class Order
{
    public string Id { get; set; }
    public string CustomerId { get; set; }
    public decimal Amount { get; set; }
}

Dependency Injection Example

// Startup.cs
public class Startup : FunctionsStartup
{
    public override void Configure(IFunctionsHostBuilder builder)
    {
        builder.Services.AddHttpClient();
        builder.Services.AddScoped<IOrderService, OrderService>();
        builder.Services.AddSingleton<IConfiguration>(provider =>
        {
            var config = new ConfigurationBuilder()
                .AddEnvironmentVariables()
                .Build();
            return config;
        });
    }
}

// Function with Dependency Injection
public class OrderFunction
{
    private readonly IOrderService _orderService;
    private readonly ILogger<OrderFunction> _logger;

    public OrderFunction(IOrderService orderService, ILogger<OrderFunction> logger)
    {
        _orderService = orderService;
        _logger = logger;
    }

    [FunctionName("ProcessOrder")]
    public async Task<IActionResult> Run(
        [HttpTrigger(AuthorizationLevel.Function, "post", Route = "orders")] HttpRequest req)
    {
        try
        {
            string requestBody = await new StreamReader(req.Body).ReadToEndAsync();
            var order = JsonConvert.DeserializeObject<Order>(requestBody);

            var result = await _orderService.ProcessOrderAsync(order);

            return new OkObjectResult(result);
        }
        catch (Exception ex)
        {
            _logger.LogError(ex, "Error processing order");
            return new BadRequestObjectResult("Failed to process order");
        }
    }
}

public interface IOrderService
{
    Task<string> ProcessOrderAsync(Order order);
}

public class OrderService : IOrderService
{
    public async Task<string> ProcessOrderAsync(Order order)
    {
        // Business logic implementation
        await Task.Delay(100); // Simulate processing
        return $"Order {order.Id} processed successfully";
    }
}

Creating Azure Functions

# Create a function app
az functionapp create \
  --resource-group myResourceGroup \
  --consumption-plan-location eastus \
  --runtime dotnet \
  --runtime-version 8 \
  --functions-version 4 \
  --name myFunctionApp \
  --storage-account mystorageaccount

Hosting Plans

1. Consumption Plan

• Pay-per-execution
• Automatic scaling
• 5-minute execution timeout (default)

2. Premium Plan

• Pre-warmed instances
• Unlimited execution duration
• VNet connectivity

3. Dedicated Plan

• Run on App Service Plan
• Predictable pricing
• Full control over scaling

Durable Functions

For complex, stateful functions in serverless environments:

[FunctionName("OrderProcessing")]
public static async Task<string> RunOrchestrator(
    [OrchestrationTrigger] IDurableOrchestrationContext context)
{
    var orderId = context.GetInput<string>();

    // Step 1: Validate order
    await context.CallActivityAsync("ValidateOrder", orderId);

    // Step 2: Process payment
    await context.CallActivityAsync("ProcessPayment", orderId);

    // Step 3: Ship order
    await context.CallActivityAsync("ShipOrder", orderId);

    return "Order processed successfully";
}

Best Practices

App Services

1. Use Deployment Slots: Implement blue-green deployments
2. Enable Application Insights: Monitor performance and errors
3. Configure Auto-Scale: Handle traffic variations automatically
4. Secure Your Apps: Use authentication providers and SSL certificates
5. Optimize Performance: Use CDN for static content

Azure Functions (.NET Specific)

1. Keep Functions Small: Single responsibility principle
2. Handle Cold Starts: Use Premium plans for consistent performance
3. Use Dependency Injection: Register services in Startup.cs for better testability
4. Implement Proper Error Handling: Use try-catch and structured logging
5. Async/Await Best Practices: Use ConfigureAwait(false) for better performance
6. Secure Function Keys: Rotate keys regularly and use Azure Key Vault
7. NuGet Package Management: Keep packages updated and minimize dependencies
8. Monitor Costs: Watch execution counts and duration

Real-World Architecture Example

E-commerce Platform

Frontend (React) → App Service
     ↓
API Gateway → Azure Functions
     ↓
┌─────────────────────────┐
│ • User Authentication  │
│ • Order Processing     │
│ • Inventory Updates    │
│ • Email Notifications  │
└─────────────────────────┘
     ↓
Azure Storage + Cosmos DB

Implementation Steps

1. Frontend: Deploy React app to App Service
2. API Functions: Create HTTP-triggered functions for each API endpoint
3. Background Processing: Use queue-triggered functions for async tasks
4. Monitoring: Implement Application Insights across all services

Cost Optimization

App Services

• Right-size your plan: Start small and scale up as needed
• Use shared plans: For development and testing
• Implement auto-shutdown: For non-production environments

Azure Functions

• Optimize execution time: Reduce function duration
• Use appropriate hosting plans: Consumption for sporadic loads
• Implement efficient triggers: Avoid unnecessary executions

Monitoring and Debugging

Application Insights Integration

public static class Function1
{
    [FunctionName("Function1")]
    public static async Task<IActionResult> Run(
        [HttpTrigger(AuthorizationLevel.Function, "get", "post", Route = null)] HttpRequest req,
        ILogger log)
    {
        log.LogInformation("C# HTTP trigger function processed a request.");

        // Your function logic here

        return new OkObjectResult("Function executed successfully");
    }
}

Log Analytics Queries

// Function execution times
requests
| where cloud_RoleName == "myFunctionApp"
| summarize avg(duration), count() by name
| order by avg_duration desc

Common Pitfalls to Avoid

1. Over-provisioning App Service Plans: Choose the right tier for your needs
2. Ignoring Cold Starts: Consider Premium functions for consistent performance
3. Not implementing proper monitoring: Set up alerts and dashboards
4. Security oversights: Always use HTTPS and implement authentication
5. Lack of error handling: Implement comprehensive error handling and logging

What's Next?

In our next post, we'll explore Container Services in Azure, covering:

• Azure Container Instances (ACI)
• Azure Kubernetes Service (AKS)
• Azure Container Registry
• Container deployment strategies

Conclusion

Azure App Services and Functions provide powerful platforms for building modern, scalable applications. App Services offer a managed environment for web applications, while Functions enable serverless architectures that can significantly reduce costs and complexity.

By combining these services, you can build robust, scalable applications that automatically adapt to demand while minimizing operational overhead.

Key Takeaways:

• App Services provide managed hosting for web applications and APIs
• Azure Functions enable event-driven, serverless computing
• Both services integrate seamlessly with other Azure services
• Choose the right hosting plan based on your performance and cost requirements
• Implement proper monitoring and security from the start

Tags: Azure, App Services, Azure Functions, Serverless, PaaS, Web Applications

Category: Azure Compute Series

Estimated Reading Time: 12 minutes

Understanding Virtual Machines

What are Virtual Machines?

Virtual Machines (VMs) are virtualized computing environments that run on Microsoft's Azure cloud infrastructure. They allow you to run applications as if they were on a physical computer, with complete control over the operating system and hardware configurations.

Why Use VMs?

• Customizability: Choose any OS and configure your VM according to your needs
• Flexibility: Scale resources like CPU, memory, and storage
• Compatibility: Support for a wide range of applications and frameworks

Common Use Cases

• Development and Testing: Spin up isolated environments quickly
• Legacy Application Migration: Move existing apps to the cloud without code changes
• Specialized Workloads: Run applications requiring specific OS setups

Introduction to Virtual Machine Scale Sets

What are VM Scale Sets?

Virtual Machine Scale Sets let you deploy and manage a set of identical, auto-scaling VMs. They ensure your applications are highly available and capable of handling traffic spikes effectively.

Key Benefits

• Auto-Scaling: Automatically increase or decrease the number of VMs as demand changes
• Load Balancing: Evenly distribute incoming traffic across instances
• Cost Efficiency: Pay for only the compute instances you use

Common Use Cases

• Web Hosting: Handle varying traffic loads efficiently
• Batch Processing: Scale compute resources to process data faster
• Microservices Architectures: Continually adjust capacity based on workload

Getting Started with Virtual Machines

Creating a Virtual Machine

Let's go through the steps to create a Linux VM using Azure CLI:

# Login to Azure
az login

# Create a resource group
az group create --name myResourceGroup --location eastus

# Create a virtual machine
az vm create \
  --resource-group myResourceGroup \
  --name myVM \
  --image UbuntuLTS \
  --admin-username azureuser \
  --generate-ssh-keys

Key Considerations

• Choose the right size: Balance performance and cost
• Network Configuration: Ensure appropriate security groups and firewall rules
• Backup and Recovery: Implement a backup strategy using Azure Backup

Setting Up Virtual Machine Scale Sets

Creating a VM Scale Set

Easily create a scale set to manage multiple instances:

# Create a scale set
az vmss create \
  --resource-group myResourceGroup \
  --name myScaleSet \
  --image UbuntuLTS \
  --upgrade-policy-mode automatic \
  --admin-username azureuser \
  --generate-ssh-keys

Key Capabilities

• Custom Autoscale Rules: Define how and when to scale based on metrics
• Integration with Load Balancer: Distribute traffic seamlessly
• Rolling Upgrades: Update VMs without downtime

Best Practices for VMs and Scale Sets

Security

• Use Network Security Groups: Control inbound and outbound traffic
• Regular Patching: Schedule updates for software and system
• Enable Disk Encryption: Protect sensitive data

Monitoring and Maintenance

• Implement Azure Monitor: Gain insights into VM performance
• Use Log Analytics: Centralize logging and alerts
• Automate Management: Utilize scripts for common tasks

Cost Management

• Spot VMs: Use preemptible instances to save costs
• Optimize VM Sizes: Right-size VMs based on performance needs
• Reserved Instances: Commit to Azure for 1 or 3 years to reduce costs

Real-World Example: Online Retail Platform

Here's how a retail company can leverage VMs and Scale Sets:

1. Frontend Applications: Hosted on VMs for complete control
2. Backend Processing: Use Scale Sets for managing order processing
3. Seasonal Traffic Spikes: Scale easily during sales events with auto-scaling

Conclusion

Whether you're running simple applications or complex architectures, Azure Virtual Machines and Scale Sets provide the flexibility and scalability needed to support your business needs. By selecting the appropriate configurations and implementing best practices, you can maximize performance while optimizing costs.

Stay tuned for our next post in the Azure series, where we'll explore Azure Networking capabilities, including Virtual Networks, Load Balancers, and more.

Tags: Azure, Virtual Machines, Scale Sets, Cloud Computing, Microsoft

Category: Azure Compute Series

Estimated Reading Time: 10 minutes

What is Azure Compute?

Azure Compute is a comprehensive suite of cloud computing services that provides on-demand access to computing resources. Think of it as your virtual data center in the cloud, where you can run applications, process data, and host services without the need to maintain physical hardware.

Why Azure Compute Matters

In today's digital landscape, businesses need:

• Scale on demand: Handle traffic spikes without over-provisioning
• Cost efficiency: Pay only for what you use
• Global reach: Deploy applications close to your users
• Reliability: Built-in redundancy and disaster recovery

Core Azure Compute Services

1. Virtual Machines (VMs)

Azure VMs are the most fundamental compute service, offering:

• Full control over the operating system
• Wide OS support (Windows, Linux distributions)
• Flexible sizing from small development environments to high-performance computing

Use Cases:

• Legacy application migration
• Development and testing environments
• Specialized workloads requiring specific OS configurations

2. App Services

Platform-as-a-Service (PaaS) offering for web applications:

• Multiple frameworks (ASP.NET, Node.js, Python, PHP, Java)
• Built-in DevOps with continuous deployment
• Auto-scaling based on demand
• Integrated monitoring and diagnostics

Use Cases:

• Web applications and APIs
• Mobile app backends
• Microservices architectures

3. Azure Functions

Serverless computing platform for event-driven applications:

• Pay-per-execution pricing model
• Auto-scaling to zero when not in use
• Event triggers (HTTP, timers, storage events)
• Multiple language support

Use Cases:

• API backends
• Data processing pipelines
• IoT data handling
• Scheduled tasks

4. Container Services

Modern application deployment with containers:

• Azure Container Instances (ACI): Simple container hosting
• Azure Kubernetes Service (AKS): Managed Kubernetes orchestration
• Azure Container Apps: Serverless container platform

Use Cases:

• Microservices applications
• CI/CD pipelines
• Batch processing jobs

5. Virtual Machine Scale Sets

Automated scaling for VM-based applications:

• Auto-scaling based on metrics
• Load balancing across instances
• Rolling updates for zero-downtime deployments

Use Cases:

• High-traffic web applications
• Batch processing workloads
• Multi-tier applications

Choosing the Right Compute Service

Decision Framework

Cost Considerations

1. Virtual Machines: Pay for allocated resources, even when idle
2. App Services: Pay for the App Service Plan, regardless of usage
3. Azure Functions: Pay per execution and resource consumption
4. Containers: Pay for running container time

Getting Started: Your First Azure Compute Resource

Prerequisites

• Azure subscription (free tier available)
• Basic understanding of cloud concepts
• Azure CLI or Azure Portal access

Quick Start: Creating a Virtual Machine

# Login to Azure CLI
az login

# Create a resource group
az group create --name myResourceGroup --location eastus

# Create a virtual machine
az vm create \
  --resource-group myResourceGroup \
  --name myVM \
  --image Ubuntu2204 \
  --admin-username azureuser \
  --generate-ssh-keys

Best Practices for Azure Compute

1. Resource Management

• Use Resource Groups to organize related resources
• Apply tags for cost tracking and management
• Implement naming conventions for consistency

2. Security

• Enable Azure Security Center for threat protection
• Use Azure Key Vault for secrets management
• Implement network security groups for traffic control

3. Cost Optimization

• Right-size resources based on actual usage
• Use reserved instances for predictable workloads
• Implement auto-shutdown for development environments
• Monitor with Azure Cost Management

4. Performance

• Choose appropriate regions for low latency
• Use SSD storage for better performance
• Implement caching strategies where applicable

Monitoring and Management

Azure Monitor

• Application Insights for application performance monitoring
• Log Analytics for centralized logging
• Metrics and alerts for proactive monitoring

Azure Resource Manager (ARM)

• Infrastructure as Code with ARM templates
• Consistent deployments across environments
• Version control for infrastructure changes

Real-World Example: E-commerce Platform

Let's consider how different Azure Compute services work together:

1. Frontend: App Services hosting the web application
2. API Layer: Azure Functions handling order processing
3. Background Jobs: Virtual Machines running inventory updates
4. Microservices: AKS managing containerized services
5. Scaling: VM Scale Sets handling traffic spikes during sales

Common Pitfalls to Avoid

1. Over-provisioning: Don't allocate more resources than needed
2. Ignoring regions: Choose regions close to your users
3. Security oversights: Always follow security best practices
4. Lack of monitoring: Implement comprehensive monitoring from the start
5. No backup strategy: Plan for disaster recovery

What's Next?

In our next post, we'll dive deep into Virtual Machines and Scale Sets, exploring:

• VM sizing and selection
• Setting up scale sets for high availability
• Advanced networking configurations
• Performance optimization techniques

Conclusion

Azure Compute Services provide the foundation for building scalable, reliable, and cost-effective cloud applications. By understanding the different service options and their use cases, you can make informed decisions about your cloud architecture.

Whether you're migrating existing applications or building new cloud-native solutions, Azure Compute offers the flexibility and power you need to succeed in the cloud.

Key Takeaways:

• Azure offers multiple compute options for different use cases
• Choose services based on your control requirements and scaling needs
• Implement best practices for security, cost optimization, and performance
• Start with simple deployments and evolve your architecture over time

Tags: Azure, Cloud Computing, Virtual Machines, App Services, Serverless, Containers

Category: Azure Compute Series

Estimated Reading Time: 8 minutes

The Problem

Most translation apps depend heavily on third-party translation APIs, but what if we could bypass that entirely? Using GenAI prompting, I was able to retrieve all the supported languages in an array format. These languages were displayed in a dynamic combo box in the UI. The actual translation process also happened within GenAI itself, eliminating the need for any external API calls.

Why Svelte and TypeScript?

Choosing Svelte for this project was an easy decision, and here’s why:

- Reactivity: Svelte's reactivity model makes state management seamless. This helped in dynamically updating language selections and translation results.

- Lightweight: Svelte compiles down to pure JavaScript at build time, resulting in faster load times and smaller bundle sizes.

- Type Safety: With TypeScript, I ensured that the app had robust type-checking, making development smoother and reducing the risk of runtime errors.

Here is the example, how to effectively use prompting and fetch the data as required:

var response = await GetResponse(
          "Fetch me all the languages used for translation with comma separated. Just return me this information and nothing else"
        );

Using this approach, I created a user-friendly interface that allowed for real-time translation while showing the remaining character count. The language list fetched using GenAI was displayed in a combo box, making the UI highly interactive.

Leveraging GenAI for Creative Applications

This project opened my eyes to the wide array of possibilities that GenAI offers beyond just translation. We can leverage it to build all sorts of useful tools. Here are a few ideas:

- JSON to Class Converters: Prompting GenAI to generate C#, Java, or other language classes based on a given JSON structure.

- CSS to SCSS/SASS Converters: Automatically convert vanilla CSS into SCSS, SASS, or even Tailwind utility classes, making the switch between styling frameworks more seamless.

- Tailwind to Bootstrap Converter: If you’ve ever wanted to switch between CSS frameworks, imagine converting Tailwind classes into Bootstrap classes using the power of AI.

These types of GenAI-powered tools are not just cool experiments but could significantly enhance productivity for developers working across different stacks and languages.

This project really demonstrated how powerful and flexible Svelte and TypeScript are, and how GenAI can remove the need for external APIs. It also sparked new ideas for leveraging GenAI to create developer tools that save time and effort across various domains. There might be some issues while translating but this will depend on GenAI model used.

Feel free to check out the full source code for this AI-powered translator on my GitHub: Click here.

Let’s continue exploring how AI can drive innovation in web development!

If you’re building something cool with AI or web technologies, I’d love to hear about it!

#ArtificialIntelligence #GenAI #Svelte #TypeScript

What Are Custom URL Protocols?

A Custom URL Protocol is a unique identifier registered in the system’s registry. When a web browser encounters a link starting with a registered protocol (e.g., notion://), it can invoke a dialog to open the specified desktop application, if installed. This approach is ideal for launching desktop applications directly from web pages, enhancing user interaction across platforms.

Here are a few examples of commonly registered URL protocols:

• Notion: notion://

• Calculator: ms-calculator://

• Notepad: ms-notepad://

These protocols are recognized by Windows (and other operating systems) and can be launched by simply clicking a corresponding link in the browser. Now, let's dive into the process of creating your own Custom URL Protocol.

Registering a Custom URL Protocol in Windows

To register a Custom URL Protocol in Windows, we’ll work with the Windows Registry. Here’s a step-by-step guide to creating your own protocol.

Steps to Register Your Custom URL Protocol

1. Open the Registry Editor

   • Press Win + R, type regedit, and press Enter to open the Windows Registry Editor.

2. Navigate to HKEY_CLASSES_ROOT

   • In the Registry Editor, go to HKEY_CLASSES_ROOT. This location stores all the registered protocols and file associations.

3. Create a New Key for Your Protocol

   • Under HKEY_CLASSES_ROOT, create a new key with the name of your protocol. For this example, let’s call it my-custprotocol.

4. Add a URL Protocol String Value

   • Inside the my-custprotocol key, create a new String Value named URL Protocol. This value doesn’t require any specific data; simply leave it blank. Adding this key informs Windows that this entry is a protocol handler.

5. Define the Launch Command

   • Inside the my-custprotocol key, create a subkey named shell.

   • Under shell, create another subkey named open.

   • Under open, create a final subkey called command.

   • Set the (Default) value of command to the path of the executable you want to open, with the following format:

       "path\to\your\application.exe" "%1"
     

   • For example, if your application is located at D:\TestApp\CustomProtocol.Tester.exe, you would enter:

       "D:\TestApp\CustomProtocol.Tester.exe" "%1"
     

The %1 argument allows the protocol to pass any query string data from the browser to your application, enabling custom handling based on the URL parameters.

Now, when you or any user navigates to my-custprotocol://example, the browser will prompt to open your application, passing along any query strings as arguments.

Handling URL Arguments in Your Application

In most frameworks, such as Electron, WPF, Tkinter, or JavaFX, you can access command-line arguments in the application startup process. You can then parse the %1 argument to extract parameters from the query string, allowing you to implement custom logic based on the URL.

For instance, if you navigate to my-custprotocol://open?doc=123, the query doc=123 will be passed to your application, and you could handle this in your app to open a specific document.

Automating the Registry Key Creation

Adding a Custom URL Protocol manually can be tedious, especially if you want this protocol to register on each installation. The registration process can be automated using scripts in various programming languages, such as PowerShell, C#, or Python.

Here's a simple PowerShell script to automate the registry addition for my-custprotocol:

$protocolName = "my-custprotocol"
$exePath = "D:\TestApp\CustomProtocol.Tester.exe"

New-Item -Path "HKCR:\$protocolName" | Out-Null
New-ItemProperty -Path "HKCR:\$protocolName" -Name "URL Protocol" -Value "" | Out-Null
New-Item -Path "HKCR:\$protocolName\shell" | Out-Null
New-Item -Path "HKCR:\$protocolName\shell\open" | Out-Null
New-Item -Path "HKCR:\$protocolName\shell\open\command" | Out-Null
Set-ItemProperty -Path "HKCR:\$protocolName\shell\open\command" -Name "(Default)" -Value "`"$exePath`" `"%1`""

Run this script as part of your application installation process to register the protocol automatically.

Conclusion

Custom URL Protocols offer a powerful way to bridge the web and desktop application worlds, creating a smooth and integrated experience for users. By following these steps, you can create and register your own Custom URL Protocol, enabling you to launch your desktop applications directly from the web. With the ability to pass arguments through URL query strings, this approach can add significant functionality to your application, making it highly responsive to user actions initiated from a browser.

So, the next time you need to invoke an app from the web, remember that setting up a Custom URL Protocol might be the key!

WebAssembly or popularly known as WASM is an open web standard that allows efficient code execution in a binary format, similar to native code execution. It can be used with various languages like C, C++, Go, and C# .NET, enabling developers to compile their code into WASM files that can be downloaded and run in the browser.

Why Consider .NET in the Browser?

JavaScript undoubtedly reigns supreme in client-side development. However, what if your project demands server-side processing, such as file conversions or complex computations, that are more efficiently handled with .NET using C#? Simply making calls to the backend server might not be the most optimal solution. What if you could execute these operations directly within the browser using .NET? This is where WebAssembly comes into play, enabling you to harness the capabilities of .NET right in the client's browser environment. In this article, we delve into the potential of leveraging .NET with WebAssembly, revolutionizing the way we approach web development.

Lets get started

To unleash the power of .NET in your browser, you'll need to ensure you have the .NET 7 or latest, installed on your system. Additionally, make sure to equip your environment with the necessary tools, such as the wasm-tools workload, to seamlessly integrate WebAssembly into your development workflow.

wasm-tools can be installed with following commands

dotnet workload install wasm-tools

Create a new dotnet console application

dotnet new console

Now to convert our console application to build WebAssembly bindings on compilation we need to below tags in <PropertyGroup> tag in csproj file, also we need to create a main.js file in the same project.

<RuntimeIdentifier>browser-wasm</RuntimeIdentifier>
<AllowUnsafeBlocks>true</AllowUnsafeBlocks>
<WasmMainJSPath>main.js</WasmMainJSPath>

In Program.cs, add the following code

using System.Runtime.InteropServices.JavaScript;
using System.Text.Json;
using System.Text.Json.Serialization;

Console.WriteLine(""); //work around for main is not defined error on code compilation 

public partial class JSBridge
{
    private static Employee employee { get; set; }

    [JSImport("globalThis.console.log")]
    internal static partial void Log([JSMarshalAs<JSType.String>] string message);

    [JSExport]
    internal static string GetEmployee()
    {
        string jsonString = JsonSerializer.Serialize(employee, SourceGenerationContext.Default.Employee);
        Log(jsonString);//Logging message log to console
        return jsonString;
    }

    [JSExport]
    internal static void SetEmployee(int _id, string _name, int _age, bool _isActive)
    {
        Log($"{nameof(Employee.EmployeeId)}: {_id}, {nameof(Employee.EmployeeName)}: {_name}, {nameof(Employee.EmployeeAge)}: {_age}, {nameof(Employee.IsActive)}: {_isActive},");
        employee = new Employee() { EmployeeId = _id, EmployeeName = _name, EmployeeAge = _age, IsActive = _isActive };
    }
}

[JsonSourceGenerationOptions(WriteIndented = true)]
[JsonSerializable(typeof(Employee))]
internal partial class SourceGenerationContext : JsonSerializerContext
{

}

public class Employee
{
    public int EmployeeId { get; set; }
    public string EmployeeName { get; set; }
    public int EmployeeAge { get; set; }
    public bool IsActive { get; set; }
}

Information related to JSExport and JSImport can be found here and in main.js we need to create a wrapper to access the .NET code using JavaScript.

import { dotnet } from "./_framework/dotnet.js";
let exportsPromise = null;

const createRuntimeAndGetExports = async () => {
    const { getAssemblyExports, getConfig } = await dotnet.create();
    const config = getConfig();
    return await getAssemblyExports(config.mainAssemblyName);
};

export async function getEmployee() {
    if (!exportsPromise) {
        exportsPromise = createRuntimeAndGetExports();
    }
    const exports = await exportsPromise;
    return exports.JSBridge.GetEmployee();
}

export async function setEmployee(id, name, age, isActive) {
    if (!exportsPromise) {
        exportsPromise = createRuntimeAndGetExports();
    }
    const exports = await exportsPromise;
    return exports.JSBridge.SetEmployee(id,name,age,isActive);
}

Now our C# code and JavaScript wrapper is ready to publish, it can be done from Visual Studio itself by Publish or running below command.

dotnet publish -c Release

On invoking the command .NET code will be converted to WebAssembly binding which can be triggered by our main.js exports. AppBundle folder will be created with the similar files. Package.json file can be created if we need to use it as npm module.

Now well be using the .NET code in a JavaScript, for it we can create a basic Node.js application which uses express serving static HTML file.

Add the following code to the index.js file, also create a new folder public and subfolder dotnet and copy the contents of AppBundle folder which were generated on publishing .NET wasm project.

const express = require("express");
const path=require("path");
const app = express();

app.use(express.static(path.join(__dirname, 'public')));

app.get("/", async (req, res) => {
  res.sendFile("index.html",{root:__dirname});
});

app.listen(8000, () => {
  console.log("Server started on http://localhost:8000/");
});

and the last step is to create an index.html file which will invoke the .NET code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .form-container {
        display: flex;
      }
      .btn {
        display: inline-block;
        padding: 2%;
        width: 100%;
        margin-top: 5px;
      }
    </style>
  </head>
  <body>
    <h2>Employee Information</h2>
    <table>
      <tbody>
        <tr>
          <td>Employee Id</td>
          <td><input id="txtEmployeeId" type="number" /></td>
        </tr>
        <tr>
          <td>Employee Name</td>
          <td><input id="txtEmployeeName" type="text" /></td>
        </tr>
        <tr>
          <td>Employee Age</td>
          <td><input id="txtEmployeeAge" type="number" /></td>
        </tr>
        <tr>
          <td>Is Active</td>
          <td><input id="chkIsActive" type="checkbox" /></td>
        </tr>
        <tr>
          <td></td>
          <td>
            <button class="btn" onclick="btnSetEmployee_Click()">
              Set Employee
            </button>
          </td>
        </tr>
        <tr>
          <td></td>
          <td>
            <button class="btn" onclick="btnGetEmployee_Click()">
              Get Employee
            </button>
          </td>
        </tr>
      </tbody>
    </table>
    <script>
      const btnSetEmployee_Click = async () => {
        let employeeId = Number(document.getElementById("txtEmployeeId").value);
        let employeeName = document.getElementById("txtEmployeeName").value;
        let employeeAge = Number(
          document.getElementById("txtEmployeeAge").value
        );
        let isActive = document.getElementById("chkIsActive").checked;

        if (employeeId && employeeName && employeeAge && isActive) {
          import("/dotnet/main.js").then(({ setEmployee }) => {
            setEmployee(employeeId, employeeName, employeeAge, isActive).then(()=>{
              alert('Success');
            })
          });
        } else {
          alert("Invalid data entered");
        }
      };

      const btnGetEmployee_Click = async () => {
        import("/dotnet/main.js").then(({ getEmployee }) => {
          getEmployee().then((result)=>{
            if(result===null){
              alert('no data present');
              return;
            }
            alert(result);
          });
        });
      };
    </script>
  </body>
</html>

on running the node.js code html file will be displayed, on Setting employee data we are invoking the C# code which internally log data to console in browser as we have imported console.log functionality using JSImport, similarly on getting employee data we are reading serialized string data from the Employee class object we have created earlier in the code.

You can find the code used in this blog on my Github here and do check out my other projects and connect with on LinkedIn.

https://www.linkedin.com/in/nilaybarot/

Additional Resources

https://learn.microsoft.com/en-us/aspnet/core/client-side/dotnet-interop?view=aspnetcore-8.0

https://github.com/maraf/dotnet-wasm-react

Python's Dominance in Tutorials: A Practical Approach?

A scroll through YouTube tutorials reveals a prevalent trend – OpenCV projects showcased predominantly in Python. But, is this inclination a practical one?

Python, being an interpreted language, often carries the stigma of slower performance compared to its compiled counterparts. Yet, its unparalleled efficiency and speed in code development cannot be overlooked. Notably, when utilizing OpenCV's API in Python, the underlying C++ API and performance-optimized Python modules like NumPy come into play. While leveraging the core functionality of OpenCV API, Python showcases commendable performance. However, when custom Python code comes into play, a potential slowdown might manifest.

Real-world Implications: Python's Sweet Spot and C++ Precision

Consider a scenario where a product employs OpenCV for Advanced Driver Assistance Systems (ADAS), requiring real-time processing. Here, Python might take a back seat due to its slower execution compared to C++. The inherent performance optimization in the C++ API and Python modules might not suffice for applications demanding robust performance.

Python's Playground and C++'s Realm of Robustness

Where does each language shine? Python thrives in scenarios where rapid prototyping is paramount, and performance is a secondary concern. It becomes an invaluable asset for proof of concepts and prototype applications.

On the flip side, when crafting a robust application demanding performance, real-time processing, and meticulous memory management, C++ emerges as the undisputed champion. Most production-ready applications harnessing the prowess of OpenCV are meticulously crafted in C++.

Key Takeaways: The Synergy of C++ and Python

Ultimately, the true potential lies in mastering both languages. Python's agility facilitates swift prototyping, while C++ steps in for the production-ready heavyweight. This synergistic approach allows developers to harness the unique strengths of both, ensuring a seamless journey from conceptualization to implementation. Embrace the power of both C++ and Python to unlock the full spectrum of OpenCV's capabilities.

Thank you for reading! Connect with me on LinkedIn for more insights on OpenCV, computer vision, and software development.

C++ Interop enables calling C++ code from C# code by utilizing various techniques and libraries provided by the .NET Framework, including Platform Invocation Services (P/Invoke), COM Interop, and C++/CLI.

What are the benefits of C++ Interops in C#?

There are several benefits of using C++ Interops functionality in C# code, they are described below.

1. By reusing existing C++ code that is already available, we can avoid the need to develop the same functionality from scratch for C#, resulting in significant time and effort savings.

2. C++ Interop in C# allows us to leverage the low-level hardware and memory manipulation capabilities of C++, enabling us to access them directly from our C# application.

3. When performance is crucial and there is a need to optimize code, C++ Interop in C# can be utilized to leverage the power of C++ and improve the application's performance.

4. C++ Interop in C# allows for seamless integration of third-party C++ libraries into your C# application. Additionally, it enables access to system-specific libraries, such as User32.dll and system32.dll.

How to use C++ Interop functionality in C# and how we can create Interop DLL in C++?

Create a C++ dll project and add the following code to the header file, I have added it as CustomClass.h.

#pragma once
#include <iostream>

#ifdef CPPDEMOLIB_EXPORTS
#define DemoLib __declspec(dllexport)
#else
#define DemoLib __declspec(dllimport)
#endif // CPPDEMOLIB_EXPORTS

using namespace std;

DemoLib class CustomClassLib
{
public:
    CustomClassLib();
    int AddNumbers(int num1, int num2);
    void DisplayMessage(char* message, char* buffer);
    ~CustomClassLib();
};

extern "C" DemoLib CustomClassLib * Initialize() { return new CustomClassLib(); }
extern "C" DemoLib int AddNumbers(CustomClassLib classObj, int num1, int num2) { return classObj.AddNumbers(num1, num2); }
extern "C" DemoLib void DisplayMessage(CustomClassLib classObj, char* message, char* buffer) { classObj.DisplayMessage(message, buffer); }
extern "C" DemoLib void DeleteObj(CustomClassLib * classObj) { delete classObj; }

This code defines a C++ class called CustomClassLib that is intended to be used in a C# project via a DLL. The code includes the standard input/output stream library, defines a header guard, and uses a preprocessor directive to check whether the DLL is being exported or imported.

The CustomClassLib class has three member functions: a constructor, an addition function, and a message display function, as well as a destructor. The DemoLib attribute is used to indicate whether the class is being compiled as a DLL or an executable.

External functions are defined using the "extern C" keyword to ensure they are exported with C-style naming, which makes it easier for the C# wrapper to access them. Overall, this code is designed to be compiled into a DLL that can be used in a C# project via a wrapper.

The add following code to the Source file, i.e. CustomClass.cpp.

#include "CustomClass.h"
#include <iostream>
#include <string>

using namespace std;

CustomClassLib::CustomClassLib() {
    cout << "Intialize Library" << endl;
}

int CustomClassLib::AddNumbers(int num1, int num2) {
    try
    {
        int _sum = num1 + num2;
        return _sum;
    }
    catch (const std::exception& e)
    {
        cout << "Error:" << e.what() << endl;
        return -1;
    }
}

void CustomClassLib::DisplayMessage(char* message, char* buffer) {
    try
    {
        char cArray[255];
        sprintf_s(cArray, "Hello, %s", message);
        strcpy_s(buffer, sizeof(cArray), cArray);
    }
    catch (const std::exception& e)
    {
        cout << "Error:" << e.what() << endl;
    }
}

CustomClassLib::~CustomClassLib() {
}

This code defines the member functions of a C++ class called CustomClassLib, which can be used in a C# project via a DLL.

The constructor function CustomClassLib() simply outputs a message to the console when the class is initialized.

The AddNumbers() function takes two integer arguments, adds them together, and returns their sum. It also includes error handling in case an exception is thrown.

The DisplayMessage() function takes a character array argument and writes a message to it, which is then copied to another character array buffer. Again, error handling is included.

The destructor function ~CustomClassLib() is empty.

Overall, this code provides basic functionality for the CustomClassLib class, allowing it to be used in a C# project via a DLL.

Now we need to use these Interop functions in a C# program for it, we can add the following code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.InteropServices;
using System.Text;
using System.Threading.Tasks;

namespace InteropDemo
{
    internal class Program
    {
        static void Main(string[] args)
        {
            IntPtr _myClassObj = ExternHelpers.Initialize();

            int sum = ExternHelpers.AddNumbers(_myClassObj, 100, 56);
            Console.WriteLine("From CPP -> AddNumbers :" + sum);

            StringBuilder sb=new StringBuilder(255);
            ExternHelpers.DisplayMessage(_myClassObj, "Have a wonderful day, keep learning.",sb);
            Console.WriteLine("From CPP -> Display Message: " + sb.ToString());


            ExternHelpers.DeleteObj(_myClassObj);

            Console.Read();
        }
    }

    public static class ExternHelpers
    {
        const string dllName = "CppDemoLib.dll";

        [DllImport(dllName)]
        public static extern IntPtr Initialize();

        [DllImport(dllName)]
        public static extern int AddNumbers(IntPtr myClassObj, int num1, int num2);

        [DllImport(dllName)]
        public static extern void DisplayMessage(IntPtr myClassObj, string message,StringBuilder responseMessage);

        [DllImport(dllName)]
        public static extern void DeleteObj(IntPtr myClassObj);
    }
}

This is a C# code that demonstrates how to use a C++ DLL in a C# project using interop. The C# program defines a class called "Program" with a Main method that calls several functions from a C++ DLL called "CppDemoLib.dll".

The program first initializes the DLL by calling the "Initialize" method from the DLL through the "ExternHelpers" class. Then it calls the "AddNumbers" method, which takes two integers as arguments and returns their sum. It also calls the "DisplayMessage" method, which takes a string message and a StringBuilder as arguments and writes the message to the StringBuilder.

Finally, it calls the "DeleteObj" method to clean up the instance of the C++ class. The interop is facilitated by the [DllImport] attribute which allows the C# program to access the functions in the C++ DLL.

Conclusion

Integrating C++ code in a C# project can seem daunting at first, but with the right tools and knowledge, it can be a powerful way to enhance your application's performance and functionality. By following the steps outlined in this blog post, you can get started with integrating C++ code in your C# project using DLLs.

S - Single Responsibility Principle (SRP)

The Single Responsibility Principle states that a class or module should have only one reason to change. In simple words, a class or library should be responsible for only one functionality or task.

Let's understand it with code, here we have a class it has implementation as shown in code.

public class Users
{
    public string UserId { get; set; }
    public string Username { get; set; }
    public string Password { get; set; }
    public int ProductId { get; set; }
    public string ProductName { get; set; }
    public string ProductDescription { get; set; }

    public void AuthenticateUser(string _username, string _password)
    {
        //Code implementation to authenticate user
    }

    public void AddProduct(int _productId, string _productName, string         _productDescription)
    {
        //Code implementation to add product
    }
}

Here the class User contains functionality as well as properties of User as well as of Product, which is not a scalable and maintainable approach.

As per SRP, we divide the functionality of User and Product so they do not interfere with each other's functionality, and also the class with have only reason to change when there is an addition or any modification related to it.

public class Users
{
    public string UserId { get; set; }
    public string Username { get; set; }
    public string Password { get; set; }

    public void AuthenticateUser(string _username, string _password)
    {
        //Code implementation to authenticate user
    }
}

public class Products
{
    public int ProductId { get; set; }
    public string ProductName { get; set; }
    public string ProductDescription { get; set; }

    public void AddProduct(int _productId, string _productName, string _productDescription)
    {
        //Code implementation to add product
    }
}

O - Open/Closed Principle (OCP)

The Open/Closed Principle states that classes or modules should be open for extension but closed for modification. In other words, once a class or module is created, it should not be modified directly. Instead, new functionality should be added through new code that extends the existing code.

Let us check an example of how OCP works.

public static class ExtensionClass
{
    public static bool Rename(this FileInfo fileInfo, string newName)
    {
        try
        {
            fileInfo.MoveTo(newName);
        }
        catch (Exception)
        {
            return false;
        }

        return true;
    }
}

We have added an extension method to FileInfo class which is available in the System.IO namespace, and it does not contain any method named Rename, so we have extended the FileInfo class.

FileInfo file = new FileInfo("test.txt");
file.Rename("newname.txt");

Now, Rename method can be accessed by creating an object of FileInfo.

L - Liskov Substitution Principle (LSP)

Liskov's Substitution Principle states that objects of a superclass should be able to be replaced with objects of a subclass without any problem.

The idea behind the LSP is to make code more flexible and easier to maintain. By ensuring that subclasses can be used interchangeably with their parent classes, we can write code that is more modular and easier to extend.

Let us understand it with a simple example

public class SuperHero
{
    //Implementation of SuperHero
}

public class Batman : SuperHero
{
    //Implementation of Batman
}

Here we have a SuperHero and Batman, where SuperHero is the base class and Batman is inheriting properties of SuperHero. As per Liskov Substitution Principle, we can initialize SuperHero with an instance of Batman.

SuperHero super = new Batman();

I - Interface Segregation Principle (ISP)

The Interface Segregation Principle states that no client should be forced to depend on methods it does not use. Segregation in simple words means separation.

In simpler words, this means that when creating interfaces, we should make sure that they are focused on specific functionality and only include methods that are relevant to that functionality. Classes that implement the interface should not be required to implement methods that they don't need or use.

public interface IDemoInterface
{
    void AddUser();
    void DeleteUser();
    string GetUser(int UserId);
    void AddProduct();
    void DeleteProduct();
    string GetProduct(int ProductId);
    double GetPrice(int ProductId);
}

Here in the above code if we want to implement IDemoInterface into our class that has user management functionality, we only require some implementation, rather than other unnecessary methods related to product management. So we can separate/segregate the interface, so we implement relevant functionality.

public interface IUser
{
    void AddUser();
    void DeleteUser();
    string GetUser(int UserId);
}

public interface IProduct
{
    void AddProduct();
    void DeleteProduct();
    string GetProduct(int ProductId);
    double GetPrice(int ProductId);
}

D - Dependency Inversion Principle (DIP)

The Dependency Inversion Principle suggests that high-level modules should not depend on low-level modules directly, but instead, both should depend on abstractions.

In simpler terms, DIP is about designing software in a way that allows for easy changes in the future. By abstracting away the implementation details of low-level components, changes to those components will not affect the high-level components that depend on them. This makes it easier to make changes to the system without causing unintended consequences.

Let's understand it using a simple example.

interface IDirectory
{
    List<string> GetDirectories();
}

public class FTPDirectory : IDirectory
{
    public List<string> GetDirectories()
    {
        //Implementation to get FTP Directories
    }
}

public class LocalDriveDirectory : IDirectory
{
    public List<string> GetDirectories()
    {
        //Implementation to get Local drive Directories
    }
}

Here we have an interface, which is being implemented by two classes FTPDirectory and LocalDriveDirectory. In the below code, we are injecting dependency using a constructor and accessing methods of Interface IDirectory, which is an abstraction for low-level classes FTPDirectory and LocalDriveDirectory.

public class DirectoryExplorer
{
    private readonly idirectory _directory;

    public directoryexplorer(idirectory directory)
    {
        _directory = directory;
    }

    public list<string> listdirectories()
    {
        return _directory.getdirectories();
    }
}

By using Dependency Inversion Principle, our high-level class is not directly dependent on low-level classes but depends on abstraction. This ensures decoupled, flexible and modular code. We can create instances of Directory Explorer in the following ways, based on our requirements.

DirectoryExplorer directoryExplorer = new DirectoryExplorer(new FTPDirectory());

DirectoryExplorer directoryExplorer = new DirectoryExplorer(new LocalDriveDirectory());

Thank you for taking the time to read our first blog post on writing clean code.

If you have any thoughts or suggestions on how we can improve our blog posts, please don't hesitate to let us know. We're always looking for ways to enhance our content and make it more engaging for our readers. If there's a topic you'd like us to cover in a future blog post, we'd love to hear your ideas.

You can leave a comment below or contact us directly through our website to share your thoughts. We look forward to hearing from you and continuing to provide valuable content for our readers.