Projekt-Vorstellung: WhatsMyDevice.org
-
Hi,
Worum geht's?
bei uns in der Abteilung kommt es schon mal vor, dass unsere Frontender zu einem Bug-Ticket fragen: "Welchen Browser benutzt die Kundin? Welches Gerät und Betriebssystem?" und es ist daraufhin für unseren Kunden-Service mehr als peinlich den, bereits frustrierten, Kunden zu kontaktieren. Dazu muss man sagen das der Großteil unserer Kundschaft nicht sehr technisch versiert ist und man auf die Frage, "Was für einen Browser benutzen Sie?", häufig die Antwort kommt: "Windows". Bei Tablets und Smartphones kommen ähnliche unpräzise Aussagen.Dies hilft natürlich nicht unseren Entwicklern, nicht dem Kundendienst und der Zufriedenheit des Kunden. Auch ist es unzumutbar dem Kunden zum jeweiligen Menüpunkt zu führen, wo Browser-Informationen stehen oder Informationen zum Betriebssystem. Das kostet Zeit, Nerven und Kundenzufriedenheit (vor allem da man noch nicht weiß, was das System ist und wo der Menüpunkt liegt).
Im Internet habe ich diverse "Was ist meine IP"- oder "Was ist mein Browser"-Infoseiten gefunden, die jedoch viele (für unsere Frontender) relevante Informationen nicht anzeigen, u. A. auch das Gerät oder benutzte Spracheinstellungen. So ist die Idee zu (www.whatsmydevice.org) geboren worden.
So muss unser Kundendienst bei Frontend- oder Backend-Bugs den Kunden nur auf diese Seite führen, auf "Speichern & Teilen" klicken lassen und per E-Mail den Share-Link zugesendet bekommen. Die Seite ermittelt alle wichtigen Informationen über das Gerät des Kunden und unsere Entwickler können so Bugs besser nachstellen (Besonders bei WebGL-Erweiterungen war dies schon sehr hilfreich).
Die Ermittlung der Daten erfolgt teilweise Server-Seitig und Client-Seitig per JavaScript.
Online ist die Seite seit gut 3 Wochen und wird dank unserer Kunden auch rege benutzt, daher möchte ich sie gerne auch euch vorstellen und vorallem weitere Meinungen hören, als nur diese von Freunden und Kollegen.
Technisches
Aktuell beinhaltet die Seite folgende Features:
- Share-Buttons für Facebook, Twitter und E-Mail
- Share-Buttons für WhatsApp (bei Mobile)
- OpenGraph für FaceBook und co, sowie Twitter-Cards
- Responsive
- Ermittlung von Herstellern
- Ermittlung von Geräten (Tablets, Smartphones, TVs, usw. nur Desktops/Notebooks machen Probleme, da die Ermittlung hierbei echt heftig ist)
- Ermittlung vom System (inkl. Fonts)
- Ermittlung von Bildschirm, Grafikkarte, Retina-Displays, usw.
- Ermittlugn von unterstützten Features des Browsers
- Privacy-Einstellungen des Browsers
- uvm.Umgesetzt wurde die Seite innerhalb von 1 Woche mit meinem, auf dem SOLID-Prinzipien fokussierten, PHP-Framework "nia" ( https://www.github.com/nia-php/ ) und SQLite3. (www.whatsmydevice.org) läuft auf einem CentOS 7 mit Apache, sowie PHP 7.1 und benutzt die TLS-Zertifikate von Let's Encrypt.
Daten werden erst gespeichert nachdem der Endbenutzer dies möchte und auch nur für 365 Tage.
Ausblick
Aktuell durchforste ich die MDN nach weiteren Möglichkeiten um Daten via JavaScript zu ermitteln um das Gerät noch genauer zu identifizieren (z. B. Seriennummer). Auch ist eine API geplant, damit Firmen die Seite in ihre integrieren können und dem Kundendienst schneller helfen können ohne Umwege.Abschluss
Was haltet ihr von meinem Projekt und was würdet ihr an Verbesserungen sehen wollen?Vielen Dank für jede Form von konstruktivem Feedback und ich wünsche euch viel Spaß mit der Seite
- codejunkie
-
Gute Idee, macht das Leben in einer Agentur bzw. als Freelancer leichter...
Ich denke an der Ladezeit wirst Du nicht viel ändern können, da die Daten erstmal ermittelt werden müssen.Vorschlag:
Wenn in einer Section keine Daten ermittelt werden können, blende den Container einfach aus. Vielleicht noch einen Umschalter für die Sprache einbauen, damit man die Ausgabe auch an einen Bastler aus Indien senden kann...
-
kleiner Typo:
Browser Privatsphäre-Einstellungen:
Dein Browser unterstützt zu guter Letzt auch diverse Privatsphäre-Einstellungen, die wir ermitteln konnten und hier dir hier auflisten.
