feat: secure and document book reviews system
Some checks failed
Dev Deployment (Zero Downtime) / deploy-dev (push) Failing after 10m3s
Some checks failed
Dev Deployment (Zero Downtime) / deploy-dev (push) Failing after 10m3s
Added rate limiting to APIs, cleaned up docs, implemented fallback logic for reviews without text, and added comprehensive n8n guide.
This commit is contained in:
146
docs/archive/N8N_CHAT_PRODUCTION_SETUP.md
Normal file
146
docs/archive/N8N_CHAT_PRODUCTION_SETUP.md
Normal file
@@ -0,0 +1,146 @@
|
||||
# 🔧 n8n Chat Setup für Production
|
||||
|
||||
## Problem: AI Chat funktioniert nicht auf Production
|
||||
|
||||
Wenn der AI Chat auf Production nicht funktioniert, liegt es meist an fehlenden Environment-Variablen.
|
||||
|
||||
## ✅ Lösung: Environment-Variablen in Gitea setzen
|
||||
|
||||
### Schritt 1: Gehe zu Gitea Repository Settings
|
||||
|
||||
1. Öffne: `https://git.dk0.dev/denshooter/portfolio/settings`
|
||||
2. Klicke auf **"Variables"** im linken Menü
|
||||
|
||||
### Schritt 2: Setze die n8n Variables
|
||||
|
||||
#### Variables (öffentlich):
|
||||
- **Name:** `N8N_WEBHOOK_URL`
|
||||
- **Value:** `https://n8n.dk0.dev`
|
||||
- **Protect:** ✅ (optional)
|
||||
|
||||
- **Name:** `N8N_API_KEY` (optional, falls dein n8n eine API-Key benötigt)
|
||||
- **Value:** Dein n8n API Key
|
||||
- **Protect:** ✅
|
||||
|
||||
#### Secrets (verschlüsselt):
|
||||
- **Name:** `N8N_SECRET_TOKEN`
|
||||
- **Value:** Dein n8n Secret Token (falls du einen verwendest)
|
||||
- **Protect:** ✅
|
||||
|
||||
### Schritt 3: Prüfe die n8n Webhook URL
|
||||
|
||||
Stelle sicher, dass dein n8n Workflow:
|
||||
1. **Aktiv** ist (Toggle oben rechts)
|
||||
2. Den Webhook-Pfad `/webhook/chat` hat
|
||||
3. Die vollständige URL ist: `https://n8n.dk0.dev/webhook/chat`
|
||||
|
||||
### Schritt 4: Teste die Webhook-URL direkt
|
||||
|
||||
```bash
|
||||
curl -X POST https://n8n.dk0.dev/webhook/chat \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"message": "Hello"}'
|
||||
```
|
||||
|
||||
Wenn du einen `N8N_SECRET_TOKEN` verwendest:
|
||||
|
||||
```bash
|
||||
curl -X POST https://n8n.dk0.dev/webhook/chat \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "Authorization: Bearer YOUR_SECRET_TOKEN" \
|
||||
-d '{"message": "Hello"}'
|
||||
```
|
||||
|
||||
### Schritt 5: Deploy neu starten
|
||||
|
||||
Nach dem Setzen der Variablen:
|
||||
1. Push einen Commit zum `production` Branch
|
||||
2. Oder manuell den Workflow in Gitea starten
|
||||
3. Die Variablen werden automatisch an den Container übergeben
|
||||
|
||||
## 🔍 Debugging
|
||||
|
||||
### Prüfe Container-Logs
|
||||
|
||||
```bash
|
||||
docker logs portfolio-app | grep -i n8n
|
||||
```
|
||||
|
||||
### Prüfe Environment-Variablen im Container
|
||||
|
||||
```bash
|
||||
docker exec portfolio-app env | grep N8N
|
||||
```
|
||||
|
||||
Sollte zeigen:
|
||||
```
|
||||
N8N_WEBHOOK_URL=https://n8n.dk0.dev
|
||||
N8N_SECRET_TOKEN=*** (wenn gesetzt)
|
||||
N8N_API_KEY=*** (wenn gesetzt)
|
||||
```
|
||||
|
||||
### Prüfe Browser-Konsole
|
||||
|
||||
Öffne die Browser-Konsole (F12) und schaue nach Fehlern beim Senden einer Chat-Nachricht.
|
||||
|
||||
### Prüfe Server-Logs
|
||||
|
||||
Die Chat-API loggt jetzt detaillierter:
|
||||
- Ob `N8N_WEBHOOK_URL` gesetzt ist
|
||||
- Die vollständige Webhook-URL (ohne Credentials)
|
||||
- HTTP-Fehler mit Status-Codes
|
||||
|
||||
## 🐛 Häufige Probleme
|
||||
|
||||
### Problem 1: "N8N_WEBHOOK_URL not configured"
|
||||
|
||||
**Lösung:** Variable in Gitea setzen (siehe Schritt 2)
|
||||
|
||||
### Problem 2: "n8n webhook failed: 404"
|
||||
|
||||
**Lösung:**
|
||||
- Prüfe, ob der n8n Workflow aktiv ist
|
||||
- Prüfe, ob der Webhook-Pfad `/webhook/chat` ist
|
||||
- Teste die URL direkt mit curl
|
||||
|
||||
### Problem 3: "n8n webhook failed: 401/403"
|
||||
|
||||
**Lösung:**
|
||||
- Prüfe, ob `N8N_SECRET_TOKEN` in Gitea Secrets gesetzt ist
|
||||
- Prüfe, ob der Token im n8n Workflow korrekt konfiguriert ist
|
||||
|
||||
### Problem 4: "Connection timeout"
|
||||
|
||||
**Lösung:**
|
||||
- Prüfe, ob n8n erreichbar ist: `curl https://n8n.dk0.dev`
|
||||
- Prüfe Firewall-Regeln
|
||||
- Prüfe, ob n8n im gleichen Netzwerk ist (Docker Network)
|
||||
|
||||
## 📝 Aktuelle Konfiguration
|
||||
|
||||
Die Chat-API verwendet:
|
||||
- **Webhook URL:** `${N8N_WEBHOOK_URL}/webhook/chat`
|
||||
- **Authentication:**
|
||||
- `Authorization: Bearer ${N8N_SECRET_TOKEN}` (wenn gesetzt)
|
||||
- `X-API-Key: ${N8N_API_KEY}` (wenn gesetzt)
|
||||
- **Timeout:** 30 Sekunden
|
||||
- **Fallback:** Wenn n8n nicht erreichbar ist, werden intelligente Fallback-Antworten verwendet
|
||||
|
||||
## ✅ Checkliste
|
||||
|
||||
- [ ] `N8N_WEBHOOK_URL` in Gitea Variables gesetzt
|
||||
- [ ] `N8N_SECRET_TOKEN` in Gitea Secrets gesetzt (falls benötigt)
|
||||
- [ ] `N8N_API_KEY` in Gitea Variables gesetzt (falls benötigt)
|
||||
- [ ] n8n Workflow ist aktiv
|
||||
- [ ] Webhook-Pfad ist `/webhook/chat`
|
||||
- [ ] Container wurde nach dem Setzen der Variablen neu deployed
|
||||
- [ ] Container-Logs zeigen keine n8n-Fehler
|
||||
|
||||
## 🚀 Nach dem Setup
|
||||
|
||||
Nach dem Setzen der Variablen und einem neuen Deployment sollte der Chat funktionieren. Falls nicht:
|
||||
|
||||
1. Prüfe die Container-Logs: `docker logs portfolio-app`
|
||||
2. Prüfe die Browser-Konsole für Client-seitige Fehler
|
||||
3. Teste die n8n Webhook-URL direkt mit curl
|
||||
4. Prüfe, ob die Environment-Variablen im Container gesetzt sind
|
||||
503
docs/archive/N8N_CHAT_SETUP.md
Normal file
503
docs/archive/N8N_CHAT_SETUP.md
Normal file
@@ -0,0 +1,503 @@
|
||||
# n8n + Ollama Chat Setup Guide
|
||||
|
||||
This guide explains how to set up the chat feature on your portfolio website using n8n workflows and Ollama for AI responses.
|
||||
|
||||
## Overview
|
||||
|
||||
The chat system works as follows:
|
||||
1. User sends a message via the chat widget on your website
|
||||
2. Message is sent to your Next.js API route (`/api/n8n/chat`)
|
||||
3. API forwards the message to your n8n webhook
|
||||
4. n8n processes the message and sends it to Ollama (local LLM)
|
||||
5. Ollama generates a response
|
||||
6. Response is returned through n8n back to the website
|
||||
7. User sees the AI response
|
||||
|
||||
## Prerequisites
|
||||
|
||||
- ✅ n8n instance running (you have: https://n8n.dk0.dev)
|
||||
- ✅ Ollama installed and running locally or on a server
|
||||
- ✅ Environment variables configured in `.env`
|
||||
|
||||
## Step 1: Set Up Ollama
|
||||
|
||||
### Install Ollama
|
||||
|
||||
```bash
|
||||
# macOS/Linux
|
||||
curl -fsSL https://ollama.com/install.sh | sh
|
||||
|
||||
# Or download from https://ollama.com/download
|
||||
```
|
||||
|
||||
### Pull a Model
|
||||
|
||||
```bash
|
||||
# For general chat (recommended)
|
||||
ollama pull llama3.2
|
||||
|
||||
# Or for faster responses (smaller model)
|
||||
ollama pull llama3.2:1b
|
||||
|
||||
# Or for better quality (larger model)
|
||||
ollama pull llama3.2:70b
|
||||
```
|
||||
|
||||
### Run Ollama
|
||||
|
||||
```bash
|
||||
# Start Ollama server
|
||||
ollama serve
|
||||
|
||||
# Test it
|
||||
curl http://localhost:11434/api/generate -d '{
|
||||
"model": "llama3.2",
|
||||
"prompt": "Hello, who are you?",
|
||||
"stream": false
|
||||
}'
|
||||
```
|
||||
|
||||
## Step 2: Create n8n Workflow
|
||||
|
||||
### 2.1 Create a New Workflow in n8n
|
||||
|
||||
1. Go to https://n8n.dk0.dev
|
||||
2. Click "Create New Workflow"
|
||||
3. Name it "Portfolio Chat Bot"
|
||||
|
||||
### 2.2 Add Webhook Trigger
|
||||
|
||||
1. Add a **Webhook** node (trigger)
|
||||
2. Configure:
|
||||
- **HTTP Method**: POST
|
||||
- **Path**: `chat`
|
||||
- **Authentication**: None (or add if you want)
|
||||
- **Response Mode**: When Last Node Finishes
|
||||
|
||||
Your webhook URL will be: `https://n8n.dk0.dev/webhook/chat`
|
||||
|
||||
### 2.3 Add Function Node (Message Processing)
|
||||
|
||||
Add a **Function** node to extract and format the message:
|
||||
|
||||
```javascript
|
||||
// Extract the message from the webhook body
|
||||
const userMessage = $json.body.message || $json.message;
|
||||
|
||||
// Get conversation context (if you want to maintain history)
|
||||
const conversationId = $json.body.conversationId || 'default';
|
||||
|
||||
// Create context about Dennis
|
||||
const systemPrompt = `You are a helpful AI assistant on Dennis Konkol's portfolio website.
|
||||
|
||||
About Dennis:
|
||||
- Full-stack developer based in Osnabrück, Germany
|
||||
- Student passionate about technology and self-hosting
|
||||
- Skills: Next.js, React, Flutter, Docker, DevOps, TypeScript, Python
|
||||
- Runs his own infrastructure with Docker Swarm and Traefik
|
||||
- Projects include: Clarity (dyslexia app), self-hosted services, game servers
|
||||
- Contact: contact@dk0.dev
|
||||
- Website: https://dk0.dev
|
||||
|
||||
Be friendly, concise, and helpful. Answer questions about Dennis's skills, projects, or experience.
|
||||
If asked about things unrelated to Dennis, politely redirect to his portfolio topics.`;
|
||||
|
||||
return {
|
||||
json: {
|
||||
userMessage,
|
||||
conversationId,
|
||||
systemPrompt,
|
||||
timestamp: new Date().toISOString()
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 2.4 Add HTTP Request Node (Ollama)
|
||||
|
||||
Add an **HTTP Request** node to call Ollama:
|
||||
|
||||
**Configuration:**
|
||||
- **Method**: POST
|
||||
- **URL**: `http://localhost:11434/api/generate` (or your Ollama server URL)
|
||||
- **Authentication**: None
|
||||
- **Body Content Type**: JSON
|
||||
- **Specify Body**: Using Fields Below
|
||||
|
||||
**Body (JSON):**
|
||||
```json
|
||||
{
|
||||
"model": "llama3.2",
|
||||
"prompt": "{{ $json.systemPrompt }}\n\nUser: {{ $json.userMessage }}\n\nAssistant:",
|
||||
"stream": false,
|
||||
"options": {
|
||||
"temperature": 0.7,
|
||||
"top_p": 0.9,
|
||||
"max_tokens": 500
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**Alternative: If Ollama is on a different server**
|
||||
Replace `localhost` with your server IP/domain:
|
||||
```
|
||||
http://your-ollama-server:11434/api/generate
|
||||
```
|
||||
|
||||
### 2.5 Add Function Node (Format Response)
|
||||
|
||||
Add another **Function** node to format the response:
|
||||
|
||||
```javascript
|
||||
// Extract the response from Ollama
|
||||
const ollamaResponse = $json.response || $json.text || '';
|
||||
|
||||
// Clean up the response
|
||||
let reply = ollamaResponse.trim();
|
||||
|
||||
// Remove any system prompts that might leak through
|
||||
reply = reply.replace(/^(System:|Assistant:|User:)/gi, '').trim();
|
||||
|
||||
// Limit length if too long
|
||||
if (reply.length > 1000) {
|
||||
reply = reply.substring(0, 1000) + '...';
|
||||
}
|
||||
|
||||
return {
|
||||
json: {
|
||||
reply: reply,
|
||||
timestamp: new Date().toISOString(),
|
||||
model: 'llama3.2'
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### 2.6 Add Respond to Webhook Node
|
||||
|
||||
Add a **Respond to Webhook** node:
|
||||
|
||||
**Configuration:**
|
||||
- **Response Body**: JSON
|
||||
- **Response Data**: Using Fields Below
|
||||
|
||||
**Body:**
|
||||
```json
|
||||
{
|
||||
"reply": "={{ $json.reply }}",
|
||||
"timestamp": "={{ $json.timestamp }}",
|
||||
"success": true
|
||||
}
|
||||
```
|
||||
|
||||
### 2.7 Save and Activate
|
||||
|
||||
1. Click "Save" (top right)
|
||||
2. Toggle "Active" switch to ON
|
||||
3. Test the webhook:
|
||||
|
||||
```bash
|
||||
curl -X POST https://n8n.dk0.dev/webhook/chat \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"message": "Hello, tell me about Dennis"}'
|
||||
```
|
||||
|
||||
## Step 3: Advanced - Conversation Memory
|
||||
|
||||
To maintain conversation context across messages, add a **Redis** or **MongoDB** node:
|
||||
|
||||
### Option A: Using Redis (Recommended)
|
||||
|
||||
**Add Redis Node (Store):**
|
||||
```javascript
|
||||
// Store conversation in Redis with TTL
|
||||
const conversationKey = `chat:${$json.conversationId}`;
|
||||
const messages = [
|
||||
{ role: 'user', content: $json.userMessage },
|
||||
{ role: 'assistant', content: $json.reply }
|
||||
];
|
||||
|
||||
// Get existing conversation
|
||||
const existing = await this.helpers.request({
|
||||
method: 'GET',
|
||||
url: `redis://localhost:6379/${conversationKey}`
|
||||
});
|
||||
|
||||
// Append new messages
|
||||
const conversation = existing ? JSON.parse(existing) : [];
|
||||
conversation.push(...messages);
|
||||
|
||||
// Keep only last 10 messages
|
||||
const recentConversation = conversation.slice(-10);
|
||||
|
||||
// Store back with 1 hour TTL
|
||||
await this.helpers.request({
|
||||
method: 'SET',
|
||||
url: `redis://localhost:6379/${conversationKey}`,
|
||||
body: JSON.stringify(recentConversation),
|
||||
qs: { EX: 3600 }
|
||||
});
|
||||
```
|
||||
|
||||
### Option B: Using Session Storage (Simpler)
|
||||
|
||||
Store conversation in n8n's internal storage:
|
||||
|
||||
```javascript
|
||||
// Use n8n's static data for simple storage
|
||||
const conversationKey = $json.conversationId;
|
||||
const staticData = this.getWorkflowStaticData('global');
|
||||
|
||||
if (!staticData.conversations) {
|
||||
staticData.conversations = {};
|
||||
}
|
||||
|
||||
if (!staticData.conversations[conversationKey]) {
|
||||
staticData.conversations[conversationKey] = [];
|
||||
}
|
||||
|
||||
// Add message
|
||||
staticData.conversations[conversationKey].push({
|
||||
user: $json.userMessage,
|
||||
assistant: $json.reply,
|
||||
timestamp: new Date().toISOString()
|
||||
});
|
||||
|
||||
// Keep only last 10
|
||||
staticData.conversations[conversationKey] =
|
||||
staticData.conversations[conversationKey].slice(-10);
|
||||
```
|
||||
|
||||
## Step 4: Handle Multiple Users
|
||||
|
||||
The chat system automatically handles multiple users through:
|
||||
|
||||
1. **Session IDs**: Each user gets a unique `conversationId` generated client-side
|
||||
2. **Stateless by default**: Each request is independent unless you add conversation memory
|
||||
3. **Redis/Database**: Store conversations per user ID for persistent history
|
||||
|
||||
### Client-Side Session Management
|
||||
|
||||
The chat widget (created in next step) will generate a unique session ID:
|
||||
|
||||
```javascript
|
||||
// Auto-generated in the chat widget
|
||||
const conversationId = crypto.randomUUID();
|
||||
localStorage.setItem('chatSessionId', conversationId);
|
||||
```
|
||||
|
||||
### Server-Side (n8n)
|
||||
|
||||
n8n processes each request independently. For multiple concurrent users:
|
||||
- Each webhook call is a separate execution
|
||||
- No shared state between users (unless you add it)
|
||||
- Ollama can handle concurrent requests
|
||||
- Use Redis for scalable conversation storage
|
||||
|
||||
## Step 5: Rate Limiting (Optional)
|
||||
|
||||
To prevent abuse, add rate limiting in n8n:
|
||||
|
||||
```javascript
|
||||
// Add this as first function node
|
||||
const ip = $json.headers['x-forwarded-for'] || $json.headers['x-real-ip'] || 'unknown';
|
||||
const rateLimitKey = `ratelimit:${ip}`;
|
||||
const staticData = this.getWorkflowStaticData('global');
|
||||
|
||||
if (!staticData.rateLimits) {
|
||||
staticData.rateLimits = {};
|
||||
}
|
||||
|
||||
const now = Date.now();
|
||||
const limit = staticData.rateLimits[rateLimitKey] || { count: 0, resetAt: now + 60000 };
|
||||
|
||||
if (now > limit.resetAt) {
|
||||
// Reset after 1 minute
|
||||
limit.count = 0;
|
||||
limit.resetAt = now + 60000;
|
||||
}
|
||||
|
||||
if (limit.count >= 10) {
|
||||
// Max 10 requests per minute per IP
|
||||
throw new Error('Rate limit exceeded. Please wait a moment.');
|
||||
}
|
||||
|
||||
limit.count++;
|
||||
staticData.rateLimits[rateLimitKey] = limit;
|
||||
```
|
||||
|
||||
## Step 6: Environment Variables
|
||||
|
||||
Update your `.env` file:
|
||||
|
||||
```bash
|
||||
# n8n Configuration
|
||||
N8N_WEBHOOK_URL=https://n8n.dk0.dev
|
||||
N8N_SECRET_TOKEN=your-secret-token-here # Optional: for authentication
|
||||
N8N_API_KEY=your-api-key-here # Optional: for API access
|
||||
|
||||
# Ollama Configuration (optional - stored in n8n workflow)
|
||||
OLLAMA_URL=http://localhost:11434
|
||||
OLLAMA_MODEL=llama3.2
|
||||
```
|
||||
|
||||
## Step 7: Test the Setup
|
||||
|
||||
```bash
|
||||
# Test the chat endpoint
|
||||
curl -X POST http://localhost:3000/api/n8n/chat \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"message": "What technologies does Dennis work with?"
|
||||
}'
|
||||
|
||||
# Expected response:
|
||||
{
|
||||
"reply": "Dennis works with a variety of modern technologies including Next.js, React, Flutter for mobile development, Docker for containerization, and TypeScript. He's also experienced with DevOps practices, running his own infrastructure with Docker Swarm and Traefik as a reverse proxy."
|
||||
}
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### Ollama Not Responding
|
||||
|
||||
```bash
|
||||
# Check if Ollama is running
|
||||
curl http://localhost:11434/api/tags
|
||||
|
||||
# If not, start it
|
||||
ollama serve
|
||||
|
||||
# Check logs
|
||||
journalctl -u ollama -f
|
||||
```
|
||||
|
||||
### n8n Webhook Returns 404
|
||||
|
||||
- Make sure workflow is **Active** (toggle in top right)
|
||||
- Check webhook path matches: `/webhook/chat`
|
||||
- Test directly: `https://n8n.dk0.dev/webhook/chat`
|
||||
|
||||
### Slow Responses
|
||||
|
||||
- Use a smaller model: `ollama pull llama3.2:1b`
|
||||
- Reduce `max_tokens` in Ollama request
|
||||
- Add response caching for common questions
|
||||
- Consider using streaming responses
|
||||
|
||||
### CORS Issues
|
||||
|
||||
Add CORS headers in the n8n Respond node:
|
||||
|
||||
```json
|
||||
{
|
||||
"headers": {
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
"Access-Control-Allow-Methods": "POST, OPTIONS",
|
||||
"Access-Control-Allow-Headers": "Content-Type"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Performance Tips
|
||||
|
||||
1. **Use GPU acceleration** for Ollama if available
|
||||
2. **Cache common responses** in Redis
|
||||
3. **Implement streaming** for real-time responses
|
||||
4. **Use smaller models** for faster responses (llama3.2:1b)
|
||||
5. **Add typing indicators** in the UI while waiting
|
||||
|
||||
## Security Considerations
|
||||
|
||||
1. **Add authentication** to n8n webhook (Bearer token)
|
||||
2. **Implement rate limiting** (shown above)
|
||||
3. **Sanitize user input** in n8n function node
|
||||
4. **Don't expose Ollama** directly to the internet
|
||||
5. **Use HTTPS** for all communications
|
||||
6. **Add CAPTCHA** to prevent bot abuse
|
||||
|
||||
## Next Steps
|
||||
|
||||
1. ✅ Set up Ollama
|
||||
2. ✅ Create n8n workflow
|
||||
3. ✅ Test the API endpoint
|
||||
4. 🔲 Create chat UI widget (see CHAT_WIDGET_SETUP.md)
|
||||
5. 🔲 Add conversation memory
|
||||
6. 🔲 Implement rate limiting
|
||||
7. 🔲 Add analytics tracking
|
||||
|
||||
## Resources
|
||||
|
||||
- [Ollama Documentation](https://ollama.com/docs)
|
||||
- [n8n Documentation](https://docs.n8n.io)
|
||||
- [Llama 3.2 Model Card](https://ollama.com/library/llama3.2)
|
||||
- [Next.js API Routes](https://nextjs.org/docs/api-routes/introduction)
|
||||
|
||||
## Example n8n Workflow JSON
|
||||
|
||||
Save this as `chat-workflow.json` and import into n8n:
|
||||
|
||||
```json
|
||||
{
|
||||
"name": "Portfolio Chat Bot",
|
||||
"nodes": [
|
||||
{
|
||||
"parameters": {
|
||||
"path": "chat",
|
||||
"responseMode": "lastNode",
|
||||
"options": {}
|
||||
},
|
||||
"name": "Webhook",
|
||||
"type": "n8n-nodes-base.webhook",
|
||||
"position": [250, 300],
|
||||
"webhookId": "chat-webhook"
|
||||
},
|
||||
{
|
||||
"parameters": {
|
||||
"functionCode": "const userMessage = $json.body.message;\nconst systemPrompt = `You are a helpful AI assistant on Dennis Konkol's portfolio website.`;\nreturn { json: { userMessage, systemPrompt } };"
|
||||
},
|
||||
"name": "Process Message",
|
||||
"type": "n8n-nodes-base.function",
|
||||
"position": [450, 300]
|
||||
},
|
||||
{
|
||||
"parameters": {
|
||||
"method": "POST",
|
||||
"url": "http://localhost:11434/api/generate",
|
||||
"jsonParameters": true,
|
||||
"options": {},
|
||||
"bodyParametersJson": "={ \"model\": \"llama3.2\", \"prompt\": \"{{ $json.systemPrompt }}\\n\\nUser: {{ $json.userMessage }}\\n\\nAssistant:\", \"stream\": false }"
|
||||
},
|
||||
"name": "Call Ollama",
|
||||
"type": "n8n-nodes-base.httpRequest",
|
||||
"position": [650, 300]
|
||||
},
|
||||
{
|
||||
"parameters": {
|
||||
"functionCode": "const reply = $json.response || '';\nreturn { json: { reply: reply.trim() } };"
|
||||
},
|
||||
"name": "Format Response",
|
||||
"type": "n8n-nodes-base.function",
|
||||
"position": [850, 300]
|
||||
},
|
||||
{
|
||||
"parameters": {
|
||||
"respondWith": "json",
|
||||
"options": {},
|
||||
"responseBody": "={ \"reply\": \"{{ $json.reply }}\", \"success\": true }"
|
||||
},
|
||||
"name": "Respond to Webhook",
|
||||
"type": "n8n-nodes-base.respondToWebhook",
|
||||
"position": [1050, 300]
|
||||
}
|
||||
],
|
||||
"connections": {
|
||||
"Webhook": { "main": [[{ "node": "Process Message", "type": "main", "index": 0 }]] },
|
||||
"Process Message": { "main": [[{ "node": "Call Ollama", "type": "main", "index": 0 }]] },
|
||||
"Call Ollama": { "main": [[{ "node": "Format Response", "type": "main", "index": 0 }]] },
|
||||
"Format Response": { "main": [[{ "node": "Respond to Webhook", "type": "main", "index": 0 }]] }
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**Need help?** Check the troubleshooting section or reach out!
|
||||
590
docs/archive/N8N_INTEGRATION.md
Normal file
590
docs/archive/N8N_INTEGRATION.md
Normal file
@@ -0,0 +1,590 @@
|
||||
# 🚀 n8n Integration Guide - Complete Setup
|
||||
|
||||
## Übersicht
|
||||
|
||||
Dieses Portfolio nutzt n8n für:
|
||||
- ⚡ **Echtzeit-Aktivitätsanzeige** (Coding, Musik, Gaming, etc.)
|
||||
- 💬 **AI-Chatbot** (mit OpenAI/Anthropic)
|
||||
- 📊 **Aktivitäts-Tracking** (GitHub, Spotify, Netflix, etc.)
|
||||
- 🎮 **Gaming-Status** (Steam, Discord)
|
||||
- 📧 **Automatische Benachrichtigungen**
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Coole Ideen für Integrationen
|
||||
|
||||
### 1. **GitHub Activity Feed** 🔨
|
||||
**Was es zeigt:**
|
||||
- "Currently coding: Portfolio Website"
|
||||
- "Last commit: 5 minutes ago"
|
||||
- "Working on: feature/n8n-integration"
|
||||
- Programming language (TypeScript, Python, etc.)
|
||||
|
||||
**n8n Workflow:**
|
||||
```
|
||||
GitHub Webhook → Extract Data → Update Database → Display on Site
|
||||
```
|
||||
|
||||
### 2. **Spotify Now Playing** 🎵
|
||||
**Was es zeigt:**
|
||||
- Aktueller Song + Artist
|
||||
- Album Cover (rotierend animiert!)
|
||||
- Fortschrittsbalken
|
||||
- "Listening to X since Y minutes"
|
||||
|
||||
**n8n Workflow:**
|
||||
```
|
||||
Cron (every 30s) → Spotify API → Parse Track Data → Update Database
|
||||
```
|
||||
|
||||
### 3. **Netflix/YouTube/Twitch Watching** 📺
|
||||
**Was es zeigt:**
|
||||
- "Watching: Breaking Bad S05E14"
|
||||
- "Streaming: Coding Tutorial"
|
||||
- Platform badges (Netflix/YouTube/Twitch)
|
||||
|
||||
**n8n Workflow:**
|
||||
```
|
||||
Trakt.tv API → Get Current Watching → Update Database
|
||||
Discord Rich Presence → Extract Activity → Update Database
|
||||
```
|
||||
|
||||
### 4. **Gaming Activity** 🎮
|
||||
**Was es zeigt:**
|
||||
- "Playing: Elden Ring"
|
||||
- Platform: Steam/PlayStation/Xbox
|
||||
- Play time
|
||||
- Achievement notifications
|
||||
|
||||
**n8n Workflow:**
|
||||
```
|
||||
Steam API → Get Current Game → Update Database
|
||||
Discord Presence → Parse Game → Update Database
|
||||
```
|
||||
|
||||
### 5. **Mood & Custom Status** 😊
|
||||
**Was es zeigt:**
|
||||
- Emoji mood (😊, 💻, 🏃, 🎮, 😴)
|
||||
- Custom message: "Focused on DevOps"
|
||||
- Auto-status based on time/activity
|
||||
|
||||
**n8n Workflow:**
|
||||
```
|
||||
Schedule → Determine Status (work hours/break/sleep) → Update Database
|
||||
Manual Webhook → Set Custom Status → Update Database
|
||||
```
|
||||
|
||||
### 6. **Smart Notifications** 📬
|
||||
**Was es zeigt:**
|
||||
- "New email from X"
|
||||
- "GitHub PR needs review"
|
||||
- "Calendar event in 15 min"
|
||||
|
||||
**n8n Workflow:**
|
||||
```
|
||||
Email/Calendar/GitHub → Filter Important → Create Notification → Display
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📦 Setup: Datenbank Schema
|
||||
|
||||
### PostgreSQL Table: `activity_status`
|
||||
|
||||
```sql
|
||||
CREATE TABLE activity_status (
|
||||
id SERIAL PRIMARY KEY,
|
||||
|
||||
-- Activity
|
||||
activity_type VARCHAR(50), -- 'coding', 'listening', 'watching', 'gaming', 'reading'
|
||||
activity_details TEXT,
|
||||
activity_project VARCHAR(255),
|
||||
activity_language VARCHAR(50),
|
||||
activity_repo VARCHAR(255),
|
||||
|
||||
-- Music
|
||||
music_playing BOOLEAN DEFAULT FALSE,
|
||||
music_track VARCHAR(255),
|
||||
music_artist VARCHAR(255),
|
||||
music_album VARCHAR(255),
|
||||
music_platform VARCHAR(50), -- 'spotify', 'apple'
|
||||
music_progress INTEGER, -- 0-100
|
||||
music_album_art TEXT,
|
||||
|
||||
-- Watching
|
||||
watching_title VARCHAR(255),
|
||||
watching_platform VARCHAR(50), -- 'youtube', 'netflix', 'twitch'
|
||||
watching_type VARCHAR(50), -- 'video', 'stream', 'movie', 'series'
|
||||
|
||||
-- Gaming
|
||||
gaming_game VARCHAR(255),
|
||||
gaming_platform VARCHAR(50), -- 'steam', 'playstation', 'xbox'
|
||||
gaming_status VARCHAR(50), -- 'playing', 'idle'
|
||||
|
||||
-- Status
|
||||
status_mood VARCHAR(10), -- emoji
|
||||
status_message TEXT,
|
||||
|
||||
updated_at TIMESTAMP DEFAULT NOW()
|
||||
);
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔧 n8n Workflows
|
||||
|
||||
### Workflow 1: GitHub Activity Tracker
|
||||
|
||||
**Trigger:** Webhook bei Push/Commit
|
||||
**Frequenz:** Echtzeit
|
||||
|
||||
```json
|
||||
{
|
||||
"nodes": [
|
||||
{
|
||||
"name": "GitHub Webhook",
|
||||
"type": "n8n-nodes-base.webhook",
|
||||
"parameters": {
|
||||
"path": "github-activity",
|
||||
"method": "POST"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Extract Commit Data",
|
||||
"type": "n8n-nodes-base.function",
|
||||
"parameters": {
|
||||
"functionCode": "const commit = items[0].json;\nreturn [\n {\n json: {\n activity_type: 'coding',\n activity_details: commit.head_commit.message,\n activity_project: commit.repository.name,\n activity_language: 'TypeScript',\n activity_repo: commit.repository.html_url,\n updated_at: new Date().toISOString()\n }\n }\n];"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Update Database",
|
||||
"type": "n8n-nodes-base.postgres",
|
||||
"parameters": {
|
||||
"operation": "executeQuery",
|
||||
"query": "INSERT INTO activity_status (activity_type, activity_details, activity_project, activity_language, activity_repo, updated_at) VALUES ($1, $2, $3, $4, $5, $6) ON CONFLICT (id) DO UPDATE SET activity_type = $1, activity_details = $2, activity_project = $3, activity_language = $4, activity_repo = $5, updated_at = $6 WHERE activity_status.id = 1"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
**Setup in GitHub:**
|
||||
1. Gehe zu deinem Repository → Settings → Webhooks
|
||||
2. Add webhook: `https://your-n8n-instance.com/webhook/github-activity`
|
||||
3. Content type: `application/json`
|
||||
4. Events: Push events
|
||||
|
||||
---
|
||||
|
||||
### Workflow 2: Spotify Now Playing
|
||||
|
||||
**Trigger:** Cron (alle 30 Sekunden)
|
||||
|
||||
```json
|
||||
{
|
||||
"nodes": [
|
||||
{
|
||||
"name": "Schedule",
|
||||
"type": "n8n-nodes-base.cron",
|
||||
"parameters": {
|
||||
"cronExpression": "*/30 * * * * *"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Spotify API",
|
||||
"type": "n8n-nodes-base.httpRequest",
|
||||
"parameters": {
|
||||
"url": "https://api.spotify.com/v1/me/player/currently-playing",
|
||||
"method": "GET",
|
||||
"authentication": "oAuth2",
|
||||
"headers": {
|
||||
"Authorization": "Bearer {{$credentials.spotify.accessToken}}"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Parse Track Data",
|
||||
"type": "n8n-nodes-base.function",
|
||||
"parameters": {
|
||||
"functionCode": "const track = items[0].json;\nif (!track || !track.is_playing) {\n return [{ json: { music_playing: false } }];\n}\n\nreturn [\n {\n json: {\n music_playing: true,\n music_track: track.item.name,\n music_artist: track.item.artists[0].name,\n music_album: track.item.album.name,\n music_platform: 'spotify',\n music_progress: Math.round((track.progress_ms / track.item.duration_ms) * 100),\n music_album_art: track.item.album.images[0].url,\n updated_at: new Date().toISOString()\n }\n }\n];"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Update Database",
|
||||
"type": "n8n-nodes-base.postgres",
|
||||
"parameters": {
|
||||
"operation": "executeQuery",
|
||||
"query": "UPDATE activity_status SET music_playing = $1, music_track = $2, music_artist = $3, music_album = $4, music_platform = $5, music_progress = $6, music_album_art = $7, updated_at = $8 WHERE id = 1"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
**Spotify API Setup:**
|
||||
1. Gehe zu https://developer.spotify.com/dashboard
|
||||
2. Create App
|
||||
3. Add Redirect URI: `https://your-n8n-instance.com/oauth/callback`
|
||||
4. Kopiere Client ID & Secret in n8n Credentials
|
||||
5. Scopes: `user-read-currently-playing`, `user-read-playback-state`
|
||||
|
||||
---
|
||||
|
||||
### Workflow 3: AI Chatbot mit OpenAI
|
||||
|
||||
**Trigger:** Webhook bei Chat-Message
|
||||
|
||||
```json
|
||||
{
|
||||
"nodes": [
|
||||
{
|
||||
"name": "Chat Webhook",
|
||||
"type": "n8n-nodes-base.webhook",
|
||||
"parameters": {
|
||||
"path": "chat",
|
||||
"method": "POST"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Build Context",
|
||||
"type": "n8n-nodes-base.function",
|
||||
"parameters": {
|
||||
"functionCode": "const userMessage = items[0].json.message;\n\nconst context = `You are Dennis Konkol's AI assistant. Here's information about Dennis:\n\n- Student in Osnabrück, Germany\n- Passionate self-hoster and DevOps enthusiast\n- Skills: Next.js, Flutter, Docker Swarm, Traefik, CI/CD, n8n\n- Runs own infrastructure on IONOS and OVHcloud\n- Projects: Clarity (Flutter dyslexia app), Self-hosted portfolio with Docker Swarm\n- Hobbies: Gaming, Jogging, Experimenting with tech\n- Fun fact: Uses pen & paper for calendar despite automating everything\n\nAnswer questions about Dennis professionally and friendly. Keep answers concise (2-3 sentences).\n\nUser question: ${userMessage}`;\n\nreturn [{ json: { context, userMessage } }];"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "OpenAI Chat",
|
||||
"type": "n8n-nodes-base.openAi",
|
||||
"parameters": {
|
||||
"resource": "chat",
|
||||
"operation": "message",
|
||||
"model": "gpt-4",
|
||||
"messages": {
|
||||
"values": [
|
||||
{
|
||||
"role": "system",
|
||||
"content": "={{$node[\"Build Context\"].json[\"context\"]}}"
|
||||
},
|
||||
{
|
||||
"role": "user",
|
||||
"content": "={{$node[\"Build Context\"].json[\"userMessage\"]}}"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Return Response",
|
||||
"type": "n8n-nodes-base.respondToWebhook",
|
||||
"parameters": {
|
||||
"responseBody": "={{ { reply: $json.message.content } }}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
**OpenAI API Setup:**
|
||||
1. Gehe zu https://platform.openai.com/api-keys
|
||||
2. Create API Key
|
||||
3. Add zu n8n Credentials
|
||||
4. Wähle Model: gpt-4 oder gpt-3.5-turbo
|
||||
|
||||
---
|
||||
|
||||
### Workflow 4: Discord/Steam Gaming Status
|
||||
|
||||
**Trigger:** Cron (alle 60 Sekunden)
|
||||
|
||||
```json
|
||||
{
|
||||
"nodes": [
|
||||
{
|
||||
"name": "Schedule",
|
||||
"type": "n8n-nodes-base.cron",
|
||||
"parameters": {
|
||||
"cronExpression": "0 * * * * *"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Discord API",
|
||||
"type": "n8n-nodes-base.httpRequest",
|
||||
"parameters": {
|
||||
"url": "https://discord.com/api/v10/users/@me",
|
||||
"method": "GET",
|
||||
"authentication": "oAuth2",
|
||||
"headers": {
|
||||
"Authorization": "Bot {{$credentials.discord.token}}"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Parse Gaming Status",
|
||||
"type": "n8n-nodes-base.function",
|
||||
"parameters": {
|
||||
"functionCode": "const user = items[0].json;\nconst activity = user.activities?.find(a => a.type === 0); // 0 = Playing\n\nif (!activity) {\n return [{ json: { gaming_game: null, gaming_status: 'idle' } }];\n}\n\nreturn [\n {\n json: {\n gaming_game: activity.name,\n gaming_platform: 'discord',\n gaming_status: 'playing',\n updated_at: new Date().toISOString()\n }\n }\n];"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Update Database",
|
||||
"type": "n8n-nodes-base.postgres",
|
||||
"parameters": {
|
||||
"operation": "executeQuery",
|
||||
"query": "UPDATE activity_status SET gaming_game = $1, gaming_platform = $2, gaming_status = $3, updated_at = $4 WHERE id = 1"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Workflow 5: Smart Status (Auto-Detect)
|
||||
|
||||
**Trigger:** Cron (alle 5 Minuten)
|
||||
|
||||
```json
|
||||
{
|
||||
"nodes": [
|
||||
{
|
||||
"name": "Schedule",
|
||||
"type": "n8n-nodes-base.cron",
|
||||
"parameters": {
|
||||
"cronExpression": "*/5 * * * *"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Determine Status",
|
||||
"type": "n8n-nodes-base.function",
|
||||
"parameters": {
|
||||
"functionCode": "const hour = new Date().getHours();\nconst day = new Date().getDay(); // 0 = Sunday, 6 = Saturday\n\nlet mood = '💻';\nlet message = 'Working on projects';\n\n// Sleep time (0-7 Uhr)\nif (hour >= 0 && hour < 7) {\n mood = '😴';\n message = 'Sleeping (probably dreaming of code)';\n}\n// Morning (7-9 Uhr)\nelse if (hour >= 7 && hour < 9) {\n mood = '☕';\n message = 'Morning coffee & catching up';\n}\n// Work time (9-17 Uhr, Mo-Fr)\nelse if (hour >= 9 && hour < 17 && day >= 1 && day <= 5) {\n mood = '💻';\n message = 'Deep work mode - coding & learning';\n}\n// Evening (17-22 Uhr)\nelse if (hour >= 17 && hour < 22) {\n mood = '🎮';\n message = 'Relaxing - gaming or watching shows';\n}\n// Late night (22-24 Uhr)\nelse if (hour >= 22) {\n mood = '🌙';\n message = 'Late night coding session';\n}\n// Weekend\nif (day === 0 || day === 6) {\n mood = '🏃';\n message = 'Weekend vibes - exploring & experimenting';\n}\n\nreturn [\n {\n json: {\n status_mood: mood,\n status_message: message,\n updated_at: new Date().toISOString()\n }\n }\n];"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Update Database",
|
||||
"type": "n8n-nodes-base.postgres",
|
||||
"parameters": {
|
||||
"operation": "executeQuery",
|
||||
"query": "UPDATE activity_status SET status_mood = $1, status_message = $2, updated_at = $3 WHERE id = 1"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔌 Frontend API Integration
|
||||
|
||||
### Update `/app/api/n8n/status/route.ts`
|
||||
|
||||
```typescript
|
||||
import { NextResponse } from 'next/server';
|
||||
import { PrismaClient } from '@prisma/client';
|
||||
|
||||
const prisma = new PrismaClient();
|
||||
|
||||
export async function GET() {
|
||||
try {
|
||||
// Fetch from your activity_status table
|
||||
const status = await prisma.$queryRaw`
|
||||
SELECT * FROM activity_status WHERE id = 1 LIMIT 1
|
||||
`;
|
||||
|
||||
if (!status || status.length === 0) {
|
||||
return NextResponse.json({
|
||||
activity: null,
|
||||
music: null,
|
||||
watching: null,
|
||||
gaming: null,
|
||||
status: null,
|
||||
});
|
||||
}
|
||||
|
||||
const data = status[0];
|
||||
|
||||
return NextResponse.json({
|
||||
activity: data.activity_type ? {
|
||||
type: data.activity_type,
|
||||
details: data.activity_details,
|
||||
project: data.activity_project,
|
||||
language: data.activity_language,
|
||||
repo: data.activity_repo,
|
||||
timestamp: data.updated_at,
|
||||
} : null,
|
||||
music: data.music_playing ? {
|
||||
isPlaying: data.music_playing,
|
||||
track: data.music_track,
|
||||
artist: data.music_artist,
|
||||
album: data.music_album,
|
||||
platform: data.music_platform,
|
||||
progress: data.music_progress,
|
||||
albumArt: data.music_album_art,
|
||||
} : null,
|
||||
watching: data.watching_title ? {
|
||||
title: data.watching_title,
|
||||
platform: data.watching_platform,
|
||||
type: data.watching_type,
|
||||
} : null,
|
||||
gaming: data.gaming_game ? {
|
||||
game: data.gaming_game,
|
||||
platform: data.gaming_platform,
|
||||
status: data.gaming_status,
|
||||
} : null,
|
||||
status: data.status_mood ? {
|
||||
mood: data.status_mood,
|
||||
customMessage: data.status_message,
|
||||
} : null,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error fetching activity status:', error);
|
||||
return NextResponse.json({
|
||||
activity: null,
|
||||
music: null,
|
||||
watching: null,
|
||||
gaming: null,
|
||||
status: null,
|
||||
}, { status: 500 });
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Create `/app/api/n8n/chat/route.ts`
|
||||
|
||||
```typescript
|
||||
import { NextResponse } from 'next/server';
|
||||
|
||||
export async function POST(request: Request) {
|
||||
try {
|
||||
const { message } = await request.json();
|
||||
|
||||
// Call your n8n chat webhook
|
||||
const response = await fetch(`${process.env.N8N_WEBHOOK_URL}/webhook/chat`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ message }),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('n8n webhook failed');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return NextResponse.json({ reply: data.reply });
|
||||
} catch (error) {
|
||||
console.error('Chat API error:', error);
|
||||
return NextResponse.json(
|
||||
{ reply: 'Sorry, I encountered an error. Please try again later.' },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🌟 Zusätzliche coole Ideen
|
||||
|
||||
### 1. **Live Coding Stats**
|
||||
- Lines of code today
|
||||
- Most used language this week
|
||||
- GitHub contribution graph
|
||||
- Pull requests merged
|
||||
|
||||
### 2. **Coffee Counter** ☕
|
||||
- Button in n8n Dashboard: "I had coffee"
|
||||
- Displays: "3 coffees today"
|
||||
- Funny messages bei > 5 cups
|
||||
|
||||
### 3. **Mood Tracker**
|
||||
- Manual mood updates via Discord Bot
|
||||
- Shows emoji + custom message
|
||||
- Persists über den Tag
|
||||
|
||||
### 4. **Auto-DND Status**
|
||||
- Wenn du in einem Meeting bist (Calendar API)
|
||||
- Wenn du fokussiert arbeitest (Pomodoro Timer)
|
||||
- Custom status: "🔴 In Deep Work - Back at 15:00"
|
||||
|
||||
### 5. **Project Highlights**
|
||||
- "Currently building: X"
|
||||
- "Deployed Y minutes ago"
|
||||
- "Last successful build: Z"
|
||||
|
||||
### 6. **Social Activity**
|
||||
- "New blog post: Title"
|
||||
- "Trending on Twitter: X mentions"
|
||||
- "LinkedIn: Y profile views this week"
|
||||
|
||||
---
|
||||
|
||||
## 📝 Environment Variables
|
||||
|
||||
Add to `.env.local`:
|
||||
|
||||
```bash
|
||||
# n8n
|
||||
N8N_WEBHOOK_URL=https://your-n8n-instance.com
|
||||
N8N_API_KEY=your_n8n_api_key
|
||||
|
||||
# Spotify
|
||||
SPOTIFY_CLIENT_ID=your_spotify_client_id
|
||||
SPOTIFY_CLIENT_SECRET=your_spotify_client_secret
|
||||
|
||||
# OpenAI
|
||||
OPENAI_API_KEY=your_openai_api_key
|
||||
|
||||
# Discord (optional)
|
||||
DISCORD_BOT_TOKEN=your_discord_bot_token
|
||||
|
||||
# GitHub (optional)
|
||||
GITHUB_WEBHOOK_SECRET=your_github_webhook_secret
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Quick Start
|
||||
|
||||
1. **Setup Database:**
|
||||
```bash
|
||||
psql -U postgres -d portfolio_dev -f setup_activity_status.sql
|
||||
```
|
||||
|
||||
2. **Create n8n Workflows:**
|
||||
- Import workflows via n8n UI
|
||||
- Configure credentials
|
||||
- Activate workflows
|
||||
|
||||
3. **Update API Routes:**
|
||||
- Add `status/route.ts` and `chat/route.ts`
|
||||
- Set environment variables
|
||||
|
||||
4. **Test:**
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
- Check bottom-right corner for activity bubbles
|
||||
- Click chat button to test AI
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Best Practices
|
||||
|
||||
1. **Caching:** Cache API responses für 30s (nicht bei jedem Request neu fetchen)
|
||||
2. **Error Handling:** Graceful fallbacks wenn n8n down ist
|
||||
3. **Rate Limiting:** Limitiere Chat-Requests (max 10/minute)
|
||||
4. **Privacy:** Zeige nur das, was du teilen willst
|
||||
5. **Performance:** Nutze Webhooks statt Polling wo möglich
|
||||
|
||||
---
|
||||
|
||||
## 🤝 Community Ideas
|
||||
|
||||
Teile deine coolen n8n-Integrationen!
|
||||
- Discord: Zeig deinen Setup
|
||||
- GitHub: Share deine Workflows
|
||||
- Blog: Write-up über dein System
|
||||
|
||||
Happy automating! 🎉
|
||||
165
docs/archive/N8N_READING_INTEGRATION.md
Normal file
165
docs/archive/N8N_READING_INTEGRATION.md
Normal file
@@ -0,0 +1,165 @@
|
||||
# 📚 Reading Activity zu n8n hinzufügen
|
||||
|
||||
## ✅ Was du bereits hast:
|
||||
- ✅ Frontend ist bereit (ActivityFeed.tsx updated)
|
||||
- ✅ TypeScript Interfaces erweitert
|
||||
- ✅ Grid Layout (horizontal auf Desktop, vertikal auf Mobile)
|
||||
- ✅ Conditional Rendering (nur zeigen wenn `isReading: true`)
|
||||
|
||||
## 🔧 n8n Workflow anpassen
|
||||
|
||||
### Option 1: Hardcover Integration (automatisch)
|
||||
|
||||
**1. Neuer Node in n8n: "Hardcover"**
|
||||
```
|
||||
Type: HTTP Request
|
||||
Method: GET
|
||||
URL: https://cms.dk0.dev/api/n8n/hardcover/currently-reading
|
||||
```
|
||||
|
||||
**2. Mit Webhook verbinden**
|
||||
```
|
||||
Webhook → Hardcover (parallel zu Spotify/Lanyard)
|
||||
↓
|
||||
Merge (Node mit 5 Inputs statt 4)
|
||||
↓
|
||||
Code in JavaScript
|
||||
```
|
||||
|
||||
**3. Code Node updaten**
|
||||
Ersetze den gesamten Code in deinem "Code in JavaScript" Node mit dem Code aus:
|
||||
`scripts/n8n-workflow-code-updated.js`
|
||||
|
||||
---
|
||||
|
||||
### Option 2: Manueller Webhook (für Tests)
|
||||
|
||||
**Neuer Workflow: "Set Reading Status"**
|
||||
|
||||
**Node 1: Webhook (POST)**
|
||||
```
|
||||
Path: /set-reading
|
||||
Method: POST
|
||||
```
|
||||
|
||||
**Node 2: PostgreSQL/Set Variable**
|
||||
```javascript
|
||||
// Speichere reading Status in einer Variablen
|
||||
// Oder direkt in Database wenn du willst
|
||||
const { title, author, progress, coverUrl, isReading } = items[0].json.body;
|
||||
|
||||
return [{
|
||||
json: {
|
||||
reading: {
|
||||
isReading: isReading !== false, // default true
|
||||
title,
|
||||
author,
|
||||
progress,
|
||||
coverUrl
|
||||
}
|
||||
}
|
||||
}];
|
||||
```
|
||||
|
||||
**Usage:**
|
||||
```bash
|
||||
curl -X POST https://your-n8n.com/webhook/set-reading \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"isReading": true,
|
||||
"title": "Clean Architecture",
|
||||
"author": "Robert C. Martin",
|
||||
"progress": 65,
|
||||
"coverUrl": "https://example.com/cover.jpg"
|
||||
}'
|
||||
|
||||
# Clear reading:
|
||||
curl -X POST https://your-n8n.com/webhook/set-reading \
|
||||
-d '{"isReading": false}'
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Wie es aussieht
|
||||
|
||||
### Desktop (breiter Bildschirm):
|
||||
```
|
||||
┌────────────┬────────────┬────────────┬────────────┐
|
||||
│ Coding │ Gaming │ Music │ Reading │
|
||||
│ (RIGHT │ (RIGHT │ │ │
|
||||
│ NOW) │ NOW) │ │ │
|
||||
└────────────┴────────────┴────────────┴────────────┘
|
||||
```
|
||||
|
||||
### Tablet:
|
||||
```
|
||||
┌────────────┬────────────┐
|
||||
│ Coding │ Gaming │
|
||||
└────────────┴────────────┘
|
||||
┌────────────┬────────────┐
|
||||
│ Music │ Reading │
|
||||
└────────────┴────────────┘
|
||||
```
|
||||
|
||||
### Mobile:
|
||||
```
|
||||
┌────────────┐
|
||||
│ Coding │
|
||||
│ (RIGHT │
|
||||
│ NOW) │
|
||||
└────────────┘
|
||||
┌────────────┐
|
||||
│ Gaming │
|
||||
└────────────┘
|
||||
┌────────────┐
|
||||
│ Music │
|
||||
└────────────┘
|
||||
┌────────────┐
|
||||
│ Reading │
|
||||
└────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔥 Features
|
||||
|
||||
✅ **Nur zeigen wenn aktiv** - Wenn `isReading: false`, verschwindet die Card komplett
|
||||
✅ **Progress Bar** - Visueller Fortschritt mit Animation
|
||||
✅ **Book Cover** - Kleines Cover (40x56px)
|
||||
✅ **Responsive Grid** - 1 Spalte (Mobile), 2 Spalten (Tablet), 3 Spalten (Desktop)
|
||||
✅ **Smooth Animations** - Fade in/out mit Framer Motion
|
||||
✅ **Amber Theme** - Passt zu "Reading" 📖
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Testing
|
||||
|
||||
**1. Hardcover Endpoint testen:**
|
||||
```bash
|
||||
curl https://cms.dk0.dev/api/n8n/hardcover/currently-reading
|
||||
```
|
||||
|
||||
**2. n8n Webhook testen:**
|
||||
```bash
|
||||
curl https://your-n8n.com/webhook/denshooter-71242/status
|
||||
```
|
||||
|
||||
**3. Frontend testen:**
|
||||
```bash
|
||||
# Dev Server starten
|
||||
npm run dev
|
||||
|
||||
# In Browser Console:
|
||||
fetch('/api/n8n/status').then(r => r.json()).then(console.log)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📝 Nächste Schritte
|
||||
|
||||
1. ✅ Frontend Code ist bereits angepasst
|
||||
2. ⏳ n8n Workflow Code updaten (siehe `scripts/n8n-workflow-code-updated.js`)
|
||||
3. ⏳ Optional: Hardcover Node hinzufügen
|
||||
4. ⏳ Testen und Deploy
|
||||
|
||||
**Alles ready! Nur noch n8n Code austauschen.** 🎉
|
||||
312
docs/archive/N8N_STATUS_TEXT_GUIDE.md
Normal file
312
docs/archive/N8N_STATUS_TEXT_GUIDE.md
Normal file
@@ -0,0 +1,312 @@
|
||||
# 📝 n8n Status-Text ändern - Anleitung
|
||||
|
||||
## Übersicht
|
||||
|
||||
Der Status-Text (z.B. "dnd", "online", "offline", "away") wird von deinem n8n Workflow zurückgegeben und auf der Website angezeigt.
|
||||
|
||||
---
|
||||
|
||||
## 🔍 Wo kommt der Status-Text her?
|
||||
|
||||
Der Status-Text kommt von deinem n8n Webhook:
|
||||
- **Webhook URL**: `/webhook/denshooter-71242/status`
|
||||
- **Methode**: GET
|
||||
- **Antwort-Format**: JSON mit `status: { text: string, color: string }`
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Option 1: Status-Text direkt im n8n Workflow ändern
|
||||
|
||||
### Schritt 1: Workflow finden
|
||||
|
||||
1. Öffne dein n8n Dashboard
|
||||
2. Suche nach dem Workflow, der den Status zurückgibt
|
||||
3. Der Workflow sollte einen **Webhook** oder **HTTP Response** Node haben
|
||||
|
||||
### Schritt 2: Status-Text im Workflow anpassen
|
||||
|
||||
**Beispiel: Function Node oder Set Node**
|
||||
|
||||
```javascript
|
||||
// In einem Function Node oder Set Node
|
||||
return [{
|
||||
json: {
|
||||
status: {
|
||||
text: "dnd", // ← Hier kannst du den Text ändern
|
||||
color: "red" // ← Und hier die Farbe (green, yellow, red, gray)
|
||||
},
|
||||
music: { /* ... */ },
|
||||
gaming: { /* ... */ },
|
||||
coding: { /* ... */ }
|
||||
}
|
||||
}];
|
||||
```
|
||||
|
||||
**Mögliche Status-Texte:**
|
||||
- `"online"` → Wird als "Online" angezeigt
|
||||
- `"offline"` → Wird als "Offline" angezeigt
|
||||
- `"away"` → Wird als "Abwesend" angezeigt
|
||||
- `"dnd"` → Wird als "Nicht stören" angezeigt
|
||||
- `"custom"` → Wird als "Custom" angezeigt (oder beliebiger Text)
|
||||
|
||||
**Mögliche Farben:**
|
||||
- `"green"` → Grüner Punkt
|
||||
- `"yellow"` → Gelber Punkt
|
||||
- `"red"` → Roter Punkt
|
||||
- `"gray"` → Grauer Punkt
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Option 2: Status über Datenbank setzen
|
||||
|
||||
Falls dein n8n Workflow die Datenbank liest, kannst du den Status dort setzen:
|
||||
|
||||
### Schritt 1: Datenbank-Update
|
||||
|
||||
```sql
|
||||
-- Status über status_mood und status_message setzen
|
||||
UPDATE activity_status
|
||||
SET
|
||||
status_mood = '🔴', -- Emoji für den Status
|
||||
status_message = 'Do Not Disturb - In Deep Work'
|
||||
WHERE id = 1;
|
||||
```
|
||||
|
||||
### Schritt 2: n8n Workflow anpassen
|
||||
|
||||
Dein n8n Workflow muss dann die Datenbank-Daten in das richtige Format umwandeln:
|
||||
|
||||
```javascript
|
||||
// Function Node: Convert Database to API Format
|
||||
const dbData = items[0].json;
|
||||
|
||||
// Bestimme Status-Text basierend auf status_mood oder status_message
|
||||
let statusText = "online";
|
||||
let statusColor = "green";
|
||||
|
||||
if (dbData.status_message?.toLowerCase().includes("dnd") ||
|
||||
dbData.status_message?.toLowerCase().includes("do not disturb")) {
|
||||
statusText = "dnd";
|
||||
statusColor = "red";
|
||||
} else if (dbData.status_message?.toLowerCase().includes("away") ||
|
||||
dbData.status_message?.toLowerCase().includes("abwesend")) {
|
||||
statusText = "away";
|
||||
statusColor = "yellow";
|
||||
} else if (dbData.status_message?.toLowerCase().includes("offline")) {
|
||||
statusText = "offline";
|
||||
statusColor = "gray";
|
||||
}
|
||||
|
||||
return [{
|
||||
json: {
|
||||
status: {
|
||||
text: statusText,
|
||||
color: statusColor
|
||||
},
|
||||
// ... rest of data
|
||||
}
|
||||
}];
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Option 3: Status über Webhook setzen
|
||||
|
||||
Erstelle einen separaten n8n Workflow, um den Status manuell zu ändern:
|
||||
|
||||
### Workflow: "Set Status"
|
||||
|
||||
**Node 1: Webhook (POST)**
|
||||
- Path: `set-status`
|
||||
- Method: POST
|
||||
|
||||
**Node 2: Function Node**
|
||||
```javascript
|
||||
// Parse incoming data
|
||||
const { statusText, statusColor } = items[0].json.body;
|
||||
|
||||
// Update database
|
||||
return [{
|
||||
json: {
|
||||
query: "UPDATE activity_status SET status_message = $1 WHERE id = 1",
|
||||
params: [statusText]
|
||||
}
|
||||
}];
|
||||
```
|
||||
|
||||
**Node 3: PostgreSQL Node**
|
||||
- Operation: Execute Query
|
||||
- Query: `={{$json.query}}`
|
||||
- Parameters: `={{$json.params}}`
|
||||
|
||||
**Node 4: Respond to Webhook**
|
||||
```json
|
||||
{
|
||||
"success": true,
|
||||
"message": "Status updated"
|
||||
}
|
||||
```
|
||||
|
||||
**Verwendung:**
|
||||
```bash
|
||||
curl -X POST https://your-n8n.com/webhook/set-status \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"statusText": "dnd", "statusColor": "red"}'
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Status-Text Übersetzungen in der Website
|
||||
|
||||
Die Website übersetzt folgende Status-Texte automatisch:
|
||||
|
||||
| n8n Status-Text | Website-Anzeige |
|
||||
|----------------|-----------------|
|
||||
| `"dnd"` | "Nicht stören" |
|
||||
| `"online"` | "Online" |
|
||||
| `"offline"` | "Offline" |
|
||||
| `"away"` | "Abwesend" |
|
||||
| Andere | Wird 1:1 angezeigt |
|
||||
|
||||
**Wo wird übersetzt?**
|
||||
- Datei: `app/components/ActivityFeed.tsx`
|
||||
- Zeile: ~1559-1567
|
||||
|
||||
Falls du einen neuen Status-Text hinzufügen willst, musst du die Übersetzung dort hinzufügen.
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Praktische Beispiele
|
||||
|
||||
### Beispiel 1: "Focus Mode" Status
|
||||
|
||||
**In n8n Function Node:**
|
||||
```javascript
|
||||
return [{
|
||||
json: {
|
||||
status: {
|
||||
text: "focus", // Neuer Status
|
||||
color: "red"
|
||||
},
|
||||
// ... rest
|
||||
}
|
||||
}];
|
||||
```
|
||||
|
||||
**In ActivityFeed.tsx hinzufügen:**
|
||||
```typescript
|
||||
{data.status.text === "dnd"
|
||||
? "Nicht stören"
|
||||
: data.status.text === "focus" // ← Neue Übersetzung
|
||||
? "Fokus-Modus"
|
||||
: data.status.text === "online"
|
||||
? "Online"
|
||||
// ... rest
|
||||
}
|
||||
```
|
||||
|
||||
### Beispiel 2: Status basierend auf Uhrzeit
|
||||
|
||||
**In n8n Function Node:**
|
||||
```javascript
|
||||
const hour = new Date().getHours();
|
||||
let statusText = "online";
|
||||
let statusColor = "green";
|
||||
|
||||
if (hour >= 22 || hour < 7) {
|
||||
statusText = "dnd";
|
||||
statusColor = "red";
|
||||
} else if (hour >= 9 && hour < 17) {
|
||||
statusText = "online";
|
||||
statusColor = "green";
|
||||
} else {
|
||||
statusText = "away";
|
||||
statusColor = "yellow";
|
||||
}
|
||||
|
||||
return [{
|
||||
json: {
|
||||
status: { text: statusText, color: statusColor },
|
||||
// ... rest
|
||||
}
|
||||
}];
|
||||
```
|
||||
|
||||
### Beispiel 3: Status über Discord Bot
|
||||
|
||||
**Discord Command:**
|
||||
```
|
||||
!status dnd
|
||||
!status online
|
||||
!status away
|
||||
```
|
||||
|
||||
**n8n Workflow:**
|
||||
```javascript
|
||||
// Parse Discord command
|
||||
const command = items[0].json.content.split(' ')[1]; // "dnd", "online", etc.
|
||||
|
||||
return [{
|
||||
json: {
|
||||
status: {
|
||||
text: command,
|
||||
color: command === "dnd" ? "red" : command === "away" ? "yellow" : "green"
|
||||
}
|
||||
}
|
||||
}];
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🐛 Troubleshooting
|
||||
|
||||
### Problem: Status-Text ändert sich nicht
|
||||
|
||||
**Lösung:**
|
||||
1. Prüfe, ob der n8n Workflow aktiviert ist
|
||||
2. Prüfe die Webhook-URL in `app/api/n8n/status/route.ts`
|
||||
3. Prüfe die Browser-Konsole auf Fehler
|
||||
4. Prüfe n8n Execution Logs
|
||||
|
||||
### Problem: Status wird nicht angezeigt
|
||||
|
||||
**Lösung:**
|
||||
1. Prüfe, ob das `status` Objekt im JSON vorhanden ist
|
||||
2. Prüfe, ob `status.text` und `status.color` gesetzt sind
|
||||
3. Prüfe die Browser-Konsole: `console.log("ActivityFeed data:", json)`
|
||||
|
||||
### Problem: Übersetzung funktioniert nicht
|
||||
|
||||
**Lösung:**
|
||||
1. Prüfe, ob der Status-Text exakt übereinstimmt (case-sensitive)
|
||||
2. Füge die Übersetzung in `ActivityFeed.tsx` hinzu
|
||||
3. Baue die Website neu: `npm run build`
|
||||
|
||||
---
|
||||
|
||||
## 📚 Weitere Ressourcen
|
||||
|
||||
- [n8n Documentation](https://docs.n8n.io/)
|
||||
- [N8N_INTEGRATION.md](./N8N_INTEGRATION.md) - Vollständige n8n Integration
|
||||
- [DYNAMIC_ACTIVITY_MANAGEMENT.md](./DYNAMIC_ACTIVITY_MANAGEMENT.md) - Activity Management
|
||||
|
||||
---
|
||||
|
||||
## 💡 Quick Reference
|
||||
|
||||
**Status-Text ändern:**
|
||||
1. Öffne n8n Dashboard
|
||||
2. Finde den Status-Workflow
|
||||
3. Ändere `status.text` im Function/Set Node
|
||||
4. Aktiviere den Workflow
|
||||
5. Warte 30 Sekunden (Cache-Intervall)
|
||||
|
||||
**Neue Übersetzung hinzufügen:**
|
||||
1. Öffne `app/components/ActivityFeed.tsx`
|
||||
2. Füge neue Bedingung hinzu (Zeile ~1559)
|
||||
3. Baue neu: `npm run build`
|
||||
4. Deploy
|
||||
|
||||
---
|
||||
|
||||
Happy automating! 🎉
|
||||
Reference in New Issue
Block a user