Создание текстовой приключенческой игры в Twitter с помощью SMS и Twilio на платформе Glitch

Несколько лет назад Теренс Иден создал @wnd_go — игру в стиле «выбери своё приключение», использующую серию аккаунтов в Twitter, которые ссылаются друг на друга. Мне показалось интересным показать вам, как создать приложение, которое сделает эту игру более доступной, воспроизведя геймплей через SMS. Для этого мы будем использовать Node.js и онлайн-редактор Glitch. Ранее Грег написал пост о получении SMS с помощью Glitch (тогда ещё HyperDev).

— Для этого проекта мы будем использовать онлайн-IDE Glitch — вы можете сразу приступить к написанию кода без регистрации.

— Номер телефона Twilio — бесплатный номер можно получить здесь.

Перейдите на Glitch, и вас сразу настроят на новую среду. Откройте файл `package.json` — он содержит информацию о вашем проекте. Нажмите кнопку `Add package` и добавьте модули `cheerio`, `body-parser` и `request`. Как только вы выберете результат поиска, модуль установится автоматически.

Теперь перейдём к файлу `server.js` в боковой панели и удалим его содержимое. Хотя часть кода может быть полезной, я предлагаю начать с нуля и пройти весь проект вместе. Подключим пакеты в наш проект с помощью `require` в Node.js.

Пришло время настроить наше приложение Express с `body-parser`, который упростит парсинг входящих SMS-данных. Модуль Express установлен по умолчанию и представляет собой фреймворк для создания приложений на Node.js.

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

Вернитесь в Glitch и нажмите «Show». Скопируйте URL и вернитесь в панель управления Twilio, чтобы настроить номер, как показано на этом изображении:

После настройки номера вернитесь в Glitch и создадим логику для маршрута `/sms`. Разместите следующий код перед слушателем событий:

Пришло время протестировать! Нажмите кнопку `Logs` в верхнем левом углу редактора и отправьте сообщение на ваш номер Twilio — в логах отобразится вся информация о сообщении, и вы получите ответ с идентичным текстом.

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

Отредактируем обработку входящих SMS.

Функция запроса принимает URL и функцию обратного вызова, которая выполняется после получения ответа. Если пользователь введёт «twilio», мы получим данные с http://twitter.com/twilio, если «_phzn» — с http://twitter.com/_phzn. Получив данные, передаём их Cheerio, который позволяет использовать синтаксис, похожий на jQuery, для работы с DOM страницы.

Находим HTML первого твита и присваиваем его переменной `firstItem`, затем извлекаем его содержимое и присваиваем переменной `tweetContent`. После получения `tweetContent` формируем ответ в формате TwiML и отправляем его обратно через SMS.

В Glitch не нужно сохранять и запускать проект — он уже работает. Попробуйте отправить сообщение с именем пользователя Twitter на ваш номер, и вы получите его последний твит.

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

В самом начале функции `app.post()` определим, начинается ли SMS с «wnd_» или «@wnd_».

Теперь переменная `startingPlayer` будет равна `true`, если сообщение не начинается с «wnd_» или «@wnd_», а `userText` будет установлена в «wnd_go». Мы также изменили первый параметр функции `request()` на `userText` (ранее это было `req.body.Body`).

Наконец, если `startingPlayer` равна `true`, добавим приветственное сообщение в начало `tweetContent`.

Теперь всё готово — попробуйте поиграть и посмотрите, как долго вы сможете продержаться.

Вы увидели, как можно получать, читать и отвечать на SMS всего несколькими строками кода. С этим приложением можно сделать гораздо больше. Вот несколько идей:

— Редактировать твиты, чтобы сделать подсказки более дружелюбными для пользователя

— Хранить данные о сеансах пользователей

— Создать собственную систему «выбери своё приключение» с нуля

Если вы хотите посмотреть мой готовый проект и «пересобрать» его в своём аккаунте, вы найдёте его здесь. А если у вас есть вопросы или вы хотите узнать, что ещё можно сделать с этим проектом, не стесняйтесь написать мне в Twitter @_phzn.