Калькулятор стоимости жизни, о котором я писал неделю назад, потихоньку воплощается в жизнь 🤩
💾 Данные с numbeo.com, которые можно использовать со ссылкой на них, спарсились за несколько часов без каких-то особых выкрутасов с помощью нескольких скриптов и scrapy (популярная питонячья либа для скрэйпинга). Я допускал, что придётся использовать прокси или как-то ещё обходить блокировки, но 9000 запросов за несколько часов даже с одного IP — детский сад.
💥 Очень рад, что механика работы калькулятора — вводишь параметры своего образа жизни, потом выбираешь интересующие города — позволяет делать HTTP-запрос на каждый новый город. Данные в прототипе статичные (и наверняка такими и останутся), а значит вместо бэкенда с базой данных оказалось достаточно предобработки (надо было разложить чиселки в правильные ключи), чистки (выкинуть города с неполными данными, числа сделать числами) и раздачи статичных JSON-файлов с помощью nginx. Городов с полными данными осталось 900 с небольшим.
⏳ Приложение я сделал на реакте с помощью удобного create-react-app. Не очень люблю такие комбайны (и не боюсь webpack — наконфигурировался в своё время), но экономия времени на разработке бесценна, особенно потенциально бесполезного прототипа. Единственный минус — нельзя задать пути для статики, а у меня уже настроен nginx. Пришлось делать npm run eject и менять конфиг руками. Ну да невелика потеря.
🧩 В качестве библиотеки компонентов сначала попробовал Material UI, который я использовал в Quiken, но он страшный и тяжёлый — особенно раздражает развесистый API и чрезмерная атомарность компонентов. Перешёл на Blueprint UI от Palantir — он классный, и есть так нужный мне для выбора городов Suggest — это такой компонент для auto complete. Он пока немного тормозит при рендеринге. Все компоненты не настраивал вообще, только раскидал по колонкам.
📝 Первоначально я хотел взять UI kit побогаче, со всякими панельками и всплывашками, но решил не усложнять. Скорее всего, все эти панельки мне всё равно не пригодятся, когда буду делать нормальный интерфейс. Для базовой колоночной раскладки страницы написал немного CSS и HTML руками. В 2021-м с flex-box это кайф, не то что 10 лет назад с float: left и отрицательными полями.
⚙️ Деплой получился чуток замороченный, потому что я решил встроить калькулятор в свой (ещё не доделанный — апдейт: уже доделанный) gromov.com: для этого дописал ansible playbook и поправил nginx-конфиги. Всё приложение — это около 1000 статичных файлов, а раздать статику не проблема. Но от ansible-франкенштейна в будущем хочу избавиться. Хоть он и разворачивает весь сайт с django, nginx, uploads и статикой на пустом VPS с ssh и является infrastructure-as-code, всё равно буду искать что-то попроще и декларативное.
Итого получилось меньше недели от идеи до функционального прототипа 🔥
В течение следующих нескольких недель (надо делать быстро, потому что строить никому не нужные чудо-интернет-проекты годами явно не моё) буду работать над более полной версией с пошаговым мастером для настройки образа жизни и вменяемым интерфейсом сравнения, а пока можете потыкать получившийся прототип.
В колонке слева подставлены дефолтные значения для семьи с маленьким ребёнком, а справа есть почти незаметная кнопочка Select city. Выбирайте первым город, где живёте сейчас, и следом добавляйте интересные вам.
Как вам кажется, полезная штука? Жду ваших комментариев!
