Construire un site de recherche de recettes avec Angular et Elasticsearch

Cet article montre la création d'un site Web de recherche de recettes à l'aide d'Angular et d'Elasticsearch. Fatigué de lutter avec Solr ou Lucene? Elasticsearch, un moteur de stockage open-source et basé sur Lucene, propose une solution plus simple depuis 2010. C'est plus qu'un simple moteur de recherche; Il s'agit d'un magasin de documents hiérarchisant la vitesse de recherche. Pour de nombreuses applications, il peut servir de backend entier.

Avantages clés:

• exploite la compatibilité JSON d'Elasticsearch avec OpenRecipes, un ensemble de données JSON JSON facilement disponible.
• utilise l'API RESTful d'Elasticsearch pour une interaction simple avec divers environnements (pilote javascript utilisé ici).
• utilise AngularJS pour l'interface utilisateur, l'intégration de manière transparente avec le backend Elasticsearch pour une récupération et un affichage de données efficaces.
• répond aux problèmes de sécurité du déploiement en mettant en évidence la nécessité d'un proxy pour protéger l'instance Elasticsearch (manquant de contrôles inhérents à l'utilisateur / d'autorisation).

Construire le moteur de recherche de recettes:

Ce tutoriel vous guide en créant un moteur de recherche de recettes similaire à OpenRecipeEsearch.com. OpenRecipes fournit un format JSON pratique, s'alignant parfaitement avec la structure JSON d'Elasticsearch.

1. Configuration: Téléchargez et exécutez Elasticsearch. Son backend reposant intégré simplifie l'interaction. Le pilote JavaScript est utilisé dans cet exemple.
2. Ingestion de données: Obtenez la base de données OpenRecipes (un grand fichier JSON). Un script Node.js fourni (load_recipes.js) charge efficacement ces données dans Elasticsearch. Ce script utilise la bibliothèque JavaScript Elasticsearch (npm install elasticsearch).
3. Vérification: Vérifiez l'importation de données à l'aide de curl (si disponible): curl -XPOST http://localhost:9200/recipes/recipe/_search -d '{"query": {"match": {"_all": "cake"}}}'

Construire l'interface utilisateur de recherche de recettes (avec angulaire):

AngularJS est utilisé pour créer l'interface utilisateur. Le processus implique:

1. Entrée de l'utilisateur: L'utilisateur entre dans une requête de recherche.
2. Elasticsearch Query: La requête est envoyée à Elasticsearch.
3. Retrievale des résultats: Les résultats de recherche sont récupérés.
4. Rendu des résultats: Les résultats sont affichés à l'utilisateur.

Le code HTML fourni met en valeur les directives angulaires utilisées pour créer l'interface de recherche. Les concepts angulaires clés sont expliqués, y compris les directives (ng-app, ng-controller, etc.), les variables de modèle ({{}}) et la liaison des données.

Le code JavaScript comprend:

• Création du module: window.MyOpenRecipes = angular.module('myOpenRecipes', ['elasticsearch'], ...); configure le module angulaire.
• Contrôleur (recipeCtrl): gère l'interaction UI, y compris la recherche et la pagination.
• Service (recipeService): gère la communication avec le backend Elasticsearch. Ce service utilise la bibliothèque JavaScript Elasticsearch et le service $q pour la manipulation des promesses.

Remarques de déploiement:

Pour le déploiement de la production, sécurisez votre instance Elasticsearch. Elasticsearch manque de gestion intégrée des utilisateurs / autorisations; Un proxy (comme nginx) est recommandé pour restreindre l'accès aux seuls points de terminaison nécessaires (par exemple, /recipes/recipe/_search).

Conclusion:

Ce tutoriel fournit un guide pratique pour créer un site Web de recherche de recettes fonctionnel utilisant Angular et Elasticsearch. Le code complet est disponible sur GitHub (lien non fourni dans le texte d'origine). La section FAQ aborde les questions courantes concernant la pagination, l'optimisation des requêtes, la gestion des erreurs, la sécurité, les tests, le déploiement, la recherche en temps réel, les agrégations, la saisie automatique et la surveillance des performances du cluster.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!