🚀 Веб-разработка с нуля: Урок 19 - Совместная работа над задачами

Привет, разработчики! 👨💻👩💻
Сегодня превратим наш To-Do List в многофункциональный инструмент для командной работы!

🤝 Что нового:
1. Система совместного доступа к задачам
2. Редактирование в реальном времени
3. Индикация активности пользователей

💡 Как это будет работать:
1. Пользователь приглашает участников по email
2. Все изменения синхронизируются мгновенно
3. Каждый видит, кто и что редактирует

💻 Практика: добавляем совместный доступ

1. Добавляем интерфейс для приглашений:

<div class="collaboration-panel">
  <input type="email" id="inviteEmail" placeholder="Пригласить по email">
  <button id="inviteButton">Пригласить</button>
  <div id="collaboratorsList"></div>
</div>

2. Модифицируем структуру данных в Firebase:

function shareTask(taskId, email) {
  const userId = firebase.auth().currentUser.uid;
  const shareRef = database.ref(`sharedTasks/${taskId}`);
  
  shareRef.push({
    userId: userId,
    email: email,
    accessLevel: 'editor',
    sharedAt: firebase.database.ServerValue.TIMESTAMP
  });
  
  // Отправляем email-приглашение через Cloud Function
  firebase.functions().httpsCallable('sendInvitation')({
    taskId: taskId,
    email: email
  });
}

3. Создаем Cloud Function для приглашений:

exports.sendInvitation = functions.https.onCall((data, context) => {
  const taskId = data.taskId;
  const email = data.email;
  
  // Отправка email через SendGrid или другой сервис
  return sendEmail({
    to: email,
    subject: 'Приглашение к совместной работе',
    html: `Вас пригласили редактировать задачу: <a href="https://вашсайт.com/task/${taskId}">Открыть</a>`
  });
});

4. Добавляем индикацию активности:

// Отслеживаем активных пользователей
function trackPresence() {
  const userId = firebase.auth().currentUser.uid;
  const presenceRef = database.ref(`status/${userId}`);
  
  firebase.database().ref('.info/connected').on('value', snap => {
    if (snap.val()) {
      presenceRef.onDisconnect().set('offline');
      presenceRef.set('online');
    }
  });
}

👥 Что мы добавили:
✅ Систему приглашений по email
✅ Общий доступ к задачам
✅ Индикацию онлайн-статуса
✅ Безопасный доступ через Firebase Rules

🔒 Настраиваем правила безопасности:

{
  "rules": {
    "sharedTasks": {
      "$taskId": {
        ".read": "auth != null && root.child('tasks/'+$taskId+'/owner').val() == auth.uid",
        ".write": "auth != null && root.child('tasks/'+$taskId+'/owner').val() == auth.uid"
      }
    }
  }
}

💡 Профессиональные советы:
1. Добавьте разные уровни доступа (просмотр/редактирование)
2. Реализуйте историю изменений:

function logChange(taskId, change) {
  database.ref(`taskHistory/${taskId}`).push({
    change: change,
    by: firebase.auth().currentUser.uid,
    at: firebase.database.ServerValue.TIMESTAMP
  });
}

3. Используйте аватары пользователей:

.user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 8px;
}

👉 В следующем уроке:
Добавим чат к задачам для обсуждения!

Подписывайтесь: [t.me/rm_programmer](https://t.me/rm_programmer)
Как вам система совместной работы? Пишите идеи! 💬

#вебразработка #Firebase #Collaboration #JavaScript #RealTime