Телеграм-бот для учёбы

Сего­дня мы при­ме­ним один из сер­ви­сов — кон­струк­то­ров ботов для Теле­гра­ма: сде­ла­ем соб­ствен­но­го полез­но­го бота.

Пред­ставь­те ситу­а­цию: вы орга­ни­зу­е­те лек­ции и семи­на­ры в раз­ных зда­ни­ях, у вас мно­го участ­ни­ков и вы хоти­те им помочь луч­ше ори­ен­ти­ро­вать­ся в учеб­ных кор­пу­сах и заня­ти­ях. Вот в этом нам и помо­жет бот.

Что будем делать

У нас три кур­са, каж­дый в сво­ём кор­пу­се. Нам нуж­но пока­зать поль­зо­ва­те­лю, какие кур­сы у нас есть и где они находятся.

Для это­го мы сде­ла­ем при­вет­ствен­ный экран, где сра­зу пока­жем, какие учеб­ные кур­сы у нас есть. Для удоб­ства спи­сок кур­сов сде­ла­ем кноп­ка­ми, что­бы поль­зо­ва­тель сра­зу мог выбрать нуж­ный и по нажа­тию полу­чить всю инфор­ма­цию. Когда курс выбран, мы рас­ска­жем, в каком кор­пу­се про­хо­дят заня­тия, и пред­ло­жим посмот­реть фото здания.

Что нам понадобится

Мы будем исполь­зо­вать BotMother — у него есть реги­стра­ция через Фейс­бук и про­стой интер­фейс. Но то же самое мож­но сде­лать и на любых дру­гих кон­струк­то­рах, отли­чия будут толь­ко в ком­по­нен­тах и оформлении.

Создаём пустого бота в сервисе

Пер­вое, что нам нуж­но сде­лать — создать ново­го бота. Для это­го пона­до­бит­ся телеграм-сервис по созда­нию ботов BotFather — мы рас­ска­зы­ва­ли о нём в ста­тье про бота на Python. Дела­ем всё по той инструк­ции и копи­ру­ем токен — он нам сей­час понадобится.

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


Сер­вис сра­зу пред­ло­жит нам выбрать плат­фор­му, для кото­рой мы хотим сде­лать бота. Выби­ра­ем Теле­грам и встав­ля­ем наш токен:


После под­клю­че­ния мы попа­да­ем на глав­ный экран. Сле­ва — панель ком­по­нен­тов, мы их будем исполь­зо­вать, что­бы научить наше­го бота общать­ся с поль­зо­ва­те­лем. Всё осталь­ное — это экраны.

Экра­ны — это отдель­ные пор­ции с инфор­ма­ци­ей, кото­рые полу­ча­ет поль­зо­ва­тель. При­вет­ствие с выбо­ром, рас­сказ о кур­се, фото зда­ния — всё это отдель­ные экра­ны. Наша зада­ча — сде­лать отдель­ные экра­ны для каж­до­го вари­ан­та раз­ви­тия собы­тий и свя­зать их меж­ду собой.


Стартовый экран

Что­бы напол­нить стар­то­вый экран, исполь­зу­ем ком­по­нент «Груп­па кно­пок с под­сказ­ка­ми» — пере­тас­ки­ва­ем его и пишем текст приветствия.

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

Переходы между экранами

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

Пере­та­щим на него тот же ком­по­нент «Груп­па кно­пок с под­сказ­ка­ми». В опи­са­нии рас­ска­жем, что заня­тия про­хо­дят в тре­тьем кор­пу­се, а при нажа­тии на кноп­ку будем пока­зы­вать фото здания.

Нам оста­лось сде­лать так, что­бы вся эта инфор­ма­ция появ­ля­лась по нажа­тию кноп­ки на стар­то­вом экране. Для это­го нажи­ма­ем на саму кноп­ку и выби­ра­ем экран, кото­рый мы пока­жем пользователю:


Точ­но так же созда­ём экра­ны о двух дру­гих кур­сах, запол­ня­ем опи­са­ние и пишем текст на кноп­ках. Нам оста­ёт­ся свя­зать их с осталь­ны­ми кноп­ка­ми и создать экра­ны, где мы пока­жем фото самих учеб­ных корпусов:



Все настрой­ки теку­ще­го экра­на вид­ны на вклад­ке «Ком­по­нен­ты».

Изображения

У нас есть экран, на кото­ром мы пока­жем фото пер­во­го кор­пу­са. Что­бы это сде­лать, пере­та­щим сюда ком­по­нент «Изоб­ра­же­ние». Саму фото­гра­фию мож­но доба­вить раз­ны­ми спо­со­ба­ми: выбрать файл на ком­пью­те­ре или вста­вить ссыл­ку на фото в интер­не­те. Что­бы не ска­чи­вать фай­лы, мы доба­вим ссыл­ку на бес­плат­ное фото из Unsplash:

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


Улучшаем сервис

А если по фото поль­зо­ва­те­ли не пой­мут, где нахо­дит­ся нуж­ный кор­пус? Что­бы это­го не слу­чи­лось, давай­те сра­зу под фото­гра­фи­ей пока­жем гео­ло­ка­цию зда­ния. Нам пона­до­бит­ся ком­по­нент «Гео­ло­ка­ция» — пере­тас­ки­ва­ем его сра­зу под фото. После это­го вво­дим адрес или выби­ра­ем точ­ку на карте:



Гото­вый бот со все­ми экранами. 

Сохраняем и запускаем

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

Когда всё сде­ла­но, сохра­ня­ем рабо­ту и откры­ва­ем наше­го бота в Телеграме:

Что дальше

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

  • пока­зать рас­пи­са­ние занятий;
  • дать ссыл­ку на чат группы;
  • сде­лать кноп­ку «Хочу участ­во­вать», что­бы забро­ни­ро­вать себе место;
  • запро­сить имя поль­зо­ва­те­ля, что­бы вне­сти его в список;
  • дать воз­мож­ность ска­чи­вать учеб­ные мате­ри­а­лы за теку­щий день.

Одна­жды и мы до это­го дойдём!