Eine eigene Suchmaschine ohne Programmierkenntnisse erstellen

Heute zeigen wir euch, wie ihr ohne jegliche Programmierkenntnisse eure eigene Suchmaschine (so wie Google) erstellt. Diese Anleitung eignet sich hervorragend für "No-code Anfänger" und alle die mehr über Plugins und Bubble.is lernen möchten. Los gehts!

Vorbereitung

Bevor wir beginnen, müsst ihr noch einige Vorbereitungen treffen. Zum einen benötigt ihr einen Account bei dem No-code Builder "Bubble" - https://bubble.is . Zusätzlich braucht ihr noch einen Account bei "Rapid API" - https://rapidapi.com/ . Bubble wird als Baukasten für unsere Anwendung benutzt und bei Rapid API werden wir uns einen API Schlüssel besorgen, der für die Suchmaschine notwendig ist.

Schritt 1 - Einrichtung

Loggt euch bei eurem Bubble Konto ein und geht auf eure "My apps" Seite. Als nächstes klickt ihr auf den Button "New App".

Nun müsst ihr eurer App noch einen Namen geben und auf "Create a new App" klicken.

Ihr werdet nun in den Editor eurer neuen App weitergeleitet. Beim ersten Öffnen wird Bubble eure App mit einer "welcome page" füllen. Um eine frische App zu erhalten. müsst ihr einfach auf den Button "Start with a blank page klicken" (unten links).

Als nächstes müssen wir uns einen API Schlüssel besorgen. Loggt euch dafür in euer Rapid API Konto ein und öffnet anschließend die "Contextual Web Search Api" Seite - https://rapidapi.com/contextualwebsearch/api/web-search

Dort müsst Ihr noch einen der "Pricing Plans" abonnieren. Wir empfehlen den kostenlosen "Basic Plan", der euch bis zu 10,000 Anfragen pro Monat erlaubt. *Achtung: falls ihr über 10,000 Anfragen pro Monat habt, wird euch automatisch der entsprechende Betrag abgebucht.

Sobald ihr die Schritte abgeschlossen habt, müsst ihr nur noch euren "X-RapidAPI-Key" kopieren und zurück in eure Bubble App gehen.

Sobald ihr wieder in eurer Bubble App seid, müsst ihr erstmal auf den Menüpunkt "Plugins" klicken und dann auf "Add plugins" oben rechts. Es öffnet sich ein Fenster mit einer Liste verschiedenster Plugins. Für unsere App benötigen wir das "Web Search" Plugin, das von uns selbst erstellt wurde und komplett kostenlos erhältlich ist. Nachdem ihr unser Plugin erfolgreich installiert habt, müsst ihr nur noch den zuvor kopierten API-Schlüssel in das Feld "X-RapidAPI-Key" unter dem installierten Plugin einfügen:

Schritt 2 - User Interface erstellen

Jetzt können wir mit der eigentlichen Suchmaschine beginnen. Wir werden die Suchmaschine so einfach wie möglich halten, damit auch unerfahrene Bubble.is Nutzer keine Schwierigkeiten bei der Erstellung der Suchmaschine haben.

Als erstes könnt ihr eurer Seite einen Title geben. Geht dafür zurück in den "Design" Bereich eurer App und zieht einfach den "Text" Icon auf der linken Menüleiste in die Mitte eurer leeren Seite und gibt einen Titel wie "Meine Suchmaschine" ein. Im grauen Fenster, in dem ihr den Text geändert habt, könnt ihr auch die Schriftgöße, Schriftart, Farbe etc ändern.

Als nächstes brauchen wir ein "Input" und einen "Button". Ihr findet beide Elemente auf der Linken Menüleiste und könnt sie wie das Textfeld einfach per Drag-and-Drop in die Mitte eurer Seite ziehen. Dem Button könnt ihr noch einen Titel wie "Search" oder "Suchen" geben. Das könnte ungefähr so aussehen:

Als letztes brauchen wir noch eine sogenannte "Repeating Group". Wie der Name schon verrät, besteht eine Repeating Group aus mehreren Identischen Gruppen, die mit Daten gefüllt werden. Die Repeating Group findet ihr, wie in den vorherigen Schritten, wieder auf der linken Menüleiste. Nachdem ihr die Repeating Group auch in die Mitte eurer Seite gezogen habt, öffnet sich wieder das mittlerweile bekannte graue Fenster mit dem Titel "Repeating Group A". Ganz oben könnt ihr den "Type of content" bestimmen, also mit welcher Art von Daten diese Repeating Group gefüllt werden soll. Dort müsst ihr das von unserem Plugin bereitgestellte Feld "Web Search Value" auswählen.

Nun müssen wir nur noch unsere Repeating Group mit den verschiedenen Textfeldern, die später angezeigt werden soll, bestücken. Dafür zieht ihr einfach wieder das Text Icon in die erste Spalte eurer Repeating Group. Klick auf das Textfeld - > Insert Dynamic Data -> Current cells's Web Search value. Nun könnt ihr aussuchen, welche Informationen von eurem Suchergebnis in diesem Textfeld angezeigt werden soll. Im Folgenden eine kleine Übersicht eurer Optionen:

title - Der Titel der gefundenen Website

url - Die Webadresse der gefundenen Website

description - Der Beschreibungstext der gefundenen Website

language - Die Sprache der gefundenen Website

keywords - Die Schlagwörter, die auf diese Website zutreffen

datePublished - Das Veröffentlichungsdatum dieser Website

Ihr könnt beliebig auswählen, welche Felder angezeigt werden sollen. Wir haben uns für das folgende simple Layout entschieden:

Mit diesem Layout wird der Titel, die URL und die Beschreibung der Website angezeigt

Schritt 3 - Suchmaschine erstellen

Wir haben es fast geschafft! Zur Fertigstellung der Suchmaschine, müssen wir nur noch unsere Elemente mit dem Plugin verbinden.

Öffnet nun via Doppelklick auf euren "Suchen" Button das zugehörige (graue) Editor Fenster und startet dann einen Workflow, indem ihr auf den Knopf "Start/Edit Workflow" klickt:

Ihr werdet nun in einen komplett neuen Bereich weitergeleitet, dem sogenannten "Workflow" tab. Dort müsstet ihr auch schon euren ersten Workflow sehen, der mit "When Button Search is clicked" startet. Direkt darunter steht eine Box mit dem Text: Click here to add an action. Durch klicken auf diesen Text könnt ihr eurem Button eine Funktionalität oder Action geben. In unserem Falle wollen wir, dass unsere Suchmaschine nach dem eingegebenem Suchbegriff sucht. Dank unseres Plugins benötigen wir dafür nur einen einzigen Schritt:

Klickt auf "Element Actions" -> Display List in Repeating Group

Nun müsste sich ein weiteres Fenster öffnen, in dem ihr noch die Data Source (Datenquelle) definieren könnt. Dort müsst ihr auf "Get data from external API" und dann "Web Searching" klicken. Nun öffnen sich eine Reihe weiterer Inputs, die spezifisch für unser Plugin sind. Gehen wir alle Felder einzeln durch:

1. Search String - dies ist die Suchanfrage, nach der unsere Suchmaschine suchen soll. Für dieses Feld müsst ihr auf Insert Dynamic Data -> Input A (bzw den Namen, den ihr eurem Input gegeben habt) klicken.

2. Count - dieser Parameter definiert die Anzahl der Suchergebnisse, die wir haben möchten. Wir empfehlen eine Zahl unter 10.

3. Autocorrect - mit diesem Parameter könnt ihr entscheiden, ob die Suchanfrage automatisch via autocorrect korrigiert werden soll (bei Rechtschreibfehlern). Ihr könnt zwischen "True" und "False" wählen.

Die Parameter für unsere Suchanfrage

Die erste Version unserer Suchmaschine ist hiermit fertig und einsatzbereit. Um die fertige Webapp zu testen, müsst ihr einfach auf den "Preview" Button oben rechts im Editor klicken. Gibt eure Suchanfrage in die Textbox ein und klickt auf Suchen!

Wir hoffen, dass wir euch die die Möglichkeiten von no-code Technologien mit diesem Tutorial ein wenig näher bringen konnten. Weitere Templates und/oder Plugins findet ihr unter www.anticode.de/templates und www.anticode.de/plugins .

Falls ihr weitere Fragen habt, könnt ihr uns gerne via email kontaktieren.