How to Create an App Clip in Xcode
We are proud to announce that we have launched our first App Clip as part of our Sans Hands™ experience and wanted to share our findings with you in hope that it speeds up your development or aids you in understand what it takes. To find out more about what it takes to generate a QR Code or NFC Tag for your App Clip, click the button linking to the relevant article below.
What is an App Clip?
You can have many App Clips for a single app.
App Clip's can be activated in many ways.
App Clips are a great way for users to quickly access and experience what your app has to offer. An App Clip is a small part of your app that’s discoverable at the moment it’s needed. App Clips are fast and lightweight so a user can open them quickly. Whether they’re ordering take-out from a restaurant, renting a scooter, or setting up a new connected appliance for the first time, users will be able to start and finish an experience from your app in seconds. And when they’re done, you can offer the opportunity to download your full app from the App Store.
- Apple Inc, 2021.
Ultimately, we believe that App Clips create a new paradigm of opportunities for Marketers and Creators by allowing them to offer customers functionality without having to go through the App Store. For example:
- You're at a Starbucks and you want to order a coffee. Don't want to download the app for just one coffee? No problem. Scan the QR Code or Tap the NFC on the coffee that you want and press pay.
- You're at a Train Station and you need to buy a train ticket ? Tap the NFC of the station you want to go to and press pay.
- You're Nike and you're about to drop the latest Sneaker and want an exclusive, never done before way to sell your shoes? Create a map location where people can access an Sneakers App Clip to just that sneaker and turn the drop into a scavenger hunt.
- You're a restaurant and want to offer a seamless, contactless delivery of your food to your customer. You package your restaurant App as an App Clip and replace your menu QR Code with the App Clip.
- You're a retailer and want to offer Virtual Try On of your products to customers. You create an app clip which based on the QR Code on the product opens up a different product to try on. i.e. here'es this lipstick or there's that shoe.
Finally, it's worth noting that an App can offer multiple app clips, which can be activated in different ways!
How do you create it?
App Clips are created via Xcode, which create a target for the project and do the rest of your magic for you. When you archive the app, XCode will package your iOS app with your App Clip, and will upload the experiences as a united package. Let's walk through what that looks like.
Step One: Create your Target
Step Two: Make that target an App Clip
Step Three: Give it a Name
Step Four: Create the Schema
Step Five: Update your Targets
The beauty about App Clips is they can share code, making it one codebase with many utilities.
Step 6: Create your App Clip Environment
Please note that this step is only needed if you need to seperate code that requires libraries (Firebase) that aren't needed in libraries or targets that you do not want to include in your App Clip.
Start by navigating to your App Clip target’s build settings and creating a new value for the Active Compilation Condition build setting (for example, APPCLIP). Then, add a check in your shared code where needed, to exclude code you don’t want to use in your App Clip. - Apple Inc, 2021.
Step 7: Create your Pod File
Please note that this step is only needed if you want to include CocoaPods in your App Clip.
Run Pod Update.
Step 8: Embed Frameworks
Please note that this step is only needed if you require to embed frameworks.
Next Steps: Make the App Clip available for download
Now that you have setup your App Clip, you must make it available to be accessed by your customers.
There are many ways to make an app clip accessible to your customers but the most common are:
- App Clip QR Code
- Website Smart App Banner
To learn how to make the App Clip accessible as a QR code or a Website Smart App Banner, follow the tutorials linked below.
Any Questions?
We are actively looking for feedback on how to improve this resource to help developers make App Clips better, faster. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.