Webview Android: Transforme Sites E Blogs Em Aplicativos
O componente WebView permite que os desenvolvedores exibam conteúdo de sites e blogs e os apresentem como parte do layout do aplicativo por meio de "atividade" (semelhante ao navegador Google Chrome).
A primeira coisa a usar o WebView e converter um site em um aplicativo Android é criar um novo projeto no Android Studio com uma estrutura vazia de Atividade vazia.
O Android Studio nos ajudou a construir esse projeto inicial com seu assistente interativo.
Criando o Projeto de Exemplo WebView
Abra o Android Studio instalado em seu computador. Se você não instalou a versão mais recente da ferramenta, siga os seguintes tutoriais de acordo com seu sistema operacional:
- Como instalar o Android Studio no Mac
- Como instalar o Android Studio no Windows
- Como instalar o Android Studio no Linux
- Com o Android Studio aberto, selecione a opção para iniciar um novo projeto do Android Studio.
Agora, selecione Atividade vazia como o modelo inicial para começar a criar o aplicativo do zero. Clique em Avançar.
Defina as características do projeto, como nome, pacote e linguagem de programação. No meu exemplo, sua definição é:
- Name: WebViewTutorial
- Package Name: co.abobrao.webviewtutorial
- Save Location: \<path do meu computador\>
- Language: Java (ou Kotlin)
- Minimum API level: API 17: Android 4.2 (Jelly Bean)
Clique em Concluir e vamos começar a usar o WebView.
Abra o arquivo de layout activity_main.xml e altere os componentes ConstraintLayout e TextView para FrameLayout e o novo componente WebView.
Nesse caso, usaremos apenas FrameLayout para simplificar o tutorial do WebView
Seu código deve ser assim:
Quando o componente WebView é adicionado ao FrameLayout e tem atributos match_parent na altura e largura, podemos fazer o WebView preencher toda a tela "ativa". Além disso, defina um id para que possamos obter essa referência no código lógico de Java ou Kotlin.
Abra MainActivity e use findViewById () para pesquisar referências de WebView e, em seguida, use o método loadUrl () para carregar o Url necessário.
O código a seguir mostra exatamente como abrir um URL com um WebView (seja um site ou um blog):
Faça as importações necessárias para o webkit android.webkit.WebView.
Tentaremos abrir a página do Google. Mas primeiro, precisaremos adicionar acesso à Internet ao aplicativo, caso contrário, a página não será aberta.
Adicione a permissão android.permission.INTERNET ao seu AndroidManifest.xml.
Execute o aplicativo no emulador ou smartphone para ver se a página do Google está em execução.
Em alguns casos, haverá URLs que não podem ser abertos, resultando em certos tipos de erros, por exemplo, a comunicação HTTP de texto simples não é permitida. Isso ocorre porque na versão mais recente do Android (versão 8), é recomendado usar HTTPS para acessar páginas seguras.
Se a URL que você deseja visitar não estiver aberta, você precisará adicionar alguns atributos em AndroidManifests.xml.
Além de URLs que podem responder a páginas HTML, também podemos adicionar URLs a imagens como jpg ou png. Os sistemas Android e WebView serão capazes de renderizar conteúdo Url - seja HTML ou não.
Adicione o URL da imagem no site abobrao.co, como o URL, e visualize o WebView exibido.
Mas podemos exibir conteúdo HTML sem passar Url?
Sim, ele é! Vamos ver como adicionar conteúdo HTML diretamente no WebView.
WebView: um exemplo de conteúdo HTML no aplicativo
Se você não usa um URL, existem duas maneiras de exibir o conteúdo diretamente no WebView. Você pode escrever a gramática HTML no formato String diretamente no código Java / Kotlin ou pesquisar o código HTML no servidor e carregá-lo no WebView.
Vamos ser a primeira escolha para visualizar uma página escrita em HTML. O método que usaremos será loadData.
Neste método, precisamos definir o mimeType (HTML neste caso) e a codificação do conteúdo. Normalmente usamos UTF-8 para manter os caracteres corretos.
Agora estamos prontos para começar a carregar qualquer página da web e, finalmente, transformar seu site ou blog em um aplicativo que pode acessar o Google Play.
Transforme meu site em um aplicativo Android
Antes de começar a colocar um blog ou site no WebView e fazer o upload do aplicativo para a loja, precisamos verificar se é um site responsivo e se baseia em boas práticas amigáveis para dispositivos móveis.
Hoje em dia, ter um site responsivo é fundamental para aparecer na web e fazer com que o público goste e volte ao seu site. A cada dia que passa, as pessoas visitam mais e mais sites por meio de dispositivos móveis, como smartphones e tablets.
Verifique o layout e a capacidade de resposta
Para verificar a capacidade de resposta do site, você precisará de duas ferramentas para realizar alguns testes:
- Teste de compatibilidade de dispositivo móvel
- Insights do PageSpeed
O primeiro dirá se o seu site é adequado para dispositivos móveis, como tablets e smartphones.
O segundo dirá a você a velocidade do site - vamos nos concentrar na versão móvel. De acordo com os resultados, após visitar o WebView, é necessário fazer algumas otimizações para melhorar a experiência do usuário.
Para verificar a compatibilidade com dispositivos móveis, basta usar uma ferramenta chamada "teste de compatibilidade com dispositivos móveis" fornecida pelo Google.
Usarei meu blog, abobrao.co, para testar e criar uma versão do aplicativo do blog.
Depois de adicionar o URL do meu blog e esperar que o Google use a ferramenta de análise, ele exibirá os seguintes resultados:
A luz verde significa que o design do blog que fiz é amigável para dispositivos móveis e agora pode ser adicionado ao meu aplicativo.
Se você não tem um site ou blog compatível com dispositivos móveis, precisa usar recursos de UX Design para ajustar o layout antes de criar a versão do aplicativo.
Agora, vamos determinar a velocidade de carregamento do blog. Quanto maior o número aqui, melhor. Existem vários fatores pelos quais sempre podemos melhorar a velocidade de carregamento de um site - principalmente sobre o WebView.
Não pense muito nesses números, porque aumentá-los não é fácil (principalmente em dispositivos móveis). Esta é apenas uma direção para você determinar os pontos de melhoria.
No que diz respeito ao meu blog, hoje fiz 73 pontos em 100 e indiquei várias melhorias, como tamanho da imagem, ajustes no código-fonte, etc.
Atingiu 97 de 100 em desktops, embora também possa ser assim em dispositivos móveis :-)
Com esses dados, agora posso colocar o Url no WebView e ver como fica o resultado final:
A barra de ferramentas continua aparecendo, creio que não é muito boa. Posteriormente, personalizaremos o layout do aplicativo para torná-lo mais parecido com um aplicativo da web.
Acha que consegue acrescentar nosso conteúdo? Nós deixe uma mensagem ou email. Pegou o artigo deixe os créditos, plágio é crime.
