Contao-News

In unserer Kategorie „Best Practice mit Contao“ stellen wir heute die Website www.soccerio.de vor.

Projektbeschreibung

“Fußball-Tippspiele gibt es viele. Doch nur die wenigsten beschränken sich auf das Nötigste, und sind leider allzu oft überladen und daher schlecht zu bedienen.” Aus diesem Gedanken heraus entstand Mitte 2014, kurz nach Ende der WM und nach Nutzung eines aus unserer Sicht schlecht zu bedienenden Tippspiels, der erste Gedanke zur Erstellung des kostenlosen Online-Tippspiels Soccerio.

Unsere Aufgaben und Ziele waren:

• Einfach zu bedienendes System, egal ob vorher bereits ein Tippspiel genutzt wurde oder nicht.
• Registrierung ermöglichen von jeder Stelle binnen 10 Sekunden + Führung des Nutzers durch den Registrierungs-Prozess bis nach der ersten Anmeldung und während der gesamten Nutzungsdauer durch Call-To-Actions, einfache Menüführung und Minimalismus.
• Ein Design zu entwickeln, das alle nötigen Infos zum eigenen Konto, dem aktuellen Tippspiel und dem eigenen Stand im Tippspiel in einer klaren, einfachen und strukturierten Oberfläche vereint.
• Automatisierter Abgleich aller Tippspiel-Daten (Spieltage, Spiel-Austragungs-Orte, Ergebnisse, Torschützen, Beschreibungen) durch die freie Datenbank OpenLigaDB
• Automatisierte Berechnung der Punkte, Highscores und Daten aufgrund vorher festgelegter Events (bspw. sobald Ergebnisse aus der OpenLigaDB automatisiert eingetragen wurden).
• Verwendung möglichst weniger klassischer Bild-Ressourcen und Fokus auf modernen Technologien wie SVG, CSS3 und HTML5, um auch Retina- und High Density-Devices zu unterstützen
• Mehrsprachigkeit und Multi-Domain-System
• Ausloten des technisch Möglichen seitens Contao und diverser Webtechnologien

Entstanden ist ein klar strukturiertes, einfach zu verstehendes und suchmaschinenoptimiertes Tippspiel, das mehrsprachig sowohl unter soccerio.de als auch soccerio.com erreichbar ist. Das Projekt demonstriert die Erweiterbarkeit des Contao CMS.

Prinzipien der Gestaltung des Webseitenauftritts sind der moderne, am Flat Design orientierte Stil, ein modularer Aufbau und eine inhaltsbasierte Navigation, die eine spielerische Erschließung der Inhalte ermöglicht. Nutzer und Interessenten sollen gewünschte Informationen und Aktionen möglichst schnell und ohne Umwege finden und auf weiterführende Inhalte direkt zugreifen können (Content-in-Context). Dazu wurden bekannte interaktive Elemente wie Tabs, Slider und Dropout-Elemente kombiniert. Um den Registrierungs- und Login-Prozess so einfach wie möglich zu gestalten, wurde eine eigene Erweiterung für das System entwickelt, mittels derer man sich binnen weniger Sekunden von jeder Seite aus sowohl über Facebook und Google als auch über die klassische E-Mail-/Passwort-Kombi anmelden kann.

Um den Tippern auch die Möglichkeit zu geben, Freunden und Bekannten ihre Tipps mitteilen zu können, wurde zudem während des Tipp-Vorgangs auf eine Facebook-Integration gesetzt. Dazu wurden eigene “Social Graph Stories” auf Facebook’s Plattform erstellt, die mit einem Klick aus dem Tippspiel heraus an die eigene Pinnwand geschickt werden können. Auf diese Weise tritt der Tipper in Interaktion mit seinen Freunden auf Facebook, und kann so optimalerweise weitere Freunde heranholen, gegen die/mit denen er tippen kann.

Um weiters die Nutzer an das System zu binden, wurde ein queue-basiertes E-Mail-System entwickelt, das anhand diverser Metriken E-Mails in Blöcken versendet, die entweder anhand eines Events ausgelöst werden (Hooks), wiederholt oder einmalig laufen. Das E-Mail-System beinhaltet zudem eine integrierte Priorisierung, sodass wichtige E-Mails in der Queue höher eingeordnet werden als unwichtigere E-Mails, und so zeitkritische oder aktuellere E-Mail-Benachrichtigungen schneller an die Tipper rausgehen. Beispielsweise werden über das eigens entwickelte E-Mail-System wöchentliche Tipp-Benachrichtigungen an alle Tipper verschickt, sobald ein neuer Spieltag in einer der Tippspiel-Ligen vorhanden ist. Die Tipper können in ihrem Profil einstellen, welche der E-Mails sie erhalten möchten.

Auch die Unterstützung mobiler Geräte stand von Beginn an auf der Agenda. Neben einem klaren responsive Design, das sich flexibel an die Gerätegröße anpasst und auf Basis vom Framework Bootstrap entstanden ist, wurden auch alle Flaggen-Grafiken der diversen Teilnehmerländer des EM2016-Tippspiels statt mit klassischen Grafiken mittels SVG umgesetzt.

Aufgrund der fehlenden nativen Möglichkeit von Contao, eigene Taxonomien (in diesem Fall die Struktur und Hierarchie der Tippspiele: Tippspiel > Gruppe/Spieltag > Austragungsort > Spiel-Austragung) auf DCA-Basis mehrsprachig zu entwickeln, wurde die Extension DC_Multilingual verwendet und angepasst; diese Anpassungen wurden auch an den Extension-Entwickler auf Github weitergegeben, sodass auch andere DC_Multilingual-Nutzer von den Anpassungen profitieren konnten.

In der jetzigen Fassung dient Soccerio als Grundstein für zukünftige Vorhaben. Die Basis Contao ermöglicht uns die kontinuierliche Erweiterung und Verbesserung des Systems wie z.B. native Mobile-Apps mit Contao-Anbindung und die Portierung auf Contao 4.

Was zeichnet die Zusammenarbeit mit dem Kunden/der Agentur aus?

Als Privatprojekt zweier Entwickler, die aus unterschiedlichen Umfeldern (WordPress, TYPO3, JTL, Contao) kommen und anhand dieses Projekts das technisch Machbare ausloten und anhand dessen lernen wollten, entstand Soccerio. Da einer der Projektteilnehmer bereits seit Jahren im Contao-Umfeld aktiv ist, war er in der Lage, alle gewünschten Funktionen zu integrieren und auftretenden Probleme kurzfristig zu lösen. Da seit Start des Projekts auf Basis von PHP 7 gearbeitet wurde, um möglichst zukunftsicher operieren zu können, kam es im Laufe der Entwicklung oft zu Problemen mit der (zum Projektstart recht jungen) neuen Version von PHP in Kombination mit Contao und diversen Erweiterungen, weshalb der Entwickler die Gelegenheit nutzte, u.a. die Erweiterung DC_Multilingual von unseren Anpassungen profitieren zu lassen, indem wir über das auf GitHub gelagerte Repository diverse Tickets und Patches einreichten, die auch anderen Nutzern helfen sollten. Denn Open Source Software ist ein Geben und Nehmen, und daher selbstverständlich, die Anpassungen auch für die Contao-Community zugänglich zu machen.

Die Konzeption und Realisierung erfolgte in regem Austausch mittels diverser Online-Kollaborations-Tools, was sich aufgrund der dezentralen und verteilten Verortung der Projektteilnehmer als sehr hilfreich und problemlos herausstellte.

Welche Funktionen wurden für diese Website individuell erstellt?

Zahlreiche Komponenten wurden individuell erstellt, um spezifische Anforderungen zu erfüllen, hier daher nur einige ausgewählte Beispiele:

Backend:

• Tippspiel-Verwaltung inkl. Datenhierarchien (Tippspiel > Gruppe/Spieltag > Austragungsort > Spiel-Austragung) und mehrsprachiger Pflege
• E-Mail-Benachrichtigungs-System mit Queuefunktion inkl. Priorisierung wichtiger E-Mail-Benachrichtigungen
• Erstellung eigener Input Widgets / InputTypes, z.B. zur Erfassung der Torschützen in Spielen
• Erweiterung der Member-DCA durch C-Tables, um Tippgemeinschaften erstellen und verwalten zu können

Frontend:

• Tippspiel-Modul
• Social Login-Funktionalität mit Übernahme und Abgleich wichtiger Nutzerdaten wie Avatar (Gravatar), Anzeigename etc. bei jedem Login
• Automatisierter Abgleich aller Tippspiel-Daten (Spieltage, Spiel-Austragungen, Ergebnisse, Tore, Beschreibungen aus Wikipedia-API) durch die freie Datenbank OpenLigaDB über das Contao-Cronjob-System
• Automatisierte Berechnung der Punkte, Highscores und Daten aufgrund vorher festgelegter Events (bspw. sobald Ergebnisse aus der OpenLigaDB automatisiert eingetragen wurden) über das Contao-Cronjob-System

Welche Erweiterungen wurden verwendet?

• owp_tippspiel (Eigenentwicklung)
• css_social_login (Eigenentwicklung)
• dc_multilingual (Teilweise angepasst und durch eigene Extensions erweitert)
• contao-bootstrap
• font-awesome

Welche weiteren Besonderheiten sind erwähnenswert?

Um den reibungslosen Betrieb und die Qualität des Systems zu gewährleisten, wird der Code eigenentwickelter Erweiterungen kontinuierlich durch Code Climate geprüft. Kontinuierliche Unit Tests mit PHPUnit sorgen darüber hinaus für schnelle Erkennung von Fehlern im System, und mittels Tissue werden PHP Exceptions automatisiert als GitHub-Tickets gemeldet und können so schnellstmöglich behoben werden. Als Versionsmanagement dient ein privates Github-Repository, das regelmäßig Änderungen an das Repository übermittelt. Ein Serviceworker-Script kümmert sich im Hintergrund um den Aufbau eines Caches, um die Seitenladezeiten zu beschleunigen und die Web App zu unterstützen, die derzeit auf Google Play verfügbar ist. Ein CDN lässt sich jederzeit hinzuschalten, um auf hohen Besucherandrang entsprechend reagieren zu können. Let’s Encrypt sorgt überdies dafür, dass alle Anfragen über eine gesicherte Verbindung laufen und das Tippspiel entsprechend gesichert ist.

Projektdaten

Eingereicht von: Andreas Petermann
Projekt-Website: www.soccerio.de
Agentur, Design, Realisierung: Andreas Petermann - Konzept, Contao Modul Entwicklung & Integration - http://www.css-umsetzung.de
Oliver Schlöbe - Design, Content Development, SEO - http://www.schloebe.de