DEV Community: Ting Chung

E-commerce payments using Firebase, NodeJS, and Square API

Ting Chung — Fri, 12 Feb 2021 15:42:45 +0000

While building my client's art portfolio project, I was tasked with processing payments using Firebase. Processing payments is not generally considered a front-end process unless you might be using Paypal. In my case, I was using Square API. Square depends on a backend to process payments. In my case, I concluded that I need to create a Firebase Cloud Function.

The process happens like this: the front end passes the data to the cloud function which acts like a backend. After the backend receives the data, the Square SDK to processes the payment and the order data is stored into my database after the payment is complete. To understand this whole process about creating payments, see the Square API payments docs.
In this post, I will go over how to use the Google Firebase Cloud Functions written in NodeJS to process a payment.
The first step is to setup Firebase Functions. Here is a quick setup video:

In my example, I will be using Typescript as they recommended in the video. Typescript in many ways is like Javascript; however, I noticed it can be very picky about how to properly code, so I would For beginners (like me), I had to learn a little bit about how Typescript uses tslint to ensure correct usage. Here is a video walkthrough for Typescript:

After setting up the Firebase functions, it's time to get into how to setup NodeJS. Start by importing and initializing firebase:

import * as functions from 'firebase-functions';
import * as admin from 'firebase-admin'
admin.initializeApp()

This will do the import for the functions that will later be used. When creating Firebase Cloud Functions using NodeJS, it is important to understand the slight differences in just using a NodeJS app. When creating the function, that function can be directly called or called via HTTP requests. The Firebase docs have several examples below.

HTTP requests via Firebase

Instead of creating a listen to a port and starting nodemon, you have to export the function. Also, you can perform an emulate and inspect your function to perform continuous development updates as I discussed in a previous post here

So in this post, we are going to create an express app that becomes an exported cloud function. More on that in a little while.

const cors = require('cors')
const express = require('express');
const bodyParser = require('body-parser');
const { Client, Environment, ApiError } = require('square');
import { v4 as uuidv4 } from 'uuid'
const app = express();

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

I have installed cors to ensure that cross-origin is enabled. I create the express app, so all of this should be familiar with regard to creating an express application. I also initialize the square SDK and use the Client, Environment, and ApiError for processing errors. I also install body-parser to process HTTP POST requests. More info about body parser can be found here. On a side note, I also create an instance of uuidv4 to be used later to create an order ID.

Also, if you don't already have a square account, you should create one here: Square developer

This will give you a sandbox square API access token to use in your application.

In this post, most of the NodeJS code used is from the payment form walkthrough below.

Square payment walkthrough

I will not be going through the front-end portion of this tutorial. I will post a front end tutorial in a future post.

So the next step is to create the square SDK client as shown below.

const client = new Client({
  environment: Environment.Sandbox,
  accessToken: 'your-square-access-token',
});

So before getting into the details of how to process the POST payment request in NodeJS, let's delve in a little bit about the contents of the POST request that is sent to the backend. I used a React front end to create a POST fetch to the back end. Here is the code for the POST fetch:

fetch('https://project.cloudfunctions.net/payments/', {

    method: 'POST',
    headers: {

        'Square-Version': "2020-12-16",
        'Content-Type': 'application/json',
        'Authorization': 'Bearer ' + process.env.REACT_APP_SQUAREPAY_SANDBOX_ACCESS_TOKEN,

    },
    body: JSON.stringify({

        idempotency_key: idempotency_key,
        location_id: LOCATION_ID,
        nonce: nonce,
        amount: cart.reduce((acc, item) => {
          return acc + parseInt(item.price)
      }, 0) * 100,
        uid: localStorage.getItem('JWT'), //uid of the cart
        emailAddress: emailRef.current.value,
        orderLocaleDate: (new Date()).toLocaleDateString('en', { year: 'numeric', month: 'long', day: 'numeric' }) + " " + (new Date()).toLocaleTimeString('en-US') + " " + (new Date()).toString().match(/([A-Z]+[\+-][0-9]+.*)/)[1],
        billing: {
          firstName: billingFirstNameRef.current.value,
          lastName: billingLastNameRef.current.value,
          address1: billingAddress1Ref.current.value,
          address2: billingAddress2Ref.current.value,
          city: billingCityRef.current.value,
          state: billingStateRef.current.value,
          zip: billingZipRef.current.value,
          phone: billingPhoneRef.current.value
        },
        shipping: {
          firstName: shippingFirstNameRef.current.value,
          lastName: shippingLastNameRef.current.value,
          address1: shippingAddress1Ref.current.value,
          address2: shippingAddress2Ref.current.value,
          city: shippingCityRef.current.value,
          state: shippingStateRef.current.value,
          zip: shippingZipRef.current.value,
          phone: shippingPhoneRef.current.value
        },
        buyerVerificationToken: buyerVerificationToken
    })   
    })
    .catch(err => {
    alert('Network error: ' + err);
    })
    .then(response => {
        console.log(response)

    if (!response.ok) {
        return response.json().then(
        errorInfo => Promise.reject(errorInfo));
    }
    return response.json();
    })
    .then(data => {
    console.log(data);
    alert('Payment complete successfully!');
    })
    .catch(err => {
    console.log(err);
    alert('Payment failed to complete!');
    });

So the most important points of this code to keep in mind are to obtain the 'nonce' or the single access token that is generated from the Square Form. This needs to be passed into the body. Also, the idempotency key to required to ensure that no duplicate charges are made. Here is Square's explanation idempotency.

Also required fields are the location ID that is created with the square developer sandbox account. And the last required field is the amount to be charged. In my application, I ensured that the billing and shipping information is also passed in to create the order details. Another field that might be required is the buyer verification token. Here is an explanation about the workings of that: buyer verification token

After the fetch is sent, now we want to discuss how to set up the post payment in NodeJS. We will walk through this step by step.

app.post('/', async (req: any, res: any) => {
  const requestParams = req.body;
  const orderId = uuidv4()
  let lineItems :any = [];

  const paymentsApi = client.paymentsApi;
  const requestBody = {
    sourceId: requestParams.nonce,
    amountMoney: {
      amount: requestParams.amount,
      currency: 'USD',
    },
    order_id: orderId,
    locationId: requestParams.location_id,
    idempotencyKey: requestParams.idempotency_key,
    buyer_email_address: requestParams.emailAddress,
    billing_address: {
      first_name: requestParams.billing.firstName,
      last_name: requestParams.billing.lastName,
      address_1: requestParams.billing.address1,
      address_2: requestParams.billing.address2,
      locality: requestParams.billing.city,
      postal_code: requestParams.billing.zip,
    },
    shipping_address: {
      first_name: requestParams.shipping.firstName,
      last_name: requestParams.shipping.lastName,
      address_1: requestParams.shipping.address1,
      address_2: requestParams.shipping.address2,
      locality: requestParams.shipping.city,
      postal_code: requestParams.shipping.zip,
    },
    statement_description_identifier: orderId,
    verification_token: requestParams.buyerVerificationToken,
  };

  try {
    const response = await paymentsApi.createPayment(requestBody);
    res.status(200).json({
      'title': 'Payment Successful',
      'result': response.result,
    });

    jwt.verify(requestParams.uid, functions.config().jwt.secret, async (err :any , data :any) => {
      if(err){
        res.sendStatus(403)
      } 
      else if(data.uid){
        req.uid = data.uid



        const cartsRef = admin.database().ref('carts/' + data.uid)
        cartsRef.once('value').then(async snap => {
          const cartData = snap.val()

          let updatedAt;
          for (const [key, item] of Object.entries(cartData)) {

            const itemValue:any = item



            if (key === 'updatedAt') {
              updatedAt = itemValue
            } else {

              lineItems.push({
                quantity: "1", 
                name: itemValue.item.title,
                image: itemValue.item.imageUrl,
                description: itemValue.item.description,
                price: itemValue.item.price,
                basePriceMoney: {
                  amount: itemValue.item.price,
                  currency: 'USD',
                },
              })
            }

          }

          client.ordersApi.createOrder({
            order: {
              locationId: requestParams.location_id,
              referenceId: response.result.payment.orderId,
              lineItems: lineItems,
              idempotencyKey: requestParams.idempotency_key,
            },
          })

          const orderRef = admin.database().ref('orders/' + orderId)

          await orderRef.set({
            squareOrderId: response.result.payment.orderId,
            orderId: orderId,
            lineItems: lineItems,
            squareUpdatedAt: response.result.payment.updatedAt,
            updatedAt: updatedAt,
            billing: requestParams.billing,
            orderLocaleDate: requestParams.orderLocaleDate,
            totalPrice: requestParams.amount,
            shipping: requestParams.shipping,
            emailAddress: requestParams.emailAddress,
            squarePaymentId: response.result.payment.id,
            receiptNumber: response.result.payment.receiptNumber,
            receiptUrl: response.result.payment.receiptUrl,
          })

        }).catch(errorData => {
          res.json({error: errorData})
        })
     }
    })


  } catch(error) {
    let errorResult = null;
    if (error instanceof ApiError) {
      errorResult = error.errors;
    } else {
      errorResult = error;
    }
    res.status(500).json({
      'title': 'Payment Failure',
      'result': errorResult,
    });
  }
});

Let's go through a few lines to setup. We want to store the request body in a variable. We also want to create a unique order number. Also, for our order, we need to retrieve the line items from the cart and process them. And lastly, we want to create an instance of the square payments API using the Square SDK.

  const requestParams = req.body;
  const orderId = uuidv4()
  let lineItems :any = [];

  const paymentsApi = client.paymentsApi;

After we have all of this initial code, we want to create the body for the payment because we are using the cloud function to create another post to Square:

  const requestBody = {
    sourceId: requestParams.nonce,
    amountMoney: {
      amount: requestParams.amount,
      currency: 'USD',
    },
    order_id: orderId,
    locationId: requestParams.location_id,
    idempotencyKey: requestParams.idempotency_key,
    buyer_email_address: requestParams.emailAddress,
    billing_address: {
      first_name: requestParams.billing.firstName,
      last_name: requestParams.billing.lastName,
      address_1: requestParams.billing.address1,
      address_2: requestParams.billing.address2,
      locality: requestParams.billing.city,
      postal_code: requestParams.billing.zip,
    },
    shipping_address: {
      first_name: requestParams.shipping.firstName,
      last_name: requestParams.shipping.lastName,
      address_1: requestParams.shipping.address1,
      address_2: requestParams.shipping.address2,
      locality: requestParams.shipping.city,
      postal_code: requestParams.shipping.zip,
    },
    statement_description_identifier: orderId,
    verification_token: requestParams.buyerVerificationToken,
  };

All of these key value pairs are sent to the payments API. When Square processes the payment, it will keep hold of this as part of the record. In my case, I want to also send information to my database to keep record of the order that was processed. We will cover that later. So now I create a try block to process the payment.

  try {
    const response = await paymentsApi.createPayment(requestBody);
    res.status(200).json({
      'title': 'Payment Successful',
      'result': response.result,
    });

And for the last step, I retrieve the contents of the shopping cart to create an order in my database:

    jwt.verify(requestParams.uid, 'jwt_secret', async (err :any , data :any) => {
      if(err){
        res.sendStatus(403)
      } 
      else if(data.uid){
        req.uid = data.uid

        const cartsRef = admin.database().ref('carts/' + data.uid)
        cartsRef.once('value').then(async snap => {
          const cartData = snap.val()

          let updatedAt;
          for (const [key, item] of Object.entries(cartData)) {

            const itemValue:any = item

            if (key === 'updatedAt') {
              updatedAt = itemValue
            } else {

              lineItems.push({
                quantity: "1", 
                name: itemValue.item.title,
                image: itemValue.item.imageUrl,
                description: itemValue.item.description,
                price: itemValue.item.price,
                basePriceMoney: {
                  amount: itemValue.item.price,
                  currency: 'USD',
                },
              })
            }

          }

          const orderRef = admin.database().ref('orders/' + orderId)

          await orderRef.set({
            squareOrderId: response.result.payment.orderId,
            orderId: orderId,
            lineItems: lineItems,
            squareUpdatedAt: response.result.payment.updatedAt,
            updatedAt: updatedAt,
            billing: requestParams.billing,
            orderLocaleDate: requestParams.orderLocaleDate,
            totalPrice: requestParams.amount,
            shipping: requestParams.shipping,
            emailAddress: requestParams.emailAddress,
            squarePaymentId: response.result.payment.id,
            receiptNumber: response.result.payment.receiptNumber,
            receiptUrl: response.result.payment.receiptUrl,
          })

        }).catch(errorData => {
          res.json({error: errorData})
        })
     }
    })


  }

After this, I do the catch block if the order was not successful:

catch(error) {
    let errorResult = null;
    if (error instanceof ApiError) {
      errorResult = error.errors;
    } else {
      errorResult = error;
    }
    res.status(500).json({
      'title': 'Payment Failure',
      'result': errorResult,
    });
  }

In a future post, I will try to tackle how to send the order confirmation. I hope this was informative. Happy coding!

Uploading files to Google Cloud Storage

Ting Chung — Wed, 03 Feb 2021 18:22:45 +0000

While building an art portfolio web application, I was tasked with uploading images to Google Firebase Cloud Storage. This was essential to the web application. After all, what is art without pictures? Firebase Cloud Storage helps a user easily upload their pictures.
For my structure, I used Firebase's Realtime database to store the location of the main image. When my user selected an image, it would render several pictures with react-responsive-carousel. In future posts, I will go over how to setup the responsive carousel along with lazy image loading. For this post, I will focus on only the action of uploading the Google Firebase Cloud Storage. The following is the way my Realtime database is structured.

I have a key value pair for images. This images key contains a URL and alt for my main image. With that said, when I render an art image, it reads from this location the Google Firebase URL for this particular image. Also, in order to put the file in its respective folder, it is required to have an "Art route" which is used as a folder name that matches the route(or slug) name.
In order to perform the upload from the client, I used react-bootstrap to put together the form. Here is the code for the form:

<Form onSubmit={handleSubmit}>
                        <Form.Label>Title</Form.Label>
                        <Form.Control onChange={handleTitleChange} value={title} type="text"></Form.Control>
                        <Form.Label>Art route (no spaces)</Form.Label>
                        <Form.Control onChange={handleArtRoute} value={artRoute} type="text"></Form.Control>
                        <Form.Label>Description</Form.Label>
                        <Form.Control onChange={handleDescriptionChange} value={description} type="text"></Form.Control>
                        <Form.Label>Price</Form.Label>
                        <Form.Control onChange={handlePriceChange} value={price} type="text"></Form.Control>
                        <Form.Label>Paypal Price</Form.Label>
                        <Form.Control onChange={handlePaypalPrice} value={paypalPrice} type="text"></Form.Control>
                        <Form.Label>Art ID</Form.Label>
                        <Form.Control ref={artIdRef} type="text" defaultValue={maxId + 1}></Form.Control>
                        <FormFileInput onChange={handleFileChange} multiple></FormFileInput>
                        <br></br>
                        <Button type="submit">Add art</Button>
                    </Form>

After the user fills in the required fields, I used the FormFileInput component from react-bootstrap to handle uploading the file. When the file is added from a directory, I call on handleFileChange. This is where I call of the function to perform the upload task.

import firebase from "firebase/app"; 
import imageCompression from 'browser-image-compression';
// these imports were added
    const handleFileChange = async (event) => {
        event.preventDefault()
        const imageFile = event.target.files[0] //store the file in a variable.

        const fileRef = firebase.storage().ref('images/' + artRoute).child(imageFile.name) //create a storage reference

        const options = {
            maxSizeMB: 1,
            maxWidthOrHeight: 1920,
            useWebWorker: true
          }

        const compressedFile = await imageCompression(imageFile, options); //perform file compression

        let uploadTask = fileRef.put(compressedFile)

        uploadTask.on('state_changed', (snapshot) => {
            setUploadPercentage(parseFloat(((snapshot.bytesTransferred / snapshot.totalBytes) * 100).toFixed(2)))

        }, (error) => {
            console.log(error)
        },
        () => {
            setUploadStatus('success')

        })
}

I will break down the code line by line. To create the upload, a storage reference needs to be created.

const imageFile = event.target.files[0]
const fileRef = firebase.storage().ref('images/' + artRoute).child(imageFile.name)

When the event of selecting the file is triggered, then stored in imageFile, I create a storage reference containing the folder (artRoute) and create a child that is the name from imageFile. After I have the image file, I want to first compress the image so that it can be read easily in the browser as shown below:

const options = {
            maxSizeMB: 1,
            maxWidthOrHeight: 1920,
            useWebWorker: true
          }

        const compressedFile = await imageCompression(imageFile, options);

For browser optimization, I compress the file because sometimes I might have a 6MB file that would take a while for the browser to download. I used browser-image-compression to perform the compression. Since the compression is handle asynchronously, I need to use "await" and when the compression is completed, I want to store the compressed file in "compressedFile". Now that I have the compressed file, I want to create an upload task that will perform the upload.

    const [uploadStatus, setUploadStatus] = useState('info')
    const [uploadPercentage, setUploadPercentage] = useState(0)
//create a state for upload status and percentage
        let uploadTask = fileRef.put(compressedFile)
        uploadTask.on('state_changed', (snapshot) => {
            setUploadPercentage(parseFloat(((snapshot.bytesTransferred / snapshot.totalBytes) * 100).toFixed(2)))

        }, (error) => {
            console.log(error)
        },
        () => {
            setUploadStatus('success')


        })

This code creates an upload task that uploads the file, tracks the upload progress, shows an error if there is one, and allows you to create a function that works like a promise after the upload is completed.

For my example, I used a progress bar that starts grey with no upload, then turns blue for the upload progress, then when complete shows green. The status is tracked with a progress bar created by react-bootstrap. Here is the code below for the progress bar:

<ProgressBar variant={uploadStatus} now={uploadPercentage} label={`${uploadPercentage}%`} />

In this react bootstrap component, variant allows you to choose a color indicator for the status. In this example, I used 'info'(blue) and 'success'(green). The "now" prop will show the visual progress. The label will simply show the percentage number as the progress is being made.

So going back to the code for the upload task, as the state is changed, Firebase Storage will communicate the upload percentage by continuously getting the snapshot. I make sure that the percentage only shows 2 decimal places.

uploadTask.on('state_changed', (snapshot) => {
            setUploadPercentage(parseFloat(((snapshot.bytesTransferred / snapshot.totalBytes) * 100).toFixed(2)))

        }, (error) => {
            console.log(error)
        },
        () => {
            setUploadStatus('success')

        })

If there is an error in the upload, I console log the error. If the file upload is complete, I set the upload status to 'success' to show the user it has been completed.

After the upload is completed, I need to get the url that was created and store it in the database:

    const [artImageUrl, setArtImageUrl] = useState('')
    const [artImageAlt, setArtImageAlt] = useState('')
//Created this state above to track the image url and alt text.
const url = await fileRef.getDownloadURL()
setArtImageAlt(imageFile.name)
setArtImageUrl(url)

The url is now stored in my artImageUrl state which is then fed into my Realtime database for storage.
Thanks for reading and happy coding!

Using Firebase cloud functions in NodeJS with Redux shopping cart

Ting Chung — Tue, 26 Jan 2021 18:37:31 +0000

Recently, I have been designing an e-commerce web application using Google Firebase, React, and NodeJS. My thoughts about how to design a secure shopping experience came through much research. I had a Google Cloud Firebase app and I wanted the user to add and remove items to the shopping cart at the same time making secure fetch calls to save the shopping cart in a database. One way to ensure a secure shopping experience is to use an encrypted JSON web token (JWT) when performing each call. This is specifically what I did with my shopping cart.

So in order to store the shopping cart in my database, I used Google Cloud Functions written in NodeJS to perform these actions. Doing any JWT encryption usually takes a backend like NodeJS, but specifically when using a Google Firebase web application and Google Firebase's Realtime database, a cloud function will be necessary to encrypt, decrypt and handle database actions when all done together. In this post, I will cover how to create a JWT and use the Google Cloud Functions to store data in the database.

First, you will need to enable Google Cloud Functions in your Firebase project. They have some very detailed tutorials you can find here:

Firebase Cloud Functions tutorials

In the tutorials, they suggest starting with Typescript, which is what I did. And just a note if you use Typescript, you might need to spend some time understanding how TSlint works because the Typescript lint will throw an error if you don't have everything written within the proper rules. You may have to adjust according to your needs.

When first enabling cloud functions, your index.ts file contains the following code:

import * as functions from 'firebase-functions';
export const helloWorld = functions.https.onRequest((request, response) => {

   response.send("hello world!")

});

Breaking this code down, this is how a basic cloud function works. Instead of having your NodeJS app listen to a certain port, Firebase creates a cloud function to respond to your requests. In order to access the function, you need to make a request to a site formatted like this:

https://us-central1-yourprojectname.cloudfunctions.net/helloWorld

So this is a simple GET request, but what if I want a post, get, and a patch request like I do with my shopping cart? Google cloud functions allow you to export an expressJS app to that cloud function.

Here is an example from Google Firebase's documentation:

const express = require('express');
const cors = require('cors');

const app = express();

// Automatically allow cross-origin requests
app.use(cors({ origin: true }));

// Add middleware to authenticate requests
app.use(myMiddleware);

// build multiple CRUD interfaces:
app.get('/:id', (req, res) => res.send(Widgets.getById(req.params.id)));
app.post('/', (req, res) => res.send(Widgets.create()));
app.put('/:id', (req, res) => res.send(Widgets.update(req.params.id, req.body)));
app.delete('/:id', (req, res) => res.send(Widgets.delete(req.params.id)));
app.get('/', (req, res) => res.send(Widgets.list()));

// Expose Express API as a single Cloud Function:
exports.widgets = functions.https.onRequest(app);

So Google Cloud functions actually allow you to create an express application all with one cloud function. All the rest of the NodeJS code should be familiar for those who have previously used it.

The only part that is unique to Google Cloud functions is the export. Unfortunately, I wasn't able to start a node server while exporting the Google Cloud functions. For my case, in order to inspect and debug the interface, I had to use the Firebase emulator. Here is a tutorial for this in this link below.

Firebase emulators tutorial

I had to create a key with application credentials in order to start debugging. Here is a great resource about how to setup a debugger:

Debugging Firebase Cloud Functions

So for my next topic, I will cover how to get the Firebase database setup in order to start adding items to cart. You will first need to initialize the firebase admin SDK as shown below.

import * as admin from 'firebase-admin'
admin.initializeApp()

After the application is initialized, if order to make a database call, just create a reference just like you would on the client-side Firebase application. This is what I how I created the reference:

const cartsRef = admin.database().ref('carts/' + requestParams.uid);

After you create the ref, you can update, set, or remove child just like you would with the client-side Firebase application. For my case, I wanted to first post an item to cart.

On my front end, it was a simple fetch call. Here is what it looked like.:

export function postCart(userId, lineItem) {
    return (dispatch) => {

        return fetch(`https://myfirebaseapp.cloudfunctions.net/carts`, {

            credentials: "include",
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                uid: userId,
                lineItem: lineItem
            })
        })

        .then(resp => resp.json())
        .then(data => {

            localStorage.setItem('JWT', data.jwtToken)

        })
    }
}

On a side note, I used Redux thunk in order to complete my post fetch request. You can find more about Redux thunk here

What I intend to do here is to pass my user id and their lineitem into the body of my fetch. My cloud function will receive that as part of my request params. I created a cloud function called 'carts' below.

const jwt = require('jsonwebtoken');
const cart = express();
cart.post('/', (req: any, res: any) => {
  res.setHeader("Access-Control-Allow-Origin", "http://localhost:3002");
  res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE, OPTIONS');

  const requestParams = req.body;

  const cartsRef = admin.database().ref('carts/' + requestParams.uid);
}
cartsRef.child(requestParams.lineItem.title).set({
      item: requestParams.lineItem,
  }).then(resp => {
      const jwtToken = jwt.sign({ uid: requestParams.uid }, 'supersecretJWT');
      res.status(200).send({jwtToken})
  }).catch(err => {
      res.json({ error: err });
      res.status(500).send();
  });
exports.carts = functions.https.onRequest(cart)

This is what I have before I start operating on my request. I make sure to set my response headers, and now I have a reference to the user ID that came from my fetch request. I also set the line item in my cart as a child which contains the item name and quantity. From that, I need to create my JSON web token which I stored in jwtToken which encrypts the user ID and sends it back to the user, which in turn will store the encrypted user ID as a JWT in local storage. I will later use that encrypted user ID when I want to get the shopping cart information. Make sure that your JWT secret is indeed kept secret because that is the key to keep it encrypted.

So after the line item in my cart is posted, I want to get an item from the cart, so what I did was send the encrypted JWT user ID back as an authorization header, decode in expressJS, then send back the cart information to the user. This is how my fetch request looked like from React/Redux:

export function fetchCart(userId) {
    return (dispatch) => {

        const token = localStorage.getItem('JWT')
        return fetch(`https://yourproject.cloudfunctions.net/carts`, {


            credentials: "include",
            method: "GET",
            headers: {
                "Content-Type": "application/json",
                "Authorization": "Bearer " + token
            }
        })
        // fetch(`http://localhost:3002/arts.json`)
        .then(resp => resp.json())
        .then(data => {

            dispatch({type: 'GET_JWT_CART', payload: data.lineItems})

        })
    }
}

When I make the fetch GET request, I want to setup my express app to get the token, decrypt it, then send back the items in the cart.

cart.get('/', (req: any, res: any) => {

  res.setHeader("Access-Control-Allow-Origin", "http://localhost:3002");
  res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE, OPTIONS');
  const authHeader = req.headers.authorization;

  const token = authHeader.split(' ')[1]

  jwt.verify(token, 'supersecretJWT', (err :any , data :any) => {
    if(err){
      res.sendStatus(403)
    } 
    else if(data.uid){
      req.uid = data.uid
      const cartsRef = admin.database().ref('carts/' + data.uid)
      cartsRef.once('value').then(snap => {
        res.send(JSON.stringify({lineItems: snap.val()}))
      }).catch(errorData => {
        res.json({error: errorData})
      })
   }
  })
})

So this get request will return to the user the line items that are currently in the user's cart. In my get method, after decoding the JWT token, I created the reference to the cart based on the user ID, then called "once" to get the line items from the database. And that's how I implemented the shopping cart. Happy coding!

Querying Firebase Realtime database with React and Redux

Ting Chung — Thu, 21 Jan 2021 16:49:06 +0000

Recently, I was tasked with putting together an art portfolio web application. I decided during that time that I wanted to learn and get some exposure to backend as a service(BaaS). There are 2 major cloud backend services out there. There is AWS Amplify and Google Firebase. After some experimentation, I found that I wanted to use Google Firebase because it was geared more toward small and medium web applications. The authentication is easier to understand and it contains many of the same features as AWS Amplify. For instance, cloud storage is available for both and I've used both AWS S3 and Google Firebase storage. They operate similarly.

One feature I really like about Google Firebase is their Realtime database. The term "Realtime" is certainly appealing given the fact that I was using Ruby on Rails and couldn't get real time data without installing and figuring out GraphQL and Appollo. Google Firebase uses a NoSQL database for the Realtime database and at first, learning it was a little intimidating, but over time, I found it to be easier to use than Rails as an API. Rails as an API definitely has many good features when used with PostgreSQL in that they have ORM built-in so having a relational database has its pros.

For my art portfolio web application, I didn't necessarily need this unless it came to having my e-commerce feature (which I'm still building).

In this post, I will be focusing on what queries look like in Google Cloud Firebase's Realtime database. When using React, make sure you have your import setup like so:

import firebase from "firebase/app";

So to start a query, you must create a reference to the database that you desire. For my example, I am creating a reference to my arts section of my database. It looks like this:

let artsRef = firebase.database().ref('arts/')

My database looks like this:

For my first example, I want to get this data, push it up to Redux, and render. I create my function inside useEffect. Here is my function:

useEffect(() => {
        function getData() {


            let artsRef = firebase.database().ref('arts/')

            return artsRef.once('value', (snapshot) => {

                const data = snapshot.val()

                dispatch({type: 'GET_ARTS', payload: data})
            })

        }
        getData()

    },[dispatch])

Notice I call on the "once" function. This will only read the data once and get what's called a snapshot. After I get the snapshot. I call on snapshot.val() to get the associated data that I'm querying. After I have the data, I call on the artsReducer to load the data from my Redux store. Putting the data in Redux is simple. Here is what it looks like:

export function artsReducer(state = { arts: [], requesting: false, loaded: false}, action) {
    let art;
    let arts;
    switch(action.type) {

        case 'GET_ARTS':
            //debugger
            return {
                ...state,
                arts: action.payload,
                requesting: false,
                loaded: true
            }

        default:
            return state
    }
}

This will update my Redux store with all the art objects from my database. After getting the data, it is a simple React render call which I won't cover in this post. Here is what my data looks like in Redux:

So for my last example, I want to do something a little more involved. What if my user wants to see all my art that is $100? This can also be done with a simple query to the database.
In this example, I

    useEffect(() => {
        function getData() {
        let artsRef = firebase.database().ref('arts/').orderByChild('price').equalTo('100').limitToFirst(3)

            artsRef.once('value', snap => {

                const data= snap.val()

                dispatch({type: 'GET_ARTS', payload: data})

            })
        getData()
    }, [artRoute, dispatch])

Notice in this example, in order to get the proper price, I call on "orderByChild" and this will order by the child reference in my database called "price". I call on "equalTo" to get the art that is priced at $100 and I limit my results to the first 3 results with "limitToFirst".

All of the database queries can be found here:
Working with lists of data

Using the Firebase Realtime database is very powerful. It gets the data immediately and is easy to work with. In future posts, I will cover how to get data stored in cloud storage. Until then, happy coding!

Using Google cloud firebase for React

Ting Chung — Wed, 13 Jan 2021 17:10:43 +0000

I recently started an art portfolio project with Google cloud firebase and found the interface to be very developer friendly! Here is a link to their website firebase homepage

Starting a project was very easy! I logged in with my Google account, started a project and was able to host my React project within minutes. Google firebase has many great tools available as a BaaS (backend as a service). I started my project out needing a database and file storage. The real-time database has some great features. It is a NoSQL database which stores all the entries in JSON format. For more information regarding the Real-time database, go here.

Here is a picture of a sample of the database:

One of the features I love about starting a new database is that you can manually enter new entries in the firebase console. This way, when I build my React app and want to retrieve database entries, I can do it quickly. They also allow you to easily delete entries as an administrator. Also starting the configuration for your firebase app was pretty straightforward. In the firebase console, you can find the configuration by going into your settings. After you find it and put it in your React app, it should look like the following:

For this blog, I am going to focus on the real-time database. First, you need to setup the firebase database rules. The rules live in a JSON file called "database.rules.json". As an alternative, you can use the database rules in your project console and publish; however, the issue is when you start deploying your project, the "database.rules.json" file overrides what you published in your firebase console, so be careful of that. Also, what is nice about the firebase console is that you can use the Rules Playground feature to test your rules. I used that to validate that the proper reads and writes would be achieved with your rules. For more information about the rules playground, go here:

Rules Playground

For my project, I wanted all users to see the artwork; however, I wanted to restrict writes to the admin user. This can be achieved with a rule like the one below:

{
  "rules": {
    "some_path": {
      "${subpath}": {
        //
        ".write": "root.child('users').child(auth.uid).child('role').val() == 'admin'",
        ".read": true
      }
    }
  }
}

So breaking down the rule for write, it looks in your "users" table for the authenticated user id and checks the role of that authenticated user to see if they are called 'admin'. It's pretty simple, but you need to setup a users table in the real-time database with your related user id.
Again, make sure to test your rules to make sure they are working properly. Every setup will be different.
The last topic I wanted to cover is to perform a read to the database using React. For this, I used React/Redux to dispatch the data to my Redux store so I can use the art pieces throughout my application. For this, I used the React useEffect function to perform a once read. Here is what the code looked like:

useEffect(() => {
        function getData() {


            let artsRef = firebase.database().ref('arts/')

            return artsRef.once('value', (snapshot) => {

                const data = snapshot.val()

                dispatch({type: 'GET_ARTS', payload: data})
            })

        }
        getData()
    },[dispatch])

As you can see, the first thing I did was create a reference to the database resource I am about to access. I called it 'arts/' After creating the reference, I use the 'once' method to get a snapshot of the data and I call snapshot.val() to get the data that was a result. After the data is captured, I perform a dispatch to Redux to put my data in my artsReducer. My artsReducer function looks like this:

export function artsReducer(state = { arts: [], requesting: false, loaded: false}, action) {
    let art;
    let arts;
    switch(action.type) {

        case 'START_REQUESTING_ARTS':

            return {
                ...state,
                arts: [],
                requesting: true,
                loaded: false
            }

        case 'GET_ARTS':

            return {
                ...state,
                arts: action.payload,
                requesting: false,
                loaded: true
            }

        default:
            return state
    }
}

After getting the data, you can perform a map render to your React components and you should be good to go!
In my next blog, I will go over how to perform specific queries to the real-time database.
Happy coding!

Using AWS S3 bucket on React for newbies

Ting Chung — Wed, 06 Jan 2021 00:49:34 +0000

I just learned how to use the AWS S3 bucket on React and it's a lot easier than I thought to set up! I just wanted to spend a few minutes to share what I learned.
First, you must set up an AWS account. Afterwards, go to the AWS console here: AWS console
Second, make sure to create yourself an IAM user in order to access the account. After setting up the user, you need to create an access key and save the secret access key somewhere secret so you can use again. IMPORTANT NOTE! 1. Don't give out your secret access key! Keep it secret! 2. Make sure to save it because you will only see it one time. Here are some detailed instructions that I found helpful below:
secret access key instructions
After you have retrieved your access key ID and your secret access key, make sure to save it in a safe place. As a newbie, the only way I know how to keep my secrets safe is to store them in the environment variables. I created a file called .env.local (please make sure that it's called out in your .gitignore file). The prefix of your variable should be something like:
REACT_APP_AWS_ACCESS_ID_KEY=12345
REACT_APP_AWS_SECRET_KEY=123456
When loading your environment variables, you need to make sure to call on for example: process.env.REACT_APP_AWS_ACCESS_ID_KEY.
At some point you need to setup your S3 bucket where you want to keep your files, in your AWS console, search "S3" and it should take you to your S3 bucket. After that, create the bucket with the settings you choose. For my application, I made sure that I setup a CORS policy. If you have a domain name setup, this is where you would put the CORS policy to allow certain sites to work. Here is a link that helped me set that up:
CORS for S3
My CORS policy looked something like this:

{
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "https://example.com"
        ],
        "ExposeHeaders": []
    }

Also, you may need to set a specific policy for creating access points for the S3 bucket that was created. Here is a link for more information:
Creating access points for S3
Every developer should determine how they want to setup their access points or how they should
If you follow all of these steps, you should be ready to start setting up your React app
After that, in your React app directory, run:

npm i react-s3

Here is the link to the documentation: react-s3

In your React application, you should create a config object like the one shown below

const config = {
    bucketName: 'yourbucketname',
    dirName: 'yourdirectoryname', //optional
    region: 'us-east-1',
    accessKeyId: 'your access key id',
    secretAccessKey: 'your super secret access key'
}

After this is defined somewhere and possibly imported if you need, here is the code that I used for uploading:

import { Form } from "react-bootstrap"
import FormFileInput from "react-bootstrap/esm/FormFileInput"
import S3FileUpload from 'react-s3'
import imageCompression from 'browser-image-compression'

const config = {
    //your configuration as shown above
}

export const UploadFile = (props) => {


    const handleUpload = (event) => {

        const imageFile = event.target.files[0];
        console.log('originalFile instanceof Blob', imageFile instanceof Blob); // true
        console.log(`originalFile size ${imageFile.size / 1024 / 1024} MB`);

        const options = {
            maxSizeMB: 1,
            maxWidthOrHeight: 300,
            useWebWorker: true
        }
        try {
            const compressedFile = await imageCompression(imageFile, options);
            console.log('compressedFile instanceof Blob', compressedFile instanceof Blob); // true
            console.log(`compressedFile size ${compressedFile.size / 1024 / 1024} MB`); // smaller than maxSizeMB

            S3FileUpload.uploadFile(compressedFile, config)
                .then(data => console.log(data))
                .catch(err => console.error(err)) // write your own logic
        } catch (error) {
            console.log(error);
        }


    }

    return (
        <Form >
            <FormFileInput onChange={handleUpload}></FormFileInput>
        </Form>
    )
}

I used react-bootstrap to put together the form; however, you won't need to do so for your testing purposes. Also, I thought it might be necessary to compress the images that way the web page loads faster.
So just to summarize the actual part where we do the upload is:

S3FileUpload.uploadFile(compressedFile, config)
                .then(data => console.log(data))
                .catch(err => console.error(err)) // write your own logic

I am planning to use the data.location(the image url) to insert into my database. After that, you should be good to go!
Happy coding!

Making fetch requests to Redux thunk

Ting Chung — Fri, 11 Dec 2020 17:19:51 +0000

React is such a powerful Javascript library! In my time using it, the advantages of using it over plain vanilla Javascript are amazing. Being able to actively render, store and manipulate state, and pass down props is so critical in making an interactive experience on the front-end. With that said, there are so many tools that enhance the web development experience but if you want to design a website that gives you centralized state for a large web application, you need Redux. Dan Abramov goes into detail in this youtube video below.

I love being able to time-travel in your state with the Redux web development toolkit. It really helps the developer fully understand where anything broke down, what are the actions passed, what was the payload. But with an application that uses Redux, we really need to use the middleware thunk to specifically help with AJAX fetch requests. Typically, when we are performing our fetch requests, our result needs to be fed into our Redux store. Let's dive into some code, shall we?

export function fetchLogin(data) {
    fetch('http://localhost:3000/api/v1/login', {

            credentials: "include",
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                user: {
                    email_address: data.email,
                    password: data.password

                }
            })
        })
       return {
            type: 'GET_CURRENT_USER', payload: {
                user: {
                    userId,
                    bio,
                    name
                }
            }

        }
}

In this code above, I am performing a fetch to login a user via email and password. What I want afterwards is the user info. Now the problem with doing this is that fetch has Promises. If your promise is returned later than when you call "return", you will have no returned data. The function has no way to dispatch to Redux the desired action to update the Redux store. Let's This is where Redux-Thunk steps in. Here is what the top level index.js would look like. This is very basic. We are only calling on "applyMiddleware" on thunk. Make sure to perform 'npm install redux-thunk'.

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));

ReactDOM.render(
  <Provider store={store} >
    <App />
  </Provider>, document.getElementById('root')
)

What we need is dispatch to be passed in so that we can use it. In my LoginContainer component, I need to pass in dispatch to props. Here is what the whole component looks like:

import React, { Component } from 'react'
import { Form, Row, Col, Button } from 'react-bootstrap'
import { connect } from 'react-redux'
import { fetchLogin } from '../actions/fetchLogin'


class LoginContainer extends Component {
    constructor (props) {
        super(props)
        this.state = {
            email: "",
            password: ""
        }

        this.handleChange = this.handleChange.bind(this)
        this.handleSubmit = this.handleSubmit.bind(this)
    }

    handleChange = (event) => {
        this.setState(previousState => {
            return {
                ...previousState,
                [event.target.name]: event.target.value
            }
        })

    }

    handleSubmit = (event) => {
        event.preventDefault()

        this.props.fetchLogin({
            email: this.state.email,
            password: this.state.password
        },this.props.history)

    }

    render () {
        return (
            <React.Fragment>
                <Form onSubmit={this.handleSubmit} >
                    <Form.Group as={Row} controlId="formHorizontalEmail">
                        <Form.Label column sm={2}>
                        Email
                        </Form.Label>
                        <Col sm={10}>
                        <Form.Control as="input" name="email" type="email" placeholder="Email" onChange={this.handleChange} />
                        </Col>
                    </Form.Group>

                    <Form.Group as={Row} controlId="formHorizontalPassword">
                        <Form.Label column sm={2}>
                        Password
                        </Form.Label>
                        <Col sm={10}>
                        <Form.Control as="input" name="password" type="password" placeholder="Password" onChange={this.handleChange} />
                        </Col>
                    </Form.Group>
                        <Form.Group as={Row}>
                            <Col sm={{ span: 10, offset: 2 }}>
                            <Button type="submit">Sign in</Button>
                            </Col>
                    </Form.Group>
                </Form>
            </React.Fragment>
        )
    }
}

function mapDispatchToProps(dispatch){
    return { fetchLogin: (data, history) => dispatch(fetchLogin(data, history)) }
  }

  function mapStateToProps(state){
    return {
        loggedIn: !!state.currentUser,
        router: state.router,
        entries: state.entries.entries,
        currentUser: state.currentUser
    }
  }

export default connect(mapStateToProps, mapDispatchToProps)(LoginContainer)

The main takeaway is my mapDispatchToProps function that feeds in dispatch to fetchLogin. Then fetchLogin will invoke dispatch to perform Redux actions.

Here is what our fetchLogin looks like now that we've implemented Redux-Thunk:

export function fetchLogin(data, history) {
    return (dispatch) => {
        dispatch({type: 'LOGIN_REQUEST_STARTED'})

        return fetch('http://localhost:3000/api/v1/login', {

            credentials: "include",
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                user: {
                    email_address: data.email,
                    password: data.password

                }
            })
        })
        .then(resp => resp.json())
        .then(userData => {

            dispatch({type: 'SET_CURRENT_USER', userData})
            history.push("/entries")

        })
    }
}

What we're doing here is part of the Redux-Thunk middleware magic. We are able to return a function that passes in 'dispatch' because we need to use it later to make updates to our Redux store. After getting the userData, we can invoke 'dispatch' to set the current user. After that, I redirect the user to my '/entries' route. A full justification to use Redux-Thunk can be found here:

reduxjs / redux-thunk

Thunk middleware for Redux

Redux Thunk

Thunk middleware for Redux. It allows writing functions with logic inside that can interact with a Redux store's dispatch and getState methods.

For complete usage instructions and useful patterns, see the Redux docs Writing Logic with Thunks page.

Installation and Setup

Redux Toolkit

If you're using our official Redux Toolkit package as recommended, there's nothing to install - RTK's configureStore API already adds the thunk middleware by default:

import { configureStore } from '@reduxjs/toolkit'

import todosReducer from './features/todos/todosSlice'
import filtersReducer from './features/filters/filtersSlice'

const store = configureStore({
  reducer: {
    todos: todosReducer,
    filters: filtersReducer,
  },
})

// The thunk middleware was automatically added

Manual Setup

If you're using the basic Redux createStore API and need to set this up manually, first add the redux-thunk package:

npm install redux-thunk

yarn add redux-thunk

The thunk middleware is a named export.

More Details:…

View on GitHub

Happy coding!

Dealing with time zones in rails

Ting Chung — Tue, 17 Nov 2020 21:42:16 +0000

I really had a lot of fun doing this rails portfolio project. My idea for my rails project was for a prayer gathering. A prayer gathering should have many attendees and should also have prayers to take to the prayer gathering. I also have a host that acts like an administrator and only a host can perform CRUD actions on the gathering. Any user can also create a prayer for the prayer gathering. Here are my relationships tables below

Prayer gathering associations

I had 2 areas that were challenging. One was to properly add an address to my gathering form. In this form, I had to create an address object with model. And looking back on it, this was a simple solution for a complex problem. So this is the code that I started with in regard to the address:

    def gathering_params
        params.require(:gathering).permit(:name, :meeting_date, :phone_number, :host_id, :url, :timezone, :address => [:address_1, :address_2, :city, :state, :zipcode])
    end

And this was my form below:

<%= form_for @gathering do |f| %>
<%= f.label :name %><br>
<%= f.text_field :name %><br><br>
<%= f.label :meeting_date %><br>
<%= f.datetime_select :meeting_date, default: Time.now.localtime, ampm: true %><br><br>
<%= f.label :timezone %><br>
<%= f.time_zone_select :timezone, ActiveSupport::TimeZone.us_zones %><br><br>
<%= f.label :phone_number %><br>
<%= f.text_field :phone_number %><br><br>
<%= f.hidden_field :host_id, :value => @host.id %>
<%= f.label :url, "URL" %><br>
<%= f.text_field :url %><br><br>
<%= f.fields_for :address, @address do |a| %>

    <%= a.label :address_1 %><br>
    <%= a.text_field :address_1 %><br><br>
    <%= a.label :address_2 %><br>
    <%= a.text_field :address_2 %><br><br>
    <%= a.label :city %><br>
    <%= a.text_field :city %><br><br>
    <%= a.label :state %><br>
    <%= a.select :state, options_for_select(us_states) %><br><br>
    <%= a.label :zipcode %><br>
    <%= a.text_field :zipcode %><br><br>

<% end %>

    <%= f.submit :class => "button" %><br><br>
<% end %>

I originally thought that as long as I can accept everything in the hash called address, rails should generate an object called address; however, I quickly realized that rails did not permit the address field. After googling and playing around with the address object several rounds, I realized that I needed address_attributes instead of just address. Also, because my gathering object only had one address, the build method is different. It should be the following:

self.build_address(attributes)

After doing this and changing my strong params to the one shown below, I was finally able to move on.

    def gathering_params
        params.require(:gathering).permit(:name, :meeting_date, :phone_number, :host_id, :url, :timezone, :address_attributes => [:address_1, :address_2, :city, :state, :zipcode])
    end

So for my second major issue, it had to do with time validations. I had a datetime object created for the gathering meeting time. At first, my form looked like this:

<%= f.label :meeting_date %><br>
<%= f.datetime_select :meeting_date, default: Time.now.localtime, ampm: true %>

When I hit the create button, I realized that the datetime created was for UTC time and not the local time. After pulling my hair out, I realized that there was no way around this issue. I had 2 choices. One was to create a meeting time in UTC (which nobody understands other than software engineers), or I had to set a time zone. I realized that resolving this issue would be for my edification, so I decided to painfully add a column to my gatherings table called “timezone” and redo my form to look like this:

<%= f.label :meeting_date %><br>
<%= f.datetime_select :meeting_date, default: Time.now.localtime, ampm: true %><br><br>
<%= f.label :timezone %><br>
<%= f.time_zone_select :timezone, ActiveSupport::TimeZone.us_zones %><br><br>

Having a time_zone_select would help the user properly identify their timezone and allow me to adjust the timezone offset. My set_in_timezone method looked like this:

    def set_in_timezone(time, zone)
        Time.use_zone(zone) { time.to_datetime.change(offset: Time.zone.now.strftime("%z")) }
    end

Me gatherings controller looked like this:

    def create

        @host = current_user
        @gathering = @host.gatherings.build(gathering_params)
                @gathering.set_in_timezone(@gathering.meeting_date, @gathering.timezone)
                @gathering.save
    end

There was no problem doing this until I ran into my update action in my controller. Here was the code.

    def update
        @host = current_user
        @gathering = Gathering.find(params[:id])
        #@gathering.meeting_date = set_in_timezone(@gathering.meeting_date, gathering_params[:timezone])

        if @gathering.update(gathering_params) && @gathering.address.save
            redirect_to gathering_path(@gathering)
        else
            flash[:error] = @gathering.errors.full_messages.to_sentence + @gathering.address.errors.full_messages.to_sentence
            render :edit
        end
        #binding.pry
        #@gathering.address.update(gathering_update_address_params)
    end

The problem here is that updating and validating happen in the @gathering.update method altogether! I found out that I can use the before_validation method. So in order to do this properly, I needed to reset the proper time before the validation. My code looked like the following:

    before_validation do
        self.meeting_date = set_in_timezone(self.meeting_date, self.timezone)
    end

After finally making that change, I was good to go. Also during validation, I checked to see that the meeting_date created was not in the past.This validation looked like the following:

    validate    :future_event

    def future_event
        if meeting_date != nil

            errors.add(:meeting_date, "cannot be in the past.") if self.meeting_date.in_time_zone < Time.zone.now
        end

    end

After all these were implemented, I could finally move on. Happy coding!

Iteration and enumeration returns

Ting Chung — Tue, 17 Nov 2020 21:35:08 +0000

In Ruby, we have iterators each and map that have different uses based on the desired output. The method each when used on an array will iterate each element and implicitly return the array unaltered. However, if we want an array of transformed elements, we use map or collect. In this blog, we will show different applications of each and map. Let’s have a scenario where a grocery store manager has decided he wants to implement a new state-of-the-art program that tells a customer during checkout the status of each grocery item. The store manager says he needs the program to output a statement to show if the item is ripe or not based on a new AI. We create a class called Customer where the customer scans the grocery items and is in control of what is and is not in the shopping cart. Let’s take a look:

class Customer
    def initialize
        @all_checkout_items = []
    end

    def all_checkout_items
        @all_checkout_items
    end

    def scan_grocery_item(item)

        @all_checkout_items << item

    end
end

We also have a different class called Checkout which examines each item on the checkout screen. In Checkout, we have a method called grocery_checkout and the store manager wants to both show the items checked out as a return but also output a message if the store has suddenly been notified that an item has an issue. For this example, we are going to say that the store has been notified that they have rotten bananas.

class Checkout

   def grocery_checkout(customer)
        customer.all_checkout_items.each do |item|
            if item == "banana"
                puts "We have been notified that bananas are rotten. Please remove this from your cart."
            end
        end
    end

end

Now we create a new instance of Customer and Checkout. We scan in a few items in the cart and we run our grocery_checkout method.

customer = Customer.new
customer.scan_grocery_item("apple")
customer.scan_grocery_item("banana")
customer.scan_grocery_item("orange")
customer.scan_grocery_item("watermelon")
checkout = Checkout.new
checkout.grocery_checkout(customer)

After we run grocery_checkout, we get the following return and output:

We have been notified that bananas are rotten. Please remove this from your cart.

=> [“apple”, “banana”, “orange”, “watermelon”]

For grocery_checkout, we used the each method to both process each array element and output the notification to the customer. We also returned the customer’s checkout cart. With this message, the customer would naturally take action to remove the banana. So now, what if the store manager says we want to substitute plantains every time we see a banana. This is where we use the map method. Here is what the revised method would look like:

def grocery_checkout(customer)
    customer.all_checkout_items.map do |item|
        if item == "banana"
            puts "We have been notified that bananas are rotten. We have replaced the item with plantains."
            item = "plantains"
        else
            item
        end
    end
end

Notice that the map method alters the return array. Now let’s see the return and output:

We have been notified that bananas are rotten. We have replaced the item with plantains.

=> [“apple”, “plantains”, “orange”, “watermelon”]

This shows the power of using map. Now let’s say that the store manager only wants the banana to be removed from the cart. We can use the select method. Our code will look like this:

def grocery_checkout(customer)
  puts "Bananas have been removed from the cart due to being rotten."
    customer.all_checkout_items.select do |item|
      item != "banana"

    end

end

Here will be our return and output:

Bananas have been removed from the cart due to being rotten.

=> [“apple”, “orange”, “watermelon”]

Finally, here is what we would do if the store manager said he simply wants a program to return the banana if it is in the shopping cart. We can call this method banana_finder.

def banana_finder(customer)
    customer.all_checkout_items.find do |item|
        item == "banana"
    end
end

Running checkout.banana_finder(customer) will result in the following:

=> “banana”

So what if the customer has multiple grocery items that are banana? In this case, the find method only returns the first match. All these methods have different uses depending on the needs of the application.

Implicit vs explicit returns

Ting Chung — Tue, 17 Nov 2020 21:31:19 +0000

My understanding of the Ruby culture is we want simple, elegant, and concise code. With this culture, some programmers that are new to Ruby (like me) will get confused with a topic that is at the heart of the Ruby culture. This topic is the difference between implicit and explicit returns. In Ruby, every method provides a return value. Ruby will return the last evaluated statement. Let’s take this example of this method called square:

def square(number)  
    if number < 1
       answer = "number needs to be greater than 1"
    else
       answer = "that number works!"
    end
    x = number * number
end

Let’s take a look at the output of square(3):

=> 9

In this instance, we’ve implicitly returned the result of variable x. Notice that the method did not return any of the string answers because Ruby will return only the last evaluated statement. What if a different programmer wanted to make some changes to the method:

def square(number)  
    if number < 1
        puts "number needs to be greater than 1"
    else
        puts "that number works!"
    end
    x = number * number
    puts "number squared is #{x}"
end

Let’s see what happens with the output if we run square(3):

that number works!

number squared is 9

=> nil

Notice that now we see the text because we used puts as the method, but what if the original programmer’s intent was to return x and use that return value to process other data? This method would suddenly be broken because the return value of puts is nil. Let’s go back in time and say the original programmer decided to explicitly return x.

def square(number)  
    if number < 1
        answer =  "number needs to be greater than 1"
    else
        answer = "that number works!"
    end
    return x = number * number
end

Suddenly, the new programmer will understand that the code needs to be refactored to something like this:

def square(number)  
    if number < 1
        puts "number needs to be greater than 1"
    else
        puts "that number works!"
    end
    x = number * number
    puts "number squared is #{x}"
    return x
end

Let’s take a look at the output of running square(3):

that number works!

number squared is 9

=> 9

Viola! This programmer understood to return the correct value of x; however, this somewhat breaks Ruby convention in some ways because we’re not simple, elegant, and concise anymore. On one hand, the original programmer was simply following the Ruby convention of returning the last evaluated statement. This is by no means illegal. On the other hand, the new programmer did not understand the original intent. In the end, it is both important to be unambiguous AND be simple, elegant, and concise. Here is the problem. If we have thousands of lines of code looking like this:

def compare (a, b)
    if a < b
        return -1
    elsif a > b
        return 1
    else
        return 0
    end
end

Suddenly the programmer appears to be verbose now that we understand the difference. We shouldn’t be coding in this manner because it does not follow Ruby’s intent. Ultimately, every situation is different and each Rubyist needs to understand when to use implicit vs explicit returns.

Using Quill editor with Javascript and Rails API backend

Ting Chung — Tue, 17 Nov 2020 19:06:34 +0000

Recently, I have been putting together code for my Javascript/Rails portfolio project. During my coding, I realized I wanted to have a rich text editor for my user’s experience. Rails has ActionText built-in, but after some reading, I realized that there was no good way to implement this if I was to use Rails as an API backend.
This is where the Quill rich text editor comes in. I don’t know if I’m the only one that came across issues in implementing this, but I would like to share my journey if in case someone else ran into this issue as well. So after following the quick start documentation provided by Quill, I had to build a form, so my code looked like this:

After building the form, I had to store the contents into the database. There wasn’t as much documentation on the website that showed how this was to be done. I started off by finding some articles like this one that explains that you should store it by taking the quill instance and saving it to the database as shown below

Quill’s contents are stored in a format called Delta. This means that when storing then retrieving this from the database, you need to then convert the stringified Delta back into an object.
At least for me, the problem with this method was the part where I used JSON.stringify to store the contents into my PostgreSQL database. Once I retrieved it from the database, I needed to use JSON.parse to convert this back to an object like below:

quill.setContents(JSON.parse(“{“ops”:[{“insert”:”example text\n”}]}”))

The problem was that JSON.parse would not convert it back to an object. If you read the Delta documentation it tells you that you can stringify and then parse the data. That did not happen for me. This became very troublesome. For my project, I not only wanted to submit and retrieve the contents from the database, I also needed to edit the form. After some digging, I realized I could simply store this line of code stringified into the database:

Topic.quill.root.innerHTML

I would store this into my topic.content JSON object like so:

By doing this, I was finally able to store the raw HTML into the database and retrieve it! Also, I found out for the edit form, all I needed to do was pre-populate the editor form after retrieving it from the database

document.getElementsByClassName(‘ql-editor’)[0].innerHTML = topic.content

This solved a lot of headaches for me and I hope this was helpful. Happy coding!