Документация - Канбанчик

Содержание

Обзор проекта
Файлы проекта
Установка и настройка

Обзор проекта

Канбанчик — это визуальная система управления проектами, основанная на методологии Kanban. Она позволяет командам эффективно организовывать рабочий процесс, отслеживать задачи и взаимодействовать в рамках проектов.

Система построена на современном стеке технологий:

Frontend: HTML, CSS (Tailwind CSS), JavaScript
Backend: PHP для обработки файлов
База данных: Firebase Firestore
Аутентификация: Firebase Authentication

Приложение работает как SPA (Single Page Application), где большая часть логики выполняется на стороне клиента, а серверная часть используется только для загрузки и удаления файлов.

Документация по файлам проекта

Здесь приведено краткое описание назначения каждого файла в проекте.

index.php

Это главный файл приложения, который формирует весь пользовательский интерфейс. Он содержит HTML-разметку для экрана входа/регистрации, панели проектов, детального вида проекта с Kanban-доской и всех модальных окон. Он также подключает необходимые стили и скрипты, включая Firebase.


                                        <!DOCTYPE html>

                                        <html>

                                        <head>

                                          <!-- Мета-теги, стили, скрипты -->

                                        </head>

                                        <body>

                                          <!-- Интерфейс приложения -->

                                        </body>

                                        </html>

index.js

Это ядро всей логики на стороне клиента. Этот файл отвечает за:

Инициализацию Firebase и подключение к вашему проекту.
Аутентификацию пользователей: обработку входа, регистрации и выхода.
Отрисовку данных: динамическое создание списка проектов, задач, этапов и комментариев.
Взаимодействие с базой данных Firestore: чтение и запись всех данных (проекты, задачи, пользователи).
Обработку действий пользователя: отслеживание кликов, отправки форм и перетаскивания элементов (Drag & Drop).
Загрузку файлов: отправку запросов к PHP-скриптам для загрузки и удаления изображений и файлов на хостинг.


                                        // Пример инициализации Firebase

                                        const firebaseConfig = {

                                          apiKey: "YOUR_API_KEY",

                                          authDomain: "your-project.firebaseapp.com",

                                          projectId: "your-project",

                                          storageBucket: "your-project.appspot.com",

                                          messagingSenderId: "YOUR_SENDER_ID",

                                          appId: "YOUR_APP_ID"

                                        };


                                        
                                        // Инициализация Firebase

                                        firebase.initializeApp(firebaseConfig);

upload.php

Серверный PHP-скрипт, предназначенный для загрузки изображений проектов. Он принимает файл, проверяет его тип (jpeg, png, gif), сохраняет в папку uploads/ под уникальным именем и возвращает ссылку на загруженный файл.


                                        <?php

                                        // Проверка типа файла и загрузка

                                        if(isset($_FILES['image'])) {

                                          // Логика загрузки изображения

                                          // ...

                                          echo json_encode(['url' => $fileUrl]);

                                        }

                                        ?>

upload-file.php

Аналогичный upload.php скрипт, но для загрузки любых файлов проекта. Он проверяет размер файла (до 5 МБ) и сохраняет его в папку uploads/files/.


                                        <?php

                                        // Проверка размера и загрузка файла

                                        if(isset($_FILES['file'])) {

                                          // Проверка размера (до 5 МБ)

                                          if($_FILES['file']['size'] > 5 * 1024 * 1024) {

                                            echo json_encode(['error' => 'Файл слишком большой']);

                                            exit;

                                          }

                                          // Логика загрузки файла

                                          // ...

                                          echo json_encode(['url' => $fileUrl]);

                                        }

                                        ?>

delete.php

Серверный PHP-скрипт для удаления файлов с хостинга. Он получает URL файла, находит его на сервере и удаляет, обеспечивая чистоту файлового хранилища.


                                        <?php

                                        // Получение URL файла и его удаление

                                        $fileUrl = $_POST['fileUrl'] ?? '';

                                        if($fileUrl) {

                                          // Извлечение пути к файлу из URL

                                          $filePath = parse_url($fileUrl, PHP_URL_PATH);

                                          $filePath = $_SERVER['DOCUMENT_ROOT'] . $filePath;

                                          

                                          // Удаление файла

                                          if(file_exists($filePath)) {

                                            unlink($filePath);

                                            echo json_encode(['success' => true]);

                                          } else {

                                            echo json_encode(['error' => 'Файл не найден']);

                                          }

                                        }

                                        ?>

index.css

Файл с дополнительными пользовательскими стилями для тонкой настройки внешнего вида приложения, который не покрывается стандартными классами Tailwind CSS.


                                        /* Пример пользовательских стилей */

                                        .kanban-column {

                                          min-height: 300px;

                                        }


                                        
                                        .kanban-card {

                                          cursor: grab;

                                        }


                                        
                                        .kanban-card:active {

                                          cursor: grabbing;

                                        }

Установка и настройка

Следуйте этим шагам, чтобы развернуть проект на вашем хостинге и подключить его к Firebase. Процесс установки состоит из трех основных этапов, которые мы подробно рассмотрим ниже.

Настройка
хостинга

Настройка
Firebase

Связывание
проекта

Важно: Перед началом установки убедитесь, что у вас есть доступ к хостингу с поддержкой PHP и возможность создать аккаунт Firebase (бесплатный план подходит для начала работы).

Шаг 1: Настройка хостинга

Вам понадобится веб-хостинг с поддержкой PHP (например, стандартный LAMP-стек).

1 Загрузите файлы проекта

Скопируйте все файлы (index.php, index.js, upload.php и т.д.) в корневую директорию вашего сайта (обычно это папка public_html или www).

Структура файлов проекта:

public_html/
├── index.php       # Главный файл приложения
├── index.js        # Основная логика клиентской части
├── index.css       # Дополнительные стили
├── upload.php      # Скрипт для загрузки изображений
├── upload-file.php # Скрипт для загрузки файлов
└── delete.php      # Скрипт для удаления файлов

2 Создайте папки для загрузок

В той же корневой директории создайте две папки:

uploads
uploads/files

mkdir uploads

mkdir uploads/files

3 Установите права доступа

Для того чтобы скрипты могли сохранять файлы, веб-сервер должен иметь права на запись в эти папки. Установите для папок uploads и uploads/files права доступа 755 или 775. Это можно сделать через FTP-клиент или панель управления хостингом.

chmod 755 uploads

chmod 755 uploads/files

Совет: Если вы используете панель управления хостингом (например, cPanel или Plesk), вы можете изменить права доступа через файловый менеджер, щелкнув правой кнопкой мыши на папке и выбрав "Изменить права" или "Change Permissions".

Шаг 2: Настройка Firebase

Firebase будет использоваться как база данных и сервис аутентификации.

1 Создайте проект

Перейдите в консоль Firebase и создайте новый проект.

Нажмите "Создать проект"

Введите название и примите условия

2 Добавьте веб-приложение

Внутри вашего проекта нажмите на иконку </> (Веб), чтобы добавить новое приложение. Придумайте ему название и зарегистрируйте.

Нажмите на иконку веб-приложения и заполните форму

3 Скопируйте конфигурацию

После регистрации Firebase предоставит вам объект firebaseConfig. Скопируйте его, он понадобится на следующем шаге.

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "your-project.firebaseapp.com",
  projectId: "your-project",
  storageBucket: "your-project.appspot.com",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

Важно: Храните эти данные в безопасном месте и не публикуйте их в открытом доступе.

4 Включите Аутентификацию

Настройте аутентификацию по электронной почте и паролю:

В меню слева перейдите в раздел Authentication.
Нажмите "Начать" и на вкладке "Способ входа" выберите и включите провайдер "Электронная почта/пароль".

Включите метод аутентификации по email/паролю

5 Создайте базу данных Firestore

Настройте базу данных для хранения данных проекта:

В меню слева перейдите в раздел Firestore Database.
Нажмите "Создать базу данных".
Выберите "Запуск в рабочем режиме" (Production mode) и укажите регион.

Создайте базу данных Firestore и выберите регион

6 Настройте правила безопасности

Это критически важный шаг. Перейдите на вкладку "Правила" (Rules) и замените существующий текст на следующий. Эти правила разрешают авторизованным пользователям работать только с теми проектами, в которых они являются участниками.

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // Пользователи могут управлять только своим собственным профилем
    match /users/{userId} {
      allow read, write: if request.auth != null && request.auth.uid == userId;
    }

    // Правила для проектов и их содержимого (задачи, комментарии)
    match /projects/{projectId} {
      // Разрешить чтение и запись, если email пользователя есть в списке участников проекта
      allow read, write: if request.auth != null && request.auth.token.email in resource.data.members;

      // Разрешить доступ ко всем вложенным коллекциям (задачи, комментарии и т.д.)
      // на основе доступа к родительскому проекту.
      match /{allChildren=**} {
        allow read, write: if request.auth != null && get(/databases/$(database)/documents/projects/$(projectId)).data.members.includes(request.auth.token.email);
      }
    }
  }
}

Нажмите "Опубликовать", чтобы сохранить правила.

Шаг 3: Связывание проекта с Firebase

Остался последний шаг — указать вашему приложению, к какому проекту Firebase подключаться.

1 Откройте файл index.js

Откройте файл index.js из файлов вашего проекта.

2 Найдите объект firebaseConfig

Он находится в самом верху файла.

// Найдите этот блок в начале файла
const firebaseConfig = {
  apiKey: "ЗАМЕНИТЕ_НА_СВОЙ_КЛЮЧ",
  authDomain: "замените-на-свой-домен.firebaseapp.com",
  projectId: "замените-на-свой-проект",
  storageBucket: "замените-на-свой-проект.appspot.com",
  messagingSenderId: "ЗАМЕНИТЕ_НА_СВОЙ_ID",
  appId: "ЗАМЕНИТЕ_НА_СВОЙ_APP_ID"
};

3 Вставьте вашу конфигурацию

Замените существующий объект firebaseConfig на тот, который вы скопировали из консоли Firebase на шаге 2.3.

4 Сохраните и загрузите файл

Сохраните изменения в index.js и загрузите обновленный файл на ваш хостинг, заменив старый.

Готово! 🎉

Ваш проект должен быть полностью работоспособен. Откройте ваш сайт в браузере, зарегистрируйте первого пользователя и начните управлять своими проектами.