Тестовое задание: React Native, Front dev middle 1 Тестовое задание
Необходимо написать простое приложение на React Native (далее - RN), которое получало бы список товаров, вариаций, свойств вариаций товара и категорий товаров по сети, выводило бы их на экране и предоставляло возможность добавлять их в корзину и создавать заказ.
Корзина и заказ, ради простоты реализации, должны просто храниться локально.
Внешний вид -
https://www.figma.com/file/UrHtHEFKjLwufdxh7y2NFR/%D0%A2%D0%B5%D1%81%D1%82%D0%BE%D0%B2%D0%BE%D0%B5-%D0%B7%D0%B0%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5?node-id=0%3A1 1.1 Данные Данные - несколько категорий, содержащие товары.
Для получения данных реализован простой REST интерфейс.
Для получения списка сущностей используется GET запрос вида
https://test2.sionic.ru/api/{model}
Где {model} - название сущности
Параметры запроса передаются виде json кодированной строки. Доступны следующие параметры запроса:
filter - фильтрация по любому свойству сущности, например
filter={"category_id":20} для модели Products вернет нам все товары категории с id=20. Также значения можно указывать виде массива, если нужно отфильтровать несколько id, например
filter={"category_id":[20,21,22]} sort - сортировка сущностей по любому свойству, например
sort=["name","ASC"] для модели Products отсортирует товары по имени по возрастанию
range - выборка из диапазона, например
range=[0,24] вернет нам все сущности с 0-й по 24-ю, всего 25.
За один запрос возвращается не более 50 записей.
Общее количество записей возвращается виде заголовка, например:
Content-Range: Products 0-24/319
Для получения одной записи по ее id используется запрос вида
https://test2.sionic.ru/api/{model}/{id}
Где {model} - название сущности, а {id} - ее id
Доступны следующие методы:
Категории:
GET
https://test2.sionic.ru/api/Categories?sort=["name","ASC"]&range=[0,24] GET
https://test2.sionic.ru/api/Categories/21 Свойства:
name - название категории
Товары:
GET
https://test2.sionic.ru/api/Products?sort=["name","ASC"]&range=[0,24]&filter={"category_id":20} GET
https://test2.sionic.ru/api/Products/2001 Свойства:
name - название товара
category_id - id категории
description - описание товара
Изображения товаров:
GET
https://test2.sionic.ru/api/ProductImages?sort=["image_name","ASC"]&range=[0,24]&filter={"product_id":1001} GET
https://test2.sionic.ru/api/ProductImages/3001 Свойства:
image_name - имя файла изображения
product_id - id товара
image_url - ссылка на изображение
Вариации товаров:
GET
https://test2.sionic.ru/api/ProductVariations GET
https://test2.sionic.ru/api/ProductVariations/1 product_id - id товара
price - цена данной вариации товара
stock - количество в наличии
Свойства вариаций:
GET
https://test2.sionic.ru/api/ProductVariationProperties GET
https://test2.sionic.ru/api/ProductVariationProperties/1 Свойства:
name - название свойства
type - тип свойства: 0 - строка, 1 - целое число, 2 - число с плавающей точкой, 3 - значение из списка
Значения списков свойств вариаций:
GET
https://test2.sionic.ru/api/ProductVariationPropertyListValues GET
https://test2.sionic.ru/api/ProductVariationPropertyListValues/1 Свойства:
product_variation_property_id - id свойства вариации
title - заголовок значения
value - значение
Значения свойств вариаций:
GET
https://test2.sionic.ru/api/ProductVariationPropertyValues GET
https://test2.sionic.ru/api/ProductVariationPropertyValues/1 Свойства:
product_variation_id - id свойства вариации
product_variation_property_id - id свойства вариации
value_string - значение типа строка
value_int - значение типа целое число
value_float - значение типа число с плавающей точкой
product_variation_property_list_value_id - id значения свойства вариации из списка
1.2 Приложение Приложение должно быть написано на React Native, запускаться на современных версиях Android и состоять из нескольких экранов. При старте приложения открывается экран со списком категорий, в каждую из них можно зайти, после чего открывается список товаров. Каждый товар можно положить в корзину и, в итоге, сделать заказ. Также должен быть экран вывода списка созданных заказов.
Корзина и заказ нет необходимости реализовывать через сеть или какой-либо сервер, достаточно просто хранить их в приложении - это всего лишь демонстрация, а не настоящий продукт. При этом история заказов должна сохраняться на устройстве и не исчезать при перезапуске приложения.
Будут ли сделаны экраны с данными разными компонентами, одним компонентом или как-то ещё - на усмотрение исполнителя.
На всех экранах приложения должна быть кнопка перехода в корзину, а также кнопка перехода к списку созданных заказов.
1.2.1 Категории На экране категорий должны выводиться все категории, полученные с сервера, с возможностью выбрать одну из них и перейти к списку товаров. У категорий выводятся названия.
1.2.2 Товар На списке товаров для конкретной категории выводится, собственно, список товаров, принадлежащих данной категории. Около каждого товара выводится его название, минимальная цена (цена самой дешевой вариации) и свойства, а также кнопка добавления в корзину. При нажатии на неё пользователь выбирает вариацию, которую хочет добавить в корзину.
В карточке товара необходимо отобразить кнопки выбора вариации по ее свойствам. При нажатии на кнопку добавления в корзину, добавляется конкретно выбранная пользователем вариация товара.
1.2.3 Корзина В корзине выводится список добавленных туда товаров со свойствами выбранной вариации. У каждого товара можно указать количество (при добавлении из списка товаров данное количество также увеличивается на один), выводятся названия и сумма по товару. У товаров должны выводиться кнопки удаления из корзины. Также выводится общая сумма в корзине и кнопка оформления заказа.
При нажатии на кнопку оформления заказа пользователь попадает на экран заказа.
1.2.4 Заказ На экране оформления заказа находится форма с текстовыми полями:
1) Имя
2) Адрес
3) Телефон
Все поля обязательны. После заполнения всех полей пользователь может нажать на кнопку "Оформить заказ", создастся новый заказ с содержимым текущей выбранной корзины, а сама корзина очистится.
1.2.5 История заказов На данном экране выводится список всех созданных заказов пользователя, с их содержимым (корзина) и датой создания.
1.3 Необходимо
1) Вывод товаров с подгрузкой (infinite scroll)
2) Сохранение корзины между перезапусками приложения.
3) Фильтры в категориях по названиям товаров.
Адаптивность дизайна.