Demonstração completa do React Native

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

   

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) => {
            console.error(error);
            alert("Failure: Resource Request");
          }
        );
      }, (error) => {
        console.error(error);
        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.

   

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:

• Revise os tutoriais Desenvolvimento de Aplicativo
• Revise os tutoriais Desenvolvimento de Adaptadores
• Revise os tutoriais Autenticação e Segurança
• Revise os tutoriais Notificações
• Revise Todos os Tutoriais