# E-Commerce Recommendation System
## 技術棧
- Frontend: React 18 + TypeScript + Tailwind CSS
- Backend: Node.js + Express + MongoDB
- AI/ML: Python + scikit-learn + TensorFlow
- Infrastructure: Docker + Redis + AWS
## 開發規范
- 使用函數式組件和Hooks
- API遵循RESTful規范
- 數據庫采用文檔型設計
- 所有接口需要JWT認證
具體操作流程：
cd /e-commerce-recommend
codebuddy

javascript// routes/recommendations.js
router.get('/personalized/:userId', 
authenticateJWT,
rateLimiter,
async (req, res) => {
try {
const { userId } = req.params;
const { page = 1, limit = 10, category } = req.query;
// Redis緩存鍵
const cacheKey = `recommendations:${userId}:${page}:${limit}:${category || 'all'}`;
// 嘗試從緩存獲取
const cachedResult = await redis.get(cacheKey);
if (cachedResult) {
return res.json({
success: true,
data: JSON.parse(cachedResult),
source: 'cache'
});
}
// 調用推薦引擎
const recommendations = await recommendationService.getPersonalizedRecommendations(
userId, parseInt(limit), category
);
// 緩存結果 (15分鐘)
await redis.setex(cacheKey, 900, JSON.stringify(recommendations));
// 異步記錄推薦日志用于模型訓練
analyticsService.logRecommendationEvent(userId, recommendations);
res.json({
success: true,
data: recommendations,
source: 'fresh'
});
} catch (error) {
logger.error('Personalized recommendation error:', error);
res.status(500).json({
success: false,
message: 'Failed to get recommendations'
});
}
}
);

jsx// components/RecommendationCard.jsx
const RecommendationCard = ({ product, reason, onAddToCart, onToggleFavorite }) => {
const [imageLoaded, setImageLoaded] = useState(false);
const [isFavorited, setIsFavorited] = useState(product.isFavorited);
return (
<div className="bg-white rounded-lg shadow-md hover:shadow-lg transition-all duration-300 
group cursor-pointer transform hover:-translate-y-1">
{/* 商品圖片區域 */}
<div className="relative overflow-hidden rounded-t-lg">
{!imageLoaded && (
<div className="w-full h-48 bg-gray-200 animate-pulse flex items-center justify-center">
<svg className="w-10 h-10 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clipRule="evenodd" />
</svg>
</div>
)}
<img
src={product.imageUrl}
alt={product.name}
className={`w-full h-48 object-cover transition-opacity duration-300 ${
imageLoaded ? 'opacity-100' : 'opacity-0'
}`}
notallow={() => setImageLoaded(true)}
loading="lazy"
/>
{/* 推薦理由標簽 */}
<div className="absolute top-2 left-2">
<span className="bg-blue-500 text-white px-2 py-1 rounded-full text-xs font-medium">
{reason}
</span>
</div>
{/* 收藏按鈕 */}
<button
notallow={(e) => {
e.stopPropagation();
handleToggleFavorite();
}}
className="absolute top-2 right-2 p-2 bg-white/80 rounded-full hover:bg-white transition-colors"
>
<HeartIcon 
className={`w-5 h-5 transition-colors ${
isFavorited ? 'text-red-500 fill-current' : 'text-gray-400'
}`} 
/>
</button>
</div>
{/* 商品信息區域 */}
<div className="p-4">
<h3 className="text-lg font-semibold text-gray-900 mb-1 line-clamp-2">
{product.name}
</h3>
<p className="text-sm text-gray-500 mb-2 line-clamp-2">
{product.description}
</p>
{/* 價格和評分 */}
<div className="flex items-center justify-between mb-3">
<div className="flex items-center space-x-2">
<span className="text-xl font-bold text-red-500">
￥{product.currentPrice}
</span>
{product.originalPrice && product.originalPrice !== product.currentPrice && (
<span className="text-sm text-gray-400 line-through">
￥{product.originalPrice}
</span>
)}
</div>
<div className="flex items-center">
<StarIcon className="w-4 h-4 text-yellow-400 fill-current" />
<span className="text-sm text-gray-600 ml-1">{product.rating}</span>
</div>
</div>
{/* 操作按鈕 */}
<button
notallow={handleAddToCart}
className="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg 
transition-colors flex items-center justify-center space-x-2
disabled:bg-gray-400 disabled:cursor-not-allowed"
>
<ShoppingCartIcon className="w-5 h-5" />
<span>加入購物車</span>
</button>
</div>
</div>
);
};

javascript// middleware/performanceMonitor.js
const performanceMonitor = (req, res, next) => {
const startTime = Date.now();
// 監控內存使用
const memoryUsage = process.memoryUsage();
res.on('finish', () => {
const duration = Date.now() - startTime;
const finalMemory = process.memoryUsage();
// 記錄性能指標
metrics.recordApiResponseTime(req.route?.path || req.path, duration);
metrics.recordMemoryUsage(finalMemory.heapUsed - memoryUsage.heapUsed);
// 慢查詢告警 (>500ms)
if (duration > 500) {
logger.warn('Slow API response', {
path: req.path,
method: req.method,
duration: duration,
userId: req.user?.id
});
}
});
next();
};

javascript// tests/recommendation.test.js
describe('推薦算法測試', () => {
test('協同過濾推薦準確性', async () => {
const userId = '60f1b2b3c4d5e6f7a8b9c0d1';
const recommendations = await recommendationEngine.getPersonalizedRecommendations(userId);
expect(recommendations).toHaveLength(10);
expect(recommendations[0]).toHaveProperty('product_id');
expect(recommendations[0]).toHaveProperty('score');
expect(recommendations[0].score).toBeGreaterThan(0.5);
// 驗證推薦商品不包含用戶已購買的商品
const userPurchases = await getUserPurchaseHistory(userId);
const recommendedIds = recommendations.map(r => r.product_id);
const overlap = recommendedIds.filter(id => userPurchases.includes(id));
expect(overlap).toHaveLength(0);
});
});

text# .github/workflows/deploy.yml
name: Deploy to Production
on:
push:
branches: [ main ]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '18'
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Run tests
run: npm run test:coverage
- name: Upload coverage to Codecov
uses: codecov/codecov-action@v3
build-and-deploy:
needs: test
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Build and push Docker image
run: |
docker build -t recommendation-system:${{ github.sha }} .
docker tag recommendation-system:${{ github.sha }} ${{ secrets.DOCKER_REGISTRY }}/recommendation-system:latest
docker push ${{ secrets.DOCKER_REGISTRY }}/recommendation-system:latest
- name: Deploy to Kubernetes
run: |
kubectl set image deployment/recommendation-api recommendation-api=${{ secrets.DOCKER_REGISTRY }}/recommendation-system:${{ github.sha }}
kubectl rollout status deployment/recommendation-api