Введение
Telegram Mini Apps (TMA) — это мощные инструменты, которые позволяют разработчикам создавать легковесные приложения, интегрируемые непосредственно в Telegram. Эти приложения могут выполнять разнообразные задачи, от обработки платежей до работы с базами данных, и становятся неотъемлемой частью экосистемы мессенджера. Одним из ключевых аспектов разработки Mini Apps является использование облачного хранилища, обеспечивающего безопасность, масштабируемость и надежное хранение данных. В этой статье мы рассмотрим, как работает облачное хранилище в Telegram Mini Apps, и какие преимущества оно предоставляет разработчикам. Запишем, прочитаем и удалим данные из облачного хранилища.
Преимущества использования облачного хранилища в Telegram Mini Apps
Безопасность и конфиденциальность
Telegram известен своей приверженностью безопасности и конфиденциальности данных пользователей. Облачное хранилище в Telegram Mini Apps не является исключением. Все данные, хранящиеся в облаке, шифруются и защищаются многоуровневыми мерами безопасности. Это обеспечивает высокий уровень защиты от несанкционированного доступа и утечки данных.
Снижение нагрузки на устройства пользователей
Использование облачного хранилища позволяет значительно снизить нагрузку на устройства пользователей. Так как данные хранятся в облаке, пользователю не нужно беспокоиться о том, что его устройство будет перегружено большим объемом информации. Это особенно актуально для приложений, которые работают с большими объемами данных, такими как медиафайлы или базы данных.
Применение CloudStorage в приложении на Vue 3
Для упрощении взаимодействия с функциональными возможностями CloudStorage TMA на Vue 3 мы будем использовать библиотеку vue-tg
-
Инициализация мини-приложения
Чтобы подключить мини-приложение к клиенту Telegram, поместите скрипт telegram-web-app.js в
<head>тег перед любыми другими скриптами, используя следующий код:<script src="https://telegram.org/js/telegram-web-app.js"></script> -
Установим vue-tg
npm i vue-tg -
Импорт useWebAppCloudStorage
В теге script компонента импортируем useWebAppCloudStorage из vue-tg
import { useWebAppCloudStorage } from 'vue-tg'useWebAppCloudStorage имеет следующие методы:
Имя Тип setStorageItemAPI бота 6.9+ Метод, который сохраняет значение в облачном хранилище, используя указанный ключ. Ключ должен содержать от 1 до 128 символов, разрешены только
A-Z,a-z,0-9,_и-. Значение должно содержать от 0 до 4096 символов. В облачном хранилище можно хранить до 1024 ключей. Если был передан необязательный параметр обратного вызова , будет вызвана функция обратного вызова . В случае ошибки первый аргумент будет содержать ошибку. В случае успеха первый аргумент будет равен null , а второй аргумент будет логическим значением, указывающим, было ли сохранено значение.getStorageItemAPI бота 6.9+ Метод, который получает значение из облачного хранилища с помощью указанного ключа. Ключ должен содержать от 1 до 128 символов, разрешены только
A-Z,a-z,0-9,_и-. В случае ошибки будет вызвана функция обратного вызова , и первый аргумент будет содержать ошибку. В случае успеха первый аргумент будет равен null , а значение будет передано как второй аргумент.getStorageItemsAPI бота 6.9+ Метод, который получает значения из облачного хранилища с использованием указанных ключей. Ключи должны содержать от 1 до 128 символов, разрешены только
A-Z,a-z,0-9,_и-. В случае ошибки будет вызвана функция обратного вызова , и первый аргумент будет содержать ошибку. В случае успеха первый аргумент будет равен null , а значения будут переданы в качестве второго аргумента.removeStorageItemAPI бота 6.9+ Метод, который удаляет значение из облачного хранилища с помощью указанного ключа. Ключ должен содержать от 1 до 128 символов, разрешены только
A-Z,a-z,0-9,_и . Если был передан необязательный параметр обратного вызова , будет вызвана функция обратного вызова . В случае ошибки первый аргумент будет содержать ошибку. В случае успеха первый аргумент будет иметь значение null , а второй аргумент будет логическим значением, указывающим, было ли удалено значение.-removeStorageItemsAPI бота 6.9+ Метод, который удаляет значения из облачного хранилища с помощью указанных ключей. Ключи должны содержать от 1 до 128 символов, разрешены только
A-Z,a-z,0-9,_и . Если был передан необязательный параметр обратного вызова , будет вызвана функция обратного вызова . В случае ошибки первый аргумент будет содержать ошибку. В случае успеха первый аргумент будет иметь значение null , а второй аргумент будет логическим значением, указывающим, были ли удалены значения.-getStorageKeysAPI бота 6.9+ Метод, который получает список всех ключей, хранящихся в облачном хранилище. В случае ошибки будет вызвана функция обратного вызова , и первый аргумент будет содержать ошибку. В случае успеха первый аргумент будет равен null , а список ключей будет передан в качестве второго аргумента.
-
Запиcь в CloudStorage TMA
C помощью метода
setStorageItemзапишем в CloudStorage информацию о например о юзере, обязательно в строковом виде.useWebAppCloudStorage().setStorageItem('initData', JSON.stringify(this.initDataUnsafe) -
Чтение из CloudStorage TMA
C помощью метода
getStorageItemполучим из CloudStorage только что записанные данные. Данные передается в параметре коллбек функции, в качестве первого аргумента.useWebAppCloudStorage().getStorageItem('initData').then((data, err) => { if(data && !err) { console.log(JSON.parse(data)) } else { console.log(err) } }) -
Удаление из CloudStorage TMA
C помощью метода
removeStorageItemудалим только что созданные ключinitDataиз облачного хранилища Telegram.useWebAppCloudStorage().removeStorageItem('initData').then((success, err) => { if(success && !err) { console.log(success) } else { console.log(err) } })
Подводя итог
Сегодня вы научились работать с облачном хранилищем Telegram во Vue. С помощью библиотеки vue-tg и его главной функции по работе с CloudStorage useWebAppCloudStorage.
