Objective:

Your goal is to create an Angular schematic that automates the process of adding Capacitor to an existing Angular project, including setting up the necessary files, dependencies, and configurations for building cross-platform apps using Capacitor.

Step 1: Set Up an Angular Project

Create an Angular Project (if you don't already have one):

 ng new capacitor-angular-schematic-challenge --routing --style=scss
 cd capacitor-angular-schematic-challenge

Install Capacitor: To integrate Capacitor into your Angular app, install the necessary dependencies:
```
 npm install @capacitor/core @capacitor/cli
```
Initialize Capacitor: Initialize Capacitor in your Angular project:
```
 npx cap init
```
This command will prompt you for the app name and app id, which will be used in the generated Capacitor configuration.

Prefer to use the direct commands mentioned at the bottom of the page.

Step 2: Create a New Schematic to Automate Capacitor Setup

Generate a New Schematic Project: To create your own schematic, you'll need to generate a schematic workspace using Angular Schematics CLI. In a separate folder, run:
```
 ng generate @schematics/schematics:schematic capacitor-setup
 cd capacitor-setup
```
This will create a new schematic project where you can write the logic to automate the integration of Capacitor.

Step 3: Define Your Schematic Logic

Modify the Schematic: Open the src/collection.json file, and add the schematic configuration for the Capacitor setup:

 {
   "schematics": {
     "capacitor-setup": {
       "description": "Integrates Capacitor into the Angular project.",
       "schema": "./schema.json"
     }
   }
 }

Create schema.json: In the src folder, create a schema.json file that defines the input schema for your schematic:

 {
   "$schema": "http://json-schema.org/schema",
   "id": "CapacitorSchematicSchema",
   "title": "Capacitor Setup Schema",
   "type": "object",
   "properties": {
     "appName": {
       "type": "string",
       "description": "The name of the Capacitor app."
     },
     "appId": {
       "type": "string",
       "description": "The app ID (e.g., com.example.app)."
     },
     "android": {
       "type": "boolean",
       "description": "Whether to add the Android platform."
     },
     "ios": {
       "type": "boolean",
       "description": "Whether to add the iOS platform."
     }
   },
   "required": ["appName", "appId"]
 }

This schema allows users to define parameters such as the app name, app ID, and which platforms to add (Android and iOS).

Step 4: Implement the Schematic Logic

Edit the index.ts file: The core logic for your schematic will be implemented in the index.ts file. This file is where you'll handle tasks like installing dependencies, updating files, and running Capacitor commands.

 import { chain, externalSchematic, Rule, Tree } from '@angular-devkit/schematics';
 import * as path from 'path';
 import { Schema as CapacitorSchematicSchema } from './schema';

 export function capacitorSetup(options: CapacitorSchematicSchema): Rule {
   return (tree: Tree) => {
     const appName = options.appName;
     const appId = options.appId;

     // Add Capacitor dependencies
     tree.create(
       'package.json',
       JSON.stringify({
         dependencies: {
           '@capacitor/core': '^3.0.0',
           '@capacitor/cli': '^3.0.0',
         },
       })
     );

     // Initialize Capacitor
     const capacitorInit = externalSchematic('@capacitor/cli', 'init', {
       appName,
       appId,
     });

     // Add Android/iOS platforms based on user input
     const platforms = [];
     if (options.android) {
       platforms.push('android');
     }
     if (options.ios) {
       platforms.push('ios');
     }

     return chain([
       capacitorInit,
       addPlatforms(platforms),
     ]);
   };
 }

 function addPlatforms(platforms: string[]): Rule {
   return (tree: Tree) => {
     platforms.forEach(platform => {
       if (platform === 'android') {
         // Add Android platform
         tree.create('android/AndroidManifest.xml', '');
       }
       if (platform === 'ios') {
         // Add iOS platform
         tree.create('ios/Info.plist', '');
       }
     });
     return tree;
   };
 }

This code handles the creation of the package.json file with Capacitor dependencies and initializes Capacitor in the Angular project.
Based on the android and ios flags, it conditionally adds the corresponding platforms.

Step 5: Test the Schematic Locally

Link the Schematic: To test your schematic locally, you can link it to your global npm installation.
```
 npm link
```
Test the Schematic in Your Angular Project:
- Navigate to your Angular project and link the schematic:
```
  npm link capacitor-setup
```
- Run the schematic to add Capacitor to your Angular project:
```
  ng generate capacitor-setup:capacitor-setup --appName="MyApp" --appId="com.example.myapp" --android --ios
```

This command will:

Initialize Capacitor with the specified app name and app ID.
Install the necessary Capacitor dependencies.
Optionally add Android and iOS platforms based on the --android and --ios flags.

Step 6: Handle Post-Integration Tasks

Post-Integration Tasks: After integrating Capacitor, there may be additional tasks required to configure the native mobile platforms. You can include custom code to update files like android/app/src/main/AndroidManifest.xml or ios/App/AppDelegate.swift as necessary.

For example, you might want to modify the AndroidManifest.xml or Info.plist with configurations specific to the app:
```
tree.create('android/app/src/main/AndroidManifest.xml', `
  <manifest xmlns:android="http://schemas.android.com/apk/res/android"
            package="${options.appId}">
    <application>
      
    </application>
  </manifest>
`);
```

Step 7: Publish and Use the Schematic

Publish the Schematic: After testing your schematic, you can publish it to the npm registry for others to use:
```
npm publish
```

Bonus Challenge: Automate the Capacitor Sync

Automate Capacitor Sync: After adding platforms, you can automate the cap sync command in your schematic, which ensures that the native iOS and Android project files are synced with your Angular project.

Modify your index.ts to add a sync step:
```
import { execSync } from 'child_process';

function syncCapacitorPlatforms() {
  execSync('npx cap sync', { stdio: 'inherit' });
}
```
Add this function to the schematic flow, so it syncs after platform creation.

Expected Outcome:

Capacitor Setup Automation: The schematic will automate the process of adding Capacitor to an Angular project and configuring the necessary files.
Customizable Integration: The user can specify the app name, app ID, and which platforms to add (Android, iOS).
Testing: The schematic will be tested in a local Angular project and published for use in future projects.

Another way to integrate Capacitor into any Angular project, if you are working on cross-platform mobile apps.

Build your Angular app: ng build --prod
npm install @capacitor/android
Add Android platform:
npx cap add android
npx cap add ios
Sync with Capacitor: npx cap sync
Open Android project in Android Studio: npx cap open android
Build the APK in Android Studio. To generate the APK:
- Go to Build > Build APK(s)
- /android/app/build/outputs/apk/
- https://capacitorjs.com/docs/basics/workflow

Day13 Challenge: Create a Custom Angular Schematic to Integrate Capacitor into an Angular Project