DEV Community: tuckersteil

Sending Emails in Rails with Action Mailer and Gmail

tuckersteil — Wed, 19 Apr 2023 20:26:07 +0000

This post will describe how to set up and send a confirmation email, when a customer books a training session.

The steps:

Set up a mailer with rails generate mailer
Create email templates (views)
Tell the appropriate controller action to send the email
Configure the mail settings for Gmail.

Let's assume we have an app that allows users to book a training session and that we already have a basic Order model and controller setup, which when booked creates and new instance of Order.

class OrdersController < ApplicationController
  def new
    @order = Order.new
  end

  def create
    @order = Order.new(order_params)

    if @order.save
      render json: @order
    else
      render json: { errors: @booking.errors.full_messages }, status: :unprocessable_entity
    end
  end

  private

  def order_params
    params.require(:order).permit(:name, :email, :address, :phone, :message)
  end
end

In addition to created the instance of Order, we want to be able to send the user an email confirmation for the order.

To get started, we first need to create a mailer:

$ rails generate mailer OrderMailer

This will create the following files and output:

create  app/mailers/order_mailer.rb
invoke  erb
create    app/views/order_mailer
invoke  test_unit
create    test/mailers/order_mailer_test.rb
create    test/mailers/previews/order_mailer_preview.rb

Then navigate to the "app/mailers" folder and select the application_mailer.rb:

class ApplicationMailer < ActionMailer::Base
  default from: 'from@example.com' # Replace this email address with your own
  layout 'mailer'
end

The "default from:" is where you add the email address you want to send the emails from. So can either be a business email or personal.

Now we need to go into the actual order_mailer.rb and add a method to the mailer to send emails:

class OrderMailer < ApplicationMailer
  def new_order_email
    @order = params[:order]

    mail(to: @order.email, subject: "You got a new order!")
  end
end

The key here is to set the "mail(to: @order.email". This will be the email(email we are sending to) that is sent from the order controller when a new instance is being created. Any instance variables in new_order_email can be used in the mailer views. The params[:order] will be provided when we tell the OrderController to send the email.

Let's create an email view file now, making sure to name the file the same as the method. Make a new_order_email.html.erb in the app/views/order_mailer/ folder:

# app/views/order_mailer/new_order_email.html.erb

<!DOCTYPE html>
<html>
  <head>
    <meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
  </head>
  <body>
    <p>You placed a new order!</p>
    <p>
    Order details<br>
    --------------------------
    </p>
    <p>Name: <%= @order.name %></p>
    <p>Email: <%= @order.email %></p>
    <p>Address: <%= @order.address %></p>
    <p>Phone: <%= @order.phone %></p>
    <p>
    Message:<br>
    ----------
    </p>
    <p><%= @order.message %></p>
  </body>
</html>

Now that we have the emails set up, next we'll tell the OrdersController to send an email when an order is made, that is, after an order is saved in the create action.

class OrdersController < ApplicationController
  def create
    @order = Order.new(order_params)

    if @order.save
OrderMailer.with(order: @order).new_order_email.deliver_later
      render json: @order
    else
      render json: { errors: @booking.errors.full_messages }, status: :unprocessable_entity
    end
  end

....
end

Here, we added the following line of code after the order was saved:

OrderMailer.with(order: @order).new_order_email.deliver_later

Notice the with(order: @order) code. This is what gives the OrderMailer access to the order info as a param. Remember setting the instance variable with @order = params[:order] in the OrderMailer? That's where the param is coming from!

Lastly, we need to configure our Rails app to send emails via Gmail. To do so, we'll add the following settings to our config/environments/production.rb:

# config/environments/production.rb

config.action_mailer.delivery_method = :smtp
host = 'example.com' #replace with your own url
config.action_mailer.default_url_options = { host: host }

# SMTP settings for gmail
config.action_mailer.smtp_settings = {
  :address              => "smtp.gmail.com",
  :port                 => 587,
  :user_name            => <gmail_username>,
  :password             => <gmail_password>,
  :authentication       => "plain",
  :enable_starttls_auto => true
}

For local use only or development use, use:

host = 'localhost:3000'
config.action_mailer.default_url_options = { :host => 'localhost:3000', protocol: 'http' }

Replace and with your own username and password, which would preferably be hidden away as environment variables. Note on the password: I highly recommend enabling 2-Step Verification and registering an "app password" to use in the app or you're likely to run into problems with Gmail blocking the emails.

If you are using 2-step verification, here's how you set it up:
If your Gmail account uses 2-step verification, you will need to get an app password and use that instead of your regular password. If you don't use 2-step verification, I recommend turning it on to avoid getting the emails blocked by Google.

To create an app password, go to your Google account settings and navigate to the "Security" tab. Under "Signing in to Google", click on the "App passwords" menu item (this will only be available if you have 2-step verification turned on). Next, select Other (Custom name) under the "Select app" dropdown and enter the name of your app or something else useful. Click "Generate" and your new app password will appear on the screen. Make sure you copy it before closing the window, or you won't be able to see the password again.

Now, in your Rails app mailer settings, replace the with the new app password instead.

Conclusion
We know have a fully functional mailer that notifies our customer of their order they placed. Once the Rails mailer and Gmail settings are properly configured, we can easily send other emails from other controller actions by generating and setting up new mailers in much the same way

Rails Generators

tuckersteil — Fri, 03 Feb 2023 23:11:46 +0000

Table of Contents

Introduction
Types of Generators
Model
Controller
Migration
Resource

Introduction
When using Rails a very common task one deals with regularly is creating models which will need to be connected to a database via Active record. Rails provides us with built in generator which helps write some of the code needed in this process. In addition to simplifying the process, rails generators are less time consuming, can help prevent errors and bugs, and allow us to develop via command line interface.

Types of Generators
Rails has a plethora of generators that are accessible and useful when developing. The most important/utilized generators are Model, Controller, Migration, and Resource.

Model
The rails Model generator is extremely prominent as it produces both a model and a migration file. The Migration file is used to set up the database table and the model file is used to handle the logic for the database. One major use of handling the logic for the database would be establishing a connection between two models. For example, if you had two models, one called "team" and the other called "players", in the team model you would write "has_many :players, and in the players model you would write "belongs_to :team. Then the only other thing you would need to do is add a foreign key to the the players model with the "team_id". Which creates the association between the player and the team.

To syntax to create a model generator is as follows:
rails g model Team name

this would create a migration for the teams table and a class for Team.
In the teams table, we would have one column with team name, which by default would be a string type. However, if we wanted to add another column with a different type, such as a integer instead of a string we would do as follows
rails g model Team name rank:integer
The next step would be to use the model generator again for players:
rails g model Player name position number:integer team_id:integer
Now are team two tables are connected since every player we create will have a team_id telling us which team they are on. Or we could see all the players on a specific team.

Controller
The controller generator is also quite useful, as it coordinates the interaction between the user and the model. It is used to query a model for data from its database, and then it displays the desired results for the user. Rails again simplifies the process for us by implementing a standardized naming pattern to determine how routing should be created. All that needs to be done is add "resources :teams" to the routes file. This then gives us access to these standardized routes.

To syntax to create a controller generator is as follows:
rails g controller Teams

this would create our TeamsController, where we could request certain information about all teams or a specific team and display that data.

Inside the Teams Controller we can then make use of the standardized routes, such as index, create, update, and destroy to get commonly needed/requested data:

The index method is a get request where we display a list of all objects for that controller, where its url path is "/teams".

def index team = Team.all render json: team end

This would display all the instances of team in the teams table.

The create method is a way of adding a new object (or team, in this case) to the server/database through a post request, where its url path is "/teams".
def create team = Team.create(name: params[:name], rank: params[:rank]) render json: team end

This would create a new team on the server with whatever information we passed it in the body of the post request, and return us that newly created team

The update method is a way of updating a specific object that is already on the server using its id, where its url path would be "/teams/:id".
def update team = Team.find_by(id: params[:id]) team.update(rank: params[:rank]) render json: team end

This would allow us to update the rank of a specific team in the database.

Finally we have the destroy method, where we can delete a team object from the database, where is url path would be "/teams/:id"
def destroy team = Team.find(params[:id]) team.destroy head :no_content end

This would allow us to delete a certain instance of teams using a specific team id.

Migration
We've already seen how migrations can be created using the model generator. But using the migration generator is a good way of adding, removing, or fixing existing tables. For example, if we wanted to add some more info for our players table we could do so like so:
rails g migration AddHometownToPlayers

Then inside this migration file we would just add: def change add_column :players, :hometown, :string end
This is telling us we are adding a column to players, that column being hometown, and its type is a string.
All thats left to be done is run rails db:migrate and it will update the table, which we can verify in our schema.rb file.

Resource
Lastly, we have our resource generator which encompasses all of the previous generators we've discussed thus far. It generates a model, controller, and migration for us all with one line of code. Which just shows how helpful rails generators can be.

rails g resource Team name rank:integer

We now have a teams table, team model, and a teams controller. Making the resource generator the most efficient of all.

Using Active Record

tuckersteil — Tue, 22 Nov 2022 18:08:05 +0000

Table of Contents

Introduction
Active Record ORM
Linking a model to a database
Using new methods from ActiveRecord::Base
Summary

Introduction
Active record is an extremely useful tool, which provides an interface and binding between the tables in a relational database and the ruby program code that manipulates database records. Active record is an object relational mapping technique( or ORM), which makes fetching and representing data easier by saving us the trouble of writing our own custom ORM's. I'll be going over how to build tables with Active Record, which in turn enables us to interact with a database to retrieve properties and relationships of the objects in an application without writing SQL statements.

Active Record ORM
Active record is a ruby gem, meaning that we can access an entire library of code by running "gem install activerecord" or simply including it in our Gemfile. After running "gem install activerecord",our gem environment knows what to put into the picture. Now all we need to do is tell active record where the database that it'll be working with is located. this can be accomplished by running "ActiveRecord::Base.establish_connection". Then once "establish_connection" is ran, active record will store the database as a class variable at "ActiveRecord::Base.connection". To actually run and establish the connection we need to add the code below to our active_record.rb file

ActiveRecord::Base.establish_connection( adapter: "sqlite3", database: "db/coaches.sqlite" )

Now that we have our database set up, we need to create a table since our database is currently empty. To do so we also need to add the following code into our active_record.rb file.

sql = <<-SQL CREATE TABLE IF NOT EXISTS coaches ( id INTEGER PRIMARY KEY, name TEXT ) SQL

ActiveRecord::Base.connection.execute(sql)

Linking a model to a database
Recap thus far: We have created a database and a table named coaches.

The next step in the process is to link a coach model to the coaches database, where the coach model will serve as a gateway into talking to the coaches table in the database.
This can be accomplished by making our class of coaches a subclass of ActiveRecord::Base. Like so:

class Coach < ActiveRecord::Base end

By doing so we will now have access to the plethora of active records built in ORM methods. By simply following one very important naming convention — class names are singular and table names are plural — we've done enough to establish a relationship between our Coach class and the coaches table.
Active Record "knows" that when we're using the Coach class, the SQL code it writes for us should target the coaches table.

Using new methods from ActiveRecord::Base
Now that we've created a database, table, and linked a class to the database table we can make use of active records built in ORM methods. Here is a look at some of the potential methods we can utilize.

Retrieve a list of all the columns in the table:

use .column_names
Coach.column_names #=> [:id, :name]

Create a new Coach entry in the database:

use .create
Coach.create(name: 'Tim') # INSERT INTO coaches (name) VALUES ('Tim') # => #<Coach:0x00007f985d0638b0 id: 1, name: "Tim">

Return all the records from the coaches table as instances of the Coach class:

use .all
Coach.all # SELECT "coaches".* FROM "coaches" # => [#<Coach:0x00007f985d0638b0 id: 1, name: "Tim">]

Retrieve a Coach from the database by id:

use .find
Coach.find(1) # SELECT "coaches".* FROM "coaches" WHERE "coaches"."id" = 1 LIMIT 1 # => #<Coach:0x00007f985d0638b0 id: 1, name: "Tim">

Find by any attribute, such as name:

use .find_by
Coach.find_by(name: 'Tim') # SELECT "coaches".* FROM "coaches" WHERE "coaches"."name" = 'Tim' LIMIT 1 # => #<Coach:0x00007f985d0638b0 id: 1, name: "Tim">

You can get or set attributes of an instance of Student once you've retrieved it:

use attr_accessors
coach = Coach.find_by(name: 'Tim')
coach.name #=> 'Tim'
coach.name = 'Bob'
coach.name #=> 'Bob'

And then save those changes to the database:

use #save
coach = Coach.find_by(name: 'Tim') coach.name = 'Bob' student.save # UPDATE "coaches" SET "name" = "Bob" WHERE "coaches"."id" = 1

Summary
We've now seen how Active Record creates a link between Ruby and databases, which is an extremely useful and easy tool to use. Which allows us to make use of the built in ORM's, rather than having to write out all of our own.

JSX: Components, Props, and State

tuckersteil — Tue, 02 Aug 2022 20:01:00 +0000

Table of Contents:

Introduction
Components
Props
State
Summary

Introduction
JSX stands for JavaScript XML. JSX is a more sophisticated version of JavaScript, in which it makes it easier to write or add HTML in React. JSX is faster than regular JavaScript since it can easily convert HTML tags to react elements. JSX works efficiently by utilizing react components, which are independent and reusable bits of code that serve the same purpose of functions in JavaScript, but work in isolation and return HTML. JSX has 3 rules to make a react component: 1. A component must return JSX, 2. A component takes in one argument called "props" which is an object, 3. The name of the component/function must start with a capital letter.

Components
As previously mentioned, components are essentially the same as functions in JavaScript. However, instead of having one index.js file with a thousand lines of code, components allow you to organize and abstract out the functionality of your code in separate components. These components enable a "templating" functionality, that helps us organize our user interface's logic and presentation. Since components serve as a "template" for our apps, we typically have components that render other components or "child components". Which is extremely important step when first setting up your app. For example, in my phase-2 project I have a home component set up when the page initially loads, which then renders a SportsList component that displays 3 different components as links that can be clicked, to which unique html will be displayed on the page depending on which one was clicked.

function Home (){
   return (
      <div>
       <SportsList/>
      </div>
   );
 }

Then inside "SportsList"...

function SportsList (){
   return (
     <div>
       <NavLink> Basketball <NavLink/>
       <NavLink> Baseball <NavLink/>
       <NavLink> Football <NavLink/>
     </div>
  );
}

The "NavLinks" are just clickable links to the different Basketball, baseball, and football components. Which themselves render their own unique HTML when clicked. The importance of these child components is that it allows different HTML to be displayed based on whatever the user desires. Additionally, by setting up your components in this format you can easily pass data or values between components that makes them more dynamic and a lot more reusable. The data that is passed into our components are called props.

Props
Quick Recap: A component is a function that takes props as an argument and returns JSX.

React allows us to pass units of information from a parent component down to a child component. We call these props, which are shown as an object with key-value pairs related to the data we passed down from the parent component. Props can hold any kind of data(strings, numbers, booleans, objects, even functions!). To pass props to a component, you add them as attributes when you render the component, just like adding attributes to an HTML element. For example, using the same example as before, lets say I wanted to pass information from my Home component to my SportsList component I would do it like so..

function Home (){

const data = {sport1: Basketball, sport2: Baseball, sport3: Football}

   return (
     <div>
       <SportsList data={data}/>
     </div>
  );
}

Then inside "SportsList"...

function SportsList ({data}){
   return (
     <div>
       <NavLink> {data.sport1} <NavLink/> 
       <NavLink> {data.sport2} <NavLink/>
       <NavLink> {data.sport3} <NavLink/>
     </div>
  );
}

This would give us the same as the previous example:

function SportsList (){
   return (
     <div>
       <NavLink> Basketball <NavLink/>
       <NavLink> Baseball <NavLink/>
       <NavLink> Football <NavLink/>
     </div>
  );
}

State
Lastly, the state object is where you store property values that belongs to the component. State is used in components when there are variables whose value will change. Since we cant send data up from a child component to its parent, we use state to pass data down to child components. In addition to passing the state variable a child component, we also pass it a setter function which when called updates the value of the state variable with whatever argument it was called with. To decide which component to create our state variables in, we need to locate the closest common parent.
Syntax:

we need to import state in top level parent component and call it inside the function and pass it an initial value.

Import React, { useState } from ‘react’;

function App(){
const [name, setName] = useState("")

   function setNewName(newName){
    setName(newName)
    }

 return (
  <Name name={name} setNewName={setNewName}/>
 );
}

function Name({name, setNewName}){

  function handleChange(e){
   setNewName(e.target.value)
  }
    return(

   <input
    type="text"
    value = {name}
    onChange= {handleChange}
   />

 );
}

In this example, we set our "name" state variable to be an empty string initially in the App component and passed it to the Name component with a callback function. Then when the user types their name into the input field, the onChange attribute calls handleChange function. The handle change function then calls the callback function, "setNewName", we passed to the name component with the value of whatever was typed. Which takes us back to the App component, where the parameter "newName" is equal to that same value that was typed. To which that function then calls the setter function(setName) for the state variable "name". By calling the setter function, name is now no longer equal to empty string, but whatever value was typed by the user. Which can then passed if needed to other child components of App.

Summary
When writing code in React understanding how components, props, and state works is essential when creating and building your applications. Without the basic understanding of how each work dynamically with each other, ones code can get jumbled and misconstrued quickly. On the other hand, having a strong understanding of how these features of React work, one can easily build a well organized, dynamic, and efficient application.

Difference between: Var, Let, & Const

tuckersteil — Mon, 23 May 2022 17:05:10 +0000

Table of Contents:

Introduction
What is Scope?
Variable Value Reassignment
The Var Keyword
The Let Keyword
The Const Keyword
Summary
Phase-1 Project

Introduction
Var, Let, and Const are all ways to declare variables.

JavaScript now has three different keywords available to declare a variable. It is important to use these declarations the right way because they were made with the developer in mind and make code easier to understand. In this blog, I will be explaining and main differences between the three, and how they can be used.

In my opinion, the biggest difference's between Var, Let, and Const are in regards to Scope and Value Reassignment. First, let's discuss Scope!

What is Scope?

Scope determines the accessibility of variables in JavaScript. There are three different types of scope in JavaScript.

Global Scope Variables declared outside a function are in the global scope. This means that global variables can be accessed or changed anywhere (or Globally).
Functional Scope If a variable is declared within a function, then it is functional scope. Meaning it can only be accessed with in that function.
Block Scope A block Scoped variable means that the variable defined within a block({}), are only accessible within that block. Using Var in a block scope doesn’t prevent the variable from being accessible outside of it. Using const or let in a block scope does however prevent the variables from being accessible outside it.

Variable Value Reassignment

Variable value reassignment is an extremely crucial component when deciding which keyword to use for declaration. If you know the value of your variable will need to or be changed at some point its smartest to use Let, or Var if you must. Where as the benefit of using Const is that you know that variable will always have the value that you initially assigned it with, when it was declared.

The Var Keyword

Using Var to declare your variables in JavaScript isn’t advised, and should be avoided as a general rule. That being said, variables declared using the Var keyword are either globally or functionally scoped.

var test = "Var Declaration"
console.log(test) //=> Var Declaration

function varTest(){
var fruit = "Apple"
console.log(test) _
_console.log(fruit)
}
varTest(); //=> Var Declaration, Apple

console.log(fruit) //=> Error

Here you can see that "test" was globally scoped, so it was able to be accessed both globally and inside the function. However, "fruit" was declared in a functional scope, so we were not able to access it outside the function.

The Let Keyword

The Let Keyword is pretty similar to the Var keyword as they both allow you to reassign the value later on.

let name = "Jim"
console.log(name) //=> "Jim"

name = "Bill"
console.log(name) //=> "Bill"

var name1 = "Scott"
console.log(name1) //=> "Scott"

name1 = "Tucker"
console.log(name1) //=> "Tucker"

However, the main difference between the Var and Let is that Var can be redeclared, but Let cannot due to it dealing with a block scope.

var name = "Jim" //=> "Jim"
var name = "Billy" //=> "Billy"

let name1 = "Sally" //=> "Sally"
let name1 = "Pedro" //=> "SyntaxError: Identifier 'name1' has already been declared"

The Const Keyword

Const is similar to the Let keyword as it is also blocked scoped. Const is different from Let in that it cannot be reassigned or redeclared. Thus, to use the Const keyword, you must assign it a value at the time of declaration.

const word = "Hi" //=> "Hi"
word = "Hello" //=> TypeError: Assignment to constant variable.

const name //=> SyntaxError: Missing initializer in const declaration
const name = "Mary" //=> undefined

Summary

Now that you have a better understanding of the differences between Var, Let, and Const. You can now decide which one is right for you and your code. However, its a good practice to always declare your variables with Const or Let.

Use Let anytime you know the value of the variable will changed.
Use Const when you know the value of the variable will be set and not changed.
Let and Var don’t have to be initialized when declared. Const has to to initialized when declared.
Var can be redefined and redeclared, let can be redefined but not redeclared, const cant be redefined or redeclared.

My Phase-1 Project
link: https://tuckersteil.github.io/Phase-1-Project/

For my Phase-1 project I decided to built a simple Black Jack game. The project first pulls cards from an API, to which I was able to utilize the Let keyword to save that data globally for future uses in other functions. I created a variable called "count" that i declared using Let. Which became extremely pivotal for my code, as it was used in a good majority of my functions. I also never once used Var, but did use const many times to create variables for almost all of the elements in my index.html which made it much simpler to to "deal" cards and assign images to the cards. But long story short, Im a huge fan of using Let as it just gives a superior ability to manipulate variables and makes the most sense to me.