Cordova

Que es Cordova?

Cordova es la plataforma que nos permite programar en JavaScript y mostrar nuestra aplicación en prácticamente cualquier dispositivo (iOS, Android, y mediante Electron en Windows, Ubuntu y Mac) a través de un WebView, pero pudiendo acceder a casi todas las características de este dispositivo a través de plugin.

Cómo funciona Cordova?

Pues basicamente tienes un fichero de configuración y unos comandos de shell, que en base a esa configuración generan el código fuente para que puedas compilarlo con los plugins que tu necesites para poder acceder a elementos del dispositivo.

Al final tienes que compilar el código, así que si vas a hacer la app para android, necesitas Android Studio, y si quieres hacer una App para iPhone, necesitas XCode y un Mac.

Comandos Cordova

# Añadir plataformas para las que quieres generar código 
>cordova platform add android

# Generar código en /platfomrs en base al config.xml
>cordova prepare

# Compila y lanza el emulador de android
cordova run --emulator android

config.xml

<?xml version='1.0' encoding='utf-8'?>
<!-- IMPORTANTE!! 
        El android-versionCode se tiene que cambiar cada vez q se firma en el store
        y no puede ser anterior a uno que ya se haya subido.
-->
<widget 
    id="es.compania.nombre_app"
    version="1.1.0"
    android-versionCode="20"
    ios-CFBundleVersion="1.1.0.0"
    xmlns="http://www.w3.org/ns/widgets" 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    xmlns:cdv="http://cordova.apache.org/ns/1.0"
>
    <name>Nombre App en las Stores</name>
    <description>
        Mi App es la pera
    </description>
    <author email="desarrollo@desarrollador.com" href="https://compania.com">
        Compania
    </author>
    <!-- ATENCIÓN !!!  Ruta inicial del App  -->
    <content src="https://app.compania.es/"/>
    <!-- Rutas a las que puede navegar -->
    <allow-navigation href="*" />
    <icon src="res/icon.png" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <!-- Cosas de Android -->
    <platform name="android">
        <allow-intent href="market:*" />
        <resource-file src="google-services.json" target="app/google-services.json" />
        <preference name="android-minSdkVersion" value="23" />
        <preference name="android-targetSdkVersion" value="30" />
        <splash src="res/screen/android/splash.png" />
        <preference name="Orientation" value="portrait" />
        <edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application">
            <application android:usesCleartextTraffic="true" />
            <application android:allowBackup="false" />
        </edit-config>
    </platform>
    <!-- Cosas de iOS -->
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <resource-file src="GoogleService-Info.plist" />
        <preference name="Orientation" value="portrait" />
        <preference name="DisallowOverscroll" value="true" />
        <splash src="res/screen/ios/Default@2x~universal~anyany.png" />
        <hook src="scripts/fixIosIcons.sh" type="after_platform_add" />
        <config-file target="*-Info.plist" parent="UIStatusBarHidden">
            <true/>
        </config-file>
        <config-file target="*-Info.plist" parent="UIViewControllerBasedStatusBarAppearance">
            <false/>
        </config-file>
    </platform>
    <hook src="scripts/fixIosIcons.sh" type="after_prepare" />
    <engine name="android" spec="^9.0.0" />
    <engine name="ios" spec="^6.1.1" />
    <!-- Plugins que vamos a necesitar para acceder al las cosas del dispositivo -->
    <plugin name="cordova-plugin-statusbar" spec="2.4.3" />
    <plugin name="cordova-plugin-androidx" spec="^2.0.0" />
    <plugin name="cordova-plugin-androidx-adapter" spec="^1.1.1" />
    <plugin name="cordova-plugin-appversion" spec="^1.0.0" />
    <plugin name="cordova-plugin-device" spec="^2.0.2" />
    <plugin name="cordova-plugin-whitelist" spec="1" />
    <plugin name="cordova-plugin-ionic-webview">
        <variable name="ANDROID_SUPPORT_ANNOTATIONS_VERSION" value="27.+" />
    </plugin>
    <plugin name="cordova-plugin-ionic-keyboard" spec="2.0.5" />
    <plugin name="cordova-clipboard" spec="~1.3.0" />
    <plugin name="cordova-plugin-fingerprint-aio" spec="^3.0.1">
        <variable name="FACEID_USAGE_DESCRIPTION" value=" " />
    </plugin>
    <plugin name="cordova-plugin-network-information" spec="2.0.2" />
    <plugin name="cordova-plugin-networkinterface" spec="2.0.0" />
    <plugin name="cordova-plugin-iroot" spec="2.0.2" />
    <!-- <plugin name="cordova-plugin-advanced-http" spec="3.0.1" /> -->
    <plugin name="cordova-plugin-advanced-http" spec="./plugin-custom/cordova-plugin-advanced-http-master" />
    <plugin name="cordova-plugin-file" spec="6.0.2" />
    <plugin name="cordova-plugin-proguard" spec="2.2.0" />
    <plugin name="cordova-plugin-buildinfo" spec="4.0.0" />
    <plugin name="cordova-plugin-inappbrowser" spec="4.0.0" />
    <plugin name="@havesource/cordova-plugin-push"  spec="2.0.0"></plugin>
</widget>