quarta-feira, 1 de outubro de 2014

Android - Browser Chamando Aplicação

Como abrir minha aplicação Android através do browser de um dispositivo? E se meu aplicativo não estiver instalado? E se não for um dispositivo com Sistema Operacional Android? Consigo redirecionar para o Google Play Store caso meu aplicativo não esteja instalado?

Sem mais enrolação, vamos ao passo-a-passo!

1) Crie um simples projeto Android com o nome de ProjetoBrowser e nomeie sua Activity principal como MainActivity. Se você tem dificuldades em dar este primeiro passo siga nosso tutorial de como criar um projeto Android aqui.

2) Agora tornaremos nossa Activity principal (MainActivity) acessível pelo browser e deixá-la com a ação de visualização.

Para torná-la acessível por browser adicione as seguintes "category" (categories) dentro da sessão de "<intent-filter>" dentro de sua Activity:

 <category android:name="android.intent.category.DEFAULT" />  
 <category android:name="android.intent.category.BROWSABLE" />  

Mude a ação de sua Activity de "android.intent.action.MAIN" para "android.intent.action.VIEW":

 <action android:name="android.intent.action.VIEW" /> 

Retire a category "<category android:name="android.intent.category.LAUNCHER" />". A declaração de sua Activity no arquivo "AndroidManifest.xml" deverá estar assim:

 <activity  
    android:name=".MainActivity"  
    android:label="@string/app_name" >  
    <intent-filter>  
      <action android:name="android.intent.action.VIEW" />  
      <category android:name="android.intent.category.DEFAULT" />  
      <category android:name="android.intent.category.BROWSABLE" />  
    </intent-filter>  
 </activity>  

3) Agora vamos estabelecer como os browsers invocarão nossa Activity, ou seja, como ela será referenciada pelos browsers.

Um link é composto por um schema, um host e alternativamente por caminhos (schema://host/caminho/). Para que nossa Activity seja acessada por browsers precisamos estabelecer o link que invocará a mesma e como todo link, este também deverá conter tais atributos. O Android facilita esta tarefa ao permitir que estabeleçamos tais atributos através da tag "<data>" declarada dentro da sessão do "<intent-filter>" localizado dentro da declaração de nossa Activity. Para que nossa Activity seja acessada via link "http://www.poc.projetobrowser/open/" inclua o seguinte trecho de código logo abaixo da "category" BROWSABLE antes já definida:

 <data android:scheme="http" android:host="www.poc.projetobrowser" android:path="/open/"/>  

Note que nenhum destes valores são pré-estabelecidos, ou seja, você poderia definir o "schema" como "meuApp", o "host" como "www.abobrinha.com" e o "path" como "/qualquercoisa/" e, assim sendo, sua Activity poderia ser invocada pelo link "meuApp://www.abobrinha.com/qualquercoisa/".

4) Alguns browser, como por exemplo o próprio Chrome, ignoram o "www" em suas requisições e isso pode afetar o funcionamento de nosso projeto. Para que isso não ocorra, adicione outro parâmetro "<data>" substituindo o valor do atributo "host" pelo mesmo porém retirando o "www". Em nosso caso ficará assim:

 <data android:scheme="http" android:host="poc.projetobrowser" android:path="/open/"/>  

Ao final de tudo isso nosso arquivo "AndroidManifest.xml" deverá estar assim:

 <?xml version="1.0" encoding="utf-8"?>  
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"  
   package="com.poc.projetobrowser"  
   android:versionCode="1"  
   android:versionName="1.0" > 
 
   <uses-sdk  android:minSdkVersion="14"  android:targetSdkVersion="21" /> 
 
   <application  
     android:allowBackup="true"  
     android:icon="@drawable/ic_launcher"  
     android:label="@string/app_name"  
     android:theme="@style/AppTheme" > 
 
     <activity  
       android:name=".MainActivity"  
       android:label="@string/app_name" >
  
       <intent-filter>  
         <action android:name="android.intent.action.VIEW" />  
         <category android:name="android.intent.category.DEFAULT" />  
         <category android:name="android.intent.category.BROWSABLE" /> 
 
         <data android:scheme="http" android:host="www.poc.projetobrowser" android:path="/open/" />  
         <data android:scheme="http" android:host="poc.projetobrowser" android:path="/open/"/>  
       </intent-filter>  

     </activity>  

   </application>  
 </manifest>  

Toda a configuração necessário do lado da aplicação está concluída!! Agora vamos para o lado WEB.

5) Você precisará de um servidor para hospedar sua página HTML para que a mesma fique disponível para ser acessada via browser do dispositivo. Existem vários servidores gratuitos na internet. Eu utilizo o www.bugs3.com que vem satisfazendo as necessidades muito bem.

6) Crie uma simples página HTML com um botão que ao ser clicado invocará sua Activity. Abaixo está o HTML com o botão:


 <html>   
   <head>   
   </head>   
   <body>    
        <button onClick="chamarAplicativo()">Chamar Meu Aplicativo</button>  
   </body>   
</html>   

O código acima apenas criará o botão mostrado abaixo (sem nenhuma ação):


7) Percebemos que ao clicar no botão acima, será chamada uma função "Javascript" que ainda não foi definida. Esta função fará a mágica!! Vamos construí-la começando com a identificação de qual plataforma e Sistema Operacional está renderizando nosso HTML, pois apenas quando o mesmo for aberto em um browser que está rodando dentro de um dispositivo Android que nossa aplicação poderá ser chamada. Fazemos isso da seguinte forma:

 function chamarAplicativo(){   
     var user = navigator.userAgent.toLowerCase();  
     var isAndroid = user.indexOf("android");  
      if(isAndroid > -1){  
           //mágica aqui!!                 
      }  
 }   

8) E aqui está a linha de código obscura em "Javascript" que abre nossa Aplicação de acordo com os parâmetros que definimos anteriormente:

 location.href="intent://poc.projetobrowser/open/#Intent;package=com.poc.projetobrowser;scheme=http;end;";  

9) O que está linha faz? Resumidamente, dispara para o SO Android um "Intent" com o host "poc.projetobrowser", com o caminho "/open/" e o schema "http". Se tal aplicativo não for achado instalado no SO Android, o usuário será direcionado para o Google Play Store em uma busca pelo aplicativo registrado com o valor descrito no atributo "package" na linha acima. Em nosso caso, "com.poc.projetobrowser".

A página HTML completa ficará assim:

 <html>   
      <head>   
        <script type="text/javascript">   
                function chamarAplicativo(){   
                     var user = navigator.userAgent.toLowerCase();  
                     var isAndroid = user.indexOf("android");  
                     if(isAndroid > -1){  
                          location.href="intent://poc.projetobrowser/open/#Intent;package=com.poc.projetobrowser;scheme=http;end;";  
                     }  
                }   
        </script>   
      </head>   
      <body>    
           <button onClick="chamarAplicativo()">Chamar Meu Aplicativo</button>  
      </body>   
  </html>   

Para facilitar o teste de seu aplicativo, sabendo que a parte WEB geralmente não fica para o desenvolvedor Mobile, criei uma página HTML onde você pode passar os dados de configuração de seu aplicativo e chamá-lo através da mesma. A página é mostrada abaixo:

 <html>   
      <head>   
        <script type="text/javascript">   
                function chamarAplicativo(){   
                     var user = navigator.userAgent.toLowerCase();  
                     var isAndroid = user.indexOf("android");  
                     if(isAndroid > -1){  
                          location.href="intent://poc.projetobrowser/open/#Intent;package=com.poc.projetobrowser;scheme=http;end;";  
                     }  
                }   
                function chamarAplicativoTerceiro(){   
                     var user = navigator.userAgent.toLowerCase();  
                     var isAndroid = user.indexOf("android");  
                     if(isAndroid > -1){  
                          var schema = document.getElementById("txt_schema").value;  
                          var host = document.getElementById("txt_host").value;  
                          var path = document.getElementById("txt_path").value;  
                          var inputPackage = document.getElementById("txt_package").value;  
                          location.href="intent://"+host+path+"#Intent;package="+inputPackage+";scheme="+schema+";end;";  
                     }  
                }   
        </script>   
      </head>   
      <body>    
           <div>   
                <form id="form1">   
                     <table width="100%" class="mytable">   
                          <tr>   
                               <td>Schema</td>   
                          </tr>   
                          <tr>   
                               <td><input type="text" id="txt_schema"></td>   
                          </tr>   
                          <tr>   
                               <td>Host</td>   
                          </tr>   
                          <tr>   
                               <td><input type="text" id="txt_host"></td>   
                          </tr>   
                          <tr>   
                               <td>Path</td>   
                          </tr>   
                          <tr>   
                               <td><input type="text" id="txt_path"></td>   
                          </tr>   
                          <tr>   
                               <td>Package (atributo 'package' no arquivo 'AndroidManifest.xml')</td>   
                          </tr>   
                          <tr>   
                               <td><input type="text" id="txt_package"></td>   
                          </tr>   
                     </table>   
                </form>   
           </div>   
           <button onClick="chamarAplicativo()">Aplicativo Tutorial</button>  
           <button onClick="chamarAplicativoTerceiro()">Aplicativo Terceiro</button>  
      </body>   
  </html>   



E pode ser acessada através do link www.jonathan.bugs3.com/android.html. Lembre-se que para funcionar, está página deverá ser acessada do browser de um dispositivo móvel com Sistema Operacional Android.

É isso aí!! Se tudo ocorreu bem e você seguiu todo o passo-a-passo, certamente você terá em mãos uma aplicação que pode ser iniciada através do browser!!

Faça o download do código fonte da aplicação AQUI.


Um comentário:

  1. Top 5 safest online gambling sites for Canadians 바카라사이트 바카라사이트 1xbet korean 1xbet korean 655Hard Rock Room Prices & Upcoming Events - Shootercasino

    ResponderExcluir