В этой демонстрации мы создадим простое SMS-приложение, которое позволит вам отправить текстовое сообщение на номер телефона, а затем автоматически опубликовать это сообщение в хранилище данных Turbo 360. Затем мы будем отображать эти сообщения в веб-интерфейсе.
Для просмотра видео версии нажмите ниже:
Начиная
Убедитесь, что у вас Node версии 6 или выше.
$ node -v
Затем выполните следующие команды:
$ sudo npm i -g gulp $ sudo npm i -g webpack $ sudo npm i -g turbo-cli
На момент демонстрации последняя версия Turbo — 0.15.7. Если вы не уверены, какая у вас версия, вы можете проверить, выполнив:
$ turbo version
Перейдите в Turbo 360 и создайте учетную запись, если у вас ее еще нет. Создайте новое приложение под названием текстовая доска. Скопируйте идентификатор приложения из правой части окна.
В Терминале перейдите туда, где вы программируете — для целей этого руководства это будет рабочий стол.
$ cd ~/Desktop
Создайте новый проект, выполнив следующую команду:
$ turbo new text-demo
Это создает базовое приложение Node/Express, с которым вы можете работать.
Выполните следующие команды:
$ cd text-demo $ npm install
Это установит все пакеты и зависимости для вашего проекта. Этот шаг должен быть вам знаком, если вы ранее работали с Node и Express.
Затем мы хотим запустить сервер разработки, чтобы убедиться, что пока все работает правильно.
$ turbo devserver
Используйте свой браузер, чтобы перейти к localhost:3000, и вы увидите простое приложение Turbo 360. Чтобы остановить сервер разработки, нажмите CTRL+C на клавиатуре.
Далее мы подключим наш локальный исходный код к проекту Turbo, который мы создали ранее.
$ turbo app PASTE_APP_ID_HERE $ turbo deploy
Теперь ваш проект будет подключен к бесплатной тестовой среде, предоставляемой Turbo 360. Когда эта команда завершит выполнение, вы увидите что-то вроде: DEPLOY COMPLETE: http://YOUR_STAGING_URL.turbo360-vertex.com
Скопируйте этот URL-адрес и перейдите к нему с помощью браузера. Вы увидите ту же страницу, что и раньше, но теперь мы знаем, что проект работает как в живой среде, так и в локальной.
Исходный код
Это проект Node/Express, поэтому наш исходный код будет следовать традиционной архитектуре Node/Express. app.js — это традиционная точка входа для проектов Node/Express. Здесь вы увидите базовую настройку Node/Express с некоторыми основными маршрутами. В папке представлений вы можете открыть index.mustache, чтобы просмотреть код страницы, которую мы только что видели в браузере. Имейте в виду, что при использовании скаффолда Turbo 360 по умолчанию реализовано несколько вещей: установлен шаблонизатор усов, а в качестве каталога статических ресурсов используется каталог public.
Создание конечной точки API
Перейдите к папкам маршрутов и создайте новый файл с именем sms.js:
$ cd routes $ touch sms.js
Целью этого маршрута будет получение текстовых сообщений.
Откройте новый файл route/sms.js. Скопируйте код из route/index.js и вставьте его в sms.js. Удалите все текущие конечные точки, чтобы у вас осталось следующее:
Чтобы убедиться, что этот маршрут работает правильно, мы возвращаем некоторые основные данные JSON. Добавьте следующий код:
res.json({
confirmation: 'success',
data: 'this is the sms route!'
})
Итак, sms.js выглядит так:
Далее маршрут необходимо подключить в app.js как стандартный проект Express. Вернитесь к app.js и подключите sms.js, добавив код в строки 10 и 15:
Этот код создает путь для обслуживания созданного нами нового sms-маршрута.
Запустите команду $ turbo devserver. И перейдите к localhost:3000/sms, чтобы увидеть JSON, который мы определили для этого маршрута. Теперь мы знаем, что наш маршрут настроен правильно. Позже мы вернемся к этому маршруту.
Использование Twilio
Twilio отправляет POST-запросы на сервер, который вы определяете с помощью веб-перехватчика, а POST-запросы отправляют данные через тег body запроса. Это означает, что нам нужна еще одна конечная точка API в route/sms.js, которая будет получать тексты от Twilio. Добавьте обработчик запроса POST, который проверяет сообщение и отправителя, а затем добавьте сообщение в хранилище данных Turbo 360. Мы делаем это, добавляя следующий код в sms.js:
Если вы хотите протестировать остальную часть этого проекта, настройте учетную запись в Twilio и зарегистрируйте номер телефона. С пробной учетной записью перейдите в раздел Обучение и разработка -> Создать -> Получить номер. Затем перейдите на панель инструментов, нажмите на свой номер телефона и прокрутите вниз до раздела Сообщения. В текстовом поле рядом с ПРИХОДИТ СООБЩЕНИЕ введите URL-адрес промежуточного приложения Turbo 360, а затем /sms. URL будет иметь вид http://text-board-zpqpoy.turbo360-vertex.com/sms.
Теперь мы можем отправлять текстовые сообщения на номер телефона Twilio, и он будет добавлен в хранилище данных Turbo 360, связанное с этим проектом. Чтобы отобразить эти сообщения, мы должны сначала изменить route/index.js, чтобы получать сообщения из хранилища данных и отображать страницу, которая их отображает. Файл должен содержать следующий код:
Далее мы изменим views/index.mustache для отображения сообщений в хранилище данных:
На этом этапе вы должны протестировать это локально, запустив сервер разработки и перейдя на localhost: 3000, а также протестировать промежуточную среду, развернув и затем введя свой промежуточный URL-адрес в свой веб-браузер.
Тема
Чтобы увидеть список доступных тем, предоставляемых Turbo 360, запустите $ turbo themes. Для этой демонстрации мы используем тему Turbo Hyperspace. Для этого выполните команду $ turbo theme hyperspace. Вы могли заметить, что это изменяет ваш файл index.mustache. Если вы запустите devserver и перейдете на localhost:3000, вы увидите, что тема реализована.
Tags.js
Затем перейдите в каталог маршрутов и создайте новый файл с именем tags.js.
$ cd routes $ touch tags.js
Убедитесь, что вы подключили этот новый файл в своем app.js. Мы можем протестировать это соединение так же, как мы тестировали sms.js, запустив сервер разработки и введя localhost:3000/tags в вашем браузере. Прямо сейчас tags.js и app.js должны выглядеть так:
И:
Затем мы хотим очистить URL-адрес, предоставленный маршруту тегов, для данных, содержащихся в его метатегах, поэтому мы собираемся установить superagent и cheerio. Superagent используется для выполнения HTTP-запросов, а cheerio позволяет выполнять парсинг HTML.
$ npm install -S superagent $ npm install -S cheerio
Убедитесь, что вам требуются superagent и cheerio в верхней части файла, и добавьте код для HTTP-запроса и очистки HTML, чтобы tags.js выглядел следующим образом:
Чтобы использовать маршрут тегов, выберите новостную статью в Интернете и введите в браузере следующий адрес: localhost:3000/tags?url=http://URL_FOR_YOUR_ARTICLE.com.
Или используйте этот пример: http://localhost:3000/tags?url=https://nypost.com/2017/11/14/knicks-are-loving-their-offense-without-phil-jackson/
Скрейп.js
Теперь tags.js был создан только для тестирования, поэтому сейчас мы собираемся создать служебную функцию, которая позаботится о HTTP-запросе и очистке HTML. Из корневого каталога вашего проекта выполните следующие команды:
$ mkdir utils $ cd utils $ touch scrape.js
Это создаст новый каталог с именем utils и файл с именем scrape.js внутри этого каталога. Затем переместите код из tags.js в новый файл, чтобы scrape.js выглядел так:
Поскольку теперь мы передаем функцию очистки на аутсорсинг, измените tags.js, чтобы он содержал:
Не забудьте потребовать очистку в верхней части файла. Вы можете проверить это, запустив сервер разработки и перейдя на localhost:3000/tags.
Заканчивать
На данный момент мы хотим обойти tags.js и вызвать нашу функцию парсинга непосредственно из обработчика SMS. Для этого нам нужно, чтобы наш файл sms.js содержал следующий код:
Наконец, мы изменим наш файл index.mustache, чтобы отображать информацию, полученную из ссылок, которые мы получаем через SMS:
Убедитесь, что вы протестировали это в реальном приложении, развернув его в Turbo 360, а также протестировав локально. Обратите внимание, что в этой базовой демонстрации мы исходим из предположения, что наши сообщения будут либо просто текстом, либо просто URL-адресом, а не комбинацией того и другого.
Если все работает, то поздравляю! Вы создали новостную ленту SMS!
Если у вас есть вопросы или комментарии относительно этого руководства, обращайтесь по адресу [email protected].
