# Foncierpublic.com Foncierpublic.com est un site internet réalisé par l'association entreprise de l'Epita Crystal. Les deux développeurs sont Mathieu CAILLY et Thomas SAISON. Ci-dessous se trouve la documentation associé au developement et l'uitlisation du site web dans sa version 1.0 - date: 08.09.2020 - authors: Mathieu CAILLY & Thomas SAISON - version: 1.0.0 MVP - name: foncierpublic.com - client: Bénédicte Juhel # JSON-based Content System Documentation ## Description La totalité de la page d'acceuil du site, que ça soit le contenu textuel ou la disposition des éléments est customizable via un fichier de type JSON. Celui-ci est stocké sur le cloud associé au site-web. Il est récupéré lors du chargement du site. Ainsi en changeant ce fichier, vous avez la possibilité de modifier à votre guise le contenu via des briques élémentaires, que nous allons détailler plus bas, à la manière de Lego. ## Les briques élémentaires Chaque brique suit un format commun et il est essentiel que celles-ci suivent la même architecture que nous allons voir. La page d'acceuil a une structure en arbre, ellse se décompose en **sections**. Une section possède une ou plusieurs **sous-sections**, chaqu'une possèdant un ou plusieurs **composants** en fonction de la sous-section. Voici la liste de chaque briques ainsi que la structure JSON associé. Le format JSON est un format standarisé avec une synthaxe précise. On dispose entre des accolades des clés avec une valeurs. Certaines de ces clés sont nécéssaires, d'autres sont optionnelles. Un champs peut être du texte qui sera alors à un emplacement précis de l'élément, comme un titre ou le texte d'un bouton. Mais il peut aussi être une liste de briques élémentaires contenu dans lui-même. Tous les éléments ont un champs en commun, celui du type, qui est requis. Il doit être exacte et correspondre à l'un des éléments ci-dessous. ## La page d'acceuil ### Sections La section est le conteneur de une ou plusieurs sous-sections. Elles servent de présentoire à ces dernières. On peut néanmoins ajouter un titre à celle-ci via l'un des champs. Il existe deux types de section, la section simple a une colonne, et une section a deux colonnes. #### 1-col-section, la section a une colonne ##### Les champs: - type : '1-col-section', **requis** - title: _texte_, **optionnel** - subsections: \*une liste de sous-sections, **optionnel** ##### Exemple: ```json { "type": "1-col-section", "subsection": [ // Les sous-sections ] }, ``` #### 2-col-section, la section a deux colonnes ##### Les champs: - type : '2-col-section', **requis** - title: , **optionnel** - text: _texte_, **optionnel** - left*button_title: \_texte*, **optionnel** - right*button_title: \_texte*, **optionnel** - left*subsection: \_une liste de sous-sections*, **optionnel** - right*subsection: \_une liste de sous-sections*, **optionnel** ##### Exemple: ```json { "type": "2-col-section", "title": "Je suis un titre", "text": "Je suis un texte", "left_button_title": "Je suis le texte du bouton gauche", "right_button_title": "Je suis le texte du bouton droit", "left_subsection": [ // Les sous-sections à gauche ], "right_subsection": [ // Les sous-sections à droite ] }, ``` ### Les sous-sections Les sous-sections sont des briques utiles et organisatrice qui ont chaqune un style et un usage praticulier. Ce sont eux que qui vont vous permettre de disposer à votre manières les différents composants. Voici la liste des sous-sections à votre disposition: - La grille, - elle dispose les composants en une grille de 3 par 3 ou en colonne de 1 élément en version mobile - La une colonne - elle place les composants en une colonne prenant toute la largeur disponible - la deux colonnes - elle coupe l'espace en deux colonnes égales (ou une seule en version mobile) et y mets les éléments - la trois colonnes - elle coupe l'espace en trois colonnes égales (ou une seule en version mobile) et y mets les éléments - la contact - elle correspond à la partie contacte du site web - l'introduction - elle correspond à la partie introduction du site web La majorité possède un titre, un sous-titre, une image ou un logo et une liste de composant enfants. **Attention**, l'image ou le logo doit être présent sur la base de donnée firebase. Les champs évoqués sont tous contenus dans un champs requis qui se nomme **properties**, il est essentiel et requis pour chaque sous-sections. #### subsection-grid, la sous-section de grille ##### Les champs: - type: 'subsection-1-column', **requis** - properties: l'objet contenant les attributs de la sous-section, **requis** - title: _texte_, **optionnel** - subtitle: _texte_, **optionnel** - image: _le nom de l'image_, **optionnel** - children: _une liste de sous-sections_, **optionnel** ##### Exemple: ```json { "type": "subsection-grid", "properties": { "title": "je suis un titre", "subtitle": "je suis un sous-title" "image": "jesuisunlogo.svg", "children": [ // La liste de un ou plusieurs JSON de composants ] } } ``` #### subsection-1-column, la sous-section a une colonne ##### Les champs: - type: 'subsection-1-column', **requis** - properties: l'objet contenant les attributs de la sous-section, **requis** - title: _texte_, **optionnel** - subtitle: _texte_, **optionnel** - image: _le nom de l'image_, **optionnel** - children: _une liste de sous-sections_, **optionnel** ##### Exemple: ```json { "type": "subsection-1-column", "properties": { "title": "je suis un titre", "subtitle": "je suis un sous-title" "image": "jesuisunlogo.svg", "children": [ // La liste de un ou plusieurs JSON de composants ] } } ``` #### subsection-2-columns, la sous-section a deux colonnes ##### Les champs: - type: 'subsection-2-columns', **requis** - properties: l'objet contenant les attributs de la sous-section, **requis** - title: _texte_, **optionnel** - subtitle: _texte_, **optionnel** - image: _le nom de l'image_, **optionnel** - left: _un composant_, **optionnel** - right: _un composant_, **optionnel** ##### Exemple: ```json { "type": "subsection-2-columns", "properties": { "title": "je suis un titre", "subtitle": "je suis un sous-title" "image": "jesuisunlogo.svg", "left" : { //Un composant à gauche }, "right" : { //Un composant à droite } } } ``` #### subsection-3-columns, la sous-section a trois colonnes ##### Les champs: - type: 'subsection-3-columns', **requis** - properties: l'objet contenant les attributs de la sous-section, **requis** - title: _texte_, **optionnel** - subtitle: _texte_, **optionnel** - image: _le nom de l'image_, **optionnel** - left: _un composant_, **optionnel** - middle: _un composant_, **optionnel** - right: _un composant_, **optionnel** ##### Exemple: ```json { "type": "subsection-2-columns", "properties": { "title": "je suis un titre", "subtitle": "je suis un sous-title" "image": "jesuisunlogo.svg", "left" : { //Un composant à gauche }, "middle" : { //Un composant à droite } "right" : { //Un composant à droite } } } ``` #### subsection-contact, la sous-section de contact ##### Les champs: - type: 'subsection-contact', **requis** - properties: l'objet contenant les attributs de la sous-section, **requis** - title: _texte_, **optionnel** - text: _liste de texte_, **optionnel** ##### Exemple: ```json { "type": "subsection-contact", "properties": { "title": "Contactez-nous", "text": [ "Foncierpublic.com est un service en cours de développement.", "N’hésitez pas à nous contacter pour toute question." ] } } ``` #### subsection-contact, la sous-section de contact ##### Les champs: - type: 'subsection-contact', **requis** - properties: l'objet contenant les attributs de la sous-section, **requis** - title: _texte_, **optionnel** - buttons: _liste de boutons_, **requis** Le bouton suit le schéma suivant: - title: _texte_, **optionnel** - to: _url de redirection_, **requis** - icon: _nom de l'icon_, **optionnel** Le nom de l'icon est celui associé à la librairie **ant design**. ##### Exemple: ```json { "type": "subsection-intro", "properties": { "title": "Les biens publics enfin disponibles à la location", "buttons": [ { "title": "Chercher un bien à louer", "to": "/search", "icon": "search" }, { "title": "Mettre un bien en location", "to": "/proprietaire", "icon": "home" } ], "image": "introduction.svg" } } ``` ### Les composants Les composants sont les briques les plus petites. Elles sont pratiques et constituent l'aspect visuel et fonctionnel de ce que vous souhaitez faire. Là où les sections donne la structure générale, et les sous-sections servent à donner une forme plus précise, les composant sont les éléments qui vont servir à expliquer, rediriger, montrer. Voici la liste des composants à disposition: - LargeCard - Une card large qui prend beaucoup d'espace, l'image est à gauche (en haut en mobile) - L'image est ronde, elle est pratique pour montrer une personne ou un logo - ImageCard - Il s'agit d'une card où l'image est en fond de celle-ci - La card est cliquable et se soulève quand on passe sa souris par dessus - Un titre peut être mis sur celle-ci - SimpleImage - Il s'agit d'une image toute simple - Pratique avec une grille pour montrer des images non-cliquables - SmallLeftCard - Une petite card où l'image en haut est centré à gauche - Il y a un titre, un sous-titre, des textes, et une liste disponibles - SmallCenterCard - Une petite card où l'image en haut est centré au centre - Il y a un titre, un sous-titre, des textes, et une liste disponibles - CompactCard - Une petite card où l'image en haut est centré à gauche du titre - Il y a un titre, un sous-titre, des textes, et une liste disponibles - Drawer - Il s'agit d'un composant où une partie est cachée, et s'affiche grâce à un bouton à la manière d'un tiroir La grande partie des composants ont un titre, un sous-titre, une image, une liste de texte, et la possibilité de faire des bullet-listes. A noter que la plupart des textes pour les listes ou texte supportent le html pour mettre les textes en gras ou en italiques. Il suffit de mettre \<b> \</b> autour d'un mot pour le mettre en gras, et \<i> \</i> pour le mettre en italique. #### large-card, une card large - type: 'large-card', **requis** - properties: l'objet contenant les attributs du composant, **requis** - title: _texte_, **optionnel** - subtitle: _texte_, **optionnel** - image: _nom de l'image_, **requis** - text: _liste de texte_, **optionnel** - list: _liste de texte_, **optionnel** ```json { "type": "large-card", "properties": { "image": "juhel-b.jpg", "title": "Bénédicte Juhel", "subtitle": "CRÉATRICE DE FONCIERPUBLIC.COM", "text": [ "Ancienne avocate, ..." ], "list": null } }, ``` #### image-card, une card image - type: 'image-card', **requis** - properties: l'objet contenant les attributs du composant, **requis** - title: _texte_, **optionnel** - image: _nom de l'image_, **requis** - hovertitle: _texte qui apparait quand on survole l'élément_, **optionnel** - searchRedirect: _lien de redirection_, **optionnel** ```json { "type": "image-card", "properties": { "image": "entrepots-foncierpublic.jpg", "title": "Entrepôts", "hovertitle": "Voir tous les entrepôts disponibles", "searchRedirect": "entrepot" } }, ``` #### simple-image, une card image toute simple - type: 'simple-image', **requis** - properties: l'objet contenant les attributs du composant, **requis** - image: _nom de l'image_, **requis** - alt: _texte qui apparait si l'image ne charge pas_, **requis** ```json { "type": "simple-image", "properties": { "image": "societe-grand-paris.png", "alt": "Société du Grand Paris" } } ``` #### small-left-card, une petite card avec image à gauche - type: 'small-left-card', **requis** - properties: l'objet contenant les attributs du composant, **requis** - title: _texte_, **optionnel** - subtitle: _texte_, **optionnel** - image: _nom de l'image_, **optionnel** - text: _liste de texte_, **optionnel** - paragraphe: _liste de texte_, **optionnel** - list: _liste de texte_, **optionnel** ```json { "type": "small-left-card", "properties": { "image": "france.svg", "title": "Je suis un titre", "subtitle": "Et moi un mini titre", "text": [ "Un kilomètre", "Deux kilomètres", "..." ], "list": [ "One", "Two", "Three", "Viva"] } }, ``` #### small-center-card, une petite card avec image au centre - type: 'small-center-card', **requis** - properties: l'objet contenant les attributs du composant, **requis** - title: _texte_, **optionnel** - subtitle: _texte_, **optionnel** - image: _nom de l'image_, **optionnel** - text: _liste de texte_, **optionnel** - paragraphe: _liste de texte_, **optionnel** - list: _liste de texte_, **optionnel** ```json { "type": "small-centered-card", "properties": { "paragraphe": [ "<i>« Foncierpublic.com est ... </i>", "<i>Les aménageurs ...</i>" ], "text": ["un texte diférent un peu plus petit"], "list": ["un", "deux", "trois"] } } ``` #### small-compact-card, une petite card avec image à gauche - type: 'small-compact-card', **requis** - properties: l'objet contenant les attributs du composant, **requis** - title: _texte_, **optionnel** - subtitle: _texte_, **optionnel** - image: _nom de l'image_, **optionnel** - text: _liste de texte_, **optionnel** - paragraphe: _liste de texte_, **optionnel** - list: _liste de texte_, **optionnel** ```json { "type": "small-compact-card", "properties": { "image": "foundation.svg", "title": "Organismes privés chargés d'une mission de service public", "list": [ "Sociétés d’économie mixte", "Concessionnaires de services publics", "Fondations et associations reconnues d’utilité publique", "Associations culturelles, ... " ] } } ``` #### drawer, une tiroir C'est l'unique composant qui possède des sous-sections comme fils. - type: 'drawer', **requis** - properties: l'objet contenant les attributs du composant, **requis** - open*button: \_texte*, **requis** - close*button: \_texte*, **requis** - children: _liste de sous-sections_, **requis** ```json { "type": "drawer", "properties": { "open_button": "En savoir plus", "close_button": "Réduire", "children": [ { "type": "subsection-1-column", // Une sous-section "properties": { "children": [ // ... ] } } ] } } ``` ### Le footer De la même façon que la page d'acceuil, le footer possède un fichier JSON associé. ```json { "name": "footer", "content": [ { "image": "logo_foncier-public4.png", "text": "Foncierpublic.com a pour ambition d'offrir au patrimoine foncier public une visibilité auprès des opérateurs privés et porteurs de projets à la recherche de biens immobiliers à louer, dans un cadre simplifié et sécurisé." }, { "title": "", "links": [ { "title": "Mentions légales", "url": "mention_legales" }, { "title": "Politique de confidentialité", "url": "politique_de_confidentialité" }, { "title": "CGV", "url": "cgv" } ] } ] } ``` # Database Documentation La base de donnée associé au site-web utilise la solution Google Firebase. Ci-dessous les schémas respectifs des différentes base de donnée utilisé. # database documentation ## Realtime database Realtime database est la section dans firebase qui va garder en mémoires les informations relative au site comme les biens likés par les utilisateurs, les suggestions ajoutées dans les recherches, et les informations complémentaire des utilisateurs. ```json { "likes": ..., "suggestions": ..., "users": ... } ``` ### likes Le champ like est une liste d'userid, qui pour chaque user va stocker une liste d'id qui correspond a chaque bien liké. ```json { "likes": { $USERID: { "user_likes": [ $BIENID, $BIENID, $BIENID, ... ] }, ... }, } ``` ### suggestions Le champ suggestion est une liste d'objects qui correspond a chaque suggestion, il contient le champ content qui correspond a ce que l'utilisateur a suggéré, le type qui est le type de la suggestion (environnement, type, usage, etc...) et l'uid qui est l'user qui a donné la suggestion. ```json { "suggestions": { $SUGGESTIONID: { "content": "content string", "type": "suggestion type (env, type)", "uid": $USERID }, ... }, } ``` ### users Le champs _user_, qui garde les informations complémentaires pour chaque utilisateur, ces informations sont renseignées lors de l'inscription. ```json { "users": { "user-id": { "civility": $USERCIVILITY, "email": $USEREMAIL, "firstname": $USERFIRSTNAME, "fonction": $USERFONCTION, "name": $USERNAME, "phone": $USERPHONE, "structure": $USERSTRUCTURE } } } ``` Les champs sont tous des chaine de caractères, qui contiennent l'information correspondant au nom. Par exemple, _civility_ va garder la civilité de l'utilisateur. ## Firestore database ![firestore_screen](./firestore_screen.png) Firestore database est le deuxième type de base de donnée fournie par firebase, c'est une base de donnée NoSQL, qui à l'inverse de la base de donnée en temps réel, les utilisateurs (le front-end) ne seront pas notifiés en temps réel, mais que lorsqu'ils rafrichiront la page web. Elle est donc idéale pour tout type de donnés complexes qui n'ont pas besoin d'être récupérés en live, comme les biens disponibles par exemple. Elle va donc nous servir pour stocker ces derniers sur le site pour le moment. ```json { "biens": ... } ``` ## biens ```json { "biens": [ $BIENID: { "contraintes": $BIENCONTRAINTES, "contrat": $BIENCONTRAT, "description": $BIENDESCRIPTION, "id": $BIENID, "localisation": $BIENLOCALISATION, "position": $BIENPOSITION, "loyer_annuel": $BIENLOYER_ANNUEL, "loyer_mensuel": $BIENLOYER_MENSUEL, "name": $BIENNAME, "properties": $BIENPROPERTIES, "search_description": $BIENSEARCHDESCRIPTION, "surface": $BIENSURFACE }, ... ] } ``` ## `contraintes` (\$BIENCONTRAINTES) Les contraintes du bien ```js type: String; exemple: "Travaux à prévoir, notamment de mise aux normes pour l’électricité, la sécurité incendie, le désenfumage. Sanitaires à remplacer."; ``` Si ce champ n'est pas défini, l'onglet "contraintes" n'apparait pas sur la page du bien. ## `contrat` (\$BIENCONTRAT) Les contrats disponible pour le bien ```js type: String; exemple: "Convention d’occupation précaire."; ``` Si ce champ n'est pas défini, l'onglet "contrat" n'apparait pas sur la page du bien. ## `description` (\$BIENDESCRIPTION) La description du bien (affichée dans la page du bien) ```js type: String; exemple: "Situé à Gennevilliers en bordure d’Asnières, à proximité de la gare du RER C, ce site d’activité est disponible pour une durée d’occupation de 3 ans. Il est composé de plusieurs bâtiments d’entrepôts et de bureaux, totalisant 8.827 m2 sur un terrain de plus de 16.000 m2. Les entrepôts totalisent une surface de 7429 m2, avec des tailles variées (de 30 m2 jusqu’à 1.900 m2). Les bureaux totalisent une surface de 1398 m2. Possibilité de stationnement sur deux parkings extérieurs. Le site peut être loué en totalité ou en partie."; ``` Si ce champ n'est pas défini, le champ description n'apparait pas dans la page du bien. ## `id` (\$BIENID) L'id du bien. C'est le numéro d'identité du bien, ce qui va servir en arrière plan a définir l'identité d'un bien, de pouvoir le différencier d'un autre, c'est aussi ce que l'on va retrouver dans l'url de la page d'un bien. ```js type: String; exemple: "4SVby4GUrkRzk5cTPxUW"; ``` L'id est obligatoire, il doit être généré automatiquement (explication dans la partie "ajouter un bien"). ## `position` (\$BIENPOSITION) Le geopoint utilisé pour localiser le bien. C'est le point de localisation précis qui va être utilisé pour localiser le bien avec la map sur la page du bien. C'est un point très précis. ```json { "position": { "Latitude": $BIENLATITUDE, "Longitude": $BIENLONGITUDE } } ``` Le champ position n'est pas obligatoire, s'il n'est pas défini, c'est la localisation (ci-dessous) qui sera utilisé pour la map. ```js type: Geopoint; ``` Geopoint est un object comportant deux champs: Latitude et Longitude. ### position.Latitude Position.Latitude défini la latitude du point, c'est un nombre de type float. ```js type: Geopoint; description: "La Latitude du bien."; exemple: 48.919664; ``` ### position.Longitude Position.Latitude défini la longitude du point, c'est un nombre de type float. ```js type: Geopoint; description: "La Longitude du bien."; exemple: 2.313502; ``` ## `localisation` (\$BIENLOCALISATION) Le nom de la ville où ce situe le bien. C'est ce qui va être utilisé pour afficher la ville du bien, et sur la page de recherche et sur la page du bien. De plus, si le champ position (geopoint) n'est pas renseigné, c'est ce qui va être utilisé pour la map du bien sur la page du bien. ```js type: String; exemple: "GENNEVILLIERS"; ``` ## `loyer_annuel` (\$BIENLOYER_ANNUEL) Le loyer annuel ```js type: Number; description: "Le loyer annuel du bien."; exemple: 50000; ``` Si il n'est pas renseigné il sera automatiquement calculé en fonction du loyer_mensuel ## `loyer_mensuel` (\$BIENLOYER_MENSUEL) Le loyer mensuel. ```js type: Number; description: "Le loyer mensuel du bien."; exemple: 5000; ``` Le loyer mensuel est obligatoire, pour permettre aux biens d'être trouvé dans la page de recherche. ## `name` (\$BIENNAME) Le nom du bien. ```js type: String; exemple: "Site d’activités"; ``` Le nom du bien est obligatoire. ## properties (\$BIENPROPERTIES) ```js type: Array; exemple: [usage.stockage, usage.bureaux, type.maison]; ``` Les propriétés du bien. Ce champ est un tableau de string qui va contenir les id de chaque propriété correspondant au bien courant. C'est ce qui va définir ses propriétés et qui va permettre au système de recherche par critères de fonctionner. Voici la liste des *properties* déjà existante: ### type > - type.bureaux (Bureaux) - type.commerce (Commerce) - type.entrepot (Entrepôt) - type.equipement_sportif (Equipement sportif) - type.espace_urbain (Espace urbain) - type.habitation (Habitation) - type.lieu_exposition (Lieu d'exposition) - type.local_activité (Local d'activité) - type.parking (Parking) - type.salle (Salle) - type.site_naturel (Site naturel) - type.terrain_agricole (Terrain agricole) - type.terrain_nu (Terrain nu) ### usage > - usage.bureaux (Bureaux) - usage.logement (Logement) - usage.commerce (Commerce) - usage.activite_liberale (Activité libérale) - usage.formation (Formation) - usage.evenement (Événement) - usage.stockage (Stockage) - usage.tournage (Tournage) ### environnement > - environnement.ville (Ville) - environnement.village (Village) - environnement.campagne (Campagne) - environnement.parc (Parc) - environnement.bord_mer (Bord de mer) - environnement.bord_route_trottoir (Bordure de route / trottoir) - environnement.foret (Forêt) - environnement.montagne (Montagne) - environnement.bord_fleuve (Bord de fleuve) - environnement.bord_lac (Bord de lac) ### etat > - etat.excellent (Excellent état) - etat.correct (État correct) - etat.degrade (État dégradé) - etat.ruine (En ruine) ### style > - style.moyen_age (Moyen-âge) - style.rennaissance (Rennaissance) - style.henri_iv_louis_xiii (Henri IV - Louis XIII) - style.louis_xiv_louis_xv (Louis XIV - Louis XV) - style.louis_xvi_directoire (Louis XVI - Directoire) - style.premier_empire (Premier empire) - style.restauration_louis_philippe (Restauration - Louis Philippe) - style.second_empire_iiie_republique (2nd Empire - IIIE République) - style.1940_1960 (1940 - 1960) - style.1960_1980 (1960 - 1980) - style.1980_2000 (1980 - 2000) - style.contemporain (Contemporain) ## `search_description` (\$BIENSEARCH_DESCRIPTION) La description affichée dans les recherches. C'est la description qui sera affichée sur la page de recherche (pas sur la page du bien). ```js type: String; exemple: "Site d’activité de 8.827 m2 d’entrepôts et bureaux sur un terrain de plus de 16.000 m2. Situé à Gennevilliers en bordure d’Asnières, à proximité de la gare du RER C Les Grésillons. Possibilité de stationnement."; ``` ## `surface` (\$BIENSURFACE) La surface du bien. ```python type: Number exemple: 8827 ``` ## Firebase Storage Cette base de donnée permet de stocker des informations binaires tels que des images, des documents pdf, des fichiers, etc. Sont stockés les images utilisés par la page d'acceuil, ainsi que les images de chaques bien, et les contracts associés. - biens/: dossier de chaque biens et leurs images - \$BIENID - image 1 - image 2 - ... - contracts/: dossier de chaque biens et leurs contrats - \$BIENID.pdf - images/: dossier des images statiques du site - france.svg - logo.png - ... - json/: dossier des json statiques du site - homepage.json - footer.json ## Tutorials ### Comment faire pour ajouter un bien Pour ajouter un bien: - Se rendre sur [firebase](https://console.firebase.google.com). ![](./images/newdoc.png) ![](https://i.imgur.com/HrgmGcs.jpg) - Séléctionner le projet FoncierPublic (foncierpublic-ecd11) ![](https://i.imgur.com/RuoBHfG.png) - Dans le menu de gauche séléctionner "Cloud Firestore". ![](https://i.imgur.com/H4Qlp2l.png) - Cliquer sur "Ajouter un document". ![](https://i.imgur.com/MeSphdD.png) - Cliquer sur "ID généré automatiquement", puis ajouter un champ ID où vous copier/coller l'ID généré. ![](https://i.imgur.com/59Usb4o.png) - Cliquer sur "Enregistrer". - Une fois fait vous aller retrouver le document créé qui ne comporte aucun champs (sauf id). - Maintenant, vous pouvez suivre les champs défini ci-dessus dans la section firestore database pour enregistrer votre nouveau bien.