Новый проект в моём портфолио - сервис для поиска работы в государственных учреждениях кантона Люцерн, Швейцария - 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.

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

Как правило, в магазинах принято выводить первую картинку галереи в качестве титульной. То есть, показывать её во всех скписках товаров, включая админку.

С этого мы и начнём - с присоединения первого изображения товара аж четырьмя способами, и выберем из них самый оптимальный.

На прошлом уроке вы сгенерировали и вывели наши товары на сайте.

Выглядит это пока простенько, поэтому довайте добавим нашим товарам картинки. То есть, напишем галерею товара.

Этот урок доступен бесплатно в рекламных целях, вдруг кто-то почитает и захочет оплатить доступ и к предыдущим?

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

Я предлагаю создать новую модель ProductFile, которая свяжет товары с файлами. Делаем composer db:create ProductFiles и редактируем новую миграцию:

<?php

use Illuminate\Database\Schema\Blueprint;
use Vesp\Services\Migration;

final class ProductFiles extends Migration
{
    public function up(): void
    {
        $this->schema->create(
            'product_files',
            function (Blueprint $table) {
                // Связи с родительскими моделями
                $table->foreignId('product_id')
                    ->constrained('products')->cascadeOnDelete();
                $table->foreignId('file_id')
                    ->constrained('files')->cascadeOnDelete();
                // Порядок вывода картинок в галерее
                $table->unsignedInteger('rank')->default(0);
                // Картинки можно будет отключать
                $table->boolean('active')->default(true)->index();

                // Назначаем первичный ключ из 2х колонок
                $table->primary(['product_id', 'file_id']);
            }
        );
    }

    public function down(): void
    {
        $this->schema->drop('product_files');
    }
}