DEV Community: Bernice Waweru

Secure User Sign In Node Using JWT

Bernice Waweru — Tue, 14 Mar 2023 18:34:01 +0000

This post will focus on user login in after they have registered.
You can find the post on user registration here.
In the previous section, we created the server, connected to MongoDB and also created the user model.
Here we will build up on the login logic.

Create login.js inside the routes folder.
Inside this file we will create the login endpoint which will:

Receive user details from client request.
Validate the details provided.
Check if the user exists in the database.
Authenticate the user by comparing the details provided and those in the database.
Return a Json Web Token to the client which will be used to authenticate the user in future requests.

The token is returned as a cookie.

Explore more on Json Web Tokens and how to use them here.

require('dotenv').config()
const { User, validate } = require('../models/user')
const bcrypt = require('bcrypt')
const express = require('express')
const jwt = require('jsonwebtoken')
const router = express.Router()
const SECRET = process.env.SECRET
const jwtExpirySeconds = 300

const loginRouter = router.post('/login', async (req, res) => {
    const { error } = validate(req.body)
    if (error) {
        return res.status(401).send(error.details[0].message)
    } else {
        try {
            let user = await User.findOne({ email: req.body.email })
            if (!user) {
                return res.status(400).json({ message: 'Incorrect email or password.' })
            }
            const correctPassword = await bcrypt.compare(req.body.password, user.password)
            if (!correctPassword) {
                return res.status(400).json({ message: 'Incorrect email or password.' })
            }
            const token = jwt.sign({ id: user._id }, SECRET)
            res.cookie(
                "token", token, {
                httpOnly: true,
                secure: process.env.NODE_ENV !== 'development',
                sameSite: "strict",
                maxAge: jwtExpirySeconds * 1000
            })
            res.json({ message: 'Successfully logged in' })

        } catch (err) {
            return res.status(400).json({ message: err.message })
        }
    }
})

module.exports = loginRouter

Let us understand what happens with the Json Web Tokens.
You need to set a SECRET on the .env file which will be used to sign the token

Ensure the SECRET is not easily predictable because it can be used to exploit the JWT tokens. Here is an example

After generating the JWT token we set it in the cookie which will be sent to the client.

Add the following changes to index.js

const loginRouter = require('./routes/login')
app.use('/api', loginRouter)

This ensure the application calls the loginRouter callback function when the application receives requests that match the specified route(api/login) and method(post).

Run the application using node index.js

Test on Postman using a user you have previously registered.

On the the cookies tab the HttpOnly flag is set to true and the secure flag is set to false because this is still in development.
When in production we can set this flag to true.

Code repo
Happy coding!!

References

User Registration in Node JS

Bernice Waweru — Sun, 12 Mar 2023 19:43:21 +0000

Prerequisites

Basic understanding of Javascript, Node, Express and MongoDB.
Knowledge of how to set up a server using Express and Node

Getting started

Often times you need users to register on your app to access different resources.

In this post we will explore how to register users using Node,Express and MongoDB.

Create a directory api

mkdir api
cd api

Run npm initto initialize the project.

Install bycrypt,express,joi,mongodb and mongoose as dependencies using:

npm install bcrypt dotenv express joi mongodb mongoose

Set up server and connect to database

Create a .env file and add the Port and Database URL variables.

DATABASE_URL = mongodb://127.0.0.1/users
PORT = 5000

Create index .js and update as follows.

require('dotenv').config()
const registerRouter = require('./routes/register')
const express = require('express')
const mongoose = require('mongoose')
const db = mongoose.connection
const PORT = process.env.PORT || 5010
const app = express()
app.use(express.json())

mongoose.connect(process.env.DATABASE_URL,
    {
        useNewUrlParser: true,
        useUnifiedTopology: true
    })
mongoose.set('strictQuery', true)

db.on('error', (error) => console.error(error))
db.once('open', () => console.log('Connected to Database'))
app.listen(PORT, () => console.log(`Server Started on port ${PORT}`))

The file contains boilerplate code used to set up a server and connect to the database.
You can find a detailed explanation on what each section does here.

Create User Model

During registration, the user provides a name,email and password which will be saved on the database allowing them to sign in later.

We will create a schema to define how the data is stored in the database.

Inside the api directory,create a models folder and add user.js file in this folder.

//models/user.js
const mongoose = require('mongoose')
const Joi = require('joi')

const userSchema = new mongoose.Schema({
    name: {
        type: String,
        required: true,
        min: 3,
        max: 100
    },
    email: {
        type: String,
        required: true,
        unique: true,
        min: 5,
        max: 255
    },
    password: {
        type: String,
        required: true,
        min: 8,
        max: 100

    }
})

function validateUser(user) {
    const schema = Joi.object({
        name: Joi.string().min(3).max(100).required(),
        email: Joi.string().min(5).max(255).required().email(),
        password: Joi.string().min(8).max(100).required()
    })
    return schema.validate(user)
}
const User = mongoose.model('User', userSchema)
module.exports.validate = validateUser
module.exports.User = User

In user.js we import mongoose for creating the User Schema which has the requirements for the name, email and password fields.

We use the Joi package to validate the user input to ensure it meets the requirements defined in the schema.

Since we will need the User model and the validateUser function elsewhere we have to export them make them accessible to other modules.

Create Registration Route

We need to create routes that define how the application's endpoints (URIs) respond to client requests.
You can learn more about routing in express here.

Create routes folder inside the apidirectory and add register.js file in the routes folder.

The register endpoint will:

Receive user details from client request
Hash the password to ensure passwords are not stored in the database as plain text.
Send the information to our database
Return the registered user as a response object.

//routes/register.js
const { User, validate } = require('../models/user')
const bcrypt = require('bcrypt')
const express = require('express')
const router = express.Router()


const registerRouter = router.post('/register', async (req, res) => {
    const { error } = validate(req.body);
    if (error) {
        return res.status(400).send(error.details[0].message);
    }
    let user = await User.findOne({ email: req.body.email })
    if (user) {
        return res.status(400).send('User already exisits. Please sign in')
    } else {
        try {
            const salt = await bcrypt.genSalt(10);
            const password = await bcrypt.hash(req.body.password, salt);
            const user = new User({
                name: req.body.name,
                email: req.body.email,
                password: password
            })
            await user.save()
            return res.status(201).json(user)
        } catch (err) {
            return res.status(400).json({ message: err.message })
        }
    }
})

module.exports = registerRouter

The user input is first validated based on the schema passed to Joi ensuring the user enters the expected input.
If the request contains invalid input, the user is prompted to make changes accordingly.

After ensuring that this user does not exist in the database,we use the bcrypt package to encrypt the password.

The user is saved on the database and a response containing user details.

You can make modifications to the functionality of the register router such as redirecting the user to the sign in page.

We export the registerRouter which will be used in index.js as the callback function when the application receives requests that match the specified route(api/register) and method(post).

Explore more on middleware here

Add the followimg code to the index.js file.

const registerRouter = require('./routes/register')
app.use('/api', registerRouter)

Run the application using:
node index.js

Here is an example of a post request to the api/register endpoint.

We have successfully registered a user and saved them in the database.
Find the full code here.
Happy coding!!!

Merge Intervals

Bernice Waweru — Thu, 10 Nov 2022 11:00:25 +0000

Instructions

Given an array of intervals where intervals[i] = [starti, endi], merge all overlapping intervals, and return an array of the non-overlapping intervals that cover all the intervals in the input.

Approach

Sort the input by starttime to have an ascending list for comparison.
Iterate through sorted intervals and if start of a given interval is less than or equal to the most recent end time stored in the result list then,update the previous end time(ie most recent end time in the result list) based on the max of current prevEnd and end of current interval.
If condition is not met append interval to result.

Implementation

def merge(self, intervals: List[List[int]]) -> List[List[int]]:

        intervals.sort()

        result = [intervals[0]]

        for start,end in intervals[1:]:

            prevEnd = result[-1][1]

            if start <= prevEnd:
                result[-1][1] =  max(prevEnd,end)
            else:
                result.append([start,end])
        return result

Happy coding !!

Design Underground System

Bernice Waweru — Wed, 09 Nov 2022 20:25:47 +0000

Instructions

Implement the UndergroundSystem class with the following methods:

checkIn(int id, string stationName, int t)
A customer with a card ID equal to id, checks in at the station stationName at time t.
A customer can only be checked into one place at a time.
checkOut(int id, string stationName, int t)
A customer with a card ID equal to id, checks out from the station stationName at time t.
getAverageTime(string startStation, string endStation)
Returns the average time it takes to travel from startStation to endStation.

Attempt here.

Approach

Some assumptions made when implementing the class

The average time is computed from all the previous traveling times from startStation to endStation that happened directly, meaning a check in at startStation followed by a check out from endStation.
The time it takes to travel from startStation to endStation may be different from the time it takes to travel from endStation to startStation.
There will be at least one customer that has traveled from startStation to endStation before getAverageTime is called.

Implementation

The Underground class which will have the three methods.
Attributes: a record of checkin timescheck_in and a record of the start and stop station and time taken between them. Use a dictionary to maintain these recordstravel.

class UndergroundSystem:

    def __init__(self):
        #dictionary of checkin stationName and time of checkin. 
        self.check_in = dict()
        #dict of start and stop station and time taken btwn them. 
        self.travel = dict()

The checkIn method adds the check in stationName and the time. These are stored as a tuple.

def checkIn(self, id: int, stationName: str, t: int) -> None:
        self.check_in[id] = (stationName, t)

The checkOut method checks if the given customer id is in the checkin dictionary and gets the start stationName. This is used to
create a tuple of start and end station for a given id.
We also determine the time taken to travel between the stations.

def checkOut(self, id: int, stationName: str, t: int) -> None:
        if id in self.check_in:
            startStation, t1 = self.check_in[id]

            # tuple of stations travelled
            stations = (startStation, stationName)

            #determine time taken btwn stations
            if stations in self.travel:
                self.travel[stations].append(t - t1)
            else:
                self.travel[stations] = [t - t1]
            #remove customer from checkin dictionary

            self.check_in.pop(id)

The getAverageTime method checks if the pair of startstation and end station are in the travel dictionary.
The average time is calculated by getting the total time divided by the number of times traveled between the two stations.

def getAverageTime(self, startStation, endStation):
        stations = (startStation, endStation)
        if stations in self.travel:
            time_taken_list = self.travel[stations]
            return sum(time_taken_list) / len(time_taken_list)

Here is the entire code.

Insert Interval

Bernice Waweru — Fri, 04 Nov 2022 06:17:34 +0000

Instructions

Insert newInterval into intervals such that intervals is still sorted in ascending order and intervals still does not have any overlapping intervals (merge overlapping intervals if necessary).

Attempt here

Example

Input: intervals = [[1,3],[6,9]], newInterval = [2,5]
Output: [[1,5],[6,9]]

Approach

Since the input is sorted, we can check if the end value of newInterval is less than the start value of the elements in the intervals list.

If the endtime of the newInterval is less than start[i][0] then we insert it in the results variable then insert the remaining intervals because output should be in ascending order.

If the starttime of the newInterval is greater than the endtime of a given interval then we append the interval to the results

For overlapping intervals, we merge them by geting the start value as the minimum of the two starts and the end value as the maximum of the end values.
Append new interval to result and return result.

Implementation

def insert(intervals, newInterval):

        result = []
        for i in range(len(intervals)):
            if newInterval[1] < intervals[i][0]:
                result.append(newInterval)
                return result + intervals[i:]
            elif newInterval[0] > intervals[i][1]:
                result.append(intervals[i])
            else:
                newInterval = [min(newInterval[0],intervals[i][0]), max(newInterval[1],intervals[i][1])]

        result.append(newInterval)

        return result

This runs in O(n) time complexity and O(n) space complexity.

Happy learning!!

Product of Array Except Self

Bernice Waweru — Mon, 31 Oct 2022 09:06:11 +0000

Instructions

Given an integer array nums, return an array answer such that answer[i] is equal to the product of all the elements of nums except nums[i].

Attempt here

Example

Input: nums = [1,2,3,4]
Output: [24,12,8,6]

Approach

The first idea you are likely to come up with is to find the product of all the elements in the array and divide the product by nums[i] to get the product at a given i.
However, the questions requires that we do not use the division operator.

Another approach would be to maintain a prefix that stores the product of elements before array[i] and a postfix that stores the product of elements occuring after array[i].

Implementation

def productExceptSelf(self, nums: List[int]) -> List[int]:

        result = [1] * (len(nums))
        prefix = 1
        postfix = 1

        for i in range(len(nums)):
            result[i] = prefix
            prefix *= nums[i]        
        for i in range(len(nums) - 1, -1, -1):
            result[i] *= postfix
            postfix *= nums[i]
        return result

When calculating the postfix we iterate through the array with -1 step. A negative step value in a range() function generates the sequence of numbers in reverse order.

This solution uses O(1) space complexity and O(n) time complexity.

Video Solution
Happy learning !!!

Spiral Matrix

Bernice Waweru — Mon, 31 Oct 2022 06:14:58 +0000

Instructions

Given an m x n matrix, return all elements of the matrix in spiral order.

Input: matrix = [
[1,2,3],
[4,5,6],
[7,8,9]]
Output: [1,2,3,6,9,8,7,4,5]

Attempt the question.

Approach

The output follows a clockwise motion; we move to the left, then downwards, upwards and finally to the right.

We initialize four pointer; left,right,top and bottom.
Then move from left to right and update the top pointer to the next row because we are done with the given row.

Then move from current top to bottom to cover elements on the rightmost column and update the right pointer.

Move from right to left in the bottom most row and update the bottom pointer.

Move from bottom to top and update the left pointer.
This process continues until the left and right pointer meet or the top and bottom pointer meet.

Implementation

def spiralOrder(matrix):
    left, right = 0, len(matrix[0])
    top, bottom = 0, len(matrix)

    spiral = []

    while (top < bottom and left < right):
        # left to right
        for i in range(left, right):  
            spiral.append(matrix[top][i])  
        top += 1
        # right to bottom
        for i in range(top, bottom):  # does not repeat value because we have updated top
            spiral.append(matrix[i][right-1])
        right -= 1
        if not (top < bottom and left < right):
            break
        # right to left
        for i in range(right-1, left-1, -1):
            spiral.append(matrix[bottom-1][i])
        bottom -= 1
        # top to bottom
        for i in range(bottom-1, top-1, -1): 
            spiral.append(matrix[i][left])
        left +=1

    return spiral

Happy learning !!

References

Spiral Matrix

Design a Call Center.

Bernice Waweru — Sun, 30 Oct 2022 19:42:25 +0000

Instructions

A call center has three levels of employees: respondent, manager,
and director. An incoming call must be first allocated to a respondent who is free. If the respondent can't handle the call, he or she must escalate the call to a manager. If the manager is not free or not able to handle it, then the call should be escalated to a director. Design the classes and
data structures for this problem. Implement a method dispatchCall() which assigns a call to the first available employee.

Approach

We will follow the approach suggested in Cracking the Coding Interview:

Step 1: Handle Ambiguity

Here we determine the constraints and assumptions we will use in the design.

We assume the responders always get the initial calls and they only escalate to manager if they cannot handle it. The call is escalated to the director if the manager cannot handle it and the director can handle all calls.
Calls are placed in queue awaiting to be handled.

Step 2: Define the Core Objects

The main objects are Employee, Call,and CallCenter.
The Respondent, Manager, and Director classes inherit from the Employee class.
We also include a Rank class to handle the employee's rank, CallState class to determine the state of each call.

Step 3: Analyze Relationships

An employee can only handle one call at a time.

Step 4: Investigate Actions

The Employee can receive and end a call.
The Responder and Manager can escalate calls.
The CallCenter dispatches calls to available employees.

Implementation

Create an enumeration to define the level of each employee.
We create an enumeration where the levels are functionally constant.
Learn more about enum here.

from enum import Enum

class Rank(Enum):
    RESPONDER = 0
    MANAGER = 1
    DIRECTOR = 2

Create class Employee which is a super class of the Responder, Manager and Director classes.

We implement the Employee class as an abstract class with all the abstract methods common to all employees.

More about abstract classes in python here and here.

An abstract class inherits from the Abstract Base Class ABC. @abstractmethod is a decorator to define an abstract method.

from abc import ABCMeta, abstractmethod
class Employee(metaclass=ABCMeta):

    def __init__(self, employee_id, name, rank, call_center):
        self.employee_id = employee_id
        self.name = name
        self.rank = rank
        self.call = None
        self.call_center = call_center

    def take_call(self, call):
        """Assume the employee will always successfully take the call."""
        self.call = call
        self.call.employee = self
        self.call.state = CallState.IN_PROGRESS

    def complete_call(self):
        self.call.state = CallState.COMPLETE
        self.call_center.notify_call_completed(self.call)

    @abstractmethod
    def escalate_call(self):
        pass

    def _escalate_call(self):
        self.call.state = CallState.READY
        call = self.call
        self.call = None
        self.call_center.notify_call_escalated(call)

Create Responder class inheriting from Employee.
Learn more about inheritance here.

RANK.RESPONDER returns the value of the responder's level

class Responder(Employee):

    def __init__(self, employee_id, name):
        super(Responder, self).__init__(employee_id, name, Rank.RESPONDER)

    def escalate_call(self):
        self.call.level = Rank.MANAGER
        self._escalate_call()

Create the Manager Class inheriting from Employee.

class Manager(Employee):

    def __init__(self, employee_id, name):
        super(Responder, self).__init__(employee_id, name, Rank.MANAGER)

    def escalate_call(self):
        self.call.level = Rank.DIRECTOR
        self._escalate_call()

Create class Director.
Director cannot escalate call; therefore, we throw an error.

class Director(Employee):

    def __init__(self, employee_id, name):
        super(Responder, self).__init__(employee_id, name, Rank.DIRECTOR)

    def escalate_call(self):
        raise NotImplementedError('Directors must be able to handle any call')

Create an enumeration to define the state of a given call.

class CallState(Enum):

    READY = 0
    IN_PROGRESS = 1
    COMPLETE = 2

Create Call class.

class Call(object):

    def __init__(self, rank):
        self.state = CallState.READY
        self.rank = rank
        self.employee = None

Create the CallCenter class.

Attributes: responders, managers, directors and calls.
methods : dispatch_call, notify when call is escalated,completed,

from collections import deque
class CallCenter(object):

    def __init__(self, responders, managers, directors):
        self.responders = responders
        self.managers = managers
        self.directors = directors
        self.queued_calls = deque()

    def dispatch_call(self, call):
        if call.rank not in (Rank.RESPONDER, Rank.MANAGER, Rank.DIRECTOR):
            raise ValueError('Invalid call rank: {}'.format(call.rank))
        employee = None
        if call.rank == Rank.RESPONDER:
            employee = self._dispatch_call(call, self.responders)
        if call.rank == Rank.MANAGER or employee is None:
            employee = self._dispatch_call(call, self.managers)
        if call.rank == Rank.DIRECTOR or employee is None:
            employee = self._dispatch_call(call, self.directors)
        if employee is None:
            self.queued_calls.append(call)

    def _dispatch_call(self, call, employees):
        for employee in employees:
            if employee.call is None:
                employee.take_call(call)
                return employee
        return None

    def notify_call_escalated(self, call):
        print("Call escalated")

    def notify_call_completed(self, call):
        print("Call completed")

You can find the entire code here.
Happy learning and designing !!!

References

Cracking the Coding Interview
System Design Primer

Caching in Python

Bernice Waweru — Sun, 10 Jul 2022 14:41:01 +0000

caching is winning the battle without the fight.

Caching refers to storing data in a cache for faster retrieval. Caching facilitates easier scaling by enabling you to return responses without computing them all the time.

A cache is a piece of hardware or software that stores data allowing future responses to be served faster decreasing time taken to return responses.

Caching is used in different systems including the central processing unit (CPU) memory caches, hard drive caches, Linux operating system file caches, database query caches, Domain Name System (DNS) client caches, Hypertext Transfer Protocol (HTTP) browser caches, HTTP proxies and reverse proxies.

It is important to consider when and where to caching to leverage its ability to improve application performance.

Cache Hit Ratio
The Cache hit ratio is measure of how many times you can reuse the same cached response.
For instance, a 90% cache hit ratio with ten requests means that you hit the cache 9 out of 10 times. You only compute the response once and serve the same response for the other nine requests.

A high cache hit ratio is desirable although one must ensure the response does not become stale.

Factors affecting cache hit ratio

Data Size

The number of all possible cache keys an application can generate affects the cache hit ratio because the more unique the cache keys the lower the cache hit ratio.

Space

The size of the objects and the size of the cache determine the cache hit ratio because objects have to be evicted to fit the cache.
The more responses that can fit in the cache the higher the cache hit ratio.

Longevity

The average time a response can be stored in cache before expiring or being invalidated determines the cache hit ratio.

A Time to Live(TTL) is defined indicating the time an object can stay in the cache before expiring.
The longer the TTL the higher the cache hit ratio.

Ideal Cases for Caching

Use cases with a high ratio of reads to writes; the cached objects can be created once and stored for longer periods of time before becoming invalid.

Unideal Cases for Caching

Use cases with data updating very often may render cache useless, as objects in cache may become invalid before they are used again.

Implementation in Redis

In this post we will explore how to implement caching using Redis.

Redis is a one of the most popular data stores used as a cache together with Python due to its capabilities.

To get started with Redis, install redis using

pip install redis

On the command line, run redis-cli to connect to redis.
Data in redis is stored as key-value pairs where the keys have to be unique.

You can think of redis as a glorified dictionary.

Useful Commands

To store data use the SET command.
Syntax: set key value
The SET command has several options that specify how the data should be stored.

Use the GET command to retrieve data using the key.
Syntax: get key

Use keys * to retrieve all the keys of the stored data.

connect Python Client to Redis

Let us see how to use Redis to cache data retrieved from an API

Create a file caching.py

import redis
import sys

def connect_redis():
try:
        client = redis.Redis(
            host="localhost",
            port=6379,
            db=0,
            socket_timeout=5,
        )
        ping = client.ping()
        if ping is True:
            print("Connection Established!")
            return client
    except redis.AuthenticationError:
        print("AuthenticationError")
        sys.exit(1)

client = connect_redis()

connect_redis() tries to connect to the redis server.

Getting data from the jsonplaceholder API and storing it in redis.

def get_data_from_api(url):
    data = requests.get(url).json()
    return data

def set_data_to_cache(data):
    id = data['id']
    title = data['title']
    timeout = 30
    return client.setex(id,title,timeout)

Get data from cache and display it

def get_data_from_cache(id):
    title = client.get(id)
    return title

def display_data(id):
    title = get_data_from_cache(id)
    if title is not None:
        return title
    else:
        data = get_data_from_api(url)
        print(data['title'])
        title = data['title']
        return title

client = redis_connect()
url = "https://jsonplaceholder.typicode.com/posts/1"
display_data("1")

You can find the code here
Happy Learning !!!

References

Web Scalability for Startup Engineers.

Fetch API Data on Button Click in React.

Bernice Waweru — Sun, 03 Jul 2022 11:55:06 +0000

Prerequisites

JavaScript
React

React Hooks

The React library has some hooks that help manage the state of various components without relying on classes.

The useEffect hook is used for managing side effects such as fetching data in functional components.
Side effects are operations that change the state of a component outside a function.

Let us see an example of how to use the useEffect hook to fetch data from the JSON placeholder API.

We can define a function to fetch data and call it within the useEffect hook.

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

function App() {
    const [data, setData] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            const response = await fetch(`https://jsonplaceholder.typicode.com/albums/1`)
            const newData = await response.json()
            setData(newData)
        };

        fetchData();
    }, [])

    if (data) {
        console.log(data)
        return <div className='App'>{data.title}</div>;
    } else {
        return null;
    }

}

export default App;

fetchData() fetchs data from the API and sets the new state of the data.

You can use a library such as axios to make HTTP requests to APIs.

This retrieves details for the item with id 1 in the album api as shown below.

useEffect runs after every render; it runs after the first render and every time there is an update.
We can use a dependency array to ensure the effect only runs when the state of id changes.

useEffect(() => {
      const fetchData = async () => {
           const response = await fetch(`https://jsonplaceholder.typicode.com/albums/${id}`)
            const newData = await response.json()
            setData(newData)
        };

        fetchData();
    }, [id])   
}

We use the useState hook to store the state of the data retrieved from the API.

This function is useful when we need to retrieve data without relying on a specific event such as a mouse or button click.

Since useEffect runs the first time a component is mounted on the DOM we need to find a way to only fetch data when an event occurs especially when we are dependent on user input.

Fetch Data on Button Click

We can use a custom function to fetch data without relying on useEffect to avoid calling the API each time there is an update.

A user submits an id for the item they would like to retrieve. This makes the id field dynamic.

Getting User Input

<input className='album_id' required="required" placeholder='Enter an ID'/>
<button type="submit">Search</button>

Handling user input

const [id, setId] = useState('')
const [data, setData] = useState(null)

const handleClick = async () => {
        try {
            const data = await (await fetch(`https://jsonplaceholder.typicode.com/albums/${id}`)).json()
            setData(data)
        } catch (err) {
            console.log(err.message)
        }
    }
 return (
        <div>
            <input className='album_id' required="required" placeholder='Enter an ID' value={id} onChange={e => setId(e.target.value)} />

            <button type="submit" onClick={handleClick} >Search</button>

        </div>
    )

We define an id variable and store its state using the setId function and supply the Id to the URL.

We can also customize the output displayed depending on whether we get the expected response from the API.

function checkResponse(data) {
        if (data) {
            console.log(data)
            return <div className='App'>{data.title}</div>;
        } else {
            return null;
        }
    }

checkResponse() is used to render different output depending on the state of the response.

Here is the complete code used in this post.
Happy learning !!!

HTTP: An Introduction

Bernice Waweru — Sat, 25 Jun 2022 08:24:06 +0000

Hypertext Transfer Protocol (HTTP) is a client-server protocol for fetching resources allowing communication between the server and the client.

The client initiates the process by sending a request and the server returns the requested document as a response.

The document is constructed from different sub-documents fetched including, text, layout description, images, videos, and scripts.

The client combines these resources to render a web page that can be updated using the scripts.

Characteristics of HTTP

HTTP is simple allowing for readability and ease of use
HTTP is extensible and adaptable to various functionalities between the server and the client.
HTTP is stateless and the server does not keep any data about the request. Each request is independent.

HTTP Messages

Two types of HTTP messages; Request and Response.

Request

The request consists of:

HTTP method

This represents the operation the client wants to perform.

The most commonly used HTTP methods are GET, POST,PUT and UPDATE.

GET is used to retrieve resources from the server.
POST is used to send resources such as form data to the server.
DELETE is used to remove resources from the server.
PUT is used to make changes to existing information in the server.
HEAD is used to get the headers of a get request without the body.
PATCH is used to make partial updates to resources.

Learn more HTTP methods here.

Path
This is the path of the resources to be used. The URL of the resource.
Body
Data sent to the server. POST,PUT and PATCH requests have request bodies.
Optional Headers
The headers give the server more information about the request.

Response

The response consists of the

HTTP response status codes

HTTP response status codes indicate whether a specific HTTP request has been successfully completed.
The status code fall under five categories:

Informational responses (100–199)
These responses are used to give more information to the client on how to proceed while waiting for a response.
Successful responses (200–299)
These indicate that the request was executed successfully and a response sent to the client successfully.
Redirection messages (300–399)
These responses inform the client on where to find a resource if it has been moved or redirected elsewhere.
Client error responses (400–499)
The response alert the client of an error on their side causing the server to be unable to process the request.
Server error responses (500–599)
Inform the client that their request was not processed because of an error on the server side.
Find specific status codes here
Headers
The headers provide more information about the response.
Body
This is the data returned in a response from the fetched resource.

Details on HTTPs will be covered in a future post.

Happy learning!!!

SQL Brush-up

Bernice Waweru — Wed, 30 Mar 2022 09:35:07 +0000

SQL refers to Structured Query Language.
It is primarily used in Relational Database Management Systems including MS Access, Oracle, Postgres, MySQL and SQL Server.
We will be using MySQL.

SQL Commands

Creating a Database

CREATE DATABASE mydb;

Using the created database mydb

USE mydb;

Creating a table

CREATE TABLE mytable
(
 id int unsigned NOT NULL auto_increment,
 username varchar(100) NOT NULL,
 email varchar(100) NOT NULL,
 PRIMARY KEY (id)
);

Inserting into table

INSERT INTO mytable ( username, email )
VALUES ( "myuser", "myuser@example.com" );

Updating a row in the table

UPDATE mytable SET username="myuser" WHERE id=5

Deleting a row in a table

DELETE FROM mytable WHERE id=5

Select rows based on conditions.

SELECT * FROM mytable WHERE username = "myuser";

returns all the columns in the table.

The power of SQL lies in its ability to use nested complex queries to provide the desired output.
Let us look at some commands that make SQL queries more robust.
AND,OR,NOT

These commands work similarly to how they are used as logical operators in programming languages.
They are combined with the WHERE clause to specify the conditions that must be met.

AND returns only the records that meet all the conditions.
OR returns a record if any of the conditions in the query are met.
NOT displays a record if the conditions in the query are NOT TRUE.

IN returns the records based on the values supplied.
It is used together with the WHERE clause and acts as a shorthand for multiple OR conditions.
We can also use **NOT IN **to get records that are not in the specified values supplied to the clause.

BETWEEN
BETWEEN is useful when extracting records in a given range. For instance between dates or prices.

Note: BETWEEN is inclusive; it includes the beginning and end values.

It is used with the WHERE clause and can be combined with AND,OR, NOT to specify results further.

EXISTS
TRUE if the subquery returns one or more records that satisfy the condition.

LIKE

It returns TRUE if the operand matches the specified pattern.

ORDER BY

This command is used to define the order in which the results of a query should be displayed.

The default is ascending order thus to display in descending order we specify using the DESC keyword.

Aggregate Functions

Aggregate functions help us retrieve data by performing different operations on columns.

These functions are AVG,COUNT,MIN,MAX, SUM

AVG returns the average of the selected values.
COUNT counts how many rows meet the specified conditions
MIN returns the lowest value in a particular column.
MAX returns the highest value in a column.
SUM adds all the values in a particular column. Here's and example of how we can use COUNT,BETWEEN and AND with WHERE clause.

SELECT COUNT(*) FROM sales.transactions WHERE order_date BETWEEN '2017-01-01' AND '2017-12-31';

This returns the number of transactions that were recorded between January and December 2017 from the transactions table.

GROUP BY

The command is used to group rows that have the same values such that the query returns a single row for every grouped item.

GROUP BY can be used with aggregate functions as shown below.

SELECT COUNT(zone),zone  FROM sales.markets
GROUP BY(zone)

Output

The query returns the number of markets in each zone.
We can use AS to rename column names. This is known as aliasing.

SELECT COUNT(zone) AS market_nums,zone  FROM sales.markets
GROUP BY(zone)

GROUP BY is also used with the HAVING clause which filters the record from the groups based on the specified condition.

The HAVING clause is used because the WHERE keyword cannot be used with aggregate functions.

SELECT COUNT(zone) AS market_nums,zone  FROM sales.markets
GROUP BY(zone)
HAVING(count(zone)>3)

Output:

The query returns zones with more than 3 markets.

SQL JOINS

JOINs horizontally combine results from different tables.

A JOIN is used to combine rows from two or more tables, based on a related column between them.

There are several types of joins.

INNER JOIN: Returns records that have matching values in both tables. Syntax:

SELECT column_name(s)
FROM table1
INNER JOIN table2
ON table1.column_name = table2.column_name

Example:

SELECT  markets.markets_name, transactions.product_code,transactions.sales_qty
FROM sales.markets
INNER JOIN sales.transactions
ON markets.market_code = sales.transactions.market_code

Output:

LEFT JOIN: Returns all records from the left table, and the matched records from the right table.

The "left" refers to the table that appears before the JOIN in the query and the "Right" refers to the table that is after the JOIN.

Example

SELECT  markets.markets_name, transactions.product_code,transactions.sales_qty
FROM sales.markets 
LEFT JOIN sales.transactions
ON markets.market_code = sales.transactions.market_code

Output:

RIGHT JOIN: Returns all records from the right table, and the matched records from the left table
FULL JOIN: Returns all records when there is a match in either left or right table. Any row that does not have a match in both tables will have NULL entries for the missing values.

SQL UNIONS

SQL UNION is used to vertically concatenate columns.
It combines the results of two or more SELECT statements.

The columns must also have similar data types.
Every SELECT statement within UNION must have the same number of columns
The columns in every SELECT statement must be in the same order.

UNION Syntax

SELECT *column_name(s)* 
FROM *table1*
UNION
SELECT *column_name(s)* FROM *table2*;

The UNION operator selects only distinct values by default.

We use UNION ALL to include duplicate values:

SELECT *column_name(s)* FROM *table1*
UNION ALL
SELECT *column_name(s)* FROM *table2*;

Note: The column names in the result-set are usually equal to the column names in the first SELECT statement.

Use UNION DISTINCT to drop duplicate values.