It’s not difficult to develop an app clip! We’re going to develop the tutorial right away

Time:2020-11-20

Authors he Shiyou and Peng Quanhua

In the WWDC Conference on June 23, 2020, Apple released app clips.

App clip (official translation: light app; folk translation: “Apple App”) is a lightweight version of the main app, which aims to provide users with a quick 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 you find that there are a lot of people queuing up to pay for a cup of coffee. At this moment, you only need to scan the app clip QR code or NFC tag of the coffee shop with the code scanning tool provided by the iPhone, and you can buy a cup of coffee without downloading and installing the app of the coffee shop.

It's not difficult to develop an app clip! We're going to develop the tutorial right away
Photo source: Apple official website

Does this application scenario sound like a wechat app?

Yes, so we immediately compared app clips with wechat applet after the release of APP clips (click here to read the details).

We found that app clips and wechat applets exist to solve the same problem. However, in terms of development, APP clips and wechat applets also differ in direction.

Wechat applet is 0 to 0.1 to 1.0. In order to provide a service, developers develop small programs from scratch. Users can run out of it, and the experience is great. App clips is from 1.0 to 0.1, which is an improvement on the existing app, so there will be less trouble in the development.

Next, we will elaborate on several important features of APP clip, and take app clip demo as an example to talk about the development. Whether you are based on the actual business needs, or the needs of learning and exploring new things, as long as you have a certain development foundation, you can easily complete an app clip through this tutorial.

Technical limitations of APP clip

App clip can only be applied to specific scenarios, that is, to complete a task as quickly as possible. You can regard it as the core function application of the main app. For complex tasks, it should be completed in the corresponding main app. Therefore, some functions are forbidden to be used in app clip.

Installation package size less than 10m

When the app Clip Card pops up, the app clip will be downloaded immediately. The size limit of the installation package ensures the user experience – when the user opens the app clip, it is highly likely that the app clip has 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 error result when running.

User privacy related operations

  1. You can’t track user information, and you can’t get a user’s unique identity through identifier for vendor.
  2. The user’s location cannot be obtained continuously. The user’s authorization needs to be requested every time the location is used. The authorization will be automatically closed at 4:00 am the next day. When the location is used again, it needs to be re authorized by the user.
  3. Only app clip is allowed to communicate with its corresponding main app, and communication with other apps is not allowed. As a result, wechat login sharing payment and other functions cannot be used in app clip.
  4. No access to Apple Music, multimedia, contacts, files, sports, health, photo albums, etc.

Other complex tasks

  1. Background activities: network request, location update, etc
  2. Bluetooth connectivity
  3. App extensions
  4. URL schemes
  5. In app purchases (different from Apple pay, apple can pay in app clip)

Message push of APP clips

Wechat apps can’t reach users through push, which has worried developers. The system level applications launched by mobile phone manufacturers can give developers more confidence in this convenience. Whether it is Apple’s app clips or domestic mobile phone ecological fast applications, the service’s message push ability is an important ability to attract developers.

The application of message push in app clip can be divided into two scenarios: short-term push and long-term push. (see official documents)

Push in a short time

Users can receive message push within 8 hours after starting app clip. For example, the user quits app clip after purchasing a cup of coffee. When the coffee is ready, the user will receive a “coffee is ready” push. This way, you just need to Info.plist By adding nsappclip key to the property file and setting nsappclipprequestephemeralusernotification to true, the permission to push messages can be obtained by default.

Push for a long time

After the user completes a task in app clip, it may take a few days for the user to receive the push. For example, if a user rents a car in app clip for three days, the user will receive a push of “it’s time to return the car” when it expires. This method is the same as the message push of ordinary app, which requires the user’s push authorization.

Create an app clip using mincloud

Next, we will demonstrate how to quickly create an app clip for dynamic data services using the know cloud mincloud. The clip mainly displays a list of products. Click the product to jump to the product details page. Through the integration of mincloud, the product information is obtained from the knowing cloud, and finally a QR code is generated for the clip. Users only need to scan the QR code with the code scanning tool of IOS 14 to jump to clip.

Create app clip target

Create an app clip target in the existing sugardemo project and name it sugarclip.

It's not difficult to develop an app clip! We're going to develop the tutorial right away

It's not difficult to develop an app clip! We're going to develop the tutorial right away

At this time, a sugarclip directory is added to the project directory. Next, we can implement app clip here.

It's not difficult to develop an app clip! We're going to develop the tutorial right away

Import mincloud

Integrate mincloud through cocoapods, open the podfile file, and add the following contents:

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, perform the pod install installation.

After installing mincloud, import mincloud into the project and open the AppDelegate.swift File, add import mincloud at the top of the file, and in application (_ : didfinishlaunchingwithoptions:) method

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
 // Override point for customization after application launch.
 
 BaaS.register (ClientID: "fdc4feb5403a985fe681") // register ClientID
 BaaS.isDebug  =True // print log
 return true
}

Get product data

Product structure

First, create a product structure to represent product information.

struct Product: Decodable {
 Public var ID: string // product ID
 Public var Name: string? // product name
 Public var participantcount: int? // number of participants
 Public var coverimage: string? // cover map
 Public var rating: double? // product rating
 Public var brief: string? // product introduction
 Public var Description: string? // product description
}

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 () // refresh product list
 }
 }
}

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 product records in the product table. After getting the product records, they are decoded into a list object.

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() // display product details
 }
 }
}

Use the get operation to specify the ID of the product to obtain all the information of the product. After obtaining the product record, it is decoded into a product object.

Product page

In the project, the view controls such as productcell, rating label and briefview are created to display the information of product list item, product rating and product introduction respectively. These controls can be reused in the main app and app clip. Therefore, create the components to be reused in the sugardemo directory, and check sugardemo and sugarclip in the corresponding file target membership to reuse.

It's not difficult to develop an app clip! We're going to develop the tutorial right away

Wake up app clip

After developing app clip, we can click smart app banner, scan QR code or NFC tag, click Siri to get location-based suggestions, and SMS to wake up app clip.

Before appclip can be woken up, launch experience needs to be configured, that is to configure a URL and app clip card information for app clip. In the development phase, you can configure local experience directly or on testlight. When app clip is ready to be published, it needs to be configured on the app store connect.

This paper mainly introduces the local experience mode. Other methods can refer to Apple development documents.

  1. First, run sugarclip on your phone through Xcode.
  2. Open the mobile phone settings developer local experience register local experience

It's not difficult to develop an app clip! We're going to develop the tutorial right away

  • Fill in the URL prefix. Opening any URL prefixed with URL prefix will be treated as opening app clip.
  • Fill in clip bundle ID.
  • Fill in title and subtitle, select an image, and these information will be displayed on app clip card.
  1. The URL prefix of step 2 is encoded into a QR code( https://www.qr-code-generator…

It's not difficult to develop an app clip! We're going to develop the tutorial right away

  1. Use the QR code scanner in the control panel to scan, and the app Clip Card will pop up.

It's not difficult to develop an app clip! We're going to develop the tutorial right away

  1. Click view to enter app clip.

It's not difficult to develop an app clip! We're going to develop the tutorial right away

So far, we have completed the development of an app clip.

summary

Development difficulty:

App clip is oriented to IOS developers in terms of technology selection. For IOS developers, the development of APP clip can be as simple as modifying the configuration point and then publishing. If small program developers want to enter the hole, there are two ways to go:

  1. Learn IOS native development;
  2. Wait for the cross end framework to adapt to app clip.

Challenge:

At this stage, APP clip only allows sign in with apple login and apple pay Apple payment, and cannot integrate the mainstream third-party capabilities of offline service scenarios such as wechat login and wechat payment. This is a challenge for people 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 launch a better solution as soon as possible.

Bonus:

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

Through this article, I hope you can effectively develop an app clip.

Related reading

  • What is the difference between app clips and wechat applets? We did a hands-on exercise
  • After the IOS 14 update, we immediately experienced Apple’s “applets”!