Как создавать лучшие vk mini apps [0]

Начало.

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

Делая сайт по видосу хауди столкнулся с ошибкой, подскажите пожалуйста, что неверно сделал, тут идут 2 ошибки с разных страниц и ниже сам php код по срокам которой ошибка. Fatal error: 

На самом деле это все решается первой ссылкой в гугле. Я конечно понимаю люди разные и не каждый может понят ответ из поиска. Ведь шанс найти 100%-ый случай равен 0.000000001. Но мониторниг новых постов приводил меня в уныние. Я решил что-то с этим сделать.

Прямо на серверной стороне я добавил воркер, который получает 100 последних постов из сообщества хауди хо, сохраняет их в базу данных и по определенным тегам высылает мне на почту вот такое письмо.

Так выглядит сие творение

agenda.define(AgendaJobName.fetchHaudiPosts, async () => {
  const posts = await getHaydiGroupPosts(config.VK_SERVICE);

  await async.forEach(posts, async (post) => {
    const existingPost =
      (await VkGroupPostM.findOne({ postId: post.id }).countDocuments()) > 0;

    if (!existingPost) {
      const shouldNotify = checkPostTextForNeededInfo(post.text || '');
      await new VkGroupPostM({
        postId: post.id,
        postUrl: post.link,
        needToBeNotified: shouldNotify,
        text: post.text,
      }).save();
    }
  });
});

agenda.define(AgendaJobName.checkVkPostToNotify, async () => {
  const postsToNotify = await VkGroupPostM.find({
    needToBeNotified: true,
    notified: false,
  }).lean();

  await async.forEach(postsToNotify, async (post) => {
    await sendeNotificationEmailAboutHaudiPost(post.postId);
  });
});

type PostItem = {
  id: number;
  ownerId: number;
  date: number;
  text: string;
  link: string;
};

const getHaydiGroupPosts = async (accessToken: string): Promise<PostItem[]> => {
  const data = await callApi(
    'post',
    `https://api.vk.com/method/wall.get${buildQueryString([
      { access_token: accessToken },
      { domain: 'howdyho_net' },
      { offset: '1' },
      { filter: 'others' },
    ])}&v=5.103`
  );

  const posts = data.response?.items?.map((it) => ({
    id: it.id,
    ownerId: it.owner_id,
    date: it.date,
    text: it.text,
    link: `https://vk.com/howdyho_net?w=wall${it.owner_id}_${it.id}`,
  }));

  return posts;
};

const words = config.DEV_MODE
  ? []
  : [
      'react',
      'redux',
      'node',
      'node.js',
      'nodejs',
      'реакт',
      'next',
      'next.js',
      'mongodb',
      'mongoose',
      'typeScript',
      'ts',
      'вк мини апп',
      'vk mini app',
      'миниапп',
      'vkminiapp',
      'nestjs',
    ];

const checkPostTextForNeededInfo = (text: string) => {
  return !!words.find(
    (word) => text.toLowerCase().indexOf(word.toLowerCase()) !== -1
  );
};

Довольно просто как мне кажется.

В один прекрасный день на почту пришло письмо:

Ищем реакт разработчика делать приложение для vk mini apps и участвовать в конкурсе.

Я был весьма удивлен тем, что оказывается для создания вк мини апп можно использовать все что угодно. Ведь каждое приложение внутри вк - это iframe и твой сайт.

Идея.

Идея довольно простая - приложение опросник. Пользователь создает свой опросник в стиле "Что я люблю покушать? Еду или воздух". Выбирает свои правильные ответы и потом рассылает друзьям. Прикол в том, что создавать свои вопросы в 1 версии приложения было заблокировано и перечень вопросов ограничивался 10-ю нашими высерами. Оказалось такая стратегия довольно хорошо работает для МВПишки.

Так выглядело создание теста:

Создание.

Нас было 4-ро: чел, дизайнер, бек и фронт. Я выбрал мой любимый на тот момент стек технологий и у меня получилось такое ведро: create-react-app, react, typescript, redux (голый), fela (css-in-js), rxjs, router и vk-ui.

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

За неделю получилось накидать мвп по дизайну и отправить в нашу беседу для оценки. Бек еще не готов. Как это бывает ребята накинули правки и я пошел переделывать. Меня позабавила одна правка. Если взглянуть на картинку выше, то можно увидеть карточки с вопросами. На дизайне мне было не очень понятно как оно должно было работать. Оказывается там должна быть анимация перелистывания карт и при этом пользователь тем самым выбирает правильные ответы... Ладно, добавил react-spring и за 3 дня ночных страданий я все же смог сделать то, что хотел. Бек еще не готов.

На сайте react-spring были нужные мне примеры, но они все были устаревшими. Т.е. версия пакета 8-ая, а пример на 6 или 7. Апи разные - страдания одинаковые.

Вроде все утвердили, но апи нет. Уже бы пора все присоединить, но бек еще не готов. Я пишу свои пожелания для бека и то с чем мне будет удобнее работать, и в ответ получаю лишь отказы или какую-то не очень внятную реализацию. Начинаю психовать и делать все сам. Получается за два дня написать несколько end-понитов и бд схему. Все работает как надо. Через 4 дня бекендер присылает доку, где ничего нет из того, что я просил.

Бек я написал на nest.js, node, express, mongodb, typescript, redis. Классные технологии, особоенно мне понравился nest. Я долго его хотел опробовать в проекте, который увидит мир и этот момент наступил. Полетели классы и бд запросы. Трещали по швам key-value сторы и блевало апи.

Модерация.

Для участия в конкурсе необходимо было попасть в каталог вк, а для этого нужно 1. пройти модерацию; 2. пройти тестпул.

Первая попытка подачи на модерацию

Вторая попытка

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

В мире цифровых технологий, где живое общение отошло на второй план, а онлайн находится в пике. В мире, где друзья в вк все меньше и меньше нам пишут, наше приложение поможет всколыхнуть память о былом. Друзья пройдя тест покажут на сколько знают друг друга и что следует узнать лишь впервые. Каждый результат теста подстегнет человека написать своему другу: «аха, да ладно ты любишь футбол?! Погнали завтра вместе». Тем самым решив задачу одиночества в сети

После этого мы получили еще пару сообщений о доработке приложения и через пару дней попали в тест-пулл.

Период тест-пулла.

Небольшое откат к одной механики прилы. В вк можно в приложении делиться на стену/в лс и создавать истории. Тоже самое можно делать и в мини приложениях. Так пользователи могли отправлять свои тесты друзьям и на стену. Самое прикольное было создать стикер в историю и при нажатии на стикер пройти тест друга.

Видимо такая возможно очень сильно повлияла на пользователей и в первый день тест-пулла мы получили трафик в 600к уникальных пользователей.

Эти дни были самыми тяжелыми и при этом самыми потрясающими за всю историю моей карьеры программиста. Я как фронтендер работал с бэком чисто по приколу. На работе синьоры занимались почти всей инфрой, а я создавал таблички и перекидывал json-чики. Что могло пойти не так? Да все.

Приложение было раскатано на хероку за 7$ тир машине, где было 512Мб памяти, 1 ядро и все. Диска там нет, у них там свои приколы, которые я расписывать не буду. И что дальше? Дальше были 502. Что же у меня была за инфра такая интересная? Монго находилась на mongodb atlas а сервер на хероку + redis.

Первая реакция - я в шоке смотрю на логи и не понимаю что мне делать... Решаю увеличить тир тачки. Помогло на первые 5 минут. Повторяю предыдущий шаг и получаю такой же результат. Не знаю как мне быть. При этом я пытаюсь решить возникшие проблемы с телефона и параллельно семейные дела.

Вторая реакция - сажусь ночью прикручивать метрики. Оказывается запросы в бд тормозят все реквесты и хероку кидает в timeout запрос если он не завершится до 30с. Прекрасно! Причину вроде нашел. Переписал кучу запросов и добавил индексов. Метрики показывают все отлично ты молодец. Лег спать. Утром все по новой... я в ярости.

Третья реакция - мигрируем на digital ocean. Беру довольно дорогую машину, запускаю несколько инстанций сервера на все ядра - 1 и кайфую. Байден перестал ссать мне на серверную и все хорошо летает.

Оказывается все это время mdb atlas тротлил мне запросы. ААААААААААА. как за что. Просто посмотри на цены. То есть пока ты сам это не поймешь или не зайдешь в цены, то никак и не узнать из-за чего это все происходит. У меня был за 25$ тир и оказывается этого не достаточно. Нужно больше денег богу денег.

Четвертая реакция - спросил у коллег на работе что мне делать. Чел предложил перенести бд на локальную машину digital ocean. Как только я решил это сделать, то сразу получил сообщение от вк поддержки:

Как Вы смотрите на то, чтобы перевести Ваш сервис на наши сервера? Уже сейчас наблюдаем, что под нагрузкой сервис ощутимо тормозит, это должно помочь справиться с таким потом пользователей.

Быстро мигрирую моего франкенштейна и получаю прирост уникальных пользователей до 2-х лямов за сутки.

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

Конкурс.

Что уж тут говорить? Одним из критериев был рост аудитории и этим мы получили досрочную победу в конкурсе. Приз был 500т руб на команду. Всего призовых мест 10. Считаю пободный конкурс от вк одним из лучших!