Benutzerfreundliche Autovervollständigungsfunktion für Suchmaschinen

Für das Minor „Web-Lab“ sollten wir in diesem Semester selbstständig eine Webseiten-Komponente untersuchen, nachbilden und wenn möglich verbessern. Beim Suchen nach einer geeigneten Komponente fiel mir auf, dass jede grössere Suchmaschine über eine eigene Autovervollständigung verfügt. Aus diesem Grund entschied ich mich dazu, diese unter die Lupe zu nehmen und selbst einen Versuch zu wagen, eine zu programmieren. Das Resultat sollte eine Suchmaschine mit Autovervollständigung sein, welche den Bedürfnissen der User angepasst ist und wenn möglich brauchbare Resultate erzielt.

Wer kennt es nicht: Man lernt für eine Prüfung, recherchiert das Thema für eine Reportage oder sucht für einen Vortrag immer denselben Begriff. Die Suchmaschine hingegen merkt sich diesen nicht und gibt somit die meist gesuchten Begriffe aller User aus oder streikt komplett. Offensichtlich gibt es keine allgemein gültige Lösung, die allen Usern passt, wodurch ich die Möglichkeit habe, meinen eigenen Lösungsansatz in die Runde zu werfen und aus den Reaktionen zu lernen.

Meine Suchmaschine „SEFER“ (search engine for exclusive results) zeigt die vergangenen Suchbegriffe in chronologischer Reihenfolge an. Weiter kann man sich auf der Seite registrieren und somit eine persönliche Liste der zuletzt gesuchten Begriffe erhalten. Meldet man sich an, so werden einem vor den allgemeinen Suchanfragen die eigenen Anfragen gezeigt. Diese sind gekennzeichnet mit dem Namen des Users.

Die Suche selbst habe ich auf Google ausgelagert, wodurch man beim Abschicken der Suchanfragen direkt auf die Trefferseite der grösste Suchmaschine gelangt.

Der gesamte Code ist auf GitHub zu finden und kann von allen eingesehen, kopiert und verbessert werden. Hier gelangst du zu „SEFER“ und kannst dir selbst ein Bild machen, von der ersten MMP-Suchmaschine.

(twb)

Kritik
von Pablo Bäni

Umsetzung

Als Erstes machte ich mir Gedanken darüber, was mir am wichtigsten ist, bei der Vervollständigung meiner Suchbegriffe. Da ich für das Studium oft längere Zeit ein Thema recherchiere und immer wieder dieselben Begriffe suche, entschied ich mich für eine chronologische Darstellung der bereits getätigten Suchen. Weiter war mir wichtig, dass mir meine eigenen Suchanfragen als Erstes angezeigt werden. Deshalb entschied ich mich dazu, meine Suchanfragen und die der anderen User getrennt in einem Dropdown, anzeigen zu lassen. Weiter sprach ich mit Freunden und meiner Familie über ihre Ansprüche an eine Autovervollständigungsfunktion und fragte, wie ihnen mein geplanter Lösungsansatz gefiel. Viele teilten meine Ansichten. Sie bestärkten mich in meiner Entscheidung genauso weiterzumachen.

Obwohl mir schon zu Beginn des Projektes klar war, dass ich mich für ein sehr schlichtes Design entscheiden würde, machte ich mir dazu nur wenige Gedanken. Ich zeichnete ein Paar Wireframes und setzte das Projekt sehr abstrakt mit Adobe XD um.

Als es schliesslich an das Schreiben des Codes ging, tat ich mich sehr schwer damit. Ich versuchte aus früheren IM-Projekten Teile zu kopieren und diese zu einem Grundgerüst zusammenzufügen. Dies gelang mir zwar teilweise, jedoch fehlte mir die nötige Übung und Routine um das Ganze sinnvoll zu verbinden und umzusetzen. Da ich nicht mehr weiter kam, bat ich Wolfgang Bock um Hilfe. Gemeinsam bildeten wir ein neues Grundgerüst. Dank seinem Input konnte ich selbstständig am Projekt weiterarbeiten.

So funktioniert die Seite: In einem <input> Feld werden die Suchanfragen eingegeben und nach dem übermitteln der Suche in eine Datenbank eingetragen. Um diese später den verschiedenen Usern zuordnen zu können, richtete ich ein Register- und Login-Formular ein. Die ID dieser Accounts wird zusammen mit dem Suchbegriff in die Datenbank übergeben.

Die Suchbegriffe selbst werden durch eine <datalist> ausgegeben, welche mit Hilfe einer php-Funktion die nötigen Parameter aus der Datenbank abfragt. Sind die User nicht angemeldet, so bekommen sie eine chronologische Ausgabe der aller vergangenen Suchanfragen. Sind die User angemeldet, so bekommen sie zuerst eine Chronologische Liste der eigenen Suchbegriffe und erst anschliessend die Liste der allgemeinen Suchbegriffe.

In get_suche.php verlinkte ich Google um die Suchbegriffe in den Link der Seite zu geben. So wird der jeweilige Suchbegriff einfach in den Link einer Google-Suchanfrage eingefügt und die User landen direkt auf der Seite mit den Resultaten von Google.

Zum Schluss verknüpfte ich ein style.css, um das Ganze zu layouten. Ich entschied mich alles möglichst schlicht zu halten und lediglich auf die Usability einzugehen. Weiter schaute ich, dass die Seite sowohl auf dem Desktop, als auch auf dem Smartphone gut bedienbar ist.

Schwierigkeiten

Schon zu Beginn hatte ich Schwierigkeiten das ganze Projekt ins Rollen zu bringen. Mir fehlten sowohl das Wissen als auch die Routine, um zu wissen, wo ich beginnen sollte und mit welchen Mitteln ich das Ganze umsetzen kann. Weiter schienen mir zu Beginn schon die kleinsten Hürden unüberwindbar. Zum Glück lernte ich mit jedem gelösten Problem so viel dazu, sodass das nächste einfacher zu lösen war.

Weiter bemerkte ich erst sehr spät, dass <datalist> nicht von allen Browsern unterstützt wird. Somit musste ich Workarounds finden, um die Suchmaschine für alle Browser zu optimieren. Funktionierte die Suchmaschine zwischenzeitlich auf allen Browsern, so steht sie momentan nur in Safari (Desktop und Mobile) und Google Chrome (Desktop und Mobile) mit der Autovervollständigung zur Verfügung.

Leider fehlte mir am Schluss die Zeit weiter an dem Projekt zu arbeiten, weshalb der momentane Stand fürs Erste auch der Endstand ist.

Fazit

Im Grossen und Ganzen bin ich zufrieden mit meinem Projekt. Obwohl es natürlich noch stark verbesserungsfähig ist, funktioniert es auf mehreren Browsern vollständig und auf anderen leider nur zum Teil. Ich habe während der Arbeit an meinem Projekt viel gelernt und fühle mich sicherer im Umgang mit Code und den verschiedenen Befehlen, Funktionen und Tags. Vielleicht werde ich im nächsten Semester weiter an diesem Projekt arbeiten, das Ganze verbessern, fertigstellen und es sogar ausbauen.

Keine Kommentare

Schreibe einen Kommentar