Frutellis

Frutellis

Пикабушник
3725 рейтинг 22 подписчика 72 подписки 19 постов 7 в горячем
Награды:
10 лет на Пикабу За супергеройскую помощь С Днем рождения, Пикабу! За страсть к путешествиям За исследование параллельных миров За помощь Лампочгуку

Как я устал от Postman и сделал инструмент для рестораторов на iiko API

Привет! Я делаю сервис, который упрощает работу с iiko API для ресторанов и их подрядчиков. Если коротко — это «человеческий интерфейс» для API iiko: можно посмотреть актуальное меню и стопы, сделать демо-заказ, проверить типы скидок/доставок/оплат и не ковыряться каждый раз в ручных запросах.

Сам сайт — https://apimenu.ru/

Главная страница сервиса на которой нужно ввести только АПИ ключ

Главная страница сервиса на которой нужно ввести только АПИ ключ

Зачем вообще это нужно?
Если вы когда-нибудь настраивали интеграцию с iiko или просто с ней работали, вы знаете боль:

  • искать нужные запросы в документации,

  • искать модификаторы по ID,

  • постоянно авторизироваться,

  • все запросы дёргать через Postman,

  • а потом объяснять менеджеру, почему «товар не в стопе» (сделав 10 запросов до этого).

Мне надоело постоянно делать запросы для разных ключей и организация и решил как-то это упростить. Сделал одну панель, куда добавляешь ключ и авторизируешься, и сразу видишь ответ iiko: организаци и терминалы, меню, стоп-листы, скидки, способы оплаты, статусы и т.п. в одном месте без кучи запросов.

После ввода и авторизации получаем все основные данные по организациям привязанным к ключу

После ввода и авторизации получаем все основные данные по организациям привязанным к ключу

Что уже работает

  • Просмотр меню и цен. Подтягивает меню и прайсы, показывает дерево категорий и блюда. Делится на 2 типа — номенклатура и внешнее меню.

  • Корзина и модификаторы. Можно «собрать» тестовый заказ как обычный пользователь: выбираете блюдо → модалки для модификаторов → корзина (но только для внешнего меню)

  • Демо-заказ в iiko. Выбираете организацию и терминал, подгружаются доставки и оплаты, добавляете тестовые позиции и отправляете заказ — показывает JSON-запрос и JSON-ответ от iiko, после теста сразу можно проверить статус заказа.

  • Стоп-листы. Подсветка недоступных позиций.

  • iiko Biz. Страница, где собираю ошибки с которыми встречаюсь при интеграции.

  • Логи запросов. Сохраняю JSON по ключевым операциям (getOrganizations, getMenus и т.д.) и можно всё посмотреть в модальном окне и скачать. (удобно для обращение в ТП)

  • Справочник ошибок iiko. Страница, где собираю ошибки с которыми встречаюсь при интеграции.

  • Хранилище ключей для пользователя. Переключение в один клик между ключами.

    И ещё много всякого разного, веду историю изменений, можете почитать — https://apimenu.ru/changelog

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

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

Для кого это полезно

  • Директорам/менеджерам. Видно «что реально в продаже» и как срабатывают стопы— без звонка интегратору.

  • Техспециалистам и подрядчикам. Экономит время: не открывать Postman, меньше человеческих ошибок в параметрах, быстрый отладочный цикл.

  • Небольшим сетям. Когда «своего айтишника» нет, но проверять меню и тестировать правила нужно регулярно.

Примеры сценариев, которые занимают минуты и можно проверить даже с телефона

  • «Меню обновили, а на сайте не поменялось» — открываю нужную точку, нужное меню и орнанизация, ищем товар — смотрим, есть он или нет, а может у него нулевая цена или он в стопе.

  • «Модификатор убрали в стоп, а на сайте он есть» — смотрим меню, ищем товар и смотрим, что у клиента 2 одинаковых наименование, один товар, а другой модификатор и в стоп они убрали товара, а модификатор отображается как и должен.

  • «Скидка 10% не применялась, хотя вроде скиду добавили» — выбираю организацию и проверяю наличие скидки по id или названию.

Пример логов при загрузки меню. Можно посмотреть каждый запрос отдельно или скачать общий файл лога

Пример логов при загрузки меню. Можно посмотреть каждый запрос отдельно или скачать общий файл лога

Итог

Я просто устал объяснять людям «почему не поменялись стопы» и каждый раз собирать запросы в Postman. Сделал сайт, где всё разложил по полочкам — от меню и модификаторов до тестового заказа и логов. Мне очень сильно экономит время на внедрениях и проверках.

Буду рад какому-то фидбеку от рестораторов и работников хорики.

P.S. ключи не сохраняем, если только сами не сохраните в своем ЛК

Показать полностью 4
8

Генератор mesh градиентов и другие новые инструменты

Привет, Pikabu. Продолжаю развивать свой проект gradients.app — это набор инструментов по работе с цветом: можно генерировать градиенты, проверять контрасты цветов, извлекать основные цвета из фото и всё в таком духе.

Генератор mesh градиентов

Генератор mesh градиентов

Появились mesh градиенты

Совсем недавно добавил генерацию меш градиентов и библиотеку, которую помогают заполнять пользователи своими градиентами. Старался сделать максимально просто в использовании.

Возможности генератора: генерация случайной палитры, добавление цветов, выбор рандомного цвета, замена цветов на свои, смешивание текущей палитры, скачивание градиента в FHD (1920*1080) и копирование CSS код градиента.

Библиотека mesh градиентов — фильтрация по цветам, сортировка по просмотрам, скачиваниям и времени, можно провалиться в готовый градиент и посмотреть информацию о нем подробнее. И любой пользователь может пополнять библиотеку добавив свой градиент из личного кабинета или сразу при генерации.

Ещё появился генератор капли или кляксы (blob)
Кляксы часто используют для декора в вебе или презентациях. Ссылка на генератор кляксы.

Возможности генератора: выбор граней капли и её плавности (скруглённости), можно выбирать тип закрашивания (градиент, сплошной цвет или только границы)

Вот несколько примеров как используют кляксы в дизайне:

Примеры использования клякс в дизайне

Примеры использования клякс в дизайне

Большое изменение затронуло личный кабинет

Тут обновилось всё и очень кардинально — переписана логика и переверстан внешний вид.

Появилась статистика по опубликованным элементам:

Добавились «проекты» — в них можно группировать все элементы из личного кабинета и делиться этим проектом.

Ещё было очень много мелких изменений в том числе по фитбеку от пользователей (на сайте есть всплывашка с гугл формой). Проект постоянно улучшается и растёт.

Совсем недавно увидел, что мой проект появился как инструмент на курсах для SMM специалистов — безумно приятно, что проект помогает людям.

Проект используют на курсах SMM специалистов

Проект используют на курсах SMM специалистов


Спасибо всем, кто дочитал этот длиннопост. Буду рад критике и идеям, может что-то вышло неудобно и непонятно — пишите.

Ссылка на сайт — https://gradients.app/ru

Другие посты серии:
Первый
Второй
Третий

Показать полностью 3 4
81

Генератор градиентов, палитр, оттенков, сочетаний цветов и ещё

Привет, Пикабу!

Расскажу, что нового появилось на моём проекте Gradients.app. Он про работу с цветом, палитрами и градиентами. 1 пост и 2 пост по проекту.

Color picker или инструмент пипетка

Вы можете загрузить изображение и наведением курсора определить цвета на ней. Выбранные цвета можно объединяются в палитру. Нажав на выбранный цвет вы получаете его код в HEX и RGB, а по нажатию на код, значение копируется в буфер. Можно удалить лишний цвет двойным кликом по кругу на картинке.

https://gradients.app/ru/colorpicker

Средний цвет изображения

После загрузки изображения скрипт проходит по её пикселям и вычисляет средний цвет всей фотографии.  Фон это и есть средний цвет, вверху HEX код этого цвета и ссылка на подробную информацию об этом цвете: разные цветовые системы, комбинации с текстом, оттенки и д.р. Расскажу об этом чуть ниже.

https://gradients.app/ru/averagecolor

Конвертер цветов

Выбираете нужный цвет на панели цветов и он сразу меняется в форматах HEX, RGB, CMYK, HLS и HSV. Но можно и поменять значения цвета в любой его системе и он тоже поменяется везде. Можно подобрать случайный цвет нажав на кнопку.


Часто приходилось менять форматы по рабочим делам, а открывать фотошоп или консоль браузера не всегда удобно и быстро. В других онлайн конвертерах не меняет всё сразу, надо выбрать из какого формата переводить цвет и эти переключения бесили.

https://gradients.app/ru/converter

Краткая информация о цвете

https://gradients.app/ru/color/4929b4  в конце ссылки стоит hex код, можно сразу вписывать ссылку в адресную троку или менять на страницу. Ниже скриншоты страницы.

В первой части разные системы цветов и температура цвета.

Небольшое количество оттенков выбранного цвета. Светлые, тёмные и серые.

Цветовые сочетания (цветовой круг) и контрасты с разными цветам

Из новинок это всё.

Очень хочется узнать ваше мнение, что хорошо, а что неудобно и плохо.

Если будет интересно, сделаю пост про внутрянку проекта, разные статисти и метрики, как развивался и т.д.


P.S. вдруг кто-то из вас может помочь с переводом на другие языки или проверить текущие переводы, это было бы очень круто.


Большое спасибо!

Показать полностью 7
212

Продолжение поста «Генератор градиентов и палитры по картинкам»1

Привет, пикабу!

Прошло 3 месяца с первого поста про мой проект — Gradients.app, он про цвета и градиенты.

Расскажу про изменения и обновления за это время.

Вращение градиента

Вращение градиента появилось в мини-карточке, на подробной странице и при генерации нового градиента. Выбирайте нужный угол поворота и скачивайте градиент под выбранным углом. В мини-карточках градиент скачивается в размере 1920 на 1080 px.

Новый вид страницы градиента

Пользователь может задать размер градиента самостоятельно или выбрать уже готовые размеры. Максимальный размер градиента — 2000 на 2000 px. Изображение градиента скачивается если на него нажать.

Добавление градиента в общую ленту

Зарегистрированные пользователи могут добавить свои градиенты в общую ленту.


Сгенерируйте градиент → сохраните в профиль → перейдите в мои градиенты → отправьте в общую ленту.

Пользователю придёт письмо о добавлении в общую ленту и ссылка на градиент.

Генерация градиентов без грязных переходов

Случайная генерация градиентов теперь красивая, не появляются грязные переходы, а цвета рассчитываются по HSL модели.

Появился инструмент смешивания цветов

Можно выбрать до 4х цветов и два режима смешивания RGB и HSL.

Просто про режимы RGB и HSL:

Смешивая синий и желтый в RGB вы получите серый цвет, а в режиме HSL зеленый. В RGB между синим и желтым на цветовом круге серый цвет поэтому их сложение его и даст, а в HSL получится дуга т.к. цвета на разном уровне.

Появился генератор оттенков

Выбирайте цвет и количество оттенков от 3 до 36. Оттенки генерируются в сторону белого, серого и черного цвета.

Набор сочетаний цвета текста и фона

На мини-карточках есть цвет фона, текста и их контраст, чем он выше тем читаемость лучше.

Можно отсортировать наборы по контрасту, времени и просмотрам.

На подробной странице сочетания добавлен заголовок, абзац текста со всеми буквами алфавита и различные начертания шрифта.

Генерация сочетаний цвета текста и фона

К наборам добавил генерацию и для пользователей.

Пользователь может сгенерировать все цвета случайно или каждый по отдельности. Под цветами добавлены подсказки читаемости для заголовков и обычного текста по стандартам WCAG.

Огромное спасибо за комментарии в предыдущем посте, я всё записал и уже что-то добавил.

Буду рад критике и советам.


Ссылка на сайт — https://gradients.app/ru


Спасибо, всем!

Показать полностью 11
458

Генератор градиентов и палитры по картинкам1

Привет, пикабу!

Делюсь своим проектом Gradients.app, занимаюсь им в свободное время и очень жду замечаний и предложений. Проект может пригодиться дизайнерам и иллюстраторам — тут про цвета и градиенты.

Набор градиентов

На сайте можно скачать градиенты разных размеров в PNG, скопировать цвета по отдельности и CSS-коды градиентов. Градиенты сортируются по цветам, скачиваниям и дате. Градиентов на сегодня 87, добавляю их самостоятельно, если у вас есть классные сочетания — буду рад их добавить.

Можно провалиться внутрь карточки градиента, там будет больше информации и разные размеры для скачивания. Для веб-дизайнера есть CSS-код градиента, а для иллюстраторов — цвета в RGB, CMYK, HEX и HSL.

Генератор градиентов

Можно делать градиенты самим: подбирать цвета, смотреть разные сочетания. Есть возможность выбрать от 1 до 5 цветов, скачивать в FHD, копировать CSS-код и рандомно менять цвета всего градиента или по отдельности.

Наборы палитр

Потом я добавил на сайт ещё один раздел — цветовые схемы. Загрузил картинки в разных стилях, с разными палитрами. Эти палитры можно использовать для оформления сайтов, графического дизайна или даже дизайна интерьеров.

Схемы можно отфильтровать по цветам и скопировать HEX-код каждого цвета палитры. На подробной странице схемы цвета применяются к небольшому web-шаблону: блоки, кнопки и другие элементы раскрашиваются под выбранную палитру.

Генератор палитры по фото

Ещё можно загрузить любую картинку или фотографию и определить палитру на ней. Изображение разбивается на 10 основных цветов. Есть подробные блоки с яркими, приглушенными, темными, светлыми и противоположными цветами. У всех цветов можно скопировать HEX-код.

Проект переведен на английский и частично на китайский язык.


Буду рад критике и идеям, может что-то вышло неудобно и непонятно.

Ссылка на сайт — https://gradients.app/ru


Спасибо, всем!

Показать полностью 6
32

Скалы и море. Болгария, Черноморец

Привет, пикабушники!
Выбрался на море с дроном и сделал несколько снимков, делюсь с вами.

Ссылка на все фото большого размера — https://disk.yandex.ru/d/u9-6XAJGVFl1Hg

Фото сделаны на DJI Mini 2.
Море и камни — высота 25-30 м
Море и скалы — высота 80-90 м

Показать полностью 2
18

Река Москва

Река Москва

Посёлок Кожино, Рузский городской округ, Московская область.


Координаты: 55.621265, 36.246045

Ссылка на точку: https://yandex.ru/maps/-/CCUeRUGL9D

Показать полностью
Отличная работа, все прочитано!