Czego się nauczycie?

• Czym jest webpacker, webpack i do czego to służy
• Czym jest jQuery, bootstrap i jak je używać
• Jak ostylować stronę
• W jaki sposób dodać własny kawałek CSS i JS do aplikacji
• Jak wyświetlić obrazek, np. logo

Niezbędnik kursu:

• Discord społeczności kursu Ruby on Rails
  
  
• Maszyna wirtualna z ubuntu ze skonfigurowanym środowiskiem pod Ruby. Po zaimportowaniu aplikacją virtual box otrzymacie instancję innego systemu działającą równocześnie.
  https://ba-kurs-ror.s3.eu-west-1.amazonaws.com/kurs-ror.ova
  
  Użytkownik “user” – hasło “kurs2021”
  Baza danych w Postgresie “rubyapp” z hasłem w pliku “~/.pgpass”
  
  
• Repozytorium Github – https://github.com/binarapps/ruby-on-rails-course
  
  
• Rozwiązanie pracy własnej z poprzedniej lekcji – https://github.com/binarapps/ruby-on-rails-course/pull/4/files
  
  
• Kod z aktualnej lekcji – https://github.com/binarapps/ruby-on-rails-course/pull/5/files

1. Czym jest webpacker, webpack i jak on działa

Webpack

Tworząc warstwę widoku (Frontend) możemy się posługiwać różnymi frameworkami, językami oraz tworzyć struktury plików. Jednak wszystko finalnie musi zostać przeprocesowane do formatu, który jest obsługiwany przez przeglądarki internetowe. Do tego właśnie służy webpack. Kompiluje naszą aplikację do plików wynikowych, statycznych, które są przesyłane do użytkowników w momencie gdy odwiedzą naszą aplikację.

Webpacker

Webpacker jest to gem, który zawiera w sobie webpacka. Paczka jest zawarta domyślnie w aplikacjach rails 6. W poprzednich i w nowszej wersji są zastosowane inne rozwiązania. Jako że kurs wystartował, gdy railsy były w wersji 6, skupimy się tu na webpacku. Nic również nie stoi na przeszkodzie, żeby użyć webpackera w najnowszej wersji railsów.

Jak to działa?

Każdy widok, który tworzyliśmy w poprzednich lekcjach jest wstrzykiwany w konkretne miejsce layoutu. Domyślnie ładowany jest application layout mieszczący się w app/views/layouts/application.html.erb, w którym już dodawaliśmy powiadomienia. Widzimy też, że w nagłówku (head) strony ładowane są dwie rzeczy:

• stylesheet_link_tag 'application'
• javascript_pack_tag 'application' W prostych słowach, są to spisy plików, które mają być załadowane z zawartością CSS (stylesheet) oraz JS (javascript).

CSS

Dla CSS i stylesheet_link_tag aplikacja szuka pliku o nazwie application w app/assets/stylesheets. Zawartość tego pliku to komentarz opisujący do czego on służy oraz:

 *= require_tree .
 *= require_self

require_tree . – oznacza, że wszystkie pliki zawarte w tym samym katalogu zostaną załączone do projektu. Jest to wygodne rozwiązanie, ponieważ dodając nowy plik nie musimy go dopisywać do manifestu. Niestety często bywa tak, że potrzebujemy je ładować w konkretnej kolejności, ponieważ mogą one od siebie zależeć. Wtedy musimy ładować każdy plik z osobna w wybranej kolejności, zamiast używać require tree. require_self – oznacza załączenie tego (application.css) pliku po tym jak zostaną zaimportowane wszystkie pliki z katalogu.

JS

Dla JS i javascript_pack_tag plik wejścia (entry point) znajduje się w app/javascript/packs. Rola tego pliku jest dokładnie taka sama jak dla CSS, tzn. zawiera spis rzeczy, które mają być załadowane na stronie. Domyślnie znajduje się tam już kilka paczek, które są ładowane, więc możemy zaobserwować w jaki sposób dodać kolejne.

2. Czym jest jQuery, bootstrap i jak je używać

jQuery

JQuery to paczka zawierająca zbiór metod, ułatwiających pisanie funkcjonalności. Jest ona bardzo powszechnie stosowana, głównie w aplikacjach, które nie używają bardziej zaawansowanych frameworków jak np. React. Dzięki jQuery możemy w prosty sposób modyfikować stronę, wysyłać asynchroniczne zapytania. Wiele paczek, wymaga go do poprawnego działania.

Webpack działa na podobnej zasadzie do bundlera, którego używaliśmy w poprzednich lekcjach. Aby zainstalować jquery w naszym projekcie, piszemy w terminalu:

yarn add jquery

Polecenie to ściągnie paczkę oraz doda ją do packages.json, który jest odpowiednikiem Gemfile, oraz yarn.lock, który jest odpowiednikiem Gemfile.lock.

Aby móc korzystać z niej we wszystkich plikach bez potrzeby importowania, możemy ustawić w webpacku, aby ładował ją globalnie i przypisał do zmiennej jquery. Dodatkową konwencją tej biblioteki jest przypisanie jej wywołania do $, dzięki czemu wygodniej pisze się skrypt. Otwieramy plik config/webpack/environment.js i doprowadzamy go do takiej postaci:

const { environment } = require('@rails/webpacker')

const webpack = require("webpack");
environment.plugins.prepend(
  "Provide",
  new webpack.ProvidePlugin({
    $: "jquery/src/jquery",
    jQuery: "jquery/src/jquery",
  })
);

module.exports = environment

Bootstrap

Boostrap jest to zbiór stylów oraz skryptów JS, które umożliwiają nam stworzyć responsywne, estetyczne widoki. Aby go zainstalować używamy ponownie yarna.

yarn add bootstrap

Dodajemy go do naszego application.js, ale tym razem również do application.css, jako że musimy również dodać pliki ze stylami. JS:

import "bootstrap"

CSS:

*= require bootstrap

W dokumentacji bootstrapa w sekcji Introduction możemy się dowiedzieć, że do poprawnego działania potrzebny jest również Popper, który jest używany do obsługi tooltipów. Bez czytania dokumentacji, również się dowiemy, że jest on potrzebny 🙂 bo w konsoli przeglądarki zobaczymy błąd:

Cannot find module '@popperjs/core'

A więc dodajemy poppera:

yarn add popper.js

Jego nie musimy dodawać do application.js, ponieważ nie będziemy go używać. Będzie on dodawany w tych plikach, które go używają i Bootstrap sam sobie o to zadba.

Teraz, gdy włączycie serwer i wejdziecie na localhost, zobaczycie, że wygląd strony się troszkę zmienił.

3. Jak ostylować stronę

Kontener

Zacznijmy od dodania marginesów po bokach strony, aby zawartość była bardziej na środku. Zakładając, że nigdzie nie będziemy dodawać elementów dochodzących do krawędzi, możemy dodać taki margines globalnie, tj. dla wszystkich stron. Osiągniemy to edytując layout app/views/layouts/application.html i umieszczając yield w środku odpowiedniej klasy bootstrapa, w taki sposób:

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

Opis klasy: https://getbootstrap.com/docs/5.1/layout/containers

div jest to znacznik HTML, który sam z siebie w żaden sposób nie modyfikuje treści. Możemy mu przypisać klasy, które będą wykorzystane przez pliki CSS do ustawienia wyglądu.

Link

Teraz możemy zmodyfikować odnośniki tak, aby wyglądały ciekawiej. https://getbootstrap.com/docs/5.1/helpers/colored-links/

Przy każdym elemencie jest opis jego opcji oraz w jaki sposób go zastosować. Użyjmy jakiegoś koloru dla linku w app/views/users/index.html.

Jak widzimy, w bootstrapie w przykładach użycia znajduje się czysty HTML:

<a href="#" class="link-success">Success link</a>

U nas ten link wygląda aktualnie w ten sposób:

<%= link_to 'Add New User', new_user_path %>

Każda metoda pomocnicza w railsach generująca kawałek HTML, ma możliwość ustawienia klas. Aby dodać link-warning, musimy zmodyfikować naszą linijkę w następujący sposób:

<%= link_to 'Add New User', new_user_path, class: 'link-warning' %>

Po odświeżeniu strony zobaczymy, że nasz tekst zmienił kolor na zielony.

Bootstrap dostarcza nam wiele gotowych komponentów, między innymi przyciski. https://getbootstrap.com/docs/5.1/components/buttons/

Użyjmy teraz primary button do naszego linku, używając obu klas btn i btn-success

<%= link_to 'Add New User', new_user_path, class: 'btn btn-success' %>

Po odświeżeniu strony zobaczymy, że nasz tekst zmienił się w przycisk.

Oczywiście nic nie stoi nam na przeszkodzie, aby łączyć klasy

<%= link_to 'Add New User', new_user_path, class: 'btn btn-success link-warning' %>

Tabela

Na stronie boostrapa wyszukujemy element table. Pokaże nam się przykład, w jaki sposób powinniśmy skonstruować naszą tabelę oraz kilka innych wariantów. Kluczowe jest tutaj nadanie naszej tabeli odpowiedniej klasy. Dodajmy więc ją do naszej tebeli użytkowników:

<table class="table">

Po odświeżeniu zobaczymy już ładnie sformatowaną i czytelną tabelę.

Formularz

Bootstrap oferuje bardzo wiele możliwości poprzez łączenie ze sobą różnych klas, w zależności od naszych potrzeb. Jest to trochę jak układanie klocków.

Ostylujmy teraz nasz formularz dodawania użytkownika app/views/users/_user.html Dla pól formularzy jest klasa form-control. https://getbootstrap.com/docs/5.1/forms/form-control/

<%= form.text_field :name, class: 'form-control' %>

Jak widać, klasa ta rozciąga nam pole na całość strony. Jest to bardzo nieczytelne dla użytkownika, tym bardziej, że nie jest to pole, w które będziemy wpisywać długi tekst. Do tego nie posiadamy żadnej przerwy między polem, a przyciskiem.

Użyjmy więc klasy mb-3, która znajduje się w przykładzie dla form-control.

<div class='mb-3'>
  <%= form.text_field :name, class: 'form-control' %>
</div>

Klasa ta pochodzi z tego miejsca: https://getbootstrap.com/docs/5.1/utilities/spacing/#notation i oznacza dodanie marginesu pod elementem o wielkości 3.

Aby nasze pole nie było takie długie, musimy zmniejszyć mu kontener, w którym się znajduje. Możemy do tego użyć siatki opisanej tutaj: https://getbootstrap.com/docs/5.1/layout/grid/ Za jego pomocą możemy ustawić różne siatki dla różnych szerokości ekranu. Na dużych ekranach możemy wyświetlić np. 5 pól obok siebie, a na telefonach wyświetlać je po jednym w wierszu. Użyjmy Medium tak, aby wyeliminować tylko małe rozdzielczości.

Cyfra przy klasie oznacza jaką częścią całego wiersza ma być nasz element. Grid bootstrapa posiada 12 kolumn w wierszu. Jeśli chcemy, by nasz element był do połowy strony, używamy cyfry 6. Wtedy możemy po drugiej stronie zmieścić jeszcze drugi element o wielkości 6. Jeśli drugi element będzie mieć więcej niż 6, oznaczać to będzie, że nie zmieści się już w tym samym wierszu i zostanie wyświetlony poniżej.

Ponieważ nasze pole nie wymaga dużo miejsca, dajmy mu wielkość 2 kolumn:

<div class='mb-3 col-md-2'>
  <%= form.text_field :name, class: 'form-control' %>
</div>

Aby wszystko nabrało bardziej profesjonalnego wyglądu, stwórzmy również label nad naszym polem:

<%= form.label :name %>

I oczywiście ostylujmy przycisk. Aby nadać mu klasę, musimy dać mu również tekst, który ma zostać wyświetlony.

<%= form.submit 'Create User', class: 'btn btn-success' %>

4. Własny kawałek CSS i JS

CSS

Jeśli potrzebujemy dodać jakiś styl, którego nie ma w bootstrapie, lub po prostu potrzebujemy gdzieś innej kolorystyki, możemy to osiągnąć poprzez stworzenie własnych CSSów.

Podczas używania scaffoldów z poprzednich lekcji, wygenerowały się nam pliki css do każdego z zasobów. Nie oznacza to jednak, że klasy z users.css nie będą użyte dla np. komentarzy. Ważne jest więc rozważne konstruowanie klas tak, aby było nam wygodnie w przyszłości.

Dodajmy klasę w pliku app/assets/stylesheets/users.scss

.users-header {
  text-shadow: 2px 2px red;
}

A następnie, użyjmy jej w app/views/users/index.html

<h1 class='users-header'>Users</h1>

Po odświeżeniu zobaczymy czerwony cień pod naszym nagłówkiem.

Opcje CSS możecie znaleźć na stronie: https://www.w3schools.com/css/default.asp A różnice między .css, a .scss tutaj: https://sass-lang.com/guide

JS

Pliki JS dodajemy w app/javascript. Dla porządku i aby nie dodawać ich do katalogu z paczkami, możemy stworzyć nowy katalog np. scripts, a w nim stworzyć plik users.js.

Następnie musimy dodać nasz plik do naszej paczki, aby był ładowany na stronie, a więc w app/javascript/packs/application.js dodajemy:

require("../scripts/users");

Za pomocą jquery dodajmy funkcję, która sprawi, że po kliknięciu w nagłówek Users pojawi się nam komunikat:

$(".users-header").on("click", () => {
  alert("kurs ruby on rails");
});

W ten sposób nasz kod zostanie wywołany na stronie, jednak najprawdopodobniej nie zadziała. Stanie się tak dlatego, że skrypt zostanie wykonany w pierwszej kolejności, jeszcze przed stworzeniem zawartości strony. Poszuka on elementów z klasą users-header by nadać im listener na kliknięcie, jednak żadnego nie znajdzie. Jest bardzo wiele sposobów na naprawienie tego problemu. My skupimy się na dodaniu funkcji, która poczeka z wykonaniem skryptu na to, aż się załaduje cała strona. Po zmianie, nasz plik będzie wyglądać w następujący sposób:

$(document).ready(() => {
  $(".users-header").on("click", () => {
    alert("kurs ruby on rails");
  });
});

Teraz (po odświeżeniu strony), gdy klikniemy na nagłówek Users wyświetli nam się nasz komunikat.

Wyświetlanie obrazka

Pobierzmy logo BinarApps ze strony: https://binarapps.com/wp-content/uploads/2019/11/logo-2.svg I umieśćmy go w katalogu app/assets/images.

Railsy posiadają specjalną metodę, która dodaje na stronę rzeczy zawarte w tym katalogu. Dodajmy do naszej listy userów dodany wcześniej obrazek:

<%= image_tag "logo-2.svg" %>

Wiedząc już w jaki sposób dodać CSS, możemy nadać mu klasę i style, aby było mniejsze.

Dodajemy klasę do obrazka:

<%= image_tag "logo-2.svg", class: 'binar-logo' %>

I dodajemy styl CSS:

.binar-logo {
  width: 100px;
}

Przed

Po

Praca własna

1. Dodać style do powiadomień https://getbootstrap.com/docs/5.1/components/alerts/
2. Dodać style do widoków dla Posts oraz Comments
3. trudne: Przenieść formularz tworzenia nowego użytkownika do modala, wywoływanego na stronie indexu. https://getbootstrap.com/docs/5.1/components/modal/

Przydatne linki

https://getbootstrap.com/docs/5.1/getting-started/introduction/
https://www.w3schools.com/css/ 
https://cssguidelin.es/
https://www.w3schools.com/jquERy/default.asp