Создание приложений с помощью набора инструментов Teams и кода Visual StudioBuild apps with the Teams Toolkit and Visual Studio Code

Набор средств Microsoft Teams позволяет создавать пользовательские приложения Teams непосредственно в среде Visual Studio Code.The Microsoft Teams Toolkit enables you to create custom Teams apps directly within the Visual Studio Code environment. Набор средств поможет вам выполнить все действия, необходимые для создания, отладки и запуска приложения Teams.The toolkit guides you through the process and provides everything you need to build, debug, and launch your Teams app.

Установка набора инструментов TeamsInstalling the Teams Toolkit

Набор средств Microsoft Teams для Visual Studio Code доступен для загрузки с Visual Studio Marketplace или напрямую в виде расширения в Visual Studio Code.The Microsoft Teams Toolkit for Visual Studio Code is available for download from the Visual Studio Marketplace or directly as an extension within Visual Studio Code.

Совет

После установки вы должны увидеть набор инструментов Teams на панели действий Visual Studio Code.After installation, you should see the Teams Toolkit in the Visual Studio Code activity bar. Если это не так, щелкните правой кнопкой мыши на панели действий и выберите Microsoft Teams , чтобы закрепить набор инструментов для упрощения доступа.If not, right-click within the activity bar and select Microsoft Teams to pin the toolkit for easy access.

Использование набора средствUsing the toolkit

Настройка нового проекта TeamsSet up a new Teams project

  1. Создайте рабочую область или папку для проекта в локальной среде.Create a workspace/folder for your project in your local environment.
  2. В Visual Studio Code выберите значок командыIn Visual Studio Code, select the Teams icon Значок Teams на панели действий в левой части окна.from the activity bar on the left side of the window.
  3. Выберите Открыть набор инструментов Microsoft Teams в меню команд.Select Open the Microsoft Teams Toolkit from the command menu.
  4. Выберите создать приложение Teams из меню команд.Select Create a new Teams app from the command menu.
  5. При появлении соответствующего запроса введите имя рабочей области.When prompted, enter the name of the workspace . Он будет использоваться в качестве имени папки, в которой будет размещаться проект, и именем приложения по умолчанию.This will be used as both the name of the folder where your project will reside, and the default name of your app.
  6. Нажмите клавишу Ввод , и вы будете доставлены на экране добавить возможности настройте свойства нового приложения.Press Enter and you will arrive at the Add capabilities screen configure the properties for your new app.
  7. Нажмите кнопку Готово , чтобы завершить процесс настройки.Select the Finish button to complete the configuration process.

Импорт существующего проекта приложения TeamsImport an existing Teams app project

  1. В Visual Studio Code выберите значок командыIn Visual Studio Code, select the Teams icon Значок Teams на панели действий в левой части окна.from the activity bar on the left side of the window.
  2. Выберите пункт Импорт пакета приложения в меню команда.Select Import app package from the command menu.
  3. Выберите существующий ZIP-файл пакета приложения Teams .Choose your existing Teams app package zip file.
  4. Нажмите кнопку выбрать пакет публикации .Choose the Select publishing package button. Теперь на вкладке Конфигурация набора средств необходимо заполнить сведения о приложении.The configuration tab of the toolkit should now be populated with your app's details.
  5. В Visual Studio Code выберите файл -> Добавить папку в рабочую область , чтобы добавить каталог с исходным кодом в рабочую область Visual Studio Code.In Visual Studio Code, select File -> Add Folder to Workspace to add your source code directory to the Visual Studio Code workspace.

Настройка приложенияConfigure your app

В основном приложение Teams поработает с тремя компонентами:At its core, the Teams app embraces three components:

  1. Клиент Microsoft Teams (веб-сайт, Настольный компьютер или мобильное устройство), на котором пользователи взаимодействуют с вашим приложением.The Microsoft Teams client (web, desktop or mobile) where users interact with your app.
  2. Сервер, который отвечает на запросы для контента, который будет отображаться в Teams, например, контент вкладки HTML или адаптивной карточки Bot.A server that responds to requests for content that will be displayed in Teams, e.g., HTML tab content or a bot adaptive card .
  3. Пакет приложения Teams состоит из трех файлов:A Teams app package consisting of three files:
  • manifest.jsнаThe manifest.json
  • Значок цвета приложения для отображения в каталоге приложений "общедоступный" или "Организация"A color icon for your app to display in the public or organization app catalog
  • Значок структуры для отображения на панели активности Teams.An outline icon for display on the Teams activity bar.

При установке приложения клиент Teams анализирует файл манифеста, чтобы определить необходимые сведения, такие как имя вашего приложения и URL-адрес, по которому расположены службы.When an app is installed, the Teams client parses the manifest file to determine needed information like the name of your app and the URL where the services are located.

  1. Чтобы настроить приложение, перейдите на вкладку набор инструментов Microsoft Teams в Visual Studio Code.To configure your app, navigate to the Microsoft Teams Toolkit tab in Visual Studio Code.
  2. Выберите команду изменить пакет приложения , чтобы просмотреть страницу сведений о приложении .Select Edit app package to view the App details page.
  3. Изменение полей на странице "сведения о приложении" обновляет содержимое manifest.jsв файле, который в конечном итоге будет поставляться в составе пакета приложения.Editing the fields in the App details page updates the contents of the manifest.json file that will ultimately ship as part of the app package. Просмотр редактора манифестов App StudioSee App Studio manifest editor

Упаковка приложенияPackage your app

Изменение страницы сведений о приложении или обновление манифеста или файлов env в папке публикации приложения автоматически создаст файл Development.zip .Modifying the app details page or updating the manifest, or .env files in your app's .publish folder will automatically generate your Development.zip file. Необходимо включить два значка в одну и ту же папку.You'll need to include two icons in that same folder.

Запуск приложенияRun your app

Установка и запуск приложения на локальном компьютереInstall and run your app locally

Для получения подробных инструкций по упаковке и тестированию приложения обратитесь к главной странице "*Построение и запуск контента в проекте".Refer to the *Build and Run content in your project homepage for detailed instructions on how to package and test your app. В общем случае необходимо установить сервер приложения, заставить его работать, а затем настроить туннельное решение, чтобы Teams могла получить доступ к содержимому, запущенному с localhost.In general, you need to install your app's server, get it running, then setup a tunneling solution so that Teams can access content running from localhost.

Включение разработки с localhostEnable development from localhost

Если вы хотите выполнить отладку приложения на основе вкладки на localhost с использованием HTTPS, необходимо сообщить браузеру о доверии к приложению, с которого выполняется обращение https://localhost .If you wish to debug your tab based app on localhost using HTTPS, you will need to tell your browser to trust the app being served from https://localhost. Перейдите по адресу https://localhost:3000/tab.Navigate to https://localhost:3000/tab. Если отображается предупреждение о том, что сайт не является доверенным, выберите параметр для продолжения.If you see a warning indicating that the site isn't trusted, choose the option to proceed anyway. Теперь ваше приложение должно быть доступно из клиента Teams.Your app should now be accessible from the Teams client.

Запуск приложения в TeamsRun your app in Teams

Предварительные требования: Включение режима предварительного просмотра для разработчиков TeamsPrerequisites: Enable Teams developer preview mode

  1. Перейдите на панель действий в левой части окна кода Visual Studio.Navigate to the activity bar on the left side of the Visual Studio Code window.
  2. Выберите значок Run (выполнить ) для отображения представления " Запуск" и "Отладка ".Select the Run icon to display the Run and Debug view.
  3. Вы также можете использовать сочетание клавиш Ctrl+Shift+D .You can also use the keyboard shortcut Ctrl+Shift+D.