Créer une application mobile de A à Z – Partie 2 : Développement

Hello ! Tu viens d’installer Cordova sur ta machine et tu es fin prêt à développer une application mobile de tes propres mains ? Alors, tu peux démarrer cette deuxième partie du tutoriel

Si tu n’as pas encore installé Cordova sur ta machine ou si tu ne sais tout simplement pas le faire, je t’invite à lire la première partie du tutoriel qui est entièrement dédié à cette étape.

L’application que nous allons réaliser va nous donner la météo actuelle dans une ville que l’on aura choisie via un formulaire. Nous allons utiliser plusieurs outils pour accélérer le développement.

Les outils

jQuery : la fameuse librairie JavaScript qui facilite la gestion d’évènements, la manipulation du DOM, la manipulation des feuilles de style et bien d’autres.

Materializecss : c’est un framework CSS (comme Bootstrap ou Foundation avec des styles différents) basé sur le Material Design de Google. Cela permet de donner des classes prédéfinies à nos éléments leur donnant des styles particuliers du Material Design. Utiliser ce framework nous permet aussi de nous concentrer sur les fonctionnalités de l’application.

OpenWeatherMap API : c’est ce qui va nous donner les informations météorologiques de chaque ville. C’est ce qu’on appelle une API (Application Programming Interface), en d’autres termes c’est un service proposé aux développeurs par les entreprises possédant un logiciel ou service. Par exemple, Google Maps possède une API qui peut être utilisée pour afficher une carte Google sur ton site ou application. OpenWeatherMap a fait la même chose et nous propose une manière d’accéder à leurs données météorologiques via une même URL à laquelle nous passerons plusieurs paramètres tel que le nom de la ville

Chrome DevTools : ceci est l’inspecteur d’élément de Google Chrome, je t’invite donc à travailler sur Google Chrome car nous aurons besoin de certains outils présents seulement dans Chrome.

Le développement

Ouvre tout le dossier de ton application que nous avons créé lors de la première partie dans ton éditeur de texte favori et ouvre le fichier index.html ainsi que index.css. Nous allons faire en sorte d’avoir une application vide, c’est-à-dire de supprimer tout l’HTML et le CSS généré par Cordova. Tu peux alors supprimer tout le contenu d’index.css, mais garde le fichier nous nous en servirons plus tard. Je t’invite à souvent regarder ce que font tes changements dans le navigateur .
Pour le fichier index.html, supprime tout ce qui est contenu dans le body excepté l’appel aux scripts via la balise script . Si tu recharges ta page dans ton navigateur tu devrais voir une page blanche, ne t’inquiètes pas c’est ce qu’il nous faut pour démarrer sur de bonnes bases. Pour accéder aux informations météo il faut aussi que tu remplaces cette ligne :

1

 <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 *">

par celle-ci :

1

<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 *">

Cela permet à notre application d’accéder à des services externes

Ensuite, nous allons lier tous nos outils. Télécharges jQuery 2.1.4, ensuite enregistre le dans le dossier www/js/ de ton application. Il te faut aussi télécharger Materializecss, cela te donne un fichier .zip, extrait le puis enregistre le fichier materialize.min.js dans le dossier www/js/ et le fichier materialize.min.css dans le dossier www/css/.
Tu as tout ce qu’il te faut dans tes dossiers, maintenant il faut lier ces fichiers à ton index.html, ouvre donc ce fichier et appelle

1

 <link rel="stylesheet" href="css/materialize.min.css">

et jquery.min.js et materialize.min.js comme cela :

1

2

 <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>

 <script type="text/javascript" src="js/materialize.min.js"></script>

Il est important que tu appelles jQuery avant Materialize car Materialize a besoin de jQuery pour fonctionner.

Tu as dû remarquer que chacun des fichiers possède dans son nom le mot min, cela veut dire que le fichier est minifié, en d’autres termes les développeurs de l’outil on supprimé tous les espaces et sauts de ligne pour que le fichier soit le moins lourd possible. Par exemple, materialize.js est deux fois plus lourd que materialize.min.js. Je t’invite à toujours utiliser les fichiers minifiés, sauf si tu veux les modifier.

On est prêt à commencer ! Pour rappel voici ce que nous allons faire :

Premièrement, nous allons construire l’interface en HTML/CSS, puis nous verrons ensemble comment fonctionne OpenWeatherMap et ce que leur API nous propose. Pour finir, nous nous occuperons de toute la partie jQuery pour appeler l’API d’OpenWeatherMap et traiter leurs données.

Construction de l’interface

Comme tu peux le voir, il y a trois parties qui sont les suivantes :

l’en-tête avec le logo de l’application.
le formulaire de recherche avec un bouton pour valider sa ville.
une carte contenant la météo.

Tu te souviens je t’ai parlé de Materializecss, nous allons l’utiliser de suite. Leur site documente très bien le framework.
L’en-tête est une navbar, la nôtre sera basique par rapport à ce que Materialize nous propose mais ça nous suffira. Voici comment est faite l’en-tête :

1

2

3

4

5

<nav>

  <div class="nav-wrapper teal">

    <img src="img/logo.png" alt="Logo" class="brand-logo" width="50" height="50">

  </div>

</nav>

Materialize s’appuie sur les classes pour savoir quoi faire, quand il voit la classe nav-wrapper il comprend qu’il doit faire une div collée en haut de l’écran avec une certaine hauteur. Ensuite la seconde classe teal, concerne la couleur que j’ai choisi. Tu peux choisir ta couleur sur leur palette ici. Essaie de remplacer teal par red

Je te propose de remplacer le logo de base qui se trouve dans le dossier img/ par un logo plus petit et qui rappelle la météo. On passe donc de celui-ci à celui-là :

Enregistre donc le logo que je te propose ou mets celui qui te convient ayant pour taille 128px*128px.

Voici ce qu’on obtient pour le moment :

Pour nous faciliter le développement mobile nous allons utiliser une fonction du Chrome DevTools, que tu peux faire apparaître en effectuant un clic droit sur ta page et en cliquant sur “Inspecter l’élément”, tu as maintenant une fenêtre qui apparaît sur ton écran. Sur celle-ci se trouvent plusieurs onglets tels que “Elements”, “Network”, “Sources”, etc. À gauche de ces éléments, tu as un logo de téléphone comme ceci :

Clique sur ce logo de téléphone, et tout d’un coup toute l’interface change, pas d’inquiétude cela est tout à fait normal. Cet outil te permet de voir à quoi ressemblera ta page sur tel ou tel appareil. En haut à gauche tu peux voir le mot “Device”, appareil en anglais, cela te permet de choisir sur quel appareil tu veux tester ta page. Il est parfois nécessaire de recharger la page pour avoir la bonne résolution. J’ai pour habitude de choisir l’iPhone 5 car je trouve ses proportions intéressantes.

De plus, il faut que tu déplaces la fenêtre développeur sur le côté pour voir totalement le téléphone. Clique sur les trois points présents à droite, près de la croix :

tu verras un menu comme cela s’afficher, clique sur l’icône (celle en bleu sur la capture d’écran) la plus à droite. Cela va décaler la fenêtre développeur sur le côté.

Tu es maintenant dans les mêmes conditions que si tu étais sur un téléphone

Voici où nous en sommes pour le moment :

Il nous faut maintenant notre formulaire avec un input et un bouton. Tu peux en découvrir plus sur les formulaires de materialize ici.

1

2

3

4

5

6

7

8

9

 <div class="card-panel center-align">

   <form>

     <div class="input-field">

       <input id="city" type="text">

       <label for="city">Your city</label>

     </div>

     <a class="waves-effect waves-light btn" id="getWeather">Get Weather</a>

   </form>

 </div>

Notre div qui contient tout le formulaire est vue comme une carte (card-panel) aux yeux de materialize, et nous alignons tout son contenu avec center-align. Ensuite nous avons le formulaire qui est composé de deux éléments, la div qui contient l’input et son label, puis d’un lien qui ne possède pas de href car ce n’est pas un vrai lien, ses classes waves-effect waves-light permettent de créer l’effet d’ondulation quand on clique dessus. Tu peux très bien ajouter une couleur à ton bouton comme pour l’en-tête

Ensuite vient une autre carte que nous allons remplir dynamiquement, elle sera donc vide pour le moment. Une div comme ceci suffira :

1

2

<div class="card-panel teal center-align" id="card">

</div>

Voilà nous avons le corps de notre application, malgré cela, certains styles de Materialize me plaisent peu, c’est pourquoi nous allons créer une nouvelle feuille de style, nommée comme tu le souhaite, n’oublies pas de la lier à ton ficher index.html après le lien pour materialize.css.

Voici les modifications que j’ai trouvé intéressantes à faire (tu peux très bien en rajouter ou en supprimer) :

Mettre une couleur de fond plus sombre
Centrer verticalement le logo dans l’en-tête
Agrandir le bouton
Ajouter des marges au formulaire et à la div qui contiendra la météo

De ces idées ressortent des styles assez simples qui sont les suivants :

CSS

1

2

3

4

5

6

7

8

body {

  background-color: #e0e0e0; }

nav img {

  margin-top: 3px; }

a.btn {

  width: 100%; }

.margin {

  margin: 25px 15px !important; }

Le !important permet à notre style de prendre le dessus sur ceux de Materializecss.

N’oublie pas d’ajouter la classe margin aux deux div ayant la classe card-panel.

Voici à quoi ressemble notre interface maintenant :

OpenWeatherMap API

Nous allons nous servir des données de météo actuelles, cette page explique à partir de quelles informations tu peux avoir la météo actuelle. Voici l’URL que nous allons appeler en jQuery pour obtenir les informations météo : http://api.openweathermap.org/data/2.5/weather?q=London&appid=2de143494c0b295cca9337e1e96b00e0

Cette URL sera toujours la même, une seule chose changera à chaque appel, le paramètre de la ville. En effet dans l’URL ci-dessus il y a deux paramètres (des paramètres peuvent être passés à une URL en ajoutant à la fin de celle-ci un point d’interrogation, avec un nom et une valeur), qpour “query”, requête en anglais, à qui nous passons la ville que nous cherchons. Le second paramètre nommé appid t’es propre et te permets d’accéder aux services d’OpenWeatherMap, si tu enlèves ce paramètre à l’URL (http://api.openweathermap.org/data/2.5/weather?q=London) tu obtiens une erreur. Pour faire l’application chez toi, tu peux garder l’appid donné par défaut (2de143494c0b295cca9337e1e96b00e0) par OpenWeatherMap, mais si tu veux partager ton application je te propose de te créer un compte pour avoir ton propre appid.

Tu peux t’amuser à entrer la ville où tu habites en supprimant “London” comme premier paramètre et mettre ta ville, tu auras des résultats différents. En parlant de résultats, le texte que tu vois est ce avec quoi nous allons travailler, ce texte est organisé d’une façon particulière, on parle de format JSON. C’est un format de données qui se manipule assez facilement, car il est organisé par objets, “coord” est un objet par exemple. Comme tu peux le voir il y a de nombreuses informations qui nous sont données, nous n’allons pas toutes les utiliser, juste quelques-unes pour que tu comprennes comment y accéder

Voici ce que nous allons extraire :

le nom de la ville
la description du temps
la température
un code icône

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

{  

   "coord":{  

      "lon":-0.13,

      "lat":51.51

   },

   "weather":[  

      {  

         "id":800,

         "main":"Clear",

         "description":"Sky is Clear",

         "icon":"01d"

      }

   ],

   "base":"cmc stations",

   "main":{  

      "temp":281.43,

      "pressure":1030.7,

      "humidity":90,

      "temp_min":281.43,

      "temp_max":281.43,

      "sea_level":1041.03,

      "grnd_level":1030.7

   },

   "id":2643743,

   "name":"London",

   "cod":200

}

Voici ce que j’obtiens pour la ville de Londres, sont soulignées en gris les informations dont nous allons nous servir.

Pour que le JSON qu’OpenWeatherMap nous donne soit bien plus lisible comme celui ci-dessus je te propose cet outil : https://jsonformatter.curiousconcept.com/.
Copie-colle ton code JSON dedans, et tu auras ton JSON formaté avec une belle indentation, tu t’y retrouveras mieux ainsi

Il y a deux informations que nous allons traiter que tu peux ne pas comprendre, c’est la valeur de la température ainsi que le code icône.
La température que nous recevons dans le JSON que j’ai sur-ligné, atteint une valeur de 281.43, rassure-toi il n’y a pas eu de pics de température à Londres, l’unité n’est pas la même que la nôtre. En effet la valeur retournée par l’API est en Kelvin, il va donc falloir convertir des Kelvin aux degrés Celsius. Pour cela il te suffira de soustraire de 273.15 la valeur retournée !
Deuxièmement, le code icône que nous recevons est le nom d’une image, tu peux voir sur le tableau suivant quel code correspond à quelle image, dans notre cas nous aurions un soleil car 01d correspond au soleil. Nous allons utiliser ce code pour mettre une image différente en fonction du code retourné par l’API. Plus fort encore tu n’es pas obligé d’utiliser leurs icônes, tu peux très bien avoir tes propres icônes, il te suffit de donner le lier le bon code avec la bonne image, en t’appuyant sur le tableau d’OpenWeatherMap. Par exemple, si j’ai une image de soleil, alors je vais lui donner comme nom 01d.png, si j’ai de la pluie 09d.png.

Comme nous utilisons Materializecss qui rend notre interface en accord avec le Material Design, j’ai choisi de changer les icônes pour mettre des icônes Material. Pour cela il te suffit de télécharger (continue de lire avant de le faire) ce pack avec de nombreux icônes. Chaque icône possède son propre nom, il va falloir les renommer comme dit plus haut. Par exemple le fichier téléchargé nommé sun-01.png correspond au soleil complet, en se référant à la table d’OpenWeatherMap on remarque que le soleil plein correspond au nom 01d.png ainsi nous allons renommer notre fichier ainsi. Pour te simplifier la vie je l’ai fait pour toi, car cela est vite ennuyant, télécharge le dossier ci-dessous et copie-colle les images dans ton dossier img : https://drive.google.com/file/d/0BzQJFH03s_ejWGhMZ0hZb0hoTjA/view?usp=sharing

Autre point qu’il est important de voir, nous allons faire en sorte de garder en mémoire la dernière recherche de l’utilisateur, ainsi quand il reviendra sur l’application il ne sera pas obligé de taper à nouveau sa ville dans le formulaire. Pour cela nous allons utiliser le localStorage, il suffit de déclarer une variable avec une clé (un nom) et une valeur. On peut la lire, la supprimer ou la modifier comme bon nous semble avec différentes méthodes.

Si tu n’es pas du tout familier avec le localStorage, je t’invite à lire ce court article qui te permettra de comprendre ce que c’est et comment cela s’utilise :
http://www.lafermeduweb.net/billet/le-stockage-local-en-html5-localstorage-942.html

Quelque chose de très important n’est pas dit dans l’article mais tu peux voir tes variables localStorage dans la Chrome DevTools (tu te souviens on s’en est servi pour avoir une interface mobile). Tu as dans la barre d’onglets un onglet nommé « Resources », clique dessus, sur le côté il y a un logo bleu nommé « Local Storage », ce qu’il nous faut ! Clique dessus puis sélectionne le sous-menu nommé file://. Ainsi tu peux voir tes variables localStorage

Le JavaScript

Aller je te donne le code jQuery et je t’explique tout ça, les lignes des codes sont commentées, ainsi tu comprends ce que fais telle ou telle ligne, et je vais t’expliquer la logique de l’application.

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

$(document).ready(function() {

  var city = localStorage.getItem("city"); //on récupere la variable localStorage ayant pour clé city, puis on la met dans une variable

  var cardSelector = $("#card"); //on mets notre sélecteur dans une variable

  function getWeather() { // on crée une fonction qui récupere la météo avec les instructions suivantes

    if (city == null) { // on teste si la variable city est nulle

      cardSelector.append("<p>Vous n'avez pas encore renseign&eacute; de ville.</p>"); // on affiche un message dans la card

    } else { // sinon ...

      $("#card *:not(div)").remove();

      var myAPPID = "7e181b27cf94564bb5e54c5402ff9bb7"; //ici on déclare notre APPID pour OpenWeatherMap

      $.getJSON("http://api.openweathermap.org/data/2.5/weather?APPID=" + myAPPID + "&q=" + city, function(result) { // on mets le résultat dans une variable result qui vaut le code JSON qu'on voit dans le navigateur

        var cityName = result.name; // le nom de la ville est directement accesible donc pas de souci

        var weatherType = result.weather[0].main; // la description du temps est dans le tableau weather (un tableau est défini par des []), on vise le premier (0 = le premier en programmation), puis on prend la valeur de main

        var iconCode = result.weather[0].icon; // Meme chose qu'au dessus sauf qu'on prend la valeur de icon

        var temp = result.main.temp; // cette fois ci on va dans main qui n'est pas un tableau donc pas de '[]', on va de main a temp sans souci

        var tempInCelsius = (temp - 273.15).toFixed(1); // notre temperature est en Kelvin donc on effectue notre soustration pour l'avoir en Celsius, puis le toFixed permet d'arrondir une valeur, le 1 correspond à un chiffre apres la virgule

        // ici on rempli la card avec nos valeurs, premierement la liste d'information, puis ensuite on affiche l'image avec le code icone

        cardSelector.append("<ul><li>City : " + cityName + "</li><li>Weather type : " + weatherType + "</li><li> Temperature : " + tempInCelsius + " &deg;C</li></ul>");

        cardSelector.append("<img src='img/" + iconCode + ".png' alt='Weather Icon' width='80px' height='80px'>");

        // voila notre utilisateur voit les informations météo de sa ville

      });

    }

  }

  function submitForm() { // on crée une fonction qui récupere la valeur du formulaire

    var mycity = $('input').val(); // on récupere la valeur de notre input avec .val() et on la mets dans une variable

    if (mycity.length >= 3) { // si la variable donc la ville de l'utilisateur est plus grande ou egale que 3 caracteres alors ...

      localStorage.setItem("city", mycity); // on crée une variable localStorage, avec pour clé city et comme valeur la ville de l'utilisateur

      city = mycity; // on donne la ville à la variable city qui est utilisée dans la fonction getWeather

      getWeather(); // on appelle la fonction getWeather pour récuperer la météo de cette ville, ville qui est stockée dans la variable city

    } else { // si le champs fait 2 caracteres ou moins on ...

      alert('empty field'); // affiche une erreur

    }

  }

  $('#getWeather').on('touchstart', function() { // quand on commence à toucher le bouton avec l'id getWeather, alors ...

    submitForm(); // ... on appelle la fonction submitForm qui va traiter ce qu'il y a dans le champ de la ville

  });

  $('form').submit(function(event) { // quand on soumet le formulaire, c'est à dire qu'on appuie sur la touche Entrée, alors ...

    event.preventDefault(); // ici on annule le comportement par défault qui est de recharger la page quand on soumet un formulaire

    submitForm(); // ... on appelle la fonction submitForm qui va traiter ce qu'il y a dans le champ de la ville

  });

  getWeather(); // ici on appelle à l'allumage de l'application la fonction getWeather

});

Pour l’intégrer crée un nouveau fichier, par exemple app.js et n’oublie pas de l’appeler à la suite des autres scripts dans ton fichier index.html
Comme tu peux le voir nous avons deux fonctions nommées getWeather et submitForm, ces fonctions ont besoin d’être appelées pour exécuter le code qui est à l’intérieur de chacune. Tout ce qui est en dehors d’une fonction est appelé qu’une seule fois. La subtilité qu’il y a est que la variable city peut valoir une variable ‘normale’ ou une variable du localStorage. La variable city vaut la valeur du localStorage qu’une seule fois, lors du premier appel à la fonction getWeather car quand l’utilisateur ouvre son application la variable city est définie avec ce qu’on récupère du localStorage. Lorsqu’on entre une nouvelle ville dans le formulaire et qu’on valide, alors on appelle la fonction submitForm qui donne à la variable city la valeur de l’input, puis on appelle getWeather qui va utiliser la variable city qu’on viens de définir.

Maintenant, essaye l’application, en rentrant ta ville dans le formulaire, valide et tu vois quel temps il fait chez toi !

Suite à ta première recherche, rends-toi dans tes variables localStorage de la Chrome DevTools et tu peux y voir ta ville . Si ce n’est pas le cas, appuie sur l’icône de rechargement en bas à gauche.

Voilà tu viens de créer ta première application avec Cordova, mais ce qui est encore mieux c’est de l’avoir sur son téléphone, on se retrouve dans la troisième partie de ce tutoriel pour exporter notre application sur mobile

5 (100%) 5 votes

Rechercher dans ce blog

Khalilo D & D