Jump to content
MediaWiki

API:Afficheur de l'image du jour

From mediawiki.org
This page is a translated version of the page API:Picture of the day viewer and the translation is 100% complete.
Cette page fait partie de la documentation de l'API MediaWiki Action.
API MediaWiki Action
Fonctions de base
Authentification
Comptes et utilisateurs
Opérations sur les pages
Chercher
Outils pour les développeurs
Tutoriels
v · d · e

Présentation

Ce tutoriel vous apprendra comment faire un afficheur pour l'Image du jour de Wikipedia en utilisant l'API Action de MediaWiki.

Ce tutoriel vous montrera comment le faire avec :

Processus pas à pas pour construire cette application

Etape 1 installer l'environnement de développement Python et Flask

Configurer Python

Ce tutoriel utilise Python 3. Vous pouvez télécharger la dernière version de Python à partir de :

Voir le Guide Python du débutant pour les instructions concernant l'installation de Python sur les autres systèmes d'exploitation.

Configurer Flask

Pip est un gestionnaire de paquets que vous pouvez utiliser pour installer Flask : pip install flask. Si vous ne disposez pas de pip, installez-le à partir du site web Pip officiel

Etape 2 créer une application Flask simple

Si tout s'est correctement installé, copiez le script suivant dans app.py, à l'intérieur du dossier du projet : $HOME/picture-of-the-day-viewer/app.py. Lorsque vous l'exécutez (en utilisant flask run ou python app.py), il doit afficher « Hello world » sur http://localhost:5000/ 

#!/usr/bin/python3
fromflaskimport Flask
APP = Flask(__name__)
@APP.route("/")
defhello():
 return "Hello World!"
if __name__ == "__main__":
 APP.run()

Etape 3 afficheur de l'Image du jour

Maintenant que tout est configuré, vous pouvez commencer à écrire le code pour l'afficheur de l'Image du jour. L'Image du jour (Picture of the day - POTD), est une image mise à la une le temps d'une journée et affichée sur la page d'accueil de Wikipedia. Vous obtiendrez cette image à partir d'un modèle du wiki et elle changera chaque jour.

Récupérer la date du jour

Parce que cette image change chaque jour, vous avez besoin de la date du jour pour accéder aux archives et obtenir une version stable de la bonne image. Pour cela, importez la classe Python date.

Puis définissez une nouvelle fonction index(). Index() va générer la page web en transmettant toutes les données associées à vos API appelées. Voir Afficher la page pour d'autres informations sur le fichier index.html que nous utiliserons comme modèle. Actuellement, index() doit contenir une variable représentant la date actuelle. Nous l'utiliserons bientôt pour créer une requête pour accéder à l'Image du jour. 

#!/usr/bin/python3
fromdatetimeimport date
fromflaskimport Flask, render_template
APP = Flask(__name__)
@APP.route("/")
defindex():
 todays_date = date.today().isoformat()
if __name__ == "__main__":
 APP.run()

Appeler l'API Action

L'API Action fonctionne en renvoyant des données en réponse aux requêtes HTTP. Pour ce faire, importez la bibliothèque Python des requêtes.

Puis ajoutez deux nouvelles variables : SESSION = requests.Session() et ENDPOINT = "https://en.wikipedia.org/w/api.php". Vous allez utiliser l'objet SESSION pour faire des requêtes à l'URL ENDPOINT.

Dans une nouvelle fonction, fetch_potd(), appelez API:Images/fr pour demander que l'image soit incluse dans une page POTD protégée (exemple). De cet appel, utilisez le nom du fichier de l'image pour appeler API:Imageinfo/fr , et récupérez l'URL de la source de l'image. Dans cet exemple, le deuxième appel à l'API est géré dans la fonction fetch_image_src() du helper..

Dates pour les listes d'archives de Wikipedia en format standard ISO, par exemple : 2019年01月31日, pour le 31 janvier 2019. Vous pouvez obtenir le format correct en utilisant la méthode de date isoformat(). 

deffetch_potd(cur_date):
 date_iso = cur_date.isoformat()
 title = "Template:POTD_protected/" + date_iso
 params = {
 "action": "query",
 "format": "json",
 "formatversion": "2",
 "prop": "images",
 "titles": title
 }
 response = SESSION.get(url = ENDPOINT, params = params)
 data = response.json()
 filename = data["query"]["pages"][0]["images"][0]["title"]
 image_page_url = "https://en.wikipedia.org/wiki/" + title
 
 image_data = {
 "filename": filename,
 "image_page_url": image_page_url,
 "image_src": fetch_image_src(filename),
 "date": cur_date
 }
 return image_data
deffetch_image_src(filename):
 params = {
 "action": "query",
 "format": "json",
 "prop": "imageinfo",
 "iiprop": "url",
 "titles": filename
 }
 response = SESSION.get(url = ENDPOINT, params = params)
 data = response.json()
 page = next(iter(data["query"]["pages"].values()))
 image_info = page["imageinfo"][0]
 image_url = image_info["url"]
 return image_url

Enfin modifiez index() pour appeler fetch_potd(). Importez render_template de flask, et faites que index() renvoie render_template("index.html", data=data).

Afficher la page

A screenshot of the Picture of the Day Viewer available on the MediaWiki Code Samples repo, at GitHub
Ecran de l'application de l'afficheur de l'Image du jour

Les modèles Flask contiennent le plus souvent des balises HTML, mais ils utilisent aussi Jinja pour générer le contenu dynamique. Le balisage Jinja ressemble à ceci : {{ variable }} ; il est utilisé pour injecter des variables Python ou des expressions dans notre structure de page de base. Ajouter quelques séquences de base en HTML 5 et quelques éléments à index.html. Assurez-vous de l'enregistrer dans un répertoire avec votre application, appelé /templates. 

<!DOCTYPE html>
<html lang="en">
 <meta charset="utf-8">
 <title>Picture of the Day</title>
 <link rel="stylesheet" href="/static/style.css">
 <main>
 <h1>Picture of the day:</h1>
 <div class="card">
 <div class="potd">
 <h2>{{ data.filename }}</h2>
 <a href="{{ data.image_page_url }}" target="blank">
 <figure>
 <img src="{{ data.image_src }}">
 <figcaption>View on Wikipedia</figcaption>
 </figure>
 </a>
 </div>
 <div class = "date-container">
 <div class = "current-date">{{ data.date.strftime("%d %B %Y") }}</div>
 </div>
 </div>
</main>

Rendre interactif

Ajoutez un élément ‎<form> à index.html et affectez-lui en entrée les boutons d'envoi : Précédent et Suivant. Dès qu'un de ces boutons est sélectionné, le formulaire envoie une requête POST, et la valeur sélectionnée est rendue à app.py. Cela va permettre aux utilisateurs de parcourir les archives des Images du jour.

Puis modifiez app.py avec une fonction change_date(), pour mettre à jour la date affichée à l'utilisateur. Etendez également la route / pour gérer les requêtes POST à partir du formulaire. Pour permettre à app.py de lire le message POST de la requête, importez la classe Flask Request.

Code Python et HTML complet :

$HOME/picture-of-the-day-viewer/app.py
"""
 app.py
 MediaWiki Action API Code Samples
 Fetches Wikipedia Picture of the Day (POTD) and displays it on a webpage.
 Also allows users to go backward or forward a date to view other POTD.
 MIT License
"""
#!/usr/bin/python3
fromdatetimeimport date, timedelta
fromflaskimport Flask, render_template, request
importrequests
APP = Flask(__name__)
SESSION = requests.Session()
ENDPOINT = "https://en.wikipedia.org/w/api.php"
CURRENT_DATE = date.today()
@APP.route("/", methods=["GET", "POST"])
defindex():
"""
 Requests data from Action API via 'fetch_potd' function & renders it on the
 index page accessible at '/'
 """
 if request.method == "POST":
 change_date()
 data = fetch_potd(CURRENT_DATE)
 return render_template("index.html", data=data)
defchange_date():
"""
 Changes current date in response to input from the web form
 """
 global CURRENT_DATE
 user_input = request.form["change_date"]
 new_date = CURRENT_DATE
 last_date = date.today()
 first_date = date(year=2004, month=5, day=14)
 if user_input == "← Back":
 new_date = new_date - timedelta(days=1)
 elif user_input == "Next →":
 new_date = new_date + timedelta(days=1)
 if new_date > last_date or new_date < first_date:
 return
 CURRENT_DATE = new_date
deffetch_potd(cur_date):
"""
 Returns image data related to the current POTD
 """
 date_iso = cur_date.isoformat()
 title = "Template:POTD protected/" + date_iso
 params = {
 "action": "query",
 "format": "json",
 "formatversion": "2",
 "prop": "images",
 "titles": title
 }
 response = SESSION.get(url=ENDPOINT, params=params)
 data = response.json()
 filename = data["query"]["pages"][0]["images"][0]["title"]
 image_src = fetch_image_src(filename)
 image_page_url = "https://en.wikipedia.org/wiki/Template:POTD_protected/" + date_iso
 image_data = {
 "filename": filename,
 "image_src": image_src,
 "image_page_url": image_page_url,
 "date": cur_date
 }
 return image_data
deffetch_image_src(filename):
"""
 Returns the POTD's image url
 """
 params = {
 "action": "query",
 "format": "json",
 "prop": "imageinfo",
 "iiprop": "url",
 "titles": filename
 }
 response = SESSION.get(url=ENDPOINT, params=params)
 data = response.json()
 page = next(iter(data["query"]["pages"].values()))
 image_info = page["imageinfo"][0]
 image_url = image_info["url"]
 return image_url
if __name__ == "__main__":
 APP.run()
$HOME/picture-of-the-day-viewer/templates/index.html
<!DOCTYPE html>
<html lang="en">
 <meta charset="utf-8">
 <title>Picture of the Day</title>
 <link rel="stylesheet" href="/static/style.css">
 <main>
 <h1>Picture of the day:</h1>
 <div class="card">
 <div class="potd">
 <h2>{{ data.filename }}</h2>
 <a href="{{ data.image_page_url }}" target="blank">
 <figure>
 <img src="{{ data.image_src }}">
 <figcaption>View on Wikipedia</figcaption>
 </figure>
 </a>
 </div>
 <div class="date-container">
 <time class="current-date">{{ data.date.strftime("%d %B %Y") }}</time>
 <div class="date-navigator">
 <form action="/" method="POST">
 {% if data.date.strftime("%d %B %Y") == "14 May 2004" %}
 <input type="submit" name="change_date" value="← Back" disabled>
 {% else %}
 <input type="submit" name="change_date" value="← Back">
 {% endif %}
 {% if data.date == data.date.today() %}
 <input type="submit" name="change_date" value="Next →" disabled>
 {% else %}
 <input type="submit" name="change_date" value="Next →">
 {% endif %}
 </form>
 </div>
 </div>
 </div>
</main>

Mettre en forme votre application

Flask utilise un répertoire nommé static, qui contient tous les fichiers d'aide qui ne changent pas durant le cycle de vie entier de l'application. C'est un endroit adapté pour y mettre les feuilles de style ou les scripts supplémentaires. Notre feuille de style utilise quelques couleurs et des motifs visuels basés d'après le Guide de style Wikimedia. Ajoutez un fichier CSS dans $HOME/picture-of-the-day-viewer/static/style.css.

$HOME/picture-of-the-day-viewer/static/style.css
html{
margin:0;
padding:0;
height:100vh;
width:100vw;
}
body{
margin:0;
background:#f8f9fa;/* light grey */
font-family:Arial,Helvetica,sans-serif;
font-size:16px;
}
h1{
margin:0;
padding:12px;
background:#2a4b8d;/* dark blue */
color:#ffffff;
}
h2{
margin-top:8px;
padding:12px;
font-size:1em;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
background:#f3f9ff;/* very light blue */
border:1pxsolid#2a4b8d;/* dark blue */
}
a{
color:#3366cc;/* blue */
}
p{
margin:8px;
}
.card{
position:relative;
margin:auto;
min-width:200px;
max-width:67vw;
height:90vh;
background:#ffffff;
border-radius:8px;
box-shadow:3px6px10pxrgba(0,0,0,0.16);
}
.potd{
width:inherit;
height:60vh;
}
figure{
width:100%;
margin:auto;
text-align:center;
}
figureimg{
display:block;
margin:12pxauto;
max-width:64vw;
max-height:50vh;
border:1pxsolid#3366cc;/* blue */
}
figurea{
margin:8px;
}
.date-container{
display:block;
position:absolute;
bottom:0;
left:0;
right:0;
text-align:center;
font-weight:bold;
}
.current-date{
margin:16pxauto;
font-size:2em;
background:#ffffff;
color:#72777d;/* grey */
}
.date-navigator{
margin:16pxauto;
font-size:2em;
text-transform:uppercase;
text-align:center;
background:#3366cc;/* blue */
color:#ffffff;
}
.date-navigatorinput{
margin:8px;
min-height:44px;
width:45%;
font-size:0.67em;
font-weight:inherit;
text-transform:none;
background:#3366cc;/* blue */
color:inherit;
border:1pxsolid#ffffff;
box-shadow:3px6px10pxrgba(0,0,0,0.16);
cursor:pointer;
}
.date-navigatorinput:hover{
background:#447FF5;/* light blue */
}
.date-navigatorinput:active{
background:#2a4b8d;/* dark blue */
border:none;
box-shadow:none;
}
.footer{
text-align:center;
}
.date-navigatorinput:disabled{
color:#c8cdff;/* grey */
border:1pxsolid#c8cdff;/* grey */
box-shadow:none;
cursor:default;
}
.date-navigatorinput:disabled:hover{
background:#3366cc;/* blue */
}

Étapes suivantes

  • Contribuez en enregistrant l'application de démonstration que vous avez réalisée utilisant l'API MediaWiki, dans ce dépôt d'exemples de code.
  • Apprendre différentes manières d'ajouter un texte descriptif à partir de la page de l' Image du jour  :
    • API:Search/fr fournit snippets qui peut être utilisé comme un lien vers l'aperçu
    • action=cirrusdump peut être utilisé pour obtenir l'ensemble du texte analysé à partir des articles des Wikis où l'extension Cirrussearch est installée (voir l'exemple).

Voir aussi

AltStyle によって変換されたページ (->オリジナル) /