Set up QRCode reader

[nam1962]

Pour intégrer un lecteur de codes QR dans Rails avec Stimulus, suivez ces étapes :

Commencez par installer la gem stimulus-rails. Si vous utilisez Rails 7 ou une version ultérieure, elle doit être installée par défaut. Pour Rails 6, vous pouvez l'installer manuellement en l'ajoutant à votre Gemfile et en exécutant bundle install :

gem "stimulus-rails"

github.com

Ensuite, exécutez la commande suivante pour configurer Stimulus dans votre projet :

bin/rails stimulus:install

github.com

Créez un nouveau contrôleur Stimulus appelé qr_code_reader_controller.js dans le répertoire app/javascript/controllers/ et ajoutez le code suivant :

import { Controller } from "stimulus";
import { BrowserQRCodeReader } from "@zxing/library";
import Rails from "@rails/ujs";

export default class extends Controller {
  static targets = ["video"];

  connect() {
    this.codeReader = new BrowserQRCodeReader();
    this.startDecoding();
  }

  startDecoding() {
    this.codeReader
      .decodeFromInputVideoDevice(undefined, this.videoTarget)
      .then((result) => {
        let qrDataFromReader = result.text;
        let formData = new FormData();
        let qrCodeParams = {
          qr_data: qrDataFromReader
        };
        formData.append("qr_code_json_data", JSON.stringify(qrCodeParams));

        Rails.ajax({
          url: "/qr_codes",
          type: "post",
          data: formData
        });
      })
      .catch((error) => {
        console.error(error);
      });
  }

  disconnect() {
    this.codeReader.reset();
  }
}

Mettez à jour votre app/views/qr_codes/new.html.erb pour utiliser le contrôleur Stimulus :

<h1>Démonstration du lecteur de codes QR</h1>
<h2>Lecteur de codes QR sur Rails avec Stimulus</h2>
<div data-controller="qr-code-reader">
  <video data-qr-code-reader-target="video" width="500" height="400"></video>
</div>

Avec ces modifications, vous avez intégré le lecteur de codes QR avec Stimulus dans votre application Rails. Le contrôleur Stimulus gérera l'initialisation et le nettoyage du lecteur de codes QR lorsque le contrôleur sera connecté et déconnecté.

Pour déclencher le lecteur de codes QR dans votre application, il vous suffit de visiter la page où vous avez ajouté le code HTML de l'étape 4. Dans cet exemple, il s'agit de la page app/views/qr_codes/new.html.erb. Lorsque l'utilisateur accède à cette page, le contrôleur Stimulus se connecte automatiquement et démarre le processus de décodage des codes QR.