ANGULAR en moins de 128 mots – TypeScript – Partie 3

TypeScript est un langage à typage fort typé, orienté objet et compilé. TypeScript est un sur-ensemble typé de JavaScript compilé en JavaScript. TypeScript est JavaScript et quelques fonctionnalités supplémentaires.

La documentation de typescript est disponible sur ce lien : https://www.typescriptlang.org/docs/home.html

Installation de TypeScript :

sudo npm install -g typescript

Execution du compilateur TypeScript :

tsc --version

Création d’un premier exemple TypeScript :

Création du fichier test.ts :

function salutation(nom) {
    console.log("Bonjour, " + nom);
}

var nomUtilisateur = "John";
salutation(nomUtilisateur);

Compilation du code :

tsc test.ts

A l’issue de la commande un fichier test.js est créé que l’on peut alors visualiser :

function salutation(nom) {
    console.log("Bonjour, " + nom);
}
var nomUtilisateur = "John";
salutation(nomUtilisateur);

On constate que pour cet exemple le code est le même en javascript et en typescript, on peut exécuter :

>node test.js
Bonjour, John

Définition d’une variable avec TypeScript :

Il est possible de déclarer une variable avec var qui est classique en javascript ou avec let qui est plus sécurisé avec TypeScript. Déclarer une variable avec var lui confère un scope global c’est à dire que la variable est disponible dans tout le code, let limite le scope de la variable au “nearest block”

Exemple 1 : utilisation de var (scope global)

function affichage(test) {
    var compte = 1;

    if (test) {
        var augmentation = compte + 5;
        return augmentation;
    }

    return augmentation;
}


affichage(false);

Ce code compile mais comporte des risques car la variable augmentation n’a pas été déclarée si le paramètre test = false.

Exemple 2 : utilisation de less (scope limited to nearest block)

Pour le code suivant, la compilation est en erreur en raison de la limitation du scope de la variable augmentation.

function affichage(test) {
    let compte = 1;

    if (test) {
        let augmentation = compte + 5;
        return augmentation;
    }

    // Erreur la variable n'existe pas
    return augmentation;
}
affichage(true);

>tsc test.ts
test.ts:10:12 - error TS2304: Cannot find name 'augmentation'.

Typage en TypeScript :

let compte = 10
compte = 'hello'

La compilation du code ci-dessus confirme le typage fort du langage, lors de la compilation l’erreur suivante est levée :

>tsc test.ts
test.ts:2:1 - error TS2322: Type '"hello"' is not assignable to type 'number'.

Annotation de type en TypeScript :

Les types suivants peuvent être annotés en TypeScript :

let a : number; //entier et décimal
let b : boolean;
let c : string;
let d : any;
let e : number[];
let f : number[] = [4, 5, 6];
let g : any[]    = [4, 'Hello', true, 6];
const letterA = 'A';
const couleurVert = 1;

Énumération en TypeScript :

enum Direction {
    enHaut = 1,
    enBas = 2,
    aGauche = 3,
    aDroite = 4
}

let prochaineDirection = Direction.enHaut;

Si on regarde le code ci-dessus après compilation par tsc on observe que le code TypeScript est nettement plus confortable que celui en JavaScript :

var Direction;
(function (Direction) {
    Direction[Direction["enHaut"] = 1] = "enHaut";
    Direction[Direction["enBas"] = 2] = "enBas";
    Direction[Direction["aGauche"] = 3] = "aGauche";
    Direction[Direction["aDroite"] = 4] = "aDroite";
})(Direction || (Direction = {}));
var prochaineDirection = Direction.enHaut;

ANGULAR en moins de 128 mots – Partie 2

Cet article fait suite à la première partie : https://128mots.com/index.php/2020/02/27/angular-en-plus-de-128-mots-partie-1/

Structure d’un projet Angular :

  • e2e : Tests automatisés end to end
  • node_modules : modules tiers installés pour les besoins du projet de développement (via la commande npm install)
  • src : dossier principal de l’application
  • app : Modules et composants de l’application
  • assests : stockage des éléments statiques (images, script …)
  • environments : Contient les variables d’environnement
  • favicon.ico : Icône de l’application
  • index.html : fichier html principal de l’application
  • main.ts : point d’entrée de l’application (se charge d’initialiser AppModule)
  • polyfills.ts : Adapte le javascript au navigateur
  • style.css : feuille de style
  • tsconfig.ts : configuration typescript
  • karma.conf.js : configuration de l’environnement de test

ANGULAR en plus de 128 mots – Partie 1

Angular est un framework pour construire des applications clientes, il se base sur HTML/CSS et JavaScript/TypeScript.

Angular propose les avantages suivants :

  • Revealing Module Pattern : permet d’organiser le code en un ou plusieurs modules et donne une meilleure structure.
  • Architecture propre et structurée.
  • Code réutilisable.
  • Application plus facilement testable.

Architecture :

  • Front-End : S’occupe de la logique de présentation. Constitué de HTML / CSS / TypeScript / Angular
  • Backend : S’occupe de la logique métier. Constitué de Data + API

Créer une première application Angular :

NodeJS : L’environnement d’exécution Node.js comprend tout ce dont vous avez besoin pour exécuter un programme écrit en JavaScript. Pour l’installer le lien https://node.js.org

Node Package Manager : il s’agit d’un utilitaire en ligne de commande qui facilite l’installation de packages, la gestion des versions et la gestion des dépendances.

Angular-Cli : une interface de ligne de commande pour automatiser votre flux de travail de développement. Il vous permet de:

  • Créer une nouvelle application Angular.
  • Exécutez un serveur de développement avec prise en charge de “Live Reload” pour prévisualiser votre application pendant le développement.
  • Ajouter des fonctionnalités à votre application Angular.
  • Exécuter des tests unitaires
  • Exécuter les tests de end to end
  • Construire l’application pour le déploiement en production
  • Déployer votre application sur un serveur

Installation de Angular-cli en ligne de commande :

npm install -g @angular-cli

Cette notation avec @ permet aux packages NPM d’être espacés de noms. Chaque utilisateur et organisation sur NPM a sa propre portée et ils sont les seuls à pouvoir y ajouter des packages.

Ceci est utile pour plusieurs raisons:

  • Permet aux organisations d’indiquer clairement quels packages sont «officiels» et lesquels ne le sont pas. Exemple, la portée @angular, assure qu’il a été publié par l’équipe de base Angular.
  • Le nom du package doit être unique à dans sa portée de publication mais pas à l’ensemble du registre npm.
    Exemple, le nom du package http est déjà pris dans le référentiel principal npm, mais Angular peut également avoir @ angular / http.

Pour plus de détails la documentation est consultable à ce lien : https://docs.npmjs.com/

Créer un paquet Angular :

ng new paquet-test-angular

Éditer le code du projet Angular créé :

Je vous conseille d’éditer le code avec l’éditeur VsCode : https://code.visualstudio.com/ ou avec l’éditeur de code Sublime Text https://www.sublimetext.com/

Si vous utilisez vscode la commande suivante peut être utilisée à la racine de votre projet.

code .

Déployer votre projet angular sur le serveur de la machine locale :

ng serve

L’application est alors consultable sur le localhost:4200.

Algorithme KNN Python : k plus proches voisins

L’algorithme knn python d’apprentissage des k plus proches voisins (KNN) est utilisé pour effectuer de la classification de données.

algorithme knn python

Introduction

Pour prédire la classification d’une nouvelle donnée, l’algorithme se base sur les k enregistrements issus de l’ensemble de données d’apprentissage sont alors localisés les plus similaires à ce nouvel enregistrement.

La similitude entre les enregistrements peut être mesurée de différentes manières. Et généralement un bon point de départ est la distance euclidienne.

L’algorithme knn python :

Pour une entrée x quelle est sa classe y si je me base sur les k voisins les plus proches de x ?

  1. Trouver les k entrée partie les données d’entrainement qui sont les plus “proches” de mon entrée x (ici on utilisera par exemple la distance euclidienne)
  2. Faire voter chacune de ces données d’entrainement pour sa classe y.
  3. Retourner la classe majoritaire

Ainsi, Le succès de l’algorithme va reposer sur la quantité de donnée d’entrainement et sur la qualité de la mesure de la distance entre 2 vecteurs x.

Implémentation python de l’algorithme knn des k plus proches voisins.

Finalement, Voici un exemple d’utilisation et d’implémentation Python sur la base de données qui concerne l’accord d’un crédit en fonction de l’age et du montant demandé. La classe correspond à la réponse OUI ou NON.

from math import sqrt
 
# Faire une predicition de la classification
def predire_classification(donnee_test, entrainement, nombre_voisins_vote):
	voisins = recherche_voisins(entrainement, donnee_test, nombre_voisins_vote)
	sortie = [vecteur[-1] for vecteur in voisins]
	prediction = max(set(sortie), key=sortie.count)
	return prediction


 #Distance euclidienne de 2 vecteurs
def distance_euclidienne(vecteur1, vecteur2):
	distance = 0.0
	for i in range(len(vecteur1)-1):
		distance += (vecteur1[i] - vecteur2[i])**2
	return sqrt(distance)
 

# Recherche les voisins
def recherche_voisins(entrainement, donnee_test, nbVoisins):
	distances = list()
	for ligneEntrainement in entrainement:
		dist = distance_euclidienne(donnee_test, ligneEntrainement)
		distances.append((ligneEntrainement, dist))
	distances.sort(key=lambda tup: tup[1])
	kVoisins = list()
	for i in range(nbVoisins):
		kVoisins.append(distances[i][0])
	return kVoisins
 
 
# Données d'entrainement
donneesApprentissage = [[25,40000,'NON'],
		   [30,60000,'OUI'],
		   [35,80000,'NON'],
		   [45,50000,'NON'],
		   [20,60000,'NON'],
		   [60,15000,'NON'],
		   [70,5000,'OUI'],
		   [80,1000,'NON'],
		   [33,80000,'OUI'],
		   [32,10000,'NON']]

prediction = predire_classification(donneesApprentissage[1], donneesApprentissage, 3)
print('On devrait trouver %s, la prediction est : %s.' % (donneesApprentissage[1][-1], prediction))

Liens externes :

https://fr.wikipedia.org/wiki/M%C3%A9thode_des_k_plus_proches_voisins

https://www.python.org/

Liens internes :

https://128mots.com/index.php/2021/01/13/algorithme-tri-quantique/
https://128mots.com/index.php/2020/10/09/pytorch-comment-charger-un-modele-pre-entraine/

https://128mots.com/index.php/category/python/

Implémentation Python de l’algorithme de Dijkstra

Cet article fait suite à l’article suivant sur l’algorithme de Dijkstra : https://128mots.com/index.php/2020/02/17/lalgorithme-de-dijkstra-dans-un-graphe-pondere-et-oriente-en-plus-de-128-mots/

Voici l’implémentation Python de l’algorithme

from collections import deque

def dijkstra(graph, vertex):
    queue = deque([vertex])
    distance = {vertex: 0}
    while queue:
        t = queue.popleft()
        print("On visite le sommet " + str(t))
        for voisin in graph[t]:
                queue.append(voisin)
                nouvelle_distance = distance[t] + graph[t][voisin]
                if(voisin not in distance or nouvelle_distance < distance[voisin]):
                    distance[voisin] = nouvelle_distance
                    print("Met à jour le sommet " + str(voisin) + " avec la distance : " + str(nouvelle_distance))
                    
    return distance



#Liste d'ajacence du graphe
graph = {'A':{'B':15,'C':4},'B':{'E':5},'C':{'E':11,'D':2},'D':{'E':3},'E':{}}
distance = dijkstra(graph,'A')
print("Distances" + str(distance))

L’algorithme de Dijkstra dans un graphe pondéré et orienté en plus de 128 mots

Pour un sommet source donné dans le graphique, l’algorithme recherche le chemin le plus court entre ce nœud et tous les autres.

Ici on utilise un graphe pondéré qui est un graphe dans lequel chaque arc (cas d’un graphe orienté) reçoit un poids. Un graphe pondéré est donc un type spécial de graphe étiqueté dans lequel les étiquettes sont des nombres.

Le poids d’une chaîne ou d’un chemin est la somme des poids des arcs qui constituent la chaine.

L’algorithme prend en entrée un graphe pondéré et un sommet à partir duquel il calcule les distances, les étapes sont les suivantes :

Phase d’initialisation :

  • On positionne sur tous les sommets une étiquette égale à l’infini (ou a la longueur maximum possible +1).
  • On initialise l’étiquette sur A à 0

Phase de traitement :

  • On traite un sommet (ici on commence par A)
  • On marque le sommet comme visité
  • On relâche les arcs sortants du sommet, c’est à dire on cherche à mettre à jour la valeur de l’étiquette du sommet d’arrivée selon la distance.
  • Si la valeur de la route vers le sommet d’arrivée est inférieure à celle calculée, on met à jour l’étiquette du sommet avec cette distance totale.
  • Le sommet suivant à traiter est celui qui porte le poids le plus faible.

Exemple :

Initialisation de l’algorithme
On relâche l’arc sortant A-B, la distance est 15, 15 étant une meilleure valeur que l’infini on met à jour l’étiquette de B avec 15
On relâche l’arc sortant A-C la distance 4 étant meilleure que l’infini on met à jour l’étiquette du sommet C
Le sommet suivant de l’algorithme est celui qui n’est pas encore visité et qui a l’étiquette avec la plus faible valeur. Ici il s’agit du sommet C avec la valeur 4.
On relâche l’arc sortant C-E, la distance calculée depuis le sommet A est 4 + 11 = 15. 15 étant meilleure que l’infini on met à jour l’étiquette du sommet E.
On relâche l’arc sortant C-D, la distance calculée depuis le sommet A est 4 + 2 = 6. 6 étant meilleure que l’infini on met à jour l’étiquette du sommet D.

A l’étape suivante on visite le sommet D car sa valeur est la plus faible du graphe
On relâche l’arc sortant D-E et on calcule la distance depuis le sommet A qui est égale à 9 soit une distance plus courte que 15 (calculé à l’étape précédente)
On désélectionne alors l’arc C-E qui était auparavant calculé comme la meilleure route pour aller de A à E et on met à jour le sommet E avec la valeur 9.
Le sommet E est ensuité traité, il n’a pas d’arc sortant donc il n’y a pas de mise à jour.
Le sommet B est traité : l’arc sortant B-E est relâché, la distance de 15 + 5 = 20 étant supérieure à la valeur de 9 du sommet E il n’y a aucune mise à jour et l’algorithme se termine.

Implémentation Python du parcours en largeur dans les graphes (BFS)

Cet article fait suite à celui qui porte sur l’algorithme BFS ici : https://128mots.com/index.php/2020/02/11/parcours-en-largeur-dans-les-graphes-bfs/

L’implémentation Python de cet algorithme est la suivante :

from collections import deque

def bfs(graph, vertex):
    queue = deque([vertex])
    distance = {vertex: 0}
    pere = {vertex: None}
    while queue:
    	t = queue.popleft()
    	for voisin in graph[t]:
    		if voisin not in distance:
    			queue.append(voisin)
    			distance[voisin] = distance[t] + 1
    			pere[voisin] = t
    return distance, pere


#Liste d'ajacence du graphe
graph = {
	'A': ['B','C'],
	'B': ['A','C', 'D'],
	'C': ['D'],
	'D': ['C','A']
}

distance,pere = bfs(graph,'A')
print("Distances" + str(distance))
print("Pere = " + str(pere))

Parcours en largeur Python – Algorithme sur les Graphes

Le parcours en largeur python d’un graphe (BFS) est un algorithme utilisé pour parcourir les structures de donnée de graphe. BFS met en œuvre une stratégie spécifique pour visiter tous les sommets d’un graphe.

Introduction – Parcours en largeur python

BFS commence par un sommet, puis il vérifie les voisins du sommet initial, puis les voisins des voisins, etc.

En entrée de l’algorithme il y a le graphe G et un sommet de départ D pour lequel on considère que la distance est 0.

En sortie de l’algorithme sont calculées toutes les distances entre le sommet D et chaque sommet du graphe G ainsi que l’arbre couvrant si le graphe G est connexe (c’est à dire que pour toute paire de sommet il existe un chemin entre eux dans le graphe).

Description de l’algorithme

On utilise les tableaux suivants :

  • Distance[.] : Stocke la distance entre D (sommet de départ) et un autre sommet du graphe.
  • Father[.] : Stocke le sommet père d’un sommet du graphe parcouru.
  • Visite[.] : Stocke l’état de visite du sommet, liste des valeurs possible 0:pas encore visité,1:Visite en cours,2:Visité

On utilise les fonctions suivantes pour une file F :

  • First(F) : Retourne l’élément en tête de la file F sans le supprimer.
  • Dequeue(F) : Retourne l’élément en tête de la file F en le supprimant.
  • Append(F, A) : Mettre l’élément A dans la file F en queue de la file.

Les étapes de l’algorithme :

  • Phase d’initialisation
    • 1. Pour tous les sommets faire
      • Visite = 0 (Pas encore visité)
      • Pere = null (Initialise le tableau)
      • Distance = -1
    • 2. Append(F,D) (ajoute l’élément de départ)
    • 3. Distance[R] = 0 (postulat de départ)
  • Phase d’action (parcours du graphe G)
    • Tant que la file F n’est pas vide
      • t = First(F)
      • Pour tous les voisins v de t faire
        • Si Visite[v] = 0 (sommet non visité) alors
          • Visite[v] = 1 (Visite en cours)
          • Distance[v] = Distance[t] + 1
          • Father[v] = t
          • Append(F,v)
      • Dequeue(F)
      • Visite[t] = 2

Si on détaille les étapes avec le cas du graphe exemple ci-dessous.

Phase d’initialisation :

Parcours en largeur Python - Algorithme sur les Graphes

Initialisation l’élément A est l’élément de départ à distance 0, il est coloré en orange pour indiquer que la visite est en cours.

Visite des voisins du sommet A (Visite du sommet B)

Parcours en largeur Python - Algorithme sur les Graphes
Le sommet B passe à en cours de visite, sa distance de A est calculée et le sommet A est ajouté comme sommet père. Il est ajouté à la file.

Visite des voisins du sommet A (Visite du sommet C)

Parcours en largeur Python - Algorithme sur les Graphes
Le sommet C passe à en cours de visite, sa distance de A est calculée et le sommet A est ajouté comme sommet père. Il est ajouté à la file.

Marquage de A comme visité et suppression de la file

Parcours en largeur Python - Algorithme sur les Graphes
A est marqué comme visité (couleur bleue) et retiré de la tête de la file

Visite des voisins du sommet B (Visite du sommet D)

Parcours en largeur Python - Algorithme sur les Graphes
Le sommet C etant marqué comme en cours de visite il ne sera pas visité, on visite le sommet D on calcule sa distance = 2 et on note le sommet B comme père du sommet B.

Marquage de B et C comme visité et suppression de la file

B est marqué comme visité (couleur bleue) et retiré de la tête de la file
C est marqué comme visité (couleur bleue) et retiré de la tête de la file (son voisin D est marqué en cours de visite)

Marquage de D comme visité et fin de l’algorithme

Parcours en largeur Python - Algorithme sur les Graphes
D est marqué comme visité (couleur bleue) et retiré de la tête de la file.
Fin de l’algorithme

Construction de l’arbre couvrant si le graphe est connexe

Parcours en largeur Python - Algorithme sur les Graphes
Si le graphe est connexe on déplie le résultat du parcours et on obtient l’arbre couvrant du graphe qui contient tous les sommets.

Application : Le parcours en largeur d’un graphe (BFS) est utile pour :

  • Vérifier si un graphe est connexe (tous les sommets sont alors marqués comme visités à la fin de l’algorithme).
  • Calculer les distances à partir d’un sommet donné
  • Construire un arbre couvrant du graphe

Parcours en largeur python – Liens externes

https://fr.wikipedia.org/wiki/Python_(langage)

https://www.python.org/

https://fr.wikipedia.org/wiki/Algorithme_de_parcours_en_largeur

Parcours en largeur python – Liens internes

https://128mots.com/index.php/category/python/

https://128mots.com/index.php/2021/01/21/algorithme-glouton-python/