Ionic Capacitor: Guía Completa de Plugins Nativos

Accediendo a Funcionalidades Nativas con Capacitor

Capacitor es el puente entre tu aplicación web y las capacidades nativas del dispositivo. Aprende a usar los plugins más importantes para crear aplicaciones móviles completas.

Plugins Esenciales

1. Camera - Captura de Fotos

import { Camera, CameraResultType, CameraSource } from '@capacitor/camera';

async takePicture() {
  const image = await Camera.getPhoto({
    quality: 90,
    allowEditing: true,
    resultType: CameraResultType.Uri,
    source: CameraSource.Camera
  });
  
  this.imageUrl = image.webPath;
}

2. Geolocation - Ubicación GPS

import { Geolocation } from '@capacitor/geolocation';

async getCurrentPosition() {
  const coordinates = await Geolocation.getCurrentPosition();
  console.log('Lat:', coordinates.coords.latitude);
  console.log('Lng:', coordinates.coords.longitude);
}

// Watch position
const watchId = await Geolocation.watchPosition({}, (position) => {
  console.log('Nueva posición:', position);
});

3. Storage - Almacenamiento Local

import { Preferences } from '@capacitor/preferences';

// Guardar datos
await Preferences.set({
  key: 'user',
  value: JSON.stringify(userData)
});

// Leer datos
const { value } = await Preferences.get({ key: 'user' });
const user = JSON.parse(value);

// Eliminar
await Preferences.remove({ key: 'user' });

4. Push Notifications

import { PushNotifications } from '@capacitor/push-notifications';

async initPushNotifications() {
  // Solicitar permisos
  let permStatus = await PushNotifications.checkPermissions();
  
  if (permStatus.receive === 'prompt') {
    permStatus = await PushNotifications.requestPermissions();
  }
  
  if (permStatus.receive === 'granted') {
    await PushNotifications.register();
  }
  
  // Escuchar eventos
  PushNotifications.addListener('registration', (token) => {
    console.log('Token:', token.value);
  });
  
  PushNotifications.addListener('pushNotificationReceived', (notification) => {
    console.log('Notificación recibida:', notification);
  });
}

Plugins Avanzados

5. Filesystem - Manejo de Archivos

import { Filesystem, Directory } from '@capacitor/filesystem';

// Escribir archivo
await Filesystem.writeFile({
  path: 'secrets/text.txt',
  data: 'Contenido del archivo',
  directory: Directory.Documents
});

// Leer archivo
const contents = await Filesystem.readFile({
  path: 'secrets/text.txt',
  directory: Directory.Documents
});

// Listar archivos
const result = await Filesystem.readdir({
  path: 'secrets',
  directory: Directory.Documents
});

6. Network - Estado de Conexión

import { Network } from '@capacitor/network';

const status = await Network.getStatus();
console.log('Conectado:', status.connected);
console.log('Tipo:', status.connectionType);

Network.addListener('networkStatusChange', (status) => {
  console.log('Estado de red cambió:', status);
});

Creando un Plugin Personalizado

// src/plugins/my-plugin.ts
import { registerPlugin } from '@capacitor/core';

export interface MyPluginPlugin {
  echo(options: { value: string }): Promise<{ value: string }>;
}

const MyPlugin = registerPlugin('MyPlugin');

export default MyPlugin;

Mejores Prácticas

1. Manejo de Permisos: Siempre verifica y solicita permisos antes de usar funcionalidades nativas
2. Detección de Plataforma: Usa Capacitor.getPlatform() para código específico
3. Fallbacks Web: Implementa alternativas para la web cuando sea posible
4. Testing: Prueba en dispositivos reales, no solo emuladores
5. Actualización: Mantén Capacitor y plugins actualizados

Conclusión

Capacitor hace que acceder a funcionalidades nativas sea simple y directo. Con estos plugins puedes crear aplicaciones móviles completas que aprovechan todo el potencial del dispositivo, manteniendo una base de código compartida entre plataformas.