a1a2a3a4a546a7a8a9a10/drone-website

Вот финальная, выверенная версия технического задания *** # Техническое задание: Автоматизированный сайт-витрина услуг по БПЛА **Дата:** 15.04.2026 **Заказчик:** [Название компании/ФИО] **Исполнитель:** [Название команды/ФИО] ## 1. Концепция и цель проекта **Цель:** Разработка системы для автоматического создания и публикации статического сайта (SPA) для компании, занимающейся сборкой, ремонтом и продажей БПЛА. **Ключевая особенность:** Проект собирается автоматически. Администратор управляет контентом через специальную панель, а система сама генерирует все необходимые файлы для публикации. Это исключает ошибки ручного копирования и идеально подходит для статического хостинга. ## 2. Функциональные требования к сайту Сайт представляет собой одностраничное приложение (SPA) со следующими обязательными блоками: 1. **Шапка (Header):** Логотип, навигационное меню (Услуги, Портфолио, Отзывы, Контакты), кнопка «Заказать звонок». 2. **Первый экран (Hero):** Заголовок, описание деятельности, кнопка «Рассчитать стоимость сборки». 3. **Блок «Наши услуги»:** Карточки с описанием услуг (Сборка FPV-дронов, Ремонт, Продажа комплектующих). 4. **Блок «Портфолио»:** Галерея фотографий готовых дронов. 5. **Блок «Преимущества»:** Иконки с описанием выгод (Опыт, Гарантия, Оригинальные детали). 6. **Блок «Отзывы»:** Отзывы клиентов. 7. **Форма заявки:** Форма обратной связи с валидацией полей. 8. **Подвал (Footer):** Контактная информация, копирайт. ## 3. Архитектура и стек технологий Для обеспечения быстрой загрузки и корректной работы на GitHub Pages выбран стек, оптимизированный для статической генерации. * **Фреймворк:** **Vue.js 3** (или React) — для создания реактивного интерфейса. * **Сборщик:** **Vite** — обеспечивает мгновенный запуск сервера разработки и оптимизированную сборку для продакшена. * **Маршрутизация:** **Vue Router** в режиме `createWebHistory` с `base: '/<название_репозитория>/'` — критически важно для корректной работы на GitHub Pages. * **Стилизация:** **SASS/SCSS** или **Tailwind CSS**. ### Структура проекта Проект разделен на две логические части: **Генератор** и **Шаблон**. Итоговая папка `dist/` будет загружена на GitHub Pages. ``` /drone-website-generator ├── /admin-panel # Код административной панели (SPA) │ ├── /src │ └── ... # Файлы Vue/Vite для админки │ ├── /site-template # Шаблон сайта (SPA) │ ├── /src │ └── ... # Файлы Vue/Vite для основного сайта │ ├── /build-script # Скрипт-генератор │ └── generate.js # Node.js скрипт, который собирает проект │ ├── .gitignore ├── package.json # Корневые зависимости (для сборки) └── README.md ``` ## 4. Административная панель: Описание и Инструкция Административная панель — это отдельное SPA-приложение, которое позволяет управлять контентом без редактирования кода. ### Доступ к панели: Панель доступна по адресу: `ваш-сайт.com/admin` (например, `sourcecraft.dev/admin`). Вход осуществляется по логину и паролю администратора. ### Функционал панели: 1. **Управление услугами:** * **Добавить:** Нажать кнопку «+ Добавить услугу». Заполнить поля: Название, Описание, Цена, Категория. Нажать «Сохранить». * **Редактировать:** Найти услугу в списке и нажать кнопку «Изменить». Внести правки и сохранить. * **Удалить:** Нажать кнопку «Удалить» в строке услуги. 2. **Управление портфолио:** * Загрузка изображений готовых дронов с описанием модели. 3. **Управление отзывами:** * Добавление текста отзыва, имени клиента и оценки. 4. **Публикация изменений:** * После сохранения данных в панели администратор нажимает кнопку **«Опубликовать изменения»** или **«Сгенерировать сайт»**. * Система выполняет следующие действия: 1. Сохраняет данные из панели в исходные JSON-файлы (`data/services.json`, `data/portfolio.json`). 2. Запускает скрипт `generate.js`. 3. Скрипт генерирует папку `dist/` с готовым сайтом. 4. Система автоматически отправляет содержимое папки `dist/` в ветку `gh-pages` на GitHub. * Сайт обновляется автоматически через несколько минут после публикации. ## 5. Требования к развёртыванию на GitHub Pages Для бесшовной публикации настроен следующий процесс: 1. **Репозиторий:** Создается публичный репозиторий на GitHub. 2. **Ветка публикации:** В настройках репозитория (`Settings` -> `Pages`) ветка для публикации устанавливается как: **Deploy from a branch -> Branch: gh-pages**. 3. **Автоматизация публикации:** * В корневом `package.json` настроены скрипты: ```json "scripts": { "dev": "vite", "build": "vite build", "generate": "node build-script/generate.js", # Запуск генератора "deploy": "npm run generate && gh-pages -d dist" # Сборка + Публикация } ``` * Администратору достаточно выполнить одну команду в терминале после внесения изменений через админ-панель: ```bash npm run deploy ``` * Эта команда соберет проект и отправит его на GitHub Pages. ## Критерии приёмки 1. Сайт корректно открывается по ссылке из GitHub Pages. 2. Все блоки контента заполнены данными из административной панели. 3. Сайт адаптивен и работает без ошибок в современных браузерах. 4. Кнопка «Опубликовать изменения» в админ-панели успешно запускает процесс сборки и обновления сайта на хостинге. 5. Скорость загрузки высокая (оценка Lighthouse > 80).

язык не указан · рейтинг 0 · 👍 0 · ❤️ 0 · 💎 0 · 0 форков · ссылка на SourceCraft

Дата анализа: 29.09.2026 20:22