FusionNFC: Implement NFC for Cross-Platform Swift Mobile Apps
Tags: swift, android, ios, scade
Published: 2022-10-21 15:48:54

---
title: FusionNFC: Implement NFC for Cross-Platform Swift Mobile Apps
published: true
description: Learn how to read & write NFC tags, by writing minimal swift code for Android & iOS!
tags: swift, android, ios, scade
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iz1bpmorog53gorx7pdf.png
# Use a ratio of 100:42 for best results.
# published_at: 2022-10-21 15:44 +0000
---




## Introduction

Hi everyone 🙋🏻‍♂️! My name is Vedant, and it is time to explore another Fusion library! We use NFC tags for various daily use cases like making payments, sending SMS and virtual business cards, etc. If we want to develop an app for both platforms iOS and Android which will use the NFC feature then it seems almost impossible to use the same codebase at all without bothering about the configuration of each platform. Android and iOS NFC implementations differ a lot in terms of configuration so we will require to take care of individual edge cases. 

[FusionNFC](https://github.com/scade-platform/FusionNFC) is part of the Fusion project and provides you with one Swift API for developing NFC applications for both Android and iOS. So It becomes easy to use core NFC features seamlessly without bothering about the edge cases for Android. In this article, we will read and write an NFC tag by building a cross-platform native Swift app using SCADE that uses just a few lines of Swift code✌🏼.

### How does FusionNFC work

FusionNFC wraps the NFC-relevant Android NDK APIs and iOS APIs and presents the NFC functionality as one easy-to-use API. FusionNFC is designed so that you don’t have to deal with iOS and Android os specific issues.

### RFID & NFC

Radio Frequency Identification (RFID) is the general term for exchanging data using radio frequency, both actively or passively, using a variety of radio frequencies that allow communication across different distances. More specific to mobile apps, NFC stands for Near Field Communication and is a wireless technology that allows the exchange of data between your Android or iOS phone and the RFID device/chip using radio frequencies across short distances, usually centimeters.

## Prerequisite


If you haven’t installed the SCADE IDE, [download](https://www.scade.io/download/) the SCADE IDE and [install](https://docs.scade.io/docs/installation) it on your macOS system. Please make sure that the XCode version is less than or equal to 13.0 and the Swift version is less than or equal to 5.4, otherwise, it will not be able to run on the Android platform.

Please also make sure you have the NFC tags ready with you and an NFC-enabled physical device (either an Android phone or an iPhone).

## Integrate FusionNFC Library

SCADE provides users with all the necessary APIs including Swift foundation and objective C libs that are required to integrate the FusionNFC library. Let’s start by creating a new project,  <code>File -> New -> New Project<strong>. </strong></code>Then select the SCADE option, enter the name of the project, and click Create. We are ready to integrate the Fusion library into the SCADE app.

Now navigate to the `Package.swift` file and add the FusionNFC git URL as shown in  the below SPM dependency:


```swift
// swift-tools-version:5.3

import Foundation
import PackageDescription

let SCADE_SDK = ProcessInfo.processInfo.environment["SCADE_SDK"] ?? ""

let package = Package(
  name: "NFCTool",
  platforms: [
    .macOS(.v10_14), .iOS(.v13),
  ],
  products: [
    .library(
      name: "NFCTool",
      type: .static,
      targets: [
        "NFCTool"
      ]
    )
  ],
  dependencies: [
    .package(
      name: "FusionNFC", url: "https://github.com/scade-platform/FusionNFC.git", .branch("main"))
  ],
  targets: [
    .target(
      name: "NFCTool",
      dependencies: [
        .product(name: "FusionNFC", package: "FusionNFC")
      ],
      exclude: ["main.page"],
      swiftSettings: [
        .unsafeFlags(["-F", SCADE_SDK], .when(platforms: [.macOS, .iOS])),
        .unsafeFlags(["-I", "\(SCADE_SDK)/include"], .when(platforms: [.android])),
      ]
    )
  ]
)
```


## Design the App

We need to create a basic container to accommodate pages for reading and writing NFC tags. So navigate to `main.page` file and drag and drop the following UI widgets.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ms6rldjuuwoovjw63qnl.png)


a.) **Toolbar**: It will contain the `readerButton` and `writerButton` which will navigate to the Reader/Writer page.

b.)** PageContainer**: It will contain the Reader/Writer page content in the fragment area.

Now we will create two pages namely the Reader and Writer page. 

**Reader Page:**



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eot60xtc010oy43ley18.png)

a.) **Label1**: The `urlLabel` will be used to display the URL stored in the memory of the NFC tag.

b.) **Label2**: The `descriptionLabel` will be used to display the description stored in the memory of the NFC tag.

c.) **Button**: Upon the click of the `readButton`, it will read the data in the NFC tag.

### Writer Page:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/znn8siqhjuv236mnwovq.png)

a.)  **TextBox1**: The `urlTextBox` will be used to edit the URL which will be stored in the memory of the NFC tag.

b.) **TextBox2**: The `descriptionTextBox` will be used to edit the description which will be stored in the memory of the NFC tag.

c.) **Button** : Upon the click of the `writeButton`, it will write the data to the NFC tag.

## Let’s dive into the Code

We have created the layout file above to declare the pages and the widgets that we will use. 

**Main Page:**

We will create the references for the `ReaderPageAdapter` and `WriterPageAdapter` so that these pages will be contained in the `pageContainer`.


```swift
  let readerPage: ReaderPageAdapter = ReaderPageAdapter()
  let writerPage: WriterPageAdapter = WriterPageAdapter()
  var pageContainer: SCDLatticePageContainer?
```


Now let’s include these snippets in the load method of  `main.page.swift` :


```swift
    self.readerPage.load("reader.page")
    self.writerPage.load("writer.page")

    self.readerButton.onClick { _ in self.showPage(self.readerPage) }
    self.writerButton.onClick { _ in self.showPage(self.writerPage) }

    // Now,we get a reference to the page container
    self.pageContainer = self.page!.getWidgetByName("pageContainer1") as? SCDLatticePageContainer

    // Finally, we use the page container to show page1 (ReaderPage)
    self.reader.show(view: self.pageContainer)
```



```swift
  func showPage(_ page: SCDLatticePageAdapter) {
    page.show(view: self.pageContainer)
  }
```


**Write NFC Page:**

Let’s declare the `nfcManager` variable and instantiate it to use the core NFC features.  On the click of the `writeButton` we will declare the `write()` method to write the URL and description to the NFC tags.


```swift
  var nfcManager: NFCManager?
```


Now inside the `load()` method, we will attach the `onClick()` listener method to call the `write()` method. Also, for the Android-specific code, we need to disable the foreground dispatcher for the NFC.


```swift
   override func load(_ path: String) {
    super.load(path)
    // initialize the NFCManager
    nfcManager = NFCManager(alertMessage: "Hold your iPhone near an NFC tag.")

    // connect the button action to write func
    self.writeButton.onClick { _ in
      print("clicked write button")
      self.write()
    }

    // Below code is only for Android
    self.page!.onExit.append(
      SCDWidgetsExitEventHandler { _ in
        self.nfcManager?.disableForegroundDispatch()
      })
  }
```


We will declare the `NFCURIRecord` and `NFCTextRecord` variables. Then assign the text values to these variables which will be used to create the `NFCMessage` object. It accepts the `uriRecord` and `textRecord` as input parameters. Finally, we will write this `nfcMessage` object to the NFC tag using `writeTag()` method.

 


```swift
 // write func
 func write() {

    // prepare the NFCURIRecord from the URL
    var uriRecord: NFCURIRecord?
    if let url = URL(string: urlTextBox.text) {
      uriRecord = NFCURIRecord(url: url)
    }

    // prepare the NFCTextRecord from the String and Locale
    let textRecord = NFCTextRecord(
      string: descriptionTextBox.text, locale: Locale(identifier: "en"))

    // initialize the NFCMessage with NFCURIRecord and NFCTextRecord
    let nfcMessage = NFCMessage(uriRecord: uriRecord, textRecord: textRecord)

    // initialize the NFCMessage
    nfcManager = NFCManager(alertMessage: "Hold your iPhone near an NFC tag.")

    // write NFC Tag
    nfcManager?.writeTag(nfcMessage)
  }
```


**Read NFC Page:**

Similarly to the write NFC page, we will declare the `nfcManager` variable and instantiate it to use the core NFC features.  On the click of the `readButton` we will declare the `read()` method to read the URL and description stored in the memory of the  NFC tags. 


```swift
import FusionNFC
var nfcManager: NFCManager?  
```



```swift
  override func load(_ path: String) {
    	super.load(path)
    	// initialize the NFCManager
		nfcManager = NFCManager(alertMessage: "Hold your iPhone near an NFC tag.")

		// connect the button action to read func
        self.readButton.onClick{_ in 
        print("clicked read ubtton")
        self.read()}

        // Below code is only for Android
	    self.page!.onExit.append(SCDWidgetsExitEventHandler{_ in
	    	self.nfcManager?.disableForegroundDispatch()
        })     
  	}
```


Let’s declare the `read()` NFC function which will internally use the `readTag()` method by `nfcManager`. The `message` object is returned which contains the `textRecord` and `uriRecord` and we will display the data using the `urlLabel` and `descriptionLabel`.


```swift
  // read func
  func read() {
    // read NFC Tag
    nfcManager?.readTag { message in

      // get url and text from NFCMessage
      guard let message = message else { return }
      if let uriRecord = message.uriRecord {
        self.urlLabel.text = "URL: \(uriRecord.url.absoluteString)"
     }

      if let textRecord = message.textRecord {
        self.descriptionLabel.text = "Description: \(textRecord.string)"
      }
    }
  }
```


**Test the write/read feature for NFC tags:**

Let’s test the write feature of the SCADE app that we have developed till now. We will either require an Android or iOS device. Navigate to the `build.yaml` file and add the build settings for each environment. For iOS declare the provisioning profile and the certificate as shown below:


```yaml
  sign:
    provision-profile: /Users/vj/Desktop/certs/vj.mobileprovision
    certificate: /Users/vj/Desktop/certs/vj.p12

  plist:
    - key: CFBundleShortVersionString
      type: string  # string, bool, int, list or dict
      value: 1.0
    - key: CFBundleVersion
      type: string
      value: 1
    - key: NSLocationWhenInUseUsageDescription
      type: string
      value:
    - key: NSCameraUsageDescription
      type: string
      value: Take pictures from camera
    - key: NSPhotoLibraryUsageDescription
      type: string
      value: Choose a photo from your library
    - key: NFCReaderUsageDescription
      type: string
      value: This app read and write tags
    - key: UIRequiredDeviceCapabilities
      type: list
      value: ["armv7", "nfc"]         
```


For the Android build settings, create one file `AndroidManifest.xml`, and add the below snippet to the `build.yaml` under the Android settings.


```yaml
android:
  name: NFCTool
  id: com.scadefusion.nfc
  version-name: 1.0.0
  version-code: 1
  build-type: Debug
  key-store-properties:
  google-api-key:
  manifest-file: AndroidManifest.xml
  permissions: ["NFC"]
```


Now navigate to the `AndroidManifest.xml` file and add the below snippet to declare the NFC permissions and related settings.


```xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.scade.rendersvg"
    android:versionCode="1"
    android:versionName="1.0.0" >

    <uses-sdk
        android:minSdkVersion="14"
        android:targetSdkVersion="28" />

    <uses-permission android:name="android.permission.NFC" />

    <uses-feature android:glEsVersion="0x00020000"/>
    <uses-feature android:name="android.hardware.nfc" android:required="true" />

    <application
        android:name="com.scade.phoenix.PhoenixApplication"
        android:allowBackup="false"
        android:icon="@drawable/ic_launcher"
        android:label="RenderSVG"
        android:theme="@android:style/Theme.Black.NoTitleBar">
        <activity
            android:name="com.scade.phoenix.MainActivity"
            android:label="RenderSVG"
            android:windowSoftInputMode="adjustResize|stateHidden">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>


        </activity>
        
        <receiver android:name="com.FusionNFC_Android.NFCReceiver"/>

        <meta-data
            android:name="com.google.android.geo.API_KEY"
            android:value="AIzaSyAYoreZUQAcxs-Yt18zEAidBSqEuoqnKP4"/>
        <uses-library
            android:name="org.apache.http.legacy"
            android:required="false" />
    </application>

</manifest>
```


Now we are good to build the .apk or .ipa files and test the build on the Android or iOS system. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o84lqov63s8qptz2qgbe.jpeg)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mv6wav66xqhdx94x59sv.jpeg)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kdv6aikyg4m98oz51x9p.jpeg)



Voila 🎉! It was super easy to build an iOS/Android app using the SCADE IDE to read/write NFC tags. Fusion SDK offers a wide variety of libraries that are easy to understand and easy to integrate for various use cases.

It is cool. We encourage you to integrate any Fusion SDKs and try them out yourself 😊.

**Source Code**: [https://github.com/6vedant/FusionNFCTool](https://github.com/6vedant/FusionNFCTool)