Code-along: Experiment with coding intelligence in Xcode 26

Hello everyone. My name is Jerome and I'm a product manager here at Apple.

Today we're going to do something fun. Turn an idea into a fully functional app using Xcode and its coding intelligence tools. If you're not familiar, Xcode is how developers build apps for all Apple platforms.

It comes with powerful features to help anyone bring their ideas to life, like previews. To see your changes in real time. Simulator to simulate different Apple devices and OS versions. When a physical device is unavailable, advanced debugging tools to isolate bugs, find crashes, and identify bottlenecks and tools like instruments, providing a real time insights to deliver a smooth and responsive experience. And now, with coding intelligence built right in, it's easier than ever to learn, experiment, and create. You can use models like ChatGPT or cloud, all without leaving Xcode. All right, let's build something together. Ready? Now, Great apps starts with a spark, and that spark can come from anyone. I have an idea for an app. Let me tell you about it.

We are always looking for little moments of discovery, right? What if every day could have a small adventure, a micro adventure? I'm not saying climb Mount Everest. I mean, go to that museum you've been meaning to check out. Explore a park you've never been to. Find the extraordinary in the ordinary.

I want it to build an app for that.

I started by sketching a design, and then I brought it into keynote and named all the interface elements in more detail.

This planning helped me define exactly what I want to create, and in order to get the best results from the coding assistant, I carefully crafted five prompts or instructions, which I'll go over in a little bit.

Now, to follow along, make sure to find the link to these prompts in the description so that you can use them in your project while you look for the prompts. Let me tell you something I've learned about prompt engineering. Telling the model what you want to create is a skill in itself.

The key. Be specific. Tell it exactly what you want, like you're giving instructions to a teammate. And if you know the exact name of a component you want to use even better.

Also give it context. Describe what your app does or what problem it solves. Include things that might inform or influence what your app would look like and iterate. Experiment with different versions of your prompt. Now you can also use the coding assistant to help you create and improve your prompts, or even use it to brainstorm new features for your app. There's a lot more to prompt engineering and like coding. There are several ways of doing the same thing, so don't get discouraged if at first your prompts don't give you exactly what you want.

Now let's get started building my app. I'll create a new iOS project in Xcode and then set up the coding assistant.

I'll now switch over to Xcode to create a new iOS project. I have Xcode open and I'll click on create a new project.

I'll select iOS as the template for my new project.

I'll select app at the application type and click next.

I'll type in Micro Adventures for the product name.

I'll fill out organization identifier with com dot my fictitious organization and leave the other options to their default values. Click next and save the project to the desktop by clicking create.

I now have the default Hello World project with the Project Navigator panel on the left, the source editor in the center with my code and the live preview on the right.

Now I'm going to turn the minimap off here and make Xcode full screen for better viewing.

Next, I need to set up Coding Intelligence. To open the Coding intelligence panel. Click on the sparkle toward the top left of the navigator or use Command Plus Zero to open or close it.

I'll click on setup to open the intelligence settings.

You can enable ChatGPT or code where these models are available, or use another model that you may prefer.

Today I'll use ChatGPT, so I'll click on turn on.

This panel has some more information about ChatGPT.

I'll then click next and I get the options to use ChatGPT with an account or without.

For this cut along, I'll go without a specific account.

I'll close the settings window so I can start using the coding assistant. The coding assistant is where you interact with the model using natural language. Okay, I'm all set up and ready to go. I have my iOS Xcode project and the coding assistant configured to use ChatGPT.

And now let's start the conversation with the coding assistant and explore what we can build and learn from the process.

So for the first prompt, I start by providing some context.

I'm creating an app that gives ideas for quick micro adventures.

Then I describe the interface elements. Start by adding Micro Adventures as a large navigation title, and add a full screen map centered on a marker.

Not how I'm being specific by using a navigation title and a marker, for example. Now I'll copy the first prompt from the web page.

Switch over to Xcode.

Paste it into the chat, and press return to submit the prompt while I wait for the response. Here's a few tips. It's very important to read the generated responses. Notice that for every proposed change, an explanation is provided along with the code snippets added to the project. Click on any code snippet to highlight it in the editor. That's a great way to learn what's happening under the hood.

Now look at that. I have my title and a map with a marker for the adventure's location. Let's continue building our app.

Add a filter button on the top toolbar for categories and effort levels with options to select all.

Again, I'm very specific about the top toolbar and the filters I want, I'll go to my prompts.

Copy prompt number two, go back to Xcode, paste it in, and hit return to submit. Now, it's worth noting that a coding assistant may produce slightly different results each time you run the same prompt. For example, you might get slightly different interface layouts and functionalities. However, you always have a solid starting point to build upon.

And there we go. I have a button which should present a view with the filters I requested. Let's test it out.

Great. Looks good.

Now it's important to note that models occasionally make mistakes, but not to worry, the coding assistant can also fix them for you. Let me show you how.

I'll remove a bracket here, and in a second an issue pops up.

I click on the red x mark and the generate fix for issue.

The coding assistant starts working on it, and you can also prompt the model directly by typing fix all issues.

Now on to prompt number three. And this is a big one. Let me walk you through it.

Below the title overlay, a floating info card with a category pill and an effort level pill. Top left a bold adventure title.

The adventures description and a status button. Bottom right indicating if Adventure's incompleted or not.

Lots of detail in this one, right? I'll go to my prompt and copy over prompt number three. Come back to Xcode and submit it.

Now a few more tips. You can use prompts like change the select view's background color, or explain the code between lines ten and 20. And to better direct the model's responses, you can reference a specific class or file in your project. Type the add character to choose one and the coding assistant will read it along with your prompt.

Back to Xcode. I now have the information card with all the details I want about the adventure. I want to check if the done button works. It should indicate if the adventure is completed or not, and great it works. Next up, prompt number four. This is a short one. Add a wide Next adventure button that floats above the lower part of the maps. I'll copy prompt number four. Switch over to Xcode and send it on its way.

This should be a quick one. I'm only asking for a button and haven't explicitly said what it should do. Take a moment to read and understand what's being generated.

I'll read through the response and find the code snippets related to the next adventure button. Here it is. I'll click on it to highlight the code in the source editor. The button's action as a todo comment instead of a real action.

And that's why I have prompt number five to tie it all together and make the app work. Create the necessary models, sample data and connections for adventures with title, description, and so on. I list in detail every piece of information I think is important for an adventure to have.

I get prompt number five and I'll submit it to the coding assistant.

Now remember to iterate if what you get isn't quite right. Tweak your prompt and try again. You can also start a new conversation to keep topics organized and go back to your previous conversations using the picker at the top center of Coding Assistant panel.

Okay, I don't expect to see any changes on the interface other than when I click on the next adventure button. And I should get a new one. And voila! Like magic. Our app is ready. I started with a sketch and an idea. Now I have a working app. One that, with a few more tweaks, could be ready to publish. Amazing, right? I wish I could see what results you have on your side.

I encourage you to continue work on this app, add features, make it your own, and have fun with it. Now, before I let you go, there's another approach worth exploring.

What if you want to take a more visual approach? Can I start with an image and then go into prompting? Absolutely. I can create a prompt saying create a macro adventure app based on the attach image and attach this diagram I created previously. And to get this sketch, go to the web page with the prompts. Scroll down to part two, copy the prompt and save the image to your download folder.

So I'll create a new iOS project naming it My Adventures, and I'll save it and open the coding assistant.

I'll go get the prompt and copy and paste it into the coding assistant.

Then I'll click on the paperclip on the bottom left of the chat window and select upload Files.

I'll find and select the Sketch Micro Adventure dot png.

Click the open button to add it into the text prompt, and then hit return to submit the entire prompt. Models like cloud or ChatGPT are able to process several of the most common file formats for documents, images, code, and more. This might take a bit longer. The model has to analyze the image structure and generate the code for the full app. Instead of going step by step like I did before. Speaking of which, those five steps I used before can be pasted all at once. The models are able to handle much longer prompts in the chat, and it helps if they are well structured and organized.

And here we go. Mine is done, and it's almost exactly what I sketched out. Very nice. The next steps would be to test the app's functionality and keep prompting until it behaves and looks exactly how you want it to.

And that's a wrap for the code along. I started with a concept, came up with a few prompts, and ended up with a fully functional app. The coding assistant makes this possible. You can explore, prototype, learn, and build your ideas all in one place.

And there's even more in Xcode to help you build those incredible apps. Predictive code completion in app documentation, playgrounds, and beyond.

Thanks for joining me. Now it's your turn. Go build something great.