Below is a complete, copy‑pasteable lab you can use to build an IOS app using modern design practices. We assume that you are using macOS, and VS Code:

• Build an Ionic + Angular + TypeScript app.
• Create a Fahrenheit → Celsius converter with a slider.
• Run it in the iOS Simulator.
• Deploy it onto a physical iPhone.
• Reflect on why Angular + Ionic + Capacitor is a powerful combination.

Citations reference official docs and tutorials.ionicframework+5

---

Lab: iOS Temperature Converter with Angular, Ionic, and Capacitor

https://docs.google.com/presentation/d/18yrkWTm5JRBYm6NOeYdgYdssBTuVpEnE/edit?usp=sharing&ouid=103411675731117310047&rtpof=true&sd=true

Lab Overview

In this lab you will:

1. Set up a Mac + Node + Xcode environment.
2. Create an Ionic + Angular project in VS Code.
3. Implement a Fahrenheit → Celsius converter using an Ionic slider.
4. Wrap the app with Capacitor and run it in the iOS Simulator.
5. Deploy the app to a physical iPhone for testing.
6. Understand the advantages of Angular + Ionic + Capacitor.

Each step ends with a “Success target” so you know what you should see before moving on.

---

Step 0 – Prerequisites and Setup (Mac)

0.1 – Required hardware and OS

You must have:

• A Mac running a recent version of macOS that can install:
  • Xcode (from the Mac App Store).
  • Node.js (LTS version).
• Optional but recommended:
  • An actual iPhone and a Lightning/USB‑C cable, or wireless debugging enabled.

iOS development requires macOS and Xcode; you cannot run the iOS Simulator on Windows or Linux.appmysite+1

0.2 – Install Xcode

1. Open the App Store on macOS.
2. Install Xcode.
3. After installation, open Xcode once:
   • Accept the license.
   • Allow any additional components to install.
4. Close Xcode.

Xcode provides the iOS Simulator you’ll use to run your app.ionic+1

0.3 – Install Node.js and Ionic CLI

1. Install Node.js (LTS) from the official website if it’s not already installed.
2. Open Terminal and run:bashnode -v npm -vBoth should print version numbers.
3. Install the Ionic CLI:bashnpm install -g @ionic/cli ionic --versionYou should see a version number for ionic.ionicframework+1

0.4 – Install Visual Studio Code

• Download and install Visual Studio Code.
• Open VS Code once to let it register with the system.

---

Step 0 – Success target

You can open Terminal and run:

bashnode -v
npm -v
ionic --version

All three commands print version numbers, and Xcode is installed on your Mac.

---

Step 1 – Create the Ionic Angular Project

You’ll create a new Ionic project using the Angular framework and a blank starter template.interserver+2

1.1 – Create project folder

In Terminal:

bashcd ~
ionic start temp-converter blank --type=angular
cd temp-converter

• temp-converter is the project folder.
• Choose Yes if the CLI asks to integrate Capacitor. If not, we’ll add it later.

1.2 – Open project in VS Code

bashcode .

VS Code should open with the temp-converter project.

1.3 – Run in the browser

In the same project folder, run:

bashionic serve

• Ionic will start a development server and open your default browser.
• You should see a basic Ionic starter page.

---

Step 1 – Success target

In your browser you see a starter Ionic page (e.g., “Ionic App”) running at a local address (like http://localhost:8100). You can edit files in VS Code, and the browser reloads.

---

Step 2 – Build the Temperature Converter UI

You’ll use Ionic’s range slider (ion-range) to select a Fahrenheit temperature and compute Celsius.ionicframework

2.1 – Locate the main page

In VS Code, open:

• src/app/home/home.page.html
• src/app/home/home.page.ts
• src/app/home/home.module.ts

If the starter has a different main page, find the equivalent “Home” page referenced in app-routing.module.ts.

2.2 – Replace home.page.html

Replace the entire content of home.page.html with:

xml<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Fahrenheit → Celsius
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">

  <ion-card>
    <ion-card-header>
      <ion-card-title>Temperature Converter</ion-card-title>
      <ion-card-subtitle>
        Use the slider to choose a Fahrenheit value
      </ion-card-subtitle>
    </ion-card-header>

    <ion-card-content>
      <ion-item>
        <ion-label position="stacked">
          Fahrenheit: {{ fahrenheit | number:'1.0-0' }} °F
        </ion-label>
        <ion-range
          min="0"
          max="212"
          step="1"
          [(ngModel)]="fahrenheit">
          <ion-label slot="start">0°F</ion-label>
          <ion-label slot="end">212°F</ion-label>
        </ion-range>
      </ion-item>

      <ion-item lines="none" class="result-row">
        <ion-label>
          Celsius:
        </ion-label>
        <ion-note slot="end" color="primary">
          {{ celsius | number:'1.1-1' }} °C
        </ion-note>
      </ion-item>
    </ion-card-content>
  </ion-card>

</ion-content>

This is standard HTML with Ionic’s ion- components and Angular bindings.ionicframework+1

2.3 – Implement logic in home.page.ts

Replace the contents of home.page.ts with:

tsimport { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  // Slider value in Fahrenheit
  fahrenheit = 32; // default to freezing point

  constructor() {}

  // Computed Celsius value
  get celsius(): number {
    return (this.fahrenheit - 32) * 5 / 9;
  }

}

This is pure TypeScript logic backing the Ionic UI.

2.4 – Ensure FormsModule is imported (for ngModel)

Open src/app/home/home.module.ts. Make sure it looks like this (key part is FormsModule in imports):

tsimport { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';

import { HomePageRoutingModule } from './home-routing.module';
import { HomePage } from './home.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    HomePageRoutingModule
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

FormsModule is required for [(ngModel)] to work.ionicstart+1

2.5 – Test in the browser

If ionic serve is still running, it should auto‑reload. If not, start it again:

bashionic serve

In the browser:

• You should see a header “Fahrenheit → Celsius”.
• You should see a card with a slider from 0°F to 212°F.
• As you move the slider:
  • The Fahrenheit label updates.
  • The Celsius value updates live and correctly.

Try these test points:

• 32°F → 0°C
• 212°F → 100°C
• 68°F → approximately 20°C

---

Step 2 – Success target

In the browser:

• Moving the slider changes the Fahrenheit number and the Celsius result live.
• The formula behaves correctly for known reference temperatures.

---

Step 3 – Add Capacitor and iOS Platform

Now you’ll wrap the web app in a native iOS shell using Capacitor, which generates an Xcode project and a WKWebView container.capacitorjs+2

3.1 – Initialize Capacitor (if not already done)

In the project root (temp-converter):

bashnpx cap init

When prompted:

• App name: Temp Converter
• App ID: something like com.yourname.tempconverter

This creates a capacitor.config.ts or capacitor.config.json file that tells Capacitor about your app.joshmorony+1

3.2 – Add iOS platform

Add the iOS platform once:

bashnpx cap add ios

This generates an ios/ folder with a complete native iOS project that loads your Ionic web app.capacitorjs+1

3.3 – Build and sync

Whenever you change your app and want to run on iOS, do:

bashionic build
npx cap sync ios

• ionic build generates the production web bundle in www/.
• npx cap sync ios copies www/ into the native project and updates plugins.capacitorjs+1

---

Step 3 – Success target

In your project folder you now have an ios directory. Running npx cap sync ios completes without errors.

---

Step 4 – Run in iOS Simulator via Xcode

You’ll now open the native iOS project in Xcode and run it on a simulated iPhone.ionicframework+2

4.1 – Open Xcode project

bashnpx cap open ios

• Xcode opens with a workspace named something like App.xcworkspace under the ios/App folder.

4.2 – Choose a Simulator

In Xcode:

1. At the top toolbar, find the device selector (next to the “Run” ▶ button).
2. Choose a simulator (e.g., iPhone 15 Pro).

4.3 – Run the app

Click the Run ▶ button.

• The iOS Simulator launches automatically.
• Your app appears and shows the same temperature converter UI, now running in a native iOS container.

---

Step 4 – Success target

In the iOS Simulator:

• You can move the slider with the mouse/trackpad.
• Fahrenheit and Celsius values update live, just as in the browser.
• The app has an iOS status bar and behaves like a native app.

---

Step 5 – Run on a Physical iPhone

Now you’ll install the app onto a real iPhone directly from Xcode.ionic+1

5.1 – Prepare your device

On your iPhone:

• Connect the iPhone to your Mac via USB (or configure wireless debugging).
• Unlock the device and accept any “Trust This Computer?” prompts.

In Xcode:

1. Add your Apple ID (if not already):
   • Xcode → Settings → Accounts → Add Apple ID.
2. Ensure your device appears in the device list at the top of Xcode.

5.2 – Configure signing

Back in the Xcode project:

1. Select the App target in the Project Navigator.
2. Click the Signing & Capabilities tab.
3. Check Automatically manage signing.
4. Choose your Team (Apple ID or developer team).joshmorony+1

Xcode should create a development provisioning profile.

5.3 – Run on your iPhone

1. In the device selector at the top of Xcode, choose your physical iPhone.
2. Click the Run ▶ button.

First run:

• iOS may show a warning about untrusted developer.
• If so, go to Settings → General → VPN & Device Management and trust the certificate.

After that:

• The app will install and launch on your iPhone home screen.

---

Step 5 – Success target

On your physical iPhone:

• You see the Temp Converter app icon.
• Tapping it opens the Ionic temperature converter.
• The slider works, and values update live, just like in the browser and simulator.

---

Step 6 – Reflection: Why Angular + Ionic + Capacitor?

To close the lab, reflect on the advantages:

1. Single codebase for multiple platforms
   • You wrote the UI and logic once in TypeScript + Angular + Ionic, and it runs:
     • In a browser (ionic serve).
     • In iOS Simulator.
     • On a physical iPhone.
   • Capacitor can also target Android using the same code.capacitorjs+2
2. Modern, component‑based UI
   • Ionic provides a full set of mobile‑style components (ion-range, ion-card, ion-toolbar, etc.) that automatically adapt to iOS and Android look‑and‑feel.kellton+2
   • Angular components and templates keep UI and logic organized and testable.
3. Native capabilities via plugins
   • Capacitor’s plugin system gives you access to camera, geolocation, filesystem, notifications, and more from TypeScript.capacitorjs+3
   • You can still drop into Swift/Objective‑C to create custom native plugins when needed.capacitorjs+1
4. Standard iOS toolchain
   • The generated iOS project is a normal Xcode project, so all native tooling still works:
     • iOS Simulator.
     • Device deployment.
     • Profiling and debugging.
     • App Store / TestFlight distribution.capacitorjs+1

---

Hard Targets (Checklist)

By the time you finish this lab, you should be able to say “yes” to all of the following:

1. Mac setup
   • I can run node -v, npm -v, and ionic --version on my Mac, and I have Xcode installed.
2. Web app working
   • I can run ionic serve and see a working Fahrenheit → Celsius converter with a slider in the browser.
3. Capacitor/iOS project generated
   • I have run npx cap init, npx cap add ios, and npx cap sync ios without errors.
   • There is an ios folder in my project.
4. iOS Simulator working
   • I have run npx cap open ios, selected a simulator, and launched the app in the iOS Simulator using Xcode.
5. Physical device deployment
   • I have configured signing in Xcode, selected my iPhone, and deployed the app to my device.
   • I can open the Temp Converter app and use it on my iPhone.

You’ve just seen the core advantages of building iOS apps with Angular + Ionic + Capacitor, and how this differs from traditional Xcode‑only development.

First, instead of wiring up Storyboards and dragging connections from UI widgets to IBOutlets and IBActions in Xcode, you designed your interface as code‑first UI using Ionic’s HTML templates and TypeScript. This approach is much friendlier to modern practices like version control, code review, and CI/CD pipelines, because your entire UI lives in readable, diff‑able source files rather than opaque Storyboard XML. It also lets you reuse your web skills across platforms and keep your layout logic close to your business logic, instead of split between Interface Builder and code.

Second, you experienced how navigation and screen transitions are handled declaratively with Angular’s router, not with ad‑hoc view controller wiring. Routes define which component shows for each URL, and Ionic’s ion-router-outlet adds mobile‑style transitions and a navigation stack on top. This means that pushing, popping, and passing data between screens follows clear, testable patterns you already know from Angular, while still feeling native on iOS.

Finally, by wrapping your Angular/Ionic app with Capacitor, you were able to run exactly the same code:

• In a browser for fast iteration.
• Inside a native iOS shell on the Simulator.
• On a physical iPhone as a real app.

You did not have to rewrite your UI in Swift or SwiftUI to reach iOS; Capacitor took care of bridging your web app into a native container that Xcode, the Simulator, and real devices all understand.

You now have a working example of:

• Code‑first UI with Ionic components.
• Navigation powered by Angular’s router.
• Cross‑platform delivery using Capacitor and Xcode.

These are the key wins that make Angular + Ionic + Capacitor a compelling option for modern iOS development and for integrating iOS into CI/CD‑driven, multi‑platform projects.