CoderCastrov logo
CoderCastrov
Апифай

Запасы тут

Запасы тут
просмотров
3 мин чтение
#Апифай
Table Of Content

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

    Начало (и на самом деле весь процесс) академии было отмечено эпидемией коронавируса. Прямо перед тем, как мы должны были впервые встретиться, были отменены мероприятия с более чем 100 людьми, затем более 30, и в конце концов был объявлен запрет на выход из дома. Шляпа вниз, через неделю академия началась в режиме онлайн (что было довольно пугающе для нас, родителей маленьких детей, которые надеялись на небольшую паузу от дома).

    Zoom (который, кстати, придумал всю эту эпидемию как свой маркетинговый трюк) стал нашим лучшим другом, потому что честно говоря, HTML, CSS и даже JavaScript изначально не выглядели очень дружелюбно. Но в конце концов, шаг за шагом, мы создавали сокровища.

    В отличие от веб-академии, на проекте не работают все время (что, кстати, по моему мнению, неправильно), но мы, конечно же, обсуждали темы (онлайн, конечно), выбирали лучшие, парились, планировали и тайно начинали программировать.

    Проект "Запасы тут", который меня привлек, был задуман для связи магазинов, которые доставляют продукты, с клиентами, которые в то время сидели дома, голодали и надеялись, что им удастся заказать свободное время через неделю или две, чтобы, например, купить муку! Для успешной работы проекта также требовалось получать данные из Интернета, то есть парсить их в какой-то форме, именно в этом я хотела развиваться - поэтому мы приступили к работе.

    Подготовительная фаза в Miro и Figma

    Мы, конечно же, начали с осознанной подготовки, в голове, в Miro, а затем в Figma, мы собирали все, что хотим показать пользователям, как мы будем проводить их через страницу, просто какой поток будет у нашего сайта. Если честно, с теми знаниями, которые у нас были на тот момент, было проще сразу же написать код, чем пытаться делать это в Figma, но это нас не остановило (ни в малейшей степени). В то же время мы начали заглядывать под капот API и другие возможности получения машинно-читаемых данных из веба в реальном времени.

    Кто мне когда привезет покупки

    В конце концов нам действительно удалось подключиться к более или менее скрытым API Кошика, Рохлика и Теско и получить доступные времена доставки. Пользователь просто вводит адрес, на который хочет получить товары, и приложение показывает ему, кто и когда доставит на его конкретный адрес.

    У Кошика относительно легко доступное API, для его вызова нам просто нужно было добавить прокси-URL в fetch (откуда-то с Heroku, поэтому иногда у него исчерпывается лимит запросов и он не работает). У Рохлика нам сначала нужно было получить id адреса, вызвав первое API, а затем получить информацию о доставке, вызвав второе API. Из-за защиты Cloudflare мы сохранили оба вызова как актор на платформе Apify, и наш веб-сайт не вызывает Рохлик напрямую, а запускает актора и загружает данные из его вывода. Нам удалось успешно пройти через Tesco с помощью Apify и Puppeteer, но настройка адреса настолько неудобна для пользователя, что в конечном итоге мы ограничились получением информации о том, доставляет ли Tesco на этот адрес, и время доставки мы просто придумываем из-за дизайна и пользовательского интерфейса.

    Код актора, который загружает информацию о времени доставки с Rohlik.cz

    Поскольку мы знаем, что существуют и маленькие местные поставщики продуктов, мы предлагаем им возможность добавить свой магазин на наш сайт - им просто нужно заполнить форму, которая отправит нам электронное письмо с информацией о их магазине (и также отправит им подтверждающее письмо).

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