160 lines
4.6 KiB
Markdown
160 lines
4.6 KiB
Markdown
|
# Company Uygulaması API Entegrasyonu
|
|||
|
|
|
|||
|
|
Bu dokümantasyon, Company uygulamasına yapılan API entegrasyonu, üyelik sistemi, forum ve dinamik blog özelliklerini açıklamaktadır.
|
|||
|
|
|
|||
|
|
## 🚀 Yapılan Değişiklikler
|
|||
|
|
|
|||
|
|
### 1. API Entegrasyonu
|
|||
|
|
- **Axios** ve **React Query** kullanılarak API yapısı kuruldu
|
|||
|
|
- API servis katmanı oluşturuldu (`/src/services/api/`)
|
|||
|
|
- Interceptor'lar ile otomatik token yönetimi eklendi
|
|||
|
|
|
|||
|
|
### 2. Üyelik Sistemi
|
|||
|
|
- **Zustand** ile state management kuruldu
|
|||
|
|
- Login ve Register sayfaları oluşturuldu
|
|||
|
|
- JWT token tabanlı authentication sistemi entegre edildi
|
|||
|
|
- Protected route yapısı kuruldu
|
|||
|
|
|
|||
|
|
### 3. Forum Sistemi
|
|||
|
|
- Kapsamlı forum sayfası oluşturuldu
|
|||
|
|
- Kategori, konu ve mesaj yönetimi
|
|||
|
|
- Like, pin, lock gibi özellikler
|
|||
|
|
- Etiket sistemi
|
|||
|
|
|
|||
|
|
### 4. Dinamik Blog
|
|||
|
|
- Static blog yapısı dinamik hale getirildi
|
|||
|
|
- Kategori filtreleme
|
|||
|
|
- Arama özelliği
|
|||
|
|
- Sayfalama (pagination)
|
|||
|
|
- Etiket sistemi
|
|||
|
|
|
|||
|
|
## 📦 Yeni Eklenen Paketler
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"axios": "^1.6.5",
|
|||
|
|
"@tanstack/react-query": "^5.17.9",
|
|||
|
|
"zustand": "^4.4.7",
|
|||
|
|
"react-hook-form": "^7.48.2",
|
|||
|
|
"date-fns": "^3.2.0",
|
|||
|
|
"react-markdown": "^9.0.1",
|
|||
|
|
"react-hot-toast": "^2.4.1"
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 🛠️ Kurulum
|
|||
|
|
|
|||
|
|
1. Paketleri yükleyin:
|
|||
|
|
```bash
|
|||
|
|
cd company
|
|||
|
|
npm install
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
2. Environment değişkenlerini ayarlayın:
|
|||
|
|
```env
|
|||
|
|
VITE_API_URL=http://localhost:44328
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 📁 Yeni Dosya Yapısı
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
company/src/
|
|||
|
|
├── services/
|
|||
|
|
│ └── api/
|
|||
|
|
│ ├── config.ts # Axios yapılandırması
|
|||
|
|
│ ├── auth.service.ts # Authentication servisi
|
|||
|
|
│ ├── blog.service.ts # Blog API servisi
|
|||
|
|
│ └── forum.service.ts # Forum API servisi
|
|||
|
|
├── store/
|
|||
|
|
│ └── authStore.ts # Zustand auth store
|
|||
|
|
├── pages/
|
|||
|
|
│ ├── Login.tsx # Giriş sayfası
|
|||
|
|
│ ├── Register.tsx # Kayıt sayfası
|
|||
|
|
│ ├── Forum.tsx # Forum ana sayfası
|
|||
|
|
│ └── Blog.tsx # Dinamik blog sayfası (güncellendi)
|
|||
|
|
└── components/
|
|||
|
|
└── layout/
|
|||
|
|
└── Header.tsx # Auth butonları eklendi
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 🔐 Authentication Akışı (UI Uygulaması ile Aynı)
|
|||
|
|
|
|||
|
|
1. Kullanıcı login sayfasından giriş yapar
|
|||
|
|
2. OAuth2 `/connect/token` endpoint'i kullanılarak token alınır
|
|||
|
|
3. Access token ve refresh token localStorage'a kaydedilir
|
|||
|
|
4. `/api/abp/application-configuration` endpoint'inden kullanıcı bilgileri çekilir
|
|||
|
|
5. Axios interceptor ile her istekte:
|
|||
|
|
- Authorization header'a Bearer token eklenir
|
|||
|
|
- `__tenant` header'a tenant ID eklenir (multi-tenancy desteği)
|
|||
|
|
6. Protected route'lar için authentication kontrolü yapılır
|
|||
|
|
7. Token expire olduğunda refresh token ile yenilenir
|
|||
|
|
8. Refresh token da expire olduysa otomatik logout
|
|||
|
|
|
|||
|
|
### OAuth2 Parametreleri
|
|||
|
|
- **grant_type**: password
|
|||
|
|
- **scope**: offline_access Platform
|
|||
|
|
- **client_id**: Platform_App
|
|||
|
|
- **client_secret**: 1q2w3e*
|
|||
|
|
|
|||
|
|
## 🌟 Özellikler
|
|||
|
|
|
|||
|
|
### Forum
|
|||
|
|
- Kategori bazlı konu listeleme
|
|||
|
|
- Yeni konu açma
|
|||
|
|
- Konulara cevap yazma
|
|||
|
|
- Like/Unlike
|
|||
|
|
- Pin/Unpin (moderatör)
|
|||
|
|
- Lock/Unlock (moderatör)
|
|||
|
|
- Çözüldü olarak işaretleme
|
|||
|
|
- Etiket sistemi
|
|||
|
|
- Arama özelliği
|
|||
|
|
|
|||
|
|
### Blog
|
|||
|
|
- Dinamik içerik yönetimi
|
|||
|
|
- Kategori filtreleme
|
|||
|
|
- Arama
|
|||
|
|
- Sayfalama
|
|||
|
|
- Yorum sistemi
|
|||
|
|
- Like sistemi
|
|||
|
|
- Etiketler
|
|||
|
|
|
|||
|
|
## 🔄 API Endpoints
|
|||
|
|
|
|||
|
|
### Authentication (UI ile Aynı Endpoint'ler)
|
|||
|
|
- `POST /connect/token` - OAuth2 token endpoint (Login & Refresh)
|
|||
|
|
- `POST /api/account/register` - Register
|
|||
|
|
- `GET /api/abp/application-configuration` - Current user & app config
|
|||
|
|
|
|||
|
|
### Blog
|
|||
|
|
- `GET /api/app/blog/posts` - Blog listesi
|
|||
|
|
- `GET /api/app/blog/posts/:id` - Blog detay
|
|||
|
|
- `GET /api/app/blog/categories` - Kategoriler
|
|||
|
|
- `POST /api/app/blog/comments` - Yorum ekle
|
|||
|
|
|
|||
|
|
### Forum
|
|||
|
|
- `GET /api/app/forum/categories` - Forum kategorileri
|
|||
|
|
- `GET /api/app/forum/topics` - Konu listesi
|
|||
|
|
- `POST /api/app/forum/topics` - Yeni konu
|
|||
|
|
- `GET /api/app/forum/topics/:id/posts` - Konu mesajları
|
|||
|
|
- `POST /api/app/forum/posts` - Yeni mesaj
|
|||
|
|
|
|||
|
|
## ⚠️ Dikkat Edilmesi Gerekenler
|
|||
|
|
|
|||
|
|
1. **UI uygulaması ile aynı auth yapısı kullanılıyor** - Aynı token'lar ve endpoint'ler
|
|||
|
|
2. Blog ve Forum API endpoint'leri henüz backend'de implement edilmemiş olabilir
|
|||
|
|
3. CORS ayarlarının yapılması gerekebilir (Company domain'i için)
|
|||
|
|
4. Production için environment değişkenlerinin güncellenmesi gerekir
|
|||
|
|
5. Error handling mekanizmaları geliştirilmeli
|
|||
|
|
6. Multi-tenancy desteği aktif - Tenant header'ı otomatik ekleniyor
|
|||
|
|
|
|||
|
|
## 🚧 Yapılacaklar
|
|||
|
|
|
|||
|
|
- [ ] Backend API endpoint'lerinin implement edilmesi
|
|||
|
|
- [ ] Profil sayfası oluşturulması
|
|||
|
|
- [ ] Forum moderasyon paneli
|
|||
|
|
- [ ] Blog admin paneli
|
|||
|
|
- [ ] Bildirim sistemi
|
|||
|
|
- [ ] Real-time özellikler (WebSocket)
|
|||
|
|
- [ ] Dosya yükleme sistemi
|
|||
|
|
- [ ] Gelişmiş arama özellikleri
|