Forem: Chima Ogudoro

Unlock Faster Performance: A Beginner's Guide to Using Redis for Database Caching

Chima Ogudoro — Sun, 15 Jan 2023 18:38:14 +0000

When it comes to web development, speed and scalability are crucial for providing a seamless user experience. One way to improve the performance of a web application is by implementing a caching system. Caching stores frequently accessed data in a fast storage system, allowing for quick retrieval the next time the data is needed, without having to hit the database.

In this article, we will dive into Redis, an in-memory data structure store that can be used as a cache, database, and message broker. We will explore the benefits of using Redis for database caching, including setup and integration with a web application. By the end of this article, you will have the knowledge and tools to unlock lightning-fast performance for your website.

Pre-requisite

Before diving into the world of Redis and its benefits for database caching, it's important to note that this guide assumes that you already have Node.js, Redis, and MySQL installed on your computer. If you don't have these software programs installed, please follow these links to download and install them:
-Node.js
-Redis
-MySQL

Once these prerequisites are installed, you're ready to follow along with the rest of the article.

Note: Redis is not currently compatible with Windows operating systems. To use Redis on Windows, you must install Windows Subsystem for Linux (WSL) either by downloading it from Microsoft Store or following the instructions here.

What we’ll learn

Database caching is effective when dealing with data that is frequently accessed. In this example, we would use caching to make our API calls faster. We'll achieve this by saving the user's information to Redis when they log in and use that saved information for subsequent API calls instead of getting it again.

To simplify the process, we will not be implementing a full authentication system. Instead, we would hardcode the ID of an existing user record in a users table I have previously created.

Setup

To start a new Node.js project using npm, you can use the npm init command.

Open a terminal or command prompt in the directory where you want to create your project.

Run the command below to start the initialization process.

npm init

This command will prompt you to enter information about your project, such as the name, version, and description. You can press enter to accept the default values or enter your own.

Once you have entered all of the required information, npm will create a package.json file in your project directory. This file contains all of the information you entered, as well as the dependencies and scripts for your project.

Redis setup

Before starting this tutorial, you need to have Redis installed on your local environment. You can follow the installation guides for your specific platform to do this.

Installation for Mac
Installation for Ubuntu
Installation for Windows

Next, we add a start script in the package.json file to start running our server.

"start": "node src/index.js"

Installing Dependencies

Next, we will install the necessary dependencies needed for our API. To achieve this, on your command line run the code below.

npm install express dotenv ioredis mysql2

Then, we create a directory /src in our root folder and a file redis.js in the directory. Inside this file, we add the code below

import Redis from 'ioredis';
import mysql from 'mysql2';

export default class DataCache {
    constructor() {
        this.redis = new Redis();
        this.connection = mysql.createConnection({
            host: process.env.DB_HOST,
            user: process.env.DB_USER,
            password: process.env.DB_PASSWORD,
            database: process.env.DB_DATABASE,
        });
    }

    async getUserFromDB(id) {
        return new Promise((resolve, reject) => {
            this.connection.query(`SELECT * FROM users WHERE id = ${id}`, function (err, results) {
                if (err) {
                    reject(err);
                }
                resolve(results);
            });
        });
    }

    async getUser(id) {
        // session found in cache, send back to caller;
        let data = JSON.parse(await this.redis.get(`data:${id}`));
        if (!data) {
            // session not found in cache, fetch from the database
            data = await this.getUserFromDB(id);
            this.redis.setex(`data:${id}`, 60 * 60 * 1, JSON.stringify(data));
        }
        return data;
    }
}

Here, we define a class called DataCache. The class has a constructor that creates a connection to a Redis server and a MySQL server using the database credentials. The class has one method called getUser(), this method first checks if the data exist in the Redis server and returns it, if it does not exist, it retrieves the data from the MySQL server and store it in the Redis server for one hour before returning it.

Next, we create another file index.js in the /src directory. This would be the entry file of our API

import express from 'express';
import DataCache from './redis.js';
import env from 'dotenv';

env.config({path: process.env.ENV_FILE_PATH});
const app = express();

app.use(express.urlencoded({ extended: false }));
app.use(express.json());


// A middleware function to check if the user's session is cached in Redis
async function sessionMiddleware(req, res, next) {
    const dataCache = new DataCache();
    let id = "4";
    try {
        const userData = await dataCache.getUser(id);
        req.session = userData[0];
        next();
    } catch (err) {
        console.log(err);
        res.status(500).send("Error while trying to retrieve session from cache");
    }
}

// Use the middleware in a route
app.use("/login", sessionMiddleware, function (req, res) {
    // console.log(req.session);
    res.send(req.session.email + " Logged in");
});

app.listen(5000, console.log('Server is running...'))

Here, we would create a middleware function called sessionMiddleware. The function creates a new DataCache instance and uses its getUser method to get the user data by passing the user's id, which is hardcoded as 4 in this case. Typically, this id can be gotten by decoding the jwt token sent with in the authorization header.

Next, we run start server by running

npm start

We should get a Server is running… message logged on your console

Now, to test our application, we would make a GET request to the /login endpoint.

A comparison of the initial request, which queries the database for user information, shows a response time of 382 milliseconds..

However, when the same request is sent again, the response time is significantly reduced to 22 milliseconds! This is a 17X improvement in speed!

By including the sessionMiddleware function in subsequent authenticated requests, user data will be retrieved from cache, which will make our API faster.

Conclusion

Redis is a powerful tool that can improve the performance of your application by caching frequently accessed data. This article provided a beginner's guide on how to use Redis for database caching, including how it works, benefits, and implementation steps. Redis should be used to complement your main data storage, not replace it. With the right approach, Redis can help to improve the performance of your application and user experience.

NextJS + GPT-3: Build a cover letter generator

Chima Ogudoro — Sat, 07 Jan 2023 07:29:02 +0000

Learn how to build a cover letter generator. This app would generate a cover letter based on your skills and experience.

Overview

In this article, we will learn how to use GPT-3 (short for "Generative Pre-trained Transformer 3") in a simple way to create cover letters. OpenAI has developed a powerful language processing tool. It can be used to generate human-like text by predicting the next word in a sequence based on the context of the input.
To use GPT-3 for cover letter generation, you will need to provide it with some input. This can include information about the job you are applying for, your experience and skills, and any other information you want to include. Based on this input, the GPT-3 model will generate a cover letter.
One benefit of GPT-3 for cover letter generation is that it can save you time and effort. Instead of spending hours writing the perfect cover letter, you can use GPT-3 and let it do the work for you. Additionally, GPT-3 can produce highly personalized and professional-sounding cover letters that are tailored to the specific job you are applying for.
Overall, using GPT-3 for cover letter generation can be a valuable tool to increase your chances of landing an interview and streamline the job application.

What we’ll cover

Creating the NextJs app.
Getting GPT-3 API keys from OpenAI
Adding GPT-3 API functionality on our React app
Writing optimal GPT-3 prompts.

The source code for the final version can be found here. You can also check out the live demo!

Setup

The easiest way to get started with a NextJS project is to use the create-next-app template. It allows you to start building a new NextJS app quickly, without having to set up a build configuration yourself.

To get started, open your command line and run the code below

npx create-next-app cover-letter-generator

The cover-letter-generator in the command above is the folder name of our project. You can choose any name of your choice.

Alternatively, You can use yarn by running

yarn create-next-app

This will create a modern structure for a NextJS application and install all necessary dependencies to get your simple app ready.

After the setup is complete, you will navigate to the newly created folder by running

cd cover-letter-generator

Ensure you replace cover-letter-generator with the folder name you used.

Now you have to run the command below to check if the setup is successful

npm run dev

Your app should start on a URL in this form http://localhost:3000

Open it with your browser and you will see a page similar to this

Get your API key from OpenAI

To build an app powered by GPT-3, you need access to an API Key from OpenAI.

To get started with OpenAI, open this link.
Click on _Signup _and complete the signup process.
Next, you will be redirected to the dashboard.
Click on Personal _and then _View API Keys.
On the API Keys section, click on Create new secret key and copy it.

To prevent the secret key for calling the OpenAI GPT-3 API from being exposed in the browser, we will create our own API endpoint which will make the actual call to the GPT-3 endpoint.

To use your OpenAI API key in your project:

Create a file called .env in the project directory

Add the following line to the file, replacing "your-api-key" with your actual API key this way

OPEN_AI_KEY=your-api-key

Make sure to include .env in your .gitignore file before committing your code to a git repository. This will prevent your API key from being publicly exposed, which could lead to misuse and potentially result in your API key being suspended by OpenAI.

Add dependencies

To continue, you must install the dependencies required for this app. This can be done using the following command

npm i openai axios

Now, we create a file called generate.js in the pages/api directory. Then, add the following code to the file.


import { Configuration, OpenAIApi } from 'openai';

export default async function handler(req, res) {
  const { company, experience, skills, name, position } = req.body;

  const configuration = new Configuration({
    apiKey: process.env.OPEN_AI_KEY,
  });

  const openai = new OpenAIApi(configuration);

  const prompt = `Hello, AI! I'm a cover letter writer and I need your help crafting a perfect letter for a job seeker named ${name}. They're applying to work at ${company} as a ${position}, and they have ${experience} years of experience and the following skills: ${skills}. Can you please write a cover letter that highlights their relevant experience and skills, and explains why they're a great fit for the position? Make it engaging and persuasive, but keep it professional. Thanks!`

    const response = await openai.createCompletion({
      prompt,
      temperature: 0.7,
      max_tokens: 1024,
      top_p: 1,
      frequency_penalty: 0,
      presence_penalty: 0,
      model: 'text-davinci-003',
    });

    res.status(200).send(response.data.choices[0].text)
}

Here's a step by step explanation of the code:

We start by importing the Configuration and OpenAIApi components from the openai library.
Next, we create a new Configuration object and pass in an object containing the API key from our .env file.
We use the Configuration object to create a new instance of the OpenAIApi class.
We define a prompt string that includes placeholders for the name, company, position, experience, and skills variables. This prompt is a request for the AI to write a cover letter for a job seeker with the provided information.
We use the createCompletion method from the OpenAIApi instance to generate a response based on the prompt. We pass in an object containing various configuration options such as temperature, max_tokens, and model.

Then, we include code in the user interface that will call this API when necessary. The API's output will be displayed to the user through the interface.

Replace the code from the pages/index.js with this.


import { useState, React } from 'react';
import axios from 'axios';
import Head from 'next/Head';
import styles from "../styles/Home.module.css";

const App = () => {
  const [formData, setFormData] = useState({
    company: '',
    name: '',
    skills: '',
    position: '',
    experience: ''
  });
  const [result, setResult] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  }

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsLoading(true);
    try {
      const result = await axios.post('/api/generate', formData);
      setResult(result.data);
    } catch (err) {
      setError(err);
    }
    setIsLoading(false);
  }

  const handleCopy = () => {
    navigator.clipboard.writeText(result);
  }
  return (
    <>
      <Head>
        <title>Generate Cover Letter</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
      </Head>
      <div className={styles.container}>
        <div className={styles.wrapper}>
          <header className={styles.header}>
            <p>Generate a <span>Cover Letter</span> in seconds.</p>
          </header>
          <form className={styles.form} onSubmit={handleSubmit}>
            <label>
              Company:
              <input type="text" name="company" value={formData.company} onChange={handleChange} />
            </label>
            <br />
            <label>
              Name:
              <input type="text" name="name" value={formData.name} onChange={handleChange} />
            </label>
            <br />
            <label>
              Position:
              <input type="text" name="position" value={formData.position} onChange={handleChange} />
            </label>
            <br />
            <label>
              Skills:
              <textarea name="skills" value={formData.skills} onChange={handleChange} />
            </label>
            <br />
            <label>
              Years of Experience:
              <input type="number" name="experience" value={formData.experience} onChange={handleChange} />
            </label>
            <br />
            <button className={styles.button} type="submit">Generate Cover Letter</button>
            {result && <button className={styles.button} onClick={handleCopy}>Copy to Clipboard</button>}
            {isLoading && <p>Generating cover letter...</p>}
            {error && <p>An error occurred: {error.message}</p>}
            <br />
            <br />
            {result && <p className={styles.result}> {result}</p>}
          </form>
        </div>
      </div>
    </>
  )
}

export default App;

Start the development server by running npm run dev and this would appear

Checkout the complete code on Github

To quickly generate a cover letter, fill up the form appropriately and click Generate Cover Letter

Conclusion

In this article, we have learnt how the integration of Next.js and GPT-3 has resulted in a powerful and user-friendly cover letter generator. By leveraging the advanced language generation capabilities of GPT-3, this tool is able to provide highly personalized cover letter suggestions that can help job seekers stand out in a competitive job market. Overall, this innovative solution has the potential to revolutionize the way that job seekers approach the cover letter writing process, making it easier than ever before to craft a compelling and effective document.