Como converter um site em um aplicativo Android a partir do zero?

Vinay Somawat Blocked Unblock Seguir Seguindo 11 de janeiro

Neste tutorial, aprenderemos como converter um site em um aplicativo Android usando o Android Studio .

Se você ainda não conhece nada sobre o Android Studio, não se preocupe.
Vamos começar tudo do zero.

É assim que o site se parece:

E o aplicativo para Android, desenvolvido usando o Android Studio, parece:

Antes de começarmos:

NOTA: Se você baixou o Android Studio e já instalou em seu sistema, então você pode pular a parte e ir para direcionar a parte de codificação.

Se não
Baixe o Android Studio :

O Google fornece o Android Studio para as plataformas Windows, Mac OS X e Linux. Você pode baixar este software na página inicial do Android Studio.

Antes de fazer o download do Android Studio, verifique se sua plataforma atende a um dos seguintes requisitos:
Sistema operacional Windows
Microsoft Windows 7/8/10 (32 bits ou 64 bits)
2 GB de RAM no mínimo, 8 GB de RAM recomendados
2 GB de espaço em disco disponível no mínimo, 4 GB recomendados (500 MB para IDE + 1,5 GB para Android SDK e imagem do sistema emulador)
Resolução mínima de tela de 1280 x 800
Para emulador acelerado: sistema operacional de 64 bits e processador Intel com suporte para Intel VT-x, Intel EM64T (Intel 64) e funcionalidade Bit de desabilitação de execução (XD)

Mac OS
Mac OS X 10.8.5 ou superior, até 10.11.4 (El Capitan)
2 GB de RAM no mínimo, 8 GB de RAM recomendados
2 GB de espaço em disco disponível no mínimo, 4 GB recomendados (500 MB para IDE + 1,5 GB para Android SDK e imagem do sistema emulador)
Resolução mínima de tela de 1280 x 800
JDK 6

SO Linux
Área de trabalho GNOME ou KDE
: Testado no Ubuntu 12.04, Precise Pangolin (distribuição de 64 bits capaz de executar aplicativos de 32 bits)
Distribuição de 64 bits capaz de executar aplicativos de 32 bits
Biblioteca GNU C (glibc) 2.11 ou posterior
2 GB de RAM no mínimo, 8 GB de RAM recomendados
2 GB de espaço em disco disponível no mínimo, 4 GB recomendados (500 MB para IDE + 1,5 GB para Android SDK e imagem do sistema emulador)
Resolução mínima de tela de 1280 x 800
JDK 8
Para emulador acelerado: processador Intel com suporte para Intel VT-x, Intel EM64T (Intel 64) e funcionalidade Bit Disable (XD) de execução ou processador AMD com suporte para AMD Virtualization (AMD-V)

Instalando o Android Studio no Windows 8.1 de 64 bits

Figura 1. Configure o Android StudioFigure 2. Desinstale o Android SDK e o AVD Figura 3. Aceite o contrato de licença para continuar o installationFigure 4. Defina os locais de instalação do Android Studio e Android SDKFigure 5. Crie um novo atalho para Android Estúdio

Para concluir sua instalação, deixe a caixa Iniciar Android Studio marcada e clique em Concluir.

Figura 6. Deixe a caixa de seleção Iniciar Android Studio marcada para executar este software

Executando o Android Studio

O Android Studio apresenta uma tela inicial quando começa a ser executado:

Se você é como eu e não tem uma versão instalada anteriormente, basta manter a configuração padrão e clicar em OK.

Figura 9. Validar seu SDK do Android e a configuração do ambiente de desenvolvimento

Quando você clica em Avançar, o assistente de configuração convida você a selecionar um tipo de instalação para seus componentes do SDK. Por enquanto, recomendo que você mantenha a configuração padrão.

Figura 10. Escolha um tipo de instalaçãoFigura 11. Revise as configurações

O assistente irá baixar e descompactar vários componentes. Clique em Mostrar detalhes se quiser ver mais informações sobre os arquivos baixados e seu conteúdo.

Figura 12. O assistente faz o download e descompacta os componentes do Android Studio

Suas opções são colocar o emulador lento ou usar um dispositivo Android para acelerar o desenvolvimento. Eu discutirei a última opção mais tarde no tutorial.

Por fim, clique em Concluir para concluir o assistente. Você deve ver a caixa de diálogo Bem-vindo ao Android Studio:

Figura 14. Bem-vindo ao Android Studio

Você instalou e configurou o Android Studio e criou um projeto para seu primeiro aplicativo para dispositivos móveis do Android Studio. Agora você está pronto para construir seu aplicativo Android. No Android Studio, isso significa preencher seu novo projeto com o código-fonte Java e os arquivos de recursos.

Seu primeiro aplicativo para dispositivos móveis do Android Studio

Começando um novo projeto

De nossa configuração até agora, você ainda deve ter o Android Studio em execução com a caixa de diálogo Bem-vindo ao Android Studio. A partir daqui, clique em Iniciar um novo projeto do Android Studio. O Android Studio responderá com a caixa de diálogo Criar Novo Projeto, mostrada na Figura.

Figura 15. Crie um novo projectFigure 16. Selecione suas categorias de dispositivos de destino

Clique em Avançar e você terá a oportunidade de escolher um modelo para a atividade principal do seu aplicativo. Por enquanto, vamos continuar com a atividade vazia. Selecione este modelo e clique em Avançar.

Em seguida, você personalizará a atividade:

Insira W2A como o nome da atividade e main como o nome do layout e clique em Concluir para concluir esta etapa. O Android Studio responderá que está criando o projeto e levará você ao espaço de trabalho do projeto.

Figura 19. Área de Trabalho do Android Studio

A janela do projeto é organizada em uma árvore cujos principais ramos são os Scripts App e Gradle. O ramo App é ainda organizado em sub-ramos manifestos, java e res:

  • manifesta lojas AndroidManifest.xml, que é um arquivo XML que descreve a estrutura de um aplicativo Android. Este arquivo também registra as configurações de permissão (quando aplicável) e outros detalhes sobre o aplicativo.
  • O java armazena os arquivos de origem Java de um aplicativo de acordo com uma hierarquia de pacotes, que é ca.javajeff.w2a neste exemplo.
  • res armazena os arquivos de recursos de um aplicativo, que são organizados em sub-ramificações drawable, layout, mipmap e values:
  • drawable : um local inicialmente vazio para armazenar o trabalho artístico de um aplicativo
  • layout : um local que contém os arquivos de layout de um aplicativo; inicialmente, main.xml (o arquivo de layout da atividade principal) é armazenado aqui
  • mipmap : um local que contém vários arquivos ic_launcher.png que armazenam ícones da tela do iniciador de diferentes resoluções
  • valores : um local que contém cores.xml, dimens.xml, strings.xml e styles.xml

A ramificação Gradle Scripts identifica vários arquivos .gradle (como build.gradle) e .properties (como local.properties) que são usados pelo sistema de compilação baseado em Gradle.

Agora a parte de codificação vai começar …

Adicione um webView à sua atividade, conforme mostrado na figura abaixo.

layout/activity_main.xml

 < RelativeLayout xmlns: android = ”http://schemas.android.com/apk/res/android" 
xmlns: tools = ”http://schemas.android.com/tools” android: layout_width = ”match_parent”
android: layout_height = ”match_parent”
ferramentas: context = ". MainActivity"
>
 < WebView 
android: layout_width = ”fill_parent”
android: layout_height = ”fill_parent”
android: id = ”@ + id / webView”
android: layout_alignParentLeft = ”true”
android: layout_alignParentStart = ”true”
android: layout_alignParentTop = ”true”
android: layout_alignParentRight = ”true”
android: layout_alignParentEnd = ”true”
/>
 </ RelativeLayout > 
src / main / AndroidManifest.xml
<? xml version = ”1.0” encoding = ”utf-8” ?>
<manifest xmlns: android = ”http://schemas.android.com/apk/res/android" package = ”com.vinaysomawat.careerhigh”
android: installLocation = ”auto”>
<uses-permission android: name = ”android.permission.INTERNET” />
<aplicação
android: allowBackup = ”true”
android: icon = ”@ mipmap / faviconcircular”
android: label = ”@ string / app_name”
android: roundIcon = ”@ mipmap / faviconcircular”
android: supportsRtl = ”true”
android: theme = ”@ style / AppTheme”>
 <atividade android: nome = ". SplashActivity" android: theme = ”@ style / SplashTheme”> 
<filtro de intenção>
<action android: name = ”android.intent.action.MAIN” />
<categoria android: name = ”android.intent.category.LAUNCHER” />
</ filtro intent>
</ activity>
<atividade android: nome = ". MainActivity" />
</ application>
</ manifest>

MainActivity.java

 pacote com.vinaysomawat.careerhigh; 
/ **
* Criado por Vinay Somawat em 10-01-2019.
* /
 import android.support.v7.app.ActionBarActivity; 
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
 classe pública MainActivity estende ActionBarActivity { 
private webview mywebview;
 @Sobrepor 
protected void onCreate (Bundle savedInstanceState) {
super.onCreate (savedInstanceState);
setContentView (R.layout. activity_main );
mywebview = (WebView) findViewById (R.id. webView );
WebSettings webSettings = mywebview.getSettings ();
webSettings.setJavaScriptEnabled (true);
mywebview.loadUrl (“https://careerhigh.in”);
mywebview.setWebViewClient (new WebViewClient ());
}
 @Sobrepor 
public void onBackPressed () {
if (mywebview.canGoBack ()) {
mywebview.goBack ();
} outro
{
super.onBackPressed ();
}
}
 @Sobrepor 
public boolean onCreateOptionsMenu (menu de menu) {
getMenuInflater (). inflar (menu, menu_main , menu);
retorno verdadeiro;
}
 @Sobrepor 
public boolean onOptionsItemSelected (item MenuItem) {
int id = item.getItemId ();
if (id == R.id.action_settings ) {
retorno verdadeiro;
}
return super.onOptionsItemSelected (item);
}
}

menu/menu_main.xml

 < menu xmlns: android = ”http://schemas.android.com/apk/res/android" 
xmlns: app = ”http://schemas.android.com/apk/res-auto"
xmlns: tools = ”http://schemas.android.com/tools" tools: context = ". MainActivity"
>
< item android: id = ”@ + id / action_settings” android: título = ”@ string / action_settings”
android: orderInCategory = ”100" app: showAsAction = "nunca"
/>
</ menu >

values/styles.xml

 < recursos > 

<! - Tema base da aplicação. ->
< style name = "AppTheme" parent = "Theme.AppCompat.Light" >
<! - Personalize o seu tema aqui. ->
< item name = "colorPrimary" > @ color / colorPrimary </ item >
< item name = "colorPrimaryDark" > @ color / colorPrimaryDark </ item >
< item name = "colorAccent" > @ color / colorAccent </ item >
</ style >
< style name = "TextAppearance.AppCompat.Widget.ActionBar.Title" parent = "android: TextAppearance" >
< item name = "android: textColor" > @ cor / titlecolor </ item >
< item name = "android: textSize" > 30sp </ item >
</ style >

</ resources >

values/strings.xml

 <? xml version = "1.0" encoding = "utf-8" ?> 
< recursos >

< string name = "app_name" > CareerHigh </ string >
< string name = "hello_world" > Olá mundo! </ string >
< string name = "action_settings" > Configurações </ string >

</ resources >

values/colors.xml

 <? xml version = "1.0" encoding = "utf-8" ?> 
< recursos >
< color name = "colorPrimary" > # 000000 </ color >
< color name = "colorPrimaryDark" > # 303F9F </ color >
< color name = "colorAccent" > # FF4081 </ color >
< color name = "titlecolour" > # 398bb7 </ color >
</ resources >

Adicionar uma atividade de lançamento ao aplicativo: (parece bom)

Atividade de lançamento

SplashActivity.java

 pacote com.vinaysomawat.careerhigh; 

/ **
* Criado por Vinay Somawat em 10-01-2019.
* /
import android.content.Intent;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;


classe pública SplashActivity estende AppCompatActivity {

@Sobrepor
protected void onCreate (@Nullable Bundle savedInstanceState) {
super .onCreate (savedInstanceState);
Intenção intent = new Intenção ( isto , MainActivity. Class );
startActivity (intenção);
terminar();
}
}

E adicione algum código que ele values/styles.xml

 < nome do estilo = "SplashTheme" parent = "Theme.AppCompat.NoActionBar" > 
< item name = "android: windowBackground" > @ drawable / background </ item >
</ style >

crie um arquivo drawable/background.xml :

 <? xml version = "1.0" encoding = "utf-8" ?> 
< lista de camadas xmlns: android = "http://schemas.android.com/apk/res/android" >
< item android: drawable = "@ color / colorPrimary" />

< item >
< bitmap android: src = "@ drawable / logo2"
android: gravidade = "center"
/>

</ item >
</ layer-list >

Certifique-se de adicionar uma imagem de amostra à pasta drawable para exibir na atividade de lançamento.

SAÍDA:

Agora execute o seu aplicativo android, e você verá o seguinte resultado

Finalmente, seu primeiro aplicativo para Android é criado.

Se você ficou preso em algum lugar

Baixe o código fonte

Ou use o seguinte comando:

command-line

 > git clone https://github.com/vinaysomawat/CareerHigh-App 

E compartilhe seu aplicativo Android com seus amigos.

Eu recebi algo errado? Mencione nos comentários. Eu adoraria melhorar.
Se você aprendeu mesmo uma coisa ou duas, bata palmas ? quantas vezes puder para mostrar seu apoio!
Olá Mundo, eu sou Vinay Somawat. Um desenvolvedor de criativos e um designer lógico. Você pode me encontrar no Linkedin ou me perseguir no GitHub ou talvez me seguir no Twitter? Se isso é muito social para você, basta mandar um e-mail para vinaysomawat40@gmail.com se você quiser falar sobre tecnologia comigo.

Tenha um bom dia!