Pinterest Rails OMR Flashcards

1
Q

Create new app

A

$rails new app

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

GIT

A

$ git config –global user.name “Mattan Griffel”
$ git config –global user.name
$ git config –global user.email “mattan@onemonthrails.com”
$ git config –global user.email

$ git init
$ git status #shows you what files you are tracking (or not tracking)
$ git add .
$ git commit -am “initial commit”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Create homepage with controllers $ rails generate controller pages home

A

app/views/pages/home.html.erb

<h1>Welcome to my app!</h1>

<p>Sign up here.</p>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

config/routes.rb

A

Replace the line
get “pages/home”

…with the following:
root “pages#home”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Creating More Pages

A

app/controllers/pages_controller.rb
def about
end

app/views/pages/about.html.erb

<h1>About US</h1>

<p>We are working on our One Month Rails Pinteresting app</p>

config/routes.rb
get “about” => “pages#about”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Creating Navigation Links

A

apps/views/layouts/application.html.erb

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Installing the Bootstrap Gem /Gemfile

A
..
gem 'bootstrap-sass'
..
app/assets/stylesheets/bootstrap_and_customization.css.scss
@import 'bootstrap';
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Add Bootstrap Elements To Pages

A
  1. Add a container to your app!
    views/layouts/application.html.erb<div>

    </div>
  2. Create a _header.html.erb partial
    Create the file app/views/layouts/_header.html.erb
  3. Create link to partial
    app/views/layouts/application.html.erb
  4. Add the nav bar
    app/views/layouts/_header.html.erb
  5. Require Bootstrap’s JavaScript
    app/assets/javascripts/application.js

    //= require bootstrap-sprockets
  6. Add viewport
    views/layouts/application.html.erb
7. Add the jumbotron to the Home page
views/pages/home.html.erb
<div class="jumbotron">
<h1>Welcome to my app!</h1>
Click here to 
</div></div>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

Customizing Bootstrap

A
  1. As an example, update the nav bar
    views/layouts/_header.html.erb
2. Add custom styles
assets/stylessheets/bootstrap_and_customization.css.scss
$body-bg: #ecf0f1;
$navbar-inverse-bg: #27ae60;
$navbar-inverse-link-color: white;
$brand-primary: #f39c12;
$jumbotron-bg: #bdc3c7;
@import 'bootstrap-sprockets';
@import 'bootstrap';
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Design Improvements

A
  1. Style updates
    app/assets/stylesheets/bootstrap_and_customization.css.scss

@import url(http://fonts.googleapis.com/css?family=Lato:400,700);

$body-bg: #ecf0f1;
$font-family-sans-serif: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$navbar-height: 45px;
$navbar-default-bg: white;
$navbar-default-brand-color: #c0392b;
$brand-primary: #c0392b;
$jumbotron-bg: white;

@import ‘bootstrap-sprockets’;
@import ‘bootstrap’;

.center {
text-align: center;
}

.navbar-brand {
font-weight: bold;
}
2. Update nav bar with a container
apps/views/layouts/_header.html.erb

<div>
...
</div>

  1. Install Package Control for Sublime Text 2
    Installation Instructions Remember to restart Sublime Text
    Command Shift P
    Package Control:Install Package
    CoffeeScript
  2. Add a “center class” and “log in” button
    /app/views/pages/home.html.erb

<div>
<h1>Welcome to my app!</h1>
<p>

</p>
</div>

  1. Change the main header link from HTML to Ruby
    apps/views/layouts/_header.html.erb
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Going Online With Heroku

A
  1. Login to Heroku
    $heroku login
  2. Add Heroku keys
    $ heroku keys:add
    $ heroku create #creates a new URL for your app
5. Add new gems and groups for Heroku
/gemfile
  group :production do
     gem 'pg'
     gem 'rails_12factor'
   end
  1. After installing new gems, what will you always do?
    $ bundle install –without production
  2. Do the Git Dance
    $ git add –all
    $ git commit -m “bundle install, all ready to push to heroku”
    $ git push origin master
  3. Push to Heroku
    $ git push heroku master #10:54
    $ heroku open #13:30
    $ heroku rename XYZName
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Registering A Custom Domain (optional) 1. Signup for an account at DNSimple

A

We’ve worked out a free 6 month trial with the guys over at DNSimple exclusively for One Month Rails students. Enjoy!
2. Add your domain to Heroku
You can either do this in the terminal, or via heroku.com
Option 1: terminal
$ heroku domains #shows you the domains you have on heroku
$ heroku domains:add omr-pinteresting.com
$ heroku domains:add www.omr-pinteresting.com

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Installing Devise So We Can Add Users

A
Add the Devise gem
/Gemfile
gem 'devise'
$ bundle install
$ rails generate devise:install
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Setting Up Devise

A
1. Default URLs
config/environments/development.rb
config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }
config/environments/production.rb
config.action_mailer.default_url_options = { host: 'http://pinteresting-commits.herokuapp.com/' }
2. Set "Home" route
root "pages#home"
3. Flash message
app/views/layouts/application.html.erb
4. Set precompile to "false" 
config/application.rb
config.assets.initialize_on_precompile = false
5. Install the Devise views
$ rails g devise:views
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Bonus Lesson - Enforcing Strong Passwords

A
  1. Add a format validator to the password field
    app/models/user.rb
    :format
  2. Regular expressions
    Here is the regular expression we are using:
    /\A.(?=.{10,})(?=.\d)(?=.[a-z])(?=.[A=Z])(?=.[\@#$\%\^\&+=]).\Z/
  3. Wow - thats complicated!
    First, we match for at least 10 characters:
    (?=.{10,})
    Next, we match for digits (numbers), using “\d”:
    (?=.\d)
    Then, we match a lowercase alphabet character:
    (?=.
    [a-z])
    And then we match an uppercase alphabet character:
    (?=.[A-Z])
    This code matches a special character. “" character:
    (?=.
    [\@#$\%\^\&+=])
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Generating Users with Devise

A
  1. Generate a User model

$ rails generate devise user

17
Q

New User Signup and Signin

A
  1. Update your Home view
    app/views/pages/home.html.erb

<div>
<h1>Welcome to my app!</h1>

do something

<p>

</p>

</div>

2. Update your header partial
app/views/layout/_header.html.erb
<ul class="nav navbar-nav navbar-right">
<li>
<li>

<li>

<li>

</ul>
</li></li>

18
Q

Pushing Users to Heroku & Migration

A
  1. Do the GIT Dance
    $ git add .
    $ git commit -am “Your Message”
    $ git push
2. Push to Heroku
$ git push heroku master
Q: How do I debug Heroku?
User the Heroku Logs
$ heroku logs --tail 
CONTROL + C # To exit the Heroku Logs 
  1. Migrate your Heroku database
    $ heroku run rake db:migrate
19
Q

Twerking Devise Views

A

Twerking Devise Views 1. Delete the following files and folders
We won’t be using these, so let’s delete them to keep things simple

app/views/devise/confirmations app/views/devise/unlock app/views/devise/mailer/confirmation_instructions.html.erb app/views/devise/mailer/unlock_instructions.html.erb

  1. Update the code for each of the Devise views
    Let’s use Bootstrap to make our Devise forms look better.
    app/views/devise/registrations/new.html.erb
    app/views/devise/registrations/edit.html.erb
    app/views/devise/passwords/new.html.erb
    app/views/devise/passwords/edit.html.erb
    app/views/devise/sessions/new.html.erb
  2. Add an “Account Settings” link to the header partial
20
Q

Generate Pins Scaffold

A
  1. Generate a pins scaffold
    $ rails generate scaffold pins description:string
    $ rake db:migrate #run the migration

app/assets/stylesheets/scaffolds.css.scss
$ rails generate scaffold pins description:string –skip-stylesheets

21
Q

Pins Controller

app/controllers/pins_controller.rb

A

class PinsController

22
Q

Pins Views

A
  1. This is called the “form” partial
    apps/views/pins/new.html.erb

apps/views/pins/_form.html.erb

<div>
<h2> prohibited this pin from being saved:</h2>
<ul>

<li>

</ul>
</div>

<div>

</div>
<div>

</div>
</li></ul></div>

23
Q

Pins Users and Associations

A
1. Set up your associations
A Pin belongs_to a User 
app/models/pin.rb
  class Pin
24
Q

Authorization: Who can? Who can’t?

A
  1. Update the Pins Controller
    app/controllers/pins_conroller.rb
class PinsController 
Or alternatively you could the Ruby "try" method....

(I don’t choose this one, but it’s good to know about)
3. Add devise User authentication
Resource: https://github.com/plataformatec/devise

Add the before_action to your Pins Controller

app/controllers/pins_conroller.rb

before_action :authenticate_user!, except: [:index, :show]
4. Surround the edit link with an “if” conditional
This way you can only see your pins. To put that another way: A user can only see his pins (and not other user’s pins). Make sense?

app/views/pins/index.html.erb


app/views/pins/show.html.erb


5. Add correct_user method
Add the before_action to your Pins Controller

app/controllers/pins_conroller.rb

before_action :correct_user, only: [:edit, :update, :destroy]
6. Surround the “New Pin” link with an “if” conditional
app/views/pins/index.html.erb


Bonus! Helpful commands

$ git add --all
$ git commit -am "commit message"
$ git push
$ git push heroku master
$ heroku open
25
Q

Paperclip ImageMagick Install

A

Download ImageMagick
Windows
http://www.imagemagick.org/script/binary-releases.php#windows

Mac
http://cactuslab.com/imagemagick/

$ identify

26
Q

Image Upload with Paperclip

A

gem ‘paperclip’, ‘~> 4.2’

$ bundle install

/app/models/pin.rb
class Pin  { :medium => "300x300>", :thumb => "100x100>" }
end

$ rails generate paperclip pin image

/app/views/pins/_form.html.erb

<div>

</div>

.

/app/controllers/concerns/pins_controller.rb
def pin_params
params.require(:pin).permit(:description, :image)
end
.
/app/views/pins/show.html.erb

/app/views/pins/index.html.erb

<h1>Listing pins</h1>

Image
Description
User

<br></br>

27
Q

Paperclip to Amazon S3 Images on Heroku

A
/Gemfile
gem 'aws-sdk', ' :s3,
\:s3_credentials => {
\:bucket => ENV['S3_BUCKET_NAME'],
\:access_key_id => ENV['AWS_ACCESS_KEY_ID'],
\:secret_access_key => ENV['AWS_SECRET_ACCESS_KEY']
}
}

Configure Heroku for AWS
$ heroku config
$ heroku config:set AWS_BUCKET=pinteresting
$ heroku config
$ heroku config:set AWS_ACCESS_KEY_ID=GET FROM AMAZON AWS
$ heroku config:set AWS_SECRET_ACCESS_KEY=GET FROM AMAZON AWS
$ heroku config