Admin Dashboard
ממשק ניהול עם Angular ו-Firebase
סקירה כללית
ממשק ניהול מודרני המבוסס על Angular 17 ו-Firebase. כולל ניהול משתמשים, ניהול תוכן, אנליטיקס, ומערכת הרשאות מתקדמת. הממשק תומך בתצוגה מותאמת לנייד ומציע חוויית משתמש עשירה.
תכונות עיקריות
- ניהול משתמשים
- ניהול תוכן
- אנליטיקס בזמן אמת
- מערכת הרשאות
טכנולוגיות
Angular 17
- Signals
- Standalone Components
- Server-Side Rendering
Firebase
- Authentication
- Firestore
- Cloud Functions
UI Libraries
- Angular Material
- TailwindCSS
- Chart.js
הוראות התקנה
# Clone repository
git clone https://github.com/devops-israel/admin-dashboard
# Install dependencies
npm install
# Configure Firebase
cp .env.example .env
# Edit .env with your Firebase config
# Start development server
ng serve
קומפוננטות מרכזיות
// User Management Component
@Component({
selector: 'app-user-management',
standalone: true,
template: `
@for (user of users(); track user.id) {
{{ user.name }}
}
`
})
export class UserManagementComponent {
users = signal([]);
constructor(private userService: UserService) {
this.loadUsers();
}
async loadUsers() {
this.users.set(await this.userService.getUsers());
}
}
שירותים
// Authentication Service
@Injectable({ providedIn: 'root' })
export class AuthService {
user$ = this.auth.authState;
constructor(private auth: Auth) {}
async login(email: string, password: string) {
return signInWithEmailAndPassword(
this.auth,
email,
password
);
}
async logout() {
return this.auth.signOut();
}
}
// Data Service
@Injectable({ providedIn: 'root' })
export class DataService {
constructor(private firestore: Firestore) {}
getCollection(path: string) {
return collectionData(
collection(this.firestore, path)
);
}
}
Firebase קונפיגורציה
// firebase.config.ts
export const firebaseConfig = {
apiKey: "your-api-key",
authDomain: "your-domain.firebaseapp.com",
projectId: "your-project-id",
storageBucket: "your-bucket.appspot.com",
messagingSenderId: "your-sender-id",
appId: "your-app-id",
measurementId: "your-measurement-id"
};
// Security Rules
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /users/{userId} {
allow read: if request.auth != null;
allow write: if request.auth.uid == userId;
}
match /settings/{document=**} {
allow read: if true;
allow write: if request.auth.token.admin == true;
}
}
}
אנליטיקס
User Analytics
- משתמשים פעילים
- זמני שימוש
- דפים נצפים
Performance
- זמני טעינה
- שימוש במשאבים
- שגיאות
Business Metrics
- המרות
- הכנסות
- מגמות