Rails Girls App Tutorial

Created by Vesa Vänskä, @vesan

Переконайся, що rails встановлено. Як це зробити, може прочитати тут

Засоби

 

Редактори тексту

  • Atom, Sublime Text, Vim та Emacs - приклади редакторів тексту, в яких ти можеш писати і редагувати код.

 

Термінал (або командний рядок в Windows)

  • Місце, де ми запускатимемо сервер і виконуватимемо системні команди.
  • Пошукай серед інстальованих програм, ввівши “Terminal” чи “Command Prompt”

 

Веб переглядачі

  • (Firefox, Safari, Chrome) для перегдяду застосунку.

В цій інструкціїї ти побачиш багато коду, що позначається так:

some code

Це означає, що виділений текст - це програмний код, його варто виконати чи додати до своїх файлів. Зображення обіля виділеного тексту допоможе тобі знати, який засіб використати.

Наприклад, якщо ти бачиш зображення терміналу біля виділеного тексту, як в прикладі вище, то варто скопіювати цей код у термінал чи командну стрічку.

Увага!

Валиво вибрати інструкції, що призначені для операційної системи, яку ти використовуєш: команди, які призначені для Windows дещо відрізняються від тих, які призначені для Mac чи Linux. Якщо маєш проблеми - перевір перемикач операційних систем внизу блоку із командами. Якщо ти використовуєш хмарне оточення (наприклад, Codenvy), тобі потрібно запускати команди, що призначені для Linux, навіть, якщо у тебе комп’ютер із Windows.

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

Створимо новий застосунок Rails із назвою railsgirls

Спершу відкриємо териінал:

  • Mac OS X: Відкрий Spotlight, набери Terminal і клікни на програму Terminal.
  • Windows: Клікни Start і пошукай Командний рядок, потім клікни на Командний рядок з Ruby and Rails.
  • Linux (Ubuntu/Fedora): Пошукай Термінал в даші і клікни на Термінал.
  • Хмарний сервіс (як-от, Codenvy): Увійди в свій акаунт і створи новий проект, і переключись на IDE (за деталями дивись інструкцію по встановленні). Термінал зазвичай знаходиться унизу вікна переглядача.

Тепер введи ці команди в термінал:

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 у браузері. Якщо використовуєш хмарний сервіс (як-от, Codenvy), використовуй функцію перегляду (дивись інструкція встановлення за деталями).

Маєш побачити сторінку з логотипом Rails і написом: “Yay! You’re on Rails!”, що означає - твій застосунок готовий і запущений.

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

$
>

Підказка: Інколи у різних інструкціях ти можеш побачити команди, що написані з символом $ напочатку. Це домовленість, що означає початок рядку, яку треба ввести у термінал. Тобі не потрібно вводити цей символ на спочатку команди. Твій командний рядок може не мати символу $ на початку команди.

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

Натисни Ctrl+C в вікні терміналу, що завершити роботу сервера.

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

2.Створення scaffold’у Ідея

Завдяки rails scaffold швидко згенеруємо необхідні файли, які дозволять, додавати, видаляти, редагувати ідеї.

Ментор: Що таке rails scaffold (Поясни цю команду, ім’я моделі і відповідну їй таблицю бази даних, домовленості по називанню атрибутів, типів і т.д. Що таке міграції і чому ми повинні їх використовувати?

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

Scaffold створює нові файли в папці проекту. Щоб все запрацювало, ми повинні виконати декілька команд, що оновлять базу даних і перезавантажать сервер.

rails db:migrate
rails server

Відкриємо http://localhost:3000/ideas в браузері. Для користувачів хмарних сервісів (як-от, Codenvy) інструкція тут installation guide).

Поглянь на результат цих команд, понатискай на посилання.

3.Дизайн

Ментор: Розкажи про відношення між HTML і Rails. Яка відмінність між HTML і Embedded Ruby (ERB)? Що таке MVC? Яка частина за що відповдає?

Сайт виглядає не дуже гарно, чи не так? Давай додамо Twitter Bootstrap в твій проект, що допоможе покращити вигляд.

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

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>

додамо

<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">

і замінемо це

<%= yield %>

цим

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

Додамо навігацію і footer до шаблону. В цьому ж файлі під <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 <%= Time.now.year %>
  </div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.0.3/js/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 потім.

Ментор: Розкажи трохи про CSS.

4.Додаємо зображення на сторіку.

Потрібно встановити програму, що дозволить завантажувати файли в rails.

Відкрий Gemfile в папці проекту за допомогою редактора і під рядком

gem 'sqlite3'

додай

gem 'carrierwave'

Ментор: Поясни, що таке бібліотеки і чим вони корисні. Опиши, що таке відкрите програмне забезпечення.

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

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

bundle

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

rails generate uploader Picture

Тепер запустимо сервер rails.

Примітка: Можна запускати сервер в другому вікні терміналу. В будь-якому випадку тобі треба перезавантажити сервер rails.

Якщо виводиться помилка, що завантажувач не може бути знайдений - додай такі рядки:

gem 'net-ssh'

Якщо ти додав цей gem, виконай знову цю команду в терміналі:

bundle

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

class Idea < ApplicationRecord

додамо

mount_uploader :picture, PictureUploader

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

<%= f.text_field :picture, id: :idea_picture  %>

на

<%= f.file_field :picture, id: :idea_picture %>

В браузері додамо нову ідею з картинкою. Коли ти завантажиш картинку, вона виглядає не надто гарно, бо видно тільки шлях до файлу. Давай виправимо це.

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

<%= @idea.picture %>

на

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

Тепер перезавантаж сторінку в браузері, щоб побачити зміни.

Ментор: Розкажи трохи про HTML.

5. Покращення шляхів

Відкриємо http://localhost:3000 (або сторінку перегляду, якщо використовуєш хмарний сервіс). Там ще досі є напис “Yay! You’re on Rails!” на сторінці. Зробимо так, щоб посилання вело на сторінку з ідеями.

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

root to: redirect('/ideas')

Перевіремо зміни, відкривши корінь сайту, тобто http://localhost:3000/, або сторінку перегляду в браузері.

Ментор: Розкажи про шляхи, порядок шляхів і відношення до статичних файлів.

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

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

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, або, якщо користуєшся хмарним сервісом - додай ‘/pages/info’ в кінець посилання для перегляду.

6+. Що тепер?

  • Додамо дизайн з HTML i CSS
  • Додамо рейтинг
  • Додамо інтерактивність за допомогою JavaScript чи CoffeeScript
  • Змінемо розмір зображень, щоб пришвидшити завантаження картинок.

Додаткові інструкції