DEV Community: Surapat Mekvanich

Thank you Rails for the carry

Surapat Mekvanich — Thu, 02 Mar 2023 17:42:18 +0000

Hello all,

I've picked up Ruby recently in my bootcamp program. We initially started with the vanilla Ruby to build our backend. Much like vanilla JavaScript that I had learned previously, everything had to be code manually.

Anyways, we had to utilize Sinatra (Domain Specific Language) to make use of ActiveRecord in Ruby to establish Object Relational Mapping (ORM) to use in our backend (API). It was such a tedious bits of work. It was a lot of typing the same thing over and over.

And then we were introduced Rails.

From having to type these migration files out manually.

class CreateProducts < ActiveRecord::Migration[6.1]
  def change
    create_table :Products do |t|
      t.integer :farm_id
      t.string :name
      t.string :category
      t.string :description
      t.string :picture_link
      t.integer :price
      t.integer :stock
    end
  end
end

Into, typing these inside the terminal

rails g migration product name category description picture_link price:integer stock:integer farm:belongs_to --no-test-framework

As an efficient (lazy) wannabe web app programmer that I am- this changes everything.

'Rails g' calls upon the generator method (you'll come to love this) pre-built into the rails to generation a migration file. The convention is as followed 'rails g migration' + 'name of the table' + 'columns (in which, if not specified data type, will all be considered by strings): data_type' and the '--no-test-framework' is to not interrupt any rspec (tests) files that were created (if you were in a class setting which provided you tests to guide you).
**Also the 'belongs_to' is used to establish many-to-many relationship with another table.

You can already see how much heavy lifting (typing) these generator methods will save you from. Oh yeah, did I mention there are more methods than just for creating migration?

"YES, YOU CAN CREATE A WHOLE NEW API WITH COUPLE KEYSTROKES.
THIS THING IS A MVC FRAMEWORK ON RUBY. BASICALLY RUBY ON STEROIDS. SO EASY TO USE IT'S SCARY." -me

First of all, I would make sure that you have ruby and rails installed properly. I would follow this tutorial (https://www.youtube.com/watch?v=fmyvWz5TUWg&t=1792s) since I won't pretend that I know how to fix your problem if something goes wrong with initial set up.

Once everything is all set up. I would go into your terminal and direct to where you want this file/project to live in. (Yes, we are going to walkthrough how to make your own customizable API)

Start with,

rails new my_api --api

Please Please Please don't use 'my_api' as your API name. Pick some other interesting name. Also don't forget '--api' at the end so rails doesn't generate all the other stuff you don't need. Even if you do it's nbd. Start over or play with the new stuff that comes with it.

Depending on how fast your computer is this step will take a (short) while. It also lists all the required gem into gemfiles. Might as well run in your terminal 'bundle install' when it's done generating everything.

bundle install

Then you'll want to create some sort of seed data to fill your migration table. (pro tip: use Faker gem with loops)

Here's where the magic happens. Type,

rails g resource some_table name number:integer date:date

WALLA

You have now generated migration file, model, controller, and routes in config/routes.rb!

Now you have basically a skeleton file that was generated by rails. But we're not done yet!

Always Always Always, make sure your migration file looks right and that there are no typos. This will snowball into a headache you do not want when you cannot access your API.

Rails is especially picky with generator command with/without pluralization at the end.

-rails g scaffold* (no pluralized name)
-rails g resource (no pluralized name)
-rails g migration (no pluralized name)
-rails g model (no pluralized name)
-rails g controller (pluralized name)

If I make a mistake here and you fail your test please let your instructor know that you tried to follow this noob guide and he was wrong.

Then go into your model and establish some validation to filter data that goes into your database. It can be as simple as

class Product < ApplicationRecord
  validates :name, :number, :date, presence: true
end

Just to make sure there are no empty data in any of the column going into your database.

Then go into your controller to set up how your API would receive the request from frontend and package what information to send back.

class ProductsController < ApplicationController
    before_action :find_product, only: [:show, :update, :destroy]

    def index
        products = Product.all
        render json: products, status: :ok
    end

    def show
        render json: @product, status: :ok
    end

    def create
        new_product = Product.create!(new_product_params)
        render json: new_product, status: :created
    end

    def update
        @product.update!(edit_product_params)
        render json: @product, status: :accepted
    end

    def destroy
        @product.destroy
        head :no_content
    end

    def fruits
        fruits = Product.all.where(category: "fruit")
        render json: fruits, status: :ok
    end

    def vegetables
        vegetables = Product.all.where(category: "vegetable")
        render json: vegetables, status: :ok
    end

    private

    def find_product
        @product = Product.find(params[:id])
    end

    def edit_product_params
        params.permit(:stock, :price, :description)
    end

    def new_product_params
        params.permit(:name, :category, :picture_link, :description, :price, :stock)
    end

end

This controller has full CRUD (create, read, update, destroy) and it is ready to listen to requests from frontend.

Go ahead and fire up your rails server

rails s

Now go into one of your Chrome/Firefox (I recommend installing JSON reader on Chrome, Firefox can read JSON format by default) and type

localhost:3000/

You should see something like this.

You can probably tell that this is not the right address..

Try in your web browser,

localhost:3000/products

localhost:3000/products/1

Right now we can't really test the other actions (create, update, or destroy) unless you have POSTMAN (cough my other posts cough).

But wait... did we ever establish the routes?

AHA, Rails is back at it again with heavy lifting. With the 'resource' generator method it also generates the default 6 methods (with --api) according to the RESTful routes.

Try in your terminal

rails routes

These are all default routes that comes with 'rails g resource'

     Prefix Verb   URI Pattern                                                                                       Controller#Action
                                products GET    /products(.:format)                                                                               products#index
                                         POST   /products(.:format)                                                                               products#create
                                 product GET    /products/:id(.:format)                                                                           products#show
                                         PATCH  /products/:id(.:format)                                                                           products#update
                                         PUT    /products/:id(.:format)                                                                           products#update
                                         DELETE /products/:id(.:format)                                                                           products#destroy

And if you go into your config/routes.rb

Rails.application.routes.draw do
  resources :products # this generates all the default routes
end

This is one of the ways Rails makes it easier for you to make your custom API.

*If you do 'rails g scaffold' it also create all the controller actions for you

Thanks for reading!

POSTMAN please let me in

Surapat Mekvanich — Wed, 22 Feb 2023 17:12:25 +0000

Hi again,

While dabbling with ruby on rails and learning authentication and implementing it I realized that I often log myself out because of the session controller having requiring authenticate to be able to view my backend. To be fair, you can implement this after.

Also, I didn't have a frontend built yet so you can't use the form to fire a POST request to backend to authenticate you in. Even so, without a fully built front end you won't be able to see much even authorized...

Introducing, POSTMAN. Your friendly neighborhood (spacian) s/he who fires fetch calls on your behalf. Simply identify the nature of your call (GET/POST/PATCH/PUT/DELETE) and your destination (endpoint). Any backend developers best friends. You can test your backend without your frontend being built by having a sessions controller.

Here's mine in sessions_controller.rb

    def login
        user = User.find_by(email: params[:email])
        if user&.authenticate(params[:password])
            session[:user_id] = user.id 
            render json: user, status: 200

This will search your backend for users by their email (you can do it by username too if you'd like) and authenticate by their password. Then, putting user in their session (and granting access to wherever they are allowed). Don't forget to set the status code as well!

      post '/login', to: 'sessions#login'

Also don't forget this in your config/routes.rb. This creates a route in yourlocalhost:someNumber/login. How else would you know where to tell your POSTMAN where to fire?

Now that our routes and controller are set up we can now ask our POSTMAN to fetch the backend data for us!

Here you have my local path which is 'localhost:3000/login' which is a POST request to /login which should authenticate me into my session if my email and password are matched.

Of course, it wouldn't work... who uses that kind of password. Never share your password online. Anyways, it threw this error because I had this in the application controllers to catch any errors in the backend side.

    def authorized_user  
        return render json: { error: "Not authorized" }, status: 
        :unauthorized unless current_user
    end

current_user being an instance method where it searches that the user is currently in session (after being authenticated)

Now, after successfully login in my backend returns the information about the user.
I also hope that your eye catches the key:password_digest

password_digest comes with the installation of the bcrypt gem. It salts (encrypts) your password. Only your backend will have the key to decrypt it! And also, it won't allow others to see it even if they can access your backend.

Simply go into your gemfile and add

gem 'bcrypt' # you can also specify a specific version you'd like

Anyways, back on track with the POSTMAN. Now that we are logged in I can view some of the data that I have set up with other controllers.

Well, sorry if you were expecting to see some JSON data from my backend. It's still under construction. But here's how you can log off using POSTMAN.

    def logout
        session.delete :user_id
        head :no_content
    end

Also make sure you have this custom route in config/routes.rb

      delete '/logout', to: 'sessions#logout'

Now simply fire your POSTMAN (and no please don't relieve him of his duty, what would the backend devs do..)

Yeah I know it doesn't spit you out anything because I haven't set any message when the user session is destroyed. Sorry I code like a snail.

I hope this was useful to you all whom are new to developing authentication and needed a way to peek inside via POSTMAN.

Happy Coding!

How to juggle in between two containers (ReactJS)

Surapat Mekvanich — Tue, 21 Feb 2023 17:50:17 +0000

Hi all,

In phase 2 of my coding bootcamp we were learning React (framework on top of JavaScript I had wanted to do something a little bit different. Also, at this point in time we didn't learn how to build the backend yet. I had to generate a mock data in JSON format and then host that in order for my front end to fetch data to display from.

This project was to showcase Bob Ross's paintings. My initial thoughts was that I will have two containers. One container showing all of Bob Ross's paintings (container A) and the other would be where you can favorite them (container B).

However, I want to copy (THEN delete) the information of the container A and send it to container B. And, vice versa.

First, what I had to do was to fetch the data for both container A and B. The initial data for container B was to be empty (because no favorites yet).

 useEffect(() => { // fetch paintings
  const fetchData = async () => {
    try {
      const resp = await fetch("http://localhost:3000/paintings")
      const paintings = await resp.json()
      setPaintings(paintings)
    } catch (error) {
      alert(error)
    }
   }
   fetchData()
}, [])

I also did this with the other container (B). Then, I want to mapped all the data into each container's cards. So, then I created all the respective container A/B cards for them to have SOC.

const mappedPaintings = paintings.map(painting => (<PaintingCard key={painting.id} /> 
)
)

paintings = refers to the inherited useState value from its parental component through props
PaintingCard (component) = the child component of the container A

Note: I also passed down a couple more props down into this child container as well but to not clog the code and make it look confusing I will omit them.

Thereafter, building a structure for my JSX.

return(
<div>
{mappedPaintings}
</div>
)

Then, inside the PaintingCard component I passed down a couple useState set functions. I won't note it here but it'll be assumed.

So again, building a simple JSX structure.

return(
<div>

<div>
{painting.title}
</div>
<img src={painting.img_src} alt={painting.title} />
<button onClick={handleDelete}>Add to My Gallery</button>

</div>
)

So now our mapped Data should show us the painting title and image. I also build a button to handle delete... that's kinda misleading since it'll fire a POST request before deleting itself. For simplicity sake I chose that name so please bear with it.

As for the handleDelete callback function,

const { id } = useParams()
const finalPainting = !painting ? myPainting : painting
const handleDelete = () => {
const paintingToAdd = {...finalPainting, id:null }

        fetch("http://localhost:3000/gallery",{
            method: "POST",
            headers:{
                "Content-Type": "application/json"
            },
            body: JSON.stringify(paintingToAdd)
        })
        .then(response => response.json())
        .then(paintingObj => setMyPaintings(currentVal => [paintingObj, ...currentVal]))
        .catch(error => alert(error))

        fetch(`http://localhost:3000/paintings/${painting.id}`,
            {
                method: "DELETE"
            })
        setPaintings(currentPaintings => currentPaintings.filter(element => element.id !== painting.id))
    }

A lot to take in, I know. Even worse when you're trying to build this. Remember that I need to have another one going vice versa. I will walkthrough each part.

const finalPainting = !painting ? myPainting : painting

This variable determines which painting we are choosing

const paintingToAdd = {...finalPainting, id:null }

This spreads (iterates/copy all of its object) the finalPainting variable and sets the id of each object to null. ***

 fetch("http://localhost:3000/gallery",{
            method: "POST",
            headers:{
                "Content-Type": "application/json"
            },
            body: JSON.stringify(paintingToAdd)
        })
        .then(response => response.json())
        .then(paintingObj => setMyPaintings(currentVal => [paintingObj, ...currentVal]))
        .catch(error => alert(error))

This fires a POST fetch to mock database (and stringify the object we are sending) and renders/set the state for the container B, and to alert us if it catches any error.

 fetch(`http://localhost:3000/paintings/${painting.id}`,
            {
                method: "DELETE"
            })
        setPaintings(currentPaintings => currentPaintings.filter(element => element.id !== painting.id))

This fires a DELETE fetch to mock database. I made use of useParams to target the right painting by interpolating the id into the path. Then, it renders/set the state for the container A by getting any painting that DOESN'T have the painting id that we JUST deleted.

***I had to set id to null because if you don't and you send back the painting with the same id the database will not like that because id is the unique identifier... meaning there can be only one of that value. So, setting all the id to null addresses this problem.

We have successfully move content from container A to B while erasing the original content from container A.

Now, I just did the same but going from container B to A.
There you have it, a 'juggling container system' (I coined it).

Thanks for reading!

Please don't forget to specify your file type

Surapat Mekvanich — Wed, 04 Jan 2023 23:04:10 +0000

Hi fellow coders.

Today I have messed up again while creating a new component to add onto my react project.

Me and my teammate both went through each lines of code to make sure my logic makes sense. It wasn't until he told me to look in my console tab (after inspecting the page).
It was all mumbo jumbo until I read one line,

Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/CommentForm.822d12a9fce48c39b3fb') is not a valid name.

Hmmm.... so the DOM wasn't even being created and/or being mounted onto the mother component (App.js)?

Me having no idea what this means decided to just reverse google search it.

Boom. The first result was some other people running into the same problem on StackOverflow.

Skim..
Skim..
Skim..
"... have you added .js at the end of your file name?"

OH MY GOD I FORGOT TO ADD .JS AT THE END OF MY COMPONENT FILE.

Goodnight folks ( I know it's 3pm )

How to get your background to become disco light

Surapat Mekvanich — Fri, 09 Dec 2022 08:08:01 +0000

Hi all,

I was working on a javaScript project and wanted a party mode color. My initial imagination was that I wanted a button to alternate the background color of my web page.

I started by adding a button in my html file.

<button id="partyToggle" value="Yes">Party Mode</button>

You might be wondering why there is a value = "Yes" attached to it. Worry not, it does nothing.

I was trying to do some magic trick with the javaScript by having its value change between two values ("Yes"/"No") when clicking on another button in order to simulate an on/off switch for a function... or that's how it worked in my head. Anyways, it didn't really work so I thought I would leave it there for a great storyteller.

Aaaaaaanyways, back to the topic. After creating a button we want to be able to target it. Hence, I create a global accessible variable in the javaScript file.

let togglePartyModeBtn = document.querySelector("#partyToggle")

This allows togglePartyModeBtn to target the button we made in the html file initially.

Next, I added an event listener to the button to initiate a function that I am going to be making. We are going to called it "partyMode".

togglePartyModeBtn.addEventListener('click', partyMode)

This means that when a click event occurs at the 'Party Mode' button the function partyMode will be passed right away.

So let's write the code for partyMode function.

function partyMode() { document.body.classList.toggle("party-mode");

This function will call on another feature in CSS labeled '.party-mode'.

In my CSS file, I added.

.party-mode { background-color: whitesmoke; animation-name: partyMode; animation: partyMode 3s; animation-iteration-count: infinite; }

This sets our initial background to whitesmoke when partyMode is invoked. My page just happens to be in whitesmoke in the default color hence why it is whitesmoke. I also gave it an animation name because I will add @keyframes after. I also wanted it to alternate between colors so I coded animation and feed it the animation name to it. The 3s means that it will cycle between all the colors in 3 seconds interval. You can make this longer if the disco color hurts your eyes (but is it really disco if it doesn't hurt your eyes)? I am also lazy so I didn't want to click the 'Party Mode' button every 3 seconds so I set the animation iteration count to infinite so it'll just keep running.

@keyframes partyMode { 0% {background-color: red;} 20% {background-color: pink;} 40% {background-color: yellow;} 60% {background-color: blue;} 80% {background-color: purple;} 100% {background-color: green;} }

So below that code (in the CSS) I coded this to cycle between all the colors I wanted. To ensure smooth transition between the colors I would choose colors that are closely related in the r,g,b,a values. You can also change the % of the background color as you wished. It will just change how much time the color is being display in the background.

Please let me know if there are improvements I can make to my codes since I am still learning!