Демо-ссылка:
http://www.societyconnect.tk/login Admin Username : admin Admin password : admin Resident Username : A001 Resident Password : open@A001
Введение :
В последнее время я хотел создать приложение с использованием Angular 2, поэтому просто начал с простого варианта использования для выполнения сквозной функции внешнего интерфейса в Angular. Размышляя, с чего начать, я обнаружил, что могу создать приложение для управления квартирами с помощью Angular 2. Бэкэнд построен моим другом в Node.js и Postgres, и вы можете связаться с ним для получения бэкэнд-кода (https://github.com/ mcsekar12 )
Вовлеченные концепции Angular
- Аутентификация с использованием Angular 2
- Ролевая аутентификация с использованием Angular 2
- HTTP-методы, такие как GET, POST, DELETE, UPDATE
- Структура папок для большого приложения в Angular 2
- Включить диаграммы Angular 2
- Добавьте Toastr и Modal с помощью Bootstrap 4
- Интеграция платежных шлюзов с использованием Instamojo
- Обмен данными с помощью параметров маршрута между родителем и дочерним элементом
- Добавление файла конфигурации для конечных точек API
- Передача данных между родительским и дочерним компонентами (переключение меню в мобильном представлении)
- интеграция ng2-smart-table
- Создание приложения с использованием интеграции SASS в Angular 2
Сказка :
Давайте создадим сценарий использования и историю. Нам предстоит создать приложение для управления квартирами. На повестке дня стоит решить проблему двух партий или ролей. У каждой квартиры есть администрация или сообщество менеджеров и владельцы / жители.
Давайте обсудим, какие функции должны быть в этом приложении в сообществе администраторов и менеджеров.
- Администратор должен иметь возможность создавать владельца / резидента, вводит все входные данные, такие как имя, номер блока, номер квартиры, номер мобильного телефона и идентификатор резидента. (здесь идентификатор резидента выступает в качестве первичного ключа)
- Администратор при создании владельца может добавить парковочное место, назначенное владельцу
- Просмотр всех владельцев и возможность редактировать и удалять конкретного владельца / жителя (Просмотр отображает номер жильца, номер квартиры и т. Д.)
- Собирать все обслуживание со статусом, который владелец заплатил или ожидает. Должен иметь доступ для отправки личного сообщения конкретному владельцу. Администратор также должен иметь возможность видеть панель показателей с общим количеством владельцев, собранной суммой и т. Д.
- В каждой квартире есть удобства, и владелец может запросить доступ к ним для своих гостей. После того, как владелец отправит запрос, администратор должен увидеть все запросы
- Владельцы / жители подают жалобы, администратор должен иметь возможность видеть все жалобы с подробной информацией о том, кто их отправил, с заголовком, а также с подробностями и данными.
- Доска объявлений позволяет администратору отправлять сообщения всем владельцам / жителям. Например, (обо всех событиях, происходящих в обществе, можно делиться со всеми владельцами)
- Панель инструментов для просмотра всех платежей, владельцев, жалоб и запросов в режиме графика. Полная панель управления с графиком и метриками
Точно так же у каждого собственника / жителя есть особенности, давайте обсудим, что еще нужно добавить.
- Владельцы / жильцы смогут забронировать удобства, имеющиеся в квартире.
- Владельцы / жильцы могут оплачивать обслуживание и проверять историю платежей
- Для их гостя может быть сделан запрос на доступ к клубу с вводом некоторых основных входов.
- Владелец / житель может подать жалобу, для чего требуется название и подробное описание жалобы.
- Вся общая информация, которой поделился администратор, видна на доске объявлений. Владелец видит дату публикации контента.
- Возможность для владельца продать свое парковочное место, когда он заинтересован, поскольку владелец может продать свое парковочное место, бронирование места также может быть выполнено с историей
Функции :
- Создается страница поиска, на которой указывается место для парковки, и владельцы могут выбрать соответствующие места и произвести оплату.
- У всех владельцев / жильцов есть свои парковочные места. И его можно продать другим пользователям. Временной интервал разделен на 4 интервала.
- В зависимости от выбранного места на парковке с владельца будет взиматься плата, и статус изменится на «Забронировано».
- Выплаты производятся на инстамоджо. Я использовал фиктивную тестовую карту для интеграции платежа
- Администратор контролирует все бронирования.
- Состоит из полной панели инструментов с метрикой и графиками, здесь используется график Vue, который имеет chart.js
- Владелец / житель может производить ежемесячное техническое обслуживание, и его можно отслеживать.
- Включено гораздо больше функций, вы можете поиграть с ним после загрузки.
Скачать исходный код
Чтобы лучше понять, скачайте исходный код с GitHub и выполните следующую команду, чтобы запустить приложение. Надеюсь, это поможет кому-то, кто планирует создать что-то подобное или запустить кикстарт.
Этот проект построен с использованием Angular Cli (https://cli.angular.io/) и убедитесь, что вы установили Angular Cli глобально. После загрузки кода с Github выполните следующие действия в команде
cd project npm install ng serve ( run on localhost:4200 )
