Capacitor és una plataforma de codi obert creada per l'equip d'Ionic que permet als desenvolupadors construir aplicacions web modernes que es poden desplegar com a aplicacions natives per a iOS, Android i la web. Capacitor actua com una capa d'abstracció que facilita l'accés a les funcionalitats natives del dispositiu mitjançant una API JavaScript.

• API Unificada: Proporciona una API JavaScript unificada per accedir a les funcionalitats natives del dispositiu.
• Compatibilitat amb Plugins: Suporta plugins de Cordova i permet crear plugins personalitzats.
• Desplegament Multi-Plataforma: Permet desplegar aplicacions com a aplicacions natives per a iOS, Android i com a aplicacions web progressives (PWA).
• Actualitzacions en Calent: Facilita les actualitzacions en calent sense necessitat de passar per les botigues d'aplicacions.

Per començar a utilitzar Capacitor en el teu projecte Ionic, primer has d'instal·lar-lo. Pots fer-ho utilitzant npm:

Després d'instal·lar Capacitor, has d'inicialitzar-lo en el teu projecte. Això crearà els fitxers de configuració necessaris.

• app-name: El nom de la teva aplicació.
• app-id: Un identificador únic per a la teva aplicació (per exemple, com.example.app).

Capacitor permet afegir plataformes com iOS i Android al teu projecte. Pots afegir aquestes plataformes utilitzant les següents comandes:

Després d'afegir les plataformes, has de sincronitzar el teu projecte per assegurar-te que tots els canvis es reflecteixin en els projectes natius.

Capacitor ve amb una sèrie de plugins oficials que permeten accedir a funcionalitats natives com la càmera, la geolocalització, les notificacions push, etc. A continuació es mostra com utilitzar el plugin de la càmera.

Capacitor també permet crear plugins personalitzats per accedir a funcionalitats específiques del dispositiu que no estan cobertes pels plugins oficials.

Després de generar el plugin, has d'implementar les funcionalitats desitjades en els fitxers generats. Capacitor proporciona una estructura de fitxers per a la implementació de plugins en JavaScript/TypeScript, així com en llenguatges natius com Swift (per a iOS) i Java (per a Android).

Després d'implementar el plugin, pots utilitzar-lo en el teu projecte de la mateixa manera que utilitzaries qualsevol altre plugin de Capacitor.

Crear una aplicació Ionic que utilitzi Capacitor per accedir a la càmera del dispositiu i mostrar la imatge capturada.

1. Crear un Nou Projecte Ionic:

   ionic start cameraApp blank --type=angular
   cd cameraApp
   

2. Instal·lar i Configurar Capacitor:

   npm install @capacitor/core @capacitor/cli
   npx cap init cameraApp com.example.cameraApp
   npx cap add ios
   npx cap add android
   

3. Instal·lar el Plugin de la Càmera:

   npm install @capacitor/camera
   npx cap sync
   

4. Modificar el Codi per Utilitzar la Càmera: Edita src/app/home/home.page.ts per afegir la funcionalitat de la càmera:

   import { Component } from '@angular/core';
   import { Camera, CameraResultType } from '@capacitor/camera';
   
   @Component({
     selector: 'app-home',
     templateUrl: 'home.page.html',
     styleUrls: ['home.page.scss'],
   })
   export class HomePage {
     imageUrl: string;
   
     constructor() {}
   
     async takePicture() {
       const image = await Camera.getPhoto({
         quality: 90,
         allowEditing: true,
         resultType: CameraResultType.Uri
       });
   
       this.imageUrl = image.webPath;
     }
   }
   

5. Modificar la Interfície d'Usuari: Edita src/app/home/home.page.html per afegir un botó i una imatge:

   <ion-header>
     <ion-toolbar>
       <ion-title>
         Camera App
       </ion-title>
     </ion-toolbar>
   </ion-header>
   
   <ion-content>
     <ion-button (click)="takePicture()">Take Picture</ion-button>
     <img *ngIf="imageUrl" [src]="imageUrl" />
   </ion-content>
   

6. Executar l'Aplicació:

   ionic build
   npx cap copy
   npx cap open ios
   npx cap open android
   

En aquesta secció, hem après què és Capacitor, com configurar-lo en un projecte Ionic, com utilitzar plugins oficials i com crear plugins personalitzats. Capacitor és una eina poderosa que facilita l'accés a funcionalitats natives del dispositiu, permetent als desenvolupadors crear aplicacions modernes i multi-plataforma amb facilitat.