lunes, 24 de noviembre de 2014

NUESTRA PRIMERA APP. COMPILACION EN PHONEGAP BUILD


En el post anterior creamos nuestra plantilla de jQueryMobile (http://appositivas.blogspot.com/2014/11/plantilla-jquerymobile-en-4-pasos.html) y ahora vamos a incluirle los ficheros necesarios para poder compilarlo en PhoneGap Build.

Como habeis visto en nuestro primer post, no gusta explicarlo todo de forma gráfica y clara. Así que vamos a seguir con nuestro simil de explicar el HTML, CSS y JS usado para crear APPs pero aplicado a las personas. Le llamaremos "persona/APP"

En el post anterior ya le dimos a nuestra persona una esqueleto de APP (a través del index.html), una apariencia exterior de APP (a través del jquerymobile.css) y un pensamiento y comportamiento de app (a través del jquerymobile.js), convirtiéndola en una persona/APP. Pero claro si ahora queremos instalarlo en nuestros dispositivos móviles vamos a necesitar:
  • Herramientas que nos compilen nuestra APP para poder ser instalada en todo tipo de dispositivos.
  • Herramientas que le permitan a nuestra APP acceder a los recursos de los dispositivos en los que sea instalado.
¿Y como hacemos esto? Pues con PHONEGAP!! PHONEGAP es una herramienta multiplataforma que se basa en la libreria Apache Cordova. Y además nosotros usaremos Phonegap Build que nos permite crear directamente la app en diferentes plataformas en la nube.

Para hacer un simil facil de recordar, vamos a imaginarnos que nuestra persona/APP va una fábrica (llamada Phonegap Build) y allí le dan una caja de herramientas Android, otra IOS y otra Windows Phone, así que nuestra persona/APP está lista para trabajar en una sucursal de Android, IOS o WP, porque tiene ya las herramientas adecuadas. 

En este post veremos que se necesita incluir en nuestra carpeta "MyApp" el archivo "config.xml" en el que vamos a configurar los aspectos fundamentales de nuestra App en cuanta a recursos necesarios, además de incluir la carpeta "res" con los distintos tamaños del logo de la app. Por seguir con el simil, es como decir que nuestra persona/APP, para ser admitida en la fábrica, tiene que ir con su CV bien escrito y con su foto (logo). Este CV será el archivo "config.xml" y la foto la carpeta "res".

 

PASO 1: Creamos una cuenta ADOBE (gratuita)


Lo primero que vamos a hacer es hacernos una cuenta de ADOBE porque la vamos a necesitar para poder compilar nuestra App en Phonegap Build.

Entramos en: https://build.phonegap.com/ y hacemos los pasos que se explican en esta imagen:




Una vez tenemos nuestra cuenta de Adobe para PhoneGap Build vamos a modificar nuestra plantilla de jQueryMobile.


PASO 2: Incluimos referencia a Cordova.js en el index.html

Es necesario incluir la referencia a "cordova.js" en el <meta> del "index.html". Con esto ya no es necesario descargarse e incluir la libreria de Apache/Cordova en ninguna de las carpetas puesto que como vamos a compilarlo con PHONEGAP BUILD el propio proceso nos lo carga.

Incluir en Index.html

<script type="text/javascript" src="cordova.js"></script>

 

PASO 3: Incluimos el archivo "config.xml" en "MyApp"



Es necesario también incluir el archivo "config.xml" donde se configura las distintas opciones de nuestra app. Vamos a copiar el siguiente config.xml que contiene los máximos que puede tener un archivo config.xml:

Config.xml 

 <?xml version="1.0" encoding="UTF-8"?>  
 <!-- config.xml reference: https://build.phonegap.com/docs/config-xml -->  
 <widget xmlns   = "http://www.w3.org/ns/widgets"  
     xmlns:gap = "http://phonegap.com/ns/1.0"  
     id    = "com.phonegap.MyApp"  
     version  = "1.0.0">  
   <name>MyApp</name>  
   <description>  
     My first Hybrid App created with Appositivas.
   </description>  
   <author href="http://appositivas.blogspot.com" email="appositivas@gmail.com">  
     Appositivas  
   </author>  
   <!--  
     If you do not want any permissions to be added to your app, add the  
     following tag to your config.xml; you will still have the INTERNET  
     permission on your app, which PhoneGap requires.  
   -->  
   <preference name="permissions"        value="none"/>  
   <!-- Customize your app and platform with the preference element. -->  
   <preference name="phonegap-version"      value="3.5.0" />     <!-- all: current version of PhoneGap -->  
   <preference name="orientation"        value="default" />    <!-- all: default means both landscape and portrait are enabled -->  
   <preference name="target-device"       value="universal" />   <!-- all: possible values handset, tablet, or universal -->  
   <preference name="fullscreen"         value="true" />      <!-- all: hides the status bar at the top of the screen -->  
   <preference name="webviewbounce"       value="true" />      <!-- ios: control whether the screen 'bounces' when scrolled beyond the top -->  
   <preference name="prerendered-icon"      value="true" />      <!-- ios: if icon is prerendered, iOS will not apply it's gloss to the app's icon on the user's home screen -->  
   <preference name="stay-in-webview"      value="false" />     <!-- ios: external links should open in the default browser, 'true' would use the webview the app lives in -->  
   <preference name="ios-statusbarstyle"     value="black-opaque" />  <!-- ios: black-translucent will appear black because the PhoneGap webview doesn't go beneath the status bar -->  
   <preference name="detect-data-types"     value="true" />      <!-- ios: controls whether data types (such as phone no. and dates) are automatically turned into links by the system -->  
   <preference name="exit-on-suspend"      value="false" />     <!-- ios: if set to true, app will terminate when home button is pressed -->  
   <preference name="show-splash-screen-spinner" value="true" />      <!-- ios: if set to false, the spinner won't appear on the splash screen during app loading -->  
   <preference name="auto-hide-splash-screen"  value="true" />      <!-- ios: if set to false, the splash screen must be hidden using a JavaScript API -->  
   <preference name="disable-cursor"       value="false" />     <!-- blackberry: prevents a mouse-icon/cursor from being displayed on the app -->  
   <preference name="android-minSdkVersion"   value="7" />       <!-- android: MIN SDK version supported on the target device. MAX version is blank by default. -->  
   <preference name="android-installLocation"  value="auto" />      <!-- android: app install location. 'auto' will choose. 'internalOnly' is device memory. 'preferExternal' is SDCard. -->  
   <!-- Plugins -->  
   <!-- Core plugins -->  
   <gap:plugin name="org.apache.cordova.battery-status" />  
   <gap:plugin name="org.apache.cordova.camera" />  
   <gap:plugin name="org.apache.cordova.media-capture" />  
   <gap:plugin name="org.apache.cordova.console" />  
   <gap:plugin name="org.apache.cordova.contacts" />  
   <gap:plugin name="org.apache.cordova.device" />  
   <gap:plugin name="org.apache.cordova.device-motion" />  
   <gap:plugin name="org.apache.cordova.device-orientation" />  
   <gap:plugin name="org.apache.cordova.dialogs" />  
   <gap:plugin name="org.apache.cordova.file" />  
   <gap:plugin name="org.apache.cordova.file-transfer" />  
   <gap:plugin name="org.apache.cordova.geolocation" />  
   <gap:plugin name="org.apache.cordova.globalization" />  
   <gap:plugin name="org.apache.cordova.inappbrowser" />  
   <gap:plugin name="org.apache.cordova.media" />  
   <gap:plugin name="org.apache.cordova.network-information" />  
   <gap:plugin name="org.apache.cordova.splashscreen" />  
   <gap:plugin name="org.apache.cordova.vibration" />  
   <!-- Third party plugins -->  
   <!-- A list of available plugins are available at https://build.phonegap.com/plugins -->  
   <!--  
     <gap:plugin name="com.phonegap.plugins.barcodescanner" />  
   -->  
   <!-- Define app icon for each platform. -->  
   <icon src="icon.png" />  
   <icon src="res/icon/android/icon-36-ldpi.png"  gap:platform="android"  gap:qualifier="ldpi" />  
   <icon src="res/icon/android/icon-48-mdpi.png"  gap:platform="android"  gap:qualifier="mdpi" />  
   <icon src="res/icon/android/icon-72-hdpi.png"  gap:platform="android"  gap:qualifier="hdpi" />  
   <icon src="res/icon/android/icon-96-xhdpi.png" gap:platform="android"  gap:qualifier="xhdpi" />  
   <icon src="res/icon/blackberry/icon-80.png"   gap:platform="blackberry" />  
   <icon src="res/icon/blackberry/icon-80.png"   gap:platform="blackberry" gap:state="hover"/>  
   <icon src="res/icon/ios/icon-57.png"      gap:platform="ios"    width="57" height="57" />  
   <icon src="res/icon/ios/icon-72.png"      gap:platform="ios"    width="72" height="72" />  
   <icon src="res/icon/ios/icon-57-2x.png"     gap:platform="ios"    width="114" height="114" />  
   <icon src="res/icon/ios/icon-72-2x.png"     gap:platform="ios"    width="144" height="144" />  
   <icon src="res/icon/webos/icon-64.png"     gap:platform="webos" />  
   <icon src="res/icon/windows-phone/icon-48.png" gap:platform="winphone" />  
   <icon src="res/icon/windows-phone/icon-173.png" gap:platform="winphone"  gap:role="background" />  
   <!-- Define app splash screen for each platform. -->  
   <gap:splash src="res/screen/android/screen-ldpi-portrait.png"    gap:platform="android" gap:qualifier="port-ldpi" />  
   <gap:splash src="res/screen/android/screen-mdpi-portrait.png"    gap:platform="android" gap:qualifier="port-mdpi" />  
   <gap:splash src="res/screen/android/screen-hdpi-portrait.png"    gap:platform="android" gap:qualifier="port-hdpi" />  
   <gap:splash src="res/screen/android/screen-xhdpi-portrait.png"   gap:platform="android" gap:qualifier="port-xhdpi" />  
   <gap:splash src="res/screen/blackberry/screen-225.png"       gap:platform="blackberry" />  
   <gap:splash src="res/screen/ios/screen-iphone-portrait.png"     gap:platform="ios"   width="320" height="480" />  
   <gap:splash src="res/screen/ios/screen-iphone-portrait-2x.png"   gap:platform="ios"   width="640" height="960" />  
   <gap:splash src="res/screen/ios/screen-iphone-portrait-568h-2x.png" gap:platform="ios"   width="640" height="1136" />  
   <gap:splash src="res/screen/ios/screen-ipad-portrait.png"      gap:platform="ios"   width="768" height="1024" />  
   <gap:splash src="res/screen/ios/screen-ipad-landscape.png"     gap:platform="ios"   width="1024" height="768" />  
   <gap:splash src="res/screen/windows-phone/screen-portrait.jpg"   gap:platform="winphone" />  
   <gap:config-file platform="ios" parent="CFBundleShortVersionString">  
   <string>100</string>  
   </gap:config-file>  
   <!--  
     Define access to external domains.  
     <access />      - a blank access tag denies access to all external resources.  
     <access origin="*" /> - a wildcard access tag allows access to all external resource.  
     Otherwise, you can specify specific domains:  
   -->  
   <access origin="*"/>  
   <!--  
     <access origin="http://phonegap.com" />          - allow any secure requests to http://phonegap.com/  
     <access origin="http://phonegap.com" subdomains="true" /> - same as above, but including subdomains, such as http://build.phonegap.com/  
     <access origin="http://phonegap.com" browserOnly="true" /> - only allows http://phonegap.com to be opened by the child browser.  
   -->  
 </widget>  


Como hemos dicho este config.xml contiene los máximos que puede tener un archivo config.xml. 

Explicamos las partes de este archivo:
  • Parte inicial: donde se define la versión, el nombre de la app, descripción y autor.
     xmlns:gap = "http://phonegap.com/ns/1.0"  
     id    = "com.phonegap.MyApp"  
     version  = "1.0.0">  
   <name>MyApp</name>  
   <description>  
     My first Hybrid App created with Appositivas.
   </description>  
   <author href="http://appositivas.blogspot.com" email="appositivas@gmail.com">  
     Appositivas  
   </author>  


  • Parte donde se definen las preferencias: La más importante de estas preferencias es en la que se define la versión de Phonegap que vamos a usar. en este caso la 3.5.0. Simplemente con cambiar la versión que queremos en este archivo estaremos usando una versión nueva de Phonegap (esto es porque Phonegap build nos la va a cargar directamente en nuestra App al compilarla):
<preference name="phonegap-version"      value="3.5.0" />     <!-- all: current version of PhoneGap -->
  • Parte donde se definen los plugins: Se identifican todos los plugins que vamos a necesitar. Puedes encontrar una lista de todos ellos en el siguiente link: https://build.phonegap.com/plugins lo que recomendamos es borrar todos e ir metiendo los plugins que vayamos necesitando en función de nuestra App.
  • Parte donde se definen las imagenes de iconos y splash screens.






    Esto lo incluimos en una carpeta "res". Podemos descargar la carpeta "res" del siguiente enlace que tiene los iconos y pantallas con el logo de phonegap y luego iremos sustituyendo cada una con nuestro logo: http://archive.apache.org/dist/cordova/tools/cordova-app-hello-world-3.6.1.zip . En este zip nos vamos a encontrar una carpeta que se llama "res" y tiene las siguientes subcarpetas:


    Cada una de estas carpetas contiene las imagenes que debes sustituir por las de tu logo.
  • Parte donde se definen los accesos en el caso de que necesitemos conectar con algún sitio esterno. En principio, poniendo la siguiente linea tienes acceso a todos los sitios:
      <access origin="*"/>  

 

PASO 4: Comprobamos la plantilla

Hechos estos pasos, nuestro archivo index.html debe quedar de la siguiente manera:

index.html

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
 <title>MyApp</title>
        <!--grupo CSS-->
 <link href="css/index.css" type="text/css" rel="stylesheet"/>
        <link href="css/jquery.mobile-1.4.5.min.css" type="text/css" rel="stylesheet"/>
        <!--grupo JavaScript-->
        <script src="js/index.js" type="text/javascript"></script>
        <script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
        <script src="js/jquery.mobile-1.4.5.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="cordova.js"></script>

</head>
<body>
 <div data-role="page">   
     <div data-role="header">
      <h1>My APP</h1>        
     </div>        
        <div data-role="main" class="ui-content">
         Content
        </div>        
        <div data-role="footer" data-position="fixed">
         <h4>Footer</h4>
        </div> 
    </div>
</body>
</html>

Y la estructura de carpetas de nuestra plantilla de App para phonegap build queda:



Con esto sólo nos falta comprimirlo en un archivo .zip y subirlo a la página de Phonegap Build!!!

Hecho!! Ya tenemos la app compilada para Android y para Windows Phone. Para IOS no está compilada porque necesitamos el certificado de desarrollador de IOS. Si lo tenemos lo metemos y ya compilará correctamente.

Ahora desde nuestro dispositivo leemos el codigo QR y se nos instalará la App en nuestro dispositivo. 
Esquema Mental by Versión Lunática:


 

 

4 comentarios:

  1. digame porq desmora tanto el compilar mi app en phonegap

    ResponderEliminar
  2. Cómo hacer que la app autoarranque cuando arranca la tablet?

    ResponderEliminar