{"id":17115063,"url":"https://github.com/plnech/workshop-algolia-zenika","last_synced_at":"2026-01-05T22:04:27.249Z","repository":{"id":71322348,"uuid":"82562497","full_name":"PLNech/workshop-algolia-zenika","owner":"PLNech","description":"WorkShop introducing Algolia at Zenika.","archived":false,"fork":false,"pushed_at":"2017-09-19T18:20:42.000Z","size":617,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-29T06:51:19.283Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PLNech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-02-20T13:44:26.000Z","updated_at":"2017-09-19T14:57:07.000Z","dependencies_parsed_at":"2023-03-05T13:15:38.428Z","dependency_job_id":null,"html_url":"https://github.com/PLNech/workshop-algolia-zenika","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PLNech%2Fworkshop-algolia-zenika","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PLNech%2Fworkshop-algolia-zenika/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PLNech%2Fworkshop-algolia-zenika/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PLNech%2Fworkshop-algolia-zenika/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PLNech","download_url":"https://codeload.github.com/PLNech/workshop-algolia-zenika/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245186921,"owners_count":20574554,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-14T17:21:27.730Z","updated_at":"2026-01-05T22:04:22.212Z","avatar_url":"https://github.com/PLNech.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Atelier Algolia@Zenika\n\n**Bienvenu à l'atelier Algolia@Zenika! En quelques étapes, vous allez voir comment construire une interface de recherche avec Algolia.**\n\nVous apprendrez comment : \n- Utiliser Algolia dans votre back-end pour indexer vos données 🚀\n- Configurer votre moteur de recherche comme vous l'entendez 🔎\n- Construire une interface de recherche en quelques minutes avec instantsearch.js\n\nNous utiliserons [**Smashing Magazine**](https://www.smashingmagazine.com/) comme projet, en allant d'un simple fichier JSON à l'interface de recherche fonctionnelle.\n\n## Back-end (Étapes 1 et 2)\nDans les deux premières étapes, vous allez **construire la back-end**. Des liens vous guiderons vers la documentation appropriée, et des exemples de code sont à votre disposition dans [`solution.md`](solution.md) si une tache vous bloque.\n\n## Front-end (Étape 3)\nDans la dernière étape, vous allez rajouter l'interface de recherche dans une page du site.\nVous trouverez dans ce projet le code HTML/CSS/JS nécessaire, de sorte qu'il vous suffit de suivre ce readme et de décommenter les blocs de code pour obtenir une interface de recherche fonctionnelle. N'hésitez pas à la personnaliser davantage ! Essayez de faire varier les paramètres et jetez un œil à la [documentation d'instantsearch.js][is-doc] pour voir ce que vous pourriez faire 😉\n\n# Étape 0 : Premiers pas\n\u003e *Récupérer les données initiales et vos identifiants*\n\nPour cet atelier vous avez besoin d'un [compte Algolia](https://www.algolia.com/users/sign_up), des données initiales et du squelette de l'interface front. Ces deux derniers se trouvent dans la branche `master` de ce projet !\n\n- Clonez le projet ou téléchargez [son archive](https://github.com/PLNech/workshop-algolia-zenika/archive/master.zip)\n\u003e `git clone git@github.com:PLNech/workshop-algolia-zenika.git`\n\n- Connectez-vous à votre compte Algolia et récupérez vos [identifiants](https://www.algolia.com/api-keys):\n  - Votre APPID\n  - Votre Admin API Key (for creating/modifying/deleting data)\n  - Votre Search-only API Key (for searching in your front-end)\n\n_Dans une application en production, vous éviteriez d'utiliser la clé d'API Admin (elle permet en effet de *TOUT* faire sur votre compte) et utiliseriez plutôt une clé spécifique générée pour l'occasion qui ne pourrait accèder qu'aux données de ce projet. Pour cet atelier vous pouvez utiliser votre clé admin, **à condition de ne pas publier votre code sur internet !**_\n\n# Étape 1 : du JSON à Algolia\n\u003e *Charger les données et les pousser dans un index Algolia*\n\nLa première étape est de prendre le jeu de données en JSON, de le charger dans votre code et de l'envoyer dans un index Algolia.\n\n- Ajouter Algolia comme dépendence\n\u003e **Documentation** | *Getting started*\n\u003e  - [Python](https://www.algolia.com/doc/api-client/python/getting-started/#install)\n\u003e  - [Java](https://www.algolia.com/doc/api-client/java/getting-started/#install)\n\u003e  - [PHP](https://www.algolia.com/doc/api-client/php/getting-started/#install)\n\n\n- Prendre `articles.json` et le charger dans votre code\n\u003e **Documentation** | *Loading JSON*\u003c/summary\u003e\n\u003e - [Python](https://docs.python.org/3.6/library/json.html)\n\u003e - [Java](http://www.oracle.com/technetwork/articles/java/json-1973242.html)\n\u003e - [PHP](https://secure.php.net/manual/en/function.json-decode.php)\n\n- Avec vos identifiants, initialisez un client d'API\n\u003e **Documentation** | *Initialize the API Client*\n\u003e  - [Python](https://www.algolia.com/doc/api-client/python/getting-started/#initialize-the-client)\n\u003e  - [Java](https://www.algolia.com/doc/api-client/java/getting-started/#initialize-the-client)\n\u003e  - [PHP](https://www.algolia.com/doc/api-client/php/getting-started/#initialize-the-client)\n\n- Créez votre index algolia : `smashing`\n\u003e **Documentation** | *Initialize an index*\n\u003e  - [Python](https://www.algolia.com/doc/api-client/python/getting-started/#push-data)\n\u003e  - [Java](https://www.algolia.com/doc/api-client/java/getting-started/#push-data)\n\u003e  - [PHP](https://www.algolia.com/doc/api-client/php/getting-started/#push-data)\n\n- Ajoutez vos objets à l'index\n\u003e **Documentation** | *Push data*\n\u003e  - [Python](https://www.algolia.com/doc/api-client/python/getting-started/#push-data)\n\u003e  - [Java](https://www.algolia.com/doc/api-client/java/getting-started/#push-data)\n\u003e  - [PHP](https://www.algolia.com/doc/api-client/php/getting-started/#push-data)\n\n# Étape 2 : Configurer l'index\n\u003e *Configurez le moteur avec les bons réglages pour vos données : où chercher, comment trier les résultats, comment les filtrer*\n\nUn moteur de recherche peut être configuré pour de nombreux cas d'utilisations : il faut modifier ses réglages par défaut pour offrir le plus de valeur possible à vos utilisateurs.\n\nNous allons modifier deux réglages très important : comment le moteur **cherche dans vos données**, et comment les résultats seront **triés**.\nLe premier est controllé par `searchableAttributes`, qui liste les attributs de vos objets qui pourraient contenir le terme cherché.\nLe deuxième dépend du `customRanking`, qui décrit quels attributs seront utilisés pour trier les résultats.\n\nPar exemple, imaginez que nous avons `searchableAttributes=['title']` and `customRanking=['author', 'publishedDate']`: si l'utilisateur cherche `javascript` et deux articles mentionnent ce terme dans leur `title`, nous les afficherons selon l'ordre alphabétique des auteurs (et si ils ont le même auteur, ils seront triés par ordre croissant des dates de publications.\n\n- Réglez les `searchableAttributes` (ce qui peut être cherché) et le `customRanking` (comment trier les résultats)\n\u003e **Documentation** | *Set settings*\n\u003e  - [Python](https://www.algolia.com/doc/api-client/python/settings/#set-settings)\n\u003e  - [Java](https://www.algolia.com/doc/api-client/java/settings/#set-settings)\n\u003e  - [PHP](https://www.algolia.com/doc/api-client/php/settings/#set-settings)\n\nUn autre point important d'une bonne interface de recherche est le **faceting**, une fonctionnalité permettant de répartir vos résultats selon une dimension (par exemple la distribution des téléphones par marque sur Amazon.com). Nous allons ici permettre à l'utilisateur de trier et filtrer les résultats selon les `tags` de nos articles, en utilisant l'attribut `tags.name` pour les différentier.\n\n- Réglez les `attributesForFaceting` (quels attributs peuvent servir à répartir les résultats) pour utiliser le nom des tags :\n\u003e **Documentation** | *Get settings*\n\u003e  - [Python](https://www.algolia.com/doc/api-client/python/settings/#get-settings)\n\u003e  - [Java](https://www.algolia.com/doc/api-client/java/settings/#get-settings)\n\u003e  - [PHP](https://www.algolia.com/doc/api-client/php/settings/#get-settings)\n\n# Étape 3 : Intégrez votre moteur de recherche dans la front-end\n\u003e *Construire une interface de recherche rapidement avec instantsearch.js*\n\nPour cette étape, il vous faut :\n- Un éditeur pour modifier des fichiers HTML/JS\n- Un navigateur pour afficher la page (manuellement ou avec `cd frontend; npm install \u0026\u0026 npm run serve`\n\n**N'hésitez pas à aller voir la [documentation d'instantsearch.js][is-doc] : chaque widget peut faire bien plus que ce que nous vous montrons ici !**\n## Initialisez instantsearch.js avec vos identifiants Algolia \n\n- Dans `index.js`, décommentez le premier bloc de code et entrez vos identifiants\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cb\u003eCode\u003c/b\u003e\u003c/summary\u003e\n \n```js\nvar search = instantsearch({\n  appId: 'YOUR_APP_ID',\n  apiKey: 'YOUR_SEARCH_API_KEY',\n  indexName: 'smashing',\n});\n```\n\u003c/details\u003e\n\n## Ajoutez votre premier widget : la [`searchBox`](https://community.algolia.com/instantsearch.js/documentation/#searchbox) pour l'entrée utilisateur\n\n- Dans `index.html`, notez l'élément `\u003cinput id=\"searchbar\" /\u003e`: nous allons l'utiliser pour notre interface\n- Dans `index.js`, décommentez le code qui crée la `searchBox`\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cb\u003eCode\u003c/b\u003e\u003c/summary\u003e\n \n```js\nsearch.addWidget(\n  instantsearch.widgets.searchBox({\n    container: '#searchbar',\n    placeholder: 'Search for articles',\n    autofocus: true,\n    poweredBy: true\n  })\n);\n```\n\u003c/details\u003e\n\n## Ajoutez un deuxième widget pour afficher les résultats : les [`hits`](https://community.algolia.com/instantsearch.js/documentation/#hits)\n\n- Dans `index.js`, décommentez le bloc suivant pour ajouter les `hits` et démarrer la recherche (ce qui va connecter les widgets et afficher les résultats pour une recherche vide)\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cb\u003eCode\u003c/b\u003e\u003c/summary\u003e\n \n```js\nsearch.addWidget(\n  instantsearch.widgets.hits({\n    container: '#hits-container',\n    hitsPerPage: 20,\n    templates: {\n      item: `{{title}}`,\n      empty: `No results`\n    }\n  })\n);\n```\n\u003c/details\u003e\n\n\n## Améliorez l'affichage des résultats avec un meilleur template\n\u003e *Utiliser un template HTML pour afficher les résultats et un peu de CSS pour les rendre attrayants*\n\n- Dans `index.html`, notez l'élément `\u003cscript id=\"templateSearch-hit\" language=\"x-template\"\u003e` : nous allons l'utiliser pour enrichir l'affichage de nos résultats\n- Dans `index.js`, replacez le template `item` par `document.getElementById(\"templateSearch-hit\").innerHTML`\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cb\u003eCode\u003c/b\u003e\u003c/summary\u003e\n \n```js\ntemplates: {\n  item: document.getElementById(\"templateSearch-hit\").innerHTML,\n  empty: `No results`\n}\n```\n\u003c/details\u003e\n\n- Dans `index.css`, notez la classe `.search-hits` : nous allons nous en servir pour donner du style à nos résultats\n- Dans `index.js`, ajoutez aux `hits` une propriété `cssClasses`: `cssClasses: {root: 'search-hits'}`\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cb\u003eCode\u003c/b\u003e\u003c/summary\u003e\n \n```js\n//templates: {...},\ncssClasses: {\n  root: 'search-hits'\n}\n```\n\u003c/details\u003e\n\n## Enrichissez vos données avant de les afficher \n\u003e *Transformer la donnée pour qu'elle serve davantage à l'utilisateur*\n\n- Dans `index.js`, ajoutez aux `hits` une fonction `transformData` qui va enrichir vos résultats: utilisez la timestamp `publishedDate` pour créer une `date` lisible par un humain, et créez des `comments` pour afficher proprement le nombre de commentaires\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cb\u003eCode\u003c/b\u003e\u003c/summary\u003e\n \n```js\n//cssClasses: {...},\ntransformData: {\n  item: (hit) =\u003e {\n    // Date dans un format lisible\n    hit.date = moment.unix(hit.publishedDate).format('MMMM Do, YYYY');\n\n    // Nombre de commentaires\n    if (hit.commentCount \u003e 1) {\n      hit.comments = `${hit.commentCount} Comments`;\n    } else {\n      hit.comments = hit.commentCout === 0 ? null : '1 Comment';\n    }\n    \n    return hit;\n  }\n}\n```\n\u003c/details\u003e\n\n- Dans `index.html`, éditez le template pour utiliser vos nouveaux attributs (remplacez `commentCount` par `comments` et `publishedDate` par `date`)\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cb\u003eCode\u003c/b\u003e\u003c/summary\u003e\n \n```html\n\u003cscript id=\"templateSearch-hit\" language=\"x-template\"\u003e\n    \u003cdiv class=\"search-hit\"\u003e\n      \u003ca href=\"{{url}}\" class=\"search-hit--figure\"\u003e\n        \u003cimg src=\"{{image}}\" class=\"search-hit--image\" /\u003e\n      \u003c/a\u003e\n      \u003cdiv class=\"search-hit--details\"\u003e\n        \u003ca href=\"{{url}}\" class=\"search-hit--title\"\u003e{{title}}\u003c/a\u003e\n        \u003cul class=\"search-hit--infos pmd\"\u003e\n          \u003cli class=\"search-hit--info search-hit--info__date date rd\"\u003e{{date}}\u003c/li\u003e\n          \u003cli class=\"search-hit--info search-hit--info__author\"\u003eBy \u003ca href=\"{{authorUrl}}\"\u003e{{author}}\u003c/a\u003e\u003c/li\u003e\n          \u003cli class=\"search-hit--info search-hit--info__tags tags\"\u003e\n          {{#tags}}\u003ca href=\"https://www.smashingmagazine.com/tag/{{slug}}/\"\u003e{{{name}}}\u003c/a\u003e{{/tags}}\n          \u003c/li\u003e\n          \u003cli class=\"search-hit--info search-hit--info__comments comments\"\u003e{{comments}}\u003c/li\u003e\n        \u003c/ul\u003e\n        \u003cp class=\"search-hit--excerpt\"\u003e{{description}}\u003c/p\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/script\u003e\n```\n\u003c/details\u003e\n\n## Aidez vos utilisateurs à comprendre les résultats avec le Highlighting (mise en valeur)\n\u003e *Mettre en valeur les termes de la recherche dans vos résultats pour les expliquer à l'utilisateur*\n\n[La mise en valeur des résultats de recherche](https://blog.algolia.com/inside-the-algolia-engine-part-5-highlighting-a-cornerstone-to-search-ux/) est l'un des composants clés d'une bonne expérience de recherche. La réponse d'Algolia contient déjà ces *highlights*, il ne reste plus qu'à les afficher !\n- Dans `index.html`, modifiez le template pour surligner les `searchableAttributes` dans les résultats: il suffit de remplacer `{{attribut}}` by `{{{_highlightResult.attribut.value}}}` pour chaque attribut cherchable\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cb\u003eCode\u003c/b\u003e\u003c/summary\u003e\n \n```html\n\u003cscript id=\"templateSearch-hit\" language=\"x-template\"\u003e\n    \u003cdiv class=\"search-hit\"\u003e\n      \u003ca href=\"{{url}}\" class=\"search-hit--figure\"\u003e\n        \u003cimg src=\"{{image}}\" class=\"search-hit--image\" /\u003e\n      \u003c/a\u003e\n      \u003cdiv class=\"search-hit--details\"\u003e\n        \u003ca href=\"{{url}}\" class=\"search-hit--title\"\u003e{{{_highlightResult.title.value}}}\u003c/a\u003e\n        \u003cul class=\"search-hit--infos pmd\"\u003e\n          \u003cli class=\"search-hit--info search-hit--info__date date rd\"\u003e{{date}}\u003c/li\u003e\n          \u003cli class=\"search-hit--info search-hit--info__author\"\u003eBy \u003ca href=\"{{authorUrl}}\"\u003e{{{_highlightResult.author.value}}}\u003c/a\u003e\u003c/li\u003e\n          \u003cli class=\"search-hit--info search-hit--info__tags tags\"\u003e\n          {{#tags}}\u003ca href=\"https://www.smashingmagazine.com/tag/{{slug}}/\"\u003e{{{name}}}\u003c/a\u003e{{/tags}}\n          \u003c/li\u003e\nwidget to display contextual information*\n          \u003cli class=\"search-hit--info search-hit--info__comments comments\"\u003e{{comments}}\u003c/li\u003e\n        \u003c/ul\u003e\n        \u003cp class=\"search-hit--excerpt\"\u003e{{{_highlightResult.description.value}}}\u003c/p\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/script\u003e\n```\n\u003c/details\u003e\n\n## Affichez des statistiques/métadonnées de la recherche\n\u003e *Montrer des informations contextuelles avec le widget [`stats`](https://community.algolia.com/instantsearch.js/documentation/#stats)*\n\n- Dans `index.html`, notez l'élément `\u003cdiv id=\"stats-container\"\u003e\"` qui va accueillir vos statistiques\n- Dans `index.js`, décommentez le bloc suivant pour ajouter le widget `stats`\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cb\u003eCode\u003c/b\u003e\u003c/summary\u003e\n \n```js\nsearch.addWidget(\n  instantsearch.widgets.stats({\n    container: '#stats-container',\n    cssClasses: {\n      root: 'search-stats'\n    }\n  })\n);\n```\n\u003c/details\u003e\n\n## Ajoutez de la pagination à votre interface\n\u003e *Utiliser le widget [`pagination`](https://community.algolia.com/instantsearch.js/documentation/#pagination) pour passer d'une page à l'autre*\n\n- Dans `index.html`, notez l'élément `\u003cdiv id=\"pagination-container\"\u003e\"` qui contiendra la pagination\n- Dans `index.js`, décommentez le bloc suivant pour ajouter le widget `pagination`\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cb\u003eCode\u003c/b\u003e\u003c/summary\u003e\n \n```js\nsearch.addWidget(\n  instantsearch.widgets.pagination({\n    container: '#pagination-container',\n    maxPages: 20,\n    // par défaut le widget défile jusqu'au 'body', désactivons cette fonctionnalité\n    scrollTo: false\n  })\n);\n```\n\u003c/details\u003e\n\n## Permettre aux utilisateurs de filtrer par tag\n\u003e *Utiliser le widget [`refinementList`](https://community.algolia.com/instantsearch.js/documentation/#refinementList) pour afficher un nuage de tags interactif*\n\n- Dans `index.html`, notez l'élément `\u003cdiv id=\"tags-container\"\u003e\"` qui va contenir les tags\n- Dans `index.js`, décommentez le bloc suivant pour ajouter le widget `refinementList`\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cb\u003eCode\u003c/b\u003e\u003c/summary\u003e\n \n```js\nsearch.addWidget(\n  instantsearch.widgets.refinementList({\n    container: '#tags-container',\n    attributeName: 'tags.name',\n    operator: 'and',\n    limit: 10,\n    cssClasses: {\n      root: 'search-tags',\n      header: 'search-tags-header'\n    },\n    templates: {\n      header: 'Tags'\n    }\n  })\n);\n```\n\u003c/details\u003e\n\n## Reflétez l'état de la recherche dans l'URL\n\u003e *Permettre de partager un lien vers des résultats de recherche avec [`urlSync`](https://community.algolia.com/instantsearch.js/documentation/#initialization)*\n\n- Dans l'initialisation d'instantsearch, activez l'`urlSync`\n\n\u003cdetails\u003e\n \u003csummary\u003e\u003cb\u003eCode\u003c/b\u003e\u003c/summary\u003e\n \n```js\nvar search = instantsearch({\n  appId: 'YOUR_APP_ID',\n  apiKey: 'YOUR_SEARCH_API_KEY',\n  indexName: 'smashing',\n  urlSync: true\n});\n```\n\u003c/details\u003e\n\n# Étape 4 : Aller plus loin\n\nFélicitations pour être arrivé aussi loin ! Vous venez de construire une interface de recherche complètement fonctionnelle, du chargement des données depuis votre back-end à l'affichage de la recherche dans votre front-end 💪\n\nVoilà quelques idées pour aller plus loin avec votre application Algolia :\n\n## Promouvoir certains articles avant les autres résultats\n\nMettons à jour nos données initiales : chaque article aura maintenant un attribut `promoted`, qui quand il vaut `true` nous afficherons cet article avant les autres résultats.\n\n- Mettez à jour vos articles pour ajouter un attribut `promoted` à chaque article (en le mettant vrai ou faux aléatoirement)\n[**Documentation** : *browse*](https://www.algolia.com/doc/api-reference/api-methods/browse/)\n\nQuand vous mettez à jour un objet, le moteur va automatiquement réindexer vos données. La mise à jour et réindexation est atomique : votre front-end va chercher dans les données précédentes puis basculera sur le nouvel i ndex sans interruption de service.\n\n- Modifiez votre `customRanking` pour utiliser d'abord `promoted` dans le tri des résultats.\n\nUne fois ce réglage mis à jour, les articles promus seront toujours affichés avant les autres 👌\n\n## Restreindre ce que vos utilisateurs peuvent voir \n\nVous pourriez vouloir cacher aux utilisateurs que certains articles sont promus par rapport aux autres. Vous pouvez le faire en configurant les `unretrievableAttributes`, qui décrivent quels attributs ne seront pas renvoyés dans les résultats de recherche (et ne serviront donc qu'à les trier).\n\n- Réglez les `unretrievableAttributes` sur `promoted` pour enlever cet attribut de la réponse du moteur\n\n[is-doc]: https://community.algolia.com/instantsearch.js/documentation/#widgets\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplnech%2Fworkshop-algolia-zenika","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fplnech%2Fworkshop-algolia-zenika","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fplnech%2Fworkshop-algolia-zenika/lists"}