Application Mobile

Dans cette partie vous allez voir les différentes configurations à faire pour mettre en place votre application mobile Millionnaire Quiz.

Millionnaire Quiz a été conçu avec le framework Flutter qui supporte Android et même IOS mais les différents tests n’ont été effectues que sur le système Android donc les configurations que nous verrons ci-dessous ne concerne que Android.

Installation de Android Studio

Pour mettre en place cette application vous avez besoin d’un IDE qui supporte le framework Flutter dont le très populaire Android Studio. Pour voir les différentes étapes d’installation de Android Studio suivant votre système d’exploitation cliquez ici.

Installation de Flutter

Comme nous l’avons annoncez un peu plus haut, Millionnaire Quiz a été conçu sous le framework Flutter de Google, vous trouverez toute les informations sur l’installation de de Flutter en cliquant ici.

Importation du projet

Une fois Android studrio et Flutter installes nous passons a l’étape importante de l’importation du code source de Millionnaire quiz.

  1. Ouvrez Android Studio
  2. Cliquez sur Fichier > Ouvrir…
  3. Dans la fenêtre qui s’ouvre, placez vous dans le dossier qui contient le code source de Millionnaire Quiz, sélectionnez le dossier et cliquez sur OK
  4. Le projet est importé sous Android studio.

Mettre à jour le nom du package

Il est nécessaire voir même indispensable de mettre à jour le nom de package android afin qu’il soit unique et qu’il n’y ait aucun problème lors du déploiement de l’application sur Google Play Store.

Pour cela, il suffit de modifier le fichier app build gradle situe dans android/app/build.gradle  en remplaçant la valeur de applicationId par votre nom de package; par exemple si votre package c’est your.package.name le résultat devrait ressembler à:


defaultConfig {
applicationId "your.package.name"
minSdkVersion 16
targetSdkVersion 28
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
}

Modifier le nom de l’application

Pour modifier le nom de l’application, il suffit de mettre le nom que vous voulez comme valeur à la constante APP_NAME dans lib/services/constants.dart ensuite modifiez android/app/src/main/AndroidManifest.xml et mettez-y le nom de votre application au niveau de android:label de la balise application en remplaçant la valeur par défaut « Millionnaire Quiz ».

<application
    android:name="io.flutter.app.FlutterApplication"
    android:label="Millionaire Quiz"
    android:icon="@mipmap/launcher_icon">

Les Constantes

Dans cette section vous verrez les différentes constantes à modifier pour mettre en marche Millionnaire Quiz.

Il faut noter que les différentes constantes sont situées dans le fichier lib/services/constants.dart une fois le fichier ouvert voici les différentes modifications que vous pouvez faire:

USING_SERVER

Il est possible de mettre en marche Millionnaire Quiz même lorsque vous ne disposez pas d’un serveur web pour la partie admin, dans ce cas il faut changer le paramètre USING_SERVER et mettre la valeur false au cas contraire si vous disposez d’un serveur dans ce cas vous aurez accès a toute les fonctionnalités vous pouvez mettre la valeur a true.

Il faut noter que si la valeur de cette constante est à false, vous êtes oblige de mettre la valeur de la constante  QUESTION_FROM_OPEN_TRIVIA_DB à true sinon les questions ne seront pas chargées.

BASE_URL

Au cas où vous avez un serveur hébergé et que vous avez activez la constante USING_SERVER a true, vous devez absolument remplacer la valeur de BASE_URL avec L’URL où vous aviez installer la partie serveur de Millionnaire Quiz.

QUESTION_FROM_OPEN_TRIVIA_DB

Millionnaire Quiz dispose de deux manières pour charger les questions l’une d’elle est d’utiliser Open Trivia DB  qui est une base de données open source disposant de plusieurs dizaines de milliers de questions vous n’aurez donc pas la lourde tache d’ajouter des questions par vous même pour cela il faut changer et mettre la valeur de cette constante à true et dans le cas où vous voulez chargez vos propres questions mettez la valeur a false.

SHOW_ADMOB

Afin de gagner de l’argent avec le jeu vous pouvez y activez de la publicité Google admob pour cela il faut mettre cet attribut à true dans le cas contraire, mettez la valeur à false. Si vous choisissez d’activer Admob, vous devez également modifier les valeurs de AMOB_APP_ID, ADMOB_BANNER_ID et ADMOB_INSTERSTITIAL_ID.

ADMOB_APP_ID

Si vous avez active la constante SHOW_ADMOB vous devez modifier la valeur de ADMOB_APP_ID avec l’id de votre application que vous obtenez sur le site de Google Admob.

Vous devez également modifier  le fichier android/app/src/main/AndroidManifest.xml et remplacer « Your ADMOB APP ID » par l’id de votre application sur Admob.

<meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" android:value="Your ADMOB APP ID"/>

ADMOB_BANNER_ID

Lorsque vous activez l’utilisation de Google Admob vous devez créer une bannière à partir de Google Admob qui vous donnera un id et cet Id que vous devez mettre comme valeur à cette constante.

ADMOB_INTERSTITIAL_ID

Lorsque vous activez l’utilisation de Google Admob vous devez créer une annonce de type interstitiel à partir de Google Admob qui vous donnera un id et cet Id que vous devez mettre comme valeur à cette constante.

APP_PACKAGE

Il s’agit du nom de package android que vous avez choisi pour votre application, cette information est importante lors du partage ou de l’évaluation de l’application par l’utilisateur, remplacez donc cette valeur par votre nom de package.

APP_VERSION

Le nom de la version de votre application qui s’affichera sur la page A propos.

APP_DATE

La date de la publication de votre application qui s’affichera également sur la page d’ A propos.

APP_COMPANY_NAME

Le nom de votre compagnie qui s’affichera sur la Page d’A propos.

Configurer Google Sign-In

Si vous avez activé l’option USING_SERVER cela veut dire que vous avez un serveur hébergé et donc vous devez absolument configurer l’accès à l’application via la connexion Google; cela est important pour le classement global des utilisateurs.

Vous devez commencer par créer votre projet dans la console firebae si vous n’en disposez pas encore d’un.

Ensuite activez l’authentification Google a partir de la console firebase en allant sur Authentification > Sign In method  et de la vous pouvez activer « Google« .

A partir de la page d’accueil de votre console firebase, créez une application une fois cela fait téléchargez le fichier google-services.json et placez le dans le dossier android/app.

A partir de ce niveau vous pouvez essayer de lancer la compilation de votre application dans Android Studio, elle devrait fonctionner.

Modifier le logo de l’application

Pour modifier le logo de l’application, il faut:

  1. Votre logo doit avoir l’extension PNG
  2. Modifier le nom de votre logo en « logo« 
  3. Écrasez le logo par défaut en faisant un copier/coller de votre logo dans le dossier « assets« 
  4. Lancez la console Windows (CMD) et placez vous dans le dossier de votre projet
  5. Lancez la commande flutter pub get
  6. Lancez la commande flutter pub run flutter_launcher_icons:main
  7. Le logo du jeu devrait changer.

Modifier la langue

Il est possible de changer la langue par défaut de Millionnaire Quiz ce qui peut être pratique au cas où vous créez vos questions dans une autre langue que l’anglais, pour cela il faut:

  1. Créer un fichier dans le dossier assets/i18n , ce fichier doit avoir une nomenclature particulière le nom du  fichier doit être le code le la langue que voulez ajouter et le fichier doit avoir le format json, si par exemple vous voulez créer la langue espagnole (code: es) le fichier se nommera es.json
  2. Copiez le contenu du fichier assets/i18n/en.json et collez le dans le fichier que vous avez créé
  3. Modifiez les différentes clés par les valeurs de votre langue.
  4. Modifiez la liste languages dans lib/services/constants.dart a la ligne 21 en y ajoutant le code de votre langue; si par exemple vous avez ajouté l’espagnole, la liste devrait ressembler à  List<String> languages = [‘en’, ‘fr’, ‘es’]
  5. Enfin changez la valeur de  LANG_CODE dans lib/services/constants.dart à la ligne 19 et mettez-y le code de votre nouvelle langue.

Modifier le contenu de la page « A propos »

Si vous voulez modifier le contenu de la page d’A propos il suffit de modifier la valeur de la clé « about_the_app » dans le fichier de langue assets/i18n/en.json.

Deploiement de l’application

Pour déployer l’application sur Google Play Store ou sur tout autre plateforme de magasin d’applications il faut commencer par exporter le fichier APK release. Vous trouverez toute les étapes sur la documentation de Flutter.

Lorsque vous déployez votre application sur Google Play Store il est important de spécifier le liens des termes de conditions d’utilisation dans le cas où vous avez activez la connexion avec Google, la partie serveur de millionnaire quiz dispose déjà d’un lien de conditions d’utilisation que vous pouvez utiliser, ce lien devrait ressembler a http://domaine.installation.millionaire.quiz/index.php/terms/ avec domaine.installation.millionaire.quiz le domaine principal où vous avez installé la partie admin de Millionnaire Quiz.

Apres avoir déployer votre application , si vous avez activé la connexion avec Google il faudra ajouter l’empreinte du certificat SHA à la page firebase de votre application pour récupérer l’empreinte SHA d’une application que vous deployez sur Google Play Store il faut vous rendre sur la page de votre application ensuite allez sur Gestion des release > Signature d’application et copier l’empreinte SHA1 que vous allez coller sur la console firebase.

 

fr French
en Englishfr French