Developing an App Clip is not difficult! We will develop a tutorial right away

Author|He Shiyou, Peng Quanhua

At the WWDC conference on June 23, 2020, Apple released App Clips.

App Clip (official translation: Light App; folk translation: "Apple" applet) is a lightweight version of the main app, designed to provide users with a fast and convenient experience in specific scenarios.

If you pass by a coffee shop on your way to work and want to buy a cup of coffee, but find that there are many people queuing up to place orders and pay, at this moment you only need to use the iPhone's built-in scanning tool to scan the App Clip QR code or NFC tag of the coffee shop, and the You can buy a cup of coffee without downloading and installing the coffee shop app.


*Image source: Apple official website*

Does this application scenario sound similar to WeChat applets?

Yes, so we conducted a comparison and practical operation of App Clips and WeChat Mini Programs immediately after the release of App Clips ( click here to read the details ).

We found that both App Clips and WeChat Mini Programs exist to solve the same problem. But in terms of development, there are also differences in the direction of App Clips and WeChat Mini Programs.

The WeChat applet is from 0 to 0.1 and then to 1.0. In order to provide a service, the developer develops a small program from scratch, and the user leaves after using it, and the experience is great. App Clips is from 1.0 to 0.1, which is an improvement to the existing app, so there will be less trouble in development.

Below, we will describe several important features of App Clip in detail, and take App Clip demo as an example to talk about the development. Whether you are based on actual business needs, or the needs of learning and exploring new things, as long as you have a certain development foundation, you can easily create an App Clip through this tutorial.

Technical Limitations of App Clips

App Clips are limited to specific scenarios, that is, to complete a task as quickly as possible, just use it and go away. You can regard it as the core function application of the main app, and complex tasks should be completed in the corresponding main app, so some functions are prohibited from being used in the App Clip.

The installation package size is within 10M

When the App Clip Card pops up, the App Clip will be downloaded immediately, and the size limit of the installation package ensures the user experience—when the user opens the App Clip, there is a high probability that it has already been downloaded.

The specified Framework cannot be used

Assets Library, CallKit, CareKit, CloudKit, Contacts, Contacts UI, Core Motion, File Provider, File Provider UI, HealthKit, HomeKit, Media, Player, Messages, Message UI, PhotoKit, ResearchKit, SensorKit, Speech

The above Framework cannot be used in AppClip. If it is used, it will not report an error when compiling, but will report an error or return an incorrect result at runtime.

Operations related to user privacy

  1. User information cannot be tracked, and the user's unique identifier cannot be obtained through identifierForVendor.
  2. The user's location cannot be obtained continuously. Every time the location is used, user authorization is required. At 4:00 am the next day, the authorization will be automatically turned off. When the location is used again, the user needs to re-authorize.
  3. App Clip is only allowed to communicate with its corresponding main app, not with other apps, which makes functions such as WeChat login, sharing and payment unusable in App Clip.
  4. Apple music, multimedia, address book, files, sports health, photo album and other data cannot be accessed.

other complex tasks

  1. Background activity: network requests, location updates, etc.
  2. bluetooth connection
  3. App extensions
  4. URL schemes
  5. In-app purchases (different from Apple Pay, Apple Pay can be used in App Clip)

Push notifications for App Clips

The inability of WeChat applets to reach users through Push has worried developers. The system-level applications launched by mobile phone manufacturers can give developers more confidence here. Whether it is Apple's App Clips or the quick application of the domestic mobile phone ecosystem, the message push capability of the service is an important ability to attract developers.

The application of message push in App Clip is divided into two scenarios: short-term push and long-term push. ( View official documentation )

Push in a short time

After the user starts the App Clip, he can receive the push message within 8 hours. For example, the user exits the App Clip after purchasing a cup of coffee in the App Clip. When the coffee is ready, the user will receive a "coffee is ready" push. In this way, you only need to add NSAppClip Key in the Info.plist property file, and set NSAppClipRequestEphemeralUserNotification to true to obtain the permission of message push by default.

Push for a long time

After the user completes a task in the App Clip, it may take several days to receive the push. For example, a user rents a car in App Clip for a period of 3 days. After the lease expires, the user will receive a push message saying "it's time to return the car". This method is the same as the message push of ordinary apps, and requires the user's push authorization.

Create an App Clip with MinCloud

Next, we will demonstrate how to use Zhizhiyun MinCloud to quickly create an App Clip for dynamic data services. This Clip mainly displays a product list, click on a product to jump to the product details page. By integrating MinCloud to obtain product information from Zhizhiyun, and finally generate a QR code for the Clip, users only need to scan the QR code with the scanning tool of iOS 14 to jump to the Clip.

Create App Clip Target

Create an App Clip Target in the existing SugarDemo project and name it SugarClip.

At this time, there is a SugarClip directory in the project directory, and then we can implement the App Clip here.

Import MinCloud

Integrate MinCloud through CocoaPods, open the Podfile file, and add the following content:

platform :ios, '11.0'
 
target 'SugarClip' do
 use_frameworks!
 
 pod 'MinCloud', :git => 'https://github.com/ifanrx/hydrogen-ios-sdk.git'
 pod 'Moya', '~> 13.0'
 pod 'SnapKit'
 pod 'Kingfisher'
 
end
 
target 'SugarDemo' do
 use_frameworks!
 
 pod 'MinCloud',:git => 'https://github.com/ifanrx/hydrogen-ios-sdk.git'
 pod 'SnapKit'
 pod 'Kingfisher'
 
end

After adding, execute pod install to install.

After installing MinCloud, import MinCloud into the project, open the AppDelegate.swift file of Sugar Clip, add import MinCloud at the top of the file, and add in the application(_: didFinishLaunchingWithOptions:) method:

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
 // Override point for customization after application launch.
 
 BaaS.register(clientID: "fdc4feb5403a985fe681") // 注册 clientid
 BaaS.isDebug = true // 是否打印日志
 return true
}

Get product data

Product structure

First create a Product structure to represent product information.

struct Product: Decodable {
 public var id: String                  // 产品 id
 public var name: String?               // 产品名称
 public var participantCount: Int?      // 参与讨论人数
 public var coverImage: String?         // 封面图
 public var rating: Double?             // 产品评分
 public var brief: String?              // 产品简介
 public var description: String?        // 产品描述
}

get product list

func loadProductList() {
 let table = Table(tableId: "105766")
 table.find { [weak self] (recordList, error) in
 if let list: List<Product> = recordList?.listInfo.decoded() {
 self?.products = list.objects
 self?.tableView.reloadData() // 刷新产品列表
 }
 }
}

Table corresponds to the table structure of MinCloud, and the corresponding table data can be operated through the table id. Use the find operation to get all the product records in the product table, and after getting the product records, decode them into List objects.

Get product details

func loadProduct() {
 let table = Table(tableId: "105766")
 table.get(productId) { [weak self] (record, error) in
 if let product: Product = record?.recordInfo.decoded() {
 self?.product = product
 self?.displaySubviews() // 展示产品详细信息
 }
 }
}

Use the get operation to specify the id of the product to get all the information of the product. After getting the product record, decode it into a Product object.

product page

View controls such as ProductCell, RatingLabel, and BriefView are created in the project to display information such as product list items, product ratings, and product briefs, respectively. And these controls can be reused in the main App and App Clip. Therefore, the components that need to be reused are created in the SugarDemo directory, and SugarDemo and SugarClip are checked in the Target Membership of the corresponding file to be reused.

Wake App Clip

After developing the App Clip, we can click on the Smart app Banner, scan the QR code or NFC tag, click on Siri to get location-based suggestions, text messages, etc. to wake up (invacation) the App Clip.

Before the AppClip can be woken up, you need to configure Launch Experience, that is, configure a URL and App Clip Card information for the App Clip. During the development stage, you can configure Local Experience directly or configure it on testflight. When an App Clip is ready to be published, it needs to be configured on app store connect.

This article mainly introduces the Local Experience method. For other methods, please refer to the Apple development documentation .

  1. First run SugarClip on the phone through Xcode.
  2. Turn on the phone [Settings] - [Developer] - [Local Experience] - [Register Local Experience]

  • Fill in URL PREFIX, and opening any URL prefixed with URL PREFIX will be treated as opening an App Clip.
  • Fill in the Clip Bundle Id.
  • Fill in the Title and Subtitle, select a picture, and the information will be displayed on the App Clip Card.
  1. The URL PREFIX of step 2 is encoded into a QR code (https://www.qr-code-generator.com/)

  1. Scan it with the QR code scanner on the control panel, and the App Clip Card will pop up.

  1. Click View to enter the App Clip.

So far, we have completed the development of an App Clip.

Summarize

Development Difficulty:

App Clip is oriented to iOS developers in terms of technology selection. For iOS developers, developing App Clip can be as simple as modifying some configurations before publishing. And if a small program developer wants to enter the pit, there are two ways to go:

  1. Learn iOS native development;
  2. Wait for the cross-end framework to adapt to the App Clip.

challenge:

At this stage, App Clip only allows the use of Sign in with Apple and Apple Pay, and cannot integrate third-party capabilities that are mainstream in offline service scenarios such as WeChat login and WeChat payment. This is a challenge for those who want to use App Clip to optimize the offline service experience. After all, not many people in China have opened Apple Pay. I hope the App Clip team will come up with a better solution soon.

dividend:

The app clip experience is lightweight and excellent. Developers can make a trial version of the main app through the app clip, so that users can experience it quickly, so as to reduce the installation threshold for users and improve the overall conversion rate.

Through this article, I hope you can also develop an App Clip efficiently.

Related Reading

Guess you like

Origin blog.csdn.net/cloud_minapp/article/details/108795055