🚀 Веб-разработка с нуля: Урок 18 - Автоматические напоминания
Привет, разработчики! 👨💻👩💻
Сегодня научим наш To-Do List отправлять автоматические напоминания о важных задачах в заданное время.
⏰ Что нового:
1. Работа с датами и временем в JavaScript
2. Использование Firebase Cloud Functions
3. Планирование уведомлений
📅 Как это будет работать:
1. Пользователь устанавливает дедлайн для задачи
2. Система запланирует уведомление
3. Firebase отправит напоминание в нужное время
💻 Практика: добавляем дедлайны
1. Добавляем поле для даты в HTML:
2. Модифицируем функцию добавления задачи:
3. Создаем Cloud Function для уведомлений:
🔔 Что мы улучшили:
✅ Добавили выбор дедлайна для задач
✅ Настроили автоматические напоминания
✅ Использовали Cloud Functions для планирования
✅ Сохранили время создания задачи
💡 Профессиональные советы:
1. Для точного планирования используйте Cloud Tasks API
2. Добавьте повторяющиеся напоминания:
3. Валидируйте ввод даты:
👉 В следующем уроке:
Добавим совместную работу над задачами!
Подписывайтесь: [t.me/rm_programmer](https://t.me/rm_programmer)
Какие функции хотели бы видеть в следующих уроках? 💬
#вебразработка #Firebase #CloudFunctions #Уведомления #JavaScript
Привет, разработчики! 👨💻👩💻
Сегодня научим наш 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