Nos amis les arbres !
Il s’agit du premier projet personnel réalisé sous forme de fil rouge. Le but a été de réaliser un site web à l’aide de deux API à thème. Dans mon cas, j’ai décidé de choisir celui des arbres, ayant un lien particulier avec la nature qui nous entoure. Ce site web est sous forme de bibliothèque, qui va permettre de se renseigner sur les différents types et espèces d’arbres. Il est également possible de parrainer un arbre en allant sur la page dédiée et d’y remplir le formulaire en question.
Voici les étapes principales effectuées dans le cadre de ce projet :
1. Découverte des APIs via des cours en ligne et les données fournies par l’UHA (OpenClassrooms)
Première étape de ce projet personnel, j’ai découvert les API à thématiques. Il y en avait deux par thème. Dans mon cas, j’ai choisi celles sur les arbres. Une API avait pour données les type d’arbres, alors que la seconde se concentrait sur les espèces. Les cours en ligne m’ont également permis de comprendre cette notion d’API.
2. Début du codage avec HTML/CSS
Lors de cette semaine, la maquette statique de la page du site a été mise en place. Pour cela, j’ai utilisé de l’HTML pour le squelette de la page, le CSS ayant servi à mettre la style en forme.
Compétences
-> Créer des pages web structurées avec HTML en respectant la sémantique.
-> Styliser les éléments avec CSS en gérant la mise en page, les couleurs et l’adaptabilité.
Création et intégration dans un site web de maquettes graphiques permettant la mise à disposition d’informations :
-> Concevoir des maquettes représentant l’interface d’un site web.
-> Intégrer ces maquettes en HTML/CSS.
-> S’assurer que l’information est présentée de façon claire, hiérarchisée et ergonomique.
-> Acquérir les bases d’un langage impératif tel que C en mode procédural.
-> Comprendre les notions de variables, types, portée.
-> Manipuler des structures conditionnelles et des boucles.
-> Écrire des fonctions simples et savoir les mobiliser.
-> Structurer un programme en décomposant un besoin.
3. PHP et Git
Dans cette partie-ci, les pages écrites en HTML ont été converties en PHP afin de pouvoir rendre dynamique les pages dans le navigateur côté serveur. Les pages en HTML sont identiques pour tous les utilisateurs. PHP permet de personnaliser la vue en fonction du type d’utilisateur par exemple.
Pour git, le but a été de prendre en main cet outil de sauvegarde. Ceci afin de pouvoir avoir accès depuis n’importe quel ordinateur au projet, et non plus avoir le contenu sauvegardé uniquement en local.
Compétences
-> Acquérir les bases d’un langage impératif tel que C en mode procédural.
-> Comprendre les notions de variables, types, portée.
-> Manipuler des structures conditionnelles et des boucles.
-> Écrire des fonctions simples et savoir les mobiliser.
-> Structurer un programme en décomposant un besoin.
4. Création et utilisation d’un bash
L’objectif du bash a été de permettre le déploiement sur un serveur local. Pour cela, j’ai écrit un script afin de pouvoir charger le projet depuis un autre ordinateur.
Compétences
Connaitre les commandes linux de base :
-> Naviguer dans l’arborescence de fichier.
-> Gérer des fichiers (création, déplacement, suppression).
-> Installer et lancer des programmes ou services en ligne de commande.
-> Scripter de simples automatisations avec bash.
-> Ajouter des interactions dynamiques avec JavaScript en manipulant le DOM.
-> Utiliser les évènements et les fonctions pour enrichir l’expérience utilisateur.
5. JavaScript et PHP
A ce stade du projet, la communication avec la seconde API n’était pas encore réalisée. Pour se faire, j’ai dû mettre en place un fichier Javascript afin de pouvoir afficher les espèces d’arbres dans une modale dédiée. Cette modale s’ouvrait lorsque l’on cliquait sur le bouton « Espèces ».
J’ai dû également réaliser une troisième API qui devait afficher les données présentes en base de données. En effet, l’affichage des données ne devaient plus passer par les API fournies au début du projet, mais via la base de données. La partie PHP ici a permis de faire le lien entre le back-end et front-end. Une pagination a également été mise en place.
Compétences
Dynamiser un site web en mobilisant une API :
-> Intégrer des données dynamiques dans un site web via des appels à une API.
-> Savoir transcrire des données dans le format d’échange JSON
-> Gérer les appels HTTP (GET, POST, etc.) et les réponses asynchrones.
-> Afficher dynamiquement le contenu récupéré en fonction des interactions utilisateur.
6. SQL
Il s’agissait de réaliser une base de données afin de pouvoir enregistrer les données concernant les différentes API mais aussi pour la partie utilisateur. Notamment avec la création d’un compte lors du parrainage d’un arbre. J’ai dû mettre en place un fichier SQL, qui a été récupéré à partir de l’interface graphique PhpMyAdmin. Des tables ont été créées afin de récupérer les différentes informations.
Compétences
Construire des bases de données relationnelles :
-> Concevoir un schéma relationnel adapté aux besoins d’une application.
-> Définir les tables, les types de données, les relations et les contraintes d’intégrité.
-> Utiliser le langage SQL pour créer une base de données.
-> Normaliser la base pour éviter les redondances et optimiser les performances.
-> Utiliser le langage SQL pour insérer et mettre à jour les données de la base.
-> Utiliser le langage SQL pour interroger la base et formaliser les résultats en fonction du besoin
7. Présentation des données codées à chaque présentation de fil rouge
Lors de ce premier fil rouge, j’ai dû également présenter les données chaque semaine. Il a fallu effectuer une code review et expliquer le code implémenté à chaque étape du processus.
Compétences
Corriger et adapter son code en fonction des remarques de ses pairs et du chef de projet (code review) :
-> Lire et comprendre les retours fournis lors d’une relecture de code.
-> Identifier les éléments à modifier pour améliorer la lisibilité ou la performance.
-> Corriger son code tout en respectant les choix collectifs.
-> Argumenter ses choix techniques en cas de désaccord ou d’alternative.
Ce que j’en ai tiré : j’ai vraiment été heureuse de pouvoir réussir à mener à terme ce premier fil rouge, et d’obtenir un vrai site web fonctionnel avec des données persistantes en base de données. J’ai découvert beaucoup de technologies, sachant qu’avant d’entrer dans cette licence je n’avais que vu le HTML/CSS. J’ai également pris connaissance de cette notion de back-end et ce que ça représente vraiment.