Empaquetar aplicaciones web como aplicaciones móviles nativas con PhoneGap Build

PhoneGap Build es un servicio basado en la nube que le permite empaquetar sus aplicaciones webs como aplicaciones móviles nativas. PhoneGap Build admite el empaquetado de aplicaciones nativas para los siguientes sistemas operativos de dispositivos móviles:

  • iOS
  • Android
  • BlackBerry
  • webOS
  • Symbian
  • Windows Phone 8

Para obtener más información sobre el servicio PhoneGap Build, consulte el sitio web de PhoneGap.

Para obtener ayuda sobre cómo utilizar el servicio PhoneGap Build, consulte la documentación de PhoneGap Build.

La integración directa de Dreamweaver con PhoneGap Build para el empaquetado de aplicaciones no es compatible con la actualización más reciente a la versión de 2014 de Dreamweaver CC (octubre de 2014), y posteriores. Sin embargo, puede acceder directamente al servicio PhoneGap Build en línea y utilizar las actualizaciones más recientes de la función para empaquetar sus aplicaciones webs.

Usar el servicio PhoneGap Build en Dreamweaver CC (desde octubre de 2014)

  1. Inicie sesión en el servicio PhoneGap Build. Puede continuar utilizando su Adobe ID existente.

  2. Después de iniciar sesión, se le dirigirá a la sección “Aplicaciones” del sitio. Cargue los activos web como un archivo ZIP que contenga los archivos HTML, CSS y JavaScript, o señale a un repositorio Git o SVN.

    Sección de aplicaciones del servicio PhoneGap Build

  3. El servicio PhoneGap Build compila y empaqueta el contenido en minutos, y recibirá los vínculos de descarga para todas las plataformas móviles.

Para obtener asistencia con el servicio PhoneGap Build, visite la página de soporte técnico o el foro de la comunidad.

Usar el servicio PhoneGap Build en Dreamweaver CC (junio de 2014)

Creación de una cuenta de servicio PhoneGap Build

No puede utilizar PhoneGap Build y Dreamweaver sin una cuenta de servicio PhoneGap Build. Las cuentas son gratuitas y fáciles de configurar. Para crear una, visite el sitio web de PhoneGap Build.

Tendrá que validar la cuenta a través de un correo electrónico de confirmación para activarla.

Configuración del entorno de desarrollo

Dependiendo de los tipos de aplicaciones que desee empaquetar y de los dispositivos que desee comprobar, existen diversas tareas de configuración que deberá realizar antes de empaquetar la aplicación. Es posible que desee configurar algunas, todas o ninguna de las siguientes opciones:

SDK de Android Si desea comprobar aplicaciones Android en su equipo local mediante un emulador de Android, deberá descargar e instalar el SDK de Android. Para obtener más información, consulte la documentación de Android.

Una vez que haya instalado el SDK de Android, tendrá que iniciar el SDK de Android y los administradores de AVD y seleccionar las herramientas de Android con las que desea trabajar localmente en su equipo. Dreamweaver utiliza la información que seleccione durante la instalación inicial para establecer los parámetros del emulador de Android en el panel del servicio PhoneGap Build. Para obtener más información sobre cómo especificar estos parámetros, consulte la documentación de Android.

 

IMPORTANTE: si desea utilizar un emulador de Android para comprobar la aplicación localmente, debe conseguir que el emulador funcione del modo deseado independientemente de Dreamweaver antes de realizar la prueba.

SDK/PDK de webOS Si desea comprobar aplicaciones de webOS en el equipo local con un emulador de webOS, deberá descargar e instalar el SDK/PDK de webOS.

Lectores de código QR (Quick Response: respuesta rápida) Si desea transferir fácilmente la aplicación empaquetada al dispositivo, necesitará un lector de código QR. Cuando empaquete una aplicación mediante Dreamweaver, recibirá un código QR para la aplicación, que aparecerá en el panel PhoneGap Build, una vez que la aplicación se haya empaquetado. Hay varios lectores de código disponibles de forma gratuita a través de diversas plataformas comerciales. Para obtener más información, introduzca en Google “lector de código QR”.

Instalación del complemento PhoneGap Build

Antes de utilizar el servicio PhoneGap Build en Dreamweaver, debe instalar el complemento PhoneGap Build.

Para instalar el complemento, vaya a Ventana > Examinar opciones adicionales. Aparece la página de complementos de Adobe Creative Cloud. Busque el complemento PhoneGap Build y siga las instrucciones que aparecen en pantalla para instalar el complemento.

Importante: antes de instalar un complemento, asegúrese de haber activado la sincronización de archivos para su cuenta de Adobe Creative Cloud. Consulte Activación de la sincronización de archivos en Adobe Creative Cloud para obtener más información.

Empaquetado de aplicaciones móviles con PhoneGap Build

  1. Asegúrese de que ha creado un sitio de Dreamweaver con una página index.html (generalmente, la página de inicio de la aplicación).

    Nota:PhoneGap Build solo admite el uso de archivos HTML, CSS y JavaScript. El sitio no puede contener páginas de servidor como PHP, CFM u otros tipos de páginas basadas en servidor.

  2. Elija Sitio > Servicio PhoneGap Build > Servicio PhoneGap Build.

  3. Proporcione sus datos de inicio de sesión para iniciar una sesión en PhoneGap Build. Si no ha creado ninguna cuenta de PhoneGap Build, consulte Creación de una cuenta de servicio PhoneGap Build.

  4. Deje seleccionada la opción Crear como nuevo proyecto y haga clic en Continuar.

  5. Escriba la clave y contraseña, según corresponda, para los sistemas operativos de destino. La información de clave de firma solo es necesaria para Android, iOS y Blackberry.

    Si no puede crear más de una aplicación, puede que ello se deba a que no está suscrito al servicio PhoneGap.

    Nota:

    si introduce información incorrecta, la build fallará y se mostrará un mensaje de error que indica que ha introducido una clave o contraseña incorrecta. Si no introduce ninguna información, la build de iOS fallará y se mostrará un mensaje de error que indica que se necesita la clave de firma. Las aplicaciones para Android y Blackberry se crean usando los certificados de depuración.

    Introduzca la clave y contraseña requeridas para el sistema operativo de destino.

  6. Observe que Dreamweaver añade un archivo ProjectSettings a la raíz del sitio. Es posible que tenga que actualizar el panel Archivos para verlo. Este archivo es muy importante, ya que el servicio PhoneGap Build lo utiliza para realizar un seguimiento de su aplicación.

    Dreamweaver también añade un archivo config.xml a la raíz del sitio. Haga doble clic en este archivo XML sencillo para que se abra.

    archivo config.xml

    Personalice la identidad de la aplicación mediante la modificación del contenido de este archivo. Si no lo hace, todas las aplicaciones tendrán el mismo nombre de aplicación predeterminado.

    Para obtener más información sobre cómo trabajar con el archivo config.xml, consulte la documentación de PhoneGap Build.

  7. Guarde el archivo config.xml modificado, ciérrelo y haga clic en Volver a crear en el panel Servicio PhoneGap Build. Conforme PhoneGap termine de empaquetar la aplicación para cada plataforma, verá mensajes que indican que la compilación se ha completado.

    novedades, dreamweaver, HTML5, CSS, transiciones, aplicación web, paquete web, efectos, CSS3, diseño de cuadrícula fluida, Phonegap, nuevas funciones, jquery, business catalyst, fuentes web, mejoras de ftp, optimización de PSD, dreamweaver cs6
    El panel de servicio PhoneGap indica cuando está completa la compilación.

    Nota:

    para empaquetar una compilación de Windows 8, debe iniciar sesión directamente en https://build.phonegap.com, cargar los archivos necesarios y realizar la compilación.

    De forma predeterminada, Dreamweaver utiliza la versión 2.9.0 de PhoneGap Build. Si quiere utilizar la versión más reciente de PhoneGap Build, siga estos pasos:

    1. Quite esta línea del archivo config.xml, en la carpeta raíz del sitio:
    2. <preference name="phonegap-version" value="2.9.0" />

    3. Guarde el archivo.
    4. Vuelva a compilar el proyecto.

    Una vez realizadas las compilaciones, dispondrá de varias opciones. Puede descargar los archivos de la aplicación a su equipo, escanear un código QR de la compilación para transferir la aplicación al dispositivo o emular la aplicación usando un emulador (solo Android y webOS).

Descarga de archivos de la aplicación

Para descargar una aplicación desde PhoneGap Build, haga clic en el botón Descargar aplicación (flecha que apunta hacia abajo) del panel Servicio PhoneGap Build.

Nota: la descarga no está disponible para aplicaciones iOS sin una clave de firma. Para obtener más información, consulte la documentación de PhoneGap Build.

Los nombres de los archivos de aplicación descargados son los siguientes:

  • iOS: app.ipa
  • Android: app.apk
  • BlackBerry: app.jad
  • webOS: app.ipk
  • Symbian: app.wgz

Escaneado de un código QR para transferir una aplicación a un dispositivo

Es necesario disponer de un lector de código QR en el dispositivo para continuar. Para obtener más información, consulte Configuración del entorno de desarrollo.

Nota: los códigos QR no están disponibles para aplicaciones iOS sin una clave de firma. Para obtener más información, consulte la documentación de PhoneGap Build.

  1. En el panel Servicio PhoneGap Build, haga clic en el código QR para la aplicación que desea descargar.
  2. Inicie el lector de código QR en su dispositivo móvil y escanee el código QR.
  3. Una vez que la aplicación haya terminado de descargarse, podrá iniciarla directamente en el dispositivo.
  4. Regrese a la lista de compilaciones haciendo clic en el botón Regresar al panel de Build.
Nota: los códigos QR no están disponibles para aplicaciones iOS sin una clave de firma.

Emulación de una aplicación (Android y webOS solamente)

IMPORTANTE: es necesario tener instalado el SDK de Android o el SDK/PDK de webOS antes de continuar. Asimismo, tendrá que haber especificado cualquier información de SDK/AVD que desee que esté disponible localmente desde las aplicaciones del SDK. Para obtener más información, consulte Configuración del entorno de desarrollo.

  1. Para abrir el panel Configuración de PhoneGap Build, elija Sitio > Servicio PhoneGap Build > Configuración de PhoneGap Build.
  2. Especifique las ubicaciones de los SDK de Android o webOS, y haga clic en Guardar. Estas ubicaciones indican a Dreamweaver dónde encontrar la información que necesita para enviar la aplicación al emulador o emuladores.
  3. En el panel Servicio PhoneGap Build (Sitio > Servicio PhoneGap Build > Servicio PhoneGap Build), haga clic en el botón Emular (orientado transversalmente) para la aplicación que desea emular.
  4. Si especificó anteriormente la información de SDK/AVD desde las aplicaciones del SDK, debería aparecer una ventana con datos ya proporcionados.
  5. Elija el SDK/AVD que desea utilizar para la emulación y haga clic en Iniciar.

Nota: los emuladores a veces son muy lentos. Un emulador puede tardar bastante en iniciar y cargar la aplicación.

Creación e implementación de una aplicación de Android con PhoneGap y Dreamweaver

Kevin Hoyt, desarrollador experto en Adobe

Creación e implementación de una aplicación de iOS con PhoneGap

Kevin Hoyt, desarrollador experto en Adobe

 Adobe

Obtén ayuda de forma más rápida y sencilla

¿Nuevo usuario?

Adobe MAX 2024

Adobe MAX
La conferencia de creatividad

Del 14 al 16 de octubre en Miami Beach y en línea

Adobe MAX

La conferencia de creatividad

Del 14 al 16 de octubre en Miami Beach y en línea

Adobe MAX 2024

Adobe MAX
La conferencia de creatividad

Del 14 al 16 de octubre en Miami Beach y en línea

Adobe MAX

La conferencia de creatividad

Del 14 al 16 de octubre en Miami Beach y en línea