Demonstração completa do Ionic

improve this page | report issue

Visão Geral

O propósito dessa demonstração é explicar um fluxo completo. As etapas a seguir são executadas.

  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 para iOS, Android Studio para Android ou Visual Studio 2015 ou superior para Windows 10 UWP
  • CLI do Ionic
  • Opcional. MobileFirst CLI (download).
  • Opcional. MobileFirst Server independente (download).

Etapa 1. Iniciando o MobileFirst Server

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

Etapa 2. Criando e registrando um aplicativo

Abra o MobileFirst Operations Console carregando a URL: http://your-server-host:server-port/mfpconsole em um navegador. Se o servidor estiver sendo executado localmente, use: http://localhost:9080/mfpconsole. O username/password é admin/admin.

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

    Registre um aplicativo

  2. Faça download do aplicativo Ionic de amostra a partir do Github.

Etapa 3: Incluindo o SDK do MobileFirst no aplicativo Ionic

Siga as etapas abaixo para incluir o SDK MobileFirst do Ionic no aplicativo de amostra Ionic transferido por download.

  1. Navegue até a raiz de seu projeto Ionic existente e inclua o plug-in Ionic Cordova principal MobileFirst.

  2. Mude o diretório para a raiz do projeto Ionic: cd MFPStarterIonic

  3. Inclua os Plug-ins do MobileFirst usando o comando da CLI do Ionic: ionic cordova plugin add cordova-plugin-name Por exemplo:

    ionic cordova plugin add cordova-plugin-mfp
    

    O comando acima inclui o plug-in do SDK principal do MobileFirst no projeto Ionic.

  4. Inclua uma ou mais plataformas suportadas no projeto Cordova usando o comando da CLI do Ionic: ionic cordova platform add ios|android|windows|browser. Por exemplo:

    cordova platform add ios
    
  5. Prepare os recursos do aplicativo executando o comando ` ionic cordova prepare `:

    ionic cordova prepare
    

Etapa 4. Editando a lógica do aplicativo

  1. Abra o projeto Ionic no editor de código de sua escolha.

  2. Selecione o arquivo src/js/index.js e cole o seguinte fragmento de código, substituindo a função WLAuthorizationManager.obtainAccessToken() existente:

WLAuthorizationManager.obtainAccessToken("").then(
      (token) => {
        console.log('-->  pingMFP(): Success ', token);
        this.zone.run(() => {
          this.title = "Yay!";
          this.status = "Connected to MobileFirst Server";
        });
        var resourceRequest = new WLResourceRequest( "/adapters/javaAdapter/resource/greet/",
        WLResourceRequest.GET
        );

        resourceRequest.setQueryParameter("name", "world");
            resourceRequest.send().then(
                (response) => {
                    // Exibirá "Hello world" em um diálogo de alerta.
                    alert("Success: " + response.responseText);
                },
                (error) => {
                    alert("Failure: " + JSON.stringify(error));
                }
            );
      }, (error) => {
        console.log('-->  pingMFP(): failure ', error.responseText);
        this.zone.run(() => {
         this.title = "Bummer...";
         this.status = "Failed to connect to MobileFirst Server";
        });
      }
    );

Etapa 5. Implementar um adaptador

Faça download desse .adapter artifact e implemente-o a partir do MobileFirst Operations Console usando a ação Actions → Deploy adapter.

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

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

    Se Maven e 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

Etapa 6. Testando o aplicativo

  1. Em uma janela de Linha de Comandos, navegue para a pasta raiz do projeto Cordova:
  2. Execute o comando: ionic cordova platform add ios|android|windows|browser para incluir uma plataforma.
  3. No projeto Ionic, selecione o arquivo config.xml e edite o <mfp:server ... url=" "/> valor com as propriedades protocolo, host e porta com os valores corretos para o seu MobileFirst Server.
    • Se estiver usando um MobileFirst Server local, os valores normalmente serão http, localhost e 9080.
    • Se você estiver usando um MobileFirst Server remoto (no IBM Cloud), normalmente os valores serão https, your-server-address e 443.
    • Se você estiver usando um cluster do Kubernetes no IBM Cloud Private, e se a implementação for do tipo NodePort, normalmente o valor da porta será NodePort, exposto pelo serviço no cluster do Kubernetes.

    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 do comando para registrar o aplicativo, por exemplo:

     mfpdev app register myIBMCloudServer
    

Se um dispostivo estiver conectado, o aplicativo será instalado e ativado no dispostivo. Caso contrário, o simulador ou emulador será usado.


Resultados

  • Clicar no botão Ping MobileFirst Server exibe 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 ocorrerá. 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 October 16, 2018