Desenvolva um Aplicativo Híbrido do Oracle JET para o Oracle Mobile Hub

Você pode criar aplicativos móveis híbridos usando o Oracle JET e integrá-los às soluções PaaS da Oracle, como o Oracle Mobile Hub.

Antes de Começar

Antes de começar a desenvolver um aplicativo JET, você precisa atender aos seguintes pré-requisitos:

• Certifique-se de ter configurado seu Ambiente de Desenvolvimento Móvel Híbrido.
• Certifique-se de ter acesso a uma instância do Oracle Mobile Hub.

Sobre a Arquitetura dos Aplicativos Móveis Híbridos do Oracle JET

Um aplicativo móvel híbrido do Oracle JET é um aplicativo de página única (SPA) fornecido em uma única página ou view HTML. Isso significa que várias views podem existir em arquivos separados, mas o aplicativo sempre as renderizará como uma única página da Web. Esse comportamento é muito semelhante a um aplicativo nativo (um aplicativo desenvolvido com APIs de SO nativas), fornecendo assim uma experiência de usuário fluida.

O Apache Cordova é um framework de desenvolvimento móvel de código aberto que suporta tecnologias web padrão como HTML5, CSS3 e JavaScript para desenvolvimento multiplataforma. Os aplicativos móveis híbridos Oracle JET são executados nos wrappers Cordova direcionados a diferentes plataformas móveis, como iOS, Android e Windows.

A imagem a seguir mostra a arquitetura típica de um aplicativo híbrido Cordova:

Descrição da ilustração cordova_arch.png

cordova_arch-oracle.zip

Em uma Arquitetura Cordova, a exibição do aplicativo (geralmente composta de arquivos HTML, JS e CSS) é exibida em um wrapper do Sistema Operacional nativo que funciona internamente como um navegador da Web. A API do Cordova também fornece plugins para se comunicar com sistemas operacionais móveis por meio de APIs do Core OS, essas APIs permitem que você acesse componentes do sistema operacional móvel, como contatos, lista de endereços, localização, notificações e muito mais.

Configurar Seu Aplicativo Móvel Híbrido do Oracle JET

Antes de escrever o código para seu aplicativo móvel híbrido, você deve configurar seu aplicativo móvel híbrido. Para esse fim, use o comando ojet create para estruturar a estrutura de pastas e o modelo geral do seu aplicativo.

Para configurar seu aplicativo móvel híbrido:

1. Certifique-se de ter instalado a estrutura de ferramentas do Oracle JET.
2. Mode o aplicativo executando o comando ojet create [directory] --hybrid na console Node.js para gerar um modelo de aplicativo híbrido para Android, iOS e Windows:

   ojet create [directory] --hybrid
               [--appid=<application-id>] [--appname=<application-name>]
               [--template={<template-name>:[web|hybrid]|<template-url>|<template-file>}]
               [--platforms=android,ios,windows|--platform=android|ios|windows]

   Este exemplo mostra como gerar um modelo de aplicativo híbrido para Android, iOS e Windows:

   ojet create myApp --hybrid
               --appid=org.oraclejet.MyApp --appname="mySampleApp"
               --template="C:\Users\SomeUser\app.zip"
               --platforms=android,ios,windows

3. Adicione os plug-ins do Cordova:
   Para integrar seu aplicativo móvel híbrido ao Oracle Mobile Hub, adicione os seguintes plug-ins:

   • oracle-mobile-cloud-cookies: Um plug-in para autenticação com o Oracle Mobile Hub via SSO

   • cordova-plugin-inappbrowser: Um plug-in para fornecer uma exibição do navegador da Web, necessária para exibir a página de login SSO

   Para adicionar esses plug-ins:

   1. Faça login no Oracle Mobile Hub.
   2. Clique em Aplicações.
   3. Clique em Downloads do SDK. Com isso você irá para a página Downloads do SDK.
   4. Clique em Download do Cordova SDK.
   5. Descompactar o pacote.
   6. No pacote extraído, procure o oracle_mobile_js_sdk_cookies_cordova_plugin[VERSION].zip, no qual você pode encontrar o plug-in oracle-mobile-cloud-cookies.
   7. Para instalar o oracle-mobile-cloud-cookies plugin, descompacte o arquivo oracle_mobile_js_sdk_cookies_cordova_plugin[VERSION].zip e execute o seguinte comando cordova:

      cordova plugin add <PLUGIN_FOLDER>

      Em que <PLUGIN_FOLDER> é o caminho para o plug-in descompactado.

   8. Para instalar o cordova-plugin-inappbrowser plugin, execute o seguinte comando cordova para adicioná-lo ao seu projeto:

      cordova plugin add cordova-plugin-inappbrowser –save

4. Adicione o Cordova SDK do Oracle Mobile Hub ao seu aplicativo, copie msc.js, msc.min.js e oracle_mobile_cloud_config.js em um diretório no qual você manterá seus arquivos JavaScript.
5. Atualize os mapeamentos de caminho para mcs e mcs_cloud_config na seção requirejs.config do arquivo Oracle JET path_mappings.json.

   
   requirejs.config({
       baseUrl: 'js',
       // Path mappings for the logical module names
       paths:
       //injector:mainReleasePaths
       {
           'knockout': 'libs/knockout/knockout-3.4.0.debug',
           'jquery': 'libs/jquery/jquery-2.1.3',
           'jqueryui-amd': 'libs/jquery/jqueryui-amd-1.11.4',
           'promise': 'libs/es6-promise/promise-1.0.0',
           'hammerjs': 'libs/hammer/hammer-2.0.4',
           'ojdnd': 'libs/dnd-polyfill/dnd-polyfill-1.0.0',
           'ojs': 'libs/oj/v2.0.2/debug',
           'ojL10n': 'libs/oj/v2.0.2/ojL10n',
           'ojtranslations': 'libs/oj/v2.0.2/resources',
           'text': 'libs/require/text',
           'signals': 'libs/js-signals/signals',
              'mcs': 'libs/mcs/mcs',
              'mcsconf': 'libs/mcs/oracle_mobile_cloud_config'
       }
       //endinjector
       ,
       // Shim configurations for modules that do not expose AMD
       shim: {
           'jquery': {
               exports: ['jQuery', '$']
           }
       }
   });

6. Atualize oracle_mobile_cloud_config.js com os detalhes do backend móvel:

   var mcs_config = {
     "logLevel": 3,
     "mobileBackends": {
       "RDXTESTSSO": {
         "default": true,
         "baseUrl": "<YOUR_BASE_URL>",
         "applicationKey": "<YOUR_BACKEND_APPLICATION_KEY>",
         "synchronization": {
           "periodicRefreshPolicy": "PERIODIC_REFRESH_POLICY_REFRESH_NONE",
           "policies": [{
             "path": '/mobile/custom/taskApi/*',
             "fetchPolicy": 'FETCH_FROM_SERVICE_ON_CACHE_MISS_OR_EXPIRY',
             "expiryPolicy": 'EXPIRE_ON_RESTART',
             "evictionPolicy": 'EVICT_ON_EXPIRY_AT_STARTUP',
             "updatePolicy": 'QUEUE_IF_OFFLINE',
             "noCache": false
           }, {
             "path": '/mobile/custom/firstApi/tasks',
             "fetchPolicy": 'FETCH_FROM_SERVICE_ON_CACHE_MISS'
           }, {
             "path": '/mobile/custom/secondApi/tasks',
           }],
           "default": {
             "fetchPolicy": 'FETCH_FROM_SERVICE_IF_ONLINE',
             "expiryPolicy": 'EXPIRE_ON_RESTART'
           }
         },
         "authorization": {
           "basicAuth": {
               "backendId": "<YOUR_BACKEND_ID>",
               "anonymousToken": "<YOUR_BACKEND_ANONYMOUS_TOKEN>"
           },
           "oAuth": {
              "clientId": "<YOUR_CLIENT_ID>",
                 "clientSecret": "<YOUR_CLIENT_SECRET>",
                 "tokenEndpoint": "<YOUR_TOKEN_ENDPOINT>"
           },
           "facebookAuth": {
              "facebookAppId": "<YOUR_FACEBOOK_APP_ID>",
                 "backendId": "<YOUR_BACKEND_ID>",
                 "anonymousToken": "<YOUR_BACKEND_ANONYMOUS_TOKEN>"
           },
           "ssoAuth": {
              "clientId": "<YOUR_CLIENT_ID>",
                 "clientSecret": "<YOUR_ClIENT_SECRET>",
                 "tokenEndpoint": "<YOUR_SSOAUTH_TOKEN_ENDPOINT>"
           }
         }
       }
     }
   };

Integre seu Aplicativo Móvel Híbrido do Oracle JET ao Oracle Mobile Hub

Você pode integrar seu aplicativo híbrido do Oracle JET com um serviço móvel de backend como o Oracle Mobile Hub para extrair dados REST de aplicativos federados do Oracle SaaS como o Oracle Fusion Cloud Sales Automation.

Para integrar seu aplicativo móvel híbrido do Oracle JET ao Oracle Mobile Hub:

1. Certifique-se de ter 'mcs', 'mcsconf' configurado na configuração do arquivo path_mappings.json. Por exemplo, esses módulos podem ser carregados de uma instrução require:

   require(['ojs/ojcore', 'knockout', 'jquery', 'mcs', 'mcsconf', 'ojs/ojknockout', 'ojs/ojfilmstrip', 'ojs/ojpagingcontrol', 'ojs/ojbutton']

   Em que mcs e mcsconf são os nomes de caminho declarados no objeto requires.config no arquivo main.js.

2. Carregue a configuração do Oracle Mobile Hub em seu aplicativo:

   mcs.MobileBackendManager.platform = new mcs.CordovaPlatform();
   mcs.MobileBackendManager.setConfig(mcs_config);
   backend = mcs.MobileBackendManager.getMobileBackend("[YOUR_MOBILE_HUB_BACKEND]");
   if (backend != null) {
     backend.setAuthenticationType("ssoAuth");
     //other code to login to Mobile Hub or function call
   }

   Em que msc_config é o objeto de configuração definido quando você configurou seu aplicativo móvel híbrido do Oracle JET.

3. Autenticar usando o objeto Authorization. Por exemplo, para autenticar usando a variável "backend" usada na etapa anterior:

   backend.Authorization.authenticate(
     function(statusCode, data) {
       console.log(data);
       console.log(statusCode);
       alert("SSO Login success, status:" + statusCode);
       fetchSalesCloudData(data.access_token);
     },
     function(statusCode, data) {
       console.log(statusCode + " with message:  " + data);
       alert("SSO Login failed, statusCode" + statusCode);
     });

   O método Authorization.authenticate do backend usa duas funções como parâmetros. A primeira função é executada se a autenticação for bem-sucedida, enquanto a segunda é executada se a autenticação falhar.

4. Chame a API do Oracle Mobile Hub incluindo o cabeçalho da autorização. Você deve incluir o token fornecido no cabeçalho de autorização em um objeto de definições informado para a chamada AJAX jQuery. Por exemplo, se você quiser extrair dados de uma API REST personalizada do Oracle Fusion Cloud Sales Automation criada no Oracle Mobile Hub:

   function fetchSalesCloudData(ssoToken) {
       var mcsbackendURL = mcs_config.mobileBackends.RDXTESTSSO.baseUrl + "/mobile/custom/RDHSalesApplAPI/opportunities"; //custom API URL
       console.log(mcsbackendURL);
       var token = "Bearer " + ssoToken;
       //console.log(token);
       var settings = {
           "async": true,
           "crossDomain": true,
           "url": mcsbackendURL,
           "method": "GET",
           "headers": {
               "authorization": token
           }
       };
       $.ajax(settings).done(function(response) {
           console.log(response);
           $.each(response, function() {
               self.data.push({
                   Name: this.Name,
                   OptyId: this.OptyId,
                   OptyNumber: this.OptyNumber,
                   SalesStage: this.SalesStage,
                   Revenue: this.Revenue
               });
           });
           self.dataReady = true;
           displaySalesCloudData();
       });
   }

   No exemplo anterior, a variável settings é passada para a chamada REST AJAX jQuery. A variável de definições contém um parâmetro de cabeçalhos no qual o parâmetro de autorização contém o token de acesso. Observe também que há um parâmetro crossDomain usado para indicar que a comunicação entre domínios ocorrerá.

   Neste ponto, você fez uma chamada AJAX. No entanto, como uma opção alternativa, você também pode chamar APIs personalizadas de código personalizado.

5. Exiba os dados extraídos da chamada REST. Por exemplo, você pode usar um objeto filmstrip do Oracle JET:

       function displaySalesCloudData() {
   
         console.log("inside displayFilmStrip");
         self.pagingModel = null;
         getItemInitialDisplay = function(index) {
             return index < 1 ? '' : 'none';
         };
         getPagingModel = function() {
             if (!self.pagingModel) {
                 var filmstrip = document.getElementById('<element id>');
                 filmstrip.getPagingModel;              
                 self.pagingModel = pagingModel;
             }
             return self.pagingModel;
         };
     }

   Em que <element id> é o elemento HTML no qual os dados serão exibidos.

Crie e Teste Seu Aplicativo Móvel Híbrido do Oracle JET

Antes de executar seu aplicativo móvel híbrido do Oracle JET pela primeira vez, você precisa executar um build direcionado para uma plataforma móvel.

Execute o comando ojet build os para automatizar o processo de criação e teste. Execute o seguinte comando no prompt de comando Node.js:

ojet build [android|ios|windows]
           [--build-config=path/buildConfig.json --destination=device|emulator
            --theme=themename[:android|ios|web|windows] --themes=theme1,theme2,... 
            --sass
            --platform-options="string"]

Em que [android|ios|windows] é a plataforma na qual você deseja testar seu aplicativo. Por exemplo, se você estiver testando em um emulador Android, o comando será:

ojet build android

Depois que o build for concluído, execute o aplicativo usando o comando ojet serve os:

ojet serve [android|ios|windows]
           [--build-config=path/buildConfig.json
            --server-port=server-port-number --livereload-port=live-reload-port-number
            --destination=emulator[:emulator-name]|browser[:browser-name]|device[:device-name]|server-only
            --livereload --build
            --theme=theme_name[:android|ios|windows|web]] --themes=theme1,theme2,... 
            --sass
            --platform-options="string"]

Em que [android|ios|windows] é a plataforma na qual você deseja testar seu aplicativo. Por exemplo, se você estiver testando em um emulador Android, o comando será:

ojet serve android