qbnk // Mini Apps, Development and Me

Вкратце о том, как Влад ночью релизит Telegram Apps Center

Команда Telegram выложила официальный анонс этих обновлений, ловите:

http://telegram.org/blog/fullscreen-miniapps-and-more

Очень занятные комментарии в посте Код Дурова про крайний пост Павла. Что-то даже немного грустно стало 🙁

https://t.me/d_code/20823

Трансляция запущена!

Вы работать сегодня будете или нет?

— Software and Game Development
— twitch.tv/qbnk

⭐️ Обновление init data в Telegram Mini Apps

Тем временем Команда Telegram добавила долгожданное поле photo_url (аватарка пользователя) в init data, отправляемый в мини-приложения.

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

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

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

▶️ Сегодня трансляция

Сегодня вечерком включаемся. Есть просьба — чуть позже проголосовать в опросе касательно того, чем хотите на нём заняться. До встречи! 👋

Telegram Mini Apps: Обзорная Сессия в Минске

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

Наш специальный гость – Влад Кибенко, евангелист мини-приложений и разработчик из TON Studio, автор подробной документации по Telegram Mini Apps и мастер с богатым опытом в разработке.

Влад расскажет
✔️ Что такое ТМА и как они устроены.
✔️ Технологии разработки.
✔️ Основные функциональные возможности Telegram Mini Apps: биометрия, подтверждение закрытия приложения, cloud storage и многое другое.
✔️ Как попасть в Telegram Apps Center.
✔️ Полезные ресурсы и утилиты: документация, GitHub, Mate.

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

🎤 Открытый микрофон
Во время митапа у вас будет возможность рассказать о своём проекте. Это отличный шанс для фаундеров привлечь внимание к своим проектам. Обязательная предварительная регистрация через личные сообщения @ahtlv

📅 Дата: Суббота, 23 ноября 2024 года
⏲ Время: 14:00
📍 Место: Минск, пр-т Машерова 9, К8 (ех. Корпус)

Приятным бонусом будут: крутой нетворкинг, угощения 🍕 и SBT от TON Society 🙏

🔗 Вход бесплатный по предварительной регистрации.

Приходите, друзья из Беларуси! Это, наверное, будет моё самое длинное выступление

Vite чудесен тем, что позволяет крутить-вертеть модулями как угодно, и в нашем случае достаточно перехватить импорт модуля, расширение которого заканчивается на .png (пока что ограничимся им). Для такого модуля необходимо определить, что должно вернуться. Для работы с изображениями будем использовать библиотеку sharp.

Перед написанием плагина оставлю напоследок одну ремарку — не стоит просто смотреть на одно расширение импорта при написании плагинов, затрагивающих ординарные (картинки, шрифты и прочую статику) файлы. Если мне не изменяет память, то по умолчанию Vite в качестве результата импорта возвращает URL для получения этого файла. Чтобы это поведение оставить в покое, при импорте модулей можно добавлять query-параметры. Пример такого импорта:

import image from './image.png?sharp'

В плагин попадет путь с query-параметром ?sharp. За счёт этого мы сможем понять, что плагин необходимо применить к этому импорту.

Итак, вот как выглядит конечная реализация плагина:

import { Plugin } from 'vite';
import sharp from 'sharp';

export function imagePlugin(): Plugin {
  return {
    // Задаем название плагина.
    name: 'image',
    // Говорим Vite, что этот плагин нужно запустить
    // перед встроенными плагинами Vite.
    enforce: 'pre',
    // Пишем функцию, которая трансформирует результат
    // импорта. Тут должен быть возвращен любой JavaScript
    // код. В нашем случае еще необходимо в этом коде
    // сделать экспорт объекта, описывающего изображение.
    async transform(code, id) {
      if (id.includes('.png?sharp')) {
        // По умолчанию тут будет храниться ссылка для загрузки
        // этого изображения. В результате она будет использована.
        const [, resolved] = code.match(/^export default "(.+)"$/);

        // Загружаем изображение, получаем информацию
        // о нем и создаем blurDataURL.
        const image = sharp(id.slice(0, id.indexOf('?')));
        const meta = await image.metadata();
        const blurBuffer = await image
          .blur()
          .resize(10)
          .toBuffer();

        // Не забываем экспортировать объект, который
        // потом будем использовать в нашем коде приложения.
        return `export default ${JSON.stringify({
          src: resolved,
          width: meta.width,
          height: meta.height,
          mime: 'image/png',
          blurDataURL: `data:image/png;base64,${blurBuffer.toString('base64')}`,
        })};`;
      }

      // Если путь модуля под паттерн не попал, возвращаем
      // null. Тогда Vite ничего с этим кодом не сделает.
      return null;
    },
  };
}

Не выглядит как что-то сложное, не правда ли? И теперь у нас возможность импортировать изображения и сразу иметь полную мета-информацию о них, которую можно непосредственно использовать в приложении.

Тут остается проблема с тем, что TypeScript наших приколов не поймет, поэтому чтобы он понимал, что мы импортируем, просто создадим файл с декларациями sharp-image.d.ts с таким контентом:

declare module "*.png?sharp" {
  interface ImageMeta {
    src: string;
    width: number;
    height: number;
    mime: 'image/png';
    blurDataURL: string;
  }
  const meta: ImageMeta;
  export default meta;
}

А теперь представьте, сколько всего ещё можно придумать?

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

При написании плагинов всё ограничивается сугубо вашей фантазией.

🥸 Заключение

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

Писать плагины не страшно и не сложно, а даже очень полезно.

На этом у меня всё. Спокойной ночи, подписота 👍

🚩 Set User Emoji API

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

Эта фича хорошо показала себя во ВКонтакте и используется для виральности приложений.

🚩 File Downloads API

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

Метод принимает 2 аргумента — ссылку для скачивания и название файла.

У меня лично была необходимость в этом методе, когда мы реализовывали Digital Resistance. Собственно, Set User Emoji API нам там тоже очень нужен был. Из-за отсутствия этих API мы не смогли доставить пару прикольных фич.

🚩 Activity API

Ну и, собственно, последняя по порядку, но не по значения фича — Activity API.

Этот API ответственен за передачу информации об активном состоянии приложения. Мини-приложение будет получать 2 новых события: activated и deactivated. Смею предположить, что прилетать они будут в случае сокрытия и открытия приложения.

Привет.

Сегодня выскочил пост с рекламой конкурса Красоты Кода от Сбербанка. Помните такой? В прошлом году я про него рассказывал.

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

Во-первых, у меня чуть глаза не выпали (в плохом смысле этого слова) от вот этих разлетающихся частиц по всему экрану. Зачем оно надо вообще? Нельзя простенький, приятный для глаза сайт сделать? Если при прочтении текста на странице возникает ощущение того, что этот текст есть CAPTCHA — это очень плохо. Странно, что вообще об этом надо говорить.

Во-вторых, я поорал с заданий, которые дали на этот год.

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

Вы описание задачи видели вообще? Там Декларация независимости США по объему даже половины описания задачи не занимает. Кто вообще будет это выполнять? А уж тем более, кто и как это проверять-то будет?

При прочтении информации о задаче, у меня возникло ощущение, что это тупо чье-то сообщение из чата. Что это за первый абзац вообще? Зачем эта дебильная предыстория с джуном и сеньором? Это всё нейронка писала что-ли? Господи, дайте обычное несложное задание, где разработчики могут показать красивый код или не называйте этот конкурс конкурсом красоты кода.

Позорище

Трансляция запущена!

Впечатления от буткемпа и TON Gateway. Затем кодим

— Software and Game Development
— twitch.tv/qbnk

Привет. Сегодня включаемся ориентировочно после 17:30-18:00!

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

💬 Mass adoption в TON

В общем, я не совсем понимаю, почему подход к mass adoption'у TON-а именно такой, какой есть сейчас. Есть ощущение, что расчет идет именно на то, что кто-то придумает какие-нибудь прикольные мини-приложения, которые затянут пользователей, а уже затем через них как-то заонбордить пользователей в TON.

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

Для меня mass adoption заключается в повседневном использовании криптовалюты в целях, отличных от заработка. Я пользуюсь деньгами каждый день, для меня mass adoption — это про расплатиться в кафе, автобусе, онлайн. Понятно, что чтобы к этому прийти, пользователя надо сначала познакомить с криптовалютой, с этим отлично справляются Tap2Earn приложения. Но что эти приложения делают плохо, так это удерживают пользователей, они просто приходят с одной целью — заработать и уйти, так и не осев в криптовалюте. В конечном итоге я не считаю Tap2Earn-приложения особо полезными для экосистемы. Выхлоп есть, но будто бы можно и лучше.

💡 Как я это вижу

Если говорить о том, как лично я вижу mass adoption TON, то не могу не упомянуть о том, что Telegram Mini Apps — это инструмент не только для онбординга пользователей в TON, но и для их удержания в самом Telegram. Я вижу светлое будущее Telegram и Telegram Mini Apps в частности, в большем фокусе на самой платформе, потому что ее потенциал ощутимо больше чем у аналогов — WeChat и VK Mini Apps. И всё это благодаря обширной интернациональной аудитории и доверия к создателю.

Я считаю, что команде стоит больше внимания уделять развитию Telegram Mini Apps. Чем больше возможностей на платформе, тем больше разработчиков сюда придет и сделает более интересные и полезные приложения, которые в свою очередь притянут больше пользователей. Уже затем, через такие приложения пользователям можно подсовывать функционал, связанный с TON.

Здесь важно понимать, что в Telegram Mini Apps войти куда проще, чем в TON. Пользователю не нужно обладать специфичными техническими знаниями, да и в принципе нет необходимости в каком-либо погружении, достаточно иметь приложение Telegram, что мы берем за очевидную основу рассуждений. После погружения пользователей во что-то более понятное, вынудить пользователей погружаться в вещи посложнее наподобие TON.

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

Вот этот пост я хотел написать еще примерно полгода назад. Каждый раз радуюсь, когда в постах Павла есть хоть капелька новостей о Telegram Mini Apps, а тут даже целый пост, посвященный платформе.

Ave, Pavel! 👍

🔜 Telegram is about to introduce 10 new features for Mini Apps, enabling developers to create dozens of new kinds of apps and games on Telegram.

📺 Full-Screen Mode
📱 Home Screen Shortcuts
✍️ Subscription Plans
📍 Geolocation Access (with permissions)
📱 Device Orientation Data
💤 Emoji Status Access
🎨 Media Sharing
🎁 Sending Gifts
💭 Expanded Messaging Limits
💰 Ad Monetization

▶️ The last two items are already live with the remaining features launching within 2-4 weeks. Get your Mini Apps ready! 🚀