☄️ Rendre concret les métiers du numérique

Bonjour et bienvenue chez RokettImmo 🔥 ! Pour votre premier jour en qualité de développeur front-end nous vous avons prévu quelques tâches qui vous aideront à mieux prendre en main le projet.

Veuillez consulter et télécharger les ressources suivantes pour commencer :

Télécharger le site

Jour 1

En interne l’équipe RokettImmo trouve que le contenu de la page n’est pas assez pertinents en fonction de la cible visée. Votre objectif est donc de prendre en compte ces demandes :

Demande n°1

Changez le titre dans le header : “L’agence immobilière pour les professionnels” par “L’agence immobilière dont tout le monde rêve”.

Demande n°2

Changez la couleur du titre du header, il doit devenir de couleur noir.

Demande n°3

Augmentez la taille du texte du logo (”RokettImmo”). Elle doit passer de 45px

Demande n°4

Dans la partie “Les locaux disponibles”, les images des 3 biens sont les mêmes. Changez la 2ème et la 3ème par d’autres photos de locaux au hasard que vous aurez trouvé sur Google

Demande n°5

Dans le menu en haut à droite (Tous les locaux, Mes favoris, A propos), ajoutez un élément “Contact”

Demande n°6

Dans les fichiers, créez un fichier apropos.html, dedans mettez ce texte : “Cette page est la page à propos”

Demande n°7

Dans le menu en haut à droite, au clic sur “A propos”, faire une redirection vers la page qu’on vient de créer

Demande n°8

Dans la section “partenaires” du header, pour chaque logo (airbnb etc..), ajoutez un lien vers le site du partenaire au clic sur le logo

Demande n°9

Dans le footer (bas de page), ajoutez une balise mailto pour pouvoir envoyer un mail à l’adresse suivante contact@async-agency.com quand on clique sur le bouton “Contacter un conseiller”

Demande n°10

Maintenant, on va simplifier le code CSS, créez un fichier css pour chaque bloc de la page d’accueil (header.css, available-places.css, result-delay.css, footer.css)

Demande n°11

Pour chacun des fichiers crées, insérez le code css adapté (initialement présent dans index.css)

Demande n°12

Pour finaliser le simplification du CSS, dans le fichier index.html, insérez tous les fichiers css qu’on vient de créer (de la même manière que le fichier index.css est importé

Jour 2

En interne l’équipe RokettImmo trouve que le contenu de la page n’est pas assez dynamique. L'équipe à une idée : elle aimerait bien afficher la météo à côté des différents bien immobilier.
Avant de vous lancer dans la réalisation de cette tache, on vous demande de faire un quelques tests de faisabilité.

Pendant vos recherches vous découvrez ce site :

Demande n°1

Trouvez le lien vers la documentation de l'API du site OpenWeatherMap

Demande n°2

Retrouvez les coordonnées GPS du lieu de votre choix (indice : vous pouvez utiliser Google Map).

Demande n°3

Vous décidez de tester l'API du site d'OpenWeatherMap. Mais pour cela il vous faut une clé d'API. Selon vous, quel est le but d'une clé d'API ?

En voici une pour le site d'OpenWeatherMap :

API Key : 249624a06662436df673632b9b363e27

De plus, il vous faudra un outil pour faire un "appel d'API" en voici un gratuit en ligne :

Il vous suffit de copier / coller l'URL de la documentation d'OpenWeatherMap dans la barre d'adresse du site ReqBin. Il vous faudra ensuite remplacer les mots entre accolade par les bonnes valeurs puis de cliquer sur "send".

Demande n°4

Vous vous apercevez que la météo est en anglais. Comment faire pour la météo soit en français ? (Indice : "lang" et "fr")

Demande n°5

Vous vous apercevez que vous pouvez demander à l'API de vous répondre de l'HTML a la place du JSON.
Exporter le fichier en HTML et créez une page en local qui affiche la méteo du Bourget du Lac.

Demande n°6

On vous demande de tester l'API du site suivant :

Faite en sorte d'interroger cette nouvelle API pour voir les données concernant la France.

Pour ça, un back-office a été créé pour que vous puissiez modifier les données affichées sur le site

Pour se connecter au backoffice, rdv sur
https://rocketimmo-backend.herokuapp.com/admin

L'identifiant est admin@rokett.co et le password Adminrokett123

Pour voir l'impact des modifications du backoffice, voici le site en ligne qui affiche les changements :

Il est temps de faire les demandes du client sur le site de RokettImmo, à l'aide du back-end répondez au demandes suivantes :

Demande n°7

Ajoutez un partenaire dans la liste des partenaires de RokettImmo

Demande n°8

Créer un nouveau local (choisissez une photo, une taille, un lieu etc..) et ajoutez-le à la liste des locaux

Demande n°9

Ajoutez votre prénom dans le copyright du footer 😏

Demande n°10

Customisez le titre "L’agence immobilière pour les professionnels" , remplacez-le par ce que vous voulez

Demande n°11

Des nouveaux développeurs et chefs de projets arrivent dans l'équipe 🔥. Il faut leur créer un accès au backoffice. Voici leurs données :

Demande n°12

Dans la partie "En moyenne, rocketimmo vous trouve des locaux en 9 jours", faites des changements sur les jours et les textes.

Demande n°13

Trouvez le lien vers la documentation de l'API de RokettImmo.

Demande n°14 (ensemble)

Sur le site utilisé tout à l'heure pour se connecter des API, tentez de faire une requête sur l'API de Rokett

Clé d'api :

Demande n°15

On vous demande d'explorer la base de données du site RockettImmo.
Vous disposez d'une sauvegarde antérieure disponible à cette adresse :

Pour cela vous pouvez utiliser ce site en ligne :

Copier la commande suivante sur le site puis cliquez sur run :

Supprimer la partie WHERE nom = 'Booking' et appuyez sur Run, que constatez-vous ?

Consultez la table places.

Pour aller plus loin :

Jour 3

La page d'accueil a été déployée et les retours sont bons. Maintenant, il faut créer les nouvelles autres pages du site pour pouvoir l'améliorer 😎

Pour commencer : prenons en mains l'outil Whimsical

Dans cette partie, on va vous demander de réaliser 2 étapes

Les wireframes ✍️
Les maquettes 🎨

Mais, c'est quoi un wireframe ? 🧐

Le wireframe ou maquette fonctionnelle est un schéma utilisé lors de la conception d'une interface utilisateur pour définir les zones et composants qu'elle doit contenir. À partir d'un wireframe peut être réalisée l'interface proprement dite par un graphiste. La démarche de recourir à des wireframes s'inscrit dans une recherche d'ergonomie.

Un super site pour faire des wireframe :

Inscrivez-vous sur le site et reproduisez l'interface suivante :

Une fois que vos wireframes sont faits, pensez à les monter aux autres, pour avoir un produit viable à la fin, il faut tester, tester et encore tester ! 😉
Pour la partie maquette, pensez à bien vous inspirer du site RokettImmo actuel pour rester cohérent avec la charte graphique

Ensuite : prenons en mains l'outil Figma

Créez un compte sur https://figma.com/
Figma est un éditeur de graphiques vectoriels et un outil de prototypage. Il est de plus en plus utilisé pour faire des maquettes de sites web de d'applications 🔥

Avant de se lancer dans la création des maquettes, on vous demande de vous familiariser avec ce nouvel outil, en réalisant ces différentes demandes :

Demande n°1

Créer un nouveau fichier de travail Figma (design file ou draft, peu importe)

Demande n°2

Créer sur cet espace une nouvelle frame, avec une taille Desktop de 1440*1024px

Demande n°3

Changez la couleur de fond de la frame, la nouvelle couleur doit être #22004D

Demande n°4

Ajoutez 5 carrés blancs de même taille (centrée en hauteur par rapport à la vue)

Demande n°5

Ajoutez un rectangle blanc qui prend toute la taille en largeur et 80px en hauteur, et qui est collé en haut de la vue

Demande n°6

Au dessus des carrés blancs ajoutez ce titre : "Top 5 des membres les plus fous chez Rokett", centré en couleur blanche, en taille 60, et avec la police Inter

Demande n°7

Vous commencez à voir où on veut en venir 😏
Maintenant que vous avez pris en main l'outil, voici le résultat final attendu, on vous laisse essayer de le reproduire parfaitement

Couleurs

Le bleu : #0B1690
Le rouge : #FD343A

Liens vers la maquette du site de RokettImmo

Page "Inscription et connexion" : Aurélien

Ces pages doivent contenir les choses suivantes:

Formulaire d'inscription : champs nom, prénom, email, téléphone
Lien mot de passe oublié
Bouton pour s'inscrire
Boutons d'inscription via Google, Facebook

Page "Mes favoris" : LM

Cette page doit contenir les choses suivantes:

Un titre "Mes locaux favoris"
Une liste des locaux enregistrés : Pour chaque local, il faut qu'il y ait le lieu, la taille, la date d'enregistrement, la disponibilité, la possibilité de le supprimer de cette liste, un bouton pour réserver le local
Un bouton "Trier", pour pouvoir les trier par prix et par taille (en m2)
Une partie "Ces locaux pourraient vous plaire", avec d'autres locaux ne faisant pas partie des favoris

Page "Contact" : JE

Cette page doit contenir les choses suivantes:

Un titre : "Contacter RokettImmo"
Un formulaire de contact avec les champs Nom, prénom, email, message, raison du contact (sélecteur) et le bouton envoyer
Une partie "Rejoignez-nous sur les réseaux sociaux" avec des boutons Instagram, Facebook et Twitter

Page "Tous les locaux" : Kévin

Cette page doit contenir les choses suivantes:

Un titre : "Tous les locaux"
Une liste des différents locaux disponible (comme sur l'accueil) avec une photo, une description, un prix
Une section "ces locaux pourraient vous plaire", avec d'autres locaux affichés

Page "A propos" : Clement

Cette page doit contenir les choses suivantes:

Un titre : "A propos"
Une description de l'équipe RokettImmo (copiez un texte au hasard ou mettez du Lorem Ipsum)
Une liste de photos de personnes avec une description pour chaque personne

Mettez-vous d'accord pour regrouper toutes vos maquettes dans un seul fichier, et collaborez pour les mettre côte à côte.

Nos verrons ensuite le prototypage pour mettre ces maquettes en conditions.

Jour 4

Le but de ces exercices va être de pratiquer les métiers vu pendant ces 4 sessions
Développement, design, déploiement.

L'objectif est de créer une page qui vous présente : en faisant le wireframe, la maquette, l'intégration de la page puis le déploiement.

Cette page doit contenir

Votre nom et votre prénom 👀
Votre adresse e-mail 📧
Une photo de vous 📸
Une description de vous 💬
Un bouton avec un lien vers votre compte Linkedin 💼
Un formulaire pour vous contacter 📩

Étape 1 : Faire le wireframe

Pour rappel, un wireframe est un schéma fonctionnel utilisé lors de la conception d'une interface utilisateur pour définir les zones et composants qu'elle doit contenir 𝍌

Petit exemple pour se rafraîchir la mémoire :

Pour faire votre wireframe, rendez-vous sur Whimsical, l'outil qu'on a déjà utilisé :

Étape 2 : Faire la maquette UI

Maintenant que vous avez le wireframe, il est temps de donner un peu de vie à tout ça avec des couleurs, une belle typo et puis quelques détails graphiques 🎨

Petit exemple pour se rafraîchir la mémoire :

Étape 3 : Intégrer cette belle maquette

Vous vous souvenez de la première session ? 😈 Aujourd'hui, on va remettre les mains dans le code pour intégrer cette maquette.

Pour ça, ouvrez votre éditeur de code (Sublime Text) par exemple.
Créez un fichier index.html, un fichier style.css et un dossier images

Dans le fichier index.html, copiez le code suivant :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ma magnifique page</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
	Ici, vous ajoutez le contenu demandé (nom, prénom, email, photo, bouton etc..)
  </body>
</html>

Pour vous aider à ajouter le contenu dans la page, quelques petits rappels :

Pour ajouter un paragraphe (nom/email/prénom par exemple) :

<p>Mon adresse mail : killian@async-agency.com</p>

Pour ajouter une image (votre photo par exemple) :

<img src="liendelimage.jpg" alt="Description de l'image"/>

Pour ajouter un lien externe (vers votre Linkedin par exemple)

<a href="https://lienexterne.com">Du texte</a>

Étape 4 : Déployer la page

Il est maintenant temps de déployer sur l'internet mondiale la magnifique page que vous venez d'intégrer 😎

Pour cela, on va utiliser le FTP (File Transfer Procol). Pour déployer sur internet avec FTP, on va utiliser le logiciel FileZilla, commencez par le télécharger :

Une fois que vous lancez le logiciel, vous devrez tomber sur cette fenêtre :

L'idée ici est de se connecter au serveur, pour pouvoir déployer sur le site https://acompleter.fr

Pour ça, rentez ces identifiants dans la barre de haut :

Identifiants de connexion
Hôte :
Utilisateur :
Mot de passe :
Port :

Une fois que vous êtes connectés, dans la fenêtre de droite, vous devriez voir un dossier avec votre prénom, glissez-y les fichiers de votre page (index.html, style.css et le dossier images)

Ça y est, vous avez déployé votre premier site ! 🔥
Allez sur la page https://acompleter.app/votreprenom pour voir comment ça rend !

Étape 5 : Le déploiement continu

On a réussi à déployer notre page, mais comme vous l'avez vu, le process est fastidieux, et faire ça à chaque modification du code prendrait du temps..

C'est là qu'intervient le déploiement continu 🤩
Cette petite merveille permet de déployer votre site automatiquement à chaque changement. C'est long la première fois, mais après, le temps gagné est impressionnant !

Pour s'initier au déploiement continu, on va utiliser un outil magique : Glitch
Cet outil vous permet de coder, voir en temps réel les changements, et déployer rapidement

Créez-vous un compte dessus :

Une fois que le compte est créé, créez un nouveau projet de type glitch-hello-website.

Vous devriez tomber sur quelque chose comme ça :

Cliquez sur index.html, et en bas, ouvrez le "preview pane"

Vous devriez tomber sur quelque chose comme ça :

C'est magique ! Au milieu, on a une prévisualisation de votre rendu, et à gauche vos fichiers.
Remplacez les contenu du index.html et du style.css par votre propre code et voyez le rendu.

Ça y est : votre site est sur Glitch ! Il ne vous reste plus qu'à le partager (le déploiement est automatique). Cliquez en haut à droite sur "Share", copiez-le lien et le tour est joué 😏