Rails Girls App Tutorial

Erstellt von Vesa Vänskä, @vesan

Übersetzt von den Rails Girls Hamburg, @railsgirlshh

Installiere Rails mit Hilfe der Installationsanleitung.

Lern Deine Werkzeuge kennen

 

Texteditor

  • Atom, Sublime Text, Vim und Emacs sind Texteditoren. Du kannst sie verwenden, um Code zu schreiben und Dateien zu bearbeiten.

 

Terminal (auch genannt Eingabeaufforderung oder Command Prompt)

  • Hier startest Du den Railsserver und führst Befehle aus.

 

Webbrowser

  • Firefox, Safari und Chrome sind Webbrowser, mit denen Du Deine Anwendung ansehen kannst.

Wichtig

Befolge jeweils die Anleitungen für Dein Betriebssystem. Die Befehle für Windows unterscheiden sich von denen für Mac oder Linux. Solltest Du Probleme haben, überprüfe den Betriebssystemumschalter unterhalb der Befehle. Falls Du einen Cloudservice wie z.B. Codenvy verwendest, so solltest Du die Linuxbefehle verwenden, auch wenn Du einen Windowscomputer benutzt.

1. Eine neue Anwendung erzeugen

Wir erzeugen nun eine neue Railsanwendung namens railsgirls.

Dazu öffnen wir das Terminal:

Gib jetzt folgende Befehle in das Terminal ein:

mkdir projects

Du kannst nachprüfen, dass ein Verzeichnis namens projects angelegt wurde, indem Du den Befehl ls aufrufst. In der Ausgabe solltest Du das Verzeichnis projects sehen. Wechsel jetzt in das Verzeichnis projects, indem Du folgendes aufrufst:

cd projects

Um nachzuprüfen, dass Du Dich in einem leeren Verzeichnis befindest, kannst Du erneut ls aufrufen. Jetzt kannst Du eine neue Railsanwendung names railsgirls erzeugen, indem Du folgenden Befehl ausführst:

rails new railsgirls

Dadurch wird eine neue Anwendung im Verzeichnis railsgirls angelegt. Wechsel nun in dieses Verzeichnis:

cd railsgirls

Wenn Du nun in diesem Verzeichnis ls aufrufst, siehst Du Verzeichnisse wie app und config. Du kannst den Railsserver wie folgt starten: 

bundle exec rails server
mkdir projects

Du kannst nachprüfen, dass ein Ordner namens projects angelegt wurde, indem Du den Befehl dir aufrufst. In der Ausgabe solltest Du den Ordner projects sehen. Wechsel jetzt in den Ordner projects, indem Du folgendes aufrufst:

cd projects

Um nachzuprüfen, dass Du Dich in einem leeren Verzeichnis befindest, kannst Du erneut dir aufrufen. Jetzt kannst Du eine neue Railsanwendung names railsgirls erzeugen, indem Du folgenden Befehl ausführst:

rails new railsgirls

Dadurch wird eine neue Anwendung im Ordner railsgirls angelegt. Wechsel nun in diesen Ordner:

cd railsgirls

Wenn Du nun in diesem Ordner dir aufrufst, siehst Du Ordner wie app und config. Du kannst den Railsserver wie folgt starten:

rails server

Öffne nun http://localhost:3000 in Deinem Browser. Wenn Du einen Cloudservice benutzt (z.B. Codenvy), verwende stattdessen die URL aus der Installationsanleitung.

Wenn die Erzeugung Deiner neuen Anwendung korrekt funktioniert hat, siehst du nun eine “Welcome aboard” Seite.

Beachte, dass in diesem Fenster keine Eingabeaufforderung zu sehen ist. Da Du Dich im Railsserver befindest, sieht das Ganze so aus:

$
>

Wenn die Eingabeaufforderung nicht zu sehen ist, kannst Du keine Befehle ausführen. Befehle wie cd werden nicht funktionieren. Du kannst aber zur Eingabeaufforderung zurückkehren:

Gib Strg+C im Terminal ein, um den Railsserver zu beenden.

Coach: Erläutere die einzelnen Befehle. Was wurde erzeugt? Was macht der Server?

2.Idea Scaffold erzeugen

Wie benutzen die Scaffold-Funktion von Rails, um einen ersten Baustein für unsere Anwendung zu erstellen. Dadurch bekommen wir eine Ausgangsbasis, die uns das Auflisten, Hinzufügen, Entfernen, Bearbeiten und Betrachten von Dingen gestattet - in userem Fall, von Ideen (ideas).

Coach: Was ist Rails Scaffolding? (Erläutere den Befehl, den Namen des Models und der entsprechenden Datenbanktabelle, Namenskonventionen, Attribute und Typen, usw.) Was sind Migrationen, und wofür brauchen wir sie?

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

Der Scaffold erzeugt neue Dateien in Deinem Projektverzeichnis, aber damit alles korrekt funktioniert, ist die Ausführung weiterer Befehle erforderlich - um die Datenbank zu aktualisieren und den Railsserver neu zu starten.

bundle exec rake db:migrate
bundle exec rails server

Öffne http://localhost:3000/ideas in Deinem Browser. Wenn Du einen Cloudservice (z.B. Codenvy) verwendest, hänge stattdessen ‘/ideas’ an die Vorschau-URL an (siehe Installationsanleitung).

Klick ein wenig herum, um Deine Anwendung zu testen.

3.Design

Coach: Erläutere das Verhältnis zwischen HTML und Rails. Welche Teile eines Views sind HTML, und welche sind Embedded Ruby (ERB)? Was ist MVC, und was hat das miteinander zu tun? (Models und Controllers sind dafür zuständig, die HTML Ansichten zu erzeugen.)

Die Anwendung sieht noch nicht sehr gut aus. Das können wir ändern! Wir benutzen das Twitter Bootstrap Projekt, um auf einfache Weise eine besseres Aussehen hinzubekommen.

Öffne app/views/layouts/application.html.erb in Deinem Texteditor, und oberhalb von

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

füge

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.css">

hinzu und ersetze

<%= yield %>

durch

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

Wir können dem Layout jetzt einen Navigationsbereich und eine Fußzeile hinzufügen. In derselben Datei, füge unterhalb von <body> folgendes ein:

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">The Idea app</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="/ideas">Ideas</a></li>
      </ul>
    </div>
  </div>
</nav>

Vor </body> solltest Du folgendes ergänzen:

<footer>
  <div class="container">
    Rails Girls 2016
  </div>
</footer>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.js"></script>

Jetzt können wir auch das Aussehen der Ideentabelle ändern. Öffne app/assets/stylesheets/application.css und füge folgendes am Ende hinzu:

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

Speichere die Dateien und lade die Seite im Browser neu, um Deine Änderungen zu sehen. Du kannst auch weitere Veränderungen an HTML & CSS vornehmen.

Falls in Deinem Terminal eine Fehlermeldung erscheint, die etwas mit JavaScript oder CoffeeScript zu tun hat, installiere nodejs. Das Problem sollte nicht auftreten, wenn Du den RailsInstaller verwendet hast (sondern wenn Du Rails via gem install rails installiert hast).

Coach: Sprich ein wenig über CSS und Layouts.

4.Bilder hochladen

Wir benötigen weitere Software, um das Hochladen von Dateien in Rails zu ermöglichen.

Öffne die Datei Gemfile aus Deinem Projektverzeichnis im Texteditor. Unterhalb der Zeile

gem 'sqlite3'

ergänze

gem 'carrierwave'

Coach: Erläutere, was Bibliotheken sind und warum sie nützlich sind. Erkläre was Open Source Software ist.

Gib nun Strg+C im Terminal ein, um den Server anzuhalten.

Führe folgenden Befehl im Terminal aus:

bundle

Jetzt können wir den Code zum Hochladen von Dateien erzeugen. Führe folgendes im Terminal aus:

bundle exec rails generate uploader Picture

Bitte starte nun den Railsserver.

Achtung: Manche Leute verwenden ein zweites Terminal, und den Railsserver dauerhaft laufen zu lassen. In diesem Fall solltest Du nun den Railsserver beenden und neu starten. Dies ist notwendig, damit die Anwendung die neu hinzugefügte Bibliothek lädt.

Öffne app/models/idea.rb und unterhalb der Zeile

class Idea < ApplicationRecord

ergänze

mount_uploader :picture, PictureUploader

Öffne app/views/ideas/_form.html.erb und ändere

<%= f.text_field :picture %>

in

<%= f.file_field :picture %>

Unter Umständen bekommst Du eine Fehlermeldung wie TypeError: can’t cast ActionDispatch::Http::UploadedFile to string.

In dem Fall solltest Du in der Datei app/views/ideas/_form.html.erb die Zeile

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

in

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

ändern.

Im Browser kannst du nun eine neue Idee mit Bild anlegen. Wenn Du ein Bild hochlädst, siehst Du aber nur den Pfad zur Bilddatei.

Um dies zu ändern, öffne app/views/ideas/show.html.erb und ändere

<%= @idea.picture %>

in

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

Aktualisiere die Ansicht im Browser, um die Änderungen zu sehen.

Coach: Erzähl etwas über HTML.

5.Routen anpassen

Öffne http://localhost:3000 (oder die Vorschau-URL, falls Du einen Cloudservice verwendest). Du siehst immer noch die “Welcome aboard” Seite. Stattdessen veranlassen wir nun eine Weiterleitung zur Ideenseite.

Öffne config/routes.rb und füge nach der ersten Zeile folgendes ein:

root to: redirect('/ideas')

Teste die Änderungen, in dem Du http://localhost:3000/ bzw. Deine Vorschau-URL im Browser öffnest.

Coach: Sprich über Routen, ihre Reihenfolge und die Beziehung zu statischen Dateien.

Create static page in your app

Lass uns eine statische Seite anlegen, die Informationen über die Verfasserin der Anwendung bereitstellt - also über Dich!

bundle exec rails generate controller pages info

Dieser Befehl legt ein neues Verzeichnis unterhalb von app/views an. In dem neuen Verzeichnis namens /pages wird eine neue Datei info.html.erb angelegt, aus der nun Deine Infoseite wird.

Der Befehl erzeugt auch eine simple Route in Deiner routes.rb:

get "pages/info"

Du kannst nun app/views/pages/info.html.erb im Texteditor öffnen und Informationen über Dich in HTML hinzufügen. Um die neue Infoseite zu sehen, öffne im Brower http://localhost:3000/pages/info oder hänge ‘/pages/info’ an Deine Vorschau-URL an, falls Du einen Cloudservice verwendest.

6+.Was nun?

Weitere Anleitungen (auf Englisch)