Forem: Chimezie Enyinnaya

Using npm packages in AdonisJS

Chimezie Enyinnaya — Sun, 11 Aug 2024 07:07:19 +0000

One of the most asked questions in the AdonisJS community has to be about how to use X package in AdonisJS. Those asking this question tend to forget that AdonisJS is a Node.js framework and as a result, we can use an npm package the same way we'd use it in any Node.js project.

In this tutorial, I'll show two ways of using an npm package in AdonisJS. I'll use the Paddle Node.js SDK to demonstrate this but the same principles apply to other npm packages.

Using the package directly

The simplest way to use an npm package in AdonisJS is to install the package and use it directly wherever we want to use it in our codebase.

We need to first install the package:

npm install @paddle/paddle-node-sdk

Let's say we are working with the concept of customer and we have a CustomersController. First, we import the package and then use it in the controller:

// app/controllers/customers_controller.ts

import { Paddle } from '@paddle/paddle-node-sdk'
import config from '@adonisjs/core/services/config'

export default class CustomersController {
  async handle({ auth }: HttpContext) {
    const paddle = new Paddle(config.get('services.paddle.apiKey'))

    await paddle.customers.get(auth.user!.paddleId)
  }
}

Using a service class

The problem with the above approach is that we end up littering our codebase with the same package import (and initialisation) over and over. For some packages that could be okay. For example, using a package like lodash. But with the package and concept we are working with, that might not be the case.

So to take the above implementation one step further, we could create a PaddleService. We could create the service manually but there's a command for that:

node ace make:service paddle

This will create an empty paddle_service.ts file inside app/services. Add the following code inside the file:

// app/services/paddle_service.ts

import config from '@adonisjs/core/services/config'
import { Customer, Paddle } from '@paddle/paddle-node-sdk'
import app from '@adonisjs/core/services/app'

export default class PaddleService {
  private paddle: Paddle

  constructor() {
    this.paddle = new Paddle(config.get('services.paddle.apiKey'))
 }

  async getCustomer(customerId: string): Promise<Customer> {
    return this.paddle.customers.get(customerId)
 }
}

Like before, we import the package and initiate it. For the usage, we create a method that we can use in controllers or other places. Now, we can keep all Paddle-specified implementations contained in one place.

We can make use of the service class in two ways. First, we import and initialise the class manually:

// app/controllers/customers_controller.ts

import { inject } from '@adonisjs/core'
import PaddleService from '#services/paddle_service'

export default class CustomersController {
  async handle({ auth }: HttpContext) {
    const paddle = new PaddleService()

    await paddle.customers.get(auth.user!.paddleId)
 }
}

The other way is to leverage AdonisJS Dependency Injection (DI) to initialise the class with the necessary dependencies. We can do that using the @inject decorator:

// app/controllers/customers_controller.ts

import { inject } from '@adonisjs/core'
import PaddleService from '#services/paddle_service'

export default class CustomersController {
  @inject()
  async handle({ auth }: HttpContext, paddle: PaddleService) {
    await paddle.customers.get(auth.user!.paddleId)
  }
}

Here, we are using method injection but we could also use constructor injection.

Conclusion

So that's how to use npm packages in AdonisJS. Remember, AdonisJS is just a Node.js framework.

Add Alpine.js to your Node Application

Chimezie Enyinnaya — Thu, 28 Oct 2021 17:34:24 +0000

Introduction to Alpine.js

Alpine.js is a modern, small and lightweight, CDN-first JavaScript framework for composing JavaScript behavior in your markup. It borrows its concepts from other frameworks like Vue, React, and jQuery. Think of it like Tailwind for JavaScript in the sense that it allows you to write most of your JavaScript inline in your HTML, making it easier to write declarative code.

Alpine.js is not designed to build SPAs, but rather to enhance your templates with a little bit of JavaScript. Alpine.js is designed to be used as a direct script include from a public CDN.

The main power of Alpine.js is its reactive nature. You use its directives to bind data and any changes made to it reverberate in the whole app regardless of the level of the emanation. Alpine.js is more like a UI interaction framework.

Alpine.js is also a DOM manipulation library. It makes it easy for us to interact with the DOM in a declarative way with lesser code.

Why choose Alpine.js

According to the creator, Caleb Porzio:

Alpine.js offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost. You get to keep your DOM and sprinkle in behavior where it is needed.

Alpine.js works well when you need a small amount of JavaScript, e.g. a few drop-downs or tabs. This means you get a bunch of power at a crazy small size with no need to npm install.

So, here are some reasons why you should consider using Alpine.js:

Size: In the introduction, I stated that Alpine.js is small and lightweight. It has the power of big frameworks yet has a small bundle size. Alpine.js comes in at 21.9kB minified and 7.1kB gzipped, compared to jQuery at 87.6kB minified and 30.4kB minified and gzipped. Only 23% the size!
Installation and learning: Installing Alpine is pretty straightforward. You’ll just need to add a script tag linking the library. That’s it. Really. You don’t need to compile your JavaScript or structure your project in any specific way; this makes it the perfect candidate for integration with existing projects*.* You also have an npm package available if your project is already using npm.

Its learning curve is also very low. The concepts and syntax behind the framework are heavily inspired by Vue.js. If you’re coming from a Vue background, you’ll most likely feel at home working with Alpine.js.

Basic syntax

Alpine.js syntax is very much inspired by Vue. Like Vue, Alpine uses an x- prefix on all its directives. Unlike Vue, Alpine.js doesn’t use a virtual DOM, so we get to work with the actual DOM directly. Alpine.js currently has 15 directives and 6 magic properties that become building blocks for many user interface scenarios. These directives allow you to do most of the things you would do with a more robust framework like templating, view/model data binding, UI transitions, and simplified event handling, all in a tiny package and directly in your HTML.

Let's go over a few directives:

x-data

Example:

<div x-data="[JSON data object]"></div>

This directive declares a new component scope. It tells the framework to initialize a new component with the following data object. Think of it as the data property of a Vue component. Only children of an element can access the x-data value declared on the element. Sibling elements, adjacent elements cannot access it.

x-show

Example:

<div x-show="[expression]"></div>

This directive toggles the visibility of components. It works the manipulating the CSS display style property of the element. The directive takes an expression, and the expression must resolve to a boolean value(true/false). If true, the element is shown by setting its CSS display property to a value other than none. If false, the display property of the element is set to none.

x-bind

Example

<div x-bind:[attribute]="[expression]" > ...<div>

This directive is used to set the value of an element's attribute. The expression is evaluated and the results of the evaluation become the value of the specified attribute.

x-text

Example

<div x-text="[expression]" >...<div>

This directive is used to set the inner text node of an element. The directive uses the innerText DOM property on the element to achieve this.

x-if

Example

<template x-if="[expression]"><div>...</div></template>

This directive conditionally renders elements based on the condition of their expression. If the condition is true, the element is visible. If the condition is false, the element is not visible. x-if does not use the display property for its conditional rendering, it removes or adds the elements to the DOM. Alpine.js says it is best to use the x-if directive in tags, this is because Alpine.js uses the real DOM, not a virtual DOM.

x-for

Example

<template x-for="[data] in [data]"><div>...</div></template>

This directive is used to iterate over the items in an array and create new DOM nodes for each item. Just like x-if, x-for is used in the template tag.

x-on

Example

<div x-on:[event]="[expression]"></div>

This directive attaches event listeners to the element it is set upon. When the event is emitted the JavaScript expression in the directive is run.

x-model

Example

<div x-model="[data item]"></div>

This directive is used for two-way binding. Most especially used in the input elements. What is two-way binding? A bound variable in the HTML view can be changed from the script and also from the HTML view. From either side the change occurred, both the script side and HTML view bound-data are updated.

To learn more about Alpine.js directives and Alpine.js as a whole, check out the documentation. We will use it in building our components much later.

Setting up the sanity schema and studio

First of all, create a new project, you can either create a new project in your terminal by this command:

sanity init

or from the official website https://sanity.io/get-started.

In this tutorial, we will be using the Sanity CLI. If you don’t have it installed already, you can set it up globally on your local machine.

npm install -g @sanity/cli

Proceed to create a new project, using:

sanity init

To create a new project, you need a Sanity.io account and you will be prompted to log in or create a new account, simply follow the instructions to set it up.

After successful authentication, you can then set a project name and use the default dataset configuration if you want to and confirm the project path.

The next option is quite important, you decide to use a project template with schema and sample data or start a clean project with no predefined schema. Here, I will be choosing the movie project template so we can use the data that comes with it.

Once we get a success message, we can then proceed to work on our schema for the project. Open the folder in your code editor and run the sanity studio in your terminal,

sanity start

This will open up the studio in our browser on http://localhost:3333/. You will be required to log in again.

We now have data from the movie project we started with and it already has 3 schemas.

What if we started with a clean project without a schema? Let’s create a new schema so we can learn how it is done.

Open the schemas folder in our project folder and create a new file, let’s call it trending.js. This will hold trending movies.

In our new schema file, let’s export a default object and give it a name, title, and type:

// schemas/trending.js

export default {
  name: 'trending',
  title: 'Trending',
  type: 'document',

}

We can now add fields to our new schema, this schema is supposed to show trending videos so let's add a field array to reflect that:

// schemas/trending.js

fields: [
  {
    name: 'title',
    title: 'Title',
    type: 'string',
  },
  {
    name: 'releaseDate',
    title: 'Release date',
    type: 'datetime',
  },
  {
    name: 'popularity',
    title: 'Popularity',
    type: 'number',
  },
  {
    name: 'poster',
    title: 'Poster Image',
    type: 'image',
    options: {
      hotspot: true,
    },
  },
]

After adding the fields, we need to let Sanity know that we have created a new schema. Head over to schema.js and import the new schema and add it to the schemaTypes array:

// schemas/schema.js

import trending from './trending'

export default createSchema({
  ...,
  types: schemaTypes.concat([
    ...,
    trending
  ]),
})

Now, if you go back to the studio running in the browser, the new schema is created.

That is how to create a schema in Sanity, though we won't actually be needing it for the rest of the tutorial.

So far, we have successfully set up Sanity schema and studio.

Adding Alpine.js

Remember I stated earlier that we will use Alpine.js for our frontend, let’s create components with Alpine.js that we need for this example. Create a frontend directory and inside it create an index.html file. To run the frontend, I'll be using VS Code's Live Server and the app will be ruining on http://127.0.0.1:5500/frontend. If you're not using VS Code, you might need to Google how to run a live server for your editor.

To add Alpine.js to a project, you can either make use of the CDN or through npm.

To use CDN, add the CDN link to the head section, It will initialize itself:

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

For production environments, To avoid unexpected behaviors and unexpected breakage from newer versions from Alpine.js, ensure you specify pin a specific version number in the CDN link. For example, to use version 3.4.2 (latest):

<script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>

To use npm, run the command:

npm i alpinejs

Then import it:

import 'alpinejs'

For the project we'll be building in this tutorial, we'll be using the CDN by adding the script tag to your index.html page:

<!-- frontend/index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Alpine.js and Sanity.io</title>
  <script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
</head>
<body>

</body>
</html>

Exploring Alpine.js Components

First, let’s create a small toggle functionality to learn how Alpine.js works.

<!-- frontend/index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Alpine.js and Sanity.io</title>
  <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/
        dist/alpine.min.js" defer></script>
</head>
<body>
  <div>
    <h1>This is a toggle button</h1>

    <button>Toggle</button>

    <div>
      <h1>Tadah! I am Visible</h1>
    </div>
  </div>
</body>
</html>

From the code above, Alpine.js CDN was added to the head section and the body includes a div with a text and button, the second div contains the content we are going to toggle. Let's add some Alpine.js code to the code above.

<div x-data="{ isOpen: false }">
  <h1>This is a toggle button</h1>

  <button>Toggle</button>

  <div x-show="isOpen">
    <h1>Tadah! I am Visible</h1>
  </div>
</div>

So here, the x-data directive is used to give state to the entire component and displays the second div when the value of isOpen is true. The x-show simply shows the div when it's true. Let’s make the button togglable.

<div x-data="{ isOpen: false }">
  <h1>This is a toggle button</h1>

  <button x-on:click="isOpen = !isOpen">Toggle</button>

  <div x-show="isOpen">
      <h1>Tadah! I am Visible</h1>
  </div>
</div>

And it works! Using the x-on, x-show, and x-data directives, we were able to create an interactive toggle.

Let’s try creating the other components before we work with our sanity data.

Performing interactions with Alpine.js

Let’s add a responsive navbar with more emphasis on applying interactions to its mobile view using Alpine.js. We will use Tailwind CSS for the styling. Tailwind CSS is a utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup.

Like Alpine.js, it can also be added to a project using its CDN. Include it in the head section

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" 
rel="stylesheet">

First, we start with a nav tag to contain all the code for the navigation bar.

<nav
    class="flex items-center justify-between flex-wrap p-6 fixed w-full z-10 top-0 bg-indigo-900"
    x-data="{ isOpen: false }"
    @keydown.escape="isOpen = false"
></nav>

Notice how x-data is used to set the default state of is open to false, this tells Alpine.js to keep the default state of the navbar closed. The @keydown.escape tells Alpine.js to set the navbar to close when there is a keydown press outside the navbar. Let’s add a button that will only be visible on mobile screens. Add the code snippet below inside <nav>:

<button
  @click="isOpen = !isOpen"
  type="button"
  class="block lg:hidden px-2 text-gray-500 hover:text-white focus:outline-none focus:text-white"
  :class="{ 'transition transform-180': isOpen }"
>
  <svg
    class="h-6 w-6 fill-current"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
  >
    <path
      x-show="isOpen"
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z"
    />
    <path
      x-show="!isOpen"
      fill-rule="evenodd"
      d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"
    />
  </svg>
</button>

The button contains a hamburger toggle that opens and closes when the button is clicked. It also has a class that hides in large screens. Finally, let’s create the menu just after the button above:

<div
  class="w-full flex-grow lg:flex lg:items-center lg:w-auto"
  :class="{ 'block shadow-3xl': isOpen, 'hidden': !isOpen }"
  @click.away="isOpen = false"
    x-show="isOpen"
  x-transition
>
  <ul class="pt-6 lg:pt-0  lg:flex justify-end flex-1 items-center">
        <li class="mr-3">
          <a
            class="inline-block py-2 px-4 text-white"
            href="#">Home</a>
        </li>
        <li class="mr-3">
          <a
            class="inline-block text-gray-300 hover:text-gray-200 py-2 px-4"
            href="#">Movies</a>
        </li>
        <li class="mr-3">
          <a
            class="inline-block text-gray-300 hover:text-gray-200 py-2 px-4"
            href="#">About</a>
        </li>
        <li class="mr-3">
          <a
            class="inline-block text-gray-300 hover:text-gray-200 py-2 px-4"
            href="#">Contact</a>
        </li>
    </ul>
</div>

So we have been able to build a responsive navigation bar (you will need to resize your browser window to see the button) using Alpine.js and Tailwind CSS for styling.

Performing HTTP request

Let’s create the body component of our movie app.

To perform HTTP requests from sanity, we need to get an API from sanity studio. To do that, go back to [http://localhost:3333](http://localhost:3333). Just in case you have closed it, run the command again in your terminal.

sanity start

Click on the Vision tab, the environment is divided into 3 sections, the query section for trying out search queries, and the result section displays results from the query search. The params sections are optional to use if you have specific parameters you want to add. Note that the query is based on the data you have in your dataset in Sanity. The default dataset is production, as we set it during the project creation but we can create another dataset.

Sanity uses GROQ as its query language, you can read more about GROQ here. Let’s search for movies in the query section.

*[_type == 'movie']

Upon running the query, a query URL was generated for us. This URL can be used to fetch data from sanity into our Alpine.js frontend.

Enabling CORS

Before we can be able to fetch data from sanity into our Alpine.js frontend, we need to enable CORS. That is, we need to add the URL the frontend app is running on as part of the hosts that can connect to the project API. We can do that from the API tab on your project settings as shown below:

Back in the index.html file, create a main tag that will house the whole component, then create a container with an h2 tag with some text. This is optional. Afterward, create a div, this div will carry out the HTTP request using fetch, and we will wrap our fetch request in x-init so that it loads immediately after the page is loaded. Like a typical fetch request, the URL will be the query URL generated from the studio.

<main class="mt-32">
  <div class="container mx-auto px-8">
    <h2>Hello</h2>

    <div 
      x-data="init()"
      x-init="fetch('https://nhksjapu.api.sanity.io/v2021-03-25/data/query/production?query=*%5B_type%20%3D%3D%20%22movie%22%5D%20%7B%20title%2C%20releaseDate%2C%20%22imageUrl%22%3A%20poster.asset-%3Eurl%20%7D')
            .then(response => response.json())
            .then(response => movies = response.result)"
        class="p-5 flex flex-wrap justify-center"
    >
</main>

Here, we are running the following query:

*[_type == "movie"] {
    title,
    releaseDate,
    "imageUrl": poster.asset->url
}

Instead of returning everything from the query, we specify we only want the title, release date, and lastly the image URL. Since the image URL is nested inside poster then asset, so we simply assign it to a new variable (imageURL) for easy access.

The application state is set on the div tag by the x-data directive using a function called init(). This function will be created soon. The x-int fetches a list of movies from sanity and sets it as the value of the movie.

<div  class="grid grid-cols-1 gap-6 md:grid-cols-4">
  <template x-for="(movie, index) in movies" :key="index">
    <div>
      <img x-bind:src="movie.imageUrl" />
      <div class="mt-2">
        <h3 class="text-lg font-semibold" x-text="movie.title"></h3>
        <p class="text-sm text-gray-500" x-text="movie.releaseDate"></p>
      </div>
    </div>
  </template>
</div>

This piece of code displays the results of the query. We used the x-for directive to display the movies stored in the movies array. The template inside the x-for holds how each movie will be displayed. Also, we used x-text to set the innerText to display the movie title and year of each movie. We used x-bind:src to bind the src attribute of the image to the image URL of the movie, this makes the movie image to be rendered.

Let’s add a script tag just below the main tag, it will hold the function called by the x-data.

<script>
  function init() {
    return {
        movies: [],
    }
  }
</script>

The empty movie array stores all the data gotten from the query.

Let’s put everything together:

<!-- frontend/index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Alpine.js and Sanity.io</title>
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
  <script defer src="https://unpkg.com/alpinejs@3.4.2/dist/cdn.min.js"></script>
</head>
<body>
  <nav
        class="flex items-center justify-between flex-wrap p-6 fixed w-full z-10 top-0 bg-indigo-900"
      x-data="{ isOpen: false }"
        @keydown.escape="isOpen = false"
    >

    <!--Logo -->
    <div class="flex items-center flex-shrink-0 text-white mr-6">
      <a class="text-white no-underline hover:text-white hover:no-underline" href="#">
        <span class="text-2xl pl-2"><i class="em em-grinning"></i> ecodata Movies</span>
      </a>
    </div>

    <!--Toggle button -->
    <button
            @click="isOpen = !isOpen"
            type="button"
      class="block lg:hidden px-2 text-gray-500 hover:text-white focus:outline-none focus:text-white"
      :class="{ 'transition transform-180': isOpen }"
        >
      <svg class="h-6 w-6 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path x-show="isOpen" fill-rule="evenodd" clip-rule="evenodd"
          d="M18.278 16.864a1 1 0 0 1-1.414 1.414l-4.829-4.828-4.828 4.828a1 1 0 0 1-1.414-1.414l4.828-4.829-4.828-4.828a1 1 0 0 1 1.414-1.414l4.829 4.828 4.828-4.828a1 1 0 1 1 1.414 1.414l-4.828 4.829 4.828 4.828z" />
        <path x-show="!isOpen" fill-rule="evenodd"
          d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z" />
      </svg>
    </button>

    <!-- Menu -->
    <div
            class="w-full flex-grow lg:flex lg:items-center lg:w-auto"
      :class="{ 'block shadow-3xl': isOpen, 'hidden': !isOpen }"
            @click.away="isOpen = false"
            x-show="isOpen"
            x-transition
        >
      <ul class="pt-6 lg:pt-0  lg:flex justify-end flex-1 items-center">
        <li class="mr-3">
          <a class="inline-block py-2 px-4 text-white" href="#">Home</a>
        </li>
        <li class="mr-3">
          <a class="inline-block text-gray-300 hover:text-gray-200 py-2 px-4" href="#">Movies</a>
        </li>
        <li class="mr-3">
          <a class="inline-block text-gray-300 hover:text-gray-200 py-2 px-4" href="#">About</a>
        </li>
        <li class="mr-3">
          <a class="inline-block text-gray-300 hover:text-gray-200 py-2 px-4" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </nav>

  <main class="mt-32">
    <div class="container mx-auto px-8">
      <div
        x-data="init()"
        x-init="fetch('https://nhksjapu.api.sanity.io/v2021-03-25/data/query/production?query=*%5B_type%20%3D%3D%20%22movie%22%5D%20%7B%20title%2C%20releaseDate%2C%20%22imageUrl%22%3A%20poster.asset-%3Eurl%20%7D')
          .then(response => response.json())
          .then(response => movies = response.result)" class="p-5 flex flex-wrap justify-center">

          <div  class="grid grid-cols-1 gap-6 md:grid-cols-4">
            <template x-for="(movie, index) in movies" :key="index">
              <div>
                <img x-bind:src="movie.imageUrl" />
                <div class="mt-2">
                  <h3 class="text-lg font-semibold" x-text="movie.title"></h3>
                  <p class="text-sm text-gray-500" x-text="movie.releaseDate"></p>
                </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </main>

  <div x-data="{ isOpen: false }">
    <h1>This is a toggle button</h1>

    <button x-on:click="isOpen = !isOpen">Toggle</button>

    <div x-show="isOpen">
      <h1>Tadah! I am Visible</h1>
    </div>
  </div>

  <script>
    function init() {
      return {
        movies: [],
      }
    }
  </script>
</body>
</html>

And it’s a wrap, we have been able to use Alpine.js as the frontend of our movie app with Sanity as our back end. You can explore and add more components to make it look even better.

You can check the entire project on Github.

Conclusion

In this tutorial, we covered an introduction to Alpine.js and Sanity.io. We touched on schemas, the Sanity Studio, built a toggle component, a responsive navbar with Alpine.js, and a simple movie gallery component with the framework using Sanity as the backend. Although Alpine.js might not totally replace other frameworks, it can be used in combination with React or Vue to quickly prototype components without writing much JavaScript and Sanity is a wonderful tool to handle data without much hassle.

References

GraphQL from Ground Up

Chimezie Enyinnaya — Mon, 22 Jul 2019 14:09:20 +0000

I'm glad to announce my latest course GraphQL from Ground up is now available for early access! This is a practical course where you’ll learn GraphQL by building a fully-featured API for a forum completely scratch.

The course cover:

What's GraphQL and its improvements over REST
Understand GraphQL schema and type system
Understand GraphQL scalar types
Create custom scalar types
Understand resolvers
Integrate database with GraphQL
Understand how GraphQL operations such as query, mutation and subscription works
Handle file uploads in GraphQL
Authentication and authorization
Understand GraphQL directives
Create custom directives
Pagination
Query optimization with Dataloader
... and much more

Take advantage of the early access price and get it for just $10.

👉 Get the course

Deploying Static Site To Netlify

Chimezie Enyinnaya — Thu, 15 Mar 2018 09:18:53 +0000

In this tutorial, we'll look at how to deploy our static blog built with Nuxt.js and Contentful to Netlify:

AdonisJs Lucid Relationships

Chimezie Enyinnaya — Fri, 09 Mar 2018 13:17:56 +0000

In this series, we'll look at how to work with Lucid relationships. We'll start by covering how to define each of the relationships types supported by Lucid. Then we'll look at how to perform database operations with each relationship.

What's New In AdonisJs 4.1

Chimezie Enyinnaya — Fri, 09 Mar 2018 12:57:33 +0000

AdonisJs 4.1 was released not too long ago. In this video, I will walk you through the improvements and changes added in the latest version of the AdonisJs framework.

Complete Authentication In AdonisJs

Chimezie Enyinnaya — Thu, 08 Feb 2018 18:02:35 +0000

One of my goal this year is to do more video contents. So, I created a YouTube channel that will hold these videos TutStack. In the first set of videos on the channel, I'm doing a series showing how to do authentication in AdonisJs 4.0:

I hope you enjoy and learn from these videos. I'll love to hear what you think about the videos, kindly drop your questions and feedback in the comment box below the videos.

Also, please do subscribe to the channel so as to be notified once new videos are uploaded.

How to build a public anonymous chat app using .NET and Pusher

Chimezie Enyinnaya — Mon, 15 Jan 2018 12:11:36 +0000

Anonymity gives the likelihood to wear a cover, to end up being anyone you need to be. Also, anonymous communication permits you to quit being bashful and act naturally. It is a chance to pull in individuals whom you won't have the confidence to get to know, all things considered.

Today, we will create a real-time public anonymous group chat app using C# ASP.NET and Pusher. This tutorial assumes the reader has basic knowledge of C# ASP.NET.

Setting Up Pusher App

We need to sign up on Pusher and create a new app, and also copy our secret, application key and application id.

Setting Up The Asp.Net Project In Visual Studio

We need to create a new Asp.Net MVC application, so we open up Visual Studio, select new project from the sidebar, under templates, select Visual C#, next, select web, and finally in the middle section, select ASP.NET Web Application.

Now we are almost ready. The next step will be to install the official Pusher library for .Net using the NuGet Package. To do this, we go to tools on the top bar, click on NuGet Package Manager, on the dropdown we select Package Manager Console. After doing this, we will see the Package Manager Console at the bottom of our Visual Studio as shown below.

The next step is to install the library, by running the following command in the console.

    Install-Package PusherServer

Once this is done, our environment has now been set up.

Crafting The Chat Application

Now that our environment is set up and ready, let us dive into writing some code.
By default, Visual Studio creates three controllers for us, however we will be using the HomeController for the logic of our chat application.
The first thing we want to do is to delete the default index.cshtml file under the Views/Home folder, and create a new view file named index.cshtml that does not have a master layout. In our new index.cshtml file, let us copy the following contents into it.

    @{
        Layout = null;
        Response.ContentType = "text/HTML";
    }
    <html>
    <head>
        <title>
            Pusher Tutorial
        </title>
    </head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="//js.pusher.com/4.0/pusher.min.js"></script>
    <style>
        .chat {
            list-style: none;
            margin: 0;
            padding: 0;
        }

            .chat li {
                margin-bottom: 10px;
                padding-bottom: 5px;
                border-bottom: 1px dotted #B3A9A9;
            }

                .chat li.left .chat-body {
                    margin-left: 60px;
                }

                .chat li.right .chat-body {
                    margin-right: 60px;
                }


                .chat li .chat-body p {
                    margin: 0;
                    color: #777777;
                }

            .panel .slidedown .glyphicon, .chat .glyphicon {
                margin-right: 5px;
            }

        .panel-body {
            overflow-y: scroll;
            height: 250px;
        }

        ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
            background-color: #F5F5F5;
        }

        ::-webkit-scrollbar {
            width: 12px;
            background-color: #F5F5F5;
        }

        ::-webkit-scrollbar-thumb {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
            background-color: #555;
        }
    </style>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <span class="glyphicon glyphicon-comment"></span> Chat
                        </div>
                        <div class="panel-body">
                            <ul class="chat" id="chat"></ul>
                        </div>
                        <div class="panel-footer">
                            <div class="input-group">
                                <input id="btn-input" class="form-control input-sm" placeholder="Type your message here..." type="text">
                                <span class="input-group-btn">
                                    <button class="btn btn-warning btn-sm" id="btn-chat">
                                        Send
                                    </button>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>    
    </body>
    </html>

In the above piece of code, we have defined the layout to be null, and we have defined the content type as "text/HTML" so Asp.Net does not attempt to parse the page as XML. We required Bootstrap CSS, jQuery library, as well as the Pusher JavaScript library, before defining the HTML structure. If we save our file and run our project, we should see this.

Now we have to trigger an event when someone enters some text and clicks the send button. Let's open up our index.cshtml file again and add the following at the end of the page.

    <script>
        $(document).ready(function(){
            $("#btn-chat").click(function(){
                var message = $('#btn-input').val();

                $.post({
                    url: '@Url.Action("Pushermessage", "Home")',
                    dataType: 'text/HTML',
                    contentType: "application/json",
                    data: JSON.stringify({
                        "message": message
                    }),
                    success: function (data) {
                        $("#btn-input").val('');
                    }
                });
            })
        })
    </script>

In the above code, we have attached a click event listener to the element with the ID of btn-chat which happens to be our button. Once the button is clicked, the code will take the value of the element with the id of btn-input which happens to be our text box, and send an AJAX call to our Pushermessage function in our HomeController. However, we are yet to create the Pushermessage function that responds to the AJAX call.

Let us move to our HomeController, and paste the following code after the index function.

     [HttpPost]
            public async Task<ActionResult> Pushermessage(String message)
            {
                var options = new PusherOptions();
                options.Cluster = "XXX_CLUSTER";
                var pusher = new Pusher("XXX_APP_ID", "XXX_APP_KEY", "XXX_APP_SECRET", options);
                ITriggerResult result = await pusher.TriggerAsync("asp_channel", "asp_event", new { message = message, name = "Anonymous" });

                return new HttpStatusCodeResult((int)HttpStatusCode.OK);

            }

Don't forget to add the following references to the top of your file, before the class declaration

    using PusherServer;
    using System.Net;
    using System.Threading.Tasks;

In the last two block of codes, we have defined our Pushermessage function and we also decorated it with the [HttpPost] decorator, so Asp.Net knows it’s a function for POST requests. In this function, we instantiate Pusher, using our appId, appKey and appSecret respectively. We then went ahead to trigger a channel called asp_channel and an event called asp_event, sending in two values with it.

At this point, if we reload our app, type in a message and send, we should see the following when we visit our debug console on our Pusher dashboard:

At this point, we are done with emitting the message to data. Let us now move onto listening for the event on the client side and displaying the new message.

Let us open up our index.cshtml file, and add the following lines of code after our click event.

    var pusher = new Pusher('PUSHER_APP_KEY', {cluster: 'XXX_CLUSTER'});
    var my_channel = pusher.subscribe('asp_channel');
    my_channel.bind("asp_event", function (data) {
        var new_message = '<li class="left clearfix"><span class="chat-img pull-left">';
        new_message +='<img src="http://placehold.it/50/55C1E7/fff&text='+data.name+'" alt="User Avatar" class="img-circle">';
        new_message +=  '</span>';
        new_message +=      '<div class="chat-body clearfix">';
        new_message +=          '<div class="header">';
        new_message +=               '<strong class="primary-font">'+data.name+'</strong> <small class="pull-right text-muted">';
        new_message +=                  '</div>';
        new_message +=                      '<p>';
        new_message +=  data.message;
        new_message +=                      '</p>';
        new_message +=                   '</div>';
        new_message +=      '</li>';
    $("#chat").append(new_message);
    });

In the above block of code, we declared a variable called pusher and we set it to an instance of a new Pusher object, passing in our appKey. Next, we declared a variable called my_channel, and we call the Pusher subscribe method to our channel, which in this case, is called asp_channel.

Next, we bind to the event, receive the data passed from it, wrap the data in some li tags, and then we append it to the ul element in our HTML structure with the ID of chat. Below is our functionality:

In this article, we have demonstrated how to create a public anonymous chat application using C# ASP.NET and Pusher. We have gone over the process of setting up the environment, using the NuGet Package Console to install packages as well as implementing the chat application.

Many other real-time applications can be built using Pusher and ASP.NET, it's left for you to decide which awesome realtime app you'll be building next.

This post was originally posted by the author on the Pusher blog.

How to build a public anonymous chat app in Android using Pusher

Chimezie Enyinnaya — Mon, 15 Jan 2018 12:09:05 +0000

Today, we will be learning how to build a public anonymous chatroom with Android.

In this tutorial, we will be using React Native to build our Android application. React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components. To learn more about React Native, please visit here.

Setting Up React Native

First, we need to install the React Native CLI if we don't already have it. To install React Native, we run:

npm install -g react-native-cli

After installing the CLI, it's time to create our project. Open up a terminal, and create a new project called pubchatusing the following command:

react-native init pubchat

We wait until React Native does all its installations, then we can change directory into the new project and run the application using the following command:

//change directory to pubchat
cd pubchat
//run the application
react-native run-android

Please note, that before running the run-android command, you should have an emulator running, or an Android device connected via adb.

You can read more on setting up React Native Android app from https://facebook.github.io/react-native/docs/android-setup.html

At this point, we should see this kind of screen:

However, you may run into an error like this:

To fix the error, all you need to do is to run this command:

react-native start

Setting Up Pusher

At this point, React Native is ready and set up. We need to setup Pusher, as well as grab our app credentials.

We need to sign up on Pusher and create a new app, and also copy our secret, application key and application id.

We then need to install the required libraries:

npm install native-base pusher-js pusher express body-parser --save

In the above bash command, we installed 4 packages. I will explain what the four packages do below:

native-base: An essential cross-platform UI components for React Native. This helps us to reduce time writing and styling UI components ourselves.
pusher-js: This is the official Pusher JavaScript client. We'll be using its React Native library to subscribe and listen to events in our application.
pusher: This is the official Pusher library for Node.js. We will be using Node.js for our API, so this library will come in handy.
express: This is a Node.js web framework which we'll use to create our API.
body-parser: This library is used by Express to parse body requests.

After installing these packages, we need to link them with React Native, so we run the following command:

react-native link

*Please note that because we will be using Fetch to perform AJAX request, we would need to go to our android manifest located in android/app/src/AndroidManifest.xml and add the following permission: *

<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

Creating Our API

First, let's create a new file called server.js, which serves as our API in our root folder and place in the following contents into it:

// server.js

//require express
var express = require('express')
//define app as in instance of express
var app = express()
//require bosy-parser
var bodyParser = require('body-parser')
//require pusher
var Pusher = require('pusher')
//use bodyparser as a middle ware
app.use(bodyParser.json())
//instantiate pusher
const pusher = new Pusher({
  appId: 'XXX_APP_ID',
  key: 'XXX_APP_KEY',
  secret: 'XXX_APP_SECRET',
  cluster: 'XXX_APP_CLUSTER',
  encrypted: true
});
//set cors middleware
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});
//handle route postfunction
app.post('/', function (req, res) {
    pusher.trigger("pubchat", "message_sent", { message : req.body.message, name : "Anonymous" });
    res.send({
        message:'message_sent'
    });
})
//listen on port and serve the app
app.listen(3000, function () {
  console.log('Example app listening on port 3000!')
})

The code block above is our Express server setup. At the beginning of the file, we had required Express, Body-parser and Pusher libraries for Node.js respectively. We had also initialized a new Pusher object, passing in our appId, key, secret to it, and we set the output of the object to a constant called pusher.

Next, we set the CORS header to our request, using a middleware function.

Finally, we create a post handler for the \ route, and we then make a Pusher trigger to a channel called pubchat with an event called message_sent.

Let's take note of both the channel name and the event name used on this server. The channel name will be subscribed to, while we will listen for the event in our React Native app.

This is all we need at the server side for our API call to work.

Next, we go to our command line and run:

node server.js

Crafting Up The Application

Now let's replace our index.android.js with the following:

// index.android.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput,
  ScrollView
} from 'react-native';
// import native base components
import { Container, Content, Footer, Button} from 'native-base';
//import pusher
import Pusher from 'pusher-js/react-native'
//react-native class
export default class pubchat extends Component {
//load constructor
constructor(props){
  super(props);
  //declare an array of messages
  var messages_array = [];
  // declare initial states
   this.state ={
    messages_array,
    text:'' 
   }

  //instantiate pusher
  var pusher = new Pusher('XXX_APP_KEY', {
    cluster: 'XXX_APP_CLUSTER'
  });
  //subscribe to the public chat channel
  var my_channel = pusher.subscribe('pubchat');
  //bind and listen for chat events
  my_channel.bind("message_sent", (data)=> {
     this.state.messages_array.push(data);
        this.setState({
          text:''
        })
  });
}

  //function that sends messahe
  send_message(){
    //check that the text input isnt empty
    if(this.state.text !=""){
      fetch('XXX_IP_TO_MY_ROUTE', {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          message: this.state.text
        })
      })
      .then((response) => response.json()) 
      .then((responseJson) => {}) 
      .catch((error) => { console.error(error); });
    }
  }


  //function that loops over our messages and displays them
  loop(){
      var element = [];
     for (var index = 0; index < this.state.messages_array.length; index++) {

            element.push(<View key={"container"+index} >
                            <Text key = {"author"+index}>
                              {this.state.messages_array[index].name}
                            </Text>
                            <Text key = {index} style={styles.bubble_you} >
                              {this.state.messages_array[index].message}
                            </Text>
                        </View>);
        }
         return element;
  };

  //render function that actually shows the page
  render() {
    //execute the loop function and store its response into a variable
    myloop = this.loop();

    return (
      <Container>
      <ScrollView >
        <View style={styles.container}>
          <Text style={styles.welcome}>
            Welcome to the public chat room!
          </Text>
              {myloop}
        </View>
        </ScrollView>
        <Footer >
          <TextInput
            value ={this.state.text}
            style={{width: '80%'}}
            placeholder="Enter Your message!"
            onChangeText={(text) => this.setState({text})}
          />
          <Button onPress={()=> this.send_message()}>
            <Text>Send</Text>
          </Button> 
        </Footer>
      </Container>
    );
  }
}

//stylesheet 
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  bubble_you: {
    color: '#fff',
    backgroundColor: '#00b0ff',
  width: '50%',
  borderRadius: 25,
  padding: 7,
  marginBottom: 2,
  },
});

AppRegistry.registerComponent('pubchat', () => pubchat);

Above, we have imported the Native Base component to help us with our UI styling instead of the default React Native components. Next, we imported Pusher for React Native, then we declare our React Native class.

We proceed by creating a constructor, and in our constructor, two states are declared namely: messages_array and text, which respectively represent our array of messages as well as the current text that is being typed.

Next, we instantiate Pusher, passing in our APP_KEY. Then we subscribe to the channel which we are emitting to from the server called pubchat and also we listen to the message_sent event which we also trigger from our server.

While listening to the message_sent event, we push the data that arrives at our messages_array state, and also set our text state to empty.

Next, we create a function which sends our messages to the server, so it can be sent to Pusher. In this function, we first check if the state is empty, to avoid sending empty messages to the server.

Next, we use the fetch API provided by React Native to send an AJAX request to our server which we created earlier.

Note: If you use IP address such as 127.0.0.1 or localhost, the request is most likely going to fail. This is because, in React Native, localhost or 127.0.0.1 refers to the internal application. Please use the network IP for your system instead.

Next, we define a loop function, which loops through all our messages and pushes them into an array which is being returned. This function would be used to display all messages on the UI.

The next function is our render function, which is a native React Native function. First, we declare a variable called myloop and set it to our loop function.

In our return statement, the myloop variable was rendered, so it can display its content. Also, take a look at the footer tag we have there. In the footer tag, we have a text input and a button.

The text input text is used to set the text state anytime the text changes using the onChangeText event of the button. Notice that our button also calls the send_message function anytime it is pressed by binding it to its onPress function.

Finally, we defined some style sheets.

At this point if we reload our application, our app would look like the following:

At this point, once our server is up and running, we should go to the application, type in a message, then send.

Here is a demo of what we have built:

The complete source code is available on Github for reference.

Conclusion

In this article, we have demonstrated how to make a public anonymous chat application in Android using React Native. We have secured the design choices which are important, to begin with, and the cases above ought to help you fill in the holes and give an outline of a portion of the other design choices accessible to you.

How well has this tutorial helped you to get started with Pusher and Android apps? Do you have other use cases or scenarios you might want to talk about? Let us know in the comments.

This post was originally posted by the author on the Pusher blog.

How to build a ‘who’s typing’ feature with Laravel and Pusher

Chimezie Enyinnaya — Mon, 15 Jan 2018 12:04:22 +0000

When you're using a chat app, having a 'who's typing' feature really improves the user experience and makes it easier for users to interact with the application. If you're chatting with someone, you can easily see when the other person is responding to your chats, saving you time from typing 'you there?' and let you know when to wait for the other person's response, so you don't keep sending messages.

In this tutorial, I will show you how to build a 'who's typing' feature with Laravel and Pusher, using the concept of a chat app to demonstrate it. Note that this tutorial focuses on the 'who's typing' part of the app (if you want to learn how to build a chat app using Laravel and Pusher, you should read this tutorial)

Let's take a quick look at what we'll be building:

The code of the completed demo is available on GitHub.

Setting Up Laravel

Create a new Laravel project. (I prefer using the Laravel installer) Open your terminal and run the code below:

laravel new laravel-whos-typing

Next, we need to setup our new Laravel project. First, we need to register the App\Providers\BroadcastServiceProvider. Open config/app.php and uncomment App\Providers\BroadcastServiceProvider in the providers array.

We then need to tell Laravel that we are using the Pusher driver in the .env file:

// .env

BROADCAST_DRIVER=pusher

Since we specified we want to use Pusher as our broadcasting driver, we need to install the Pusher PHP SDK:

composer require pusher/pusher-php-server

Setting Up Pusher

If you don't have one already, create a free Pusher account at https://pusher.com/signup then log in to your dashboard and create an app. Take note of your app credentials as we'll be using them shortly.

Now, let's fill in our Pusher app credentials. If you open the config/broadcasting.php, you'll notice that Laravel is pulling some of the Pusher credentials from the .env file. So let's update the .env file to contain our Pusher app credentials:

// .env

PUSHER_APP_ID=xxxxxx
PUSHER_APP_KEY=xxxxxxxxxxxxxxxxxxxx
PUSHER_APP_SECRET=xxxxxxxxxxxxxxxxxxxx

Remember to replace the xs with your Pusher app credentials. You can find your app credentials under the Keys section on the Overview tab in the Pusher Dashboard.

Also, remember to fill in the cluster of your Pusher app and other additional options:

// config/broadcasting.php

'options' => [
   'cluster' => 'eu',
   'encrypted' => true
],

Installing Frontend Dependencies

For this tutorial, we'll be using Bootstrap, Vue and Axios, which have been setup for us by Laravel, though we still need to install each of the dependencies. To compile our CSS and JavaScript, we need to install Laravel Mix, which is a wrapper around Webpack. We can install these dependencies through NPM:

npm install

We also need to install Laravel Echo, which is a JavaScript library that makes it painless to subscribe to channels and listen for events broadcast by Laravel and of course the Pusher JavaScript library:

npm install --save laravel-echo pusher-js

Once installed, we need to tell Laravel Echo to use Pusher. At the bottom of the resources/assets/js/bootstrap.js file, uncomment the Laravel Echo section and update the details with:

// resources/assets/js/bootstrap.js

import Echo from "laravel-echo"

window.Echo = new Echo({
    broadcaster: 'pusher',
    key: Laravel.pusherKey,
    cluster: 'eu',
    encrypted: true
});

Since we specified our Pusher app credentials in the .env file, notice Laravel.pusherKey from the code above, we'll load our Pusher app key from the config instead of hard coding it directly in resources/assets/js/bootstrap.js. We'll define Laravel.pusherKey in a later section.

Also use the same cluster that you specified earlier in config/broadcasting.php.

With the setups done, let's start implementing a 'who's typing' feature in our Laravel application.

To do this, we need to know when a user is typing into the chat box. There are different ways to accomplish this, but in this tutorial, we'll add event listeners to the chat box. With this, we can know when a user is actually typing a message and display the typing indicator to the appropriate users.

We'll make use of JavaScript keyboard events: onkeydown which fires event when a user is pressing a key. This means that when a user presses a key, we send events to Pusher. These types of events are called client events and do not hit the server at all. But how do we broadcast such events to Pusher since they are a bit different from the normal events (server to Pusher events)? Well, Pusher is aware of such events and has a special way of handling them.

By default, when you create a Pusher app, client events are not enabled. We have to enable this for our app. To enable client events in your Pusher app, select the app then click on the App Settings tab and then check the box next to Enable client events.

Once we have enabled client events in our Pusher app, we can now trigger and listen for client events in our chat app.

Authenticating Users

Our chat app will require users to be logged in before they can begin to chat. So, we need an authentication system:

php artisan make:auth

This will create the necessary routes, views and controllers needed for an authentication system.

Before we go on to create users, we need to run the users migration that comes with a fresh installation of Laravel. But to do this, we first need to setup our database. Open the .env file and enter your database details:

// .env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel-chat
DB_USERNAME=root
DB_PASSWORD=root

Update with your own database details. Now, we can run our migration:

php artisan migrate

Note: There's a bug in Laravel 5.4 if you're running a version of MySQL older than 5.7.7 or MariaDB older than 10.2.2. More info here. This can be fixed by replacing the boot() of app/Providers/AppServiceProvider.php with:

// app/Providers/AppServiceProvider.php

// remember to use
Illuminate\Support\Facades\Schema;

/**
 * Bootstrap any application services.
 *
 * @return void
 */
public function boot()
{
  Schema::defaultStringLength(191);
}

Defining App Routes

Open routes/web.php and replace the routes with the code below:

// routes/web.php

Auth::routes();

Route::get('/', function () {
    return view('chat');
})->middleware('auth');

The routes are pretty simple: a route that will handle authentication and a route to the homepage that will render a chat view which we'll create shortly.

NOTE: Since we have removed the /home route, you might want to update the redirectTo property of both app/Http/Controllers/Auth/LoginController.php and app/Http/Controllers/Auth/RegisterController.php to:

protected $redirectTo = '/';

Creating The Chat App View

Create a new resources/views/chat.blade.php file and paste into it:

// resources/views/chat.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Chats</div>

                <div class="panel-body">
                    <ul>
                        <li v-for="message in messages">
                            @{{ message.user.name }} - @{{ message.message }}
                        </li>
                    </ul>
                    <div>
                        <div class="input-group">
                            <input type="text" name="message" class="form-control" placeholder="Type your message here..." v-model="newMessage" @keyup.enter="sendMessage">
                            <span class="input-group-btn">
                                <button class="btn btn-primary" @click="sendMessage">
                                    Send
                                </button>
                            </span>
                        </div>
                        <span v-show="typing" class="help-block" style="font-style: italic;">
                            @{{ user }} is typing...
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Once again pretty straightforward, we are using Vue here. We loop through each of the messages and display them. Next, there is a input field and a send button for composing chat messages. The input field is binded to the newMessage data. When the send button is clicked or the enter key is pressed on the input field, a sendMessage() is called. Lastly, there is span holding the 'is typing' indicator. This will be hidden by default and will be displayed using Vue's v-show when typing is true (that is when a user is typing).

Notice that we are displaying the name of the user along with the 'is typing' indicator, we need a way to pass the authenticated user to our JavaScript file. Remember from resources/assets/js/bootstrap.js, where we used Laravel.pusherKey, we also need to pass Pusher app key to our JavaScript file. We can do this by updating the `section inresources/views/layouts/app.blade.php(which was created when we ranmake:auth`) with:

` language-js
resources/views/layouts/app.blade.php

window.Laravel = {!! json_encode([
'csrfToken' => csrf_token(),
'user' => Auth::user(),
'pusherKey' => config('broadcasting.connections.pusher.key'),
]) !!};

The code above creates aLaravelobject on the global window, we then add some items to the object. Theuseritem will be the currently authenticated user and thepusherKeyitem will load our Pusher app key from theconfig/broadcasting.php` config file.

Laravel has integrated Vue and Axios for us, so we can start using Vue without any further setup. There is an app.jsfile that Laravel creates by default within resources/assets/js/app.js. Open this file and update with the code below:

` language-js
// resources/assets/js/app.js

require('./bootstrap');

const app = new Vue({
el: '#app',

data: {
    messages: [],
    newMessage: '',
    user: '',
    typing: false
},

methods: {
    sendMessage() {
        // add new message to messages array
        this.messages.push({
            user: Laravel.user,
            message: this.newMessage
        });

        // clear input field
        this.newMessage = '';

        // persist to database
    }
}

});
First, we require theresources/assets/js/bootsrap.jsfile that contains our package setups and integrations. Next, we create a new Vue instance and bind it to **app**id. We then create some data variables:messagesarray will hold our chat messages,newMessagewill be the new message that a user sends,userwill be the currently authenticated user and finallytypingwill holdtrueorfalse` indicating whether a user is typing or not.

Next we define a sendMessage() that simply adds the new message along with the user that sent it to the messages array and finally clears the input field. (If you are building an actual chat app, you might want to do an AJAX request to persist the new message to the database here.)

Having done this, we can start sending messages and our messages will be displayed on the chat view. Now let's move on to the meat of this tutorial; adding 'who's typing' to our Laravel application.

Laravel Echo provides some handy methods to integrate with client events which we'll be using to implement our 'who's typing' indicator.

Paste the code below into the resources/assets/js/app.js within the methods object:

` language-js
// resources/assets/js/app.js

isTyping() {
let channel = Echo.private('chat');

setTimeout(function() {
channel.whisper('typing', {
user: Laravel.user,
typing: true
});
}, 300);
},
TheisTyping()will be triggered when an **onkeydown** event is fired within the chat input field (that is, when a user is typing a message). First, we subscribe to a private channel calledchatand trigger a client event using Laravel Echo'swhisper()after 0.3s. Thewhisper()accepts the name of the client event, in our casetypingand the data we want to broadcast. Since Pusher specifies that client events must be prefixed byclient-, Laravel is smart enough to prefix theclient-for us under the hood. We pass the user that is typing a message and typing astrue` as the data we are broadcasting.

Note: Client events can only be triggered on private and presence channels because they require authentication. Also, client events are not delivered to the originator of the event. For more information on client events, kindly checkout the Pusher documentation.

Since we created a private channel, only authenticated users will be able to listen on the chat channel. We need a way to authorize that the currently authenticated user can actually listen on the channel. This can be done by in the routes/channels.php file:

` language-php
// routes/channels.php

Broadcast::channel('chat', function ($user) {
return Auth::check();
});
We pass to thechannel(),the name of our channel and a callback function that will either returntrueorfalse` depending on whether the current user is authenticated.

Now that we can trigger client events, we also need a way to listen for the client events in our application. To do this, add the code below to resources/assets/js/app.js just after the data object:

` language-js
// resources/assets/js/app.js

created() {
let _this = this;

Echo.private('chat')
.listenForWhisper('typing', (e) => {
this.user = e.user;
this.typing = e.typing;

  // remove is typing indicator after 0.9s
  setTimeout(function() {
    _this.typing = false
  }, 900);
});

},
Again we subscribe to thechatchannel. To listen for client events, we use thelistenForWhisper()and set both theuserandtyping` data accordingly. Lastly, we remove the is typing indicator after 0.9s of a user not typing.

Before we start testing the who's typing feature, let update the input field of the chat view with:

` language-html
// resources/view/chat.blade.php

We added two keyboard events:@keydownand@keyupwhich are Vue equivalent of the JavaScript keyboard events we talked about earlier. On keydown, theisTyping()will be triggered and on keyup, thenotyping()` will be triggered.

We can now compile the JavaScript files using Laravel Mix using:

` language-bash npm run dev `
Now we can start our chat app by running:

` language-bash php artisan serve `

Conclusion

With such a basic app, we have seen how to implement a 'who's typing' feature in a Laravel application using Pusher. I hope you find this tutorial helpful and if you encounter any problems following this tutorial, kindly drop a comment below and we'd tackle them together.

This post was originally posted by the author on the Pusher blog.

Forem: Chimezie Enyinnaya

Using npm packages in AdonisJS

Using the package directly

Using a service class

Conclusion

Add Alpine.js to your Node Application

Introduction to Alpine.js

Why choose Alpine.js

Basic syntax

Setting up the sanity schema and studio

Adding Alpine.js

Exploring Alpine.js Components

Performing interactions with Alpine.js

Performing HTTP request

Enabling CORS

Conclusion

References

GraphQL from Ground Up

Deploying Static Site To Netlify

Related tutorial

Build A Static Blog With Nuxt.js And Contentful

Related tutorial

AdonisJs Lucid Relationships

Related tutorial

Getting Started With Lucid: AdonisJs ORM

Related tutorial

What's New In AdonisJs 4.1

You might also like

Complete Authentication In AdonisJs

How to build a public anonymous chat app using .NET and Pusher

Setting Up Pusher App

Setting Up The Asp.Net Project In Visual Studio

Crafting The Chat Application

How to build a public anonymous chat app in Android using Pusher

Setting Up React Native

Setting Up Pusher

Creating Our API

Crafting Up The Application

Conclusion

How to build a ‘who’s typing’ feature with Laravel and Pusher

Setting Up Laravel

Setting Up Pusher

Installing Frontend Dependencies

Authenticating Users

Defining App Routes

Creating The Chat App View

Conclusion