Старт проекта iLikeEat — Nikolay Giman на vc.ru

Всем привет!

Меня зовут Николай Гиман, я full-stack developer со стажем 8 лет. В свободное от основной работы время я разрабатываю проекты для души и для людей.

Еще в начале 2022 года у меня появилась идея сделать сервис электронного меню для ресторанов, но по каким-то причинам все тянул и тянул с ней и разработкой сервиса занялся лишь в конце 2022-го.

Для старта решил использовать хорошо мне знакомые технологии Nuxt v2, Vue v2 и Vuetify v2 в связке с собственным серверным фреймворком ZXC_PHP.

На разработку первого макета электронного меню выделил неделю. В течение недели каждый вечер проводил за написанием своего сервиса минимум 3 часа. Через неделю у меня уже было готовое приложение, опубликованное на «боевом сервере», которое работало и выполняло все, что было задумано.

Клиентскую часть я разделил на два блока: для пользователей и для администраторов ресторанов.

Для администраторов реализовал следующие базовые функции:

Добавление, редактирование и удаление компаний.
Добавление, редактирование неограниченного количества ресторанов.
Добавление категорий блюд.
Добавление блюд.
Добавление фотографий блюд.
Указание алиаса для URL-адреса.
Указание контактной информации ресторана.

Что касается пользовательской части, то тут все очень просто: клиент сканирует QR-код или переходит по прямой ссылке и попадает в меню ресторана. Если пользователь выходит из меню, то попадает на страницу компании, где видит ее логотип и список принадлежащих ей ресторанов. После клика на ресторане пользователю открывается меню конкретного заведения.

Так выглядит страница компании, логотип, наименование и список заведений.

Так выглядит меню в формате списка для пользователя.

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

Какие недочеты я допустил при разработке:

Вес данных, загружаемых стартовой страницей, был почти 6 Мб. Этот объем составляли старые библиотеки (JQ, Bootstrap) и стили.
Я не подумал о том, что время работы компании надо указывать по дням недели (буду исправлять).

Оптимизация скорости загрузки

После того как я получил работающий сервис, я захотел оптимизировать скорость его загрузки. Для себя определил, что стартовая страница должна грузиться как можно быстрее, чтобы пользователь не ждал 2–3 секунды.

Оптимизируя скорость загрузки, я решил перейти на третью версию Nuxt.js: он работает с Vue3, поддерживает Composition API и работает в паре со сборщиком Vite, который обеспечивает отличную производительность. «Почему бы и нет?» — подумал я и начал установку обновленной версии. После установки я стал организовывать компоненты так, как мне нравится, а именно: шаблон отдельно во vue-файле, TypeScript отдельно в ts-файлах. Честно сказать, перевод компонентов был довольно легким, так как до этого я использовал vue-property-decorator для работы с TypeScript. Основное неудобство заключалось в переводе компонентов Vuetify, но это тоже не вызвало особых затруднений, так как надо было пройтись везде и поменять получение props в слотах. После того как все компоненты были переведены на новые рельсы, я проверил, что все работает, и продолжил оптимизировать приложение.

С динамической подгрузкой компонентов меня ждал сюрприз: по какой-то причине в Nuxt3 не работал функционал defineAsyncComponent во внешних файлах (но в Setup-секции во vue-файлах все работало хорошо) . Я не стал ждать исправления ошибки и проверил работу данного функционала на чистом Vue3 — все работало, и я принял решение использовать чистый Vue3, так как SSR на данном этапе развития проекта я не применяю.

После перевода на динамическую подгрузку компонентов приложение загружалось ощутимо быстрее, но все равно долго. Я решил отключить старые библиотеки, которые помогали с анимацией, и задействовал возможности, которые дает Vuetify3. Все картинки были обернуты в v-lazy для ленивой загрузки с анимацией. Осталось оптимизировать только стили. Так как IDE не всегда показывает неиспользуемые стили, я начал искать решение, как выкинуть те стили, которые исторически там остались. В конечном счете нашел плагин CSS Used, он мне сильно помог с определением стилей, которые используются на стартовой странице. Получив сухую выжимку стилей, я подключил их к странице и был доволен, пока не посмотрел мобильную версию: оказалось, в ней неправильно работает кнопка меню, так как CSS Used забыл захватить некоторые стили (так что пользуйтесь им аккуратно) .

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

Перед оптимизацией при проверке сайта в https://pagespeed. web. dev/ показатель performance был на уровне 20 единиц, после оптимизации — 70. Конечно, тут много еще зависит от скорости сети и от мощности сервера, но в целом показатель более чем приемлемый.

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

Кратко о продвижении

Для продвижения проекта воспользовался рекламой в «Яндексе» с бюджетом 9000 р. на 3 месяца. На данный момент нет ни одного клиента, которого бы привела на сервис реклама в «Яндексе». Так что я решил отключить трекер со стартовой страницы сайта — теперь сайт абсолютно чистый.: )

Что буду дорабатывать

В приложение еще предстоит добавить:

корзину для пользователя;
вызов официанта к столику;
заказ доставки еды;
аналитику для владельцев ресторанов.

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

Мотивация:

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

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

Контакты

Если есть желание присоединяйтесь к разработке проектов на github