Kotlin : Comment créer votre première application avec Eclipse ?

Je vous propose de vous montrer à travers ce didacticiel comment créer votre première application Kotlin “Hello World!” à l’aide d’Eclipse.

Présentation de Kotlin

Depuis quelque temps je m’intéresse au langage de programmation Kotlin développé par l’éditeur JetBrains connu pour ses environnements de développement intégré (IntelliJ IDEA, PhpStorm, …).

Ce langage de programmation orienté objet, fonctionnel propose un typage statique. Il tourne sous la machine virtuelle Java (JVM) et il peut également être compilé sous JavaScript.

Il est très proche de Java, de plus il a l’avantage d’être concis, simple et très facile à lire (et à écrire) au dire de son éditeur et des développeurs qui l’ont adopté. D’ailleurs de nombreuses applications connues ont été récrite ou réécrite avec Kotlin : Pinterest, Evernote, Uber par exemple.

Mise en place de l’environnement

Je pars du principe que vous disposez déjà d’Eclipse sur votre ordinateur. Sinon, vous pouvez l’obtenir à partir de la page de téléchargement. Je vous recommande la version « Eclipse IDE for Java EE Developers ».

Puis nous allons installer le plugin depuis Eclipse Marketplace en passant par le menu Help -> Eclipse Marketplace… et en recherchant le plugin :

A l’issue de l’installation, Eclipse demande un redémarrage pour finaliser la procédure, nous pouvons vérifier que le plugin Kotlin est correctement installé, en ouvrant la perspective Kotlin dans le menu principal Window -> Open Perspective -> Other

Créer un nouveau projet

Nous sommes maintenant prêts à créer un nouveau projet Kotlin.

Sélectionnez File -> New -> Kotlin Project pour démarrer.

Un projet vide sera créé et sera prêt pour l’écriture du code Kotlin qui cible la JVM.
Le projet créé, du point de vue d’Eclipse, est également un projet Java, ce qui signifie qu’il dispose du Kotlin Builder faisant référence à la bibliothèque d’exécution de Kotlin. L’avantage de cette solution est que nous pouvons continuer à ajouter des classes Java au projet, en mélangeant et en comparant le code Kotlin et Java si nécessaire.

Nous pouvons maintenant créer un nouveau fichier sous le dossier source.

Si vous omettez l’extension “.kt” dans le nom du fichier, ne vous inquiétez pas, Eclipse l’ajoutera automatiquement…

Une fois le fichier créé, nous devons taper la routine principale, qui est le point d’entrée d’une application Kotlin.
Enfin, nous ajoutons une simple ligne de code Kotlin pour imprimer le message “Hello World!” :

Exécuter l’application

Le moyen le plus simple d’exécuter l’application consiste à faire un clic droit quelque part dans le fichier principal et à sélectionner Run As -> Kotlin Application

Si tout s’est bien passé, la sortie de la fenêtre de la console devrait s’ouvrir automatiquement, affichant les résultats :

Nous avons maintenant notre première application Kotlin sous Eclipse.

Évidemment comme toutes les applications “Hello World!” on ne vérifie que le fait que les lignes de codes que vous avez tapés s’exécutent bien : rien d’extraordinaire !

Dans de prochains billets, je vous présenterai un peu plus Kotlin et surtout, j’évoquerai son usage dans le développement d’applications mobiles puisque Google à officialiser la compatibilité avec les smartphones Android.

Stay tuned…

 

Flutter : Comment créer un formulaire et une SnackBar ?

Avec ce tutoriel Flutter, je vais vous présenter la manière de construire un formulaire avec vérification pour éviter que la saisie soit non-nulle associé à un message d’alerte via une SnackBar d’alerte. Comme d’habitude je partage le code dans ce billet consacré à Flutter.

Le formulaire avec validation

Les applications demandent souvent aux utilisateurs de saisir des informations dans un champ de texte. Par exemple, vous pouvez demander aux utilisateurs de saisir un identifiant et un mot de passe pour valider l’accès à un espace privé.

Pour que votre application soit sûres et faciles à utiliser, vous devez vérifier si les informations fournies par l’utilisateur sont valides. Si l’utilisateur a correctement rempli le formulaire, traitez les informations. Si l’utilisateur soumet des informations incorrectes, affichez un message d’erreur convivial pour lui faire savoir ce qui ne s’est pas passé.

C’est à ce moment qu’intervient la SnackBar.

Champ formulaire Flutter stylé

Le code du champ de formulaire :

TextFormField(
  maxLength: 25,
  decoration: const InputDecoration(
      labelText: 'Champ de formulaire',
      hintText: 'Entrer du texte',
      border: OutlineInputBorder()),
  validator: (value) {
    if (value.isEmpty) {
      return 'Veuillez saisir un texte';
    }
    return null;
  },
)

La SnackBar

Elle permet d’informer brièvement vos utilisateurs lorsque certaines actions ont lieu. Par exemple, lorsqu’un utilisateur glisse un message dans une liste, vous pouvez l’informer que le message a été supprimé.

Vous pourriez même leur donner une option pour annuler l’action.

Snackbar de validation suite à action sur le bouton

Le code du bouton de validation et de la snackbar de confirmation :

child: RaisedButton(
  onPressed: () {
    // Retourne true si le formulaire est valide, sinon false
    if (_formKey.currentState.validate()) {
      // Affiche le Snackbar si le formulaire est valide
      Scaffold.of(context).showSnackBar(
          SnackBar(content: Text('Traitement en cours')));
    }
  },
  child: Text('Envoyer'),
)

Construire un formulaire et une SnackBar d’alerte

Dans l’exemple que je vous propose dans ce tutoriel Flutter, vous allez apprendre comment ajouter une validation à un formulaire qui comporte un seul champ de texte en suivant les étapes suivantes :

  • Créer un formulaire avec une clé globale.
  • Ajouter un champ de type TextFormField avec une logique de validation.
  • Créez un bouton pour valider et soumettre le formulaire.
  • Afficher une SnackBar lorsque la saisie est valide (non-nulle)
  • Fournir une action facultative

Voici le code complet du tuto Flutter :

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Formulaire et Snackbar',
      theme: ThemeData(
        primarySwatch: Colors.orange,
      ),
      home: MyHomePage(title: 'Formulaire et Snackbar'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        child: MyCustomForm(),
      ),
    );
  }
}

class MyCustomForm extends StatefulWidget {
  @override
  MyCustomFormState createState() {
    return MyCustomFormState();
  }
}

class MyCustomFormState extends State<MyCustomForm> {
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    // Construire le formulaire avec _formKey créé au-dessus
    return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          TextFormField(
            validator: (value) {
              if (value.isEmpty) {
                return 'Veuillez saisir un texte';
              }
              return null;
            },
          ),
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: RaisedButton(
              onPressed: () {
                // Retourne true si le formulaire est valide, sinon false
                if (_formKey.currentState.validate()) {
                  // Affiche le Snackbar si le formulaire est valide
                  Scaffold.of(context).showSnackBar(
                      SnackBar(content: Text('Traitement en cours')));
                }
              },
              child: Text('Envoyer'),
            ),
          ),
        ],
      ),
    );
  }
}

Retrouvez le code de ce tuto sur GitLab

J’espère que ce projet vous aidera à mieux comprendre comment construire un formulaire et une SnackBar avec Flutter. N’hésitez pas à ajouter vos commentaires ou questions ci-dessous, je me ferai un plaisir d’y répondre.

 

 

 

Photo by Josh Hild from Pexels

Créer des cercles avec CSS3 avec support multi-navigateurs

Lorsqu’on est graphiste web on peut être amené à utiliser des formes à bordures arrondies dans les créations. Mais voilà au moment de passer à l’intégration de la maquette pour créer le site internet, l’intégrateur Web doit utiliser la propriété appelée border-radius : faire des cercles n’a jamais été aussi facile qu’avec CSS3.

Voici la propriété CSS avec la valeur qui rend éléments ressemblant à un cercle :

border-radius: 50%;

Par exemple, si vous voulez faire un élément qui ressemble à un cercle sa hauteur et la largeur doivent être égaux. Si la hauteur et la largeur de l’élément ne sont pas égaux, vous obtiendrez un ovale.

img { border-radius: 50%; }

Pour le support multi-navigateurs le modèle doit être complété par des préfixes différents suivant le fournisseur de border-radius propriété CSS et PIE. Ajoutant ainsi le support pour les anciennes versions de navigateurs tels que Safari, Chrome, Firefox et autres. PIE ajoute le support pour IE7 et IE8, et avant qu’il ne commence son travail le PIE doit être ajouté à un site Web tel que décrit dans l’article suivant: CSS3: Progressive Internet Explorer (PIE).

Voici styles finales avec support multi-navigateurs:

-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-khtml-border-radius: 50%;
border-radius: 50%;
behavior: url(PIE.htc);

Voyons comment ils fonctionnent avec des éléments div:

div { 
   -webkit-border-radius: 50%; 
   -moz-border-radius: 50%; 
   -khtml-border-radius: 50%; 
   border-radius: 50%; 
   background-color: red; 
   width: 200px; 
   height: 200px; 
   position: relative; 
   behavior: url(PIE.htc);
}

 

 

 

SOURCE : Article sur BASICuse

Kotlin : Comment gérer la date et l’heure ?

A la suite de mes derniers billets à propos du langage de programmation Kotlin dans lesquels je présentais les 10 raisons de choisir Kotlin pour développer vos applications et comment créer votre première application avec Kotlin, je vais vous démarrer une série de tutoriels et de snippets pour vous accompagner dans la prise en main de ce langage de programmation.

Pour démarrer, nous allons nous pencher sur la gestion des dates avec les exemples suivants :

Convertir une chaîne de caractères en date

  • Convertir une chaîne de caractères en date à l’aide de formateurs prédéfinis
  • Convertir une chaîne de caractères en date à l’aide d’un pattern formateur

Obtenir la date et l’heure actuelles

  • Obtenir la date et l’heure actuelles dans le format par défaut
  • Obtenir la date et l’heure actuelles avec un pattern
  • Obtenir l’heure de la date actuelle à l’aide de constantes prédéfinies
  • Obtenir l’heure de la date actuelle localisée

Additionner deux dates

Convertir une chaîne de caractères en date

Convertir une chaîne de caractères en date à l’aide de formateurs prédéfinis

Dans ce programme, vous apprendrez à convertir les chaînes de caractères en date en utilisant le formateur.

import java.time.LocalDate
import java.time.format.DateTimeFormatter

fun main(args: Array<String>) {
    // Format y-M-d or yyyy-MM-d
    val string = "2017-07-25"
    val date = LocalDate.parse(string, DateTimeFormatter.ISO_DATE)
    
    println(date)
}

Lorsque vous exécutez le programme, la sortie sera :

2017-07-25

Dans le programme ci-dessus, nous avons utilisé le formatteur prédéfini ISO_DATE qui prend les chaînes de date au format 2017-07-25 ou 2017-07-25+05:45′.

La fonction parse() de LocalDate analyse la chaîne donnée en utilisant le formateur donné. Vous pouvez également supprimer le formateur ISO_DATE dans l’exemple ci-dessus et remplacer la méthode parse() par :

LocalDate date = LocalDate.parse(string, DateTimeFormatter);

 

Convertir une chaîne de caractères en date à l’aide d’un pattern formateur

import java.time.LocalDate
import java.time.format.DateTimeFormatter
import java.util.Locale

fun main(args: Array<String>) {
    val string = "July 25, 2017"
    val formatter = DateTimeFormatter.ofPattern("MMMM d, yyyy", Locale.ENGLISH)
    val date = LocalDate.parse(string, formatter)
    
    println(date)
}

Lorsque vous exécutez le programme, la sortie sera :

2017-07-25

Dans le programme ci-dessus, notre date est dans le format MMMMM j, aaaaa. Ainsi, nous créons un formateur du pattern donné.

Maintenant, nous pouvons analyser la date en utilisant la fonction LocalDate.parse() et obtenir l’objet LocalDate.

Obtenir la date et l’heure actuelles

Dans ce programme, vous apprendrez à obtenir la date et l’heure actuelles dans différents formats avec Kotlin.

Obtenir la date et l’heure actuelles dans le format par défaut

import java.time.LocalDateTime

fun main(args: Array<String>) {

    val current = LocalDateTime.now()
    
    println("Current Date and Time is: $current")
}

Lorsque vous exécutez le programme, la sortie sera :

Current Date and Time is: 2017-08-02T11:25:44.973

Dans le programme ci-dessus, nous avons défini un modèle de format Année-Mois-Jour Heures:Minutes:Secondes.millisecondes en utilisant un objet DateTimeFormatter.

Ensuite, nous avons utilisé la méthode format() de LocalDateTime pour utiliser le formateur donné. Ceci nous donne la sortie de la chaîne de caractères formatée.

Obtenir la date et l’heure actuelles avec un pattern

import java.time.LocalDateTime
import java.time.format.DateTimeFormatter

fun main(args: Array<String>) {
    val current = LocalDateTime.now()
    val formatter = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss.SSS")
    val formatted = current.format(formatter)

    println("Current Date and Time is: $formatted")
    
}

Lorsque vous exécutez le programme, la sortie sera :

Current Date and Time is: 2017-08-02 11:29:57.401

Dans le programme ci-dessus, nous avons défini un modèle de format Année-Mois-Jour Heures:Minutes:Secondes.millisecondes en utilisant un objet DateTimeFormatter.

Ensuite, nous avons utilisé la méthode format() de LocalDateTime pour utiliser le formateur donné. Ceci nous donne la sortie de la chaîne de caractères formatée.

Obtenir l’heure de la date actuelle à l’aide de constantes prédéfinies

import java.time.LocalDateTime
import java.time.format.DateTimeFormatter

fun main(args: Array<String>) {

    val current = LocalDateTime.now()
    val formatter = DateTimeFormatter.BASIC_ISO_DATE
    val formatted = current.format(formatter)

    println("Current Date is: $formatted")
    
}

Lorsque vous exécutez le programme, la sortie sera :

Current Date is: 20170802

Dans le programme ci-dessus, nous avons utilisé une constante de format prédéfinie BASIC_ISO_DATE pour obtenir la date ISO actuelle en sortie.

Obtenir l’heure de la date actuelle localisée

import java.time.LocalDateTime
import java.time.format.DateTimeFormatter
import java.time.format.FormatStyle

fun main(args: Array<String>) {

    val current = LocalDateTime.now()
    val formatter = DateTimeFormatter.ofLocalizedDateTime(FormatStyle.MEDIUM)
    val formatted = current.format(formatter)
    
    println("Current Date is: $formatted")
}

Lorsque vous exécutez le programme, la sortie sera :

Current Date is: Aug 2, 2017 11:44:19 AM

Dans le programme ci-dessus, nous avons utilisé un média de style localisé pour obtenir la date et l’heure actuelles dans le format donné. Il y a aussi d’autres styles : Complet, long et court.

Additionner deux dates

Dans cet exemple, vous apprendrez à ajouter deux dates à l’aide de Calendar.

Depuis, l’époque Java des années 1970, n’importe quelle date représentée dans un objet Date ne fonctionnera pas. Cela signifie que vos Dates commenceront à partir de 1970 et que lorsque deux objets Date sont ajoutés, la somme sera amputée de1970 années.

Donc, nous utilisons Calendar pour régler ce soucis.

import java.util.Calendar

fun main(args: Array < String > ) {

    val c1 = Calendar.getInstance()
    val c2 = Calendar.getInstance()
    val cTotal = c1.clone() as Calendar

    cTotal.add(Calendar.YEAR, c2.get(Calendar.YEAR))
    cTotal.add(Calendar.MONTH, c2.get(Calendar.MONTH) + 1) // Zero-based months
    cTotal.add(Calendar.DATE, c2.get(Calendar.DATE))
    cTotal.add(Calendar.HOUR_OF_DAY, c2.get(Calendar.HOUR_OF_DAY))
    cTotal.add(Calendar.MINUTE, c2.get(Calendar.MINUTE))
    cTotal.add(Calendar.SECOND, c2.get(Calendar.SECOND))
    cTotal.add(Calendar.MILLISECOND, c2.get(Calendar.MILLISECOND))

    println("${c1.time} + ${c2.time} = ${cTotal.time}")

}

J’espère que ces exemples vous aideront à mieux comprendre à mieux gérer les dates et le temps avec Kotlin. N’hésitez pas à ajouter vos commentaires ou questions ci-dessous, je me ferai un plaisir d’y répondre.

 

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.

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

Qu’est-ce qu’Angular ?

Angular est un framework de développement structuré et puissant, conçu pour construire des applications web dynamiques et efficaces. Utilisant TypeScript comme langage principal, il offre aux développeurs un environnement cohérent et optimisé pour le développement d’applications à page unique (SPA).

Angular se distingue par son système de composants, qui encourage la modularité et la réutilisation du code, ainsi que par son architecture qui favorise une séparation claire entre la logique de présentation et la logique métier. Avec un ensemble riche de fonctionnalités telles que le data-binding bidirectionnel, l’injection de dépendances, et une suite complète pour le développement d’applications, Angular aide à réduire le temps de développement tout en améliorant la qualité et la maintenabilité du code.

De plus, sa communauté active et ses mises à jour régulières garantissent que le framework reste à la pointe de la technologie et des meilleures pratiques de développement. En somme, Angular est un choix robuste pour les entreprises et les développeurs cherchant à créer des applications web modernes et évolutives.

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

A vos claviers : premier 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’Angular 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.

projet angular 1

Vous devez choisir le format de feuille de style que vous souhaitez utiliser en utilisant les flèches haut ou bas pour vous positionner devant le format puis cliquer sur Entrer.

Le versionning via Git est également initialisé par la même occasion 😉

Mais si vous souhaitez créer directement un projet Angular utilisant SASS, vous devez exécuter la commande suivante :

ng new mon-application-angular --style=scss

Lancez votre éditeur de code préféré (ici VS Code) et ouvrez le dossier de votre application créée sur le bureau de votre PC ou Mac.

Vous pouvez vérifier la structure des dossiers par défaut :

projet angular 5

Vous découvrez un fichier styles.css dans lequel vous pourrez écrire vos styles.

É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 --open

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 :

projet angular 3

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

L’application nous accueille avec cet écran :

projet angular 4

J’espère que cette petite introduction vous aidera à créer votre premier projet Angular.

Réagissez en laissant un commentaire ci-dessous.