Zum Hauptinhalt springen

NFC Integration

In diesem Beitrag erfahren Sie, wie Sie Ihre Seiten und Webanwendungen gestalten können, um eine optimale Interaktion mit dem TheFlex Browser zu gewährleisten. Besonderes Augenmerk legen wir auf die Nutzung von NFC Lese-/Schreibfähigkeiten, sofern diese auf dem Endgerät verfügbar sind. Die Library wird automatisch vom TheFlex Browser hinzugefügt und muss nicht manuell eingebunden werden.

Aktivieren der NFC-Funktionalität​

Hier ist ein Beispielcode, um NFC zu aktivieren:

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
  nfc.enabled(
    function () {
      console.log("NFC aktiviert!");
    },
    function (error) {
      console.log("Fehler beim Aktivieren von NFC: " + JSON.stringify(error));
    }
  );
}

Lesen von NFC-Daten mit ndef-reader​

Sie können das ndef-reader-Plugin verwenden, um Daten zu lesen. Hier ist ein Beispielcode:

document.addEventListener("ndefReady", function (e) {
  nfc.addNdefListener(
    function (nfcEvent) {
      var message = nfcEvent.tag.ndefMessage;
      for (var i = 0; i < message.length; i++) {
        console.log(
          "Record " + i + ": " + nfc.bytesToString(message[i].payload)
        );
      }
    },
    function () {
      console.log("NDEF-Listener erfolgreich hinzugefügt.");
    },
    function (error) {
      console.log(
        "Fehler beim Hinzufügen des NDEF-Listeners: " + JSON.stringify(error)
      );
    }
  );
});

Schreiben von NFC-Daten mit ndef-reader​

Sie können das ndef-reader-Plugin verwenden, um Daten zu schreiben. Hier ist ein Beispielcode:

function writeNfcTag(data) {
  const ndefMessage = [ndef.textRecord(data)];

  nfc.write(
    ndefMessage,
    function () {
      nfcData.innerText = "NFC-Tag beschrieben!";
    },
    function () {
      nfcData.innerText = "Fehler beim Beschreiben des NFC-Tags!";
    }
  );
}

Beispiel einer Website mit NFC-Funktionalität im TheFlex

<!DOCTYPE html>
<html>
  <head>
    <title>NFC Reader Beispiel</title>
    <!-- Viewport-Einstellungen für mobile Geräte -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <style>
      /* Styling für den Body */
      body {
        font-size: 20px; /* Ändern Sie die Schriftgröße nach Bedarf */
        text-align: center;
      }

      /* Styling für den Button */
      button {
        font-size: 30px; /* Ändern Sie die Schriftgröße des Buttons nach Bedarf */
        padding: 30px 40px; /* Ändern Sie die Größe des Buttons nach Bedarf */
        margin-bottom: 20px;
      }

      /* Styling für den Link zu den App-Einstellungen */
      #appSettingsLink {
        font-size: 20px;
      }

      /* Media Query für Bildschirmbreiten bis 300px */
      @media screen and (max-width: 300px) {
        body {
          font-size: 16px;
        }

        button {
          font-size: 20px;
          padding: 8px 16px;
        }

        #appSettingsLink {
          font-size: 14px;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- Button zum Starten des NFC-Lesens -->
      <button id="startNFC">NFC Lesen starten</button>
      <!-- Anzeige der NFC-Tag-ID -->
      <p id="nfcTagID"></p>
      <!-- Anzeige der NFC-Daten -->
      <p id="nfcData"></p>
      <!-- Anzeige des NFC-Berechtigungsstatus -->
      <p id="nfcPermissionStatus"></p>
    </div>
    <script>
      // Funktion zum Initialisieren der NFC-Funktionalität
      function init() {
        // Elemente im HTML-Dokument abrufen
        const startNFCButton = document.getElementById("startNFC");
        const nfcDataParagraph = document.getElementById("nfcData");
        const nfcSerialParagraph = document.getElementById("nfcTagID");
        const nfcPermissionStatus = document.getElementById(
          "nfcPermissionStatus"
        );

        // Überprüfen, ob das Cordova NFC API verfügbar ist
        if (window.nfc) {
          // Funktion, die aufgerufen wird, wenn ein NFC-Tag erkannt wird
          var readingEvent = function (nfcEvent) {
            const tag = nfcEvent.tag;
            const ndefMessage = tag.ndefMessage;
            const serialNumber = nfc.bytesToHexString(tag.id);

            // Extrahiere den Text aus dem NDEF-Nachrichtenarray
            if (ndefMessage && ndefMessage.length > 0) {
              const textRecord = ndefMessage[0];
              const message = ndef.textHelper.decodePayload(textRecord.payload);

              // Anzeige der NFC-Daten und der Seriennummer (UID)
              nfcDataParagraph.textContent = `NFC-Daten: ${message}`;
            } else {
              nfcDataParagraph.textContent = "Leeres NFC-Tag!";
            }

            // Ausgabe der Seriennummer in der Konsole
            console.log(`NFC-Tag erkannt: ${serialNumber}`);
            nfcSerialParagraph.textContent = `Seriennummer (UID): ${serialNumber}`;
          };

          // Event-Listener für den Button zum Starten des NFC-Lesens
          startNFCButton.addEventListener("click", async () => {
            try {
              // Hinzufügen eines NFC-Tag-Listeners, um NFC-Tags zu erkennen
              nfc.addNdefListener(readingEvent);
              nfcDataParagraph.textContent = "NFC-Lesen gestartet";
            } catch (error) {
              nfcDataParagraph.textContent =
                "Fehler beim Starten des NFC-Lesens: " + JSON.stringify(error);
            }
          });
        } else {
          // NFC-Unterstützung ist nicht verfügbar
          console.error(
            "Cordova NFC API wird auf diesem Gerät nicht unterstützt."
          );
          startNFCButton.disabled = true;
        }
      }

      // Event-Listener für das Cordova 'deviceready'-Ereignis
      document.addEventListener("deviceready", init, false);
    </script>
  </body>
</html>