Wprowadzenie „Rails? To tylko strata czasu. Nigdy tego nie będę używał, NIGDY...” Taka rzeczywiście myśl przyszła mi do głowy, gdy pierwszy raz spróbo...
Wprowadzenie „Rails? To tylko strata czasu. Nigdy tego nie będę używał, NIGDY...” Taka rzeczywiście myśl przyszła mi do głowy, gdy pierwszy raz spróbowałem użyć platformy Rails ponad dziesięć lat temu. Jestem adeptem starej dobrej szkoły PHP, ręcznie wpisującym kod HTML i PHP w notatniku Windows, zapisującym plik i ładującym go za pomocą prostego programu FTP do zwykłego serwera Apache. W porównaniu z tym środowiskiem platforma Rails wydała mi się ogromnym i zbędnym narzędziem. Komu potrzebny jest tak rozbudowany system do tworzenia prostych stron WWW? Do tego jeszcze taki skomplikowany! Gdy pierwszy raz spróbowałem zainstalować Rails, po półtorej godzinie poddałem się kompletnie sfrustrowany. W porównaniu z ręcznym wpisywaniem kodu HTML i PHP w Notatniku i wysyłaniem go za pomocą FTP do serwera, platforma Rails wydawała się czystym szaleństwem! Jednak gdy ostatnio postanowiłem ponownie ją sprawdzić, okazała się czymś zupełnie innym. Dobrze, że tak zrobiłem, bo gdy przebrnie się przez instalację, korzystanie z Rails jest po prostu bajką! To po prostu świetna zabawa! Za pomocą platformy Rails można szybko zrobić tak wiele różnych rzeczy, że w porównaniu z nią inne narzędzia, nawet zwykły język PHP, wydają się nieporozumieniem. Owszem, trzeba włożyć trochę wysiłku w jej poznanie. W rzeczywistości bardzo trudno jest zacząć pracę bez czyjejś pomocy (dlatego powstała ta książka). Ale gdy już pokonasz pierwsze przeszkody, platforma Rails okazuje się naprawdę prosta w użyciu. A ja jestem tu po to, aby ułatwić Ci postawienie pierwszych kroków w tym systemie.
Jestem pewien, że będziesz zaskoczony szybkością tworzenia swoich aplikacji.
Czym właściwie jest platforma Ruby on Rails? Ruby on Rails to otwarta platforma programistyczna utworzona w języku Ruby, umożliwiająca tworzenie aplikacji internetowych w niezwykle prosty sposób. Wykorzystywana jest w niej architektura model – widok – kontroler, dzięki której mnóstwo żmudnej roboty związanej z obsługą baz danych i tego typu rzeczami jest wykonywane za Ciebie, a Ty podczas tworzenia aplikacji możesz skupić się tym, co jest ważne, tworzyć kod szybko i łatwo. Platforma, którą w latach 2004 – 2005 utworzył David Heinemeier Hansson, szybko stała się jednym z najbardziej popularnych narzędzi wykorzystywanych na całym świecie. Stosowana jest w wielu popularnych serwisach, takich jak Groupon, Indiegogo, Airbnb, Yammer, SoundCloud, Scribd, Shopify, Hulu i wiele innych. Serwis Twitter też na początku był utworzony w Rails.
Dla kogo jest ta książka? Książka jest przeznaczona dla zupełnie początkujących użytkowników platformy Rails. Nie jest wymagane żadne doświadczenie ani cokolwiek w tym rodzaju. Jakieś umiejętności tworzenia stron internetowych na pewno będą przydatne (cenna będzie podstawowa znajomość języka HTML, a jeszcze lepiej JavaScript), ale tak naprawdę aby zacząć pracę z tą książką, nie trzeba nic znać. Wyjaśnię Ci absolutnie wszystko, co jest potrzebne do postawienia pierwszych kroków.
Czy trzeba nauczyć się języka Ruby? Większość użytkowników pyta mnie na samym początku, czy aby móc korzystać z platformy Rails, trzeba nauczyć się programować w języku Ruby. Choć nazwa platformy brzmi Ruby on Rails, tak naprawdę aby zacząć tworzyć aplikacje WWW za jej pomocą, nie trzeba znać tego języka. W trakcie nauki będziesz stosował proste osadzone obiekty Ruby (czyli po prostu kod Ruby osadzony w stronie WWW). Ale będzie to bardzo podstawowy kod, który Ci wyjaśnię. Jeżeli masz doświadczenie w programowaniu w innych językach, bardzo łatwo opanujesz Ruby. W internecie jest mnóstwo bezpłatnych materiałów umożliwiających poznanie podstaw tego języka. Kończę właśnie pisać książkę o jego podstawach. Możesz z niej skorzystać, jeżeli będziesz chciał dowiedzieć się więcej na ten temat.
Co będziemy robić w tej książce? Nikt nie chce czytać nudnych instrukcji. To najgorsza droga do nauczenia się czegokolwiek! Zamiast tego przez większość czasu będziesz tworzył prawdziwą aplikację, od początku do końca. W tym przypadku zbudujesz kopię serwisu Pinterest. Dlaczego akurat to? Z wielu powodów. Pinterest jest jedną z najpopularniejszych stron internetowych, na podstawie której omówię wiele różnych tematów. Zdobytą przy tej okazji wiedzę będziesz mógł wykorzystać w każdej aplikacji, jaką utworzysz w przyszłości. Pokażę Ci, jak tworzyć konta użytkowników, logować i wylogowywać ich z aplikacji, umożliwiać im ładowanie tekstu i obrazów do bazy danych i prezentować wszystkie te rzeczy na stronie w efektowny sposób. Ponadto przekonasz się, że tworzenie serwisu takiego jak Pinterest jest bardzo proste! Mam nadzieję, że w ten sposób nabierzesz pewności i odważysz się utworzyć własną efektowną aplikację. Jeżeli utworzenie serwisu takiego jak Pinterest będzie proste, to prawdopodobnie będziesz mógł zbudować niemal wszystko!
Jak wygląda nauka? Niektórzy najłatwiej się uczą czytając, inni — patrząc i słuchając. A jeszcze inni — robiąc coś własnymi rękami. Moim celem jest wykorzystanie w miarę możliwości wszystkich powyższych sposobów i przekazanie Ci narzędzi niezbędnych do szybkiego i łatwego opanowania platformy Rails, niezależnie od metody, która dla Ciebie będzie najlepsza. Jako uzupełnienie do tej książki przygotowałem szkolenie online, z którego możesz skorzystać w trakcie pracy. Możesz zobaczyć, jak wykonuję wszystkie kroki opisane w książce i na Twoich oczach tworzę kopię serwisu Pinterest. A jeżeli w którymś momencie utkniesz, będziesz mógł na bieżąco zadawać mi pytania i kontaktować się z innymi uczestnikami szkolenia poprzez panel komunikacyjny. Kurs dostępny jest w języku angielskim i znajdziesz go pod adresem http://www.codemy.com/rails.
Konwencje stosowane w tej książce Ta książka jest poświęcona programowaniu, więc jej treść jest przedstawiona nieco inaczej niż w zwykłej książce. Najpierw o terminologii. Nie będę używał wielu okropnych terminów technicznych, a jeżeli już, na pewno będę je wyjaśniał. Rzeczą, o której chcę wspomnieć, jest moje rozumienie słowa „aplikacja”. Wiele osób używa dzisiaj tego słowa na określenie wszystkiego, co znajduje się w internecie, szczególnie tego, co zostało utworzone za pomocą platformy Rails. Zamiast słowa „aplikacja” będę raczej używał terminu „strona”. Z technicznego punktu widzenia strona internetowa jest aplikacją. Platforma Rails tworzy katalog app, ale cóż mogę na to poradzić... Dla mnie strona to jest strona, dlatego będę używał tego słowa. Pamiętaj jednak, że gdy jestem podekscytowany, zamiennie używam słów
„aplikacja” i „strona”. Prawdopodobnie przyzwyczaisz się do tego stylu i będziesz wiedział, że chodzi o aplikację. Podczas pracy z tą książką będziesz pisał mnóstwo kodu. Jest on wyróżniony inną czcionką. Dzięki temu jest bardziej czytelny i nie myli się z pozostałym tekstem. Dodatkowo, z powodu problemów z wyświetlaniem kodu na niektórych czytnikach Kindle, kod będzie prezentowany w postaci listy numerowanej. Każdy numer oznacza osobny wiersz kodu, jak poniżej. 1 < if użytkownik_zalogowany? do %> 2
jakiś kod
3 <% else %> 4
jakiś inny kod
5 <% end %> Ponadto będę używał pojęcia „wiersz poleceń”, w tej książce (i w codziennej pracy z platformą Rails) często stosowanego zamiennie z „terminalem”. Jeżeli nie znasz wiersza poleceń, nie martw się — opiszę go za chwilę. Na razie pamiętaj tylko, że polecenia, które trzeba będzie wpisać w terminalu, będą wyróżnione taką samą czcionką jak kod. Standardowo aplikacja utworzona w platformie Rails znajduje się w typowym dla systemu Unix katalogu, na przykład: /home/ubuntu/workspace/twoja_aplikacja/ Zgodnie z konwencją stosowaną w wierszu poleceń, przed nazwą katalogu umieszczana jest nazwa komputera/użytkownika. Zatem w Twoim przypadku wiersz poleceń może wyglądać tak: laptop-domowy: /home/ubuntu/workspace/twoja_aplikacja/ $ Znak dolara $ jest znakiem zachęty w wierszu poleceń. Nie zamierzam za każdym razem umieszczać tych informacji wraz z poleceniami do wpisania. Zamiast tego będę umieszczał znak dolara i tekst polecenia, zgodnie z przyjętym założeniem, że wpiszesz podane polecenie, będąc w katalogu, w którym znajduje się Twoja aplikacja Rails. Może to wyglądać tak: $ rake db:migrate
To polecenie oznacza, że będąc w katalogu /home/ubuntu/workspace/twoja_aplikacja/, musisz wpisać polecenie rake db:migrate. Jednak z powodu problemów z wyświetlaniem kodu na niektórych czytnikach Kindle, także w tym przypadku będę dodatkowo stosował numerację wierszy, na przykład: 1 $ rake db:migrate 2 Proste? Proste.
Więcej na: www.ebook4all.pl
Rozdział 1. Środowisko programistyczne Gdy pierwszy raz spróbowałem zainstalować platformę Rails i wszystkie dodatkowe pliki, po ponad godzinie rwania sobie włosów z głowy poddałem się zły i sfrustrowany. Komputery programuję od siódmego roku życia. Z pełnym przekonaniem mogę powiedzieć, że pierwsza instalacja Rails była dla mnie najbardziej niepojętym, otępiającym, mrocznym, bezdennym obłędem, jaki kiedykolwiek mnie ogarnął podczas mojej przygody z programowaniem. Nawet dzisiaj instalacja Rails zajmuje mi ponad pół godziny, a jeżeli nie będę bacznie uważał, ZAWSZE coś pójdzie źle. To niesamowite! Naprawdę szkoda, że tak jest, ponieważ moim zdaniem wiele osób rezygnuje z poznania Rails. A to jest po prostu konieczność! Przede wszystkim w typowym przypadku przebieg instalacji platformy Rails (jak również języka Ruby — nie zapominaj o Ruby, też trzeba go zainstalować) zależy od systemu operacyjnego komputera. Generalnie są do wybory trzy opcje. Najczęściej wykorzystywane są komputery z jakimś systemem Windows, Mac albo Linux. Zazwyczaj programiści Rails korzystają z systemów operacyjnych Mac lub Linux, ponieważ oba są wyposażone we wbudowany terminal poleceń i wykorzystują tradycyjną strukturę katalogów systemu UNIX. Jest dostępna wersja platformy Rails dla systemu Windows, którą możesz zainstalować, jeżeli jesteś zdeterminowanym użytkownikiem tego systemu. Ale to jest puszka Pandory, której za żadne skarby nie chcę otwierać. Jeżeli jednak musisz korzystać z Windows, ponieważ z wyboru jest to Twoje
narzędzie programistyczne, nie używaj wersji Rails dla Windows. Zamiast tego bardzo zalecam pobranie oprogramowania VirtualBox firmy Oracle (https://www.virtualbox.org) i instalację maszyny wirtualnej z systemem Linux. Polecam wersję Ubuntu (jest darmowa, naprawdę popularna i przyjemna w użyciu). Ale uważaj! W tej książce nie będziemy podążać tradycyjną drogą! Nie będziemy w ogóle instalować platformy Rails! Żyjemy, drogi Czytelniku, we wspaniałych czasach, w których środowiska programistyczne można uruchamiać w CHMURZE! Nie ma zatem znaczenia, czy korzystasz z systemu Windows, Mac, czy Linux. Zalogujesz się po prostu do wirtualnego środowiska w chmurze, gdzie wszystko, co będzie Ci potrzebne, już jest zainstalowane i czeka, abyś zaczął zabawę. Możesz wybierać spośród mnóstwa środowisk programistycznych, z których większość oferuje bezpłatne okresy testowe, w zupełności wystarczające do opisanych tu zastosowań (środowiska te są bezpłatne zazwyczaj dla pojedynczych użytkowników — płacić trzeba w przypadku założenia kilku kont, gdy wiele osób w zespole programistów musi pracować jednocześnie). Kilka popularnych środowisk to: http://nitrous.io http://c9.io W tej książce wykorzystywane jest środowisko http://c9.io. Otwórz zatem jeden z powyższych adresów i załóż bezpłatne konto. Wystarczy podać adres e-mail, wybrać hasło, a następnie zweryfikować adres, klikając odnośnik w automatycznie wysłanej wiadomości — i gotowe. Po zalogowaniu się do systemu pojawi się panel użytkownika:
(Panel użytkownika systemu http://c9.io) W lewym górnym rogu okna kliknij przycisk Create a new workspace (utwórz nową przestrzeń roboczą). Przestrzeń robocza w systemie http://c9.io oznacza środowisko programistyczne. Dla każdej aplikacji tworzonej z wykorzystaniem platformy Rails musisz utworzyć nową przestrzeń. Ponieważ w tej książce będziesz pracował tylko nad jedną aplikacją, potrzebna będzie jedna przestrzeń robocza. W oknie, które się pojawi, wpisz nazwę nowej aplikacji. W tym przypadku będzie to obrazkowo. Wpisz tę nazwę w polu Workspace name (nazwa przestrzeni roboczej), kliknij ikonę Ruby, aby wskazać, że będzie to aplikacja w języku Ruby, a następnie kliknij przycisk Create workspace (utwórz przestrzeń roboczą). I to wszystko! Po chwili (czasami może to trwać około minuty) Twoje środowisko programistyczne Rails będzie gotowe! Jedną z przydatnych cech tego typu środowisk jest możliwość dostępu do nich z dowolnego miejsca za pomocą dowolnego komputera wyposażonego w przeglądarkę i dostęp do internetu. Nie ma znaczenia, czy jest to system Windows, Mac, czy Linux. A poza tym za każdym razem środowisko będzie wyglądało dokładnie tak, jak w chwili, gdy je opuściłeś. Mam nadzieję, że nie pozostało Ci nic innego, jak tylko uruchomić nowe środowisko i sprawdzić, co to jest!
(Środowisko programistyczne w systemie c9.io) Rzuć krótko okiem na to, co dostałeś. Przede wszystkim na ekranie widoczne są trzy sekcje. W sekcji po lewej stronie znajduje się lista katalogów i plików platformy Rails. Są to standardowe pliki i katalogi tworzone podczas KAŻDEJ instalacji platformy. Jest ich mnóstwo i na początku możesz czuć się zagubiony. To normalne! Wszystko szczegółowo opiszę, pokażę, co jest ważne i co trzeba znać, a co można odłożyć na później (a o czym można w ogóle zapomnieć). Druga sekcja znajduje się u dołu w środku ekranu. Jest to wiersz poleceń. Niektórzy użytkownicy nazywają go terminalem (jeżeli korzystasz z systemu Mac lub Linux, a nie używasz środowiska w chmurze, będziesz korzystał z rzeczywistego terminala, wyglądającego i działającego podobnie jak ten). Terminal, albo wiersz poleceń (te dwa określenia będę stosował naprzemiennie), służy do wpisywania poleceń realizujących wiele różnych operacji. W górnej sekcji, zawierającej po pierwszym uruchomieniu środowiska dokument README, znajduje się edytor tekstu. Można w nim otwierać, edytować i zapisywać pliki. Wiele czasu spędzisz, korzystając z edytora.
Stronę z plikiem README, czy innym plikiem powitalnym, możesz zamknąć. Kliknij po prostu mały znak X w górnej części edytora. Aby otworzyć jakiś plik znajdujący się w strukturze katalogów po lewej stronie ekranu, po prostu kliknij go dwukrotnie. Plik powinien pojawić się w edytorze.
Z jakiej wersji Rails i Ruby korzystasz? Zazwyczaj podczas korzystania ze środowiska programistycznego w systemie Mac, Linux czy Windows trzeba aktualizować zarówno wersję języka Ruby, jak i platformy Rails. Tym razem nie musisz się tym przejmować, ponieważ będziesz korzystał ze środowiska w chmurze, które jest zazwyczaj aktualizowane na bieżąco. Chciałbym jednak pokazać Ci, jak sprawdzić wersję Ruby i Rails, z których aktualnie korzystasz. Może się zdarzyć, że w przyszłości będziesz musiał korzystać z konkretnej wersji oprogramowania, więc sprawdzenie jej numeru jest ważną rzeczą. Zatem zapoznaj się teraz nieco z terminalem. W terminalu wpisz następujące polecenie: 1 $ rails -v 2 Powinno pojawić się coś takiego: 1 $ rails -v 2 Rails 4.2.1 3 Ten wynik oznacza, że aktualnie korzystasz z wersji 4.2.1. To jest właściwa wersja. W chwili powstawania tej książki dostępna była nowsza wersja Rails: 4.2.4, ale tak naprawdę nie było potrzeby dokonywania aktualizacji. Teraz sprawdź aktualnie wykorzystywaną wersję języka Ruby. Czy odgadniesz polecenie, które musisz wpisać? Nie może być inne, jak tylko:
1 $ ruby -v 2 Wynik będzie podobny do poniższego: 1 $ ruby -v 2 ruby 2.2.1p85 (2015-02-26 revision 49769) [x86_64-linux] 3 Wynik oznacza, że korzystasz z wersji Ruby 2.2.1p85. Jak poprzednio, jest to wersja wystarczająca do naszych zastosowań.
Popularne polecenia terminalowe Teraz będzie o tym, jak działa terminal. Musisz w nim po prostu wpisywać polecenia i naciskać klawisz Enter. Polecenie zostanie wykonane i zazwyczaj pojawi się jakiś wynik. Terminal jest w rzeczywistości bardzo przydatnym narzędziem i za jego pomocą można zrobić mnóstwo pożytecznych rzeczy. Oczywiście w tej książce nie będziemy zbyt głęboko wnikać w bogactwo poleceń, ale prawdopodobnie dobrze będzie poznać kilka, z których będziesz często korzystał. Przyjrzyjmy się kilku popularnym poleceniom. 1 $ pwd 2 Polecenie pwd pokazuje katalog, w którym się aktualnie znajdujesz. Gdy ja wpisuję je w swoim terminalu, otrzymuję następujący wynik: 1 $ pwd 2 /home/ubuntu/workspace 3 Wynik oznacza, że aktualnie znajduję się w katalogu
home/ubuntu/workspace. Katalog workspace zawiera wszystkie pliki i katalogi widoczne po lewej stronie ekranu. Można sprawdzić, jakie dokładnie pliki znajdują się w tym katalogu (lub w dowolnym innym), wpisując polecenie ls: 1 $ ls 2 Wynik wygląda na przykład tak: 1 $ ls 2 Gemfile lib/ public/
README.md tmp/
3 Gemfile.lock README.rdoc log/ test/ vendor/
Rakefile
bin/
config.ru
app/
config/
db/
4 Nazwy zawierające ukośnik na końcu (/) oznaczają katalogi, natomiast pozostałe są plikami. Za pomocą polecenia cd można przejść do wybranego katalogu. Litery cd są skrótem angielskich słów change directory (zmień katalog). Polecenia używa się w następujący sposób: 1 $ cd public/ 2 W ten sposób przeniosłeś się do katalogu public. Wpisanie polecenia pwd spowoduje pojawienie się następującego wyniku: 1 $ pwd 2 /home/ubuntu/workspace/public 3 Aby powrócić do katalogu workspace, wpisz następujące polecenie: 1 $ cd ../
2 Polecenie to oznacza „przenieś się o jeden poziom wyżej”. W ten sposób znajdziesz się z powrotem w katalogu workspace. Z poleceniem cd związana jest pewna ciekawa sztuczka. W rzeczywistości nie musisz wpisywać całej nazwy katalogu. Zazwyczaj wystarczy wpisać kilka jego początkowych liter i nacisnąć klawisz Tab, a terminal automatycznie uzupełni pozostałą część nazwy. Jeżeli na przykład wpiszesz cd pu i naciśniesz klawisz Tab, to nazwa katalogu zostanie uzupełniona (cd public/) i będziesz mógł nacisnąć klawisz Enter. Być może nie wygląda to imponująco, ale kiedyś będziesz wpisywał długie nazwy i wtedy klawisz Tab będzie naprawdę pomocny!
Utworzenie pierwszego projektu Rails Gdybyś nie korzystał z wirtualnego środowiska programistycznego, musiałbyś utworzyć nowy projekt Rails. W tym celu musiałbyś przejść do katalogu, w którym umieściłbyś aplikację (w naszym przypadku byłby to katalog workspace), i wpisać poniższe polecenie: 1 $ rails new obrazkowo 2 Polecenie to tworzy nowy projekt o nazwie obrazkowo i umieszcza go w katalogu workspace. Na szczęście nie trzeba wykonywać tego polecenia, ponieważ korzystasz z wirtualnego środowiska, a system c9.io utworzył nowy projekt w chwili utworzenia panelu. Wszystko zatem gotowe. Pliki nowego projektu są utworzone. Są to pliki widoczne w strukturze katalogów po lewej stronie ekranu. Możesz je również wyświetlić za pomocą polecenia ls w wierszu poleceń.
Uruchomienie aplikacji
Wszystkie pliki są więc gotowe, ale w celu uruchomienia aplikacji trzeba najpierw uruchomić serwer. Wraz z platformą Rails dostarczany jest niewielki serwer WWW o nazwie WEBrick. Nie jest to prawdziwy, wysokiej jakości serwer produkcyjny, ale w środowisku programistycznym zupełnie wystarcza. W docelowych konfiguracjach stosuje się serwery Apache lub Nginx, które opiszę później. Na razie z powodzeniem możesz korzystać z WEBrick. Aby uruchomić serwer WEBrick, kliknij po prostu przycisk Run Project (uruchom projekt) znajdujący się na samej górze w środku ekranu. Gdybyś korzystał z systemu Mac/Linux/Windows, musiałbyś w terminalu wpisać następujące polecenie (w tym samym katalogu, w którym znajduje się projekt): 1 $ rails server 2 Ponieważ jednak używasz środowiska wirtualnego, wystarczy po prostu kliknąć przycisk Run Project w górnej części ekranu. Zwróć uwagę, że po kliknięciu tego przycisku pojawia się nowe okno terminala, w którym uruchamiany jest serwer WEBrick. Możesz przełączać się pomiędzy terminalami. Serwer po uruchomieniu działa cały czas w oknie terminala, w którym nie można nic więcej zrobić (dlatego pojawia się on jako osobne okno). Przyjrzyj się terminalowi. Na samej górze powinien być widoczny wiersz podobny do poniższego: 1 Your code is running at https://obrazkowoprogramista.c9.io. 2 => Booting WEBrick 3 … …a pod nim mnóstwo innych komunikatów. Pozwól serwerowi działać przez kilka chwil, a następnie w nowej zakładce przeglądarki wpisz widoczny adres URL (bez niepotrzebnej kropki na końcu). Pojawi się okno podobne do tego poniżej.
(Domyślna strona domowa projektu Rails) Gratulacje! Utworzyłeś swoją pierwszą aplikację Rails. Oczywiście na razie niewiele w niej jest, ale wkrótce to się zmieni! Zanim utworzysz kolejne strony aplikacji, chciałbym Ci opisać architekturę platformy Rails, tzw. architekturę MVC.
Architektura MVC Skrót MVC oznacza Model, View, Controller (model, widok, kontroler). Taka architektura umożliwia podzielenie aplikacji na osobne części i skupienie się tylko na tych, które są najważniejsze. Za chwilę przekonasz się, że to ma głębszy sens, obiecuję!
Przyjrzyjmy się więc każdej części. MODEL: modelem jest zazwyczaj baza danych. WIDOK: widokami są strony WWW, czyli coś, co widzą użytkownicy, którzy otworzą Twój adres WWW. KONTROLER: jest to proces działający w tle systemu, „sterujący” interakcją stron i bazy danych. Kontroler można porównać do kontrolera lotów, który decyduje, gdzie co ma się znaleźć, i generalnie wszystkim zarządza.
(Diagram architektury MVC) Zatem Twoja aplikacja Rails składa się z trzech różnych komponentów. Jeżeli przyjrzysz się strukturze katalogów po lewej stronie ekranu (a konkretnie katalogowi app), zauważysz w niej katalogi views, models i controllers. Jeżeli przyjrzysz się dokładniej, znajdziesz również katalog db. Nie musisz dokładnie wiedzieć, co zawierają poszczególne katalogi i do czego służą. Musisz jedynie pamiętać, że katalogi te istnieją i odpowiadają komponentom Model, Widok i Kontroler w architekturze MVC. Dlaczego to jest fajne?
Być może w tej chwili nie jest to oczywiste, ale architektura MVC jest BARDZO fajna, ponieważ pozwala skupić się na rzeczach, które są naprawdę ważne, na przykład na widokach (wyglądzie stron), gdy tymczasem całą skomplikowaną obsługą bazy danych zajmie się platforma Rails (za pomocą kontrolera działającego w tle). Programuję komputery od siódmego roku życia, ale bazy danych do dziś przyprawiają mnie o ból głowy. Wiem, jak one działają, jak ich używać, i korzystałem z nich setki razy. Ale nie lubię ich! Zawsze czegoś nie wiem, zawsze coś zepsuję i generalnie z bazami danych mam po prostu złe doświadczenia. Platforma Rails jest dla mnie fantastyczną rzeczą, ponieważ w ogóle nie muszę zajmować się bazą danych. Rails wykonuje całą ciężką robotę za mnie! Wystarczy, że wydam polecenie: „Hej, utwórz tabelę z takimi a takimi kolumnami zawierającymi dane takiego a takiego typu”, a całą resztę wykona platforma. W miarę postępów w pracy z tą książką stanie się to bardziej zrozumiałe, więc teraz musisz mi zaufać!
Pliki gemów Oprócz architektury MVC musisz znać jeszcze jeden ważny komponent, jakim jest gem. Gem jest naprawdę fajny. Jest to element, który pozwala bardzo szybko tworzyć naprawdę ciekawe aplikacje. Zawsze, gdy postanowisz zrobić coś ciekawego lub skomplikowanego, ale nie będziesz chciał samodzielnie wpisywać kodu (a zawsze tak jest, prawda?), korzystaj po prostu z gemów. Gem wprowadza do aplikacji nowe funkcjonalności. Niemal każdą rzecz, jaką będziesz chciał utworzyć, możesz znaleźć w gemach. Chcesz, aby użytkownicy logowali się na Twoją stronę i aktualizowali informacje o sobie? Napisanie kodu, który realizowałby tę funkcjonalność, wymagałoby poświęcenia mnóstwa czasu i wysiłku. Zamiast tego wystarczy sięgnąć po gem. Chcesz, aby użytkownicy umieszczali obrazy na Twojej stronie? Skorzystaj z gema paperclip. Na tym to właśnie polega.
W tej książce wykorzystanych zostało mnóstwo gemów. Przyzwyczaisz się do ich instalacji i stosowania. Na razie chcę tylko przedstawić Ci ich ideę. Strona RubyGems.org jest ogólnoświatowym repozytorium gemów. Możesz w nim znaleźć potrzebny gem i zapoznać się z jego dokumentacją. Niektóre gemy są dobrze opisane, inne wcale. Nie wiem, ile jest gemów w repozytorium, ale do dzisiejszego dnia zostały one pobrane 5 835 918 132 razy. Prawie sześć miliardów… Imponujący wynik! Dodawanie gemów do projektu jest całkiem proste i nie będę teraz zanudzał Cię szczegółami procesu, ponieważ niedługo będzie to oczywiste. Teraz opiszę tylko podstawowy proces. Twoja aplikacja zawiera plik o nazwie Gemfile, w którym należy wpisać nazwy wszystkich gemów, jakie zostaną wykorzystane. Plik Gemfile jest widoczny po lewej stronie ekranu w dolnej części listy plików. Kliknij i otwórz ten plik (patrz rysunek poniżej).
(Plik Gemfile) Jak widać, znajdują się w nim już jakieś gemy. Platforma Rails instaluje je automatycznie podczas tworzenia projektu. Oczyść teraz trochę ten plik. Często w kodzie stosuje się komentarze (są to wiersze zaczynające się od znaku #), ponieważ dzięki nim kod jest bardziej czytelny. Jednak w tym przypadku komentarze tylko przeszkadzają. Usuń więc je wszystkie i uprość trochę plik.
(Oczyszczony z komentarzy plik Gemfile) Tak zatem wygląda Twój plik Gemfile. Aby dodać nowego gema, wpisz po prostu jego nazwę i wersję w nowym wierszu pliku. Następnie w terminalu wpisz następujące polecenie: 1 $ bundle install 2 W ten sposób zostaną zainstalowane wszystkie gemy, które zostały dodane od chwili poprzedniego wykonania polecenia bundle install. Zazwyczaj po zainstalowaniu gemów dobrą praktyką jest zamknięcie terminala z serwerem Rails i ponowne uruchomienie aplikacji. Ja zawsze zapominam o ponownym uruchomieniu serwera, więc zazwyczaj po zainstalowaniu gema i odświeżeniu strony pojawia się komunikat o błędzie. Wtedy stukam się w głowę, aby na przyszłość pamiętać o ponownym uruchomieniu serwera i aby wszystko działało jak należy. W przypadku niektórych gemów wymagane jest jedynie podanie w pliku Gemfile ich nazw i numerów wersji, a potem użycie polecenia bundle install. Inne gemy wymagają podania specjalnych instrukcji, a ich
instalacja jest nieco bardziej pracochłonna. W dokumentacji do każdego gema znajdziesz szczegółowe instrukcje, jak go zainstalować i stosować w aplikacji. Ale tym wszystkim zajmiemy się później. W miarę rozwijania aplikacji Obrazkowo w tej książce dodawanie gemów stanie się oczywiste.
Dodawanie stron do aplikacji WWW Dość już teoretyzowania o architekturze MVC, teraz dodaj kilka stron do swojej aplikacji. Wróć do środowiska programistycznego i uaktywnij główny terminal (nie ten, w którym wciąż działa serwer WWW). Wpisz w nim poniższe polecenie: 1 $ rails generate controller home index 2 Co to polecenie robi? Powoduje dodanie do aplikacji Rails nowej strony zwanej indeksem. Strona jest tworzona w katalogu domowym i przygotowywany jest dla niej kontroler. Po wpisaniu tego polecenia pojawi się sporo niezrozumiałych komunikatów: 1 create 2 route 3 invoke
app/controllers/home_controller.rb get 'home/index' erb
Mnóstwo informacji! Na razie nie musisz wiedzieć, co one oznaczają. Wystarczy wiedzieć, że w katalogu domowym został utworzony nowy kontroler i strona o nazwie index. Teraz wystarczy wrócić do przeglądarki i w nowej zakładce wpisać: https://obrazkowo-programista.c9.io/home/index Pamiętaj, aby wyraz programista zastąpić nazwą swojego konta w systemie c9.io, a obrazkowo — nazwą swojego projektu (Zaczekaj: czy swojemu projektowi nadałeś nazwę obrazkowo? Na pewno!). Jeżeli wszystko poszło zgodnie z planem, powinieneś zobaczyć coś takiego:
Oczywiście, niewiele jest na tej stronie. Ale za to jak łatwo było ją utworzyć! Teraz możesz ją edytować i nadać jej dowolny wygląd. Ale gdzie dokładnie znajduje się ten plik? W następującym katalogu: 1 /home/ubuntu/workspace/app/views/home/index.html.erb 2 Plik znajduje się w katalogu wskazanym w wierszu poleceń. Ale nie trzeba do niego przechodzić za pomocą wiersza poleceń. Zamiast tego wystarczy dwukrotnie kliknąć katalog znajdujący się po lewej stronie ekranu. Kliknij dwukrotnie katalog, aby go rozwinąć, następnie kliknij dwukrotnie katalogi views i home. Proszę bardzo! W katalogu home znajduje się plik index.html.erb. Kliknij go, a w środku ekranu otworzy się edytor tekstowy.
(Drzewo katalogów środowiska programistycznego z plikiem /app/views/home/index.html.erb)
UWAGA! Czy zauważyłeś, że nazwa tego pliku kończy się na .erb? Nazwy większości stron WWW kończą się na .html, ale platforma Rails dodaje rozszerzenia .html.erb, umożliwiające osadzanie w stronach obiektów Ruby (.erb). Osadzaniem obiektów zajmiemy się wkrótce.
Przyjrzyj się plikowi index.html.erb otwartemu w edytorze tekstowym: 1
Home#index
2
Find me in app/views/home/index.html.erb
3 Jak poprzednio, na razie niewiele jest w tym pliku, ale bezpośrednio w edytorze można go zmieniać i nadać stronie dowolny wygląd. Zmień zatem plik index.html.erb. Zastąp jego zawartość poniższą treścią
(albo dowolną inną): 1
Witaj w mojej aplikacji!
2
Niebawem rzuci wszystkich na kolana...
Zapisz stronę, naciskając klawisze Ctrl+S — albo Command+S, jeżeli używasz systemu Mac. Teraz wróć do przeglądarki i odśwież stronę.
(Uaktualniona strona https://obrazkowo-programista.c9.io/home/index) Prawda, że to było bardzo proste? Oczywiście wciąż jest wiele do zrobienia, bo tak naprawdę niewiele zmieniłeś w tym pliku, ale wkrótce się tym zajmiemy!
Przekierowanie strony Poznałeś nieco architekturę MVC, więc zobacz ją teraz w akcji. W tej chwili
plik ze stroną index ma adres https://obrazkowoprogramista.c9.io/home/index. Jednak chcesz, aby była to strona główna o adresie https://obrazkowoprogramista.c9.io. Jak zatem trzeba to zrobić? Powoli. Wszystko, co trzeba zrobić, to nieco zmienić przekierowanie (czyli sposób myślenia kontrolera) w projekcie. Przyjrzyj się plikowi /config/routes.rb. /config/routes.rb 1 Rails.application.routes.draw do 2 get 'home/index' 3 . 4 . 5 end 6 Odszukaj plik w drzewie katalogów po lewej stronie ekranu i kliknij go dwukrotnie, aby otworzyć edytor tekstowy. Na początku pliku powinno się znajdować kilka wierszy tekstu, a dalej cała seria wierszy oznaczonych jako komentarze (zawierających znak # na początku). O co tu chodzi? Ten plik zawiera informację, że Twój plik index.html.erb znajduje się pod adresem home/index. Dlatego strona z indeksem jest dostępna pod adresem: https://obrazkowo-programista.c9.io/home/index W praktyce, gdy w przyszłości będziesz dodawał kolejne strony, będziesz musiał wskazywać ich położenie w powyższym pliku. Prawdopodobnie będzie on bardzo podobny do przedstawionego (polecenie get 'home/index'), tylko inne będą adresy stron (np. polecenie get 'home/about' będzie oznaczało przekierowanie dla adresu /home/about itd.). Ale teraz musisz zmienić jeden wiersz tak, aby serwer „wiedział”, że ścieżka do strony z indeksem jest inna niż /home/index. Chcesz, aby była to strona główna (tj. strona dostępna pod głównym adresem https://obrazkowo-
programista.c9.io). W tym celu wystarczy zmienić plik jak poniżej: /config/routes.rb 1 Rails.application.routes.draw do 2 root 'home#index' 3 . 4 . 5 end 6 Co konkretnie zrobiłeś? Zmieniłeś wiersz get 'home/index' na root 'home#index'. Zwróć uwagę, że zamiast znaku / użyłeś znaku #. Tak trzeba zrobić, aby oznaczyć stronę jako główną. Jeżeli teraz zapiszesz zmieniony właśnie plik routes.rb i odświeżysz w przeglądarce stronę https://obrazkowoprogramista.c9.io/home/index, pojawi się komunikat o błędzie, ponieważ strona o takim adresie już nie istnieje! Jeżeli natomiast otworzysz adres https://obrazkowo-programista.c9.io, pojawi się strona index, a więc dokładnie to, o co chodziło. Sytuacja się rozwija! Koniecznie zapisz swoją pracę!
Kontrola wersji w systemach GitHub i Bitbucket Jednym z najważniejszych obowiązków programisty jest ustanowienie kontroli wersji kodu, umożliwiającej śledzenie zmian dokonywanych w rozwijanej aplikacji. Jest to jedna z dobrych praktyk, posiadająca głębszy sens. Jeżeli całkowicie zepsujesz aplikację (a prawdopodobnie tak się stanie w pewnym momencie), dobrze będzie cofnąć się do chwili sprzed tego
zdarzenia i kontynuować pracę, jakby nic się nie stało. Kontrola wersji kodu jest szczególnie przydatna w przypadku, gdy współpracujesz z innymi osobami, które wprowadzają swoje zmiany, dodają i usuwają elementy kodu. System kontroli wersji rejestruje, kto, co, kiedy i gdzie zrobił. System jest jednak równie ważny nawet wtedy, gdy programujesz samodzielnie i nawet nie zamierzasz współpracować z zespołem. Zawsze może się zdarzyć, że coś popsujesz, a dzięki systemowi będziesz mógł odtworzyć kod. Uwierz mi. Większość programistów kontroluje wersję kodu za pomocą programu o nazwie Git i zapisuje kod w zewnętrznych systemach Github lub Bitbucket, aby go dodatkowo zabezpieczyć. Do przechowywania swojego kodu możesz wybrać jeden z kilku zewnętrznych systemów. Najbardziej popularny jest GitHub i korzystają z niego chyba wszyscy programiści. W praktyce większość użytkowników traktuje swoje konto w systemie GitHub jako swego rodzaju CV. Dlaczego tak jest? Ponieważ o ile nie zapłacisz za konto, każdy wysłany do systemu GitHub kod będzie publicznie dostępny. Każdy użytkownik będzie mógł go zobaczyć, pobrać i zrobić, co tylko zechce. Dlatego potencjalni pracodawcy zawsze sprawdzą Twoje konto w serwisie GitHub, aby poznać Twoje osiągnięcia. Ten system dobrze się sprawdza w przypadku pracy nad otwartymi projektami. Ja jednak tworzę własne aplikacje w celach zarobkowych i nie chcę, aby ktokolwiek widział mój kod. Dlatego korzystam z systemu Bitbucket, umożliwiającego tworzenie bezpłatnych prywatnych repozytoriów. Opłaty są wymagane jedynie w przypadku dodawania nowych członków zespołu. Dla pojedynczych osób repozytoria są bezpłatne. Natomiast w systemie GitHub publiczne repozytoria są darmowe, płacić trzeba jedynie za repozytoria prywatne. Moim zdaniem dobrze jest korzystać z systemu GitHub, jeżeli programowanie ma być pracą na pełny etat. Jak wspomniałem, pracodawcy chcą widzieć Twoją stronę w tym systemie. Polecam korzystanie z systemu GitHub do takich celów jak praca z tą książką! Gdy będziesz tworzył kod w opisany tu sposób (jak również każdy inny), korzystaj z serwisu GitHub. W tej książce będziesz tworzył aplikację Obrazkowo. W innej książce możesz
się dowiedzieć, jak tworzyć stronę sklepu internetowego. W jeszcze innej — jak utworzyć coś w rodzaju portalu Twitter. Gdy będziesz pracował z tego rodzaju książkami i tworzył opisany w nich kod, w efekcie uzyskasz w systemie GitHub porządny zbiór projektów do pokazania swoim potencjalnym pracodawcom, którzy zatrudnią Cię za godziwą pensję, a Ty będziesz przesyłał mi co miesiąc jakąś jej część :-p Od tego, co robisz, zależy, czy będziesz korzystał z systemów GitHub i Bitbucket, czy nie. Teraz pokażę, jak skonfigurować każdy z nich.
Instalacja programu Git Zazwyczaj we własnym środowisku programistycznym trzeba zainstalować program Git, ale teraz korzystasz z niesamowitego systemu c9.io, w którym program ten już jest zainstalowany i gotowy do użycia. Wystarczy go jedynie skonfigurować, więc zrób to teraz. W terminalu wpisz 4 lub 5 poleceń: 1 $ git config --global user.name "Twoja nazwa" 2 $ git config --global user.email [email protected] 3 $ git config --global push.default matching 4 $ git config --global alias.co checkout 5 $ git init 6 Oczywiście w pierwszym poleceniu w miejscu Twoja nazwa musisz wpisać swoją nazwę, podobnie jak wiersz ze swoim adresem e-mail. Pamiętaj, że program Git jest przeznaczony do rejestrowania zmian wprowadzanych przez różnych użytkowników, więc musisz podać swoją nazwę i adres e-mail. Jak zapewne zauważyłeś, po wpisaniu ostatniego polecenia (w wierszu 5.), na ekranie pojawiło się kilka komunikatów, wśród nich taki jak ten:
1 $ git init 2 Initialized empty Git repository in /home/ubuntu/workspace/.git/ 3 Komunikat ten oznacza, że dla wszystkich plików niezbędnych do kontrolowania wersji kodu został w środowisku programistycznym utworzony nowy katalog o nazwie git. Jeżeli jesteś ciekaw, co w tym katalogu się znajduje, otwórz go w terminalu za pomocą polecenia cd (pamiętaj, aby wrócić do głównego katalogu za pomocą polecenia cd ../, gdy skończysz się rozglądać). Teraz, gdy program Git jest skonfigurowany w środowisku programistycznym, musisz umieścić pliki projektu w lokalnym repozytorium. Gdy to zrobisz, możesz je „wypchnąć” (ang. push) do systemów GitHub lub Bitbucket. Umieszczenie plików projektu w lokalnym repozytorium jest procesem dwuetapowym: 1 $ git add . 2 Powyższe polecenie umieszcza wszystkie pliki projektu w swego rodzaju obszarze przejściowym. Oznacza ono powiadomienie „Hej, moje pliki są gotowe do wysłania!”. Kropka w poleceniu reprezentuje wszystkie pliki. Następnie musisz „zatwierdzić” pliki w repozytorium. Zatwierdzenie oznacza przeniesienie plików z obszaru przejściowego do repozytorium. 1 $ git commit -am "pierwsze wysłanie" 2 W powyższym poleceniu należy zwrócić uwagę na kilka rzeczy, przede wszystkim na opcję –am, zlecającą programowi Git pobranie wszystkich plików (od angielskiego słowa all — „wszystkie”) z obszaru przejściowego i opatrzenie ich komentarzem (od angielskiego słowa message — „komunikat”). Komentarz w tym przypadku brzmi „pierwsze wysłanie”. W komentarzu możesz wpisać dowolną treść, wystarczy umieścić go w cudzysłowach lub apostrofach. Komentarze odgrywają ważną rolę podczas kontroli wersji kodu, ponieważ umożliwiają wyróżnienie wszystkich plików zmienionych od czasu umieszczenia poprzedniego komentarza. Dzięki temu łatwiej jest kontrolować kod w systemach GitHub i Bitbucket i wyszukiwać konkretne
wprowadzone w kodzie zmiany. Załóżmy, że dodałeś właśnie do swojego projektu stronę O mnie i chcesz zatwierdzić zmiany. W takim przypadku powinieneś wpisać polecenie $ git commit –am "dodana strona o mnie". Taka jest funkcja komentarzy/komunikatów w systemie kontroli wersji kodu. Musisz przyzwyczaić się do wpisywania powyższych dwóch poleceń oraz trzeciego, wysyłającego kod do systemu GitHub lub Bitbucket.
Przywracanie kodu Jeżeli popełnisz katastrofalny błąd, możesz odtworzyć swoją aplikację (o ile nie zatwierdziłeś jeszcze błędnego kodu). W tym celu musisz jedynie użyć następującego polecenia: 1 $ git checkout -f 2 Błąd zniknie bez śladu.
GitHub czy Bitbucket? Teraz musisz zadecydować, czy swój kod będziesz przechowywał w systemie GitHub, czy Bitbucket. Ich adresy są następujące: GitHub.com Bitbucket.org Otwórz jeden z powyższych adresów i załóż bezpłatne konto.
System Bitbucket Jak wspomniałem, pokażę teraz, jak korzystać z obu systemów. Ponieważ jednak preferuję Bitbucket, zacznę od niego.
Po założeniu konta musisz utworzyć klucz SSH, dzięki któremu system będzie wiedział, że jesteś tym, za kogo się podajesz podczas wysyłania kodu ze środowiska programistycznego. Zwykle trzeba najpierw utworzyć klucz publiczny, ale w Twoim środowisku klucz ten już jest. Możesz go wyświetlić w terminalu za pomocą następującego polecenia: 1 $ cat ~/.ssh/id_rsa.pub 2 Na ekranie powinien pojawić się niezrozumiały wynik, podobny do poniższego:
ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQDg4sk2R4EigtmQ3WLuw03EFMN/fNGkpO ↳SdGpxK3z9Bz75UFDPCnhjvCNrcYiARzfTN1pqBOjKEq74ZWoVtdwcpjhkePHD ↳BAs14oRhTsVIpZGtt/RsVe8OfsXsc+lIpKGWUAMtg4hwORni6qeY845OWRrde ↳GBx5oHEqAglOaBTSS/aFewwcQe8WuXrWlrQy4C63Oas/+mLgYPhzjirN9eiHr ↳BxxAPelia5yLf0grWG0j7hq4vyZM0QNyyKLh2LpURwzmM9b/Ur9hL7OMjGUbp [email protected] Jest to publiczny klucz SSH. Zaznacz cały klucz za pomocą myszy i skopiuj go do schowka, naciskając klawisze Ctrl+C (Command+C w systemie Mac), a następnie wklej w systemie Bitbucket. Zaloguj się na swoje konto i kliknij małą ikonę w prawym górnym rogu ekranu. Następnie kliknij polecenie Manage account (zarządzanie kontem) i odnośnik SSH keys (klucze SSH). W oknie, które się pojawi, kliknij przycisk Add key (dodaj klucz) i w polu Key (klucz) wklej (Ctrl+V) skopiowany wcześniej klucz SSH. Na koniec kliknij przycisk Add key.
(Okno do dodawania klucza SSH w systemie Bitbucket.org) Jak na razie idzie dobrze. Teraz musisz utworzyć nowe repozytorium w systemie Bitbucket. Kliknij przycisk Create (utwórz), następnie polecenie Create repository (utwórz repozytorium) i w polu Name (nazwa) wpisz nazwę swojej aplikacji. W innych polach można pozostawić wartości domyślne. Na koniec kliknij przycisk Create repository (rysunek poniżej).
(Okno do tworzenia repozytorium w systemie Bitbucket.org) Teraz w terminalu w środowisku c9.io musisz wpisać kilka poleceń: 1 $ git remote add origin [email protected]: /obrazkowo.git 2 $ git push -u origin --all 3 Pamiętaj o zmianie części na swoją nazwę konta oraz /pinterested.git na nazwę swojej aplikacji w systemie Bitbucket. Załatwione. Od tej chwili za każdym razem gdy będziesz chciał zapisać kod i wysłać go do systemu Bitbucket, wpisuj następujące trzy polecenia: 1 $ git add . 2 $ git commit -am 'Twój komentarz'
3 $ git push 4 Pierwsze dwa polecenie już znasz — umieszczają one Twoje pliki w lokalnym repozytorium programu Git. Trzecie polecenie (git push) wysyła cały zatwierdzony kod do systemu Bitbucket. W tym momencie system kontroli wersji jest skonfigurowany i gotowy do użycia!
System GitHub Teraz wykonaj te same czynności w systemie GitHub. Pamiętaj, aby nie używać obu systemów jednocześnie, tylko wybrać jeden z nich. Pierwszą czynnością jest otwarcie strony Github.com i założenie bezpłatnego konta. Następnie musisz wykonać te same podstawowe, opisane wcześniej kroki, w których tworzony był publiczny klucz SSH dla systemu Bitbucket: 1 $ cat ~/.ssh/id_rsa.pub 2 Na ekranie powinien pojawić się niezrozumiały wynik, podobny do poniższego:
ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQDg4sk2R4EigtmQ3WLuw03EFMN/fNGkpO ↳SdGpxK3z9Bz75UFDPCnhjvCNrcYiARzfTN1pqBOjKEq74ZWoVtdwcpjhkePHD ↳BAs14oRhTsVIpZGtt/RsVe8OfsXsc+lIpKGWUAMtg4hwORni6qeY845OWRrde ↳oHEqAglOaBTSS/aFewwcQe8WuXrWlrQy4C63Oas/+mLgYPhzjirN9eiHrKuRg ↳APelia5yLf0grWG0j7hq4vyZM0QNyyKLh2LpURwzmM9b/Ur9hL7OMjGUbp [email protected] Jest to publiczny klucz SSH. Zaznacz cały klucz za pomocą myszy i skopiuj go do schowka, naciskając klawisze Ctrl+C (lub Command+C w systemie Mac), a następnie wklej w systemie GitHub. Zaloguj się do systemu GitHub i kliknij niewielką ikonę w prawym górnym rogu ekranu.
Następnie kliknij polecenie Settings (ustawienia), później odnośnik SSH keys i przycisk Add SSH key. W polu Title (tytuł) wpisz nazwę aplikacji, na przykład Obrazkowo. W polu Key wklej klucz SSH i kliknij przycisk Add key. Teraz możesz sprawdzić, czy wszystko działa zgodnie z oczekiwaniami. Przejdź do terminala w środowisku programistycznym i wpisz następujące polecenie: 1 $ ssh -T [email protected] 2 Otrzymasz prawdopodobnie następujący komunikat: 1 The authenticity of host 'github.com (207.97.227.239)' can't be established. 2 RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48. 3 Are you sure you want to continue connecting (yes/no)? 4 (Uwierzytelnienie w systemie 'github.com z adresu 207.97.227.239' niemożliwe. Odcisk klucza RSA: 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48. Czy chcesz kontynuować połączenie (tak/nie)?) Tak powinno być. Wpisz yes i naciśnij Enter. Pojawi się coś takiego: 1 Hi programista! You've successfully authenticated, but GitHub does not 2 provide shell access. 3 (Witaj, ! Uwierzytelnienie przebiegło pomyślnie, ale system GitHub nie oferuje dostępu z poziomu powłoki.) Udało się! Teraz musisz utworzyć w systemie GitHub repozytorium, w którym będziesz przechowywać swój projekt. Wróć do strony GitHub i odszukaj w górnym prawym rogu ekranu znak
dodawania (+), kliknij go, a następnie kliknij polecenie New repository (nowe repozytorium). Wpisz w polu Repository name (nazwa repozytorium) krótką i łatwą do zapamiętania nazwę, na przykład Obrazkowo. Teraz musisz zadecydować, czy Twoje repozytorium ma być publiczne, czy prywatne. Jeżeli założyłeś bezpłatne konto, musisz wybrać opcję Public (konto publiczne). Nie zaznaczaj pola Initialize the repository with a README (zainicjuj repozytorium, zakładając plik README), ponieważ w środowisku programistycznym już użyłeś polecenia $ git init. Kliknij przycisk Create repository (utwórz repozytorium). Teraz wróć do terminala i wyślij kod do systemu GitHub: 1 $ git push 2 Tak to działa! Pamiętaj, aby za każdym razem, gdy będziesz chciał wysłać kod, musisz użyć trzech poleceń: 1 $ git add . 2 $ git commit -am 'Twój komentarz' 3 $ git push 4 To wszystko!
Udostępnianie aplikacji za pomocą usługi Heroku System kontroli wersji kodu jest więc skonfigurowany i uruchomiony. Teraz musisz się zapoznać z udostępnianiem aplikacji. Jednym z doskonałym elementów systemu Ruby on Rails jest Heroku, czyli usługa WWW służąca do udostępniania aplikacji utworzonych za pomocą platformy Rails.
Zazwyczaj gdy ma się do czynienia ze stronami WWW, trzeba w jakimś zakresie zarządzać serwerami, na przykład instalować poprawki, aktualizować oprogramowanie i troszczyć się o bezpieczeństwo. To może być męczące. Usługa Heroku jest inna. Tutaj wystarczy jedynie wysłać kod mniej więcej w taki sam sposób jak do systemów GitHub czy Bitbucket. W praktyce oznacza to wpisanie jednego polecenia w terminalu. Twój kod zostanie wysłany do usługi Heroku, gdzie zostanie automatycznie zainstalowany, skonfigurowany i dodatkowo przetworzony w magiczny sposób tak, aby stanowił w pełni funkcjonalną stronę WWW. To wszystko, załatwione. Nie musisz się martwić uruchamianiem serwera, aktualizacją jego oprogramowania, wydajnością ani bezpieczeństwem. Czy napisałem, że usługa Heroku jest bezpłatna? Cóż… Usługa jest bezpłatna na podstawowym poziomie. Funkcjonuje ona zgodnie z zasadą „Płać w miarę, jak rośniesz”. W usłudze tej stosowana jest jednostka o nazwie „dyno”. Jedno dyno dostaje się za darmo przy instalacji każdej aplikacji. Jedno dyno zapewnia moc serwera wystarczającą do utworzenia, uruchomienia i korzystania ze strony WWW przez kilka osób jednocześnie. Im więcej osób będzie jednocześnie korzystało z Twojej aplikacji, tym większa będzie potrzebna moc serwera i szybsze łącze. Dla swojej aplikacji będziesz musiał zwiększyć liczbę jednostek dyno. To bardzo łatwe, ponieważ nic poza tym nie trzeba robić. Wystarczy zalogować się na swoje konto i zwiększyć liczbę dyno. Zatem za pomocą kilku kliknięć można zwiększyć moc strony WWW odpowiednio do potrzeb tak, aby obsługiwała wymagany ruch. Zatem płaci się jedynie za moc, która jest potrzebna. Jest to doskonałe rozwiązanie dla nowych, świeżo założonych stron. W miarę jak Twoja strona będzie zyskiwała coraz większą popularność i coraz więcej osób będzie z niej korzystać, będziesz musiał odpowiednio zwiększać liczbę dyno. I to wszystko. Jest to doskonała usługa, unikatowa w branży udostępniania aplikacji. Jaka jest jej cena? Obecnie 2 dyno kosztują 50 dolarów miesięcznie; 3 dyno — 75
dolarów miesięcznie. Cenę można sprawdzić pod adresem: https://www.heroku.com/pricing. Na podanej wyżej stronie znajdują się suwaki, za pomocą których można sprawdzić, ile miesięcznie kosztuje potrzebna liczba dyno, i dobrać odpowiednią. Są oczywiście inne usługi, za pomocą których możesz udostępnić swoją aplikację, ale nigdy ich nie sprawdzałem. Usługa Heroku jest pod tym względem liderem. Załóż więc bezpłatne konto w usłudze Heroku i skonfiguruj swoją aplikację. Zazwyczaj gdy korzysta się ze środowiska programistycznego w systemach Mac/Windows/Linux, trzeba pobrać i zainstalować aplikację toolbelt (toolbelt.heroku.com). Ponieważ jednak korzystasz ze środowiska w chmurze, aplikacja toolbelt jest już zainstalowana. Możesz to sprawdzić, wpisując w terminalu następujące polecenie: 1 $ heroku --version 2 Powinien pojawić się wiersz z informacją o wersji zainstalowanej aplikacji Heroku toolbelt. Teraz wystarczy się zalogować do usługi Heroku za pomocą terminala: 1 $ heroku login 2 Zostaniesz poproszony o podanie swojego adresu e-mail i hasła. Użyj tego samego adresu i hasła, które podałeś podczas zakładania konta w usłudze Heroku. Teraz musisz utworzyć klucz SSH. W odróżnieniu od systemów GitHub i Bitbucket, nie kopiuje się go i nie wkleja na stronie WWW. Korzysta się w tym celu z terminala: 1 $ heroku keys:add 2
Usługa Heroku sama odszuka Twój klucz SSH. Na koniec musisz utworzyć właściwą aplikację w usłudze Heroku: 1 $ heroku create 2 W terminalu pojawi się nieco informacji. Przyjrzyj się im. Czy zauważyłeś adres URL? Jest to adres Twojej nowej aplikacji. Oczywiście nie wysłałeś jeszcze kodu, ale gdy to zrobisz, będzie on dostępny pod takim lub podobnym adresem: https://calm-island-8378.herokuapp.com. Zapewne adres ten wygląda dziwnie (prawdopodobnie jest generowany automatycznie). Możesz go zmienić na łatwiejszy do zapamiętania. W tym celu musisz jedynie wpisać w terminalu proste polecenie: 1 $ heroku rename 2 Jeżeli na przykład chcesz nadać swojej aplikacji nazwę obrazkowo, wpisz polecenie: 1 $ heroku rename obrazkowo 2 Po zmianie nazwy adres URL jest następujący: https://obrazkowo.herokuapp.com Twój adres może być inny, w zależności od nazwy, jaką nadasz aplikacji. W usłudze Heroku można również łatwo utworzyć własną domenę, na przykład www.obrazkowo.com. Pod koniec książki pokażę, jak to zrobić. Na razie nie wybiegajmy przed szereg. Na czas tworzenia aplikacji można używać adresu cokolwiek.herokuapp.com.
Wysyłanie kodu do usługi Heroku
Teraz, po skonfigurowaniu usługi Heroku, czas wysłać do niej kod. Czynność ta jest bardzo podobna do wysyłania kodu do systemów GitHub i Bitbucket. Należy użyć tych samych trzech poleceń oraz dodatkowego czwartego, wysyłającego kod do usługi Heroku: 1 $ git add . 2 $ git commit –am "Twój komentarz" 3 $ git push 4 $ git push heroku master 5 Pierwsze trzy polecenia są Ci już znane, powodują zapisanie zmian w repozytorium Git i wysłanie kodu do systemu Bitbucket (lub GitHub, jeżeli taki wybrałeś). Jedyną różnicę stanowi ostatnie polecenie git push heroku master, które po prostu wysyła cały kod do usługi Heroku. Po wpisaniu powyższych poleceń zazwyczaj trzeba poczekać kilka minut. W tym czasie na ekranie pojawi się mnóstwo niezrozumiałych komunikatów. To normalne. System Rails po prostu wykonuje swoją robotę. Po wysłaniu kodu do usługi Heroku aplikacja jest gotowa! Wpisz w przeglądarce adres obrazkowo.herokuapp.com (albo inny, który zdefiniowałeś), aby zobaczyć swoją aplikację w działaniu. Oczywiście na razie jest tego niewiele, ale od tej chwili sprawy potoczą się szybciej.
UWAGA! Zanim wyślesz po raz pierwszy kod do usługi Heroku, musisz wprowadzić małą zmianę w pliku Gemfile. W tej chwili aplikacja wykorzystuje prostą bazę danych o nazwie sqlite3, instalowaną razem z systemem Rails. Usługa Heroku nie pozwala korzystać z tej bazy, dlatego trzeba zmienić plik Gemfile. Otwórz go i usuń poniższy wiersz: /Gemfile 1 . 2 .
3 gem 'sqlite3' 4 . 5
Usuń w całości powyższy wiersz, a następnie na końcu pliku wpisz poniższy kod: /Gemfile 1 . 2 . 3 group :development, :test do 4
gem 'sqlite3'
5 end 6 7 group :production do 8
gem 'pg', '0.18.2'
9
gem 'rails_12factor', '0.0.3'
10 end 11 Jeżeli przyjrzysz się kodowi, zauważysz, że instruuje on aplikację, aby w lokalnym środowisku programistycznym (jak również w testowym, które nie jest opisane w tej książce) korzystała z bazy sqlite3, natomiast w środowisku produkcyjnym (w usłudze Heroku) z baz pg i rails_12factor. Skrót pg oznacza bazę PostgreSQL stosowaną w usłudze Heroku (baza rails_12factor jest dodatkiem do niej). Po wprowadzeniu powyższych zmian w pliku Gemfile musisz wpisać w terminalu nieco inne niż zwykle polecenie bundle install:
1 $ bundle install --without production 2 Opcja --without production jest wskazówką dla systemu Rails, aby nie korzystał z bazy PostgreSQL. Teraz zapisz swoją pracę i wyślij po raz pierwszy kod do usługi Heroku: 1 $ git add . 2 $ git commit –am "Twój komentarz" 3 $ git push 4 $ git push heroku master
Następny krok — uzyskiwanie pomocy Jesteś prawie gotowy, aby zacząć pisać prawdziwy kod. Będziesz zaskoczony, jak szybko utworzysz swoją aplikację. Jednak zanim zaczniesz, krótko opowiem o błędach. Mówi się, że programowanie komputerów w 90% polega na poprawianiu błędów. Generalnie niewielką część czasu (około 10%) spędza się na pisaniu kodu, a pozostałe 90% na poprawianiu popełnionych w tym czasie błędów. Oczywiście ta sama zasada obowiązuje w platformie Rails. Wiele rzeczy może pójść źle, więc na pewno tak się stanie. Dlatego to żaden wstyd prosić o pomoc, gdy napotka się problem, którego nie sposób rozwiązać. W praktyce ma to pierwszorzędne znaczenie. Jako programista często będziesz szukał pomocy za pomocą wyszukiwarki Google. Na szczęście platforma Rails dostarcza szczegółowe informacje o błędach. Zazwyczaj wystarczy skopiować opis błędu i wkleić go w wyszukiwarce. Może się zdarzyć, że ktoś inny napotkał już Twój problem i opisał, jak go rozwiązać, czy to na forum, czy na blogu, czy w innym miejscu. Najczęściej szukając pomocy za pomocą Google, zostaniesz skierowany na stronę
StackOverflow.com. Strona StackOverflow.com jest w rzeczywistości portalem społecznościowym wszystkich programistów, nie tylko od platformy Rails. Użytkownicy zadają tam pytania, a inni na nie odpowiadają. Jest to społeczność z prawdziwego zdarzenia, dlatego bardzo zachęcam do utworzenia bezpłatnego konta i zapoznania się z tym portalem, ponieważ w swojej pracy na pewno będziesz potrzebował wsparcia od innych programistów. Na potrzeby pracy z tą książką szczególnie polecam natomiast zapisanie się na szkolenie na stronie Codemy.com (w jęz. angielskim). Szczegółowe informacje dostępne są pod adresem: http://Codemy.com/rails. Dzięki szkoleniu nie tylko zapoznasz się z każdym rozdziałem tej książki przedstawionym w formie wideo, ale również ja będę mógł odpowiedzieć na wszystkie Twoje pytania. Jeżeli w pewnym momencie utkniesz, po prostu wpisz pod filmem swoje pytanie, a ja na nie odpowiem w ciągu kilku godzin (jestem tam obecny cały czas). Tak czy owak, nie wahaj się prosić o pomoc — każdy tak robi (ja również)!
Rozdział 2. Tworzenie prostej aplikacji Zatem skonfigurowałeś swoje środowisko programistyczne, system kontroli wersji kodu działa i jesteś gotów w każdej chwili udostępnić swoją aplikację w usłudze Heroku. Czas więc zacząć tworzyć aplikację! W tym rozdziale utworzysz nowe strony swojej aplikacji. W następnym rozdziale nadasz im różne style za pomocą platformy Bootstrap. Jest to niezwykle prosta w użyciu platforma stylów CSS umożliwiająca tworzenie efektownych stron WWW zupełnie bez znajomości zasad ich projektowania. Zanim jednak poznasz platformę Bootstrap, dodaj nową stronę do swojej aplikacji. W tej chwili jest tylko strona index, ale prawdopodobnie każda aplikacja, jaką kiedykolwiek utworzysz, będzie składała się z więcej niż jednej strony. Jak można więc utworzyć dodatkowe strony?
Dodawanie nowych stron do aplikacji Utwórz stronę O mnie. Większość witryn taką ma. Dodanie strony jest bardzo proste i w praktyce składa się z trzech kroków: 1. ręcznego utworzenia strony w katalogu Views; 2. dodania strony do kontrolera (do tej pory nie zajmowaliśmy się jeszcze kontrolerem); 3. ustawienia w pliku /config/routes.rb ścieżki do strony. Pierwszy krok jest prosty, wystarczy ręcznie utworzyć stronę w katalogu Views. Ogólnie mówiąc, trzeba utworzyć stronę w tym samym katalogu
(folderze), w którym znajduje się strona index, aczkolwiek nie jest to bezwzględny wymóg. W tym przypadku jest to katalog /app/views/home/. Aby utworzyć nową stronę, kliknij po prostu prawym przyciskiem myszy katalog /app/views/home/, widoczny po lewej stronie okna środowiska programistycznego, i wybierz polecenie New File (nowy plik).
(Tworzenie nowej strony — kliknij prawym przyciskiem myszy katalog /app/views/home i wybierz polecenie New File) W katalogu /app/views/home/ zostanie utworzony nowy plik, któremu musisz nadać nazwę, na przykład about.html.erb. Pamiętaj, że większość stron WWW ma rozszerzenie .html, natomiast w Twoim przypadku jest to .html.erb, ponieważ strona będzie zawierała osadzone obiekty języka Ruby (za chwilę poznasz przykład takiej strony). Zatem strona about.html.erb już istnieje, ale nic nie zawiera. Kliknij ją dwukrotnie, aby otworzyć ją w edytorze. Kliknij dwukrotnie plik index.html.erb znajdujący się w tym samym katalogu, aby jedynie przypomnieć sobie, jak on wygląda. W tej chwili plik zawiera tylko kilka wierszy: 1
Witaj w mojej aplikacji
2
Niebawem rzuci wszystkich na kolana...
3
Ale na razie to wystarczy. Wróć jednak do pliku about.html.erb. Otwórz go w edytorze (plik powinien być pusty) i wpisz następujące wiersze: 1
O mnie...
2
Nazywam się (tu Twoje imię) i tworzę aplikację Obrazkowo
3 Wpisz powyższy kod i naciśnij Ctrl+S, aby zapisać plik. W systemie Mac naciśnij klawisze Command+S. Plik już istnieje, ale aplikacja o tym jeszcze „nie wie”. Przejdź zatem do kroku drugiego i dodaj stronę do kontrolera.
Dodanie nowej strony do kontrolera Do tej pory tak naprawdę nie miałeś do czynienia z kontrolerem, ale teraz jest okazja: /app/controllers/home_controller.rb 1 class HomeController < ApplicationController 2
def index
3
end
4 end 5 Tak naprawdę to niewiele tu jest. Jest to kontroler strony domowej. Dlaczego domowej? Ponieważ na początku utworzyłeś stronę index za pomocą polecenia $ rails generate controller home index. Polecenie to utworzyło również kontroler strony domowej (oznacza ją angielskie słowo home, czyli „dom” w powyższym poleceniu). W gruncie rzeczy kontroler nie robi nic poza definiowaniem, że strona index w ogóle istnieje. Zmień go więc tak, aby „dowiedział się” o istnieniu strony
O mnie. Jest to bardzo proste: /app/controllers/home_controller.rb 1 class HomeController < ApplicationController 2
def index
3
end
4 5
def about
6
end
7 8 end 9 Dodałeś dwa proste wiersze, def about oraz end. To jest wszystko, co powinieneś zrobić. Teraz możesz przejść do trzeciego, ostatniego kroku i utworzyć ścieżkę do nowej strony.
Ustawienie ścieżki do nowej strony Eksperymentowałeś już wcześniej z plikiem routes.rb, gdy zmieniałeś ścieżkę do pliku index.html.erb, aby prowadziła ona do strony domowej. Teraz musisz dodać w nim ścieżkę do nowej strony O mnie: /config/routes.rb 1 Rails.application.routes.draw do 2 root 'home#index' 3 get 'home/about'
4 . 5 . 6 end 7 Dodałeś jedynie wiersz get 'home/about'. Pozostała zawartość pliku jest taka sama jak po dodaniu ścieżki do strony domowej. Pamiętaj o zapisaniu pliku za pomocą klawiszy Ctrl+S lub Command+S w systemie Mac. (Przestanę już przypominać o zapisywaniu pliku, dobrze? Pamiętaj po prostu, że za każdym razem, gdy zmienisz plik, musisz go zapisać za pomocą klawiszy Ctrl+S). I to wszystko. Pomyślnie utworzyłeś stronę O mnie. Otwórz przeglądarkę i wpisz w niej adres /home/abort, aby zobaczyć stronę na własne oczy: https://obrazkowo-programista.c9.io/home/about własny adres URL)
(ewentualnie
inny
Nie było to trudne, prawda? Na tym właśnie polega ręczne dodawanie strony do aplikacji. Strony można również generować automatycznie. W tym celu na samym początku, po utworzeniu strony index, musisz po prostu podać w poleceniu generate nazwy stron, które zamierzasz utworzyć. Jak pamiętasz, polecenie tworzące stronę index jest następujące: 1 $ rails generate controller home index 2 Polecenie to utworzyło stronę index i kontroler strony domowej. Mogłeś również utworzyć jednocześnie stronę O mnie (jak również każdą inną stronę) w następujący sposób: 1 $ rails generate controller home index about contact faq 2 Jak widzisz, jest to to samo polecenie, którego użyłeś do utworzenia strony index. Zostało jedynie uzupełnione o nazwy kilku dodatkowych stron (about, contact i faq — O mnie, Kontakt i Najczęściej zadawane pytania).
Polecenie to wykonuje całą pracę za Ciebie. Tworzy odpowiednie strony (about.html.erb, contact.html.erb i faq.html.erb) w katalogu /app/views/home/, jak również dodaje każdą z nich do pliku /app/controllers/home_controller.rb (krok drugi), a nawet tworzy ścieżki w pliku /config/routes.rb (krok trzeci). Tak naprawdę nie można stosować powyższego polecenia więcej niż raz. Jeżeli zacząłeś tworzenie swojej aplikacji od użycia polecenia $ rails generate controller home index, a teraz chcesz dodać nowe strony, to musisz to zrobić ręcznie w sposób opisany na początku rozdziału. Nie używaj ponownie polecenia generate, aby tworzyć nowe strony. Ten sposób działa, ale może przynieść niespodziewane efekty.
Tworzenie odnośników do stron Masz więc dwie strony (index i O mnie), które zapewne chcesz ze sobą połączyć, aby użytkownicy mogli poruszać się między nimi. W systemie Rails odnośniki obsługiwane są nieco inaczej niż w zwykłym języku HTML, gdzie wyglądają one na przykład tak: 1 O mnie 2 Jeżeli chcesz, możesz tworzyć odnośniki w ten sposób, ale system Rails oferuje lepszą metodę, mianowicie z wykorzystaniem osadzonych obiektów języka Ruby. Ten sam odnośnik wygląda wtedy następująco: 1 <%= link_to 'O mnie', home_about_path %> 2 Przyjrzyj się powyższemu wierszowi kodu, ponieważ zawiera on kilka elementów, które opiszę. Przede wszystkim zwróć uwagę na znaczniki początkowy i końcowy: 1 <%= ... %>
2 Są to znaczniki otwierający i zamykający osadzonego obiektu języka Ruby. Wszystkie tego typu znaczniki wyglądają w ten sposób (w większości przypadków, ponieważ niektóre nie zawierają znaku równości =, ale ten temat opiszę później). Polecenie link_to zawiera wskazówkę, że ma być utworzony odnośnik, a 'O mnie' jest tekstem pokazywanym na stronie. To naprawdę proste. Jedynym bardziej skomplikowanym elementem jest polecenie home_about_path, które wymaga dokładniejszego wyjaśnienia. Generalnie polecenie to służy do wskazania w aplikacji ścieżki do strony. Jak pamiętasz, utworzyłeś stronę O mnie i dodałeś ścieżkę do niej: /config/routes.rb 1 Rails.application.routes.draw do 2 root 'home#index' 3 get 'home/about' 4 . 5 . 6 end 7 Polecenie get 'home/about' zawiera informację, że ścieżka do strony O mnie ma postać home/about i do niej ma prowadzić odnośnik. Zamiast tworzyć odnośnik do tej strony, możesz użyć polecenia home_about_path. Końcówka _path (ścieżka) mówi: „Hej, to jest ścieżka do strony home_about”. Jasne, prawda? Skąd jednak wiadomo, jakie ścieżki można stosować w odnośnikach? Rzuć okiem na plik /config/routes.rb. Jest on prosty, bo na razie są tylko dwie strony. W miarę jak będziesz rozbudowywał aplikację, będziesz w tym pliku umieszczał wiele innych stron, a jego zawartość trudno będzie ocenić jednym rzutem oka.
Na szczęście jest dostępne polecenie, które możesz wpisać w terminalu, aby sprawdzić wszystkie ścieżki: 1 $ rake routes 2 Polecenie rake routes wyświetla wszystkie dostępne ścieżki, jak również ich format dla znacznika link_to. Uruchom polecenie jeszcze raz i przyjrzyj się wynikowi: 1 $ rake routes 2 Prefix Verb URI Pattern Controller#Action 3
root
GET
/
home#index
4
home_about
GET
/home/about(.:format)
home#about
5 Pierwsza kolumna zawiera ścieżki, które można zastosować ze znacznikiem link_to (trzeba jedynie dodać do nich końcówkę _path). Zwróć uwagę na ścieżkę home_about. Ale zaraz, czy ścieżka do strony index nie powinna mieć formy home_index_path? Nie! Jak widzisz, polecenie rake routes wyświetla ścieżkę do tej strony jako root. Oznacza to, że gdybyś chciał użyć jej ze znacznikiem link_to, musiałbyś to zrobić tak: 1 <%= link_to 'Strona główna', root_path %> 2 Logiczne, prawda? Teraz dodaj do swoich stron dwa odnośniki, pierwszy niech prowadzi do strony index: /app/views/home/index.html.erb 1 <%= link_to 'Strona główna', root_path %>
2 <%= link_to 'O mnie', home_about_path %> 3
Witaj w mojej aplikacji!
4
Niebawem rzuci wszystkich na kolana...
5 Zapisz i zamknij plik. Następnie utwórz odnośniki na stronie O mnie: /app/views/home/about.html.erb 1 <%= link_to 'Strona główna', root_path %> 2 <%= link_to 'O mnie', home_about_path %> 3
O mnie...
4
Nazywam się (tu Twoje imię) i tworzę aplikację Obrazkowo
5 Zapisz plik, a następnie przejdź do przeglądarki i odśwież swoją stronę: https://obrazkowo-programista.c9.io (ewentualnie swój inny adres URL) Na samej górze strony powinieneś zobaczyć dwa odnośniki. Kliknij odnośnik O mnie. Powinieneś przejść do odpowiedniej strony, na której możesz kliknąć odnośnik Strona główna, aby powrócić do poprzedniej strony. Nareszcie coś się dzieje! Nie jest to rozbudowana funkcjonalność, ale zawsze coś. Teraz można ją rozwijać!
Z tworzeniem odnośników na każdej stronie jest za dużo roboty Dodałeś więc odnośniki do dwóch stron, ale było z tym sporo roboty, ponieważ musiałeś to zrobić dla każdej strony osobno. Oczywiście, na razie są tylko dwie strony (główna i O mnie), ale zazwyczaj jest ich o wiele
więcej, nawet setki i tysiące. Nie chciałbyś edytować każdej strony osobno, aby dodać odnośnik, prawda? Oczywiście, że nie. Na szczęście Ruby oferuje rozwiązanie znane jako pliki częściowe.
Tworzenie plików częściowych Plik częściowy jest w zasadzie plikiem dołączanym. Umożliwia umieszczenie pliku z treścią w innym pliku. Tworzenie plików częściowych jest procesem dwuetapowym. 1. Najpierw należy utworzyć plik częściowy. 2. Następnie należy odwołać się do niego w innym pliku. Tworzenie pliku częściowego odbywa się w taki sam sposób jak tworzenie strony O mnie (nie trzeba jednak tworzyć do niego ścieżki w kontrolerze). Wystarczy kliknąć katalog /app/views/home/ i wybrać polecenie New File. Tu pojawia się mała różnica. Podczas wpisywania nazwy pliku musisz umieścić na jej początku znak podkreślenia. Jeżeli więc chcesz utworzyć plik częściowy o nazwie header.html.erb, musisz nadać mu nazwę _header.html.erb. Właśnie tak zrób. Kliknij prawym przyciskiem myszy katalog /app/views/home/ i utwórz nowy plik o nazwie _header.html.erb. Teraz kliknij go dwukrotnie, aby otworzyć go w edytorze, i wpisz w nim dwa odnośniki: /app/views/home/_header.html.erb 1 <%= link_to 'Strona główna', root_path %> 2 <%= link_to 'O mnie', home_about_path %> 3 Zapisz i zamknij plik. To jest pierwszy etap procesu tworzenia pliku częściowego. Przejdź do etapu drugiego. Aby odwołać się do pliku częściowego, użyj znacznika Ruby:
1 <%= render 'home/header' %> 2 To całkiem proste. Polecenie render powoduje wyświetlenie pliku częściowego w aplikacji, a 'home/header' informuje, gdzie znajduje się plik. Być może wydaje Ci się, że w poleceniu powinna być podana nazwa 'home/_header.html.erb', a nie zwykła 'home/header', ale tak nie jest. Platforma Rails „wie”, że polecenie render 'home/header' w rzeczywistości oznacza wyświetlenie pliku _header.html.erb. Zmień zatem stronę index. Umieść w niej powyższy wiersz i usuń wstawione wcześniej odnośniki: /app/views/home/index.html.erb 1 <%= render 'home/header' %> 2
Witaj w mojej aplikacji!
3
Niebawem rzuci wszystkich na kolana...
4 Zapisz plik, a następnie przejdź do przeglądarki i odśwież stronę o adresie: https://obrazkowo-programista.c9.io adresie URL)
(ewentualnie
o
innym
swoim
Strona powinna wyglądać tak samo jak poprzednio, z dwoma odnośnikami: Strona główna i O mnie na samej górze. Jedyna różnica polega na tym, że odnośniki te są pobierane z pliku częściowego. Na pewno wydaje Ci się, że dobrze byłoby zastąpić odnośniki na stronie O mnie znacznikiem <%= render 'home/header' %>, ale zaczekaj! Nie musisz tego robić, bo platforma ułatwia sprawę jeszcze bardziej. Teraz pora na omówienie pliku application.html.erb.
Pliki layouts/application.html.erb
Zapewne zauważyłeś katalog layouts w katalogu /app/views. Co w nim jest? Zawiera on specjalny plik o nazwie application.html.erb, opisujacy szkielet każdej strony Twojej aplikacji. Przyjrzyj się mu: /app/views/layouts/application.html.erb 1 2 3 4
8 9 10 11 <%= yield %> 12 13 14 15 Co tu się dzieje? Zawartość tego pliku jest odczytywana i wyświetlana w przeglądarce przy każdorazowym otwarciu strony. Zwróć uwagę na ważny wiersz zawierający znacznik <%= yield %>. Znacznik ten powoduje odczytanie i umieszczenie w tym miejscu zawartości strony.
Jeżeli więc otworzysz stronę https://obrazkowoprogramista.c9.io/home/about, to plik application.html.erb zostanie odczytany w tle, a cała zawartość pliku about.html.erb umieszczona w miejscu, w którym znajduje się znacznik <%= yield %>. Jeżeli otworzysz w przeglądarce stronę https://obrazkowoprogramista.c9.io/home/about i wyświetlisz jej kod źródłowy (kliknij prawym przyciskiem myszy w oknie przeglądarki i wybierz polecenie Pokaż źródło strony), zobaczysz kod, który wygląda tak jak plik application.html.erb.
(Widok kodu źródłowego strony https://obrazkowoprogramista.c9.io/home/about) Bardzo sprytne. Dla Ciebie oznacza to, że nie musisz umieszczać pliku częściowego w każdej stronie. Możesz po prostu umieścić go w pliku application.html.erb tuż nad znacznikiem <%= yield %>! Zrób tak więc. Otwórz plik index.html.erb i usuń z niego wiersz z plikiem częściowym: 1 <%= render 'home/header' %>
2 Zapisz plik index.html.erb. Teraz umieść dokładnie ten sam wiersz w pliku application.html.erb: /app/views/layouts/application.html.erb 1 2 3 4
8 9 10 <%= render 'home/header' %> 11 <%= yield %> 12 13 14 15 Widzisz wiersz 10.? Zapisz i zamknij plik, a następnie ponownie odśwież stronię o adresie https://obrazkowo-programista.c9.io (ewentualnie o innym swoim adresie URL). U góry strony powinieneś zobaczyć odnośniki z pliku częściowego, a gdy klikniesz odnośnik O mnie, na nowej stronie również powinieneś widzieć te
same odnośniki! Od tej chwili każda strona, którą utworzysz w swojej aplikacji, będzie u góry zawierała podane odnośniki. A za każdym razem, gdy będziesz chciał zmienić odnośniki, wystarczy że jednorazowo zmodyfikujesz ich listę w pliku _header.html.erb, a zmiany zostaną uwzględnione na wszystkich stronach. Bardzo fajne.
Rozdział 3. Dodawanie komponentów Bootstrap Twoja aplikacja się rozwija — są już dwie strony i zalążek nagłówka nawigacyjnego. Czas nadać jej styl, aby wyglądała nieco bardziej profesjonalnie. W tym celu użyjesz pakietu o nazwie Bootstrap, czyli platformy stylów CSS, utworzonej przez kilku zapaleńców z firmy Twitter. Platformę tę zwykło się nazywać Twitter Bootstrap, ale jej autorzy odeszli z firmy Twitter. Zabrali ze sobą platformę i teraz zajmują się nią na pełny etat. Bootstrap jest jedną z najbardziej popularnych platform CSS, ponieważ jest niezwykle prosty w użyciu i aby z niego korzystać, nie trzeba mieć żadnego doświadczenia w projektowaniu stron WWW. Poświęć chwilę i zajrzyj na stronę GetBootstrap.com. Kliknij odnośnik Components (komponenty) w górnej części ekranu i przejrzyj jej zawartość. Zobaczysz mnóstwo różnych elementów, które możesz umieszczać na swojej stronie. Pod każdym elementem znajduje się niewielki fragment kodu. Umieszczenie go na stronie jest proste i (w większości przypadków) polega jedynie na skopiowaniu i wklejeniu go do pliku.
Instalacja platformy Bootstrap Aby zastosować platformę Bootstrap w aplikacji, trzeba dodać do niej gem Bootstrap. Nazwa gema brzmi bootstrap-sass, więc otwórz stronę
RubyGems.org i sprawdź jej zawartość (powinieneś nabrać zwyczaju odwiedzania tej strony i sprawdzania opisu gema, tak by nie instalować go w ciemno). Na stronie RubyGems.org wyszukaj frazę „bootstrap-sass”, która powinna pojawić się na samym początku listy: bootstrap-sass 3.3.5.1 Twitter's Bootstrap, converted to Sass and ready to drop into Rails or Compass
UWAGA! Numer wersji 3.3.5.1 może się zmienić do czasu ukazania się tej książki. Nic w tym dziwnego — gemy są nieustannie aktualizowane.
Kliknij znaleziony gem. Powinna pojawić się standardowa strona:
(Gem bootstrap-sass na stronie Rubygems.org) Po prawej stronie ekranu powinieneś znaleźć niewielkie pole o nazwie GEMFILE:, a obok niego małą ikonę schowka. Kliknij ikonę, aby skopiować do schowka odwołanie i numer wersji gema, które wyglądają jak niżej:
(gem 'bootstrap-sass', '~> 3.3.5.1') Nieco niżej powinieneś znaleźć odnośnik Documentation do dokumentacji gema. Zazwyczaj znajdują się w niej instrukcje dotyczące instalacji i zastosowania danego gema. Poświęć chwilę na zapoznanie się z tą dokumentacją. Teraz dodaj platformę Bootstrap do swojej aplikacji. W tym celu w pliku Gemfile musisz umieścić odwołanie do gema bootstrap-sass: /Gemfile 1 source 'https://rubygems.org' 2 gem 'rails', '4.2.1' 3 gem 'sass-rails', '~> 5.0' 4 gem 'uglifier', '>= 1.3.0' 5 gem 'coffee-rails', '~> 4.1.0' 6 gem 'jquery-rails' 7 gem 'turbolinks' 8 gem 'jbuilder', '~> 2.0' 9 gem 'sdoc', '~> 0.4.0', group: :doc 10 gem 'bootstrap-sass', '~> 3.3.5.1' 11 12 group :development, :test do 13
gem 'byebug'
14
gem 'web-console', '~> 2.0'
15
gem 'spring'
16 end
17 18 group :development, :test do 19
gem 'sqlite3'
20 end 21 22 group :production do 23
gem 'pg', '0.18.2'
24
gem 'rails_12factor', '0.0.3'
25 end Zwróć uwagę, że został dodany wiersz 10. Zapisz i zamknij plik, a następnie użyj polecenia bundle install, tak jak po każdorazowym dodaniu gema: 1 $ bundle install 2 Czasami powyższe dwa kroki wystarczają do instalacji gema, jednak nie w tym przypadku. Musisz wykonać kilka dodatkowych czynności (opisanych w dokumentacji na stronie RubyGems.org). Bootstrap jest platformą stylów CSS, więc musisz w aplikacji utworzyć plik CSS. Możesz mu nadać dowolną nazwę, na przykład bootstraply.css.scss. Plik musi być umieszczony w katalogu /app/assets/stylesheets. Nie opisałem jeszcze katalogu /app/assets, ale jeżeli do niego zajrzysz, znajdziesz tam trzy katalogi: images (obrazy), javascripts (skrypty JavaScript) i stylesheets (arkusze stylów). Na razie nie będziemy się nimi zajmować, ale zapewne domyślasz się, że umieszcza się w nich obrazy, skrypty JavaScript i arkusze stylów. Teraz kliknij prawym przyciskiem myszy katalog stylesheets, wybierz polecenie New File (tak samo jak poprzednio) i nadaj nowemu plikowi nazwę bootstraply.css.scss. Otwórz nowo utworzony plik i wpisz w nim poniższe dwa wiersze kodu:
1 2 @import "bootstrap-sprockets"; 3 @import "bootstrap"; 4 Wstaw kilka pustych wierszy na początku, ponieważ później wpiszesz w tym miejscu dodatkowy kod. Prawie skończyłeś, ale musisz jeszcze utworzyć kilka referencji do skryptów JavaScript, wykorzystywanych przez platformę Bootstrap. W pliku z referencjami do skryptów wpisz poniższe wiersze: /app/assets/javascripts/application.js 1 //= require jquery 2 . 3 . 4 //= require bootstrap-sprockets 5 //= require bootstrap 6 //= require_tree . 7 W pliku znajduje się już nieco kodu. Powyższe dwa wiersze wpisz nad wierszem //=require_tree ., co powinno załatwić sprawę. To właśnie trzeba zrobić. Po każdorazowym dodaniu gema dobrze jest zatrzymać i ponownie uruchomić serwer, więc zrób tak teraz. Następnie przejdź do przeglądarki i odśwież stronę https://obrazkowo-programista.c9.io (ewentualnie o innym własnym adresie URL).
(Strona https://obrazkowo-programista.c9.io/home/index z zainstalowaną platformą Bootstrap) Zauważyłeś różnicę? Twoja strona wygląda trochę inaczej. Zmienił się kolor odnośników i czcionka. Tak działa platforma Bootstrap. Zapewne zauważyłeś również, że tekst jest zepchnięty do samego brzegu ekranu. Można to poprawić naprawdę szybko. Wystarczy jedynie otworzyć plik application.html.erb i umieścić znacznik <%= yield %> w kontenerze div: /app/views/layouts/application.html.erb 1 2 3 4
(Strona https://obrazkowo-programista.c9.io/home/index z marginesem zdefiniowanym za pomocą klasy container) W ten sposób z prawej i lewej strony ekranu zostanie dodany margines. Ja robię tak ze wszystkimi swoimi stronami, ponieważ dzięki temu wyglądają
one lepiej niż w standardowym układzie.
Zabawa z platformą Bootstrap Teraz pobaw się trochę platformą Bootstrap. Zacznij od dodania do strony index komponentu Jumbotron. Otwórz adres GetBootStrap.com i kliknij odnośnik Components u góry strony. Następnie przewiń listę z prawej strony, wyszukaj odnośnik Jumbotron i kliknij go. Pojawi się strona z komponentem Jumbotron i kodem poniżej:
(Strona GetBootstrap.com z komponentem Jumbotron) Przyjrzyj się kodowi. Jak widać, aby dodać komponent do strony, wystarczy umieścić dowolną treść wewnątrz poniższego znacznika: 1
2 . 3 . 4
Zrób tak więc teraz na stronie index: /app/views/home/index.html.erb 1
2
Witaj w mojej aplikacji!
3
Niebawem rzuci wszystkich na kolana...
4
5 Zapisz plik i sprawdź, jak wygląda strona w przeglądarce. Całkiem nieźle! Teraz dowiesz się, jak dodawać przyciski za pomocą platformy Bootstrap. Dodaj do komponentu Jumbotron dwa przyciski. Na stronie GetBootStrap.com przyciski nie znajdują się w sekcji Components, tylko CSS. Kliknij zatem ten odnośnik u góry strony, a następnie Buttons (przyciski) po prawej stronie ekranu. Przewiń stronę i odszukaj sekcję Options (opcje) dla przycisków.
(Strona http://getbootstrap.com/css/#buttons) Dostępnych jest sześć różnych opcji z kolorami przycisków (biały, niebieski, zielony, jasnoniebieski, pomarańczowy i czerwony). Poniżej rysunków przycisków znajdują się odpowiednie kody: 1 2 Zwróć uwagę na fragment class=. W tym miejscu określa się kolor przycisku. Domyślnie (default) jest to kolor biały. Klasa primary (główny) oznacza kolor niebieski, success (powodzenie) — zielony, info — jasnoniebieski, warning (ostrzeżenie) — pomarańczowy i danger (niebezpieczeństwo) — czerwony. Zazwyczaj wystarczy skopiować kod ze strony GetBootStrap.com i wkleić go do aplikacji (tak samo jak w przypadku komponentu Jumbotron), ale w przypadku przycisków jest inaczej, ponieważ są to odnośniki, a jak dowiedziałeś się wcześniej, platforma Rails obsługuje odnośniki w nieco inny sposób (pamiętaj, że do utworzenia odnośników został użyty osadzony kod Ruby).
Musisz ponownie użyć osadzonego, ale nieznacznie zmienionego kodu Ruby. Pokażę teraz, jak dodać dwa przyciski do strony index wewnątrz komponentu Jumbotron: /app/views/home/index.html.erb 1
(Strona https://obrazkowo-programista.c9.io/home/index z komponenami with Jumbotron i Buttons) Znacznik link_to jest użyty w podobny sposób jak poprzednio. Wyjątkiem jest przecinek na końcu i kod class: 'btn btn-default', który zawiera dla platformy Rails informację, że nie jest to zwykły odnośnik, ale przycisk z odnośnikiem. Powyższy kod został pobrany bezpośrednio ze strony GetBootStrap.com, na której znajduje się poniżej przycisków.
Jak widać, dodałeś przyciski w dwóch różnych kolorach, białym i niebieskim, aby wprowadzić trochę urozmaicenia. Możesz również zmienić wielkość przycisków. W tym celu zajrzyj do sekcji Sizes (rozmiary) na stronie GetBootStrap.com. Jeżeli na przykład jeden przycisk ma być większy, możesz to osiągnąć w następujący sposób: 1 <%= link_to 'O mnie', home_about_path, class: 'btn btndefault btn-lg' %> 2
UWAGA! Chciałbym zaznaczyć, że w znaczniku link_to używam apostrofów ('), ale jeżeli chcesz, możesz używać cudzysłowów ("). Platforma Rails dopuszcza stosowanie obu znaków.
Utworzenie paska nawigacyjnego Pobawiłeś się nieco platformą Bootstrap, dodałeś komponent Jumbotron i przyciski, a teraz czas na wytoczenie armaty i dodanie paska nawigacyjnego.
(Strona http://getbootstrap.com/components/#navbar z komponentem Navbar platformy Bootstrap) Paski nawigacyjne znajdują się na stronie GetBootStrap.com w sekcji Components, zajrzyj tam więc. Użyjesz pierwszego paska z listy, ale bez pola i bez odnośnika wyszukiwania z prawej strony logo, więc po prostu usuniesz odpowiednie wiersze z kodu pokazanego pod przykładowym pakiem nawigacyjnym. Domyślne odnośniki musisz również zastąpić rzeczywistymi odnośnikami do swoich stron. Gdzie trzeba umieścić cały ten kod? Oczywiście nie na każdej stronie! Wystarczy umieścić go raz w pliku częściowym _header.html.erb, automatycznie odczytywanym i wyświetlanym na każdej stronie. Możesz teraz usunąć wszystko, co w tej chwili w tym pliku jest, i wpisać w nim kod komponentu Navbar: /app/views/home/_header.html.erb 1
24 Pomiędzy powyższy kodem a kodem ze strony GetBootStrap.com są tylko nieznaczne różnice. Zwróć przede wszystkim uwagę na wiersz 2.:
. Na stronie GetBootStrap.com ma on postać
. Usunąłem znacznik fluid, ponieważ nie chcemy, aby przycisk był skalowalny. Ponadto przyjrzyj się wierszom 18. i 19., w których znajdują się odnośniki. Jedyna różnica pomiędzy tymi a poprzednimi odnośnikami polega na tym, że obecne są umieszczone wewnątrz znaczników
i
wymaganych przez komponent Navbar. Dodatkowo usunięta została referencja do formularza wyszukiwania i domyślnych rozwijanych odnośników, ponieważ nie są one tu potrzebne. Teraz zapisz plik i odśwież stronę, które powinna wyglądać jak poniżej:
(Strona https://obrazkowo-programista.c9.io z komponentami Navbar, Jumbotron i Button) Możesz również w wierszu 12. zmienić słowo Brand na Obrazkowo. Ale tym razem zmień cały wiersz i zamiast zwykłego odnośnika HTML umieść w nim osadzony kod Ruby. Zwróć uwagę, że odnośnik HTML ma klasę navbarbrand, którą trzeba umieścić na końcu odnośnika Ruby w podobny sposób jak w odnośnikach przycisków.
1 <%= link_to 'Obrazkowo', root_path, class: 'navbarbrand' %> 2 Teraz w pasku nawigacyjnym znajduje się słowo Obrazkowo, a nie Brand, i jest to działający odnośnik. W pozostałej części książki będziesz robił więcej rzeczy z wykorzystaniem platformy Bootstrap. Mam nadzieję, że przekonałeś się, jak łatwo się z nią pracuje i jak szybko można nadać stronie naprawdę profesjonalny, efektowny wygląd. Poświęć chwilę na samodzielne eksperymenty z platformą Bootstrap. Przejrzyj inne oferowane przez nią komponenty i wypróbuj je. Baw się dobrze. W następnym rozdziale wrócimy do tego tematu, aby zrobić kilka poważniejszych rzeczy.
Dostosowanie platformy Bootstrap Platforma Bootstrap już od samego początku charakteryzuje się ogromną elastycznością, ale można ją dodatkowo dostosować, aby strona wyglądała dokładnie tak, jak sobie tego życzymy. Jest to bardzo proste. Nie podoba Ci się kolor paska nawigacyjnego? Możesz go zmienić. Nie podoba Ci się kolor komponentu Jumbotron albo przycisków? On również może być inny. Platforma Bootstrap została utworzona w języku LESS. Jest to język do tworzenia dynamicznych arkuszy stylów, umożliwiający stosowanie zmiennych i oferujący wiele innych funkcjonalności. Jednak nasza wersja platformy nie korzysta z języka LESS, ale SASS. Pamiętasz, że podczas instalacji gem Bootstrap miał nazwę bootstrapsass? Skrót SASS oznacza Syntactically Awesome StyleSheets („niesamowite składniowo arkusze stylów”). Jest to język skryptowy podobny do LESS. Nie obawiaj się, nie musisz wiele wiedzieć o językach SASS i LESS. Wystarczy, że zapamiętasz jedną rzecz: w języku LESS stosowany jest znak @, a w SASS znak $. Nie trzeba się bardziej zagłębiać w ten temat!
Co dalej? Język SASS umożliwia dostosowanie platformy Bootstrap na różnych poziomach i nadanie stronie dokładnie takiego wyglądu, jaki jest wymagany. Aby dowiedzieć się, jak to się robi, otwórz stronę GetBootStrap.com i kliknij odnośnik Customize (dostosuj) w górnej części ekranu. Następnie kliknij odnośnik Less variables (zmienne języka LESS) po prawej stronie. Pojawi się długa lista elementów strony, które można dostosowywać.
(Strona http://getbootstrap.com/customize/#less-variables zawierająca zmienne, które można dostosowywać) Przejrzyj listę i wybierz jakąś zmienną, na przykład z sekcji Jumbotron, ponieważ komponent ten umieściłeś na stronie index.
(Strona http://getbootstrap.com/customize/#jumbotron) Wszystkie wymienione tu elementy można dostosowywać. Weźmy dla przykładu następującą zmienną: 1 @jumbotron-bg 2 Czy zwróciłeś uwagę na znak @? Został on tu użyty, ponieważ jest to język LESS. Jak już wspomniałem, nie używamy języka LESS, tylko SASS, zatem wszędzie tam, gdzie będzie zastosowana ta zmienna, trzeba zamienić znak @ na $. W jaki sposób używa się tych zmiennych? Trzeba po prostu umieścić je w pliku bootstraply.css.scss, utworzonym wcześniej podczas instalacji gema Bootstrap. /app/assets/stylesheets/bootstraply.css.scss 1 $jumbotron-bg: blue; 2 .
3 . 4 @import "bootstrap-sprockets"; 5 @import "bootstrap"; 6 7 Pamiętasz, jak napisałem wcześniej, abyś zostawił puste wiersze powyżej wierszy @import, które wpisałeś po utworzeniu pliku? Jest to konieczność, ponieważ za każdym razem, gdy będziesz dodawał do tego pliku zmienne SASS, musisz umieszczać je POWYŻEJ tych dwóch wierszy. Co tu zrobiłeś? Zleciłeś platformie Bootstrap, aby tło komponentu Jumbotron było niebieskie. Zwróć uwagę na format zmiennej: $zmienna: wartość;. Zmienna SASS (pobrana ze strony GetBootStrap.com z sekcji Customize) ma na początku znak dolara $, za nią jest dwukropek, następnie spacja, żądana wartość (w tym przypadku blue — niebieski) i na końcu średnik. W tym przypadku użyłem słowa blue, ale zazwyczaj będziesz stosował szesnastkowy kod koloru, na przykład #0041a0, odpowiadający odcieniowi koloru niebieskiego. Zatem powyższy wiersz będzie wyglądał następująco: 1 $jumbotron-bg: #0041a0; 2 Poznałeś więc zasadę. Teraz zapisz plik i odśwież stronę https://obrazkowoprogramista.c9.io (ewentualnie o innym własnym adresie URL). Komponent Jumbotron jest teraz niebieski. Super! To samo możesz zrobić z każdą inną zmienną znajdującą się na stronie GetBootStrap.com w sekcji Customize. Jeżeli na przykład zechcesz zmienić kolor tła paska nawigacyjnego na szary, a tło całej strony na różowy, wpisz kod: /app/assets/stylesheets/bootstraply.css.scss 1 $jumbotron-bg: blue;
2 $navbar-default-bg: #014421; 3 $body-bg: #fa9fb9; 4 . 5 . 6 @import "bootstrap-sprockets"; 7 @import "bootstrap"; 8 Wypróbuj ten kod i sprawdź, jak wygląda strona! Ważne jest, że można dostosowywać niemal wszystko, wielkości komponentów, kolory i wiele innych cech. Poświęć chwilę na przejrzenie listy i zapoznanie się z różnymi zmiennymi platformy Bootstrap, które można dostosowywać. Wszystkie są tak samo proste w użyciu, wystarczy je jedynie umieścić w osobnym wierszu w pliku bootstraply.css.scss.
Rozdział 4. Obsługa użytkowników za pomocą gema Devise Twoja aplikacja się rozwija! Teraz, gdy poznałeś komponenty Bootstrap, możesz zacząć upiększać witrynę. Ale tak naprawdę… to aplikacja wciąż nic nie robi. Czas to zmienić. Jedną z kluczowych funkcjonalności aplikacji będzie możliwość tworzenia kont przez użytkowników, logowania, wylogowywania się i zmieniania profili. Nie chcesz przecież, aby „piny” na Twojej stronie umieszczał przypadkowy użytkownik. W tym celu musi najpierw założyć konto i się zalogować. Kiedyś napisanie kodu realizującego tę funkcjonalność przyprawiało o ból głowy i zabierało mnóstwo czasu. W dużej mierze wymagało to zaimplementowania obsługi baz danych, czego nienawidzę! Na szczęście teraz jest Ruby on Rails, a do tego gem, który wykona za Ciebie całą mrówczą robotę. Gem nazywa się Devise. Jest to gem do uwierzytelniania użytkownika. Za jego pomocą można łatwo rejestrować użytkowników, umożliwiać im logowanie i wylogowywanie ze strony, jak również modyfikowanie swoich profili. Za pomocą tego gema tworzy się również formularze niezbędne do wykonania powyższych operacji, a dodatkowo realizuje całą skomplikowaną obsługę bazy danych. Wystarczy jedynie zainstalować i skonfigurować gem i wszystko będzie od razu działać. Otwórz stronę RubyGems.org i wyszukaj gem Devise. W chwili powstawania
tej książki został on już pobrany i zainstalowany ponad 12 milionów razy. Jak widać, jest to popularny komponent (jakżeby mogło być inaczej — spróbuj wyobrazić sobie stronę WWW, która nie wymagałaby logowania i wylogowywania użytkowników!). W chwili pisania tej książki dostępna była wersja 3.5.2 gema, którą należy dodać do pliku Gemfile w następujący sposób: /Gemfile 1 source 'https://rubygems.org' 2 gem 'rails', '4.2.1' 3 gem 'sass-rails', '~> 5.0' 4 gem 'uglifier', '>= 1.3.0' 5 gem 'coffee-rails', '~> 4.1.0' 6 gem 'jquery-rails' 7 gem 'turbolinks' 8 gem 'jbuilder', '~> 2.0' 9 gem 'sdoc', '~> 0.4.0', group: :doc 10 gem 'bootstrap-sass', '~> 3.3.5.1' 11 gem 'devise', '~> 3.5.2' 12 13 group :development, :test do 14
gem 'byebug'
15
gem 'web-console', '~> 2.0'
16
gem 'spring'
17 end 18
19 group :development, :test do 20
gem 'sqlite3'
21 end 22 23 group :production do 24
gem 'pg', '0.18.2'
25
gem 'rails_12factor', '0.0.3'
26 end Jak zawsze, po dodaniu nowego gema do pliku Gemfile trzeba użyć polecenia bundle install: 1 $ bundle install 2 Oczywiście gem Devise wykonuje mnóstwo roboty, więc nie bądź zaskoczony, że jego instalacja i konfiguracja składa się z większej liczby kroków niż w przypadku innych gemów. Opisane są one w dokumentacji na stronie RubyGems.org, ale przeprowadzę Cię teraz przez wszystkie etapy. Najpierw musisz uruchomić generator: 1 $ rails generate devise:install 2 W oknie terminala pojawi się sporo tekstu. Jeżeli się mu przyjrzysz, zauważysz, że zawiera opis pięciu kroków, które musisz wykonać, aby zainstalować gem Devise. Nie obawiaj się, nie jest tak źle. Zrobimy to teraz. Poniżej znajdują się instrukcje wzięte wprost z tekstu wyświetlonego w terminalu: 1. Sprawdź, czy zdefiniowałeś domyślne opcje adresu URL w plikach konfiguracyjnych. Poniżej przedstawiona jest przykładowa opcja środowiska programistycznego default_url_options w pliku config/environments/development.rb:
config.action_mailer.default_url_options = { host: 'localhost', port: 3000 } W środowisku produkcyjnym opcja host: musi wskazywać serwer Twojej aplikacji. 2. Sprawdź, czy w pliku config/routes.rb ustawiony jest adres URL strony głównej, na przykład: root to: "home#index". 3. Sprawdź, czy w pliku app/views/layouts/application.html.erb zdefiniowane są komunikaty flash, na przykład:
<%= notice %>
<%= alert %>
4. Jeżeli udostępniasz aplikację w usłudze Heroku tylko z wersją Rails 3.2, musisz ustawić opcję: config.assets.initialize_on_precompile = false 5. Skopiuj widoki gema Devise do swojej aplikacji (w celu ich dostosowania) za pomocą polecenia: rails g devise:views
Przyjrzyj się powyższym krokom. Od razu możesz pominąć krok czwarty, ponieważ nie korzystasz z wersji Rails 3.2, tylko z 4.2.1 lub nowszej. Możesz również pominąć krok drugi, ponieważ zdefiniowałeś już główną stronę index. Pozostały więc kroki 1., 3. i 5. Wykonaj je teraz.
Krok pierwszy Przyjrzyj się krokowi pierwszemu. Musisz w dwóch plikach dodać po jednym wierszu kodu. /config/environments/development.rb: 1 .
2 . 3 config.action_mailer.default_url_options = { host: 'localhost', port: 3000 } 4 end 5 Wpisz po prostu wiersz numer 3 na końcu wskazanego pliku (powyżej końcowego wiersza end, który jest tu pokazany). Następnie podobną zmianę wprowadź w innym pliku: /config/environments/production.rb: 1 . 2 . 3 config.action_mailer.default_url_options = { host: 'obrazkowo.herokuapp.com' } 4 end 5 Przyjrzyj się 3. wierszowi. Jest on bardzo podobny do 3. wiersza z poprzedniego listingu, ale zamiast opcji host: 'localhost', port: 3000 zawiera rzeczywisty adres URL aplikacji w usłudze Heroku. W tym miejscu wpisz adres, który nadałeś swojej aplikacji. O co tu chodzi? Otóż te dwa pliki zawierają ustawienia środowiska programistycznego i produkcyjnego. Wskazałeś w nich, aby aplikacja w lokalnym środowisku programistycznym wykorzystywała serwer WEBrick, a w produkcyjnym — usługę Heroku.
Krok trzeci Teraz przyjrzyj się krokowi trzeciemu. W tym kroku musisz wpisać nieco kodu obsługującego komunikaty flash. Są to niewielkie automatyczne podpowiedzi pojawiające się na stronie, gdy
użytkownik wykona jakąś operację. Na przykład gdy użytkownik się zaloguje, wtedy u góry strony pojawi się komunikat flash typu „Pomyślnie zalogowałeś się do serwisu”. Po wylogowaniu pojawi się inny komunikat: „Pomyślnie wylogowałeś się z serwisu” itd. Gem Devise wyświetla powyższe komunikaty automatycznie, ale musisz wpisać trochę kodu, aby wskazać gemowi miejsce na stronie, w którym komunikaty mają się pojawiać. Instrukcja zawiera proponowany kod, który trzeba umieścić w pliku strony: 1
<%= notice %>
2
<%= alert %>
3 Trzeba go jednak nieco zmodyfikować i zmienić wygląd tych komunikatów za pomocą platformy Bootstrap. W tym celu otwórz stronę http://getbootstrap.com/, kliknij odnośnik Components, przewiń zawartość strony i kliknij odnośnik Alerts (alerty). Komunikat flash jest w rzeczywistości alertem, więc użyj klasy alert platformy Bootstrap. Zauważ, że dostępne są cztery kolory alertów: zielony (success, czyli powodzenie), niebieski (info, informacja), żółty (warning, ostrzeżenie) i czerwony (danger, niebezpieczeństwo). Użyj niebieskiego komunikatu. Gdzie trzeba umieścić kod, aby gem Devise mógł wykorzystać komunikaty flash? Muszą one pojawiać się na każdej stronie Twojej witryny, więc odpowiednim miejscem umieszczenia kodu będzie wiersz w pliku /app/views/layouts/application.html.erb, tuż powyżej znacznika <%= yield %> i poniżej początku sekcji div: /app/views/layouts/application.html.erb 1 . 2 . 3
9 . 10 Przyjrzyj się powyższemu kodowi, ponieważ wygląda nieco inaczej niż zalecany w instrukcji do gema Devise. Kod zawiera typową pętlę języka Ruby, która mówi: „Z każdym komunikatem flash zrób to i to”. W tym przypadku „to i to” oznacza umieszczenie komunikatu w sekcji div z przypisaną klasą alert alertinfo. Skąd wzięła się klasa alert alert-info? Skopiowałeś ją ze strony GetBootStrap.com z fragmentu kodu w sekcji Alerts. Ten komunikat będzie niebieski. Zwróć również uwagę, że znacznik otwierający w 1. wierszu <% flash.each do |name, msg| %> nie zawiera znaku równości (zawiera go wiersz 5., ale nie 4.)! Co to oznacza? Do tej pory wszystkie osadzone obiekty Ruby zawierały znacznik otwierający <%=. Znak równości oznacza „wyświetl tę treść na ekranie”. Jednak nie chcemy, aby pętla wyświetlała cokolwiek na ekranie. Treść ma się pojawiać tylko wtedy, gdy warunek wewnątrz pętli będzie spełniony. W wierszu 5. znajduje się znacznik <%=, ponieważ jego zawartość ma być wyświetlana na ekranie.
Krok piąty Ostatnią czynnością do wykonania jest wpisanie w terminalu polecenia podanego w instrukcji. Zrób to więc teraz: 1 $ rails g devise:views
2 Polecenie to uruchamia generator widoków gema Devise. Zwróć uwagę, że wcześniej używałeś już polecenia generate, na przykład: 1 $ rails generate devise:views 2 Pojedyncza litera g zamiast generate jest skrótem, który można bez przeszkód stosować. Po wykonaniu powyższego polecenia sprawdź zawartość katalogu /app/views/. Powinien pojawić się w nim nowy katalog devise. Zawiera on kilka innych katalogów ze wszystkimi stronami, które gem Devise utworzył na potrzeby obsługi takich operacji jak logowanie i wylogowywanie użytkowników, zmiana profilu, resetowanie hasła itp. Sprawdź to! Również w terminalu powinno pojawić się sporo tekstu. Jest to lista stron utworzonych przez gem Devise. Przejrzyj tę listę. Czy widzisz w niej nazwy stron? Przyjrzyj się na przykład plikowi /app/views/devise/registrations/new.html.erb. Zapewne się domyślasz, że jest to strona umożliwiająca użytkownikowi zarejestrowanie się w Twojej aplikacji (tworząca „nową” rejestrację). Otwórz ten plik w edytorze. Na samym początku zobaczysz tytuł Sign Up (zarejestruj się). Usuń te słowa i w ich miejsce wpisz Rejestracja.
UWAGA! Gem Devise domyślnie tworzy strony z napisami w języku angielskim. Aby na stronach pojawiały się polskie napisy, należy zmienić pliki utworzone przez gem. Szczegółowe informacje, jak to zrobić, zawarte są w dodatku, który możesz pobrać pod adresem ftp://ftp.helion.pl/przyklady/rrtwww.zip.
A co to jest za plik app/views/devise/sessions/new.html.erb? Jest to strona do logowania użytkowników. Gdy użytkownik się zaloguje, tworzona jest sesja. Operacja logowania polega na tworzeniu nowej sesji. Analogicznie wylogowanie oznacza zamknięcie sesji. Gem Devise utworzył naprawdę dużo plików i prawdę mówiąc, z większości z nich nie będziesz korzystał. Nie czuj się więc przytłoczony.
Instalacja gema jest prawie zakończona, pozostała jeszcze jedna czynność do wykonania. Gem został skonfigurowany, widoki utworzone, ale nie ma połączenia z bazą danych, w której będą przechowywane informacje o użytkownikach. Na szczęście nie jest to problem, wystarczy wpisać poniższe dwa polecenia: 1 $ rails generate devise user 2 $ rake db:migrate 3
Obsługa bazy danych w platformie Rails Tak naprawdę to nie pisałem jeszcze o bazach danych, więc zrobię to teraz. Dzięki platformie Rails praca z bazami jest wyjątkowo prosta, ale trzeba wiedzieć, co się z nimi dzieje. Za każdym razem gdy będziesz chciał coś zrobić z bazą danych za pomocą platformy Rails, będziesz musiał utworzyć tzw. migrację i wysłać ją do bazy. Migrację możesz traktować jak listę rzeczy do zrobienia. Utwórz listę, a następnie przekaż ją do bazy danych. Przed chwilą, wpisując polecenie rails generate devise user, utworzyłeś migrację i „dodałeś” użytkowników. Możesz nawet zobaczyć zawartość pliku z migracją. Pliki z migracjami znajdują się w katalogu /db/migrate. W moim przypadku polecenie rails generate devise user utworzyło następujący plik z migracją: /db/migrate/20150824184627_devise_create_users 1 class DeviseCreateUsers < ActiveRecord::Migration 2 3 4 5
def change create_table(:users) do |t| ## Database authenticatable t.string :email,
29 # t.integer :failed_attempts, default: 0, null: false # Only if lock ↳strategy is :failed_attempts 30 # t.string :unlock_token # Only if unlock strategy is :email or :both 31
# t.datetime :locked_at
32 33
t.timestamps null: false
34
end
35 36 true
add_index :users, :email,
37 true
add_index :users, :reset_password_token, unique:
38 true
# add_index :users, :confirmation_token,
unique:
39 true
# add_index :users, :unlock_token,
unique:
40
unique:
end
41 end Jest tu sporo kodu, ale tak naprawdę nie musisz wiedzieć, co on realizuje. Przejrzyj go pobieżnie i sprawdź, czy coś Ci się nie rzuciło w oczy. Zwróć uwagę, że kod zawiera odwołanie do adresu e-mail i hasła (ponieważ użytkownicy będą logowali się za pomocą tych danych). Rejestruje również czas zalogowania się użytkownika (wiersz 17.) i resetuje hasło (wiersz 38.).
Jak wcześniej wspomniałem, w tej chwili (a nawet w ogóle) nie musisz wiedzieć, co oznacza każdy wiersz powyższego kodu. Pamiętaj tylko, że utworzyłeś migrację. Do wysłania migracji do bazy danych służy polecenie rake db:migrate.
Baza programistyczna i baza produkcyjna Zanim przejdziemy dalej, muszę nieco powiedzieć o bazach danych (ponieważ już ich używasz). Pierwszy raz wspomniałem o nich przy okazji omawiania usługi Heroku i teraz chciałbym wrócić do tego tematu. W środowisku programistycznym wykorzystywana jest baza danych o nazwie sqlite3, bardzo prosta, instalowana razem z platformą Rails. Gdy przyjrzysz się plikowi Gemfile, znajdziesz w nim referencję do tej bazy. Jak wspomniałem wcześniej, sqlite3 nie nadaje się do obsługi produkcyjnej witryny. Do tego celu trzeba użyć innej bazy. Użyjesz bazy PostgreSQL. Dlaczego właśnie tej? Ponieważ usługa Heroku lubi tę bazę, która w dodatku jest bardzo prosta w obsłudze. Jedyną operacją, którą trzeba wykonać, jest dodanie gema postgres (co zrobiłeś już wcześniej). Jak pamiętasz, była to czynność nieco bardziej złożona niż dodanie zwykłego gema, ponieważ trzeba było wskazać, że aplikacja w środowisku programistycznym powinna wykorzystywać bazę sqlite3, a w produkcyjnym — PostgreSQL. Ale i tak było to dość proste. Oto co wtedy zrobiłeś: /Gemfile 1 source 'https://rubygems.org' 2 gem 'rails', '4.2.1' 3 gem 'sass-rails', '~> 5.0' 4 gem 'uglifier', '>= 1.3.0' 5 gem 'coffee-rails', '~> 4.1.0'
26 end 27 W powyższym pliku wprowadziłeś dwie zmiany. Przede wszystkim usunąłeś
oryginalne odwołanie do gema sqlite3, umieszczone w chwili utworzenia projektu. Odwołanie to jest jednak potrzebne, więc umieściłeś je w grupie odwołań w wierszu 19. Grupa ta zawiera informację, że Twoja aplikacja będzie korzystać z bazy sqlite3 w środowisku programistycznym i testowym (pamiętaj, że książka nie zawiera opisu żadnych operacji wykonywanych w środowisku testowym). Dodatkowo umieściłeś odwołania do gemów baz danych pg i rails_12factor (baza wymagana w usłudze Heroku), które będą wykorzystywane w środowisku produkcyjnym. Za każdym razem, gdy dodasz gem do pliku Gemfile, musisz użyć polecenia bundle install, jednak tym razem będzie nieco inaczej. To polecenie nie może obejmować opcji środowiska produkcyjnego. To logiczne, ponieważ w środowisku programistycznym nie powinna być instalowana baza PostgreSQL. Poniżej przedstawione jest odpowiednie polecenie: 1 $ bundle install --without production 2
UWAGA! Przed słowem without znajdują się dwa myślniki --.
Powyższe polecenie trzeba wprowadzić tylko raz. Platforma Rails będzie od tej chwili pamiętać, aby nie instalować gemów przeznaczonych dla środowiska produkcyjnego. Dlaczego znów o tym piszę? Ponieważ chcę mieć pewność, iż wiesz, że będziesz korzystał z dwóch różnych baz danych. Musisz o tym koniecznie pamiętać. Dlaczego? Ponieważ za każdym razem po utworzeniu migracji trzeba ją wysyłać do lokalnej, a nie do produkcyjnej bazy danych. Natomiast w usłudze Heroku trzeba migrację wysłać do bazy produkcyjnej (w tym przypadku PostgreSQL).
Wysyłanie migracji do bazy PostgreSQL w usłudze Heroku
Gdy użyłeś polecenia rails generate devise user, utworzyłeś migrację z obsługą użytkowników. Następnie za pomocą polecenia rake db:migrate wysłałeś migrację do bazy danych, konkretnie do bazy sqlite3. Nie wysłałeś migracji do bazy PostgreSQL w usłudze Heroku, ale musisz to zrobić. Za każdym razem gdy będziesz wysyłał migrację do lokalnej bazy danych w środowisku programistycznym (sqlite3), będziesz musiał również wysyłać ją do bazy w środowisku produkcyjnym (PostgreSQL). Służy do tego następujące polecenie: 1 $ heroku run rake db:migrate 2 Polecenie wygląda niemal identycznie jak rake db:migrate użyte lokalnie, zawiera jedynie na początku słowa heroku run. Pamiętaj, że jeżeli nie użyjesz tego polecenia, baza danych w usłudze Heroku nie będzie działała prawidłowo.
Sprawdzenie nowych stron gema Devise Idźmy dalej! Zakończyłeś instalację gema Devise, wysłałeś migrację do bazy, dzięki czemu gem może obsługiwać użytkowników zarówno w środowisku programistycznym, jak i produkcyjnym, oraz utworzyłeś strony umożliwiające użytkownikom logowanie i wylogowywanie z aplikacji. Czas więc zobaczyć te strony! Przede wszystkim zatrzymaj i ponownie uruchom serwer. Następnie aby sprawdzić, gdzie te strony się znajdują, odszukaj ścieżki utworzone przez gem Devise. W tym celu użyj znanego Ci już polecenia rake routes: 1 $ rake routes 2 Jak pamiętasz, gdy poprzednim razem użyłeś tego polecenia, w aplikacji istniały tylko dwie ścieżki (do stron index i O mnie). Tym razem jest ich o wiele więcej!
1 $ rake routes 2 Controller#Action
Prefix Verb
URI Pattern
3 new_user_session GET devise/sessions#new
/users/sign_in(.:format)
4 user_session POST devise/sessions#create
/users/sign_in(.:format)
5 . 6 . Jak poprzednio, pierwsza kolumna zawiera ścieżkę. W drugiej znajduje się informacja, czy jest to zwykła strona (komenda GET), czy formularz (POST), czy strona do wylogowania użytkownika (DELETE). W trzeciej kolumnie znajduje się adres URL, którego użyjesz do wyświetlenia żądanej strony w przeglądarce. Piąta kolumna zawiera opis operacji kontrolera. Powyżej nie jest przedstawiona pełna lista ścieżek, tylko jej początek, ale możesz wprowadzić powyższe polecenie i zobaczyć pełną listę. Pamiętaj, że ścieżki zawierające komendę GET oznaczają zwykłe strony WWW. Wybierz zatem jedną z nich, wpisz adres w przeglądarce i zobacz, jak strona wygląda! Wpisz następujący adres: https://obrazkowoprogramista.c9.io/users/sign_up (lub inny własny adres URL).
(Strona gema Devise do rejestrowania użytkowników https://obrazkowoprogramista.c9.io/users/sign_up) Sprawdź również stronę logowania — https://obrazkowoprogramista.c9.io/users/sign_in (lub inny własny adres URL):
(Strona gema Devise do logowania użytkowników https://obrazkowoprogramista.c9.io/users/sign_in)
Na tej stronie znajduje się odnośnik dla użytkownika, którzy zapomniał, jak brzmi jego hasło, i musi je zresetować. Tę stronę też możesz sprawdzić. Utworzone strony i formularze są bardzo funkcjonalne. Za ich pomocą użytkownik może założyć konto, zalogować się itd. Oczywiście strony te na razie wyglądają dość skromnie, ale sama funkcjonalność działa prawidłowo. Teraz nadasz stronom elegancki wygląd.
Zmiana wyglądu stron gema Devise Teraz zajmij się poprawieniem wyglądu stron. To całkiem proste. Wszystkie pliki, które trzeba zmienić, znajdują się w katalogu /app/views/devise. Zacznij od strony służącej do rejestrowania użytkownika: /app/views/devise/registrations/new.html.erb 1
27 <% end %> 28 29 <%= render "devise/shared/links" %> 30 Ten plik może wyglądać na najbardziej skomplikowany z tych, jakie do tej pory widziałeś, ale nie jest tak źle. Aby zmienić wygląd strony gema Devise, użyjesz oczywiście platformy Bootstrap!
Otwórz stronę GetBootstrap.com i kliknij odnośnik CSS u góry ekranu. Następnie kliknij Forms (formularze) po prawej stronie. Teraz musisz zrobić kilka rzeczy. Nie będziesz kopiował i wklejał całego kodu widocznego pod przykładowym formularzem. Zamiast tego wybierzesz tylko jego dwa fragmenty. Po pierwsze, platforma Bootstrap wymaga, aby każde pole i etykieta formularza były umieszczone w sekcji div z klasą form-group: 1
2 . 3 . 4
W pliku new.html.erb elementy te już są umieszczone w sekcji div, ale jej klasa nosi nazwę field. Możesz to sprawdzić w wierszach 6., 11. i 19. na powyższym listingu. To żaden problem. Po prostu w wierszach 6., 11. i 19. zmień słowo field na form-group. Po drugie, każdemu polu formularza trzeba przypisać klasę form-control (pole formularza to miejsce, w którym wpisuje się dane). W pliku new.html.erb pola te są umieszczone w wierszach 8., 16. i 21.: 7 8 <%= f.email_field :email, autofocus: true, class: 'form-control' %> 9 15 16 <%= f.password_field :password, autocomplete: "off", class: 'form-control' %> 17 20 21 <%= f.password_field :password_confirmation, autocomplete: "off",
↳class: 'form-control' %> 22 Po trzecie, zwróć uwagę, że formularz wymaga, aby użytkownik wpisał hasło, a następnie je potwierdził. Według mnie nie ma potrzeby, aby w tak prostej aplikacji użytkownik dwukrotnie wpisywał hasło, więc można się pozbyć dodatkowego pola. Wystarczy w tym celu usunąć wiersze od 19. do 22. Po czwarte, co zrobić z przyciskiem Wyślij? Wygląda dość ubogo… Można tu użyć komponentu button platformy Bootstrap w taki sam sposób jak na stronie index. Wpisz następujący kod: 19 20 <%= f.submit "Wyślij", class: 'btn btn-primary' %> 21 Zmieniony plik wygląda teraz tak: /app/views/devise/registrations/new.html.erb 1
(Strona gema Devise do rejestrowania użytkowników https://obrazkowoprogramista.c9.io/users/sign_up) Teraz strona wygląda zdecydowanie lepiej, ale dodając panele, możesz nadać jej jeszcze lepszy wygląd. Wróć do strony GetBootstrap.com, kliknij odnośniki Components, a następnie Panels (panele) po prawej stronie ekranu. Dodasz teraz komponenty Panel with heading (panel z nagłówkiem) oraz Panel with footing (panel ze stopką) u dołu swojej strony w miejscu, gdzie znajduje się odnośnik Logowanie. Poniższy kod pokazuje, jak to zrobić: /app/views/devise/registrations/new.html.erb 1
29 Zmiany wyróżnione są pogrubioną czcionką. Zawartość całej strony została umieszczona wewnątrz sekcji div z opcją class="panel panel-default". Nagłówek strony został umieszczony wewnątrz sekcji div z opcją class="panel-heading", główna treść strony — w sekcji div z opcją class="panel-body", a odnośniki — w sekcji div z opcją class="panelfooter". Wynik zmian powinien wyglądać jak niżej:
(Strona gema Devise do rejestrowania użytkowników https://obrazkowoprogramista.c9.io/users/sign_up o poprawionym wyglądzie) Teraz możesz samodzielnie wprowadzić te same zmiany w innych formularzach gema Devise: /app/views/devise/registrations/edit.html.erb (strona do zmiany profilu użytkownika) /app/views/devise/sessions/new.html.erb użytkownika) /app/views/devise/passwords/new.html.erb zapomnianego hasła)
(strona (strona
do
logowania
do
resetowania
Zauważ, że powyższe strony wyglądają dość podobnie, więc łatwo możesz
wprowadzić w nich te same zmiany co w pliku /app/views/devise/registrations/new.html.erb.
Tworzenie odnośników na stronach gema Devise Teraz, gdy strony utworzone przez gem Devise wyglądają całkiem dobrze, trzeba w pasku nawigacyjnym umieścić odnośniki. Można to zrobić, wykorzystując znacznik link_to, tak jak poprzednio, ale tym razem wprowadzimy małą odmianę. Odnośniki nie będą widoczne na wszystkich stronach dla wszystkich odwiedzających je użytkowników. Na przykład użytkownik nie będzie widział odnośnika Edycja profilu, jeżeli nie będzie zalogowany (a tym bardziej jeżeli się nie zarejestruje!). Ponadto użytkownik, który już się zalogował, nie powinien widzieć odnośnika do strony logowania. Potrzebny jest również odnośnik do wylogowania, który wygląda nieco inaczej niż odnośniki utworzone wcześniej.
Sprawdzenie, czy użytkownik jest zalogowany Najpierw zajmijmy się najważniejszymi rzeczami, czyli w jaki sposób sprawdzić, czy dany użytkownik jest zalogowany, czy nie. Na szczęście dzięki platformie Rails jest to bardzo proste, trzeba w tym celu wpisać nieco kodu Ruby z prostą instrukcją if. Kod ten można przetłumaczyć następująco: „Jeżeli użytkownik jest zalogowany, wyświetl podane odnośniki, a w przeciwnym wypadku wyświetl inne”. Poniżej przedstawiony jest ten kod: 1 <% if user_signed_in? %>
2 . 3 . 4 <% else %> 5 . 6 . 7 <% end %> 8 Odnośniki, które powinny być widoczne tylko wtedy, gdy użytkownik będzie zalogowany (edycja profilu, wylogowanie), trzeba umieścić pomiędzy pierwszym wierszem a instrukcją else. Odnośniki, które będą wyświetlane, gdy użytkownik nie będzie zalogowany (logowanie, rejestracja), zostaną umieszczone pomiędzy instrukcjami else i end. Aby poznać ścieżki prowadzące do odpowiednich stron (edycja profilu, logowanie, wylogowanie, rejestracja), użyj dobrze znanego Ci polecenia rake routes: 1 $ rake routes 2 Zwróć szczególną uwagę na ścieżki zawierające komendę GET (pamiętaj o dodaniu końcówki _path do zmiennych w poleceniu link_to): Logowanie: new_user_session_path Edycja profilu: edit_user_registration_path Rejestracja: new_user_registration_path Wylogowanie: destroy_user_session_path Przyjrzyjmy się ostatniej ścieżce, oznaczającej stronę wylogowania. Wynik polecenia rake routes pokazuje, że ścieżka ta zawiera komendę DELETE (usuń), a nie GET (pobierz). To zrozumiałe, ponieważ wylogowanie z aplikacji oznacza „usunięcie” sesji. Jednak odnośnik do komendy DELETE tworzy się nieco inaczej niż zwykły
odnośnik. Wygląda on następująco: 1 <%= link_to 'Wylogowanie', destroy_user_session_path, method: :delete %> 2 Zwróć uwagę, że kod wygląda podobnie jak w przypadku zwykłego odnośnika, tylko na końcu dodana jest opcja method: :delete. To bardzo proste.
Zmiana paska nawigacyjnego Masz zatem przygotowaną instrukcję if, jak również odnośniki do stron gema Devise, które zamierzasz dodać. Zmień pasek nawigacyjny: /app/views/home/_header.html.erb 1 33 Zmiana polega na dodaniu wierszy od 21. do 27. Zwróć uwagę, że instrukcja if sprawdzająca, czy użytkownik jest zalogowany, została umieszczona poniżej odnośników Strona główna i O mnie, ponieważ odnośniki te muszą być wyświetlane niezależnie od tego, czy użytkownik jest zalogowany, czy nie. Zrobiłeś już całkiem sporo. Użytkownicy mogą się rejestrować, logować, zmieniać swoje profile, a pasek nawigacyjny zmienia się dynamicznie w zależności od tego, czy użytkownik jest zalogowany, czy nie. Teraz pora na dodanie do aplikacji prawdziwej funkcjonalności umożliwiającej użytkownikom ładowanie „pinów” na stronę. Zajmiemy się tym w następnym rozdziale.
Więcej na: www.ebook4all.pl
Rozdział 5. Tworzenie szkieletu aplikacji W tym rozdziale zajmiemy się sednem aplikacji. Zaimplementujesz teraz główną funkcjonalność witryny. Przyjrzyjmy się poszczególnym częściom tej funkcjonalności. Ponieważ tworzysz kopię serwisu Pinterest, potrzebna jest możliwość umieszczania w nim obrazów wraz z opisem. Tę informację trzeba przechowywać w bazie danych i wyświetlać na stronie. Platforma Rails oferuje (jakżeby inaczej) narzędzie, które wykona za Ciebie całą robotę. Jest to szkielet (ang. scaffold) aplikacji. Służy on do tworzenia modelu, migracji i kontrolerów obsługujących wszystkie operacje i widoki niezbędne do przetwarzania danych. Aby utworzyć szkielet aplikacji, wystarczy użyć prostego polecenia: 1 $ rails g scaffold pins description:string 2 Z podobnym poleceniem spotkałeś się już podczas konfigurowania gema Devise. Część rails g oznacza rails generate. Całe polecenie zleca platformie Rails utworzenie szkieletu o nazwie pins. Szkieletowi można nadać dowolną nazwę, ale ponieważ aplikacja ma związek z serwisem Pinterest, użyj nazwy pins. Równie dobrze może to być nazwa horses, tweets lub posts. Przyjęta jest konwencja używania liczby mnogiej (na końcu nazwy jest litera s). Na końcu polecenia znajduje się opcja description:string. Oznacza ona, że platforma Rails utworzy w tabeli w bazie danych kolumnę o nazwie
description (opis), w której będą zapisywane dane typu string (ciąg znaków). Podczas pracy z bazą danych zazwyczaj stosuje się dane typu string (czyli krótkie ciągi znaków), integer (liczby całkowite), decimal (liczby rzeczywiste) lub text (dłuższy ciąg znaków, na przykład akapit). Dostępne typy danych to: :binary :boolean :date :datetime :decimal :float :integer :primary_key :references :string :text :time :timestamp Naprawdę nie musisz teraz wiedzieć, co oznaczają poszczególne typy. W przyszłości, gdy dojrzejesz jako programista Ruby, możesz poszukać informacji na ten temat. Polecenie rails g scaffold tworzy migrację. Tak jak w przypadku każdej migracji, trzeba ją wysłać do bazy danych: 1 $ rake db:migrate 2
Później, aby wysłać migrację do usługi Heroku, użyj następującego polecenia: 1 $ heroku run rake db:migrate 2 Zapewne zauważyłeś, że po wprowadzeniu polecenia rails g scaffold w terminalu pojawiło się sporo komunikatów opisujących operacje wykonane przez platformę Rails. Zwróć uwagę, że w katalogu views pojawił się nowy katalog o nazwie pins. Zanim przyjrzysz się utworzonym plikom, zrestartuj serwer i sprawdź, jak wygląda główna strona, ponieważ stało się z nią coś złego. Wpisz w przeglądarce adres https://obrazkowo-programista.c9.io (lub Twój inny adres URL).
(Strona https://obrazkowo-programista.c9.io po utworzeniu szkieletu aplikacji) Odśwież stronę. Czy zauważyłeś różnicę? Wszystko wygląda jakoś „gorzej”. Czcionka ma nieco inną wielkość, inaczej wyglądają przyciski i w ogóle wszystko wygląda... jakoś źle. Co się stało? Podczas tworzenia szkieletu aplikacji powstał plik CSS, który przesłonił istniejący plik CSS platformy Bootstrap (ten, który utworzyłeś pod nazwą bootstraply.css.scss). Zajrzyj do katalogu /app/assets/stylesheets. Znajdziesz w nim plik o nazwie
/app/assets/stylesheets/scaffolds.css.scss. Jeżeli jesteś ciekaw, możesz otworzyć ten plik i go przejrzeć, ale tak naprawdę trzeba go usunąć. Możesz to zrobić, klikając jego nazwę w katalogu po lewej stronie ekranu prawym przyciskiem myszy i wybierając polecenie Delete (usuń). Teraz wróć do swojej strony i odśwież ją. Powinna znowu wyglądać jak wcześniej, gdy jej wygląd został zmieniony za pomocą platformy Bootstrap.
Sprawdzenie widoków szkieletu Użyte wcześniej polecenie rails g scaffold utworzyło wiele plików. Przyjrzyj się im teraz. W tym celu użyj dobrze Ci znanego polecenia rake routes: 1 $ rake routes 2 Na początku listy powinieneś zobaczyć kilka ścieżek oznaczonych słowem pins. Zwróć szczególną uwagę na ścieżki z komendą GET, ponieważ ścieżki te oznaczają strony utworzone w Twojej witrynie. Powinny pojawić się następujące ścieżki: pins new_pin edit_pin pin Teraz skupimy się na ścieżce pins. W przeglądarce wpisz adres https://obrazkowo-programista.c9.io/pins (albo Twój inny adres URL) i sprawdź, jak wygląda strona.
UWAGA! Utworzone strony zawierają napisy w języku angielskim. W
dodatku, pod adresem ftp://ftp.helion.pl/przyklady/rrtwww.zip, znajdują się wskazówki, jak umieścić na stronie polskie napisy.
(Strona https://obrazkowo-programista.c9.io/pins) Jak widzisz, niewiele na razie na tej stronie jest, ponieważ nie zostały jeszcze na niej umieszczone żadne piny. Jest jednak odnośnik Nowy pin. Jeżeli go klikniesz, otworzy się strona, na której można utworzyć i załadować pin.
(Strona https://obrazkowo-programista.c9.io/pins/new) Jedyną informacją, którą trzeba wprowadzić w tym formularzu, jest Opis. Jest tak dlatego, że użyłeś polecenia rails g scaffold z jedyną opcją description:string. „Myślałem, że będzie można tworzyć piny z obrazami!”. Dobrze, dobrze, nie wszystko naraz. Teraz pokażę Ci, jak działa strona z prostym opisem. Obrazy będziesz mógł dodawać później.
Utwórz więc pin. Wpisz cokolwiek w polu Opis, kliknij przycisk Utwórz pin, a następnie wróć do strony https://obrazkowo-programista.c9.io/pins (lub innego Twojego adresu URL). Powinieneś zobaczyć na stronie swoje piny. Utwórz kilka kolejnych, aby sprawdzić, czy wszystko działa poprawnie:
(Strona https://obrazkowo-programista.c9.io/pins z kilkoma pinami) Wszystkie Twoje piny są wyświetlone w postaci prostej tabeli. Zwróć uwagę, że obok każdego pinu znajdują się trzy odnośniki: Wyświetl, Edytuj i Usuń. Służą one do wykonywania dokładnie tych operacji, o których myślisz. Pobaw się trochę pinami... Poczekam.
To jest CRUD! Zanim przejdziemy dalej, muszę opisać fundamentalne zagadnienie z dziedziny projektowania stron, czyli CRUD: Create (utwórz), Read (odczytaj), Update (aktualizuj), Delete (usuń).
Utworzyłeś właśnie prosty szkielet aplikacji, ale w rzeczywistości jest to jedna z najpotężniejszych funkcjonalności stosowanych w internecie. Dlaczego? Ponieważ ten prosty szkielet umożliwia wykonywanie operacji CRUD (utwórz, odczytaj, aktualizuj, usuń). Jak widzisz, Twoja prosta aplikacja Obrazkowo umożliwia teraz utworzenie czegoś (prostego pinu z tekstowym opisem). Możesz przejrzeć pin (odczytać go), edytować (aktualizować), jak również skasować (usunąć). I co z tego? Przypomnij sobie dowolną większą stronę internetową. Czy nie funkcjonuje ona zgodnie z zasadą CRUD? Na przykład Twitter... To ogromny serwis, ale tak naprawdę korzystanie z niego polega na utworzeniu tweeta, odczytaniu tweeta, aktualizacji tweeta i usunięciu tweeta. Po prostu CRUD! A Facebook? Utworzenie wpisu, odczytanie wpisu, aktualizacja wpisu i usunięcie wpisu. CRUD! YouTube? Utworzenie filmu, obejrzenie (odczytanie) filmu, aktualizacja filmu i usunięcie filmu. CRUD! A blog? Tworzysz wpis na blogu, czytasz go, aktualizujesz i usuwasz. CRUD! Działanie wszystkich, ale to dosłownie wszystkich stron sprowadza się do zasady CRUD. Jest to jedna z fundamentalnych funkcjonalności internetu, której istnienie uświadomiłeś sobie na prostym przykładzie Rails. Jedno proste polecenie i platforma Rails obsługuje wszystko! Jest to naprawdę niesamowite. Otrzymujesz potężne narzędzie, za pomocą którego możesz utworzyć niemal dowolną stronę. Oczywiście, prosty opis pinu to na razie niewiele, ale zaraz pomajstrujesz przy stronie (będzie można dodawać obrazy itp.), która będzie robić wrażenie. Teraz chciałbym, abyś skupił się na zasadzie CRUD i dowiedział się, jak polecenie g platformy Rails pozwala zrealizować tę zasadę. Musisz się sporo dowiedzieć. Teraz będzie pierwszy, duży krok.
Widoki i kontroler szkieletu Poświęć chwilę na przyjrzenie się plikom utworzonym za pomocą polecenia rails g scaffold. Jak wcześniej wspomniałem, w katalogu app/views pojawił się katalog pins, w którym znajduje się sześć lub siedem plików (niektóre z nich, na przykład ze słowem json w nazwie, możesz pominąć). Pliki te są stronami umożliwiającymi tworzenie pinów (new.html.erb), ich edycję (edit.html.erb), wyświetlanie pojedynczych pinów (show.html.erb) i wyświetlanie ich listy (index.html.erb). Jeżeli przyjrzysz się tym plikom, zauważysz, że większość z nich odwołuje się do pliku częściowego zawierającego formularz do tworzenia lub edycji pinu: 1 <%= render 'form' %> 2 Powyższy plik częściowy form (formularz) również jest zapisany w katalogu pins pod nazwą _form.html.erb. Przejrzyj pliki (zarówno ze stronami, jak i plik częściowy) i zmień ich wygląd. Pozostawiam Ci jako zadanie domowe nadanie tym stronom wyglądu takiego jak wygląd stron gema Devise (użyj w tym celu klas form i panel platformy Bootstrap, podobnie jak w przypadku widoków Devise). Polecenie rails g scaffold utworzyło oprócz widoków również nowy kontroler realizujący zasadę CRUD. Kontroler jest umieszczony w pliku /app/controllers/pins_controller.rb i wygląda jak niżej: /app/controllers/pins_controller.rb 1 class PinsController < ApplicationController 2 before_action :set_pin, only: [:show, :edit, :update, :destroy] 3 4
39 Plik ten zawiera znaczniej więcej kodu niż stary dobry plik home_controller.rb, który utworzyłeś na samym początku książki podczas tworzenia strony index i O mnie! Ale to logiczne, że ten plik jest bardziej skomplikowany, ponieważ kontroler musi realizować całą zasadę CRUD. Przejrzyj plik kontrolera. W tej chwili nie musisz rozumieć całego zawartego w nim kodu, powinieneś jednak ogólnie wiedzieć, co się tu dzieje. Przyjrzyj się poszczególnym sekcjom def. Zauważ, że mają one nazwy odpowiadające zasadzie CRUD. Jest sekcja def show (odczytaj), sekcje def new i def create (utwórz), def edit i def update (aktualizuj) oraz def destroy (usuń). Oprócz tego na końcu pliku znajdują się sekcje private oraz def pins_params, z którymi będziemy eksperymentować później. Jak już wspomniałem, w tym momencie naprawdę nie musisz wiedzieć, co oznaczają poszczególne sekcje, powinieneś jedynie znać ogólną strukturę kontrolera i wiedzieć, że realizuje on za Ciebie zasadę CRUD.
Tabela utworzona w bazie danych Twoja baza danych staje się coraz bardziej złożona. Na początku obsługiwała jedynie rejestrowanie użytkowników, logowanie, wylogowywanie i edycję profili. Teraz będzie przechowywała wszystkie piny ładowane przez użytkowników. Na szczęście platforma Rails realizuje odpowiednią obsługę bazy danych w tle, ale musisz dowiedzieć się nieco o tej bazie, sprawdzając plik jej schematu /app/db/schema.rb. Jak pamiętasz, w katalogu /app/db znajdują się pliki migracji, logiczne więc, że jest tam również plik schema.rb. Plik ten jest bieżącym obrazem bazy danych. Nie trzeba z tym plikiem nic robić (nie zmieniaj go), ale dobrze jest od czasu do czas rzucić na niego okiem. Zrób tak więc teraz… /app/db/schema.rb 1 ActiveRecord::Schema.define(version: 20150826144802) do 2 3
26 27 end Zwróć uwagę, że w bazie znajdują się dwie tabele, jedna do obsługi gema Devise (tabela users), a druga do obsługi pinów (pins). Zauważ również, że obie tabele zawierają kolumny ze znacznikami czasu. Kolumny te zostały umieszczone automatycznie w chwili utworzenia tabeli. Platforma Rails zrobiła to za Ciebie, na przykład w tabeli pins zdefiniowałeś tylko kolumnę description:string, ale tabela zawiera również kolumny t.datetime "created_at" (data utworzenia) i t.datetime
"updated_at" (data zmiany). Jak już wspomniałem, w tym pliku nie trzeba nic zmieniać. Chciałem jedynie, abyś wiedział, że taki plik istnieje. Musisz nabrać zwyczaju zaglądania do niego za każdym razem, gdy wprowadzisz zmiany w bazie danych (na przykład wyślesz do niej migrację). Miej ten plik na uwadze.
Sprawdzenie strony z listą pinów Na koniec poświęć chwilę na sprawdzenie strony z listą pinów. Będzie to jedna z najważniejszych stron, ponieważ najwięcej pracy włożysz w zmianę jej wyglądu tak, aby przypominała serwis Pinterest. Popatrzmy, jak strona wygląda w tej chwili: /app/views/pins/index.html.erb 1
24 25 26 27 <%= link_to 'Nowy pin', new_pin_path %> 28 Zwróć uwagę, że zasadniczą treść tego pliku stanowi tabela HTML. Jeżeli nie masz doświadczenia w pracy z tym językiem i z tabelami, nie przejmuj się. Tej tabeli nie będzie (ostatecznie usuniesz ją i użyjesz panelu platformy Bootstrap, dzięki któremu piny będą wyglądały podobnie jak w serwisie Pinterest). Najciekawsza część znajduje się w wierszach 14. – 21. W tych wierszach kod odwołuje się do bazy danych, odczytuje tabelę pins i wyświetla piny na ekranie.
Wiersz 14. otwiera typową pętlę w języku Ruby: <% @pins.each do |pin| %>, oznaczającą „Z każdym pinem w tabeli pins zrób to i to”, przy czym „to i to” (czyli wyświetlenie opisu pin.description oraz odnośników Wyświetl, Edytuj i Usuń) jest zdefiniowane w wierszach 16. – 19. Identyfikator pin.description reprezentuje kolumnę description:string, utworzoną za pomocą polecenia rails g scaffold pins description:string (opis pinu). Niedługo, gdy wreszcie zajmiemy się dodawaniem obrazów, zmienisz ten plik.
Zmiana paska nawigacyjnego Witryna zawiera kilka kolejnych stron, czas zatem umieścić na pasku nawigacyjnym odnośniki do nich, szczególnie do przedstawionych niżej stron do wyświetlania listy, oraz do dodawania pinów: https://obrazkowo-programista.c9.io/pins (lub Twój inny adres URL) https://obrazkowo-programista.c9.io/pins/new Nie mamy nic przeciwko pokazywaniu listy pinów całemu światu, ale dostęp do strony do dodawania pinów powinni chyba mieć tylko zarejestrowani użytkownicy (w następnym rozdziale zajmiemy się ich uwierzytelnianiem). Pamiętasz, jak modyfikowałeś wygląd paska w zależności od tego, czy użytkownik jest zalogowany, czy nie? /app/views/home/_header.html.erb 1 35 Dużo zrobiłeś w tym rozdziale! Pamiętaj o zapisaniu zmian: 1 $ git add . 2 $ git commit –am 'dodany szkielet pinów, zmieniony pasek nawigacyjny' 3 $ git push 4 $ git push heroku master 5 $ heroku run rake db:migrate 6 W usłudze Heroku użyj polecenia rake db:migrate, ponieważ w bazie danych utworzyłeś nowy element (tabelę pins). W następnym rozdziale poznasz uwierzytelnianie użytkowników i
skonfigurujesz zabezpieczenia umożliwiające dodawanie pinów tylko przez zarejestrowane osoby.
Rozdział 6. Uwierzytelnianie użytkowników W poprzednim rozdziale utworzyłeś szkielet aplikacji do obsługi pinów. Teraz użytkownicy mogą umieszczać na stronie proste tekstowe piny. Ale pojawia się problem. W tej chwili każdy użytkownik może utworzyć pin. Co więcej, każdy może go zmienić lub usunąć, nawet jeżeli nie jest jego autorem! Tak zdecydowanie nie może być. Trzeba witrynę zbudować tak, aby tworzyć piny mogli tylko zarejestrowani i zalogowani użytkownicy, a zmieniać i usuwać piny — tylko ci, którzy je utworzyli. Jak to można zrobić? Pierwsza część (umożliwienie tworzenia pinów zalogowanym użytkownikom) jest prosta. Druga część jest nieco trudniejsza, ponieważ trzeba „powiązać” użytkownika z pinem.
Powiązania w platformie Rails Obecnie Twoja aplikacja zawiera w bazie danych dwa modele, jeden dla użytkowników i drugi dla pinów. Gdy w poprzednim rozdziale przeglądałeś schemat bazy, poznałeś osobne tabele związane z tymi modelami. Rzecz w tym, że teraz trzeba powiązać ze sobą oba modele. Trzeba rejestrować informację, który pin należy do którego użytkownika. Na szczęście w platformie Rails można ten cel osiągnąć bardzo prosto za pomocą tzw. powiązań. Dostępnych jest kilka podstawowych powiązań:
belongs_to (należy do), has_one (zawiera jeden), has_many (zawiera wiele), has_many :through (zawiera wiele za pośrednictwem), has_one :through (zawiera jeden za pośrednictwem), has_and_belongs_to_many (należy do wielu i zawiera wiele). Każde z powyższych powiązań może być użyte w modelu danych w aplikacji (w tym przypadku będzie to model pinów). Przede wszystkim skupimy się na pierwszych trzech: pin może należeć do użytkownika, użytkownik może posiadać jeden pin, użytkownik może posiadać wiele pinów. Pozostałe trzy powiązania są bardziej złożone i w Twojej prostej aplikacji nie będą potrzebne. Możesz jednak zapoznać się z ich doskonałym opisem (w jęz. angielskim) pod adresem: http://guides.rubyonrails.org/association_basics.html
Stosowanie powiązań Utworzenie powiązania jest bardzo proste. W Twojej aplikacji będą potrzebne powiązania belongs_to i has_many, natomiast nie będzie potrzebne has_one, ponieważ użytkownicy powinni mieć możliwość posiadania tylu pinów, ile zechcą, a powiązanie has_many umożliwia przypisanie do użytkownika jednego lub wielu pinów.
UWAGA! Zanim przejdziesz dalej, musisz koniecznie usunąć wszystkie utworzone wcześniej piny, zarówno w środowisku programistycznym, jak i w usłudze Heroku. Dlaczego? Ponieważ od teraz będziesz wiązał piny z użytkownikami, a utworzone dotychczas piny nie są powiązane z żadnym użytkownikiem — więc po ustanowieniu powiązań pojawiałyby się błędy.
Usuń zatem piny znajdujące się na stronie z listą pinów. Istnieje wprawdzie
sposób powiązania za pomocą konsoli platformy Rails istniejących pinów z użytkownikami, ale łatwiej jest je usunąć. Dobrym posunięciem będzie usunięcie konta użytkownika z aplikacji. Zaloguj się więc, kliknij odnośnik Edycja profilu u góry strony, a następnie przycisk Usuń konto na dole ekranu.
Tworzenie powiązań Tworzenie powiązań jest procesem dwuetapowym. W plikach /app/models/pin.rb i /app/models/user.rb trzeba zdefiniować powiązania w obu modelach danych, jak również utworzyć nową kolumnę w tabeli pins (w bazie danych), w której będą zapisywane informacje o pinach należących do każdego użytkownika. Zrób to w pierwszej kolejności. Tabelę w bazie można zmienić, tworząc migrację i wysyłając ją do bazy danych za pomocą polecenia rake db:migrate. W tym przypadku trzeba w tabeli pins utworzyć kolumnę user_id (identyfikator użytkownika) i nadać jej typ integer. W tym celu użyj poniższego polecenia: 1 $ rails generate migration add_user_id_to_pins user_id:integer:index 2 Polecenie wygląda znajomo, ale trochę różni się od poprzednich fragmentem add_user_id_to_pins. Wygląda on dość skomplikowanie, ale w ten sposób w platformie Rails tworzy się kolumnę w tabeli (w tym przypadku w tabeli pins kolumnę user_id). Ostatni fragment polecenia przypomina część description:string z wcześniejszego polecenia tworzącego tabelę pins, ale w tym przypadku tworzona jest kolumna user_id i nadawany jest jej typ danych integer (liczba całkowita). Powyższe polecenie zawiera jeszcze końcówkę :index. W świecie baz danych indeks przyspiesza i ułatwia wyszukiwanie danych. Na razie naprawdę nie
trzeba więcej wiedzieć na ten temat. Teraz wpisz poniższe polecenie i wyślij migrację do bazy: 1 $ rake db:migrate 2 (Pamiętaj, aby później użyć polecenia heroku run rake db:migrate i wprowadzić zmiany również w usłudze Heroku.) Jeżeli teraz przyjrzysz się plikowi ze schematem bazy danych, zauważysz, że tabela pins zawiera kolumnę user_id typu integer. Kolejnym krokiem jest zdefiniowanie właściwych powiązań w plikach pin.rb i user.rb w katalogu /app/models. /app/models/pin.rb 1 class Pin < ActiveRecord::Base 2
belongs_to :user
3 end 4 /app/models/user.rb 1 class User < ActiveRecord::Base 2 # Include default devise modules. Others available are: 3 # :confirmable, :lockable, :timeoutable and :omniauthable 4
8 Jak widzisz, tworzenie powiązań jest proste i polega jedynie na dodaniu po jednym wierszu w obu plikach modeli. Po prostu super!
Aby utworzyć pin, trzeba się zalogować Jak wspomniałem na początku rozdziału, piny mogą tworzyć tylko zalogowani użytkownicy. Ten cel można łatwo osiągnąć, wpisując na początku pliku kontrolera pinów kilka wierszy: /app/controllers/pins_controller.rb 1 class PinsController < ApplicationController 2 before_action :set_pin, only: [:show, :edit, :update, :destroy] 3 before_action :authenticate_user!, except: [:index, :show] 4 before_action :correct_user, only: [:edit, :update, :destroy] 5 . 6 . 7 Przyjrzyj się wierszom 3. i 4. Wiersz 3. uwierzytelnia użytkownika na każdej stronie aplikacji (dotyczącej pinów) z wyjątkiem stron wyświetlających listę pinów (index) i sam pin (show). Zatem użytkownik nie musi się logować, aby obejrzeć listę pinów albo wybrany pin. Wiersz 4. kontroluje, aby tylko uprawniony użytkownik zmieniał i usuwał pin. Trzeba jednak określić, co to znaczy „uprawniony użytkownik”. Można to
zrobić, wpisując poniższy kod na końcu tego samego pliku przed ostatnią instrukcją end: /app/controllers/pins_controller.rb 1 . 2 . 3 def correct_user 4
@pin = current_user.pins.find_by(id: params[:id])
5 redirect_to pins_path, notice: "Nie jesteś uprawniony do edycji tego pinu" if @pin.nil? 6 end 7 Zwróć uwagę, że w wierszu 4. znajduje się obiekt current_user. Jest to tzw. Devise Helper, czyli obiekt Devise, który coś robi za Ciebie. W tym przypadku pozwala on sprawdzić, kim jest zalogowany użytkownik. Gdy jakiś użytkownik utworzy pin, trzeba będzie wpisać do bazy informację, że nowy pin należy do tego użytkownika. Do tego celu zostanie użyty obiekt current_user. Trzeba zmienić sekcje def new i def create w pliku kontrolera. W każdej z nich fragment Pin.new trzeba zastąpić fragmentem current_user.pins.build. Zmieniony plik kontrolera wygląda teraz tak: /app/controllers/pins_controller.rb 1 class PinsController < ApplicationController 2 before_action :set_pin, only: [:show, :edit, :update, :destroy] 3 before_action :authenticate_user!, except: [:index, :show] 4
65 redirect_to pins_path, notice: "Nie jesteś uprawniony do edycji tego pinu" ↳if @pin.nil? 66
end
67 68 end Zwróć uwagę, że w powyższym kodzie znajdują się komunikaty flash informujące o pomyślnym utworzeniu i zmianie pinu. Prawie skończyłeś. Zasadnicze zmiany zostały wykonane, potrzebny jest jeszcze kosmetyczny lifting stron. Zanim zaczniesz wprowadzać zmiany, zatrzymaj i ponownie uruchom serwer, gdyż w przeciwnym wypadku pojawi się błąd. Gdy to zrobisz, utwórz nowe konto (ponieważ na początku rozdziału utworzyłeś własne), zaloguj się i sprawdź stronę z listą pinów pod adresem: https://obrazkowo-programista.c9.io/pins adresem URL)
(albo
pod
innym
Twoim
Strona nie powinna zawierać żadnych pinów, ponieważ wszystkie usunąłeś. Utwórz więc teraz nowy pin. Zwróć uwagę, że po utworzeniu pinu obok niego widoczne są odnośniki Wyświetl, Edytuj i Usuń. Tak powinno być, ponieważ jesteś zalogowany, a pin jest utworzony przez Ciebie. Jednak nie może tych odnośników widzieć użytkownik, który nie jest zalogowany lub nie jest autorem danego pinu. Ten temat trzeba dokładniej omówić. Abyś się przekonał, o czym piszę, wyloguj się i otwórz stronę z listą pinów. Kliknij odnośnik Edytuj lub Usuń. Pojawi się komunikat informujący, że w celu wykonania żądanej operacji trzeba się wcześniej zalogować.
(Strona pojawiająca się po wylogowaniu i kliknięciu odnośników Nowy pin, Edytuj lub Usuń) Krótko mówiąc, aplikacja jest teraz zablokowana i poprawnie uwierzytelnia użytkowników. Jednak niezręcznie jest pokazywać użytkownikom odnośniki, z których nie mogą skorzystać. Na szczęście można to łatwo zmienić, umieszczając w kodzie prostą instrukcję if języka Ruby: /app/views/pins/index.html.erb 1 . 2 . 3 <% @pins.each do |pin| %> 4
12 <% end %> 13 Podobne zmiany wprowadź w pliku show.html.erb: /app/views/pins/show.html.erb 1 . 2 . 3 <% if @pin.user == current_user %> 4
<%= link_to 'Edycja', edit_pin_path(@pin) %>
5 <% end %> 6 <%= link_to 'Wstecz', pins_path %> 7 Powyższa instrukcja if (jeżeli) powoduje, że „jeżeli” użytkownik, który utworzył dany pin, jest bieżącym użytkownikiem, to wyświetlany jest odnośnik Edycja. W przeciwnym wypadku odnośnik nie jest widoczny. W ten sposób można mieć pewność, że odnośnik do edycji pinów będą widziały właściwe osoby i generalnie aplikacja będzie mniej zaśmiecona. Nie ma potrzeby umieszczania na stronie odnośników, z których użytkownik nie będzie mógł skorzystać. W pliku show.html.erb przed nazwą pin.user został umieszczony znak @, którego nie ma w pliku index.html.erb. Jest tak dlatego, że w pliku index.html.erb znajduje się już odwołanie do obiektu @pin w wierszu 3. (w
pętli). W pliku show.html.erb nie ma nigdzie odwołania do obiektu @pin, dlatego trzeba je umieścić, aby uzyskać dostęp do bazy danych.
Podsumowanie Był to dość trudny rozdział, prawdopodobnie najtrudniejszy z całej książki. Byłoby zupełnie normalne, gdybyś nie zrozumiał wszystkiego, co zrobiłeś — z czasem stanie się to jasne. W tej chwili celem jest poznanie sposobu realizacji opisanych funkcjonalności i podstawowych koncepcji każdej z nich. Dla kogoś, kto ma pierwszy raz do czynienia z platformą Rails, ingerencja w kontroler jest zawsze trudna, a powiązania są jeszcze trudniejszym zagadnieniem. Nie martw się, od tej pory wszystko będzie prostsze! W następnym rozdziale będziesz umieszczał obrazy w aplikacji. Zabawa będzie o wiele lepsza! Jednak zanim pójdziesz dalej, zapisz swoją pracę: 1 $ git add . 2 $ git commit –am "powiązanie pinów z użytkownikami i uwierzytelnienie" 3 $ git push 4 $ git push heroku master 5 $ heroku run rake db:migrate 6 Usuń również utworzone piny, ponieważ w następnym rozdziale zmienisz kod tak, aby piny mogły zawierać obrazy.
Rozdział 7. Ładowanie obrazów za pomocą gema paperclip Najgorsze za Tobą! Teraz trzeba rozbudować witrynę o możliwość ładowania obrazów i zapisywania ich w jakimś miejscu oraz zmienić stronę tak, aby przypominała serwis Pinterest — i w zasadzie aplikacja będzie gotowa! Do obsługi obrazów wykorzystasz kilka różnych funkcjonalności, mianowicie program ImageMagick, gem paperclip oraz usługę Amazon S3. ImageMagick jest bezpłatnym narzędziem do przetwarzania obrazów w wierszu poleceń. Wykonuje w tle takie operacje jak zmiana rozmiaru obrazu, zmiana formatu itp. To są ważne funkcjonalności, ponieważ użytkownicy będą ładować obrazy wszystkich możliwych rozmiarów i formatów, które trzeba będzie automatycznie standaryzować. Narzędzie ImageMagick nie jest gemem. Ten program trzeba załadować do środowiska programistycznego za pomocą terminala. Nie obawiaj się, to jest łatwe. Paperclip jest gemem w języku Ruby służącym do ładowania obrazów. Umożliwia on umieszczanie w bazie załączników w postaci plików z obrazami. Dodasz go w taki sam sposób jak zwykłego gema. Ponadto w środowisku produkcyjnym obrazy będą przechowywane w usłudze Amazon S3, a nie w bazie PostgreSQL w usłudze Heroku. Dlaczego? Gem paperclip bez trudu ładuje obrazy do bazy danych, ale usługa Heroku ma problem z ich przetwarzaniem. Pliki z obrazami zajmują MNÓSTWO miejsca, a usługa Heroku nie jest przeznaczona do zapisywania milionów obrazów w swoich bazach.
Można wprawdzie ładować obrazy do bazy PostgreSQL, jednak są one po kilku godzinach automatycznie usuwane. Dlatego obrazy trzeba zapisywać w innym miejscu. Amazon S3 jest prostą usługą umożliwiającą przechowywanie obrazów w chmurze.
UWAGA! Usługa Amazon S3 jest płatna, ale nie jest droga. W przypadku naszej prostej aplikacji generującej niewielki ruch i przechowującej niewielką liczbę obrazów będziesz musiał prawdopodobnie zapłacić kilkadziesiąt groszy miesięcznie.
Ja przechowuję w tej usłudze mnóstwo danych, a mój ostatni miesięczny rachunek wyniósł 1,29 dolara. To niedrogo. Jeżeli nie chcesz wydawać pieniędzy, to nie musisz w tym projekcie korzystać z usługi Amazon S3. Ja jednak bardzo ją polecam, ponieważ jest to obecnie standard. Może się zdarzyć, że któregoś dnia będziesz musiał tej usługi do czegoś użyć, a więc również dowiedzieć się, jak z niej korzystać. Ale ten temat opiszę później. Teraz zajmijmy się narzędziem ImageMagick.
Instalacja narzędzia ImageMagick Jak już wspomniałem, ImageMagick nie jest gemem, w rzeczywistości nie jest to nawet obiekt języka Ruby. Program ten współpracuje ze wszystkimi narzędziami do tworzenia stron WWW. Aby sprawdzić, czy narzędzie ImageMagick jest już zainstalowane w środowisku programistycznym, wpisz w terminalu poniższe polecenie: 1 $ identify 2 Jeżeli narzędzie nie jest zainstalowane (co jest prawdopodobne), pojawi się komunikat o błędzie command not found (nieznane polecenie).
Zainstaluj więc narzędzie ImageMagick: 1 $ sudo apt-get install imagemagick 2 Polecenie apt-get służy do pobierania i instalowania w wierszu poleceń oprogramowania w systemach Unix/Linux. Może pojawić się pytanie, czy chcesz kontynuować operację (Do you want to continue?). Wpisz Y i naciśnij klawisz Enter. Teraz wpisz ponownie polecenie identify. Tym razem w terminalu powinno pojawić się sporo tekstu. Jego treść nie jest w tej chwili ważna. Wynik oznacza, że narzędzie ImageMagick zostało pomyślnie zainstalowane i gotowe do użycia. I to wszystko w tej kwestii.
Instalacja gema paperclip Paperclip to gem języka Ruby, więc otwórz stronę RubyGems.org i wyszukaj frazę „paperclip”. W chwili powstawania tej książki dostępna była wersja 4.3.0. Skopiuj numer i wklej go do pliku Gemfile: /Gemfile 1 . 2 . 3 gem 'paperclip', '~> 4.3.0' 4 . 5 . Jak zwykle zapisz plik i wpisz polecenie bundle install: 1 $ bundle install
2 Jak się zapewne domyślasz, w celu poprawnego zainstalowania i zastosowania gema trzeba wykonać kilka dodatkowych operacji, m.in. zmienić stronę do tworzenia nowego pinu oraz model danych pinów: /app/models/pin.rb 1 class Pin < ActiveRecord::Base 2
belongs_to :user
3 has_attached_file :image, :styles => { :medium => "300x300>", :thumb => "100x100>" } 4 validates_attachment_content_type :image, :content_type => /\Aimage\/.*\Z/ 5 end 6 Wiersze 3. i 4. umożliwiają umieszczanie w modelu danych załączników w postaci plików obrazów, określają również ich właściwości. Zwróć uwagę na wiersz 3. Określa on wymiary obrazu (300×300) i jego podglądu (100×100). Dzięki temu będzie można zmieniać wymiary obrazów i wyświetlać je w standardowej wielkości, odwołując się w plikach stron jedynie do identyfikatorów :medium lub :thumb. W wierszu 4. określone są dopuszczalne typy obrazów (JPG, PNG, BMP, GIF itp.). W Twojej aplikacji będzie można ładować obrazy dowolnego typu, ale jeśli zechcesz ograniczyć je na przykład tylko do typu JPG, zmień odpowiednio ten wiersz. Teraz trzeba utworzyć migrację dodającą do tabeli pins kolumnę przechowującą informacje o obrazach: 1 $ rails generate paperclip pin image 2 Jak zawsze, migrację trzeba wysłać do bazy danych: 1 $ rake db:migrate
2 Pamiętaj, aby na koniec tę samą operację wykonać w usłudze Heroku (polecenie heroku run rake db:migrate). Jeżeli teraz otworzysz plik ze schematem bazy danych, zauważysz w tabeli pins kilka kolumn z ciągiem image w nazwie. Na koniec trzeba wprowadzić małą zmianę w pliku pins_controller.rb, umożliwiającą umieszczanie obrazów w parametrach formularzy: /app/controllers/pins_controller.rb 1 . 2 . 3 def pin_params 4
params.require(:pin).permit(:description, :image)
5 end 6 Powyższy kod znajdziesz w końcowej części pliku. Na końcu wiersza została dodana opcja :image. Cały wiersz oznacza „pozwól użytkownikom dodawać piny poprzez umieszczenie w formularzu opisu i załadowanie obrazu”.
Zmiana strony umożliwiająca ładowanie obrazów Zaimplementowałeś funkcjonalność umożliwiającą ładowanie obrazów, ale jeżeli otworzysz stronę do tworzenia pinów, zauważysz, że nie ma na niej odpowiedniego pola. Musisz je teraz dodać: /app/views/pins/_form.html.erb 1 <%= form_for @pin, html: { multipart: true } do |f| %>
2 . 3 . 4 . 5
6
<%= f.label :image, "Obraz" %>
7
<%= f.file_field :image, class: "form-control" %>
8
9 . 10 . Zwróć uwagę, że zostały tu wprowadzone dwie zmiany. Pierwsza polega na zmianie wiersza 1. z: 1 <%= form_for(@pin) do |f| %> 2 …na: 1 <%= form_for @pin, html: { multipart: true } do |f| %> 2 Zmiana ta powoduje, że w formularzu będzie można umieszczać wieloczęściowe dane (tj. obrazy). Ponadto zostało dodane pole umożliwiające użytkownikowi wskazanie i załadowanie pliku zapisanego w jego komputerze. Zapisz powyższy plik i otwórz stronę: https://obrazkowo-programista.c9.io/pins/new (lub Twój inny adres URL) Powinna pojawić się taka strona:
(Strona https://obrazkowo-programista.c9.io/pins/new z nowym polem Obraz) Wypróbuj stronę. Powinieneś bez problemu załadować obraz. Jednak po załadowaniu obrazu nic się nie stanie. Gdy powrócisz do strony z listą pinów, nie zobaczysz na niej obrazów. Trzeba zmienić stronę tak, aby je pokazywała! W tym celu musisz użyć następującego kodu: 1 <%= image_tag pin.image.url(:medium) %> 2 Zauważyłeś opcję :medium? Powoduje ona wyświetlenie obrazu o wymiarach 300×300. Zamiast niej możesz użyć opcji :thumb i wyświetlać obrazy o wymiarach 100×100. Dodaj powyższy znacznik w kodzie stron wyświetlających listę pinów i pojedynczy pin: /app/views/pins/index.html.erb 1
28 29 30 31 <%= link_to 'Nowy pin', new_pin_path %> Teraz na stronie z listą pinów pojawią się obrazy. Trzeba jeszcze zmienić stronę wyświetlającą pojedynczy pin: /app/views/pins/show.html.erb 1
<%= notice %>
2 3
4
<%= image_tag @pin.image.url(:medium) %>
5
Opis:
6
<%= @pin.description %>
7
8 <% if @pin.user == current_user %> 9
<%= link_to 'Edycja', edit_pin_path(@pin) %>
10 <% end %> 11 <%= link_to 'Wstecz', pins_path %> 12 Odśwież stronę i sprawdź efekt. Jeżeli obrazy nie są wyświetlane, uruchom ponownie serwer i odśwież stronę. To powinno pomóc.
Przyjrzyj się wprowadzonym zmianom. Zwróć uwagę, że w pliku index zostało umieszczone inne odwołanie do obrazu niż w pliku show. W pierwszym pliku w wierszu 17. nie ma znaku @ przed nazwą obiektu pin.image.url, natomiast znak ten jest umieszczony w drugim pliku. Co to daje? Zauważ, że w pliku index w wierszu 15. znajduje się już odwołanie do obiektu @pins: 1 <% @pins.each do |pin| %> 2 Wiersz ten oznacza pętlę przeglądającą zawartość obiektu @pins. Plik show nie zawiera pętli odwołującej się do obiektu @pins, więc w celu odwołania się do obrazu trzeba użyć nazwy @pins. Zapisz dotychczasową pracę: 1 $ git add . 2 $ git commit –am 'dodany imagemagick I paperclip, zmienione widoki pinów' 3 $ git push 4 $ git push heroku master 5 $ heroku run rake db:migrate 6
Zapisywanie obrazów w usłudze Amazon S3 Teraz pora na skonfigurowanie usługi Amazon S3. Jeżeli nie masz konta w portalu Amazon AWS, otwórz stronę aws.amazon.com i załóż bezpłatne
konto. Zostaniesz poproszony o podanie numeru karty kredytowej, która — jak wspomniałem wcześniej — zostanie obciążona opłatą za wykorzystane pasmo. W przypadku Twojej aplikacji będzie to kilkadziesiąt groszy miesięcznie. Jak zwykle, w platformie Rails dostępny jest gem o nazwie aws-sdk, umożliwiający wykorzystanie usługi Amazon S3. Otwórz więc stronę RubyGems.org i wyszukaj ten gem. W chwili powstawania książki dostępna była wersja 2.1.16. Skopiuj numer i wklej go do pliku Gemfile: /Gemfile 1 . 2 . 3 gem 'aws-sdk', '~> 2.1.16 4 Jak zawsze, trzeba użyć polecenia bundle install: 1 $ bundle install 2 W celu poprawnego skonfigurowania gema trzeba wykonać kilka dodatkowych operacji: /config/environments/production.rb 1 . 2 . 3 config.paperclip_defaults = { 4
10 } 11 end 12 Jak pamiętasz, powyższy plik był omówiony na początku książki, gdy tworzyłeś adres URL aplikacji w usłudze Heroku. W tym pliku zapisane są specjalne instrukcje dla środowiska produkcyjnego (tj. w usłudze Heroku). Ponieważ w środowisku produkcyjnym obrazy będą przechowywane w usłudze Amazon S3, logiczne jest, że aby aplikacja mogła z tej usługi korzystać, trzeba w tym pliku wprowadzić zmiany. Przyjrzyj się wpisanemu kodowi. Zawiera on informację, że gem paperclip będzie zapisywał obrazy w usłudze Amazon S3. Z tej usługi trzeba teraz pobrać trzy informacje: nazwę zasobnika (bucket), identyfikator klucza dostępu (access_key_id) oraz poufny klucz (secret_access_key). Omówię teraz powyższe dane. Po pierwsze, usługa Amazon S3 zapisuje pliki w strukturze katalogów, które noszą nazwę zasobników (ang. buckets). Gdy zalogujesz się do usługi, utworzysz zasobnik, którego nazwę musi znać Twoja aplikacja. Dlatego w pliku umieszczone jest odwołanie do tej nazwy. Po drugie, usługa uwierzytelnia aplikację, sprawdzając jej identyfikator klucza dostępu i klucz poufny. Informacje te można porównać do nazwy użytkownika i hasła umożliwiającego dostęp do usługi Amazon S3. Zwróć uwagę, że wpisany kod nie zawiera nazwy zasobnika ani identyfikatora klucza dostępu, ani klucza poufnego. Dlaczego? Czy aplikacja nie musi znać tych danych? Owszem, musi, ale dane te nie zostaną zapisane w tym miejscu. Dlaczego? Ponieważ niektórzy programiści przechowują swoje kody w systemach kontroli wersji, takich jak GitHub. Pamiętasz, jak na początku książki wybrałeś BitBucket, ponieważ pliki w tym systemie są prywatne, a w systemie GitHub publiczne? Jeżeli korzystasz z systemu GitHub, cały Twój kod będzie dostępny dla
każdego użytkownika. Jeżeli wpiszesz w nim poufny klucz do usługi Amazon, będą go widzieć inne osoby, a to baaardzo niedobrze. W platformie Rails można rozwiązać ten problem i nie trzeba zapisywać powyższych danych w pliku. Zamiast tego można wykorzystać zmienne środowiskowe reprezentowane w kodzie przez identyfikator ENV['nazwa_zmiennej']. W tych zmiennych będą zapisane poufne informacje. W żadnym pliku aplikacji nie będziesz zapisywał nazwy zasobnika, identyfikatora klucza ani klucza poufnego. Zamiast tego zapiszesz te dane w usłudze Heroku za pomocą specjalnych poleceń. Usługa Heroku zapisze je z kolei w pliku. Za każdym razem, gdy aplikacja będzie potrzebowała tych informacji, będzie odwoływała się do zmiennych środowiskowych i odczytywała z nich rzeczywiste dane. Skomplikowane? Nie tak bardzo. Zanim zapiszesz powyższe dane w usłudze Heroku, musisz najpierw je uzyskać. Oznacza to, że musisz zalogować się do portalu Amazon AWS i odczytać potrzebne dane. Zrób to więc teraz.
(Konsola portalu Amazon AWS) Pobierz najpierw nazwę zasobnika. W konsoli Amazon kliknij odnośnik S3, a następnie na nowej stronie przycisk Create Bucket (utwórz zasobnik).
(Tworzenie zasobnika w portalu Amazon AWS) W polu Bucket Name wpisz nazwę zasobnika. Nazwa musi być unikatowa, na przykład obrazkowo. W polu Region wybierz opcję US Standard. Po kliknięciu przycisku Create pojawi się strona zasobników w usłudze S3, na której będzie widoczny nowo utworzony zasobnik. Teraz musisz nadać odpowiednie uprawnienia, aby każdy użytkownik mógł ładować do zasobnika obrazy i przeglądać je. Kliknij prawym przyciskiem myszy nazwę zasobnika i wybierz polecenie Properties (właściwości). Po prawej stronie ekranu pojawi się panel. Kliknij w nim odnośnik Permissions (uprawnienia), a następnie zieloną ikonę Add more permissions (dodaj więcej uprawnień). W rozwijanej liście Grantee (uprawniony) wybierz pozycję Everyone (wszyscy), a następnie zaznacz wszystkie opcje wyboru: List (wyświetlanie), Upload/Delete (ładowanie/usuwanie) View Permissions (przeglądanie uprawnień), Edit Permissions (edycja uprawnień).
(Portal Amazon AWS, nadawanie uprawnień do zasobnika) Na koniec kliknij przycisk Save (zapisz), aby zapisać uprawnienia. Twój zasobnik jest gotowy, musisz jedynie zapamiętać (albo zanotować) jego nazwę.
Uzyskiwanie identyfikatora klucza dostępu i klucza poufnego w usłudze Amazon Teraz musisz odczytać identyfikator klucza dostępu i klucz poufny. Jeżeli dopiero założyłeś konto w portalu Amazon AWS, musisz wykonać kilka operacji. Jeżeli korzystasz z istniejącego konta, w którym zostały już utworzone klucze, możesz niektóre operacje pominąć. Jeżeli założyłeś właśnie konto, kliknij w prawym górnym rogu strony Amazon swoją nazwę i z rozwijanej listy wybierz pozycję Security Credentials (poświadczenia bezpieczeństwa).
Następnie w panelu, który się pojawi, kliknij przycisk Get Started with IAM Users (zacznij tworzyć konta do identyfikacji użytkowników i nadawania im dostępu do zasobów). Jeżeli utworzyłeś już wcześniej konta IAM, nie musisz klikać tego przycisku. Zakładam jednak, że tworzysz konto pierwszy raz. Po lewej stronie okna kliknij odnośnik Users (użytkownicy), a następnie u góry strony duży niebieski przycisk Create New Users (utwórz nowych użytkowników). Na nowej stronie wpisz w jednym z pól swoją nazwę, zaznacz opcję Generate an access key for each user (wygeneruj klucz dostępu dla każdego użytkownika) i kliknij przycisk Create u dołu strony. Pojawi się nowa strona z komunikatem This is the last time these User security credentials will be available for download (to jest ostatnia możliwość pobrania poświadczeń bezpieczeństwa użytkownika) oraz z odnośnikiem Show User Security Credentials (pokaż poświadczenia bezpieczeństwa użytkownika) umożliwiającym pobranie klucza. Kliknij ten odnośnik, a następnie skopiuj identyfikator klucza dostępu i klucz poufny. Zapisz gdzieś te informacje. Zapewne uważasz, że jest to identyfikator klucza dostępu i klucz poufny, które trzeba zapisać w usłudze Heroku. Jesteś w błędzie. Z pewnych powodów musisz powtórzyć cały proces, aby wygenerować nowy identyfikator klucza dostępu i klucz poufny dla swojej aplikacji. Nie pytaj mnie, dlaczego tak jest — sam nie wiem, dlaczego Amazon tak funkcjonuje. Kliknij więc jeszcze raz swoją nazwę w prawym górnym rogu ekranu i wybierz pozycję Security Credentials. Tym razem kliknij przycisk Continue to Security Credentials (przejdź do poświadczeń bezpieczeństwa). Na nowej stronie będzie widoczny odnośnik Access Keys (Access Key ID and Secret Access Key) (klucze dostępu [identyfikator klucza dostępu i klucz poufny]), który prowadzi do potrzebnych Ci informacji. Kliknij ten odnośnik.
(Portal Amazon AWS, strona z poświadczeniami bezpieczeństwa) Rozwinie się sekcja, w której będzie widoczny duży niebieski przycisk Create New Access Key. Kliknij ten przycisk. Pojawi się okno z komunikatem, że klucz dostępu został pomyślnie utworzony. NIE ZAMYKAJ TEGO OKNA! Będziesz miał tylko tę jedną okazję do zanotowania kluczy. Kliknij odnośnik Show Access Key (pokaż klucz dostępu) znajdujący się u dołu okna. Skopiuj dane i wklej je do Notatnika albo zapisz w pliku. Teraz pora na wprowadzenie tych informacji do usługi Heroku. Interesujący artykuł na ten temat (w jęz. angielskim) znajduje się pod adresem: https://devcenter.heroku.com/articles/paperclip-s3 Przeczytaj go, jeżeli chcesz, niemniej jednak poniżej opisane są niezbędne operacje. Trzeba jedynie podać w usłudze Heroku nazwę zasobnika, identyfikator klucza dostępu i poufny klucz. Wszystkie te dane już masz, więc wprowadź je teraz: 1 $ heroku config:set S3_BUCKET_NAME=nazwa_zasobnika
2 $ heroku config:set AWS_ACCESS_KEY_ID=identyfikator_klucza_dostępu 3 $ heroku config:set AWS_SECRET_ACCESS_KEY=poufny_klucz 4 W powyższych poleceniach zastąp końcówki nazwa_zasobnika, identyfikator_klucza_dostępu i poufny_klucz po znakach równości odpowiednimi danymi. Aby sprawdzić, czy powyższe informacje zostały zapisane w usłudze Heroku, wpisz następujące polecenie: 1 $ heroku config 2 W terminalu pojawią się wszystkie informacje zapisane w usłudze. Jeżeli opisane wyżej operacje wykonałeś poprawnie, powinna pojawić się nazwa zasobnika, identyfikator klucza dostępu i poufny klucz. Zapisz swoją pracę, wyślij ją do usługi Heroku i sprawdź, czy wszystko działa! 1 $ git add . 2 $ git commit –am 'integracja Amazon S3 z Heroku' 3 $ git push 4 $ git push heroku master 5 $ heroku run rake db:migrate 6 Teraz nadeszła chwila prawdy... Otwórz stronę swojej aplikacji w usłudze Heroku, zaloguj się, utwórz nowy pin i wyświetl go. Czy pojawił się obraz? Kliknij obraz prawym przyciskiem i wybierz polecenie Pokaż obrazek. Zwróć uwagę na adres URL obrazu po wyświetleniu go w nowej zakładce przeglądarki. Czy adres wskazuje na usługę Amazon? Jeżeli tak, to znaczy, że wszystko działa poprawnie. Jeżeli nie — coś poszło
źle! Mam jednak nadzieję, że wszystko jest OK. Gratulacje! Twoja aplikacja jest w 90% gotowa. Teraz wystarczy tylko dodać do niej kilka elementów jQuery, pomajsterkować ze stroną wyświetlającą listę pinów i dodać kilka drobiazgów, co nie będzie trudne — i gotowe! W następnym rozdziale zajmiesz się wyglądem aplikacji i poznasz bardzo fajną bibliotekę jQuery Masonry.
Rozdział 8. Stylizacja witryny za pomocą jQuery Masonry i paginacji stron Zbliżasz się do końca projektu! Musisz jeszcze tylko pomajsterkować przy wyglądzie stron, wprowadzić kilka mniej istotnych zmian — i gotowe. Weźmy się więc do dzieła. Zacznijmy od tego, że strona z listą pinów w żaden sposób nie przypomina serwisu Pinterest. Trzeba to zmienić w pierwszej kolejności. Chcemy, aby każdy pin był wyświetlany w kwadratowym lub prostokątnym formularzu, z obrazem u góry i opisem na dole. Wygląda mi to na zadanie dla platformy Bootstrap! Ale najpierw trzeba się zająć innymi sprawami... Strona z listą pinów ma postać okropnej tabeli. Pozbądź się natychmiast wszelkich jej śladów, jak również wiersza
Lista pinów
: /app/views/pins/index.html.erb 1 <% @pins.each do |pin| %> 2
9 <% end %> 10 11 <%= link_to 'Nowy pin', new_pin_path %> 12 Z powyższego pliku zostały usunięte wszelkie ślady po tabeli, tj. znaczniki
, odpowiadające im znaczniki
, podziały
i wszystko, co miało związek z tabelą. Niewiele tego zostało! Teraz wprowadź podziały wierszy, dzięki którym strona będzie wyglądała nieco lepiej: /app/views/pins/index.html.erb 1 <% @pins.each do |pin| %> 2
(Strona z listą pinów bez formatowania) Przy okazji usuń odnośnik Wyświetl. Zamiast niego odnośnikiem będzie sam obraz. W tym celu wystarczy w powyższym listingu zmienić wiersz 2. (znacznik image_tag): 1 <%= link_to image_tag(pin.image.url(:medium)), pin %> 2 Teraz kod strony z listą pinów wygląda następująco: /app/views/pins/index.html.erb 1 <% @pins.each do |pin| %> 2 <%= link_to image_tag(pin.image.url(:medium)), pin %> 3
9 <% end %> 10 11 <%= link_to 'Nowy pin', new_pin_path %> 12 Jak dotąd idzie dobrze. Piny wyglądają nieco lepiej. Jedyny problem polega na tym, że stronę trzeba przewijać w pionie, a nie w poziomie. Ponadto po rozszerzeniu okna dobrze byłoby, gdyby piny płynnie zmieniały układ i w ten sposób wprowadzały ciekawy efekt na stronie. W tym celu użyj biblioteki o nazwie jQuery Masonry. Znajdziesz ją pod adresem http://masonry.desandro.com.
(Strona http://masonry.desandro.com) Jak zwykle, biblioteka ta jest dostępna w platformie Rails w postaci gema. Otwórz więc stronę RubyGems.org i wyszukaj gem masonry-rails. W chwili powstawania tej książki była dostępna jego wersja 0.2.4. Skopiuj numer i wklej go do pliku Gemfile. Ponadto musisz dodać gem jquery-turbolinks: Gemfile 1 . 2 . 3 gem 'jquery-turbolinks' 4 gem 'masonry-rails', '~> 0.2.4' 5 Jak zwykle aby zainstalować gemy, użyj polecenia bundle install: 1 $ bundle install
2 Na stronie RubyGems.org kliknij odnośnik masonry-rails, a następnie Documentation. Przejrzyj dokumentację, w której dokładnie opisane są dodatkowe kroki instalacji gema. Przewiń zawartość strony do sekcji CSS. Zgodnie z opisem musisz zmienić poniższy plik konfiguracyjny: /app/assets/stylesheets/application.css 1 . 2 . 3 *= require 'masonry/basic' 4 *= require 'masonry/centered' 5 *= require 'masonry/fluid' 6 *= require 'masonry/gutters' 7 *= require 'masonry/infinitescroll' 8 *= require 'masonry/right-to-left' 9 *= require 'masonry/transitions' 10 *= require_self 11 *= require_tree . 12 */ 13 Powyższy plik różni się nieco od tych, z którymi miałeś do tej pory do czynienia. Zwróć uwagę na wiersze 10. i 11. Wiersz 11. powoduje dołączenie do projektu wszystkich plików w katalogu /app/assets, a wiersz 10. — dołączenie powyższego pliku. Dlatego nowe wiersze trzeba umieszczać powyżej tych dwóch wierszy. Teraz przyjrzyj się dodanym wierszom (3. – 9.). Są to różne arkusze stylów z biblioteki Masonry. Zauważyłeś arkusz infinitescroll? Prawdopodobnie widziałeś już strony zawierające ten styl...
W rzeczywistości nie będą potrzebne wszystkie powyższe arkusze, lecz jedynie transitions. Zmień więc odpowiednio plik: /app/assets/stylesheets/application.css 1 . 2 . 3 *= require 'masonry/transitions' 4 *= require_self 5 *= require_tree . 6 */ 7 Zgodnie z dokumentacją do gema biblioteki Masonry, trzeba również dodać kilka wierszy do pliku manifestu JavaScript: /app/assets/javascripts/application.js 1 . 2 . 3 //= require jquery 4 //= require jquery.turbolinks 5 //= require jquery_ujs 6 //= require turbolinks 7 //= require bootstrap-sprockets 8 //= require bootstrap 9 //= require masonry/jquery.masonry 10 //= require_tree . Ważne jest, aby odwołanie jquery.turbolinks umieścić bezpośrednio pod
odwołaniem do jquery. W przeciwnym wypadku kod nie będzie działał poprawnie. Ponadto w pliku pins.coffee trzeba wpisać kilka wierszy kodu CoffeeScript: /app/assets/javascripts/pins.coffee 1 # Place all the behaviors and hooks related to the matching controller here. 2 # All this logic will automatically be available in application.js. 3 # You can use CoffeeScript in this file: http://coffeescript.org/ 4 $ -> 5
$('#pins').imagesLoaded ->
6
$('#pins').masonry
7
itemSelector: '.box'
8
isFitWidth: true
9 Na koniec trzeba jeszcze dodać trochę własnych stylów CSS: /app/assets/stylesheets/pins.scss 1 // Place all the styles related to the pins controller here. 2 // They will automatically be included in application.css. 3 // You can use Sass (SCSS) here: http://sass-lang.com/ 4 5 #pins { 6
margin: 0 auto;
7 } 8 9 .box { 10
margin: 5px;
11
width: 214px;
12 } 13 14 .box img { 15
width: 100%;
16 } 17 Właściwie to powyższy kod można było umieścić w pliku bootstraply.css.scss, jednak ponieważ są to definicje stylów pinów, lepiej umieścić kod w pliku pins.scss. W ten sposób zostały zainstalowane gemy. Trzeba jeszcze zmienić stronę z listą gemów tak, aby wykorzystywała bibliotekę Masonry. Gdy przewiniesz dokumentację do tej biblioteki, znajdziesz w niej sekcję Setup, zawierającą opis, jak używać znaczników div i klas w kodzie strony. /app/views/pins/index.html.erb 1
14 W wierszu 1. cała strona została umieszczona w sekcji div z identyfikatorem id="pins" (odpowiadającym stylowi CSS dodanemu przed chwilą do plików pins.scss i pins.coffee) i klasą class="transitions-enabled" (dzięki której uzyskuje się animację za pomocą biblioteki Masonry). Ponadto w wierszu 3. każdy pin jest umieszczany w sekcji div z klasą class="box", również dodaną do wspomnianych plików. Jeżeli uruchomisz ponownie serwer i odświeżysz stronę, okaże się, że piny ułożone są poziomo. Jeżeli zmienisz wielkość okna, piny się przemieszczą, dając przy tym ciekawy efekt animacyjny.
(Strona z listą pinów po zainstalowaniu biblioteki Masonry) Teraz wykonaj ostatni krok i nadaj pinom wygląd bardziej przypominający piny z serwisu Pinterest. Według mnie jest to idealne zadanie dla platformy Bootstrap: /app/views/pins/index.html.erb 1
19 Zwróć uwagę, że usunięty został wiersz z odnośnikiem Nowy pin, ponieważ taki sam odnośnik znajduje się w pasku nawigacyjnym u góry każdej strony. Sprawdź, jak teraz wygląda strona:
(Strona z listą pinów po zastosowaniu komponentów Bootstrap) Zauważ również, że odnośniki Edytuj i Usuń zostały umieszczone w sekcji z klasą panel-footer. Odnośniki te są widoczne tylko wtedy, gdy użytkownik jest zalogowany i jest autorem pinów. Jeżeli więc wylogujesz się, strona z listą pinów będzie wyglądała jak niżej:
(Strona z listą pinów bez odnośników)
W tym miejscu możesz do woli eksperymentować z wyglądem strony. Postawiam Tobie nadanie aplikacji ostatecznego wyglądu. Baw się dobrze!
Ulepszenie strony wyświetlającej pin Strona z listą pinów wygląda całkiem dobrze, zatem teraz popraw wygląd strony wyświetlającej pojedynczy pin: /app/views/pins/show.html.erb 1
2 3
4
<%= image_tag @pin.image.url(:medium) %>
5
6
<%= @pin.description %>
7
<% if @pin.user == current_user %>
8
<%= link_to 'Edycja', edit_pin_path(@pin) %>
9
<% end %>
10
<%= link_to 'Wstecz', pins_path %>
11 12 13
14
15
Przede wszystkim z pliku został usunięty następujący wiersz: 1
<%= notice %>
2 Wiersz został usunięty, ponieważ wcześniej zmieniłeś plik kontrolera tak, aby sam wyświetlał komunikat flash. W efekcie komunikat ten pojawiał się dwa razy, co nie było pożądanym efektem. Ponadto cały kod został umieszczony w sekcji div, ponieważ platforma Bootstrap tego wymaga. W wierszu 3. środkowana jest zawartość strony umieszczona w panelu w taki sam sposób, jak to robiłeś już wiele razy. Układ strony jest bardzo prosty, ale pożądany efekt został osiągnięty i można zameldować wykonanie zadania.
(Strona z pinem wyśrodkowana za pomocą panelu)
Przystosowanie strony do urządzeń mobilnych W dzisiejszych czasach strony WWW muszą być dostosowane do urządzeń mobilnych. Na szczęście platforma Bootstrap troszczy się o to za nas. Jedyną rzeczą, którą trzeba zrobić, jest dodanie jednego wiersza do pliku
app/views/layouts/application.html.erb, informującego przeglądarkę, że strona jest przystosowana do urządzeń mobilnych: /app/views/layouts/application.html.erb 1 2 3 4
8 9 10 11 . Aby dostosować stronę do urządzeń mobilnych, wystarczy jedynie dodać wiersz 8. Jeżeli teraz otworzysz stronę na smartfonie, zauważysz w prawym górnym rogu standardowe menu rozwijane, natomiast cała strona zmieni rozmiar i dopasuje się do wielkości ekranu. Wiersz nr 8 jest standardowym kodem, który powinieneś umieszczać na wszystkich stronach, jakie będziesz tworzył, nieważne, czy za pomocą Rails, czy w inny sposób.
(Rozwijane menu w urządzeniu przenośnym)
Zmiana kolejności pinów Aplikacja wygląda coraz lepiej, prawie skończyłeś! Jest jednak mały problem, być może go zauważyłeś. Piny w liście są ułożone w niewłaściwej kolejności! Każdy dodany pin jest umieszczany na końcu listy. Wyobraź sobie, że użytkownik dodał kilkaset albo kilka tysięcy pinów. Aby zobaczyć najnowsze, trzeba będzie przewinąć stronę na sam koniec. Lepiej byłoby, gdyby najnowsze piny były umieszczane na samym początku listy. Za pomocą platformy Rails można to osiągnąć bardzo łatwo. Wystarczy jedynie zmienić kontroler pinów: /app/controllers/pins_controller.rb 1 . 2 . 3 def index 4
@pins = Pin.all.order("created_at DESC")
5 end 6 . 7 . Na końcu wiersza w sekcji def index została jedynie dopisana część .order("created_at DESC"). Opcja DESC oznacza angielskie słowo descending, czyli malejąco. W ten sposób platforma Rails będzie wyświetlała piny w kolejności malejącej według czasu utworzenia (tj. od najnowszego do najstarszego pinu). To wszystko, co trzeba zrobić!
Ale pojawia się pytanie: ile pinów ma być wyświetlanych na stronie? Nie chcemy, aby były ich tysiące, prawda? W żadnym wypadku. Trzeba określić jakąś granicę i wyświetlać tylko określoną liczbę pinów, na przykład 20, 50 albo inną. Ten efekt można osiągnąć za pomocą paginacji. Jak zwykle, jest dostępny odpowiedni do tego celu gem (a w tym przypadku są to dwa gemy).
Dodanie paginacji stron Trzeba dodać dwa gemy: jeden implementujący właściwą paginację, a drugi wiążący platformę Bootstrap z paginacją, dzięki czemu będzie można wykorzystać efektownie wyglądające klasy platformy Bootstrap do paginacji. /Gemfile 1 . 2 . 3 gem 'will_paginate', '~> 3.0.7' 4 gem 'will_paginate-bootstrap', '~> 1.0.1' 5 Gem will_paginate realizuje paginację stron, natomiast gem will_paginatebootstrap wiąże paginację z platformą Bootstrap. Teraz sam zajrzyj na stronę RubyGems.org i zapoznaj się z dokumentacją do obu gemów. Powinieneś nabrać tego dobrego zwyczaju. Aby poprawnie skonfigurować paginację, trzeba wprowadzić w projekcie dwie zmiany: jedną w kontrolerze pinów, a drugą w kodzie strony z listą pinów. Zajmijmy się najpierw kontrolerem: /app/controllers/pins_controller.rb
1 . 2 . 3 def index 4 @pins = Pin.all.order("created_at DESC").paginate(:page => params[:page], ↳:per_page => 3) 5 end 6 . 7 . Jak pamiętasz, przed chwilą w pliku kontrolera zmieniłeś kolejność pinów. Teraz do tego samego wiersza dopisałeś kolejne polecenia. Jedyną rzeczą, na którą należy zwrócić uwagę, jest parametr 3 na końcu wiersza 4. Parametr ten określa liczbę pinów wyświetlanych na stronie. W tym przypadku jest to liczba 3, ponieważ przy większej wartości na stronie nie byłyby widoczne kontrolki paginacji z powodu małej liczby pinów. Liczba 3 powoduje, że paginacja będzie miała miejsce (są 4 piny, a ja jestem zbyt leniwy, aby dodać ich więcej). Gdyby to była prawdziwa strona WWW, którą byś upublicznił, parametr ten należałoby ustawić na 25 lub 50. Teraz trzeba umieścić paginację na stronie. W tym celu zmień plik z listą pinów: /app/views/pins/index.html.erb 1 . 2 . 3 <%= will_paginate @posts %> 4 Powyższy wiersz umieść na samym końcu pliku i uruchom ponownie serwer (ponieważ dodałeś nowe gemy).
UWAGA! Domyślnie gem will_paginate tworzy kontrolkę nawigacji z angielskimi napisami. Aby napisy były w języku polskim, utwórz w katalogu /app/config/locales plik pagination.pl.yml i wpisz w nim następujący kod: /app/config/locales/pagination.pl.yml 1 pl: 2
will_paginate:
3
previous_label: "← Poprzednia"
4
next_label: "Następna →"
5
page_gap: "…"
Sprawdź, jak wygląda strona:
(Strona z listą pinów i podstawową paginacją) Cel osiągnięty, ale odnośnikom należałoby nadać lepszą stylizację. Jak już wspomniałem, platforma Bootstrap oferuje klasę do paginacji. Otwórz stronę GetBootstrap.com, kliknij odnośnik Components, a następnie Pagination. Pojawią się dostępne opcje paginacji.
Zmień wiersz z paginacją tak, aby zastosować w nim komponent Bootstrap: /app/views/pins/index.html.erb 1 . 2 . 3 <%= will_paginate @pins, renderer: BootstrapPagination::Rails %> 4 Odśwież stronę i sprawdź efekt:
(Strona z listą pinów, paginacją i komponentem Bootstrap) O wiele lepiej! Trzeba jednak umieścić paginację w środku ekranu. W tym celu zdefiniuj w pliku bootstraply.css.scss styl center: /app/assets/stylesheets/bootstraply.css.scss 1 @import "bootstrap-sprockets"; 2 @import "bootstrap"; 3
4 .center { 5
text-align: center;
6 } 7 . Upewnij się, że wpisałeś styl PONIŻEJ wierszy @import. Teraz musisz jeszcze zastosować styl na stronie z listą pinów: /app/views/pins/index.html.erb 1 . 2 . 3
7 . 8 . Powyższe zmiany powodują utworzenie na stronie rejestracji nowego pola, w którym użytkownik będzie mógł wpisać swoją nazwę. Dodatkowo na stronie edycji profilu tworzone jest pole, w którym będzie można tę nazwę zmienić.
(Strona http://obrazkowo-programista.c9.io/users/sign_up z polem Nazwa) Trzeba jeszcze wskazać platformie Rails, że powinna przyjmować nazwę wpisaną w polu Nazwa. W tym celu należy zmienić plik kontrolera. /app/controllers/application_controller.rb 1 class ApplicationController < ActionController::Base 2
# Prevent CSRF attacks by raising an exception.
3 # For APIs, you may want to use :null_session instead. 4
13 end 14 Trzeba również zmienić odwołania w sekcji pin_params pliku w kontrolerze pinów: /app/controllers/pins_controller.rb 1 .
2 def pin_params 3 params.require(:pin).permit(:description, :image, :name) 4 end 5 . 6 . Wystarczy jedynie dodać parametr :name na końcu wiersza 3. Do tej pory wiersz ten zawierał odwołanie do opisu i obrazu, a teraz dodałeś jeszcze odwołanie do nazwy użytkownika. Na stronie z listą pinów i na stronie z pojedynczym pinem pod każdym obrazem musi być wyświetlana nazwa użytkownika. Zmień poniższy plik: /app/views/pins/index.html.erb 1 . 2 . 3 <%= link_to image_tag(pin.image.url(:medium)), pin %> 4
5
<%= pin.description %>
6 <%= pin.user.name if pin.user %> 7
8 Dodatkowo zmień stronę wyświetlającą pojedynczy pin tak, aby była na niej widoczna również nazwa użytkownika: /app/views/pins/show.html.erb 1 .
2 . 3 <%= @pin.description %> 4 <%= @pin.user.name %> 5 . 6 . 7 Poniżej wiersza z obiektem pin.description umieść wiersz z odwołaniem do nazwy — i gotowe! Teraz zapisz swoją pracę: 1 $ git add . 2 $ git commit –am 'added user name, updated devise forms' 3 $ git push 4 $ git push heroku master 5 $ heroku run rake db:migrate 6 I to wszystko! Nie było tak źle.
(Strona http://obrazkowo-programista.c9.io z nazwami użytkowników) Uważam, że Twoja aplikacja to kawał dobrej roboty. Witryna zawiera wszystkie najważniejsze funkcjonalności. W następnym rozdziale dokonasz kilku kosmetycznych zmian w kolorach i jeszcze bardziej upodobnisz aplikację do serwisu Pinterest. Ale jeśli chodzi o przeznaczenie i działanie, to aplikacja jest gotowa! Gratuluję wykonania dotychczasowej pracy! Zrealizowałeś niesamowite zadanie w bardzo krótkim czasie! Możesz teraz podziwiać swoje dzieło, a za chwilę przejdziemy do następnego rozdziału.
Więcej na: www.ebook4all.pl
Rozdział 9. Upiększanie witryny i zakończenie projektu Aplikacja jest w zasadzie gotowa, ale można jeszcze nieznacznie zmienić jej wygląd, aby bardziej przypominała serwis Pinterest. Wcześniej pisałem o możliwości dostosowywania platformy Bootstrap. Otwórz teraz stronę GetBootStrap.com i kliknij odnośnik Customize (dostosuj), aby wyszukać zmienne, które można modyfikować. Musisz wprowadzić kilka naprawdę małych zmian. Po pierwsze, podstawowy kolor witryny trzeba zmienić na czerwony, jak w serwisie Pinterest. Zatem odnośniki powinny być czerwone, podobnie jak przyciski i tytuł witryny w pasku nawigacyjnym. Konkretnie chodzi mi o odcień czerwieni o kodzie #cb2027. Wśród zmiennych platformy Bootstrap, które można modyfikować, jest jedna określająca kolor odnośników: 1 $link-color: #cb2027; 2 Aby zmienić kolor tytułu w pasku nawigacyjnym na czerwony, wpisz: 1 $navbar-default-brand-color: #cb2027; 2
Ponadto w celu zmiany koloru przycisków dostosuj podstawowy (primary) przycisk za pomocą następującej zmiennej: 1 $brand-primary: #cb2027; 2 Następnie zamień kolor tła strony i paska nawigacyjnego. Proponuję, aby tło strony miało kolor jasnoszary, a tło paska nawigacyjnego — biały. 1 $body-bg: #e9e9e9; 2 $navbar-default-bg: #ffffff; 3 Przy czym jeszcze można manipulować? Na przykład możesz zmienić kolor kontrolki paginacji u dołu strony. Wyróżnij ją tym samym kolorem czerwonym: 1 $pagination-active-bg: #cb2027; 2 $pagination-active-border: #cb2027; 3 Chwileczkę... Dlaczego by nie zmienić wysokości paska nawigacyjnego i trochę go nie skrócić? 1 $navbar-height: 40px; 2 Wygląda nieźle! Teraz wpisz wszystkie powyższe zmiany do pliku bootstraply.css.scss: /app/assets/stylesheets/bootstraply.css.scss 1 $navbar-default-bg: #ffffff; 2 $navbar-height: 40px; 3 $body-bg: #e9e9e9;
15 } 16 Moim zdaniem można uznać, że dzieło zostało skończone! Pamiętaj, aby w pliku CSS zmienne wpisywać POWYŻEJ, a klasy (w tym przypadku center) PONIŻEJ wierszy @import. Po raz ostatni zapisz swoją pracę! 1 $ git add . 2 $ git commit –am 'upiększony wygląd witryny' 3 $ git push 4 $ git push heroku master 5
Definiowanie własnego adresu URL Aplikacja jest gotowa, więc teraz zdefiniuj w środowisku produkcyjnym Heroku własny adres URL. Użytkownicy nie powinni używać adresu twojastrona.heroku.com, skoro może to być po prostu twojastrona.pl lub cosinnego.twojastrona.pl. Definiowanie własnych adresów URL jest bardzo proste. Jeżeli nie posiadasz nazwy domeny, możesz ją kupić u operatora godaddy.com lub www.nazwa.pl (każdy operator jest dobry, a roczna opłata za domenę wynosi kilkanaście złotych). Ponadto masz wybór: możesz skojarzyć domenę ze swoją nową aplikacją albo możesz użyć poddomeny.
Poddomeny Najpierw zajmiemy się poddomenami, ponieważ tę opcję najłatwiej opisać. Z Twoją aplikacją zostanie skojarzona poddomena http://rails.codemy.com. Gdy użytkownik otworzy ten adres, pojawi się Twoja aplikacja. Nic łatwiejszego! Otwórz stronę usługi Heroku, zaloguj się, a następnie kliknij swoją aplikację. Na nowej stronie kliknij u góry odnośnik Settings (ustawienia). Przewiń stronę w dół do sekcji Domains (domeny) i kliknij przycisk Add domain (dodaj domenę). Pojawi się niewielkie okienko, w którym można podać nazwę poddomeny (albo pełnej domeny). Wpisz więc nazwę rails.codemy.com i kliknij przycisk Save changes (zapisz zmiany). Skonfigurowałeś właśnie usługę Heroku tak, aby Twoja aplikacja miała adres URL rails.codemy.com. Zaloguj się teraz do panelu administracyjnego swojej domeny i utwórz wpis CName wskazujący adres URL Twojej aplikacji w usłudze Heroku
(twojurl.heroku.com). Panel administracyjny każdej domeny jest inny, dlatego naprawdę nie mogę opisać, jak powinieneś to zrobić. W tym celu możesz zadzwonić do centrum pomocy technicznej i poprosić o wskazówki dotyczące utworzenia wpisu CName. Zazwyczaj jest to bardzo proste.
Tworzenie własnej domeny Wiesz zatem, jak tworzyć poddomenę (rails.codemy.com). Ale jak skojarzyć zwykłą domenę (na przykład twojastrona.pl) z Twoją aplikacją? Proces jest dokładnie taki sam jak poprzednio. Zaloguj się do usługi Heroku, kliknij odnośnik Settings, odszukaj sekcję Domains i dodaj swoją domenę. Nie wpisuj jednak adresu costam.twojastrona.pl, tylko twojastrona.pl. Zwróć uwagę, że nie możesz nadać swojej aplikacji adresu www.twojastrona.pl, tylko twojastrona.pl (bez www). Następnie, jak poprzednio, skontaktuj się ze swoim operatorem i zapytaj, w jaki sposób utworzyć wpis CName dla Twojej domeny. We wpisie tym umieść adres URL z usługi Heroku (twojurl.heroku.com). Jeżeli czujesz się zagubiony, przeczytaj na stronie Heroku artykuł na powyższy temat: https://devcenter.heroku.com/articles/custom-domains To jest to!
Rozdział 10. Podsumowanie Udało się! Gotowe! Aplikacja jest skończona, nic więcej nie trzeba robić. Mam nadzieję, że książka Ci się podobała i wiele się nauczyłeś. Być może zabrzmi to zarozumiale, ale mam nadzieję, że odkryłeś radość programowania w platformie Rails. To jest naprawdę potężne narzędzie do szybkiego i łatwego tworzenia profesjonalnych stron WWW, takich jak Twoja aplikacja… Gdy dobrze poznasz narzędzie, utworzysz taką stronę w kilka godzin. Oczywiście za pierwszym razem, gdy czytałeś tę książkę i uczyłeś się, trwało to dłużej niż kilka godzin, ale samo wykonanie opisanych operacji (gdy już się dowiedziałeś, jak to zrobić) nie zajęło zbyt wiele czasu. Utworzyłeś naprawdę efektowną witrynę. Użytkownicy mogą się rejestrować, logować, wylogowywać, zmieniać swoje profile, tworzyć piny (CRUD!), przy czym wszystkie te operacje obsługuje platforma Rails w tle! Platforma oferuje profesjonalne funkcjonalności i jest naprawdę bardzo prosta w użyciu. Na tym polega jej siła. Zrobiłeś ogromny pierwszy krok w poznaniu platformy Rails, ale przed Tobą jeszcze wiele nauki. Mam nadzieję, że będziesz ją kontynuował! Polecam odwiedzenie strony codemy.com i zapoznanie się z innymi moimi szkoleniami dotyczącymi platformy Rails. W różnych szkoleniach pokazuję, jak tworzyć najróżniejsze strony. Jest przy tym wiele zabawy. Jedno szkolenie na stronie codemy.com kosztuje 39 dolarów. Możesz jednak zapisać się na wszystkie szkolenia z listy (i wszystkie inne szkolenia, które się pojawią) za jedyne 99 dolarów.
Zapisz się jeszcze dziś na wszystkie szkolenia. Dostaniesz ode mnie kupon uprawniający do zniżki w wysokości 20 dolarów. Zapłacisz więc 79 dolarów, co jest świetną okazją. Przyglądaj się, jak tworzę wszelkiego rodzaju strony za pomocą platformy Rails (jak również innych języków programowania) i objaśniam wszystko krok po kroku. Podczas zapłaty podaj kod kuponu rails101, aby otrzymać specjalną cenę 79 dolarów. Do zobaczenia! — John Elder Codemy.com
Spis treści O autorze Wprowadzenie Czym właściwie jest platforma Ruby on Rails? Dla kogo jest ta książka? Czy trzeba nauczyć się języka Ruby? Co będziemy robić w tej książce? Jak wygląda nauka? Konwencje stosowane w tej książce Rozdział 1. Środowisko programistyczne Z jakiej wersji Rails i Ruby korzystasz? Popularne polecenia terminalowe Utworzenie pierwszego projektu Rails Uruchomienie aplikacji Architektura MVC Pliki gemów Dodawanie stron do aplikacji WWW Przekierowanie strony Kontrola wersji w systemach GitHub i Bitbucket Instalacja programu Git Przywracanie kodu GitHub czy Bitbucket? System Bitbucket System GitHub Udostępnianie aplikacji za pomocą usługi Heroku Wysyłanie kodu do usługi Heroku Następny krok — uzyskiwanie pomocy Rozdział 2. Tworzenie prostej aplikacji Dodawanie nowych stron do aplikacji Dodanie nowej strony do kontrolera Ustawienie ścieżki do nowej strony Tworzenie odnośników do stron Z tworzeniem odnośników na każdej stronie jest za dużo roboty Tworzenie plików częściowych Pliki layouts/application.html.erb Rozdział 3. Dodawanie komponentów Bootstrap Instalacja platformy Bootstrap Zabawa z platformą Bootstrap Utworzenie paska nawigacyjnego Dostosowanie platformy Bootstrap Rozdział 4. Obsługa użytkowników za pomocą gema Devise Krok pierwszy Krok trzeci
Krok piąty Obsługa bazy danych w platformie Rails Baza programistyczna i baza produkcyjna Wysyłanie migracji do bazy PostgreSQL w usłudze Heroku Sprawdzenie nowych stron gema Devise Zmiana wyglądu stron gema Devise Tworzenie odnośników na stronach gema Devise Sprawdzenie, czy użytkownik jest zalogowany Zmiana paska nawigacyjnego Rozdział 5. Tworzenie szkieletu aplikacji Sprawdzenie widoków szkieletu To jest CRUD! Widoki i kontroler szkieletu Tabela utworzona w bazie danych Sprawdzenie strony z listą pinów Zmiana paska nawigacyjnego Rozdział 6. Uwierzytelnianie użytkowników Powiązania w platformie Rails Stosowanie powiązań Tworzenie powiązań Aby utworzyć pin, trzeba się zalogować Podsumowanie Rozdział 7. Ładowanie obrazów za pomocą gema paperclip Instalacja narzędzia ImageMagick Instalacja gema paperclip Zmiana strony umożliwiająca ładowanie obrazów Zapisywanie obrazów w usłudze Amazon S3 Uzyskiwanie identyfikatora klucza dostępu i klucza poufnego w usłudze Amazon Rozdział 8. Stylizacja witryny za pomocą jQuery Masonry i paginacji stron Ulepszenie strony wyświetlającej pin Przystosowanie strony do urządzeń mobilnych Zmiana kolejności pinów Dodanie paginacji stron Ustawienie listy pinów jako strony głównej Dodanie nazwy użytkownika Rozdział 9. Upiększanie witryny i zakończenie projektu Definiowanie własnego adresu URL Poddomeny Tworzenie własnej domeny Rozdział 10. Podsumowanie
![Head First Ruby on Rails [PL]](https://docer.tips/img/300x300/head-first-ruby-on-rails-pl_5a899818d64ab25b237009ca.jpg)
![Helion - Ajax on Rails - Scott Raymond [HQ]](https://docer.tips/img/300x300/helion-ajax-on-rails-scott-raymond-hq_5afb9c838ead0e28308b45b3.jpg)
