gotro

Week 6 at Flatiron bootcamp is project week.

For this project we used Rails for our back end, written in Ruby. We followed the MVC architecture pattern and was conscious to use RESTful routes while demonstrating all CRUD actions.

This is the third of three posts about my Mod2 project at Flatiron school where my partner and I created an app called CardFlash.  Today I’m covering Hashed Passwords and Sessions. 

Hashed Passwords

After building out the login page I was a little disappointed. The only field I provided was for a username. I mean, whats the point of having a personal username if anyone could just sign in and use it?  

Time to figure out Hashed passwords. 

1. Add bcrypt gem to your gem file. 

https://rubygems.org/gems/bcrypt/versions/3.1.12

2. Add password_object to your user table. In console:

rails g migration add_password_digest_to_users password_digest:string

3. Add has_secure_password to your model.

While you are in your model, why not add some validations?

After that, in your login form, you can now add  :password and :password_confirmation keys. 

Cool. Test it out... you should be good to go!

Sessions

1. in the application_controller, add the following methods:

helper_method :current_user 

sets up :current_user as a helper method so you can use it in a view. 

before_action :current_user

before anything is done in this controller, :current_user will run. By putting this in Application Controller, :current_user will run before any method in any controller that inherits ActionController (which is basically all of them!)

This is how you are able to call on current_user from any model, and thus able to access user information from anywhere on the website. 

Want to see some screenshots of our final site????????? 

CHECK IT OUT!!!!  (we made this near easter so check the sweet colors)

/home

/collections

/flashcards

/User/id

/signup

/login

flashcards/new

collections/id

collections/new

flashcards/id/edit

There is no page for destroying a card... but you can do that too!

Thanks!!!!

~~~~~ EASTER EGGS~~~~~~~

custom tags

bootstrap styling

css stylesheet 

footer with links to our blogs

~~~~~~~~~~~~~~~~~~~~~~~~

Week 6: project week

Recap: 

In my last post I walked through the planning process for our app. This post will be focused on the coding portion of the process. The fun part!

First, we did the following:

Created a new rails app called CardFlash

Used “rails g” to set up all models, controllers, and basic view folders. 

Set up basic routes in routes.rb file. 

Set up repository on Github.

Finally, we split the work up (using our punch-list) so we could push forward without stepping on each others toes. 

My focus for this project:

Seed

API integration (https://opentdb.com/api_config.php)

Build out User Controller

Secure Password hashing

Sessions

some Bootstrap (ew) and CSS

GO TIME!

Seed/API

The plan was to seed our database because we didn’t really have use for an API for this app. So to start I quickly set up some users using Faker. 

8.times do    User.create(username: Faker::Movies::HarryPotter.unique.character)  end

Our instructor suggested that using an API would be good practice so I decided to call on one to seed for some practice. 

We used https://opentdb.com/api_config.php, which is an open trivia api. You don’t need a key to access this api so it was pretty straight forward to integrate. Flatiron has pretty great basic instructions that I followed to make this connection, although I relied on them much less this time compared to the first project. 

Do not copy this code!!!! This does not account for the token properly. Note that the token is a url that points to where the actual token is, and it is not the actual token. So when you pass it in to the query method, it isn’t sending the correct information. 

Tokens for this api are used so you can make larger calls with one request, so for seeding my project it wasn’t needed. If this api were to be used to make calls throughout the application I would need to fix it. 

Here is a seed that calls the api:

User Controller

For the next several steps I worked from the User controller. To start I knew I would need most of the methods for User. After making sure the resources were set in routes.rb, I made sure I had boiler-plate index, show, new and create methods as well as index, new, and show views. 

I quickly ran into an issue. We designed the index page to have two forms, one for signing up, and one for logging in. In theory that sounded nice, but in practice it felt really inelegant and unintuitive. 

So I asked my BFF for help...

I found a solution that made sense and had some pretty good instructions for setting it up. (credit: Ruby on Rails Tutorial by Michael Hartl) It was an old edition so some things didn’t work correctly, but it was still a great guide and I learned a lot using it. 

Basically, I set up some new views; /home, /login, /signup. That way I could redistribute some of tasks into smaller sections with the additional benefit of a more readable path for the user in the browser. Cool!

Week 6 at Flatiron bootcamp is project week. 

For this project we used Rails for our back end, written of course in Ruby. We followed the MVC architecture pattern and was conscious to use RESTful routes while demonstrating all CRUD actions. 

Dang... We’ve learned a lot in a few short weeks...

My partner Jack and I tossed a few ideas around for our project and landed on a studying app that allows users create flashcards  and store them in custom categories. 

She and I study together pretty regularly already, so this was a great opportunity for us to build something that we may actually use in future study sessions!

Step One: Map tables and relationships. 

- A User has many Collections

- A Collection has many Flashcards through CardCollections

- A Flashcard belongs to many Collections through CardCollections

- A user has many flashcards through UserCards

- Flashcards belong to many Users

we also started with two more tables for adding tags, and although we built the relationships, implementing them became a stretch goal. 

- Flashcards have many Tags through TaggedCards

We created this visual to help map out the relationships:

(we started with a third person, Alex, who sadly was unable to participate due to an internet outage)

Whew! Step one complete!

Step 2: Map views paths. 

At first glance this seems pretty simple to map out, but it’s not. It gets complex fast. 

From which viewer does the user begin? Where do they need to go next, and how do they get there? As the the user navigates the app, what information do they need at that page and how do we make sure they have it? 

Do we want to give users a list of things they can do, guide them through their options, or some mixture of both? 

( If a user is creating a flashcard, do they need to have access to their personal collections? What about global collections? What about other user information or other users flash cards or collections? Do they need any of this information when they are creating a collection?....how do you organize the information on each page? ...  etc)

To start, we choose which view our users would land. We mapped out the responsibility of this view page and listed all of the pages to which it would link. Then we moved to the next view and the next, and the next. 

We methodically mapped out each path to it’s end and circled back to make sure we terminated all paths. 

We didn’t stick to it 100%, and the list evolved as we used it becoming a running punch list for the project and giving us some global scope of how quickly the project was coming along at a quick glance. 

Here is a snippet showing  a couple views:

With this done, we can now move on and start coding!

I am working on a problem where I am asked  to count complete sentences in a string, and I am given the hint that I should split them on the punctuation characters. 

Splitting by “. “ alone is easy. 

but what if I need to split a sentence like this?

"This, well, is a sentence. This is too!! And so is this, I think? Woo...".

A quick google leads me to regexp. Here is how the documentation defines regexp:

A Regexp holds a regular expression, used to match a pattern against strings. Regexps are created using the /.../ and %r{...} literals, and by the Regexp::new constructor.

Cool, ok. Finally I will start to get an understanding of what all these slashes are that I keep seeing in parameters! (I’m looking at you,  (/[\s,']/))

Here is what we learn about regexp makeup and syntax.

/.../  #=>   regexp

  |    #=>   OR

  \    #=>  escapes characters (in this case, \. , \? , \!)

soooo this is saying

>look at self, which is the string given in this instance.

> split it using regexp by . or by  ?, or by  !  

Cool!!! that splits our sentences up! but wait, it’s not working on it’s own..

"This, well, is a sentence.” “This is too!! And so is this, I think? Woo...".

That blasted !!

ok, let’s delete it!!

Whew!!

Sources:

https://ruby-doc.org/core-2.4.1/Regexp.html

https://www.youtube.com/watch?v=sa-TUpSx1JA

It’s fitting that pipes equal looks like a duck, because I have been talking to one quite a bit lately trying to understand ||=‘s strange behavior. 

For instance, the problem I am reviewing now I have the following method in a class instance:

Ok.

After first pass over I wonder how the heck am I shoveling  into a hash? (I’m not)

Secondly, what kind of sorcery is ||= doing?? Let’s ask our bff, PRY.

Wait, what the what ?

roster [grade] ||= [] 

returns  roster[grade] = [ ] ,  a key value pair.  Ok! ... but how? 

roster[grade] ||= [] 

roughly translates to 

if defined? roster[grade]  roster[grade] || roster[grade] = [] else  roster[grade] = [] end

If the grade exists, then add the student to the array of student names. 

If the grade doesn’t exist, create it with an empty array as the key, then add the student name to that array. 

Cool!

The resources that helped me understand this use of  ||=

https://www.tutorialspoint.com/ruby/ruby_operators.htm

While I am getting a tiiiiiny bit better at using google as a tool for editing, I am no where near using it the “140 times per day” suggested on D1 of class. 

I’ll have to work on that. 

This is a quick guide to some googling tips and tricks.  yay! 

>> Quotes 

Putting search parameters in quotes tells google to search for the whole phrase. 

> "thanks, i needed a horse blanket”  #=> Army of darkness results

> thanks, i needed a horse blanket #=> videos about blankets for horses

>> Brackets 

Results include all keywords in the brackets

> [mac union math] #=> how to make math symbols on your mac

>> Hyphen

Adding a hyphen removes keywords from results. 

> mustang -car 

>> Asterisk

Use a filler for when you don’t know a keyword. 

> never * give you up

>> OR

lets you search for multiple words or phrases

> “a ||= b” OR “ruby ||=“

Flatiron software engineer immersive day3:

> Ask at least two questions during lecture

> Talk to someone I haven’t met yet, bonus for someone in a different cohort!

Day one  at Flatiron School was all about setting up our environments and interacting with Github for the first time. 

Forking and opening labs into my own environment feels like a lot of information to remember, so hello list!!

---- ----

>>Fork, Clone and open labs:

> Click the fork icon. If your username is in front of the content forked then you are doing it right. 

> Click the green “Clone” button. Make sure it says “Clone wit SSH”. If it doesn’t, switch it over!

> Copy the file path. 

> Open Terminal. 

input #=> cd /Development/code

input #=> git clone file path 

>  cd to the newly created file

input #=> learn open

***** BONUS ***** 

Thanks for the tip Robert!

crtl ~   #=> opens terminal in VSCode

opt click #=> the readme to open a window with readme

shift command v #=> to translate window into readable