Memulai dengan Target Berbagi

Panduan ini akan memandu Anda dalam mengintegrasikan plugin Capacitor Share Target untuk memungkinkan aplikasi Anda menerima konten bersama dari aplikasi lain.

Instalasi

Instal plugin menggunakan npm:

npm install @capgo/capacitor-share-target
npx cap sync

Android Konfigurasi

Tambahkan filter maksud ke AndroidManifest.xml Anda di dalam tag <activity>:

Terima Konten Teks

<intent-filter>
    <action android:name="android.intent.action.SEND" />
    <category android:name="android.intent.category.DEFAULT" />
    <data android:mimeType="text/*" />
</intent-filter>

Terima Gambar

<intent-filter>
    <action android:name="android.intent.action.SEND" />
    <category android:name="android.intent.category.DEFAULT" />
    <data android:mimeType="image/*" />
</intent-filter>

<intent-filter>
    <action android:name="android.intent.action.SEND_MULTIPLE" />
    <category android:name="android.intent.category.DEFAULT" />
    <data android:mimeType="image/*" />
</intent-filter>

Terima Semua Jenis Konten

<intent-filter>
    <action android:name="android.intent.action.SEND" />
    <category android:name="android.intent.category.DEFAULT" />
    <data android:mimeType="*/*" />
</intent-filter>

<intent-filter>
    <action android:name="android.intent.action.SEND_MULTIPLE" />
    <category android:name="android.intent.category.DEFAULT" />
    <data android:mimeType="*/*" />
</intent-filter>

iOS Konfigurasi

Untuk iOS, Anda perlu membuat Ekstensi Berbagi:

1. Buat Ekstensi Berbagi di Xcode

Buka proyek Anda di Xcode
Buka File > Baru > Target
Pilih Bagikan Ekstensi dan klik Berikutnya
Beri nama (misalnya, “ShareExtension”) dan klik Selesai
Jika diminta, aktifkan skema tersebut

2. Konfigurasikan Grup Aplikasi

Di target aplikasi utama Anda, buka Penandatanganan & Kemampuan
Klik + Kapabilitas dan tambahkan Grup Aplikasi
Buat atau pilih grup aplikasi (mis., group.com.yourcompany.yourapp)
Ulangi untuk target Share Extension

3. Perbarui Kode Ekstensi Berbagi

Ekstensi Berbagi perlu menyimpan data bersama ke wadah grup aplikasi sehingga aplikasi utama Anda dapat mengaksesnya.

Untuk detail penyiapan iOS, lihat dokumentasi Ekstensi Berbagi Apple.

Penggunaan Dasar

Impor Plugin

import { CapacitorShareTarget } from '@capgo/capacitor-share-target';

Dengarkan Konten yang Dibagikan

CapacitorShareTarget.addListener('shareReceived', (event) => {
  console.log('Received share event');
  console.log('Title:', event.title);
  console.log('Texts:', event.texts);

  // Handle shared files
  if (event.files && event.files.length > 0) {
    event.files.forEach(file => {
      console.log(`File: ${file.name}`);
      console.log(`Type: ${file.mimeType}`);
      console.log(`URI: ${file.uri}`);
    });
  }
});

Contoh Lengkap

Berikut adalah contoh komprehensif yang menangani berbagai jenis konten bersama:

import { CapacitorShareTarget } from '@capgo/capacitor-share-target';

class ShareTargetService {
  private listener: any;

  initialize() {
    this.listener = CapacitorShareTarget.addListener('shareReceived', (event) => {
      this.handleSharedContent(event);
    });

    console.log('Share target listener initialized');
  }

  handleSharedContent(event: any) {
    console.log('=== Share Received ===');

    // Handle title
    if (event.title) {
      console.log('Title:', event.title);
      this.showNotification('Shared: ' + event.title);
    }

    // Handle text content
    if (event.texts && event.texts.length > 0) {
      event.texts.forEach((text: string, index: number) => {
        console.log(`Text ${index + 1}:`, text);
        this.processSharedText(text);
      });
    }

    // Handle files
    if (event.files && event.files.length > 0) {
      console.log(`Received ${event.files.length} file(s)`);

      event.files.forEach((file: any) => {
        console.log('File details:');
        console.log('  Name:', file.name);
        console.log('  Type:', file.mimeType);
        console.log('  URI:', file.uri);

        this.processSharedFile(file);
      });
    }
  }

  processSharedText(text: string) {
    // Check if it's a URL
    if (this.isURL(text)) {
      console.log('Shared URL detected:', text);
      // Handle URL (e.g., create bookmark)
      this.saveBookmark(text);
    } else {
      console.log('Shared text detected');
      // Handle plain text (e.g., create note)
      this.createNote(text);
    }
  }

  processSharedFile(file: any) {
    const fileType = file.mimeType.split('/')[0];

    switch (fileType) {
      case 'image':
        console.log('Processing shared image');
        this.handleImage(file);
        break;

      case 'video':
        console.log('Processing shared video');
        this.handleVideo(file);
        break;

      case 'audio':
        console.log('Processing shared audio');
        this.handleAudio(file);
        break;

      case 'application':
        console.log('Processing shared document');
        this.handleDocument(file);
        break;

      default:
        console.log('Processing generic file');
        this.handleGenericFile(file);
    }
  }

  handleImage(file: any) {
    // Process image file
    console.log('Saving image:', file.name);
    // Implementation: Save to gallery, upload, etc.
  }

  handleVideo(file: any) {
    // Process video file
    console.log('Saving video:', file.name);
  }

  handleAudio(file: any) {
    // Process audio file
    console.log('Saving audio:', file.name);
  }

  handleDocument(file: any) {
    // Process document file
    console.log('Saving document:', file.name);
  }

  handleGenericFile(file: any) {
    // Process generic file
    console.log('Saving file:', file.name);
  }

  isURL(text: string): boolean {
    try {
      new URL(text);
      return true;
    } catch {
      return false;
    }
  }

  saveBookmark(url: string) {
    console.log('Creating bookmark for:', url);
    // Implementation
  }

  createNote(text: string) {
    console.log('Creating note with text:', text.substring(0, 50));
    // Implementation
  }

  showNotification(message: string) {
    console.log('Notification:', message);
    // Show toast or notification
  }

  cleanup() {
    if (this.listener) {
      this.listener.remove();
    }
  }
}

// Usage
const shareTarget = new ShareTargetService();
shareTarget.initialize();

// Cleanup when app closes
// shareTarget.cleanup();

Integrasi Reaksi

import { useEffect } from 'react';
import { CapacitorShareTarget } from '@capgo/capacitor-share-target';

function useShareTarget(onShareReceived: (event: any) => void) {
  useEffect(() => {
    const listener = CapacitorShareTarget.addListener('shareReceived', onShareReceived);

    return () => {
      listener.remove();
    };
  }, [onShareReceived]);
}

// Usage in component
function App() {
  useShareTarget((event) => {
    console.log('Share received:', event);
    // Handle shared content
  });

  return <div>Your App</div>;
}

Integrasi Vue

import { onMounted, onUnmounted } from 'vue';
import { CapacitorShareTarget } from '@capgo/capacitor-share-target';

export default {
  setup() {
    let listener: any;

    onMounted(() => {
      listener = CapacitorShareTarget.addListener('shareReceived', (event) => {
        console.log('Share received:', event);
        // Handle shared content
      });
    });

    onUnmounted(() => {
      if (listener) {
        listener.remove();
      }
    });
  }
};

Menangani Berbagai Jenis Konten

URL

if (event.texts && event.texts.length > 0) {
  const text = event.texts[0];

  if (text.startsWith('http://') || text.startsWith('https://')) {
    // Handle URL
    window.open(text, '_blank');
  }
}

Gambar

if (event.files) {
  const images = event.files.filter(f => f.mimeType.startsWith('image/'));

  images.forEach(async (image) => {
    // Read and display image
    const response = await fetch(image.uri);
    const blob = await response.blob();
    const imageUrl = URL.createObjectURL(blob);

    // Display or process image
    console.log('Image URL:', imageUrl);
  });
}

Banyak File

if (event.files && event.files.length > 1) {
  console.log(`Processing ${event.files.length} files`);

  const processPromises = event.files.map(file =>
    processFile(file)
  );

  await Promise.all(processPromises);
  console.log('All files processed');
}

Praktik Terbaik

Menangani Berbagai Jenis Konten: Bersiaplah untuk menerima teks, URL, dan file
Validasi Konten: Periksa jenis MIME sebelum diproses
Berikan Masukan: Menampilkan kepada pengguna apa yang telah diterima
Menangani Kesalahan: URI file mungkin tidak valid atau tidak dapat diakses
Bersihkan Pendengar: Hapus pendengar bila tidak diperlukan
Uji Secara Menyeluruh: Uji dengan berbagai aplikasi dan jenis konten
Permintaan Izin: Beberapa jenis file mungkin memerlukan izin tambahan

Masalah Umum

Berbagi Tidak Berfungsi di Android

Pastikan filter maksud dikonfigurasi dengan benar di AndroidManifest.xml dalam tag <activity> yang memiliki android.intent.action.MAIN.

iOS Ekstensi Berbagi Tidak Muncul

Verifikasi Grup Aplikasi dikonfigurasi di kedua target
Pastikan Ekstensi Berbagi diaktifkan
Periksa apakah Info.plist di Share Extension memiliki konfigurasi yang benar

Kesalahan Akses File

try {
  const response = await fetch(file.uri);
  const blob = await response.blob();
  // Process blob
} catch (error) {
  console.error('Failed to access file:', error);
  // Show error to user
}

Langkah Selanjutnya

Jelajahi Referensi API untuk dokumentasi metode lengkap
Lihat aplikasi contoh untuk penggunaan lanjutan
Lihat tutorial untuk contoh implementasi selengkapnya