DEV Community: Blujay0

📧 Send Emails using React Forms

Blujay0 — Fri, 28 Jul 2023 10:45:22 +0000

NOTE: emailjs-com is deprecated. Use the current SDK which can be found here or install using npm install @emailjs/browser!

Introduction

In this article, I will cover how to send emails from React Forms created in an example web application, using a free JavaScript library known as EmailJS.

Create Your React Form

Begin by creating a 'Contact Us' component and inside, we will have our form. For the purpose of this article, I have created a simple form with basic styling:

Integrate EmailJS into the application

First, in the terminal of the code editor, cd to the /client directory of the app, and install EmailJS with the following command: npm i emailjs-com.

Next, we import emailjs into our <ContactUs /> component like so:
import emailjs from 'emailjs-com'

Before we go further, let's create the free EmailJS account!

Create a Free EmailJS Account + Email Service

Go ahead to the EmailJS website and signup for a free account. They allow up to 200 emails per month for free.
Once you successfully signup and login, you will be brought to this page:

Click on the Add New Service button near the top and choose the email provider of your choice:

On the following window, press Connect Account:

A window will pop-up that will ask you which Gmail account you wish to choose to continue with EmailJS. Then, you need to allow EmailJS a certain amount of access to your Google Account (this is standard procedure).

When that's done, you will be able to finally press the Create Service button and you should see a new service added on your Email Services page:

Create an Email Template

Now we need to create a template that our email will follow. The navigation bar on the left has an option for Email Templates, press it and you should be taken to the Email Templates page:

Notice the Create New Template button near the top. Press it and you will be taken to a form page where you can fill out the necessary information to create your template:

Now, notice the {{to_name}}, {{from_name}}, {{message}}, and {{reply_to}} on the forms. To know what we need to place in these double curly braces, we need to look at our code for the form:

      <form style={{marginLeft: "100px"}} onSubmit={sendEmail}>
        <h1 style={{fontSize: "50px"}}>Contact Us</h1>
        <div>
          <label style={{fontSize: "25px"}}>Name: </label>
          <input type='text' name='user_name' style={{fontSize: "25px"}}/>        
        </div>
        <br />
        <div>
          <label style={{fontSize: "25px"}}>Email: </label>
          <input type='email' name='user_email' style={{fontSize: "25px"}}/>
        </div>
        <br />
        <div>
          <label style={{fontSize: "25px"}}>Message: </label>
          <br />
          <textarea name='user_message' rows='6' cols="50" style={{fontSize: "25px"}}/>
        </div>
        <input type='submit' value='Send' style={{backgroundColor: "#87CEEB", color: "black", padding: "8px 32px", margin: "4px 2px", fontSize: "20px"}}/>
      </form>

For each <input/> element in the form, note the name attributes and their values. The values of the name attributes are what we are going to pass into double curly braces on our email template form. For example, the value of the name attribute of the <textarea/> element is user_message so that is what we will pass inside the curly brace of {{message}} in our email template form.

Going by that logic, we can replace {{from_name}} plus the From Name box with {{user_name}}, {{message}} with {{user_message}}, and you can fill in the From Email box with {{user_email}}. The {{to_name}} can be left blank for our purposes and it will just render as blank space in the email once it is sent:

NOTE: remember to put your email address in the To Email text field so you can receive the email(s) in the format set by your template. Obviously, you can change the email address later, based on who you want the automated messages to be sent to!

Create a submit handler function for the form

Now that that is all setup, we need to create our submit handler for our form. We will need three things from EmailJS: the Service ID, Template ID, and your Public or Private Key that can be found in your Account page in your navigation bar.

In the ContactUs component, create the following submit handler:

const sendEmail = (e) => {
  e.preventDefault();

  emailjs.sendForm(
    "YOUR_SERVICE_ID", 
    "YOUR_TEMPLATE_ID", 
    e.target, 
    "PUBLIC_KEY"
    ).then(res => {
      console.log(res);
    }).catch( err=> console.log(err));
  }

And make sure to pass it to the <form> element as a value to the onSubmit attribute! You can see what I mean by looking at the

code from before.

Test It Out!

Time to check if it works!
Let's fill out the form with some dummy info and hit Send:

... and success! You should have received an email with the contents in the format set by the template that you defined:

Conclusion & Further Considerations

Email sending functionality is commonplace in web development. Most websites that you construct will be required to send automatic emails.

Now, we've only covered frontend email integration, but email integrations become very powerful when used on the server-side.

Just think of the multitude of use-cases for automated emails:

update a customer on the shipping status of their order
cart abandonment emails
notifications about wishlisted products being on sale
birthday emails
event invitation emails
welcome emails
reward/loyalty point emails

...the list goes on and on...

And that's that! I hope you found this article useful and happy coding!

Resources

WatchList - the git repo where you can find the example used in this article
EmailJS
Smtpjs - a similar free library like EmailJS that you can use to send emails from JavaScript
React Documentation
Article on some email automation examples

Quick Look: Reading and Writing to CSV Files

Blujay0 — Fri, 30 Jun 2023 14:18:40 +0000

Introduction

CSV stands for Comma Seprated Values and is a popular format for storing tabular/table-like data in a file to use. This tabular data can consist of things like financial transactions, payroll, and other statistical records of information.

Here is an example of a CSV file randomly generated from Random Data Generator opened in VSCode:

"First Name", "Last Name", "Age", "Experience (Years)", "Salary"
"Roland", "Cooper", "22", "6", "7516"
"Edith", "Reed", "19", "1", "2147"
"Aida", "Montgomery", "24", "11", "7009"
"Dominik", "Moore", "18", "6", "9427"
"Chloe", "Lloyd", "25", "6", "4715"

The first row ALWAYS represents the column headers and the rest of the rows represent the actual data that goes into the table.

Here is a visual representation of the above CSV for you visual learners:

What We'll Be Using:

CSV file(s)
VSCode's CSV Module
Python

Reading the CSV File

To read our CSV file, we'll be using the reader() function provided by the CSV module. This function allows you to iterate over rows of the CSV as lists and returns an iterable reader object.

Example Code

# create a use_reader.py file in your base directory
# first you import reader from VSCode's CSV module
from csv import reader

# open() is used to open a CSV file for reading
with open("random.csv") as csvfile:

    # set csv_reader variable to the evaluated result of invoking reader(csvfile)
    csv_reader = reader(csvfile)

    print(csv_reader)

    for row in csv_reader:
        print(row)

Terminal & Results

With the code above setup, open your terminal and run python3 use_reader.py. You should get something similar to the following result:

<_csv.reader object at 0x7f3121352120>

['First Name', 'Last Name', 'Age', 'Experience (Years)', 'Salary']
['Roland', 'Cooper', '22', '6', '7516']
['Edith', 'Reed', '19', '1', '2147']
['Aida', 'Montgomery', '24', '11', '7009']
['Dominik', 'Moore', '18', '6', '9427']
['Chloe', 'Lloyd', '25', '6', '4715']

The first return is a representation of the iterable reader object that is returned from running the reader() function.
The second return is each element of the object that we iterated over with the for...in loop.

Writing to CSV Files

To write to CSV files, we'll be using the writer() function provided by the CSV module. This function allows you to create a writer object and create a new CSV file if needed. This can be seen as a counterpart to the reader() function. The method that is frequently used is writerow() which allows you to input a row to the CSV. The writerow() method takes in a list of values that you want to input for each row.

Example Code

# create a use_writer.py file in your base directory
# first you import writer from VSCode's CSV module
from csv import writer

# "open() is used to open a CSV file for reading"
# the "w" is declaring that this will be writing to the CSV file
with open("create_new.csv", "w") as csvfile:
    # set csv_writer variable to the evaluated result of invoking writer(csvfile)
    csv_writer = writer(csvfile)

    # pass into writerow() a list of data points you wish to write to the CSV file
    csv_writer.writerow(["First Name", "Last Name", "Age", "Experience (Years)", "Salary"])
    csv_writer.writerow(["Steven", "Spielberg", "64", "42", "60000000"])
    csv_writer.writerow(["George", "Lucas", "58", "35", "50000000"])
    csv_writer.writerow(["Christopher", "Nolan", "52", "27", "20000000"])

Terminal & Results

With the code above setup, open your terminal and run python3 use_writer.py. You should see a new CSV file called create_new in your directory and if you examine the file, you will see the data that you created using writerow.

And that file will translate to the following table:

Summary

The reader() and writer() methods allow for easy modifications of the data in a text editor for large datasets.
It is a frequently-used format of data inputting and outputting because it is so widely adopted
Useful to know if you are working with large datasets and pickling

And that was a quick look at reading and writing to CSV files. Happy Coding!

Resources

Quick Look: Web Scraping

Blujay0 — Fri, 09 Jun 2023 18:44:11 +0000

Introduction

The concept of web Scraping is to write code that programmatically takes data from a web page. This data is often in the form of HTML and the scraper code can be written to extract the data out of that HTML. This article will cover what web scraping is, the ethics of using a scraper, and the tools needed to scrape.

There are three main steps to web scraping:

Get the HTML
Extract Data from HTML
Save & Use Scraped Data

Use Case and Ethics

Why would one need to use a web scraper? It is often the case that websites do not provide the information in their database in a easy-to-understand format to the public willy nilly. This may make it difficult to get just the data that you want which is where web scraping comes in.

Say you were looking at a list of apartments on a site like Zillow and want to chart the change in rent price over a 5 years to get a sense of when the best time to rent an apartment is. Now, Zillow does not have a public API for easy access to the properties on their databse. An alternative is to use web scraping where you write code that will extract the data you want from the HTML of a web page. This is much more effecient than manually grabbing and pasting the data yourself.

The obvious question here is: "Is web scraping ethical?"
The answer depends. Technically, there is no law that states that you cannot use web scraping and the HTML on web pages are publicly available to anyone who has access to the page.

If used for simple data, for your personal use, then there is no real problem. However, if you use it to create a clone of a website, make profit off of it, and the original website catches on, this could spell legal trouble!

The convention is to be polite and respect what the website owners want if they have a position on their data's privacy.

Tools: Beautiful Soup

To actually scrape data from a site, you can use web scraping tools which are programmed to parse through a site and grab data.

First, you manually make a reqeust to get the HTML data that you can parse through. This is done with a get() request to a site which returns data, and you use that data with a web scraping software of your choice.

Installation

Second, you need web scraping software that will help parse through the HTML that is returned from the request. Beautiful Soup, for example, is a package you can install in your local environment that allows the extraction of data from the HTML returned from your request using Python.

To install Beautiful Soup, run this in your command line:

python3 -m pip install bs4

Utilization

Third, assuming you have an HTML document that gets returned from the request, you can now use Beautiful Soup to extract whatever information you want. To use it with your returned HTML, you must import it first in your HTML doc:

from bs4 import BeautifulSoup

Lastly, we turn the returned HTML into an object instance of Beautiful Soup. To do this, you create a variable and assign it the evaluated result. Here is a way to do that:

souped = BeautifulSoup(html, "html.parser")

This way, you have access to the BeautifulSoup methods such as fetch_all(), find_parent(), find_previous_sibling(), replace_with(), etc. that you can invoke on the Beautiful Soup instance.

Takeaways

Web Scraping is a way of grabbing information in a structured form efficiently. However, questions have been raised about the ethical nature of its usage. The convention is to be polite and aware of the site owner's preferences.

Resources

Quick Look: What is Redux?

Blujay0 — Fri, 19 May 2023 13:09:05 +0000

Introduction

This article will be a basic conceptual overivew of what Redux is, what it is used for, and how it works.

Quick useState Hook Refresher

Before we continue, let's review the useState() hook real quick. It helps us manage data that can change (for example, when a button is clicked) and changes to that data leads to the UI being udpated. State management hooks allow us to tell React that some data changed so that it can udpate the UI for us and keep track of that change in a state variable.
Remember, state is an object that is built into React that keeps track of data about the component that it exists in. Whenever state changes, the component re-renders.

What is Redux?

Redux is a JavaScript library that is a state management system for cross-component or app-wide state. What does this mean? It let's us manage state that affects multiple components or even the entire app.
State can exist for just a single component, but it can also exist for mutiple components. It can even exist for the entire application! State for multiple components require, prop drilling which is the concept of passing state down as props to different components that need it.
However, passing around data and updating functions from props can become tedious. Redux allows us to avoid prop chains and gives us a central place to control state.

Key Concepts

Redux is about having one central state storage in your application. This storage is for all the states you need in the entire application. Data in this central store is used by components and components set up subscrtiptions to the central store of information/state. This way, whenever the data in the central data store changes, it can "notify" the components so that the components can get the data that they need and use it. They don't get the entire data from the central store, they just get the "slice" of the central state that they need.
Components never change the central store of data. There is dat being passed down from the central state database to components through subscriptions, but no direct information flow back up from the components. Instead, reducer functions are used and are responsible for updating the central state database.
Components trigger data change in the central data storage. But, if there is no direct information flow back up to the central data store from components, then the only reasonable method with what we have learned so far, would be some sort of connection between the components and the reducer function. How does this conneciton occur? Through something called actions and components dispatch these actions. An action is a JavaScript object that defines the kind of operation that the reducer should perform. This is where Redux comes in and passes along or forwards the action to the reducer function. The reducer then reads the instructions and executes what the component is asking for.

Information Flow

Here is the information flow to review:
Central Data/State Store -(subscription)-> Components -(dispatch)-> Action -(forwarding)-> Reducer -(execution)-> Central Data/State Store --> REPEAT

Conclusion

As React applications grow in size, so will the number of components that are built in it. With all those components, it can become tedious to pass down state data as props to all the child compoennts. Redux allows components to take slices of the central state storage and these slices contain only the infomation that each component needs.

Resoruces

Quick Look: How to Use APIs

Blujay0 — Fri, 28 Apr 2023 06:34:18 +0000

Introduction

This article will cover APIs: what they are, what they do, and the simplest way make an API call using the National Park Service API.

What is an API?

An Application Programming Interface, or API for short, is a set of rules used by programs to communicate with each other. It is a vital part of communication between the frontend (client-side) and the backend (server-side).

What do APIs do?

An API facilitates the request-response cycle between the client and the server. A frequently used analogy for this cycle is to think of an API as a waiter in a restaurant that acts as a middleman between the customers and the kitchen. In programming terms, the customer is the client and the kitchen is the backend-server.
Here is a simple example of the cycle:

a client makes a request to the API
the API processes the request and makes a call to the server
the server receives the API call and repsonds with data
API processes the data and delivers it to the client

API Access

Not all APIs are open for public use and understandably so. The server-side database may belong to a bank holding sensitive and private information about their customers. It is probably not a good idea to give random people access to this information through an API.
However, there are plenty of APIs that are open for the public to use. Thankfully, lists exist of public APIs and a few links have been added at the bottom of this article in the "References" section.
Some of these public APIs require no authorization while others do. There are different types of authorizations such as an API key or OAuth. This article will focus on using an API key.

Generating an API Key

Before you use make a API call, you need to have one first! We'll using the National Park Service API for this example. Fill out this form on their site and your key will be emailed to you. It will be a mix of letters and numbers in this case. This key acts like your ID card and keeps track of the number of requests you make. Thankfully, NPS allows up to 1,000 requests per hour which is normally more than enough.

Creating a URL to Make the API Request

In order to make a API call/request, the API key needs to be saved in a variable in your JavaScript:

const API_KEY = "your_key_here_in_quotes";

The NPS Documentation will provide you with information on how to format the URL to make the API request. In our case, we just want data about parks so the format would look like this:

const getParks = `https://developer.nps.gov/api/v1/parks?api_key=${API_KEY}`;

NOTE: you can just use the URL as is, but it makes it easier to re-use and makes for cleaner code if we save it to a variable.

Making the API Call with Another API

Now, to actually make the request we need to use the Fetch API. The Fetch API is built into the browser and gives you access to the fetch() method which takes one required arugment. This argument is the path to the data that we are requesting which we have saved in our getParks variable!

fetch(getParks);

Conclusion

This retreives the data you are requesting, but how do we use that data? That is a topic for another article.