Gambas France BETA

Connexion

Pas de compte ? Incription

Application Web pour une gestion simpliste des bien immobiliers

123
AuteurMessages
linuxos#1 Posté le 23/2/2025 à 18:54:21
Un peu de sel, de poivre et la crevette sera... Bonjour,

Voici quelques captures d'écran de mon dernier projet.

Il est né de mon besoin de pouvoir concentrer toutes les informations liées a des appartements et eviter d'en avoir partout, en désordre.
Aprés maintes recherches de ce qui existait déja dans le domaine open source, soit j'ai pas trouvé un truc tout simple, soit trop compliqué, soit payant, donc pas le choix...

Je dois aussi avouer que je manquais de projet motivant en Gambas ces temps-ci donc c'est parfait.

J'aurais pu développer toute l'application en mode Desktop (Interface graphique avec GTK ou QT) mais j'ai préféré tout faire en application Web avec le composant 'gb.web.gui' que je trouve fantastique.
Bien que ce composant ne soit pas terminé, il est déja trés fonctionnel et meme si je perds des facilités comparé aux objets graphiques disponibles avec QT ou GTK en Gambas, cela me force a trouver d'autre façons de faire et pour le moment je n'ai pas eu de blocage a coucher mes idées du projet en lignes de code.

Cela permet aussi de me former plus en profondeur avec ce composant et par la même découvrir des Bugs (ou amélioration a apporter) et les remonter a Benoit pour faire grandir ce composant.

Je reconnais que cela demande de penser différement avec ce type d'application, dit WEB, car le communication entre son application en Gambas et le Navigateur Web de l'utilisateur, met en pratique des focntionnements d'une application Bureau (ou Desktop).

Cette application Web sera aussi un bon exemple pour d'autres et peut-etre une aide si ils décident de ce lancer dans ce domain de Gambas.

Trève de bavardage, voici les images pour vous donner un avant goût:






Voila
Olivier
Lorsqu'on s'occupe d'informatique, il faut faire comme les canards... Paraître calme en surface et pédaler comme un forcené par en dessous.
valaquarus#2 Posté le 23/2/2025 à 20:02:25
-- Unus Ex Altera --Tu m'as mis l'eau à la bouche.
Quand pourra t'on tester cette pépite?
Système d'exploitation : KDE Manjaro.testing ~ Version Gambas : 3.20.2
linuxos#3 Posté le 23/2/2025 à 20:29:48
Un peu de sel, de poivre et la crevette sera... Bonjour Valaquarus,

Dans une petite semaine a priori.

J'ai oublié de donner quelques details techniques:

Stockage des données dans une base de données SQLite3
- Login/MotDePasse
- Tout le reste des tables relatives aux données des Biens Immobiliers: BienImmo, Locataires, Notes, Documents Uploadé (fichiers PDF, Images, etc) (Stockage de fichiers sur disque, pas dans la BD)

- Server CADDY en amont de l'application pour avoir du HTTPS, nécessaire pour le Navigateur pour autoriser le presse-papier au cas ou, sinon si c'est juste du HTTP, le navigateur refuse.
(Le server CADDY génére tout seul, a la volé le certificat auto-signé, c'est trop cool)

Voila
Olivier
Lorsqu'on s'occupe d'informatique, il faut faire comme les canards... Paraître calme en surface et pédaler comme un forcené par en dessous.
gambix#4 Posté le 24/2/2025 à 13:58:06
La simplicité évite les erreursOuahhhh ... et c'est léché au niveau graphique ... bravo ... j'adore.

On voit que tu y a passé un peu de temps la :-)
Ce que Gambas m'a appris c'est qu'avec le temps on peut être capable de tout.
gambix#5 Posté le 24/2/2025 à 13:59:06
La simplicité évite les erreursIl faut que je m'occupe de la lettre hebdomadaire du site afin que plus de personnes puissent voir les prouesses de chacun
Ce que Gambas m'a appris c'est qu'avec le temps on peut être capable de tout.
linuxos#6 Posté le 26/2/2025 à 23:16:43
Un peu de sel, de poivre et la crevette sera... Bonjour,

Le développement de mon projet de Web Application avance a grand train.

Voici pour le moment une petite vidéo ce que ce donne...
Bien sur toutes les données sont fictives, c'est pour les tests :p


gbGestionImmobilier

Olivier
Lorsqu'on s'occupe d'informatique, il faut faire comme les canards... Paraître calme en surface et pédaler comme un forcené par en dessous.
gambix#7 Posté le 27/2/2025 à 07:24:32
La simplicité évite les erreursHa ouaiss ... quand même ... le workflow a l'air bien.

Tu t'en sors des ratés de JIT ?

Enfin une belle démo de ce que gb.web.gui peut produire.
Ce que Gambas m'a appris c'est qu'avec le temps on peut être capable de tout.
linuxos#8 Posté le 27/2/2025 à 15:33:15
Un peu de sel, de poivre et la crevette sera... Salut Gambix,

Oui je m'en sors assez bien avec GIT maintenant car Benoit a corrigé 2 bug liés justement a gb.web.gui, donc il n'y a plus de pb de 100% CPU et plus de plantage de l'IDE non plus.

Ca fonctionne plutot bien en fait.

Bientot, je posterai le projet pour que vous puissiez vous amuser avec, ou décortiquer le code.

Je n'ai pas encore réglé tous les defis mais ca avance bien.

Exemple de defis:

- Comment indiquer au mini serveur Web (libthttpd) un autre chemin sur le disque pour le répertoire Public, car dans l'application je téléverse (berk j'aime pas ce mot, plutot UPLOAD) des images et pour que le navigateur puisse les afficher, il faut obligatoirement que les images soient dans le répertoire '.public' de l'application.
Hors, lors de la creation de l'executable par l'IDE de Gambas, le répertoire '.public' est inclus dedans, donc je me retrouve avec un executable de 8Mo avec dedans 7.5Mo d'images, alors que sans les images, l'executable fait ~900Ko

Mais je vais trouver, je vais aussi demander l'aide de Benoit pour ce point.

Voila voila

En tout cas, c'est reellement beaucoup de fun de développer cette application Web.

Olivier
Lorsqu'on s'occupe d'informatique, il faut faire comme les canards... Paraître calme en surface et pédaler comme un forcené par en dessous.
gambix#9 Posté le 27/2/2025 à 16:08:08
La simplicité évite les erreursTeleverser.. ouai berk

Transférer plutôt, envoyer, .. les anglais ne sont pas emmerdé avec un télé... Ils ont juste dit..('charger vers le haut') en français download se traduirai charger. Et Upload.. en recharger ailleur.. d'où transférer.
Bin a priori les mots up et down associés a load c'est vraiment apparu avec l'informatique. Tu est donc libre de ton choix.. comme tiens déverser .. ton fichier poubelle
Ce que Gambas m'a appris c'est qu'avec le temps on peut être capable de tout.
linuxos#10 Posté le 3/3/2025 à 02:09:17
Un peu de sel, de poivre et la crevette sera... Bonjour,

Le projet d'Application Web 'gbGestion Immobilier' suit son cours, avec son lot de defis evidement.

L'application n'est pas terminée et il manque encore plusieurs parties mais les parties déja codées sont presque totalement fonctionnelles.

Afin de pouvoir aider d'autres personnesa a se lancer dans la réalisation d'Application Web (avec le composant gb.web.gui), je vous fournirai plusieurs schemas, documents, décortiquant au mieux l'intérieur de mon projet, avec une approche didactique si j'arrive a le faire.

Dans la suite de cette article, l'emploierai la notion "d'Application Web" et non de 'Site Web' (même si au final cela en est un), car dans Gambas, c'est vraiment comme developper une Application et non pas une suite de Page Web en HTML (meme si c'est possible aussi en Gambas). A part quelque fois, vous ne ferez principalement que du code Gambas (peut-etre un tout petit peu de CSS).

Afin de mieux comprendre comment fonctionne une Application Web dans Gambas, voici un petit diagramme explicatif:
Souvent il vaut mieux un bon diagramme qu'un long discours.



Utilisateur --> Navigateur Web --> [ Mini Serveur Web integrer a l'Application Web ---> .public/[ici les icones, images, css, etc...]
---> Votre Application Gambas qui génére les Pages Web ]
-----------------------------------
|
|
Utilisateur <-- Navigateur Web <----------- Les Pages Web générées par votre Application <------------------+
sont rétournées au Navigateur Web,
donc visible par l'utilisateur.

La différence avec un Simple Site Web, c'est que chaque Page envoyée au Navigateur Web, intégre un petit bout de Javascript qui surveille les actions de l'utilisateur.
Ainsi lorsque, par exemple, l'utilisateur click un bouton de la Page Web, le Navigateur Web (au travers du Javascript) informe votre Application Web, qui agit comme si cétait un Evenement normal de Gambas, et renvois au Navigateur Web uniquement le petit changement de la Page Web a modifier (en non pas l'entiereté de la Page Web modifiée), ce qui fournit le même ressenti Utilisateur qu'une application Desktop sur votre ordinateur (Terme anglais employé: Application Responsive)



Pour commencer voici, en piece jointes, le schema de la structure de la base de données et le détail de l'organisation des fichier/répertoire du projet.

De plus je vous joins 3 petites vidéos pour vous montrer comment ajouter, supprimer des Documents, Photos, ainsi que le télechargement des dis document.


Maintenant parlons un peu des défis rencontrés:

Défis 1 - Comme toute Application Web, la question de Login/Password pour se connecter est importante pour des raisons de sécurité d'accés a des données sensibles ou pas (mais pas indispensable sinon).
De plus cela sert surtout a identifier l'utilisateur qui se connecte afin de récuperer son profil, ses préferences, ainsi que déterminer a quelles partie/fonctions de l'Application il aura accès.

- Généralement, une table est la dans la Base de Donnée pour cela, contement tous les Login/Password (format encrypté), ainsi que les accès auquels ils ont droit:
Ex: Est-il 'Admin' ou pas
- As-t'il un accès en lecture seule ou en lecture/écriture
- Quelle partie de l'Application auquel il pourra accéder
- etc...

Défis 2 - La définition de la structure de la Base de données est important et doit plutot être effectué (dans les grandes lignes) dès le départ, cela permet de mieux structurer son Application et d'avoir une vue d'ensemble dès le début. Si l'Application n'intégre pas de base de données, rien est a faire.

Défis 3 - Si besoin, comment 'envoyer un document/fichier a son Application Web au travers du Navigateur qui affiche la dite Application.
Pour cela Gambas fourni l'objet 'WebFileButton' qui fait le travaille pour vous (enfin la partie la plus difficile) et il ne vous restera qu'a gérer le transfert dans Gambas.
Je reconnais que cela n'a pas été facile pour moi de comprendre comment cela fonctionne et comment le gérer en code Gambas.
Je vous invite a fouiller dans mon code pour avoir un exemple (quand j'aurai mis a disposition le projet...sous peu).

Défis 4 - Une fois que l'on a codé la partie qui permet d'envoyer un document a l'Application, il faut se pencher sur le 'comment faire pour télécharger' un document depuis l'Application Web a l'utilisateur. Dans le cas de mon Application, chaque bien Immobilier peut avoir plusieurs documents, de tous types, qui lui sont attachés, comme des documents d'Assurance, de Bail, etc..., et il faut bien que l'utilisateur puisse les consulter au besoin.
Ici le défis est un peu plus compliqué car selon le type de document, il faut agir différent. Par exemple, pour un fichier PDF, utilisateur généralement click sur le document dans la Page Web et c'est le Navigateur qui reconnait que c'est un fichier PDF et donc il se charge de vous le présenter directement a l'écran, aucun autre programme n'est nécéssaire de nos jours, les Navigateur Web savent faire ça. Il en va de même avec les Images, les Vidéos.
Mais dans le cas d'un fichier ZIP, généralement le Navigateur se contente de le télécharger puis de le sauvegarder sur votre disque.
On comprend rapidement ici, que plus on laisse au Navigateur la tache de Visualiser/Sauvegarder/Gérer le type de document, mieux c'est, et moins de code on a developper dans son Application Web.
Il serait possible, bien sur, d'un autre coté, possible de gérer la Visualisation des dis document directement dans l'Application Web, mais cela veut dire 'plein de code' comme: "Interpréter un fichier PDF et le visualiser a l'écran", ou un fichier Texte, etc...
Donc, si nous décidons (comme moi), d'étre un peu fainiant et de laisser faire le travail au Navigateur de Visualiser le document, il est nécessaire que le Navigateur puisse le télécharger depuis l'Application Web. Hors, cela est facile quand une Application Desktop peut acceder a votre disque dur, mais dans le cas d'une Application Web, dont le but est d'étre accéssible sur le réseau (donc a distance), et bien la, on comprends que le Navigateur ne peut plus accéder au disque dur distant ou se trouve l'Application Web qui stocke le Document directement.
De plus, il existe des restrictions au niveau des Pages Web (ou HTML) et il n'est pas possible pour une page Web qui s'affiche sur le Navigateur, d'INITIER le téléchargement du Document pour l'utilisateur, il faut absolument que ce soit une action voulue par l'Utilisateur afin de vouloir télécharger le Document ou un Fichier, en 'Cliquant' délibérement dans la Page Web.
Donc nous en venons a notre defis qui est que votre Application Web ne pourra pas INNITIER le téléchargement du dis Document pour l'utiliateur quand celui-ci cliquera sur un bouton de votre Application Web. Pour cela, il sera necessaire d'afficher dans la page de l'Application Web, un bout de pur HTML, qui déclenchera le mécanisme de 'téléchargement' depuis le Navigateur vers votre Application Web pour lui demander de vous envoyer le dis Document.
J'ai réussi ce défis, comme montré dans la vidéo, en affichant un panneau qui demande a l'Utilisateur de 'clicker' sur un Bouton pour lancer le Téléchargement du Document vers le Navigateur.
Comme vous le constaterez dans la vidéo, le lien (ou bouton) qui est présenté a l'Utilisateur n'est valable que quelques secondes et devient inopérant si l'utilisateur ne clique pas dessus. Ceci est du a un autre defis que je n'ai pas pu régler normalement (du moins je n'ai pas su le faire jusqu'a present), car la fonctionnalité n'est pas présente dans le composant gb.web.gui (J'espere ne pas dire de bétise la ??)
En effet, tout document, fichier, image, etc... qui font partie d'un page Web (ici celle renvoyée par l'Application Web), est envoyé par le Mini Serveur intégré dans l'Application Web. Hors celui n'a accès qu'au répertoire '.public' du projet Gambas, que ce soit lors de l'execution par IDE, ou a l'interieur de l'executable *.gambas. Partant de ce constat, tous les documents, photos, envoyés a mon Application Web devront obligatoirement attérir dans le répertoire '.public/' afin que le Mini Serveur Web puisse par la suite les envoyer au Navigateur. Ici donc se pose un véritable problème car de ce fait, tout fichier, présent dans le répertoire '.public' sera accéssible par une simple requette Web depuis le Navigateur de l'utilisateur, ainsi que les fichiers importants, qui ne sont accéssibles normalement, que si l'utilisateur est connecté avec un Login/Password.
Généralement ce problème n'arrive pas avec les Sites Web dans d'autre langage, car lors de la premiere connection au Site, avec Login/Password, le Site Web génére un 'Jeton' (longue suite de valeurs Hexadecimales) qui va suivre l'utilisateur durant toute sa session, et ainsi, toute demande de fichier, image, etc... au Site Web, devra inclure ce dis 'Jeton' dans la requette, pour prouver que l'utilisateur est bien autorisé. Ce 'Jeton' expirera si l'utilisateur se déconnecte (Logout) ou si il n'y a pas eu d'activité de la part de l'Utilisateur durant le temps autorisé de la session. Dans le cas de Gambas (ou plutot gb.web.gui), cela ne fonctionne pas car le Mini Serveur Web de l'Application Web est comme qui dirait autonome, il n'a de compte a rendre a personne quand il recoit une requette depuis le Navigateur, donc en aucun cas il ne se préoccupe de vérifier si un quelconque 'Jeton' est valide ou pas.
Tout ceci pour vous expliquer, pourquoi dans la vidéo je créer un 'lien symbolique temporaire' dans le répertoire '.public/lien_document/' vers le vrai lieu ou ce trouve the fichier a télécharger par l'Utilisateur. De cette façon, seul l'Utilisateur pendant un cours instant, pourra télécharger le fichier, grâce au 'Lien symbolique', et juste aprés quelques, le 'Lien sympbolique" disparaitra. L'utilisateur aura eu le temps de télécharger le Document, mais apres quelques secondes, plus personne ne pourra le télécharger, le 'Lien sympbolique' aura disparu. Je suis conscient que ce n'est surrement pas le meilleur façon de procéder, mais pour le moment je n'ai pas trouvé mieux, ou je n'ai pas su faire.

Je m'arrete ici ma très longue explication, en espérant que ce sera un peu compréhensible.

N'hesitez a revenir vers moi si certain passages sont Lunaire... :)

Diagramme Base de donnée:


Structure Fichiers du Projet


Vidéo Ajout document: Video_Ajout_document.mp4

Vidéo Ajout Photo: Video_Ajout_suppression_photo.mp4

Vidéo Téléchargement Document: Video_telechargement_document.mp4

Voila

Olivier
Lorsqu'on s'occupe d'informatique, il faut faire comme les canards... Paraître calme en surface et pédaler comme un forcené par en dessous.
valaquarus#11 Posté le 3/3/2025 à 09:43:54
-- Unus Ex Altera --Bonjour Olivier,
m'autorises tu à reprendre tout cela sous forme d'un tutoriel à insérer dans le wiki ou veux tu t'en charger afin que ton exemple ne se perdre pas au fond du forum, le temps venant à passer.
Si oui, il faudra me faire parvenir les images à insérer et éventuellement le texte correctif.
Philippe.
Système d'exploitation : KDE Manjaro.testing ~ Version Gambas : 3.20.2
linuxos#12 Posté le 3/3/2025 à 13:40:00
Un peu de sel, de poivre et la crevette sera... Bonjour valaquarus,

Pas de soucis, tu as mon autorisation.
Je t'avouerai que cela sera mieux écrit par toi, au vue de ce que tu as déja mis dans le Wiki, car j'ai tendance a partir dans des grandes phrases, pas toujours comprehensibles pour les autres.

Pas de soucis non plus pour te fournir les images ou correctif eventuels. Laisse moi juste savoir.

Je vais aussi continuer a décrire les defis recontrés et leur solution (si j'en trouve une).
Je donnerai aussi quelques conceptes a connaitre, suite a mon experience avec le composant gb.web.gui, des choses a faire et d'autres a ne pas faire.

Merci d'avance de ton aide pour garder une trace de tout ça Philippe.

Olivier
Lorsqu'on s'occupe d'informatique, il faut faire comme les canards... Paraître calme en surface et pédaler comme un forcené par en dessous.
gambix#13 Posté le 3/3/2025 à 15:24:30
La simplicité évite les erreursCa aurait plus sa place dans la forge non ?

Ou bien dois je faire un truc genre articles ... Le wiki c'est bien mais galère pour y retrouver ses petits
Ce que Gambas m'a appris c'est qu'avec le temps on peut être capable de tout.
linuxos#14 Posté le 3/3/2025 à 15:58:51
Un peu de sel, de poivre et la crevette sera... En effet Gambix,

Le wiki est plus structurer par theme par rapport a Gambas.

Le descriptif de mon projet serait plus proche d'un article, genre 'retour d'experience'.

D'un autre coté, il pourrait aussi venir completer le Wiki dans la section: Comment apprehender/débuter avec le composant gb.web.gui pour réaliser des Applications Web.

Je ne sais plus trop au bout du compte...

Olivier
Lorsqu'on s'occupe d'informatique, il faut faire comme les canards... Paraître calme en surface et pédaler comme un forcené par en dessous.
gambix#15 Posté le 3/3/2025 à 16:44:43
La simplicité évite les erreursEn fait ce composant est un genre de système remote. client server qui fonctionne comme un terminal virtuel et son server. Donc la session server est entièrement dédiée a un seul client (instance du programme et ram).

Cest pour cela qu'il n'y a pas de jeton.
Ce que Gambas m'a appris c'est qu'avec le temps on peut être capable de tout.
123