DEV Community: Andisi (Roseland) Ambuku

How to Integrate GraphQL in Next JS using Apollo Client

Andisi (Roseland) Ambuku — Wed, 13 Nov 2024 08:36:59 +0000

Introduction to GraphQL

GraphQL is an API query language that fetches data based only on what the client application needs. It solves the problem of clients fetching unnecessary data thus making APIs more scalable. The precision in data fetching is the power of GraphQL. Find out more on the official GraphQL website.

In this tutorial, we will learn how to work with Apollo Client, a JavaScript state management library that assists you manage GraphQL both remotely and locally. We shall learn to use it on the client side and server side in Next JS apps.

Setting Up the Project

Prerequisites

Node.js 18.18 or later.
Knowledge of GraphQL and how it works. Find out more on the official GraphQL website.
Next JS 14 or later.

Type this command in your terminal to create a new project.

npx create-next-app@latest

When installing, you will see the following prompts. Ensure you choose the App Router.
What is your project named? graphql-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`?  No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*

Installing Dependencies

As mentioned, we shall learn data-fetching in server and client components. Apollo Client provides an experimental library to facilitate this. Install the following dependencies.

npm install @apollo/client @apollo/experimental-nextjs-app-support

Server Components

We shall begin with data fetching from a GraphQL API in server components.

Creating the Apollo Client Instance

Firstly, we will create an Apollo Client instance that we shall use throughout our app.

// ./ApolloClient
import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client";
import { registerApolloClient } from "@apollo/experimental-nextjs-app-support";

export const { getClient } = registerApolloClient(() => {
  return new ApolloClient({
    cache: new InMemoryCache({ addTypename: false }),
    link: new HttpLink({
      uri: "https://rickandmortyapi.com/graphql",
    }),

  });
});

Let’s break it down step by step:

registerApolloClient: This function takes a callback which initializes and returns an instance of Apollo Client. This is specifically for Next JS since it allows use with the framework’s server-side rendering (SSR).
Apollo Client Configuration: The configuration for Apollo Client is done inside the callback function passed to registerApolloClient.

cache: new InMemoryCache({ addTypename: false }),

Initializes an InMemoryCache for data storage and management of GraphQL queries.
addTypename: false: ensures the response from the query does not have the _typename in the result. It makes it easier to display the result in the front end.

link: new HttpLink({
 uri: “https://rickandmortyapi.com/graphql",
 }),

Establishes an HTTP link that Apollo Client uses to send queries to the endpoint we specify.

Create this file in the root of your Next JS app folder so that the instance is available to all pages in the app router.

Creating the query

Next, we shall create the query that fetches the data we wish to display in our Next JS app. Create a folder at the project’s root called queries where the queries will be stored.

Create a file called characterQuery and paste the following code.

import { gql } from "@apollo/client";


export const characterQuery = gql`
  query {
    characters {
      results {
        name
        status
        species
        image
        origin {
          name
        }
        location {
          name
        }
      }
    }
  }
`;

The code defines the character query which requests the characters from the endpoint with specific fields with data about the characters.

The data from the query is rendered in the component below. Let us discuss what the code does.

import { getClient } from "./ApolloClient";
import Image from 'next/image'
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { characterQuery } from "@/queries/characterQuery";
import { Character, CharacterQueryResponse } from "@/types/types";



export default async function Home() {
  const { data } = await getClient().query<CharacterQueryResponse>({ query: characterQuery });

  return (
    <div className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {data.characters.results.map((character:Character, index:number) =>  (
          <Card key={index} className="max-w-sm mx-auto my-4">
            <CardHeader className="relative">
              <Image src={character.image} width={300} height={300} alt={character.name} />
              <Button className="absolute right-2 top-2">{character.status}</Button>
              <CardTitle>{character.name}</CardTitle>
            </CardHeader>
            <CardContent>
              <p>{character.species}</p>
              <p>Origin: {character.origin.name}</p>
              <p>Location: {character.location.name}</p>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  );
}

We begin by fetching the data.

const { data } = await getClient().query<CharacterQueryResponse>({ query: characterQuery });

getClient().query({ query: characterQuery }) calls the Apollo Client instance’s query method passing in characterQuery to fetch character data from the API.
The data is rendered in the form of cards. Feel free to play around with the styling.

Client Components

This data fetching method applies to client components, in the event you wish to use state or context depending on your use case.

We begin by creating a provider for Apollo that passes the client to the hooks.

// ./apollo-wrapper.tsx

"use client";

import { ApolloLink, HttpLink } from "@apollo/client";
import {
  ApolloClient,
  ApolloNextAppProvider,
  InMemoryCache,
  SSRMultipartLink,
} from "@apollo/experimental-nextjs-app-support";


function makeClient() {
  const httpLink = new HttpLink({
    uri: "https://rickandmortyapi.com/graphql",
  });

  return new ApolloClient({
    cache: new InMemoryCache(),
    link:
      typeof window === "undefined"
        ? ApolloLink.from([
            // in a SSR environment, if you use multipart features like
            // @defer, you need to decide how to handle these.
            // This strips all interfaces with a `@defer` directive from your queries.
            new SSRMultipartLink({
              stripDefer: true,
            }),
            httpLink,
          ])
        : httpLink,
  });
}

export function ApolloWrapper({ children }: React.PropsWithChildren) {
  return (
    <ApolloNextAppProvider makeClient={makeClient}>
      {children}
    </ApolloNextAppProvider>
  );
}

Let’s break it down step by step:

We create an HTTP link that Apollo Client uses to send queries to the endpoint we specify
Then we define a function called makeClient which creates an Apollo Client instance for SSR and client environments.

function makeClient() {
  const httpLink = new HttpLink({
    uri: "https://rickandmortyapi.com/graphql",
  });

  return new ApolloClient({
    cache: new InMemoryCache(),
    link:
      typeof window === "undefined"
        ? ApolloLink.from([
            // in a SSR environment, if you use multipart features like
            // @defer, you need to decide how to handle these.
            // This strips all interfaces with a `@defer` directive from your queries.
            new SSRMultipartLink({
              stripDefer: true,
            }),
            httpLink,
          ])
        : httpLink,
  });
}

SSRMultipartLink: A link specifically designed for handling multipart responses in SSR.
stripDefer: true: Strips interfaces with @defer directives from queries.
The @defer Directive, when enabled, allows portions of a query to load separately for faster page rendering. Stripping it for SSR simplifies processing, especially since SSR environments may not handle @defer the same way as the client.
The link configuration has a condition for SSR and client environments where the link is used directly in client environments.

export function ApolloWrapper({ children }: React.PropsWithChildren) {
  return (
    <ApolloNextAppProvider makeClient={makeClient}>
      {children}
    </ApolloNextAppProvider>
  );
}

In the layout file, we shall add the Apollo Wrapper.

// ./layout

import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
import { ApolloWrapper } from "./apollo-wrapper";

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Rick & Morty App",
  description: "GraphQL Demo app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <ApolloWrapper>
      <body className={inter.className}>{children}</body>
      </ApolloWrapper>
    </html>
  );
}

We then use the Apollo Wrapper we created above to wrap the body of the content which ensures that all pages have Apollo Client access.

// ./page.tsx

'use client'

import { Character, CharacterQueryResponse } from "@/types/types";
import Image from 'next/image'
import {  useSuspenseQuery } from '@apollo/client';
import { characterQuery } from '@/queries/characterQuery';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';

export default function Home() {

  const { data } = useSuspenseQuery<CharacterQueryResponse>(characterQuery);

  return(
    <div className="flex min-h-screen flex-col items-center justify-between p-24">
          <div className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {data.characters.results.map((character:Character, index:number) =>  (
          <Card key={index} className="max-w-sm mx-auto my-4">
            <CardHeader className="relative">
              <Image src={character.image} width={300} height={300} alt={character.name} />
              <Button className="absolute right-2 top-2">{character.status}</Button>
              <CardTitle>{character.name}</CardTitle>
            </CardHeader>
            <CardContent>
              <p>{character.species}</p>
              <p>Origin: {character.origin.name}</p>
              <p>Location: {character.location.name}</p>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
    </div>
  )
}

useSuspenseQuery allows for streaming, as it does in SSR rendering. Here we pass in characterQuery to fetch character data from the API.

const { data } = useSuspenseQuery<CharacterQueryResponse>(characterQuery);

Conclusion

This article discusses integrating GraphQL in Next JS using Apollo Client and GraphQL concepts related to front-end development. The project is available here.
If you wish to discuss the topic further, contact me on Linkedin.

Thank you for reading! Until next time, may the code be with you.

References

How To Create a Chart From a Dynamic Dataset in Next JS Using Chart.js

Andisi (Roseland) Ambuku — Fri, 05 Jan 2024 14:12:36 +0000

A chart is defined as a visual representation of data, and it is important in breaking down data in a way that is simple to understand and interpret. There are various use cases for visualizations in apps e.g. ecommerce dashboards and cryptocurrency dashboards.

In this tutorial, we shall learn how to create a line chart in Next JS using Chart JS. We shall build on this project that we created here.

Prerequisites

In this tutorial we shall use the following:

Node JS installed in your machine.
Next 13 and above.
The documentation for the Coin Gecko API is available here. Be sure to refer to the documentation whenever we use an endpoint.
Tailwind CSS for styling our app.

Getting Started

Chart JS is a great choice for creating charts as it has multiple visualizations. There are different integrations for the JS frameworks, and we shall use react-chart-js-2 library for Next JS.

Installing Dependencies

We shall install the dependencies by running the following command.

npm install --save chart.js react-chartjs-2

Market Chart Component

We shall create a component to handle the fetching and creation of the chart.

In the Components folder, create a folder called MarketChart.tsx.

Have the following imports at the top of your file.

"use client";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  Tooltip,
  PointElement,
  LineElement,
} from "chart.js";
import { useEffect, useState } from "react";
import { Line } from "react-chartjs-2";

// Register ChartJS components using ChartJS.register
ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Tooltip
);

It is imperative to register the correct elements for the chart you are creating, refer to the documentation for the elements. The ones placed in the code above are for a line chart.

Next, we proceed to fetching the data required to create the chart.

We shall create a spinner to be shown while data fetching process takes place.

  if (!chartData || !chartData.prices) {
    return (
      <div className="flex items-center justify-center h-screen">
        <div className="animate-spin rounded-full border-4 border-solid border-current border-r-transparent h-12 w-12"></div>
      </div>
    );
  }

Next, we shall have the logic to create the data structure that Chart.js will use to display the chart along with the properties such as the label, border color, border width, and point radius.

  const { prices } = chartData;

  const data = {
    labels: prices.map((entry: any) => new Date(entry[0]).toLocaleDateString()),
    datasets: [
      {
        label: "Price (USD)",
        data: prices.map((entry: any) => entry[1].toFixed(2)),
        borderColor: "orange",
        borderWidth: 2,
        pointRadius: 4,
      },
    ],
  };

Finally, we render the line chart by passing in the data attribute in the Line component from react-chartjs-2.

  return (
    <div>
      <Line data={data} />
    </div>
  );

The Market Chart component will be as shown below.

"use client";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  Tooltip,
  PointElement,
  LineElement,
} from "chart.js";
import { useEffect, useState } from "react";
import { Line } from "react-chartjs-2";

// Register ChartJS components using ChartJS.register
ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Tooltip
);

interface LineProps {
  id: string;
}

const MarketChart: React.FC<LineProps> = ({ id }) => {
  const [chartData, setChartData] = useState<any>(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(
          `https://api.coingecko.com/api/v3/coins/${id}/market_chart?vs_currency=usd&days=30&precision=2&interval=daily`
        );
        const data = await response.json();
        console.log("chartData:", data);
        setChartData(data);
      } catch (error) {
        console.log(error);
      }
    };
    fetchData();
  }, [id]);

  if (!chartData || !chartData.prices) {
    return (
      <div className="flex items-center justify-center h-screen">
        <div className="animate-spin rounded-full border-4 border-solid border-current border-r-transparent h-12 w-12"></div>
      </div>
    );
  }
  const { prices } = chartData;

  const data = {
    labels: prices.map((entry: any) => new Date(entry[0]).toLocaleDateString()),
    datasets: [
      {
        label: "Price (USD)",
        data: prices.map((entry: any) => entry[1].toFixed(2)),
        borderColor: "orange",
        borderWidth: 2,
        pointRadius: 4,
      },
    ],
  };

  return (
    <div>
      <Line data={data} />
    </div>
  );
};
export default MarketChart;

Coin Details Component

We shall proceed to plug the Market Chart component we created above to the Coin Details component which will render the respective charts for the coin selected.

We create a div below the last element of the page and add the Market Chart component.

        <div className="py-5">
         <MarketChart id={details.id}/>
        </div>

We then pass the id of the current coin to allow for dynamic fetching of the market chart.

The whole component will look like this.

import { CoinDetails } from "@/types/coinDetails";
import Image from "next/image";
import alt from "@/assets/alt coin.jpg";
import MarketChart from "./MarketChart";

export async function CoinPage({ promise }: { promise: Promise<CoinDetails> }) {
  const details = await promise;

  const content = (
    <div className="p-5 text-gray-700" key={details.id}>
      <div className="flex flex-col justify-center">
        <p className="py-1 px-2 w-24 bg-orange-500 text-white rounded-lg inline-block">
          Rank #{details.market_cap_rank.toLocaleString()}
        </p>
        <div className="flex items-center flex-wrap">
          <Image
            src={details.image.small || alt}
            alt="coin image"
            width={30}
            height={30}
            className="mr-2"
          />
          <h2 className="py-2 text-2xl text-black font-bold">
            {details.name}
            <span className="px-2 text-base font-light text-neutral-400">
              {details.symbol}
            </span>
          </h2>
        </div>
        <p className="py-3 text-xl text-black font-bold">
          ${details.market_data.current_price.usd.toLocaleString()}
        </p>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <ul className="py-1">
            <li>
              <span className="font-semibold py-2 mr-2">Market Cap:</span> $
              {details.market_data.market_cap.usd.toLocaleString()}
            </li>
            <li>
              <span className="font-semibold py-2 mr-2">
                Circulating Supply:
              </span>{" "}
              ${details.market_data.circulating_supply.toLocaleString()}
            </li>
            <li>
              <span className="font-semibold py-2 mr-2">
                Fully Diluted Valuation:
              </span>{" "}
              $
              {details.market_data.fully_diluted_valuation.usd.toLocaleString()}
            </li>
            <li>
              <span className="font-semibold py-2 mr-2">
                Market Cap Change (24h):
              </span>{" "}
              {details.market_data.market_cap_change_percentage_24h.toFixed(1)}%
            </li>
          </ul>
          <ul className="py-1">
            <li>
              <span className="font-semibold py-2 mr-2">Maximum Supply:</span> $
              {details.market_data.max_supply?.toLocaleString() || "N/A"}
            </li>
            <li>
              <span className="font-semibold py-2 mr-2">
                Price Change % (24h):
              </span>{" "}
              {details.market_data.price_change_percentage_24h.toFixed(1)}%
            </li>
            <li>
              <span className="font-semibold py-2 mr-2">Total Supply:</span> $
              {details.market_data.total_supply.toLocaleString()}
            </li>
            <li>
              <span className="font-semibold py-2 mr-2">Total Volume:</span> $
              {details.market_data.total_volume.usd.toLocaleString()}
            </li>
          </ul>
        </div>
        <div className="py-3">
          <h3 className="text-xl font-bold ">Information</h3>
          <ul>

            <li className="py-1">
              <span className=" mr-2">
                <a
                  href={details.links.homepage[0]}
                  className="hover:underline"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  Website: {details.name}.org
                </a>
              </span>{" "}
            </li>
          </ul>
        </div>
        <div className="py-5">
         <MarketChart id={details.id}/>
        </div>
      </div>
    </div>
  );

  return content;
}

Check out the live demo and see the charts in action here.

Conclusion

The project is available here. If you wish to contribute, feel free to create a pull request.
To overcome some challenges such as rate limiting and if you wish to use more features of the Coin Gecko API, use my code CGANDISI500 for $500 of on your API subscription. Sign up here to redeem the discount.

Thank you for reading! Until next time, may the code be with you.

Creating a Cryptocurrency App with Next JS and Coin Gecko API

Andisi (Roseland) Ambuku — Thu, 02 Nov 2023 16:07:28 +0000

Cryptocurrency has rapidly changed the financial systems across the globe and its adoption along with blockchain has skyrocketed.
In this tutorial, we shall create a cryptocurrency website using Next JS and the Coin gecko API which will display real-time cryptocurrency coin information.

Prerequisites

In this tutorial we shall use the following:

Node JS installed in your machine.
Next 13
The documentation for the Coin Gecko API is available here. Be sure to refer to the documentation whenever we use an endpoint.
Tailwind CSS for styling our app.

Setting up Next JS app

We shall use the automatic installation method to set up the app. It is a quick and simple method.
We begin by typing the following command in the terminal.

npx create-next-app@latest

Answer the prompts that follow appropriately.

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias? No / Yes
What import alias would you like configured? @/*

Run the app with the following command to ensure set up was successful.

npm run dev

We shall use SWR to fetch and cache data in our application. SWR (Stale-while-revalidate) is a library used to fetch data similar to fetch API but with more features such as caching. To install it type the following command in the terminal.

npm install swr

Building the Next JS App

Before we begin building the app, we shall create a function responsible for making HTTP requests and handling responses. This function is used in conjunction with useSWR for data fetching.
In the root of your app, create a folder called lib and create a file called fetcher.tsx and have the following code.

async function fetcher (url:string){
    const res = await fetch(url)
    if(!res.ok){
      throw new Error('Network response failed')
    }
    return res.json()
}
export default fetcher

We shall begin by creating the layout components of our app which are the navbar and footer.

Footer

The footer shall contain attribution to the Coin Gecko API as we shall use the free plan for the API.

Create a folder at the root of your app called components. This is because Next 13 has app routing functionality meaning that any folder within the app folder is treated as a route. For the sake of clarity, we can create the components folder at the root and import the components in the required files as per need.

Create a footer.tsx file and type in this code.

export default function Footer(){
return(
    <footer
        className="bg-neutral-100 text-center lg:text-left">
        <div className="p-4 text-center text-black">
            Powered by
        <a
        className="text-black"
        href="https://www.coingecko.com/"
        > CoinGecko API</a>
        </div>
    </footer>
    )
}

This code consists of a function called Footer() that creates a footer with the "Powered by CoinGecko API" and a link to the CoinGecko API for attribution purposes.

Navbar

In the components folder, create a file called navbar.tsx and type in this code.

import SearchBar from "./SearchBar";

export default function Navbar(){
    return(
      <nav
  className="relative flex w-full flex-wrap items-center justify-between bg-[#FBFBFB] py-2 text-neutral-500 shadow-lg hover:text-[#f59e0b] focus:text-[#f59e0b]  lg:py-4">
  <div className="flex w-full flex-wrap items-center justify-between px-3">
    <a
      className="ml-2 text-2xl text-[#f59e0b] "
      href="#"
      >KRYPTO APP</a>
    <SearchBar/>
  </div>
  </nav>
    )
}

This code consists of a function called Navbar() that creates a navbar at the top of the screen with the name of the app to the left and a search bar on the right which shall be used to search for a coin.

Search bar

Since we are using Typescript, we shall have the types of the search feature in a separate folder. In the root directory create a folder called types.
Search Types
Create a file called coinMarkets.d.ts and add the following code. The types are from the Coin Gecko API /search endpoint response. Be sure to check out the documentation here.

export type CoinSearch = {

    "id": string,
    "name": string,
    "api_symbol":string,
    "symbol": string,
    "market_cap_rank": number,
    "thumb": string,
    "large": string
}
export type SearchResponse = {
    categories: [],
    coins: CoinSearch[],
    ico:[],
    nfts:[]
}

CoinSearch is a type that describes the structure of an object representing a coin in a search context with properties that contain coin information. SearchResponse is a type that represents a response structure from a search operation with categories, coins, ico and nft properties. These are from the search endpoint.
The types are from the Coin Gecko API endpoint response. Be sure to check out the documentation here.

Search bar component

In the components folder, create a file called searchbar.tsx and type in this code.

"use client"

import { CoinSearch, SearchResponse } from '@/types/coinMarkets';
import React, { useState } from 'react';
import Image from 'next/image'
import alt from '@/assets/alt coin.jpg'
import Link from 'next/link';

export default function SearchBar() {
  const [query, setQuery] = useState('');
  const [searchResults, setSearchResults] = useState<SearchResponse | undefined>();

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setQuery(e.target.value);
    if (e.target.value.trim() === '') {
      setSearchResults(undefined);
    }
  };

  const handleSearchClick = async () => {
    try {
      if (query.trim() !== '') {
        const apiUrl = `https://api.coingecko.com/api/v3/search?query=${encodeURIComponent(query)}`;
        const response = await fetch(apiUrl);

        if (!response.ok) {
          throw new Error(`Network response was not ok (status: ${response.status})`);
        }

        // Check if the response is valid JSON
        const contentType = response.headers.get('content-type');
        if (contentType && contentType.includes('application/json')) {
          const searchData: SearchResponse = await response.json();
          setSearchResults(searchData);
        } else {
          throw new Error('Response is not valid JSON');
        }
      }
    } catch (error) {
      console.error('Error during search:', error);
      // Handle errors, e.g., display an error message to the user
    }
  };

  const handleResultItemClick = () =>{
    setSearchResults(undefined)
  }

  return (
    <div className="ml-5 flex w-[30%] items-center justify-between relative">
      <input
        type="search"
        className="relative m-0 block w-[1px] min-w-0 flex-auto  border border-solid border-[#f59e0b] bg-transparent bg-clip-padding px-3 py-[0.25rem] font-normal leading-[1.6]  outline-none transition duration-200 ease-in-out"
        placeholder="Search"
        aria-label="Search"
        aria-describedby="button-addon2"
        value={query}
        onChange={handleInputChange}
      />

      <button
        type="button"
        aria-label="Search"
        className="input-group-text flex items-center  px-3 py-2 text-center font-normal text-white bg-[#f59e0b]"
        id="basic-addon2"
        onClick={handleSearchClick}
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 20 20"
          fill="currentColor"
          className="h-5 w-5"
        >
          <path
            fillRule="evenodd"
            d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
            clipRule="evenodd"
          />
        </svg>
      </button>
      {/* Display search results */}
      {searchResults?.coins != null && searchResults?.coins.length> 0 && (
        <div style={{position:'absolute', top: '45px',height:'250px',overflow:'scroll',background:'white',zIndex:2, width:'365px'}} className="">
          <ul>
            {searchResults?.coins.map((result: CoinSearch) => (
              <li key={result.id} onClick={handleResultItemClick} className="flex items-center p-3">
                <div className="p-1"><Image src={result.thumb || alt} alt={"coin image"} width={30} height={30}/></div>
                <div className="p-1 text-neutral-500"><Link href={`/coins/${result.id}`}>{result.name}</Link></div>
                <div className="ml-auto text-neutral-500 text-xs">#{result.market_cap_rank}</div>
               </li>
            ))}
          </ul>
        </div>
       )}
    </div>
  );
}

This code defines a component, Search Bar, which serves as a search input field for querying the Coin Gecko API and displaying search results based on user input.
The component maintains state using the useState hook for query (user input for search) and searchResults (results fetched from the API).

handleInputChange function updates the query state based on the input changes and resets searchResults if the input is empty.
handleSearchClick function triggers an API call to fetch data based on the input query. It updates searchResults with the fetched data if the response is successful and in JSON format.
handleResultItemClick function clears the searchResults to hide the search result list upon clicking an item.

Import the Search bar component to the Navbar.

Root Layout

In the root layout we define the layout structure for web pages in the application, including global font settings, metadata configuration, and the inclusion of common components like Navbar and Footer in a consistent manner for all pages. Open the layout.tsx file and have this code.

import './globals.css'
import type { Metadata } from 'next'
import { Montserrat } from 'next/font/google'
import Navbar from '@/components/Navbar'
import Footer from '@/components/Footer'

const montserrat = Montserrat({
  subsets: ['latin'],
  weight: '400'
})

export const metadata: Metadata = {
  title: 'Krypto App',
  description: 'A cryptocurrency market analysis app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">

      <body className={montserrat.className}>
        <Navbar/>
        {children}
        <Footer/>
        </body>
    </html>
  )
}

Font Configuration:
const montserrat = Montserrat({ subsets: ['latin'], weight: '400' }): Configures the Montserrat font by specifying its subsets (e.g., Latin characters) and weight (e.g., '400' for regular).

Metadata:
export const metadata: Metadata = { ... }: Defines metadata properties for the page, such as title and description. These properties are used for search engine optimization (SEO) and other metadata-related purposes.

RootLayout Component:

export default function RootLayout({ children }: { children: React.ReactNode }) { ... }

: Defines the RootLayout component responsible for creating a layout structure that wraps around the content (children) of individual pages.
It uses an structure to set the language to English (lang="en").
The

element is assigned a class based on the configured Montserrat font using montserrat.className.
Inside the body, it includes the Navbar component, the children (actual content of the page), and the Footer component.

Homepage

We shall move to creating the home page which is what our users will see when they land on our page.
We begin by creating the Coin market component which will contain the coins and real-time information about them in a tabular format.
Coin market types
In the file called coinMarkets.d.ts and add the following code. The types are from the Coin Gecko API /coins/list endpoint response. Be sure to check out the documentation here.

export type CoinMarkets ={
    'id': string,
    "symbol": string,
    "name": string,
    "image": string,
    "current_price": number,
    "market_cap": number,
    "market_cap_rank": number,
    "fully_diluted_valuation": number,
    "total_volume": number,
    "high_24h": number,
    "low_24h": number,
    "price_change_24h": number,
    "price_change_percentage_24h": number,
    "market_cap_change_24h": number,
    "market_cap_change_percentage_24h": number,
    "circulating_supply": number,
    "total_supply": number,
    "max_supply": number,
    "ath": number,
    "ath_change_percentage": number,
    "ath_date": string,
    "atl": number,
    "atl_change_percentage": number,
    "atl_date": string,
    "roi": null,
    "last_updated": string
}

Coin markets component

To create the component, create a coinmarkets.tsx file in the components folder and have the following code in the file.

import Image from 'next/image'
import Link from 'next/link'
import alt from '@/assets/alt coin.jpg'
import { CoinMarkets } from '@/types/coinMarkets'

interface Coins {
    id: string,
    symbol: string,
    name: string,
    image: string,
    current_price: number,
    market_cap_rank: number,
    market_cap: number,
    total_volume: number,
    price_change_percentage_24h: number,

}

interface Props {
    coin: CoinMarkets[]
}

export default function Coins({ coin }: Props){
    return(
        <div className='p-6 flex flex-col overflow-x-auto'>
            <div className="sm:-mx-6 lg:-mx-8">
            <div className="inline-block min-w-full py-2 sm:px-6 lg:px-8">
            <div className="overflow-x-auto"></div>
                <table className="min-w-full text-left text-sm font-light">
                    <thead className="border-b font-medium dark:border-neutral-200">
                        <tr>
                            <th className="px-6 py-4">#</th>
                            <th className="px-6 py-4"></th>
                            <th className="px-6 py-4">Coin</th>
                            <th className="px-6 py-4">Price</th>
                            <th className="px-6 py-4">Market Cap</th>
                            <th className="px-6 py-4">Total Volume</th>
                            <th className="px-6 py-4">24h </th>
                        </tr>
                    </thead>
                    <tbody>
                        {coin.map((coin) =>(
                            <tr className="border-b dark:border-neutral-200" key={coin.id} >
                                <td className="whitespace-nowrap px-6 py-4">{coin.market_cap_rank}</td>
                                <td className="whitespace-nowrap px-6 py-4"><Image src={coin.image || alt} alt={"coin image"} width={30} height={30}/></td>
                                <td className="whitespace-nowrap px-6 py-4"><Link href={`/coins/${coin.id}`}>{coin.name}{' '}
                                <span className="text-neutral-500">{coin.symbol}</span></Link></td>
                                <td className="whitespace-nowrap px-6 py-4">$ {coin.current_price.toLocaleString()}</td>
                                <td className="whitespace-nowrap px-6 py-4">$ {coin.market_cap.toLocaleString()}</td>
                                <td className="whitespace-nowrap px-6 py-4">$ {coin.total_volume.toLocaleString()}</td>
                                <td className="whitespace-nowrap px-6 py-4">{(coin.price_change_percentage_24h).toFixed(1)}%</td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
            </div>
        </div>
    )
}

Component Structure:
The component (Coins) receives props as an array of coin objects, each adhering to the structure defined by the CoinMarkets interface.
It renders a table containing information about the coins.
For each coin in the coin array, it generates a table row (

) containing specific details in different table data cells ().

Table Structure:
The table has a header row () and a body section (

).
The header row contains table headers for various details like rank, coin image, name, price, market cap, total volume, and 24-hour price change percentage.
The body section iterates over each coin object from the props and generates a table row for each coin.

Data Rendering:
Each table row displays specific information about a particular coin.
Information like market cap rank, coin image, name (linked to the detailed coin page), price, market cap, total volume, and 24-hour price change percentage are shown in individual columns within the table row.
The coin's image is displayed using the Image component from Next.js, with a default image provided in case the specific coin image is unavailable.
The coin's name is rendered as a link using the Link component, allowing users to navigate to a detailed page about the coin.
Various coin data such as market cap, price, and volumes are displayed, with appropriate formatting (e.g., numbers are formatted using toLocaleString() for better readability).

UseData Hook

To fetch the data, we need for the homepage we shall create a hook called useData.
In the root of your app, create a folder called hooks and create a file called useData.tsx and have the following code.

import useSWR from "swr"
import fetcher from '@/lib/fetcher'

const apiUrl = 'https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false&locale=en'
export const useData = () =>{
    const { data, error,isLoading } = useSWR(apiUrl, fetcher)

    return{
        data, 
        error,
        isLoading
    }
}

export const useData = () => { ... }: Defines a custom hook called useData responsible for fetching data from the specified API endpoint using useSWR.
const { data, error, isLoading } = useSWR(apiUrl, fetcher): Uses the useSWR hook to fetch data from the specified apiUrl using the provided fetcher function. This hook manages the data, any potential errors, and a loading state.

data: Contains the fetched data from the API if the request is successful.
error: Represents any potential error that occurs during the data fetching process.
isLoading: Indicates whether the data is currently being loaded, i.e., a loading state while the request is in progress.

return { data, error, isLoading }: The useData hook returns an object containing the fetched data, any error encountered during the fetch, and the loading state isLoading.

At the page.tsx file in the app folder have the following code.

"use client"
import Coins from "@/components/CoinMarkets"
import {useData} from '@/hooks/useData'

export default function Home() {
  const { data, error, isLoading } = useData()
  if(error){ 
    return ( 
    <div className="text-center h-screen text-2xl p-10 text-[#f59e0b]">Oops! <br></br> Error loading data</div>
    ) 
  }
  if(isLoading){ 
  return (  
  <div className="p-10 flex flex-col overflow-x-auto">
  <div className="sm:-mx-6 lg:-mx-8">
    <div className="inline-block min-w-full py-2 sm:px-6 lg:px-8">
      <div className="overflow-x-auto">
        <table className="min-w-full text-left text-sm font-light animate-pulse">
          {/* Skeleton loading rows */}
          <thead className="border-b font-medium dark:border-neutral-200 animate-pulse">
            <tr>
              <th className="px-6 py-4"></th>
              <th className="px-6 py-4"></th>
              <th className="px-6 py-4"></th>
              <th className="px-6 py-4"></th>
              <th className="px-6 py-4"></th>
              <th className="px-6 py-4"></th>
              <th className="px-6 py-4"></th>
            </tr>
          </thead>
          <tbody>
            {/* Render skeleton loading rows */}
            {[1, 2, 3, 4, 5,6,7,8,9,10,11].map((_, index) => (
              <tr
                className="border-b dark:border-neutral-200 animate-pulse "
                key={index}
              >
                <td className="whitespace-nowrap text-neutral-300 px-6 py-4">Loading</td>
                <td className="whitespace-nowrap text-neutral-300 px-6 py-4">Loading</td>
                <td className="whitespace-nowrap text-neutral-300 px-1 py-4">Loading</td>
                <td className="whitespace-nowrap text-neutral-300 px-6 py-4">Loading</td>
                <td className="whitespace-nowrap text-neutral-300 px-6 py-4">Loading</td>
                <td className="whitespace-nowrap text-neutral-300 px-6 py-4">Loading</td>
                <td className="whitespace-nowrap text-neutral-300 px-6 py-4">Loading</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>) }

  return (
    <div>
      <Coins coin={data} />
    </div>
  )
}

The Home component in this code is responsible for managing the loading, error, and success states of cryptocurrency market data.
It uses conditional rendering to handle different states (error, loading, and successful data fetch) and provides visual feedback to the user accordingly.
During the loading phase, it displays a loading skeleton to maintain the layout structure and give the user a visual indication that content is being fetched.
When the data is successfully loaded, it renders the Coins component to display the fetched cryptocurrency market information in a tabular format.

Coin Details Page

We shall move to creating the coin details page which is what our users will see when they click on a single coin or search for a coin.
We begin by creating the Coin details component.
Coin details type
In the file called coinDetails.d.ts and add the following code. The types are from the Coin Gecko API endpoint response /coins/{id}. Be sure to check out the documentation here.

export type CoinDetails = {
    "id": string,
    "symbol": string,
    "name": string,
    "asset_platform_id": null,
    "platforms": {
      "": string
    },
    "detail_platforms": {
      "": {
        "decimal_place": null,
        "contract_address": string
      }
    },
    "block_time_in_minutes": number,
    "hashing_algorithm": string,
    "categories": [
        string,
        string,
        string
    ],
    "preview_listing": boolean,
    "public_notice": null,
    "additional_notices": [],
    "description": {
      "en": string
    },
    "links": {
      "homepage": [
        string,
        string,
        string
      ],
      "blockchain_site": [
        string,
        string,
        string,
        string,
        string,
        "",
        "",
        "",
        "",
        ""
      ],
      "official_forum_url": [
        string,
        "",
        ""
      ],

      "twitter_screen_name": string,
      "facebook_username": string,
      "bitcointalk_thread_identifier": null,
      "telegram_channel_identifier": string,
      "subreddit_url": string,
      "repos_url": {
        "github": [
            string,
            string
        ],
        "bitbucket": []
      }
    },
    "image": {
      "thumb": string,
      "small": string,
      "large": string
    },
    "country_origin": string,
    "genesis_date": string,
    "sentiment_votes_up_percentage": number,
    "sentiment_votes_down_percentage": number,
    "watchlist_portfolio_users": number,
    "market_cap_rank": number,
    "coingecko_rank": number,
    "coingecko_score": number,
    "developer_score": number,
    "community_score": number,
    "liquidity_score": number,
    "public_interest_score": number,
    "market_data": {
      "current_price": {
        "usd": number,
      },
      "total_value_locked": null,
      "mcap_to_tvl_ratio": null,
      "fdv_to_tvl_ratio": null,
      "roi": null,
      "market_cap": {
        "usd": number,
      },
      "market_cap_rank": number,
      "fully_diluted_valuation": {
        "usd": number,
      },
      "market_cap_fdv_ratio": number,
      "total_volume": {
        "usd": number,
      },
      "price_change_24h": number,
      "price_change_percentage_24h": number,
      "price_change_percentage_7d": number,
      "price_change_percentage_14d": number,
      "price_change_percentage_30d": number,
      "price_change_percentage_60d": number,
      "price_change_percentage_200d": number,
      "price_change_percentage_1y": number,
      "market_cap_change_24h": number,
      "market_cap_change_percentage_24h": number,
      "total_supply": number,
      "max_supply": number,
      "circulating_supply": number,
      "sparkline_7d": {
        "price": number []
      },
      "last_updated": string
    },
    "public_interest_stats": {
      "alexa_rank":number,
      "bing_matches": null
    },
    "status_updates": [],
    "last_updated": string
  }

useDetails hook
To fetch the data, we need for the coin details page we shall create a hook called useDetails.
In the root of your app, create a folder called hooks and create a file called useDetails.tsx and have the following code.

import useSWR from "swr"
import fetcher from '@/lib/fetcher'

export const useCoinDetails = (id: string) =>{

    const apiUrl = `https://api.coingecko.com/api/v3/coins/${id}?localization=false&tickers=false&market_data=true&community_data=false&developer_data=false&sparkline=true`

    const {  isLoading, error, data  } = useSWR(apiUrl, fetcher)

    return{
        isLoading,
        error,
        data,
    }
}

export const useCoinDetails = (id: string) => { ... }: Defines the useCoinDetails hook, which receives an id parameter (the cryptocurrency's identifier) to fetch details for the specified cryptocurrency.
It reassigns the apiUrl variable, dynamically constructing the API endpoint by including the provided id in the URL to fetch data for a specific cryptocurrency.

It uses useSWR to fetch data from the dynamically generated apiUrl using the provided fetcher function.
Manages the loading state (isLoading), any potential errors (error), and the fetched data (data).

return { isLoading, error, data }: The useCoinDetails hook returns an object containing the loading state, any errors encountered during fetching, and the fetched data for the specified cryptocurrency.

Coin details component

Next in the components folder, create a coindetails.tsx file and have the following code.

import { CoinDetails} from "@/types/coinDetails"
import Image from 'next/image'
import alt from '@/assets/alt coin.jpg'

export async function CoinPage({ promise }: { promise: Promise<CoinDetails> }) {
    const details = await promise

    const content = (
        <div className=" p-8 text-gray-700" key={details.id}>
          <div className="flex flex-col lg:flex-row justify-between">
            <div className="mb-4 lg:mb-0 basis-2/3">
              <p className="py-1 px-2 bg-orange-500 text-white rounded-lg inline-block">Rank # {details.market_cap_rank.toLocaleString()}</p>
              <div className="flex items-center">
              <Image src={details.image.small || alt} alt="coin image" width={30} height={30} className="mr-2"></Image>
              <h2 className="py-2 text-2xl text-black font-bold">{details.name}<span className=" px-2 text-base font-light text-neutral-400">{details.symbol}</span></h2>
              </div>
              <p className="py-3 text-xl text-black font-bold">${details.market_data.current_price.usd.toLocaleString()}</p>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <ul className="py-1">
                  <li><span className="font-semibold py-2 mr-5">Market Cap:</span> ${details.market_data.market_cap.usd.toLocaleString()}</li>
                  <li><span className="font-semibold py-2 mr-5">Circulating Supply:</span> ${details.market_data.circulating_supply.toLocaleString()}</li>
                  <li><span className="font-semibold py-2 mr-5">Fully Diluted Valuation:</span> ${details.market_data.fully_diluted_valuation.usd.toLocaleString()}</li>
                  <li><span className="font-semibold py-2 mr-5">Market Cap Change (24h):</span> {details.market_data.market_cap_change_percentage_24h.toFixed(1)}%</li>
                </ul>
                <ul className="py-1">
                  <li><span className="font-semibold py-2 mr-5">Maximum Supply:</span> ${details.market_data.max_supply?.toLocaleString() || 'N/A'}</li>
                  <li><span className="font-semibold py-2 mr-5">Price Change Percentage (24h):</span> {details.market_data.price_change_percentage_24h.toFixed(1)}%</li>
                  <li><span className="font-semibold py-2 mr-5">Total Supply:</span> ${details.market_data.total_supply.toLocaleString()}</li>
                  <li><span className="font-semibold py-2 mr-5">Total Volume:</span> ${details.market_data.total_volume.usd.toLocaleString()}</li>
                </ul>
              </div>
            </div>

            <div className="basis-1/3">
              <h3 className="text-xl font-bold ">Information</h3>
              <ul className="py-3">
                <li className="py-1"><span className="font-semibold mr-5">Liquidity Score:</span> {details.liquidity_score}%</li>
                <li className="py-1"><span className="font-semibold mr-5">Community Score:</span> {details.community_score}%</li>
                <li className="py-1"><span className="font-semibold mr-5"><a href={details.links.homepage[0]} className=" hover:underline" target="_blank" rel="noopener noreferrer">
                  Website: {details.name}.org </a></span> </li>
                <li className="py-1"><span className="font-semibold mr-5"> Public Interest Score:</span> {details.public_interest_score.toFixed(1)}%</li>
              </ul>
            </div>
          </div>
          <div className="py-5 ">
            <h3 className="text-xl font-bold py-3">Description</h3>
            <p className="">{details.description.en}</p>
          </div>
        </div>
      );

      return content;

}

The CoinPage function is marked as async, signifying that it will use await to resolve the given promise.
It takes an object as a parameter with a promise property of type Promise<CoinDetails>. This promise resolves to fetch the details of a specific cryptocurrency.

Inside the function:
It awaits the resolution of the promise provided as the promise argument.
After resolving the promise, it generates content to display the details of the specific cryptocurrency.
The content is structured using HTML and Tailwind CSS classes for styling and layout.

*Content Display: *

The function creates a detailed display of various information about the cryptocurrency, organizing the content into different sections.
It uses the resolved details object to access and display specific details, such as name, symbol, market data, scores, and descriptions.
Utilizes conditional rendering to display specific information such as max_supply and website links, and provides 'N/A' in case some data is not available.
The content is divided into sections, including market details, supply details, additional scores, and a description of the cryptocurrency.

Coins route
Next, we create the route to the coin details. We shall have a dynamic route for this, and we do so by creating a folder with the app folder called coins.
The dynamic segment is created by wrapping a folder's name in square brackets, in the coins folder create a folder called [id] and then have a page.tsx file to let Next now that this page shall be rendered.
In the pages.tsx file have the following code.

'use client'
import { Suspense } from "react";
import { CoinPage } from "../../../components/CoinDetails";
import { useCoinDetails } from "@/hooks/useCoinDetails";


export default function Page({params}: { params: {id:string}}){
    const {data,error,isLoading} = useCoinDetails(params.id)
    return(
        <Suspense fallback={<div>Loading coin details...</div>}>
            {isLoading ? (
                <div>Loading coin details..</div>
            ):error ?(
                <div>Error loading coin details: {error.message}</div>
            ): (
                <CoinPage promise={data}/>
            )} 

        </Suspense>
    )
}

The useCoinDetails hook is utilized to fetch the data for the specific cryptocurrency based on the provided id.
The component returns JSX code that uses the Suspense component to handle the asynchronous data loading.
Within the Suspense component, it conditionally renders different views based on the state of the data fetch (data, error, isLoading). It wraps the conditional rendering with a fallback defined as a loading message. This ensures that while the data is being fetched, a loading indicator is displayed to maintain a good user experience.

Conditional Rendering:

Loading State: If isLoading is true, it displays a simple loading message while waiting for the data to load.
Error State: If an error occurs during the data fetch, it displays an error message showing the error details.
Data Render: If there's no loading or error state (isLoading is false and there's no error), it renders the CoinPage component, passing the fetched data as a promise.

Conclusion

The project is available here. If you wish to contribute, feel free to create a pull request.
To overcome some challenges such as rate limiting and if you wish to use more features of the Coin Gecko API, use my code CGANDISI500 for $500 of on your API subscription. Sign up here to redeem the discount.
Thank you for reading! Until next time, may the code be with you.

Working with GraphQL in Nest JS

Andisi (Roseland) Ambuku — Mon, 04 Sep 2023 10:49:31 +0000

Graph Query Language or GraphQL is an API query language.

It allows us to fetch precise data per request instead of fetching unneeded data and delivering it to us. GraphQL is an intuitive method of fetching data.

An example scenario is when you are asked what your age is. The person asking only expects your age e.g. 44 years old. You don't begin by mentioning your birth date, where you were born, or even your parents.

The precision in data fetching is the power of GraphQL.

Let us go over a few common terms you will come across when working with GraphQL.

Schema: defines the structure of the API. GraphQL has its type system for this and the language used to write the schema is called Schema Definition Language(SDL).
Types: are the entities we would like to have in our application. For example, in a notes app, the note will be a type. There are different types namely scalar, enum, union, object, and interface types.
Fields: define the data of the types.

type and field example type Note { title: String! body: String! }

In the example above, Post is the type, and title is the field.

Ways to build GraphQL APIs in Nest JS

Schema-first is a method where you manually define the GraphQL schema using SDL, then add the typePaths property to the GraphQL Module options to tell it where to look for the schema.

Code-first is a method where the GraphQL schema is generated from Typescript classes and decorators, you do not write the GraphQL schema yourself.

Code-First method

For this tutorial, we shall use the code-first approach where we shall add autoSchemaFile to our GraphQL module options.

Installing dependencies

Install the following dependencies that we shall use in this project.

npm install @nestjs/graphql graphql @nestjs/apollo @apollo/server typeorm @nestjs/typeorm pg @nestjs/config

Configure TypeORM

We shall use Postgres as our database and TypeORM as our ORM of choice.

For the detailed method to configure Typeorm check out this article and then we can proceed to the next section.

Configure GraphQL in the application module

Since we are using the code-first method, we shall configure the GraphQLModule with the following options:

Driver: this is the driver of our GraphQL server.
autoSchemaFile: this property's value indicates where the schema will be auto-generated.
sortSchema: this property will sort the items in the schema according to the way they would be in a dictionary because when the types are generated as they are in the module files.

// in the imports array
GraphQLModule.forRoot<ApolloDriverConfig>({
      driver: ApolloDriver,
      autoSchemaFile: join(process.cwd(), 'src/schema.gql'),
      sortSchema: true,
    }),

Creating the CRUD feature

The beauty of Nest JS is that there is a simple way of building the GraphQL feature depending on the method you prefer whether code-first or schema-first.

Generating the feature using resource

We shall be creating all the CRUD features and as such we will make use of the resource generator.resource generator is a feature that auto-generates boilerplate for resources such as controllers, modules, and services. It helps save time and reduce the repetition of tasks.

Run the command below

nest generate resource note

You will then see a prompt like this asking which transport layer you want.

? What transport layer do you use?
REST API
❯ GraphQL (code first)
GraphQL (schema first)
Microservice (non-HTTP)
WebSockets

Select the GraphQL (code-first) option.

Entity

The entity is where we define our database schema. The Nest JS docs refer to this as the model, but for simplicity let us can them the entity. The definition of our entity shall differ slightly from how it is defined in REST. We shall make use of the @Field() and @ObjectType() decorators.

import { ObjectType, Field, Int } from '@nestjs/graphql';
import { Column, Entity, PrimaryGeneratedColumn } from 'typeorm';

@ObjectType()
@Entity()
export class Note {

  @Field(() => Int)
  @PrimaryGeneratedColumn()
  id: number;

  @Field()
  @Column('text', { nullable: false })
  title: string;

  @Field()
  @Column('text', { nullable: false })
  body: string;

}

Our schema for a note entity shall have two columns the title and body.

The ID shall have the @PrimaryGeneratedColumn() so that it auto-generates IDs for the data we key in and the @Field(() => Int) decorator with the type Int to ensure the type allowed is an integer.

We use the @Column('text', { nullable: false }) on the body and title columns to validate that the input should not be null values.

Data Transfer Object (DTO)

We shall have data transfer object files for both the creation and updation of our files. This will help perform data transformations and validation before storage in the database.

import { InputType, Field } from '@nestjs/graphql';

@InputType()
export class CreateNoteInput {
  @Field()
  title: string;

  @Field()
  body: string;
}

import { CreateNoteInput } from './create-note.input';
import { InputType, Field, PartialType } from '@nestjs/graphql';

@InputType()
export class UpdateNoteInput extends PartialType(CreateNoteInput) {
  @Field()
  title: string;

  @Field()
  body: string;
}

Unlike the REST format of DTOs here we use the @Column() decorator here we use the @Field() decorator for the database columns.

Service

The service is where we define our business logic functions. This helps keep the resolver modular.

// note.service.ts
import { Injectable } from '@nestjs/common';
import { InjectRepository } from '@nestjs/typeorm';
import { Repository } from 'typeorm';
import { Note } from './entities/note.entity';
import { CreateNoteInput } from './dto/create-note.input';
import { UpdateNoteInput } from './dto/update-note.input';

@Injectable()
export class NoteService {
  constructor(
    @InjectRepository(Note)
    private noteRepository: Repository<Note>,
  ) {}

  findAll(): Promise<Note[]> {
    return this.noteRepository.find();
  }

  findOne(id: number): Promise<Note> {
    return this.noteRepository.findOne({ where: { id } });
  }

  async create(createNoteInput: CreateNoteInput): Promise<Note> {
    const note = this.noteRepository.create(createNoteInput);
    return this.noteRepository.save(note);
  }

  async update(id: number, updateNoteInput: UpdateNoteInput) {
    const note = await this.findOne(id);
    this.noteRepository.merge(note, updateNoteInput);
    return this.noteRepository.save(note);
  }

  async remove(id: number): Promise<void> {
    await this.noteRepository.delete(id);
  }
}

The create function is for creating a new note based on the data in the createNoteInput DTO and then it saves the note using the create and save methods.
The update function is for updating a note based on the data provided in the updateNoteInput DTO. It retrieves the note using its id and then merges the changes and then updates it in the database.

Resolver

A resolver is a file that provides instructions for turning GraphQL operations into data. They use the schema to return the data as specified.

This is the equivalent of controllers in REST.

The GraphQL operations that can be performed on data include:

Mutation: is used to make writes or updates to data in a GraphQL server. Operations like create, update, and delete are done using mutations.
Query: is used to fetch data from a GraphQL server. It is a read operation that requests data without making any write operations in the database.
Subscriptions: allow for real-time server updates. They enable the server to push data to clients when an event occurs. A use case for subscriptions is notifications.

import { Resolver, Query, Mutation, Args, Int } from '@nestjs/graphql';
import { NoteService } from './note.service';
import { Note } from './entities/note.entity';
import { CreateNoteInput } from './dto/create-note.input';
import { UpdateNoteInput } from './dto/update-note.input';

@Resolver(() => Note)
export class NoteResolver {
  constructor(private readonly noteService: NoteService) {}

  @Mutation(() => Note)
  async createNote(@Args('createNoteInput') createNoteInput: CreateNoteInput) {
    return this.noteService.create(createNoteInput);
  }

  @Query(() => [Note], { name: 'notes' })
  findAll() {
    return this.noteService.findAll();
  }

  @Query(() => Note, { name: 'note' })
  findOne(@Args('id', { type: () => Int }) id: number) {
    return this.noteService.findOne(id);
  }

  @Mutation(() => Note)
  updateNote(@Args('updateNoteInput') updateNoteInput: UpdateNoteInput) {
    return this.noteService.update(updateNoteInput.id, updateNoteInput);
  }

  @Mutation(() => Note)
  removeNote(@Args('id', { type: () => Int }) id: number) {
    return this.noteService.remove(id);
  }
}

@Resolver(() => Note): this decorator shows NoteResolver class is a GraphQL resolver for the 'Note' entity telling NestJS and the GraphQL framework that this class handles GraphQL queries and mutations related to the Note type.
createNote mutation: The @Args('createNoteInput') decorator specifies that the createNote method expects an argument named createNoteInput, which should be of type CreateNoteInput.
Inside the method, you call this.noteService.create(createNoteInput) function to create a new note and return it.
findAll query: This decorator marks the findAll method as a GraphQL query. Queries are used for retrieving data from the server.
The { name: 'notes' } option specifies the name of the query, which will be used in the GraphQL schema.
Inside the method, you call this.noteService.findAll() to retrieve a list of all notes and return them.
findOne query: This decorator marks the findOne method as a GraphQL query. The { name: 'note' } option specifies the name of the query. The method expects an argument named id of type Int, and it uses this.noteService.findOne(id) to retrieve a single note by ID and return it.
updateNote mutation: This decorator marks the updateNote method as a GraphQL mutation. The @Args('updateNoteInput') decorator specifies that the method expects an argument named updateNoteInput of type UpdateNoteInput. Inside the method, you call this.noteService.update(updateNoteInput.id, updateNoteInput) to update a note and return it.
removeNote mutation: This decorator marks the removeNote method as a GraphQL mutation. The @Args('id', { type: () => Int }) decorator specifies that the method expects an argument named id of type Int. Inside the method, you call this.noteService.remove(id)` to delete a note.

Module

The module is where we define the metadata for libraries we use in our API.

`
//note.module.ts
import { Module } from '@nestjs/common';
import { NoteService } from './note.service';
import { NoteResolver } from './note.resolver';
import { TypeOrmModule } from '@nestjs/typeorm';
import { Note } from './entities/note.entity';

@Module({
imports: [TypeOrmModule.forFeature([Note])],
providers: [NoteResolver, NoteService],
})
export class NoteModule {}

Here add the Typeorm module to the import or the note feature.

Ensure you run the migration to create the columns in our database. In the event you have used the configuration in the suggested article then run your migration as follows:

make migration: npm run typeorm:generate-migration migrations/<name_of_migration>

run migration: npm run typeorm:run-migrations

Testing the Endpoint

One of the grand advantages of GraphQL is that we only make use of one endpoint as opposed to REST here we have multiple endpoints as per the operations you want to have for your data.

Now that the feature is complete let us proceed to test the endpoint. We shall make use of the GraphQL playground at http://localhost:3000/graphql

After running the npm run start command, you will see the schema auto-generated. It will look like the one below.

//schema.gql

THIS FILE WAS AUTOMATICALLY GENERATED (DO NOT MODIFY)

input CreateNoteInput {
body: String!
title: String!
}

type Mutation {
createNote(createNoteInput: CreateNoteInput!): Note!
removeNote(id: Int!): Note!
updateNote(updateNoteInput: UpdateNoteInput!): Note!
}

type Note {
body: String!
id: Int!
title: String!
}

type Query {
note(id: Int!): Note!
notes: [Note!]!
}

input UpdateNoteInput {
body: String!
id: Float!
title: String!
}

Create note

To test the creation of a note ensure you check the schema for the format of the the request. According to our schema, the mutation should look like the one below. Add the mutation to the left panel and click the 'play' button.

//create mutation mutation { createNote(createNoteInput: { title: "Test", body: "Test body" }) { id title body } }

Find one note

To test the fetching of a note ensure you check the schema for the format of the the request. According to our schema, the query should look like the one below. Add the query to the left panel and click the 'play' button.

//find one query query { note(id:1) { id, title, body } }

Find all notes

To test the fetching of all notes ensure you check the schema for the format of the the request. According to our schema, the query should look like the one below. Add the query to the left panel and click the 'play' button.

//find all query query { notes{ id, title, body } }

Update note

To test the updating of a note ensure you check the schema for the format of the request. According to our schema, the mutation should look like the one below. Add the mutation to the left panel and click the 'play' button.

// update mutation mutation { updateNote(updateNoteInput: { id: 1, title: "Updated Title", body: "Updated body" }) { id title body } }

Delete note

To test the deletion of a note ensure you check the schema for the format of the the request. According to our schema, the mutation should look like the one below. Add the mutation to the left panel and click the 'play' button.

` //delete mutation
mutation {
removeNote(id: 1) {
id
title
body
}
}

The link to the project used in this tutorial is here. Feel free to try out and comment your thoughts. Until next time may the code be with you.

References

User Authentication with Passport JS and JWT in Nest JS

Andisi (Roseland) Ambuku — Tue, 22 Aug 2023 21:51:19 +0000

Nest JS is the lovechild of Typescript and Node JS (hurrah type-safety for the backend). The two come together to create a modular and robust framework that is easy to scale and maintain.

This framework is ideal for developers who prefer convention over configuration as plenty of features come with the framework, for example, Decorators that define metadata for classes and Middleware that intercepts requests and responses for efficient data transmission.

Prerequisites

Ensure you have Node JS(version >= 16) installed on your machine and then proceed to the next section where we set up a REST API.

Setup

For this tutorial, we shall set up a REST API using the following steps:

Open your operating system's terminal and key in the following commands.

npm i -g @nestjs/cli
nest new blog-api

The first command installs the nest CLI globally in your system. Note: installation takes a long time so don't be alarmed.

Once done, the second command creates a project(feel free to call the project whatever name you wish). Ensure you choose REST from the options to create a REST API. The blog-api directory will have some boilerplate files, node modules, and a src folder with core files.

Setting up TypeORM

TypeORM is an object-relational mapper that supports the latest JavaScript features from small to large-scale applications.

The first step to configuring TypeORM is to install the relevant packages

npm i pg typeorm @nestjs/typeorm @nestjs/config

The packages installed are as follows:

typeorm - the package for TypeORM.

pg - a postgres driver to connect typeorm and postgres database.

@nestjs/config - Nest JS module for configuration.

@nestjs/typeorm - Nest JS module for TypeORM.

Configuring a datasource file

After installing the relevant packages, we need to configure a datasource file to enable the use of features like migrations.

A datasource is a file where the connection settings for our database. It also sets the first database connection.

A migration is a file with SQL queries that is used to modify an existing database and update its schema.

Create a database using pgAdmin or psql CLI. If you are using the psql CLI then run the following command and add the database's name to the typeorm configs at the .env

createdb databasename

Create a file at the root of the Nest application and call it dataSource.ts.

It is a good security practice to have sensitive data like database configurations stored in a .env file. For the port, host, username, password, and database add the configurations in a .env file and import the environment variables to this file.

import { DataSource } from 'typeorm';
import { ConfigService } from '@nestjs/config'; //installed package
import { config } from 'dotenv';

config();

const configService = new ConfigService();

export default new DataSource({
  type: 'postgres',
  host: configService.get('TYPEORM_HOST'),
  port: configService.get('TYPEORM_PORT'),
  username: configService.get('TYPEORM_USERNAME'),
  password: configService.get('TYPEORM_PASSWORD'),
  database: configService.get('TYPEORM_DATABASE'),
  entities: ['src/**/*.entity.ts'],
  migrations: ['migrations/**/*{.ts,.js}'],
});

Let us discuss the configurations in this file:

const configService = new ConfigService();: This line creates an instance of a ConfigService class, which is likely a custom class used to manage configuration settings for the application. It seems to provide a way to retrieve configuration values.

export default new DataSource({ ... });: This line exports a new instance of the DataSource class, which is the main configuration object used by TypeORM to connect to a database.

Configuration Object Properties:

type: 'postgres': Specifies that PostgreSQL is the database type being used.

host: configService.get('TYPEORM_HOST'): Retrieves the database host from the configuration service using the key 'TYPEORM_HOST'.

port: configService.get('TYPEORM_PORT'): Retrieves the database port from the configuration service using the key 'TYPEORM_PORT'.

username: configService.get('TYPEORM_USERNAME'): Retrieves the database username from the configuration service using the key 'TYPEORM_USERNAME'.

password: configService.get('TYPEORM_PASSWORD'): Retrieves the database password from the configuration service using the key 'TYPEORM_PASSWORD'.

database: configService.get('TYPEORM_DATABASE'): Retrieves the database name from the configuration service using the key 'TYPEORM_DATABASE'.

entities: ['src/*/.entity.ts']: Specifies the paths to entity files. These files define the structure of your database tables and are used by TypeORM to interact with the database.

migrations: ['migrations/*/{.ts,.js}']: Specifies the paths to migration files. Migrations are scripts that manage changes to the database schema over time.

Create a migrations folder at the root of the Nest JS project for our migration files.

Add the following to the existing scripts in package.json to enable typeorm migrations to work.

"scripts": {
    "typeorm": "ts-node ./node_modules/typeorm/cli",
    "typeorm:run-migrations": "npm run typeorm migration:run -- -d ./dataSource.ts",
    "typeorm:generate-migration": "npm run typeorm -- -d ./dataSource.ts migration:generate",
    "typeorm:create-migration": "npm run typeorm -- migration:create",
    "typeorm:revert-migration": "npm run typeorm -- -d ./dataSource.ts migration:revert"
  },

App module

Add the typeorm module along with the configurations to the app module at imports array.

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { TypeOrmModule } from '@nestjs/typeorm';
import { join } from 'path';
import { AuthModule } from './auth/auth.module';


// eslint-disable-next-line @typescript-eslint/no-var-requires
require('dotenv').config();

const {
  TYPEORM_HOST,
  TYPEORM_USERNAME,
  TYPEORM_PASSWORD,
  TYPEORM_DATABASE,
  TYPEORM_PORT,
} = process.env;

@Module({
  imports: [TypeOrmModule.forRoot({
      type: 'postgres',
      host: TYPEORM_HOST,
      port: parseInt(TYPEORM_PORT),
      username: TYPEORM_USERNAME,
      password: TYPEORM_PASSWORD,
      database: TYPEORM_DATABASE,
      entities: [join(__dirname, '**', '*.entity.{ts,js}')],
    }),
    AuthModule,
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

Adding the user authentication feature

User authentication is an important feature in any application. It allows users to create accounts in our application and access features provided therein. It is also a security measure to protect user data.

To create this feature we shall make use of the resource generator in Nest.

nest g resource auth

It generates the entity, controller, module, and service files we require for this feature.

User Entity

The first thing we do is to model the user. We shall create the database columns or the user entity.

//user.entity.ts
import {BaseEntity, PrimaryGeneratedColumn, Entity, Column, Unique,
OneToMany,} from 'typeorm';
import * as bcrypt from 'bcrypt';

@Entity()
@Unique(['email'])
export class User extends BaseEntity {
  @PrimaryGeneratedColumn('uuid')
  id: string;

  @Column()
  username: string;

  @Column()
  email: string;

  @Column()
  password: string;

  @Column()
  salt: string;

  async validatePassword(password: string): Promise<boolean> {
    const hash = await bcrypt.hash(password, this.salt);
    return hash === this.password;
  }
}

Let us discuss the code in this file.

@Entity(): This decorator indicates that the class User is an entity, representing a database table. In this case, it represents the "User" table.

@unique(['email']): This decorator specifies that the "email" column in the "User" table should have unique values. This helps enforce uniqueness for email addresses in the database.

export class User extends BaseEntity { ... }: This defines the User class, which extends BaseEntity. BaseEntity is a class provided by TypeORM that contains common properties and methods for entities.

@PrimaryGeneratedColumn('uuid'): This decorator indicates that the id property is a primary key column that will be generated using UUIDs (Universally Unique Identifiers).

@Column(): These decorators indicate that the email, password, and salt properties are columns in the table. The email and password columns are required, while the salt column is used for password hashing.

We shall hash user passwords with bcrypt before storing them in the database to secure user passwords.

The salt is a randomly generated value that is attached to an encrypted password to uniquely identify it in the event two or more users (unknowingly) register with the same passwords.

User Data Transfer Object

A data transfer object (DTO) is a design pattern used to define a data structure that carries data between different layers of an application, often between the client and the server. DTOs are used to encapsulate and transfer data in a structured and controlled way.

We shall have the following DTOs for this feature: the login DTO and the signup DTO.

Signup DTO

The DTO is used to validate the inputs that we get from the user when they signup. We use the class validator library to validate the database columns.

//signup.dto.ts
import { IsString, IsEmail, MinLength, Matches } from 'class-validator';

export class SignupDto {
  @IsEmail()
  email: string;

  @IsString()
  @MinLength(8)
  //regex for password to contain atleast one uppercase, lowercase, number and special character
  @Matches(/((?=.*\d)|(?=.*\W+))(?![.\n])(?=.*[A-Z])(?=.*[a-z]).*$/, {
    message:
      'password must contain uppercase, lowercase, number and special character',
  })
  password: string;

  @IsString()
  username: string;
}

export class SignupDto { ... }: This defines the SignupDto class.

@IsEmail(): This decorator specifies that the email property should be a valid email address.

@IsString(): This decorator specifies that the password and username properties should be of string type.

@MinLength(8): This decorator specifies that the password property should have a minimum length of 8 characters.

@Matches(/((?=.\d)|(?=.\W+))(?![.\n])(?=.[A-Z])(?=.[a-z]).*$/, { ... }): This decorator specifies that the password property should match a specific regex pattern that enforces certain complexity rules:

(?=.*\d): At least one digit (number) should be present.

(?=.*\W+): At least one special character should be present.

(?=.*[A-Z]): At least one uppercase letter should be present.

(?=.*[a-z]): At least one lowercase letter should be present.

.$: Match any characters (the . before $ ensures that the rule applies to the entire string).

The provided message is used to specify a custom error message if the password does not meet the complexity requirements.

password: string;: This declares the password property as a string within the DTO.

username: string;: This declares the username property as a string within the DTO.

Login DTO

This DTO is used to validate the inputs that we get from the user when they log in. We use the class validator library to validate the database columns.

//login.dto.ts
import { IsEmail, IsString } from 'class-validator';

export class LoginDto {
  @IsEmail()
  email: string;

  @IsString()
  password: string;
}

Login Response DTO

This DTO is used to supply the database columns that are to be contained in the log-in response when a user logs in. We shall see this when we test the endpoints.

//loginResponse.dto.ts
export class LoginResponseDto {
  username: string;
  email: string;
}

User service

A service is used to manage the business logic and data manipulation from the repository. It helps with the separation of concerns and code reusability.

We shall add the user service to the services folder as we shall have the functions that create and sign in a new user.

//user.service.ts
import { Injectable } from '@nestjs/common';
import { User } from '../entities/user.entity';
import { InjectRepository } from '@nestjs/typeorm';
import { SignupDto } from '../dto/signup.dto';
import * as bcrypt from 'bcrypt';
import { LoginDto } from '../dto/login.dto';
import { LoginResponseDto } from '../dto/loginResponse.dto';
import { Repository } from 'typeorm';

@Injectable()
export class UserService {
  constructor(
    @InjectRepository(User)
    private userRepository: Repository<User>,
  ) {}

  findById(id: string): Promise<User> {
    return this.userRepository.findOne({ where: { id } });
  }

  private async hashPassword(password: string, salt: string): Promise<string> {
    return bcrypt.hash(password, salt);
  }

  async create(signupDto: SignupDto): Promise<User> {
    const { email, password, username } = signupDto;
    const user = new User();

    user.salt = await bcrypt.genSalt();
    user.password = await this.hashPassword(password, user.salt);
    user.email = email;
    user.username = username;

    try {
      await user.save();
      return user;
    } catch (error) {
      throw error;
    }
  }

  async signIn(loginDto: LoginDto): Promise<LoginResponseDto> {
    const { email, password } = loginDto;
    const user = await this.userRepository.findOne({ where: { email } });

    if (user && user.validatePassword(password)) {
      const userResponse = new LoginResponseDto();

      userResponse.username = user.username;
      userResponse.email = user.email;
      return userResponse;
    } else {
      return null;
    }
  }
}

Let's discuss this code:

@Injectable(): This decorator indicates that the UserService class can be injected with dependencies. It's a crucial part of the Dependency Injection system in NestJS.

constructor(@InjectRepository(User) private userRepository: Repository) { ... }: This constructor injects the userRepository as a dependency into the UserService class. The @InjectRepository decorator is part of TypeORM and injects the repository instance associated with the User entity.

findById(id: string): Promise: This method queries the database using the injected userRepository to find a user by their id.

private async hashPassword(password: string, salt: string): Promise: This is a private method that asynchronously hashes a password using the bcrypt library. The salt is passed as an additional parameter for added security.

async create(signupDto: SignupDto): Promise: This method creates a new user based on the provided SignupDto and persists it to the database. It generates a unique salt, hashes the password, and then saves the user entity to the database.

async signIn(loginDto: LoginDto): Promise: This method handles user authentication. It attempts to find a user by email from the database, and if found, it validates the password using the validatePassword method defined in the User entity. If the credentials are valid, a LoginResponseDto is returned, containing the user's username and email.

Configuring Passport JS and JWT

Passport JS is an authentication middleware for Node JS applications. JSON Web Tokens(JWT) is a token-based authentication system that uses an encrypted token to manage user authentication.

To configure the two for user authentication we begin by installing the relevant packages as shown below.

npm install @nestjs/passport @nestjs/jwt passport-jwt

We then create a constants file that shall contain an object that stores the JWT secret.

//constants.ts
// eslint-disable-next-line @typescript-eslint/no-var-requires
require('dotenv').config();

export const jwtConstants = {
  secret: process.env.JWT_SECRET,
};

export const jwtConstants = { secret: process.env.JWT_SECRET };: This line of code exports an object named jwtConstants that contains the JWT secret.

The JWT secret is used to sign and verify JWT tokens. In this case, the secret is retrieved from the environment variables using process.env.JWT_SECRET, which means you should have a variable named JWT_SECRET defined in your .env file.

Auth Module

We add the JWT and Passport JS modules to the auth module at the imports array. or the passport module, configure the default strategy to be JWT.

For the JWT module configure the secrets with the jwtConstants object. The signOptions is where we declare the lifetime of a town. The shorter the better to ensure user tokens are refreshed often as a security measure.

//auth.module.ts
import { Module } from '@nestjs/common';
import { AuthController } from './auth.controller';
import { AuthService } from './services/auth.service';
import { TypeOrmModule } from '@nestjs/typeorm';
import { User } from './entities/user.entity';
import { PassportModule } from '@nestjs/passport';
import { JwtModule } from '@nestjs/jwt';
import { jwtConstants } from './constants';
import { JwtStrategy } from './strategies/jwt.strategy';
import { UserService } from './services/user.service';

@Module({
  imports: [
    TypeOrmModule.forFeature([User]),
    PassportModule.register({ defaultStrategy: 'jwt' }),
    JwtModule.register({
      secret: jwtConstants.secret,
      signOptions: {
        expiresIn: '1h',
      },
    }),
  ],
  controllers: [AuthController],
  providers: [UserService, AuthService, JwtStrategy],
  exports: [JwtModule, PassportModule],
})
export class AuthModule {}

Adding JWT to the auth service

After configuring passport and JWT modules we proceed to use them in the auth service.

We begin by creating a user-jwt interface. An interface in TypeScript is a way to define the structure of an object, specifying what properties it should have and their types.

//user-jwt.interface.ts
import { LoginResponseDto } from '../dto/loginResponse.dto';

export interface UserJwtResponse {
  user: LoginResponseDto;
  accessToken: string;
}

export interface UserJwtResponse { ... }: This line defines an interface named UserJwtResponse. Here's what's defined within the UserJwtResponse interface:

user: LoginResponseDto;: This property specifies that the user property of the UserJwtResponse object should be of type LoginResponseDto. It suggests that this property will contain data in the structure defined by the LoginResponseDto class.

accessToken: string;: This property specifies that the accessToken property of the UserJwtResponse object should be of type string. This property is intended to hold a JSON Web Token (JWT) access token.

Authentication service

The auth service encapsulates user authentication logic within a NestJS application. It provides methods for validating users by ID, handling user registration, and managing user login.

//auth.service.ts
import { Injectable, UnauthorizedException } from '@nestjs/common';
import { UserService } from '../services/user.service';
import { SignupDto } from '../dto/signup.dto';
import { User } from '../entities/user.entity';
import { UserJwtResponse } from '../interfaces/user-jwt.interface';
import { LoginDto } from '../dto/login.dto';
import { JwtService } from '@nestjs/jwt';

@Injectable()
export class AuthService {
  constructor(
    private readonly userService: UserService,
    private readonly jwtService: JwtService,
  ) {}
  async validateUserById(userId: string) {
    return await this.userService.findById(userId);
  }

  async signUp(signupDto: SignupDto): Promise<User> {
    return this.userService.create(signupDto);
  }

  async login(loginDto: LoginDto): Promise<UserJwtResponse> {
    const userResult = await this.userService.signIn(loginDto);

    if (!userResult) {
      throw new UnauthorizedException('Invalid Credentials!');
    }

    const payload = { userResult };
    const accessToken = await this.jwtService.sign(payload);

    const signInResponse: UserJwtResponse = { user: userResult, accessToken };

    return signInResponse;
  }
}

Let us discuss the code:

@Injectable(): This decorator indicates that the AuthService class can be injected with dependencies. This is a key feature of NestJS's Dependency Injection system.

constructor(...): The constructor of the AuthService class receives two dependencies: userService and jwtService. These dependencies are automatically injected when an instance of AuthService is created.

async validateUserById(userId: string) { ... }: This method is used to validate a user based on their userId. It uses the injected userService to find and return user information.

async signUp(signupDto: SignupDto): Promise { ... }: This method is used to handle user registration. It takes a signupDto (presumably containing user signup information) and delegates the registration process to the userService. It returns the created user entity.

async login(loginDto: LoginDto): Promise { ... }: This method handles user login. It takes a loginDto (presumably containing user login credentials) and proceeds as follows:

It calls the signIn method of the userService to attempt user authentication.

If authentication is successful, it generates an access token using the injected jwtService.

It constructs a response object of type UserJwtResponse containing the authenticated user's information and the generated access token.

If authentication fails (no user found or invalid credentials), it throws an UnauthorizedException.

The signIn method is likely defined in the userService and handles user authentication, possibly returning the authenticated user's data or null if authentication fails.

Jwt strategy

The JWT strategy class defines a JWT-based authentication strategy using Passport in a NestJS application. This strategy is an essential component of JWT-based authentication in the application.

//jwt.strategy.ts
import { Injectable } from '@nestjs/common';
import { PassportStrategy } from '@nestjs/passport';
import { ExtractJwt, Strategy } from 'passport-jwt';
import { AuthService } from '../services/auth.service';
import { jwtConstants } from '../constants';

@Injectable()
export class JwtStrategy extends PassportStrategy(Strategy) {
  constructor(private authService: AuthService) {
    super({
      jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(),
      secretOrKey: jwtConstants.secret,
    });
  }

  async validate(payload: any) {
    return await this.authService.validateUserById(payload.sub);
  }
}

Let's discuss the code:

@Injectable(): This decorator indicates that the JwtStrategy class can be injected with dependencies. It's important for Dependency Injection to work properly.

export class JwtStrategy extends PassportStrategy(Strategy) { ... }: This line defines the JwtStrategy class, which extends PassportStrategy from the @nestjs/passport module. The Strategy parameter passed to PassportStrategy specifies the type of authentication strategy being implemented.

constructor(private authService: AuthService) { ... }: The constructor of the JwtStrategy class receives an instance of the AuthService as a dependency. This dependency is automatically injected when an instance of JwtStrategy is created.

super({ ... }): This line calls the constructor of the parent class (PassportStrategy) and provides options for configuring the JWT strategy. Specifically:

jwtFromRequest: ExtractJwt.fromAuthHeaderAsBearerToken(): This specifies that the JWT will be extracted from the Authorization header as a Bearer token.

secretOrKey: jwtConstants.secret: This uses the JWT secret from the jwtConstants object (likely defined elsewhere) for token verification.

async validate(payload: any) { ... }: This method is the heart of the JWT strategy. It's called when a JWT is successfully decoded and validated. The payload parameter contains the information stored in the JWT payload, including the user's ID (sub).

Inside this method, the validateUserById method of the injected authService is called with the user's ID extracted from the payload.

The validateUserById method is expected to return a user entity or null, indicating whether the user exists or not.

Authentication controller

The auth controller is responsible for handling authentication-related HTTP requests. It delegates the actual authentication and registration logic to the methods of the injected auth service.

//auth.controller.ts
import { Body, Controller, Post, Put } from '@nestjs/common';
import { AuthService } from './services/auth.service';
import { SignupDto } from './dto/signup.dto';
import { User } from './entities/user.entity';
import { LoginDto } from './dto/login.dto';
import { UserJwtResponse } from './interfaces/user-jwt.interface';

@Controller('auth')
export class AuthController {
  constructor(private readonly authService: AuthService) {}

  @Post('signup')
  async signup(@Body() signupDto: SignupDto): Promise<User> {
    return this.authService.signUp(signupDto);
  }

  @Put('login')
  async login(@Body() loginDto: LoginDto): Promise<UserJwtResponse> {
    return this.authService.login(loginDto);
  }
}

Let us discuss the code:

@Controller('auth'): This decorator sets the base route for the AuthController to 'auth', which means that the routes defined within this controller will be accessed under the /auth endpoint.

export class AuthController { ... }: This line defines the AuthController class.

constructor(private readonly authService: AuthService) { ... }: The constructor of the AuthController class receives an instance of the AuthService as a dependency. This allows the controller to use methods and functionality provided by the AuthService.

@post('signup'): This decorator specifies that the signup method will handle HTTP POST requests to the /auth/signup endpoint.

async signup(@body() signupDto: SignupDto): Promise { ... }: This method is responsible for user registration. It receives a signupDto containing user registration data from the request body.

The signupDto is passed to the signUp method of the injected authService, which handles the user registration process.

The method returns a Promise which presumably represents the created user entity.

@Put('login'): This decorator specifies that the login method will handle HTTP PUT requests to the /auth/login endpoint.

async login(@body() loginDto: LoginDto): Promise { ... }: This method is responsible for user login. It receives a loginDto containing user login credentials from the request body.

The loginDto is passed to the login method of the injected authService, which handles the user authentication process.

If authentication is successful, the method returns a Promise containing user information and an access token.

Running a migration

Before testing the endpoints we need to create and run a migration to update the database schema with the user's table and columns.

The command we shall use to create a migration is as shown below. It matches what we have configured in the datasource file.

npm run typeorm:generate-migration migrations/CreateAuthTable

Then we follow that command with another one that runs the migration.

npm run typeorm:run-migrations

Testing the endpoints

After successfully running the migration, we proceed to test the endpoints. Run the API using this command as it will run the API in watch mode.

npm run start:dev

Sign up endpoint

In Postman, we create the body of the request we want to make which will create a new user.

Login endpoint

In Postman, we create the body of the request we shall use to log in the user we created.

The GitHub repository with the code for this project is here. Feel free to comment with any questions you may have. Until next time, may the code be with you.

Careers in the Data Field

Andisi (Roseland) Ambuku — Tue, 22 Nov 2022 06:55:12 +0000

Introduction

Data is as old as time. Don't believe that? Well time itself is data and it has helped us understand our surroundings e.g evolution which is change(insert a variable of your liking) over time. There have been practitioners who have mastered the art of harnessing data and making sense of it so it can inform the world we live in today. Only recently have they been named and specific roles attached to their titles. They form the backbone of research and business performance in industries across the globe such as logistics, health care, agriculture, and even fashion.

In this article, we shall explore some of the significant data practitioners, the roles they play, the tools they use, and the skills they have acquired that make them who they are in the data space. We shall also see the average they receive to motivate you to start your journey in the data field.

Data Analyst

A data analyst is a person who solves a business problem by collecting and interpreting data and communicates the insights effectively to the target audience e.g management of a company.

Roles

They break down the business problem to understand the problem at hand.
They gather the data from the necessary sources.
They wrangle the data and clean it for analysis.
The explore and analyze the data to find patterns in the data that relate to the business problem.
They communicate the findings they derive from the data effectively with the use of visualizations and written reports to the target audience.

Skills

SQL
Tableau
Microsoft Power BI
Python or R
Statistics
Microsoft Excel
Google Sheets
Storytelling with data

Salary

$422.65

Data Scientist

A Data Scientist is a person who solves business problems and then decides how data can be used to carry out those objectives. They construct algorithms and prediction models to extract the data the organization requires, design data modeling processes, assist in data analysis, and collaborate with others to share insights.

Roles

They look for patterns and trends in datasets to get insights.
Create data models and algorithms to predict outcomes.
They use machine learning to enhance the quality of data or product offers.

Skills

Data Analysis skills
Cloud Based tools e.g AWS
Machine Learning
Big Data

Salary

$633.98

Data Engineer

They are in charge of making sure that data transfer between servers and applications is seamless. The architecture used in projects involving data science is created and maintained. The task of storing and interpreting an enormous amount of data falls to data engineers. Expertise with data warehousing systems is important in this field.

Roles

Use systematic techniques to design, build, and maintain data architectures.
Data Collection from different sources.
Automation of tasks.
Identify trends using models they create.

Skills

Database systems and tools.
Data Processing with tools like Hadoop.
ETL(Extract Transfer and Load) tools.
Data Warehousing with tools like RedShift.
Machine Learning.
Cloud Based tools like Azure.

Salary

$2958.55

Business Intelligence Developer

A business intelligence developer creates intelligence products that aim to improve business decision-making procedures. These consist of query systems, apps for data modeling, interactive dashboards, and data visualization tools.

Roles

They create visualizations and reports.
They write and maintain technical documentation.
They collaborate with other developers and business analysts to get data.
They create, deploy and maintain Business Intelligence solutions.

Skills

Data Analysis skills
ETL tools.
Business processes and procedures.
Data Warehousing.

Salary

$1775.13

Database Administrator

A Database Administrator is in charge of managing the upkeep and security precautions for the company's databases. They maintain virus protection software, create account information for users who are authorized to access databases, and arrange databases so that users can quickly locate critical documents.

Roles

Data extraction and/or loading.
Putting cybersecurity safeguards in place.
Data authentication.
Keeping track of how well hardware and software are performing.
Setting up databases and servers.
Managing private information ethically.

Skills

Knowledge of database queries.
Understand database theory and design.
Establish, administer, and monitor data networks in collaboration with data architects and other IT professionals.
Server installation and maintenance.
Database management.
Database structure languages like SQL or SQL/PSM.

Salary

$591.71

Statistician

A Statistician is a person who gathers and examines data for a corporation. Statisticians analyze data sets for trends using both automated and manual data collection techniques, then present the patterns to corporate executives so that they can adjust their business operations.

Roles

Gathering information from several sources.
Finding patterns in various data sets.
Collaborating with other staff members to guarantee accurate and thorough data collection.
Executive reports that are simple to read and clearly state the conclusions that can be made from a company's data.
Putting statistical models into practice and coming to conclusions after collecting enough data.

Skills

Probability and Statistics
Use a variety of statistical techniques to test hypotheses and make predictions
Math, to turn complex sets of data into useful applications.

Salary

$612.84

There are many more data-related careers such as:

Data Architect
Data Journalist
Machine Learning Engineer
Data Miner
Database Developer
Data Curator

General skills data practitioners should all have:

Programming
Collaborative
Critical thinking
Communication skills
Analytical thinking
Business intuition
Problem-Solving skills

Sidenote

The salaries provide in this article are as per the following and subject to change:

Sourced from Glassdoor(may vary with employers).
Date of writing the article, 14/07/2022.
Monthly remission.
Location is Nairobi, Kenya.

Until next time, may the code be with you.

Data Stories: Medical Appointment Attendance in Brazil

Andisi (Roseland) Ambuku — Fri, 03 Jun 2022 12:18:55 +0000

Welcome to Data Stories, this is a series where we will explore various data and deduce insights. We shall listen to the data as it tells us its story.

We shall begin with a story about medical appointment attendance in Brazil. The data hails from Kaggle and we shall explore it to find out whether or not Brazilians attend their medical appointments.

Side Note: This project was part of the Udacity Data Analytics Nanodegree and why not share it with fellow techies.

Table of Contents

Introduction
Questions For Analysis
Data Wrangling
Data Cleaning
Exploratory Data Analysis
Conclusions

Introduction: Dataset Description
The no-show appointments dataset is a collection of 100,000 medical appointments made by Brazilian patients who did not show up. It aims to help us figure out why they don't show up for their doctor's visits. There is enough data to tell a story about why people don't show up and to help mitigate this problem. This will aid in answering questions in the analysis portion and overcoming issues such as poor patient management.

Questions For Analysis
The following are some of the questions that we seek to answer from the analysis of this dataset:

How is the attendance to the appointments by the patients?
What is the relationship between the independent variables and the dependent variable?
What is the attendance of the patients on the Scholarship program to their medical appointments?

Data Wrangling
In this section the data is loaded into the notebook and we'll review it to see if there are any errors, which we'll address in the Data Cleaning section.

We begin by importing the necessary libraries.

#Import statements for all of the packages that are used.

import pandas as pd

import numpy as np

import seaborn as sns

import matplotlib.pyplot as plt

%matplotlib inline

Data Wrangling
During the wrangling process there are few problems noticed with the dataset and they include:

Data Cleaning
The column names Hipertension and Handicap and are misspelled while SMS_ received doesn't require the underscore also No-show does not need the - sign.

The Patient ID and Appointment ID columns are not relevant to this analysis.

The datatypes of Scheduled day and Appointment day are incorrect. They are objects which is incorrect because they are dates which should be date datatypes.

In this Data Cleaning section we shall make corrections to aforementioned problems.

Exploratory Data Analysis
The data is clean and ready for exploration. Here statistics shall be used to address the questions in the Introduction part and visualizations will also be created to answer the questions.

The important details from the visualizations are as follows:

Gender - there is a stark difference between males and females in terms of attendance to their medical appointments. The visualization show fewer males are attending their appointments compared to the females.

SMS received - there is a large difference in the people who do receive SMS reminders for the appointments. A large number of those who receive the text do not show up to their appointments.

Diabetes - there is a dismal trend in the patients who have Diabetes. The visualization shows they attend their appointments the least compared to those without the disease.

Hypertension - there is a dismal trend in the patients who have Hypertension. The visualization shows they attend their appointments the least compared to those without the disease.

Conclusions
In this section a detailed summary of the research is provide in relation to the questions posed in the Introduction section.

From the study of 100,000 medical appointments by patients in Brazil we can draw the general conclusion that most of them do not attend their scheduled appointments. This is a sad state of affairs as medical appointments are very useful in early detection of diseases and also management of patients' conditions.

How is the attendance to the appointments by the patients?
The attendance of patients to their medical appointments is poor as only 20% of them attend their appointments that they schedule. 80% of patients fail to attend their appointments and this poses a challenge of management of their conditions such as Diabetes and Hypertension. This may have a domino effect of symptoms getting worse and even early deaths when this could be prevented by the patients attending their appointments.

What is the relationships between the independent variables and the dependent variable?
In terms of Gender, there is a difference between males and females in terms of attendance to their medical appointments with fewer males are attending their appointments compared to the females.
In terms of SMS received, there is a large difference in the people who do receive SMS reminders for the appointments with a greater number of those who receive the text not showing up to their appointments.

In terms of Diabetes, there is a dismal trend in the patients who have Diabetes, they attend their appointments the least compared to those without the disease.

In terms of Hypertension, there is a dismal trend in the patients who have Hypertension, they attend their appointments the least compared to those without the disease.

What is the attendance of the patients on the Scholarship program to their medical appointments?
The attendance of patients on the Scholarship program is poor with only 10% of them attending their scheduled appointments while an astounding 90% do not. This was a special feature to study because the Scholarship program dubbed Bolsa Familia is a welfare program intended to assist families in Brazil by providing them with an allowance, this move as made to assist them in part with their medical expenses. However, as the study shows this is not the case. This situation needs to be looked into by the government and measures put in place to ensure the program works for the people of Brazil and also they should be encouraged to attend their medical appointments.

Limitations in the research

There may be more factors around the reasons Brazilian citizens fail to show up to their medical appointments that may not have been factored in to this research and may affect the results of the study.

Additional research

Additional research needs to be done on the Scholarship program to find out why the program intention was not met and why citizens on the Scholarship program are not responding to medical attention in terms of attending their scheduled appointments.

REFERENCES

Pereira, A. W. (2015). Bolsa Família and democracy in Brazil. Third World Quarterly, 36(9), 1682-1699.

Here is the repo with the notebook. Feel free to leave a comment and critique or share more insights we could deduce.

Until next time, may the code be with you.

The Ultimate Guide To Getting Started in Data Science

Andisi (Roseland) Ambuku — Sat, 02 Apr 2022 20:47:01 +0000

I am sure if you follow #TechTwitter, you have come across this buzzword; Data Science. (Alongside Web 3 and JavaScript of course).

Let us explore what Data Science is and find out what makes it so popular.

Data Science is defined as deriving insights from a large amount of data. Data refers to the facts that are collected for analysis.

Why learn Data Science?

We live in a world that is data-driven meaning a large number of decisions that are made are arrived at with data at the core of the decision.
Data also helps us understand the world better. Data on populations, trade e.tc help us better understand how the world works and how to optimize our world.
With the genesis of digital devices such as smartphones, laptops, and even refrigerators we are constantly churning large amounts of data which can lead to actionable about ourselves, for example, our Social Media usage (yikes! probably might want to cut down on it)

What next?

Now, that you know how vital Data Science is in our modern world, you presume we dive into the tools and skillset, No (we'll get their eager learner)

The foundation for proper data science is understanding the issue or problem you are trying to solve. This will help guide the data science process and lead to very insightful actions from the data, for example, if the data consists of marketing and customer data then the problem should be defined as better targeted marketing.
This is a simple checklist to guide the process

Assess the issue
Define the objective
Define the problem With the problem clearly defined you can proceed to the next aspect.

The Data Science Process

With the problem defined you can go ahead and solve it via this process.
Data Collection
The first step is to collect the data related to the problem you are trying to solve, for example,
Problem: The extent of Covid-19 spread in the country
Data: Reported Covid-19 cases in the country

Data Preparation
Once you have collected the data, explore the data to find patterns and interests that suit the problem. This process is important as it helps you know the important things you need from the data and what to eliminate.
Here is where data cleaning, the backbone of data science, lies. Missing data is handled and outliers are taken care of.

Data Analysis
Once you have clean data to work with you can analyze the data and select features of the data that will help create the best model, A data model is a conceptual model that organizes how different features of data relate to one another. This will assist in the analysis of your data and reveal insights.

Report on the data findings
Once the insights have been deduced, you move on to writing a report on your findings. You present the insights and visualize the results to help your audience better understand the outcome of the whole process. You can use data visualization tools such as charts and heat maps to present findings.

Implement Actions
A the end of the process you deduce the insight, for example, areas that require a lockdown to curb the spread of Covid-19. You present this as a recommendation to your audience and the go-ahead to implement it.

Tools and Skillset

After going through the data process you have realized there are tools and skills that are required to fulfill this process. The tools and skillset are as follows;

Data Collection
Tools: Cloud services such as AWS, Azure and Google Cloud Platform
Data Cleaning
Tools and Languages: SQL, Python, R, Databases, for example, Postgres and MongoDB
Data Visualization
Tools and Libraries: Excel, Tableau, Power BI, Matplotlib, Seaborn

Link to resources

Until next time, may the code be with you.

Python for everyone: Mastering Python the Right Way

Andisi (Roseland) Ambuku — Sun, 27 Feb 2022 20:56:21 +0000

Is Python for everyone?
Yes!

But I am an absolute beginner?
It is for you.

But I am from a completely unrelated field/career?
It is for you too.

But I am too old to learn?
Unless you are dead, It is for you and us all!

Python is one of the most popular programming languages with a wide variety of applications. The reason for its popularity is its simple syntax which reads like English.

Still not convinced it is for everyone? Here is another reason.
Python has various use cases and applications in a variety of industries such as marketing, health, manufacturing e.t.c So no matter what field you are in Python can assist in making your work and that of your enterprise easier, faster and secure.

Now you are convinced Python is for everyone, especially you. Where do you go from here.
You can begin by identifying the niche area you would like to delve into or an area that sparks your interest. Let us discuss some areas you can explore.

Python for what?

Web Development

Python is widely used in developing web applications. It is commonly used to create the backend of the web applications. There are useful libraries like HTTP. The libraries assist in managing content and the databases.
There are frameworks like Flask, Django, FastAPI that help create robust web applications.

Data Analytics and Data Science

This is an emerging field where data that is often in large amounts is used to draw insights that accelerate businesses. There are various modules that are used and the are:

Numpy
Matplotlib
Pandas
Seaborn

Automation

There are tasks which are repetitive and considered time consuming. Python can be used to write scripts that automate the tasks and save on time and cut down on costs.

Gaming

Python can be used to create games. Amazing 3D games can be created using packages like Pykyra and Pygame. Games engines can be created using Python.

Embedded Systems

Embedded systems are software that are set in hardware devices to perform special functions. An example is light sensors, where the software which is a microprocessor is used to power and control the hardware. In the event of an action the sensors are triggered and the either go on or off. It also enables the communication of devices.

There are many other applications. Take your time to explore as many as you can and select any that sparks your interest or that aligns with the career path you are on.

Once you select your area, you can then move to selecting a learning path. There are several ways to go about this and they are as follows:

Online Courses and Bootcamps There are numerous resources and courses that you can use to get knowledge on Python. They range from free courses to paid courses. Select that which sits right with you. Here are some platforms you can access the courses: Paid Platforms
Udacity
Udemy
Coursera
Pluralsight
Tutorialspoint
Python Developer’s Advanced Certification

Free platforms

You can opt for self-paced courses or join a coding bootcamps for your learning journey.

Coding challenges Once you learn the basics you can test your knowledge with coding challenges. They help sharpen your skillset and help you practice the concepts you have learned. Some platforms you can challenge yourself are :
Hackerrank
Leetcode
Codewars

Hot tip: During interviews employers often take challenges from theses and other code challenge sites to test you at the technical stage.

Read the documentation
Python have one of the best documentation out there. Make use of the documentation. Make it a habit to go through the docs during your learning and debugging process.
Join a community
This is a paramount aspect for every developer. Join a community of developers whether physical or online. This will set you up for success and the community members will assist you be accountable and consistent. They serve to empower each other and foster growth of individuals.

If you ant to go fast. go alone. If you wat to go far, go together
~ African Proverb

Build as You Learn

After you learn and test yourself, do not stop there. Keep practicing! Now you can dive into your niche area and practice.
Make a habit of sharing what you build with the world. Write a blog post or share a screenshot of what your script can do. It promotes personal accountability and will help you network with others on the same path as you.

Until next time, may the code be with you!

Introduction to data structures and algorithms in Python

Andisi (Roseland) Ambuku — Sun, 20 Feb 2022 21:39:10 +0000

In this article we will explore the most fundamental concept in Python and programming.

A good grasp of data structures and algorithms and the ways to implement them will assist you solve challenges using code and create robust solutions to real world problems.

Data structures and algorithms can be a bit of a headache but by the end of this article you'll have the pain relief for that headache.

Data Structures

A data structure is a special format in which data you can organize, process, retrieve and store data.
There are various types each used for particular purposes.
Data structures are important in assisting users organize data for easier use.

Built-in
I have covered this type in detail in the previous article PYTHON 101: ULTIMATE GUIDE TO PYTHON

List
A list is a collection of data which is ordered and modifiable. It can have duplicate values.
Tuple
A tuple is a collection of data which is ordered and unmodifiable. It can have duplicate values.
Set
A set is a collection of data which is unordered, unmodifiable and un-indexed. It cannot have duplicate values.
Dictionary
A dictionary is a collection of data which is unordered and modifiable and indexed. It cannot have duplicate values.

User-defined
User defined data structures allow users to control the functionality of the data structures and create them too.

Stack - A stack is a linear data structure that stores data in a FILO(First In Last Out) format. A new element is added at one end and removed at only that end. Deleting an item is called pop while adding an item is called push. Illustration

Implementation using a list

stack = []
stack.append("Andisi")
stack.append("Ambuku")
stack.append(2022)
print(f"Initial stack : {stack}")
Initial stack : ['Andisi', 'Ambuku', 2022]
stack.pop()
2022
stack.pop()
'Ambuku'
stack.pop()
'Andisi'
print(f"Stack after elements are removed : {stack}")
Stack after elements are removed : []

Queue - A queue is a linear data structure that stores items in FIFO(First In First Out) format. The last item to be added is the first to be removed.

Illustration

queue = []
queue.append("Andisi")
queue.append("Ambuku")
queue.append(2022)
print(f"Initial Queue is {queue}")
Initial Queue is ['Andisi', 'Ambuku', 2022]
queue.pop(0)
'Andisi'
queue.pop(0)
'Ambuku'
queue.pop(0)
2022
print(f"Queue after removing element: {queue}")
Queue after removing element: []

Linked list -
A linked list is a linear data structure where elements are not stored at adjoining memory locations. The elements are linked using pointers.
Illustration
Tree -
A tree is a hierarchical data structure that looks like this

Illustration

the top part is called the root and the successive parts below it are called nodes. The noes without successors or children are called leaf nodes

Graph - A graph is a nonlinear data structure that has edges and nodes (vertices). The edges connect two nodes.

Illustration

Hash map - A hash map is an indexed data structure. It uses a hash function() to get the index with a corresponding key into an array of slots. The key is unique and cannot be changed.

Illustration

Heap - A heap is a data structure that is used to show a priority queue. This data structure gives the smallest element when an element(at random) is popped. When items are popped or pushed the structure of the heap is maintained.

Illustration

Algorithms

An algorithm is a set of rules that are followed to solve a problem. Input is given then the algorithm is executed and an output which is the solution results from the process.

Sorting algorithms
A sorting algorithm is a set of instructions accepts lists or arrays as input and arrange the items in a specific order.
Sorting algorithms are useful in organizing data in a particular order. They make disorganized data more organized and easier to use.

Examples of sorting algorithms include:

Bubble sort
Insertion sort
Merge sort
Shell sort
Selection sort

Searching algorithms
Searching algorithms are sets of instructions used to search for an item in the data structure where it is contained. They are categorized into:

Sequential search - This type of search algorithms are used on lists or arrays where they traverse every element sequentially and each element is checked until the solution is found then the process stops. An example is Linear Search

Illustration from Geeks for Geeks

Interval Search - This type of search algorithms are used on sorted data structures for example, a sorted array. They divide the search space in two and keep doing so until the solution is found then the process stops. An example is Binary Search.

Illustration fromGeeks for Geeks

Graph algorithms
A graph algorithm is a set of instructions that travel through (traverse) the nodes of a graph. It is used to find a particular path between nodes or a particular node.

Graph algorithms have many uses one real world use is in taxi cab applications. The algorithm is implemented on the map feature to find the cheapest or the shortest path for a vehicle using a specified route.

Depth-first traversal - A depth-first search traverses the graph by checking the current node and then continuing to to one of its successors and repeating the same process. In case the current has no successor the algorithm goes back to its predecessor and then checks for successors and if the solution is found the search stops.

Illustration from Freecodecamp

Breadth-first traversal - The breadth-first search traverses the graph by checking the current node first and then enlarges it by including its successors to the consecutive level. This goes on all nodes it the current level then it continues to the next level until the solution is found the the search ends. Illustration from Simplilearn

Properties of algorithms

Finite
An algorithm must end after a defined number of steps for any input entered.
Output specified
An algorithm has to give an output as a result of the input it was given by a user. The output is the solution of the process.
Effective
An algorithm's steps should be done accurately and within a finite amount of time.
Input specified
An algorithm has to be given input values to perform the process needed to generate a solution to a problem.
Definite
An algorithm must have specified steps that it follows in generating the solution to a given problem.

Until next time, may the code be with you!

PYTHON 101: ULTIMATE GUIDE TO PYTHON

Andisi (Roseland) Ambuku — Fri, 11 Feb 2022 07:10:10 +0000

What is Python?

Python is a general-purpose, interpreted, high-level programming language. It is a mouthful of a definition so let’s break it down;

General-purpose means you can use Python in fields like automation, web applications, and data science.
Interpreted means that you write Python code in a file called a source code and then the Python interpreter changes the source code to machine-readable code, a line at a time.
High-level means that this language is simple to learn as you do not need to know the particulars of the computer to develop programs using Python.

Features of Python

Open Source: Python is free and easily accessible via their official website and being open source means that the source code that makes the language is available to the general public. You can access it on the Python Website.
Object-Oriented Language: Python supports the use of objects and classes to write programs and build applications.
Simplicity: Python is high-level programming and this makes it easy to understand, learn and code in.
Portability: Python is the portable meaning if there is Python code on a Windows machine it can run on another machine with a different operating system like Linux.
Dynamically Typed: this means that there is no need to specify the type for example int for an integer value as it is decided at the run time of the program.

Installation

Download the latest version here.
Once downloaded, add Python to the path variable in your machine and
Follow the prompts to install it.
Choose a code editor such as VS Code, PyCharm, Kite, or Sublime Text.

Now you are ready to begin coding in Python!

Note: It is better to select a Python version that has security as opposed to those with bug fixes. It ensures the security of the programs you will write. At the time of writing this article, it is version 3.8.

Syntax in Python

Comments
These describe what a piece of code does and why it was written. The Python interpreter ignores comments when it executes the code.

# This is a comment on a single line.

Identifiers
These are names that identify objects such as functions and variables. The name of an identifier needs to begin with a letter or an underscore ( _ ).

Keywords
These are words with special meaning and cannot be used for any other purpose other than what they stand for.
Examples

False
class
finally
return
global

Literals
These are the values that are assigned to variables or constants. There are four types which are:

String literals
Numeric literals
Boolean literals
Special literals

Indentation and White spaces
In Python indentation and white spaces are used to create the code structure.
Example

def value():
    i = 13
    max = 100
    while (i < max):
        print(i)
        i = i + 1

# call function value
value()

Variables
A variable is a name that is used to specify a location in memory. When you first assign a value to a variable it is created and stored in memory. As you continue creating your program you can change the value of the variable.
Example

middle_name = 'Andisi'

Standards for creating variables in Python

A variable must begin with an underscore or a letter.
The keywords in Python cannot be used to name a variable.
Variable names are case-sensitive for example, food, Food, and FOOD are three different variables.
A variable name cannot begin with a number.
A variable name can only contain underscores and alphanumeric characters (0-9, a-z, and _ ).

Operators
Operators are used in performing operations on values and variables.

Arithmetic operators – These are used to perform mathematical operations on numerical values Addition + Subtraction - Multiplication * Division / Modulus %
Assignment operators – these are used in assigning values to variables. See example at W3 Schools
Comparison operators – these are used in comparing two values Equal = = Not equal ! = Greater than > Less than < Greater than or equal to < = Less than or equal to >=
Logical operators – these are used in combining conditional statements. They include, and, or, not.

Data types
A data type is the classification of data in Python. The following are the standard datatypes in python:

Text – this is a data type that consists of text written as a string. It is written using single, double, and triple quotes. Example

learning = 'My first string'

Numeric – this is a data type that represents numbers. They include:

Integers – These are positive or negative whole numbers. They are indicated using int.
Float – These are numerical values with decimal points. They are indicated using float
Complex numbers – These are complex class values. They look like this, (real part) + (imaginary part)k for example 3+4k. They are indicated using complex

Sequence – This is a data type that is a collection of ordered similar or different data types. The sequence stores multiple values in an ordered way. List – This is an ordered and modifiable collection of data that allows duplicate values.

fruits = ['mango', 'orange', 'grapes', 'pineapple']

Tuple – This is an ordered and unmodifiable collection of data that allows duplicate values.

drinks = ('water', 'soda', 'mocktails', 'yogurt')

Mapping – This is a data type that is used to store values much like a map. Dictionary -This contains key and value pairs. It is an unordered and unmodifiable collection of values.

person = {'name':'Andisi', 'gender' :'female', 'country': 'Kenya',}

Set – This is an unordered collection of values that is mutable. It is indicated as 'set'
Example

pets = {'cat', 'dog', 'parrot', 'fish'}

Boolean – This data type has two values, true or false. Example

Control Flow
This is the order of code execution in a program to arrive at various specified decisions. The control flow is made possible using if statements, loops, and function calls.

If... Else statements

r = 4
if r < 0:
    print('r is a negative number')
else:
    print('r is a positive number')

For loops

fruits =['mango', 'orange', 'grapes', 'pineapple']
for fruit in fruits:
    print(fruit)

While loops

t = 0
while t < 6:
    print(t)
    t = t + 1

Classes
A class is a “blueprint” for creating objects. Python is an object-oriented programming language and as such everything is an object and they have methods and properties. Classes are created to create objects.
Example

class Human:
    pass
print(Human)

Until next time, may the code be with you!