Начало работы со Spring MVC и Twilio

В этом руководстве мы рассмотрим основы Spring MVC и создадим приложение в стиле «Hello World». Затем мы возьмем то, что построили, и превратим это в приложение для отправки SMS и совершения голосовых вызовов с использованием Twilio REST API.

Spring MVC — это фреймворк, построенный на базе Java-сервлетов, который предоставляет компоненты, необходимые для создания веб-приложений с использованием архитектуры модель-представление-контроллер (MVC). Это один из множества инструментов, предлагаемых проектом Spring.

Если вас интересует только готовый код, вы можете найти его на моем GitHub.

Прежде чем перейти к коду, важно понять архитектуру модель-представление-контроллер (MVC), которую реализует Spring MVC.

Паттерн MVC — это способ отделения логики программы от её представления.

**Модель** выполняет всю тяжелую работу: вычисляет данные, обрабатывает пользовательский ввод и сохраняет информацию. **Представление** — это то, что видит и с чем взаимодействует пользователь. **Контроллер** отслеживает изменения в представлении (например, нажатие кнопки) и обновляет модель и представление. Эти три компонента работают вместе в Spring MVC, создавая динамичное и отзывчивое приложение.

Если архитектура MVC вызывает у вас затруднения, ознакомьтесь с отличным объяснением от Google Chrome.

Теперь, когда у нас есть лучшее понимание фреймворка, с которым мы работаем, мы можем настроить наше окружение.

Некоторая часть материала в этом посте основана на руководстве «Getting Started» от Spring MVC. Вы можете пройти их руководство, чтобы закрепить понимание концепций Spring MVC.

Прежде чем начать, вам понадобится Java Development Kit 1.8 или новее и Maven 3.0. Позже мы будем использовать Maven для сборки и запуска нашего приложения. Также вам понадобится учетная запись Twilio и номер телефона Twilio.

Откройте терминал и создайте новую директорию для этого проекта. Внутри этой директории выполните следующую команду:

Инструменты сборки, такие как Maven, могут быть довольно запутанными, поэтому мы используем приведенную выше команду, чтобы просто клонировать репозиторий GitHub для начала работы.

Внутри этой директории вы увидите две поддиректории: **initial/** и **complete/**. Мы будем выполнять всю работу внутри директории **initial/**. Эта папка удобно содержит пустые версии трех файлов, которые нам нужно будет изменить в ходе этого руководства: **GreetingController.java**, **Application.java** и **greeting.html**.

Сначала мы создадим наш веб-контроллер. Контроллер будет обрабатывать входящие HTTP-запросы и возвращать соответствующее представление. О представлении мы поговорим более подробно в следующем разделе.

Откройте **initial/src/main/java/hello/GreetingController.java** и вставьте следующий код, затем мы разберем, что он делает:

В начале файла мы импортируем несколько пакетов из фреймворка Spring MVC. Строка @Controller — это аннотация. Spring использует аннотационную модель программирования для MVC-контроллеров. Аннотация @Controller указывает Spring обрабатывать класс GreetingController как веб-контроллер. Подробнее об реализации контроллеров можно прочитать в документации Spring MVC здесь.

Другие аннотации, такие как @RequestMapping, @RequestParam и @ModelAttribute, используются для определения поведения контроллеров.

Аннотация @RequestMapping(«/greeting») указывает контроллеру, что запросы, сделанные к расширению /greeting, должны возвращать представление с именем greeting. Если у вас есть опыт работы с NodeJS, эта строка похожа на что-то вроде router.get(«/greeting», …).

Сейчас наш метод greeting не принимает никаких параметров и просто возвращает greeting. greeting ссылается на имя HTML-файла (представления), которое контроллер должен вернуть. Позже мы добавим больше в этот метод, чтобы позволить параметрам запроса сделать страницу более динамичной.

Представления отвечают за рендеринг нашего HTML-контента. Наше представление greeting, которое возвращается в GreetingController, будет создано в файле **greeting.html**. Пока этот файл будет содержать не более чем текст, сообщающий нам, что наш сервер работает. Откройте **initial/src/main/resources/templates/greeting.html** и добавьте следующее:

Позже мы изменим этот файл, чтобы он мог отображать данные из нашего GreetingController с использованием шаблонизатора.

Наконец, нам нужен способ запустить наше приложение. Чтобы запустить любую Java-программу, нужно определить метод main. Мы определим наш метод main в файле **initial/src/main/java/hello/Application.java**. Добавьте следующий код в этот файл и сохраните его:

Аннотация @SpringBootApplication добавляет несколько удобных аннотаций к классу Application, которые выходят за рамки этого поста. Самая важная строка — SpringApplication.run();, которая используется для фактического запуска приложения.

Вы могли заметить, что мы рассмотрели контроллер и представление, но не модель. Нам пока не нужна модель, потому что наше представление статично и просто рендерит HTML-страницу. Наша модель будет добавлена в разделе «Добавление параметров запроса».

Чтобы запустить ваш сервер, выполните следующую команду из корневой директории **initial/**:

Эта команда Maven скомпилирует ваши Java-файлы, соберет проект и запустит ваш сервер. Если в ваших .java файлах есть синтаксические ошибки, вы увидите сообщение BUILD FAILURE, и ваш сервер не запустится.

Альтернативно, вы можете скомпилировать ваш проект в файл .jar и затем запустить его. Для этого используйте следующие команды вместо приведенной выше:

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

Когда ваш сервер запущен, перейдите по адресу http://localhost:8080/greeting, и вы должны увидеть страницу с надписью «Hello World». Поздравляю! Вы успешно создали базовое приложение на Spring MVC. Остановите сервер с помощью Ctrl+C.

Теперь, когда наше приложение работает, давайте сделаем его немного более интерактивным. Как мы это сделаем? Конечно, с помощью Twilio!

Мы будем использовать Twilio Java SDK для интеграции Twilio в наше приложение. Поскольку эта библиотека доступна в публичном репозитории Maven, всё, что нам нужно сделать для её использования, — это обновить наш файл **pom.xml**. **pom.xml** — это файл, который Maven использует для сборки нашего проекта и управления его зависимостями.

Нам нужно добавить Twilio SDK в зависимости нашего проекта. Для этого вставьте следующий выделенный код внутрь блока в вашем файле **initial/pom.xml** (источник):

С этой зависимостью Twilio SDK будет автоматически загружен и добавлен в ваш проект при следующем запуске приложения.

Теперь, когда у нас есть Twilio SDK, давайте сделаем наш файл **GreetingController.java** немного интереснее. Мы хотим отправлять исходящие SMS-сообщения из нашего приложения на наш телефон.

Сначала нам нужно импортировать части библиотеки Twilio, которые мы будем использовать. В начале файла добавьте следующие выделенные строки сразу после остальных операторов импорта:

Чтобы использовать Twilio, нам нужно пройти аутентификацию с помощью учетных данных аккаунта. Мы сделаем это, определив несколько констант. Добавьте следующие выделенные строки в **GreetingController.java**:

Обязательно используйте свои реальные учетные данные Twilio в строках выше. TWILIO_NUMBER должен быть установлен на номер телефона Twilio, который вы уже приобрели.

Далее, ниже вашего метода greeting мы добавим новый метод под названием sendSMS. Этот метод будет вызываться из метода greeting и использоваться для создания и отправки исходящего текстового сообщения.

Поместите следующий код ниже вашего метода greeting:

Приведенный выше код создает новый объект TwilioRestClient и добавляет к нему список параметров с помощью объекта Message. Twilio требует, чтобы три параметра были установлены для отправки исходящего SMS:

— «Body» — это сообщение, которое вы хотите отправить.

— «To» — ваш номер мобильного телефона.

— «From» — номер телефона Twilio, которым вы владеете.

Наконец, нам нужно вызвать эту функцию из нашего метода greeting. Измените метод так, чтобы он выглядел следующим образом:

Наш метод sendSMS теперь будет вызываться непосредственно перед возвратом представления greeting.

Перезапустите ваш сервер с помощью команды $ mvn spring-boot:run из корневой директории **initial/** и снова перейдите по адресу http://localhost:8080/greeting. Номер, указанный в параметре «To», должен получить SMS с сообщением «Hello, World!».

Наше приложение теперь способно отправлять текстовые сообщения. Следующим шагом естественно будет научить его совершать телефонные звонки.

Сначала нам нужно импортировать еще две вещи из библиотеки Twilio. Добавьте следующие строки ниже остальных операторов импорта:

Наш новый метод будет называться makeCall. Вставьте следующий код в ваш файл **GreetingController.java** ниже метода sendSMS.

Этот метод похож на метод sendSMS выше, только вместо объектов Message и MessageFactory мы используем объекты Call и CallFactory. Также вместо текста сообщения нам нужно включить URL, к которому Twilio может обратиться для получения инструкций TwiML для исходящего звонка. Ознакомьтесь с документацией Twilio по совершению звонков, чтобы лучше понять, почему мы это делаем.

Снова нам нужно изменить наш метод greeting, чтобы вызывать метод makeCall вместо sendSMS. Обновите этот код следующим образом:

Здесь мы просто закомментировали вызов метода sendSMS и вызываем makeCall вместо него.

Перезапустите ваш сервер еще раз и снова перейдите по адресу http://localhost:8080/greeting. На этот раз вы должны получить телефонный звонок с классической видеоигровой музыкой.

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

Снова откройте **GreetingController.java**. Мы изменим метод greeting, чтобы позволить пользователю указать, хочет ли он получить звонок или сообщение, а также номер телефона, на который нужно позвонить или отправить сообщение. Замените весь метод greeting следующим кодом:

Здесь происходит много нового:

Эти первые две строки после заголовка метода — это два параметра запроса, которые мы добавляем. Они идентифицируются аннотацией @RequestParam. Аннотация @RequestParam используется для привязки параметров строки запроса к параметрам метода greeting. В данном случае мы привязываем параметр запроса «mode» к строке mode.

Мы также устанавливаем для этого параметра значение required равным false, что означает, что строка запроса не требует обязательного указания mode. Если он не указан, будет использоваться значение по умолчанию «text».

Аналогично, мы привязываем параметр запроса «number» к строке number. Этот параметр *является* обязательным. Если мы не включим его в строку запроса, мы получим ответ 400 (Bad Request).

Последний параметр — это новый объект Model, который мы называем model. Эта модель позволяет данным из контроллера отображаться в представлении, как обсуждалось во введении.

Следующие две строки добавляют значения наших двух параметров запроса, mode и number, в нашу модель, чтобы они могли быть доступны нашему представлению greeting.

Здесь у нас есть простая логика, которая проверяет, какое значение было установлено для нашего параметра запроса mode, и реагирует соответствующим образом. Два возможных значения для mode будут «call» или «text». Если установлено «call», будет вызвана функция makeCall. Если установлено «text», будет вызвана функция sendSMS. В обоих случаях будет передан параметр запроса «number».

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

Для sendSMS:

Для makeCall:

Конструкция th:text может показаться вам новой. Это наш первый взгляд на шаблон представления в Spring MVC.

Существует множество различных шаблонизаторов, которые можно использовать с Spring. В этом посте мы используем thymeleaf, который используется в руководстве «Spring MVC Getting Started». Нам не нужно беспокоиться об установке thymeleaf, так как он уже включен в репозиторий, который вы клонировали.

th:text указывает представлению отображать последующие значения как обычный текст.

Синтаксис ${ } используется thymeleaf для получения данных из модели и отображения их в представлении. Если у вас есть опыт работы с JavaScript, это может напоминать синтаксис шаблонизатора Handlebars. Имена переменных внутри фигурных скобок должны совпадать с именами атрибутов, которые мы добавили в нашу модель в GreetingController.

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

«Ваше сообщение отправляется на номер 5555555555.»

или

«Ваш звонок отправляется на номер 5555555555.».

Сохранив все эти изменения, перезапустите ваше приложение. Мы можем протестировать нашу функциональность SMS, перейдя по адресу http://localhost:8080/greeting?mode=text&number=5555555555. Замените параметр number вашим номером мобильного телефона. Вы должны получить то же текстовое сообщение, что и раньше.

Затем перейдите по адресу http://localhost:8080/greeting?mode=call&number=5555555555. Если вы получили телефонный звонок, поздравляю! Мы закончили работу над приложением.

Это лишь малая часть того, что может предложить Spring MVC и как его можно использовать с Twilio. Обязательно обратитесь к документации Twilio, а также к документации Spring MVC, чтобы узнать, что еще возможно.

Spring MVC имеет много общего с другим фреймворком под названием Tomcat. Если вас интересует создание большего количества приложений на Java, ознакомьтесь с моим недавним постом о создании автономной голосовой почты с использованием Tomcat и Twilio.

Если у вас возникли какие-либо проблемы или есть отзывы об этом руководстве, не стесняйтесь оставлять комментарии ниже или свяжитесь со мной в Twitter @brodan_ или по электронной почте chranj@twilio.com.