Technical details: how to develop an iOS applet and trigger it via NFC tag

Nowadays, businesses have a new way of interacting with customers-App Clip (Apple applet) and NFC tags. This feature allows users to run small programs on the mobile phone operating system without having to download and install software from the application store. Mini programs just pop up information on the screen, and this feature creates opportunities for developing new customer relationships. For example, coffee shops can provide more useful point cards, and retailers can make virtual wallets more useful. Merchants can trigger Mini Programs in a variety of ways, one of which is an NFC tag pointing to a certain URL address. When the user’s iPhone is close to the tag, the phone will automatically find the URL and start the applet.

Technical details: how to develop an iOS applet and trigger it via NFC tag

Nowadays, businesses have a new way of interacting with customers-App Clip (Apple applet) and NFC tags. This feature allows users to run small programs on the mobile phone operating system without having to download and install software from the application store. Mini programs just pop up information on the screen, and this feature creates opportunities for developing new customer relationships. For example, coffee shops can provide more useful point cards, and retailers can make virtual wallets more useful. Merchants can trigger Mini Programs in a variety of ways, one of which is an NFC tag pointing to a certain URL address. When the user’s iPhone is close to the tag, the phone will automatically find the URL and start the applet. The principle is simple and the cost is also low. Let’s discuss what businesses need to use small programs.

What is App Clip?

App Clip is called “lightweight mobile phone application software”. The amount of binary code before compression of this small software is less than 10 MB, and it mainly provides a small part of the functions of the application. For example, a complete application of a coffee company can provide a list of coffee shops, recent promotions, sales rankings, and point cards, but the App Clip applet will only Display point cards. These features ensure that users get an instant experience, even if the mobile phone network speed is very low, users can get a real-time experience. Users can also get a simple and quick experience. Starting the applet through the mobile phone close to the NFC tag can reduce many obstacles to use and open the door to digital interaction for new customers who are not familiar with mobile applications. Let’s take a look at the mini-program development experience of ST’s iOS app developer Vincent Latorre.

App Clip: Client or NFC configuration

1. Prepare ST25-TAG-BAG-U kit

Technical details: how to develop an iOS applet and trigger it via NFC tag

ST25-TAG-BAG-U label kit contains: 1. ST25TV02K, 2. ST25TA02KB, 3. ST25TV02K HC, 4. ST25TV512, 5. ST25TA64K

In the entire configuration process, the easiest link is to create an NFC tag and write the URL pointing to the applet in the tag. The process is very simple, as simple as creating a working demo software without writing a single line of code. For demonstration purposes, we will use two ST25TV02K NFC tags, one of which will be used to store the URL address of the applet, and the other will be used as a proof of concept to explain the functional containers that can be stored or cached in the operating system.

If you want to develop a demo based on the App Clip applet, the second tab is not needed, and developers can just use the first tab. However, we would like to take this opportunity to explain how to write storage blocks and provide concrete evidence to prove that ST’s applets are indeed working, instead of showing everyone a Display screen. These two tags are small round tags in the ST25-TAG-BAG-U kit. Users must download our NFC Tap app from the app store to read and write tags.

Write URL

We took out the first ST25TV02K tag. The following demonstration assumes that the label is a blank label. The first step is to select Read Tag on the main screen, and then move the phone close to the tag, and ST25TV02K information will appear on the screen. Next, click on the icon at the bottom right of the screen, then select the Areas Content Editor option, and finally, scan the tags with your mobile phone. If it is a blank label, a dialog box will appear, showing the memory size (for example, 256 bytes), and prompt No NDEF message.

Before writing an NDEF message, the user needs to click the dialog box prompting No NDEF message, and then a white box and blue arrow will appear on the screen. Swipe the white box to the left, and a menu will pop up with options for Add, Edit, Insert, and Exec. After selecting Add,
1. Select NdefUriRecord
2. Enter https://www.myst25.com/clip. Be sure to select https, otherwise the applet will not be displayed immediately.
3. Press the Validate button and write the label

Understanding function containers

The second ST25TV02K is our test tag, and we can also use it to understand the NDEF support function in the Type-5 tag. This demonstration proves that ST’s applet is reading tags, not showing a mobile phone screen. In order to increase the interest of the presentation, we follow the method in our application note on NDEF management. In fact, that article explained how to configure the ST25TV tag as an NFC Type-5 tag that supports NDEF messages. In short, it is to write a valid function container (CC) in the first storage block. That article explained the entire setup process to the user in detail. We can directly write the four-byte CC: E1 40 20 01h in the first storage block of ST25TV02K.

Write test tags

Before performing the tag writing operation, open the NFC Tap iOS app, and then
1. Select Read Tag, then scan the second ST25TV02K tag
2. Check the CC File section to make sure the label is blank. If the Magic Number is 0x00, it means that the label does not contain any information.

Now, we activate the NDEF message transmission support function, and then write a small message.

1. Select More at the bottom of the screen, and then select Areas Content Editor. At this time, the software will let you scan the label, and then find a 256-byte writable area with no content inside.
2. Click on Area 1
3. A prompt message of No NDEF Record appears on the screen. Swipe the dialog to the left, and then a menu appears, select Add.
4. Click NdefTextRecord, clear the existing text, and enter Hello World!
5. Press the Validate button, and then move the phone close to the tag to write the NDEF message.

Test App Clip

Only when the complete application software is not installed on the phone, the applet will pop up. Therefore, before scanning the first ST25TV02K tag with the URL address of the applet, if the NFC Tap software is installed, the software must be deleted. When the mobile phone detects the first label, it will display the applet card on the touch screen, asking the user whether to open the applet or download the application from the application store. After opening the applet, a simplified version of the NFC Tap application software will be displayed, in which Read NDEF is grayed out and not available, but Read Tag is available. Select the read tag option, and then scan the second ST25TV02K tag to prove that the applet reads our tag data. Scrolling down the screen, we see that the Magic Number is 0xE1, which proves that the applet is scanning the tag we just configured.

Background or application development and web server configuration

Xcode project

For developers who want to learn more, the first step is to download the source code of our iOS application (STSW-ST25IOS001). Engineers only need to open the downloaded file in the Apple IDE development environment to start researching our implementation method. The first thing to note is that the code segment that acts as an applet in an application is a specific goal. To assist developers in developing small programs, Apple provides a dedicated App Clip template. The small program can be used in conjunction with Apple Pay, and you can log in to the software with your Apple account. This new system also benefits from a special notification and geolocation system. In addition, one iOS software can have multiple App Clips. In Xcode, developers should pay attention to the Signing & Capabilities tab, and remember the team name and bundle ID.

The next step is to create an App Clip applet using the App Store Connect web interface. Here, the developer will upload a picture, which will be displayed on the iOS card, attracting users to launch the applet. Clicking on Advanced App Clip Experience will open a new menu to set the URL address that points to the applet. In addition, developers can also request the operating system to check the geographic location of the mobile device, and merchants can choose to use this feature to associate the applet with a store or a specific location.

Service-Terminal

The web server configuration is very simple. In the URL defined in Xcode and App Store Connect, such as http://www.myst25.com/clip, there must be an index.html file, and its meta tag must include the application ID and the applet bundle ID. As shown below, the body of the file can be blank, and the most important place is the meta tag itself.

The file named apple-app-site-association is the second important file that must exist in the root folder of the web server (for example /www). The file only lists the following arrays:

“Appclips”: {
“Apps”: [“TEAM_NAME.BUNDLE_ID (e.g., UL3MK8FNMR.com.st.st25ncf.clip)”],
“Paths”: [“DESTINATION (e.g., path/*)”]
}

The Links:   PM150CS1D060 CD302-4008-2G02

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *