Step by step integration

Die Integration der Hulbee DataCloud in eine existierende Webseite mit vorhandener Suchkomponente ist sehr einfach.

Sie generieren über das DataCloud-Portal einen HTML-Code und fügen diesen nur noch in Ihre Webseite ein.

Als Beispiel zeigen wir Ihnen wie die Hulbee DataCloud in Wordpress integriert wird.

• Nehmen wir mal an:

  • Sie verwalten eine Webseite auf der Sie über ein Administrator-Konto verfügen.
  • Ihre Webseite befindet sich auf einem öffentlichen Webserver und ist über eine Webadresse erreichbar.
  • Die Webadresse Ihrer Webseite lautet mypersonalblog.com.

  

  Abbildung 1. Webseite mypersonalblog.com.

• Um den HTM-Code für die Hulbee DataCloud zu bekommen, müssen Sie registrierter Benutzer auf dem Portal datacloud.hulbee.com sein. Ein neues Benutzerkonto legen Sie auf der Registrierungsseite(Abb. 3) an. Von der Startseite aus, gelangen Sie über den Weblink “Registrieren” auf die Registrierungsseite (2, Markierung 1).

  

  1 – Weblink zur Registrierungsseite.
  Abbildung 2. Hulbee DataCloud Startseite.

• Zum Registrieren eines neuen Benutzerkontos füllen Sie bitte alle Pflichtfelder aus (Abbildung. 3, Markierung 1) und klicken anschließend auf die Schaltfläche “Registrieren” (Abbildung. 3, Markierung 2). Unmittelbar hiernach, erhalten Sie eine Bestätigungs-Nachricht an die von Ihnen eingegebene E-Mail-Adresse.

  

  1 – Registrierung; 2 – “Registrieren”-Schaltfläche.
  Abbildung 3. DataCloud-Portal Registrierungsseite.

• Befolgen Sie die Anweisungen in der Bestätigungs-Nachricht, um Ihre E-Mail-Adresse zu verifizieren und die Registrierung abzuschließen. Sollten Sie keine Bestätigungs-Nachricht erhalten, kann es dadran liegen, dass Sie sich bei der Eingabe Ihrer E-Mail-Adresse (3, Markierung 1) vertippt haben. In diesem Fall führen Sie bitte die Registrierung erneuert durch (verwenden Sie diesmal bitte einen anderen Bernutzernamen und Passwort).

• Nach erfolgreicher Registrierung, erhalten Sie uneingeschränkten Zugriff auf den Bereich Meine DataClouds. Hierzu müssen Sie sich nur noch mit Ihren Benutzerdaten auf der Anmeldeseite(5) anmelden. Sie gelangen zur Anmeldeseite über den Weblink “Anmelden” (4, Markierung 1).

  

  1 – Weblink zur Anmeldeseite.
  Abbildung 4. Hulbee DataCloud Startseite.

• Geben Sie Ihren Benutzernamen und Ihr Passwort (5, Markierung 1,2), auf der Anmeldeseite in die hierfür vorgesehenen Eingabefelder ein und klicken Sie auf die Schaltfläche “Anmelden” (5, Markierung 3), um somit zu Ihrem persönlichen Bereich im DataCloud-Portal zu gelangen.

  

  1 – Eingabefeld “Benutzername”; 2 – Eingabefeld “Passwort”; 3 – Schaltfläche “Anmelden”
  Abbildung 5. DataCloud-Portal Anmeldung.

• Über den Link “Meine DataClouds” gelangen Sie zur Übersich Ihrer DataClouds (6, Markierung 1).

  

  1 – Link “Meine DataClouds“; 2 – Schaltfläche “Neue DataCloud“; 3 - “Hulbee Map” DataCloud-Testumgebung.
  Abbildung 6. Meine DataCloud.

• In der Liste “Meine DataClouds” finden Sie eine vordefinierte DataCloud “Hulbee Map”(6, Markierung 3) diese wurde zu Testzwecken für Sie angelegt. Zur Erstellen Ihrer eigenen DataCloud benutzen Sie bitte den DataCloud-Assistenten.

  Mit dem DataCloud-Assisten erstellen Sie für Ihre Webseite eine DataCloud in drei einfachen Schritten:

  • Klicken Sie zunächst auf die Schaltfläche Neue DataCloud (6, Markierung 2), um den DataCloud-Assistenten aufzurufen;
  • Schritt 1
  • Füllen Sie nun alle Pflichtfelder sorgfältig aus (7, Markierung 1). Weitere Informationen zu diesen Pflichtfeldern und vielen weiteren Einstellungen erhalten Sie unter Hulbee DataCloud documentation;
  • Klicken Sie auf die Schaltfläche Weiter (7, Markierung 2);
  • Schritt 2
  • In diesem Schritt können Sie nun das Design Ihrer DataCloud anpassen. Passen Sie nun das Design Ihrer DataCloud nach Ihren Vorstellungen an oder verwenden Sie das Standard-Design und klicken Sie anschließend auf die Schaltfläche Weiter (8, Markierung 1), um mit dem nächsten Schritt vortzufahren;
  • Schritt 3
  • In diesem Schritt können Sie die Inhalte Ihrer DataCloud verwalten. Passen Sie nun den Inhalt Ihrer DataCloud nach Ihren Vorstellungen an oder verwenden Sie die automatisch generierten Standard-Inhalte und klicken Sie anschließend auf die Schaltfläche Beenden (9, Markierung 1).

  

  1 – Pflichtfelder; 2 – Schaltfläche Weiter.
  Abbildung 7. DataCloud-Assistent. Schritt 1.

  

  1 – Schaltfläche Weiter.
  Abbildung 8. DataCloud-Assistent. Schritt 2.

  

  1 – Schaltfläche Beenden.
  Abbildung 9. DataCloud-Assistent. Schritt 3.

• Innerhalb von einigen Sekunden wird die neue DataCloud generiert und Ihrer DataCloud-Liste (10, Markierung 1) hinzugefügt.

  Sie erhalten eine Vorschau Ihrer DataCloud und können diese testen und gegebenenfalls editieren. Die Vorschau Ihrer DataCloud (voll funktionsfähige DataCloud mit Abfrage-String und der Suchergebnis-Komponente, diese sind ausschließlich für Testzwecke enthalten und sind kein Bestandteil der DataCloud) wählen Sie es in den DataCloud-Liste (10, Markierung 1) rufen Sie mit einem Klick auf die Registerkarte Vorschau (10, Markierung 2). Mit der Vorschau sehen Sie vorab wie die DataCloud auf Ihrer Webseite funktionieren wird. Das Design und die Inhalte Ihrer DataCloud editieren Sie unter der Registerkarte Bearbeiten (10, Markierung 3).

  

  1 – MyPersonalBlogCloud DataCloud; 2 – Registerkarte Vorschau; 3 – Registerkarte Bearbeiten; 4 – Registerkarte Code abrufen.
  Abbildung 10. Meine DataCloud-Seite.

• Zum Integrieren der DataCloud in Ihre Webseite, müssen Sie einen DataCloud HTML-Code generieren. Wählen Sie hierzu Ihre bevorzugte DataCloud aus der DataCloud-Liste(10, Markierung 1) aus und klicken Sie anschließend auf die Registerkarte Code abrufen (10, Markierung 4).
• In der Registerkarte Code abrufen (11) füllen Sie das Suchmuster-Feld (11, Markierung 1) sorgfältig aus. Damit die DataCloud ordnungsgemäß mit der Suchkomponente Ihrer Webseite interagiert, ist es wichtig, dass Sie das Suchmuster richtig eintragen. Das Suchmuster ist die URL, welche durch Ihre Webseite erzeugt wird, wenn Sie nach dem Wort "TEST" suchen. Kopieren Sie die erzeugte URL in die Zwischenablage und fügen Sie diese in das vordefinierte Suchmuster-Feld ein.
• Klicken Sie auf die Schaltfläche Code abrufen (11, Markierung 2). Der DataCloud HTML-Code für Ihre Webseite erscheint im Code-Integrationsfeld (11, Markierung 3).
• Kopieren Sie den generierten HTML-CODE (11, Markierung 3) in die Zwischenablage.

  

  1 – Suchmuster-Feld; 2 – Registerkarte Code abrufen; 3 – Code-Integrationsfeld.
  Abbildung 11. Registerkarte HTHL-Code.

• Jetzt müssen Sie den zwischengespeicherten HTML Kode in Ihre Webseite kopieren. Dies geschieht normalerweise durch die Bearbeitung des Formulars oder durch Einfügen des Widget.

  Die Wordpress Blog Engine erlaubt das Hinzufügen neuer Widget. Der vorher genutzte DataCloud HTML Kode sollte als Widget Kode für Wordpress genutzt werden.

  Es ist wichtig, dass das Widget gesichert wird, damit es durch die Benutzer der Seite genutzt werden kann.

  Befolgen Sie bitte folgende Schritte, um den DataCloud HTML-Code ihrer Wordpress-Webseite hinzuzufügen:

  • Betätigen Sie die Schaltfläche Appearance (fig. 12, Markierung 1);
  • Betätigen Sie die Schaltfläche Widgets (fig. 12, Markierung 2);
  • Kopieren Sie Text widget (fig. 12, Markierung 3) von Available Widgets Feld zum Sidebar Feld (fig. 12, Markierung 4);
  • Füllen Sie das Feld Title aus (fig. 12, Markierung 5);
  • Fügen Sie den DataCloud HTML Kode aus der Zwischenanlage in die Widget text box ein(fig. 12, Markierung 6);
  • Betätigen sie die Schaltfläche Save (sichern) (fig. 12, Markierung 7);

  

  1 –Schaltfläche Appearance; 2 – Widgets Schaltfläche; 3 – Text widget; 4 – Sidebar Feld; 5 – Title Feld; 6 – Widget text Feld; 7 – Schaltfläche Save(sichern).
  Abbildung 12. Integration des DataCloud HTML Kode in das CMS als widget.

  

  Abbildung 13. Integrated DataCloud widget.