I would have to say that finding a topic to base my Sinatra app on was one of the more challenging parts to my project with Flatirons. Maybe it was because i had forgotten about the Minimum Viable Product or MVP for short. So with that in mind now, i went back through the project requirements and decided on what i wanted my app to be about. Then i got to thinking and not to long ago, i fell in love with playing all sorts of games with family and friends. And no Im not talking about video games, Im talking about group games such as Sequence, Ticket to Ride, and a whole lot more but that was the issue. I’ve played so many games that i had troubles remembering what game we played and how many people could play it. Hmmm, i think i found what my Sinatra app was going to be about. A place where a user could sign up and be able to store their games and have easy access to them. Thats when i got to work by first checking out the schools requirements for the app.
I used a wed application structure know as MVC. What is MVC you might ask, well in Sinatra MVC stands for Model, View, and Controller. Think of the M or Models as the place where data from the database is presented. This is where i wrote my classes for both my Game and User class and to make things easier, my classes inherit from ActiveRecord::Base to have the needed relationship with a database.
The V also know as the View is whats responsible of gathering the information from the Models and arranging them in a way that is more pleasing for the user. So think of the view as the front-end of our web app.
With Sinatra the views are written as .erb files which stands for embedded ruby. As I’ve stated before, they are for the front-end of the web app so this is where the HTML and CSS codes go but the awesome thing is you can also use actual Ruby inside as well. Here I’ll show you:
Might not look like much at first but there is a mix of HTML and Ruby inside of this show.erb that is used to show the information like Title, Genre, Rating, and Number of Players that have been saved to the database. If we look at this bit of code inside the actual webapp it will look like this:
It’s pretty cool how you can turn HTML or CSS code and make your website look awesome.
But you wouldn't be able to have your web app run the way you want it without the C or Controller. The Controller is responsible for relaying data from the browser to the application, and from the application to the browser. The controller is where you write out all of your HTTP method/verb such as GET, POST, PATCH, and DELETE. Without these route requests the web app would not work at all. For instance, In my web app if you visit localhost:9393/signup you are greeted with this page:
This snippet of code is whats responsible for all of that. When you visit that URL request, the Controller will pick up on the request that the user sent and it will match it to a route we have coded in. Once the controller finds a match, it will execute the block of code inside the do and end. The first thing the program does is checks to see if the user that is making this request is logged in (because we don’t want a user to be able to sign up if they are already logged in). Once it passes that method, the controller will render in an erb file located in the sessions view. And just a reminder this is what the erb looks like inside of Sinatra:
The two models i used (user and games) have whats knows as a has_many, belongs_to relationship. A user has_many games and a game belongs_to a user. This is key in being able to create a user and giving the user the ability to save multiply games. The user model also has validates and has_secure_password which are an important thing to have. Validates is set to the username and the presence true is telling the program that when a user signs up, there must be a username or else the account wont be created. This protects the user database from unwanted data. The has_secure_password feature works of a ruby gem called bcrypt and what is does is kinda the same as validate in that it wont create a user without a password but it also keeps that password safe by encrypting it. Have you ever noticed when logging into other web apps such as Youtube or Facebook, all your information like your posts and comments are still there. This happens with the help from cookies(and no not chocolate chip cookies). Cookies with the help from a session.
Cookies get stored onto your browser and keep you logged into your Facebook account even when you close your browser and upon returning to the domain, you are still logged in and redirected to your timeline. Persistent cookies allow a website to remember your user information and preferences for future visits. Session cookies on the other hand are similar but instead of being stored in your browser, its stored on the server that runs the website and it keeps track of your movement (from the time of login to when you logout) and keeps you from having to log back in every time you visit a different page on the website. They work together to drastically improve your user experience in a web app. Using these features is also nice when dealing with authorization. In the case of my project, the current user would not have the ability to create or edit a game on another users account because the cookies stored from one user will not match the cookies of another user and just like a password, the sessions must be secured from others trying to gain the information thats held within.
It was quite exciting being able to build a whole web app from ground up, front and back end. If you would like to check out my project you can do so here. Do read the README as it has instructions on how to get it running on a localhost. I unfortunately wasn't able to get my web app hosted yet because of issues after updating to Big Sur 😒. But hopefully it will be resolved soon.