angular search experience

Expérience de recherche angulaire

Alimenté par

Clause de non-responsabilité

Cette application de référence utilise la bibliothèque de recherche Algolia de bas niveau. Si vous créez une application similaire, veuillez utiliser la bibliothèque officielle Angular InstaSearch.

Mise en place du projet

Clonage des fichiers sources

Afin de télécharger (cloner) ce projet sur votre machine, vous devez avoir installé git . En savoir plus sur la façon d'installer Git sur votre système.

Une fois installé, ouvrez un shell de terminal et clonez ce référentiel à l'aide de la commande suivante :

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

Installer les dépendances

Vous aurez besoin npm install pour installer les dépendances de ce projet. Ensuite, à l'aide de votre terminal, vous devrez changer de répertoire pour accéder au dossier dans lequel vous avez précédemment cloné ce projet ; par défaut (si vous avez copié la ligne de commande ci-dessus), ce serait angular-search-experience :

 > cd angular-search-experience
> npm install

Serveur de développement

Nous avons décidé de sécuriser la Fonction Cloud (c'est une bonne pratique). Ainsi, afin de demander l'API search , vous devrez ajouter un en-tête Authorization à vos demandes. Voici l' Authorization: SearchToken this-is-a-fake-token . Voir un exemple de commande cURL ci-dessous.

Avant de démarrer le serveur, vous devrez ajouter quelques variables d'environnement dans un fichier .env, dans le dossier /functions . Vous pouvez utiliser ce fichier de modèle env comme exemple (le renommer en .env, qui est gitignoré) et définir :

• algolia_applicationid= YOUR_ALGOLIA_APPLICATION_ID
• algolia_apikey= YOUR_ALGOLIA_API_KEY

Vous pouvez trouver votre identifiant d'application et votre clé API sur https://www.algolia.com/apps dans la section Clés API. Vous devez créer un compte pour obtenir votre clé API.

Option 1 (recommandée) : Express

Afin de tester le serveur sur votre ordinateur local, exécutez la commande suivante : npm run start:backend

Option 2 (avancée) :le backend (fonction cloud)

Cette option nécessite que vous soyez connecté à votre compte Firebase et que vous ayez accès à ce projet (sur Firebase). Seuls les gardiens ont accès au projet Firebase !

Une autre version du backend s'appuie sur une architecture sans serveur implémentée à l'aide de Cloud Functions pour Firebase.

Ce projet est livré avec firebase-tools en tant que dépendance locale. Cet outil est un ensemble d'outils Firebase Command Line Interface (CLI) qui peuvent générer, exécuter et déployer un projet Firebase. Veuillez noter que cette dépendance est généralement installée globalement.

De plus, le runtime Firebase utilise une ancienne version de Node.js : v6.11.5 . Nous avons inclus un dossier .nvmrc sous /functions . Ce fichier spécial est un fichier de configuration utilisé par NVM pour passer facilement à une version requise de Node.js dans un dossier spécifique. Si NVM n'est pas déjà installé, veuillez lire le guide d'installation.

Utilisez NVM pour installer la version requise de Node.js, puis utilisez-la (uniquement dans le dossier /functions ) :

 > nvm install 6.11.5
> nvm use

Maintenant que vous utilisez Node.js v6.11.5 , vous êtes prêt à exécuter (c'est-à-dire à émuler) la fonction Cloud search localement. Pour cela, exécutez npm run start:backend:firebase . Cette commande fera deux choses :

1. Accédez au répertoire /functions (trouvé à la racine du projet). Ce dossier contient tout le code backend.
2. Servez la fonction Cloud search localement sur http://localhost:5000/angular-search-experience/us-central1/search

Important : Veuillez noter que la fonction search implémente uniquement les méthodes HTTP POST et DELETE , vous permettant d'ajouter et de supprimer une entité, vous aurez donc besoin d'un client HTTP, tel que cURL ou Postman , pour pouvoir demander la Fonction Cloud.

l'application frontale

À la racine du projet, exécutez npm start pour démarrer le serveur de développement frontal. Accédez à http://localhost:4200/ . L'application se rechargera automatiquement si vous modifiez l'un des fichiers source.

L'application frontale a été générée avec Angular CLI version 6.1.2.

Construire

Exécutez npm run build pour créer le projet. Les artefacts de build seront stockés dans le répertoire dist/angular-search-experience/ . Utilisez le script npm run build:prod pour une version de production.

Déployer

Nous utilisons l'hébergement Firebase pour publier l'application front-end. Avant de déployer une nouvelle version, nous devons créer un package de production à l'aide de la commande suivante :

 > npm run build

Ensuite, nous pouvons déployer la nouvelle build sur Firebase :

 > npm run deploy

IMPORTANT : le déploiement sur Firebase nécessite un privilège d'accès (au projet Firebase).

Environnements de production

Back-end

Les points de terminaison de production (fonction cloud) sont disponibles sur :

1. POST : /api/1/apps
2. SUPPRIMER : /api/1/apps/:id

Afin de demander la fonction Cloud de production, vous pouvez utiliser ces commandes cURL :

Ajout d'une nouvelle entrée à l'index d'Algolia

 > 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"}

REMARQUE : nous ne validons pas volontairement l'objet application .

Supprimer une entrée de l'index d'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"}

L'extrémité avant

Architecture et fonctionnalités disponibles (UI)

Architecture des composants

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

En savoir plus sur la documentation de l'API ici : https://manekinekko.github.io/angular-search-experience/index.html

Caractéristiques

Zone de recherche

Résultats de recherche avec surlignages

Options de tri

Options de facettes

Chargement paresseux

Liens profonds

ZONE DE DANGER : ŒUF DE PÂQUES EN AVANT !

Oeuf de Pâques à l'intérieur !!

Nous avons inclus un chatbot dans cette application. Il peut vous aider à rechercher des applications en utilisant votre voix. Demandez-lui simplement de vous aider à rechercher une application météo ou à trouver un jeu .

Pour activer le bot, vous devrez allumer votre microphone et vos haut-parleurs. Ensuite, il suffit de cliquer 6 fois sur le logo de l'application (l'en-tête).

REMARQUE : l'implémentation de ce bot est expérimentale (et pour le plaisir !) et n'a pas été entraînée sur un grand nombre d'énoncés d'utilisateurs !

Problèmes connus

Module incompatible trouvé

erreur [email protected] : Le "nœud" du moteur est incompatible avec ce module. Version attendue "~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.

Solution de contournement :

• Exécutez nvm use 8.0 dans le dossier /functions .
• Exécutez npm install .
• Exécutez cd .. puis npm run start:backend .