Делюсь SVG-иконкой Телеграм Stars, а заодно и просто кодом, пригодится ⭐️

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="m11.47 18.6-4.5 2.73a1 1 0 0 1-1.37-.32.98.98 0 0 1-.12-.76l.7-2.73c.25-.98.93-1.8 1.85-2.24l4.91-2.34a.46.46 0 0 0 .22-.61.46.46 0 0 0-.5-.25l-5.46.94a3.85 3.85 0 0 1-3.12-.84l-1.72-1.43A.98.98 0 0 1 2.92 9l5.27-.41a1 1 0 0 0 .84-.61l2.04-4.88a1 1 0 0 1 1.83 0l2.04 4.88a1 1 0 0 0 .84.6l5.3.42a.99.99 0 0 1 .57 1.73l-4.04 3.43a.98.98 0 0 0-.33.98l1.25 5.13a.99.99 0 0 1-.74 1.2 1 1 0 0 1-.75-.13L12.5 18.6a1 1 0 0 0-1.03 0Z" />
</svg>

UPD: В комментах еще больше вариантов.

@MiniAppsForLife
#инструменты

🔒 Блокировка ориентации экрана

Некоторые мини-приложения удобнее использовать в определенной ориентации экрана. Если пользователь случайно повернет устройство, это может сломать интерфейс или испортить опыт взаимодействия. Блокировка ориентации экрана поможет избежать таких проблем, сохраняя комфорт и предсказуемость.

Для управления ориентацией в АПИ доступны два метода: lockOrientation() и unlockOrientation().

Но сперва учтем некоторые моменты: экран можно поворачивать, поэтому нужно отслеживать ориентацию в реальном времени, чтобы в определенный момент заблокировать экран. Также пользователь может свернуть приложение, повернуть устройство и снова открыть его — это тоже нужно учитывать. Работать будем только с мобильными устройствами, так как на десктопах ориентация обычно горизонтальная, и ее поддержка только усложнит задачу.

Ниже я написал готовый код на чистом JS без привязки к фреймворку, чтобы можно было легко разобраться и затащить к себе. Пример блокирует устройство в портретном состоянии:

// Проверка поддержки ориентации в браузере
const isOrientationSupported = 'orientation' in screen;

// Блокировка и разблокировка ориентации
const lockOrientation = () => Telegram.WebApp.lockOrientation();
const unlockOrientation = () => Telegram.WebApp.unlockOrientation();

// Проверка текущей ориентации
const checkOrientation = () => {
  // Работа только с мобильными устройствами
  if (!['ios', 'android'].includes(Telegram.WebApp.platform)) {
    return false;
  }

  // Блокировка при портретной (вертикальной) ориентации
  if (screen.orientation.type.startsWith('portrait')) {
    lockOrientation();
  // Разблокировка при ландшафтной (горизонтальной) ориентации
  } else if (screen.orientation.type.startsWith('landscape')) {
    unlockOrientation();
  }
};

// Установка слушателей событий
const setupOrientationListeners = () => {
  if (!isOrientationSupported) {
    return false;
  }

  // Прослушка изменения ориентации в реальном времени
  window.addEventListener('orientationchange', checkOrientation);

  // Прослушка событий сворачивания и разворачивания приложения
  Telegram.WebApp.onEvent('activated', checkOrientation);
  Telegram.WebApp.onEvent('deactivated', unlockOrientation);
}

// Очистка слушателей событий
const cleanupOrientationListeners = () => {
  if (!isOrientationSupported) {
    return false;
  }

  // Отписка от слушателей изменения ориентации
  window.removeEventListener('orientationchange', checkOrientation);

  // Отписка от слушателей сворачивания и разворачивания
  Telegram.WebApp.offEvent('activated', checkOrientation);
  Telegram.WebApp.offEvent('deactivated', unlockOrientation);
};

// Инициализация
checkOrientation();
setupOrientationListeners();

// Очистка (при необходимости)
// cleanupOrientationListeners();

Потестировать можно в 🍅 Помидорке. Там я пошел чуть дальше и в горизонтальном виде дополнительно добавил иконку с текстом о необходимости поворота.

⬇️@MiniAppsForLife
🔘#инструкции

Оформил тут на досуге популярный канал и чат про мини-приложения, в котором состою, и который однажды, собственно, меня и подтолкнул на создание своего канала 💡

Спасибо автору @rvignatenko за отзывчивость и доверие ✋

Присоединяйтесь к «зеленому» сообществу:
🚀 Telegram Mini Apps 🚀 с Романом Игнатенко
💬 Чат про Telegram Mini Apps

⬇️@MiniAppsForLife
🔘#личное

✨ Анимированные эффекты при отправке сообщения

В мае прошлого года вышло обновление в котором можно добавлять эффект при отправке сообщения в личной переписке.

От имени бота так же можно добавлять такой эффект в некоторых методах, используя уникальный идентификатор в параметре message_effect_id, но их всего шесть:

🔥 — 5104841245755180586
👍 — 5107584321108051014
❤️ — 5159385139981059251
🎉 — 5046509860389126442
👎 — 5104858069142078462
💩 — 5046589136895476101

Спасибо @kulikov_aleks за наводку 👍

⬇️@MiniAppsForLife
🔘#инструкции

Часто замечаю в мини-аппах использование таббара. Проблема в том, что зачастую он прилипает к хоум-индикатору Айфона.

У Ильи Бирмана недавно вышел разбор про этот момент на Ютубе. Посмотрите на досуге, там всего две с половиной минуты.

Справедливости ради, стоит сказать, что автор этого приложения попытался это учесть, используя env(safe-area-inset-bottom), но в Телеграме такое не поддерживается и надо явно прописать var(--tg-safe-area-inset-bottom, 0px).

Напомню, что я как-то писал пост про безопасные зоны. Там были нюансы, но Телеграм частично их поправил, где я пометил обновлениями.

⬇️@MiniAppsForLife
🔘#инструкции

🌓 Светлая и темная темы

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

Чтобы мини-приложение поддерживало такое поведение, необходимо добавить метатег и CSS-свойство:

<meta name="color-scheme" content="light dark">

:root {
  color-scheme: light dark;
}

Работа метатега и CSS-свойства одинакова, однако метатег помогает немедленно загрузить необходимую тему, не дожидаясь загрузки CSS. Это позволяет избежать классической ситуации, когда при открытии приложения ночью экран сначала ослепляет белым светом, а затем переключается на темную тему 😵

В дополнение при запуске мини-приложения Телеграм предоставляет текущее значение цветовой схемы через CSS-переменную --tg-color-scheme. Она пригодится для разрешения конфликтов, когда, например, на уровне системы тема оформления светлая, а приложение Телеграма — темное.

В этом случае CSS можно переписать так:

:root {
  color-scheme: var(--tg-color-scheme, light dark);
}

Далее было бы удобно манипулировать стилями через медиавыражение prefers-color-scheme, но на практике оно работает некорректно в некоторых случаях, поэтому выходом послужит добавление дата-атрибута с названием темы к корневому элементу html и последующего ориентирования на него в CSS.

Для этого Телеграм предоставляет свойство Telegram.WebApp.colorScheme, которое указывает текущую цветовую схему, а также событие themeChanged, чтобы отслеживать изменения темы динамически:

// Устанавливаем значение при запуске
document.documentElement.dataset.mode = Telegram.WebApp.colorScheme;

// Меняем его при переключении
Telegram.WebApp.onEvent('themeChanged', () => {
  document.documentElement.dataset.mode = this.colorScheme;
});

Теперь можно легко управлять стилями:

body {
  background-color: #fff;
  color: #000;
}

[data-mode="dark"] body {
  background-color: #000;
  color: #fff;
}

Итоговый пример кода:

<html>
  <head>
    <!-- … -->
    <meta name="color-scheme" content="light dark">
    <style>
      :root {
        color-scheme: var(--tg-color-scheme, light dark);
      }

      body {
        background-color: #fff;
        color: #000;
      }

      [data-mode="dark"] body {
        background-color: #000;
        color: #fff;
      }
    </style>
    <script>
      document.documentElement.dataset.mode = Telegram.WebApp.colorScheme;

      Telegram.WebApp.onEvent('themeChanged', () => {
        document.documentElement.dataset.mode = this.colorScheme;
      });
    </script>
    <!-- … -->
  </head>

  <body>
    <!-- … -->
  </body>
</html>

⬇️@MiniAppsForLife
🔘#инструкции

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

⬇️@MiniAppsForLife
🔘#личное

🆕 Новое в версии АПИ 9.0 для мини-аппов

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

➡️ DeviceStorage. Позволяет использовать постоянное локальное хранилище на устройстве пользователя. Это аналог localStorage браузера, но интегрированый в клиент Телеграм.

➡️ SecureStorage. Позволяет использовать безопасное локальное хранилище на устройстве пользователя для конфиденциальных данных. Подходит для хранения токенов, секретов, состояния аутентификации и т. п.

Как итог, теперь мы имеем три сущности CloudStorage, DeviceStorage и SecureStorage.

Правда, есть ощущение, что при обновлении забыли изменить версию скрипта, отчего эти новые функции просто нет возможности проверить. То есть на всех клиентах Telegram.WebApp.version = 8.0 и пока обновлений в сторах не видно, а прошло уже 4 дня 🤷‍♂️

⬇️@MiniAppsForLife
🔘#новости

📞 Павел на связи

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

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

Описание багов собирают в этом чате. По итогу будет сформирован файл и отправлен начальнику 📨

⬇️@MiniAppsForLife
🔘#наблюдения

🆔 Идентификаторы профилей

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

➡️ Telegram Desktop: Настройки ▶️ Продвинутые настройки ▶️ Экспериментальные настройки ▶️ опция Show Peer IDs in Profile ✅

➡️ Telegram для MacOS: Настройки ▶️ Общие ▶️ опция «Показывать ID чатов в профиле»  ✅

Стоит учесть, что в случае с группами и каналами к айдишнику в начале еще нужно приписать -100. То есть, если в профиле ID указан как 123456789, то итоговый ID будет -100123456789.

⬇️@MiniAppsForLife
🔘#инструкции

🥸 История про мошенника

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

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

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

Один случай запомнился особенно. На вопрос клиента: «Почему вы не указаны как разработчик?» — он ответил, что я якобы был заказчиком, а он создал бота для меня.

Проблема большинства «его» проектов в том, что там отсутствовало авторство. Я даже хотел было написать пострадавшим и предупредить, но не смог этого сделать.

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

А посыл сей истории в том, что если вы делаете ботов — указывайте свое имя в профиле, в самом боте или в коде. Это защитит вашу работу и убережет других от обмана.

❓ Расскажите, были ли у вас похожие случаи и как вообще справляться с такими ситуациями?

⬇️@MiniAppsForLife
🔘#личное

✨ Эффект блеска на кнопке

В документации, начиная с версии АПИ 7.10, есть вот такой прикольный эффект блеска главной и второстепенной кнопок для привлечения внимания.

Делается через параметр has_shine_effect в методе setParams:

// Главная кнопка
Telegram.WebApp.MainButton.setParams({
  has_shine_effect: true,
})

// Второстепенная кнопка
Telegram.WebApp.SecondaryButton.setParams({
  has_shine_effect: true,
})

@MiniAppsForLife
#инструкции

📞 Павел перезвонил

Вчера вышла новая версия Телеграма для Айос и Макос. Починили почти все пункты, которые сообщество собирало пару недель назад. Оперативно 🔥

Из самого главного — наконец-то пропал непонятный отступ на Айфоне внизу страницы, который появлялся при скролле в тех случаях, когда не было нативных кнопок BottomButton ✔️

Заодно исправили баг с инпутами и клавиатурой, когда при ее открытии невозможно было доскроллить до конца страницы или сфокусированного поля ✔️

Полный список правок Владислав привел в этом посте.

⬇️@MiniAppsForLife
🔘#новости

🔤 Блокировка выделения текста

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

Чтобы его убрать достаточно прописать в CSS такое правило глобально для всего приложения или точечно для определенного блока:

/* Отключить для всего сайта */
html {
  -webkit-user-select: none;
  user-select: none;
}

/* Отключить для отдельного блока */
.block {
  -webkit-user-select: none;
  user-select: none;
}

Этот код запрещает что-либо выделять, соответственно, и лупа не появляется. При этом выделения в полях ввода сохраняют работоспособность.

Если потребуется, то для нужного блока можно вернуть выделение:

/* Включить для отдельного блока */
.block {
  -webkit-user-select: text;
  user-select: text;
}

@MiniAppsForLife
#инструкции

Ранее уже упоминал, что перешел на Grammy и в ус не дую 🥤

Пока единственный пробел был в валидации данных пользователя, но и тут нашелся плагин 💻 grammyjs/validator.

⬇️@MiniAppsForLife
🔘#инструменты

↔️ Умный фуллскрин

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

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

Поэтому самым подходящим способом будет определение мобилки и программный запуск на полный экран:

if (!['ios', 'android'].includes(Telegram.WebApp.platform)) {
  Telegram.WebApp.requestFullscreen()
}

А на десктопе и в веб-версии фуллскрин и так можно запустить вручную через меню (три точки) или по отдельной кнопке в интерфейсе.

⬇️@MiniAppsForLife
🔘#инструкции

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

Заодно определился с категорией — юзабилити. Давно не слышал этого слова, но оно как раз точно описывает, о чем хочется писать.

Кстати, найти хорошие авторские каналы — тот еще квест. Многие, на кого я подписан, уже довольно крупные, с тысячами подписчиков. А вот новые, интересные, — их еще поискать надо.

Поэтому сейчас все чаще заглядываю в профили людей в чатах и комментариях. Уже подписался на пяток интересных. Иногда заглядываю и к своим читателям — если тема заходит, тоже подписываюсь в ответ.

Лендинг конкурса — tg-contest.tilda.ws. Можно глянуть, почитать и тоже вписаться, если интересно.

Главный канал — @tg_contest_main. Там будут подборки, активности, контент участников и голосование за «Выбор читателей».

⬇️@MiniAppsForLife
🔘#личное

⭐ Избранное на канале

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

Окружение:

➡️ Локальная разработка через туннель
➡️ Режим отладки с помощью инспектора

Настройка:

➡️ Добавление иконки на домашний экран телефона
➡️ Запуск из любого чата
➡️ Отображение кол-ва пользователей
➡️ Настройка сплэш-экрана
➡️ Идентификаторы профилей

Разработка:

➡️ Локализация бота
➡️ Блокировка ориентации экрана
➡️ Определение устройства
➡️ Блокировка выделения текста
➡️ Умный фуллскрин
➡️ Кэширование скрипта инициализации

Оформление:

➡️ Светлая и темная темы
➡️ Безопасные зоны
➡️ SVG-иконка Star
➡️ Отключение зума
➡️ Анимированные эффекты при отправке сообщения
➡️ Эффект блеска на кнопке
➡️ Нюансы при создании таббара

Инструменты:

➡️ asmico_attach_bot
➡️ GrammY (валидатор initData)
➡️ WebpageBot
➡️ Lottie

@MiniAppsForLife

🆕 Новое в версии АПИ 9.1 для мини-аппов

Добавили новый метод hideKeyboard() для скрытия системной клавиатуры.

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

❔ Как думаете, в каких кейсах новый метод пригодился бы еще?

⬇️@MiniAppsForLife
🔘#новости

@BotFather обзавелся своим мини-приложением. Теперь там можно делать то же самое, что и обычными командами 👍

⬇️@MiniAppsForLife
🔘#новости