Делаем своего первого чат-бота

Уровень: начинающий

Мате­ри­ал рас­счи­тан на тех, кто в жиз­ни не напи­сал ни строч­ки кода. Если вы уже в кур­се основ про­грам­ми­ро­ва­ния, про­чи­тай­те луч­ше о чистых функ­ци­ях.

Мно­гие слы­ша­ли про чат-ботов и робо­тов для обще­ния: им пишешь, они отве­ча­ют, полу­ча­ет­ся диа­лог с маши­ной. Чат-бот может рас­ска­зать анек­дот, поис­кать за вас в интер­не­те, забро­ни­ро­вать сто­лик в ресто­ране и что угод­но ещё, чему его обу­чат создатели.

Ино­гда такое обще­ние выгля­дит как обще­ние с чело­ве­ком. Может даже пока­зать­ся, что там рабо­та­ет искус­ствен­ный интел­лект — и ино­гда так дей­стви­тель­но быва­ет. Но часто всё про­ще: это алго­ритм, кото­рый уме­ет рас­по­зна­вать неко­то­рые ваши сло­ва и давать отве­ты по зара­нее заго­тов­лен­ным шаб­ло­нам. Чем алго­ритм более раз­ветв­лён­ный, тем есте­ствен­нее и полез­нее бот.

Давай­те сде­ла­ем соб­ствен­но­го чат-бота с очень про­стым алго­рит­мом. Поз­же вы смо­же­те услож­нить его, как захо­ти­те. Но сна­ча­ла — самая база для тех, кто нико­гда не писал код.

Обыч­но, что­бы создать какую-то про­грам­му, нуж­но выпол­нить несколь­ко дей­ствий: напри­мер, ска­чать программу-обработчик язы­ка, заве­сти про­ект, напи­сать заду­ман­ную про­грам­му, ском­пи­ли­ро­вать. И толь­ко потом ей мож­но поль­зо­вать­ся. Но мы пой­дём по более про­сто­му пути: напи­шем про­грам­му, рабо­та­ю­щую пря­мо в бра­у­зе­ре, через кото­рый вы чита­е­те эту ста­тью. Сде­лать это мож­но лишь на ком­пью­те­ре, на теле­фоне при­дёт­ся поль­зо­вать­ся ботом.

Мы будем решать зада­чу на язы­ке JavaScript — это язык про­грам­ми­ро­ва­ния, кото­рый встро­ен в ваш бра­у­зер и на кото­ром напи­сать код мож­но пря­мо сей­час, ниче­го не устанавливая.

Что­бы сде­лать что-то на JavaScript, нуж­но открыть кон­соль. Почти во всех совре­мен­ных бра­у­зе­рах это дела­ет­ся соче­та­ни­ем кла­виш Shift + Ctrl + J или Cmd + Alt + J. Спра­ва или сни­зу появит­ся допол­ни­тель­ное окно, в кото­ром уже будет что-то происходить:

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

Когда вы откры­ва­е­те кон­соль, она сра­зу гото­ва выпол­нять ваши коман­ды. Если в неё вста­вить про­грам­му, напи­сан­ную на JavaScript, и нажать Enter, ваш бра­у­зер её реа­ли­зу­ет. Если в коде есть ошиб­ки, кон­соль сама под­све­тит их. Мож­но отправ­лять в неё про­грам­му кус­ка­ми или даже построч­но: бра­у­зер будет пом­нить всё, что про­ис­хо­ди­ло в вашей про­грам­ме, пока вы не пере­за­гру­зи­те страницу.

Первая строка

В кон­со­ли мож­но не толь­ко писать код, но и выво­дить туда резуль­та­ты. Давай­те для нача­ла сде­ла­ем самую про­стую про­грам­му, кото­рая отоб­ра­зит в кон­со­ли сло­во «При­вет!». Для это­го исполь­зу­ем коман­ду console.log(‘Привет!’);

Вста­вим её в кон­соль и нажмём Enter:

Поздрав­ля­ем, вы толь­ко что напи­са­ли свою первую про­грам­му для ком­пью­те­ра! Она очень про­стая: ком­пью­тер все­го лишь гово­рит «При­вет!». Но оце­ни­те момент: это вы его научи­ли так гово­рить. Попро­буй­те научить его и дру­гим словам.

Если напи­сать несколь­ко команд, полу­чим сооб­ще­ние из несколь­ких строк:

Вот мы и нача­ли созда­вать сво­е­го чат-бота, кото­рый нас уже попри­вет­ство­вал в кон­со­ли. Теперь сде­ла­ем так, что­бы мы тоже мог­ли ему что-нибудь отве­тить. Для это­го нам пона­до­бят­ся переменные.

Переменные

Что­бы дать понять ком­пью­те­ру, что у нас сей­час будет пере­мен­ная, нуж­но ска­зать ему сло­во var, после кото­ро­го впи­сать назва­ние пере­мен­ной — так нам про­ще к ней обра­щать­ся. Напри­мер, сле­ду­ю­щая стро­ка создаст пере­мен­ную name и поло­жит в неё сло­во «Код»:

Назва­ние тут может быть прак­ти­че­ски любым, глав­ное, что­бы оно начи­на­лось с бук­вы. По-русски пере­мен­ные назы­вать нель­зя, толь­ко бук­ва­ми латин­ско­го алфа­ви­та. Мож­но было бы исполь­зо­вать вари­ант imya или zovut, но про­грам­ми­сты счи­та­ют, что чем про­ще назва­ние пере­мен­ной, тем лучше.

Теперь посмот­рим содер­жи­мое эле­мен­та. Сле­ду­ю­щая коман­да выве­дет то, что сей­час запи­са­но в пере­мен­ной name:

Мож­но посмот­реть, какое сего­дня чис­ло. Это внут­рен­няя систем­ная пере­мен­ная. Стро­го гово­ря, это не совсем пере­мен­ная, но для нача­ла давай­те счи­тать так:

Но это мы всё смот­рим во внут­рен­но­сти ком­пью­те­ра. А нам нуж­но спро­сить что-то у поль­зо­ва­те­ля. Что­бы мы мог­ли вве­сти новые дан­ные в нашу про­грам­му, исполь­зу­ем коман­ду prompt()

Вставь­те в кон­соль коман­ду var name = prompt(‘Как вас зовут?’); и посмот­ри­те, что про­изой­дёт. Ком­пью­тер выве­дет окно и будет ждать, пока вы вне­сё­те туда своё имя. Интер­фейс выгля­дит кра­си­во: давай­те в диа­ло­ге общать­ся с ком­пью­те­ром не через кон­соль, а через такие появ­ля­ю­щи­е­ся окош­ки. Для это­го напи­шем новые команды:

Пусть ком­пью­тер про­явит веж­ли­вость и ска­жет, что ему при­ят­но с нами позна­ко­мить­ся. Что­бы он смог обра­тить­ся к нам по име­ни, исполь­зу­ем пере­мен­ную name — в ней как раз хра­нит­ся то, что мы отве­ти­ли компьютеру:

Что­бы выве­сти осмыс­лен­ную фра­зу, мы взя­ли нача­ло ‘При­вет, ‘, затем с помо­щью плю­си­ка соеди­ни­ли со зна­че­ни­ем пере­мен­ной name , кото­рая хра­нит наше имя, а потом ещё одним плю­си­ком доба­ви­ли к фра­зе кон­цов­ку. Что­бы ком­пью­тер знал, что мы хотим выве­сти на экран текст, а не чис­ла, исполь­зу­ют­ся кавыч­ки. Ком­пью­тер вос­при­ни­ма­ет как текст то, что внут­ри кавы­чек. И выво­дит точ­но в том виде, в кото­ром написано.

Расчёт дня рождения

Давай­те соеди­ним все наши коман­ды в одну про­грам­му и допи­шем несколь­ко новых фраз:

Обра­ти­те вни­ма­ние: у нас появил­ся новый вопрос и новая пере­мен­ная hobby, в кото­рой хра­нит­ся инфор­ма­ция об увле­че­нии. А ещё — ком­мен­та­рии, кото­рых мож­но добав­лять сколь­ко угод­но. JavaScript не обра­ща­ет вни­ма­ния на то, что напи­са­но после двух косых черт:

Теперь у вас есть всё, что нуж­но, что­бы напи­сать свою вер­сию чат-бота для обще­ния. Если про­дол­жи­те решать наши задач­ки, то смо­же­те научить ком­пью­тер по-разному реа­ги­ро­вать на ваши отве­ты и даже вести осмыс­лен­ный диалог.

Что ещё посмотреть

Вот кое-что, что может вам при­го­дить­ся при созда­нии пер­во­го чат-бота.

performance.now() — эта коман­да воз­вра­ща­ет вре­мя в мил­ли­се­кун­дах с момен­та откры­тия теку­щей стра­ни­цы. Мож­но поде­лить на 1 000, и вы узна­е­те, сколь­ко секунд вы сиди­те на какой-то стра­ни­це. Если поде­лить на 60 000 — сколь­ко минут.

setTimeout() — поз­во­ля­ет выпол­нить любой код через опре­де­лён­ное вре­мя. Напри­мер, вы може­те задать вопрос и предо­ста­вить ров­но мину­ту на раз­мыш­ле­ние, после чего появит­ся окно для ответа.

setInterval() — то же самое, что и преды­ду­щее, но выпол­не­ние кода повто­ря­ет­ся с рав­но­мер­ным интер­ва­лом, напри­мер раз в 5 минут. Если вы хоти­те научить чат-бота, что­бы он раз в час напо­ми­нал попить воды, эта коман­да — то, что нужно.

Как поль­зо­вать­ся эти­ми шту­ка­ми, мы рас­ска­жем в одной из буду­щих ста­тей, но вы все­гда може­те само­сто­я­тель­но поис­кать в интер­не­те, как они рабо­та­ют. Поль­зу­ясь эти­ми тре­мя воз­мож­но­стя­ми JavaScript, полу­чит­ся создать непло­хо­го бота, кото­рый будет сле­дить за вашей про­дук­тив­но­стью и интер­ва­ла­ми рабо­ты. Под­пи­сы­вай­тесь на «Код», что­бы не про­пу­стить новые разборы.

Создание бота для Microsoft Teams Build a bot for Microsoft Teams

В этом руководстве вы создадим базовое бот-приложение. You’ll build a basic bot app in this tutorial. Бот действует как посредник между пользователями Teams и веб-службой. A bot acts as an intermediary between Teams users and your web service. Люди могут общаться с ботом, чтобы быстро получить информацию или инициировать рабочий процесс и задачи, выполняемые вашей службой. People can chat with a bot to quickly get information or initiate workflows and tasks performed by your service.

Назначение Your assignment

На рабочем месте создано приложение Teams, использующее вкладки для получения важных контактных данных. Your workplace created a Teams app that uses tabs to surface important contact information. Например, у коллег есть быстрый доступ к номеру телефона службы поддержки. For example, colleagues have quick access to the help desk phone number. Но что делать, если бы люди могли обращаться в службу поддержки с помощью чат-робота? But instead of calling, what if people could contact the help desk using a chatbot? Ваш начальник просит вас узнать, как быстро вы можете получить базовый бот для бесед в Teams. Your boss asks you to look at how quickly you can get a basic conversational bot up and running in Teams.

Что вы узнаете What you’ll learn

• Создание проекта приложения и бота с помощью microsoft Teams набор средств для Visual Studio Code Create an app project and bot using the Microsoft Teams Toolkit for Visual Studio Code
• Определение некоторых конфигураций приложений и скаолдинг, релевантный для ботов Identify some of the app configurations and scaffolding relevant to bots
• Локальное приложение Host an app locally
• Настройка бота для Teams Configure a bot for Teams
• Загрузка неогрузки и тестирование бота в Teams Sideload and test a bot in Teams

Прежде чем начать Before you begin

Если вы еще не знаете и не установили необходимые условия для разработки Teams. If you haven’t yet, make sure you understand and install the Teams development prerequisites.

1. Создайте проект приложения 1. Create your app project

Microsoft Teams набор средств поможет вам настроить следующие компоненты для вашего приложения: The Microsoft Teams Toolkit helps you set up the following components for your app:

• Конфигурации приложений и скафолдинг, релевантные для ботов App configurations and scaffolding relevant to bots
• Бот, автоматически зарегистрированный в службе ботов Microsoft Azure Bot that’s automatically registered with the Microsoft Azure Bot Service

Если вы еще не создавали проект приложения Teams, возможно, вам будет полезно следовать этим инструкциям, чтобы подробнее объяснить проекты. If you haven’t created a Teams app project before, you might find it helpful to follow these instructions that explain projects in more detail.

1. В Visual Studio кода выберите Microsoft Teams в левой панели действий и выберите «Создать новое приложение Teams».
2. При запросе во sign in with your Microsoft 365 development account. When prompted, sign in with your Microsoft 365 development account.
3. On the Add capabilities screen, select Bot then Next. On the Add capabilities screen, select Bot then Next.
4. Введите имя приложения Teams. Enter a name for your Teams app. (Это имя приложения по умолчанию, а также имя каталога проекта приложения на локальном компьютере.) (This is the default name for your app and also the name of the app project directory on your local machine.)
5. Go to Configure bot and select Create a new Bot then Create Bot Registration. Go to Configure bot and select Create a new Bot then Create Bot Registration. В случае успеха новый бот будет иметь зарегистрированный статус. If successful, your new bot will have a Registered status.
6. Выберите «Готово» в нижней части экрана и выберите расположение для создания проекта. Select Finish at the bottom of the screen and choose a location to create your project.

2. Определение соответствующих компонентов проекта приложения 2. Identify relevant app project components

Большая часть конфигураций и скафаолдинга приложений автоматически заданная при создании проекта с помощью командной набор средств. Much of the app configurations and scaffolding are set up automatically when you create your project with the Teams Toolkit. Рассмотрим основные компоненты для создания бота. Let’s look at the main components for building a bot.

Конфигурации приложений App configurations

Чтобы просмотреть или обновить конфигурации бота, выберите App Studio в наборе средств и перейдите к ботам. To view or update your bot’s configurations, select App Studio in the toolkit and go to Bots.

Скафаолдинг приложений App scaffolding

Скафолдинг приложения предоставляет файл, расположенный в корневом каталоге проекта, для обработки того, как бот обрабатывает действия в Teams (например, как бот реагирует на определенные сообщения, такие как botActivityHandler.js «Hello»). The app scaffolding provides a botActivityHandler.js file, located in the root directory of your project, for handling how your bot processes activities in Teams (for example, how the bot responds to specific messages such as «Hello»).

3. Настройка безопасного туннеля для приложения 3. Set up a secure tunnel to your app

Для тестирования разберем ваше приложение на локальном веб-сервере (порт 3978). For testing purposes, let’s host your app on a local web server (port 3978).

1. Если вы еще не сделали этого, установите ngrok. If you haven’t already, install ngrok.
2. В терминале запустите ngrok http -host-header=rewrite 3978 . In a terminal, run ngrok http -host-header=rewrite 3978 .
3. Скопируйте URL-адрес HTTPS в выходных данных (например, ),так как https://468b9ab725e9.ngrok.io Teams требует подключения HTTPS. Copy the HTTPS URL in the output (for example, https://468b9ab725e9.ngrok.io ) since Teams requires HTTPS connections.

С помощью этого URL-адреса Teams (для которого требуются подключения ПО HTTPS) будет иметь туннель, в котором размещено приложение (через порт localhost 3978). With this URL, Teams (which requires HTTPS connections) will be able tunnel to where you’re hosting your app ( localhost on port 3978).

4. Настройте бота 4. Configure your bot

Чтобы использовать бота в Teams, необходимо зарегистрировать его в службе ботов Azure. To use a bot in Teams, you must register it with the Azure Bot Service. Это делается автоматически при настройках приложения с помощью командной набор средств. Lucky for you, this is done automatically when you set up your app using the Teams Toolkit.

Вам по-прежнему необходимо указать адрес конечной точки для получения и обработки пользовательских сообщений (то есть запросов), отправленных боту. You still must specify an endpoint address to receive and process user messages (i.e., requests) sent to the bot. Как правило, URL-адрес https://HOST_URL/api/messages выглядит. Typically, the URL looks like https://HOST_URL/api/messages . Это можно быстро настроить в наборе средств. You can configure this quickly in the toolkit.

1. В Visual Studio code выберите Microsoft Teams в левой панели действий и выберите команду «Открыть Microsoft Teams набор средств.
2. Перейдите в > регистрации существующих ботов и выберите бота, созданного во время установки. Go to Bots > Existing bot registrations and select the bot you created during setup.
3. В поле адреса конечной точки бота введите URL-адрес ngrok (например, url-адрес), в котором размещен бот, и https://468b9ab725e9.ngrok.io введите /api/messages его. In the Bot endpoint address field, enter the ngrok URL (for example, https://468b9ab725e9.ngrok.io ) where you’re hosting the bot and append /api/messages to it.
   

Бот сможет отвечать на сообщения в Teams. Your bot will be able to respond to messages in Teams.

5. Сборка и запуск приложения 5. Build and run your app

Вы настроили URL-адрес для своего бота и настроили его для обработки сообщений. You’ve set up a URL to host your bot and configured it to handle messages. Пора приумножите свое приложение к работе. It’s time to get your app up and running.

1. В терминале перейдите в корневой каталог проекта приложения и запустите npm install его. In a terminal, go to the root directory of your app project and run npm install .
2. Запустите npm start . Run npm start .

В случае успеха вы увидите следующее сообщение, указывающее, что ваш бот прослушивает действия на вашем localhost компьютере: If successful, you see the following message indicating your bot is listening for activity at your localhost :

Bot/ME service listening at http://localhost:3978

6. Загрузка нео sideload бота в Teams 6. Sideload your bot in Teams

С помощью бота вы можете установить его в Teams. With your bot running, you can install it in Teams.

Если вы еще не выгружали неогруженные приложения Teams и не могли с ним работать, следуйте этим инструкциям. If you haven’t sideloaded a Teams app before and run into issues, follow these instructions.

1. В Visual Studio Code нажмите клавишу F5, чтобы запустить веб-клиент Teams. In Visual Studio Code, press the F5 key to launch a Teams web client.
2. В диалоговом окте «Установка приложения» выберите «Добавить для меня». In the app install dialog, select Add for me. (You could add the bot to a channel or chat, but it’s less intrusive to others to test a bot in a one-on-one chat.) (You could add the bot to a channel or chat, but it’s less intrusive to others to test a bot in a one-on-one chat.)

7. Тестирование бота 7. Test your bot

Теперь для интересной части: скажите «Hello» вашему боту. Now for the fun part: Let’s say «Hello» to your bot.

1. В поле составить Hello сообщение. In the compose box, send a Hello message.

Бот отвечает следующим сообщением: Your bot replies with something like the following message.

Прекрасно Well done

Поздравляем! Congratulations! У вас есть базовый бот Teams, который может взаимодействовать с пользователями по одному или в параметрах группы (каналах и чатах). You have a basic Teams bot that can communicate with users one-on-one or in group settings (channels and chats).

Устранение неполадок Troubleshooting

Следующие сведения могут помочь, если у вас были проблемы с выполнением этого руководства. The following information may help if you had issues completing this tutorial.

Бот не подключен к Teams Bot isn’t connected to Teams

Если вы установили приложение, но бот не работает, убедитесь, что бот подключен к каналу Teams службы ботов Azure. If you installed your app but the bot isn’t working, make sure the bot is connected to the Azure Bot Service’s Teams channel.

Важно понимать, что это не то же самое, что канал в Teams. It’s important to understand that this isn’t the same as a channel in Teams. В этом случае служба ботов Azure подключает бота к Teams или другому поддерживаемом приложению Майкрософтили стороннему приложению для связи. In this case, a channel is how the Azure Bot Service connects your bot to Teams or another supported Microsoft or third-party communications app.