Mise en place d’un moteur de recherche avec Algolia, Play Scala et Nuxt.js

Le SaaS (Software As a Service) ou le logiciel en tant que service, a profondément changé la manière dont les logiciels sont distribués et la structure des coûts des entreprises ayant recours à des services informatiques dans leurs activités. Elles gagnent en compétitivité en faisant confiance au SaaS.

Qu’est-ce qu’un logiciel en SaaS ?

D’une façon très simple, un SaaS est un modèle de distribution de logiciels au sein duquel un fournisseur tiers héberge des applications et les rend disponibles pour ses clients par l’intermédiaire d’Internet. Cela offre de nombreux avantages comme par exemple :

  • l’accessibilité du service depuis n’importe quel appareil connecté
  • une meilleure gestion des coûts pour les clients puisqu’ils paient à l’usage et
  • une meilleure prise en compte des fluctuations de charges sans que cela implique des achats coûteux de ressources serveurs qui ne seront pas toujours à leur maximum. En ayant recours au SaaS les clients s’abstraient également des coûts d’approvisionnement et de maintenance.

Le SaaS est aujourd’hui disponible dans un large éventail de secteurs et se divise en plusieurs branches. Dans cet article on s’intéresse au Search As A Service plus particulièrement le moteur de recherche Aloglia.

C’est quoi Algolia ?

C’est un moteur de recherche nouvelle génération à implémenter en mode SaaS (Search As A Service) qui permet d’obtenir des résultats de recherche de façon très rapide et pertinente.
Ce moteur est conçu pour indexer des données structurées, et non de gros blocs de texte.

Algolia fournit une API puissante qui vous permet d’implémenter rapidement et de manière transparente une recherche temps réel dans vos applications web et mobiles et cela sans avoir à gérer ni à entretenir d’infrastructure.

Pour démarrer avec Algolia il n’est pas nécessaire de mettre la main à la poche dans un premier temps. En effet Algolia propose un plan gratuit pour un maximum de 10 000 enregistrements et 100 000 opérations par mois.

Autre facette du produit intéressante, une interface graphique est proposée pour faciliter son intégration, ainsi que des librairies front pour appeler leurs APIs. Les technos proposées sont : JavaScript pur, ReactJS, Angular, et même l’utilisation des technologies iOS et Android grâce aux widgets fournis. Cela vous permet une intégration simple dans la plupart des applications web modernes.

La documentation est très complète, et les APIs mises à disposition permettent le développement d’interfaces et de fonctionnalités très riches.

Le plus important reste la partie analytics qui dresse un bilan des recherches effectuées. Elle permet d’afficher le nombre d’utilisateurs ayant effectué des recherches, ainsi que les pays d’où viennent la connexion.

Intégration d’Algolia dans un projet Play Scala.

Tout d’abord, pour bénéficier des avantage d’Algolia vous devez allez sur https://www.algolia.com et créez un compte.
Ensuite vous devez sélectionner le centre de données avec le moins de latence où le plus proche de l’emplacement de vos utilisateurs.

À ce stade, vous pouvez accéder à votre dashboard pour créer votre Index afin de pouvoir stocker vos données sur les serveurs d’Algolia.

Vous avez la possibilité de personnaliser search en modifiant ses attributs : attributs de recherche, attributs d’affichage ou attributs de filtrage… Toute la panoplie classique d’outils des moteurs est disponible ici : la gestion des synonymes, les stops words etc.

L’indexation d’un document avec Play Scala

A présent intéressons-nous à la partie code. Pour commencer ajoutons cette dépendance dans notre fichier build.sbt pour bénéficier du client Scala d’Algolia :

libraryDependencies += "com.algolia" %% "algoliasearch-scala" % "1.32.0"

On crée ensuite une classe responsable de l’indexation de nos données dans l’index que nous avons créé via le dashboard ci-dessous.
Dans cet exemple notre objet d’indexation est nomméIndexer. applicationId identifie notre application auprès d’Algolia et apiKey est la clé API permettant de s’authentifier lors des requêtes aux APIs d’Algolia :

@Singleton
class Indexer {
  val client = new AlgoliaClient(applicationId, apiKey) 
  case class ObjectWithObjectId(
                                 objectId: String,
                                 object: Object)
  def indexObject(object: Object) {
   
   client.execute {
      index into "YOUR_INDEX_NAME" `object` object
    }
  }

 def deleteObject(id: String) {
    client.execute {
      delete from "YOUR_INDEX_NAME" objectId id
    }
  }
}

Les données à stocker dans les index doivent être au format JSON ou CSV.

Vous devez changer « YOUR_INDEX_NAME » par le nom de votre index et utiliser votre API key en lieu et place du paramètre apiKey.

La mise en place d’InstantSearch avec Nuxt.js

Il existe un plugin Vue pour l’instant search d’Algolia. Il s’intègre facilement à un projet Nuxt.js. Pour ce faire rendez-vous dans le dossier racine de votre projet Nuxt.js et exécuter installer le package comme suit :

npm install vue-instantsearch --save

Juste après, nous activons le plug-in vue-instantsearch.js comme suit dans/plugins/vue-instantsearch.js

import Vue from 'vue';
import InstantSearch from 'vue-instantsearch';

Vue.use(InstantSearch);

Le plugin étant ainsi défini dans notre projet, nous pouvons à ce stade utiliser ses composants. Dans le code Vue ci-dessous j’utilise plusieurs à plusieurs widgets afin de vous les faire découvrir.

<template>
  <ais-instant-search-ssr>
    <ais-search-box />
    <ais-stats />
    <ais-refinement-list attribute="role" />
    <ais-hits>
      <template
        slot="item"
        slot-scope="{ item }"
      >
        <p>
          <ais-highlight
            attribute="name"
            :hit="item"
          />
        </p>
        <p>
          <ais-highlight
            attribute="role"
            :hit="item"
          />
        </p>
      </template>
    </ais-hits>
    <ais-pagination />
  </ais-instant-search-ssr>
</template>

<script>
import {
  AisInstantSearchSsr,
  AisRefinementList,
  AisHits,
  AisHighlight,
  AisSearchBox,
  AisStats,
  AisPagination,
  createInstantSearch
} from 'vue-instantsearch';
import algoliasearch from 'algoliasearch/lite';

const searchClient = algoliasearch(
  'YOUR_APPLICATION_ID',
  'Search-Only API Key'
);

const { instantsearch, rootMixin } = createInstantSearch({
  searchClient,
  indexName: 'instant_search'
});

export default {
  asyncData() {
    return instantsearch
      .findResultsState({
        // find out which parameters to use here using ais-state-results
        query: 'iphone',
        hitsPerPage: 5,
        disjunctiveFacets: ['role'],
        disjunctiveFacetsRefinements: { role: ['Admin'] }
      })
      .then(() => ({
        instantSearchState: instantsearch.getState()
      }));
  },
  beforeMount() {
    instantsearch.hydrate(this.instantSearchState);
  },
  mixins: [rootMixin],
  components: {
    AisInstantSearchSsr,
    AisRefinementList,
    AisHits,
    AisHighlight,
    AisSearchBox,
    AisStats,
    AisPagination
  },
  head() {
    return {
      link: [
        {
          rel: 'stylesheet',
          href:
            'https://cdn.jsdelivr.net/npm/instantsearch.css@7.3.1/themes/algolia-min.css'
        }
      ]
    };
  }
};
</script>

N’oubliez pas d’ajouter les clés API d’Algolia ainsi que le nom de votre index.

À ce niveau nous avons un projet Play Scala qui permet d’indexer des données dans un index Algolia et bénéficier d’un moteur de recherche exposé à nos utilisateurs par notre application Nuxt.js via le plugin le plugin Vue d’Algolia.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *