Изображения в PuzzleBot Mini Apps: что важно предусмотреть
Когда делаешь мини-приложение для PuzzleBot, самое простое решение — закинуть картинки на любой хостинг и просто вставить ссылки. Сначала всё работает нормально, но через время начинают всплывать неприятные моменты.
1. Хостинги не вечны
Даже крупные сервисы иногда меняют правила, удаляют файлы или вообще закрываются. И в какой-то момент часть изображений просто перестаёт открываться.
Для мини-приложения это неприятно: интерфейс ломается, а вместо картинок появляются пустые блоки.
Поэтому лучше сразу сделать хранение изображений так, чтобы потом не пришлось всё переносить заново.
2. VPN и сетевые ограничения
Сейчас многие сидят через VPN, мобильный интернет или нестабильные сети. Из-за этого бывает ситуация, когда само мини-приложение открывается без проблем, а картинки — нет.
В итоге приложение вроде работает, но выглядит уже совсем не так, как задумывалось.
3. Просто хочется удобства
Не очень удобно постоянно заходить в сторонние сервисы, загружать файлы и копировать ссылки вручную.
Хочется, чтобы всё было под рукой и добавлялось буквально за пару кликов.
Какой вывод из этого всего
Логичное решение — хранить изображения там же, где живёт само мини-приложение, то есть на серверах PuzzleBot.
Так мы убираем зависимость от внешних хостингов, уменьшаем риск поломок и упрощаем себе жизнь.
Дальше мы разберём, как сделать небольшой экран веб-аппа внутри платформы, через который можно загружать картинки. После загрузки мы будем получать ссылку на изображение и уже использовать её в приложении там, где нужно.
На первом экране создаём обычную форму ввода.
Что нужно сделать:
- добавить форму ввода
- в типе ввода выбрать «загрузка файла»
Дальше в настройках нижней кнопки ""Отправить ответ" указываем действие:
- «Переход к мини-приложению»
- и имя второго экрана, который мы заранее подготовили (или должны были подготовить :D)
Далее займемся вторым экраном мини приложения
В блоке контента необходимо указать переменную {{img}}. Предварительно ее нужно создать в разделе «Переменные», выбрав тип «Текст». В дальнейшем в эту переменную будет передаваться значение из формы ввода первого экрана.
Далее в блоке «Действия» нам необходимо записать в созданную переменную данные из формы ввода. Для этого добавим действие «Изменить переменную» и выберем переменную img. В качестве значения укажем переменную формы первого экрана — она имеет формат form_variable_******. В нашем случае это {{form_variable_9QF2UG1H}}.
Готово, теперь можно запускать первый экран мини-приложения и выбирать изображение для загрузки. Если все настроено правильно, после загрузки у вас автоматически откроется второй экран со ссылкой вида https://pbt.storage.yandexcloud.net/cp_web_pages_files/***********************. Именно эту ссылку мы в дальнейшем будем использовать в наших проектах. Также данный способ подходит не только для изображений, но и для других типов файлов.
Посвятил этому вечер — надеюсь, было полезно. Буду рад любой обратной связи и вопросам в своем телеграме @Antoniy_N