DEV Community

Bessy Clarke
Bessy Clarke

Posted on

Sinatra knows this ditty.

Two projects down, three more to go! My time in this program is flying by! For this project, we were asked to create a web app using Sinatra. After working in the terminal during the first phase of Flatiron's program, I was looking forward to working in the browser. Our app should let users signup, login, and log out. It should also take in user data and save it into a database using SQLite, and using the RESTful routes, create an app that applies the principles of CRUD (create, read, update, delete).

I decided to make a simple web app that lets users keep track of how their skin feels, what skincare products they're using, and leave themselves a quick log with any concerns, general comments, or just words of encouragement. I was inspired by my own skin woes and felt like I could have used an app like this when I started my course of treatment with my dermatologist. I called my site, DermaLog.

I originally planned to build the structure of my project from scratch, but I ran into some issues connecting my database early on. Enter the Corneal gem. This gem created my project structure and connected my application to a database instantly. I spent a lot of time attempting to do it from scratch and this gem cut that time down to a literal thirty seconds! I will now and forevermore use this gem for any future Sinatra projects.

To organize the structure of the application, I used the Model-View-Controller pattern, which the corneal gem built out instantly. This allowed me to keep to the separation of concerns and make sure that all my files pertained to one task. My model folder holds my classes for a user and another for a "log". This is where the classes that create my instances are stored. I needed to create a new instance of a user every time someone signed up and an instance of a log, every time the user wanted to create one. The views folder holds all the files that correspond to the different in-browser views my user will interact with. It is where all the HTML and CSS live. The controllers hold all the logic behind my routes. They essentially control the flow of my app.

To start I created two databases. One to store login credentials for my users and another to store my data being submitted via my log form. I associated both tables with one another by using activerecord's associations. Active Record comes with macros that make associating both our tables so simple. By inserting the belongs_to and has_many macros, and creating a column for a user_id in my 'logs' database, I was able to associate each log to a user and have that data belong to the user.

class User < ActiveRecord::Base
    has_secure_password

    validates_presence_of :name, :email, :password
    validates :email, uniqueness: true 

    has_many :logs
end 

class Log < ActiveRecord::Base
    belongs_to :user
end  
Enter fullscreen mode Exit fullscreen mode

Active Record also comes with macros that let me validate the email and password my users enter. It prevents my users from creating multiple accounts associated to the same email, or ensures that all users input the correct login details. Look at me! I built my first working login!

As mentioned previously, one of the requirements was to use the RESTful routes convention. Learning this really improved my understanding of how the internet works and how pages in an application are connected to one another. I feel like I can better picture how a site like Tumblr, or even Dev can be built. Obviously, they have far more complexity than what I've built, but I can see how these routes form the bones of a much larger application. I can even see how with the basic structure I've already built, I can add on to turn DermaLog into an application with a lot more functionality and features. Alas, a week is too little time and I do feel like most of my learning happens when I tackle my projects. The program is moving fast and as much as I would like to add way more features now, I've built a minimum viable product that works. I am definitely looking forward to adding to this one at the end of the program.

Top comments (0)