Тестовое задание: React Native, Front dev middle
Зубов Егор
Руководитель компании СИОНИК
Привет!
Ты получил эту ссылку, потому что твою резюме показалось мне интересным. Благодарю тебя за проявляенный интерес!
Тестовое задание: 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) Фильтры в категориях по названиям товаров. Адаптивность дизайна.
О нас

Мы небольшая компания. В настоящий момент нас 11 (6 разработчиков, 2 дизайнера, 1 интернет-маркетолог, руководитель, специалист по рекламе), в ближайшее время мы планируем увеличить наш состав до 15 человек.
Почему мы?

Возможность стать частью большого и интересного проекта на этапе его старта и получить возможность кратного профессионального роста.
Зачем ты нам нужен?

Для развития собственного проекта децентрализованного E-com.
Контакты
8 (495) 666-56-64
8 (977) 826-53-16 (WhatsApp, Telegram)
egor@sionic.ru

г. Москва, ул Карьер 2Ас1

График работы:
Рабочие дни с 09:00 по 20:00.

ИНН 7736620013