How to Code an NDEF Message With the NFC Tools App

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

This lesson preview is part of the The newline Guide to NFCs with React Native course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.

This video is available to students only
Unlock This Course

Get unlimited access to The newline Guide to NFCs with React Native, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course The newline Guide to NFCs with React Native
  • [00:00 - 00:19] Hello! In this lesson, we are going to write our first and death message into NFC text. The intention is to give you an idea of how the and death message is created and used.

    [00:20 - 00:38] We will first write our first and death message using a third party app and then we read it back and print the content using our previous tech counter game app. Then we write a test case to decode the and death message inside it.

    [00:39 - 00:56] The app we will use is NFC tools. You can easily find it in the app store or Google Play Store. After installing the app, launch it, press write, add a record URL.

    [00:57 - 01:10] Let's write hgts react-native.death into it. Come back to the previous screen and press write.

    [01:11 - 01:34] Before we print it out using our own app, we try to scan this NFC tag without launching any app. As you can see, the operating system itself automatically discovers this tag. And it also understands the content in our tag is actually a web link to Red native.dev.

    [01:35 - 01:53] Click it. It successfully launches the Rednative website. This little experiment tells us that our operating system understands and death and can even take actions depending on the content inside the and death.

    [01:54 - 02:04] Then go back to our previous tech counter game project. In the event listener of our game component, print out the tech object.

    [02:05 - 02:24] As we have seen before, this tech object contains an and death message property . Well in our tech counter game project, create a and death.test.js file in the test directory.

    [02:25 - 02:36] Create a test data variable and the value will be the data we just printed out. Then quickly write a test case.

    [02:37 - 02:50] Our objective is to successfully decode our data into HTTPS, Rednative.dev. So it should be the expected value.

    [02:51 - 03:04] Run the test case with watch mode and it fails immediately. That is expected since we haven't write any actual parsing logic yet.

    [03:05 - 03:17] This time to implement our parsing logic. Since we don't have any knowledge about and death so far, how about just treat them as asky code?

    [03:18 - 03:21] That sounds like a good idea. Let's do it.

    [03:22 - 03:34] We simply use reduce and string.front_char code to concatenate all of them together. Now the codes look like this.

    [03:35 - 03:48] It seems that the test case still fails. But if we observe the result closely, we can see the difference is actually the HTTPS part.

    [03:49 - 03:54] Where does it come from? It actually comes from the first byte.

    [03:55 - 04:09] The second and the following byte are all printable asky codes. 1 1 4 is the letter R, 1 0 1 is the letter E, 97 is the letter A and so on.

    [04:10 - 04:20] So what we don't know here is why the value 4 represents HTTPS. Do we need to read the and death specifications to parse the data?

    [04:21 - 04:29] Of course not. Actually our Rednative and the same manager comes with a handy module called and death.

    [04:30 - 04:38] Which can help us parse or build and death data. Let's use it to rewrite our test case.

    [04:39 - 05:03] First, import and death from Rednative and if same manager/and deathlib. Then simply call and death.uri.decopalo and pass the payload property from our and death message into it.

    [05:04 - 05:09] As you can see, the test case passed. Let's do a quick recap.

    [05:10 - 05:26] First, the operating system itself understands and death and can even take actions according to the data. We have seen web links can be triggered from NFC tags but actually there's more .

    [05:27 - 05:47] For iOS, the URL schemes listed here are all natively supported by Apple devices. In this module, we will build a tab and go app to handle the top 4 in this list since they are supported by most Android devices as well.

    [05:48 - 06:03] Second, we can use n-death module from Rednative NFC manager to build or parse and death. One point I want to mention is the import path.

    [06:04 - 06:25] Although we import n-death from Rednative NFC manager/and deathlib in our test case. During the actual app development, we will omit the final/and deathlib and directly imported from Rednative NFC manager like this.

    [06:26 - 06:50] The reason for this is because if we import it directly from Rednative NFC manager for now, we will end up also importing Rednative related dependencies into our test environment which requires lots of extra configurations for this simple test case to work. And we certainly don't want to deal with them.

    [06:51 - 07:01] Okay, we have now scratched the surface about n-death. In the next lesson, we will dive even deeper into the format.

    [07:02 - 07:02] I will see you there.