Forem: Rezaul H Reza

Creating a Chart.js Component in Alpine.js and Livewire: A Step-by-Step Guide

Rezaul H Reza — Fri, 30 Dec 2022 17:19:29 +0000

In this tutorial, we will learn how to create a Chart.js component in Alpine.js, a lightweight JavaScript framework that allows you to bind dynamic data to HTML templates. We will use the code provided above as a starting point, but first, let's take a closer look at the different components and how they work together.

The x-data attribute:

The x-data attribute is used to define the initial state of an Alpine component. In this case, we have defined a property called chart which is set to null. This will be used to store the Chart.js object that we will create later.

The x-init attribute:

Thex-init attribute is used to execute JavaScript code when the component is initialized. This is where we will create the Chart.js object and configure it with the desired options.

The canvaselement:

The canvas element is used to render the chart. We have given it an id of myChart so that we can easily reference it in our JavaScript code.

The Chart.js library:

Finally, we need to include the Chart.js library in our HTML file. This can be done by adding a script element that points to the Chart.js CDN.

Now that we have an overview of the different components, let's see how they work together to create a Chart.js component in Alpine.js.

Step 1:

First, we need to define the x-data attribute for our component. As mentioned earlier, this is where we will define the initial state of our component, which in this case is a property called chart set to null.

<div x-data="{ chart: null }"> ... </div>

Step 2:

Next, we will use the x-init attribute to execute some JavaScript code when the component is initialized. This is where we will create the Chart.js objectand configure it with the desired options.

<div x-data="{ chart: null }" 
x-init=" chart = new Chart(document.getElementById('myChart').getContext('2d'), 
{ type: 'line', data: { labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], 
datasets: [{ label: 'My First Dataset', data: [65, 59, 80, 81, 56, 55, 40],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)', borderWidth: 1 }] },
 options: {} }); "> ... </div>

In this code, we are using the Chart constructor function provided by the Chart.js library to create a new chart. We pass in the canvas element's 2D rendering context as the first argument, and an object containing the chart configuration options as the second argument.

Step 3:

Next, we will add the canvas element to our component. This is where the chart will be rendered.

<div x-data="{ chart: null }" x-init="
  chart = new Chart(document.getElementById('myChart').getContext('2d'), {
    type: 'line',
    data: {
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [{
        label: 'My First Dataset',
        data: [65, 59, 80, 81, 56, 55, 40],
        backgroundColor: 'rgba(255, 99, 132, 0.2)',
        borderColor: 'rgba(255, 99, 132, 1)',
        borderWidth: 1
      }]
    },
    options: {}
  });
">
  <h1>Dashboard</h1>
  <hr>
  <canvas id="myChart" width="400" height="400"></canvas>
</div>

Step 4:

Finally, we need to include the Chart.js library in our HTML file . For the sake of this post, we will implement it by adding a script element that points to the Chart.js CDN.

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>

If we refresh the page now we should be able to see something like this

To implement the same thing and get the data from a livewire component, we can do the following:

Create a livewire component.
Define properties to entangle with alpine.js
Copy and paste the above snippet into the component's view file.

Let us create a new livewire component.

php artisan make:livewire LivewireComponent

Then update the component class with:

<?php

use Livewire\Component;

class LivewireComponent extends Component
{
    public $name = 'Revenue by month with Livewire';

    public $labels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];

    public $dataPoint = [65, 59, 80, 81, 56, 55, 40];

    public function render()
    {
        return view('livewire-component');
    }
}

Note that the above are dummy data. To get data from database, you have to make the changes on query for your specific needs.

Once done, we have to update replace the labels and datasets. Let's do it now.

<div x-data="{ chart: null }" x-init="
    chart = new Chart(document.getElementById('myChart').getContext('2d'), {
      type: 'line',
      data: {
        labels: $wire.labels,
        datasets: [{
          label: $wire.name,
          data: $wire.dataPoint,
          backgroundColor: 'rgba(255, 99, 132, 0.2)',
          borderColor: 'rgba(255, 99, 132, 1)',
          borderWidth: 1
        }]
      },
      options: {}
    });
  ">
    <canvas id="myChart" width="400" height="400"></canvas>
  </div>

Output:

We can also change the type of chart we want. Simply change the value

type: 'line'

type:'bar'
or
type: 'pie'

We should then be able to display a pie or a bar chart.

Try it on Laravel Playground !

And that's it! You now have a Chart.js component in Alpine.js and/or Livewire that displays a line/bar/pie chart. You can customize the chart further by modifying the configuration options passed to the Chart constructor function. For more information on the different options available, you can refer to the Chart.js documentation.

I also post awesome free and premium components and articles on my website. You can find some amazing content there.

Thanks

MessageBird Integration with Laravel

Rezaul H Reza — Fri, 30 Dec 2022 14:06:26 +0000

Welcome to our tutorial on integrating MessageBird with Laravel!

In this tutorial, we will show you how to install the laravel-notification-channels/messagebird package and set up your environment variables. We will also demonstrate how to test the integration using the PHPUnit framework.

Before we begin, it's important to note that you will need to have an account with MessageBird in order to use their SMS service. If you don't already have an account, you can Sign Up for one at their website.

Now, let's get started.

Installing the Package

The first step in integrating MessageBird with Laravel is to install the laravel-notification-channels/messagebird package. This package provides a MessageBird channel for Laravel's notification system, allowing you to send SMS messages through MessageBird from your Laravel application.

To install the package:

composer require laravel-notification-channels/messagebird

Setting Up Your Environment Variables

Next, you'll need to set up your environment variables. The laravel-notification-channels/messagebird package requires several environment variables in order to connect to the MessageBird API.

First, you'll need to add your MessageBird API key to the .envfile. You can find your API key in the MessageBird dashboard under "API Access (REST)".

MESSAGEBIRD_API_KEY=your-api-key-here

The final version of .env variables should look like this:

rest of the env variables.....

Messagebird

MESSAGEBIRD_ACCESS_KEY=api_key
MESSAGEBIRD_ORIGINATOR=NameOrNumberMessageWillBeSentFrom
MESSAGEBIRD_TEST_RECIPIENT=

In our services.php:

<?php


return [

//..........


'messagebird' => [
        'access_key' => env('MESSAGEBIRD_ACCESS_KEY'),
        'originator' => env('MESSAGEBIRD_ORIGINATOR'),
    ],


];

Implementing and Testing the Integration

Now that you have the laravel-notification-channels/messagebird package installed and your environment variables set up, it's time to implement and test the integration.

Create a notification using

php artisan make:notification MessageCreated

This will now create a new notification class in the app/notifications directory.

The beauty of laravel notifications classes are it’s very easy to send notifications.

The new notification class should look like this.

<?php

namespace App\Notifications\Customers;

use Illuminate\Bus\Queueable;
use Illuminate\Notifications\Notification;
use Illuminate\Contracts\Queue\ShouldQueue;
use NotificationChannels\Messagebird\MessagebirdChannel;
use NotificationChannels\Messagebird\MessagebirdMessage;

class MessageCreated extends Notification implements ShouldQueue
{
    use Queueable;

    public function via($notifiable)
    {
        return [MessagebirdChannel::class];
    }

    public function toMessagebird($notifiable)
    {
        $message = new MessagebirdMessage("Message Sent!");

        if (app()->environment('local', 'testing')) {
            $message->setRecipients([env('MESSAGEBIRD_TEST_RECIPIENT')]);
        }

        return $message;
    }
}

Time to start integrating them in our application!

For the sake of this example, we are using Livewire.

We will create a component called TestComponent.
`
<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Notification;//illuminate/facade
use App\Models\Order;
use App\Notifications\MessageCreated;

class TestComponent extends Component
{

public $order;

public $orderId;

public $name;

public $qty;

public $note;

public $phoneNumber;


public function store()
{

    $this->order = Order::updateOrCreate(['id' => $this->orderId], [
        'name' => $this->name,
        'qty' => $this->qty
        'note' => $this->note ?? '',
        'user_id' =>  auth()->user()->id,

    ]);

    // Notify the user
    $phone = optional($this->phoneNumber ?? '';//phone number must be in international format e.g +4478.....
    if ($phone) {

//this line is responsible to send notification when this method is called.
Notification::route('messagebird', $phone)->notify(new MessageCreated);
}

}


public function render()
{

    return view('livewire.test-component');
}

}
`

Let’s update our view file.

<div>
<div class="flex flex-col">
    <label class="block font-bold mb-2 text-gray-700" for="name">
        Name
    </label>
    <input 
        class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" 
        id="name"
        wire:model="name"
        type="text" 
        placeholder="Enter your name"
    >
    <label class="block font-bold mb-2 text-gray-700" for="qty">
        Quantity
    </label>
    <input 
        class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" 
        id="qty"
        wire:model="qty"
        type="number" 
        placeholder="Enter the quantity"
    >
    <label class="block font-bold mb-2 text-gray-700" for="note">
        Note
    </label>
    <textarea
        class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" 
        id="note"
        wire:model="note"
        placeholder="Enter a note"
    ></textarea>
    <label class="block font-bold mb-2 text-gray-700" for="phoneNumber">
        Phone number
    </label>
    <input
        class="bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-purple-500" 
        id="phoneNumber"
        wire:model="phoneNumber"
        type="tel"
        placeholder="Enter your phone number"
    >
    <button
        class="bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
        wire:click="store"
    >
        Submit
    </button>
</div>
</div>

Now that we have created the component, it’s time to test the integration.

To do this, we'll use the PHPUnit.

First, add the following line to your phpunit.xml file:

<envname="MESSAGEBIRD_TEST_RECIPIENT"value="+447000000000" />

This will define a test recipient phone number that you can use in your tests. The reason we are including it here because we don’t want our production data to be in the test file.

Next, in your test file, make sure to use the Notification::fake() method at the top of your test or in the setup method. This will prevent any real SMS messages from being sent during your tests.

protected function setUp(): void { parent::setUp(); // Make sure we don't send real SMS texts Notification::fake(); }

After performing the action that should trigger an SMS message, you can use the Notification::assertSentTo() method to perform an assertion. This method takes three arguments: the notifiable entity, the notification class, and a callback function that should return true if the assertion should pass.

Here's an example of how you might use this method in a test:

function test_order_notification_is_sent()
 {

   protected function setUp(): void
 {
     parent::setUp();

     // Make sure we don’t send real SMS texts
     Notification::fake();
 }

     Livewire::actingAs($user)
         ->test(TestComponent::class)

         ->set(‘property ’, ‘property value)

         ->call(‘method’);//method to call i.e ‘submit’

     Notification::assertSentTo(
         new AnonymousNotifiable(),
         MessageCreated::class,
         function ($notification, $channels, $notifiable) {
             return $notifiable->routes[‘messagebird’] === ‘+447000000000’;
         }
     );
 }

Also, we need to change our AppServiceProvider. The integration will not work if guzzlecannot verify the

<?php

namespace App\Providers;

use GuzzleHttp\Client;
use NotificationChannels\Messagebird\MessagebirdClient;
use NotificationChannels\Messagebird\MessagebirdChannel;
use NotificationChannels\Messagebird\Exceptions\InvalidConfiguration;



public function boot()
{
          // Override Messagebird service provider to instruct Guzzle not to verify their API SSL certificate
        $this->app->when(MessagebirdChannel::class)
            ->needs(MessagebirdClient::class)
           ->give(function () {
                $config = config('services.messagebird');

                if (is_null($config)) {
                    throw InvalidConfiguration::configurationNotSet();
               }

                return new MessagebirdClient(new Client(['verify' => false]), $config['access_key']);
                });
}

Run the test and it should pass.
phpunit

That's it! You should now have a working integration between MessageBird and Laravel, and you can send message to your customers or users very easily.

If you have any questions or need further assistance, you can refer to the documentation for the laravel-notification-channels/messagebird package or the MessageBird documentation. You are also welcomed to leave a comment if you have any queries regarding the integration.

I also post awesome free and premium components and articles on my website. You can find some amazing content there.

Thanks