Bootcamp

# ===== 0-30 min: scaffold =====
npm install -g @ionic/cli
ionic start my-app tabs --type=angular --capacitor
cd my-app
ionic serve

# Three tabs already; explore the structure (see ionic/project lesson).

# ===== 30-60 min: build pages =====
ionic generate page tasks
ionic generate page task-detail
ionic generate component task-item
ionic generate service task

# Wire routes in app-routing.module.ts.

# ===== 60-120 min: forms =====
# Reactive forms in tasks/tasks.page.ts:
import { FormBuilder, Validators } from '@angular/forms';

constructor(private fb: FormBuilder, private taskService: TaskService) {}
form = this.fb.group({
  title: ['', Validators.required],
  due: [''],
});

save() {
  if (this.form.valid) {
    this.taskService.add(this.form.value);
    this.form.reset();
  }
}

# Template:
<form [formGroup]="form" (ngSubmit)="save()">
  <ion-item>
    <ion-label position="floating">Title</ion-label>
    <ion-input formControlName="title"></ion-input>
  </ion-item>
  <ion-item>
    <ion-label position="floating">Due</ion-label>
    <ion-datetime-button datetime="due"></ion-datetime-button>
    <ion-modal [keepContentsMounted]="true"><ng-template><ion-datetime id="due"></ion-datetime></ng-template></ion-modal>
  </ion-item>
  <ion-button type="submit" expand="block">Save</ion-button>
</form>

# ===== 120-180 min: list + actions =====
<ion-list>
  <ion-item-sliding *ngFor="let t of tasks">
    <ion-item>
      <ion-checkbox [(ngModel)]="t.done"></ion-checkbox>
      <ion-label>{{ t.title }}</ion-label>
    </ion-item>
    <ion-item-options side="end">
      <ion-item-option color="danger" (click)="remove(t)">Delete</ion-item-option>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

# ===== 180-240 min: native plugin =====
npm install @capacitor/local-notifications
npx cap sync

# Schedule a notification on task save:
import { LocalNotifications } from '@capacitor/local-notifications';

async save() {
  await LocalNotifications.requestPermissions();
  await LocalNotifications.schedule({
    notifications: [{
      id: Date.now(),
      title: 'Task due',
      body: this.form.value.title,
      schedule: { at: new Date(this.form.value.due) },
    }],
  });
}

# ===== 240-300 min: theme =====
# src/theme/variables.scss
:root {
  --ion-color-primary: #2563eb;
  --ion-color-primary-rgb: 37, 99, 235;
  --ion-color-primary-contrast: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root { --ion-background-color: #121212; }
}

# Add an icon + splash:
npm install -D @capacitor/assets
npx capacitor-assets generate --iconBackgroundColor '#ffffff' --splashBackgroundColor '#ffffff'

# ===== 300-360 min: build native =====
ionic build --prod
npx cap sync
npx cap open ios       # archive in Xcode
npx cap open android   # build AAB in Android Studio

# Test on real devices (livereload during dev):
ionic capacitor run ios --livereload --external

# ===== 360-420 min: store + ship =====
# Apple: TestFlight + App Store Connect submission
# Android: Internal track in Play Console; promote when ready

# ===== Patterns =====
# - ionic generate for all scaffolds
# - Capacitor plugins for native; sync after every install
# - Theme via CSS variables; dark mode via media query
# - PWA build + capacitor build from the same code

# ===== Pitfalls =====
# - Forgetting npx cap sync after plugin install
# - ionic serve as production server
# - Long lists without ion-virtual-scroll on low-end Android
# - Default app id (io.ionic.starter) shipped to stores

// 30-day Ionic bootcamp in the lesson body.