TippTop.net Ð Beitrag zur W-JAX Challenge mit JRuby on Rails Autor: Michael Johann Location: www.tipptop.net (Kurz vor der W-JAX online) Steckbrief 1. Welche Architektur- und Designentscheidungen wurde getroffen und warum? Die Anwendung basiert auf JRuby in Zusammenspiel mit dem MVC-Framework Ruby on Rails. JRuby ist 100 % kompatibel mit Ruby on Rails und kann somit Rails-Anwendungen ohne €nderungen auf einer JVM laufen lassen. Als bekennender Rails-Switcher sind die folgenden Merkmale von Rails in Bezug auf die Webanwendung ausschlaggebend: - MVC basiert - Convention over Configuration - DonÕt repeat yourself (Deutlich bei der View-Entwicklung zu sehen, Stichwort Partials) - Ruby als produktivitŠtssteigernde dynamische Programmiersprache - Mongrel als HTTP-Server (ClusterfŠhig) - JRuby als native threaded Ablaufumgebung mit der Mšglichkeit bei Bedarf jede beliebige Java-Klasse zu integrieren und zur Laufzeit dynamisch zu erweitern. - Plugin-Architektur (Benutzerverwaltung, Rollen, Statemachine) Die folgende Tabelle kann mit jeder Railsanwendung generiert werden und verdeutlicht, dass der reine Anwendungscode (ohne Views) kaum mehr als 800 Zeilen umfasst. Damit ist klar, dass ein einzelner Entwickler in nur rund 6 Personentagen die vorliegende Anwendung programmieren, testen und designen kann: +----------------------+-------+-------+---------+---------+-----+-------+ | Name | Lines | LOC | Classes | Methods | M/C | LOC/M | +----------------------+-------+-------+---------+---------+-----+-------+ | Controllers | 496 | 405 | 14 | 59 | 4 | 4 | | Helpers | 101 | 91 | 0 | 10 | 0 | 7 | | Models | 419 | 332 | 16 | 39 | 2 | 6 | | Libraries | 0 | 0 | 0 | 0 | 0 | 0 | | Integration tests | 0 | 0 | 0 | 0 | 0 | 0 | | Functional tests | 32 | 24 | 4 | 0 | 0 | 0 | | Unit tests | 56 | 42 | 9 | 0 | 0 | 0 | | Model specs | 133 | 117 | 0 | 0 | 0 | 0 | | View specs | 229 | 180 | 0 | 0 | 0 | 0 | | Controller specs | 295 | 228 | 0 | 1 | 0 | 226 | | Helper specs | 99 | 63 | 0 | 0 | 0 | 0 | | Routing specs | 63 | 49 | 0 | 0 | 0 | 0 | | Integration specs | 4 | 3 | 0 | 0 | 0 | 0 | +----------------------+-------+-------+---------+---------+-----+-------+ | Total | 1927 | 1534 | 43 | 109 | 2 | 12 | +----------------------+-------+-------+---------+---------+-----+-------+ Code LOC: 828 Test LOC: 706 Code to Test Ratio: 1:0.9 2. Welche Framework-Auswahl wurde getroffen? Ruby on Rails ist das Framework der Wahl (siehe Punkt 1). 3. Schnellanleitung fŸr die Installation (inkl. notwendiger Zusatzkomponenten) Die Anwendung kommt komplett daher. Das beiliegende Ant-Skript startet unter einem Unix-System mit vorhandener JVM direkt mit folgendem Aufruf: $ ant Die Datenbank (Derby) ist bereits vorhanden und kann bei Bedarf auch neu generiert werden. Hierzu wird folgender Ant-Aufruf benštigt: $ ant setup Mehr ist nicht notwendig. Da die Datenbank praktisch embedded lŠuft ist noch zu beachten, dass nur eine Connection zur VerfŸgung steht, so dass die Anwendung vor der Nutzung eines Datenbankadmintools beendet werden muss. Es sind keine weiteren Zusatzkomponenten zu installieren. 4. Wo liegen die Logfiles? Die Logfiles liegen unter /tipptop/logs. Konkret startet die Anwendung im development mode, was fŸr eine Beurteilung všllig ok ist. Im Log ist nach der Registriereung von neuen Benutzern auch der Aktivierungscode fŸr den Account zu sehen, der dann von der Jury kopiert und in die URL eingefŸgt werden muss, weil die Anwendung nicht nach drau§en ãfunktÒ (d.h. es werden keine echten Emails versandt). 5. Kurze Anleitung zur Anwendung selbst (gern auch im Punkt 3 integriert) Nach Start der Anwendung ist diese unter der URL http://localhost:3000 verfŸgbar. Basis ist HTML, CSS und JavaScript mit teilweiser AJAX-FunktionalitŠt (Spielersuche). Die folgende Abbildung zeigt den Startbildschirm: Im MenŸ kšnnen die Punkte Home, Spielplan, Gruppen, Hall of Fame und Konto angewŠhlt werden. Diese Punkte werden im Folgenden nŠher erklŠrt. - Home Hiermit kann typischerweise auf die Startseite verzweigt werden. Eine besondere FunktionalitŠt ist hier nicht vorhanden - Spielplan Der Spielplan ist zweigeteilt in die †bersicht der Vorrundenspiele (Gruppenspiele) und in die Finalrunden. Laut Spezifikation wurden nur die Gruppenspiele gefordert. Die Finalrunden werden soweit bekannt in der Datei db/seeds.rb in der Datenbank definiert. Hier kann der Programmcode entsprechend um den Abgleich fŸr die Finalrunden erweitert werden. Zentraler Ansgriffspunkt ist hier die Klasse Refresher (Datei app/models/refresher.rb). Im Refresher werden bisher auch die Abgleiche fŸr die Hall of Fame sowie die Gruppenplatzierungen vorgenommen. Im Spielplan kann man sofort tippen, sobald man sich angemeldet und ein Spielerprofil angelegt hat. Entsprechende Icons fŸr die unterschiedlichen Aktionen helfen bei der Aktionswahl. Ist ein Tipp fŸr ein Spiel vorgenommen worden, wird dieser neben dem Spiel angezeigt. Eine €nderung des Tipps kann bis 30 Minuten vor Spielbeginn vorgenommen werden. Ist eine €nderung oder die Eingabe eines Tipps nicht mehr mšglich, wird dies durch ein Stoppschild signalisiert. In der Administratorrolle kann ein Spiel vom Administrator gesteuert werden. Hierzu ist es mšglich, ein Spiel zu starten und im Verlauf die Zischenergebnisse einzupflegen. Auf Wunsch des Administrators ist ein Abgleich des Systems mšglich, wobei Ergebnisse erst nach vorheriger Beendigung eines Spiels in die Wertung einflie§en. - Gruppen In der Gruppenansicht sind die Gruppen A bis H aufgelistet. Ist man als Administrator angemeldet, erscheint ein Stift als Hinweis auf die Bearbeitungsfunktion. Der Administrator kann die Mannschaft sowie die Flagge fŸr eine Mannschaft festlegen. - Hall of Fame In dieser Ansicht sind die 10 besten Tippspieler aufgelistet. Diese Liste wird allerdings erst sichtbar, wenn sich ein Benutzer angemeldet hat. Hierzu ist es nicht nštig, ein Spielerprofil anzulegen. Die Links der bestplatzierten fŸhren direkt zu den Tipps, die nur angezeigt werden, wenn ein Spiel angepfiffen oder beendet wurde. Die Suchfunktion ist mit Hilfe von jQuery (jRails-Plugin) und AJAX-Autocomplete implementiert. Gibt man also einen Buchstaben in das Suchfeld ein, wird im Hintergrund die Datenbank abgefragt und VorschlŠge fŸr die Spielernamen angezeigt. Der Benutzer kann dann einen Eintrag auswŠhlen und dann auf die Seite des Benutzers verzweigen. - Konto Hier kann ein Benutzer je nach Status ein Spielerprofil anlegen oder bearbeiten. Ein weiterer Link fŸhrt zur eigenen Liste der abgegebenen Tipps. Der Administrator findet unter diesem MenŸpunkt zwei Links fŸr die Anpassung von Systemparametern und den Start eines Abgleichs. Rechts nebem dem Hauptbildschirm sind zwei weitere Sidebar-Bereiche vorhanden. Unter dem Twitter-Account tipptopdotnet habe ich entsprechend einige Tweets erstellt, die wŠhrend der Nutzung angezeigt werden. Darunter ist eine Auflistung der drei aktuellsten Nachrichten (http://localhost:3000/news) implementiert (ZusatzfunktionalitŠt). Im Bereich der Fu§zeile sind einige Links zu den Spielbedingungen und das Impressum zu finden. 6. Schritt-fŸr-Schritt-Anleitung fŸr einen typischen Use-Case (ãMeine Anwendung in 10 MinutenÒ) Im Folgenden werden zwei Use-Cases beschrieben. Zum Einen ist es ein Use-Case fŸr den Tippspieler und zum Anderen fŸr den Administrator. Tippspieler - Registrierung Auf der Startseite findet man einen Link zur Registrierung. Daraufhin wird das Registrierungsformular gezeigt. Hier mŸssen alle Felder ausgefŸllt werden. Eine Validierung prŸft Formate und vorhande Nicknames. - Aktivierung Nach dem Abschicken des Formulars wird im Logfile /log/development.log ein Aktivierungslink ausgegeben, der im Produktionsbetrieb per Email versandt wird. Dieser Link muss im Browser eingegeben werden, damit das Nutzerkonto aktiviert wird. [exec] Sent mail to malagant1969@googlemail.com [exec] [exec] Date: Wed, 28 Oct 2009 21:10:52 +0100 [exec] From: =?utf-8?Q?Wettb=9Fro_TippTop?= <noreply@tipptop.net> [exec] To: malagant1969@googlemail.com [exec] Subject: Bitte aktivieren Sie Ihr Konto bei TippTop [exec] Mime-Version: 1.0 [exec] Content-Type: text/plain; charset=utf-8 [exec] [exec] Hi, [exec] [exec] please confirm your registration: [exec] http://tipptop.net/confirmation/Pp1kcQYE4J8_tPkPUmb3 [exec] [exec] Thanks! Nach erfolgter Aktivierung kann sich der Benutzer anmelden. Alternativ existieren drei vorgefertige Konten: mjohann@rails-experts.com (Passwort: topsecret) Rolle: Gamer spacken@spacken.eu (Passwort: topsecret) Rolle: Gamer bla@bla.com (Passwort: topsecret) Rolle: Guest Die Accounts werden in der Datei db/seeds.rb angelegt und sind direkt nach dem Aufsetzen der Datenbank verfŸgbar. - Spielerprofil anlegen Vor dem Spielen muss noch ein Spielerprofil erstellt werden. Hierzu klickt der Benutzer auf den MenŸpunkt ãKontoÒ und dann auf ãSpielerdetails anlegenÒ. Danach ist ein Spielerprofil fŸr den angemeldeten Benutzer definiert worden und es kšnnen Tipps abgegeben werden. - Tipp abgeben Mit einem Klick auf den MenŸpunkt ãSpielplanÒ kann der Spieler nun seine Tipps abgeben. Beispiel: Erstes Spiel. Mit einem Klick auf das Lampensymbol wird ein Formular zur Abgabe eines Tipps anzeigt. Nach Eingabe der Tore wird der Tipp im System hinterlegt. - Tipp Šndern Ein Tipp kann bis 30 Minuten vor Spielbeginn geŠndert werden. Hierzu ist ein Klick auf den Stift notwendig. Soll ein Tipp zurŸckgezogen werden, muss das rote X angeklickt werden. Jeder Benutzer interessiert sich fŸr die Tipps der anderen Spieler. Hierzu dient die Hall of Fame, die im Use-Case des Administrators gezeigt wird. Administrator - Anmeldung als Admin Der einzige Administrator im System ist admin@tipptop.net (Passwort: topsecret). Wenn man sich mit diesen Angaben anmeldet erhŠlt man Adminrechter fŸr die Anwendung. Der Administrator kann selbst nicht tippen. Mit einem Klick auf den Stift wird folgendes Formular angezeigt. - Spiel starten Damit der Use-Case fortlaufen kann, muss der Administrator nun das Spiel starten. Danach wird automatisch in den Spielplan verzweigt und angezeigt, dass das Spiel gestartet wurde. - Spiel beenden Wenn das Spiel gelaufen ist, kann der Administrator das Spiel beenden. Hierzu muss er wieder in die Bearbeitung des Spiels wechseln und den folgenden Link anklicken. - Ergebniss erfassen Das Ergebniss eines Spiels wird im Dialog eingegeben. Mit einem Klick auf ãSpeichernÒ wird das Ergebnis festgelegt. - Abgleich starten Auf der Seite ãKontoÒ des Administrators kann mit einem Klick auf ãAbgleich startenÒ eine Neuberechnung der Gruppenstatistik und der ãHall of FameÒ ausgelšst werden. - Hall of Fame anzeigen Nach einem Abgleich kann mit einem Klick auf den MenŸpunkt ãHall of FameÒ in die Spielerstatistik gewechselt werden. - GruppenŸbersicht anzeigen Mit einem Klick auf den MenŸpunkt ãGruppenÒ kann die Gruppensicht aufgerufen werden. 7. Kurze Angaben zur Testbarkeit und Erweiterbarkeit Es sind rund 700 Zeilen Testcode nach Behavior Driven Development mit rSpec generiert worden. Diese finden sich in den Unterverzeichnissen zu /spec. Aus ZeitgrŸnden sind keine spezialisierten Tests erstellt worden. Die Anwendung ist wie jede Ruby on Rails Anwendung strukturiert und kann entsprechend leicht erweitert werden. In der Datei /config/database.yml kann mit ein paar Zeilen eine komplett andere Datenbank genutzt werden (z.B. MySQL). Durch Erweiterung der Controller-Responses ist leicht eine WebService-API zu realisieren (jeweils mit ein paar Zeilen Code). 8. Wo lohnt es sich, besonders hinzusehen? - Layout Das Layout ist in /app/views/layouts/application.html.erb definiert und stellt das Grundlayout fŸr alle Views bereit. UnterstŸtzt wird das Layout von CSS und jQuery. - Partials Partials sind wie Portlets und kšnnen zur redundanzfreien Entwicklung der OberflŠchen genutzt werden. Partials, wie die Login-Info, der Twitter-Bereich und das MenŸ finden sich in /app/views/shared und verdeutlichen den Gebrauch. - Statemachine Ein Plugin (AASM = Acts_as_state_machine) sorgt fŸr dynamische Methoden, die nur zur Laufzeit existieren und Transitionen bereitsstellen, um den Status von Objekten wie den Usern oder der Spiele nachzufŸhren. So kann ein User beispielsweise vom initialen Status ãpendingÒ zu ãconfirmedÒ wechseln. Der passende Code kann in /app/models/user.rb untersucht werden. - Seeding Die InitialbefŸllung der Datenbank erfolgt mit Hilfe des Ruby-Skripts in der Datei /db/seeds.rb. Das komplette Schema ist in /db/schema.rb zu finden. Damit sind SQL-spezifische Statements ausgeschlossen und die Datenbank kann beliebig ausgetauscht werden. - Autocomplete bei Suchfunktion Im Dialog fŸr die Suche in der ãHall of FameÒ wurde ein jQuery-Autocomplete eingebaut, um den Gebrauch von AJAX zu demonstrieren. Sicher hŠtte die Anwendung bei mehr Zeit an vielen Stellen Ajaxifiziert werden kšnnen. Der Code hierzu findet sich in den Dateien: /public/javascripts/application.js /app/controller/hall_of_fame.rb (Dort findet sich im respond_to-Block eine einzige Zeile, die auf das JavaScript-Format abzielt.) Diese sorgt dafŸr, dass anstelle einer HTML-View ein JavaScript-Template an den Client geschickt wird. /app/views/hall_of_fame/index.js.erb Ein paar CSS-Styles sorgen fŸr die Dropdown-Liste im Suchfeld. - Refresher fŸr den Systemabgleich Der Refresher wird Ÿber einen Link ausgelšst. Die Klasse Refresher findet sich in der Datei /app/models/refresher.rb Der Refresher fŸhrt die Auswertung der Tipps und der Gruppenlisten durch. 9. Warum sollte eure Anwendung gewinnen? Das ist relativ einfach. Die Challenge soll sicher auch den Teilnehmern der Konferenz zeigen, dass die genutzte Technik fŸr alltagstaugliche Projekte eingesetzt werden kann. Und da zŠhlen ProduktivitŠt, Lines of Code, Strukturierung, InteroperabilitŠt. Dazu kann ich folgende Fakten beisteuern: - Eine Person hat rund 6 Personentage benštigt, um die Anwendung zu erstellen. Dabei ist jeder Rails-Kenner in der Lage, die Anwendung zu warten und zu erweitern, ohne die sonst Ÿbliche Packagestruktur typischer Java-Anwendungen auskunschaften zu mŸssen. Das erhšht die ProduktivitŠt enorm. - Ruby Code ist sehr gut lesbar im Vergleich zu anderen Sprachen (Groovy, Scala und Java) - Die Plugin-Architektur erlaubt redundanzfreien Code und eine schnelle Realisierung von Querschnittsfunktionen (Benutzer-Rollen-Konzept, Paginierung). - JRuby als Ablaufumgebung bietet die InteroperabilitŠt typischer Java-Anwendungen. - Der Anwendungscode umfasst lediglich 828 Zeilen Code. Viele GrŸ§e und vielen Dank fŸr Eure Arbeit Michael Johann