Développer avec Ionic 2 – Partie 1

Il y a encore quelques années, développer une application mobile relevait du parcours du combattant. Il fallait coder un code spécifique à la plateforme que l’on ciblait : Java pour Android et Blackberry, Objective-C pour iOS pour ne citer que ces trois là.

Puis, sont arrivés des plateformes de développement multiplateformes comme Titanium ou encore Cordova, qui à leur manière ont grandement modifier notre approche du développement mobile. Mais malgré leur nombreux atouts, ces Frameworks m’ont dans mes débuts laissé un peu sur ma faim.

Ionic est apparu à une période ou je souhaitais développer rapidement, et surtout proprement, une application mobile. Vous verrez que ses nombreuses fonctionnalités vont très vite vous convaincre d’y consacrer une bonne partie de votre temps. C’est que lorsqu’on y à goûter, on ne peut (ou presque) plus s’en passer.

Introduction

Ionic, c’est un ensemble de technologies (un SDK, pour Software Developpement Kit : kit de développement logiciel) qui ensemble permettent de créer une application mobile déployable sur de nombreuses plateformes (Android, iOs,…) :

  • Cordova : un Framework qui permet d’accéder à des fonctions natives présentes dans les smartphone (Appareil photo, Micro, Géolocalisation, Contacts,…)
  • AngularJS : un framework Javascript développé et maintenu par Google.
  • TypeScript : un langage de script proche de Javascript
  • HTML 5 : la dernière version du fameux langage à balises
  •  NodeJS : Un framework Javascript utilisé pour sa faculté à la fois du client et du serveur
  • Et d’autres technologies comme gulp, npm,…

4 caractéristiques qui font de Ionic un super outil de travail

Gratuit et Open Source

Pas besoin d’acheter une quelconque licence pour développer avec Ionic. Son code est disponible sur Github et tout le monde peut y avoir accès, apporter des modifications et contribuer à son évolution. Vous n’en n’aurez peut être pas l’occasion, mais si ça vous tente n’hésitez surtout pas.

Ionic sur Github

Multiplateforme

Comme nous l’avons déjà dit, Ionic permet la création en une seule fois d’une application déployable sur différents OS mobiles. Et ceci ne concerne pas uniquement les fonctions matériels, mais aussi le design et l’ergonomie. Une alerte par exemple s’affichera selon le style de l’OS qui exécutera l’application. Et honnêtement, les styles sont extrêmement fidèles.

Fonctions natives

C’est sûrement l’une des choses que je préfère chez Ionic, cette possibilité d’intégrer à votre application des fonctions natives (Appareil photo, Caméra, Authentification Google/Facebook…) avec une facilité déconcertante. Tout y est, de la Géolocalisation, aux fonctions réseaux, en passant par les bases de données. Bref, la totale quoi.

Fonctions natives

Une documentation extrêmement riche

Honnêtement, une fois que vous aurez pris connaissance de la documentation, vous n’aurez presque plus besoin de moi. Mais, bon restez quand même, je me sentirais moins seule comme ça.

J’ai rarement vu une documentation aussi bien faite : des illustrations, des textes claires (même écrits en anglais),… Bref, tout pour devenir en quelques jours un pro du Framework

Documentation de Ionic

Cette introduction faite, je vous propose dans le chapitre suivant, d’entrer un peu plus dans le vif du sujet.

En attendant, n’hésitez pas à écrire un commentaire et à partager cet article.

Mon Top 11 des meilleurs applications gratuites pour la Nexus 7

Heureux détenteur d’un Nexus 7, voici pour toi et en exclusivité mondiale (j’exagère un peu :-), mon Top 10 + 1 des meilleurs applis Android :

Android Apps

  • Teamviewer

Teamviewer LogoTeamviewer, disponible également en version PC et Mac, permet la prise de contrôle d’ordinateurs à distance.Bien pratique si l’on souhaite dépanner un ami .

 

 Télécharger sur Google Play

 

ConnectBot

connectbot

 

Client ssh, ftp, sftp … vraiment pratique

 

Télécharger sur Google Play

 

  • Dropbox

dropbox logo

 

Plus besoin de présenter Dropbox, qui est certainement l’application de stockage dans le cloud la plus sûre et la plus utilisée du moment

 

 Télécharger sur Google Play

 

  • Google Drive

Google drive logoLe Microsoft Office killer en ligne de Google continue sa course en proposant un outil de bureautique ergonomique avec possibiltié de stockage hors ligne du fichier. Histoire de le comparer à la suite office, Google drive gère les feuilles de calcul (Excel), les documents texte (Word), les présentations (Powerpoint) et beaucoup d’autres outils à découvrir sur place.

Télécharger sur Google Play

  

Avast Antivirus

Logo Avast

 

Plus besoin de présenter le célèbre antivirus disponible aussi sous Android. Cette version mobile scannera chaque application que vous installerez pour y déceler d’éventuelles failles. Elle vous permettra aussi de connaitre (ce qui est en fait déjà possible en natif) les différents droits que vous attribuez (souvent sans vous en rendre compte) aux applications  que vous installez (geolocalisation, accès aux contacts, messagerie, …)…Bref vous serez tenter de désinstaller certaines applications tellement elles sont intrusives.

Télécharger sur Google Play

 

Google Play Music

Google Music Logo

 

L’application permet la lecture et la sauvegarde hors connexion de musique stockées sur Google Music. Il faut donc au préalable activer son compte Google Music, puis uploader sa bibliothèque musical (Jusqu’à 20 000 titres, autant dire illimité:-). Pour l’avoir essayé bien avant sa disponibilité en France, je dois dire que je suis très très satisfait.

 

Télécharger sur Google Play

 

Google Flux d’actualité

Google Actu logo

 

L’information en temps réel et de sources variées. Un module de suggestion intégré permet de s’abonner aux flux les plus visités dans le monde et ceux correspondant à nos habitudes de lecture. La plupart des grands éditeurs, sinon tous, sont disponibles. Il n’est, par ailleurs, pas nécessaire de créer un compte.

 

Télécharger sur Google Play

 

Camera Launcher

camlauncher

 

La Nexus 7 ne disposant pas encore nativement d’une application gérant la caméra frontale, cette application permet de prendre des photos ou encore de filmer. Seul hic, l’application bug en mode photosphere. Mais bon, rien de bien méchant.

 

 

Télécharger sur Google Play

 

Snapseed

Snapseed logo

 

L’instagram Killer made in Google planet. L’application permet de modifier des images en y ajoutant de super effets qui vous ferons vite oublier (ou presque) Instagram. Il est possible après modification, de publier les photos sur Google+. Il n’est par ailleurs pas nécessaire d’avoir un compte comme sur Instagram.

 

 

Télécharger sur Google Play

 

TED 

TED logo

L’application officielle TED pour Android présente des conférences de grandes personnalités du monde: scientifiques, gourous des nouvelles technologies, médecins, hommes d’affaires, artistes, philanthrophes, … Le tout visionnable depuis une interface fluide et ergonomique.

 

 

Télécharger sur Google Play

 

Epic Citadel

epiccitadel logo

 

Déjà disponible sous iOS, Epic Citadel est une application de démonstration du moteur de rendu 3D Unreal. Cette application vous fera visiter de somptueux paysages au style moyenâgeux. S’il n y pas de combats ni de missions, l’application permet de une visite à la fois relaxante et distrayante.

 

 Télécharger sur Google Play

 

Emulateurs et outils de développement mobile

Émulateur Android

Dans le cadre d’un développement mobile, il peut être intéressant d’avoir un rendu de son application sur différentes plateforme. La première solution consiste à acheter tous les smartphones du moment (prévoir un peu de sous quand même :). La deuxième, plus économique consiste à utiliser un émulateur.

 

Il en existe pour l’ensemble des plateformes du moment. Voici une liste des plus populaires, suivie de quelques outils intéressants à mes yeux :

 

Vous pouvez compléter cette liste en commentant cet article…

RIM présente le Blackberry 10 au Blackberry World 2012

Blackberry 10 A l’occasion du BlackBerry World organisé chaque année par la firme Research In Motion, Thorsten Heins, CEO de la société, a présenté le prototype BlackBerry 10 Dev Alpha à destination des développeurs de la plateforme.

Censé relancer la croissance de la plateforme, le BlackBerry 10, nouvelle version de l’OS mobile de la société, se présente en révolutionnaire. En effet, il se distingue très fortement des versions précédentes. Quant au prototype présenté au BBW, la première chose dont est frappée en le regardant est l’absence de clavier physique, une nouveauté du côté de RIM qui nous avait presque habitué à ses claviers physiques qui ont  d’ailleurs fait, à une certaine époque, la popularité de la firme canadienne.

 Le BlackBerry World a demarré avec un discours introductif de son CEO Thorsten Heins, en précisant combien il était ravi de voir autant de monde à cette première keynote, et ce malgré les difficultés dont souffrent la plateforme BlackBerry actuellement. Il s’est attaché à faire aller de l’avant la société, en ne privilégiant plus uniquement les entreprises et les professionnels, mais en s’ouvrant à un marché plus grand d’utilisateurs beaucoup plus modestes.

le PDG n’a tout d’abord pas caché les lacunes dont souffre actuellement son OS mobile, puis s’est ensuite empressé de présenter la solution à tous leurs problèmes : le BlackBerry 10. Voici quelques caractéristiques présentes dans le prototype embarquant l’OS:

  • Système d’exploitation : BlackBerry 10 (Developer Alpha Preview)
  • Stockage : 16 Go
  • Connectivité : HSPA+, BlueTooth, NFC
  • Caméras : 1 frontale sans flash, 1 arrière avec flash
  • Connecteurs : microHDMI, microUSB
  • Clavier virtuel doté d’un excellent outil de suggestion de mots. Le clavier étudiera vos frappes, enregistrera vos types de conversation jusqu’à prédire, lors d’une saisie, les mots qui vous souhaiteriez frapper.
Clavier Blackberry
  • Nouvelle interface utilisateur nommée Cascades, créée par TAT une société rachetée par RIM en décembre 2010.
  • Ecran 4.2″ de résolution 1280 x 768 pixels
  • (Multi-tâches) Navigation entre applications en cours d’exécution par simple Swipe de gauche à droite, sans devoir fermer ou réduire l’application courante.

Un screen du prototype qui est, soit dit en passant, très inspiré du PlayBook :

BlackBerry 10 Devices

On est quand même frappé par la ressemblance de l’interface utilisateur du BlackBerry 10 avec d’autres OS comme Windows Phone ou Android

Là (Windows Phone) :

BlackBerry 10 Widget Screen

 

Et là (Android ou Bada) :

BlackBerry 10 Apps Screen

 

Le smartphone, disponible actuellement pour les développeurs, devrait sortir en version finale à la fin de l’année. Espérons que d’ici là, RIM sera toujours présent dans le marché des mobiles.

Le BlackeBerry 10 en vidéo

Tutoriel sur le système de fichier Android : Enregistrement des données dans la mémoire interne et dans la carte SD

 

 

Nous verrons dans ce tuto qu’il existe 2 façons de sauvegarder des données dans un fichier sur Android. Vous êtes prêt ? Alors c’est parti !

 

 

Tout d’abord, on peut faire une sauvegarde interne dans la mémoire du téléphone ou bien faire une sauvegarde externe dans la carte SD de l’utilisateur.

Il faut savoir que les informations enregistrées dans la carte mémoire externe du terminal mobile sont accessibles par l’ensemble des applications.

Alors que les données sauvegardées en mémoire interne peuvent ou non être partagé en lecture ou/et en écriture avec les autres applications.

 

Voici la liste des différentes permissions pour la création d’un fichier dans la mémoire interne :

 MODE_PRIVATE crée un fichier (ou remplace l’existant), le fichier ne sera disponible que pour notre application.

 MODE_APPEND crée un fichier (concatène si le fichier existe)

 MODE_WORLD_READABLE accès en lecture par les autres applications

 MODE_WORLD_WRITEABLE accès en écriture par les autres applications

 MODE_WORLD_READABLE|MODE_WORLD_WRITEABLE accès en lecture et écriture par tous

Pour l’écriture nous allons utiliser la méthode openfileoutput qui va renvoyer un FileOUtputStream,

Pour la lecture il faut utiliser la méthode openFileInput qui renvoie un FileInputStream.

 

Nous allons mettre en place une application toute simple qui va jouer le rôle d’un bloc note.

L’utilisateur pourra écrire dans un fichier, mais également l’ouvrir et l’éditer.

En termes d’interface nous aurons :

  • juste une zone de saisie.
  • Un bouton pour enregistrer les modifications.
  • Un bouton pour afficher le contenu de notre fichier.
  • Un autre bouton pour vider la zone de saisie.

 

Ce qui se résume à ce code là :

 

<LinearLayout xmlns:android=« http://schemas.android.com/apk/res/android »

    android:layout_width=« fill_parent »

    android:layout_height=« fill_parent »

    android:orientation=« vertical » >

 

   <EditText

        android:id=« @+id/texte »

        android:layout_width=« fill_parent »

        android:layout_height=« wrap_content »

        android:lines=« 5 »

         android:gravity=« top|left » android:inputType=« textMultiLine »

        android:scrollHorizontally=« false » />

   

   <LinearLayout xmlns:android=« http://schemas.android.com/apk/res/android »

    android:layout_width=« fill_parent »

    android:layout_height=« fill_parent »

    android:orientation=« horizontal » >

    <Button android:id=« @+id/btn »

    android:layout_width=« wrap_content »

    android:layout_height=« wrap_content »

    android:text=« Sauvegarder » />

   

    <Button android:id=« @+id/btn2 »

    android:layout_width=« wrap_content »

    android:layout_height=« wrap_content »

    android:text=« Afficher » />

   

        <Button android:id=« @+id/btn3 »

    android:layout_width=« wrap_content »

    android:layout_height=« wrap_content »

    android:text=« Vider » />

 

</LinearLayout>

 

</LinearLayout>

 

 

 

Pour l’enregistrement d’un fichier dans la mémoire interne du téléphone, Les deux méthodes qui vont nous intéresser sont

           

Pour l’écriture :

 

private void ecrireFicher(String nomFichier,String monText) {

             BufferedWriter writer = null;

             try {

                    File dir = getDir(« ToutMesFichiers »,MODE_PRIVATE);

                    File newfile = new File(dir.getAbsolutePath() + File.separator + nomFichier);

                    newfile.createNewFile();

                    writer = new BufferedWriter(new OutputStreamWriter(new FileOutputStream(newfile)));

                    writer.write(monText);

             } catch (Exception e) {

                    e.printStackTrace();

             } finally {

                    if (writer != null) {

                           try {

                                  writer.close();

                           } catch (IOException e) {

                                  e.printStackTrace();

                           }

                    }

             }

       }

 

 

 Pour la lecture :

 

 private String lireFichier(String nomFichier) {

             File dir = getDir(« ToutMesFichiers »,MODE_PRIVATE);

             File newfile = new File(dir.getAbsolutePath() + File.separator + nomFichier);

             String monText= » »;

             BufferedReader input = null;

             try {

               input = new BufferedReader(new InputStreamReader( new FileInputStream(newfile)

                    ));

               String line;

               StringBuffer buffer = new StringBuffer();

               while ((line = input.readLine()) != null) {

                    buffer.append(line);

               }

                monText = buffer.toString();

             } catch (Exception e) {

                    e.printStackTrace();

             } finally {

             if (input != null) {

               try {

                    input.close();

                    } catch (IOException e) {

                           e.printStackTrace();

                    }

               }

             }

           return monText;

           }

 

 

Voici ce que le téléphone va créer dans le répertoire /data/data/ :

 

 Il faut ensuite mettre les écouteurs d’évènements à nos boutons. Voici le contenu de la méthode oncreate.

 

 

 

public void onCreate(Bundle savedInstanceState) {

             super.onCreate(savedInstanceState);

             setContentView(R.layout.main);

             final EditText text = (EditText) findViewById(R.id.texte);

 

             Button valider = (Button) findViewById(R.id.btn);

 

             valider.setOnClickListener(new OnClickListener() {                

                    public void onClick(View v) {                        

                           ecrireFicher(« monFichier.txt », text.getText().toString());

                    }

             });

 

             Button afficher = (Button) findViewById(R.id.btn2);

             afficher.setOnClickListener(new OnClickListener() {               

                    public void onClick(View v) {                        

                           text.setText(lireFichier(« monFichier.txt »));

                    }

             });

            

             Button vider = (Button) findViewById(R.id.btn3);

             vider.setOnClickListener(new OnClickListener() {                  

                    public void onClick(View v) {                        

                           text.setText(«  »);

                    }

             });

         }

 

 

Voici le résultat d’un scénario d’utilisation :

 

  1. Un utilisateur rentre du texte 
  2. Il sauvegarde le texte dans le fichier
  3. Il vide le contenu de la zone de saisie
  4. Il affiche le contenu de son fichier
  5. Il modifie ce contenu
  6. Il sauvegarde la modification
  7. Il vide le contenu de la zone de saisie
  8. Il affiche le contenu de son fichier

 

 Voici des images issues d’un autre scénario ou l’utilisateur n’enregistre pas ses modifications.

 

 

                                    

 

 

Utilisation de la carte SD

 

Nous pouvons faire la même application, mais les fichiers seront sauvegardés dans la mémoire externe du téléphone.

 

Ajouter la permission dans le manifest :

<uses-permission android:name= »android.permission.WRITE_EXTERNAL_STORAGE » />

 

NB : Pour les personnes utilisant l’émulateur, il faut monter une carte SD.

Rappel de la commande (à exécuter dans tools/) :

 

En répétant les mêmes scénarios d’utilisation que précédemment, nous obtiendrons les mêmes résultats.

 

 

 

Voilà ce qu’il en est de la sauvegarde de fichiers sur Android, j’espère que ce petit tuto vous servira pour vos applications futures  Content

Télécharger le livre « Développer avec jQuery Mobile »

jQuery Mobile LogoDécouvrez en exclusivité un eBook complètement gratuit sur le Framework jQuery Mobile.

Désormais en version 1.0, jQuery Mobile, qui permet de créer des sites mobiles multiplateformes, ne cesse d’évoluer et de séduire de plus en plus de développeurs, déjà très familiers de jQuery, dont s’inspire le framework Mobile. Ce livre électronique vous permettra de découvrir en profondeur les nombreuses possibilités et surtout facilitées offertes par jQuery Mobile.

Bien plus qu’une introduction, « Développer avec jQuery Mobile » fera de vous un expert du Framework.

 

Télécharger le livre électronique:

Icône de téléchargement

 

Les sources et toutes les démos sont disponibles à cette adresse : http://demo.charlesen.fr/jqm

Améliorer la performance et l’expérience utilisateur d’une application avec la classe AsyncTask

Android Speed imageDans ce tuto, nous allons voir comment il est possible, comme le titre l’indique, d’améliorer notre navigation sur notre smartphone Android préféré en utilisant des tâches asynchrones via la classe AsyncTask ! Sur Android, l’ensemble des éléments graphiques sont gérés à partir d’un thread principal que certaines appellent « UI thread« . Il est donc déconseillé d’utiliser ce thread pour des opérations coûteuses ( requêtes en base, chargement d’éléments depuis le web … ).

 Il faut considérer que toute opération nécessitant un temps de traitement supérieur à 5 secondes sera considérée comme nuisible. Une boite de dialogue s’ouvrira alors pour informer l’utilisateur que l’activité ne répond pas. Pour mieux comprendre ce comportement, nous allons réaliser une petite application dont le but est de provoquer un ARN ( … et non ce n’est pas une maladie, ou un genre de crise ), ARN signifie simplement « Activity not Responding ». Content

 

Voici notre main.xml :

main.xml

 

Comme on peut le voir, on aura un bouton qui va lancer une opération et une zone de saisie qu’on va essayer d’utiliser durant le traitement de l’opération. 

Voici maintenant le code de notre activité :

Code de l’activité

 

Testez maintenant votre code :

Lancez le programme, cliquez sur le bouton puis aussitôt, essayez de saisir un mot dans la zone de saisie. Vous verrez donc apparaître la fameuse boite de dialogue Activitiy not Responding.

 

 

 

Pendant le traitement, on ne peut pas faire autre chose comme taper du texte dans un champ.

Pour résoudre ce problème, on peut utiliser la classe AsyncTask. Cette classe sera notre carte maîtresse pour réaliser des tâches de manière asynchrone. Elle crée un deuxième thread de manière à ne pas bloquer le thread principal !

La classe prend 3 paramètres d’entrées.

 

  • La paramètre fourni à la tâche de fond
  • Le type de donnée à transmettre pendant la progression de la tâche
  • Le type de donnée renvoyé par la tâche

La méthode doInBackground ( le traitement se fait dans cette méthode ) doit absolument être implémentée.

Les méthodes onPreExecute ( méthode appelée avant le début du traitement ), onProgressUpdate ( appelée durant le traitement ), onPostExecute ( appelée à la fin du traitement ) sont facultatives !

 

Reprenons donc notre application avec la classe AsyncTask :

Classe AsyncTask

 

Relancez votre application, il est maintenant possible d’utiliser la zone de saisie tout de suite après le clic sur le bouton ! Ceci prouve bien que le traitement n’est pas réalisé par le thread principal mais par le deuxième créé par la classe AsyncTask.

 

 

La classe AsyncTask et ses méthodes permet donc de naviguer dans notre application ( rentrer du texte dans un champ ) tout en éxécutant une tâche au moyen de tâches asyncrones !

Merci d’avoir suivi ce tutoriel ! N’oublie surtout pas de VOTER et de la PARTAGER !!

Utilisation de l’API google places, Geocoding et parsage de Json

A la lecture de ce titre, vous vous doutez bien que nous allons aborder plusieurs choses pendant ce tuto :

 

  • Obtention d’une clé pour l’api google places
  • Récupération d’un ou plusieurs lieux ( banque, bar … ) dans un périmètre de 500m selon un point donné
  • Utilisation de la classe geocoder pour transformer une adresse en une coordonnée
  • traitement du résultat renvoyé sous forme de Json

 

 

 

 

 

Tout d’abord, afin d’utiliser l’api google places, il nous faut obtenir une clé de service google places, accessible ici :

https://code.google.com/apis/console/b/0/

 

Dans l’onglet Api access, créez un nouveau compte puis récupérer l’api key.

Dans l’onglet Services, activez « Places API« .

 

Pour pouvoir récupérer les lieux dans les 500m aux environs d’un point ( latitude/ longitude ), il faut appeler une url de ce type en remplaçant le key par la vôtre :

 

https://maps.googleapis.com/maps/api/place/search/json?location=48.9344042,2.3535862&radius=500&types=food&sensor=false&key=METTRE ICI VOTRE KEY



A la racine du Json renvoyé se trouve « results« . Il va contenir une liste de lieux, à un lieu est associé des attributs tels que ( id, name … )

Dans le cadre de ce tutoriel, nous allons nous contenter de demander à un utilisateur de rentrer une adresse, de sélectionner un type de lieu puis de les afficher à l’écran.

 

 

 

Créons donc le layout :

 

<?xml version=« 1.0 » encoding=« utf-8 »?>

<LinearLayout xmlns:android=« http://schemas.android.com/apk/res/android »

  android:orientation=« vertical »

  android:layout_width=« fill_parent »

  android:layout_height=« fill_parent »

  >

 

    <EditText  android:id=« @+id/addr »

        android:layout_width=« fill_parent »

        android:layout_height=« wrap_content »/>

   

 <RadioGroup

     android:id=« @+id/rg1 »

  android:layout_width=« fill_parent »

   android:layout_height=« wrap_content »

   android:orientation=« horizontal »>

   <RadioButton

    android:id=« @+id/option1 »

    android:layout_width=« wrap_content »

    android:layout_height=« wrap_content »

    android:text=« bank » />

   <RadioButton

    android:id=« @+id/option2 »

    android:layout_width=« wrap_content »

    android:layout_height=« wrap_content »

    android:text=« bar » />

   <RadioButton

    android:id=« @+id/option3 »

    android:layout_width=« wrap_content »

    android:layout_height=« wrap_content »

    android:text=« restaurant » />

 </RadioGroup>

 

 <TextView

android:id=« @+id/maTextView »

android:layout_marginTop=« 25px »

android:layout_width=« wrap_content »

android:layout_height=« wrap_content »

android:gravity=« center »/>

 

</LinearLayout>

 

 

 

 

Redéfinition de la méthode OnCreate :


 
 

public void onCreate(Bundle savedInstanceState) {

             super.onCreate(savedInstanceState);

             setContentView(R.layout.main);

             RadioGroup rgroup = (RadioGroup) findViewById(R.id.rg1);

 

 

       //On écoute un changement d’évènement sur les boutons radio

             rgroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {

                    public void onCheckedChanged(RadioGroup group, int checkedId) {

 

                           try {

                                  //on créé une instance de geocoder

                                  Geocoder gc = new Geocoder(JsonParsingActivity.this);

                                  EditText adress = (EditText) findViewById(R.id.addr);

                                  List<Address> foundAdresses;

                                  /*On récupère l’adresse saisie par l’utilisateur

                                  Pour ceux qui ont suivi le tuto de géolocalisation,il peut etre intéressant de vérifier

                                  qu’une adresse a été saisie,si ce n’est pas fait alors prendre comme adresse la position actuelle de l’utilisateur

                                  */

                                  String addressInput = adress.getText().toString();

                                  //On récupère une liste d’adresse grace à la classe geocoder

                                  foundAdresses = gc.getFromLocationName(addressInput, 5);

                    //On ne s’interesse qu’à la première adresse de la liste,il est cependant possible d’afficher à l’utilisateur

                                  //une liste déroulante d’adresse possible pour qu’il sélectionne la bonne adresse

                                  Address x = foundAdresses.get(0);

                                 //on récupère la latitude et longitude correspondante à l’adresse

                                  final double lat = x.getLatitude();

                                  final double lng = x.getLongitude();

 

                    //on récupère le bouton radio sélectionné

                                  RadioButton rb = (RadioButton) findViewById(checkedId);

                                  //on demande à gogole les lieux avoisinantes correspondant au type sélectionné par l’utilisateur

                                  String  places = getPlaces(rb.getText().toString(),lat,lng);

                                  StringBuilder builder = new StringBuilder();

                                  try {

 

                                         //On parse le Json renvoyé

                                        JSONObject jsonObj = new JSONObject(places);

                                        //l’attribut results est une liste d’objet json donc on le récupère avec getJsonArray

                                        JSONArray results = jsonObj.getJSONArray(« results »);

 

                                        for (int i = 0; i < results.length(); i++) {  

                                               //Pour chaque jsonObjet du jsonArray results on récupère la valeur de l’attribut name

                                               builder.append(results.getJSONObject(i).getString(« name »).toString()).append(« \n »);

                                        }

                                  } catch (Exception e) {

                                        e.printStackTrace();

                                  }

 

                                  ((TextView)findViewById(R.id.maTextView)).setText(builder.toString());

                           } catch (IOException e1) {

                                  // TODO Auto-generated catch block

                                  e1.printStackTrace();

                           }

                    }

             });

 

       }

 

 


On effectue maintenant un appel de l’api places de google :




//google limite le nombre de requettes à 1000 tout les 24h pour un api key donné

       public String getPlaces(String type,double lat,double lng) {

 

             //Url pour la requette

             String url = « https://maps.googleapis.com/maps/api/place/search/json?location= »+lat+ », »+lng+ »&radius=500&types= »+type+ »&sensor=false&key=AIzaSyA5J_JPOa5jtuXaOgbTeHqmNzh61u54hSs »;

 

             StringBuilder builder = new StringBuilder();

             HttpClient client = new DefaultHttpClient();

             HttpGet httpGet = new HttpGet(url);

             try {

                    HttpResponse response = client.execute(httpGet);

                    StatusLine statusLine = response.getStatusLine();

                    int statusCode = statusLine.getStatusCode();

                    //200 pour dire que la requette s’est bien déroulée

                    if (statusCode == 200) {

                           HttpEntity entity = response.getEntity();

                           InputStream content = entity.getContent();

                           BufferedReader reader = new BufferedReader(

                                        new InputStreamReader(content));

                           String line;

                           while ((line = reader.readLine()) != null) {

                                  builder.append(line);

                           }

                    } else {

                           Log.i(JsonParsingActivity.class.toString(), « Erreur de chargement »);

                    }

             } catch (ClientProtocolException e) {

                    e.printStackTrace();

             } catch (IOException e) {

                    e.printStackTrace();

             }

             return builder.toString();

       }

 

 

 

 Et c’est ainsi que s’achève notre tuto sur la géolocalisation via google places !

Bon code à tous 😀

 

 

 

 

 

Optimisation de la performance dans les listes déroulantes ( filtrage des listes )

Nous allons dans ce tutoriel voir comment optimiser une liste déroulante afin d’en améliorer la performance et nous verrons comment ajouter un filtre sur une liste qui permettra à l’utilisateur de rechercher l’élément qu’il souhaite afficher. 

  Un exemple de liste avec filtre :

 


Optimisation de la liste déroulante ou le recyclage des items :

 

Un solution d’optimisation d’une liste déroulante comme celle-ci est le recyclage des éléments de la liste.

Même si la liste contient plusieurs éléments, elle ne peut parfois pas tous les afficher si on ne scroll pas, les éléments les plus utiles sont ceux qui sont visibles !

Le principe est simple, à chaque fois qu’une ligne sort de l’écran, nous la recyclons et l’affectons au prochain élément de la liste.

 

Un schéma vaut parfois mieux que des explications ! Voilà qui devrait vous aider à comprendre le principe du recyclage !

 

 

Nous allons maintenant voir comment modéliser tout ça au niveau de nos classes,

 


Modélisation :

 

 

 

La liste déroulante est obtenue grâce à la classe ListView.

Les données de la liste et le layout à utiliser pour les éléments de la liste sont définies par l’adapter.

Pour notre exemple, nous allons définir un CustomAdapter qui va hériter d’un ArrayAdapter ( il en existe d’autres mais nous utiliserons celui-là ).

A chaque ligne de la liste, une méthode getView() sera appelée. A chaque appel, une vue composée de deux vues ( ImageView et Textview ) sera générée.

Toutefois la création d’un objet est coûteux en performance, il faudra donc redéfinir cette méthode pour optimiser la liste ! Notre astuce consistera donc à garder en mémoire la vue sortante et de la recycler comme l’illustre le schéma plus haut.

La vue qu’on souhaite recycler est envoyé en paramètre de la méthode getView en tant que convertView.

Il suffit juste de remplacer son contenu avec le nouveau. On éviter ainsi de créer une nouvelle vue. Un test de nullité doit être effectué sur convertView car ce dernier peut être null.

L’utilisation de la classe static ViewHolder va nous apporter une amélioration supplémentaire. En effet, même si les vues sont recyclés, il faut tout de même récupérer chaque élément de la vue ( ImageView et TextView ) avec la méthode findViewById. L’appel à cette méthode est très couteux en performance. Mais grâce à ViewHolder, chaque vue sera référenciée avec la méthode setTag. On peut donc récupérer les vues des éléments recyclées avec la méthode getTag de la classe ViewHolder, on n’a donc pas recours à la méthode findViewById !

Pour pouvoir filtrer la liste, nous alloons mettre un listener sur notre EditText. L’adapter sera notifié à chaque changement de contenu de l’EditText, la méthode filter() de l’adapter sera appelée.

Bon assez parlé, maintenant place à l’implémentation de tout ça !

 

 

 Implémentation :

 

Le main.xml

c’est ici qu’on déclare nos vues

main.xml

 

Le listitem.xml

on définit les vues contenues dans un élément de la liste

Listitem.xml

 

L’activité principale

 C’est ici que toutes les classes dont nous avons besoin seronts instanciées

Activité principale

 

 

Le customAdapter

Cette classe contient toutes les méthodes nécessaires pour le recyclage de vue, les méthodes de ViewHolder qui évite qu’on crée un nouvel élément à chaque fois qu’on navigue dans la liste et le filtre.

CustomAdapter

 

Et c’est ainsi que s’achève notre tuto sur l’optimisation de liste ! Bonne implémentation à tous et n’oubliez pas de VOTER et de PARTAGER cet article!