samedi 13 mai 2017

JavaScript : comment trier une liste ?

Trier le contenu de listes est un exercice courant lorsqu’on développe des applications ou un site web. Aussi, si vous travaillez avec JavaScript, vous serez amené à utiliser la méthode sort() qui permet de trier les éléments d’un tableau. Ceci étant dit, trier des nombres fonctionne très bien avec cette méthode. Mais trier des chaînes de caractères peut vous apporter quelques surprises.

Je vous propose dans ce billet de vous présenter les deux possibilités : trier des nombres (facile) puis trier des chaînes de caractère.

On plante le décor

Avant de pouvoir s’amuser follement à trier en JavaScript, on besoin d’un peu de matière à manipuler. Imaginons un jeux de rôle avec de fiers guerriers caractérisés par un nom, un age et une arme :
var warriors = [
   { name: "Kraken", age: 21, weapon: "arc" },
   { name: "Améria", age: 27, weapon: "fusil" },
   { name: "Narfy", age: 25, weapon: "couteau" },
   { name: "Golïm", age: 17, weapon: "poignard" },
   { name: "Fôrfiot", age: 18, weapon: "lance-flamme" },
   { name: "Joliett", age: 22, weapon: "bazooka" }
];
Nous allons utiliser un affichage du résultat directement sur la console : je vous entends déjà vous esclaffer : “il ne se foule pas trop le gars ;-)”.
Et bien oui, et j’en suis fière.

De toute façon, une fois la méthode comprise, vous pouvez adapter ce script pour répondre à vos souhaits les plus fous…

Bref, revenons à nos lignes de codes : je vous propose d’utiliser une fonction qui aura pour mission d’afficher le résultat du trie.
L’utilisation d’une fonction permet d’éviter de recopier la même portion de code à de nombreux endroits (Cool !) :
function display(i) {
   console.log(i);
   for (i = 0; i < warriors.length; i++) {
   console.log(warriors[i].name + " a " + warriors[i].age + " ans et est équipé d'un " + warriors[i].weapon);
   }
}
Dans le corps de votre page HTML, on va ajouter deux boutons qui permettrons de lancer le trie par age et le trie par nom. A chaque bouton on associe une action qui lance la fonction ad hoc.
Jusque là tout va bien…
<h2>Trier en javaScript</h2>
   <button type="button" onclick="sortName()">Par Prénom</button>
   <button type="button" onclick="sortAge()">Par Age</button>
Voyons de plus près ces jolies fonctions :

Trier des nombres

Comme annoncé en début de billet, la méthode sort() fait très bien le boulot et trier l’age de nos valeureux guerriers est un jeux d’enfants :
function sortAge() {
   warriors.sort(function (a, b) {
   return a.age - b.age;
   });
   display(intro);
}
Tada ! Voilà ce que nous retourne la console lorsqu’on lance le trie par age :


Trier des chaînes de caractères (String)

Trier des chaînes de caractères (String) pose des soucis car le tri s’effectue par défaut selon les points de code Unicode de la chaine de caractères.
Oui mais encore…

Typiquement, cela veut dire que chaque caractère est converti en son code Unicode qui sert à faire le trie.
On peut se retrouver devant un résultat retourner par la machine qui peut laisser perplexe l’être humain que nous sommes : “Cian” sera trié avant “bleu”. Dans un tri numérique, 9 sera trié avant 80, mais comme ces nombres sont convertis en chaînes de caractères, “80” arrive avant “9” selon l’ordre Unicode.

Notre fonction qui trie par nom les courageux guerriers se traduit comme suit :
function sortName() {
   warriors.sort(function (a, b) {
      var nameA = a.name.toUpperCase();
      var nameB = b.name.toUpperCase();
   if (nameA < nameB) {
      return -1;
   }
   if (nameA > nameB) {
      return 1;
   }
   // noms identiques
   return 0;
   });
   display(intro);
}
Pour donner un coup de main à la fonction de trie, on passe par une transformation des lettres en majuscules (tous les mots sont logés à la même enseigne…).

reTada ! Quel beau trie par nom, n’est-ce pas ?


Et voilà le tour est joué !
Alors sautez sur votre éditeur de code préféré pour mettre en application le trie de données en JavaScript.

Cette proposition de solution pour trier des données en JavaScript n’est évidemment pas la seule et unique possibilité. Vous pouvez très bien développer d’autres méthodes ou fonctions pour arriver au même résultat. Comme j’adore échanger, vous pouvez laisser un commentaire ou partager votre avis ou méthode.




dimanche 3 juillet 2016

Android : Créer un projet Google Maps


Pour créer un projet Google Maps avec Android Studio, créez un nouveau projet Phone and Tablet et sélectionnez Google Maps Activity dans la boîte de dialogue « Add an activity to Mobile ».

Ouvrez le projet puis le fichier google_maps_api.xml qui contient les instructions sur l'obtention d'une clé d'API Google Maps afin de pouvoir exécuter l'application. Sans cette clé API, la carte ne s'affichera pas.

Allez à la Google Developers Console dans votre navigateur pour obtenir la clé API.

Une fois la clé API obtenue, copiez-la dans le fichier google_maps_api.xml à l'endroit indiqué.

Le fichier MapsActivity.java contient un code similaire à celui-ci (j'ai apporté quelques modifications) :

package com.humandigitalis.googlemaps;

import android.support.v4.app.FragmentActivity;
import android.os.Bundle;

import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MarkerOptions;

public class MapsActivity extends FragmentActivity implements OnMapReadyCallback {

    private GoogleMap mMap;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_maps);
                SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
                .findFragmentById(R.id.map);
        mapFragment.getMapAsync(this);
    }

    @Override
    public void onMapReady(GoogleMap googleMap) {
        mMap = googleMap;

        LatLng tours = new LatLng(47.383333, 0.683333);
        mMap.addMarker(new MarkerOptions().position(tours).title("Tours"));
        mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(tours,12));
    }
}


On définie la position Latitude et Longitude du point à positionner :

LatLng tours = new LatLng(47.383333, 0.683333);
On affiche un label au dessus du point de positionnement :

mMap.addMarker(new MarkerOptions().position(tours).title("Tours"));
On met à disposition la possibilité de zoomer sur la Maps (newLatLngZoom) et de définir un zoom à l'ouverture de la Maps (12) :

mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(tours,12));

Lancer l'application sur votre mobile et voilà ce que vous obtenez :


Vous pouvez zoomer et dézoomer avec vos doigts sans soucis puisque l'option a été ajoutée.

Ceci n'est qu'un avant goût et vous pouvez aller plus loin en ajoutant à une application existante les fonctionnalités de Google Maps.



jeudi 2 juillet 2015

Android : Horaires de marée France - FRTides


Quelque soit la saison, il est bien pratique de connaître l'horaire des marée lorsqu'on est au bord de la mer. Aussi, c'est pour que vous soyez toujours informé que l'application Horaires de marée trouve sa place sur votre téléphone smartphone ou tablette Androïd.

L'application présente les Horaires de marée et les graphiques des hauteurs d'eau sur sept jours pour plus de 200 ports français.
Il vous propose une estimation du coefficient de marée pour les ports de la côte Atlantique et de la Manche.
Grâce à la géolocalisation Horaires de marée vous propose les ports les plus proches de vous.
Et cerise sur le gâteau, Horaire de marée affiche les heures de lever et de coucher du soleil et de la lune.

Horaires de marée propose quatre widgets que vous pouvez afficher sur l'écran d'accueil de votre smartphone ou tablette Androïd :
  • 1x1: l'heure et la hauteur de la prochaine marée. 
  • 2x1: l'heure et la hauteur de la dernière et la prochaine marée. 
  • 3x1: l'heure et la hauteur de la dernière et les deux prochaines marées. 
  • 4x1: l'heure et la hauteur de la dernière et les trois prochaines marées. 
La couleur de fond indique le type de marée: bleu foncé pour la marée haute et bleu clair pour la marée basse.

L'application Horaires de marée est disponible sur Google play gratuitement :
Disponible sur Google Play