Капибара, Новый Старый Пикабу

Пикабу долгое время было уютным уголком для обмена историями, опытом, творчеством, мнениями и эмоциями. Однако ряд нововведений, таких как отмена баянометра, изменение алгоритмов и скрытие отрицательных оценок, привели к потере духа оригинального портала. Многие из нас, пришедшие туда в молодости и теперь ставшие взрослыми, почувствовали, что наши ценности и мнения игнорируются. В ответ на это, мы, группа энтузиастов, создали "Капибару" – проект, который стремится сохранить лучшие стороны Пикабу, предоставляя пространство где пользователи сами решают какой контент "годный" и какой контент хотят видеть в своей ленте.

Организация и принципы работы над проектом "Капибара"

1. Открытый исходный код: Проект "Капибара" основан на принципах открытости. Это значит, что каждый желающий может ознакомиться с кодом, предложить свои улучшения или доработки. Такой подход обеспечивает не только прозрачность разработки, логики формирования лент и функционала, но и гарантирует, что даже в случае внешних давлений или попыток вмешательства, проект может быть легко восстановлен и продолжен сообществом.

2. Структура команды и активные участники:Месяц назад, в группу именно разработки присоединилось более 30 человек(с профильным опытом от 4 до 14 лет). В команде есть: бэкенд - и фронтенд-разработчики, дизайнеры, иллюстратор, DBA, девопсы, тестировщики, ML-инженер, маркетолог и smm-специалист. Все мы на условиях посильного вклада. Каждое направление имеет свою специализацию и ответственность, что позволяет эффективно распределять задачи и ресурсы.

3. Процесс разработки: Сформированы функциональные требования, из которых по мере развития формируются задачи. Все задачи для разработки сначала попадают в бэклог. Оттуда они перемещаются в ToDo, и каждый разработчик может взять себе задачу по мере сил. После выполнения задачи следует процесс ревью, апрувы и, наконец, merge request и деплой.

4. Активное участие сообщества: Мы понимаем, что наш проект существует благодаря активному участию сообщества. Поэтому мы всегда рады предложениям, идеям и обратной связи. На данный момент основной фокус – создание MVP, но после его выпуска мы будем рады рассмотреть все дополнительные функции и предложения.

5. Технологический стек: На данный момент для разработки выбраны следующие технологии:

Backend: Python+Django+Redis+PostgreSQL

Frontend: Typescript+Vue+Pinia

6. Финансирование и реклама: На начальном этапе проект не преследует коммерческих интересов. Однако в будущем рассматривается возможность размещения рекламы для обеспечения окупаемости хотя бы инфраструктуры приложения.

Что уже готово и работает

Бот для публикации: Бот сделали в первые же дни, люди хотели делиться своим контентом, но уже не хотели нести его на Пикабу. И надо было срочно воспроизводить хоть где-нибудь функционал Свежее/горячее/оценки/рейтинг/комментарии. Вот его код GitLab ^[1]. Сейчас этот бот (ContentAddBot ^[2]) позволяет каждому пользователю публиковать до 10 постов в сутки. После публикации на канале Капибара Новое ^[3] другие участники могут голосовать за понравившийся контент. Посты, которые набирают популярность, автоматически перемещаются на более широкие площадки, такие как Капибара Популярное ^[4] и и основной канал проекта топик Капибара Лучшее ^[5].

Веб-сайт проекта: Наш веб-сайт kapi.bar ^[6] в настоящее время функционирует в режиме заглушки, но уже предоставляет основную информацию и навигацию по проекту. Код сайта доступен на GitLab ^[7].

Основной канал и его сегменты: Наш основной канал new_old_pikabu ^[5] объединяет около 9000 участников. Здесь мы предлагаем различные площадки для общения, обсуждения идеи, помощи проекту и даже игр.

Например:

• Чем я могу помочь проекту ^[8] - место, где участники могут предложить свою помощь.

• Предложения и обнаруженные баги по ботам ^[9] - для предложений по работе ботов и обнаруженным багам.

• Что мы любили на Пикабу и хотим сохранить ^[10] - обсуждение желаемого функционала.

• Ссылки на этот чат ^[11] - для привлечения новых участников.

• Пишем правила ^[12] - здесь можете помочь с написанием правил портала Капибара.

• И многие другие, включая Флудильню ^[13], Душнильню ^[14] и Болтальню ^[15].

Пользовательский опыт: Наши участники активно участвуют в создании портала. Они пишут правила для портала ^[12], устраивают текстовые игры ^[16], обсуждают бэкенд, БД и API ^[17], а также фронтенд, UI/UX и дизайн ^[18].

Кроме того, регулярно составляют ежедневные дайджесты с новостями канала.

Сообщество и активности:

1. Известные авторы: На "Капибаре" публикуют свои работы известные авторы, такие как ZaTas, Гена Инженерный, LKamrad, ZaxaroiD, priori, PyKAMACTEPA, gleksoid, Crazy.MF, химические истории от gulyash_bez_piva ^[19], ofcWeKnow ^[20] и другие

2. Команда модераторов: Команда модераторов была собрана из участников сообщества, сначала набирались временные модераторы(на два дня), и по мере того как человек себя показывал, принималось решение оставлять еще на неделю и оставлять перманентным модератором.

3. Дайджесты: Каждый день в канале публикуются дайджесты — короткие обзоры самых интересных и обсуждаемых тем. Это помогает участникам быстро узнать о главных событиях дня.

4. Конкурсы и мероприятия: Регулярно проводятся конкурсы рисунков, квизы, текстовые игры и другие интерактивные мероприятия. Предыдущий конкурс был на рисунки на тему

5. Партизанский отряд: Это особая группа участников, которые, рискуя своими аккаунтами на Пикабу, рассказывают о "Капибаре". Благодаря их усилиям, многие узнали о нашем проекте, несмотря на противодействие администрации Пикабу.

Разработка

На этом этапе команда активно занималась дизайном. Вместо того чтобы ждать окончательного дизайна, было принято решение использовать готовые компоненты из @quasar/extras ^[21] для создания прототипа. Было запланировано создать адаптивную версию сайта для различных устройств и добавить функцию переключения тем. Подробнее о структуре сайта можно узнать из CJM ^[22]. Мы разработали детальную карту путей пользователя, которая визуализирует все возможные действия и переходы внутри приложения. Это помогает нам понимать, как пользователи взаимодействуют с приложением, и
оптимизировать его для наилучшего пользовательского опыта.

Вот некоторые детали оттуда:

От четкого ТЗ было принято решение отказаться, писать его можно бесконечно долго и устареет оно ровно в тот момент когда допишем. Двигаться решили по Функциональным Требованиям ^[23]. Они были разработаны с учетом потребностей и пожеланий нашего сообщества. Они включают в себя:

• Регистрацию и аутентификацию пользователей.

• Создание, редактирование и удаление постов.

• Взаимодействие с другими пользователями через комментарии и рейтинги.

• Персональные настройки профиля и уведомлений.

• И многие другие функции, такие как Профиль пользователя, Админка, Безопасность и приватность,...

Архитектура

Предварительная архитектура frontend ^[24]-части проекта и взаимодействие компонентов выглядела следующим образом:

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

Первичная HLD-схема backend-части:

Схемы взаимодействия с микросервисом авторизации и общая структура приложений:

Очевидно для монолита необходима реляционная БД, и самый удобный в данном случае вариант это Postgres. Схема базы данных разработана таким образом, чтобы обеспечивать эффективное взаимодействие между различными сущностями, такими как пользователи, посты, комментарии и рейтинги.

Текущий статус фронтенда на дату 7.09.2023:

1. Дизайн и Прототипирование:

   • В процессе разработки дизайна активно используются готовые компоненты из библиотеки @quasar/extras для создания прототипа.

2. Адаптивность и Темы:

   • Разработана адаптивная версия сайта для мобильных устройств и ПК.

   • Внедрена функция переключения между светлой и тёмной темами.

   • Реализована система автоматического переключения между мобильной и десктопной ориентациями.

   • SVG иконки адаптированы для изменения цвета в зависимости от активной темы.

   • На главную страницу добавлен переключатель тем.

3. Компоненты и UI:

   • Созданы переиспользуемые компоненты: кнопки, текстовые поля, иконки.

   • Разработаны UI компоненты для тегов (в работе), выбора из списка и нижней части редактора поста.

   • Проработан переиспользуемый компонент InputUI.vue.

   • Свёрстан блок для авторизации (десктоп).

   • Добавлена страница авторизации и страница 404.

4. Архитектурные Улучшения:

   • Внедрены стандарты для стилей всего проекта.

   • Стандартизированы переменные для цветов и шрифтов.

   • Переработана точка для обращения к внешним сервисам.

   • Рефакторинг всех значений ширины экрана, отвечающих за изменение стилей.

5. Интеграция и Хранение:

   • Создана заглушка для запросов к внешнему сервису.

   • Реализовано локальное сохранение выбранной темы.

   • Реализован функционал бесконечной ленты.

   • Добавлена JWT авторизация.

Текущий статус бэкенда на дату 7.09.2023:

1. Аутентификация и Авторизация:

   • Реализована авторизация пользователя через JWT токен. Сервис аутентификации, отвечающий за выдачу токенов и создание пользователей, находится в разработке.

   • Внедрена двухфакторная аутентификация для администраторов.

   • Основа интеграции монолита с auth service для создания и управления аккаунтами пользователей готова. Реализован API для редактирования профиля пользователя.

   • Регистрация пользователя на auth service и синхронизация с монолитом выполнена. Произведен переход на фреймворк FastAPI.

2. Лента Постов:

   • Пользователи могут создавать, редактировать и удалять свои посты.

   • Реализована общая лента постов со всеми записями, отсортированными по дате добавления.

   • Внедрена система голосования за посты.

3. Комментарии:

   • Пользователи могут комментировать посты. Реализован вывод дерева комментариев с настраиваемой глубиной и срезом комментариев. Комментарии можно редактировать в течение определенного времени после публикации, если за них еще не голосовали.

   • Внедрена система голосования за комментарии.

4. Тестирование и CI/CD:

   • Разработаны обширные тесты, покрывающие весь функционал ленты постов, комментариев и голосования.

   • GitLab pipeline на подходе, в котором запускаются тесты, проверяется форматирование кода и предоставляется отчет по тестам.

5. База Данных и Архитектура:

   • Планирование и разработка структуры БД монолитной части приложения в сотрудничестве с ДБА.

   • Предоставлена структура БД монолитной части приложения.

6. Дополнительные Функциональные Особенности:

   • Добавлена интеграция с Sentry для мониторинга ошибок.

   • Реализована логика повторного голосования для отмены предыдущего голоса. Авторы могут голосовать за свои комментарии и посты.

   • Введена конфигурация для установки временного окна редактирования постов.

Текущий статус дизайна на дату 7.09.2023:

1. Основные Элементы Дизайна:

   • Подготовлены прототипы главной страницы для мобильных устройств и десктопов. Десктопная версия доступна в светлой и темной темах.

   • Разработаны макеты профиля пользователя (для текущего залогиненного пользователя и для просмотра профилей других пользователей).

   • Создан дизайн профиля группы (сообщества).

   • Разработаны интерфейсы для входа и регистрации нового пользователя, включая отображение возможных ошибок.

   • Подготовлен дизайн функции добавления пользователя в игнор-лист.

2. Цветовая Палитра:

   • Рассмотрены различные варианты цветовых схем. Основной цвет выбран бирюзовым, после отбрасывания серо-розового и оранжевого.

3. Дополнительные Элементы Дизайна:

   • Произведена детализация экранов по секциям и распределение компонентов по местам.

   • Пересмотрены и скорректированы интерлиньяжи на шрифтах для мобильных устройств.

   • Собраны различные компоненты для десктопных и мобильных версий.

   • Разработаны различные варианты правого мобильного сайдбара для разных типов пользователей.

   • Добавлена кнопка подтверждения профиля через Telegram на странице неподтвержденного профиля.

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

   • Представлен дизайн ленты комментариев, включая внешний вид, формы ответов и сообщения об удалении комментариев.

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

Ссылки и ресурсы

Основной сайт: kapi.bar ^[6] - здесь будет размещен портал Капибара.

Основной канал: Капибара ^[25] - здесь все актуальные новости проекта и сообщество.

Репозитории на Gitlab: backend ^[26], frontend ^[27], микросервис авторизации ^[28], бот для постинга ^[1], баянометр(будет) ^[29], микросервис работы с медиа(будет) ^[30], нагрузочные тесты ^[31].

Документация и планирование: Функциональные Требования ^[23], CJM ^[22], Список фичей ^[32].

Дневник разработки: Прямая Линия ^[33] - здесь актуальные новости только о развитии проекта.

Контент: Бот для публикаций ^[2], Новое ^[3], Популярное ^[4], Лучшее ^[34].

Соц.сети: VK ^[35], Instagram ^[36]

О Команде

За проектом "Капибара" стоит команда энтузиастов, которые решили создать альтернативное пространство для общения и обмена контентом. Я, Ольга ^[37], инициатор проекта и Senior Backend Developer с опытом работы в Python, горжусь тем, что смогла объединить таких талантливых разработчиков. В нашей команде более 20 профессионалов с опытом от 4 до 14 лет в коммерческой разработке. Мы все вкладываем свои знания и навыки в создание "Капибары", стремясь реализовать проект, который будет отвечать ожиданиям нашего сообщества.

Так же буду дополнять здесь список тех участников группы разработки, которые захотят представиться:
Александр @larikov ^[38]
Михаил https://t.me/chicobambuni ^[39]
Тимур timur-bv@ya.ru ^[40]
Алёна @ally_g ^[41]
Эмин @Iameminmammadov ^[42]