This Week In Bloc Dev Bootcamp


This week I was crazy busy playing catch-up when I got stuck on yet ANOTHER Codewars logic problem. This one had math, Metric conversion, and more math, so yeah, I struggled.

As I approach the end of one Block of the Full Stack Front End Developer track in Bloc (see what I did there?), I thought it would be cool to start wrapping up the cumulative concepts learned building two simple apps, Address Book and a Reddit-type app called Bloccit. And by simple I mean:


What I love about Bloc is that in the foundations portion of the program, you learn not only the foundations of Ruby, but the architecture of a single page App. What is cool about this is that using a sample like Reddit, a bootcamper in the front end learns how to build features of web applications that are used all the time. These cumulative features are interfaces and experiences that an end user will encounter in most apps. Some examples: commenting, posting, creating topics voting, labels and user authorizations.
Full disclosure, I am totally simplifying this and mashing up about 9 checkpoints of info in this post. These are all related to the Bloccit App.

Topics and Posts and Their Relationships

We always want our users to have the ability to post, but how do we organise these posts? This is where topics come in. The interesting thing is, when you have never built this type of app from the ground up, you think this is a simple feature that you can code in 30 minutes, well I did at least.  I have some news, it’s not that straightforward.

In the build, I use rails g to implement an architecture behind the scenes. This involves a few calls to the command line with rails g(enerate) to create Models, Controllers, Specs and Views.

Bloccit

Click to Enlarge

What this does is creates a file tree for me to work from

Bloccit

Click To Enlarge

and generates classes and ActiveRecord::Base as well as Modules and predefined methods based on what I use as arguments in my generator. This is a lot of information in a few sentences but you can read more about it here. These command line calls are your first steps to building a Rails app.
Back to Topics and Posts and their inter-relationships. If you think about your app as if you were an end user (like I always do), a post will need to be related to a topic and a user, and topics and posts will have many comments.

Bloccit

Click To Enlarge

The reason why folks love RoR so much is that Rails does most of the work for you by building these Models, Controllers and Views with “stubbed” methods and you just need to code and make sure to call methods into the relationships.

Bloccit

Click to Enlarge

There are several steps in between, including the very important TDD, I’ll go into more detail on specs at a later date. The take-away here is that the first thing you want to do when building a web app is to think like an end user, figure out what you do with an app as far as user experience and interface and start relating it to how you create your app.

 

Comments and Comment Forms

Forms are a huge part of an application. If you know your HTML you will be very familiar with the form_for syntax and will simply need to implement Alerts in response to your forms and their interface. For example, if a user comments on a post with one letter, you will want an alert to tell that user that they are not meeting the requirements (in this case comment body needs to be 5> characters) to submit a comment. Conversely if a user submits a comment successfully, it is good UX to let them know, “your comment was submitted”.  Here is a type of example where @topic and “Your Topic was successfully saved.” would be  @comment and “Your Comment has been successfully saved.”

Bloccit

Click To Enlarge

 

User Authentication

Again, completely simplifying this but keeping the theme of end-user in mind, Authentications are where you tell your app that certain users, like admins and signed in users, are allowed to perform specific actions in your application. For example, you would want a guest user to have the ability to  see topics and posts, but never delete them as they are not a signed in user. Likewise, you wouldn’t want a signed in user to have the authorization to delete a topic created by a different signed in user as this should only be authorized to admins. Code might look a little like this

Bloccit

Click To Enlarge

Labels

Labels are basically clickable tags. These are the spots in you app where users can label their posts or topics with tag words. Then a user can click on a label and be taken to all topics associated with that label. Pretty cool!

Bloccit

Click To Enlarge

Voting
This is the first place in a Bloc assignment where I have had to write code with actual math in it. I wasn’t stoked about this but, the feature is awesome. The algorithm for this isn’t intuitive, as your first intuition is to have a topic with the most “up” votes at the top of the list. There is, however, a sorting algorithm that you need to keep in mind that sorts by age of post and number of up and down votes. This sorts popularity so that you don’t have a 2 year old topic at the top of your list as the most popular due to it’s default of having the most up votes. Here is what the UI might look like.

Bloccit

Click To Enlarge

I again want to stress that I have completely simplified the cumulative architecture I have learned in the last month in regards to building this Reddit style app. As I move out of the Foundations portion of bootcamp (SOON! like in 2 weeks or sooner) I will revisit these topics one by one in more detail as they relate to my next project- A SaaS Wiki Collaboration tool.

Let me know in the comments what features you continuously see in your favourite apps so I can work on how to code them.

and follow me @codingover40 and consider a donation to my Generosity Campaign.

Have a great weekend!

Leave a comment

Your email address will not be published. Required fields are marked *