Résumé

Le framework mobile créé par Facebook

À l’origine de React Native, il y a React.js, une bibliothèque JavaScript
développée par une équipe d’ingénieurs de Facebook exclusivement pour
Facebook. Repris ensuite par Instagram (qui appartient à Facebook), le code
source est rendu libre en mars 2013. Début 2015, Facebook annonce React
Native, un framework qui se fonde sur les mêmes composants que React.js,
adapté au mobile. Le framework offre donc la possibilité de développer de
manière native sur iOS, Android et Windows Phone.
Contrairement à Ionic, React Native, lui, est compilé. C’est-à-dire que
chaque partie de l’interface est conçue sur mesure et s’adapte complètement
à la plate-forme. Que vous affichiez un bouton, une zone de texte, une
image ou n’importe quoi d’autre, vous allez alors vous servir d’un
composant React Native que le framework va se charger lui-même de
transformer en composant natif. Cet ouvrage va vous permettre de
découvrir et de vous perfectionner en React Native et vous donnera les clés
pour monétiser votre application sur les kiosques mobiles d’Apple et de
Google.

Étude de cas : développement d'une appli

« météo »
Tout au long de l’ouvrage, vous serez amené à développer une application
multi-plates-formes de prévisions météo. Elle sera créée et enrichie avec
des fonctionnalités de plus en plus complexes, entrecoupées par la
publication et l’analyse marketing de votre projet.

À qui s’adresse ce livre ?

• Aux développeurs d’applications mobiles qui souhaitent découvrir ou
perfectionner leurs connaissances sur React Native.
• Aux étudiants et amateurs éclairés désirant parfaire leurs acquis sur ce
sujet et créer de puissantes applications mobiles.
• Plus généralement à tous ceux ayant déjà une expérience web et qui
souhaitent découvrir le monde du mobile.

Au sommaire
À la découverte de React Native • Développez votre application •
Utilisez les ressources de React Native • Approfondir la question •
Stratégies autour du mobile • Publication sur les stores • Marketing et
communication des applications • Analyses et statistiques de vos
applications • Monétisation des applications • Mises à jour et
débogages

Biographie auteur
Après sa licence Métiers de l’Internet et du Multimédia, Blaise Barré s’est
spécialisé dans le développement web en travaillant dans différentes
sociétés de services en ingénierie informatique. Passionné de nouvelles
technologies, il s’est ensuite ouvert au développement mobile. Il a créé sa
propre société de services en ingénierie informatique pour mettre ses
connaissances et son savoir-faire au service des entreprises, des PME aux
grands groupes, dans la conception d’applications web et mobiles.

www.editions-eyrolles.com
 SUR LE MÊME THÈME
R. DE VISSCHER. – Découvrez le langage Swift.
N°14397, 2016, 128 pages.
S. PITTION, B. SIEBMAN. – Applications mobiles avec Cordova et PhoneGap.
N°14052, 2015, 186 pages.

DANS LA MÊME COLLECTION

R. RIMELÉ. – HTML 5 – Une référence pour le développeur web.
N°67401, 3e édition, 2017, 832 pages.
P. FICHEUX. – Linux embarqué – Mise en place et développement.
N°67484, 2017, 220 pages.
M. BIDAULT. – Programmation Excel avec VBA.
N°67401, 2017, 480 pages.
K. NOVAK. – Débuter avec LINUX.
N°13793, 2017, 522 pages.
P. MARTIN, J. PAULI, C. PIERRE DE GEYER. – PHP 7 avancé.
N°14357, 2016, 732 pages.
R. GOETTER. – CSS 3 Flexbox.
N°14363, 2016, 152 pages.

Retrouvez nos bundles (livres papier + e-book) et livres numériques sur

http://izibook.eyrolles.com
Blaise Barré

Concevez des applica ons mobiles

avec React Na ve
Développement, publica on sur les stores et
stratégie marke ng
© Groupe Eyrolles, 2018
61, bd Saint-Germain
75240 Paris Cedex 05
www.editions-eyrolles.com

ISBN : 978-2-212-67563-4

Attention : pour lire les exemples de lignes de code, réduisez la police de

votre support au maximum.
En application de la loi du 11 mars 1957, il est interdit de reproduire intégralement ou partiellement
le présent ouvrage, sur quelque support que ce soit, sans l’autorisation de l’Éditeur ou du Centre
français d’exploitation du droit de copie, 20, rue des Grands-Augustins, 75006 Paris.
 Table des ma ères

Avant-propos
Un marché en constante croissance
Pourquoi ce livre ?
À qui s’adresse-t-il ?
Comment se compose le livre ?
Le fil conducteur
Remerciements

CHAPITRE 1
À la découverte de React Native
React Native, le framework mobile
Le développement mobile, nouvel eldorado
Web mobile, natif ou hybride
Genèse
Installation de React Native
Installation de Node.js
Création d’une nouvelle application
Lancement de l’application mobile
Une application iOS
Une application Android

CHAPITRE 2
Développez votre application
Explorations et modifications
Partons de zéro
Quelques modifications pour comprendre le code
 Pour aller plus loin : une application de météo
Conception du fichier MeteoPage.js
Modification du fichier index.ios.js
Actions et fonctions, passons à l’interactivité
Le constructeur
Interaction de la recherche
Fetch
Navigation
Transfert vers une autre fenêtre
Lecture des logs et débogage réseau
Débogage par le code pour iOS
Débogage par Xcode pour iOS
Débogage par le code pour Android
Finalisation de l’application
Améliorations diverses
Améliorations des erreurs
Améliorations graphiques

CHAPITRE 3
Utilisez les ressources de React Native
Utilisation de la géolocalisation
Développement de la géolocalisation
Configuration des autorisations
Les API et les composants
Les API
Les composants
Les plug-ins
Exemple concret
Développez des plug-ins à votre tour

CHAPITRE 4
Approfondir la question
La navigation avec Android et iOS
La différence Android et iOS
Un fichier commun pour l’application
 Navigation fluide entre les pages
La navigation sur l’application de météorologie
L’affichage avec flexbox
Affichage en ligne
Affichage en colonne
À vous de jouer
Contribuez !
Le showcase de React Native

CHAPITRE 5
Stratégies autour du mobile
Communication et marketing pour la visibilité
Publication sur les stores : l’envers du décor
Quelques chiffres de téléchargement
Quelques chiffres sur les applications
Tendance des usages
Business model et rentabilité
Application gratuite ou payante
Le fonctionnement des stores
Présentation des fiches Google Play et App Store
Contraintes et spécificités des fiches
L’algorithme de recherche
La mise en avant des applications
L’algorithme de recherche des applications
La découverte des applications sur les stores

CHAPITRE 6
Publication sur les stores
Créez un compte Apple Developer
Créez un compte Google Developer
Envoyez votre application sur l’App Store
Gérons les certificats
Création d’une fiche sur iTunes Connect
Envoi de l’application sur l’App Store
 Configuration de l’application sur l’iTunes Connect
Gérer les tarifs et disponibilités
Gérer les informations de la version
Gérer les achats in-app
Les tests de votre application
Test de l’application mobile
Gérer la publication de votre application
Envoyez votre application sur Google Play
Création d’une fiche sur Google Play Developer Console
Envoi de l’application sur le Google Play Developer Console
Les applications instantanées sur le Google Play Developer Console
Gestion de la fiche Play Store
Les tarifs et disponibilités
Gérer les tests de votre application
La publication de votre application

CHAPITRE 7
Marketing et communication des applications
Utilisons le bouche-à-oreille pour démarrer
Améliorations et corrections : le feedback utilisateur
Choix du logo
Lancement en douceur ou open bar
Êtes-vous prêt ?
Déterminons votre campagne marketing
Définition d’une campagne marketing
Le lexique du marketing
Les réseaux sociaux et le marketing
Facebook
Twitter
Snapchat
Les réseaux sociaux et la communication
Facebook
Twitter
Les autres
Mises à jour et notifications
 Les mises à jour
Les notifications

CHAPITRE 8
Analyses et statistiques de vos applications
Analyse de votre application sur l’App Store
Les statistiques de votre application
Les sources de téléchargement de votre application
Les ventes et tendances de votre application
Les notes des utilisateurs
La consultation sur mobile
Analyse de votre application sur le Google Play
Les statistiques de votre application
Les sources de téléchargement de votre application
Les ventes de votre application
Les notes des utilisateurs
La consultation sur mobile

CHAPITRE 9
Monétisation des applications
L’usage de la publicité sur l’application
Le choix du placement
Le format adapté
Le timing parfait
Le ciblage
Développer la publicité sur l’application
Ajout de votre application sur AdMob
Ajoutons AdMob à notre application
Ajoutons l’annonce à notre application
Paramètres de blocage à l’application
Créer une publicité sur mobile
Types de campagnes
Créer une publicité Facebook Ads

CHAPITRE 10
Mises à jour et débogages
Mises à jour des composants
Mettre à jour React Native
Mettre à jour NPM
Les bogues courants
Application XXX has not been registered
Erreur de développement numéro 1
Erreur de développement numéro 2
nw_connection
Unable to find this module in its module map

Conclusion

Index
 Avant-propos

Un marché en constante croissance

L’Internet mobile a complètement changé notre façon de consommer des
données. Le développement d’applications mobiles est passé d’une stratégie
coûteuse et risquée pour les grandes entreprises au point de départ de toutes
les start-up qui se forment chaque jour dans le monde entier.
Le marché des applications mobiles et leur usage représentent aujourd’hui
plusieurs dizaines de milliards d’euros et ne cesse de croître. En effet, plus
de la moitié des accès à Internet se font désormais via un smartphone. De ce
fait, les stratégies publicitaires et marketing ont évolué, passant d’un besoin
flou à un mécanisme bien huilé.

Pourquoi ce livre ?
Longtemps considéré comme extrêmement complexe, le développement
d’applications mobiles ne s’adresse plus exclusivement aux grandes
entreprises ni aux développeurs fous. Les outils à disposition ont changé et
les règles de ce monde ont été largement assouplies depuis plusieurs années,
à tel point qu’il est désormais accessible à tout un chacun de développer une
plate-forme sur le Web comme sur mobile.
Ce livre doit justement vous permettre de passer les frontières du possible et
d’exploiter l’énorme potentiel qui est en vous et à votre portée – que vous
connaissez déjà et que vous découvrirez encore davantage à la lecture de cet
ouvrage.
Il est également là pour vous montrer que le développement de votre
application mobile sera sujet à de nombreuses réflexions techniques et
algorithmiques, lesquelles laisseront rapidement place à des stratégies
publicitaires et marketing, condition sine qua non au succès de votre plate-
forme mobile.

À
À qui s’adresse-t-il ?
Cet ouvrage est destiné à tous ceux qui sont désireux de monter un projet
d’application mobile et de le promouvoir au plus grand nombre.
Les équipes de développement y trouveront une introduction à React Native
pour concevoir des applications mobiles de qualité en utilisant des
technologies similaires à celles du Web – le HTML, le CSS et le JavaScript.
En quelques chapitres, les bases du développement mobile seront acquises
et laisseront place aux fonctionnalités avancées, dignes des applications
d’aujourd’hui.
Les équipes marketing y découvriront une présentation sur la rentabilité des
applications ainsi que sur les plus grands rouages du marketing mobile.
Votre application passera d’un simple projet à une plate-forme à succès,
rentable et promue massivement.

Comment se compose le livre ?

Ce livre est divisé en dix parties de difficulté croissante. Elles sont conçues
pour être lues dans l’ordre, quel que soit le rôle du lecteur dans le projet de
développement d’application mobile. Ces parties sont entrelacées entre le
développement et le marketing, pour aller du développement à la
sponsorisation d’une application, en passant par la publication sur les
magasins d’application et la rentabilité de cette dernière.
Après une introduction à React Native et l’installation des outils de
développement dans le premier chapitre, le lecteur créera et exécutera sa
première application mobile dans le deuxième. Le troisième chapitre sera
l’occasion de s’initier à des usages plus poussés comme la géolocalisation,
tandis que le quatrième permettra d’aller un peu plus loin dans
l’apprentissage. Le cinquième chapitre introduira les notions de marketing
dans le mobile alors que le sixième, réservé à la publication de l’application
mobile, accompagnera le lecteur dans la mise en place de stratégies de
communication. Ces dernières seront analysées dans les chapitres 7 et 8.
Ensuite, le lecteur sera amené à rentabiliser l’application de manière à
investir encore dans des campagnes marketing. Pour finir, le dixième
chapitre servira de prologue pour garder à jour l’ensemble des outils de
développement et mieux appréhender les erreurs courantes.
Le fil conducteur
Durant toute la lecture de cet ouvrage, vous serez amené à développer une
petite application de météo. Elle sera créée et enrichie avec des
fonctionnalités de plus en plus complexes, entrecoupées par la publication
et l’analyse marketing de votre projet.
Vous devrez donc disposer d’un ordinateur pour y installer les logiciels de
développement et réaliser votre projet. Des compléments web sont
également à votre disposition, lesquels vous permettront de disposer de
l’application fonctionnelle aux différents stades de l’ouvrage. Vous pourrez
les télécharger sur les sites http://www.editions-eyrolles.com/dl/0067563 et
livre-reactnative.com.

Remerciements
Ce livre est le résultat de longues périodes de recherche et de
développement autour de notions à la fois simples et complexes de React
Native. De passionnantes conversations, de grandes analyses et de puissants
avancements avec les membres de l’équipe d’IT INNOVE. Un grand merci
à eux !
IT INNOVE n’existerait pas sans ses développeurs et ses graphistes, aussi
chevronnés que passionnés. Elle ne serait rien non plus sans ses clients qui
nous ont honorés de leur confiance lorsqu’ils ont mis le projet entre nos
mains. Chacun d’eux nous a permis d’explorer les différentes facettes de
React Native jusqu’aux notions les plus poussées. Mes pensées vont vers
eux et en particulier Louis, Guillaume, Charles, Réda et Laurie.
Enfin, je tiens à remercier :
Alexandre et toute l’équipe des éditions Eyrolles, pour la confiance qu’ils
m’ont accordée ;
Véronique et Chantal, relectrices, dont les retours m’ont permis de rendre
ce livre encore plus agréable, au-delà du côté technique ;
Mathias, graphiste exceptionnel, dont les talents rendent chaque interface
tellement plus agréable et chaque projet plus captivant depuis tant
d’années ;
Jean-Pierre, développeur talentueux, passionné et passionnant, dont les
nombreuses aides et les idées cadencent mes journées ;
Cléo dont les conseils rythment mon entrepreneuriat et mes projets ;
Ainsi que Gilles, Quentin, Bérenger, ma famille et mes amis, pour leur
soutien intemporel.
 1
À la découverte de React Na ve

React Na ve, le framework mobile

React Native est un framework mobile. Avant de commencer
l’apprentissage et le développement à l’aide de cet outil, parlons un peu de
l’univers du mobile, de ses concurrents et de sa genèse.

Le développement mobile, nouvel eldorado

L’informatique, le numérique et plus particulièrement Internet ont pris, en
quelques décennies, une place prépondérante dans nos vies. Depuis
l’avènement de l’informatique, de nombreux grands acteurs ont émergé et
ont su promouvoir leurs produits à travers le temps. Ce fut le cas avec
Microsoft et son système d’exploitation Windows, Google et son moteur de
recherche éponyme, mais aussi Amazon et sa place de marché e-commerce,
Facebook et son réseau social ou encore Apple et son smartphone iPhone.
Si, jusque dans les années 2010, tous les usages ou presque se faisaient via
un ordinateur connecté à Internet, de nos jours, de nouveaux modes de
communication sont apparus. C’est le cas avec les services en ligne de
vidéo à la demande et de musique illimitée qui ont envahi nos foyers,
comme Netflix, Spotify, et bien d’autres encore. C’est désormais aussi le
cas avec la consommation de données en mobilité.
Quel internaute ne dispose pas de smartphone ou de tablette ? Aujourd’hui,
plus de la moitié des connexions à des services en ligne se font via des
appareils mobiles.
Même si les systèmes d’exploitation mobile ne datent pas d’hier, c’est
principalement avec l’arrivée d’iOS et d’Android à partir de juin 2007 que
le marché va littéralement exploser. Ces deux-là ont concurrencé d’ailleurs
les acteurs déjà en place, à savoir BlackBerry OS et Symbian OS.
Par la suite, d’autres sociétés informatiques tenteront de tirer leur épingle
du jeu, comme ce fut le cas de Microsoft avec Windows Phone – remplacé
par une version de Windows compatible avec les smartphones – et Firefox
OS, aujourd’hui abandonné.
Dans cette nouvelle société, ce sont donc Google et Apple qui standardisent
nos vies numériques avec leurs systèmes d’exploitation mobile : Android
s’accapare 87,8 % du marché (rien que ça !) et et iOS 11,5 %, ne laissant
que peu de place aux autres acteurs. Par ailleurs, chacun de ces systèmes
d’exploitation propose son propre magasin d’applications ou store (Google
Play pour Google et l’App Store pour Apple). Tous deux offrent un grand
choix, plus de deux millions d’applications pour être exact. Des stratégies
sont donc à mettre en place pour faire face à une concurrence aussi difficile,
voire plus rude que sur le Web, pour des usages totalement différents.
Compte tenu de cet état de fait, le support mobile devient de plus en plus
important. Toutes les sociétés de services sur Internet se doivent de
proposer leurs solutions dans une version adaptée au mobile. Bien
évidemment, les usages ont également changé. Au commencement, les
développeurs proposaient des versions dites « mobiles » de leur site. Puis
l’ère du natif est apparue, suivie de très près par celle de l’hybride. C’est
d’ailleurs aujourd’hui une question stratégique à laquelle l’ensemble des
entreprises informatisées doivent se confronter, pesant le pour et le contre
de chaque solution.

Web mobile, na f ou hybride

La première question à se poser est : doit-on proposer une application
mobile pour l’utilisation de notre service ? Si de nombreuses entreprises
font naturellement le choix d’en proposer une sur les plus grands magasins
d’applications mobiles (généralement Android, iOS et parfois Windows
Phone), cette décision représente un coût humain et financier non
négligeable.
Le développement de sites web mobiles représente donc une alternative à la
portée de chaque entreprise. Aujourd’hui, on parle de plus en plus de sites
mobiles, parfois dits responsive. Ce sont des sites qui s’adaptent au format
sur lequel ils sont consultés, qu’il s’agisse d’ordinateurs, de tablettes ou de
smartphones. Cela permet de se concentrer sur un seul support, de mettre
tout le budget de communication, de marketing et de publicité dessus.
Bien que cela soit suffisant, de plus en plus d’entreprises sont malgré tout
attirées par les applications mobiles. Posséder sa propre application sur les
plates-formes dédiées représente un bon moyen de gagner en visibilité (bien
que l’on constate chaque jour la sortie d’autant de sites que d’applications
mobiles), d’apposer son logo sur la page d’accueil des smartphones et des
tablettes des mobinautes, et de jouir d’un peu plus de présence.
Une fois le choix du développement d’application mobile effectué, il faut se
poser la question du mode de développement. C’est bien simple : natif ou
hybride ?
À l’origine, seul le natif existait. Il était impossible de proposer une
application mobile sans devoir concevoir l’application spécifiquement pour
chaque magasin d’application mobile. Aussi, chaque système d’exploitation
mobile demande aux développeurs de programmer – encore aujourd’hui –
dans un langage bien particulier. Il s’agit du Java pour Android, de
l’Objective-C ou du Swift pour iOS, du C# pour Windows Phone, et bien
d’autres encore.
Cela implique d’avoir une application mobile pour chaque système, donc
des développements redondants, des corrections de bogues dupliquées, du
temps démultiplié. Mais alors quels avantages ? L’avantage principal
concerne la puissance de ces applications. Conçues en natives, elles
utilisent tout le potentiel du téléphone sur lequel elles sont installées. Elles
font également usage nativement de toutes ses fonctionnalités. Pas de temps
d’attente entre deux pages et pas de problème de compatibilité matériel.
Tout est clair, pur, et adapté.
Face à cette problématique de temps et d’argent, plusieurs sociétés et
communautés de développeurs ont travaillé sur des solutions dites hybrides.
Ces dernières permettent, d’un seul coup ou presque – puisque certains
développements sont spécifiques à chaque plate-forme ou carrément
indisponibles sur une plate-forme donnée – de développer pour plusieurs
systèmes d’exploitation mobile, avec des technologies connues de tous les
développeurs.
Cette approche beaucoup moins coûteuse a malheureusement un défaut : la
puissance. En effet, contrairement aux applications natives, développées
spécifiquement, ces applications adaptent leur code en fonction de la plate-
forme.
Au début de cette ère hydride, les problèmes de compatibilité faisaient rage.
La rapidité des applications était également problématique, les temps de
latence et les bogues persistants. La conception était certes rapide, mais
mauvaise. Cela étant dit, les développements ont évolué, les outils ont
changé et, aujourd’hui, nous constatons que certains outils de
développement hybride sont à la pointe de la technologie. Il est même très
difficile de pouvoir faire la différence entre deux applications, native et
hybride, tant la puissance de cette dernière a été largement améliorée au fil
du temps. Certains de ces outils, comme Titanium, Xamarin, Unity, Ionic et
React Native, sont connus des développeurs. Bien sûr, il en existe d’autres.
Si les trois premiers utilisent leur propre logiciel de développement et leur
propre langage de programmation, ils sont par ailleurs payants ! Leur
abonnement vous accorde le droit de développer et de publier une
application mobile tout en tirant profit d’une communauté grandissante.
Ironie de l’histoire, Xamarin appartient désormais à Microsoft, société qui a
abandonné son système d’exploitation mobile Windows Phone. Depuis ce
rachat, Xamarin est mis à disposition gratuitement depuis les outils de
développement de Microsoft.
Les deux derniers sont gratuits et open source. Ionic, framework lancé en
2013 par une équipe française, Drifty, bénéficie aujourd’hui d’une très
grande communauté de développeurs. Fort de son potentiel, la société a fait
plusieurs tours de table auprès d’investisseurs. Elle est désormais connue
dans le monde entier. De nombreuses entreprises développent avec cette
solution, de la petite PME aux grands comptes. On peut par exemple citer
Electronic Arts, CATERPILLAR et même la NASA !
De son côté, React Native est un framework qui a été lancé en 2015 par…
Facebook. Il a été initialement conçu pour les besoins de l’entreprise.
Aujourd’hui, il bénéficie également d’une très grande communauté. Parmi
les sociétés qui l’utilisent, on peut bien évidemment citer Facebook ou
Instagram (société rachetée par Facebook), mais également Airbnb, Tesla
ou encore SoundCloud.
Quelle différence entre ces deux-là ? Cette question est très importante, car
ce sont les deux principaux concurrents sur le marché.
Ionic est un framework HTML/CSS et JavaScript qui utilise une webview
pour fonctionner. En effet, le développeur conçoit la page comme il le ferait
d’une page web et Ionic se charge de la mettre en page pour le mobile. De
même, le backend est assuré par Angular, une technologie créée par Google
et couplée à Cordova, une technologie qui existe depuis longtemps dans le
mobile. Ionic dispose donc de toute une base de plug-ins pour Cordova
adaptés à ses besoins.
Vous l’aurez compris, s’il a l’avantage d’être simple à mettre en place et à
faire tourner, il a l’inconvénient de ne pas être le plus optimisé.
React Native est compilé et c’est là sa différence fondamentale, c’est-à-dire
que chaque partie de l’interface est conçue sur mesure et s’adapte
complètement à la plate-forme. Que vous affichiez un bouton, une zone de
texte, une image ou n’importe quoi d’autre, vous allez alors vous servir
d’un composant React Native que le framework se chargera lui-même de
transformer en composant natif. Les gains de puissance sont énormes,
similaires à du natif. Pourtant les gains en développement sont là puisque
beaucoup de développements sont similaires.
Maintenant que vous avez toutes les cartes en main, il est temps de faire
votre choix. Si ce dernier se porte sur React Native, alors poursuivons
l’aventure ensemble et étudions ce framework d’un peu plus près.

Genèse
À l’origine de React Native, il y a React.js. À l’instar de jQuery, il s’agit
d’une bibliothèque JavaScript développée par une équipe d’ingénieurs de
Facebook, exclusivement pour Facebook.
Si jQuery permet de développer en JavaScript de manière plus rapide et
plus efficace, React.js change complètement la donne et participe au
développement d’interfaces utilisateurs complètes et puissantes. En effet,
elle autorise un flux constant de l’information en ne rechargeant l’interface
utilisateur qu’en cas de nécessité. Outre les performances de la
bibliothèque, ce sont les bénéfices apportés qui sont notables.
Suite à ce développement, des ingénieurs d’Instagram se sont penchés sur
ce projet et ont commencé à adapter le code pour leur propre utilisation sur
Instagram.
Ce travail a amené les deux équipes à réfléchir à une adaptation grand
public de la bibliothèque. Le code source final a été rendu libre en mars
2013.
Très vite, React.js prend de l’ampleur. Une grande communauté se forme
autour de la bibliothèque et cette dernière est même utilisée par de grands
noms du Web tels que Netflix ou Airbnb.
Fort de ce constat et de cette popularité, Facebook annonce en février 2015
l’arrivée imminente de React Native, un framework qui repose sur les
mêmes composants que React.js, mais totalement adapté au mobile. Il
permet donc de développer de manière native compilée sur iOS, Android et
Windows Phone. À la suite de cette annonce, la technologie est rendue
publique en mars 2015.

Installa on de React Na ve
Maintenant que vous êtes véritablement décidé, il est temps de vous
équiper. Installez-vous à votre bureau, démarrez votre ordinateur. C’est
parti !
Je travaille sur macOS ainsi, tout au long de cet ouvrage, les illustrations se
rapporteront souvent à ce système d’exploitation. Il est toutefois possible de
travailler sur Linux ou Windows. Néanmoins, il vous sera impossible de
compiler votre application iOS ailleurs que sous macOS. En effet, cela
requiert Xcode, le logiciel de développement d’Apple qui est uniquement
disponible sur macOS. Nous verrons les différences par la suite.
Votre ordinateur est démarré ? Lancez votre logiciel de développement, que
ce soit un IDE ou un « simple » éditeur de texte, ainsi que votre invite de
commande (Terminal sur macOS, cmd.exe sur Windows ou Console sur
Linux). Ne vous inquiétez pas si vous n’êtes pas friand de lignes de
commande, cette partie sera très simple.
Allons-y ! Nous allons commencer par installer React Native et ses
composants fondamentaux.
React Native a besoin, comme bon nombre de ses confrères, de Node.js, qui
va permettre de compiler du code JavaScript. Nous allons également avoir
besoin de Watchman et de React-Native-CLI. Cette dernière, acronyme de
Command Line Interface en anglais (pour Interface en ligne de commande
en français), est un logiciel qui s’installe via la console et qui permet toutes
sortes d’actions pour React Native. Le logiciel est « invisible » car – et son
nom ne l’indique pas – il donne juste accès à un certain nombre de
commandes en plus de celles déjà proposées par le système d’exploitation,
que ce soit macOS, Linux ou Windows.

Installa on de Node.js
Pour installer Node.js, et pour de probables futures installations, je vous
conseille d’installer Homebrew sur macOS ou Scoop sur Windows. Ces
deux outils sont effectivement des gestionnaires d’outils et permettent d’en
installer beaucoup très facilement.
Pour installer Homebrew (dont le site web est disponible à l’adresse
https://brew.sh/) sous macOS, allez dans le Terminal, insérez la commande
suivante et exécutez-la :
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/
master/install)"

Une fois cette manipulation faite, vous pourrez installer Node.js facilement
avec la simple commande suivante :
brew install node

Si tout s’est bien passé, vous pouvez lancer la commande :

node –v && npm –v

Chez moi, les résultats sont respectivement v5.11.1 et 4.1.2.

Pour installer Scoop (dont le site web est disponible à l’adresse
https://scoop.sh) sous Windows, vous devez ouvrir PowerShell et vous
assurer que vous disposez de tous les droits pour l’exécution de commandes
administrateur en tapant la commande suivante :
$ set-executionpolicy unrestricted -s cu

Attention, cette dernière n’est pas sans risque. Utilisez-la uniquement dans
les environnements où vous en avez le droit. Comme son nom l’indique,
cette commande va supprimer toutes les restrictions – unrestricted – sur
l’utilisateur courant cu pour current user, c’est-à-dire vous.
Une fois ceci fait, installez tout simplement Scoop par la commande
suivante :
iex (new-object net.webclient).downloadstring('https://get.scoop.sh')

De la même manière que pour Homebrew sur macOS, nous allons pouvoir
installer Node.js facilement avec la simple commande suivante :
scoop install node

Si tout s’est bien passé, vous pouvez alors lancer la commande :

node –v && npm –v

Chez moi, les résultats sont respectivement v5.11.1 et 4.1.2.

Installa on de Watchman et React-Na ve-CLI

Nous allons également installer Watchman et React-Native-CLI.
Pour des questions de rapidité et de simplicité, Facebook a conçu ce petit
outil qui va permettre de recompiler votre projet d’application mobile s’il
détecte des changements dans le code. Il est l’équivalent d’un cache de
votre framework web à chaque modification de code source, qui va se
régénérer. Si vous voulez en savoir plus sur Watchman, n’hésitez pas à
consulter le site à l’adresse https://facebook.github.io/watchman/.
Comme nous avons installé Homebrew, il nous suffit d’exécuter la simple
commande suivante :
brew install watchman

Puis nous allons maintenant installer react-native-cli. Pour rappel, CLI

signifie Command Line Interface en anglais, soit interface en ligne de
commande en français.
Cette installation se fait via npm, que nous avons installé avec Node.js, grâce
à la commande suivante :
npm install –g react-native-cli

Pour information, le -g est une option de la commande npm install qui permet
de spécifier que vous installez le programme sur l’ensemble de votre
machine et pas spécifiquement sur votre compte.

Créa on d’une nouvelle applica on

Maintenant que l’ensemble des outils a été installé en ligne de commande
pour utiliser React Native, il est temps de le faire.
Vous l’avez vu, nous avons installé react-native-cli sous la forme d’un petit
outil en ligne de commande. En effet, ce logiciel ajoute quelques lignes de
commandes, bien spécifiques à React Native, pour la bonne tenue de votre
projet d’application mobile. Nous allons le voir, les quelques commandes à
connaître – et à retenir – sont très simples à utiliser et facilement
compréhensibles.
De nos jours, coder une application mobile hybride revient à développer un
site web. Vous avez un dossier, avec à la racine le fichier « de base » du
projet d’application mobile, ainsi que l’ensemble des « fenêtres » de
l’application, des dossiers d’images, des dossiers JavaScripts particuliers,
des dossiers de projets iOS et Android, etc. Vous retrouverez tout cela à la
racine du dossier.
Si vous avez l’habitude de développer plusieurs sites, que ce soit pour vous,
votre entreprise ou vos clients, vous aurez sans doute l’idée de développer
plusieurs applications mobiles. Je vous conseille donc de créer un dossier –
reactnative par exemple – à la racine de votre répertoire utilisateur et d’y
mettre l’ensemble de vos applications mobiles.
Dans mon cas, je mettrai les applications – notamment celle qui va servir
tout au long de cet ouvrage dans le dossier /Users/blaisebarre/reactnative. Bien
évidemment, libre à vous de faire comme vous le désirez.
Une fois cela fait, nous allons pouvoir créer l’application mobile de départ !
Ouvrez donc l’interface de ligne de commandes, déplacez-vous dans le
dossier concerné avec une petite commande cd – cette dernière signifiant
« change directory » :
cd /Users/blaisebarre/reactnative

Maintenant, il est possible de créer notre application mobile ! Tapez tout

simplement la commande suivante :
 react-native init myApp

Vous l’aurez compris, mon application s’appellera myApp. La fonction init

permet d’initialiser la création de l’application.
Une fois cette commande lancée, elle va télécharger un certain nombre de
mises à jour de petits logiciels sur votre ordinateur. Vous allez être assailli
de lignes de codes bizarres, avec des noms de fichiers, de paquets, etc. Ne
vous inquiétez pas, ce sont tous les téléchargements dans le cadre de la
création de votre projet d’application mobile.
Mais alors à quoi cela correspond-il ? À vrai dire, cette petite commande
init fait tout un tas de choses.

• Elle installe React Native.

• Elle installe React.js : comme indiqué précédemment, React Native a
été conçu à partir des composants de React.js, donc ce dernier est
nécessaire à l’exécution de votre application.
• Elle installe Jest (https://facebook.github.io/jest/), un autre outil
Facebook qui permet de réaliser des tests facilement.
Enfin le script s’achève en vous indiquant toutes les possibilités qui
s’offrent à vous sur votre système d’exploitation. Car maintenant que votre
application est créée, nous allons pouvoir la développer, la tester, la publier,
etc. Et si React Native ne fait pas tout dans ses scripts – pour le café,
prévoir un délai –, il en fait quand même déjà pas mal. Ainsi, il indique :

To run your app on iOS:

cd /Users/blaisebarre/reactnative/myApp
react-native run-ios
- or -
Open ios/myApp.xcodeproj in Xcode
Hit the Run button
To run your app on Android:
cd /Users/blaisebarre/reactnative/myApp
Have an Android emulator running (quickest way to get started), or a device
connected react-native run-android

Un « petit détail » que vous devez garder en mémoire : pour créer une
application mobile sur iOS (et donc l’uploader sur l’App Store), vous devez
avoir un ordinateur avec macOS à disposition. Cela peut s’agir d’un iMac,
d’un MacBook, d’un Mac Pro ou tout autre produit Apple. Sans cela, vous
n’aurez pas la possibilité de publier une application iOS.
Comme je vous l’ai dit, je suis sur macOS donc cette possibilité m’est
proposée via le react-native run-ios. Ne vous inquiétez pas si ce n’est pas
votre cas.
Maintenant que le projet d’application mobile React Native est établi,
fouillons un peu dans les différents répertoires qui viennent d’être créés.
Allez donc dans le dossier nouvellement généré.
À la racine, le fichier myApp.json contient les informations de l’identifiant et
du nom d’affichage de votre nouvelle application. Vous devriez donc y voir
quelque chose comme ceci :

{
"name": "myApp",
"displayName": "myApp"
}

Le fichier package.json contient les informations sur l’ensemble des paquets –

les bibliothèques, les outils utiles à React Native, etc. – qui ont été installés
à la création de votre nouvelle application. Nous avons vu notamment que
la commande installait React.js, React Native et Jest, vous aurez donc
toutes les informations les concernant :

{
"name": "myApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.0.0-alpha.6",
"react-native": "0.44.0"
},
"devDependencies": {
"babel-jest": "20.0.3",
 "babel-preset-react-native": "1.9.2",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.6"
},
"jest": {
"preset": "react-native"
}
}

Ensuite, vous allez trouver deux fichiers index.android.js et index.ios.js. Ils

correspondent, comme vous pouvez l’imaginer, aux deux versions de
l’index, respectivement pour les deux systèmes d’exploitation mobile
éponymes.
Alors pourquoi deux fichiers puisque nous avons vu que l’application était
hybride et qu’un seul développement était suffisant ?
Comme nous l’avons évoqué, dans une grande partie des cas, un seul
développement suffira. Malheureusement, certains développements ne
seront pas équivalents entre les différentes plates-formes ou bien tout
simplement indisponibles sur une ou plusieurs plates-formes. Pour ces
différences, il faudra faire des fichiers distincts entre les plates-formes.
React Native vous le montre ici.
Pour information, et nous aurons l’occasion d’en apprendre plus à ce sujet,
beaucoup de développements sont d’ores et déjà conçus par la communauté
React Native. Dans ces cas-là, les développeurs tiennent compte de ces
différentes plates-formes et vous n’aurez pas à vous en soucier – ou bien ils
vous précisent que leurs plug-ins ne sont compatibles qu’avec certaines.
Vous allez également trouver deux dossiers android et iOS. Ils correspondent
aux projets d’applications, respectivement sur Xcode et Android Studio.
Qu’est-ce que cela veut dire ? En réalité, React Native est un framework
compilé, c’est-à-dire que chaque développement que vous allez réaliser sera
compilé par React Native. Cela signifie donc qu’il existera véritablement un
projet Xcode de votre application, ainsi qu’un projet Android Studio, qui
seront compilés pour être testés et publiés. Cette méthode revient à
développer vous-même vos deux applications natives, sauf que vous passez
par React Native pour aller plus vite.
Dans ces dossiers, vous retrouverez donc tous les dossiers classiques des
projets d’application mobile pour iOS et Android. Je ne vais pas plus loin
dans ces explications pour le moment, nous aurons le temps d’y revenir par
la suite.
Enfin, vous trouverez un dossier tests qui, comme son nom l’indique, vous
permettra de réaliser des tests sur votre application. Le dernier dossier
nodemodules est un dossier propre à React Native et à React.js (dont dépend
React Native, souvenez-vous) qui contient l’ensemble des bibliothèques
propres à votre projet d’application mobile, des plug-ins utilisés dans votre
développement et des composants externes.

CocoaPods
Avant d’aller plus loin, il existe un petit outil qui permet d’installer de
petites bibliothèques pour votre application iOS. Il ne nous servira pas pour
le moment, mais vous en aurez besoin un jour. Vous constaterez alors que sa
simplicité d’utilisation est vraiment intéressante. Il s’agit de CocoaPods, un
outil conçu en Ruby. Cela tombe plutôt bien, Linux et macOS sont livrés
d’office avec une version préinstallée de Ruby.
En ce qui concerne Windows, il va falloir installer RubyInstaller (disponible
à l’adresse https://rubyinstaller.org). Cliquez alors sur Download. Si votre
système d’exploitation Windows est un 64 bits, cliquez dans la colonne de
gauche, sur le premier lien de téléchargement disponible, chez moi Ruby
2.4.1-2 (x64). S’il s’agit d’un 32 bits, cliquez sur le deuxième lien de
téléchargement, chez moi Ruby 2.4.1-2 (x86). Cette version est
naturellement susceptible d’évoluer avec le temps.
Une fois le téléchargement effectué, exécutez le logiciel, acceptez la licence
et installez-le dans le répertoire de votre choix – par défaut dans C:/. À la fin
de l’installation, Ruby Installer vous propose d’ajouter MSYS2, notamment
requis pour installer Gems. Cochez bien la case, car Gems va être
nécessaire pour l’installation de CocoaPods. Par ailleurs, le logiciel vous
propose quelques liens de supports :
 Figure 1-1 – Lien de support de RubyInstaller

Cliquez enfin sur Finish. RubyInstaller va ouvrir la console et exécuter son

programme. Il vous demande quel composant installer. Choisissez MSYS2
et MINGW development toolchain pour vous assurer que tous les
composants nécessaires le soient.
Cela peut prendre du temps. Dans mon cas, il télécharge et installe msys2-
x86_64-20161025.exe dans un répertoire temporaire de Windows. Ensuite,
il ouvre la fenêtre d’installation de MSYS2 64 bits.
Il ne nous reste plus qu’à installer CocoaPods et à télécharger Podfile, un
fichier qui liste les bibliothèques que vous souhaitez installer avec Cocoa.
Pour installer CocoaPods sur macOS, il faudra taper :
sudo gem install cocoapods

Le sudo, dans la commande, permet d’avoir les droits en écriture sur macOS,
pour pouvoir installer CocoaPods. Pas de panique, le Terminal va vous
demander votre mot de passe, vous pouvez le taper sans crainte.
Une fois la commande exécutée et le mot de passe saisi, le Terminal va
rechercher la dernière version de CocoaPods (fetch) puis l’installer,
accompagné de différents outils annexes :

Fetching: cocoapods-core-1.3.1.gem (100%)

Successfully installed cocoapods-core-1.3.1
Fetching: xcodeproj-1.5.1.gem (100%)
Successfully installed xcodeproj-1.5.1
Fetching: cocoapods-1.3.1.gem (100%)
Successfully installed cocoapods-1.3.1
 Parsing documentation for cocoapods-core-1.3.1
Installing ri documentation for cocoapods-core-1.3.1
Parsing documentation for xcodeproj-1.5.1
Installing ri documentation for xcodeproj-1.5.1
Parsing documentation for cocoapods-1.3.1
Installing ri documentation for cocoapods-1.3.1
3 gems installed

En ce qui concerne Windows et Linux, il suffira de taper :

gem install cocoapods

De même que pour macOS, la console va rechercher la dernière version de

CocoaPods (fetch) puis l’installer, accompagné de différents outils annexes :

Fetching: i18n-0.8.6.gem (100%)

Successfully installed i18n-0.8.6
Fetching: thread_safe-0.3.6.gem (100%)
Successfully installed thread_safe-0.3.6
Fetching: tzinfo-1.2.3.gem (100%)
Successfully installed tzinfo-1.2.3
Fetching: activesupport-4.2.9.gem (100%)
Successfully installed activesupport-4.2.9
Fetching: nap-1.1.0.gem (100%)
Successfully installed nap-1.1.0
Fetching: fuzzy_match-2.0.4.gem (100%)
Successfully installed fuzzy_match-2.0.4
Fetching: cocoapods-core-1.3.1.gem (100%)
Successfully installed cocoapods-core-1.3.1
Fetching: claide-1.0.2.gem (100%)
Successfully installed claide-1.0.2
Fetching: cocoapods-deintegrate-1.0.1.gem (100%)
Successfully installed cocoapods-deintegrate-1.0.1
Fetching: cocoapods-downloader-1.1.3.gem (100%)
Successfully installed cocoapods-downloader-1.1.3
Fetching: cocoapods-plugins-1.0.0.gem (100%)
Successfully installed cocoapods-plugins-1.0.0
Fetching: cocoapods-search-1.0.0.gem (100%)
Successfully installed cocoapods-search-1.0.0
Fetching: cocoapods-stats-1.0.0.gem (100%)
Successfully installed cocoapods-stats-1.0.0
Fetching: netrc-0.7.8.gem (100%)
Successfully installed netrc-0.7.8
Fetching: cocoapods-trunk-1.2.0.gem (100%)
Successfully installed cocoapods-trunk-1.2.0
Fetching: cocoapods-try-1.1.0.gem (100%)
Successfully installed cocoapods-try-1.1.0
Fetching: molinillo-0.5.7.gem (100%)
Successfully installed molinillo-0.5.7
Fetching: CFPropertyList-2.3.5.gem (100%)
Successfully installed CFPropertyList-2.3.5
Fetching: colored2-3.1.2.gem (100%)
Successfully installed colored2-3.1.2
Fetching: nanaimo-0.2.3.gem (100%)
Successfully installed nanaimo-0.2.3
Fetching: xcodeproj-1.5.1.gem (100%)
Successfully installed xcodeproj-1.5.1
Fetching: escape-0.0.4.gem (100%)
Successfully installed escape-0.0.4
Fetching: fourflusher-2.0.1.gem (100%)
Successfully installed fourflusher-2.0.1
Fetching: gh_inspector-1.0.3.gem (100%)
Successfully installed gh_inspector-1.0.3
Fetching: ruby-macho-1.1.0.gem (100%)
Successfully installed ruby-macho-1.1.0
Fetching: cocoapods-1.3.1.gem (100%)
Successfully installed cocoapods-1.3.1
Parsing documentation for i18n-0.8.6
Installing ri documentation for i18n-0.8.6
Parsing documentation for thread_safe-0.3.6
Installing ri documentation for thread_safe-0.3.6
Parsing documentation for tzinfo-1.2.3
Installing ri documentation for tzinfo-1.2.3
Parsing documentation for activesupport-4.2.9
Installing ri documentation for activesupport-4.2.9
Parsing documentation for nap-1.1.0
Installing ri documentation for nap-1.1.0
Parsing documentation for fuzzy_match-2.0.4
Installing ri documentation for fuzzy_match-2.0.4
Parsing documentation for cocoapods-core-1.3.1
Installing ri documentation for cocoapods-core-1.3.1
Parsing documentation for claide-1.0.2
Installing ri documentation for claide-1.0.2
Parsing documentation for cocoapods-deintegrate-1.0.1
Installing ri documentation for cocoapods-deintegrate-1.0.1
Parsing documentation for cocoapods-downloader-1.1.3
Installing ri documentation for cocoapods-downloader-1.1.3
Parsing documentation for cocoapods-plugins-1.0.0
Installing ri documentation for cocoapods-plugins-1.0.0
Parsing documentation for cocoapods-search-1.0.0
Installing ri documentation for cocoapods-search-1.0.0
Parsing documentation for cocoapods-stats-1.0.0
Installing ri documentation for cocoapods-stats-1.0.0
Parsing documentation for netrc-0.7.8
Installing ri documentation for netrc-0.7.8
Parsing documentation for cocoapods-trunk-1.2.0
Installing ri documentation for cocoapods-trunk-1.2.0
Parsing documentation for cocoapods-try-1.1.0
Installing ri documentation for cocoapods-try-1.1.0
Parsing documentation for molinillo-0.5.7
Installing ri documentation for molinillo-0.5.7
Parsing documentation for CFPropertyList-2.3.5
Installing ri documentation for CFPropertyList-2.3.5
Parsing documentation for colored2-3.1.2
Installing ri documentation for colored2-3.1.2
Parsing documentation for nanaimo-0.2.3
Installing ri documentation for nanaimo-0.2.3
Parsing documentation for xcodeproj-1.5.1
Installing ri documentation for xcodeproj-1.5.1
Parsing documentation for escape-0.0.4
Installing ri documentation for escape-0.0.4
Parsing documentation for fourflusher-2.0.1
 Installing ri documentation for fourflusher-2.0.1
Parsing documentation for gh_inspector-1.0.3
Installing ri documentation for gh_inspector-1.0.3
Parsing documentation for ruby-macho-1.1.0
Installing ri documentation for ruby-macho-1.1.0
Parsing documentation for cocoapods-1.3.1
Installing ri documentation for cocoapods-1.3.1
Done installing documentation for i18n, thread_safe, tzinfo, activesupport, nap,
fuzzy_match, cocoapods-core, claide, cocoapods-deintegrate, cocoapods-downloader,
cocoapods-plugins, cocoapods-search, cocoapods-stats, netrc, cocoapods-trunk,
cocoapods-try, molinillo, CFPropertyList, colored2, nanaimo, xcodeproj, escape,
fourflusher, gh_inspector, ruby-macho, cocoapods after 94 seconds
26 gems installed

Comme vous pouvez le constater, ici, 26 gems ont été installés

contrairement à macOS où seuls trois l’ont été. Preuve que tout ce qu’il faut
a été installé.
Une fois ceci fait, nous allons tout simplement télécharger le fameux fichier
pods. Tout d’abord, comme, je le répète, il s’agit d’un outil pour iOS – et
potentiellement macOS, tvOS, et watchOS –, il va falloir se délocaliser
dans le dossier iOS contenant le projet Xcode. Pour cela, tapez simplement :
cd ios

Puis téléchargez le fichier en tapant :

pod init

Ici rien ne se passe à l’écran, pas d’inquiétude. Vous pourrez constater vous-
même que le fichier Podfile a bien été téléchargé dans le dossier iOS de
l’application.
Nous voilà prêts à débuter.
Sans plus tarder, et parce que je suis sûr que vous brûlez d’envie de mettre
la main à la pâte, lançons cette première application mobile.

Lancement de l’applica on mobile

Si vous avez bien suivi l’ouvrage jusque-là, vous avez certainement une
petite idée sur comment lancer l’application mobile.
En vérité, vous avez deux possibilités : via une ligne de commande ou via
un fichier. Comme la ligne de commande n’est pas la tasse de thé de tout un
chacun, prenons le fichier.
Comme je suis sur macOS, j’ai la possibilité de lancer l’application sur iOS,
si vous êtes sous Windows ou Linux, ce sera Android. Voyons les deux cas
dans le but de couvrir les deux systèmes d’exploitation mobile phares.

Une applica on iOS

Le développement d’application mobile iOS est possible via le logiciel de
développement d’Apple : Xcode. Vous allez donc, dans un premier temps et
si ce n’est pas déjà fait, télécharger et installer ce logiciel.
Pour ce faire, rendez-vous sur l’App Store à partir de votre Mac :

Figure 1-2 – Logo de l’App Store sur macOS

Une fois le logiciel ouvert, tapez, dans la barre de recherche en haut à

droite, Xcode, puis installez-le :

Figure 1-3 – Installa on de Xcode

L’application pèse 4,55 Go, vous avez le temps d’aller boire un café.
Le café fini et l’installation terminée, vous allez pouvoir la lancer une
première fois, il va alors télécharger – oui, encore – des composants qui lui
sont propres.
Ensuite, nous allons pouvoir lancer le projet de l’application pour la tester.
Pour ce faire, allez dans le dossier iOS et lancez le fichier myApp.xcodeproj.
C’est un fichier propre à Xcode, c’est donc ce logiciel qui va l’ouvrir.
Ce fichier, la partie visible de l’iceberg, permettra à Xcode d’interpréter
l’ensemble de l’application. Comme vous avez pu le constater – ce n’est pas
le seul dans le projet d’application iOS – Xcode va donc avoir besoin
d’indexer l’ensemble des fichiers de l’application. Cela peut être long la
première fois, mais il gardera tout ça en mémoire et ce sera plus rapide dans
vos futurs développements. Une fois l’indexation terminée, Xcode nous
permet de lancer l’application :

Figure 1-4 – Interface de Xcode

Comme vous pouvez le voir sur l’interface, Xcode est prêt, Ready en
anglais. Parfois, comme vous l’avez eu au démarrage du logiciel, il sera en
Indexing. Aussi, quand vous connectez un iPhone, un iPad ou un iPod
Touch, le logiciel vous affichera Processing symbol files ce qui signifie tout
simplement qu’il prépare le téléchargement, depuis votre appareil mobile,
des fichiers propres à l’installation et aux tests de l’application sur le
périphérique quand vous le lui demanderez.
Le simulateur est l’environnement dans lequel va s’afficher votre
application :

Figure 1-5 – Liste des simulateurs

Cela peut naturellement être un environnement sous forme de téléphone ou

de tablette, aussi appelé simulateur. Au fur et à mesure des sorties de
nouvelles générations de téléphones et de tablettes, cette liste est mise à
jour. À l’heure où j’écris ces lignes, cela va de l’iPad Air à l’iPad Pro 12,9'
et de l’iPhone 5 à l’iPhone X en passant par l’iPhone SE. Cela peut
également être un iPhone ou un iPad que vous connecterez à Mac OS, il
apparaîtra alors dans la liste des Devices. Enfin, la partie Build Only Device
va permettre de compiler et de générer l’application sous forme d’un fichier
.IPA propre à Apple, pour pouvoir le proposer sur l’App Store.

Le troisième bouton permet finalement de lancer l’application sur

simulateur ou sur l’appareil qui est branché. Une fois le bouton Play
appuyé, Xcode va générer correctement l’application, lancer le simulateur
et/ou installer l’application dans l’environnement sélectionné. J’ai
personnellement choisi un iPhone 5 comme simulateur – ce choix permet de
s’assurer de la compatibilité avec les modèles d’iPhones plus anciens.
Attention, si vous sélectionnez Generic iOS Device dans la partie Build
Only Device, vous ne pourrez naturellement pas simuler votre application
mobile puisque Xcode considérera que vous voulez générer le fichier final.
Nous aurons l’occasion d’y revenir.
Dès que vous aurez configuré à votre convenance le simulateur et que
Xcode est prêt, vous pourrez lancer la vapeur !
C’est alors que Xcode travaille un peu, lance le simulateur (ce dernier peut
prendre un peu de temps à démarrer, pas de panique), compile l’application
et affiche l’application sur le simulateur, comme moi à la figure 1-9.
Au lancement de l’application, Xcode active quelque chose de spécial, vous
l’aurez sûrement remarqué : il ouvre une console – le Terminal sur macOS
–, y scanne l’ensemble du dossier node_modules de votre application –
contenant notamment l’ensemble des packages propres à cette dernière – et
lance l’application React Native :

Figure 1-6 – Exécu on de React Packager au lancement de l’applica on

Comme le Terminal vous l’indique, cette console est nécessaire pour

l’utilisation de l’application. Si vous la fermez, vous ne pourrez plus tester
cette dernière. Vous aurez d’ailleurs remarqué que le Terminal vous signale
de lancer le Packager sur le port 8081. Essayez donc d’aller, depuis votre
navigateur, à l’adresse http://localhost :8081/, vous y découvrirez le
Packager en question avec un lien vers la documentation. Celle de React
Native, vous l’aurez deviné.
Dernière chose avant de passer à Android, il peut arriver que l’exécution de
l’application – la build donc – échoue et renvoie une erreur, sur Xcode. Ces
erreurs vous permettent de comprendre le problème et de le corriger,
directement dans l’application. Aussi, il peut y avoir des Warnings. Cela
peut arriver si vous utilisez des fonctions qui sont devenues obsolètes au fur
et à mesure du temps et des développements d’Apple. Enfin, Xcode peut
vous recommander une mise à jour de la configuration de votre application.
Tout cela se passera du côté gauche de Xcode dans un menu latéral :

Figure 1-7 – Menu latéral d’Xcode, les « issues »

Cliquez sur Update to recommended settings, cela vous affichera une

fenêtre avec les mises à jour recommandées. Vous pourrez en sélectionner
une ou plusieurs pour valider.

Une applica on Android

Le développement d’applications mobiles Android est possible, quel que
soit le système d’exploitation que vous utilisez.
Au même titre qu’Apple avec son logiciel Xcode – qui intègre par défaut
tous les composants et logiciels nécessaires –, Android a besoin d’un SDK
– Software Development Kit en anglais pour kit de développement logiciel
en français – pour fonctionner. Les SDK sont un ensemble d’outils logiciels
destinés aux développeurs. Nous en avons installé en ligne de commandes
avec React-Native-CLI, rappelez-vous. Xcode en a installé lui aussi. Là
aussi, avec Android, nous allons devoir en installer.
Nous allons donc télécharger le SDK Java ainsi qu’Android Studio.
Pourquoi Java ? Souvenez-vous, au tout début de cet ouvrage, nous avons
évoqué les différents systèmes d’exploitation mobile, avec leur plate-forme
d’application et leur langage de programmation ; Android et ses
applications sont conçus en Java. Ainsi, bien que React Native serve
d’intermédiaire dans le développement des applications mobiles, il va lui
aussi avoir besoin de Java pour, à proprement parler, compiler l’application,
comme vous venez peut-être de le faire sur Xcode.
Pour télécharger le SDK, nous allons nous rendre sur le lien de
téléchargement suivant : http://www.oracle.com/technetwork/java/javase/
downloads/jdk8-downloads-2133151.html. Vous allez devoir accepter la
licence puis télécharger le SDK correspondant à votre système
d’exploitation. Cela va automatiquement télécharger l’installeur
correspondant qui va s’occuper du reste.
Après cela, nous allons télécharger et installer Android Studio, le logiciel de
développement des applications mobiles pour Android. Pour ce faire,
rendez-vous simplement sur ce lien : https://developer.android.com/studio/
index.html.
Contrairement à Xcode qui a pris un certain temps, le processus devrait être
beaucoup plus rapide. Lancez donc Android Studio :
 Figure 1-8 – Interface de démarrage d’Android Studio

La bonne nouvelle, c’est que le téléchargement et l’installation de ce

logiciel de développement n’ont pas duré longtemps. La mauvaise nouvelle,
c’est que contrairement à Xcode où presque tout était prêt pour lancer
l’application mobile, ici, vous allez devoir mettre la main dans les
configurations pour faire de même.
Sur cette fenêtre, vous allez donc cliquer sur Configure, ouvrant alors sur un
menu déroulant où vous allez sélectionner SDK Manager. Vous arrivez
alors, figure 1-10, sur la fenêtre des Préférences d’Android Studio, rubrique
Android SDK.
À l’intérieur, vous allez avoir la possibilité de modifier l’emplacement du
SDK Android sur votre ordinateur, chez moi c’est
/Users/blaisebarre/Library/Android/sdk. Ensuite, vous allez cocher le ou les
SDK qui vous intéressent. Chez moi, c’est le tout dernier qui est installé
même si les deux suivants l’ont été un jour et sont toujours partiellement
présents sur mon ordinateur. Cochez donc au moins le 7.1.1 si c’est toujours
le plus récent, puis cliquez sur OK.
Figure 1-9 – Simula on de l’applica on sur iPhone 5
 Figure 1-10 – Fenêtre Android SDK dans les préférences d’Android Studio

Android Studio vous demande alors de confirmer l’installation des SDK

sélectionnés :

Figure 1-11 – Confirma on du choix des SDK

Maintenant, il est temps d’aller reprendre un café, ce téléchargement peut

durer un certain temps.
Une fois le téléchargement et l’installation terminés, vous pouvez fermer la
fenêtre de configuration d’Android Studio. Nous allons désormais ouvrir le
projet d’application mobile. Cliquez donc sur Open an existing Android
Studio project. Cela va vous ouvrir une petite fenêtre où vous allez devoir
sélectionner le fichier build.gradle dans le dossier android du dossier myApp
(figure 1-12). Une fois validé, Android Studio va alors faire une build – oui,
lui aussi ! – de l’application, puis vous ouvrir l’interface de développement.

Figure 1-12 – Ouvrir un projet d’applica on mobile sur Android Studio

Au premier lancement de l’application React Native sur Android Studio, il

est possible qu’il manque certains composants, SDK ou bibliothèques à
Android Studio. Le logiciel vous demandera alors d’installer lesdits outils
de développement ou procèdera de sa propre initiative au téléchargement.
Enfin, après une petite phase d’indexation, le logiciel sera prêt. Vous
arriverez sur une fenêtre vide d’Android Studio, prête pour développer ou
pour exécuter l’application sur un simulateur, voir figure 1-13.
 Figure 1-13 – Fenêtre principale d’Android Studio

Nous allons désormais pouvoir lancer le simulateur. Cliquez sur l’icône en

question, figure 1-14.

Figure 1-14 – Lancement du simulateur Android

Une nouvelle fenêtre s’ouvre :

 Figure 1-15 – Fenêtre Select Deployment Target d’Android Studio

À partir d’ici, vous allez pouvoir sélectionner le simulateur sur lequel vous
voulez lancer votre application. Si vous n’avez pas encore de simulateur
disponible, vous allez pouvoir en créer un en cliquant sur Create New
Virtual Device.
De la même manière, si vous connectez un appareil mobile tournant sous
Android, alors le périphérique en question apparaîtra dans la liste des
Connected Devices.
Sélectionnez donc l’environnement que vous préférez, s’il s’agit d’un
simulateur, il se lancera automatiquement quand vous validez la fenêtre.
Pour information, la simulation Android demande énormément de
ressources processeur. J’ai bien peur que vous deviez prendre votre mal en
patience. Dans le cas de mon MacBook Pro, cela a pris plus de deux
minutes ! Nous arrivons sur un simulateur avec l’application.
Malheureusement, il est possible que le lancement de l’application
« plante ». Le simulateur affichera donc un écran rouge – nous aurons
l’occasion de revenir en détail sur ce genre d’écran – avec le message
d’erreur suivant : Error calling AppRegistry.runApplication.
Fort dommage, nous n’avions pas encore commencé à développer et cela
bogue déjà.
En réalité, ce n’est pas de votre faute, mais celle d’Android Studio qui n’a –
encore une fois – pas tout prévu de lui-même. Si vous avez suivi le
lancement d’une application iOS, vous vous souvenez sûrement qu’au
lancement du simulateur iOS, Xcode ouvre un terminal pour effectuer une
commande. C’est justement cette commande que ne lance pas Android
Studio, il va falloir le faire manuellement.
Ouvrez donc le Terminal sous macOS (l’Invite de commandes sur Windows
ou la Console sur Linux) et tapez la commande :
react-native start

Cette dernière lance une instance de React Native et permet à Android

Studio d’exécuter correctement votre application.
Relancez donc le simulateur Android, vous tomberez enfin sur le simulateur
avec votre application mobile ouverte :
Figure 1-16 – L’émulateur Android
 2
Développez votre applica on

Explora ons et modifica ons

Pour rappel, l’ensemble de mes développements se fera sur macOS, avec
notamment Xcode pour des rendus sur des simulateurs iOS. Cependant, rien
ne vous empêche de développer sous Windows ou Linux pour un rendu sur
des simulateurs Android. Tous les développements que nous serons amenés
à faire seront compatibles avec Android.
Néanmoins, vous l’aurez compris, le développement ne se fera pas sur
Xcode ou Android Studio, ces logiciels ne servant qu’à compiler les
applications respectives. Je vous invite donc, si ce n’est pas déjà fait, à
télécharger et à installer un éditeur de développement. Plusieurs logiciels,
gratuits ou payants, existent. Je vous laisse faire votre choix.
Commençons donc notre développement. Ouvrez votre éditeur de texte sur
le fichier index.ios.js à la racine de l’application.

Partons de zéro
Nous allons tout reprendre de zéro pour aller petit à petit dans le
développement de l’application. Supprimez donc tout ce code !
Au début du fichier, écrivez :
'use strict';

Ce simple code active le mode Strict, que vous trouverez un peu partout. Il
ajoute une meilleure gestion des erreurs et désactive certaines
fonctionnalités inutiles de JavaScript. Nous l’utiliserons sur l’ensemble des
pages.
Ensuite, nous allons ajouter les composants de React et React Native :
 var React = require('react');
var ReactNative = require('react-native');

Comme vous pouvez le voir, ces deux lignes attribuent les composants en
question à des variables, de manière à pouvoir utiliser toutes les
fonctionnalités de React et React Native par la suite.
Comme vous pouvez vous en douter, ces deux composants react et react-
native ont été installés à la création de l’application mobile. Nous aurons
l’occasion d’utiliser d’autres composants, notamment des plug-ins, qui
nécessiteront des téléchargements complémentaires et parfois même des
manipulations au sein de Xcode, d’Android Studio et même au sein des
fichiers de leurs dossiers sources respectifs.
Passons ensuite au cœur de l’application : l’affichage. Nous allons, pour
commencer, afficher un simple Hello World, phrase symbolique de
l’apprentissage de n’importe quel langage de programmation. Sans plus
tarder, voici le code :

class myApp extends React.Component {

render () {
return React.createElement(ReactNative.Text, { style : styles.text}, "Hello
World!") ;
}
}

Que fait-il ? Il écrit le mythique Hello World dans une classe (class) – c’est
une façon classique de développer dans la plupart des frameworks. Cette
classe représente tout naturellement une fenêtre de votre application mobile.
Elle étend elle-même React.Component, qui est tout simplement le composant
de base de React, pour la construction de l’interface utilisateur.
Dans ce composant, nous trouvons la méthode render qui va se charger de
l’affichage de votre fenêtre de l’application. Dans cette méthode, nous
utilisons le composant Text de React Native pour afficher Hello World avec
un peu de style.
Si vous chargez l’application ainsi, aucun style ne sera appliqué puisque
nous n’avons pas encore écrit le style.
Si vous êtes un développeur web, vous n’allez pas être dépaysé, les styles se
conçoivent presque de la même manière que sur le Web.
Ajoutez donc ce simple CSS juste avant la classe :

var styles = ReactNative.StyleSheet.create ({

text : {
color : 'black' ,
backgroundColor : 'white' ,
fontSize : 30 ,
margin : 80
}
}) ;

Ce style, vous l’aurez compris aisément, reprend la plupart des notions de

CSS dont vous avez l’habitude. Ici, nous passons le texte en noir sur fond
blanc, de taille 30 et avec une marge de 80.
Outre l’usage d’un CSS un peu particulier – vous repérerez la propriété
background-color modifiée par React Native en utilisant une majuscule à la
place du tiret –, React Native utilise les flexbox pour mettre en forme les
applications.
Flexbox est une nouvelle méthode de mise en forme qui a été prise en
charge par l’ensemble des navigateurs les plus utilisés comme Google
Chrome, Mozilla Firefox, Safari et bien d’autres. Nous aurons l’occasion
d’y consacrer un chapitre par la suite et vous découvrirez la puissance de
l’utilisation de cette technologie moderne au service de votre interface.
Enfin, nous allons enregistrer notre classe myApp au sein de l’application.
Pour ce faire, nous allons écrire ceci à la fin du fichier :
ReactNative.AppRegistry.registerComponent('myApp', function () { return myApp }) ;

AppRegistry va être le point d’entrée de l’application React Native. La

méthode enregistre la classe qui va être exécutée au lancement de
l’application, ici, myApp.
Évitons toute confusion, le premier myApp de cette dernière ligne de code est
le nom de code de cette classe, dont vous pourrez par la suite vous servir
dans l’ensemble de l’application. Le deuxième myApp est en réalité le nom de
la classe à proprement parler, tel que nous venons de le coder. Une simple
faute de frappe peut entraîner bien des erreurs.
Par ailleurs, vous pouvez facilement renommer la classe (le deuxième),
alors que vous pouvez plus difficilement renommer la classe au sein de
l’application (le premier).
C’est notamment ce dernier qui est utilisé pour nommer le fichier .xcodeproj
du dossier iOS et le fichier settings.gradle du dossier android. Si vous changez
le nom dans ce fichier, il vous faudra remettre l’ensemble en symbiose.
Pour y arriver, il vous suffira de supprimer – si vous n’y avez pas effectué
de modification pour l’installation de plug-ins – les dossiers iOS et android et
d’exécuter la ligne de commande :
react-native upgrade

Cette ligne aura pour effet de mettre à jour React Native avec les dernières
améliorations et de recréer les dossiers iOS et android disparus avec leur
contenu.
Dernier détail avant de visualiser notre application. Ici, pour le moment,
nous n’avons utilisé qu’une seule méthode de React, rien d’autre. Nous
l’avons vu dans la première partie, React Native utilise un grand nombre de
composants de React, et notamment tous les composants d’interface. Le
principal travail des composants de React Native sera donc d’adapter les
codes de React au mobile.
Aussi, ne soyez pas surpris, au cours du développement, de voir
alternativement des codes utilisant React et React Native.
Enregistrez enfin le fichier index.ios.js, revenez à Xcode, puis lancez le
simulateur de l’application.
Magique ! Votre application apparaît :
 Figure 2-1 – Votre premier « Hello World »

Si votre application ne fonctionne pas, je vous invite à télécharger ce fichier

index.ios.js pour vérifier que vous ne vous êtes pas trompé dans votre
saisie : http://www.editions-eyrolles.com/dl/0067563.

Quelques modifica ons pour comprendre le code

Reprenons le code suivant :
return React.createElement(ReactNative.Text, { style : styles.text }, "Hello
World!") ;

Nous avons vu que ce code affichait un Hello World stylisé à notre sauce.
Mais que faire si vous voulez que ce texte rentre dans un autre texte avec un
style différent ? Ou si vous voulez ajouter des boutons ?
React propose des éléments de base – et je parle bien de React, pas de React
Native qui les adapte au framework mobile –, mais nous allons également
pouvoir concevoir notre interface avec des éléments similaires à du HTML.
Il ne s’agit pas de HTML, mais la logique restera la même.
Nous allons transformer notre simple élément texte Hello World en une
interface propre.
À la place de cette ligne de code, je vous propose de mettre :
return <ReactNative.Text style={styles.text}>Hello World </ReactNative.Text>;
Ce code produira exactement le même résultat au lancement de
l’application. Concrètement, vous le voyez vous-même, nous n’y
retrouvons effectivement que notre balise de base ReactNative.Text. Mais il
n’y a plus le React.createElement et c’est tout l’intérêt, car nous allons pouvoir
facilement imbriquer des balises, donc des éléments dans l’interface de
notre application.
Actualisez l’application et vous le constaterez par vous-même.
Petite piqûre de rappel : pour actualiser l’application, rendez-vous sur le
simulateur, descendez en bas de la visualisation du simulateur et cliquez sur
le bouton Reload. Magique !

Pour aller plus loin : une applica on de météo

C’est bien de concevoir des interfaces, mais nous n’allons pas nous
contenter de cela. Dans la suite de cet ouvrage, apprenez à concevoir une
application typique – et relativement simple – de météo !
Pour faire les choses bien, chaque nouvelle fenêtre de notre application sera
définie dans un nouveau fichier. Dans le cadre d’une grosse application,
vous pourrez regrouper les fichiers concernant les mêmes fonctionnalités
dans des dossiers, de manière à garder une cohérence de l’ensemble. Par
exemple, un dossier User avec les fenêtres de profil, de modification de
paramètres, d’ajout d’amis, etc.
Ici, l’application sera très simple. Pour ne pas complexifier les choses, je
vais donc mettre l’ensemble des fenêtres à la racine de l’application.
Créons un nouveau fichier MeteoPage.js à la racine, il servira à afficher la
météo.
Maintenant, nous allons développer ce fichier. Si vous avez bien suivi
jusque-là, vous savez déjà les trois premières lignes de codes à insérer.
Reprenons-les ensemble.

Concep on du fichier MeteoPage.js

Tout d’abord, le fameux use strict. Je ne prends pas le temps de vous
expliquer de nouveau l’utilité de ce code, nous l’avons déjà vu dans le
premier chapitre de cet ouvrage.
Ensuite, l’appel des composants React et React Native. Précédemment,
nous avons vu le code suivant :

var React = require ( 'react' ) ;

var ReactNative = require ( 'react-native' ) ;

Bien qu’il soit parfaitement adapté et conforme, nous allons changer ici la
manière de développer et utiliser des import. Comme son nom l’indique,
cette fonctionnalité permet tout simplement d’importer une autre
fonctionnalité au sein du code, de manière totalement transparente, comme
si nous l’avions conçue et développée directement.
Ajoutez donc le code suivant au fichier MeteoPage.js :

import React, {Component} from 'react' ;

import {
StyleSheet ,
Text ,
TextInput ,
View ,
TouchableHighlight ,
ActivityIndicator ,
Image
} from 'react-native' ;

Que fait ce code ? Il va extraire – et donc importer – les composants de

React et de React Native et les associer chacun à des variables spécifiques.
Ainsi, plutôt que de devoir utiliser ReactNative.StyleSheet dans votre code,
vous pourrez utiliser directement StyleSheet.
En parlant de style justement, créons-les ! Toujours de la même manière,
via une variable styles utilisant le composant StyleSheet :

var styles = StyleSheet.create({

description : {
marginBottom : 20 ,
fontSize : 18 ,
textAlign : 'center' ,
color : '#656565'
} ,
container : {
padding : 30 ,
marginTop : 65 ,
alignItems : 'center'
} ,
container : {
flex : 1
} ,
flowRight : {
flexDirection : 'row' ,
alignItems : 'center' ,
alignSelf : 'stretch'
} ,
buttonText : {
fontSize : 18 ,
color : 'white' ,
alignSelf : 'center'
} ,
button : {
height : 36 ,
flex : 1 ,
flexDirection : 'row' ,
backgroundColor : '#48BBEC' ,
borderColor : '#48BBEC' ,
borderWidth : 1 ,
borderRadius : 8 ,
marginBottom : 10 ,
alignSelf : 'stretch' ,
justifyContent : 'center'
} ,
searchInput : {
height : 36 ,
padding : 4 ,
marginRight : 5 ,
flex : 4 ,
fontSize : 18 ,
 borderWidth : 1 ,
borderColor : '#48BBEC' ,
borderRadius : 8 ,
color : '#48BBEC'
}
}) ;

Enfin, le cœur de notre fenêtre : la vue. Nous allons ici aussi créer une
classe nommée – de manière très originale – MeteoPage. Cette classe héritera
de Component. Effectivement, plus besoin d’hériter de React.Component comme la
dernière fois puisque l’import s’est occupé de l’assigner directement à une
variable.
Dans cette classe, nous aurons évidemment la méthode render qui se
chargera d’afficher la météo (enfin, juste une zone texte avec la ville
souhaitée et un bouton de recherche, pour le moment).
Voyons ce code :

class MeteoPage extends Component {

render () {
return (
< View style = { styles.container } >
< Text style = { styles.description } >
Recherchez la météo de votre ville
</ Text >
< View style = { styles.flowRight } >
< TextInput
style = { styles.searchInput }
placeholder = 'Entrez la ville désirée..' >
</ TextInput >
< TouchableHighlight style = { styles . button }
underlayColor = '#99d9f4' >
< Text style = { styles.buttonText } > Go </ Text >
</ TouchableHighlight >
</ View >
</ View >
) ;
}
 }

Terminons enfin le développement en déclarant cette nouvelle classe au sein

de notre application.
Contrairement à la dernière fois, nous n’avons plus besoin d’enregistrer la
classe de l’application via un registerComponent puisque nous l’avons déjà fait
une fois. Nous allons nous contenter d’exporter cette classe pour la rendre
visible dans toute l’application et ainsi pouvoir l’utiliser :
module.exports = MeteoPage ;

Ceci étant fait, nous allons devoir faire en sorte d’afficher cette vue
directement à la racine, c’est-à-dire dans le fichier index.ios.js.

Modifica on du fichier index.ios.js

Parlons du fichier index.ios.js justement. Ouvrez-le et rajoutez un troisième
require juste après les deux premiers.

var MeteoPage = require ( './MeteoPage' ) ;

Pourquoi un require et pas un import comme nous venons de le faire ? Très

bonne question, les deux méthodes peuvent coexister. Néanmoins, je vous
invite effectivement à utiliser un import là aussi.
Comme vous avez pu le remarquer dans les précédents développements,
nous avons utilisé deux manières différentes d’appeler les classes dans les
import :

import React, {Component} from 'react' ;

Dans un premier temps nous avons import React from 'react' ; tandis que dans
un second temps nous avons import {Component} from 'react'.
Pourquoi ? La réponse se trouve dans la définition de la classe React dans la
bibliothèque React. La première est la classe par default tandis que les
suivantes n’en sont pas.
Si vous êtes amené à créer vos propres classes à l’avenir, vous n’aurez pas
besoin d’accolade en mettant une classe par fichier et en la déclarant ainsi :

export default class myClass extends Component {

 // myClass
}

Retournons à notre développement. Maintenant, nous allons devoir dire à

React Native que nous n’utilisons plus le render de la classe myApp du fichier
index.ios.js, mais la variable MeteoPage, autrement dit la classe MeteoPage du
fichier MeteoPage.js que nous avons importé. Vous suivez ?
Ainsi, nous allons modifier la méthode render du fichier index.ios.js comme
suit :

class myApp extends React.Component {

render () {
return (
< ReactNative.NavigatorIOS
style = { styles.container }
initialRoute = { {
title : 'Météo' ,
component : MeteoPage ,
} } />
) ;
}
}

Attention, dans ce fichier, nous avons conservé l’ancienne méthode require

pour l’importation des composants de React et de React Native, la classe
myApp étend donc bel et bien React.Component et non pas simplement Component.

Dans ce code, nous prenons le composant – oui, même s’il s’agit de notre
fichier d’interface, on parle malgré tout de composant, de brique logicielle
si vous préférez – MeteoPage auquel on attribue le titre 'Meteo'.
Enregistrez les fichiers et actualisez l’application sur le simulateur :
 Figure 2-2 – La première fenêtre de notre applica on de météo

Évidemment, au niveau du style, ce n’est pas optimal. Je vous invite donc à

le modifier un peu de manière à vous familiariser un peu avec ce type de
développement.
Je vous suggère, en règle générale, d’en faire toujours plus que ce que cet
ouvrage vous enseigne. Essayer – même si c’est pour échouer parfois – est
une excellente façon de progresser dans l’apprentissage d’un framework ou
plus généralement d’un langage de programmation.
Si votre application ne fonctionne pas, je vous propose de télécharger les
fichiers index.ios.js et MeteoPage.js pour vérifier que vous ne vous êtes pas
trompé dans une quelconque saisie : http://www.editions-eyrolles.com/dl/
0067563.

Ac ons et fonc ons, passons à l’interac vité

Nous avons désormais le champ de recherche de la ville dont on souhaite
connaître la météo. C’est un bon début. Maintenant, place aux résultats.
Pour cela, nous allons devoir interagir avec les différents boutons de
l’application et notamment, dans cette vue, avec le bouton Go. Il faudra
alors renvoyer l’utilisateur vers la page des résultats.
Durant notre développement, nous allons être amenés à manipuler
énormément une variable this.
Connue de tous les développeurs en Programmation Orienté Objet – POO
pour les intimes –, cette variable permet d’accéder à l’objet courant,
généralement la fenêtre, ou encore de l’hériter. Nous travaillerons donc
avec les différents éléments de la fenêtre, représentée par le this, comme des
méthodes.
D’ailleurs, une des notions fondamentales de React, dont nous avons parlé
dans le premier chapitre, est son instantanéité. Lorsqu’une partie de
l’interface change, l’application le détecte et se met à jour
automatiquement, uniquement sur les changements. Bien évidemment,
React Native, qui est issu je vous le rappelle de React, profite de cette
puissance. Cela est notamment possible via ladite variable this qui va nous
permettre de modifier l’état actuel de l’interface en changeant les sous-
variables de la variable this.state. Nous le verrons plus en détail par la suite,
mais gardez-le en mémoire.

Le constructeur
Avant de parler de la recherche à proprement parler, parlons du
constructeur. Cette méthode, qui n’est pas obligatoire mais très couramment
utilisée en POO, est appelée lors de la construction de la fenêtre.
C’est au sein de cette méthode que nous allons pouvoir initialiser certaines
variables d’état de la fenêtre – que nous pourrons par la suite modifier pour
mettre à jour l’interface.
Nous aurons également la possibilité de récupérer les variables passées en
argument lors de la navigation vers la fenêtre.
Profitons-en justement pour développer ce constructeur. Juste après la ligne
de déclaration de la classe :
class MeteoPage extends Component {

Nous allons créer notre constructor. Ce dernier prend en charge le paramètre

props qui contient l’ensemble des variables passées en argument lors de la
navigation à la présente fenêtre – le paramètre props peut être utilisé dans
d’autres cas, ne soyez pas surpris de le voir ailleurs également.

constructor (props) {
}
À l’intérieur de notre constructor, nous allons déjà ajouter un appel à une
méthode aussi intrigante qu’importante : super(). Cette méthode est très
importante, car c’est elle qui initialise le this.
Mais ce n’est pas tout. Pour pouvoir utiliser le paramètre props, autrement
dit nos paramètres passés à la fenêtre, à l’extension du constructor – donc par
exemple dans le render –, nous allons devoir passer props en paramètre de la
méthode super(), de cette façon :
super(props);

Ainsi, nous aurons accès à this et à props à l’intérieur et à l’extension du

constructor.

Enfin, nous allons initialiser un premier état pour notre fenêtre de

l’application :

this.state = {
maVariable : 'contenu'
} ;

Pour l’instant, nous n’avons pas encore eu l’occasion d’utiliser des

variables d’état, mais ça ne saurait tarder. Au final, le constructor sera défini
comme cela :

constructor(props) {
super (props);
this.state = {
searchString: 'Troyes'
} ;
}

Interac on de la recherche
Dans un premier temps, il va nous falloir coder les interactions entre le
champ de recherche et le bouton Go. Accrochez-vous, nous entrons dans le
vif du sujet !

onChange
Si vous connaissez un peu le JavaScript – et sa bibliothèque jQuery, la plus
connue des développeurs – vous avez l’habitude des paramètres d’action
comme onClick ou onChange. Ici, nous allons utiliser une propriété similaire
pour React Native, onChange dans le TextInput.
Ajoutez donc la ligne suivante, dans le TextInput du fichier MeteoPage.js, c’est-
à-dire à l’intérieur de la balise :
onChange = { this.onSearchTextChanged.bind(this)}

Étudions-la désormais, très rapidement. Lorsque l’input va changer, on va

prendre la méthode onSearchTextChanged que l’on va utiliser et lui envoyer le
paramètre this contenant la valeur de l’input.
Comme nous l’avons vu, le this devant onSearchTextChanged permet de faire
référence à la méthode éponyme que nous allons développer à l’intérieur de
la classe de la fenêtre courante. Le .bind(this) va créer une nouvelle fonction
à partir de la fonction mère qui aura pour contexte this, ainsi que divers
autres arguments.
Cela signifie qu’à l’intérieur de la méthode onSearchTextChanged, le this ne fera
pas référence à la méthode elle-même comme il le devrait, mais à la fenêtre
globale.
Maintenant, développons la méthode en question. Dans cette dernière, nous
allons devoir faire une mise à jour de l’interface. Autrement dit, indiquer à
React Native que l’application va bouger. Pour cela, nous allons faire deux
choses : initialiser une valeur de l’input, puis faire la mise à jour.

Value
Nous allons ajouter la ligne suivante au TextInput :
value = { this.state.searchString }

Cette variable sera initialisée dans le this.state du constructor :

this.state = {
searchString : 'Troyes'
};

Vous devinez de quelle ville je suis originaire ?

Je vous laisse l’ajouter au code. Cette variable sera récupérée au traitement
de l’application, dans l’input.

onSearchTextChanged
Revenons à nos moutons. Dans la méthode onSearchTextChanged, nous allons
mettre à jour la valeur. Comme nous l’avons vu, le .bind(this) que nous
avons utilisé dans le onChange va permettre de créer une fonction à partir de la
fonction mère, à l’intérieur de laquelle le this ne fera pas référence à la
méthode elle-même comme cela devrait l’être, mais à la fenêtre globale.
Grâce à cela, vous l’aurez compris, nous allons pouvoir modifier le contenu
de la variable this.state.searchString pour mettre à jour l’interface en
conséquence.
Voyons un peu cela :

onSearchTextChanged (event) {
console.log('onSearchTextChanged');
this.setState({
searchString : event.nativeEvent.text }) ;
}

Lorsque nous exécuterons l’application, nous pourrons voir le log

s’afficher, onSearchTextChanged.
Ce que fait setState, c’est déclencher la fameuse mise à jour de l’interface
utilisateur d’après le ou les éléments passés en paramètres (qui peuvent être
des variables, des fonctions ou d’autres objets). C’est donc ici que se
matérialise la puissante instantanéité de React Native. Dès qu’un setState
sera exécuté, l’application sera mise à jour instantanément.
Actualisez l’application (figure 2-3), allez dans Xcode ou Android Studio et
consultez les logs :
 Figure 2-3 – Logs de changement de l’input

Figure 2-4 – La première fenêtre de notre applica on de météo avec la ville

préremplie

Tout d’abord, on utilise le même principe que onChange mais pour les
boutons, avec onPress. Ajoutez donc cette ligne au bouton :
onPress = { this.onSearchPressed.bind(this)}

Vous comprendrez qu’il va falloir concevoir une méthode, toujours au-

dessus de render. Cette méthode va faire le plus gros du travail : récupérer
les données de la météo et afficher l’information sur une nouvelle page.

Récupéra on de la météo
Pour récupérer la météo, nous allons utiliser le site OpenWeatherMap
(disponible à l’adresse http://openweathermap.org) et notamment son API.
Je vous laisse vous y créer un compte gratuit afin de récupérer une clé
d’API pour les appels.
Une fois celle-ci en votre possession, vous allez pouvoir utiliser la méthode
fetch pour récupérer les données de l’API. Ensuite, l’idée sera de transférer
les données récupérées en les envoyant vers une nouvelle fenêtre de
visualisation des résultats.
Dans un premier temps, nous allons récupérer les données d’API
d’OpenWeatherMap dans la fonction onSearchPressed :

onSearchPressed () {
fetch (
'http://api.openweathermap.org/data/2.5/weather?q=' +
this.state.searchString +
'&unites=metric' +
'&appid=<VOTRE_CLE_API>'
)
.then(response => response.json())
.then(json => this._handleResponse(json.response)));
}

Petite analyse de ce code. La méthode fetch va utiliser l’adresse URL de

l’API de météo de OpenWeatherMap (http://api.openweathermap.org/data/
2.5/weather) accompagnée de paramètres GET – directement dans l’URL –
composé de la ville, de l’unité météorologique et enfin de votre clé d’API.
Encore une fois, le fait d’avoir appelé onSearchPressed accompagné du
.bind(this) lui associe le contexte this dans la méthode onSearchPressed et
permet donc d’accéder directement à la valeur du TextInput via la variable
this.state.searchString.

Fetch
Parlons un peu fetch, qui est la méthode phare pour la récupération des
données depuis Internet aujourd’hui.
Une fois la requête API envoyée par le fetch, ce dernier vous renvoie une
réponse via un traitement .then(). Le plus commun est de modifier ladite
réponse, bien souvent du contenu JSON, en simple objet.
Un second traitement .then() permet ensuite d’utiliser ce contenu transformé
dans une seconde méthode, nommée _handleResponse, que nous allons nous
charger de développer.
Avant de passer à cette dernière, évoquons un peu ces fameux traitements
.then(). Vous aurez bien souvent l’occasion de voir cette forme de
développement à l’avenir :
response => response.json()

Cette façon de faire, propre aux technologies de React Native, est la

nouvelle façon d’utiliser une méthode classique avec un retour de données :
function(response) { return response.json(); }

Aussi, vous l’aurez compris, cette nouvelle norme de développement n’est

possible qu’en cas d’unique instruction. Si plusieurs lignes de code sont
nécessaires, il vous sera bien utile de passer par une méthode
complémentaire, de la même façon que dans le deuxième .then() :
json => this._handleResponse(json.response))

Si toutefois vous ne souhaitez pas passer par une fonction, il suffira

d’utiliser des accolades pour y placer plusieurs lignes de codes :

json => {
// code
// code
// code
}

Ensuite, même si nous ne l’avons pas développé ici, le fetch permet

également de gérer les erreurs. En effet, si les .then() sont lus par
l’application en cas de succès de la méthode, que se passe-t-il en cas
d’erreur ? Il nous suffit d’utiliser un traitement .catch() en prenant en
paramètre la variable error :

.catch((error) => {
console.error(error); }
);

Nous l’utiliserons dans le prochain chapitre. N’hésitez pas à développer

vous-même cette partie, vous pourrez comparer votre code par la suite.
Avant de nous occuper de la méthode _handleResponse, voyons un dernier
point du fetch, la gestion des headers et des paramètres POST. C’est en effet
très important de comprendre son fonctionnement pour que vous puissiez le
réutiliser plus tard avec vos propres API ou des API publiques qui
fonctionnent ainsi.
Vous allez devoir préciser à fetch que nous utilisons la méthode POST, que
nous utilisons le type MINE « application/json » pour enfin y associer les
données des paramètres. Nous devons le développer à l’intérieur du fetch()
lui-même, avant le .then() :

fetch('http://my.api.com/api/adress',
{
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
firstParam: 'yourValue',
secondParam: 'yourOtherValue'
})
);

Naviga on
Maintenant, occupons-nous de la méthode _handleResponse. Si vous avez été
curieux, vous avez utilisé l’adresse générée dans le fetch pour visualiser les
données ainsi retournées par OpenWeatherMap. Vous avez visualisé
quelque chose comme cela – dans le cas présent, c’est la météo sur la ville
de Troyes :

{
"coord":{
"lon":4.08,
"lat":48.3
},
"weather":[{
"id":800,
 "main":"Clear",
"description":"clear sky",
"icon":"01n"
}],
"base":"stations",
"main":{
"temp":294.72,
"pressure":1010,
"humidity":77,
"temp_min":294.15,
"temp_max":295.15
},
"visibility":10000,
"wind":{
"speed":1
},
"clouds":{
"all":0
},
"dt":1504042200,
"sys":{
"type":1,
"id":5620,
"message":0.0035,
"country":"FR",
"sunrise":1503982705,
"sunset":1504031351
},
"id":2971549,
"name":"Troyes",
"cod":200
}

Voyons la méthode qui utilise ladite réponse d’OpenWeatherMap :

_handleResponse(response) {
var meteoData = {
 'icon': 'http://openweathermap.org/img/w/' + response.weather[0].icon +
'.png',
'main': response.weather[0].main,
'city': response.name,
'description': response.weather[0].description,
'temp': response.main.temp
} ;
this.props.navigator.push({
title: 'Météo',
component: MeteoViews ,
passProps: { meteoData: meteoData}
}) ;
}

Dans ce code, nous utilisons la donnée icon du premier array du paramètre

weather de la response – ici 01n pour récupérer l’image correspondante auprès
du site OpenWeatherMap et ainsi l’afficher sur notre prochaine fenêtre.

Figure 2-5 – Icône Clear Sky depuis OpenWeatherMap

Aussi, nous récupérons la donnée main – ici clear –, le nom de la ville, la

description – ici « Clear Sky » – et enfin la température.
Ensuite, nous utilisons le module de navigation de React Native, via notre
paramètre global props, pour passer à une autre fenêtre. Dans ce push du
navigator, nous allons définir un titre pour notre prochaine fenêtre. S’il s’agit
d’un titre dynamique, vous pouvez tout à fait choisir de fixer un titre
statique sur la page en question. Nous allons aussi choisir le component,
élément vital puisque cela définit la fenêtre qui va être appelée. Enfin, nous
utilisons la variable meteoData précédemment créée pour la passer en
paramètre dans la navigation.
Par ailleurs, si vous voulez vous entraîner par la suite, je vous invite à
procéder autrement : envoyez seulement la recherche à l’autre fenêtre et ce
sera celle-ci qui s’occupera de rechercher les informations sur l’API.

Transfert vers une autre fenêtre

Nous allons ajouter une nouvelle fenêtre à notre application, pour y afficher
les résultats de la météo de la ville.
Créez donc la page MeteoViews.js à la racine de l’application. Dois-je rappeler
les codes de base ?

'use strict' ;
import React, { Component } from 'react'
import {
StyleSheet ,
Image ,
View ,
TouchableHighlight ,
ListView ,
Text
} from 'react-native' ;

Ensuite, un peu de styles :

var styles = StyleSheet.create({

container: {
marginTop: 65
} ,
heading: {
backgroundColor: '#F8F8F8'
} ,
separator: {
height: 1,
backgroundColor: '#DDDDDD'
},
image: {
width : 400,
height : 300
} ,
temp: {
fontSize: 25,
fontWeight: 'bold',
margin: 5,
 color: '#48BBEC'
} ,
city: {
fontSize: 20,
margin: 5,
color: '#656565'
} ,
description: {
fontSize: 18,
margin: 5,
color: '#656565'
}
}) ;

Le cœur de la fenêtre, la classe principale du fichier :

class MeteoView extends Component {

render() {
var meteoData = this.props.meteoData ;
return (
<View style = {styles.container}>
< Image style = {styles.image}
source = { {uri : meteoData.icon} } >
</Image>
<View style = {styles.heading}>
<Text style = {styles.temp}> { meteoData.temp } </Text>
<Text style = {styles.city} > { meteoData.city} </Tex >
<View style = {styles.separator}>
</View>
</View>
<Text style = {styles.description} > { meteoData.description}
</Text>
</View>
) ;
}
}
Et enfin – oui, je l’ai déjà dit, mais ça doit être automatique maintenant –,
l’export du composant :
module.exports = MeteoView ;

Allez-y, enregistrez tout ça et visualisez le résultat.

Lecture des logs et débogage réseau

Ce petit test ne sert à rien si vous avez – et/ou prenez – l’habitude de
regarder les logs de votre application. Cette lecture des logs se fait
directement lors de la compilation du code sur un simulateur ou, sur un
appareil connecté, sur Xcode.
En effet, en compilant l’application, vous devez être tombé sur un log
comme sur la figure 2-6.
Prenez l’habitude, face à ce genre de logs, de faire une petite recherche sur
votre moteur de recherche préféré. Vous allez vous apercevoir qu’il faut
autoriser l’application à se connecter au site web que vous avez spécifié.
C’est donc une sécurité supplémentaire.
Il s’agit juste d’un petit test, mais j’insiste : prenez les bonnes habitudes,
dès maintenant. Testez, déboguez, corrigez par vous-même. Le plus
important, en suivant cet ouvrage, est justement de ne pas suivre le fil de la
lecture, mais de sortir des sentiers battus ! Anticipez le cours, avancez !

Figure 2-6 – Débogage de connexion sur Xcode

Bref, après ce petit rappel, revenons à nos moutons. Pour autoriser le site
OpenWeatherMap, nous allons pouvoir passer par le code pour iOS comme
pour Android. Concernant iOS, nous allons également pouvoir le modifier
via Xcode.

Débogage par le code pour iOS

Ouvrez le fichier Info.plist dans le dossier myApp du dossier iOS à la racine de
l’application. Vous allez y voir une multitude de propriétés dans un format
XML.
Si tout se passe bien, vers la fin, vous allez découvrir une balise nommée
NSAppTransportSecurity :

<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>

Vous l’aurez saisi, on autorise ici la communication avec localhost, soit

l’application elle-même.
Vous vous souvenez ? Quand on a lancé les applications sur Xcode et
Android, nous nous sommes rendu compte que la commande react-native
start devait être exécutée en console avant même de lancer l’application.
Cette dernière lance React sous forme de serveur à l’adresse localhost:8081.
Nous sommes même allés sur le navigateur pour voir ce qu’affichait cette
page.
Nous allons donc faire deux choses : ajouter une nouvelle clé d’autorisation
après le </dict>, juste en dessous du <key>localhost</key> ; puis compléter avec
une autorisation NSAllowsArbitraryLoads qui permet en réalité de charger des
URL sans sécurité HTTPS :
 <key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
<key>openweathermap.org</key>
<dict>
<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
<key>api.openweathermap.org</key>
<dict>
<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>

Débogage par Xcode pour iOS

Rendons-nous dans l’arborescence de fichiers et ajoutons l’exception via
Xcode :
 Figure 2-7 – Ajout d’une excep on via Xcode

Nous allons ajouter un autre élément comme ici, dans Exception Domains, avec
les mêmes valeurs que pour localhost.
Comme nous avons modifié le fichier Info.plist, qui constitue une des
pierres angulaires de votre projet Xcode, vous devez relancer Xcode, ainsi
que l’application.

Débogage par le code pour Android

La configuration d’Android peut se faire aussi bien sur Android Studio – le
logiciel de développement officiel d’Android – que sur n’importe quel
éditeur de code qui existe. C’est une des principales caractéristiques
d’Android : il n’y a pas d’interface de configuration, bien que toute la
compilation se passe naturellement sur Android Studio.
Dans votre éditeur de texte habituel, accédez donc au fichier
AndroidManifest.xml dans le dossier myApp/android/app/src/main/. Vous allez y voir
l’ensemble du manifeste d’Android :

<manifestxmlns:android=http://schemas.android.com/apk/res/android
package="com.myapp"
android:versionCode="1"
android:versionName="1.0">
 <uses-sdk
android:minSdkVersion="16"
android:targetSdkVersion="22" />

<application
android:name=".MainApplication"
android:allowBackup="true"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
android:windowSoftInputMode="adjustResize">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>

</manifest>

Il contient l’ensemble des caractéristiques techniques de votre application

comme son identifiant unique – qui, nous le verrons dans les prochains
chapitres, servira à la publication sur les stores –, sa version, les
permissions demandées par l’application, le SDK utilisé ainsi que son nom,
son icône et la première activité affichée. Ce dernier paramètre est remplacé
par React Native, mais il s’agit d’un paramètre natif très important.
Venons-en aux permissions demandées par l’application. Juste avant la
balise uses-sdk, nous allons ajouter des balises de permissions uses-permission.
Le seul paramètre de ces dernières est leur titre, Android – et son Google
Play – s’occupe du reste. Nous allons donc y rajouter :
<uses-permission android:name="android.permission.INTERNET" />
Voilà, c’est tout !

Finalisa on de l’applica on
Une deuxième erreur se produit :
__nw_connection_get_connected_socket_block_invoke 5 Connection has no connected
handler

Essayez de déboguer ce problème par vous-même. Si vous n’avez pas

trouvé la solution, la voici :
1. Dans le Project navigator, sélectionnez le projet.
2. Allez dans l’onglet Build Settings de la partie Target.
3. Sélectionnez la vue All et Combined.
4. Allez à la section Apple LLVM 8.0 – Custom Compiler Flags.
5. Sélectionnez l’une après l’autre les sous-sections présentes, double-
cliquez sur leur valeur, cela va vous afficher un contenu sous forme de
liste pour chacune.
6. Sélectionnez l’une après l’autre les valeurs en question et cliquez sur le
petit moins en bas de l’infobulle.

Figure 2-8 – Débogage de la connexion via Xcode

Nouvelle build de l’application, voici le rendu :

 Figure 2-9 – Le rendu de l’applica on météo

Si votre application ne fonctionne pas, je vous suggère de la télécharger en

totalité pour vérifier que vous ne vous êtes pas trompé dans la saisie :
http://www.editions-eyrolles.com/dl/0067563.
Comme vous pouvez le constater, elle est… moche. Nous allons nous
occuper de ce petit détail dans les étapes suivantes.

Améliora ons diverses

Dans cette sous-partie, nous allons procéder à quelques améliorations. Suite
à cela, je vous proposerai une petite activité, pour sortir des sentiers battus.

Améliora ons des erreurs

Une des choses que nous n’avons pas encore vue, c’est la gestion des
erreurs. Que faire si l’input de recherche est vide et que nous cliquons
quand même sur le bouton Go ? Que faire si la recherche via l’API
d’OpenWeatherMap est longue ? Que faire si la recherche via l’API
d’OpenWeatherMap ne fonctionne tout simplement pas ?
Erreur sur la zone de recherche
Pour cette première erreur, cela ne devrait pas être trop complexe, mais elle
implique de profonds changements dans le code.
Nous allons tout d’abord ajouter une variable message dans l’état de base de
l’interface MeteoPage de l’application. Vous l’aurez compris, c’est dans le
constructor que cela se passe et nous allons, dans un premier temps, ajouter
une variable vide. On démarre sans erreur, évidemment.
En faisant cela, vous devriez arriver à ce résultat – mais vous n’avez pas
besoin de moi normalement à ce stade de l’ouvrage :

constructor (props) {
super (props);
this.state = {
searchString: 'Troyes' ,
messageString: ''
} ;
}

Ensuite, nous allons permettre l’affichage du petit message dans le render

principal, juste avant la balise fermante <View> :
<Text style={styles.description}> { this.state.messageString } </Text>

Maintenant, la modification se fait dans la méthode onSearchPressed :

if (this.state.searchString != '' )
fetch (
'http://api.openweathermap.org/data/2.5/weather?q=' +
this.state.searchString +
'&unites=metric' +
'&appid=<VOTRE_CLE_API>'
)
.then(response => response.json())
.then(json => this._handleResponse(json))
.catch(error => this.setState({
messageString : 'Une erreur s\'est produite : ' + error
})) ;
 } else {
this.setState({
messageString : 'La zone de recherche est vide'
})
}

Vous l’aurez remarqué, ce code vous donne aussi la solution pour le

message d’erreur de l’API – si l’application n’arrive pas à trouver l’API.
J’arrête de vous aider maintenant et je vous propose ceci : modifiez le code
pour afficher un message « Veuillez patienter » entre le moment où l’on
clique sur Go et le moment où l’on est redirigé vers la page d’affichage de
la météo.

Erreur sur l’API

J’espère que tout s’est bien passé pour vous et que les dernières
modifications ont été un succès – le plus important n’est pas de ne pas avoir
fait d’erreur, mais d’avoir su corriger les bogues.
Si vous avez des problèmes dans le développement, je vous invite
naturellement à consulter votre moteur de recherche préféré. Il y a de
nombreux développeurs, dans de nombreuses communautés, prêts à vous
aider dans votre développement et dans votre débogage.
Avant de terminer ce chapitre, nous allons voir ensemble un petit message
d’erreur qui apparaît si la ville entrée dans la zone de recherche est
introuvable. Autrement dit, si l’API OpenWeatherMap renvoie une erreur.
Cela se passe dans la méthode _handleResponse et il faut détecter si la réponse
est un cod de valeur 502. En effet, essayez par exemple de consulter l’adresse
web suivante : http://api.openweathermap.org/data/2.5/weather?q
=dfgdfg&units=metric&appid=VOTRE_CLE_API.
Dans l’adresse, nous avons mis « dfgdfg » comme nom de ville, qui
n’existe vraisemblablement pas. Ainsi, l’API va vous renvoyer une erreur,
signifiant qu’elle n’a pas pu trouver cette donnée dans ses bases.
Rajoutez donc cela :

_handleResponse (response) {
if (response.cod == '502') {
 this.setState({
messageString : 'Cette ville n \' existe pas !'
})
} else {
console.log(response) ;
var meteoData = {
'icon': 'http://openweathermap.org/img/w/' + response.weather[0].icon
+ '.png',
'main': response.weather[0].main,
'city': response.name,
'description': response.weather[0].description,
'temp' : response.main.temp
} ;
this.props.navigator.push({
title: 'Météo',
component: MeteoView,
passProps: { meteoData : meteoData }
}) ;
}
}

Comme à l’accoutumée, si votre application ne fonctionne pas, je vous

invite à télécharger les fichiers de l’application pour vérifier que vous ne
vous êtes pas trompé dans la saisie : http://www.editions-eyrolles.com/dl/
0067563.

Améliora ons graphiques

D’autres améliorations, notamment graphiques, sont naturellement
possibles à ce stade du développement. J’ai fait le début, je vous laisse faire
le reste, à savoir l’améliorer.

La météo sur cinq jours

Avant de nous arrêter là dans le développement, je vous propose une
dernière activité pour vous affranchir du strict modèle.
Sur la page de visualisation de la météo, rajoutons un petit lien vers une
page où sera présentée la météo des cinq prochains jours. Vous avez déjà
toutes les connaissances requises pour faire ce développement, cela ne
devrait pas être trop problématique.
Bonne nouvelle dans cette nouvelle mission : OpenWeatherMap dispose
d’une API pour avoir l’information des cinq prochains jours sur une ville
donnée – de la même manière que nous l’utilisons jusqu’à maintenant !
Cependant, contrairement à d’habitude, l’affichage des cinq jours ne se fera
pas d’une simple variable, mais à partir d’un tableau. Nous allons donc
apprendre à gérer des listes de données, développement très utile dans des
applications de contenus.
Commençons par le commencement : ajoutons un bouton Météo sur 5 jours
en bas de l’affichage de la météo, après l’affichage de la description de la
météo :

<View style={styles.separator}/>
<View style={styles.heading}>
<TouchableHighlight style={styles.button}
underlayColor='#99d9f4' >
<Text style={styles.buttonText}
onPress={this.onFivePressed.bind(this)}>
Météo sur 5 jours
</Text>
</TouchableHighlight>
</View>

Ce code renvoie donc, lorsque l’on clique dessus, vers une méthode
onFivePressed, avec pour argument this, autrement dit le bouton ; nous
n’avons besoin de rien de plus puisque nous savons déjà sur quelle ville
l’utilisateur a effectué sa recherche.
Travaillons désormais sur le procédé onFivePressed :

onFivePressed(city) {
fetch(
'http://api.openweathermap.org/data/2.5/forecast?q=' +
this.props.meteoData.city +
'&units=metric' +
'&<VOTRE_CLE_API>'
 )
.then(response => response.json())
.then(json => this._handleResponse(json)) ;
}

Dans celui-ci, nous voyons bien l’utilisation d’une autre API

d’OpenWeatherMap. Vous vous en rendrez compte très rapidement, dans le
développement d’application mobile – avec React Native comme avec les
autres – les API sont monnaie courante : elles permettent d’accéder à des
données stockées en ligne.
De la même manière que pour l’affichage unique de la météo, nous
envoyons les données récupérées via l’API à une autre méthode
_handleResponse. Dans cette méthode, nous allons procéder de la même façon
que précédemment. Voyons cela :

_handleResponse(response) {
var meteoFiveData = {
'city': response.city.name,
'list' : response.list
} ;
this.props.navigator.push({
title: 'Météo sur 5 jours sur '
+ meteoFiveData.city,
component:MeteoFiveView,
passProps: { meteoFiveData:meteoFiveData}
}) ;
}

Ça commence à devenir intéressant ! Comme vous pouvez le constater,

dans meteoFiveData nous avons une liste météorologique. Il va donc falloir
gérer cette nouvelle méthode de transmission des données dans un fichier
vierge qui servira à afficher la vue des cinq jours.
Avant de créer le fichier en question, n’oublions pas de faire un require de ce
dernier dans l’application. Pour éviter toute entourloupe, je vais l’ajouter
dans le fichier MeteoView.js. Ce qui donne :
var MeteoFiveView = require('./MeteoFiveView') ;
Ne tardons plus, créons le fichier MeteoFiveView.js. Je ne vous ferai pas
l’affront de réitérer les premières lignes de codes, vous les connaissez
désormais sur le bout des doigts.
Le render va donc être une liste des températures dans les cinq prochains
jours. Les listes se font via des éléments ListView de React Native. L’élément
Listview attend deux paramètres dataSource et renderRow, nous allons le voir.

Dans l’ordre, reprenons le constructor. Dans ce dernier, nous allons élaborer

une variable de type DataSource qui contiendra, à terme, l’ensemble des
données de notre tableau :

constructor(props) {
super(props) ;
var dataSource = new ListView.DataSource(
{ rowHasChanged: (r1,r2)=>r1!==r2}
) ;
this.state = {
dataSource: dataSource.cloneWithRows(this.props. meteoFiveData.list)
} ;
}

Attaquons ensuite directement avec la méthode render :

render() {
var meteoFiveData = this.props.meteoFiveData ;
return(
<ListView
dataSource={this.state.dataSource}
renderRow={this.renderRow.bind(this)} />
) ;
}

Comme prévu, nous avons bien les deux paramètres, à une petite différence
près ici encore : le renderRow récupère son affichage via une méthode. Cela va
nous permettre, par la suite, de faire des modifications sur cet affichage,
d’ajouter de petites fioritures, etc.
Voyons donc sans plus tarder la méthode renderRow, qui prend pour
paramètres directs les données de la liste :
 renderRow(rowData, sectionID, rowID) {
return(
<TouchableHighlight
underlayColor='#dddddd'>
<View>
<Text style={styles.temp}>
Le {rowData.dt_txt}
</Text>
<Text style={styles.description}>
Météo {rowData.weather['0'].description}
</Text>
<Text style={styles.temp}>
Température : {rowData.main.temp}
</Text>
<View style={styles.separator}> </View>
</View>
</TouchableHighlight>
) ;
}

Dans ce code, la liste affiche le jour, la description ainsi que la température.

Comme vous pouvez le constater, d’autres variables sont à notre
disposition, notamment le numéro de la ligne. Vous pourrez en définitive les
utiliser pour, par exemple, colorer les lignes paires différemment des lignes
impaires.
Petit rendu des deux pages en question en figures 2-10 et 2-11.
Figure 2-10 – Affichage de la météo avec le bouton Météo sur cinq jours

Figure 2-11 – Fenêtre d’affichage des cinq jours de météo

Comme précédemment, si votre application ne fonctionne pas, je vous
invite à télécharger les fichiers de l’application pour vérifier que vous ne
vous êtes pas trompé dans la saisie : http://www.editions-eyrolles.com/dl/
0067563.
 3
U lisez les ressources de React
Na ve

U lisa on de la géolocalisa on
Nous avons désormais toutes les connaissances nécessaires et
fondamentales pour affronter le développement d’application mobile avec
React Native. Allons maintenant un peu plus loin et parlons des API, des
composants et des plug-ins.
Cela étant dit, nous n’évoquerons pas ici les API de la même manière que
dans le chapitre précédent – à savoir mises à disposition par des sites
Internet –, mais des API fournies directement par React Native dans le
cadre du développement de notre application mobile.
En effet, c’est l’un des avantages de React Native. Il propose un
environnement de développement complet, adapté et des outils créés pour
aider à concevoir son projet le plus efficacement possible. De nombreux
plug-ins sont également disponibles, offerts par la communauté open source
de ce framework, pour utiliser les fonctionnalités de l’appareil sur lequel
l’application est installée.
Vous allez pouvoir utiliser la ou les caméras de l’appareil, la
géolocalisation, l’accéléromètre et bien d’autres choses encore. Et
justement, avant de voir la théorie sur ces outils, voyons un cas pratique.

Développement de la géolocalisa on
Dans un premier temps, nous allons étudier le principe et le développement
de la géolocalisation sur notre application. De nos jours, la géolocalisation
des utilisateurs constitue l’une des forces majeures des applications
mobiles.
Le consommateur, mis au centre de l’attention, a ainsi accès à différentes
informations sur ce qui se passe autour de lui. L’éditeur d’applications, lui,
s’enrichit progressivement de données très importantes, qu’il pourra par la
suite utiliser dans le cadre de campagnes marketing et publicitaires. Nous
aurons l’occasion de le voir dans les prochains chapitres.
Une fois l’étude de la géolocalisation faite, nous passerons rapidement à
l’ensemble des fonctionnalités utilisables avec une application React
Native, car vous aurez les armes pour les comprendre et les utiliser.
Si vous avez déjà des notions de géolocalisation en mode web, cela devrait
être très simple, car cette API utilise celle du Web. Vous pourrez en
apprendre plus sur le site Developer de Mozilla :
https://developer.mozilla.org/en-US/docs/Web/API/Geolocation.
Pour cette utilisation de la fonction de géolocalisation, nous allons
reprendre notre fabuleuse application météorologique.
Le but de l’exercice va être simple : ajouter un bouton Géolocalisation en
page d’accueil, ce qui permettra, plutôt que de taper le nom d’une ville et de
cliquer sur Go, d’accéder directement à la météo de la ville où est situé
l’utilisateur.
Allons-y, commençons. Comme je vous l’ai dit, cela va se passer sur la
page d’accueil. Rendez-vous sur MeteoPage.js. Nous avons le champ de
recherche et le bouton Go à sa droite, ajoutons un bouton Géolocalisation
en dessous.
Dans le render du fichier MeteoPage.js, il va falloir mettre ce nouveau bouton
juste au-dessus de la base <Text> du message :

<View style={styles.flowRight}>
<TouchableHighlight style={styles.button}
underlayColor='#99d9f4'>
<Text style={styles.buttonText}
onPress={this.onGeolocationPressed.bind(this)}>
Géolocalisation
</Text>
</TouchableHighlight>
 </View>

Ce bouton appelle directement la méthode onGeolocationPressed. Comme

d’habitude, le .bind(this) va créer une nouvelle fonction à partir de la
fonction mère qui aura pour contexte this.
Cette méthode va se charger de récupérer la localisation de l’utilisateur
grâce à la méthode navigator.geolocation.getCurrentPosition. Cette méthode,
nous allons le voir, récupère la localisation de l’utilisateur via un paramètre
location que l’on peut ensuite utiliser dans une introduction, dans plusieurs
lignes de codes, entre accolades ou encore envoyer dans une nouvelle
fenêtre. Dans notre cas, nous allons nous contenter d’utiliser cette
localisation dans un fetch pour récupérer la météo en question auprès
d’OpenWeatherMap. Une fois ceci fait, nous redirigerons l’utilisateur sur
une autre fenêtre, en passant par le _handleResponse.
Regardons à présent ce code :

onGeolocationPressed() {
navigator.geolocation.getCurrentPosition(
location => {
var search = location.coords.latitude + ', ' +
location.coords.longitude ;
fetch(
'http://api.openweathermap.org/data/2.5/weather?lat=' +
location.coords.latitude +
'&lon=' +
location.coords.longitude +
'&units=metric' +
'&appid=<VOTRE_CLE_API>')
.then(response => response.json())
.then(json => this._handleResponse(json))
.catch(error =>
this.setState({
messageString : 'Une erreur s\'est produite : ' + error
})) ;
} ,
error => {
this.setState ({
 message: 'Une erreur s\'est produite lors de l\'obtention de la
localisation : ' + error
}) ;
}
) ;
}

Comme vous pouvez le constater, la requête API n’est pas la même. Nous
devons l’adapter, sachant que la localisation de l’utilisateur sera connue via
sa latitude et sa longitude. OpenWeatherMap prend très bien en charge cette
différence au travers d’autres paramètres GET disponibles. Vous pourrez en
trouver encore d’autres sur le site de la documentation d’OpenWeatherMap.
En revanche, nous n’avons pas besoin de modifier la méthode _handleResponse
puisque la réponse sera de la même forme. En effet, une fois la météo
récupérée, un simple transfert convient parfaitement.

Configura on des autorisa ons

Maintenant que le développement est fini, il va falloir configurer notre
application pour l’autoriser à utiliser la géolocalisation du téléphone. Cela
se passe aussi bien sur Xcode pour iOS que sur Android Studio (ou votre
éditeur de texte classique) pour Android.

Configura on sur Xcode

Voyons dans un premier temps cette configuration sur iOS, en passant par le
logiciel de développement d’Apple, Xcode.
Nous l’avons déjà fait, nous allons devoir modifier le fichier Info.plist.
Nous l’avons vu, il existe deux manières d’y accéder, je vous laisse y
retourner.
Dans ce fichier, nous allons ajouter – ou compléter si elle existe déjà – la
clé Privacy – Location When In Use Usage Description et lui mettre la String
suivante : « myApp aimerait utiliser votre emplacement pour afficher la
météo ».

Figure 3-1 – Configurer l’autorisa on de la localisa on

Maintenant que cela est fait, il ne vous reste plus qu’à faire la build de
l’application. Cela ne devrait pas vous poser de problème :

Figure 3-2 – Nouvel accueil de l’applica on

Lorsque vous cliquez sur le bouton Géolocalisation nouvellement ajouté à

l’application, celle-ci vous demande votre autorisation pour accéder aux
fameuses données de localisation :
 Figure 3-3 – Autoriser la localisa on du téléphone

Si vous acceptez, l’application prend en compte l’information, poursuit ses

traitements – ceux de la méthode onGeolocationPressed – et vous redirige bien
vers la météo de votre ville :
 Figure 3-4 – Affichage de la météo géolocalisée

Ici, rien d’exceptionnel, la vue météo est classique.

Petite précision par ailleurs : non, je ne suis pas à San Francisco, bien que
l’envie ne manque pas, mais Xcode est configuré comme cela chez moi.
Allez dans les paramètres de Xcode dans le bandeau en bas de l’interface :

Figure 3-5 – Bouton de configura on de la simula on de la localisa on

Choisissez San Francisco, la classe !

Bien évidemment, vous pouvez aussi demander à ne pas simuler la
localisation.
 Figure 3-6 – Configura on de la simula on de la localisa on

Cette autorisation de l’utilisation de la géolocalisation est relativement

commune, à la différence près que, comme l’utilisateur est garant de la
confidentialité de ses données, de l’usage de l’application et de son
smartphone, iOS affiche automatiquement un message pour lui demander
son autorisation expresse.
Si d’aventure vous en veniez à requérir l’usage de la caméra, du son ou de
quoi que ce soit qui enregistre l’usage de l’utilisateur, des messages
similaires l’en informeront.
En revanche, nous l’avons vu pour l’accès à Internet et nous le verrons dans
les prochains chapitres dans un autre cas pratique, il peut y avoir d’autres
autorisations qui ne nécessitent pas d’interaction avec l’utilisateur. Par
exemple, à l’instar des cookies sur navigateur, votre application peut
« enregistrer » certaines données pour les retrouver par la suite. Une
connexion utilisateur qui continue à la fermeture de l’application ? Des
données utilisateurs qui persistent le temps de trouver une connexion à
Internet pour les envoyer sur un serveur en ligne ? Tout cela nécessite des
configurations similaires, mais en aucun cas ne demande son autorisation à
l’utilisateur, car cela ne rentre pas dans le cadre de sa vie privée.

Configura on sur Android Studio

La configuration d’Android peut se faire, je vous l’ai dit, aussi bien sur
Android Studio – le logiciel de développement officiel d’Android – que sur
n’importe quel éditeur de code qui existe. C’est une des principales
caractéristiques d’Android : il n’y a pas d’interface de configuration, bien
que toute la compilation se passe naturellement sur Android Studio.
Dans votre éditeur de code préféré, ouvrez de nouveau le fichier
AndroidManifest.xml. Nous y avons déjà la permission pour l’accès à Internet :

<uses-permission android:name="android.permission.INTERNET" />

Nous allons y ajouter une permission pour l’accès à la localisation. Enfin,

deux. Car, depuis les dernières versions d’Android, il est possible de
demander l’autorisation pour l’accès à la localisation par le GPS – système
classique – ou par la connexion 3G et/ou Wi-Fi.
Nous allons donc ajouter les deux permissions suivantes en dessous de la
première :

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

Comme toujours, si votre application ne fonctionne pas, je vous invite à

télécharger les fichiers de l’application pour vérifier que vous ne vous êtes
pas trompé dans la saisie : http://www.editions-eyrolles.com/dl/0067563.

Les API et les composants

Comme je le disais en introduction, énormément de ressources sont à votre
disposition quand vous développez. Parmi elles, les API et les Components
qui sont fournis par l’équipe de développement de React Native. Ce sont
donc des ressources officielles comparées aux plug-ins qui, eux, sont
fournis de manière non officielle en open source par la communauté de
développeurs de React Native.

Les API
Je vous propose de vous rendre directement sur le site web de React Native
à la page https://facebook.github.io/react-native/docs/getting-started.html.
Sur cette dernière, dans le menu de gauche, vous découvrirez l’ensemble
des API à votre disposition (voir figure 3-7).
 image
Figure 3-7 – Liste des API de React Na ve

Dans ces pages (en anglais évidemment), vous trouverez des exemples pour
chacune des API, leurs paramètres obligatoires et facultatifs, leurs options,
les retours, la façon de coder, etc.
Ce site n’est autre que le couteau suisse du développeur que vous êtes
devenu. Et ça tombe bien puisque, si vous en êtes arrivé à ce stade de
l’ouvrage, je suis persuadé que vous saurez très bien vous y prendre.
Attention : souvenez-vous qu’à un moment j’évoquais les fonctionnalités
(API et Components) qui n’étaient accessibles qu’à certaines plates-formes.
Cela n’a pas été le cas dans cet ouvrage, pour permettre à tous les lecteurs
de suivre le fil du développement. C’est néanmoins totalement possible de
s’y trouver confronté.
Certaines API ont également des développements spécifiques sur chacune
des plates-formes dont il faudra tenir compte – donc il faut détecter la plate-
forme où l’on exécute l’application et lancer le script correspondant.

Les composants
Vous avez également dû les remarquer sur le site officiel de React Native,
dans le menu de gauche : les Components (figure 3-8).
Là encore, même chose que pour les API. Chaque page vous documente sur
la façon dont chaque composant se développe, avec leurs rendus et les
différentes méthodes à appeler auparavant.
En effet, tandis que les API sont des codes de type back pour le
fonctionnement de l’application, les composants sont des codes de type
front pour le rendu de l’application, autrement dit des codes pour les
méthodes render.
Une fois de plus, certains composants sont disponibles sur quelques plates-
formes uniquement.
Méfiez-vous, quand vous ajoutez un composant à votre rendu, une des
erreurs les plus courantes est d’oublier d’inclure le composant en question
dans votre code – via un import par exemple.
À ce sujet, sachez que la dernière partie du dernier chapitre – les annexes –
sera consacrée aux erreurs courantes sur React Native.
Vous voilà désormais paré !

image
Figure 3-8 – Liste des composants de React Na ve

Les plug-ins
Si les API et les Components sont des ressources officielles mises à
disposition par l’équipe React Native chez Facebook, la communauté open
source a également joué son rôle dans le développement du framework.
Elle a notamment participé à l’élaboration de ce que l’on peut appeler des
plug-ins. À la manière des plug-ins dans des CMS comme WordPress ou
des bundles dans des frameworks web comme Symfony, ils apportent un
plus non négligeable à notre développement.
Quand vous cherchez à développer une fonctionnalité, ayez donc ce réflexe
et faites une recherche dans votre navigateur préféré. Vous découvrirez
peut-être un plug-in dont la page officielle – créée par son développeur en
open source – vous listera les étapes à suivre pour intégrer le plug-in. Ce
sont généralement les mêmes étapes que pour les API et les Components, à
la différence qu’il faudra importer les fichiers du plug-in dans l’application,
alors que ceux des API et Components sont déjà importés par React Native
lui-même.
Trêve de discussion, prenons un cas concret.

Exemple concret
Imaginons que, pour les besoins d’une utilisation hors ligne de votre
application, vous ayez besoin d’enregistrer l’ensemble des données que
génère l’utilisateur sur l’application avant de les retransmettre à votre
serveur – pour les enregistrer dans la base de données – dès que la
connexion du téléphone est revenue.
Vous allez donc vous renseigner sur une API qui permet de gérer un
stockage des données sur l’application. Encore une fois, les API permettent
d’ajouter des fonctionnalités au backend de votre application (autrement dit
aux algorithmes), tandis que les Components permettent d’en ajouter au
frontend, autrement dit à l’interface. Ici, nous sommes donc bien sur des
fonctionnalités d’API.
Après être allé naturellement sur le site de React Native, vous êtes arrivé
sur l’AsyncStorage. Néanmoins, cette API ne vous convient pas, elle est
trop restrictive et ne permet pas de réaliser tout ce dont vous avez besoin –
oui, vous ou votre client êtes exigeant.
Vous allez ainsi vous mettre en quête d’un plug-in. Une petite exploration
sur « react native storage » dans votre moteur de recherche habituel et vous
découvrez parmi les premiers résultats : https://github.com/sunnylqm/react-
native-storage.
Disponible sur le site de GitHub – où vous trouverez 95 % des plug-ins
existants, tous CMS/frameworks/bibliothèques confondus, cet espace étant
le plus communément utilisé par les développeurs comme vous –, il vous
explique, sur sa page principale, comment l’installer (voir la figure 3-9).
Vous l’aurez compris, dès la première lecture du fichier ReadMe de ce plug-in,
vous allez devoir effectuer un certain nombre d’étapes pour parvenir à vos
fins.
Vous allez devoir installer le plug-in avec npm pour télécharger les fichiers du
plug-in. Celui-ci, que nous avons installé au début de l’ouvrage avec
l’ensemble des outils de React Native, ne devrait donc pas être un frein.
Ensuite, vous allez devoir importer le plug-in – comme nous le ferions pour
les API et les Components – avec un import X from Y ;
Dans le cas présent, ce plug-in utilise l’API que nous avons vu plus haut sur
le site de React Native pour l’améliorer et en compléter les fonctionnalités,
nous allons donc devoir importer également cette API.
Puis vous utilisez le plug-in, d’une manière ou d’une autre. Généralement,
les plug-ins proposent plusieurs paramètres possibles ; le fichier ReadMe vous
les expliquera un à un et vous permettra d’utiliser le plug-in du mieux
possible.

image
Figure 3-9 – Les explica ons du plug-in sur GitHub
Développez des plug-ins à votre tour
Si vous en êtes arrivé à ce stade de l’ouvrage, vous faites donc bel et bien
partie de la communauté des développeurs de React Native. À votre tour, si
vous constatez que vous développez une fonctionnalité qui n’est pas encore
disponible sous forme de plug-in, de créer le vôtre.
Il y a différents avantages notables à cette idée :
• De par les commentaires et les aides des autres développeurs, vous
améliorerez votre plug-in et pourrez ainsi progresser dans le domaine.
• Si votre plug-in devient connu, vous gagnerez en notoriété.
• Si vous gagnez en notoriété, vous pourrez facilement ajouter cette petite
note à votre CV, car cela constitue un point très important dans certaines
sociétés qui prônent l’open source.
• Si vous n’êtes pas fan de l’open source dites-vous, qu’à terme, vous
gagnerez de nombreuses heures de développement grâce à de talentueux
développeurs qui rendent leurs sources publiques. En retour, fournir
certaines fonctionnalités que vous avez développées open source semble
être une bonne action.
Voilà, à vous de jouer !
 4
Approfondir la ques on

La naviga on avec Android et iOS

Comme nous l’avons vu lors des premières compilations de votre
application mobile, la différence entre Android et iOS est cruciale dans le
développement. React Native prend en charge cette différence. En effet,
outre le fait que quelques fonctionnalités ne se comportent pas de la même
manière sur Android et sur iOS, certaines ne sont purement et simplement
pas disponibles sur l’une ou l’autre.
Précédemment, lorsque nous avons fait la compilation de l’application sur
Android, nous nous sommes contentés de dupliquer le fichier index.ios.js
dans le fichier index.android.js. Nous allons désormais faire en sorte que ces
deux fichiers utilisent le même fichier, de manière à ce que le
développement soit optimisé.
Dans ce chapitre, nous allons également introduire la notion de navigation
dans l’application. Alors que nous nous sommes satisfaits jusqu’à présent
de passer d’un fichier à un autre, nous allons voir une autre possibilité de
navigation, beaucoup plus souple.

La différence Android et iOS

Pour être le plus optimisé possible, React Native prévoit dès le départ deux
fichiers, l’un index.android.js et l’autre index.ios.js. Trois possibilités s’offrent
donc à vous :
• Rester sur une fonctionnalité extrêmement simple telle que nous avons
conçu l’application météorologique. Cette dernière n’utilise que la
géolocalisation – fonctionnalité compatible à la fois sur iOS et Android
– et un affichage très simple. Dès lors, inutile de faire deux applications
 distinctes ou même de développer les fonctionnalités différemment
entre iOS et Android.
• Utiliser la même interface entre iOS et Android, comme nous l’avons
fait en dupliquant le fichier index.ios.js dans index.android.js, puis
proposer, au-delà de cette première interface, des fonctionnalités parfois
particulières selon le système.
• Utiliser deux interfaces séparées, c’est-à-dire deux fichiers index
différents entre Android et iOS. Ces interfaces s’adaptent en fonction du
système d’exploitation et font en sorte que l’application s’ajuste à
100 % au support.
Si vous prenez la troisième option, le travail sera de plus grande ampleur –
et perdra un peu l’intérêt de React Native sur cet aspect – mais vous aurez
une interface extrêmement puissante !
Si vous prenez la deuxième option, vous utiliserez toute la puissance de
React Native, comme nous l’avons fait.
Néanmoins, nous nous sommes contentés de dupliquer le fichier Android et
iOS. Nous allons voir comment éviter la duplication de code.

Un fichier commun pour l’applica on

Pour l’exemple, nous allons recréer une application. Cela vous permettra de
vous exercer en modifiant l’application météo avec les nouvelles
connaissances que vous avez acquises. Mettez donc votre application myApp
de côté, puis recréez une application du même nom si vous le souhaitez. Je
ne prends pas la peine de vous rappeler les lignes de commandes, vous vous
en souvenez certainement. Dans le cas contraire, n’hésitez pas à retourner
aux premiers chapitres pour une piqûre de rappel.
Dans cette nouvelle application, créons donc un fichier App.js à la racine de
l’application.

Naviga on fluide entre les pages

Ensuite, nous allons constituer un dossier Pages à la racine de notre
application. Il contiendra l’ensemble des pages de notre application, comme
son nom l’indique.
Dans ce dossier Pages, nous allons commencer par créer un fichier
PageHome.js.
Copiez-y l’ensemble de votre fichier index.android.js ou index.ios.js – ils
doivent être identiques, à l’exception de la dernière ligne
ReactNative.AppRegistry :

import React, { Component } from 'react';

import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';

export class myApp extends Component {

render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
</Text>
</View>
);
}
}

const styles = StyleSheet.create({

container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
 },
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});

Reprenons ce code. Il importe les différentes bibliothèques nécessaires à

l’exécution du code. Il crée et exporte en même temps une classe myApp qui
étend le composant Component, précédemment importé de React. Enfin, il
ajoute quelques styles dans une constante éponyme.
Un petit changement va néanmoins être nécessaire : renommez la classe de
myApp en PageHome. C’est le nom de la page, vous pourrez par la suite créer de
nouvelles pages avec différents noms.
Retournons dans le fichier App.js. Ici, nous allons introduire le principe de la
navigation puis importer l’ensemble des pages – pour l’instant une seule –
et créer une constance de navigation pour pouvoir se balader par la suite
dans notre application.
Dans ce fichier, nous allons coder ceci :

'use strict';

import React, { Component } from 'react';

import { StackNavigator } from 'react-navigation';
import PageHome from './Pages/PageHome';

// Container react
const App = StackNavigator({
Home: { screen : PageHome },

},{});
 export default App;

De nouvelles explications s’imposent. Nous venons d’importer les

composants de base de react, jusque-là c’est classique. Ensuite, nous avons
fait appel à la classe SlackNavigator de react-navigation, c’est le module de
navigation.
Puis nous avons importé la classe PageHome du fichier PageHome dans le dossier
Pages.

Vous l’aurez compris, le fameux module de navigation issu de React

Navigation, nous allons devoir l’installer. C’est en réalité un plug-in très
connu qui est disponible en open source. Vous pouvez le découvrir sur sa
page GitHub à l’adresse https://github.com/react-community/react-
navigation, mais également sur son site officiel à l’adresse
https://reactnavigation.org.
Comme vous pouvez le voir sur le site officiel, il s’agit d’un plug-in très
complet et très bien documenté. Vous constaterez également sur GitHub que
près de 150 contributeurs ont participé à plus de 350 versions depuis la
création du plug-in en open source. C’est dire à quel point ce plug-in est
très intéressant à découvrir.
Regardez maintenant le contenu du fichier ReadMe.txt, présenté plus bas sur
la page d’accueil du plug-in sur GitHub :
 Figure 4-1 – Les explica ons du plug-in React Naviga on sur GitHub

Après une petite explication sur la raison d’être du plug-in, une description
nous expose les différentes manières de l’installer sur une application React
Native. Je vous invite à utiliser la version npm dont nous avons plus
l’habitude.
Retournez dans votre invite de commande et copiez la commande suivante :
npm install –save react-navigation

Après une installation relativement courte et quelques dépendances

téléchargées, le plug-in est enfin installé. Le script de la page HomePage
devrait être fonctionnel.
Pour finir, dans les fichiers index.ios.js et index.android.js, nous allons devoir
importer la classe App et l’utiliser pour l’application :
 import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('my App', () => App);

Voilà qui est fait. L’enregistrement de l’application a bien lieu avec

AppRegistry et la classe App est utilisée en premier pour l’application. La toute
première page de la navigation servant de page d’accueil pour le plug-in,
c’est naturellement sur la page HomePage que l’utilisateur sera dirigé en
premier lieu.
Faites une build de l’application pour le découvrir :

Figure 4-2 – La build de l’applica on avec naviga on

Nous avons fait un petit retour en arrière puisque nous sommes revenus à
l’application de base, mais nous allons rapidement apporter des
modifications à notre application de météo pour utiliser toute la puissance
de ce plug-in.
Avant cela, si l’application ne fonctionne pas, je vous invite à télécharger
les fichiers de l’application pour vérifier que vous ne vous êtes pas trompé
dans la saisie : http://www.editions-eyrolles.com/dl/0067563.

La naviga on sur l’applica on de météorologie

Retournons maintenant sur notre application météorologique.
Comme nous l’avons fait sur notre application de démonstration de la
navigation, nous allons créer un fichier myApp.js, créer un dossier Pages et y
déplacer les trois fichiers de pages de notre application.
Pour l’exemple, ajoutons-y le préfixe Page devant chacun d’entre eux –
autant sur le nom du fichier que sur ceux de la classe principale à l’intérieur.
Dans le fichier App.js, que vous pouvez reprendre de nos essais de
navigation, changez l’import du fichier de page par nos trois pages de
navigation :

import PageMeteoPage from './Pages/PageMeteoPage';

import PageMeteoView from './Pages/PageMeteoView';
import PageMeteoFiveView from './Pages/PageMeteoFiveView';

De même dans le StackNavigator, vous allez devoir modifier les pages

proposées :

const App = StackNavigator({

MeteoPage: { screen : PageMeteoPage },
MeteoView: { screen : PageMeteoView },
MeteoFiveView: { screen : PageMeteoFiveView }
},{});

L’ordre de ces pages est important. La première sera celle qui sera affichée
au lancement de l’application.
De même, n’oubliez pas d’installer sur cette application également le plug-
in React Navigation.
Dans les fichiers index.android.js et index.ios.js, nous pouvons reprendre les
mêmes développements que précédemment.
Enfin, dans les divers fichiers de l’application, nous allons devoir définir les
méthodes de navigation entre les différentes pages. Pour cela c’est très
simple et je vous laisse le faire de votre côté. Utilisez la méthode navigate du
paramètre navigation de la variable props :
this.props.navigation.navigate(MeteoPage, {meteoData: meteoData});

De cette manière, vous pourrez passer facilement d’une page à l’autre sans
aucun souci.
Je ne l’ai pas précisé, mais le plug-in de navigation permet justement de
simplifier celle-ci. Après la préparation du terrain – ce que nous venons de
faire –, il améliore et assouplit le transfert de l’utilisateur entre les fenêtres.
De cette manière, vous allez pouvoir supprimer l’ensemble des variables de
require entre les différentes pages de l’application.

Je vous laisse continuer l’ensemble des travaux sur l’application pour la

rendre encore plus performante qu’elle ne l’était jusqu’à présent.

L’affichage avec flexbox

Tandis que la navigation a permis une amélioration des performances en
backend, nous allons désormais étudier une amélioration en frontend : les
flexbox. Cette technologie, utilisée par React Native, permet de structurer
votre rendu d’application en colonne ou en ligne.

Affichage en ligne
L’affichage flex permet de gérer la ligne selon des dimensions en hauteur et
en largeur, comme l’exemple suivant :

<View style={{flex: 1, flexDirection: 'row'}}>

<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>
 Figure 4-3 – Affichage des flexbox en ligne

Ici, nous avons donc trois carrés de 50 par 50, les uns à côté des autres,
alignés dans la largeur. Nous pouvons également gérer la largeur par des
flex eux-mêmes de la façon suivante :

<View style={{flex: 1, flexDirection: 'row'}}>

<View style={{flex: 1, alignItems:'flex-start', backgroundColor: 'powderblue
}}>Start</View>
<View style={{flex: 1, alignItems:'center', backgroundColor: 'skyblue
}}>Center</View>
<View style={{flex: 1, alignItems:'flex-end', backgroundColor: 'steelblue
}}>End</View>
</View>

Dans cet affichage, nous divisons la largeur de l’application par trois et

nous diffusons chaque view dans chaque division.
Ces deux manières de faire présentent naturellement deux rendus différents,
elles constituent toutefois la puissance de flexbox.

Affichage en colonne
L’affichage flex permet de gérer la colonne selon des dimensions en hauteur
et en largeur, comme l’exemple suivant :

<View style={{flex: 1, flexDirection: colomn, justifyContent: 'space-between',}}>

<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
 <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>

Figure 4-4 – Affichage des flexbox en colonne

Ici, nous avons ajouté un nouveau paramètre : justifyContent: 'space-between'

qui permet de laisser le maximum d’espace possible entre les blocs.
Un dernier paramètre à voir est alignItems qui, comme son nom l’indique,
permet d’aligner les éléments dans les view soit à gauche, soit à droite ou
encore au centre.

À vous de jouer
Voilà, nous arrivons à la fin de la partie concernant React Native à
proprement parler.
Dans la prochaine partie, nous verrons l’ensemble des points concernant le
marketing mobile. Enfin, nous verrons comment créer un compte Apple
Developer pour mettre son application iOS en ligne, ainsi qu’un compte
Google Developer pour mettre son application Android en ligne.
Je vous laisse vous amuser un peu avec l’actuelle application météo.

Contribuez !
Sachez que le site officiel de React Native ainsi que l’ensemble des
ressources qu’il contient a été rendu open source par Facebook.
À vous de contribuer à loisir à toutes ces ressources.

Le showcase de React Na ve
Petite anecdote intéressante : vous pourrez découvrir, sur le site de React
Native, une page concernant le showcase : https://facebook.github.io/react-
native/showcase.html.
Cette page liste l’ensemble des applications qui ont été conçues sous React
Native. Elles ont été réalisées par différentes sociétés et ces dernières ont
rendu public le choix de la technologie utilisée – en l’occurrence React
Native. Comme je vous le disais en introduction, React Native a pris
énormément d’ampleur, au point que certains géants high-tech l’ont choisi
pour développer leurs applications.
Parmi elles, nous retrouverons sans surprise Facebook, avec ses
applications et celles de ses filiales, comme Instagram. Nous reconnaîtrons
également Airbnb ou encore SoundCloud avec son application Pulse.
Sur cette ligne, il n’y a évidemment que les applications dont les éditeurs
ont annoncé publiquement le choix de React Native. Bien d’autres
applications sont conçues sous ce framework.
D’ailleurs, sous chaque application, vous pourrez découvrir un lien vers
l’annonce en question – qu’elle vienne d’un blog ou d’une autre source
officielle.
5
Stratégies autour du mobile
Communication et marketing pour la visibilité

Suite au développement de votre application, vous (le développeur) ou

votre équipe marketing allez être amenés à publier votre application sur les
stores et, surtout, à communiquer autour de cette dernière pour qu’elle soit
téléchargée.

Si cette étape peut paraître anodine, elle est en fait cruciale pour le succès
de votre application. Dans cette partie de l’ouvrage, nous allons voir tout ce
qui a trait à la publication – de la création de votre compte Apple
Developer et Google Developer jusqu’à la maîtrise des fiches dans les
magasins d’applications –, à la communication, au marketing et surtout à la
rentabilité de votre projet.

Bien plus qu’auparavant, se faire une place dans le cœur des mobinautes
relève d’un travail de grande envergure sur les stores. Cela demande aussi
une présence solide sur les réseaux sociaux et requiert surtout un choix
stratégique de rentabilité. Car si l’argent ne rentre pas, vous ne pourrez pas
mener de campagnes marketing ; sans marketing, pas de visibilité, sans
visibilité, pas de téléchargement et d’achat sur votre application, et on
tourne sans fin dans les abysses des stores.

Mais ne paniquons pas. Cette guerre, vous l’avez probablement déjà menée
sur Internet, via un site. Bien que l’approche soit foncièrement différente
dans cet autre secteur technologique, avec des acteurs et des moyens
différents, l’idée reste la même : se faire une place sur l’écran d’accueil des
smartphones et y rester !

Publication sur les stores : l’envers du décor

En tant qu’utilisateur du smartphone, vous êtes probablement habitué à
aller voir sur l’App Store ou Google Play si un service ou une plate-forme
connue est d’ores et déjà disponible. Si c’est le cas, vous téléchargez
l’application, sinon vous vous contenterez d’attendre que l’équipe de
développement de la société éditrice la crée et la promeuve.

Dans ce cas de figure, la société éditrice a tout gagné. Vous utilisez déjà sa
plate-forme, probablement via un site web, et avez juste envie de pouvoir
l’utiliser sur votre smartphone ou votre tablette tandis que vous n’êtes plus
devant l’écran de votre ordinateur. Ici, pas de marketing, peut-être de la
communication – pour mettre en avant une application mobile.
L’application va être téléchargée, gratuitement ou non, et va probablement
rester au moins un moment sur votre écran d’accueil.

Maintenant, imaginez que vous recherchiez non pas une application en

particulier, mais un service. Votre parcours sera très différent et, surtout, les
éditeurs auront un rôle à jouer dans cette découverte.

Pour mieux comprendre ce parcours et les perches tendues par les éditeurs
pour vous amener sur leur application, évoquons un peu les chiffres
d’utilisations et d’usages.

Quelques chiffres de téléchargement

Comme vous le savez probablement, chaque smartphone ou tablette vendu

donne accès à un magasin d’applications. Sur Android, il s’agit de Google
Play, sur iOS, il s’agit de l’App Store. Ils donnent respectivement accès à
plus de 2,8 millions et plus de 2,2 millions d’applications mobiles. Et
depuis leur création, ces stores d’applications ont comptabilisé plus de 300
milliards de téléchargements cumulés. Ces chiffres pharaoniques, qui
donnent bien souvent le tournis aux éditeurs, révèlent l’envers du décor : si
vous voulez que votre application soit téléchargée, il va falloir se faire une
place au milieu de vos concurrents. À moins que vous ne soyez sur un
marché naissant où les applications concurrentes se compteront
probablement par dizaines voire par centaines entre ces deux stores.

Quelques chiffres sur les applications

Après le téléchargement des applications, il est temps de parler des chiffres
concernant la rétention des applications. Sachez qu’après avoir téléchargé
une application, 59 % des utilisateurs ne l’utilisent qu’une seule fois ! Et
près de 25 % ne l’utilisent même jamais. Si l’application n’a pas été
téléchargée depuis la plate-forme de l’éditeur, le risque de perte de
confiance est donc énorme dans un premier temps.

Aussi, seuls 10 % des mobinautes utilisent une application une semaine

après l’avoir téléchargée, 2,3 % au bout d’un mois et quasiment 0 % après
trois mois, en particulier dans le domaine des jeux vidéo mobiles.

Pour tout dire, en moyenne, un mobinaute n’a que 36 applications installées

sur son smartphone. Certaines varient, d’autres sont bien ancrées – on peut
parler du navigateur, du GPS, de YouTube, de Facebook, etc.

Cela ne laisse, il est vrai, que très peu de place pour votre application.
Mais, avec une forte valeur ajoutée, il y a toujours moyen de repousser les
limites du possible.

Tendance des usages

Maintenant que nous avons vu les chiffres concernant les téléchargements

d’applications, étudions un peu la tendance des usages.

Utilisation courante

La plupart du temps, les mobinautes se servent de leur téléphone ou de leur

tablette lorsqu’ils n’ont pas accès à leur ordinateur portable. Globalement,
il s’agit d’un usage le matin et tout au long de la journée pendant les pauses
café, pour lire l’actualité par exemple. Puis dans les transports, pour lire
leurs e-mails ou jouer à un jeu. Ensuite, au travail, quand une notification
vous informe que votre ami(e) a changé sa photo de profil ou qu’un SMS
vous informe que votre colis a été expédié et sera bientôt livré à l’adresse
de destination. Enfin, dans les magasins eux-mêmes pour pouvoir comparer
les prix (et peut-être acheter sur Internet… qui a dit Amazon ?).

Influence des achats

Nous le verrons plus tard, mais les achats in-app constitueront certainement
la pierre angulaire de votre business model et donc, de votre rentabilité. Et
justement, les endroits précédemment cités constituent les lieux d’influence
des achats sur smartphone.

Le temps d’un café en premier, puisque c’est le moment où les mobinautes

sont les plus éveillés quant à ce qui se passe sur leur téléphone. Dans les
transports ou au travail, les utilisateurs sont certainement peu réceptifs à ces
achats, car préoccupés par les mouvements ambiants. Enfin dans les
magasins, le lieu n’est pas vraiment propice aux achats in-app.

Les Millennials

Dernier point avant de s’intéresser à votre business plan à proprement

parler : les Millennials ou génération Y. C’est certainement un terme que
vous verrez souvent dans le domaine du marketing. Les Millennials sont
tout simplement les personnes nées entre 1980 et 2000 et constituent une
grande partie de la population.

En effet, d’après les derniers chiffres, ils sont 16 millions en France, 80

millions aux États-Unis et plus de 350 millions en Chine, rien que ça !

Ils utilisent énormément les réseaux sociaux, ce sont eux qui ont fait et qui
font encore le succès de Snapchat notamment.

Ils font également beaucoup d’achats in-app. Approximativement deux par

semaine, ce qui constitue un chiffre d’affaires potentiel très important, à
condition de les séduire, bien évidemment.

Avec ces chiffres en main, il est temps d’étudier le business model et la

rentabilité dans le domaine des applications mobiles.

Business model et rentabilité

Nous avons vu les chiffres des stores et vous savez le combat qu’il vous
reste à mener après l’étape du développement. Pour publier l’application,
de nombreux choix stratégiques vont se poser. L’un d’eux n’est autre que la
création de fiches sur les App Store et Google Play, avec son lot de
contraintes et d’obligations. Nous aurons l’occasion d’y revenir très
rapidement dans la suite de l’ouvrage.

Dans la phase de création des fiches, le choix du prix de votre application

va être la première décision importante. En effet, cela constitue la première
opportunité de rentabilité de cette dernière, ce qui influera directement sur
les campagnes de marketing et de communication, et donc, sur la visibilité.

Application gratuite ou payante

La première question à se poser est donc le coût de votre application pour

l’utilisateur. Devra-t-il payer avant même de l’utiliser (ce qui signifie que
l’utilisateur doit être vraiment conquis par votre application) ou pas ?

Application gratuite

Si vous faites le choix d’une application gratuite, vous aurez l’avantage de

pouvoir convaincre les utilisateurs de l’utilité de votre plate-forme à
l’utilisation.

Une fois ceci fait – vous ferez partie des 59 % de première utilisation –, vos
utilisateurs auront la possibilité de quitter l’application, de la désinstaller ou
juste de l’oublier.

Libre à vous d’utiliser des campagnes marketing pour retenir les utilisateurs
en question. Après tout, il est beaucoup plus simple et moins coûteux de
retenir vos utilisateurs une fois leur inscription ou leur connexion effectuée,
plutôt que de convaincre de nouveaux utilisateurs de télécharger
l’application et de s’y inscrire.

Application payante

Pourquoi un mobinaute paierait ne serait-ce que 99 centimes d’euros pour

votre application ? Et pourquoi celle-ci et pas une autre ?
Si toutefois l’utilisateur accepte de s’acquitter d’une certaine somme
d’argent pour télécharger votre application, jusqu’à quel prix vos éventuels
clients seront-ils prêts à payer ? Trouver le prix le plus juste, celui qui sera
le plus haut possible pour maximiser les revenus, mais pas trop pour ne pas
décourager l’utilisateur.

Si vous choisissez cette option, on parle alors de RPI, à savoir de « revenu

par installation ».

Vous n’êtes toujours pas décidé ? Peut-être le modèle freemium vous

intéressera-t-il ?

Le modèle freemium

Le modèle freemium marche de plus en plus auprès des utilisateurs, que ce

soit sur le Web ou sur le mobile. Il s’agit, comme son nom l’indique, d’une
application qui est gratuite et dans laquelle les fonctionnalités avancées
sont payantes.

Ainsi, vos utilisateurs seront libres de télécharger l’application, de

s’inscrire – ou simplement s’y connecter – et de la tester avant d’aller plus
loin. Si une fonctionnalité intéresse particulièrement l’utilisateur, que la
version de base ne lui convient plus et que le prix ne le dissuade pas, alors
il lui est possible d’acheter celle-ci dans l’application. En anglais, on parle
d’achat in-app.

Si les options gratuites conviennent aux utilisateurs, la rentabilité risque

d’être sévèrement entachée. Il est donc nécessaire de peser le pour et le
contre sur chaque fonctionnalité de manière à en offrir suffisamment pour
attiser la curiosité de vos utilisateurs, mais les limiter de manière à les
inciter à en payer de nouvelles.

Bien sûr, il existe toujours un risque que vos utilisateurs téléchargent

l’application, l’utilisent une fois ou deux puis l’oublient, voire la
désinstallent. Mais ici encore rien n’est sûr et vous ne pourrez rien y faire.
Sauf, évidemment, utiliser des campagnes marketing pour retenir les
utilisateurs en question.
Partage des revenus avec Apple et Google

Apple et Google prélèvent aujourd’hui 30 % des montants payés par les

mobinautes pour des applications payantes proposées dans leurs boutiques
mobiles respectives, qu’il s’agisse d’un versement unique au moment du
téléchargement initial, de contenus in-app ou de montants versés
régulièrement dans le cadre d’un abonnement pour accéder à un service ou
des contenus en ligne. Les 70 % restants du prix de l’application sont donc
conservés par le(s) développeur(s).

À noter qu’Apple a assoupli en 2016 les règles de rémunération de l’App

Store. Pour une application proposant des abonnements, si les développeurs
arrivent à conserver plus d’un an leurs clients, la commission ne sera plus
que de 15 % à partir de la deuxième année. Google en a fait de même début
2018. Un point important à prendre en compte pour affiner le modèle
économique de sa future application mobile.

Le fonctionnement des stores

Vous avez fait votre choix entre application gratuite ou payante ? Il est
temps de comprendre maintenant le fonctionnement des magasins
d’applications (autrement appelés stores), pour mieux comprendre les
contraintes et spécificités de ces plates-formes.

En effet, à terme, votre application va être recherchée et potentiellement

trouvée sur les magasins d’applications. Mais à la vue de la multitude
d’applications disponibles, ces plates-formes ont fait le choix de ne pas
permettre la personnalisation des fiches d’applications, dans le but de
rendre les magasins totalement homogènes.

En outre, pour pouvoir publier votre fiche sur l’App Store et Google Play, il
va falloir que vous respectiez certains formats obligatoires – qui parfois
changent d’un store à l’autre, pour ne rien arranger. Et avant même de
pouvoir publier l’application et de respecter les standards de
développement. Voyons cela de plus près.

Présentation des fiches Google Play et App Store

Attardons-nous sur les fiches d’applications sur Google Play et l’App
Store. Pour l’exemple, nous allons prendre des applications éditées
respectivement par Google et Apple.

La fiche Google Play

Chez Google, rendez-vous à l’adresse https://play.google.com/store/apps/

details?id=com.google.android.googlequicksearchbox ou sur la fiche de
l’application Google sur l’application Google Play de votre smartphone ou
tablette Android.

image

Figure 5-1 – L’application Google sur Google Play

Sur Android, vous serez directement redirigé vers Google Play Store sur la
fiche de l’application :

image

Figure 5-2 – L’application Google sur Google Play Store

Comme vous pouvez le voir, l’application est représentée par un identifiant

unique, ici com.google.android.googlequicksearchbox. Certains le
voient comme une URL inversée, d’autres comme une simple chaîne. À
vrai dire il n’y a pas de bonne réponse. Sur certaines fiches, on peut plus ou
moins comprendre le but de l’application correspondante, rien qu’en lisant
son identifiant. Ici, il s’agit de l’application de recherche rapide de Google.

Allez donc sur la fiche de l’application concernée. La première chose que

vous verrez, c’est son titre. Logique, c’est l’élément fondamental de votre
application. C’est grâce à cette information que votre application sera
recherchée ou qu’elle sera ouverte sur les smartphones.

Ensuite, juste à côté, vous verrez le logo. Nous le verrons dans les
spécificités techniques, le logo doit avoir des caractéristiques particulières –
et différentes pour Google et Apple. Et pour cause ! C’est le même logo qui
apparaîtra sur la fiche App Store ou Google Play et sur la page d’accueil du
smartphone de l’utilisateur.

Pour le détail, en dessous du nom de l’application, vous trouverez le nom

de l’éditeur, en l’occurrence Google Inc. et à droite, la catégorie de
l’application, ici Outils. Également, à droite, il y a un bouton aussi vital
pour vous que pour l’utilisateur : le bouton d’achat ou d’installation. En
cliquant sur ce bouton, l’utilisateur devra sélectionner son smartphone et
l’application s’y téléchargera directement.

En dessous de tout cela, les captures d’écran occupent une place

imprenable sur la fiche. Il peut y en avoir huit sur la fiche Google Play
Store et elles peuvent vraiment vous servir dans la communication de votre
application.

En effet, outre présenter votre application, vous pouvez naturellement

mettre des captures d’écran des fenêtres de votre application qui sont les
plus intéressantes. Inutile de mettre la première fenêtre ou celle qui a peu
d’intérêt (comme celle d’acceptation des conditions générales d’utilisation).
Libre à vous de mettre la fenêtre principale par exemple.

Il est également possible d’annoter vos captures d’écran et même de

présenter votre application via une histoire imagée. C’est le cas de cette
application, où vous voyez des annotations sur chacune des captures, par
exemple : « Découvrez l’actu du cinéma, les séances et les avis des
spectateurs » sur la première capture sur fond rouge.

En bref, les captures d’écran sont un outil marketing et de communication

de poids pour votre application, faites-en bon usage.

La fiche Google Play Store continue ensuite avec la description de

l’application.

image

Figure 5-3 – La description et les avis sur la fiche Google Play

Cette description peut être extrêmement longue, jusqu’à 4 000 caractères. Il
est néanmoins conseillé de bien choisir vos mots. En effet, et nous le
verrons plus tard, la plupart des recherches d’applications se passent depuis
les téléphones portables eux-mêmes, disposant naturellement d’un écran
bien moins grand que celui de votre ordinateur.

Sur ces smartphones, la description ne s’affichera probablement que ligne à

ligne sur l’écran des utilisateurs et, naturellement, les trois ou quatre
premières lignes devront servir d’accroche puisqu’ensuite l’utilisateur
devra descendre de nouveau dans la fenêtre pour consulter la suite de la
description.

Sur votre ordinateur, vous pourrez d’ailleurs remarquer que, passé un

certain nombre de lignes et de caractères, un bouton Lire la suite s’affiche,
coupant court à la première description pour obliger l’éditeur à synthétiser
son propos dans la première partie.

Bien que vous n’ayez pas d’influence possible sur la suite de la fiche, il est
malgré tout intéressant de s’y attarder. Ainsi, en dessous de la description
de l’application, vous trouverez les avis, sous forme d’étoiles et de
commentaires. Ces derniers, auxquels vous pourrez répondre avec une
plume bienveillante, serviront principalement à promouvoir votre
application entre les utilisateurs. Ils pourront y mettre leur avis et la noter
avec des étoiles. Inutile de vous dire que ces avis entreront grandement
dans l’algorithme de recherche des stores (nous aurons l’occasion d’y
revenir dans la suite de ce chapitre).

Ensuite, nous avons les nouveautés de la version.

image

Figure 5-4 – Les nouveautés de la version et les informations sur la fiche

Google Play

Il s’agit d’un petit texte descriptif de l’éditeur pour mettre en avant les
améliorations et les corrections de bogues réalisées sur la dernière version.
Lorsque l’utilisateur met à jour votre application, c’est ce texte qu’il va
pouvoir consulter directement.
À la fin de la fiche, certaines informations, bien que moins importantes,
s’affichent. C’est le cas de la version de l’application, du nombre
approximatif de téléchargements et des droits que demande l’application
sur le smartphone de l’utilisateur.

La fiche App Store

Chez Apple, rendez-vous à l’adresse https://itunes.apple.com/fr/app/wwdc/

id640199958 ou sur la fiche de l’application WWDC sur l’application App
Store de votre smartphone ou tablette iOS. Il est possible que votre
navigateur vous propose de l’afficher sur le logiciel iTunes et vous pouvez
même l’y rechercher directement.

image

Figure 5-5 – L’application WWDC sur l’iTunes Store

Sur iOS, vous serez directement redirigé vers l’App Store sur la fiche de
l’application (voir figure 5-6).

Il s’agit ici de l’application développée par Apple pour la WWDC, la

Worldwide Developers Conference. Il s’agit de la très célèbre présentation –
appelée keynote – que l’équipe d’Apple fait chaque année aux alentours de
juin pour présenter ses nouveaux systèmes d’exploitation et ses nouveaux
outils pour développeurs. Petit clin d’œil à vous, développeur, qui devrez
suivre l’évolution technologique des API d’Apple.

Contrairement à Google Play où l’identifiant unique, sous forme de chaîne

URL inversée (si l’on peut dire), était visible et servait à identifier
l’application, iTunes se sert du nom de l’application ainsi que d’un
identifiant numérique pour la reconnaître. Cependant, nous le verrons en
créant la fiche dans la prochaine partie de l’ouvrage, nous distinguerons
notre application via un identifiant similaire, qui servira notamment à
associer celle-ci à différents services.

image

Figure 5-6 – L’application WWDC sur l’App Store

Sur la fiche App Store, bien que l’apparence change d’avec la fiche du
Google Play, les informations qui y figurent sont relativement similaires.

Dans un premier temps donc, nous allons voir le nom. Comme pour Google
Play, c’est l’élément fondamental de votre application. C’est grâce à ce titre
que votre application sera recherchée et grâce à lui que votre application
sera ouverte sur les smartphones. Une petite spécification sur laquelle
j’aurai l’occasion de revenir : jusqu’à iOS 11, disponible depuis septembre
2017, le nom de votre application pourra être plus long pour les
algorithmes qu’à l’affichage, l’objectif étant d’y mettre des mots-clés
déterminants.

En dessous du nom de l’application, vous trouverez le nom de l’éditeur, ici

« Apple ».

Ensuite, le logo partagera la largeur de l’écran avec la description et les

nouveautés de la version. Comme pour Google Play, ce logo est le même
que celui qui apparaît sur la page d’accueil du smartphone de l’utilisateur.

De même concernant la description qui peut s’étendre jusqu’à 4 000

caractères avec néanmoins la nécessité de synthétiser et de créer une ou
plusieurs lignes d’accroche. En effet, comme son concurrent, la description
est tronquée et un petit lien « ...suite » affiche le reste du texte.

Comme vous l’avez remarqué, la nouveauté de la version est bien plus mise
en avant que sur Google Play. Apple apporte beaucoup plus de valeur aux
applications qui bougent et aux mises à jour. L’implication d’un éditeur à
répondre aux demandes des utilisateurs est ce qui fait l’attractivité de son
application. Là encore, cette description coupée demande un esprit de
synthèse et de bonnes phrases d’accroche afin de prouver aux nouveaux
venus que vous êtes à l’écoute de vos utilisateurs.

En dessous de tout cela, nous voyons les captures d’écran.

image

Figure 5-7 – Les captures d’écran sur la fiche de l’iTunes Store

Inutile d’y revenir davantage, il s’agit du même principe que chez Google,
les captures peuvent présenter l’application de manière aussi simple que
possible ou bien avec des annotations et autres récits. Seule précision de
taille : Apple ne permet de mettre que cinq captures d’écran au total. Cela
n’en reste pas moins un outil marketing et communicationnel de taille.

Le cadre principal de la page se finit sur les avis (que vous ne verrez pas
sur cette application, je vous laisse le soin de fouiller un peu). Ici encore, ils
serviront à promouvoir votre application entre les utilisateurs. Ils pourront
y mettre leur avis et ajouter leur notation sous forme d’étoiles. Ces avis
serviront également dans l’algorithme de recherche.

La page s’arrête là mais, comme vous le voyez, sous le logo se trouvent des
informations qui peuvent être utiles.

image

Figure 5-8 – Les informations sur la fiche de l’iTunes Store

En tout premier lieu, vous verrez un lien pour afficher l’application sur
iTunes. En effet, c’est ce logiciel qui va permettre à l’utilisateur de
télécharger l’application sur son ordinateur pour pouvoir ensuite
synchroniser son smartphone et la récupérer.

Cela étant dit, la plupart des téléchargements d’applications se passe en

direct sur le téléphone pour éviter cette procédure longue et fastidieuse de
synchronisation. Après ce bouton, la ou les catégorie(s) de l’application
s’affiche(nt), ici Références.

Ensuite, une petite information sur les plates-formes sur lesquelles est
disponible votre application. Il peut y avoir l’iPhone et/ou l’iPad, mais
également sous forme de plug-in pour iMessage et sous forme d’application
pour l’Apple Watch. Enfin, certaines informations, bien que moins
importantes, s’affichent, telles que la version de l’application, le poids, les
langues et même la compatibilité.

Sur cette page-ci, comme aucune note n’a été postée, un texte l’indique.
Dans le cas contraire, la page affiche le nombre d’avis et la note moyenne
sur la dernière version de l’application, ainsi que sur tous les avis laissés.

Contraintes et spécificités des fiches

Nous avons pu le voir, les fiches Google Play et App Store sont légèrement
différentes, en ce qui concerne l’affichage et la prise en compte des
informations.

Au-delà de cela, certaines spécifications techniques sont très importantes,

c’est justement ce que nous allons voir ici.

Le titre

Le titre tout d’abord. Du côté de Google Play, le titre ne pourra comporter

que 30 caractères, sans distinction entre le visible et l’algorithmique.

Du côté de l’App Store, c’est un peu spécial. Jusqu’à iOS 10, le titre doit
faire au maximum 75 caractères sur l’App Store, mais seuls 54 caractères
sont visibles par l’utilisateur. Les autres ne servent qu’à optimiser
l’algorithme de recherche. À partir de iOS 11, sorti en septembre 2017, le
titre ne fait plus que 30 caractères sans distinction entre le visible et
l’algorithmique comme Google Play.

Le sous-titre

Il s’agit d’une nouveauté introduite avec iOS 11. Le sous-titre comporte au

maximum 30 caractères et permet de résumer l’intérêt et la fonctionnalité
principale de votre application.

C’est une nouvelle façon de mettre en avant votre application pour attirer
de nouveaux utilisateurs.

Cependant, il n’est disponible que sur l’App Store.

Les captures d’écran

Nous avons déjà évoqué les captures, mais il s’agit d’une bonne occasion
de refaire un point les concernant. Elles ne pourront être qu’au nombre de
cinq sur l’App Store, tandis que Google Play en autorise huit.

La vidéo de présentation

Les fiches Google Play et App Store proposent désormais d’ajouter des
vidéos de démonstration : 15 à 30 secondes pour Apple, 30 secondes à 2
minutes pour Google, via YouTube.

Ces vidéos peuvent aider à présenter l’application, servir de promotion et

bien d’autres choses encore. Attention, veillez à ce que votre vidéo soit
compréhensible, sans le son et avec du texte assez lisible même sur petit
écran.

Les catégories

Google Play n’autorise qu’une seule catégorie, alors qu’il y en a trois sur
l’App Store. Sur les deux plates-formes, la ou les catégorie(s) a/auront une
importance dans l’algorithme de recherche.

Maintenant que nous avons vu tout cela, il est en temps de parler de

l’algorithme de recherche sur les différents magasins d’applications et de
l’importance des différents points que nous venons d’évoquer.

L’algorithme de recherche

Avant d’étudier les opérations marketing autour de votre application ou

même la publication de cette dernière, il faut évoquer l’algorithme de
recherche, autrement dit la façon dont les utilisateurs vont rechercher et
trouver votre application.

Comme vous pouvez l’imaginer, à l’ère de l’intelligence artificielle et de la

recherche prédictive, les géants de l’informatique sont sans cesse en quête
d’optimisation de leurs algorithmes. Les recherches d’applications en font
partie, notamment au vu de leur nombre dans les stores et de celles qui sont
publiées chaque jour.
Pour vous proposer la meilleure application au moment opportun, les
équipes de Google Play et de l’App Store ont donc conçu des algorithmes
puissants et précis, mais qui vous proposent également leur sélection, bien
souvent de manière hebdomadaire, des meilleures applications, publiées ou
mises à jour, du moment.

La mise en avant des applications

Les équipes de Google et d’Apple sélectionnent chaque semaine des

applications qu’ils mettront en page d’accueil de leur store.

Les mises en avant sont le moyen pour Google et Apple de proposer les
meilleures applications pour rendre le smartphone de l’utilisateur encore
plus puissant, productif et intelligent. Du côté de l’éditeur de l’application –
qui est contacté au préalable pour apporter des éléments à la campagne
marketing que représente cette mise en avant – il s’agit d’une aubaine.
Cette application est susceptible d’être téléchargée plusieurs dizaines, voire
centaines de milliers de fois et d’assurer un nombre très important de
nouveaux utilisateurs – et donc de nouvelles inscriptions – sur
l’application. Elle permettra également de relancer le bouche-à-oreille.

Néanmoins, cette forme de promotion n’est pas systématique, bien au

contraire. L’application devra être parfaitement fonctionnelle, respecter
tous les standards et les recommandations des équipes de validation des
plates-formes Google Play et/ou App Store. L’interface devra être fluide et
intuitive. Autrement dit, votre application devra être parfaite et devra avoir
déjà séduit un grand nombre d’utilisateurs.

Ces mises en avant ne sont généralement pas le fruit du hasard. Elles font
suite à des publications – parfois sponsorisées – de votre application sur des
sites d’actualité américains bien connus. Cette couverture médiatique, qui
aura probablement déjà apporté son lot d’utilisateurs, ne constitue que le
début du processus de communication de votre application à la
communauté d’utilisateurs Android ou iOS.

Cela étant dit, ne vous inquiétez pas si vous n’êtes jamais sélectionné. Votre
application n’en sera pas moins un succès international sans cela. Les
équipes d’Apple et de Google peuvent même prendre connaissance de votre
application plus tard. Si vous n’êtes pas sélectionné, il vous reste
néanmoins à optimiser les données de votre application pour vous assurer
que chaque recherche correspondante mène vers elle.

L’algorithme de recherche des applications

Comme nous l’avons précédemment, de nombreux éléments entrent en

compte dans l’algorithme de recherche de Google et d’Apple.

Chez Apple tout d’abord, le titre a son importance. Outre le titre public
affiché aux utilisateurs, nous avons vu que les derniers caractères du titre ne
sont pas visibles et servent uniquement à optimiser la recherche de votre
application. Depuis septembre 2017 et la version iOS 11 néanmoins, la
donne a changé et, à l’instar de Google Play, les 30 caractères du titre sont
aussi importants pour l’utilisateur que pour l’algorithme de recherche.

Libre à vous donc de choisir un titre long et relativement descriptif. Inutile

de le surcharger malgré tout, cela pourrait avoir l’effet inverse auprès de
vos utilisateurs. Chez Apple, le sous-titre, introduit en septembre 2017 avec
iOS 11, répond à cette problématique en ajoutant au titre de votre
application une petite phrase descriptive de 30 caractères.

Ensuite, le nombre moyen d’étoiles ainsi que le nombre d’avis laissés ont
un impact significatif sur cet algorithme. Outre le fait que le nombre
d’étoiles influence fortement le comportement des utilisateurs en matière
de téléchargement, cette donnée s’avère cruciale dans l’algorithme de
recherche. D’ailleurs, sur l’App Store, les avis laissés sur la dernière
version sont pris en compte différemment de ceux laissés sur les
précédentes. Apple prend en compte le fait que votre application évolue.

Les mises à jour de votre application, elles aussi, sont importantes aux yeux
d’Apple et de Google. Une application qui n’est jamais mise à jour
risquerait de chuter dans le classement tandis qu’une application que
l’éditeur améliore régulièrement est mieux considérée.
Enfin, donnée non influençable mais très importante, le nombre de
téléchargements, de clics sur la page et même d’utilisations. En effet, même
si l’utilisateur ne le sait sûrement pas, Apple et Google enregistrent chaque
clic et chaque téléchargement des applications. En tant qu’éditeur, vous
aurez ainsi accès à un récapitulatif de l’évolution de l’application auprès de
vos utilisateurs.

Voyons un peu comment optimiser la découverte de votre application sur

les stores.

La découverte des applications sur les stores

Nous aurons l’occasion d’y revenir par la suite dans la partie marketing de
l’ouvrage : vos applications ne sont pas uniquement découvertes par
l’intermédiaire du moteur de recherche des différents stores. De nouveaux
moyens de communication permettent d’amener le futur utilisateur vers
votre application.

Plus tard, nous parlerons d’App Store Optimization ou ASO. Il s’agit du

classement organique sur l’App Store et Google Play qui peut être amélioré
de différentes façons. Nous évoquerons également l’App Store, qui propose
maintenant la mise en place de ses propres campagnes de publicité.

Nous traiterons également des campagnes payantes de marketing et des

résultats payants dans les moteurs de recherche comme Google.

Mais avant cela, publions votre application !

 6
Publica on sur les stores

Créez un compte Apple Developer

Maintenant que l’application est réalisée ou presque, nous allons pouvoir
l’envoyer sur les App Store d’Apple et Google Play de Google. Avec React
Native, l’application est conçue pour iOS et Android – sauf si votre
développement ne l’est pas, faute de composants par exemple – et peut
également être portée sur les Universal Windows Platform avec quelques
manipulations.
Même si votre application n’est pas finalisée, vous aurez peut-être besoin
de la montrer à votre équipe, vos amis, votre famille, et la faire installer sur
leur téléphone.
Bref, dans tous les cas, nous allons voir à présent comment créer un compte
sur l’App Store, envoyer une application et la faire tester par un certain
nombre d’utilisateurs.
Je vous rappelle qu’il vous faut macOS pour pouvoir développer des
applications iOS.
Attention, le service est payant. Un compte Apple Developer coûte 99 € par
an et un compte Entreprise – notamment pour avoir des applications
internes – coûte 299 € par an.
Dirigez-vous vers la page d’Apple Developer (https://developer.apple.com/
programs/enroll/) qui vous informe de ce dont je viens de vous avertir (en
anglais). Une fois que vous êtes d’accord, cliquez sur Start Your
Enrollment.
Connectez-vous à votre compte Apple ou créez-en un si vous n’en avez pas
encore.
Ensuite, Apple vous demande si vous êtes un développeur individuel, une
société ou une organisation gouvernementale :

Figure 6-1 – Choix du type d’en té

En tant que développeur individuel, vous pouvez tout autant publier des
applications que les autres, mais votre compte est solo, vous ne pourrez pas
associer d’autres personnes. Vous êtes le seul à y avoir accès.
A contrario, un compte Entreprise vous donne la possibilité de lier d’autres
comptes Apple à l’organisation. Ainsi votre équipe de développeurs pourra
gérer les certificats, votre équipe marketing aura accès aux statistiques et la
direction pourra payer les factures.
Ce sont les deux utilisations les plus courantes. Pour information, il est
possible de passer facilement d’un type d’entité à l’autre.
Pour franchir cette étape, vous allez devoir remplir toutes les informations
vous concernant ou relative à votre entreprise, puis signer le contrat avec
Apple Developer. Enfin, vous devrez vérifier l’ensemble des informations
de votre compte ainsi que vos coordonnées :
 Figure 6-2 – Récapitula f Apple Developer Enrollment

Vient alors la douloureuse conclusion. Vous allez devoir accepter les frais
liés à cet enregistrement. Apple vous associe un numéro d’enrollement (ici
grisé) :

Figure 6-3 – Achat du programme

Enfin, gentil comme il se doit, Apple vous propose d’activer le

renouvellement annuel de votre licence développeur, à votre date
anniversaire :
 Figure 6-4 – Ac ver le renouvellement automa que

Pour votre information, sachez que si vous publiez une ou plusieurs

applications avec votre compte Apple Developer, mais que vous ne le
renouvelez pas l’année suivante, lesdites applications ne seront plus
accessibles sur l’App Store. Il vous faudra repayer l’abonnement pour les
rendre à nouveau disponibles.
Cliquez sur le bouton Purchase. Vous serez alors invité à vous reconnecter
puis à payer.
Vous êtes désormais un développeur – tiers – Apple !

Créez un compte Google Developer

Si vous avez développé votre application avec React Native, l’un des
principaux avantages de ce framework est que l’application sera disponible
également pour Android. Il serait dommage de ne pas en profiter !
Même principe que chez Apple, vous avez la possibilité de montrer votre
application à votre équipe, vos amis, votre famille et la faire installer sur
leur téléphone.
Nous allons donc voir comment créer un compte sur Google Play et
envoyer votre première application.
Bien que le service soit tout aussi payant, il reste moins onéreux : 25 $ à
l’inscription.
Rendez-vous sur la page de Google Play (https://play.google.com/apps/
publish/signup/) qui va vous rediriger vers la page de connexion de Google,
puis vers la page d’inscription.
Dans un premier temps, vous allez devoir vérifier que vous êtes bien
connecté au compte Google auquel l’inscription Google Developer sera
attachée. Ensuite, acceptez les conditions générales d’utilisation :

Figure 6-5 – Accepter la créa on du compte Google Developer

Vous pouvez désormais payer les 25 $ :

 Figure 6-6 – Payer pour le compte Google Developer

Ça y est, votre inscription est finalisée. Vous êtes désormais Google – tiers
– Developer.
Nous allons désormais pouvoir publier votre application sur l’App Store et
Google Play.

Envoyez votre applica on sur l’App Store

Rendez-vous sur https://developer.apple.com/account/. Vous arrivez sur la
page d’accueil de votre compte Apple Developer :
 Figure 6-7 – Apple Developer

Sur cette page vous allez pouvoir gérer :

• votre compte (Membership) avec vos informations personnelles, ainsi
que les détails de votre paiement ;
• les certificats (Certificates, IDs & Profiles) de votre compte
développeur ;
• vos applications (iTunes Connect).

Gérons les cer ficats

Nous allons, dans un premier temps, générer les différents certificats pour la
publication de votre application.

Le cer ficat du Mac

Nous allons tout d’abord associer votre Mac à votre compte Developer.
Lancez le logiciel Trousseaux d’accès sur votre Mac. Il est généralement
présent dans le dossier Autre (autrefois nommé Utilitaires) :
 Figure 6-8 – Le logo du logiciel Trousseaux d’accès

Dans le menu Trousseaux d’accès, sélectionnez Assistant de certification,

puis Demander un certificat à une autorité de certificat... :

Figure 6-9 – Procédure de demande de cer ficat

Dans la fenêtre qui s’ouvre, entrez l’adresse e-mail de votre compte

développeur et votre nom. Ensuite, vous avez deux options :
• Vous vous faites envoyer le fichier (instantanément) par e-mail, de
manière à pouvoir le conserver facilement, et dans ce cas vous
remplissez le troisième champ.
ou
• Vous enregistrez directement le fichier sur votre disque dur.
 Figure 6-10 – Assistant de cer fica on

Maintenant, retour à votre compte Apple Developer. Dans le menu,

choisissez Certificates, IDs & Profiles, vous arrivez sur une autre page
d’Apple où vous avez la liste de tous vos certificats.
Cliquez sur le + en haut à droite :

Figure 6-11 – Ajouter un cer ficat

Dans la liste, prenez le premier, iOS App Development, puis validez tout en
bas sur Continue :
 Figure 6-12 – iOS App Development

De même sur la page suivante, cliquez sur Continue.

Une nouvelle page s’ouvre. Vous allez devoir sélectionner le fichier que
vous venez de créer. Validez encore une fois sur Continue :
 Figure 6-13 – Envoi du fichier CSR

Vous arrivez sur une page où vous allez pouvoir télécharger un fichier .cer :
 Figure 6-14 – Télécharger le fichier .cer

Cliquez sur Add Another et recommencez la même manipulation en

choisissant cette fois-ci App Store and Ad Hoc :
 Figure 6-15 – App Store and Ad Hoc

Tout le reste de la manipulation sera identique.

Vous avez créé deux fichiers qui permettent de réaliser des applications en
développement et en production. Ouvrez l’un après l’autre les fichiers,
votre Mac s’occupe du reste.

Le cer ficat de l’applica on

Créons maintenant un identifiant pour votre application. Il faudra répéter
cette procédure à chaque nouvelle application. Retournez donc sur la page
d’accueil des certificats (https://developer.apple.com/account/ios/identifier/
bundle), et cliquez sur App IDs sous Identifiers. Même chose, petit + en
haut à droite.
Vous allez devoir saisir un nom pour votre application, ainsi qu’un
identifiant unique :
 Figure 6-16 – Enregistrer une applica on

Pour l’occasion, j’enregistre l’application myApp sous l’identifiant

com.myapp.fordemo (com.myapp étant déjà utilisé).

En bas de la page, vous allez pouvoir déclarer utiliser des services dans
votre application, comme des notifications, le paiement avec Apple Pay ou
d’autres choses encore. Cochez les services désirés. Les services Game
Center et In-App Purchase sont cochés automatiquement. Ils servent
respectivement à lier les données utilisateurs aux données de jeux et à
utiliser les achats intégrés à l’application.
Cliquez sur Continue, nous avons alors un petit récapitulatif de notre
nouvelle application :
 Figure 6-17 – Récapitula f de la nouvelle applica on

Cliquez enfin sur Register. Ça y est ! Votre application est enregistrée.

Le cer ficat de votre téléphone

Autant les deux premiers certificats que nous avons vus sont primordiaux,
autant celui-ci ne l’est pas. Si vous avez un iPhone ou un iPad et que vous
souhaitez l’utiliser pour tester vos applications, alors c’est parti. Sinon, vous
pouvez passer à la partie suivante.
Tout d’abord, branchez votre appareil. Lancez iTunes et allez sur les
paramètres de votre appareil. Là, vous allez voir le numéro UDID, copiez-
le.
Retournez à la page des certificats Apple, puis cliquez sur la page All en
dessous de Devices. De là, collez votre numéro UDID et nommez
l’appareil. Validez et c’est bon.

Le cer ficat de Xcode

Dernière étape. Retournez à la page des certificats Apple puis cliquez sur la
page All en dessous de Provisioning Profiles. Cliquez sur le +. Cette
interface doit vous en rappeler une autre. Sélectionnez iOS App
Development, puis validez :

Figure 6-18 – iOS App Development Profile

Ensuite, sur la page suivante, sélectionnez votre application :

 Figure 6-19 – Sélec onner l’applica on

Puis sélectionnez le ou les certificat(s) de développement associé(s) :

Figure 6-20 – Sélec onner le ou les cer ficat(s) de développement

Sur la page suivante, choisissez les appareils sur lesquels l’application

pourra s’installer :
 Figure 6-21 – Sélec onner les appareils

Bien que nous ne développions pas cette application pour l’Apple Watch, je
coche malgré tout cet appareil.
Et sur la dernière page, nommez ce profil. Dans mon cas, myAppForDemo
Development :

Figure 6-22 – Nommer le profil

Validez, et téléchargez le profil :

 Figure 6-23 – Télécharger le profil

Recommencez la procédure en sélectionnant App Store dans la première

liste :
 Figure 6-24 – Sélec onner App Store

Ouvrez les deux fichiers téléchargés, Xcode s’occupe du reste.

Créa on d’une fiche sur iTunes Connect

Retour sur la page d’accueil de votre compte développeur. Cliquez sur
iTunes Connect, puis sur Go to iTunes Connect ou sur le lien suivant :
https://itunesconnect.apple.com. Sur cette page, vous trouvez différents
outils d’Apple :
 Figure 6-25 – Accueil iTunes Connect

Mes apps vous sert à gérer les applications.

Analyses des apps vous donne des statistiques à propos de l’App Store.
Utilisateurs et rôles vous permet de gérer les personnes ayant accès à
iTunes Connect.
Le reste sert à la finance et aux autres informations, lesquelles vous seront
probablement demandées à la première mise en ligne de votre première
application.
Rendez-vous dans Mes apps. Cliquez sur le +, puis sur Nouvelle app.
 Figure 6-26 – Nouvelle app

Remplissez alors le questionnaire en donnant les mêmes informations que

par le passé :
 Figure 6-27 – Pop-up de créa on d’applica on

Comme vous pouvez le constater, le UGS est le même que l’identifiant

unique choisi précédemment.
Une fois créé, vous êtes redirigé vers la page de gestion de l’application où
vous pouvez renseigner la description, les versions officielles, les versions
bêta et bien d’autres choses. Nous allons voir tout cela mais, tout d’abord,
envoyons votre application sur cette plate-forme.

Envoi de l’applica on sur l’App Store

Ouvrez votre projet de l’application sur Xcode.
Allez dans votre projet, puis sélectionnez Target :
 Figure 6-28 – Sélec on de la Team

Ici, vous allez pouvoir vérifier les informations de l’application puis

sélectionner le profil. Il est possible de laisser Xcode gérer tout seul les
certificats ou de les sélectionner vous-même :
 Figure 6-29 – Configura on des cer ficats

Enfin, nous allons générer l’application puis l’envoyer. Dans la liste des
simulateurs, sélectionnez tout en haut Generic iOS Device. Puis dans le
menu Product, sélectionnez Archive :
 Figure 6-30 – Générer l’archive

Xcode va mouliner pour générer l’application puis ouvrir une fenêtre : celle
de la liste de toutes les archives de toutes vos (futures) applications.
Sélectionnez l’archive souhaitée, celle que vous venez de créer, puis cliquer
sur Upload to App Store :

Figure 6-31 – Envoi sur l’App Store

Validez le choix de votre compte. Vous arrivez alors sur une fenêtre avec
plusieurs options :
 Figure 6-32 – Op ons d’envoi sur l’App Store

Je ne vais pas m’attarder plus que cela sur cette fenêtre.

La première option autorise Apple à vous envoyer des informations. C’est
très utile notamment pour les statistiques et autres données.
La seconde permet une compilation plus efficace selon l’appareil
d’installation.
Cliquez sur Upload, l’envoi de l’archive est en cours. Patientez. Le temps
dépend entièrement de votre connexion à Internet.

Configura on de l’applica on sur l’iTunes Connect

Gérer les informa ons de l’applica on

Nous allons maintenant pouvoir publier l’application. Pour l’exemple, nous
allons tout d’abord la publier en bêta pour un certain nombre d’utilisateurs
– pour l’instant vous – puis nous la publierons en version officielle pour une
publication sur l’App Store.
À titre informatif, les applications en bêta auprès d’autres utilisateurs ne
passent pas par l’App Store. Nous allons voir tout cela.
Retournez sur la plate-forme iTunes Connect et rendez-vous sur
l’application que vous venez de créer. L’interface iTunes Connect de votre
application donne accès aux informations basiques, aux achats in-app, aux
tests (TestFlight) et à des statistiques simples :

Figure 6-33 – Accueil de l’iTunes Connect

De là, nous allons pouvoir modifier les informations de l’application, les

tarifs et la disponibilité, ainsi que quelques informations propres à la
version.
Sur la première page, nous allons pouvoir corriger le nom de l’application.
Il s’agit pour le moment de myAppFormDemo, mais vous pourrez la mettre à jour,
si vous changez de nom ou pour tout autre raison.
Le sous-titre est un champ qui a été ajouté sur l’iTunes Connect pour la
version 11 d’iOS. Elle implique une toute nouvelle présentation de l’App
Store.
Enfin, vous allez pouvoir modifier l’URL de confidentialité qui sera
affichée sur la page App Store de votre application. Cette page peut paraître
anodine à l’utilisation de votre application, mais Apple accorde beaucoup
d’importance à la confidentialité des données et des usages de ses
utilisateurs. C’est sur cette page que vous allez indiquer comment les
données des utilisateurs de votre application seront utilisées et/ou
revendues.
Ensuite, plus bas dans la page, vous allez pouvoir modifier l’identifiant de
lot ainsi que les catégories de l’application. Pour rappel, sur l’App Store,
chaque application peut posséder deux catégories :

Figure 6-34 – Informa ons générales sur l’iTunes Connect

Par ailleurs, la seconde catégorie ne dépend pas de la catégorie principale.

Apple laisse libre choix dans la sélection des catégories :
 Figure 6-35 – Catégories principale et secondaire sur l’iTunes Connect

Comme vous pouvez le constater, l’identifiant unique de l’application,

nommé UGS, n’est pas visible sur l’App Store et ne pourra pas être
modifié. Vous l’avez choisi à la création de l’application et ce ne sera donc
plus possible de le transformer.
Si vous voulez le changer, il faut créer une nouvelle application, ce qui sera
clairement déconseillé lorsque votre application aura été téléchargée par vos
premiers utilisateurs.
Enfin, l’identifiant Apple est un numéro unique associé à votre application.
Il est généré automatiquement par iTunes Connect et vous ne pourrez pas le
modifier.
Concernant le contrat de licence, il pourra être révisé en ce qui concerne le
ou les territoires où l’application sera disponible.
Pour finir avec cette page, la classification dépendra de l’application que
vous transférerez sur iTunes Connect. Là encore, une fois définie sur une
version, il faudra la mettre à jour et vous ne pourrez pas interagir avec.

Gérer les tarifs et disponibilités

Maintenant que vous êtes prêt à lancer votre application, vous vous êtes
certainement décidé à rendre votre application payante ou la laisser gratuite.
Néanmoins, Apple vous propose davantage d’options comme des
campagnes promotionnelles, des codes de réduction ou même de rendre
votre application gratuite les quelques premiers jours ou premières
semaines de lancement, le temps de faire fonctionner le bouche-à-oreille et
d’attirer une foule d’utilisateurs.

Figure 6-36 – Tarifs et disponibilités sur l’iTunes Connect

Comme vous pouvez le voir, dans le cas où l’application est gratuite, il est
évident que la date de fin est illimitée. Dans le cas contraire, vous allez
donc pouvoir planifier un changement de prix :

Figure 6-37 – Applica on payante et changement de prix sur l’iTunes

Connect

Nous allons donc planifier un changement de prix pour faire évoluer

progressivement le tarif vers le prix final et récupérer le plus grand nombre
d’utilisateurs, par effet de masse :

Figure 6-38 – Planifier un changement de prix sur l’iTunes Connect

Petit à petit, le prix va donc augmenter. Une annonce officielle – de votre

part – incitera les utilisateurs à réfléchir à la raison pour laquelle
l’application vaudra ce prix – aussi élevé soit-il – et ainsi envisager de
l’acheter, avant même que ce tarif ne change. L’évolution sera donc prévue
dans l’iTunes Connect :
 Figure 6-39 – Les changements de prix sur l’iTunes Connect

Que l’application soit payante ou gratuite, vous allez pouvoir sélectionner

les pays de disponibilité de votre application. Vous pourrez naturellement la
rendre disponible sur l’ensemble des territoires où est présent l’App Store –
à savoir 155 pays – ou bien sélectionner, d’un coup ou petit à petit, les pays
de disponibilité de votre application.

image
Figure 6-40 – Choix des pays de disponibilité sur l’iTunes Connect

Si vous avez prévu de traduire progressivement votre application dans les

différentes langues d’utilisation – français, anglais, américain, allemand et
j’en passe – c’est ici que vous allez pouvoir gérer la disponibilité au fur et à
mesure où votre traduction progressera.
Enfin, dans le cas d’une application payante, il vous sera possible de gérer
un programme d’achat en volume, que ce soit en masse ou avec un ou
plusieurs identifiants Apple dans le cadre de contrats que vous pourrez
passer.
Il est temps d’enregistrer les modifications de cette fenêtre, puis de passer à
la page de la version 1.0 de l’application.
Gérer les informa ons de la version
Vous allez tout d’abord pouvoir sélectionner les fameuses captures d’écran
de votre application.
Le gestionnaire de captures d’écran est intelligent. En mettant en ligne des
captures pour les iPhones de 5,5 pouces, iTunes Connect va gérer les
captures d’écran pour ceux de 4,7 pouces, 4 et 3,5 pouces. De même pour
les iPads, les captures de 12,9 pouces serviront à générer des captures de
9,7 pouces. Bien entendu, vous pouvez vous en occuper vous-même si votre
application prend en charge différemment ces tailles d’écrans.
Juste en dessous, vous allez pouvoir gérer l’accroche et la description.
Comme pour le sous-titre, l’accroche est une information qui a été ajoutée
pour le nouvel App Store d’iOS 11.
La description, les mots-clés et les URL serviront aux informations utiles de
la fiche App Store que vous allez créer. Pour rappel, les mots-clés sont
extrêmement précieux pour l’algorithme de recherche de votre application
sur l’App Store. Choisissez-les avec minutie.
Les parties App iMessage et Apple Watch sont réduites d’office mais vous
permettront, à terme, d’ajouter des captures d’écrans pour la partie
iMessage de votre application, ainsi que l’icône et les captures d’écran pour
la partie Apple Watch.
La partie Build va vous permettre de sélectionner la prochaine build,
autrement dit de sélectionner le transfert (upload) venant de Xcode.
Enfin, sur le reste de la page, vous allez pouvoir définir des informations de
base sur l’application : son icône, son copyright, sa version et même les
informations générales vous concernant.

image
Figure 6-41 – Informa ons générales sur l’iTunes Connect

La partie Game Center vous sera utile dans le cadre d’une application de
jeu vidéo.
La partie de vérification vous servira à définir un compte pour l’équipe de
validation d’iTunes Connect. En effet, dans le cadre d’une application plate-
forme, où l’accès à des données est régi par la connexion à un compte strict,
cette partie sera obligatoire pour que l’équipe de validation ne reste pas
simplement à la fenêtre de connexion ou d’inscription.
Pour finir, la partie de publication pourra être intéressante si vous publiez
sur App Store et Google Play. En effet, vous savez déjà que l’App Store
prend entre un et trois jours pour valider et publier votre application, tandis
que le Google Play publie instantanément votre application. L’idée est donc
de faire une publication simultanée.
Vous ferez donc valider votre application par l’équipe d’iTunes Connect en
publication manuelle. Après cela, vous mettrez à jour l’application sur le
Google Play, puis vous ferez la publication manuelle sur l’App Store.

Gérer les achats in-app

Maintenant que votre application est envoyée sur iTunes Connect, vous
allez pouvoir gérer les achats in-app. Cliquez donc sur l’onglet
Fonctionnalités de l’iTunes Connect.
Sur cette page, vous allez devoir soumettre votre application à validation
après l’ajout de votre premier achat in-app. Une fois ceci fait, vous pourrez
ajouter autant d’achats que vous le souhaitez. Ajoutez donc l’achat de votre
choix.

image
Figure 6-42 – Sélec on de l’achat in-app

Comme vous pouvez le constater, vous pouvez ajouter des achats avec date
d’expiration – appelés consommables – et ajouter des abonnements avec ou
sans renouvellement automatique.
Les consommables peuvent être des vies dans une application de jeu, une
visibilité supplémentaire dans une application de mise en relation. Les non-
consommables peuvent être quasiment tout et n’importe quoi.
Concernant les abonnements, vous pouvez sans conteste proposer le même
abonnement avec possibilité de renouvellement automatique, le changement
se faisant d’un simple clic au choix de l’utilisateur.
Nous allons ajouter un consommable pour notre application de météo. Si
c’est acheté, l’application enverra un SMS à l’utilisateur dès que le temps
changera de manière remarquable, et ce pendant un mois. Cette
fonctionnalité supplémentaire coûte 1 € à l’utilisateur.
Cliquez donc sur le + à droite de Achat intégré (0) et vous serez redirigé
vers la page d’ajout de fonctionnalités.
À partir de là, vous allez devoir saisir une référence et un identifiant –
invisibles, mais important pour vos relevés – à votre achat. Ensuite, de la
même manière que les prix de votre application elle-même, vous allez
pouvoir choisir le prix de la fonctionnalité payante et planifier des
changements de tarifs.
Juste en dessous, vous pourrez définir le nom et la description officiels et
visibles de votre achat in-app.
Enfin, les deux dernières parties concernent la promotion de votre achat in-
app dans l’App Store ainsi que les captures d’écran de ce dernier.
Vous serez par la suite à même de promouvoir ces achats intégrés dans
l’App Store. Cette promotion permettra de faire des recherches sur les
achats in-app directement – autrement dit sur le nom de l’achat – au même
titre que l’utilisateur pourrait rechercher une application. Cette promotion
affichera donc l’achat in-app dans la liste et fera une redirection directe vers
l’application elle-même. D’où l’importance du visuel du fameux achat.
Dans la suite de l’onglet, la partie Game Center servira dans le cadre du
développement de votre jeu vidéo – je vous laisse vous y intéresser – tandis
que le chiffrement permettra d’ajouter une sécurité supplémentaire à votre
application.
Enfin et surtout, vous allez pouvoir gérer des codes de promotion dans le
cadre de campagne marketing d’envergure, par exemple durant des
concours ou autres phases promotionnelles. Ces promotions s’appliqueront
à l’application elle-même ou aux achats in-app. Ces promotions ne pourront
être générées qu’une fois l’application validée.

Les tests de votre applica on

Pour l’exemple, nous allons tout d’abord faire tester votre application à un
utilisateur avant de la mettre à la disposition de tous les pays disponibles.
Quel utilisateur ? Vous.
Il s’agit d’un moyen très simple de tester votre application en direct sur
votre iPhone, votre iPad ou iPod Touch sans passer par l’intermédiaire
d’Xcode. Vous passerez ainsi d’une démonstration simple à une
démonstration en condition réelle.
Cliquez donc sur TestFlight pour accéder aux contenus de ces tests :

image
Figure 6-43 – Accueil de TestFlight sur iTunes Connect

Cochez la build n° 1 dans la liste des Builds iOS. Vous allez pouvoir
soumettre une application aux tests :

image
Figure 6-44 – Soumission d’une build pour les tests sur iTunesConnect

De là, vous allez également pouvoir sélectionner un groupe ou un testeur

individuel pour le test de la version de l’application. Néanmoins, nous ne
passerons pas par là puisque nous testerons l’ensemble des builds.
Cliquez sur Soumettre les attestations pour l’exportation et choisissez si
vous avez utilisé le chiffrement sur l’application. Pour le moment, cela sera
non.
Ensuite, allez dans Utilisateurs iTunes Connect. Lors de votre inscription
sur Apple Developer, iTunes Connect a ajouté automatiquement un compte
pour vous. Sur cette page, vous allez pouvoir cliquer sur le + à droite de
Testeurs (0) pour ajouter votre propre compte à la liste des testeurs. Une
fois votre invitation envoyée, vous apparaîtrez dans la liste et vous recevrez
automatiquement un e-mail. Nous y reviendrons dans quelques instants.
Une autre solution de test concerne les utilisateurs en dehors de l’iTunes
Connect. L’idée étant d’inviter des proches ou des premiers utilisateurs sans
qu’ils aient accès à iTunes Connect. Attention, pour cela, vous devrez faire
valider votre application – sans pour autant la publier sur l’App Store –, ce
qui peut prendre du temps.
Cliquez sur Nouveau groupe, sélectionnez le nom souhaité (par exemple
« Testeurs ») puis cliquez sur Ajouter. Vous pouvez soit enregistrer de
nouveaux testeurs manuellement, soit ajouter des testeurs existants – pour le
moment il n’y a que vous – à ce nouveau groupe ou encore ajouter des
utilisateurs à partir d’une liste CSV.
Cliquez sur Ajoutez de nouveaux testeurs, apparaît alors une liste à remplir :

image
Figure 6-45 – Ajouter de nouveaux testeurs sur iTunes Connect

Une fois ajouté, ce groupe sera automatiquement inséré dans les testeurs et
vous pourrez, par la suite, l’associer aux futures builds de votre application.
Les informations relatives aux tests, dans l’onglet suivant, permettent de
renseigner vos utilisateurs sur les nouveautés de la version et les différentes
informations, les mêmes que celles qui seraient présentes sur l’App Store.
Vous aurez également la possibilité de définir une personne à contacter en
cas de bogue ou si l’utilisateur a des suggestions dont il souhaite vous faire
part.
Enfin, le dernier onglet ne sera actif que 72 heures après les premiers tests
utilisateurs, mais pourra être crucial pour comprendre le fonctionnement de
votre application en situation réelle.
Finissons ce chapitre sur l’onglet Activité. Ce dernier donne accès à des
récapitulatifs très intéressants pour votre analyse marketing. Dans un
premier sous-onglet, vous aurez accès à toutes les informations de toutes les
builds que vous aurez envoyés sur iTunes Connect :

image
Figure 6-46 – Liste des ac vités sur iTunes Connect

En effet, en cliquant sur la version de la build que vous souhaitez, vous

accéderez à l’ensemble des informations le concernant. Il s’agit d’une
simple visualisation, qui peut toutefois s’avérer très intéressante dans
certaines situations.
De même pour le sous-onglet Versions de l’App Store qui correspond ici
aux versions qui ont été publiées – donc validées – sur l’App Store.
Enfin, le dernier sous-onglet fournit l’ensemble des notes et des avis publiés
sur la fiche App Store de votre application. Ces données sont extrêmement
importantes pour l’algorithme de recherche de votre application et ne
doivent pas être sous-estimées. Par ailleurs, vous allez pouvoir récolter des
avis et améliorer votre application.
Test de l’applica on mobile
Maintenant que nous avons étudié l’interface d’iTunes Connect dans son
intégralité, il est temps de passer à la pratique. Nous allons désormais
installer votre application sur votre iPhone, iPad ou iPod Touch compatible.
Pour cela, rendez-vous dans votre boîte de réception pour consulter l’e-mail
envoyé par Apple. Il s’agit d’une invitation :

image
Figure 6-47 – Invita on TestFlight par e-mail

Quand vous cliquerez sur View in TestFlight, vous serez redirigé vers une
page d’iTunes bêta vous donnant accès à un code de test :

image
Figure 6-48 – Code Redeem sur iTunes bêta

Comme la page le suggère, téléchargez l’application TestFlight sur

l’appareil concerné. Rendez-vous à l’adresse : https://itunes.apple.com/us/
app/testflight/id899247664.
Ouvrez l’application, connectez-vous puis cliquez sur Redeem en haut à
gauche de l’application. Tapez simplement le code puis cliquez sur Redeem
en haut à droite. Un petit chargement s’effectue puis l’application vous
redirige vers la page bêta de votre application :

image
Figure 6-49 – Code Redeem accepté, téléchargement en cours

Tout comme sur l’App Store lui-même, l’application est en téléchargement.

Dès que c’est possible, vous pourrez cliquer sur Open et ainsi être redirigé
vers votre application :

image
Figure 6-50 – L’applica on via TestFlight

Vous pouvez désormais tester l’application dans son intégralité.

Bien évidemment, tout au long de leurs tests, vos utilisateurs auront la
possibilité de vous envoyer des e-mails pour vous faire part de bogues et/ou
de suggestions. Néanmoins, rien n’est prévu sur TestFlight pour améliorer
ce procédé.
À chaque mise à jour de l’application pour les tests, les utilisateurs de
TestFlight recevront une mise à jour via une notification.

Gérer la publica on de votre applica on

Une fois que votre application est totalement opérationnelle, le débogage
effectué et les améliorations prises en compte auprès des utilisateurs, il va
falloir passer à la version officielle.
Retour sur iTunes Connect, la procédure va être relativement simple. Cela
se passe dans l’onglet App Store, cliquez sur la version iOS que vous
souhaitez faire valider. Allez dans la partie Build :

image
Figure 6-51 – Build de la version de votre applica on sur l’iTunes Connect

Cliquez simplement sur le + ou Sélectionez une build avant de soumettre

votre app. ITunes Connect va ouvrir une fenêtre avec la liste des builds que
vous avez envoyées. Vous allez y retrouver la toute première, celle que vous
avez vous-même testée :

image
Figure 6-52 – Choix de la build pour la version de l’applica on sur l’iTunes
Connect

Sélectionnez la build concernée puis cliquez sur Terminé. De retour sur la

fenêtre principale de l’application, cliquez tout en haut sur Enregistrer, puis
sur Soumettre pour vérification.
La version de l’application passe alors aux mains des équipes de validation
de l’App Store. Il n’y a plus qu’à attendre quelques jours. Vous allez
recevoir un e-mail pour ce passage en validation et à chaque changement de
statut de votre application. Patience !
Nous en avons fini avec l’interface iTunes Connect. Passons à Google Play,
beaucoup plus simple.

Envoyez votre applica on sur Google Play

Que vous ayez simplement dupliqué le fichier index.ios.js dans le fichier
index.android.js ou que vous ayez appliqué la méthode du fichier App.js avec
ou sans navigation, vous allez pouvoir mettre votre application Android en
ligne.
Avant de nous lancer dans cette mise en ligne, assurons-nous que votre
fichier index.android.js – dans le cas de la duplication – est correct. Ouvrez-
le. Vous pouvez identifier tous les changements qui sont à pratiquer, dans
les appels de fichiers, dans la classe principale et dans le AppRegistry en le
comparant avec le fichier pour iOS. En faisant les modifications
nécessaires, vous devriez tomber sur un code comme celui-ci :

var React = require ( 'react' ) ;

var ReactNative = require ( 'react-native' ) ;
var MeteoPage = require ( './MeteoPage' ) ;
var styles = ReactNative . StyleSheet . create ({
container : {
flex : 1
}
}) ;
class myApp extends React . Component {
render ( ) {
return (
< ReactNative . NavigatorIOS
style = { styles . container }
initialRoute = { {
title : 'Météo' ,
component : MeteoPage ,
} } />
) ;
}
}
AppRegistry . registerComponent ( 'myApp', ( ) => myApp ) ;
Maintenant, nous allons ouvrir le projet Android sur Android Studio – nous
l’avons installé et configuré au début de ce livre. Lancez-le. Allez dans le
menu File puis Open.... Une fenêtre s’ouvre, vous permettant d’ouvrir le
projet :

image
Figure 6-53 – Open File or Project

Comme vous le voyez, le dossier android dans la racine du projet comporte

une icône spéciale. Sélectionnez-la puis cliquez sur OK. Android Studio va
alors ouvrir le projet en l’analysant :

image
Figure 6-54 – Android Studio ouvre le projet.

Une fois que cette petite fenêtre s’efface, il est possible qu’Android Studio
soit encore en train de traiter le projet. Vous le voyez sur la barre tout en bas
de l’interface.
Si vous n’avez pas encore testé l’application, je vous invite à lancer un
simulateur.
Nous allons voir comment envoyer une application sur le Google Play.

Créa on d’une fiche sur Google Play Developer Console

Dirigez-vous vers la page d’accueil de votre compte Google Developer :

image
Figure 6-55 – Google Play Developer Console

De cette page, vous pouvez gérer (notamment) :

• vos applications (Toutes les applications) ;
• les commandes du compte marchand Google Payments (Gestion des
commandes) ;
• votre compte (Paramètres) avec vos informations personnelles ainsi que
les détails de votre paiement.
Cliquez sur Créez une application en haut à droite, vous allez tomber sur le
formulaire de création d’application :

image
Figure 6-56 – Créer une applica on sur Google Play

Une fois ceci fait, vous tombez sur la Fiche Google Play Store, sur laquelle
tous les champs sont affichés, lors de la publication, sur la fiche Google
Play officielle.
Vous pouvez :
• gérer les versions de production, bêta et alpha de votre application ;
• catégoriser votre application (Catégorie de contenu) selon une tranche
d’âge ;
• paramétrer le prix et la disponibilité (Tarifs et disponibilité) de votre
application selon les pays ;
• gérer différents services (Services et API) comme les services de jeux
ou les notifications ;
• obtenir des conseils d’optimisation très pertinents.
Vous l’aurez compris, avec les checks grisés à droite de chaque onglet, il va
falloir passer les onglets les uns après les autres et remplir tous les champs
obligatoires, notamment la fiche Google Play Store. Regardons cela de plus
près.

Envoi de l’applica on sur le Google Play Developer Console

Rendez-vous dans l’onglet Versions de l’application. Nous allons, comme
pour l’App Store, tester l’application avant de la rendre disponible au plus
grand nombre.
Cliquez sur Gérer la version bêta :

image
Figure 6-57 – Gérer la version bêta sur Google Play Developer Console

Ensuite, sur la page suivante, cliquez sur Créer une version. Vous arrivez
sur la fenêtre d’ajout de fichiers APK pour Google Play :
 image
Figure 6-58 – Upload de l’APK sur le Google Play

De là, vous allez pouvoir nommer votre version, donner toutes les
informations sur les nouveautés de l’application, et dans toutes les langues
configurées sur la fiche Google Play Store.
Il ne manquera plus qu’à envoyer un fichier APK. Pour cela, retour sur le
logiciel Android Studio. Cliquez sur le menu Build puis sur Generate
Signed APK... :

image
Figure 6-59 – Generate Signed APK...

Le logiciel va vous demander une clé de certificat, nous allons la créer en

direct :

image
Figure 6-60 – Générer une clé de cer ficat

On vous demande dans quel dossier enregistrer la clé et de spécifier

quelques informations, je vous laisse donc le faire :

image
Figure 6-61 – New Key Store

La fenêtre précédente récupère les informations et vous pouvez alors

cliquer sur Next. Dans cette nouvelle fenêtre, vérifiez que le type de build
est bien release :

image
Figure 6-62 – Générer une applica on signée sur Android Studio

Pour pouvoir activer ces checkboxes, il est possible que vous ayez besoin
d’éditer le fichier build.gradle dans le dossier app du dossier android. Ligne 87,
modifiez buildToolsVersion :
 buildToolsVersion "25.0.0"

Android Studio va sûrement vous proposer de mettre à jour la

synchronisation du projet avec la nouvelle configuration du fichier Gradle :

image
Figure 6-63 – Android Studio propose de me re à jour la synchronisa on
du projet.

Enfin, cliquez sur Finish. Le logiciel mouline un bon coup puis c’est bon :

image
Figure 6-64 – Généré avec succès

Un fichier app-release.apk a été créé dans le dossier android. Retournez sur le

navigateur dans la gestion des versions. Cliquez sur Importer un fichier
APK et déposez-y le fichier nouvellement créé.
Une fois l’importation terminée, le numéro de la version s’ajoute
automatiquement :

Figure 6-65 – Nom de la version sur le Google Play Developer Console

Juste en dessous, vous avez un cadre dans lequel vous devez indiquer la ou
les nouveautés de la version ajoutée. C’est une information très importante,
que ce soit pour une bêta ou pour une version officielle. Cette information
doit être complétée au risque que Google Play Developer Console ne vous
autorise pas à déployer cette nouvelle version.
Cliquez sur Enregistrer puis sur Vérifier. Dans la nouvelle page, vous allez
simplement vérifier la version choisie avant de l’envoyer :

image
Figure 6-66 – Examen de la version bêta sur Google Play Developer Console

Tout en bas de la page, le bouton Lancer le déploiement en version bêta est

pour le moment grisé. Il va nous falloir étudier et remplir les différents
éléments de l’application sur le Google Play pour pouvoir lancer ce
déploiement.
Retournons au menu de votre application sur le Google Play Developer
Console :

image
Figure 6-67 – Menu de l’applica on

Nous avons le check vert à droite de Versions de l’application, signe que

tout est bon dans cette partie. Voyons les suivantes.

Les applica ons instantanées sur le Google Play Developer

Console
Les Applis instantanées Android sont des applications qui se téléchargent
instantanément depuis les résultats des recherches Google. Petite
explication.
Les applications instantanées ont été annoncées par Google lors de la
conférence développeur de 2016 et lancées petit à petit à un plus grand
nombre d’éditeurs à partir de janvier 2017. Néanmoins, ces applications
n’en sont pas. Il s’agit plutôt de modules spécifiques téléchargés par Google
depuis ses résultats de recherche. Ils sont légers – pas de plus de 4 Mo – et
très simples d’utilisation : ils gèrent souvent une fonctionnalité ou une page
de l’application, pas plus.
Ces Instant Apps ne sont pas disponibles pour tous les smartphones sous
Android, loin de là. Tandis que les téléphones créés par Google sont
compatibles – les Pixels ou encore les Nexus – de nombreux autres ne le
sont pas tels que les Samsung Galaxy et ceux de beaucoup de constructeurs.
Ce n’est donc pas une fonctionnalité très prioritaire, d’autant plus qu’elle
doit être activée. Pour cela, l’utilisateur doit aller dans les réglages, partie
Google, puis sous-partie Instant Apps.
Si, malgré tout, vous êtes toujours motivé, il va falloir changer un peu votre
application pour la rendre compatible, sous forme de modules.
Prenons un exemple. À la suite d’une recherche Google, si la page trouvée
de votre site dispose d’Instant App, Google vous affiche une indication « X
app-Instant », juste en dessous du nom de la page web trouvée. Lorsque
vous cliquez sur le fameux lien, vous visualisez temporairement la page
web en changement pendant que Google télécharge le petit module.
Instantanément, vous vous retrouvez devant l’application. Très peu
d’options seront disponibles, mais vous serez ainsi immergé directement.
Une fois à ce stade, vous pouvez faire défiler le panel de notifications pour
installer l’application complète.
Ces applications instantanées peuvent être gérées, de la même manière que
les applications classiques, sous la forme de versions alpha, bêta et de
production.

Ges on de la fiche Play Store

Avant de voir les paramètres de la fiche Play Store, parlons un peu des
menus précédents.
La Bibliothèque d’artefacts donne accès à l’ensemble des fichiers transférés
sur le Google Play Developer Console dans le cadre de la création de
versions. Il est possible d’y supprimer des artefacts et de les télécharger.
Le Catalogue d’appareils affiche la liste de tous les appareils qui peuvent
exister sous Android. Le but ? Vous proposer de contrôler des exclusions
d’installations. Sur certains appareils à très faible puissance – que ce soit en
matière de processeur, de mémoire RAM ou même de stockage – votre
application à de forts risques de planter, si ce n’est même de faire planter
complètement le téléphone de l’utilisateur, créant ainsi une mauvaise
expérience. Avant de prendre ce risque, il est de votre responsabilité
d’analyser l’ensemble de ces appareils et de tester votre application dessus.
L’objectif est de la rendre aussi légère que possible. Petite cerise sur le
gâteau, cette liste vous permet de filtrer les téléphones que vous souhaitez
selon une liste de paramètres très intéressante :

image
Figure 6-68 – Filtre dans la liste des appareils sur le Google Play Developer
Console

Par exemple, vous allez pouvoir filtrer la RAM :

image
Figure 6-69 – Filtre de la RAM sur le catalogue des appareils

Une fois le filtre placé, la liste des appareils compatibles s’affiche. Vous
pouvez alors cliquer sur l’un d’eux puis l’exclure :

image
Figure 6-70 – Exclure un appareil dans le catalogue sur le Google Play
Developer Console

Enfin, le système de Signature d’application vous permet de signer

l’application depuis un système du Google Play Developer Console.
Passons à la suite. La Fiche Play Store ! Sur celle-ci, vous allez pouvoir
saisir un titre, une description courte et une autre longue. Ensuite, les
éléments graphiques. Nous l’avons vu pour l’iTunes Connect, il s’agit de la
même chose pour le Google Play :

image
Figure 6-71 – Captures d’écran sur le Google Play

Comme le Google Play vous l’explique, les captures d’écran seront en PNG
ou en JPG sans canal alpha, d’une longueur maximale de 3 840 pixels sur
chaque côté.
Vous devez ajouter au moins deux captures d’écran et au plus huit. Par
ailleurs, l’interface précise que pour que votre application soit disponible
sur chaque plate-forme, il faut ajouter une capture d’écran pour chaque
catégorie. Pour la faire répertorier sur les smartphones, il faut donc au
moins une capture d’écran de téléphone, pour les tablettes, il faut une
capture d’écran de tablette 7 pouces et une autre de tablette 10 pouces, etc.
Ensuite, vous allez devoir ajouter une icône pour votre application ainsi
qu’une image de couverture qui apparaîtra sur la fiche Google Play Store de
votre application.
De manière facultative, vous pouvez ajouter des images et vidéos
promotionnelles.
Enfin, la classification. Il vous faut définir le type et la catégorie de votre
application puis la classification de contenu.

image
Figure 6-72 – Classifica on de votre applica on sur le Google Play
Developer Console

Enregistrez le brouillon, tout en haut de la page, puis revenez cliquer sur

Classification du contenu. Une nouvelle page s’affiche, vous expliquant le
principe de la classification de contenu. Cliquez sur Continuer.
Sur la nouvelle page, saisissez votre adresse e-mail à deux reprises puis la
catégorie de votre application. La page précise assez bien les catégories et
leurs différentes classifications.
Par exemple, les applications d’actualité ou de réseautage social vont dans
les catégories éponymes.
Les agrégateurs de contenus sont à la fois des applications de e-commerces,
des applications commerciales ou même les applications mettant à
disposition un flux constant d’informations en provenance d’autres sources.
Les catégories Divertissements et Productivité contiennent à elles deux
toutes les autres applications.
Une fois ce choix effectué, le formulaire vous pose quelques questions
supplémentaires :
 image
Figure 6-73 – Ques onnaire de classifica on sur le Google Play

Votre application contient-elle ou peut-elle contenir, par des ajouts des

utilisateurs, des éléments violents, à caractères sexuels ou potentiellement
choquants ?
Votre application permet-elle à vos utilisateurs d’interagir entre eux ou
d’échanger des contenus, comme sur les réseaux sociaux ? Donne-t-elle
accès entre utilisateurs aux positions physiques de ces derniers ? Et enfin,
donne-t-elle accès à des achats numériques ?
Après avoir renseigné ces questions, enregistrez le questionnaire puis
attribuez la classification à votre application. Une fois ce dernier bouton
cliqué, la page vous informe de la signification de la classification attribuée.
Plus les questions donneront accès à des éléments sortant du cadre
classique, plus la classification sera élevée.
Par exemple, dans le cadre de l’application météo, la classification est de
trois ans et plus :

image
Figure 6-74 – Classifica on du contenu

Attribuez donc la classification, vous retournez à la page précédente avec

l’opportunité de recommencer le questionnaire. Comme vous pouvez le
constater, dans le menu, la Classification de contenu a été cochée.
Enfin, sur la fiche Play Store, vous allez renseigner vos coordonnées ainsi
que le lien des règles de confidentialité concernant l’application.

Les tarifs et disponibilités

Dans l’onglet Tarifs et disponibilités, vous allez être amené à renseigner le
prix de votre application si elle est payante. Dans tous les cas, vous allez
définir les pays de disponibilité de cette dernière.
Pour pouvoir publier des applications payantes, vous allez devoir configurer
votre compte marchand Google Payments. Cliquez sur le lien correspondant
sur la page. Vous arrivez alors sur une fenêtre où les informations de votre
société – en tous cas les coordonnées de réception des paiements – vous
seront demandées. Une fois ce formulaire rempli, un message vous
informera que votre compte marchand Google Payments est approuvé :

image
Figure 6-75 – Message de configura on du compte Google Payments sur le
Google Play

Attention : une fois votre application publiée gratuitement, vous ne

pourrez plus repartir en arrière et la rendre payante.
Définissons l’application comme étant payante et ajoutons un prix :

image
Figure 6-76 – Ajouter un tarif à votre applica on payante sur le Google Play

Cliquez sur Ajouter un prix pour saisir le montant de l’application :

image
Figure 6-77 – Ajout d’un prix à l’applica on sur le Google Play

Contrairement à l’App Store et à l’interface iTunes Connect, Google Play

Developer Console ne permet pas de gérer dès le départ des fluctuations de
prix. Il faudra attendre que votre application soit publiée pour proposer une
promotion sur cette dernière. Cette promotion aura, tout comme sur l’App
Store, une date de début et une date de fin.
Cette promotion n’en est pas une puisque les utilisateurs ne connaîtront pas
le tarif initial en achetant votre application, ils verront directement le prix
promotionnel.
Cette promotion pourra être définie dans un nouvel onglet qui apparaîtra à
la publication de votre application. Ce dernier, nommé Présence sur le Play
Store, vous donnera accès au sous-menu Promotions relatives à une
application payante où vous pourrez créer une promotion.
Une fois le tarif défini, il faudra choisir la disponibilité de votre application
dans un ou plusieurs des 137 pays gérés par Google Play Developer
Console.
Une fois ceci fait, vous devrez indiquer si votre application est destinée aux
enfants ou si elle contient des annonces.
Ensuite, même si ça ne nous concerne pas pour le moment, votre
application pourra à terme être compatible Android Wear – les appareils
connectés –, Android TV ou même Android Auto.
Votre application pourra peut-être aussi faire partie des programmes Famille
– donnant accès à des tarifs ou des fonctionnalités en famille –, Entreprise
ou Éducation – notamment pour les écoles et tout le milieu éducatif.
Enfin, la validation des accords sera primordiale pour publier l’application.
Il faudra approuver les accords concernant les applications et les lois
américaines. Une fois coché ce qui est nécessaire, l’onglet Tarifs et
disponibilités passe au vert.

Gérer les tests de votre applica on

À partir de là, votre application devrait être publiable :

image
Figure 6-78 – Applica on prête à être publiée

En cliquant sur Fichiers prêts à être publiés, vous allez pouvoir gérer les
versions de votre application et ainsi la publier.
Sélectionnez Gérer la version puis, en dessous de la partie des Bêta, cliquez
sur Modifier la version. Vous êtes de nouveau sur le formulaire de
publication de la dernière version. Rien n’a changé depuis nos dernières
modifications. Cliquez sur Vérifier puis sur Lancer le déploiement en
version bêta.
Un petit message vous informe que votre application sera disponible pour
les bêta-testeurs uniquement. Et justement, c’est l’occasion d’en ajouter.
Confirmez votre choix et sélectionnez des testeurs :

image
Figure 6-79 – Gérer les bêta-testeurs sur le Google Play Developer Console

Sélectionnez le mode de test, par exemple Tests bêta fermés, une liste
d’utilisateurs – que vous allez pouvoir créer dans un premier temps en
cliquant sur le bouton Créer une liste, en saisissant le nom de la liste et les
adresses e-mail des testeurs – et enfin une adresse e-mail ou une URL pour
l’envoi des feedbacks.
L’URL d’activation sera affichée dès que la publication de l’application
sera concluante. Cela peut prendre un petit peu de temps lors de la mise en
ligne de la première version, le temps de créer la fiche Play Store et de
générer les premières informations.
Actualisez régulièrement la page et vous découvrirez à un moment ou un
autre le lien d’activation. Vous avez le temps d’aller boire un
rafraîchissement. Soyez patient, le déploiement peut prendre plusieurs
dizaines de minutes.
Ce lien d’activation devra être envoyé manuellement à vos testeurs sur leur
adresse e-mail car ce n’est pas automatique. Après avoir cliqué dessus, ils
seront redirigés vers une page où ils devront valider leur statut de testeur :

image
Figure 6-80 – Fenêtre de testeurs sur Google Play

Ensuite, la fiche Play Store de bêta s’affichera si l’utilisateur est connecté

avec son compte testeur. Dans le cas contraire, une erreur s’affichera. De
même sur le téléphone Android de l’utilisateur, l’application sera disponible
directement depuis le Google Play :

image
Figure 6-81 – Fiche Google Play Store de Test

Avant de voir comment publier votre application en production, regardons

rapidement comment gérer les promotions sur cette application – payante
malgré la bêta, je le rappelle.
Allons dans l’onglet Présence sur le Play Store, puis dans Promotions
relatives à une application payante. Enfin, sélectionnez Créer une
promotion :

image
Figure 6-82 – Créer une promo on sur le Google Play Developer Console
Dans ce formulaire, donnez un nom à cette promotion – par exemple
Marketing –, une période et un prix, puis validez.
Attention, plusieurs contraintes s’appliquent aux promotions sur Google
Play Developer Console :
• Vous ne pouvez pas définir plusieurs promotions simultanément, même
en mettant leurs dates de début et de fin les unes après les autres.
• Une promotion ne peut pas durer moins d’une journée ni durer plus de
huit jours.
• Une promotion ne peut en suivre une autre moins de 30 jours après la
fin de la première.

La publica on de votre applica on

Après avoir reçu de nombreux feedbacks de vos testeurs et passé du temps à
améliorer les fonctionnalités et corriger les bogues, il est temps de
transférer votre application en production. Bien sûr, vous pouvez passer par
la phase de tests de bêta ouverte, mais nous allons passer cette étape pour
cette fois-ci.
Pour publier votre application en production, deux solutions : transférez la
nouvelle APK en production ou passez la version bêta en production. Pour
le téléchargement de la nouvelle APK, vous savez déjà comment faire. Il
suffit d’aller dans les versions de l’application et de créer une nouvelle
version en production.
Pour passer votre version bêta en production, c’est encore plus simple. Dans
le cadre en dessous des bêta-testeurs, vous allez pouvoir le faire :

image
Figure 6-83 – Passer la bêta en produc on

Ici, vous pourrez modifier la version concernée et surtout Créer la version

de production. Ce bouton va dupliquer cette version bêta en version de
production et copier le numéro et les nouveautés de la version. Vous n’aurez
plus qu’à la vérifier puis Lancer directement le déploiement en version
production.
C’est chose faite ! Votre application est désormais officielle.
Petite précision, même si cela paraît évident : il est tout à fait possible de
gérer une version alpha, une version bêta et une version production en
simultané. Ne perdez simplement pas vos testeurs dans cette multitude de
versions.
 7
Marke ng et communica on des
applica ons

U lisons le bouche-à-oreille pour démarrer

Vous venez de déployer votre application sur les stores et êtes donc fin prêt
pour vous lancer dans une campagne marketing d’envergure !
Nous allons définir une campagne en plusieurs étapes. En effet, inutile de
lancer une opération marketing sur une application qui n’est peut-être pas
achevée ou qui présente des bogues que vous n’aurez pas imaginés.
Dans un premier temps, nous allons utiliser un allié de poids pour faire
venir de nouveaux utilisateurs sur votre application : le bouche-à-oreille. Ce
marketing, dit « guérilla » est totalement gratuit. Inutile de dépenser une
fortune si votre application ne fonctionne pas. Ensuite, nous attaquerons un
test grandeur nature puis nous mènerons des campagnes marketing.

Améliora ons et correc ons : le feedback u lisateur

Un des principaux intérêts de cette première phase va être de récupérer des
retours – ou feedbacks – utilisateur, c’est-à-dire de demander aux usagers
leur avis sur votre application.
Cette opinion peut se porter sur des fonctionnalités manquantes, sur des
bogues ou même sur des éléments qui ne correspondent pas aux besoins des
utilisateurs. Il est en effet possible que vous ayez mal estimé une
fonctionnalité. Ce n’est pas une honte ou une maladresse, mais juste un
besoin que vous aviez vous-même et vous allez vous rendre compte que la
majorité de vos utilisateurs attendent autre chose.
L’effet de groupe est très important, il ne doit pas être négligé. Si cela vous
arrive, deux choix s’offrent à vous : proposer une fonctionnalité similaire
qui réponde aux besoins de vos utilisateurs ou remplacer purement et
simplement la fonctionnalité actuelle. Le premier cas de figure a le mérite
de répondre à tous types de besoins, mais se doit de rester intuitif, simple.
Le second permet simplement de répondre aux besoins de la masse,
délaissant peut-être une fonctionnalité qui pourrait être utile pour un petit
nombre d’utilisateurs, mais garante d’une application très simple et
intuitive.
Ce feedback peut se faire de différentes manières :
• Par l’intermédiaire de campagnes par e-mail. Elles sont bien souvent
gratuites au lancement d’une application car le nombre d’utilisateurs
reste limité. Ces campagnes permettent de demander leur avis aux
destinataires. Cette solution est à utiliser avec parcimonie puisque cela
peut être considéré comme du spam et l’utilisateur peut se sentir obligé,
écrivant ainsi un retour utilisateur qui ne sera pas intéressant ni
pertinent.
• Via Facebook, Twitter, Instagram et les autres réseaux sociaux. En effet,
nous le verrons plus loin, mais la création d’une page Facebook va se
révéler primordiale pour lancer le bouche-à-oreille. Quoi de mieux
qu’une communauté réunissant deux milliards de personnes pour faire
parler de vous ? Facebook peut être un moyen simple et concret de
demander leur avis à vos utilisateurs et de leur répondre. Aucun
problème si un utilisateur dévoile un bogue (même une faille critique)
tant qu’il est corrigé rapidement. Et au contraire, votre rapidité de
correction sera la preuve que vous travaillez sans relâche pour améliorer
votre application.

Choix du logo
Cette phase de lancement de votre application sera le dernier moment pour
choisir ou changer de logo. Vous n’aurez pas énormément d’utilisateurs
(comparé aux millions qui viendront par la suite !) et vous ne risquerez pas
trop de déstabiliser l’utilisateur qui a téléchargé votre application, encore
peu habitué au logo présent sur la page d’accueil de son smartphone.
Attention au logo malgré tout. Comme vous le savez, il apparaîtra partout !
Dans les listes de recherche, sur la fiche de l’App Store et du Google Play
et surtout sur l’écran d’accueil du téléphone portable de l’utilisateur.

Lancement en douceur ou open bar

Dans cette phase de lancement, qui devrait vous permettre de récupérer
jusqu’à plusieurs centaines de milliers d’utilisateurs, une solution consiste à
mettre en place un lancement sur invitation ou sur file d’attente.

Lancement sur invita on

Le lancement sur invitation a le bénéfice de faire travailler le bouche-à-
oreille, mais implique d’attiser réellement la curiosité de l’utilisateur.
En effet, une personne qui peut inviter cinq utilisateurs – par exemple –
aura le mérite de faire parler de votre application autour de lui. Mais cela
doit être bénéfique pour cet utilisateur. Par exemple en gagnant des cadeaux
ou même tout simplement des amis sur votre application.
Limiter le nombre n’est peut-être même pas une bonne idée. L’utilisateur
pourrait très bien inviter 100 personnes dont dix s’inscriraient réellement.
Cela lui ferait gagner des options pour avoir fait s’inscrire les dix nouveaux
utilisateurs, mais les 90 autres, bien que non inscrits, auront au moins
probablement vu le nom de l’application, dans leur e-mail, leur message ou
quoi que ce soit d’autre. C’est un début.

Lancement sur file d’a ente

Le lancement sur file d’attente est également un moyen de faire parler de
vous sans trop de difficulté. Que ce soit une file d’attente réelle – si vous
craignez que votre application ne devienne trop populaire trop rapidement
et engorge vos serveurs – ou fictive – « oh, il y a une file d’attente, il doit y
avoir besoin de demander ! ».

Êtes-vous prêt ?
Votre application est utilisée par votre clientèle depuis quelques semaines ?
Elle a attiré, via des publications sur les réseaux sociaux, plusieurs
centaines de milliers d’utilisateurs ? Vous avez corrigé plusieurs dizaines,
voire centaines de bogues et vous avez amélioré certaines fonctionnalités à
la demande des utilisateurs ou selon votre planning prévisionnel ?
Alors vous êtes prêt !

Déterminons votre campagne marke ng

Maintenant que vous avez mené à bien votre guérilla, autrement dit votre
campagne de communication, il est temps de parler du marketing, le vrai.
Avant toute chose, nous allons découvrir comment se définit ce genre
d’opération puis analyser les termes clés du marketing. Ensuite, nous
étudierons les objectifs de votre campagne.

Défini on d’une campagne marke ng

La campagne marketing se définit par :
• un budget ;
• une durée ;
• au moins un visuel ;
• au moins un placement médiatique.
Le budget ainsi que la durée seront les variables principales du succès de
votre campagne. Effectivement, plus elle durera longtemps et disposera
d’un budget conséquent, plus vous serez susceptible d’être visible auprès de
nombreux mobinautes et donc de ramener de nouveaux utilisateurs.
Le visuel constitue la partie émergée de l’iceberg. Il se doit donc d’être
frappant pour attirer l’œil du nouvel usager. Enfin, le placement médiatique
en sera la pierre angulaire. Grâce à lui, vous pourrez attirer de nombreux
utilisateurs, tout comme vous pourriez faire un flop. Ce choix est donc
crucial.

Le lexique du marke ng
Avant d’aller plus loin, il est temps d’étudier un peu la terminologie propre
au marketing, pour savoir de quoi l’on parle et pour comprendre les équipes
marketing qui travailleront peut-être avec vous dans peu de temps, qu’elles
soient internes ou via une agence spécialisée.

Les coûts
Les coûts disposent de leurs acronymes spécifiques. En voici une liste
exhaustive.
• Le CPM, à savoir le coût par 1 000 impressions. Il s’est largement
généralisé dans le milieu du marketing et notamment dans le domaine
du Web. Le mobile introduit de nouveaux usages, mais il y est malgré
tout très représenté.
• Le CPC ou le coût par clic. Une fois l’impression réalisée sur l’écran du
smartphone de l’utilisateur, il sera susceptible de cliquer pour
télécharger votre application et s’y inscrire.
• Le CTR aussi connu comme ratio clics/impressions (clics-through-rate
en anglais). Il s’agit du pourcentage d’utilisateurs qui ont cliqué en
voyant la publicité.
• Le CPI ou coût par installation. L’utilisateur a vu votre publicité, a
cliqué dessus et a téléchargé l’application. Jackpot, vous aurez
probablement dans peu de temps un nouvel utilisateur.
• Le IR, autrement le ratio installations/impressions (installation-rate en
anglais). L’utilisateur a vu votre publicité, a cliqué dessus et a téléchargé
l’application.
• Le CPA, à savoir le coût par action. Il s’agit par exemple d’une création
de compte. La boucle est bouclée.
• Le CPS, aussi appelé le coût par vente (sale en anglais). Il peut s’agir
par exemple du premier achat de l’utilisateur.
• Le CPL ou coût par prospect (lead en anglais). Par exemple un
utilisateur qui a donné son nom et son adresse dans une application de
recherche.
• Le CPE, connu comme étant le coût par engagement. Par exemple, un
joueur qui a atteint le troisième niveau d’un jeu vidéo mobile.
• Le CPV ou coût par vue (view en anglais). Principalement utilisé en
format vidéo, il s’agit de payer pour chaque vidéo entamée.
• Et enfin, le CPCV, aussi baptisé coût par vue complète (complete view
en anglais). Encore une fois principalement utilisé dans le format vidéo,
il s’agit de payer pour chaque vidéo entièrement visionnée.
Une fois que vous avez défini le type de coût souhaité, vous allez pouvoir
utiliser des outils de mesure.

Les op ons
Les options de ciblage sont nombreuses et permettent de diffuser votre
publicité à l’audience que vous estimez la plus à même de s’inscrire. Les
voici présentées.
• Démographique : il s’agit de cibler les utilisateurs par leur âge, leur sexe
ou leur localisation – qu’il s’agisse du pays, de la ville, de la rue et
même du numéro de la rue pour un ciblage précis.
• Psychographique : il s’agit de la catégorie socio-économique cible de
votre application. On peut également viser des utilisateurs avec des
affinités particulières (voyages, finances, jeu, etc.) ou des activités
spécifiques (usage régulier des réseaux sociaux, photographie,
équitation, danse, informatique et j’en passe).
• Comportement mobile : il s’agit plus précisément de cibler les
utilisateurs faisant régulièrement ou récemment usage d’une certaine
application. On peut également parfois s’intéresser aux utilisateurs selon
les applications présentes sur leur smartphone ou encore pour les sites
web visités récemment.
• Mobile : on peut cibler un utilisateur selon son téléphone, sa marque,
son modèle, qu’il s’agisse d’un smartphone ou d’une tablette. On peut
également viser un système d’exploitation en particulier et même une
version. Enfin, on va pouvoir opter pour un opérateur téléphone ou un
mode de connectivité (Wi-Fi, 3G, etc.).
Une autre option, qui ne dépend pas des utilisateurs à proprement parler, est
disponible : l’option de temps de validité de votre campagne marketing.
Combien de fois par jour et/ou par campagne votre publicité va être affichée
à l’écran du même mobinaute ? Il est également possible de programmer
des heures du jour et des jours de la semaine où la campagne va être visible.
Enfin, il est possible de gérer le mode de dépense du budget : au plus vite
ou bien réparti sur la journée ou même sur toute la durée de la campagne.

La vie de l’u lisateur

Dans les applications de jeux plus que les autres, la valeur vie client – Long
Time Value ou « LTV » en anglais – va être déterminante.
En effet, une campagne marketing sert tout autant à amener de nouveaux
clients sur votre application qu’à réengager les clients déjà présents.
Néanmoins, ceux qui sont déjà présents ont une durée de vie prédéfinie. Par
exemple, dans une application de jeu, la durée de vie maximum est estimée
à trois mois. Dans les applications de productivité, c’est généralement plus
long et avec parfois des abonnements ou un usage gratuit.
Jusqu’à la fin de la durée de vie présumée d’un client, nous allons pouvoir
associer certains indices concernant la monétisation de ce dernier. L’idée
étant que le coût de l’affichage de la campagne ne doit pas dépasser le
revenu que peut rapporter l’utilisateur.
Voici quelques indices de monétisation :
• ARPDAU : le revenu moyen par utilisateur journalier actif (ou Average
Revenue Per Daily Active User en anglais) ;
• ARPPU : le revenu moyen par utilisateur payant (ou Average Revenue
Per Paying User en anglais) ;
• ARPU : le revenu moyen par utilisateur (ou Average Revenue Per User
en anglais).

Le retour sur inves ssement

C’est un terme que vous verrez partout. En marketing, il existe également.
Le retour sur investissement doit se mesurer tout au long de la campagne et
ne doit pas aller en dessous des 70 %.
Il se calcule de la façon suivante :
C’est-à-dire :

Définissons correctement votre campagne CPI

Quels sont les objectifs de votre campagne ? Généralement, elle a pour but
d’amener un utilisateur sur l’application, qu’il s’inscrive, voire qu’il crée du
contenu.
Les campagnes marketing sont en général vivement conseillées pour que
votre application tienne en matière de modèle économique. En effet, même
la meilleure application n’aura pas de succès sans campagne marketing
régulière.

Les réseaux sociaux et le marke ng

Maintenant que nous avons vu et défini ce qu’était une campagne
marketing, nous allons envisager les plates-formes de diffusion de votre
campagne.
Quand on pense à la publicité, la plupart des utilisateurs y voient le géant de
la recherche le plus connu dans le monde : Google.
Il est vrai que se faire une place sur Google est déterminant. Pas suffisant,
certes, mais décisif. En effet, il faut savoir que 27 % des applications sont
trouvées grâce à une simple recherche Google. Qu’il s’agisse de personnes
qui recherchent « jeu mobile fun » ou qui tapent directement le nom de
l’application, elles sont toutes susceptibles de découvrir votre application.
Et les résultats payants sur Google pourront les aider.
Pas de panique par ailleurs. Il a été prouvé que, au lieu de réduire le nombre
de clics sur les résultats organiques (les résultats gratuits) de votre
application, doubler la visibilité de ces résultats grâce aux résultats payants
augmente le nombre total de clics sur votre application.
Mais partons un peu plus loin à la recherche des plates-formes marketing du
XXIe siècle. Je vous présente les réseaux sociaux. C’est effectivement sur ces
derniers que nous allons nous essayer au marketing. Je vous présenterai par
la suite les réseaux sociaux pour leur côté social.

Facebook
Aucune surprise, vous avez certainement pensé à Facebook aussi. Et pour
cause, deux milliards d’utilisateurs gravitent sur ce réseau. Avec Google, ils
brassent tous deux plus de la moitié de la publicité mondiale. Facebook
génère 80 % de ses revenus grâce à la publicité, soit 4,5 milliards de dollars.
Aujourd’hui, Facebook est utilisé plus de 80 % du temps sur mobile, ce qui
est une aubaine dans la recherche de mobinautes pour votre application.
Mieux encore, plus de 20 % du temps passé sur mobile est consacré à
Facebook.
Grâce à Facebook, vous allez pouvoir cibler les utilisateurs que vous voulez
grâce à des données démographiques de précision. Comme vous le savez,
les publicités de ce réseau sont parfois intégrées au sein même du fil
d’actualité, ce qui les rend plus naturelles, moins intrusives et donc plus
propices aux clics des utilisateurs.
Alors qu’attendez-vous ? Aucune campagne marketing n’est complète sans
Facebook, lequel met à votre disposition des outils marketing puissants.
Vous allez pouvoir diffuser le nom de votre application, un petit descriptif
et même une image.
Par ailleurs, les tarifs ne sont pas exorbitants et Facebook ne vous fait payer
que ce qui est réellement utilisé. En effet, si une campagne attire le nombre
voulu d’utilisateurs avant l’échéance, la fin de la campagne n’est pas
facturée.

Twi er
Le second réseau social le plus prisé des utilisateurs est sans conteste
Twitter. Du haut de leurs 140 caractères, les messages des utilisateurs sont
succincts et retiennent donc l’attention de leurs lecteurs.
Sur Twitter, la publicité est également très intéressante. On peut utiliser les
publicités simples sous forme de texte ou les agrémenter d’images et même
de vidéos.
Les images apportent souvent plus de 20% de clics en plus, plus de 90 % de
likes en plus et même parfois plus de 150% de retweets supplémentaires.
Les vidéos peuvent être publicitaires – bandes annonces, présentation, etc. –
ou directes, comme via le réseau social Periscope, qui appartient désormais
à la même société.
Concernant les outils marketing, comme pour Facebook et Google, ils sont
très puissants. Ils permettent un ciblage très précis des résultats ainsi qu’une
mesure en direct par un outil d’analyse.

Snapchat
Avant même de penser à Snapchat, il faut penser à son audience. Ce réseau
de photos et de vidéos éphémères est utilisé principalement par les
Millennials. Vous souvenez-vous ? Ces personnes nées entre 1980 et 2000
qui représentent une bonne partie de la population ? Si votre application
cible – exclusivement ou en partie – cette audience, alors l’utilisation de
Snapchat dans votre campagne marketing est à étudier. Il faut dire que sa
montée en puissance a été spectaculaire et il est encore trop peu utilisé dans
le cadre du marketing des entreprises.
Concernant les chiffres, Snapchat, c’est 100 millions d’utilisateurs actifs qui
diffusent photos et vidéos, courtes, au format vertical. C’est également 10
milliards de vidéos par an et ce chiffre est en constante augmentation.
Niveau marketing, Snapchat vous propose trois formats.
• L’utilisation de vidéos enrichies de dix secondes dans leur fil
d’actualité. Si l’utilisateur balaie cette vidéo, elle sera suivie par un spot
vidéo plus long, par un article ou par un call-to-action, etc.
• L’utilisation de filtres géolocalisés. Ils se superposeront aux photos et
vidéos prises dans les endroits prédéterminés.
• L’utilisation de lentilles sponsorisées. Il s’agit de créer un filtre qui
modifie les selfies des utilisateurs.
Ces trois formats contribuent à l’image et à la visibilité de votre application
via le contenu de Snapchat.
Voilà pour les possibilités marketing des plus grands réseaux sociaux
mondiaux. D’autres solutions sont possibles mais il serait trop long d’en
faire la liste exhaustive. Maintenant que nous avons parlé des réseaux
sociaux du point de vue marketing, parlons de leur utilisation pure et
simple. Vous allez voir que ces trois acteurs vont avoir une place
prédominante dans votre communication.

Les réseaux sociaux et la communica on

Reprenons donc nos trois réseaux sociaux pour établir votre communication
à l’échelle mondiale au sein de votre clientèle, présente et future.

Facebook
Vous le savez, la communication passe en priorité par Facebook.
Publications, annonces, photos, vidéos, le réseau diffuse votre
communication à très grande échelle et les contenus peuvent être
sponsorisés via le marketing pour atteindre une audience plus large.
Aujourd’hui, créer une page Facebook est presque aussi important que
d’avoir son nom de domaine avec son site, c’est s’assurer d’une première
visibilité. C’est comme cela que la phase initiale de marketing, celle
gratuite que l’on nomme « guérilla », va pouvoir se faire.
Dans l’usage, Facebook servira également à la relation client, notamment
via la plate-forme Messenger qui est de plus en plus utilisée et dont les
chatbots, ces assistants virtuels, vous serviront, à terme, à gérer plusieurs
dizaines (de milliers ?) de discussions simultanées avec vos utilisateurs.
Les chatbots sont en train de se généraliser sur de nouveaux services de
messagerie et assureront probablement plus tard l’ensemble de la première
phase de relation client : la prise de contact. Leur intelligence artificielle
permet déjà et permettra, en progressant jour après jour, de servir les clients
du mieux qu’ils peuvent.

Twi er
Quand on évoque la relation client, Twitter arrive généralement en pole
position. En effet, la plate-forme est bien connue pour ses facultés à ce
sujet. Ses 140 caractères sont devenus tout un symbole.
De nombreuses catégories socio-professionnelles ont fait de Twitter leur
territoire de communication : les artistes, les développeurs, les hommes
politiques et même les marques. Le réseau social comptabilise plus de 310
millions d’utilisateurs mensuels.
De nos jours, près de 60 % des marques ont plus de 100 000 followers et
plus de la moitié des utilisateurs de Twitter sont entrés en interaction avec
une marque après l’avoir vue dans un tweet, dans un retweet, sur un site
web ou même dans une recherche Google.
Selon certaines études, avoir son compte Twitter et communiquer avec ses
followers permet d’augmenter l’indice de satisfaction client de 20 % ! Ce
n’est donc clairement pas négligeable même si, en définitive, il s’agit d’un
métier à part entière, celui de community manager.

Les autres
Bien sûr, d’autres réseaux sociaux et outils de communication peuvent être
grandement enrichissants pour votre communauté.
Par exemple, Instagram favorise de plus en plus la communication à travers
des photos postées sur son réseau. Le bouche-à-oreille marche très fort et la
communication via les photos est vraiment très appréciée des internautes.
De même, bien que négligé et laissé à l’abandon, Google+ est un réseau
social utilisé par plus de 100 millions d’utilisateurs actifs. Certes, l’usage
est bien moins important que celui de Facebook, mais il n’en reste pas
moins un média sur lequel vous pouvez interagir.

Mises à jour et no fica ons

Avant de passer à la partie consacrée à la monétisation de votre application,
abordons un dernier point relatif à l’augmentation de votre visibilité. Ce
sont les mises à jour et les notifications. Petit tour d’horizon.

Les mises à jour

Comme nous l’avons vu dans les chapitres précédents, Apple et Google
favorisent beaucoup les applications qui sont régulièrement mises à jour.
Outre les avis (notes et commentaires) qui sont différenciés selon qu’ils
concernent la dernière mise à jour ou les précédentes, la date de la dernière
mise à jour elle-même est prise en compte.
Ainsi, une application qui est souvent mise à jour est une application qui
évolue, ce que les stores apprécient énormément. Sans être un critère
prédominant, cela peut être un élément de choix entre votre application et
une concurrente. De même, le signal envoyé est très positif dans l’esprit de
vos utilisateurs, car cela montre que vous tenez compte de leurs avis, de
leurs besoins et que vous améliorez vos services en continu.
Le seul problème des mises à jour, ce sont les délais. En effet, il faudra
compter entre un et quatre jours sur l’App Store. Bien que ces délais soient
en nette diminution par rapport aux années précédentes, la différence reste
notable surtout si on les compare aux délais de Google Play, où la mise à
jour est immédiate. Mais voilà, Apple souhaite vérifier chaque application
et cela passe par une phase de test de leur équipe, qui amène vers
l’acceptation, vers la modification ou vers le refus pur et simple.

Les no fica ons

Nous connaissons tous les systèmes de notification. Que ce soit des SMS,
des notifications de Facebook de la part de vos amis ou encore des
notifications par e-mail, elles ont un but concret : vous amener sur
l’application en question.
Si votre application dispose d’une messagerie, il pourrait être intéressant –
voire indispensable ! – d’envoyer des notifications pour avertir l’utilisateur
en cas de nouveau message. Mais outre cet usage, les notifications peuvent
servir du point de vue marketing.
En effet, elles peuvent servir à rappeler à l’utilisateur que votre application
existe. Qu’il s’agisse d’un jeu laissé à l’abandon par l’utilisateur depuis
plusieurs jours, voire semaines, d’une application de productivité qui n’est
plus utilisée ou quoi que ce soit d’autre, les notifications sont un bon moyen
de refidéliser la clientèle, de la réengager.
Attention cependant à ne pas en abuser. Tandis que la première sera à
double tranchant (l’utilisateur peut très bien la masquer comme cliquer
dessus), les suivantes, dans le cas où la première aurait été masquée,
risquent bien de conduire l’utilisateur à supprimer purement et simplement
votre application de son smartphone. Et là, plus moyen de faire quoi que ce
soit. Votre utilisateur n’est alors plus actif et il faudra le séduire à nouveau
au même titre qu’un nouvel usager.
Au contraire, la mise à jour constitue un bon moyen d’utiliser les
notifications avec parcimonie et de manière efficace. Chez bien des
utilisateurs, les mises à jour Google Play et App Store sont automatiques.
L’utilisateur peut remarquer la mise à jour de votre application, mais à côté
d’une voire plusieurs dizaines d’autres mises à jour d’application, il y a un
risque de tomber dans la masse et de ne pas avoir l’attention de l’utilisateur.
Dans ce cas, si la fonctionnalité ajoutée était demandée de longue date ou si
elle améliore quelque chose de particulier, novateur ou important, il peut
être intéressant d’en informer l’utilisateur. Cela permet de le fidéliser
davantage, de le réengager le cas échéant.
Nous en avons fini avec le marketing. Place désormais à la monétisation de
votre application !
 8
Analyses et sta s ques de vos
applica ons

Analyse de votre applica on sur l’App Store

Vous avez déployé votre application sur l’App Store et les premières
dizaines voire centaines d’utilisateurs l’ont téléchargé ? Il est temps
d’analyser tout cela pour connaître le nombre exact de téléchargements,
d’impressions, de ventes, de sessions et même le nombre de pannes – dans
le cas de pannes détectées par iOS.

Les sta s ques de votre applica on

Pour en savoir plus sur ces tendances, rendez-vous sur la page des Analyses
des apps d’iTunes Connect : https://analytics.itunes.apple.com/.
Nous arrivons alors sur une page de statistiques :

Figure 8-1 – Accueil des Analyses des apps sur l’iTunes Connect

Sur cette page, vous voyez directement l’ensemble des statistiques sur
chacune de vos applications. Vous allez également pouvoir établir ces
statistiques sur différentes périodes.
Ces premières données vous donnent une bonne indication de l’évolution de
l’utilisation de votre application à travers le temps, avec des pourcentages
d’utilisateurs supérieurs et inférieurs et un nombre très précis d’usagers.
Vous allez donc savoir si votre application est de plus en plus utilisée – le
bouche-à-oreille fonctionne –, stagne – il va falloir redoubler d’efforts en
marketing pour conserver vos utilisateurs actuels ou en convertir de
nouveaux – ou est de moins en moins utilisée – déclin temporaire ou signe
avant-coureur ?
Pour information, ces analyses ne peuvent provenir que des données des
utilisateurs ayant accepté de partager leurs diagnostics avec les
développeurs d’applications. Vous pouvez consulter leur nombre en
cliquant sur le point d’interrogation à droite de À propos des données
d’Analyses des apps. Actuellement, Apple m’informe qu’au cours de 30
derniers jours, 33 % des utilisateurs ayant installé des applications ont
accepté de partager leurs données.
 Figure 8-2 – Partage de données avec Apple et les développeurs ers sur
l’iPhone

Si vous souhaitez activer le partage des diagnostics sur votre iPhone et ceux
de vos collaborateurs, voici la procédure :
1. Allez dans l’application Réglages.
2. Puis dans la partie Confidentialité.
3. Tout en bas, allez dans Analyse.
4. Activez Partager l’analyse ou Partager l’analyse (iPhone+Watch) dans
le cas où une Apple Watch est associée à votre iPhone. En effet, l’Apple
Watch transmet à l’iPhone énormément d’informations collectées.
5. Enfin, activez Partager, ainsi vous aidez les développeurs
d’applications – c’est-à-dire vous et vos confrères – à améliorer leurs
créations en autorisant Apple à partager avec eux les données liées aux
pannes et les statistiques que nous allons voir.
6. Cliquez sur le nom de l’application dont vous voulez étudier les
statistiques et vous arrivez sur une page très complète.

Figure 8-3 – Sta s ques d’une applica on sur l’iTunes Connect

Que voit-on sur ces graphiques ? On retrouve le nombre d’impressions,

ainsi que le nombre de visualisations de la page produit – autrement dit la
fiche App Store – de l’application. On y visualise aussi le nombre de
téléchargements de l’application.
Ensuite, on retrouve le nombre de ventes – cette application étant gratuite
sans téléchargements in-app, la vente ne peut naturellement dépasser le 0 –
ainsi que le nombre de sessions, d’appareils actifs – extrêmement liés – et
de pannes.
Enfin, la carte du monde représente l’utilisation de l’application avec des
statistiques concernant les appareils, partagés entre l’iPhone, l’iPad, l’iPod
et l’Apple TV.
Sur cette page, le point d’interrogation à droite de À propos des données
d’Analyses des apps s’est affiné et affiche désormais le taux d’acceptation
de partage des données des utilisateurs sur les 30 derniers jours.
Dans mon cas, pour une application peu utilisée, c’est 0 %, mais vous aurez
peut-être plus de chance pour une application grand public.
Comme vous avez pu le constater, nous étions ici dans l’onglet Aperçu,
passons à l’onglet Indicateurs. Dans ce deuxième onglet, vous allez pouvoir
visualiser de manière beaucoup plus détaillée l’ensemble des graphiques
dans le temps. Avoir une représentation des installations des applications
jour après jour sur une période donnée est très intéressant.

Les sources de téléchargement de votre applica on

Comme nous l’avons vu précédemment, les données concernant les sources
de vos utilisateurs pour la visualisation, l’installation ou l’utilisateur de
votre application vont être extrêmement précieuses. Cela va nous permettre
de savoir d’où viennent vos utilisateurs, que ce soit d’une recherche précise
dans l’App Store, d’une navigation classique ou même d’une application
mobile ou site référent.
Ces données sont disponibles dans l’onglet éponyme.

Figure 8-4 – Sources de téléchargement de votre applica on dans l’iTunes

Connect
Comme partout dans cette analyse, vous allez pouvoir choisir la période
souhaitée, mais également sélectionner les sources d’une action en
particulier : simple visualisation de la fiche produit, installation ou même
impression en passant par les sessions ou les ventes, les données de sources
sont très rigoureuses et profitable.
Attention, cela dépend toujours exclusivement des données que vos
utilisateurs acceptent de transmettre à Apple.

Figure 8-5 – Sources dans l’iTunes Connect

Bien sûr, vous allez pouvoir comparer les différents graphiques de manière
à voir, par exemple, où s’arrêtent le plus fréquemment vos utilisateurs entre
la découverte de l’application et l’achat in-app.
Prenons un exemple. Sur le dernier mois, 1 000 utilisateurs ont découvert la
page produit de votre application – 500 via une recherche directe sur l’App
Store, 250 en navigant dans le magasin d’application et 250 par
l’intermédiaire de liens que vous avez diffusés sur différents réseaux
sociaux. Sur tous ces utilisateurs, 70 % ont téléchargé l’application. Sur
tous ces utilisateurs, 90 % l’ont ouverte – cela ne fait déjà plus que 630
utilisateurs ! Sur ces 630 utilisateurs, 570 ont eu le courage de se créer un
compte ou s’y sont simplement connectés – ces données, ce sont vos
propres statistiques qui pourront vous les donner et non Apple. Plus
exactement, 420 avaient déjà un compte tandis que les 150 restants se sont
inscrits. Sur l’ensemble des utilisateurs, 140 ont acquis des achats in-app –
rappelons que l’application était gratuite. Cela ne fait donc que 14 % des
utilisateurs initiaux, ce qui est relativement peu, il faut l’avouer.
La morale de cet exemple, si on l’imagine concret, c’est que sur la totalité
des utilisateurs qui ont pu découvrir l’application sur l’App Store, beaucoup
l’ont utilisé au moins une fois – plus de 60 % des utilisateurs – mais peu ont
acheté des fonctionnalités payantes – moins de 15 %. On peut en conclure
soit que vos articles sont trop chers, soit qu’ils ne sont pas suffisamment
attractifs, soit les deux.
Un autre exemple, beaucoup moins réjouissant mais plausible durant la
phase bêta, serait de constater que sur 100 % des sessions effectuées sur
l’application – peu importe le nombre de vues de la page produit ou le
nombre d’installations –, 70 % ont conduit à une panne de cette dernière. Il
serait temps de passer à une phase critique de débogage.

Les ventes et tendances de votre applica on

La rubrique Ventes et tendances de l’iTunes Connect, disponible depuis la
page d’accueil via l’icône éponyme ou depuis l’adresse
https://reportingitc2.apple.com, vous donne toutes les informations
concernant vos ventes.
Vous l’aurez compris, c’est une partie similaire aux Analyses des apps, mais
dont l’accent est mis sur la vente :
 Figure 8-6 – Ventes et tendances sur l’iTunes Connect

Dans cette partie, l’outil d’iTunes Connect donne des graphiques et des
vues préconfigurées, mais vous pouvez créer vos propres vues en cliquant
sur le titre Ventes en haut à gauche de la page, puis sur Rapports.
Sans pour autant élaborer des vues dès le départ, vous allez pouvoir filtrer
le contenu de ces graphiques. Par exemple, selon le territoire et l’appareil.
Ici, je choisis l’iPhone en Europe :

Figure 8-7 – Filtres du rapport de ventes sur l’iTunes Connect

Cliquez sur Enregistrer vous laisse le choix du nom pour enregistrer le

rapport pour une future consultation :
 Figure 8-8 – Rapports enregistrés dans l’iTunes Connect

Vous pouvez ensuite consulter les données de ventes de manière affinée.

Ces données, vous pouvez également les télécharger en cliquant sur l’icône
en haut à droite du graphique visible, au format CSV, XLS ou même en les
copiant dans votre Presse-papiers.

Les notes des u lisateurs

Nous l’avons vu précédemment, les notes et les avis des utilisateurs sont
particulièrement intéressants. Ils servent à la fois à comprendre les besoins
et les problématiques de vos utilisateurs, mais aussi à remonter vos
applications dans la liste des recherches naturelles.
En effet, outre le fait d’offrir de meilleures fonctionnalités aux utilisateurs,
les mises à jour permettent de prouver à Apple que votre application est
régulièrement mise à jour et qu’elle s’améliore petit à petit.

La consulta on sur mobile

L’anecdote est intéressante à noter : sachez qu’Apple a conçu une
application mobile à proprement parler pour visualiser les applications,
leurs statistiques et leurs ventes. Elle est disponible en visualisation
uniquement, mais vous y retrouverez exactement les mêmes données que
sur le site Internet.
 Figure 8-9 – Visualisa on des graphiques sur l’applica on Connect sur iOS

Comme vous pouvez le constater, l’onglet Details vous donnera l’état de

l’application sur l’App Store, les informations sur l’application – telles que
le nom, le lien de confidentialité, l’identifiant unique et bien d’autres
données visibles notamment sur la page produit sur l’App Store.
Dans l’onglet Trends, vous pourrez accéder aux ventes et aux différentes
données. En cliquant sur Units – à droite de View sur l’écran de la figure 8-9
–, vous aurez accès notamment aux vues et aux mises à jour.
Cette application pourra s’avérer très intéressante quand vous serez en
déplacement, pour négocier avec des fournisseurs ou convaincre vos
investisseurs.
À noter que vous avez la possibilité de mettre une ou plusieurs applications
en favoris pour y parvenir plus rapidement.
N’hésitez donc pas à télécharger l’application à l’adresse :
https://itunes.apple.com/fr/app/itunes-connect/id376771144.
L’autre avantage de cette application : les notifications dès le changement
du statut d’une de vos applications. À ce sujet, en allant dans l’onglet
Settings, vous allez pouvoir gérer les notifications et les activer pour les
retours de paiement, les contrats d’applications expirés et surtout les statuts
changeants d’application.
Depuis cette vue, vous pourrez aussi changer le provider. Ce n’est peut-être
pas votre cas, mais votre compte Apple Developer peut être relié à plusieurs
entreprises. En effet, une entreprise peut associer plusieurs utilisateurs – des
équipes de développeurs, des équipes de marketing, des équipes de
direction, etc. – pour des accès aux applications et aux certificats.
Si tel est le cas, allez dans Providers dans l’onglet Settings et vous allez
pouvoir changer l’entreprise dont vous souhaitez visualiser les applications
et données.

Analyse de votre applica on sur le Google Play

Vous avez également développé votre application sur le Google Play et les
premières dizaines voire centaines d’utilisateurs se sont précipitées pour le
télécharger ? Le temps est maintenant venu d’examiner tout cela pour voir
le nombre exact de téléchargements, d’impressions, de ventes, de sessions
et même le total des pannes – si jamais Android en décelait.
Dès l’entrée, sur le tableau de bord de votre application, Google Play
Developer Console vous donne accès à un grand nombre de statistiques.
Les installations, les revenus et avec cela les plantages, le coup d’œil rapide
est très complet.
Figure 8-10 – Accueil des Sta s ques sur le Google Play Developer Console

Sur cette page, vous voyez directement l’ensemble des statistiques de votre
application. Vous allez également pouvoir établir ces statistiques sur
différentes périodes.
Ces premières données vous donnent une bonne indication de l’évolution de
l’usage de votre application à travers le temps avec des pourcentages
d’utilisations supérieurs et inférieurs, ainsi qu’un nombre très précis
d’utilisateurs. Vous avez également une visualisation des revenus – ici nulle
car il s’agit d’une application gratuite –, des notes et des plantages.
Tout comme sur l’App Store, vous allez vous rendre compte ici même de
l’utilisation de votre application. Mettez en commun les données des deux
magasins d’application pour en savoir plus sur la tendance actuelle.
Les sta s ques de votre applica on
Cliquez sur l’onglet Statistiques pour accéder aux données détaillées de
l’application et aux rapports personnalisés :

Figure 8-11 – Sta s ques de l’applica on sur le Google Play Developer

Console

Malgré des efforts répétés et conséquents ces dernières années, la plus

grande faiblesse d’Android reste la démultiplication des versions en
circulation à cause des nombreux fournisseurs qui proposent de vastes
gammes d’appareils – et de puissances – et qui ne rendent pas compatibles
leurs produits avec les mises à jour de Google.
Ce manque de visibilité est un lourd fardeau, que Google compense sur
cette page en proposant différents chiffres pour chaque version d’Android
sur laquelle votre application est installée :

Figure 8-12 – Versions d’Android sur lesquelles l’applica on est installée sur
le Google Play Developer Console.

Comme je l’ai souligné, ces statistiques peuvent être gérées selon une
période souhaitée. Vous pouvez également télécharger le rapport. Il sera
ajouté à votre liste de rapports téléchargeables afin de le retrouver à tout
moment.
Bien sûr, ce rapport n’est qu’une configuration parmi tant d’autres. Vous
allez pouvoir le paramétrer en cliquant sur le bouton éponyme.
 Figure 8-13 – Configurer le rapport d’une applica on sur le Google Play
Developer Console

Parmi les rapports possibles, ceux concernant les installations, les notes, les
revenus, ainsi que les blocages et plantages de l’application. Tous ces
rapports peuvent s’afficher selon différents critères.
En parlant des blocages et des plantages, Google a mis en place un onglet
spécial pour ces données. Nommé Android Vitals, il donne des indications
très précises sur les différents problèmes qui peuvent remonter du
smartphone Android de vos utilisateurs.
Ces données vous permettront par exemple de réfléchir à une version dite
« lite » comme Facebook, Google et bien d’autres le proposent pour leurs
applications dans des pays où la connexion réseau est faible.
Les sources de téléchargement de votre applica on
D’où viennent vos utilisateurs ? Que ce soit d’une recherche précise dans le
Google Play, d’une navigation classique ou même d’une application mobile
ou site référent, cette question est très importante, car elle vous donne une
bonne indication du secteur qui est peut-être négligé et qu’il faut améliorer,
soit avec des campagnes marketing soit avec des partenariats.
Ces données sont disponibles dans l’onglet Acquisition d’utilisateurs :

Figure 8-14 – Acquisi on d’u lisateurs sur le Google Play Developer

Console

Sur cette page, vous serez en mesure d’identifier les utilisateurs venant
naturellement du Play Store, ceux venant de campagnes AdWords – le
service publicitaire de Google –, ceux issus de recherches Google et ceux
d’URL directes.
Vous avez la possibilité de gérer la semaine souhaitée ainsi que le canal
d’acquisition des données. Enfin, vous allez pouvoir télécharger le rapport.
À partir de cet onglet, vous pouvez gérer des campagnes AdWords pour
attirer des millions d’utilisateurs depuis l’ensemble des canaux de publicité
de Google, que ce soit les annonces sur Google Play, la recherche Google
ou les autres sites du groupe.
La création des annonces Google AdWords sera faite depuis le compte
Google associé. En effet, vous allez être redirigé vers la plate-forme de
publicité sur une page réservée à la création d’une annonce pour la publicité
en question.

Les ventes de votre applica on

Les ventes de votre application sont les nerfs de la guerre. Elles sont
présentées dans l’onglet Rapports financiers de votre tableau de bord.
Dans cette vue, vous allez retrouver de nombreux termes marketing que
nous avons vus précédemment. Google a en effet analysé l’ensemble de vos
données pour vous fournir les chiffres en direct, que ce soit le revenu
moyen par utilisateur payant, les revenus sur la vente de l’application –
dans le cas d’une application payante – ou sur la vente de produits in-app.
Vous pourrez comparer ces données sur les 30 derniers jours, les sept ou le
dernier jour(s), avec le nombre d’utilisateurs qui ont acheté vos produits,
qu’ils soient nouveaux ou historiques. C’est à partir de ces données que
vous pourrez recalculer le fameux ARPPU sur une période variable de
temps.

Les notes des u lisateurs

Google fait la part belle aux notes et avis de vos utilisateurs. En cliquant sur
l’onglet Commentaires des utilisateurs, vous accédez à une section qui vous
fournit la note moyenne donnée par vos utilisateurs à votre application, leur
opinion ainsi que différentes informations sensibles, comme la version
Android utilisée, l’opérateur téléphonique ou encore le pays de localisation
de l’utilisateur.
Toutes ces données vous permettent d’améliorer considérablement votre
application, en tenant compte des besoins des usagers et de leur situation
respective.

La consulta on sur mobile

Tout comme Apple, Google propose lui aussi une application mobile pour
visualiser les applications, leurs statistiques et leurs ventes. L’outil est en
visualisation uniquement, mais vous y retrouverez exactement les mêmes
données que sur le site Internet.

Figure 8-15 – Visualisa on des graphiques sur l’applica on Play Console sur
Android

Vous avez accès à différentes informations et statistiques parmi lesquelles la

date de la dernière mise à jour, les installations et désinstallations, les
plantages, les appareils et versions d’Android ou encore les notes et avis des
utilisateurs.
Cette application s’avérera très avantageuse lorsque vous serez en voyage
professionnel pour traiter avec des prestataires ou convaincre vos
promoteurs.
À noter que vous pourrez épingler une ou plusieurs applications pour y
accéder plus rapidement.
N’hésitez donc pas à télécharger l’application à l’adresse :
https://play.google.com/store/apps/details?id=com.google.android.apps.
playconsole.
À l’instar de la plupart des applications Google, en haut à gauche vous allez
pouvoir changer de compte développeur – dans le cas où votre compte est
associé à plusieurs organisations de développement.
De même, dans Paramètres, vous pourrez gérer les applications pour
lesquelles vous recevrez des notifications – celles de toutes les applications
ou uniquement des applications épinglées –, ainsi que les différentes
notifications à recevoir – celles qui sont importantes et celles des nouveaux
avis, etc.
 9
Moné sa on des applica ons

L’usage de la publicité sur l’applica on

Maintenant que nous avons vu comment publier votre application sur les
stores et utiliser le marketing pour la diffuser au plus grand nombre, nous
allons nous occuper de la rentabiliser. Effectivement, comment payer des
campagnes de marketing si votre application, bien que connue, ne rapporte
pas d’argent ? Autrement dit, comment investir dans du marketing sans
chiffre d’affaires.
Dans le cadre de cette monétisation, nous allons voir où placer la publicité
sur votre application et surtout quand la placer.

Le choix du placement
La question du placement de la publicité va être primordiale pour obtenir un
bon chiffre d’affaires. En effet, une publicité mal placée pourrait être soit
invisible aux yeux de l’utilisateur (et donc totalement inefficace), soit trop
intrusive et donc lassante pour les utilisateurs.
Plusieurs solutions s’offrent à vous, mais libre à vous – et je vous le
recommande – de réfléchir à d’autres moyens d’introduire de la publicité
sur votre application.

Le fil d’actualité
Ce placement n’est évidemment possible que si vous disposez d’un fil
d’actualité sur votre application, mais c’est un des exemples les plus
courants. Que ce soit un réseau social, une application de messagerie, d’e-
mails, des listes de tâches ou bien d’autres choses encore, les possibilités
sont multiples.
Ce placement est non intrusif et souvent bien perçu par les utilisateurs, à
condition de cibler correctement ceux qui seront intéressés par ladite
publicité. En effet, s’ils ne sont pas « perturbés » par une publicité, ils
peuvent continuer le fil d’actualité sans être dérangés à outrance et peuvent
évidemment cliquer s’ils désirent en savoir plus.

L’inters el
Ce placement est déjà plus risqué car plus intrusif. Lorsque les utilisateurs
navigueront entre divers fenêtres de votre application, ils se retrouveront
confrontés, pendant plusieurs dizaines de secondes, à une image ou à une
vidéo.
Outre la recommandation de laisser une petite croix en haut à gauche ou à
droite pour pouvoir fermer cet interstitiel, cela risque, à force, de lasser les
utilisateurs.
Ici encore, le ciblage doit être parfait, c’est l’utilisation pure et simple de
votre application qui est en jeu !

Les bannières
Les bannières de publicité furent un temps monnaie courante. Elles sont
pourtant moins utilisées, car elles contribuent à rendre votre application
beaucoup moins intuitive et simple d’utilisation. Outre les animations
qu’elles affichent, c’est une partie de l’écran qui se retrouve ainsi accaparée
par de la publicité, sur toute l’application.
Les clics pourront être nombreux, mais cela risque d’être involontaire de la
part de vos utilisateurs.

Le format adapté
Quel format utiliser ? Tout simplement celui qui est le plus courant dans
votre application. Il s’agit d’une application avec un flux textuel ?
Privilégiez une publicité textuelle. Votre application diffuse bien souvent les
photos ou les vidéos de vos utilisateurs ? Privilégiez une publicité visuelle.
Si vous ne savez pas quel format utiliser, testez dans un premier temps le
moins intrusif et vous pourrez progressivement passer à de la publicité de
plus en plus animée jusqu’à, peut-être, arriver sur de la vidéo.
Le ming parfait
Le timing est LA question essentielle dans l’utilisation de la publicité.
Aussi fondamental que le ciblage – que nous verrons par la suite –, il assure
à votre publicité de marquer les esprits dans le bon sens.
Imaginons une application d’itinéraire comme Google Maps ou Apple
Plans. Vous diffusez une publicité faisant la promotion du dernier film en
vogue sorti dans les salles au moment où l’utilisateur lance l’itinéraire.
L’intérêt sera nul : il vient de quitter sa précédente position, quelle idée
d’aller au cinéma maintenant ? Pire encore, il perdra la fenêtre de
localisation pendant quelques secondes ou plus.
Outre la gêne occasionnée, c’est l’expérience utilisateur qui s’en retrouvera
compromise. Il existe un réel risque que celui-ci ferme l’application puis la
supprime définitivement.
Maintenant, imaginons la même application. Une fois l’itinéraire terminé,
l’utilisateur arrivé à son point de destination aura peut-être faim. À ce
moment, quelques secondes après la fenêtre avertissant l’utilisateur qu’il est
arrivé, une page (un interstitiel) pourra s’afficher, lui indiquant qu’un
restaurant se trouve à proximité de sa nouvelle position et qu’il pourra
ajouter cette adresse sur son trajet de retour.
Dans ce cas, le timing est parfait et les chances que l’utilisateur clique sur la
publicité pour pouvoir s’y rendre augmentent considérablement.

Le ciblage
Au même titre que le timing, le ciblage est fondamental.
Songeons à la même application d’itinéraire, mais cette fois-ci avec une
publicité pour une salle de sport par exemple. Comme pour la publicité pour
le film, l’intérêt sera relativement faible. L’utilisateur, avant ou après son
trajet, potentiellement long et épuisant, sera invité à aller faire du sport en
salle.
Bien qu’ici le risque de suppression de l’application reste faible, le taux de
clics risque d’être proche de zéro et donc la publicité gênera les utilisateurs
sans rentabiliser l’application.

Développer la publicité sur l’applica on

Avant de clore cet ouvrage, repassons de la théorie à la pratique et
développons ensemble le système de publicité de votre application. Pour
l’occasion, j’ai choisi la plate-forme AdMob : https://www.google.fr/
admob/.
Cette plate-forme de publicité a été conçue en 2006 avant d’être rachetée en
2009 par Google. Elle est considérée comme l’une des plus importantes
plates-formes de publicité mobile. Les chiffres avancés par AdMob sont
pharaoniques : plusieurs millions d’applications clientes, plus d’un milliard
de dollars américains versés aux éditeurs depuis 2012, 200 milliards de
demandes d’annonce par mois avec une augmentation de 200 % des CPM
(Coûts Par Milles), et plus d’un million d’annonceurs venant de Google…
De quoi vous laisser le choix du ciblage de la publicité.
Si ce n’est pas déjà fait, créez un compte sur AdMob. Vous pouvez
naturellement utiliser votre compte Google. À partir de là, vous allez
pouvoir ajouter une application, un système d’exploitation mobile après
l’autre. Prenons le cas d’iOS et déroulons la procédure.

Ajout de votre applica on sur AdMob

Dans un premier temps, AdMob vous demande si vous avez déjà publié
votre application sur le Google Play ou l’App Store. Si c’est le cas,
répondez oui. Pour l’exemple, je vous invite à répondre non.

Figure 9-1 – Votre applica on est-elle déjà publiée ?

Ensuite, AdMob vous demande le nom de votre application ainsi que la
plate-forme sur laquelle elle est publiée.

Figure 9-2 – Le nom de l’applica on ainsi que la plate-forme

Voilà qui est fait. AdMob vous confirme la création de votre application sur
la plate-forme sélectionnée, vous donne l’identifiant de publication AdMob
puis vous propose d’ajouter directement un bloc d’annonces.

Figure 9-3 – Récapitula f de la créa on de votre applica on sur AdMob

Il est désormais possible de créer votre premier bloc d’annonces.

 Figure 9-4 – Créer une annonce sur AdMob

Comme vous pouvez le constater, l’ensemble des possibilités que j’ai

évoqué dans le précédent chapitre est disponible, de la bannière à l’annonce
native en passant par l’interstitiel image ou vidéo. Optez pour l’option qui
vous convient ou testez, comme moi, la bannière. Cette dernière est une des
plus simples à mettre en œuvre dans un premier temps.
Ensuite, attribuez un nom ainsi que des paramètres au bloc d’annonces.
 Figure 9-5 – Configura on du bloc d’annonces

Comme elle dépend du contenu de votre application, la bannière peut soit

afficher du texte, soit des illustrations, soit les deux. Bien évidemment,
AdMob recommande les deux pour éviter la baisse des revenus, néanmoins
vous pouvez requalifier cette idée pour éviter une baisse de la fréquence
d’utilisation de votre application à cause des publicités.
De même, l’actualisation automatique est à envisager avec une grande
considération. Plus elle va être rapide, moins l’utilisateur aura de chance de
réfléchir à la possibilité de cliquer sur l’annonce peu de temps après l’avoir
vue. Néanmoins, si elle est rapide, il peut très bien cliquer sur la deuxième
ou la troisième annonce, qui est susceptible de davantage lui plaire.
Enfin, vous pouvez personnaliser le style de l’annonce textuelle. Quoi de
plus horrible qu’une annonce foncée dans le décor d’une application claire ?
C’est ici que vous allez pouvoir changer tout cela.
Dans le cadre de notre exemple, je garde les options par défaut et nomme le
bloc d’annonces Annonce1. Envoyez le tout, AdMob vous refait un
récapitulatif et nous pouvons y aller !
 Figure 9-6 – Récapitula f de créa on d’annonce

Cliquez sur OK. Vous êtes alors redirigé vers la page d’accueil d’AdMob
avec une liste des annonces que vous avez créées et quelques informations
les concernant. Pour le moment, pas très intéressant, mais cela va venir.

Figure 9-7 – Liste des annonces

Maintenant, ajoutez l’application Android de la même manière ou bien, si

c’est déjà fait, passons au code.

Ajoutons AdMob à notre applica on

Pour le coup, reprenons notre fameuse application myApp. Elle vous a
manqué, j’en suis convaincu.
Pour installer AdMob sur votre application, nous allons utiliser un plug-in
développé par un membre de la communauté de React Native :
https://github.com/sbugert/react-native-admob.
Dans un premier temps, nous allons devoir installer le plug-in au sein de
notre application. Pour ce faire, retournez à l’invite de commande et tapez :
npm i react-native-admob -S

Puis :
react-native link

L’intégration pour Android est automatique, celle pour iOS va néanmoins

nécessiter l’ajout de la bibliothèque Google Mobile Ads SDK au projet.
Pour cela, rendez-vous simplement sur la page concernée dans la
documentation développeur de Google : https://developers.google.com/
admob/ios/quick-start#import_the_mobile_ads_sdk.
Comme vous pouvez le voir dans cette partie, ce SDK s’installe grâce à
CocoaPods, vous savez le petit outil que l’on a installé au début. Quand je
vous disais qu’il vous servirait forcément un jour ou l’autre !
Pour installer un SDK ou tout autre outil avec CocoaPods, rien de plus
simple. Ouvrez simplement le fichier Podfile dans le dossier iOS de
l’application et ajoutez la ligne suivante à la ligne 9 :
pod 'Google-Mobile-Ads-SDK'

Ensuite, il suffit d’ouvrir de nouveau l’invite de commande et de lancer une

mise à jour des bibliothèques de CocoaPods :
pod install --repo-update

Il est possible qu’une erreur se produise et que la console vous affiche :

[!] The target 'myApp-tvOSTests' is declared twice.

Dans ce cas, pas de problème, modifiez le fichier Podfile et supprimez la

partie suivante :

target 'myApp-tvOS' do
# Uncomment the next line if you’re using Swift or would like to
use dynamic frameworks
# use_frameworks!
# Pods for myApp-tvOS
 target 'myApp-tvOSTests' do
inherit! :search_paths
# Pods for testing
end
end

Relancez la commande, normalement elle devrait cette fois-ci vous

afficher :

Updating local specs repositories

$ /usr/bin/git -C /Users/blaisebarre/.cocoapods/repos/master fetch origin
--progress
$ /usr/bin/git -C /Users/blaisebarre/.cocoapods/repos/master rev-parse
--abbrev-ref HEAD
master
$ /usr/bin/git -C /Users/blaisebarre/.cocoapods/repos/master reset --hard
origin/master
HEAD is now at ab81e0e7407 [Add] ActionSheetUtil 0.1.0
Analyzing dependencies
Downloading dependencies
Installing Google-Mobile-Ads-SDK (7.22.0)
Generating Pods project
Integrating client project

[!] Please close any current Xcode sessions and use 'myApp.xcworkspace' for this
project from now on.
Sending stats
Pod installation complete! There is 1 dependency from the Podfile and 1 total pod
installed.

[!] Automatically assigning platform ios with version 8.0 on target myApp because
no platform was specified. Please specify a platform for this target in your
Podfile. See `https://guides.cocoapods.org/syntax/podfile.html#platform`.

[!] The 'myAppTests [Debug]' target overrides the 'OTHER_LDFLAGS' build setting
defined in 'Pods/Target Support Files/Pods-myAppTests/Pods-
 myAppTests.debug.xcconfig'. This can lead to problems with the CocoaPods
installation
- Use the '$(inherited)' flag, or
- Remove the build settings from the target.

[!] The 'myAppTests [Release]' target overrides the 'OTHER_LDFLAGS' build setting
defined in 'Pods/Target Support Files/Pods-myAppTests/Pods-
myAppTests.release.xcconfig'. This can lead to problems with the CocoaPods
installation
- Use the '$(inherited)' flag, or
- Remove the build settings from the target.

Voilà, la bibliothèque est installée et vous allez pouvoir utiliser AdMob.

Ajoutons l’annonce à notre applica on

Maintenant que le plug-in est installé, il est temps de passer à l’installation
de l’annonce. Pour cela, référons-nous simplement à la documentation
rédigée par le développeur.
Pour ma part, je vais importer le plug-in sur la première page, de manière à
pouvoir visualiser le résultat dès le départ. Je vous invite à faire de même.
Dans le fichier MeteoPage.js, ajoutez ceci aux import :
import { AdMobBanner } from 'react-native-admob' ;

Si vous voulez utiliser autre chose qu’une bannière comme annonce, libre à
vous bien évidemment d’importer le nécessaire. Ensuite, nous allons
rajouter la bannière en bas de page. Comme ceci :

<View style={styles.container}>
// Display a banner
<AdMobBanner
bannerSize="fullBanner"
adUnitID="your-admob-unit-id"
testDeviceID="EMULATOR"
didFailToReceiveAdWithError={this.bannerError } />
</View>
À vous de compléter le code avec l’identifiant de votre propre bannière. Ce
code, vous l’obtiendrez via la plate-forme AdMob sous la forme de ca-app-
pub-XXXXXXXXXXXXXXXX/XXXXXXXXXX. Une fois le code ajouté, il va y avoir une petite
complication.
En effet, l’ajout d’AdMob via CocoaPod implique maintenant d’ouvrir
l’application par le fichier myApp.xcworkspace et non par le fichier myApp.xcodeproj
de manière à ce que Xcode comprenne l’ensemble des bibliothèques qu’il
faut inclure à l’application, par le biais des bibliothèques ainsi qu’à travers
le fichier Podfile.
Si les problèmes persistent, n’hésitez pas à nettoyer les fichiers de
compilations de l’application en allant dans le menu Product, puis en
cliquant sur Clean.
Dès lors, vous allez pouvoir exécuter l’application sur le simulateur.
 Figure 9-8 – La publicité sur l’applica on

En cliquant sur ladite publicité, vous serez redirigé vers une page de la
plate-forme AdMob, gérée par Google.

Figure 9-9 – Redirec on vers la plate-forme de publicité

Ensuite, au chargement, vous aurez la publicité finale.

 Figure 9-10 – La publicité finale sur Safari

Comme vous pouvez le constater, tandis que la première page concernant

Google Ad Services permet de rediriger vers myAppForDemo, la seconde ne le
permet plus, redirection oblige.
Faites l’expérience en direct sur votre téléphone en y compilant cette
application. Cela nous permettra également de pouvoir visualiser les
statistiques dès maintenant.
Comme toujours, si votre application ne fonctionne pas, je vous invite à
télécharger les fichiers de l’application pour vérifier que vous ne vous êtes
pas trompé dans la saisie : http://www.editions-eyrolles.com/dl/0067563.

Afficher les sta s ques sur AdMob

Retournons donc sur la plate-forme AdMob. Dans le menu Applications,
sélectionnez l’application myApp correspondant à la plate-forme que vous
avez utilisée pour vos tests. Une fois cette application sélectionnée, le menu
suivant vous permet de naviguer dans les statistiques :
 Figure 9-11 – Menu de votre applica on sur AdMob

Cliquez sur Présentation de l’application. Bien que les premières données

ne se soient peut-être pas actualisées, les statistiques suivantes peuvent être
visualisées. Optez pour la période d’aujourd’hui dans le menu déroulant.

Figure 9-12 – Sélec on de la période dans les sta s ques AdMob

Alors, les statistiques s’actualiseront sur la page :

 Figure 9-13 – Sta s ques AdMob

Si vous voulez entrer dans le détail des statistiques, cliquez sur Afficher le
rapport puis resélectionnez Aujourd’hui dans le menu en haut à droite de la
page.
 Figure 9-14 – Rapport de sta s ques détaillées sur AdMob

Comme toute plate-forme digne de ce nom, vous allez pouvoir changer les
configurations en y ajoutant des variables et des filtres. Il vous sera
également possible de personnaliser les statistiques affichées.
 Figure 9-15 – Personnalisa on des sta s ques sur AdMob

Une fois ceci fait, vous allez pouvoir l’exporter sous format CSV.
Plus tard, vous pourrez voir les statistiques de la page d’accueil mise à jour
avec les revenus que vous et vos utilisateurs aurez générés.
 Figure 9-16 – Sta s ques financières sur AdMob

Paramètres de blocage à l’applica on

Avant de créer votre propre publicité sur l’application, étudions brièvement
les paramètres de blocage sur cette annonce.
Il peut arriver que des publicités très nocives, dénuées de sens, s’affichent
dans les applications, qu’il s’agisse de celles qui nous sont envoyées par e-
mail, de celles qui s’affichent sur les sites web ou même de celles qui
s’affichent sur les applications mobiles, comme nous venons de le faire sur
notre application de démo.
Nous n’allons pas gérer précisément les publicités que nous voulons
afficher. Cette sélection ne pourra se faire qu’en mettant à profit votre côté
commercial face à des annonceurs spécialisés.
Ici, nous allons seulement gérer les annonces que vous considérez comme
malsaines.
Allez dans Paramètres de blocage. Vous avez la possibilité de sélectionner
cette option dans le menu de votre application pour spécialiser vos critères
ou, plus bas, pour l’appliquer à l’ensemble des annonces dans la totalité des
applications.
Une fois sur cette page, plusieurs catégories de sélections sont affichées.

Figure 9-17 – Paramètres de blocage dans l’applica on sur AdMob

Il suffit de cocher l’autorisation de la catégorie souhaitée pour la bloquer. Si

vous souhaitez sélectionner l’intégralité d’une rubrique, vous le pouvez.
Sinon, cliquez sur la catégorie pour afficher les sous-sections
correspondantes puis ainsi de suite. Le nombre de catégories bloquées
s’affiche à droite dans la colonne Nombre de sous-catégories bloquées.
Bien que les catégories présentes ici soient simples et classiques, cliquez
sur l’onglet Catégories sensibles pour sélectionner celles que vous êtes
susceptible de bloquer.
 Figure 9-18 – Les catégories sensibles dans AdMob

Comme vous pouvez le constater, la catégorie sur les paris et les jeux
d’argent et de hasard est bloquée par défaut, car réservée aux plus de 18
ans. Néanmoins, vous pouvez la débloquer si votre application est destinée
à cette catégorie d’utilisateurs.
En revanche, vous allez pouvoir bloquer les catégories faisant référence à la
sexualité, à la religion et bien d’autres sujets.
De même, si vous voulez suspendre les annonces concernant une
application concurrente, vous avez la possibilité de sélectionner les
identifiants uniques de la ou les applications concernées, qu’elle soit sur
Google Play ou App Store.
Enfin, vous pouvez directement stopper des annonces à partir de leur URL.
Prenez grand soin de ces blocages, ils vous permettront, à terme, de gérer
les mauvaises publicités qui pourraient s’afficher sur votre application et
qui seraient susceptibles de la décrédibiliser.

Créer une publicité sur mobile

Maintenant que nous avons vu comment gérer les campagnes de publicité
sur votre application en bloquant celles qui peuvent être choquantes ou faire
la promotion d’une application concurrente, il est désormais temps de gérer
votre campagne de publicité sur Google Play et de l’App Store.
Cette étape n’est absolument pas obligatoire mais constitue un premier pas
vers le marketing et la communication. Loin des campagnes de publicité à
plusieurs dizaines de milliers d’euros, les campagnes AdMob peuvent
malgré tout s’avérer onéreuses. Vous pouvez néanmoins vous reposer sur
les revenus générés par les annonces AdMob de votre application pour ne
pas perdre d’argent sur vos propres campagnes.
Cliquez sur Campagnes dans le menu de gauche puis sur Créer une
campagne. Vous arrivez sur un formulaire simple dans lequel chaque champ
a une importance majeure pour votre campagne.

Types de campagnes
Si vous projetez de créer plusieurs campagnes de publicité sur AdMob,
vous avez la possibilité de définir un nom. Naturellement, celui-ci restera
privé et ne sera affiché ni aux autres éditeurs ni aux utilisateurs.
Ensuite, vous allez devoir définir le type et l’objectif de l’annonce. Le type
est un élément important si vous envisagez de lancer plusieurs applications.
En effet, il est possible de faire de l’autopromotion, autrement dit de faire la
promotion de vos diverses applications. Si vous n’en avez pas d’autres ou
ne souhaitez pas le faire, vous pouvez naturellement faire de la vente
directe, c’est-à-dire de la promotion sur les applications d’autres éditeurs,
ce qui est le plus classique.
L’objectif correspond à la façon dont va être utilisé l’argent de la campagne.
Vous avez la possibilité de régler l’objectif sur différents paramètres comme
le nombre d’impressions que vous souhaitez générer sur la campagne ou le
nombre de clics. D’autres objectifs plus spécifiques sont disponibles,
comme le pourcentage du trafic ou l’autopromotion par médiation.
Puis, vous allez devoir définir les dates de début et de fin de campagne.
Enfin, vous pourrez limiter le nombre d’expositions, paramètre très
intéressant puisque cela permet de réduire le nombre de fois qu’une
annonce est diffusée auprès de la même personne, chaque jour, chaque
semaine et chaque mois.
Également, si vous avez plusieurs campagnes, vous pouvez gérer ce nombre
entre plusieurs d’entre elles. Outre le fait d’éviter la lassitude de votre
utilisateur face à votre campagne de promotion, cet outil vous garantit de
diffuser cette dernière auprès d’une nouvelle audience.
Continuons sur notre lancée. Dans la deuxième phase du formulaire, nous
allons définir l’emplacement d’affichage de votre annonce. Les
emplacements publicitaires de toutes vos applications seront affichés dans
le tableau. Vous pourrez sélectionner soit une annonce particulière soit
l’ensemble des annonces d’une application.
La compatibilité porte sur le format et le type de l’annonce. En effet, la
compatibilité ne sera pas la même si l’annonce est une bannière, une
annonce interstitielle, une vidéo ou encore une annonce native – intégrée à
votre fil d’actualité par exemple.
En ce qui concerne le type, on parle ici des annonces textuelles ou
illustrées. Des annonces interactives – bien souvent en HTML5 – ou encore
des vidéos – classiques, avec installation d’une application au clic ou même
avec récompense.
Vous l’aurez donc compris, l’annonce que vous êtes en train de créer ne sera
affichée que dans les emplacements où elle est compatible.
La page de support d’AdMob met à votre disposition un tableau des
compatibilités.
 Figure 9-19 – Tableau des compa bilités des types d’annonces sur AdMob

Une fois les emplacements souhaités sélectionnés, vous allez pouvoir les
affiner suivant la zone géographique, la langue, les données
démographiques ou même techniques (opérateur, téléphone, système
d’exploitation, etc.) de l’utilisateur.
Le cadre suivant nous propose une nouvelle fonctionnalité qui permet
d’effectuer une prévision afin de déterminer si les objectifs de cette
nouvelle campagne sont susceptibles d’être atteints. Un algorithme calcule
cette probabilité selon les chiffres dont vous disposez afin de vous donner le
résultat le plus probant. Évidemment, si les chiffres à la disposition
d’AdMob sont trop peu nombreux, le calcul ne sera pas réalisé.
Maintenant que nous avons finalisé la configuration de notre première
campagne, il est temps de créer un bloc d’annonces. Ce n’est pas
obligatoire pour le moment mais cela devra être fait pour lancer votre
campagne. Une campagne n’est en réalité qu’un rassemblement de
plusieurs annonces à l’objectif commun.
Créons donc notre annonce. AdMob vous laisse la possibilité entre les
quatre types d’annonces que nous avons vues précédemment.
 Figure 9-20 – Les types d’annonces disponibles dans AdMob

Pour l’exemple, je clique sur Annonce textuelle. Un formulaire s’affiche.

Renseignez tout d’abord le nom de cette annonce, puis spécifiez s’il s’agit
d’une annonce pour site web ou application mobile.
Ensuite, vous devez chercher l’application, disponible sur Google Play ou
sur l’App Store, dont vous voulez faire la promotion. Pour ce faire,
cherchez-la selon le nom de l’éditeur ou selon son intitulé directement. Puis
sélectionnez l’application qui vous convient. Son tarif ou sa gratuité sont
automatiquement récupérés dans la suite du formulaire, mais vous allez tout
de même devoir renseigner un titre à votre annonce, ainsi qu’une première
et deuxième ligne.
Enregistrez le formulaire puis validez en cliquant sur OK. Vous êtes alors
redirigé sur la liste des campagnes de publicité créées avec la possibilité de
visualiser des statistiques simples, sur la période souhaitée, de vos
campagnes.

Figure 9-21 – Sta s ques des campagnes sur AdMob

Ici, nous allons pouvoir visualiser le nombre d’impressions, le nombre de

clics, le taux de clics – à savoir le nombre de clics divisé par le nombre
d’impressions – et enfin le nombre de conversions sur la campagne.
Revenons un peu au tableau des campagnes :
 Figure 9-22 – Tableau des campagnes sur AdMob

Comme vous pouvez le constater, il est possible d’afficher les campagnes,

les annonces des campagnes ou même les conversions. Vous pouvez
également afficher toutes les campagnes ou uniquement celles qui sont
actives.
Une fois dans le tableau, vous pouvez activer, mettre en veille, supprimer
une campagne ou en créer une nouvelle.
Enfin, vous avez accès à toutes les statistiques de la campagne.

Créer une publicité Facebook Ads

Nous allons désormais créer une publicité sur Facebook Ads, le plus grand
réseau social qui vous permettra de récupérer et de convertir un grand
nombre d’utilisateurs à moindre coût.
Rendez-vous à l’adresse : https://www.facebook.com/business/.
À partir de là, nous allons créer une publicité en cliquant sur le bouton
éponyme en haut à droite de la page.

Figure 9-23 – En-tête de la page Facebook Ads

Mais avant cela, il est indispensable de noter une information très
importante : les publicités Facebook ne se font que sur la base des pages
Facebook. Il vous faut donc créer une page officielle pour votre entreprise
ou votre marque pour ensuite créer une publicité pour la sponsoriser.
Considérons que vous possédiez déjà une page Facebook et cliquons sur le
bouton Créer une publicité. Vous arrivez alors sur le tableau de bord de
Facebook Business.

Figure 9-24 – Tableau de bord de Facebook Business

Vous tombez directement sur la création d’une campagne de publicité. Dès

lors, vous allez devoir choisir l’objectif de la campagne, qu’elle soit de
sensibilisation, de considération ou de conversion.
Prenons le premier, la Notoriété de la marque dans la colonne
Sensibilisation. La page se met à jour, remplissant le nom de la campagne
par le type d’objectif de cette dernière. Vous n’avez plus qu’à valider pour
être redirigé vers la page de création d’un compte publicitaire. Remplissez
vos informations de facturation puis cliquez sur Continuer.
Nous arrivons alors sur la page de création de la publicité. Comme vous
pouvez le constater dans le menu de gauche, les deux premières étapes sont
validées. Il faut alors configurer une audience, un placement et un budget.
Comme habituellement, nous allons d’abord donner un titre à notre
annonce. Ensuite, configurez l’audience. Commencez par saisir le ou les
pays de diffusion de votre publicité. Dans mon cas, je prends la France. Je
supprime donc les États-Unis puis j’ajoute un lieu dans Pays, Europe,
France. Facebook m’informe d’ailleurs que cette audience regroupe au total
34 709 206 utilisateurs.
Vous pouvez évidemment saisir plusieurs pays dans la catégorie Pays ou
bien sélectionner tout ou partie d’une région, que ce soit des zones de libre-
échange, des marchés émergents ou des pays de la zone européenne.
Ensuite, nous configurons l’âge minimal et maximal des utilisateurs, leur
sexe et leur langue.
De la même manière que pour les pays, vous allez pouvoir inclure les
utilisateurs selon des critères spécifiques, que ce soit des données
démographiques, des intérêts, des comportements et d’autres choses encore.
Puis, au niveau des placements, Facebook vous propose de les gérer lui-
même ou de les configurer pour qu’ils vous conviennent. Vous pouvez alors
choisir les appareils web ou mobiles mais également sélectionner les plates-
formes appartenant à la société Facebook : à savoir Facebook lui-même,
Instagram, le réseau de publicité de Facebook – Audience Network de son
nom – et Messenger. Vous pouvez également opter pour un système
d’exploitation particulier et exclure certaines catégories ou types
d’utilisateurs.
Enfin, nous allons définir un budget maximal et un calendrier. Il vous est
possible de définir une date de début et une date de fin, ou laisser Facebook
la gérer pour vous.
Vous l’aurez compris, cette configuration de campagne est aussi puissante
et flexible que AdMob.
Cliquez sur Continuer, d’autres étapes nous attendent.
Dans cette nouvelle page, nous allons devoir sélectionner la page et le
format de la publicité. La page, comme je vous le disais en introduction, est
une page Facebook représentant votre activité, que ce soit votre entreprise
ou votre marque. Désignez celle que vous souhaitez.
Une fois la page sélectionnée, vous avez également la possibilité de lier un
compte Instagram. C’est facultatif mais recommandé par Facebook pour
obtenir un meilleur résultat grâce à votre publicité. Si vous n’avez pas de
compte Instagram pour votre entreprise ou votre marque, ou si vous ne
l’avez pas encore lié, vous pouvez faire la configuration du compte en
direct.
Vous avez aussi la possibilité d’utiliser un compte Instagram d’une autre
page. Un scénario possible est donc de lier la page Facebook de votre
marque avec le compte Instagram de votre entreprise.
En ce qui concerne le format, Facebook en propose quatre :

Figure 9-25 – Formats publicitaires sur AdMob

Le format carrousel est le plus fréquent sur le fil d’actualité. Vous pouvez
utiliser une image ou une vidéo mais aussi un diaporama, qui sera une sorte
de vidéo de dix images qui passeront en boucle.
De plus, vous pouvez ajouter un « canevas » plein écran pour une
expérience instantanée depuis le mobile. C’est un moyen efficace de faire
tester votre application, votre plate-forme ou quoi que ce soit d’autre dès
que l’utilisateur a cliqué sur la publicité.
Une fois ceci fait, vous allez pouvoir configurer le visuel de la publicité.
Vous devez d’abord saisir le titre. Ensuite, et selon le format choisi, la page
vous demande de sélectionner la ou les image(s) ou bien la vidéo. Tout est
correctement expliqué et vous pourrez configurer ce qui est nécessaire pour
l’affichage de votre publicité.
Par ailleurs, vous aurez un aperçu de cette dernière sur la droite de la page.
En haut à droite du cadre de l’aperçu, une icône vous permet de visualiser
cette publicité sur votre téléphone. Cliquez donc sur l’icône en question
puis sur Envoyer une notification à Facebook :
 Figure 9-26 – Aperçu sur l’appareil de Facebook Ads

Depuis votre compte personnel, vous allez recevoir une notification

Facebook sur votre téléphone. Allez dans Facebook et cliquez sur la
notification :

Figure 9-27 – No fica on « L’aperçu de votre publicité est prêt. » sur

Facebook sur iPhone
Cliquez dessus, votre publicité s’affiche telle qu’elle apparaîtra dans le fil
d’actualité.

Figure 9-28 – Aperçu de la publicité sur l’iPhone

Bien évidemment, ceci n’est qu’un simple test. Je vous invite donc à
compléter au mieux votre publicité.
Une fois que la publicité est configurée, confirmez-la à l’aide d’un
formulaire et payez. Elle est opérationnelle. Préparez-vous à l’assaut de
nouveaux utilisateurs sur votre plate-forme !
 10
Mises à jour et débogages

Mises à jour des composants

Compte tenu de la rapidité avec laquelle les technologies étudiées dans cet
ouvrage se développent, vous aurez sans aucun doute besoin de mettre vos
applications à jour. Comme toujours, direction la console.

Me re à jour React Na ve
Il s’agit là d’un élément essentiel. Développé par l’entreprise Facebook et
par une grande communauté de développeurs, React Native évolue
extrêmement vite. Bien qu’il n’y ait pas de nouvelle version stable chaque
jour, les mises à jour sont fréquentes.
Pour mettre à jour React Native, il suffit de télécharger – encore une fois,
via l’invite de commande – l’outil react-native-git-upgrade en mode global :
npm install -g react-native-git-upgrade

Cette ligne de commande va télécharger un petit paquet de bibliothèques.

Ensuite, deux solutions s’offrent à vous : soit vous mettez purement et
simplement react-native-cli à la dernière version en date, soit vous le mettez
à une version spécifique que vous désirez.

Me re à la dernière version
Pour le mettre à la dernière version, tapez tout simplement le nom de l’outil
que nous venons d’installer :
react-native-git-upgrade
Cela va résulter en un bon nombre de lignes dans la console symbolisant la
mise à jour, pour finir sur un git-update info Upgrade done :

git-upgrade info Check for updates

git-upgrade info Read package.json files
git-upgrade info Check declared version
git-upgrade info Check matching versions
git-upgrade info Check React peer dependency
git-upgrade info Check that Git is installed
git-upgrade info Get information from NPM registry
git-upgrade info Upgrading to React Native 0.41.2 , React ~ 15.4.0
git-upgrade info Setup temporary working directory
git-upgrade info Configure Git environment
git-upgrade info Init Git repository
git-upgrade info Add all files to commit
warning : CRLF will be replaced by LF in android / gradlew.bat.
The file will have its original line endings in your working directory.
git-upgrade info Commit current project sources
git-upgrade info Create a tag before updating sources
git-upgrade info Generate old version template
git-upgrade info Add updated files to commit
warning : CRLF will be replaced by LF in android / gradlew.bat.
The file will have its original line endings in your working directory.
git-upgrade info Commit old version template
git-upgrade info Install the new version
npm WARN deprecated node - uuid@ 1.4.7 : use uuid module instead
git-upgrade info Generate new version template
git-upgrade info Add updated files to commit
warning : CRLF will be replaced by LF in android / gradlew.bat.
The file will have its original line endings in your working directory.
git-upgrade info Commit new version template
git-upgrade info Generate the patch between the 2 versions
git-upgrade info Save the patch in temp directory
git-upgrade info Reset the 2 temporary commits
git-upgrade info Apply the patch
git-upgrade info Upgrade done
Me re à une version spécifique
Si en revanche, vous souhaitez mettre React Native à une version
spécifique, précisez-la à la fin de la commande :
react-native-git-upgrade X.Y.Z

Il en résultera les mêmes informations que la commande d’upgrade simple.

Erreur courante
Si l’une ou l’autre des commandes (react-native-git-upgrade ou react-native-
git-upgrade x.y.z) vous renvoie l’erreur suivante :

git-upgrade info Check for updates

git-upgrade info Read package.json files
git-upgrade ERR ! An error occurred during upgrade :
git-upgrade ERR ! Error : Cannot find " /Users/blaisebarre/node_modules/react-
native/package.json " . Make sure you ran "npm install" and that you are inside a
React Native project.

Je pense que vous aurez compris le problème par vous-même, mais je

préfère le préciser : ce sont les fichiers React Native spécifiques du projet
de chaque application qu’il faut mettre à jour.
Autrement dit, nous mettons à jour les fichiers dans le dossier node_modules à
la racine de notre application et non dans un logiciel de notre ordinateur. Il
faut donc exécuter la commande en étant dans le dossier en question.
Dans mon cas, la commande pour me déplacer dans ce dossier sera :
cd reactnative / myApp /

Me re à jour NPM
Pour mettre à jour NPM, c’est très simple, il faut lancer la commande :
npm install npm@latest -g

Après un bon nombre de téléchargements de packages, votre npm sera à jour.

Les bogues courants
Dans ce petit chapitre, je vais essayer de lister les bogues les plus courants
que vous pourrez rencontrer – et que j’ai parfois moi-même rencontrés lors
de la rédaction de cet ouvrage. Ce chapitre servira donc de foire aux
questions.

Applica on XXX has not been registered

Figure 10-1 – Applica on has not been registered

Cette erreur survient parfois. Il existe deux solutions simples pour la

corriger.

Solu on 1 : Code incorrect

Cela se passe dans la dernière ligne d’affectation du composant de
l’application au registre :
ReactNative.AppRegistry.registerComponent('myApp', function() {return myApp});

Vous devez vérifier que myApp est bien le nom de la classe principale de votre
application.

Solu on 2 : npm planté

Il peut arriver que npm plante, sans raison. Comme nous l’avons vu, le
lancement de l’application génère une console. Fermez Xcode et Android
Studio, fermez l’invite de commande puis rouvrez tout en cliquant sur le
fichier de projet souhaité.

Erreur de développement numéro 1

Ce genre d’erreur est relativement compréhensible :
 Figure 10-2 – L’erreur de développement numéro 1

React Native est un outil de débogage vraiment très bien conçu. Il vous
indique ce qui se passe (variable this.props.meteoData non définie), dans quel
fichier (MeteoView.js) et à quelle ligne (62).
À vous ensuite de trouver le pourquoi du comment.
Si vous ne comprenez pas l’erreur en question (à cause de l’utilisation de
l’anglais ou du développement lui-même), allez faire un tour sur votre
moteur de recherche préféré.

Erreur de développement numéro 2

Il s’agit de celle-ci :
 Figure 10-3 – L’erreur de développement numéro 2

Elle provient du fait que vous n’avez pas intégré l’objet React Native en
question ; dans le cas présent, le composant <TouchableHighlight> dans les
composants à inclure dans votre développement. Vous devez donc l’y
ajouter :

import React , { Component } from 'react'

import {
StyleSheet ,
Image ,
View ,
Text ,
TouchableHighlight
} from 'react-native' ;
nw_connec on
Cette erreur arrive couramment :

Figure 10-4 – nw_connec on

Si vous n’avez pas vous-même trouvé la solution, la voici :

• Dans le Project navigator, sélectionnez le projet.
• Allez dans l’onglet Build Settings de la partie Target.
• Sélectionnez la vue All et Combined.
• Rendez-vous dans la section Apple LLVM 8.0 - Custom Compiler Flags.
• Sélectionnez les sous-sections présentes l’une après l’autre, double-
cliquez sur leur valeur, cela va vous afficher un contenu sous forme de
liste pour chacune.
• Sélectionnez l’une après l’autre les valeurs en question et cliquez sur le
petit moins en bas de l’infobulle.

Figure 10-5 – Débogage

Unable to find this module in its module map
Quand vous tombez sur ce genre d’erreur :

Figure 10-6 – Unable to find this module

Bien que l’erreur vous spécifie ce que vous devez faire, je tenais à vous le
préciser, vous devez supprimer l’ancien dossier node à l’aide de :
rm -rf node_module

Puis le réinstaller en faisant :

npm install
Après une série de téléchargements, l’application est de nouveau
opérationnelle. Vous pouvez l’actualiser.
 Conclusion

Les applications mobiles sont devenues la pierre angulaire de la société

moderne. Grand nombre de sociétés, de toutes tailles, se sont prêtées au jeu
du développement d’une application pour permettre d’accéder à leurs
services respectifs en version mobile.
Dans cet ouvrage, nous avons abordé l’ensemble des possibilités qui
s’offrent à tout développeur pour créer et promouvoir sa propre application.
Ces resources infinies ne sont limitées que par l’imagination et le temps de
développement. En outre, pour concevoir une application vraiment
attrayante, le design ne doit pas être négligé et tirera partie de la puissance
de Flexbox.
Il y a donc fort à parier qu’avec le début de l’ère des objets connectés, les
applications mobiles sont l’outil ultime pour être proche de son public, à
condition de les faire connaître avec l’ensemble des moyens à votre
disposition.
 Index

A
achat in-app 83, 161
Android
AndroidManifest.xml 47, 62
SDK (Software Development Kit) 21
uses-permission 48
uses-sdk 48
Android Studio 21, 28
API 39
AppRegistry 29
ARPDAU (Average Revenue Per Daily Active User) 151
ARPPU (Average Revenue Per Paying User) 151
ARPU (Average Revenue Per User) 151

B
bind 37
brew 9

C
campagne
e-mail 148
marketing 153
class 28, 33, 34, 37, 71
CocoaPods 14, 15
Component 71
constructor 36
Cost Per
CPC (Cost Per Clic 150
CPCV (Cost Per Complete View) 150
CPE (Cost Per Engagement) 150
CPI (Cost Per Installation) 150, 152
 CPL (Cost Per Lead) 150
CPM (Cost Per Mille) 150
CPS (Cost Per Sale) 150
CPV (Cost Per View) 150
CSS 28

D
dataSource 53

E
Exception Domains 47

F
fetch 39
catch 40
then 39

G
gem 14, 15, 17
gradle 24
guérilla 147, 154

H
Homebrew 9
HTML 30

I
import 31, 34
index.android.js 13
index.ios.js 13, 27
Info.plist 45, 60
IR (Installation-Rate) 150

J
Java 21
SDK 22
JavaScript 37
Jest 11
jQuery 37

L
ListView 53
localhost 45
location 58

M
MINE 40
MINGW development toolchain 14
MSYS2 14

N
navigation.navigate 75
navigator.geolocation.getCurrentPosition 58
node 9
Node.js 9
npm 9, 65, 197
npm install 73
NSAllowsArbitraryLoads 46
NSAppTransportSecurity 45

O
onChange 37
onClick 37
onPress 39

P
package.json 12
pods 17
POST 40
PowerShell 10
Privacy – Location When In Use Usage Description 60
Programmation Orienté Objet 35
props 36, 75
R
React.js 11
react-native 11
React Native
API 57
composants 57
plug-ins 57
react-native-cli 10, 197
react-native-git-upgrade 197
react-native run-ios 12
react-native start 26
react-native-storage 65
react-native upgrade 29
react-navigation 72
react-navigation
SlackNavigator 72
render 28, 33
renderRow 53
require 33
résultats
résultats organiques 152
résultats payants 152
RPI 82
RubyInstaller 14

S
Scoop 9, 10
SDK (Voir Software Development Kit) 21
setState 38
settings.gradle 29
simulateur 19, 25
state 35
String 60
StyleSheet 28, 31
super 36

T
Text 28
TextInput 37
this 35

V
View 50

W
Watchman 10

X
Xcode 13
xcodeproj 29, 181
xcworkspace 181
Merci d’avoir choisi ce livre Eyrolles.

Nous espérons que sa lecture vous a été utile et vous aidera pour mener à
bien vos projets.

Nous serions ravis de rester en contact avec vous et de pouvoir vous

proposer d’autres idées de livres à découvrir, des nouveautés, des conseils
ou des événements avec nos auteurs.

Intéressé ? Inscrivez-vous à notre lettre d’information.

Pour cela, rendez-vous à l’adresse go.eyrolles.com/newsletter ou flashez ce

QR code (votre adresse électronique sera à l’usage unique des éditions
Eyrolles pour vous envoyer les informations demandées) :

Vous êtes présent sur les réseaux sociaux ?

Rejoignez-nous pour suivre d’encore plus près nos actualités :

Eyrolles Web Dev et Web Design

Merci pour votre confiance.

L’équipe Eyrolles

P.S. : chaque mois, 5 lecteurs sont tirés au sort parmi les nouveaux inscrits à
notre lettre d’information et gagnent chacun 3 livres à choisir dans le
catalogue des éditions Eyrolles. Pour participer au tirage du mois en cours,
il vous suffit de vous inscrire dès maintenant sur go.eyrolles.com/newsletter
(règlement du jeu disponible sur le site).
Pour suivre toutes les nouveautés numériques du Groupe Eyrolles, retrouvez-nous sur Twitter et
Facebook
@ebookEyrolles
EbooksEyrolles

Et retrouvez toutes les nouveautés papier sur

@Eyrolles
Eyrolles