Learn to be a rails girl

Han Yi

Q & A

Install Ruby

  1. brew update
  2. brew install rbenv
  3. echo 'eval "$(rbenv init -)"' >> ~/.bash_profile
  4. source ~/.bash_profile
  5. rbenv install 2.4.1
  6. rbenv global 2.4.1

SSL Errors: brew install curl-ca-bundle cp /usr/local/opt/curl-ca-bundle/share/ca-bundle.crt `ruby -ropenssl -e 'puts OpenSSL::X509::DEFAULT_CERT_FILE'`

Install Rails

gem install rails bundler --no-document

Prepare a text editor

Atom, Sublime Text 2, ...

Create a rails project

  1. rails new input_your_project_name_here
  2. cd input_your_project_name_here
  3. rails server
  4. visit http://localhost:3000

Do things like MVC

  1. rails generate scaffold idea name:string description:text picture:string
  2. rails db:migrate
  3. rails server

To be a full stack coder

  1. Find application.html.erb
  2. Find <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  3. Add <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.css"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.css">
  4. Replace <%= yield %> With

<div class="container">

    <%= yield %>

</div>

1.Add below text under <body>:​

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">

  <div class="container">

    <div class="navbar-header">

      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

        <span class="sr-only">Toggle navigation</span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

        <span class="icon-bar"></span>

      </button>

      <a class="navbar-brand" href="/">The Idea app</a>

    </div>

    <div class="collapse navbar-collapse">

      <ul class="nav navbar-nav">

        <li class="active"><a href="/ideas">Ideas</a></li>

      </ul>

    </div>

  </div>

</nav>

2.Add below text before </body>:​

<footer>
  <div class="container">
    Rails Girls 2017
  </div>
</footer>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.js"></script>

 

3.Find application.css and at bottom add:

body { padding-top: 100px; }
footer { margin-top: 100px; }
table, td, th { vertical-align: middle; border: none; }
th { border-bottom: 1px solid #DDD; }

upload files

  1. Find Gemfile
  2. Below gem 'sqlite3' add gem 'carrierwave'
  3. Kill rails server
  4. bundle
  5. rails generate uploader Picture
  6. start rails server

upload files

7.Find app/models/idea.rb

8.Under class Idea < ApplicationRecord add:  mount_uploader :picture, PictureUploader

9.Find app/views/ideas/_form.html.erb

10.Change <%= form.text_field :picture, id: :idea_picture %> to <%= form.file_field :picture, id: :idea_picture %>

11.Find app/views/ideas/show.html.erb

12. Change <%= @idea.picture %> to <%= image_tag(@idea.picture_url, width: 600) if @idea.picture.present? %>

Finetune the routes

Find config/routes.rb, add root to: redirect('/ideas')

Create a static page

  1. rails generate controller pages info
  2. visit http://localhost:3000/pages/info

Push to github repo

  1. Find .gitignore
  2. add /public/uploads/*
  3. git add .
  4. git commit -m "first commit"
  5. git remote add origin git@github.com:yourname/yournam.git
  6. git push -u origin master

Create your CI

  1. Login to travis-ci.org via your Github account
  2. Link travis-ci.org to your new repo
  3. add .travis.yml under your project's root path
  4. add below text to .travis.yml:

language: ruby

rvm:

  - 2.4.1

https://docs.travis-ci.com/user/getting-started/

Publish your website

  1. Register a account at http://run.pivotal.io/
  2. Login to your Pivotal account and confirm you have a new space called 'development'
  3. brew tap cloudfoundry/tap
  4. brew install cf-cli
  5. cf login -a https://api.run.pivotal.io

https://docs.cloudfoundry.org/buildpacks/ruby/gsg-ror.html

Create a new file under root path: manifest.yml

---

applications:

- name: rails-sample

  memory: 256M

  instances: 1

  path: .

  command: bundle exec rake db:migrate && bundle exec rails s -p $PORT

Publish your website

https://docs.cloudfoundry.org/buildpacks/ruby/gsg-ror.html

cf push input_your_project_name_here

visit console on http://run.pivotal.io/

visit your website

Publish your website

https://docs.cloudfoundry.org/buildpacks/ruby/gsg-ror.html

Yay! You become a rails girl!

But it is just beginning...

课程要求

 

1. 课程成员必须参加串讲，相关主题将被强行指定（可在小范围内选择），如不愿意参加串讲则被视为非成员；

2. 课程成员如不能按时完成串讲或者无故缺课次数达到2次则被视为非成员；

3. 本课程座位会提前安排，如有非成员请自备座椅，并且由课程成员占用优先位置；

4. 课程成员可以随时提问并参与讨论，非成员不得在课程进行中参与有关讨论。

Red Precious Stone III

1. Model (Active Record, Migrations, Validation, Callback, Associations, Query Interface)

2. View (Action View, Layout, Rendering, Form Helpers)

3. Controller (Action Controller, Rails Routing)

4. Active Support

5. Testing

6. Securing

7. Debugging

8. Configuring

 

 

 

 

9. Rails Command Line

10. Active Job

11. Action Mailer

12. Rails Command Line

13. Asset Pipeline

Red Precious Stone III

14. Caching

15. Using Rails for API-only Applications

16. Action Cable

Made with Slides.com