Bot-kit

🌍 Ссылки

• Bot-kit - сайт на хостинге Vercel;
• Brief - бриф проекта;
• Figma - макет проекта;
• Сайт заказчика - текущий сайт заказчика;

🤖 О проекте Bot-kit

Bot-kit — сайт сервиса по созданию ботов для мессенджеров и социальных сетей. Создать бота можно по одному из стандартных шаблонов (бот-автоответчик, доставка еды, онлайн-покупки и т.д.) или сделать бота самому в конструкторе ботов, где создается сценарий работы бота с помощью блок-схемы. Также сервис предоставляет возможности подключить бота к мессенжеру или социальной сети, настроить рассылки сообщений в чат ботах, позволяет просмотреть все диалоги с пользователями в чат-ботах, посмотреть статистику, выбрать тарифный план, настроить общий доступ и т.д. Подробнее о возможностях проекта можно прочитать на сайте заказчика во вкладке "База знаний".

Главная страница

🍪 Работа над проектом

Bot-kit — коммерческий проект, который заменит текущий сайт заказчика по его завершению. Проект будет полностью создан студентами Яндекс Практикума, обучающихся по программе "Веб-разработчик+". Реализация разбита на 3 части, каждую часть будут выполнять студенты выпускной когорты в качестве дипломной работы. Когорта делиться на команды, и в соревновательном режиме каждая команда в своем репозитории ведет работу над проектом. По окончанию выделенного времени на выполнение работы, наставник отбирает лучшую работу, которая передаются следующей когорте для следующего этапа доработок. Таким образом над созданием проекта поработают три выпускных когорты Яндекс Практикума.
Представленная работа - это первая итерация работы над проектом, которая заняла почетное 2-е место 🏆. Работа над проектом дает возможность продемонстрировать студентам ранее полученные навыки разработки, укрепить софт скилы, работая в команде в режиме ограниченного времени и конкуренции (за курс студенты учавствуют в 3-х командных проектах). Для руководства каждой команды назначается тимлидер из наиболее активного участника команды или приглашается выпускник Яндекс Практикума. Для выполнения текущей работы был приглашен старший студент, выпускник 45-го потока курса "Веб-разработчик". Тимлидер организовывает команду, структурирует проект, распределяет задачи между участниками, в зависимости от их возможностей, ведет Kanban-доску, устраивает созвоны, консультирует по всем техническим вопросам, проводит ревью пулл реквестов участников, проводит слияния веток и решает конфликты, поддерживает в команде мотивацию и доверительные отношения🤗.
Связь между тимлидами команд, заказчиком и опытным наставником координировал project-manager выпускник курса "Менеджер Проектов" Яндекс Практикума.

💪 Команда проекта

Наставник: Алексей Мартынов 🎅
Project Manager: Ильзира Сабитова 💼
Team Leader: Андрей Гришков 👑

Команда разработчиков:

Никита Перепелицын 🙂
Игорь Степанов 😉
Елизавета Юновидова 😊
Артём Башакин 😇
Данила Ильин 😌
Константин Шереметов 😀
Руслан Кулиш 😋
Елизавета Циприс 😎️

🛠️ Cтек технологий

HTML, SASS, Git, TypeScript, React, Redux, Story Book

💡 Реализованные части проекта

• UI kit - сделан на 70% (не выполнены элементы конструктора). Большая часть элементов выполнена в сторибуке. Для участников, которым сложно пользоваться стори буком, создана страница по линку '/ui', где эти элементы можно наглядно посмотреть.
• Аутентификация - регистрация, авторизация и смена пароля доступны по линкам: '/signup', '/signin' и '/reset-password' соответственно. При сабмите форм регистрации и смены пароля появляются попапы уведомления. Присутствует валидация полей формы. На странице "Регистраиция" выполнено выпадающее меню со списком стран и кодами телефонных номеров. На данном этапе работы над проектом не подразумевалось использовать серверную часть.
• Sidebar - боковое меню, а также элементы header и footer. Меню выезжает при нажатии на бургер меню в header. Все кнопки меню осуществляют редирект на нужную страницу. По нажатию на логотип происходит редирект на главную страницу.
• Dasboard - главная страница доступна по линку '/'. Реализовано выпадающее меню при нажатии на "Все шаблоны". При нажатии на шаблон появляется попап. Если в кнопках мои боты нажать на три точки, то появляется выпадающее меню, по нажатию на пункты меню появляются попапы. Внизу страницы блок с видео, при нажатии - открывается попап с видео. Справа-снизу рабочие линки на базу знаний на сайте заказчика.
• Add Bot - страничка добавления бота доступна по линку '/addbot'. По нажатию на кнопку социальной сети или мессенжера появляется форма создания бота. Для Facebook есть возможность добавлять страницы на которых будет работать бот.
• Bot Builder - конструктор ботов доступен по линку '/botbuilder'. В рамках первого этапа работы над проектом, создание конструктора не предусмотрено.
• Subscription and payments - страница с подписками и платежами доступна по линку '/subscription_and_payments'. Проведена имитация работы с апи - страница отрисовывается по массиву входящих данных. В блоке с историей платежей при нажатии на галочку можно применить фильтр по типу операции.
• Chat - страничка чата доступна по линку '/chat'. Страничка сверстана статично с имитацией приходящих с апи данных.
• Partnership Program - страница с партнерской программой доступна по линку '/partnership'. Реализована функция копирования ссылки и сохранения ее в память браузера. Реализована имитация данных с сервера путем создания массива данных по которому рендерится страница. Можно свернуть и развернуть блок с выплатами.

• Mailing - страница рассылок доступна по линку '/mailing'. Создана также иммитация получения данных с апи. Сворачивается и разворачивается блок с моими рассылками. По нажатию на кнопку "создать рассылку" появляется форма. Работают выпадающие списки, сворачивается и разворачивается текстовый виджет, в текстовом виджете дублируется текст, который вводиться в textarea, доступна вставка смайликов из выпадающего меню. Реализована функция загрузки видео, аудио, изображения а также добавления кнопки по нажатию на соответствующую кнопку.

📅 Планы по улучшению работы

• Реализовать не доделанный функционал
• Доработать адаптивную верстку
• Провести тщательный рефакторинг по изменению структуры, оптимизации и стандартизации кода, провести проверку линтером и устранить ошибки, удалить ненужные и задублированные фаилы