How to make a Sinatra web app? My entire planning and coding process.
Day 1: 03/31/21
Hello, there.
On day 1 of my Sinatra web app building process, I’ve decided to keep a detailed diary about starting and (fingers crossed) completing a CRUD, MVC app using Sinatra.
The first step of the process, while deep in Flatiron School’s Sinatra section, was project ideation. In real life, I record everything in my Notes app. So it only made sense to record ideas as they came to be as I finished lessons and labs.
I might come back to these ideas using another web framework but for now, I’ve landed on my choice for Sinatra. ::trumpets, please:: I’m building a Favorite Things tracker.
Here’s the gist…
APP NAME: Remember Me
TAGLINE: A journal of favorite things that often slip from memory.
Users can log into their personal favorite things diary and record anything they want from favorite movies to go-to restaurants.
For me, it’s difficult to know off the bat which models and relationships should be in place. It helps to write out what my user will see on the homepage and what options/buttons they see on each page. This helps me get a sense of what models and methods I’ll need to make the pages come to life.
NOTE FROM THE FUTURE/DAY 3: It’s incredibly helpful having written out what every page would look like to the user.
When feeling zonked on code, it helps to have a rough outline to refer to.
As you can see on the left, it’s pretty bare-bones and nothing fancy.
I can easily refer to my plan for what features I need to add or work on next.
Day 1 total hours spent working on app: 6 hours
While watching: Penguin Bloom, second half of Eat, Pray, Love on Netflix.
Progress: Wrote out plan for all pages/routes, plus notes for controllers and different links I’d like on each page. Created a stubbed out project folder and connected it to a new Github repository. Worked on getting the homepage and layout with yield working.
Day 2: 04/01/21
Good morning! Reporting from the second day of Mission Impossible: Complete Sinatra Portfolio Project.
Today, I’m preparing to create tables and migrations by drawing them out. I plan on using the Faker gem to fill in my db:seeds file so I can play around with my objects and see if they can do everything I expect them to.
I’m used to coding out pre-set associations with the Flatiron labs so I’m just hoping for the best.
Here are the ActiveRecord Associations I’m starting with. If anything changes, I’ll report back.
Day 2 total hours spent working on app: 8 hours
While listening to: Matilda Mann, The Head and The Heart, Phoebe Bridgers
Progress:
- created migrations, tables, classes
- used Faker gem to create fake data in db/seeds
- started simple route connections for homepage, login, signup pages.
Day 3: 04/02/21
Howdy! It’s been a busy morning. I woke up at 6:30 a.m. this morning for an appointment so feeling pretty tired right now. Annnnnd, it’s only noon.
My goal for today is finishing up all my routes and forms so I can spend the weekend refactoring my code as well as making sure that there are Flash messages where they should be. (Yeah, that did not happen.)
Below is a snippet of my progress from yesterday. I was able to submit a new favorite from my web app while logged in as a user. My post ‘/favorite’ do route was successful in accepting my submitted values via params and I was able to create a new instance of the Favorite class that automatically set a user_id (meaning it belongs to a user).
I was also able to create a new Url object that is related to this newly created favorite instance. I believe my associations are working. (The cookie recipe referenced below.)
I had a little hiccup while coding the show page for individual Favorite instances. I don’t think I was successful associating the fake objects in my seeds file.
Using shotgun, I was able to see all my code work with the data I submitted through the create new favorite form in my web app. So I deleted the samples in my seed file and will proceed with user-submitted data (that I submit through forms) to finish my project.
I might go back later on and try and reconfigure the seeds.rb file again to see how I can associate my fake objects. Thinking about it, I’m not sure if it’s supposed to be automatic because of how I’ve built my associations. But in my code, I need to associate them manually in the controller. [Reminder to self to ask the technical coach.]
What’s working so far? I’m able to log in and sign up as a user as well as submit data through my form and create and persist data all the while, spitting it back out later.
Here’s what the favorites index page looks like:
The log out button doesn’t work yet. I’m actually having trouble going in an order that makes sense. What I’ve been doing? Starting shotgun and going through the web app and testing everything from the log in or sign up process. From there, if there’s a missing component, I’ll add it.
Tomorrow, I’ll be tackling the edit and update components of the app, which has historically given me the most difficulty with labs. But with previous labs to reference, I think I’ll be able to do it.
Day 3 total hours spent working on app: 6 hours
Progress: Completing the favorites index view page, the individual favorite show page—plus the delete form on the same page and its corresponding post route—as well as adding flash messages for the best user experience were my big wins for the day.
Day 3: 04/03/21
Happy Saturday! I have a BIG stretch goal of finishing my Sinatra project today. What I have left? Hmm, only the edit and update components of the lab that gave me so much trouble during labs.
But because I’ve had so much trouble during the labs, I’ve had to read lessons over and over again, watch this Avi video twice, and really get down into the values with Pry. I’m hoping my comprehension from the labs will help me here.
Hours later: The edit part of today went smoothly. Now, I’m in the process of displaying the edited data in the patch request. I’m getting all confused with my if, elses, and ends. Eck. I’m kind of confused about what condition to test first. I’m going to write it out in plain English and see if that helps.
This is what I’m going for. There are three layers of if, else, end statements.
I thought it’s what I had above but there’s something not working. I might be missing an end somewhere may for iterating through the params.
I. have. been. on. a. journey. I have no clue what happened—but as I was happily coding, everything started to break. My favorites index page completely broke.
So I did what any newbie coder would so. I entered db:rollback until I couldn’t anymore and then dropped my database and then re-migrated it. I changed the datatype of my Url.link value to “string” in its table because I thought that’s what was breaking my code. It worked. Not sure why it was working for 1.5 days before breaking.
Next big problem: After working on the user login, logout, and signup pages, I realized on the index page, I was iterating through a collection of all the favorites without consideration of who wrote what. Everything was out in the open. My plan for the Remember Me app is for everything a user records to be private. So the next step of business was to rewrite the get ‘/favorites’ do path.
Now, while you’re signed into my web app, you can only see your favorites. (Honestly, I feel like a tired bag of cash right now AKA winning). I managed to fix my favorites index page and the edit/update path.
For now, they’re working. But I’ve realized I’ll need to test so many things to try and break my code before my one-on-one with a technical coach because they will no doubt find a flaw that I didn’t even see coming.
One helpful tip I have for you is…
If you see this error and you are not sure why it’s happening, it’s most likely because you’re trying to iterate through something that’s not an array. Took me forever to remember that! I was trying to iterate through a single instance of a class…LOL long night.
Day 3 total hours spent working on app: Totally lost count but on and off from 11 a.m. to 10 p.m.
Progress: A lot of learning and practice with binding.pry (what a babe), which is always super fun. Perfected the favorites index page and got the edit/update routes working. Huzzah!
Tomorrow: Must figure out why some Flash messages are working and some are not. I triple checked the error names as well as the code on the view pages. I can’t get a set of flash messages to appear on users/login redirects. It’s a mystery.
Day 4: 04/04/21
It’s Sunday morning and my eyeballs have recovered maybe 70 percent from yesterday’s session. My coffee has been drunk and my dog Buffy has been walked…I’m ready to work.
After re-adjusting where some Flash messages go and where to best redirect a user when their credentials don’t work, this is the only Flash message that I can’t get to appear.
My fix is to redirect it to the logout view page instead of redirecting back to the login page.
I’ve been updating the required spec.md file as I approach the finish. I have to add validations to the user to ensure unique login attributes. I don’t think I’ve done that in a lab so I have to figure it out.
I also need to add user input validations. For most of the form inputs, I’ve used the required keyword to ensure no empty fields are submitted.
9:28 p.m. — I think I’ve finished my project! I worked on adding Flash messages where they need to be for the best user experience and added code/validations to prevent users from submitting empty content fields or being able to see another user’s favorites list. I also finished the README and spec.md files in addition to fixing SO MANY bugs. My latest one was trying to get user.urls to work, which should have because of the association I have in place. Turns out, I had pluralized the belongs_to associations in my Url class when they should be singular.
Tomorrow’s to-do list: I need to review my code one last time and refactor what I can. Then I’ll record my project walkthrough and submit my Sinatra Project. Yippee! I plan on adding an addendum after my project review. It’s been fun!
