Перевод: https://www.joshmorony.com/building-a-review-app-with-ionic-2-mongodb-node/

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

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

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

Установим MongoDB следующей командой:

и затем запустим:

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

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

Создадим Ionic 2 проект.

Так же создадим несколько дополнительных страниц (которые мы будем использовать для обзоров) и провайдера (через которого мы будем взаимодействовать с серверным API).

После создания новых компонентов, нужно убедиться что они так же добавлены в файл app.module.ts.

Файл src/app/app.module.ts to должен содержать следующее:

3. Создание Backend API с Node и Express

Теперь создадим сервер. Для этого создайте новую папку вне нашего проекта Ionic 2. Например review-srv. В этой папке создайте файл package.json с содержимом:

Mongoose это обертка которая помогает взаимодействовать с MongoDB, а Express мы используем для создания маршрутов для нашего API.

Остальные зависимости будут помогать нашему серверу. Body Parser нужен для обработки POST запросов, Method Override обеспечивает поддержку DELETE и PUT, Morgan будет отображать debug сообщения, и Cors нужен для CORS (Cross Origin Resource Sharing).

Для установки всех этих зависимостей введите следующую команду:

Сейчас создайте файл server.js, который будет запускаться вместе с node для запуска нашего сервера. Его содержимое:

Здесь происходит достаточно много чего, но все это можно разбить всего на пять секций:

  • Начальная установка
  • Конфигурирование
  • Модель
  • Маршруты
  • Запуск

Во первых нужно установить все зависимости для сервера (такие как Mongoose и Express), затем сконфигурировать, наиболее важная строка:

mongoose.connect(‘mongodb://localhost/reviewking’);

которая устанавливает соединение с базой данных. Далее мы создали модель Review в который мы будем сохранять объекты обзоров – самы объекты будут состоять из заголовка (title), описания (description), и рейтинга (rating).

Далее мы установили маршруты, которые собственно и создают наше API. Для этого мы использовали Http сервис:

GET запрос к /api/reviews вернет все обзоры
POST запрос к /api/reviews создаст новый обзор
DELETE запрос к /api/reviews/{{review_id}} удалит выбранный обзор

И последние мы запустили сервер на порту 8080 командой:

app.listen(8080);

Для запуска созданного файла нужно в командной строке набрать:

node server.js

Теперь сервер будет доступен через браузер по адресу:

http://localhost:8080

4. Создание фронтенда с Ionic 2

Создания провайдера обзоров

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

Измените файл src/providers/reviews.ts следующим образом:

Мы создали три метода: getReviews, createReview, и deleteReview. Каждый из них обращается к соотвествующему url на сервере. В функции getReviews, мы отправляем запрос к /api/reviews и получаем все наши обзоры. Функция createReview принимаем объект review как параметр и затем отправляет post запрос к /api/reviews (где мы создаем новую запись в базе данных). И последняя функция deleteReview принимает id (которая автоматически создается MongoDB) соотвествующего обзора, и затем отправляет запрос к серверу на удаление выбранного обзора.

Создание страницы добавления обзора

Сейчас создадим страницу ‘Add Review’. На этой странице пользователю нужно будет ввести title, description, и rating используя компонент Ionic range.

Измените файл src/pages/add-review-page/add-review-page.html как показано ниже:

Так же измение файл src/pages/add-review-page/add-review-page.ts следующим образом:

Мы не пока не сохраняем данные здесь мы только принимает то что ввел пользователь и переходим назад на станицу HomePage через функцию dimiss(). Настроим HomePage страницу. Модифицируйте файл src/pages/home/home.html в соотвествие с листингом ниже:

Этот шаблон чуть более интересный чем предыдущий. Здесь мы проходим по всем обзорам используя *ngFor (мы получим коллекцию обзор с сервера ниже). Для каждого обзора мы отображаем автоматически сгенерированный аватарку от adorable.io основанную на заголовке title, сам заголовок и описание. Так же отображаем счастливый смайлик если рейтинг 50 или выше, и печальный смайлик если рейтинг 50.

Так же обратите внимание что мы использовали компонент <ion-item-sliding>, который будет отображать кнопку удаления для каждого обзора при сдвиге его влево.

Модифицируйте файл src/pages/home/home.ts следующим образом:

Этот класс реализует функции вызываемые в шаблоне home. Функция addReview запускает страницу модального окна Add Review, и при закрытие окна в случае получения данных вызывается функция createReview в сервисе Review. Она добавить новый обзор в MongoDB, и так же этот обзор будет добавлен в локальную коллекцию обзоров для ее немедленного отображения без перезагрузки данных.

Для функции deleteReview, мы передаем id выбранного обзора. В начале мы удаляем выбранный обзор из локльной коллекции а затем удаляем с сервера.

В завершение, добавить немного стиля в наше приложение.

Измените $background-color в theme/variables.scss

$background-color: #74efc4;

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

Измените add-review-page.scss в соотвествие со следующим:

И это все! Ваше приложение (как только вы добавите данные в нем) должно выглядеть следующим образом:

reviewking

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