Créer une application mobile de A à Z – Partie 1 : Installer Cordova

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ù myAppcorrespond 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.  

Commentaires

Enregistrer un commentaire

Posts les plus consultés de ce blog

PhoneGap Login with PHP & MySQL

Image
phonegap-cordova-login-system Phonegap login system (cordova login) using php & mysql:  In this tutorial, we’re going to build  simple login system  using phonegap with php and mysql backend. Creating database for storing user data ( mysql ) Creating Login page for authenticate existing user Creating Signup page for add new user account Database design for phonegap login system First we need to create database for storing new user’s data such as userid, full name, email address and password. CREATE TABLE `users` ( `userid` int(1) NOT NULL, `fullname` varchar(50) NOT NULL, `email` varchar(50) NOT NULL, `password` varchar(50) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ; ALTER TABLE `users` ADD PRIMARY KEY (`userid`); ALTER TABLE `users` MODIFY `userid` int(1) NOT NULL AUTO_INCREMENT; After creating database, we need to write a php code for validating new user. we’re going to validate user based on email address. if email address...
Lire la suite

AngularJS - sorting(using orderby filter) table data example

Data sort in one of the most important and essential component in any web based projects. we can find data in order by any field then we can find any data easily from reach data. In this post, we can learn how to sort table row using AngularJS orderby filter. in bellow example you can see we have two column one for language and another for total developer. So if you click on table heading then you can sort data using orderBy filert. You can learn and see bellow example. Example <html lang = "en-US" > <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" > <script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js" ></script> <body> <div ng-app = "myApp" ng-controller = "customersCtrl" > <h2 class = "text-center" > AngularJS sortable table example </h2> ...
Lire la suite

PhoneGap PHP MySQL Example

Phonegap PHP MySQL Example In this article, I would like to write an article about PhoneGap with PHP & MySQL. we’ll see how to perform CRUD (Create, Read, Update, Delete) operations with MySQL Database. Step By Step Guide: MySQL Database Creation Writing PHP code for Serverside Writing Jquery code for PhoneGap / Apache Cordova side Dependencies: PHP, MySQL, JQuery Learn More about PHP & MySQL  http://www.w3schools.com/php/php_mysql_intro.asp  or  http://www.tutorialspoint.com/php/php_and_mysql.htm Download Source Code 1. MYSQL DATABASE CREATION In this example, I’m going to create some basic database & table (course_details) with following fields such as id, title, price. CREATE TABLE ` course_details ` ( ` id ` int ( 1 ) NOT NULL , ` title ` varchar ( 25 ) NOT NULL , ` duration ` varchar ( 50 ) NOT NULL , ` price ` varchar ( 10 ) NOT NULL ) ENGINE = InnoDB DEFAULT CHARSET = latin1 AUTO_INCREMENT = 1 ; A...
Lire la suite