Вопросы, предложения и комментарии 👇

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

А пока в ближайших планах — статья про фронтенд, который будет написан на Vue.js 3 с использованием Centrifugo и Vue-tg. Оставайтесь на связи, скоро будет интересно! 😊

Фронтенд на пороге серьёзных изменений)

✨ Друзья, доброе утро! ✨

Встречайте вторую часть серии статей про создание Telegram-бота с MiniApp интерфейсом для реального анонимного чата «Тет А Тет»! 🎉

Статья получила название: «Создание анонимного чата в Telegram: Бот с MiniApp интерфейсом. Часть 2 — VueJS3 + Centrifugo с монетизацией» и уже доступна на Хабре к прочтению.

📌 В этой части мы разберём:

✅ Разработку стильного, анимированного UI на VueJS 3 с real-time чатом.
✅ Мгновенный обмен сообщениями через Centrifugo без лишней нагрузки на сервер.
✅ Монетизацию Telegram MiniApp с помощью умной рекламы от RichAds.
✅ Финальные шаги перед продакшеном и деплой проекта.

🛠 Что мы реализуем?

🔹 Экран загрузки приложения
🔹 Поиск и подбор собеседников
🔹 Экран ожидания
🔹 Сам real-time чат

📌 Основные технологии:

🚀 VueJS 3 — современный JavaScript-фреймворк
📡 Centrifugo — real-time коммуникации
📲 VUE-TG — удобная работа с Telegram MiniApp API
🛤 Vue-Router — маршрутизация

💡 Если вы хотите создать быстрый, удобный и прибыльный анонимный чат в Telegram, эта статья для вас!

🔗 Читать на Хабре:
📌 Часть 1 (Бэкенд): Статья | GitHub
📌 Часть 2 (Фронтенд + Монетизация): Статья | GitHub

🤖 Попробовать бота в Telegram: @tet_a_tetMiniAppBot

Буду рад вашим отзывам! 🚀🔥

🔥 Упрощаем импорт переменных в VueJS 3 🔥

Друзья, делюсь полезным лайфхаком для тех, кто пишет на Vue 3! Если у вас есть повторяющиеся переменные, например, ссылка на бэкенд, и вы устали копировать её в каждом компоненте — пора навести порядок.

🔹 Как правильно хранить переменные?

1️⃣ В папке /src создаём директорию config.
2️⃣ Внутри создаём файл api.ts.
3️⃣ Добавляем туда нужную переменную:

export const API_BASE_URL = 'https://your-site.com';

4️⃣ Теперь, в любом компоненте, где нужно использовать эту переменную, просто импортируем:

import { API_BASE_URL } from '../config/api';

const response = await fetch(`${API_BASE_URL}/user_info/${userId}`);

📌 Плюсы такого подхода:

✅ Легко менять URL в одном месте, а не по всему проекту.
✅ Улучшает читаемость кода.
✅ Упрощает рефакторинг и поддержку проекта.

⚡️ Дополнительный совет:

Можно хранить не только API_BASE_URL, но и другие глобальные настройки, токены и ключи в этом же файле, но помните, что в JavaScript все на веду. Поэтому, критически важные переменные сохраняйте на стороне бэкенда.