El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia

HOME

Introducción

Capacitor es una plataforma de código abierto que permite a los desarrolladores crear aplicaciones web modernas que se pueden ejecutar de manera nativa en dispositivos móviles y en la web. Es una alternativa moderna a Cordova y está diseñado para trabajar de manera óptima con Ionic.

Objetivos del Tema

Entender qué es Capacitor y sus beneficios.
Aprender a agregar Capacitor a un proyecto Ionic.
Conocer cómo usar Capacitor para acceder a funcionalidades nativas del dispositivo.
Realizar una integración básica de Capacitor en una aplicación Ionic.

¿Qué es Capacitor?

Capacitor es una herramienta que permite a los desarrolladores web acceder a las funcionalidades nativas del dispositivo utilizando JavaScript. Proporciona una API unificada para trabajar con diferentes plataformas (iOS, Android, Web) y facilita la creación de aplicaciones híbridas.

Beneficios de Capacitor

API Unificada: Una sola API para múltiples plataformas.
Compatibilidad con Web: Las aplicaciones pueden ejecutarse como aplicaciones web progresivas (PWA).
Integración con Ionic: Diseñado para trabajar perfectamente con Ionic.
Plugins Nativos: Acceso a una amplia gama de plugins nativos y la posibilidad de crear plugins personalizados.

Agregando Capacitor a un Proyecto Ionic

Paso 1: Crear un Proyecto Ionic

Si aún no tienes un proyecto Ionic, crea uno utilizando el siguiente comando:

ionic start myApp blank

Paso 2: Instalar Capacitor

Navega al directorio de tu proyecto y ejecuta los siguientes comandos para instalar Capacitor:

cd myApp
npm install @capacitor/core @capacitor/cli

Paso 3: Inicializar Capacitor

Inicializa Capacitor en tu proyecto con el siguiente comando:

npx cap init

Este comando te pedirá que ingreses el nombre de tu aplicación y el identificador del paquete (por ejemplo, com.example.myapp).

Paso 4: Agregar Plataformas

Agrega las plataformas en las que deseas ejecutar tu aplicación (iOS, Android, Web):

npx cap add android
npx cap add ios

Paso 5: Sincronizar el Proyecto

Cada vez que realices cambios en tu proyecto, sincroniza Capacitor con el siguiente comando:

npx cap sync

Usando Capacitor para Acceder a Funcionalidades Nativas

Capacitor proporciona una serie de plugins nativos que puedes usar para acceder a funcionalidades del dispositivo como la cámara, el almacenamiento, la geolocalización, etc.

Ejemplo: Usando la Cámara

Paso 1: Instalar el Plugin de Cámara

Instala el plugin de cámara de Capacitor:

npm install @capacitor/camera
npx cap sync

Paso 2: Importar y Usar el Plugin en Tu Código

Abre el archivo src/app/home/home.page.ts y agrega el siguiente código para usar la cámara:

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 {
  constructor() {}

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

    const imageUrl = image.webPath;
    // Puedes usar la URL de la imagen para mostrarla en tu aplicación
    console.log(imageUrl);
  }
}

Paso 3: Agregar un Botón en la Vista

Abre el archivo src/app/home/home.page.html y agrega un botón para tomar una foto:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-button (click)="takePicture()">Take Picture</ion-button>
</ion-content>

Ejercicio Práctico

Ejercicio 1: Acceder a la Geolocalización

Instalar el Plugin de Geolocalización:

npm install @capacitor/geolocation
npx cap sync

Usar el Plugin en Tu Código:

Abre src/app/home/home.page.ts y agrega el siguiente código:

import { Component } from '@angular/core';
import { Geolocation } from '@capacitor/geolocation';

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

  async getCurrentPosition() {
    const coordinates = await Geolocation.getCurrentPosition();
    console.log('Current position:', coordinates);
  }
}

Agregar un Botón en la Vista:

Abre src/app/home/home.page.html y agrega un botón para obtener la posición actual:

<ion-header>
  <ion-toolbar>
    <ion-title>
      Home
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-button (click)="getCurrentPosition()">Get Current Position</ion-button>
</ion-content>

Solución del Ejercicio

Al hacer clic en el botón "Get Current Position", la consola del navegador mostrará las coordenadas actuales del dispositivo.

Conclusión

En esta sección, hemos aprendido qué es Capacitor y cómo integrarlo en un proyecto Ionic. También hemos visto cómo usar Capacitor para acceder a funcionalidades nativas del dispositivo mediante plugins. Capacitor es una herramienta poderosa que facilita la creación de aplicaciones híbridas modernas y eficientes.

Próximos Pasos

En el siguiente tema, exploraremos cómo crear aplicaciones web progresivas (PWA) con Ionic, aprovechando las capacidades de Capacitor para ofrecer una experiencia de usuario nativa en la web.

Usando Capacitor