Clase 2

Módulo 1: Creación de aplicaciones básicas

Semana 2: Creando nuestra primer aplicación

  1. Pruebas de aplicaciones en un emuladores / dispositivos.
  2. Generación de iconos e imágenes de inicio.
  3. Despliegue de la información según los tamaños y orientaciones de los dispositivos.
  4. Habilitación o no de la variante según la orientación.
  5. Uso de teclas atrás (Android).
  6. Mi versión de Android

Guía

Buenas prácticas

Comandos:

Crear un proyecto en Cordova

cordova create nombre_carpeta id.aplicacion "Nombre del app"

Agregar una plataforma a nuestro proyecto

cordova platform add android --save
cordova platform add ios --save

Listar las plataformas instaladas y disponibles (las plataformas disponibles dependen de del sistema operativo en el que se esté ejecutando Cordova)

cordova platform ls

Quitar una plataforma

cordova platform rm android
cordova platform rm ios

Instalar un plugin

cordova plugin add plugin.id --save

Listar plugins instalados

cordova plugin ls

Quitar un plugin

cordova plugin rm id.plugin
Configuración general del proyecto

La configuración general de nuestro proyecto la podemos encontrar en el archivo  config.xml que se encuentra en la raíz de nuestro proyecto. Un archivo ejemplo se vería como el siguiente.

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.test" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http$
    <name>test</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="[email protected]" href="http://cordova.io">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <plugin name="cordova-plugin-whitelist" spec="1" />
    <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:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
</widget>
Probando nuestra aplicación

Para probar nuestra aplicación en un dispositivo físico (Android) debemos activar el modo desarrollador en nuestro teléfono, siguiendo los siguientes pasos:

  1. Configuración
  2. Acerca del dispositivo
  3. En número de compilación presionar 7 veces y luego ir atrás
  4. En opciones de desarrollador activar USB debuging

En el caso de iPhones se tiene que tener una cuenta de desarrollador de Apple y abrir el proyecto de cordova/platforms/io con xCode, luego seleccionar el dispositivo o emulador y presionar correr.

Depurando nuestra aplicación

Con Chorme en Android 

Requerimientos:

Manejo de eventos

Device ready

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    // Now safe to use device APIs
}

Botón de atrás en Android

document.addEventListener("backbutton", onBackKeyDown, false);

function onBackKeyDown() {
    // Handle the back button
}

Botón de bajar y subir volumen

// Bajar volumen
document.addEventListener("volumedownbutton", onVolumeDownKeyDown, false);

function onVolumeDownKeyDown() {
    // Handle the volume down button
}

// Subir volumen
document.addEventListener("volumeupbutton", onVolumeUpKeyDown, false);

function onVolumeUpKeyDown() {
    // Handle the volume up button
}

Otros eventos

Íconos y splash screen

Posicionado en la carpeta del proyecto ejecutar:

cordova plugin add cordova-plugin-splashscreen --save

Luego cambiar los íconos en estas direcciones:

  • Android: app/platforms/android\res
  • iOS: app/platforms/ios/Resources
<preference name="FadeSplashScreen" value="false"/>
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="2000" />

Para que nuestra aplicación solo funcione de modo horizontal(landscape) poner lo siguiente en el config.xml

<preference name="Orientation" value="landscape" />