Ce site utilise des cookies à des fins d’analyse et pour améliorer votre expérience. En cliquant sur Accepter, vous consentez à notre utilisation des cookies. En savoir plus dans notre politique de confidentialité.

Année : 2019

todo list app claudebueno

Application mobile : Liste de tâches

31 décembre 2019 / / 2 Comments

En cette fin d’année, pendant mes congés, je décidé de suivre le cours « The Complete Flutter App Development Course for Android, iOS » chez Udemy.

Comme je me suis bien amusé pendant cette formation je vous livre le résultat : un projet d’application mobile de prise de notes permettant de mettre en œuvre une base locale SQFLite (exercice à but de formation et non publiée dans les stores Apple et Android).
Suivant l’avancée de ce projet, je pourrai un jour la publier sur Google Play (Android) ou l’App Store (iPhone ou iPad).
Stay tuned 😉

Présentation de l’application mobile Liste de tâches

L’application mobile permet de gérer une liste de tâches facilement repérable par priorité.
Elle utilise une base de données locale SQFLite permettant de stocker vos tâches composées d’une description et de la date de création.
Vous pouvez également supprimer les tâches qui ne vous conviennent plus ou que vous avez réalisé (évolution possible : conserver les tâches achevées en mémoire).

News de l’application mobile Liste de tâches

  • 28 décembre 2019 : Conception de la logique en relation avec une base de données locale SQFLite pour sauvegarder et conserver en mémoire les tâches. Dans cette itération, j’ai également créé le design graphique.

Les sources du projets sont disponibles librement sur mon compte GitLab

 

 

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

2 décembre 2019 / / 1 Comment

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…

 

850x567 claudebueno flutter dev

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

1 novembre 2019 / / 0 Comments

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.

 

Développeur : comment décrocher le job de tes rêves ?

12 octobre 2019 / / 0 Comments

En tant que développeur, tu te demandes comment faire pour décrocher le job de tes rêves. La plupart du temps, cette réflexion apparaît lorsque tu te trouves dans une situation qui ne te convient pas. Après tout, l’herbe ne serait-elle pas plus verte ailleurs ?

Avant de sauter le pas ou de claquer la porte de l’entreprise qui t’emploie, je te propose de passer en revue quelques points qui alimenteront ta réflexion pour aller chercher une belle opportunité professionnelle.

Tes motivations tu découvriras

Dans notre milieu de la prestation en ingénierie des technologies de l’information, nous avons tous entendu parler de l’aventure d’un collègue développeur qui a décroché une superbe mission, bien rémunérée avec des conditions de travail de rêve et une “stack techno de ouf” !

C’est sûrement vrai, mais avant de t’emballer et de suivre son exemple, il convient que tu te questionnes sur tes motivations personnelles car, en tant qu’individu unique, tes motivations et ta situation ne sont peut-être pas comparables et identiques aux siennes…

Les technos

Ce que cherchent les entreprises est de recruter un développeur qui détient un certain niveau d’expertise sur une stack technologique pour réaliser le projet dans les meilleures conditions de délais, de qualité et de budget.

D’autre part, tous les langages et les stacks technologiques ne sont pas au même niveau sur le marché de l’emploi et suivant les régions géographiques.

Aussi, ce point est le premier élément que tu dois prendre en considération. Tu dois être particulièrement réaliste sur le niveau de tes compétences sur la stack technos qui est attendue. Avoir 3 ou 4 années d’expérience sur un langage sur des projets d’entreprise avec des interaction avec le reste du SI n’a pas la même « valeur » qu’une mission de développement d’une application dans une startup.

Les conditions

Ton job de rêve doit être associé à des conditions de rêve… Mais au-delà des conditions financières, les conditions de l’environnement de travail sont à prendre en compte. Car même si ta rémunération annuelle peut paraitre confortable pour Monsieur Toutlemonde, tu peux très bien vouloir aller voir ailleurs…

Financières

Selon la région géographique où tu habites, les niveaux de rémunérations sont plus ou moins avantageuses. Par exemple, en région parisienne, les niveaux de rémunération sont 15% à 20% supérieurs à celles proposées en région. Mais les frais de vie courante sont aussi supérieurs (transport, logement, alimentation, …) : à toi de positionner le curseur suivant ton niveau d’acceptance.

Environnement de travail

Au-delà des aspects financiers, ton environnement de travail est également à prendre en compte.

En premier, l’organisation de l’espace de travail : tu peux très bien préférer intervenir dans un espace délimité comme un un bureau ou refuser l’intervention dans un openspace trop grand. Ce dernier ne te permettant pas d’assurer une certaine concentration, tu peux préférer un openspace à taille humaine dédié à un projet en particulier.

Par rebond aux lieux de travail, si tu as un logement équipé d’un espace dédié, tu peux aussi profiter du télétravail si tu es convaincu par ce mode de fonctionnement. A toi de voir quel part de ce temps tu veux consacrer au travail depuis la maison.

L’évolution

Autant les conditions financières et l’environnement de travail répondent à des exigences « matérialistes », les conditions d’évolution impliquent que tu prennes du recul pour imaginer la suite que tu veux donner à ton parcours professionnel.

Quel chemin veux-tu prendre ? Est-ce que tu souhaites évoluer d’un point de vue technologique, vers la gestion d’équipe, vers une mission Lead Tech, etc…

Comment te vois-tu dans 1, 2 ou 5 années, voir plus loin si tu as une vision claire de tes objectifs.

Ce point sera potentiellement déterminant lorsque tu rencontreras des chargés de recrutement car si tu arrives à te projeter, cela démontrera pendant l’entretien que tu as une vision claire du chemin à parcourir tout en donnant des perspectives pour ton intégration.

En gros, est-ce que ton profile correspond aux attentes de l’entreprise que tu cibles. Et en retour, est-ce que l’entreprise est en capacité de te donner les moyens et les missions répondant à tes ambitions d’évolution.

Tes compétences tu cultiveras

Compétences techniques

Le premier point qui semble important mais qui ne va pas toujours de soi est que tu dois être réaliste par rapport à tes compétences. Tu dois pouvoir isoler les langages sur lesquels tu as une expérience significative ou qui ton permis de progresser. Cette liste te permet de construire une sorte de portfolio de sujets/compétences qui alimente ta base expérience.

L’amélioration des compétences techniques passe également par des projets personnels ou des sujets d’exploration pour tester un langage ou un framework (boite à outils) que tu ne connais pas encore.

Par exemple, un développeur qui ne fait que du pur PHP peut s’intéresser au framework Symfony ou se lancer dans l’exploitation d’un CMS comme Drupal ou PrestaShop.

Les autres compétences

Même si les compétences techniques ont un poids important pour le recrutement, les chargés de recrutement ont de plus en plus tendance à privilégier d’autres critères de choix : les soft skills.

Ces dernières sont principalement axées sur les compétences comportementales et les traits de personnalité. Elles revêtent une importance croissante car en tant que développeur tu ne travailles pas seul. A minima, tu seras en relation avec les autres membres de l’équipe, les managers et parfois en lien direct avec le client. Donc ton comportement, ta manière de t’exprimer oralement ou par écrit ont autant d’importance que de savoir écrire du code qui fonctionne.

On y retrouve les compétences humaines qui ne s’apprennent pas à l’école :

  • Ouverture d’esprit,
  • Confiance en soi,
  • Sens des relations interpersonnelles,
  • Sens des responsabilités,
  • Adaptation au changement.

Même au moment d’un entretien orienté technique, ces éléments sont aussi analysés au travers d’un échange plus ou moins formel entre pairs.

Ces compétences s’acquièrent et entretiennent tout au long de ta vie.

Ton plan d’action tu élaboreras

Pour élaborer ton plan d’action il faut d’abord que tu détermines tes objectifs en tenant compte de tes motivations que tu auras su au préalable identifier. Ces objectifs doivent se décomposés en horizons temporels : court terme, moyen terme et long terme sans pour autant te mettre la pression évidemment mais en restant méthodique.

Être proactif

Je ne t’apprends rien si je te dis que l’information (la data) est le nouveau pétrole de notre époque. Et s’est bien pour ça que toutes les informations que tu peux capter peuvent t’ouvrir les portes d’une nouvelle opportunité professionnelle.

Être proactif veut dire qu’au regard de tes objectifs, tu mets à profit ces informations pour adapter ou faire évoluer tes compétences pour répondre au besoin que tu pressens. A ne pas négliger les possibilités de poste ou de nouvelle mission que peut offrir ou créer ton employeur actuel.

Par exemple : ton entreprise a décroché un nouveau contrat pour réécrire avec une stack technique récente des fonctionnalités vente d’une application bancaire. Le fait de disposer de ces compétences et l’envie de travailler sur ce projet peuvent te permettre de proposer tes services au responsable du projet interne.

Être curieux

Rester ouvert au marché

Si tu disposes d’un outil de veille, comme un agrégateur de flux RSS, tu peux y ajouter des sites à suivre qui concerne les tendances du marché de l’emploi.

Par exemple, le site Developpez.com présente régulièrement des actualités autour des langages qui ont la côte ou les valeurs sûres.

Les Jobboard publient également des articles pour constituer son CV et les bonnes pratiques lors des entretiens. Le site Glassdoor propose des grilles de salaire par métier et par région.

Analyse de la situation

En tenant compte du marché, tu peux en complément analyser ta situation personnelle et déterminer si tu as déjà le poste de tes rêves ou si tu dois engager un plan d’action pour en changer et sous quel délai. C’est bien l’évolution de ta situation qui va déterminer ton passage à l’action.

Laisser une place au hasard

Un plan d’action ne doit pas prévoir toutes les étapes dans le détail et une part de hasard doit y trouver sa place.

Faire de la veille, assister à des meetups, suivre des formations en ligne ou dévorer les TEDx, participe à maintenir ce que j’appelle un « fil rouge d’ouverture d’esprit ». Et bien souvent ces bulles t’amènent à faire des rencontres, à pécher de nouvelles idées, à voir les choses sous un autre point de vue.

Ce hasard ne se provoque pas, il se cultive par des petites actions permettant de donner de l’oxygène à ta réflexion sur ta situation et d’ouvrir d’autres opportunités.

Conclusion

Cette conclusion t’appartiens au regard de l’article que je viens de te proposer.

 

 

 

 

 

 

Les formations Développeur Frontend à suivre chez OpenClassrooms

12 juillet 2019 / / 1 Comment

Dans le développement web, on distingue le fontend qui utilise le navigateur pour interpréter le code informatique et le backend qui utilise le serveur où sont stockés les fichiers informatiques. Les technologies serveur peuvent (mais ce n’est pas obligatoire) être en interrelations avec des bases de données.

Ces deux manières de développer ne sont pas en opposition mais viennent bien souvent se compléter sans être obligatoires. Vous pouvez disposer d’un site internet développé en HTML et CSS qui se suffit à lui-même sans avoir besoin de développer quoi que ce soit coté serveur. Dans ce cas, on est face à un site « vitrine » limité en fonctionnalité. Les développements coté serveur viennent enrichir les possibilités de base du site HTML-CSS comme par exemple un espace membres ou un blog avec commentaires.

Ces deux cotés du développement se retrouvent dans le profil des codeurs qui interviennent sur les projets web. Aussi on parle de développeur frontend qui utilisent les langages HTML, CSS, JavaScript et jQuery et les développeurs backend qui utilisent des langages tels que PHP, MySQL, C+, C# et bien d’autres…

Formation OpenClassrooms avec Mathieu Nebra

Dans ce billet, je souhaite faire un zoom sur les formations mises à disposition sur OpenClassrooms pour les développeurs frontend que je suis depuis quelques temps. En effet, sur le site, anciennement le SiteduZero a l’avantage de présenter les choses de manière compréhensive par le plus grand nombre. Le ton est détendu, un peu comme si le formateur s’adressait directement à son interlocuteur.

Ci-dessous, je vous présente ma sélection de formation pour les développeurs frontend :

Apprenez à créer votre site web avec HTML5 et CSS3

Très franchement sans de bonnes bases en HTML et CSS vous n’irez pas bien loin dans le développement de sites web. Alors autant démarrer tout de suite sur de bonnes bases et utiliser toute la richesse de HTML5 et CSS3.
Avec l’avènement de la navigation mobile, HTML5 et CSS3 est le couple qui vous permet de développer pour ces supports. Ils possèdent des fonctions qui n’existent pas dans les versions précédentes. Aussi, bien les maitriser vous mets le pied à l’étrier pour aller vers l’avenir du web.
http://fr.openclassrooms.com/informatique/cours/apprenez-a-creer-votre-site-web-avec-html5-et-css3

Dynamisez vos sites web avec Javascript !

JavaScript permet d’apporter un peu plus de contrôle dans les informations communiqués par le visiteur du site. Par exemple, il est possible d’analyser les saisies lors du remplissage d’un formulaire de contact pour que l’adresse e-mail renseignée soit bien une adresse e-mail. La richesse de JavaScript va bien au-delà de cet exemple et vous trouverez bien d’autres applications en suivant cette formation en ligne.
http://fr.openclassrooms.com/informatique/cours/dynamisez-vos-sites-web-avec-javascript

Simplifiez vos développements JavaScript avec jQuery

jQuery est comme JavaScript un langage de script et vient enrichir le site internet. Ce langage est également utilisé pour le développement d’applications ou de sites mobiles multiplateforme (iOS, Android ou Windows Phone…).
http://fr.openclassrooms.com/informatique/cours/simplifiez-vos-developpements-javascript-avec-jquery

Prenez en main Bootstrap

Bootstrap est un framework HTML, CSS et JavaScript qui permet d’utiliser une base pour vos développements. Un framework est une boite à outil qui emmène avec lui des mises en forme et le système de grilles permet de mettre en place des designs adaptatifs au terminal qui consulte le site web (smartphone, tablette et ordinateur). C’est ce que l’on nomme également le Responsive Web Design.
http://fr.openclassrooms.com/informatique/cours/prenez-en-main-bootstrap

Bonnes formations !

850x567 claudebueno appli mobile

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

12 juillet 2019 / / 2 Comments

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/

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

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.

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

Lancer l’application PhoneGap et ouvrez votre projet d’application mobile.

Démarrer PhoneGap Mobile

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

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

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.

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.

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 :

pexels olia danilevich 4974915

10 raisons de choisir Kotlin pour développer vos applications

14 avril 2019 / / 1 Comment

Kotlin est un langage de programmation développé par JetBrains, la même société qui a construit des IDE de classe mondiale tels que IntelliJ IDEA, PhpStorm, PyCharm, ReSharper, etc.

Il fonctionne sur la machine virtuelle Java (JVM) et peut également être compilé en JavaScript et en code machine.

Dans ce tutoriel, je vais vous donner un bref aperçu de Kotlin et de ses fonctionnalités.

Pourquoi Kotlin ?

Dans le monde d’aujourd’hui, où nous avons une douzaine de langages de programmation pour chaque tâche possible, voici quelques raisons de choisir Kotlin comme langue principal pour développer votre prochaine application.

1. Typage statique

Kotlin est un langage de programmation à typage statique. Cela signifie que le type de chaque variable et expression est connu au moment de la compilation.

L’avantage du typage statique est que le compilateur peut valider les appels de méthodes et l’accès aux propriétés sur les objets lors de la compilation, et éviter ainsi de nombreux bugs anodins qui risqueraient autrement de se produire au moment de l’exécution.

Bien que Kotlin soit un langage à typage statique, il n’est pas nécessaire de spécifier explicitement le type de chaque variable que vous déclarez. La plupart du temps, Kotlin peut déduire le type d’une variable à partir de l’expression d’initialisation ou du contexte environnant. Ceci est appelé inférence de type. Nous reviendrons plus tard sur cette notion.

2. Concis

Kotlin est concis. Cela réduit considérablement la quantité de code passe-partout que vous avez écrit tout le temps dans d’autres langages orientés objets comme Java.

Il fournit des expressions riches pour l’exécution de tâches courantes. Par exemple, vous pouvez créer une classe POJO avec les méthodes Getters, Setters, Equals(), hashCode() et toString()

data class User(val name: String, val email: String, val country: String)

3. Sécurisé

Kotlin est sécurisé. Il évite les exceptions NullPointerExceptions les plus redoutées et gênantes en prenant en charge la nullabilité dans le cadre de son système de types.

Cela fonctionne comme ceci – Chaque variable de Kotlin est non nulle par défaut:

String str = "Hello, World" // Type non nul (ne peut contenir une valeur nulle)
str = null // Erreur du compilateur

Pour permettre à une variable de contenir une valeur null, vous devez explicitement la déclarer comme nullable :

String nullableStr? = null // Nullable type (peut être nul)

Puisque Kotlin connait quelles variables ont la valeur nullable et lesquelles ne le sont pas, elle peut détecter et interdire les appels non sécurisés au moment de la compilation, ce qui entraînerait sinon une exception NullPointerException au moment de l’exécution.

println(nullableStr.length())   // erreur du compilateur

Kotlin n’autorise pas la méthode call length() sur la variable nullableStr car l’appel n’est pas sécurisé et peut conduire à NullPointerException.

Cependant, si vous ajoutez une vérification NULL, l’appel de la méthode est autorisé.

if(nullablStr != null) {
    println(nullableStr.length())
}

Remarquez comment Kotlin oblige les développeurs à écrire du code sécurisé en distinguant les types nullables et non nuls.

4. Explicite

Kotlin est explicite. Il fera ou permettra des choses seulement si vous lui dites de le faire. L’explicite est considéré comme une bonne chose. Être explicite signifie être précis sur vos choix de conception et ne rien cacher aux lecteurs ou aux consommateurs de votre code.

Voici quelques exemples d’explicités à Kotlin :

  • Kotlin n’autorise pas les conversions de types implicites, par exemple, int en long ou float pour double. Il fournit des méthodes comme toLong() et toDouble() pour le faire explicitement.
  • Toutes les classes de Kotlin sont finales (non héritables) par défaut. Vous devez explicitement marquer une classe comme étant ouverte pour permettre à d’autres classes d’en hériter. De même, toutes les propriétés et fonctions membres d’une classe sont finales par défaut. Vous devez explicitement marquer une fonction ou une propriété comme étant ouverte pour permettre aux classes enfant de la remplacer.
  • Si vous substituez une fonction ou une propriété de classe parent, vous devez l’annoter explicitement à l’aide du modificateur override.

5. Facile à apprendre

Kotlin a une courbe d’apprentissage très faible. La syntaxe de base ressemble beaucoup à Java. Si vous avez une petite expérience de Java ou de tout autre langage orienté objets, vous pourrez vous familiariser avec Kotlin en quelques heures.

6. Capacités fonctionnelles et orientées objet

Kotlin possède à la fois des fonctionnalités fonctionnelles et orientées objet. Il dispose d’un riche ensemble de fonctionnalités permettant de prendre en charge la programmation fonctionnelle, notamment les types fonctionnels, les expressions lambda, les classes de données, etc.

7. Entièrement interopérable avec Java

Kotlin est 100% interopérable avec Java. Vous pouvez facilement accéder au code Java à partir de Kotlin et inversement. Vous pouvez utiliser Kotlin et Java dans le même projet sans aucun problème. Cela facilite l’adoption de Kotlin dans vos projets Java existants.

8. Excellent outillage

Kotlin dispose d’un excellent support d’outillage. Vous pouvez choisir n’importe quel IDE Java : IntelliJ IDEA, Eclipse, Android Studio.

De plus, vous pouvez également télécharger le compilateur autonome de Kotlin et exécuter le code Kotlin à partir de la ligne de commande.

9. Construire des applications pour Serveur, Android, Navigateur et Desktop

Vous pouvez utiliser Koltin pour créer des applications pour une large gamme de plates-formes, notamment Serveur, Android, navigateurs et Desktop.

  • Android dispose d’un support officiel pour Kotlin.
  • Du côté du serveur, vous pouvez utiliser Kotlin avec le framework Spring, qui offre un support complet pour Kotlin dans Spring version 5.
  • Kotlin peut également être compilé en JavaScript et en code machine.

10. Gratuit et Open Source

Le langage de programmation Kotlin, y compris le compilateur, les bibliothèques et tous les outils, sont entièrement gratuits et open source. Il est disponible sous licence Apache 2 et le projet complet est hébergé sur Github.

 

Développer des applications avec javascript

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

12 avril 2019 / / 0 Comments

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>

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);
}

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);
}

 

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.

 

Développer des applications avec javascript

JavaScript : Comment trier une liste ?

10 mars 2019 / / 4 Comments

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 tri.
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 tri par age et le tri 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">Par Prénom</button> 
<button type="button">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);
}

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 tri.
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 tri 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;
        }
        return 0;
    });
    display(intro);
}

Pour donner un coup de main à la fonction de tri, on passe par une transformation des lettres en majuscules (tous les mots sont logés à la même enseigne…).

reTada ! Quel beau tri 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.

850x567 claudebueno dev flutter ia

Développeur, comment progresser dans votre métier ?

7 mars 2019 / / 0 Comments

À quoi les développeurs doivent-ils penser pour progresser dans leur métier alors que les Technologies de l’Information continuent d’évoluer à un rythme incroyable ?

Concentrez-vous à la fois sur les compétences techniques et non techniques. Vous aurez besoin des deux car l’évolution continue. Comme pour toute discipline qui exige un niveau d’excellence, vous devez aller au-delà de ce que vous avez appris à l’école.

C’est particulièrement vrai en informatique étant donné que tant de choses ont changé depuis que vous êtes sorti de l’école. Les principes de gestion des données et les coûts de stockage ont basculés avec l’avènement du big data et du cloud.

Les développeurs de logiciels doivent également sensible au marketing d’entreprise. Il doivent, par exemple, se poser les questions suivantes :

  • Quel est le problème que j’essaie de résoudre ?
  • Comment ce que je construis sera monétisé ?

Comment définir les priorités pour être un meilleur développeur ?

  • Aiguisez votre esprit et vos compétences ;
  • Soyez focus sur la sécurité. Ceci est important pour vous et votre entreprise. La gestion des identités est un problème important aujourd’hui ;
  • Lancez-vous dans l’apprentissage de nouvelles langues pour rester pertinent ;
  • Il est difficile de suivre toutes les évolutions, mais restez sur vos gardes, ayez faim et réfléchissez à ce que vous pouvez faire aujourd’hui que vous ne pouviez pas faire hier.

Beaucoup de portes s’ouvrent vers de nouveaux univers. Décidez quelles sont celles qui valent la peine d’être ouvertes.

Que pensez-vous de la construction d’un produit destiné aux développeurs ?

Voici une opportunité pour aider les développeurs à se mettre à l’avant-garde. AWS Lambda et serverless déploient le code dans un paradigme totalement différent. Les développeurs d’applications doivent continuer à apprendre pour suivre le rythme des changements. Chaque personne a sa propre façon de consommer de l’information – Elle doit apparaitre aussi facile d’accès et attrayante que possible.

Où obtenir des informations sur ce qui se passe dans l’informatique ?

  • Passer du temps en dehors de 9h à 17h pour explorer et essayer de nouvelles choses ;
  • Juste essayer des choses. Il y a beaucoup de modes. Il faut essayer de comprendre ce qui est réel et ce qui relève du buzz ;
  • Comme la plupart des développeurs, qui ont travaillés avec la technologie Flash pour concevoir des animations ou des mondes en 3D. Des mois ont été investit en apprentissage et Adobe a fini par tuer son produit. Steve Jobs a déclaré la guerre à Flash et à donner le coup de grâce en interdisant Flash dans les produits Apple. Vous devez être prêt à changer d’orientation et à reconstruire des applications.

C’est pourquoi j’aime l’open source.

Il y a moins d’occasions de se faire brûler les ailes. Lorsque vous mettez fin à la vie d’un produit ou d’une technologie, vous laissez les développeurs sur le carreau.

Quels sont les sujets inspirants et motivants ?

  • Certaines des meilleures solutions open source ont été construites parce qu’il y avait une passion et un problème à résoudre plutôt qu’un désir de gagner de l’argent ;
  • L’humain doit être placé au cœur de chaque application (comment mon application peut aider mon prochain ?) ;
  • Plus le développeur peut se concentrer sur UX et UI, meilleure sera l’application (est que mon application est intuitive et facile à utiliser ?).