Catégorie : Dev. logiciel

Avec ce thème Développement logiciel, je vous invite à apprendre la programmation informatique. Je partage mes découvertes où bouts de codes qui peuvent vous aider dans vos projets de développement d’applications informatiques (sites web, applications mobiles, etc…). Je vous invite à interagir si vous souhaitez partager également vos méthodes ou tout simplement à me questionner. Ensemble apprenons à coder.

Flutter 2.10 ouvre les portes au développement d’applications Windows

12 février 2022 / Claude BUENO / 0 Comments

La dernière version de Flutter est adaptée à Windows et ouvre la porte au développement de nouvelles applications passionnantes sur ce système d’exploitation de PC. Dans ce billet je vous propose de découvrir cette évolution de Flutter.

Windows est peut-être le système d’exploitation le plus populaire pour les PC, fonctionnant sur plus d’un milliard d’appareils dans le monde. Les utilisateurs de Windows ont accès à des millions d’applications disponibles sur le Microsoft Store et sur le web.

Mais les choses sont devenues plus passionnantes. Une évolution majeure de Flutter, la célèbre plateforme de création d’applications de Google, a ouvert aux développeurs une nouvelle voie pour créer des applications pour Windows et offrir des expériences uniques. Voyons comment.

Qu’est-ce que Flutter ?

Flutter est un framework gratuit et open-source de Google permettant de créer de belles applications multiplateformes compilées en mode natif à partir d’un seul code. Il vous aide à concrétiser vos idées en créant des applications qui offrent une expérience enrichissante, quel que soit le système d’exploitation pour lequel vous les développez.

Framework de développement pour mobiles

Flutter a été créé en tant que framework de développement d’applications pour mobiles pour offrir aux développeurs la flexibilité, la facilité et la rapidité de création d’applications natives riches en fonctionnalités pour iOS et Android. Les développeurs Flutter peuvent utiliser le même langage de programmation et une base de code unique pour créer des applications pour iOS et Android.

Tout n’est que widget

Le cœur de Flutter réside dans l’utilisation de widgets. Vous pouvez construire l’ensemble de l’interface utilisateur en combinant différents widgets avec une expérience limitée de la programmation ou du développement. Flutter a ses widgets prêts à l’emploi, de sorte que les widgets OEM ne sont pas nécessaires, et vous pouvez également développer vos widgets.

Langage Dart ?

Les applications Flutter sont construites à l’aide de Dart, le langage de programmation orienté objet de Google. Dart se compile directement en code natif, de sorte que l’application ressemble à un programme Windows typique pour l’utilisateur.

Visualisez en live votre développement

En outre, grâce à la prise en charge du rechargement à chaud avec état, vous bénéficiez de la productivité d’un environnement interactif qui vous permet d’apporter des modifications pendant l’exécution de votre application et de voir immédiatement les résultats.

Si jeune et déjà adopté

Près d’un demi-million d’applications publiées utilisent Flutter, notamment celles de Betterment, BMW et ByteDance. Aujourd’hui, Flutter est l’une des boîtes à outils d’interface utilisateur multiplateforme les plus populaires.

Flutter 2.10 et son adaptation à Windows

Depuis quelque temps déjà, Google envisage d’étendre Flutter des applications mobiles à d’autres plates-formes telles que le bureau et le Web. Flutter 2.10, la version la plus récente, apporte avec elle la version stable du support de Windows. Vous pouvez désormais créer des applications qui fonctionnent sur les mobiles, les PC Windows et le Web, le tout à partir d’un seul code.

Un PC n’est pas un mobile

Windows étant un système d’exploitation conçu pour les PC dotés d’écrans plus grands et d’entrées telles qu’un clavier et une souris, il ne fonctionne pas comme un appareil mobile. De plus, les API utilisées par les applications de bureau sont différentes de celles qui fonctionnent sur Android ou iOS.

S’adapter au PC : ajouter C++

Flutter 2.10 ne s’est pas contenté d’apporter Flutter à Windows, mais il est également adapté à Windows. Pour commencer, Flutter pour Windows combine un framework Dart et un moteur C++. Et tout comme son intégration transparente dans le développement d’interfaces utilisateur mobiles, Flutter 2.10 peut communiquer avec Windows à un niveau natif. Il est responsable de la traduction et de l’envoi de messages Windows pour peindre son interface utilisateur, de la gestion d’événements tels que le redimensionnement des fenêtres, et travaille avec les modalités Windows existantes pour l’internationalisation, telles que les éditeurs de méthodes d’entrée.

Microsoft à la rescousse de Google

Le soutien de plusieurs équipes de Microsoft a été déterminant dans la réalisation de la vision de Flutter pour Windows. L’équipe de conception Fluent a fourni des icônes Windows pour les applications Flutter, tandis que l’équipe d’accessibilité a veillé à ce que Flutter prenne en charge les lecteurs d’écran dès le premier jour. De plus, les partenaires d’outils de Flutter comme FlutterFlow, Realm, Rive, Syncfusion et Nevercode ont également mis à jour leur support Windows.

Ce que les développeurs de Flutter peuvent offrir aux utilisateurs de Windows

En tant que développeur Flutter, vous pouvez désormais publier vos applications sur le Microsoft Store et explorer de nouveaux concepts pour créer des applications natives innovantes pour les utilisateurs de Windows.

Vous disposerez de tous les éléments du cadre Flutter pour créer vos applications, y compris les plugins de prise en charge de Windows tels que l’appareil photo, le sélecteur de fichiers et les préférences partagées. En outre, vos applications seront en mesure d’exprimer magnifiquement le système de conception Microsoft Fluent.

Si vous avez créé des applications mobiles Flutter, vous pouvez utiliser votre expertise et votre expérience pour développer des applications qui offrent des solutions novatrices aux utilisateurs de Windows. Ainsi, à l’avenir, vous pourrez créer des applications visuellement étonnantes qui fonctionnent non seulement sans problème sous Windows, mais aussi sur d’autres appareils de bureau ou mobiles, en plus du Web.

Windows devient passionnant avec les applications Flutter

Avec le lancement de Windows 11, les applications Android ont déjà fait leur entrée sur les PC Windows. Désormais, grâce à la prise en charge de la création d’applications Windows de haute qualité sans compromettre la compatibilité ou les performances, Flutter ouvre la voie à une nouvelle vague de créativité, d’innovation et d’amélioration de l’informatique.

En effet, les utilisateurs de Windows peuvent s’attendre à une expérience plus intelligente et plus passionnante grâce aux applications Flutter créées par les développeurs.

Sources

Merci de votre lecture

Faites-moi savoir si vous rencontrez des difficultés, n’hésitez pas à commenter ci-dessous j’aime vous aider. Si vous avez une suggestion de nouvel article ou tutoriel alors exprimez-vous en commentant.

N’oubliez pas de partager ce tutoriel avec vos amis sur vos réseaux sociaux favoris.

Apprendre à développer avec Flutter

12 novembre 2021 / Claude BUENO / 1 Comment

Pourquoi apprendre Flutter ?

Flutter est un framework open source qui permet de créer des applications mobiles de haute qualité et de haute performance sur les systèmes d’exploitation mobiles Android et iOS. Il fournit un SDK simple, puissant, efficace et facile à comprendre pour écrire des applications mobiles dans le propre langage de Google, Dart.

Quels sont les avantages de Flutter ?

Flutter présente plusieurs avantages par rapport à d’autres frameworks :

Performances élevées : Flutter utilise le langage Dart et compile directement en code natif pour Android et iOS. Cela permet d’obtenir des performances similaires à celles des applications natives.
Widgets personnalisables : Flutter propose une large gamme de widgets personnalisables pour la création d’interfaces utilisateur. Vous pouvez créer des designs uniques et cohérents sur différentes plateformes.
Hot Reload : L’outil Hot Reload de Flutter permet de voir instantanément les modifications apportées au code sans redémarrer l’application. Cela accélère le processus de développement.
Communauté active : La communauté Flutter est dynamique et en croissance constante. Vous trouverez de nombreux tutoriels, packages et exemples pour vous aider dans votre développement.
Plateformes multiples : Avec Flutter, vous pouvez développer pour Android, iOS, le web et même le bureau (Windows, macOS, Linux) à partir d’un seul code source.
Design matériel : Flutter suit les principes du design matériel de Google, ce qui facilite la création d’applications avec une apparence moderne et cohérente.
Intégration native : Si nécessaire, vous pouvez accéder aux fonctionnalités natives des plateformes via des plugins. Flutter offre une excellente intégration avec les API natives.

Flutter offre une expérience de développement rapide, des performances élevées et une grande flexibilité pour créer des applications mobiles modernes et attrayantes.

Sujets couverts dans les différents tutoriels

Je vous propose à travers mon blog quelques tutoriels qui présentent les bases du framework Flutter, l’installation du SDK Flutter, la configuration d’Android Studio pour développer des applications basées sur Flutter, l’architecture du framework Flutter et le développement de tous les types d’applications mobiles à l’aide du framework Flutter.

Flutter – Notions de base

Flutter – Widgets

Flutter – Widgets
Flutter – Widgets avec ou sans état
La classe Container dans Flutter
La classe Scaffold de Flutter
La classe MaterialApp dans Flutter
Widget BottomNavigationBar dans Flutter
Widget ClipRRect dans Flutter
Widget Drawer dans Flutter
Widget ClipRect dans Flutter
Opacity Widget dans Flutter
RotatedBox Widget dans Flutter
Flutter – Widget RichText
Flutter – Widget OctoImage
Flutter – Widget AppBar

Flutter – Composants d’interface utilisateur

Flutter – Conception et animation

Flutter – Formes et gestes

Flutter – Navigation et routage

Flutter – Accessing Device

Flutter – Advance Concepts

Autres tutoriels Flutter

Annonces Flutter

Flutter 2.10 ouvre les portes au développement d’applications Windows

Merci de votre lecture

N’oubliez pas de partager ce tutoriel avec vos amis sur vos réseaux sociaux favoris.

Comment installer Angular 13 – Tutoriel

10 novembre 2021 / Claude BUENO / 0 Comments

Récemment, la version stable d’Angular 13 est sortie ! Dans ce tutoriel, vous allez apprendre à installer Angular 13 sur votre machine, étape par étape, à partir du niveau débutant.

Heureusement, si vous avez déjà de l’expérience avec Angular 10, 11 ou 12, le processus de démarrage d’un nouveau projet Angular 13 est à peu près le même.

Cependant, si vous n’avez aucune expérience préalable avec Angular, ne vous inquiétez pas, l’installation d’Angular 13 est un jeu d’enfant.

Alors, c’est parti…

Prérequis

Vous allez avoir besoin de quelques éléments avant de commencer :

Remarque : Angular 13 nécessite Node.js version 16.x.

Node.js

Node Package Manager (npm)

Pour vérifier si vous avez installé ces deux éléments, rendez-vous sur votre ligne de commande ou votre Terminal et tapez :

node -v
npm -v

Si vous n’avez pas installé Node.js sur votre machine, allez simplement sur nodejs.org et téléchargez la dernière version stable (LTS : Long Terme Support, version stable bénéficiant de support sur une plus longue durée qu’une version standard) ou vous pouvez également utiliser la version actuelle et l’installer sur votre machine.

Étape 1 : Installation d’Angular 13 par le CLI

L’interface CLI (Command Line Interface) d’Angular est le moyen le plus rapide et le plus facile de démarrer un projet Angular 13.

Nous pouvons utiliser Angular CLI pour créer de nouveaux projets, générer du code d’application et du code de bibliothèque, et aussi développer des tâches telles que la génération de composants, la création de bundle d’application, le déploiement, etc…

Nous allons utiliser npm pour installer le CLI Angular globalement à travers la commande suivante :

npm install -g @angular/cli

Une fois installé, vous pouvez accéder à l’outil CLI en tapant ng.

Pour vérifier la version de votre CLI Angular, tapez :

ng -version

Il montrera la version du CLI actuellement installé. Super maintenant nous avons installé le CLI et il est prêt à être utilisé avec Angular.

Étape 2 : Créer un projet vierge dans Angular 13 avec CLI

Maintenant, allez dans le répertoire où vous voulez placer le projet avec CLI et ensuite tapez :

ng new

Il vous demandera des informations sur les fonctionnalités à inclure dans le projet d’application initial. Acceptez les valeurs par défaut en appuyant sur la touche Entrée.

Cela prendra un certain temps, une fois l’installation terminée, allez dans le répertoire du projet et tapez :

ng -v

Il retournera la version actuelle d’Angular que nous avons installée et d’autres informations.

Étape 3 : Lancer l’application

Nous avons maintenant installé Angular 13 et vous pouvez exécuter le projet dans le navigateur en tapant :

ng serve

Et c’est tout ! Maintenant, allez dans votre navigateur et tapez « http://localhost:4200 » et vous serez en mesure d’afficher l’écran suivant.

Si vous rencontrez des difficultés lors de la création d’un projet, essayez de vider le cache en utilisant la commande suivante et réinstallez ensuite Angular CLI

npm cache clean -force

puis exécutez

npm install -g @angular/cli@latest

A lire également,

Merci de votre lecture.

N’oubliez pas de partager ce tutoriel avec vos amis sur Facebook et Twitter.

Crédit photo :
ThisIsEngineering sur Pexels

Flutter : Comment créer une mise en page plein écran ?

11 octobre 2020 / Claude BUENO / 0 Comments

Dans les applications smartphones avec une interface utilisateur moderne, vous voyez beaucoup d’applications mobiles avec un style de conception affichant une image plein écran, et vous devez savoir comment le faire. Je vais vous montrer comment créer une image plein écran dans Flutter à travers ce post.

Image plein écran dans Flutter

Pour y parvenir, vous devrez appliquer la propriété de décoration sur le conteneur. Comme il existe de nombreux types de décoration, nous utiliserons BoxDecoration et appliquerons une DecorationImage avec un BoxFit.cover.

Ainsi, le code final pour créer une image plein écran dans Flutter semble assez simple. Le Container se présente ainsi :

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: NetworkImage(
        'https://images.unsplash.com/photo-1517030330234-94c4fb948ebc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1275&q=80'),
      fit: BoxFit.cover,
    ),
  ),
  child: Center(
    child: Text(
      'Mise en page de base',
      style: TextStyle(
        color: Colors.white,
        fontSize: 30,
      ),
    ),
  ),
),

Dans l’exemple de code ci-dessus, je charge une image depuis une URL et je l’affiche.

Flutter Design plein écran

Comme vous pouvez le constater, la barre en haut de l’écran affiche également l’image de fond. Pour se faire, vous devez utiliser la transparence :

child: AppBar(
  title: Text("Transparent AppBar"),
  backgroundColor: Colors.transparent,
  elevation: 0,
  actions: <Widget>[
    IconButton(
      icon: Icon(Icons.share),
      onPressed: () {},
      tooltip: 'Share',
    ),
  ],
),

En résumé :

Comme nous l’avons vu, c’est assez simple et direct de créer une page intégrant une image plein écran dans Flutter avec quelques lignes de code.

Le code est disponible sur GitLab : Flutter basic layout

Comment installer Python 3 et un environnement de programmation sur Ubuntu ?

12 juillet 2020 / Claude BUENO / 0 Comments

Python est un langage de programmation flexible et polyvalent, avec des points forts en matière de script, d’automatisation, d’analyse de données, d’apprentissage machine et de développement back-end.

Ce tutoriel vous guidera dans l’installation de Python et la mise en place d’un environnement de programmation sur un serveur ou une machine de développement basée sur une distribution Ubuntu.

Étape 1 – Mise à jour et mise à niveau

Connectez-vous à votre serveur Ubuntu en tant qu’utilisateur sudo non root, mettez d’abord votre système à jour et mettez-le à niveau pour vous assurer que la version de Python 3 que vous avez est à jour.

$ sudo apt update
$ sudo apt -y upgrade

Confirmez l’installation si vous y êtes invité.

Étape 2 – Vérification de la version de Python

Vérifiez quelle version de Python 3 est installée en tapant :

$ python3 -V

Vous obtiendrez un résultat similaire à celui qui suit, en fonction de la date à laquelle vous avez mis à jour votre système.

Sortie
Python 3.6.7

Étape 3 – Installer pip

Pour gérer des logiciels pour Python, installez pip, un outil qui vous permettra d’installer et de gérer des bibliothèques ou des modules à utiliser dans vos projets.

$ sudo apt install -y python3-pip

Les paquets Python peuvent être installés en tapant :

$ pip3 install package_name

Ici, package_name peut faire référence à n’importe quel paquet ou bibliothèque Python, comme Django pour le développement web ou NumPy pour le calcul scientifique. Donc si vous souhaitez installer NumPy, vous pouvez le faire avec la commande pip3 install numpy.

Étape 4 – Installation d’outils supplémentaires

Il y a encore quelques paquets et outils de développement à installer pour garantir une configuration robuste de notre environnement de programmation :

$ sudo apt install build-essential libssl-dev libffi-dev python3-dev

Étape 5 – Installer venv

Les environnements virtuels vous permettent d’avoir un espace isolé sur votre machine de développement pour les projets Python. Nous utiliserons venv, qui fait partie de la bibliothèque standard Python 3, que nous pouvons installer en tapant :

$ sudo apt install -y python3-venv

Étape 6 – Créer un environnement virtuel

Vous pouvez créer un nouvel environnement avec la commande pyvenv. Ici, nous appellerons notre nouvel environnement my_env, mais vous pouvez appeler le vôtre comme vous voulez.

$ python3.6 -m venv my_env

Étape 7 – Activation de l’environnement virtuel

Activez l’environnement en utilisant la commande ci-dessous, où my_env est le nom de votre environnement de programmation.

$ source my_env/bin/activate

Votre invite de commande sera désormais préfixée par le nom de votre environnement :

(my_env) claude@ubuntu:~/environments$

Étape 8 – Tester l’environnement virtuel

Ouvrez l’interpréteur Python :

(my_env) claude@ubuntu:~/environments$ python

Notez que dans l’environnement virtuel Python 3, vous pouvez utiliser la commande python au lieu de python3, et pip au lieu de pip3.
Vous saurez que vous êtes dans l’interpréteur lorsque vous recevrez la sortie suivante :

Python 3.6.5 (par défaut, 1er avril 2018, 05:46:30)
[GCC 7.3.0] sur linux
Tapez "aide", "copyright", "crédits" ou "licence" pour plus d'informations.
>>>

Maintenant, utilisez la fonction print() pour créer le traditionnel programme « Hello, World » :

$ print("Bonjour, le monde !")

Sortie
Bonjour, le monde !

Étape 9 – Désactivation de l’environnement virtuel

Quittez l’interprète Python :

>>> quit()

Ensuite, quittez l’environnement virtuel :

(my_env) claude@ubuntu:~/environments$ deactivate

Python : Comment créer votre première application ?

29 février 2020 / Claude BUENO / 2 Comments

Je vous propose de vous montrer à travers ce premier billet à Python une rapide introduction à ce langage accompagné d’un didacticiel pour démarrer et créer votre première application Python « Hello World! » à l’aide d’Eclipse sur un environnement macOS (le principe reste quasiment le même sous Linux ou Windows).

Introduction et premiers pas avec Python

Python est un langage de programmation né en 1989 dont l’auteur est Guido van Rossum qui a profité de ses congés de Noël pour créer les bases de ce langage. Il s’agit d’un langage interprété fonctionnant sur la plupart des plateformes notamment Linux, Windows et macOS.

Python est utilisé dans de nombreux projets d’applications ou comme langage de script pour des applications web. Il est également très présent dans les domaines scientifiques pour réaliser des calculs et il est utilisé dans de nombreux logiciels de modélisation.On le rencontre également dans le développement de jeux vidéo.

Ces dernières années, Python revient en force car il est utilisé dans l’écriture de tâches dans le domaine de l’intelligence artificielle.

Préparer l’environnement et créer votre premier projet

En natif, Eclipse n’intégrè pas d’environnement de développement pour Python mais nous allons installer une extension très populaire appelée PyDev.

Je vous propose les étapes suivantes :

Mettre à jour la version de Python ;
Configurer Eclipse pour Python ;
Créer un projet Python.

1. Mettre à jour la version de Python

Par défaut, Python est déjà installé sur macOS et nous allons vérifier la version déjà présente sur le système. Tapez la commande suivante pour lancer la vérification :

Au moment de ce billet, mon Mac dispose de la version 2.7.10 de Python.

Nous allons nous rendre sur le site officiel de Python pour télécharger la dernière version :

Lancer l’installeur de Python (ici en version 3.7.0). Il se peut que votre Mac vous demande votre identifiant et mot de passe pour procéder à cette installation. Puis laissez-vous guider en déroulant les différentes étapes d’installation :

Un fois l’installation terminée, vérifier que Python 3.7.0 est bien présent sur votre Mac via la commande suivante :

Nous voilà équipé de la dernière version de Python et nous allons pouvoir passer à la configuration de l’éditeur de code Eclipse pour le langage Python.

2. Configurer Eclipse pour Python

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 rechercher le plugin PyDev :

Cliquer sur « Install Now » et dérouler toutes les étapes de l’installation. Un redémarrage d’Eclipse est proposé pour la prise en compte totale de l’extension PyDev.

Vous voilà prêt pour créer votre premier projet Python avec Eclipse.

3. Créer un projet Python

Nous démarrons par la création d’un nouveau projet Python en cliquant sur File -> New

Dans la liste des types de projets possible, il n’y a pas de « PyDev Project » : sélectionnez « Other » pour obtenir l’écran suivant :

PS : pour vos prochains projets Python, « PyDev Project » apparaitra directement lorsque vous passerez par le menu File -> New.

Une fois le projet PyDev créé nous allons configurer l’interpréteur Python en passant par les Préférences d’Eclipse.

Vous devez cliquer sur « New » pour ajouter l’interpréteur Python3.

Puis nous allons pouvoir ajouter un module Python à notre projet qui va contenir les lignes de codes :

Nommez le module « HelloWorld » :

Ajouter la ligne de commande :

print("Hello World")

Puis pour exécuter le programme, passer par Run as -> Python Run

Le code Python est interprété sans erreur et retourne dans la console « Hello World » :

Nous avons vu comment configurer votre environnement avec la dernière version de Python sur votre macOS puis nous avons configuré Eclipse avec l’extension PyDev pour pouvoir créer votre première application « Hello World ».

J’espère que ce billet vous a aidé à démarrer avec Python.

N’hésitez pas à laisser un commentaire 😉

Python : un mémento pour les débutants

29 février 2020 / Claude BUENO / 0 Comments

Python est un langage de programmation moderne et élégant, aussi performant pour le développement d’applications web complexes que pour la réalisation de scripts système ou l’analyse de fichiers XML.

Je vous propose ci-dessous un mémento Python fournie par Dave Child contenant à la fois des variables intégrées du système et du système d’exploitation, ainsi que des méthodes standards pour travailler avec des listes, des fichiers et des chaînes.

Python : Comment créer votre première application ?

Mise à jour : 30 mars 2018

PyCharm : le meilleur éditeur pour Python

19 février 2020 / Claude BUENO / 4 Comments

Après un premier billet montrant comment créer votre première application Python avec Eclipse, je vous propose de vous présenter Pycharm, le meilleur éditeur Python.

A travers cet article, je vous présente l’environnement de développement intégré PyCharm, qui peut être utilisé pour développer des applications professionnelles utilisant le langage de programmation Python.

Python est un excellent langage de programmation car il est vraiment multi-plateforme. Il peut être utilisé pour développer une application unique qui fonctionnera sur les ordinateurs Windows, Linux et Mac sans avoir à recompiler de code.

Je vous propose les étapes suivantes :

Installation et utilisation de JetBrains Toolbox ;
Installation et configuration de PyCharm Community ;
Création d’un projet Python avec PyCharm ;
Exécution et test de votre projet ;
Ajout d’un plugin PyCharm (minimap).

Installation et utilisation de JetBrains Toolbox

JetBrains met à disposition JetBrains Toolbox, un utilitaire qui permet de faciliter l’installation et la mise à jour des applications de cette entreprise réputée pour la création de IntelliJ, le meilleur éditeur de code Java qui a su mettre au second plan Eclipse (Historiquement, l’EDI Java le plus utilisé au monde).

Déplacer l’icône « JetBrains Toolbox » sur l’icône « Applications » pour lancer la procédure d’installation.

Installation et configuration de PyCharm Community

Création d’un projet Python avec PyCharm

Exécution et test de votre projet

Ajout d’un plugin PyCharm (minimap)

Angular : Comment créer des graphiques dynamiques Highcharts ?

8 février 2020 / Claude BUENO / 0 Comments

Avec ce tutoriel, je vais vous montrer comment utiliser Angular et Highcharts pour créer une simple page web qui génère un graphique. Vous pouvez utiliser cette méthode pour vos projets Angular de tableaux de bord ou tout autre applications faisant appel à des graphiques pour visualiser des données.

Dans un précédent billet, je vous avais présenter comment créer votre premier projet Angular. Nous allons utiliser la même méthode en passant par la ligne de commande. Je vous invite à consulter mon précédent billet pour vous assurer que vous avez bien les prérequis d’installer sur votre machine (npm et node).

0. Cas d’usage

Dans le cadre d’un projet permettant de présenter des indicateurs de suivi de pilotage d’activité, je cherchais à créer un tableau de bord avec des visuels permettant de suivre les évolutions de plusieurs indicateurs pour animer des instances COPRO et COPIL. J’ai testé plusieurs bibliothèques permettant de créer des graphes et mon choix s’est arrêté sur Highcharts.

Après avoir expérimenté une première version de ce tableau de bord en version HTML, CSS et JavaScript, j’ai tenté d’implémenter Highcharts avec Angular. Voici le partage des étapes que j’ai utilisé pour afficher un graphique avec Angular dans une page web.

1. Créer le projet Angular

Rendez-vous dans le dossier dans lequel vous souhaitez créer votre projet pour configurer l’environnement de développement. D’abord, nous installons l’Angular CLI pour utilise la ligne de commande :

sudo npm install -g @angular/cli

Ensuite nous créons le projet Angular appelé dans mon exemple « angular-highcharts » :

ng new angular-highcharts

Une fois le projet créé, nous entrons dans le dossier contenant le projet :

cd angular-highcharts/

Pour tester le projet, nous allons lancer le serveur avec l’option permettant de lancer le navigateur web par défaut sur votre machine pour visualiser le projet :

ng serve --open

Le serveur web local s’ouvre sur le port 4200 et bingo votre projet apparait sous forme d’une page de test par défaut :

2. Adapter le projet Angular

Dans le cadre de ce tutoriel, nous allons créer un composant permettant d’afficher le graphe mais libre à vous d’organiser votre projet différemment.

Maintenant, créons le composant que j’ai appelé « view-graph » en utilisant cette commande :

ng generate component view-graph

Le nouveau composant, view-graph, se trouve sous /src/app/ et se compose de quatre fichiers différents :

.CSS : Tous les CSS pour les styles doivent aller dans ce fichier.
.HTML : Ce fichier comprend le modèle HTML et toutes les balises HTML.
TS : Ce fichier comprend tout le code application, la logique métier, les appels API et la manipulation des données.
SPEC.TS:Tous les tests unitaires vont dans ce fichier.

Nous modifions « app component » pour appeler le nouveau composant « view-graphe ».

Pour cela nous retirons le contenu par défaut de app/app.component.html et ajoutons le nouveau composant :

<div id="main-head" style="text-align:center">
  <h1>
    {{ title }}!
  </h1>
  <app-view-graph></app-view-graph>
</div>
<router-outlet></router-outlet>

3. Intégrer Highcharts au projet Angular

Installons maintenant dans notre projet Angular le module Highcharts en lançant la commande :

npm install highcharts

Modifions view-graph.component.ts pour importer la librairie Highcharts :

import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';

declare var require: any;


@Component({
  selector: 'app-view-graph',
  templateUrl: './view-graph.component.html',
  styleUrls: ['./view-graph.component.css']
})
export class ViewGraphComponent implements OnInit {
  public options: any = {
    Chart: {
      type: 'area',
      height: 700
    },
    title: {
      text: 'Evolution de la population'
    },
    credits: {
      enabled: false
    },
    xAxis: {
      categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
      tickmarkPlacement: 'on',
      title: {
          enabled: false
      }
  },
    series: [{
      name: 'Asia',
      data: [502, 635, 809, 947, 1402, 3634, 5268]
  }, {
      name: 'Europe',
      data: [163, 203, 276, 408, 547, 729, 628]
  }, {
      name: 'America',
      data: [18, 31, 54, 156, 339, 818, 1201]
  }]
  }

  constructor() { }

  ngOnInit() {
    Highcharts.chart('container', this.options);
  }

}

N’oublions pas de modifier view-graph.component.html pour ajouter une div permettant d’afficher le graphe sur la page web :

<p>view-graph works!</p>

<div id="container"></div>

Il ne reste plus qu’à visualiser le résultat dans le navigateur :

Félicitations ! Si vous avez suivi toutes les étapes de ce tutoriel, vous pouvez maintenant créé une application Angular affichant un graphique qui exploite la puissance de Highcharts. N’hésitez pas à tester d’autres type de graphiques car le choix est très vaste et vous trouverez très certainement celui qui répondra à vos besoins.

J’espère que ce projet vous aidera à mieux comprendre comment construire une application Angular et comment intégrer la bibliothèque Highcharts. N’hésitez pas à ajouter vos commentaires ou questions ci-dessous, je me ferai un plaisir d’y répondre.

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

2 décembre 2019 / Claude BUENO / 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

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…