Создание настраиваемой вкладки каналов и групп с ASP.NET основной MVCCreate a Custom Channel and Group Tab with ASP.NET Core MVC

В этом руководстве мы рассмотрим создание настраиваемой вкладки канал/группа с помощью C# и ASP.Net Core MVC.In this quickstart we'll walk-through creating a custom channel/group tab with C# and ASP.Net Core MVC. Мы также используем Приложение App Studio для Microsoft Teams , чтобы завершить манифест приложения и развернуть вкладку в Teams.We'll also use App Studio for Microsoft Teams to finalize your app manifest and deploy your tab to Teams.

Необходимые компонентыPrerequisites

  • Для выполнения этого руководства вам потребуется клиент Microsoft 365 и группа, настроенная с разрешенной отправкой пользовательских приложений .To complete this quickstart you'll need a Microsoft 365 tenant and a team configured with Allow uploading custom apps enabled. Чтобы узнать больше, ознакомьтесь со статьей Подготовка клиента Microsoft 365.To learn more, see Prepare your Microsoft 365 tenant.

    • Если у вас в настоящее время нет учетной записи Microsoft 365, вы можете получить бесплатную подписку с помощью программы Майкрософт для разработчиков.If you don't currently have a Microsoft 365 account, you can sign up for a free subscription through the Microsoft Developer Program. Подписка останется активной до тех пор, пока вы ее используете для текущей разработки.The subscription will remain active as long as you're using it for ongoing development.
  • Вы будете использовать приложение App Studio для импорта приложения в Teams.You'll use App Studio to import your application to Teams. Чтобы установить приложение App Studio выберите  Приложение Store App Store в левом нижнем углу приложения Teams, а затем выполните поиск в App Studio.To install App Studio select Apps Store App at the bottom-left corner of the Teams app, and search for App Studio. Найдя плитку, выберите ее и нажмите кнопку установить в диалоговом окне всплывающее окно.Once you find the tile, select it and choose install in the pop-up window dialog box.

Кроме того, для этого проекта необходимо установить следующие компоненты в среде разработки:In addition, this project requires that you have the following installed in your development environment:

  • Текущая версия Visual Studio IDE с установленной базовой межплатформенной рабочей нагрузкой .NET.The current version the Visual Studio IDE with the .NET CORE cross-platform development workload installed. Если у вас еще нет Visual Studio, вы можете скачать и установить последнюю версию сообщества Microsoft Visual Studio для бесплатной версии.If you don't already have Visual Studio, you can download and install the latest Microsoft Visual Studio Community version for free.

  • Средство обратного прокси-сервера ngrok .The ngrok reverse proxy tool. Вы будете использовать ngrok для создания туннеля к общедоступным конечным точкам HTTPS на локальном веб-сервере.You'll use ngrok to create a tunnel to your locally running web server's publicly-available HTTPS endpoints. Вы можете скачать его здесь.You can download it here.

Получение исходного кодаGet the source code

Откройте командную строку и создайте новый каталог для проекта со вкладками.Open a command prompt and create a new directory for your tab project. Чтобы приступить к работе, мы предоставили проект вкладки простой группы каналов .We have provided a simple Channel Group Tab project to get you started. Чтобы получить исходный код, можно скачать папку ZIP и извлечь файлы или клонировать репозиторий примера в новый каталог:To retrieve the source code you can download the zip folder and extract the files or clone the sample repository into your new directory:

git clone https://github.com/OfficeDev/microsoft-teams-sample-tabs.git

После создания исходного кода откройте Visual Studio и выберите Открыть проект или решение.Once you have the source code, open Visual Studio and select Open a project or solution. Перейдите в каталог приложений вкладки и откройте чаннелграуптабмвк. sln.Navigate to the tab application directory and open ChannelGroupTabMVC.sln.

Чтобы построить и запустить приложение, нажмите клавишу F5 или в меню Отладка выберите команду начать отладку .To build and run your application press F5 or choose Start Debugging from the Debug menu. В браузере перейдите по приведенным ниже URL-адресам и убедитесь, что приложение загружено правильно:In a browser, navigate to the URLs below and verify that the application loaded properly:

  • http://localhost:44360
  • http://localhost:44360/privacy
  • http://localhost:44360/tou

Просмотр исходного кодаReview the source code

Startup.csStartup.cs

Этот проект был создан из пустого шаблона веб-приложения ASP.NET Core 2,2 с установленным флажком Расширенная настройка для HTTPS , установленным во время установки.This project was created from an ASP.NET Core 2.2 Web Application empty template with the Advanced - Configure for HTTPS check box selected at setup. Службы MVC регистрируются методом платформы внедрения зависимостей ConfigureServices() .The MVC services are registered by the dependency injection framework's ConfigureServices() method. Кроме того, по умолчанию в пустом шаблоне не включается возможность обслуживания статического содержимого, поэтому в метод добавляется промежуточное по промежуточным файлам Configure() .Additionally, the empty template doesn't enable serving static content by default, so the static files middleware is added to the Configure() method:

public void ConfigureServices(IServiceCollection services)
  {
    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
  }
public void Configure(IApplicationBuilder app)
  {
    app.UseStaticFiles();
    app.UseMvc();
  }

Папка wwwrootwwwroot folder

В ядре ASP.NET корневая папка веб-сайта — это место, в котором приложение выполняет поиск статических файлов.In ASP.NET Core, the web root folder is where the application looks for static files.

Папка AppManifestAppManifest folder

Эта папка содержит следующие обязательные файлы пакета приложения:This folder contains the following required app package files:

  • Значок с полным цветом , измеряющий 192 x 192 пикселей.A full color icon measuring 192 x 192 pixels.
  • Прозрачный значок структуры , измеряющий 32 x 32 пикселей.A transparent outline icon measuring 32 x 32 pixels.
  • manifest.js файла, определяющего атрибуты приложения.A manifest.json file that specifies the attributes of your app.

Эти файлы необходимо заархивировать в пакете приложения для использования при загрузке вкладки в Teams.These files need to be zipped in an app package for use in uploading your tab to Teams.

CSPROJ.csproj

В окне обозревателя решений Visual Studio щелкните правой кнопкой мыши проект и выберите команду изменить файл проекта.In the Visual Studio Solution Explorer window right-click on the project and select Edit Project File. В нижней части файла вы увидите код, который создает и обновляет папку zip при построении приложения:At the bottom of the file you'll see the code that creates and updates your zip folder when the application builds:

<PropertyGroup>
    <PostBuildEvent>powershell.exe Compress-Archive -Path \"$(ProjectDir)AppManifest\*\" -DestinationPath \"$(TargetDir)tab.zip\" -Force</PostBuildEvent>
  </PropertyGroup>

  <ItemGroup>
    <EmbeddedResource Include="AppManifest\icon-outline.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\icon-color.png">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
    <EmbeddedResource Include="AppManifest\manifest.json">
      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
    </EmbeddedResource>
  </ItemGroup>

МоделиModels

ChannelGroup.CS представляет объект сообщения и методы, которые будут вызываться из контроллеров во время настройки.ChannelGroup.cs presents a Message object and methods that will be called from the Controllers during configuration.

ПредставленияViews

ДомашняяHome

ASP.NET Core рассматривает файлы с именем index как страницу по умолчанию или домашнюю страницу сайта.ASP.NET Core treats files called Index as the default/home page for the site. Если URL-адрес браузера указывает на корневой сайт сайта, в качестве домашней страницы для приложения будет отображаться index. cshtml .When your browser URL points to the root of the site, Index.cshtml will be displayed as the home page for your application.

SharedShared

Разметка частичного представления _layout. cshtml содержит общую структуру страницы и общие визуальные элементы приложения.The partial view markup _Layout.cshtml contains the application's overall page structure and shared visual elements. Он также будет ссылаться на библиотеку Teams.It will also reference the Teams Library.

ControllerControllers

Контроллеры используют свойство Виевбаг для динамического переноса значений в представлениях.The controllers use the ViewBag property to transfer values dynamically to the Views.

Установка безопасного туннеля для вкладкиEstablish a secure tunnel to your tab

Microsoft Teams является полностью облачным продуктом и требует, чтобы содержимое вкладки было доступно из облака с использованием конечных точек HTTPS.Microsoft Teams is an entirely cloud-based product and requires that your tab content be available from the cloud using HTTPS endpoints. Teams не поддерживает локальное размещение.Teams doesn't allow local hosting. Вам потребуется опубликовать вкладку на общедоступном URL-адресе или использовать прокси-сервер, который будет предоставлять локальный порт URL-адресу в Интернете.You'll need to either publish your tab to a public URL, or use a proxy that will expose your local port to an internet-facing URL.

Чтобы протестировать вкладку, используйте ngrok.To test your tab you'll use ngrok. Конечные точки веб-сервера будут доступны, когда ngrok работает на локальном компьютере.Your server's web endpoints will be available while ngrok is running on your local machine. При закрытии ngrok URL-адреса будут отличаться при следующем запуске.If you close ngrok, the URLs will be different the next time you start it.

  • Откройте командную строку в корне каталога проекта и выполните следующую команду:Open a command prompt in the root of your project directory and run the following command:
ngrok http https://localhost:443560 -host-header="localhost:44360"
  • Ngrok прослушивает запросы из Интернета и направляет их в ваше приложение, когда оно выполняется на порте 44355.Ngrok will listen to requests from the internet and will route them to your application when it is running on port 44355. Он должен выглядеть примерно так https://y8rCgT2b.ngrok.io/ , где y8rCgT2b ЗАМЕНЯЕТСЯ URL-адресом https ngrok, сооснованным на цифровом алфавите.It should resemble https://y8rCgT2b.ngrok.io/ where y8rCgT2b is replaced by your ngrok alpha-numeric HTTPS URL.

  • Убедитесь, что Командная строка ngrok запущена и запишите URL-адрес, а затем это потребуется позже.Be sure to keep the command prompt with ngrok running and to make note of the URL — you'll need it later.

Обновление приложенияUpdate your application

В пределах TAB. cshtml приложение предоставляет пользователю два переключателя для отображения вкладки с помощью значка красного или серого.Within Tab.cshtml the application presents the user with two option buttons for displaying the tab with either a red or gray icon. При нажатии кнопки выбрать серое или выбрать красную , saveGray() saveRed() соответственно, задает набор settings.setValidityState(true) и активируется кнопка сохранить на странице Конфигурация.Choosing the Select Gray or Select Red button fires saveGray() or saveRed(), respectively, sets settings.setValidityState(true), and enables the Save button on the configuration page. Этот код позволяет Teams знать, что вы удовлетворены требованиями к конфигурации и можете продолжить установку.This code lets Teams know that you have satisfied the configuration requirements and the installation can proceed. При сохранении settings.setSettings задаются параметры.On save, the parameters of settings.setSettings are set. Finally saveEvent.notifySuccess() вызывается, чтобы показать, что URL-адрес контента успешно разрешен.Finally, saveEvent.notifySuccess() is called to indicate that the content URL has successfully resolved.

_Layout. cshtml_Layout.cshtml

Чтобы вкладка отображалась в Teams, необходимо включить клиентский пакет SDK Microsoft Teams для JavaScript и включить вызов microsoftTeams.initialize() после загрузки страницы.For your tab to display in Teams, you must include the Microsoft Teams JavaScript client SDK and include a call to microsoftTeams.initialize() after your page loads. Это способ общения вкладки и клиента teams:This is how your tab and the Teams client communicate:

  • Перейдите к общей папке, откройте _layout. cshtml и добавьте следующий <head> тег в тег:Navigate to the Shared folder, open _Layout.cshtml, and add the following to the <head> tag:
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script src="https://statics.teams.cdn.office.net/sdk/v1.6.0/js/MicrosoftTeams.min.js"></script>

Важно!

Не копируйте <script src="..."> URL-адреса с этой страницы, так как они могут не представлять последнюю версию.Don't copy/paste the <script src="..."> URLs from this page, as they may not represent the latest version. Чтобы получить последнюю версию пакета SDK, всегда переходите по адресу: API JavaScript для Microsoft Teams.To get the latest version of the SDK, always go to: Microsoft Teams JavaScript API.

TAB. cshtmlTab.cshtml

Откройте вкладку. cshtml и обновите внедренный код <script> следующим образом:Open Tab.cshtml and update the embedded <script> as follows:

  • В верхней части сценария вызовите метод microsoftTeams.initialize() .At the top of the script, call microsoftTeams.initialize().

  • Обновите websiteUrl contentUrl значения и значения в каждой функции с помощью URL-адреса ngrok HTTPS на вкладке.Update the websiteUrl and contentUrl values in each function with the HTTPS ngrok URL to your tab.

Теперь код должен выглядеть следующим образом с помощью y8rCgT2b , заменяя URL-адресом ngrok:Your code should now look like the following with y8rCgT2b replaced with your ngrok URL:

    microsoftTeams.initialize();

    let saveGray = () => {
        microsoftTeams.settings.registerOnSaveHandler(function (saveEvent) {
            microsoftTeams.settings.setSettings({
                websiteUrl: `https://y8rCgT2b.ngrok.io`,
                contentUrl: `https://y8rCgT2b.ngrok.io/gray/`,
                entityId: "grayIconTab",
                suggestedDisplayName: "MyNewTab"
            });
            saveEvent.notifySuccess();
        });
    }

    let saveRed = () => {
        microsoftTeams.settings.registerOnSaveHandler(function (saveEvent) {
            microsoftTeams.settings.setSettings({
                websiteUrl: `https://y8rCgT2b.ngrok.io`,
                contentUrl: `https://y8rCgT2b.ngrok.io/red/`,
                entityId: "redIconTab",
                suggestedDisplayName: "MyNewTab"
            });
            saveEvent.notifySuccess();
        });
    }

Обязательно сохраните обновленный элемент TAB. cshtml.Make sure to save the updated Tab.cshtml.

Построение и запуск приложенияBuild and run your application

  • В Visual Studio нажмите клавишу F5 или в меню Отладка выберите команду начать отладку .In Visual Studio press F5, or choose Start Debugging from the Debug menu. Убедитесь, что ngrok работает и правильно работает, открыв браузер и перейдя на страницу содержимого с помощью URL-адреса ngrok HTTPS, который был предоставлен в окне командной строки.Verify that ngrok is running and working properly by opening your browser and going to your content page via the ngrok HTTPS URL that was provided in your command prompt window.

Совет

Для выполнения этого краткого руководства необходимо одновременное выполнение приложения в Visual Studio и ngrok.You need to have both your application in Visual Studio and ngrok running to complete this quickstart. Если вам нужно прекратить работу приложения в Visual Studio для работы с ним, продолжите работу ngrok.If you need to stop running your application in Visual Studio to work on it keep ngrok running. Он будет продолжать прослушивать и возобновить маршрутизацию запроса приложения при его перезапуске в Visual Studio.It will continue to listen and will resume routing your application's request when it restarts in Visual Studio. Если вам потребуется перезапустить службу ngrok, она вернет новый URL-адрес, и вам потребуется обновить свое приложение с помощью нового URL-адреса.If you have to restart the ngrok service it will return a new URL and you'll have to update your application with the new URL.

Отправка вкладки в Teams с помощью App StudioUpload your tab to Teams with App Studio

Примечание

Мы используем приложение App Studio, чтобы изменить manifest.jsдля файла и отправить завершенный пакет в Teams.We use App Studio to edit your manifest.json file and upload the completed package to Teams. Вы также можете вручную изменить manifest.jsдля файла, если вы предпочитаете.You can also manually edit the manifest.json file if you prefer. Если вы сделаете это, не забудьте создать решение еще раз, чтобы создать файл tab.zip для отправки.If you do, be sure to build the solution again to create the tab.zip file to upload.

  • Откройте клиент Microsoft Teams.Open the Microsoft Teams client. Если вы используете версию на основе веб-сайта , вы можете проверить интерфейсный код с помощью средств разработчикав браузере.If you use the web based version you can inspect your front-end code using your browser's developer tools.

  • Откройте приложение App Studio и выберите вкладку редактор манифестов .Open App studio and select the Manifest editor tab.

  • В редакторе манифеста выберите импортировать существующую плитку приложения, чтобы начать обновление пакета приложения для вкладки. Исходный код сопровождается собственным частично завершенным манифестом.Select the Import an existing app tile in the Manifest editor to begin updating the app package for your tab. The source code comes with its own partially complete manifest. Имя пакета приложения tab.zip.The name of your app package is tab.zip. Его можно найти здесь:It should be found here:

/bin/Debug/netcoreapp2.2/tab.zip
  • Отправьте tab.zip в приложение App Studio.Upload tab.zip to App Studio.

Обновление пакета приложения с помощью редактора манифестаUpdate your app package with Manifest editor

После того как вы отправили пакет приложений в приложение App Studio, вам потребуется завершить его настройку.Once you've uploaded your app package into App Studio, you'll need to finish configuring it.

  • На правой панели страницы приветствия редактора манифеста выберите плитку для вновь импортированной вкладки.Select the tile for your newly imported tab in the right panel of the Manifest editor welcome page.

В левой части редактора манифеста есть список действий, а справа — список свойств, значения которых должны быть заданы для каждого из этих шагов.There's a list of steps in the left-hand side of the Manifest editor, and on the right, a list of properties that need to have values for each of those steps. В manifest.js включены многие сведения, но существует несколько полей, которые необходимо обновить:Much of the information has been provided by your manifest.json but there are a few fields that you'll need to update:

Сведения: сведения о приложенииDetails: App details

  • В разделе Идентификация выберите *создать _, чтобы заменить замещающий идентификатор на нужный идентификатор GUID для вкладки.Under Identification select *Generate _ to replace the placeholder id with the required GUID for your tab.

  • В разделе сведения о _Developer * обновите поле URL-адрес веб-сайта с помощью URL-адреса ngrok HTTPS.Under _Developer information* update the Website URL field with your ngrok HTTPS URL.

  • В разделе URL-адреса приложений обновите заявление о конфиденциальности и условия использования URL-адресов с помощью URL-адреса ngrok HTTPS.Under App URLs update the Privacy statement and Terms of use URL fields with your ngrok HTTPS URL. Не забудьте включить пути /приваци и /Тау в конце URL-адресов.Remember to include the /privacy and /tou paths at the end of the URLs.

Возможности: вкладкиCapabilities: Tabs

В разделе вкладки :In the Tabs section:

  • На вкладке Группа нажмите кнопку Добавить.Under Team Tab select Add.

  • Во всплывающем окне вкладки команды обновите URL-адрес конфигурации до https://<yourngrokurl>/tab .In the Team tab pop-up window update the Configuration URL to https://<yourngrokurl>/tab.

  • И, наконец, убедитесь, что вы можете обновить конфигурацию? Флажки группа и Групповая беседа отмечены и нажмите кнопку сохранить.Finally, make sure the can update configuration? Team, and Group chat boxes are checked and select Save.

Готово: домены и разрешенияFinish: Domains and permissions

В разделе домены и разрешения домены из поля вкладки должны содержать URL-адрес NGROK без префикса HTTPS <yourngrokurl>.ngrok.io/ .In the Domains and permissions section, the Domains from your tabs field should contain your ngrok URL without the HTTPS prefix - <yourngrokurl>.ngrok.io/.

Тестирование и распределение: тестирование и распределениеTest and distribute: Test and distribute

Важно!

В поле Описание справа появится следующее предупреждение:In the Description field on the right you'll see the following warning:

⚠ "массив" валиддомаинс "не может содержать туннельный сайт..."⚠ "The 'validDomains' array cannot contain a tunneling site..."

Это предупреждение можно игнорировать при тестировании вкладки.This warning can be ignored while testing your tab.

В разделе " тестирование и распространение ":In the Test and distribute section:

  • Нажать кнопку Установить.Select Install.

  • Во всплывающем окне Добавление в группу или в поле "разговор" введите команду и нажмите кнопку установить.In the pop-up window's Add to a team or chat field enter your team and select Install.

  • В следующем всплывающем окне выберите канал команды, в котором будет отображаться вкладка, и нажмите кнопку настроить.In the next pop-up window choose the team channel where you would like the tab displayed and select Set up.

  • В последнем всплывающем окне выберите значение для вкладки (красный или серый значок) и нажмите кнопку сохранить.In the final pop-up window select a value for the tab page (either a red or gray icon) and select Save.

Чтобы просмотреть вкладку, перейдите к группе, в которой она была установлена, и выберите ее в панели вкладок.To view your tab, navigate to the team you installed it on, and select it from the tab bar. Должна отобразиться страница, выбранная во время настройки.The page that you chose during configuration should be displayed.

Отправка вкладки в Teams с помощью App StudioUpload your tab to Teams with App Studio

Примечание

Мы используем приложение App Studio, чтобы изменить файл manifest. JSON и отправить завершенный пакет в Teams.We use App Studio to edit your manifest.json file and upload the completed package to Teams. Вы также можете вручную изменить файл manifest. JSON , если вы предпочитаете.You can also manually edit the manifest.json file if you prefer. Если вы сделаете это, не забудьте создать решение еще раз, чтобы создать ZIP-файл Tab для отправки.If you do, be sure to build the solution again to create the tab.zip file to upload.

  • Откройте клиент Microsoft Teams.Open the Microsoft Teams client. Если вы используете версию на основе веб-сайта , вы можете проверить интерфейсный код с помощью средств разработчикав браузере.If you use the web based version you can inspect your front-end code using your browser's developer tools.

  • Откройте приложение App Studio и выберите вкладку редактор манифестов .Open the App Studio app and select the Manifest editor tab.

  • В редакторе манифеста выберите импортировать существующую плитку приложения, чтобы начать обновление пакета приложения для вкладки. Исходный код сопровождается собственным частично завершенным манифестом.Select the Import an existing app tile in the Manifest editor to begin updating the app package for your tab. The source code comes with its own partially complete manifest. Имя пакета приложения — TAB. zip.The name of your app package is tab.zip. Его можно найти здесь:It should be found here:

/bin/Debug/netcoreapp2.2/tab.zip
  • Отправка вкладки в App Studio. zip.Upload tab.zip to App Studio.

Обновление пакета приложения с помощью редактора манифестаUpdate your app package with Manifest editor

После того как вы отправили пакет приложений в приложение App Studio, вам потребуется завершить его настройку.Once you've uploaded your app package into App Studio, you'll need to finish configuring it.

  • На правой панели страницы приветствия редактора манифеста выберите плитку для вновь импортированной вкладки.Select the tile for your newly imported tab in the right panel of the Manifest editor welcome page.

В левой части редактора манифеста есть список действий, а справа — список свойств, значения которых должны быть заданы для каждого из этих шагов.There's a list of steps in the left-hand side of the Manifest editor, and on the right, a list of properties that need to have values for each of those steps. Многие из этих сведений предоставлены в файле manifest. JSON , но существует несколько полей, которые необходимо обновить:Much of the information has been provided by your manifest.json but there are a few fields that you'll need to update:

Сведения: сведения о приложенииDetails: App details

  • В разделе Идентификация нажмите создать , чтобы создать новый идентификатор приложения.Under Identification select Generate to generate a new App Id for your app.

  • В разделе сведения для разработчиков обновите поле URL- адрес веб-сайта с помощью URL-адреса ngrok HTTPS.Under Developer information update the Website URL field with your ngrok HTTPS URL.

  • В разделе URL-адреса приложений обновите https://<yourngrokurl>/privacy заявление о конфиденциальности и условия https://<yourngrokurl>/tou его использования для>.Under App URLs update the Privacy statement to https://<yourngrokurl>/privacy and Terms of use to https://<yourngrokurl>/tou>.

Возможности: вкладкиCapabilities: Tabs

В разделе вкладки :In the Tabs section:

  • На вкладке Группа нажмите кнопку Добавить.Under Team Tab select Add.

  • Во всплывающем окне вкладки команды обновите URL-адрес конфигурации до https://<yourngrokurl>/tab.In the Team tab pop-up window update the Configuration URL to https://<yourngrokurl>/tab.

  • И, наконец, убедитесь, что вы можете обновить конфигурацию? Флажки группа и Групповая беседа отмечены и нажмите кнопку сохранить.Finally, make sure the can update configuration? Team, and Group chat boxes are checked and select Save.

Готово: домены и разрешенияFinish: Domains and permissions

В разделе домены и разрешения домены из поля вкладки должны содержать URL-адрес NGROK без префикса HTTPS <yourngrokurl>.ngrok.io/.In the Domains and permissions section, the Domains from your tabs field should contain your ngrok URL without the HTTPS prefix - <yourngrokurl>.ngrok.io/.

Готово: тестирование и распределениеFinish: Test and distribute

Важно!

В поле Описание справа появится следующее предупреждение:In the Description field on the right you'll see the following warning:

⚠ "массив" валиддомаинс "не может содержать туннельный сайт..."⚠ "The 'validDomains' array cannot contain a tunneling site..."

Это предупреждение можно игнорировать при тестировании вкладки.This warning can be ignored while testing your tab.

В разделе " тестирование и распространение ":In the Test and distribute section:

  • Нажать кнопку Установить.Select Install.

  • Во всплывающем окне Добавление в группу или в поле "разговор" введите команду и нажмите кнопку установить.In the pop-up window's Add to a team or chat field enter your team and select Install.

  • В следующем всплывающем окне выберите канал команды, в котором будет отображаться вкладка, и нажмите кнопку настроить.In the next pop-up window choose the team channel where you would like the tab displayed and select Set up.

  • В последнем всплывающем окне выберите значение для вкладки (красный или серый значок) и нажмите кнопку сохранить.In the final pop-up window select a value for the tab page (either a red or gray icon) and select Save.

Чтобы просмотреть вкладку, перейдите к группе, в которой она была установлена, и выберите ее в панели вкладок.To view your tab, navigate to the team you installed it on, and select it from the tab bar. Должна отобразиться страница, выбранная во время настройки.The page that you chose during configuration should be displayed.