rm -r

🚀 Веб-разработка с нуля: Урок 3

Привет, будущие разработчики! 👋
В прошлых уроках мы создали HTML-страницу и добавили ей стили с помощью CSS. Сегодня мы сделаем наш сайт интерактивным с помощью JavaScript!

📌 Что такое JavaScript?
JavaScript — это язык программирования, который позволяет добавлять динамику на ваш сайт: анимации, обработку кликов, взаимодействие с пользователем и многое другое.

🛠 Как подключить JavaScript к HTML?
Есть два основных способа:
1. Inline-скрипт — прямо в HTML-файле с помощью тега <script>.
2. Отдельный файл — самый удобный способ.

📝 Практика:
Давайте добавим простой скрипт, который будет показывать сообщение при клике на кнопку.

1. Создайте файл script.js и подключите его к HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Мой первый сайт</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Привет, мир!</h1>
    <p>Это мой первый шаг в веб-разработке.</p>
    <button id="myButton">Нажми на меня</button>
    <script src="script.js"></script>
</body>
</html>

2. Добавьте скрипт в файл script.js:

document.getElementById("myButton").addEventListener("click", function() {
    alert("Вы нажали на кнопку! 🎉");
});

Сохраните файлы и откройте HTML-страницу в браузере. Теперь при нажатии на кнопку вы увидите сообщение! 🚀

👉 В следующем уроке:
Мы начнем изучать основы работы с DOM (Document Object Model) и узнаем, как динамически изменять содержимое страницы.

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

#вебразработка #javascript #html #css #программирование #rm_programmer

5 views06:02

rm -r

🚀 Веб-разработка с нуля: Урок 4

Привет, будущие разработчики! 👋
В прошлом уроке мы добавили интерактивности на сайт с помощью JavaScript. Сегодня мы углубимся в работу с DOM (Document Object Model) и научимся динамически изменять содержимое страницы.

📌 Что такое DOM?
DOM — это программный интерфейс, который позволяет JavaScript взаимодействовать с HTML-документом. С его помощью можно изменять структуру, стили и содержимое страницы "на лету".

🛠 Основные методы работы с DOM:
1. Выбор элементов:
- document.getElementById("id") — выбор элемента по id.
- document.querySelector(".class") — выбор элемента по классу или тегу.
2. Изменение содержимого:
- element.textContent — изменение текста внутри элемента.
- element.innerHTML — изменение HTML-содержимого.
3. Добавление и удаление элементов:
- document.createElement("div") — создание нового элемента.
- element.appendChild(newElement) — добавление элемента в DOM.

📝 Практика:
Давайте создадим кнопку, которая будет добавлять новый элемент на страницу.

1. Обновите ваш HTML-файл:

<!DOCTYPE html>
<html>
<head>
    <title>Мой первый сайт</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Привет, мир!</h1>
    <p>Это мой первый шаг в веб-разработке.</p>
    <button id="addButton">Добавить элемент</button>
    <div id="container"></div>
    <script src="script.js"></script>
</body>
</html>

2. Добавьте стили в styles.css (по желанию):

#container {
    margin-top: 20px;
}

.new-element {
    background-color: #e0e0e0;
    padding: 10px;
    margin: 5px 0;
    border-radius: 5px;
}

3. Напишите скрипт в script.js:

document.getElementById("addButton").addEventListener("click", function() {
    // Создаем новый элемент
    const newElement = document.createElement("div");
    newElement.textContent = "Новый элемент добавлен!";
    newElement.classList.add("new-element");

    // Добавляем его в контейнер
    document.getElementById("container").appendChild(newElement);
});

Сохраните файлы и откройте HTML-страницу в браузере. Теперь при нажатии на кнопку "Добавить элемент" на странице будут появляться новые блоки! 🎉

👉 В следующем уроке:
Мы начнем изучать основы адаптивной верстки и сделаем наш сайт удобным для мобильных устройств.

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

#вебразработка #javascript #DOM #html #css #программирование #rm_programmer

6 views06:02

rm -r

🚀 Веб-разработка с нуля: Урок 10

Привет, будущие разработчики! 👋
В прошлых уроках мы изучили основы HTML, CSS, Flexbox и CSS Grid, создавая макеты и адаптивные страницы. Сегодня мы переходим к JavaScript и добавим интерактивности на наш сайт!

📌 Что такое JavaScript?
JavaScript — это язык программирования, который позволяет "оживить" ваш сайт: добавлять анимации, обрабатывать действия пользователя, взаимодействовать с сервером и многое другое.

🛠 Основы JavaScript:
1. Переменные:
Используйте let, const или var для хранения данных.
2. Функции:
Функции позволяют выполнять код по требованию.
3. События:
JavaScript может реагировать на действия пользователя, например, клики или наведение мыши.

📝 Практика:
Давайте создадим кнопку, которая будет менять цвет фона страницы при нажатии.

1. Обновите ваш HTML-файл:

<!DOCTYPE html>
<html>
<head>
    <title>Мой первый сайт</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Привет, мир!</h1>
        <button id="colorButton">Изменить цвет фона</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

2. Добавьте стили в styles.css:

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    text-align: center;
}

h1 {
    color: #333;
    font-size: 2.5em;
}

button {
    padding: 10px 20px;
    font-size: 1.2em;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

3. Добавьте JavaScript в script.js:

const button = document.getElementById("colorButton");
const colors = ["#ffcccc", "#ccffcc", "#ccccff", "#ffccff", "#ccffff"];
let currentIndex = 0;

button.addEventListener("click", function() {
    document.body.style.backgroundColor = colors[currentIndex];
    currentIndex = (currentIndex + 1) % colors.length; // Переход к следующему цвету
});

4. Проверьте результат:
Откройте страницу в браузере и нажмите на кнопку. Фон страницы будет меняться при каждом клике! 🎨

👉 В следующем уроке:
Мы изучим, как работать с DOM (Document Object Model) и динамически изменять содержимое страницы.

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

#вебразработка #javascript #html #css #программирование #rm_programmer

5 views06:00

rm -r

#вебразработка #javascript #DOM #программирование #учебныйпроект

rm -r

Programmer - Курсы программирования. Канал для тех, кто не хочет остаться на задворках цивилизации.

6 views06:03

rm -r

#вебразработка #javascript #localStorage #программирование #учебныйпроект

rm -r

Programmer - Курсы программирования. Канал для тех, кто не хочет остаться на задворках цивилизации.

5 views06:00

rm -r

🚀 Веб-разработка с нуля: Урок 13 - Создаем модальное окно

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

🔥 Что нового изучим:
1. Создание модальных окон на чистом CSS/JS
2. Работу с CSS-анимациями
3. Лучшие практики UX для модальных окон

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

1. Обновляем HTML:

<!-- Добавляем перед закрывающим </body> -->
<div id="modal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2>Редактировать задачу</h2>
    <input type="text" id="editInput">
    <button id="saveEdit">Сохранить</button>
  </div>
</div>

2. Добавляем новые стили:

.modal {
  display: none;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  animation: fadeIn 0.3s;
}

.modal-content {
  background: white;
  margin: 15% auto;
  padding: 20px;
  border-radius: 8px;
  width: 80%;
  max-width: 500px;
  animation: slideDown 0.3s;
}

.close {
  float: right;
  font-size: 24px;
  cursor: pointer;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideDown {
  from { 
    transform: translateY(-50px);
    opacity: 0;
  }
  to { 
    transform: translateY(0);
    opacity: 1;
  }
}

3. Модернизируем JavaScript:

// Добавляем в script.js
const modal = document.getElementById('modal');
const editInput = document.getElementById('editInput');
const saveEditBtn = document.getElementById('saveEdit');
let currentEditingTask = null;

// Показываем модальное окно при клике на задачу
document.querySelectorAll('#taskList li span').forEach(span => {
  span.addEventListener('click', function() {
    currentEditingTask = this;
    editInput.value = this.textContent;
    modal.style.display = 'block';
  });
});

// Закрытие модального окна
document.querySelector('.close').addEventListener('click', closeModal);
window.addEventListener('click', function(e) {
  if (e.target == modal) closeModal();
});

saveEditBtn.addEventListener('click', function() {
  if (editInput.value.trim() !== '') {
    currentEditingTask.textContent = editInput.value;
    closeModal();
    saveTasks();
  }
});

function closeModal() {
  modal.style.display = 'none';
  editInput.value = '';
}

🎯 Что мы получили:
✅ Плавные анимации открытия/закрытия
✅ Возможность редактирования задач
✅ Затенение фона при открытии модалки
✅ Закрытие по клику вне окна

💡 Профессиональные советы:
1. Всегда добавляйте анимации для плавности интерфейса
2. Реализуйте закрытие по ESC:

document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') closeModal();
});

3. Фокусируйте input при открытии:

editInput.focus();

👉 В следующем уроке:
Создадим drag&drop сортировку для нашего списка задач!

Подписывайтесь: [t.me/rm_programmer](https://t.me/rm_programmer)
Пишите, какие элементы интерфейса хотите научиться создавать! 💬

#вебразработка #javascript #модальноеокно #CSSанимации #UX

11 views06:02

rm -r

🚀 Веб-разработка с нуля: Урок 14 - Drag&Drop сортировка

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

🔥 Что нового освоим:
1. HTML5 Drag and Drop API
2. Работу с событиями перетаскивания
3. Сохранение порядка задач в localStorage

🖱 Основные события Drag&Drop:
- dragstart — начало перетаскивания
- dragover — элемент над областью сброса
- drop — сброс элемента
- dragend — завершение перетаскивания

💻 Реализуем сортировку:

1. Обновляем HTML (добавляем атрибуты draggable):

<ul id="taskList">
  <!-- Для каждого li добавляем -->
  <li draggable="true" data-id="1">...</li>
</ul>

2. Добавляем стили для перетаскивания:

/* В styles.css */
li[draggable="true"] {
  cursor: grab;
}

li.dragging {
  opacity: 0.5;
  background: #f8f9fa;
  border: 2px dashed #007bff;
}

li.drag-over {
  border-top: 2px solid #28a745;
}

3. Модернизируем JavaScript:

// В script.js
let draggedItem = null;

function setupDragAndDrop() {
  const items = document.querySelectorAll('#taskList li');
  
  items.forEach(item => {
    item.addEventListener('dragstart', function() {
      draggedItem = this;
      setTimeout(() => this.classList.add('dragging'), 0);
    });

    item.addEventListener('dragend', function() {
      this.classList.remove('dragging');
    });

    item.addEventListener('dragover', function(e) {
      e.preventDefault();
      this.classList.add('drag-over');
    });

    item.addEventListener('dragleave', function() {
      this.classList.remove('drag-over');
    });

    item.addEventListener('drop', function(e) {
      e.preventDefault();
      this.classList.remove('drag-over');
      
      if (draggedItem !== this) {
        const allItems = document.querySelectorAll('#taskList li');
        const thisIndex = [...allItems].indexOf(this);
        const draggedIndex = [...allItems].indexOf(draggedItem);
        
        if (draggedIndex < thisIndex) {
          this.after(draggedItem);
        } else {
          this.before(draggedItem);
        }
        
        saveTasks();
      }
    });
  });
}

// Вызываем после загрузки задач
loadTasks();
setupDragAndDrop();

4. Обновляем функции save/load:

function saveTasks() {
  const tasks = [];
  document.querySelectorAll('#taskList li').forEach(li => {
    tasks.push({
      text: li.querySelector('span').textContent,
      completed: li.classList.contains('completed'),
      id: Date.now() + Math.random() // Уникальный ID
    });
  });
  localStorage.setItem('tasks', JSON.stringify(tasks));
}

function loadTasks() {
  const savedTasks = localStorage.getItem('tasks');
  if (savedTasks) {
    taskList.innerHTML = '';
    JSON.parse(savedTasks).forEach(task => {
      addTask(task.text, task.completed, task.id);
    });
  }
}

🎯 Что мы получили:
✅ Плавную сортировку перетаскиванием
✅ Визуальные подсказки при перетаскивании
✅ Сохранение порядка между сеансами
✅ Полноценный менеджер задач уровня PRO

💡 Профессиональные лайфхаки:
1. Добавьте ограничение перетаскивания по вертикали:

item.addEventListener('dragover', function(e) {
  e.preventDefault();
  const dragY = e.clientY;
  const rect = this.getBoundingClientRect();
  const middleY = rect.top + rect.height / 2;
  
  if (dragY < middleY) {
    this.classList.add('drag-over-top');
  } else {
    this.classList.remove('drag-over-top');
  }
});

2. Используйте более плавную анимацию:

li {
  transition: transform 0.2s, opacity 0.2s;
}

👉 В следующем уроке:
Превратим наше приложение в PWA (Progressive Web App) с оффлайн-работой!

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

#вебразработка #javascript #DragAndDrop #UI #UX

4 views06:01

rm -r

🚀 Веб-разработка с нуля: Урок 15 - Превращаем To-Do List в PWA

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

🔥 Что нового узнаем:
1. Что такое PWA и его основные компоненты
2. Создание manifest.json
3. Работу с Service Worker

📱 Основные характеристики PWA:
✓ Работает оффлайн
✓ Устанавливается на устройство
✓ Быстрая загрузка

💻 Практика: преобразуем приложение

1. Создаем manifest.json:

{
  "name": "Мой To-Do List",
  "short_name": "ToDo",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#007bff",
  "icons": [
    {
      "src": "icon-192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "icon-512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}

2. Добавляем в head HTML:

<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#007bff">

3. Создаем sw.js (Service Worker):

const CACHE_NAME = 'todo-v1';
const ASSETS = [
  '/',
  '/index.html',
  '/styles.css',
  '/script.js',
  '/icon-192.png',
  '/icon-512.png'
];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => cache.addAll(ASSETS))
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});

4. Регистрируем Service Worker в script.js:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/sw.js')
      .then(registration => {
        console.log('ServiceWorker зарегистрирован');
      })
      .catch(err => {
        console.log('Ошибка регистрации:', err);
      });
  });
}

🔧 Что мы добавили:
✅ Манифест для установки приложения
✅ Иконки для разных устройств
✅ Service Worker для оффлайн-работы
✅ Кеширование основных ресурсов

💡 Профессиональные советы:
1. Для генерации иконок используйте https://www.pwabuilder.com/imageGenerator
2. Добавьте splash screen:

// В manifest.json
"splash_pages": null

3. Оптимизируйте кеширование:

// В sw.js
const ASSETS = [
  '/',
  '/index.html',
  '/styles.css',
  '/script.js',
  '/icon-192.png',
  '/icon-512.png'
];

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

Подписывайтесь: [t.me/rm_programmer](https://t.me/rm_programmer)
Пробовали ли вы уже PWA? Делитесь в комментариях! 💬

#вебразработка #PWA #javascript #ServiceWorker #программирование

3 views06:02

rm -r

🚀 Веб-разработка с нуля: Урок 16 - Подключаем Firebase для синхронизации задач

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

🔥 Что нового изучим:
1. Настройку Firebase Realtime Database
2. Работу с аутентификацией
3. Синхронизацию данных в реальном времени

☁️ Почему Firebase?
✓ Бесплатный стартовый тариф
✓ Реальное время обновлений
✓ Простая интеграция

💻 Практика: подключаем облако

1. Регистрируем проект на [firebase.google.com](https://firebase.google.com)
2. Добавляем Firebase в проект:

<!-- В head -->
<script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-database-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-auth-compat.js"></script>

3. Инициализируем Firebase:

const firebaseConfig = {
  apiKey: "ВАШ_API_KEY",
  authDomain: "ВАШ_PROJECT.firebaseapp.com",
  databaseURL: "https://ВАШ_PROJECT.firebaseio.com",
  projectId: "ВАШ_PROJECT",
  storageBucket: "ВАШ_PROJECT.appspot.com",
  messagingSenderId: "ВАШ_SENDER_ID",
  appId: "ВАШ_APP_ID"
};

firebase.initializeApp(firebaseConfig);
const database = firebase.database();

4. Модернизируем логику работы с задачами:

// Авторизация анонимного пользователя
firebase.auth().signInAnonymously()
  .then(() => {
    console.log('Анонимная авторизация успешна');
    initDatabase();
  });

function initDatabase() {
  const userId = firebase.auth().currentUser.uid;
  const tasksRef = database.ref(`users/${userId}/tasks`);

  // Синхронизация с сервером
  tasksRef.on('value', (snapshot) => {
    const data = snapshot.val() || {};
    renderTasks(data);
  });
}

function saveTaskToCloud(task) {
  const userId = firebase.auth().currentUser.uid;
  database.ref(`users/${userId}/tasks/${task.id}`).set(task);
}

function deleteTaskFromCloud(taskId) {
  const userId = firebase.auth().currentUser.uid;
  database.ref(`users/${userId}/tasks/${taskId}`).remove();
}

🔌 Что мы изменили в логике:
1. Заменяем localStorage на Firebase Realtime Database
2. Добавляем анонимную авторизацию
3. Реализуем мгновенную синхронизацию

💡 Профессиональные советы:
1. Для продакшена настройте правила безопасности:

// В Firebase Console -> Rules
{
  "rules": {
    "users": {
      "$uid": {
        ".read": "auth != null && auth.uid == $uid",
        ".write": "auth != null && auth.uid == $uid"
      }
    }
  }
}

2. Добавьте обработку ошибок:

firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    initDatabase();
  } else {
    console.error('Ошибка авторизации');
  }
});

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

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

#вебразработка #Firebase #RealtimeDatabase #javascript #программирование

4 views06:03

rm -r

🚀 Веб-разработка с нуля: Урок 17 - Добавляем push-уведомления

Привет, разработчики! 👨💻👩💻
Сегодня научим наш To-Do List отправлять push-уведомления через Firebase Cloud Messaging (FCM).

🔥 Что нового:
1. Настройка FCM в Firebase
2. Получение токена устройства
3. Отправка и обработка уведомлений

📲 Как работают push-уведомления:
1. Пользователь разрешает уведомления
2. Браузер получает уникальный токен
3. Сервер отправляет уведомление по токену

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

1. Подключаем FCM в проекте Firebase Console
2. Добавляем скрипт в HTML:

<script src="https://www.gstatic.com/firebasejs/9.6.0/firebase-messaging-compat.js"></script>

3. Инициализируем Messaging:

const messaging = firebase.messaging();

// Запрашиваем разрешение
function requestNotificationPermission() {
  Notification.requestPermission().then(permission => {
    if (permission === 'granted') {
      console.log('Уведомления разрешены');
      getToken();
    }
  });
}

// Получаем токен устройства
function getToken() {
  messaging.getToken({vapidKey: "ВАШ_VAPID_KEY"})
    .then(token => {
      console.log('Токен устройства:', token);
      saveToken(token);
    });
}

// Сохраняем токен в БД
function saveToken(token) {
  const userId = firebase.auth().currentUser.uid;
  database.ref(`users/${userId}/fcmToken`).set(token);
}

4. Обрабатываем входящие уведомления:

// Для работающего приложения
messaging.onMessage(payload => {
  console.log('Уведомление:', payload);
  showNotification(payload.notification);
});

// Для закрытого приложения
messaging.setBackgroundMessageHandler(payload => {
  return self.registration.showNotification(
    payload.notification.title,
    payload.notification
  );
});

function showNotification(notification) {
  new Notification(notification.title, {
    body: notification.body,
    icon: '/icon-192.png'
  });
}

🔔 Что мы добавили:
✅ Запрос разрешения на уведомления
✅ Сохранение токена устройства
✅ Обработку входящих сообщений
✅ Красивые браузерные уведомления

💡 Профессиональные советы:
1. Добавьте кнопку для управления уведомлениями:

<button id="notifyBtn">Включить уведомления</button>

document.getElementById('notifyBtn').addEventListener('click', requestNotificationPermission);

2. Отправляйте тестовое уведомление через Firebase Console

3. Используйте кастомные иконки:

{
  notification: {
    title: "Новая задача",
    body: "Не забудьте выполнить!",
    icon: "/icon-192.png",
    click_action: "https://вашсайт.com/tasks"
  }
}

👉 В следующем уроке:
Настроим автоматические напоминания о задачах!

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

#вебразработка #Firebase #PushУведомления #FCM #javascript

5 views06:00

rm -r

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

8 views06:03

rm -r

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

7 views07:01

rm -r

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

8 views06:03

About

Blog

Apps

Platform