Введение
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 в тег перед любыми другими скриптами, используя следующий код: - Установим vue-tg
npm i vue-tg - Импорт useWebAppCloudStorage
В теге script компонента импортируем useWebAppCloudStorage из vue-tgimport { useWebAppCloudStorage } from 'vue-tg'
useWebAppCloudStorage имеет следующие методы:Имя Тип setStorageItem API бота 6.9+Метод, который сохраняет значение в облачном хранилище, используя указанный ключ. Ключ должен содержать от 1 до 128 символов, разрешены только A-Z, a-z, 0-9, _и -. Значение должно содержать от 0 до 4096 символов. В облачном хранилище можно хранить до 1024 ключей. Если был передан необязательный параметр обратного вызова , будет вызвана функция обратного вызова . В случае ошибки первый аргумент будет содержать ошибку. В случае успеха первый аргумент будет равен null , а второй аргумент будет логическим значением, указывающим, было ли сохранено значение.getStorageItem API бота 6.9+Метод, который получает значение из облачного хранилища с помощью указанного ключа. Ключ должен содержать от 1 до 128 символов, разрешены только A-Z, a-z, 0-9, _и -. В случае ошибки будет вызвана функция обратного вызова , и первый аргумент будет содержать ошибку. В случае успеха первый аргумент будет равен null , а значение будет передано как второй аргумент.getStorageItems API бота 6.9+Метод, который получает значения из облачного хранилища с использованием указанных ключей. Ключи должны содержать от 1 до 128 символов, разрешены только A-Z, a-z, 0-9, _и -. В случае ошибки будет вызвана функция обратного вызова , и первый аргумент будет содержать ошибку. В случае успеха первый аргумент будет равен null , а значения будут переданы в качестве второго аргумента.removeStorageItem API бота 6.9+Метод, который удаляет значение из облачного хранилища с помощью указанного ключа. Ключ должен содержать от 1 до 128 символов, разрешены только A-Z, a-z, 0-9, _и . Если был передан необязательный параметр обратного вызова , будет вызвана функция обратного вызова . В случае ошибки первый аргумент будет содержать ошибку. В случае успеха первый аргумент будет иметь значение null , а второй аргумент будет логическим значением, указывающим, было ли удалено значение.-removeStorageItems API бота 6.9+Метод, который удаляет значения из облачного хранилища с помощью указанных ключей. Ключи должны содержать от 1 до 128 символов, разрешены только A-Z, a-z, 0-9, _и . Если был передан необязательный параметр обратного вызова , будет вызвана функция обратного вызова . В случае ошибки первый аргумент будет содержать ошибку. В случае успеха первый аргумент будет иметь значение null , а второй аргумент будет логическим значением, указывающим, были ли удалены значения.-getStorageKeys API бота 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.