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

Если вы пропустили часть 1, то, пожалуйста, вернитесь и прочитайте сначала эту статью :) Вы можете найти ее здесь.

Полную документацию по ONEm Framework можно найти здесь.

В части 1 мы создали простое микроприложение, которое позволяло пользователю просматривать три названия фильмов. Однако, если вы не хотели перечислять только эти три фильма, микроприложение было не очень хорошим :)

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

Весь код для этого можно найти на Github. Я назвал ветки часть 1 и часть 2, чтобы вы могли видеть, что и где изменилось.

Во-первых, мы изменим целевую страницу, чтобы запрашивать у пользователя поисковый запрос при запуске приложения, например:

Это означает, что нам нужна форма. Итак, давайте продолжим и обновим наш файл landing.pug в папке /app_api/views:

Мы используем тег формы, как и в любой веб-форме, и используем атрибуты действия и метода, чтобы связать маршрут с нашим бэкэндом. Когда пользователь отправит форму, ONEm Framework выдаст HTTP GET /api/movies/search.

Несколько замечаний о формах.

  1. Каждая форма должна содержать хотя бы один тег section. Каждый раздел описывает элемент формы вместе с тегом input как дочерний элемент. Поддерживается множество типов форм, полный список поддерживаемых типов вы можете найти здесь. Мы просто используем базовый тип text для нашего примераe.
  2. Поле формы может быть помечено как обязательное, чтобы пользователь был вынужден указать значение, мы использовали обязательное свойство в нашей форме в теге раздела.
  3. Когда пользователь отправляет форму, тело запросабудетсодержать имя и значение поля в виде объекта, например:
{
  "query_text": "mad max"
}

Итак, теперь, когда мы создали нашу форму, нам нужно создать для нее связанный маршрут в бэкэнде. Мы возьмем пользовательский query_text, а затем воспользуемся API themoviedb.org, чтобы получить список фильмов, соответствующих нашему запросу. Затем мы отправим список обратно пользователю в виде списка фильмов:

Примечание. Я переместил все вызовы API themoviedb.org в отдельный модуль в /app_api/movieApi/index.js, чтобы все было чисто.

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

let rootTag = loadTemplate(views.VIEW_MOVIE_LIST, { movies: data })

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

Нам также нужно создать представление для этого экрана.

Таким образом, наш объект представлений в /app_api/routes/index.js должен будет ссылаться на новый шаблон мопса результатов поиска:

const views = {
   ...
   VIEW_MOVIE_LIST: `${VIEWS_PATH}movieList.pug`,
}

А вот movieList.pug, которыйбудетотображать меню для пользователя

Обратите внимание, что мы также проверяем здесь в представлении, действительно ли у нас есть какие-либо результаты поиска для отображения. Если movie.length равно нулю (ложь), то вместо этого мы выдадим сообщение «Результаты не найдены».

Примечание. Я мог бы проверить пустой список фильмов в фактическом коде обработчика запроса вместо мопса (и дать совершенно другой ответ), это вопрос личных предпочтений. Я оставил это таким образом, чтобы упростить пример.

Когда пользователь выбирает фильм, ONEm Framework вызывает связанный с фильмом маршрут, указанный этой строкой в ​​movieList.pug:

a(href='/movie/'+movie.id) #{movie.original_title}

В этом случае ONEm Framework выдаст HTTP GET, например, для /movie/1234.

Хорошей новостью является то, что мы уже создали представление для этой страницы в части 1 этого руководства. Я только что переименовал кнопку «Главное меню» в «Повторить поиск».

Не забывайте, что параллельно с написанием кода вы также создавали приложение, способное работать с SMS с точно таким же кодом. Никаких изменений в коде не требуется :)

Идите вперед и попробуйте интерфейс SMS, используя вкладку «Тестовый клиент» на портале разработчика.

Это для части 2. Пожалуйста, зарегистрируйте учетную запись на Портале разработчиков ONEm, это бесплатно.

Весь код для этого туториала можно найти здесь.

Следите за новыми статьями, спасибо за чтение и удачного кодирования.