Today, businesses have a new way to interact with customers – App Clip and NFC tags. This feature allows users to run small programs on the phone’s operating system without having to go to the app store to download and install the software. Small programs simply pop up information on the screen, a feature that creates opportunities to develop new customer relationships. For example, coffee shops could offer more useful loyalty cards, and retailers could make virtual wallets more usable. Merchants can trigger the applet in several ways, one of which is an NFC tag that points to a URL address. When the user’s iPhone is near the label, the phone automatically finds the URL and launches the applet. The principle is simple and the cost is low. Let’s take a look at what businesses need to use applets.
What is an App Clip? App Clip is described as a “lightweight version of mobile apps.” This small software contains less than 10 MB of pre-compressed binary code and mainly provides a small portion of the functionality of the application. For example, a coffee company’s full App might provide a directory of its coffee shops, recent promotions, sales rankings, and loyalty cards, but the App Clip applet only shows the loyalty cards. These features ensure an instant experience for users, even when mobile Internet speeds are low. Users can also get a simple and fast user experience. Launching the mini program through the phone near the NFC tag can reduce many barriers to use, opening the door to digital interaction for new customers who are less familiar with mobile apps. Here’s a look at ST’s iOS app developer Vincent Latorre’s experience in small program development.
App Clip: Client or NFC configuration
1. Prepare the ST25-TAG-BAG-U package
The ST25-TAG-BAG-U tag kit includes: 1.ST25TV02K, 2.ST25TA02KB, 3.ST25TV02K HC, 4.ST25TV512, 5.ST25TA64K
The easiest part of the entire configuration process is to create an NFC tag and write the URL to the applet inside the tag. The process is as simple as creating a working demo without writing a single line of code. For demonstration purposes, we will use two ST25TV02K NFC tags, one to hold the URL address of the applet, and the other 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 presentation based on the App Clip applet, the second TAB is not needed, the developer can just use the first TAB. But instead of showing you a screen, we want to take this opportunity to show you how to write blocks of memory and provide concrete evidence that ST’s applet actually works. Both of these tags are small round tags in the ST25-TAG-BAG-U kit. Users must go to the App Store and download our NFC Tap app to read and write tags.
Write URL
We take out the first ST25TV02K tag. The following demonstration assumes that the label is blank. The first step is to select Read Tag on the home screen, then hold the phone close to the tag, and the message ST25TV02K will appear on the screen. Next, click on the bottom right of the screen… Icon, then select the Areas Content Editor option, and finally, scan the label with your phone. If it is a blank label, a dialog box appears with the memory size (for example, 256 bytes) and a No NDEF message.
Before writing an NDEF message, the user needs to click the dialog box that says No NDEF message, and a white box and blue arrow appear on the screen. Swipe the white box to the left, and a menu pops up with Add, Edit, Insert, and Exec options. After selecting Add,
1. Choose NdefUriRecord
2. https://www.myst25.com/clip. Be sure to select https, otherwise the applet will not display immediately.
3. Press the Validate button and write the label
Learn about functional containers
The second ST25TV02K is our test tag, and we can also use it to learn about NDEF support in Type-5 tags. This demonstration proves that ST’s applet is reading labels, not showing a phone screen. To make the demo more interesting, we’ll follow the approach in our application notes on NDEF management. In fact, that article explained how to configure the ST25TV tag to an NFC Type-5 tag that supports NDEF messages, in short, writing a valid function container (CC) in the first block of storage. That article explains the setup process to the user, and we can write four bytes CC: E1 40 20 01h directly into the first block of storage in the ST25TV02K.
Write test tag
Before performing the tag write operation, open the NFC Tap iOS app and
1. Select Read Tag and scan the second ST25TV02K tag
2. Check the CC File section to make sure the label is blank. If the Magic Number is 0x00, the tag does not contain any information.
Now we activate the NDEF message transfer support and write a small message.
1. Select More at the bottom of the screen, then select Areas Content Editor. The software will then ask you to scan the tag and find a 256-byte writable area with no content.
2. Click Area 1
3. The No NDEF Record message appears on the screen. Swipe the dialog to the left and a menu appears, select Add.
4. Click NdefTextRecord, clear the existing text, and type Hello World!
5. Press the Validate button, then place your phone near the label and write the NDEF message.
Test the App Clip
Small programs pop up only when the full application software is not installed on the phone. Therefore, before scanning the first ST25TV02K tag with the URL address of the applet, you must remove the NFC Tap software if it is installed. When the phone detects the first TAB, it displays the applet card on the touch screen, asking the user if they want to open the applet or download the app from the app store. Opening the applet will display a stripped-down version of the NFC Tap application, where Read NDEF is gray and unavailable, 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, proving that the applet is scanning the label we just configured.
Background or application development and Web server configuration
For developers who wish to learn more, the first step is to download the source code for our iOS application (STSW-ST25IOS001). Engineers can simply open the downloaded file in the Apple IDE development environment and start working on our implementation approach. The first thing to note is that a piece of code that acts as a small program in an application is a specific target. To assist developers to develop small programs, Apple provides a dedicated App Clip template, small programs can be used with Apple Pay, and you can log in to the software with your Apple account. The 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 identifier.
The next step is to create the 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, enticing the user to launch the applet. Click the Advanced App Clip
Experience will open a new menu and set the URL to point to the applet. In addition, developers can request the operating system to check the geolocation of a mobile device, and merchants can choose to use this feature to associate the applet with a shop or a specific location.
Server side
The Web server configuration is very simple. In Xcode and the App Store Connect within defined in the URL, http://www.myst25.com/clip, for example, must have an index. The HTML file, and the meta tags must include the application ID and small application bundle ID. As shown below, the body of the file can be blank, with the most important place being 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, such as/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/*)”]
