04 Jurassic Park ~ Flask ~ DelahayeYourself

04 Jurassic Park

Ce TP est à faire en dehors du projet que nous utilisons pour réaliser nos découvertes sur Flask.

InGen

La société InGen; spécialisée dans la création de créatures préhistoriques génétiquement modifiées; souhaite créer un site pour son dernier projet.

IngenLogo

La majeure partie de son activité consiste à faire naı̂tre des dinosaures et à les présenter au sein de Jurassic Park. John Hammond, le PDG de l'entreprise InGen, travaille à la création d'un parc d'attractions sur Isla Nublar, une île qu'il possède au large du Costa Rica. Le parc comporte des animaux disparus tels que les dinosaures, comme attractions. Les créatures ont été clonés dans des installations spéciales à proximité sur Isla Sorna et amenés au parc.

Énoncé

Le but de ce TP est de contrôler votre acquisition de connaissances par un simple exercice. Il convient de mettre en application les notions vues en cours et durant les TPs précédents.

En appliquant les notions vues sur Python, pipenv, Flask, Jinja et requests durant les TPs du module de développement web dynamique, vous réaliserez un site web basique présentant les différents dinosaures du parc. Les données vous sont pour cela fournit via l'API REST suivante API Dinosaurs.

Création de deux pages différentes (accueil et détails sur un dinosaure),
Mise en oeuvre du TDD (Test Driven Development),
Versionning sous Git (pensez à versionner votre projet au fur et à mesure de votre avancé),
Les données sont disponibles via l'API Dinosaurs,
Les fichiers css, d'images, etc. sont disponibles ici,
Les templates HTML vous sont fournis dans la suite de cet énoncé,
Quelques conseils également.

Résultat attendu

Page d'accueil listant l'ensemble des dinosaures

L'url de cette page devra être la racine de votre site (/),
Les données seront récupérer depuis l'API Dinosaurs.

Page de détails sur un dinosaure

L'url de cette page devra être sous la forme /dinosaur/<slug du dinosaure>/ (où le slug correspond au slug retourné par l'API Dinosaurs);
Les données d'un seul dinosaure peuvent être récupérées via l'API Dinosaurs, par exemple https://medusa.delahayeyourself.info/api/dinosaurs/brachiosaurus permet de récupérer les informations du brachiosaure;
Les « Top Rated Dinosaurs » sont une récupération aléatoire de trois dinosaures parmis les septs retournées par l'API Dinosaurs, l'utilisation de la méthode sample de la classe random vous est vivement conseillé.

Quelques conseils ?

Créer d'abord votre projet sous Gitlab et pensez directement à le cloner;
Récupérer les fichiers static et placer les dans un répertoire static à la racine de votre projet;
Penser à faire un pipenv install de toutes les libs;
L'approche TDD vous aidera grandement, quelles sont les fonctions que je vais devoir développer et les T.U associés, les pages et les T.I associées;
Avancer par étape, d'abord la récupération de tous les dinosaures (test ?) puis la page d'accueil, puis la page de détail et enfin les « Top Rated Dinosaurs »;
Respirer c'est important;

Quelques templates ?

Voici le fichier base.html

<!DOCTYPE html>
<html>
    <head>
        <title>{%block title %}{% endblock %}Jurassic Park</title>
        <meta charset="utf8" />
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/reset.css') }}" />
        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css') }}" />
        <link href="https://fonts.googleapis.com/css?family=Montserrat|Staatliches" rel="stylesheet"> 
    </head>
    <body>
        <header>
            <a href="/">
                Jurassic Park
            </a>
            <nav>
                <a href="/">Home</a>
            </nav>
        </header>
        <main>
            {% block main %}{% endblock %}
        </main>
        <footer>
            <img src="{{ url_for('static', filename='img/logojp.png') }}" alt="Jurassic Park" />
        </footer>
    </body>
</html>

Et le template HTML pour la liste des dinosaures:

<!-- Héritage de template ? Block(s) ? -->
<section>
    <h2>The world of Jurassic Park</h2>

    <!-- iterate here ? -->
        <a href="">
            <figure>
                <img src="" alt="" />
                <figcaption>Discover the Brachiosaurus</figcaption>
            </figure>
        </a>
</section>

Ainsi que le template d'un dinosaure:

<!-- Héritage de template ? Block(s) ? -->
<div class="grid">
    <article>
        <h2>Discover the Brachiosaurus</h2>

        <div class="description">
            Lorem ispum
        </div>

        <div class="card">
            <img src="" alt="" />
            <dl>
                <dt>Name</dt>
                <dd>Brachiosaurus</dd>
                <dt>Name meaning</dt>
                <dd>Brachiosaurus</dd>
                <dt>Diet</dt>
                <dd>Brachiosaurus</dd>
                <dt>Height</dt>
                <dd>Brachiosaurus m.</dd>
                <dt>Length</dt>
                <dd>Brachiosaurus m.</dd>
                <dt>Weight</dt>
                <dd>Brachiosaurus kg.</dd>
            </dl>
        </div>
    </article>

    <aside>
        <h3>Top rated dinosaurs</h3>
        <!-- iterate here ? -->
            <a href="">
                <figure>
                    <img src="" alt="" />
                    <figcaption>Discover the Brachiosaurus</figcaption>
                </figure>
            </a>
    </aside>
</div>