Deutsch

English

Deutsch

English
Download

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:

javascript
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:

javascript
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:

javascript
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 ​

html
<!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>