Desarrollo Flex para iOS

Con Flex y Adobe AIR podemos desarrollar para la gran mayoría de plataformas disponibles hoy en día, tales como iOS, Android, Mac, Windows o cualquier navegador por nombrar las más importantes. No obstante, vamos a centrar este artículo en el desarrollo para iOS ya que más allá de las necesidades concretas de la aplicación que queramos realizar, hay una serie de particularidades que debemos de tener en cuenta en cada plataforma y que merece la pena señalar.

Este artículo está escrito en un portátil MacBookPro con OSX Mavericks 10.9.2, por tanto se centra en la desarrollo desde el punto de vista de la plataforma de Apple y no hay indicaciones para Windows. No obstante puede servir como base para aquellos que estén desarrollando desde Plataforma Microsoft Windows.

Prerequisitos

1IntelliJ IDEA
El entorno de desarrollo usado para este artículo es IntelliJ IDEA (en su versión EAP 3.1.2RC). Si estás usando Adobe Flash Builder, te aconsejo que pruebes el IDE de Jetbrains ya que es una herramienta más estable, actualizada y soportada que la de Adobe. La versión actual (3.1) la puedes encontrar en su propia web.
En mi caso estoy usando una versión EAP para Mac que se puede descargar aquí. En concreto la 13.1.2 RC build 135.689, (ideaIU-135.689.dmg).

2Apple Developer
Para desarrollar, probar y publicar en la plataforma de Apple, necesitamos tener una licencia de desarrollador de Apple. Para ello tienes que registrarte en el programa de desarrolladores de iOS (coste de 80€/año). Sin esto solo podrás probar tu desarrollo en tu ordenador.

3Instalador Apache Flex
Usando el instalador de Apache Flex (v2.7, aunque pronto estará lista la 3.0), instalamos el SDK de Apache Flex, en el momento de escribir esto es la 4.12, Adobe AIR 13.0beta y Flash Player 13.0. El instalador nos pedirá seleccionar una carpeta de instalación y luego seleccionamos todos los paquetes ofrecidos para su instalación.

Instalador de Apache Flex

Instalador de Apache Flex

Ficheros de certificado y mobileprovisioning de Apple

En la página de recursos de tu cuenta de Apple Developer, debes de ir a la sección de Certificados, Identificadores y Perfiles de provisionamiento, que es lo que necesitamos para poder desarrollar para iOS, sea con XCode o con otra plataforma de desarrollo como Adobe AIR.

Aquí tenemos que crear un certificado, añadir dispositivos y crear un mobileprovision. El certificado tendrás que instalarlo en el keychain de tu Mac y exportarlo con clave para poder usarlo en IntelliJ. Para el mobileprovision, lo mejor es crear inicialmente uno de desarrollo y añadir todos tus dispositivos iOS (iPhones e iPads) para poder probar en unos u otros de forma sencilla.

Adicionalmente, tendrás que tener el SDK de iOS instalado. La mejor forma es instalar XCode (actualmente v5.1.1). El SDK lo tienes en:
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS7.1.sdk

Creando el proyecto en IntelliJ

Una vez descargado IntelliJ IDEA e instalado, abrimos la aplicación. Lo primero que haremos es seleccionar Create new project. En la ventana New Project, seleccionamos Flash, como tipo de proyecto, en la lista de la izquierda.

En la zona de la derecha de dicha ventana, tenemos la opción Flex/AIR SDK, hacemos click en el botón que hay a su derecha para añadir el SDK de Flex 4.12 instalado previamente.

Configurar Flex SDK en IntelliJ IDEA

Configurar Flex SDK en IntelliJ IDEA

Como Target Platform seleccionamos Flex Mobile y como Target Devices seleccionamos solo iOS.

Desarrollando Flex Mobile para iOS

Desarrollando Flex Mobile para iOS

Aunque este artículo se centre en el desarrollo iOS, podemos desarrollar igualmente para Android a la misma vez, lo cual supone una de las grandes ventajas del desarrollo con Flex y AIR.

Es momento de pulsar el botón Next. En la siguiente pantalla asignamos el nombre del proyecto, por ejemplo, TestIOSApp (como el directorio no existirá, aparecerá un dialogo para pedirnos permiso para crear la nueva carpeta del proyecto).

Una vez aprobado aparecerá la ventana de Intellij del proyecto.

Ajustando la configuración del proyecto

Una vez dentro del proyecto tendremos que terminar de realizar las configuraciones oportunas para el desarrollo con iOS. A nivel de código, IntelliJ habrá creado una aplicación mínima “Hello World” que nos vale perfectamente para los propósitos de este tutorial.

App Flex Mobile "Hello World"

App Flex Mobile “Hello World”

Para realizar las configuraciones de proyecto vamos a File > Project Structure (o también accesible con F4 en OSX).

En la ventana de estructura de proyecto nos aparecerán dos errores, que solucionaremos indicando la ruta a los ficheros de certificado y de mobileprovision que tendremos en nuestra máquina, en Modules > TestIOSApp > TestIOSAPP, pestaña iOS. También tenemos que indicar la ruta al SDK de iOS7. Como hemos indicado antes:
/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneOS.platform/Developer/SDKs/iPhoneOS7.1.sdk

Configurando certificado, mobileprovision y iOS SDK

Configurando certificado, mobileprovision y iOS SDK

Además tenemos que configurar el SDK global del proyecto, nuevamente flex_sdk_4.12, y con esto ya tenemos todo listo para probar la aplicación inicial.

Ejecutando la App de prueba

Una vez hecho esto podremos ejecutar mediante un Run Configuration la aplicación en nuestra máquina. El resultado es una imagen como esta.

Previsualizando la App de prueba en el ordenador.

Previsualizando la App de prueba en el ordenador.

Ahora para desplegar en nuestro dispositivo. Tenemos que tener nuestro iPhone o iPad conectado vía USB y arrancar iTunes. Seguidamente configuramos la ventana para ejecutar en el dispositivo y hacemos Run. Nos pedirá la clave del certificado que podemos elegir usar para toda la sesión. Una vez la aplicación se compile y empaquete se instalará en nuestro dispositivo iOS y podremos probarla en el mismo.

Probando en un dispositivo iOS

Probando en un dispositivo iOS

Debuggeando la App de prueba

Para debugear simplemente añade un punto de ruptura en tu código y ejecuta la aplicación en modo Debug. Conforme pases por el punto de ruptura la aplicación se parará y el IDE se pondrá en modo depuración para que puedas tener el control en ese punto, revisar variables, ir paso a paso, etc…

Con estas indicaciones ya puedes desarrollar aplicaciones para iOS con Apache Flex y Adobe AIR. Recuerda que aunque en este artículo nos hemos centrado en la plataforma Apple, también puedes desarrollar para Android simplemente añadiendo dicha plataforma y empaquetando para la misma. De esta forma obtienes la gran ventaja de poder desarrollar una sola vez y desplegar en varias plataformas, lo que supone una gran ventaja en tiempos y costes de desarrollo.

Etiquetado en:

10 Comentarios

  1. Carlos Rovira

    Hola Isaac,

    IntelliJ tiene un plugin adicional pero creo recordar que solo funcionaba con el SDK 4.6. No obstante recuerda que Flash Builder ya no posee dicha vista de diseño ya que fue eliminada en su última versión 4.7

  2. ISAAC HERNANDEZ CASTRO

    Muchas gracias por la respuesta Carlos,

    Tengo el siguiente cuestianimiento, para que me quede clara la idea,

    Entonces toda la programacion de las vista se tendran que hacer a modo de prueba y error
    como lo haciamos en msdos ???

  3. Carlos Rovira

    Normalmente las herramientas de “vista diseño” se utilizan para hacer una rápida disposición de elementos en la pantalla. Es decir, el layout de la misma. Pero no son efectivas para hacer una prueba de la funcionalidad de las misma, ya que esta suele requerir sesión de usuario, datos de servicio, y en general crear un estado en tiempo de ejecución que es imposible de crear por un IDE para un MXML concreto. Creo que lo que buscas está más orientado a buscar soluciones de automatización tipo Flex Monkey o similar, que son totalmente independientes del entorno de desarrollo que uses.

  4. Angelo

    Hola Carlos! Enhorabuena para el post!
    Soy Angelo Italiano y vivo en España (Málaga), desarrollo también en Flex y quiero darte las gracias por tu post que seguro hará empezar a mucha gente en conocer el fantastico mundo de Apache Flex.
    Si hace falta ayuda o algo, aquí estoy!
    Un saludo, Angelo

  5. Carlos Rovira

    Hola Angelo,

    estupendo! eso es lo que nos hace falta en la comunidad. Gente con Ganas de aportar! :).
    Si te haces un usuario en la web, puedes crear tus propios artículos y enviarlos para aprobar. Si contribuyes de forma habitual, puedes publicar tu mismo y ser parte del equipo de Made In Flex.

    Lo dicho, te animo a que te involucres ya que solo nosotros podemos hacer que Apache Flex tenga el protagonismo que merece.

    Gracias! 🙂

  6. Juan C. Ricalde P.

    Muy buena nota Carlos,
    Me gustaría saber tu opinión sobre IntelliJ IDEA,
    yo siempre eh usado el Flash Builder de Adobe, y para ser honesto, uso en conjunto Flash Builder 4.6 y la version 4.7 ya que por tiempos de desarrollo crear las vistas en el editor visual del flash builder 4.6 usando el sdk 4.6 para poder usar el modo de diseño.

    esto me resulta practico solo para fines de ahorro de tiempo, eh desarrollado para IOS y para Android en FLEX, y en verdad disfruto esta experiencia.

    me gustaría un tutorial que explicara como hacer Extensiones Nativas “ANE”.

  7. Carlos Rovira

    Hola Juan Carlos,

    IntelliJ IDEA es hoy por hoy mi IDE favorito para el desarrollo con lenguajes como Java o ActionScript. Adobe Flash Builder lleva tiempo sin actualizarse y lo cierto es que nunca ha terminado de funcionar bien.

    No obstante, tengo que decirte que si bien IntelliJ es más productivo y tiene una integración con Maven y flexmojos estupenda (lo cual lo hace perfecto para el ámbito empresarial), tiene una carencia en la parte de edición de CSS en Flex. En este punto Flash Builder es mejor. No obstante para mi es algo tan insignificante que no merece la pena en comparación a todas las otras ventajas.

    Por otra parte, IntelliJ tiene un plugin para “design view” adicional que creo que solo funciona para Flex 4.6. Nuevamente ambos IDEs no tiene resuelto este tema y no parece que sea una prioridad para ninguna de los proveedores de este tipo de herramientas.

  8. Juan C. Ricalde P.

    Gracias Carlos,
    ya baje la version de prueba.
    y realice el tutorial.
    buscare el plugin del design view para IntelliJ
    muchos de los problemas de flash builder están unidos a eclipse, como el limite de memoria al compilar, y problemas para trabajar con los sdk de android.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Acerca de Made In Flex

Made In Flex es una comunidad de desarrolladores de Apache Flex creada en 2006.

Apache Flex, anteriormente conocido como Adobe Flex, es un SDK (kit de desarrollo de software) para crear aplicaciones enriquecidas - multiplataforma basadas en Adobe Flash donado por Adobe a la fundación Apache in 2011 y promocionado a proyecto de primer nivel en Diciembre de 2012.

Actualmente estamos cambiando muchos aspectos del sitio web para ofrecer un sitio útil para toda la comunidad que tenga en cuenta las necesidades actuales.

Últimas Fotos

Instalador de Apache Flex

Entrar o Registrase