Skip to content

UI_Implementation.md

Latest commit

 

History

History
539 lines (458 loc) · 16.3 KB

UI_Implementation.md

File metadata and controls

539 lines (458 loc) · 16.3 KB
Raw

UI Implementation Plan - DapperCleanSample

Proje Özeti

Bu plan, mevcut DapperCleanSample API'si için bir web UI implementasyonu içerir. API zaten hazýr ve çalýþýr durumda.

1. Teknoloji Önerisi

Seçenek Framework Açýklama
A Blazor WebAssembly .NET ekosisteminde kalýr, C# ile UI
B Blazor Server Daha hýzlý baþlangýç, server-side rendering
C React + TypeScript Modern, geniþ ekosistem
D Vue.js Öðrenmesi kolay, hafif

Önerilen: Blazor WebAssembly (Proje .NET 10, tutarlýlýk için)

2. API Base URL

https://localhost:7142

3. API Endpoints Özeti

Customers API

Method Endpoint Request Body Response
GET /api/customers - CustomerDto[]
GET /api/customers/paged?pageNumber=1&pageSize=10 - PagedResult<CustomerDto>
GET /api/customers/{id} - CustomerDto
GET /api/customers/email/{email} - CustomerDto
POST /api/customers CreateCustomerRequest { id: int }
PUT /api/customers/{id} UpdateCustomerRequest 204 No Content
DELETE /api/customers/{id} - 204 No Content

Products API

Method Endpoint Request Body Response
GET /api/products - ProductDto[]
GET /api/products/paged?pageNumber=1&pageSize=10 - PagedResult<ProductDto>
GET /api/products/{id} - ProductDto
POST /api/products CreateProductRequest { id: int }
PUT /api/products/{id} UpdateProductRequest 204 No Content
DELETE /api/products/{id} - 204 No Content

Orders API

Method Endpoint Request Body Response
GET /api/orders/paged?pageNumber=1&pageSize=10 - PagedResult<OrderDto>
GET /api/orders/{id} - OrderDto
GET /api/orders/{id}/details - OrderDto (with items)
GET /api/orders/customer/{customerId} - OrderDto[]
POST /api/orders CreateOrderRequest { id: int }
PATCH /api/orders/{id}/pay - 204 No Content
PATCH /api/orders/{id}/ship - 204 No Content
PATCH /api/orders/{id}/deliver - 204 No Content
PATCH /api/orders/{id}/cancel - 204 No Content
DELETE /api/orders/{id} - 204 No Content

4. DTO Modelleri

// Customer
interface CustomerDto {
  id: number;
  name: string;
  email: string;
  createdAt: string;
}

interface CreateCustomerRequest {
  name: string;
  email: string;
}

interface UpdateCustomerRequest {
  name: string;
  email: string;
}

// Product
interface ProductDto {
  id: number;
  name: string;
  price: number;
  createdAt: string;
}

interface CreateProductRequest {
  name: string;
  price: number;
}

interface UpdateProductRequest {
  name: string;
  price: number;
}

// Order
interface OrderDto {
  id: number;
  customerId: number;
  orderDate: string;
  status: OrderStatus;
  createdAt: string;
  items?: OrderItemDto[];
}

interface OrderItemDto {
  id: number;
  orderId: number;
  productId: number;
  quantity: number;
  unitPrice: number;
  totalPrice: number;
}

interface CreateOrderRequest {
  customerId: number;
  items: CreateOrderItemRequest[];
}

interface CreateOrderItemRequest {
  productId: number;
  quantity: number;
  unitPrice: number;
}

// Enums
enum OrderStatus {
  Pending = 0,
  Paid = 1,
  Shipped = 2,
  Delivered = 3,
  Cancelled = 4
}

// Pagination
interface PagedResult<T> {
  items: T[];
  pageNumber: number;
  pageSize: number;
  totalCount: number;
  totalPages: number;
}

5. UI Sayfalarý

5.1 Dashboard (/)

???????????????????????????????????????????????????????????????
?  DASHBOARD                                                  ?
???????????????????????????????????????????????????????????????
?  ???????????????  ???????????????  ???????????????         ?
?  ?  Customers  ?  ?  Products   ?  ?   Orders    ?         ?
?  ?     12      ?  ?     45      ?  ?     28      ?         ?
?  ???????????????  ???????????????  ???????????????         ?
?                                                             ?
?  Son Sipariþler                                             ?
?  ???????????????????????????????????????????????????????   ?
?  ? #  ? Customer    ? Date       ? Status    ? Total  ?   ?
?  ? 1  ? John Doe    ? 2024-01-15 ? Pending   ? $150   ?   ?
?  ? 2  ? Jane Smith  ? 2024-01-14 ? Shipped   ? $280   ?   ?
?  ???????????????????????????????????????????????????????   ?
???????????????????????????????????????????????????????????????

5.2 Customers Sayfasý (/customers)

???????????????????????????????????????????????????????????????
?  CUSTOMERS                              [+ New Customer]    ?
???????????????????????????????????????????????????????????????
?  Search: [________________] [Search]                        ?
?                                                             ?
?  ???????????????????????????????????????????????????????   ?
?  ? ID ? Name        ? Email              ? Actions     ?   ?
?  ? 1  ? John Doe    ? john@example.com   ? [Edit][Del] ?   ?
?  ? 2  ? Jane Smith  ? jane@example.com   ? [Edit][Del] ?   ?
?  ? 3  ? Bob Wilson  ? bob@example.com    ? [Edit][Del] ?   ?
?  ???????????????????????????????????????????????????????   ?
?                                                             ?
?  [< Prev]  Page 1 of 5  [Next >]                           ?
???????????????????????????????????????????????????????????????

Modal: Create/Edit Customer

???????????????????????????????????
?  New Customer              [X] ?
???????????????????????????????????
?  Name:  [________________]     ?
?  Email: [________________]     ?
?                                ?
?  [Cancel]  [Save]              ?
???????????????????????????????????

5.3 Products Sayfasý (/products)

???????????????????????????????????????????????????????????????
?  PRODUCTS                                 [+ New Product]   ?
???????????????????????????????????????????????????????????????
?  ???????????????????????????????????????????????????????   ?
?  ? ID ? Name        ? Price      ? Created    ?Actions ?   ?
?  ? 1  ? Laptop      ? $15,000    ? 2024-01-10 ?[Ed][De]?   ?
?  ? 2  ? Mouse       ? $250       ? 2024-01-11 ?[Ed][De]?   ?
?  ? 3  ? Keyboard    ? $450       ? 2024-01-12 ?[Ed][De]?   ?
?  ???????????????????????????????????????????????????????   ?
?                                                             ?
?  [< Prev]  Page 1 of 3  [Next >]                           ?
???????????????????????????????????????????????????????????????

Modal: Create/Edit Product

???????????????????????????????????
?  New Product               [X] ?
???????????????????????????????????
?  Name:  [________________]     ?
?  Price: [________________]     ?
?                                ?
?  [Cancel]  [Save]              ?
???????????????????????????????????

5.4 Orders Sayfasý (/orders)

???????????????????????????????????????????????????????????????
?  ORDERS                                    [+ New Order]    ?
???????????????????????????????????????????????????????????????
?  Filter: [All Statuses v]  Customer: [All v]               ?
?                                                             ?
?  ???????????????????????????????????????????????????????   ?
?  ? ID ? Customer  ? Date       ? Status  ? Total ?Act. ?   ?
?  ? 1  ? John Doe  ? 2024-01-15 ? Pending ? $150  ?[Vw] ?   ?
?  ? 2  ? Jane S.   ? 2024-01-14 ? Paid    ? $280  ?[Vw] ?   ?
?  ? 3  ? Bob W.    ? 2024-01-13 ? Shipped ? $500  ?[Vw] ?   ?
?  ???????????????????????????????????????????????????????   ?
?                                                             ?
?  [< Prev]  Page 1 of 10  [Next >]                          ?
???????????????????????????????????????????????????????????????

5.5 Order Detail Sayfasý (/orders/{id})

???????????????????????????????????????????????????????????????
?  ORDER #1                                    [Back]         ?
???????????????????????????????????????????????????????????????
?  Customer: John Doe                                         ?
?  Date: 2024-01-15                                          ?
?  Status: [Pending] -> [Pay] [Cancel]                       ?
?                                                             ?
?  Items:                                                     ?
?  ???????????????????????????????????????????????????????   ?
?  ? Product     ? Quantity ? Unit Price ? Total        ?   ?
?  ? Laptop      ? 1        ? $15,000    ? $15,000      ?   ?
?  ? Mouse       ? 2        ? $250       ? $500         ?   ?
?  ???????????????????????????????????????????????????????   ?
?                                                             ?
?  Total: $15,500                                             ?
?                                                             ?
?  Status Actions:                                            ?
?  [Pending] --[Pay]--> [Paid] --[Ship]--> [Shipped]         ?
?       |                  |           --[Deliver]--> [Done] ?
?       +--[Cancel]--------+                                 ?
???????????????????????????????????????????????????????????????

5.6 New Order Sayfasý (/orders/new)

???????????????????????????????????????????????????????????????
?  NEW ORDER                                                  ?
???????????????????????????????????????????????????????????????
?  Customer: [Select Customer v]                              ?
?                                                             ?
?  Items:                                                     ?
?  ???????????????????????????????????????????????????????   ?
?  ? Product [Select v] ? Qty [__] ? Price [____] ? [X]  ?   ?
?  ? Product [Select v] ? Qty [__] ? Price [____] ? [X]  ?   ?
?  ???????????????????????????????????????????????????????   ?
?  [+ Add Item]                                               ?
?                                                             ?
?  Total: $0.00                                               ?
?                                                             ?
?  [Cancel]  [Create Order]                                   ?
???????????????????????????????????????????????????????????????

6. Navigasyon Yapýsý

???????????????
?   LOGO      ?
???????????????
? Dashboard   ?  -> /
? Customers   ?  -> /customers
? Products    ?  -> /products
? Orders      ?  -> /orders
???????????????

7. API Service Katmaný

// customerService.ts
const API_BASE = 'https://localhost:7142';

export const customerService = {
  getAll: () => fetch(`${API_BASE}/api/customers`),
  getPaged: (page: number, size: number) => 
    fetch(`${API_BASE}/api/customers/paged?pageNumber=${page}&pageSize=${size}`),
  getById: (id: number) => fetch(`${API_BASE}/api/customers/${id}`),
  getByEmail: (email: string) => fetch(`${API_BASE}/api/customers/email/${email}`),
  create: (data: CreateCustomerRequest) => 
    fetch(`${API_BASE}/api/customers`, { 
      method: 'POST', 
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data) 
    }),
  update: (id: number, data: UpdateCustomerRequest) => 
    fetch(`${API_BASE}/api/customers/${id}`, { 
      method: 'PUT', 
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data) 
    }),
  delete: (id: number) => 
    fetch(`${API_BASE}/api/customers/${id}`, { method: 'DELETE' }),
};

// productService.ts
export const productService = {
  getAll: () => fetch(`${API_BASE}/api/products`),
  getPaged: (page: number, size: number) => 
    fetch(`${API_BASE}/api/products/paged?pageNumber=${page}&pageSize=${size}`),
  getById: (id: number) => fetch(`${API_BASE}/api/products/${id}`),
  create: (data: CreateProductRequest) => 
    fetch(`${API_BASE}/api/products`, { 
      method: 'POST', 
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data) 
    }),
  update: (id: number, data: UpdateProductRequest) => 
    fetch(`${API_BASE}/api/products/${id}`, { 
      method: 'PUT', 
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data) 
    }),
  delete: (id: number) => 
    fetch(`${API_BASE}/api/products/${id}`, { method: 'DELETE' }),
};

// orderService.ts
export const orderService = {
  getPaged: (page: number, size: number) => 
    fetch(`${API_BASE}/api/orders/paged?pageNumber=${page}&pageSize=${size}`),
  getById: (id: number) => fetch(`${API_BASE}/api/orders/${id}`),
  getWithItems: (id: number) => fetch(`${API_BASE}/api/orders/${id}/details`),
  getByCustomer: (customerId: number) => 
    fetch(`${API_BASE}/api/orders/customer/${customerId}`),
  create: (data: CreateOrderRequest) => 
    fetch(`${API_BASE}/api/orders`, { 
      method: 'POST', 
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data) 
    }),
  markAsPaid: (id: number) => 
    fetch(`${API_BASE}/api/orders/${id}/pay`, { method: 'PATCH' }),
  ship: (id: number) => 
    fetch(`${API_BASE}/api/orders/${id}/ship`, { method: 'PATCH' }),
  deliver: (id: number) => 
    fetch(`${API_BASE}/api/orders/${id}/deliver`, { method: 'PATCH' }),
  cancel: (id: number) => 
    fetch(`${API_BASE}/api/orders/${id}/cancel`, { method: 'PATCH' }),
  delete: (id: number) => 
    fetch(`${API_BASE}/api/orders/${id}`, { method: 'DELETE' }),
};

8. UI Component Listesi

Component Açýklama
Layout Ana layout, sidebar, header
DataTable Pagination destekli tablo
Modal Create/Edit modal
ConfirmDialog Silme onayý
StatusBadge Order status gösterimi
Pagination Sayfalama kontrolü
LoadingSpinner Yüklenme animasyonu
Toast/Notification Baþarý/hata mesajlarý
Form Validasyonlu form
Select/Dropdown Customer/Product seçimi

9. Order Status Workflow

???????????     ????????     ???????????     ?????????????
? Pending ?---->? Paid ?---->? Shipped ?---->? Delivered ?
???????????     ????????     ???????????     ?????????????
     ?             ?
     ?  ????????????
     ?  ?
     v  v
?????????????
? Cancelled ?
?????????????

Status Renkleri:

  • Pending: yellow/warning
  • Paid: blue/info
  • Shipped: purple
  • Delivered: green/success
  • Cancelled: red/danger

10. CORS Ayarý (API Tarafýnda Gerekli)

API'ye CORS eklenmelidir:

// Program.cs'e eklenecek
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowUI", policy =>
    {
        policy.WithOrigins("http://localhost:3000", "http://localhost:5173")
              .AllowAnyHeader()
              .AllowAnyMethod();
    });
});

// app.UseHttpsRedirection(); satýrýndan önce
app.UseCors("AllowUI");

11. Proje Klasör Yapýsý (Önerilen)

ui/
??? src/
?   ??? components/
?   ?   ??? Layout/
?   ?   ??? DataTable/
?   ?   ??? Modal/
?   ?   ??? StatusBadge/
?   ?   ??? ...
?   ??? pages/
?   ?   ??? Dashboard/
?   ?   ??? Customers/
?   ?   ??? Products/
?   ?   ??? Orders/
?   ??? services/
?   ?   ??? customerService.ts
?   ?   ??? productService.ts
?   ?   ??? orderService.ts
?   ??? types/
?   ?   ??? index.ts
?   ??? hooks/
?   ?   ??? useApi.ts
?   ??? App.tsx
??? package.json
??? README.md

12. Önemli Notlar

  1. API Zaten Hazýr - Tüm endpoint'ler çalýþýr durumda
  2. SQLite DB - app.db dosyasý API baþlatýldýðýnda otomatik oluþur
  3. Scalar UI - API test için https://localhost:7142/scalar/v1 kullanýlabilir
  4. Validation - Backend'de validation var, frontend'de de olmalý
  5. Error Handling - 404, 400 durumlarý handle edilmeli

13. Test Senaryolarý

Customer Tests

  • Müþteri listesi görüntüleme
  • Sayfalama çalýþýyor
  • Yeni müþteri oluþturma
  • Müþteri güncelleme
  • Müþteri silme
  • Email ile arama

Product Tests

  • Ürün listesi görüntüleme
  • Sayfalama çalýþýyor
  • Yeni ürün oluþturma
  • Ürün güncelleme
  • Ürün silme

Order Tests

  • Sipariþ listesi görüntüleme
  • Sipariþ detayý görüntüleme
  • Yeni sipariþ oluþturma (çoklu item)
  • Sipariþ ödeme (Pending -> Paid)
  • Sipariþ kargolama (Paid -> Shipped)
  • Sipariþ teslim (Shipped -> Delivered)
  • Sipariþ iptal (Pending/Paid -> Cancelled)
  • Müþteriye göre filtreleme

Created for DapperCleanSample Project