python-avec-angular
python-avec-angular
Python avec
Angular ?
Guide Complet
14/06/2024
ganatan.com
Ce que nous allons faire ?
Code source
Le code complet du projet angular-app-multi-api sur github.
Qu’est-ce que Python ?
Si vous voulez communiquer avec un être humain le plus simple est de parler la
même langue.
Si vous voulez communiquer avec un ordinateur le plus simple est de parler le
même langage informatique.
Parlons en donc.
Ci dessous une liste choisie de langages parmi les plus connus et les plus
utilisés de nos jours.
C#
C ++
Delphi (mon préféré, paix à son âme, RIP)
Java
Javascript
Kotlin
Objective C
Pascal
Php
Python (le préféré des internautes ?)
Ruby
Swift
Visual Basic
La tendance est de dire qu'aucun langage n'est supérieur à un autre (c'est sûr
qu'entre une ferrari et une clio y'a pas de différence puisqu'elles
roulent, allez pourquoi pas !).
En tous cas tous ces langages permettent aussi bien de faire du frontend que du
backend.
Pour faire un raccourci, Python est plus simple mais moins rapide que d'autres
langages.
Tout dépend de ce que vous voulez faire et du temps dont vous disposez.
Top Langages
Les origines
Choisir Python semble donc être une bonne idée si vous voulez trouver du
travail.
La première version publique 0.9.0 est postée sur le forum Usenet en février
1991
Ingénieurs Logiciel
Analystes Data
Mathematiciens
Scientifiques
Comptables
Ingénieurs Réseau
Et grâce à sa simplicité d'apprentissage on dit même les enfants
Enfin faut qu'ils soient doués quand même !
Et il est surtout devenu un élément moteur dans l’explosion du Big Data ces
dernières années.
Python un langage pour tous ?
Et pour ne rien gâcher les débouchés sont prometteurs, ce qui vaut son pesant
d’or.
Python l'élu ?
Ce langage n'a donc que des qualités.
Installation de Python
Python est un langage interprété donc pour pouvoir travailler il nous faut
installer python sur notre poste de travail.
Depuis 2008 deux versions coexistaient alimentant le débat entre les partisans
de Python 2 et de Python 3.
Guido Van Rossum a mis un terme à ce débat puisque que le support de la
version 2.7 prend fin officiellement en janvier 2020.
Toutes les commandes seront exclusivement réservées à cette version.
Pour les plus frileux ou les soucieux de compatibilité ce n'est peut-être pas le
bon endroit !
Pour procéder à l'installation, autant aller sur le site officiel, il y a tout ce qu'il
faut.
https://www.python.org/
Downloads
All Releases
Download Python 3.8.3
Mais au cas où vous en avez besoin les infos nécessaires sont là.
# Mise à jour
sudo apt-get update
# Installation de Python
sudo apt-get install python3.8
# 1- Test de la version
python3 --version
https://www.jetbrains.com/fr-fr/pycharm/download/#section=windows
Professionels
Pour le développement Python Web ou scientifique.
Cette version prend en charge HTML, JS et SQL. Elle est payante.
Community
Pour le développement Python pur avec une version gratuite.
C'est celle que nous utiliserons
1. L'interpréteur Python 3
2. Visual Studio code (VS Code)
3. L'extension Python pour VS code
VS Code
https://code.visualstudio.com/
L'extension Python
https://marketplace.visualstudio.com/items?itemName=ms-
python.python
Premier programme
Faites le test.
# Lancer l'interpréteur Python
python
# Quitter l'interpréteur
Ctrl + Z
Par convention tous les fichiers écrits en Python se termine par l'extension .py
starter.py
Sur Pycharm on éxécute la commande Run (ou touche de raccourci Alt + Maj
+ F10)
On obtient le résultat dans la console
Sur Visual studio code on éxécute la commande Run (icône verte ou touche
de raccourci Ctrl + F5)
La solution idéale se nomme pip pour The Python Package Index (PyPI).
# Installation du Pip
pip install pip
stem-plot.py
plt.stem(x, y, use_line_collection=True)
plt.show()
4. Vérifier le résultat
1/ Rechercher la librairie
2/ Récupérer le code
3/ Installer la librairie
4/ Vérifier le résultat
Bonnes pratiques
Elle vous permettront de relire votre code des années après l'avoir écrit.
Elles permettront aussi à d'autres développeurs de le faire facilement.
Indentation
Règles de nommage
Nom de constantes
MY_CONSTANT
Nom de classes
MyClasse
Exemples de code
https://docs.python.org/3.8/
Le but de ce turoriel n'est pas d'étudier en détail le langage Python mais juste
d'avoir un aperçu.
C'est surtout le lien entre Angular et Python qui nous intéressera au final.
Utilisez chaque fichier et faites des tests c'est le meilleur moyen de comprendre
un langage.
Commentaires
Comment écrire des commentaires sur une ou plusieurs lignes de code.
Fonctions
Créer une fonction et l'utiliser.
Variables
Des variables à utiliser dans des fonctions, utiles pour formatter du texte
.
if ... else
Comment utiliser des conditions simples.
comments.py
# Braveheart
# Gladiator
'''
Mel Gibson
Ridley Scott
'''
functions.py
def movieName(id, name):
print(id)
print('Movie Name : ' )
if name == 'Alien':
print('Movie Title:Alien')
else:
print('Movie Title:else')
if name == 'Gladiator':
print('Movie Title:Gladiator')
movieName(1, 'Alien')
movieName(2, 'Gladiator')
variables.py
domestic = 187705427
international = 272878533
info = "The total is {:.2f} dollars"
print(info.format(domestic + international))
name = "Gladiator"
director = "Ridley Scott"
print(name + ' - ' + director)
showVariables(1, 'Gladiator')
if-else.py
print(info.format(id))
if name == 'Alien':
else:
if name == 'Apocalypto':
else:
selectMovie(1, 'Alien')
selectMovie(2, 'Apocalypto')
selectMovie(3, 'Avatar')
Grande question.
Honnêtement faire des sites avec Python pourquoi pas. Mais Angular, React ou
vue c'est quand même mieux.
Donc ce que nous allons faire
On va utiliser un module
http.server
http-server-simple.py
import http.server
class Server(http.server.SimpleHTTPRequestHandler):
def do_GET(self):
self.send_response(200)
self.end_headers()
self.wfile.write(b'First page')
Exécuter et tester
# Exécuter le code sous Windows
py http-server-simple.py
Ecrire le code
Exécuter le fichier
Tester
http-server-simple-base.py
from http.server import HTTPServer, BaseHTTPRequestHandler
class Server(BaseHTTPRequestHandler):
def do_GET(self):
self.send_response(200)
self.end_headers()
self.wfile.write(b'First page')
port = 80
httpd = HTTPServer(('localhost', port), Server)
print(f"Server listening on port {port}")
httpd.serve_forever()
Exécuter et tester
# Exécuter le code sous Windows
py http-server-simple-base.py
Ci-dessous une version qui simule deux pages html via le code.
http-server-html.py
from http.server import HTTPServer, BaseHTTPRequestHandler
class Server(BaseHTTPRequestHandler):
def do_GET(self):
if self.path == '/':
self.send_response(200, 'OK')
self.send_header('Content-type', 'html')
self.end_headers()
self.wfile.write(bytes(
"<html> <head><title> Http Server </title> </head> <body>Main Page</body>", 'UTF-8'))
else:
self.send_response(200, 'OK')
self.send_header('Content-type', 'html')
self.end_headers()
self.wfile.write(bytes(
"<html> <head><title> Http Server </title> </head> <body>Unknown page</body>",
'UTF-8'))
port = 80
httpd = HTTPServer(('localhost', port), Server)
print(f"Server listening on port {port}")
httpd.serve_forever()
Je vous livre une version un peu plus étoffée avec l'utilisation de fichiers html et
la gestion du routing.
Créons 3 fichiers
http-server-routing.py
Il contient le code Python qui simule notre serveur http
index.html
Contient la page principale
movies.html
Contient les données à afficher sous forme de liste.
http-server-routing.py
import http.server
class Serv(http.server.BaseHTTPRequestHandler):
def do_GET(self):
if self.path == '/':
self.path = '/index.html'
if self.path == '/movies':
self.path = '/movies.html'
try:
file_to_open = open(self.path[1:]).read()
self.send_response(200)
except:
file_to_open = "File not found"
self.send_response(404)
self.end_headers()
self.wfile.write(bytes(file_to_open, 'utf-8'))
port = 80
httpd = http.server.HTTPServer(('localhost', port), Serv)
print(f"Server listening on port {port}")
httpd.serve_forever()
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-
scalable=no">
<title>Page Title</title>
</head>
<body>
Example HttpServer with Python
<a href="movies">Movies</a>
</body>
</html>
movies.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-
scalable=no">
<title>Page About</title>
</head>
<body>
<h1>Example HttpServer with Python</h1>
<h2>About Page</h2>
<ul>
<li>Gladiator</li>
<li>Alien</li>
<li>Blade Runner</li>
<li>Legend</li>
</ul>
</body>
</html>
Commandes de test de notre serveur
# Exécuter le programme Python
py http-server-routing.py
API
Resful
CRUD
http-server-json.py
Pour tester l'affichage de données json
http-server-api.py
Pour simuler une API json
http-server-json.py
from http.server import HTTPServer, BaseHTTPRequestHandler
import json
class Server(BaseHTTPRequestHandler):
def do_GET(self):
self.send_response(200)
self.end_headers()
self.wfile.write(json.dumps(
[
{'name': 'Gladiator'},
{'name': 'Alien'},
{'name': 'Gladiator'},
{'name': 'Avatar'}
]
).encode())
port = 5201
httpd = HTTPServer(('localhost', port), Server)
print(f"Server listening on port {port}")
httpd.serve_forever()
http-server-api.py
from http.server import HTTPServer, BaseHTTPRequestHandler
import json
class Server(BaseHTTPRequestHandler):
def do_GET(self):
items = [{'name': 'movies'},
{'name': 'actors'}]
if self.path == '/movies':
items = [{'name': 'Gladiator'},
{'name': 'Alien'},
{'name': 'Gladiator'},
{'name': 'Avatar'}]
if self.path == '/actors':
items = [{'name': 'Mel Gibson'},
{'name': 'Russel Crowe'},
{'name': 'Joaquim Phoenix'},
{'name': 'Sam Wortington'}]
try:
self.send_response(200)
self.end_headers()
self.wfile.write(json.dumps(items).encode())
except:
self.send_response(404)
self.end_headers()
self.wfile.write(json.dumps(items).encode())
port = 5201
httpd = HTTPServer(('localhost', port), Server)
print(f"Server listening on port {port}")
httpd.serve_forever()
# Exécuter L'API
py http-server-api.py
http://localhost:5201/movies
http://localhost:5201/url_unknow
Serveur HTTP version finale
Bien évidemment construire une API avec Python n'est pas aussi simple que ça.
Je vous livre enfin une version finale qui pourra fonctionner avec notre Frontend
Angular.
http-server.py
from http.server import HTTPServer, BaseHTTPRequestHandler
import json
class Server(BaseHTTPRequestHandler):
def do_GET(self):
items = [{'name': 'movies'},
{'name': 'actors'}]
if self.path == '/movies':
items = [{'id' : 1001,'name': 'Python Gladiator'},
{'id' : 1002,'name': 'Python Alien'},
{'id' : 1003,'name': 'Python Gladiator'},
{'id' : 1004,'name': 'Python Avatar'}]
if self.path == '/actors':
items = [{'id' : 2001,'name': 'Python Mel Gibson'},
{'id' : 2002,'name': 'Python Russel Crowe'},
{'id' : 2003,'name': 'Python Joaquim Phoenix'},
{'id' : 2004,'name': 'Python Sam Wortington'}]
try:
self.send_response(200)
self.send_header('Access-Control-Allow-Origin', '*')
self.end_headers()
self.wfile.write(json.dumps(items).encode())
except:
self.send_response(404)
self.send_header('Access-Control-Allow-Origin', '*')
self.end_headers()
self.wfile.write(json.dumps(items).encode())
port = 5201
httpd = HTTPServer(('localhost', port), Server)
print(f"Server listening on port {port}")
httpd.serve_forever()
# Exécuter L'API
py http-server.py
http://localhost:5201/movies
http://localhost:5201/actors
http://localhost:5201/url_unknow
Création du Frontend
1. https://www.ganatan.com/tutorials/demarrer-avec-angular
2. https://www.ganatan.com/tutorials/routing-avec-angular
3. https://www.ganatan.com/tutorials/lazy-loading-avec-angular
4. https://www.ganatan.com/tutorials/bootstrap-avec-angular
Mais pour aller plus vite voici les étapes pour créer cette application.
# Installation d'angular-cli
npm install -g @angular/cli
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'angular-starter';
items: any;
onGet() {
this.getItems();
}
getItems() {
this.http.get('http://localhost:5201/movies')
.subscribe(
data => {
this.items = data;
}
);
}
# Exécuter l'API
py http-server.py
http://localhost:5201/movies
Les deux Frameworks Python les plus utilisés sont Django et Flask
Je vous propose deux tutoriels pour créer des API
1. https://www.ganatan.com/tutorials/django-avec-angular
2. https://www.ganatan.com/tutorials/flask-avec-angular