🚀 Веб-разработка с нуля: Урок 18 - Автоматические напоминания

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

⏰ Что нового:
1. Работа с датами и временем в JavaScript
2. Использование Firebase Cloud Functions
3. Планирование уведомлений

📅 Как это будет работать:
1. Пользователь устанавливает дедлайн для задачи
2. Система запланирует уведомление
3. Firebase отправит напоминание в нужное время

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

1. Добавляем поле для даты в HTML:

<div class="task-form">
  <input type="text" id="taskInput" placeholder="Новая задача...">
  <input type="datetime-local" id="taskDeadline">
  <button id="addButton">Добавить</button>
</div>

2. Модифицируем функцию добавления задачи:

function addTask() {
  const taskText = taskInput.value;
  const deadline = taskDeadline.value;
  
  if (taskText) {
    const task = {
      id: Date.now(),
      text: taskText,
      completed: false,
      deadline: deadline || null,
      createdAt: firebase.database.ServerValue.TIMESTAMP
    };
    
    saveTaskToCloud(task);
    if (deadline) scheduleNotification(task);
  }
}

3. Создаем Cloud Function для уведомлений:

// В файле functions/index.js
const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();

exports.scheduleNotification = functions.database
  .ref('/users/{userId}/tasks/{taskId}')
  .onCreate(async (snapshot, context) => {
    const task = snapshot.val();
    
    if (task.deadline) {
      const deadline = new Date(task.deadline);
      const now = new Date();
      
      if (deadline > now) {
        const delay = deadline.getTime() - now.getTime();
        
        await new Promise(resolve => setTimeout(resolve, delay));
        
        const userRef = admin.database().ref(`users/${context.params.userId}`);
        const user = (await userRef.once('value')).val();
        
        if (user.fcmToken) {
          await admin.messaging().sendToDevice(user.fcmToken, {
            notification: {
              title: '⏰ Напоминание о задаче',
              body: task.text,
              clickAction: 'https://вашсайт.com/tasks'
            }
          });
        }
      }
    }
  });

🔔 Что мы улучшили:
✅ Добавили выбор дедлайна для задач
✅ Настроили автоматические напоминания
✅ Использовали Cloud Functions для планирования
✅ Сохранили время создания задачи

💡 Профессиональные советы:
1. Для точного планирования используйте Cloud Tasks API
2. Добавьте повторяющиеся напоминания:

// В объекте задачи
reminder: {
  repeat: 'daily',
  until: '2023-12-31'
}

3. Валидируйте ввод даты:

if (new Date(deadline) < new Date()) {
  alert('Выберите дату в будущем!');
  return;
}

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

Подписывайтесь: [t.me/rm_programmer](https://t.me/rm_programmer)
Какие функции хотели бы видеть в следующих уроках? 💬

#вебразработка #Firebase #CloudFunctions #Уведомления #JavaScript

🚀 Веб-разработка с нуля: Урок 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

🚀 Веб-разработка с нуля: Урок 20 - Чат к задачам и подведение итогов

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

💬 Что нового:
1. Реализуем чат для обсуждения задач
2. Добавим уведомления о новых сообщениях
3. Подведем итоги всего курса

📌 Как будет работать чат:
• Каждая задача получает свой чат
• Сообщения сохраняются в Firebase
• Участники получают уведомления

💻 Практика: добавляем чат

1. Добавляем HTML-разметку:

<div class="task-chat">
  <div id="chatMessages"></div>
  <div class="chat-input">
    <input type="text" id="chatInput" placeholder="Ваше сообщение...">
    <button id="sendMessageBtn">Отправить</button>
  </div>
</div>

2. Настраиваем структуру в Firebase:

function sendMessage(taskId, message) {
  const userId = firebase.auth().currentUser.uid;
  database.ref(`taskChats/${taskId}`).push({
    text: message,
    sender: userId,
    timestamp: firebase.database.ServerValue.TIMESTAMP
  });
}

function loadMessages(taskId) {
  database.ref(`taskChats/${taskId}`).on('value', snapshot => {
    const messages = [];
    snapshot.forEach(child => {
      messages.push({
        id: child.key,
        ...child.val()
      });
    });
    renderMessages(messages);
  });
}

3. Добавляем стили для чата:

.task-chat {
  border-top: 1px solid #eee;
  margin-top: 20px;
  padding-top: 15px;
}

#chatMessages {
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 10px;
}

.chat-message {
  margin-bottom: 8px;
  padding: 8px 12px;
  background: #f5f5f5;
  border-radius: 12px;
  display: inline-block;
  max-width: 70%;
}

.my-message {
  background: #007bff;
  color: white;
  float: right;
}

🎓 Итоги 20 уроков:
✅ Создали полноценное веб-приложение
✅ Реализовали:
- Работу с DOM
- Адаптивную верстку
- PWA-функционал
- Firebase-интеграцию
- Совместную работу
- Чат к задачам

🚀 Что дальше?
1. Дорабатываем приложение:
- Добавляем теги к задачам
- Реализуем поиск и фильтрацию
- Улучшаем UI/UX

2. Публикуем проект:
- Настраиваем хостинг Firebase
- Регистрируем домен
- Добавляем в App Store/Google Play через PWA

💡 Главные выводы:
1. Современная веб-разработка — это мощно и увлекательно
2. JavaScript + Firebase — отличный стек для старта
3. Лучший способ научиться — делать реальные проекты

📢 Важно:
Весь код доступен в GitHub-репозитории: [ссылка]
Присоединяйтесь к чату участников: [@rm_programmer_chat]

Подписывайтесь: [t.me/rm_programmer](https://t.me/rm_programmer)
Делитесь своими реализациями — лучшие проекты мы разберем в канале!

#вебразработка #Итоги #JavaScript #Firebase #PWA