Vorfahr - Красивое ИИ веб приложение SAAS для конструктора QR страниц

Приложения с искуственным интеллектом - это тренд и мы часто применяем различные способы автоматизации с ИИ, В данном проекте объединено несколько сервисов AI - как для улучшения старых фотографий, так и для написания текста биографии. Также интегрировано облачное хранилище Vasaby, платёжная система Stripe, генерация текста с ChatGPT, генератор и сканер QR кодов и многое другое. Система и мобильное приложение написаны на современных технологиях - Angular, Python, MySQL, Docker.

https://vorfahrqr.de/

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

Видео-обзор (не самая последняя версия, этап №12, в основном фронтенд)

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

Видео-обзор (не самая последняя, но стабильная версия, этап №10, без правок по фронтенду)

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

Теперь о функциональности проекта. В современном мире инновации проникают во все сферы жизни, и ритуальные услуги не стали исключением. Перед Вами действительно уникальный проект — приложение, объединяющее искусственный интеллект, QR-коды и концепцию "загробного интернета", разработанное для рынка Германии.

Ключевые успехи проекта

Интеграция ИИ для создания и улучшения контента.
Использование QR-кодов для доступа к мемориальным страницам.
Создание интерактивного опыта для пользователей в сфере ритуальных услуг.

Вызовы, с которыми мы столкнулись

Технически грамотный заказчик требовал высокого уровня исполнения и глубокого понимания специфики проекта.
Низкая маржинальность услуг требовала оптимизации ресурсов и времени разработки.
Стратегическое "растягивание" сроков: несмотря на возможность (с нашей стороны) выполнить проект быстрее, было принято решение о продлении сроков для достижения лучшего результата.

Наши решения

Интерактивный лендинг с продуманной навигацией и уведомлениями.
Удобная регистрация с возможностью входа через социальные сети.
Генерация и защита QR-кодов, позволяющих перейти на персональные страницы.
Конструктор веб-страниц для создания мемориалов.
Интеграция ChatGPT для генерации текстов биографий.
Облачное хранилище (Wasabi) для надежного хранения страниц и медиафайлов.
ИИ для улучшения фотографий, делая их более качественными и привлекательными.
Оплата через Stripe для удобства транзакций.
Мощная админка с возможностью управления складским учетом, товарами, пользователями и группами.
Различные профили пользователей: менеджер склада, производитель, продавец, магазин, администратор.
Технический анализ дизайна
Система уведомлений пользователя - это то, что звучит самоочевидно и потому мало кто об этом думает. Все думают о "ядре" функциональности - о самой главной бизнес-логике для клиента - показать суть, забрать контактные данные, выполнить функцию, взять оплату. Все предприниматели сосредоточены на этом Но приложение - это автоматизированный сбор денег с клиента, тут не будет продавца за прилавком, который заметит необычную ситуацию и проинформирует клиента о том как ему поступить. Мало кто думает о том, как клиент на самом деле воспринимает приложение и об ислючительных ситуациях. Но в этом проекте об этом хорошо подумали еще на этапе дизайна. В приложении были различные средства комунникации с клиентом - это и модальные красивые всплывающие окна с графикой, это и маленькие алерты, это уведомления об ошибках, и подсказки которые точно доведут клиента до цели, и дополнительная навигация, статусные уведомления. ПРиложение получилось крайне красновречивое. Вы же знаете эти пустые приложения - где есть только основная функция, но попробуй еще понять как она работает, как будто бы к приложению должны прилагаться видео-уроки? Знаю, Вам это знакомо. Так вот - этот онлайн-сервис не такой, это действительно Сервис с большой буквы - внимательный, отзывчивый, разговорчивый, но не кричащий, элегантно и продуманно проводящий пользователя по пайплайну длинной воронки, позволяющи ему совершить все целевые клики с максимальным комфортом. Поробуйте сами и Вы поймёте о чём я!

Проблемы, которые нам пришлось решить:

Трудности с Python Anywhere сервером, непопулярным языком и фреймворком для веб-разработки. Пайтон - отличный язык, но историески так слажилось, что самый популярный язык для серверной веб-разработки - это PHP. И это заметно - на питоне существенно меньше готовых решений, популярных модулей, мало сборок с базовым, привычным для веб-программиста набором инструментом. Но заказчик был знаком с пайтоном и даже писал на нём первую версию проекта, потому он очень хотел, чтобы серверная часть была написана на python. А хостингом был выбран Python Anywhere. Мы пошли на встречу заказчику в некоторых вопросах, но в более критичных - настояли на альтернативных решениях (например, убедили писать фронтен как отдельное приложение на фреймворке и интегрировать по API). Фреймворки пайтона - а именно Django - во много мнеплохи, но любой разработчик, который писал на Laravel, Symfony, или даже более "дедовском" Yii2 - сразу ощутит пустоту в сердце, ведь многих дополнительных мелочей будет не хватать, как и опенсорс решений для типовых задач, которых на более популярных для веба фреймворках огромный выбор. Пайтон хорош для работы с математикой, с данными, с ИИ - там он первый. Но для веб разработки, на наш взгляд, лучше выбирать более подходящие решения (зависит от конкретного проекта).
Частые изменения в дизайне, требующие постоянной доработки бэкенда. Это не было для нас необычно, мы часто сталкиваемся с такой особенностью: приложение уже в процессе разработки, но меняется дизайн - и это может вызывать серию каскадных изменений - меняем какую-то мелочь, добавляем новый экран - и спроектированная ранее бизнес-логика рушится и требует адаптации. Но мы понимали заранее, что такое будет, потому при построении архитектурного решения были приняты меры для минимизации средней стоимости участка кода, чтобы была возможность делать и переделывать, не затратив слишком большой бюджет. Это стандартная практика - пишем сначала "чтоб работало", а в дальнейшем проводим рефакторинг. Мы обсудили с клиентом особенности такой стратегии и риски, связанные, например, с резким масштабированием функциональности до этапа рефакторинга и оптимизации (такое масштабирование крайне затруднено, и это важно учитывать).
Интеграция множества сервисов: ИИ сервисы, облачные хранилища, OAuth, Stripe, Facebook, Google. Почти каждый наш проект - это множество интеграций, и в каждом проекте - это свои приключения. Одно дело разрабатывать модули с логикой обработки данных внутри приложения, и совсем другое - когда существует отдельная компания - внешний провайдер, который является поставщиком некоторых функций, а мы должны "провести провода" к устройству обработки, которое предоставляет чужая система. В неё и от неё - обратно. Это интеграция внешних сервисов. И помимо того, чтонужн остолкнуться с техническими особенностями этого сервера (например, неполная документация или расхождения текстовой документации и реальной работы API), необходимо также помочь клиенту пройти оформление и стать клиентом-партнёром этой компании и получить необходимые системные доступы, без которых ничего работать не будет. Иногда, например в таких не-клиенто-ориентированных компаниях, как фейсбук, сам черт ногу сломит чтобы даже просто зарегистрироваться и выбрать необходимые методы работы. В конечном итоге всё было подключено и работало, как часы.
Сложности в стыковке бэкенда и фронтенда из-за отсутствия единого технического задания. Нет, конечно мы работали не полностью вслепую, на старте был проведён обзор требований клиента, они были дополнены, были продуманы модули системы, прописаны функции и основные компоненты, прорисован детальный дизайн на десктопы. различные мобильные устройства и планшеты. Мы были готовы. Однако, в проекте было мало уделено времени предварительному проектированию, бизнес анализу и системному анализу. Обычно мы настаиваем на том, чтобы работать Design first, и такой подход подразумевает не только визуальный, но и системный дизайн, а также ему предшествует бизнес-анализ проекта с повышением степени полноты технического задания как по функциональным, так и по нефункциональным требованиям. Тем не менее, заказчик хотел двигаться постепенно, корректируя результаты на каждом шагу, внедряя новые идеи которые появляются по ходу проекта. И мы предоставили такую возможность. Потому план был описан неплохо, но не глубоко, не в такой детализации, в которой мы рекомендуем начинать проект. И за это, конечно, была расплата - проявлялась она, в основном, в сложностях интеграции фронтенд-приложения на Angular и программного интерфейса (АПИ) нашего сервера. После процедуры системного анализа мы часто имеем на руках структуры данных и методы высокой точности, которые мало меняются в дальнейших этапах до запуска. Эти структуры ложатся в ендпоинты для бекенда, в базу данных, в моки и подготовленные фейковые модели данных для фронтенда - это позволяет работать параллельно, независимо, предсказуемо. Но когда мы двигаемся итеративно и постепенно, позволяя дополнения, изменение ТЗ в процессе, добавление новых задач "на ходу" - организовать отлаженную и чёткую работу по совмещению двух разных приложений - клиентского и серверного - практически невозможно. Всё меняется "на лету", документация устаревает, уже интегрированный ранее и проверенный интерфейс перестаёт работать - и всё это нужно замечать, анализировать, согласовывать и устранять. Поверьте, современные приложения и так достаточно сложны, даже если работать близко к стандартам и рекомендованным методологиям. Когда мы их нарушаем - мы получаем некоторые плюсы для бизнеса, но всегда есть побочные эффекты. На старте всегда есть возможность воспользоваться предыдущим опытом и минимизировать побочные эффекты. Но мы готовы к вызовам и уже не раз сталкивались с небольшим хаосом, который для стартапов вполне нормален. Процесс был интересный, требующий опыта, внимания и креативных решений.

Использованные технологии

Фронтенд: Angular, TypeScript, HTML, CSS.
Бэкенд: Python, Django, MySQL.
Инфраструктура: Linux, BASH, Docker, Docker-Compose.
Облачные технологии: Wasabi для хранения данных.
Интеграции: ИИ-сервисы, Stripe, OAuth.

Итоги и преимущества для заказчика

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

Заказчик получил:

Инновационный продукт, выделяющийся на рынке.
Гибкую и масштабируемую систему, готовую к будущим дополнениям.
Повышение лояльности клиентов благодаря удобству и новизне сервиса.

Если вы ищете команду, способную реализовать сложные проекты с использованием передовых технологий и ИИ, мы готовы помочь вам достичь новых высот в вашем бизнесе.