Hello hello ! Tu viens d’avoir une idée de folie pour une application mobile mais tu ne sais pas comment la développer ? Tu penses que les applications mobiles peuvent être créées qu’avec les langages propres aux systèmes d’exploitation mobile tels qu’Android et iOS ? Ce temps est révolu !

Tu peux maintenant créer une application avec les langages que tu connais en tant que développeur web.  

Pré-requis pour créer une application mobile

  • Avoir quelques notions sur la ligne de commande.
  • Connaître HTML/CSS, notions de JavaScript.
  • Savoir trouver des solutions à ses problèmes.

Le dernier point est important car chaque machine est différente et il se peut que l’installation de tel ou tel outil te poses un souci. Ne reste pas bloqué dessus, mais fait une recherche de ton erreur, il y a sûrement déjà quelqu’un qui a eu ton souci ! Sinon tu peux demander dans la discussion en bas.  

Ce tutoriel sera composé de trois parties :

  1. Configuration et théorie (tu te trouves dans cette partie  )
  2. Développement de l’application
  3. Exporter l’application mobile

Pour te mettre l’eau à la bouche et rendre ludique la partie théorique, je vais t’expliquer ce que nous allons réaliser. Le but est de créer une application qui nous donnera la météo actuelle de la ville que l’on souhaite. Plutôt cool non ?

cleanweatherScreen

Nous allons donc découvrir Apache Cordova, le framework qui permet de développer des applications pour différentes plateformes mobiles (Android, iOS, Windows Phone) en HTML, CSS et JavaScript !

Pour ton information, Cordova possède de nombreux concurrents tel que PhoneGap qui est basé dessus, Appcelerator, ou encore Ionic.

A noter aussi qu’il existe différents types d’applications :

  • Les applications natives faites avec le langage de l’OS mobile se développent avec des langages tels que le Java (pour Android) ou l’Objective-C/Swift (pour iOS). Elles permettent d’accéder à toutes les fonctionnalités de l’appareil mais compliquées à créer si on ne connaît pas ces langages. De plus pour déployer son application sur plusieurs OS, il faut connaître chaque langage propre à l’OS.
  • Les applications hybrides, ce que nous allons faire, sont des applications crées en HTML/CSS et JS. Elles peuvent être déployées sur tous les OS mobiles existants et téléchargées sur les différents store d’application. De plus, il existe de nombreux plugins pour accéder aux fonctionnalités du téléphone.
  • Les web-app, sont des applications intégrées au navigateur, faites en langages web mais elles ne peuvent pas être téléchargées sur les stores et n’ont pas accès aux fonctionnalités du téléphone.

Préparer l’installation de Cordova

Toujours prêt ? C’est parti on va installer Cordova !  

Pour se faire, nous allons avoir besoin de Nodejs qui est un framework JavaScript orienté back-end, c’est-à-dire côté serveur (à l’inverse du côté client qui concerne le HTML/CSS et le JavaScript autre que celui de Nodejs). Tu peux donc par exemple rapidement mettre en place un serveur web avec Node. De plus, Nodejs possède un gestionnaire de paquets très utile nommé NPM (Node Package Manager) qui te permet d’installer sur ta machine des outils ayant une fonction précise. Par exemple, Cordova est un paquet se trouvant sur NPM.

Pour résumer pour avoir Cordova il nous faut NPM, et pour avoir NPM il nous faut Nodejs, ce n’est pas plus compliqué que ça !

Installer Nodejs

On va donc installer Nodejs ! Pour ça, rend-toi sur le site de Nodejs qui te propose de le télécharger. Ici, l’installation est plutôt simple car tu disposes d’une interface graphique. Si tu peines trop, je te conseille cet article d’OpenClassrooms.

Une fois Nodejs installé, il va falloir faire face à la ligne de commande ! D’une, pour vérifier que Nodejs est bien installé, et de deux, pour installer Cordova.

Je t’invite donc à ouvrir le terminal. Si tu ne sais pas comment faire, pas de panique ! Nous allons voir ça ensemble en fonction de ton système d’exploitation :

  • Windows : appuie en même temps sur le logo Windows et la touche R de ton clavier, une petite fenêtre en bas à gauche s’affiche, dans celle-ci tape cmd, valide en tapant sur entrée et voilà tu viens d’ouvrir ton terminal.
  • Mac : rends-toi dans le Launchpad (lanceur d’applications) et tape “terminal”, puis ouvre-le.
  • Linux : le raccourci clavier ctrl+alt+T, te suffira à ouvrir le terminal.

Ton terminal est ouvert, tu peux maintenant taper node -v et là, magie, le terminal te retournes la version de Nodejs ! Cela veut dire que Nodejs est bien installé sur ta machine. Par exemple, j’obtiens “v0.10.25”. Si par malheur tu n’obtiens pas la version de Nodejs mais un message d’erreur, copie-colle cette erreur sur Google et tu trouveras sûrement une solution.

Installer NPM et Cordova

Comme nous avons maintenant Nodejs sur notre machine, nous avons donc le gestionnaire de paquets de Node. Tu peux voir les différents paquets qui s’y trouvent sur www.npmjs.com. Tu n’as rien remarqué ? Cordova apparaît dans la liste des paquets les plus couramment installés !

On retrousse nos manches et on installe Cordova : reviens sur la ligne de commande et il te suffit de simplement taper npm install cordova -g, on dit à NPM d’installer Cordova dans sa globalité d’où le -g. Laisse tourner un petit moment et quand l’installation est terminée, tape cordova -v (ce qui va normalement te renvoyer le numéro de la version de Cordova que tu viens d’installer). Si tu obtiens bien le numéro de version c’est que c’est bon, par exemple “5.3.3”.

Sache que tout ce que tu feras avec Cordova devra se faire depuis la ligne de commande, mais ne t’inquiète pas les commandes sont souvent explicites

Création de l’application

Voilà Cordova est maintenant installé, tu vas pouvoir créer ta première application ! Pour cela c’est simple comme bonjour, il te suffit de taper dans ton terminal cordova create myApp, où myApp correspond au nom du dossier qui va être créé et au nom de ton application.

Tu viens de créer ta première application !  

Nous allons voir ensemble les différents dossiers générés par Cordova pour mieux appréhender notre future application. Il y a 4 dossiers de créés :

  • hooks : peu utilisé, ce dossier modifie la configuration de Cordova pour ton projet.
  • platforms : c’est dans ce dossier que tu verras ton code pour chaque plateforme telles qu’Android ou iOS.
  • plugins : c’est ici que seront ajoutés tous les plugins Cordova comme la géolocalisation, la caméra ou les notifications.
  • www : ici c’est le nerf de la guerre, c’est là-dedans que tu vas développer ton application. Tu retrouves un dossier pour les images, un pour le CSS et un autre pour le JavaScript.

Tu peux donc te rendre dans le dossier www/ et exécuter le fichier index.html dans ton navigateur préféré. Tu y vois le logo de Cordova ainsi qu’un texte “connecting to device” :  c’est l’application installée par défaut quand tu crées une nouvelle application.

Voilà pour le moment, on en a fini pour l’installation de Cordova. On se retrouve dans la partie 2 pour le développement de l’application.  

Créer une application mobile de A à Z – Partie 1 : Installer Cordova
4.8 (95%) 12 votes

Ce qui pourrait également t'intéresser ...

13 réflexions sur “ Créer une application mobile de A à Z – Partie 1 : Installer Cordova ”

  1. Ah super! J’adore vraiment ce blog. A chaque fois que dans ma todolist je rajoute quelque chose, dans les jours qui suivent, il y a toujours un tuto ou article pour en parler et me forcer en quelques sortes à le faire ! Malgré que ce ne soit pas dans le programme MMI, ça permet aux étudiants qui envisage de faire de l’appli’ hybride mobile de débuter par eux-même

      1. Bonjour, en effet c’est bien un souci de permission, il faut que tu sois en super-utilisateur je pense, pour installer cordova il faut que tu ajoutes sudo (super-user do) avant le « npm install cordova -g ».

        Quand tu taperas « sudo npm install cordova -g », cela va te demander ton mot de passe de ton compte utilisateur.

        N’hésite pas si tu as d’autres questions

  2. Bonjour tout le monde, j »ai vraiment beaucoup aimé ce cours, en effet, il est rédigé d’une façon qui se ressemble beaucoup à celle d’openclassrooms. (toujours cool et traite les choses pas à pas)
    D’autre part j’ai eu une erreur pourl a création du dossier myAPP, erreur de permission windows,
    mais le fait d’ouvrir la console cmd en tant qu’un administrateur, a réglé le problème

  3. Hello,
    Merci pour ton tuto, je l’ai réalisé et je constate que sur l’APK sur mon tel, rien ne se déclenche quand je valide le formulaire.
    Tu pourrais me donner une méthodo pour débugger ce genre de choses ? Est-ce qu’il y a des outils de debug en direct sur téléphone ?
    Thanks !

  4. « Pour ton information, Cordova possède de nombreux concurrents tel que PhoneGap qui est basé dessus, Appcelerator, ou encore ionic » ???????
    Ha non pas du tout, rien à voir avec des « concurrents ». Cordova est le coeur de PhoneGap, la matrice sur laquelle phonegap et qui est en opensource.
    Ionic ?: Là encore rien à avoir avec un concurrent de cordova ou phonegap lol Ionic est un framework mobile en support d’autres frameworks javascript tel que angularjs et s’appuie sur cordova pour compiler en application mobile, donc si ionic est utilisé seul, tu ne pourras pas compiler en application mobile.
    Appcelerator Titanium est le seul concurrent de phonegap/cordova qui bénéficie de sa propre API multi mobile pour pouvoir compiler et émuler une application mobile.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je veux Contribuer

C'est parti

Je suis un Professionnel

Voyons voir