Normalerweise schreibe ich Artikel über Informatikthemen in Englisch, doch das Projekt abipage richtet sich nur an deutschsprachige Nutzer, weswegen, ich ihn auf Deutsch schreibe.

Das abipage Projekt ist bislang mein größtes Projekt, es besteht aus rund 8000 Zeilen PHP Code, 1000 Zeilen Javascript, diversen Bibliotheken und viel Arbeit. Nun, da ich langsam anderen Dingen zu wende (mein Blog zeugt) davon, schließe ich dieses Projekt ab und lasse in diesem Artikel die Entwicklung etwas Revue passieren.

Geschichte

Ich hatte das Glück letztes Jahr in einer Stufe mein Abitur zu machen, in der es mehrere talentierte Programmierer und Webdesigner gab, weswegen wir auch seit etwa September 2011 eine Website für unsere Abizeitung hatten, auf der wir Beiträge sammelten, Kommentare zu anderen Schülern abgaben und Umfragen stellten (und beantworteten), welche dann die Abizeitung füllen sollten. Die Website funktionierte gut und die Kunde darüber drang schnell auch zu den unteren Stufen. Und so ergab es sich dann, das nach Ende meiner Schulzeit im Juni letzten Jahres, die Stufe, welche gerade ihr Abitur macht, auch eine solche Website haben wollte.

Das einzige Problem war: In dieser Stufe gab es keine fähigen Programmierer, die eine solche Website programmieren konnten. Der einzige, der dafür bekannt war, sich im Bereich der Informatik auszukennen war Julian Quast. Julian Quast ist seines Zeichens stufenbekannter Mathe- und Infonerd, d.h. er hat Informatik als Leistungskurs und beschäftigt sich in seiner Freizeit mit Beweisen aus dem Bereich der Analysis, und zufälligerweise auch mein Freund. Und so bekam ich dann über ihn den Wunsch vieler Schüler seiner Stufe mit. Zusammen fingen an, über die Umsetzung nach zudenken. Zuerst wollten wir einfach die Website meiner Stufe weiterverwenden, weswegen ich auch den Hauptentwickler dieser anschrieb. Doch er meinte, das der Code nicht wirklich schön sei, er die Website im wesentlichen schnell hingehackt habe und er an einer eigenen kommerziellen Variante arbeite. Und auch im großen, weiten Internet gab es keine OpenSoruce Software, die geeignet war. Also blieb uns (Julian und mir) nichts weiteres übrig, als selbst eine solche Website zu programmieren. Da ich zu diesem Zeitpunkt keine Schule mehr und vor mir eine lange freie Zeit vor Beginn meines Studiums hatte, kam mir ein solches Projekt gerade recht. Und so war dann also ein neues Projekt entstanden, abipage genannt.

Der Anspruch, den wir am Anfang hatten, war folgender: Wir wollten eine Website programmieren, die

• einfach selbst aufzusetzen ist, also keine großen Anforderungen an Server und Nutzer steht
• unter einer freien Lizenz steht (die einzige Bedingung ist, das ich ein Exemplar der Abizeitung bekomme, mit Hilfe der Website erstellt wurde)
• es Schülern einfach macht, Zitate, Bilder und Gerüchte zu sammeln (und bewerten), andere Schüler zu kommentieren, Umfragen zu beantworten und Steckbriefe auszufüllen
• dem Abizeitungsausschuss der jeweiligen Stufe viel Arbeit abnimmt
• und noch viele Dinge mehr, die aber in Vergessenheit geraten sind, weil sie aus verschiedenen Gründen nicht verwirklicht wurden

Das Projekt war Anfangs auf zwei bis drei Monate Arbeit angelegt und bildete das erste Projekt, für Julian wie auch mich, das für eine größere Nutzerzahl geschrieben wurde. Zuvor habe ich zwar schon eine Website für den örtlichen Freibadförderverein programmiert, die jedoch im wesentlichen aus ruby Shell Skripten zur Erzeugung von statischem HTML bestand.

Aus den Erfahrungen, die wir in früheren Projekten gemacht hatten und Evaluierung verschiedener Ideen kristallierte sich nach wenigen Tagen folgendes heraus:

• Die Website sollte auf der vorhandenen Website von Julian liegen, welche bei 1und1 im Shared Hostig Tarif gehostet ist, damit waren nun die verwendete Programmiersprache, PHP, wie auch die verwendete Datenbank, MySQL, klar, da Julian’s Tarif nichts anderes erlaubte.
• Ich hatte keine Lust auf lange Einarbeitungszeiten in Frameworks wie drupal oder Symphony und mir gefiel die Einfachheit des Toro Routers, den wir deswegen als Grundlage der Website machten.
• Beim Design entschieden wir uns für Twitter Bootstrap CSS Framework, da es ein schön minimalistisches Design hat, responsive ist  (d.h. es sich an verschiedene Bildschirmgrößen anpasst) und den Prozess des Designens mit vielen vordefinierten Komponenten einfach macht. Aus Gründen der Einfachheit, sollte das Design der Dokumenation dieses Frameworks die Grundlage des gesammten Designs desweiteren.
• Per Definition verwenden die zukünftigen Benutzer der Website nur neue Versionen der Browser Firefox, Chrome oder Safari (oder Opera Mini auf Mobiltelefonen). Somit können die neuesten HTML5 und CCS3 Features vwendet werden.

Auf Basis dieser Überlegungen begannen wir (im wesentlichen Ich) mit der eigentlichen Entwicklung. Wir begannen zuerst die Datenbank zu designen, die Projektsturktur getreu dem MVC Pattern aufzubauen eine erste Demo Seiten zu designen und die benötigten Dateien und Klassen zu schreiben, die dann im Laufe der Zeit mit Leben (d.h. Code) gefüllt werden sollten.

Am 14. Juli war es dann so weit: Ich stellte die erste Version des Projektes auf github und mit Julian auch auf seine Website. Diese Version war im großen und ganzen schon verwendbar. Es war schon möglich sich zu registrieren, Beiträge zu schreiben, Bilder hochzuladen, Beiträge zu bewerten und Kommentare zu Schülern zu schreiben und die Benutzer zu verwalten. Und so ließen wir sie auf Julians Stufe los – die sie seit diesem Zeitpunkt rege nutzt (dazu später mehr). Die weitere Entwicklung fand damit quasi am offenen Herzen statt, da jede Neuerung direkt auf die Website geschoben wurde, was dazu führte, das sie öfters mal unereichbar war oder Nutzer komische Fehlermeldungen zu Gesicht bekamen.

Die Entwicklung ging ab dann auch in der (kleinen) Öffentlichkeit voran, die github Commit Seite zeugt davon. Anfang August stieß dann zufällig Patrick Haar zu uns. Er ist befreundet mit Julian (und mir) und half mit gelegentlichen Fehlerkorrekturen und dem Betrieb der Website (dazu später mehr). Ab Oktober bis Anfang Februar widmete ich meinem beginnenden Studium, weswegen die Entwicklung des Projekts etwas stockte. Im Februar hatte ich in den Semesterferien Zeit und entwickelte die dringend benötigten Umfragen, wie auch die Möglichkeit Steckbriefe zu erstellen. Aus Zeitgründen, konnte ich bei beidem jedoch keine schöne Admin-UI programmieren, was aber auf einer Seite im abipage wiki auf github erklärt wird.

Verwendete Werkzeuge und Bibliotheken

Die Website an sich verwendet diverse Bibliotheken, die ich im folgenden mit einer kurzen Begründung aufliste:

• Twitter Bootstrap als CSS Framework, siehe oben.
• HTML5 Boilerplate: Aus guten Gründen fast schon ein Standard, da es eine sinnvolle .htaccess Datei, eine demo Indexseite mit Warnung für alte IE-Browser und ein sinnvolles Standardverzeichnislayout mitbringt.
• ToroPHP, siehe oben
• PHP Markdown: Unter anderem ie Texte in der Einstellungenseite können mit Markdown formatiert werden, was das Schreiben einfacher macht.
• jQuery mit folgenden Plugins:
  • list.js: ein cooles Tabellensortiertplugin, das unter anderem eine Näherungssuche mitbringt
  • Chocolat: schönes Photodiaschau-Plugin
  • handlebars.js (mit swag helpers): einfaches Templatingskript
  • Und Color picker, jQuery.bottom

Bei der Entwicklung selber habe ich als IDE Netbeans verwendet und als Browser Chrome und Firefox mit Firebug Plugin. Per watchr Skript wurden außerdem die less Dateien kompiliert und die CSS und Javascript Dateien zusammengefasst und komprimiert (via node.js mit den Plugins lesscss, uglifyjs und cssmin).

Fazit

Das Projekt wird zur Zeit von zwei Stufen verwendet (lgoe2013.julianquast.de und uqudy.serpens.uberspace.de/abipage), Julians Stufe erstellt zur Zeit auf Basis der gesammelten Daten ihre Abizeitung. Im Laufe eines 3/4 Jahres wurde die erste Website fast täglich von rund 160 Schülern genutzt, es wurden auf ihr …

• 48 Bilder hochgeladen
• 279 Zitate (meistens von Lehrern) und 343 Gerüchte geschrieben
• Bilder, Zitate und Gerüchte im Schnitt jeweils von 20 verschiedenen Schülern bewertet
• 140 Umfragenfragen  von jeweils etwa 70 Leuten beantwortet
• etwa 60% der Schüler meinen, das Julian der größte Mathenerd seiner Stufe ist und genauso viele, das er mal den Nobelpreis bekommt
• 2272 Kommentare bei 170 angemeldete Schüler (quasi die ganze Stufe) geschrieben, das sind im Schnitt etwa 13
• von fast allen Schülern auf 9 Steckbrieffragen geantwortet.

Und laut Piwik

• nutzten 29% der Schüler die Seite mit Firefox, 29% mit Chrome, 33% mit Safari, 1% mit Opera und nur 9 Prozent mit dem Internet Explorer als Browser (also war meine anfängliche Annahme gar nicht so falsch)
• die Hälfte nutzte beim Zugriff auf die Seite Windows 7, 13% nutzten Android, 12% Mac OS, 8% Windows Vista und so gut wie niemand Linux
• 77% der Seitenbesuche fanden mit Desktop-PCs und Laptops statt, 23% mit Mobilgeräten
• nur bei etwa 50% der Seitenaufrufe war Java aktiviert

Den meisten Schülern gefällt (einer Umfrage zu folge) die Website und alle würden sie an die nächte Stufe weiterempfehlen. (Da die zweite Stufe erst seit wenigen Monaten eine Abiseite hat und noch nicht wirklich benutzt – das Abi ist bei ihnen erst in einem Jahr – sind deren Daten nicht wirklich aussagekräftig und werden deswegen hier nicht angegeben)

Die Arbeit an dem Projekt hat mir viel Spaß gemacht und ich habe viele Erfahrungen im Bereich Webentwicklung dabei gesammelt. Einige Dinge dich beim nächsten mal, wenn ich wieder ein größeres Projekt in diesem Bereich habe, besser machen:

• Nicht PHP und MySQL aus äußeren Zwängen heraus verwenden, sondern die Sprache und Datenbank verwenden, die am besten zum Projekt passt, da es Webspace auf dem Ruby, Python oder node.js läuft für wenige Euro zum Beispiel bei uberspace gibt und man sich in der Sprache wohlfühlen sollte, in der man programmiert.
• Auf ein richtiges Framework aufbauen: Es kostet zwar Zeit in der Einarbeitung, doch am Ende hat man wahrscheinlich weniger Probleme, wie wenn man den Großteil von Grund auf programmiert.
• Bessere Zeitplanung: Das Projekt war zu einem guten Teil einfach ins blaue hinein geplant, weil mir die Erfahrung gefehlt hat.
• Unit und Black box Tests schreiben, damit das Projekt einfach testbar bleibt, auch wenn es eine gewisse Größe bekommen hat.

Danke

Ich war und bin der Hauptentwickler dieses Projekts, aber es gibt mehrere Leute, ohne die dieses Projekt niemals zu stande gekomme wäre oder die viel bei der Entwicklung und dem Betrieb mithalfen. Bei diesen Leuten möchte ich mich hiermit im speziellen bedanken.

Julian Quast

Wie schon geschrieben, gab er die Idee zu dem Projekt und entwickelt es mit mir und Patrick Haar. Außerdem stellt er den Webspace zu Verfügung auf dem die erste Instanz der Website läuft.

Website

Patrick Haar

Patrick steuert viele kleine Fehlerbehebungen zu und ist quasi der Hauptadmin der Website seiner Stufe und jener der darauffolgenden.

Website

Herr Stemmermann

Irgendwie fühle ich mich verpflichtet auch ihm Dank zu zollen – ohne seinen Informatik-4-stündig-Kurs in der Oberstufe hätte ich wahrscheinlich nie Julian Quast kennengelernt und 12ten Klasse PHP (und in folgedessen die Grundlagen der Weentwicklung gelernt). Und wer weiß ob ich ohne ihn jetzt Informatik im 2. Semester studieren würde.

Oder wie es in der humans.txt, welche dem Projekt beiliegt, geschrieben steht:

[Thanks] for being the reason why I began to learn php and for bearing me the last two years in the computer science course.

Website