{"draftJsState":{"blocks":[{"data":{"image":{"id":"6846ffc333562a4b4170b531"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"44aok"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"amqfi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Telegram Mini Apps предоставляют мощную платформу для создания интерактивных приложений внутри Telegram. В сочетании с Blazor WebAssembly разработчики получают возможность создавать такие приложения, используя C# и .NET. В этой статье мы подробно рассмотрим процесс интеграции Telegram WebApp SDK в Blazor-приложение.","type":"unstyled","key":"dbggr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"1. Настройка проекта","type":"header-two","key":"br3dv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавление Telegram WebApp SDK","type":"header-three","key":"aj63q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Первый шаг - добавление SDK Telegram в ваш Blazor-проект. Для этого модифицируем файл wwwroot/index.html:","type":"unstyled","key":"6k1aa"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":34,"style":"ITALIC"},{"length":37,"offset":438,"style":"ITALIC"}],"text":"\n\n\n \n \n \n\n\n \n\n","type":"blockquote","key":"5jins"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"2. Модели данных","type":"header-two","key":"en5q1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Классы для работы с Telegram API","type":"header-three","key":"190jm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создадим необходимые модели данных для работы с информацией от Telegram:","type":"unstyled","key":"6on12"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"public class InitDataUnsafe\n{\n [JsonPropertyName(\"query_id\")] \n public string? QueryId { get; set; }\n \n [JsonPropertyName(\"user\")] \n public WebAppUser? User { get; set; }\n \n [JsonPropertyName(\"receiver\")] \n public WebAppUser? Receiver { get; set; }\n \n [JsonPropertyName(\"chat_type\")] \n public string? ChatType { get; set; }\n \n [JsonPropertyName(\"chat_instance\")] \n public string? ChatInstance { get; set; }\n \n [JsonPropertyName(\"start_param\")] \n public string? StartParam { get; set; }\n \n [JsonPropertyName(\"can_send_after\")]\n public int? CanSendAfter { get; set; }\n \n [JsonPropertyName(\"auth_date\")] \n public string AuthDate { get; set; } = null!;\n \n [JsonPropertyName(\"hash\")] \n public string Hash { get; set; } = null!;\n \n [JsonPropertyName(\"signature\")] \n public string Signature { get; set; } = null!;\n}\n\npublic class WebAppUser\n{\n [JsonPropertyName(\"id\")] \n public long Id { get; set; }\n \n [JsonPropertyName(\"is_bot\")] \n public bool? IsBot { get; set; }\n \n [JsonPropertyName(\"first_name\")] \n public string? FirstName { get; set; }\n \n [JsonPropertyName(\"last_name\")] \n public string? LastName { get; set; }\n \n [JsonPropertyName(\"username\")] \n public string? Username { get; set; }\n \n [JsonPropertyName(\"language_code\")] \n public string? LanguageCode { get; set; }\n \n [JsonPropertyName(\"is_premium\")] \n public bool? IsPremium { get; set; }\n \n [JsonPropertyName(\"added_to_attachment_menu\")] \n public bool? AddedToAttachmentMenu { get; set; }\n \n [JsonPropertyName(\"allows_write_to_pm\")] \n public bool? AllowsWriteToPm { get; set; }\n \n [JsonPropertyName(\"photo_url\")] \n public string? PhotoUrl { get; set; }\n}\n\npublic class WebAppChat\n{\n [JsonPropertyName(\"id\")]\n public long Id { get; set; }\n \n [JsonPropertyName(\"type\")] \n public string Type { get; set; } = null!;\n \n [JsonPropertyName(\"title\")] \n public string Title { get; set; } = null!;\n \n [JsonPropertyName(\"username\")] \n public string? Username { get; set; }\n \n [JsonPropertyName(\"photo_url\")] \n public string? PhotoUrl { get; set; }\n}","type":"blockquote","key":"1d5t1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"69hqk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"3. Работа с Telegram API из Blazor","type":"header-two","key":"e71lh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Получение данных через IJSRuntime","type":"header-three","key":"fn6e5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для взаимодействия с Telegram API используем IJSRuntime: ","type":"unstyled","key":"ckjrm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"@inject IJSRuntime JsRuntime\n\n@code {\n private InitDataUnsafe? initData;\n \n protected override async Task OnInitializedAsync()\n {\n try\n {\n var json = await JsRuntime.InvokeAsync(\"getTelegramWebAppData\");\n if (json != \"null\")\n {\n initData = JsonSerializer.Deserialize(json);\n }\n }\n catch (Exception ex)\n {\n Console.WriteLine($\"Ошибка при получении данных: {ex.Message}\");\n }\n }\n}","type":"blockquote","key":"ffqcm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"4. Отображение данных пользователя","type":"header-two","key":"aaq0a"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Компонент для отображения информации","type":"header-three","key":"89qgf"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создадим компонент для отображения данных пользователя:","type":"unstyled","key":"d111r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

\n @if (User.PhotoUrl != null)\n {\n $\"User$ \n }\n \n

@User.FirstName @User.LastName

\n \n

ID: @User.Id

\n \n @if (!string.IsNullOrEmpty(User.Username))\n {\n

\n Username: @@@User.Username\n

\n }\n \n

Bot: @User.IsBot

Premium: @User.IsPremium

Language: @User.LanguageCode

\n Added to Menu: @User.AddedToAttachmentMenu\n

\n Allows PM: @User.AllowsWriteToPm\n

\n\n\n@code {\n [Parameter]\n public WebAppUser User { get; set; } = null!;\n}","type":"blockquote","key":"e55ti"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В этой статье мы рассмотрели интеграции Telegram Mini Apps с Blazor WebAssembly:","type":"unstyled","key":"51bes"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавили Telegram WebApp SDK в проект","type":"ordered-list-item","key":"edfne"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создали модели для работы с данными","type":"ordered-list-item","key":"3jbmk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Реализовали получение данных через IJSRuntime","type":"ordered-list-item","key":"1jc2i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Настроили отображение информации о пользователе","type":"ordered-list-item","key":"c86ep"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":11,"offset":0}],"inlineStyleRanges":[],"text":"gitverse.ru","type":"unstyled","key":"2m5r4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"7XbCI3W9BcaMj5TZMACv"}],"entityMap":{"0":{"data":{"url":"https://gitverse.ru/Pykhov/TelegramMiniAppBlazorWASM.git"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}