magic8ball

KO | EN

gitlite — search

#typescript #ai-agents #ai #dsh-plugin #deepseek-harness #open-source #cli #claude-code #codex #developer-tools #react #windows

★ 16 Open GitHub ↗

🎱 📱🔮 ✨ I wanted to see if ChatGPT could make an app for watchOS & iOS and it did

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# A Magic 8 Ball App for watchOS & iOS - Mostly Generated by ChatGPT

I wanted to try learning a new topic and building a relatively simple project using [ChatGPT](https://chat.openai.com/) as a coding assistant. Before starting this project, I had no prior knowledge of Swift and my last time doing iOS development was 2013. I wanted to see if ChatGPT could teach me to build a simple app for iPhone and Apple Watch and it did.

The final result after a total of ~10 hours of hacking — Yes, the animation is awful, but I think I've done enough for now:

https://user-images.githubusercontent.com/137158/227802904-8569a921-3ebb-47fb-ab7f-4f86f1499a7d.mp4

https://user-images.githubusercontent.com/137158/227838122-60d187ff-1358-43b7-b486-658ac65b7b5e.mov

I'm not particularly obsessed with [magic 8-balls](https://en.wikipedia.org/wiki/Magic_8_Ball) — it just seemed like an easy thing to make with some fun polishing edge cases. Here's [a video](https://www.youtube.com/watch?v=0-FYc-eEDa0) if you're wondering what's inside one.

## Summary

While "peer programming" with ChatGPT I found it to be about 75% useful. While not always giving me correct or up-to-date code, it successfully taught me the bits of Swift I needed and gave me solutions to the high-level problems I described. It wrote code for me that eventually worked after some amount of fixing (like casting types) or explanation (like asking it to give me an implementation of a function it referenced. Even when its code wasn't right, it gave me ideas to google for, which was much more time-efficient than digging through docs hoping to stumble across a breakthrough.

Overall, this feels like having a superpower. ChatGTP is like a mostly-knowledgable coworker telling me what to do (although sometimes getting it wrong) and saved me many hours of learning on my own.

## Development Log

Here's an abridged list of the ChatGPT questions I asked in rough chronological order. All of it was in a single ChatGPT chat. I also had to ask a lot of clarifying questions or sometimes would ask it things instead of googling. These are the most notable bits.

### Background Knowledge

I started by making sure ChatGTP knew what a magic 8-ball was. No problem there. It all sounds right but I never bothered to check its accuracy with [Wikipedia](https://en.wikipedia.org/wiki/Magic_8_Ball).

![CleanShot 2023-03-26 at 13 50 17](https://user-images.githubusercontent.com/137158/227803856-fc02d97a-d3a9-4534-93c4-9547095b86e9.png)

### Scaffolding the Watch App

I hadn't used Xcode in years, I had no knowledge of Swift, and I only started wearing an Apple Watch a few months ago. So I needed to start from the beginning.

I asked it to tell me how to build an Apple Watch app that would show one of these random messages. Remember, this stemmed from the conversation about the magic eight ball, so it already had some context:

![CleanShot 2023-03-26 at 21 25 01](https://user-images.githubusercontent.com/137158/227840625-b5e360ce-bf7c-47d5-9e56-122686104265.png)

It gave me Objective-C instructions at first, but then I told it I wanted to use Swift, and we were off. **All of this worked and I had a working watch app that I could tap to display a random message.** This was very promising and I was excited!

![CleanShot 2023-03-26 at 13 50 48](https://user-images.githubusercontent.com/137158/227803918-a33dc450-ede4-424d-be1c-5ae08c2ce06d.png)

I tried ChatGPT with some basic project setup questions and it was helpful:

![CleanShot 2023-03-26 at 13 53 32](https://user-images.githubusercontent.com/137158/227804033-b4af5274-4b6f-4c78-9325-c43003b402d0.png)
![CleanShot 2023-03-26 at 13 53 41](https://user-images.githubusercontent.com/137158/227804042-7eb339bb-8c7f-4e11-ae66-a4def16b7bd9.png)

### Feature: Add a delay before showing the message

At the beginning of the project my knowledge of iOS and Swift was practically non-existant. It took me a lot of time to understand animations, threads, timers, contexts, and Swift closures. I wanted the message to appear after a delay and that took a lot of work to undestand. ChatGPT was helpful with generating code, but not helpful in teaching me about SwiftUI or whatever alien planet iOS/watchOS appears to have turned into.

![CleanShot 2023-03-26 at 13 56 12](https://user-images.githubusercontent.com/137158/227804168-fd346c24-5273-42e8-aae1-d8e76f37d355.png)
![CleanShot 2023-03-26 at 13 56 32](https://user-images.githubusercontent.com/137158/227804183-fd45a0d5-eddb-4fe4-84a4-cf4417627e60.png)
![CleanShot 2023-03-26 at 13 56 41](https://user-images.githubusercontent.com/137158/227804186-64710d40-053d-4389-a30f-349387e6632a.png)
![CleanShot 2023-03-26 at 13 56 52](https://user-images.githubusercontent.com/137158/227804197-4763d1fa-0c66-44ff-a956-dc6ae9b10a76.png)

### Feature: Play a watery gurgling sound

If you're shaking a container with liquid in it, it should sound like that, right? So I grabbed [something that sounded approximately right](https://freesound.org/people/pbimal/sounds/646783/), trimmed and faded it with Audacity, and exported it as.. wait, what formats are supported by Xcode? Let's ask!

![CleanShot 2023-03-26 at 13 58 15](https://user-images.githubusercontent.com/137158/227804255-be4990f6-10f7-495d-a338-81ea927573ac.png)

Coding this was painful. First, ChatGPTs suggestions were out of date, then it was unclear to me where in the lifecycle I should be initializing things and setting up the player and whatever else I'm supposed to do.

![CleanShot 2023-03-26 at 13 58 05](https://user-images.githubusercontent.com/137158/227804249-ce23bfb6-5042-4742-aacd-80490476f951.png)
![CleanShot 2023-03-26 at 13 58 22](https://user-images.githubusercontent.com/137158/227804261-c2edc002-1227-4a7e-98ea-457418e9a9aa.png)
![CleanShot 2023-03-26 at 13 58 29](https://user-images.githubusercontent.com/137158/227804277-1e2cf8f7-15c3-4883-9613-efd3929b553b.png)
![CleanShot 2023-03-26 at 13 58 44](https://user-images.githubusercontent.com/137158/227804289-4d02feae-9d9b-4491-ac10-23a55423e3bf.png)

### Feature: Let me shake the watch to reveal an answer

Picking a random element from an array and displaying it in a Text view after being tapped was easy. But I wanted to shake my watch like a magic 8 ball and get a new mystical response. The watch has a gyroscope so this should be possible.

ChatGPT nailed this by creating the `motionManager` and checking the `magnitude` of the motion. And it added it by adding it to (what it thought was) my existing code!

![CleanShot 2023-03-26 at 14 02 16](https://user-images.githubusercontent.com/137158/227804482-a744163e-0448-4d7e-a8c1-aa2ca6c59633.png)
![CleanShot 2023-03-26 at 21 36 08](https://user-images.githubusercontent.com/137158/227841876-df30b698-8038-4a36-989f-612c6b633d70.png)

Later on for the iOS app, however, ChatGPT was _way_ off:

![CleanShot 2023-03-26 at 21 37 55](https://user-images.githubusercontent.com/137158/227842086-2b3f35a8-f635-473f-8fd7-673c51d7dcce.png)
![CleanShot 2023-03-26 at 21 38 03](https://user-images.githubusercontent.com/137158/227842102-aaa3436e-be4f-4b5f-8f37-123972b36c30.png)
![CleanShot 2023-03-26 at 21 38 08](https://user-images.githubusercontent.com/137158/227842116-718d9b1e-287d-45ee-bfff-2f6586056436.png)
![CleanShot 2023-03-26 at 21 38 11](https://user-images.githubusercontent.com/137158/227842124-60a84f76-6f83-43ed-af2d-4f55fc48f3d3.png)
![CleanShot 2023-03-26 at 21 38 42](https://user-images.githubusercontent.com/137158/227842212-e8dccee7-447d-43e0-8a0a-e6b4862b2245.png)
![CleanShot 2023-03-26 at 21 38 51](https://user-images.githubusercontent.com/137158/227842242-54ffc5fd-bcd9-47e0-be05-fea74d2b1a28.png)

As far as I know, there's no such thing as `ShakeGesture` and googling didn't turn up anything. Hrmph. I ended up googling [someone else's solution](https://betterprogramming.pub/how-to-use-uiviewrepresentable-with-swiftui-7295bfec312b).

### Feature: Animate the eight ball

Hearing the water slooshing sound but not seeing anything move felt a little lifeless. So I wanted the eight ball image to jiggle a little when you asked for a new response.

There was a lot of back and forth here and I started to get a little frustrated. There were probably ~15 back and forths with ChatGPT and three times I said something like "OK, forget all that, let's try again. Here's my code." Finally a breakthrough:

![CleanShot 2023-03-26 at 14 08 26](https://user-images.githubusercontent.com/137158/227804713-bcf8af7a-0819-4381-90ec-a8d26c70afd8.png)
![CleanShot 2023-03-26 at 14 08 37](https://user-images.githubusercontent.com/137158/227804721-fe5923e9-57c8-4f58-b7e8-0ceff2de77d8.png)
![CleanShot 2023-03-26 at 14 08 42](https://user-images.githubusercontent.com/137158/227804730-5f54c22d-9f8e-48c3-9498-14ce5e3f31e7.png)

### Feature: Add some random variation to the sound

Usually you want to add some variation to a sound if you're hearing it a lot so it doesn't sound robotic. Usually adding a little bit of random pitch offset helps. I asked ChatGPT, but it's responses were way off, and it made me go down a wrong path of trying to use `AVAudioUnitTimePitch`, which isn't available on watchOS. It's explanation of `audioPlayer.rate` is wrong and contradicts the explanation in [the official docs](https://developer.apple.com/documentation/avfaudio/avaudioplayer/1386118-rate).

![CleanShot 2023-03-26 at 14 09 43](https://user-images.githubusercontent.com/137158/227804776-68dc8307-aaab-4d9a-ab99-b59be60df593.png)
![CleanShot 2023-03-26 at 14 10 58](https://user-images.githubusercontent.com/137158/227804837-613d1cb4-354d-4c01-aa34-84245b9ec24d.png)

This was too much work so I added a random rate (actually duration) offset and moved on.

### Bug: Apple Watch coding is difficult

Dealing with activation/deactivation on the watch was annoying. I eventually scrapped the code, added lots of `print()`s, and at this point read [Learn X in Y Minutes (where X=Swift)](https://learnxinyminutes.com/docs/swift/) to try and learn things. ChatGPT gave me lots of ideas, so I spent a lot of time googling again. At least I was given some ideas of what to Google.

![CleanShot 2023-03-26 at 14 12 47](https://user-images.githubusercontent.com/137158/227804907-c7f1775f-a503-435f-8538-3edd8d0bb40f.png)
![CleanShot 2023-03-26 at 14 13 33](https://user-images.githubusercontent.com/137158/227804941-87ced4b6-c873-4ee2-b0da-333764342511.png)

### Bug: Timers

ChatGPT successfully taught me about timers in Swift.

![CleanShot 2023-03-26 at 14 13 13](https://user-images.githubusercontent.com/137158/227804927-0bb3c8c4-6075-41ab-8535-daf4142d9ca6.png)

### Feature: App Store marketing copy

I don't really plan on spending $99 to put yet another magic eight ball app on the App Store. But I _was_ thinking about all the screenshots and copy you need to make an app look presentable, so I enlisted ChatGPT's help here.

I found a good [Figma template](https://www.figma.com/community/file/1071476530354359587) for App Store screenshots and asked ChatGPT for some copy. Since it already had plenty of context from the conversation, this was perfect:

![CleanShot 2023-03-26 at 14 15 23](https://user-images.githubusercontent.com/137158/227805016-3e84b3ef-ad60-4943-97ea-d15f69bbed31.png)

Nice. Switch over to Midjourney fro some fortune telling background and some kind of, I dunno, weird "eight balls in space" kind image for the marketing background? Who really looks at that stuff? It just needs to be eye-catching. I think. I'm not an expert.

![CleanShot 2023-03-26 at 21 56 28](https://user-images.githubusercontent.com/137158/227844464-a2c58a4c-68b7-4ebc-b76e-f728d7435da9.png)
![CleanShot 2023-03-26 at 21 56 45](https://user-images.githubusercontent.com/137158/227844493-a97763d5-ea37-4b1b-b8db-c205bf6929ca.png)
![image](https://user-images.githubusercontent.com/137158/227844524-569cba86-28fb-4b43-9085-7bcd82044a50.png)

### Scaffolding the iOS App

The watch app eventually felt good enough, and I had an itch to add a _really cool 3D magic eight ball_ to the iOS version, which I knew could embed 3D models. So it was time to let ChatGPT write the iOS app, but first I wanted some instructions:

![CleanShot 2023-03-26 at 21 59 27](https://user-images.githubusercontent.com/137158/227844852-46506930-b68d-4d18-b0ad-b5533d0ae20f.png)

Gah, this turned out to be all wrong. Xcode was angry. I gave up, copied the watchOS View, and deleted stuff until it worked on iOS.

Follow-up questions were where ChatGPT really helped. All of this seemed googleable, but this is where it really felt like peer programming. I just wanted someone (or something) to tell me the right thing to do:

![CleanShot 2023-03-26 at 22 04 39](https://user-images.githubusercontent.com/137158/227845524-91cca385-8a18-40bc-be93-f9c64894676f.png)
![CleanShot 2023-03-26 at 22 04 49](https://user-images.githubusercontent.com/137158/227845622-abcc5557-618c-4cf6-a3b9-f76b9aeeb878.png)

### Feature: Shake gesture on iOS

As mentioned earlier, ChatGPT gave me a _lot_ of wrong info here, eventually making up something called `ShakeGesture`, which doesn't seem to exist. Eventually I googled around and found a solution that was simple and seemed much more up to date than anything ChatGPT was generating.

![CleanShot 2023-03-26 at 14 19 52](https://user-images.githubusercontent.com/137158/227805192-470f7519-162d-47ef-8085-9ed559b35a31.png)
![CleanShot 2023-03-26 at 14 19 59](https://user-images.githubusercontent.com/137158/227805200-e879c843-1e9c-4a34-adb2-e800cff70f9e.png)
![CleanShot 2023-03-26 at 14 20 05](https://user-images.githubusercontent.com/137158/227805207-f0f531e9-e91d-4956-bdca-17f94f67e0ee.png)

### Feature: Fixing the text

I had no idea how to lay out text and make it bigger and whatnot. ChatGPT was super helpful here and I was able to continually ask it to tweak my code. This was one of my favorite parts of using ChatGPT because it felt like it was talking to an expert — or at least someone who had read a million tutorials and documentation pages...

![CleanShot 2023-03-26 at 20 35 30](https://user-images.githubusercontent.com/137158/227834664-6c80bca5-56d7-4137-b2b4-699f9989d4ec.png)
![CleanShot 2023-03-26 at 22 12 19](https://user-images.githubusercontent.com/137158/227846570-94879315-143f-459e-b10c-ed441c0545b0.png)

### Feature: 3D Eight Ball

I found an eight ball model on Sketchfab and asked ChatGPT what to do next. It was spot on, with one exception -- ChatGPT said to use formats "such as" Collada and Alembic, so I was looking for Collada models. I didn't know until now that not only does SceneKit work great with USDZ models, but that USDZ was actually an Apple and Pixar invention, and everything on Sketchfab gets converted to USDZ automatically.

![CleanShot 2023-03-26 at 22 16 13](https://user-images.githubusercontent.com/137158/227847062-54b4acd8-f67f-4115-82f0-3b849bef38f3.png)

Unfortunately, after this I had a lot of trouble figuring out SceneKit. ChatGPT wasn't very helpful here since this was a combination of my Swift/SceneKit inexperience and just general difficulty with APIs. For example, things I thought were problems with the model ended up being problems with my initialization and code paths. It was plain old debugging and code sleuthing for a while.

### Feature: Animate the eight ball

What I _wanted_ but didn't get was some kind of shake or rotation animation that jiggled the eight ball and let it settle back to its origin position. That would have been cool, right? But no matter how hard I tried, I couldn't get anything good working.

ChatGPT got me really *close*, though, and with more time I could probably turn it into something, but my effort and motivation has hit its limit. ChatGPT gave me a lot of things involving rotation and scale, but none of them did exactly what I wanted, or they kept doing the animation _backwards_ for some reason, and switching the `from:` and `to:` parameters didn't seem to work. ChatGPT was pretty wild here, and for a while it would give me an entirely different solution every time I asked, and many of the the solutions were incomplete and used made-up functions. I learned a lot but didn't achieve my goal.

Some examples:

![CleanShot 2023-03-26 at 20 41 11](https://user-images.githubusercontent.com/137158/227835335-15c0062a-40f1-494a-b727-479a49e501a4.png)
![CleanShot 2023-03-26 at 20 41 19](https://user-images.githubusercontent.com/137158/227835353-9cd4f0e5-c8a5-4c22-9bfc-e0cceff3bcb8.png)
![CleanShot 2023-03-26 at 20 41 38](https://user-images.githubusercontent.com/137158/227835404-6a3b9ffd-171a-4aad-8342-1c206fca3c0a.png)

🤷

### Addendum: Midjourney

I used Midjourney to create some assets -- I wanted an interesting background for the app like a fortune telling parlor, some kind of weird mystical background with eight balls for the hypothetical app store listing, and I really wanted just a royalty-free magic eight ball image with the blue upside-down triangle for the watch app which can't use a 3D model.

Unfortunately, I simply couldn't get a good magic eight ball image generated, or at least one with the triangle the way I wanted (like ▼ not ▲). So I took the best one it made, removed the background with [removal.ai](https://removal.ai/upload/), and trimmed transparent pixels with [Photopea](https://www.photopea.com/).

Here are highlights with my progress there along with some of my favorite things that Midjourney came up with:

![CleanShot 2023-03-26 at 20 45 07](https://user-images.githubusercontent.com/137158/227835827-1abba42b-0e28-4aca-bf12-52455ee4d19c.png)
![CleanShot 2023-03-26 at 20 45 19](https://user-images.githubusercontent.com/137158/227835851-ecf4ea91-f862-46db-bb44-30021571e94a.png)
![CleanShot 2023-03-26 at 20 45 30](https://user-images.githubusercontent.com/137158/227835864-fedf8ccd-f173-44b0-9e70-f06e4fd2f0ca.png)
![CleanShot 2023-03-26 at 20 45 40](https://user-images.githubusercontent.com/137158/227835902-ef7447fa-8653-4922-af1a-6a147a8541a4.png)
![CleanShot 2023-03-26 at 20 45 58](https://user-images.githubusercontent.com/137158/227835929-dae64fa7-ecc9-4a2d-9015-48d78cdf7a1b.png)
![CleanShot 2023-03-26 at 20 46 04](https://user-images.githubusercontent.com/137158/227835948-6db58831-d2d9-4008-8193-49f0deb78e8e.png)
![CleanShot 2023-03-26 at 20 46 09](https://user-images.githubusercontent.com/137158/227835957-e8ca44a8-b68c-47a4-be93-146e20b02f45.png)
![CleanShot 2023-03-26 at 20 46 25](https://user-images.githubusercontent.com/137158/227835987-a6da7054-e60b-45d9-bf64-7472f03fc427.png)
![CleanShot 2023-03-26 at 20 46 43](https://user-images.githubusercontent.com/137158/227836045-86624a78-a155-49bc-aa05-c9d254c3bbc6.png)
![CleanShot 2023-03-26 at 20 46 53](https://user-images.githubusercontent.com/137158/227836061-8f942d3b-4b24-4d9e-a6c0-a6de545d67af.png)
![CleanShot 2023-03-26 at 20 46 59](https://user-images.githubusercontent.com/137158/227836070-7717d489-83d1-4c03-857a-83990761ca18.png)
![CleanShot 2023-03-26 at 20 47 05](https://user-images.githubusercontent.com/137158/227836088-cdacf406-f6dc-4998-ae6e-dbd598e45143.png)
![CleanShot 2023-03-26 at 20 47 17](https://user-images.githubusercontent.com/137158/227836114-6211d7eb-97f1-4b84-8cfc-020093721943.png)
![CleanShot 2023-03-26 at 20 47 25](https://user-images.githubusercontent.com/137158/227836129-d3ce78f2-bcf5-49bb-8328-9c518f37e297.png)
![CleanShot 2023-03-26 at 20 47 33](https://user-images.githubusercontent.com/137158/227836151-304d48c5-56d0-4a59-9f93-6d4788d419be.png)
![CleanShot 2023-03-26 at 20 47 41](https://user-images.githubusercontent.com/137158/227836201-daa1f0fb-e961-43b3-84c8-c112a1663878.png)
![CleanShot 2023-03-26 at 20 47 50](https://user-images.githubusercontent.com/137158/227836218-115e6d7f-4372-42b5-8689-f5cb021d7600.png)
![CleanShot 2023-03-26 at 20 47 55](https://user-images.githubusercontent.com/137158/227836230-26f27962-64d7-492a-a439-150feb429040.png)
![CleanShot 2023-03-26 at 20 48 02](https://user-images.githubusercontent.com/137158/227836241-b3ec44ba-69e0-4818-a06f-4cfaa67897cf.png)
![CleanShot 2023-03-26 at 20 48 06](https://user-images.githubusercontent.com/137158/227836259-362e2673-06d0-4b83-9b0f-ea7bbcebcce6.png)
![CleanShot 2023-03-26 at 20 48 20](https://user-images.githubusercontent.com/137158/227836274-db9edb7c-002d-43ad-88cb-352de10d1fd1.png)

## Credits

- Most of the Swift code was written by [ChatGPT 3.5](https://chat.openai.com/)
- The orb image and background images for the app and screnshots were made by [Midjourney](https://www.midjourney.com/app/)
- [water bottle shaked.ogg by pbimal](https://freesound.org/people/pbimal/sounds/646783/) is the shaking sound
- [Magic eight ball.png](https://commons.wikimedia.org/wiki/File:Magic_eight_ball.png) from Wikimedia Commons was used mostly as a placeholder
- [Eight Ball 3D model from RoutineStudio via Sketchfab](https://sketchfab.com/3d-models/eight-ball-24a32adaf6014528ad71a1de9af6b084)
- [abstract ball 3D model by sonic art](https://www.turbosquid.com/3d-models/abstract-ball-3d-model-1737482#) was used as a placeholder
- [iOS & Android App Icon Template](https://www.figma.com/community/file/994333518688155629) and [App Store Screenshots](https://www.figma.com/community/file/1071476530354359587) from the Figma community

I couldn't find a usable, free magic 8-ball 3D model, so I used a nice regular 8-ball model.

magic8ball

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README