Cordova, Installation/Fonctionnement , Mise en place d’une API, Exemple de code/projet

CORDOVA : Installation, fonctionnement, mise en pratique(exemple de code)

 

Cordova ou plutot “Apache Cordova” est un framework open-source développé par la fondation Apache, Il permet en autres de créer des applications Mobile sous Ios, Android, Windows Phone, BlackBerry avec des technologies Web (JavaScript, Html, Css). La ou Cordova Excelle c’est bien évidemment dans sa comptabilité avec toutes les plateformes Mobile, pas besoin de se casser la tête en Java JEE pour développer une application Android, et pas non plus besoin d’avoir un mac et se former au Swift pour créer une application Iphone.

Tout simplement car Cordova ne fonctionne pas avec des langages “Natif” pour développer notre application, mais bel est bien avec des technologie Web et donc universelle.

 

Et ça j'achète !

 

Commençons par le commencement :

 

L’installation :

 

Avant de rentrer dans la vif du sujet, nous allons commencer par installer Nodejs, donc si ce n’est pas déjà fait voici le lien d’installation pour télécharger Nodejs “https://nodejs.org/en/

Déjà une bonne chose de faites, Nodejs vas nous permettre d’installer Cordova, car ce dernier se trouve dans la bibliothèque NPM, service proposé par Nodejs donc.

Une fois ce dernier installé je vous invite à ouvrir votre terminal, nous allons vérifier si Nodejs est bien installé sur votre ordinateur et par la même occasion on va se procurer ce fameux Cordova !

Pour ouvrir le terminal en fonction de votre OS :

  • 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.

 

Une fois le terminal ouvert je vous invite a taper la commande “node -v”

 

Et la magie (ou pas) ! Vous devriez obtenir la version de Node.js installer sur votre machine.

 

Si par le plus grand des malheures vous avez un message d'erreur au lieu du nom de la version, je vous invite à copier coller le message d’erreur sur google, et de réessayer une fois le problème corrigé.

 

Place à Cordova ! Rester dans l'invite de commande nous en n’avons pas finis avec lui.

 

On va maintenant installer Cordova avec la fameuse librairie NPM que nous propose à présent Nodejs, pour se faire je vous laisse taper ces ligne dans votre invite de commande : “npm install cordova -g”.

 

Et voila Cordova est installé !

Quand l’installation est terminé comme sur ce screenShot par exemple vous pouvez vérifier la version installer de Cordova en tapant “cordova -v” dans l’invite de commande.

 

Et voilà je suis en version 8.0 !

 

Et pour terminer l’installation de Cordova ou va créer notre première application Cordova qui nous servira pour l'exemple de code/projet dans la prochaine parti de cette contribution.

 

Sans entrée dans les détails encore, mon exemple de code/projet va être un peu différent de ce qu’on peut trouvé sur les tutos sur le net, je ne vais pas vous montrer comme faire une application Météo, je trouve que ça n'a guere d’interet. Non ce qu’on veut savoir quand on créer une application mobile grâce a un framework qui n’utilise que Javascript et html/css, c’est comment dialoguer avec sa propre base de données sans utiliser de php dans notre projet.

 

C’est pour ça que pour la création de l’application cordova je vais vous demander de vous placer dans le répertoire “www” de votre serveur “Wamp” si vous êtes sous windows ou de votre répértoire “htdocs” de votre serveur “Mamp” si vous êtes sous mac et d’ouvrir votre invite de commande.

 

Une fois l’invite de commande ouvert dans le dossier de votre serveur je vous laisse taper la commande : “cordova create cordovaCampusId”

ou “cordovaCampusId” sera le nom du dossier ou se trouvera notre structure Cordova.

 

Et voilà. Croyez moi ou non mais notre application est créée et peut déjà être ouverte sur le web ! Je vous laisse aller dans votre dossier ou vous avez créer votre dossier Cordova et la magie :

Un dossier “cordovaCampusId” a été créer la ou nous avions demander. Et encore plus magie double cliquer sur votre dossier pour voir ce qui s’y cache à l’intérieur :

Nous allons voir ensemble , les 4 dossier les plus “importants” qui on été crée, en sachant que le dossier “res” contient les icônes propre à cordova, ce n’est pas quelque chose qui nous est très utile pour le moment

 

  • 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.

 

A présent tu peux te rendre dans le dossier www et double cliquer sur le fichier “index.html”

 

Et vous tombez sur cette magnifique page dans votre navigateur préféré.

 

Pour la petite explication “Connecting to device” est écrit car nous avons lancé l’index depuis notre ordinateur, et cordova attend d'être lancé sur un téléphone mobile pour fonctionner.

 

Pour se faire on a deux options, soit émuler l’index depuis un IDE tel que android Studio ou Xcode, soit simuler le fait qu’on soit sur un téléphone directement depuis votre navigateur.

Alors pour moi le choix est vite fait, sachant la lenteur des émulateurs de android studio et Xcode, je me dirige vers la deuxième options qui est bien plus simple et plus rapide.

 

On va donc installer ce plugin qui vas nous permettre d’émuler un téléphone mobile. Je vous laisse télécharger google chrome si vous ne l’avez pas, car oui ce plugin est disponible uniquement sur google chrome, (peut être en existe t’il d’autre dispo sur firefox mais je ne l’ai connais pas) et je vous laisse vous rendre sur le webStore de googleChrome , Cherchez “Ripple” dans la barre de recherche et télécharger “Ripple Emulator (Beta)”

 

 

Une fois qu’il est installé vous avez la petite icon de Ripple qui apparaît en haut a droite de votre google Chrome.

 

On va maintenant ouvrir notre index.html précédemment ouvert, mais cette fois sous google Chrome.

Vous devriez avoir exactement le même écran que tout a l’heure, maintenant je vous laisse appuyer sur l’icon de ripple et de cliquer sur “Enable”, Une nouvelle page apparait, je vous laisse cliquer sur “phoneGape/ Cordova”. Et la magie !

Maintenant il y a marquer “Device is ready” nous avons bien émuler un téléphone mobile sur notre navigateur et ceci en trés peu de temps ! Et ce qui est cool c’est que nous pouvons utiliser la console pour débugger notre application mobile comme n’importe quelle site web.

 

Cette longue partie d’installation et de fonctionnement est à présent terminé. Et on va maintenant commencer les choses sérieuse !

 

Mise en pratique / Exemple de code :

 

Dans cette parti on ne va pas tout de suite commencer par Cordova, mais on va bel et bien commencer par créer notre API en php pour dialoguer avec notre base de donnée que nous utiliserons par la suite dans notre application Cordova.

 

Pour commencer je vous laisse créer un nouveau dossier dans votre dossier de serveur, mais attention pas dans le dossier de Cordova.

 

Nommer le “ApiCampusId”, et ouvrez votre dossier avec votre IDE préféré.

 

Avant d’attaquer notre API, on va deja créer une base de données, ne vous inquiétez pas, cela va être trés rapide et trés simple, pour l’éxemple que je vais vous donner ça ne vas pas être compliquer.

 

Je vous laisse aller dans votre PhpMyAdmin et je vous laisse créer la base de donnée que nous allons appeler “campusidcordova”

Et la table que nous allons créer est “jeuxvideo” qui comporte 3 collonnes

Et je vous laisse entrée les informations comme ci dessous :

Je vous laisse appuyer sur save , et nous allons ensuite créer une deuxiéme table : infocomplementaire avec 3 colonnes :

et je vous laisse entrée les informations comme ci-dessous

Appuyer sur “save” et nous en avons finis la création de la base de données ! On peut maintenant passer au php !

 

De retour dans votre IDE je vous laisse créer un dossier à la racine de votre projet que l’on va nommer “config” c’est ici que nous mettrons la connexion à notre base de donnés , et à l'intérieur du dossier config créer un fichier “database.php”

Et je vous laisse entrée les informations de votre base de donnée comme ci dessous :

(Je passe volontairement rapidement sur ces éléments car ce n’est pas le coeur de ce tutoriel, car oui c’est d’abord un tutoriel sur Cordova et non sur php)

 

Sachez seulement que nous avons créer une classe qui nous permet de faire la connexion à notre base de donnée, dans la variable $db_name mettez le nom de votre base de donnée et dans la varaible $password mettez le mot de passe de votre phpMyAdmin, il n’y a pas de mot de passe si vous êtes sous Wamp donc laissez ce champ vide si vous êtes sous Wamp et mettez “root” si vous êtes sous Mamp (c’est le mot de passe par défaut.

 

Ceci étant fait on va maintenant passer à la modélisation de notre base de données en php ce qui va nous permettre d'effectuer des actions sur cette dernière.

 

Créer un nouveau dossier a la racine de votre projet que vous nommerez “object” et créer un fichier a l’intérieur que vous nommerez “jeuxvideo.php”

 

Entrée a l’interieur les informations comme ci-dessous :

Cette classe représente notre base de donnée ainsi que ces tables, et effectue la connexion a la base de donnée.

 

A présent on va faire des requetes SQL pour lire les informations de nos tables. Pour ne pas que ce soit trop long je vais uniquement vous montrez des requêtes de lecture que nous utiliseron par la suite dans notre application Cordova

 

On commence par créer la requete pour avoir toutes les informations de notre base de donnée :

Et une requete pour obtenir un seul élément de notre base de donnée par son ID par exemple :

La partie requete est terminer !

 

Maintenant on va créer un nouveau dossier php la racine de notre projet que vous nommerez “jeuvideo” et un commençons par un fichier que l’on nommera “read.php”

C’est se fichier qui sera appelé quand nous voudrons avoir toutes les informations de notre base de donnée !

 

Je vous laisse entrée les informations comme ci-dessous :


Et voila nous avons deja notre premiére requete qui est fonctionnelle ! Et on peut même l’éssayer tout de suite, je vous laisse entrée dans votre base de donnée des infos dans vos deux table.

Aprés avoir entrée un jeu video dans vos deux table, (donc le jeu video et sa descrpition en n’oubliant pas de mettre son idjeuvideo)

On va exécuter la requete dans notre naviguateur, je vous laisse donc entré dans votre barre de recherche “http://localhost:8888/ApiCampusId/jeuvideo/read.php

En changeant le localhost en fonction de votre serveur, car localhost:8888 est propre a Mamp, pour Wamp ce sera juste “localhost”

 

Et voici ce que j’obtiens de mon côter :

Et c’est bien ce que contient ma base de données !

 

On peut dire que ce qui est côter php est terminer et on va enfin passer à Cordova !!

 

Je vous laisse donc ouvrir à présent le projet Cordova avec votre IDE préféré et pour commencer je vous laissez aller dans le dossier www de notre dossier cordova, et de vous rendre dans l’index.html, Veuillez supprimez tout ce qui se trouve dans l’index, mais laissez uniquement les <script> qui font appel au js

 

et remplacer la ligne “meta http-equiv="Content-Security-Policy"”

 

par <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; connect-src *">

Et oui car la ligne qu’il y’avait précédement nous empecher d’utiliser des services externe, donc impossible d’utiliser notre api fraichement créer dans notre cas.

 

Si vous recharger la page web de cordova vous devriez obtenir une page blanche , et c’est parfait pour commencer notre petit exemple sur de bonne base !

 

Avant de commencer a coder nous allons installer AngularJs, car c’est avec cette techno que nous allons faire appel a notre API !

 

Je vous laisse vous rendre sur le site d’angular JS de télécharger la versinon minifier et de le mettre dans votre dossier “js” de votre www

 

Ensuite incluez l’angularJs via une balise script dans l’index.html

 

Maintenant rendez vous dans le fichier index.js dans le dossier js et supprimez tout ce qui se trouve à l’intérieur.

 

Une fois que ça c’est fait rendez vous dans le fichier index.html et dans la balise html entrer la directive “ng-app=”app””

Vous devriez obtenir ceci pour le moment dans votre index.html et a présent ajoutez une div dans votre body “<div ng-controller="jeuxvideoCtrl"> </div>” comme ceci

, et a présent rendez vous dans le fichier index.js, nous allons créer notre controller AngularJs pour faire des requêtes avec la base de données

 

et entrée “var app = angular.module('app', [

]);”

pour initialiser notre application avec Angular

 

en dessous de ça je vous laisse entrée les lignes

“function jeuxvideoCtrl ($scope) {

} “

C’est ici que se trouverons nos fonction de requete.

 

Dans un premier temps on va créer une factory qui va regrouper nos différente requete AJAX vers notre API,

Pour se faire on va créer la factory de cette façon :

 

app.factory("jeuxvideoFactory", function($http){

var factory = {};

 

return factory;

});

 

Ensuite a l’intérieur on va y placer notre requête AJAX comme ceci :

 

// Lecture de tout les jeuxvideo

factory.read = function(){

return $http({

method: 'GET',

url: 'http://localhost:8888/ApiCampusId/jeuvideo/read.php'

});

};

 

Ce qui nous donne a la fin :

Notre factory étant faite on va faire appel cette factory dans notre contrôleur précédemment comme ceci :

“function jeuxvideoCtrl ($scope, jeuxvideoFactory) {

 jeuxvideoFactory.read().then(function successCallback(response){

       console.log(response);

}, function errorCallback(response){

$scope.showToast("Unable to create record.");

});

}”

Si vous regarder le console.log dans votre console au lancement de l’application vous pouvez voir qu’il contient toutes les informations des jeuxvideo dans votre base de données, on va maintenant le faire afficher dans la vue et notre tutoriel sur Cordova sera terminer ! 🙂

 

Pour se faire nous allons mettre tout simplement toutes les informations concernant nos jeuxvideo dans une variable qui sera disponible dans la vue, c’est le role de la varibla $scope en Angular Js

 

Voila a quoi devrait ressemble votre fonction et nous n’y toucheron plus :

A présent nous allons passer à la suite c’est a dire l’affichage des informations récupérer, pour se faire dans l’index.html et plus précisément dans la div de notre controlleur nous allons faire une boucle et faire afficher les informations de cette façon :

 

<div ng-controller="jeuxvideoCtrl">

       <ul style="list-style:none;">

           <li ng-repeat="jv in jeuxvideo">

             <img ng-src="{{ jv.img }}" style="height: 150px;width: auto;">

             <h2 style="display: inline-block;text-indent: 21px;position: absolute;margin-top: 63px;">

             {{ jv.name }}

             </h2>

             <p> {{ jv.infocomplementaire.description }} </p>

             <hr> <br>

           </li>

       </ul>

     </div>

 

Votre page entiére index.html devrait ressembler a ceci :

Je vous laisse raffraichir votre page index.html dans votre navigateur et vous devriez voir apparaitre vos différent jeux que vous avez rentrer dans votre base de données.

Et c’est içi que notre tuto s’arréte ! Nous pourrions aller bien plus loin en faisant l’ajout de données/ la modification / et la suppréssion de ces derniers, mais cela marche exactement de la même maniére, et la cela nous a permis de créer une petite application mobile pour regrouper la fiche technique de tout nos jeux préférés en un rien de temps.

 

Je vous laisse le lien google drive du projet avec la base de données sql dans un fichier a ce lien : https://drive.google.com/drive/folders/1L7Jx9x7fNFX14I5TPcA9QBp_CkwRhMG-?usp=sharing

 

Laisser un commentaire

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