Pinterest Rails OMR Flashcards
Create new app
$rails new app
GIT
$ 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”
Create homepage with controllers $ rails generate controller pages home
app/views/pages/home.html.erb
<h1>Welcome to my app!</h1>
<p>Sign up here.</p>
config/routes.rb
Replace the line
get “pages/home”
…with the following:
root “pages#home”
Creating More Pages
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”
Creating Navigation Links
apps/views/layouts/application.html.erb
Installing the Bootstrap Gem /Gemfile
.. gem 'bootstrap-sass' .. app/assets/stylesheets/bootstrap_and_customization.css.scss @import 'bootstrap';
Add Bootstrap Elements To Pages
- Add a container to your app!
views/layouts/application.html.erb<div>
</div> - Create a _header.html.erb partial
Create the file app/views/layouts/_header.html.erb - Create link to partial
app/views/layouts/application.html.erb - Add the nav bar
app/views/layouts/_header.html.erb - Require Bootstrap’s JavaScript
app/assets/javascripts/application.js
…
//= require bootstrap-sprockets - 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>
Customizing Bootstrap
- 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';
Design Improvements
- 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>
- Install Package Control for Sublime Text 2
Installation Instructions Remember to restart Sublime Text
Command Shift P
Package Control:Install Package
CoffeeScript - Add a “center class” and “log in” button
/app/views/pages/home.html.erb
<div>
<h1>Welcome to my app!</h1>
<p>
</p>
</div>
- Change the main header link from HTML to Ruby
apps/views/layouts/_header.html.erb
Going Online With Heroku
- Login to Heroku
$heroku login - 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
- After installing new gems, what will you always do?
$ bundle install –without production - Do the Git Dance
$ git add –all
$ git commit -m “bundle install, all ready to push to heroku”
$ git push origin master - Push to Heroku
$ git push heroku master #10:54
$ heroku open #13:30
$ heroku rename XYZName
Registering A Custom Domain (optional) 1. Signup for an account at DNSimple
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
Installing Devise So We Can Add Users
Add the Devise gem /Gemfile gem 'devise' $ bundle install $ rails generate devise:install
Setting Up Devise
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
Bonus Lesson - Enforcing Strong Passwords
- Add a format validator to the password field
app/models/user.rb
:format - Regular expressions
Here is the regular expression we are using:
/\A.(?=.{10,})(?=.\d)(?=.[a-z])(?=.[A=Z])(?=.[\@#$\%\^\&+=]).\Z/ - 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:
(?=.[\@#$\%\^\&+=])