Создание первого приложения с помощью Node.js
Начните разработку приложений Microsoft Teams, создав свое первое приложение с вкладкой, ботом и расширением для сообщений.
Это приложение будет иметь все возможности, и каждое из них имеет свой собственный пользовательский интерфейс и пользовательский интерфейс:
В этом руководстве вы узнаете:
- Настройка нового проекта с помощью средств командной строки.
- Создание трех приложений с разными возможностями— вкладки, бота и расширения сообщений.
- Развертывание приложения на портале разработчика.
Предварительные требования
Ниже приведен список средств, которые необходимо установить для создания и развертывания приложения Teams.
| Установка | Для использования... | |
|---|---|---|
| Required | ||
| Node.js и NPM | Серверной среды выполнения JavaScript. Дополнительные сведения см . вNode.js таблице совместимости версий для типа проекта. | |
| ngrok | Функции приложений Teams (диалоговые боты, расширения сообщений и входящие веб-перехватчики) требуют входящих подключений. Туннель соединяет систему разработки с Teams. Он не требуется для приложений, которые содержат только вкладки. Этот пакет устанавливается в каталоге проекта (с помощью npm devDependencies). |
|
| Microsoft Edge (рекомендуется) или Google Chrome | Браузера со средствами разработчика. | |
| Visual Studio Code; | Сред сборки JavaScript, TypeScript или SharePoint Framework (SPFx). Используйте версию 1.55 или более позднюю. | |
| Git | Git использует репозиторий примера Node.js приложения из GitHub. | |
| Глоток | Набор средств JavaScript с открытым кодом. Установите версию 4.0.0 или более позднюю. | |
| Microsoft Teams | Microsoft Teams для взаимодействия в одном месте со всеми пользователями, с которыми вы работаете, с помощью приложений для чата, собраний и звонков. | |
| Необязательное | ||
| Средства Azure для Visual Studio Code и Microsoft Azure CLI | Средства Azure для доступа к хранимым данным или для развертывания облачной серверной части приложения Teams в Azure. | |
| средства разработчика React для Chrome или средства разработчика React для Microsoft Edge | Средства браузера для разработки вкладок с помощью JavaScript. | |
| Песочница Microsoft Graph | Microsoft Graph Обозреватель, браузерное средство, которое позволяет выполнять запрос из данных Microsoft Graph. | |
| Портал разработчика Teams | Веб-портал для настройки, управления и распространения приложения Teams, в том числе в вашей организации или Microsoft Teams Store. | |
| Расширения Visual Studio Code | ||
| Azure Functions Core Tools | Серверные компоненты локально во время локальной отладки, включая вспомогательные средства проверки подлинности, необходимые при запуске служб в Azure. Он устанавливается в каталоге проекта (с помощью npm devDependencies). |
|
| Пакет SDK для .NET | Настраиваемые привязки для локальной отладки и Функции Azure развертываний приложений. Если вы не установили пакет SDK для .NET 3.1 (или более поздней версии) глобально, можно установить переносимую версию. |
Проверка номеров версий установленных средств
Используйте следующие команды, чтобы убедиться, что установленные версии для средств установлены по мере необходимости.
Примечание.
Используйте окно терминала, которое вам наиболее удобно на платформе. В этих примерах используется Git Bash (входит в установку Git), но эти скрипты будут выполняться на большинстве платформ.
Чтобы проверить номера версий установленных средств, выполните следующие действия:
Откройте окно терминала.
Выполните следующую команду, чтобы проверить версию,
gitустановленную на компьютере:$ git --versionПример выходных данных:
git version 2.19.0.windows.1Выполните следующую команду, чтобы проверить версию
node.js:$ node -vПример выходных данных:
v8.9.3Проверьте номер
npmверсии :$ npm -vПример выходных данных:
5.5.1Проверьте номер
gulpверсии :$ gulp -vПример выходных данных:
CLI version 2.3.0Local version 4.0.2Выполните следующую команду, чтобы проверить номер версии Visual Studio Code:
code --versionПример выходных данных:
1.28.2929bacba01ef658b873545e26034d1a8067445e9
Вы можете использовать другую версию этих приложений без каких-либо проблем.
Настройка клиента разработки Teams
Клиент — это как пространство или контейнер для вашей организации в Teams, где вы общаетесь в чате, обмениваются файлами и выполняете собрания. В этом пространстве также можно отправлять и тестировать пользовательское приложение.
Давайте проверим, готовы ли вы к разработке с помощью клиента.
Включить параметр отправки пользовательского приложения
После создания приложения необходимо загрузить это приложение в Teams, не распространяя его. Этот процесс называется отправкой пользовательского приложения. Войдите в учетную запись Microsoft 365, чтобы просмотреть этот параметр.
Примечание.
Отправка пользовательских приложений необходима для предварительного просмотра и тестирования приложений в локальной среде Teams. Если он не включен, вы не сможете просматривать и тестировать приложение в Teams локально.
У вас уже есть клиент и есть ли у вас доступ администратора? Давайте проверка, если вы действительно делаете!
Проверьте, можно ли отправить пользовательские приложения в Teams:
В клиенте Teams выберите Значок Магазина .
Выберите Управление приложениями
Найдите параметр Отправить пользовательское приложение. Если параметр отображается, включена отправка пользовательских приложений.
Примечание.
Если в Teams не отображается параметр для отправки пользовательского приложения, обратитесь к администратору Teams.
Создание бесплатного клиента разработчика Teams
Если у вас нет учетной записи разработчика Teams, ее можно получить бесплатно. Присоединяйтесь к программе для разработчиков Microsoft 365!
Перейдите в программу для разработчиков Microsoft 365.
Выберите Присоединиться и следуйте инструкциям на экране.
На экране приветствия выберите Настроить подписку E5.
Настройте свою учетную запись администратора. После завершения отобразится следующий экран.
Войдите в Teams с помощью только что настроенной учетной записи администратора. Убедитесь, что у вас есть параметр Отправить пользовательское приложение в Teams.
Получение бесплатной учетной записи Azure
Если вы хотите разместить приложение или получить доступ к ресурсам в Azure, у вас должна быть подписка Azure. Перед началом работы создайте бесплатную учетную запись.
Теперь у вас есть все инструменты и настроены учетные записи. Теперь давайте настроим среду разработки и приступим к сборке!
Вы можете продолжать использовать это окно терминала для выполнения команд, приведенных в этом руководстве.
Скачивание примера
В этом руководстве используйте пример Hello, World!, чтобы приступить к работе. Его можно скачать и клонировать на сайте GitHub.
Чтобы использовать Git Bash для клонирования примера репозитория, выполните следующие действия:
Откройте окно терминала.
Выполните следующую команду, чтобы клонировать пример репозитория на компьютер:
git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
Совет
Вы можете создать вилку этого репозитория, если хотите изменить и проверка изменения в репозитории GitHub для дальнейшего использования.
Создание первого приложения Node.js
После клонированного репозитория для Node.js примера приложения можно создать и протестировать приложение в локальной среде.
На этой странице вы узнаете, как:
Сборка и запуск примера
После клонированного репозитория можно создать пример приложения.
Откройте окно терминала.
Выполните команду change directory в терминале, чтобы изменить каталог примера приложения:
cd Microsoft-Teams-Samples/samples/app-hello-world/nodejs/Установите все зависимости с помощью следующей команды:
npm installВы увидите, что устанавливается множество зависимостей.
Запустите приложение с помощью следующей команды после завершения установки:
npm startКогда приложение Hello World запускается, оно отображается
App started listening on port 3333в окне терминала.Примечание.
Если в приведенном выше сообщении отображается другой номер порта, это связано с набором переменной среды PORT. Вы можете продолжать использовать этот порт или изменить переменную среды на 3333.
Откройте окно браузера и используйте следующие URL-адреса, чтобы убедиться, что все HELLO WORLD URL-адреса приложения загружаются:
http://localhost:3333
http://localhost:3333/hello
http://localhost:3333/first
http://localhost:3333/second
Тестирование примера приложения в локальной среде
Помните, что приложения в Microsoft Teams — это веб-приложения, предоставляющие одну или несколько возможностей. Сделайте приложение доступным в Интернете, чтобы платформа Teams могла загрузить его. Чтобы сделать приложение доступно из Интернета, необходимо разместить приложение.
Для локального тестирования можно запустить приложение на локальном компьютере и создать к нему туннель с веб-конечной точкой. ngrok — это бесплатный инструмент, который позволяет сделать именно это. С помощью ngrok вы можете получить веб-адрес, например https://d0ac14a5.ngrok.io (этот URL-адрес является примером). Вы можете скачать и установитьngrok для своей среды. Убедитесь, что вы добавили его в расположение в PATH.
Создание туннеля ngrok
После установки ngrok можно создать туннель для локального развертывания приложения.
Откройте новое окно терминала.
Выполните следующую команду, чтобы создать туннель. Пример приложения использует порт 3333:
ngrok http 3333 --host-header=localhost:3333Создается туннель ngrok. Ниже приведен пример туннеля ngrok.
Ngrok прослушивает запросы из Интернета и направляет их в приложение, работающее через порт 3333.
Чтобы проверить локальное развертывание приложения, выполните следующие действия:
Откройте браузер.
Загрузите приложение, используя следующий URL-адрес:
https://<forwarding address in ngrok console session>/Ниже приведен пример URL-адреса:
Вы можете попробовать добавить
hello,firstилиsecondв URL-адрес туннеля ngrok, чтобы просмотреть различные страницы вкладок приложения.Ngrok прослушивает запросы из Интернета и направляет их в приложение, работающее через порт 3333.
Запишите адрес переадресации в консоли ngrok. Этот URL-адрес необходим для развертывания приложения в Teams.
Примечание.
Если во время сборки и запуска использовался другой порт, убедитесь, что для настройки туннеля ngrok используется тот же номер порта.
Совет
Рекомендуется запустить ngrok в другом окне терминала, чтобы не мешать работе приложения node, которое позже может потребоваться остановить, перестроить и повторно запустить. Сеанс ngrok вернет полезные сведения об отладке в этом окне. Платная версия ngrok допускает постоянные имена.
Важно!
Если вы используете бесплатную версию ngrok, приложение будет доступно только во время текущего сеанса на компьютере разработки. Он недоступен, если компьютер выключен или переходит в спящий режим. При перезапуске службы возвращается новый адрес. Затем необходимо обновить каждое расположение, в котором используется устаревший адрес. Запомните этот шаг при предоставлении общего доступа к приложению для тестирования.
Сборка пакета приложения Node.js
Вы можете использовать gulp CLI для создания пакета приложения для Node.js.
Откройте окно терминала.
Убедитесь, что вы находитесь в каталоге, в котором
node.jsклонирован объект . Это папка, в которойgulpfile.jsразмещается.Выполните следующую команду, чтобы создать пакет приложения Node.js.
$ gulpНиже приведен пример выходных данных команды:
[13:39:27] Using gulpfile ~\documents\github\msteams-samples-hello-world-nodejs\gulpfile.js[13:39:27] Starting 'clean'...[13:39:27] Starting generate-manifest'...[13:39:27] Finished 'generate-manifest' after 11 ms[13:39:27] Finished 'clean after 21 ms[13:39:27] Starting 'default'... Build completed. Output in manifest folder[13:39:27] Finished 'default' after 62 μsСоздается helloworldapp.zip пакета приложения. Файл пакета можно найти по следующему пути.
<path to the cloned repo>/Microsoft-Teams-Samples/samples/app-hello-world/nodejs/manifestПримечание.
Найдите файл пакета приложения helloworldapp.zip, если расположение не ясно в используемом средстве.
Настройка первого приложения Node.js с помощью портала разработчика
Вы можете использовать портал разработчика для отправки пакета приложения в Teams и настройки возможностей приложения. Портал разработчика — это приложение Teams, которое упрощает создание и регистрацию приложения. Установите из Магазина Teams!
После сборки и тестирования приложения Teams его можно настроить и просмотреть с помощью портала разработчика.
Обновление пакета приложения включает в себя:
Импорт пакета приложения на портал разработчика
Чтобы импортировать пакет приложения, выполните следующие действия:
Откройте Microsoft Teams.
Щелкните значок Магазин
на панели слева.Найдите портал разработчика в строке поиска и выберите Портал разработчика*.
Выберите Открыть.
Откроется портал разработчика.
Перейдите на вкладку Приложения .
Выберите Импорт приложения.
Откройте пакет
helloworldapp.zipприложения по следующему пути в структуре каталога примера репозитория C#:<path to cloned node.js sample repo>\Source\Repos\Microsoft-Teams-Samples\samples\app-hello-world\nodejs\manifestПриложение Hello World импортируется на портал разработчика.
После импорта приложения на портал разработчика вы можете просмотреть сведения о нем на портале разработчика.
Обзор приложения на портале разработчика
После импорта приложения на портал разработчика можно просмотреть сведения о нем, включая файл манифеста.
Просмотр сведений о приложении
Выберите Основные сведения в левой области портала разработчика.
Обратите внимание на следующие сведения из основных сведений:
- ИД приложения;
- Сведения для разработчиков
- URL-адреса приложений
Выберите Фирменная символика в левой области, чтобы просмотреть сведения о фирменной символику.
Эти сведения важны, если вы пишете новое приложение для распространения.
Просмотр функций приложения
Выберите Функции приложений в левой области портала разработчика.
Функции приложения отображаются в правой области. Вы можете просматривать карточки для личного приложения, бота и расширения сообщений.
Просмотр манифеста приложения
Файл манифеста используется для настройки возможностей, необходимых ресурсов и других важных атрибутов для приложения.
Выберите Опубликовать на левой панели, чтобы открыть раскрывающийся список, а затем выберите Пакет приложения.
Манифест приложения появится в правой области.
Файл манифеста появится в правой области.
Настройка возможностей приложения
После импорта приложения на портал разработчика следующим шагом будет настройка возможностей приложения. Портал разработчика содержит все сведения о приложении в разных разделах. Это упрощает настройку возможностей приложения.
С помощью портала разработчика вы можете:
Настройка приложения личной вкладки
Чтобы настроить личное приложение вкладки, выполните следующие действия:
Щелкните значок в карта Личное приложение в области Функции приложения и выберите Изменить.Откроется вкладка "Сведения о здравствуйте".
Щелкните значок вкладки
Hello и выберите Изменить , чтобы открыть сведения о приложении для обновления.
Введите сведения о приложении на вкладке Hello в разделе Добавление вкладки в личное приложение.
Введите следующие сведения:
- Имя: вкладка "Привет".
- URL-адрес содержимого и URL-адрес веб-сайта: адрес переадресации в сеансе консоли ngrok.
- Контекст: выберите вкладку Личный.
Нажмите кнопку Обновить.
Сведения о вкладке Hello отображаются на панели Личное приложение .
Нажмите кнопку Сохранить.
В области Личное приложение теперь отображаются новая вкладка и вкладка About (О программе), созданные автоматически.
Настройка бота
Вы можете легко добавить в приложение функциональные возможности ботов. В примере приложения Hello World уже есть бот в составе примера, но его необходимо зарегистрировать в Teams.
Бот, импортированный из примера, не имеет связанного идентификатора приложения. Вам потребуется удалить его и создать нового бота. Портал разработчика создает идентификатор приложения и регистрирует его в Teams.
Добавление и настройка бота включает следующее:
Добавление нового бота
- Щелкните значок на карта Bot в области Функции приложения и нажмите кнопку Удалить.
Выберите Сервис , чтобы добавить возможность.
Выберите Управление ботами в области Сервис .
Выберите + Создать бот в области управления ботом .
Введите подходящее имя для бота и нажмите кнопку Добавить.
Откроется панель Настройка с подробными сведениями о новом боте в левой области.
Введите URL-адрес переадресации из
ngrokконсоли и нажмите кнопку Сохранить.
Выберите Секреты клиента, а затем выберите Добавить секрет клиента боту , чтобы создать пароль для бота.
Портал разработчика создает пароль для бота.
Вы можете скопировать пароль с
помощью значка. В этом руководстве не нужно копировать его.
Нажмите кнопку ОК.
Выберите < Боты, чтобы вернуться в область управления ботами .
В области управление ботом отображается новый бот, добавленный с идентификатором приложения.
Убедитесь, что вы сохранили идентификатор бота вместе с паролем из раздела Секрет клиента .
Добавление бота в приложение
Откройте область Функции приложения и выберите карта Бот.
Откроется область Бот .
Выберите приложение бота в разделе Выберите существующего бота и нажмите кнопку Сохранить.
Новый бот добавляется в приложение с собственным идентификатором приложения.
Настройка область бота
- Щелкните значок на новом карта бота и нажмите кнопку Изменить.
Выберите все три области для команды на странице Бот .
Перейдите по панели Бот , чтобы просмотреть раздел Команды , и выберите + Добавить команду.
Введите подходящее имя и описание, выберите все три области для команды и нажмите кнопку Добавить.
- Личный
- Команда
- Групповой чат
Новая команда будет добавлена в раздел Команды области Бот .
Нажмите кнопку Сохранить.
Сведения о команде сохраняются.
Откройте область Функции приложения и выберите Личное приложение карта, чтобы просмотреть сведения о вкладке приложения.
Вы увидите, что в приложение будет добавлена вкладка для нового чат-бота.
Настройка расширения сообщений
Расширения сообщений позволяют пользователям запрашивать информацию у вашей службы и публиковать эти сведения. Информация размещается в виде карточек в беседе канала. Расширения сообщений отображаются в нижней части поля создания.
Чтобы добавить новое расширение для сообщений, выполните приведенные далее действия.
- Щелкните значок на карта Расширения сообщений в области Функции приложения и нажмите кнопку Удалить.
Выберите Расширение сообщений в области Функции приложения .
Выберите имя приложения бота в раскрывающемся списке Выберите существующий бот на панели Расширение сообщения .
Нажмите кнопку Сохранить.
Расширение сообщения будет сохранено, а раздел Команды появится в области Расширение сообщений .
Выберите + Добавить команду, чтобы определить область того, что приложение расширения сообщений может делать.
Диалоговое окно Добавление команды .
Убедитесь, что поиск выбран в качестве типа команды, которую вы хотите добавить в диалоговом окне Добавление команды .
Введите подходящие сведения для следующих сведений:
- Идентификатор команды
- Заголовок команды
- Описание команды
Перейдите по диалоговому оккуку, чтобы просмотреть оставшиеся сведения.
Убедитесь, что выбран параметр Сделать по умолчанию .
Выберите следующие контексты для команды расширения сообщений:
- Командное поле
- Поле для создания
- Сообщение
Введите подходящие сведения для следующих сведений:
- Имя параметра
- Заголовок параметра
- Описание параметра
Выберите Текст в качестве типа входных данных.
Нажмите кнопку Сохранить.
Команда расширения сообщения сохраняется и отображается в списке команд на панели Расширение сообщения .
Нажмите кнопку Сохранить.
Откройте область Функций приложения .
Вы увидите все три возможности: личное приложение вкладки, бот и расширение сообщений, настроенные для приложения Hello World.
Предварительный просмотр и тестирование приложения Node.js
После импорта приложения и настройки возможностей на портале разработчика можно просмотреть и протестировать пример приложения.
Примечание.
В настоящее время внешние разработчики не могут использовать параметр Preview in Teams в приложении "Портал разработчика" в Teams. Он недоступен как приложение в Teams из-за ограничения API. Если вы хотите предварительно просмотреть приложение в Teams, используйте веб-сайт портала разработчика .
После настройки возможностей приложения можно просмотреть и протестировать приложение в Teams в локальной среде.
Предварительный просмотр приложения:
Выберите Предварительный просмотр в Teams на панели инструментов портала разработчика.
Портал разработчика сообщает о том, что ваше пользовательское приложение успешно загружено.
Выберите Управление приложениями Ваше приложение отображается в отправленных приложениях.
Найдите приложение с помощью поля поиска, выберите три точки в строке.
Выберите параметр Вид . Откроется страница Добавить для вашего приложения.
Выберите Добавить , чтобы загрузить приложение в Teams.
Теперь приложение доступно в Teams. Вы можете просмотреть все вкладки и протестировать возможности:
Вкладка "Привет":
Чат-бот:
Сообщение можно отправить с помощью чата.
Расширение сообщений:
Вы можете попробовать поиск с помощью расширения сообщений.
Вкладка "Сведения":
Возникла проблема с этим разделом? Если это так, отправьте нам отзыв, чтобы мы исправили этот раздел.
Platform Docs
Обратная связь
Ожидается в ближайшее время: в течение 2024 года мы постепенно откажемся от GitHub Issues как механизма обратной связи для контента и заменим его новой системой обратной связи. Дополнительные сведения см. в разделе https://aka.ms/ContentUserFeedback.
Отправить и просмотреть отзыв по