Перевод: Building a Hotel Booking App with Ionic 2, MongoDB & Node

В этом учебнике мы собираемся создать полно функциональное приложения Ionic 2 для бронирования комнат в отеле, которое позволить пользователя:

  • Искать комнаты на нескольким критериям
  • Просматривать комнаты которые не забранированы на определенные даты
  • Просматривать описание комнат
  • Бронировать комнаты (которые станут недоступны для бронироания другим пользователям)

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

hotels-allscreens

До того как мы начнем

В этом уроке будет достаточно большое количество кода, поэтому мы не будем подробно описывать каждый шаг. Вместо этого мы сфокусируемся на «интересных» местах. Если у вас возникнуть сложности с понимаем каких базовых концепций советуем прочитать наш предыдущий урок.(http://www.joshmorony.com/building-a-review-app-with-ionic-2-mongodb-node/)

1. Создание Базы данных с MongoDB

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

Следующие шаги описаны для Mac, и будем использовать brew. Если у вас не установлен brew установите его следуя инструкции(http://brew.sh/). Если у вас Windows, вы можете использовать следующую инструкцию(https://docs.mongodb.com/manual/tutorial/install-mongodb-on-windows/) для установки MongoDB.

Вы можете установить MongoDB следующей командой:

и запустить сервис:

Сейчас создадим новую MongoDB базу данных и подключимся к ней следующей командой:

Вы сможете взаимодействовать с базой данных hotels через терминал, мы будем взаимоейдствовать в нашем приложение через API.

2. Создание нового Ionic 2 приложения.

Нам нужно в начале создать Node сервер до того как мы приступим к созданию фронтенда, мы сохраним код сервера внутри нашего Ionic 2 проекта для того что бы хранить весь код в одном месте, поэтому сначало сгенерируем код проекта.
Запустим следующую команду для создания нового Ionic 2 приложения:

Так же создадим несколько страниц и провадера которого задействуем попозже.

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

3. Создание бекэнд API с Node и Express

Мы собираемся создать код нашего Node сервера внутри Ionic 2 проекта что бы сохранять весь код в одном месте.

Создайте новую папку с названием app/server .
Создайте файл server.js внутри папки server и добавте туда следующий код:

После установки всех зависимостей и подключения к базе данных MongoDB, мы определяем модель с помощью Mongoose:

Это представляем структура наших данных, в нашем случае это детали наших комнат. Большинство из этого понятно без объяснений, мы просто определили некоторые поля описывающие комнату такие как количество спален, типы комнат и в конце мы определили список названный reserved. Его мы используем для определения свободных комнат. Как только комната бронируется мы добавляем запись в этот список который содержит интервалы бронированных дат. Нам нужно будет сделать сравнивание этих дат с датами введенными пользователем.

Далее мы генерируем тестовые данные:

В приложение используемом в продакшине вам надо будет удалить этот кусок. Для тестирования нашего приложения мы будем генерировать порядка 150 комнат. Так мы бронируем эти комнаты на три интервала данных.

Каждый раз когда вы перезапускаете node сервер, все данные будут удаляться и генерироваться новые, поэтому вам не нужно заботится о удаленных тестовых данных при использование приложение. Если вы хотите запретить удаление, просто удалите вызов Room.remove({}).

Последняя вещь которые мы сделали в коде сервера это определили маршруты которые будут служить как API приложения:

Первый маршрут /api/rooms и при наличие POST критериев поиска у этого URL он вернет все свободные комнаты соотвествующие поисковым фильтрам. Мы использовали find() с нашей моделью для запросов к данным. Простые фильтры которые мы использовали:

которые будут искать документы по типу и количеству спален, но также мы использовали более продвинутые операторы $gt и $lt. Они означают “больше чем” и “меньше чем”, поэтому мы можем делать запросы на проверку количество гостей на максимально возможное для комнаты, и входит ли стоимость за ночь в указанный интервал.

Более сложная часть запроса:

Это запрос выясняет забранирована ли комната в течение указанного периода времени. Использование $lt и $gt для проверки интервала дат, не будет сюрпризом, но мы так де использовали $elemMatch и $not. Использование $elemMatch для того чтобы запрос был запущен для каждого элемента в списке зарезервированных дат, и он так же просматривает результат на пересечение с выбранными датами и существующими бронями. Затем мы инвертируем с оператором $not для того что бы получить результат где этого не происходит.

Обратите внимание так как нас интересует только даты, а не время, мы сохраняем дату как простую строку (которую мы и будет использовать для сравнения дат).

Второй маршрут /api/rooms/reserve позволяет нам найти существующие комнаты, и резервировать новые комнаты и добавлять эти резервации в список зарезервированных комнат.

Сейчас сервер готов к запуску и запустим его командой:

4. Создание сервиса комнат

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

Измените rooms.ts следующим образом:

Обе эти функции создают post запросы к соотвествующему API и возвращают объект promise который резолвит результаты запроса к серверу. В действительности здесь ничего интересного не происходит, мы просто передаем данные полученные с наших страниц.

После создания нашего провайдера, давайте инжектруем его в приложение.
Измените app.module.ts следующим образом:

5. Создание страницы Home

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

Измените home.html следующим образом:

Измените home.ts следующим образом:

6. Создание страницы поиска

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

Измените search.html следующим образом:

Мы включили два компонента <ion-datetime> позволяющие пользователю выбрать интервал дат. Так же мы использовали <ion-range> со свойством dualKnobs для выбора верхней и нижней границы цен.

Для всех полей мы использовали [(ngModel)] для привязки их с полями в определение класса. Когда пользователь кликает на кнопку Find Rooms, запуститься функция findRooms(), которую мы сейчас создадим.

Измените search.ts следующим образом:

Мы определили несколько переменных и задали им начальное значения. Так как нам нужно что бы компоненты <ion-datetime> имели значения по умолчанию текущая дата, мы сгенерировали объект Date и конвертировали его в строку ISO.

Функция findRooms просто создает объект содержащий все данные указанные в форме поиска и отправляем их в функцию getRooms провайдера Rooms. И сразу отображаем сообщения процесса загрузки (loading), и как только провайдер вернет promise содержащий данные мы возвращает ответ на страницу результат, или если результат поиска не будет выводим сообщение.

7. Создание страницы Results

Следующая страница которую нам нужно создать это страница отображающая результат поиска. Эта страница будет отображать все комнаты соотвествующии поисковым критериям и позволит пользователю выбрать одну из них:

Измените available-rooms.html в соотвествие со следующим:

Этот шаблон отображает список найденных результатов описка комнат. Мы добавили функцию (click) для выбора одной комнаты из списка, она запустит функцию bookRoom.

Измените available-rooms.ts следующим образом:

8. Создание страницы Booking

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

Измените booking.html следующим образом:

И снова, это достаточно простой шаблон. Мы просто отображаем значение переменных и добавляем кнопку запускающую процесс бронирования на сервере.
Измените booking.ts следующим образом:

Мы снова создали объект Date, только для отображения даты для пользователя (это лучше чем отображать ISO строку). В функции book, мы создали объект newReservation содержащий детали резервирования которого мы хотим сделать. Нам нужно _id для поиска комнаты на сервере, и дата заселения и дата выезда.

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

9. Стилизуем

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

Измените variables.scss следующим образом:

Измените app.scss следующим образом:

Измените available-rooms.scss следующим образом:

Измените booking.scss следующим образом:

Измените home.scss следующим образом:

Измените search.scss следующим образом:

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

It's only fair to share...Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on VK