Zarządzaj dowolną aplikacją Laravel tak, jakby była CMS

Wszyscy uwielbiamy pracować z Laravel, ale co by było, gdybyśmy mogli pójść o krok dalej – wyobraź sobie, że moglibyśmy edytować dowolną stronę lub dowolny e-mail w naszej aplikacji Laravel, jakby to był jakiś CMS. Widzimy wyrenderowaną stronę HTML, na której możemy kliknąć dowolny element i po prostu go edytować, zamiast przechodzić do szablonów Blade lub plików językowych?

W rezultacie moglibyśmy zaprosić do współpracy naszych kolegów niebędących programistami – moglibyśmy wspólnie dyskutować, zarządzać i wdrażać aktualizacje tekstowe, nasi koledzy nie byliby już blokowani przez programistów. Ale nawet jeśli jesteś pojedynczym sklepem programistycznym, wartość jest nadal lukratywna – możliwość zobaczenia wszystkich tekstów w ich prawdziwym kontekście, szybkiego poruszania się po różnych scenariuszach i skrajnych przypadkach bez dotykania bazy danych, seedowania lub czegokolwiek w tym rodzaju.

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?
Czy jesteś w 100% pewien, że wszystkie teksty mają odpowiednie tłumaczenia we wszystkich językach produktu i dobrze pasują do ich elementów UX?

Nowy paradygmat

Ustęp 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!

W końcu użytkownicy nie lądują na „welcome.blade.php”, lądują na stronie powitalnej. Nie tworzą kont na „auth.form”, tworzą konta, wypełniając formularz na stronie rejestracji. Nazywanie rzeczy po imieniu znacznie ułatwi zarządzanie produktem, zarówno programistom, jak i osobom niebędącym programistami.

Pierwsze kroki

W tym przykładzie użyjemy zupełnie nowej aplikacji Laravel i będziemy pracować z jej stroną powitalną – stroną, którą większość z nas tak dobrze zna 🙂 Stwórzmy aplikację za pomocą kompozytora:

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

Teraz kierujemy się do Ustęp aby utworzyć nowy projekt (za darmo!):

A teraz, gdy otrzymaliśmy nasz klucz API i zapisaliśmy go w pliku .env, możemy zainstalować pakiet kompozytora Paragraph, a następnie uruchomić lokalny serwer WWW:

$ composer require paragraph/laravel
$ php artisan serve

Otwarcie naszej nowej aplikacji Laravel w przeglądarce pokazuje tę uroczą stronę powitalną:

Jeśli spojrzysz na welcome.blade.php, zauważysz, że wszystkie teksty znajdują się bezpośrednio w znacznikach 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>

Jest to bardzo bezpieczne i niczego nie zepsuje, niezależnie od tego, czy faktycznie planujesz przetłumaczyć swój produkt, czy nie. Laravel zawsze powraca do oryginalnego tekstu, jeśli nie ma dostępnego tłumaczenia. Oznacza to również, że nie będziesz przywiązany do Paragraph, nie ma blokady. Korzystasz z funkcji frameworka i możesz w dowolnym momencie zamienić swoje konkretne implementacje.

Teraz wyczyść pamięć podręczną, uruchamiając php artisan akapit: jasne widoki a następnie ponownie odwiedź tę samą stronę w przeglądarce:

Wygląda mniej więcej tak samo? Cóż, to ta sama strona. Ale teraz, dzięki naszemu hakowi akapitowemu wbudowanemu w mechanizm renderowania Laravela, widok został przeanalizowany i zapisany jako migawka w folderze tymczasowym. Możemy przesłać wszystkie zaległe migawki, uruchamiając polecenie konsoli:

kod4Jeśli wrócimy do pulpitu Paragraph, dowiemy się, że jest teraz dostępna 1 strona do zarządzania:

Jeśli klikniemy na „Strony”, zobaczymy listę wszystkich stron naszych produktów. Obecnie jest to tylko strona powitalna, którą zaimportowaliśmy kilka sekund temu:

Kliknij stronę, aby otworzyć pełny edytor stron. Jak widzimy, wszystkie teksty można teraz edytować na miejscu, edycja w stylu CMS! Paragraph właśnie przekształcił naszą aplikację Laravel w Wordpressa, ale w dobry sposób.

Od tego momentu nie musimy wracać do plików językowych czy szablonów Blade, możemy po prostu tu zostać, możemy używać Paragraph do wszelkich aktualizacji kopii. O ile nasz @lang dyrektywy są na miejscu, możemy kontrolować teksty z pulpitu nawigacyjnego w chmurze, co pozwoli nam być znacznie bardziej produktywnymi.

Aby przywrócić aktualizacje do Twojej aplikacji Laravel, musimy od czasu do czasu pobierać najnowsze aktualizacje kopii, uruchamiając polecenie konsoli ręcznie, przez cron lub jako część potoku 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>

Wyczyśćmy teraz pamięć podręczną, odśwież stronę w przeglądarce, a następnie ponownie prześlij dane do 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:

kod8This 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:

ustnySpowoduje to automatyczne utworzenie podróży „Użytkownik tworzy konto” w Akapicie, składającej się z 2 kroków w przeglądarce i jednego wychodzącego e-maila powitalnego.

Zainteresowany? Czy to brzmi schludnie dla ciebie? Możesz połączyć swoją aplikację Laravel, tworząc darmowe konto na Paragraph Dziś.