TL;DR

Загрузите репозиторий GitHub.
Посмотрите демонстрацию.

вступление

Представьте, что нам нужно приложение для управления парковкой с небольшим количеством требований - парковочные места нужно чистить и поддерживать в рабочем состоянии. Места будут сдаваться в аренду или в собственности, и клиенты должны будут платить за услугу. Все эти данные вместе с информацией о клиентах необходимо будет хранить для быстрого доступа. В этой статье я покажу вам, как создать это простое приложение для управления данными с помощью Cosmic JS.

Подготовка бэкенда

Сначала зарегистрируйтесь в Cosmic JS и создайте собственное ведро.

После этого нам нужно создать несколько типов объектов: один для описания места парковки, а другой - для события, произошедшего на этом месте. Это может быть один из трех типов: оплата, обслуживание или уборка.

Для этого в корзине нажмите «Добавить тип объекта».

Каждый объект имеет встроенные свойства, такие как заголовок, заголовок и содержимое. Обычно этого достаточно, но давайте конкретизируем наши типы объектов. Метаполя спешат на помощь!

Добавьте список, чтобы сохранить номер этажа, и заполните его значениями «Земля», «Первый» и «Второй».

После этого создайте другой тип объекта, отметьте событие. Добавьте тип метаполя («Оплата», «Обслуживание» и «Очистка») и дату события (как дата, введенная в метаполе). Не забудьте добавить еще одно поле с типом «Объект», чтобы указать на родительскую точку.

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

Они управляются настройками - ›Страница основных настроек.

Хорошо, наш бэкэнд готов. Наше приложение будет использовать для работы мощный Cosmic JS API, и все, что нам нужно, - это написать одностраничное приложение. Angular 2 - хорошее решение для этого.

Пусть код качается!

Прежде, чем мы начнем.

Во-первых, нам нужно установить NodeJS и его диспетчер пакетов NPM (что удивительно, он остается для NodeJS Package Manager). Вот довольно полезная ссылка: https://nodejs.org/ru/download/package-manager/

Установите Angular CLI (интерфейс командной строки). Взять отсюда: https://angular.io/guide/quickstart

Также посмотрите код здесь: https://github.com/cosmicjs/parkingcare2/

и просмотрите демонстрационное приложение здесь: https://parkingcare.cosmicapp.co/

Начиная

Теперь откройте консоль / командную строку / все, что вам нужно для запуска команд и создания папки, войдите в нее и введите

New ParkingCare. Хорошо, у нас установлен образец проекта.

Все люди были в восторге от Bootstrap много лет назад, так что теперь он повсюду и выглядит скучно. Возьмите свежий и хрустящий каркас Bulma. Об этом можно прочитать здесь: https://bulma.io/

Еще одна замечательная особенность пользовательского интерфейса - это Font Awesome. Проверьте это здесь, если вы еще не сделали: https://fontawesome.com/

Перейдите в Parkingcare / src / index.html и добавьте ссылки на Bulma и Font Awesome.

Посмотрим, как это выглядит сейчас: запустите ng serve - open

В приложении папку создайте еще три: модели, службы и компоненты.

Модели данных

Создайте модели данных для нашего приложения: войдите в / models и введите ng generate class entity, ng generate class spot, ng generate class spotevent. Поскольку TypeScript поддерживает наследование всего общего в классе сущности и сохраняет определенные данные в производных классах: Spot и SpotEvent

Создайте еще один класс с именем Settings и разместите в нем эти данные. Эти данные будут служить файлом конфигурации приложения.

Услуга

Теперь нам нужно создать сервис - ту самую штуку, которая будет за нас качать API-вызовы. Перейдите в папку / services и введите ng g service data («g» означает «генерировать»). Наполняем чуть позже.

Компоненты

Теперь перейдите к / components и создайте несколько компонентов:

Панель управления (панель компонентов ng g) - для главной страницы

Spotcard (ng g c dashboard) - для конкретной страницы Spot.

Spotcardedit (ng g c spotcardedit) - форма точечного редактирования

Eventcardedit (ng g c eventcardedit) - форма редактирования spotevent

Маршрутизация

Теперь нам нужно добавить маршрутизатор, чтобы объяснить системе, какой компонент следует использовать для точного URL. Хорошее объяснение расположено здесь https://angular.io/tutorial/toh-pt5

Нам нужно обслуживать несколько типов запросов:

  • По умолчанию нам нужно показать панель инструментов
  • Создайте новое место / createdpot /
  • Отобразить выбранное место / пятна /: spot_slug (например, / пятна / 101)
  • Редактировать выбранное место / место /: spot_slug / edit
  • Добавить новое спотовое событие / spot /: spot_slug / addevent
  • Нам не нужен отдельный список событий, его покрывает спотовая страница.
  • Все остальные запросы будут перенаправлены в корень

В модуле app / app-routing.module нам нужно назначить компоненты путям.

Хорошо, мы создали маршрутизацию, посмотрим, как она выглядит. Снова запустите ng serve - open. Не вижу изменений. Это потому, что нам нужно добавить тег маршрутизатора в app.component.html.

Отрегулируйте его и запустите ng serve - open. Теперь это работает.

UI

Пришло время создать пользовательский интерфейс. Наша точка входа, приборная панель, покажет пользователю два блока:

  • Обзор списка спотов
  • Последние события произошли

Перейдите в app / components / dashboard / dashboard.component.html, создайте там макет из двух столбцов (давайте дадим две трети обзору) и поместите теги компонентов: app-spotlist и app-eventlist. Но теги компонентов не будут работать без данных. Давайте передадим туда несколько Объектов, «споты» для спотового списка и «споты» для последних событий.

Получение данных

Эти объекты описаны в dashboard.component.ts. Нам нужно углубиться в это.

Перейдите в /services/data.service.ts и создайте там несколько функций:

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

Начнем с простого: получение списка мест. Мы будем использовать RxJS (http://reactivex.io/rxjs/)

Во-первых, составьте правильный URL-адрес для вызова Cosmic JS API.

После этого вызовите API методом GET и верните вещь, называемую Observable.

Сделайте аналогично списку событий.

И сделаем финальную функцию getSpots ()

return Observable.forkJoin (this.getSpotData (), this.getSpotEvents ());

Когда оба списка будут готовы, он вернет все данные.

Хватит, вернемся к dashboard.component.ts

В рамках ngOnInit мы подписываемся на сервисную функцию, и при получении данных мы выполняем некоторую трансформацию данных: переупаковываем полученные данные в наши объекты «пятна» и «spotEvents», которые были описаны ранее.

Поскольку наши объекты раздуваются, они должны отображаться на странице. Нам нужно добавить еще пару компонентов: список внимания и список событий (список событий компонента ng, список событий компонента компонента ng).

В файле .ts компонента установите @Input как список объектов (чтобы можно было передать его компоненту),

В файле .html опишите список, используя * ngFor = ”let spot of пятна” для итерации объектов в переданном списке.

Для списка событий он очень похож.

Навигация

Наши действия, такие как добавление или переход к отображаемой странице, представлены в виде ссылки, но с параметром routerLink вместо href.

Также есть несколько обработчиков нажатия кнопок. Они настраиваются способом (click) = ”func (param)”.

Создание данных

Чтобы создать объект, нам нужно отправить правильно сформированный json в Cosmic JS API с ключом записи, переданным в полезной нагрузке. Зайдем в services / data.service.ts и создадим функцию для обслуживания создания новых спотов.

По умолчанию требуется передать заголовок и type_slug. Поскольку у нас есть более сложный объект, нам также необходимо передать метаданные и write_key в объект полезной нагрузки.

Не забудьте добавить заголовок Content-Type: application / json. Без него API не сможет распознать полезную нагрузку. Отправьте его с помощью POST в / add-object и получите новый объект обратно. Это довольно очевидно.

Изменение данных

Чтобы изменить свой объект, вам необходимо отправить другой json-файл в контроллер «edit-object» Cosmic JS API. В этом json вам нужно передать write_key, обновленный слаг объекта, заголовок, контент и все метаполя (событие, если они не изменились). И, конечно же, не забудьте заголовок Content-Type.

Удаление данных.

Поскольку все внутренние объекты являются потомками общего типа Entity, мы можем использовать общую функцию, потому что единственное, что нужно Cosmic JS для удаления объекта, - это его слаг. Вы должны вызвать запрос DELETE к контроллеру «объектов» API. В нашем случае нам также нужно передать write_key, так что вот уловка: мы добавляем json {«write_key»: «»} как параметр «body» к запросу. И это очень хорошо работает.

Перед удалением пятна нам необходимо убедиться, что связанных событий не существует. Итак, мы вызываем функцию, которая проверяет, что никакие события не привязаны к точке. Мы можем показать предупреждение, если пятно не может быть удалено. * ngIf используется для этого

В компонентах / spotcard / spotcard.component.html

И в компонентах / spotcard / spotcard.component.ts

Готов к запуску.

Что ж, теперь нам нужно как-то это развернуть. Cosmic JS предоставляет красивый и довольно простой способ запустить ваше приложение PaaS на основе Dokku. Вам просто нужно перейти в Настройки - ›Развернуть веб-приложение в левом меню, заполнить URL-адрес репозитория и нажать синюю кнопку с надписью« Развернуть в Интернете ».

Что ж, поскольку у нас есть угловое приложение, требуются некоторые дополнительные приготовления.

Чтобы прояснить всю картину, нам необходимо понять следующие утверждения:

  • Наш код должен быть построен (переведен с Angular / TypeScript на Html / JavaScript)
  • Нам нужно установить угловую инфраструктуру, чтобы сделать возможным №1
  • После создания приложения нам нужно запустить небольшой веб-сервер для обслуживания входящих запросов.

Хорошо, давайте немного изменим package.json.

  • Переместите @ angular / cli, @ angular / compiler-cli, typescript и @ types / node из ветки devDependencies к зависимостям.
  • Добавить блок двигателей
  • Добавить экспресс-зависимость
  • Отредактируйте блок «скрипты» следующим образом:
  • Измените строку «start» с «ng serve» на «npm install && node server.js». Он установит все, что требуется для списка зависимостей, и после этого запустит наш крошечный веб-сервер.
  • Добавьте строку «postinstall» с указанием всего пути к ядру angular «ng» и выполните сборку. Эта линия предоставляет здание сразу после завершения установки.
  • Создайте файл server.js в корне папки. Это довольно примитивно: требуется среда Express, установить статическую папку как / dist (это стандартная папка для вывода сборки angular), позволить ей прослушивать порт из переменных среды или стандарта для Heroku 5000. Вот и все.

Вот код server.js

и часть package.json

После этих приготовлений зафиксируйте все в репозитории, перейдите на страницу развертывания (еще раз, Настройки - ›Развернуть веб-приложение) и нажмите« Развернуть в Интернете ». Через некоторое время вы получите электронное письмо от Cosmic JS в качестве подтверждения успешного развертывания. Если нет, вы можете снова проверить эту страницу на предмет журнала ошибок, если таковой имеется.

Вывод.

Теперь, когда вы видите, насколько это просто и уютно, я надеюсь, что вы достаточно взволнованы, чтобы воплотить свои идеи в жизнь с помощью Angular и Cosmic JS.

Эта статья изначально появилась на Cosmic JS.