Om deelfunctionaliteit (sharing) te integreren in je Capacitor-app voor platforms zoals Facebook, Twitter of Instagram, kun je de Capacitor Share API gebruiken. Deze API maakt het mogelijk om inhoud te delen via het standaard gedeelde menu van het apparaat. Hier is een stapsgewijze gids inclusief codevoorbeelden: 1. Installatie van Capacitor Share plugin ------------------------------ Vanaf Capacitor 3 is de Share API ingebouwd en hoef je geen extra plugin te installeren. 2. Gebruik van de Share API in je app ------------------------------ Je kunt de `Share` API gebruiken om inhoud te delen. Bijvoorbeeld: ```typescript import { Share } from '@capacitor/share'; async function shareContent() { try { await Share.share({ title: 'Bekijk deze inhoud!', text: 'Hier is een interessante tekst om te delen.', url: 'https://voorbeeld.com', dialogTitle: 'Deel deze inhoud' }); } catch (error) { console.error('Fout bij delen:', error); } } ``` 3. Voorbeeld van een knop die delen activeert: ```html <button (click)="shareContent()">Deel</button> ``` 4. Toepassen op specifieke platforms ------------------------------ De Share API opent meestal het standaard deelmenu van het apparaat, waardoor gebruikers kunnen kiezen op welk platform ze willen delen (Facebook, Twitter, WhatsApp, etc.). Voor meer gerichte sharing (zoals rechtstreeks op Facebook of Twitter) moet je gebruik maken van specifieke SDK's of URL-structuren, wat complexer is en vaak platformafhankelijk. Voor directe links naar delen op bijvoorbeeld Facebook of Twitter kun je URL-structuren gebruiken: ```typescript // Delen op Twitter const twitterShareUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent('Hier is een tekst om te delen')}&url=${encodeURIComponent('https://voorbeeld.com')}`; window.open(twitterShareUrl, '_blank'); ``` Voor Facebook: ```typescript const facebookShareUrl = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent('https://voorbeeld.com')}`; window.open(facebookShareUrl, '_blank'); ``` 5. Permissies ------------------------------ De Share API zelf vereist geen speciale permissies in je `AndroidManifest.xml` of `Info.plist`. Het gebruik van `window.open()` voor URL-shares ook niet. Echter, voor volledige functionaliteit en goede gebruikerservaring, controleer je volgende permissies: **Android (AndroidManifest.xml):** ```xml <uses-permission android:name="android.permission.INTERNET" /> ``` **iOS (Info.plist):** Geen extra permissies nodig voor openen van URL's, tenzij je specifieke functies gebruikt. 6. Samenvatting ------------------------------ - Voor basis delen gebruik je `@capacitor/share`. - Voor gerichte platform-shares (Facebook, Twitter) gebruik je URL-structuren. - Permissies zijn minimaal, vooral voor URL-shares. Indien je meer geavanceerde integratie wenst (bijvoorbeeld met SDK's van Facebook of Instagram), moet je specifieke SDK's installeren en configureren, wat complexer is en afhankelijk van je platform. Heeft u nog verdere vragen of specifieke wensen?

Hier is een uitgebreide handleiding voor het integreren van deelfunctionaliteit in je Capacitor-app: ## 1. Installatie benodigde packages ```bash npm install @capacitor/share npx cap sync ``` ## 2. Basis implementatie ```typescript import { Share } from '@capacitor/share'; // Deelfunctionaliteit voor tekst async shareText() { try { await Share.share({ title: 'Interessante tekst', text: 'Dit is een interessante tekst om te delen', url: '', // Optioneel dialogTitle: 'Delen via' }); } catch (error) { console.error('Fout bij delen:', error); } } // Deelfunctionaliteit voor afbeeldingen async shareImage(imageUrl: string) { try { await Share.share({ title: 'Mijn afbeelding', text: 'Bekijk deze afbeelding', url: imageUrl, // Lokale of externe URL dialogTitle: 'Deel afbeelding' }); } catch (error) { console.error('Fout bij delen afbeelding:', error); } } // Deelfunctionaliteit voor links async shareLink(url: string, title: string = 'Interessante link') { try { await Share.share({ title: title, text: 'Bekijk deze interessante link', url: url, dialogTitle: 'Deel link' }); } catch (error) { console.error('Fout bij delen link:', error); } } ``` ## 3. Geavanceerde implementatie met platform-specifieke opties ```typescript import { Share, ShareOptions } from '@capacitor/share'; class ShareService { async shareContent(content: ShareOptions) { // Controleer of delen wordt ondersteund const canShare = await Share.canShare(); if (!canShare.value) { alert('Delen wordt niet ondersteund op dit apparaat'); return; } try { await Share.share(content); } catch (error) { console.error('Delen mislukt:', error); alert('Kan inhoud niet delen'); } } // Specifieke methoden voor verschillende content types async shareToSocialMedia(text: string, url?: string) { const content: ShareOptions = { title: 'Deel op sociale media', text: text, url: url, dialogTitle: 'Kies een platform' }; await this.shareContent(content); } async shareMultipleImages(imageUrls: string[]) { // Voor meerdere afbeeldingen moet je ze eerst combineren // of een andere aanpak gebruiken const content: ShareOptions = { title: 'Mijn foto\'s', text: 'Bekijk mijn foto\'s', url: imageUrls[0], // Eerste afbeelding als voorbeeld dialogTitle: 'Deel foto\'s' }; await this.shareContent(content); } } ``` ## 4. Configuratie voor verschillende platforms ### iOS configuratie (`capacitor.config.ts`) ```typescript import { CapacitorConfig } from '@capacitor/cli'; const config: CapacitorConfig = { appId: 'com.jouwapp.app', appName: 'Jouw App', webDir: 'www', plugins: { Share: { // iOS-specifieke opties } }, ios: { // Vereist voor externe URL's scheme: 'jouwapp', contentInset: 'always' } }; export default config; ``` ### Android configuratie (`android/app/src/main/AndroidManifest.xml`) ```xml <manifest xmlns:android="http://schemas.android.com/apk/res/android"> <application> <!-- Toestemming voor internet (voor externe links) --> <uses-permission android:name="android.permission.INTERNET" /> <!-- Toestemming voor opslag (voor lokale bestanden) --> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <!-- FileProvider voor het delen van lokale bestanden --> <provider android:name="androidx.core.content.FileProvider" android:authorities="${applicationId}.fileprovider" android:exported="false" android:grantUriPermissions="true"> <meta-data android:name="android.support.FILE_PROVIDER_PATHS" android:resource="@xml/file_paths" /> </provider> </application> </manifest> ``` ## 5. FileProvider configuratie voor Android Maak het bestand `android/app/src/main/res/xml/file_paths.xml` aan: ```xml <?xml version="1.0" encoding="utf-8"?> <paths xmlns:android="http://schemas.android.com/apk/res/android"> <external-path name="external_files" path="."/> <files-path name="files" path="."/> <cache-path name="cache" path="."/> </paths> ``` ## 6. Vereiste permissies beheren ### iOS permissies (Info.plist) ```xml <!-- Voeg toe aan ios/App/App/Info.plist --> <key>NSPhotoLibraryUsageDescription</key> <string>Deze app heeft toegang nodig tot je foto's om ze te kunnen delen</string> <key>NSPhotoLibraryAddUsageDescription</key> <string>Deze app heeft toestemming nodig om foto's op te slaan</string> ``` ### Android permissies runtime ```typescript import { Permissions } from '@capacitor/permissions'; class PermissionService { async requestStoragePermissions() { try { // Voor Android API level < 33 const permission = await Permissions.requestPermissions([ Permissions.PermissionType.Photos, Permissions.PermissionType.Storage ]); return permission; } catch (error) { console.error('Fout bij aanvragen permissies:', error); } } async checkPermissions() { const result = await Permissions.checkPermissions(); return result; } } ``` ## 7. Gebruik in component ```typescript import { Component } from '@angular/core'; // of voor React/Vue import { ShareService } from './share.service'; @Component({ selector: 'app-share', template: ` <button (click)="shareText()">Deel tekst</button> <button (click)="shareImage()">Deel afbeelding</button> <button (click)="shareLink()">Deel link</button> ` }) export class ShareComponent { constructor(private shareService: ShareService) {} async shareText() { await this.shareService.shareToSocialMedia( 'Bekijk deze geweldige app!', 'https://jouwapp.com' ); } async shareImage() { const imageUrl = 'https://example.com/image.jpg'; await this.shareService.shareContent({ title: 'Mijn foto', text: 'Bekijk deze foto', url: imageUrl }); } async shareLink() { await this.shareService.shareToSocialMedia( 'Interessante website', 'https://example.com' ); } } ``` ## Belangrijke opmerkingen: 1. **Platform verschillen**: De Share API werkt anders op iOS en Android 2. **Bestandstoegang**: Voor lokale bestanden zijn extra permissies nodig 3. **URL handling**: Zorg dat URLs correct geformatteerd zijn 4. **Error handling**: Altijd errors afvangen voor een betere gebruikerservaring Deze implementatie biedt een complete deelfunctionaliteit voor je Capacitor-app die werkt op zowel iOS als Android.