Como criar um aplicativo Android básico no PhoneGap

Este guia irá ensiná-lo a criar um aplicativo híbrido usando a plataforma popular de criação de aplicativos PhoneGap. O que vamos fazer é transformar seu site em um arquivo instalável .apk (aplicativo Android) que pode ser instalado em qualquer telefone Android. Quando o aplicativo for iniciado, ele simplesmente abrirá seu site no navegador WebView nativo do Android, mas aparecerá como um aplicativo de tela inteira - sem barra de navegação de URL ou qualquer outra pista de que seu site está simplesmente sendo apresentado em um navegador.

Requisitos

Seu próprio site (para a finalidade de seguir este guia, você pode simplesmente iniciar um blog WordPress gratuito)

Conta GitHub

Conta PhoneGap
Notepad ++ (ou software de edição de texto semelhante que pode reconhecer código)
Software de edição de fotos para criar ícones de aplicativos (Photoshop, GIMP, etc)

Modelos de Codificação

Estes são modelos de código que você pode usar para o propósito deste guia - eles são do meu próprio aplicativo desenvolvido com PhoneGap, mas eu os retirei de minhas informações pessoais. Configurá-los do zero com todos os parâmetros corretos levou muitos dias para solucionar o problema, portanto, estou fornecendo-os para sua conveniência. De nada!

> Config.XML
> Index.HTML

Começando

Crie uma pasta na sua área de trabalho e chame-a de “ www: ' sem as aspas. Este será o diretório principal do projeto, onde o construtor PhoneGap esperará encontrar todos os arquivos para seu projeto. Agora vamos criar um ícone para seu aplicativo.

Abra seu software de edição de fotos e crie uma nova imagem no formato .PNG. Suas configurações de imagem devem ser assim:

E agora você pode desenhar seu ícone, por exemplo, vou apenas fazer um pequeno botão:

O tamanho da imagem depende da tela do seu telefone pessoal, mas se você pretende desenvolver um aplicativo para vários dispositivos, é claro que fará vários tamanhos do mesmo ícone. Aqui está uma tabela dos tamanhos de imagem usados:

36 × 36 (120 dpi / LDPI)
48 × 48 (160dpi / MDPI)
72 × 72 (240dpi / HDPI)
96 × 96 (320dpi / XHDPI)
144 × 144 (480dpi / XXHDPI)
192 × 192 (640dpi / XXXHDPI)

Não quero perder muito tempo falando sobre tamanhos de tela e DPI, só sei que DPI se correlaciona muito com a resolução da tela. Um telefone que usa resolução de tela de 1080 × 1920 usará 480dpi, mas isso não necessariamente correlacionar exatamente com o tamanho da tela. Um telefone pode ter uma tela de 5,2 ”ou uma tela de 6” e uma resolução de 1080 × 1920. Mas este guia não é sobre telas de smartphones, então vamos em frente.

Depois de desenhar seu ícone, salve-o como icon.png e mova-o dentro da pasta www :. Isso se tornará o padrão ícone para o seu aplicativo. Se quiser criar ícones em tamanhos diferentes que corresponderão à resolução da tela do usuário, salve o ícone em tamanhos e nomes diferentes, por exemplo Icon144.png, Icon192.png, Icon96.png e assim por diante. Então você editaria o Config.xml arquivo para apontar para cada ícone individual. Vamos continuar.

Agora que você tem um ícone para seu aplicativo, precisa de uma imagem inicial. Esta é basicamente uma tela de carregamento, como um papel de parede que é exibido antes de seu aplicativo ser carregado. Os tamanhos das imagens splash funcionam com o mesmo princípio dos ícones, mas são um pouco maiores. Aqui está a mesa:

• LDPI:
  • Retrato: 200x320px
  • Panorama: 320x200px
• MDPI:
  • Retrato: 320x480px
  • Panorama: 480x320px
• HDPI:
  • Retrato: 480x800px
  • Panorama: 800x480px
• XHDPI:
  • Retrato: 720px1280px
  • Panorama: 1280x720px
• XXHDPI:
  • Retrato: 960px1600px
  • Panorama: 1600x960px
• XXXHDPI:
  • Retrato: 1280px1920px
  • Panorama: 1920x1280px

Portanto, crie sua imagem inicial na resolução do seu dispositivo, salve-a como Splash.png e mova-o para dentro da pasta do seu projeto. Ótimo, agora você tem o ícone e a imagem inicial do seu aplicativo, vamos passar para a configuração dos arquivos de configuração e índice.

Index.HTML e Config.XML explicados

O arquivo config.xml é o que define o ambiente de construção (Android, iPhone, Windows Phone), o ícone e os locais de splash e os plug-ins Apache Cordova que você deseja usar em seu aplicativo.

Abra o modelo que forneci no Notepad ++ e você verá estas linhas perto do topo:

Atualize esses campos com suas informações, mas deixe os campos de “preferência” de lado. O resto do arquivo de configuração é autoexplicativo se você olhar apenas para os valores. Nome de preferência = ”tela inteira”, por exemplo, informa ao aplicativo para iniciar-se como um aplicativo de tela inteira. Deixe tudo sozinho, exceto este último valor na parte inferior do arquivo:

Altere-o para o URL real do seu site. Isso permitirá que o usuário do aplicativo navegue completamente no seu site, e apenas no seu site - eles não podem sair do seu site enquanto estiver usando o seu aplicativo. Claro que o aplicativo não terá uma barra de navegação de URL, isso nem é realmente uma preocupação, mas também garante que o usuário possa acessar todas as páginas do seu site. O * após o URL do site é um curinga , que no jargão da codificação significa que aceitará qualquer coisa que seja inserida no lugar do sinal *.

Obviamente, se você quiser limitar o usuário a apenas algumas páginas do seu site, deverá adicionar valores separados como este:

Vamos passar para o Index.html arquivo, este é o pão com manteiga para fazer o aplicativo realmente funcionar. Abra-o dentro do Notepad ++ e mude a linguagem do documento para HTML. O que index.html basicamente faz é dizer ao navegador Android como exibir seu site - no modelo que forneci, há tags para remover a barra de navegação de URL do navegador, permitir que o botão 'voltar' do telefone saia do aplicativo e inicie o aplicativo depois que a tela inicial for exibida. A linha que você deseja alterar está aqui:

var url = ‘http://yourwebsite.com’

Construindo o aplicativo no PhoneGap Build

Portanto, faça login em sua conta do GitHub e navegue até a página principal do seu repositório. Sob o nome do repositório, clique em “Carregar arquivos” e arraste a pasta do seu projeto para a tela da árvore de arquivos. Agora digite uma mensagem de confirmação na parte inferior, como “ minha primeira tentativa de aplicativo ” . Por fim, clique em Confirmar alterações.

Agora vá para o PhoneGap Build página e entre. Agora clique no botão “Novo aplicativo” na página de construção. Isso pedirá que você insira o caminho para o seu repositório GitHub, faça-o e clique em “Retirar do repositório .git”.

Agora, de volta à página de construção principal, clique em “Atualizar código” e “Extrair o mais recente”.

Por fim, clique em “Construir”. Ele irá compilar seu aplicativo em um arquivo .apk e, em seguida, apresentar a você a opção de baixar o .apk. Agora você pode baixar este arquivo .apk para o seu computador e transferi-lo para o seu telefone e, em seguida, instalá-lo de lá. Como alternativa, você pode usar seu telefone para escanear o código QR na tela do computador para instalar automaticamente o arquivo .apk em seu dispositivo Android.

É isso aí! Agora, para explicar a você algumas coisas importantes:

• Este foi um guia extremamente simplificado que orientou você na construção do mais básico dos aplicativos híbridos. As pessoas geralmente não envolvem seus sites em um navegador nativo e o passam como um aplicativo Android na Google Play Store. Mas agora que você sabe como fazer isso, você pode começar a ler a documentação do PhoneGap sobre como personalizar seu aplicativo e adicionar muito sabor a ele, para que você possa criar um aplicativo realmente útil.
• Em segundo lugar, o Google Play proíbe esse tipo de método de construção de aplicativos para criar aplicativos de esquema de links com o único propósito de receita. Portanto, você não pode criar um aplicativo chamado “Ganhe dinheiro hoje!” que abre um site absolutamente cheio de anúncios e conta com a receita de anúncios. Você será banido da Google Play Store.