samedi 20 janvier 2018

JavaScript : Comment trier une liste et l’afficher sur une page web ?


Lors d'un précédent billet, je vous avais présenté une méthode pour trier une liste en JavaScript. A l'époque, la sortie se faisait via la console. Dans la vraie vie du développeur Front, on affiche rarement le résultat sur la console (sauf pour débuguer).

Aussi, avec ce nouvel article je vais vous montrer comment effectuer les mêmes tris mais avec un affichage sur une page web.

Pour que ce soit joli, je vais utiliser Bootstrap pour donner un aspect sympathique à l'affichage.

Structure HTML de la page

Coté structure de la page en HTML, on reprend la base du dernier exemple avec les deux boutons permettant d'afficher le trie par âge et le trie par nom des personnages de notre jeu (reprise de l'exemple).

Puis on prépare l'espace où on affichera le résultat après chaque clic sur l'un ou l'autre bouton de choix. L'id utilisé pour cette sortie se nomme " résultat " :

<div class="container-fluid">
   <h2>Trier en javaScript</h2>
      <button type="button" class="btn btn-primary btn-sm" onclick="sortName()">Par Prénom</button>
      <button type="button" class="btn btn-secondary btn-sm" onclick="sortAge()">Par Age</button>

<h3>Résultat</h3>
   <div>
      <div class="row">
         <div class="col-12 col-md-4">
            <div id="resultat"></div>
         </div>
         <div class="col-12 col-md-8">
         </div>
      </div>
   </div>
</div>

Voici le résultat sur notre page web :


Côté JavaScript

On retrouve notre fière équipe avec ses caractéristiques. C'est juste un prétexte pour disposer de chaînes de caractères (String) et de nombres à trier pour notre exemple de trie avec JavaScript :

var warrior = [
    { 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: "Nolülf", age: 23, weapon: "hache" },
    { name: "Joliett", age: 22, weapon: "bazooka" }
];

Fonction affichage tableau

En JavaScript, on va passer par une fonction qui a pour mission de générer l'affichage du résultat du trie sous forme de tableau à l'emplacement repéré par l'id défini nommé " resultat " (vu au-dessus).

Vous repérez facilement les balises HTML mentionnées dans cette fonction pour constituer le tableau de données triées :

function display(i) {
    console.log(i);
    var html = document.getElementById('resultat').innerHTML;
    html = html + "<table class='table table-striped'>";
    html = html + "<thead class='thead-inverse'><tr>";
    html = html + "<th scope='col'>Nom</th><th scope='col'>Age</th><th scope='col'>Arme</th>";
    html = html + "</thead></tr>";
    html = html + "<tbody>";
    warrior.forEach(function (warrior) {
        html = html + "<tr>";
        html = html + "<td>" + warrior.name + "</td><td>" + warrior.age + "</td><td>" + warrior.weapon + "</td>";
        html = html + "</tr>";
        })
    html = html + "</tbody>";
    html = html + "</table>";
    document.getElementById('resultat').innerHTML = html;
}

Trier des nombres

Ici rien de nouveau sous le soleil car on reprend tout simplement la fonction de la dernière fois pour trier par âge :

function sortAge() {
    document.getElementById('resultat').innerHTML = " ";
    var intro = "Trié par age croissant";
    warrior.sort(function (a, b) {
        return a.age - b.age;
    });
    display(intro);
}

Voici le résultat sur notre page web :


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

De la même manière, on reprend tout simplement la fonction de la dernière fois pour trier par nom en utilisant la fonction sortName() :

function sortName() {
    document.getElementById('resultat').innerHTML = " ";
    var intro = "Trié par nom croissant";
    warrior.sort(function (a, b) {
        return a.name.localeCompare(b.name);
    });
    display(intro);
}

Voici le résultat sur notre page web :



Et voilà le tour est joué !

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.



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.




lundi 10 avril 2017

Angular : Comment créer votre premier projet ?


Dans cet article, je vous propose de découvrir les bases du framework web Angular en vous montrant comment créer votre premier projet. Après une petite introduction à Angular et les quatre piliers de sa conception, j’ai choisi d’utiliser l’Interface en ligne de commande (CLI) et la commande ng serve pour tester le projet Angular.

Qu’est-ce qu’Angular

Je vous propose de commencer par une petite introduction à Angular histoire de planter le décor.

Angular est né en 2009 dans les locaux de Google. Shyam Seshadri proposa un framework fait maison initialement appelé AngularJS.
Vous rencontrerez cette dénomination pour les applications développées avec les versions 1 et 2 du framework.
Ne cherchez pas la version 3 d’Angular, Google a purement décidé de passer directement à la version 4 en perdant au passage le suffixe JS.
4 concepts clés d’Angular

Angular est construit autour de concepts clés et bonnes pratiques du développement web actuel :
  • Architecture MVC (Modèle-Vue-Contrôleur) : architecture incontournable qui consiste à avoir une stricte séparation entre les données (Modèle), la présentation des données (Vue), et les actions possibles sur ces données (Contrôleur) ;
  • Data Binding :il s’agit d’un mécanisme permettant de lier la partie vue à la partie logique c’est-à-dire que les éléments de votre code HTML seront liés à votre contrôleur JavaScript ;
  • Injection de dépendances : les modules que vous développerez n’auront plus à se soucier d’instancier leurs dépendances ;
  • Manipulation du DOM grâce aux directives : la manipulation du DOM devient plus facile à maintenir et à tester que du pur JavaScript.

Prérequis pour démarrer votre projet Angular

  • Node 4.x.x ou supérieur ;
  • Npm 3.x.x ou supérieur.
Si vous avez déjà une installation de Node, vérifiez que vous utilisez au moins node 4.x.x et npm 3.x.x ou supérieur en exécutant dans le terminal/console :
node -v
et
npm -v

Mise en place d’un nouveau projet Angular

Étape 1. Configurer l’environnement de développement

Pour la grande majorité des actions, vous allez utiliser la ligne de commande dans le terminal (pour MacOS et Linux) ou la console (pour Windows). vous allez tout d’abord installer l’Angular CLI. Cet environnement est incontournable pour créer les composants et services de votre application.
Pour installer l’Angukar CLI :
npm install -g @angular/cli

Sous Mac OS et linux vous devrez peut-être faire précéder la commande du terme « sudo » vous permettant d’élever vos droits (passer en mode root). Votre mot de passe vous sera demander pour poursuivre l’exécution de la commande.

Étape 2. Créer un nouveau projet

Ouvrez une fenêtre de terminal et créez un nouveau projet et un squelette d’application en exécutant les commandes suivantes:
ng new mon-application-angular

Cette commande créé un squelette d’application Angular 2.
Vous pouvez vérifier la structure de dossier par défaut.
Vous découvrez un fichier styles.css dans lequel vous pourrez écrire vos styles.
Mais si vous souhaitez créer un projet Angular utilisant SASS, vous devez exécuter la commande suivante:
ng new mon-application-angular --style = scss

Étape 3: Tester le projet

Rendez-vous dans le répertoire du projet en utilisant la commande :
cd mon-application-angular

Une fois que vous êtes dans votre dossier hébergeant votre application Angular, exécutez la commande suivante :
ng serve

La commande ng serve lance le serveur, surveille les fichiers et reconstruit l’application lorsque vous modifiez votre code. Vous n’avez pas besoin de rafraichir la page qui s’affiche dans votre navigateur : c’est automatique 😉

Voici ce qu’affiche ma console lors de l’exécution de ng serve :
Mac-mini-de-Claude:mon-application-angular claude$ ng serve
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
Hash: aa8deb39251b1f857740                                                    / Time: 12392ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 3.63 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.4 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.


Ouvrez un navigateur sur http://localhost:4200/

L’application nous accueille avec un message:


J’espère que cette petite introduction vous aidera à créer votre premier projet Angular.
Réagissez en laissant un commentaire ci-dessous.




jeudi 30 mars 2017

Ubuntu : Comment installer Android Studio ?


Android Studio est l'environnement officiel de développement pour développer des applications mobiles pour Android. Il est basé sur IntelliJ IDEA.

Avant de pouvoir installer Android Studio sur les distributions linux Ubuntu, il faut installer le Kit de Développement Java d'Oracle.

Ouvrez le terminal de commande et lancer successivement :
sudo add-apt-repository ppa:webupd8team/java
sudo apt-get update
sudo apt-get install oracle-java8-installer
Puis installer Android Studio :
sudo apt-add-repository ppa:paolorotolo/android-studio
sudo apt-get update
sudo apt-get install android-studio
Pour exécuter Android Studio, lancer :
/opt/android-studio/bin/studio.sh



dimanche 3 juillet 2016

Android : Comment 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.



samedi 19 décembre 2015

Cordova : Comment créer votre première application mobile ?


Depuis quelque temps je m’intéresse au développement pour mobiles et plus précisément pour Android. A travers ce billet, je vais vous présenter comment créer votre première application mobile avec Cordova sans connaître le langage natif Android ou iOS.

Présentation de Cordova

Pour coder une application mobile, on peut le faire de deux manières :
  • Soit développer en langage natif du mobile,
  • Soit créer une application hybride qui sera ensuite portée sur chaque plateforme.
Dans le premier cas, cela oblige à connaître le langage des différentes plateformes (Android, iOS et Windows Mobile).

C’est pour le second cas de figure qu’intervient Cordova/PhoneGap.

Cordova et PhoneGap

Apache Cordova est un framework de développement mobile open-source. Il permet d’utiliser les technologies Web courantes telles que HTML5, CSS3 et JavaScript pour développer des applications multiplateformes, évitant ainsi l’utilisation des langages natifs. Les applications s’exécutent dans des wrappers ciblés pour chaque plate-forme.
PhoneGap permet de développer des applications hybrides, d’utiliser des émulateurs (Desktop et Mobile), d’utiliser des API permettant l’accès aux capteurs du mobile, aux données ainsi qu’à l’état du réseau et de les porter sur chaque plateforme mobile grâce à PhoneGap Build.

Installer l’environnement

SDK Android et iOS

L’installation des SDK pour Android et iOS s’est grandement facilité depuis quelques mois car il suffit d’installer un environnement de développement intégré (EDI) contenant tout le nécessaire pour développer une application pour mobile. Ces EDI mis à disposition gratuitement se nomment :
  • Android Studio pour Android (élémentaire mon cher) ;
  • xCode pour iOS (téléchargeable gratuitement depuis le store Apple).

Node.js

Node.js permet de disposer de la commande npm permettant d’installer des paquets ou des applications en ligne de commande.
Pour installer node.js, rendez-vous à cette adresse : https://nodejs.org/en/

installer-nodejs-1

installer-nodejs-2

installer-nodejs-3

installer-nodejs-4

Pour vérifier que l'installation s'est bien déroulée, lancer dans un Terminal la commande :

$ node -v

Ici, j'obtiens la version de node.js que je viens d'installer : 5.7.0

Cordova

Ouvrir un terminal et utiliser la ligne de commande :
$ sudo npm install –g cordova

Remarque : sur OS X et Linux, sudo permet de lancer une commande avec les droits maximum (root). Sur Windows, vous n’avez pas besoin de faire précéder la commande npm de sudo.

Pour vérifier que l'installation s'est bien déroulée, lancer dans un Terminal la commande :
$ cordova -v

Ici, j'obtiens la version de node.js que je viens d'installer : 6.1.1

PhoneGap Desktop

Ouvrir un terminal et utiliser la ligne de commande
$ sudo npm install –g phongap@latest
Pour vérifier que l'installation s'est bien déroulée, lancer dans un Terminal la commande :
$ phonegap -v

Ici, j'obtiens la version de node.js que je viens d'installer : 6.2.0

PhoneGap Developer

Installer PhoneGap sur votre mobile. Il existe une version pour chaque plateforme. Vous la trouverez dans votre AppStore favoris.

Créer l’application

Création d’un projet vide

Nous allons créer un projet vide toujours dans l’invite de commande.
Déplacez-vous à l’endroit où vous souhaitez créer le projet de votre application.
Par exemple si vous voulez travailler sur le bureau, utilisez :
$ cd Desktop
Puis
$ cordova create MyApp

Dans le Finder, je visualise bien tous les fichiers du projet :

cordova-MyApp-contenu

MyApp étant le nom de l’application que vous souhaitez créer.

Ajouter des plateformes

Ajouter des plates-formes signifie que vous aller ajouter la possibilité de construire une application pour le système d’exploitation mobile de votre choix (Android, iOS, BlackBerry ou Windows phone). Mais avant cela vous devez vous assurer de disposer de chaque SDK associé à la plate-forme cible. Par exemple pour iOS, vous devez disposer du SDK iOS.

Toutes les commandes suivantes doivent être exécutées dans le répertoire du projet.
Comme je dispose du SDK Android sur mon Mac, je vais ajouter la plateforme Android. Voici une capture de mon Terminal :
Mac-mini-de-Claude:Desktop claude$ cd MyApp
Mac-mini-de-Claude:MyApp claude$ cordova platform add android
Adding android project...
Creating Cordova project for the Android platform:
	Path: platforms/android
	Package: io.cordova.hellocordova
	Name: HelloCordova
	Activity: MainActivity
	Android target: android-23
Android project created with cordova-android@5.1.1
Discovered plugin "cordova-plugin-whitelist" in config.xml. Installing to the project
Fetching plugin "cordova-plugin-whitelist@1" via npm
Installing "cordova-plugin-whitelist" for android

               This plugin is only applicable for versions of cordova-android greater than 4.0. If you have a previous platform version, you do *not* need this plugin since the whitelist will be built in.

Dans le Finder, je visualise bien tous les fichiers qui ont été créé pour Android :

cordova-MyApp-android

Voici les commandes à lancer suivant la plateforme de votre choix :
$ cordova platform add ios
$ cordova platform add amazon-fireos
$ cordova platform add android
$ cordova platform add blackberry10
$ cordova platform add firefoxos

Démarrer PhoneGap Desktop

PhoneGap est un emulateur qui vous permet de dialoguer avec votre mobile et de visualiser en temps réel l'application que vous êtes en train de concevoir. Vous pouvez télécharger PhoneGap Desktop depuis cette adresse :
http://phonegap.com/products/#desktop-app-section

Installer l'application comme d'habitude :

installer-phonegap-osx

Lancer l'application PhoneGap et ouvrez votre projet d'application mobile :

1-phonegap-sur-mac

Démarrer PhoneGap Mobile

Lancer PhoneGap sur votre mobile et connectez l’application à l’adresse communiquée par l’application de votre ordinateur.

2-phonegap-sur-mac

Si besoin saisir http://192.168.0.16:3000 puis Connect pour lancer l'émulateur.

3-phonegap-sur-mac

Voici l'application. Vous pouvez maintenant apporter les modifications dans votre code et voir en direct le résultat sur votre mobile.
Tout se passe dans le dossier nommé "www" où vous trouverez les fichiers HTML, CSS et Javascript :

modifier-html-css-javascript

Générer l’application pour les plateformes

Une fois que votre application est développée et prête à être diffusée, vous devez transformer votre application hybride en application utilisable sur Android, iOS et Windows Mobile. Là aussi deux solutions s’offrent à vous pour une application Android :
  • Importer le projet dans Android Studio ;
  • Utiliser les services PhoneGap Build.

Importer le projet dans Android Studio

Lancer Android Studio et importer le projet créer via Cordova :

importer-projet-cordova-android-studio

importer-projet-cordova-android-studio-detail

importer-projet-cordova-android-studio-gradle

Depuis Android Studio, vous allez pouvoir générer votre application que vous pourrez distribuer par la suite via Google Play.

Utiliser les services PhoneGap Build

Pour ce faire rendez-vous sur le site PhoneGap Build pour générer le format de chaque plateforme mobile. Évidemment, vous pouvez très bien ne vouloir que l’application Android mais pas iOS. Aucun, problème c’est vous qui décidez ;-)


Aller plus loin

J’espère que ce billet avec les étapes pour développer votre application mobile avec PhoneGap vous sera utile. N’hésitez-pas à commenter cet article…


Sources :




samedi 12 décembre 2015

macOS : Comment forcer la fermeture d'une application ?


Pour fermer une application sur votre Mac quand elle n'est pas figée, il suffit de sélectionner l’option Quitter dans le menu approprié. Si vous êtes adepte des raccourcis clavier, utiliser la combinaison Commande + Q.

Si l’application ne répond pas, vous avez deux possibilités pour forcer la fermeture d'une application sur votre Mac :

Choix 1 : dans le menu Apple, choisissez Forcer à quitter :


Choix 2 : appuyez sur les touches Commande + Option + Echap :


Sélectionnez l’application ne répondant pas dans la fenêtre "Forcer des applications à quitter", puis cliquez sur "Forcer à quitter".



vendredi 6 novembre 2015

macOS : Comment installer un serveur web Apache, PHP et MySQL ?


Mac OS X est basé sur UNIX. Aussi, les applications UNIX s’installent facilement sur Mac OS X. D’autre part, Apache et PHP sont livrés avec OS X. Pour créer un serveur web local, tout se qui vous reste à faire est de configurer apache et d’installer MySQL,

Evidement vous pourriez tout simplement installer une application tout en un comme MAMP. Ainsi il vous sera possible de disposer rapidement d’un serveur web sur votre Mac. Mais vous avouerez que c’est plus fun de faire joujoux avec la ligne de commande, histoire de mieux comprendre ce que vous faite…

Lançons des commandes

Pour commencer, ouvrez l’application Terminal et passons sur l’utilisateur root pour avoir tous les privilèges :
sudo su -

Activez Apache sur Mac OS X

apachectl start

Vérifiez que tout s’est bien passé en ouvrant votre navigateur préféré avec l’adresse http://localhost

Si vous voyez It works! c’est que vous avez passé la première étape avec succès :-)

Activez PHP pour Apache

Tout d’abord faites une copie de la configuration par défaut d’Apache. C’est un bon réflexe car en cas de doute, il vous sera toujours possible de faire des comparaisons avec la version originale du fichier.
cd /etc/apache2/

cp httpd.conf httpd.conf.bak
Editez la configuration d’Apache avec l’utilitaire vi :
vi httpd.conf

Décommandez la ligne suivante en retirant le # :
LoadModule php5_module libexec/apache2/libphp5.so

Redémarrez Apache :
apachectl restart

Vous pouvez vérifier le bon fonctionnement de PHP en créant une page dans le DocumentRoot de Mac OX X El Capitan situé dans /Library/WebServer/Documents.
Cette page a pour rôle d’afficher les informations de PHP en utilisant la fonction phpinfo()
echo ' /Library/WebServer/Documents/phpinfo.php
Verified le PHP en affichant la page http://localhost/phpinfo.php

Installer MySQL sur Mac OS X El Capitan

Téléchargez et installez la dernière version de MySQL disponible au format DMG pour Mac OS :
http://dev.mysql.com/downloads/mysql/

Pour administrer vos bases de données MySQL, vous pouvez installer MySQL Workbench à cette adresse : http://dev.mysql.com/downloads/workbench/

Connecter PHP et MySQL

Vous devez vous assurer que PHP et MySQL puissent communiquer ensemble en lançant des différentes commandes :
cd /var 

mkdir mysql

cd mysql

ln -s /tmp/mysql.sock mysql.sock
Voilà vous êtes fin prêt pour développer vos projets sur le serveur web local hébergé sur Mac OS X El Capitan.

Accéder aux fichiers via le Finder

Si vous utilisez la ligne de commande pour accéder à votre serveur Web local, vous devez naviguer jusqu'à :
/Library/WebServer/Documents/
En utilisant le Finder, je note que je ne vois pas le dossier Library par contre pour accéder au serveur local, la "porte d'entrée" est devenue "Bibliothèque". Voici une capture de mon Finder pour vous aider à naviguer vers votre serveur local :

N’hésitez pas à faire un retour ou à faire part de votre expérience d’installation de serveur web local surMac OS X El Capitan.



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



lundi 15 décembre 2014

NetBeans : Comment mettre en place le thème Dark ?


Vous êtes nombreux à vouloir mettre en place le thème Dark dans votre éditeur de code préféré, à savoir NetBeans. Vous trouverez de nombreuses discussions à ce sujet. Sujet qui revient à chaque fois que NetBeans arrive dans une version majeure.

Aussi, pour que vous ne perdiez pas de temps à fouiller le Net en quête de la réponse, je partage avec vous, amis développeurs, ce mini tuto pour que vous puissiez enfin voir NetBeans habillé de noir.

Tout se passe dans la gestion des Plugins



Dans l’onglet “Plugins disponibles“, faites une recherche sur le mot clé “dark” :


La recherche retourne “Dark Look and Feel Themes” : Cool ! C’est justement ce qu’on cherche…

Sélectionnez l’extension à installer et cliquez sur “Install” :


Un écran d’accueil vous présente l’extension qui va être installée :


Acceptez les termes de la licence d’utilisation en cochant la case prévue à cet effet puis cliquez sur “Install” :

Une fois l’installation terminée, rendez-vous dans les Options puis l’onglet Apparence.
Dans l’onglet “Look and Feel”, vous pouvez choisir le thème Dark que vous venez d’installer :

Validez avec le bouton OK en bas à droite de la fenêtre.

TADA ! Et voici NetBeans habillé de noir :

Personnellement, j’ai un petit faible pour Dark Metal que j’agrémente avec le look Sublime Text pour la zone d’édition du code.

J’ai publié un petit tuto pour donner un look Sublime Text à l’éditeur Netbeans.
Quel est votre thème Netbeans préféré ?

J’espère que ce tuto vous ara été utile, n’hésitez pas à participer en commentant ce billet. Merci et à très bientôt