Hacking - djsordo/senda GitHub Wiki

Instrucciones para compilar y desplegar aplicación Android

Aunque Ionic nos va a hacer gran parte del trabajo, hay ajustes que hacer para poder generar una aplicación para android.

Hay dos opciones para crear una aplicación android:

  • Crear un .apk: es decir, se genera un fichero .apk que es la aplicación. Ésta puede instalarse directamente en un movil sencillamente cargandola en el movil (y configurando el movil para saltarse toda la seguridad). Para depurar la aplicación es la mejor forma
  • Crear un bundle (fichero .aab): esta forma de empaquetar la aplicación permite subirla a la teletienda de google. La play store de google es mucho más exigente respecto a qué configuraciones debe tener el proyecto: exige un cierto nivel de api y exige que vaya firmado por un certificado digital; pero si queremos llegar al gran público es lo que hay que hacer

Generar un fichero .apk 

npm install -g native-run cordova-res

ionic capacitor add ios 
ionic capacitor add android
ionic capacitor build
ionic capacitor copy
ionic capacitor sync

Cada vez que hagamos cambios:

 ionic capacitor sync --configuration=production

Luego hay que abrir con android studio el proyecto y compilar la aplicación.

El fichero .apk se quedará en:

$PROJECT_HOME/android/app/build/outputs/apk/debug/

Generar un *.aab para subir a google play store

En este caso los requisitos aumentan: es preciso generar un fichero *.aab (application bundle) y además, debe cumplir una serie de requisitos:

  • debe de ir firmado digitalmente
  • el paquete por defecto no puede llamarse "io.ionic.starter"

Al parecer el fichero *.aab es un fichero que tiene todo lo necesario para construir, pero que la construcción la hará la play store, y no nosotros: ellos se encargarán de hacer varios ficheros *.apk específicos para cada versión de movil.

La generación de un application bundle es sencilla: basta indicarlo en el android studio: cuando es la primera vez, éste nos solicitará crear una clave privada nueva que podemos guardar en el almacen de certificados de nuestra elección.

Hay que crear un almacén de certificados y un certificado

Este paso se hace automáticamente desde Android Studio, y muy importante, tenemos que dejar el almacén de certificados en una ruta que no se suba a github, ya que contiene las claves privadas y es un riesgo de seguridad.

Hay que cambiar el nivel mínimo del SDK

Tenemos un fichero variables.gradle que contiene estos valores:

minSdkVersion = 21
compileSdkVersion = 30
targetSdkVersion = 30

Y deberemos cambiarlos al mínimo que solicite la Play Store. En este momento (17/09) es el 31:

minSdkVersion = 21
compileSdkVersion = 30 # cambiar aquí
targetSdkVersion = 31 # cambiar aqui

Además hay que abrir el fichero AndroidManifest.xml y añadir la entrada android:exported:

    <activity
        android:exported="true" <!-- AÑADIR ESTO -->
        android:configChanges="...."
        android:name="io.ionic.starter.MainActivity"
        android:label="@string/title_activity_main"

Añadir en AndroidManifest.xml el permiso especial ad_id

Cuando estamos compilando para el nivel de api 33 (y supongo que superiores), es preciso añadir un permiso especial en nuestro fichero AndroidManifest.xml:

<!-- Permissions -->

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
+ <uses-permission android:name="com.google.android.gms.permission.AD_ID"/>

Subimos el código de la versión

Localizaremos el fichero android/app/build.gradle y le subiremos el número a la versión:

    targetSdkVersion rootProject.ext.targetSdkVersion
    versionCode 3
    versionName "1.1.1"

Quitar las referencias a io.ionic.starter

IMPORTANTE: PARA LA PROXIMA GENERACION, PROBAR A CAMBIAR ESTE FICHERO: capacitor.config.ts.

const config: CapacitorConfig = {
appId: 'io.ionic.starter',
appName: 'senda',
webDir: 'www',
bundledWebRuntime: false
};

Un error bastante frecuente es dejar ciertas configuraciones del proyecgto como están: al subir el fichero .aab a la play store, responderá con el error de que el paquete io.ionic.starter ya se encuentra registrado.

Afortunadamente en esta página explica cómo hacer el cambio. Resumiendolo mucho:

  1. localizar el fichero android/app/build.gradle y cambiar el valor applicationId:

    defaultConfig {
-       applicationId "io.ionic.starter"
+       applicationId "com.sendaestadisticas"

Localizar el fichero android/app/main/res/values/strings.xml y cambiar la entrada package_name y posiblemente la entrada app_name:

<string name="app_name">senda</string> <!-- CAMBIAR AQUI -->
<string name="title_activity_main">senda</string>
<string name="package_name">com.sendaestadisticas</string>
<string name="custom_url_scheme">com.sendaestadisticas</string> <!-- CAMBIAR AQUI -->

Añadiendo text-to-speech

npm install @capacitor-community/speech-recognition

Añadir esto en ios/App/App/Info.plist:

<key>NSSpeechRecognitionUsageDescription</key>
<string>To translate voice into words</string>
<key>NSMicrophoneUsageDescription</key>
<string>To record your voice</string>

Añadir esto en android/app/src/main/AndroidManifest.xml:

esto va al principio, dentro de 

<queries>
  <intent>
    <action android:name="android.speech.RecognitionService"/>
  </intent>
</queries>

Y esto al final:

<uses-permission android:name="android.permission.RECORD_AUDIO"/>

Y la MainActivity del proyecto android hay que dejarla así:

import com.getcapacitor.BridgeActivity;
import com.getcapacitor.community.speechrecognition.SpeechRecognition;
[...]

public class MainActivity extends BridgeActivity {

  @Override
  public void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);

    this.registerPlugin( SpeechRecognition.class );

  }

Cambiaremos nuestro fichero .gitignore para que permita subir estos ficheros

Abriremos el fichero .gitignore y donde pone:

/android

deberemos poner:

/android
!/android/app/src/main/AndroidManifest.xml
!/android/app/src/main/java/io/ionic/starter/MainActivity.java

Es decir, los ficheros AndroidManifest.xml y MainActivity.java a partir de ahora se controlarán en github: se subirán con el resto de cambios y se bajarán en las pull requests.

Esto es para permitir trazar en github los cambios que se han efectuado a dichos ficheros.

Desplegar la versión web

Sólo la primera vez: instalar firebase-tools

Para ello es preciso instalarse la herramienta de linea de comandos firebase cli. La mejor opcion para ello es usar npm, pero para no contaminar el proyecto instalando otra dependencia en el node_modules del proyecto, lo mejor es buscar una carpeta donde haremos nuestra instalacion. Para nuestro caso, he elegido c:\app\firebase-cli.

Una vez en la carpeta, ejecutaremos:

C:\app\firebase-cli> npm install firebase-tools

El comando firebase quedará instalado en c:\app\firebase-cli\node_modules\.bin\firebase.cmd.

Ejecutar el comando deploy_web.ps1 o deploy_web.sh

El comando que despliega la web es deploy_web: basta con ejecutar la versión de tu sistema operativo (deploy_web.ps1 o deploy_web.sh) para que se ejecute.

Puedes echar un vistazo al comando: tampoco es que sea rocket science precisamente.

Para que se pueda ejecutar desde cualquier parte en el terminal, lo que tenemos que hacer es crear una entrada en el PATH de nuestro ordenador.

⚠️ **GitHub.com Fallback** ⚠️