Привет! Меня зовут Максим, и я опытный программист с большим опытом работы в веб-разработке. Сегодня я расскажу о проекте, который стал настоящим вдохновением для меня. Мы работали, то есть я работал, над созданием сайта с административной панелью для флориста, которая специализируется на разведении и уходе за комнатными растениями и экзотическими культурами. Заказчики — это не только частные клиенты, но и рестораны, офисы и владельцы дорогих домов.
Задачи Проекта
Во время первой встречи с заказчицей мы обсудили основные требования к сайту:
- Галерея растений: возможность добавления, редактирования и удаления изображений с подписями.
- Удобная админка: панель управления должна быть доступна и удобна для использования с мобильных устройств.
- Форма связи: заявки должны автоматически поступать в Telegram-бот, чтобы быстро реагировать на запросы клиентов.
Выбор Технологий
Для разработки сайта мы выбрали следующий стек технологий:
- React: для создания интерфейса пользователя благодаря его компонентному подходу.
- Next.js: для серверного рендеринга и улучшения SEO.
- HTML/CSS: для верстки и стилизации страниц.
- JavaScript: для логики приложения и взаимодействия с API.
- MongoDB: в качестве базы данных для хранения информации о растениях и заявках.
- Axios: для работы с HTTP-запросами.
- Socket.io: для реализации обновлений в реальном времени в админке (например, для уведомления о новых заявках).
Архитектура Проекта
Проект был организован по следующей архитектуре:
- Frontend (Next.js + React): главная часть сайта и админки были реализованы с использованием этих технологий, что обеспечивало стабильную и быструю работу.
- Backend: серверная часть была развёрнута с применением Node.js с Express для обработки запросов и управления базой данных MongoDB.
Внедрение Функционала
1. Создание Галереи
Для галереи растений мы разработали компонент, в котором можно было:
- Загрузить изображение,
- Ввести подпись,
- Выбрать категории (например, комнатные, экзотические).
Для загружаемых файлов использовался пакет **multer** для обработки мультимедийных данных. В рамках админки реализовали панель для управления контентом: добавление, редактирование и удаление изображений и подписей.
Каждый раз, когда администратор добавляет новый элемент, он отправляется на сервер с помощью Axios, а затем сохраняется в базе данных MongoDB.
```
app.post('/api/gallery', upload.single('image'), (req, res) => {
const newPlant = new Plant({
title: req.body.title,
image: req.file.path,
});
newPlant.save()
.then(() => res.status(201).send('Plant added'))
.catch(err => res.status(400).send(err));
});
```
2. Удобная Админка
Удобство админки было одним из основных требований проекта. Мы создали адаптивный дизайн с использованием **CSS Flexbox** и **Grid**, что позволило добиться хорошей отзывчивости как на десктопах, так и на мобильных устройствах.
Для работы с формами мы использовали библиотеку **Formik**, а проверки форм выполнялись с помощью **Yup**. Это значительно упростило процесс валидации данных.
```
const validate = Yup.object({
title: Yup.string().required('Title is required'),
image: Yup.mixed().required('An image is required'),
});
```
3. Форма Связи
Для реализации формы связи со входящими заявками был создан отдельный компонент. Мы использовали библиотеку **Telegraf** для интеграции с Telegram API, что позволяло отправлять сообщения в наш Telegram-бот, как только поступала новая заявка.
```
const bot = new Telegraf(process.env.BOT_TOKEN);
bot.start(ctx => ctx.reply('Welcome!'));
app.post('/api/contact', (req, res) => {
bot.telegram.sendMessage(process.env.CHAT_ID, `New request: ${req.body.name}`);
res.status(200).send('Request sent');
});
```
Таким образом, заказы, поступающие через форму на сайте, бы условны обрабатывались и отправлялись владельцу в реальном времени.
Тестирование и Оптимизация
После завершения разработки мы провели комплексное тестирование всех функций сайта. Были проверены все формы, админка, а также взаимодействие с Telegram-ботом. Мы также оптимизировали производительность, используя **React.memo**, чтобы избежать лишнего рендеринга.
Развертывание Проекта
Для развертывания нашего проекта мы выбрали **Vercel**. Эта платформа идеально подходит для приложений на Next.js, обеспечивая автоматические обновления из репозитория на GitHub. Мы развернули как фронтенд, так и бэкенд, что упростило процесс.
- Домен: Мы зарегистрировали домен на платформе **Namecheap**. После регистрации настроили необходимые DNS-записи, чтобы они указывали на сервер Vercel.
- Непрерывная интеграция: Настроили CI/CD, чтобы любое новое изменение в коде автоматически разворачивалось на новом сервере.
Заключение
Создание сайта с админкой для флориста оказалось увлекательным проектом, который позволил мне и моей команде применить множество технологий и библиотек. Мы смогли реализовать все требования заказчицы, создав функциональный и удобный в использовании сайт. Этот проект не только улучшил наши навыки, но и снова напомнил мне, как важна хорошая коммуникация с клиентом для достижения успешного результата. Спасибо за внимание, и до новых встреч в мире веб-разработки!