Android

Luego de seguir los pasos indicados en la introducción, tendremos nuestra app Android abierta en Android Studio.

AndroidManifest.xml

Es necesario configurar algunos parámetros en este fichero para que las notificaciones push funcionen correctamente. Aquí también configuraremos los permisos que nuestra app necesite; en nuestro caso, usaremos INTERNET y POST_NOTIFICATIONS. Podemos copiar y pegar directamente el siguiente código en nuestro AndroidManifest.xml. En caso de necesitar otros permisos, los agregaremos en la sección correspondiente. También se configurarán aquí los icons de nuestra app.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
  <application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/AppTheme"
  >
    <activity
      android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|smallestScreenSize|screenLayout|uiMode"
      android:name=".MainActivity"
      android:label="@string/title_activity_main"
      android:theme="@style/AppTheme.NoActionBarLaunch"
      android:launchMode="singleTask"
      android:exported="true"
    >
      <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
    </activity>

    <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"
      ></meta-data>
      <meta-data
        android:name="com.google.firebase.messaging.default_notification_icon"
        android:resource="@mipmap/ic_launcher"
      />
    </provider>

    <!-- Firebase-->

    <service android:name=".MyFirebaseMessagingService" android:exported="true">
      <intent-filter>
        <action android:name="com.google.firebase.MESSAGING_EVENT" />
      </intent-filter>
    </service>
  </application>

  <!-- Permissions -->

  <uses-permission android:name="android.permission.INTERNET" />
  <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
</manifest>

Configuración del icono de la app y de la “splash-screen”

Desde Android Studio añadimos la imagen al directorio mipmap pulsando en él con el botón derecho del ratón, y luego “New/Image asset”. Se nos abrirá una ventana en donde podremos importar nuestro icono y en base a este mismo crear los diferentes iconos e imágenes necesarias para nuestra app.

• Para el icono:

  Debemos seleccionarlo en el AndroidManifest.xml.

• Para la splash-screen:

  En el script capacitor-android tenemos incluido el comando de instalación. Desde el archivo capacitor.config.ts podemos realizar su configuración.

SplashScreen: {
      'launchShowDuration': 1500,
      'launchAutoHide': true,
      'launchFadeOutDuration': 500,
    },

Notificaciones Push

Paso 1: Instalar Capacitor Push Notifications Plugin. Si aún no lo has hecho, instala el plugin de notificaciones push de Capacitor:

npm install @capacitor/push-notifications
npx cap sync

Paso 2: Solicitar y Registrar Permisos. Solicita los permisos necesarios y registra tu aplicación para recibir notificaciones push. Para ello, copia lo siguiente en tu fichero MainActivity:

@Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Crear canal de notificaciones para Android 8.0 (API nivel 26) y superior
        createNotificationChannel();

        // Solicitar permisos para Android 13 (API nivel 33) y superior
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
            requestNotificationPermission();
        }

        // Obtener el token de FCM y imprimirlo en la consola
        FirebaseMessaging.getInstance().getToken()
                .addOnCompleteListener(task -> {
                    if (!task.isSuccessful()) {
                        System.out.println("Fetching FCM registration token failed: " + task.getException());
                        return;
                    }

                    // Obtener el token de registro de FCM
                    String token = task.getResult();
                    System.out.println("FCM registration token: " + token);
                });
    }

    private void createNotificationChannel() {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
            CharSequence name = getString(R.string.channel_name);
            String description = getString(R.string.channel_description);
            int importance = NotificationManager.IMPORTANCE_DEFAULT;
            NotificationChannel channel = new NotificationChannel("your_channel_id", name, importance);
            channel.setDescription(description);
            NotificationManager notificationManager = getSystemService(NotificationManager.class);
            notificationManager.createNotificationChannel(channel);
        }
    }

    private void requestNotificationPermission() {
        if (ContextCompat.checkSelfPermission(this, Manifest.permission.POST_NOTIFICATIONS) != PackageManager.PERMISSION_GRANTED) {
            ActivityResultLauncher<String> requestPermissionLauncher = registerForActivityResult(new RequestPermission(), isGranted -> {
                if (isGranted) {
                    // Permiso concedido
                    System.out.println("Permission for notifications was granted.");
                } else {
                    // Permiso no concedido
                    System.out.println("Permission for notifications was denied.");
                }
            });

            requestPermissionLauncher.launch(Manifest.permission.POST_NOTIFICATIONS);
        }
    }

Luego crea un archivo MyFirebaseMessagingService en el mismo directorio que tu MainActivity:

import android.util.Log;

import com.google.firebase.messaging.FirebaseMessagingService;
import com.google.firebase.messaging.RemoteMessage;

public class MyFirebaseMessagingService extends FirebaseMessagingService {

    private static final String TAG = "FCMService";

    @Override
    public void onNewToken(String token) {
        super.onNewToken(token);
        Log.d(TAG, "Refreshed token: " + token);
        // Aquí puedes enviar el token a tu servidor si es necesario
    }

    @Override
    public void onMessageReceived(RemoteMessage remoteMessage) {
        super.onMessageReceived(remoteMessage);
        // Manejar mensajes recibidos
        Log.d(TAG, "From: " + remoteMessage.getFrom());
        if (remoteMessage.getNotification() != null) {
            Log.d(TAG, "Message Notification Body: " + remoteMessage.getNotification().getBody());
        }
    }
}

También debes agregar las siguientes líneas en tu archivo strings.xml ubicado en res/values:

    <string name="channel_name">Nombre del Canal</string>
    <string name="channel_description">Descripción del Canal</string>

En este mismo archivo puedes configurar el nombre de la app.

Paso 3: Configura tu proyecto en Firebase.

• Crea tu proyecto en Firebase y sigue los pasos indicados.
• Descarga el archivo google-services.json y guárdalo en el directorio principal de tu app, arrastrándolo justo por debajo del build.gradle.
• Luego en el build.gradle agrega las siguientes dependencias:

dependencies {
    implementation fileTree(include: ['*.jar'], dir: 'libs')
    implementation "androidx.appcompat:appcompat:$androidxAppCompatVersion"
    implementation "androidx.coordinatorlayout:coordinatorlayout:$androidxCoordinatorLayoutVersion"
    implementation "androidx.core:core-splashscreen:$coreSplashScreenVersion"
    implementation project(':capacitor-android')
    testImplementation "junit:junit:$junitVersion"
    androidTestImplementation "androidx.test.ext:junit:$androidxJunitVersion"
    androidTestImplementation "androidx.test.espresso:espresso-core:$androidxEspressoCoreVersion"
    implementation project(':capacitor-cordova-android-plugins')
    implementation platform('com.google.firebase:firebase-bom:31.0.2')
    implementation 'com.google.firebase:firebase-messaging'
}

apply from: 'capacitor.build.gradle'

try {
    def servicesJSON = file('google-services.json')
    if (servicesJSON.text) {
        apply plugin: 'com.google.gms.google-services'
    }
} catch(Exception e) {
    logger.info("google-services.json not found, google-services plugin not applied. Push Notifications won't work")
}

```

**Enlaces con explicaciones del proceso:**

- Ten en cuenta que en los enlaces se usa Astro como proyecto web, por ende los pasos no son exactamente iguales, úsalo solo como guía visual.

- [Foro](https://devdactic.com/push-notifications-ionic-capacitor)

## Ejemplo de configuración del "capacitor.config.ts"

```java

import type { CapacitorConfig } from "@capacitor/cli";

const config: CapacitorConfig = {
appId: 'com.alebat.knotgroup',
appName: 'KG Corporativo',
webDir: 'dist',
bundledWebRuntime: false,
server: {
url: 'http://192.168.0.167:3000', // Url local
cleartext: true,
errorPath: '/',
androidScheme: 'https',
},
ios: {
contentInset: 'always',
},
plugins: {
PushNotifications: {
presentationOptions: ['badge', 'sound', 'alert'],
},
SplashScreen: {
'launchShowDuration': 1500,
'launchAutoHide': true,
'launchFadeOutDuration': 500,
},
},
}

export default config;

```

- `server:` Con esta propiedad podemos ejecutar la app en el emulador en tiempo real, sin compilar. Muy útil para el desarrollo de la misma. Ejecutamos `npm run dev -- --host` y luego `npx cap run ios`.

- `PushNotifications:` Configuración de las notificaciones.

- `SplashScreen:` Configuración de la `LaunchScreen`.

## ¿Cómo hacer la compilación?

una vez que tenemos en visual studio la app terminada, borramos la carpeta android, ejecutamos el comando **`npx cap add android`** y cambiamos el numero de la compilacion
en el fichero **`build.gradle`** que está dentro de la carpeta **`\android\app`** y modificamos el versionCode o versionName en funcion de si es la misma version o no

Una vez que esta la carpeta preparada hacemos el fichero que vamos a subir a google:

<img
  style={{ maxWidth: "80em", height: "auto" }}
  src="https://s3.eu-west-1.amazonaws.com/storybook.alebat.com/media/apps/Captura+de+pantalla+2024-08-27+a+las+17.03.04.png"
/>

Aqui seleccionamos la primera opción

<img
  style={{ maxWidth: "80em", height: "auto" }}
  src="https://s3.eu-west-1.amazonaws.com/storybook.alebat.com/media/apps/Captura+de+pantalla+2024-08-27+a+las+17.03.17.png"
/>

En esta pantalla es dónde firmamos la app con el fihcero knotgroup y la contraseña

<img
  style={{ maxWidth: "80em", height: "auto" }}
  src="https://s3.eu-west-1.amazonaws.com/storybook.alebat.com/media/apps/Captura+de+pantalla+2024-08-27+a+las+17.03.24.png"
/>

Le decimos que es para la version de producción

<img
  style={{ maxWidth: "80em", height: "auto" }}
  src="https://s3.eu-west-1.amazonaws.com/storybook.alebat.com/media/apps/Captura+de+pantalla+2024-08-27+a+las+17.03.32.png"
/>

Una vez que termina de compilar nos aparece un mensaje debajo que nos permite abrir el explorador de ficheros dónde esta la app compilada (formato aab)
```