Forem: Tuyen Ha

Getting Started with Action Mailer and GMAIL Configuration

Tuyen Ha — Tue, 15 Aug 2023 03:51:02 +0000

What Is Action Mailer?

Action mailer is a component of the Ruby on Rails framework that makes sending emails from your application a simple process. It provides a framework for creating, sending, and managing email messages.

So let's get started!

The first step is to generate and set up the mailer:

% rails generate mailer WelcomeMail

This will generate the following outputs:

create app/mailers/welcome_mail_mailer.rb
invoke erb
create app/views/welcome_mail_mailer

Inside the # app/mailers/application_mailer.rb

class ApplicationMailer < ActionMailer::Base
   default from: "from@gmail.com"
   layout "mailer"
end

This code defines a class called "ApplicationMailer" that inherits from the "ActionMailer::Base" class. Inside the class, the first configuration is "default from: 'from@gmail.com", which sets the default sender address. The second configuration is "layout 'mailer'", which sets the default layout template for the emails.

Be sure to replace the from@gmail.com with your chosen default email.

Inside the # app/mailers/welcome_email.rb

Class WelcomeMailer < ApplicationMailer
   default from: 'from@gmail.com'

   def welcome_email
      @user = params[:user]
      mail(to: @user.email, subject: "Welcome to 
      Random Posts")
   end
end

This code defines a class called "WelcomeMailer" that inherits from the "ApplicationMailer" class. Similar to the Controller we are already used to, we can create an email by adding a method to the mailer.

The configuration "default from: 'from@gmail.com'" sets the default sender email address for all the emails sent from the mailer class.

Then there is a method called "welcome_email" which is responsible for sending the physical welcome email.

CREATING THE MAILER VIEWS

Inside the # app/views/welcome_mailer/welcome_email.html.erb

<html>
   <head>
      <meta content='text/html; chatset=UTF=8' http-equiv='Content-Type' />
   </head>
   <body>
      <h1>Welcome to Random Posts, <%= @user.name %</h1>
      <p>You've signed up for Random Posts!</p>
      <p>Thanks for joining us!</p>
   </body>
</html>

This code is a basic ruby HTML file that creates the body of the email in an HTML structure.

Inside the # app/views/welcome_mailer/welcome_email.text.erb

Welcome to Random Posts, <%= @user.name %>
=============================================

You've signed up for Random Posts.

thanks for joining us!

Then we have the body of the email in text format.

CALLING THE MAILER

Inside # app/controller/users_controller.rb

We are going to instruct the WelcomeMailer to deliver a welcome email to anyone who signs up for an account!

class UsersController < ApplicationController
   def create
      @user = User.new(user_params)
      if @user.save
         WelcomeMailer.with(user: @user).welcome_email.deliver_now
         session[:user_id] = @user.id
         render json: @user, status: 201
      else
         render json: {errors: @user.errors.full_messages}, status: :unprocessable_entity
      end
   end
end

The line WelcomeMailer.with(user: @user).welcome_email.deliver_now sends a welcome email using a mailer class named "WelcomeMailer." It passes the "@user" object to the mailer's "with" method. This method prepares the email, then calls the "welcome_email" method to generate the email content. Which then will send out the email when a new user has been created!

For this specific tutorial, I will be using a GMAIL account as the default sender email, and with that we'll continue on with the GMAIL configuration.

GMAIL CONFIGURATION

Inside # config/environments/development.rb,

config.action_mailer.delivery_method = :smtp
config.action_mailer.smtp_settings = {
address:              'smtp.gmail.com',
port:                 587,
domain:               'example.com',
user_name:            'from@gmail.com',
password:             '**App Password**',
authentication:       'plain',
enable_starttls_auto: true }

By adding the following codes into our file development.rb, we have successfully configured and set up the Action Mailer and Mailcatcher.

The code above is specifically for GMAIL Configuration.

Keep in mind that in order to use Action Mailer with Gmail, an App Password is required. This prevents the violation of your other security such as the 2-step verification.

You can get an App Password by signing into your Google Account => security => and under Signing in to Google.

Turn on your 2-Step Verification if it's not already in use.
Navigate to App Passwords
Select Other (Custom name) and give it a name.
GENERATE
Copy your App Password from the yellow box.
Replace the password with your App Password.

Just like that, you've successfully sent a welcome message!

Nested Routing in Ruby

Tuyen Ha — Thu, 13 Apr 2023 22:41:52 +0000

Why do we use Nested Routes?
In short, we use nested routes to make our codes cleaner which as a result makes them much easier to read. More importantly, nested routes make associating relationships less complex - nesting allows us to stay Restful and automatically routes the URL to where more than one model can be involved. Just by looking at how models are routed, it's clear which model belongs to which model and which models have many of which models.

As an example,
we have a user model that has many posts. By nesting the post model in the user model, you can route it like this:

/users/2/posts # all the posts for user with id:2

Using Nested Routes
To start we need to set up nested resources.

rails g resource model Blog title content:text
rails g resource model Comment reply blog:belongs_to

The rails generate command, or rails g is a shortcut template to generate boilerplate code. By running rails g resource a migration file, model, controller, and serializer will automatically get generated for you without you having to do much of the work yourself. That line of code will also open up all of the routes in config/routes.rb for you as well.

Side note: Making use of these generators can save you so much time when working on Rails projects!

The blog model will contain a title as a string and content in text form content:text. When title without :string, terminal will automatically know that you want it as a string.

the blog:belongs_to line will generate a blog_id, which is a foriegn_key to blogs. This foreign key strongly enforces legitimate data at the DB level.

Next you create routes,

Rails.application.routes.draw do

  resources: blog 
  resources: comments

end

Now we connect the parent and the child,

class Comment < ApplicationRecord
  belongs_to :blog
end

This is saying that the comments belongs_to a blog. This relationship will allow the blog to have any number of comments.

Because the comment belongs to the blog, you must also specify in the blog model that a blog has many comments.

class Blog < ApplicationRecord
  has_many :comments, dependent: :destroy
end

Keep in mind that the parent might get destroyed by certain events in the app and therefore we want to ensure that when the parent is deleted, all the children should be destroyed along with their parent components. Why? Because if it doesn't get destroyed all with its parent the belongs_to reference in the child object will have undesired consequences.

dependent: :destroy

this line will take care of that.

Now, the routes.rb file needs to be updated in order for the comment to be listed as a nested child of the blog.
This is done as follows,

Rails.application.routes.draw do
  resources: blogs do
     # nested resource for comments
     resources: comments, only: [:index, :show]
  end
  resources: :comments
end

The 'index' and 'show' routes are nested routes and below the nesting are the regular resourced routes for comments. This allows the index action to deal with both the un-nested and nested routes.
/blogs/2/comments or /blogs/comments.

Although the comments are nested under the blogs we are still dealing with the comments.

If you type in rails routes in the terminal, you'll get a log of all the possible routes based on your routes.rb file. You'll be able to know for sure which routes are available.

Then you'll need to let the controller know about this change and tell it what to do.

class CommentController < ApplicationController
def index
   if params[:blog_id]
      @comments = Blog.find(params[:blog_id]).comments
   else
      @comments = Comment.all
   end
end

def show
   @comment = Comment.find(params[:id])
end

I am telling the Comment Controller to render all comments under a specific blog "blog_id" when "/blogs/:id/comments" is being fetched.

The nested resources give us a way to document the parent/child relationship between our routes and our URLs.

Conclusion
Nested routes are great to use but keep in mind that nested routes can quickly become difficult to work with once the routes go beyond two layers deep. You can most definitely go beyond two layers deep but it's considered a code smell and best to be avoided.

Sinatra and Active Records to Perform CURD Actions

Tuyen Ha — Wed, 25 Jan 2023 02:37:33 +0000

Sinatra

Sinatra is an open source software web application library and domain-specific language written in Ruby. It does not follow the typical model-view-controller pattern used in other frameworks so therefore Sinatra is considered a microframework rather than a full-stack web development framework such as Ruby on Rails. Simply put, Sinatra is fully dependent on the Rack web server interface and focuses on quickly creating web applications in Ruby with a little less effort. Therefore, making it the perfect small web framework to get you started in web application development with Ruby.

Active Record

Active record is a Ruby gem and a description of an Object Relational Mapping system (ORM). It's basically a Ruby code that runs in between your database and your logic code making changes to your database.

Why Use Active Record?

Now let's talk about why Active Record is used. React is used as a frontend interface in applications but React cannot communicate directly with the database and therefore we need a way to connect our frontend with our backend. This is where Application Programming Interface (API) comes in. Both of the applications uses HTTP and JSON which means we can use this fact to our advantage. Active Record is used to help our React application and our database to understand one another, resulting in a successful collaboration.

Performing CURD with Sinatra

For recap, CURD stands for CREATE, UPDATE, READ, and DELETE. This is the four basic operations that provide users the ability to create data, access the data, update or edit the data and delete the data.

The first step is to create a migration:
$ bundle exec rake db:create_migration NAME=create_games
Running this command will generate a new file in db/migrations and Rake task will also add some starter codes for us.

class CreateGames < ActiveRecord::Migration[6.1]
   def change
   end
end

We're creating a class called CreateGames that inherits from Active Record's ActiveRecord::Migration module. Inside that class, we have a change method which it commonly used for updating the database. The result of this migration is a table with the appropriate columns for games.

class CreateGames < ActiveRecord::Migration[6.1]
   def change
      create_table :games do |t|
        t.string :name
        t.string :genre
        t.integer :price
      end
   end
end

As you can see, games because singular and plural makes a huge difference. Table names are plural because we are creating a games table that we are using with a Game class. In contrary, class names are singular.

Then, we write a block of codes that will create our columns.

We also need the primary key but Active Record will automatically generate that id column for us!

Next, we run our migration:
$ bundle exec rake db:migrate
This command tells Active Records to create a new database file if there isn't one already and update it.

The next step is to create a file game.rb for the Game class and extend the class with ActiveRecord::Base

Class Artist < ActiveRecord::Base
end

Now for the ability to create, update, read, and delete data.

Let's start with the GET Request:

get "/games" do
   games = Game.all
   games.to_json
end

In the code snippet above, we first get all the games from the database and return a JSON response with an array of all the game data as shown below.

[
  {
     "id": 1,
     "title": "Pokemon",
     "genre": "Role-playing:,
     "price": 28
  },
  {
     "id": 2,
     "title": "Mario Kart",
     "genre": "Racing",
     "price": 34
  }
]

POST Request

post "/games" do
   games = Game.create(
      title: params[:title],
      genre: params[:genre],
      price: params[:price]
   )
end

Use the HTTP verb /games to handle this request then access the data in the body of the request to create new games. Lastly, send a response to the newly created game as JSON.

param is a special kind of variable in the computer programming language that is used to pass information between functions.

PATCH Request
In my opinion, the PATCH request is the trickiest request of them all because, from the frontend, a PATCH request needs to be utilized in order to handle certain features that allow a user to update their review.

To handle a PATCH request, a PATCH HTTP verb to /games/:id is used in order to find the game that might need updating. We then need to access the data in the body of the request and use that data to update the game in the database. Then again, send a response of the update to JSON.

patch "/games/:id" do
   games = Game.find(params[:id])
   games.update(
      title: params[:title],
      genre: params[:genre],
      price: params[:price]
   )
   games.to_json
end

DELETE Request

delete "/games/:id" do
   games = Game.find(params[:id])
   games.destroy
   games.to_json
end

This one is fairly simple. All we need to do is find the game using the ID, delete that game using games.destroy, and send a response with the deleted game to JSON.

I hope this little tutorial will be proven helpful for those who need a little more clarification!

React Controlled Components

Tuyen Ha — Thu, 27 Oct 2022 21:10:29 +0000

First, let's quickly go over what an uncontrolled component is and why it is advised to more often use controlled components over uncontrolled components.

Uncontrolled components are components that are NOT controlled by the React State. They are taken care of by the DOM (Document Object Model).

With the form data being handled by the DOM, when something is being typed into the input field, the data will be remembered by the DOM. This is considered "uncontrolled" because it relies on the DOM to manage the input data. Then when we want to have access to those data, a ref must be used, useRef(). Ref allows us to reference a DOM element or class component from within a parent component when the form is submitted but it doesn't allow us to validate the inputs as we type.

If validation is not necessarily needed, then using uncontrolled components might be the easiest way to create forms. Though, it might not be the most preferable way for the sake of our users.

However, uncontrolled component does limit our control over the form elements and data.

This is where using the controlled component is proven to be more beneficial! The controlled component is handled by the component itself rather than the DOM, which allows us better control over the form elements and data.

When using controlled components, there is however one drawback. The number of states in a component increases with each controlled elements that are being added to the form element sometimes making it slightly harder to keep track of everything on the form.

What is controlled components:
A controlled component is referred to components that ARE controlled by using React state, useState(). In a controlled component, the parent components manages their own states and passes the new values as props.

For example, when populating forms the data are being handled by the components state. The changes with the data are then notified through callbacks such as the onChange and the onClick events.

In most cases, always use controlled components.

Why do we use controlled components:
So exactly why do we use controlled components and why are controlled components preferred over uncontrolled components?

For obvious reason, we want more control over our components. One example of when to use controlled components is when implementing forms. Using controlled components instead on uncontrolled components when implementing forms allows all the component states to be kept in the React state instead of having to solely rely on the DOM to retrieve elements value through internal states. With controlled components, when the state changes the components will programmatically re-render with the updated values. As you can imagine, this makes it undeniably easier to populate forms from the existing and available data.

How do we create controlled forms:
Controlled components are created by connecting the form elements to a state. We then set the attributes value to the state and to an event such as onChange or onClick.

In the screenshot below, we are initiating state for a new name and a new category. This step allows us to use states to programmatically update the current state value with the updated value.

Here, we are making it possible for the input to change with every click of the keyboard.

Then we tell the input field that when a new name or a new category is entered, a change must occur. We do this by using an onChange event and tying it to the handleNewName or handleNewCategory function.

Controlled components contains functions that manages the data passing into them when each onChange event occurs. The data is then saved to state and updated. That is how a controlled component works!

Introducing the Destructuring Assignment Syntax in JavaScript

Tuyen Ha — Wed, 27 Jul 2022 00:06:53 +0000

Introduced in ES6, the Destructuring Assignment syntax is like a shortcut designed to minimize the amount of codes that are written. In short, it extracts data from both arrays and objects, making them easier to manage.

In this tutorial, I will go over the idea of destructuring objects and arrays.

Destructuring Arrays:

One way of getting an element out from an array is to make that element into a variable and providing it an appropriate index.

For the array below, we want to get the first element
We made john into a variable then gave index[0] to the name variable. We are asking for the very first element to get pulled out.
const john = name[0]; console.log(john); // LOG: john

So that is the way it's usually done but there is a much easier way of doing all that thanks to the destructuring syntax!

Let's say we wanted to grab the first three elements in the array

Instead of doing this,
const john = name[0]; const stephanie = name[1]; const amy = name[2];

We could simply do this,
const [john, stephanie, amy] = name;
You simply take the element that you want to destructure and place it on the right side of the equal sign then place the elements you want to grab on the inside of the array brackets.

Using an array literal, each variable gets mapped to the same element at the same index of the array.
console.log(john); // LOG: john console.log(stephanie); // LOG: stephanie console.log(amy); // LOG: amy

Let's say you wanted to skip an element and only grab index[0] and index[3]
const [john, , , amy] = name;

This basically say "skip element two and three!"

Destructuring Objects:

Here we have two objects, contactOne and contactTwo with the properties of name, age, and address. The address property has properties of it's own, city and state.

You place the property you are trying to grab inside the curly braces and where you are grabbing it from on the right side of the equal sign.
const { name, age } = contactOne; console.log(name); // LOG: Jimmy console.log(age); // LOG: 41

Destructuring objects uses {curly braces} instead of [brackets].

With Objects you could also use a default value,
for example:

console.log(occupation); // LOG: unknown

All you have to do is create a new property of occupation then set the default value to "unknown." As you can see, by default, the property of occupation is set to "unknown."

On the contrary, you could also add a property of occupation directly inside contactTwo and have the output of each individual contact's personal occupation.

console.log(occupation); // LOG: Software Engineer I

Destructuring may seem like a small deal when handling just a few parameters, but in situations where you may have a large number of parameters to work with, this method has been proven to be quite beneficial.