Sencha Touch con PhoneGap

Pues bueno, estaba yo todo juicioso haciendo mi trabajo como todos los días cuando me hicieron el siguiente requerimiento:

Necesitamos una aplicación para iPhone que haga tal y cual cosa, necesitamos que uses Sencha Touch y PhoneGap.

Ya PhoneGap lo he utilizado en un par de proyectos y ya me conozco las mañas para usarlo, pero Sensa Touch no lo había usado por lo que me puse a investigar un poco del asunto, en el mismo sitio web de Sensa existe un tutorial de cómo unir ambos productos pero... El tutorial fue realizado el 28 de enero de 2011 y actualizado el 7 de Octubre del mismo año y las versiones tanto de Sensa Touch como de PhoneGap han cambiado y mucho!!! así que me puse a leer un poco más de cómo carajos hacer la integración y en este post espero ayudar a los que esten en el mismo dilema que yo.

Paso 1
Descarga las últimas versiones de lo que se necesita e instalalo:

• Sencha Touch 2.0.1.1 - Descomprime y copia en una carpeta en tu computador
• Sencha SDK Tools 2.0.0 Beta 3 - Descomprime y ejecuta la aplicación, sigue los pasos
• PhoneGap 2.1.0 - Descomprime y copia la carpeta lib/ios a una carpeta en tu computador

Paso 2
Abre un terminal y ve a donde hayas copiado el Sansa Touch y ejecuta

sencha app create nombre_de_app /path/de/la/app all

Paso 3
Copia el archivo js de PhoneGap en la carpeta de la applicación que acabas de crear

cp CordovaLib-2.1.0/bin/templates/project/www/cordova-2.1.0.js /path/de/la/app/

Paso 4
Indicale a Sencha Touch que debe usar el archivo js de PhoneGap, para lo cual abre el archivo app.json y agrega en el apartado de js el path al archivo.

"js": [
    {
       "path": "cordova-2.1.0.js"
    }
    ...
  ]

Paso 5
Abre un terminal y ve a donde hayas copiado PhoneGap y crea una aplicación, y ubicala dentro de la carpeta build de la aplicación Sencha Touch

./create /path/de/la/app/build/phonegap el.nombre.de.la.app NombreApp

Paso 6
Elimina el contenido de la carpeta www de la aplicación de PhoneGap que acabas de crear

Paso 7
Modifica la aplicación de Sencha Touch para que compile en la carpeta www de la aplicación de PhoneGap, para lo cual edita el archivo app.json en la sección "buildPaths", debe quedar algo parecido a lo siguiente:

"buildPaths": {
    "testing": "build/testing",
    "production": "build/production",
    "package": "build/phonegap/www",
    "native": "build/native"
}

Paso 8
Empaqueta la aplicación sencha

sencha app build package

Paso 9
Abre el proyecto Xcode de la aplicación PhoneGap y ejecutalo.

Y voilà!!!


Espero que esta guia te haya ayudado.