Ce guide vous apprendra comment créer une application hybride à l'aide de la plate-forme de création d'applications populaire PhoneGap. Ce que nous allons faire, c'est transformer votre site Web en un fichier .apk (application Android) installable qui peut être installé sur n'importe quel téléphone Android. Lorsque l'application est lancée, elle ouvrira simplement votre site Web dans le navigateur WebView natif d'Android, mais elle apparaîtra comme une application plein écran - pas de barre de navigation URL ou tout autre indice que votre site Web est simplement présenté dans un navigateur.
Exigences
Votre propre site Web (dans le but de suivre ce guide, vous pouvez simplement créer un blog WordPress gratuit)
Compte GitHub
Compte PhoneGap
Bloc-notes ++ (ou un logiciel d'édition de texte similaire capable de reconnaître le code)
Logiciel de retouche photo pour créer des icônes d'application (Photoshop, GIMP, etc.)
Modèles de codage
Ce sont des modèles de code que vous pouvez utiliser dans le cadre de ce guide - ils proviennent de ma propre application développée avec PhoneGap, mais je les ai dépouillés de mes informations personnelles. Les configurer à partir de zéro avec tous les paramètres corrects m'a pris plusieurs jours de dépannage, donc je les fournis pour votre commodité. De rien!
> Config.XML
> Index.HTML
Commencer
Créez un dossier sur votre bureau et appelez-le ' www: ' sans les guillemets. Ce sera le répertoire principal du projet, dans lequel le générateur PhoneGap s'attendra à trouver tous les fichiers de votre projet. Nous allons maintenant créer une icône pour votre application.
Ouvrez votre logiciel de retouche photo et créez une nouvelle image au format .PNG. Vos paramètres d'image devraient ressembler à ceci:
Et maintenant, vous pouvez dessiner votre icône, par exemple je vais juste faire un petit bouton:
La taille de l'image dépend de l'écran de votre téléphone personnel, mais si vous avez l'intention de développer une application pour plusieurs appareils, vous allez bien sûr créer plusieurs tailles de la même icône. Voici un tableau des tailles d'image utilisées:
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)
Je ne veux pas passer trop de temps à parler de la taille de l’écran et du DPI, sachez simplement que le DPI est assez proche de la résolution d’écran. Un téléphone qui utilise une résolution d'écran de 1080 × 1920 utilisera 480 dpi, mais ce n'est pas le cas. nécessairement correspondent exactement à la taille de l'écran. Un téléphone peut avoir un écran de 5,2 pouces ou un écran de 6 pouces et avoir une résolution de 1080 × 1920. Mais ce guide ne concerne pas les écrans de smartphone, alors passons à autre chose.
Après avoir dessiné votre icône, enregistrez-la sous icon.png et déplacez-le dans votre dossier www:. Cela deviendra le défaut icône pour votre application. Si vous souhaitez créer des icônes de différentes tailles qui correspondent à la résolution d'écran de l'utilisateur, vous devez enregistrer l'icône dans différentes tailles et noms, par exemple Icon144.png, Icon192.png, Icon96.png, etc. Ensuite, vous éditerez le Config.xml fichier pour pointer vers chaque icône individuelle. Allons-nous en.
Alors maintenant que vous avez une icône pour votre application, vous avez besoin d'une image de démarrage. Il s'agit essentiellement d'un écran de chargement, comme un fond d'écran qui s'affiche avant le chargement de votre application. Les tailles d'image Splash fonctionnent sur le même principe que les icônes, mais sont un peu plus grandes. Voici le tableau:
- LDPI:
- Portrait: 200 x 320 pixels
- Paysage: 320 x 200 pixels
- MDPI:
- Portrait: 320 x 480 pixels
- Paysage: 480 x 320 pixels
- HDPI:
- Portrait: 480 x 800 pixels
- Paysage: 800 x 480 pixels
- XHDPI:
- Portrait: 720px1280px
- Paysage: 1 280 x 720 pixels
- XXHDPI:
- Portrait: 960px1600px
- Paysage: 1 600 x 960 pixels
- XXXHDPI:
- Portrait: 1280px1920px
- Paysage: 1 920 x 1 280 pixels
Créez donc votre image de démarrage dans la résolution de votre appareil, enregistrez-la sous Splash.png puis déplacez-le dans le dossier de votre projet. Super, vous avez maintenant l'icône et l'image de démarrage de votre application, passons à la configuration de vos fichiers de configuration et d'index.
Index.HTML et Config.XML expliqués
Le fichier config.xml définit l'environnement de construction (Android, iPhone, Windows Phone), les emplacements des icônes et des éclaboussures, ainsi que les plug-ins Apache Cordova que vous souhaitez utiliser dans votre application.
Ouvrez le modèle que j'ai fourni dans Notepad ++ et vous verrez ces lignes vers le haut:
Mettez à jour ces champs avec vos informations, mais laissez les champs «préférence» seuls. Le reste du fichier de configuration est explicite si vous regardez simplement les valeurs. Le nom de la préférence = 'plein écran', par exemple, indique à l'application de se lancer en tant qu'application plein écran. Laissez tout seul, à l'exception de cette dernière valeur en bas du fichier:
Remplacez-le par l'URL de votre site Web. Cela permettra à l'utilisateur de l'application de naviguer complètement sur votre site Web, et uniquement sur votre site Web - il ne peut pas quitter votre site Web tout en utilisant votre application. Bien sûr, l'application n'aura pas de barre de navigation URL, ce n'est même pas vraiment un problème, mais permet également de s'assurer que l'utilisateur peut accéder à toutes les pages de votre site Web. Le * après l'URL du site Web est un joker , ce qui dans le jargon de codage signifie qu'il acceptera tout ce qui est entré à la place du signe *.
Bien sûr, si vous souhaitez limiter l'utilisateur à certaines pages de votre site Web, vous devez ajouter des valeurs distinctes comme celle-ci:
Passons à la Index.html fichier, c'est le pain et le beurre de faire fonctionner l'application. Ouvrez-le dans Notepad ++ et passez le langage du document en HTML. En gros, index.html indique au navigateur Android comment afficher votre site Web - dans le modèle que j'ai fourni, il y a des balises pour supprimer la barre de navigation URL du navigateur, permettre au bouton «Retour» du téléphone de quitter l'application et de lancer l'application après l'affichage de l'écran de démarrage. La ligne que vous souhaitez modifier est ici:
var url = 'http://yourwebsite.com'
Création de l'application dans PhoneGap Build
Alors connectez-vous à votre compte GitHub et accédez à la page principale de votre référentiel. Sous le nom du référentiel, cliquez sur «Télécharger les fichiers» et faites glisser votre dossier de projet dans l'écran de l'arborescence de fichiers. Saisissez maintenant un message de validation en bas, comme ' ma première tentative d'application ' . Enfin, cliquez sur Valider les modifications.
Allez maintenant à la PhoneGap Build et connectez-vous. Cliquez maintenant sur le bouton «Nouvelle application» sur la page de création. Cela vous demandera d'entrer le chemin d'accès à votre référentiel GitHub, alors faites-le, puis cliquez sur «Extraire de .git reposity».
Maintenant de retour sur la page de construction principale, cliquez sur 'Mettre à jour le code' et 'Extraire le dernier'.
Enfin, cliquez sur «Construire». Il compilera votre application dans un fichier .apk, puis vous présentera la possibilité de télécharger le .apk. Vous pouvez maintenant télécharger ce fichier .apk sur votre ordinateur et le transférer sur votre téléphone, puis l'installer à partir de là. Vous pouvez également utiliser votre téléphone pour scanner le code QR sur l'écran de votre ordinateur afin d'installer automatiquement le fichier .apk sur votre appareil Android.
C'est ça! Maintenant, pour vous expliquer quelques choses importantes:
- Il s'agissait d'un guide extrêmement simplifié qui vous a guidé dans la création de la plus élémentaire des applications hybrides. Les gens n'emballent généralement pas leurs sites Web dans un navigateur natif et ne le font pas passer pour une application Android sur Google Play Store. Mais maintenant que vous savez comment le faire, vous pouvez commencer à lire la documentation de PhoneGap sur la façon de personnaliser votre application et d'y ajouter beaucoup de saveur, afin que vous puissiez, espérons-le, créer une application réellement utile.
- Deuxièmement, Google Play interdit ce type de méthode de création d'applications pour créer des applications de schéma de liens dans le seul but de générer des revenus. Vous ne pouvez donc pas créer une application intitulée 'Gagnez de l'argent aujourd'hui!' qui ouvre un site Web absolument plein d'annonces et mise sur les revenus publicitaires. Vous serez banni du Google Play Store.
