Создание первого приложения с помощью Node.js

Начните разработку приложений Microsoft Teams, создав свое первое приложение с вкладкой, ботом и расширением для сообщений.

Это приложение имеет все возможности, и каждое из них имеет свой собственный пользовательский интерфейс и пользовательский интерфейс:

В этом руководстве вы узнаете:

• Настройка нового проекта с помощью средств командной строки.
• Создание трех приложений с разными возможностями— вкладки, бота и расширения сообщений.
• Развертывание приложения на портале разработчика.

Предварительные условия

• Осталось 4 мин

Ниже приведен список средств, которые необходимо установить для создания и развертывания приложения Teams.

Проверка номеров версий установленных средств

Используйте следующие команды, чтобы убедиться, что установленные версии для средств установлены по мере необходимости.

Чтобы проверить номера версий установленных средств, выполните следующие действия:

1. Откройте окно терминала.

2. Выполните следующую команду, чтобы проверить версию, git установленную на компьютере:

   $ git --version
   

   Пример выходных данных: git version 2.19.0.windows.1

3. Выполните следующую команду, чтобы проверить версию node.js :

   $ node -v
   

   Пример выходных данных: v8.9.3

4. Проверьте номер npmверсии :

   $ npm -v
   

   Пример выходных данных: 5.5.1

5. Проверьте номер gulpверсии :

   $ gulp -v
   

   Пример выходных данных: CLI version 2.3.0

   Local version 4.0.2

6. Выполните следующую команду, чтобы проверить номер версии Visual Studio Code:

   code --version
   

   Пример выходных данных: 1.28.2

   929bacba01ef658b873545e26034d1a8067445e9

Вы можете использовать другую версию этих приложений без каких-либо проблем.

Настройка клиента разработки Teams

Клиент — это как пространство или контейнер для вашей организации в Teams, где вы общаетесь в чате, обмениваются файлами и выполняете собрания. В этом пространстве также можно отправлять и тестировать пользовательское приложение.

Давайте проверим, готовы ли вы к разработке с помощью клиента.

Включить параметр отправки пользовательского приложения

После создания приложения необходимо загрузить это приложение в Teams, не распространяя его. Этот процесс называется отправкой пользовательского приложения. Войдите в учетную запись Microsoft 365, чтобы просмотреть этот параметр.

У вас уже есть клиент и есть ли у вас доступ администратора? Давайте проверим, действительно ли вы делаете!

Проверьте, можно ли отправить пользовательское приложение в Teams:

1. В клиенте Teams выберите Значок Магазина .

2. Выберите Управление приложениями

3. Найдите параметр Отправить пользовательское приложение. Если параметр отображается, включена отправка пользовательских приложений.

   

   Примечание.

   Если в Teams не отображается параметр для отправки пользовательского приложения, обратитесь к администратору Teams.

Создание бесплатного клиента разработчика Teams

Если у вас нет учетной записи разработчика Teams, ее можно получить бесплатно. Присоединяйтесь к программе для разработчиков Microsoft 365!

1. Перейдите в программу для разработчиков Microsoft 365.

2. Выберите Присоединиться и следуйте инструкциям на экране.

3. На экране приветствия выберите Настроить подписку E5.

4. Настройте свою учетную запись администратора. После завершения отобразится следующий экран.

   

5. Войдите в Teams с помощью только что настроенной учетной записи администратора. Убедитесь, что у вас есть параметр Отправить пользовательское приложение в Teams.

Получение бесплатной учетной записи Azure

Если вы хотите разместить приложение или получить доступ к ресурсам в Azure, у вас должна быть подписка Azure. Перед началом работы создайте бесплатную учетную запись.

Теперь у вас есть все инструменты и настроены учетные записи. Теперь давайте настроим среду разработки и приступим к сборке!

Вы можете продолжать использовать это окно терминала для выполнения команд, приведенных в этом руководстве.

Скачивание примера

В этом руководстве используйте пример Hello, World!, чтобы приступить к работе. Его можно скачать и клонировать на сайте GitHub.

Чтобы использовать Git Bash для клонирования примера репозитория, выполните следующие действия:

1. Откройте окно терминала.

2. Выполните следующую команду, чтобы клонировать пример репозитория на компьютер:

   git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git
   

Создание первого приложения Node.js

• Осталось 3 мин

После клонированного репозитория для Node.js примера приложения можно создать и протестировать приложение в локальной среде.

На этой странице вы узнаете, как:

1. Создание и запуск первого приложения
2. Тестирование примера приложения

Сборка и запуск примера

После клонированного репозитория можно создать пример приложения.

1. Откройте окно терминала.

2. Выполните команду change directory в терминале, чтобы изменить каталог примера приложения:

   cd Microsoft-Teams-Samples/samples/app-hello-world/nodejs/
   

3. Установите все зависимости с помощью следующей команды:

   npm install
   

   Вы увидите, что устанавливается множество зависимостей.

4. Запустите приложение с помощью следующей команды после завершения установки:

   npm start
   

   Когда приложение Hello World запускается, оно отображается App started listening on port 3333 в окне терминала.

   Примечание.

   Если в приведенном выше сообщении отображается другой номер порта, это связано с набором переменной среды PORT. Вы можете продолжать использовать этот порт или изменить переменную среды на 3333.

5. Откройте окно браузера и используйте следующие URL-адреса, чтобы убедиться, что все URL-адреса приложения Hello World загружаются:

   • 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 можно создать туннель для локального развертывания приложения.

1. Откройте новое окно терминала.

2. Выполните следующую команду, чтобы создать туннель. Пример приложения использует порт 3333:

   ngrok http 3333 --host-header=localhost:3333
   

   Создается туннель ngrok. Ниже приведен пример туннеля ngrok.

   

   Ngrok прослушивает запросы из Интернета и направляет их в приложение, работающее через порт 3333.

Чтобы проверить локальное развертывание приложения, выполните следующие действия:

1. Откройте браузер.

2. Загрузите приложение, используя следующий URL-адрес:

   https://<forwarding address in ngrok console session>/

   Ниже приведен пример URL-адреса:

   

   Вы можете попробовать добавить hello, firstили second в URL-адрес туннеля ngrok, чтобы просмотреть различные страницы вкладок приложения.

   Ngrok прослушивает запросы из Интернета и направляет их в приложение, работающее через порт 3333.

3. Запишите адрес переадресации в консоли ngrok. Этот URL-адрес необходим для развертывания приложения в Teams.

   Примечание.

   Если во время сборки и запуска использовался другой порт, убедитесь, что для настройки туннеля ngrok используется тот же номер порта.

   Совет

   Рекомендуется запустить ngrok в другом окне терминала, чтобы не мешать работе приложения node, которое позже может потребоваться остановить, перестроить и повторно запустить. Сеанс ngrok возвращает полезные сведения об отладке в этом окне. Платная версия ngrok допускает постоянные имена.

   Важно!

   Если вы используете бесплатную версию ngrok, приложение будет доступно только во время текущего сеанса на компьютере разработки. Он недоступен, если компьютер выключен или переходит в спящий режим. При перезапуске службы возвращается новый адрес. Затем необходимо обновить каждое расположение, в котором используется устаревший адрес. Запомните этот шаг при предоставлении общего доступа к приложению для тестирования.

Сборка пакета приложения Node.js

Вы можете использовать gulp CLI для создания пакета приложения для Node.js.

1. Откройте окно терминала.

2. Убедитесь, что вы находитесь в каталоге, в котором node.js клонирован объект . Это папка, в которой gulpfile.js размещается.

3. Выполните следующую команду, чтобы создать пакет приложения 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 с помощью портала разработчика

• Осталось 2 мин

Вы можете использовать портал разработчика для отправки пакета приложения в Teams и настройки возможностей приложения. Портал разработчика — это приложение Teams, которое упрощает создание и регистрацию приложения. Установите из Магазина Teams!

После сборки и тестирования приложения Teams его можно настроить и просмотреть с помощью портала разработчика.

Обновление пакета приложения включает в себя:

1. Импорт пакета приложения на портал разработчика
2. Настройка возможностей приложения

Импорт пакета приложения на портал разработчика

Чтобы импортировать пакет приложения, выполните следующие действия:

1. Откройте Microsoft Teams.

2. Щелкните значок Магазин на панели слева.

3. Найдите портал разработчика в строке поиска и выберите Портал разработчика*.

   

4. Выберите Открыть.

   

   Откроется портал разработчика.

5. Перейдите на вкладку Приложения .

   

6. Выберите Импорт приложения.

   

7. Откройте пакет helloworldapp.zip приложения по следующему пути в структуре каталога примера репозитория C#:

   <path to cloned node.js sample repo>\Source\Repos\Microsoft-Teams-Samples\samples\app-hello-world\nodejs\manifest

   Приложение Hello World импортируется на портал разработчика.

   

   После импорта приложения на портал разработчика вы можете просмотреть сведения о нем на портале разработчика.

Обзор приложения на портале разработчика

После импорта приложения на портал разработчика можно просмотреть сведения о нем, включая файл манифеста.

Просмотр сведений о приложении

1. Выберите Основные сведения в левой области портала разработчика.

   

2. Обратите внимание на следующие сведения из основных сведений:

   • ИД приложения;
   • Сведения для разработчиков
   • URL-адреса приложений

3. Выберите Фирменная символика в левой области, чтобы просмотреть сведения о фирменной символику.

   

   Эти сведения важны, если вы пишете новое приложение для распространения.

Просмотр функций приложения

• Выберите Функции приложений в левой области портала разработчика.

  Функции приложения отображаются в правой области. Вы можете просматривать карточки для личного приложения, бота и расширения сообщений.

  

Просмотр манифеста приложения

Файл манифеста используется для настройки возможностей, необходимых ресурсов и других важных атрибутов для приложения.

• Выберите Опубликовать на левой панели, чтобы открыть раскрывающийся список, а затем выберите Пакет приложения.

  Манифест приложения появится в правой области.

  

  Файл манифеста появится в правой области.

Настройка возможностей приложения

После импорта приложения на портал разработчика следующим шагом будет настройка возможностей приложения. Портал разработчика содержит все сведения о приложении в разных разделах. Это упрощает настройку возможностей приложения.

С помощью портала разработчика вы можете:

1. Настройка личного приложения вкладки.
2. Настройка бота.
3. Настройте расширение сообщений.

Настройка приложения личной вкладки

Чтобы настроить личное приложение вкладки, выполните следующие действия:

1. Щелкните значок на карточке Личного приложения в области Функции приложения и нажмите кнопку Изменить.

   Откроется вкладка "Сведения о здравствуйте".

2. Щелкните значок вкладки Hello и выберите Изменить , чтобы открыть сведения о приложении для обновления.

   

3. Введите сведения о приложении на вкладке Hello в разделе Добавление вкладки в личное приложение.

   

   Введите следующие сведения:

   • Имя: вкладка "Привет".
   • URL-адрес содержимого и URL-адрес веб-сайта: адрес переадресации в сеансе консоли ngrok.
   • Контекст: выберите вкладку Личный.

4. Нажмите кнопку Обновить.

   Сведения о вкладке Hello отображаются на панели Личное приложение .

5. Выберите Сохранить.

   

   В области Личное приложение теперь отображаются новая вкладка и вкладка About (О программе), созданные автоматически.

   

Настройка бота

Вы можете легко добавить в приложение функциональные возможности ботов. В примере приложения Hello World уже есть бот в составе примера, но его необходимо зарегистрировать в Teams.

Бот, импортированный из примера, не имеет связанного идентификатора приложения. Вам потребуется удалить его и создать нового бота. Портал разработчика создает идентификатор приложения и регистрирует его в Teams.

Добавление и настройка бота включает следующее:

1. Добавление нового бота.
2. Добавление бота в приложение.
3. Настройка области бота.

Добавление нового бота

1. Щелкните значок на карточке Бота в области Функции приложения и нажмите кнопку Удалить.

2. Выберите Сервис , чтобы добавить возможность.

   

3. Выберите Управление ботами в области Сервис .

   

4. Выберите + Создать бот в области управления ботом .

   

5. Введите подходящее имя для бота и нажмите кнопку Добавить.

   

   Откроется панель Настройка с подробными сведениями о новом боте в левой области.

6. Введите URL-адрес переадресации из ngrok консоли и нажмите кнопку Сохранить.

   

7. Выберите Секреты клиента, а затем выберите Добавить секрет клиента боту , чтобы создать пароль для бота.

   

   Портал разработчика создает пароль для бота.

   Вы можете скопировать пароль с помощью значка. В этом руководстве не нужно копировать его.

   

8. Нажмите кнопку ОК.

9. Выберите < Боты, чтобы вернуться в область управления ботами .

   В области управление ботом отображается новый бот, добавленный с идентификатором приложения.

   

10. Убедитесь, что вы сохранили идентификатор бота вместе с паролем из раздела Секрет клиента .

Добавление бота в приложение

1. Откройте область Функции приложения и выберите карточку Бот .

   

   Откроется область Бот .

2. Выберите приложение бота в разделе Выберите существующего бота и нажмите кнопку Сохранить.

   

   Новый бот добавляется в приложение с собственным идентификатором приложения.

   

Настройка области бота

1. Щелкните значок на новой карточке бота и нажмите кнопку Изменить.

2. Выберите все три области для команды на странице Бот .

   

3. Перейдите по панели Бот , чтобы просмотреть раздел Команды , и выберите + Добавить команду.

   

4. Введите подходящее имя и описание, выберите все три области для команды и нажмите кнопку Добавить.

   • Личный
   • Команда
   • Групповой чат

   

   Новая команда будет добавлена в раздел Команды области Бот .

5. Выберите Сохранить.

   

   Сведения о команде сохраняются.

   

6. Откройте область Функции приложения и выберите Личная карточка приложения, чтобы просмотреть сведения о вкладке приложения.

   Вы увидите, что в приложение будет добавлена вкладка для нового чат-бота.

   

Настройка расширения сообщений

Расширения сообщений позволяют пользователям запрашивать информацию у вашей службы и публиковать эти сведения. Информация размещается в виде карточек в беседе канала. Расширения сообщений отображаются в нижней части поля создания.

Чтобы добавить новое расширение для сообщений, выполните приведенные далее действия.

1. Щелкните значок на карточке Расширения сообщений в области Функции приложения и нажмите кнопку Удалить.

2. Выберите Расширение сообщений в области Функции приложения .

3. Выберите имя приложения бота в раскрывающемся списке Выберите существующий бот на панели Расширение сообщения .

   

4. Выберите Сохранить.

   

   Расширение сообщения будет сохранено, а раздел Команды появится в области Расширение сообщений .

5. Выберите + Добавить команду, чтобы определить область действия приложения расширения сообщений.

   

   Диалоговое окно Добавление команды .

6. Убедитесь, что поиск выбран в качестве типа команды, которую вы хотите добавить в диалоговом окне Добавление команды .

   

7. Введите подходящие сведения для следующих сведений:

   • Идентификатор команды
   • Заголовок команды
   • Описание команды

8. Перейдите по диалоговому оккуку, чтобы просмотреть оставшиеся сведения.

   

9. Убедитесь, что выбран параметр Сделать по умолчанию .

10. Выберите следующие контексты для команды расширения сообщений:

    • Командное поле
    • Поле для создания
    • Сообщение

11. Введите подходящие сведения для следующих сведений:

    • Имя параметра
    • Заголовок параметра
    • Описание параметра

12. Выберите Текст в качестве типа входных данных.

13. Выберите Сохранить.

14. Команда расширения сообщения сохраняется и отображается в списке команд на панели Расширение сообщения .

    

15. Выберите Сохранить.

16. Откройте область Функций приложения .

    

    Вы увидите все три возможности : личное приложение вкладки, бот и расширение сообщений, настроенные для приложения Hello World.

Предварительный просмотр и тестирование приложения Node.js

• 100% завершено

После импорта приложения и настройки возможностей на портале разработчика можно просмотреть и протестировать пример приложения.

После настройки возможностей приложения можно просмотреть и протестировать приложение в Teams в локальной среде.

Предварительный просмотр приложения:

1. Выберите Предварительный просмотр в Teams на панели инструментов портала разработчика.

   

   Портал разработчика сообщает о том, что ваше пользовательское приложение успешно загружено.

2. Выберите Управление приложениями Ваше приложение отображается в отправленных приложениях.

3. Найдите приложение с помощью поля поиска, выберите три точки в строке.

4. Выберите параметр Вид . Откроется страница Добавить для вашего приложения.

5. Выберите Добавить , чтобы загрузить приложение в Teams.

   

   Теперь приложение доступно в Teams. Вы можете просмотреть все вкладки и протестировать возможности:

   • Вкладка "Привет":

     

   • Чат-бот:

     

     Сообщение можно отправить с помощью чата.

     

   • Расширение сообщений:

     

     Вы можете попробовать поиск с помощью расширения сообщений.

     

   • Вкладка "Сведения":