DEV Community: The ERIN

How to Create and Send Custom Emails using React Email and Resend API

The ERIN — Mon, 07 Aug 2023 11:55:59 +0000

Frontend developers often face challenges when sending custom emails directly from their applications. This process required complex backend setups and specialized knowledge, making it difficult for beginners to handle. However, thanks to Next.js and user-friendly APIs such as the React Email and Resend API, creating and sending personalized emails has become much more straightforward.

In this beginner-friendly guide, you'll explore using React Email and the Resend API to craft and send customized emails effortlessly. This way, you can easily communicate with your users in a more tailored and personalized manner. Let's dive in and discover the exciting possibilities of email customization with React and the Resend API!

Prerequisites

To follow through with this tutorial, you need the following:

Basic knowledge of TypeScript and its syntax
Basic understanding of Next.js.
npm installed on your computer. You can get it here if you don’t have npm installed on your computer.
A Resend account. You can create a free account by clicking here.

Setting up the Development Environment

To start creating and sending custom emails using React Email and Resend API, you have to set up a new Next.js project with TypeScript. Next.js is a popular React framework that offers server-side rendering and other powerful features for building modern web applications. TypeScript, on the other hand, provides static typing to your JavaScript code, enhancing code quality and productivity.

Creating a Next.js Project

To create a new Next.js project with TypeScript, follow these steps:

Open your terminal or command prompt and run the following command:



npx create-next-app@latest

Next, you will be prompted to give your project a name. Also, choose TypeScript as your preferred language. You can use the new App Router folder or the srcdirectory. You should choose the App Router as your root directory for this article.

After the prompts, create-next-app will create a folder with your project name and install the required dependencies.

With your Next.js project set up, the next step is to install the necessary dependencies for working with React Email and Resend API. These libraries will let you create custom email templates and handle email sending efficiently.

Installing React Email and Resend Dependencies

To install react email package locally with a few components in your project.

Run the following command in your terminal:



npm install react-email @react-email/button @react-email/html @react-email/components

Add the following script to your package.json



{
  "scripts": {
    "dev": "email dev --dir app/emails"
  }
}

This script starts a local development server and will watch your files located in the app/emails directory and automatically rebuild your email when you make changes.

Next, you have to install the Resend API to your project. To do this, run the following command in your terminal.



npm install resend

Once all the installations are complete, your project will have the necessary tools for this article.

In the following sections, you will learn how to design engaging email templates and implement the email-sending functionality with React Email and Resend API.

Creating and Designing the Email Template Component

In this section, you’ll create a personalized email template component containing your email templates.

Create an' email' folder in your app directory. Inside the folder, create a new file called Subscribe.tsx. This file will contain the structure of your email template.
Copy the following code snippet and add it to your file.



import {
  Body,
  Container,
  Head,
  Html,
  Preview,
  Section,
  Text,
} from "@react-email/components";
import * as React from "react";

interface SubscribeEmailProps {
  name?: string;
  email?: string;
}

export const SubscribeEmail = ({name, email}: SubscribeEmailProps) => {
  return (
    <Html>
      <Head />
      <Preview>Dropbox reset your password</Preview>
      <Body style={main}>
        <Container style={container}>
          <Section>
            <Text style={text}>Hi {name},</Text>
            <Text style={text}>
              Thank you for subscribing to our Newsletter. Your {email} has been added to our mailing list
            </Text>
            <Text style={text}>
              Our Bi-weekly newsletter will always be in your inbox with all.
              Major Announcements, Special Offers, and much more exciting
              things. We won't spam your mailbox. See you soon!
            </Text>
            <Text style={text}>
              If you've got any other questions, please don&apos;t hesitate to
              contact Us via our Help Center for more help.
            </Text>
            <Text style={text}> Thank you. Happy Coding!</Text>
          </Section>
        </Container>
      </Body>
    </Html>
  );
};

export default SubscribeEmail;

const main = {
  backgroundColor: "#f6f9fc",
  padding: "10px 0",
};

const container = {
  backgroundColor: "#ffffff",
  border: "1px solid #f0f0f0",
  padding: "45px",
};

const text = {
  fontSize: "16px",
  fontFamily:
    "'Open Sans', 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif",
  fontWeight: "300",
  color: "#404040",
  lineHeight: "26px",
};

const button = {
  backgroundColor: "#007ee6",
  borderRadius: "4px",
  color: "#fff",
  fontFamily: "'Open Sans', 'Helvetica Neue', Arial",
  fontSize: "15px",
  textDecoration: "none",
  textAlign: "center" as const,
  display: "block",
  width: "210px",
  padding: "14px 7px",
};

const anchor = {
  textDecoration: "underline",
};

Let's break down the code snippet to understand how it crafts a visually appealing and informative email.

The import statement starts by importing Body, Container, Head, Html, Preview, Section, and Text components from the @react-email/components library. These components are essential building blocks the @react-email/components library provides to create and design email templates using React.

Following the imports, the code defines an interface named SubscribeEmailProps. The interface specifies the prop types that can be passed to the SubscribeEmail component. In this case, the interface includes two optional properties: name of type string and email of type string. The nameand email props are marked as optional by using the ? symbol after their names means they can be provided or left undefined.

Finally, the email has an inline CSS style for various elements.

To preview your email template, start a development server. Open up your terminal and run the following command:



npm run email

This will install additional dependencies to help set up the development environment. Once installed, head to https://localhost:3000 to preview your email template.

NOTE: You might get a “failed to start server” error message like this below. To resolve this issue, ensure no application is running on https://localhost:3000 on your machine. Once you have terminated the application, rerun the npm run email command. Your application should be running on the development server now.

After rerunning the development command, your environment will look like the image below. From the development server, you can inspect the source code of the template, and you can also preview all other email templates you have created.

react-email has pre-built components that are traditionally inside an email template for you to build customized and personalized templates. It also has a Tailwind component that lets you use tailwind classes.

Different examples are available for you to explore from other templates you might have seen of some popular services or brands like Airbnb, Nike, Notion, and many more. Check out their examples page to explore more editable email template designs.

Configuring the Resend API from the Server-Side

Now that your email template is ready, you can integrate the Resend API with the react-email package and send emails conveniently. react-email is compatible with integrations like Nodemailer, SendGrid, Postmark, AWS SES, and many more. Resend is the creator of react-email, and it provides easy to setup integration options with the react-email package.

To get started,

Log in to your Resend account to get your API Key. Click on API keys from the sidebar. Create a new API key on the API keys page by clicking the “Create API Key” button.

Give your API key a name, choose the full access option for the Permissions input, and click the Add button to generate an API Key.

Note: You can only copy your secret key once after generating it, so save it somewhere on your computer. If lost, you can always generate a new API key.

In the root directory of your project, create a new file called .env. Inside the .env file, define your environment variable with the key-value pair. For example,



RESEND_API_KEY=your_openai_api_key_here

Save the .env file. Note that you should replace your_openai_api_key_here with your actual OpenAI API key.

Next, create a folder called api inside your app directory. Inside the api folder, create another folder called email and then a file named route.ts. route.tswill contain the logic to the code that lets you directly send emails to your user's emails.
Add the following code snippet to the route.ts file.



import { Resend } from "resend";
import SubscribeEmail from "@/app/emails/subscribe";
import { NextResponse } from "next/server";

const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST(request: Request) {
  const { name, email } = await request.json();

  await resend.sendEmail({
    from: "onboarding@resend.dev",
    to: email,
    subject: "Thank you for Subscribing to our Newsletter",
    react: SubscribeEmail({
      name,
      email,
    }),
  });

  return NextResponse.json({
    status: "OK",
  });
}

This code snippet is a serverless function. Its purpose is to handle incoming POST requests and send a custom email to the subscriber using the Resend API.

It starts by importing the necessary modules: Resend from the resend library, SubscribeEmail from the @/app/emails/subscribe file (representing the custom email template), and NextResponse from next/server (used to return responses from the Next.js serverless function).

It then creates a new instance of the Resend class by passing the RESEND_API_KEY stored in the environment variable. This step sets up the Resend API client, allowing communication with the Resend service for sending emails.

It defines an asynchronous function that takes a request object as its parameter. This function will handle incoming POST requests. Within the function, the incoming request body is parsed using await request.json().

The resend.sendEmail method sends the custom email to the subscriber. It takes an object as an argument with the following properties:

from: The email address from which the email will be sent.
to: The recipient's email address.

subject: The subject of the email.

react: The email's content is generated by calling the SubscribeEmail component and passing the name and email values.

After sending the email, the function returns a JSON response using NextResponse.json with the status set to OK.

NOTE: You need a valid email address as your value to the from key to send your emails properly.
Resend provides an email address(onboarding@resend.dev) for the development environment. You do not want to use this email in your production environment due to performance issues, and Resend not supporting the email address for the production environment. Instead, connect your domain to your Resend account, and include the email address as your value to the from key.

In the next section, you will learn how to integrate the Resend API into your web forms and initiate the email-sending functionality.

Integrating Resend API to Send Custom Emails from the Client Side

In this section, you will integrate the Resend API into a form to enable seamless email communication with your users. To get started:

Add the following code snippet to your page.tsx file:



"use client";

import React, { useState } from "react";


const ContactForm = () => {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");

  const handleChange = (e) => {
    setName(e.target.value);
  };

  const handleEmailChange = (e) => {
    setEmail(e.target.value);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    await fetch("/api/email", {
      method: "POST",
      body: JSON.stringify({
        name,
        email,
      }),
    });
  };
  return (
    <>

        <h2>Subscribe to our Newsletter</h2>


        <div>
          <p>Name</p>
          <input
            type="text"
            name="name"
            id="name"
            value={name}
            onChange={handleChange}
          />
        </div>
        <div>
          <p>Email</p>
          <input
            type="email"
            name="email"
            id="email"
            value={email}
            onChange={handleEmailChange}
          />
        </div>

      <button type="submit" onClick={handleSubmit}>
        Subscribe
      </button>
    </>
  );
};

export default ContactForm;

This code snippet implements a contact form for subscribing to a newsletter. It utilizes React's state management with useState to capture and update the user's name and email input. The form triggers an asynchronous handleSubmit function when clicking the Subscribe button.

Within this function, the form data (name and email) is sent to the backend server using the fetch API as a POST request to the /api/email endpoint. This allows the server to handle email sending with the Resend API, facilitating efficient communication with users.

The ContactForm component is designed to provide an intuitive user experience for subscribing to the newsletter, enhancing email communication with potential subscribers.

Start your client-side development server and preview your web application at https://localhost:3001. As I highlighted in the “Configuring the Resend API from the Server-Side“ section, Don’t use the resend onboarding email “onboarding@resend.dev” during production; instead, connect your domain to your Resend account to avoid email-sending performance issues.

Conclusion

In conclusion, this article has demonstrated the seamless integration of React Email and Resend API to create and send custom emails with personalised content. You started by setting up a Next.js project with TypeScript, utilizing React Email's components to design captivating email templates. You then used the Resend API to deliver the custom emails to subscribers efficiently.

Following the steps outlined in this tutorial, you have acquired the foundational knowledge to elevate your email communication and engage your audience effectively. However, the capabilities of React Email and Resend API extend beyond what was covered here.

As you continue your journey, explore more advanced React Email and Resend API features, such as email tracking, email analytics, and automated email campaigns. By harnessing the full potential of these tools, you can create immersive email experiences that leave a lasting impact on your users.

Happy Coding!

Transforming Pixels into Imagination: Building an AI-Powered Image Generator with React.js and OpenAI API

The ERIN — Wed, 19 Jul 2023 07:51:48 +0000

Have you ever wished to bring your wildest visions to life with just a few lines of code? With the power of React.js, a popular JavaScript library for building user interfaces, and the OpenAI API, you will dive into deep learning to generate stunning images that were once imaginable.

Don't worry if you're new to React.js or AI. This guide will walk you through the process step-by-step, with interactive code snippets and explanations. By the end, you'll have a working image generator to produce captivating visuals at your command.

Are you ready to unlock the potential of AI and embark on an extraordinary adventure in image generation? Let's dive in and bring your imagination to life pixel by pixel!

Prerequisites

To follow through with this tutorial, you need the following:

A basic understanding of React.js and its syntax.
npm installed on your computer. You can get it here if you don’t have npm installed on your computer.
An OpenAI account. You can create a free account by clicking here.

Project Repository

You can find the GitHub repository, which contains all the code for this article, here.

Overview of OpenAI and its Image Generation Capabilities

OpenAI is a leading organisation at the forefront of artificial intelligence research and development. OpenAI's image generation capabilities are driven by advanced deep learning models trained on massive datasets. These models have learned to understand visual patterns and generate stunning images that push the boundaries of creativity. Through the OpenAI API, you can harness these powerful models and integrate them into your applications.

One of the notable image generation models from OpenAI is DALL-E. This model combines the power of deep learning with textual prompts, allowing users to describe an image concept using words. DALL-E can generate unique and imaginative images based on those prompts, creating a fascinating interplay between language and visuals.

In the following sections, you will explore how to tap into OpenAI's image generation capabilities using React.js and the OpenAI API. You will learn how to build an AI-powered image generator that leverages the immense potential of OpenAI's models.

Obtaining OpenAI API credentials

To get started with getting your OpenAI API keys, follow these steps:

Login to your OpenAI account and click on your profile icon, which can be found at the top right side of the page. Click “View API keys” from the menu options. This will take you to the API keys page, where you can manage your API keys.

If you already have existing API keys, you can only edit or delete them. For this article, you need to create a new API key. To create a new API key, click "Create New API Key" to generate a new one. You will be prompted to provide a name or description for the key for easier identification.

After generating the API key, a random mix of alphabets and numbers will be displayed on the screen. Make sure to copy and save the key securely, as it is sensitive information necessary for making API requests.

Note: You can only copy your secret key once after generating it, so save it somewhere on your computer. If lost, you can always generate a new API key.

Once you have obtained your new API key, you can authenticate and access the OpenAI API in your applications or projects.

Setting Up the Development Environment

In this section, you’ll create a React project with Vite. Let's first understand what Vite is. Vite is a fast-build tool and development server designed to optimize your React development workflow. It leverages native ES modules, which significantly speed up the development process.

To start, open your terminal and follow these steps:

Create a new vite project by running:


 npm
$ npm create vite@latest

This command will prompt you to give your application a name. You can give it a proper name like “image-generator-app.” Also, the prompt will require you to select what library or framework you need for your project. To follow through with this article, you have to choose React and JavaScript as your preferred library and programming language.

Next, to preview the application in the browser, navigate to the project directory and run the development server, accessible at http://localhost:5173.



cd image-generator-app
npm install
npm run dev

Integrating React with OpenAI API

Now that your application is running. Next, you have to install the OpenAI dependency. In your terminal, run the following command:



npm i openai

In the root directory of your project, create a new file called .env. Inside the .env file, define your environment variable with the key-value pair. For example,



VITE_APP_API_KEY=your_openai_api_key_here

Save the .env file. Note that you should replace your_openai_api_key_here with your actual OpenAI API key.

Creating the User Interface Components

In the src folder, create a folder called components. In the components folder, create a new file and name it ImageGenerator.jsx.

Import the required modules needed for the component.



import { useState } from "react";
import { Configuration, OpenAIApi } from "openai";
import '../index.css'

The Configuration module and OpenAIApi module are part of the OpenAI API package, which provides functionality for interacting with OpenAI's services, specifically their language models.

The Configuration module stores and manages configuration settings for API requests to OpenAI. It acts as a central place to set up and configure the necessary details for API communication.

The OpenAIApi module, on the other hand, provides methods and functions for making API requests to OpenAI. It acts as an interface to communicate with OpenAI's language models and other features they provide.

Define a functional component, and add the following code snippet.



function ImageGenerator() {
  // STATE VARIABLES
  const [userPrompt, setUserPrompt] = useState("");
  const [generatedImage, setGeneratedImage] = useState("");
  const [loading, setIsLoading] = useState(false);

  // OPENAI CONFIGURATION
const configuration = new Configuration({
  apiKey: import.meta.env.VITE_APP_API_KEY
});

const openai = new OpenAIApi(configuration);

  // Event Handlers
  const handleChange = (e) => {
    setUserPrompt(e.target.value);
  };

  const handleImageHandler = async (e) => {
    try {
      setIsLoading(true);
      e.preventDefault()
      const result = await openai.createImage({
        prompt: userPrompt,
        n: 1,
        size: "512x512",
      });

      console.log(result, 'result')
      setGeneratedImage(result.data.data[0].url);
      setIsLoading(false);
    } catch (e) {
      setIsLoading(false);
      console.log(e);
    }
  };

  const handleCopyToClipboard = () => {
    navigator.clipboard.writeText(generatedImage)
      .then(() => {
        console.log("Image URL copied to clipboard");
      })
      .catch((error) => {
        console.error("Failed to copy image URL to clipboard:", error);
      });
  };

The provided code defines a React component called ImageGenerator. It sets up state variables using the useState hook to manage user input (userPrompt), the generated image URL (generatedImage), and a loading indicator (loading).

The code also initializes the OpenAI API configuration using an API key from the environment variables. It creates an instance of the OpenAIApi class, which will be used to interact with OpenAI's services.

The component includes event handlers. handleChange handles the user input change event and updates the userPrompt state accordingly. handleImageHandler is triggered when a form is submitted. It sends an asynchronous request to OpenAI's image generation API using the openai.createImage method, passing the prompt, n and size parameters.

prompt: refers to the userPrompt variable, which contains the user's input or prompt for generating the image.

n: It specifies the number of images to generate. In this case, n is set to 1, indicating that only one image will be generated.

size: It specifies the desired dimensions of the generated image. In this example, the image size is set to "512x512".

The generated image URL is extracted from the API response and stored in the generatedImage state. If an error occurs, it is caught and logged into the console.

The handleCopyToClipboard function utilizes the navigator.clipboard API to copy the generated image URL to the clipboard when triggered.

In summary, this code creates a React component that allows users to input a prompt. When a form is submitted, it sends the prompt to OpenAI's image generation API and displays the generated image. Users can also copy the image URL to the clipboard.

Finally, render the Image generator component's React JSX elements.



return (
    <div className="app__container">
      <h1>AI-Powered Generated Images</h1>

      <div className="image__input">
        <input
          type="text"
          name="userprompt"
          id="userprompt"
          placeholder="Enter a prompt."
          onChange={handleChange}
          value={userPrompt}
        />

        <button onClick={handleImageHandler}>Generate Image</button>
      </div>
      <div className="image__box">
        {loading ? (
          <>
            <p>Please Wait!</p>
            <p>This will only take a few seconds</p>
          </>
        ) : (
          <>
            {generatedImage && (
              <div className="image__actions">
                <button onClick={handleCopyToClipboard}>Copy URL</button>
              </div>
            )}
            <img src={generatedImage} alt="" />
          </>
        )}
      </div>
    </div>
  );
}

export default ImageGenerator;

The code represents the rendering logic of the ImageGenerator component. It returns a JSX structure that defines the user interface for the component.

The component renders a container div with a heading displaying "AI-Powered Generated Images". Inside the container is an input field where users can enter a prompt. The onChange event is bound to the handleChange function, which updates the userPrompt state as the user types. The input field's value is set to the userPrompt state to reflect its current value.

Next, a button labelled "Generate Image" triggers the handleImageHandler function when clicked. This function initiates the image generation process by sending a request to the OpenAI API.

Below the input section is a div with a className of image__box. If the loading state is true, it displays a loading message indicating that the image is being generated. Otherwise, it renders an image element with the source set to the generatedImage state, which displays the generated image. A "Copy URL" button also triggers the handleCopyToClipboard function to copy the image URL to the clipboard.

In summary, this code defines the user interface for the ImageGenerator component, which allows users to enter a prompt, generate an image based on that prompt, and display the generated image with options to copy its URL.

Enhancing Image Generation

Once you have incorporated all the previous code snippets into your ImageGenerator component, update your App.jsx file by adding the following code:



import ImageGenerator from "./components/ImageGenerator";

function App() {
  <>
    <ImageGenerator />
  </>;
}

export default App;

Adding Styling to Your Component

Replace the boiler-plate CSS styling in your index.css file with the following styles:




@import url('https://fonts.googleapis.com/css2?family=Ysabeau+Infant:wght@300&display=swap');


:root {
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}


body {
  margin: 0;
  padding: 0;
  font-family: 'Ysabeau Infant', sans-serif;
}

.app__container {
  display: flex;
  flex-direction: column;
  gap: 25px;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

.image__input {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  align-items: center;
  justify-content: center;
}

button,
input {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
}

input {
  width: 30%;
}

button:hover {
  border-color: #646cff;
}

button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}

@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #f9f9f9;
  }
}

You can restart the development server to apply the changes made and use your browser to navigate to http://localhost:5173 to test the image-generating capabilities.

When utilizing an AI tool to generate an image, provide a comprehensive prompt in the input field to achieve the best results. This entails describing the image as thoroughly as possible without missing any details.

Prompt Engineering provides a comprehensive prompt in the input field describing the image as thoroughly as possible without leaving out any details to get the best result. It entails giving detailed prompts so the language model can produce the best results based on user inputs.

Conclusion

In conclusion, building an AI-powered image generator using React.js and the OpenAI API offers a fascinating opportunity to explore the capabilities of artificial intelligence in creative applications. This article has covered the essential steps to creating such a web application.

By leveraging the power of React.js, you have developed a user-friendly interface that allows users to input prompts and generate unique and captivating images. The integration of the OpenAI API enables you to tap into advanced machine learning models and algorithms, resulting in high-quality image generation based on user prompts.

You have created a seamless user experience showcasing AI-driven creativity's potential through state management, event handling, and asynchronous operations. Following the outlined steps, you have gained a solid foundation for building upon this project and exploring further possibilities.

Additional Resources and References

How to Migrate Existing AWS Accounts into AWS Organizations

The ERIN — Tue, 11 Jul 2023 09:00:00 +0000

AWS Organization is not just a mere reorganization of your accounts; it's a game-changer that empowers you with centralized management and greater visibility across your AWS environment. Imagine enforcing policies, setting access controls, and streamlining billing across multiple accounts effortlessly. AWS Organizations brings these capabilities to the table, making it a must-have for organizations of all sizes.

This article will guide you through migrating your AWS accounts into AWS Organizations. It will also share best practices, common challenges, and troubleshooting tips to ensure a smooth transition. By the end, you'll have the knowledge and tools to optimize your account structure, simplify permissions management, and enhance overall control over your AWS resources.

Prerequisites

To follow through with this article, you need the following:

Basic understanding of Amazon Web Services (AWS) and its account structure.
Existing AWS accounts that need to be migrated into AWS Organizations.
Access to an AWS Management Console with appropriate permissions to create and manage AWS Organizations.
Web browsers like Google Chrome, Safari, Mozilla Firefox, and Microsoft Edge can handle different browsing sessions.

Understanding AWS Organizations

AWS Organizations is an effective service offered by Amazon Web Services (AWS) that allows you to manage multiple AWS accounts in a centralized and efficient manner. It acts as an umbrella or a management layer over your AWS accounts, enabling you to organize, govern, and control them effectively.

Imagine several AWS accounts within your organization, each serving different teams, departments, or projects. AWS Organizations helps you combine all these accounts under one umbrella, providing a unified view and management capabilities. It simplifies your account structure and allows you to set consistent policies, permissions, and controls across all accounts.

AWS Organizations are created within a standard AWS account, which will automatically be the “management, master or payment” account. Think of the management account as the central hub of AWS Organizations. The primary account controls and manages other AWS accounts within the organization. The management account is where you set up and configure AWS Organizations.

Now, let's talk about member accounts. Member accounts are the individual AWS accounts that are associated with the organization. These accounts can represent your organization's teams, departments, projects, or business units.

Member accounts inherit settings, policies, and permissions from the management account, providing a consistent framework across the organization. However, they still maintain their separate identities and can have their unique configurations and resources.

The management account has administrative control over the member accounts. It can invite existing AWS accounts to join the organization or create new accounts as needed. The management account also manages the hierarchy of accounts by creating Organizational Units (OUs) and organizing member accounts within them.

Organizational units (OUs) act as containers or groupings within AWS Organizations. They allow you to organize member accounts based on specific criteria like teams, projects, or regions. This hierarchical structure provides flexibility in managing and applying policies and permissions at different organizational levels.

Benefits of AWS Organizations

AWS Organizations offers many benefits that empower businesses to efficiently manage and scale their cloud infrastructure. Some of these benefits are:

Simplified Account Management: AWS Organizations centralize the management of multiple AWS accounts. It provides a unified view and controls over your accounts from a single management account.
Enhanced Security and Compliance: AWS Organizations allows you to enforce security policies and compliance standards across your accounts. You can set consistent security configurations, access controls, and governance policies that ensure your resources are protected and your organization complies with regulations.
Cost Optimization and Consolidated Billing: With AWS Organizations, you can consolidate billing across multiple accounts. This streamlines cost management by providing a unified billing view and cost tracking. You can set budget limits, monitor spending, and optimize resource allocation for better cost control.
Streamlined Resource Sharing and Collaboration: AWS Organizations simplifies resource sharing and collaboration between accounts. You can share resources such as Amazon S3 buckets, or AWS Lambda functions across accounts within the organization. This promotes efficient collaboration, eliminates the need for complex sharing setups, and enhances resource utilization.

Steps for Migrating Existing AWS Account into an Organization

Step 0: Gather information

Before you begin, ensure you have access to the account where you want to create the organization and the account(s) you wish to move into the organization!

Step 1: Create an Organization

It would be best if you first created an AWS organization to migrate existing AWS accounts into the organization. An AWS organization is created within a management account, so using your general AWS account is advisable.

Sign in to the AWS Management Console using the AWS account credentials you want to set up as the management account. Ensure the account is not part of an AWS organization, i.e., neither a management nor a member account.

Once logged in, navigate to the AWS Organizations service. You can find this by searching for “AWS Organizations” in the service bar.

In the AWS Organizations console's Management console, click “Create Organization.” This starts the process of creating the organization. As part of that, it will convert your general account to the management account of the organization.

Once the process is complete, your console should look like this.

Step 2: Inviting existing accounts into the Organization

Open a new tab on your browser to log into other accounts you want to migrate to the created organization. Make sure this is an entirely separate session, and if in doubt, use a different web browser because you need to maintain logins to both the management account and the existing account you want to migrate.
At this point, you must grab the account ID for the other account. To get this: navigate to the account dropdown at the top right side of the console. Click on the account dropdown and copy the account ID to your clipboard.

Go back to the session where you have the management account open. Click the “Add an AWS account” button to invite an account to become a member.

Select the method to add the account. You have two options:

a) Invite account: If you have administrative access, you can send an invitation to the email associated with that account. The account owner will receive the invitation and can accept it to join the organization.

b) Create an account: If you have permission to create accounts, you can choose this option to create a new account and add it to the organization.

Choose the “Invite an existing AWS account” method for this article. You must provide the existing account's email address or the account ID.
Paste the account ID you copied to the clipboard to the account ID field.

If you are inviting an account, which you administer, you do not have to put any notes. If you invite an account administered by someone else, add a note.

Once you’ve inputted the email address or account ID, scroll down and click on the “Send invitation” button.

Depending on your specific AWS account, you may receive an error message telling you there are too many accounts within the organization. Different AWS accounts are created with different quotas, and you might get an error. If you get an error, you need to log a support request asking for an increase in the number of AWS accounts that can be part of an AWS Organization. This invite process has started if you do not get an error message.

Step 3: Accepting Invitations

Finally, you need to accept the invitation to become a member account of the organization.
On the member account console, navigate to the invitations page. You can find this on the left side of the page.

You should see an overview of the invitation from the management account and all other invitations that apply to that account.
Click on the “Accept invitation” button. This will complete the process of joining the organization. Now the existing account is a member account of the management account.

Return to the tab where the management account session runs to verify the complete process. Hit the refresh button on your browser, and you should be able to see the newly added member account.

Step 4: Repeat steps 1-3 for any additional accounts you want to migrate into the AWS Organization.

Congratulations! You have successfully migrated your existing AWS account into an AWS Organization. The account is now part of the organization's hierarchy, and you can leverage the centralized management, security, and governance features provided by AWS Organizations.

Best Practices for a Smooth Migration

Following these best practices and guidelines ensures a smooth migration process. By implementing these recommendations, you can minimize potential disruptions, mitigate risks, and maximize the success of your migration:

Review and Plan: Before migrating, assess your existing AWS account and identify any dependencies, resource configurations, or customizations. Plan the structure of your AWS Organization, including the hierarchy of Organizational Units (OUs) and policies you want to enforce.
Communicate and Collaborate: Inform stakeholders, team members, and users about the upcoming migration to set expectations and address concerns, and establish a communication plan to provide updates and guidance throughout the migration process.
Migrate in Phases: Consider a phased approach for migration, starting with a subset of accounts or resources to minimize disruption. Gradually migrate accounts or resources to the AWS Organization, ensuring each migration is successful before moving to the next phase. Monitor and evaluate the impact of the migration during each phase to address any issues proactively.
Monitor and Optimize: Regularly monitor the migrated accounts within the AWS Organization to ensure they function as intended. Continuously optimize your AWS Organization structure, policies, and access controls based on evolving requirements and feedback. Leverage AWS monitoring and management tools to gain visibility into your accounts' performance, cost, and security.

Conclusion

Congratulations on completing this beginner-friendly guide on migrating existing AWS accounts into AWS Organizations! By following the steps outlined in this article, you have the knowledge and tools to simplify your AWS account management and unlock the benefits of a centralized organization.

Migrating your accounts into AWS Organizations offers several advantages, including streamlined management, enhanced security, and optimized resource sharing. To ensure a smooth transition, create a clear plan, communicate effectively, and conduct thorough testing.

Take advantage of features like consolidated billing and access controls to efficiently manage your AWS resources and enforce consistent policies across your organization. Monitor and optimize your AWS Organization to adapt to changing requirements and maximize the benefits.

Now it's time to embark on your migration journey and experience the power of AWS Organizations. Enjoy the streamlined management and increased efficiency that awaits you! Happy migrating!

Creating Dynamic QR Codes Using React.js: A Step-by-Step Tutorial

The ERIN — Thu, 06 Jul 2023 17:35:43 +0000

Gone are the days when relying solely on traditional business cards was enough to make a lasting impression. Understanding that using a business card for your business might be considered old-fashioned, as you may run out of them or the person you give them to might misplace them. But fear not; dynamic QR codes offer a modern and efficient solution.

Imagine having the ability to instantly update contact information, special offers, or website links associated with a QR code without the hassle of reprinting and redistributing physical materials. That's where the magic of dynamic QR codes comes into play.

This tutorial will start by exploring the basics of QR codes and then delve into the world of React.js, a popular JavaScript library for building interactive user interfaces. It will guide you through creating and integrating dynamic QR codes into your projects, allowing you to enhance user experiences and revolutionize how you share information.

Prerequisite

To follow through with this tutorial, you need the following:

A basic understanding of React.js and its syntax
npm installed on your computer. You can get it here if you don’t have npm installed on your computer.

Project Demo

You can find the hosted demo of this article here. You can also find the GitHub repository, which contains all the code for this article, here.

Setting up the React.js project environment

Using Create React App, create a React.js project by running the following command in your terminal:

npx create-react-app qrcode-app

The preceding command creates a new react application with the name qrcode-app using the create-react-app tool.

Next, to preview the application in the browser, navigate to the project directory and run the development server, accessible at http://localhost:3000.

cd qrcode-app

npm start

Finally, install the dependency library for creating the QR code generator. In your terminal, run the following command:

npm i react-qr-code html-to-image

[react-qr-code](https://www.npmjs.com/package/react-qr-code) is a JavaScript library designed for use with React to generate QR codes quickly. At the same time, [html-to-image](https://www.npmjs.com/package/html-to-image) is a JavaScript library that lets you capture and convert HTML elements, such as a specific portion of a webpage or an entire HTML structure, into an image. It provides a simple and convenient way to take snapshots or screenshots of HTML content and save it as an image file, such as PNG or JPEG.

Designing the QR Code Component

Now that you have your development setup, the next step is designing and developing the QR code component. This component will contain the structure of the QR code and its enhancement for a better user experience.

Inside the src directory, create a folder called components and a file named QrCodeGenerator.jsx in the folder. In the QrCodeGenerator component, add the following code snippet.

function QrCodeGenerator() {
  const [url, setUrl] = useState("");
  const [qrIsVisible, setQrIsVisible] = useState(false);
  const handleQrCodeGenerator = () => {
    if (!url) {
      return;
    }
    setQrIsVisible(true);
  };
  return (
    <div className="qrcode__container">
      <h1>QR Code Generator</h1>
      <div className="qrcode__container--parent" ref={qrCodeRef}>
        <div className="qrcode__input">
          <input
            type="text"
            placeholder="Enter a URL"
            value={url}
            onChange={(e) => setUrl(e.target.value)}
          />

          <button onClick={handleQrCodeGenerator}>Generate QR Code</button>
        </div>
        {qrIsVisible && (
          <div className="qrcode__download">
            <div className="qrcode__image">
              <QRCode value={url} size={300} />
            </div>
          </div>
        )}
      </div>
    </div>
  );
}
export default QrCodeGenerator;

The QrCodeGenerator component is a simple QR Code generator that allows users to enter a URL and generate a corresponding QR Code. The component uses the useState hook to manage the state of the URL input field (url) and the visibility of the generated QR Code (qrIsVisible).

When the user clicks the "Generate QR Code" button, the handleQrCodeGenerator function is called. It checks if a URL has been entered and sets the qrIsVisible state to true, displaying the generated QR Code.

The component renders a container with a heading, an input field for entering the URL, and a button to trigger the QR Code generation. If the QR Code is visible (qrIsVisible is true), it renders the QR Code image using the QRCode component from a QR Code library.

Overall, this component provides a straightforward and user-friendly way to generate QR Codes based on the entered URL.

Styling the QrCodeGenerator Component

In the index.css file located at the root of the src folder. Go ahead and add the following CSS code.

@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@200;300;400;500;600&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Mulish', sans-serif;
}

.qrcode__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}

.qrcode__container--parent {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.qrcode__input {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 30%;
  margin-top: 20px;
}


.qrcode__input input {
  width: 100%;
  padding: 10px;
  font-size: 12px;
  outline: none;
  resize: none;
  border-radius: 5px;
  border: 1px solid #ccc;
  margin-bottom: 15px;
}

.qrcode__input button, 
.qrcode__download button {
  display: inline-block;
  padding: 7px;
  cursor: pointer;
  color: #fff;
  background-color: rgb(96, 96, 246);
  border: none;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  transition: background-color 0.2s;
}

.qrcode__download {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 20px;
}

.qrcode__download button {
  margin-top: 10px;
}

Enhancing the QR Code Component: Downloading the QR Code.

The ability for users to download the generated QR code (made with a QR Code generator) makes it helpful in a wide range of applications. The possibilities range from printing the code to embedding it on a website.

In the QrCodeGenerator component, update the codebase to add the download functionality using the power of refs and the html-to-image library.

Add the following code snippet to your codebase.

import { useState, useRef } from "react";
// other previous imports
import * as htmlToImage from "html-to-image";

function QrCodeGenerator() {

   // useState variables and the handleQrCodeGenerator previously defined   will be here 

  const qrCodeRef = useRef(null);
  const downloadQRCode = () => {
    htmlToImage
      .toPng(qrCodeRef.current)
      .then(function (dataUrl) {
        const link = document.createElement("a");
        link.href = dataUrl;
        link.download = "qr-code.png";
        link.click();
      })
      .catch(function (error) {
        console.error("Error generating QR code:", error);
      });
  };
  return (
    <div className="qrcode__container">
     // previous defined jsx tags and elements will be here 
        {qrIsVisible && (
          <div className="qrcode__download">
            <div className="qrcode__image">
              <QRCode value={url} size={300} />
            </div>
            <button onClick={downloadQRCode}>Download QR Code</button>
          </div>
        )}
      </div>
    </div>
  );
}
export default QrCodeGenerator;

The updated and final code snippet imports the html-to-image library, which provides a function to convert HTML elements into images. The code defines a reference using the useRefhook called qrCodeRef. This reference is used to access the QR code element in the [DOM](https://react.dev/learn/manipulating-the-dom-with-refs).

The downloadQRCode function is defined and triggered when the user clicks the "Download QR Code" button.

Inside the downloadQRCode function, the htmlToImage.toPngfunction is called with the qrCodeRef.current element as the argument. This function converts the QR code element to a PNG image.

If the conversion is successful, a link element is created and configured to download the generated PNG image. The dataUrl obtained from the conversion is set as the href of the link. The download attribute is set to qr-code.png, specifying the downloaded image's filename.

Finally, the link element is clicked programmatically, triggering the download of the QR code image. If an error occurs during the conversion or downloading process, it is logged into the console.

Importing the QrCodeGenerator Component into `App.js`

In your App.js file, you need to import the QrCodeGeneratorcomponent. Importing the QrCodeGenerator component in the App.js file lets you use and render the QrCodeGenerator component within the App component.

import QrCodeGenerator from "./components/QrCodeGenerator";


function App() {

  return (
    <>
      <QrCodeGenerator/>
    </>
  );
}

export default App;

With each step followed in this article, your web application should look like this.

Alternative Methods of Generating QR Codes for Your Websites.

There are several easy ways to generate a QR code for a website. Here are some simple options:

Online QR Code Generator Websites: Many websites, like Beaconstac, QRFY, QR.io, and qrcodemonkey, offer free QR code generation services. These websites typically provide a user-friendly interface where you can enter the URL of your website and customize the QR code design. Once you're satisfied with the settings, the website will generate the QR code, which you can download and use as needed.
QR Code Generator Mobile Apps: You can use dedicated QR code generator apps on your smartphone or tablet. These apps often have a straightforward interface where you can instantly input your website URL and generate a QR code. You can then save the QR code image to your device and use it in your desired context.
Browser Extensions: Some web browsers, like Google Chrome, Safari, and Microsoft Edge, offer QR code generator extensions that allow you to generate QR codes directly within the browser. These extensions often add a QR code generation option to the browser's menu or toolbar, making creating a QR code for the current webpage or a specific URL convenient.

Conclusion

Congratulations on completing this comprehensive tutorial on creating dynamic QR codes using React.js! Throughout this journey, you have gained valuable skills to integrate QR code functionality into your web applications seamlessly.

By leveraging the react-qr-code library, you have simplified the process of generating QR codes and explored various concepts, including user input handling, state management, and event handling. With these tools, you can create interactive QR code generator components that enhance the user experience.

QR codes serve as a powerful bridge between the physical and digital worlds, enabling seamless sharing of URLs, contact information, and access to exclusive content. By incorporating QR codes into your web applications, you can elevate functionality and provide convenient solutions for event registration, contactless payments, and product information.

With this knowledge, you can embark on your projects and create exceptional web applications featuring dynamic QR codes.

Happy coding!

Understanding High Availability, Fault Tolerance, and Disaster Recovery in AWS: An Overview

The ERIN — Mon, 12 Jun 2023 09:01:45 +0000

Have you ever wondered how large-scale applications like Netflix, Amazon, and Airbnb manage to stay online and available 24/7, even during unexpected failures or natural disasters? The answer lies in their use of high availability, fault tolerance, and disaster recovery strategies on the AWS (Amazon Web Services) platform.

AWS provides a wide range of services that enable businesses to build and operate highly available and fault-tolerant systems while ensuring the ability to recover from disasters. These concepts are important for companies that rely on their IT infrastructure, as even a small downtime can significantly impact their bottom line.

This article will provide an overview of high availability, fault tolerance, and disaster recovery in the context of AWS. You will understand the importance of each concept and explore the AWS services that can help you achieve them. Whether you are just starting with AWS or looking to improve your existing infrastructure, this article will provide a beginner-friendly introduction to the key concepts and strategies for maintaining uptime and protecting your data in the AWS cloud.

High Availability: Definition, Importance, and Methods of Achieving it in AWS.

Imagine that you are a business owner running a store. You want to ensure your store is always open and available to customers, even if something unexpected happens, like a power outage or a natural disaster. You want to maintain sales and satisfy your customers because something out of your control happened.

High availability is like having a backup plan in case something goes wrong. It means your store (or website, application, or any other system) is designed to keep running and be available to customers, even if something unexpected happens.

High availability is a term that most people think they understand. People assume that making a system available means ensuring that the system never fails or that the system's user never experiences any outages, which is false. High availability is designed to be online so that when it fails, its components can be replaced or fixed as quickly as possible, often using automation to bring systems back into service.

For example, if your store has an online presence, you might have a website that customers can visit to buy your products. If your website is designed for low availability, it might go down if there is a sudden surge in traffic or if one of the servers that host your website fails. Customers would need help accessing your website, and you would lose sales.

However, if your website is designed for high availability, it will continue running even if one server fails because it is hosted on multiple servers in different locations. If one server fails, the others will take over and keep your website running.

Importance of High Availability

High availability helps to ensure that your system or application remains operational and accessible even in the face of failures or disruptions. Without high availability, your system or application may experience downtime, resulting in lost revenue, productivity, and reputation damage.
High availability can be achieved through redundancy and failover mechanisms, such as replicating data across multiple servers, deploying applications in various availability zones, and using load balancers to distribute traffic across multiple instances.
High availability is particularly important for mission-critical applications, such as those used in healthcare, finance, or government, where downtime can have serious consequences.
High availability requires careful planning, design, and ongoing monitoring and testing to ensure failover mechanisms work as expected.
By investing in high availability, you can improve the reliability and resiliency of your system, which can ultimately lead to increased revenue, productivity, and customer satisfaction.

Methods of Achieving High Availability in AWS

Elastic Load Balancing: AWS Elastic Load Balancing (ELB) distributes traffic across multiple Elastic Compute Cloud (EC2) instances to ensure high availability.
Auto Scaling: AWS Auto Scaling automatically adds or removes EC2 instances based on demand to ensure that the system can handle fluctuations in traffic.
Multi-AZ Deployments: Deploying the application across multiple Availability Zones (AZs) in the same region ensures it is available even if one AZ goes down.
Cross-Region Replication: Replicating data across multiple regions ensures data is available even if one region goes down.
Failover and recovery: AWS services such as Route 53 and Amazon RDS Multi-AZ quickly detect failures and failover to a redundant system to ensure high availability.
Continuous Monitoring: AWS CloudWatch provides continuous monitoring for performance and availability and can send alerts and notifications to identify and address issues quickly.
High availability databases: Use AWS services such as Amazon RDS Multi-AZ, Amazon Aurora, or Amazon DynamoDB to ensure high database availability.
Resilient Network Architecture: Using AWS services such as Amazon VPC, AWS Direct Connect, and Amazon CloudFront to create a resilient network architecture that can withstand network failures and maintain connectivity and availability.

Fault Tolerance: Definition, Importance, and Methods of Achieving it in AWS.

When people think of high availability, they mix it with fault tolerance. It is similar to high availability, but it is much more. A fault-tolerant system is designed to work normally even if one or more components fail. If a system has faults, it could be one or more multiple faults, and then it should continue to operate properly even while those faults are being fixed. Fault tolerance is about designing and building systems that won't stop working during breakdowns or disruptions. You may reduce the risk of downtime and ensure that your system is available and responsive to users by implementing fault tolerance into your system architecture.

Imagine you are in charge of a hospital's computer system that manages patient records and appointments. The system consists of several servers that are connected to a network. One day, a power outage occurs in the hospital's area, and the servers shut down. The system would become unavailable, causing chaos and potentially risking patients' lives.

However, if the system were designed with fault tolerance, the servers would be set up to continue functioning even during a power outage. For example, the servers could be equipped with battery backups or diesel generators to keep them running until power is restored. In addition, the system could be set up with redundant servers that automatically take over if one server fails.

With these fault-tolerant measures in place, the hospital's computer system can continue to operate even in the face of unexpected events like power outages. This ensures that patient records and appointments can still be accessed and that doctors and nurses can provide critical care without interruptions.

You need to understand what your customer requires. Fault tolerance is harder to design, harder to implement and costs much more, and takes longer to implement. Conversely, implementing high availability when you need fault tolerance puts lives and resources at risk.

Importance of Fault Tolerance

Fault tolerance ensures that key systems remain operational and responsive despite failures or disruptions.
By incorporating fault-tolerant measures such as redundant servers and backup power supplies, organizations can minimize the risk of downtime and ensure that operations continue uninterrupted.
Fault tolerance is particularly important in healthcare, finance, and transportation industries, where even brief interruptions can have serious consequences.
Organizations may experience revenue and productivity and prevent reputation damage with fault tolerance.
Fault tolerance is also a critical component of disaster recovery planning, as it allows organizations to quickly recover from unexpected events such as natural disasters or cyberattacks.

Methods of Achieving Fault Tolerance in AWS

Auto Scaling: Using AWS Auto Scaling to add or remove instances based on demand automatically helps ensure that the system can handle fluctuations in traffic and minimize the impact of any failures.
State Management: Managing stateful resources such as databases or file systems in a way that enables them to be replicated across multiple instances so that if one instance fails, the system can continue to function without disruption.
Health monitoring and Remediation: Monitoring the health of resources and automatically remediating any issues. AWS services such as Amazon CloudWatch and AWS Systems Manager can monitor resource health and trigger automated remediation.
Graceful Degradation: Rather than failing abruptly, systems should be designed to reduce functionality in the case of a failure gently. This can minimize the impact of a failure and allow the system to continue functioning at a reduced level.
Backups and Disaster Recovery: Implement backup and disaster recovery strategies that ensure critical data is replicated and available during a failure. AWS services such as Amazon S3 and AWS Backup can be used to create backups and implement disaster recovery strategies.

Disaster Recovery: Definition, Importance, and Methods of Achieving it in AWS.

While High availability and Fault tolerance are about designing systems to cope or operate through a disaster, Disaster Recovery is about what to plan for and do when a disaster knocks out a system. It is about what happens before (pre-planning) and what happens afterwards. The worst time for any business is recovering in the event of a major disaster. In that type of environment, bad decisions are made based on shock, lack of sleep, and fear of how to recover.

Disaster recovery refers to restoring a system or application to its normal state after a catastrophic event, such as a natural disaster, cyberattack, or power outage. Think of it as a backup plan for your backup plan. Just like you might have a backup plan in case your phone or laptop stops working, disaster recovery is a plan in case something goes catastrophically wrong with your system.

Disaster recovery plans typically involve backing up data and applications regularly and storing them securely. In addition, they often include procedures for restoring data and applications to their original state and processes for testing the recovery plan to ensure it is effective.
Disaster recovery is important because it helps to ensure business continuity in the face of unexpected events. Organizations can minimize the risk of downtime by having a disaster recovery plan and ensuring that critical systems can be restored quickly during a catastrophic event. This can help to prevent or minimize financial losses, damage to reputation, and other negative consequences.

Imagine you're a small business owner who runs an online store selling handmade goods. Your store's website is hosted on a server in a data centre, and you rely heavily on it to generate revenue.
One day, a natural disaster, such as a hurricane or earthquake, strikes the area where your data centre is located, and the server is damaged beyond repair. With a disaster recovery plan, your website and all its data would be recovered, and your business could avoid significant financial losses.

However, because you had a disaster recovery plan, your data was regularly backed up to a separate server in a different geographic location. This backup server also had redundant power supplies and other measures to ensure it remained available during an outage.

After the disaster, your IT team quickly restored your website and all its data from the backup server, minimizing downtime and preventing significant financial losses.
This is a real-world illustration of how disaster recovery can help businesses to minimize the impact of unexpected events and ensure business continuity. Organizations can quickly recover from disasters and resume normal operations by having a plan and regularly backing up data to a secure location.

Importance of Disaster Recovery

Ensures business continuity: By having a plan to quickly restore systems and applications to their normal state after a catastrophic event, organizations can minimize downtime and ensure they can continue to operate.
Prevents financial losses: Downtime and data loss can be costly for businesses. Organizations can minimize the risk of financial losses due to unexpected events by having a disaster recovery plan.
Protects a company's reputation: If a business cannot recover from a disaster and suffers extended downtime or data loss, it can damage its reputation and negatively impact its relationships with customers, partners, and vendors.
Helps businesses comply with regulations: Certain industries and jurisdictions may have regulations requiring businesses to have a disaster recovery plan in place to protect sensitive data or critical systems.
Best practice for IT: Incorporating disaster recovery planning into an organization's overall IT strategy is a best practice that can help ensure the security and reliability of systems and applications.

Methods of Achieving Disaster Recovery in AWS

Backup and Recovery: Creating regular backups of critical data and applications and implementing disaster recovery strategies that enable the quick restoration of those backups in the event of a disaster.
AWS Disaster Recovery Services: AWS offers several disaster recovery services, including AWS Backup, AWS CloudEndure Disaster Recovery, and AWS Disaster Recovery Hub, that can help organizations implement robust disaster recovery strategies.
Multi-Region Deployments: Deploy critical applications and services across multiple regions to ensure that they remain available in the event of a disaster in one region.
Replication and Failover: Replicating critical data and applications to a secondary location and setting up failover mechanisms that quickly switch traffic to the secondary location in a disaster.
Testing and Validation: Regularly testing disaster recovery plans and procedures to ensure that they work as expected and making any necessary adjustments based on the results of those tests.

Conclusion

High availability, fault tolerance, and disaster recovery are essential concepts for any business operating in the digital age. With the rise of cloud computing and platforms like AWS, it's now easier to implement these strategies and ensure that your systems are always available and your data is always protected.

By leveraging AWS services like Elastic Load Balancing, Amazon S3, and AWS Backup, businesses can achieve high availability, fault tolerance, and disaster recovery cost-effectively and scalable. As a beginner-friendly platform, AWS provides various resources and documentation to help users understand and implement these concepts.

Whether you're a small business just starting or a large enterprise looking to improve your IT infrastructure, it's crucial to prioritize high availability, fault tolerance, and disaster recovery. By doing so, you'll be able to ensure the longevity and success of your business in the face of unexpected challenges.

How to Build A GraphQL API with Node.js, Apollo-Server, and MongoDB Atlas

The ERIN — Wed, 26 Apr 2023 09:17:12 +0000

Introduction

Are you a developer looking to create an efficient and flexible API? Then look no further than GraphQL! GraphQL is a modern way of creating APIs that allow the frontend to request only the data they need, making it a more efficient alternative to REST APIs.

If you're a Node.js developer looking to build a GraphQL API, you're in the right place! In this article, you are going to create a food recipe GraphQL API with Node.js, Apollo Server, and MongoDB Atlas. With Apollo Server, you'll get a production-ready GraphQL implementation with many features. MongoDB Atlas is a database service that makes it easy to scale your application.

But before diving into the details, let's ensure we're all on the same page. If you're new to GraphQL, don't worry! You can check out our previous article on the fundamentals of GraphQL . It's an excellent introduction to the topic and a solid foundation for building your GraphQL API.

Prerequisites

Basic understanding of Node.js syntax and JavaScript
Fundamentals of GraphQL and its syntax
npm installed on your computer. You can get it here if you don’t have npm installed on your computer.

Setting up a MongoDB Atlas cluster

Before building the API, you need to set up your MongoDB Atlas cluster. An Atlas cluster is a group of servers configured to store and manage data in MongoDB. These clusters can be customized to meet specific performance, scalability, and security requirements. It’s a straightforward process, and I am going to walk you through the steps.

MongoDB Atlas is a cloud-based database service offered by MongoDB that provides a fully managed and scalable environment for our MongoDB databases. Think of it as a group of computers working together to store and manage data, ensuring it is always available and secure.

To get started,

Go to the MongoDB Atlas website on your browser by clicking here. If you have an account, you can log in or create one if you are not an existing user. It is free.

Once signed in, you are going to be redirected to your dashboard, where all the different functionalities and integrations can be performed. Click the “Build a Database” button to start building the database.

You need to set up basic configurations for your database. Select the M0 Free tier, as it suits your needs.
Choose any cloud service provider options in the “Provider” section. For this article, I recommend you select the AWS option.
For the region field, select the region closest to where you are.
Choose a suitable name for the cluster. It can be simple, as you can't change the name once the cluster is created. You can call your cluster “Food-Recipe” because you are building a food recipe API.
Once you have configured all primary fields in the template, click the “Create” button. This button creates the Atlas cluster needed for this article.

It would be best if you also authenticated your connection. MongoDB automatically generates a username and password for the first database user using the details provided during sign-up. To create other users with permission to read and write, choose the “Username and Password” option, which lets you create a user with a username and a secure password. Once you have inputted all the details, click the “Create User” button to save the user credentials.

You need to enable the network(s) access to read and write data to your cluster. MongoDB automatically adds your current IP address, but you can add more networks to access your cluster. Select the “My Local Environment” option to add an IP address to your network list. Input the IP address and add a short description to identify the IP address. Click the “Add Entry” button to add the network.

Click the “Finish” button to fully set up the “Food-Recipe” cluster. You can now connect your database to your application and start writing your API.

Connecting your application to the MongoDB database

To connect your application to your MongoDB database. You need to obtain the connection string for your cluster. To obtain the connection string,

A list of different options to connect your application is available for you to choose from. I recommend you choose the “Drivers” method, as this method lets you use Node.js as your runtime environment.

Make sure you select the latest version of Node.js. You can then copy the connection string to use in your application. Keep this copy in your notepad, as it is needed in your index.js file to connect your application to your MongoDB database.

Setting up a development environment

In this section, you are going to set up a development environment by creating a project, installing necessary dependencies, and connecting your MongoDB Atlas cluster to your application.

In your preferred code editor, Open a new terminal and run the following command.



npm init –yes

This command creates an empty package.json . The empty package.json is essential for installing and managing the dependencies for the project.

Installing the dependencies: In the terminal, run the following command.



npm install apollo-server graphql mongoose nodemon

The following command installs the four packages needed for this project. The apollo-server dependency lets you create a server that can handle GraphQL queries and mutations. The graphql package provides the tools necessary to build and execute GraphQL queries and mutations, the mongoose package offers a simple way to interact with MongoDB databases, and the nodemon package automatically restarts your Node.js application whenever you make changes to your code.

Inside your package.json file, you need to include a start command. Whenever you run npm start in the terminal, the start command runs the index.js file, which serves as a server.



"scripts": {
    // include the start command after the “test” command
    "start": "nodemon index.js"
  },

In your project folder, create an index.js file. The code in the index.js file sets up an Apollo Server that handles your GraphQL queries, and mutations connect to a MongoDB database using mongoose and start listening for requests on a specified port.
In the index.js file, copy the following code.



// This is getting the ApolloServer object out of the Apollo-server library
const { ApolloServer } = require("apollo-server");

// This gives you access to Mongoose from the Mongoose package.
const mongoose = require("mongoose");

//You need to create a variable to store the MongoDB string you got from your database. Go to where you saved it and get the string. Replace the `username` and `password` with your MongoDB Atlas username and password.

const MONGODB =
  "mongodb+srv://<username>:<password>@food-recipe.7brtcty.mongodb.net/?retryWrites=true&w=majority"
const typeDefs = require("./graphql/typeDefs");
const resolvers = require("./graphql/resolvers");
const server = new ApolloServer({
  typeDefs,
  resolvers,
});

//You want your apollo-server to interact with Mongoose by passing in your MongoDB URI
mongoose
  .connect(MONGODB, { useNewUrlParser: true })
  .then(
    // to show when the connection is made
    () => {
      console.log("MongoDB Connected Successfully");
      return server.listen({ port: 5000 });
    }
  )
  // to handle the response object and show where your server is running
  .then((res) => {

    console.log(`Server is running on port ${res.url}`);
  });

Let’s take a closer look at the code, line by line:



const { ApolloServer } = require("apollo-server");

Here, you're importing the ApolloServer object from the apollo-server library. The object lets you create an Apollo server that can handle GraphQL queries and mutations.



const mongoose = require("mongoose");

Next, you're importing the mongoose library, a MongoDB library. It provides a simple way to interact with the MongoDB database.



const MONGODB = "mongodb+srv://feyijimierinle:Backspace@2023@food-recipe.7brtcty.mongodb.net/?retryWrites=true&w=majority";

Here, you defined a variable called MONGODB that stores the URI to your MongoDB database. The URI is a long string that contains your username, password, and host information needed to connect to your database.



const typeDefs = require("./graphql/typeDefs");
const resolvers = require("./graphql/resolvers");

You're importing the type definitions and resolvers from separate files in a graphql folder. Type definitions describe the structure and functionality of a GraphQL schema. At the same time, resolvers handle the logic for resolving GraphQL queries and mutations.



const server = new ApolloServer({
  typeDefs,
  resolvers,
});

Here, you created an instance of ApolloServer, passing in your type definitions and resolvers as arguments. The instance allows your server to handle GraphQL operations.



mongoose
  .connect(MONGODB, { useNewUrlParser: true })
  .then(() => {
    console.log("MongoDB Connected Successfully");
    return server.listen({ port: 5000 });
  })
  .then((res) => {
    console.log(`Server is running on port ${res.url}`);
  });

Finally, you're connecting to your MongoDB database using the mongoose.connect() method, passing in your MongoDB URI as the first argument. Once the connection is established, you're using the server.listen() to start your Apollo Server, passing in an options object that specifies the port number you want to use (in this case, 5000). Finally, you're logging a message to the console to confirm that the server is running and to indicate where it's listening for requests.

Go to http://localhost:5000 on your browser to confirm if your server is running without errors.

Setting up the Mongoose Model

In this section, you need to set up your Mongoose model. A Mongoose model is a template that helps you create and handle MongoDB documents in a Node.js app. It sets the data format, including the fields and their types. It allows the apollo-server to interact with MongoDB database.

Make a new folder in the root directory of your project. You can name it "models" Make a new file in the models folder called Recipe.js In your recipe.js file, copy the following code.



// Getting the model and Schema object from the Mongoose package
const { model, Schema } = require("mongoose");
// Making a new Schema for the recipe
const recipeSchema = new Schema({
  //Here, you need to pass in all the properties expected in the recipeSchema
  name: String,
  description: String,
  dateCreated: String,
  originated: String,
});
// to export data from this file.
module.exports = model("Recipe", recipeSchema);
<p>&nbsp;</p>

Let’s take a closer look at the code, line by line:



const { model, Schema } = require("mongoose");

First, you imported the model and Schema objects from the mongoose package. model is a function that lets you define a new data model. At the same time, Schema is a class that lets you specify the structure and properties of the data model.



const recipeSchema = new Schema({
  name: String,
  description: String,
  dateCreated: String,
  originated: String,
});

You created a new recipeSchema object, an instance of the Schema class. This recipeSchema object defines the structure of your recipe data model, specifying the properties you expect to have in your data model. Your recipeSchema object has four properties: name, description, dateCreated, and originated. Each of these properties is a string data type.



module.exports = model("Recipe", recipeSchema);

Finally, you are exporting the model function from this file, which creates a data model. You're passing two arguments to the model function: "Recipe" and recipeSchema. "Recipe" is the name of your data model, which is used to identify and query this data model later. recipeSchema is the data model structure that you created earlier.

Setting up GraphQL typeDefs and resolvers

typeDefs is short for "type definitions." These blueprints describe the shape of the data that can be queried or mutated in a GraphQL API. You can define types like Query and Mutation that represent the root types of your API and then determine the properties and fields that can be queried or mutated under each type.

Resolvers are functions that implement the behaviour of the queries and mutations defined in your typeDefs. Resolvers tell GraphQL how to retrieve the data that's being requested and what to do with the data when it's retrieved.

In this section, you need to define the typeDefs and resolvers necessary for the food-recipe API.

Create a folder in the root directory of your project. It would be best if you named it grahql. This folder contains the typeDefs and the resolver files.
Create two files in the graphql folder and name them typeDefs.js and resolvers.js
In the typeDefs.js file, copy the following code,



const { gql } = require("apollo-server");
module.exports = gql`
  type Recipe {
    name: String
    description: String
    dateCreated: String
    originated: String
  }
  input RecipeInput {
    name: String
    description: String
    originated: String
  }
  type Query {
    recipe(ID: ID!): Recipe!
    getRecipes(amount: Int): [Recipe]
  }
  type Mutation {
    createRecipe(recipeInput: RecipeInput): Recipe!
    deleteRecipe(ID: ID!): Boolean
    editRecipe(ID: ID!, recipeInput: RecipeInput): Boolean
  }
`;

This code defines the schema for your API using the apollo-server library. The gql function is used to determine the schema using the GraphQL syntax.

The schema defines the types that can be queried and mutated and the fields that can be accessed on those types. This particular schema defines three types: Recipe, RecipeInput, Query, and Mutation.

Recipe is a type that has fields for name, description, dateCreated and originated. This type represents a recipe object in our API. RecipeInput is an input type used for creating and editing recipe objects. It has fields for name, description, and originated, which are the properties that can be passed in from the client side.

A query is a type that defines the read operations in CRUD (Create, Read, Update, Delete) operations. The recipe field is used to retrieve a single recipe by its ID, while the getRecipes field is used to retrieve an array of recipes.

A mutation is a type that defines the write operations in CRUD operations. The createRecipe field is used to create a recipe object, the deleteRecipe area is used to delete a recipe by its ID, and the editRecipe field is used to update a recipe by its ID and create a recipe object.

This schema defines the types, inputs, queries, and mutations used to build the GraphQL API.

In the resolver.js file, copy the following code



// This gives us access to the recipe model you created in the Recipe.js
const Recipe = require("../models/Recipe");
module.exports = {
  Query: {
    // This holds all our queries to the apollo-server
    async recipe(_, { ID }) {
      return await Recipe.findById(ID);
    },
    async getRecipes(_, { amount }) {
      return await Recipe.find().sort({ dateCreated: -1 }).limit(amount);
    },
  },
  Mutation: {
    // This holds all our mutation
    async createRecipe(_, { recipeInput: { name, description, originated } }) {
      // This code is setting up the module.
      const createdRecipe = new Recipe({
        name: name,
        description: description,
        dateCreated: new Date().toISOString(),
        originated: originated,
      });
      const response = await createdRecipe.save(); // This is saying save the cretedRecipe schema or module to our MongoDB
      // need to return a recipe to our apollo-server resolver
      return {
        id: response.id,
        ...response._doc, //take all of the different properties of the result and show all the various properties that are going to show what our recipe is all about
      };
    },
    async deleteRecipe(_, { ID }) {
      const wasDeleted = (await Recipe.deleteOne({ _id: ID })).deletedCount; // use a mongoose function called deleteOne
      return wasDeleted; // the deletedCount returns 1 if something was created and 0 if nothing was created
    },
    async editRecipe(_, { ID, recipeInput: { name, description } }) {
      const wasEdited = (
        await Recipe.updateOne(
          { _id: ID },
          { name: name, description: description }
        )
      ).modifiedCount; // returns an object similarly to the wasDeleted
      return wasEdited; // returns 0 if an ID can't be found
    },
  },
};

Let’s go over the code, line by line:



const Recipe = require("../models/Recipe");

This line imports the Recipe model you created in another file and stores it in the Recipe variable. You can then use the Recipe variable to interact with the Recipe collection in your MongoDB database.



module.exports = {
  Query: {
    async recipe(_, { ID }) {
      return await Recipe.findById(ID);
    },
    async getRecipes(_, { amount }) {
      return await Recipe.find().sort({ dateCreated: -1 }).limit(amount);
    },
  },

The previous block of code exports an object with two properties: Query and Mutation. Query holds our queries to the apollo-server, which lets you read data. There are two query resolvers defined here. The recipe resolver takes an ID argument and returns a single Recipe object matching that ID. The getRecipes resolver takes an amount argument and returns an array of Recipe objects sorted by date created up to the specified amount.



  Mutation: {
    async createRecipe(_, { recipeInput: { name, description, originated } }) {
      const createdRecipe = new Recipe({
        name: name,
        description: description,
        dateCreated: new Date().toISOString(),
        originated: originated,
      });
      const response = await createdRecipe.save();
      return {
        id: response.id,
        ...response._doc,
      };
    },
    async deleteRecipe(_, { ID }) {
      const wasDeleted = (await Recipe.deleteOne({ _id: ID })).deletedCount;
      return wasDeleted;
    },
    async editRecipe(_, { ID, recipeInput: { name, description } }) {
      const wasEdited = (
        await Recipe.updateOne(
          { _id: ID },
          { name: name, description: description }
        )
      ).modifiedCount;
      return wasEdited;
    },
  },

The previous block of code exports an object with a Mutation property. Mutation holds all your mutations on the apollo-server, which lets you write data. There are three mutation resolvers defined here. The createRecipe resolver takes an object with name, description, and originated properties, creates a Recipe object using the Recipe model, saves it to your database, and returns the newly created Recipe object. The deleteRecipe resolver takes an ID argument, finds the Recipe object with that ID in the database, and deletes it. It then returns the number of objects deleted, which is 1 if the delete operation was successful and 0 if it was not. The editRecipe resolver takes an ID argument and an object with name and description properties, finds the Recipe object with that ID in the database, updates its name and description properties, and returns the number of objects modified, which is 1 if the update operations was successful and 0 if it was not.

You have successfully created a Food-Recipe GraphQL API. You can now go ahead and test your API in the GraphQL playground.

Testing the Food-Recipe API in the GraphQL Playground

In this section, you are going to test the Food-Recipe API in the GraphQL Playground, which is a graphical interface for testing and interacting with GraphQL APIs.

In your terminal, run the command npm start . This command starts a GraphQL playground on localhost:5000 as specified in the index.js file. The playground lets you create, read, update, and delete a food recipe directly from the playground- all in one call.
The "Docs" tab is located at the left-hand pane. Click on it to view the documentation for the Food-Recipe API. This docs tab gives an overview of the queries, mutations, and types that are available in the API.
To test a query, enter the following code in the right-hand pane:



Query Recipe ($id: ID!)  {
  recipes(ID: $id) {
    name
    description
    dateCreated
  }
}

This query retrieves all recipes from the database and return their names, descriptions, and dateCreated.

Click the "Run" button at the top of the right-hand pane to execute the query. The results is displayed in the bottom pane, and you would see a list of recipes along with their names, descriptions, and dateCreated.
To test a mutation, enter the following code in the right-hand pane:



mutation CreateRecipe ($recipeInput: RecipeInput) {
  createRecipe (recipeInput: $recipeInput) {
    name
    description
    createdAt
  }
}

This mutation adds a new recipe to the database with the specified name, description, and createdAt.

Click the "Run" button to execute the mutation. The results is displayed in the bottom pane, and you would see the details of the newly added recipe.
To test a query with parameters, enter the following code in the right-hand pane:



Query GetRecipes ($amount: Int!) {
  getRecipeByNumber(amount: $amount) {
    name
    description
  }
}

This query retrieves a recipe from the database with the specified amount and return its name, and description. Note that you have defined a variable called $amount in the query that you need to pass in the value for the amount parameter.

In the bottom pane, click on the "Query Variables" tab and enter the following JSON object:



{
  "amount": 5
}

This object defines the value for the $amount variable that you defined in the query.

Click the "Run" button to execute the query. The results is displayed in the bottom pane, and you would see the details of the first five recipes in your database.

That's it! You have successfully tested the Food-Recipe API in the GraphQL Playground. You can use this tool to further explore the API and test different queries and mutations.

Conclusion

In conclusion, this tutorial has provided a comprehensive guide on building a GraphQL API with Node.js, Apollo-Server, and MongoDB Atlas. By using these technologies, you can create APIs that are flexible, efficient, and easy to maintain.

One of the benefits of GraphQL is that it allows clients to request only the data they need, which can lead to faster and more efficient data fetching. And by leveraging the features of Apollo-Server, you can build a robust, secure, and scalable API with various integrations and features.

With the knowledge gained from this tutorial, you can begin exploring the possibilities of GraphQL and API development and use these technologies to create innovative and exciting projects. With the right approach, you can create powerful and efficient APIs that meet the needs of modern applications and users.

If you liked my article and found it useful, please leave a tip. Your contribution would enable me to continue producing high-quality articles for you.

Thank you for your continued support, and I look forward to providing you with more useful content in the future.

A Comprehensive Guide to Writing Your First GraphQL Query

The ERIN — Mon, 10 Apr 2023 09:07:57 +0000

Introduction

APIs (Application Programming Interfaces) have become essential to modern web apps in today's software development world. APIs allow developers to access and interact with data from different sources, making building apps that rely on data from multiple services easier. GraphQL has gained significant popularity as a powerful and flexible query language. It is an open-source query language developed by Meta that provides a more efficient approach to querying APIs.

If you are new to GraphQL and wondering how to write your first Query, you have come to the right place.

This guide covers the following:

An overview of GraphQL and its differences from traditional REST(Representational State Transfer) APIs
Introduction to writing your first GraphQL Query
Understanding the syntax of GraphQL queries
How to consume a GraphQL API in a React.js web app
Exploring everyday use cases for querying APIs with GraphQL

Upon completing this guide, you must have learned how to write a GraphQL query and be ready to build powerful web apps with GraphQL-powered APIs. So, let us get started!

Prerequisites

Basic knowledge of JavaScript
Basic knowledge of Node.js and its syntax
Any code editor you are comfortable using

What is GraphQL?

GraphQL is a query language that describes an API request. It is unrelated to databases. Query Languages are not specific to databases. They are programming languages used to get data from a database or an API. GraphQL is not a technology, library, or database; it is a query language that exists as a layer between an app’s front and backend. GraphQL acts as a middle-man layer between the front and backend, so either can not communicate directly. GraphQL is an alternative to REST APIs. With a REST API, we have to make individual requests with different HTTP methods to a database to retrieve data, but with GraphQL, all of the requests must be made to a single endpoint.

Differences between GraphQL and REST APIs

GraphQL and REST APIs are two popular methods of retrieving data from an API or a database. While REST APIs have existed longer, GraphQL has recently gained significant popularity. Both technologies have strengths and weaknesses, and knowing which one to use for specific use cases is essential. Let us go over some of their differences:

Endpoints: With a standard REST API, we must make individual requests with different methods to get the appropriate data. With GraphQL, we only have to request a single endpoint without worrying about making requests to different endpoints.
Data Fetching: GraphQL allows the frontend to specify what data they need, and the server returns only that data. It helps to reduce network usage and make data fetching faster. With REST APIs, the server sends back all the data associated with an endpoint requested from the frontend, sometimes including irrelevant data and slow network optimization.
Error Handling: With REST APIs, errors are returned as HTTP status codes, which must be parsed and handled correctly in the frontend. Unlike GraphQL, errors are returned as part of the response data, making it easier for the frontend to handle errors correctly and provide clearer and more concise error messages.
Documentation: One distinct difference between GraphQL and REST APIs is their approach to documentation. REST APIs often rely on external documentation to explain each endpoint and its associated parameters. On the other hand, GraphQL is self-documented as its available types and fields are already defined, making it easier to understand how to query the API without the need for external documentation.

It is advisable to choose either of the two methods for a specific use case, as both are popular methods of fetching data with a large community, making them easier to use.

GraphQL Terminologies: Types, Schema, Queries, Mutation, and Resolvers

It is important to understand the basic terminologies of GraphQL, as it helps to simplify the complex concepts surrounding the language. By the end of this section, we expect to have a clear understanding of the concepts. These concepts lay the foundation for using a GraphQL API.

Types

One of the fundamental concepts in GraphQL is types. Types in GraphQL refer to the structure of data that can be queried from an API. Like strictly-typed languages, we must always define data types. By using types in GraphQL, our API provides a more structured and consistent way of querying data. In GraphQL, there are three main types:

scalar types
object types
enumeration types

Scalar Types

Scalar types are primitive data types used to represent values. These types are namely: IDs, strings, integers, floats, and booleans They are not types composed of fields or sub-fields.

Object Types

Object types in GraphQL are a set of fields, each with its scalar type. They represent complex data types that can have subfields and child types, each with its scalar type.

Example of an Object Types

 type User {
      id: ID!
      name: String!
      email: String!
      age: Int
    }

In this example, we have an object type called: User. The User type represents a certain user in our app and has fields for their id, name, email, and age

If we notice, there is an exclamation mark (!) after some data types. It indicates the fields are required and cannot be null. GraphQL accepts either a value or null.

Enumeration Types

Enumeration types in GraphQL are also referred to as enums. They define a finite set of constant values used as a type for a field, ensuring only valid values are accepted for that field. Once an enum has been defined, the values cannot be changed, ensuring they remain constant.

Example of Enums

 enum Country {
      CANADA
      FRANCE
      SPAIN
      ENGLAND
    }

In the example, we have defined an enum called Country with four values: CANADA, FRANCE, SPAIN, and ENGLAND. This enum can be included as a type for an object field such as:

 type User {
      id: ID!
      country: Country!
    }

In the User object, we have specified a type with a country field of type Color. Using an enum type like the one we defined ensures only valid country values are accepted for the country field, making the API more consistent and accurate.

In addition to scalar, object, and enumeration types, GraphQL also supports unions and interfaces. Unions and interfaces enable the creation of abstract types representing multiple object types.

Schema

A schema in GraphQL is unrelated to a database schema. It is a schema that defines all of the data inside the API. Every GraphQL schema have a root object type called Query. This root type contains all the queries we want to make from the frontend to request data from the API. Every GraphQL API must have a schema. A schema also defines the relationships between objects and any available queries or mutations.

Here is an example of a schema in GraphQL, using an example from the Countries GraphQL API:

 type Query {
      country(code: ID!): Country
      language(code: ID!): Language
    }

  type Country {
      code: ID!
      continent: Continent!
      currency: String
      name: String!
      native: String!
      phone: String!
    }

   type Language {
      code: ID!
      name: String!
      native: String!
      rtl: Boolean!
    }

In this example, we defined a schema with two object types, Country and Language, and two query fields, country, and language.

The country query takes an argument code of type ID and returns a single Country object with fields code, continent, currency, name, native, and phone.

The language query takes an argument code of type ID and returns a single Language object with fields code, name, native, and rtl.

By defining these object types and queries, the frontend can query the API for specific countries or languages and receive a standard response, including the specified fields.

Queries and Mutations

In GraphQL, there are two types of operations: queries and mutations. They are the primary way to request data from an API, whether for querying or changing the data. With GraphQL, we do not need to specify what HTTP method request we are making from the frontend; we need to specify if we are trying to make a query or a mutation.

Queries

A query is a request for data that specifies exactly what data the frontend wants and how it must be structured. All the data the frontend needs from the API or database is written inside the query.

Queries in GraphQL consist of one or more fields, each with its name and set of arguments that specify how the field must be queried. Fields can be scalar types, such as strings, integers, or object types, with subfields and child types.

The GET method in REST API is synonymous with a Query operation in GraphQL.

Example of a query

 query {
      country(code: "US") {
        code
        name
        phone
      }
    }

In this example, we request data for a GraphQL Country API country with the US code. We specified the country's code, name, and phone fields to be returned from the API. By specifying the fields we want in the Query, we can reduce the amount of data the API returns, resulting in more efficient network usage.

Mutation

Mutation is the second type of operation in GraphQL. A mutation is a type of operation used to mutate, alter, or change the data on the server side. Mutations can create, update, or delete data and are defined in the schema, object types, and queries.

While queries are used to retrieve data, mutations are used to make changes to that data.
The REST API's CREATE, UPDATE, and DELETE method is synonymous with a Mutation operation in GraphQL.

For example, a mutation can create a new user account or update an existing one. Mutations typically take input arguments that define the changes to be made and return values that indicate the success or failure of the mutation.

Example of a mutation operation that creates a user

 mutation {
      createUser(input: {
        name: "John Doe",
        email: "john.doe@example.com",
        password: "secret123456"
      }) {
        id
        name
        email
      }
    }

In this example, the createUser mutation takes a single argument called input, an object type containing the new user's name, email, and password fields. The mutation returns the newly created user's id, name, and emailfields.

Example of a mutation operation that updates a user

 mutation {
      updateUser(id: 111, name: "John Doe") {
        id
        name
        email
      }
    }

In this example, the updateUser mutation takes two arguments: id, which identifies the user to be updated, and name, which is the new name for the user. The mutation returns the user's updated id, name, and email fields.

Example of a mutation operation that deletes a user

  mutation {
      deleteUser(id: 123) {
        id
        name
        email
      }
    }

In this example, the deleteUser mutation takes a single argument called id, which is the identifier of the user to be deleted. The mutation returns the deleted user's id, name, and email fields.

Resolvers

A resolver is a function that retrieves data for a particular field in a query or mutation. It triggers the request sent from the frontend and fetches data from the API based on the type of operation specified.

Each field in a GraphQL schema must have a corresponding resolver that returns the data for that field. Resolvers can fetch data from a database, call an API, or perform any other operation needed to retrieve the data. Resolvers are responsible for resolving the entire query,

Example of a Resolver in GraphQL

 const resolvers = {
      Query: {
        user: (_, { id }) => {
          return users.find(user => user.id === id);
        }
      },
      User: {
        name: (user) => user.name
      }
    };

In this example, the user resolver function takes an id argument and returns the user object from the users array, which matches the given ID. The User resolver object defines a resolver for the name field, which returns the value of the name property on the user object.

How to write and run a GraphQL query using the GraphQL Playground

To use GraphQL to fetch data from an API, the API must support the GraphQL fetching operation. It has to be a REST API that communicates with the GraphQL layer or a GraphQL API built using GraphQL.

GraphQL Playground is a tool for testing GraphQL APIs. It provides an interactive environment for executing queries, exploring the schema, and debugging errors. To test a GraphQL API in the Playground, we must provide the endpoint URL and write queries in the left-hand panel.

Other GraphQL clients offer similar functionality for testing and interacting with a GraphQL API, but this article places greater emphasis on using GraphQL Playground. To test our queries, we will work with the StarWars API.

To start, Open the GraphQL Playground by navigating to the Star Wars GraphQL Playground URL here.

Explore the API Schema:

Once the playground is loaded, you can find the API schema on the bottom left-hand side of the screen. Click the schema icon to explore the available types, queries, and mutations to use with the API.

Writing our Query:

We must implement our Queries operation knowledge to request the Star Wars API. From the schema defined, in the root query, there are different queries we can make requests to. Let us request the allPeople query.

  query {
        allPeople {
          people {
            name
            birthYear
            species {
              name
            }
          }
        }
      }

This GraphQL Query fetches a list of people and their details, including name, birth year, and species they belong to. The Query requests for all people and uses the allPeople field to retrieve an object containing a list of people. The people field then returns an array of objects containing each person's name, birthYear, and species details. The species field within the people field is a nested query retrieving the species names for each person.

In this example, we use the allPeople field to fetch a list of people and their details. The people field then returns an array of objects containing each person's name, birthYear, and species details.
After writing our Query, we must click the "Play" button to execute our Query.

Viewing the response:

After executing the query, the results are shown in the "Response" section of the screen. The response to the data is in this format:

 {
      "data": {
        "allPeople": {
          "people": [
            {
              "name": "Luke Skywalker",
              "birthYear": "19BBY",
              "species": null
            },
            {
              "name": "C-3PO",
              "birthYear": "112BBY",
              "species": {
                "name": "Droid"
              }
            },
            {
              "name": "R2-D2",
              "birthYear": "33BBY",
              "species": {
                "name": "Droid"
              }
            },
            {
              "name": "Darth Vader",
              "birthYear": "41.9BBY",
              "species": null
            },
            {
              "name": "Leia Organa",
              "birthYear": "19BBY",
              "species": null
            },
            {
              "name": "Owen Lars",
              "birthYear": "52BBY",
              "species": null
            },
            {
              "name": "Beru Whitesun lars",
              "birthYear": "47BBY",
              "species": null
            },
            }
          ]
        }
      }
    }

The response data also provides us with an option to view any errors or warnings which may have occurred during the execution of our Query.

How to fetch a GraphQL API in a React.Js app

React.js is a popular frontend JavaScript library for building scalable and efficient user interfaces. It lets us create reusable UI components and declaratively define how they may behave in response to user interactions or data changes.

React.js is useful for building apps that let us consume data from a GraphQL API because it easily renders data from the API to components. React components can send queries to a GraphQL server using GraphQL client libraries like Apollo Client.

Apollo Client is a comprehensive JavaScript state-management library enabling us to consume and interact with GraphQL APIs in our app easily.

It provides a range of useful features, such as caching, fetching, and modifying real-time data, and lets us easily integrate our GraphQL API with our frontend app.

Setting up our development environment

Our first step is to set up a development environment where we can start building our web app.

Run the following command via the terminal. I am using npm as my package manager, but you can use your preferred package manager's commands instead:

 npx create-react-app rick-morty-app

This command creates a React.js app in our folder directory.

Once all of the dependencies have been installed, navigate to the rick-morty-app directory by running

 cd rick-morty-app

To start the development server run

 npm start or yarn start

To view the app, go to http://localhost:3000.
We must install the apollo-client library and set up some basic configurations to write our queries to the GraphQL API in our React app.

Open up the terminal, and run the following command:

 npm install @apollo/client

When we run the specified command, it installs the apollo-client library, which enables our React.js app to establish a connection with the Rick and Morty API. This connection allows us to consume the data contained within the Rick and Morty API.

In your App.js file, write the following code. I'll then go over each line of the code to explain its purpose.

    import { ApolloClient, InMemoryCache, ApolloProvider } from "@apollo/client";
    Import PeopleData from './PeopleData'
    function App() {
      const client = new ApolloClient({
        cache: new InMemoryCache(),
        uri: "https://rickandmortyapi.com/graphql",
      });
      return (
        <ApolloProvider client={client}>
          <div className="App">
            <PeopleData />
          </div>
        </ApolloProvider>
      );
    }
    export default App;

The code sets up our React app with the Apollo Client, which lets us communicate with the Rick and Morty API server. It imports the necessary classes from the @apollo/client library, including the ApolloClient, InMemoryCache, and ApolloProvider.

The Apollo Client library has good state management, allowing us to cache data in our browser called the InMemoryCache. The InMemoryCache is configured with the ApolloClient, which stores the results of queries made to the GraphQL server.

Finally, the App component returns a div containing the PeopleData component, making GraphQL queries to the server using the ApolloClient. This code enables the React app to communicate with a GraphQL API via the Apollo Client.

Let us create a file called PeopleData.js. This file involves making a query operation to the Rick and Morty API via the Apollo client library, then displaying the retrieved data.

Go ahead and write the following code:

    import React from "react";
    import { useQuery, gql } from "@apollo/client";
    const GET_CHARACTERS = gql`
      query GetCharacters {
        characters {
          results {
            id
            name
            image
          }
        }
      }
    `;
    function PeopleData() {
      const { loading, data } = useQuery(GET_CHARACTERS);
      if (loading) {
        return <h1> Loading...</h1>;
      }
      return (
        <div>
          {data.characters.results.map((character) => (
            <div key={character.id}>
              <h2>{character.name}</h2>
              <img src={character.image} alt={character.name} />
            </div>
          ))}
        </div>
      );
    }
    export default PeopleData;

In the PeopleData.js file, we imported the useQuery hook and gql function from the @apollo/client library. The useQuery hook is an important part of the apollo client library because this hook lets us make queries to the Rick and Morty API. The gql function lets us write GraphQL syntax in our React components.

The GET_CHARACTERS constant is a GraphQL query retrieving the id, name, and image fields for all characters in the API. The useQuery hook lets us retrieve data, handle errors, and set loading features in our components by destructuring the data, error, and loading variables from the hook.

To display the data retrieved from the API, we need to use the JavaScript map() function to iterate over the data. For each character in the array, our component displays the character's name and image.

If we go over to http://localhost:3000 in the browser, our fetched data is displayed in the order specified in our component.

We can also handle errors in our code, as the useQuery hook provides an error variable.

Conclusion

GraphQL is a flexible and powerful query language that has been increasingly popular in recent years thanks to its flexibility, efficiency, and ease of use. In this guide, we have covered the basics of GraphQL, including its key features, syntax, and concepts, as well as how to write your first GraphQL query. By following the steps outlined in this guide, you now have a solid understanding of how to use GraphQL to retrieve and manipulate data from your API and display it on the frontend, as well as the tools and resources you need to get started. Whether you are a seasoned developer or just starting, GraphQL is a valuable tool to help build better, more responsive, and more scalable apps.

Resources and References

If you liked my article and found it useful, please leave a tip. Your contribution would enable me to continue producing high-quality articles for you.

Thank you for your continued support, and I look forward to providing you with more useful content in the future.

A detailed guide on how to implement Server-side Rendering (SSR) in a NextJs Application

The ERIN — Wed, 29 Mar 2023 10:28:40 +0000

Introduction

Server-side Rendering (SSR) is becoming increasingly important in web development due to its ability to improve website performance and user experience. Unlike Client-side Rendering (CSR), where the website's content is generated on the user's device, server-side rendering generates the HTML on the server and sends it to the client. This method can improve website load time, search engine optimization, and accessibility.

Next.Js is a popular framework for building React applications, and it offers built-in support for server-side rendering. With Next.js, we can easily set up our application to generate HTML on the server and deliver it to the client, providing a seamless user experience and optimized website performance. In this detailed guide, we will build a cryptocurrency web app to show how to implement SSR in a Next.js application. We will also cover the basic concepts behind server-side rendering and walk through the steps required to set up SSR in our Next.js application. By the end of this article, you will have a solid understanding of improving your website's performance and SEO by implementing SSR in your Next.js application.

Pre-rendering: A built-in Feature in Next.js

Regarding page rendering with Next.js, pre-rendering is a fundamental component. It is a key feature of Next.js, which means that static HTML content is generated in advance rather than dynamically on each request.
When comparing the page source of a traditional React.js web app and a Next.js web app, it is clear that the Javascript code is loaded before the contents are rendered to the user, which is a bad user experience. However, when inspecting the contents of a Next.js page source, the HTML is already generated with all the necessary data, making Next.js the most efficient method for improved web performance and user experience.

Next.js gives us the option of selecting one of two pre-rendering modes:

SSG (Static Side Generation): This is Next.js's default pre-rendering mode, in which HTML pages are generated at build time and served to the user as static files. This approach is appropriate for websites with static content because it reduces server load and provides the fastest possible performance.
Server-side rendering (SSR): SSR, on the other hand, generates HTML pages on the server whenever a user requests them. This approach is useful for websites with frequently changing content or that require dynamic data because it can provide a more responsive user experience while ensuring the content is always up to date.

Understanding the Server-Side Rendering Process

Server-side rendering is fast becoming a popular technique widely used in web development that involves rendering a web page on the server before sending it to the client, unlike client-side rendering, where the page is rendered in the browser first after the server has sent the necessary HTML, CSS, and JavaScript bundled files.

To fully understand the server-side rendering process, it is important to know the key players involved. It includes the server and the client.

The server is responsible for handling all incoming requests made from the client side and sending the appropriate response. In the context of SSR, this involves rendering the requested web page on the server and sending the resulting HTML, CSS, and JavaScript to the client.

The client is the web browser through which a user accesses the web application. In SSR, the client gets the rendered HTML, CSS, and JavaScript from the server and displays the contents on the web page.

Now that we've identified the two major players in server-side rendering, let's look at the actual thought process behind it.
The client requests the server for a specific web page as the first step in the server-side rendering process.

The server will receive the request and determine which page the client is looking for. The server will then render the requested page on the server, which includes generating the page's HTML, CSS, and JavaScript and compiling them into a complete web page.

After rendering the web page on the server, the server will send the resulting HTML, CSS, and JavaScript to the client. The client will then use these files to show the user the web page.

Implementing SSR with Data Fetching in Next.js

Data fetching is an essential part of developing any web application. Next.Js provides several methods for retrieving data, including server-side rendering, static site generation, client-side rendering, incremental static regeneration, and dynamic routing. However, for this article, we will only look at server-side generation. You can learn about the other types by reading the Next.js documentation.

getServerSideProps: a built-in Function for Data Fetching in Next.Js

Next.js includes a built-in function called getServerSideProps that allows us to fetch data from the server with each request. To use server-side rendering on a page, we must export getServerSideProps, and the server will call this function on every request.

getServerSideProps Syntax

export default function Page( {data} ){
   return <>YOU CAN DISPLAY YOUR DATA ACCORDINGLY</>
}
export async function getServerSideProps() {
   // Your code
   const data = .... ;

   // Passing data to the page using props
   return {
       props : {data}
   }
}

In place of data we can use a different variable name. We can also pass multiple props by using commas "," to separate them.

Key Notes about getServerSideProps

getServerSideProps only runs on the server and never on the client.
It runs at the request time, and the web page is pre-rendered with the returned props specified inside.
getServerSideProps can only be exported from a page. You cannot export it from non-page files. It will not work if you make getServerSideProps a page component property.
getServerSideProps should only render a page whose data must be fetched at the requested time. If the data does not need to be rendered during the request, consider fetching it on the client side or using static side generation.
The getServerSideProps function must return an object containing the data that will be passed to the page component as props. If the function does not have a return statement, it cannot pass data to the page component.

Fetching data using getServerSideProps

Step 1: Setting up a Next.Js Application
Now that we understand the server-side rendering process, we can go ahead and make requests to the server and fetch data from it.

Next.Js includes server-side rendering support; with this framework, we can easily make server requests and pre-render our web content without writing complex coding functions or methods.

To get started, we have to set up a development environment where we can start building our web app. If you have ever built a React app, you are familiar with [create-react-app](https://create-react-app.dev/), which sets up the development environment. Next.Js has its command called create-next-app.
Run the following command via a terminal. I am using npm as my package manager, but you can use your preferred package manager's commands instead:

npx create-next-app crypto-web-app

This command will create a new Next.js project and all other app dependencies in your folder directory.

Once all of the dependencies have been installed, navigate to the crypto-web-app directory by running

cd crypto-web-app

To start the development server run:

npm run dev or yarn dev

To view the application, go to http://localhost:3000.

Step2: Getting a third-party API endpoint
Let us go to our application's pages/index.js file. In this file, we will get the top nine cryptocurrency coins by market value from CoinGecko, an external API. Let us look through coingecko's API documentation to find our endpoint. The endpoint we require is in the coins category. We only need to set a basic configuration, and when we click the Execute button, it should provide us with an endpoint.

CoinGecko API End point:

 <https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=9&page=1&sparkline=false>

Step 3: Declaring the getServerSideProps function. Add the following code to our index.js file. We will go through the code step by step:

import React from "react";
import styles from "/styles/Home.module.css";
import { FiArrowDown, FiArrowUpRight } from "react-icons/fi";

function Home({ data }) {
  return (
    // Renders the data passed as props from the getServerSideProps
    <div className={styles.container}>
      <h1>Cryptocurrencies by Market Cap</h1>

      <div className={styles.crypto__container}>
        {data.map((crypto) => (
          <div key={crypto.id} className={styles.crypto__child}>
            <img src={crypto.image} alt={crypto.symbol} />
            <h3>{crypto.name}</h3>

            <div className={styles.crypto__price}>
              <p>$ {crypto.current_price.toLocaleString()}</p>
              {crypto.price_change_percentage_24h < 0 ? (
                <span className={styles.arrow__down}>
                  <FiArrowDown className={styles.price__icon} size={20} />
                  {crypto.price_change_percentage_24h.toFixed(2)}%
                </span>
              ) : (
                <span className={styles.arrow__up}>
                  <FiArrowUpRight className={styles.price__icon} size={20} />
                  {crypto.price_change_percentage_24h.toFixed(2)}%
                </span>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// This function gets triggered on every request
export async function getServerSideProps() {
  // This fetches the data from the Coingecko external API
  const response = await fetch(
    "<https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=9&page=1&sparkline=false>"
  );
  const data = await response.json();

  // Pass data to the page component via props
  return {
    props: {
      data,
    },
  };
}

export default Home;

We declared the async getServerSideProps function and used JavaScript's built-in fetch API function to retrieve data from the CoinGecko API endpoint. Remember that we must declare a return statement in order to pass the data obtained from the API to our page component.

We accepted the props passed by the getServerSideProps method in our Home function component. We used the JavaScript map() method to display a list of cryptocurrencies sorted by market value as a child element of the component.

Here is the CSS to add more styling to the web app:

@import url('<https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700&display=swap>');

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100%;
  padding: 100px 0;
  font-family: 'Nunito Sans', sans-serif;
}

.container h1 {
  margin-bottom: 40px;
}

.crypto__container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 25px;
  grid-row-gap: 80px;
}

.crypto__child {
  box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
  padding: 30px 15px;
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.crypto__child img {
  width: 50%;
  margin-bottom: 7px;
}

.crypto__child h3 {
  font-size: 20px;
  margin: 7px 0;
}

.crypto__price {
  display: flex;
  align-items: center;
  gap: 10px;
}

.arrow__down {
  color: red;
  display: flex;
  align-items: center;
}

.arrow__up {
  color: green;
  display: flex;
  align-items: center;
}

/* Mobile */
@media (max-width: 700px) {
  .container {
    padding: 70px 0;
    font-family: 'Nunito Sans', sans-serif;
  }

  .container h1 {
    margin-bottom: 30px;
    font-size: 25px;
  }

  .crypto__container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(9, 1fr);
    grid-column-gap: 0;
    grid-row-gap: 20px;
  }

  .crypto__child {
    padding: 25px 13px;
  }

  .crypto__child img {
    width: 50%;
  }

  .crypto__child h3 {
    font-size: 17px;
  }
}

/* Tablet and Smaller Desktop */
@media (min-width: 701px) and (max-width: 1120px) {
  .container {
    padding: 80px 0;
  }

  .container h1 {
    margin-bottom: 30px;
  }

  .crypto__container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-column-gap: 25px;
    grid-row-gap: 80px;
  }

  .crypto__child img {
    width: 70%;
  }

  .crypto__child h3 {
    font-size: 19px;
  }

  .crypto__price {
    display: flex;
    align-items: center;
    gap: 10px;
  }
}

If we go to http://localhost:3000 in our browser, we should see a list of nine cryptocurrencies fetched on each request to the server before being returned to us in the browser.

Conclusion

Server-Side Rendering (SSR) is a modern method in modern web development that offers numerous advantages, including improved performance and SEO, faster interaction time, better accessibility, a better user experience, and easier maintenance. The page loads faster because the initial view is rendered on the server, which improves the user experience. Furthermore, search engine bots can easily crawl and index content, helping to improve search engine rankings. SSR enables faster loading times, reducing the time it takes for a page to become interactive for the user. The browser does not need to wait for JavaScript to load and execute because the initial view is rendered on the server, which can significantly reduce TTL. SSR can also help to improve accessibility by ensuring that all users have access to the page's content.

Furthermore, using SSR in a Next.js application can help reduce the complexity of managing client-side states and rendering.

Finally, implementing Server-Side Rendering (SSR) into a Next.js application can yield significant benefits. However, it is critical to understand that implementing SSR can add complexity to the application; as a result, it is critical to carefully consider the use cases and opt for other types of pre-rendering modes that Next.js provides. Nonetheless, implementing SSR in a Next.js application with the right approach can help to provide a more robust, faster, and smoother web experience for users, leading to higher engagement and better outcomes for web applications.

Resources

Official documentation for Next.Js

If you liked my article and found it useful, please leave a tip. Your contribution would enable me to continue producing high-quality articles for you.

Thank you for your continued support, and I look forward to providing you with more useful content in the future.

How to build an AI Chatbot using Amazon Lex and Lambda, and Integration with ReactJS

The ERIN — Wed, 15 Mar 2023 09:10:32 +0000

Introduction

Chatbots have emerged as one of the latest trends in modern-day technology, and they're making a huge impact on our day-to-day activities. From scheduling appointments and medical advice to booking flights, providing real-time informations.Chatbots are simplifying our lives and making everything easier and more efficient, as they can provide instant responses and personalised interactions.

Amazon Lex is one of the most popular platforms for creating fast and scalable chatbots. In this article, I’ll walk you through the process of creating a chatbot with Amazon Lex and Lambda and how you can integrate it into your React.js project.

In this article, you’ll learn how to build a COVID Tracker chat bot using

Amazon Lex UI console to build and test the chatbot
AWS Lambda Function to enhance the capabilities of the chatbot, allowing it to provide more accurate and up-to-date information to users.
AWS CloudFormation to automate the deployment and management of the applications in simple steps.

At the end of this article, you’ll have a deeper understanding of how to build, enhance and deploy your chatbots with the help of AWS Lex, Lambda Functions and Cloud Formation and finally how you can include them in your React.js projects.

Prerequisites

An AWS account
Some basic understanding of Node.js is required.
A working computer with any type of operating system
Any code editor you’re comfortable using

What is AWS Lex

AWS Lex is a cloud-based service provided by Amazon Web Services that enables developers to build conversational interfaces using voice and text. It uses natural language understanding (NLU) technology to understand and interpret user input, allowing developers to create chatbots, voice bots, and virtual assistants that can interact with users in a human-like way. AWS Lex is like a brain that can understand what people say or type, and then respond back like a human.

For example, Capital One, a large financial institution, used AWS Lex to create Eno, a virtual assistant that helps customers manage their accounts through a chat interface. Eno can answer questions about account balances, transactions, and payments, and can even proactively alert customers to potential fraud.

Another example is the healthcare company, HealthTap, which used AWS Lex to create a chatbot that helps patients find answers to their health-related questions. The chatbot uses natural language understanding to interpret the user's question, and then provides relevant information and resources based on the user's needs.

AWS Lex enables developers to build powerful conversational interfaces that can improve customer engagement and automate common tasks.

How to Build an AWS Lex Chatbot

To get started, log in to your AWS management console via this link.
Search for Amazon Lex in the top navigation bar and select to open the Amazon Lex dashboard. We’ll be doing most of our operations on the dashboard, like creating, managing, and testing our chatbot.

We’ll be using the Version 1 console, from the sidebar, click on “Return to the V1 console” to switch to the V1 user interface console.

To create a new chatbot, click the "Create" button. First, we’ll be prompted to select if you want to create our own custom bot or use one of the sample bots. Since we’re creating a custom chat bot, we’ll continue with the first option.

For our custom bot, we must set up a few basic options. The following fields need to be specified:

Bot name: In our example, let's call our bot "CovidChatBot." This field includes the name of our bot. It must be between 2 and 50 characters long and only allow letters—no spaces.

Language: This is the language that our chatbot will use to communicate. Let's choose “English (US)”.

Output voice: The Lex Service provides us with different voice outputs we can use for our chatbot. We’re building a text-based chat bot, so let’s go with the "None" option.

Session timeout: This option specifies how long we want Amazon Lex to retain the context; it can be set between zero and 1440 (24 hours). Let's go with 5 minutes.

COPPA: This stands for the Children’s Online Privacy Protection Act. This indicates if our bot is subjected to COPPA. Select no, as our bot does not apply to COPPA.

We'll leave the other fields at their default values.

Defining Intents, Utterances and Slots

Excellent work!, We've successfully created our custom covid chatbot, but before we move on, let's go over the key fundamental components of the Lex service, which are Intents, Utterances and Slots.

Intents

"Intents," as the name suggests, are a fundamental concept used to represent the purpose or goal of a user's input. Intents can be viewed as a verb, detecting what a user's intention is. For example, if you go to a pizza shop and order a pizza, your main intention is to order pizza, your purpose for going to the store is to get pizza. This works the same way for lex-powered chatbots. We have to define intents so the bot can easily track or identify our goals during a conversation.

Utterances

Utterances are examples of phrases or sentences that we might use to convey a specific meaning or request. For example, when we walk into the pizza store to order a box of pizza, a possible request we could make is "I want to order a box of pizza." These utterances are used to teach the chatbot how to understand and respond to what we are saying. The more utterance we give, the better the chatbot will be at understanding what we’re trying to say.

Slots and Slot Types

Slots are a collection of information that you prompt chatbot users to provide during a conversation with your bot. In the COVID chatbot we're building in this article, for example, we can define slots by country and prompt the user to enter a value for each slot. The bot will prompt the user to provide information for each slot, and once all of the required slots have been filled, the bot will be able to process the order and respond appropriately.

Amazon Lex includes a variety of built-in slot types, including numbers, dates, countries, and many more. We can also define what sets of values are acceptable by creating our own custom slot types.

Developing our Covid Chat Bot

Okay, so that was a bit of a theoretical explanation; now let's get back to building our chat bot. Remember, we've already set up our own chat bot. We need to create our intents, then add possible utterances and slots as needed.

Creating Intents

Let's make four intents for our Covid chatbot: the Welcome intent, the About intent, the CovidTracker intent, and the Goodbye intent.

Navigate to the Lex console to create the four different intents. Click the "Create Intent" button to open a modal window with three options; select the "Create Intent" option. We must give each intent a distinct name so that we can distinguish them when writing our lambda function.

Creating Utterances

Just as we understood what utterances are, we need to add possible utterances that a user could ask our chatbot. Ideally, it’s best to add as many possible utterances as possible to make the chatbot efficient.

To create an utterance, on the sidebar, select the intent you want to create possible utterances for. Under the "Sample Utterances," we can go ahead and add as many possible utterances as a user can ask our chatbot.

CovidTracker Utterances

This is the fundamental part of our chatbot, as our chatbot is tasked with providing current covid information. For this intent, we’ll add possible utterances, and I’ll also show you how to add slots and how they work in action.

To add slots, we need the bot to identify them, so we have to wrap the words in curly braces when defining an utterance.

We've added a slot called "country," because our CovidTracker Intent requires the name of the country where a user wants to learn more about the COVID situation.

When we add slots, we must also include the slot type. This could be any value, but we'll use "Amazon.Country" in this case. We also have the option of adding prompts. " Prompts are messages or questions that are used to obtain user input for a specific slot. They can be customized, and multiple prompts for a single slot can be created to provide variety.

Goodbye and About Utterances

The goodbye and about intents, as the name implies, will include possible utterances that tell users more about our Chatbot and also send personalized goodbye messages to our users. I've added a list of possible utterances as shown in the screenshots above, but feel free to add as many as you like.

Integrating the chatbot with AWS Lambda

AWS Lambda is a way to write and run code without worrying about setting up and maintaining the underlying server or computing resources. We can focus on writing our code, and Lambda takes care of executing it and scaling it as needed based on demand. It’s a popular choice for building serverless applications.

Why do we need a Lambda Function attached to our chatbot?

Then you're probably wondering why we need a Lambda function associated with our chatbot.

Our COVID Tracker chatbot relies on lambda functions to perform various tasks based on user input or the state of a conversation. This is why we require a lambda function for our project:

Retrieving COVID data: Based on what our users request for a specific country, our Lambda function will retrieve the most recent COVID data from a third-party API. It provides our users with real-time information.
Processing user input: Before returning a response to the user, our lambda function will process and validate their input. If a user requests data for a country that does not exist, the lambda function will respond with an appropriate error message.
Provide additional resources: Based on the user's request, it will provide additional resources. If a user requests more information about COVID symptoms, for example, the Lambda function can return links to relevant articles or resources.

Overall, introducing a Lambda function into our COVID tracker chatbot will improve its capabilities, allowing it to provide more accurate and up-to-date information to our users while also providing a more engaging conversational experience.

Writing lambda functions using Node.js

To begin, go to the management console and search for and select the Lambda service.

To create a new Lambda function, click the "Create Function" button. Lambda offers three different options, but the "Author from scratch" option is the best fit for us.

We need to name our lambda function. I recommend choosing a name that is simple and descriptive. Let's call it "chatBotFunction" in accordance with the camel naming convention.
Because we're writing our function in Node.js, we'll use the Node.js 18 runtime environment.
Click the "Create function" button to finish creating an environment for our "chatBotFunction" Lambda Function.
The following page is a function editor. This is a sandbox where we can write code, test it, deploy it, and monitor its performance.

Writing Our Lambda Function

Open your preferred code editor to begin writing the lambda function. We're using a text editor because it allows us to install dependencies needed for our lambda function to function properly.
Launch a new terminal and run the following commands. I'm using "npm" as my package manager, you can use commands specific to your preferred package manager:

// this creates a new package.json file
> npm init -y 

// installing dependencies to make requests to the API
> npm install request request-promise --save

// this creates an index.js file ( the name of the file should be the same as below, since it will be referred as default handler in lambda function as "index.handler")
> touch index.js

Open the newly created index.js file and copy the code below there. I’ll explain what each line of code does.

const Request = require("request-promise");
const numeral = require("numeral");
const dispatcher = async (event) => {
  let response = {
    sessionAttributes: event.sessionAttributes,
    dialogAction: {
      type: "Close",
      fulfillmentState: "",
      message: {
        contentType: "PlainText",
        content: "",
      },
    },
  };
  switch (event.currentIntent.name) {
    case "CovidTracker":
      try {
        let url =
          "https://disease.sh/v3/covid-19/countries/" +
          event.currentIntent.slots.country;
        console.log("endpoint: " + url);
        let result = await Request(url, { json: true });

        console.log(result.todayCases);
        response.dialogAction.fulfillmentState = "Fulfilled";
        response.dialogAction.message.content =
          "Today (" +
          new Date().toISOString().slice(0, 10) +
          ") Cases: " +
          numeral(result.todayCases).format("0.0a") +
          ",\n" +
          "Recovered: " +
          numeral(result.todayRecovered).format("0.0a") +
          ",\n" +
          "Deaths: " +
          numeral(result.todayDeaths).format("0.0a") +
          "\n" +
          "Total Cases (till date): " +
          numeral(result.cases).format("0.0a") +
          ",\n" +
          "Recovered: " +
          numeral(result.recovered).format("0.0a") +
          ",\n" +
          "Deaths: " +
          numeral(result.deaths).format("0.0a");
      } catch {
        response.dialogAction.fulfillmentState = "Failed";
        response.dialogAction.message.content =
          "Sorry, no data found for provided country. Please try again with correct country name!";
      }
      break;
    case "Goodbye":
      response.dialogAction.fulfilmentState = "Failed";
      response.dialogAction.message.content =
        "Goodbye, Stay Updated! Stay Protected!";
      break;
    case "AboutBot":
      response.dialogAction.fulfilmentState = "Failed";
      response.dialogAction.message.content =
        "This bot helps to stay updated on the latest covid-19 informations.";
      break;
    case "Welcome":
      response.dialogAction.fulfillmentState = "Fulfilled";
      response.dialogAction.message.content =
        "Hello, I'm Dexa, How can I help you today?";
      break;
    default:
      response.dialogAction.fulfillmentState = "Failed";
      response.dialogAction.message.content = "No data found for this country";
      break;
  }
  return response;
};
exports.handler = async (event) => {
  return dispatcher(event);
};

This is a Node.js module that exports a function called handler. This function takes an input event object and returns a response object.

The handler function first imports two Node.js packages: request-promise and numeral. request-promise is a library that allows the code to make HTTP requests to external APIs. numeral is a library that helps with formatting numbers.

The dispatcher function is defined next. This function takes an event object and returns a response object. It starts by creating a default response object with a Close dialog action type and an empty message.

The function then switches on the name property of the currentIntent object in the event input to determine what action to take. The code has cases for the following intents:

CovidTracker: This case retrieves COVID-19 statistics for a country and formats them into a response message. It uses the request-promise library to make a GET request to an external API, retrieves the relevant statistics, and formats them into a response message using the numeral library. The response message is then added to the message property of the default response object.

Goodbye: This case simply returns a farewell message as the response.

AboutBot: This case returns a message describing the purpose of the bot.

Welcome: This case returns a greeting message as the response.

Default: This case handles any other intent not covered by the other cases. It simply returns a generic message saying that no data was found for the requested country.

Finally, the dispatcher function returns the response object.

The handler function simply calls the dispatcher function with the event input and returns the result. This makes the dispatcher function the main logic for handling the input and generating the output of the AWS Lambda function that is using this code.

AWS Lambda provides us with the options to upload our file, which contains our code, to the playground. Since we have used npm modules for this lambda function, we have to zip the function, and we can do this by running this command in the terminal.

// create zip file
> zip -r handler.zip *

Click the "Upload from button" on the right side of the page, opposite the "Code Source" heading, from the playground, and select the ".zip file" option.

After the file upload is complete, the directory structure should look like this.

We must test the lambda function before deploying it, which requires some basic configuration.
Click the arrow next to the Test button to open a dropdown menu with the "Configure test event" option. When you do, a modal window with a few basic configuration options will appear.
As your test event action, choose "Create new event" and give it a descriptive name, such as "CovidTracker" in my case.
Copy and paste the code below into the "Event JSON" field. Change the slots.country value to the name of your country, then click the Save button.

{
  "messageVersion": "1.0",
  "invocationSource": "DialogCodeHook",
  "userId": "John",
  "sessionAttributes": {},
  "bot": {
    "name": "MakeAppointment",
    "alias": "$LATEST",
    "version": "$LATEST"
  },
  "outputDialogMode": "Text",
  "currentIntent": {
    "name": "CovidTracker",
    "slots": {
      "country": "Nigeria"
    },
    "confirmationStatus": "None"
  }
}

When you press the Test button, you should get the response shown in the screenshot below.

Attaching our Lambda function to our Lex bot.

Congratulations! Now that we've successfully created our lambda function, we need to connect it to our chatbot in order to improve its capabilities.

Choose one of the four previous intents. Under "Fulfillment," choose the AWS Lambda Function option and the chatBotFunction, making sure it's the most recent version. Do this for the remaining three intents.

To save all changes, click the "Save Intent" button. When making changes to any of your created intents, always click the save button.

Putting our Chatbot to Test
Let's put our bot to the test. Select the "Build" option. This button is located on the right side of the page. This button allows us to build our chatbot and use the test playground.
This only takes a few seconds, and we can put it to the test.

You can use all of the utterances specified in each intent to have a conversation and test the bot's efficiency.

Good job! Our bot is now ready for deployment.

Deploying the Bot Using AWS CloudFormation

Our bot is complete, but we must consider hosting and deploying the user interface. AWS already offers a simple method via one of its services, AWS CloudFormation.

AWS CloudFormation is an AWS tool that allows us to create and manage cloud resources. It enables us to automate application deployment and management in simple steps.

More information can be found here.

To begin, go to the management console, search for and select the Cloud Formation Service.

Make certain that the region you select is the same as where you created your bot.

You should see a page with various configuration options, but the ones we're most concerned about are:

Stack name: Provide a descriptive stack name that may include alphabets, numbers, or dashes.

CodeBuildName: This is the name of the CodeBuild project that will be created. It is used to upload the web application to S3. You could call it the same name as your stack name.

BotName: This applies to us under the Lex V1 Configuration parameters because we created our bot using the V1 console. You must use the same name you used when creating your bot in the Lex console. "CovidChatBot". Ignore the form field Lex V2 Bot Configuration Parameters.

WebAppParentOrigin: In the Web Application Parameters form section, we must enter the WebAppParentOrigin, which is the URL to which we want our bot's user interface to be integrated. Enter the URL where your React.js project is hosted.

WebAppPath: Under "Web Application Parameter," you must specify a path to the page (or pages) under WebAppParentOrigin that will host the chatbot UI. A comma-separated list of paths can be specified.

WebAppConfBotInitialText: This is the first bot message displayed to users in the chatbot UI.

WebAppConfToolbarTitle: The title that appears in the chatbot UI toolbar.

Once you've finished filling out the form fields, confirm the two acknowledgments at the bottom of the form, and click the "Create Stack" button.

Once your stack has been successfully created and deployed, you should see the following entries in the screenshot below.

Integrating With React.Js Project

Our stacks have been built and launched, and the status is now "CREATE COMPLETE". Our chatbot can now be integrated into a ReactJS project.

To begin, select the "stack name" that contains your chatbot in the CloudFormation console.
Scroll down the page and look for "SnippetUrl." Click on the "Outputs" tab. Clicking on the URL should take you to a page with a code snippet that you can paste into your web application.
Because we're integrating it with a React JS application, copy the snippet code and open your project's index.html file in the public folder.
Paste the snippet code just before the closing tag of the html file's body element.

When you visit your page, your chatbot should be visible on the right bottom side of the screen.

Amazing! You now have a Covid Tracker Lex-powered chatbot that is fully operational. Test the chatbot now, and you'll see how quick and effective it is.

Conclusion

To summarize, building chatbots with AWS Lex, Lambda, and CloudFormation and integrating them with a ReactJS web app is a powerful and efficient way to increase user engagement and customer satisfaction.

You can easily create chatbots with natural language understanding, integrate them with your web apps, and automate various workflows using these AWS Services. You can easily build and deploy chatbots by following the steps outlined in this article without having to worry about the underlying infrastructure.

You can provide an end-to-end solution for building sophisticated chatbots that can improve user experience and streamline business operations by leveraging the power of AWS Lex, Lambda, CloudFormation, and Reactjs.

So, as you move forward with building chatbots with AWS Lex, Lambda, and CloudFormation, I encourage you to fully explore the capabilities of these tools. With the right approach and tools, you can create chatbots that meet the needs and demands of your users.

If you liked my article and found it useful, please leave a tip. Your contribution would enable me to continue producing high-quality articles for you.

Thank you for your continued support, and I look forward to providing you with more useful content in the future.

A Beginner's Guide to Using Fetch and Axios to Consume REST APIs in React

The ERIN — Wed, 15 Feb 2023 15:23:28 +0000

Without us being aware of it, we use APIs every day. Whenever we use our gadgets to check the weather, send our loved ones a social media message, or even shop online at our favorite store, we use an API. APIs are a vital component of our digital world and are an integral part of the software development process.
React is an open-source front-end JavaScript library that is popularly used to help developers build user interfaces and interactive elements on websites. Any front-end developer who wants to use React to create modern, reliable online applications must understand how to consume an API to fetch data for their React applications.

This article will serve as a guide to describe in simple and plain terms how to use the two most commonly used techniques, the Fetch API and Axios (a promise-based HTTP Client for Node.js and its browser), to consume RESTful APIs in your React app.
By the end of this article, you will understand more about how to use data from REST APIs to power your React Apps and the significance of APIs in general.

Prerequisite

Basic knowledge of JavaScript
Basic knowledge of ES6 JavaScript
Basic understanding of React and React Hooks.

An API is a link or intermediary that enables communication between two web servers or systems. An Application Programming Interface is referred to as an API.

Data communication between different software systems is made possible by this software middleman. Consider the following scenario from the real world: You walk up to the woman working the counter at your favorite pizza shop to place an order. You give her all the information she needs to know, including the type and amount of pizza you want. Your order is taken by her, and she sends it to the kitchen. Your pizza is done after 20 minutes, and you are pleased. When you paid at the counter, you were unaware of what was taking place in the background. This entire production process provides a detailed illustration of how an API functions. The messenger, or "API" in this case, was the woman behind the counter. She accepts your order and directs the chef to fulfill it. They give her the pizza, or in this case, the "data," when the kitchen is finished, so she may deliver it to you. She served as a vital communication channel between you and the kitchen. This is a clear explanation of what API is.
The "kitchen" and the interior workings of the other systems are off-limits. Only the API layer, also known as an End Point, is accessible to us.

An API endpoint is a digital location or a uniform resource locator (URL) where a request for data is sent by a software system to retrieve the digital resources that exist in that digital location.

Software programs can have multiple API endpoints that store different digital resources. Your weather app, for instance, might contain an endpoint for the weather in a city other than your own.

What is a REST API?

The REST API often called the RESTful API, is a software architecture style that uses the HTTP protocol to interact and communicate with a web server. It's commonly used because of its adaptability and reduced bandwidth utilization. Commonly, REST APIs communicate via HTTP requests to perform standard database functions like creating, reading, updating, and deleting records (also known as CRUD) within a resource. For example, a REST API would use a GET request to retrieve a record, a POST request to create one, a PUT request to update a record, and a DELETE request to delete one. A representation of the resource's state is communicated to the requester or client when an HTTP request is made. This information is delivered in any format, including JavaScript Object Notation, HTML, XLT, Python, PHP, or plain text. JSON is the most popular file format because of its readability by both humans and machines. The REST architecture helps increase developers’ productivity by allowing them to display the information on the client-side and store or manipulate the data on the server-side.

Example of a REST API

[
  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi",
    "body": "quia et sumolestiae ut ut quas totam"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "qui est esse",
    "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit "
  },
]

How to consume REST API in React

In this article, I'll describe in plain English how to use the two most popular approaches—Fetch API and Axios(a promise-based HTTP Client for Node.js and its browser)—to consume REST APIs in your React projects.

We'll be using a functional component, which gives us the freedom to use React Hooks. The useEffect() hook and the useState() hook are the two that we'll require.

useEffect() Hook : We can perform HTTP requests inside function components using the useEffect hook. By including a variable in the second argument, we can instruct the useEffect to execute only when a specific state is reached or altered rather than the normal behavior of running after each render.

useState() Hook : We must prepare a state that enables us to retain the data when it is returned when we request data from a resource. This feature is made available to us via the useState hook.

Consuming APIs using the Fetch API

The Fetch API in JavaScript is a promise-based interface that allows you to fetch resources by making HTTP requests (i.e., either a GET request or a POST request) to servers from web browsers. It represents the eventual success or failure of an asynchronous operation using the JavaScript Promise. Either way, it can be rejected.

Basic Fetch Request Syntax

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error));

The fetch() method accepts two parameters: the URL of the resource you want to fetch and the init parameter, which is optional. It returns a promise that resolves into a response object, which contains the data that needs to be converted into a JSON format in order to work with it. In order to handle the response, the response object provides a number of helpful properties and methods, such as the then() and catch() methods.

Using Fetch() method in React Projects

In this section, we will be building a simple React app that allows us to consume an Advice Slip API, an external API that generates random advice slips.

For this example, we’ll use the Fetch API to retrieve the data from the resource. It is important to note the slight difference between using the fetch() method in Vanilla JavaScript and in React projects. The syntax is the same, but most fetch requests in a React application are executed inside a React component.

The first thing, we need to do is generate a new React project, by using the create-react-app. After initializing, make a new file called FetchAdvice.jsx in your src folder. All HTTP requests to fetch all of the data from a resource will be handled in this file

The useState() hook was used in the preceding code to declare a state variable that will store the data retrieved from the Advice API. Because the data we'll be expecting from the Advice API is a string containing random advice, we set the default value to an empty string. In some cases, the data retrieved from a resource may be of the array type. You'll need to set your initial value to an empty array for this.

As you may recall, the useEffect hook allows us to perform HTTP requests within function components. In the code above, we used the fetch() method within our useEffect hook to retrieve data from the Advice API immediately after our app loaded and after each render.

We don't need to add a method to the options array when using the fetch method to make GET requests because the default method is a "GET," but we do need to add a method to the options array for other requests, such as POST or DELETE.

To access and store each random advice in our state variable, we must destructure the data property in our response object, which gives us access to each random advice. The string can then be saved in our state variable.

To finish our work, we must handle promise rejection, which we can do with the catch() method.

Finally, we can display our fetched data in our JSX by adding our "advice" variable to an HTML element.

Consuming APIs using the Axios Method

Axios is a promise-based HTTP library that allows developers to send asynchronous HTTP requests to REST endpoints such as GET, POST, PUT/PATCH, and DELETE. It is isomorphic because it can run in both the browser and Node.js with the same codebase. It enables us developers to make data requests to either our own or an external server. Axios can be used with standard JavaScript as well as React or Vue.

How to Install Axios to your React Projects

Unlike the Fetch API, we must install the Axios library in order to use Axios in our React project. There are several installation options available; select the one that best suits your computer.

using npm:

$ npm install axios

using bower:

$ bower install axios

using yarn:

$ yarn add axios

How to use Axios to perform GET Requests

After successfully installing Axios in your React project, add another file called FetchUsers to your src folder. In this file, we'll use a different type of API called the JSON Placeholder, which is a free API for testing.

import React, { useState, useEffect } from 'react';
import axios from "axios";


const FetchUsers = () => {
   const [users, setUsers] = useState([]);

   useEffect(() => {
    axios
         .get('https://jsonplaceholder.typicode.com/users')
         .then((response) => response.json())
         .then((data) => {
            console.log(data);
            setUsers(data);
         })
         .catch((err) => {
            console.log(err.message);
         });
   }, []);

return (
   // ... display data here
);
};

Because Axios is not a built-in JavaScript method, we must first import it into the FetchUsers file. To make a GET request, we must use the .get() method, which accepts the API endpoint, and then handle the response object with the .then() and .catch() methods.

Finally, we must loop through the "post" array in order to display the data in our application.

const FetchUsers = () => {
// ...

   return (
   <div className="user__container">
      {users.map((user) => {
         return (
            <div className="user__parent" key={user.id}>
                <h2 className="user__parent--name">{user.name}</h2>
                <p className="user__parent--username">{user.username}</p>
                <p className="user__parent--email">{user.email}</p>
            </div>
         );
      })}
   </div>
   );
};

export default FetchUsers;

How to use Axios to make POST Request

We can use the HTTP POST request to send data to a server in order to create or update a resource. The data sent to the server is stored in the HTTP request body. According to the API guide, we can only send data to the JSON Placeholder API via the /post endpoint.
Create a new file called CreatePost in your src folder, where we will write our code to create a new post.

import React, { useState } from "react";
import axios from "axios";


const  CreatePost = () => {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');

  function newPost() {
    axios
      .post("https://jsonplaceholder.typicode.com/posts", {
        title: "Hello World!",
        body: "This is a new post."
      })
       .then((response) => response.json())
       .then((data) => {
         setPosts((posts) => [data, ...posts]);
         setTitle('');
         setBody('');
      })
      .catch((err) => {
         console.log(err.message);
      });
  }

const handleSubmitPost = (e) => {
   e.preventDefault();
   newPost(title, body);
};  

  return (
   <>
      <div className="newPost__container">
         <form onSubmit={handleSubmitPost}>
            <input type="text" className="post__input" value={title}
               onChange={(e) => setTitle(e.target.value)}
            />
            <textarea className="post__input"  
               value={body} onChange={(e) => setBody(e.target.value)}> 
            </textarea>
            <button type="submit">Create Post</button>
         </form>
      </div>

   </>
  );
}

export default CreatePost;

Based on the code above, we needed to define a state for our title and body variables. To add a new data point to an endpoint with Axios, use the .post() method. As the second argument to the .post() method, you must include an object property containing the data you want to add. To handle the response, you must once again use the .then() and .catch() methods.

You must create an HTML form element with two input tags, title and body, that contain the data that will be added to our state variables. You must also include a handler function called "handleSubmitPost" that stores the information obtained from the input tags. When you submit the form, a new instance is created in the Posts database with the new data.

How to use Axios to make DELETE Request

To remove data from an endpoint's resource, use the HTTP DELETE method. The .delete () method provided by Axios allows us to easily complete this HTPP request.

Examine the following code:

import React, { useState } from "react";
import axios from "axios";

const RemovePost = () => {

  const [post, setPost] = useState([])

  function deletePost(id) {
    axios
      .delete(`https://jsonplaceholder.typicode.com/posts/${id}`)
      .then((response) => {
         if (response.status === 200) {
          setPosts(
             posts.filter((post) => {
             return post.id !== id;
         })
      );
   } else {
      return;
   }
  }

   return (
   <div className="post__container">
      {posts.map((post) => {
         return (
            <div className="post__parent" key={post.id}>
               {/* ... */}
               <div className="button">
                  <div className="delete-btn" 
                    onClick={() => deletePost(post.id)}>
                     Delete
                  </div>
               </div>    
            </div>
         );
      })}
   </div>
   );
};

export default RemovePost;

When the delete button is pressed, the deletePost handler is called. This returns the id of the post to be deleted from the resource, but in order to completely remove the post from the UI, we must use the JavaScript array's filter method.

To ensure that our DELETE request was successful, we use the .then() method.

Key Differences between the Fetch API and Axios

Compatibility with Web Browsers :
Axios is compatible with a wide range of browsers, including older browsers such as Internet Explorer 11. Fetch, on the other hand, only works with Chrome 42 and up, Firefox 39 and up, Edge 14 and up, and Safari 10.3 and up.

Conversion of JSON Data :
Handling JSON data with the Fetch API is a two-step process. That is, whenever you make an HTTP request, you must call the .json() function on the response object. Unlike Axios, it automatically transforms JSON data with no manual intervention.

Installation :
Axios is a third-party package, so you must install it in your projects whenever you need it, whereas Fetch is a built-in function in JavaScript, so no installation is required.

Download Progress :
An HTTP request can sometimes take a long time to complete. In this case, the Axios library includes an Axios Progress Bar module to implement a nice progress indicator, but the Fetch API lacks progress bar support.

Interceptors for HTTP :
Because of its built-in feature called the HTTP Interceptor, the Axios library comes in handy when attempting to intercept HTTP requests, but the Fetch method by default does not provide a way to intercept requests.

Conclusion

Thus far, so good. We've learned in simple terms what APIs are and why they're important in software development.

The Fetch and Axios methods are both extremely fast and convenient methods for consuming APIs, with both having advantages and disadvantages, as we learned in the "Differences" section.

I recommend that you consume your APIs using either of the two methods. You should stick to the method that works best for you.

If you liked my article and found it useful, please leave a tip. Your contribution would enable me to continue producing high-quality articles for you.

Thank you for your continued support, and I look forward to providing you with more useful content in the future.

38 Awesome APIs to Inspire Your Next Software Project

The ERIN — Mon, 13 Feb 2023 13:44:47 +0000

As a developer, you will almost always have to use APIs in your projects. APIs are an essential component of both software development and our digital world. They enable two distinct software systems to communicate and exchange data.

In this article, I compiled a list of 38 incredible APIs comprising finance, sports, science, movies, food, and many other exciting and cool APIs that you could use in your next software project. They are simple to set up and free, so you don't have to be concerned about how to handle OAuth.

Art & Design

Art Institute of Chicago

The Art Institute of Chicago's API is a REST-style service that provides JSON-formatted data and allows you to explore and integrate the museum's public data into your projects.

Emoji Hub

EmojiHub allows you to get random emojis from pre-sorted categories and groups. You can also get a complete list of emojis by category, group, or the entire emoji database, which contains 1791 objects. All emoji data is stored in a simple JSON object from which you can get html codes to insert into your web applications.

xColors

xColors is a completely free service that allows you to get random colors and convert them into different color models (HEX, RGB and HSL are supported). All data is provided in a convenient JSON format, allowing you to use it immediately for CSS styling without further validation.

Dictionaries

Free Dictionary API

The Free Dictionary API gives you access to an English word database that includes definitions, phonetics, pronunciations, parts of speech, examples, and synonyms.

Merriam-Webster Dictionary API

The Merriam-Webster Dictionary API provides you with access to a vast collection of dictionary and thesaurus content, as well as specialized medical, Spanish, ESL, and student-friendly vocabulary.

Environment & Geo-Coding

Open Weather Map

OpenWeatherMap is an online service that provides global weather data via API for any geographical location, including current weather data, forecasts, nowcasts, and historical weather data.

REST Countries API

It provides detailed information about countries such as their capital, local currency, languages, code, capital city, region via a RESTful API.

Finance

Frankfurter

Frankfurter is an API that provides currency data and allows you to track available exchange rates published by the European Central Bank.

Coinranking

Coinranking API provides information for incorporating real-time cryptocurrency prices such as Bitcoin, Ethereum, and Dogecoin into your app or website. It also provides metadata on each coin listed, such as circulating supply, block explorers, trading pairs, logos, and other information.

Coinbase

The Coinbase Cloud API lets you integrate Coinbase's crypto payment or trading APIs, data access, or staking infrastructure into your projects.

Exchange Rate API

The Exchange Rate API provides currency conversion rates for 161 currencies.

Blockchain API

The Blockchain API allows you to send and receive payments from Blockchain Wallets, as well as data from transactions and blocks.

Food & Drink

The Meal DB API

An open, crowd-sourced recipe database from around the world. It also provides a free JSON API for anyone who wants to use it.

The Cocktail DB API

A free and open database of drinks and cocktails from around the world. It also provides a free JSON API for anyone who wants to use it.

Wine-Searcher

A search engine that locates the best prices for wines, beers, and spirits all over the world.

Humor & Personality

Techy

Generate cool tech-savvy sounding phrases easily

Excuser

This API is a simple excuse generator. It's a simple API that allows you to get a random excuse. You can use it to get random excuses for a specific person or a specific categories. It is free to use.

Meme Maker

The Meme Maker API is a REST API to create your own meme

Advice Slip

It is an external API that generates random advice slips.

Inspiration

This API generates quotes to motivate or inspire you!

Traitify

Every user is a person with a personality just waiting to be discovered. With this in mind, the Traitify API has developed a diverse set of enjoyable visual assessments for determining personality types and traits.

Kanye.rest

A free REST API for random Kanye West quotes (Kanye as a Service)

aztro

aztro is an API that provides horoscope info for sun signs such as Lucky Number, Lucky Color, Mood, Color, Compatibility with other sun signs, description of a sign for that day etc.

Quote Garden

It is a REST API for more than 5000 famous quotes

Music, Movies & Poems

MusixMatch

Musixmatch lyrics API is a robust service that permits you to search and retrieve lyrics in the simplest possible way.

Genrenator

As a developer, you may require a random genre or a story about a genre in particular. The Genrenator API has an endpoint for retrieving a random genre or genre story.

The Movie Db (TMDb)

The MovieDB API provides all of the data required to build a movie app. It's a very useful API for retrieving information about movies, actor images, TV shows, and much more.

The IMDb

The IMDb-API is a web service for receiving movie, serial and cast information. APIs results is a JSON and includes items such as movie specifications, images, posters, trailers, ratings, Wikipedia page content and more.

Poems

The Poem API returns the poem of the day as well as random poems. You can also search for poems by author, tag, or keyword, as well as access a private poem collection.

Science & Math

NASA

NASA offers a series of APIs that are beneficial to application developers. These APIs provide access to various types of data about astronomy, space weather, the Moon, Mars, and other topics.

Numbers API

The Numbers API provides a number of the day, a random number, number facts, and anything else you can think of that involves numbers.

SpaceX REST API

It is an Open Source REST API for launch, rocket, core, capsule, starlink, launchpad, and landing pad data.

Sports

Football Standings

Display football standings e.g epl, la liga, serie a etc. The data is based on ESPN site.

Test Data

Fake JSON

fakeJSON was designed to get you up and running with fake mock data in no time.

Fake Store

fakeStoreApi can be used with any type of shopping project that needs products, carts, and users in JSON format.

JSON Placeholder

It is a free fake API for testing and prototyping.

Toolcarton

Tired of copy and pasting lorem user's testimonial text which doesn't give the feel of authenticity, don't worry try testimonial API to get dummy testimonial data that includes user id, name, location, designation, avatar, message and rating.

Random User Generator

A free, open-source API for generating random user data. Like Lorem Ipsum, but for people.

Conclusion

These are some of the best APIs for use in your projects. Several APIs help developers improve their performance and save time. Here are some more resources for discovering new and exciting APIs:

I hope you found this article informative. What APIs have you used, and how have you found them to be useful? Let's talk about it in the comments section. Thank you ! , Vielen Dank!, Gracias!

Continue to IMAGINE. Remember that we live in an IMAGINATIVE world ❤.

DEV Community: The ERIN

How to Create and Send Custom Emails using React Email and Resend API

Prerequisites

Setting up the Development Environment

Creating a Next.js Project

Installing React Email and Resend Dependencies

Creating and Designing the Email Template Component

Configuring the Resend API from the Server-Side

Integrating Resend API to Send Custom Emails from the Client Side

Conclusion

Transforming Pixels into Imagination: Building an AI-Powered Image Generator with React.js and OpenAI API

Prerequisites

Project Repository

Overview of OpenAI and its Image Generation Capabilities

Obtaining OpenAI API credentials

Setting Up the Development Environment

Integrating React with OpenAI API

Creating the User Interface Components

Enhancing Image Generation

Adding Styling to Your Component

Conclusion

Additional Resources and References

How to Migrate Existing AWS Accounts into AWS Organizations

Prerequisites

Understanding AWS Organizations

Benefits of AWS Organizations

Steps for Migrating Existing AWS Account into an Organization

Best Practices for a Smooth Migration

Conclusion

Creating Dynamic QR Codes Using React.js: A Step-by-Step Tutorial

Prerequisite

Project Demo

Setting up the React.js project environment

Designing the QR Code Component

Styling the QrCodeGenerator Component

Enhancing the QR Code Component: Downloading the QR Code.

Importing the QrCodeGenerator Component into App.js

Alternative Methods of Generating QR Codes for Your Websites.

Conclusion

Understanding High Availability, Fault Tolerance, and Disaster Recovery in AWS: An Overview

High Availability: Definition, Importance, and Methods of Achieving it in AWS.

Importance of High Availability

Methods of Achieving High Availability in AWS

Fault Tolerance: Definition, Importance, and Methods of Achieving it in AWS.

Importance of Fault Tolerance

Methods of Achieving Fault Tolerance in AWS

Disaster Recovery: Definition, Importance, and Methods of Achieving it in AWS.

Importance of Disaster Recovery

Methods of Achieving Disaster Recovery in AWS

Conclusion

How to Build A GraphQL API with Node.js, Apollo-Server, and MongoDB Atlas

Introduction

Prerequisites

Setting up a MongoDB Atlas cluster

Connecting your application to the MongoDB database

Setting up a development environment

Setting up the Mongoose Model

Setting up GraphQL typeDefs and resolvers

Testing the Food-Recipe API in the GraphQL Playground

Conclusion

A Comprehensive Guide to Writing Your First GraphQL Query

Introduction

Prerequisites

What is GraphQL?

Differences between GraphQL and REST APIs

GraphQL Terminologies: Types, Schema, Queries, Mutation, and Resolvers

Types

Scalar Types

Object Types

Enumeration Types

Schema

Queries and Mutations

Queries

Mutation

Resolvers

How to write and run a GraphQL query using the GraphQL Playground

Explore the API Schema:

Writing our Query:

Viewing the response:

How to fetch a GraphQL API in a React.Js app

Importing the QrCodeGenerator Component into `App.js`