Demostración de principio a fin en Cordova

improve this page | report issue

Información general

El propósito de esta demostración es presentar un flujo de principio a fin:

  1. Desde MobileFirst Operations Console se registrará y descargará una aplicación de ejemplo que está empaquetada de forma previa con el SDK de cliente de MobileFirst
  2. Se desplegará un adaptador nuevo o uno que se proporcione en MobileFirst Operations Console.
  3. Se cambiará la lógica de la aplicación para realizar una solicitud de recurso.

Resultado final:

  • Ping satisfactorio a MobileFirst Server.
  • Recuperación satisfactoria de datos utilizando un adaptador.

Requisitos previos:

  • Xcode para iOS, Android Studio para Android o Visual Studio 2013/2015 para Windows 8.1 Universal / Windows 10 UWP
  • Cordova CLI 6.x.
  • Opcional. MobileFirst CLI (descargar)
  • Opcional. MobileFirst Server autónomo (descargar)

1. Cómo iniciar MobileFirst Server

Asegúrese de haber creado una instancia de Mobile Foundation, o
Si está utilizando MobileFirst Developer Kit, vaya hasta la carpeta del servidor y ejecute el mandato ./run.sh en Mac y Linux o run.cmd en Windows.

2. Creación y registro de una aplicación

En una ventana de navegador, abra MobileFirst Operations Console cargando el URL: http://su-host-servidor:su-puerto-servidor/mfpconsole. Si lo está ejecutando de forma local, utilice http://localhost:9080/mfpconsole. El nombre de usuario y la contraseña son admin/admin.

  1. Pulse el botón Nuevo junto a Aplicaciones
    • Seleccione una plataforma: Android, iOS, Windows
    • Especifique com.ibm.mfpstartercordova como el identificador de aplicación
    • Especifique 1.0.0 como la versión
    • Pulse Registrar aplicación

    Registrar una aplicación

  2. Pulse en la ventana Obtener código de inicio para seleccionar y descargar la aplicación Cordova de ejemplo.

    Descargar la aplicación de ejemplo

3. Edición de la lógica de la aplicación

  1. Abra el proyecto Cordova en el editor de código de su elección.

  2. Seleccione el archivo www/js/index.js y pegue el siguiente fragmento de código, sustituyendo la función WLAuthorizationManager.obtainAccessToken() existente:

WLAuthorizationManager.obtainAccessToken()
    .then(
        function(accessToken) {
            titleText.innerHTML = "Yay!";
            statusText.innerHTML = "Connected to MobileFirst Server";
            
            var resourceRequest = new WLResourceRequest(
                "/adapters/javaAdapter/resource/greet/",
                WLResourceRequest.GET
            );
            
            resourceRequest.setQueryParameter("name", "world");
            resourceRequest.send().then(
                function(response) {
                    // Will display "Hello world" in an alert dialog.
                    alert("Success: " + response.responseText);
                },
                function(response) {
                    alert("Failure: " + JSON.stringify(response));
                }
            );
        },

        function(error) {
            titleText.innerHTML = "Bummer...";
            statusText.innerHTML = "Failed to connect to MobileFirst Server";
        }
    );

4. Despliegue un adaptador

Descargue this prepared .adapter artifact y despliéguelo desde MobileFirst Operations Console con la acción Acciones → Desplegar adaptador.

Como alternativa, pulse el botón Nuevo junto a Adaptadores.

  1. Seleccione la opción Acciones → Descargar ejemplo. Descargue el ejemplo de adaptador Java de ejemplo “Hello World”.

    Si Maven y MobileFirst CLI no están instalados, siga las instrucciones de Definir su entorno de desarrollo en la pantalla.

  2. Desde una ventana de línea de mandatos, vaya a la carpeta raíz del proyecto Maven del adaptador y ejecute el mandato:

     mfpdev adapter build
    
  3. Cuando finalice la construcción, despliéguelo desde MobileFirst Operations Console con la acción Acciones → Desplegar adaptador. El adaptador se puede encontrar en la carpeta [adapter]/target.

    Desplegar un adaptador

Aplicación de ejemplo

5. Prueba de la aplicación

  1. Desde una ventana de línea de mandatos, vaya a la carpeta raíz del proyecto Cordova.
  2. Ejecute el mandato: cordova platform add ios|android|windows para añadir una plataforma.
  3. En el proyecto Cordova, seleccione el archivo config.xml y edite el valor <mfp:server ... url=" "/> con las propiedades protocol, host y port con los valores correctos para su instancia de MobileFirst Server.
    • Si está utilizando una instancia de MobileFirst Server local, los valores habitualmente son http, localhost y 9080.
    • Si está utilizando una instancia remota de MobileFirst Server (en Bluemix), los valores habitualmente son https, dirección-su-servidor y 443.

    Como alternativa, si ha instalado MobileFirst CLI, navegue hasta la carpeta raíz del proyecto y ejecute el mandato mfpdev app register. Si se utiliza una instancia remota de MobileFirst Server, ejecute el mandato mfpdev server add para añadir el servidor, seguido por ejemplo por mfpdev app register myBluemixServer.

Si hay conectado un dispositivo, la aplicación se instalará e iniciará en el dispositivo,
de lo contrario, se utilizará el Simulador o el Emulador.


Resultados

  • Pulsando el botón Ping MobileFirst Server visualizará Conectado a MobileFirst Server.
  • Si la aplicación se pudo conectar a MobileFirst Server, tendrá lugar una llamada de solicitud de recurso con el adaptador Java desplegado.

La respuesta del adaptador se visualiza entonces en una alerta.

Siguientes pasos

Aprenda más sobre cómo utilizar adaptadores en aplicaciones, y cómo integrar servicios adicionales como, por ejemplo, notificaciones push, utilizando la infraestructura de seguridad de MobileFirst entre otras cosas:

Last modified on September 21, 2017