Введение
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>HTML
Установим vue-tg
npm i vue-tgBash
Импорт useWebAppCloudStorage
В теге script компонента импортируем useWebAppCloudStorage из vue-tg
import { useWebAppCloudStorage } from 'vue-tg'JavaScript
useWebAppCloudStorage имеет следующие методы:
Имя | Тип |
|---|---|
| API бота 6.9+ Метод, который сохраняет значение в облачном хранилище, используя указанный ключ. Ключ должен содержать от 1 до 128 символов, разрешены только |
| API бота 6.9+ Метод, который получает значение из облачного хранилища с помощью указанного ключа. Ключ должен содержать от 1 до 128 символов, разрешены только |
| API бота 6.9+ Метод, который получает значения из облачного хранилища с использованием указанных ключей. Ключи должны содержать от 1 до 128 символов, разрешены только |
| API бота 6.9+ Метод, который удаляет значение из облачного хранилища с помощью указанного ключа. Ключ должен содержать от 1 до 128 символов, разрешены только |
| API бота 6.9+ Метод, который удаляет значения из облачного хранилища с помощью указанных ключей. Ключи должны содержать от 1 до 128 символов, разрешены только |
| API бота 6.9+ Метод, который получает список всех ключей, хранящихся в облачном хранилище. В случае ошибки будет вызвана функция обратного вызова , и первый аргумент будет содержать ошибку. В случае успеха первый аргумент будет равен null , а список ключей будет передан в качестве второго аргумента. |
Запиcь в CloudStorage TMA
C помощью метода setStorageItem запишем в CloudStorage информацию о например о юзере, обязательно в строковом виде.
useWebAppCloudStorage().setStorageItem('initData', JSON.stringify(this.initDataUnsafe)JavaScript
Чтение из CloudStorage TMA
C помощью метода getStorageItem получим из CloudStorage только что записанные данные. Данные передается в параметре коллбек функции, в качестве первого аргумента.
useWebAppCloudStorage().getStorageItem('initData').then((data, err) => {
if(data && !err) {
console.log(JSON.parse(data))
} else {
console.log(err)
}
})JavaScript
Удаление из 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.
