### Intent Classification 🎯

Intent classification is the task of figuring out what the user wants to achieve or do from their natural language input. For example, if the user says "Can you make me a coffee?", the intent could be "Make a coffee". This way, we can map the user's input to a specific action or function that we want our GPT model to perform.

To do this, I used Ada Models, [which I wrote about in a previous article.](https://medium.com/javascript-in-plain-english/how-to-embed-search-with-text-embedding-ada-002-in-node-js-5605c8d08815) Ada Models are models that return the embedding of the text, which is a numerical representation of its meaning. The embedding captures the semantic and syntactic features of the text, such as the words, phrases, and context.

By using a simple formula, we can find the most relatable of the embedding among a set of predefined categories, which indicates the most likely intent. The formula is based on the Euclidean distance, which measures how close two vectors are in a multidimensional space. The smaller the distance, the more similar the vectors are.

![1 d23UD OMKKiv2qpsHDL1Rw (1)](//images.ctfassets.net/k07f0awoib97/McW3ceYTm307MBmwtMKle/84a12dd06ec7bb215f1aa23a9ddcdaf9/1_d23UD_OMKKiv2qpsHDL1Rw__1_.png)

For example, if we have three categories: "Make a coffee", "Make a tea", and "Make a sandwich", and we have an embedding for each category, we can compare the embedding of the user's input with each category embedding and find the one with the smallest distance. If the user says "Can you brew me a coffee?", the embedding of their input will be closer to the embedding of "Make a coffee" than to the other two categories, so we can infer that their intent is "Make a coffee".

A sample of how we can find the intent can be found by categorizing the intents into actions. So for example, if you have an action like `Make a coffee`, you can define it as a category with a user-provided prompt and a function to execute:

```
Make a coffee => (User Provided Prompt = "Can you make me a coffee?") => MakeACoffee()
```

However, to increase the accuracy and flexibility of the system, we don't just define one category for each action, but more different ways of expressing the same intent. For example:

```
Make me a coffee => (User Provided Prompt = "Can you make me a coffee?") => MakeACoffee()\
Bring me a coffee => (User Provided Prompt = "Can you bring me a coffee?") => MakeACoffee()\
Buy me a coffee => (User Provided Prompt = "Can you buy me a coffee?") => MakeACoffee()
```

As you can see, all these categories will trigger the same function: MakeACoffee().

### Rule-Based System 📜

The rule-based system is like any other chatbot system, but ours will be very dynamic and powerful and use AI from start to end. The concept is to make a list of categories as keys and objects as values:

```javascript
const intents = {
  categories: {
    "Make a coffee": MakeACoffee,
    "Make me a coffee": MakeACoffee,
    "Bring me a coffee": MakeACoffee,
    "Buy me a coffee": MakeACoffee,
  },
};
```
Each object has an action, which can be either an API call or something else, a URL to call if it's an API call and a response function to handle the result of the call. For example:

```javascript
const MakeACoffee = {
 action: "LOCAL_ACTION",
 response : (response) => 'Your coffee is here!'
};
```

A function would make a fetch request and return the response. You can customize the response as much as you like.

Now whenever you ask for, `Make me a coffee` Your result would be your coffee is here. 

But what if you have follow-up questions or options? How would you handle that?

For example, when you ask the system to makeACoffee, you might want to handle what kind of coffee use case. To do that, we will have a recursive approach.

Each object can also have an ask function to generate a follow-up question and a categories object to define the possible options for the user. For example:

```
const MakeACoffee = {
  action: "API_CALL",
  url: "http://localhost:3000/coffees",
  ask: [
    (coffees) => {
      return `What kind of coffee would you like ${coffees.map(
        (coffee) => coffee
      )}?`;
    },
  ],
  categories: () => ({
    Mocha: MochaCoffee,
    Karak: KarakCoffee,
    Espresso: EspressoCoffee,
  }),
};
```

Now with this approach, we will have a list of coffees in the response with a follow-up question and another object to handle the user's choice.

```
const MochaCoffee = {
  action: "LOCAL_ACTION",
  response: (response) => "Your mocha coffee is here!",
};

```

And that's it! You have successfully integrated your GPT model with your own data sources and actions. You can now enjoy your coffee while chatting with your AI friend. ☕

### Behind the Scenes 🕵️‍♂️

Now let's look at the behind the scene working of this application. I showed you the configuration, but let's look at the internals.

The first step was to get the embedding of each category. Using ADA model, here is how you can get the category embeddings:
```javascript
const initializeCategoriesEmbedding = async (categories) => {
  const category_embeddings = {};
  const listOfPromise = [];
  categories.forEach((category) => {
    listOfPromise.push(
      new Promise((resolve) => {
        const input = { input: category, model: "text-embedding-ada-002" };
        openai.createEmbedding(input).then((response) => {
          const embedding = response.data.data[0].embedding; // extract embedding array
          category_embeddings[category] = embedding; // add category and embedding to the object
          resolve();
        });
      })
    );
  });

  await Promise.all(listOfPromise);
  return category_embeddings;
};
```

Then, let's put the user input into the classification and see in which category it will fall:

```javascript
const classification = (newInput, category_embeddings) => {
  return new Promise(async (resolve, reject) => {
    const input = {
      input: newInput,
      model: "text-embedding-ada-002",
    };
    const response = await openai.createEmbedding(input).catch(() => {
      throw new Error("Error");
    });
    const new_article_embedding = response.data.data[0].embedding; // extract new article embedding array

    // Compare new article embedding with category embeddings
    let min_distance = Infinity; // initialize minimum distance to infinity
    let best_category = ""; // initialize best category to empty string
    for (let category in category_embeddings) {
      // for each category in the object
      let category_embedding = category_embeddings[category]; // get category embedding array
      let distance = euclideanDistance(
        new_article_embedding,
        category_embedding
      ); // calculate euclidean distance between new article and category embeddings
      if (distance < min_distance) {
        // if distance is smaller than minimum distance
        min_distance = distance; // update minimum distance
        best_category = category; // update best category
      }
    }

    resolve(best_category);
  });
};
```

Here is the Euclidean distance function if you are wondering:\
```javascript
function euclideanDistance(a, b) {
  // a and b are arrays of numbers with the same length
  let sum = 0; // initialize sum to zero
  for (let i = 0; i < a.length; i++) {
    // for each element in the arrays
    let diff = a[i] - b[i]; // calculate the difference between corresponding elements
    sum += diff * diff; // add the square of the difference to the sum
  }
  return Math.sqrt(sum); // return the square root of the sum
}
```

Lastly, let's build our own logic to extract the data and process it. The code below shows how we can select a category and execute its action:

```javascript
const categorySelection = async (category, cate) => {
  const selectedCat = cate && cate[category];
  if (selectedCat?.action === "API_CALL") {
    fetch(selectedCat.url)
      .then((e) => e.json())
      .then(async (e) => {
        if (selectedCat.categories && selectedCat.ask) {
          newQuestion = selectedCat.ask.map((x) => x(e));
          init(newQuestion, selectedCat.categories(e));
        } else {
          messages.push({
            content: JSON.stringify(e),
            role: "system",
          });
          openai
            .createChatCompletion({
              model: "gpt-3.5-turbo",
              messages,
            })
            .then((e) => console.log(e.data.choices[0].message.content))
            .catch((e) => console.log(e));
        }
      });
  } else if (selectedCat?.action === "LOCAL_ACTION") {
    if (selectedCat.categories && selectedCat.ask) {
      newQuestion = selectedCat.ask.map((e) => e(selectedCat.categories()));
      await init(newQuestion, selectedCat.categories());
    }else{
      console.log(selectedCat.response())
    }
  } else {
    console.log({ conversation });
  }
};
```
This code demonstrates how we can select a category and execute its action based on the user input. When we pass a category to the function, it will look it up in the list of categories and check if it requires an API call. If it does, then we will make an API request and get the response. Then we will pass the response to the init function again, which will repeat the same process with the new input and the new categories. This way, we can handle multiple levels of interaction and options.

If there are no more categories to choose from, we will pass the response to the gpt-3.5-turbo model and let it generate a natural language reply for the user. This way, we can leverage the power of AI to create engaging and natural conversations.

If we want to handle other types of actions that don't require an API call, we can define them as LOCAL_ACTION and write our own logic for them. In the above example, we are not making an API request for this type of action.

Now let's look at the calling function for all the above processes:\
```javascript
const init = async (newInputs, cate) => {
  await initializeCategoriesEmbedding(Object?.keys(cate || {})).then(
    async (embeddings) => {
      const inp = Array.isArray(newInputs) ? newInputs : [newInputs];
      const responses = inp.map((newInput) => {
        messages.push({
          content: newInput,
          role: 'system',
        });
        const input = prompt(newInput + ' : ');
        messages.push({
          content: input,
          role: 'user',
        });
        conversation.push({ question: newInput, reply: input });
        return input;
      });
      const result = await classification(responses.join(' : '), embeddings);
      await categorySelection(result, cate);
    },
  );
};
init(
  [
    'Welcome to Our Support, Please Enter Your Name : ',
    'Great, What can i do for you?',
  ],
  data.categories,
);
```
This function takes an array of new inputs and a categories object as arguments. It then initializes the category embeddings using the Ada model and maps each new input to a user response. It then passes the responses to the classification function and gets the best category. It then selects the category and executes its action.

That's how we can make our GPT model brew us a coffee using intent classification and a rule-based system. This approach can be applied to any other data sources, APIs, or actions that you want to integrate with your GPT model. The possibilities are endless!

Imagine having a GPT model that can not only generate amazing natural language, but also interact with your own data sources, APIs, or actions. How cool would that be? You could ask it to do anything you want, from booking a flight to ordering a pizza to playing a game. Well, you don't have to imagine anymore, because, in this article, I will show you how I made it happen using a simple yet powerful approach based on intent classification and a rule-based system.

GPT Models Can Do More Than Just Talk: How to Make Them Brew You Coffee ☕

Do you want to create amazing applications that can search, cluster, recommend, and classify text and code? Do you want to use a powerful and cost-effective embedding model that can handle long documents and diverse tasks? Do you want to learn how to use text-embedding-ada-002 in Node.js with ease and simplicity? If you answered yes to any of these questions, then this article is for you! 😍

Blazing Fast Search with text-embedding-ada-002 in Node.js

with th latest update of the v2 of React native foreground service, things are more easier and convinet now, React native foreground service now let you easily install and linked RN foreground service with your application with just 2 steps installation. 

The purpose of this article is to show you how you can easily work Install foreground Service in your application and use it as per your requirement. 

If you rather watch a video, below is the link for RN installation process and how you can easily install it and link it.

https://www.youtube.com/watch?v=t5LQdbvjufM

Check it out 👆

To Install the Library and attach it to your project, you can easily install with in 2 to 3 steps. Lets get to it. 

### Step 1

Installing the library with 

```
npm i @supersami/rn-foreground-service
```

or

```
yarn add @supersami/rn-foreground-service
```

### Step 2 

Just run this command once and see the magic.
```
node node_modules/@supersami/rn-foreground-service/postinstall.js
```

In anycase, the above don't link your application correctly, you can try on manual linking of the application at [Installation Documentation ](https://rn-foreground.vercel.app/documentation/installation "Installation Documentation")

### Step 3

In your root, Index.js file. Paste the following code.

```
import ReactNativeForegroundService from "@supersami/rn-foreground-service";
ReactNativeForegroundService.register();
```

The above code will register a initial headless task, which will be a first layer, over which, you can add as many task as you desire and they all will execute seamlessly.

Create a task and add it the execution queue. anywhere in your application, you can create a task like this.

```
ReactNativeForegroundService.add_task(() => update(), {
  delay: 1000,
  onLoop: true,
  taskId: "taskid",
  onError: (e) => console.log(`Error logging:`, e),
});
```

Creating a foreground service, so that your headless task stays active.

```
ReactNativeForegroundService.start({
  id: 1244,
  title: "Foreground Service",
  message: "We are live World",
  icon: "ic_launcher",
  button: true,
  button2: true,
  buttonText: "Button",
  button2Text: "Anther Button",
  buttonOnPress: "cray",
  setOnlyAlertOnce: true,
  color: "#000000",
  progress: {
    max: 100,
    curr: 50,
  },
});
```


Forground service that you can use to create an always on Background task in React Native. Foreground service is a kind of service in Android that has a notification that can not be removed until the foreground service is closed, and because of this, you can run a background task with the help of headless JS.


 How to use React Native Foreground Service v2@

## The Idea

The team recently switched from Normal Create React App to Next JS. After that choice, I was given the assignment to make a Template for the Backstage. Not simply a template but also one that will scale effectively in the future. Since it is common knowledge that as applications get bigger, their folder and code structures get more complicated over time, and eventually, it all starts to look intimidating, therefore, the objective was to develop a Directory structure that can grow over time while remaining manageable. 

After performing much research, I developed a Next JS Structure, and we are now using it in all of our projects. Making our application as scalable as possible is the goal. This lesson will put a lot of emphasis on the front-end portion of our program, keeping in mind that the backend of our application is primarily built using Spring boot.

#### Structure :

The folder structure looks a bit like the one below.

```
- Connectors
- Pages
- Containers
- Components
- Redux
- Services
- Themes
- Translations
- Utils
- Assets
```

##### Connector

Connectors are levels of communication with the backend, such as Apollo. The Apollo clients and Basic Rest Connectors can be stored in the Connector folder and exported using the index file. So, the interior of the Connectors will appear as follows:

```
- Connector
  - index.ts 
  - cmsClient.ts
  - backendClient.ts
 ```

The benefit is having all of your primary external connectors in one location, making contacting them much more straightforward.

##### Pages

As a result of Next js's directory-based routing, the page folder will immediately export the default from containers, which we will cover in more detail later. Server-side and build-time data fetching logic code will both be included on pages.

##### Containers

I am quite proud of this strategy because it has made my life so much easier and is something I genuinely adore. The idea behind a container is to have a container that can hold future children's containers and that kids can do the same. As we all know, a page comprises several sections, essentially containers in and of themselves. A sample of the containers is shown below.

```
- Container
  - HomeContainer
    - IntroductionContainer
    - AboutContainer
       - AnotherChildContaine
 ```

Because of this structure, this method makes things relatively simple, and the separation of concerns endures. And because they are being reused, containers like FooterContainer and HeaderContainer can persist on the top layer.

##### Components

There isn't much to explain here because components are essentially re-usable components, as we all know and love.

#### Redux

A folder to store all the ReduxToolKit-based global state logic. The concept is to create a module-based structure, save all module-related states in a single file, and set store export as the default.

```
- Redux
  - Index.ts
  - User
    - Index.ts
```

##### Services

We must also comprehend the services folder's folder structure, modelled after the MVC framework. The folder would contain the data transformation, mapping, and fetching helpers, which would be organized by modules.

So, 

```
- Services 
   - User
    - gql.ts
    - Index.ts

```

###### Theme : 
A Folder that would contain your theme config.

###### Translations : 
It would contain your translations for different languages

###### Utils : 
Re-usable functions 

###### Assets : 
 As the name suggests, standard assets will be used in the application. 

###### Interfaces : 
Re-usable interfaces can reside here. 

## Summary : 

The suggested folder structure is highly opinionated. I chose this structure because it gives me the simplicity that even a novice developer discussing the project can grasp.

You are welcome to share any suggestions for improvement or things I may have overlooked in the comment box below.

### Incoming Stories : 

🚨 Next JS template based on this article.

🚨 GraphQL with Next JS.

🚨 Ultimate Themeing Support for your React Application.

🚨 Post Commit Configuration with EsLint, Husky, Type Checks and Testings.


This article will suggest a technique to build your Next.Js application so that it may scale well as the program grows in size while also not overwhelming the developers with the structure itself.


Most scalable Next Js Folder Structure


Let’s assume you are using Firebase and all the features it supports. And now you have to deal with some kind of custom email verification to access some sort of document within the Firestore. Or let’s say you have a guest user that you need to sign in, and instead of storing them in the authentication, you are using Firestore for their entry, and you want to send a custom code to their email that they can input in the frontend and by which you can authenticate them. How would you do it?

Well, there are a lot of ways to handle it and I am going to share with you *my* way of doing it. It requires you to have Cloud function access.

So let's get started with code.

So assuming you have an email verification form, the user inputs an email. On its submission, the user will receive an email with the code, which the user will later input in the front-end and get verified.

The very first function we will require will be responsible for the sending of email and storing the session code in the Firestore.

Here is the example code. 🖥

    const sendVerificationCode = ({ email }) => {

    // Randomwords is a code generator function that will generate a code of five charactors.
    const code = RANDOMWORDS(5);

    // Setting up the expiry for the code, so it will get deleted once the 5 mins has passed so nobuddy can exploit it. 
    const sessionExpiry = moment().add('5', 'minute');

    // Storing the code/session to the firstore with an expiry
    admin.Firestore().collection('sessions').doc(code).set({code,sessionExpiry}).then((e) => {

    // A custom function to trigger emails
    sendEmail({ email, message: 'Your otp is ' + code, subject: 'Requested OTP' });

    // Adding a task to our task scheduler to delete the session from the Firestore.
    addATask({task: 'deleteSession',data: { id: code },performAt:sessionExpiry._d,}).then((e) => {}).catch(console.log);

    });

    };

Here, we are using our custom Firebase scheduler which will rerun a function every minute checking if there is a task that needs to be completed. And upon finding one, it will execute that task and move on. The function addATask is a part of the scheduler function. Kindly go through [this](https://supersami.medium.com/task-scheduler-with-firebase-to-trigger-everyday-tasks-7a2d53c26521) article first to set up a corn-job-like scheduler in Firestore with Cloud functions.

Random words are a function the generates a code. 🖥

    function RANDOMWORDS(length) {

    let result = '';
    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    const charactersLength = characters.length;
    for (let i = 0; i < length; i += 1) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength));
    }

    return result;

    }

SendEmail is a custom function that you can have that is used to send an email to the person with code. I used a serverless Node.js Express app that sends an email to the email provided.

Now, we have a send an email to the person with the code and have the OTP stored in our DB. The next step is to validate the OTP and upon validation, deleting the code as well. 🖥

    const ValidateSession = async ({ code }) => {

    // getting the code from the db
    const document = await admin.Firestore().collection('sessions').doc(code).get();

    // check for the existence
    if (document.exists) {

    // If Exist, deleting the code session.
    admin.Firestore().collection('sessions').doc(code).delete();

    return true;
    }

    return false;
    };

We can use this function to validate the code/session/OTP and upon validation, we can authenticate the user.

That is it, folks. Let me know the better approach for it, I will always welcome feedback.

— — — — — — — — — — — — — — — — — — — — — — —

*Looking for a freelancer? [Hire me via Fiverr](https://www.fiverr.com/rajaosama).*

— — — — — — — — — — — — — — — — — — — — — — —


Create an awesome OTP and OTP validator using Firebase and firestore in 10 mins, and easily integrate it with your applicaiton. 

Custom OTP Verification System that Works with Firebase

# Moving away from Medium? Easy Peasy

Medium is a fantastic venue for getting plenty of engagement. It is a fantastic platform for someone who is not technically savvy to start with. The platform is fantastic and ensures that your content get the exposure it merits. However, there is a catch. The first is that if you are not from a list of countries, your content will not be able to be monetized, which means you are not making any mone. The second is that your content analytics are not entirely under your control.

I recently made the decision to switch from medium because I want to publish my work under my name, have complete control over it, and have it monetized. The unpleasant part is that Medium doesn't make it simple to export your material and move it to another platform or your own platform. This makes moving a large number of articles very difficult and time-consuming.

So I developed a script to move all of my stuff in a few easy steps, as any developer would do. I created a script that would collect your material in the form of MD files and your photos, which you could then move to any location with ease.

**Interesting Huh? **

Let's start with the work I managed to complete and the justification behind it. A technical person would be required to export all of your content. Or you may just get in touch with me, and I'd be happy to assist you as well.

The very step would be to get all of the content links that you want to move in a JSON format. 

```
[
"https://medium.com/javascript-in-plain-english/react-native-foreground-service-f7fc8e617fba"
]
```

The process can be broken down into 3 simple steps.
Using the JSON, getting the MD markup of the article and save into a file
Reading those files to get the Images URL
Downloading those Images and saving them into a Folder

Getting the markup from a medium should be our first step. We'll be using an NPM module, therefore let's use NPX remote execution to have the markup saved into a folder rather than downloading it.

```
const SaveFilesToFolder = async ({ link, title, fileName }) => {
 console.log(`Starting to write to path: ./articles/${fileName}/content.md`);
 try {
   await execPromise(`mkdir ./articles/${fileName}`);
   await execPromise(`mkdir ./articles/${fileName}/images`);
   await execPromise(
     `npx mediumexporter ${link} > articles/${fileName}/content.md`
   );
 } catch (error) {
   console.log({ error });
 }
};
```

The above code snippet's fundamental purpose is to construct some folders called "articles" and "images" inside of them. After that, using mediumexporter to get the MD from Medium Link and paste it in, a folder structure similar to this will be created. `articles/article-title/content.md`

In the above code, you can see a function being used often us execPromise and all it do is execute a command in CMD. 

```
const execPromise = (url) => {
 return new Promise(async (res, rej) => {
   await exec(url, async (error, stdout, stderr) => {
     if (error) {
       rej(error);
     }

     setTimeout(() => {
       res(stdout);
     }, 0);
   });
 });
};
```

The next step is to re-read the generated file by using FS and extracting images. 

```
const getImagesFromMd = ({ fileURL }) => {
 const images = [];
 const a = fs.readFileSync(fileURL).toString();
 const re =
   /!\[[^\]]*\]$(?<filename>.*?)(?=\"|$)(?<optionalpart>\".*\")?\)/gm;
 while ((match = re.exec(a)) !== null) {
   images.push(match["groups"].filename);
 }

 return images;
};

```

The above code just has a regex and it reads the file and extracts all the images. Now Lets save this image into a local directory. 

```
const downloadImages = async ({ fileURL, fileName }) => {
 const imagesURL = getImagesFromMd({ fileURL });
 for (let i = 0; i < imagesURL.length; i++) {
   const element = imagesURL[i];
   const imageLocalPath = `${__dirname}/articles/${fileName}/images/`;
   const { filename } = await downloadImage(element, imageLocalPath).catch(
     console.log
   );
   await replaceOldImageinMdWithNew({
     oldImage: element,
     newImage: filename,
     fileURL,
   });
 }
};

```

The function `downloadImage` download the images into a directory. 

```

const downloadImage = function (uri, filename) {
 const options = {
   url: uri,
   dest: filename, // will be saved to /path/to/dest/image.jpg
 };

 console.log({ options });
 return download.image(options);
};

```

And `replaceOldImageinMdWithNew` function replaces old images url with the new one. 
```
const replaceOldImageinMdWithNew = async ({ oldImage, newImage, fileURL }) => {
 let a = fs.readFileSync(fileURL).toString();
 console.log({ oldImage, newImage });
 a = a.replace(oldImage, newImage);

 fs.writeFileSync(fileURL, a);
};

```

The above functionality will download the images and content of the article in a folder structure like below.

![Folder Structure](//images.ctfassets.net/k07f0awoib97/4Dx2KhcxSYE30MajrGoulF/e7616ac8a5dd0cb467a1b4da370c97a2/Screen_Shot_2022-08-27_at_7.16.39_PM.png)

And that's all; with this simple method, you can easily download all of your material to a local PC and then upload it to your CMS at a later time.

Full File : 
```
const { exec } = require("child_process");
const {
  init,
  writeContent,
  getUploadReplaceUpdate,
} = require("./contentfulImport");
const articleLinks = require("./links.json");
const fs = require("fs");
const { request } = require("https");
const download = require("image-downloader");

const MEDIUM_PUBLISHER = "https://medium.com/javascript-in-plain-english/";
const MEDIUM_USER = "https://medium.com/@supersami/";

const GetArticlesTitleByName = () =>
  articleLinks.map((e) => {
    let a = e;
    if (a.includes(MEDIUM_PUBLISHER)) {
      a = a.split(MEDIUM_PUBLISHER)[1];
    }
    if (a.includes(MEDIUM_USER)) {
      a = a.split(MEDIUM_USER)[1];
    }
    let b = a.split("-");
    b = b.slice(0, b.length - 1);

    return b.join(" ").toUpperCase();
  });

const execPromise = (url) => {
  return new Promise(async (res, rej) => {
    await exec(url, async (error, stdout, stderr) => {
      if (error) {
        rej(error);
      }

      setTimeout(() => {
        res(stdout);
      }, 0);
    });
  });
};

const SaveFilesToFolder = async ({ link, title, fileName }) => {
  console.log(`Starting to write to path: ./articles/${fileName}/content.md`);
  try {
    await execPromise(`mkdir ./articles/${fileName}`);
    await execPromise(`mkdir ./articles/${fileName}/images`);
    await execPromise(
      `npx mediumexporter ${link} > articles/${fileName}/content.md`
    );
  } catch (error) {
    console.log({ error });
  }
};

const FetchAndReturnWithContentObject = () => {
  const arr = [];
  const exp = /^#(.*)$/m;
  const folder = "./articles";
  const files = fs.readdirSync(folder);

  for (let index = 0; index < files.length; index++) {
    const e = files[index];
    const file = fs.readFileSync(`${folder}/${e}`).toString();
    const match = exp.exec(file);
    let title = "";
    try {
      title = match[1];
    } catch (e) {
      console.log(e);
    }
    if (title) {
      const obj = {
        title,
        file,
        slug: e.split(".")[0],
        tags: ["javascript"],
        category: "Development",
      };
      arr.push(obj);
    }
  }

  return arr;
};

const getImagesFromMd = ({ fileURL }) => {
  const images = [];
  const a = fs.readFileSync(fileURL).toString();
  const re =
    /!\[[^\]]*\]$(?<filename>.*?)(?=\"|$)(?<optionalpart>\".*\")?\)/gm;
  while ((match = re.exec(a)) !== null) {
    images.push(match["groups"].filename);
  }

  return images;
};

const downloadImage = function (uri, filename) {
  const options = {
    url: uri,
    dest: filename, // will be saved to /path/to/dest/image.jpg
  };

  console.log({ options });
  return download.image(options);
};

const replaceOldImageinMdWithNew = async ({ oldImage, newImage, fileURL }) => {
  let a = fs.readFileSync(fileURL).toString();
  console.log({ oldImage, newImage });
  a = a.replace(oldImage, newImage);

  fs.writeFileSync(fileURL, a);
};

const downloadImages = async ({ fileURL, fileName }) => {
  const imagesURL = getImagesFromMd({ fileURL });
  for (let i = 0; i < imagesURL.length; i++) {
    const element = imagesURL[i];
    const imageLocalPath = `${__dirname}/articles/${fileName}/images/`;
    const { filename } = await downloadImage(element, imageLocalPath).catch(
      console.log
    );
    await replaceOldImageinMdWithNew({
      oldImage: element,
      newImage: filename,
      fileURL,
    });
  }
};

const start = async () => {
  const articles = GetArticlesTitleByName();
  for (let i = 0; i < articles.length; i++) {
    const e = articles[i];
    await SaveFilesToFolder({
      link: articleLinks[i],
      fileName: e.toLowerCase().split(" ").join("-"),
    });
    await downloadImages({
      fileName: e.toLowerCase().split(" ").join("-"),
      fileURL: `./articles/${e.toLowerCase().split(" ").join("-")}/content.md`,
    });

  }

};
start();

```


Wish to export all of your medium blogs, so that you can move to another platform? This article demonstrate how you can eaisly download your medium content in bulk.

Easily Migrate from Medium by Exporting all of your content with single Javascript Script.

WOOSHOP was planned as a project for the portfolio, and I started this project almost 2 years ago, after I completed a project for my company called DFM which over react native, I wanted a project that I can show to the world since DFM project was more like an in-house app for the company and their members.

I got the inspiration when I was getting all this cool news about what is graphQL and how great it is. I was into it, I started learning graphQL over the internet and came across this plugin called WPGraphQL - A plugin created for WordPress and WordPress only. The sole purpose of this plugin was to be able to access the WordPress data via GraphQL. And literally, they have these two addons plugins as well one was to get the authentication through JWT and another was to access to all the woo-commerce-based content.

After seeing this plugin and reading the documentation, I thought it would be a great idea to create an app based on woo-commerce, where people can clone the app and change the URL of the site and have these plugins installed on their website and bang, there you have a custom Woo-commerce store app for both ios and android platform.

It took me at least 5 months to complete this project as I was also doing this full-time job, and whatever time I had, I was investing in wooshop project.

## Functionalities
- Authentication
- Registration
- Dark mode Support
- Listing by Popular, most views and most sold products on the home page.
- Ability to browser the filter.
- A Product Page
- A Cart Page
- A Checkout page, only COD method work.
- Search Functionality

**The Project is fully open source, and everyone is welcome to contribute.**

#### What Can be done
- Improve code structure, because the app was created when I was just started working with react-native and the project before this was not as big as this one.

- Profile Page

- Payment Gateway. (WPGraphQL does not support payment, but it can be done, by using the provider's API and there is an option while making an order, you can confirm the payment by sending status of paid. You can learn more about them on WPGraphQL page.)

#### How to Get Started
I plan to run this project, you need to have your own WordPress setup as I do, and some plugins, all of them are free except buying your own WordPress server.
1. [wp-graphQL](https://github.com/wp-graphql/wp-graphql/releases/tag/v0.6.1)
2. [wp-graphQL-woocommerce](https://github.com/wp-graphql/wp-graphql-woocommerce/releases/tag/v0.4.3)
3. [wp-graphQL-jwt-authentication](https://github.com/wp-graphql/wp-graphql-jwt-authentication/releases/tag/v0.3.5)

You can also download this project from [google play store](https://play.google.com/store/apps/details?id=com.wooshop&hl=en_CA).

[Github link to the project
](https://github.com/Raja0sama/WooShop)

[ Youtube ] : https://www.youtube.com/watch?v=AetKVF9vV5M

WooShop is created with React-native with Wordpress and Woo-commerce. It is fully functional shop Application with checkout cart and login


Building a Woocommerce-based app with React Native + GraphQL


# Automatic Deployment with GitHub on Any Server Instance without GitHub workflow or SSH

A guide on how to deploy an application on any kind of virtual server instance without the use of SSH and GitHub actions.

This article aims to propose a solution for those who are using virtual servers to host their sites, servers, etc. The main goal is to explain and show how one would deploy their application on any kind of virtual server instance without the use of SSH and GitHub actions.

Deploying a site via ssh through GitHub actions or workflow can be tricky and complicated sometimes, Recently I was going through something and was unable to figure out a way to deploy my application to the server via my GitHub, and every time I had to pull the build to my server manually to update the changes I had, which is very time consuming and not efficient so I had to do come up with a solution

The Solution I come up with is a hook based approach, every repo has these hooks available, meaning that I can set up a listener to listen for the webhook trigger and perform whatever action I want, in my case, I performed a git pull from a branch and make a build directly on my server.

Okay enough with the theory, let's see this in action:

### **Step 1:**

Make sure to install Node.js on your virtual server whether it is hosted on GCP or Amazon, in my case I used nvm and installed Node.js version 14 since my application was built on Node.js version 14.

### **Step 2:**

Make sure to give your virtual server a public IP and expose a port. I was using GCP so therefore in my cloud console, in the firewall section, I had to enable a port 8080. And inside of my server `sudo ufw allow 8080 ` to allow this port locally as well.

### **Step 3:**

Testing the port, check if the port is really working or not. You can use an online solution like this one [Port Checker — Check Open Ports Online](https://portchecker.co/). Or You can check it manually. 
To Check manually you need to write `*nc -l -p 8080 -t` *on the server terminal* and `echo “123” | nc -t <public ip here> 8080` *on your local mac terminal. 
If you get a response on your server 123, that means your port is accessible via the internet and you are good to go.

### **Step 4:**

Setting up a webhook, In your repo’s settings page, there is a tab name webhook.

![](https://images.ctfassets.net/k07f0awoib97/4uyZUURHKmYq9htRP7LPgj/c2642bc73996d9180d4ae82d86e3ae14/c5yBgSfBb8.https___cdn-images-1_medium_com_max_4800_1_lSnom82inF0yRUM_GVkE2A_png)

And you need to add a webhook with the following settings

![](https://images.ctfassets.net/k07f0awoib97/25QTPLlrGUv34GNpm10sIn/b251219165a0a4ac52f778d57a29dcf4/c5yBgSfBb8.https___cdn-images-1_medium_com_max_3228_1_Ys3U0NOZtoeP2Bp58ftWBg_png)

And in the **Let me select individual events **section, kindly check Pull Requests. Once that is done save your settings.

What we have done is set up a webhook, that will trigger on every pull request. So let's say you have one stagging branch and one main branch. Whenever you make a pull request from stagging branch to the main branch, and you merge it, the webhook will trigger with these params
action => “closed” 
head => “develop”
merged => true 
base => “master”

Where the head is basically the branch the pull is from and the base is the branch where it will get merged, and action is something to indicate that the pull request is merged.

### **Step 5:**

The Next Step would be creating a simple yet effective micro Node.js express server, that will stay alive by means of PM2.

Go to the server location where your file needed to be deployed and cd a directory back. Create a folder name with AD automatic deployment

    mkdir AD
    cd AD

and npm init, this will generate a package.json for you. Very next step would be now to create an index.js file by typing nano index.js, and it will open up a text editor where you can paste the below code.

    const express = require('express') const fs = require('fs') const {
        exec
    } = require("child_process");
    const app = express() const port = 8080 app.use(express.json()) app.post('/', (req, res) => {
        const {
            body
        } = req
        const merged = body.pull_request.merged
        const status = body.action
        const head = body.pull_request.head.ref
        const base = body.pull_request.base.ref console.log({
            merged,
            status,
            head,
            base
        }) if (status === "closed" && head === "develop" && merged === true && base === "master") {
            exec("cd ../ws/ && git stash && git pull origin develop --no-edit && make", (error, stdout, $
                if (error) {
                    console.log(`error: ${error.message}`);
                    return;
                }
                if (stderr) {
                    console.log(`stderr: ${stderr}`);
                   return 
            });
            res.send('Hello World!')
        } else {
            res.send('Hello World!')
        }
    })
    app.get('/', (req, res) => {
        // const head = req.body.head.ref
        // const status = req.body.status
        // console.log({head,status})
        res.send('Hello Worlds!')
    })
    app.listen(port, () => {
                console.log(`Example app listening at [http://localhost:${port}`](http://localhost:${port}`))

The above code is pretty self-explanatory, we have the express module installed. And we exposed two endpoints, a Get and a Post request on route “/”. After that we a condition matching, if the pull request is from our desire branch into our desire branch and the action that happened, was **merged** and **closed**. and once the condition has been matched exec a shell command, in my case I already had a clone branch in my server with node modules installed and I just wanted to run the following command.

    cd ../ws/ && git stash && git pull origin main — no-edit && npm i && make

the above command navigates to my desired location, stash any existing changes on the server, pull from the main branch with no-edit options, and then in the last makes a build. the build will be generated and will be placed into your desired branch, you can change the build settings on your own code, if you have React app, webpack output change would do the trick for you. 
if you are using pm2 and have a node server that requires changes, pm2 restart would require after you replace all the code. You can modify it as you wish, but the concept is to pull from my branch and install node modules and make a build via terminal.

### **Step 6:**

Now we have our code in place, we need to run it, to test it you can just type ```node index.js``` and from the browser access [http://yourip:8080/,](http://yourip:8080/,) You should see a response of Hello World, that indicate everything is fine and working.

You can test the post request by just creating a pull request from stagging to the main branch which is the production branch, you will be able to spot the changes in the logs.

If you want to run your Node.js app silently in the background you can install pm2.

    npm i pm2 -g
    pm2 start index.js

This will install pm2 and start it silently in the background. To Access the logs from you can write

    pm2 log index

To look at the logs of our micro application.

If you have read through this article props to you and thank you and I hope the concept is pretty clear.

You can follow me at [https://rajaosama.me/](https://rajaosama.me/) and on GitHub via [https://github.com/raja0sama.](https://github.com/raja0sama.)

Thank you.


Learn to impliment automatic deployment an application to the cloud virtual server without using GitHub workflow and SHH, by means of a nodejs based express server.

 Automatic Deployment with GitHub on Any Server Instance without GitHub workflow or SSH


# Detect React Route Change in Vanilla JavaScript

Hi! You are here because you have been looking for a solution to detect a route change in your SPA. So, how would you detect that the page has been changed? Since there is no navigation as well as no event for the URL change in the SPA, we need to come up with our own solution and implement our own logic.

The first thing we can do is to *setInterval*, which will check for the previous and current URL changes after a certain interval. This is a classic way to do it. This can work almost all the time and you don't even need an interaction to trigger, it just keeps on checking.

But let’s just say you do have an interaction — **a click — **you can actually check for a client-side route change in a better manner.

```
let url = location.href;
document.body.addEventListener('click', ()=>{
    requestAnimationFrame(()=>{
      if(url!==location.href){
        console.log('url changed');
        url = location.href
      }
    });
}, true);

```

Learn more about [*RequestAnimationFrame()](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)* from here. The above snippet shows that we have a listener on click, so whenever a click event is triggered, it compares the URL before the click and after the click. If they are different, then the URL has been changed.
> *The reason for writing this article is that I wasted hours on researching and was not able to come up with the proper solution because of not using every specific keyword. And since Medium has a great SEO, it will rank better on Google and this how I will contribute to and help the dev community.*

Thank you!


Wondering how would you listen to page change for the spa in a Virutal DOM  which is routing through client-side routing via vanilla javascript.

 Detect React Route Change in Vanilla JavaScript

Blogging is my way of giving back to the community and to be honest I actually start liking writing about my experience and sharing it with the people in the community. The topic I often write about is the experience in my life and technical problems that there are no good solutions easily available online. 

Blogs

Learn more about my experience through my blogs - Raja Osama