DEV Community: valera2022

How Does A Sinatra API Looks Like In Ruby?

valera2022 — Sun, 09 Jul 2023 00:18:28 +0000

Sinatra offers us a way to build Routes for Our Front-end and back-end to connect with each other.

First Let us explain some basic terms before we divide into details.

What is MVC?

It stands for Model View Controller.
The view will be the Browser where the user sends some requests to the back-end. These requests are handled by the middle man which is the controller(aka Sinatra in our case). Our controller then request the Model(Ruby with Active record in our case) to view/change the data.

What is Active Record?

"Active Record is the M in MVC - the model - which is the layer of the system responsible for representing business data and logic. Active Record facilitates the creation and use of business objects whose data requires persistent storage to a database. It is an implementation of the Active Record pattern which itself is a description of an Object Relational Mapping system."

What is Sinatra?

"Sinatra is a small web framework that provides a Domain Specific Language (or DSL) implemented in Ruby. Blake Mizerany created it and provides a lightweight option for developing simple web applications. Sinatra is Rack-based, which means it uses Rack under the hood and can use many tools designed to work with Rack. It's been used by companies such as Apple, BBC, GitHub, LinkedIn, and more."

What is an API?

API stands for Application Programming Interface.
An API allows you to access resources from Your own backend or Other people's Data. API can Make the programmer’s life easier since we could use resources from other’s people/companies and implement them in our code.

Let us talk about Modules

as we defined before Module/s have the responsibility for changing or viewing the data.

In Ruby, we make classes that are modules of data tables.

class Supervisor < ActiveRecord::Base
    has_many :workers
    def destroy_all
        Doctor.destroy_all
  end


end

class Worker < ActiveRecord::Base
    belongs_to :supervisor
    def destroy_all
          Patient.destroy_all
    end


end

These modules are related to one another through the keywords has many and belongs to.

Sinatra is gonna interact with modules and the modules will handle the data.

Let us talk about Sinatra

Sinatra’s syntax is as follows:

get  “/workers” do
  workers = Worker.all
  workers.to_json()
end

We start with an HTTP verb. “/workers” will be our URL. This is how Sinatra handles each different HTTP request So If I send a get request from the browser or my front-end The Ruby inside this specific Route will come into action.

RESTful Routes

REST stands for Representational State Transfer which provides a way of mapping HTTP verbs (get, post, put, delete) and CRUD actions (create, read, update, delete) together. It is a convention for defining routes and when something follows the rest principle it is known as RESTFUL.

So It is convection for Our Routes.
Let’s say we want to Send a Get request, my Route will be named in this matter:

  get  “/workers” do
      workers = Worker.all
      workers.to_json()
  end

This is an Index Route meaning it is not one single Item but a List of all the workers.

Or A POST request:

post '/workers' do
    supervisor = Supervisor.find_by(id: params[:supervisor_id] )
    worker = doctor.workers.create(
      name: params[:name],
      dob: params[:dob],
      doh: params[:doh],
      ins: params[:ins],
      sick_days: params[:sick_days],
      security_level: params[:security_level],
      vacation: params[:vacation],
      pay: params[:pay],
      note: params[:note]

    )
patient.to_json

end

This is the create Route.

How About A Patch?

patch  “/workers/:id” do
      worker = Worker.find(params[:id])
      worker.update(
          name: params[:name]
)
      workers.to_json()
end

This is the Update Route.

If we wanted to delete one of them, we will send a delete request we will “catch it” with something like :

delete '/workers/:id' do 
    worker = Worker.find(params[:id])

    worker.destroy()


  end

This is the Destroy Route.

Common mistakes and debugging tips.

You can check if your API ends are working by putting a binding.pry in it and see If a request may to it triggers binding.pry( you can use Postman if you don’t have the corresponding fetch on the front-end).

post '/workers' do
    supervisor = Supervisor.find_by(id: params[:supervisor_id] )
    worker = doctor.workers.create(
      name: params[:name],
      dob: params[:dob],
      doh: params[:doh],
      ins: params[:ins],
      sick_days: params[:sick_days],
      security_level: params[:security_level],
      vacation: params[:vacation],
      pay: params[:pay],
      note: params[:note]



    )
    worker.to_json
    binding.pry

end

If it does not open the pry console on the back end, check if there are any issues with your front-end request.

Another Silly thing that could mess up your response from the server is that last line .to_json . Make sure this statement is in there.

To recap:
Sinatra works as a middle between the View aka the Browser and the Module/s.
The module (ruby with active record) view or change data in the data base and send the response back.

Resources:

https://www.geeksforgeeks.org/restful-routes-in-node-js/
https://guides.rubyonrails.org/active_record_basics.html
https://www.redhat.com/en/topics/api/what-are-application-programming-interfaces

Data Handling And Transfer Between Components and Database.

valera2022 — Sat, 13 May 2023 18:41:00 +0000

One of the basic things you need to know when working with React is how to transfer and deal with data from one component to another.
Let's start with some definitions before we go on further.

- What is State?

The state is data that has the ability to change due to a user's actions. Data in state could be added, deleted, or completely overwritten by a user's action.

- What are props?
we use props to pass data between components. we send props down to child components.

- What Is Lifting State?

When implementing state we need to figure out where is going to be.
The best place for this is a parent component from which we can send data to the child components that will need the same state. This is What we call lifting state.

- What Is Inverse Data Flow?

We know we can send data down through props but how could we do the inverse?
well. We simply pass down a callback function and call it in the child component with the data.

- What is CRUD?

Each of the words stands for something.

C : Create,
R : Read,
U: Update,
D: Delete.

Each represents different operations/interactions we can make to a database.

Get Request

To make a request to a server or an API we can use something called fetch.

When we are dealing with data on react we usually set this data to state.
let's say we have a fetch get request :

 useEffect(()=>{
    fetch("http://localhost:8000/data") 
    .then (response => response.json())
    .then( data=>{ setData(data)})
},[])

fetch returns a promise. A promise is a representation of an asynchronous calculation.

We see before the last line that we send data to State. This will keep our data deposit for easy retrieval.

What's the next thing from here On Out?

once we get State we can send data to any child component in need of it since we are lifting state.

return(<Child data={data}/>)

Let's also set up a function so we can retrieve data from another child component

function handleChildData(formData){   
 setData(formData)   
}

<SecondChid OnParent={handleChildData} />

This way we could implement inverse data flow. The second child sends data up to the parent.

Our second child happens to be a controlled form :

function SecondChild({onParent}){

const [name,setName]= useState("")
const [email,setEmail] = useState("")
const [date,setDate] = useState(“”)
const [img,setImg] = useState(“”)

function handleSubmit(e){
   e.preventDefault()
   const formData ={
       name: name,
       email: email,
       date: date,
       img: img
}
    onParent(formData)
}
<form onSubmit={handleSubmit}> 
        <div>
         <input  type="text" name="name" value={name} onChange= 
          {e=> setState(e.target.value) } placeholder="Name"  />
        </div>
        <div>
          <input  type="text" name="email" value={email}onChange= 
            {e=> setEmail(e.target.value)} placeholder ="Author"/>
        </div>
        <div>
          <input type="text" name="date" value={date} onChange= 
             {e=>setDate(e.target.value)} placeholder="Date" />
        </div>
          <div>
           <input  type="text" name="img" value={img} onChange=                                    
              {e=>setImg(e.target.value)}placeholder="Image" />
          </div>
           <input type="submit" value="Submit"  />
        </form>

}

The controlled form will keep track of the input value a user inputs and update the assigned State for each of them. Then we can package it in a object and send it up towards the parent component.
Then update State with our child's data.

function handleChildData(formData){   
setData(formData)   
}

Since we have the data on the parent component we could, as usual, do a POST request so the original data and update it with the new one.

function handleChildData(formData){   
   fetch("http://localhost:8000/data",{
      method: "POST",
      headers: 
      { "Content-Type": "application/json" },
      body: JSON.stringify(formData
      )})
    .then(r=> r.json())
    .then(dat=> setData([...data,dat]))
}}

or perhaps a Patch request

fetch(`http://localhost:8000/data/${item.id}`,{
  method:"PATCH",
  headers: {
    "Content-type": "application/json",
  },
  body:JSON.stringify(
    {
      name: “Goes By” + name ,
       email: “the email is” + email,
       date: date + 1) }
   )})
  .then(r => r.json())
  .then((updatedItem)=> (console.log(updatedItem)));

A Patch request updates or changes some data we already have in the database. Not to be confused with a Post request which adds or creates data unto the database.

We also have a Delete request which will be The D in CRUD. The delete request is to eliminate data on the database:

 fetch(`http://localhost:8000/data/${item.id}`, {
      method: "DELETE",
    })
      .then((r) => r.json())
      .then(() => onDeleteItem(item));
  }

In this article, we have gone over some of the most common practices for handling and transferring data In React. I hope This was found helpful.

RESOURCES:
Flanagan,D.(2020)._JavaScript The Definite Guide: Master the World's Most-Used Programming language.
https://developer.mozilla.org/en-US/.

Playing With HTML Elements: Issues That Might Arise While Listening to Form Elements and fetching data.

valera2022 — Tue, 10 Jan 2023 03:04:45 +0000

Solving refresh issues with submit events.

Preventing the refresh default action of a Submit event might sound straightforward but as I have found out it is not as intuitive as it might sound.

Let’s start with some basics. What is an event?

The Web Browser fires an event when something happens to the page. Be it when you click, submit, hoover, etc over something.

In Javascript, The syntax of an event has three main components ;

Event target: The target is the HTML element to which we point the action of the event.

Event type: This is a string that defines what kind of event we are using. Be it “click”,”keydown”,” submit”, “focus”, etc.

Event handler: It is a function that responds to an event. This function is invoked by the browser. This gets triggered once we make contact with the event target.

Having this down, let’s start with the problems:

You are not looking at the big picture type of issue.

Given the below form:

<div id ="container1"> 
    <form id = "inputs" ><input id = "search"type = text label = "name" >
        <input id = "sub" type = submit label = "submit ">
    </form>
   </div>

If my intention was to add a submit event to this form, the intuitive thing will be to grab the Submit button:

let submitBtn = document.querySelector(“#sub”)

So when I click on the submit button the Event will trigger and our handler will cancel out refreshing the page with preventDefault().

submitBtn.addEventListener(“submit”, event => 
     event.preventDefault())

It will not work this way.

What is the issue?

The browser's default action of refreshing the page is targeting the form itself, not only the button.

We need to target the whole form.

let formulario = document.querySelector(“#inputs”)

formulario.addEventListener(“submit”, event => 
  event.preventDefault())

Problem solved!

Solving an issue with fetch and form data.

Now that we have the refresh of the form solved we might encounter some minor headaches while trying to use the text input of the form.

But first, let’s go back to basics.

_what is an API? _
It stands for Application Programming Interface. Basically, it is data from other people/companies that the public is given access to.

This data is usually packed in Json.

what is JSON?
It stands for JavaScript Object Notation.
JSON is a form of data format which is largely used on the web.
Ex of JSON format:

 `
    {{% embed  %}
        "name":"Penguin",
        "imageurl":"https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fcdn.roaring.earth%2Fwp-content%2Fuploads%2F2016%2F03%2FMagellanic_penguin_Valdes_Peninsula-Photo-by-longhorndave.jpg&f=1&nofb=1&ipt=ce483fcdf5447fffef6460a3054096805e8546f89cd919fcb08f98bc4b6d18d2&ipo=images",
        "description":"are a group of aquatic flightless birds. They live almost exclusively in the Southern Hemisphere",
        "donations": "0"
    },

    {
        "name":"Bald eagle",
        "imageurl":"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Furbanraptorconservancy.org%2Fwp-content%2Fuploads%2F2019%2F03%2FBE3g.jpg&f=1&nofb=1&ipt=f966af2a73c049b28f680a28877b6271aeffe1f3447aebaeecf31c51333222e3&ipo=images",
        "description":" a bird of prey found in North America. ",
        "donations":"0"

    },
    {
        "name":"Red bird of paradise",
        "imageurl":"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fc2.staticflickr.com%2F8%2F7239%2F7188557664_1230086a7b_b.jpg&f=1&nofb=1&ipt=56253f9696e04f2990ed10501f36a090d38a456bc0f0af85938d85bb337ee5d1&ipo=images",
        "description":"up to 33 cm long, brown and yellow with a dark brown iris, grey legs and yellow bill.",
        "donations":"0"

    },
    {
        "name":"Snow Leopard",
        "imageurl":"https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fidsb.tmgrup.com.tr%2Fly%2Fuploads%2Fimages%2F2020%2F05%2F25%2Fthumbs%2F800x531%2F37398.jpg%3Fv%3D1590571602&f=1&nofb=1&ipt=96668444752a472d250a282bd208ce016ad1645ef96a8b275a47c3de95360c92&ipo=images",
        "description":"native to the mountain ranges of Central and South Asia. It is listed as Vulnerable on the IUCN Red List because the global population is estimated to number fewer than 10,000",
        "donations":"0"

    }

`

What is a fetch request?

It’s a method to retrieve data from the net. We retrieve JSON data with this method.
Example :

function getData (){
            fetch(URL)
            .then(response => response.json())
            .then(data => {
                console.log( data ))

You are looking at the elephant from afar type of issue.

Let us say we want to fetch some data with a user's input.

we can start by getting the form input text element.

<form id='forms'>
      <input id='searchit' type='text' name='search'>
      <input id="sub" type='submit' name='submit'/>
    </form>

let texto = document.querySelector(“#searchit”)

We could send it over to fetch with :
getdata(texto)

assuming:

function getData (input){
            fetch('https://soemwhere.com/nothere/${input}')
            .then(response => response.json())
            .then(data => {
                console.log( data ))

as you see we do some interpolation to inject input text in the fetch request

fetch('https://soemwhere.com/nothere/${input}')

This will not work as intended.

What's the issue?

we are targeting the text input alright but the thing is we are actually grabbing the element itself:

<input id='searchit' type='text' name='search'>

What we really want is the value of whatever the user writes in the input type text

So instead of this :

getdata(texto)

We will do something like this:

getdata(texto.value).

In this case, I want to focus on the elephant's writings instead of the whole elephant.

Problem solved!

These issues are not as difficult once you see them, but in my learning experience as a beginner, issues like this will trip you over and make you spend a lot of time in your code because you missed them.

RESOURCES:
Flanagan,D.(2020)._JavaScript The Definite Guide: Master the World's Most-Used Programming language.
https://developer.mozilla.org/en-US/.