Forem: Northon Iserhardt

Notifications and Conclusion 🎉

Northon Iserhardt — Thu, 28 Dec 2023 00:41:42 +0000

Now, back to notifications

Now let's add a space in the navigation bar to display our notifications.

In resources/views/layouts/app.blade.php add the code below so we can use the material icons:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

Let's create the "notifications" component:
php artisan make:livewire components.notification

In resources/views/livewire/layout/navigation.blade.php add:

@livewire('components.notification')

Mobile:

@livewire('components.notification')

Let's incorporate Laravel Echo to monitor notification events. This way, as soon as a notification is received, we can dynamically reload the notifications and post listing components.

<script>
    document.addEventListener('DOMContentLoaded', () => {
        Echo.private('App.Models.User.{{auth()->user()->id}}')
            .notification(() => {
                Livewire.dispatch('refreshNotification');
                Livewire.dispatch('refreshPostList');
            });
    });
</script>

In resources/views/livewire/components/notification.blade.php:

<div>
    <x-dropdown align="right" width="48">
        <x-slot name="trigger">
            <button
                class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150">
                <span class="rounded-full p-1 bg-red-500 text-white">17</span>
                <span class="material-symbols-outlined">
                    notifications
                </span>
            </button>
        </x-slot>
        <x-slot name="content">
            <div class="p-3 text-center">
                <p>some notifications</p>
            </div>
        </x-slot>
    </x-dropdown>
</div>

Notification Class

As we are going to send our notifications via the database channel, we need to create the notifications table:
php artisan notifications:table
php artisan migrate

Now let's create a notification class:
php artisan make:notification PostCreated

A new directory containing our class will be created:

In app/Notifications/PostCreated.php we will add the broadcast settings:
The constructor:

    public $userId;
    public $dataNotify;

    /**
     * Create a new notification instance.
     */
    public function __construct($userId, $dataNotify)
    {
        $this->userId = $userId;
        $this->dataNotify = $dataNotify;
    }

Channel and type:

    /**
     * Get the notification's delivery channels.
     *
     * @return array<int, string>
     */
    public function via(object $notifiable): array
    {
        return ['broadcast', 'database'];
    }

    public function broadcastType()
    {
        return 'broadcast.message';
    }

Channel name and connection:

    public function toBroadcast(object $notifiable): BroadcastMessage
    {
        return (new BroadcastMessage($this->dataNotify))->onConnection('database');
    }

    public function broadcastOn(): Channel
    {
        return new PrivateChannel("App.Models.User.{$this->userId}");
    }

To send notifications, we will choose to use the Notifiable trait, which is already incorporated into our User model by default. This gives us an efficient, out-of-the-box approach. For more information about how to use this trait: https://laravel.com/docs/10.x/notifications#using-the-notifiable-trait

In app/Livewire/Posts/PostCreate.php we will add the action of notifying users anytime they have been tagged:

if ($this->state['tagged_user_id']) {
    $taggedUser = User::query()->find($this->state['tagged_user_id']);
    $taggedUser?->notify(new PostCreated($taggedUser['id'], $this->state));
}

The documentation explains the correct way to retrieve user notifications https://laravel.com/docs/10.x/notifications#accessing-the-notifications.

Let's add notification retrieval logic to app/Livewire/Components/Notification.php:

    protected $listeners = [
        'refreshNotification' => '$refresh'
    ];

    public $notifications;
    public $notificationsCounter;

    public function getNotifications()
    {
        $this->notifications = auth()->user()->unreadNotifications;
        $this->notificationsCounter = $this->notifications->count();

    }

    public function render()
    {
        $this->getNotifications();

        return view('livewire.components.notification');
    }

And let's modify the blade to display the notification counter:

<div>
    <x-dropdown align="right" width="48">
        <x-slot name="trigger">
            <button
                class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150">
                @if($notificationsCounter)
                    <span class="rounded-full p-1 bg-red-500 text-white">{{$notificationsCounter}}</span>
                @endif
                <span class="material-symbols-outlined">
                    notifications
                </span>
            </button>
        </x-slot>
        <x-slot name="content">
            @foreach($notifications as $notification)
                <div class="p-3 text-center">
                    <p>You have been tagged in a new post!</p>
                </div>
            @endforeach
        </x-slot>
    </x-dropdown>
</div>

Let's start our worker:
php artisan queue:work

At this moment, our notifications are already being processed in queues and being directed in real time to marked users, as follows:

Conclusion

We were able to build, step by step, the real-time notification functionality using Laravel and Livewire, following only the official documentation. Despite the success, there are still several possible features to improve the project, such as:

Creation of the validation layer.
Creation of the repository layer.
Pass data to the notification, such as the name of the person who tagged the user.
Mark notifications as read.

I'm leaving the repository link for anyone interested: https://github.com/northoniserhardt/still-loving-docs

Beyond this, you are the one who decides! Thank you very much for following the tutorial.

Creation, Listing and Reactivity 📜

Northon Iserhardt — Thu, 28 Dec 2023 00:41:28 +0000

Posts

To proceed with notifications, we need events that trigger them. We will notify a user whenever they are tagged in a post. So let's move on to creating the posts.

New posts

Let's add an option to register posts to our navbar:

In resources/views/livewire/layout/navigation.blade.php:

<x-nav-link :href="route('posts.index')" :active="request()->routeIs('posts.index')" wire:navigate>
    {{ __('Posts') }}
</x-nav-link>

<x-responsive-nav-link :href="route('posts.index')" :active="request()->routeIs('posts.index')" wire:navigate>
    {{ __('Posts') }}
</x-responsive-nav-link>

Using Laravel commands we can create several resources at the same time.
For more details: https://laravel.com/docs/10.x/eloquent#generating-model-classes

In our case we will create the Model, migration and controller with resources:
php artisan make:model -mrc Post

In database/migrations/{date}_create_posts_table.php:

    public function up(): void
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->foreignId('user_id')->constrained()->cascadeOnDelete();
            $table->foreignId('tagged_user_id')->nullable()->constrained('users')->cascadeOnDelete();
            $table->string('message', 280);
            $table->timestamps();
        });
    }

tagged_user_id can be null, since a post can be created without having to tag someone.

Let's run the migrations:
php artisan migrate

In routes/web.php:

Route::view('posts','posts.index')->middleware('auth')->name('posts.index');

In app/Models/Post.php:

    protected $fillable = [
      'user_id',
      'tagged_user_id',
      'message',
    ];

    public function user(): BelongsTo
    {
        return $this->belongsTo(User::class);
    }

    public function taggedUser(): BelongsTo
    {
        return $this->belongsTo(User::class, 'tagged_user_id');
    }

In app/Models/User.php:

    public function posts(): HasMany
    {
        return $this->hasMany(Post::class);
    }

    public function taggedPosts(): HasMany
    {
        return $this->hasMany(Post::class, 'tagged_user_id');
    }

Let’s create the post registration and listing components:
php artisan make:livewire posts.post-create
php artisan make:livewire posts.post-list

Let's create the index.blade.php file in resources/views/posts, and import the default layout with our components:

<x-app-layout>
    @livewire('posts.post-create')
    @livewire('posts.post-list')
</x-app-layout>

One point of attention: To make the project simpler, we will not work with validation and repository layers.

In resources/views/livewire/posts/post-create.blade.php:

<div>
    <form class="grid grid-cols-2 max-w-xl mx-auto m-6" wire:submit.prevent="save">
        <textarea
            wire:model="state.message"
            placeholder="{{ __('Post Message') }}"
            class="col-span-2 w-full shadow rounded-lg border-gray-200"
        ></textarea>
        @error('state.message') <span class="error">{{ $message }}</span> @enderror

        <select wire:model="state.tagged_user_id" class="mt-4 border-gray-200 rounded-lg">
            <option value=""></option>
            @foreach($users as $user)
                <option value="{{$user->id}}">{{$user->name}}</option>
            @endforeach
        </select>
        @error('state.tagged_user_id') <span class="error">{{ $message }}</span> @enderror

        <div class="flex justify-end">
            <button class="w-16 rounded-lg mt-4 bg-blue-500 shadow text-white">{{ __('Save') }}</button>
        </div>
    </form>
</div>

Let's add it to app/Livewire/Posts/PostCreate.php:

    public $state = [
        'tagged_user_id' => null,
        'message' => ''
    ];

    public $users = null;

    public function mount()
    {
        $this->users = User::query()->get();
    }

    public function save(Request $request)
    {
        $this->validate([
            'state.message' => 'required|max:280',
            'state.tagged_user_id' => 'sometimes'
        ]);

        $request->user()->posts()->create($this->state);
        $this->reset('state');
    }

List of posts

Now, we will proceed with the list of posts, where we will include both the posts we created and those in which we were tagged.

In resources/views/livewire/post/post-list.blade.php:

<div>
    <div class="max-w-xl mx-auto mt-16">
        @foreach($posts as $post)
            <div class="bg-white p-6 rounded-md shadow-md text-center break-words mt-4">
                <p class="text-gray-700">
                    "{{$post->message}}"
                </p>
                <p class="text-blue-500 text-sm">{{ optional($post->taggedUser)->name ? '@'.$post->taggedUser->name : '' }}</p>
                <p class="text-end text-sm text-gray-500 mt-2">{{$post->user->name}}</p>
            </div>
        @endforeach
    </div>
</div>

In app/Livewire/Posts/PostList.php:

<?php

namespace App\Livewire\Posts;

use Livewire\Component;

class PostList extends Component
{
    public $posts;

    public function render()
    {
        $this->posts = auth()->user()->posts()
            ->orWhere('tagged_user_id', auth()->user()->id)
            ->orderBy('id', 'desc')
            ->get();

        return view('livewire.posts.post-list');
    }
}

Reactivity

When a post is created, you need to reload the screen to view it. However, with Livewire, we were able to make the listing reactive. This means that when we create a post the list will be updated automatically.

But how?
Let's dispatch the creation component to the listing component, indicating that it is necessary to update the list.

In app/Livewire/Posts/PostCreate.php let's add dispatch:

        $this->dispatch('refreshPostList');

In app/Livewire/Posts/PostList.php let's add our listener with the refresh event:

    protected $listeners = [
        'refreshPostList' => '$refresh'
    ];

Ready! Our features are now reactive.

Broadcasting and Notifications 📡

Northon Iserhardt — Thu, 28 Dec 2023 00:41:14 +0000

Notifications

Notifications are a means of letting our users know that something has happened, and there are different types of notifications, such as email and SMS, but for this project, we will use push notifications, which are messages sent to users' devices, even when the application is closed or not in use. Generally these notifications are displayed with the “bell” icon.

In the documentation, under notifications: https://laravel.com/docs/10.x/notifications we can find what we need for the notifications to work. One of the dependencies is broadcast: https://laravel.com/docs/10.x/notifications#broadcast-notifications, the documentation itself instructs us to configure and understand the concept of broadcasting, and that is exactly what we will do before proceeding:

Broadcasting

Briefly, according to the documentation, broadcasts are channels that allow you to share the same event names and data between your Laravel application on the server and your JavaScript application on the client. Clients connect on the frontend in pre-named channels, while your Laravel application broadcasts events to these channels in the backend. These events can contain any additional data that you want to make available to the frontend. Broadcasting is what will enable our backend to inform our frontend in real time when something occurs.

Initial configuration to use Broadcasting

We need to have a Pusher account that will be our server-side broadcasting driver. Once inside pusher you can create a free test account (Sandbox).

After registering, you have to create an app:

Then we will get our credentials and fill in the .env:

.env variables:

Let's use queues, so we need to configure a queue worker in the .env:

Execute the commands:
php artisan queue:table
php artisan migrate

Now we must have a new table in our database:

This table stores all jobs that have not yet been executed by our queue.

Broadcasting configuration

Uncomment "App\Providers\BroadcastServiceProvider" in the providers array in your config/app.php file:
Install the Pusher Channels PHP SDK:
composer require pusher/pusher-php-server
Change your broadcasting driver to the pusher in the .env file:
Install Laravel Echo, a JavaScript library that makes it simple to subscribe to channels and listen for events transmitted by the server-side broadcasting driver. Let's take the opportunity to install pusher-js, since we chose Pusher as the driver:
npm install --save-dev laravel-echo pusher-js
Create a new instance of Echo in JavaScript for the application; A great place to do this is in the resources/js/bootstrap.js configuration file. The file already has an example that we will use as a reference:
Let's compile the application:
npm run dev
In our project we will use private channels, which are channels that require authorization to be accessed. You can find more details here: https://laravel.com/docs/10.x/broadcasting#defining-authorization-routes

We need to define our channel authorization rules in routes/channels.php, and we will use the example channel:

In this example, we are passing the logged in user, which is the default, and the id of a user through "{id}", to check if the user id we are passing is the same as the logged in user.

Authentication 🔐

Northon Iserhardt — Thu, 28 Dec 2023 00:40:59 +0000

Authentication

Let's access the authentication tab in the documentation: https://laravel.com/docs/10.x/authentication which will instruct us to use a starter kit, as we can see below:

The main starter kit to be mentioned is Laravel Breeze which has several features including Tailwind CSS for our frontend, so let's use it https://laravel.com/docs/10.x/starter-kits#laravel-breeze-installation:

composer require laravel/breeze --dev
php artisan breeze:install

To this project we're gonna choose this Livewire version:

For sure...

And then we're gonna choose PHPUnit for future unit tests:

php artisan migrate
npm install
npm run dev

Now we have 2 new links, let's register and log in:

So we have finished registration, login and password reset functionalities:

Introduction 🚀

Northon Iserhardt — Thu, 28 Dec 2023 00:40:31 +0000

Motivation

When a problem arises, what do most of us developers do with some frequency? CTRL+C + Google + CTRL+V.

We usually look for ready-made scripts that solve the problem, whether through AIs, forums or other means, but we rarely resort to documentation, which is the mother of our development tools.

With the spread of "from zero to hero" courses, definitive guides and the possibility of becoming an expert in something "in the blink of an eye", it seems that studying documentation has become an increasingly distant practice.

Therefore, today we will explore, understand and build a project with more advanced features, step by step, using only our beloved documentation.

Tools

For this project, we will use Laravel, one of the biggest, most popular and most complete frameworks for PHP, along with Livewire, which will help us make our notifications real-time and reactive. Let's create a project from scratch and implement authentication and notification features for users tagged in posts.

Installation

Let's access the documentation installation tab: https://laravel.com/docs/10.x/installation which will explain to us that we need PHP and Composer to be able to install it:

composer create-project laravel/laravel still-loving-docs

Let's start the project:

cd still-loving-docs
php artisan serve

Okay, our Laravel project is already working at: http://localhost:8000, you can also choose to use Nginx as a server, but in this tutorial we will follow the documentation.

Don't forget to update your .env with the environment variables: https://laravel.com/docs/10.x/installation#environment-based-configuration](https://laravel.com/docs/10.x/installation#environment-based-configuration)

Notificações e Conclusão 🎉

Northon Iserhardt — Tue, 26 Dec 2023 22:36:00 +0000

Agora, voltando as notificações

Vamos agora adicionar um espaço na barra de navegação para exibir nossas notificações.

Em resources/views/layouts/app.blade.php adicione o código abaixo para podermos usar o material icons:

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

Vamos criar o componente de notificações:
php artisan make:livewire components.notification

Em resources/views/livewire/layout/navigation.blade.php adicione:

@livewire('components.notification')

Mobile:

@livewire('components.notification')

Vamos incorporar o Laravel Echo para monitorar eventos de notificações. Dessa forma, assim que uma notificação for recebida, poderemos recarregar dinamicamente os componente de notificações e listagem de posts.

<script>
    document.addEventListener('DOMContentLoaded', () => {
        Echo.private('App.Models.User.{{auth()->user()->id}}')
            .notification(() => {
                Livewire.dispatch('refreshNotification');
                Livewire.dispatch('refreshPostList');
            });
    });
</script>

Em resources/views/livewire/components/notification.blade.php:

<div>
    <x-dropdown align="right" width="48">
        <x-slot name="trigger">
            <button
                class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150">
                <span class="rounded-full p-1 bg-red-500 text-white">17</span>
                <span class="material-symbols-outlined">
                    notifications
                </span>
            </button>
        </x-slot>
        <x-slot name="content">
            <div class="p-3 text-center">
                <p>some notifications</p>
            </div>
        </x-slot>
    </x-dropdown>
</div>

Classe de notificação

Como vamos mandar nossas notificações via canal database, precisamos criar a tabela de notificações:
php artisan notifications:table
php artisan migrate

Para criar um classe de notificação:
php artisan make:notification PostCreated

Um novo diretório contendo nossa classe será criado:

Em app/Notifications/PostCreated.php vamos adicionar as configurações de broadcast:
O construtor:

    public $userId;
    public $dataNotify;

    /**
     * Create a new notification instance.
     */
    public function __construct($userId, $dataNotify)
    {
        $this->userId = $userId;
        $this->dataNotify = $dataNotify;
    }

Canal e tipo:

    /**
     * Get the notification's delivery channels.
     *
     * @return array<int, string>
     */
    public function via(object $notifiable): array
    {
        return ['broadcast', 'database'];
    }

    public function broadcastType()
    {
        return 'broadcast.message';
    }

Nome do canal e conexão:

    public function toBroadcast(object $notifiable): BroadcastMessage
    {
        return (new BroadcastMessage($this->dataNotify))->onConnection('database');
    }

    public function broadcastOn(): Channel
    {
        return new PrivateChannel("App.Models.User.{$this->userId}");
    }

Para enviar notificações, optaremos por utilizar a trait Notifiable, que já está incorporada no nosso modelo User por padrão. Isso nos proporciona uma abordagem eficiente e pronta para uso. Para obter mais informações sobre a utilização desta trait https://laravel.com/docs/10.x/notifications#using-the-notifiable-trait.

Em app/Livewire/Posts/PostCreate.php vamos adicionar a ação de notificar um novo Post para o usuário que for marcado:

if ($this->state['tagged_user_id']) {
    $taggedUser = User::query()->find($this->state['tagged_user_id']);
    $taggedUser?->notify(new PostCreated($taggedUser['id'], $this->state));
}

A documentação explica a maneira correta de recuperar as notificações dos usuários https://laravel.com/docs/10.x/notifications#accessing-the-notifications.

Vamos adicionar a lógica de recuperação das notificações em app/Livewire/Components/Notification.php:

    protected $listeners = [
        'refreshNotification' => '$refresh'
    ];

    public $notifications;
    public $notificationsCounter;

    public function getNotifications()
    {
        $this->notifications = auth()->user()->unreadNotifications;
        $this->notificationsCounter = $this->notifications->count();

    }

    public function render()
    {
        $this->getNotifications();

        return view('livewire.components.notification');
    }

E vamos modificar a blade para exibir o contador de notificações:

<div>
    <x-dropdown align="right" width="48">
        <x-slot name="trigger">
            <button
                class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150">
                @if($notificationsCounter)
                    <span class="rounded-full p-1 bg-red-500 text-white">{{$notificationsCounter}}</span>
                @endif
                <span class="material-symbols-outlined">
                    notifications
                </span>
            </button>
        </x-slot>
        <x-slot name="content">
            @foreach($notifications as $notification)
                <div class="p-3 text-center">
                    <p>You have been tagged in a new post!</p>
                </div>
            @endforeach
        </x-slot>
    </x-dropdown>
</div>

Vamos iniciar o nosso worker:
php artisan queue:work

Nesse momento nossas notificações já estão sendo processadas em filas e sendo direcionadas em tempo real para os usuários marcados, como a seguir:

Conclusão

Conseguimos construir, passo a passo, a funcionalidade de notificações em tempo real utilizando Laravel e Livewire, seguindo apenas as documentações oficiais. Apesar do sucesso, ainda há diversas melhorias possíveis para aprimorar o projeto, tais como:

Criação da camada de validação.
Criação da camada de repositório.
Passar dados para a notificação, como o nome de quem marcou o usuário.
Marcar as notificações como lidas.

Estou deixando o link do repositório para quem tiver interesse: https://github.com/northoniserhardt/still-loving-docs

Além disso, você é quem decide! Muito obrigado por ter acompanhado o tutorial.

Criação, Listagem e Reatividade 📜

Northon Iserhardt — Tue, 26 Dec 2023 22:33:18 +0000

Posts

Para prosseguirmos com as notificações, precisamos de eventos que as acionem. Como mencionado anteriormente, notificaremos um usuário sempre que ele for marcado em um post. Portanto, avançaremos para a criação dos posts.

Novos posts

Vamos adicionar a nossa navbar uma opção para o cadastro dos posts:

Em resources/views/livewire/layout/navigation.blade.php:

<x-nav-link :href="route('posts.index')" :active="request()->routeIs('posts.index')" wire:navigate>
    {{ __('Posts') }}
</x-nav-link>

<x-responsive-nav-link :href="route('posts.index')" :active="request()->routeIs('posts.index')" wire:navigate>
    {{ __('Posts') }}
</x-responsive-nav-link>

Através dos comandos do Laravel podemos criar vários recursos ao mesmo tempo, para mais detalhes https://laravel.com/docs/10.x/eloquent#generating-model-classes, no nosso caso vamos criar a Model, migration and controller with resources:
php artisan make:model -mrc Post

Em database/migrations/{date}_create_posts_table.php:

    public function up(): void
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->foreignId('user_id')->constrained()->cascadeOnDelete();
            $table->foreignId('tagged_user_id')->nullable()->constrained('users')->cascadeOnDelete();
            $table->string('message', 280);
            $table->timestamps();
        });
    }

tagged_user_id pode ser nula, visto que, um post pode ser criado sem ter que marcar alguém.

Vamos rodar as migrations:
php artisan migrate

Em routes/web.php:

Route::view('posts','posts.index')->middleware('auth')->name('posts.index');

Em app/Models/Post.php:

    protected $fillable = [
      'user_id',
      'tagged_user_id',
      'message',
    ];

    public function user(): BelongsTo
    {
        return $this->belongsTo(User::class);
    }

    public function taggedUser(): BelongsTo
    {
        return $this->belongsTo(User::class, 'tagged_user_id');
    }

Em app/Models/User.php:

    public function posts(): HasMany
    {
        return $this->hasMany(Post::class);
    }

    public function taggedPosts(): HasMany
    {
        return $this->hasMany(Post::class, 'tagged_user_id');
    }

Vamos criar os componentes de cadastro e listagem dos posts:
php artisan make:livewire posts.post-create
php artisan make:livewire posts.post-list

Vamos criar em resources/views/posts o arquivo index.blade.php, e importaremos o layout default com nossos componentes:

<x-app-layout>
    @livewire('posts.post-create')
    @livewire('posts.post-list')
</x-app-layout>

Um ponto de atenção: Para tornar o projeto mais simples não trabalharemos com camadas de validação e repositório.

Em resources/views/livewire/posts/post-create.blade.php:

<div>
    <form class="grid grid-cols-2 max-w-xl mx-auto m-6" wire:submit.prevent="save">
        <textarea
            wire:model="state.message"
            placeholder="{{ __('Post Message') }}"
            class="col-span-2 w-full shadow rounded-lg border-gray-200"
        ></textarea>
        @error('state.message') <span class="error">{{ $message }}</span> @enderror

        <select wire:model="state.tagged_user_id" class="mt-4 border-gray-200 rounded-lg">
            <option value=""></option>
            @foreach($users as $user)
                <option value="{{$user->id}}">{{$user->name}}</option>
            @endforeach
        </select>
        @error('state.tagged_user_id') <span class="error">{{ $message }}</span> @enderror

        <div class="flex justify-end">
            <button class="w-16 rounded-lg mt-4 bg-blue-500 shadow text-white">{{ __('Save') }}</button>
        </div>
    </form>
</div>

Vamos adicionar em app/Livewire/Posts/PostCreate.php:

    public $state = [
        'tagged_user_id' => null,
        'message' => ''
    ];

    public $users = null;

    public function mount()
    {
        $this->users = User::query()->get();
    }

    public function save(Request $request)
    {
        $this->validate([
            'state.message' => 'required|max:280',
            'state.tagged_user_id' => 'sometimes'
        ]);

        $request->user()->posts()->create($this->state);
        $this->reset('state');
    }

Listagem dos posts

Agora, procederemos com a listagem dos posts, onde incluiremos tanto os posts que criamos quanto aqueles nos quais fomos marcados.

Em resources/views/livewire/post/post-list.blade.php:

<div>
    <div class="max-w-xl mx-auto mt-16">
        @foreach($posts as $post)
            <div class="bg-white p-6 rounded-md shadow-md text-center break-words mt-4">
                <p class="text-gray-700">
                    "{{$post->message}}"
                </p>
                <p class="text-blue-500 text-sm">{{ optional($post->taggedUser)->name ? '@'.$post->taggedUser->name : '' }}</p>
                <p class="text-end text-sm text-gray-500 mt-2">{{$post->user->name}}</p>
            </div>
        @endforeach
    </div>
</div>

Em app/Livewire/Posts/PostList.php:

<?php

namespace App\Livewire\Posts;

use Livewire\Component;

class PostList extends Component
{
    public $posts;

    public function render()
    {
        $this->posts = auth()->user()->posts()
            ->orWhere('tagged_user_id', auth()->user()->id)
            ->orderBy('id', 'desc')
            ->get();

        return view('livewire.posts.post-list');
    }
}

Reatividade

Quando um post é criado, é necessário recarregar a tela para visualizá-lo. No entanto, com Livewire, conseguimos tornar a listagem reativa. Isso significa que ao criarmos um post, a lista será atualizada automaticamente.

Mas como?
Vamos realizar um dispatch do componente de criação para o componente de listagem, indicando que é necessário atualizar a lista.

Em app/Livewire/Posts/PostCreate.php vamos adicionar o dispatch:

        $this->dispatch('refreshPostList');

Em app/Livewire/Posts/PostList.php vamos adicionar nosso listener com o evento de refresh:

    protected $listeners = [
        'refreshPostList' => '$refresh'
    ];

Pronto! Nossas funcionalidades já estão reativas.

Broadcasting e Notificações 📡

Northon Iserhardt — Tue, 26 Dec 2023 22:33:02 +0000

Notificações

Notificações são um meio de informar aos nossos usuários que algo aconteceu. Existem diversos tipos de notificações, como e-mail e SMS, mas para este projeto, utilizaremos notificações do tipo push, que são mensagens enviadas aos dispositivos dos usuários, mesmo quando o aplicativo está fechado ou não em uso. Geralmente, essas notificações ficam no ícone do "sininho".

Na documentação, em notificações: https://laravel.com/docs/10.x/notifications conseguimos encontrar o que precisaremos para que as notificações funcionem. Uma dependência é o broadcast: https://laravel.com/docs/10.x/notifications#broadcast-notifications, a própria documentação nos instrui a configurar e compreender o conceito de broadcasting, e é exatamente isso que faremos antes de prosseguir:

Broadcasting

Resumidamente, de acordo com a documentação, os broadcasts são canais que permitem compartilhar os mesmos nomes de eventos e dados entre sua aplicação Laravel no servidor e sua aplicação JavaScript no cliente. Os clientes se conectam no frontend em canais pré-nomeados, enquanto sua aplicação Laravel transmite eventos para esses canais no backend. Esses eventos podem conter qualquer dado adicional que você queira disponibilizar para o frontend. Broadcasting é o que possibilitará que nosso backend informe em tempo real ao nosso frontend quando algo ocorre.

Configuração inicial para utilizar Broadcasting

Precisamos ter uma conta no Pusher que será nosso server-side broadcasting driver, você pode criar uma conta gratuita de teste (Sandbox). Posteriormente criar um app: Depois vamos pegar nossas credenciais e preencher no .env: .env:

Vamos usar queues, logo precisamos configurar um queue worker Queue: No .env:

Executar os comandos:
php artisan queue:table
php artisan migrate
Agora devemos ter uma nova tabela no nosso banco de dados:

Essa tabela guarda todos os jobs que ainda não foram executados pela nossa queue.

Configuração do broadcasting

Descomente "App\Providers\BroadcastServiceProvider" no array de providers do seu arquivo config/app.php

Instale o Pusher Channels PHP SDK:
composer require pusher/pusher-php-server
Mude seu driver de broadcasting para o pusher no arquivo .env:
Instale o Laravel Echo, uma biblioteca JavaScript que torna simples se inscrever em canais e ouvir eventos transmitidos pelo driver de broadcasting no lado do servidor. Vamos aproveitar para instalar o pusher-js, já que escolhemos o Pusher como driver:
npm install --save-dev laravel-echo pusher-js
Crie uma nova instância do Echo em JavaScript para a aplicação; um ótimo local para fazer isso é no arquivo de configuração resources/js/bootstrap.js. O arquivo já possui um exemplo que usaremos como referência:
Vamos compilar a aplicação:
npm run dev
No nosso projeto usaremos canais privados, canais que precisam de autorização para serem acessados. Você pode encontrar mais detalhes aqui: https://laravel.com/docs/10.x/broadcasting#defining-authorization-routes

Precisamos definir nossas regras de autorização de canais em routes/channels.php, usaremos o canal de exemplo:

Nesse exemplo estamos passando o usuário logado que é padrão, e o id de algum usuário através do "{id}", para verificar se o id do usuário que estamos passando é o mesmo do usuário logado.

Autenticação 🔐

Northon Iserhardt — Tue, 26 Dec 2023 22:32:39 +0000

Autenticação

Vamos acessar a aba de autenticação da documentação:https://laravel.com/docs/10.x/authentication que vai nos instruir a usar um starter kit, o primeiro citado é o Laravel Breeze, então vamos usá-lo:

O principal starter kit a ser citado é o Laravel Breeze que conta com diversos recursos incluindo Tailwind CSS para nosso frontend, então vamos usá-lo https://laravel.com/docs/10.x/starter-kits#laravel-breeze-installation:

composer require laravel/breeze --dev
php artisan breeze:install

Vamos usar o Livewire:

É claro...

Vamos escolher o PHPUnit para futuros testes unitários:

php artisan migrate
npm install
npm run dev
Agora temos 2 novos links, vamos nos registrar e logar:

Já temos as funcionalidades de registro, login e reset de senha:

Introdução 🚀

Northon Iserhardt — Tue, 26 Dec 2023 15:34:05 +0000

Motivação

Na hora em que um problema surge, o que a maioria de nós desenvolvedores faz com certa frequência? CTRL+C + Google + CTRL+V.

Costumamos procurar por scripts prontos que resolvam o problema, seja através de IAs, fóruns ou outros meios, mas raramente recorremos à documentação, que é a mãe das nossas ferramentas de desenvolvimento.

Com a disseminação dos cursos "do zero ao herói", guias definitivos e a possibilidade de se tornar especialista em algo "em um piscar de olhos", parece que estudar a documentação tem se tornado uma prática cada vez mais distante.

Por isso, hoje exploraremos, entenderemos e construiremos um projeto com funcionalidades mais avançadas, passo a passo, utilizando apenas a nossa querida documentação.

Ferramentas

Para este projeto, usaremos o laravel, um dos maiores, mais populares e mais completos frameworks para PHP, juntamente com o Livewire, que nos ajudará a tornar nossas notificações em tempo real e reativas. Vamos criar um projeto do zero e implementar as funcionalidades de autenticação e notificações para usuários marcados em posts.

Instalação

Vamos acessar a aba de instalação da documentação: https://laravel.com/docs/10.x/installation que vai nos explicar que precisamos do PHP e Composer para podermos instalá-lo:

composer create-project laravel/laravel still-loving-docs

Vamos startar o projeto:

cd still-loving-docs
php artisan serve

Pronto, nosso projeto Laravel já está funcionando em: http://localhost:8000, você também pode optar por usar como servidor o Nginx, mas nesse tutorial seguiremos conforme a documentação.

Não esqueça de atualizar seu .env com as variáveis de ambiente:https://laravel.com/docs/10.x/installation#environment-based-configuration

Building an Interactive TikTok Live Game with Js

Northon Iserhardt — Mon, 09 Oct 2023 00:55:25 +0000

Motivation

A not-that-used feature of TikTok is its live streams, where we can interact with streamers through chat, likes, and gifts, making the experience more engaging. But what if we could not only interact with streamers but also play games?

There are live streams where viewers can directly interact with the games themselves, after discovering this format I thought it would be fun to develop a game like that, and that's what we'll talk about.

The game we'll create is tug of war, but with a cute and exciting twist... I would like to express my heartfelt thanks in advance to @BrunaUmgelter for her incredible work on the game's artwork.

Gameplay Mechanics

Our game will feature 2 teams, red and blue, represented by 2 characters, players will join these teams, and their likes will be converted into strength for their team every turn (1 second), and the team with more strength will make our character pull the other toward a big drop into a small pool.

But don't worry; they are excellent swimmers. Upon winning, the character will celebrate with their respective grandstand.

Architecture

We will work on three fronts:

Our server, which will listen to the live stream and provide this data through a websocket.
Our game logic file, which will listen to our server, waiting for events from live stream interactions.
Our game interface.

Setting Up the Server (server.js)

With the server, it will be possible to connect to live streams through the tiktok-live-connector package and subsequently provide this data to our game via a websocket:

Implementing Game Logic (game.js)

The game.js file is where all the game logic is concentrated. Firstly, it listens to events coming from our server.js, and based on these events, it performs actions such as assigning players to teams, increasing team strengths, determining the stronger team, executing the character pulling action, determining the winning team, and manipulating elements of our interface.
Once connected to a live you must comment '#1' to join blue team or '#2' to join red team.

Listening to events, assigning players to teams, and computing likes:

Manipulating the interface to move characters, handle defeats, victories, and celebrations:

Building the User Interface (index.html)

Our interface includes all the visual elements that will be manipulated such as the characters, the pool, the surroundings, and the grandstands:

Result

For those who want to test and/or contribute to the project, here is the GitHub link: https://github.com/northoniserhardt/tiktok-live-game

Next Steps

For the continuation of the project, some interesting points could include:

Adding photos of the team's players to the crowd in the grandstand.
Keeping track of team victories.
Display a ranking with photos of viewers who contributed the most strength through likes.

Conclusion

I would like to thank everyone who has read this far and once again, @BrunaUmgelter for her collaboration. Please feel free to send questions, suggestions, and critiques.
Big hugs.