Demonstração de ponta a ponta do Cordova

improve this page | report issue

Visão Geral

O propósito desta demonstração é experimentar um fluxo de ponta a ponta:

  1. Um aplicativo de amostra que é pré-empacotado com o SDK do cliente MobileFirst é registrado e transferido por download a partir do MobileFirst Operations Console.
  2. Um adaptador novo ou fornecido é implementado no MobileFirst Operations Console.
  3. A lógica de aplicativo é alterada para fazer uma solicitação de recurso.

Resultado final:

  • Ping de MobileFirst Server executado com sucesso.
  • Recuperação de dados usando adaptador realizada com sucesso.

Pré-requisitos:

  • Xcode for iOS, Android Studio for Android ou Visual Studio 2013/2015 for Windows 8.1 Universal/Windows 10 UWP
  • Cordova CLI 6.x.
  • Opcional. MobileFirst CLI (download)
  • Opcional. Independente MobileFirst Server (download)

1. Iniciando o MobileFirst Server

Certifique-se de ter criado uma instância do Mobile Foundation ou
Se estiver usando MobileFirst Developer Kit, navegue para a pasta do servidor e execute o comando: ./run.sh em Mac e Linux ou run.cmd no Windows.

2. Criando e registrando um aplicativo

Em uma janela do navegador, abra MobileFirst Operations Console carregando a URL: http://your-server-host:server-port/mfpconsole. Se estiver executando localmente, use: http://localhost:9080/mfpconsole. O nome de usuário/senha são admin/admin.

  1. Clique no botão Novo próximo de Aplicativos
    • Selecione uma plataforma: Android, iOS, Windows
    • Insira com.ibm.mfpstartercordova como o identificador do aplicativo
    • Insira 1.0.0 como a versão
    • Clique em Registrar aplicativo

    Registre um aplicativo

  2. Clique no quadro Obter Código de Início e selecione para fazer download do aplicativo de amostra Cordova.

    Download do aplicativo de amostra

3. Editando a lógica de aplicativo

  1. Abra o projeto Cordova no editor de código escolhido.

  2. Selecione o arquivo www/js/index.js e cole o fragmento de código a seguir, substituindo a função 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) {
                    // Exibirá "Hello world" em um diálogo de alerta.
                    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. Implemente um adaptador

Faça o download deste artefato .adapter preparado e implemente-o a partir do MobileFirst Operations Console usando a ação Ações → Implementar Adaptador.

Como alternativa, clique no botão Novo próximo de Adaptadores.

  1. Selecione a opção Ações → Download de Amostra. Faça o download da amostra do adaptador Java “Hello World”.

    Se o Maven e o MobileFirst CLI não estiverem instalados, siga as instruções Configure seu ambiente de desenvolvimento na tela.

  2. Em uma janela de Linha de Comandos, navegue para a pasta raiz do projeto Maven do adaptador e execute o comando:

    mfpdev adapter build
    
  3. Quando a compilação for concluída, implemente-a a partir do MobileFirst Operations Console usando a ação Ações → Implementar Adaptador. O adaptador pode ser localizado na pasta [adapter]/target.

    Implemente um adaptador

aplicativo de amostra

5. Testando o aplicativo

  1. Em uma janela de Linha de Comandos, navegue para a pasta raiz do projeto Cordova:
  2. Execute o comando: cordova platform add ios|android|windows para incluir uma plataforma.
  3. No projeto Cordova, selecione o arquivo config.xml e edite o valor <mfp:server ... url=" "/> com as propriedades protocol, host e port com os valores corretos para seu MobileFirst Server.
    • Se estiver usando um MobileFirst Server local, os valores normalmente serão http, localhost e 9080.
    • Se estiver usando um MobileFirst Server remoto (no Bluemix), os valores normalmente serão https, your-server-address e 443.

    Como alternativa, se você tiver instalado MobileFirst CLI, navegue para a pasta raiz do projeto e execute o comando mfpdev app register. Se um MobileFirst Server remoto for usado, execute o comando mfpdev server add para incluir o servidor, seguido por, por exemplo: mfpdev app register myBluemixServer`.

Se um dispositivo estiver conectado, o aplicativo será instalado e ativado no dispositivo.
Caso contrário, o Simulador ou Emulador será usado.


Resultados

  • Um clique no botão Ping MobileFirst Server exibirá Conectado ao MobileFirst Server.
  • Se o aplicativo foi capaz de se conectar ao MobileFirst Server, uma chamada de solicitação de recurso usando o adaptador Java implementado acontecerá.

A resposta do adaptador é então exibida em um alerta.

Etapas Seguintes

Saiba mais sobre como usar adaptadores em aplicativos e como integrar serviços adicionais, como Notificações Push, usando a estrutura de segurança do MobileFirst e mais:

Last modified on April 21, 2017