Adición del SDK de MobileFirst Foundation a aplicaciones web

improve this page | report issue

Visión general

Desarrolle aplicaciones web de MobileFirst de escritorio o móviles mediante sus herramientas y entornos de desarrollo preferidos.
En esta guía de aprendizaje, aprenderá a añadir MobileFirst Web SDK a su aplicación web, así como registrar la aplicación web con MobileFirst Server

MobileFirst Web SDK se proporciona como un conjunto de archivos JavaScript. El SDK está disponible en NPM.
El SDK incluye los siguientes archivos:

  • ibmmfpf.js - El núcleo del SDK.
  • ibmmfpfanalytics.js - Proporciona soporte para MobileFirst Analytics.

Ir a

Requisitos previos

Adición de MobileFirst Web SDK

Para añadir el SDK a aplicaciones web nuevas o existentes, descárguelo primero en su estación de trabajo y, a continuación, añádalo a su aplicación web.

Descarga del SDK

  1. Desde una ventana de línea de mandatos, vaya a la carpeta raíz de su aplicación web.
  2. Ejecute el mandato: npm install ibm-mfp-web-sdk.

Este mandato crea la siguiente estructura de directorios:

Contenido de la carpeta SDK

Adición del SDK

Para añadir Mobile Foundation Web SDK, haga referencia al mismo de forma estándar en la aplicación web.
El SDK también da soporte a AMD, de forma que es posible utilizar cargadores de módulos como, por ejemplo, RequireJS para cargar el SDK.

Estándar

Haga referencia al archivo ibmmfpf.js en el elemento HEAD.

<head>
    ...
    ...
    <script type="text/javascript" src="node_modules/ibm-mfp-web-sdk/ibmmfpf.js"></script>
</head>

Utilización de RequireJS

HTML

<script type="text/javascript" src="node_modules/requirejs/require.js" data-main="index"></script>

JavaScript

require.config({
	'paths': {
		'mfp': 'node_modules/ibm-mfp-web-sdk/ibmmfpf'
	}
});

require(['mfp'], function(WL) {
    // application logic.
});

Importante: Si está añadiendo el soporte para las analíticas, coloque la referencia al archivo ibmmfpfanalytics.js antes de la referencia al archivo ibmmfpf.js.

Inicialización de MobileFirst Web SDK

Inicialización de Mobile Foundation Web SDK especificando los valores de raíz de contexto y el ID de aplicación en el archivo JavaScript principal de su aplicación web:

var wlInitOptions = {
    mfpContextRoot : '/mfp', // "mfp" is the default context root in the Mobile Foundation
    applicationId : 'com.sample.mywebapp' // Replace with your own value.
    sessionMode : true //This is an optional paramter. Setting this to true ensures that MFP related data is stored in the session rather than in the local storage. If this option is set to false or not set at all, default is local storage.
};

WL.Client.init(wlInitOptions).then (
    function() {
        // Application logic.
});
  • mfpContextRoot: Raíz de contexto que MobileFirst Server utilizará.
  • applicationId: Nombre del paquete de la aplicación, tal como la definió al registrar la aplicación.

Registro de la aplicación web

Las aplicaciones se pueden registrar desde MobileFirst Operations Console o desde MobileFirst CLI.

Desde MobileFirst Operations Console

  1. Abra su navegador preferido y cargue MobileFirst Operations Console especificando el URL http://localhost:9080/mfpconsole/.
  2. Pulse el botón Nuevo junto a Aplicaciones para crear una nueva aplicación.
  3. Seleccione Web como plataforma y proporcione un nombre y un identificador.
  4. Pulse Registrar aplicación.

Adición de la plataforma web

Desde MobileFirst CLI

Desde una ventana de línea de mandatos, vaya a la carpeta raíz de la aplicación web y ejecute el mandato: mfpdev app register.

Actualización de MobileFirst Web SDK

Los releases de SDK se pueden encontrar en el repositorio NPM de SDK.
Para actualizar MobileFirst Web SDK con el último release:

  1. Vaya a la carpeta raíz de la aplicación web.
  2. Ejecute el mandato: npm update ibm-mfp-web-sdk.

Política del mismo origen

Si los recursos web están alojados en una máquina de servidor diferente de la máquina en la que MobileFirst Server está instalado, se desencadena un incumplimiento de política del mismo origen. El modelo de seguridad de política del mismo origen se ha diseñado para protegerse con relación a posibles amenazas de seguridad desde orígenes no verificados. De acuerdo a esta política, un navegador permite a recursos web (como, por ejemplo, scripts) interactuar solo con los recursos provenientes del mismo origen (que se define como una combinación de esquema de URI, un nombre de host y un número de puerto). Para obtener más información sobre la política del mismo origen, consulte la especificación del Concepto de origen web, y específicamente los 3. Principios de la política del mismo origen.

Las aplicaciones web que utilizan MobileFirst Web SDK deben trabajar en una topología de soporte. Por ejemplo, utilizando un proxy inverso para redirigir de forma interna las solicitudes al servidor apropiado manteniendo el mismo origen individual.

Alternativas

Puede satisfacer los requisitos de política utilizando cualquiera de los siguientes métodos:

  • Sirviendo recursos de aplicación web, por ejemplo, desde el mismo servidor de aplicaciones de perfil WebSphere Application Server Liberty que se utiliza en IBM MobileFirst Foundation Developer Kit.
  • Utilizando Node.js como un proxy inverso para redirigir solicitudes de aplicación de MobileFirst Server.

Obtenga más información en la guía de aprendizaje Configuración del entorno de desarrollo web

Política de orígenes seguros

Al utilizar Chrome durante el desarrollo, el navegador podría no permitir que una aplicación se cargase utilizando HTTP y un host que no fuese localhost. La razón se encuentra en que la política de orígenes seguros está implementada y utilizada de forma predeterminada en este navegador.

Para solucionar esto, inicie el navegador Chrome con el siguiente distintivo:

--unsafely-treat-insecure-origin-as-secure="http://replace-with-ip-address-or-host:port-number" --user-data-dir=/test-to-new-user-profile/myprofile
  • Sustituya “test-to-new-user-profile/myprofile” con la ubicación de una carpeta que actuará como un nuevo perfil de usuario de Chrome para que el distintivo funcione.

Para obtener más información sobre los orígenes seguros, consulte este documento para desarrolladores de Chormium.

Guías de aprendizaje con las que continuar

Con MobileFirst Web SDK ahora integrado, podrá:

▲
Inclusive terminology note: The Mobile First Platform team is making changes to support the IBM® initiative to replace racially biased and other discriminatory language in our code and content with more inclusive language. While IBM values the use of inclusive language, terms that are outside of IBM's direct influence are sometimes required for the sake of maintaining user understanding. As other industry leaders join IBM in embracing the use of inclusive language, IBM will continue to update the documentation to reflect those changes.
Last modified on March 19, 2019