Ya tienes lista tu app en Sencha Touch, has estado trabajando en ella semanas o inclusive meses, y ahora que? La has probado en el simulador que viene en tu mac, inclusive la has probado en el safari y guardado en el home screen como aplicación nativa! pero sería genial poder probarla de manera nativa!

En este tutorial voy a mostrar como podemos empaquetar nuestra aplicación para probarla en un dispositivo de manera nativa, el sencha cmd nos da una gran ayuda, desafortunadamente la información que hay esta desactualizada y siguiendo el tutorial de la documentación no sale a la primera, siempre hay errores o simplemente no funciona.

Primero que nada es necesario ser miembro del programa del desarrolladores de apple.

Generar el certificado iOS

Necesitamos crear un certificado, para eso abrimos la aplicación Keychain Access, debes seleccionar en el menu principal la opción: Keychain Access > Certificate Assistant > Request a Certificate from a Certificate Authority para generar el certificado. El el formulario que aparece introduce tu email, nombre, deja en blanco el campo CA Email Address y selecciona la opción Save to Disk, en seguida presiona continuar.

Dentro del portal de desarrolladores de apple selecciona la opción para crear un certificado, en el paso numero 4 te pedirá subir el archivo que hemos generado en los pasos anterior. Lo subes y presionas generar, luego de procesar el archivo te aparecerá un botón de descarga. Este es el archivo que necesitamos.

Convertir el certificado a formato P12

Una vez que descargamos el certificado necesitamos convertirlo a formato P12, para esto usamos nuevamente la utilería Keychain Access. 

Primero seleccionas en el menú principal File > Import Items, he importas el certificado que descargamos anteriormente. Una vez que se importo correctamente lo seleccionas en la lista, el nombre con el que aparece utiliza como formato: iPhone Developer: <First Name> <Last Name> (public key reference).

Ya que seleccionamos el certificado seleccionas la opción File > Export Items y guardas el certificado en formato P12.

Generar el App ID

Ahora necesitamos el App ID, que también se le conoce como Bundle ID,este lo definimos en el portal de desarrolladores de apple, debe ser único ya que identificará a nuestra aplicación.

Generalmente el formato que se utiliza para definir el id es tld.domain por ejemplo: com.bleext.myawesomeapp, la única condición es que debe ser único.

Registrar un Dispositivo

Para probar nuestra aplicación debemos registrar los dispositivos donde queremos ejecutarla, esto nos permitirá deployar la app a un dispositivo antes de subirla al apple store. Podemos registrar hasta 100 dispositivos para eso hacemos lo siguientes pasos;

1. Primero abrimos el Itunes
2. Conectamos nuestro dispositivo (En mi caso un iPhone 5S)
3. Click sobre el dispositivo
4. Asegurate de estar en el Summary Tab
5. Click en el Serial Number, esto desplegará el UDID.
6. Click derecho sobre el campo UDID para copiarlo.

Ahora vamos al portal de desarrolladores de Apple y agregamos un nuevo dispositivo, le asignamos un nombre y pegamos el UDID.

Crear el Provision Profile

Para crear este archivo necesitamos tener completados todos los pasos anteriores, solo nos falta generar y descargar el provision profile, en el portal de desarrolladores le damos agregar, asegúrate de seleccionar iOS App Development y seleccionar las opciones que hemos generado en los pasos anteriores, al finalizar el wizard te aparecerá un link de descarga.

Con este archivo estamos listos para empaquetar nuestra aplicación y deployarla en los dispositivos de pruebas que definimos.

Configuración del paquete

En el directorio raíz de nuestra aplicación debería existir un archivo llamado packager.json, en caso de que no existe lo puedes crear de la siguiente manera.

$ sencha app package generate packager.json

Ahora vamos a configurar nuestra aplicación para poder empaquetarla correctamente. A continuación muestro mi archivo de configuración (packager.json).

{
  "applicationName": "Himnario",
  "applicationId": "com.bleext.testing",
  "bundleSeedId": "YOURSEEDID",
  "versionString": "2.0",
  /* iOS icon docs: http://goo.gl/yTIsa8 */
  "icon": {
    "57": "resources/icons/Icon.png",
    "114": "resources/icons/Icon@2x.png",
    "29": "resources/icons/Icon-Small.png",
    "58": "resources/icons/Icon-Small@2x.png",
    "40": "resources/icons/Icon-40.png",
    "80": "resources/icons/Icon-40@2x.png",
    "50": "resources/icons/Icon-Small-50.png",
    "100": "resources/icons/Icon-Small-50@2x.png",
    "60": "resources/icons/Icon-60.png",
    "120": "resources/icons/Icon-60@2x.png",
    "72": "resources/icons/Icon-72.png",
    "144": "resources/icons/Icon-72@2x.png",
    "76": "resources/icons/Icon-76.png",
    "152": "resources/icons/Icon-76@2x.png"
  },
  "inputPath": "./",
  "outputPath": "../dist/Payload",
  "configuration": "Release",
  "platform": "iOS",
  "deviceType": "iPhone",
  "certificateAlias": "iPhone Developer: Crysfel Villa (ABCDEF7GDF)",
  "provisionProfile": "~/Desktop/himnariodev.mobileprovision",
  "orientations": [
    "portrait"
  ]
}

Importante mencionar que la propiedad configuration debe utilizar el valor Release, también muy importante definir la propiedad icon con todos los iconos soportados por iOS7 (http://goo.gl/yTIsa8), el applicationName es el nombre que aparecerá en el home screen, el applicationId es el que definimos en los pasos anteriores al igual que el bundleSeedID.

Para este ejemplo solo definí la plataforma iOS y iPhone como dispositivo, para la propiedad certificateAlias debes asignarle el nombre que tiene en la utilería Keychain Access, muy importante también solo poner un certificado por build, es decir si mas adelante crear los certificados de distribución te recomiendo borrar el certificado de desarrollo, este pequeño detalle me tomo un par de horas resolverlo a prueba y error.

Otro pequeño detalle, que no viene documentado, es que para la aplicación tome todo el tamaño en el iPhone 5 debes crear el splash screen de 640x1136 y guardarlo en resources/loading/Default-568h@2x.png, con esto la aplicación automáticamente se desplegará en toda la pantalla.

Por último necesitamos ejecutar el siguiente comando para generar nuestra aplicación.

$ sencha app build native

Esto nos generará la aplicación que vamos a nuestro dispositivo por medio de iTunes, este archivo lo encontrarás en build/native-package-mobile/<nombre-app>/packager.json/<nombre-app>.app.

Ejecutar la aplicación en el dispositivo

Ahora solo queda copiar esta aplicación a la librería del iTunes, luego es necesario conectar el dispositivo que definimos cuando generamos el Provision Profile y sincronizar, esto copiará la aplicación desde iTunes al dispositivo!

Si todo ha salido bien podrás finalmente probar tu app sin problemas. Personalmente me tardé varias horas en completar y documentar los pasos, mucha paciencia y resolviendo los problemas a prueba y error.

Espero este tutorial te ayude a poder deployar tu app sin problemas. Tengo planeado escribir otro tutorial de como subir tu aplicación al Apple Store.