.NET Core Web API for Order Management

/0 Comments/in /by

In today’s fast-paced world, real-time applications are critical for businesses. From stock tracking to e-commerce order management, the need for instant updates is ubiquitous. This blog demonstrates how to create a real-time Order Management System using .NET Core Web API, SignalR, and a simple Angular client.

1. Project Setup

Prerequisites

  • Install .NET SDK (at least .NET 6.0).
  • Install a database (e.g., SQL Server or SQLite).
  • Install an IDE like Visual Studio or Visual Studio Code.
  • Basic knowledge of C# and .NET Core.

Step 1: Create a New Web API Project

Run the following command to create a new Web API project:

bash
dotnet new webapi -n OrderManagementApi

Navigate to the project directory:

bash
cd OrderManagementApi

Step 2: Add Necessary NuGet Packages

Install SignalR and Entity Framework Core:

bash
dotnet add package Microsoft.AspNetCore.SignalR
dotnet add package Microsoft.EntityFrameworkCore
dotnet add package Microsoft.EntityFrameworkCore.SqlServer
dotnet add package Microsoft.EntityFrameworkCore.Tools

2. Design the API

Models

Create a Models folder and add an Order class:

csharp
public class Order
{
public int Id { get; set; }
public string ProductName { get; set; }
public int Quantity { get; set; }
public DateTime OrderDate { get; set; }
public string Status { get; set; }
}

DbContext

Create an OrderContext class in a Data folder:

csharp

using Microsoft.EntityFrameworkCore;

public class OrderContext : DbContext
{
public OrderContext(DbContextOptions<OrderContext> options) : base(options) { }

public DbSet<Order> Orders { get; set; }
}

Configure the database connection in appsettings.json:

json
"ConnectionStrings": {
"DefaultConnection": "Server=localhost;Database=OrderDB;Trusted_Connection=True;"
}

Update the Program.cs file to add DbContext:

csharp
builder.Services.AddDbContext<OrderContext>(options =>
options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection")));

API Controllers

Add an OrdersController:

csharp
[ApiController]
[Route("api/[controller]")]
public class OrdersController : ControllerBase
{
private readonly OrderContext _context;public OrdersController(OrderContext context)
{
_context = context;
}

[HttpGet]
public async Task<ActionResult<IEnumerable<Order>>> GetOrders()
{
return await _context.Orders.ToListAsync();
}

[HttpPost]
public async Task<ActionResult<Order>> AddOrder(Order order)
{
_context.Orders.Add(order);
await _context.SaveChangesAsync();
return CreatedAtAction(nameof(GetOrders), new { id = order.Id }, order);
}
}

3. Real-Time Updates with SignalR

Hub Configuration

Create an OrderHub class:

csharp

using Microsoft.AspNetCore.SignalR;

public class OrderHub : Hub
{
public async Task NotifyOrderCreated(Order order)
{
await Clients.All.SendAsync(“OrderCreated”, order);
}
}

Register SignalR in Program.cs:

csharp

builder.Services.AddSignalR();

app.MapHub<OrderHub>(“/orderHub”);

4. Angular Client for Real-Time Updates

Setup Angular Project

Install Angular CLI and create a new project:

bash
npm install -g @angular/cli
ng new order-management-client
cd order-management-client

Install SignalR client:

bash
npm install @microsoft/signalr

Service to Connect SignalR

Create an OrderService:

typescript
import { Injectable } from '@angular/core';
import * as signalR from '@microsoft/signalr';@Injectable({
providedIn: ‘root’,
})
export class OrderService {
private hubConnection: signalR.HubConnection;

constructor() {
this.hubConnection = new signalR.HubConnectionBuilder()
.withUrl(‘https://localhost:5001/orderHub’)
.build();

this.hubConnection.start().catch(err => console.error(err));
}

listenForNewOrders(callback: (order: any) => void) {
this.hubConnection.on(‘OrderCreated’, callback);
}
}

5. Testing the API

  • Use tools like Postman or Swagger to test API endpoints.
  • Test real-time updates by adding a new order and observing live updates on the Angular client.

6. Deployment

  • Host the .NET Core Web API on a cloud platform like Azure or AWS.
  • Deploy the Angular client on a platform like Netlify or Firebase.
0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *