Штош, я только начал.

Рубрика «в предыдущих сериях»:

• Часть первая, что и почему я решил делать Telegram мини-приложения в 2025 или как я дошел до жизни такой. Часть уно

• Часть вторая, какой инструментарий я использую и немного о разработке Разработка telegram мини-приложения в 2025 или как я дошел до жизни такой. Часть до

• Часть третья, разворачивание приложения на VPS и немного про докер Разработка telegram мини-приложения в 2025 или как я дошел до жизни такой. Часть тре

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

Важная особенность, когда бот запросит указать «Web App URL» вы должны указать именно доменное имя, а не ip адрес, и обязательно через https, а не http. Как видите, в моем случае, был указан URL https://socionyx.ru/. А как быть тем, кто только что по моей шедевральной (хе-хе-хе) инструкции только-только настроил VPS и развернул на нем свое приложение, которое теперь открывается по ip адресу?

Очевидно же, получить доменное имя и ssl сертификат безопасности, для реализации https. По запросу в гугле «купить домен» у вас появится целый список сервисов, которые позволят вам осуществить данную процедуру. Мне домен socionyx.ru стоил 169 рублей на год. Теперь у вас есть домен и необходимо связать его с ip адресом VPS, на которой разворачивается ваше приложение. У меня ситуация сложилась следующая, VPS была на одном сервисе, а доменное имя я получил на другом сервисе, и чтобы их подружить, пришлось выполнить некоторые дополнительные действия. Вдаваться в технические детали не буду, так как это:

• Усложнит и так не простой для понимания материал;

• В зависимости от выбранных вами сервисов по предоставлению VPS и домена, шаги могут немного отличаться.

Учитывая, что я сам это делал впервые и разобрался, это определенно не «rocket science» и вы без проблем сможете справится с этой задачей.

А вот что я вам более подробно расскажу, так это настройка nginx, чтобы ваш сервис открывался по доменному имени, а не ip адресу. В файле конфигураций nginx необходимо написать следующее:

http {

include /etc/nginx/mime.types;

default_type application/octet-stream;

server {

listen 80;

listen [::]:80;

server_name socionyx.ru www.socionyx.ru;

}

}

Ранее в строке с «server_name socionyx.ru www.socionyx.ru; » вместо «socionyx.ru www.socionyx.ru;» был написан ip адрес вида 172.165.4.2. И все, теперь по вашему доменному имени должно открываться ваше приложение. Но стойте!!! Что это за ужас?!?!?!?!?!!?

Похожая ошибка для вашего сервиса будет и в других браузерах. Надо решать проблему, настало время приобрести ssl сертификат.

Аналогично домену, по запросу в гугле «купить ssl сертификат» у вас также появится целый список сервисов, которые позволят вам осуществить данную процедуру. Мне сертификат достался бесплатно на 6 месяцев за приобретенный домен, да, есть у моего регистратора доменных имен такая приятная функция. На почту или в личном кабинете вам должны прийти как минимум два сертификата, вида certificate.crt и certificate.key. А дальше снова nginx и в файле конфигурации теперь все будет выглядеть примерно следующим образом.

http {

include /etc/nginx/mime.types;

default_type application/octet-stream;

server {

listen 80;

listen [::]:80;

server_name socionyx.ru www.socionyx.ru;

location / {

return 301 https://socionyx.ru$request_uri;

}

}

server {

listen 443 ssl;

listen [::]:443 ssl;

server_name www.socionyx.ru;

ssl_certificate /etc/nginx/certificate.crt;

ssl_certificate_key /etc/nginx/certificate.key;

return 301 https://socionyx.ru$request_uri;

}

server {

listen 443 ssl;

listen [::]:443 ssl;

server_name socionyx.ru;

ssl_certificate /etc/nginx/certificate.crt;

ssl_certificate_key /etc/nginx/certificate.key;

}

}

И все, ждете какое-то время пока все настройки придут в силу и ваше приложение теперь спокойно может открываться по https и в настройках бота можно наконец-то указать для «Web App URL» URL вашего приложения. На сегодня все, о дальнейших настройках бота для полноценного запуска вашего приложения в виде мини-приложения в telegram я напишу в следующей части.

А, ну и конечно, как я уже ранее писал, мини-приложение уже готово и ждет своих пользователей, как говорится welcome t.me/Socionyx_Bot/socionyx.

Буду премного благодарен за обратную связь и замечания по работе текущего мини-приложения.

P.S. извини меня мой дорогой nikita17cm, уж очень объемным получился уже данный пост, поэтому о «микросерверности», и разделе бота и основного бэкенда придется поведать в следующей части.

Первый проект, который мы запустили в рамках челленджа — это браузерное расширение для проверки скорости загрузки сайтов и сравнения показателей Core Web Vitals для ПК и смартфонов. В этой статье я расскажу, как мы выбрали идею, разработали продукт за 2 недели и привлекали 1600+ пользователей без вложений в маркетинг.

Привет! Меня зовут Антон Георгиев. Я работаю Frontend-разработчиком, а в свободное время делаю свои пет-проекты. Мы с другом поставили цель запустить 12 стартапов за 12 месяцев.
Запустили уже 3 продукта из 12. Про свой путь пишем в Телеграм-канале «Инди-хакеры: стартапы из 💩 и 🥢».

Как мы запустили микро-продукт за 2 недели и получили первых 1600+ пользователей

Результаты нашего продукта Core Web Vitals Test на момент публикации:

Начнем с того, что было сделано. Для начала мы выписали 20 идей, проанализировали конкуренцию, спрос и ключевые слова для SEO.

Как мы выбирали идею

Для того чтобы найти одну идею, мы проанализировали множество чужих продуктов. Наш подход строится на том, чтобы искать уже рабочие проекты и создавать им конкуренцию. Такой подход может называться по-разному: Copycat, Fast Follower, Benchmarking-based ideation. Это когда вы системно изучаете успешные модели, берёте за основу лучшие практики и строите на этом свою стратегию.

Мы запаслись терпением и около 3-х дней фулл-тайм потратили на то, чтобы проанализировать различные источники идей. Составили список идей, которые нам нравятся, близки по духу и мы хотим их делать! Это очень важно, чтобы доводить проекты до рабочего состояния.

У нас уже был опыт разработки сайтов, мобильных приложений, а также опыт продвижения за счет SEO и ASO. Продвижение сайтов и приложений оказалось очень долгим и дорогим занятием. Поэтому мы решили протестировать платформу Chrome Web Store и сделать браузерное расширение. По информации от других разработчиков расширений, трафик там можно получить проще и быстрее.

Chrome Web Store и его спаршенные базы, в которых можно задавать различные фильтры

Первые 20 идей мы выписали, анализируя Chrome Store и сервисы аналитики расширений. На следующих этапах мы отсеивали идеи, которые не подходят по нашему чек-листу.

Сайты-базы расширений:

• Chrome Web Store https://chromewebstore.google.com

• CWS-Database https://cws-database.com

• Chrome-Stats https://chrome-stats.com

• ExtPose https://extpose.com

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

В первую очередь мы смотрели недавно опубликованные расширения. А фильтры помогали нам определять, какие расширения набрали больше всего пользователей за последнее время.

Полезные фильтры:

• Сортировка по недавно созданным расширениям

• Количество пользователей от 500 или от 1000

• Количество символов в описании ставим от 500 или от 1000

Несколько дней мы анализировали чужие расширения и развивали насмотренность. Так у нас получился список из 20 идей.

Как мы анализировали ключевые слова, спрос и конкурентов

Тут все просто. Чем выше спрос, тем лучше (но не всегда). На данном этапе наша цель — понять, насколько идея востребована пользователями и какими словами они описывают свои запросы при поиске. Чем выше спрос по ключевым словам, тем больше потенциальный трафик. Однако это не всегда так: высокая конкуренция и низкая релевантность могут снизить эффективность продвижения. Например, если в выдаче Google много информационки (статей), но нет расширений или сервисов, то лучше такой запрос не брать в расчет.

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

Инструменты для ресерча спроса:

• https://trends.google.ru/trends

• https://ads.google.com/home/tools/keyword-planner

• https://www.semrush.com

• https://www.wordstream.com/keywords

• https://ahrefs.com

Все это мы записали в табличку, чтобы потом сравнить идем между собой. Вот пример оценки 2-х наших продуктов:

Для первого продукта мы выбрали идею расширения, которое измеряет показатели Core Web Vitals.

Как мы разработали расширение, которое повторяет одну основную функцию конкурента

У конкурентов были такие функции: проверка Core Web Vitals, CrUx, графическое выделение CLS, история отчетов.

Мы выбрали одну основную функцию, которой можно пользоваться каждый день. Такую, которой мы пользуемся сами и пользуются наши знакомые/друзья/коллеги — это проверка показателей Core Web Vitals.

Пример частого использования: после каждого билда сайта, нужно обязательно измерить метрики и проверить не сломали ли сайт. Особенно это важно для SEO, так как Google и Yandex очень падкие на эти метрики.

Так же эта функция была выбрана и по другим причинам:

• Удаление главного конкурента из магазина. Мы заметил, что срок подходит к концу и его не обновляют.

• Количество конкурентов - не более 5 крупных расширений.

• Свободный ключевик для названия расширения.

Разработка проходила около 2-х недель. В целом все было легко, так как я использовал пару маленьких лайфхаков: подсматривать и говнокодить.

Кради как художник

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

Если JavaScript-код был обфусцирован, я то я просто юзал деобфускаторы, делая код читаемым и понятным.

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

Это позволило значительно сократить время разработки. Вместо месяцев на создание продукта с нуля и исправление багов, я адаптировал готовое решение под свои задачи.

В результате рабочий продукт был выпущен уже через две недели.

Как мы делали SEO-оптимизацию, генерили текст и переводы на 55 языков

Для начала мы собрали список самых частотных ключевых слов по теме Core Web Vitals, которые пользователи ищут в Google. Для этого мы использовали сервисы:

• https://www.wordstream.com/keywords

• https://ahrefs.com

Из самых популярных запросов мы выбрали название для нашего расширения. Наша цель была занять самое частотное ключевое слово, которое не занято другими крупными расширениями. Так мы выбрали название «Core Web Vitals Test».

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

Дальше мы сделали скрипт для переводов через Deepl. Оказалось, что он переводит только на 32 языка и еще требует оплату. Решили от него отказаться.

Потом мы написали скрипт для Google Translate. К сожалению, он плохо работает с экранированием аббревиатур и ему требуются глоссарии. Было лень разбираться и от него мы тоже отказались.

Для переводов лучше всего нам подошел ChatGPT. Он перевел описание и интерфейс на 55 языков, экранировал аббревиатуры и был очень добр к нам, так как сделал все за копейки.

Как мы сделали иконки, промо-картинки и лендинг

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

У нас вышло 9 статусов, 2 пака убойных лоадеров, 3 иконки, 1 огненный креатив на поиск и множество скриншотов всех сортов и расцветок.

Простейший лендинг мы сделали на Google Sites, чтобы не тратить время и деньги на домены, хостинг или другие конструкторы сайтов. Получился вот такой простой сайтик - https://sites.google.com/view/core-web-vitals-check. Нашей задачей было добавить сайт к расширению, чтобы получить ачивку «Verified publisher».

Как мы получили статус «Featured» и «Verified publisher»

Эти ачивки повышают доверие и дают преимущество в поиске.

Сначала мы добавили лендинг в Google Search Console, а затем выбрали его в поле «Официальный URL» в консоли разработчика Chrome Web Store.

Чтобы получить ачивку «Featured», мы подали заявку через эту форму - https://support.google.com/chrome_webstore/contact/one_stop_support?hl=en

Сначала нужно выбрать пункт “My item (extensions, app, or theme)”.

Потом выбираем пункт “I want to nominate my extension to receive a Featured badge and be eligible for merchandising”.

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

Через неделю нам выдали статус «Featured» и галочку «Verified publisher» рядом с адресом сайта.

А спустя пару дней сильно выросло количество показов в Chrome Store.

Результаты

Основной трафик идет с Chrome Web Store. Также большая доля трафика с поиска Google. Пользователи идут со всего мира. Индусы как всегда топ-1. США на 2-м месте, что очень радует, так как это самая ценная аудитория.

Это бесплатный органический трафик за счет SEO. Мы не вкладываем деньги на этапе запуска продукта и привлекаем первых пользователей своими силами. Все это позволяет нам тестировать продукт на жизнеспособность без потери денег.

Самое главное, мы не выдумываем идеи из головы, а подбираем идею под спрос из поиска.
Поэтому мы не тратим время и деньги на CustDev, чтобы просто провалидировать идею, а создаем продукты, на которые уже есть спрос.

Каждый проект мы публикуем на русскоязычных и англоязычных UGC-площадках: VC.ru, ProductHunt, Productradar, indiehackers.com, Reddit, Quora, Stackoverflow, Github, Medium, Dev.to.

Примеры размещений:

ProductHunt

ProductRadar

Нам нравится добывать трафик, поэтому мы всегда публикуем статьи, пишем ответы на релевантные вопросы, оставляем комментарии в тематических ТГ-каналах и статьях.

Еще мы ставим в своих профилях ссылки на проекты, а так же делаем перелинковку всех своих соц. сетей.

Сколько мы вложили

• Разработка - $0 и 2 недели своего времени.

• Маркетинг - $0 и несколько часов на SEO и размещения на площадках.

• Аккаунт разработчика - $5.

Какие планы

Мы планируем создать полноценный SaaS-сервис для регулярного мониторинга метрик скорости загрузки сайтов, сравнения метрик с конкурентами и графиками для отслеживания динамики всех показателей.

Заходите к нам в Телеграм-канал «Инди-хакеры: стартапы из 💩 и 🥢» и следите за нашим челленджем «12 проектов за 12 месяцев».

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

Штош, продолжим.

В предыдущем посте Telegram мини-приложения в 2025 или как я дошел до жизни такой. Часть уно я поведал вам, мои дорогие читатели (и два моих любимых подписчика, лю вас!!!), почему я выбрал разработку чат-рулетки в формате мини-приложения для telegram.

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

Основанная мысль заключается в том, что надо пользователю максимально рано дать потрогать продукт (действие), чтобы он сказал свое мнение (данные) и на основе этого (выводы) дорабатывать продукт (гипотеза + действие).

Ярким примером такого подхода является разработка Starship Илоном нашим Масковичем, когда он запустил по сути ведро с болтами, чтобы проверить работоспособность всех систем и, самое главное, получить реальные данные.

В противном случае разработка продукта происходит для «себя любимого», а не для пользователя, что приведет к отсутствию таковых и смерти продукта… Но давайте не о грустном, а поговорим непосредственно о разработке.

И так, что из себя будет представлять само приложение?

Фронтенд на React (это база, это надо знать), который отвечает за ту информацию, который пользователь непосредственно видит в браузере или в отдельном окне telegram, как в нашем случае мини-приложения. HTML + CSS + JS наше все. Структура моего фронтенда для мини приложения следующая:

• Стартовая страница – на которую попадает пользователь и происходит его автоматическая регистрация или авторизация по данным, которые отдает сам telegram;

• Страница поиска чата

• Страница непосредственно самого чата

И все. Совсем все. Ну вот вообще все. Только две страницы и все. Давайте дальше, на очереди бэкенд.

Бэкенд отвечает за все то, чего пользователь не видит, а именно за взаимодействие с базой данных и telegram, бизнес логику и т.д. NestJS + Prisma + postgreSQL наше все. Именно на бэкенде создается пользователь, происходит регистрация пользователя, авторизация пользователя, хранится информация о текущих сообщениях в чате (чтобы при перезагрузке страницы история не пропала), о созданных комнатах и количестве пользователей в них, создается JWT и многое многое многое другое. Для простоты разработки и отладки приложения, было принято решение разделить бэкенд на две составляющие:

• Бэкенд отвечающий за взаимодействие с telegram, а именно с ботом;

• «Основной» бэкенд, которые отвечает за все остальное.

Такой подход позволяет изолировать по сути две разные «сущности» в проекте и не бояться, что если отвалится бот, то упадет весь бэкенд и наоборот (кто сказал микросервисы?).

На этом все ребята.

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

А, ну и конечно, мини-приложение уже готово и ждет своих пользователей, как говорится welcome t.me/Socionyx_Bot/socionyx.

Буду премного благодарен за обратную связь и замечания по работе текущего мини-приложения.