Workshop 2

From Chat
to Code

Building iOS Apps with Claude Code

reginafloresmir.ai
March 19, 2026

Workshop 1 Recap

Last time we explored AI and built something real together.

💡

AI Foundations

We explored what AI is, how large language models work, and why this moment matters for everyone — not just engineers.

🌐

Hands-On with Claude Chat

We used Claude's chat interface to build a complete HTML website — from idea to a live, working page — all through conversation.

🚀

Key Takeaway

AI is a creative partner, not just a tool. You don't need to be a developer to build things. You just need a vision.

From Chat to Code

In Workshop 1 we used Claude Chat. Today we level up to Claude Code — a tool that works directly on your computer.

Workshop 1

Claude Chat

  • Conversational interface
  • Great for ideation & writing
  • Builds one HTML page at a time
  • Perfect starting point
Workshop 2 — Today!

Claude Code

  • Terminal-based AI agent with same conversational ability
  • Reads & writes real files
  • Manages entire projects
  • Runs commands for you

What is Claude Code?

An AI coding agent that lives in your terminal. Instead of copying and pasting code from a chat window, Claude Code works directly on your computer — creating files, running commands, and building entire projects.

This is agentic AI. Claude Chat answers questions. Claude Code takes actions — it can plan, decide, and execute steps on your behalf without you managing each one. That autonomy is what makes it a fundamentally different kind of tool.

$ claude
> Build me an iOS app for tracking my daily habits
Creating Xcode project structure...
Setting up SwiftUI views...
Adding habit data model...
✓ Project ready — open in Xcode to preview

Chat gives you code. Claude Code runs it.

The gap isn't about intelligence — the same models are available in Claude Chat and Claude Code. It's about what the AI can actually touch.

🗂️

Reads Your Whole Project

Chat only sees what you paste. Claude Code reads your actual file tree — imports, data models, existing views — and writes changes directly into the right files.

🔁

Closes the Feedback Loop

With chat you copy code → paste → run → see error → paste error back. Claude Code runs commands itself, sees the output, and fixes its own mistakes — without you in the middle.

🧩

Works Across Files

A real app is never one file. Claude Code can create a SwiftUI view, wire it to a data model, add it to the nav stack, and update the Xcode project — all from one instruction.

🤝

You Approve Every Step

It proposes → you approve → it acts → it observes the result → it adapts. You're the architect. It's the one doing the construction work.

How Claude Code Works

A five-step loop you'll repeat over and over as you build.

1

You Describe

Tell Claude what you want in plain English

2

Claude Proposes

It explains what it will do and asks for the OK

3

You Approve

Press Y to accept or give feedback

4

Claude Builds

Creates files, runs commands, makes it real

5

You Test

Does it look right? Does it do what you asked? Break it on purpose — that's how you learn what to fix next.

💡

Testing isn't just for developers. If something feels off — wrong layout, unexpected behavior, a crash — describe exactly what you see and Claude Code will diagnose and fix it.

What You Need

🍎

A Mac

Claude Code + Xcode require macOS

macOS is the operating system that runs on Apple computers. It's required because Xcode (Apple's app builder) only works on Macs.

🖥️

Terminal

Built into every Mac — open it from Applications → Utilities → Terminal

Terminal is a text-based way to talk to your computer. Instead of clicking icons, you type commands. It looks like a hacker movie, but it's just another way to tell your computer what to do.

⌨️

Node.js (v18+)

Runtime for Claude Code — installed via terminal

Node.js is a program that lets you run JavaScript code on your computer (not just in a browser). Claude Code is built with it, so it needs Node.js to work.

What is JavaScript? JavaScript is one of the most popular programming languages in the world — it's what makes websites interactive. When you click a button and something happens, that's JavaScript. Originally it only ran inside browsers, but Node.js changed that by letting JavaScript run anywhere.

🔨

Xcode

Apple's IDE for building iOS apps — free from the App Store

Xcode is Apple's official app for building iPhone and iPad apps. It includes a code editor, a visual previewer, and a simulator that lets you test your app without a real phone.

GitHub Account

Free account to store and share your code

GitHub is a website where developers store their code. Think of it like Google Drive, but specifically designed for code projects. It's free and you can sign up at github.com.

Localhost vs. The Internet

When Claude Code builds something, it runs on your machine first. Sharing it publicly is a separate step.

Local

Localhost

  • Runs only on your computer
  • Address looks like localhost:3000
  • No one else can see it
  • Instant — no deploy needed
  • Where you build and test
Online

Hosted / Deployed

  • Lives on a server, accessible anywhere
  • Has a real URL anyone can visit
  • GitHub is not required — it's just one option
  • Traditional hosts like GoDaddy work too
  • What your users actually see

Think of localhost like a rehearsal on your own stage. Hosting is opening night — the same show, now visible to the world.

What is GitHub?

Think of it as Google Drive for code — but with superpowers.

☁️

Cloud Storage

Your code is safely backed up online, accessible from any computer.

👥

Collaboration

Others can see your project, suggest improvements, or build on your work.

📖

Version History

Every change is tracked — you can always go back to a previous version.

Portfolio

Your GitHub profile becomes a living portfolio of everything you've built.

Where Do People Actually Host?

It depends on what you built. Here's the landscape.

Static / Web Apps

What Claude Code usually builds — HTML, CSS, JS

  • GitHub Pages free
  • Vercel free tier
  • Netlify free tier
  • Cloudflare Pages free
Traditional Hosting

What most non-developers think of — usually WordPress-focused

  • GoDaddy
  • Bluehost / HostGator / SiteGround
  • Squarespace / Wix — no code needed
  • Shopify — e-commerce
Apps with Backend / Database

When your app needs logins, data storage, or server logic

  • Firebase / Supabase — database + hosting
  • Railway / Render — modern, free tiers
  • Heroku — easy but no longer free
  • AWS / Google Cloud / Azure — enterprise
💡

What Claude Code builds is almost always the first category. GoDaddy-style hosting is designed for WordPress sites — not code you write yourself. Start with GitHub Pages or Vercel.

What is an API?

API stands for Application Programming Interface. It's how apps talk to each other — like a waiter taking your order to the kitchen and bringing back food.

🍽️ Restaurant Analogy

You = the app
The waiter = the API
The kitchen = the server with data

You don't go into the kitchen yourself. You tell the waiter what you want, and the waiter brings back exactly what you asked for.

=

💻 In Tech Terms

Your app sends a request
The API processes it
The server sends back data

Your app asks for weather data, a quote, stock prices, or AI responses — and the API delivers it in a format your app can use.

APIs are everywhere. You use them every day:

🌤️

Weather Apps

Your phone's weather app calls a weather API to get the forecast for your location.

🗺️

Maps & Rides

Uber uses Google Maps API to show your route. Yelp uses it to display restaurant locations.

💳

Payments

When you buy something online, the site uses Stripe or PayPal's API to process your card.

🤖

AI Features

Apps that use ChatGPT or Claude are calling an AI API behind the scenes to generate responses.

🔑

A note about API Keys

Some APIs are completely open — like The Met's API, which we'll use today. Anyone can access it, no sign-up required. But many APIs require an API key — a unique password that identifies you and controls access. Think of it like a library card: the library is free, but you need a card to check out books. If you use an API that needs a key, Claude Code can help you set it up — just tell it "I need to add my API key" and it will handle storing it safely in your project.

Choose Your App Idea

Think of a simple app you'd actually want on your phone. Here are some ideas:

🎨

A daily mood tracker with color-coded entries

🍳

A personal recipe book with categories

A gratitude journal with daily prompts

💪

A simple workout timer with custom routines

📚

A reading list tracker with ratings

🧠

Your own idea — whatever excites you!

Open Terminal and Install Claude Code

$ npm install -g @anthropic-ai/claude-code

That's it. One command. Then start it by typing:

$ claude

It will open a login page in your browser. Sign in with your Anthropic account and you're ready to go.

Create the Xcode Project

Navigate to your project folder and tell Claude Code what to build:

$ mkdir my-app && cd my-app
$ claude
> Create a SwiftUI iOS app for tracking daily
  moods. I want a clean minimal design with a
  calendar view and emoji mood selector.
  Claude will create the full Xcode project...
💡

Be as descriptive as you want! The more detail you give, the closer the result to your vision.

Open in Xcode

Ask Claude Code to open your project:

> Open the Xcode project so I can preview it

What you'll see in Xcode:

📂

Project Navigator

All your SwiftUI files organized in a sidebar

👁️

Preview Canvas

A live preview of your app — updates as code changes

📱

Simulator

Press ▶ to launch your app in an iPhone simulator

Iterate & Customize

This is where the magic happens. Just keep talking to Claude Code:

"Change the color scheme to pastels"
Updates every view's styling
"Add a settings page with dark mode toggle"
Creates new SwiftUI view + navigation
"Make the mood emojis bigger and add animation"
Adds scaling + spring animations
"There's a bug — the date picker doesn't work"
Diagnoses and fixes the issue
"Add data persistence so entries save"
Implements SwiftData or UserDefaults

💕 You're designing. Claude is coding. That's the whole idea.

Add an API to Your App

This is where your app goes from a static prototype to something that connects to the real world. Just ask Claude Code:

> Add a feature that shows an inspirational
  quote of the day using a free quotes API
  Fetching from ZenQuotes API...
  Creating QuoteView.swift...
  Adding network request handler...
  ✓ Quote of the day now appears on the home screen

Ideas for APIs you could add:

Weather API
Show today's weather on your app's home screen
Quotes API
Display a daily motivational quote
Claude API
Add an AI chatbot or smart suggestions to your app
Unsplash API
Pull in beautiful background photos automatically
💡

You don't need to understand the technical details. Just tell Claude Code what data you want your app to show, and it handles the API connection for you.

Push to GitHub

You don't need to learn Git commands. Just tell Claude Code:

> Initialize a git repo, create a new GitHub
  repository called "my-mood-app", and push
  everything up
  ✓ Initialized git repository
  ✓ Created .gitignore for Xcode
  ✓ Created GitHub repo: your-name/my-mood-app
  ✓ Pushed all files to GitHub

That's the entire Git workflow — done in one prompt.

Publishing Your iOS App

You have two options for getting your app onto a real iPhone:

📱

Option 1: Directly from Xcode

Free & easiest

  1. 1. Plug your iPhone into your Mac with a cable
  2. 2. On your iPhone: Settings → Privacy & Security → Developer Mode — turn it on
  3. 3. In Xcode, click the device dropdown at the top and select your iPhone
  4. 4. You may need to sign in: Xcode → Settings → Accounts — add your Apple ID
  5. 5. In project settings, under Signing & Capabilities, check "Automatically manage signing" and select your team (your Apple ID)
  6. 6. Hit Cmd + R to build and run on your phone
  7. 7. First time: your iPhone will ask you to trust the developer — go to Settings → General → VPN & Device Management and trust your profile
⏳ The app stays on your phone for 7 days before you need to re-install (free account limitation).
🚀

Option 2: TestFlight

Requires $99/year Apple Developer Program

  1. 1. Enroll at developer.apple.com
  2. 2. In Xcode: Product → Archive
  3. 3. Upload to App Store Connect
  4. 4. Add testers in TestFlight — they get a link to install via the TestFlight app
  5. 5. App lasts 90 days and you can share with up to 10,000 testers
🚀

Hands-On Time!

Build your iOS prototype with Claude Code

~ 30 minutes ~
🏛️

Met For Moms

Let's build an iOS app together using
The Metropolitan Museum of Art's API

We'll connect to The Met's open collection — over 470,000 artworks — and build a beautiful app that brings art into your everyday life.

The Met's Open Access ↗ API Documentation ↗

What You Built Today

Installed and used Claude Code — a professional AI coding tool

Built a real iOS app prototype in SwiftUI using Xcode

Pushed your project to GitHub — it's live on the internet

Iterated on your design with natural language — no code written by hand

Tips for Working with Claude Code

💡

Be Specific

"Add a blue gradient header" works better than "make it look nice"

Review Proposals

Read what Claude plans to do before approving — you'll learn a lot this way

💕

Iterate Often

Start simple, then refine. Small changes compound into something great

Save Checkpoints

Your files save locally as you work — that's automatic. But push to GitHub at meaningful moments: "app launches," "calendar view done," "API connected." GitHub is your undo button across time — local saves disappear if your computer does.

🤝

Ask Questions

"Explain what this code does" — Claude Code is also a fantastic teacher

You just built an iOS app.
And pushed it to GitHub.
Without writing a single line of code.

Regina Flores Mir