Creación de aplicaciones móviles

Última actualización: 2023-12-07
  • Temas:
  • Mobile
    Ver más sobre este tema
  • Creado para:
  • User
NOTA

Adobe SPA recomienda utilizar el Editor de para proyectos que requieran una representación del lado del cliente basada en el marco de trabajo de la aplicación de una sola página (por ejemplo, React). Más información.

Cree la aplicación para instalarla en un dispositivo o simulador para probarla o publicarla en tiendas de aplicaciones. Puede crear aplicaciones localmente mediante la interfaz de línea de comandos de PhoneGap o en la nube mediante PhoneGap Build.

Hay disponible un artículo paso a paso completo sobre cómo crear una aplicación móvil con el código disponible en GitHub aquí.

Mover la aplicación a la instancia de publicación

Mueva los archivos de aplicación a la instancia de publicación para que pueda proporcionar actualizaciones de contenido a las instancias instaladas de la aplicación móvil y para generar la aplicación utilizando el contenido publicado. Las aplicaciones constan de dos ramas de nodos en el repositorio:

  • /content/phonegap/apps/<application name>: Las páginas web que crean y activan los autores.
  • /content/phonegap/content/<application name>: archivos de configuración de la aplicación y configuraciones de sincronización de contenido.
NOTA

Si no mueve los archivos de la aplicación a la instancia de publicación, los autores de contenido no podrán actualizar la caché de sincronización de contenido.

Solo es necesario mover los archivos en la /content/phonegap/content/<application name> rama a la instancia de publicación. Los archivos en la /content/phonegap/apps/<application name> Las ramas se mueven cuando el autor activa las páginas.

AEM proporciona dos métodos para mover contenido masivo a la instancia de publicación:

Por ejemplo, se crea una aplicación móvil llamada phonegapapp. El nodo siguiente debe moverse a la instancia de publicación: /content/phonegap/content/phonegapapp.

Sugerencia: Para mover un paquete de la instancia de autor a la instancia de publicación, utilice el comando Replicar en el paquete.

chlimage_1-16

Generar mediante la interfaz de línea de comandos de PhoneGap

Compile la aplicación PhoneGap en el equipo mediante la interfaz de línea de comandos (CLI) de PhoneGap. AEM AEM Para incluir el contenido de la en la aplicación, crea un archivo ZIP que incluye el contenido de la aplicación móvil, las configuraciones de sincronización de contenido y otros recursos necesarios. Descargue el archivo ZIP e inclúyalo en su compilación.

Preparación del entorno de compilación

Para generar utilizando la CLI de PhoneGap, debe instalar Node.js y la utilidad de cliente de PhoneGap. Necesita una conexión a Internet para realizar el siguiente procedimiento.

  1. Descargar e instalar Node.js.

  2. Abra un terminal o símbolo del sistema e introduzca el siguiente comando de nodo para instalar la utilidad PhoneGap:

    npm install -g phonegap
    

    En un sistema UNIX® o Linux®, es posible que deba incluir el prefijo del comando sudo.

    El terminal muestra los resultados de una serie de comandos de GET HTTP. Cuando la instalación se realiza correctamente, el terminal muestra dónde están instaladas las bibliotecas de forma similar al siguiente ejemplo:

    /usr/local/bin/phonegap -> /usr/local/lib/node_modules/phonegap/bin/phonegap.js
    phonegap@3.3.0-0.19.6 /usr/local/lib/node_modules/phonegap
    ├── pluralize@0.0.4
    ├── colors@0.6.0-1
    ├── semver@1.1.0
    ├── qrcode-terminal@0.9.4
    ├── shelljs@0.1.4
    ├── optimist@0.6.0 (...)
    ├── prompt@0.2.11 (...)
    ├── phonegap-build@0.8.4 (...)
    ├── connect-phonegap@0.8.1 (...)
    └── cordova@3.3.0-0.1.1 (...)
    
  3. (Opcional) Obtenga el SDK para la plataforma móvil a la que está dirigiendo:

    • Para crear aplicaciones para la plataforma iOS, instale la versión más reciente de Xcode.
    • Para crear aplicaciones de Android™, instale el SDK para Android™.

Descarga del archivo ZIP de contenido

Mueva el contenido de la aplicación móvil al sistema de archivos.

  1. En la página Aplicaciones móviles, seleccione la aplicación.

  2. (Opcional) Para crear la aplicación para instalaciones completas, en la barra de herramientas, haga clic en el icono Borrar caché.

    Icono Borrar caché indicado por un símbolo de vínculo roto.

    NOTA

    La caché contiene actualizaciones de contenido para las aplicaciones instaladas. Al borrar la caché, se anularán todas las actualizaciones almacenadas en caché.

  3. En la barra de herramientas, haga clic en el icono Descargar recursos CLI.

    Descargue el icono Recursos CLI indicado por el símbolo de tableta superpuesto.

  4. Una vez guardado el archivo ZIP, haga clic en Cerrar en el cuadro de diálogo Éxito.

  5. Extraiga el contenido del archivo ZIP.

Uso de la CLI de PhoneGap para la compilación

Utilice la CLI de PhoneGap para compilar e instalar la aplicación. Para obtener información sobre cómo utilizar la CLI de PhoneGap, consulte la interfaz de línea de comandos de PhoneGap (https://docs.phonegap.com/en/3.0.0/guide_cli_index.md.html) documentación.

  1. Abra un terminal o símbolo del sistema y cambie el directorio actual al archivo ZIP de la aplicación descargada. Por ejemplo, lo siguiente cambia el directorio al archivo ng-app-cli.1392137825303.zip:

    cd ~/Downloads/ng-app-cli.1392137825303
    
  2. Introduzca el comando phonegap de la plataforma de destino. Por ejemplo, el siguiente comando crea la aplicación para Android™:

    phonegap build android
    

Creación con PhoneGap Build

Utilice el servicio en la nube de PhoneGap para crear su aplicación. Para realizar este procedimiento, primero debe crear una configuración de PhoneGap Build.

Conectando con el PhoneGap Build

Cree una configuración de PhoneGap Build para poder utilizar los servicios de PhoneGap Build AEM desde la propia cuenta de. Proporcione el nombre de usuario y la contraseña de la cuenta de PhoneGap Build que utilizará para crear sus aplicaciones móviles.

  1. Abra la página Herramientas. (http://localhost:4502/tools.html).

  2. En el área Operaciones de CQ, haga clic en Cloud Service.

  3. Haga clic en el vínculo Configurar ahora para el PhoneGap Build.

    chlimage_1-17

  4. En el cuadro de diálogo Crear configuración, escriba un valor para la propiedad Título. De forma predeterminada, el valor de la propiedad Name se deriva del título; sin embargo, puede escribir un nombre. Haga clic en Crear.

  5. En el cuadro de diálogo Configuración de PhoneGap Build, escriba el nombre de usuario y la contraseña de PhoneGap Build y, a continuación, haga clic en Aceptar.

Uso del PhoneGap Build

Envíe los recursos de su aplicación al PhoneGap Build para que los compile para las distintas plataformas móviles.

  1. En la página Aplicaciones móviles, abra la aplicación móvil. (http://localhost:4502/mobile.html/content/phonegap)

  2. (Opcional) Para crear la aplicación para instalaciones completas, seleccione la aplicación y haga clic en el icono Borrar caché.

    Icono Borrar caché indicado por un símbolo de vínculo roto.

    NOTA

    La caché contiene actualizaciones de contenido para las aplicaciones instaladas. Al borrar la caché, se anularán todas las actualizaciones almacenadas en caché.

  3. Seleccione la página de inicio y, a continuación, haga clic en el icono Generar remoto.

    Icono Generar control remoto indicado por dos engranajes redondos.

    Nota: AEM La versión beta de la versión beta de Beta no crea una notificación de la bandeja de entrada cuando la compilación se completa correctamente.

  4. En el cuadro de diálogo Correcto, haga clic en PhoneGap Build para abrir la página de Adobe PhoneGap Build en https://build.phonegap.com/apps. Si está esperando a que su aplicación aparezca, puede comprobar el estado del PhoneGap Build en https://status.build.phonegap.com/.

    Para obtener información sobre cómo instalar la compilación, consulte Documentación del PhoneGap Build.

    NOTA

    Las cuentas de PhoneGap Build gratuitas están permitidas en una aplicación privada. Las compilaciones de PhoneGap fallan si crea una aplicación privada adicional.

Pasos siguientes

El siguiente paso después del proceso de creación es aprender acerca de la Estructura de una aplicación.

En esta página