DEV Community: Niharika Goulikar

10 Advanced TypeScript Concepts Every Developer Should Know

Niharika Goulikar — Thu, 14 Nov 2024 06:13:36 +0000

TypeScript is a modern programming language often preferred over JavaScript for its added type safety. In this article, I'll share the top 10 TypeScript concepts that will help sharpen your TypeScript programming skills.Are you ready?Let's go.

1.Generics : Using generics we can create reusable types, which will be helpful in dealing with the data of the today as well as the data of the tomorrow.
Example of Generics:
We might want a function in Typescript that takes an argument as some type, and we might want to return the same type.

function func<T>(args:T):T{
    return args;
}

2.Generics with Type Constraints : Now let's limit the type T by defining it to accept only strings and integers:

function func<T extends string | number>(value: T): T {
    return value;
}

const stringValue = func("Hello"); // Works, T is string
const numberValue = func(42);      // Works, T is number

// const booleanValue = func(true); // Error: Type 'boolean' is not assignable to type 'string | number'

3.Generic Interfaces:
Interface generics are useful when you want to define contracts (shapes) for objects, classes, or functions that work with a variety of types. They allow you to define a blueprint that can adapt to different data types while keeping the structure consistent.

// Generic interface with type parameters T and U
interface Repository<T, U> {
    items: T[];           // Array of items of type T
    add(item: T): void;   // Function to add an item of type T
    getById(id: U): T | undefined; // Function to get an item by ID of type U
}

// Implementing the Repository interface for a User entity
interface User {
    id: number;
    name: string;
}

class UserRepository implements Repository<User, number> {
    items: User[] = [];

    add(item: User): void {
        this.items.push(item);
    }

     getById(idOrName: number | string): User | undefined {
        if (typeof idOrName === 'string') {
            // Search by name if idOrName is a string
            console.log('Searching by name:', idOrName);
            return this.items.find(user => user.name === idOrName);
        } else if (typeof idOrName === 'number') {
            // Search by id if idOrName is a number
            console.log('Searching by id:', idOrName);
            return this.items.find(user => user.id === idOrName);
        }
        return undefined; // Return undefined if no match found
    }
}

// Usage
const userRepo = new UserRepository();
userRepo.add({ id: 1, name: "Alice" });
userRepo.add({ id: 2, name: "Bob" });

const user1 = userRepo.getById(1);
const user2 = userRepo.getById("Bob");
console.log(user1); // Output: { id: 1, name: "Alice" }
console.log(user2); // Output: { id: 2, name: "Bob" }

4.Generic Classes:: Use this when you want all the properties in your class to adhere to the type specified by the generic parameter. This allows for flexibility while ensuring that every property of the class matches the type passed to the class.

interface User {
    id: number;
    name: string;
    age: number;
}

class UserDetails<T extends User> {
    id: T['id'];
    name: T['name'];
    age: T['age'];

    constructor(user: T) {
        this.id = user.id;
        this.name = user.name;
        this.age = user.age;
    }

    // Method to get user details
    getUserDetails(): string {
        return `User: ${this.name}, ID: ${this.id}, Age: ${this.age}`;
    }

    // Method to update user name
    updateName(newName: string): void {
        this.name = newName;
    }

    // Method to update user age
    updateAge(newAge: number): void {
        this.age = newAge;
    }
}

// Using the UserDetails class with a User type
const user: User = { id: 1, name: "Alice", age: 30 };
const userDetails = new UserDetails(user);

console.log(userDetails.getUserDetails());  // Output: "User: Alice, ID: 1, Age: 30"

// Updating user details
userDetails.updateName("Bob");
userDetails.updateAge(35);

console.log(userDetails.getUserDetails());  // Output: "User: Bob, ID: 1, Age: 35"
console.log(new UserDetails("30"));  // Error: "This will throw error"

5.Constraining Type Parameters to Passed Types: At times, we want to a parameter type to depend on some other passed parameters.Sounds confusing,let's see the example below.

function getProperty<Type>(obj: Type, key: keyof Type) {
  return obj[key];
}

let x = { a: 1, b: 2, c: 3 };
getProperty(x, "a");  // Valid
getProperty(x, "d");  // Error: Argument of type '"d"' is not assignable to parameter of type '"a" | "b" | "c"'.

6.Conditional Types : Often, we want our types to be either one type or another. In such situations, we use conditional types.
A Simple example would be:

function func(param:number|boolean){
return param;
}
console.log(func(2)) //Output: 2 will be printed
console.log(func("True")) //Error: string cannot be passed as argument here

A little bit complex example:

type HasProperty<T, K extends keyof T> = K extends "age" ? "Has Age" : "Has Name";

interface User {
  name: string;
  age: number;
}

let test1: HasProperty<User, "age">;  // "Has Age"
let test2: HasProperty<User, "name">; // "Has Name"
let test3: HasProperty<User, "email">; // Error: Type '"email"' is not assignable to parameter of type '"age" | "name"'.

6.Intersection Types: These types are useful when we want to combine multiple types into one, allowing a particular type to inherit properties and behaviors from various other types.
Let's see an interesting example for this:

// Defining the types for each area of well-being

interface MentalWellness {
  mindfulnessPractice: boolean;
  stressLevel: number; // Scale of 1 to 10
}

interface PhysicalWellness {
  exerciseFrequency: string; // e.g., "daily", "weekly"
  sleepDuration: number; // in hours
}

interface Productivity {
  tasksCompleted: number;
  focusLevel: number; // Scale of 1 to 10
}

// Combining all three areas into a single type using intersection types
type HealthyBody = MentalWellness & PhysicalWellness & Productivity;

// Example of a person with a balanced healthy body
const person: HealthyBody = {
  mindfulnessPractice: true,
  stressLevel: 4,
  exerciseFrequency: "daily",
  sleepDuration: 7,
  tasksCompleted: 15,
  focusLevel: 8
};

// Displaying the information
console.log(person);

7.infer keyword: The infer keyword is useful when we want to conditionally determine a specific type, and when the condition is met, it allows us to extract subtypes from that type.
This is the general syntax:

type ConditionalType<T> = T extends SomeType ? InferredType : OtherType;

Example for this:

type ReturnTypeOfPromise<T> = T extends Promise<infer U> ? U : number;

type Result = ReturnTypeOfPromise<Promise<string>>;  // Result is 'string'
type ErrorResult = ReturnTypeOfPromise<number>;      // ErrorResult is 'never'

const result: Result = "Hello";
console.log(typeof result); // Output: 'string'

8.Type Variance : This concept talks how subtype and supertype are related to each other.
These are of two types:
Covariance: A subtype can be used where a supertype is expected.
Let's see an example for this:

class Vehicle {
  start() {
    console.log("Vehicle is running");
  }
}

class Car extends Vehicle {
  honk() {
    console.log("this vehicle honks");
  }
}

function vehiclefunc(vehicle: Vehicle) {
  vehicle.start(); 
}

function carfunc(car: Car) {
  car.start();        // Works because Car extends Vehicle(inheritance)
  car.honk();        // Works because 'Car' has 'honk'
}

let car: Car = new Car();
vehiclefunc(car); // Allowed due to covariance

In the above example, Car has inherited properties from Vehicle class,so it's absolutely valid to assign it to subtype where supertype is expected as subtype would be having all the properties that a supertype has.
Contravariance: This is opposite of covariance.We use supertypes in places where subType is expected to be.

class Vehicle {
  startEngine() {
    console.log("Vehicle engine starts");
  }
}

class Car extends Vehicle {
  honk() {
    console.log("Car honks");
  }
}

function processVehicle(vehicle: Vehicle) {
  vehicle.startEngine(); // This works
  // vehicle.honk(); // Error: 'honk' does not exist on type 'Vehicle'
}

function processCar(car: Car) {
  car.startEngine(); // Works because Car extends Vehicle
  car.honk();        // Works because 'Car' has 'honk'
}

let car: Car = new Car();
processVehicle(car); // This works because of contravariance (Car can be used as Vehicle)
processCar(car);     // This works as well because car is of type Car

// Contravariance failure if you expect specific subtype behavior in the method

When using contravariance, we need to be cautious not to access properties or methods that are specific to the subtype, as this may result in an error.

9. Reflections: This concept involves determining the type of a variable at runtime. While TypeScript primarily focuses on type checking at compile time, we can still leverage TypeScript operators to inspect types during runtime.
typeof operator : We can make use of typeof operator to find the type of variable at the runtime

const num = 23;
console.log(typeof num); // "number"

const flag = true;
console.log(typeof flag); // "boolean"

instanceof Operator: The instanceof operator can be used to check if an object is an instance of a class or a particular type.

class Vehicle {
  model: string;
  constructor(model: string) {
    this.model = model;
  }
}

const benz = new Vehicle("Mercedes-Benz");
console.log(benz instanceof Vehicle); // true

We can use third-party library to determine types at the runtime.

10.Dependency Injection: Dependency Injection is a pattern that allows you to bring code into your component without actually creating or managing it there. While it may seem like using a library, it's different because you don’t need to install or import it via a CDN or API.

At first glance, it might also seem similar to using functions for reusability, as both allow for code reuse. However, if we use functions directly in our components, it can lead to tight coupling between them. This means that any change in the function or its logic could impact every place it is used.

Dependency Injection solves this problem by decoupling the creation of dependencies from the components that use them, making the code more maintainable and testable.

Example without dependency injection

// Health-related service classes without interfaces
class MentalWellness {
  getMentalWellnessAdvice(): string {
    return "Take time to meditate and relax your mind.";
  }
}

class PhysicalWellness {
  getPhysicalWellnessAdvice(): string {
    return "Make sure to exercise daily for at least 30 minutes.";
  }
}

// HealthAdvice class directly creating instances of the services
class HealthAdvice {
  private mentalWellnessService: MentalWellness;
  private physicalWellnessService: PhysicalWellness;

  // Directly creating instances inside the class constructor
  constructor() {
    this.mentalWellnessService = new MentalWellness();
    this.physicalWellnessService = new PhysicalWellness();
  }

  // Method to get both mental and physical wellness advice
  getHealthAdvice(): string {
    return `${this.mentalWellnessService.getMentalWellnessAdvice()} Also, ${this.physicalWellnessService.getPhysicalWellnessAdvice()}`;
  }
}

// Creating an instance of HealthAdvice, which itself creates instances of the services
const healthAdvice = new HealthAdvice();

console.log(healthAdvice.getHealthAdvice());
// Output: "Take time to meditate and relax your mind. Also, Make sure to exercise daily for at least 30 minutes."

Example with Dependecy Injection

// Health-related service interfaces with "I" prefix
interface IMentalWellnessService {
  getMentalWellnessAdvice(): string;
}

interface IPhysicalWellnessService {
  getPhysicalWellnessAdvice(): string;
}

// Implementations of the services
class MentalWellness implements IMentalWellnessService {
  getMentalWellnessAdvice(): string {
    return "Take time to meditate and relax your mind.";
  }
}

class PhysicalWellness implements IPhysicalWellnessService {
  getPhysicalWellnessAdvice(): string {
    return "Make sure to exercise daily for at least 30 minutes.";
  }
}

// HealthAdvice class that depends on services via interfaces
class HealthAdvice {
  private mentalWellnessService: IMentalWellnessService;
  private physicalWellnessService: IPhysicalWellnessService;

  // Dependency injection via constructor
  constructor(
    mentalWellnessService: IMentalWellnessService,
    physicalWellnessService: IPhysicalWellnessService
  ) {
    this.mentalWellnessService = mentalWellnessService;
    this.physicalWellnessService = physicalWellnessService;
  }

  // Method to get both mental and physical wellness advice
  getHealthAdvice(): string {
    return `${this.mentalWellnessService.getMentalWellnessAdvice()} Also, ${this.physicalWellnessService.getPhysicalWellnessAdvice()}`;
  }
}

// Dependency injection
const mentalWellness: IMentalWellnessService = new MentalWellness();
const physicalWellness: IPhysicalWellnessService = new PhysicalWellness();

// Injecting services into the HealthAdvice class
const healthAdvice = new HealthAdvice(mentalWellness, physicalWellness);

console.log(healthAdvice.getHealthAdvice());
// Output: "Take time to meditate and relax your mind. Also, Make sure to exercise daily for at least 30 minutes."

In a tightly coupled scenario, if you have a stressLevel attribute in the MentalWellness class today and decide to change it to something else tomorrow, you would need to update all the places where it was used. This can lead to a lot of refactoring and maintenance challenges.

However, with dependency injection and the use of interfaces, you can avoid this problem. By passing the dependencies (such as the MentalWellness service) through the constructor, the specific implementation details (like the stressLevel attribute) are abstracted away behind the interface. This means that changes to the attribute or class do not require modifications in the dependent classes, as long as the interface remains the same. This approach ensures that the code is loosely coupled, more maintainable, and easier to test, as you’re injecting what’s needed at runtime without tightly coupling components.

Integrate AI Effortlessly: A Beginner's Guide to Using CopilotKit

Niharika Goulikar — Sun, 27 Oct 2024 15:48:39 +0000

🌟What is CopilotKit?

CopilotKit is an open-source framework that makes it easy to integrate powerful, production-ready AI Copilots into any application. With CopilotKit, you can seamlessly implement custom AI chatbots, agents, text areas, and more to enhance your product.

🟢Let's build an application in which we will learn how to integrate CopilotKit into our application:-

🌟What is this application all about?

This application uses CopilotKit to automatically generate flashcards and quizzes. Simply ask the AI-powered chatbot to create flashcards on any topic, and it will instantly generate both flashcards and a corresponding quiz. It’s a fast and efficient way to learn about any subject.

🛠 TECH STACK:

Frontend: NextJs, Tailwind CSS,shadcdn,Zustand
Backend: Next Js
Data Storage: Local Storage

📤 SETUP

Go-ahead and install these dependencies:

npm install @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime

Create a .evn file in the root level of your application and add these variables into it:

GROQ_API_KEY=<your_groq_api_key>

🚀To get your Groq API Key follow these steps:
Go to GroqCloud and generate an API key by clicking on create API Key button.

🍀 Let’s Dive into Development:

Backend: For the backend, we’ll set up an /api/copilotkit endpoint. This endpoint will handle requests from the frontend, serving data or responding as needed.This single endpoint is all you need to power your application with CopilotKit.

import {
    CopilotRuntime,
    GroqAdapter,
    copilotRuntimeNextJSAppRouterEndpoint,
} from "@copilotkit/runtime";
import { NextRequest } from "next/server";
import Groq from "groq-sdk";

const groq:Groq = new Groq({ apiKey: process.env.GROQ_API_KEY }) ;

const copilotKit = new CopilotRuntime();

const serviceAdapter = new GroqAdapter({ groq, model: "llama3-groq-8b-8192-tool-use-preview" });

export const POST = async (req: NextRequest) => {
    const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
        runtime: copilotKit,
        serviceAdapter,
        endpoint: "/api/copilotkit",
    });

    return handleRequest(req);
};

Frontend:
Now, let’s integrate CopilotKit into our application. CopilotKit provides several useful hooks, and for this tutorial, we’ll be focusing on two essential ones:

useCopilotReadable: The useCopilotReadable hook is a React hook that supplies the Copilot with app state and other relevant information. Additionally, this hook can manage hierarchical state within your application, allowing you to pass parent-child relationships to the Copilot as needed.

useCopilotReadable({
    description: 'A code snippet manager',
    value: flashcards,
  });

useCopilotAction: The useCopilotAction hook is a React hook that enables your copilot to perform actions within the app. You can use this hook to define custom actions that can be triggered by the AI in your application.

useCopilotAction({
      name: "create-flashcards-and-also-quiz-questions-for-those-flashcards",
      description: `Create a new flashcard along with corresponding quiz questions. Each flashcard should contain a term, description, topic, and relevant tags. Additionally, for each flashcard, generate quiz questions with multiple answer options. 
      The quiz questions should conform to the 'QuizQuestion' interface, where:
      - Each question contains a string 'question', an array of four  'options', and the 'correctOption' corresponding to the correct answer.
     `,
      parameters: [
        {
          name: "flashcards",
          description: "The flashcards for the given topic",
          type: "object[]", // Use "array" as the type
        },
        {
          name: "quiz",
          description: "The quiz questions for the given topic, adhering to the QuizQuestion interface",
          type: "object[]", // Use "array" for QuizQuestion[]
        },
        {
          name:"topic",
          description: "The title of the topic",
          type: "string"
        }
      ],
      handler: (args: { flashcards: Flashcard[], quiz: QuizQuestion[], topic: string }) => {
        addTopics(args);
      },
    });

To implement the chatbot, you can use the CopilotSidebar component from the @copilotkit/react-ui package. Here’s how to proceed:

<CopilotSidebar
        instructions={"You are assisting the user with creating flashcards on any topic they ask for. Break down information into concise, easy-to-remember points, and include key facts, definitions, or questions on one side, with answers or explanations on the other. Organize the information in a way that enhances memorization and recall. Add relevant tags for better categorization and future review."}
        labels={{
          title: "FlashCard Buddy - Study Assistant",
          initial: "Hey there! 👋 Ready to create some flashcards? Let me know the topic!",
        }}
      />

Putting all these components together, here’s how the complete file would look:

"use client";
import { CopilotSidebar } from '@copilotkit/react-ui';
import "@copilotkit/react-ui/styles.css";
import { useCopilotAction, useCopilotReadable } from '@copilotkit/react-core';
import useFlashCardStore from '@/lib/store/flashcardstore';
import { Flashcard, QuizQuestion } from '@/lib/store/flashcardstore';
import RecentFlashCardTopic from "@/components/FlashCardTopics";


export default function Home() {
  const flashcards = useFlashCardStore((state) => state.flashcards);
  const addFlashCard = useFlashCardStore((state) => state.addTopicContent);

  useCopilotReadable({
    description: 'A code snippet manager',
    value: flashcards,
  });

  const addTopics = (args: { flashcards: Flashcard[], quiz: QuizQuestion[] ,topic:string}) => {
    // args.flashcards.forEach((newFlashcard) => {
    //   const existingFlashcard = flashcards.find(element => 
    //     element.flashcards.some(flashcard => 
    //       flashcard.term === newFlashcard.term &&
    //       flashcard.description === newFlashcard.description &&
    //       flashcard.topic === newFlashcard.topic
    //     )
    //   );

      // If the flashcard does not exist, add it
      // if (!existingFlashcard) {
      //   addFlashCard({ flashcards: [newFlashcard], quiz: args.quiz });
      // }
      addFlashCard(args);
    };


    useCopilotAction({
      name: "create-flashcards-and-also-quiz-questions-for-those-flashcards",
      description: `Create a new flashcard along with corresponding quiz questions. Each flashcard should contain a term, description, topic, and relevant tags. Additionally, for each flashcard, generate quiz questions with multiple answer options. 
      The quiz questions should conform to the 'QuizQuestion' interface, where:
      - Each question contains a string 'question', an array of four  'options', and the 'correctOption' corresponding to the correct answer.
     `,
      parameters: [
        {
          name: "flashcards",
          description: "The flashcards for the given topic",
          type: "object[]", // Use "array" as the type
        },
        {
          name: "quiz",
          description: "The quiz questions for the given topic, adhering to the QuizQuestion interface",
          type: "object[]", // Use "array" for QuizQuestion[]
        },
        {
          name:"topic",
          description: "The title of the topic",
          type: "string"
        }
      ],
      handler: (args: { flashcards: Flashcard[], quiz: QuizQuestion[], topic: string }) => {
        addTopics(args);
      },
    });

  return (
    <>
     <RecentFlashCardTopic/>
      <CopilotSidebar
        instructions={"You are assisting the user with creating flashcards on any topic they ask for. Break down information into concise, easy-to-remember points, and include key facts, definitions, or questions on one side, with answers or explanations on the other. Organize the information in a way that enhances memorization and recall. Add relevant tags for better categorization and future review."}
        labels={{
          title: "FlashCard Buddy - Study Assistant",
          initial: "Hey there! 👋 Ready to create some flashcards? Let me know the topic!",
        }}
      />
    </>
  );
}

Additionally, we’ll need a state management library to ensure our UI updates whenever the AI takes action. You can choose any state management library, but in this tutorial, I’ll be using Zustand alongside Local Storage for data storage.This will act as a global management point for the application state.

import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';

// Interface for flashcards
interface Flashcard {
  term: string;
  description: string;
  topic: string;
  tags: string[];
}

// Interface for quiz options
interface QuizOption {
  id: number;
  text: string;
}

// Interface for a quiz question
interface QuizQuestion {
  id:number;
  question: string;
  options: string[]; // Array of 4 options
  correct: string; // ID of the correct option

}

// Interface for the topic's JSON object
interface TopicContent {
  id: number;
  topic:string;
  flashcards: Flashcard[];
  quiz: QuizQuestion[];
}

// Store interface
interface FlashcardStore {
  flashcards: TopicContent[];
  addTopicContent: (topicContent: Omit<TopicContent, 'id'>) => void;
  removeTopicContent: (id: number) => void;
}

const useFlashcardStore = create<FlashcardStore>()(
  persist(
    (set) => ({
      flashcards: [],
      addTopicContent: (newTopicContent) =>
        set((state) => ({
          flashcards: [...state.flashcards, { ...newTopicContent, id: Date.now() }],
        })),

      removeTopicContent: (id) =>
        set((state) => ({
          flashcards: state.flashcards.filter((topicContent) => topicContent.id !== id),
        })),
    }),
    {
      name: 'flashcard-storage', // Key to store flashcards in local storage
      storage: createJSONStorage(() => localStorage), // Use local storage for persistence
    }
  )
);
export default useFlashcardStore;
export type { Flashcard, QuizQuestion,TopicContent,QuizOption };

Final Application Screenshots:

This is the project that I'm referencing to:
https://github.com/Niharika0104/learn-using-flash-cards

Here a live demonstration of the project:
https://learn-using-flash-cards.vercel.app/

I hope you enjoyed this short tutorial on CopilotKit.Stay tuned for more such interesting and concise tutorials!

Hope to see you all in the next one,

Niharika.

Web Scraping Made Easy: Parse Any HTML Page with Puppeteer

Niharika Goulikar — Thu, 05 Sep 2024 13:51:32 +0000

Imagine building an e-commerce platform where we can easily fetch product data in real-time from major stores like eBay, Amazon, and Flipkart. Sure, there’s Shopify and similar services, but let's be honest—it can feel a bit cumbersome to buy a subscription just for a project. So, I thought, why not scrape these sites and store the products directly in our database? It would be an efficient and cost-effective way to get products for our e-commerce projects.

What is Web Scraping?

Web scraping involves extracting data from websites by parsing the HTML of web pages to read and collect content. It often involves automating a browser or sending HTTP requests to the site, and then analyzing the HTML structure to retrieve specific pieces of information like text, links, or images.Puppeteer is one library used to scrape the websites.

🟢What is Puppeteer?

Puppeteer is a Node.js library.It provides a high-level API for controlling headless Chrome or Chromium browsers.Headless Chrome is a version of chrome that runs everything without an UI(perfect for running things in the background).

We can automate various tasks using puppeteer,such as:

Web Scraping: Extracting content from websites involves interacting with the page's HTML and JavaScript. We typically retrieve the content by targeting the CSS selectors.
PDF Generation: Converting web pages into PDFs programmatically is ideal when you want to directly generate a PDF from a web page, rather than taking a screenshot and then converting the screenshot to a PDF. (P.S. Apologies if you already have workarounds for this).
Automated Testing: Running tests on web pages by simulating user actions like clicking buttons, filling out forms, and taking screenshots. This eliminates the tedious process of manually going through long forms to ensure everything is in place.

🌟How to get started with puppetter?

Firstly we have to install the library,go ahead and do this.
Using npm:

npm i puppeteer # Downloads compatible Chrome during installation.
npm i puppeteer-core # Alternatively, install as a library, without downloading Chrome.

Using yarn:

yarn add puppeteer // Downloads compatible Chrome during installation.
yarn add puppeteer-core // Alternatively, install as a library, without downloading Chrome.

Using pnpm:

pnpm add puppeteer # Downloads compatible Chrome during installation.
pnpm add puppeteer-core # Alternatively, install as a library, without downloading Chrome.

🛠 Example to demonstrate the use of puppeteer

Here is an example of how to scrape a website. (P.S. I used this code to retrieve products from the Myntra website for my e-commerce project.)

const puppeteer = require("puppeteer");
const CategorySchema = require("./models/Category");

// Define the scrape function as a named async function
const scrape = async () => {
    // Launch a new browser instance
    const browser = await puppeteer.launch({ headless: false });

    // Open a new page
    const page = await browser.newPage();

    // Navigate to the target URL and wait until the DOM is fully loaded
    await page.goto('https://www.myntra.com/mens-sport-wear?rawQuery=mens%20sport%20wear', { waitUntil: 'domcontentloaded' });

    // Wait for additional time to ensure all content is loaded
    await new Promise((resolve) => setTimeout(resolve, 25000));

    // Extract product details from the page
    const items = await page.evaluate(() => {
        // Select all product elements
        const elements = document.querySelectorAll('.product-base');
        const elementsArray = Array.from(elements);

        // Map each element to an object with the desired properties
        const results = elementsArray.map((element) => {
            const image = element.querySelector(".product-imageSliderContainer img")?.getAttribute("src");
            return {
                image: image ?? null,
                brand: element.querySelector(".product-brand")?.textContent,
                title: element.querySelector(".product-product")?.textContent,
                discountPrice: element.querySelector(".product-price .product-discountedPrice")?.textContent,
                actualPrice: element.querySelector(".product-price .product-strike")?.textContent,
                discountPercentage: element.querySelector(".product-price .product-discountPercentage")?.textContent?.split(' ')[0]?.slice(1, -1),
                total: 20, // Placeholder value, adjust as needed
                available: 10, // Placeholder value, adjust as needed
                ratings: Math.round((Math.random() * 5) * 10) / 10 // Random rating for demonstration
            };
        });

        return results; // Return the list of product details
    });

    // Close the browser
    await browser.close();

    // Prepare the data for saving
    const data = {
        category: "mens-sport-wear",
        subcategory: "Mens",
        list: items
    };

    // Create a new Category document and save it to the database
    // Since we want to store product information in our e-commerce store, we use a schema and save it to the database.
    // If you don't need to save the data, you can omit this step.
    const category = new CategorySchema(data);
    console.log(category);
    await category.save();

    // Return the scraped items
    return items;
};

// Export the scrape function as the default export
module.exports = scrape;

🌄Explanation:

In this code, we are using Puppeteer to scrape product data from a website. After extracting the details, we create a schema (CategorySchema) to structure and save this data into our database. This step is particularly useful if we want to integrate the scraped products into our e-commerce store. If storing the data in a database is not required, you can omit the schema-related code.
Before scraping, it's important to understand the HTML structure of the page and identify which CSS selectors contain the content you want to extract.
In my case, I used the relevant CSS selectors identified on the Myntra website to extract the content I was targeting.

DESIGN PATTERNS : A Deep Dive into Common Design Patterns

Niharika Goulikar — Wed, 04 Sep 2024 16:59:55 +0000

What is a design pattern?

Design patterns are solutions to complex problems. Design patterns are all about crafting your classes and interfaces in a way that solves a particular design problem. Usually, while designing a system, we encounter some issues, and for those problems, we have a set of design patterns. Design patterns are generally templates that involve classes, interfaces, and the relationships between those classes.

Types of design patterns:

Creational design patterns:

These types of patterns deal with the creation of objects in a way that is compatible with the given situation.
At the creational level, we can determine how specific parts of our systems can be created independently or composed together, ensuring flexibility and compatibility.
The list of design patterns that fall under this category are:

Singleton: In this design pattern, we just have only one instance and that instance will be used throughout our application.

Essentials of singleton design pattern:

private constructor: Marking constructor as private is very crucial, as we want to ensure that only one instance of the class is created.
Private Static Instance: We use private access modifier,because we want to ensure that we only have one instance of the object in the class memory.
Public Static Method (Accessor): This is a global access point to the single instance. This method basically creates the instance if it doesn't exist else return the same instance if it already exists.

Example of Singleton design pattern

public class Singleton {
    // Private static instance of the class
    private static Singleton instance;
    private int count;

    // Private constructor to prevent instantiation
    private Singleton() {
        // initialization code
    }

    // Public static method to provide access to the instance
    public static synchronized Singleton getInstance() {
        if (instance == null) {
            instance = new Singleton();
        }
        return instance;
    }

    // Example method
    public void getCount() {
        System.out.println("The value of count is: " + count);
    }

    public void increaseCount() {
        count++;
    }

    public void decreaseCount() {
        count--;
    }
}

public class Main {
    public static void main(String[] args) {
        // Get the single instance of Singleton
        Singleton singleton = Singleton.getInstance();
        singleton.increaseCount();
        singleton.getCount();  // Output: The value of count is: 1

        // Get the same instance of Singleton
        Singleton anotherSingleton = Singleton.getInstance();
        anotherSingleton.decreaseCount();
        anotherSingleton.getCount();  // Output: The value of count is: 0

        // Both singleton and anotherSingleton refer to the same instance
    }
}

Builder: In the Builder pattern, we define a way to create an object step-by-step. This pattern also provides flexibility, allowing different versions of the same object to be created using the same construction process.

Key essentials of the builder pattern:

Product: It is the complex object that is being constructed.
Builder Interface: Defines the methods to create different parts of the Product. These methods typically return the builder object itself to allow method chaining.
Concrete Builder:Implements the Builder interface and provides specific implementations for creating parts of the Product.

Example of builder pattern:
This example shows how to use the Builder Design Pattern to make a chocolate spread bread by adding ingredients step by step.

// Product Class
class Bread {
    private String bread;
    private String spread;
    private String chiaSeeds;
    private String pumpkinSeeds;

    public void setBread(String bread) {
        this.bread = bread;
    }

    public void setSpread(String spread) {
        this.spread = spread;
    }

    public void setChiaSeeds(String chiaSeeds) {
        this.chiaSeeds = chiaSeeds;
    }

    public void setPumpkinSeeds(String pumpkinSeeds) {
        this.pumpkinSeeds = pumpkinSeeds;
    }

    @Override
    public String toString() {
        return "Bread with " + spread + ", topped with " + chiaSeeds + " and " + pumpkinSeeds;
    }
}

// Builder Interface
interface BreadBuilder {
    BreadBuilder addBread();
    BreadBuilder addChocolateSpread();
    BreadBuilder addChiaSeeds();
    BreadBuilder addPumpkinSeeds();
    Bread build();
}

// Concrete Builder
class ChocolateBreadBuilder implements BreadBuilder {
    private Bread bread = new Bread();

    @Override
    public BreadBuilder addBread() {
        bread.setBread("Whole grain bread");
        return this;
    }

    @Override
    public BreadBuilder addChocolateSpread() {
        bread.setSpread("Chocolate spread");
        return this;
    }

    @Override
    public BreadBuilder addChiaSeeds() {
        bread.setChiaSeeds("Chia seeds");
        return this;
    }

    @Override
    public BreadBuilder addPumpkinSeeds() {
        bread.setPumpkinSeeds("Pumpkin seeds");
        return this;
    }

    @Override
    public Bread build() {
        return bread;
    }
}

// Client Code
public class Main {
    public static void main(String[] args) {
        // Create a builder and build the chocolate spread bread
        BreadBuilder builder = new ChocolateBreadBuilder();
        Bread myBread = builder.addBread()
                               .addChocolateSpread()
                               .addChiaSeeds()
                               .addPumpkinSeeds()
                               .build();

        // Output the result
        System.out.println(myBread);
    }
}

Factory Method: In the Factory Method pattern, we define a way to create objects, but we allow subclasses to decide the specific type of object that will be created.

Key essentials of factory pattern:

Product Interface: Defines the common interface for all products.
Concrete Products: Implement the Product interface.
Creator: Declares the factory method.
Concrete Creators: Implement the factory method to return different concrete products.

// Product Interface
interface Juice {
    void serve();
}

// Concrete Product 1
class OrangeJuice implements Juice {
    @Override
    public void serve() {
        System.out.println("Serving Orange Juice.");
    }
}

// Concrete Product 2
class MangoJuice implements Juice {
    @Override
    public void serve() {
        System.out.println("Serving Mango Juice.");
    }
}

// Creator Abstract Class
abstract class JuiceFactory {
    // Factory method
    public abstract Juice createJuice();
}

// Concrete Creator 1
class OrangeJuiceFactory extends JuiceFactory {
    @Override
    public Juice createJuice() {
        return new OrangeJuice();
    }
}

// Concrete Creator 2
class MangoJuiceFactory extends JuiceFactory {
    @Override
    public Juice createJuice() {
        return new MangoJuice();
    }
}

// Client Code
public class Main {
    public static void main(String[] args) {
        // Create an Orange Juice using its factory
        JuiceFactory orangeJuiceFactory = new OrangeJuiceFactory();
        Juice orangeJuice = orangeJuiceFactory.createJuice();
        orangeJuice.serve();  // Output: Serving Orange Juice.

        // Create a Mango Juice using its factory
        JuiceFactory mangoJuiceFactory = new MangoJuiceFactory();
        Juice mangoJuice = mangoJuiceFactory.createJuice();
        mangoJuice.serve();  // Output: Serving Mango Juice.
    }
}

Structural design patterns

This design patterns mainly focuses on how classes and objects are composed to form larger structures. They focus on the organization and relationships between objects and classes, simplifying the structure, enhancing flexibility, and promoting maintainability.

Adapter pattern: In this pattern, we allow objects with incompatible interfaces to work together. It acts as a bridge between two incompatible interfaces, enabling them to communicate without altering their existing code.

Key Essentials of the adapter pattern:

Target Interface: It is an interface that will solve the problem (bridging the gap between the incompatible interfaces).
Client: The class or code that interacts with the target interface.
Adaptee: This is the interface which is not compatible with the current client requirements.
Adapter: Implements the target interface and contains an instance of the adaptee. It translates requests from the target interface to the adaptee’s interface, making them compatible.

// Target Interface (Menu)
interface Menu {
    void orderDish(String dish);
}

// Adaptee (Chef)
class Chef {
    public void prepareDish(String dishName) {
        System.out.println("Chef is preparing " + dishName + ".");
    }
}

// Adapter (Waiter)
class Waiter implements Menu {
    private Chef chef;

    public Waiter(Chef chef) {
        this.chef = chef;
    }

    @Override
    public void orderDish(String dish) {
        chef.prepareDish(dish);
    }
}

// Client Code
public class Restaurant {
    public static void main(String[] args) {
        Chef chef = new Chef();
        Menu waiter = new Waiter(chef);

        // Customer places an order via the waiter
        waiter.orderDish("Spaghetti Carbonara");  // Output: Chef is preparing Spaghetti Carbonara.
    }
}

Facade pattern: Simplifies the interaction with a complex system by providing a unified interface (facade). Instead of directly calling several different methods across various objects, the client interacts with the facade, which internally manages those operations.

Key essentials of the facade design pattern:

Facade: It is an interface that wraps all the complex subsystem interfaces and delegates the complex tasks to the subsystems that actually perform the work.
Subsystem Classes: These are the classes that acutally perform the work.

An example of facade design pattern:
The example illustrates the Facade Pattern which simplifies the process of washing, drying, and pressing clothes. It hides the complexity of interacting with multiple subsystems behind a single, unified interface.

// Subsystem Classes
class WashingMachine {
    public void wash() {
        System.out.println("Washing clothes.");
    }
}

class Dryer {
    public void dry() {
        System.out.println("Drying clothes.");
    }
}

class Iron {
    public void press() {
        System.out.println("Pressing clothes.");
    }
}

// Facade Class
class LaundryFacade {
    private WashingMachine washingMachine;
    private Dryer dryer;
    private Iron iron;

    public LaundryFacade(WashingMachine washingMachine, Dryer dryer, Iron iron) {
        this.washingMachine = washingMachine;
        this.dryer = dryer;
        this.iron = iron;
    }

    public void doLaundry() {
        System.out.println("Starting the laundry process...");
        washingMachine.wash();
        dryer.dry();
        iron.press();
        System.out.println("Laundry process complete.");
    }
}

// Client Code
public class Main {
    public static void main(String[] args) {
        WashingMachine washingMachine = new WashingMachine();
        Dryer dryer = new Dryer();
        Iron iron = new Iron();

        LaundryFacade laundryFacade = new LaundryFacade(washingMachine, dryer, iron);

        // Use the facade to do the laundry
        laundryFacade.doLaundry();
    }
}

Behavioral design patterns

The patterns that fall under this category mainly deals with communication between objects and how they interact with each other.

Iterator pattern: In the Iterator Pattern, we define a way to sequentially access elements of a collection without needing to use conventional methods, such as for loops or direct indexing. Instead, the pattern provides a standard interface (usually methods like next() and hasNext()) to traverse the collection. This approach abstracts the iteration process, allowing the client to navigate through the collection without needing to understand its internal structure or use traditional iteration methods.

Key essentials of this pattern are:

Iterator Interface: We define all the methods such as next(), hasNext(), and currentItem().These are used to traverse the collection.
Concrete Iterator: This is the concrete implementation of the iterator interface.
Aggregate Interface: In this interface,we define methods to create iterators.All the methods returns an instance of the Iterator.
Concrete Aggregate: It's just a concrete implementation of the aggregate interface.

Example of iterator pattern:
This example demostrates a simple usecase of iterators a employees object using iterator pattern.

// Iterator Interface
interface Iterator {
    boolean hasNext();
    Object next();
}

// Aggregate Interface 
interface Aggregate {
    Iterator createIterator();
}

// Employee Class
class Employee {
    public String Name;
    public int Age;
    public String Department;
    public int EmployeeId;

    public Employee(String name, int age, String department, int employeeId) {
        this.Name = name;
        this.Age = age;
        this.Department = department;
        this.EmployeeId = employeeId;
    }
}

// Concrete Aggregate
class EmployeeCollection implements Aggregate {
    private Employee[] employees;

    public EmployeeCollection(Employee[] employees) {
        this.employees = employees;
    }

    @Override
    public Iterator createIterator() {
        return new EmployeeIterator(this.employees);
    }
}

// Concrete Iterator
class EmployeeIterator implements Iterator {
    private Employee[] employees;
    private int position = 0;

    public EmployeeIterator(Employee[] employees) {
        this.employees = employees;
    }

    @Override
    public boolean hasNext() {
        return position < employees.length;
    }

    @Override
    public Object next() {
        return hasNext() ? employees[position++].Name : null;
    }
}

// Client Code
public class Main {
    public static void main(String[] args) {
        // Creating employee array
        Employee[] employees = {
            new Employee("John", 28, "Engineering", 101),
            new Employee("Jane", 32, "Marketing", 102),
            new Employee("Tom", 25, "Sales", 103)
        };

        // Creating employee collection and iterator
        EmployeeCollection employeeCollection = new EmployeeCollection(employees);
        Iterator iterator = employeeCollection.createIterator();

        // Iterating through employees
        while (iterator.hasNext()) {
            System.out.println(iterator.next());
        }
    }
}

Strategy pattern: In this pattern we define a family of algorithms, and at the runtime we choose the algorithm.Instead of implementing a single algorithm directly, the code receives runtime instructions on which algorithm to use from a family of algorithms. This pattern allows the algorithm to vary independently from the clients that use it.

Key essentials of this pattern are:

1.Strategy Interface: Defines the common interface for all supported algorithms.
2.Concrete Strategies: Implement the Strategy interface with specific algorithms.
3.Context: Uses a Strategy to execute the algorithm.

Example of strategy pattern:
Imagine we are building an encoding system where we may need to use different encoding algorithms depending on the situation. We will demonstrate this system using the Strategy Pattern.

// Strategy Interface
interface EncoderStrategy {
    void encode(String string);
}

// Concrete Strategy for Base64 Encoding
class Base64Encoder implements EncoderStrategy {
    @Override
    public void encode(String string) {
        // Implement Base64 encoding logic here
        System.out.println("This method uses Base64 encoding algorithm for: " + string);
    }
}

// Concrete Strategy for MD5 Encoding
class MD5Encoder implements EncoderStrategy {
    @Override
    public void encode(String string) {
        // Implement MD5 encoding logic here
        System.out.println("This method uses MD5 encoding algorithm for: " + string);
    }
}

// Context Class
class EncoderContext {
    private EncoderStrategy strategy;

    public void setEncoderMethod(EncoderStrategy strategy) {
        this.strategy = strategy;
    }

    public void encode(String string) {
        strategy.encode(string);
    }
}

// Usage
public class Main {
    public static void main(String[] args) {
        EncoderContext context = new EncoderContext();

        // Use Base64 encoding method
        context.setEncoderMethod(new Base64Encoder());
        context.encode("A34937ifdsuhfweiur");

        // Use MD5 encoding method
        context.setEncoderMethod(new MD5Encoder());
        context.encode("89743297dfhksdhWOJO");
    }
}

Explanation:

Firstly, we define the interface for the
Next, we create concrete implementations of the interfaces that we have defined.
Finally, we use these implementations to observe how a change in the subject also updates its dependents.

Observer pattern: behavioral design pattern that establishes a one-to-many dependency between objects. This means that when one object (the subject) changes its state, all its dependent objects (observers) are notified and updated automatically. This pattern is particularly useful for implementing distributed event-handling systems in event-driven software.

Key essentials of this pattern are:

Subject: It is an object which holds the state and informs the observers when it updates it's state.
Observer: An interface or abstract class that defines the update method, which is called when the subject’s state changes.
Concrete Subject: A class that implements the Subject interface and maintains the state of interest to observers.
Concrete Observer: A class that implements the Observer interface and updates its state to match the subject’s state.

Example of observer pattern:
In a stock trading application, the stock ticker acts as the subject. Whenever the price of a stock is updated, various observers—such as investors and regulatory bodies—are notified of the change. This allows them to respond to price fluctuations in real-time.

import java.util.ArrayList;
import java.util.List;

// Observer interface
interface Observer {
    void update(String stockSymbol, double stockPrice);
}

// Subject interface
interface Subject {
    void register(Observer o);
    void remove(Observer o);
    void notify();
}

// Concrete Subject
class Stock implements Subject {
    private List<Observer> observers;
    private String stockSymbol;
    private double stockPrice;

    public Stock() {
        observers = new ArrayList<>();
    }

    public void setStock(String stockSymbol, double stockPrice) {
        this.stockSymbol = stockSymbol;
        this.stockPrice = stockPrice;
        notify();
    }

    @Override
    public void register(Observer o) {
        observers.add(o);
    }

    @Override
    public void remove(Observer o) {
        observers.remove(o);
    }

    @Override
    public void notify() {
        for (Observer observer : observers) {
            observer.update(stockSymbol, stockPrice);
        }
    }
}

// Concrete Observer
class StockTrader implements Observer {
    private String traderName;

    public StockTrader(String traderName) {
        this.traderName = traderName;
    }

    @Override
    public void update(String stockSymbol, double stockPrice) {
        System.out.println("Trader " + traderName + " notified. Stock: " + stockSymbol + " is now $" + stockPrice);
    }
}

// Usage
public class Main {
    public static void main(String[] args) {
        Stock stock = new Stock();

        StockTrader trader1 = new StockTrader("Niharika");
        StockTrader trader2 = new StockTrader("Goulikar");

        stock.register(trader1);
        stock.register(trader2);

        stock.setStock("Niha", 9500.00);
        stock.setStock("Rika", 2800.00);
    }
}

Explanation:

Firstly, we define the interface for the subject which is responsible for sending updates. Similarly, we also define an interface for the observer, which is responsible for receiving updates.
Next, we create concrete implementations of the interfaces that we have defined.
Finally, we use these implementations to observe how a change in the subject also updates its dependents.

MINDSDB: Integrate AI/ML models into your applications

Niharika Goulikar — Wed, 28 Aug 2024 11:13:38 +0000

🌟What is MindsDB?
MindsDB is a platform that simplifies model management and integrates existing AI models into applications with ease.
It covers various aspects of model management including creation, training, fine-tuning, and version control.We can also automate tasks in our AI workflows with MindsDB Jobs, or define and execute specific events with Triggers.

🟢Let's build an application in which we will learn how to integrate mindsDB into our application:-

🌟What is this application all about?
This application leverages MindsDB to deliver intelligent chat assistance and automatically categorize each post into specific categories. Users can view all posts, comment on them, like their favorites, and create new posts. The app uses token-based authentication to ensure secure access and interactions. Additionally, users have the ability to report posts, helping to maintain content quality and compliance with community standards.

🛠 TECH STACK:

Frontend: NextJs, Tailwind CSS
Backend: Next Js
Database: Postgres DB

📤 SETUP

Create a .evn file in the root level of your application and add these variables into it:

MINDSDB_KEY=<your api key>
MINDS_URL=<minds url>
BASE_URL=<application url>

🚀To get Api key from MindsDB follow these steps:
1.Go to https://mdb.ai/minds and create a new account if you don't have an existing account on MindsDB.
2.Go to the ApiKeys section and generate a new ApiKey and now you are good to go.

BASE_URL is your application url which host the frontend (in our case since we are using nextJS, both frontend and backend will be hosted on the same url) and this is just to prevent cors error.You can bypass it by incorporating some workarounds.
MINDS_URL We will get this URL from the MindsDB Docker instance that we will start shortly.

☘ Since we are dealing with integration of mindsDB into our application. There are many ways to integrate mindsDB into our application.Few of them are:

SQL APIs
REST APIs
Docker In this example we are going to use MindsDB Docker image to create models. To create mindsDB docker instance run this command:

docker run --name mindsdb_container -p 47334:47334 mindsdb/mindsdb

🚀Go the editor router of that docker container url and you will see this(P.S: the image attached has models predefined but you need to create models on your own)

🚀 How to create models?
Creating a model in MindsDB is as easy as writing a prompt(because all you have to do is just write a prompt 😆).

But before creating model we have to create an engine which will run our models.

CREATE ML_ENGINE engine_name
FROM handler_name
USING
  api_key_name = 'your-api-key-value';

Here we are going to use apiKey that we just generated.
🍀Creating models

CREATE MODEL model_name
PREDICT column_name
USING
    engine = 'engine_name',
    prompt_template = 'Your prompt here: {{variable}}';

Here,

column_name this is the variable which will contain the response for your input.
{{variable}} this is your input.
'engine_name' replace this the engine that you create.

🍀Writing prompt:-
We can write prompts to accomplish almost any task, though there are some limitations.
With one such prompt being present in the image below:

Now that we have defined our models,we need use these models in our application.We will create Api endpoints, so that our frontend can talk to these models
🍀Example of one such endpoint:

import client from "@/db";
import { NextRequest, NextResponse } from "next/server";

interface Body {
  query: string;
}

export async function POST(req: NextRequest) {
  try {
    // Parse request body
    const request: Body = await req.json();

    const response = await fetch(
 `${process.env.MINDS_URL}/api/projects/mindsdb/models/blog_helper/predict`,
      {
        method: "POST",
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${process.env.MINDSDB_KEY}`  // Replace with your actual API key
        },
        body: JSON.stringify({
          data: [{ query: request.query }]
        })
      }
    );

    const newPost = await response.json();

    return NextResponse.json({ response: newPost, status: 200 });
  } catch (error: any) {
    console.error("Error processing request:", error);
    return NextResponse.json({ message: "Internal server error", status: 500 });
  }
}

Now our frontend can talk to these models we have created.

This is the project that I'm referencing to:
BLOGGO

Here a video demonstration of the project:
Loom video link

I hope you enjoyed this short tutorial on MindsDB.Stay tuned for more such interesting and concise tutorials!

Hope to see you all in the next one,

Niharika.

Kubernetes: A beginner's guide

Niharika Goulikar — Wed, 14 Aug 2024 09:51:09 +0000

Kubernetes is an orchestration tool. It is often used alongside docker. Kubernetes is used when we want to scale our containers.

Why do we need Kubernetes when we have docker?

While Docker allows us to create and manage containers, it has certain limitations. Kubernetes addresses these limitations by providing more advanced features for orchestrating and managing containerized applications at scale.Some of them are:

Automated Scaling: Kubernetes can automatically scale applications up or down based on traffic or resource usage. Docker alone doesn’t have native support for this level of dynamic scaling.
Self-Healing: If any one of the containers fails,kubernetes will restart the container.Docker doesn't provide out of the box support for this feature.
Automated Rollouts and Rollbacks: Kubernetes automatically rolls back to the previous stable version if the current update causes any issues in the application.
Persistant Storage management: Among the many advanced Storage management features it offers, one such capability is volume snapshots, which allow us to capture the state of volumes at specific points in time, making them useful for backups and data recovery.
Load Balancing: As your application scales across multiple containers, Kubernetes automatically balances the traffic between these containers, ensuring that no single container is overwhelmed.

Kubernetes is all about the "game of clusters".Orchestration is largely about how the clusters are managed.It's all about how and where the containers run across the clusters.

What is cluster?

Cluster is a bunch of machines(physical or virtual) that work together to run your containerized applications.The cluster consists of nodes and control pane.

There are two types of nodes:

Master node: The master node is responsible for scaling, updating, and assigning workloads to worker nodes.It is responsible for distributing the incoming workload evenly across the available worker nodes.
Worker nodes: It's node on which our application containers run.

Control Plane
It consists of the below mentioned components.

API Server: The API server exposes the Kubernetes API and is the entry point for all commands and queries.We use kubectl which is a command line tool to communicate with the API server.
Controller Manager: Ensures that the desired state of the cluster is maintained by running controllers that manage different aspects of the cluster (e.g., replication, node status).
Scheduler: Assigns newly created Pods to worker nodes based on resource availability and other constraints.
etcd: A distributed key-value store that holds the cluster's state and configuration data.
At times, when we think of the server for a highly scaled application, it is actually the Kubernetes cluster that makes our system scalable. This cluster has the capability to automatically scale applications up or down, distribute workloads evenly, ensure high availability, perform self-healing by replacing failed containers, and manage seamless updates and rollbacks.
Kubectl is a command line tool used to communicate with master node and manage all the administrative tasks.
Kube-proxy is a network proxy used to run network rules on each node.It can also be configured to apply specific set of network rules on the nodes.
Container Runtime is responsible for running containers.It manages life cycle of the containers (creating them,stopping them,pulling images etc).

Each node has multiple pods inside them.Each pod has multiple containers running inside them.

What is pod?
A Pod is the smallest deployable unit in Kubernetes and is a logical group of one or more containers.
These containers share the same network namespace, IP address, and storage volumes, which allows them to communicate with each other efficiently.

These pods are accessed via services.
Service:It acts as a consistent access point (with a stable IP address and port) that can route traffic to the correct Pods, even if the underlying Pods are dynamically created or destroyed.

Some of the key components related to node are:

kubelet:kubelet interacts with both the container runtime as well as the Node. It is the process responsible for starting a pod with a container inside.
Container runtime: A container runtime is needed to run the application containers running on pods inside a pod.
Kube-proxy: It is a process which is responsible for forwarding the request from services to pods.

All the requests or admistrative tasks happens in the control plane.
The Kubernetes API server is the central management entity in a Kubernetes cluster. It acts as the single point of communication for the entire cluster, exposing the Kubernetes API. All components, such as kubectl, other control plane components, and even the nodes, communicate with the API server to manage and control the cluster.

kube API Server receives requests from kubectl,CI/CD tools and some SDKs wanting to access the kube API server

In summary, Kubernetes is a container orchestration platform that enables the scaling of containerized applications, ensures self-healing of containers, manages rollouts and rollbacks, and provides persistent storage management, including volume snapshots. It helps build a robust and reliable system by automating these critical aspects of container management.

DOCKER: A Beginner's Guide

Niharika Goulikar — Mon, 12 Aug 2024 12:38:05 +0000

Docker is a containerization platform. It helps in packaging our application and its dependencies into a container that can be used across multiple environments.

Why do we need docker?

The way software applications and their dependencies are installed on one machine can differ from how they're installed on other machines. To ensure consistent behavior across different platforms, containerization tools (docker being one such) are used.

Installing docker on your machine-

Windows/Mac: Download Docker Desktop from the Official website and follow the installation instructions.
Linux: Use the package manager for your distribution (e.g., apt, yum, dnf) to install Docker.
For Ubuntu:

sudo apt-get update 
sudo apt-get install docker-ce docker-ce-cli containerd.io

What is a docker image?

Docker Image is an executable package of software that includes everything needed to run an application. This image informs how a container should instantiate, determining which software components will run and how.

Building your docker image:

docker build -t apricot:1.0 .

The general command syntax is as follows:
docker build -t < imagename >:< tag-version > .

. refers to the current directory.If the dockerfile is in other directory, then use the below command:

docker build -t nginx /path/to/folder

We can get the list of local images present on our machine using this command:

docker images

In Docker, if you don't specify a tag name when pulling or building an image, it defaults to the latest tag. For example, if you run docker pull ubuntu, it will pull the image tagged as latest from the Docker registry.

What is docker registry?

The Docker registry, such as Docker Hub, is where images for various types of applications are stored. In simple terms, a Docker registry is analogous to GitHub, but for Docker images. Just like code repositories on GitHub, Docker Hub maintains a version history of your application's images, allowing you to track and manage different versions of your images.

To work with images, we need them locally on our machine.
Pulling image from docker hub:

docker pull mongo

This command will pull the MongoDB image with the latest tag from Docker Hub. If you want to pull a specific version of MongoDB, you can specify the tag like this:

docker pull mongo:<tag>

What is a container?

A container is a running instance of an image. A Docker container is a lightweight, standalone virtual environment that packages application code along with all the dependencies needed to run the application. This ensures that the application runs consistently and reliably across different computing environments.

docker run -d -p 9090:80 --name plum apricot:1.0

Here,

-d flag corresponds to image running in detached mode.
-p flag for the port number, the format is local-port: container-port
--name for the container name, webserver in our case

To get all the containers that are currently running. It shows information such as container ID, image name, command, creation time, status, ports, and container names.

docker ps

To see all the container including the ones that are stopped use this command.

docker ps -a

Starting a container:

docker start <container-name>

Replace <container-name> with the name or ID of the container you want to start.
Stopping a container:

docker stop <container-name>

Replace <container-name> with the name or ID of the container you want to stop.

Docker Volumes

Volumes are used for data persistence in Docker. Without volumes, any data stored within a container is lost when the container is stopped or removed. Unlike a virtual machine, which has its own file system and memory, a Docker container's file system is ephemeral. To ensure that data is retained across container restarts or re-creations, Docker uses volumes. These volumes are stored on the host machine and can be mounted into one or more containers, allowing data to persist independently of the container's lifecycle.

Use this command to create a volume:

docker volume create <volume-name>

Replace <volume-name> with your desired volume name

Use this command in order to explore the file system of the container:

docker exec -it <container-name> /bin/bash

This command lets you access your container and see what's happening inside a container to some extent.

Use this command in order to mount your volume on container

docker run -d -v <volume-name>:<container-path> --name <container-name> <image-name>

Here,

<volume-name> corresponds to the name of the volume.
<container-path> corresponds to the file path inside the container where the data will be stored.
<container-name> corresponds to the name of the container.
<image-name> corresponds to the name of image that is locally present on our machine.

Docker Network

Docker networks are used when we want containers to communicate with each other. In simple terms, containers under the same network can communicate with each other.

Use this command to create a network:

docker network create <network-name>

Use this command to run a container and assign that container to a network

docker run -d --name <container-name> --network <network-name> <image-name>

Here,

<network-name> corresponds to the name of the network.
<container-name> corresponds to the name of the container.
<image-name> corresponds to the name of image that is locally present on our machine.