Configurando o ambiente de desenvolvimento da web

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é-requisito
• Usando o perfil Liberty do WebSphere para entregar os recursos de aplicativo da web
• Usando Node.js
• Próximas Etapas

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 do 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 deverá 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.

Próximas Etapas

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.

• Saiba como incluir o SDK do Mobile Foundation em aplicativos da web.
• Para desenvolvimento de aplicativos, consulte os tutoriais Usando o SDK do Mobile Foundation.
• Para desenvolvimento de adaptadores, consulte a categoria Adaptadores.