Dans le milieu des systèmes d’exploitation, les applis sont considérées comme particulièrement techniques. À Londres, les développeurs qui codent sur ces applis sont membres d’unités d’élite appelées développeurs Androïd ou iOs. Voici l’histoire que j’en ai retenu.

Vous le savez sans doute pas mais, il y a peu, j’étais à Londres. Monster m’y avait invité notamment parce que j’avais déjà rédigé un billet sur comment faire son bot Twitter et accessoirement, je suis aussi étudiant à l’école 42. Bon …Ils se sont surement dit que savoir coder une appli pourrait me botter.

BONUS – Bien joué 😀

Du coup, je me suis retrouvé à coder deux week-end de suite pour voir deux choses : la première, donc, coder une app et la seconde, comment l’amener au marché.

Ce fut cool ! J’étais pour le coup au sein de London App Brewery avec Phillipp et Angela. C’est à ce moment que l’on m’a demandé de faire un choix. Un choix qui allait me suivre pour le reste de ma vie :

Alors, Android ou iOs ?

Question aussi cruciale que le choix de Sophie. Alors, on regardera comment on peut faire son choix entre les deux et ce sera l’occasion de vous révéler pourquoi j’ai choisi android. Oui, je tue le suspense tout de suite. Ensuite, on verra comment faire une app en quelques minutes.

Yes, en quelques minutes. Moi-même, je ne pensais pas que ça serait aussi facile. Vous allez voir.

On y va ?

L’app vient en smartphone

Bon …Sans vous noyer dans une marée de chiffres, on va juste poser ce constat simple : les applications mobiles sont devenues incontournables. Déjà parce que les smartphones sont devenus eux-même incontournables.

En France, on était 58% a en avoir un. Cela représenterait, selon médiamétrie, près de 27,7 millions de personnes. Ce qui peut encore être plus effarant c’est que 90% des 18-24 ans en étaient équipés.

Dans chaque smartphone, il faut compter 35 applications mobiles installées en moyenne. 11 d’entre elles sont utilisées de manière hebdomadaire quand 12 applications ne le sont jamais.

Au niveau mondial, on téléchargerait 9 applis en moyenne par mois. Je trouve ce chiffre énorme. Je me rends pas tellement compte. Alors, voici ce que ça peut donner en temps simulé :

Et dire qu’à l’origine, en 2008, quand Steve Jobs annonçait lors de la conférence keynote d’Apple sa principale nouveauté, App Store, la boutique contenait seulement 500 applications à son ouverture.De son côté, l’Android Market (qui deviendra Google Play en 2012) rassemblait à ses débuts à peine 2 300 applications en 2009. Aujourd’hui, il y aurait respectivement 1,6 et 1,5 millions d’applis sur l’App Store et sur le Google Play. Ca bien bougé en effet !

L’android qui l’a dans iOs

Parfois choisir entre Android et iOs, c’est comme tenter de regarder à droite et à gauche en même temps. Ce sont là, les deux principaux systèmes d’exploitation. Le système d’exploitation, pour faire simple, c’est ce qui fait que votre smartphone fonctionne. Chacun a ses propres spécificités et d’ailleurs, chacun a son propre magasin d’appli. Ainsi pour l’iOs, il s’agit de l’App Store et pour Android, c’est Google play.

Pour provoquer un petit peu, l’iOs c’est pour les iPhone soit 19,4% du marché et Android c’est pour tout le reste soit environ 64,6%1.

Bon, c’est vrai qu’à eux 2, ils ne font pas totalement le compte. J’ai délibérément écarté le système d’exploitation windows (14,1%) sur lequel tournent notamment les windows phone. Je l’ai fait car ils ont un impact mineur sur le marché de l’application. Quand j’avançais les chiffres de 1,6 et 1,5 millions d’applis sur l’App Store et sur le Google Play, il y en a environ 5 fois mois sur le windows store (340 000)2.

Maintenant, je vais vous dire pourquoi j’ai choisi de vous montrer comment développer une appli sur android. Je sais que vous attendez ce moment depuis le début. Voici la réponse :

Parce que j’ai un téléphone qui fonctionne sous le système Android

Vous vous attendiez en une démonstration thèse-antithèse-synthèse ? Vous vous sentez trahis par un blogueur mercantile ? Vous avez le droit de demander ma démission …surtout que depuis, je suis passé sur iPhone. Trahison ultime.

En réalité, je ne veux pas me lancer dans un billet comparatif des systèmes. C’est long et chiant. On est ici pour apprendre à faire une appli. Une appli android en vrai !

 
 

T’as vu, j’ai fait une app !

Si faire une app’ peut demander de réelles ressources et compétences, voire une équipe entière dédiée, cela n’empêche pas d’être accessible à tous. Merci à Matthieu et Angela de me l’avoir prouvé. Ils ont pas mal inspiré cet article d’ailleurs.

Big up à eux !

C’est vrai qu’il y a un peu code. Mais pas beaucoup. A peine quelques lignes. Parait aussi qu’il faut être numérique et tout ça …Non parce que, utiliser seulement sur les réseaux sociaux, ce n’est pas ça le numérique les gens.

Faut pas déconner.

D’abord, on va commencer soft. On va faire une appli pour jouer aux dés comme si dessous. Bon … C’est pas forcément l’app du siècle mais quand vous la ferez tourner et la verrez sur votre écran, vous ne pourrez dissimuler un sourire satisfait, vos joues rougies de fierté et peut être … je dis bien « peut être » … une larme à l’oeil.

Je vais à présent vous accompagner pas à pas ou étape par étape et je vous donnerai les morceaux de code pour tout faire bien tourner comme il faut. Si vous y prenez goût, alors vous allez pouvoir vous amuser à faire un WhatsApp perso. On y reviendra 😉

Etape 0 – Les ingrédients

Pour faire une bonne app’ android, vous avez besoin de plusieurs choses dont voici la liste :

  • Un PC ou un Mac, ça passe avec les deux
  • Un téléphone android avec son câble USB sinon, on utilisera un émulateur et je vous expliquerai comment
  • Installer Android Studio Project qui est téléchargeable ICI
  • Installer Java Development Kit qui est téléchargeable ICI. La version à choisir dépend bien sur de votre ordinateur.
  • Activer le USB debugger via le mode développeur du téléphone – Et oui ! Ca existe ! – Pour faire cela, voici un tuto utile. Ceci nous permettra de faire notamment tourner notre app’ sur le téléphone.

Étape 1 – Démarrer et configurer un nouveau projet Android Studio

Lancer Android studio et là c’est simple, il suffit de cliquer sur « Start new Android Studio project ».

Puis de configurer le le projet comme si dessous :

Vous devriez tomber sur un écran comme celui-ci maintenant :

C’est maintenant que les choses sérieuses commencent ! On va aller sur la partie activity_main.xml qui nous permet d’avoir un visuel sur l’app en temps réel.

Comme on peut déjà le voir, il y a une grande bande bleue qu’on va enlever. C’est très simple ! On va juste changer "style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar" en "style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"

Pour obtenir cela en retournant sur l’onglet activity_main.xml !

Étape 2 – Le paramétrage des éléments graphiques

Bon maintenant, on va récupérer les éléments graphiques (images, logos …) dont aura besoin notre application. Comme je suis un mec très très très sympa, vous pouvez les télécharger ICI.

Maintenant que c’est fait, on va paramétrer l’icône de l’app. Pour cela, on va d’abord générer les différents dossiers nécessaires. On va donc créer ce qu’on appellera un Image Asset en faisant un clic droit dans le dossier res puis en cliquant sur New comme c’est représenté ci-dessous.

Une fois crée, on va préciser que l’on ne souhaite le logo Android par défaut mais notre logo personnalisé que l’on vient de télécharger. On précise l'image que l'on veut en lui indiquant le chemin pour la trouver sur l’ordinateur. Ainsi, le logo qui sera lié remplacera tous ceux qui étaient par défaut.

A présent, on va mettre tous les éléments graphiques dans le dossier qui contient le projet de l’app. On va déjà révéler où se trouve le fichier res sur notre ordi en faisant un clic droit dessus puis en cliquant sur Reveal in Finder sur Mac ou Show in Explorer pour Windows.

Une fois le dossier ouvert, on va déplacer les dossiers contenus dans l’archive APP_des dans le dossier res ainsi révélé.

Et voilà !*

*En français dans le texte.

Ouf ! On va souffler un peu maintenant. Alors, voici une jolie image de montagnes qui est à la fois rafraichissante et tellement dépaysante. Prenons 5 sec avant de replonger.

…

 
 

C’est bon ? Allez hop, on reprend !

Étape 3 – Design de l’application

C’est parti pour la conception de l’appli. Avant tout, on va vérifier que l’on est bien sur la bonne taille d’écran histoire de ne pas se retrouver avec des trucs bizarres ensuite. Sur l’écran activity_main.xml, c’est ici qu’on va choisir la résolution de l’écran. De mon coté, je vais prendre la résolution 768 x 1280 soit un écran de 4,7 pouces qui est pile poil celui de mon Samsung. Ce qui correspond au téléphone Nexus 4 à titre de comparaison.

Désormais, tout est prêt pour mettre le premier bouton d’action de l’appli. Déjà, on supprime la mention usée "Hello world" pour ensuite glisser-déposer un bouton au milieu de l’app comme ci-dessous :

A présent, on va aller dans la partie text. Pour cela, il suffit de switcher comme c’est indiqué en bas.

Bon…je vous l’avais promis. Je vais donc un peu vous prémâcher le code de sorte que vous n’ayez à faire qu’un copier/coller. Déjà, vous allez garder dans un coin de votre tête, de papier ou sur votre ordi la ligne suivante :

Bien sur, il s’agit là d’une ligne de code qui m’est propre. De votre coté, vous allez conservé la ligne qui vous correspond à tools:context. Quand c’est fait, vous allez pouvoir effacer tout le reste sans regret pour coller ces lignes-ci à la place :

En veillant bien à remplacer ICI VOTRE LIGNE DE CODE tools:context par votre propre ligne de code tools:context.

Quand cela est fait, vous devriez désormais avoir ceci dans la partie Design :

Si vous n’obtenez pas la même chose, c’est surement qu’un truc a raté entretemps. N’hésitez pas à me le dire sur ma page Facebook. Sinon, si vous voulez plus de commentaire au sujet de ce code. C’est pareil, vaut mieux passer par la page Facebook 😉

Étape 4 – L’intelligence de l’application

Le design, c’est fait ! On va pouvoir se consacrer à l’intelligence de l’application c’est à dire à ce qui fait qu’elle fonctionne. Pour cela, on va coder un peu en Java. Alors place à l’onglet MainActivity.java.

Dans ce coin là, il vous suffira d’avoir simplement ce code qui roule :

Enfin le moment de vérité !

Étape 5 – Lancer l’app

Après en avoir baver, pendant quoi ? 15 min peut être, on va pouvoir lancer l’application. Pour cela, rien de plus simple. Tout d’abord, il faut brancher le téléphone via le câble USB à l’ordinateur. Le câble doit être un bon câble. Je le précise. Ensuite, on va cliquer sur le bouton Run (flèche verte) qui se trouve aussi bien en haut qu’en bas.

Et ensuite plus qu’à attendre …

BINGO !

Alors ? Vous y êtes arrivé jusque-là ? Non ? Oui ? J’ai mal au ventre, je te dirai demain ? En tout cas, on n’a pas fait l’app la plus compliquée encore. L’essentiel c’est de faire quelque chose de ses mains avant tout. La suite, on verra après. D’ailleurs, si il y des personnes qui veulent avancer et faire leur propre Whatsapp perso, n’hésitez pas à me le dire.

Tant que j’y suis, vous pouvez liker ma page Facebook. C’est pour sauver le monde de la papillote qui est en grave danger ces jours derniers 😀