Sindbad~EG File Manager

# 📱 Capacitor Setup Guide - App Store Ready!

## 🎯 What is Capacitor?

Capacitor wraps your PWA into **native Android and iOS apps** that can be published to Google Play Store and Apple App Store.

**Benefits:**
- ✅ Publish to app stores
- ✅ Full native device access
- ✅ Better performance
- ✅ Push notifications (native)
- ✅ In-app purchases (if needed)
- ✅ Deep linking
- ✅ Biometric authentication

---

## 📋 Prerequisites

### Required Software:

#### For Android Development:
1. **Node.js** (v16 or higher) - https://nodejs.org/
2. **Android Studio** - https://developer.android.com/studio
3. **JDK 11** or higher
4. **Gradle** (comes with Android Studio)

#### For iOS Development (Mac only):
1. **Node.js** (v16 or higher)
2. **Xcode** (latest version) - From Mac App Store
3. **Xcode Command Line Tools**
4. **CocoaPods** - `sudo gem install cocoapods`

---

## 🚀 Step-by-Step Setup

### Step 1: Install Node.js

**Download and install from:** https://nodejs.org/

**Verify installation:**
```bash
node --version
npm --version
```

Should show v16+ for Node and v8+ for npm.

---

### Step 2: Install Capacitor Dependencies

Open terminal/command prompt in your project folder:

```bash
cd c:\xampp\htdocs\copmadinaarea
```

**Install dependencies:**
```bash
npm install
```

This installs all Capacitor packages listed in package.json.

---

### Step 3: Initialize Capacitor

**Run initialization:**
```bash
npx cap init
```

**When prompted:**
- App name: `Church App` (or your church name)
- App ID: `com.church.management` (or your domain in reverse)
- Web asset directory: `.` (current directory)

---

### Step 4: Add Android Platform

```bash
npm run add:android
```

This creates an `/android` folder with complete Android Studio project.

---

### Step 5: Add iOS Platform (Mac only)

```bash
npm run add:ios
```

This creates an `/ios` folder with complete Xcode project.

---

## 📱 Building for Android

### Setup Android Studio:

1. **Install Android Studio**
   - Download from: https://developer.android.com/studio
   - Install with default settings
   - Open Android Studio

2. **Install Android SDK**
   - Open Android Studio
   - Go to Tools → SDK Manager
   - Install:
     - Android SDK Platform 33 or higher
     - Android SDK Build-Tools
     - Android SDK Platform-Tools
     - Android Emulator

3. **Set Environment Variables**

   **Windows:**
   ```cmd
   setx ANDROID_HOME "C:\Users\YourUsername\AppData\Local\Android\Sdk"
   setx PATH "%PATH%;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools"
   ```

   **Mac/Linux:**
   ```bash
   export ANDROID_HOME=$HOME/Library/Android/sdk
   export PATH=$PATH:$ANDROID_HOME/platform-tools
   export PATH=$PATH:$ANDROID_HOME/tools
   ```

### Build Android App:

1. **Copy web assets:**
   ```bash
   npm run copy
   ```

2. **Open in Android Studio:**
   ```bash
   npm run open:android
   ```

3. **In Android Studio:**
   - Wait for Gradle sync
   - Click "Build" → "Build Bundle(s) / APK(s)" → "Build APK(s)"
   - APK will be in `android/app/build/outputs/apk/debug/`

4. **Test on Emulator:**
   - Click green play button in Android Studio
   - Select emulator or connected device
   - App will install and launch

---

## 🍎 Building for iOS (Mac Only)

### Setup Xcode:

1. **Install Xcode**
   - Open Mac App Store
   - Search "Xcode"
   - Install (it's large, ~12GB)

2. **Install Command Line Tools**
   ```bash
   xcode-select --install
   ```

3. **Install CocoaPods**
   ```bash
   sudo gem install cocoapods
   ```

### Build iOS App:

1. **Copy web assets:**
   ```bash
   npm run copy
   ```

2. **Update pods:**
   ```bash
   cd ios/App
   pod install
   cd ../..
   ```

3. **Open in Xcode:**
   ```bash
   npm run open:ios
   ```

4. **In Xcode:**
   - Select your team (Apple Developer Account required)
   - Click play button to build and run
   - Test on simulator or device

---

## 🎨 Customizing Your App

### 1. App Name

**Edit `capacitor.config.json`:**
```json
{
  "appName": "Your Church Name"
}
```

**Android:** Also edit `android/app/src/main/res/values/strings.xml`
**iOS:** Also update in Xcode project settings

### 2. App ID (Bundle Identifier)

**Edit `capacitor.config.json`:**
```json
{
  "appId": "com.yourchurch.app"
}
```

**Note:** Use reverse domain format. Must be unique for app stores.

### 3. App Icons

**Android Icons:** Place in `android/app/src/main/res/`
- `mipmap-mdpi/` - 48x48
- `mipmap-hdpi/` - 72x72
- `mipmap-xhdpi/` - 96x96
- `mipmap-xxhdpi/` - 144x144
- `mipmap-xxxhdpi/` - 192x192

**iOS Icons:** Place in `ios/App/App/Assets.xcassets/AppIcon.appiconset/`
- Multiple sizes from 20x20 to 1024x1024

**Easy Icon Generator:** https://www.appicon.co/

### 4. Splash Screen

**Android:** 
- Place images in `android/app/src/main/res/drawable/`
- Named `splash.png`

**iOS:**
- Use Xcode's LaunchScreen.storyboard
- Or add images to Assets

### 5. Colors & Theme

**Edit `capacitor.config.json`:**
```json
{
  "plugins": {
    "SplashScreen": {
      "backgroundColor": "#1E40AF"
    },
    "StatusBar": {
      "backgroundColor": "#1E40AF"
    }
  }
}
```

---

## 🔧 Testing Your App

### Test on Android:

1. **Using Emulator:**
   ```bash
   npm run open:android
   # Then click play in Android Studio
   ```

2. **Using Physical Device:**
   - Enable Developer Mode on phone
   - Enable USB Debugging
   - Connect via USB
   - Select device in Android Studio
   - Click play

### Test on iOS:

1. **Using Simulator:**
   ```bash
   npm run open:ios
   # Then click play in Xcode
   ```

2. **Using Physical Device:**
   - Connect iPhone/iPad
   - Select device in Xcode
   - Click play (requires Apple Developer Account)

---

## 📦 Building Release Versions

### Android Release (AAB for Play Store):

1. **Generate Signing Key:**
   ```bash
   keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
   ```

2. **Edit `android/app/build.gradle`:**
   ```gradle
   android {
       ...
       signingConfigs {
           release {
               storeFile file('my-release-key.keystore')
               storePassword 'your-password'
               keyAlias 'my-key-alias'
               keyPassword 'your-password'
           }
       }
       buildTypes {
           release {
               signingConfig signingConfigs.release
           }
       }
   }
   ```

3. **Build AAB:**
   ```bash
   cd android
   ./gradlew bundleRelease
   ```

4. **Output:** `android/app/build/outputs/bundle/release/app-release.aab`

### iOS Release (IPA for App Store):

1. **In Xcode:**
   - Select "Any iOS Device (arm64)"
   - Product → Archive
   - Wait for build
   - Click "Distribute App"
   - Follow wizard

2. **Upload to App Store Connect**
   - Use Xcode or Transporter app
   - Requires Apple Developer Account ($99/year)

---

## 🚀 Publishing to App Stores

### Google Play Store:

**Requirements:**
- Google Play Console account ($25 one-time)
- App AAB file
- App screenshots
- App description
- Privacy policy

**Steps:**
1. Go to https://play.google.com/console
2. Create new app
3. Upload AAB
4. Add store listing (description, screenshots)
5. Set pricing (free/paid)
6. Submit for review (1-3 days)

### Apple App Store:

**Requirements:**
- Apple Developer Account ($99/year)
- App IPA file
- App screenshots
- App description
- Privacy policy

**Steps:**
1. Go to https://appstoreconnect.apple.com
2. Create new app
3. Upload IPA via Xcode or Transporter
4. Add app information
5. Add screenshots
6. Submit for review (1-7 days)

---

## 🔌 Using Native Features

### Camera (QR Scanner):

```javascript
import { Camera } from '@capacitor/camera';

async function takePhoto() {
  const image = await Camera.getPhoto({
    quality: 90,
    allowEditing: false,
    resultType: CameraResultType.Uri
  });
  
  const imageUrl = image.webPath;
  // Use imageUrl
}
```

### Push Notifications:

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

// Request permission
await PushNotifications.requestPermissions();

// Register for notifications
await PushNotifications.register();

// Listen for token
PushNotifications.addListener('registration', (token) => {
  console.log('Push token:', token.value);
});
```

### Haptic Feedback:

```javascript
import { Haptics, ImpactStyle } from '@capacitor/haptics';

// Vibrate on button click
await Haptics.impact({ style: ImpactStyle.Light });
```

### Share:

```javascript
import { Share } from '@capacitor/share';

await Share.share({
  title: 'Check out this event',
  text: 'Join us for our church event',
  url: 'https://yourchurch.com/event',
  dialogTitle: 'Share with friends'
});
```

---

## 📊 NPM Scripts Reference

| Command | Description |
|---------|-------------|
| `npm install` | Install all dependencies |
| `npm run add:android` | Add Android platform |
| `npm run add:ios` | Add iOS platform |
| `npm run copy` | Copy web assets to native projects |
| `npm run sync` | Sync web assets and plugins |
| `npm run open:android` | Open Android Studio |
| `npm run open:ios` | Open Xcode |
| `npm run build:android` | Copy and open Android |
| `npm run build:ios` | Copy and open iOS |

---

## 🐛 Common Issues

### Issue: Capacitor command not found
**Solution:**
```bash
npm install -g @capacitor/cli
```

### Issue: Android build fails
**Solution:**
- Update Android Studio
- Check ANDROID_HOME is set
- Run `./gradlew clean` in android folder

### Issue: iOS pods install fails
**Solution:**
```bash
cd ios/App
pod repo update
pod install
```

### Issue: App doesn't update
**Solution:**
```bash
npm run sync
```

---

## 📁 Project Structure After Setup

```
copmadinaarea/
├── android/                    ← Android project
│   ├── app/
│   │   ├── src/
│   │   └── build.gradle
│   └── build.gradle
├── ios/                        ← iOS project
│   └── App/
│       ├── App/
│       └── App.xcodeproj
├── node_modules/               ← Dependencies
├── package.json               ← Dependencies config
├── capacitor.config.json      ← Capacitor config
└── [All your web files]       ← Web assets
```

---

## ✅ Deployment Checklist

**Before Publishing:**
- [ ] Test on real Android device
- [ ] Test on real iOS device
- [ ] All features working
- [ ] App icons created (all sizes)
- [ ] Splash screens created
- [ ] Privacy policy created
- [ ] App description written
- [ ] Screenshots taken (5-8 per platform)
- [ ] App store accounts created
- [ ] Signed APK/AAB created (Android)
- [ ] Archived IPA created (iOS)
- [ ] Terms of service ready
- [ ] Support email set up

---

## 🎯 Next Steps

1. **Now:** Install Node.js and Capacitor
2. **Then:** Build Android app
3. **After:** Build iOS app (if you have Mac)
4. **Finally:** Submit to app stores

---

## 📚 Resources

- Capacitor Docs: https://capacitorjs.com/docs
- Android Studio: https://developer.android.com/studio
- Xcode: https://developer.apple.com/xcode/
- Google Play Console: https://play.google.com/console
- App Store Connect: https://appstoreconnect.apple.com

---

## 💡 Pro Tips

1. **Test Early:** Test on real devices often
2. **Version Control:** Use Git before major changes
3. **Backup Keys:** Save signing keys securely
4. **Update Regularly:** Keep Capacitor and plugins updated
5. **Monitor Reviews:** Respond to app store reviews

---

Your church app is now ready for the app stores! 🎉📱

**Need help?** Check the detailed guides in the project folder!