Webseite erstellen mit Ruby On Rails

TEIL 1

  • Projekt anlegen
  • Home Seite – Controller generieren
  • Aktionen und Views
  • Route-Pfand anpassen

TEIL 2

  • Bootstrap
  • Rubygems
  • Installation von Bootstrap
  • Template einfügen
  • Elemente verändern
  • Bild im Slider
  • Titel ändern

TEIL 3

  • Heroku
  • Git Versionsverwaltung
  • Gemfile vorbereiten
  • Projekt veröffentlichen
  • Datenbank migrieren
  • Fehlerbehebung: Assets Ordner



Projekt anlegen

Zu Beginn starten wir die Console, quasi den Terminal. Ich befinde mich schon in meinem Zielverzeichnis namens screencasts und mit dem Befehl „rails new appname“ in unserem Fall wähle ich den Namen myWebsite erstellen wir eine neue Ruby On Rails Applikation. Dies dauert einen kleinen Augenblick. Nachdem die Applikation erstellt ist, möchten wir den Server starten, doch zuvor – halt – nicht vergessen, wir müssen das Verzeichnis wechseln. Mit Hilfe des Befehls

dir

für directory, können wir den Inhalt des Ordners einsehen. Mit dem Befehl

cd

für change directory, springen wir in unser Zielverzeichnis. Hier angekommen starten wir zum ersten mal den lokalen Server mit dem Befehl „rails server“. Wie wir sehen unter

http://localhost:3000

finden wir die Startseite. Wir öffnen das mal mit unserem Standardbrowser und es erscheint eine nette Begrüßungsmeldung „You are riding ruby on rails, welcome aboard!“ Gute Arbeit.

 

Home Seite – Controller generieren

Nun beenden den Server wieder mit der Tastenkombination STRG + C. Unsere Webseite sollte eigene Unterseite haben. Mit dem Befehl

rails generate controller pages home

und der Enter-Taste genieren wir uns die Struktur für eine Seite namens Home. Um das Ruby On Rails Webprojekt im Texteditor anzusehen geben wir den Befehl

atom .

ein, dieser Shortcut funktioniert aber nur, wenn du den Atom.io Texteditor installiert hast. Alternativ kannst du dein Projekt auch über den Dateibrowser mit dem Editor deiner Wahl öffnen. In unserer App angekommen finden wir unter dem Ordner app/controllers einen pages_controller und diesen pages_controller haben wir soeben erstellt. Dieser Controller hat auch schon eine Aktion und diese Aktion heißt home. Das heißt wenn wir den pages controller ansteuern und die Home Funktion, dann sollte eigentlich eine Seite erscheinen und zwar diese hier. Probieren wir das ganze einmal aus.

rails server

http://localhost:3000 öffnen, hier sehen wir wieder die Willkommensmeldung, dies ist uns ja schon bekannt und wenn wir jetzt hier localhost:3000/pages/home und die Enter-Taste, dann sehen wir exakt die Seite die wir im Texteditor sehen.

 

Aktionen und Views

Das heißt, wenn wir das Ansteuern, dann wird zuerst der pages controller aufgerufen, der pages controller hat die Aktion home, was wiederrum bedeutet wenn ich jetzt home mit zwei „e“ schreiben würde, dann würde eine Fehlermeldung kommen. Denn diese Aktion ist nicht definiert. Jede Aktion leitet auf eine View weiter, die View finden wir im Ordner views/pages/home.hmtl.erb // pages – pages_controller // home – Aktion home im pages_controller // Diese View können wir jetzt natürlich in unserem Texteditor beliebig verändern. „Welcome! My name is Michael!“. Speichern nicht vergessen. Zurück in unserem Standardbrowser, aktualiseren und hier sehen wir, dies spiegelt die View wider. Hierzu braucht ihr den Server nicht neustarten.

 

Route-Pfand anpassen

Aktuell ist der Route-Pfad quasi http://localhost:3000 mit der Willkommensmeldung versehen. Wir möchten aber hier unsere Homeseite anzeigen lassen und dazu verändern wir das interne Routing. Im Ordner config/routes.rb finden wir das aktuelle Routing. Diese Ziele get ‚pages/home‘ bedeutet nur, wenn jemand diesen Befehl eingibt wird er weitergeleitet. Was im Umkehrschluss bedeutet, wenn wir diesen Befehl mit einer # auskommentieren und speichern, können wir die Seite nicht mehr über http://localhost:3000/pages/home ansteuern. Aber zurück zu unserem root. Wir möchten, dass die Startseite mit der pages Seite versehen ist.

root 'pages#home'

das heißt, wenn der root angesteuert werden soll leite bitte weiter zum pages Controller und übergebe die Aktion home. Speichern und aktualisieren. Voilà, hier sehen wir unsere Hauptseite. Wenn wir jetzt die Seite http://localhost:3000/pages/home wieder aktivieren möchten, dann können wir auch diese beiden Befehle parallel laufen lassen.



Bootstrap

Bootstrap ist ein simples und flexibeles Framework für HTML, CSS und Javascript. Also quasi für das Frontend gedacht. Es beinhaltet sogar die Unterstützung für mobile Endgeräte, dass heißt wenn wir das ganze hier minimieren und auf den Menübereich achten, sehen wir wie das Menü für mobile Devices umspringt, mit dem Sandwich-Menü. Wie können wir nun Bootstrap in unserer Railsapplikation verwenden? Eine Option ist über den Download Button und die Dateien in den app/assets Ordner zu ziehen.

Rubygems

Eine bessere Option ist aber die Integration dieses Frameworks mit Hilfe eines Rubygems. Unter der Github Adresse

https://github.com/seyhunak/twitter-bootstrap-rails

finden wir eine Installationsanleitung. Hier finden wir bereits das Rubygem, darauf achten die ganze Zeile zu kopieren und zurück im Texteditor. Ins Gemfile unseres Projekts fügen wir das Twitter Bootstrap gem ein. Speichern nicht vergessen!

Installation von bootstrap

Zurück in unserer Console / Termin laden wir uns mit dem Befehl

bundle install

alle nötigen gems herunter. Das gemfile wird überprüft und wir sind fertig. Wir sehen hier in der Anleitung mit dem Befehl

rails generate bootstrap:install static

können wir die Seite generieren bzw. Bootstrap initialisieren, wir geben dies in unseren Terminal ein. Hier sehen wir alle Dateien, die generiert worden sind und wir prüfen das ganze in unserem Texteditor. Sowohl in app/assets/stylesheets als auch in app/assets/javascript sind nu neue Dateien zu finden. Um die Änderungen zu prüfen starten wir unseren Server „rails server“. Anhand der Veränderung des Designs (Schriftart) erkennt man, dass das Framework installiert ist.

Template einfügen

Wir fügen nun ein simples Template ein. Beispieltemplates bekommen wir kostenfrei auf der Seite

http://www.bootply.com

hier gehen wir auf „play now“ und wählen auf der linken Seite das Template „Carousel layout“ aus. Das Template sieht so aus.. Diese Seite ermöglicht Zugriff auf: im unteren Bereich den HTML Code, Javascript falls vorhanden und der komplette CSS Code. Wir kopieren wir nun den kompletten HTML Code. STRG + A = alles auswählen. STRG + C = alles kopieren. In unserer App im Pfad app/views/pages/home.html.erb fügen wir diesen Code ein. Speichern. Wir aktualiseren unsere Seite und wie wir sehen haben wir schon einzelne Elemente hinzugefügt. Jedoch sieht es noch nicht ganz so aus wie auf der Beispielseite, dies liegt ganz einfach daran, weil noch der CSS Part fehlt. Hier machen wir das Gleiche, jedoch gehen wir in den Pfad assets/stylesheets/bootstrap_and_overrides.css hier fügen wir es ein. Speichern. Dadurch, dass wir unsere Stylesheet verändert haben, sollten wir zur Sicherheit unseren Server neu starten. In unserem Browser – aktualisieren und wir sehen die einzelnen Elemente sind exakt so wie auf der Beispielseite. Der einzige Unterschied ist das Hintergrundbild.

Elemente verändern

Nun möchten wir aber einzelne Elemente verändern oder sogar löschen. Eine einfache Möglichkeit ist dafür die Inspect-Element Funktion des Browsers zu verweden. Rechtsklick. Inspect Element. Linksklick auf z.B. das Dropdown Menü, dann befinden wir uns im unterem Teil an der richtigen Stelle des Codes und die entfernen-Taste und dieses Dropdown Menü ist gelöscht. Zusätzlich ändern wir noch diesen Text hier. Im Footer-Bereich möchten wir noch diese Zeile verändern. Inspect Element. Linksklick wieder auf das Element und löschen. Sobald wir auf dieser Seite fertig sind mit den Änderungen wählen wir den HTML Sektor im unteren Bereich aus. Diesen finden wir hier. Rechtsklick und kopieren. app/views/pages/home.html.erb hier fügen wir diesen Inhalt ein.

Bild im Slider

Zusätzlich möchten wir nun ein Bild im Slider haben, hierfür laden wir uns ein lizenfreies Bild bei einer Seite wie Unsplash. Nachdem herunterladen speichern wir diese Datei in unserem Ordner myWebsite/app/assets/images gegebenfalls umbennen in slider1.jpeg Zurück in unserem Editor ändern wir den Pfad des Slider Images in „../assets/slider1.jpeg“ Speichern und unsere Ruby On Rails App aktualisieren. Wie wir sehen, wir haben einen Hintergrund hinter unserer Überschrift. Dieser obere Bereich sieht schon mal nicht schlecht aus! Mit der exakt gleichen Methode können wir auch diese Bilder zu verändern. Um diese Bilder leicher im Quellcode zu finden, können wir auch wieder mit der Inspect Element Funktion arbeiten und können gegebenfalls im Texteditor auch danach suchen oder schon hier die Source abändern.

Titel ändern

Zum Abschluss ändern wir noch den Titel der Seite. Aktuell heißt die Seite „Bootstrap 3“, den Titel finden wir über die Suchfunktion STRG + F.



Heroku

Wir werden nun unser Projekt ins Internet katapultieren. Hierfür verwenden wir den Dienstleister Heroku. Warum Heroku? Weil Heroku meiner Meinung nach der einfachste und schnellste Weg ist um eine Ruby On Rails Applikation zu veröffentlichen. Zu aller erst benötigen wir einen Account bei Heroku. Dieser kann kostenlos über die Sign-Up Page erstellt werden. Danach ist ein Login auf der Seite möglich, hier sieht man spätere Informationen zur Erstellten Ruby On Rails App. Da wir aber alles nötige über den Terminal lösen können schließen wir den Browser fürs erste.

Git Versionsverwaltung

Im Terminal angekommen müssen wir den Code unserer App zu dem Versioninsierungstool GIT hinzufügen. Mit dem Befehl

git init

intitialisieren wir den Ordner. Wichtig dabei ist auch darauf zu achten, dass man sich wirklich in seinem Projektordner befindet. Dies hört sich trivial an, aber ist mir schon des öfteren passiert und ist richtig ärgerlich. Wie fügen mit dem Befehl

git add . 

alle Dateien aus dem Verzeichnis hinzu. Und mit dem Befehl

git commit -m "initial commit"

übergeben wir diese Dateien, wobei diese Zeile „initial commit“ nur ein Kommentar ist und hier könntet ihr auch „update meiner Webseite“ schreiben. Nun sehen wir eine Übersicht aller Dateien die hinzugefügt worden sind. Geben wir jetzt nun

git status 

ein und wir sehen unser Workdirectory ist sauber und alles ist auf dem aktuellen Stand.

Gemfile vorbereiten

Nun ist aber unser Webseitenprojekt noch nicht für den Hostingservice von Heroku vorbereitet. Hierzu müssen wir im gemfile einige Anpassungen machen. Wir ändern dazu die Datenbank, denn Heroku verwendet kein sqlite3 sondern posgres und somit würde es bei der Installation auf dem Server crashen. Wir möchten aber sqlite3 während der Entwicklung verwenden und in der Produktion auf dem Server von Heroku soll posgres verwendet werden. Dies können wir über eine Gruppe lösen

group :development do
gem 'sqlite3'
end

group :production do
gem 'pg'
end

Zusätzlich benötigt die Struktur der Server von Heroku ein weiteres gem. Dieses finden wir in der Dokumentation im Developmentcenter von Heroku. Dieses gem nennt sich ’12factor‘ und hier zeigt es sich, es wird in die Gruppe production eingefügt.

group :production do
gem 'pg'
gem '12factor'
end

Danach begeben wir uns zum Terminal und starten den Befehl

bundle install --without production

durch diese Änderungen führen wir erneut ein update unseres git Dateiordners durch.

git status

und wir sehen was sich überhaupt verändert hat. Das Gemfile wurde modifiziert.

git add .

um alle Dateien hinzuzufügen und

git commit -m "Setup for Heroku deployment"

Wir sehen zwei Dateien verändert und zwei Dateien wurden gelöscht. Der Vorbereitungsprozess ist nun abgeschlossen und wir veröffentlichen unser Projekt nun.

Projekt veröffentlichen

Solltest du zum ersten mal mit Heroku arbeiten, dann ist der erste Befehl für dich

heroku login

um deine Logindaten einzugeben, welche du beim Registrieren angeben hast.

heroku create

Mit create erstellen wir über heroku eine Applikation, auch eine Subdomain wurde bereits registriert. Mit dem Befehl

git push heroku master

stoßen wir die Übertragung unseres lokalen Git-Ordners auf den Heroku Server in das Appverzeichnis an. Nachdem die Installation beendet ist, sehen wir bereits unsere Subdomain wo unsere App erreichbar ist und wir können auch über den Befehl

heroku open 

die fertige App uns im Browser anzeigen lassen. Wir sehen die App ist nicht auf dem localhost sondern direkt im Internet erreichbar.

Datenbank migrieren

Ein wichtiger Hinweis, solltest du in deinem Projekt zusätzlich mit einer Datenbank gearbeitet haben, beispielsweise bei einem Benutzerlogin oder ähnlichem, dann nicht vergessen die Datenbank zu migiren mit dem Befehl:

heroku run rake db:migrate

In unserem Fall haben wir aber nur statische Seiten und kein Backend mit einer Datenstruktur. Das heißt hier gibt es nichts zu migrieren.

Fehlerbehebung: Assets Ordner

Scheinbar ist beim hochladen unseres Projekts der Assets-Ordner verloren gegangen wo das Bild quasi auch mit beinhaltet. Dieses Problem können wir lösen indem wir in unser Projekt gehen unter config/environments/production der Befehl

config.assets.compile = true

Danach aktualisieren wir wieder unser Git repository

git status
git add .
git commit -m "precompile changed"

Nun laden wir das aktualisierte Git Verzeichnis wieder auf unseren Heroku Server

git push heroku master

Dies dauert wieder einen Augenblick damit alle Dateien aktualisiert sind. Es wird kein neues Projekt erstellt, es wird nur unser vorhandenes Projekt aktualisiert. Nachdem die Installation beendet ist, werden wir wieder über die gleiche Subdomain unser Projekt öffnen und unser Hintergrundbild wird jetzt angezeigt.