Com es crea una aplicació bàsica per a Android a PhoneGap

Aquesta guia us ensenyarà a crear una aplicació híbrida mitjançant la popular plataforma de creació d'aplicacions PhoneGap. El que farem és convertir el vostre lloc web en un fitxer .apk (aplicació Android) instal·lable que es pugui instal·lar a qualsevol telèfon Android. Quan s’iniciï l’aplicació, simplement obrirà el vostre lloc web al navegador WebView natiu d’Android, però apareixerà com a aplicació de pantalla completa (sense barra de navegació d’URL ni cap altra pista que indiqui que el vostre lloc web simplement es presenta en un navegador).

Requisits

El vostre propi lloc web (per tal de seguir aquesta guia, simplement podeu iniciar un bloc de WordPress gratuït)

Compte de GitHub

Compte de PhoneGap
Bloc de notes ++ (o un programari similar d'edició de text que pugui reconèixer el codi)
Programari d'edició de fotos per crear icones d'aplicacions (Photoshop, GIMP, etc.)

Plantilles de codificació

Aquestes són plantilles de codi que podeu utilitzar per a aquesta finalitat: provenen de la meva pròpia aplicació desenvolupada amb PhoneGap, però els he retirat de la meva informació personal. Configurar-los des de zero amb tots els paràmetres correctes em va costar molts dies solucionar problemes, de manera que els proporcionaré per a la vostra comoditat. Us hi donem la benvinguda!

> Config.XML
> Índex.HTML

Començant

Creeu una carpeta a l'escriptori i anomeneu-la ' www: ' sense les cometes. Aquest serà el directori principal del projecte, on el creador de PhoneGap esperarà trobar tots els fitxers del vostre projecte. Ara crearem una icona per a la vostra aplicació.

Obriu el programari d’edició de fotos i creeu una imatge nova en format .PNG. La configuració de la imatge hauria de tenir aquest aspecte:

I ara podeu dibuixar la vostra icona, per exemple, només faré un petit botó:

La mida de la imatge depèn de la pantalla del telèfon personal, però si teniu intenció de desenvolupar una aplicació per a diversos dispositius, és clar que feu diverses mides de la mateixa icona. Aquí teniu una taula de les mides d'imatges utilitzades:

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

No vull passar massa temps parlant de mides de pantalla i DPI, només sé que el DPI es correlaciona pràcticament amb la resolució de la pantalla. Un telèfon que utilitzi una resolució de pantalla de 1080 × 1920 utilitzarà 480 dpi, però no necessàriament correlaciona exactament amb la mida de la pantalla. Un telèfon pot tenir una pantalla de 5,2 polzades o una pantalla de 6 polzades i tenir una resolució de 1080 × 1920. Però aquesta guia no tracta de pantalles de telèfons intel·ligents, així que continuem.

Després de dibuixar la icona, deseu-la com a icon.png i moveu-lo a la carpeta www: Això es convertirà en el per defecte icona de la vostra aplicació. Si voleu crear icones de mides diferents que coincideixin amb la resolució de pantalla de l'usuari, deseu la icona en mides i noms diferents, per exemple Icon144.png, Icon192.png, Icon96.png, etc. A continuació, editaríeu el fitxer Config.xml fitxer per apuntar a cada icona individual. Posem-nos en marxa.

Per tant, ara que teniu una icona per a la vostra aplicació, necessiteu una imatge de presentació. Es tracta bàsicament d’una pantalla de càrrega, com ara un fons de pantalla que es mostra abans de carregar la vostra aplicació. Les mides d’imatges d’esquena funcionen segons el mateix principi que les icones, però són una mica més grans. Aquí teniu la taula:

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

Per tant, creeu la vostra imatge d’esquema a la resolució del vostre dispositiu, deseu-la com a Splash.png i, a continuació, moveu-lo a la carpeta del projecte. Fantàstic, ara teniu la icona de la vostra aplicació i la imatge d’esquema. Passem a configurar els fitxers de configuració i índex.

S'han explicat Index.HTML i Config.XML

El fitxer config.xml és el que defineix l’entorn de compilació (Android, iPhone, Windows Phone), la ubicació de les icones i les splash i els complements d’Apache Cordova que voleu utilitzar a la vostra aplicació.

Obriu la plantilla que he proporcionat a Notepad ++ i veureu aquestes línies a la part superior:

Actualitzeu aquests camps amb la vostra informació, però deixeu els camps de 'preferència' sols. La resta del fitxer de configuració s’explica per si mateix si només fixeu-vos en els valors. Nom de preferència = 'pantalla completa', per exemple, indica a l'aplicació que es llanci com a aplicació de pantalla completa. Deixeu-ho tot sol, excepte aquest darrer valor a la part inferior del fitxer:

Canvieu-lo a l'URL del lloc web real. Això permetrà a l'usuari de l'aplicació navegar completament pel vostre lloc web i només pel vostre lloc web; no poden sortir del lloc web mentre utilitzen l'aplicació. Per descomptat, l’aplicació no tindrà una barra de navegació d’URL, ni tan sols això preocupa, però també s’assegura que l’usuari pugui accedir a totes les pàgines del vostre lloc web. El * després de l'URL del lloc web és un comodí , que en l'argot de codificació significa que acceptarà qualsevol cosa que s'introdueixi en lloc del signe *.

Per descomptat, si voleu limitar l’usuari a determinades pàgines del vostre lloc web, afegiríeu valors diferents com aquest:

Passem al Index.html fitxer, aquest és el pa i la mantega perquè l'aplicació funcioni realment. Obriu-lo a Notepad ++ i canvieu el llenguatge del document a HTML. El que index.html fa bàsicament és dir al navegador Android com es mostra el vostre lloc web: a la plantilla que he proporcionat, hi ha etiquetes per eliminar la barra de navegació d’URL del navegador, permetre que el botó “enrere” del telèfon surti de l’aplicació i iniciï es mostra l'aplicació després de la pantalla d'inici. La línia que voleu canviar és aquí:

var url = 'http://elvostre lloc web.com'

Creació de l'aplicació a PhoneGap Build

Per tant, inicieu sessió al vostre compte de GitHub i aneu a la pàgina principal del dipòsit. Sota el nom del dipòsit, feu clic a 'Penja fitxers' i arrossegueu la carpeta del projecte a la pantalla de l'arbre de fitxers. Ara escriviu un missatge de confirmació a la part inferior, com ara ' el meu primer intent d'aplicació ' . Finalment, feu clic a Confirma els canvis.

Ara aneu al Construir PhoneGap pàgina i inicieu la sessió. Feu clic al botó 'Aplicació nova' a la pàgina de compilació. Això us demanarà que introduïu el camí del vostre dipòsit de GitHub, feu-ho i feu clic a 'Estira del dipòsit .git'.

Torneu a la pàgina de compilació principal, feu clic a 'Actualitza el codi' i a 'Extracte més recent'.

Finalment, feu clic a 'Construeix'. Compilarà la vostra aplicació en un fitxer .apk i, a continuació, us presentarà l’opció de descarregar-la .apk. Ara podeu descarregar aquest fitxer .apk a l'ordinador i transferir-lo al telèfon i, a continuació, instal·lar-lo des d'allà. Com a alternativa, podeu utilitzar el telèfon per escanejar el codi QR a la pantalla de l’ordinador per instal·lar automàticament el fitxer .apk al dispositiu Android.

Això és! Ara, per explicar-vos algunes coses importants:

• Aquesta va ser una guia extremadament simplificada que us va guiar per construir les aplicacions híbrides més bàsiques. La gent no sol anar embolicant els seus llocs web en un navegador natiu i passant-los com una aplicació per a Android a Google Play Store. Però ara que ja sabeu com fer-ho, podeu començar a llegir la documentació de PhoneGap sobre com personalitzar la vostra aplicació i afegir-hi molt de gust, de manera que, amb sort, pugueu crear una aplicació realment útil.
• En segon lloc, Google Play prohibeix aquest tipus de mètode de creació d’aplicacions per crear aplicacions d’enllaços amb l’únic propòsit d’ingressos. Per tant, no podeu crear una aplicació anomenada 'Guanyeu diners avui mateix'. que obre un lloc web absolutament ple d’anuncis i permet obtenir ingressos publicitaris. Se us prohibirà la botiga de Google Play.