Créer une application pour son hôtel avec Cordova

Vous venez d’avoir une idée de folie pour une application mobile mais vous ne savez pas comment la développer ? Vous imaginez 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 !

On peut maintenant créer une application avec les langages que vous connaissez en tant que développeur web. Ici je vais vous apprendre à installer votre cadre de travail afin que vous puissiez donner vie à vos idées !

Pré-requis pour créer une application mobile pour son hôtel

• 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. Il se peut que l’installation de tel ou tel outil vous pose un souci. Ne restez pas bloqué dessus, mais faîtes une recherche de votre erreur, il y a sûrement déjà quelqu’un qui a eu votre souci !

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 votre information, Cordova possède de nombreux concurrents tel que PhoneGap qui est basé dessus, Appcelerator, ou encore Ionic

.

Différents types d’applications pour votre hôtel :

• Les applications nativesfaites 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, 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 pour son hôtel

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). Vous pouvez 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 permet d’installer sur la 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, rendez-vous sur le site de Nodejsqui vous propose de le télécharger. Ici, l’installation est plutôt simple car on dispose d’une interface graphique.

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 vous invite donc à ouvrir le terminal. Nous allons voir ça ensemble en fonction de votre système d’exploitation :

• Windows : appuyez en même temps sur le logo Windows et la touche R de votre clavier, une petite fenêtre en bas à gauche s’affiche, dans celle-ci tapez cmd, validez en tapant sur entrée et voilà vous venez d’ouvrir vôtre terminal.

• Mac: rendez-vous dans le Launchpad (lanceur d’applications) et tapez “terminal”, puis ouvrez-le.

• Linux: le raccourci clavier ctrl+alt+T, vous suffira à ouvrir le terminal.

Votre terminal est ouvert, vous pouvez maintenant taper node -v et là, magie, le terminal vous retourne la version de Nodejs ! Cela veut dire que Nodejs est bien installé sur votre machine. Par exemple, j’obtiens “v0.10.25”.

Installer NPM et Cordova

Comme nous avons maintenant Nodejs sur notre machine, nous avons donc le gestionnaire de paquets de Node. Vous pouvez retrouver les différents paquets qui s’y trouvent sur www.npmjs.com

.

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

Sachez que tout ce que vous ferez avec Cordova devra se faire depuis la ligne de commande, mais ne vous inquiétez pas les commandes sont souvent explicites

Création de l’application hôtelière

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

Vous venez de créer votre 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 votre projet.
• platforms: c’est dans ce dossier que vous verrez votre 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 vous allez développer votre application. Vous retrouvez un dossier pour les images, un pour le CSS et un autre pour le JavaScript.

Vous pouvez donc vous rendre dans le dossier www/ et exécuter le fichier index.html dans votre navigateur préféré. Il y aura le logo de Cordova ainsi qu’un texte “connecting to device” :  c’est l’application installée par défaut quand on crée une nouvelle application

N’hésitez pas à nous envoyer un message, notre équipe serait ravi de discuter avec vous de votre projet.

Nous faisons un webinaire 100% GRATUIT juste pour vous pour vous permettre de connaitre les différentes solutions que vous avez au niveau numérique pour développer votre projet mais aussi d’en apprendre plus sur le marketing et le design (de nouvelles solutions pour augmenter le CA de votre hôtel camping). Les places sont limités donc réservez là votre dès maintenant.