Давненько ничего не писал - завален работой. Но в этом есть и хорошая сторона, значит будет что потом рассказать.
На данный момент у меня проект по переносу большого работающего магазина с miniShop2 на Vesp. Причина - магазин хотят развивать, делать всякие сложные скидки с акциями, а на MODX это делать непросто. Причём заказчик хочет, чтобы переехал только магазин, а статьи и прочее остались как есть - на MODX.
И получается очень интересная интеграция, когда категории, товары, заказы и юзеры работают на Vesp, а в MODX подгружаются специальным сниппетом через вызов API. Плюсом к этому идёт рендер чанков в MODX на Fenom, с последующим их "оживлением" Vue.
Новый проект в моём портфолио - сервис для поиска работы в государственных учреждениях кантона Люцерн, Швейцария - https://lehre.lu
Есть у них такая программа, вроде интернатуры, когда за фиксированную зарплату ты можешь отработать, например, уборщиком в полиции или секретарём в мэрии от 1 до 3х лет. Наверное есть и какие-то связанные с государством плюшки.
Ну и вот, заказали они у Pixmill себе красивый сайт, чтобы отбивать будущих сотрудников у коммерческого сектора - а мы уж расстарались.
А вот неожиданно подкрался юбилей - аж 40 лет!
У меня на сайте есть традиция - каждый день варенья писать отчётик о прошедшем годе. Но как можно проследить по истории этих отчётов, я прогулял уже 3 года. И это неслучайно совпало с рождением сына.
Оказалось, что подобное событие полностью меняет весь твой жизненный уклад. Ты больше не предоставлен сам себе и не можешь толком ничего планировать. Михаилу Васильевичу по барабану твоя работа и твои задачи - ты ему нужен постоянно, целиком. И мама тоже нужна, и вообще всё ваше время и всё внимание.
Уже 2 месяца использую Docker для разработки.
Это очень удобно, если ты работаешь в команде - у всех разные рабочие окружения, версии операционных системы и т.д., а Docker позволяет убрать эту разницу и автоматизировать создание проекта. Я уж молчу про всякое legacy, когда нужно работать с древними версиями библиотек, которые уже не устанавливаются.
Но есть проблема - работа Docker на MacOS не отличается высокой скоростью из-за особенностей файловой системы. В прошлой заметке я советовал использовать Mutagen для обхода этой проблемы, но и с ним не всё так радужно. Например, я словил несколько неприятных проблем с синхронизацией файлов, когдя они уже удалены в исходниках, но как-то сохраняются в контейнере из-за кэша Mutagen.
Скорость выше, да, но подобные особенности не радуют.
А тут оказалось, что аж с марта в Docker на MacOS Monterey доступны эксперементальные функции, как раз для улучшения работы с файловой системой.
Немедленно включил и замерил разницу, на этот раз не на установке пакетов, которые кэшируются по всякому, а на сборке фронтенда Vesp текущей версии.
Наконец-то у меня дошли руки разобраться с Docker и написать свою конфигурацию для работы с Vesp.
Теперь не нужно заморачиваться настройкой локального окружения через Valet, а можно просто запустить разработку в контейнере.
Вам будет доступна и база данных, и hot reload при разработке фронтенда, и даже Xdebug.
Ну вот наш курс и подошёл к завершению.
Надеюсь, вам было интересно поработать с Vesp и вы узнали для себя что-то новое и даже интересное.
В этой заключительной заметке я хочу сделать краткий обзор PHP и JS библиотек, которые я использую в своих проектах. Возможно, они сэкономят вам время при разработке.
Список состоит только из решений, которые я лично использую постоянно, практически в каждом проекте. Он выкристаллизовался за довольно большой промежуток времени и почти не меняется.
Мы написали основной функционал простенького магазина, и теперь пришло время выгрузить его на хостинг.
Админка будет сгенерирована в статичные файлы html
, js
и css
, а вот публичный сайт мы запустим в режиме серверного рендеринга - ssr.
Серверный рендеринг нужен для того, чтобы ваш сайт могли индексировать поисковые машины. Хоть они давно и заявляют о поддержке SPA приложений, но на практике это не очень работает. Да и прочитать те же теги OpenGraph без серверного рендера никак не получится.
Конфигурации будет как для Nginx, так и для Apache2.
Сегодняшний урок будет довольно скучным, потому что ничего нового вы из него не узнаете.
Будет всё то же самое, что и прежде: пишем миграцию, модели, контроллеры, странички в админке и само оформление заказов на публичном сайте.
Собственно, когда вы понимаете как работает Vesp, вся работа с ним становится вот такой предсказуемой рутиной. Есть новая задача - сел и сделал! Никаких сюрпризов, борьбы и превозмогания.
Каталог товаров вывели и оформили, теперь нужно сделать корзину, куда будем их складывать.
Авторизации на сайте у нас нет, значит корзина будет храниться не в базе данных, а на клиенте. Для долговременного хранения мы используем localStorage, а для текущего состояния - Vuex.
Vuex - это глобальное хранилище нашего приложения, к которому может обращаться любой компонент Vue. Он позволяет им обмениваться данными, даже если они находятся на разных страницах и ничего друг о друге не знают.
Можно сказать, что это такая "внутренняя сессия" приложения, только очень функциональная. Вот сегодня, на примере работы с корзиной, мы её и освоим.
Сегодня мы оформим страницы товаров и категорий.
Думаю, на этом работа по выводу каталога будет окончена и можно будет переключиться на корзину и оформление заказов.
Как вы, наверное, помните, мы написали компонент для вывода всех товаров и теперь можем его легко расширить для вывода товаров конкретной категории.
Делается это добавлением нового параметра, и при его наличии, изменением адреса запроса на контроллер товаров категории, который мы написали в прошлом уроке.
На прошлом уроке мы доработали наш вывод товаров, добавив к нему выборку картинок.
Теперь нужно сделать вывод категорий и страниц товаров. Учитывая общепринятые нормы, мы не можем выводить их все просто по id
, поэтому давайте добавим колонки alias
обеим моделям.
У категорий все alias
будут уникальны, а у товаров они будут уникальны в каждой категории.
Alias
становится обязательным полем для модели, то есть он всегда должен быть заполнен. Это значит, что колонка в таблице не будет nullable
, а поэтому при создании уникального индекса по этой колонки в ней уже должны быть уникальные значения, или получим ошибку.
Если бы наш магазин уже был в работе, то нам нужно было бы добавить новую колонку, затем прописать уникальные значения в каждую модель, и только потом добавлять индекс unique()
. Но сейчас мы можем смело удалить все записи из БД, а после запуска миграции создать их снова через запуск seed
.
На прошлом уроке мы сделали товарам галереи, теперь нужно вывести из них файлы.
Как правило, в магазинах принято выводить первую картинку галереи в качестве титульной. То есть, показывать её во всех скписках товаров, включая админку.
С этого мы и начнём - с присоединения первого изображения товара аж четырьмя способами, и выберем из них самый оптимальный.