Configurando o ambiente de desenvolvimento da web

improve this page | report issue

Visão Geral

Desenvolver e testar aplicativos da web é tão fácil quanto visualizar um arquivo HTML local no navegador da web de sua escolha.
Os desenvolvedores podem usar o IDE de sua escolha e quaisquer estruturas que atendam suas necessidades.

No entanto, uma coisa pode barrar o caminho de desenvolvimento de aplicativos da web. Os aplicativos da web podem encontrar erros devido à violação da política de mesma origem. A política de mesma origem é uma restrição imposta em navegadores da web. Por exemplo, se um aplicativo for hospedado no domínio example.com, não será permitido que o mesmo aplicativo também acesse o conteúdo que está disponível em outro servidor, ou neste caso, no MobileFirst Server.

Os aplicativos da web que devem usar o SDK da web do Mobile Foundation devem ser manipulados em uma topologia de suporte, por exemplo, usando um proxy reverso para redirecionar internamente solicitações para o servidor apropriado enquanto mantém a mesma origem única.

Os requisitos de política podem ser preenchidos usando qualquer um dos seguintes métodos:

  • Entregando os recursos de aplicativo da web do mesmo servidor de aplicativos de perfil Completo/Liberty do WebSphere que também hospeda o MobileFirst Server.
  • Usando Node.js como um proxy para redirecionar solicitações de aplicativos para o MobileFirst Server.

Ir para

Pré-Requisitos

  • Os aplicativos da web são suportados para as seguintes versões de navegador. Os números de versão indicam a versão mais antiga integralmente suportada do navegador respectivo.

    Navegador Chrome Safari* Internet Explorer Firefox Android Browser
    Versão Suportada 43+ 8+ 10+ 38+ Android 4.3+

    * No Safari, o modo de navegação privada é suportado apenas para aplicativos de página única (SPAs). Outros aplicativos podem apresentar comportamento inesperado.

  • As instruções de configuração a seguir requerem a instalação do Apache Maven ou do Node.js na estação de trabalho do desenvolvedor. Para obter instruções adicionais, consulte o guia de instalação.

Usando o perfil Liberty do WebSphere para entregar os recursos de aplicativo da web

Para entregar os recursos de aplicativo da web, eles precisam ser armazenados em um aplicativo da web Maven (um arquivo .war).

Criando um archetype de aplicativo da web Maven

  1. Em uma janela de linha de comandos, navegue para um local de sua escolha.
  2. Execute o comando:

    mvn archetype:generate -DgroupId=MyCompany -DartifactId=MyWebApp -DarchetypeArtifactId=maven-archetype-webapp -DinteractiveMode=false
    
    • Substitua MyCompany e MyWebApp por seus próprios valores.
    • Para inserir os valores, um a um, remova a sinalização -DinteractiveMode=false.

Construindo o aplicativo da web Maven com os recursos do aplicativo da web

  1. Coloque os recursos do aplicativo da web (como HTML, CSS, JavaScript e arquivos de imagem) dentro da pasta gerada [MyWebApp] → src → Main → webapp.

    A partir de agora, considere a pasta webapp como o local de desenvolvimento para o aplicativo da web.

  2. Execute o comando: mvn clean install para gerar um arquivo .war contendo os recursos da web do aplicativo.
    O arquivo .war gerado está disponível na pasta [MyWebApp] → target.

    Importante: mvn clean install deve ser executado sempre que você atualizar um recurso da web.

Incluindo o aplicativo da web Maven no servidor de aplicativos

  1. Edite o arquivo server.xml do servidor de aplicativos WebSphere.
    Se estiver usando o MobileFirst Developer Kit, o arquivo será localizado na pasta: [MobileFirst Developer Kit] → mfp-server → user → servers → mfp. Inclua a seguinte entrada:

    <application name="MyWebApp" location="path-to/MyWebApp.war" type="war"></application>
    
    • Substitua name e path-to/MyWebApp.war por seus próprios valores.
    • O servidor de aplicativos é reiniciado automaticamente após salvar as mudanças no arquivo server.xml.

Testando o aplicativo da web

Quando estiver pronto para testar seu aplicativo da web, visite a URL: localhost:9080/MyWebApp. - Substitua MyWebApp por seu próprio valor.

Usando Node.js

O Node.js pode ser usado como um proxy reverso para canalizar solicitações do aplicativo da web para o MobileFirst Server.

  1. Em uma janela de linha de comandos, navegue para a pasta do aplicativo da web e execute o seguinte conjunto de comandos:

    npm init
    npm install --save express
    npm install --save request
    
  2. Crie um novo arquivo na pasta node_modules, por exemplo, proxy.js.
  3. Adicione os seguintes códigos ao arquivo:

    var express = require('express');
    var http = require('http');
    var request = require('request');
    
    var app = express();
    var server = http.createServer(app);
    var mfpServer = "http://localhost:9080";
    var port = 9081;
    
    server.listen(port);
    app.use('/myapp', express.static(__dirname + '/'));
    console.log('::: server.js ::: Listening on port ' + port);
    
    // Servidor da web - atende o aplicativo da web
    app.get('/home', function(req, res) {
         // Website com o qual você deseja permitir conexão
         res.sendFile(__dirname + '/index.html');
    });
    
    // Proxy reverso, canaliza as solicitações para/de MobileFirst Server
    app.use('/mfp/*', function(req, res) {
         var url = mfpServer + req.originalUrl;
         console.log('::: server.js ::: Passing request to URL: ' + url);
         req.pipe(request[req.method.toLowerCase()](url)).pipe(res);
    });
    
    • substitua o valor port pelo seu preferencial.
    • substitua /myapp pelo nome de caminho preferencial para seu aplicativo da web.
    • substitua /index.html pelo nome de seu arquivo HTML principal.
    • se necessário, atualize /mfp/* com a raiz de contexto do tempo de execução do Mobile Foundation.
  4. Para iniciar o proxy, execute o comando: node proxy.js.
  5. Quando estiver pronto para testar seu aplicativo da web, visite a URL: server-hostname:port/app-name, por exemplo: http://localhost:9081/myapp
    • Substitua server-hostname por seu próprio valor.
    • Substitua port por seu próprio valor.
    • Substitua app-name por seu próprio valor.

Etapas seguintes

Para continuar com o desenvolvimento do Mobile Foundation em aplicativos da web, o SDK da web do Mobile Foundation precisa ser incluído no aplicativo da web.

Last modified on March 07, 2017