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.