Введение
В наше время автоматизация и информатизация плотно вошли в жизнь каждого. Появляется все больше и больше автоматизации для различных сфер деятельности. Теперь поливать растения и регулировать температуру в оранжерее можно и с помощью мобильного приложения, которое Вам необходимо разработать.
Вам предстоит разработать интерфейс системы умной оранжереи.
Система должна быть адаптивная, открываться на телефоне, планшете и компьютере без проблем. Мы повседневно пользуемся множеством гаджетов в своих домах. Поэтому приложение должно быть удобным и продуманным, чтобы пользователь хотел им пользоваться.
Вам предстоит разработать дизайн, сверстать его и подключить к готовой серверной части. Задача сложная, но вы один из лучших разработчиков, поэтому вы справитесь!
Технологии этого задания: HTML5, CSS3, JavaScript, VueJS, React, Граф. Дизайн
Данное задание рассчитано на 6 часов и состоит из 2-ух модулей по 3 часа. Распределите свое время таким образом, чтобы успеть выполнить все поставленные задачи.
Вам необходимо реализовать функционал сервиса. Серверная часть интерфейса в формате REST уже представлена. Также вы получите Postman-коллекцию с запросами к серверной части для простоты работы.
Описание проекта и задач
Ваша задача – разработать дизайн приложения, которым удобно пользоваться на смартфонах с разрешением 375х812px.
Несмотря на то, что основная целевая группа будет пользоваться вашим приложением с мобильных устройств, вы должны предусмотреть возможность удобного пользования с планшетов и компьютеров. Поэтому ваша верстка должна быть адаптивна и корректно открываться со следующих устройств:
● Мобильные телефоны с разрешением 375x812px (IPhone X);
● Планшеты с разрешением 1366х1024px (IPad Pro);
● Компьютеры с шириной экрана от 1600px.
В приложении должны быть реализованы следующие экраны:
● Экран авторизации
o Поле для ввода логина;
o Поле для ввода пароля;
o Кнопка входа.
● Домашний экран
o Доступные типы растений по группам, каждая группа растений оранжереи должна иметь название и изображение;
o Избранные устройства и датчики.
● Экран группы растений
o Название группы (однолетники/многолетники, кустарники/цветы и т.п.);
o Устройства и датчики группы.
● Экран устройств и датчиков
o Все устройства и датчики. Каждое устройство должно отражать свое состояние, а датчик показывать свое значение. Все устройства и датчики должны иметь название.
● Экран макросов
o Уже имеющиеся макросы, с названиями и возможностью удаления;
o Кнопка для создания нового макроса.
Под макросом понимается набор команд (инструкция, сценарий), которые должны быть выполнены при его запуске.
ПЕРВЫЕ 3 ЧАСА
За первые 3 часа вам необходимо разработать дизайн и сверстать нарисованные экраны.
Сохраните разработанные дизайны в директорию design под следующими именами:
● Экран авторизации – mobile_login.png
● Домашний экран – mobile_home.png
● Экран группы растений – mobile_group.png
● Экран устройств и датчиков – mobile_devices.png
● Экран макросов – mobile_macros.png
Для общей демонстрации всех экранов вам предоставляется Mockup с 5 экранами Iphone X. Используйте данный мокап и сохраните результат в папке design с именем mobile_mockup.png
Сохраните все исходные файлы в директорию sources в папке design. Под исходными файлами понимаются файлы с разрешениями.ai,.psd,.eps и т.п.
Для демонстрации дополнительных состояний, например, интерактивности или анимации сохраните дополнительные файлы под следующими именами:
● Экран авторизации – mobile_login_2.png, mobile_login_x.png …
● Домашний экран – mobile_home_2.png, mobile_home_x.png …
● Экран группы – mobile_group_2.png, mobile_group_x.png …
● Экран устройств и датчиков – mobile_devices_2.png, mobile_devices_x.png …
● Экран макросов – mobile_macros_2.png, mobile_macros_x.png …
Для общей демонстрации всех экранов вам предоставляется Mockup с 5 экранами Iphone X. Используйте данный мокап и сохраните результат в папке design с именем mobile_mockup.png
Сохраните все исходные файлы в директорию sources в папке design. Под исходными файлами понимаются файлы с разрешениями.ai,.psd,.eps и т.п.
Для демонстрации дополнительных состояний, например, интерактивности или анимации сохраните дополнительные файлы под следующими именами:
● Экран авторизации – mobile_login_2.png, mobile_login_x.png …
● Домашний экран – mobile_home_2.png, mobile_home_x.png …
● Экран группы – mobile_group_2.png, mobile_group_x.png …
● Экран устройств и датчиков – mobile_devices_2.png, mobile_devices_x.png …
● Экран макросов – mobile_macros_2.png, mobile_macros_x.png …
Во второй части вам необходимо разработать веб-интерфейс приложения «умная оранжерея», которое отражает состояние системы.
ПОСЛЕДНИЕ 3 ЧАСА
Во второй части вам необходимо разработать веб-интерфейс приложения «Умная оранжерея», которое отражает состояние системы.
В умной оранжерее поддерживаются следующие виды устройств:
| Наименование устройства | Состояния |
| Подача воды для полива | open/close |
| Подача удобрения | open/close |
| Открытие окошка оранжереи | open/close |
| Включить освещение | on/off |
| Датчик температуры | от -100 до +100 |
| Термостат | от +10 до +30 |
Для взаимодействия с системой вам предоставлено следующее API:
Авторизация
Method: POST
URL: https://wsr.ru/clever-greenhouse/api/login
Body:
● login
● password
Response (OK):
● token
Response (NOT OK):
● errors
Получение списка групп
Method: GET
URL: https://wsr.ru/clever-greenhouse/api/objecthoz
Response - массив объектов, каждый объект содержит следую поля:
● id
● name
● photo
Получение информации о группе растений оранжереи
Method: GET
URL: https://wsr.ru/clever-greenhouse/api/api/objecthoz/<id>
Response - объект, который содержит следующие поля:
● id
● name
● photo