• Час читання ~1 хв
  • 04.12.2022

Ми всі любимо працювати з Laravel, але що, якби ми могли зробити крок далі — уявіть, що ми можемо редагувати будь-яку сторінку чи будь-яку електронну пошту нашої програми Laravel так, ніби це якась CMS. Ми бачимо відтворену HTML-сторінку, де ми можемо клацнути будь-який елемент і просто відредагувати його, замість того, щоб переходити до шаблонів Blade або мовних файлів?

Як наслідок, ми могли б запросити наших колег, які не є розробниками, до співпраці – ми могли б разом обговорювати, керувати та розгортати текстові оновлення, наших колег більше не блокували б розробники. Але навіть якщо ви єдиний магазин розробників, це все одно вигідне – можливість бачити всі тексти в їхньому реальному контексті, швидко переміщатися між різними сценаріями та граничними випадками, не торкаючись бази даних чи заповнення чи чогось подібного.

Are you 100% sure that all your Blade templates and language files are completely in sync with the product’s current state and that nowhere, nowhere in your UX you say things to customers that aren’t right anymore? Are you 100% sure that all pages have SEO-optimised HTML meta tags?
Чи ви на 100% впевнені, що всі тексти мають відповідні переклади всіма мовами продукту та добре вписуються в елементи UX?

Нова парадигма

Абзац offers a new paradigm – instead of managing view templates, language files, translation keys and all that other boring stuff, let’s try to think about our product from a higher level, from a customer level really – let’s start working with pages, emails and user journeys instead!

Зрештою, користувачі потрапляють не на «welcome.blade.php», а на сторінку привітання. Вони не створюють облікові записи на «auth.form», вони створюють облікові записи, заповнюючи форму на сторінці реєстрації. Називання речей так, як вони є, значно полегшить керування продуктом як для розробників, так і для тих, хто не є.

Починаємо

У цьому прикладі ми використаємо нову програму Laravel і попрацюємо з її сторінкою привітання – сторінкою, з якою більшість із нас настільки знайомі 🙂 Давайте створимо програму за допомогою композитора:

$ composer create-project laravel/laravel laravel-test
$ cd laravel-test

Тепер ми прямуємо до Абзац щоб створити новий проект (безкоштовно!):

І тепер, коли ми отримали наш ключ API та зберегли його у файлі .env, ми можемо встановити пакет Composer Paragraph, а потім запустити локальний веб-сервер:

$ composer require paragraph/laravel
$ php artisan serve

Відкриття нашої абсолютно нової програми Laravel у веб-переглядачі показує цю милу сторінку привітання:

Якщо ви подивіться на welcome.blade.php, ви помітите, що всі тексти знаходяться безпосередньо в розмітці HTML:

<div class="ml-4 text-lg leading-7 font-semibold">
   <a href="https://laravel.com/docs" class="underline text-gray-900 dark:text-white">
       Documentation
   </a>
</div>

Let’s wrap them in Laravel’s localization directive so that they become translatable:

<div class="ml-4 text-lg leading-7 font-semibold">
    <a href="https://laravel.com/docs" class="underline text-gray-900 dark:text-white">
        @lang('Documentation')
    </a>
</div>

Це дуже безпечна річ, і вона нічого не порушить, незалежно від того, плануєте ви перекладати свій продукт чи ні. Laravel завжди повертатиметься до оригінального тексту, якщо немає доступного перекладу. Це також означає, що ви не будете прив’язані до Paragraph, немає блокування. Ви використовуєте функцію фреймворку та можете будь-коли змінити свої конкретні реалізації.

Тепер давайте очистимо кеш за допомогою запуску php artisan параграф: чіткі перегляди а потім знову відвідайте ту саму сторінку в браузері:

Виглядає приблизно так само? Ну, це та сама сторінка. Але тепер, коли наш хук Paragraph включено в механізм візуалізації Laravel, представлення було проаналізовано та збережено як знімок у тимчасовій папці. Ми можемо надіслати всі незавершені знімки, виконавши консольну команду:

код4Якщо ми повернемося до інформаційної панелі Paragraph, то побачимо, що зараз доступна 1 сторінка для керування:

Якщо ми натиснемо «Сторінки», ми побачимо список усіх сторінок наших продуктів. Наразі це лише сторінка привітання, яку ми імпортували кілька секунд тому:

Клацніть на сторінці, щоб відкрити повний редактор сторінок. Як ми бачимо, тепер усі тексти можна редагувати на місці, редагуючи в стилі CMS! Paragraph щойно перетворив наш додаток Laravel на Wordpress, але в хорошому сенсі.

З цього моменту нам не потрібно повертатися до мовних файлів або шаблонів Blade, ми можемо просто залишитися тут, ми можемо використовувати Paragraph для будь-яких оновлень копій. Поки наш @lang директиви на місці, ми можемо контролювати тексти з хмарної інформаційної панелі, що дозволить нам бути набагато продуктивнішими.

Щоб повернути оновлення до вашої програми Laravel, нам потрібно час від часу завантажувати останні копії оновлень, запускаючи консольну команду вручну, через cron або як частину вашого конвеєра CI/CD:

$ php artisan paragraph:download

Localisation

If you need to localise your Laravel product – to translate it into different languages, then you just found a perfect package for that. Just add any languages you need in the project settings on Paragraph and you can start translating right away. You have two editor options – you can use the page view that we shown above, or you can open a more “traditional” table view with all texts.

To help you progress faster, we included AWS, Bing and Google Cloud machine translators that can provide you with a starting point:

We only made two clicks and now the progress of our Spanish translations moved to 100%:

SEO-optimisation

Your product might be the best in the world but people still need to be able to find it in order to become your customers. Having relevant, SEO-optimised HTML tags is crucial but not so easy to achieve when you have hundreds or thousands of Blade templates scattered around the repository.

Let’s wrap our HTML tags in the Laravel’s translation directive:

<meta
    name="description"
    content="@lang('A very efficient SEO description goes here')"
/>
<meta
    name="keywords"
    content="@lang('SEO keywords go here')"
/>
<title>@lang('Laravel')</title>

Давайте тепер очистимо кеш, оновимо сторінку в браузері, а потім повторно надішлемо дані в Paragraph:

$ php artisan paragraph:clear-views
Deleted storage/paragraph_view_snapshot_welcome.html
Deleted a total of 1 snapshots
$ php artisan paragraph:submit-views
Submitting storage/paragraph_view_snapshot_welcome.html
Submitted a total of 1 snapshots

Great, now the 3 SEO tags we just added are in Paragraph as well:

We can manage all our SEO tags (as well as translate them if necessary) in a breeze!

Going advanced

You probably noticed how we had to open the local page in browser before we could submit anything to the cloud. That’s the easiest way to start because it doesn’t require any additional work, a small website could even enable this in production – capture different pages and then submit them from time to time to Paragraph using cron.

But if you want to have a better control, a nicer way to do this is by incorporating the special Paragraph‘s trait in your test suite:

код8This way, every time you run tests locally or in your CI/CD pipeline, pages will be updated to their new design and new texts will automatically be parsed.

On top of that, you can define user journeys – sequences of steps and outgoing communications:

щічнийЦе автоматично створить шлях «Користувач створює обліковий запис» у Paragraph, який складається з 2 кроків у браузері та одного вихідного вітального листа.

зацікавлені? Вам це здається гарним? Ви можете підключити свою програму Laravel, створивши безкоштовний обліковий запис на Paragraph сьогодні.

Comments

No comments yet
Yurij Finiv

Yurij Finiv

Full stack

Про мене

Professional Fullstack Developer with extensive experience in website and desktop application development. Proficient in a wide range of tools and technologies, including Bootstrap, Tailwind, HTML5, CSS3, PUG, JavaScript, Alpine.js, jQuery, PHP, MODX, and Node.js. Skilled in website development using Symfony, MODX, and Laravel. Experience: Contributed to the development and translation of MODX3 i...

Про автора CrazyBoy49z
WORK EXPERIENCE
Контакти
Ukraine, Lutsk
+380979856297