Практичне заняття по додаванню сповіщень у Django-додаток

Давай створимо повноцінний практичний приклад — систему сповіщень для поточного проєкту, додавши повідомлення в збірний код нашого додатку, щоб сповіщати користувачів про результати їх взаємодій.

Під час заняття ти:

1. Реалізуєш сповіщення для операцій CRUD (створення, читання, оновлення, видалення).
2. Налаштуєш відображення повідомлень у шаблонах.
3. Додаси сповіщення з редиректом.
4. Зробиш кастомізацію зовнішнього вигляду повідомлень для покращення користувацького досвіду.

Крок 1: підготовка оточення і базові налаштування

Перш ніж перейти до реалізації, переконаємося, що наш додаток готовий до додавання системи повідомлень.

Для початку переконайтеся, що Django Message Framework підключений у вашому проєкті. За замовчуванням, він вже увімкнений, але перевірити це ніколи не завадить (адже програмісти — істоти ледачі, але прискіпливі!).

У файлі settings.py перевірте наявність django.contrib.messages у налаштуванні INSTALLED_APPS:

INSTALLED_APPS = [
    ...
    'django.contrib.messages',
    ...
]

Тепер відкрийте settings.py і переконайтеся, що MIDDLEWARE містить MessageMiddleware:

MIDDLEWARE = [
    ...
    'django.contrib.messages.middleware.MessageMiddleware',
    ...
]

Якщо ці компоненти підключені, ми готові до роботи!

Крок 2: додавання повідомлень у представлення

Давай реалізуємо сповіщення у представленнях. Ми будемо використовувати операції CRUD як основу для нашої логіки.

Припустимо, що у нас є модель Task для управління списком завдань:

from django.db import models

class Task(models.Model):
    title = models.CharField(max_length=255)
    description = models.TextField()
    completed = models.BooleanField(default=False)

    def __str__(self):
        return self.title

Створимо просте представлення для додавання завдань зі сповіщенням про результат.

from django.shortcuts import render, redirect
from django.contrib import messages
from .models import Task

def create_task(request):
    if request.method == 'POST':
        title = request.POST.get('title')
        description = request.POST.get('description')

        if title and description:
            Task.objects.create(title=title, description=description)
            messages.success(request, 'Завдання успішно створено!')
        else:
            messages.error(request, 'Не вдалося створити завдання. Перевірте введені дані.')
        return redirect('task_list')

    return render(request, 'tasks/create_task.html')

У цьому коді:

• Повідомлення success з'являється, якщо завдання було успішно створено.
• - Повідомлення error відображається у разі помилки.

Редагування завдань зі сповіщенням

Тепер додамо можливість редагувати завдання разом зі сповіщеннями.

from django.shortcuts import get_object_or_404

def edit_task(request, task_id):
    task = get_object_or_404(Task, id=task_id)

    if request.method == 'POST':
        title = request.POST.get('title', task.title)
        description = request.POST.get('description', task.description)

        task.title = title
        task.description = description
        task.save()

        messages.info(request, 'Завдання успішно оновлено.')
        return redirect('task_list')

    return render(request, 'tasks/edit_task.html', {'task': task})

Видалення завдання зі сповіщенням

І наостанок — видалення завдання:

def delete_task(request, task_id):
    task = get_object_or_404(Task, id=task_id)
    task.delete()
    messages.warning(request, f'Завдання "{task.title}" було видалено.')
    return redirect('task_list')

Крок 3: відображення повідомлень у шаблонах

Щоб сповіщення відображалися в інтерфейсі, додамо в базовий шаблон блок для рендера повідомлень.

Відкрийте base.html і додайте наступний код:

{% if messages %}
    <div class="messages">
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }}">
                {{ message }}
            </div>
        {% endfor %}
    </div>
{% endif %}

Стилізація сповіщень

Використовуючи CSS-фреймворк Bootstrap, повідомлення автоматично стануть стильними завдяки класу alert-{type}. Наприклад:

• alert-success для успішних повідомлень,
• alert-success для успішних повідомлень,
• alert-danger для помилок і т.д.

Не забудьте підключити Bootstrap у ваш базовий шаблон:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

Крок 4: Сповіщення з редиректами

Дуже часто після виконання дії (наприклад, збереження форми) потрібно автоматично перенаправити користувача на іншу сторінку. Ми вже додали такі приклади вище, наприклад, у функції create_task. Розберемо це детальніше на ще одному прикладі.

from django.http import HttpResponseRedirect

def mark_as_completed(request, task_id):
    task = get_object_or_404(Task, id=task_id)
    task.completed = True
    task.save()
    messages.success(request, f'Задача "{task.title}" відзначена як виконана.')
    return HttpResponseRedirect('/tasks/')

Тут ми:

1. Оновлюємо статус задачі.
2. Додаємо повідомлення.
3. Редиректимо користувача на список задач.

Крок 5: робота з тимчасовими повідомленнями

Усі повідомлення в Django Message Framework за замовчуванням є тимчасовими. Це означає, що вони зникають після відображення. Для демонстрації перевіримо, як це працює:

1. Додайте обробку повідомлень в create_task (ми це вже зробили в кроці 2).
2. Відкрийте сторінку створення задачі, створіть задачу.
3. Перейдіть на іншу сторінку (наприклад, список задач) — повідомлення має з’явитися.
4. Оновіть сторінку — повідомлення зникнуть.

Тимчасові повідомлення підійдуть для редиректів, коли ви хочете сповістити користувача лише один раз після виконання дії.

Крок 6: фінальне завдання

Тепер, коли ви знаєте, як налаштувати Django Message Framework, у нас є завдання для вас.

1. Налаштуйте Django Message Framework у вашому проєкті, якщо ви цього ще не зробили.
2. Додайте сповіщення для наступних дій:
   • Створення об'єкта (наприклад, новий пост, нове завдання, новий елемент).
   • Редагування об'єкта.
   • Видалення об'єкта.
   • Помилки під час виконання дій (наприклад, неправильні дані у формі).
3. Стилизуйте повідомлення, використовуючи Bootstrap або інший CSS-фреймворк.
4. Переконайтеся, що ви використовуєте тимчасові повідомлення, і протестуйте їх поведінку при редиректах.

Пункти перевірки:

• Повідомлення з'являються при кожній з дій (CRUD).
• Повідомлення зникають після відображення (або перезавантаження сторінки).
• Повідомлення стилізовані для зручності читання.

Тепер у вас є можливість застосувати все, що ми вивчили, у своєму проєкті. Увага до деталей, таких як сповіщення, робить ваші додатки зручними для користувачів і дає багато бонусів на співбесідах!