Sourdough Tracker: a primer in content management and website construction
Our second project for the Flatiron school involved constructing a simple website that functions as a Content Management System. Like many others, I’ve gotten back into baking sourdough during COVID and thought it would be handy to build a website that keeps track of your sourdough recipes, ingredients, and bakes. I learned a good bit while building all this out, and found the process of discovery, trial, and error to be rather enjoyable.
Active Record, Sinatra, and Corneal
In many ways, this project was extension of my previous program Taco Town, but with the added ability to persist data between sessions and display it all via a web page. But it took me a full week to build the CLI, how was I supposed to build out all those extra features in the same amount of time?
Enter ActiveRecord, an amazing gem that automates your interaction with a database and allows you to dynamically generate models, in the form of Ruby classes, based off of its schema. I used metaprogramming to define the getter and setter methods of my classes in my previous project, and ActiveRecord does something very similar (though it uses the schema of database as a reference instead of a hash returned from an API). It even allows for quick and easy associations, with metaprogramming commands such as has_many , belongs_to , etc.
Sinatra handles the controller and view aspect of webapp, running the user requests through some server logic (the controller part), interfacing with the ActiveRecord models to retrieve the requisite information, and then dynamically inserting it into an HTML template (the views). With ActiveRecord and Sinatra together, you can throw together a website, with server logic and a database to persist data, in a relatively short amount of time. Pretty cool!
Corneal was the most exciting program of the three for me to use, if only because it was written by a prior Flatiron student. While Sinatra and ActiveRecord have amazing capabilities, they require you to construct a specific filestructure in order to properly function. It’s relatively simple, but does require a lot of repetitive typing if you’re to do it manually. Corneal automates all of that, allowing to you to quickly scaffold the folders and filepathes needed for ActiveRecord and Sinatra to properly communicate with one another. These three programs really demonstrated to me the power of metaprogramming and how quickly you can add layers of abstraction to a program once you automate away any repetitive behavior.
Models and Database schema
My first task was to determine the general structure of my app, so I could build out my database’s schema. I knew I wanted multiple ingredients and recipes, with each ingredient having many recipes and each recipe having multiple ingredients. This required a third model acting as a join table (which I creatively named recipes_ingredients). Then I realized I’d need an additional model to keep track of the baker’s percentages. Finally, I added in a model to keep track of various Bakes, with each bake belonging to a recipe and having multiple steps.
Thanks to ActiveRecord it was relatively simple to implement this schema in the database and build out the associated models, and corneal even helped scaffold out the file structure to make it even faster.
HTML and Bootstrap
By far the most difficult part of this project for me was the HTML. I had some prior experience with HTML, but hadn’t worked with it in a number of years. It took a while, but after a few hours I began remembering some of the old conventions I had learned and was soon quickly building out the different pages, with forms, tables, buttons, navbars and more.
I used Bootstrap to improve the look of my website. Bootstrap is a free online CSS repository that I had used in the past, with extremely helpful documentation. With Bootsrap I was able to make a website that was not only functional, but also looked halfway decent!
I learned quite a bit building out this project, and really enjoyed all the small challenges I found along the way. Below is a video demonstration of my app in use. Feel free to take a peek at the github repository as well. Looking forward to future Flatiron projects!
