Demonstração completa do React Native

improve this page | report issue

Visão Geral

O propósito dessa demonstração é explicar um fluxo completo:

  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 um adaptador executada com sucesso.

Pré-requisitos:

  • Xcode para iOS, Android Studio para Android
  • CLI do React Native
  • Opcional. MobileFirst CLI (download)
  • Opcional. Independente MobileFirst Server (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 no 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: Android, iOS
    • Insira com.ibm.mfpstarter.reactnative 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 React Native de amostra a partir do Github.

Etapa 3. Editando a lógica do aplicativo

  1. Abra o projeto React Native em seu editor de código de escolha.

  2. Selecione o arquivo app.js, localizado na pasta raiz do projeto, e cole o seguinte fragmento de código, substituindo a função WLAuthorizationManager.obtainAccessToken() existente:

  WLAuthorizationManager.obtainAccessToken("").then(
      (token) => {
        console.log('-->  pingMFP(): Success ', token);
        var resourceRequest = new WLResourceRequest("/adapters/javaAdapter/resource/greet/",
          WLResourceRequest.GET
        );
        resourceRequest.setQueryParameters({ 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);
        alert("Failed to connect to MobileFirst Server");
      });

Etapa 4. 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 5. Testando o aplicativo

  1. Certifique-se de ter instalado o MobileFirst CLI e, em seguida, navegue até a pasta raiz da plataforma específica (iOS ou Android) e execute o comando mfpdev app register. Se um MobileFirst Server remoto for usado, execute o comando para incluir o servidor,
    Servidor mfpdev add
    

    seguido do comando para regisrar o aplicativo, por exemplo:

    mfpdev app register myIBMCloudServer
    
  2. Execute o seguinte comando para executar o aplicativo:
    react-native run-ios|run-android
    

Se um dispositivo estiver conectado, o aplicativo será instalado e ativado no dispositivo. 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