How to Build a Website NFC Tag And Use Deep Linking With NFC

[00:00 - 00:14] Hello! In this lesson, we will show you how to use NFC tags to trigger deep linking. First, how to set up iOS for deep linking.

[00:15 - 00:24] Then, how to handle the deep linking event in React Native. And how to set up Android for deep linking.

[00:25 - 00:50] Before we dive into the implementation, let's first briefly talk about what exactly deep linking is. According to Wikipedia, the definition for mobile deep linking is, using a uniform resource identifier, URI, that links to a specific location within a mobile app rather than simply launching the app.

[00:51 - 01:11] For example, the URI here should open the Facebook app and jump to a screen about the user profile with this specific ID. This example URI can be divided into two parts, the FB and everything else.

[01:12 - 01:28] The FB is used to define which app should be launched, which we also call a custom scheme in this course. The later part of the URI can be considered as parameter for the launched app.

[01:29 - 01:49] You might wonder how the steep linking stuff related to NFC. When a mobile device discovers NFC tags without your app running in the foreground, it will parse the end-depth and try to launch an app based on the content in the first end-depth record.

[01:50 - 02:23] So, if you save a custom deep linking URI in our NFC tags and register our app with this custom URI, we can launch our app and carry data into it by scanning the NFC tags directly. For example, if you are working on a restaurant app, you can use an NFC tag to trigger actions such as order, checkout, or edit feedback form, etc.

[02:24 - 02:32] Your users don't need to open the app and click any button. They can simply scan the NFC tags.

[02:33 - 02:46] In our lesson here, our deep linking URI will use the bundle ID as our custom scheme and carry a message text as a parameter. It looks like this.

[02:47 - 02:58] For me, that will be com.richishia.tap.go. Now, you should be able to modify your code to write this URI into NFC tags.

[02:59 - 03:36] But to save you some time, let's again use NFC tools to write our deep linking URI into NFC tags. [silence] Let's go to the linking page on ReNatives website.

[03:37 - 03:56] [silence] There is a section called "Enable in Deep Links" which mentions you need to add some code into your app delegate.m. Let's do it now.

[03:57 - 04:11] [silence] In your Xcode, find appdelegate.m. First, add the import statement to import the RCT linking manager.

[04:12 - 04:28] Then, copy the open URL delegation method from the website and paste it into your code. Please make sure you add this line below the "Add Implementation App Delegate" line.

[04:29 - 04:45] [silence] In Xcode, we still need to register our custom URL scheme for this project. First, copy our bundle ID and navigate to info.pilist.

[04:46 - 04:50] There is a section called URL types. Add the button.

[04:51 - 04:59] Click "Add" and paste our bundle ID into Identifier and URL schemes. That's it.

[05:00 - 05:14] After the setup, the native site can receive the linking event from iOS. But our JavaScript site doesn't do anything yet.

[05:15 - 05:20] Let's do it now. First, import linking from "Rear Native".

[05:21 - 05:36] Then, create a new use effect hook without any dependencies. In this hook, we define a function called "handle URL" that will be called when we receive a deep link.

[05:37 - 05:45] For now, we simply do console.worn. Then, we call linking.getInitialURL.

[05:46 - 06:03] This API returns a promise, which resolves to an initial URL launching our app. It might be no if our app is launched by the user clicking the app icon directly.

[06:04 - 06:15] Next, we call linking.addEventListener. This API is used to handle the URL event when our app is already launched.

[06:16 - 06:30] So, it is different from the previous GetInitialURL API. Finally, return a "ClickUp" function to remove all the listeners.

[06:31 - 06:47] It's time to test it. Let's create a dedicated screen to display the message from a deep link.

[06:48 - 07:01] This screen will receive routing parameters called "msg". And we simply show the MSG in the center of the screen.

[07:02 - 07:27] Then, hook up the deep linking screen in the app navigator like before. The last step is, of course, to actually navigate to deep linking screen when we receive a deep link.

[07:28 - 07:40] Go back to our home screen and in the handleURL function. Call navigation.navigate.

[07:41 - 08:02] Pause the MSG from the deep link and pass it as the second parameter. Let's test it again.

[08:03 - 08:13] It works. However, we noticed one thing. In this test, our app is launched by deep link.

[08:14 - 08:37] So, we are only testing the flow from the linking.getInitialURL function. So, we still need to verify the linking.getEvenListener function by keeping the app open and tapping the tag again.

[08:38 - 08:54] Awesome! It still works. Let's also check the linking.openURL can navigate to the correct screen.

[08:55 - 09:04] For Android, the setup process can be divided into two steps. The first step is to review your package name.

[09:05 - 09:20] The second is then add some intent filters into your androidmanifest.xml. The reason for the first step is because we want to use the same Android package name as the iOS bundle ID.

[09:21 - 09:30] As well as the deep linking custom scheme. There are several places to look into. So, let's check them one by one.

[09:31 - 09:44] The first is the Android app build.gradle. The next is the Androidmanifest.

[09:45 - 09:54] Then, you also need to make sure the folder structure for your Java code. This should be the same as your package name.

[09:55 - 10:11] It might seem a little strange, but it's required for the Java language. Also, for all files in the package, normally, menapplication.java and men activity.java.

[10:12 - 10:32] You also need to make sure that the top line declares the same package as its location. Technically speaking, the above steps aren't really related to a deep linking setup.

[10:33 - 10:51] If you choose to use the same package name created by COI, then you can basically skip those checks. But they will be useful to you when you need to change the Android package name some day.

[10:52 - 11:09] It's to add some intent filters into your Androidmanifest. The first one has action name, n-deaf-discovered.

[11:10 - 11:18] This intent is for NFC only. What's the Android system scan an n-deaf message?

[11:19 - 11:37] With TNF well-known and RTD your eye, it will fire an n-deaf-discovered intent, with the custom scheme as the data. The second one is for general purpose deep linking.

[11:38 - 12:03] For example, when an ATAC with H-ReF is clicked in a browser or in our cases, when we call linking.open URL in TechDeter screen. Now let's test it on a real Android device.

[12:04 - 12:28] Linking.getInitialURLWorks Linking.addEventListenerWorks Linking.openURL also works. Linking.openURLWorks