Рубрики
Без рубрики

Руководство для начинающих к разработке команд MS # 2: боты

Привет, я надеюсь, что вам понравилось мой предыдущий учебник о том, как начать работу с разработкой команд Microsoft … Tagged Msteams, M365, JavaScript, Node.

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

Это второй из серий новичков, и на этот раз я пойду за собой, как построить разговорную бот.

Есть много разных путей, чтобы узнать, как создавать приложения Teams, и этот учебник использует минимальный код и минимальные инструменты. Кроме того, в этом руководстве не зависит от среды хостинга, поэтому я не смотрю процесс с установкой Azure и в основном, это должно работать на любой среде. ( Хотя эта статья перечислена под MS Azure 😉)

В Последняя статья , Я показал вам, как встроить вкладку, но в этом руководстве я собираюсь показать вам совершенно другую функцию, боты Отказ

Есть Разнообразные функции Вы можете использовать для создания приложения Teams, таких как расширения обмена сообщениями, вкладки и т. Д. И боты поворачивают слова в действия, такие как, генерируют заказ, просмотрите мой код, проверьте статус билета и т. Д. Бот может забить такие рабочие процессы прямо в команды.

Что вы собираетесь делать в этом руководстве

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

  1. Настройте свое приложение с App Studio
  2. Настройте свой код в онлайн-IDE и запустите
  3. Используйте Microsoft Bot Framework для обработки беседы бота

Конечный результат будет выглядеть так:

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

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

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

  • Разрешение на развитие команд или разработчиков Арендатор ( Подписаться на программу разработчика M365! )
  • App Studio – ищите приложение из меню приложений в клиенте Teams и установите на рабочее пространство
  • Опыт работы с Node.js и основным пониманием Express.js.

В отличие от предыдущего учебника, который требует некоторых навыков кодирования в интерфейсах, работать с ботами, вам нужен другой набор навыков, а для этого учебника Node.js.

Строительство бота чата

🎏 Схватить образец кода

В этом руководстве я использую 3-й партийный инструмент, Глюк Чтобы провести и запустить этот проект и остальную часть учебного пособия. Glitch – это веб-IDE, которую вы можете написать и запустить код Node.js, поэтому, по крайней мере, на данный момент, вы можете сосредоточиться на изучении концепций и основах разработки приложений команд, не беспокоясь о запуске и туннелировании localhost или развертывания. (Я охвачу их в будущем!)

Во-первых, давайте просто Нажмите на этот глюк ссылку на Ремикс проект Отказ Ремикрирование похоже на раздумку REPO на GitHub, поэтому он генерирует копию проекта для вас, чтобы вы могли изменить код в том, как вы хотите, не возиться с оригиналом 🙌

После того, как вы получите свой собственный проект REPO, он автоматически обслуживает приложение, и вы получаете свой собственный URL веб-сервера. Например, если ваше сгенерированное название проекта, как правило, он состоит из нескольких случайных слов, достигается-ужин-колокол, ваш URL-адрес узла будет https://achity-diLigent-bell.glitch.me Отказ Вы также можете настроить имя, если хотите тоже. Вам понадобится URL-адрес, когда вы настраиваете приложение с App Studio позже.

⚙️ Конфигурация приложения: Создание приложений Манифест с App Studio

Этот раздел точно такой же, как один в моем предыдущем руководстве для создания вкладок.

Когда вы создаете любые приложения для команд, вы должны создать пакет приложений, который будет установлен в Compants Client. Пакет включает в себя:

📁 your-app-package
    └── 📄 manifest.json
    └── 🖼 color.png (192x192)
    └── 🖼 outline.png (32x32)

И остальная часть кода приложения и активы должна быть размещена на вашем веб-сервере. (В этом руководстве мы используем Glitch для автоматического обслуживания вашего приложения).

Сегодня мы не создаем файл манифеста вручную, но вместо этого мы собираемся создать пакет приложений, используя Visual Tool, который под названием App Studio, чтобы вы могли создать пакет непосредственно к клиенту команды.

🎛 Использование App Studio

Установлен App Studio Приложение в клиенте команды, если у вас нет. Затем откройте приложение.

В App Studio щелкните вкладку «Редактор Mainest» сверху, затем выберите Создать новое приложение и заполните все необходимые поля, включая имена ботов, описания и т. Д.

В разделе URL-адреса приложений заполните конфиденциальность и условия URL WebPage. В этом примере я просто использую URL-адрес заполнителя, https://example.com , но когда вы разрабатываете приложения для публикации, у вас должны быть веб-страницы с заявлениями.

Также генерируйте идентификатор приложения.

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

Из левого меню выберите Возможности> Боты Отказ

Затем нажмите Настроить Чтобы настроить новый бот.

Заполните имя бота, и давайте просто выберете личный объем сейчас. Персональный бот позволяет разговаривать между ботами и одним пользователем. (Чтобы узнать больше о областях, читать Основы разговоров на документах.)

Затем нажмите Создать новый пароль Отказ На модальном всплывающем окне скопируйте пароль, который вам нужно будет вставить его в свой .env Файл на следующем шаге!

🔐 учетные данные приложений

Скопируйте идентификатор рядом со своим именем бота (что-то похоже на 2CD53E8A-E698-4EXX -... ) и вставьте его как переменную среды в вашем .env Файл, который должен быть скрытым файлом (переименовать .env-образец на .env ).

Под Пароли приложений Создайте новый пароль и скопируйте его. Затем вставьте его в свой .env файл.

Эти учетные данные используются для инициализации вашего адаптера бота. (См. Index.js).

На Конечная точка Messagind Введите свой бот сервер, который должен быть https://[Ваш проект] .glitch.me/API/Сообщения Отказ

📦 Установка пакета манифеста приложения

Перейти к Готово> Тест и распределить Отказ

Если вы получите какие-либо ошибки, посмотрите его, в противном случае нажмите Установить Ваш клиент.

Вы также можете скачать ZIP-файл, который содержит Mainesest.json , и два значка изображения для установки позже или распространять.

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

🤖 Microsoft Bot Framework

Microsoft Bot Framework Является ли SDK с открытым исходным кодом, который позволяет создавать интеллектуальные, корпоративные боты.

Этот SDK является мощной платформой, которая не только для команд, но и предназначена для работы для широких типов ботов в чате, включая Web & Mobile Chat, Skype, Facebook, Amazon Alexa, Slack, Twilio и многое другое!

🔧 Инициирование службы бота

Во-первых, есть два файла JS в образце Code Code Code, index.js и bots.js.

Примечание. Глюк автоматически вытягивает все зависимости от предварительного определенный Package.json. Таким образом, вам не нужно устанавливать пакеты вручную.

В index.js , вам нужно включить библиотеки, Botbuilder и библиотека для настройки HTTP-сервера и маршрутизации HTTP-запросов. Я использую выражать Но вы можете использовать что-то еще, что вы предпочитаете, например, Редактировать Отказ

index.js:

// Import Express & set up HTTP server
const express = require('express');
const app = express();
const server = app.listen(process.env.PORT || 3978);

// Import bot services
const { BotFrameworkAdapter } = require('botbuilder');

// Bot's main dialog
const { ReverseBot } = require('./bot');

Примечание: В этом примере я использую Botbuilder Version 4.10.0. Если ваш код не работает должным образом, проверьте версию, которую вы используете!

Затем настройте адаптер, который позволяет вашему боту взаимодействовать с пользователем и отправлять ответы.

const adapter = new BotFrameworkAdapter({
  appId: process.env.MicrosoftAppId,
  appPassword: process.env.MicrosoftAppPassword
});

// Error handlings (See the Glitch sample for details!)

// Create the main dialog
const myBot = new ReverseBot();

🦉 Пересылка запросов на логику бота

Используйте Express для обработки маршрутизации для прослушивания входящих запросов:

app.post('/api/messages', (req, res) => {
  adapter.processActivity(req, res, async context => {
    await myBot.run(context);
  });
});

Вы настроили URL в App Studio на предыдущем шаге. /API/Сообщения Является ли конечный URL вашей приложения для ответа на запросы клиентов.

💬 Обработка запроса и последующих ответов

Как только запрос получен на конечной точке и переадресован в логику бота, ваше приложение получают контекст запроса, затем создать пользовательский ответ в Bots.js Отказ

Смотрите TeamSactivityHandler продлен для создания соответствующего обработчика для запроса:

const { TeamsActivityHandler, MessageFactory } = require('botbuilder');

class ReverseBot extends TeamsActivityHandler {
  constructor() {
    super();
    this.onMessage(async (context, next) => {
      const backward = [...context.activity.text].reverse().join(''); // reverse string
      const replyText = `🙃 *${ backward }*`; // you can use markdown
      await context.sendActivity(MessageFactory.text(replyText));

      await next();
    });
  }
}

TeamSactivityHandler Оценка командных команд, которые обрабатывают такие сообщения, как сообщения сообщений ( например onmembersadded Метод называется всякий раз, когда член добавляется в разговор), и отправка ответов.

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

🤖💬. Пробую свой бот

Теперь, давайте попробуем бот! Перейдите в клиент команды и нажмите Запустите бот в левой панели меню.

Если все работает, как и ожидалось, вы сможете развернуться с таким ботом:

Этот пример показывает, как отправить текстовый ответ, однако, вы можете создавать более интерактивные сообщения, используя кнопки и другие компоненты пользовательского интерфейса. Я объясню больше об этом позже.

Я надеюсь, что вам понравилось учебное пособие, я надеюсь, что вы найдете лучшие случаи использования, чем это и создать что-то удивительное! Увидимся в следующий раз 👋

📚 Узнать больше

Оригинал: “https://dev.to/azure/beginners-guide-to-ms-teams-development-2-bots-590m”