Rails Girls App Tutorial

Created by Vesa Vänskä, @vesan

Для начала, убедитесь в том, что у вас установлен Ruby и Rails, в противном случае перейдите по этой ссылке..

Шаг 0: Знакомство с инструментами разработки

• Текстовый редактор: (Gedit, Vim, Emacs, Komodo Edit, Sublime Text) примеры текстовых редакторов, которые вы можете использовать для написания кода и редактирования файлов.
• Terminal / CMD - командная строка, где вы можете запустить rails сервер и выполнять команды.
• Веб браузер: (Firefox, Safari, Chrome) - средство для отображения вашего приложения.

Шаг 1: Создание приложения

Мы будем создавать приложение под названием gifts. Приложение будет предназначено для выбора подарков на Новый Год :) Для того чтобы Санта, ну или Дед Мороз, знал что нужно нести вам к празднику, нужно составить список того чего бы вам действительно хотелось. А если пригласить друзей и попросить их составить такие же списки, тогда все получат желаемые подарки. Как раз этим и будет заниматься наше приложение.

Сначала, откроем ‘Командную Строку’:

• OS X: Откройте Spotlight, введите Terminal и кликните на появившейся опции Terminal.
• Windows: Откройте меню “Пуск” и кликните на Command Prompt with Ruby on Rails.
• Linux: Откройте Терминал с помощью сочетания клавиш ‘Ctrl+Alt+T’

Далее, введите следующие команды:

mkdir projects
cd projects
rails new gifts
cd gifts
rails s

Откройте ссылку http://localhost:3000 в веб браузере.

В командной строке нажмите сочетание клавиш Ctrl+C для остановки сервера.

Тренер: Краткое объяснение, что делает каждая из команд. Что было сгенерировано? Что делает сервер.

Шаг 2: Создание scaffold’а для пользователей

Воспользуемся Rails’ scaffold’ом для генерирования всего необходимого для работы с пользователями.

Тренер: Что такое scaffold (1. команда, 2. имя модели и связь с таблицей БД ; плюрализация/именование, 3. атрибуты и типы)? Что такое миграции, в каких случаях они необходимы и зачем?

rails generate scaffold User name:string
rake db:migrate
rails server

Откройте ссылку http://localhost:3000/users в веб браузере.

После небольшого просмотра, остановите сервер (сочетание клавиш Ctrl+C в командной строке)

Остановите сервер (ctrl+c)

Шаг 3: Дизайн

Тренер: Связь между HTML и Rails; какая часть во view отвечает за HTML, а какая за ERB(Embedded Ruby)? Как это связано с MVC (что отвечает за логику динамического генерирования HTML)?

Для того чтобы наше приложение выглядело немного красивее, нужно подключить к нему стили. Мы будем использовать Twitter Bootstrap проект для получения симпатичных стилей.

Нам необходимо установить библиотеку для добавления возможности работы с Twitter Bootstrap.

Откройте Gemfile в проекте и добавьте

gem 'twitter-bootstrap-rails'
gem 'simple_form'

После этого запустите в терминале:

bundle install

В этот момент вы должны перезапустить Rails сервер из командой строки. Это необходимо для того, чтобы приложение загрузило добавленные gem-ы.

Снова воспользуемся генеретором rails для того чтобы сгенерировать стили, и применить их к готовым страничкам

rails generate bootstrap:install static
rails generate simple_form:install --bootstrap
rails generate bootstrap:layout application fixed (здесь выберите 'a' для перезаписи всех файлoв)
rails generate bootstrap:themed Users             (здесь выберите 'a' для перезаписи всех файлoв)

Теперь запустите сервер

rails server

Откройте ссылку http://localhost:3000/users в веб браузере и посмотрите на изменения в дизайне приложения.

Тренер: Немного о CSS и шаблонах.

Остановите сервер (ctrl+c)

Шаг 4: Создание scaffold’а для подарков

Теперь добавим подарки :) У каждого пользователя будет свой набор подарков

Тренер: Немного об ассоциациях

Добавим библиотеку позволяющую генерировать scaffold-ы для вложенных ресурсов

Откройте Gemfile в проекте и добавьте

gem 'nested_scaffold'

После этого запустите в терминале:

bundle install

Теперь сгенерируем все необходимое для работы с подарками и обновим таблицы в базе данных

rails generate nested_scaffold User/Gift description:text
rake db:migrate

Откройте config/routes.rb и удалите эту строку

resources :users

Тренер: Немного о роутах

И теперь сгенерируем стилизированные странички для подарков

rails generate bootstrap:themed Gifts (здесь выберите 'a' для перезаписи всех файлoв)

Теперь нужно сделать некоторые правки относительно вложенных ресурсов: во всех файлах из директории app/views/gifts заменить

gifts_path
new_gift_path
gift_path(gift)
edit_gift_path(gift)

на

user_gifts_path(@user)
new_user_gift_path(@user)
user_gift_path(@user, gift)
edit_user_gift_path(@user, gift)

соответственно

и в файле app/views/gifts/_form.html.erb заменить

<%= simple_form_for @gift, :html => { :class => 'form-horizontal' } do |f| %>

на

<%= simple_form_for [@user, @gift], :html => { :class => 'form-horizontal' } do |f| %>

Теперь можем запускать сервер и смотреть что у нас получилось

rails server

http://localhost:3000/users/1/gifts в веб браузере

Еще было бы удобно добавить ссылочку на подарки пользователей в список: в файле app/views/users/index.html.erb

после

<th><%= model_class.human_attribute_name(:created_at) %></th>

добавьте

<th></th>

и после

<td><%=l user.created_at %></td>

добавьте

<td><%= link_to 'Gifts', user_gifts_path(user) %></td>

Остановите сервер (ctrl+c)

Шаг 5: Добавление возможности регистрации и аутентификации пользователей

Добавим gem предоставляющий возможность регистрации и аутентификации :)

Добавьте в Gemfile:

gem 'devise'

После этого запустите в терминале:

bundle install

Сгенерируем необходимые файлы (миграция с добавлением новых полей в таблицу users, роуты для пользователей, подключение необходимых модулей gem-a к модели User) и запустим миграции.

rails generate devise:install
rails generate devise User
rake db:migrate

Для того чтобы только зарегистрированные пользователи имели доступ к данным о наших подарках, добавим в контроллер app/controllers/application_controller.rb такой фильтр

Тренер: что такое фильтры?

before_filter :authenticate_user!

После это добавим маршрут по умолчанию, в файл config/routes.rb

root to: 'users#index'

И удалим файлик public/index.html сгенерированный Rails для примера

Теперь запустим сервер и посмотрим на результат нашей работы

rails server

http://localhost:3000/users/sign_in в веб браузере попробуйте зарегистрироваться

Нам не нужно, чтобы пользователи могли добавлять и удалять друг друга :) Давайте избавимся от этих ссылок

В файле app/views/users/index.html.erb удалите код:

<td>
          <%= link_to t('.edit', :default => t("helpers.links.edit")),
                      edit_user_path(user), :class => 'btn btn-mini' %>
          <%= link_to t('.destroy', :default => t("helpers.links.destroy")),
                      user_path(user),
                      :method => :delete,
                      :data => { :confirm => t('.confirm', :default => t("helpers.links.confirm", :default => 'Are you sure?')) },
                      :class => 'btn btn-mini btn-danger' %>
        </td>

и

<%= link_to t('.new', :default => t("helpers.links.new")),
            new_user_path,
            :class => 'btn btn-primary' %>

и

<th><%=t '.actions', :default => t("helpers.actions") %></th>

Остановите сервер (ctrl+c)

Шаг 6: Добавим возможность приглашать других пользователей в свое приложение

Добавим gem предоставляющий функциональность приглашений

Добавьте в Gemfile:

gem 'devise_invitable'

После этого запустите в терминале:

bundle install

Сгенерируем необходимые файлы и применим новые миграции

rails generate devise_invitable:install
rails generate devise_invitable User
rake db:migrate

Добавим ссылочку с помощью которой зарегистрированные пользователи могут приглашать друзей на сайт В файле app/views/users/index.html.erb

<%= link_to "Invite a friend", new_user_invitation_path, :class => 'btn btn-primary' %>

Каждый приглашенный пользователь должен будет получить e-mail с приглашением на сайт. Для этого нужно настроить почтовый сервер. Мы воспользуемся сервисом gmail

в файл config/application.rb, внутри блока

module Gifts
  class Application < Rails::Application
  
  ...
  end
end

добавим следующую конфигурацию:

config.action_mailer.delivery_method = :smtp
    config.action_mailer.smtp_settings = {
      :address              => "smtp.gmail.com",
      :port                 => 587,
      :domain               => 'baci.lindsaar.net',
      :user_name            => 'rg.kiev.workshop',
      :password             => 'octocats',
      :authentication       => 'plain',
      :enable_starttls_auto => true  }

и в файл config/environments/development.rb, после строчки

config.action_mailer.raise_delivery_errors = false

добавим такую строчку

config.action_mailer.default_url_options = { :host => 'localhost:3000' }

Теперь можем запускать сервер и смотреть что у нас получилось

rails server

http://localhost:3000/users в веб браузере

Что далее?

• Удалите лишние ссылки в html страницах
• Добавьте возможность “скопировать этот подарок в мой список желаний”
• Добавьте возможность выбрать какой подарок подарить человеку из его списка желаний
• Используйте CoffeScript (или JavaScript) для создания интерактивности

Дополнительные гайды

• Гайд 1: Добавление комментирования, от Janika Liiv
• Гайд 2: Размещение вашего приложения на Heroku, от Terence Lee