
## Introduction

WhatsApp Messenger is a cross-platform messaging app that lets us send and receive messages in real time. WhatsApp Messenger is used by almost everyone on the planet. Unfortunately, unlike Telegram, Whatsapp's API usage is still restricted.

In this post, I'll show you how to make a free Whatsapp bot with the help of a third-party library.

<Image
  alt='Meme about the whatsapp bot'
  src='/jagad.dev/posts/how-to-create-a-whatsapp-bot-with-node-js/wa_bot_api_qtin1r.jpg'
  width='583'
  height='428'
/>

## Required Libraries

Installing the library from npm requires first installing `node.js 12` or higher, followed by installing library from the npm package.

Installing `whatsapp-web.js`:

```bash
$ npm install whatsapp-web.js

or

$ yarn add whatsapp-web.js
```

Installing `qr-code-terminal`:

```bash
$ npm install qr-code-terminal

or

$ yarn add qr-code-terminal
```

## How to Run Program

Create a file called `app.js` in the project and paste this code into it.

```javascript
const qrcode = require('qrcode-terminal');
const { Client } = require('whatsapp-web.js');

const client = new Client();

client.initialize();

client.on('qr', (qr) => {
  qrcode.generate(qr, { small: true });
});

client.on('ready', () => {
  console.log('Client is ready!');
});
```

Then, on the terminal or command prompt, type this command.

```bash
$ node app

or

$ node app.js
```

When the command is executed, a QR code appears, which we will scan with the Whatsapp account we used to create the bot.

<Image
  alt='QR code'
  src='/v1649589295/jagad.dev/posts/how-to-create-a-whatsapp-bot-with-node-js/Qr_code_mkrfyt.png'
  width='1164'
  height='609'
/>

## Replying Messages

The goal of creating a bot is for it to be able to respond to messages. So, in the project that we created before, paste the following code.

```javascript {16-20}
const qrcode = require('qrcode-terminal');
const { Client } = require('whatsapp-web.js');

const client = new Client();

client.initialize();

client.on('qr', (qr) => {
  qrcode.generate(qr, { small: true });
});

client.on('ready', () => {
  console.log('Client is ready!');
});

client.on('message', (message) => {
  if (message.body === 'hello') {
    message.reply('Hiiiii');
  }
});
```

When someone else types a `hello` message to bot, we'll make the bot reply to it.

<Image
  alt='Replying message'
  src='/v1649589886/jagad.dev/posts/how-to-create-a-whatsapp-bot-with-node-js/Replying_Messages_cgicwe.png'
  width='892'
  height='461'
/>

## Create Authentication

The function of creating authentication is that we don't have to login (scan QR code) every time we run an `app.js`.

Here is the code to create authentication :

```javascript {2, 4-6}
const qrcode = require('qrcode-terminal');
const { Client, LocalAuth } = require('whatsapp-web.js');

const client = new Client({
  authStrategy: new LocalAuth(),
});

client.initialize();

client.on('qr', (qr) => {
  qrcode.generate(qr, { small: true });
});

client.on('authenticated', () => {
  console.log('AUTHENTICATED');
});

client.on('ready', () => {
  console.log('Client is ready!');
});

client.on('message', (message) => {
  if (message.body === 'hello') {
    message.reply('Hiiiii');
  }
});
```

<Ads />

## Replying Messages With Image From Url

On the other hand, bots are less interactive if they only reply with text messages, so we can reply to messages using media such as images.

Here is the code to make bot replying with media:

```javascript {2, 22-34}
const qrcode = require('qrcode-terminal');
const { Client, LocalAuth, MessageMedia } = require('whatsapp-web.js');

const client = new Client({
  authStrategy: new LocalAuth(),
});

client.initialize();

client.on('qr', (qr) => {
  qrcode.generate(qr, { small: true });
});

client.on('authenticated', () => {
  console.log('AUTHENTICATED');
});

client.on('ready', () => {
  console.log('Client is ready!');
});

client.on('message', async (message) => {
  if (message.body === 'meme') {
    //get media from url
    const media = await MessageMedia.fromUrl(
      'https://user-images.githubusercontent.com/41937681/162612030-11575069-33c2-4df2-ab1b-3fb3cb06f4cf.png'
    );

    //replying with media
    client.sendMessage(message.from, media, {
      caption: 'meme',
    });
  }
});
```

We'll make the bot respond with an image whenever someone else types a `meme` message.

<Image
  alt='Replying Message with Media'
  src='/v1649585406/jagad.dev/posts/how-to-create-a-whatsapp-bot-with-node-js/Replying_Messages_with_Image_k6lo5n.png'
  width='908'
  height='400'
/>

## Implementation with the Yu-Gi-oh API

to prove that the library can be adjusted to fit the needs of the case study. In this case, I'll use the [YGOPRODeck Yu-Gi-Oh! API](https://db.ygoprodeck.com/api-guide/).

The following is how the Yu-Gi-Oh! bot that we will make works:

1. Someone typed `Yugioh Card Name` via WhatsApp message.
2. The card's name will be checked against the database.
3. If the Yugioh Card Name is found in the database, the bot will respond with the card's image.

An extra library called `Axios` is required for the WhatsApp bot to be able to send requests to the Yu-Gi-Oh! API:

```bash
$ npm install axios

or

$ yarn add axios
```

Here is the complete code of the Yu-Gi-Oh! bot:

```javascript
const { Client, LocalAuth, MessageMedia } = require('whatsapp-web.js');
const axios = require('axios');

const client = new Client({
  authStrategy: new LocalAuth(),
});

client.initialize();

client.on('qr', (qr) => {
  console.log('QR RECEIVED', qr);
});

client.on('authenticated', () => {
  console.log('AUTHENTICATED');
});

client.on('ready', () => {
  console.log('Client is ready!');
});

client.on('message', async (msg) => {
  if (msg.body) {
    axios
      .get(
        `https://db.ygoprodeck.com/api/v7/cardinfo.php?name=${encodeURIComponent(
          msg.body
        )}`
      )
      .then(async (res) => {
        if (res.data.error) {
          msg.reply('No card matching your query was found in the database.');
        } else {
          const media = await MessageMedia.fromUrl(
            res.data.data[0].card_images[0].image_url
          );
          client.sendMessage(msg.from, media, {
            caption: `Name : ${res.data.data[0].name}\nType : ${res.data.data[0].type}\nDesc : ${res.data.data[0].desc}
            `,
          });
        }
      })
      .catch((error) => {
        console.error(error);
      });
  }
});
```

I'm attempting to type a message using the text from the Yu-Gi-Oh! card `Card Shuffle` and then the bot responds with a photo and description of the card we sent before.

<Image
  alt='Yu-Gi-Oh API'
  src='/v1649586408/jagad.dev/posts/how-to-create-a-whatsapp-bot-with-node-js/yugioh_api_1_quhpcm.png'
  width='923'
  height='582'
/>

I was trying to type a message using another name for Yugioh's card, called Burning Bamboo Sword.

<Image
  alt='Yu-Gi-Oh API'
  src='/v1649586408/jagad.dev/posts/how-to-create-a-whatsapp-bot-with-node-js/yugioh_api_2_jtcbld.png'
  width='924'
  height='582'
/>

## Conclusion

Because the WhatsApp API is still limited, third-party tools like `whatsapp-web.js` help a lot. However, since this library is not affiliated with WhatsApp, there are still many problems.

The code of this project lives at :
[https://github.com/jagadyudha/yugioh-whatsapp-bot](https://github.com/jagadyudha/yugioh-whatsapp-bot)


Using a third-party library to make a WhatsApp bot for free and customable.

How to Create a Whatsapp Bot With Node.js


## Introduction

One of the most important aspects of a website is its images. Images can now become more interactive with the use of CSS transitions. So, in this tutorial, we'll learn how to make images more interactive using the Tailwind CSS.

Tailwind CSS is a utility-first CSS framework packed with classes. Tailwind CSS does not come with components, unlike other CSS frameworks such as Bootstrap or Chakra UI. Tailwind CSS, on the other hand, works by giving you a set of classes. With these classes, you can quickly create your own designs.

<Image
  alt='Meme about tailwind css'
  src='/v1652328849/jagad.dev/posts/custom-image-transition-in-nextjs-with-tailwind-css/Meme_a7vr7s.jpg'
  width='577'
  height='430'
/>

## Getting Started

If you don't already have one, begin by creating a new Next.js project. Using the Create Next App is the most usual method.

```bash
$ npx create-next-app my-project
$ cd my-project
```

After the project is created, we will move to the tailwind installation.

```bash
$ npm install -D tailwindcss postcss autoprefixer
$ npx tailwindcss init -p
```

Add the paths to all of your template files in `tailwind.config.js` file.

```javascript
module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
```

Add the @tailwind directives to `./styles/globals.css` file.

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

After all we can start running project with:

```bash
$ yarn dev

# or

$ npm run dev

```

## How Tailwind CSS Transitions Work

For example, we can make a button with a hover transition that changes the color of its background.

```jsx
<button className='rounded-full bg-teal-600 px-6 py-3 font-medium text-white transition duration-300 hover:bg-indigo-500'>
  Hello Universe!
</button>
```

<Image
  alt='How tailwind css transitions work'
  src='/v1652327445/jagad.dev/posts/custom-image-transition-in-nextjs-with-tailwind-css/How_Tailwind_CSS_Transitions_Work_bzg7zq.gif'
  width='829'
  height='335'
/>

it can be seen that with the `transition` class we can change the background color from `bg-teal-600` to `bg-indigo-500` with a duration of 300ms `duration-300`.

The transition stuff, which includes transition properties, transition duration, transition timing function, transition delay, and animation, can be found in the Tailwind CSS documentation. Here are all of the explanations for that:

- [Transition Property - Tailwind CSS](https://tailwindcss.com/docs/transition-property)
- [Transition Duration - Tailwind CSS](https://tailwindcss.com/docs/transition-duration)
- [Transition Timing Function - Tailwind CSS](https://tailwindcss.com/docs/transition-timing-function)
- [Transition Delay - Tailwind CSS](https://tailwindcss.com/docs/transition-delay)
- [Animation - Tailwind CSS](https://tailwindcss.com/docs/animation)

## Understanding next/image `onLoadingComplete` callback

onLoadingComplete is a callback function that is invoked once the image is completely loaded and the placeholder has been removed. This means that we can add a transition before the image is fully loaded.

To see how the `onLoadingComplete` callback works, we must create a state that contains the boolean `false`.

```javascript {1, 5}
import React, { useState } from 'react';
import NextImage from 'next/image';

const Image = ({ src, ...props }) => {
  const [isReady, setIsReady] = useState(false);

  return (
    <NextImage objectFit='cover' src={src} {...props} layout='responsive' />
  );
};

export default Image;
```

Next, we create a function onLoadCallback which will change the state of isReady to true.

```javascript {7-9}
import React, { useState } from 'react';
import NextImage from 'next/image';

const Image = ({ src, ...props }) => {
  const [isReady, setIsReady] = useState(false);

  const onLoadCallback = () => {
    setIsReady(true);
  };

  return (
    <NextImage objectFit='cover' src={src} {...props} layout='responsive' />
  );
};

export default Image;
```

After that, we can call the `onLoadCallback` function in the `onLoadingComplete` props, which will trigger the event parameter which contains the loaded img.

```javascript {16}
import React, { useState } from 'react';
import NextImage from 'next/image';

const Image = ({ src, ...props }) => {
  const [isReady, setIsReady] = useState(false);

  const onLoadCallback = () => {
    setIsReady(true);
  };

  return (
    <NextImage
      objectFit='cover'
      src={src}
      {...props}
      onLoadingComplete={onLoadCallback}
      layout='responsive'
    />
  );
};

export default Image;
```

<Ads />

## Create Custom Images Components

Now that we know how to use the `onLoadingComplete` callback, we can create custom image components by creating a components folder and putting the `image.js` file inside it.

```bash {2}
├── README.md
├── components
│   └── image.js
├── next.config.js
├── package-lock.json
├── package.json
├── pages
│   ├── _app.js
│   ├── index.js
├── postcss.config.js
├── public
│   ├── favicon.ico
│   └── vercel.svg
├── styles
│   ├── Home.module.css
│   └── globals.css
└── tailwind.config.js
```

Then, in the `image.js` file, add the following code:

```javascript
import React, { useState } from 'react';
import NextImage from 'next/image';

const Image = ({ src, ...props }) => {
  const [isReady, setIsReady] = useState(false);

  const onLoadCallback = () => {
    setIsReady(true);
  };

  return (
    <NextImage
      objectFit='cover'
      src={src}
      {...props}
      onLoadingComplete={onLoadCallback}
      layout='responsive'
    />
  );
};

export default Image;
```

## Apply a Blurred Effect to Images

We use the blur effect to apply an effect to custom images that we created before. We can do this by adding the blur class with `blur-2xl` to the image when `isReady` is `false` and remove it when `isReady` is `true` with `blur-0`.

To make transition more interactive, we can add scale class with `scale-120` to the image when `isReady` is `false` and `scale-100` when `isReady` is `true`.

We also add the `transition` and `duration-1000` class to the image to apply the transition effect.

```javascript {5-6}
<NextImage
  objectFit='cover'
  src={src}
  className={`bg-gray-400 transition duration-1000 ${
    isReady ? 'scale-100 bg-gray-400 blur-0' : 'scale-120 blur-2xl'
  }`}
  {...props}
  onLoadingComplete={onLoadCallback}
  layout='responsive'
/>
```

After That, we can import images components that we created before and use them in all images.

```javascript {1, 7}
import Image from '../components/image';

const Test = () => {
  return (
    <main className='flex h-screen w-screen items-center justify-center'>
      <div className='w-1/4'>
        <Image src={`YOURIMAGESRC`} width={300} height={300} />
      </div>
    </main>
  );
};

export default Test;
```

<Image
  alt='use component on all images'
  src='/v1652331620/jagad.dev/posts/custom-image-transition-in-nextjs-with-tailwind-css/use_components_in_all_images_lrnl5h.gif'
  width='600'
  height='319'
/>

## Create a Rick and Morty Character List With a Custom Image

To apply to the project, we only need to import the components that were created earlier.

For example, we will implement the Rick and Morty API.

```javascript
import Image from '../components/image';

export async function getStaticProps() {
  const res = await fetch('https://rickandmortyapi.com/api/character/');
  const content = await res.json();

  return {
    props: {
      content,
    },
  };
}

const Home = ({ content }) => {
  return (
    <div className='bg-gray-200 p-5 sm:p-16 lg:p-32'>
      <div className='grid grid-cols-1 gap-5 sm:grid-cols-2 md:gap-10 lg:grid-cols-3 xl:grid-cols-5'>
        {content.results.map((character) => {
          const { id, name, image, status, type, gender } = character;

          return (
            <div key={id} className='rounded-lg bg-white'>
              <div className='overflow-hidden rounded-t-lg'>
                <Image
                  src={image}
                  width={300}
                  height={300}
                  layout='responsive'
                />
              </div>
              <div className='mx-4 my-4'>
                <h2 className='text-xl font-bold text-gray-900'>{name}</h2>
                <p className='text-md text-gray-600'>Status : {status}</p>
                <p className='text-md text-gray-600'>Gender : {gender}</p>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default Home;
```

Here is the result of the implementation of the Rick and Morty Character List with a Custom Image.

<Image
  alt='implementation of the Rick and Morty Character List'
  src='/v1652332661/jagad.dev/posts/custom-image-transition-in-nextjs-with-tailwind-css/implementation_of_the_Rick_and_Morty_Character_List_rwb1sw.gif'
  width='600'
  height='319'
/>

## Conclusion

Tailwind CSS can be used to provide a transition effect to custom images, making them more interactive.

The code of this project lives at : [https://github.com/jagadyudha/custom-image-transition-in-nextjs-with-tailwind-css](https://github.com/jagadyudha/custom-image-transition-in-nextjs-with-tailwind-css)

Make an image more interactive with the use of CSS transitions.

Custom Image Transition in Next.js With Tailwind CSS


## Introduction

Sharing websites on social media is one of the most important things we can do to ensure that an audience sees them. However, if we just show links, it will be difficult to gain the attention of the audience.

With the Open Graph, we can control how our websites are shared on social media by displaying images, titles, descriptions, and links in a way that the audience is interested in seeing them.

<Image
  alt='Open graph Example'
  src='/jagad.dev/posts/dynamic-open-graph-cloudinary/Open_Graph_Example_fpyk51.png'
  width='1431'
  height='856'
/>

It can be seen that with the open graph, the website becomes more attractive when shared on social media. However, if we look at the website's meta tag, we can see that the open graph image is static.

```html {14-17}
<meta
  property="og:url"
  content="https://aged-clave-571.notion.site/Google-Search-Operators-Cheat-Sheet-e0b50566aa2a4dc6a9643dceda52a3a4/"
/>
<meta property="og:type" content="website" />
<meta
  property="og:title"
  content="Notion – The all-in-one workspace for your notes, tasks, wikis, and databases."
/>
<meta
  property="og:description"
  content="A new tool that blends your everyday work apps into one. It's the all-in-one workspace for you and your team"
/>
<meta
  property="og:image"
  content="https://www.notion.so/images/meta/default.png"
/>
```

So, instead of creating open graph images one by one, how can we make them dynamic? In this tutorial, we'll use cloudinary to build dynamic open graph images.

<Image
  alt='Meme about Open Graph'
  src='/jagad.dev/posts/dynamic-open-graph-cloudinary/meme_about_open_graph_qu9dzn.jpg'
  width='687'
  height='500'
/>

## Getting Started

First of all, if you're unfamiliar with cloudinary, basically cloudinary is a cloud image hosting service that allows you to transform images and videos to load faster with no visual degradation.

If you don't have a Cloudinary account yet, you can sign up now. More information about crate account on cloudinary can be found at [Programmable Media Developer Get Started Guide | Cloudinary](https://cloudinary.com/documentation/how_to_integrate_cloudinary)

## Cloudinary Transformation

With cloudinary, we can do URL transformations instead of using fancy editing tools. We can do this by accessing the URL like this:

<div className='url-blog'>
  <div>
    <span>https://res.cloudinary.com/demo/image/upload/</span><span className='url-blog-inline'>[YOUR_TRANSFORMATIONS]</span><span>/lady.jpg</span>
    <div />
  </div>
</div>

There's a lot we can do with cloudinary, you can check the [documentation](https://cloudinary.com/documentation/image_transformation_reference) for more information. Here are some of the transformations that we can use:

### Face detection-based image cropping

By using the `c_crop`, `g_face` transformation, we can crop the image to the face of the person.

<div className='url-blog'>
  <div>
    <span>https://res.cloudinary.com/demo/image/upload/</span><span className='url-blog-inline'>c_crop,g_face,h_400,w_400</span><span>/lady.jpg</span>
  </div>
</div>

<Image
  alt='Face detection-based image cropping'
  src='/jagad.dev/posts/dynamic-open-graph-cloudinary/Face_Crop_Transformations_l0csct.png'
  width='989'
  height='781'
/>

### Text overlay positioning

By using the `l_text` transformation, we can overlay text on the image. For example if we want to overlay the text `Haiiiiiii` on the image, we can use the following transformation:

<div className='url-blog'>
  <div>
    <span>https://res.cloudinary.com/demo/image/upload/</span><span className='url-blog-inline'>l_text:Arial_45_bold:Haiiiiiiiiii,g_north_west,x_20,y_20</span><span>/lady.jpg</span>
  </div>
</div>

<Image
  alt='Text overlay positioning'
  src='/jagad.dev/posts/dynamic-open-graph-cloudinary/Text_overlay_positioning_u2h1gt.png'
  width='1241'
  height='819'
/>

Cloudinary also provides a cookbook for creating transformations that can make it easier for us to customize images.

## Open Graph Design

Before we start implementing the open graph with cloudinary transformations, we need to design the open graph in figma. This is the design result that we will use.

<Image
  alt='Design Result'
  src='/jagad.dev/posts/dynamic-open-graph-cloudinary/Design_Result_ugexk0.png'
  width='1919'
  height='1079'
/>

After that, we can seperate the design into different parts.

<Image
  alt='Seperate Design Result'
  src='/jagad.dev/posts/dynamic-open-graph-cloudinary/Seperate_Design_Result_mzgatx.png'
  width='1164'
  height='663'
/>

I know that hr stands for horizontal rule, but I used it for a diagonal line. To be honest, I always use the hr name not only for horizontal but also for vertical.

## Dynamic Open Graph with Cloudinary

We need to structure folders in Cloudinary depending on the slug from posts to make the open graph dynamic. Here is the folder structure on the cloudinary that I have created.

<Image
  alt='Cloudinary Structure Folder'
  src='/jagad.dev/posts/dynamic-open-graph-cloudinary/cloudinary_structure_folder_g2cr99.png'
  width='1104'
  height='812'
/>

I put the design we separated earlier into two parts:

1. `social.png` and `hr.png` in the folder `/jagad.dev` (static)
2. `header.png` in each post slug folder `/jagad.dev/post/[slug]` (dynamic)

Here is the implementation for displaying `social.png`.

<div className='url-blog'>
  <div>
    <span>https://res.cloudinary.com/dlpb6j88q/image/upload/w_1200,h_630,c_limit,f_auto,fl_progressive,q_75/jagad.dev/social</span>
  </div>
</div>

For information, in cloudinary, we do not need to provide image formats such as `.png` or `.jpg` in the url. Instead, the image format will be served as `.webp`

<Image
  alt='Showing Social'
  src='/jagad.dev/posts/dynamic-open-graph-cloudinary/showing_social_hpfuyb.png'
  width='1043'
  height='630'
/>

After that, we combine it with `header.png`, which is in the `/jagad.dev/posts/[slug]` folder. For example, if I use the slug `steam-now-playing`, the header image is in the `/jagad.dev/posts/steam-now-playing` folder.

<div className='url-blog'>
  <div>
    <span>https://res.cloudinary.com/dlpb6j88q/image/upload/w_1200,h_630,c_limit,f_auto,fl_progressive,q_75/</span><span className='url-blog-inline'>w_600,h_630,c_fill,l_jagad.dev:posts:steam-now-playing:header/fl_layer_apply,g_east</span><span>/jagad.dev/social</span>
  </div>
</div>

<Image
  alt='Showing Social + header'
  src='/jagad.dev/posts/dynamic-open-graph-cloudinary/showing_social_header_pazzkr.png'
  width='1053'
  height='634'
/>

Since I don't want to display just a square header in the open graph, I use `hr.png` to create a diagonal line to the left of the image.

<div className='url-blog'>
  <div>
    <span>https://res.cloudinary.com/dlpb6j88q/image/upload/w_1200,h_630,c_limit,f_auto,fl_progressive,q_75/w_600,h_630,c_fill,l_jagad.dev:posts:steam-now-playing:header/fl_layer_apply,g_east/</span><span className='url-blog-inline'>w_192,h_630,c_fill,l_jagad.dev:hr/fl_layer_apply,g_west,x_485</span><span>/jagad.dev/social</span>
  </div>
</div>

<Image
  alt='Showing Social + header + hr'
  src='/jagad.dev/posts/dynamic-open-graph-cloudinary/showing_social_header_hr_xu1v8k.png'
  width='1278'
  height='786'
/>

to create a dynamic post title, we can use a text overlay transformation like this:

<div className='url-blog'>
  <div>
    <span>https://res.cloudinary.com/dlpb6j88q/image/upload/w_1200,h_630,c_limit,f_auto,fl_progressive,q_75/w_600,h_630,c_fill,l_jagad.dev:posts:steam-now-playing:header/fl_layer_apply,g_east/w_192,h_630,c_fill,l_jagad.dev:hr/fl_layer_apply,g_west,x_485/</span><span className='url-blog-inline'>w_500,h_630,c_fit,co_rgb:ffffff,g_west,x_60,y_-40,l_text:arial_50_bold:This%20is%20dynamic%20open%20graph%20with%20cloudinary</span><span>/jagad.dev/social</span>
  </div>
</div>

<Image
  alt='Showing Social + header + hr + text overlay'
  src='/jagad.dev/posts/dynamic-open-graph-cloudinary/showing_social_header_hr_text_overlay_afft3x.png'
  width='1278'
  height='786'
/>

## Implementation

Implementation can be done very easily by changing the post slug and post title. The following is an example implementation using the JavaScript programming language.

```javascript
const ogimage = `https://res.cloudinary.com/dlpb6j88q/image/upload/w_1200,h_630,c_limit,f_auto,fl_progressive,q_75/w_600,h_630,c_fill,l_jagad.dev:posts:${SLUG}:header/fl_layer_apply,g_east/w_192,h_630,c_fill,l_jagad.dev:hr/fl_layer_apply,g_west,x_485/w_500,h_630,c_fit,co_rgb:ffffff,g_west,x_60,y_-40,l_text:arial_50_bold:${TITLE}/jagad.dev/social`
```

This is the result of the dynamic open graph that has been implemented on this website.

<Image
  alt='Open Graph on this website'
  src='/jagad.dev/posts/dynamic-open-graph-cloudinary/Implementation_on_this_website_xndsi0.png'
  width='1166'
  height='959'
/>

## Conclusion

The advantage of creating dynamic open graphs with cloudinary is the fast load speed compared to using puppeteer or next-api-og-image.

Make dynamic Open Graph images with the help of Cloudinary URL transformations

Create Dynamic Open Graph Images with Cloudinary


## Introduction

Who doesn't know steam? The most popular digital distribution platform for PC gaming with huge discounts during the steam summer sale or steam winter sale 🤣🤣🤣

<Image
  alt='Steam now playing - Meme about Steam'
  src='/jagad.dev/posts/steam-now-playing/Steam_Meme_mdaqaq.jpg'
  width='500'
  height='649'
/>

Despite its large user base, several people are unaware that Steam also offers a free application programming interface (API) called Steam Web API, which allows you to access the data of your games and playtime.

Steam Web API is used on my website to display information about my gaming activities, such as online status, currently playing games, playing hours, etc.

<Image
  alt='Steam now playing - Demo'
  src='/jagad.dev/posts/steam-now-playing/ezgif-4-45c79688ce_ry2iuz.gif'
  width='800'
  height='425'
/>

In this post, I'll explain how to use Next.js to display now playing steam on your website.

## What Is Steam API

Steam Web API is an HTTP based web that can be used to access many Steam features for display on websites. The API is accessed using an HTTP request with the output of three different formats: JSON, XML, and VDF.

## What Does Steam API Do

The Steam web API can do a variety of things, including get user information, get currently played, and many more, as shown below.

- Get news for app: return the most recent version of a game provided by its appID.
- Get Global Achievement Percentages For App: Returns on global achievements for a certain game, expressed as a percentage.
- Get Player Summaries: returns basic profile information.
- Get Friend List: Returns any Steam user's friend list if their Steam Community profile visibility is set to "Public."
- Get Player Achievements: Returns a list of this user's achievements sorted by app id.
- Get Owned Games: returns a list of games a player has, as well as information on how much time they've spent playing them.
- Get Recently Played Games: returns a list of games played in the last two weeks by a player.

## Steam API Token

The most basic thing to do is to read the [documentation](https://developer.valvesoftware.com/wiki/Steam_Web_API#GetPlayerSummaries_.28v0002.29) from Steam directly. It can be seen in the GetPlayerSummaries (v0002) section. Steam provides an example URL as follows :

```bash
https://api.steampowered.com/ISteamUser/GetPlayerSummaries/v0002/?key=YOUR-STEAM-KEY&steamids=YOUR-STEAM-ID
```

From that URL, we can replace the steam key and id with your own.

We can get the key by accessing this [Web API Key for Steam - Steam Community](https://steamcommunity.com/dev/apikey).

<Image
  alt='Steam now playing - Steam API key'
  src='/v1649551969/jagad.dev/posts/steam-now-playing/steam_api_key_j8q6b7.png'
  width='877'
  height='265'
/>

To get a steam id, we can use the most primitive method by logging in through the browser and going to the steam profile section. In the URL bar, we will see the steam id.

<Image
  alt='Steam Id'
  src='/v1649552921/jagad.dev/posts/steam-now-playing/steam_id_xtorcq.png'
  width='1470'
  height='233'
/>

Use a browser to access the URL that already contains the key and id, or use Postman if you want it to be easier to read.

## Creating an API Route

Create a steam api route in `/pages/api/playersummaries.tsx`

```typescript
import type { NextApiRequest, NextApiResponse } from 'next';

export const getPlayerSummaries = () => {
  const playersummaries_endpoint = `http://api.steampowered.com/ISteamUser/GetPlayerSummaries/v0002/?key=${process.env.STEAM_TOKEN}&steamids=${process.env.STEAM_ID}`;
  return fetch(playersummaries_endpoint, {
    method: 'GET',
  });
};

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const response = await getPlayerSummaries();

  if (response.status != 200) {
    return res.status(200).json({
      steam: {
        personastate: 'Offline',
      },
    });
  }

  const steam = await response.json();
  if (steam.item === null) {
    return res.status(200).json({
      steam: {
        personastate: 'Offline',
      },
    });
  }
  const getPersonName = steam.response.players[0].personaname;
  const getAvatar = steam.response.players[0].avatarfull;
  const getStatus =
    steam.response.players[0].personastate === 1
      ? 'Online'
      : steam.response.players[0].personastate === 2
      ? 'Busy 😐'
      : steam.response.players[0].personastate === 3
      ? 'Away 🥱'
      : 'Offline 😴';

  const getGames = !steam.response.players[0].gameextrainfo
    ? false
    : `Playing - ${steam.response.players[0].gameextrainfo} 😆`;
  const getprofileUrl = steam.response.players[0].profileurl;
  return res.status(200).json({
    steam: {
      getPersonName,
      getAvatar,
      getStatus,
      getGames,
      getprofileUrl,
    },
  });
}
```

Add `.env.local` file with key and id that we get before (change the data below with yours and don't forget to restart the server).

```bash
STEAM_TOKEN=ED20ADF0123188DHDHDHJASSFB
STEAM_ID=76561198324704779
```

Try accessing [localhost:3000/api/playersummaries](#) from the browser to get response like this.

```json
{
  "steam": {
    "getPersonName": "imyour_universe",
    "getAvatar": "https://avatars.akamai.steamstatic.com/759b364331bd3566df2ee48fd389fc0310789288_full.jpg",
    "getStatus": "Online",
    "getGames": false,
    "getprofileUrl": "https://steamcommunity.com/profiles/76561198324704779/"
  }
}
```

<Ads />

## Fetching API with SWR

To fetch data from next.js API, we can use SWR. SWR is a library that can stream data updates constantly and automatically. And the UI will always be fast and reactive.

Install SWR

```bash
yarn add swr

# or

npm i swr
```

SWR can be placed in `pages/index.tsx` or wherever else you choose. I choose placed in `pages/activities.tsx`.

```typescript
import useSWR from 'swr';

const Games = () => {
  const fetcher = (url: RequestInfo) => fetch(url).then((res) => res.json());
  const { data } = useSWR('/api/playersummaries', fetcher);

  return <></>;
};

export default Games;
```

## Styling With Tailwind CSS

This code can be placed inside the section to render the data from SWR.

You can also modify the style to suit your preferences.

```typescript {9-25}
import React from 'react';
import useSWR from 'swr';

const Games = () => {
  const fetcher = (url: RequestInfo) => fetch(url).then((res) => res.json());
  const { data } = useSWR('/api/playersummaries', fetcher);

  return (
    <>
      <main className='prose prose-invert max-w-none prose-a:no-underline'>
        <div className='mx-auto  mb-16 max-w-3xl text-center'>
          <h1 className='-my-1 text-3xl sm:text-5xl'>Steam Player Summaries</h1>
          <p className='text-md text-gray-400 sm:text-lg'>
            for now {data?.steam.getPersonName} is{' '}
            <span className='text-primary'>
              {data?.steam.getGames === false
                ? data?.steam.getStatus
                  ? data?.steam.getStatus
                  : '-'
                : data?.steam.getGames}
            </span>
          </p>
        </div>
      </main>
    </>
  );
};

export default Games;
```

## Resources

- [Usage with Next.js – SWR](https://swr.vercel.app/docs/with-nextjs)
- [API Routes: Introduction | Next.js (nextjs.org)](https://nextjs.org/docs/api-routes/introduction)

Using Steam web API to display now playing steam on websites

Hey there! I'm Jagad Yudha

-- viewsHow to Create a Whatsapp Bot With Node.js

-- viewsCustom Image Transition in Next.js With Tailwind CSS

-- viewsCreate Dynamic Open Graph Images with Cloudinary

-- viewsHow to Display Steam Now Playing With Next.js

Subscribe to the newsletter