Як створити простий додаток за допомогою Django та React

Як створити простий додаток за допомогою Django та React

Хочете створити веб-додаток із потужним бекендом та динамічним фронтендом? Поєднання Django, фреймворку на Python, із React, бібліотекою на JavaScript, — чудовий спосіб досягти цього. Django виконує бекенд-завдання, такі як управління базами даних та створення API, тоді як React створює адаптивний, інтерактивний користувацький інтерфейс.

Основні кроки:

1. Налаштуйте своє середовище:
   • Встановіть Python 3.x для Django та Node.js для React.
   • Використовуйте віртуальні середовища для управління залежностями Python.
   • Перевірте встановлення за допомогою команди python --version, node --version, а також npm --version.
2. Організуйте свій проєкт:
   • Створіть окремі папки для бекенду Django та фронтенду React.
   • Використовуйте django-admin startproject для налаштування бекенду та npx create-react-app для ініціалізації фронтенду.
3. Створіть бекенд:
   • Створіть додатки Django, визначте моделі та згенеруйте міграції.
   • Використовуйте Django REST Framework для створення кінцевих точок API.
   • Налаштуйте django-cors-headers для забезпечення взаємодії між фронтендом і бекендом.
4. Розробка інтерфейсу:
   • Використовуйте компоненти React для управління завданнями та взаємодією з користувачами.
   • Встановіть Axios для запитів до API та інтегруйте його з кінцевими точками Django.
   • Оформіть додаток за допомогою CSS, щоб створити лаконічний користувацький інтерфейс.
5. Підключення та тестування:
   • Запустіть Django на localhost:8000 , а React — на localhost:3000.
   • Перевірте кінцеві точки API за допомогою таких інструментів, як Postman, або безпосередньо в браузері.
   • Переконайтеся, що налаштування CORS є правильними для безперебійної взаємодії.

Така конфігурація дозволяє ефективно створювати повнофункціональні додатки з чітким розділенням бекенду та фронтенду. Виконайте ці кроки, щоб створити масштабований інтерактивний веб-додаток.

Проєкт на Django та React для початківців — створення повнофункціонального додатка для нотаток

Вимоги до налаштування та встановлення

Перш ніж приступити до розробки вашого додатка на Django та React, надзвичайно важливо налаштувати середовище розробки з необхідними інструментами та залежностями. Ця основа допоможе вам безперешкодно створювати, інтегрувати та тестувати компоненти Django та React у процесі роботи.

Системні вимоги та інструменти

Для початку на вашому комп’ютері для розробки має бути встановлено Python 3.x для Django та Node.js для React. Зокрема, Django 5.0 вимагає Python 3.x, тоді як React працює з Node.js версії 12 або вище.

Встановлення Python: Ви можете завантажити Python безпосередньо з офіційного веб-сайту або скористатися менеджером пакетів вашої системи. Користувачам macOS це спрощує Homebrew brew install python. Користувачам Windows слід завантажити інсталятор з python.org, а користувачі Linux можуть встановити його за допомогою команд на кшталт apt install python3 в Ubuntu або аналогічними командами для інших дистрибутивів.

Налаштування Node.js та npm: Node.js постачається у комплекті з npm (Node Package Manager). Вам знадобиться npm версії 6 або вище; версія 7.5.4 є надійним вибором. Завантажте Node.js з nodejs.org — npm буде включено автоматично.

Віртуальні середовища Python: Використання віртуальних середовищ є ключовим для управління залежностями конкретних проєктів без конфліктів. Ви можете використовувати вбудований venv або такі інструменти, як pipenv або virtualenvwrapper для розширених можливостей. Якщо ви працюєте в Windows, virtualenvwrapper-win пакет надає подібну функціональність.

Щоб перевірити, чи все встановлено, виконайте в терміналі такі команди:

python --version
node --version
npm --version

Створення структури проєкту

Добре організована структура проєкту є необхідною для того, щоб код бекенду та фронтенду залишалися розділеними та зручними в управлінні. Почніть зі створення головного каталогу для вашого проєкту:

mkdir django-react-app
cd django-react-app

У цьому каталозі створіть дві папки: одну для бекенду на Django, а іншу — для фронтенду на React. Таке розділення дозволяє підтримувати та розгортати кожну частину незалежно одна від одної.

Налаштуйте віртуальне середовище Python у каталозі проєкту:

python -m venv venv

Активуйте віртуальне середовище:

• На macOS/Linux: source venv/bin/activate
• У Windows: venv\Scripts\activate

Цей крок гарантує, що всі залежності Python для вашого проєкту будуть ізольовані.

Встановлення необхідних пакетів

Оскільки ваше середовище готове, настав час встановити необхідні пакети як для Django, так і для React.

Пакетів бекенду Django: Поки ваше віртуальне середовище активне, встановіть Django та його допоміжні бібліотеки за допомогою pip:

pip install django
pip install djangorestframework
pip install django-cors-headers

• Django відповідає за серверну логіку, управління базами даних та маршрутизацію URL-адрес.
• Django REST Framework спрощує процес створення RESTful API, полегшуючи створення кінцевих точок для вашого React-фронтенду.
• Django-cors-headers увімкне Cross-Origin Resource Sharing (CORS), що є необхідним для взаємодії між вашим React-фронтендом (що працює на порту 3000) та Django-бекендом (що працює на порту 8000).

Налаштування React-фронтенду: Щоб налаштувати середовище React, скористайтеся командою create-react-app . Ця команда ініціалізує проект React та встановлює всі необхідні залежності:

npx create-react-app frontend

Це створить новий проект React у каталозі frontend каталозі, разом із необхідними пакетами, інструментами розробки та скриптами збірки.

Додатковий пакет для фронтенду: Після налаштування вашого проєкту React перейдіть до каталогу frontend каталог і встановіть Axios — бібліотеку для надсилання HTTP-запитів до вашого API на Django:

cd frontend
npm install axios

На цьому етапі ваше середовище розробки повністю укомплектоване Python 3.x, Django, Node.js, React та всіма необхідними інструментами. Віртуальне середовище Python забезпечує ізоляцію ваших бекенд-залежностей, тоді як npm окремо обробляє ваші пакети JavaScript. Тепер ви готові розпочати розробку вашого повнофункціонального додатка!

Створення бекенду за допомогою Django

Налаштуйте бекенд на Django з моделями бази даних, кінцевими точками API та інтеграцією з фронтендом на React.

Створення проєкту та додатка на Django

Почніть зі створення проєкту Django, який включає налаштування, конфігурації бази даних та параметри, специфічні для додатка. У рамках цього проєкту ви створите додаток Django — пакет на Python, призначений для виконання конкретних завдань, таких як управління даними користувачів або контентом.

Перейдіть до кореневого каталогу вашого проєкту (де налаштовано ваше віртуальне середовище) і створіть проєкт Django:

django-admin startproject backend .

Ця команда створює файли проєкту безпосередньо в поточному каталозі, уникаючи створення додаткової папки. Ви помітите нові файли, такі як manage.py (для виконання команд Django) та каталог backend каталог, що містить такі файли, як settings.py, urls.py, asgi.py, та wsgi.py.

Далі створіть додаток для реалізації конкретної функціональності. Наприклад, систему управління завданнями:

python manage.py startapp tasks

Це створює tasks каталог із необхідними файлами, такими як models.py, views.py, admin.py, та migrations папку. Обов’язково уникайте конфліктів імен із вбудованими іменами, такими як «django» або «test».

Зареєструйте додаток у налаштуваннях вашого проєкту, додавши його до INSTALLED_APPS список у backend/settings.py:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'corsheaders',
    'tasks',  # Register your app
]

Налаштування моделей та серіалізаторів

Визначте структуру даних за допомогою моделей Django. Наприклад, просту Task модель для додатка з управління завданнями можна додати у tasks/models.py:

from django.db import models

class Task(models.Model):
    title = models.CharField(max_length=200)
    description = models.TextField(blank=True)
    completed = models.BooleanField(default=False)
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    class Meta:
        ordering = ['-created_at']

    def __str__(self):
        return self.title

Ця модель містить такі поля, як CharField для короткого тексту, TextField для довшого вмісту, BooleanField для значень «так/ні» та DateTimeField для часових міток. Клас Meta клас визначає такі параметри, як порядок сортування за замовчуванням.

Застосуйте модель до вашої бази даних, запустивши міграції:

python manage.py makemigrations tasks
python manage.py migrate

Щоб перетворити дані моделі у формат JSON, використовуйте серіалізатори Django REST Framework. У tasks/serializers.py, визначте серіалізатор для Task моделі:

from rest_framework import serializers
from .models import Task

class TaskSerializer(serializers.ModelSerializer):
    class Meta:
        model = Task
        fields = ['id', 'title', 'description', 'completed', 'created_at', 'updated_at']
        read_only_fields = ['created_at', 'updated_at']

Файл ModelSerializer автоматично генерує поля та методи на основі моделі. Явне перелічення полів гарантує, що ви не випадково розкриєте конфіденційні дані.

Створення кінцевих точок API

Django REST Framework спрощує створення API. Для стандартних операцій CRUD використовуйте ViewSets раутери для отримання чіткої REST-структури.

У tasks/views.pyстворюйте представлення API:

from rest_framework import viewsets
from rest_framework.permissions import AllowAny
from .models import Task
from .serializers import TaskSerializer

class TaskViewSet(viewsets.ModelViewSet):
    queryset = Task.objects.all()
    serializer_class = TaskSerializer
    permission_classes = [AllowAny]  # For development only

Фреймворк ModelViewSet автоматично обробляє перелік, створення, отримання, оновлення та видалення завдань.

Налаштуйте маршрутизацію URL-адрес у tasks/urls.py:

from django.urls import path, include
from rest_framework.routers import DefaultRouter
from .views import TaskViewSet

router = DefaultRouter()
router.register(r'tasks', TaskViewSet)

urlpatterns = [
    path('api/', include(router.urls)),
]

Включіть ці URL-адреси до головного backend/urls.py файл:

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('tasks.urls')),
]

Налаштування заголовків CORS

Щоб дозволити вашому React-фронтенду (що працює на порту 3000) взаємодіяти з Django-бекендом (на порту 8000), налаштуйте Cross-Origin Resource Sharing (CORS). Без цього браузери блокують міждоменні запити з міркувань безпеки.

Оновіть backend/settings.py , щоб додати налаштування CORS:

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',  # Add this at the top
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

# CORS settings for development
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000",  # React development server
    "http://127.0.0.1:3000",
]

CORS_ALLOW_CREDENTIALS = True

Для швидкого тестування можна використовувати CORS_ALLOW_ALL_ORIGINS = True, але безпечніше вказати дозволені джерела.

Тестування кінцевих точок API

Перед інтеграцією фронтенду React протестуйте кінцеві точки API, щоб переконатися, що вони працюють як очікується. Запустіть сервер розробки Django:

python manage.py runserver

Отримайте доступ до API за адресою http://127.0.0.1:8000/api/tasks/. Використовуйте API з можливістю перегляду для тестування операцій, таких як запити GET та POST.

Як альтернативу, можна провести тестування за допомогою cURL або Postman:

# Test GET request to list tasks
curl -X GET http://127.0.0.1:8000/api/tasks/

# Test POST request to create a task
curl -X POST http://127.0.0.1:8000/api/tasks/ \
  -H "Content-Type: application/json" \
  -d '{"title": "Test Task", "description": "This is a test task"}'

Для автоматизованого тестування додайте тестові випадки у tasks/tests.py:

from rest_framework.test import APITestCase
from rest_framework import status
from .models import Task

class TaskAPITestCase(APITestCase):
    def test_create_task(self):
        # Add your assertions and test logic here
        pass

Тепер, коли бекенд готовий, ви можете підключити його до React-фронтенду.

Створення інтерфейсу за допомогою React

Щоб створити привабливий інтерфейс для вашого бекенду на Django, ви будете використовувати React для управління взаємодією з користувачами — від перегляду завдань до додавання нових.

Налаштування проєкту React

Почніть із налаштування фронтенду React за допомогою Create React App. Перейдіть до кореневого каталогу вашого проєкту (де знаходиться ваш бекенд на Django) і виконайте:

npx create-react-app frontend
cd frontend

Ця команда налаштовує додаток React із необхідними файлами, такими як package.json, src/App.js, та public/index.html. Вона також включає такі інструменти, як webpack для об’єднання файлів, Babel для компіляції JavaScript та сервер розробки для тестування.

Далі встановіть Axios для обробки HTTP-запитів до вашого API на Django:

npm install axios

Axios спрощує виклики API, керуючи розбором JSON та забезпечуючи кращу обробку помилок, ніж вбудована fetch() . Він також підтримує такі функції, як перехоплювачі запитів і відповідей.

Тепер структура ваших папок має виглядати так:

project-root/
├── backend/
│   ├── manage.py
│   ├── backend/
│   └── tasks/
└── frontend/
    ├── package.json
    ├── public/
    └── src/

Щоб переконатися, що все працює, запустіть сервер розробки React:

npm start

Це запустить додаток за адресою http://localhost:3000, відображаючи стандартну сторінку привітання React. Під час розробки не вимикайте цей сервер — він автоматично оновлює сторінку після внесення змін.

Створення компонентів React

Давайте створимо TaskList компонент для відображення завдань, отриманих з вашого API Django. Додайте наступний код до файлу src/components/TaskList.js:

import React from 'react';

const TaskList = ({ tasks, onToggleComplete, onDeleteTask }) => {
  return (
    <div className="task-list">
      <h2>Your Tasks</h2>
      {tasks.length === 0 ? (
        <p>No tasks available. Create your first task!</p>
      ) : (
        <ul>
          {tasks.map((task) => (
            <li key={task.id} className={`task-item ${task.completed ? 'completed' : ''}`}>
              <div className="task-content">
                <h3>{task.title}</h3>
                <p>{task.description}</p>
                <small>Created: {new Date(task.created_at).toLocaleDateString()}</small>
              </div>
              <div className="task-actions">
                <button 
                  onClick={() => onToggleComplete(task.id, !task.completed)}
                  className={task.completed ? 'btn-undo' : 'btn-complete'}
                >
                  {task.completed ? 'Undo' : 'Complete'}
                </button>
                <button 
                  onClick={() => onDeleteTask(task.id)}
                  className="btn-delete"
                >
                  Delete
                </button>
              </div>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default TaskList;

Далі створіть TaskForm компонент для додавання нових завдань. Додайте це до src/components/TaskForm.js:

import React, { useState } from 'react';

const TaskForm = ({ onAddTask }) => {
  const [title, setTitle] = useState('');
  const [description, setDescription] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!title.trim()) return;

    setIsSubmitting(true);
    try {
      await onAddTask({ title: title.trim(), description: description.trim() });
      setTitle('');
      setDescription('');
    } catch (error) {
      console.error('Error adding task:', error);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <form onSubmit={handleSubmit} className="task-form">
      <h2>Add New Task</h2>
      <div className="form-group">
        <input
          type="text"
          placeholder="Task title"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          disabled={isSubmitting}
          required
        />
      </div>
      <div className="form-group">
        <textarea
          placeholder="Task description (optional)"
          value={description}
          onChange={(e) => setDescription(e.target.value)}
          disabled={isSubmitting}
          rows="3"
        />
      </div>
      <button type="submit" disabled={isSubmitting || !title.trim()}>
        {isSubmitting ? 'Adding...' : 'Add Task'}
      </button>
    </form>
  );
};

export default TaskForm;

Для базового оформлення створіть файл src/App.css файл і додайте:

.task-list {
  margin: 20px 0;
}

.task-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border: 1px solid #ddd;
  margin-bottom: 10px;
  border-radius: 5px;
}

.task-item.completed {
  background-color: #f0f8f0;
  text-decoration: line-through;
  opacity: 0.7;
}

.task-form {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group input, .form-group textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 3px;
}

.btn-complete, .btn-undo, .btn-delete {
  margin-left: 10px;
  padding: 5px 10px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.btn-complete { background: #28a745; color: white; }
.btn-undo { background: #ffc107; color: black; }
.btn-delete { background: #dc3545; color: white; }

Управління станом та інтеграція з API

Хуки React, такі як useState та useEffect спрощують управління станом та взаємодію з вашим бекендом на Django. Щоб централізувати виклики API, створіть файл сервісу src/services/api.js:

import axios from 'axios';

const API_BASE_URL = 'http://127.0.0.1:8000/api';

const api = axios.create({
  baseURL: API_BASE_URL,
  headers: {
    'Content-Type': 'application/json',
  },
});

export const taskAPI = {
  getTasks: () => api.get('/tasks/'),
  createTask: (taskData) => api.post('/tasks/', taskData),
  updateTask: (taskId, taskData) => api.put(`/tasks/${taskId}/`, taskData),
  deleteTask: (taskId) => api.delete(`/tasks/${taskId}/`),
};

export default api;

Нарешті, інтегруйте все в src/App.js:

import React, { useState, useEffect } from 'react';
import TaskList from './components/TaskList';
import TaskForm from './components/TaskForm';
import { taskAPI } from './services/api';
import './App.css';

function App() {
  const [tasks, setTasks] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchTasks();
  }, []);

  const fetchTasks = async () => {
    try {
      setLoading(true);
      const response = await taskAPI.getTasks();
      setTasks(response.data);
    } catch (err) {
      setError(err);
    } finally {
      setLoading(false);
    }
  };

  // Additional methods for adding, updating, and deleting tasks would go here
}

Завдяки такій конфігурації ваш React-фронтенд готовий інтерактивно виконувати завдання, безперебійно взаємодіючи з вашим Django-бекендом.

Підключення Django та React

Тепер, коли ваш бекенд і фронтенд запущені та працюють, наступним кроком є забезпечення безперебійної взаємодії між ними. Це передбачає налаштування кінцевих точок API, управління запитами та усунення будь-яких проблем з інтеграцією.

Налаштування URL-адрес API в React

Ваш додаток React повинен знати, де знайти кінцеві точки API Django. Для цього оновіть файл src/services/api.js файл, вказавши конфігурацію, що відповідає вашому середовищу:

import axios from 'axios';

// Determine API base URL based on environment
const getApiBaseUrl = () => {
  if (process.env.NODE_ENV === 'production') {
    return process.env.REACT_APP_API_URL || 'https://your-production-domain.com/api';
  }
  return 'http://127.0.0.1:8000/api';
};

const API_BASE_URL = getApiBaseUrl();

const api = axios.create({
  baseURL: API_BASE_URL,
  headers: {
    'Content-Type': 'application/json',
  },
  timeout: 10000, // 10 second timeout
});

export const taskAPI = {
  getTasks: () => api.get('/tasks/'),
  createTask: (taskData) => api.post('/tasks/', taskData),
  updateTask: (taskId, taskData) => api.put(`/tasks/${taskId}/`, taskData),
  deleteTask: (taskId) => api.delete(`/tasks/${taskId}/`),
};

export default api;

Для виробничого середовища додайте файл .env файл у кореневу папку вашого проєкту React із таким вмістом:

REACT_APP_API_URL=https://your-production-domain.com/api

Таке налаштування гарантує, що ваш додаток React зможе безперебійно взаємодіяти з бекендом Django, незалежно від того, чи працюєте ви в локальному середовищі розробки, чи розгортаєте додаток у виробничому середовищі. Після налаштування кінцевих точок API ви готові отримувати та обробляти дані бекенду.

Отримання даних із бекенду

Після налаштування API ви можете виконувати операції CRUD для управління даними між React і Django. Оновіть src/App.js для обробки цих операцій:

import React, { useState, useEffect } from 'react';
import TaskList from './components/TaskList';
import TaskForm from './components/TaskForm';
import { taskAPI } from './services/api';
import './App.css';

function App() {
  const [tasks, setTasks] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetchTasks();
  }, []);

  const fetchTasks = async () => {
    try {
      setLoading(true);
      setError(null);
      const response = await taskAPI.getTasks();
      setTasks(response.data);
    } catch (err) {
      setError('Failed to fetch tasks. Please check your connection.');
      console.error('Error fetching tasks:', err);
    } finally {
      setLoading(false);
    }
  };

  const handleAddTask = async (taskData) => {
    try {
      const response = await taskAPI.createTask(taskData);
      setTasks(prevTasks => [...prevTasks, response.data]);
    } catch (err) {
      console.error('Error adding task:', err);
      throw err; // Re-throw to let TaskForm handle the error
    }
  };

  const handleToggleComplete = async (taskId, completed) => {
    try {
      const taskToUpdate = tasks.find(task => task.id === taskId);
      const updatedTaskData = { ...taskToUpdate, completed };

      const response = await taskAPI.updateTask(taskId, updatedTaskData);
      setTasks(prevTasks =>
        prevTasks.map(task =>
          task.id === taskId ? response.data : task
        )
      );
    } catch (err) {
      console.error('Error updating task:', err);
    }
  };

  const handleDeleteTask = async (taskId) => {
    if (!window.confirm('Are you sure you want to delete this task?')) {
      return;
    }

    try {
      await taskAPI.deleteTask(taskId);
      setTasks(prevTasks => prevTasks.filter(task => task.id !== taskId));
    } catch (err) {
      console.error('Error deleting task:', err);
    }
  };

  if (loading) {
    return <div className="loading">Loading tasks...</div>;
  }

  return (
    <div className="App">
      <header className="App-header">
        <h1>Task Manager</h1>
      </header>
      <main className="container">
        {error && <div className="error-message">{error}</div>}
        <TaskForm onAddTask={handleAddTask} />
        <TaskList 
          tasks={tasks}
          onToggleComplete={handleToggleComplete}
          onDeleteTask={handleDeleteTask}
        />
      </main>
    </div>
  );
}

export default App;

Цей код забезпечує створення, оновлення та видалення завдань, а також обробку помилок. Інтерфейс користувача оновлюється миттєво, що забезпечує плавний користувацький досвід, а помилки обробляються коректно шляхом скасування змін або відображення відповідних повідомлень.

Тестування та налагодження з’єднання

Однією з найпоширеніших перешкод під час інтеграції Django та React є вирішення помилок CORS (Cross-Origin Resource Sharing). Вони виникають через те, що браузери з міркувань безпеки блокують запити між різними джерелами. Під час розробки React зазвичай працює на localhost:3000, тоді як Django працює на localhost:8000, що створює ситуацію міждоменного зв’язку.

Щоб вирішити проблеми з CORS, переконайтеся, що ви налаштували заголовки CORS у налаштуваннях Django, як описано в розділі «Налаштування заголовків CORS». Після внесення змін перезапустіть сервер Django, щоб вони набули чинності.

Ось кілька поширених помилок запитів до API та способи їх усунення:

• HTTP 400 (Bad Request): Зазвичай це означає, що у тілі запиту відсутні деякі обов’язкові дані або вони мають неправильний формат. Наприклад, у листопаді 2023 року FintanMi зіткнувся з помилкою 400 під час створення спільноти в проєкті на базі Django REST Framework та React, оскільки в запиті бракувало поля owner у запиті бракувало поля. Завжди ретельно перевіряйте, чи ваш фронтенд надсилає всі необхідні поля, яких очікують моделі Django.
• HTTP 405 (Method Not Allowed): Ця помилка виникає, коли кінцева точка API не підтримує використовуваний метод HTTP. Наприклад, у FintanMi повідомлялося про помилку 405 під час спроби видалити публікацію; її вдалося усунути шляхом оновлення подання Django з generics.RetrieveUpdateAPIView на generics.RetrieveUpdateDestroyAPIView , щоб додати підтримку DELETE requests.

Запуск та тестування додатка

Після підключення бекенду на Django та фронтенду на React настав час запустити обидва сервери розробки та протестувати додаток. Це передбачає одночасний запуск двох серверів та перевірку того, чи все працює злагоджено.

Запуск серверів розробки

Щоб запустити додаток Django-React, вам знадобляться два вікна терміналу — по одному для кожного сервера. Така конфігурація дозволяє бекенду та фронтенду працювати незалежно один від одного, спілкуючись через виклики API.

Запуск сервера бекенду Django:

1. Відкрийте перше вікно терміналу та перейдіть до кореневого каталогу вашого проєкту Django.

2. Активуйте віртуальне середовище Python:

   source venv/bin/activate
   

3. Запустіть сервер розробки Django:

   python manage.py runserver
   

   Сервер буде доступний за адресою http://127.0.0.1:8000/.

Запуск сервера React:

1. Відкрийте друге вікно терміналу та перейдіть до каталогу вашого проєкту React:

   cd frontend
   

2. Запустіть сервер розробки React:

   npm start
   

   Це автоматично відкриє вікно браузера за адресою http://localhost:3000/.

Як тільки обидва сервери запустяться, ви зможете розпочати тестування функціональності вашого додатка.

Тестування повної функціональності додатка

Оскільки сервери запущені, а CORS та кінцеві точки API налаштовані належним чином, настав час перевірити потік даних між фронтендом та бекендом.

Перевірка API бекенду:

• Перевірте кінцеві точки API Django безпосередньо, перейшовши за адресою:

  http://localhost:8000/api/tasks
  

  Там має з’явитися інтерфейс API Django REST Framework, де ви зможете виконувати операції CREATE та READ.

• Перейдіть до адміністративного інтерфейсу Django за адресою:

  http://localhost:8000/admin
  

  Увійдіть за допомогою облікових даних суперкористувача, щоб створювати, редагувати або видаляти завдання. Ви також можете перевірити операції UPDATE та DELETE, перейшовши за посиланням:

  http://localhost:8000/api/tasks/{id}
  

Тестування інтеграції фронтенду та бекенду:

• Відкрийте свій додаток React за адресою http://localhost:3000 та переконайтеся, що він завантажується правильно, відображаючи завдання з бекенду Django.
• Перевірте кожну операцію CRUD через інтерфейс React:
  • Додайте нове завдання та переконайтеся, що воно з’являється як у користувацькому інтерфейсі React, так і в бекенді.
  • Відредагуйте існуюче завдання та переконайтеся, що зміни збережено.
  • Видаліть завдання та переконайтеся, що воно видалено як у інтерфейсі, так і в базі даних.

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

Виправлення типових проблем

Якщо під час тестування виникнуть будь-які проблеми, ось кілька поширених способів їх усунення.

Помилки підключення до API:

• Переконайтеся, що обидва сервери працюють на відповідних портах: Django на http://localhost:8000 , а React — на http://localhost:3000.
• Скористайтеся інструментами розробника браузера (вкладка «Мережа»), щоб виявити коди статусу HTTP, такі як 404 або 500.

• Перевірте proxy параметр у файлі package.json файлі:

  "proxy": "http://localhost:8000"
  

  Якщо ви внесли зміни, перезапустіть сервер React.

Проблеми із запуском сервера:

• Якщо сервер Django не запускається, перевірте, чи не бракує міграцій:

  python manage.py makemigrations
  python manage.py migrate
  

• У разі проблем із сервером React спробуйте перевстановити залежності:

  npm install
  

Проблеми з потоком даних:

• Використовуйте інструменти розробника браузера для перевірки мережевих запитів та помилок консолі.
• Додайте оператори налагодження, наприклад console.log() у React або print у представлениях Django, щоб відстежити потік даних.
• Перевірте ще раз, чи URL-адреси API у вашому додатку React точно відповідають шаблонам URL-адрес Django, включаючи кінцеві коси риски (наприклад, /api/tasks/).

Підсумок та подальші кроки

Ви створили веб-додаток, що поєднує Django та React, що дало вам ґрунтовне уявлення про повнофункціональну розробку. Цей проєкт висвітлює такі важливі концепції, як відокремлення бекенду від фронтенду, виконання операцій CRUD та управління міждоменними запитами за допомогою налаштувань CORS. У процесі роботи ви використовували Django REST Framework для створення API та React-хуки для управління станом — навички, що забезпечують плавну інтеграцію між цими двома потужними інструментами.

Виведення вашого додатка на новий рівень

Є чимало можливостей для розширення функціоналу вашого додатка. Наприклад, ви можете додати аутентифікацію за допомогою JWT, використовуючи Django REST Framework, щоб захистити дані користувачів та доступ до API. Це дозволить вам пропонувати функції, орієнтовані на конкретних користувачів, та персоналізований досвід.

Якщо вашому додатку потрібні оновлення в режимі реального часу, розгляньте можливість використання Django Channels для забезпечення підтримки WebSocket. Це ідеально підходить для таких функцій, як інформаційні панелі в режимі реального часу, системи чату або сповіщення, перетворюючи ваш додаток на більш динамічну та інтерактивну платформу.

У міру розвитку вашого додатка все більшого значення набуває розширена візуалізація даних. Поєднуючи можливості візуалізації React з ефективним отриманням даних із серверної частини, ви зможете ефективно обробляти та відображати складні набори даних.

Підготовка до запуску в виробництво

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

Ці вдосконалення ґрунтуються на навичках, які ви вже набули, — таких як проектування API, архітектура на основі компонентів та повномасштабна інтеграція. Опанувавши ці просунуті техніки, ви будете добре підготовлені до реалізації проектів корпоративного рівня та продовжите свій розвиток як веб-розробник.

Поширені запитання

Які переваги дає використання Django для бекенду та React для фронтенду при розробці веб-додатку?

Використання Django для бекенду та React для фронтенду створює потужну комбінацію для розробки сучасних веб-додатків. Django надає надійний фреймворк, наповнений інструментами, що оптимізують розробку бекенду, тоді як React чудово підходить для створення динамічних та інтерактивних користувацьких інтерфейсів.

Таке поєднання сприяє чіткому розподілу обов’язків, що допомагає підтримувати впорядкованість коду та полегшує його розширення з часом. Компонентна структура React сприяє повторному використанню елементів інтерфейсу, а REST Framework від Django спрощує процес створення API, забезпечуючи безперебійну взаємодію між фронтендом і бекендом. Разом вони пропонують швидкий, ефективний та орієнтований на користувача підхід до розробки додатків.

Як вирішити проблеми з CORS під час підключення фронтенду React до бекенду Django?

Для вирішення проблем із CORS між фронтендом React та бекендом Django зручним рішенням є пакет django-cors-headers пакет є зручним рішенням. Спочатку встановіть його за допомогою pip. Потім у файлі settings.py файлі додайте 'corsheaders' до списку INSTALLED_APPS список. Після цього додайте 'corsheaders.middleware.CorsMiddleware' у самий верх списку MIDDLEWARE списку, щоб забезпечити правильний порядок виконання проміжного програмного забезпечення.

Під час розробки ви можете спростити процес, встановивши CORS_ORIGIN_ALLOW_ALL = True у файлі settings.py. Це дозволяє обробляти запити з будь-якого джерела. Однак у виробничому середовищі набагато безпечніше визначити конкретні довірені домени за допомогою параметра CORS_ALLOWED_ORIGINS параметра. Такий підхід допомагає забезпечити вищий рівень безпеки.

Завдяки такій конфігурації ваш React-додаток може безперебійно взаємодіяти з вашими Django-API, дотримуючись при цьому вимог CORS.

Як підготувати додатки Django та React до розгортання у виробничому середовищі?

Щоб підготувати ваші додатки на Django та React до виробничого середовища, спочатку налаштуйте параметри Django для забезпечення безпеки. Це включає налаштування DEBUG до False та вказання параметра ALLOWED_HOSTS для контролю доступу до вашого додатка з певних доменів. Ці зміни є необхідними для захисту вашого додатка в робочому середовищі.

Далі виберіть надійну хостингову платформу для бекенду на Django та статичних файлів. Переконайтеся, що ваша інфраструктура розрахована на трафік і навантаження виробничого рівня. Для фронтенду на React використовуйте відповідні інструменти збірки, щоб створити оптимізовану виробничу збірку.

Коли ваш React-додаток буде готовий, налаштуйте веб-сервер, наприклад Nginx, для обслуговування як React-фронтенду, так і Django-бекенду. Правильна конфігурація сервера гарантує ефективну роботу вашого додатка та забезпечує безперебійну роботу для користувачів.

Перед запуском ретельно протестуйте свій додаток у виробничому середовищі. Цей крок допоможе виявити та усунути будь-які проблеми, гарантуючи надійну роботу додатка після його запуску.