Rails Girls App Tutorial

Created by Vesa Vänskä, @vesan

Переконайсь, що у тебе встановлено Rails. Якщо ж ні, скористайся інструкціями для встановлення.

Знайомство з інструментами

 

Текстовий редактор

  • Atom, Sublime Text, Vim та Emacs є прикладами текстових редакторів, що можуть використовуватись для написання коду та редагування файлів.

 

Термінал (також відомий як Командний Рядок у Windows)

  • Тут ти запускаєш сервер rails та виконуєш команди.

 

Веб оглядач

  • (Firefox, Safari, Chrome) знадобляться тобі для перегляду створеного вами додатку.

Важливо

Важлива ремарка: ти повинна обрати інструкції відповідно до операційної системи. Команди, які потрібно виконати у Windows, дещо відрізняються від команд для Mac або Linux. Якщо ти стикнулась із проблемами — перевір перемикач операційних систем знизу під командами. У випадку, якщо ти користуєшся cloud service (наприклад nitrous), використовуй команди, призначені для Linux (навіть у випадку, якщо ти у цей час користуєшся Windows).

1.Створення додатку

Ми створимо новий Rails додаток і назвемо його railsgirls.

Отже, відкриємо термінал:

Далі, виконай наступні команди у терміналі:

mkdir projects

Можна переконатись переконатись, що директорія із назвою projects була створена, виконавши команду: ls. Ти повинна побачити директорію projects у отриманому списку. Тепер потрібно змінити поточну директорію на projects, виконавши:

cd projects

Ти можеш переконатись, що зараз знаходишся у порожній директорії, виконавши вже знайому команду ls. Тепер потрібно створити новий додаток із назвою railsgirls:

rails new railsgirls

Це створить новий додаток у директорії railsgirls, тож тобі знову потрібно змінити поточну директорію, щоб опинитись всередині нашого Rails додатку:

cd railsgirls

Якщо ти знову виконаєш ls всередині директорії, то побачишу списку директорій app та config. Тепер ви можете запустити сервер rails, виконавши:

rails server
mkdir projects

Можна переконатись, що директорія із назвою projects була створена, виконавши команду: dir. Ти повинна побачити директорію projects у отриманому списку. Тепер потрібно змінити поточну директорію на projects, виконавши:

cd projects

Ти можеш переконатись, що зараз знаходишся у порожній директорії, виконавши вже знайому команду dir. Тепер потрібно створити новий додаток із назвою railsgirls:

rails new railsgirls

Це створить новий додаток у директорії railsgirls, тож тобі знову потрібно змінити поточну директорію, щоб опинитись всередині нашого Rails додатку:

cd railsgirls

Якщо ти знову виконаєш dir всередині директорії, то побачишу списку директорій app та config. Тепер ви можете запустити сервер rails, виконавши:

rails server

Відкрий http://localhost:3000 у веб оглядачі. Якщо використовуєш cloud service (наприклад nitrous), використовуйте їхній функціонал попереднього перегляду (читай інструкії для встановлення для деталей).

Ти повинна побачити сторінку “Welcome aboard”, що свідчитиме про успіх генерації проекту.

Зверни увагу, у цьому вікні командний рядок недоступний, тому що ти запустила сервер Rails. Командний рядок виглядає наступним чином:

$
>

Коли командний рядок недоступний, не можна виконувати нові команди. Якщо ти спробуєш виконати cd чи будь-яку іншу команду, вона не спрацює. Щоб повернутися у звичний режим:

Натисни CTRL-C у терміналі, щоб зупинити сервер Rails.

Наставник: Поясніть, що виконує кожна команда. Що було згенеровано? Що робить сервер?

2.Створюємо scaffold для Idea

Ми будемо використовувати функцію Rails, яка називається scaffold. Вона дає можливість швидко створити точку для старту, що дозволить переглядати, додавати, видаляти, редагувати та переглядати об’єкти (list, add, remove, edit, view things), у нашому випадку це ідеї.

Наставник: Що таке Rails scaffolding? (Поясніть команду, назву моделі і згенеровану таблицю у БД, угоди найменування, типи і атрибути, тощо.) Що таке міграції і для чого вони нам потрібні?

rails generate scaffold idea name:string description:text picture:string

Генератор (scaffold) створює нові файли у директорії проекту, однак для того, щоб все запрацювало, тобі слід виконати кілька інших команд. Вони оновлять нашу БД та перезапустять сервер.

bin/rake db:migrate
rails server
ruby bin/rake db:migrate
rails server

Відкрий http://localhost:3000/ideas у веб оглядачі. Користувачі, що використовують cloud service (наприклад nitrous) повинні додати ‘/ideas’ до їхнього попереднього url (читай інструкії для встановлення).

Огляньмо і потестуймо те, що ти створила скориставшись кількома простими командами у терміналі.

Натисни CTRL-C у терміналі, щоб зупинити сервер Rails, коли набридне досліджувати створений сайт.

3.Дизайн

Наставник: Розказати про зв’язок між HTML і Rails. Якою частиною шаблонів (views) є HTML і що таке Embedded Ruby (ERB)? Що таке MVC і як це його стосується? (Моделі та контроллери відповідальні за генерацію HTML шаблонів.)

Наш додаток поки виглядає не дуже привабливо. Давай прикрасимо його. Ми будемо використовувати Twitter Bootstrap щоб легко і просто стилізувати наш сайт.

Відкриємо app/views/layouts/application.html.erb у текстовому редакторі і над рядком

<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>

додамо

<link rel="stylesheet" href="//railsgirls.com/assets/bootstrap.css">
<link rel="stylesheet" href="//railsgirls.com/assets/bootstrap-theme.css">

і замінимо

<%= yield %>

на

<div class="container">
  <%= yield %>
</div>

Давай також додамо панель навігації і нижню частину до сайту. У тому ж самому файлі під тегом <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>

і перед </body> додамо

<footer>
  <div class="container">
    Rails Girls Lviv 2015
  </div>
</footer>
<script src="//railsgirls.com/assets/bootstrap.js"></script>

Тепер давай змінимо вигляд таблиці з ідеями. Відкрий app/assets/stylesheets/application.css і внизу файла додай

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

Тепер переконаємося, що ми зберегли всі зміни і оновимо сторінку в браузері. Ти також можеш продовжувати змінювати HTML & CSS.

У випадку, якщо у терміналі відображається повідомлення про проблеми із JavaScript або CoffeeScript, встанови nodejs. Ця проблема не мала б з’являтись, якщо ми використовували RailsInstaller (лише якщо ти встановлювала Rails через gem install rails).

Наставник: Розкажіть трохи про CSS і макети (layouts).

4.Додамо завантаження зображень

Нам потрібно встановити додаткову бібліотеку, яка дозволить завантажувати файли.

За допомогою текстового редактора відкриємо Gemfile в директорії проекту і під рядком

gem 'sqlite3'

додамо

gem 'carrierwave'

Наставник: Пояснити, що таке бібліотеки і чим вони корисні. Розказати про вільне програмне забезпечення (open source).

Натисни CTRL-C у терміналі, щоб зупинити сервер Rails.

У терміналі запустимо:

bundle

Це встановить бібліотеку додану до Gemfile.

Тепер ми можемо згенерувати код, який буде відповідати за завантаження. Запустимо у терміналі:

rails generate uploader Picture

Після цього запустимо сервер rails.

Увага: Дехто може використовувати другий термінал, у якому постійно запущений сервер Rails. В такому випадку потрібно перезапустити Rails процес. Це необхідно для того, щоб додаток завантажив додану бібліотеку.

Відкриємо app/models/idea.rb і під рядком

class Idea < ActiveRecord::Base

додамо

mount_uploader :picture, PictureUploader

Відкриємо app/views/ideas/_form.html.erb і замінимо

<%= f.text_field :picture %>

на

<%= f.file_field :picture %>

Інколи може виникати помилка TypeError: can’t cast ActionDispatch::Http::UploadedFile to string.

Якщо це трапилось, у файлі app/views/ideas/_form.html.erb потрібно замінити рядок

<%= form_for(@idea) do |f| %>

на

<%= form_for @idea, :html => {:multipart => true} do |f| %>

У вашому веб оглядачі додамо нову ідею з зображенням. На жаль, отриманий результат не надто красивий, оскільки замість картинки ми бачимо лиш шлях до неї. Це легко виправити:

Відкриємо app/views/ideas/show.html.erb і замінимо

<%= @idea.picture %>

на

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

Тепер можна оновити сторінку в браузері і милуватись завантаженим зображенням.

Наставник: Трішки розкажіть про HTML.

5.Налаштування маршрутів

Відкрий http://localhost:3000 (або url поперднього перегляду, якщо ти використовуєш cloud service). Ти все ще бачиш сторінку “Welcome aboard”. Давай зробимо перенаправлення на сторінку з ідеями.

Відкрий config/routes.rb і після першого рядка додай

root :to => redirect('/ideas')

Щоб перевірити зміни, відкрий кореневий шлях (http://localhost:3000/ або url попереднього перегляду для cloud service) у своєму браузері.

Наставник: Розказати про маршрути, включно із деталями про їх порядок і зв’язок зі статичними файлами.

Rails 3 users: Щоб це спрацювало, потрібно видалити index.html з директорії /public/.

Створимо статичну сторінку

Давай додамо статичну сторінку, в якій міститиметься інформація про автора додатку - тебе!

rails generate controller pages info

Ця команда створить нову директорію всередині app/views, яка називатиметься /pages і міститиме файл info.html.erb, який і є нашою інформаційною сторінкою.

Також це додасть простий маршрут до routes.rb

get "pages/info"

Терер можна відкрити app/views/pages/info.html.erb і додати інформацію про себе в HTML. Щоб поглянути на нову сторінку, у браузері перейди до http://localhost:3000/pages/info або, якщо ти користуєшся cloud service, додай /pages/info до свого url попереднього перегляду.

6+.Що далі?

Додаткова інформація