Making Website With Sinatra Framework

Alex Okarkau
5 min readDec 31, 2020

Being a student at Flatiron Bootcamp is very exciting! In the second module, we were learning Sqlite3 to operate on databases, ActiveRecord framework that manipulates data in database using ruby language, and Sinatra framework that allows you to host a web app and add a bunch of routes to it.

After completing the second module it’s time for a project which is to build your own Sinatra web application. Honestly, I couldn’t wait to get it going, but you need to make sure that you absorb all of the materials provided to you before you dive in, otherwise, it will be very challenging not to get lost as your app is growing and you can implement all of the functionality that is required for this project. I wanna share with you my approach and the experience I had building this web app.

Step 1. Coming up with Idea

In this project, you are not limited in expressing yourself and should choose something you know or like so it will be more interesting for you to develop. Of course sometimes what you had in mind doesn't meet the requirements of this project because it requires a certain degree of complexity. Keeping that in mind I’ve decided to make a social network app, very much Facebook-like but the kind of Facebook that was 10 years ago, a very simple and basic network where you can find people, make friends, and post messages on your wall.

Step 2. Developing a strategy

This is one of the most essential steps in developing an app if you ask me. Your strategy will help you to stay on track with developing and make sure you won’t get lost. For me, personally, it easier to understand when you visualize it, so I did draw a little plan that looked like that:

It sure isn’t perfect but at the end of the project, I’ve made only one adjustment to my original plan, which preserved the idea of engagement and just changed the model from many-to-many relationship to self-join table. With that being said, a good strategy will carry you thru your project to success.

Step 3. Setting up repository

Sinatra app repo includes lots of files and folders and the first time you’re trying to set it up it is a bit overwhelming and you can get easily confused. I used the Corneal gem to set up a skeleton for my Sinatra project. This gem is a gem in the sense that it does all the work for you setting up the structure and when everything is locating where it should be. You can check the Corneal gem description right here.

Step 4. Migration

This is the first thing I do when I begin coding. My favorite shortcut for schema manipulation is rake db:create_migration NAME='action’ where ‘action’ is what is your migration gonna be used for, like ‘create_users_rable’ or something like that so you know its purpose. When you are done setting up your schema don’t forget to run rake db:migrate to make sure your schema is set or up to date.

Step 5. Models

Now it’s time to set up your classes so ActiveRecord can help you out creating associations between classes and database. ActiveRecord does so much for you and it worth doing some reading about it to explore its full potential. My challenge with it was my ‘Friends’ class that I wanted to figure out how to properly set up relationships. When the ‘Post’ class is pretty straightforward and User has many posts and Post belongs to a User, the only option for my friendship class was a many to many relationships. After doing research on that subject I have found a new ActiveRecord feature of self-join tables that creates associations between two instances of the same class through the other table. Not gonna lie it took me a while to understand the concept of it but when it clicked I realized how great it is and how much potential it has. In my example, I had a user table and friends table that has only two columns which is ‘sender’ and ‘receiver’ that contains the IDs of users and their relationship so I can track who’s requesting friendship and who’s accepting it.

In my Friend class, I’m declaring that Friend instance belongs to a sender and receiver that are both instances of a User class.

In User class setup is getting a bit more complicated and confusing. It creates associations between instances of User class using a foreign key in the friends table. It is essentially a many to many relationship.

This set up will allow you to do this:

Step 6. Controllers, Routes.

Here you gotta make sure that you have all of the routes set up to accommodate CRUD functionality — Create, Read, Update, Delete.

To use the patch and delete routes don’t forget to add use Rack::MethodOverride in your config.ru so Sinatra will catch the post requests and reroute them to patch or delete as long as you have one of those lines in your form:

with a value being either “patch” or “delete”.

Conclusion

The erb files that will be containing your HTML and ruby all together will vary depending on how you want your website to look like. The important part is to understand ActiveRecord and what it does for you, it sure looks like a magic but it is not, when you make friends with it that’s where all the magic will take a place, and that place will be your web app so good luck!

--

--