Ionic în 2024: Ghidul Complet pentru Aplicații Hybrid Cross-Platform

# Instalează Ionic CLI global
npm install -g @ionic/cli

# Verifică instalarea
ionic --version

# Creează un proiect nou
ionic start myApp tabs --type=angular

# Navighează în director
cd myApp

# Rulează aplicația în browser
ionic serve

# Adaugă Capacitor la proiect
ionic integrations enable capacitor

# Construiește aplicația web
ionic build

# Adaugă platforme native
ionic cap add ios
ionic cap add android

# Deschide în IDE-ul nativ
ionic cap open ios
ionic cap open android

// src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { RouteReuseStrategy } from '@angular/router';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule, 
    IonicModule.forRoot(), 
    AppRoutingModule
  ],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

<!-- src/app/home/home.page.html -->
<ion-header>
  <ion-toolbar>
    <ion-title>My Ionic App</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="openMenu()">
        <ion-icon name="menu"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-card>
    <ion-card-header>
      <ion-card-title>Welcome to Ionic</ion-card-title>
      <ion-card-subtitle>Cross-platform development made easy</ion-card-subtitle>
    </ion-card-header>
    <ion-card-content>
      <p>Build amazing mobile apps with web technologies</p>
      <ion-button expand="block" (click)="startTour()">
        Get Started
      </ion-button>
    </ion-card-content>
  </ion-card>

  <ion-list>
    <ion-item *ngFor="let item of items" (click)="selectItem(item)">
      <ion-avatar slot="start">
        <ion-img [src]="item.avatar"></ion-img>
      </ion-avatar>
      <ion-label>
        <h2>{{ item.name }}</h2>
        <p>{{ item.description }}</p>
      </ion-label>
    </ion-item>
  </ion-list>
</ion-content>

// src/app/services/data.service.ts
import { Injectable, signal } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { BehaviorSubject, Observable } from 'rxjs';

export interface Task {
  id: string;
  title: string;
  completed: boolean;
  priority: 'low' | 'medium' | 'high';
}

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private apiUrl = 'https://api.example.com';
  
  // Folosim Signals pentru state management modern
  private _tasks = signal<Task[]>([]);
  private _loading = signal(false);
  
  // Readonly signals pentru componente
  tasks = this._tasks.asReadonly();
  loading = this._loading.asReadonly();

  constructor(private http: HttpClient) {
    this.loadTasks();
  }

  async loadTasks() {
    this._loading.set(true);
    try {
      const tasks = await this.http.get<Task[]>(`${this.apiUrl}/tasks`).toPromise();
      this._tasks.set(tasks || []);
    } catch (error) {
      console.error('Error loading tasks:', error);
    } finally {
      this._loading.set(false);
    }
  }

  addTask(task: Omit<Task, 'id'>) {
    const newTask = { ...task, id: Date.now().toString() };
    this._tasks.update(current => [...current, newTask]);
  }

  updateTask(id: string, updates: Partial<Task>) {
    this._tasks.update(current => 
      current.map(task => 
        task.id === id ? { ...task, ...updates } : task
      )
    );
  }

  deleteTask(id: string) {
    this._tasks.update(current => current.filter(task => task.id !== id));
  }
}

// src/app/services/native.service.ts
import { Injectable } from '@angular/core';
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';
import { Geolocation } from '@capacitor/geolocation';
import { LocalNotifications } from '@capacitor/local-notifications';
import { Storage } from '@capacitor/storage';

@Injectable({
  providedIn: 'root'
})
export class NativeService {

  async takePicture() {
    try {
      const image = await Camera.getPhoto({
        quality: 90,
        allowEditing: false,
        resultType: CameraResultType.Uri,
        source: CameraSource.Prompt
      });

      return image.webPath;
    } catch (error) {
      console.error('Error taking picture:', error);
      throw error;
    }
  }

  async getCurrentPosition() {
    try {
      const coordinates = await Geolocation.getCurrentPosition({
        enableHighAccuracy: true,
        timeout: 10000
      });

      return {
        lat: coordinates.coords.latitude,
        lng: coordinates.coords.longitude
      };
    } catch (error) {
      console.error('Error getting location:', error);
      throw error;
    }
  }

  async scheduleNotification(title: string, body: string, scheduleAt: Date) {
    await LocalNotifications.schedule({
      notifications: [
        {
          title,
          body,
          id: Date.now(),
          schedule: { at: scheduleAt },
          sound: 'default',
          actionTypeId: '',
          extra: null
        }
      ]
    });
  }

  async setItem(key: string, value: any) {
    await Storage.set({
      key,
      value: JSON.stringify(value)
    });
  }

  async getItem(key: string) {
    const { value } = await Storage.get({ key });
    return value ? JSON.parse(value) : null;
  }
}

/* src/global.scss */
:root {
  /* Primary color palette */
  --ion-color-primary: #00d4ff;
  --ion-color-primary-rgb: 0,212,255;
  --ion-color-primary-contrast: #000000;
  --ion-color-primary-contrast-rgb: 0,0,0;
  --ion-color-primary-shade: #00bbe0;
  --ion-color-primary-tint: #1ad8ff;

  /* Secondary color palette */
  --ion-color-secondary: #0099cc;
  --ion-color-secondary-rgb: 0,153,204;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255,255,255;
  --ion-color-secondary-shade: #0087b4;
  --ion-color-secondary-tint: #1aa3d1;

  /* Background colors */
  --ion-background-color: #0a0e27;
  --ion-background-color-rgb: 10,14,39;
  --ion-text-color: #ffffff;
  --ion-text-color-rgb: 255,255,255;

  /* Custom gradient */
  --ion-gradient-primary: linear-gradient(135deg, #00d4ff, #0099cc);
}

/* Custom component styling */
.custom-card {
  --background: rgba(10, 14, 39, 0.8);
  --border-radius: 16px;
  --box-shadow: 0 20px 60px rgba(0, 212, 255, 0.2);
  border: 1px solid rgba(0, 212, 255, 0.1);
}

.gradient-button {
  --background: var(--ion-gradient-primary);
  --border-radius: 25px;
  --padding-start: 24px;
  --padding-end: 24px;
  font-weight: 600;
}

// src/app/app-routing.module.ts
const routes: Routes = [
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then(m => m.HomePageModule)
  },
  {
    path: 'profile',
    loadChildren: () => import('./profile/profile.module').then(m => m.ProfilePageModule)
  },
  {
    path: 'settings',
    loadChildren: () => import('./settings/settings.module').then(m => m.SettingsPageModule)
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { 
    preloadingStrategy: PreloadAllModules,
    enableTracing: false // Set to true for debugging
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

<ion-content>
  <ion-virtual-scroll [items]="items" approxItemHeight="80px">
    <ion-item *virtualItem="let item; let itemBounds = bounds;">
      <ion-avatar slot="start">
        <ion-img [src]="item.avatar"></ion-img>
      </ion-avatar>
      <ion-label>
        <h2>{{ item.name }}</h2>
        <p>{{ item.description }}</p>
      </ion-label>
    </ion-item>
  </ion-virtual-scroll>
</ion-content>

# Build pentru web
ionic build --prod

# Build pentru mobile
ionic cap build ios --prod
ionic cap build android --prod

# Generate icons și splash screens
ionic capacitor resources

# Deploy pe app stores
# iOS: Xcode → Archive → Upload to App Store
# Android: Generate signed APK/AAB