SINATRA PROJECT FLATIRON

Sinatra Work Order App

My second, less frustrating project

Andrea Jasper

--

Image of a hand pointing to a sprocket with a money icon inside, surrounded by other sprockets and icons with hands shaking, clock, bullseye, graph, and a person.

Have you ever seen the face of a child that’s just seen Disneyland for the first time? That innocent wonder and excitement as they scream joyfully at Mickey Mouse. Their eyes darting from one attraction to the next incapable of deciding where to go first.

Yeah, that was how I felt coming into this project, without the innocence. I’d learned that lesson the hard way when I naively assumed my first project would be easy. What a slap in the face that was!

Wonder and excitement are great, but coding demands a certain amount of respect.

Finding Inspiration

My mind was a chaotic, swirling mass of ideas; all I had to do was reach out and grab one. Easier said than done.

Whatever I created needed to be of use to someone, expandable, portable, and fun to work on, at least for me. That’s when I had the brilliant idea to build an app that could track work orders.

Enter, Work Order Management. I’m still working on the name.

You may be wondering why in the heck did I choose that, of all things.

For me, it was a no-brainer. My husband works in industrial manufacturing, and his company, in particular, uses software that’s little more than a spreadsheet of information. He voices his frustrations, very loudly and regularly, about needing more robust software. As a bonus, it would be great to be accessible by phone and access their database that stores all the documentation for each machine: instruction manuals, schematics, wiring diagrams, and a whole bunch of nonsense that is way over my head.

To build such an app would require time, patience, and a lot of money (come on, everyone wants to get paid for their work). For now, I have to start with the foundation.

Meeting Flatiron’s Requirements

Like my first project, the instructions were lengthy, so to keep this post from becoming a novel, let’s cover the highlights.

  1. Build an MVC Sinatra application.
  2. Use Active Record with Sinatra.
  3. Use multiple models.
  4. Use at least one has_many relationships and one belongs_to relationship on another model.
  5. Must have user accounts and be able to create and modify their content.
  6. Validate uniqueness of user login attribute (username or email).

Way less intimidating to start with those requirements than the requests my husband had. At least these are manageable at my current experience level.

User Experience Is Important

Because I’m a glutton for punishment, I like to create an additional outline, a user flow, if you will, to help me view the big picture — a crucial step in building a project, at least for me.

Maybe this is my Project Manager side kicking in. Perhaps it’s a bit of an OCD habit to write out everything. Either way, I like to know where my project is going from a user perspective.

Seriously. Nothing sucks more than a poor user experience.

  1. The landing page prompts users to log in or sign up on the homepage before being sent to the main landing page.
  2. When a user logs in, the logout button will become available.
  3. There is a create work order button available on all work order pages.
  4. Users can create, view, update and delete work orders.
  5. Users can only access their work orders.
  6. Users can log out of the app.

The Process

Okay, so I have my expectations, databases and relationships, and an outline of the user flow. Time to get this party started!

Initial Setup

As obvious as a streaker at a football game, the next step is setting up my environment.

Something to note, I’m operating under the assumption that you know how to install the framework, dependencies, and any additional fluff you want on your project.

In the unlikely event you have no idea what I’m talking about, here’s the Sinatra website.

File Structure

public/css & js

If you’re like me and have a full-time job, raising a family, and learning through Flatiron, your time is valuable. This is where frameworks can come in handy.

In my case, I like Bootstrap (for now) to quickly build a clean, consistent layout for my app’s view pages without much effort.

File structure for bootstrap framework

DB/migrate

Without a database, your data has no place to call home. At this time, I only need two to make this app work: Users and Work orders.

Image of my database file structure

app/controllers, models & views oh my!

This is the workhorse beneath the hood.

Controllers:

Controllers are like snobby managers, always telling people what to do.

They tell my app where to locate files and what code to executed when, where, and how.

I have an application controller that inherits from Sinatra::Base, while the user and work order controllers inherit from the application controller.

Image of controllers file structure

Models:

Relationships can be a beautiful thing. In my app, it’s a necessity.

My user model has many work orders, you know, so users know what work to accomplish. The work order model belongs to one user, yes, one.

Someone has to take ownership of the work, right?

Image of model folders structure

View:

There’s no point in building an app if there’s no front-end design for users to access. I mean, really, how would they use it if they can’t see it?

With our powers combined….just kidding, I harnessed Bootstrap to create a working design concept, just for fun.

My layout file is the initial landing page that greets users.

To prevent duplicate code, I place the header and left side navigation in the index view since those will persist through each view of the app.

Then, one level down, we find the user and work order files. All the files that visually represent all the hard work done by the controllers.

Image of views file structure

Learnings

Some Frustrations…

Github: Ugh, this was so frustrating. For whatever reason, the repository wouldn’t stay connected or rejected my commits and made me repeat steps I’d done a hundred times.

I feel like Sisyphus, doomed to push a boulder up a hill for eternity only to have it roll back down when I get near the top. Only, I’m pushing code to the repository, and the repository says, “Get out of here!”.

At least it accepts my commits now…

Tests: I am only now beginning to understand how to write tests. Reading and writing them is two very different things for me. I struggled through it to gain a better understanding of it. Not very glamorous, but it worked out.

Coding is still fun!

I started coding because I love to create things, and this project let me tap into that creativity and have some fun.

I enjoyed building it, breaking it, fixing it, and establishing my development and problem-solving flow. Being able to get my hand dirty and see how things work was a fantastic experience.

I can’t wait for my next project!

--

--