
## Pengantar

PyScript adalah framework untuk menampilkan program Python di browser menggunakan antarmuka HTML. mirip dengan javascript, tetapi ditulis dengan bahasa pemrograman Python.

Sebelum kita mulai, saya akan mengatakan di awal bahwa PyScript tidak akan menggantikan JavaScript.

<Image
  alt='Meme about PyScript'
  src='/jagad.dev/posts/is-pyscript-going-to-take-the-place-of-javascript/meme_about_pyscript_qw3wgf.gif'
  width='720'
  height='396'
/>

PyScript tidak memiliki banyak fitur seperti JavaScript. Jika kalian membuka [PyScript | Run Python in your HTML](https://pyscript.net/), Dapat dilihat bahwa Pyscript masih sangat-sangat alfa dan tidak disarankan untuk production.

Tapi tidak seru jika kita selesai sampai disini. kita akan membahas lebih lanjut tentang PyScript di posting ini.

## Fitur PyScript

Berikut ini adalah beberapa fitur PyScript yang dapat digunakan:

- Python di browser: Aktifkan konten drop-in, hosting file eksternal, dan hosting aplikasi tanpa bergantung pada konfigurasi sisi server
- Ekosistem Python: Jalankan banyak package populer Python dan library (seperti numpy, pandas, scikit-learn, dan banyak lagi)
- Python dengan JavaScript: Komunikasi dua arah antara Python dan JavaScript
- Manajemen Environment: Izinkan pengguna untuk menentukan package dan file apa yang akan dimasukkan untuk menjalankan kode.
- Pengembangan aplikasi visual: Dapat menggunakan komponen UI pilihan yang tersedia.
- fleksibel framework: framework yang fleksibel yang dapat dimanfaatkan untuk membuat dan berbagi komponen pluggable dan extensible baru secara langsung dengan Python.

## Memulai

Untuk menginstal PyScript sangat mudah. kalian cukup membuka [PyScript | Jalankan Python di HTML Kalian](https://pyscript.net/) dan ikuti petunjuknya.

<Image
  alt='Installation instructions'
  src='/jagad.dev/posts/is-pyscript-going-to-take-the-place-of-javascript/installation_jd8dso.png'
  width='1104'
  height='491'
/>

PyScript membuat lelucon lucu 😂😂😂

Omong-omong, kita tidak perlu menginstal PyScript. kita cukup memasukkan tag berikut ke dalam html.

```html {8-9}
<!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>PyScript Playground</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body></body>
</html>
```

Setelah itu, kita dapat membuka html dengan ekstensi live server atau membukanya di browser dengan mengklik file html.

## Komponen PyScript

Untuk menjalankan PyScript, kita perlu menambahkan tag `<py-script>` dan memasukkan kode python yang dapat dijalankan di dalam halaman web.

misalnya, kita ingin print `hello world` dan menampilkan pada halaman web. Kita bisa melakukannya seperti ini:

```html {12}
<!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>PyScript Playground</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
    <py-script> print('hello world') </py-script>
  </body>
</html>
```

<Image
  alt='Print hello world'
  src='/jagad.dev/posts/is-pyscript-going-to-take-the-place-of-javascript/print_hello_world_ko8ndb.png'
  width='959'
  height='519'
/>

## PyScript dengan library Populer

Kita juga dapat menggunakan library populer pada PyScript. Misalnya, kita dapat menggunakan pandas untuk membaca file csv.

Karena kita membutuhkan Library eksternal, kita perlu mendeklarasikannya dalam tag `<py-env>`.

```html {10}
<!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>PyScript Playground</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    <py-env> - pandas </py-env>
  </head>
  <body>
    .....
  </body>
</html>
```

Setelah itu, kita dapat menggunakan pandas dalam kode PyScript seperti berikut:

```html {13-19}
<!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>PyScript Playground</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    <py-env> - pandas </py-env>
  </head>
  <body>
    <py-script>
      import pandas as pd
      from pyodide.http import open_url

      data_training = pd.read_csv(open_url("https://raw.githubusercontent.com/jagadyudha/jagadyudha/main/data_training.csv"))
      data_training.head()
    </py-script>
  </body>
</html>
```

<Image
  alt='PyScript with pandas'
  src='/jagad.dev/posts/is-pyscript-going-to-take-the-place-of-javascript/PyScript_with_pandas_dxoeu1.png'
  width='953'
  height='507'
/>

Tidak hanya itu, kita dapat menggunakan library sklearn untuk membuat machine learning.

Dalam hal ini, saya ingin menggunakan sklearn.naive_bayes

```html {10-15, 17-37}
<!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>PyScript Playground</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    <py-env> 
        - pandas
        - scikit-learn
        - numpy
    </py-env>
  </head>
  <body>
    <py-script>
      import pandas as pd
      from sklearn.model_selection import train_test_split
      from sklearn.naive_bayes import GaussianNB
      from pyodide.http import open_url
      from sklearn.metrics import classification_report
      import numpy as np

      data_training = pd.read_csv(open_url("https://raw.githubusercontent.com/jagadyudha/jagadyudha/main/data_training.csv"))
      x = data_training.drop(["Jenis Gangguan"], axis=1)
      y = data_training["Jenis Gangguan"]
      x_train, x_test, y_train, y_test = train_test_split(x, y, test_size=0.18, random_state=45)
      modelnb = GaussianNB()
      nbtrain = modelnb.fit(x_train, y_train)
      y_pred = nbtrain.predict(x_test)
        
      print("Predict :", y_pred)
      print("Actual :", np.array(y_test))

      print(classification_report(y_test, y_pred))
    </py-script>
  </body>
</html>
```

<Image
  alt='PyScript with sklearn'
  src='/jagad.dev/posts/is-pyscript-going-to-take-the-place-of-javascript/Pyscript_with_sklearn_uratq8.png'
  width='959'
  height='524'
/>

Saya tidak akan menunjukkan cara membaca data karena akan memakan banyak waktu. Namun, dapat dilihat bahwa PyScript juga berfungsi untuk menjalankan machine learning.

<Ads />

## Komponen PyRepl

`<py-repl>` digunakan untuk membuat komponen REPL yang ditampilkan ke halaman sebagai editor kode dan memungkinkan pengguna untuk menulis kode yang dapat dieksekusi.

```html {12-13}
<!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>PyScript Playground</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
    <py-repl id="repl" auto-generate="true"></py-repl>
    <p style="margin-left: 30px">shift + enter to run</p>
  </body>
</html>
```

<Image
  alt='PyRepl Component'
  src='/jagad.dev/posts/is-pyscript-going-to-take-the-place-of-javascript/PyRepl_Component_rpptsk.png'
  width='958'
  height='517'
/>

## Bermain Mario dengan PyScript

PyScript juga dapat digunakan untuk menjalankan game seperti Mario Bros. Cek source code di tautan berikut: [pyscript/examples/mario at main pyscript/pyscript (github.com)](https://github.com/pyscript/pyscript/tree/main/examples/mario)

<Embed src="https://www.youtube.com/embed/4BPWRRmX6c4"/>

## Kesimpulan

Terlalu dini bagi PyScript untuk mengalahkan JavaScript. Sejujurnya, menurut saya pribadi hampir tidak mungkin untuk mengalahkan JavaScript.

Apakah menurut kalian PyScript akan mengalahkan Javascript? beri tahu apa yang kalian pikirkan di komentar.

Memahami framework untuk menampilkan program Python di browser menggunakan antarmuka HTML.

Apakah PyScript akan menggantikan JavaScript?


## Introduction

PyScript is a framework for building rich Python programs in the browser using the HTML interface. similar to javascript, but written in the Python programming language.

Before we start, I'm going to say in the beginning that PyScript does not replace JavaScript.

<Image
  alt='Meme about PyScript'
  src='/jagad.dev/posts/is-pyscript-going-to-take-the-place-of-javascript/meme_about_pyscript_qw3wgf.gif'
  width='720'
  height='396'
/>

PyScript does not have a lot of features like JavaScript. If we open [PyScript | Run Python in your HTML](https://pyscript.net/), we will see that Pyscript is very alpha and under heavy development.

But it's not fun if we finish there. We will discuss more about PyScript in this post.

## PyScript Features

The following are some of the PyScript features that can be used:

- Python in the browser: Enable drop-in content, external file hosting, and application hosting without the reliance on server-side configuration
- Python ecosystem: Run many popular packages of Python and the scientific stack (such as numpy, pandas, scikit-learn, and more)
- Python with JavaScript: Bi-directional communication between Python and Javascript objects and namespaces
- Environment management: Allow users to define what packages and files to include for the page code to run
- Visual application development: Use readily available curated UI components, such as buttons, containers, text boxes, and more
- Flexible framework: A flexible framework that can be leveraged to create and share new pluggable and extensible components directly in Python

## Getting Started

To install PyScript it's very easy. You just open the [PyScript | Run Python in your HTML](https://pyscript.net/) and follow the instructions.

<Image
  alt='Installation instructions'
  src='/jagad.dev/posts/is-pyscript-going-to-take-the-place-of-javascript/installation_jd8dso.png'
  width='1104'
  height='491'
/>

PyScript cracked a funny joke 😂😂😂

By the way, we don't need to install PyScript. We simply insert the following tag into our html.

```html {8-9}
<!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>PyScript Playground</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body></body>
</html>
```

After that, we can open html with a live server extension or just open it in browser by clicking the html file.

## PyScript Component

To run PyScript, we need to add the `<py-script>` tag and specify the python code that can be executed within the web page.

for example, We want to print `hello world` in the web page. We can do it like this:

```html {12}
<!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>PyScript Playground</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
    <py-script> print('hello world') </py-script>
  </body>
</html>
```

<Image
  alt='Print hello world'
  src='/jagad.dev/posts/is-pyscript-going-to-take-the-place-of-javascript/print_hello_world_ko8ndb.png'
  width='959'
  height='519'
/>

## PyScript with Popular Library

We can also use popular library on PyScript. For example, we can use pandas to read csv files.

Because we need external Library, we need to declare them in the `<py-env>` tag.

```html {10}
<!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>PyScript Playground</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    <py-env> - pandas </py-env>
  </head>
  <body>
    .....
  </body>
</html>
```

After that, we can use pandas in PyScript code like this:

```html {13-19}
<!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>PyScript Playground</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    <py-env> - pandas </py-env>
  </head>
  <body>
    <py-script>
      import pandas as pd
      from pyodide.http import open_url

      data_training = pd.read_csv(open_url("https://raw.githubusercontent.com/jagadyudha/jagadyudha/main/data_training.csv"))
      data_training.head()
    </py-script>
  </body>
</html>
```

<Image
  alt='PyScript with pandas'
  src='/jagad.dev/posts/is-pyscript-going-to-take-the-place-of-javascript/PyScript_with_pandas_dxoeu1.png'
  width='953'
  height='507'
/>

Not only that, we can use the library sklearn to run machine learning. 

In this case, I want to know use sklearn.naive_bayes

```html {10-15, 17-37}
<!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>PyScript Playground</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    <py-env> 
        - pandas
        - scikit-learn
        - numpy
    </py-env>
  </head>
  <body>
    <py-script>
      import pandas as pd
      from sklearn.model_selection import train_test_split
      from sklearn.naive_bayes import GaussianNB
      from pyodide.http import open_url
      from sklearn.metrics import classification_report
      import numpy as np

      data_training = pd.read_csv(open_url("https://raw.githubusercontent.com/jagadyudha/jagadyudha/main/data_training.csv"))
      x = data_training.drop(["Jenis Gangguan"], axis=1)
      y = data_training["Jenis Gangguan"]
      x_train, x_test, y_train, y_test = train_test_split(x, y, test_size=0.18, random_state=45)
      modelnb = GaussianNB()
      nbtrain = modelnb.fit(x_train, y_train)
      y_pred = nbtrain.predict(x_test)
        
      print("Predict :", y_pred)
      print("Actual :", np.array(y_test))

      print(classification_report(y_test, y_pred))
    </py-script>
  </body>
</html>
```

<Image
  alt='PyScript with sklearn'
  src='/jagad.dev/posts/is-pyscript-going-to-take-the-place-of-javascript/Pyscript_with_sklearn_uratq8.png'
  width='959'
  height='524'
/>

I'm not going to show how to read the data because it's going to take a lot of time. However, we can see that PyScript is also working to run machine learning.

<Ads />

## PyRepl Component

`<py-repl>` creates a REPL component that is rendered to the page as a code editor and allows users to write executable code.

```html {12-13}
<!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>PyScript Playground</title>
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
  </head>
  <body>
    <py-repl id="repl" auto-generate="true"></py-repl>
    <p style="margin-left: 30px">shift + enter to run</p>
  </body>
</html>
```

<Image
  alt='PyRepl Component'
  src='/jagad.dev/posts/is-pyscript-going-to-take-the-place-of-javascript/PyRepl_Component_rpptsk.png'
  width='958'
  height='517'
/>

## Play Mario with PyScript

PyScript can also be used to run games like Mario Bros. You can check the source code at the following link: [pyscript/examples/mario at main pyscript/pyscript (github.com)](https://github.com/pyscript/pyscript/tree/main/examples/mario)

<Embed src="https://www.youtube.com/embed/4BPWRRmX6c4"/>

## Conclusion

It's too early for PyScript to match JavaScript. In fact, my personal opinion is that it's almost impossible to beat JavaScript.

Do you think PyScript will beat Javascript? let me know what you think in the comments.

Understanding framework for building rich Python programs in the browser using the HTML interface.

Is PyScript going to take the place of JavaScript?


## Introduction

WebDAV has become a boring thing in the underground circles, WebDAV is a loophole that is often used by hacker kiddies (it's me 🤣) because the technique is easy, and there are lots of tools that can be used. One of the most famous tools is the WebDav shell maker created by hmei7.

Although considered for hacker kiddies, many people do not know that there are tools that can be used to find sites that use webDav. of course the site can also be submitted at zone-h.org.😁

The tool we are talking about is metasploit. metasploit is The world's most used penetration testing framework. Metasploit helps security teams do more than just verify vulnerabilities, manage security assessments, and improve security awareness.

## Getting Started

Before we start, we have to install Metasploit. To install Metasploit, we can download it directly from the Metasploit website [Download Metasploit: World's Most Used Penetration Testing Tool | Metasploit](https://www.metasploit.com/download).

Because I'm using kali linux, the metasploit package is available by default.

## Running Metasploit

To run metasploit, we can use the command:

```bash
$ msfconsole
```

<Image
  alt='Running Metasploit'
  src='/v1652440384/jagad.dev/posts/scan-webdav-ip-using-metasploit/Running_Metasploit_jmrwvf.png'
  width='1366'
  height='768'
/>

## Auxiliary Module Scanner

The webdav scanner module checks whether WebDav is enabled on a server or a group of servers. This helps us to fine-tune our attacks even further. [Scanner HTTP Auxiliary Modules - Metasploit Unleashed (offensive-security.com)](https://www.offensive-security.com/metasploit-unleashed/scanner-http-auxiliary-modules/)

To use the scanner module, we can use the command:

```bash
use auxiliary/scanner/http/webdav_scanner
```

<Image
  alt='Auxiliary Module Scanner'
  src='/v1652440712/jagad.dev/posts/scan-webdav-ip-using-metasploit/Auxiliary_Module_Scanner_gbvg5m.png'
  width='1366'
  height='768'
/>

<Ads />

## Set RHOSTS

The only thing we need to do now is set our RHOSTS settings and run the scanner.

```bash
$ set RHOSTS 192.134.1.200-250
$ run
```

192.134.1.200 is the IP Addresses to be scanned and 250 is the end of the IP Addresses. so basically we scan from 192.134.1.200 to 192.134.1.250

<Image
  alt='Set RHOSTS'
  src='/v1652441104/jagad.dev/posts/scan-webdav-ip-using-metasploit/Set_RHOSTS_g6x6sr.png'
  width='1366'
  height='768'
/>

## Scan Results

When you find the words "has WebDav enabled", it is possible that the website can be exploited.

<Image
  alt='Scan Results'
  src='/v1652441322/jagad.dev/posts/scan-webdav-ip-using-metasploit/Scan_Results_wkdluk.png'
  width='687'
  height='159'
/>

## Conclusion

Metasploit tools can be used to find websites that use webdav. But keep in mind that not all websites that use webdav can be exploited. The key is to be patient😋


Using the worlds most used penetration testing framework to scan WebDav

Scan WebDav IP Using Metasploit

## Introduction

React Native Camera is a well-known library of React Native ecosystems. It allows you to control the camera and interacts with the device's native operating system and hardware. The features of React Native Camera are listed below :

- Bar Code
- Face Detection
- Text Recognition
- Take Pictures

In this tutorial, let us build a RNCamera with react hooks and implement how to capture and read barcodes.

<Image
  alt='Meme'
  src='/jagad.dev/posts/react-native-camera-but-with-react-hooks/react_hooks_meme_vs0ptn.jpg'
  width='503'
  height='496'
/>

RNCamera's [official documentation](https://react-native-camera.github.io/react-native-camera/docs/rncamera) may be found here if you want to learn more about it

## Install RNCamera Module

You have to install some dependencies to use the RNCamera module.

For (RN > 0.60):

```bash
npm install react-native-camera --save
cd ios && pod install && cd ..
```

For RN < 0.60:

```bash
npm install react-native-camera --save
react-native link react-native-camera
```

## Other required steps are to add permissions on both Android and iOS

**iOS - other required steps**

Add permissions with usage descriptions to your app `Info.plist`

```xml

<key>NSCameraUsageDescription</key>
<string>Your message to user when the camera is accessed for the first time</string>


<key>NSPhotoLibraryAddUsageDescription</key>
<string>Your message to user when the photo library is accessed for the first time</string>


<key>NSPhotoLibraryUsageDescription</key>
<string>Your message to user when the photo library is accessed for the first time</string>


<key>NSMicrophoneUsageDescription</key>
<string>Your message to user when the microphone is accessed for the first time</string>
```

**Android - other required steps**

Add permissions to your app `android/app/src/main/AndroidManifest.xml`

```xml

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

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

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

Insert the following lines in `android/app/build.gradle`:

```js
android {
  ...
  defaultConfig {
    ...
    missingDimensionStrategy 'react-native-camera', 'general' // <--- insert this line
  }
}
```

## RN Camera is deprecated, but...

I haven't been in the react-native-camera library for a long time, but I recently discovered that this library is deprecated and an error is popping up regarding viewproptypes in the latest react native

This is pretty easily resolved. The `deprecated-react-native-prop-types` library only has to be installed in the following way:

```bash
#npm
npm i deprecated-react-native-prop-types

#or

#yarn
yarn add deprecated-react-native-prop-types
```

After that go to ***/node-modules/react-native-camera/src/RNCamera.js***  folder and delete `ViewPropTypes`

```js {7}
import React from 'react';
import PropTypes from 'prop-types';
import {
  findNodeHandle,
  Platform,
  NativeModules,
  ViewPropTypes, // DELETE
  requireNativeComponent,
  View,
  ActivityIndicator,
  Text,
  StyleSheet,
  PermissionsAndroid,
} from 'react-native';
```

Then we just need to add the library that we have previously installed.

```js {14}
import React from 'react';
import PropTypes from 'prop-types';
import {
  findNodeHandle,
  Platform,
  NativeModules,
  requireNativeComponent,
  View,
  ActivityIndicator,
  Text,
  StyleSheet,
  PermissionsAndroid,
} from 'react-native';
import {ViewPropTypes} from 'deprecated-react-native-prop-types'
```

## Implementation of RNCamera using React Hooks

Class components are used instead of functional components in the RNCamera documentation, but we use functional components here because, these days, functional components are used more often.

```javascript
Import RNCamera Module.
import {RNCamera} from 'react-native-camera';

Then use the <RNCamera/> tag.
import React from 'react';
import {RNCamera} from 'react-native-camera';

const App = () => {
  const ref = React.createRef();
  return (
    <RNCamera
      ref={ref}
      style={{flex: 1, justifyContent: 'flex-end', alignItems: 'center'}}
      type={RNCamera.Constants.Type.back}
      flashMode={RNCamera.Constants.FlashMode.on}
      androidCameraPermissionOptions={{
        title: 'Permission to use camera',
        message: 'We need your permission to use your camera',
        buttonPositive: 'Ok',
        buttonNegative: 'Cancel',
      }}
    />
  );
};

export default App;
```

After the `<RNCamera/>` tag is called, this is what it looks like.

<Image
  alt='React Native Camera'
  src='/v1649557369/jagad.dev/posts/react-native-camera-but-with-react-hooks/RNCamera_nvliau.png'
  width='1919'
  height='1079'
/>

## How to Take a Photo with RNCamera

In order for the Camera to take pictures, we must create a function to handle it.

```javascript
const takePicture = async () => {
  if (ref.current) {
    const options = { quality: 0.5, base64: true };
    const data = await ref.current.takePictureAsync(options);
    console.log(data.uri);
  }
};
```

Here is the complete source code with the `take` button.

```javascript {8-14, 34}
import React from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import { RNCamera } from 'react-native-camera';

const App = () => {
  const ref = React.createRef();

  const takePicture = async () => {
    if (ref.current) {
      const options = { quality: 0.5, base64: true };
      const data = await ref.current.takePictureAsync(options);
      console.log(data.uri);
    }
  };

  return (
    <View
      style={{ flex: 1, flexDirection: 'column', backgroundColor: 'black' }}
    >
      <RNCamera
        ref={ref}
        style={{ flex: 1, justifyContent: 'flex-end', alignItems: 'center' }}
        type={RNCamera.Constants.Type.back}
        flashMode={RNCamera.Constants.FlashMode.on}
        androidCameraPermissionOptions={{
          title: 'Permission to use camera',
          message: 'We need your permission to use your camera',
          buttonPositive: 'Ok',
          buttonNegative: 'Cancel',
        }}
      />
      <View style={{ flex: 0, flexDirection: 'row', justifyContent: 'center' }}>
        <TouchableOpacity
          onPress={takePicture}
          style={{
            flex: 0,
            backgroundColor: '#fff',
            borderRadius: 1000,
            padding: 15,
            paddingHorizontal: 20,
            alignSelf: 'center',
            margin: 20,
          }}
        >
          <Text style={{ fontSize: 14 }}> Take Picture </Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

export default App;
```

When we press the `take` button, a log with the URL of the image that was taken will appear.

<Image
  alt='Take Picture With RNCamera'
  src='/v1649557743/jagad.dev/posts/react-native-camera-but-with-react-hooks/Take_picture_with_RNCamera_ursckf.png'
  width='1904'
  height='1080'
/>

<Ads />

## How to read barcodes

RNCamera can also read aztec, code128, code39, code39, code39, mod43, code93, ean13, ean8, pdf417, qr, and upce barcodes.

we can use `onBarCodeRead` property to read barcode.

```javascript {18-20}
import React from 'react';
import { RNCamera } from 'react-native-camera';

const App = () => {
  const ref = React.createRef();
  return (
    <RNCamera
      ref={ref}
      style={{ flex: 1, justifyContent: 'flex-end', alignItems: 'center' }}
      type={RNCamera.Constants.Type.back}
      flashMode={RNCamera.Constants.FlashMode.on}
      androidCameraPermissionOptions={{
        title: 'Permission to use camera',
        message: 'We need your permission to use your camera',
        buttonPositive: 'Ok',
        buttonNegative: 'Cancel',
      }}
      //this is onBarcodeRead Property
      onBarCodeRead={(barcodes) => {
        console.log(barcodes);
      }}
    />
  );
};

export default App;
```

A barcode log will show when we point the camera at the barcode. In this case, I'm using QR types.

<Image
  alt='Scan Barcodes With RNCamera'
  src='/v1649557941/jagad.dev/posts/react-native-camera-but-with-react-hooks/Scan_barcode_wirh_RNCamera_utwegr.png'
  width='1856'
  height='1078'
/>

## Conclusion

If you're developing cross-platform apps with React Native, the react-native-camera module is a great way to take advantage of the device's hardware.

Control the camera and interacts with the devices native operating system and hardware using RNCamera

React Native Camera but With React Hooks


## Pengantar

WhatsApp Messenger adalah aplikasi berbalas pesan lintas platform yang memungkinkan kita mengirim dan menerima pesan secara real time. WhatsApp Messenger digunakan oleh hampir semua orang di planet ini. Sayangnya, tidak seperti Telegram, penggunaan API Whatsapp masih dibatasi.

Dalam posting ini, kita akan membuat bot Whatsapp gratis dengan bantuan 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'
/>

## Library yang Diperlukan

Menginstal library dari npm membutuhkan instalasi `node.js 12` atau lebih tinggi terlebih dahulu, diikuti dengan menginstal library dari paket npm.

Menginstal `whatsapp-web.js`:

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

or

$ yarn add whatsapp-web.js
```

Menginstal `qr-code-terminal`:

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

or

$ yarn add qr-code-terminal
```

## Cara Menjalankan Program

Buat file bernama `app.js` dalam proyek dan tempel kode ini ke dalamnya.

```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!');
});
```

Kemudian, pada terminal atau command prompt, ketik perintah ini.

```bash
$ node app

or

$ node app.js
```

Saat perintah dijalankan, muncul kode QR, yang akan kita pindai dengan akun Whatsapp yang kita gunakan sebagai 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'
/>

## Membalas Pesan

Tujuan membuat bot adalah agar dapat merespons pesan. Jadi, dalam proyek yang kita buat sebelumnya, paste kode berikut.

```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');
  }
});
```

Saat orang lain mengetik pesan `halo` ke bot, kita akan buat bot membalasnya.

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

## Membuat Otentikasi

Fungsi dari pembuatan autentikasi adalah kita tidak perlu login (scan QR code) setiap kali menjalankan `app.js`.

Berikut adalah kode untuk membuat otentikasi:

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

//menyimpan data otentikasi ke file
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 />

## Membalas Pesan Dengan Gambar

Di sisi lain, bot kurang interaktif jika hanya membalas dengan pesan teks, jadi kita bisa membalas pesan menggunakan media seperti gambar.

Berikut adalah kode untuk membuat bot membalas dengan media gambar:

```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!');
});

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

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

Kita akan membuat bot merespons dengan gambar setiap kali orang lain mengetik pesan `meme`.

<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'
/>

## Implementasi dengan API Yu-Gi-oh

untuk membuktikan bahwa perpustakaan dapat disesuaikan dengan kebutuhan proyek. Dalam hal ini, saya akan menggunakan [YGOPRODeck Yu-Gi-Oh! API](https://db.ygoprodeck.com/api-guide/).

Berikut ini adalah cara Yu-Gi-Oh! bot yang akan kita buat bekerja:

1. Seseorang mengetik Nama Kartu Yugioh melalui pesan WhatsApp.
2. Nama kartu akan diperiksa di database.
3. Jika Nama Kartu Yugioh ditemukan di database, bot akan merespons dengan gambar kartu.

Library tambahan `Axios` diperlukan agar bot WhatsApp dapat mengirim permintaan ke Yu-Gi-Oh! API:

```bash
$ npm install axios

or

$ yarn add axios
```

Berikut adalah kode lengkap dari 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);
      });
  }
});
```

Saya mencoba mengetik pesan menggunakan teks dari nama kartu Yu-Gi-Oh!, yaitu `Card Shuffle`, kemudian bot merespon dengan foto dan deskripsi kartu yang kami kirim sebelumnya.

<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'
/>

Saya mencoba mengetik pesan menggunakan nama lain untuk kartu Yugioh, yaitu 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

Karena API WhatsApp masih terbatas, third-party tools seperti `whatsapp-web.js` banyak membantu. Namun, karena library ini tidak berafiliasi dengan WhatsApp, jadi masih memiliki banyak masalah.

Kode proyek ini ada di :
[https://github.com/jagadyudha/yugioh-whatsapp-bot](https://github.com/jagadyudha/yugioh-whatsapp-bot)


Menggunakan third-party library untuk membuat bot WhatsApp gratis dan dapat dikustomisasi.

Cara Membuat Bot Whatsapp Dengan Node.js


## Introduction

Web scraping is a technique for obtaining usable data for a specific purpose. In essence, the website contains a large amount of data, if you want to get that data then one way is by web scraping.

In this post, we will try scraping urls on Google and learn how to optimize searches using the Google search operator.

<Image
  alt='Meme'
  src='/v1650258328/jagad.dev/posts/scraping-google-search-with-python-and-beautifulsoup4/0_Bj_O1jRFzZjKxzi4_pnssel.jpg'
  width='550'
  height='400'
/>

Source Image: [Automating Social Media Contests with Web Scraping | by Jason Yip | Towards Data Science](https://towardsdatascience.com/automating-social-media-contests-with-web-scraping-41c55ff6022a)

## Getting Started

Clone this repository by executing the following command:

```bash
$ git clone https://github.com/jagadyudha/google-scraper
```

Install the libraries that are required by executing the following command:

```bash
# Python3
$ pip3 install -r requirements.txt

# or

# Python2
$ pip install -r requirements.txt
```

Before we jump into how to run the project, we need to know how this project works.

1. Identify google search url
2. Collect data from urls
3. Find `div` tag with class `g`
4. FInd `a` tag inside class that we found in step 3

## How to Run the Project

To run the code is quite simple. Just write the following command:

```bash
# Python3
$ python3 main.py

# or

# Python2
$ python main.py
```

Input pages and input data will be displayed after executing the above command. Input pages is the number of Google pages that you want to scrape it, while input data is the keyword you want to search for.

<Image
  alt='Output'
  src='/v1650265187/jagad.dev/posts/scraping-google-search-with-python-and-beautifulsoup4/output_x6vsfc.png'
  width='765'
  height='208'
/>

<Ads />

## Optimize Search With Google Search Operators

Google search operators are often used to find information that is specific, allowing for accurate search results even when the information is tough to track down.

We may also use the Google search operator in this project. For example, I will find a pdf file with the keyword `learning Python`.

So, I will search with keyword `filetype:pdf intext:learning Python`

<Image
  alt='search with google search operators'
  src='/v1650268568/jagad.dev/posts/scraping-google-search-with-python-and-beautifulsoup4/Search_with_google_search_operators_mzacyk.png'
  width='1222'
  height='467'
/>

Unfortunately, if you use Google Search Operators too often, it can bring up captchas.

<Image
  alt='Use Google Search Operators too often'
  src='/v1650270958/jagad.dev/posts/scraping-google-search-with-python-and-beautifulsoup4/cons_w5wvru.png'
  width='595'
  height='239'
/>

## Google Search Operators Cheat Sheet

Previously, I have given an example of using Google Search Operators. For more details, you can check out the following cheat sheet: [Google Search Operators Cheat Sheet (notion.site)](https://aged-clave-571.notion.site/Google-Search-Operators-Cheat-Sheet-e0b50566aa2a4dc6a9643dceda52a3a4)

## Conclusion

With the help of this tool, we can do scraping automatically without the need to copy URLs one by one. However, there is an unsolved problem with captcha when using it too often.


Learn how to Scraping Google and optimize search using google search operators

Scraping Google Search With Python and Beautifulsoup4


## 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


## Pengantar

Scraping web adalah teknik untuk memperoleh data yang dapat digunakan untuk tujuan tertentu. Intinya website berisi data yang banyak, jika ingin mendapatkan data tersebut maka salah satu caranya adalah dengan web scraping.

Dalam posting ini, kami akan mencoba scraping url Google dan mempelajari cara mengoptimalkan pencarian menggunakan operator pencarian Google.

<Image
  alt='Meme'
  src='/v1650258328/jagad.dev/posts/scraping-google-search-with-python-and-beautifulsoup4/0_Bj_O1jRFzZjKxzi4_pnssel.jpg'
  width='550'
  height='400'
/>

Source Image: [Automating Social Media Contests with Web Scraping | by Jason Yip | Towards Data Science](https://towardsdatascience.com/automating-social-media-contests-with-web-scraping-41c55ff6022a)

## Penginstalan

Kloning repositori dengan menjalankan perintah berikut:

```bash
$ git clone https://github.com/jagadyudha/google-scraper
```

Instalasi library yang diperlukan dengan menjalankan perintah berikut:

```bash
# Python3
$ pip3 install -r requirements.txt

# or

# Python2
$ pip install -r requirements.txt
```

Sebelum kita masuk ke cara menjalankan proyek, kita perlu tahu cara kerja proyek ini.

1. Identifikasi url pencarian google
2. Kumpulkan data dari url
3. Temukan tag `div` dengan class `g`
4. TEMUKAN tag `a` di dalam class yang kita temukan di langkah 3

## Cara Menjalankan Proyek

Untuk menjalankan kodenya cukup sederhana. Cukup tulis perintah berikut:

```bash
# Python3
$ python3 main.py

# or

# Python2
$ python main.py
```

Halaman input dan data input akan ditampilkan setelah menjalankan perintah di atas.

Halaman input adalah jumlah halaman Google yang ingin Anda kikis, sedangkan data input adalah kata kunci yang ingin Anda cari.

<Image
  alt='Output'
  src='/v1650265187/jagad.dev/posts/scraping-google-search-with-python-and-beautifulsoup4/output_x6vsfc.png'
  width='765'
  height='208'
/>

<Ads />

## mengoptimalkan pencarian dengan operator pencarian Google

Operator pencarian Google sering digunakan untuk menemukan informasi yang spesifik, memungkinkan hasil pencarian yang akurat bahkan ketika informasi tersebut sulit untuk dilacak.

Kita juga dapat menggunakan operator pencarian Google dalam proyek ini. Sebagai contoh, saya akan mencari file pdf dengan kata kunci `learning Python`.

Jadi, saya akan mencari dengan kata kunci `filetype:pdf intext:learning Python`

<Image
  alt='mengoptimalkan pencarian dengan operator pencarian Google'
  src='/v1650268568/jagad.dev/posts/scraping-google-search-with-python-and-beautifulsoup4/Search_with_google_search_operators_mzacyk.png'
  width='1222'
  height='467'
/>

Sayangnya, jika Anda terlalu sering menggunakan Operator Penelusuran Google, hal tersebut dapat memunculkan captcha.

<Image
  alt='menggunakan google operator terlalu sering'
  src='/v1650270958/jagad.dev/posts/scraping-google-search-with-python-and-beautifulsoup4/cons_w5wvru.png'
  width='595'
  height='239'
/>

## Cheat Sheet Operator Penelusuran Google

Sebelumnya saya sudah memberikan contoh penggunaan Google Search Operators. Untuk lebih jelasnya, Anda dapat melihat cheat sheet berikut: [Google Search Operators Cheat Sheet (notion.site)](https://aged-clave-571.notion.site/Google-Search-Operators-Cheat-Sheet-e0b50566aa2a4dc6a9643dceda52a3a4)

## Kesimpulan

Dengan bantuan alat ini, kita dapat melakukan scraping secara otomatis tanpa perlu menyalin URL satu per satu. Namun, ada masalah yang belum terpecahkan dengan captcha saat menggunakannya terlalu sering.


Belajar cara melakukan Scraping Google dan mengoptimalkan pencarian menggunakan operator pencarian google

Scraping Pencarian Google Dengan Python dan Beautifulsoup4


## Introduction

React is the most widely used library. React is popular because it is simple to use, making it suitable for small businesses and startups. React Hooks is one of the advantages offered.

React has been easier since the release of hooks, but it may also be a pain due to their similar uses, for example, useState and useRef.

In this article, I will discuss when to use useState and useRef.

<Image
  alt='useState vs useRef Meme'
  src='/jagad.dev/posts/when-should-you-use-usestate-vs-useref/usestate_vs_useref_meme_ajj5md.jpg'
  width='500'
  height='714'
/>

## Understanding the useState hooks

UseState is hook that allows you to create a state variable in a functional component. State generally refers to the data that is stored in a component.

Below are code examples to illustrate useState.

```jsx
import React from 'react';

const App = () => {
  const [value, setValue] = React.useState();

  const handleInputChange = (e) => {
    setValue(e.target.value);
  };

  console.log('check render');

  return (
    <>
      <div className='App'>
        <input value={value} onChange={handleInputChange} />
      </div>
    </>
  );
};

export default App;
```

In the above example, useState() declares a state variable while its value is stored in the `value` variable. `setValue` is the function used to update this value. Every time the value of the input changes, it causes a re-rendering of the component.

<Image
  alt='useState Hooks example'
  src='/jagad.dev/posts/when-should-you-use-usestate-vs-useref/useState_hooks_zalslv.gif'
  width='800'
  height='425'
/>

## Understanding the useRef hooks

useRef are hooks that allow us to store or retain the value of a variable between renders. useRef can also be used to store mutable values that don't cause re-rendering.

Below are code examples to illustrate useRef.

```jsx
import React from 'react';

const App = () => {
  const inputEl = React.useRef();
  const [value, setValue] = React.useState();

  const handleClick = () => {
    setValue(inputEl.current.value);
  };

  console.log('check render');

  return (
    <>
      <div className='App'>
        Value: {value}
        <input ref={inputEl} />
        <button onClick={handleClick}>Render</button>
      </div>
    </>
  );
};

export default App;
```

In the example above we use useRef to store the value of the input element. with the help of useRef, we do not cause render cycles on every change of the input element. We only cause a re-render when the button is clicked. You can see the image below.

<Image
  alt='useRef Hooks example'
  src='/jagad.dev/posts/when-should-you-use-usestate-vs-useref/useRef_hooks_hrs7hj.gif'
  width='800'
  height='425'
/>

<Ads />

## When to use useRef and useState

The biggest difference between useState and useRef is that useState causes re-rendering. whereas useRef does not cause re-rendering.

For example, if we only want to get the value on submission of the form, we'll need to use useRef because we don't want unnecessary re-rendering.

```jsx
import React from 'react';

const App = () => {
  const inputEl = React.useRef();

  const handleClick = () => {
    console.log(inputEl.current.value);
  };

  return (
    <>
      <div className='App'>
        <input ref={inputEl} />
        <button onClick={handleClick}>Submit</button>
      </div>
    </>
  );
};

export default App;
```

<Image
  alt='when to useRef and useState (1)'
  src='/jagad.dev/posts/when-should-you-use-usestate-vs-useref/When_to_useRef_and_useState_1_l4qbst.gif'
  width='800'
  height='425'
/>

But if you want to validate the input, you'll need to use useState. In this case we create validation when the input must be 6 characters long.

```jsx
import React from 'react';

const App = () => {
  const [value, setValue] = React.useState();

  const isValidate = value.length > 5;
  console.log(isValidate);

  const handleInputChange = (e) => {
    setValue(e.target.value);
  };

  return (
    <>
      <div className='App'>
        {isValidate ? 'Succes' : 'need more than 5 letters'}
        <input value={value} onChange={handleInputChange} />
      </div>
    </>
  );
};

export default App;
```

<Image
  alt='when to useRef and useState (2)'
  src='/jagad.dev/posts/when-should-you-use-usestate-vs-useref/When_to_useRef_and_useState_2_sz6bhm.gif'
  width='800'
  height='425'
/>

Personally, I believe that if the state appears in the UI, it should be used with useState; otherwise, it should be used with useRef. That way, we can save unnecessary rendering. Of course, there are exceptions if, for example, we want to combine with other hooks.

Another example, if we create a toggle dark mode, we'll need to use useState because the state affects the UI and we'll need to re-render.

```jsx
import React from 'react';
import './App.css';

const App = () => {
  const [darkMode, setDarkMode] = React.useState(false);

  const handleClick = () => {
    setDarkMode(!darkMode);
  };

  console.log('check render');

  return (
    <>
      <div className={darkMode ? 'darkMode' : ''}>
        <button onClick={handleClick}>Switch Mode</button>
      </div>
    </>
  );
};

export default App;
```

In the above example, we use useState to toggle the dark mode. When the button is clicked, `setDarkMode` is changed to the opposite value of the current state.

<Image
  alt='Toggle Dark Mode'
  src='/jagad.dev/posts/when-should-you-use-usestate-vs-useref/Toggle_Dark_Mode_dehl4y.gif'
  width='800'
  height='425'
/>

Then how can the background change? That's because in the class section there is a ternary operator where when darkMode is `true`, className is "darkMode" and when darkMode is `false`, we leave className blank.

## Conclusion

Both hooks serve different purposes, even though they look the same. They can be used and combined depending on the situation.

## References

- [Why hooks are the best thing to happen to React - Stack Overflow Blog](https://stackoverflow.blog/2021/10/20/why-hooks-are-the-best-thing-to-happen-to-react/)
- [React Hooks (w3schools.com)](https://www.w3schools.com/react/react_hooks.asp)
- [useRef or useState, which is better? - DEV Community 👩‍💻👨‍💻](https://dev.to/salehmubashar/useref-or-usestate-which-is-better-258j)


Understanding the similarities and differences between useState and useRef

When should you use useState vs. useRef?


## Pengantar

SMS OTP (one time password) adalah fitur yang memungkinkan login ke akun melalui SMS tanpa harus menggunakan nama pengguna dan kata sandi apa pun. Ini menghemat waktu karena tidak perlu mengetik ulang kredensial lagi setiap kali masuk. OTP biasanya digunakan untuk memverifikasi pengguna yang ada dengan cara pengguna harus mengirim kembali kode verifikasi yang didapatkan ke server sebelum diizinkan masuk ke sistem.

Karena menjanjikan perlindungan akun yang lebih kuat, OTP banyak digunakan di berbagai sistem seperti e-commerce, m-banking, dll. Artinya, ketika kita akan mendaftar atau login ke suatu sistem, kita harus memasukkan kode OTP yang dikirimkan ke nomor kita.

<Image alt='meme about SMS OTP' src='/jagad.dev/posts/sms-otp/meme_xzrzlr.jpg' width='500' height='646'/>

Dari penjelasan di atas, pasti kalian berpikir bahwa sangat sulit untuk mengimplementasikan OTP pada sistem karena kita harus berhubungan dengan provider dan juga harus memahami cara kerja autentikasi. Padahal, kita dapat mengakalinya dengan bantuan Supabase yang  menyediakan kemampuan untuk meng-generate otp yang nantinya diintegrasikan dengan Twilio.

## Konsep SMS OTP

Mengetahui cara kerja SMS OTP sangatlah penting untuk memahami apa yang akan kita pelajari kali ini.

<Image alt='Twilio Console' src='/jagad.dev/posts/sms-otp/SMS_OTP_concept_cmo43h.png' width='1046' height='569'/>

Dapat dilihat bahwa supabase digunakan untuk men-generate OTP, kemudian twilio ditugaskan untuk mengirimkan kode OTP ke nomor tujuan. Setelah pengguna mendapatkan kode OTP, pengguna dapat mengirimkan kode OTP untuk verifikasi.

## Setup Twilio

Pertama-tama, kita perlu mendaftar untuk mendapatkan akun trial gratis menggunakan tautan ini. [Twilio | Try Twilio Free](https://www.twilio.com/try-twilio)

Kita akan diarahkan ke halaman konsol untuk membuat project baru setelah masuk.

<Image alt='Twilio Console' src='/jagad.dev/posts/sms-otp/Twillio_Console_zimvgl.png' width='1248' height='470'/>
	
Kalian dapat mengetik apa pun yang kalian suka untuk nama project.
	
<Image alt='Setup project name' src='/jagad.dev/posts/sms-otp/setup_project_name_mfuuqf.png' width='632' height='350'/>

Untuk memastikan bahwa kita benar-benar manusia, Twilio meminta konfirmasi nomor telepon.
	
<Image alt='Verify phone number' src='/jagad.dev/posts/sms-otp/verify_phone_number_uomiop.png' width='1092' height='440'/>

Twilio akan menanyakan beberapa pertanyaan mengenai jenis project yang akan dibuat. kalian dapat mengisi form seperti pada contoh di bawah ini.

<Image alt='Twilio questions' src='/jagad.dev/posts/sms-otp/Twillio_questions_wn4gao.png' width='602' height='773'/>
	
Langkah selanjutnya adalah membuat virtual number yang akan digunakan untuk mengirim OTP ke pengguna nantinya.

<Image alt='Create virtual number' src='/jagad.dev/posts/sms-otp/create_virtual_number_tu8suf.png' width='1460' height='658'/>
	
Pada bagian `Account Info`, terdapat kolom untuk SID, token, dan nomor telepon. Ini yang akan kita gunakan nanti.

<Image alt='SID, token, and phone number' src='/jagad.dev/posts/sms-otp/SID_token_and_phone_ngehyo.png' width='967' height='413'/>
	
## Menguji SMS Twilio dengan curl

Kita dapat menggunakan curl untuk mencoba mengirim SMS dari nomor virtual dengan mengganti `SID`, `body`, `from`, `to`, dan `token` dengan milik kalian.

```bash
curl -X POST https://api.twilio.com/2010-04-01/Accounts/[YOUR_SID]/Messages.json \
--data-urlencode "Body=Hello from jagad.dev" \
--data-urlencode "From=[YOUR VIRTUAL NUMBER]" \
--data-urlencode "To=[YOUR NUMBER]" \
-u [YOUR_SID]:[YOUR_TWILIO_AUTH_TOKEN]
```

Dapat dilihat bahwa SMS masuk ke nomor tujuan setelah curl dijalankan.

<Image alt='sms result' src='/jagad.dev/posts/sms-otp/sms_return_xsn8w1.jpg' width='750' height='478'/>

## Setup Supabase

Di bagian ini, kita akan mendaftar Supabase, yang kemudian akan diintegrasikan dengan Twilio.  Kalian dapat mendaftar [di sini](https://supabase.com/)

Setelah itu, masuk ke bagian autentikasi dimana kita akan menemukan pengaturan yang berhubungan dengan auth provider (phone provider).

<Image alt='phone provider' src='/jagad.dev/posts/sms-otp/phone_provider_g06mxc.png' width='1124' height='781'/>
	
Pada bagian phone provider kita akan diminta untuk memasukkan SMS provider yang akan kita isi dengan Twilio beserta sid, token, dan nomor telepon dari Twilio yang telah kita buat tadi.
	
<Image alt='detail phone provider' src='/jagad.dev/posts/sms-otp/detail_phone_provider_ac0ff4.png' width='1026' height='771'/>

Kita juga membutuhkan API key yang akan digunakan untuk mengakses database melalui URL.
	
<Image alt='Supabase API key' src='/jagad.dev/posts/sms-otp/supabase_api_key_gp0zj3.png' width='977' height='674'/>

## Login menggunakan OTP dengan Supabse

Kita harus menginstall library yang disediakan Supabase untuk membuat login menggunakan OTP.
	
```bash
# npm
npm install @supabase/supabase-js
	
# or

# yarn
yarn add @supabase/supabase-js
```

Setelah itu, konfigurasi supabase dengan mengubah url dan key dengan yang kalian miliki.
	
```js
const { createClient } = require("@supabase/supabase-js");

// create client
const supabase = createClient(
  "YOUR_SUPABASE_URL",
  "YOUR_SUPABASE_KEYS"
);
```

Membuat fungsi javascript untuk menghasilkan kode OTP yang nantinya akan dikirim oleh Twilio ke nomor pengguna.
	
```js {9-20}
const { createClient } = require("@supabase/supabase-js");

// create client
const supabase = createClient(
  "YOUR_SUPABASE_URL",
  "YOUR_SUPABASE_KEYS"
);

// login via otp
const loginOTP = async (phone) => {
  let { user, error } = await supabase.auth.signIn({
    phone,
  });

  return error;
};

// The  user number to which the OTP code will be sent
loginOTP("+628674563332")
```

Setelah dijalankan, kode OTP akan dikirimkan ke nomor pengguna.

<Image alt='OTP Code via SMS' src='/jagad.dev/posts/sms-otp/otp_code_sms_bqu1kp.jpg' width='750' height='476'/>

## Verify SMS OTP

Untuk mengecek valid tidaknya OTP yang dimasukkan oleh pengguna, maka sibutuhkan verifikasi oleh sistem.

```js {6-17}
const { createClient } = require("@supabase/supabase-js");

// create client
const supabase = createClient("YOUR_SUPABASE_URL", "YOUR_SUPABASE_KEYS");

// Verify SMS OTP
const verifyOTP = async (phone, code) => {
  let { session, error } = await supabase.auth.verifyOTP({
    phone,
    token: code,
  });

  return { session, error };
};

// the user number + OTP code
verifyOTP("+628674563332", 938493);
```

Ketika pengguna memasukkan OTP yang salah, maka akan memberikan pesan bahwa OTP tidak valid.

```json
{
  session: null,
  error: { message: 'Token has expired or is invalid', status: 401 }
}
```

Ketika pengguna memasukkan OTP dengan benar, maka akan memberikan return berupa session.

```json
{
  session: {
    access_token: 'USER_TOKEN',
    token_type: 'bearer',
    expires_in: 3600,
    refresh_token: 'USER_REFRESH_TOKEN',
    user: {
      id: '',
      aud: 'authenticated',
      role: 'authenticated',
      email: '',
      phone: '08488393343',
      phone_confirmed_at: '2022-08-13T07:47:12.008645028Z',
      confirmation_sent_at: '2022-08-13T07:46:39.584682Z',
      confirmed_at: '2022-07-07T05:42:18.509965Z',
      last_sign_in_at: '2022-08-13T07:47:12.009974864Z',
      app_metadata: [Object],
      user_metadata: {},
      identities: [Array],
      created_at: '2022-07-07T05:22:11.119149Z',
      updated_at: '2022-08-13T07:47:12.011685Z'
    },
    expires_at: 1660380427
  },
  error: null
}
```

## Implementasi dengan Next.js

Kloning repositori yang sudah saya buat.

<GithubCard repo='jagadyudha/otp-auth-supabase-nextjs'/>

ganti nama `.env.example` menjadi `.env.local` dan masukkan url supabase dan API key di file tersebut.

```
NEXT_PUBLIC_SUPABASE_URL=PUT_HERE
NEXT_PUBLIC_SUPABASE_ANON_KEY=PUT_HERE
```

Install library yang ada di `package.json` dengan command berikut:

```bash
# npm
npm install

# or

# yarn
yarn install
```

Jalankan Project dengan perintah berikut:

```bash
# npm
npm run dev

# or

# yarn
yarn dev
```

Berikut adalah video implementasi SMS OTP menggunakan Next.js

<Embed src='https://www.youtube.com/embed/IrWpWzYpqtQ'/>

## Konklusi

Membuat SMS OTP memang cukup sederhana, namun kesederhanaan tersebut dikarenakan ketergantungan kita pada third-party seperti Supabase dan Twilio.

Untuk saat ini pendekatan terbaik menurut saya adalah mengandalkan third-party terlebih dahulu jika aplikasi yang kita bangun masih kecil.

## Referensi

[Phone Auth with Twilio | Supabase](#https://supabase.com/docs/guides/auth/auth-twilio)

Menerapkan SMS OTP secara sederhana dengan  Twilio dan Supabase

Cara Membuat SMS OTP Dengan Supabase dan Twilio


## Pengantar

Berbagi situs web di media sosial adalah salah satu hal terpenting yang dapat kita lakukan untuk memastikan bahwa audiens melihatnya. Namun, jika kita hanya menampilkan tautan, akan sulit untuk menarik perhatian audiens.

Dengan Open Graph, kita dapat mengontrol bagaimana situs web kita dibagikan di media sosial dengan menampilkan gambar, judul, deskripsi, dan tautan dengan cara yang membuat audiens tertarik untuk melihatnya.

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

Terlihat bahwa dengan Open Graph, website menjadi lebih menarik saat dibagikan di media sosial. Namun, jika kita melihat tag meta situs web, kita dapat melihat bahwa Open Graph adalah statis.

```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"
/>
```

Daripada membuat gambar Open Graph satu per satu, bagaimana kita bisa membuatnya menjadi dinamis? Dalam tutorial ini, kita akan menggunakan cloudinary untuk membangun Open Graph yang dinamis.

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

## Memulai Cloudinary

Pertama-tama, jika kalian tidak familiar dengan cloudinary, pada dasarnya cloudinary adalah layanan hosting gambar cloud yang memungkinkan kalian mengubah gambar dan video agar dimuat lebih cepat tanpa penurunan visual.

Jika kalian belum memiliki akun Cloudinary, kalian dapat mendaftar sekarang. Informasi lebih lanjut tentang cara mendaftar di cloudinary dapat ditemukan di [Panduan Memulai Pengembang Media yang Dapat Diprogram | mendung](https://cloudinary.com/documentation/how_to_integrate_cloudinary)

## Cloudinary Transformation

Dengan cloudinary, kita dapat melakukan transformasi URL alih-alih menggunakan editing tools. Kita dapat melakukan ini dengan mengakses URL seperti ini:

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

Ada banyak hal yang dapat kita lakukan dengan cloudinary, kalian dapat memeriksa [dokumentasinya](https://cloudinary.com/documentation/image_transformation_reference) untuk informasi lebih lanjut. Berikut adalah beberapa transformasi yang dapat kita gunakan:

### Pemangkasan gambar berbasis deteksi wajah

Dengan menggunakan transformasi `c_crop`, `g_face`, kita dapat memotong gambar berdasarkan wajah.

<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'
/>

### Pemosisian teks overlay

Dengan menggunakan transformasi `l_text`, kita dapat meletakkan teks pada gambar. Misalnya jika kita ingin overlay teks `Haiiiiii` pada gambar, kita dapat menggunakan transformasi berikut:

<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 juga menyediakan "buku masak" untuk membuat transformasi yang dapat memudahkan kita untuk kustomisasi gambar.

## Desain Open Graph

Sebelum kita mulai mengimplementasikan open graph dengan transformasi cloudinary, kita perlu mendesain open graph di figma. Berikut adalah hasil desain yang akan kita gunakan.

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

Setelah itu, kita dapat memisahkan desain menjadi beberapa bagian.

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

Saya paham bahwa hr adalah singkatan dari horizontal rule, tetapi saya menggunakannya untuk garis diagonal. Sejujurnya, saya selalu menggunakan nama hr tidak hanya untuk horizontal tetapi juga untuk vertikal.

## Open Graph Dinamis dengan Cloudinary

Kita perlu menyusun folder di Cloudinary tergantung pada slug dari postingan untuk membuat Open Graph menjadi dinamis. Berikut adalah struktur folder pada cloudinary yang telah saya buat.

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

Saya menempatkan desain yang kita pisahkan sebelumnya menjadi dua bagian:

1. `social.png` dan `hr.png` di folder `/jagad.dev` (statis)
2. `header.png` di setiap folder post slug `/jagad.dev/post/[slug]` (dinamis)

Berikut adalah implementasi untuk menampilkan `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>

Sebagai informasi, di cloudinary, kita tidak perlu menulis format gambar seperti `.png` atau `.jpg` di url. Sebagai gantinya, format gambar akan disajikan sebagai `.webp`.

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

Setelah itu kita gabungkan dengan `header.png` yang ada di folder `/jagad.dev/posts/[slug]`. Misalnya, jika saya menggunakan slug `steam-now-playing`, berarti gambar header ada di folder `/jagad.dev/posts/steam-now-playing`.

<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'
/>

Karena tidak ingin hanya menampilkan header persegi di Open Graph, saya menggunakan `hr.png` untuk membuat garis diagonal di sebelah kiri gambar.

<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'
/>

untuk membuat judul postingan yang dinamis, kita bisa menggunakan transformasi text overlay seperti berikut:

<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'
/>

## Implementasi

Implementasi dapat dilakukan dengan sangat mudah dengan mengubah post slug dan post title. Berikut ini adalah contoh implementasi menggunakan bahasa pemrograman JavaScript.

```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`
```

Berikut adalah hasil dari open graph dinamis yang telah diimplementasikan pada website ini.

<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'
/>

## Kesimpulan

Keuntungan membuat open graph dinamis dengan cloudinary adalah kecepatan pemuatan yang cepat dibandingkan dengan menggunakan puppeteer atau next-api-og-image.


Membuat gambar open graph dinamis dengan bantuan transformasi URL Cloudinary

Membuat Gambar Open Graph Dinamis dengan Cloudinary


## 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


## Pengantar

Salah satu aspek terpenting dari sebuah situs web adalah gambarnya. Gambar sekarang dapat menjadi lebih interaktif dengan penggunaan transisi CSS. Jadi, dalam tutorial ini, kita akan belajar bagaimana membuat gambar lebih interaktif menggunakan Tailwind CSS.

Tailwind CSS adalah framework CSS utility-first CSS yang dikemas dengan class. Tailwind CSS tidak dilengkapi dengan komponen, tidak seperti framework CSS lainnya seperti Bootstrap atau Chakra UI. Tailwind CSS, di sisi lain, bekerja dengan memberi kita satu set class. Dengan class ini, kita dapat dengan cepat membuat desain kita sendiri.

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

## Memulai

Mulailah dengan membuat proyek Next.js baru. Menggunakan Create Next App adalah metode yang paling umum.

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

Setelah proyek dibuat, kita akan pindah ke instalasi tailwind.

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

Tambahkan path ke file `tailwind.config.js`.

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

Tambahkan @tailwind ke file `./styles/globals.css`.

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

Setelah semua selesai, kita dapat mulai menjalankan proyek dengan:

```bash
$ yarn dev

# or

$ npm run dev

```

## Cara Kerja Transisi CSS Tailwind

Sebagai contoh, kita dapat membuat tombol dengan transisi hover yang mengubah warna latar belakangnya.

```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='Cara Kerja Transisi CSS Tailwind'
  src='/v1652327445/jagad.dev/posts/custom-image-transition-in-nextjs-with-tailwind-css/How_Tailwind_CSS_Transitions_Work_bzg7zq.gif'
  width='829'
  height='335'
/>

terlihat bahwa dengan class `transition` kita dapat mengubah warna background dari `bg-teal-600` menjadi `bg-indigo-500` dengan durasi 300ms `duration-300`.

Hal-hal terkait transisi, yang mencakup properti transisi, durasi transisi, fungsi waktu transisi, penundaan transisi, dan animasi, dapat ditemukan di dokumentasi Tailwind CSS. Berikut semua penjelasan untuk itu:

- [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)

## Memahami next/image onLoadingComplete callback

onLoadingComplete adalah fungsi callback yang dipanggil setelah gambar dimuat sepenuhnya dan placeholder telah dihapus. Ini berarti, kita dapat menambahkan transisi sebelum gambar dimuat sepenuhnya.

Untuk melihat cara kerja callback `onLoadingComplete`, kita harus membuat state yang berisi 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;
```

Selanjutnya, kita membuat fungsi onLoadCallback yang akan mengubah status `isReady` menjadi `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;
```

Setelah itu, kita bisa memanggil fungsi `onLoadCallback` pada props `onLoadingComplete`, yang akan memicu parameter event yang berisi img yang dimuat.

```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 />

## Membuat Komponen Gambar Kustom

Sekarang setelah kita mengetahui cara menggunakan callback `onLoadingComplete`, kita dapat membuat komponen gambar kustom dengan membuat folder komponen dan meletakkan file `image.js` di dalamnya.

```bash {2}
├── README.md
├── components # Ini adalah folder tempat kita akan membuat komponen gambar kustom
│   └── 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
```

Kemudian, pada file `image.js`, tambahkan kode berikut:

```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;
```

Sebenarnya kode di atas adalah kode yang sama (full version) dengan kode yang telah kita pelajari di bagian [Memahami next/image onLoadingComplete callback](#memahami-next/image-onloadingcomplete-callback).

## Menerapkan Efek Blur ke Gambar

Kita akan menggunakan efek blur untuk menerapkan efek pada gambar kustom yang telah kita buat sebelumnya. Kita dapat melakukannya dengan menambahkan class blur dengan `blur-2xl` ke gambar ketika `isReady` adalah `false` dan menghapusnya ketika `isReady` adalah `true` dengan `blur-0`.

Untuk membuat transisi lebih interaktif, kita dapat menambahkan kelas scale dengan `scale-120` ke gambar ketika `isReady` adalah `false` dan `scale-100` ketika `isReady` adalah `true`.

Kita juga akan menambahkan kelas `transisi` dan `durasi-1000` ke gambar untuk menerapkan efek transisi.

```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'
/>
```

Setelah itu, kita dapat mengimpor komponen gambar yang telah kita buat sebelumnya dan menggunakannya di semua gambar.

```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='menggunakan komponen diseluruh halaman'
  src='/v1652331620/jagad.dev/posts/custom-image-transition-in-nextjs-with-tailwind-css/use_components_in_all_images_lrnl5h.gif'
  width='600'
  height='319'
/>

# Membuat Daftar Karakter Rick and Morty Dengan Komponen Gambar Kustom

Untuk menerapkan ke proyek, kita hanya perlu mengimpor komponen yang telah dibuat sebelumnya.

Sebagai contoh, kita akan mengimplementasikan dengan menggunakan 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;
```

Berikut adalah hasil implementasi Daftar Karakter Rick and Morty dengan Gambar Kustom.

<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'
/>

# Kesimpulan

Tailwind CSS dapat digunakan untuk memberikan efek transisi ke gambar kustom dan membuatnya lebih interaktif.

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

Membuat gambar lebih interaktif dengan menggunakan transisi CSS.

Transisi Gambar Kustom di Next.js Dengan Tailwind CSS


## Introduction

SMS OTP (one-time password) is a feature that allows login to an account via SMS without having to use any username and password. This saves time as there is no need to retype the credentials again every time you log in. An OTP is usually used to verify existing users, by which means the user must send back the obtained verification code to the server before being allowed to enter the system.

Due to stronger account protection, OTP is widely used in various systems such as e-commerce, m-banking, etc. That is, when we register or login to a system, we must enter the OTP code sent to our number.

<Image alt='meme about SMS OTP' src='/jagad.dev/posts/sms-otp/meme_xzrzlr.jpg' width='500' height='646'/>

From the explanation above, you must think that it is very difficult to apply OTP to the system because we have to deal with providers and also have to understand how authentication works. even though we can outsmart it with the help of Supabase, which provides the ability to generate OTP, which will later be integrated with Twilio.

## SMS OTP Concept

Knowing how SMS OTP works is necessary to comprehend what we will learn this time.

<Image alt='Twilio Console' src='/jagad.dev/posts/sms-otp/SMS_OTP_concept_cmo43h.png' width='1046' height='569'/>

It can be seen that supabase is used to generate OTP, then twilio is assigned to send the OTP code to the destination number. After the user gets the OTP code, the user can send the OTP code for verification.

## Setup Twilio

First of all, you need to sign up for a free trial account using this link. [Twilio | Try Twilio Free | www.twilio.com](https://www.twilio.com/try-twilio)

We will be redirected to the console page to create a project after logging in.

<Image alt='Twilio Console' src='/jagad.dev/posts/sms-otp/Twillio_Console_zimvgl.png' width='1248' height='470'/>
	
You can type whatever you like for the project's name.
	
<Image alt='Setup project name' src='/jagad.dev/posts/sms-otp/setup_project_name_mfuuqf.png' width='632' height='350'/>

To make sure we were really human, Twilio asked for a phone number confirmation.
	
<Image alt='Verify phone number' src='/jagad.dev/posts/sms-otp/verify_phone_number_uomiop.png' width='1092' height='440'/>

Twilio will ask several questions regarding the type of project to be created. We can fill out the form as in the example below.

<Image alt='Twilio questions' src='/jagad.dev/posts/sms-otp/Twillio_questions_wn4gao.png' width='602' height='773'/>
	
The next step is to create a virtual number that will be used to send OTP to users later on.

<Image alt='Create virtual number' src='/jagad.dev/posts/sms-otp/create_virtual_number_tu8suf.png' width='1460' height='658'/>
	
In the `Account Info` section, there are fields for SID, token, and phone number. This is what we will use later.

<Image alt='SID, token, and phone number' src='/jagad.dev/posts/sms-otp/SID_token_and_phone_ngehyo.png' width='967' height='413'/>
	
## Testing Twilio SMS with curl

We can use curl to try to send SMS from the virtual number by replacing the `SID`, `body`, `from`, `to`, and `token` with your own.

```bash
curl -X POST https://api.twilio.com/2010-04-01/Accounts/[YOUR_SID]/Messages.json \
--data-urlencode "Body=Hello from jagad.dev" \
--data-urlencode "From=[YOUR VIRTUAL NUMBER]" \
--data-urlencode "To=[YOUR NUMBER]" \
-u [YOUR_SID]:[YOUR_TWILIO_AUTH_TOKEN]
```

It can be seen that the SMS went to the destination number after the curl is executed.

<Image alt='sms result' src='/jagad.dev/posts/sms-otp/sms_return_xsn8w1.jpg' width='750' height='478'/>

## Setup Supabase

In this section, you need to register for Supabase, which will then be integrated with Twilio. You can register [here](https://supabase.com/)

After that, go to the authentication section where we will find settings related to auth providers (phone provider).

<Image alt='phone provider' src='/jagad.dev/posts/sms-otp/phone_provider_g06mxc.png' width='1124' height='781'/>
	
In the phone provider section, we will be asked to enter the SMS provider, which we will fill in with Twilio along with the sid, token, and phone number of the Twilio that we created earlier.
	
<Image alt='detail phone provider' src='/jagad.dev/posts/sms-otp/detail_phone_provider_ac0ff4.png' width='1026' height='771'/>

We also need API keys, which will be used to access the database via URL.
	
<Image alt='Supabase API key' src='/jagad.dev/posts/sms-otp/supabase_api_key_gp0zj3.png' width='977' height='674'/>

## Login via OTP with Supabse

We must install Supabase in order to log in using OTP.
	
```bash
# npm
npm install @supabase/supabase-js
	
# or

# yarn
yarn add @supabase/supabase-js
```

After that, we configure the supabase by changing the url and key to the url and key from the Supabase that you have.
	
```js
const { createClient } = require("@supabase/supabase-js");

// create client
const supabase = createClient(
  "YOUR_SUPABASE_URL",
  "YOUR_SUPABASE_KEYS"
);
```

Create a function to generate an OTP code which will later be sent by Twilio to the user's number.
	
```js {9-20}
const { createClient } = require("@supabase/supabase-js");

// create client
const supabase = createClient(
  "YOUR_SUPABASE_URL",
  "YOUR_SUPABASE_KEYS"
);

// login via otp
const loginOTP = async (phone) => {
  let { user, error } = await supabase.auth.signIn({
    phone,
  });

  return error;
};

// The  user number to which the OTP code will be sent
loginOTP("+628674563332")
```

After running, the OTP code will be sent to the user number.

<Image alt='OTP Code via SMS' src='/jagad.dev/posts/sms-otp/otp_code_sms_bqu1kp.jpg' width='750' height='476'/>

## Verify SMS OTP

To check whether the OTP entered by the user is valid, it must be verified by the system.

```js {6-17}
const { createClient } = require("@supabase/supabase-js");

// create client
const supabase = createClient("YOUR_SUPABASE_URL", "YOUR_SUPABASE_KEYS");

// Verify SMS OTP
const verifyOTP = async (phone, code) => {
  let { session, error } = await supabase.auth.verifyOTP({
    phone,
    token: code,
  });

  return { session, error };
};

// the user number + OTP code
verifyOTP("+628674563332", 938493);
```

When the user enters the wrong OTP, it will give a message that the OTP is invalid.

```json
{
  session: null,
  error: { message: 'Token has expired or is invalid', status: 401 }
}
```

When the user enters the OTP correctly, it will return a session.

```json
{
  session: {
    access_token: 'USER_TOKEN',
    token_type: 'bearer',
    expires_in: 3600,
    refresh_token: 'USER_REFRESH_TOKEN',
    user: {
      id: '',
      aud: 'authenticated',
      role: 'authenticated',
      email: '',
      phone: '08488393343',
      phone_confirmed_at: '2022-08-13T07:47:12.008645028Z',
      confirmation_sent_at: '2022-08-13T07:46:39.584682Z',
      confirmed_at: '2022-07-07T05:42:18.509965Z',
      last_sign_in_at: '2022-08-13T07:47:12.009974864Z',
      app_metadata: [Object],
      user_metadata: {},
      identities: [Array],
      created_at: '2022-07-07T05:22:11.119149Z',
      updated_at: '2022-08-13T07:47:12.011685Z'
    },
    expires_at: 1660380427
  },
  error: null
}
```

## Implementation with Next.js

Clone the repository I've created.

<GithubCard repo='jagadyudha/otp-auth-supabase-nextjs'/>

rename `.env.example` to `.env.local` and put the supabase url and key in that file.

```
NEXT_PUBLIC_SUPABASE_URL=PUT_HERE
NEXT_PUBLIC_SUPABASE_ANON_KEY=PUT_HERE
```

Install the library in `package.json` with the following command:

```bash
# npm
npm install

# or

# yarn
yarn install
```

Run the project with the following command:

```bash
# npm
npm run dev

# or

# yarn
yarn dev
```

Here is a video implementation of SMS OTP using Next. Js

<Embed src='https://www.youtube.com/embed/IrWpWzYpqtQ'/>

## Conclusion

Creating an OTP SMS is quite simple, but the simplicity is due to dependence on third parties such as Supabase and Twilio.

The best approach, in my opinion, is to first rely on a third party if the application we are building is really still small.

## References

[Phone Auth with Twilio | Supabase](#https://supabase.com/docs/guides/auth/auth-twilio)

Implementing SMS OTP in a simple way with third-party tools like Twilio and Supabase

How to Make SMS OTP With Supabase and Twilio


## 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

How to Display Steam Now Playing With Next.js


## Introduction

Data mining is currently popular among informatics students. In fact, there are courses that specifically address data mining concerns. Naive Bayes is the most widely used method in data mining courses.

Naive Bayes is a classification based on probability and statistical methods created by British scientist Thomas Bayes that forecasts future opportunities based on past experience.

in this article we will learn together how naive bayes works.

## Import Library

```python
import pandas as pd
import numpy as np
```

The code above is used to activate the pandas and numpy libraries, which will be used in the analysis phase. The Pandas library itself is used for processing data related to data frames, while the Numpy library is used for easy and fast array manipulation.

## Reading Data Using Python

```python
data_training=pd.read_excel('data_training.xlsx')
data_training.head(30)
```

The code above is used to read the training data by using the pandas library. The training data read is in the form of an xlsx file.

<Image
  alt='Data'
  src='/jagad.dev/posts/determine-market-segmentation-using-the-naive-bayes-method/data_xqet2l.png'
  width='938'
  height='377'
/>

## Converting Data To Integer

Because naive bayes in Python cannot read training data in the form of strings, the training data is converted to integer form so that the data displayed is in the form of numbers.

Here is the code to convert the training data to integer.

```python
from sklearn.preprocessing import LabelEncoder
enc = LabelEncoder()
data_training['Gender'] = enc.fit_transform(data_training['Gender'].values)
data_training['Ever_Married'] = enc.fit_transform(data_training['Ever_Married'].values)
data_training['Age'] = enc.fit_transform(data_training['Age'].values)
data_training['Graduated'] = enc.fit_transform(data_training['Graduated'].values)
data_training['Profession'] = enc.fit_transform(data_training['Profession'].values)
data_training['Spending_Score'] = enc.fit_transform(data_training['Spending_Score'].values)
data_training.head(30)
```

After that, the data will turn into an integer.

<Image
  alt='Data Integer'
  src='/jagad.dev/posts/determine-market-segmentation-using-the-naive-bayes-method/Data_Integrer_npnh6c.png'
  width='889'
  height='449'
/>

## Checking training data

.info() is used to find out data type information.

```python
data_training.info()
```

<Image
  alt='Data Integer'
  src='/jagad.dev/posts/determine-market-segmentation-using-the-naive-bayes-method/Checking_training_data_mxekbj.png'
  width='358'
  height='325'
/>

It can be seen that the data used is 30, consisting of 9 columns, and each variable is of type integer and object, and there is no data that is null or empty (non-null).

## Determining Independent And Dependent Variables

```python
x = data_training.drop('Segmentation', axis=1)
x.head(30)
```

The code above is used to delete the dependent variable and call the independent variable. Then when run, it will look like the image below:

<Image
  alt='Data without Segmentation'
  src='/jagad.dev/posts/determine-market-segmentation-using-the-naive-bayes-method/data_without_dependent_variable_ubu018.png'
  width='808'
  height='493'
/>

Then to call the dependent variable, we can use the name of the existing data, followed by the column name, namely the "segmentation" column. To bring up the data, we can use the command "head".

<Image
  alt='dependant variable only'
  src='/jagad.dev/posts/determine-market-segmentation-using-the-naive-bayes-method/dependent_variable_only_o4okdx.png'
  width='515'
  height='465'
/>

## Reading Testing Data

To display testing data, you can use the pandas library by using the read_excel function.

```python
data_test=pd.read_excel('data_test.xlsx')
data_test.head(30)
```

<Image
  alt='read data testing'
  src='/jagad.dev/posts/determine-market-segmentation-using-the-naive-bayes-method/read_data_testing_bgd7ga.png'
  width='963'
  height='170'
/>

Then the segmentation column will be dropped or separated, and the segmentation column will be deleted from the data.

```python
x_test = data_test.drop('Segmentation', axis=1)
x_test.head(1)
```

<Image
  alt='Drop dependent variable'
  src='/jagad.dev/posts/determine-market-segmentation-using-the-naive-bayes-method/Drop_dependent_variable_w1cp7t.png'
  width='832'
  height='139'
/>

To display the segmentation column, we can use this command.

```python
y_test = data_test['Segmentation']
y_test.head(1)
```

## Classification

To perform the classification, you can run the following command:

```python
from sklearn.naive_bayes import GaussianNB
modelnb = GaussianNB()
nbtrain = modelnb.fit(x, y)
Y_predict = nbtrain.predict(x_test)
print(Y_predict)
```

<Image
  alt='Results'
  src='/jagad.dev/posts/determine-market-segmentation-using-the-naive-bayes-method/results_ct8maf.png'
  width='525'
  height='166'
/>

## Creators

1. 181080200142 Jagad Yudha Awali
2. 181080200134 Dewi Nur Afidah
3. 181080200133 Ruri Aditya Pratama
4. 181080200128 Tutut Anjarsari
5. 181080200149 Jefry Fernando


My college instructed me that I needed to write an article about naive Bayes while learning.

Determine Market Segmentation Using the Naive Bayes Method


## Pengantar

React adalah library yang paling banyak digunakan. React populer karena mudah digunakan, sehingga cocok untuk startup. React Hooks adalah salah satu keunggulan yang ditawarkan.

React menjadi lebih mudah sejak rilis hook, tetapi mungkin juga merepotkan karena kegunaannya yang serupa, misalnya useState dan useRef.

Pada artikel ini, kita akan membahas kapan harus menggunakan useState dan useRef.

<Image
  alt='useState vs useRef Meme'
  src='/jagad.dev/posts/when-should-you-use-usestate-vs-useref/usestate_vs_useref_meme_ajj5md.jpg'
  width='500'
  height='714'
/>
## Memahami useState hooks

UseState adalah hook yang memungkinkan Anda membuat variabel status dalam komponen fungsional. State umumnya mengacu pada data yang disimpan dalam sebuah komponen.

Di bawah ini adalah contoh kode untuk mengilustrasikan useState.

```jsx
import React from 'react';

const App = () => {
  const [value, setValue] = React.useState();

  const handleInputChange = (e) => {
    setValue(e.target.value);
  };

  console.log('check render');

  return (
    <>
      <div className='App'>
        <input value={value} onChange={handleInputChange} />
      </div>
    </>
  );
};

export default App;
```

Dalam contoh di atas, useState() mendeklarasikan variabel status sementara nilainya disimpan dalam variabel `value`. `setValue` adalah fungsi yang digunakan untuk memperbarui nilai ini. Setiap kali nilai input berubah, itu menyebabkan rendering ulang komponen.

<Image
  alt='useState Hooks example'
  src='/jagad.dev/posts/when-should-you-use-usestate-vs-useref/useState_hooks_zalslv.gif'
  width='800'
  height='425'
/>

## Memahami useRef hooks

useRef adalah hook yang memungkinkan kita untuk menyimpan atau mempertahankan nilai variabel di antara render. useRef juga dapat digunakan untuk menyimpan nilai yang dapat diubah yang tidak menyebabkan rendering ulang.

Di bawah ini adalah contoh kode untuk mengilustrasikan useRef.

```jsx
import React from 'react';

const App = () => {
  const inputEl = React.useRef();
  const [value, setValue] = React.useState();

  const handleClick = () => {
    setValue(inputEl.current.value);
  };

  console.log('check render');

  return (
    <>
      <div className='App'>
        Value: {value}
        <input ref={inputEl} />
        <button onClick={handleClick}>Render</button>
      </div>
    </>
  );
};

export default App;
```

Pada contoh di atas kita menggunakan useRef untuk menyimpan nilai dari elemen input. dengan bantuan useRef, kita tidak menyebabkan siklus render pada setiap perubahan elemen input. kita hanya menyebabkan rendering ulang ketika tombol diklik. Hal tersebut dapat dilihat pada gambar di bawah ini.

<Image
  alt='useRef Hooks example'
  src='/jagad.dev/posts/when-should-you-use-usestate-vs-useref/useRef_hooks_hrs7hj.gif'
  width='800'
  height='425'
/>

<Ads />

## Kapan menggunakan useRef dan useState

Perbedaan terbesar antara useState dan useRef adalah useState menyebabkan rendering ulang. sedangkan useRef tidak menyebabkan rendering ulang.

Misalnya, jika kita hanya ingin mengirimkan form, kita perlu menggunakan useRef karena kita tidak ingin melakukan rendering ulang yang tidak perlu.

```jsx
import React from 'react';

const App = () => {
  const inputEl = React.useRef();

  const handleClick = () => {
    console.log(inputEl.current.value);
  };

  return (
    <>
      <div className='App'>
        <input ref={inputEl} />
        <button onClick={handleClick}>Submit</button>
      </div>
    </>
  );
};

export default App;
```

<Image
  alt='when to useRef and useState (1)'
  src='/jagad.dev/posts/when-should-you-use-usestate-vs-useref/When_to_useRef_and_useState_1_l4qbst.gif'
  width='800'
  height='425'
/>

Tetapi jika kita ingin memvalidasi input, kita harus menggunakan useState. Dalam hal ini kita membuat validasi dimana input tidak boleh kurang dari 6 karakter.

```jsx
import React from 'react';

const App = () => {
  const [value, setValue] = React.useState();

  const isValidate = value.length > 5;
  console.log(isValidate);

  const handleInputChange = (e) => {
    setValue(e.target.value);
  };

  return (
    <>
      <div className='App'>
        {isValidate ? 'Succes' : 'need more than 5 letters'}
        <input value={value} onChange={handleInputChange} />
      </div>
    </>
  );
};

export default App;
```

<Image
  alt='when to useRef and useState (2)'
  src='/jagad.dev/posts/when-should-you-use-usestate-vs-useref/When_to_useRef_and_useState_2_sz6bhm.gif'
  width='800'
  height='425'
/>

Secara pribadi, saya percaya bahwa jika state muncul pada UI, maka harus menggunakan useState; jika tidak, maka harus menggunakan useRef. Dengan begitu, kita bisa menghemat rendering yang tidak perlu. Tentu saja, ada pengecualian jika, misalnya, kita ingin menggabungkan dengan hooks lain.

Contoh lain, jika kita membuat toggle mode gelap, kita harus menggunakan useState karena state tersebut mempengaruhi UI dan kita juga harus melakukan merender ulang.

```jsx
import React from 'react';
import './App.css';

const App = () => {
  const [darkMode, setDarkMode] = React.useState(false);

  const handleClick = () => {
    setDarkMode(!darkMode);
  };

  console.log('check render');

  return (
    <>
      <div className={darkMode ? 'darkMode' : ''}>
        <button onClick={handleClick}>Switch Mode</button>
      </div>
    </>
  );
};

export default App;
```

Pada contoh di atas, kita menggunakan useState untuk mengaktifkan mode gelap. Saat tombol diklik, `setDarkMode` diubah ke nilai kebalikan dari state saat ini.

<Image
  alt='Toggle Dark Mode'
  src='/jagad.dev/posts/when-should-you-use-usestate-vs-useref/Toggle_Dark_Mode_dehl4y.gif'
  width='800'
  height='425'
/>

Lalu bagaimana background bisa berubah? Itu karena di bagian class ada operator ternary di mana ketika darkMode adalah `true`, maka className adalah "darkMode" dan ketika darkMode adalah `false`, maka kita biarkan className kosong.

## Kesimpulan

Kedua hooks memiliki kegunaan dan tujuan yang berbeda, meskipun terlihat sama. Kedua hooks tersebut dapat digunakan dan digabungkan bergantung pada situasi.

## Referensi

- [Why hooks are the best thing to happen to React - Stack Overflow Blog](https://stackoverflow.blog/2021/10/20/why-hooks-are-the-best-thing-to-happen-to-react/)
- [React Hooks (w3schools.com)](https://www.w3schools.com/react/react_hooks.asp)
- [useRef or useState, which is better? - DEV Community 👩‍💻👨‍💻](https://dev.to/salehmubashar/useref-or-usestate-which-is-better-258j)


Memahami persamaan dan perbedaan antara useState dan useRef

Kapan sebaiknya Anda menggunakan useState vs. useRef?


## 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

Posts