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

в 18:41, , рубрики: opensorce, python3, TypeScript, vue, разработка приложений

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

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

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. Сейчас этот бот (ContentAddBot) позволяет каждому пользователю публиковать до 10 постов в сутки. После публикации на канале Капибара Новое другие участники могут голосовать за понравившийся контент. Посты, которые набирают популярность, автоматически перемещаются на более широкие площадки, такие как Капибара Популярное и и основной канал проекта топик Капибара Лучшее.

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

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

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

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

Например:

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

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

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

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

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

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

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

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

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

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

Разработка

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

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

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

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

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

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

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

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

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

Архитектура

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

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

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

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

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

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

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

Очевидно для монолита необходима реляционная БД, и самый удобный в данном случае вариант это 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 на странице неподтвержденного профиля.

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

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

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

Капибара, Новый Старый Пикабу - 14
Капибара, Новый Старый Пикабу - 15
Капибара, Новый Старый Пикабу - 16
Капибара, Новый Старый Пикабу - 17
Капибара, Новый Старый Пикабу - 18
Капибара, Новый Старый Пикабу - 19
Капибара, Новый Старый Пикабу - 20
Капибара, Новый Старый Пикабу - 21
Капибара, Новый Старый Пикабу - 22
Капибара, Новый Старый Пикабу - 23

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

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

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

Репозитории на Gitlab: backend, frontend, микросервис авторизации, бот для постинга, баянометр(будет), микросервис работы с медиа(будет), нагрузочные тесты.

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

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

Контент: Бот для публикаций, Новое, Популярное, Лучшее.

Соц.сети: VK, Instagram

О Команде

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

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

Автор:
OlgaPy

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js