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 :

par celle-ci :

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

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

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 :

cleanweatherScreen

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 :

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à :

logobase logofinal

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 :

navbarfull

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 :

devtoolsNav

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 :

devtoolsNavMobile

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

devtoolsMenu

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 :

navbarMobile

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

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 :

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 :

 

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 :

appEmpty

 

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), q pour “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

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.

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

Créer une application mobile de A à Z – Partie 2 : Développement
5 (100%) 3 votes

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

15 réflexions sur “ Créer une application mobile de A à Z – Partie 2 : Développement ”

  1. Salut ! J’attendais avec impatience cette deuxième partie et ce n’était pas pour rien.
    En fait, c’est surtout pour plusieurs points que je n’avais encore jamais eu l’occasion de travailler :
    _L’étape sur la modification du meta
    _Je vais aussi passer un peu plus de temps pour voir ce que peut offrir MaterializeCSS, surtout les fichiers sources en Sass
    _Le localStorage

    Pour ce qui est de l’API, ce n’est pas nouveau car je l’avais déjà travaillé, ça me sert de révision x) D’ailleurs, au lieu de faire le calcul pour transformer en Celsius, on peut aussi ajouter « &units=metric » à l’URL pour obtenir directement les bonnes valeurs.

    Donc ce cours en trois partie à l’air super mais je donnerai mon vrai jugement lors de la lecture de l’étape la plus importante qu’est l’export de l’application !

    Bonne fêtes à l’équipe !

  2. Bonjour,

    Cet article tombe vraiment bien pour notre projet tuteuré ! Nous n’y connaissons absolument rien dans le développement d’applications mobiles (puisque le programme MMI ne l’aborde pas) mais ça pourrait nous être très utile pour l’association pour laquelle nous travaillons. J’attend de voir ce que donne la dernière partie de ce tuto, vous allez expliquez comment se passe la mise en ligne d’une application sur les différents stores que ce soit chez Apple ou Google ? Car cela nécessite un compte développeur je suppose ? Je vois des sites qui parlent d’un tarif de 80€/an chez Apple… On se demande si un site mobile bien optimisé suffirait pas dans ce cas !.. J’attend la suite avec impatience en tout cas

    1. Salut Pierre,

      Tant mieux si cette série d’articles t’aident
      Nous allons pas expliquer précisément comment mettre une application sur les différents store car cela dépend du store. Ce sera surtout une introduction !

      En effet il faut un compte développeur payant, 99$ pour l’App Store et 25$ pour le Google Play. Plus d’explications dans la partie 3

      1. Salut j’ai une question si je veux ajouter la géolocalisation comment je peux faire pour que j’obtiens la localisation et la météo d’un pays saisi ??merci

      2. Bonsoir svp j’ai besoin de votre aide je veux ajouter à cette petite application un map qui affiche l’endroit du pays saisie comment je peux faire c’est urgent merci

  3. Salut j’ai une question si je veux ajouter la géolocalisation comment je peux faire pour que j’obtiens la localisation et la météo d’un pays saisi ??merci

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