Making an App Clip for Lagree Buddy

Along with an enamel pin!

Okay. First things first, what even is an App Clip?
An Apple App Clip enables you to preview an app without needing to download said app. See the demo below:

I have flirted with making one of these things since Apple announced them in 2020.

And it took me five years to find a legitimate reason to finally spend time on one. Why the delay? Because they’re not often seen in the real world, so what was the point? Much like my Vision Pro — womp womp womp.

But then I saw this post by Andrew Yates on Dave Verwer’s iOS Dev Weekly Newsletter and that’s when I knew I had to make one. And, it too, had to be a pin!

Why? Because a pin is very Apple-like (see my WWDC pins from WWDC24). Plus, it finally gave me a chance to make a “business card” with a slightly higher chance of not ending up in the trash can.

But why for Lagree Buddy?

Lagree Buddy is a hard app to demo to people.

You can’t tell people before class about it because they’re getting their mind right to survive 45-minutes on a Megaformer.

You can’t tell people after class either because they just spent 45-minutes on a torture device Megaformer and are now having trouble thinking straight (or are busy taking mirror selfies).

On top of that, if you do tell people after class, telling a stranger, “Touch the Apple Watch on my sweaty wrist” is a pretty creepy sell.

But with a pin and an App Clip, I can give them something to take home and try on their own time. Plus, no download required!

Scan it and leave a ⭐️⭐️⭐️⭐️⭐️ review. Please and thank you!

So, if you see me on the Megaformer next to you and want a pin, let me know! Or, hopefully, I can leave some pins at the front desk of Lagree Studios 🤞🏻🤞🏻🤞🏻 !!

---

Okay, this next section is for developers who may be interested in creating an App Clip for their apps. So, for the general reader, go ahead and stop now and maybe read about why I made this app in the first place:

Introducing: Lagree Buddy

But if you want to continue and see how the sausage gets made, continue on!

---

Steps to creating the App Clip Code

App Clips can work without an App Clip Code (Apple’s special QR-looking-code), but it’s so much cooler with one of these codes.

The Swift/SwiftUI part is essentially the same workflow as your normal app. So I’m not going to dive into that. I will, however, be diving into the “what hurdles do I need to jump to get one of these special App Clip Codes” to scan and open my app because that’s what I struggled mightily with.

Here are the Cliff Notes to the full flow:

1. Xcode Setup (new but easy)

2. Web Setup (new but easy with ChatGPT)

3. Release a new version of your app with an App Clip (normal)

4. In App Store Connect, set up an advanced App Clip Experience & generate an App Clip Code (new)

5. Use the Settings app on your iPhone to see that it’s live with the Developer Diagnostics tool (new)

1. Xcode Setup

Only two things you need in Xcode (besides the Swift — which I leave to you):

1. Add an App Clip Target

2. Add Associated Domains capabilities to both your iOS and AppClip target with appclips:yourwebsite.com

2. Web Setup

I know nothing about web development — I just do iOS (self-taught), so deploying outside of Xcode is a foreign adventure for me. But I asked ChatGPT to walk me through it step-by-step, and I was good to go!

Cliff Notes for this flow:

1. Host your AASA file on Vercel (free)

2. Make sure it’s a json file

3. Create index.html to redirect to app link

If that confused you, don’t worry.
Here’s the prompt I used that walked me through all of that:

I am an ios developer with very limited web knowledge. I want to add an app clip for my app. I have the domain name for lagreebuddy.com on godaddy.com but right now i am forwarding it to http://apple.co/4bBKzYt. Can you tell me how to set up this apple-app-site-association file?

3. Release a new version of your app with an App Clip

This step is essentially the same as any other time you’ve shipped an app, so I’m not going to talk about it.

4. In App Store Connect, set up an advanced App Clip Experience & generate an App Clip Code

Apple provides a straightforward step-by-step process in App Store Connect to follow, allowing you to obtain your App Clip Code. Here’s the rest of the flow in screenshots:

This URL must be in your associated domains mentioned in Step 1, or else it won’t register and the next button will be disabled.

Design your App Clip pop-up.

This part confused me a little because usually “Send to Apple” means it needs a manual review from Apple. But that’s not the case here. As you’ll see in the next screenshot, the status will be “Received” which means it’s live. It doesn’t need to be reviewed.

Now, you get to generate your App Clip Code!

And choose the color pattern!

5. Use the Settings app on your iPhone to see that it’s live with the Developer Diagnostics tool

At this point, if you’re like me, you’re chomping at the bit to scan this thing and give it a go.

But if you’re also a fool like me, you didn’t give your app enough time to “go live”. So now you’re sitting there scanning this thing and it’s reading:

“no usable data found” (see below)

This is when you should go into your phone’s Settings App > Developer > Diagnostics.

If you’re getting “No usable data found”, you’ve got some version of the middle screen. But once you’ve got all green (like the far right screen), you’ll be good to go!

Now, go make your pin (I used Gemnote — a friend of mine owns this company), throw the App Clip Code on the back of it, and scan away!¹

1. I may have rushed through all of that so if there are any questions, please feel free to hit me up here in the comments or dms.