Aplikacja Rails Girls

Autor: Vesa Vänskä, @vesan

Upewnij się, że masz zainstalowane Ruby on Rails. Jeśli nie, **zobacz przewodnik instalacji**.

Poznaj narzędzia

 

Edytor tekstu

Sublime Text 3, Visual Studio Code, Vim, Emacs lub Gedit to przykładowe edytory tekstu, w których możesz pisać i edytować kod.

 

Terminal (w systemie Windows zwany Wierszem poleceń lub Konsolą)

Program, w którym wykonasz polecenia i uruchomisz serwer.

 

Przeglądarka internetowa

Firefox, Safari, Chrome lub inna. Będzie służyła do oglądania i testowania Twojej aplikacji.

1.Tworzenie aplikacji

Stworzymy nową aplikację w Railsach, która będzie się nazywać railsgirls.

Najpierw otwórz terminal/konsolę/wiersz poleceń:

Wpisz następujące polecenie:

mkdir projects

Aby sprawdzić czy katalog o nazwie projects został utworzony użyj polecenia: ls. Na liście katalogów powinnaś zobaczyć nazwę projects. Przejdź do folderu projects wpisując:

cd projects

Używając ponownie polecenia ls możesz się upewnić, że znajdujesz się teraz w pustym folderze.

Stworzymy nową aplikację, którą nazwiemy railsgirls. Wpisz:

rails new railsgirls

W ten sposób utworzy się nowa aplikacja wewnątrz katalogu railsgirls. By znaleźć się we wnętrzu naszej aplikacji musisz ponownie zmienić folder:

cd railsgirls

Po wpisaniu komendy ls powinnaś teraz zobaczyć foldery o nazwach app i config… Jeżeli wszystko poszło OK, możesz teraz zobaczyć jak wygląda Twoja strona. W tym celu uruchom serwer rails:

rails server

Otwórz http://localhost:3000 w swojej przeglądarce. Powinnaś zobaczyć stronę “Welcome aboard”. Jeśli ją widzisz, oznacza to, że Twoja aplikacja została poprawnie wygenerowana. Brawo!

Po powrocie do okienka z wierszem poleceń (konsolą/terminalem) spróbuj ponownie wpisać komendę ls. Ups, nie zadziałało. Dzieje się tak dlatego, że serwer rails jest ciągle włączony i nie możesz wydawać żadnych innych poleceń. Naciśnij CTRL-C (w oknie wiersza poleceń) aby wyłączyć serwer.

Coach: Wyjaśnij co robią poszczególne polecenia. Co zostało wygenerowane? Za co odpowiada serwer?

2.Scaffold

W naszej aplikacji skorzystamy ze scaffoldu, aby wygenerować rzeczy potrzebne do wyświetlania listy, dodawania, usuwania, edytowania i przeglądania poszczególnych pomysłów.

Coach: Wyjaśnij co to jest scaffold? (Wyjaśnij polecenie, nazwę modelu i związanej tabeli w bazie danych, sposób nazywania, itd.) Do czego służa migracje i dlaczego są potrzebne?

Wokonaj polecenie:

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

Scaffold stworzy wszystkie potrzebne pliki w naszej aplikacji, ale żeby wszystko działało poprawnie, musisz jeszcze wykonać dwa dodatkowe polecenia. Pierwsze zaktualizuje naszą bazę danych, drugie uruchomi serwer aplikacji.

rake db:migrate
rails server

Otwórz http://localhost:3000/ideas w przeglądarce. Poklikaj po stronie, aby zobaczyć, co nowego pojawiło się w Twojej aplikacji.

Wróć do wiersza poleceń i naciśnij CTRL-C, aby zakończyć działanie serwera.

3.Wygląd

Coach: Omów związek pomiędzy HTML a Rails. Wyjaśnij jak działa ERB i co ma wspólnego z HTML-em? Czym jest MVC?

Stworzona aplikacja nie jest jeszcze zbyt ładna. Czas coś z tym zrobić. Użyjemy projektu Twitter Bootstrap, żeby szybko otrzymać ładny (albo przynajmniej ładniejszy) wygląd.

Otwórz app/views/layouts/application.html.erb w swoim edytorze tekstowym i nad linijką

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

dodaj

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

Następnie zamień

<%= yield %>

na

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

Czas na nawigację i stopkę. W tym samym pliku, pod <body>, dodaj

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

oraz przed </body> dodaj

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

Zmień też wygląd tabelki z ideas. Otwórz app/assets/stylesheets/application.css i dodaj na dole

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

Upewnij się, że zapisałaś plik, a następnie odśwież przeglądarkę i zobacz co się zmieniło. Możesz pozmieniać więcej za pomocą HTML & CSS.

Coach: Powiedz nieco więcej o CSS i layoutach.

Krok 4: Dodawanie obrazków

Aby przejść dalej, musimy najpierw doinstalować rzeczy, które pozwolą nam załadowywać pliki w Rails.

Otwórz Gemfile w swoim projekcie przy użyciu edytora tekstu. Pod linijką

gem 'sqlite3'

dodaj

gem 'carrierwave'

Coach: Wyjaśnij czym są biblioteki i dlaczego są użyteczne. Opisz czym jest oprogramowanie bazujące na open source.

W terminalu wpisz:

bundle

Teraz możesz wgenerować kod odpowiedzialny za dodawanie obrazków. W terminalu wpisz:

rails generate uploader Picture

W tym momencie musisz zrestartować serwer Rails przy użyciu terminala.

Naciśnij CTRL-C w terminalu w celu wyłączenia serweru. Po zatrzymaniu możesz wcisnąć strzałkę w górę żeby wyświetlić ostatnie użyte polecenie. Następnie naciśnij enter żeby ponownie włączyć serwer.

Jest to niezbędne, aby aplikacja załadowała dodaną przez nas bibliotekę.

Otwórz app/models/idea.rb. Pod linijką

class Idea < ActiveRecord::Base

dodaj

mount_uploader :picture, PictureUploader

Otwórz app/views/ideas/_form.html.erb i zmień

<%= f.text_field :picture %>

na

<%= f.file_field :picture %>

Może się zdarzyć, że po odświeżeniu strony zobaczysz komunikat TypeError: can’t cast ActionDispatch::Http::UploadedFile to string.

W takim przypadku, w pliku app/views/ideas/_form.html.erb zmień linijkę

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

na

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

Dodaj nowe idee z obrazkami przy użyciu swojej przeglądarki. Kiedy załadujesz obrazek, zobaczysz jedynie dziwną ścieżkę do pliku a nie prawdziwy obrazek.

Otwórz app/views/ideas/show.html.erb i zamień

<%= @idea.picture %>

na

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

Teraz odśwież przeglądarkę i zobacz co się zmieniło.

Coach: Powiedz trochę o HTML.

Krok 5: Dostosowywanie ścieżek

Jeśli spróbujesz otworzyć stronę http://localhost:3000 ciągle będzie ona pokazywać “Welcome aboard”. Zróbmy na niej przekierowanie na naszą stronę z ideas.

Otwórz config/routes.rb i po pierwszej linijce kodu dodaj

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

Przetestuj zmianę otwierając stronę główną (http://localhost:3000/) w swojej przeglądarce.

Coach: Powiedz nieco więcej o ścieżkach. Nie zapomnij wspomnieć o kolejności (dostępu do/wybierania) ścieżek i ich relacji ze statycznymi plikami.

Rails 3: Musisz usunąć index.html z folderu /public/ żeby zadziałało.

Krok 6: Stwórz statyczną stronę w swojej aplikacji

Dodajmy nową stronę do aplikacji, gdzie będziemy trzymać informacje o autorze tej aplikacji — Tobie!

rails generate controller pages info

To polecenie utworzy w pliku app/views nowy folder o nazwie /pages. Następnie wewnątrz nowego pliku (/pages) utworzy jeszcze jeden o nazwie info.html.erb, w którym wkrótce dodasz informacje o sobie.

Oprócz tego, polecenie to doda nowy wpis do routes.rb.

get "pages/info"

Teraz możesz śmiało otworzyć plik app/views/pages/info.html.erb i dodać informacje o sobie używając HTMLa. Następnie wejdź na stronę http://localhost:3000/pages/info żeby zobaczyć rezultaty.

Co dalej?

Dodatkowe przewodniki (w języku angielskim)