Tutoriel étape par étape

Ce tutoriel va vous apprendre à créer une application Android de type Choose Your Own Adventure à partir d’un CYOA Twine2. Et c’est plus facile que vous ne le pensez !

Pour réaliser ce tuto; vous devrez utiliser les logiciels suivant :

  • Twine2,
  • Adobe PhoneGap Desktop,
  • Adobe PhoneGap Application
  • Adobe PhoneGap Build.

Histoire de gagner du temps, avant de vous lancer, vous devez avoir déjà créé les éléments suivants :

  • Une histoire Twine2 : VotreHistoire.html
  • Une image pour devenir l’icône de votre histoire en 1024x1024 72 dpi
  • Une image pour le splash screen de lancement de l’application

Utilisez Twine 2 pour créer votre histoire CYOA si ce n’est déjà fait !

Pour plus d’informations sur la création d’une histoire Twine2, n’hésitez pas à lire ce tutoriel (en): http://www.adamhammond.com/twineguide/

Une fois que vous avez créé votre fichier Twine, sélectionnez « Publier dans un fichier ».

Vous aurez un fichier de type VotreHistoire.html. Vous avez votre histoire. Vous pouvez l’ouvrir et la lire dans un navigateur Web. Si c’est tout ce que vous voulez faire avec, vous pouvez vous arrêter là.

Toutefois, si vous voulez la convertir en une application Android/iOs, c’est par là que ça se passe …

Obtenir votre application avec PhoneGap Desktop

Téléchargez et installez PhoneGap Desktop. Allez donc sur la page ci-dessous et suivez les instructions :

https://www.phonegap.com/getstarted/

http://docs.phonegap.com/getting-started/1-install-phonegap/desktop/

Il va falloir suivre les instructions en anglais, à moins que vous ne préfèreriez le japonais !

Pensez à installer l’application PhoneGap developer sur votre téléphone ou tablette.

http://docs.phonegap.com/getting-started/2-install-mobile-app/

Une fois que vous avez installé PhoneGap Desktop,

  • créez un nouveau projet en cliquant sur le +,
  • choisissez blank comme type de projet,
  • indiquez le chemin du stockage du dossier, créé s’en un s’il n’existe pas,
  • Donner un nom à votre application,
  • son ID, info utile pour les markets Android et iOs

 

Plus d’info sur : http://docs.phonegap.com/getting-started/3-create-your-app/desktop/

Vous avez créé un dossier contenant toutes vos données PhoneGap.

Accédez à ce dossier. A l’intérieur, vous verrez un dossier nommé « www ». Dans « www » vous trouverez index.html

Renommez votre fichier Twine2 (VotreHistoire.html) en index.html, supprimez le fichier présent dans le dossier www et placez-y votre nouveau fichier index.html.

Ensuite, dans votre dossier « www »

  • créez un sous-dossier nommé « res ».
  • ouvrir « res »,
  • créer un sous-dossier nommé « icon »,
  • créer un sous-dossier nommé « android ». C’est là que vous allez stocker les icônes pour votre application.
  • créer un sous-dossier nommé « ios ». C’est là que vous allez stocker les icônes pour votre application.
  • Si vous avez déjà une photo que vous aimeriez utiliser comme icône – génial. Rendez-vous sur : http://pgicons.abiro.com/ /
  • Téléchargez votre image sur http://pgicons.abiro.com/ /
  • Créez vos icônes
  • Télécharger votre fichier zip sur votre machine,
  • Dézippez,
  • Copiez le contenu des dossier dans les répertoires cibles correspondant ( vos dossiers www \ res \ icon \ android et www \ res \ icon \ ios)
  • déplacer le dossier screens vers le dossier res de votre projet,
  • Copiez le fichier splash.png du dossier racine du zip vers votre dossier racine www de PhoneGap,
  • Créez un dossier img
    • Créez un répertoire android
    • Créez un répertoire ios
    • Y déplacer le fichier icon

Enfin, vous devrez indiquer à votre application de rechercher les icônes à cet emplacement. Vous devrez également mettre à jour d’autres informations, telles que votre nom, votre mail, la description de l’application et son nom.

Toutes ces infos sont dans le fichier config.xml.

Éditez le fichier config.xml et modifiez les informations sur l’auteur, le nom de l’application et la description de l’application selon ce que vous voulez.

Pour simplifier, vous pouvez simplement copier et coller le code ci-dessous, en faisant les modifications nécessaires.

 

<?xml version=’1.0′ encoding=’utf-8′?>

 

<widget id= »com.trucmuche.NomdeL’Application » version= »1.0.0″ xmlns= »http://www.w3.org/ns/widgets » xmlns:gap= »http://phonegap.com/ns/1.0″>

<name>NomdeL’Appli</name>

<description> Le Nom appli est un essai d’application.</description>

<author email= »[email protected] » href= »http://trucmuche.fr »>Trucmuche </author>

<content src= »index.html » />

<preference name= »DisallowOverscroll » value= »true » />

<plugin name= »cordova-plugin-battery-status » source= »npm » spec= »~1.1.1″ />

<plugin name= »cordova-plugin-camera » source= »npm » spec= »~2.1.1″ />

<plugin name= »cordova-plugin-media-capture » source= »npm » spec= »~1.2.0″ />

<plugin name= »cordova-plugin-console » source= »npm » spec= »~1.0.2″ />

<plugin name= »cordova-plugin-contacts » source= »npm » spec= »~2.0.1″ />

<plugin name= »cordova-plugin-device » source= »npm » spec= »~1.1.1″ />

<plugin name= »cordova-plugin-device-motion » source= »npm » spec= »~1.2.0″ />

<plugin name= »cordova-plugin-device-orientation » source= »npm » spec= »~1.0.2″ />

<plugin name= »cordova-plugin-dialogs » source= »npm » spec= »~1.2.0″ />

<plugin name= »cordova-plugin-file » source= »npm » spec= »~4.1.1″ />

<plugin name= »cordova-plugin-file-transfer » source= »npm » spec= »~1.5.0″ />

<plugin name= »cordova-plugin-geolocation » source= »npm » spec= »~2.1.0″ />

<plugin name= »cordova-plugin-globalization » source= »npm » spec= »~1.0.3″ />

<plugin name= »cordova-plugin-inappbrowser » source= »npm » spec= »~1.3.0″ />

<plugin name= »cordova-plugin-media » source= »npm » spec= »~2.2.0″ />

<plugin name= »cordova-plugin-network-information » source= »npm » spec= »~1.2.0″ />

<plugin name= »cordova-plugin-splashscreen » source= »npm » spec= »~3.2.1″ />

<plugin name= »cordova-plugin-statusbar » source= »npm » spec= »~2.1.2″ />

<plugin name= »cordova-plugin-vibration » source= »npm » spec= »~2.1.0″ />

<plugin name= »cordova-plugin-whitelist » source= »npm » spec= »~1.2.1″ />

 

<platform name= »android »>

<icon density= »ldpi » src= »www/res/icon/android/ldpi.png » />

<icon density= »mdpi » src= »www/res/icon/android/mdpi.png » />

<icon density= »hdpi » src= »www/res/icon/android/hdpi.png » />

<icon density= »xhdpi » src= »www/res/icon/android/xhdpi.png » />

<icon density= »xxhdpi » src= »www/res/icon/android/xxhdpi.png » />

<icon density= »xxxhdpi » src= »www/res/icon/android/xxxhdpi.png » />

<splash density= »port-ldpi » src= »www/res/screen/android/splash-port-ldpi.png » />

<splash density= »port-mdpi » src= »www/res/screen/android/splash-port-mdpi.png » />

<splash density= »port-hdpi » src= »www/res/screen/android/splash-port-hdpi.png » />

<splash density= »port-xhdpi » src= »www/res/screen/android/splash-port-xhdpi.png » />

<splash density= »port-xxhdpi » src= »www/res/screen/android/splash-port-xxhdpi.png » />

<splash density= »port-xxxhdpi » src= »www/res/screen/android/splash-port-xxxhdpi.png » />

 

</platform>

<platform name= »ios »>

<icon height= »57″ platform= »ios » src= »www/res/icon/ios/icon.png » width= »57″ />

<icon height= »114″ platform= »ios » src= »www/res/icon/ios/[email protected] » width= »114″ />

<icon height= »40″ platform= »ios » src= »www/res/icon/ios/icon-40.png » width= »40″ />

<icon height= »80″ platform= »ios » src= »www/res/icon/ios/[email protected] » width= »80″ />

<icon height= »50″ platform= »ios » src= »www/res/icon/ios/icon-50.png » width= »50″ />

<icon height= »100″ platform= »ios » src= »www/res/icon/ios/[email protected] » width= »100″ />

<icon height= »60″ platform= »ios » src= »www/res/icon/ios/icon-60.png » width= »60″ />

<icon height= »120″ platform= »ios » src= »www/res/icon/ios/[email protected] » width= »120″ />

<icon height= »180″ platform= »ios » src= »www/res/icon/ios/[email protected] » width= »180″ />

<icon height= »72″ platform= »ios » src= »www/res/icon/ios/icon-72.png » width= »72″ />

<icon height= »144″ platform= »ios » src= »www/res/icon/ios/[email protected] » width= »144″ />

<icon height= »76″ platform= »ios » src= »www/res/icon/ios/icon-76.png » width= »76″ />

<icon height= »152″ platform= »ios » src= »www/res/icon/ios/[email protected] » width= »152″ />

<icon height= »29″ platform= »ios » src= »www/res/icon/ios/icon-small.png » width= »29″ />

<icon height= »58″ platform= »ios » src= »www/res/icon/ios/[email protected] » width= »58″ />

<icon height= »87″ platform= »ios » src= »www/res/icon/ios/[email protected] » width= »87″ />

<splash height= »1136″ platform= »ios » src= »www/res/screen/ios/[email protected]~iphone.png » width= »640″ />

<splash height= »1334″ platform= »ios » src= »www/res/screen/ios/Default-667h.png » width= »750″ />

<splash height= »2208″ platform= »ios » src= »www/res/screen/ios/Default-736h.png » width= »1242″ />

<splash height= »2048″ platform= »ios » src= »www/res/screen/ios/[email protected]~ipad.png » width= »1536″ />

<splash height= »1024″ platform= »ios » src= »www/res/screen/ios/Default-Portrait~ipad.png » width= »768″ />

<splash height= »960″ platform= »ios » src= »www/res/screen/ios/[email protected]~iphone.png » width= »640″ />

<splash height= »480″ platform= »ios » src= »www/res/screen/ios/Default~iphone.png » width= »320″ />
</platform>

 

<access origin= »* » />

<allow-intent href= »http://*/* » />

<allow-intent href= »https://*/* » />

<allow-intent href= »tel:* » />

<allow-intent href= »sms:* » />

<allow-intent href= »mailto:* » />

<allow-intent href= »geo:* » />

<platform name= »android »>

<allow-intent href= »market:* » />

</platform>

 

<platform name= »ios »>

<allow-intent href= »itms:* » />

<allow-intent href= »itms-apps:* » />

</platform>

</widget>

 

Attention Vérifiez bien que vos images portent le même nom dans vos répertoires et dans le fichier config.xml !

Normalement, vous avez déjà créé vos SplashScreens qui sont pointés dans le fichier XML ci-dessus, avec http://pgicons.abiro.com/.

Maintenant vous touchez presque au but, YES !

Vérifiez que votre appli fonctionne en lançant Phonegap desktop et l’application sur votre téléphone/tablette, synchronisez le serveur (même adresse dans les deux !)

et zou, ça doit fonctionner !

 

Ça fonctionne ? Ok étape suivante

Non ? Chercher la cause 😉

 

Préparer votre application, Construire votre application avec PhoneGap Build

Les fichiers doivent organisés de la manière suivante :

Zippez tout votre répertoire « www » avec le fichier config en un fichier game.zip

Rendez-vous sur https://build.phonegap.com et créez un compte gratuit.

Cela vous permettra de faire un APK gratuit (mais vous pouvez continuer à mettre à jour les informations autant que vous le souhaitez – donc ce n’est pas un problème.)

Téléchargez le fichier game.zip, et votre histoire CYOA existera dans un nouveau fichier APK.

Si vous éprouvez des difficultés à créer votre application, veuillez consulter les instructions plus détaillées ici: https://modernweb.com/phonegap-build-part2/

 

Téléchargement de votre fichier APK sur un appareil Android

Vous pouvez sélectionner l’option « Télécharger » pour enregistrer le fichier APK sur votre ordinateur, puis le transférer sur votre appareil si vous le souhaitez. Cependant, il y a un moyen beaucoup plus facile.

Vous pouvez scanner le code QR avec votre téléphone ou votre tablette, et télécharger votre application.

Si vous n’avez pas de scanner QR sur votre appareil Android, vous pouvez en télécharger un ici: https://play.google.com/store/apps/details?id=me.scan.android.client&hl=fr

Naviguez sur votre appareil vers le répertoire de téléchargement et installez le fichier APK. Vous pouvez maintenant profiter de votre histoire sous forme d’application et la distribuer à vos amis.

 

Héberger votre application sur l’histoire de Google Play ou sur l’AppStore

Si vous souhaitez héberger votre histoire sur le Google App Store, vous aurez besoin d’un compte développeur. Pour plus d’informations sur ce qui peut être trouvé ici: http://support.andromo.com/kb/distributing/how-to-put-your-app-in-google-play

 

Pour Apple, c’est pareil, vous aurez besoin d’un compte développeur. Plus d’info : https://www.netdevices.fr/creer-compte-developpeur-apple/

et voilà, n’hésitez pas à commenter et à faire remonter d’éventuelles erreurs, fautes d’orthographes, phrase mal tournée.