angular search experience

Angular Search-Erfahrung

Angetrieben von

Haftungsausschluss

Diese Referenzanwendung verwendet die Low-Level-Suchbibliothek Algolia. Wenn Sie eine ähnliche Anwendung erstellen, verwenden Sie bitte die offizielle Angular InstaSearch-Bibliothek.

Einrichten des Projekts

Klonen der Quelldateien

Um dieses Projekt auf Ihren Computer herunterzuladen (zu klonen), muss git installiert sein. Lesen Sie mehr darüber, wie Sie Git auf Ihrem System installieren.

Öffnen Sie nach der Installation eine Terminal-Shell und klonen Sie dieses Repository mit dem folgenden Befehl:

 > git clone https://github.com/manekinekko/angular-search-experience.git

Installieren der Abhängigkeiten

Sie benötigen npm install um die Abhängigkeiten dieses Projekts zu installieren. Als Nächstes müssen Sie über Ihr Terminal das Verzeichnis in den Ordner ändern, in dem Sie dieses Projekt zuvor geklont haben. Standardmäßig (wenn Sie die Befehlszeile von oben kopiert haben) wäre dies angular-search-experience :

 > cd angular-search-experience
> npm install

Entwicklungsserver

Wir haben uns entschieden, die Cloud-Funktion zu sichern (dies ist eine bewährte Vorgehensweise). Um also die search -API anzufordern, müssen Sie Ihren Anfragen einen Authorization anhängen. Hier ist der erforderliche Header Authorization: SearchToken this-is-a-fake-token . Unten finden Sie ein Beispiel für den cURL-Befehl.

Bevor Sie den Server starten, müssen Sie einige Umgebungsvariablen in einer .env-Datei im Ordner /functions hinzufügen. Sie können diese env-Vorlagendatei als Beispiel verwenden (benennen Sie sie in .env um, was von Git ignoriert wird) und legen Sie Folgendes fest:

• algolia_applicationid= YOUR_ALGOLIA_APPLICATION_ID
• algolia_apikey= YOUR_ALGOLIA_API_KEY

Sie finden Ihre Anwendungs-ID und Ihren API-Schlüssel unter https://www.algolia.com/apps im Abschnitt „API-Schlüssel“. Sie müssen ein Konto erstellen, um Ihren API-Schlüssel zu erhalten.

Option 1 (empfohlen): Express

Um den Server auf Ihrem lokalen Rechner auszuprobieren, führen Sie den folgenden Befehl aus: npm run start:backend

Option 2 (erweitert): das Backend (Cloud-Funktion)

Für diese Option müssen Sie bei Ihrem Firebase-Konto angemeldet sein und Zugriff auf dieses Projekt (auf Firebase) haben. Nur Hausmeister haben Zugriff auf das Firebase-Projekt!

Eine andere Version des Backends basiert auf einer serverlosen Architektur, die mithilfe von Cloud Functions für Firebase implementiert wird.

Dieses Projekt enthält firebase-tools als lokale Abhängigkeit. Bei diesem Tool handelt es sich um eine Reihe von Firebase Command Line Interface (CLI)-Tools, mit denen ein Firebase-Projekt generiert, ausgeführt und bereitgestellt werden kann. Bitte beachten Sie, dass diese Abhängigkeit normalerweise global installiert wird.

Außerdem verwendet die Firebase-Laufzeit eine ältere Version von Node.js: v6.11.5 . Wir haben einen .nvmrc Ordner unter /functions eingefügt. Bei dieser speziellen Datei handelt es sich um eine Konfigurationsdatei, die von NVM verwendet wird, um einfach zu einer erforderlichen Version von Node.js in einem bestimmten Ordner zu wechseln. Wenn Sie NVM noch nicht installiert haben, lesen Sie bitte die Installationsanleitung.

Verwenden Sie NVM , um die erforderliche Node.js-Version zu installieren und verwenden Sie sie dann (nur im Ordner /functions ):

 > nvm install 6.11.5
> nvm use

Da Sie nun Node.js v6.11.5 verwenden, können Sie die search Cloud-Funktion lokal ausführen (d. h. emulieren). Führen Sie dazu npm run start:backend:firebase . Dieser Befehl führt zwei Dinge aus:

1. Wechseln Sie in das Verzeichnis /functions (im Stammverzeichnis des Projekts). Dieser Ordner enthält den gesamten Backend-Code.
2. Stellen Sie die search Cloud-Funktion lokal unter http://localhost:5000/angular-search-experience/us-central1/search bereit

Wichtig: Bitte beachten Sie, dass die search nur die HTTP-Methoden POST und DELETE implementiert, sodass Sie eine Entität hinzufügen und löschen können. Sie benötigen daher einen HTTP-Client wie cURL oder Postman , um die Cloud-Funktion anfordern zu können.

die Frontend-Anwendung

Führen Sie im Stammverzeichnis des Projekts npm start aus, um den Front-End-Entwicklungsserver zu starten. Navigieren Sie zu http://localhost:4200/ . Die App wird automatisch neu geladen, wenn Sie eine der Quelldateien ändern.

Die Frontend-Anwendung wurde mit Angular CLI Version 6.1.2 generiert.

Bauen

Führen Sie npm run build aus, um das Projekt zu erstellen. Die Build-Artefakte werden im Verzeichnis dist/angular-search-experience/ gespeichert. Verwenden Sie das Skript npm run build:prod für einen Produktions-Build.

Einsetzen

Wir verwenden Firebase-Hosting, um die Front-End-Anwendung zu veröffentlichen. Bevor wir eine neue Version bereitstellen, müssen wir mit dem folgenden Befehl ein Produktionspaket erstellen:

 > npm run build

Dann können wir den neuen Build in Firebase bereitstellen:

 > npm run deploy

WICHTIG: Für die Bereitstellung auf Firebase sind Zugriffsrechte (auf das Firebase-Projekt) erforderlich.

Produktionsumgebungen

Backend

Die Produktionsendpunkte (Cloud-Funktion) sind verfügbar auf:

1. POST: /api/1/apps
2. LÖSCHEN: /api/1/apps/:id

Um die Produktions-Cloud-Funktion anzufordern, können Sie diese cURL-Befehle verwenden:

Hinzufügen eines neuen Eintrags zum Algolia-Index

 > curl -H "Authorization: SearchToken this-is-a-fake-token" -H "Content-Type: application/json" -X POST -d '{}' https://example.com/api/1/apps

{"createdAt":"2018-04-19T13:17:10.343Z","taskID":29343382,"objectID":"10788302"}

HINWEIS: Wir validieren das application nicht absichtlich.

Löschen eines Eintrags aus dem Index von Algolia

 > curl -H "Authorization: SearchToken this-is-a-fake-token" -X DELETE https://example.com/api/1/apps/10788302

{"deletedAt":"2018-04-19T13:30:42.190Z","taskID":29353102,"objectID":"10788302"}

Frontend

Architektur und verfügbare Funktionen (UI)

Komponentenarchitektur

1. Komponente: <app-search></app-search>
2. Komponente: <app-search-input></app-search-input>
3. Komponente: <app-category></app-category>
4. Komponente: <app-search-result></app-search-result>
5. Komponente: <mat-nav-list></mat-nav-list>
6. Richtlinie: [appRating]
7. Pipe: freePriceLabel

Lesen Sie hier mehr über die API-Dokumentation: https://manekinekko.github.io/angular-search-experience/index.html

Merkmale

Suchfeld

Suchergebnisse mit Highlights

Sortieroptionen

Facettenoptionen

Faules Laden

Deeplinks

GEFAHRENBEREICH: OSTEREI VORAUS!

Osterei drin!!

Wir haben dieser Anwendung einen Chatbot hinzugefügt. Es kann Ihnen helfen, mit Ihrer Stimme nach Anwendungen zu suchen. Bitten Sie es einfach um Hilfe bei der Suche nach einer Wetter-App oder bei der Suche nach einem Spiel .

Um den Bot zu aktivieren, müssen Sie Ihr Mikrofon und Ihre Lautsprecher einschalten. Klicken Sie einfach sechsmal auf das Anwendungslogo (die Kopfzeile).

HINWEIS: Die Implementierung dieses Bots ist experimentell (und zum Spaß!) und wurde nicht anhand einer großen Anzahl von Benutzeräußerungen trainiert!

Bekannte Probleme

Inkompatibles Modul gefunden

Fehler [email protected]: Der Engine-„Knoten“ ist mit diesem Modul nicht kompatibel. Erwartete Version „~8.0“.

 yarn install v1.5.1
[1/4] ?  Resolving packages...
[2/4] ?  Fetching packages...
error [email protected]: The engine "node" is incompatible with this module. Expected version "~8.0".
error An unexpected error occurred: "Found incompatible module".
info If you think this is a bug, please open a bug report with the information provided in "/Users/vvo/Dev/Algolia/angular-search-experience/functions/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.

Problemumgehung:

• Führen Sie nvm use 8.0 im Ordner /functions aus.
• Führen Sie npm install .
• Führen Sie cd .. npm run start:backend .