DEV Community: Nelson Chibukasia

Integrate Sendgrid using Web API in Ruby on Rails - React application

Nelson Chibukasia — Sun, 20 Nov 2022 23:29:48 +0000

Sometimes it's always challenging to integrate a mailing system in Rails API for beginners. In this blog, I'll explain step by step on how to integrate Sendgrid in a Ruby on Rails-React application. The blog is beginner friendly and easy to understand.
Setting up Sendgrid mailing system in Rails has always scared beginners in Rails as they think its a complex process. Just to let you know, there is nothing complex with setting up Sendgrid in Rails application.
There are two ways of setting up Sendgrid email system in a web application, that is using Sendgrid Web API and Sendgrid SMTP Relay. In this blog, I will discuss setting up Sendgrid using Web API which is the most recommended way. Let's begin the journey.

Create a Rails application

Lets begin by creating up our rails application. Use the rails new sendgrid --api to create a API rails application.

Get into the direcory of the rails application using the command cd sendgrid. Genrate a user resource with the username and email as the attributes. Both are strings. The command is rails g resource user username email.
. Run rails db:migrate to run the migrations.
. Start the rails server using the command rails s.

With that done, we shall have our routes, controller, and models already created. Let's go ahead and add some codes in the user controller and user model.

Add Validations in user model

Let's add some validations to make sure the input fields are not empty.

class User < ApplicationRecord
    validates :username, presence: true 
    validates :email, presence: true 
end

Add controller actions in user controller

We are done with the user model, let's now modify our user_controller file to create a new user and validate if username or email is empty. Head to the controllers folder and edit the user_controller.rb file. Let's first create our index method that we shall use to test our API to see if we have our data in properly stored. Edit the userController class to look this this way

class UsersController < ApplicationController
    # Get all users 
    def index 
        users= User.all 
        render json: users
    end
end

Let's add a create method to add a user to the database

# Create a user 
    def create 
        @user = User.create!(user_params)
        render json: {body: @user, message: "User created successfully"}, status: :created
    end

We need to create two private methods, one for permitting user parameters and the other for validating user input.

 # Private methods
    private 

    def user_params
        params.permit(:username, :email)
    end

    # Invalid entity response 
    def invalid_entry(invalid)
        render json: {errors: invalid.record.errors.full_messages}, status: :unprocessable_entity 
    end

Then add a rescue for the invalid user entity at the top of the class

rescue_from ActiveRecord::RecordInvalid, with: :invalid_entry

Our user controller class should be looking similar to this at the moment

class UsersController < ApplicationController
    rescue_from ActiveRecord::RecordInvalid, with: :invalid_entry
    # Get all users
    def index 
        users= User.all 
        render json: users
    end

    # Create a user 
    def create 
        @user = User.create!(user_params)
        render json: {body: @user, message: "User created successfully"}, status: :created
    end

    # Private methods
    private 

    def user_params
        params.permit(:username, :email)
    end

    # Invalid entity response 
    def invalid_entry(invalid)
        render json: {errors: invalid.record.errors.full_messages}, status: :unprocessable_entity 
    end
end

Let's have our user controller looking that way at the moment. We shall come back to edit it when setting up Sendgrid.
Next, let's add CORS by uncommenting the code in cors.rb in initializers folder in config directory. The code in cors.rb should look like this

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins "*"

    resource "*",
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

To make sure our cors configuration is working, we need to uncomment the cors gem in gem file and the run bundle install to install the necessary dependencies. Restart the rails server.

Test APIs using postman

We need to test our APIs and see if they are working perfectly. Open postman and try creating a new user using the post method, and then get all the users created using the get method.

Create a user

Get all users

Okay, our API endpoints are working fine.
Now, let's get our front-end working

Create React App

The next step is creating a react application with a user simple user signup page. Let's begin by creating our react application. Use the command npx create-react-app client to create a react app called client . Get in the react app directory using the command cd client and run npm start to run the react application.

Create a sign up page

Create a Signup.js file in the clients src folder. Create a functional component called Signup and add the following code in it.

import React from 'react'

function Signup() {
  return (
    <div style={{width: "300px", marginLeft: "auto", marginRight: "auto"}}>
        <h2>User Signup</h2>
        <form style={{display: "flex", flexDirection: "column"}}>
            <label htmlFor='username'>Username:</label> 
            <input type={'text'} id= "username" name='username' /><br/>
            <label htmlFor='email'>Email:</label> 
            <input type={'text'} id= "email" name='email' /><br/>
            <button type='submit'>Submit</button>
        </form>
    </div>
  )
}

export default Signup

Edit the App.js with the following code

import './App.css';
import Signup from './Signup';

function App() {
  return (
    <div className="App">
      <Signup />
    </div>
  );
}

export default App;

Add the functionalities on Signup.js to enable the form to send data to the server using the API endpoint.

import React, { useState } from 'react'

function Signup() {
  const [data, setData] = useState({
    username: '',
    email: '',
  })
  const [errors, setErrors] = useState([])
  const [message, setMessage] = useState('')
  const [success, setSuccess] = useState(false)

  function handleChange(e){
    let name = e.target.name 
    let value = e.target.value 
    setData({...data, [name]: value})
  }

  // POST user data
  function handleSubmit(e){
    e.preventDefault()
    fetch('http://localhost:3000/users',{
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify(data)
    }).then(res=>{
        if(res.ok){
            res.json().then(user=>{
                setMessage(user.message)
                setSuccess(true)
            })
        }else{
            res.json().then(err=>setErrors(err.errors))
        }
    })
  }
  return (
    <div style={{width: "300px", marginLeft: "auto", marginRight: "auto"}}>
        <h2>User Signup</h2>
        {success? <h3 style={{color: "green"}}>{message}</h3>:
        <div>
            {errors.map(err=><p key={err} style={{color: "red"}}>{err}</p>)}
        </div>}
        <form style={{display: "flex", flexDirection: "column"}} onSubmit={handleSubmit}>
            <label htmlFor='username'>Username:</label> 
            <input type={'text'} id= "username" name='username' onChange={handleChange} /><br/>
            <label htmlFor='email'>Email:</label> 
            <input type={'text'} id= "email" name='email' onChange={handleChange}/><br/>
            <button type='submit'>Submit</button>
        </form>
    </div>
  )
}

export default Signup

Set up sendgrid

First, you need to create an account with sendgrid. Fill in all the details required while setting the account. Wait for your account to be verified. NOTE: Any user can create the account even if you don't have a company or organization. Once your account has been verified and you can view your dashboard, on the left menu, click on email API and the Integration guide. Your dashboard will display two options for email set up. Use Web API and click choose to select it.
.
Next, select Ruby as your language

Enter the name of your API key and click create API to create the key. Follow the instructions on creating the environment variable that shall store the API key. Create the environment variable in the root of your rails application. echo "export SENDGRID_API_KEY='YOUR API KEY'" > sendgrid.env
Add the file to the git ignore so that it is not sent to your github account. This is done to avoid exposing your API key which on exposure, may lead to suspension of your Sendgrid account. echo "sendgrid.env" >> .gitignore
Set the source source ./sendgrid.env. We will later move this API key to a credentials.yml.enc to keep it safe for use.
Next, add the sendgrid gem, gem 'sendgrid-ruby' to the gem file and run bundler or bundle install to install the dependencies. Restart the rails server. Copy the code given under send your first email into a ruby file in your application. Replace the sample details given with your details and then try and run the file separately on the terminal using the command, ruby filename.rb. You will get an email sent to the "to" email. The next step is just moving the code to a class and reusing the class where necessary.

Add the API key into the credentials.yml.enc file

We have come a long way and we are almost there, hang in tight, don't let go. The credentials.yml.enc file (Located in the config directory) is encrypted and therefore cannot be edited directly. To edit the file, type the following command on the terminal EDITOR="code --wait" rails credentials:edit. Code basically represents the code editor you are using. I'm using VS code thus setting the editor to code. You can read more about editing this file on rails Custom Credentials or stackoverflow. When the file opens on your code edit in the edit mode, add the sendgrid API key as follows: sendgrid: YOUR API KEY. The API key should not be in quotes. Save and exit from the file to save changes.

Create the email_service.rb file

I'll have the email file created in a services folder in the apps folder. Create services folder and add in an email_service.rb file. Create a class matching the file name as it is a convention in ruby. in the class, create a class method called class and pass in the parameters; from, to, subject, and content. Then copy the code from sendgrid and edit it as follows. Your class should look like this.

require 'sendgrid-ruby'
include SendGrid
class EmailService 
    def self.call from:, to:, subject:, content:
        from = Email.new(email: from)
        to = Email.new(email: to)
        subject = subject
        content = Content.new(type: 'text/plain', value: content)
        mail = SendGrid::Mail.new(from, subject, to, content)

        sg = SendGrid::API.new(api_key: Rails.application.credentials.sendgrid)
        response = sg.client.mail._('send').post(request_body: mail.to_json)
        puts response.status_code
        puts response.body
        puts response.headers
        puts Rails.application.credentials.sendgrid
    end
end

Note the following changes from the code

This code has been changed to get the API key set in the credentials.yml.enc file sg = SendGrid::API.new(api_key: Rails.application.credentials.sendgrid)
The code on mail = SendGrid::Mail.new(from, subject, to, content) may slightly look different from the one provided on sendgrid account. The code from sendgrid looks like this mail = Mail.new(from, subject, to, content). I made the changes since the code from sendgrid, when I moved it to the class, it was showing an error about missing parameters. Changing the code to look as the one above solved the problem. Edit the user_controller to send mail on user signup The last step, edit the user controller by adding the email service. We are using the EmailService class to send the email. We call the call class method of EmailService on the class and pass in the arguments. Edit the code in the create method to look as follows.


def create 
        @user = User.create!(user_params)
        @from = "useyouremail@gmail.com"
        @subject = "New User Account"
        @content = "Thank you for registering with us #{@user.username}. Your account has been created successfully"
        EmailService.call(from: @from, to: @user.email, subject: @subject, content: @content)
        render json: {body: @user, message: "User created successfully"}, status: :created
    end

Your UserController class should look like the one below

class UsersController < ApplicationController
    rescue_from ActiveRecord::RecordInvalid, with: :invalid_entry
    # Get all users
    def index 
        users= User.all 
        render json: users
    end

    # Create a user 
    def create 
        @user = User.create!(user_params)
        @from = "useyouremail@gmail.com"
        @subject = "New User Account"
        @content = "Thank you for registering with us #{@user.username}. Your account has been created successfully"
        EmailService.call(from: @from, to: @user.email, subject: @subject, content: @content)
        render json: {body: @user, message: "User created successfully"}, status: :created
    end

    # Private methods
    private 

    def user_params
        params.permit(:username, :email)
    end

    # Invalid entity response 
    def invalid_entry(invalid)
        render json: {errors: invalid.record.errors.full_messages}, status: :unprocessable_entity 
    end
end

Try and register a user with a valid email and check the rails server if the status printed on the terminal is 200s, which means an email has been sent successfully.

User Signup

Signup email sent

Github repo link
That's it, bye and Happy Coding!

Find max and min values of an array using sort with compare functions

Nelson Chibukasia — Wed, 29 Jun 2022 09:30:26 +0000

Arrays in JavaScript do not have inbuilt methods to find the maximum and minimum numbers. However, there are some other ways to achieve that. The easiest way is to use the Math methods, that is Math.max.apply(null, numberArray) for maximum and Math.min.apply(null, numberArray). However, in this post, we shall use another technique to achieve the same results; the sort method. We shall use the sort method to arrange the values in either ascending or descending order and use the index to get the minimum and maximum number.
Using the sort method
First, we shall arrange the numbers in the array using the sort method. The array sort method arranges elements in array in an ascending order. However, the sort method does not always work well with an array of numbers in JavaScript. It is only perfect with an arrays of strings. To use the sort method with array of numbers, we introduce the compare function. The compare function uses the format function (a, b){return a-b}. Combining with the sort method, we have something similar to this, numberArray.sort(function (a, b){return a-b}). This format return an array in ascending order.

//create an array of numbers
const numbers = [2, 67,86, 34, 67, 45]

//sort the arrays using the compare function
let sortedNumbers = numbers.sort(function(a, b){
    return a-b;
})

console.log(sortedNumbers) //[ 2, 34, 45, 67, 67, 86 ]

But how does this work? This might be a little bit confusing but pretty easy to understand. The sort function takes two numbers and sends them to the compare function. The compare function performs the evaluation on the two numbers and returns the result. The returned result can only appear in three forms, that is positive, negative, or zero. If the returned result is a negative number, the first value in the compare function, a for this case, is sorted before the second value,b Sort function then uses the returned value to sort the numbers. The vice-versa happens if the returned value is positive, b is sorted before a. For the return value zero, no changes are made to the sorting order of the two values.
Now, since we have a new array sorted in descending order, lets now get the min and maximum values. This is pretty easy to achieve since we only use the index value of the first element as the minimum and index of the last element as the maximum

//create an array of numbers
const numbers = [2, 67,86, 34, 67, 45]

//sort the arrays using the compare function
let sortedNumbers = numbers.sort(function(a, b){
    return a-b;
})

console.log(sortedNumbers) //[ 2, 34, 45, 67, 67, 86 ]

//get the minimum value
const minimumValue = sortedNumbers[0];
console.log(minimumValue) //2

//get the maximum value
const maximumValue = sortedNumbers[sortedNumbers.length-1];
console.log(maximumValue) //86

We can as well sort the array in a descending order and get the minimum and maximum value by interchanging the index values. To sort in a descending order, the compare function will have the return value as the result of subtracting the first value from the second value.

// //create an array of numbers
const numbers = [2, 67,86, 34, 67, 45]

//sort the arrays in descending order using the compare function
let sortedNumbersDesc = numbers.sort(function(a, b){
    return b-a;
})

console.log(sortedNumbersDesc) //[ 2, 34, 45, 67, 67, 86 ]

//get the minimum value
const minimumValue = sortedNumbersDesc[sortedNumbersDesc.length-1];
console.log(minimumValue) //2

//get the maximum value
const maximumValue = sortedNumbersDesc[0];
console.log(maximumValue) //86

Use Math.max.apply() and Math.min.appy()
Let's try and use the Math.max.apply() and Math.min.apply() to achieve the same.

// //create an array of numbers
const numbers = [2, 67,86, 34, 67, 45];
//get the minimum value
console.log(Math.min.apply(null, numbers)) // 2
//get the maximum value
console.log(Math.max.apply(null, numbers)) // 86

That's it for this post. Hope you enjoyed reading and happy coding!

for...of Loop in JavaSript

Nelson Chibukasia — Mon, 27 Jun 2022 19:17:50 +0000

You may have probably encountered different types of loops in JavaScript while learning to code or writing lines of codes to perform an action based on an iteration. There are two major type of loops in JavaScript that are used in iteration, the for loop and the while loop. You might be thinking of do...while loop as a separate loop but for now I'll classify it under the while loop. There are a variety of for loops based on the data type we are looping through or iterating over. These varieties are, the ordinary for loop, for...of to iterate over an array or a collection of html nodes, and for...in to iterate over objects. In this post, We shall focus on the for...of looping technique to iterate over arrays in JavaScripst.

for...of
At this point you may have interacted with different data types in JavaScript such as strings, float, objects, arrays...etc. In this part, we shall only focus on arrays. Well, you might be familiar with arrays at this moment. Arrays are a collection of items packed together. These items can be numbers, strings, nested arrays, boolean, or even the objects. We shall use the for...of to iterate through an array of strings and numbers. The for...of loop is not in any way complicated, in fact, it is pretty straight forward. The for...of uses the format of for (let item of items){code to execute}. Let's put this into practice by looping through an array of numbers and strings.

//create a variable using const to store the array of numbers
const numbers = [24, 67, 84, 38, 39, 92,37];

//loop through the numbers to check it is an even or odd number

for (let number of numbers) {
//code to execute
//checks if number is even or odd
    if (number%2===0){
        console.log(`${number} is even`)
    }else {
        console.log(`${number} is odd`)
    }
}
/*
24 is even
67 is odd
84 is even
38 is even
39 is odd
92 is even
37 is odd
*/

For...of loop can as well be used to loop through an array containing items of any data type. Let's use the for...of loop to loop through an array of strings. We shall capitalize each word in the array.

//create a variable using const to store the array of countries
const countries = ["Kenya", "Sudan", "Nigeria", "Tanzania", "Brazil", "Germany", "India"];

//loop through the countries and convert each country name to uppercase

for (let country of countries) {
    console.log(country.toUpperCase())
}
/*
KENYA
SUDAN
NIGERIA
TANZANIA
BRAZIL
GERMANY
INDIA
*/

Up to this you have learned how to loops through an array using the for...of loop. The **for...of **loop can be used to loop through a collections of html nodes. That's it for this post. Hope you enjoyed reading and happy coding