DEV Community

Cover image for Frank's Sinatra
Barrett
Barrett

Posted on

Frank's Sinatra

During my time in Phase 3 at Flatiron School I began learning how to build out my own API to use on my front end application. In order to get our front end synced up with our back end when fetching this data that you've created using the Ruby framework. There is a handy dandy Ruby gem(Sinatra Gem) you can implement into your ruby gem file in order to be able to access your data.

So Sinatra allows us to connect our full CRUD actions both on the front end and the back end based on how exactly we want to manipulate our data.

What are CRUD actions? CRUD actions are operations that do the following things.

C - Create

Create allows you to Insert a new object into your array of data on the back end.

R - Read

Read allows you to pull your data from the back end so you can slap your data onto your application so that your user is able to see that data.

U - Update

Update allows you to pull a specific key from an object in an array and update that specific key. You can also update multiple keys as well.

D - Delete

Delete allows you to erase an object within your array inside of your back end API.

All of these CRUD actions persist on your backend database.

GET request

So let's say we have a database with an array of video games. This is how we would be GET that information to our front end and order it by title of video game alphabetically using Sinatra.

Image description

So here we are using a get method on line one and getting all of our video games. Then we are parsing our video games to JSON on our third line which allows us to fetch it on our front end of our application.

POST request

Now let's say we want to add a new video game. This is how we would write that CRUD action.

Image description

For this one we had to right post set the link to "/video_games", add a do block and create a new video game taking each specific key using "params" to allow us to access each key in order to create a new object for the video games array in our back end API.

DELETE request

Now the last one we are going to go over is the delete method and in order to delete a video game from our video games array here is how the code would look.

Image description

So we take our video games by a specific ID in the first line of code. Then find the video game by its ID. Then we destroy that specific video game after finding that specific video game by it's ID.

Conclusion

This will help allow you to fetch your data as well as manipulate it on your front end after getting it synced up on your back end using the Sinatra Gem. Now go try it out for yourself!

Top comments (0)