{"id":43731,"date":"2022-12-19T10:05:00","date_gmt":"2022-12-19T18:05:00","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/dotnet\/?p=43731"},"modified":"2023-01-17T15:52:53","modified_gmt":"2023-01-17T23:52:53","slug":"build-your-own-podcast-app-with-dotnet-blazor-and-dotnet-maui","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/dotnet\/build-your-own-podcast-app-with-dotnet-blazor-and-dotnet-maui\/","title":{"rendered":"Build Your Own Podcast App with .NET 7, Blazor, and .NET MAUI"},"content":{"rendered":"

The .NET Podcast app<\/a> was first introduced at .NET Conf 2021 and recently updated to highlight new features in .NET 7 at the .NET Conf 2022 keynote<\/a>. The podcast app is ready to use sample application that showcases .NET, ASP.NET Core, Blazor, .NET MAUI, Azure Container Apps, Orleans, Power Platform, Playwright, and more. In this post, I’ll explain all the new features and show how we upgraded the .NET Podcast app to take advantage of them.<\/p>\n

\".NET<\/p>\n

Architecture<\/h2>\n

As mentioned, the .NET Podcast app uses a cloud-native architecture to power the mobile, desktop, and web apps. Microservices were used for the worker services that add and update the podcasts feeds and the APIs that serve up data to the apps. These are all powered by Azure Container Apps<\/a> to dynamically scale the microservices based on the different characteristics of each service.<\/p>\n

\"Architecture<\/p>\n

There is a lot more to the .NET Podcast app including integration into Azure SQL Server for our database, Azure Storage to save images and queuing submissions, and Azure API Management to leverage the APIs in Power Apps and Power Automate.<\/p>\n

API Updates<\/h2>\n

The .NET Podcast APIs have been updated to use the latest features in ASP.NET Core including Output Cache<\/a>, Rate Limiting<\/a>, API Versioning<\/a>, and new Route Groups for Minimal APIs<\/a>. Additionally, it integrates the latest enhancements with authentication and authorization that great simplifies these features for developers.<\/p>\n

\/\/ Authentication and authorization-related services\n\nbuilder.Services.AddMicrosoftIdentityWebApiAuthentication(builder.Configuration);\n\nbuilder.Services.AddAuthorizationBuilder().AddPolicy(\"modify_feeds\", policy => policy.RequireScope(\"API.Access\"));\n\n\/\/ OpenAPI and versioning-related services\nbuilder.Services.AddSwaggerGen();\nbuilder.Services.Configure<SwaggerGeneratorOptions>(opts =>\n{\n    opts.InferSecuritySchemes = true;\n});\nbuilder.Services.AddEndpointsApiExplorer();\nbuilder.Services.AddApiVersioning(options =>\n{\n    options.DefaultApiVersion = new ApiVersion(2, 0);\n    options.ReportApiVersions = true;\n    options.AssumeDefaultVersionWhenUnspecified = true;\n    options.ApiVersionReader = new HeaderApiVersionReader(\"api-version\");\n});\n\n\/\/ Enable Output Cache\nbuilder.Services.AddOutputCache();\n\n\/\/ Rate-limiting and output caching-related services\nbuilder.Services.AddRateLimiter(options => options.AddFixedWindowLimiter(\"feeds\", options =>\n{\n    options.PermitLimit = 5;\n    options.QueueProcessingOrder = QueueProcessingOrder.OldestFirst;\n    options.QueueLimit = 0;\n    options.Window = TimeSpan.FromSeconds(2);\n    options.AutoReplenishment = false;\n}));\n\n\/\/ Create version set\nvar versionSet = app.NewApiVersionSet()\n                    .HasApiVersion(1.0)\n                    .HasApiVersion(2.0)\n                    .ReportApiVersions()\n                    .Build();\n\n\/\/ create new mapping for apis\nvar shows = app.MapGroup(\"\/shows\");\n\nshows\n    .MapShowsApi()\n    .WithApiVersionSet(versionSet)\n    .MapToApiVersion(1.0)\n    .MapToApiVersion(2.0);<\/code><\/pre>\n
Looking for more updates with APIs in .NET 7? Checkout the Making the Most of Minimal APIs in .NET 7<\/a> from .NET Conf.<\/p>\n
Observability & Monitoring<\/h2>\n
Once you have built and deployed your services, you need to observe and monitor them. During the keynote we showed how to integrate Open Telemetry, Azure Monitor, and more in just a few lines of code to completely instrument your services.<\/p>\n
builder.Services.AddOpenTelemetryTracing(tracing =>\n        tracing.SetResourceBuilder(serviceResource)\n        .AddAzureMonitorTraceExporter(o =>\n        {\n            o.ConnectionString = azureMonitorConnectionString;\n        })\n        .AddJaegerExporter()\n        .AddHttpClientInstrumentation()\n        .AddAspNetCoreInstrumentation()\n        .AddEntityFrameworkCoreInstrumentation()\n    );\n\nbuilder.Services.AddOpenTelemetryMetrics(metrics =>\n{\n    metrics\n    .SetResourceBuilder(serviceResource)\n    .AddPrometheusExporter()\n    .AddAzureMonitorMetricExporter(o =>\n    {\n        o.ConnectionString = azureMonitorConnectionString;\n    })\n    .AddAspNetCoreInstrumentation()\n    .AddHttpClientInstrumentation()\n    .AddRuntimeInstrumentation()\n    .AddProcessInstrumentation()\n    .AddHttpClientInstrumentation()\n    .AddEventCountersInstrumentation(ec =>\n    {\n        ec.AddEventSources(\"Microsoft.AspNetCore.Hosting\");\n    });\n});\n\nbuilder.Logging.AddOpenTelemetry(logging =>\n{\n    logging\n    .SetResourceBuilder(serviceResource)\n    .AddAzureMonitorLogExporter(o =>\n    {\n        o.ConnectionString = azureMonitorConnectionString;\n    })\n    .AttachLogsToActivityEvent();\n});<\/code><\/pre>\n
.NET SDK Containers<\/h2>\n
The .NET Podcast application is powered by microservices and containers. The .NET SDK can now containerize your app<\/a> with just a few configuration changes. This feature is now integrated into the services that power the .NET Podcast app and the CI\/CD pipeline as well.<\/p>\n
<PropertyGroup>\n    <ContainerImageName>podcastapi<\/ContainerImageName>\n<\/PropertyGroup>\n\n<ItemGroup>\n    <PackageReference Include=\"Microsoft.NET.Build.Containers\" Version=\"0.2.7\" \/>\n<\/ItemGroup><\/code><\/pre>\n
dotnet publish -c Release -r linux-x64 -p PublishProfile=DefaultContainer src\/Services\/Podcasts\/Podcast.API\/Podcast.API.csproj<\/code><\/pre>\n
If you are interested in containers and microservices be sure to watch some of these sessions from .NET Conf:<\/p>\n
    \n
  • Using .NET with Chiseled Ubuntu Containers<\/a><\/li>\n
  • Azure Container Apps with .NET<\/a><\/li>\n
  • State of Azure + .NET<\/a><\/li>\n<\/ul>\n
    Playwright Tests<\/h2>\n
    Playwright<\/a> is an open source testing framework from Microsoft that enables reliable end-to-end testing for modern web apps. As the team was working on backend and frontend updates, they wanted to ensure that the core scenarios of the podcast app didn’t break. They setup several Playwright tests and integrated it into their CI pipeline so they ran with every pull request. <\/p>\n
    \"Playwright<\/p>\n
    Checkout the session from .NET Conf<\/a> from Max and Debbie from the Playwright team on testing Blazor apps with Playwright:<\/p>\n