Le site e-commerce Cendriyon.com a choisi Elasticsearch pour faciliter la recherche vocale à travers son catalogue produits de plus de 30 000 articles.

<p><img src="https://api.contentstack.io/v2/uploads/597f41c4bbffcd406082d2d1/download?uid=blt194887e9464d4eb8" data-sys-asset-uid="blt194887e9464d4eb8" alt="cendryon banner.png">
</p><h2>Le Projet</h2><p>En 10 années de présence sur le web, <a href="https://www.cendriyon.com/" target="_blank">Cendriyon.com</a>, Fashion Store spécialisé dans la vente de chaussures pour femmes, n’avait pas de moteur de recherche <em>full text</em>. Doté d’un stock de plus de 30 000 articles de mode, il était donc primordial de lancer un outil performant, ergonomique et ludique. Après quelques tests, notre choix s’est très vite porté sur Elasticsearch !<span></span>
</p><p><img src="https://api.contentstack.io/v2/uploads/5980466a15e6cf2a43479bfd/download?uid=blt2f72f07d8fc3eae3" data-sys-asset-uid="blt2f72f07d8fc3eae3" alt="cendyon serach example.png">
</p><figcaption style="text-align: center;">Figure 1 : Exemple de recherche</figcaption><h2>Côté Mapping</h2><p>Nous utilisons un french analyzer sur mesure, inspiré par <a href="https://www.elastic.co/fr/videos/comment-indexer-des-emoji-avec-elasticsearch-par-damien-alexandre" target="_blank">Damien Alexandre</a> de #jolicode et enrichi d’un dictionnaire de synonymes fashion, comme sport = sportswear, tops = tee-shirts, debardeur = caraco, etc. Nous avons également intégré un menu <em>suggest</em>, basé sur des mots clés indexés, ce qui permet de limiter les saisies dans le cas de figure de la saisie manuelle.
</p><h2>Côté Indexation</h2><p>Afin de garantir la fraîcheur des données - disponibilité des produits, pointures, tailles et couleurs - chaque jour, nous ré-indexons à chaud l’ensemble des données « en 3 secondes » via un Bulk en PHP et la technique « <a href="https://www.elastic.co/fr/blog/changing-mapping-with-zero-downtime" target="_blank">Changing Mapping with Zero Downtime</a>. »
</p><h2>Côté Recherche</h2><p>L’application JavaScript requête directement en Ajax un fichier PHP qui s’occupe du traitement avec Elasticsearch, grâce à un client PHP que nous avons développé en interne.
</p><h2>Côté Résultats</h2><p>La pertinence par le <em>scoring</em> nous semblait évidente afin de trier les résultats. Dans le futur, un <em>rescore</em> avec les produits les plus performants basé sur les statistiques telles que le nombre de vues, clics ou encore conversions, pourra être mis en place, afin de mettre en avant les produits les plus adaptés aux recherches des utilisateurs. Nous avons volontairement laissé un <em>fuzziness</em> suffisamment large afin d’assurer un maximum de résultats. Nous opérons dans le secteur de la mode et du e-commerce, ainsi, si à un instant t nous n’avons plus de  « chaussures noires en pointure 38 » il y aura peut être d’autres « chaussures en pointure 38 » qui feront flasher la cliente.
</p><h2>Côté Vocal</h2><p>Ok Google ! <a href="https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html" target="_blank">API Web Speech</a> !
</p><p>Cette API nous a permis de transcrire la partie vocale en texte. Ce service proposé par Google a été implanté comme une surcouche dans notre dev JavaScript, filtre anti bruit, correction automatique du contenu inapproprié, ajout de mots clés afin de renforcer le contexte de la thématique. C’est un outil très puissant bien que contraint à la compatibilité des navigateurs et des OS.
</p><pre class="prettyprint">if (!('webkitSpeechRecognition' in window)) {
  upgrade();
} else {
  var recognition = new webkitSpeechRecognition();
  recognition.continuous = true;
  recognition.interimResults = true;
  recognition.onstart = function() { ... }
  recognition.onresult = function(event) { ... }
  recognition.onerror = function(event) { ... }
  recognition.onend = function() { ... }
  ...
</pre><p>En effet l’API Web Speech utilise des préfixes webkit, ce qui rend le service disponible essentiellement sur le navigateur Google Chrome. ZDNET rappelle qu’« <em>en 2017, Chrome c’est 60% de parts de marché des navigateurs</em> ». Par ailleurs, selon <a href="https://caniuse.com/#search=speechrecognition" target="_blank">Caniuse</a>, il est compatible avec Chrome Android  et testé à partir de la version 5, mais rencontre des difficultés avec Chrome OS. Afin de pallier au problème de compatibilité et d’OS,  je vous recommande de passer par l’<a href="https://cloud.google.com/speech/?hl=fr" target="_blank">API Cloud Speech</a>, service qui fonctionne comme une API REST avec JSON, pratique pour une application iPhone, par exemple.
</p><ol>
	<li>Développer un Voice Recorder, capturer le son du micro et l'enregistrer dans un fichier. Exemple de langage en fonction du projet :
	<ol>
		<li>App Iphone : Objective-C</li>
		<li>App Android : Java MediaRecorder</li>
		<li>Navigateur web : JavaScript + HTML5</li>
	</ol></li>
	<li>Envoyer le fichier à l’API Cloud speech, voir la <a href="https://cloud.google.com/speech/docs/reference/libraries?hl=fr" target="_blank">liste des clients</a>.
	<pre class="prettyprint"># Instantiates a client
$speech = new SpeechClient([
    'projectId' =&gt; $projectId,
    'languageCode' =&gt; 'en-US',
]);
# The name of the audio file to transcribe
$fileName = __DIR__ . '/resources/audio.raw';
# The audio file's encoding and sample rate
$options = [
    'encoding' =&gt; 'LINEAR16',
    'sampleRateHertz' =&gt; 16000,
];
# Detects speech in the audio file
$results = $speech-&gt;recognize(fopen($fileName, 'r'), $options);
    </pre></li>
	<li><span></span>Récupérer le résultat afin de l’insérer dans une requête Elasticsearch</li>
	<pre class="prettyprint">$transcribe = [];
foreach ($results[0]-&gt;alternatives() as $alternative) {
    $transcribe[] = $alternative['transcript'];
}
# Variable that contains the content for the request
$text_for_query_elasticsearch = implode(' ', $transcribe);
    </pre>
</ol><h2>Côté Analyse</h2><p>Bientôt Kibana ! Mais pour le moment nous utilisons Google Analytics qui nous permet une première visualisation de l’utilisation de la <em>Fashion Recherche Cendriyon</em>. Grâce à l’utilisation de requêtes en Ajax, nous avons paramétré <em>Site Search</em> afin de mesurer la pertinence de ces requêtes à des fins marketing. Nous avons également ajouté une page virtuelle afin de gérer l’outil et catégorisé les recherches sans résultat, ce qui pourrait grandement nous pousser à nous améliorer sur des recherches de produits auxquelles nous n’aurions pas pensés.
</p><p><img src="https://api.contentstack.io/v2/uploads/598046b2fd7fd32260cbd74a/download?uid=bltb40acf72db59fb36" data-sys-asset-uid="bltb40acf72db59fb36" alt="cendyon google analytics.png">
</p><figcaption style="text-align: center;">Figure 2 : Remontée des datas dans Google Analytics</figcaption><h2>Conclusion</h2><p>Le Web avance et ça nous plait !&nbsp;Merci à David Pilato pour sa présence sur le Forum ;)
</p><hr><p><strong><img src="https://api.contentstack.io/v2/uploads/59819f7efd7fd32260cbd7ce/download?uid=bltc4a93f7c9c90080d" data-sys-asset-uid="bltc4a93f7c9c90080d" alt="author-unamed.jpg" style="float: left; margin: 0px;"></strong>
</p><p style="text-align: left; margin-left: 150px"><strong>Franck Nizou</strong>. Passionné par le web et les nouvelles technologie depuis les années 2000, Franck Nizou co-fonde Cendriyon.com en 2007, un des premiers sites de vente en ligne de chaussures pour femme. Il ne cesse depuis de coder dans différents langages de programmation et particulièrement le PHP afin de répondre aux besoins de son entreprise
</p>

cendryon-fullbleed-new.jpg

cendyon-image-new.jpg

Recherche Vocale avec Elastic, la Fashion recherche by #Cendriyon

Start free trial

Blog Footer CTA

Sign up for Elastic Cloud free trial

Franck Nizou

<p>By submitting you acknowledge that you've read and agree to our <a href="/legal/elastic-cloud-account-terms" target="_self">Terms of Service</a>, and you agree to receive the <a href="/legal/privacy-statement#how-we-use-the-information" target="_self">selected communications</a> at the contact details you provided above. See <a href="/legal/privacy-statement/" target="_self">Elastic’s Privacy Statement</a> for more details or to opt-out at any time.</p>

Communication Preferences - ONLY for /communication-preferences

<p>En confirmant votre envoi, vous reconnaissez que vous avez lu et que vous acceptez nos <a href="/fr/legal/elastic-cloud-account-terms" target="_self">Conditions générales d'utilisation</a>, et vous acceptez de recevoir les <a href="/fr/legal/privacy-statement#how-we-use-the-information" target="_self">types de notification sélectionnés</a> à l'adresse que vous avez fournie plus haut. Pour en savoir plus ou pour revenir sur votre décision (possible à tout moment), consultez la <a href="/fr/legal/privacy-statement/" target="_self">Déclaration de confidentialité d'Elastic</a>.</p>

<p>By submitting you acknowledge that you've read and agree to our <a href="/legal/elastic-cloud-account-terms" target="_blank">Terms of Service</a>, and that Elastic may <a href="/legal/privacy-statement#how-we-use-the-information" target="_blank">contact you</a> about our related products and services, using the details you provide above. See <a href="/legal/privacy-statement/" target="_blank">Elastic’s Privacy Statement</a> for more details or to opt-out at any time.</p><p>By submitting this form, I agree to Elastic sharing my contact information with Google Cloud. I also agree to Elastic giving my information to the vendor for the purpose of shipping my food package.</p>

GDPR Text + Google Cloud

<p>By submitting you acknowledge that you've read and agree to our <a href="/legal/serverless-preview-terms" target="_blank">Terms of Service</a>, and that Elastic may <a href="/legal/privacy-statement#how-we-use-the-information" target="_blank">contact you</a> about our related products and services, using the details you provide above. See <a href="/legal/privacy-statement/" target="_blank">Elastic’s Privacy Statement</a> for more details or to opt-out at any time.</p>

Serverless GDPR Text

<p>En confirmant votre envoi, vous reconnaissez que vous avez lu et que vous acceptez nos <a href="/fr/legal/serverless-preview-terms" target="_self">Conditions générales d'utilisation</a>, et vous permettez à Elastic de <a href="/fr/legal/privacy-statement#how-we-use-the-information" target="_self">vous contacter</a> à propos de produits et services similaires en utilisant les informations que vous avez fournies plus haut. Pour en savoir plus ou pour revenir sur votre décision (possible à tout moment), consultez la <a href="/fr/legal/privacy-statement/" target="_self">Déclaration de confidentialité d'Elastic</a>.</p>

<p>By submitting you agree to <a href="/agreements/global/cloud-services-monthly" rel="nofollow">Elastic Cloud Terms of Service</a>. Your personal data will be processed in accordance with <a href="/legal/privacy-statement">Elastic's Privacy Statement</a>.</p>

Cloud Trial GDPR Text

<p>En envoyant votre demande d'inscription, vous acceptez les <a href="/fr/agreements/global/cloud-services-monthly" rel="nofollow">conditions générales d'utilisation d'Elastic Cloud</a>. Vos données personnelles seront traitées conformément à la <a href="/fr/legal/privacy-statement">déclaration de confidentialité d'Elastic</a>.
</p>

<p>By submitting you acknowledge that you've read and agree to our <a href="/legal/terms-of-use" target="_blank">Terms of Service</a>, and that Elastic may <a href="/legal/privacy-statement#how-we-use-the-information" target="_blank">contact you</a> about our related products and services, using the details you provide above. See <a href="/legal/privacy-statement/" target="_blank">Elastic’s Privacy Statement</a> for more details or to opt-out at any time.</p>

Newsletter GDPR Text

<p>En confirmant votre envoi, vous reconnaissez que vous avez lu et que vous acceptez nos <a href="/fr/legal/terms-of-use" target="_self">Conditions générales d'utilisation</a>, et vous permettez à Elastic de <a href="/fr/legal/privacy-statement#how-we-use-the-information" target="_self">vous contacter</a> à propos de produits et services similaires en utilisant les informations que vous avez fournies plus haut. Pour en savoir plus ou pour revenir sur votre décision (possible à tout moment), consultez la <a href="/fr/legal/privacy-statement/" target="_self">Déclaration de confidentialité d'Elastic</a>.</p>

Explore similar demos

Overview

You'll also receive an email with related content.

You'll also receive an email with related content

Nous vous enverrons plus de contenu susceptible de vous intéresser.

Speakers

Close

The content on this page is not available in the selected language. As Elastic grows globally, we continue to support content in multiple languages.

The content on this page is not available in the selected language.

Le contenu de cette page n'est pas disponible dans la langue sélectionnée. Chez Elastic, nous mettons tout en œuvre pour vous proposer du contenu dans différentes langues. En attendant, nous vous remercions de votre patience !

See more insights

Articles by

Author

Learn more

Watch now (no PT)

Watch now

See all top stories

All (no PT translation)

Contact information

Press Release

Share on Reddit

Share this story

Share by Email

Thank you for your interest!

Contact Info

Follow us on Youtube

Load More

Share on LinkedIn

Follow us on LinkedIn

Search Integrations

All Solutions

Video for

Follow us on Twitter

See when this webinar starts in my time zone

Voir à quelle heure débute le webinar dans mon fuseau horaire

Register to Watch

Register now

See All Posts

Can't make it? Register and we'll send you the recording. You'll also receive an email with related content

Si vous ne pouvez pas vous libérer le jour J, inscrivez-vous et nous vous enverrons l'enregistrement. Vous recevrez aussi un e-mail contenant des ressources connexes.

Small image for

On-demand webinar

Featured webinar

Register to Attend

Share on Facebook

Reset all

Upcoming webinar

View more posts

Print

Hosted by

Sign In to Attend

View next

Follow us on Facebook

Share

Highlights

Read less

Thank you for registering. We will send you a confirmation email soon.

Nous vous remercions de votre inscription. Vous allez recevoir un e-mail de confirmation.

Author

Articles by Franck Nizou

Recherche Vocale avec Elastic, la Fashion recherche by #Cendriyon

Sign up for Elastic Cloud free trial